body.music-editor-page {
  --cx-bg: #07080d;
  --cx-panel: #131722;
  --cx-panel-2: #1a2030;
  --cx-panel-3: #242b3f;
  --cx-line: rgba(255,255,255,.08);
  --cx-line-strong: rgba(255,255,255,.18);
  --cx-text: #f5f7fb;
  --cx-muted: #8d96aa;
  --cx-soft: #c6cede;
  --cx-accent: var(--blue, #ff7a18);
  --cx-accent-glow: color-mix(in srgb, var(--cx-accent) 30%, transparent);
  --cx-green: #36d399;
  --cx-red: #ff5c7a;
  --cx-yellow: #ffd166;
  --cx-purple: #a855f7;
  --cx-blue: #60a5fa;
  --cx-radius: 12px;
  --cx-cell: 42px;
  --cx-snap: 5.25px;
  --cx-timeline-beats: 64;
  --cx-timeline-width: calc(var(--cx-cell) * var(--cx-timeline-beats));
  --cx-row: 34px;
  --cx-track-head: 136px;
  --cx-track-row: 68px;
  --cx-clip-height: 52px;
  --cx-shadow: 0 14px 36px rgba(0,0,0,.35);
  --cx-shadow-sm: 0 4px 16px rgba(0,0,0,.3);
  --cx-transition: .25s cubic-bezier(0.4, 0, 0.2, 1);
  --cx-transition-fast: .15s cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
}

body.music-editor-page {
  margin: 0;
  overflow: hidden;
  color: var(--cx-text);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--cx-accent) 26%, transparent), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(54,211,153,.12), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(168,85,247,.08), transparent 40%),
    linear-gradient(135deg, #07080d 0%, #10131c 48%, #080a10 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.theme-light.music-editor-page {
  --cx-bg: #f5f7fb;
  --cx-panel: #ffffff;
  --cx-panel-2: #edf1f7;
  --cx-panel-3: #dfe6f1;
  --cx-line: rgba(15,23,42,.12);
  --cx-line-strong: rgba(15,23,42,.22);
  --cx-text: #111827;
  --cx-muted: #64748b;
  --cx-soft: #334155;
  --cx-shadow: 0 14px 36px rgba(15,23,42,.12);
  --cx-shadow-sm: 0 4px 16px rgba(15,23,42,.1);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--cx-accent) 18%, transparent), transparent 32%),
    linear-gradient(135deg, #f8fafc 0%, #eef3fa 52%, #ffffff 100%);
}

body.theme-light.music-editor-page .cx-topbar {
  border-bottom-color: color-mix(in srgb, var(--cx-accent) 16%, #dbeafe);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--cx-accent) 12%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.9));
  box-shadow: 0 12px 34px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.9);
}

body.theme-light.music-editor-page .cx-topbar::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cx-accent) 24%, transparent), transparent);
}

body.theme-light.music-editor-page .cx-back,
body.theme-light.music-editor-page .cx-btn.ghost,
body.theme-light.music-editor-page .cx-zoom-controls,
body.theme-light.music-editor-page .cx-tabs button,
body.theme-light.music-editor-page .cx-mini-tools > button,
body.theme-light.music-editor-page .cx-small-btn,
body.theme-light.music-editor-page .cx-browser-section button {
  border-color: color-mix(in srgb, var(--cx-accent) 12%, #cbd5e1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--cx-accent) 3%, #ffffff));
  color: #334155;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92);
}

body.theme-light.music-editor-page .cx-btn.ghost:hover,
body.theme-light.music-editor-page .cx-back:hover,
body.theme-light.music-editor-page .cx-tabs button:hover,
body.theme-light.music-editor-page .cx-mini-tools > button:hover,
body.theme-light.music-editor-page .cx-small-btn:hover,
body.theme-light.music-editor-page .cx-browser-section button:hover {
  color: color-mix(in srgb, var(--cx-accent) 76%, #0f172a);
  border-color: color-mix(in srgb, var(--cx-accent) 36%, #bfdbfe);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--cx-accent) 11%, transparent), transparent 48%),
    #ffffff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cx-accent) 11%, transparent), inset 0 1px 0 rgba(255,255,255,.94);
}

body.theme-light.music-editor-page .cx-browser,
body.theme-light.music-editor-page .cx-inspector,
body.theme-light.music-editor-page .cx-card,
body.theme-light.music-editor-page .cx-bottom-rack {
  border-color: color-mix(in srgb, var(--cx-accent) 13%, #dbeafe);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(250,253,255,.9)),
    var(--cx-panel);
  box-shadow: 0 18px 42px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.86);
}

body.theme-light.music-editor-page .cx-panel-head,
body.theme-light.music-editor-page .cx-card-head,
body.theme-light.music-editor-page .cx-mode-toolbar {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--cx-accent) 7%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,251,255,.74));
}

body.theme-light.music-editor-page .cx-transport,
body.theme-light.music-editor-page .cx-bpm,
body.theme-light.music-editor-page .cx-time {
  border-color: color-mix(in srgb, var(--cx-accent) 14%, #dbeafe);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,247,255,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.06);
}

body.theme-light.music-editor-page .cx-time {
  color: #047857;
  text-shadow: none;
}

body.theme-light.music-editor-page .cx-bpm input,
body.theme-light.music-editor-page .cx-project-box input,
body.theme-light.music-editor-page .cx-project-box select,
body.theme-light.music-editor-page .cx-field input,
body.theme-light.music-editor-page .cx-field select,
body.theme-light.music-editor-page .cx-asset-search,
body.theme-light.music-editor-page .cx-custom-select-trigger {
  border-color: color-mix(in srgb, var(--cx-accent) 14%, #cbd5e1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.92));
  color: #111827;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

body.theme-light.music-editor-page .cx-project-box input:focus,
body.theme-light.music-editor-page .cx-project-box select:focus,
body.theme-light.music-editor-page .cx-field input:focus,
body.theme-light.music-editor-page .cx-field select:focus,
body.theme-light.music-editor-page .cx-asset-search:focus,
body.theme-light.music-editor-page .cx-bpm input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-accent) 15%, transparent), inset 0 1px 0 rgba(255,255,255,.94);
}

body.theme-light.music-editor-page .cx-custom-select-menu {
  border-color: color-mix(in srgb, var(--cx-accent) 18%, #bfdbfe);
  background: rgba(255,255,255,.98);
  box-shadow: 0 20px 46px rgba(15,23,42,.16);
}

body.theme-light.music-editor-page .cx-custom-select-menu button {
  color: #334155;
}

body.theme-light.music-editor-page .cx-custom-select-menu button:hover,
body.theme-light.music-editor-page .cx-custom-select-menu button.is-selected {
  color: color-mix(in srgb, var(--cx-accent) 78%, #0f172a);
  background: color-mix(in srgb, var(--cx-accent) 10%, #ffffff);
}

body.theme-light.music-editor-page .cx-ruler-row,
body.theme-light.music-editor-page .cx-playlist-grid {
  background:
    linear-gradient(180deg, rgba(248,251,255,.98), rgba(255,255,255,.92));
}

body.theme-light.music-editor-page .cx-ruler-corner,
body.theme-light.music-editor-page .cx-track-name {
  background:
    linear-gradient(90deg, rgba(15,23,42,.96), rgba(15,23,42,.9));
  color: #dbeafe;
  box-shadow: 10px 0 22px rgba(15,23,42,.2);
}

body.theme-light.music-editor-page .cx-ruler {
  background:
    repeating-linear-gradient(90deg, rgba(15,23,42,.035) 0 1px, transparent 1px var(--cx-snap)),
    repeating-linear-gradient(90deg, rgba(15,23,42,.08) 0 1px, transparent 1px var(--cx-cell)),
    repeating-linear-gradient(90deg, rgba(15,23,42,.16) 0 2px, transparent 2px calc(var(--cx-cell) * 4));
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

/* ===== MUSIC STUDIO LAYOUT ===== */
.cx-music-studio {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 70px;
  overflow: hidden;
}

/* ===== TOP BAR ===== */
.cx-topbar {
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(330px, auto) minmax(320px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: rgba(9,11,16,.92);
  border-bottom: 1px solid var(--cx-line);
  backdrop-filter: blur(24px);
  z-index: 20;
  position: relative;
}

.cx-topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cx-accent-glow), transparent);
}

.cx-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cx-back {
  min-width: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--cx-text);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  transition: var(--cx-transition);
  font-size: 11px;
  font-weight: 800;
}

.cx-back:hover {
  transform: translateY(-2px);
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--cx-accent-glow), 0 8px 24px rgba(0,0,0,.3);
  background: linear-gradient(145deg, color-mix(in srgb, var(--cx-accent) 20%, var(--cx-panel-2)), var(--cx-panel));
}

.cx-brand p {
  margin: 0 0 2px;
  color: var(--cx-muted);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}

.cx-brand h1 {
  margin: 0;
  max-width: 300px;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}

.cx-brand h1::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/music-2.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/music-2.svg") center / contain no-repeat;
  opacity: .88;
}

/* ===== TRANSPORT CONTROLS ===== */
.cx-transport {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 7px;
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  box-shadow: var(--cx-shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
}

.cx-transport .cx-btn {
  min-width: 36px;
  width: 36px;
  height: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  padding: 0;
  font-size: 0;
  transition: var(--cx-transition);
}

.cx-transport .cx-btn.play {
  min-width: 44px;
  width: 44px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 0;
  box-shadow: 0 0 24px var(--cx-accent-glow), 0 14px 36px color-mix(in srgb, var(--cx-accent) 24%, transparent);
}

.cx-transport .cx-btn.play:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px var(--cx-accent-glow), 0 18px 48px color-mix(in srgb, var(--cx-accent) 32%, transparent);
}

.cx-transport .cx-btn.playing,
.cx-transport .cx-btn.is-playing {
  background: linear-gradient(135deg, var(--cx-green), color-mix(in srgb, var(--cx-green) 56%, #000 44%));
  box-shadow: 0 0 24px color-mix(in srgb, var(--cx-green) 30%, transparent);
}

.cx-transport .cx-btn::after,
.cx-actions .cx-btn::after,
.cx-back::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 17px;
  height: 17px;
  display: block;
  background: currentColor;
  transform: translate(-50%, -50%);
  -webkit-mask: var(--btn-icon) center / contain no-repeat;
  mask: var(--btn-icon) center / contain no-repeat;
}

.cx-back {
  font-size: 0;
  --btn-icon: url("https://api.iconify.design/lucide/arrow-left.svg");
}

.cx-transport [data-transport="rewind"] {
  --btn-icon: url("https://api.iconify.design/lucide/skip-back.svg");
}

.cx-transport [data-transport="play"] {
  --btn-icon: url("https://api.iconify.design/lucide/play.svg");
}

.cx-transport [data-transport="play"].is-playing {
  --btn-icon: url("https://api.iconify.design/lucide/pause.svg");
}

.cx-transport [data-transport="pause-stop"] {
  --btn-icon: url("https://api.iconify.design/lucide/square.svg");
}

.cx-transport [data-transport="pause-stop"].is-playing {
  --btn-icon: url("https://api.iconify.design/lucide/pause.svg");
}

.cx-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.cx-disabled-action {
  opacity: .58;
}

.cx-disabled-action:hover {
  transform: none;
  box-shadow: none;
}

/* ===== BUTTONS ===== */
.cx-btn,
.cx-small-btn,
.cx-tabs button,
.cx-mini-tools button,
.cx-browser-section button {
  border: 1px solid var(--cx-line);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color: var(--cx-text);
  border-radius: 13px;
  cursor: pointer;
  transition: var(--cx-transition);
  position: relative;
  overflow: hidden;
}

.cx-btn::before,
.cx-small-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent);
  opacity: 0;
  transition: var(--cx-transition-fast);
}

.cx-btn:hover::before,
.cx-small-btn:hover::before {
  opacity: 1;
}

.cx-btn {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.cx-actions .cx-btn {
  flex: 0 1 auto;
  min-width: 0;
  width: 38px;
  height: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
  border-radius: 12px;
}

.cx-actions .cx-zoom-btn {
  border: none;
  background: none;
  box-shadow: none;
}

.cx-actions .cx-zoom-btn::before {
  display: none;
}

.cx-actions .cx-zoom-btn:hover {
  border: none;
  background: none;
  box-shadow: none;
  color: #fff;
  transform: translateY(-1px);
}

.cx-actions [data-action="new-pattern"] {
  --btn-icon: url("https://api.iconify.design/lucide/circle-plus.svg");
}

.cx-actions [data-zoom="out"] {
  --btn-icon: url("https://api.iconify.design/lucide/zoom-out.svg");
}

.cx-actions [data-zoom="in"] {
  --btn-icon: url("https://api.iconify.design/lucide/zoom-in.svg");
}

.cx-actions [data-action="toggle-lyrics"] {
  --btn-icon: url("https://api.iconify.design/lucide/notebook-pen.svg");
}

.cx-actions [data-action="toggle-lyrics"].is-active {
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--cx-accent) 36%, transparent), transparent 48%),
    color-mix(in srgb, var(--cx-accent) 16%, rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-accent) 40%, transparent);
}

.cx-actions [data-action="drum-fill"] {
  --btn-icon: url("https://api.iconify.design/lucide/badge-plus.svg");
}

.cx-actions [data-action="clear-pattern"] {
  --btn-icon: url("https://api.iconify.design/lucide/rotate-ccw.svg");
}

.cx-actions [data-action="upload-audio"] {
  --btn-icon: url("https://api.iconify.design/lucide/upload.svg");
}

.cx-actions [data-action="export-audio"] {
  --btn-icon: url("https://api.iconify.design/lucide/file-down.svg");
}

.cx-actions [data-save-project] {
  --btn-icon: url("https://api.iconify.design/lucide/save-all.svg");
}

.cx-actions [data-action-link="projects"] {
  --btn-icon: url("https://api.iconify.design/lucide/folder-open.svg");
}

.cx-btn:hover,
.cx-small-btn:hover,
.cx-tabs button:hover,
.cx-mini-tools > button:hover,
.cx-browser-section button:hover {
  transform: translateY(-2px);
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--cx-accent-glow), 0 8px 24px rgba(0,0,0,.2);
}

.cx-btn:active,
.cx-small-btn:active {
  transform: translateY(0) scale(0.97);
}

.cx-btn.primary,
.cx-btn.play {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cx-accent), color-mix(in srgb, var(--cx-accent) 56%, #000 44%));
  color: #fff;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--cx-accent) 24%, transparent);
}

.cx-btn.primary:hover,
.cx-btn.play:hover {
  box-shadow: 0 18px 48px color-mix(in srgb, var(--cx-accent) 32%, transparent);
}

.cx-btn.ghost {
  background: rgba(255,255,255,.04);
}

/* ===== TIME DISPLAY ===== */
.cx-time {
  min-width: 92px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  text-align: center;
  border: 1px solid var(--cx-line);
  border-radius: 11px;
  color: var(--cx-green);
  background: rgba(0,0,0,.3);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--cx-green) 40%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}

/* ===== BPM CONTROL ===== */
.cx-bpm {
  height: 36px;
  width: 126px;
  min-width: 126px;
  display: grid;
  grid-template-columns: 16px 26px 42px 18px;
  align-items: center;
  gap: 4px;
  padding: 4px 5px 4px 8px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
    rgba(255,255,255,.035);
  transition: var(--cx-transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  overflow: hidden;
}

.cx-bpm::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background: var(--cx-accent);
  -webkit-mask: url("https://api.iconify.design/lucide/gauge.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/gauge.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 8px var(--cx-accent-glow));
}

.cx-bpm:hover {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--cx-accent-glow);
}

.cx-bpm:focus-within {
  border-color: color-mix(in srgb, var(--cx-accent) 72%, #fff 28%);
  box-shadow:
    0 0 0 4px var(--cx-accent-glow),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.cx-bpm span {
  min-width: 0;
  color: var(--cx-muted);
  font-size: 8px;
  letter-spacing: .08em;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
  text-align: left;
}

.cx-bpm input {
  width: 42px;
  max-width: 42px;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0 6px;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  color: var(--cx-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(0,0,0,.22);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 2px 8px rgba(0,0,0,.22);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-weight: 800;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cx-bpm input:focus {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 16%, rgba(255,255,255,.08)), rgba(255,255,255,.035)),
    rgba(0,0,0,.28);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cx-accent) 48%, rgba(255,255,255,.12)),
    0 0 14px var(--cx-accent-glow);
}

.cx-bpm input::-webkit-outer-spin-button,
.cx-bpm input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.cx-bpm input[type="number"] {
  -moz-appearance: textfield;
}

.cx-bpm-steps {
  width: 18px;
  height: 26px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.cx-bpm-steps button {
  width: 18px;
  height: 12px;
  min-width: 18px;
  min-height: 12px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px;
  background: rgba(255,255,255,.055);
  color: var(--cx-soft);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: var(--cx-transition-fast);
}

.cx-bpm-steps button:hover {
  border-color: var(--cx-accent);
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 22%, rgba(255,255,255,.055));
}

/* ===== WORKSPACE ===== */
.cx-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 248px;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

/* ===== PANELS ===== */
.cx-browser,
.cx-inspector,
.cx-card,
.cx-bottom-rack {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--cx-panel);
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  box-shadow: var(--cx-shadow);
  backdrop-filter: blur(12px);
  transition: var(--cx-transition);
}

.cx-browser,
.cx-inspector {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cx-browser {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--cx-accent) 44%, transparent) transparent;
}

.cx-browser::-webkit-scrollbar {
  width: 6px;
}

.cx-browser::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-accent) 42%, transparent);
}

.cx-panel-head {
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--cx-line);
  background: rgba(255,255,255,.02);
}

.cx-panel-head h2,
.cx-card-head h2 {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: uppercase;
}

.cx-panel-head small,
.cx-card-head p {
  display: block;
  margin-top: 4px;
  color: var(--cx-muted);
  font-size: 10px;
  line-height: 1.4;
}

/* ===== BROWSER ===== */
.cx-browser-section {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
}

.cx-browser-assets {
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
}

.cx-browser-section h3 {
  margin: 0 0 8px;
  color: var(--cx-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
}

.cx-browser-section button {
  width: 100%;
  min-height: 30px;
  margin-bottom: 6px;
  padding: 0 10px;
  text-align: left;
  color: var(--cx-soft);
  background: rgba(255,255,255,.03);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--cx-transition);
}

.cx-browser-section button:hover {
  background: color-mix(in srgb, var(--cx-accent) 12%, rgba(255,255,255,.03));
  color: #fff;
}

.cx-browser-section button .btn-icon {
  font-size: 18px;
  width: 28px;
  text-align: center;
}

/* ===== ASSETS ===== */
.cx-assets {
  min-height: 96px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  border-radius: 12px;
}

.cx-assets:empty,
.cx-assets:has(p) {
  border: 1px dashed color-mix(in srgb, var(--cx-accent) 26%, var(--cx-line));
  padding: 8px;
}

.cx-asset-search {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--cx-text);
  padding: 8px 10px;
}

.cx-asset-search::placeholder {
  color: var(--cx-muted);
}

.cx-import-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 8px 0;
}

.cx-import-hub button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 18%, var(--cx-line));
  border-radius: 12px;
  padding: 8px 10px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--cx-accent) 14%, transparent), transparent 42%),
    rgba(255,255,255,.045);
  color: var(--cx-text);
}

.cx-import-hub button b,
.cx-import-hub button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-import-hub button b {
  font-size: 12px;
}

.cx-import-hub button span {
  color: var(--cx-muted);
  font-size: 10px;
}

.cx-device-status {
  margin: 0 0 8px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,.03);
  color: var(--cx-muted);
  font-size: 10px;
  line-height: 1.35;
}

.cx-assets p {
  margin: 0;
  color: var(--cx-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cx-asset-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  margin-bottom: 6px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)),
    rgba(255,255,255,.025);
  cursor: grab;
  user-select: none;
  transition: var(--cx-transition);
  overflow: hidden;
}

.cx-asset-item:hover {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 8%, rgba(255,255,255,.03));
  transform: translateY(-1px);
}

.cx-asset-item:active {
  cursor: grabbing;
}

.cx-asset-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 8px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--cx-green) 32%, transparent), transparent 45%),
    color-mix(in srgb, var(--cx-accent) 14%, transparent);
  overflow: hidden;
}

.cx-asset-item.is-source {
  cursor: default;
}

.cx-asset-item.is-source .cx-asset-icon {
  background: color-mix(in srgb, var(--cx-purple) 20%, transparent);
}

.cx-asset-item.is-source .cx-asset-icon span,
.cx-asset-item.is-source .cx-asset-icon::before,
.cx-asset-item.is-source .cx-asset-icon::after {
  background: var(--cx-purple);
}

.cx-asset-icon span,
.cx-asset-icon::before,
.cx-asset-icon::after {
  content: "";
  width: 4px;
  border-radius: 99px;
  background: var(--cx-green);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cx-green) 45%, transparent);
}

.cx-asset-icon span { height: 17px; }
.cx-asset-icon::before { height: 25px; }
.cx-asset-icon::after { height: 12px; }

.cx-asset-title {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--cx-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cx-asset-meta {
  min-width: 0;
  overflow: hidden;
  font-size: 10px;
  color: var(--cx-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-asset-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cx-asset-add,
.cx-asset-preview {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: var(--cx-transition);
  border: 1px solid var(--cx-line);
  font-size: 0;
  line-height: 0;
}

.cx-asset-add::before,
.cx-asset-preview::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--asset-action-icon) center / contain no-repeat;
  mask: var(--asset-action-icon) center / contain no-repeat;
}

.cx-asset-add {
  --asset-action-icon: url("https://api.iconify.design/lucide/plus.svg");
}

.cx-asset-preview {
  --asset-action-icon: url("https://api.iconify.design/lucide/play.svg");
}

.cx-asset-preview.is-playing {
  --asset-action-icon: url("https://api.iconify.design/lucide/square.svg");
  border-color: color-mix(in srgb, var(--cx-accent) 56%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 18%, rgba(255,255,255,.05));
  color: #fff;
}

.cx-asset-item.is-source .cx-asset-preview {
  --asset-action-icon: url("https://api.iconify.design/lucide/external-link.svg");
}

.cx-asset-add:hover,
.cx-asset-preview:hover {
  background: var(--cx-accent);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}

/* ===== CENTER AREA ===== */
.cx-center {
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
}

.cx-card {
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.cx-card-head {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--cx-line);
  background: rgba(255,255,255,.02);
}

/* ===== TABS ===== */
.cx-tabs,
.cx-mini-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-tabs button,
.cx-mini-tools > button,
.cx-small-btn {
  min-height: 30px;
  padding: 0 10px;
  color: var(--cx-soft);
  font-size: 12px;
  font-weight: 700;
  border-radius: 9px;
}

.cx-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 9px;
}

.cx-tabs .cx-small-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 9px;
}

.cx-tabs button::before,
.cx-tabs .cx-small-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .86;
  -webkit-mask: var(--tab-icon, var(--btn-icon)) center / contain no-repeat;
  mask: var(--tab-icon, var(--btn-icon)) center / contain no-repeat;
}

.cx-tabs button[data-view="playlist"] { --tab-icon: url("https://api.iconify.design/lucide/list-music.svg"); }
.cx-tabs button[data-view="piano-roll"] { --tab-icon: url("https://api.iconify.design/lucide/piano.svg"); }
.cx-tabs button[data-view="step-seq"] { --tab-icon: url("https://api.iconify.design/lucide/grid-3x3.svg"); }
.cx-tabs button[data-view="mixer"] { --tab-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg"); }
.cx-tabs button[data-action="toggle-step-length"] { --tab-icon: url("https://api.iconify.design/lucide/square-split-horizontal.svg"); }
.cx-tabs button[data-action="fill-hats"] { --tab-icon: url("https://api.iconify.design/lucide/circle-dot-dashed.svg"); }
.cx-tabs button[data-action="four-kick"] { --tab-icon: url("https://api.iconify.design/lucide/drum.svg"); }
.cx-tabs button[data-action="clear-row"] { --tab-icon: url("https://api.iconify.design/lucide/eraser.svg"); }
.cx-tabs button[data-action="random-velocity"] { --tab-icon: url("https://api.iconify.design/lucide/sparkles.svg"); }
.cx-tabs button[data-action="duplicate-channel-pattern"] { --tab-icon: url("https://api.iconify.design/lucide/copy-plus.svg"); }
.cx-tabs .cx-small-btn[data-add-channel] { --btn-icon: url("https://api.iconify.design/lucide/plus-circle.svg"); }

.cx-tabs .cx-small-btn[data-add-channel]::before {
  position: static;
  inset: auto;
  flex: 0 0 14px;
  opacity: .86;
  background: currentColor;
}

.cx-mini-tools > button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 9px;
}

.cx-mini-tools > button::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .86;
  -webkit-mask: var(--mini-icon) center / contain no-repeat;
  mask: var(--mini-icon) center / contain no-repeat;
}

.cx-mini-tools > button[data-view="playlist"] { --mini-icon: url("https://api.iconify.design/lucide/list-music.svg"); }
.cx-mini-tools > button[data-view="piano-roll"] { --mini-icon: url("https://api.iconify.design/lucide/piano.svg"); }
.cx-mini-tools > button[data-view="step-seq"] { --mini-icon: url("https://api.iconify.design/lucide/grid-3x3.svg"); }
.cx-mini-tools > button[data-view="mixer"] { --mini-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg"); }
.cx-mini-tools > button[data-action="send-pattern-to-playlist"] { --mini-icon: url("https://api.iconify.design/lucide/send-horizontal.svg"); }
.cx-mini-tools > button[data-action="quantize-notes"] { --mini-icon: url("https://api.iconify.design/lucide/magnet.svg"); }
.cx-mini-tools > button[data-action="octave-up"] { --mini-icon: url("https://api.iconify.design/lucide/arrow-up.svg"); }
.cx-mini-tools > button[data-action="octave-down"] { --mini-icon: url("https://api.iconify.design/lucide/arrow-down.svg"); }
.cx-mini-tools > button[data-tool="draw"] { --mini-icon: url("https://api.iconify.design/lucide/pencil.svg"); }
.cx-mini-tools > button[data-tool="select"] { --mini-icon: url("https://api.iconify.design/lucide/mouse-pointer-2.svg"); }
.cx-mini-tools > button[data-tool="delete"] { --mini-icon: url("https://api.iconify.design/lucide/trash-2.svg"); }

.cx-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cx-custom-select {
  position: relative;
  min-width: 126px;
  max-width: 178px;
  z-index: 20;
}

.cx-mini-tools > .cx-custom-select {
  min-width: 132px;
}

.cx-project-box .cx-custom-select {
  max-width: none;
}

.cx-custom-select-trigger {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(0,0,0,.2);
  color: var(--cx-soft);
  cursor: pointer;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: var(--cx-transition-fast);
}

.cx-custom-select-trigger::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  opacity: .75;
  -webkit-mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  transition: transform .15s ease;
}

.cx-custom-select-label,
.cx-custom-select-trigger strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-custom-select-trigger > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.cx-custom-select-label {
  display: block;
  color: var(--cx-muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.cx-custom-select-trigger strong {
  display: block;
  margin-top: 2px;
  color: var(--cx-text);
  font-size: 11px;
  line-height: 1.1;
}

.cx-custom-select:hover .cx-custom-select-trigger,
.cx-custom-select.is-open .cx-custom-select-trigger {
  border-color: color-mix(in srgb, var(--cx-accent) 48%, var(--cx-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 14%, rgba(255,255,255,.055)), rgba(255,255,255,.018)),
    rgba(0,0,0,.24);
}

.cx-custom-select.is-open .cx-custom-select-trigger::after {
  transform: rotate(180deg);
}

.cx-custom-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  min-width: 100%;
  max-height: 220px;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--cx-line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--cx-panel) 94%, #000 6%);
  box-shadow: 0 18px 46px rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transform-origin: top center;
  transition: opacity .14s ease, transform .14s ease;
}

.cx-custom-select.is-open {
  z-index: 80;
}

.cx-custom-select.is-open .cx-custom-select-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.cx-custom-select.is-floating .cx-custom-select-menu {
  position: fixed;
  right: auto;
  z-index: 900;
  transform-origin: top center;
}

.cx-custom-select.is-floating.opens-up .cx-custom-select-menu {
  transform-origin: bottom center;
}

.cx-custom-select-menu button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cx-soft);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.cx-custom-select-menu button:hover,
.cx-custom-select-menu button.is-selected {
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 18%, rgba(255,255,255,.04));
}

.cx-custom-select-menu button.is-selected::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
}

.cx-mode-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--cx-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16)),
    rgba(0,0,0,.18);
}

.cx-mode-toolbar button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  padding: 0 11px 0 9px;
  background: rgba(255,255,255,.035);
  color: var(--cx-soft);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.cx-mode-toolbar button::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .86;
  -webkit-mask: var(--tool-icon) center / contain no-repeat;
  mask: var(--tool-icon) center / contain no-repeat;
}

.cx-mode-toolbar button[data-arrange-tool="select"] {
  --tool-icon: url("https://api.iconify.design/lucide/mouse-pointer-2.svg");
}

.cx-mode-toolbar button[data-arrange-tool="draw"] {
  --tool-icon: url("https://api.iconify.design/lucide/pencil.svg");
}

.cx-mode-toolbar button[data-arrange-tool="slice"] {
  --tool-icon: url("https://api.iconify.design/lucide/scissors.svg");
}

.cx-mode-toolbar button[data-arrange-tool="mute"] {
  --tool-icon: url("https://api.iconify.design/lucide/volume-x.svg");
}

.cx-mode-toolbar button[data-arrange-tool="fade"] {
  --tool-icon: url("https://api.iconify.design/lucide/waves.svg");
}

.cx-mode-toolbar button[data-arrange-tool="automation"] {
  --tool-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg");
}

.cx-mode-toolbar button:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 38%, var(--cx-line));
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 10%, rgba(255,255,255,.04));
}

.cx-mode-toolbar button.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--cx-accent) 58%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 34%, rgba(255,255,255,.08)), color-mix(in srgb, var(--cx-accent) 22%, rgba(0,0,0,.18)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cx-accent) 16%, transparent);
}

.cx-asset-add {
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 24%, rgba(255,255,255,.04));
}

.cx-tabs button.active,
.cx-mini-tools > button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--cx-accent), color-mix(in srgb, var(--cx-accent) 60%, #000 40%));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cx-accent) 20%, transparent);
}

/* ===== EDITOR VIEWS ===== */
.cx-editor-view {
  display: none;
  min-height: 0;
  overflow: hidden;
  flex: 1;
  opacity: 0;
  transition: opacity .3s ease;
}

.cx-editor-view.active {
  display: flex;
  opacity: 1;
  animation: fadeInView .3s ease forwards;
}

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

/* ===== PLAYLIST ===== */
.cx-playlist-body {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-rows: 34px 1fr;
}

.cx-ruler-row {
  display: grid;
  grid-template-columns: var(--cx-track-head) 1fr;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--cx-line-strong);
  background: rgba(0,0,0,.3);
  position: sticky;
  top: 0;
  z-index: 10;
}

.cx-ruler-corner {
  position: relative;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 7px 0 9px;
  color: var(--cx-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-right: 1px solid var(--cx-line);
  background:
    linear-gradient(90deg, rgba(10,12,18,1), rgba(10,12,18,.99));
  box-shadow: 10px 0 18px rgba(0,0,0,.22);
}

.cx-ruler {
  display: grid;
  grid-template-columns: repeat(var(--cx-timeline-beats), var(--cx-cell));
  width: var(--cx-timeline-width);
  min-width: var(--cx-timeline-width);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px var(--cx-snap)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px var(--cx-cell)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px calc(var(--cx-cell) * 4));
}

.cx-ruler span {
  display: flex;
  align-items: center;
  padding-left: 9px;
  border-right: 1px solid var(--cx-line);
  color: var(--cx-muted);
  font-size: 10px;
  font-weight: 700;
}

.cx-ruler span:nth-child(4n) {
  color: var(--cx-text);
  font-weight: 800;
}

.cx-ruler span:hover {
  background: color-mix(in srgb, var(--cx-accent) 10%, transparent);
  color: #fff;
}

/* ===== PLAYHEAD ===== */
.cx-playhead {
  position: absolute;
  top: 34px;
  bottom: 0;
  left: var(--cx-track-head);
  width: 2px;
  background: color-mix(in srgb, #fff 86%, var(--cx-accent));
  box-shadow: 0 0 14px var(--cx-accent), 0 0 28px color-mix(in srgb, var(--cx-accent) 24%, transparent);
  z-index: 12;
  pointer-events: auto;
  cursor: ew-resize;
  transform: translateX(0);
  transition: none;
}

.cx-playhead::before {
  content: '';
  position: absolute;
  top: -34px;
  left: -9px;
  width: 20px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 60%, rgba(255,255,255,.22));
  border-radius: 8px 8px 4px 4px;
  background:
    url("https://api.iconify.design/lucide/grip-vertical.svg?color=white&width=14&height=14") center 7px / 14px 14px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 86%, #fff), var(--cx-accent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cx-accent) 24%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

/* ===== PLAYLIST GRID ===== */
.cx-playlist-grid {
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--cx-track-head) 1fr;
  grid-auto-rows: var(--cx-track-row);
  overflow: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
}

.cx-track-name {
  position: sticky;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 7px 0 9px;
  color: var(--cx-soft);
  font-size: 11px;
  font-weight: 700;
  background:
    linear-gradient(90deg, rgba(10,12,18,1), rgba(10,12,18,.98));
  border-right: 1px solid var(--cx-line-strong);
  border-bottom: 1px solid var(--cx-line);
  box-shadow: 10px 0 18px rgba(0,0,0,.22);
}

.cx-track-title {
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.15;
  text-align: left;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cx-track-title:hover {
  color: #fff;
}

.cx-track-title-input {
  min-width: 0;
  width: 100%;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 48%, var(--cx-line));
  border-radius: 8px;
  padding: 0 8px;
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
  outline: 0;
}

.cx-track-delete,
.cx-track-add-cell button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: var(--cx-soft);
  cursor: pointer;
}

.cx-track-delete {
  width: 24px;
  height: 24px;
  font-size: 0;
  opacity: .72;
}

.cx-track-delete::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/trash-2.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/trash-2.svg") center / contain no-repeat;
}

.cx-track-delete:hover {
  border-color: color-mix(in srgb, var(--cx-red) 48%, var(--cx-line));
  background: color-mix(in srgb, var(--cx-red) 12%, rgba(255,255,255,.04));
  color: #fff;
  opacity: 1;
}

.cx-track-delete:disabled {
  opacity: .28;
  pointer-events: none;
}

.cx-track-add-cell,
.cx-track-add-lane {
  min-height: 54px;
  border-bottom: 1px solid var(--cx-line);
}

.cx-track-add-cell {
  position: sticky;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  padding: 8px;
  border-right: 1px solid var(--cx-line-strong);
  background:
    linear-gradient(90deg, rgba(10,12,18,1), rgba(10,12,18,.98));
  box-shadow: 10px 0 18px rgba(0,0,0,.22);
}

.cx-track-add-cell button {
  width: 100%;
  height: 34px;
  gap: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.cx-track-add-cell button::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/plus.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/plus.svg") center / contain no-repeat;
}

.cx-track-add-cell button:hover {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 18%, rgba(255,255,255,.04));
}

.cx-track-add-lane {
  min-width: var(--cx-timeline-width);
}

.cx-track-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color, var(--cx-accent));
  box-shadow: 0 0 8px var(--dot-color, var(--cx-accent));
}

.cx-track-lane {
  position: relative;
  z-index: 1;
  min-width: var(--cx-timeline-width);
  overflow: hidden;
  border-bottom: 1px solid var(--cx-line);
  cursor: crosshair;
}

.cx-track-lane,
.cx-track-add-lane {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 1px, transparent 1px var(--cx-snap)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.052) 0 1px, transparent 1px var(--cx-cell)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px calc(var(--cx-cell) * 4)),
    rgba(255,255,255,.012);
  background-position: 0 0;
}

.cx-track-lane:hover {
  background-color: rgba(255,255,255,.018);
}

.cx-playlist-grid.is-panning,
.cx-note-grid.is-panning {
  cursor: grabbing;
  scroll-behavior: auto;
}

.cx-playlist-grid.is-panning .cx-track-lane,
.cx-note-grid.is-panning {
  cursor: grabbing;
}

body.cx-surface-panning,
body.cx-surface-panning * {
  cursor: grabbing !important;
  user-select: none !important;
}

/* ===== CLIPS ===== */
.cx-pattern-clip,
.cx-audio-clip,
.cx-recording-clip {
  position: absolute;
  top: 8px;
  height: var(--cx-clip-height);
  min-width: 72px;
  display: block;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  transition: var(--cx-transition-fast);
}

.cx-pattern-clip:hover,
.cx-audio-clip:hover,
.cx-recording-clip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2);
}

.cx-pattern-clip,
.cx-audio-clip,
.cx-recording-clip {
  box-shadow: 0 7px 20px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.15);
}

.cx-pattern-clip:hover,
.cx-audio-clip:hover,
.cx-recording-clip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2);
}

.cx-pattern-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 8px);
  opacity: .15;
}

.cx-pattern-clip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.15), transparent);
  border-radius: 14px 14px 0 0;
}

.cx-pattern-clip {
  background: linear-gradient(135deg, var(--clip-color, var(--cx-accent)), color-mix(in srgb, var(--clip-color, var(--cx-accent)) 46%, #000));
}

.cx-audio-clip {
  background: linear-gradient(135deg, var(--clip-color, var(--cx-green)), color-mix(in srgb, var(--clip-color, var(--cx-green)) 46%, #000));
}

.cx-recording-clip {
  top: 7px;
  height: calc(var(--cx-clip-height) - 4px);
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, #ef4444 62%, rgba(255,255,255,.22));
  background:
    linear-gradient(90deg, rgba(239,68,68,.34), rgba(239,68,68,.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 12px),
    color-mix(in srgb, #ef4444 22%, #172033);
  box-shadow:
    0 8px 24px rgba(239,68,68,.2),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.cx-recording-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: #ff3b3b;
  box-shadow: 0 0 0 4px rgba(239,68,68,.18), 0 0 18px rgba(239,68,68,.7);
  animation: cx-recording-pulse 950ms ease-in-out infinite;
}

.cx-recording-time {
  margin-left: auto;
  color: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 800;
}

.cx-import-hub button.is-recording {
  border-color: color-mix(in srgb, #ef4444 58%, var(--cx-border));
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(255,255,255,.06));
  color: #fecaca;
  box-shadow: 0 0 0 3px rgba(239,68,68,.13), 0 14px 34px rgba(239,68,68,.15);
}

@keyframes cx-recording-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: .55;
    transform: scale(.78);
  }
}

.cx-pattern-clip {
  top: 7px;
  height: calc(var(--cx-clip-height) - 4px);
  min-width: 64px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--clip-color, var(--cx-accent)) 38%, rgba(255,255,255,.16));
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)),
    color-mix(in srgb, var(--clip-color, var(--cx-accent)) 18%, #172628);
  box-shadow:
    0 4px 12px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.045);
}

.cx-pattern-clip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--clip-color, var(--cx-accent)) 64%, rgba(255,255,255,.28));
  box-shadow:
    0 8px 18px rgba(0,0,0,.42),
    0 0 0 1px color-mix(in srgb, var(--clip-color, var(--cx-accent)) 32%, transparent),
    inset 0 0 0 1px rgba(255,255,255,.07);
}

.cx-pattern-clip::before,
.cx-pattern-clip::after {
  display: none;
}

.cx-pattern-clip.is-muted,
.cx-audio-clip.is-muted,
.cx-recording-clip.is-muted {
  filter: grayscale(.65) brightness(.6);
  opacity: .62;
}

.cx-clip-titlebar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  border-bottom: 1px solid rgba(0,0,0,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(0,0,0,.1)),
    color-mix(in srgb, var(--clip-color, var(--cx-accent)) 82%, #10181a);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
}

.cx-clip-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-clip-count {
  flex: 0 0 auto;
  min-width: 15px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.9);
  font-size: 8px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cx-clip-title {
  position: relative;
  z-index: 3;
  display: block;
  max-width: calc(100% - 38px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}

.cx-clip-badge {
  position: absolute;
  top: 7px;
  right: 12px;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.88);
  font-size: 10px;
}

.cx-audio-wave,
.cx-pattern-mini {
  position: absolute;
  left: 12px;
  right: 22px;
  bottom: 9px;
  height: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: .86;
}

.cx-audio-wave {
  pointer-events: none;
}

.cx-audio-wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 10px rgba(255,255,255,.18);
}

.cx-pattern-mini {
  top: 18px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: auto;
  display: block;
  overflow: hidden;
  pointer-events: none;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  opacity: .98;
}

.cx-pattern-wave-svg,
.cx-pattern-wave-line,
.cx-pattern-wave-glow,
.cx-pattern-wave-midline,
.cx-pattern-mini-empty,
.cx-pattern-mini-density {
  position: absolute;
  pointer-events: none;
}

.cx-pattern-wave-svg {
  inset: 2px 1px;
  z-index: 3;
  width: calc(100% - 2px);
  height: calc(100% - 4px);
  overflow: visible;
}

.cx-pattern-wave-line,
.cx-pattern-wave-glow {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cx-pattern-wave-glow {
  stroke: color-mix(in srgb, var(--clip-color, var(--cx-accent)) 34%, #fff 66%);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .28;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--clip-color, var(--cx-accent)) 55%, transparent));
}

.cx-pattern-wave-line {
  stroke: color-mix(in srgb, var(--clip-color, var(--cx-accent)) 18%, #f5fffb 82%);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.32));
}

.cx-pattern-wave-midline {
  left: 2px;
  right: 2px;
  top: 50%;
  z-index: 2;
  height: 1px;
  background: color-mix(in srgb, var(--clip-color, var(--cx-accent)) 36%, rgba(255,255,255,.34));
  opacity: .72;
  transform: translateY(-50%);
}

.cx-pattern-mini-empty {
  left: 3px;
  right: 3px;
  top: 50%;
  z-index: 2;
  height: 1px;
  background: rgba(255,255,255,.36);
  transform: translateY(-50%);
}

.cx-pattern-mini-density {
  inset: 0;
  z-index: 4;
  opacity: .22;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.58) 0 1px, transparent 1px 5px);
}

.cx-fade-shape {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.32), transparent);
}

.cx-volume-line {
  position: absolute;
  left: 12px;
  right: 16px;
  z-index: 4;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 10px rgba(255,255,255,.35);
}

.cx-fade-in {
  left: 0;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.cx-fade-out {
  right: 0;
  transform: scaleX(-1);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

.cx-clip-selected {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--cx-accent-glow), 0 12px 32px rgba(0,0,0,.5);
}

.cx-pattern-clip.cx-clip-selected,
.cx-audio-clip.cx-clip-selected,
.cx-recording-clip.cx-clip-selected {
  outline: 1px solid rgba(255,255,255,.86);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--clip-color, var(--cx-accent)) 82%, #fff 18%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--clip-color, var(--cx-accent)) 34%, transparent),
    0 9px 22px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.09);
}

.cx-note-resize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  cursor: ew-resize;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.2)),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.45) 4px 5px);
  border-radius: 0 12px 12px 0;
  z-index: 4;
}

.cx-note-resize:hover {
  background: rgba(255,255,255,.42);
}

.cx-pattern-clip.is-resize-edge,
.cx-audio-clip.is-resize-edge,
.cx-recording-clip.is-resize-edge {
  cursor: ew-resize;
}

.cx-clip-micro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.cx-clip-micro-grid span {
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: rgba(0,0,0,.18);
}

.cx-clip-micro-grid b,
.cx-clip-micro-grid small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-clip-micro-grid b {
  color: #fff;
  font-size: 13px;
}

.cx-clip-micro-grid small {
  margin-top: 2px;
  color: var(--cx-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.cx-clip-nudge-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.cx-clip-nudge-row button {
  min-height: 28px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--cx-soft);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}

.cx-clip-nudge-row button:hover {
  border-color: var(--cx-accent);
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 14%, rgba(255,255,255,.04));
}

.cx-compact-actions button {
  flex-basis: calc(50% - 4px);
}

/* ===== PIANO ROLL ===== */
.cx-piano-roll {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 86px 1fr;
  overflow: hidden;
  background: #10191c;
}

.cx-piano-keys {
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid rgba(117,137,134,.32);
  background:
    linear-gradient(90deg, #0c1114, #172024);
  box-shadow: inset -14px 0 24px rgba(0,0,0,.26);
}

.cx-piano-key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 10px 0 28px;
  border-bottom: 1px solid rgba(140,160,156,.12);
  font-size: 10px;
  font-weight: 800;
  color: rgba(203,215,211,.62);
  cursor: pointer;
  user-select: none;
  transition: var(--cx-transition-fast);
  text-align: right;
  letter-spacing: 0;
}

.cx-piano-key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  border-right: 1px solid rgba(0,0,0,.34);
  box-shadow: inset -4px 0 8px rgba(0,0,0,.18);
}

.cx-piano-key.white-key {
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
}

.cx-piano-key.white-key::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(204,216,210,.78));
}

.cx-piano-key.black-key {
  justify-content: flex-start;
  padding-left: 8px;
  padding-right: 8px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0 58px, rgba(0,0,0,.14) 58px 100%);
  color: rgba(184,199,195,.78);
  font-size: 8px;
}

.cx-piano-key.black-key::before {
  width: 58px;
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(180deg, rgba(34,42,45,.98), rgba(5,8,10,.98));
  box-shadow:
    inset -8px 0 12px rgba(0,0,0,.52),
    0 2px 5px rgba(0,0,0,.42),
    0 1px 0 rgba(255,255,255,.08);
}

.cx-piano-key:hover {
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 15%, rgba(255,255,255,.018));
}

.cx-piano-key.active {
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 32%, rgba(255,255,255,.02));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--cx-accent) 52%, transparent),
    inset 0 0 12px rgba(0,0,0,.32);
}

.cx-piano-key.c-note {
  color: rgba(231,244,239,.9);
}

.cx-piano-key.c-note::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--cx-accent);
  opacity: .75;
}

/* ===== NOTE GRID ===== */
.cx-note-grid {
  position: relative;
  overflow: auto;
  min-width: 0;
  background:
    repeating-linear-gradient(90deg, rgba(229,241,236,.155) 0 1px, transparent 1px calc(var(--cx-cell) * 4)),
    repeating-linear-gradient(90deg, rgba(229,241,236,.055) 0 1px, transparent 1px var(--cx-cell)),
    repeating-linear-gradient(90deg, rgba(229,241,236,.028) 0 1px, transparent 1px calc(var(--cx-cell) / 2)),
    linear-gradient(180deg, #203235, #172729);
  box-shadow: inset 0 0 42px rgba(0,0,0,.16);
}

.cx-piano-ruler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--cx-timeline-beats), var(--cx-cell));
  width: var(--cx-timeline-width);
  min-width: var(--cx-timeline-width);
  height: 26px;
  border-bottom: 1px solid rgba(229,241,236,.12);
  background:
    linear-gradient(180deg, rgba(13, 20, 23, .94), rgba(13, 20, 23, .72));
  color: rgba(231,244,239,.76);
  cursor: ew-resize;
  user-select: none;
  backdrop-filter: blur(10px);
}

.cx-piano-ruler span {
  display: flex;
  align-items: center;
  min-width: 0;
  border-right: 1px solid rgba(229,241,236,.045);
  padding-left: 6px;
  font-size: 9px;
  font-weight: 850;
}

.cx-piano-ruler span:nth-child(4n + 1) {
  color: #fff;
  border-left: 1px solid rgba(229,241,236,.14);
}

.cx-piano-playhead {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
  width: 2px;
  height: max(100%, var(--cx-piano-height, 100%));
  min-height: 100%;
  pointer-events: auto;
  cursor: ew-resize;
  background: color-mix(in srgb, #ffffff 84%, var(--cx-accent));
  box-shadow:
    0 0 12px color-mix(in srgb, var(--cx-accent) 82%, transparent),
    0 0 24px color-mix(in srgb, var(--cx-accent) 28%, transparent);
  opacity: 0;
  transform: translateX(0);
}

.cx-piano-playhead::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -7px;
  width: 16px;
  height: 18px;
  border-radius: 6px 6px 8px 8px;
  background:
    url("https://api.iconify.design/lucide/grip-horizontal.svg?color=white&width=12&height=12") center / 12px 12px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 84%, #fff), var(--cx-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cx-accent) 26%, transparent);
}

.cx-note-layer {
  position: relative;
  min-width: var(--cx-timeline-width, calc(var(--cx-cell) * 64));
  min-height: var(--cx-piano-height, calc(var(--cx-row) * 84));
}

.cx-note-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(229,241,236,.055);
  pointer-events: none;
  z-index: 0;
}

.cx-note-row.is-white {
  background: rgba(255,255,255,.018);
}

.cx-note-row.is-black {
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.03));
  border-bottom-color: rgba(229,241,236,.035);
}

.cx-note-row.is-c {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cx-accent) 34%, transparent);
}

/* ===== NOTES ===== */
.cx-note {
  position: absolute;
  z-index: 3;
  min-width: 16px;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 2px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.1)),
    color-mix(in srgb, var(--note-color, var(--cx-accent)) 78%, #d6f0d9 22%);
  border: 1px solid color-mix(in srgb, var(--note-color, var(--cx-accent)) 62%, rgba(255,255,255,.28));
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.22);
  font-size: 0;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: var(--cx-transition-fast);
  overflow: hidden;
}

.cx-note::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.15), transparent 55%);
  pointer-events: none;
}

.cx-note::after {
  content: attr(data-note-label);
  position: absolute;
  left: 4px;
  right: 9px;
  top: 50%;
  z-index: 3;
  overflow: hidden;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.58);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.cx-note:hover {
  filter: brightness(1.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 2px 7px color-mix(in srgb, var(--note-color, var(--cx-accent)) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.cx-note.selected {
  outline: 1px solid rgba(255,255,255,.9);
  outline-offset: 1px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--note-color, var(--cx-accent)) 38%, transparent),
    0 2px 9px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.cx-note:hover::after,
.cx-note.selected::after {
  opacity: 1;
}

.cx-note .cx-note-resize {
  width: 8px;
  border-radius: 0 2px 2px 0;
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,.42) 2px 3px);
  opacity: .55;
}

.cx-note .cx-note-resize:hover {
  opacity: 1;
  background: rgba(255,255,255,.34);
}

.cx-empty {
  margin: 0;
  padding: 20px;
  color: var(--cx-muted);
}

/* ===== STEP SEQUENCER ===== */
.cx-step-sequencer {
  flex: 1;
  overflow: auto;
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.cx-step-row {
  display: grid;
  grid-template-columns: 150px repeat(var(--step-count, 16), minmax(22px, 1fr));
  gap: 6px;
  align-items: center;
}

.cx-step-label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--cx-line);
  border-radius: 11px;
  background: rgba(255,255,255,.03);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--cx-transition);
}

.cx-step-label small {
  margin-left: auto;
  color: var(--cx-muted);
  font-size: 10px;
}

.cx-step-label:hover {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 8%, rgba(255,255,255,.03));
}

.cx-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--cx-accent));
  box-shadow: 0 0 8px var(--dot, var(--cx-accent));
}

.cx-step-pad {
  height: 36px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--cx-transition-fast);
  position: relative;
  overflow: hidden;
}

.cx-step-pad::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
  border-radius: inherit;
}

.cx-step-pad:nth-child(4n + 3) {
  background: rgba(255,255,255,.06);
}

.cx-step-pad:hover {
  border-color: var(--cx-accent);
  transform: scale(1.05);
}

.cx-step-pad.active {
  background: linear-gradient(135deg, var(--step-color, var(--cx-accent)), color-mix(in srgb, var(--step-color, var(--cx-accent)) 60%, #000));
  border-color: transparent;
  box-shadow: 0 0 0 3px var(--cx-accent-glow), 0 4px 12px color-mix(in srgb, var(--cx-accent) 20%, transparent);
}

.cx-step-pad.active::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: calc(var(--velocity, 88%) * .18);
  border-radius: 99px;
  background: rgba(255,255,255,.42);
}

.cx-step-pad.active::after {
  opacity: 0;
}

.cx-step-pad.playing {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 12px rgba(255,255,255,.3);
}

/* ===== MIXER ===== */
.cx-mixer {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(204px, 238px);
  gap: 12px;
  align-items: start;
  scrollbar-gutter: stable;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(circle at 12% 0, color-mix(in srgb, var(--cx-accent) 12%, transparent), transparent 28%),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 18px 18px,
    rgba(9, 12, 18, .34);
}

.cx-mixer-channel {
  position: relative;
  min-height: 0;
  height: fit-content;
  padding: 11px;
  display: grid;
  grid-template-rows: auto 22px auto auto auto;
  gap: 7px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--channel-color, var(--cx-accent)) 8%, rgba(255,255,255,.055)), rgba(255,255,255,.012)),
    #141820;
  transition: var(--cx-transition);
  box-shadow: 0 18px 38px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
}

.cx-mixer-channel.dragging {
  opacity: .48;
  transform: scale(.985);
}

.cx-mixer-channel.drop-before,
.cx-mixer-channel.drop-after {
  border-color: var(--channel-color, var(--cx-accent));
}

.cx-mixer-channel.drop-before::before,
.cx-mixer-channel.drop-after::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 99px;
  background: var(--channel-color, var(--cx-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 70%, transparent);
}

.cx-mixer-channel.drop-before::before {
  left: -7px;
}

.cx-mixer-channel.drop-after::after {
  right: -7px;
}

.cx-mixer-channel:hover {
  border-color: color-mix(in srgb, var(--channel-color, var(--cx-accent)) 45%, var(--cx-line-strong));
  transform: translateY(-1px);
}

.cx-mixer-channel.selected {
  border-color: var(--channel-color, var(--cx-accent));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--channel-color, var(--cx-accent)) 16%, transparent), rgba(255,255,255,.014)),
    #15171f;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 34%, transparent),
    0 8px 24px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.cx-mixer-channel.selected .cx-mixer-color {
  animation: cxMixerPulse 1.4s ease-in-out infinite;
}

.cx-mixer-head {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.cx-mixer-drag,
.cx-mixer-head-actions button {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
  color: var(--cx-muted);
  cursor: grab;
  display: grid;
  place-items: center;
  transition: var(--cx-transition-fast);
}

.cx-mixer-drag:active {
  cursor: grabbing;
}

.cx-mixer-drag::before,
.cx-mixer-head-actions button::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--mixer-action-icon) center / contain no-repeat;
  mask: var(--mixer-action-icon) center / contain no-repeat;
}

.cx-mixer-drag {
  --mixer-action-icon: url("https://api.iconify.design/lucide/grip-vertical.svg");
}

.cx-mixer-head-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.cx-mixer-head-actions button {
  cursor: pointer;
}

.cx-mixer-head-actions [data-duplicate-channel] {
  --mixer-action-icon: url("https://api.iconify.design/lucide/copy-plus.svg");
}

.cx-mixer-head-actions [data-delete-channel] {
  --mixer-action-icon: url("https://api.iconify.design/lucide/trash-2.svg");
}

.cx-mixer-drag:hover,
.cx-mixer-head-actions button:hover {
  border-color: var(--channel-color, var(--cx-accent));
  color: var(--cx-text);
  background: color-mix(in srgb, var(--channel-color, var(--cx-accent)) 14%, rgba(0,0,0,.18));
}

.cx-mixer-head-actions [data-delete-channel]:hover {
  border-color: #ff4d4d;
  color: #fff;
  background: rgba(255,77,77,.18);
}

.cx-mixer-head-actions button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.cx-mixer-color {
  width: 5px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--channel-color, var(--cx-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 55%, transparent);
}

.cx-mixer-name-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.cx-mixer-name {
  min-width: 0;
  color: var(--cx-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cx-mixer-sub,
.cx-mixer-state {
  color: var(--cx-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ===== METER ===== */
.cx-mixer-meter {
  position: relative;
  display: block;
  min-height: 30px;
  padding: 5px 6px;
  border-radius: 9px;
  border: 1px solid var(--cx-line);
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(255,255,255,.08) 24% 25%, transparent 25% 49%, rgba(255,255,255,.16) 49% 51%, transparent 51% 74%, rgba(255,255,255,.08) 74% 75%, transparent 75%),
    rgba(0,0,0,.32);
  overflow: hidden;
}

.cx-meter-fill {
  position: absolute;
  top: 50%;
  height: 5px;
  min-width: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  transition: width .08s linear, left .08s linear, right .08s linear, opacity .12s ease, filter .18s ease;
  opacity: .9;
}

.cx-mixer-channel:hover .cx-meter-fill {
  filter: saturate(1.25) brightness(1.08);
}

.cx-meter-fill.left {
  left: 50%;
  width: calc(var(--meter-level, 20%) / 2);
  background: linear-gradient(90deg, color-mix(in srgb, var(--channel-color, var(--cx-accent)) 50%, #fff), var(--channel-color, var(--cx-accent)));
}

.cx-meter-fill.right {
  right: 50%;
  width: calc(var(--meter-level, 20%) / 2);
  background: linear-gradient(90deg, var(--channel-color, var(--cx-accent)), color-mix(in srgb, var(--channel-color, var(--cx-accent)) 50%, #fff));
}

.cx-meter-peak {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: var(--pan-position, 50%);
  width: 3px;
  border-radius: 99px;
  background: #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 35%, transparent),
    0 0 10px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 65%, transparent);
  transition: left .08s linear;
}

.cx-mixer-main,
.cx-mixer-fx {
  display: grid;
  gap: 4px;
}

.cx-mixer-main {
  padding: 7px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.12)),
    rgba(0,0,0,.18);
}

.cx-mixer-row,
.cx-mixer-fx-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--cx-muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

.cx-mixer-row output,
.cx-mixer-fx-row output {
  justify-self: end;
  min-width: 40px;
  color: var(--cx-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-transform: none;
  font-size: 10px;
}

.cx-mixer-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 14px;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  outline: none;
  background: transparent !important;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  transition: filter .12s ease;
}

.cx-mixer-slider:hover,
.cx-mixer-slider:focus-visible {
  filter: saturate(1.25) brightness(1.08);
}

.cx-pan-row .cx-mixer-slider {
  --mixer-track-bg:
    linear-gradient(90deg, rgba(255,255,255,.16) 49%, rgba(255,255,255,.5) 49% 51%, rgba(255,255,255,.16) 51%),
    rgba(255,255,255,.08);
}

.cx-mixer-slider::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--channel-color, var(--cx-accent)) 68%, #fff), var(--channel-color, var(--cx-accent))) 0 0 / var(--control-value, 50%) 100% no-repeat,
    var(--mixer-track-bg, rgba(255,255,255,.1));
}

.cx-mixer-slider:focus-visible::-webkit-slider-runnable-track,
.cx-mixer-slider:hover::-webkit-slider-runnable-track {
  height: 5px;
}

.cx-mixer-slider::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--channel-color, var(--cx-accent)) 68%, #fff), var(--channel-color, var(--cx-accent))) 0 0 / var(--control-value, 50%) 100% no-repeat,
    var(--mixer-track-bg, rgba(255,255,255,.1));
}

.cx-mixer-slider:focus-visible::-moz-range-track,
.cx-mixer-slider:hover::-moz-range-track {
  height: 5px;
}

.cx-mixer-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  background: var(--channel-color, var(--cx-accent));
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.38);
  transition: transform .12s ease, box-shadow .12s ease;
}

.cx-mixer-slider:hover::-webkit-slider-thumb,
.cx-mixer-slider:active::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 24%, transparent), 0 2px 8px rgba(0,0,0,.4);
}

.cx-mixer-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--channel-color, var(--cx-accent));
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ===== MIXER CONTROLS ===== */
.cx-mixer-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--cx-line);
  border-radius: 7px;
  background: rgba(0,0,0,.22);
}

.cx-mixer-controls button {
  width: 24px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  background: rgba(255,255,255,.04);
  color: var(--cx-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: var(--cx-transition-fast);
}

.cx-mixer-controls button:hover {
  border-color: var(--cx-accent);
  color: #fff;
}

.cx-mixer-controls button.active {
  color: #fff;
  background: #d94141;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(217,65,65,.32);
}

.cx-mixer-controls button.solo-active {
  color: #fff;
  background: var(--cx-yellow);
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, var(--cx-yellow) 30%, transparent);
}

.cx-mixer-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.cx-mixer-route button {
  min-width: 0;
  height: 31px;
  padding: 3px 4px;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
  color: var(--cx-muted);
  cursor: pointer;
  display: grid;
  align-content: center;
  gap: 1px;
  text-align: center;
  transition: var(--cx-transition-fast);
}

.cx-mixer-route button:hover {
  border-color: var(--channel-color, var(--cx-accent));
  background: color-mix(in srgb, var(--channel-color, var(--cx-accent)) 12%, rgba(0,0,0,.18));
  color: var(--cx-text);
  transform: translateY(-1px);
}

.cx-mixer-route b {
  color: var(--cx-text);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cx-mixer-route span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cx-mixer-state {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-mixer-fx {
  padding: 5px;
  border: 1px solid var(--cx-line);
  border-radius: 7px;
  background: rgba(0,0,0,.16);
}

/* ===== ZOOM CONTROLS ===== */
.cx-zoom-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  min-height: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(255,255,255,.025);
  border: 1px solid var(--cx-line);
  border-radius: 16px;
}

.cx-zoom-btn {
  width: 32px !important;
  height: 32px;
  min-width: 32px !important;
  min-height: 32px;
  padding: 0;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 18px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.cx-zoom-btn:hover {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

@keyframes cxMixerPulse {
  0%, 100% {
    box-shadow: 0 0 10px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 42%, transparent);
  }
  50% {
    box-shadow: 0 0 18px color-mix(in srgb, var(--channel-color, var(--cx-accent)) 70%, transparent);
  }
}

.cx-zoom-level {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--cx-text);
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ===== LYRICS NOTEBOOK ===== */
.cx-lyrics-pad {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 170px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: hidden;
  resize: both;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 24%, var(--cx-line));
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
    color-mix(in srgb, var(--cx-surface) 88%, #111827);
  color: var(--cx-text);
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.cx-lyrics-pad.is-hidden {
  display: none;
}

.cx-lyrics-pad.is-dragging {
  user-select: none;
  box-shadow: 0 30px 90px rgba(0,0,0,.52), 0 0 0 4px var(--cx-accent-glow);
}

.cx-lyrics-head {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
  cursor: grab;
  touch-action: none;
}

.cx-lyrics-head:active {
  cursor: grabbing;
}

.cx-lyrics-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cx-lyrics-head b {
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cx-lyrics-head span {
  color: var(--cx-muted);
  font-size: 10px;
  font-weight: 800;
}

.cx-lyrics-window-actions {
  display: inline-flex;
  gap: 6px;
}

.cx-lyrics-window-actions button,
.cx-lyrics-tools button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: var(--cx-text);
}

.cx-lyrics-window-actions button:hover,
.cx-lyrics-tools button:hover {
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 12%, rgba(255,255,255,.05));
}

.cx-lyrics-window-actions [data-lyrics-window="minimize"]::before,
.cx-lyrics-window-actions [data-lyrics-window="close"]::before,
.cx-lyrics-tools [data-lyrics-command="insertUnorderedList"]::before,
.cx-lyrics-tools [data-lyrics-command="removeFormat"]::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--lyrics-icon) center / contain no-repeat;
  mask: var(--lyrics-icon) center / contain no-repeat;
}

.cx-lyrics-window-actions [data-lyrics-window="minimize"] { --lyrics-icon: url("https://api.iconify.design/lucide/minus.svg"); }
.cx-lyrics-window-actions [data-lyrics-window="close"] { --lyrics-icon: url("https://api.iconify.design/lucide/x.svg"); }
.cx-lyrics-tools [data-lyrics-command="insertUnorderedList"] { --lyrics-icon: url("https://api.iconify.design/lucide/list.svg"); }
.cx-lyrics-tools [data-lyrics-command="removeFormat"] { --lyrics-icon: url("https://api.iconify.design/lucide/eraser.svg"); }

.cx-lyrics-body {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.cx-lyrics-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cx-line);
}

.cx-lyrics-tools button {
  font-size: 12px;
  font-weight: 900;
}

.cx-lyrics-editor {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 15px 18px;
  outline: none;
  color: var(--cx-text);
  font-size: 14px;
  line-height: 1.62;
  white-space: normal;
}

.cx-lyrics-editor:empty::before {
  content: "Verse, hook, bridge...";
  color: color-mix(in srgb, var(--cx-muted) 70%, transparent);
}

.cx-lyrics-editor h3 {
  margin: 10px 0 6px;
  color: var(--cx-text);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
}

.cx-lyrics-editor p,
.cx-lyrics-editor ul {
  margin: 0 0 10px;
}

.cx-lyrics-editor ul {
  padding-left: 20px;
}

.cx-lyrics-pad.is-minimized {
  min-height: 48px;
  resize: none;
}

.cx-lyrics-pad.is-minimized .cx-lyrics-body {
  display: none;
}

/* ===== DEVICES MODAL ===== */
.cx-device-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(3, 7, 18, .58);
  backdrop-filter: blur(14px);
}

.cx-device-modal.is-hidden {
  display: none;
}

.cx-device-shell {
  width: min(760px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 28px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 24%, var(--cx-line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--cx-accent) 16%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    var(--cx-panel);
  box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}

.cx-device-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--cx-line);
}

.cx-device-head > div,
.cx-device-card-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.cx-device-head b,
.cx-device-card-head b {
  color: var(--cx-text);
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
}

.cx-device-head span,
.cx-device-card-head span {
  min-width: 0;
  overflow: hidden;
  color: var(--cx-muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-device-head [data-device-close],
.cx-device-card-head [data-device-refresh] {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: var(--cx-text);
}

.cx-device-head [data-device-close]::before,
.cx-device-card-head [data-device-refresh]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--device-icon) center / contain no-repeat;
  mask: var(--device-icon) center / contain no-repeat;
}

.cx-device-head [data-device-close] { --device-icon: url("https://api.iconify.design/lucide/x.svg"); }
.cx-device-card-head [data-device-refresh] { --device-icon: url("https://api.iconify.design/lucide/refresh-cw.svg"); }

.cx-device-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 12px;
  overflow: auto;
  padding: 14px;
}

.cx-device-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.04);
}

.cx-device-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cx-device-list {
  display: grid;
  gap: 7px;
}

.cx-device-list p {
  margin: 0;
  color: var(--cx-muted);
  font-size: 12px;
  line-height: 1.45;
}

.cx-device-list button {
  min-width: 0;
  display: grid;
  gap: 3px;
  border: 1px solid var(--cx-line);
  border-radius: 13px;
  padding: 9px 10px;
  background: rgba(255,255,255,.04);
  color: var(--cx-text);
  text-align: left;
}

.cx-device-list button.active {
  border-color: color-mix(in srgb, var(--cx-accent) 64%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 13%, rgba(255,255,255,.04));
  box-shadow: inset 3px 0 0 var(--cx-accent);
}

.cx-device-list button b {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-device-list button span {
  color: var(--cx-muted);
  font-size: 10px;
}

.cx-input-meter {
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  background: rgba(0,0,0,.2);
}

.cx-input-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15 68%, #ef4444);
  transition: width 70ms linear;
}

.cx-device-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cx-device-switches label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--cx-soft);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 800;
}

.cx-device-switches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cx-device-switches label i {
  order: 2;
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 34px;
  border: 1px solid color-mix(in srgb, var(--cx-muted) 32%, transparent);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  transition: var(--cx-transition-fast);
}

.cx-device-switches label i::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--cx-muted);
  transition: var(--cx-transition-fast);
}

.cx-device-switches input:checked + i {
  border-color: transparent;
  background: color-mix(in srgb, var(--cx-accent) 42%, rgba(255,255,255,.08));
}

.cx-device-switches input:checked + i::before {
  left: 17px;
  background: #fff;
}

.cx-device-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.cx-device-modes button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--cx-line);
  border-radius: 11px;
  padding: 0 8px;
  background: rgba(255,255,255,.04);
  color: var(--cx-muted);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.cx-device-modes button.active {
  border-color: color-mix(in srgb, var(--cx-accent) 58%, transparent);
  background: color-mix(in srgb, var(--cx-accent) 14%, rgba(255,255,255,.04));
  color: var(--cx-text);
}

.cx-device-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.cx-device-actions button {
  min-height: 38px;
  border: 1px solid var(--cx-line);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
  color: var(--cx-text);
  font-size: 12px;
  font-weight: 900;
}

.cx-device-actions button:hover,
.cx-device-actions button.is-active {
  border-color: transparent;
  background: var(--cx-accent);
  color: #fff;
}

.cx-device-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.cx-midi-readout {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--cx-accent) 28%, var(--cx-line));
  border-radius: 14px;
  padding: 10px;
  color: var(--cx-muted);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  text-align: center;
}

/* ===== PAN ===== */
.cx-pan-container {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.cx-pan-container label {
  font-size: 9px;
  color: var(--cx-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cx-pan {
  width: 100%;
  accent-color: var(--channel-color, var(--cx-accent));
  height: 6px;
}

/* ===== PROJECT BOX ===== */
.cx-project-box {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
}

.cx-project-box label,
.cx-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--cx-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}

.cx-project-box input,
.cx-project-box select,
.cx-field input,
.cx-field select {
  width: 100%;
  height: 34px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  outline: 0;
  color: var(--cx-text);
  background: rgba(0,0,0,.25);
  font-size: 13px;
  transition: var(--cx-transition);
  -webkit-appearance: none;
  appearance: none;
}

.cx-project-box select,
.cx-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238d96aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.cx-project-box input:focus,
.cx-project-box select:focus,
.cx-field input:focus,
.cx-field select:focus {
  border-color: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--cx-accent-glow);
  background-color: rgba(0,0,0,.35);
}

/* ===== INSPECTOR ===== */
.cx-inspector-content {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  overflow: auto;
  color: var(--cx-soft);
  font-size: 13px;
  line-height: 1.55;
}

.cx-inspector-content p {
  margin: 0 0 12px;
  color: var(--cx-muted);
  font-size: 12px;
}

.cx-inspector-grid {
  display: grid;
  gap: 10px;
}

.cx-inspector-hero,
.cx-inspector-section,
.cx-inspector-row {
  border: 1px solid color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 16%, var(--cx-line));
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(0,0,0,.1);
}

.cx-inspector-hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 14%, rgba(255,255,255,.04)), rgba(255,255,255,.025)),
    rgba(0,0,0,.12);
}

.cx-inspector-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 22%, rgba(255,255,255,.06));
  color: #fff;
}

.cx-inspector-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--inspector-icon) center / contain no-repeat;
  mask: var(--inspector-icon) center / contain no-repeat;
}

.cx-inspector-icon[data-kind="note"] { --inspector-icon: url("https://api.iconify.design/lucide/music.svg"); }
.cx-inspector-icon[data-kind="channel"] { --inspector-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg"); }
.cx-inspector-icon[data-kind="clip"] { --inspector-icon: url("https://api.iconify.design/lucide/blocks.svg"); }
.cx-inspector-icon[data-kind="ready"] { --inspector-icon: url("https://api.iconify.design/lucide/panel-right.svg"); }

.cx-inspector-hero small,
.cx-inspector-hero em {
  display: block;
  color: var(--cx-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cx-inspector-hero strong {
  display: block;
  min-width: 0;
  margin-top: 1px;
  color: #fff;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-inspector-hero em {
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.cx-inspector-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 8px;
}

.cx-inspector-stats span {
  min-width: 0;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  padding: 9px 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 8%, rgba(255,255,255,.035)), rgba(0,0,0,.18));
}

.cx-inspector-stats b,
.cx-inspector-stats small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cx-inspector-stats b {
  color: #fff;
  font-size: 13px;
  line-height: 1.1;
}

.cx-inspector-stats small {
  margin-top: 3px;
  color: var(--cx-muted);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.cx-inspector-section {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.cx-inspector-section h3 {
  margin: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cx-inspector-section .cx-field {
  display: grid;
  gap: 6px;
}

.cx-inspector-section .cx-field label {
  margin: 0;
  font-size: 9px;
  letter-spacing: .08em;
}

.cx-inspector-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.cx-inspector-row strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cx-range-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cx-range-field output {
  border: 1px solid color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 18%, var(--cx-line));
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(0,0,0,.24);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.cx-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  min-height: 18px;
  margin-top: 0;
  padding: 0;
  accent-color: var(--inspector-color, var(--cx-accent));
  background: transparent;
  cursor: pointer;
}

.cx-field input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 74%, #fff), var(--inspector-color, var(--cx-accent))) 0 0 / var(--control-value, 50%) 100% no-repeat,
    rgba(255,255,255,.1);
}

.cx-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4.5px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: var(--inspector-color, var(--cx-accent));
  box-shadow: 0 4px 12px rgba(0,0,0,.36), 0 0 0 3px color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 18%, transparent);
}

.cx-field input[type="range"]::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 74%, #fff), var(--inspector-color, var(--cx-accent))) 0 0 / var(--control-value, 50%) 100% no-repeat,
    rgba(255,255,255,.1);
}

.cx-field input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 999px;
  background: var(--inspector-color, var(--cx-accent));
}

.cx-inspector-section .cx-field input:not([type="range"]),
.cx-inspector-section .cx-field select {
  height: 36px;
  margin-top: 0;
  padding: 0 10px;
  border-color: color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 20%, var(--cx-line));
  border-radius: 10px;
  background: rgba(0,0,0,.24);
}

.cx-color-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: end;
  gap: 8px;
}

.cx-color-field label {
  grid-column: 1 / -1;
}

.cx-color-field input[type="color"] {
  width: 42px;
  padding: 3px;
}

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

.cx-inspector-actions button {
  flex: 1 1 auto;
  min-height: 36px;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  padding: 0 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  color: var(--cx-soft);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.cx-inspector-actions button[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}

.cx-inspector-actions button[data-icon]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--inspector-action-icon) center / contain no-repeat;
  mask: var(--inspector-action-icon) center / contain no-repeat;
}

.cx-inspector-actions [data-icon="play"] { --inspector-action-icon: url("https://api.iconify.design/lucide/play.svg"); }
.cx-inspector-actions [data-icon="volume-x"] { --inspector-action-icon: url("https://api.iconify.design/lucide/volume-x.svg"); }
.cx-inspector-actions [data-icon="headphones"] { --inspector-action-icon: url("https://api.iconify.design/lucide/headphones.svg"); }
.cx-inspector-actions [data-icon="rotate-ccw"] { --inspector-action-icon: url("https://api.iconify.design/lucide/rotate-ccw.svg"); }
.cx-inspector-actions [data-icon="copy-plus"] { --inspector-action-icon: url("https://api.iconify.design/lucide/copy-plus.svg"); }
.cx-inspector-actions [data-icon="rows-3"] { --inspector-action-icon: url("https://api.iconify.design/lucide/rows-3.svg"); }
.cx-inspector-actions [data-icon="sliders-horizontal"] { --inspector-action-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg"); }
.cx-inspector-actions [data-icon="magnet"] { --inspector-action-icon: url("https://api.iconify.design/lucide/magnet.svg"); }
.cx-inspector-actions [data-icon="arrow-up"] { --inspector-action-icon: url("https://api.iconify.design/lucide/arrow-up.svg"); }
.cx-inspector-actions [data-icon="arrow-down"] { --inspector-action-icon: url("https://api.iconify.design/lucide/arrow-down.svg"); }
.cx-inspector-actions [data-icon="trash-2"] { --inspector-action-icon: url("https://api.iconify.design/lucide/trash-2.svg"); }

.cx-inspector-actions button.active {
  border-color: color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 60%, transparent);
  background: color-mix(in srgb, var(--inspector-color, var(--cx-accent)) 18%, rgba(255,255,255,.04));
  color: #fff;
}

.cx-channel-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cx-note-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.cx-note-quick-actions button {
  justify-content: flex-start;
  min-height: 38px;
}

.cx-channel-inspector-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 8px;
}

.cx-channel-inspector-grid .cx-color-field {
  grid-template-columns: 1fr;
  gap: 6px;
}

.cx-channel-inspector-grid .cx-color-field input[type="color"] {
  width: 100%;
  height: 36px;
}

.cx-inspector-actions button:hover {
  border-color: color-mix(in srgb, var(--cx-accent) 44%, var(--cx-line));
  color: #fff;
  background: color-mix(in srgb, var(--cx-accent) 12%, rgba(255,255,255,.04));
}

.cx-inspector-actions button.is-danger {
  border-color: color-mix(in srgb, var(--cx-red) 42%, var(--cx-line));
  color: #fff;
}

.cx-inspector-actions button.is-danger:hover {
  background: color-mix(in srgb, var(--cx-red) 18%, rgba(255,255,255,.04));
}

.cx-hotkey-list {
  display: grid;
  gap: 7px;
}

.cx-hotkey-list span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--cx-soft);
  font-size: 11px;
}

.cx-hotkey-list kbd {
  min-width: 26px;
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  padding: 3px 5px;
  background: rgba(0,0,0,.26);
  color: #fff;
  font: 800 10px/1 'SF Mono', 'Fira Code', monospace;
  text-align: center;
}

.cx-hotkey-list b {
  margin-left: auto;
  color: var(--cx-muted);
  font-size: 10px;
  font-weight: 800;
}

/* ===== BOTTOM RACK ===== */
.cx-bottom-rack {
  min-width: 0;
  margin: 0 10px 8px;
  padding: 6px;
  overflow: hidden;
}

.cx-channel-list {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 138px);
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.cx-channel-card {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) 26px;
  gap: 7px;
  align-items: center;
  min-height: 46px;
  max-height: 52px;
  padding: 6px;
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: var(--cx-transition);
}

.cx-channel-card:hover,
.cx-channel-card.selected {
  transform: none;
  border-color: var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 10%, rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cx-accent) 28%, transparent), 0 6px 18px rgba(0,0,0,.16);
}

.cx-channel-strip {
  width: 5px;
  height: 32px;
  border-radius: 99px;
  background: var(--channel-color, var(--cx-accent));
  box-shadow: 0 0 8px var(--channel-color, var(--cx-accent));
}

.cx-channel-name {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cx-text);
}

.cx-channel-type {
  margin-top: 2px;
  color: var(--cx-muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.cx-channel-card button {
  width: 26px;
  height: 26px;
  border: 1px solid var(--cx-line);
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  color: var(--cx-soft);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  transition: var(--cx-transition-fast);
}

.cx-channel-card button:hover {
  border-color: var(--cx-accent);
  color: #fff;
}

/* ===== TOAST ===== */
.cx-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  max-width: 340px;
  padding: 14px 18px;
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  background: rgba(15,18,27,.96);
  color: #fff;
  box-shadow: var(--cx-shadow), 0 0 40px rgba(0,0,0,.4);
  backdrop-filter: blur(20px);
  animation: cxToastIn .3s cubic-bezier(0.4, 0, 0.2, 1) both;
  font-size: 13px;
  font-weight: 600;
}

.cx-toast.success {
  border-color: color-mix(in srgb, var(--cx-green) 50%, transparent);
  box-shadow: var(--cx-shadow), 0 0 30px color-mix(in srgb, var(--cx-green) 15%, transparent);
}

.cx-toast.error {
  border-color: color-mix(in srgb, var(--cx-red) 50%, transparent);
  box-shadow: var(--cx-shadow), 0 0 30px color-mix(in srgb, var(--cx-red) 15%, transparent);
}

.cx-toast.info {
  border-color: color-mix(in srgb, var(--cx-blue) 50%, transparent);
  box-shadow: var(--cx-shadow), 0 0 30px color-mix(in srgb, var(--cx-blue) 15%, transparent);
}

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

@keyframes cxToastOut {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(-10px) scale(0.95); opacity: 0; }
}

/* ===== CONTEXT MENU ===== */
.cx-context-menu {
  position: fixed;
  z-index: 200;
  min-width: 180px;
  background: rgba(15,18,27,.97);
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--cx-shadow), 0 0 40px rgba(0,0,0,.5);
  backdrop-filter: blur(20px);
  animation: cxMenuIn .15s ease both;
}

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

.cx-context-menu-item {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--cx-soft);
  transition: var(--cx-transition-fast);
}

.cx-context-menu-item:hover {
  background: color-mix(in srgb, var(--cx-accent) 15%, transparent);
  color: #fff;
}

.cx-context-menu-item .menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  opacity: .88;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}

.cx-context-menu-item span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-context-menu-divider {
  height: 1px;
  background: var(--cx-line);
  margin: 6px 0;
}

/* ===== MODAL ===== */
.cx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: grid;
  place-items: center;
  animation: fadeIn .2s ease;
}

.cx-modal {
  background: var(--cx-panel);
  border: 1px solid var(--cx-line);
  border-radius: 20px;
  padding: 24px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: var(--cx-shadow);
  animation: cxModalIn .3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes cxModalIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

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

.cx-modal h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
}

.cx-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255,255,255,.03);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--cx-accent) 40%, rgba(255,255,255,.18));
  background-clip: content-box;
}

/* ===== BEAT INDICATOR ===== */
.cx-beat-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 5;
}

.cx-beat-marker.downbeat {
  width: 2px;
  background: rgba(255,255,255,.15);
}

/* ===== WAVEFORM DISPLAY ===== */
.cx-waveform {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  opacity: 0.3;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}

.cx-waveform canvas {
  width: 100%;
  height: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .cx-workspace {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .cx-inspector {
    display: none;
  }

  .cx-topbar {
    grid-template-columns: 1fr auto;
  }

  .cx-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cx-music-studio {
    grid-template-rows: auto 1fr 88px;
  }
}

@media (max-width: 860px) {
  body.music-editor-page {
    overflow: auto;
  }

  .cx-music-studio {
    height: auto;
  }

  .cx-workspace {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .cx-browser {
    max-height: 300px;
  }

  .cx-piano-roll {
    grid-template-columns: 62px 1fr;
  }

  .cx-piano-key {
    padding-right: 6px;
    font-size: 8px;
  }

  .cx-bottom-rack {
    margin: 0 14px 14px;
  }
}

@media (max-width: 760px) {
  body.music-editor-page {
    --cx-cell: 34px;
    --cx-snap: 4.25px;
    --cx-row: 28px;
    --cx-track-head: 92px;
    --cx-track-row: 54px;
    --cx-clip-height: 38px;
    overflow: hidden;
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--cx-accent) 20%, transparent), transparent 30%),
      radial-gradient(circle at 0% 36%, rgba(54, 211, 153, .1), transparent 28%),
      linear-gradient(180deg, #080b12 0%, #0d1421 54%, #080b12 100%);
  }

  body.theme-light.music-editor-page {
    background:
      radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--cx-accent) 16%, transparent), transparent 30%),
      radial-gradient(circle at 0% 40%, rgba(20, 184, 166, .12), transparent 28%),
      linear-gradient(180deg, #edf6ff 0%, #f7fbff 58%, #ffffff 100%);
  }

  .cx-music-studio {
    width: 100%;
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    overflow: hidden;
    padding: max(6px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  }

  .cx-topbar {
    z-index: 60;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding: 9px;
    background:
      radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--cx-accent) 18%, transparent), transparent 32%),
      rgba(9, 13, 24, .9);
    box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
  }

  .cx-topbar > * {
    min-width: 0;
    max-width: 100%;
  }

  .theme-light .cx-topbar {
    border-color: color-mix(in srgb, var(--cx-accent) 18%, #dbeafe);
    background:
      radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--cx-accent) 12%, transparent), transparent 32%),
      rgba(255,255,255,.9);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--cx-accent) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.82);
  }

  .cx-topbar::after {
    display: none;
  }

  .cx-brand {
    min-width: 0;
    gap: 8px;
  }

  .cx-back {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .cx-brand p {
    max-width: 170px;
    overflow: hidden;
    font-size: 8px;
    letter-spacing: .12em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cx-brand h1 {
    max-width: min(58vw, 230px);
    font-size: 16px;
  }

  .cx-transport {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: grid;
    grid-template-columns: 38px 48px 38px minmax(0, 1fr);
    gap: 6px;
    border-radius: 18px;
    padding: 6px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      rgba(0,0,0,.24);
  }

  .theme-light .cx-transport {
    background:
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(239,246,255,.78));
  }

  .cx-transport .cx-btn,
  .cx-transport .cx-btn.play {
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    border-radius: 14px;
  }

  .cx-time {
    min-width: 0;
    height: 40px;
    border-radius: 14px;
    padding: 0 6px;
    font-size: 10px;
    letter-spacing: 0;
  }

  .theme-light .cx-time {
    border-color: color-mix(in srgb, var(--cx-accent) 18%, #dbeafe);
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.9), transparent 56%),
      color-mix(in srgb, var(--cx-accent) 10%, #ffffff);
    color: #047857;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 22px color-mix(in srgb, var(--cx-accent) 8%, transparent);
  }

  .cx-bpm {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 32px;
    grid-template-columns: 16px minmax(0, 1fr) 44px 42px;
    gap: 6px;
    border-radius: 12px;
    padding: 4px 6px;
  }

  .cx-bpm input {
    width: 44px;
    max-width: 44px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 24px;
  }

  .cx-bpm span {
    display: block;
    font-size: 8px;
    letter-spacing: .08em;
  }

  .theme-light .cx-bpm,
  .theme-light .cx-bpm input {
    border-color: color-mix(in srgb, var(--cx-accent) 14%, #dbeafe);
    background: rgba(255,255,255,.78);
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  }

  .cx-bpm-steps {
    width: 42px;
    height: 24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .cx-bpm-steps button {
    width: 20px;
    min-width: 20px;
    height: 24px;
    min-height: 24px;
  }

  .cx-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 1px 3px;
    scrollbar-width: none;
  }

  .cx-actions::-webkit-scrollbar,
  .cx-tabs::-webkit-scrollbar,
  .cx-mini-tools::-webkit-scrollbar,
  .cx-mode-toolbar::-webkit-scrollbar,
  .cx-browser::-webkit-scrollbar {
    display: none;
  }

  .cx-actions .cx-btn,
  .cx-actions .cx-zoom-btn,
  .cx-actions [data-save-project],
  .cx-actions [data-action-link="projects"] {
    flex: 0 0 42px;
    width: 42px;
    height: 40px;
    min-height: 40px;
    border-radius: 14px;
  }

  .cx-actions [data-save-project] {
    background: linear-gradient(180deg, color-mix(in srgb, var(--cx-accent) 88%, #60a5fa), var(--cx-accent));
  }

  .cx-zoom-controls {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 14px;
  }

  .cx-zoom-level {
    min-width: 44px;
    font-size: 10px;
  }

  .cx-lyrics-pad {
    min-width: 280px;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    border-radius: 18px;
  }

  .cx-lyrics-head {
    min-height: 46px;
    padding: 9px 10px;
  }

  .cx-lyrics-tools {
    gap: 6px;
    overflow-x: auto;
    padding: 7px 9px;
  }

  .cx-lyrics-window-actions button,
  .cx-lyrics-tools button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .cx-lyrics-editor {
    padding: 12px 13px 16px;
    font-size: 14px;
    line-height: 1.58;
  }

  .cx-device-modal {
    align-items: end;
    padding: 10px;
  }

  .cx-device-shell {
    width: 100%;
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
  }

  .cx-device-head {
    min-height: 54px;
    padding: 12px;
  }

  .cx-device-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .cx-device-card {
    border-radius: 16px;
    padding: 10px;
  }

  .cx-device-switches,
  .cx-device-actions {
    grid-template-columns: 1fr;
  }

  .cx-workspace {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    overflow: hidden;
    padding: 0;
  }

  .cx-center {
    min-height: 0;
    overflow: hidden;
  }

  .cx-card {
    border-radius: 20px;
    min-height: 0;
  }

  .cx-card-head {
    min-height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .cx-card-head p {
    display: none;
  }

  .cx-card-head h2 {
    font-size: 12px;
  }

  .cx-tabs,
  .cx-mini-tools {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 7px;
    padding-bottom: 1px;
    scrollbar-width: none;
  }

  .cx-tabs button,
  .cx-mini-tools > button,
  .cx-tabs .cx-small-btn {
    flex: 0 0 auto;
    min-height: 38px;
    border-radius: 13px;
    padding: 0 11px;
    font-size: 11px;
  }

  .cx-mini-tools > .cx-custom-select {
    flex: 0 0 150px;
    min-width: 150px;
  }

  .cx-custom-select-menu {
    z-index: 180;
    max-height: 192px;
  }

  .cx-mode-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 7px;
    padding: 8px 10px;
    scrollbar-width: none;
  }

  .cx-mode-toolbar button {
    flex: 0 0 auto;
    min-height: 38px;
    border-radius: 13px;
    padding: 0 11px 0 10px;
  }

  .cx-editor-view.active {
    min-height: 0;
    height: 100%;
  }

  .cx-playlist-body {
    grid-template-rows: 32px minmax(0, 1fr);
  }

  .cx-ruler-row {
    grid-template-columns: var(--cx-track-head) 1fr;
  }

  .cx-ruler-corner {
    padding-inline: 8px;
    font-size: 9px;
    letter-spacing: .06em;
  }

  .cx-ruler span {
    padding-left: 7px;
    font-size: 9px;
  }

  .cx-playhead {
    top: 32px;
  }

  .cx-playhead::before {
    top: -32px;
    height: 32px;
  }

  .cx-track-name {
    gap: 5px;
    padding-inline: 7px;
    font-size: 10px;
  }

  .cx-track-delete {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .cx-pattern-clip,
  .cx-audio-clip,
  .cx-recording-clip {
    top: 7px;
    min-width: 58px;
    border-radius: 10px;
    padding: 6px 8px;
    font-size: 10px;
  }

  .cx-piano-roll {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 0;
  }

  .cx-piano-key {
    padding-right: 5px;
    font-size: 8px;
  }

  .cx-piano-key.black-key::before {
    width: 44px;
  }

  .cx-step-sequencer,
  .cx-mixer {
    min-height: 0;
    padding: 8px;
  }

  .cx-step-row {
    grid-template-columns: 96px repeat(var(--step-count, 16), 30px);
    min-width: max-content;
  }

  .cx-step-label {
    min-height: 38px;
    font-size: 11px;
  }

  .cx-step-pad {
    width: 30px;
    height: 38px;
  }

  .cx-mixer {
    grid-auto-columns: minmax(154px, 176px);
    gap: 8px;
  }

  .cx-browser {
    order: 2;
    display: grid;
    grid-template-columns: minmax(202px, .95fr) minmax(176px, .86fr) minmax(176px, .86fr) minmax(214px, 1fr);
    gap: 8px;
    max-height: 146px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
    padding: 8px;
    scrollbar-width: none;
  }

  .cx-browser .cx-panel-head {
    display: none;
  }

  .cx-project-box,
  .cx-browser-section {
    min-width: 0;
    max-height: 100%;
    border: 1px solid var(--cx-line);
    border-radius: 15px;
    padding: 9px;
    background: rgba(255,255,255,.035);
    overflow-y: auto;
    scrollbar-width: none;
  }

  .theme-light .cx-project-box,
  .theme-light .cx-browser-section {
    background: rgba(255,255,255,.66);
  }

  .cx-project-box::-webkit-scrollbar,
  .cx-browser-section::-webkit-scrollbar {
    display: none;
  }

  .cx-project-box {
    align-content: start;
    gap: 7px;
  }

  .cx-project-box label,
  .cx-field label {
    font-size: 9px;
  }

  .cx-project-box input,
  .cx-project-box select,
  .cx-field input,
  .cx-field select,
  .cx-custom-select-trigger {
    min-height: 38px;
    border-radius: 12px;
  }

  .theme-light .cx-project-box input,
  .theme-light .cx-field input,
  .theme-light .cx-custom-select-trigger {
    border-color: color-mix(in srgb, var(--cx-accent) 16%, #dbeafe);
    background:
      radial-gradient(circle at 0 0, color-mix(in srgb, var(--cx-accent) 6%, transparent), transparent 40%),
      rgba(255,255,255,.9);
    color: #111827;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  }

  .theme-light .cx-custom-select-label {
    color: #64748b;
  }

  .theme-light .cx-custom-select-trigger strong {
    color: #111827;
  }

  .cx-browser-section {
    border-bottom: 1px solid var(--cx-line);
  }

  .cx-browser-section h3 {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .cx-browser-section button {
    min-height: 30px;
    margin-bottom: 5px;
    border-radius: 11px;
    font-size: 11px;
  }

  .cx-browser-assets {
    max-height: none;
    overflow: hidden;
  }

  .cx-import-hub {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 6px;
    margin: 7px 0;
    padding-bottom: 0;
  }

  .cx-import-hub button {
    min-height: 40px;
    grid-template-columns: 1fr;
    gap: 2px;
    justify-items: start;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .cx-import-hub button b {
    font-size: 11px;
  }

  .cx-import-hub button span,
  .cx-device-status {
    font-size: 9px;
  }

  .cx-device-status {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 7px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cx-assets {
    min-height: 42px;
    max-height: 72px;
  }

  .cx-asset-search {
    min-height: 34px;
    border-radius: 12px;
  }

  .cx-bottom-rack {
    margin: 0;
    border-radius: 20px;
    padding: 6px;
    min-height: 72px;
    max-height: 82px;
  }

  .cx-channel-list {
    grid-auto-columns: minmax(116px, 138px);
    gap: 7px;
    padding: 2px;
    scrollbar-width: none;
  }

  .cx-channel-list::-webkit-scrollbar {
    display: none;
  }

  .cx-channel-card {
    min-height: 56px;
    max-height: 62px;
    border-radius: 14px;
    padding: 7px;
  }

  .cx-channel-strip {
    height: 38px;
  }

  .cx-channel-card button {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .cx-toast {
    left: 22px;
    right: 22px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    max-width: none;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.25;
    pointer-events: none;
  }
}

@media (max-width: 380px) {
  body.music-editor-page {
    --cx-track-head: 84px;
    --cx-track-row: 50px;
  }

  .cx-music-studio {
    padding-inline: 8px;
  }

  .cx-brand h1 {
    max-width: 190px;
    font-size: 15px;
  }

  .cx-transport {
    grid-template-columns: 36px 46px 36px minmax(0, 1fr);
    gap: 5px;
  }

  .cx-time {
    font-size: 9px;
  }

  .cx-bpm {
    grid-template-columns: 14px minmax(0, 1fr) 40px 38px;
    gap: 5px;
  }

  .cx-actions .cx-btn,
  .cx-actions .cx-zoom-btn,
  .cx-actions [data-save-project],
  .cx-actions [data-action-link="projects"] {
    flex-basis: 40px;
    width: 40px;
  }

  .cx-browser {
    grid-template-columns: minmax(190px, .95fr) minmax(168px, .86fr) minmax(168px, .86fr) minmax(204px, 1fr);
  }
}

/* ===== SELECTION BOX ===== */
.cx-selection-box {
  position: absolute;
  border: 1px solid var(--cx-accent);
  background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
  pointer-events: none;
  z-index: 50;
}

/* ===== UNDO/REDO INDICATOR ===== */
.cx-history-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--cx-muted);
  padding: 4px 8px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
}

/* ===== LOADING SPINNER ===== */
.cx-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--cx-line);
  border-top-color: var(--cx-accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

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

.cx-context-menu-item.is-danger {
  color: var(--cx-red);
}

/* ===== KEYBOARD SHORTCUT HINT ===== */
.cx-shortcut-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--cx-line);
  border-radius: 6px;
  font-size: 10px;
  font-family: 'SF Mono', monospace;
  color: var(--cx-muted);
}

/* ===== MUSIC PROJECTS PAGE ===== */
.music-projects-page {
  overflow-x: hidden;
  background: color-mix(in srgb, var(--surface) 94%, #0f172a);
}

html:has(body.music-projects-page) {
  overflow-x: hidden;
}

.theme-light.music-projects-page {
  background: #f6f8fb;
}

.music-projects-shell {
  width: 100%;
  max-width: none;
  overflow-x: clip;
  margin: 0;
  padding: 12px clamp(16px, 2.4vw, 36px) 36px;
  gap: 16px;
}

.music-projects-page .video-project-select input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  appearance: none;
  pointer-events: none;
}

.music-projects-head {
  min-height: 92px;
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--blue)), var(--surface)),
    var(--surface);
}

.music-projects-head strong {
  font-size: clamp(24px, 3vw, 34px);
}

.music-projects-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 148px;
  border-color: transparent;
  background: var(--blue);
  color: #fff;
}

.music-projects-head button[data-icon]::before,
.music-project-empty > button[data-icon]::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.music-project-empty [data-icon="upload-cloud"] { --editor-icon: url("https://api.iconify.design/lucide/upload-cloud.svg"); }
.music-project-empty [data-icon="waveform"] { --editor-icon: url("https://api.iconify.design/lucide/waveform.svg"); }
.music-project-empty [data-icon="download"] { --editor-icon: url("https://api.iconify.design/lucide/download.svg"); }

.music-projects-shell .project-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  box-shadow: 0 12px 32px color-mix(in srgb, #0f172a 8%, transparent);
}

.music-projects-shell .project-filter-bar label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.music-projects-shell .project-filter-bar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.music-projects-shell .project-filter-bar input,
.music-projects-shell .project-filter-bar select {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 94%, #fff);
  color: var(--ink);
  outline: 0;
}

.music-projects-shell .project-filter-bar input:focus,
.music-projects-shell .project-filter-bar select:focus {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.music-projects-shell .project-filter-bar button,
.music-projects-shell .project-filter-bar a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--blue);
  background: transparent;
  text-decoration: none;
  font-weight: 840;
}

.music-projects-shell .project-filter-bar button {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
}

.music-projects-shell .video-project-bulk {
  border-radius: 8px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--blue) 9%, transparent);
}

.music-projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: 14px;
}

.music-project-card {
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: 14px;
  row-gap: 12px;
  min-height: 188px;
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 98%, #ffffff), color-mix(in srgb, var(--surface) 92%, var(--blue)) 100%),
    var(--surface);
  box-shadow:
    0 14px 34px color-mix(in srgb, #64748b 11%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.music-project-card:hover {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  transform: translateY(-1px);
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--blue) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.76);
}

.music-project-card .video-project-select {
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 30px rgba(2, 6, 23, .12);
}

.music-project-preview {
  grid-row: 1 / span 2;
  position: relative;
  display: grid;
  min-height: 164px;
}

.music-project-thumb {
  min-height: 164px;
  height: 100%;
  aspect-ratio: auto;
  display: grid;
  border-radius: 12px;
  padding: 12px 12px 62px;
  background:
    radial-gradient(circle at 18% 12%, rgba(83, 255, 197, .14), transparent 28%),
    radial-gradient(circle at 86% 0%, rgba(96, 165, 250, .16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #08131f 0%, #07101a 48%, #101827 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    inset 0 -64px 88px rgba(2,6,23,.5),
    0 10px 22px rgba(2,6,23,.16);
}

.music-project-thumb::before {
  content: "";
  position: absolute;
  top: 58px;
  bottom: 58px;
  left: 58%;
  z-index: 4;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #7cf2c9 10%, #ecfff8 48%, #7cf2c9 90%, transparent);
  box-shadow: 0 0 14px rgba(124, 242, 201, .42);
  opacity: .68;
  animation: musicProjectPlayhead 5.2s linear infinite;
}

.music-project-thumb::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 52px;
  z-index: 5;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #cffff1 0 35%, #7cf2c9 36% 100%);
  box-shadow: 0 0 14px rgba(124, 242, 201, .58);
  animation: musicProjectPlayheadDot 5.2s linear infinite;
}

.music-project-visual {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 100%;
  grid-template-rows: auto minmax(82px, 1fr) auto;
  gap: 9px;
  pointer-events: none;
}

.music-project-thumb .music-project-visual span {
  justify-self: stretch;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.music-project-visual-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px;
  padding: 6px;
  background: rgba(2, 6, 23, .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
}

.music-project-visual-head b,
.music-project-visual-head em {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.96);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-project-visual-head b {
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.music-project-visual-head em {
  color: #9fb0c2;
  font-size: 8px;
  text-align: right;
}

.music-project-session {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 82px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(148, 163, 184, .11) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(180deg, rgba(148, 163, 184, .1) 0 1px, transparent 1px 25px),
    rgba(4, 13, 23, .34);
}

.music-project-controls {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(2, 6, 23, .22);
}

.music-project-controls i {
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.music-project-controls i:last-child {
  border-bottom: 0;
}

.music-project-controls i::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid rgba(124, 242, 201, .55);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 74%, transparent);
  color: #31d796;
  box-shadow: 0 0 18px rgba(49, 215, 150, .12);
}

.music-project-controls i:nth-child(2)::before {
  border-color: rgba(255, 130, 83, .5);
  color: #ff8253;
  box-shadow: 0 0 18px rgba(255, 130, 83, .12);
}

.music-project-controls i:nth-child(3)::before {
  border-color: rgba(124, 106, 255, .55);
  color: #7c6aff;
  box-shadow: 0 0 18px rgba(124, 106, 255, .14);
}

.music-project-arrangement {
  position: relative;
  display: block;
  min-width: 0;
}

.music-project-arrangement::before {
  content: "";
  position: absolute;
  inset: 12px 8px auto;
  height: 48px;
  opacity: .36;
  background:
    repeating-linear-gradient(90deg, rgba(124, 242, 201, .22) 0 2px, transparent 2px 7px);
  mask-image: linear-gradient(180deg, transparent 0 8%, #000 22% 74%, transparent 92%);
}

.music-project-arrangement i {
  position: absolute;
  left: var(--x, 10px);
  top: var(--y, 16px);
  width: var(--w, 52%);
  height: 15px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--clip, #31d796) 48%, transparent);
  border-radius: 6px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--clip, #31d796) 42%, transparent), color-mix(in srgb, var(--clip, #31d796) 10%, transparent) 72%),
    rgba(2, 6, 23, .28);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--clip, #31d796) 11%, transparent);
}

.music-project-arrangement i b {
  position: absolute;
  inset: 5px 6px;
  display: block;
  opacity: .65;
  background:
    repeating-linear-gradient(90deg, var(--clip, #31d796) 0 2px, transparent 2px 7px);
  mask-image: linear-gradient(180deg, transparent 0 20%, #000 28% 72%, transparent 80%);
}

.music-project-arrangement .clip-a {
  --x: 9px;
  --y: 14px;
  --w: 64%;
  --clip: #31d796;
}

.music-project-arrangement .clip-b {
  --x: 22px;
  --y: 36px;
  --w: 58%;
  --clip: #ff8253;
}

.music-project-arrangement .clip-c {
  --x: 12px;
  --y: 58px;
  --w: 72%;
  --clip: #7c6aff;
}

.music-project-arrangement em {
  position: absolute;
  left: 10px;
  right: 12px;
  bottom: 9px;
  height: 10px;
  opacity: .2;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 2px, transparent 2px 8px);
}

.music-project-role {
  position: absolute;
  left: 10px;
  bottom: 50px;
  z-index: 6;
  width: fit-content;
  max-width: calc(100% - 20px);
  border: 1px solid rgba(124, 242, 201, .22);
  border-radius: 999px;
  padding: 5px 9px;
  color: #e9fff8;
  background: rgba(2, 6, 23, .62);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .2);
  font-size: 10px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-project-player {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9;
  display: grid;
  grid-template-columns: 28px auto minmax(28px, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  padding: 6px 8px;
  background: rgba(2, 6, 23, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, opacity .16s ease;
  user-select: none;
}

.music-project-player:hover,
.music-project-player:focus-visible {
  border-color: rgba(124, 242, 201, .38);
  background: rgba(8, 30, 43, .58);
  outline: none;
  transform: translateY(-1px);
}

.music-project-player.is-empty {
  cursor: not-allowed;
  opacity: .58;
}

.music-project-player.is-loading {
  border-color: rgba(124, 242, 201, .36);
}

.music-project-player i {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.music-project-player i::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}

.music-project-player.is-playing i::before {
  width: 12px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
}

.music-project-player.is-loading i::before {
  width: 12px;
  height: 12px;
  margin-left: 0;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 999px;
  animation: musicProjectSpin .8s linear infinite;
}

.music-project-player b {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.music-project-player em {
  height: 16px;
  opacity: .35;
  background:
    repeating-linear-gradient(90deg, #c9e5f2 0 2px, transparent 2px 8px);
  mask-image: linear-gradient(180deg, transparent 0 14%, #000 26% 76%, transparent 90%);
}

.music-project-card .video-project-body {
  align-self: center;
  gap: 10px;
  min-width: 0;
  padding: 0 32px 0 0;
}

.music-project-card .video-project-body strong {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.04;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.music-project-card .video-project-body span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  font-size: 13px;
  font-weight: 760;
}

.music-project-meta i {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  opacity: .58;
}

.music-project-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0;
}

.music-project-stats small {
  display: inline-flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255,255,255,.48);
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.music-project-stats small img {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: .9;
}

.music-project-card .video-project-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 8px;
  min-width: 0;
  align-self: end;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
}

.music-project-card .video-project-actions a,
.music-project-card .video-project-actions button {
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  border-radius: 8px;
  padding-inline: 10px;
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-project-card .video-project-actions img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.music-project-card .video-project-actions a {
  background:
    linear-gradient(135deg, #169858, #0c7d49);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 18px 34px rgba(22, 152, 88, .22);
}

.music-project-card .video-project-actions a:only-child {
  grid-column: 1 / -1;
}

.music-project-card .video-project-actions button {
  flex: 0 0 auto;
  min-width: 0;
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  color: var(--red);
  background: rgba(255,255,255,.45);
}

@keyframes musicProjectPlayhead {
  0% {
    left: 30%;
    opacity: .18;
  }

  12%, 88% {
    opacity: .78;
  }

  100% {
    left: 86%;
    opacity: .18;
  }
}

@keyframes musicProjectPlayheadDot {
  0% {
    left: 30%;
    opacity: .2;
  }

  12%, 88% {
    opacity: 1;
  }

  100% {
    left: 86%;
    opacity: .2;
  }
}

@keyframes musicProjectSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-project-thumb::before,
  .music-project-thumb::after,
  .music-project-player.is-loading i::before {
    animation: none;
  }
}

.music-project-empty {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 26px;
  padding: clamp(22px, 3.6vw, 44px);
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.98), color-mix(in srgb, var(--blue) 5%, #fff) 58%, rgba(255,255,255,.96)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 34%, #fff), rgba(20,184,166,.24), rgba(255,255,255,.72)) border-box;
  box-shadow:
    0 28px 78px color-mix(in srgb, #0f172a 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.86);
}

.music-project-empty-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: center;
}

.music-project-empty-copy small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 7px 11px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--blue);
  font-size: 10px;
  font-weight: 920;
  text-transform: uppercase;
}

.music-project-empty-copy small::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.music-project-empty-copy strong {
  color: var(--ink);
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 0.98;
  max-width: 680px;
  letter-spacing: 0;
}

.music-project-empty-copy > span {
  max-width: 560px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.music-project-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.music-project-empty-actions button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-color: transparent;
  border-radius: 16px;
  padding: 13px 18px;
  background:
    radial-gradient(circle at 28% 0%, rgba(255,255,255,.42), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
  color: #fff;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--blue) 28%, transparent);
  font-size: 14px;
  font-weight: 900;
}

.music-project-empty-actions button::before,
.music-project-empty-points i {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.music-project-empty-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 8px;
}

.music-project-empty-points span {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.music-project-empty-points i {
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--blue) 78%, #16a34a);
}

.music-project-empty-points b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.12;
}

.music-project-empty-points em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
  line-height: 1.32;
}

.music-project-empty-art {
  position: relative;
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(138px, 0.62fr) minmax(178px, 1fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, #dbeafe);
  border-radius: 22px;
  overflow: hidden;
  padding: 13px;
  background:
    radial-gradient(circle at 94% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.92), color-mix(in srgb, var(--blue) 8%, #fff));
  box-shadow:
    0 24px 56px color-mix(in srgb, var(--blue) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.music-empty-browser,
.music-empty-studio {
  position: relative;
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, #dbeafe);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
}

.music-empty-browser {
  align-content: start;
  gap: 9px;
  padding: 12px;
}

.music-empty-browser-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
}

.music-empty-browser-head b {
  color: var(--ink);
  font-size: 13px;
  font-weight: 920;
  line-height: 1.12;
}

.music-empty-browser-head em {
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, #16a34a 10%, #fff);
  color: #15803d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.music-empty-project-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 8px;
  background: rgba(248,251,255,.78);
}

.music-empty-project-row.is-active {
  border-color: color-mix(in srgb, var(--blue) 26%, #bfdbfe);
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
}

.music-empty-project-row i {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--blue) 58%, #fff) 0 22%, transparent 24%),
    color-mix(in srgb, var(--blue) 12%, #fff);
}

.music-empty-project-row b {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-empty-project-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.music-empty-studio {
  overflow: hidden;
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(37,99,235,.07) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, #0b1b3d, #102957);
}

.music-empty-studio-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}

.music-empty-studio-top b {
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.music-empty-studio-top em {
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}

.music-empty-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}

.music-empty-track i {
  display: block;
  height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    color-mix(in srgb, var(--blue) 48%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

.music-empty-track.is-two {
  grid-template-columns: 1.4fr .8fr;
}

.music-empty-track.is-two i {
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)),
    color-mix(in srgb, #16a34a 44%, #fff);
}

.music-empty-track.is-three {
  grid-template-columns: .8fr 1.2fr 1fr;
}

.music-empty-playhead {
  position: absolute;
  top: 52px;
  bottom: 18px;
  left: 58%;
  width: 2px;
  border-radius: 999px;
  background: #fff;
  opacity: .78;
  box-shadow: 0 0 18px rgba(255,255,255,.45);
}

@media (max-width: 760px) {
  body.music-projects-page {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 28%),
      radial-gradient(circle at 0% 38%, rgba(20, 184, 166, 0.12), transparent 32%),
      linear-gradient(180deg, #eef7ff 0%, #f8fbff 52%, #ffffff 100%);
  }

  .music-projects-shell {
    gap: 12px;
    padding: 10px 12px 96px;
  }

  .music-projects-head,
  .music-projects-shell .project-filter-bar,
  .music-projects-shell .video-project-bulk {
    grid-template-columns: 1fr;
  }

  .music-projects-head {
    position: relative;
    display: grid;
    min-height: 138px;
    align-items: start;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 16px;
    background:
      radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 36%) padding-box,
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 5%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 34%, #ffffff), rgba(20, 184, 166, 0.28), rgba(255, 255, 255, 0.74)) border-box;
    box-shadow: 0 20px 54px color-mix(in srgb, var(--blue) 12%, transparent);
  }

  .music-projects-head strong {
    margin-top: 7px;
    font-size: clamp(31px, 10vw, 42px);
    line-height: 0.96;
  }

  .music-projects-head small {
    max-width: 190px;
  }

  .music-projects-head button,
  .music-projects-shell .project-filter-bar button,
  .music-projects-shell .project-filter-bar a {
    width: 100%;
  }

  .music-projects-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .music-project-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
    padding: 10px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 4%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 28%, #ffffff), rgba(20, 184, 166, 0.22), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow: 0 20px 48px color-mix(in srgb, var(--blue) 10%, transparent);
  }

  .music-project-preview {
    grid-row: auto;
    min-height: 280px;
  }

  .music-project-thumb {
    padding: 18px;
    padding-bottom: 78px;
    aspect-ratio: auto;
    border-radius: 16px;
  }

  .music-project-thumb::before {
    top: 82px;
    bottom: 78px;
  }

  .music-project-thumb::after {
    top: 74px;
  }

  .music-project-visual {
    grid-template-rows: auto minmax(150px, 1fr) auto auto;
    gap: 12px;
  }

  .music-project-visual-head {
    padding: 7px 12px;
  }

  .music-project-visual-head b,
  .music-project-visual-head em {
    font-size: 11px;
  }

  .music-project-session {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 150px;
  }

  .music-project-controls i::before {
    width: 28px;
    height: 28px;
  }

  .music-project-card .video-project-body {
    gap: 12px;
    padding: 0;
  }

  .music-project-card .video-project-body strong {
    font-size: clamp(28px, 9vw, 40px);
  }

  .music-project-card .video-project-body span {
    font-size: 15px;
  }

  .music-project-stats {
    gap: 8px;
  }

  .music-project-stats small {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .music-project-card .video-project-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 16px;
  }

  .music-project-card .video-project-actions a,
  .music-project-card .video-project-actions button {
    min-height: 52px;
    font-size: 16px;
  }

  .music-project-empty {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
    border-radius: 24px;
    padding: 16px;
  }

  .music-project-empty-art {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .music-project-empty-copy {
    gap: 10px;
  }

  .music-project-empty-copy strong {
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.02;
  }

  .music-project-empty-copy span {
    font-size: 14px;
    line-height: 1.45;
  }

  .music-project-empty-actions {
    margin-top: 0;
  }

  .music-project-empty-actions button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 16px;
    padding: 0;
    font-size: 0;
  }

  .music-project-empty-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .music-project-empty-points span {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 2px 9px;
    border-radius: 15px;
    padding: 10px;
  }

  .music-project-empty-points i {
    grid-row: 1 / span 2;
  }

  .music-empty-browser {
    gap: 7px;
    padding: 10px;
  }

  body.music-projects-page .music-empty-studio {
    display: none;
  }

  .music-empty-project-row {
    min-height: 42px;
  }

  body.music-projects-page .video-project-mobile-filter-toggle {
    right: 74px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
  }

  body.music-projects-page .video-projects-head > button[data-create-project] {
    width: 48px;
    min-width: 48px;
    background:
      url("https://api.iconify.design/lucide/circle-plus.svg?color=%232563eb") center / 22px 22px no-repeat,
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.84));
  }

  body.music-projects-page .project-filter-bar {
    border-radius: 26px;
  }

  body.music-projects-page .music-project-preview {
    min-height: clamp(220px, 58vw, 280px);
  }

  body.music-projects-page .music-project-card .video-project-body strong {
    overflow-wrap: anywhere;
  }

  body.music-projects-page .project-sort-menu[data-project-sort-portal] {
    z-index: 70080;
  }
}

@media (min-width: 1024px) {
  .cx-card-head p {
    max-width: 520px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cx-browser-assets {
    min-height: 0;
  }

  .cx-assets {
    min-height: 0;
  }
}

@media (max-height: 820px) and (min-width: 1024px) {
  .cx-music-studio {
    grid-template-rows: 60px minmax(0, 1fr) 66px;
  }

  .cx-workspace {
    padding: 8px;
    gap: 8px;
  }

  .cx-bottom-rack {
    margin: 0 8px 8px;
    padding: 7px;
  }

  .cx-panel-head small,
  .cx-card-head p {
    display: none;
  }

  .cx-card-head {
    min-height: 46px;
  }

  .cx-browser-section {
    padding: 8px 10px;
  }

  .cx-browser-section button {
    min-height: 28px;
  }

  .cx-project-box input,
  .cx-project-box select,
  .cx-field input,
  .cx-field select {
    height: 31px;
  }
}

.cx-channel-card.is-muted {
  opacity: .56;
}

.cx-channel-card.is-muted button {
  color: #fff;
  background: var(--cx-red);
  border-color: transparent;
}

@media (max-width: 760px) {
  body.music-projects-page .music-project-empty-art > .music-empty-studio {
    display: none !important;
  }
}