/* -------------------------------------------------------
   AURORA-X SHELL LAYOUT — BROWN COSMIC EDITION
   Main UI frame + panel layout
------------------------------------------------------- */

html, body {
  height: 100%;
}

/* MAIN SHELL FRAME — BROWN COSMIC */
.shell-layout {
  display: grid;
  grid-template-columns: 260px 1fr 260px 260px;
  grid-template-rows: 1fr;
  height: calc(100% - 60px);
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;

  /* Brown cosmic frame */
  background: rgba(36, 23, 15, 0.55); /* warm chocolate glass */
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(80, 60, 40, 0.45); /* bronze border */
  border-radius: 14px;
  box-shadow:
    0 0 35px rgba(20, 12, 8, 0.55),      /* deep brown outer glow */
    inset 0 0 18px rgba(80, 60, 40, 0.35); /* bronze inner glow */
}

/* LEFT LIBRARY PANEL */
.browser-panel {
  grid-column: 1;
  border-radius: 10px;
  padding: 12px;
  overflow-y: auto;

  /* Brown panel */
  background: rgba(36, 23, 15, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(80, 60, 40, 0.35);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

/* CENTER: Deck A — Mixer — Deck B */
.center-decks {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 320px 1fr; /* Mixer fixed width */
  grid-template-rows: 1fr;
  gap: 16px;
  align-items: stretch;
}

/* RIGHT HUD PANEL */
.info-panel {
  grid-column: 3;
  border-radius: 10px;
  padding: 12px;
  overflow-y: auto;

  /* Brown panel */
  background: rgba(36, 23, 15, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(80, 60, 40, 0.35);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}

/* AVATAR PANEL */
.dj-avatar-panel {
  grid-column: 4;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Brown panel */
  background: rgba(36, 23, 15, 0.45);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(80, 60, 40, 0.35);
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    0 0 20px rgba(0,0,0,0.4);
}