/* =========================================
🎧 CS DASHBOARD (FINAL COMBINED BUILD)
========================================= */

:root {
  --bg: #120a1f;
  --bg-soft: #1b1333;
  --panel: #0f0a1a;
  --accent: #f5b301;
  --accent-2: #ff8c42;
  --text: #ffffff;
  --muted: #bbbbbb;
}
 
/* BASE */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg,#120a1f,#1b1333);
  color: var(--text);
}

/* LAYOUT */
.cs-artist-dashboard {
  display: flex;
  min-height: 100vh;
}

/* =========================
📱 MOBILE NAV
========================= */
.cs-mobile-nav{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:60px;
  background:#0f0a1a;
  z-index:1000;
  align-items:center;
  justify-content:center;
}

.cs-mobile-nav button{
  position:absolute;
  left:20px;
  font-size:22px;
  background:none;
  border:none;
  color:#fff;
}

.cs-mobile-logo img{
  height:30px;
}

/* OVERLAY */
#csOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:999;
}

#csOverlay.active{
  opacity:1;
  pointer-events:auto;
}

/* SIDEBAR */
.cs-artist-sidebar{
  width:240px;
  background:var(--panel);
  padding:2rem 1rem;
  transition:.3s;
}

.cs-sidebar-logo img{
  width:140px;
  margin-bottom:2rem;
}

.cs-artist-sidebar nav a{
  display:block;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  color:var(--muted);
}

.cs-artist-sidebar nav a:hover,
.cs-artist-sidebar nav a.active{
  background:rgba(245,179,1,.15);
  color:var(--accent);
}

/* MAIN */
.cs-artist-main{
  flex:1;
  padding:2rem;
}

/* HERO */
.cs-artist-hero{
  padding:2rem;
  border-radius:20px;
  margin-bottom:2rem;
  background:radial-gradient(circle at top, rgba(245,179,1,.15), transparent);
}

/* STATS */
.cs-artist-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin-bottom:2rem;
}

.cs-stat-card{
  background:var(--bg-soft);
  padding:1.5rem;
  border-radius:16px;
  text-align:center;
}

/* PLAYER GRID */
.cs-player-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}

/* STREAM CARD */
.stream-card{
  background:#1b1333;
  border-radius:16px;
  padding:16px;
  transition:.3s;
}

.stream-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(157,77,255,.2);
}

.stream-card img{
  width:100%;
  border-radius:10px;
}

/* PLAYER */
.cs-audio-player{
  display:flex;
  align-items:center;
  gap:12px;
  background:#120a1f;
  border-radius:40px;
  padding:10px 14px;
  margin-top:14px;
  position:relative;
}

.play-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(90deg,#f5b301,#ff8c42);
}

/* PROGRESS */
.progress{
  position:absolute;
  bottom:0;
  left:0;
  height:3px;
  width:100%;
  background:rgba(255,255,255,.08);
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#f5b301,#ff8c42);
}

/* ACTIONS */
.actions{
  display:flex;
  gap:10px;
  margin-top:15px;
}

.actions a{
  flex:1;
  text-align:center;
  padding:10px;
  border-radius:30px;
  text-decoration:none;
}

.btn-gold{
  background:linear-gradient(90deg,#f5b301,#ff8c42);
  color:#120a1f;
}

/* =========================
📱 MOBILE RESPONSIVE
========================= */
@media(max-width:768px){

.cs-mobile-nav{
  display:flex;
}

.cs-artist-dashboard{
  flex-direction:column;
}

.cs-artist-main{
  padding-top:80px;
}

.cs-artist-sidebar{
  position:fixed;
  top:0;
  right:-260px;
  height:100%;
  z-index:1001;
}

.cs-artist-sidebar.active{
  right:0;
}

}


/* ====CS Waveform Track Manager (Spotify-style) ====== */

.cs-track{
background:#1b122b;
padding:20px;
border-radius:14px;
margin-bottom:20px;
}

.cs-waveform{
height:60px;
background:linear-gradient(
90deg,
#f5b301,
#ff8c42,
#9d4dff
);
opacity:.25;
border-radius:10px;
margin-bottom:10px;
}

/* ====ANALYTICS ====*/

.cs-activity ul{
list-style:none;
margin-top:20px;
}

.cs-activity li{
padding:12px;
border-bottom:1px solid rgba(255,255,255,.08);
color:#aaa;
}

/*=========================================
✅ CUT FROM GLOBAL COMPONENTS KDRO ADDED
=========================================== */

/* ==========================================
STUDIO ATMOSPHERE
============================================= */
.cs-atmosphere{
position:relative;
min-height:60vh;
background:url('/wp-content/uploads/studio-bg.jpg') center/cover fixed;
display:flex;
align-items:center;
}

.cs-atmosphere-overlay{
position:absolute;
inset:0;
background:linear-gradient(
180deg,
rgba(18,10,31,.8),
rgba(0,0,0,.7)
);
}

.cs-atmosphere-content{
position:relative;
max-width:700px;
}

.cs-atmosphere h2{
color:#f5b301;
font-size:2.4rem;
}

/*==========================
 STUDIO PROCESS SECTION 
==========================*/
.cs-process{
padding:5rem 0;
background:#1b1333;
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2rem;
margin-top:3rem;
}

.process-step{
background:#120a1f;
padding:2rem;
border-radius:18px;
transition:.3s;
}

.process-step:hover{
transform:translateY(-10px);
box-shadow:0 10px 30px rgba(245,179,1,.3);
}

/* ==========================
CLIENT DASHBOARD MOBILE NAV
============================*/
✅ Overlay

#csOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
backdrop-filter:blur(4px);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:998;
}

#csOverlay.active{
opacity:1;
pointer-events:auto;
}

CSS
✅    Mobile Header (Glass Bar)
.cs-mobile-nav{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:65px;

background:rgba(15,10,26,0.75);
backdrop-filter:blur(12px);

border-bottom:1px solid rgba(245,179,1,0.2);

z-index:999;

align-items:center;
justify-content:center;
}

/* Logo centered */
.cs-mobile-logo img{
height:36px;
}

/* Hamburger */
#menuToggle{
position:absolute;
left:20px;
top:50%;
transform:translateY(-50%);
background:none;
border:none;
cursor:pointer;
display:flex;
flex-direction:column;
gap:5px;
}

#menuToggle span{
width:24px;
height:2px;
background:#f5b301;
display:block;
}

✅    Sidebar → Slide From Right

@media (max-width:768px){

.cs-mobile-nav{
display:flex;
}

/* push content below header */
.cs-client-main{
padding-top:90px;
}

/* SIDEBAR MOBILE MODE */
.cs-client-sidebar{
position:fixed;
top:0;
right:-100%;
width:260px;
height:100vh;
z-index:999;

transition:.4s ease;
}

/* ACTIVE STATE */
.cs-client-sidebar.active{
right:0;
}

/* OPTIONAL: soften */
.cs-client-sidebar{
box-shadow:-10px 0 30px rgba(0,0,0,.6);
}

}