/* v8.1 Boothby On Air perspective redesign: adds depth and shape without changing header/footer or audio bindings. */
.onair-cockpit{perspective:1800px;perspective-origin:50% 0}
.onair-deck-stack>.cdj-shell{
  position:relative!important;
  border-radius:26px!important;
  border:1px solid rgba(105,193,255,.18)!important;
  background:
    radial-gradient(120% 130% at 50% 0%,rgba(86,226,255,.10),transparent 36%),
    radial-gradient(90% 120% at 50% 100%,rgba(245,77,188,.08),transparent 34%),
    linear-gradient(180deg,#151f34 0%,#0b1020 38%,#090e19 100%)!important;
  box-shadow:
    0 32px 64px rgba(0,0,0,.48),
    0 10px 22px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.03)!important;
  overflow:hidden!important;
}
.onair-deck-stack>.cdj-shell::before{
  content:"";position:absolute;inset:0 0 auto 0;height:68px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0));
}
.onair-deck-stack>.cdj-shell::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-24px;height:40px;pointer-events:none;z-index:0;
  filter:blur(18px);background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.48),transparent 72%);
}
.cdj-strip,.cdj-foot{position:relative;z-index:1}
.cdj-strip{
  min-height:46px!important;display:flex!important;align-items:center!important;gap:10px!important;
  padding:12px 18px!important;border-bottom:1px solid rgba(100,188,255,.18)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01)),
    linear-gradient(180deg,rgba(14,25,43,.95),rgba(9,15,28,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.36)!important;
}
.cdj-console{position:relative;z-index:1;transform-style:preserve-3d}
.cdj-console>.cdj-screen,
.cdj-console>.setlist{
  position:relative!important;overflow:hidden!important;
  border-radius:20px!important;
  border:1px solid rgba(89,174,240,.28)!important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 6px 12px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.32)!important;
}
.cdj-console>.cdj-screen{
  transform:rotateX(8deg) translateZ(12px)!important;transform-origin:center top!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    linear-gradient(155deg,#0f182d,#091120 68%,#161127)!important;
}
.cdj-console>.setlist{
  transform:rotateX(5deg) translateZ(2px)!important;transform-origin:center top!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),
    linear-gradient(145deg,rgba(12,22,38,.94),rgba(12,12,31,.94))!important;
}
.cdj-console>.cdj-screen::before,
.cdj-console>.setlist::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 18%,transparent 82%,rgba(255,255,255,.04));
}
.bws70-compact-left .cdj-track{
  padding:12px 14px!important;border-radius:18px!important;
  background:linear-gradient(180deg,rgba(12,23,40,.78),rgba(9,15,28,.58))!important;
  border:1px solid rgba(86,173,238,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 18px rgba(0,0,0,.18)!important;
}
.bws70-compact-left .cdj-track>img{
  width:58px!important;height:58px!important;flex-basis:58px!important;border-radius:14px!important;
  border:1px solid rgba(97,191,248,.40)!important;
  box-shadow:0 8px 16px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.bws70-compact-viz{
  border-radius:18px!important;border:1px solid rgba(86,197,255,.38)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),
    linear-gradient(180deg,rgba(5,14,28,.96),rgba(4,9,20,.92))!important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.44),
    inset 0 0 34px rgba(5,46,86,.48),
    0 16px 24px rgba(0,0,0,.24)!important;
}
.bws70-compact-viz::before{
  content:"";position:absolute;inset:10px;pointer-events:none;border-radius:12px;
  border:1px solid rgba(97,206,255,.16);box-shadow:inset 0 0 22px rgba(118,31,179,.14);
}
.bws70-compact-left .onair-inline-transport,
.cdj-ident .cdj-track-actions{align-items:stretch!important}
.bws70-compact-left .onair-inline-transport button,
.cdj-ident .onair-share-drop-row button,
.cdj-ident .cdj-state{
  position:relative!important;overflow:hidden!important;
  border-radius:14px!important;border:1px solid rgba(107,185,240,.28)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 35%),
    linear-gradient(180deg,#16365e,#0f223f 56%,#0b1831)!important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.30)!important;
  letter-spacing:.04em!important;
}
.bws70-compact-left .onair-inline-transport button::before,
.cdj-ident .onair-share-drop-row button::before,
.cdj-ident .cdj-state::before{
  content:"";position:absolute;inset:1px 1px auto 1px;height:45%;border-radius:12px 12px 9px 9px;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));pointer-events:none;
}
#play.onair-main-toggle{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%),
    linear-gradient(180deg,#174064,#123155 58%,#0c203c)!important;
}
#next.onair-next-track{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 35%),
    linear-gradient(180deg,#2b224d,#1d1837 58%,#131128)!important;
}
#play.onair-main-toggle:hover,#next.onair-next-track:hover,
.cdj-ident .onair-share-drop-row button:hover{
  transform:translateY(-1px)!important;box-shadow:0 14px 22px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.32)!important;
}
#play.onair-main-toggle:active,#next.onair-next-track:active,
.cdj-ident .onair-share-drop-row button:active{
  transform:translateY(1px)!important;box-shadow:0 5px 10px rgba(0,0,0,.24), inset 0 2px 7px rgba(0,0,0,.24)!important;
}
.cdj-times,.onair-track-clock,#verifiedBadges{position:relative!important;z-index:1}
.cdj-time-cell,.onair-track-clock,#verifiedBadges .signal-tag{
  border-radius:14px!important;border:1px solid rgba(89,171,235,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0)),
    linear-gradient(180deg,rgba(12,24,42,.78),rgba(10,17,32,.68))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 18px rgba(0,0,0,.16)!important;
}
.cdj-progress{
  border-radius:999px!important;background:rgba(6,14,27,.78)!important;
  border:1px solid rgba(77,150,210,.20)!important;box-shadow:inset 0 2px 4px rgba(0,0,0,.32)!important;
}
#cdjProgress{background:linear-gradient(90deg,#4fd3ff,#7b9bff 55%,#d66dff)!important;box-shadow:0 0 14px rgba(79,211,255,.25)}
.cdj-console>.setlist .set-head,
.cdj-console>.setlist .library-tools,
.cdj-console>.setlist .library-columns,
.cdj-console>.setlist #playlist li[data-track]{position:relative;z-index:1}
.cdj-console>.setlist .set-head{
  border-bottom:1px solid rgba(92,165,224,.14)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0))!important;
}
.cdj-console>.setlist #playlist li[data-track]{
  border:1px solid rgba(75,140,198,.12)!important;border-radius:14px!important;
  background:linear-gradient(180deg,rgba(13,24,41,.58),rgba(10,18,34,.32))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
.cdj-console>.setlist #playlist li[data-track].active,
.cdj-console>.setlist #playlist li[data-track][aria-current="true"]{
  border-color:rgba(111,220,255,.36)!important;
  box-shadow:0 10px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(111,220,255,.18)!important;
}
@media (max-width:900px){
  .cdj-console>.cdj-screen{transform:rotateX(5deg) translateZ(8px)!important}
  .cdj-console>.setlist{transform:rotateX(3deg)!important}
}
@media (max-width:640px){
  .onair-cockpit{perspective:1200px}
  .onair-deck-stack>.cdj-shell{border-radius:22px!important}
  .cdj-console>.cdj-screen,.cdj-console>.setlist{transform:none!important}
  .bws70-compact-left .cdj-track{padding:10px 11px!important;border-radius:16px!important}
  .bws70-compact-left .cdj-track>img{width:50px!important;height:50px!important;flex-basis:50px!important}
  .bws70-compact-viz{border-radius:15px!important}
}


/* v8.1.2 split-center stereo spectrogram: deeper augmented panels and center seam */
.bws70-compact-viz{
  isolation:isolate!important;
  transform:perspective(1400px) rotateX(10deg) translateZ(54px)!important;
}
.bws70-compact-viz::after{
  content:"";position:absolute;inset:12px auto 12px 50%;width:2px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,rgba(122,244,255,.03),rgba(240,240,255,.75) 12%,rgba(255,108,224,.55) 50%,rgba(90,219,255,.2) 88%,rgba(255,255,255,.02));
  box-shadow:0 0 22px rgba(135,240,255,.24),0 0 38px rgba(255,79,220,.15);
  border-radius:2px;
}
.bws70-compact-viz canvas{
  filter:saturate(1.08) contrast(1.05) drop-shadow(0 12px 18px rgba(0,0,0,.22));
}
.bws70-compact-viz::before{
  border-color:rgba(96,218,255,.22)!important;
  box-shadow:inset 0 0 28px rgba(18,92,145,.18), inset 0 0 42px rgba(227,69,255,.08), 0 0 16px rgba(88,212,255,.08)!important;
}
@media(max-width:800px){
  .bws70-compact-viz{transform:perspective(1100px) rotateX(8deg) translateZ(36px)!important}
}
@media(max-width:520px){
  .bws70-compact-viz{transform:none!important}
}

/* Keep the main spectrogram uninterrupted after restoring single-scroll. */
.bws70-compact-viz::after{display:none!important;content:none!important}