:root,
body[data-theme="audius-dark"] {
  --bg-darkest: #1B1C2A;
  --bg-topbar-top: #2C2F46;
  --bg-topbar-bot: #212334;
  --bg-panel: #242538;
  --bg-panel-alt: #2F3348;
  --bg-header: #2A2E43;
  --bg-control: #353A51;
  --bg-hover: #444B69;
  --bg-selected: #392B56;
  --border-color: #3C425D;
  --text-main: #F6F8FC;
  --text-muted: #A6AAC0;
  --accent-orange: #CC0FE0;
  --accent-orange-bright: #D767E1;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #C67CFF;
  --accent-teal: #1BA1F1;
  --accent-green: #15D864;
  --accent-red: #F9344C;
  --audius-gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 52%, #CC0FE0 100%);
  --audius-coin-gradient: linear-gradient(85deg, #CC0FE0 -4.82%, #7E1BCC 49.8%, #1BA1F1 104.43%);
  --logo-grad: linear-gradient(315deg, #7E1BCC 0%, #CC0FE0 100%);
  --font-ui: "Avenir Next LT Pro", "Avenir Next", "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Official Audius Neue Dark Theme (from @audius/harmony defaultDarkPrimitives) */
body[data-theme="amoled"] {
  --bg-darkest: #0A0A0E;
  --bg-topbar-top: #181624;
  --bg-topbar-bot: #0F0F14;
  --bg-panel: #14141B;
  --bg-panel-alt: #1F1F2B;
  --bg-header: #1A1829;
  --bg-control: #26233A;
  --bg-hover: #352F52;
  --bg-selected: #2B2248;
  --border-color: #2E2B44;
  --text-main: #F6F8FC;
  --text-muted: #9E9EAE;
  --accent-orange: #A74CFF;
  --accent-orange-bright: #C67CFF;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #C67CFF;
  --accent-teal: #806AD8;
  --accent-green: #84DF64;
  --accent-red: #F94D62;
  --audius-gradient: linear-gradient(315deg, #7F6AD6 0%, #A74CFF 55%, #CC0FE0 100%);
  --audius-coin-gradient: linear-gradient(85deg, #806AD8 -4.82%, #C67CFF 49.8%, #1BA1F1 104.43%);
  --logo-grad: linear-gradient(135deg, #806AD8 0%, #C67CFF 100%);
}

body[data-theme="amethyst"] {
  --bg-darkest: #191026;
  --bg-topbar-top: #2E1C46;
  --bg-topbar-bot: #201332;
  --bg-panel: #241638;
  --bg-panel-alt: #301E4A;
  --bg-header: #2B1A42;
  --bg-control: #3D275C;
  --bg-hover: #4F3375;
  --bg-selected: #3E2363;
  --border-color: #4D3270;
  --text-main: #FBF7FF;
  --text-muted: #C8B5E3;
  --accent-orange: #CC0FE0;
  --accent-orange-bright: #E64AFF;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #FF9400;
  --accent-teal: #1BA1F1;
  --accent-green: #15D864;
  --accent-red: #F9344C;
  --audius-gradient: linear-gradient(315deg, #5B23E1 0%, #CC0FE0 100%);
  --logo-grad: linear-gradient(135deg, #CC0FE0 0%, #7E1BCC 100%);
}

/* Audius Trending Blue & Electric Magenta */
body[data-theme="ocean"] {
  --bg-darkest: #101626;
  --bg-topbar-top: #1B2540;
  --bg-topbar-bot: #131B30;
  --bg-panel: #151E34;
  --bg-panel-alt: #1D2947;
  --bg-header: #19243E;
  --bg-control: #243357;
  --bg-hover: #2E426E;
  --bg-selected: #23345C;
  --border-color: #2C3E69;
  --text-main: #F4F8FF;
  --text-muted: #9CB2D9;
  --accent-orange: #1BA1F1;
  --accent-orange-bright: #58B9F4;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #C67CFF;
  --accent-teal: #CC0FE0;
  --accent-green: #15D864;
  --accent-red: #F9344C;
  --audius-gradient: linear-gradient(315deg, #1BA1F1 0%, #7E1BCC 55%, #CC0FE0 100%);
  --logo-grad: linear-gradient(135deg, #1BA1F1 0%, #CC0FE0 100%);
}

/* Official Audius Matrix Mode (from @audius/harmony matrixPrimitives) */
body[data-theme="forest"] {
  --bg-darkest: #010B06;
  --bg-topbar-top: #0A1F0D;
  --bg-topbar-bot: #041308;
  --bg-panel: #041308;
  --bg-panel-alt: #0A1F0D;
  --bg-header: #081A0B;
  --bg-control: #0F2F15;
  --bg-hover: #123F1B;
  --bg-selected: #113819;
  --border-color: #166527;
  --text-main: #9BFFA7;
  --text-muted: #34D561;
  --accent-orange: #0BD90B;
  --accent-orange-bright: #3DF23D;
  --accent-on-primary: #010B06;
  --accent-amber: #3EF56B;
  --accent-teal: #20E290;
  --accent-green: #00E252;
  --accent-red: #F9344C;
  --audius-gradient: linear-gradient(315deg, #0BD90B 0%, #13C65A 55%, #20E290 100%);
  --logo-grad: linear-gradient(135deg, #0BD90B 0%, #20E290 100%);
}

/* Official Audius Day Light Mode (from @audius/harmony classicLightPrimitives) */
body[data-theme="daylight"] {
  --bg-darkest: #EFEFF1;
  --bg-topbar-top: #FFFFFF;
  --bg-topbar-bot: #F6F5F7;
  --bg-panel: #F6F5F7;
  --bg-panel-alt: #FFFFFF;
  --bg-header: #EFEFF1;
  --bg-control: #E7E7EA;
  --bg-hover: #D6D5DB;
  --bg-selected: #F0E0FF;
  --border-color: #D6D5DB;
  --text-main: #343B49;
  --text-muted: #6C6780;
  --accent-orange: #CC0FE0;
  --accent-orange-bright: #D63FE6;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #7E1BCC;
  --accent-teal: #1BA1F1;
  --accent-green: #0F9E48;
  --accent-red: #D0021B;
  --audius-gradient: linear-gradient(315deg, #5B23E1 0%, #A22FEB 52%, #CC0FE0 100%);
  --logo-grad: linear-gradient(135deg, #CC0FE0 0%, #7E1BCC 100%);
}

body[data-theme="obsidian"] {
  --bg-darkest: #0b0d14;
  --bg-topbar-top: #181d2e;
  --bg-topbar-bot: #101420;
  --bg-panel: #121622;
  --bg-panel-alt: #181e2e;
  --bg-control: #22293e;
  --bg-hover: #2c3550;
  --bg-selected: #1e263d;
  --border-color: #273047;
  --text-main: #eef2ff;
  --text-muted: #8e9bb8;
  --accent-orange: #8b5cf6;
  --accent-orange-bright: #a78bfa;
  --accent-on-primary: #ffffff;
  --accent-amber: #38bdf8;
  --accent-teal: #22d3ee;
  --accent-green: #10b981;
  --accent-red: #f43f5e;
  --logo-grad: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
}

body[data-theme="cyberpunk"] {
  --bg-darkest: #090612;
  --bg-topbar-top: #1c1030;
  --bg-topbar-bot: #110920;
  --bg-panel: #120b22;
  --bg-panel-alt: #1b1132;
  --bg-control: #271846;
  --bg-hover: #35215e;
  --bg-selected: #2a164d;
  --border-color: #382063;
  --text-main: #fdf4ff;
  --text-muted: #b59cd6;
  --accent-orange: #ff2a85;
  --accent-orange-bright: #ff5ca1;
  --accent-on-primary: #ffffff;
  --accent-amber: #00f0ff;
  --accent-teal: #00f0ff;
  --accent-green: #00e676;
  --accent-red: #ff1744;
  --logo-grad: linear-gradient(135deg, #ff2a85 0%, #7b2cbf 100%);
}

/* Audius Ranked Platinum Tier Slate */
body[data-theme="platinum-slate"] {
  --bg-darkest: #1c212b;
  --bg-topbar-top: #2b3345;
  --bg-topbar-bot: #232936;
  --bg-panel: #232936;
  --bg-panel-alt: #283040;
  --bg-control: #323c52;
  --bg-hover: #3d4963;
  --bg-selected: #2f384d;
  --border-color: #3f4a63;
  --text-main: #eef2f9;
  --text-muted: #9eb0cc;
  --accent-orange: #1BA1F1;
  --accent-orange-bright: #58B9F4;
  --accent-on-primary: #FFFFFF;
  --accent-amber: #C67CFF;
  --accent-teal: #C67CFF;
  --accent-green: #15D864;
  --accent-red: #F9344C;
  --audius-gradient: linear-gradient(315deg, #1BA1F1 0%, #7E1BCC 55%, #C67CFF 100%);
  --logo-grad: linear-gradient(135deg, #1BA1F1 0%, #C67CFF 100%);
}

body[data-theme="nordic"] {
  --bg-darkest: #161920;
  --bg-topbar-top: #262b36;
  --bg-topbar-bot: #1d212a;
  --bg-panel: #1e222b;
  --bg-panel-alt: #252a36;
  --bg-control: #2e3440;
  --bg-hover: #3b4252;
  --bg-selected: #2b3343;
  --border-color: #333a48;
  --text-main: #eceff4;
  --text-muted: #9aa5b8;
  --accent-orange: #88c0d0;
  --accent-orange-bright: #8fbcbb;
  --accent-on-primary: #161920;
  --accent-amber: #ebcb8b;
  --accent-teal: #88c0d0;
  --accent-green: #a3be8c;
  --accent-red: #bf616a;
  --logo-grad: linear-gradient(135deg, #88c0d0 0%, #5e81ac 100%);
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-darkest);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: -0.011em;
}

#app-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
}

/* TOP TRANSPORT BAR */
.topbar {
  min-height: 50px;
  background: linear-gradient(180deg, var(--bg-topbar-top) 0%, var(--bg-topbar-bot) 100%);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  gap: 10px;
  flex-shrink: 0;
  overflow-x: auto;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-badge {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--logo-grad);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-name-input {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  font-weight: 600;
  font-size: 13px;
  padding: 1px 5px;
  border-radius: 4px;
  width: 185px;
}

.project-name-input:hover,
.project-name-input:focus {
  border-color: var(--border-color);
  background: var(--bg-darkest);
  outline: none;
}

.status-pill {
  font-size: 10.5px;
  color: var(--accent-teal);
  padding-left: 5px;
  white-space: nowrap;
}

/* INSTANT COLOR PALETTE SWATCH BAR */
.palette-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 7px;
  flex-shrink: 0;
}

.palette-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-amber);
  margin-right: 2px;
}

.swatch-btn {
  height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1.5px solid var(--sw-acc, var(--border-color));
  background: var(--sw-bg, var(--bg-control));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, box-shadow 0.12s;
}

.swatch-btn:hover {
  transform: translateY(-1px);
}

.swatch-btn.active {
  box-shadow: 0 0 0 2px var(--accent-amber);
}

.custom-color-chip {
  height: 26px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background: var(--bg-control);
  color: var(--text-main);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.custom-color-chip input[type="color"] {
  width: 18px;
  height: 18px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* TRANSPORT GROUP */
.transport-group {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-darkest);
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.transport-btn {
  width: 34px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid #394352;
  background: var(--bg-control);
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}

.transport-btn:hover {
  background: var(--bg-hover);
}

.transport-btn.play.playing {
  background: var(--accent-orange);
  border-color: var(--accent-orange-bright);
  color: var(--accent-on-primary);
  font-weight: bold;
}

.transport-btn.active {
  background: rgba(34, 211, 238, 0.16);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
}

.time-readout {
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 3px 10px;
  min-width: 108px;
  text-align: right;
  font-family: var(--font-mono);
  cursor: pointer;
}

.readout-main {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-amber);
  letter-spacing: 0.5px;
}

.readout-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.bpm-box {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: 5px;
}

.bpm-box label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 2px;
}

.bpm-step-btn {
  width: 22px;
  height: 24px;
  border: 1px solid #2f3844;
  background: #1c222b;
  color: var(--text-main);
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.bpm-step-btn:hover {
  background: var(--bg-hover);
}

.bpm-box input {
  width: 46px;
  background: transparent;
  border: none;
  color: var(--accent-teal);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.bpm-box input:focus {
  outline: none;
}

.master-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}

.master-box label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.master-box input[type="range"] {
  width: 72px;
  accent-color: var(--accent-orange);
}

.stereo-meter {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 52px;
}

.meter-bar {
  height: 5px;
  background: #0c0e11;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #272f38;
}

.meter-fill {
  height: 100%;
  width: 4%;
  background: linear-gradient(90deg, #52c41a 0%, #fadb14 75%, #ff4d4f 100%);
  transition: width 0.04s linear;
}

/* FILE ACTIONS */
.file-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.action-btn {
  height: 32px;
  padding: 0 11px;
  border-radius: 5px;
  border: 1px solid #3b4654;
  background: var(--bg-control);
  color: var(--text-main);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.action-btn:hover {
  background: var(--bg-hover);
}

.action-btn.accent {
  background: var(--accent-orange);
  border-color: var(--accent-orange-bright);
  color: var(--accent-on-primary);
}

.action-btn.accent:hover {
  background: var(--accent-orange-bright);
}

.action-btn.success {
  background: var(--accent-green);
  border-color: #34d399;
  color: #061812;
  font-weight: 700;
}

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

.theme-select {
  height: 32px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid var(--accent-teal);
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
}

/* SECOND ROW TOOLBAR */
.toolbar {
  min-height: 40px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 4px 10px;
  gap: 8px;
  flex-shrink: 0;
  overflow-x: auto;
}

.tool-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.right-cluster {
  margin-left: auto;
}

.cluster-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 3px;
  letter-spacing: 0.5px;
}

.tool-divider {
  width: 1px;
  height: 22px;
  background: var(--border-color);
  flex-shrink: 0;
}

.tool-btn, .mini-btn {
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #353f4d;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tool-btn:hover, .mini-btn:hover {
  background: var(--bg-hover);
}

.tool-btn.active {
  background: var(--accent-orange);
  border-color: var(--accent-orange-bright);
  color: var(--accent-on-primary);
  font-weight: 700;
}

.mini-btn.toggle-pane.active {
  background: rgba(34, 211, 238, 0.16);
  border-color: var(--accent-teal);
  color: var(--accent-teal);
  font-weight: 700;
}

.mini-btn.danger {
  border-color: #6b2629;
  color: #ffa39e;
}

.mini-btn.danger:hover {
  background: #5c1c1f;
  border-color: var(--accent-red);
  color: #fff;
}

kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
}

.toolbar-select {
  height: 28px;
  background: var(--bg-darkest);
  color: var(--text-main);
  border: 1px solid #353f4d;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11.5px;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.zoom-control input {
  width: 72px;
  accent-color: var(--accent-teal);
}

/* MAIN WORKSPACE */
.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* LEFT PANEL (STEMS / AUDIO POOL) */
.left-panel {
  width: 245px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.left-panel.collapsed {
  display: none !important;
}

.panel-header {
  height: 34px;
  background: var(--bg-panel-alt);
  border-bottom: 1px solid var(--border-color);
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-close-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #4a3034;
  background: #2b1d20;
  color: #ffa39e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.panel-close-btn:hover {
  background: var(--accent-red);
  border-color: #ff7875;
  color: #fff;
}

.tiny-btn {
  height: 22px;
  padding: 0 7px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid #3c4757;
  background: var(--bg-control);
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
}

.tiny-btn:hover {
  background: var(--bg-hover);
}

.tiny-btn.accent {
  background: var(--accent-orange);
  border-color: var(--accent-orange-bright);
  color: var(--accent-on-primary);
  font-weight: 700;
}

.tiny-btn.danger-tiny {
  border-color: #6b2629;
  color: #ffa39e;
}

.tiny-btn.danger-tiny:hover {
  background: #5c1c1f;
  color: #fff;
}

.dropzone-box {
  margin: 8px;
  padding: 10px;
  border: 1.5px dashed #435061;
  border-radius: 6px;
  background: rgba(18, 21, 25, 0.55);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone-box:hover, .dropzone-box.dragover {
  border-color: var(--accent-orange);
  background: rgba(255, 122, 69, 0.1);
}

.dropzone-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
}

.dropzone-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.asset-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.asset-card {
  background: var(--bg-panel-alt);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-orange);
  border-radius: 5px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: grab;
}

.asset-card:hover {
  border-color: #4b586b;
}

.asset-card.selected-stem {
  background: #27313d;
  border-color: var(--accent-teal);
  box-shadow: inset 0 0 0 1px var(--accent-teal);
}

.asset-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.asset-name {
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-meta {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.asset-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.asset-actions button {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #3c4757;
  background: var(--bg-control);
  color: var(--text-main);
  cursor: pointer;
}

.asset-actions button:hover {
  background: var(--accent-orange);
  color: #111;
}

.asset-actions button.del-asset-btn {
  border-color: #5c2428;
  color: #ffa39e;
  background: #29181b;
}

.asset-actions button.del-asset-btn:hover {
  background: var(--accent-red);
  border-color: #ff7875;
  color: #fff;
}

.panel-footer-tips {
  border-top: 1px solid var(--border-color);
  padding: 8px 10px;
  background: var(--bg-darkest);
  font-size: 11px;
  color: var(--text-muted);
}

.tip-title {
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  font-size: 11px;
}

.panel-footer-tips ul {
  margin: 0;
  padding-left: 15px;
  line-height: 1.48;
}

/* CENTER PLAYLIST */
.playlist-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-darkest);
}

.minimap-bar {
  height: 28px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.minimap-label {
  width: 200px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reopen-pool-btn {
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid var(--accent-teal);
  background: #1d353b;
  color: var(--accent-teal);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.clip-context-menu {
  position: absolute;
  z-index: 60;
  width: 230px;
  background: #1c222b;
  border: 1px solid #455366;
  border-radius: 7px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ctx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-amber);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.ctx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.ctx-btn {
  height: 28px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid #384454;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.ctx-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-teal);
}

.ctx-btn.danger-full {
  width: 100%;
  text-align: center;
  border-color: #6b2629;
  background: #2b181b;
  color: #ffa39e;
  font-weight: 700;
}

.ctx-btn.danger-full:hover {
  background: var(--accent-red);
  color: #fff;
}

#minimap-canvas {
  flex: 1;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: none;
}

.playlist-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.track-column {
  width: 200px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* MUST match ui.rulerHeight (34px) so track rows align 100% with playlist canvas */
.track-column-top {
  height: 34px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.track-headers-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.track-headers-list {
  display: flex;
  flex-direction: column;
}

.track-header-item {
  height: 78px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}

.track-header-item.selected {
  background: var(--bg-selected);
}

.track-color-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.track-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-left: 4px;
}

.track-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.track-btns {
  display: flex;
  gap: 3px;
}

.trk-btn {
  width: 21px;
  height: 20px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  border: 1px solid #3a4452;
  background: var(--bg-control);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}

.trk-btn.mute.on {
  background: #d4380d;
  border-color: #ff7a45;
  color: #fff;
}

.trk-btn.solo.on {
  background: #d48806;
  border-color: #ffd666;
  color: #111;
}

.trk-btn.del-trk {
  border-color: #592529;
  color: #ffa39e;
}

.trk-btn.del-trk:hover {
  background: var(--accent-red);
  border-color: #ff7875;
  color: #fff;
}

.track-row-Sliders {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.track-row-Sliders input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: var(--accent-teal);
}

.track-meter-mini {
  height: 4px;
  background: #0d1014;
  border-radius: 2px;
  overflow: hidden;
  margin-left: 4px;
}

.track-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #52c41a 0%, #fadb14 80%, #ff4d4f 100%);
}

.timeline-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-darkest);
}

#playlist-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* COLLAPSIBLE BOTTOM TRELLIS PAD & QUICK NUDGE DOCK */
.trellis-dock {
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  padding: 6px 10px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-shrink: 0;
  overflow-x: auto;
}

.trellis-dock.collapsed {
  display: none !important;
}

.trellis-dock-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.trellis-dock-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
}

.trellis-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}

.trellis-title {
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.selected-clip-badge {
  color: var(--accent-amber);
  font-weight: 700;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stamp-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-teal);
  font-weight: 600;
  cursor: pointer;
}

.nudge-strip {
  display: flex;
  gap: 4px;
  align-items: center;
}

.nudge-btn {
  height: 32px;
  padding: 0 9px;
  border-radius: 5px;
  border: 1px solid #384352;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.nudge-btn:hover, .nudge-btn:active {
  background: var(--bg-hover);
  border-color: var(--accent-teal);
}

.trellis-pad-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 1fr));
  gap: 5px;
}

.matrix-pad {
  height: 32px;
  border-radius: 5px;
  border: 1.5px solid #384454;
  background: #212832;
  padding: 2px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  overflow: hidden;
  transition: transform 0.05s;
}

.matrix-pad.triggered {
  transform: scale(0.95);
  border-color: #fff !important;
  box-shadow: 0 0 10px rgba(255, 169, 64, 0.7);
}

.matrix-pad-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-pad-meta {
  font-size: 9px;
  color: var(--text-muted);
}

.playlist-bottombar {
  height: 28px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.scroll-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 55%;
}

.scroll-wrap input {
  flex: 1;
  accent-color: var(--accent-orange);
}

.cursor-info {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* RIGHT PANEL */
.right-panel {
  width: 260px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
}

.right-panel.collapsed {
  display: none !important;
}

.inspector-empty {
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-color);
}

.inspector-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.field-row label, .field-box label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.field-row input, .field-box input, .field-box select {
  height: 26px;
  background: var(--bg-darkest);
  border: 1px solid #353f4d;
  border-radius: 4px;
  color: var(--text-main);
  padding: 0 6px;
  font-size: 12px;
}

.field-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.field-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.slider-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.slider-head span {
  font-family: var(--font-mono);
  color: var(--accent-teal);
}

.slider-group input[type="range"] {
  width: 100%;
  accent-color: var(--accent-orange);
}

.inspector-flags {
  display: flex;
  gap: 12px;
  padding: 2px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  cursor: pointer;
}

.sub-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.4px;
}

.chop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.track-insp-title {
  font-weight: 700;
  color: var(--accent-amber);
  font-size: 12px;
  margin-bottom: 2px;
}

/* MODALS */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 11, 14, 0.76);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-card {
  width: 440px;
  max-width: 94vw;
  background: var(--bg-panel);
  border: 1px solid #3c4757;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-head {
  padding: 12px 14px;
  background: var(--bg-panel-alt);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-head h3 {
  margin: 0;
  font-size: 14px;
}

.icon-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
}

.modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-foot {
  padding: 10px 14px;
  background: var(--bg-panel-alt);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.export-status {
  font-size: 12px;
  color: var(--accent-teal);
  min-height: 18px;
}

.saved-projects-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.saved-proj-row {
  padding: 8px 10px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.saved-proj-row:hover {
  border-color: var(--accent-orange);
}

/* RESPONSIVE SIZING (keeps Stems + Playlist side-by-side in view!) */
@media (max-width: 980px) {
  .left-panel {
    width: 195px;
  }
  .track-column, .minimap-label {
    width: 150px;
  }
}

@media (max-width: 640px) {
  .left-panel {
    width: 165px;
  }
  .track-column, .minimap-label {
    width: 120px;
  }
  .track-row-Sliders span {
    display: none;
  }
  kbd {
    display: none;
  }
}

/* ============================================================================
   Audius Studio 21 INTERFACE EXTENSIONS (Menu/Hint Bar, Channel Rack, Piano Roll, Mixer)
   ============================================================================ */

.fl-menu-hint-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fl-menu-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.fl-menu-item {
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}

.fl-menu-item:hover {
  background: var(--bg-control-hover);
  color: var(--text-main);
}

.fl-hint-bar {
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 6px;
  min-width: 210px;
}

.pat-song-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pat-song-btn {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
  background: var(--bg-darkest);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

#btn-mode-pat.active {
  background: #f59e0b;
  color: #111;
  border-color: #fbbf24;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

#btn-mode-song.active {
  background: #84cc16;
  color: #111;
  border-color: #a3e635;
  box-shadow: 0 0 6px rgba(132, 204, 22, 0.5);
}

.bpm-decimals {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-amber);
  opacity: 0.75;
  margin-left: -4px;
}

.osc-canvas {
  width: 84px;
  height: 26px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 3px;
}

.fl-pattern-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  padding: 2px 5px;
  border-radius: 4px;
}

.accent-mini {
  background: var(--accent-orange) !important;
  color: #fff !important;
  border-color: var(--accent-orange-bright) !important;
}

/* FL Browser Folder Categories */
.fl-browser-folders {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-darkest);
}

.fl-folder-item {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.fl-folder-item:hover {
  background: var(--bg-control-hover);
  color: var(--text-main);
}

.fl-folder-item.active {
  background: var(--bg-selected);
  color: var(--accent-teal);
  border-left: 3px solid var(--accent-teal);
}

/* FL Upper Dock: Channel Rack (F6) + Piano Roll (F7) side by side */
.fl-upper-dock {
  display: flex;
  height: 182px;
  min-height: 150px;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-panel);
  overflow: hidden;
}

.fl-upper-dock.all-collapsed {
  display: none !important;
}

.fl-subwindow {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  overflow: hidden;
}

.fl-subwindow.collapsed {
  display: none !important;
}

.channel-rack-window {
  flex: 1.05;
  border-right: 2px solid var(--border-color);
  min-width: 280px;
}

.piano-roll-window {
  flex: 1.15;
  min-width: 280px;
}

.fl-window-header {
  height: 25px;
  min-height: 25px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  font-size: 11px;
  color: var(--text-muted);
  gap: 6px;
}

.fl-win-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.fl-win-badge {
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--text-main);
}

.fl-win-title strong {
  color: var(--text-main);
}

.fl-win-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fl-swing-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
}

.fl-swing-wrap input[type="range"] {
  width: 44px;
}

/* Channel Rack Step Sequencer Rows */
.channel-rack-rows {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-darkest);
}

.cr-row {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 29px;
  min-height: 29px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 5px;
}

.cr-row.active-channel {
  border-color: var(--accent-teal);
  box-shadow: inset 0 0 0 1px var(--accent-teal);
}

.cr-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2b333b;
  border: 1px solid #15191d;
  cursor: pointer;
  flex-shrink: 0;
}

.cr-led.on {
  background: #84cc16;
  box-shadow: 0 0 6px #84cc16;
}

.cr-insert-box {
  font-family: var(--font-mono);
  font-size: 10px;
  width: 18px;
  text-align: center;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 2px;
  color: var(--accent-amber);
  flex-shrink: 0;
}

.cr-channel-btn {
  width: 96px;
  min-width: 82px;
  height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  text-align: left;
  flex-shrink: 0;
}

.cr-steps-grid {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.cr-step {
  flex: 1;
  min-width: 13px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  cursor: pointer;
  position: relative;
  transition: transform 0.05s;
}

/* Audius Studio's signature 4-step alternating button colors (grey / warm reddish-taupe) */
.cr-step.beat-even {
  background: linear-gradient(180deg, #5c666d 0%, #454d53 100%);
}

.cr-step.beat-odd {
  background: linear-gradient(180deg, #745656 0%, #584040 100%);
}

.cr-step.active {
  background: linear-gradient(180deg, #fde047 0%, #f97316 100%);
  border-color: #fff;
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
}

.cr-step.playing-step {
  outline: 2px solid #2dd4bf;
  z-index: 2;
}

/* Piano Roll Body */
.piano-roll-body {
  flex: 1;
  position: relative;
  background: var(--bg-darkest);
  overflow: hidden;
}

#piano-roll-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.fl-pl-icons, .fl-pr-tools {
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.85;
}

/* Audius Studio Multi-Insert Mixer & FX Slots Window (Bottom Dock, F9) */
.mixer-window {
  height: 162px;
  min-height: 145px;
  border-top: 2px solid var(--border-color);
  background: var(--bg-panel);
}

.mixer-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--bg-darkest);
}

.mixer-strips-container {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 4px;
  gap: 3px;
}

.mixer-strip {
  width: 58px;
  min-width: 54px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 3px 4px;
  cursor: pointer;
  position: relative;
}

.mixer-strip.selected {
  border-color: var(--accent-teal);
  box-shadow: inset 0 0 0 1px var(--accent-teal);
}

.mixer-strip-topbar {
  width: calc(100% + 6px);
  height: 4px;
  margin-bottom: 2px;
}

.mixer-strip-num {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}

.mixer-strip-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-main);
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.mixer-fader-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 62px;
}

.mixer-v-fader {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 16px;
  height: 60px;
  cursor: ns-resize;
}

.mixer-v-meter {
  width: 7px;
  height: 60px;
  background: #090c10;
  border: 1px solid #222933;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.mixer-v-meter-fill {
  width: 100%;
  height: 6%;
  background: linear-gradient(0deg, #22c55e 0%, #eab308 75%, #ef4444 100%);
  transition: height 0.05s linear;
}

.mixer-db-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-teal);
}

.mixer-fx-rack {
  width: 205px;
  min-width: 180px;
  border-left: 2px solid var(--border-color);
  background: var(--bg-panel);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.fx-rack-head {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent-amber);
  margin-bottom: 2px;
}

.fx-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-darkest);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}

.fx-slot.active {
  border-color: var(--accent-teal);
  color: var(--text-main);
}

.fx-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #333;
}

.fx-led.on {
  background: #84cc16;
  box-shadow: 0 0 5px #84cc16;
}

/* ============================================================================
   MANUS AI TYPOGRAPHY SCALE OVERRIDES (15px-16px Base, 14px Controls, 13px Labels)
   ============================================================================ */

.topbar {
  min-height: 56px !important;
  padding: 6px 14px !important;
}

.toolbar {
  min-height: 46px !important;
  padding: 5px 12px !important;
}

.project-name-input {
  font-size: 15px !important;
  font-weight: 600 !important;
  width: 215px !important;
}

.status-pill {
  font-size: 13.5px !important;
  font-weight: 500;
}

.fl-menu-bar {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  letter-spacing: -0.005em !important;
}

.palette-lbl,
.cluster-label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.swatch-btn,
.custom-color-chip {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  height: 32px !important;
  padding: 0 10px !important;
}

.pat-song-btn {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
}

.readout-main {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

.readout-sub {
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums;
}

.bpm-box input {
  font-size: 16px !important;
  width: 52px !important;
  font-variant-numeric: tabular-nums;
}

.bpm-decimals {
  font-size: 12.5px !important;
}

.action-btn,
.theme-select {
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 36px !important;
  padding: 0 13px !important;
}

.tool-btn,
.mini-btn,
.toolbar-select {
  font-size: 14px !important;
  font-weight: 500 !important;
  height: 34px !important;
  padding: 0 10px !important;
}

kbd {
  font-size: 12px !important;
  font-weight: 600;
  padding: 1px 5px !important;
}

.panel-header,
.fl-window-header,
.track-column-top {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  height: 34px !important;
  min-height: 34px !important;
}

.fl-win-badge,
.tiny-btn {
  font-size: 13px !important;
  font-weight: 500 !important;
  height: 26px !important;
  padding: 0 9px !important;
}

.left-panel {
  width: 265px !important;
}

.fl-folder-item {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 7px 10px !important;
}

.dropzone-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

.dropzone-sub {
  font-size: 13px !important;
}

.asset-name {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.asset-meta,
.asset-actions button {
  font-size: 13px !important;
  padding: 3px 8px !important;
}

.panel-footer-tips,
.tip-title {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.fl-upper-dock {
  height: 196px !important;
}

.cr-row {
  height: 34px !important;
  min-height: 34px !important;
}

.cr-insert-box {
  font-size: 13px !important;
  width: 24px !important;
}

.cr-channel-btn {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  width: 124px !important;
  height: 26px !important;
}

.minimap-bar {
  height: 32px !important;
}

.minimap-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  width: 215px !important;
}

.track-column {
  width: 215px !important;
}

.track-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  max-width: 126px !important;
}

.trk-btn {
  font-size: 12.5px !important;
  width: 24px !important;
  height: 24px !important;
}

.track-row-Sliders span {
  font-size: 12.5px !important;
}

.mixer-window {
  height: 174px !important;
}

.mixer-strip {
  width: 72px !important;
  min-width: 68px !important;
}

.mixer-strip-num {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

.mixer-strip-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  max-width: 66px !important;
}

.mixer-db-lbl {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}

.mixer-fx-rack {
  width: 230px !important;
}

.fx-rack-head {
  font-size: 13px !important;
}

.fx-slot {
  font-size: 13.5px !important;
  padding: 5px 8px !important;
}

.playlist-bottombar,
.cursor-info {
  font-size: 13.5px !important;
  height: 32px !important;
}

.field-row label,
.field-box label,
.slider-head,
.checkbox-label {
  font-size: 13.5px !important;
}

.field-row input,
.field-box input,
.field-box select {
  font-size: 14px !important;
  height: 32px !important;
}

.ctx-head,
.ctx-btn,
.nudge-btn,
.matrix-pad-name {
  font-size: 13.5px !important;
}

.modal-head h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
}

.modal-body {
  font-size: 14.5px !important;
}

/* ============================================================================
   OFFICIAL AUDIUS BRANDING & HARMONY DESIGN SYSTEM STYLING (brand.audius.co)
   ============================================================================ */

.topbar {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #CC0FE0 0%, #7E1BCC 50%, #1BA1F1 100%) 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.audius-logo-lockup {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.12s cubic-bezier(0.44, 0, 0.56, 1), border-color 0.15s, box-shadow 0.15s;
  animation: audiusLockupBorderPulse 7.2s infinite ease-in-out;
}

.audius-logo-lockup:hover {
  transform: translateY(-1px);
  border-color: var(--accent-orange);
  box-shadow: 0 4px 14px rgba(204, 15, 224, 0.35);
}

.audius-horizontal-svg {
  height: 24px;
  width: auto;
  display: block;
  overflow: visible;
  color: var(--text-main);
}

.audius-glyph-color-img {
  display: none;
}

.audius-lockup-glyph {
  transform-box: fill-box;
  transform-origin: center center;
  animation: audiusGlyphPulse 7.2s infinite ease-in-out;
}

.wm-char {
  transform-box: fill-box;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.wm-audius-char {
  animation: audiusCharWave 7.2s infinite cubic-bezier(0.34, 1.4, 0.64, 1);
  animation-delay: calc(var(--i, 0) * 65ms);
}

.wm-studio-char {
  opacity: 0;
  animation: studioCharWave 7.2s infinite cubic-bezier(0.34, 1.4, 0.64, 1);
  animation-delay: calc(var(--i, 0) * 65ms);
}

@keyframes audiusCharWave {
  0%, 35% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    fill: currentColor;
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
  40% {
    opacity: 0.92;
    transform: translateY(-5px) scaleY(0.76);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 9px rgba(204, 15, 224, 0.85));
  }
  45%, 85% {
    opacity: 0;
    transform: translateY(-18px) scaleY(0.18);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
  89% {
    opacity: 0;
    transform: translateY(18px) scaleY(0.18);
    fill: url(#audius-morph-shimmer);
  }
  94% {
    opacity: 0.95;
    transform: translateY(-1.5px) scaleY(1.05);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 9px rgba(27, 161, 241, 0.85));
  }
  98%, 100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    fill: currentColor;
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
}

@keyframes studioCharWave {
  0%, 38% {
    opacity: 0;
    transform: translateY(18px) scaleY(0.18);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
  44% {
    opacity: 0.95;
    transform: translateY(-1.5px) scaleY(1.05);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 10px rgba(204, 15, 224, 0.9));
  }
  49%, 85% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    fill: currentColor;
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
  90% {
    opacity: 0.9;
    transform: translateY(-5px) scaleY(0.76);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 9px rgba(27, 161, 241, 0.85));
  }
  95%, 100% {
    opacity: 0;
    transform: translateY(-18px) scaleY(0.18);
    fill: url(#audius-morph-shimmer);
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
}

@keyframes audiusGlyphPulse {
  0%, 35%, 52%, 85%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(204, 15, 224, 0));
  }
  43%, 93% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(204, 15, 224, 0.85));
  }
}

@keyframes audiusLockupBorderPulse {
  0%, 35%, 54%, 85%, 100% {
    border-color: var(--border-color);
    box-shadow: none;
  }
  44%, 93% {
    border-color: rgba(204, 15, 224, 0.65);
    box-shadow: 0 0 14px rgba(204, 15, 224, 0.25), inset 0 0 10px rgba(126, 27, 204, 0.14);
  }
}

/* Per brand.audius.co/logo: Full-color glyph + #110051 deep navy wordmark on light backgrounds; single-color on dark backgrounds */
body[data-theme="daylight"] .audius-logo-lockup {
  background: #FFFFFF;
  border-color: #D6D5DB;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

body[data-theme="daylight"] .audius-horizontal-svg {
  color: #110051;
}

body[data-theme="daylight"] .audius-glyph-mono-path {
  display: none;
}

body[data-theme="daylight"] .audius-glyph-color-img {
  display: block;
}

.audius-token-mini {
  width: 15px;
  height: 15px;
  vertical-align: -2.5px;
  margin-right: 4px;
  border-radius: 50%;
  object-fit: contain;
}

.audius-tier-coin {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  flex-shrink: 0;
  object-fit: contain;
}

.audius-panel-heading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.audius-inline-glyph {
  flex-shrink: 0;
  border-radius: 4px;
}

.action-btn.accent,
.tool-btn.active,
.tiny-btn.accent,
.transport-btn.play.playing {
  background: var(--audius-gradient, linear-gradient(315deg, #5B23E1 0%, #A22FEB 52%, #CC0FE0 100%)) !important;
  border-color: var(--accent-orange-bright) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(204, 15, 224, 0.35);
}

.action-btn.success {
  background: linear-gradient(135deg, #1BA1F1 0%, #7E1BCC 52%, #CC0FE0 100%) !important;
  border-color: #58B9F4 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(27, 161, 241, 0.32);
}

/* Audius Step Sequencer Active Steps */
.cr-step.active {
  background: linear-gradient(180deg, #F479FF 0%, #CC0FE0 55%, #7E1BCC 100%) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 0 8px rgba(204, 15, 224, 0.75) !important;
}

.cr-step.playing-step {
  outline: 2px solid #1BA1F1 !important;
}

.cr-led.on,
.fx-led.on {
  background: #CC0FE0 !important;
  box-shadow: 0 0 7px #CC0FE0 !important;
}

#btn-mode-song.active {
  background: linear-gradient(135deg, #CC0FE0 0%, #7E1BCC 100%) !important;
  color: #FFFFFF !important;
  border-color: #F479FF !important;
  box-shadow: 0 0 8px rgba(204, 15, 224, 0.55) !important;
}

#btn-mode-pat.active {
  background: #1BA1F1 !important;
  color: #FFFFFF !important;
  border-color: #58B9F4 !important;
}

/* ==========================================================================
   OFFICIAL AUDIUS WALLPAPER BACKDROPS (Aurora Glow, The Grid, Wireframe Peaks, Pastel Icons)
   Responsive multi-resolution assets for Desktop (16:9), Tablet (3:4), and Mobile/Note 3 (9:19.5)
   ========================================================================== */

body[data-wallpaper="Aurora-Glow"] {
  --audius-wallpaper-url: url("/assets/audius/wallpapers/Aurora-Glow-desktop.jpg");
}
body[data-wallpaper="Wireframe-Peaks"] {
  --audius-wallpaper-url: url("/assets/audius/wallpapers/Wireframe-Peaks-desktop.jpg");
}
body[data-wallpaper="The-Grid"] {
  --audius-wallpaper-url: url("/assets/audius/wallpapers/The-Grid-desktop.jpg");
}
body[data-wallpaper="Pastel-Icons"] {
  --audius-wallpaper-url: url("/assets/audius/wallpapers/Pastel-Icons-desktop.jpg");
}

@media (max-aspect-ratio: 4/3) {
  body[data-wallpaper="Aurora-Glow"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Aurora-Glow-tablet.jpg");
  }
  body[data-wallpaper="Wireframe-Peaks"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Wireframe-Peaks-tablet.jpg");
  }
  body[data-wallpaper="The-Grid"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/The-Grid-tablet.jpg");
  }
  body[data-wallpaper="Pastel-Icons"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Pastel-Icons-tablet.jpg");
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  body[data-wallpaper="Aurora-Glow"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Aurora-Glow-mobile.jpg");
  }
  body[data-wallpaper="Wireframe-Peaks"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Wireframe-Peaks-mobile.jpg");
  }
  body[data-wallpaper="The-Grid"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/The-Grid-mobile.jpg");
  }
  body[data-wallpaper="Pastel-Icons"] {
    --audius-wallpaper-url: url("/assets/audius/wallpapers/Pastel-Icons-mobile.jpg");
  }
}

body[data-wallpaper]:not([data-wallpaper="none"]) .app-shell {
  background-image: var(--audius-wallpaper-url);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body[data-wallpaper]:not([data-wallpaper="none"]) .workspace,
body[data-wallpaper]:not([data-wallpaper="none"]) .center-panel,
body[data-wallpaper]:not([data-wallpaper="none"]) .playlist-shell,
body[data-wallpaper]:not([data-wallpaper="none"]) .playlist-body,
body[data-wallpaper]:not([data-wallpaper="none"]) .playlist-canvas-wrap {
  background: transparent !important;
}

body[data-wallpaper]:not([data-wallpaper="none"]) .left-panel,
body[data-wallpaper]:not([data-wallpaper="none"]) .right-panel,
body[data-wallpaper]:not([data-wallpaper="none"]) .track-headers-col {
  background: rgba(18, 11, 34, 0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body[data-theme="daylight"][data-wallpaper]:not([data-wallpaper="none"]) .left-panel,
body[data-theme="daylight"][data-wallpaper]:not([data-wallpaper="none"]) .right-panel,
body[data-theme="daylight"][data-wallpaper]:not([data-wallpaper="none"]) .track-headers-col {
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}






/* Responsive Studio shell: fixed viewport, deliberate menus, no page-level horizontal scroll. */
html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

#app-shell {
  width: 100%;
  min-width: 0;
  height: 100dvh;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  grid-template-areas: "brand transport options";
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 80;
  min-width: 0;
  height: auto;
  overflow: visible !important;
}

.brand-group {
  grid-area: brand;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
}

.audius-logo-lockup {
  flex: 0 0 auto;
  padding: 5px 9px;
}

.audius-horizontal-svg {
  max-width: 100%;
  height: 22px;
}

.fl-menu-hint-stack {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.fl-menu-bar {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  gap: clamp(3px, 0.55vw, 9px) !important;
  overflow: hidden;
}

.fl-menu-item {
  flex: 0 0 auto;
}

.project-name-input {
  width: clamp(115px, 15vw, 215px) !important;
  min-width: 0;
  max-width: 100%;
}

.fl-hint-bar {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.topbar-menu {
  grid-area: options;
  position: relative;
  justify-self: end;
  flex: 0 0 auto;
  z-index: 90;
}

.topbar-menu > summary,
.toolbar-primary-menu > summary,
.toolbar-overflow-menu > summary,
.transport-extras > summary,
.transport-readouts > summary {
  list-style: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-panel-alt);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.topbar-menu > summary::-webkit-details-marker,
.toolbar-primary-menu > summary::-webkit-details-marker,
.toolbar-overflow-menu > summary::-webkit-details-marker,
.transport-extras > summary::-webkit-details-marker,
.transport-readouts > summary::-webkit-details-marker {
  display: none;
}

.topbar-menu > summary:hover,
.toolbar-primary-menu > summary:hover,
.toolbar-overflow-menu > summary:hover,
.transport-extras > summary:hover,
.transport-readouts > summary:hover {
  border-color: var(--accent-teal);
}

.topbar-menu-popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100;
  width: min(760px, calc(100vw - 16px));
  max-height: calc(100dvh - 96px);
  overflow: auto;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.topbar-menu[open] > .topbar-menu-popover {
  display: flex;
}

.palette-bar,
.file-actions {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  overflow: visible;
}

.palette-bar {
  flex-shrink: 1;
}

.file-actions .theme-select {
  max-width: min(100%, 260px);
}

.transport-group {
  grid-area: transport;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: visible;
}

.transport-extras,
.transport-readouts {
  position: relative;
  flex: 0 0 auto;
}

.transport-extras[open] > .transport-extras-content,
.transport-readouts[open] > .transport-readouts-content {
  display: contents;
}

.transport-group .transport-extras > summary,
.transport-group .transport-readouts > summary {
  display: none;
}

.toolbar {
  position: relative;
  z-index: 50;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  height: auto;
  overflow: visible !important;
  flex: 0 0 auto;
}

.toolbar-primary-menu {
  display: flex;
  align-items: center;
  min-width: 0;
  position: relative;
}

.toolbar-primary-menu > summary,
.toolbar-overflow-menu > summary {
  display: none;
}

.toolbar-primary-content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.toolbar-primary-content > .tool-cluster {
  gap: 4px;
}

.toolbar-primary-content .cluster-label {
  display: none;
}

.toolbar-primary-content .tool-divider {
  margin: 0 2px;
}

.toolbar-overflow-menu {
  position: relative;
  flex: 0 0 auto;
  z-index: 70;
}

.toolbar-overflow-menu > summary {
  min-width: 88px;
}

.toolbar-overflow-content {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 75;
  width: min(940px, calc(100vw - 16px));
  max-height: min(70dvh, 720px);
  overflow: auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-panel);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.toolbar-overflow-menu[open] > .toolbar-overflow-content {
  display: flex;
}

.toolbar-overflow-content > .tool-cluster {
  flex: 1 1 300px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.toolbar-overflow-content > .tool-divider {
  display: none;
}

.toolbar-overflow-content .right-cluster {
  margin-left: 0;
}

.toolbar-overflow-content .fl-pattern-selector {
  max-width: 100%;
  flex-wrap: wrap;
}

.toolbar-overflow-content .toolbar-select {
  max-width: 100%;
}

.mobile-window-switcher {
  display: none;
}

/* Intermediate widths: keep the brand and menu together, move transport to its own row. */
@media (max-width: 1500px) {
  .fl-menu-item {
    display: none;
  }
}

@media (max-width: 1200px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand options"
      "transport transport";
    gap: 6px 10px;
  }

  .transport-group {
    justify-self: stretch;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .toolbar-primary-content {
    flex-wrap: wrap;
  }

  .left-panel {
    width: clamp(210px, 24vw, 265px) !important;
  }

  .track-column,
  .minimap-label {
    width: clamp(145px, 19vw, 215px) !important;
  }
}

/* Compact phone and short-landscape mode: window tabs replace the docked multi-window layout. */
@media (max-width: 760px), (max-width: 900px) and (max-height: 520px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand options"
      "transport transport";
    padding: 4px 7px !important;
    gap: 4px 6px;
  }

  .brand-group {
    gap: 5px;
  }

  .audius-logo-lockup {
    padding: 4px 6px;
    border-radius: 6px;
  }

  .audius-horizontal-svg {
    height: 18px;
    width: auto;
  }

  .fl-hint-bar,
  .fl-menu-item {
    display: none !important;
  }

  .project-name-input {
    width: clamp(92px, 29vw, 200px) !important;
    font-size: 14px !important;
  }

  .topbar-menu > summary {
    min-height: 44px;
    padding: 0 10px;
  }

  .transport-group {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 5px;
  }

  .pat-song-stack {
    flex-direction: row;
    gap: 3px;
  }

  .pat-song-btn {
    min-width: 38px;
    min-height: 40px;
    font-size: 13px !important;
  }

  .transport-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .transport-group .transport-extras > summary,
  .transport-group .transport-readouts > summary {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
  }

  .transport-extras[open] > .transport-extras-content,
  .transport-readouts[open] > .transport-readouts-content {
    display: flex;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 100;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  }

  .time-readout {
    min-width: 108px;
  }

  .master-box {
    gap: 4px;
  }

  .master-box input[type="range"] {
    width: 66px;
  }

  .toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px;
    padding: 5px 7px !important;
  }

  .toolbar-primary-menu,
  .toolbar-overflow-menu {
    min-width: 0;
    width: 100%;
  }

  .toolbar-primary-menu > summary,
  .toolbar-overflow-menu > summary {
    display: flex;
    width: 100%;
    min-height: 44px;
  }

  .toolbar-primary-content,
  .toolbar-overflow-content {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: auto;
    z-index: 100;
    width: min(520px, calc(100vw - 14px));
    max-height: min(52dvh, 400px);
    overflow: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-panel);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }

  .toolbar-primary-menu[open] > .toolbar-primary-content,
  .toolbar-overflow-menu[open] > .toolbar-overflow-content {
    display: flex;
  }

  .toolbar-primary-content > .tool-cluster,
  .toolbar-overflow-content > .tool-cluster {
    min-width: 0;
    flex-wrap: wrap;
  }

  .toolbar-primary-content > .tool-cluster[role="group"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .toolbar-primary-content .tool-btn,
  .toolbar-overflow-content .mini-btn,
  .toolbar-primary-content .toolbar-select {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }

  .toolbar-primary-content .tool-divider {
    display: none;
  }

  .mobile-window-switcher {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 3px;
    min-width: 0;
    padding-top: 2px;
  }

  .mobile-window-switcher button {
    min-width: 0;
    min-height: 46px;
    padding: 2px 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-panel-alt);
    color: var(--text-main);
    cursor: pointer;
  }

  .mobile-window-switcher button span {
    font-size: 17px;
    line-height: 1;
  }

  .mobile-window-switcher button small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.2;
  }

  .mobile-window-switcher button.active {
    border-color: var(--accent-teal);
    background: rgba(34, 211, 238, 0.16);
    color: var(--accent-teal);
    box-shadow: inset 0 0 0 1px var(--accent-teal);
  }

  .workspace {
    display: block;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .workspace > .left-panel,
  .workspace > .playlist-center,
  .workspace > .right-panel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    border-left: 0;
    border-right: 0;
  }

  #workspace[data-mobile-window="library"] #left-panel {
    display: flex !important;
    z-index: 2;
  }

  #workspace[data-mobile-window="library"] .playlist-center,
  #workspace[data-mobile-window="library"] .right-panel {
    display: none !important;
  }

  #workspace[data-mobile-window="playlist"] #left-panel,
  #workspace[data-mobile-window="step"] #left-panel,
  #workspace[data-mobile-window="piano"] #left-panel,
  #workspace[data-mobile-window="mixer"] #left-panel,
  #workspace[data-mobile-window="trellis"] #left-panel,
  #workspace[data-mobile-window="inspector"] #left-panel {
    display: none !important;
  }

  #workspace[data-mobile-window="playlist"] .playlist-center,
  #workspace[data-mobile-window="step"] .playlist-center,
  #workspace[data-mobile-window="piano"] .playlist-center,
  #workspace[data-mobile-window="mixer"] .playlist-center,
  #workspace[data-mobile-window="trellis"] .playlist-center {
    display: flex !important;
    z-index: 2;
  }

  #workspace[data-mobile-window="playlist"] .right-panel,
  #workspace[data-mobile-window="step"] .right-panel,
  #workspace[data-mobile-window="piano"] .right-panel,
  #workspace[data-mobile-window="mixer"] .right-panel,
  #workspace[data-mobile-window="trellis"] .right-panel {
    display: none !important;
  }

  #workspace[data-mobile-window="playlist"] .minimap-bar,
  #workspace[data-mobile-window="playlist"] .playlist-body,
  #workspace[data-mobile-window="playlist"] .playlist-bottombar {
    display: flex !important;
  }

  #workspace[data-mobile-window="playlist"] .fl-upper-dock,
  #workspace[data-mobile-window="playlist"] #mixer-window,
  #workspace[data-mobile-window="playlist"] .trellis-dock {
    display: none !important;
  }

  #workspace[data-mobile-window="step"] .playlist-center > :not(.fl-upper-dock),
  #workspace[data-mobile-window="piano"] .playlist-center > :not(.fl-upper-dock),
  #workspace[data-mobile-window="mixer"] .playlist-center > :not(#mixer-window),
  #workspace[data-mobile-window="trellis"] .playlist-center > :not(.trellis-dock) {
    display: none !important;
  }

  #workspace[data-mobile-window="step"] .fl-upper-dock,
  #workspace[data-mobile-window="piano"] .fl-upper-dock {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border: 0;
  }

  #workspace[data-mobile-window="step"] #channel-rack-window,
  #workspace[data-mobile-window="piano"] #piano-roll-window {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
  }

  #workspace[data-mobile-window="step"] #piano-roll-window,
  #workspace[data-mobile-window="piano"] #channel-rack-window {
    display: none !important;
  }

  #workspace[data-mobile-window="mixer"] #mixer-window {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border: 0;
  }

  #workspace[data-mobile-window="mixer"] .mixer-fx-rack {
    width: min(42%, 220px) !important;
    min-width: 135px !important;
  }

  #workspace[data-mobile-window="trellis"] .trellis-dock {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  #workspace[data-mobile-window="trellis"] .trellis-dock-right,
  #workspace[data-mobile-window="trellis"] .trellis-pad-strip {
    min-width: 0;
  }

  #workspace[data-mobile-window="trellis"] .trellis-pad-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #workspace[data-mobile-window="inspector"] .right-panel {
    display: flex !important;
    z-index: 3;
    overflow: auto;
  }

  .left-panel {
    flex: 1 1 auto;
  }

  .panel-header,
  .fl-window-header,
  .track-column-top {
    min-height: 44px !important;
    height: auto !important;
  }

  .panel-header-actions {
    gap: 3px;
  }

  .panel-close-btn,
  .tiny-btn,
  .trk-btn {
    min-width: 40px;
    min-height: 40px;
  }

  .fl-folder-item {
    min-height: 44px;
    padding: 8px 10px !important;
    white-space: normal;
    line-height: 1.3;
    font-size: 15px !important;
  }

  .asset-item {
    min-height: 64px;
  }

  .asset-name {
    font-size: 15px !important;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .asset-meta {
    font-size: 13px !important;
  }

  .track-column,
  .minimap-label {
    width: clamp(118px, 36vw, 180px) !important;
    min-width: 118px;
  }

  .track-title {
    max-width: 100% !important;
    font-size: 14px !important;
  }

  .track-row-top,
  .track-btns {
    min-width: 0;
  }

  .trk-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .playlist-bottombar {
    min-height: 40px;
    height: auto !important;
    padding: 4px 8px;
    flex-wrap: wrap;
  }

  .scroll-wrap {
    width: min(58%, 260px);
  }

  .cursor-info {
    font-size: 12px;
  }

  .channel-rack-rows {
    overflow: auto;
    padding: 6px;
  }

  .cr-row {
    min-width: 580px;
    min-height: 40px;
    height: 40px !important;
  }

  .cr-channel-btn {
    min-height: 36px;
  }

  .cr-step {
    min-height: 28px;
  }

  .mixer-window {
    min-height: 0;
  }

  .mixer-strip {
    min-width: 62px !important;
  }

  .fx-slot {
    min-height: 36px;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .topbar {
    padding-right: 5px !important;
    padding-left: 5px !important;
  }

  .brand-group {
    gap: 4px;
  }

  .audius-horizontal-svg {
    height: 16px;
  }

  .project-name-input {
    width: clamp(78px, 27vw, 115px) !important;
    padding-right: 2px;
    padding-left: 3px;
    font-size: 13px !important;
  }

  .topbar-menu > summary {
    padding: 0 7px;
    font-size: 13px;
  }

  .transport-group {
    gap: 3px;
    padding: 3px;
  }

  .bpm-box {
    gap: 2px;
    padding: 2px 3px;
  }

  .bpm-box input {
    width: 42px !important;
  }

  .bpm-decimals,
  .bpm-step-btn {
    display: none;
  }

  .mobile-window-switcher button small {
    font-size: 10px;
  }

  .track-column,
  .minimap-label {
    width: 118px !important;
    min-width: 118px;
  }

  .minimap-label {
    gap: 3px;
    padding: 0 4px;
  }

  .reopen-pool-btn {
    max-width: 58px;
    overflow: hidden;
  }

  .track-btns {
    gap: 2px;
  }

  .trk-btn {
    min-width: 34px;
    width: 34px !important;
    min-height: 36px;
    height: 36px !important;
  }
}

/* Tablet portrait and tall narrow windows retain docked panels but never force page-wide overflow. */
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 521px) {
  .left-panel {
    width: 220px !important;
  }

  .track-column,
  .minimap-label {
    width: 165px !important;
  }

  .fl-upper-dock {
    height: clamp(155px, 19vh, 196px) !important;
  }

  .mixer-window {
    height: clamp(160px, 18vh, 174px) !important;
  }
}

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


/* Readability pass for controls and status text without relying on browser zoom. */
.status-pill,
.fl-menu-bar,
.cluster-label,
.palette-lbl,
.swatch-btn,
.custom-color-chip,
.panel-header,
.fl-window-header,
.track-column-top,
.mixer-db-lbl,
.fx-slot {
  font-size: 15px !important;
}

.mobile-window-switcher button small {
  font-size: 15px;
  font-weight: 600;
}

.asset-meta,
.mixer-strip-num,
.readout-sub,
.bpm-box label {
  font-size: 14px !important;
}

@media (max-width: 420px) {
  .mobile-window-switcher button small {
    font-size: 14px;
  }
}


/* Keep closed disclosure content out of layout and viewport-bound measurements. */
.toolbar-primary-menu:not([open]) > .toolbar-primary-content,
.toolbar-overflow-menu:not([open]) > .toolbar-overflow-content {
  display: none !important;
}

/* The minimap heading is a label, not a second toolbar: remove the decorative icon collision. */
.fl-pl-icons {
  display: none !important;
}

#touch-counter-badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px !important;
  font-weight: 700;
}

@media (max-width: 760px), (max-width: 900px) and (max-height: 520px) {
  .track-column,
  .minimap-label {
    width: 168px !important;
    min-width: 168px;
  }

  .track-header-item {
    padding: 2px 4px;
  }

  .track-row-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-left: 2px;
  }

  .track-title {
    max-width: 100% !important;
    line-height: 16px;
    font-size: 14px !important;
  }

  .track-btns {
    width: 100%;
    justify-content: flex-end;
    gap: 2px;
  }

  .trk-btn {
    min-width: 44px;
    width: 44px !important;
    min-height: 44px;
    height: 44px !important;
  }

  .asset-item {
    min-height: 72px;
    height: auto;
  }

  .asset-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  .fl-pl-icons {
    display: none !important;
  }

  .minimap-label {
    gap: 4px;
    padding: 0 6px;
  }
}

@media (max-width: 420px) {
  .track-column,
  .minimap-label {
    width: 160px !important;
    min-width: 160px;
  }
}


@media (pointer: coarse), (hover: none) {
  .track-column-top {
    height: 44px !important;
    min-height: 44px;
  }

  .track-header-item {
    padding: 2px 4px;
  }

  .track-row-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-left: 2px;
  }

  .track-title {
    max-width: 100% !important;
    line-height: 16px;
    font-size: 14px !important;
  }

  .track-btns {
    width: 100%;
    justify-content: flex-end;
    gap: 2px;
  }

  .trk-btn {
    min-width: 44px;
    width: 44px !important;
    min-height: 44px;
    height: 44px !important;
  }
}


.project-name-label {
  display: inline-block;
  min-width: 0;
  max-width: clamp(190px, 17vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
}

.file-actions .project-name-input {
  width: min(360px, 100%) !important;
  min-width: 220px;
  min-height: 44px;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  .project-name-label {
    max-width: min(360px, calc(100vw - 270px));
    font-size: 15px;
  }

  .file-actions .project-name-input {
    width: min(100%, 360px) !important;
    min-width: min(220px, 100%);
  }
}

@media (max-width: 420px) {
  .project-name-label {
    display: none;
  }
}


.project-name-label {
  max-width: min(360px, calc(100vw - 260px));
}

@media (max-width: 520px) {
  .project-name-label {
    display: none;
  }
}

/* ==========================================================================
   UI polish layer: fit, readability (15px minimum) and touch (44px targets).
   Appended last so it settles the earlier override blocks; !important is only
   used where an earlier rule already uses it.
   ========================================================================== */

/* Library header: heading + close on the first row, Demo / Clear below, so
   nothing spills out of the 220-265px panel. */
#left-panel .panel-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "head head close"
    "demo clear clear";
  align-items: center;
  gap: 6px;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px 8px;
}

#left-panel .panel-header-actions {
  display: contents;
}

#left-panel .audius-panel-heading {
  grid-area: head;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#btn-load-demo {
  grid-area: demo;
}

#btn-clear-pool {
  grid-area: clear;
}

#btn-close-pool {
  grid-area: close;
}

/* Library cards: full-width name (up to two lines), details, then actions. */
.asset-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "meta"
    "actions";
  gap: 4px;
  height: auto !important;
}

.asset-card-top {
  display: contents !important;
}

.asset-name {
  grid-area: name;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: none !important;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.asset-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
}

.asset-actions {
  grid-area: actions;
  display: flex !important;
  justify-content: flex-end;
  gap: 6px;
}

/* Track headers: title + M/S/x, then a Vol/Pan grid where both sliders get
   an equal share of the width instead of the second one being clipped. */
.track-row-top {
  min-width: 0;
}

.track-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none !important;
}

.track-btns {
  flex: 0 0 auto;
}

.track-row-Sliders {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.track-row-Sliders input[type="range"] {
  width: 100%;
  min-width: 0;
}

@media (min-width: 1440px) {
  .track-column,
  .minimap-label {
    width: 240px !important;
  }
}

/* Desktop and tablet transport: one row instead of a vertical stack of
   loop / metronome / keyboard icons. (Inverse of the compact phone query.) */
@media (min-width: 901px), (min-width: 761px) and (min-height: 521px) {
  .transport-group {
    align-items: center;
  }

  .transport-extras[open] > .transport-extras-content,
  .transport-readouts[open] > .transport-readouts-content {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

/* Readable type: 15px minimum for every label, button and readout. */
.asset-name,
.asset-meta,
.asset-meta span,
.asset-actions button,
.del-asset-btn,
.tool-btn,
.tiny-btn,
.toolbar-select,
.fl-folder-item,
.panel-header,
.panel-close-btn,
.panel-footer-tips,
.panel-footer-tips li,
.panel-footer-tips strong,
.tip-title,
.dropzone-title,
.dropzone-sub,
.cursor-info,
.readout-sub,
.track-title,
.track-column-top,
.track-row-Sliders span,
.trk-btn,
.pat-song-btn,
.transport-btn,
.bpm-step-btn,
.bpm-decimals,
.minimap-label,
.topbar-menu > summary,
.toolbar-primary-menu > summary,
.toolbar-overflow-menu > summary,
.transport-extras > summary,
.transport-readouts > summary,
.mobile-window-switcher small,
.playlist-bottombar span {
  font-size: 15px !important;
}

kbd {
  font-size: 13px !important;
}

/* Touch screens (tablets and phones): 44px targets everywhere, no keyboard
   shortcut chips, and FL-style track headers (name + M/S/x; volume and pan
   live in the Mixer) so rows fit their lanes without clipping. */
@media (pointer: coarse), (hover: none) {
  kbd {
    display: none !important;
  }

  .tool-btn,
  .tiny-btn,
  .toolbar-select,
  .transport-btn,
  .pat-song-btn,
  .bpm-step-btn,
  .panel-close-btn,
  .del-asset-btn,
  .asset-actions button,
  .swatch-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #bpm-input {
    min-height: 44px;
    font-size: 16px !important;
  }

  .pat-song-stack {
    flex-direction: row !important;
    gap: 4px;
  }

  .track-row-Sliders {
    display: none !important;
  }

  .track-row-top {
    gap: 2px;
  }

  input[type="range"] {
    min-height: 44px;
  }
}