:root {
  --bg: #07080e;
  --panel: rgba(16, 18, 28, 0.93);
  --metal-brush: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, rgba(255,255,255,0.02) 1px 3px, transparent 3px 5px);
  --text: #f5f7fb;
  --muted: #aab1c2;
  --accent: #00d9ff;
  --accent-two: #ffb347;
  --danger: #ff4d6d;
  --success: #7dff9b;
  --deck-a: #00d9ff;
  --deck-b: #ffb347;
  --shadow: 0 24px 80px rgba(0,0,0,0.45);
  --venue: radial-gradient(circle at 50% 0%, rgba(0,217,255,0.34), transparent 33%), linear-gradient(145deg, #07080e, #11162a 52%, #02040a);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--venue);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,0.03) 8% 8.2%, transparent 8.2% 16%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.07), transparent 14%),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.05), transparent 16%);
  mix-blend-mode: screen;
}

.theme-wedding {
  --panel: rgba(38, 28, 39, 0.92);
  --accent: #ffd36e;
  --accent-two: #fff5d7;
  --deck-a: #ffd36e;
  --deck-b: #fff5d7;
  --venue: radial-gradient(circle at 50% 0%, rgba(255,211,110,0.28), transparent 34%), linear-gradient(145deg, #1c1520, #6a4d5d 52%, #160f17);
}
.theme-hiphop {
  --panel: rgba(17, 17, 17, 0.93);
  --accent: #ff3562;
  --accent-two: #ffe156;
  --deck-a: #ff3562;
  --deck-b: #ffe156;
  --venue: radial-gradient(circle at 20% 0%, rgba(255,53,98,0.34), transparent 31%), linear-gradient(140deg, #050505, #241018 50%, #080808);
}
.theme-lounge {
  --panel: rgba(34, 21, 14, 0.93);
  --accent: #f0a45d;
  --accent-two: #71e2bd;
  --deck-a: #f0a45d;
  --deck-b: #71e2bd;
  --venue: radial-gradient(circle at 50% 0%, rgba(240,164,93,0.3), transparent 35%), linear-gradient(145deg, #160d08, #302115 55%, #090604);
}
.theme-festival {
  --panel: rgba(5, 16, 31, 0.91);
  --accent: #77ff00;
  --accent-two: #ff3df2;
  --deck-a: #77ff00;
  --deck-b: #ff3df2;
  --venue: radial-gradient(circle at 18% 0%, rgba(119,255,0,0.32), transparent 31%), radial-gradient(circle at 80% 0%, rgba(255,61,242,0.28), transparent 30%), linear-gradient(145deg, #05101f, #18284d 52%, #020712);
}
.theme-radio {
  --panel: rgba(21, 27, 37, 0.94);
  --accent: #7bb7ff;
  --accent-two: #b6c3d1;
  --deck-a: #7bb7ff;
  --deck-b: #b6c3d1;
  --venue: radial-gradient(circle at 50% 0%, rgba(123,183,255,0.23), transparent 31%), linear-gradient(145deg, #11161f, #273142 55%, #080b10);
}

.app-shell {
  width: min(1720px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 22px 0 42px;
}

.topbar,
.library-panel,
.future-note,
.beatmatch-panel,
.auto-dj-panel,
.on-deck-panel {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.brand-block { display: flex; gap: 14px; align-items: center; }
.logo-mark {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), var(--accent-two));
  color: #07080e;
  font-weight: 900;
  letter-spacing: -1px;
  box-shadow: 0 0 28px rgba(0,217,255,0.25);
}
h1, h2, h3, p { margin: 0; }
.topbar h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1; }
.topbar p, .library-header p, .future-note p, .beatmatch-header p { color: var(--muted); margin-top: 6px; }

.status-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.status-pill {
  min-height: 54px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
}
.status-pill span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.status-pill strong { font-size: 22px; }
.audio-pill strong { font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

select, input, button { font: inherit; }
select, input[type="search"] {
  color: var(--text);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px;
  padding: 10px 12px;
  outline: none;
}
button {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 13px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
button:hover { transform: translateY(-1px); border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.primary-action, .library-actions .primary, .mini-toggle.active {
  color: #061006;
  background: linear-gradient(135deg, var(--success), var(--accent));
  border-color: rgba(125,255,155,0.55);
  font-weight: 900;
}
.mini-toggle { padding: 7px 10px; font-weight: 800; }

.screws { position: relative; }
.screws::before, .screws::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8f97a4 30%, #3a404b 58%, #0f1117 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
  z-index: 2;
}
.screws::before { top: 14px; left: 14px; }
.screws::after { bottom: 14px; right: 14px; }
.eyebrow {
  display: inline-flex;
  color: #05070d;
  background: var(--accent);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.beatmatch-panel { padding: 22px; margin-bottom: 18px; overflow: hidden; }
.beatmatch-header, .library-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-bottom: 15px;
}
.beatmatch-actions, .library-actions, .auto-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
}
.beatmatch-actions button, .library-actions button, .auto-controls button {
  min-height: 42px;
  padding: 0 14px;
  font-weight: 800;
}
.zoom-control {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.zoom-control select { min-height: 42px; }
.auto-controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.auto-controls select { min-height: 42px; padding-block: 7px; }

.wave-stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.wave-stack-top {
  display: grid;
  gap: 8px;
}
.wave-lane {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
}
.lane-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.compact-label strong { color: var(--accent-two); min-width: 56px; }
.compact-label span, .compact-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-label span { font-weight: 900; flex: 1; min-width: 140px; }
.compact-label small { color: var(--muted); }
.wave-canvas-wrap {
  position: relative;
  min-height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
  border: 1px solid rgba(255,255,255,0.09);
}
.wave-canvas-wrap.short-wave {
  min-height: 56px;
}
.wave-canvas-wrap canvas {
  width: 100%;
  height: 56px;
  display: block;
}
.center-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 16px rgba(255,255,255,0.8);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.center-playhead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -35%);
}
.beatmatch-footer {


  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  padding-top: 12px;
  font-size: 13px;
}
.beatmatch-footer strong { color: var(--accent-two); }
.beat-align-wrap { display: flex; align-items: center; gap: 8px; }
.alignment-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .03em; border: 1px solid rgba(255,255,255,0.12); }
.alignment-chip.neutral { color: var(--muted); background: rgba(255,255,255,0.06); }
.alignment-chip.tight { color: #061006; background: linear-gradient(135deg, rgba(125,255,155,0.85), rgba(0,217,255,0.85)); }
.alignment-chip.early { color: #190700; background: linear-gradient(135deg, rgba(255,179,71,0.9), rgba(255,77,109,0.75)); }
.alignment-chip.late { color: #061006; background: linear-gradient(135deg, rgba(0,217,255,0.75), rgba(123,183,255,0.9)); }

.dj-console {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(250px, 320px) minmax(360px, 1fr);
  gap: 16px;
  align-items: stretch;
}
.deck, .mixer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)), var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.deck { padding: 20px; min-height: 650px; }
.mixer { padding: 18px; min-height: 650px; }
.deck::before, .mixer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.13), transparent 28% 70%, rgba(255,255,255,0.04));
  pointer-events: none;
}
.deck-face, .mixer-face { position: relative; z-index: 1; }
.deck-header, .deck-body, .transport-row, .mini-waveform, .mixer-title, .eq-grid, .fx-panel, .fader-section, .crossfader, .meter-wrap, .master-volume, .mixer-badge-row { position: relative; z-index: 1; }
.deck-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 20px;
}
.deck-label {
  display: inline-flex;
  color: #05070d;
  background: var(--accent);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.deck h2 { font-size: clamp(24px, 2.4vw, 34px); }
.deck p { color: var(--muted); margin-top: 5px; }
.track-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 8px;
  text-align: right;
  align-items: baseline;
}
.track-meta strong { color: var(--accent-two); font-size: 25px; }
.track-meta span { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.deck-loader {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -6px 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.09);
}
.file-loader, .import-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  color: #061006;
  font-weight: 900;
  border-radius: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--success), var(--accent));
  border: 1px solid rgba(255,255,255,0.16);
}
.file-loader input, .import-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.deck-loader span, .audio-help { color: var(--muted); font-size: 13px; }
.deck-body {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}
.deck-b .deck-body { grid-template-columns: 1fr 68px; }
.pitch-wrap {
  height: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.pitch-cap {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--accent-two);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 10px;
}
.pitch-slider { writing-mode: vertical-lr; direction: rtl; width: 32px; height: 250px; accent-color: var(--accent); }
.pitch-readout {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 62px;
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
}
.pitch-readout strong { color: var(--accent); font-size: 13px; }
.pitch-readout small { color: var(--accent-two); font-size: 11px; }
.turntable { position: relative; min-height: 390px; display: grid; place-items: center; }
.turntable-surface {
  position: relative;
  width: min(460px, 100%);
  min-height: 390px;
  border-radius: 22px;
  padding: 22px;
  background: var(--metal-brush), linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), linear-gradient(145deg, #8c919a, #444b57 30%, #6b7079 55%, #2d333c 75%, #8b9198 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -18px 28px rgba(0,0,0,0.38), 0 22px 55px rgba(0,0,0,0.36);
}
.strobe-strip {
  position: absolute;
  left: 18px;
  top: 34px;
  width: 12px;
  height: 240px;
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.55) 0 4px, rgba(0,0,0,0.15) 4px 7px);
  opacity: .7;
}
.deck-b .strobe-strip { left: auto; right: 18px; }
.platter {
  position: relative;
  width: min(350px, 28vw);
  height: min(350px, 28vw);
  min-width: 270px;
  min-height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1a1d23 0 10.5%, #090909 11% 20%, #242b36 20.5% 21.5%, #070707 22% 64%, #11161c 64.3% 69%, #050505 69.3% 100%);
  border: 10px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 40px rgba(255,255,255,0.07), inset 0 -30px 50px rgba(0,0,0,0.92), 0 20px 55px rgba(0,0,0,0.5), 0 0 38px rgba(0,217,255,0.06);
  overflow: hidden;
}
.platter::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 3px, rgba(255,255,255,0.04) 3px 4px);
  opacity: .25;
}
.platter.is-spinning { animation: spin 2.1s linear infinite; }
.platter.spin-fast { animation: spin .55s linear infinite; }
.platter.spin-reverse { animation: spinReverse .55s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
.platter-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.18); }
.ring-2 { inset: 30%; opacity: .6; }
.ring-3 { inset: 42%; opacity: .45; }
.groove { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); }
.groove-1 { inset: 14%; }
.groove-2 { inset: 25%; }
.groove-3 { inset: 36%; }
.spindle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #878c9c);
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(255,255,255,0.28);
  z-index: 3;
}
.vinyl-label {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  text-align: center;
  gap: 3px;
  padding: 13px 10px 16px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #05070d;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.55), transparent 28%), linear-gradient(135deg, var(--accent), var(--accent-two));
  box-shadow: inset 0 0 18px rgba(255,255,255,0.32);
  z-index: 2;
}
.label-brand { font-size: 9px; text-transform: uppercase; letter-spacing: .22em; font-weight: 900; opacity: .8; }
.label-title { font-size: 12px; line-height: 1.05; font-weight: 1000; align-self: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.label-artist, .label-bpm { font-size: 9px; font-weight: 800; opacity: .85; }
.start-stop-lamp {
  position: absolute;
  left: 24px;
  bottom: 18px;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 62px;
  padding: 10px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4f7fc, #adb3bc 30%, #5a616a 80%, #2a2f36);
  color: #111520;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), 0 8px 16px rgba(0,0,0,0.2);
}
.deck-b .start-stop-lamp { left: auto; right: 24px; }
.start-stop-lamp small { font-size: 8px; font-weight: 900; line-height: 1.1; text-align: center; }
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #dfffe7, #7dff9b 45%, #14893c 100%);
  box-shadow: 0 0 12px rgba(125,255,155,0.75);
}
.turntable-badge {
  position: absolute;
  right: 20px;
  bottom: 16px;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
}
.deck-b .turntable-badge { right: auto; left: 20px; }
.tone-arm {
  position: absolute;
  width: 130px;
  height: 10px;
  right: 8%;
  top: 19%;
  background: linear-gradient(90deg, #d0d3da, #59606d);
  border-radius: 999px;
  transform: rotate(32deg);
  transform-origin: right center;
  box-shadow: 0 5px 16px rgba(0,0,0,0.5);
}
.tone-arm::before {
  content: "";
  position: absolute;
  right: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #131720;
  border: 4px solid rgba(255,255,255,0.18);
}
.tone-arm::after {
  content: "";
  position: absolute;
  left: -17px;
  top: -5px;
  width: 27px;
  height: 18px;
  border-radius: 6px;
  background: var(--accent-two);
}
.deck-b .tone-arm { right: auto; left: 8%; transform: scaleX(-1) rotate(32deg); }
.transport-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
.transport { min-height: 52px; font-weight: 900; letter-spacing: .04em; }
.transport.play { color: #061006; background: linear-gradient(135deg, var(--success), var(--accent)); }
.transport.cue { color: #100b01; background: linear-gradient(135deg, var(--accent-two), #fff1b0); }
.transport.sync { background: rgba(0,217,255,0.14); border-color: rgba(0,217,255,0.32); }
.transport.loop { background: rgba(255,77,109,0.13); border-color: rgba(255,77,109,0.3); }
.transport.play.is-live { box-shadow: 0 0 24px rgba(125,255,155,0.35); border-color: rgba(125,255,155,0.7); }

.mini-waveform {
  height: 82px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(0,0,0,0.27);
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
}
.mini-waveform span {
  flex: 1;
  min-width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-two));
  opacity: .85;
}
.mini-waveform.is-live span { animation: wavePulse .7s ease-in-out infinite alternate; }
@keyframes wavePulse { from { transform: scaleY(.55); opacity: .45; } to { transform: scaleY(1); opacity: .95; } }

.mixer-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.mixer-title span { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .1em; font-weight: 900; }
.mixer-title strong { color: var(--accent-two); }
.mixer-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mixer-power { display: flex; align-items: center; gap: 8px; }
.mixer-model { color: var(--accent-two); letter-spacing: .08em; text-transform: uppercase; }
.master-volume {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 17px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}
input[type="range"] { accent-color: var(--accent); }
.meter-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.meter {
  height: 105px;
  display: flex;
  align-items: end;
  padding: 6px;
  border-radius: 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.09);
}
.meter span { width: 100%; border-radius: 9px; background: linear-gradient(0deg, var(--success), var(--accent-two), var(--danger)); transition: height .12s ease; }
.eq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.eq-channel { padding: 12px; border-radius: 17px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.08); }
.eq-channel h3, .fx-panel h3 { color: var(--accent); margin-bottom: 10px; }
.eq-channel label, .wet-dry, .channel-fader { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; margin-bottom: 10px; }
.fx-panel { padding: 13px; border-radius: 19px; background: rgba(0,0,0,0.19); border: 1px solid rgba(255,255,255,0.09); margin-bottom: 16px; }
.fx-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fx-buttons button { min-height: 38px; font-size: 13px; font-weight: 800; }
.fader-section { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.channel-fader { padding: 12px; border-radius: 17px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.08); }
.crossfader {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--accent-two);
  font-weight: 1000;
}

.library-panel, .auto-dj-panel, .on-deck-panel, .future-note { margin-top: 18px; padding: 20px; }
.compact-header { align-items: flex-start; }
.search-row { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 13px; }
.audio-help { margin: 0 0 13px; }
.audio-help strong { color: var(--accent-two); }
.track-table-wrap { overflow: auto; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); }
table { width: 100%; border-collapse: collapse; min-width: 980px; }
th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: middle; }
th { color: var(--accent-two); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: rgba(0,0,0,0.22); }
td { color: var(--text); }
td:nth-child(3), td:nth-child(5) { color: var(--accent); font-weight: 800; }
.small { padding: 7px 9px; margin: 2px 4px 2px 0; font-size: 12px; font-weight: 800; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #061006; background: var(--accent-two); }
.badge.good { background: var(--success); }
.badge.warn { background: #ffcf66; }
.badge.muted { color: var(--muted); background: rgba(255,255,255,0.08); }
.on-deck-count { color: var(--muted); margin-bottom: 12px; }
.on-deck-count strong { color: var(--accent-two); }
.auto-status-row, .auto-queue {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 12px;
}
.auto-status-row strong, .auto-queue strong { color: var(--accent-two); }
.queue-card {
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}
.queue-card.current { border-color: var(--success); box-shadow: 0 0 18px rgba(125,255,155,0.14); }
.queue-card.next { border-color: var(--accent); box-shadow: 0 0 18px rgba(0,217,255,0.14); }
.queue-card span { color: var(--muted); font-size: 12px; }
.future-note { border-style: dashed; }

@media (max-width: 1180px) {
  .topbar, .library-header, .beatmatch-header { align-items: stretch; flex-direction: column; }
  .status-strip, .library-actions, .beatmatch-actions, .auto-controls { justify-content: flex-start; }
  .dj-console { grid-template-columns: 1fr; }
  .mixer { order: 2; min-height: auto; }
  .deck-a { order: 1; }
  .deck-b { order: 3; }
  .platter { width: min(350px, 70vw); height: min(350px, 70vw); }
  .wave-lane { grid-template-columns: 1fr; }
  .lane-label { grid-template-columns: auto 1fr auto; align-items: center; }
}
@media (max-width: 720px) {
  .app-shell { width: min(100vw - 18px, 1720px); padding-top: 10px; }
  .deck, .mixer, .library-panel, .future-note, .topbar, .beatmatch-panel, .auto-dj-panel, .on-deck-panel { border-radius: 18px; }
  .deck-header { flex-direction: column; }
  .track-meta { text-align: left; }
  .deck-body, .deck-b .deck-body { grid-template-columns: 1fr; }
  .pitch-wrap { height: auto; flex-direction: row; align-items: center; gap: 8px; justify-content: flex-start; }
  .pitch-cap { writing-mode: horizontal-tb; transform: none; }
  .pitch-slider { writing-mode: horizontal-tb; direction: ltr; height: auto; width: 100%; }
  .search-row { grid-template-columns: 1fr; }
  .transport-row { grid-template-columns: 1fr 1fr; }
  .turntable-surface { min-height: 360px; }
  .tone-arm { right: 4%; top: 17%; }
  .deck-b .tone-arm { left: 4%; }
  .wave-canvas-wrap canvas { height: 105px; }
  .lane-label { grid-template-columns: 1fr; }
}

/* V4 compact desktop dashboard: keep the whole console visible without page scrolling. */
@media (min-width: 1181px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    font-size: 13px;
  }

  .app-shell {
    width: min(1920px, calc(100vw - 16px));
    height: 100vh;
    padding: 8px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 58px 138px minmax(292px, 1fr) 92px minmax(132px, 20vh);
    grid-template-areas:
      "topbar topbar"
      "beatmatch beatmatch"
      "console console"
      "auto auto"
      "library ondeck";
    gap: 8px;
  }

  .topbar { grid-area: topbar; }
  .beatmatch-panel { grid-area: beatmatch; }
  .dj-console { grid-area: console; }
  .auto-dj-panel { grid-area: auto; }
  .library-panel { grid-area: library; }
  .on-deck-panel { grid-area: ondeck; }
  .future-note { display: none; }

  .topbar,
  .beatmatch-panel,
  .auto-dj-panel,
  .library-panel,
  .on-deck-panel {
    margin: 0;
    min-height: 0;
  }

  .topbar {
    padding: 7px 12px;
    border-radius: 16px;
  }

  .brand-block { gap: 10px; }
  .logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 16px;
  }

  .topbar h1 { font-size: 21px; }
  .topbar p { display: none; }
  .status-strip { gap: 6px; }
  .status-pill {
    min-height: 38px;
    padding: 5px 8px;
    border-radius: 12px;
  }
  .status-pill span { font-size: 10px; }
  .status-pill strong { font-size: 16px; }
  .audio-pill strong { font-size: 12px; max-width: 130px; }
  select,
  input[type="search"] {
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 12px;
  }
  button { border-radius: 10px; }

  .beatmatch-panel {
    padding: 9px 12px;
    overflow: hidden;
    border-radius: 16px;
  }
  .beatmatch-header,
  .library-header {
    margin-bottom: 7px;
    gap: 10px;
  }
  .eyebrow {
    padding: 3px 7px;
    margin-bottom: 4px;
    font-size: 9px;
  }
  .beatmatch-header h2,
  .library-header h2 {
    font-size: 16px;
  }
  .beatmatch-header p,
  .library-header p,
  .audio-help {
    display: none;
  }
  .beatmatch-actions,
  .library-actions,
  .auto-controls {
    gap: 5px;
  }
  .beatmatch-actions button,
  .library-actions button,
  .auto-controls button,
  .file-loader,
  .import-button {
    min-height: 30px;
    padding: 0 9px;
    font-size: 11px;
  }
  .zoom-control { font-size: 10px; gap: 2px; }
  .zoom-control select { min-height: 30px; padding: 4px 7px; }
  .alignment-chip { min-height: 22px; padding: 0 8px; font-size: 10px; }
  .wave-stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.wave-stack-top {
  display: grid;
  gap: 8px;
}
.wave-lane {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: stretch;
}
.lane-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.compact-label strong { color: var(--accent-two); min-width: 56px; }
.compact-label span, .compact-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-label span { font-weight: 900; flex: 1; min-width: 140px; }
.compact-label small { color: var(--muted); }
.wave-canvas-wrap {
  position: relative;
  min-height: 56px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2));
  border: 1px solid rgba(255,255,255,0.09);
}
.wave-canvas-wrap.short-wave {
  min-height: 56px;
}
.wave-canvas-wrap canvas {
  width: 100%;
  height: 56px;
  display: block;
}
.center-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 16px rgba(255,255,255,0.8);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.center-playhead::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -35%);
}
.beatmatch-footer {


    padding-top: 5px;
    font-size: 11px;
  }

  .dj-console {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 255px) minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    min-height: 0;
  }
  .deck,
  .mixer {
    height: 100%;
    min-height: 0;
    padding: 9px;
    border-radius: 18px;
  }
  .screws::before,
  .screws::after {
    width: 7px;
    height: 7px;
  }
  .screws::before { top: 8px; left: 8px; }
  .screws::after { bottom: 8px; right: 8px; }

  .deck-header {
    margin-bottom: 6px;
    gap: 8px;
  }
  .deck-label {
    padding: 3px 7px;
    margin-bottom: 4px;
    font-size: 9px;
  }
  .deck h2 {
    max-width: 220px;
    font-size: 17px;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deck p {
    max-width: 220px;
    margin-top: 2px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .track-meta strong { font-size: 16px; }
  .track-meta span { font-size: 9px; }

  .deck-loader {
    min-height: 31px;
    margin: 0 0 6px;
    padding: 5px;
    gap: 6px;
    border-radius: 11px;
  }
  .deck-loader span {
    max-width: 170px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .deck-body {
    grid-template-columns: 48px 1fr;
    gap: 7px;
    margin-bottom: 7px;
  }
  .deck-b .deck-body { grid-template-columns: 1fr 48px; }
  .pitch-wrap {
    height: 175px;
    font-size: 10px;
  }
  .pitch-cap { font-size: 8px; }
  .pitch-slider {
    height: 112px;
    width: 24px;
  }
  .pitch-readout {
    min-width: 50px;
    padding: 4px 5px;
    border-radius: 9px;
  }
  .pitch-readout strong { font-size: 10px; }
  .pitch-readout small { font-size: 9px; }

  .turntable {
    min-height: 182px;
  }
  .turntable-surface {
    width: min(270px, 100%);
    min-height: 182px;
    padding: 10px;
    border-radius: 15px;
  }
  .strobe-strip {
    left: 8px;
    top: 18px;
    width: 7px;
    height: 118px;
  }
  .deck-b .strobe-strip { right: 8px; }
  .platter {
    width: min(165px, 16vw);
    height: min(165px, 16vw);
    min-width: 148px;
    min-height: 148px;
    border-width: 7px;
  }
  .vinyl-label {
    width: 76px;
    height: 76px;
    padding: 9px 6px 10px;
  }
  .label-brand { font-size: 6px; letter-spacing: .16em; }
  .label-title { font-size: 8px; }
  .label-artist,
  .label-bpm { font-size: 6px; }
  .spindle {
    width: 11px;
    height: 11px;
  }
  .start-stop-lamp {
    left: 12px;
    bottom: 8px;
    width: 44px;
    padding: 6px 5px;
  }
  .deck-b .start-stop-lamp { right: 12px; }
  .start-stop-lamp small { font-size: 6px; }
  .led {
    width: 7px;
    height: 7px;
  }
  .turntable-badge {
    right: 10px;
    bottom: 7px;
    font-size: 6px;
    letter-spacing: .1em;
  }
  .deck-b .turntable-badge { left: 10px; }
  .tone-arm {
    width: 78px;
    height: 7px;
    right: 6%;
    top: 18%;
  }
  .tone-arm::before {
    right: -11px;
    top: -11px;
    width: 27px;
    height: 27px;
    border-width: 3px;
  }
  .tone-arm::after {
    left: -11px;
    top: -4px;
    width: 17px;
    height: 12px;
  }
  .deck-b .tone-arm { left: 6%; }

  .transport-row {
    gap: 5px;
    margin-bottom: 0;
  }
  .transport {
    min-height: 30px;
    font-size: 10px;
  }
  .mini-waveform { display: none; }

  .mixer-title {
    margin-bottom: 6px;
  }
  .mixer-title span { font-size: 9px; }
  .mixer-title strong { font-size: 11px; }
  .mixer-badge-row {
    margin-bottom: 7px;
    padding: 6px 7px;
    border-radius: 11px;
    font-size: 10px;
  }
  .master-volume {
    margin-bottom: 7px;
    padding: 6px 7px;
    border-radius: 11px;
    font-size: 10px;
  }
  .meter-wrap {
    gap: 6px;
    margin-bottom: 7px;
  }
  .meter {
    height: 44px;
    padding: 4px;
    border-radius: 10px;
  }
  .eq-grid {
    gap: 6px;
    margin-bottom: 7px;
  }
  .eq-channel {
    padding: 7px;
    border-radius: 11px;
  }
  .eq-channel h3,
  .fx-panel h3 {
    margin-bottom: 4px;
    font-size: 12px;
  }
  .eq-channel label,
  .wet-dry,
  .channel-fader {
    gap: 2px;
    margin-bottom: 5px;
    font-size: 9px;
  }
  .fx-panel {
    padding: 7px;
    border-radius: 11px;
    margin-bottom: 7px;
  }
  .fx-buttons {
    gap: 5px;
    margin-bottom: 6px;
  }
  .fx-buttons button {
    min-height: 25px;
    font-size: 10px;
  }
  .fader-section {
    gap: 6px;
    margin-bottom: 7px;
  }
  .channel-fader {
    padding: 6px;
    border-radius: 10px;
  }
  .crossfader {
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
  }

  .auto-dj-panel,
  .library-panel,
  .on-deck-panel {
    padding: 9px 12px;
    border-radius: 16px;
    overflow: hidden;
  }
  .auto-dj-panel .library-header {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    align-items: center;
    margin-bottom: 6px;
  }
  .auto-controls label {
    font-size: 9px;
    gap: 2px;
  }
  .auto-controls select {
    min-height: 28px;
    padding: 3px 7px;
    font-size: 11px;
  }
  .auto-status-row,
  .auto-queue {
    padding: 6px 8px;
    margin-bottom: 5px;
    border-radius: 11px;
    font-size: 11px;
  }
  .auto-queue {
    overflow-x: auto;
    flex-wrap: nowrap;
    min-height: 34px;
    max-height: 38px;
  }
  .queue-card {
    min-width: 165px;
    padding: 6px 8px;
    border-radius: 10px;
  }
  .queue-card span { font-size: 10px; }

  .library-panel,
  .on-deck-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .library-panel .library-header,
  .on-deck-panel .library-header {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto;
    align-items: center;
    margin-bottom: 6px;
  }
  .library-panel .library-actions,
  .on-deck-panel .library-actions {
    justify-content: flex-end;
  }
  .search-row {
    grid-template-columns: minmax(0, 1fr) 155px;
    gap: 6px;
    margin-bottom: 6px;
  }
  .on-deck-count {
    margin-bottom: 5px;
    font-size: 11px;
  }
  .track-table-wrap {
    flex: 1;
    min-height: 0;
    border-radius: 12px;
  }
  table {
    min-width: 760px;
  }
  th,
  td {
    padding: 6px 8px;
    font-size: 11px;
  }
  th {
    font-size: 9px;
    letter-spacing: .05em;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .small {
    padding: 4px 6px;
    margin: 1px 2px 1px 0;
    font-size: 10px;
  }
  .badge {
    padding: 2px 6px;
    font-size: 9px;
  }
}

@media (min-width: 1181px) and (max-height: 820px) {
  .app-shell {
    grid-template-rows: 52px 116px minmax(270px, 1fr) 78px minmax(118px, 17vh);
    gap: 6px;
    padding: 6px 0;
  }
  .topbar { padding: 6px 10px; }
  .logo-mark { width: 36px; height: 36px; }
  .topbar h1 { font-size: 18px; }
  .status-pill { min-height: 34px; }
  .beatmatch-panel { padding: 7px 10px; }
  .beatmatch-header { margin-bottom: 4px; }
  .beatmatch-header h2 { font-size: 14px; }
  .beatmatch-actions button { min-height: 26px; padding: 0 7px; }
  .wave-canvas-wrap { min-height: 30px; }
  .wave-canvas-wrap.short-wave { min-height: 30px; }
  .wave-canvas-wrap canvas { height: 30px; }
  .beatmatch-footer { display: none; }
  .deck, .mixer { padding: 7px; }
  .deck-header { margin-bottom: 4px; }
  .deck-loader { display: none; }
  .deck-body { margin-bottom: 5px; }
  .turntable { min-height: 166px; }
  .turntable-surface { min-height: 166px; width: min(245px, 100%); }
  .platter { min-width: 134px; min-height: 134px; width: min(150px, 15vw); height: min(150px, 15vw); }
  .vinyl-label { width: 68px; height: 68px; }
  .pitch-wrap { height: 158px; }
  .pitch-slider { height: 98px; }
  .transport { min-height: 28px; }
  .meter { height: 36px; }
  .fx-panel { display: none; }
  .eq-channel label { margin-bottom: 3px; }
  .auto-dj-panel { padding: 7px 10px; }
  .auto-status-row { display: none; }
  .auto-queue { max-height: 30px; min-height: 30px; }
  .library-panel, .on-deck-panel { padding: 7px 10px; }
}


/* V9: force earlier compact histogram waveform, clearly stacked vertically */
.beatmatch-panel .wave-stack.wave-stack-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.beatmatch-panel .wave-lane {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.beatmatch-panel .lane-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  min-height: 24px !important;
  border-radius: 9px !important;
}

.beatmatch-panel .lane-label strong {
  min-width: 48px !important;
  font-size: 11px !important;
}

.beatmatch-panel .lane-label span {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 12px !important;
}

.beatmatch-panel .lane-label small {
  font-size: 10px !important;
}

.beatmatch-panel .wave-canvas-wrap,
.beatmatch-panel .wave-canvas-wrap.short-wave {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 10px !important;
}

.beatmatch-panel .wave-canvas-wrap canvas {
  height: 44px !important;
  width: 100% !important;
  display: block !important;
}

.beatmatch-panel .center-playhead {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 2px !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 0 10px rgba(255,255,255,0.65) !important;
}

.beatmatch-panel .center-playhead::before {
  width: 8px !important;
  height: 8px !important;
}

/* Give the top waveform enough room to show two stacked rows. */
@media (min-width: 1181px) {
  .app-shell {
    grid-template-rows: 58px 162px minmax(292px, 1fr) 92px minmax(132px, 20vh) !important;
  }
}

@media (min-width: 1181px) and (max-height: 820px) {
  .app-shell {
    grid-template-rows: 52px 144px minmax(260px, 1fr) 72px minmax(110px, 16vh) !important;
  }
  .beatmatch-panel .wave-canvas-wrap,
  .beatmatch-panel .wave-canvas-wrap.short-wave,
  .beatmatch-panel .wave-canvas-wrap canvas {
    height: 34px !important;
    min-height: 34px !important;
  }
  .beatmatch-panel .lane-label {
    min-height: 20px !important;
    padding: 2px 7px !important;
  }
}


/* V10 restore: use the Version 3 waveform look in the top beat-match area */
.beatmatch-panel .wave-stack.wave-stack-top {
  display: grid !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.beatmatch-panel .wave-lane {
  display: grid !important;
  grid-template-columns: minmax(120px, 190px) 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}
.beatmatch-panel .lane-label {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,0.24) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
}
.beatmatch-panel .lane-label strong { color: var(--accent-two) !important; }
.beatmatch-panel .lane-label span,
.beatmatch-panel .lane-label small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.beatmatch-panel .lane-label span { font-weight: 900 !important; }
.beatmatch-panel .lane-label small { color: var(--muted) !important; }
.beatmatch-panel .wave-canvas-wrap {
  position: relative !important;
  min-height: 122px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}
.beatmatch-panel .wave-canvas-wrap canvas {
  width: 100% !important;
  height: 122px !important;
  display: block !important;
}
.beatmatch-panel .center-playhead {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 2px !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.8) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.beatmatch-panel .center-playhead::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transform: translate(-50%, -35%) !important;
}
@media (max-width: 1180px) {
  .beatmatch-panel .wave-lane { grid-template-columns: 1fr !important; }
  .beatmatch-panel .lane-label {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }
}
@media (max-width: 720px) {
  .beatmatch-panel .wave-canvas-wrap canvas { height: 105px !important; }
  .beatmatch-panel .wave-canvas-wrap { min-height: 105px !important; }
  .beatmatch-panel .lane-label { grid-template-columns: 1fr !important; }
}


/* V11 pop-out waveform support */
.secondary-action {
  font-weight: 900;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.waveform-return-bar {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: rgba(0,0,0,0.36);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}

.waveform-return-bar strong {
  display: block;
  color: var(--accent-two);
}

.waveform-return-bar span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.return-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.return-actions button {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
}

body.waveform-detached .beatmatch-panel {
  display: none !important;
}

body.waveform-detached .waveform-return-bar {
  display: flex;
}

@media (min-width: 1181px) {
  body.waveform-detached .app-shell {
    grid-template-rows: 58px minmax(375px, 1fr) 92px minmax(132px, 20vh);
    grid-template-areas:
      "topbar topbar"
      "console console"
      "auto auto"
      "library ondeck";
  }

  body.waveform-detached .waveform-return-bar {
    grid-column: 1 / -1;
    margin: 0;
  }
}

@media (max-width: 720px) {
  .waveform-return-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .return-actions {
    justify-content: flex-start;
  }
}


/* V12: clear detached-waveform behavior and unmistakable vertical stacking */
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}
.beatmatch-panel .wave-stack.wave-stack-top {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.beatmatch-panel .wave-lane {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  min-width: 0 !important;
}
.beatmatch-panel .lane-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
}
.beatmatch-panel .lane-label strong { min-width: 56px !important; }
.beatmatch-panel .lane-label span { flex: 1 !important; min-width: 0 !important; }
.beatmatch-panel .wave-canvas-wrap {
  min-height: 86px !important;
  border-radius: 14px !important;
}
.beatmatch-panel .wave-canvas-wrap canvas {
  height: 86px !important;
}
body.waveform-detached .beatmatch-panel {
  display: none !important;
}
body.waveform-detached .waveform-return-bar {
  display: flex !important;
}
@media (min-width: 1181px) {
  body.waveform-detached .app-shell {
    grid-template-rows: 58px minmax(405px, 1fr) 92px minmax(132px, 20vh) !important;
    grid-template-areas:
      "topbar topbar"
      "console console"
      "auto auto"
      "library ondeck" !important;
  }
}
@media (max-width: 720px) {
  .beatmatch-panel .wave-canvas-wrap { min-height: 64px !important; }
  .beatmatch-panel .wave-canvas-wrap canvas { height: 64px !important; }
}


/* V13 assisted sync status */
#assistReadout {
  color: var(--accent-two);
  font-weight: 800;
}
.primary-action {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px rgba(0,217,255,0.16);
}