#aurora-dxl {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  padding: 24px;
  box-sizing: border-box;
}

#dxl-performance-mode {
  width: 1200px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#dxl-row-1,
#dxl-row-2,
#dxl-row-3,
#dxl-row-4 {
  display: grid;
  gap: 16px;
}

/* Pads | FX */
#dxl-row-1 {
  grid-template-columns: 2fr 1.4fr;
}

/* Auto-DJ | Deck Control */
#dxl-row-2 {
  grid-template-columns: 700px 380px;
  justify-content: center;
  align-items: stretch; /* same vertical height */
}

/* Library | Playlist */
#dxl-row-3 {
  grid-template-columns: 1fr;
}

/* Visual FX | Waveforms */
#dxl-row-4 {
  grid-template-columns: 1fr 1fr;
}
#dxl-system-id {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #bdb19c; /* warm analog parchment gold */
  margin-bottom: 10px;
  text-align: left;
  padding-left: 4px;
}
#starforge-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;

  background: radial-gradient(
      circle at center,
      rgba(255, 180, 80, 0.35) 0%,
      rgba(180, 90, 40, 0.25) 20%,
      rgba(60, 30, 20, 0.15) 40%,
      rgba(10, 5, 5, 0.9) 70%
  );

  filter: blur(40px);
}

#starforge-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
      circle,
      rgba(200, 100, 120, 0.45) 0%,
      rgba(255, 150, 60, 0.65) 40%,
      rgba(120, 60, 30, 0.15) 70%,
      transparent 100%
  );
  filter: blur(60px);
  opacity: 1;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}
#aurora-dxl {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
}
#dxl-waveform-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

#dxl-waveform-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00ff00, #33ff33, #66ff66);
  box-shadow: 0 0 10px #00ff00;
  transition: width 0.05s linear;
}
.dxl-waveform-wrapper {
  position: relative;
}
.dxl-track-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.35);
  border-top: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.dxl-track-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d7c2a3, #b08a5b, #7b4f3c);
  transition: width 0.1s linear;
}
.dxl-track-progress {
  z-index: 999999;
}