/* EUI-MVP 6 · Bottom Mixer & Track-FX Rework */

.mw-editor-mixer-panel {
  background:
    radial-gradient(circle at top left, rgba(24, 196, 255, .08), transparent 28rem),
    rgba(9, 14, 22, .96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  color: #f6f8fb;
  box-shadow: 0 16px 50px rgba(0,0,0,.28);
  overflow: hidden;
}

.mw-mixer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.mw-mixer-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.mw-mixer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: .85rem;
  padding: .85rem;
}

.mw-mixer-track-strip-wrap {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: .75rem;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
}

.mw-mixer-track-strip {
  min-width: 150px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: .75rem;
  position: relative;
}

.mw-track-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .65rem;
}

.mw-track-color-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 18px rgba(34, 211, 238, .32);
  flex: 0 0 auto;
}

.mw-track-label {
  font-weight: 700;
  font-size: .9rem;
  flex: 1 1 auto;
}

.mw-track-mode-badge,
.mw-track-fx-pill {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  font-size: .68rem;
  padding: .12rem .45rem;
  white-space: nowrap;
}

.mw-track-meter {
  position: relative;
  height: 72px;
  width: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  float: right;
  margin-left: .65rem;
}

.mw-track-meter-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 2px;
  background: linear-gradient(to top, rgba(40, 220, 130, .9), rgba(255, 225, 80, .9), rgba(255, 80, 80, .9));
  transition: height .12s linear;
}

.mw-track-meter-peak {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.9);
  transition: bottom .12s linear;
}

.mw-mixer-control {
  display: block;
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  margin-bottom: .6rem;
}

.mw-mixer-control span {
  display: inline-block;
  margin-bottom: .15rem;
}

.mw-mixer-control output {
  float: right;
  color: rgba(255,255,255,.86);
  font-variant-numeric: tabular-nums;
}

.mw-pan-control {
  clear: both;
}

.mw-mixer-button-row,
.mw-master-mini-grid,
.mw-transport-row {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.mw-mixer-button-row .btn,
.mw-master-mini-grid .btn,
.mw-transport-row .btn {
  flex: 1 1 auto;
}

.mw-track-fx-summary {
  clear: both;
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.mw-track-fx-pill-row {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.mw-mixer-track-strip.is-muted {
  opacity: .58;
}

.mw-mixer-track-strip.is-solo {
  border-color: rgba(72, 255, 164, .45);
  box-shadow: 0 0 0 1px rgba(72, 255, 164, .15), 0 12px 35px rgba(72, 255, 164, .08);
}

.mw-mixer-track-strip.is-fx-on .mw-track-fx-pill[data-mw-track-fx-status] {
  background: rgba(34, 211, 238, .14);
  border-color: rgba(34, 211, 238, .35);
  color: #b9f5ff;
}

.mw-master-strip {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}

.mw-master-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: .8rem;
}

.mw-master-meter {
  height: 18px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
}

.mw-master-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 2px;
  background: linear-gradient(to right, rgba(40, 220, 130, .9), rgba(255, 225, 80, .9), rgba(255, 80, 80, .9));
  transition: width .12s linear;
}

.mw-master-meter-peak {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.9);
  transition: left .12s linear;
}

.mw-master-hint,
.mw-mixer-status-log {
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  line-height: 1.35;
}

.mw-editor-mixer-panel.is-collapsed .mw-mixer-body {
  display: none;
}

.mw-editor-mixer-panel[data-editor-mode="battle"] .mw-transport-row [data-mw-transport-play],
.mw-editor-mixer-panel[data-editor-mode="battle"] .mw-transport-row [data-mw-transport-stop],
.mw-editor-mixer-panel[data-editor-mode="battle"] .mw-transport-row [data-mw-record-toggle] {
  opacity: .55;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .mw-mixer-body {
    grid-template-columns: 1fr;
  }

  .mw-master-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .mw-mixer-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .mw-mixer-track-strip-wrap {
    grid-template-columns: repeat(2, minmax(145px, 1fr));
  }

  .mw-master-strip {
    grid-template-columns: 1fr;
  }
}