:root {

  --accent:#ff0000;
  --glow:rgb(255,0,0);

  --dark:#050505;
  --panel:rgba(10,10,10,0.65);

  --text:#ffffff;
  --text-muted:#b3b3b3;

}


/* =================================================
GLOBAL RESET
================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  height:100%;
  width:100%;
  overflow-x:hidden;
}

body{
  font-family:Poppins,system-ui,sans-serif;
  background:var(--dark);
  color:var(--text);
}

/* Default state = player visible */

#idle-spotlight,
#idle-main-logo {
opacity:0;
pointer-events:none;
}
/* =================================================
BACKGROUND VISUALIZER
================================================= */

#bgWaves{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:0;
}


/* =================================================
STUDIO LAYOUT
================================================= */

.studio-layout{
  display:flex;
  min-height:100vh;
}


/* =================================================
SIDEBAR – MATCH DASHBOARD STYLE
================================================= */

.studio-sidebar{

  width:240px;
  padding:20px 16px;

  background:linear-gradient(180deg,#0b0f14,#050505);

  border-right:1px solid rgba(255,255,255,0.06);

  display:flex;
  flex-direction:column;

  gap:18px;

  z-index:10;
}


/* =================================================
LOGO
================================================= */

.studio-logo{

  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;

  opacity:.9;
}

.studio-logo-main{
  font-weight:800;
  font-size:15px;
}

.studio-logo-sub{
  font-size:11px;
  opacity:.6;
}


/* =================================================
NAVIGATION
================================================= */

.studio-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}


/* =================================================
SECTION LABELS
================================================= */

.sidebar-section-label{

  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;

  color:#ff2a2a;

  margin-top:14px;
  margin-bottom:6px;

  opacity:.85;

}


/* =================================================
NAV ITEMS
================================================= */

.studio-nav-item{

  display:flex;
  align-items:center;

  padding:9px 12px;

  border-radius:10px;

  border:none;

  background:transparent;

  color:#c9c9c9;

  font-size:13px;

  text-align:left;

  cursor:pointer;

  transition:all .15s ease;

}


/* hover */

.studio-nav-item:hover{

  background:rgba(255,255,255,0.05);

  color:#fff;

}


/* active */

.studio-nav-item.is-active{

  background:#ff2a2a;

  color:#fff;

  font-weight:600;

  box-shadow:
  0 0 14px rgba(255,42,42,0.35);

}

.studio-nav-item.is-disabled,
.studio-nav-item:disabled{

  opacity:.4;

  pointer-events:none;

  cursor:not-allowed;

}

/* =================================================
DASHBOARD VISUAL ALIGNMENT
================================================= */

.studio-sidebar,
.records-topbar{

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

}


/* match dashboard nav spacing */

.studio-sidebar{
  padding-top:22px;
}


/* soften nav text like dashboard */

.studio-nav-item{
  letter-spacing:.02em;
}


/* dashboard style divider effect */

.sidebar-section-label{
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:10px;
}

/* =================================================
MAIN AREA
================================================= */

.studio-main{
  flex:1;
  display:flex;
  flex-direction:column;
}


/* =================================================
TOP BAR
================================================= */

.records-topbar{

  display:flex;
  align-items:center;
  justify-content:center;

  padding:14px 32px;

  background:rgba(0,0,0,0.6);

  border-bottom:1px solid rgba(255,255,255,0.15);

}

.topbar-title{
  font-size:20px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.topbar-actions{

  position:absolute;
  right:32px;
  display:flex;
  gap:12px;

}

.topbar-btn{

  border:none;
  background:transparent;

  color:var(--text);
  font-size:20px;

  cursor:pointer;

}

#studioBurger{
  position:absolute;
  left:32px;
}


/* =================================================
CONTENT WRAPPER
================================================= */

.records-content{

  max-width:980px;
  margin:24px auto;

  padding:0 18px;

  display:flex;
  flex-direction:column;
  gap:18px;

}


/* =================================================
PLAYER
================================================= */

.player-card{

  background:var(--panel);

  border-radius:22px;

  padding:24px;

  border:1px solid rgba(255,0,0,0.35);

  box-shadow:0 0 40px rgba(0,0,0,0.8);

  display:flex;
  flex-direction:column;
  align-items:center;

  gap:14px;

}

.track-cover{

  width:260px;
  height:260px;

  border-radius:20px;

  object-fit:cover;

  box-shadow:0 0 30px var(--glow);

}

.track-title{

  font-size:26px;
  font-weight:700;

  text-shadow:0 0 12px var(--glow);

}

.track-artist{

  font-size:16px;
  color:var(--text-muted);

}


/* =================================================
PROGRESS
================================================= */

.progress-bar{

  width:100%;
  height:8px;

  background:rgba(255,255,255,0.15);

  border-radius:999px;

  overflow:hidden;

}

.progress-fill{

  height:100%;
  width:0%;

  background:var(--accent);

  box-shadow:0 0 12px var(--glow);

}


/* =================================================
PLAYER CONTROLS
================================================= */

.controls-row{

  display:flex;
  gap:10px;

}

.ctrl-btn{

  width:50px;
  height:50px;

  border-radius:999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;

  border:1px solid rgba(255,255,255,0.15);

  background:rgba(0,0,0,0.4);

  color:var(--text);

  cursor:pointer;

}

.ctrl-btn:hover{

  border-color:var(--accent);
  box-shadow:0 0 12px var(--glow);

}

.ctrl-btn.main{

  background:var(--accent);
  color:#000;

  box-shadow:0 0 18px var(--glow);

}


/* =================================================
SPONSOR BANNER
================================================= */

.banner-image{

  width:100%;
  height:80px;

  object-fit:cover;

  border-radius:14px;

  margin-top:10px;

}


/* =================================================
PLAYER FOOTER
================================================= */

.player-footer{

  font-size:12px;

  color:var(--text-muted);

  width:100%;

  display:flex;
  justify-content:space-between;

}


/* =================================================
TRACK DRAWER BUTTON
================================================= */

.drawer-toggle{

  width:100%;

  padding:12px;

  border-radius:12px;

  border:1px solid rgba(255,0,0,0.35);

  background:var(--accent);

  color:#fff;

  font-size:12px;
  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

  cursor:pointer;

}

.drawer-toggle:hover{
  box-shadow:0 0 12px var(--glow);
}


/* =================================================
TRACK DRAWER
================================================= */

.track-drawer{

  background:var(--panel);

  border-radius:18px;

  border:1px solid rgba(255,255,255,0.1);

  max-height:0;

  overflow:hidden;

  transition:max-height .3s ease;

}

.track-drawer.open{
  max-height:70vh;
}


/* =================================================
DRAWER CONTENT
================================================= */

.drawer-content{

  padding:16px;

  display:flex;
  flex-direction:column;
  gap:12px;

}


/* =================================================
FILTER ROW
================================================= */

.filters-row{

  display:flex;
  flex-direction:column;
  gap:8px;

}

.category-filters,
.subcategory-filters{

  display:flex;

  gap:6px;
 padding-bottom:2px;   /* space above scrollbar */
  margin-bottom:2px;     /* space below pills */
  overflow-x:auto;

  scrollbar-width:thin;

}

.category-filters > *,
.subcategory-filters > *{
  flex:0 0 auto;
}


/* =================================================
FILTER BUTTONS
================================================= */

.cat-btn,
.sub-btn{

  padding:5px 12px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,0.2);

  background:rgba(255,255,255,0.06);

  font-size:11px;
  color: #bbb;

  text-transform:uppercase;

  cursor:pointer;

}

.cat-btn.active,
.sub-btn.active{

  background:var(--accent);
  color:#000;

  box-shadow:0 0 10px var(--glow);

}


/* =================================================
LBC CUSTOM SCROLLBARS
================================================= */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255,255,255,0.08);
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
  height:8px;
  width:8px;
}

*::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius:10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius:10px;
  box-shadow:0 0 8px var(--glow);
}

*::-webkit-scrollbar-thumb:hover {
  background:#ff3333;
}

/* =================================================
TRACK LIST
================================================= */

.track-list{

  list-style:none;

  overflow-y:auto;

  max-height:420px;

}

.track-item{

  padding:10px 12px;

  border-radius:10px;

  cursor:pointer;

  transition:.2s;

}

.track-item:hover{
  background:rgba(255,255,255,0.08);
}

.track-item.active{

  border:1px solid var(--accent);

  box-shadow:0 0 8px var(--glow);

}

.track-item-title{
  font-size:14px;
  font-weight:600;
}

.track-item-artist{
  font-size:12px;
  color:var(--text-muted);
}


/* =================================================
MOBILE
================================================= */

@media(max-width:900px){

  .studio-sidebar{

    position:fixed;

    height:100vh;

    transform:translateX(-260px);

    transition:transform .25s ease;

  }

  .studio-sidebar.is-open{
    transform:translateX(0);
  }

  .records-content{
    padding:0 12px;
  }

  .track-cover{
    width:200px;
    height:200px;
  }

}

/* =================================================
EMERGENCY RECOVERY PATCH
Append only — do not remove existing rules
Restores missing layout + modal + helper styles
================================================= */

/* helper */
.hidden{
  display:none !important;
}

/* stop broken idle/tap layers from affecting live player */
#idle-spotlight,
#idle-main-logo{
  display:none !important;
}

.tap-overlay{
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5, 5, 5, 0.86);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.tap-overlay.is-visible{
  display:flex;
}

.tap-message{
  max-width:520px;
  width:min(92vw, 520px);
  text-align:center;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid rgba(255, 42, 42, 0.45);
  background:rgba(16, 16, 16, 0.96);
  color:#fff;
  font-size:clamp(16px, 2.6vw, 22px);
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 0 24px rgba(255, 42, 42, 0.24);
}

/* keep topbar anchors positioned correctly */
.records-topbar{
  position:relative;
  z-index:10000;
}

.topbar-btn,
#studioBurger{
  z-index:10001;
}

/* sidebar helper content */
.studio-sidebar-content{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.45;
}

.sidebar-hint{
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
}

/* mobile backdrop */
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9;
}

.sidebar-backdrop.is-visible{
  display:block;
}

/* main area safety */
.studio-main{
  min-width:0;
  overflow-x:visible;
}

/* dashboard-layout classes used by current HTML */
.dashboard-layout{
  width:100%;
  display:block;
}

.dashboard-main-panel{
  width:100%;
  max-width:980px;
  margin:24px auto 0;
}

/* keep content centered and stable */
.records-content{
  width:100%;
  min-width:0;
}

.player-section,
.library-section{
  width:100%;
  min-width:0;
}

.player-card{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

.drawer-toggle{
  display:block;
  width:100%;
  max-width:720px;
  margin:16px auto 0;
}

.track-drawer{
  width:100%;
  max-width:720px;
  margin:0 auto;
}

.drawer-content{
  min-width:0;
  max-width:100%;
}

/* panel header + counts */
.panel-header{
  border-bottom:1px solid rgba(255,255,255,0.12);
  padding-bottom:10px;
  margin-bottom:8px;
}

.panel-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.panel-title-row h2{
  font-size:16px;
  font-weight:700;
}

#trackCountLabel{
  font-size:11px;
  color:var(--text-muted);
}

/* filters should scroll instead of stretching */
.category-filters,
.subcategory-filters{
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  min-width:0;
  -webkit-overflow-scrolling:touch;
}

.category-filters::-webkit-scrollbar,
.subcategory-filters::-webkit-scrollbar{
  height:6px;
}

.category-filters > *,
.subcategory-filters > *{
  flex:0 0 auto;
}

/* track list item text hooks used by JS */
.track-item .track-title{
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

.track-item .track-title:hover{
  color:var(--accent);
}

.track-actions{
  display:flex;
  gap:10px;
  margin-top:6px;
  align-items:center;
  flex-wrap:wrap;
  opacity:.75;
}

.track-item:hover .track-actions{
  opacity:1;
}

.track-actions button{
  background:none;
  border:none;
  color:#bbb;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0;
}

.track-actions button:hover{
  color:#ff3c3c;
}

.track-actions .count{
  font-size:12px;
  opacity:.85;
}

/* footer spacing */
.player-footer{
  gap:10px;
  align-items:center;
}

/* modal overlay/card restoration */
.modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(6px);
  padding:16px;
}

.modal-overlay.hidden{
  display:none !important;
}

.modal-card{
  width:min(92vw, 520px);
  max-height:90vh;
  overflow-y:auto;
  background:rgba(12,16,22,0.96);
  border:1px solid rgba(255,42,42,0.25);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.65);
  color:#fff;
  padding:16px;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.modal-close-btn{
  border:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  cursor:pointer;
}

.modal-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#globalCreatePlaylistModal .modal-card{
  max-height:85vh;
  overflow-y:auto;
  padding-bottom:20px;
  display:flex;
  flex-direction:column;
}

#globalCreatePlaylistModal .modal-body{
  display:flex;
  flex-direction:column;
  min-height:0;
}

#globalCreatePlaylistModal .modal-cover-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#globalCreatePlaylistModal .playlist-cover-preview-wrap{
  position:relative;
  display:block;
  width:100%;
  max-height:160px;
  min-height:160px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  cursor:pointer;
  transition:opacity .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#globalCreatePlaylistModal .playlist-cover-preview-wrap:hover,
#globalCreatePlaylistModal .playlist-cover-preview-wrap:focus-visible{
  opacity:.95;
  border-color:rgba(255,42,42,0.45);
  box-shadow:0 0 0 1px rgba(255,42,42,0.18), 0 10px 24px rgba(0,0,0,0.26);
}

#globalCreatePlaylistModal .playlist-cover-preview-wrap:disabled{
  cursor:not-allowed;
  opacity:.72;
}

#globalCreatePlaylistModal .playlist-cover-preview{
  display:block;
  width:100%;
  height:160px;
  max-height:160px;
  object-fit:cover;
  border-radius:10px;
}

#globalCreatePlaylistModal .playlist-cover-overlay{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(6,8,12,0.72);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  pointer-events:none;
}

@media (max-width: 640px) {
  #globalCreatePlaylistModal .modal-card{
    width:min(94vw, 520px);
    max-height:85vh;
    padding:14px 14px 20px;
  }

  #globalCreatePlaylistModal .playlist-cover-preview-wrap,
  #globalCreatePlaylistModal .playlist-cover-preview{
    min-height:140px;
    height:140px;
    max-height:140px;
  }
}

#userPlaylists{
  list-style:none;
  margin:0;
  padding:0;
  max-height:220px;
  overflow-y:auto;
}

#userPlaylists li{
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid transparent;
}

#userPlaylists li:hover{
  border-color:rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
}

#createNewPlaylistBtn{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}

#createNewPlaylistBtn:hover{
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(255,0,0,0.2);
}

/* audio element should never affect layout */
#recordsAudio{
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}

/* mobile safety */
@media(max-width:900px){

  .records-topbar{
    padding:10px 18px;
  }

  #studioBurger{
    left:18px;
  }

  .topbar-actions{
    right:18px;
  }

  .topbar-title{
    font-size:16px;
  }

  .studio-sidebar{
    top:60px;
    left:0;
    width:260px;
    height:calc(100vh - 60px);
    transform:translateX(-260px);
    z-index:1000;
  }

  .studio-sidebar.is-open{
    transform:translateX(0);
  }

  .dashboard-main-panel{
    margin-top:16px;
  }

  .records-content{
    padding:0 12px;
  }

  .player-card{
    max-width:100%;
  }

  .drawer-toggle,
  .track-drawer{
    max-width:100%;
  }

  .track-cover{
    width:200px;
    height:200px;
  }

  .banner-image{
    height:70px;
  }

}

/* --- Fix visualizer overlaying UI --- */

/* Keep the waveform behind everything */
#bgWaves {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* Ensure the app UI sits above the visualizer */
.studio-layout,
.studio-sidebar,
.studio-main,
.records-topbar,
.records-content,
.player-card,
.track-drawer,
.drawer-toggle {
  position: relative;
  z-index: 5;
}
/* =================================================
FORCE MOBILE PLAYER SHELL FIX
Append at very end of records-player.css
================================================= */

.studio-layout{
  width:100%;
  min-width:0;
  overflow-x:visible;
}

.studio-main{
  flex:1;
  min-width:0;
  width:100%;
  overflow-x:visible;
}

.records-content{
  width:100%;
  max-width:980px;
  min-width:0;
  margin:24px auto;
  padding:0 18px;
}

@media (max-width: 1024px), (hover:none) and (pointer:coarse){

  .studio-layout{
    display:block !important;
    width:100% !important;
    overflow-x:visible !important;
  }

  .studio-sidebar{
    position:fixed !important;
    top:60px !important;
    left:0 !important;
    width:260px !important;
    height:calc(100vh - 60px) !important;
    transform:translateX(-100%) !important;
    z-index:1000 !important;
  }

  .studio-sidebar.is-open{
    transform:translateX(0) !important;
  }

  .studio-main{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
    overflow-x:visible !important;
  }

  .records-topbar{
    position:relative !important;
    z-index:10000 !important;
    width:100% !important;
    max-width:100% !important;
  }

  .records-content{
    width:100% !important;
    max-width:100% !important;
    margin:16px auto !important;
    padding:0 12px !important;
    overflow-x:visible !important;
  }

  #recordsPublicSectionContainer{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

}
/* =================================================
PLAYLIST RAIL
================================================= */

.playlist-rail{

  display:flex;
  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;

  padding-bottom:6px;

  scroll-snap-type:x mandatory;

}

.playlist-rail::-webkit-scrollbar{
  height:8px;
}

.playlist-card{

  flex:0 0 260px;

  scroll-snap-align:start;

}