:root{
  --bg:#050116;--panel:#100b32;--panel2:#0b0824;
  --text:#fff;--muted:#9ea5c3;--pink:#ff3ac8;--purple:#8750ff;
  --cyan:#00e8ff;--orange:#ff9d20
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:#fff;font-family:Inter,Arial,sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.view{display:none}.view.active{display:block}
.glass{
  background:linear-gradient(180deg,rgba(18,13,56,.96),rgba(7,5,27,.97));
  border:1px solid rgba(111,92,255,.25);
  box-shadow:0 22px 75px rgba(0,0,0,.45);
  backdrop-filter:blur(18px)
}
body.home-mode{
  height:100dvh;overflow:hidden;
  background:
    radial-gradient(circle at 82% 10%,rgba(255,58,200,.09),transparent 24%),
    radial-gradient(circle at 12% 22%,rgba(0,232,255,.05),transparent 24%),
    linear-gradient(180deg,#030111,#07021d)
}
.home-view{height:100dvh;overflow:hidden}
.app-shell{
  width:min(96vw,1500px);
  height:calc(100dvh - 28px);
  margin:14px auto;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  grid-template-columns:118px 1fr;
  grid-template-rows:1fr 82px;
  position:relative
}
.sidebar{
  grid-row:1 / 3;
  grid-column:1;
  padding:18px 10px;
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:4
}
.mini-brand{
  font:800 11px Montserrat;
  display:flex;align-items:center;gap:7px;
  margin-bottom:6px
}
.mini-logo{color:var(--pink);font-size:20px}
.nav-stack{display:flex;flex-direction:column;gap:6px}
.nav-stack button,
.creator-link{
  border:0;background:transparent;color:#c9cee4;
  text-align:left;padding:10px 8px;border-radius:9px
}
.nav-stack button.active,
.nav-stack button:hover,
.creator-link:hover{
  background:linear-gradient(90deg,rgba(0,232,255,.28),transparent);
  color:var(--cyan)
}
.sidebar-bottom{margin-top:auto}

.main-area{
  grid-column:2;
  grid-row:1;
  position:relative;
  padding:22px 24px 16px;
  overflow:hidden;
  min-width:0
}
.visual-layer{
  position:absolute;
  right:0;
  top:0;
  width:42%;
  height:47%;
  pointer-events:none;
  z-index:0;
  overflow:hidden
}
.visual-layer img{
  position:absolute;
  right:-7%;
  top:-10%;
  width:115%;
  height:130%;
  object-fit:cover;
  object-position:100% 0;
  clip-path:ellipse(48% 48% at 70% 30%);
  filter:saturate(1.1) contrast(1.06)
}
.handline{
  position:absolute;
  left:3%;
  top:12%;
  z-index:2;
  font-size:clamp(18px,1.7vw,30px);
  font-style:italic;
  font-weight:600;
  line-height:1.18;
  transform:rotate(-5deg);
  color:var(--cyan);
  text-shadow:0 0 18px rgba(0,232,255,.24)
}
.handline b{color:var(--orange)}
.handline span{color:#cb62ff}

.top-row{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:16px;
  width:72%
}
.headline-wrap h1{
  margin:0 0 14px;
  font:800 clamp(24px,2.2vw,38px) Montserrat;
  line-height:1.06
}
.searchbox{
  width:min(520px,100%);
  height:39px;
  border:1px solid #32345f;
  border-radius:20px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  color:#848ba9;
  font-size:12px
}
.top-actions{
  display:flex;gap:7px;
  align-items:flex-start
}
.pro,.round{
  height:34px;
  border:1px solid #413477;
  background:#18113d;
  color:#fff;
  border-radius:18px
}
.pro{padding:0 12px;color:#ffbc3b}
.round{width:34px}
.user-chip{display:none}
.user-chip.show{display:flex;align-items:center}
.user-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.user-chip span{display:none}

.content-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) 205px;
  gap:18px;
  margin-top:26px;
  height:calc(100% - 116px)
}
.tracks-section{min-width:0;display:flex;flex-direction:column}
.section-head{
  display:flex;justify-content:space-between;align-items:center
}
.section-head h2{font-size:13px;margin:0}
.section-head span{font-size:10px;color:var(--cyan)}
.track-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:11px
}
.track-card{min-width:0}
.track-cover{
  aspect-ratio:1/1;
  border-radius:13px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.2)
}
.track-cover:after{
  content:"";position:absolute;inset:auto 0 0;height:42%;
  background:linear-gradient(transparent,rgba(0,0,0,.35))
}
.playdot{
  position:absolute;right:7px;bottom:7px;z-index:2;
  width:31px;height:31px;border-radius:50%;border:0;
  background:#090715;color:white
}
.track-card h3{
  font-size:11px;margin:8px 0 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.track-card p{
  font-size:9px;color:#9298b6;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.moods-title{margin-top:20px}
.mood-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  margin-top:10px
}
.mood-grid button{
  border:0;border-radius:10px;padding:11px 4px;color:#fff;
  background:#14255d;font-size:10px
}
.mood-grid button:nth-child(2){background:#a5216d}
.mood-grid button:nth-child(3){background:#dd6127}
.mood-grid button:nth-child(4){background:#44318b}
.mood-grid button:nth-child(5){background:#076d85}
.mood-grid button:nth-child(6){background:#142e6b}

.artist-rail{
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:14px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.rising-list{
  margin-top:14px;
  display:grid;
  gap:12px
}
.rising-item{
  display:flex;align-items:center;gap:9px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.rising-item img{
  width:36px;height:36px;border-radius:50%;object-fit:cover
}
.rising-item strong{display:block;font-size:10px}
.rising-item span{font-size:8px;color:#8d94b4}
.rail-cta{
  margin-top:auto;
  width:126px;height:126px;
  border-radius:50%;
  align-self:center;
  display:grid;place-items:center;
  text-align:center;
  padding:13px;
  font-size:11px;line-height:1.4;
  background:radial-gradient(circle at 30% 20%,#ff8d45,#ff3b9d 35%,#792bca 70%,#361260);
  box-shadow:0 0 35px rgba(255,58,200,.36);
  border:2px solid rgba(0,232,255,.18)
}

.player{
  grid-column:2;
  grid-row:2;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:1.1fr 170px 1fr 190px;
  align-items:center;
  gap:14px;
  padding:10px 22px;
  background:linear-gradient(180deg,rgba(9,7,32,.96),rgba(6,5,24,.98));
  z-index:5
}
.player-left{
  display:flex;gap:11px;align-items:center;min-width:0
}
.player-left img{
  width:50px;height:50px;border-radius:9px;object-fit:cover
}
.player-left strong,.player-left span{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.player-left strong{font-size:12px}
.player-left span{font-size:9px;color:#9399b8}
.player-buttons{
  display:flex;justify-content:center;align-items:center;gap:16px
}
.player-buttons button{border:0;background:transparent;color:#fff}
.player-buttons .play{
  width:50px;height:50px;border-radius:50%;
  background:#fff;color:#ce2cab;font-size:18px
}
.eq-bars{
  height:28px;
  display:grid;
  grid-template-columns:repeat(18,1fr);
  gap:3px;
  align-items:end
}
.eq-bars i{
  display:block;height:30%;border-radius:8px;
  background:linear-gradient(180deg,var(--pink),var(--purple),var(--cyan));
  animation:eq 1.3s ease-in-out infinite
}
.eq-bars i:nth-child(2n){animation-duration:1.7s}
.eq-bars i:nth-child(3n){animation-duration:1.1s}
@keyframes eq{0%,100%{height:22%}50%{height:100%}}
#progress{width:100%}

.standard-view{min-height:100vh;background:linear-gradient(180deg,#07031b,#0b0720)}
.std-topbar{
  height:58px;display:flex;align-items:center;gap:18px;
  padding:0 5vw;border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;background:rgba(6,3,20,.92);z-index:4
}
.std-topbar button{border:0;background:transparent;color:var(--cyan)}
.std-topbar h1{font-size:14px}
.page-head{padding:50px 5vw 24px}
.page-head h1{font:800 clamp(48px,7vw,96px) Montserrat;margin:5px 0}
.page-head p{color:#a3a8c1}
.gradient-text{background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));-webkit-background-clip:text;color:transparent}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);font-size:10px;font-weight:700}
.genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 5vw 60px}
.genre{min-height:145px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#151347,#0a3356);display:flex;align-items:flex-end;font:700 20px Montserrat}
.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.page-grid{padding:0 5vw 60px}
.artist-card{
  padding:14px;
  min-height:174px;
  border-radius:16px;
  background:#12102e;
  border:1px solid rgba(255,255,255,.08);
}
.artist-card .avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:10px;
}
.artist-card h3{
  margin:0 0 4px;
  font-size:15px;
  line-height:1.15;
}
.artist-card .muted{
  color:#979bb6;
  font-size:10.5px;
  line-height:1.2;
}
.artist-card .tag{
  margin-top:7px;
  padding:3px 6px;
  border:1px solid #343665;
  border-radius:9px;
  font-size:8.5px;
  line-height:1.1;
  display:inline-block;
}
.upload-card{margin:0 5vw 60px;padding:28px;border-radius:24px;max-width:960px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.upload-card label{display:flex;flex-direction:column;gap:7px;color:#c7cae0}
.upload-card input,.upload-card select,.upload-card textarea{background:#09081e;color:white;border:1px solid #373861;border-radius:10px;padding:12px}
.wide{margin-top:16px}
.check{flex-direction:row!important;margin:18px 0}
.primary{border:0;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange));color:white;padding:11px 18px;font-weight:700}
.pill{border-radius:999px}
.ghost{border:1px solid #3a3a67;background:transparent;color:white;padding:10px 14px}
.upload-progress{height:8px;background:#171630;border-radius:8px;overflow:hidden;margin:12px 0}
.upload-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan))}
.auth-modal{position:fixed;inset:0;background:rgba(4,3,14,.82);display:none;place-items:center;z-index:100;padding:20px}
.auth-modal.open{display:grid}
.auth-card{width:min(520px,100%);padding:28px;border-radius:26px}
.auth-card h2{font-family:Montserrat}
.auth-fields{display:grid;gap:12px}
.auth-fields input{background:#0b0a22;color:white;border:1px solid #35375f;padding:13px;border-radius:12px}
.auth-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.close-btn{float:right;border:0;background:transparent;color:white;font-size:22px}

@media(max-height:760px) and (min-width:1050px){
  .app-shell{height:calc(100dvh - 16px);margin:8px auto;grid-template-rows:1fr 72px}
  .main-area{padding:16px 20px 12px}
  .top-row{width:75%}
  .headline-wrap h1{font-size:clamp(21px,1.85vw,31px);margin-bottom:10px}
  .content-grid{margin-top:18px;height:calc(100% - 102px)}
  .track-grid{gap:8px}
  .moods-title{margin-top:14px}
  .mood-grid button{padding:8px 3px}
  .rail-cta{width:108px;height:108px;font-size:10px}
  .player{padding:8px 18px}
  .player-left img{width:46px;height:46px}
  .player-buttons .play{width:44px;height:44px}
  .visual-layer{height:43%}
}

@media(max-width:1050px){
  body.home-mode{height:auto;overflow:auto}
  .home-view{height:auto;overflow:visible}
  .app-shell{
    width:calc(100% - 16px);
    height:auto;min-height:100vh;
    margin:8px;
    grid-template-columns:82px 1fr;
    grid-template-rows:auto 72px
  }
  .visual-layer{display:none}
  .top-row{width:100%}
  .content-grid{grid-template-columns:1fr}
  .artist-rail{display:none}
  .player{grid-column:2}
  .sidebar span{font-size:0}
  .mini-brand span:last-child{display:none}
}
@media(max-width:700px){
  .app-shell{grid-template-columns:58px 1fr}
  .main-area{padding:16px 12px}
  .track-grid{grid-template-columns:repeat(2,1fr)}
  .mood-grid{grid-template-columns:repeat(3,1fr)}
  .top-actions{display:none}
  .player{grid-template-columns:1fr 130px}
  .eq-bars,#progress{display:none}
  .form-grid,.genre-grid,.artist-grid{grid-template-columns:1fr}
}


/* v5.3 crisp covers */
.track-cover{
  image-rendering:auto;
  filter:none !important;
}
.track-card h3, .track-card p{
  text-shadow:none;
}


/* === v5.4 login gate + stronger moods section === */
.login-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,58,200,.15),transparent 28%),
    radial-gradient(circle at 74% 28%,rgba(0,232,255,.12),transparent 30%),
    linear-gradient(180deg,#040114,#08031e);
}
.auth-locked .login-gate{display:grid}
.auth-locked #app{filter:blur(14px);transform:scale(1.01);pointer-events:none;user-select:none}
.login-gate-card{
  width:min(520px,94vw);
  padding:38px;
  border-radius:30px;
  text-align:center;
}
.gate-logo{
  font:800 clamp(42px,8vw,72px) Montserrat,Inter,sans-serif;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));
  -webkit-background-clip:text;
  color:transparent;
}
.gate-logo span{color:inherit}
.gate-tagline{
  margin-top:8px;
  font:700 18px Montserrat,Inter,sans-serif;
}
.login-gate-card p{
  color:#b8bdd4;
  line-height:1.55;
  margin:18px auto 24px;
  max-width:420px;
}
.login-gate-card .primary{
  padding:13px 22px;
  font-size:1rem;
}

/* Make mood/genre section visibly stronger */
.moods-title{
  margin-top:22px;
  margin-bottom:10px;
}
.mood-grid{
  min-height:92px;
  gap:10px;
  align-items:stretch;
}
.mood-grid button{
  min-height:78px;
  padding:12px 8px;
  border-radius:16px;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 18px rgba(0,0,0,.16);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.mood-grid button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 14px 24px rgba(0,0,0,.22);
}

@media(max-height:760px) and (min-width:1050px){
  .mood-grid{min-height:74px}
  .mood-grid button{min-height:62px;font-size:11px}
}

@media(max-width:700px){
  .mood-grid{grid-template-columns:repeat(2,1fr);min-height:auto}
  .mood-grid button{min-height:64px}
}


/* === v5.4.1 login modal visibility fix === */
.auth-modal{
  z-index:20000 !important;
}
.login-gate{
  z-index:10000;
}
body.auth-dialog-open .login-gate{
  opacity:.28;
  pointer-events:none;
  transition:opacity .18s ease;
}


/* === v5.4.2 larger mood typography === */
.moods-title .section-head h2,
.moods-title h2{
  font-size:18px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
}

.mood-grid button{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-0.01em;
}

@media(max-height:760px) and (min-width:1050px){
  .mood-grid button{
    font-size:13px !important;
  }
  .moods-title .section-head h2,
  .moods-title h2{
    font-size:16px !important;
  }
}

@media(max-width:700px){
  .mood-grid button{
    font-size:14px !important;
  }
}


/* === v5.4.3 mood text XL === */
.moods-title .section-head h2,
.moods-title h2{
  font-size:22px !important;
  line-height:1.1 !important;
}

.mood-grid button{
  font-size:18px !important;
  line-height:1.15 !important;
  padding:14px 10px !important;
}

@media(min-width:1400px){
  .mood-grid button{
    font-size:20px !important;
  }
  .moods-title .section-head h2,
  .moods-title h2{
    font-size:24px !important;
  }
}

@media(max-height:760px) and (min-width:1050px){
  .mood-grid button{
    font-size:16px !important;
  }
  .moods-title .section-head h2,
  .moods-title h2{
    font-size:20px !important;
  }
}

@media(max-width:700px){
  .mood-grid button{
    font-size:16px !important;
  }
}


/* === v5.5 Royalty Program === */
.royalty-notice{
  max-width:980px;
  margin:0 auto 18px;
  padding:16px 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid rgba(0,232,255,.18);
  background:linear-gradient(135deg,rgba(0,232,255,.07),rgba(255,62,207,.06));
}
.royalty-notice-icon{
  flex:0 0 42px;
  width:42px;height:42px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:22px;font-weight:800;
  background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));
  color:white;
}
.royalty-notice strong{font-size:17px}
.royalty-notice p{margin:6px 0 0;color:#c6c9db;line-height:1.5;font-size:14px}

.policy-grid{
  width:min(1120px,92vw);
  margin:0 auto 18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.policy-card{
  padding:22px;
  min-height:220px;
  border-radius:22px;
}
.policy-number{
  display:block;
  margin-bottom:18px;
  font:800 30px/1 Montserrat,Inter,sans-serif;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));
  -webkit-background-clip:text;
  color:transparent;
}
.policy-card h3{margin:0 0 10px;font-size:18px}
.policy-card p{margin:0;color:#bfc3d7;line-height:1.55;font-size:14px}
.policy-detail{
  width:min(1120px,92vw);
  margin:0 auto 50px;
  padding:24px;
  border-radius:22px;
}
.policy-detail h2{margin-top:0}
.origin-rules{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:16px 0;
}
.origin-rules>div{
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}
.origin-rules b{display:block;margin-bottom:6px}
.origin-rules span{font-size:13px;color:#bfc3d7;line-height:1.45}
.policy-small{font-size:12px;color:#8f95ac;line-height:1.55;margin:16px 0 0}

@media(max-width:900px){
  .policy-grid{grid-template-columns:repeat(2,1fr)}
  .origin-rules{grid-template-columns:1fr}
}
@media(max-width:560px){
  .policy-grid{grid-template-columns:1fr}
}

/* player feedback for a newly qualified stream */
.stream-qualified{
  position:fixed;
  right:22px;
  bottom:110px;
  z-index:30000;
  padding:11px 15px;
  border-radius:14px;
  background:rgba(8,5,30,.94);
  border:1px solid rgba(0,232,255,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
  font-size:13px;
  color:#dffcff;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:.2s ease;
}
.stream-qualified.show{opacity:1;transform:none}


/* === v5.5.1 responsive sidebar === */
.app-shell{
  grid-template-columns:clamp(145px,9.5vw,180px) 1fr !important;
}

.sidebar{
  min-width:0;
  overflow:hidden;
  padding:clamp(18px,2.2vh,28px) clamp(12px,1vw,18px) 14px !important;
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  box-sizing:border-box;
}

.sidebar .brand,
.sidebar .logo,
.sidebar > a:first-child{
  flex:0 0 auto;
}

.sidebar nav,
.sidebar .nav{
  flex:1 1 auto;
  min-height:0;
  display:flex !important;
  flex-direction:column !important;
  gap:clamp(4px,.65vh,9px) !important;
  margin-top:clamp(16px,2vh,26px) !important;
  overflow:hidden;
}

.sidebar nav button,
.sidebar .nav button,
.sidebar > button:not(.creator-btn){
  min-height:clamp(38px,5.3vh,52px) !important;
  padding:0 clamp(8px,.7vw,13px) !important;
  margin:0 !important;
  font-size:clamp(14px,.95vw,18px) !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
  flex:0 0 auto;
}

.sidebar nav button span,
.sidebar .nav button span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sidebar .creator-btn,
.sidebar [data-view="upload"],
.sidebar button:last-child{
  margin-top:auto !important;
  flex:0 0 auto;
  min-height:clamp(54px,7vh,70px) !important;
  padding:10px clamp(8px,.7vw,13px) !important;
  font-size:clamp(14px,.95vw,18px) !important;
  line-height:1.12 !important;
  white-space:normal !important;
}

/* Low-height desktops: tighten vertical rhythm */
@media(max-height:820px) and (min-width:1000px){
  .sidebar{
    padding-top:14px !important;
    padding-bottom:10px !important;
  }

  .sidebar nav,
  .sidebar .nav{
    margin-top:10px !important;
    gap:3px !important;
  }

  .sidebar nav button,
  .sidebar .nav button,
  .sidebar > button:not(.creator-btn){
    min-height:37px !important;
    font-size:14px !important;
  }

  .sidebar .creator-btn,
  .sidebar [data-view="upload"],
  .sidebar button:last-child{
    min-height:48px !important;
    font-size:14px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
}

/* Very low laptop screens */
@media(max-height:700px) and (min-width:1000px){
  .app-shell{
    grid-template-columns:138px 1fr !important;
  }

  .sidebar nav button,
  .sidebar .nav button,
  .sidebar > button:not(.creator-btn){
    min-height:32px !important;
    font-size:13px !important;
  }

  .sidebar nav,
  .sidebar .nav{
    gap:1px !important;
    margin-top:7px !important;
  }

  .sidebar .creator-btn,
  .sidebar [data-view="upload"],
  .sidebar button:last-child{
    min-height:42px !important;
    font-size:13px !important;
  }
}

/* Tablet/mobile */
@media(max-width:900px){
  .app-shell{
    grid-template-columns:1fr !important;
  }
}


/* === v5.5.3 responsive standard/sub pages === */

/* Base standard page shell */
.standard-view{
  min-height:100dvh;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top:0 !important;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 18% 18%,rgba(124,77,255,.08),transparent 28%),
    radial-gradient(circle at 82% 12%,rgba(0,232,255,.05),transparent 24%),
    #070319;
}

/* Sticky top bar keeps title from sliding underneath */
.std-topbar{
  position:sticky !important;
  top:0;
  z-index:120;
  min-height:68px;
  height:auto !important;
  display:flex;
  align-items:center;
  gap:26px;
  padding:14px clamp(22px,5vw,90px) !important;
  box-sizing:border-box;
  background:rgba(5,2,18,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.std-topbar button{
  flex:0 0 auto;
  font-size:clamp(15px,1.05vw,20px) !important;
  line-height:1.2;
}

.std-topbar h1{
  margin:0 !important;
  font-size:clamp(16px,1vw,20px) !important;
  line-height:1.2 !important;
  white-space:nowrap;
}

/* Main intro block */
.page-head{
  width:min(1640px,90vw) !important;
  margin:0 auto !important;
  padding:clamp(42px,7vh,76px) 0 clamp(26px,4vh,44px) !important;
  box-sizing:border-box;
}

.page-head .eyebrow{
  margin:0 0 12px;
  font-size:clamp(11px,.75vw,14px);
  letter-spacing:.14em;
}

.page-head h1{
  margin:0 0 16px !important;
  font-size:clamp(44px,6vw,94px) !important;
  line-height:.96 !important;
  letter-spacing:-.045em;
  max-width:100%;
  overflow:visible !important;
}

.page-head p{
  margin:0;
  max-width:760px;
  font-size:clamp(16px,1.2vw,22px) !important;
  line-height:1.45;
  color:#b8bdd4;
}

/* Generic card grids on subpages */
.standard-view .genre-grid,
.standard-view .card-grid,
.standard-view .policy-grid{
  width:min(1640px,90vw) !important;
  margin:0 auto clamp(40px,6vh,72px) !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:clamp(14px,1.5vw,24px) !important;
}

#artists .artist-grid{
  width:min(1540px,90vw) !important;
  margin:0 auto clamp(36px,5vh,60px) !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:12px !important;
}

/* Genre cards specifically */
.standard-view .genre-grid > *,
.standard-view .genre-card{
  min-height:clamp(130px,18vh,190px) !important;
  height:auto !important;
  padding:clamp(20px,2vw,30px) !important;
  border-radius:22px !important;
  display:flex !important;
  align-items:flex-end !important;
  box-sizing:border-box;
}

.standard-view .genre-grid h3,
.standard-view .genre-card h3,
.standard-view .genre-grid strong,
.standard-view .genre-card strong{
  margin:0 !important;
  font-size:clamp(22px,1.55vw,30px) !important;
  line-height:1.05 !important;
}

/* Artist/other subpage cards */
.standard-view .artist-grid > *,
.standard-view .card-grid > *{
  min-width:0;
  box-sizing:border-box;
}

/* Prevent accidental giant decorative heading behind topbar */
.standard-view::before,
.standard-view::after{
  max-width:100vw;
}

/* Laptop / shorter desktop */
@media(max-height:820px) and (min-width:1100px){
  .std-topbar{
    min-height:60px;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  .page-head{
    padding-top:30px !important;
    padding-bottom:22px !important;
  }

  .page-head h1{
    font-size:clamp(40px,5vw,72px) !important;
  }

  .standard-view .genre-grid > *,
  .standard-view .genre-card{
    min-height:120px !important;
  }
}

/* Medium width */
@media(max-width:1200px){
  .standard-view .genre-grid,
  .standard-view .card-grid,
  .standard-view .policy-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  #artists .artist-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .std-topbar{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .page-head{
    width:min(92vw,760px) !important;
    padding-top:30px !important;
  }

  .page-head h1{
    font-size:clamp(38px,10vw,68px) !important;
  }

  .standard-view .genre-grid,
  .standard-view .card-grid,
  .standard-view .policy-grid{
    width:92vw !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #artists .artist-grid{
    width:92vw !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile */
@media(max-width:560px){
  .std-topbar{
    gap:14px;
    padding:12px 16px !important;
  }

  .std-topbar h1{
    font-size:15px !important;
  }

  .page-head{
    width:calc(100vw - 32px) !important;
    padding:26px 0 20px !important;
  }

  .page-head h1{
    font-size:clamp(34px,14vw,56px) !important;
  }

  .page-head p{
    font-size:16px !important;
  }

  .standard-view .genre-grid,
  .standard-view .card-grid,
  .standard-view .policy-grid{
    width:calc(100vw - 32px) !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #artists .artist-grid{
    width:calc(100vw - 28px) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .standard-view .genre-grid > *,
  .standard-view .genre-card{
    min-height:105px !important;
  }
}


/* === v5.5.4 right artist rail readability === */
.artist-rail{
  padding-left:18px !important;
  padding-right:18px !important;
}

.artist-rail .section-head,
.artist-rail .rail-head{
  margin-bottom:14px !important;
}

.artist-rail .section-head h2,
.artist-rail .rail-head h2,
.artist-rail h2{
  font-size:20px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
}

.artist-rail .section-head a,
.artist-rail .rail-head a,
.artist-rail .show-all{
  font-size:13px !important;
  font-weight:700 !important;
}

.artist-list{
  gap:0 !important;
}

.artist-row,
.artist-item{
  min-height:68px !important;
  padding:10px 0 !important;
  gap:12px !important;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.artist-row img,
.artist-item img,
.artist-avatar{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

.artist-row strong,
.artist-item strong,
.artist-name{
  font-size:15px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}

.artist-row span,
.artist-item span,
.artist-meta{
  font-size:12.5px !important;
  line-height:1.3 !important;
  color:#aeb4c8 !important;
}

/* Give the rail a little more breathing room on wide desktops */
@media(min-width:1400px){
  .content-grid{
    grid-template-columns:minmax(0,1fr) 240px !important;
  }

  .artist-rail .section-head h2,
  .artist-rail .rail-head h2,
  .artist-rail h2{
    font-size:21px !important;
  }

  .artist-row strong,
  .artist-item strong,
  .artist-name{
    font-size:16px !important;
  }

  .artist-row span,
  .artist-item span,
  .artist-meta{
    font-size:13px !important;
  }
}

/* Shorter screens: preserve readability, only tighten spacing */
@media(max-height:760px) and (min-width:1050px){
  .artist-row,
  .artist-item{
    min-height:58px !important;
    padding:7px 0 !important;
  }

  .artist-row img,
  .artist-item img,
  .artist-avatar{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  .artist-row strong,
  .artist-item strong,
  .artist-name{
    font-size:14px !important;
  }

  .artist-row span,
  .artist-item span,
  .artist-meta{
    font-size:12px !important;
  }
}


/* === v5.5.5 REAL rising artist selectors === */
.artist-rail{
  padding-left:20px !important;
  padding-right:20px !important;
}

.artist-rail .section-head h2{
  font-size:22px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  margin:0 !important;
}

.rising-list{
  margin-top:16px !important;
  display:grid !important;
  gap:0 !important;
}

.rising-item{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-height:72px !important;
  padding:10px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.rising-item img{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

.rising-item > div{
  min-width:0;
}

.rising-item strong{
  display:block !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  margin-bottom:5px !important;
  color:#fff !important;
}

.rising-item span{
  display:block !important;
  font-size:13px !important;
  line-height:1.25 !important;
  color:#aab1c9 !important;
}

/* Slightly wider rail on large desktop */
@media(min-width:1400px){
  .content-grid{
    grid-template-columns:minmax(0,1fr) 265px !important;
  }

  .artist-rail .section-head h2{
    font-size:23px !important;
  }

  .rising-item strong{
    font-size:17px !important;
  }

  .rising-item span{
    font-size:13.5px !important;
  }
}

/* Short desktop: keep text readable, only tighten rows */
@media(max-height:760px) and (min-width:1050px){
  .rising-item{
    min-height:62px !important;
    padding:7px 0 !important;
  }

  .rising-item img{
    width:42px !important;
    height:42px !important;
    flex-basis:42px !important;
  }

  .rising-item strong{
    font-size:15px !important;
  }

  .rising-item span{
    font-size:12.5px !important;
  }
}


/* === v5.5.6 wider left sidebar === */
.app-shell{
  grid-template-columns:clamp(175px,11vw,210px) 1fr !important;
}

.sidebar{
  padding-left:16px !important;
  padding-right:16px !important;
}

.sidebar nav button,
.sidebar .nav button,
.sidebar > button:not(.creator-btn),
.sidebar .creator-btn,
.sidebar [data-view="upload"],
.sidebar button:last-child{
  white-space:nowrap !important;
}

.sidebar .creator-btn,
.sidebar [data-view="upload"],
.sidebar button:last-child{
  min-width:0;
  justify-content:flex-start !important;
}

.sidebar .creator-btn br,
.sidebar [data-view="upload"] br{
  display:none !important;
}

/* Large desktop */
@media(min-width:1500px){
  .app-shell{
    grid-template-columns:200px 1fr !important;
  }
}

/* Laptop / shorter desktop */
@media(max-height:820px) and (min-width:1000px){
  .app-shell{
    grid-template-columns:180px 1fr !important;
  }
}

/* Very low-height screens still keep text on one line */
@media(max-height:700px) and (min-width:1000px){
  .app-shell{
    grid-template-columns:172px 1fr !important;
  }

  .sidebar nav button,
  .sidebar .nav button,
  .sidebar > button:not(.creator-btn),
  .sidebar .creator-btn,
  .sidebar [data-view="upload"],
  .sidebar button:last-child{
    font-size:13px !important;
  }
}


/* === v5.5.7 keep right CTA fully visible === */
.artist-rail{
  min-height:0 !important;
  overflow:hidden !important;
  padding-bottom:10px !important;
}

.rising-list{
  flex:0 1 auto !important;
  min-height:0 !important;
}

.rail-cta{
  flex:0 0 auto !important;
  margin-top:auto !important;
  margin-bottom:0 !important;
  width:clamp(92px,7vw,112px) !important;
  height:clamp(92px,7vw,112px) !important;
  padding:10px !important;
  font-size:10px !important;
  line-height:1.3 !important;
  box-sizing:border-box !important;
}

/* Short desktop / laptop heights */
@media(max-height:820px) and (min-width:1050px){
  .rail-cta{
    width:94px !important;
    height:94px !important;
    font-size:9px !important;
    padding:8px !important;
  }
}

/* Very short desktop */
@media(max-height:720px) and (min-width:1050px){
  .rail-cta{
    width:82px !important;
    height:82px !important;
    font-size:8px !important;
    padding:7px !important;
  }

  .rising-item{
    min-height:54px !important;
    padding:5px 0 !important;
  }
}


/* === v5.5.8 hard-anchor right CTA above player === */
.artist-rail{
  position:relative !important;
  overflow:hidden !important;
  padding-bottom:132px !important;
  box-sizing:border-box !important;
}

.rising-list{
  min-height:0 !important;
  overflow:hidden !important;
}

.rail-cta{
  position:absolute !important;
  left:50% !important;
  bottom:14px !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  flex:none !important;
  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  min-height:108px !important;
  max-width:108px !important;
  max-height:108px !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
  z-index:4 !important;
}

/* On lower laptop screens reserve less room but keep CTA fully inside rail */
@media(max-height:820px) and (min-width:1050px){
  .artist-rail{
    padding-bottom:108px !important;
  }

  .rail-cta{
    bottom:10px !important;
    width:88px !important;
    height:88px !important;
    min-width:88px !important;
    min-height:88px !important;
    max-width:88px !important;
    max-height:88px !important;
    font-size:8.5px !important;
    line-height:1.25 !important;
  }
}

@media(max-height:700px) and (min-width:1050px){
  .artist-rail{
    padding-bottom:92px !important;
  }

  .rail-cta{
    bottom:8px !important;
    width:76px !important;
    height:76px !important;
    min-width:76px !important;
    min-height:76px !important;
    max-width:76px !important;
    max-height:76px !important;
    font-size:7.5px !important;
  }
}


/* === v5.5.9 final CTA lift / player overlap fix === */

/* Reserve a guaranteed safe zone above player */
.artist-rail{
  position:relative !important;
  padding-bottom:158px !important;
  overflow:hidden !important;
  z-index:5 !important;
}

/* Keep player underneath the rail CTA layer */
.player{
  position:relative !important;
  z-index:2 !important;
}

/* Lift CTA clearly above player boundary */
.rail-cta{
  position:absolute !important;
  left:50% !important;
  bottom:38px !important;
  transform:translateX(-50%) !important;
  z-index:25 !important;

  width:108px !important;
  height:108px !important;
  min-width:108px !important;
  min-height:108px !important;
  max-width:108px !important;
  max-height:108px !important;

  margin:0 !important;
  flex:none !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
}

/* Standard laptop */
@media(max-height:820px) and (min-width:1050px){
  .artist-rail{
    padding-bottom:132px !important;
  }

  .rail-cta{
    bottom:30px !important;
    width:92px !important;
    height:92px !important;
    min-width:92px !important;
    min-height:92px !important;
    max-width:92px !important;
    max-height:92px !important;
  }
}

/* Short laptop */
@media(max-height:720px) and (min-width:1050px){
  .artist-rail{
    padding-bottom:114px !important;
  }

  .rail-cta{
    bottom:24px !important;
    width:80px !important;
    height:80px !important;
    min-width:80px !important;
    min-height:80px !important;
    max-width:80px !important;
    max-height:80px !important;
  }
}


/* === v5.6 FI / EN / SV language selector === */
.language-switcher{
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(10,6,35,.68);
  backdrop-filter:blur(12px);
  flex:0 0 auto;
  z-index:80;
}
.language-switcher button{
  border:0;
  min-width:34px;
  height:30px;
  padding:0 9px;
  border-radius:999px;
  background:transparent;
  color:#aeb4c8;
  font:700 12px/1 Inter,Arial,sans-serif;
  cursor:pointer;
}
.language-switcher button:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}
.language-switcher button.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(255,62,207,.85),rgba(95,76,255,.88));
  box-shadow:0 4px 14px rgba(124,77,255,.24);
}

/* Login gate needs language selection too */
.auth-locked .language-switcher{
  position:fixed;
  top:18px;
  right:18px;
  z-index:22000;
}

/* In normal app mode, keep language selector compact in top controls */
body:not(.auth-locked) .language-switcher{
  position:fixed;
  top:26px;
  right:360px;
}

@media(max-width:1250px){
  body:not(.auth-locked) .language-switcher{
    right:300px;
  }
}
@media(max-width:900px){
  body:not(.auth-locked) .language-switcher{
    top:14px;
    right:14px;
  }
}


/* === v5.6.1 language selector moved into sidebar === */
.language-switcher,
.auth-locked .language-switcher,
body:not(.auth-locked) .language-switcher{
  position:static !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  transform:none !important;
}

.sidebar-language{
  width:max-content;
  margin:14px 0 10px 0 !important;
  align-self:flex-start;
  display:flex !important;
  gap:2px !important;
  padding:3px !important;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  z-index:auto !important;
}

.sidebar-language button{
  min-width:31px !important;
  height:27px !important;
  padding:0 7px !important;
  font-size:11px !important;
  border-radius:999px !important;
}

.sidebar-language button.active{
  background:linear-gradient(135deg,#ff3ecf,#6d4cff) !important;
  color:#fff !important;
}

/* Keep the selector compact on shorter screens */
@media(max-height:820px) and (min-width:1000px){
  .sidebar-language{
    margin:8px 0 5px 0 !important;
  }
  .sidebar-language button{
    min-width:29px !important;
    height:24px !important;
    font-size:10px !important;
  }
}

/* Login gate: keep same selector in the sidebar/background app;
   auth modal remains accessible above the gate. */
.auth-locked .sidebar-language{
  opacity:1 !important;
}


/* === v5.6.2 tidy top-right controls === */

/* Keep the whole control row away from the handwritten hero text */
.top-controls,
.top-actions,
.top-row-actions{
  position:absolute !important;
  top:18px !important;
  right:255px !important;
  z-index:90 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
}

/* Shared visual language */
.top-control,
.pro-btn,
#loginBtn,
#logoutBtn,
.user-chip{
  box-sizing:border-box !important;
  height:38px !important;
  min-height:38px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(10,7,36,.72) !important;
  backdrop-filter:blur(12px) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
  color:#fff !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease !important;
}

.top-control:hover,
.pro-btn:hover,
#loginBtn:hover,
#logoutBtn:hover,
.user-chip:hover{
  transform:translateY(-1px) !important;
  background:rgba(22,16,58,.88) !important;
  border-color:rgba(255,255,255,.28) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.24) !important;
}

/* Pro gets a clean pill shape */
.pro-btn,
.pro-control{
  min-width:86px !important;
  padding:0 16px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  font-size:15px !important;
  font-weight:700 !important;
  color:#ffc94a !important;
}

/* All icon buttons same size */
#loginBtn,
#logoutBtn,
.icon-control{
  width:38px !important;
  min-width:38px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:inline-grid !important;
  place-items:center !important;
  font-size:16px !important;
  line-height:1 !important;
}

/* Profile chip becomes a clean compact circle */
.user-chip,
.profile-control{
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

.user-chip #userPhoto,
.profile-control #userPhoto,
.user-chip img{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  margin:0 !important;
}

.user-chip #userName,
.profile-control #userName{
  display:none !important;
}

/* Prevent old status labels/badges from bleeding into the hero */
.top-controls .status,
.top-actions .status,
.top-row-actions .status,
.user-chip small,
.user-chip span:not(#userName){
  display:none !important;
}

/* Give the hero copy a clear zone */
.visual-layer .handline,
.hero-handline,
.handline{
  max-width:340px !important;
  margin-right:110px !important;
}

/* Large desktop */
@media(min-width:1500px){
  .top-controls,
  .top-actions,
  .top-row-actions{
    right:300px !important;
  }
}

/* Smaller desktop */
@media(max-width:1350px) and (min-width:1000px){
  .top-controls,
  .top-actions,
  .top-row-actions{
    top:14px !important;
    right:220px !important;
    gap:6px !important;
  }

  .top-control,
  .pro-btn,
  #loginBtn,
  #logoutBtn,
  .user-chip{
    height:34px !important;
    min-height:34px !important;
  }

  #loginBtn,
  #logoutBtn,
  .icon-control,
  .user-chip,
  .profile-control{
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
  }

  .user-chip #userPhoto,
  .profile-control #userPhoto,
  .user-chip img{
    width:28px !important;
    height:28px !important;
  }

  .pro-btn,
  .pro-control{
    min-width:74px !important;
    padding:0 12px !important;
    font-size:13px !important;
  }
}

/* Mobile/tablet: controls remain reachable but don't sit over hero art */
@media(max-width:999px){
  .top-controls,
  .top-actions,
  .top-row-actions{
    position:static !important;
    margin-left:auto !important;
    justify-content:flex-end !important;
  }
}


/* === v5.6.5 clear top navigation === */

.top-controls{
  gap:10px !important;
}

.clear-control{
  height:38px !important;
  min-height:38px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(10,7,36,.76) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:0 15px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  font:700 13px/1 Inter,Arial,sans-serif !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  box-shadow:0 8px 22px rgba(0,0,0,.16) !important;
  transition:.18s ease !important;
}

.clear-control:hover{
  transform:translateY(-1px) !important;
  background:rgba(28,20,66,.90) !important;
  border-color:rgba(255,255,255,.28) !important;
}

.pro.clear-control,
.top-controls .pro{
  color:#ffc94a !important;
  min-width:auto !important;
}

.clear-profile{
  height:38px !important;
  min-height:38px !important;
  max-width:170px !important;
  padding:3px 11px 3px 4px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(10,7,36,.76) !important;
  display:none;
  align-items:center !important;
  gap:8px !important;
  color:#fff !important;
  box-sizing:border-box !important;
}

.clear-profile.show{
  display:inline-flex !important;
}

.clear-profile img{
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  flex:0 0 30px !important;
}

.clear-profile #userName{
  display:block !important;
  max-width:112px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12px !important;
  font-weight:700 !important;
}

/* Override earlier circular button rules */
#loginBtn.login-text-btn,
#logoutBtn.logout-text-btn{
  width:auto !important;
  min-width:auto !important;
  border-radius:999px !important;
  padding:0 15px !important;
  display:inline-flex !important;
}

/* Logged-in state stays compact */
#logoutBtn.logout-text-btn{
  padding-left:13px !important;
  padding-right:13px !important;
}

/* On smaller desktops, keep text but tighten */
@media(max-width:1350px) and (min-width:1000px){
  .clear-control{
    height:34px !important;
    min-height:34px !important;
    padding:0 11px !important;
    font-size:12px !important;
  }

  .clear-profile{
    height:34px !important;
    min-height:34px !important;
    max-width:145px !important;
  }

  .clear-profile img{
    width:27px !important;
    height:27px !important;
    flex-basis:27px !important;
  }
}


/* === v5.6.6 header layout reset === */

/* Reset earlier conflicting absolute positioning rules */
.top-controls,
.top-actions,
.top-row-actions,
.header-controls{
  position:static !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
  transform:none !important;
}

/* The top row becomes a clean 2-column header */
.main-area .top-row{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto !important;
  grid-template-areas:
    "headline controls"
    "search   controls";
  column-gap:22px !important;
  row-gap:10px !important;
  align-items:start !important;
  padding-right:0 !important;
}

/* Left side: title */
.main-area .top-row > h1,
.main-area .top-row .hero-title,
.main-area .top-row .headline{
  grid-area:headline !important;
  min-width:0 !important;
  margin:0 !important;
  max-width:760px !important;
  position:relative !important;
  z-index:3 !important;
}

/* Search stays directly under title */
.main-area .top-row .searchbox,
.main-area .top-row .search-wrap,
.main-area .top-row input[type="search"]{
  grid-area:search !important;
  width:min(100%, 520px) !important;
  margin:0 !important;
  position:relative !important;
  z-index:3 !important;
}

/* Controls get their own clean area on the right */
.header-controls{
  grid-area:controls !important;
  align-self:start !important;
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  z-index:20 !important;
  padding-top:4px !important;
  padding-right:10px !important;
}

/* Keep only the controls that are relevant in current auth state */
#loginBtn[hidden],
#logoutBtn[hidden],
#userChip[hidden]{
  display:none !important;
}

/* Ensure the user chip does not inherit old circular-only sizing */
.header-controls .user-chip,
.header-controls .clear-profile{
  width:auto !important;
  min-width:auto !important;
  max-width:180px !important;
}

/* Hero visual remains behind header and cannot overlap left title */
.visual-layer{
  z-index:1 !important;
  pointer-events:none !important;
}

.main-area .top-row{
  position:relative !important;
  z-index:10 !important;
}

/* Give right side enough breathing room but never cover the title */
@media(min-width:1500px){
  .main-area .top-row{
    grid-template-columns:minmax(640px, 1fr) auto !important;
  }
}

@media(max-width:1350px) and (min-width:1000px){
  .main-area .top-row{
    grid-template-columns:minmax(520px, 1fr) auto !important;
    column-gap:14px !important;
  }

  .header-controls{
    gap:6px !important;
    padding-right:4px !important;
  }

  .header-controls .clear-control{
    padding-left:11px !important;
    padding-right:11px !important;
    font-size:12px !important;
  }
}

/* Short desktop: keep controls on same row but compact */
@media(max-height:760px) and (min-width:1000px){
  .main-area .top-row{
    row-gap:7px !important;
  }

  .header-controls{
    padding-top:0 !important;
  }
}

/* Tablet/mobile: controls drop below title/search instead of overlapping */
@media(max-width:999px){
  .main-area .top-row{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "headline"
      "search"
      "controls";
    row-gap:10px !important;
  }

  .header-controls{
    justify-self:start !important;
    padding:0 !important;
    flex-wrap:wrap !important;
  }
}

/* Prevent old style from showing sign-in + sign-out together */
body:not(.auth-locked) #loginBtn[hidden],
body:not(.auth-locked) #logoutBtn[hidden]{
  display:none !important;
}


/* === v5.6.7 stacked top controls === */

/* Right-side controls in a vertical stack */
.header-controls,
.top-controls,
.top-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:7px !important;
  min-width:155px !important;
  max-width:190px !important;
  padding-top:2px !important;
  padding-right:8px !important;
}

/* Each control spans the same width for visual clarity */
.header-controls .clear-control,
.header-controls .pro,
.header-controls #loginBtn,
.header-controls #logoutBtn,
.header-controls .clear-profile,
.header-controls .user-chip{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:36px !important;
  min-height:36px !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;
}

/* Pro */
.header-controls .pro{
  padding-left:14px !important;
  padding-right:14px !important;
}

/* Profile chip */
.header-controls .clear-profile,
.header-controls .user-chip{
  padding:3px 10px 3px 4px !important;
  gap:8px !important;
}

.header-controls .clear-profile #userName,
.header-controls .user-chip #userName{
  display:block !important;
  max-width:125px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Login/logout */
.header-controls #loginBtn,
.header-controls #logoutBtn{
  padding-left:14px !important;
  padding-right:14px !important;
}

/* Slightly reduce right-column footprint */
.main-area .top-row{
  grid-template-columns:minmax(0, 1fr) 175px !important;
  column-gap:18px !important;
}

/* Prevent controls from colliding with hero art */
.header-controls{
  position:relative !important;
  z-index:30 !important;
  background:rgba(8,5,28,.28);
  border-radius:18px;
}

/* On shorter desktops, compact further */
@media(max-height:820px) and (min-width:1000px){
  .header-controls,
  .top-controls,
  .top-actions{
    min-width:145px !important;
    max-width:165px !important;
    gap:5px !important;
  }

  .header-controls .clear-control,
  .header-controls .pro,
  .header-controls #loginBtn,
  .header-controls #logoutBtn,
  .header-controls .clear-profile,
  .header-controls .user-chip{
    height:32px !important;
    min-height:32px !important;
    font-size:12px !important;
  }

  .main-area .top-row{
    grid-template-columns:minmax(0, 1fr) 155px !important;
  }
}

/* On mobile, stack stays vertical but moves below search */
@media(max-width:999px){
  .header-controls,
  .top-controls,
  .top-actions{
    width:min(100%,220px) !important;
    min-width:0 !important;
    max-width:220px !important;
    align-self:start !important;
  }

  .main-area .top-row{
    grid-template-columns:1fr !important;
  }
}


/* === v5.6.8 center stacked account controls === */
.main-area{
  position:relative !important;
}

/* Move the account/control stack to the visual center of the main view */
.header-controls,
.top-controls,
.top-actions{
  position:absolute !important;
  top:18px !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:7px !important;

  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  z-index:60 !important;

  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* Keep the header title/search independent from controls */
.main-area .top-row{
  display:block !important;
  position:relative !important;
  z-index:10 !important;
  padding-right:0 !important;
}

.main-area .top-row > h1,
.main-area .top-row .hero-title,
.main-area .top-row .headline{
  max-width:760px !important;
  margin-right:0 !important;
}

.main-area .top-row .searchbox,
.main-area .top-row .search-wrap,
.main-area .top-row input[type="search"]{
  width:min(100%,520px) !important;
  margin-top:12px !important;
}

/* Same-width stacked controls */
.header-controls .clear-control,
.header-controls .pro,
.header-controls #loginBtn,
.header-controls #logoutBtn,
.header-controls .clear-profile,
.header-controls .user-chip{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  box-sizing:border-box !important;
}

/* Compact on medium desktop */
@media(max-width:1400px) and (min-width:1000px){
  .header-controls,
  .top-controls,
  .top-actions{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
    top:14px !important;
  }

  .header-controls .clear-control,
  .header-controls .pro,
  .header-controls #loginBtn,
  .header-controls #logoutBtn,
  .header-controls .clear-profile,
  .header-controls .user-chip{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
  }
}

/* Mobile: return controls to normal flow */
@media(max-width:999px){
  .header-controls,
  .top-controls,
  .top-actions{
    position:static !important;
    transform:none !important;
    width:min(100%,220px) !important;
    min-width:0 !important;
    max-width:220px !important;
    margin-top:12px !important;
  }

  .header-controls .clear-control,
  .header-controls .pro,
  .header-controls #loginBtn,
  .header-controls #logoutBtn,
  .header-controls .clear-profile,
  .header-controls .user-chip{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}


/* === v5.6.9 shift account controls right === */
.header-controls,
.top-controls,
.top-actions{
  left:64% !important;
  transform:translateX(-50%) !important;
}

/* Large desktop: a little farther right */
@media(min-width:1500px){
  .header-controls,
  .top-controls,
  .top-actions{
    left:66% !important;
  }
}

/* Medium desktop */
@media(max-width:1499px) and (min-width:1200px){
  .header-controls,
  .top-controls,
  .top-actions{
    left:63% !important;
  }
}

/* Smaller desktop: keep away from title/search */
@media(max-width:1199px) and (min-width:1000px){
  .header-controls,
  .top-controls,
  .top-actions{
    left:61% !important;
  }
}

/* Mobile/tablet stays normal flow */
@media(max-width:999px){
  .header-controls,
  .top-controls,
  .top-actions{
    left:auto !important;
    transform:none !important;
  }
}


/* === v5.6.10 shorter search field === */
.main-area .top-row .searchbox,
.main-area .top-row .search-wrap,
.main-area .top-row input[type="search"]{
  width:min(100%, 430px) !important;
  max-width:430px !important;
}

@media(max-width:1350px) and (min-width:1000px){
  .main-area .top-row .searchbox,
  .main-area .top-row .search-wrap,
  .main-area .top-row input[type="search"]{
    width:min(100%, 390px) !important;
    max-width:390px !important;
  }
}

@media(max-width:999px){
  .main-area .top-row .searchbox,
  .main-area .top-row .search-wrap,
  .main-area .top-row input[type="search"]{
    width:100% !important;
    max-width:none !important;
  }
}


/* === v5.6.11 clean single-layer hero === */
/* The old full-page mockup contained its own UI and caused double UI layers.
   This hero uses only a dedicated person crop. */
.visual-layer{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:42% !important;
  height:185px !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:
    radial-gradient(circle at 80% 25%, rgba(255,61,186,.16), transparent 42%),
    radial-gradient(circle at 58% 25%, rgba(0,232,255,.08), transparent 38%);
}

.visual-layer img{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  width:auto !important;
  height:100% !important;
  max-width:52% !important;
  object-fit:contain !important;
  object-position:right top !important;
  clip-path:none !important;
  filter:saturate(1.08) contrast(1.04) !important;
  opacity:1 !important;
}

.visual-layer .handline{
  position:absolute !important;
  left:7% !important;
  top:42px !important;
  width:52% !important;
  max-width:320px !important;
  margin:0 !important;
  z-index:2 !important;
  font-size:clamp(18px,1.55vw,28px) !important;
  line-height:1.15 !important;
  transform:rotate(-4deg) !important;
}

/* Keep the live artist rail fully separate from the hero artwork */
.artist-rail{
  position:relative !important;
  z-index:5 !important;
  background:rgba(8,5,28,.16);
}

/* Prevent the hero from reaching down into the live content grid */
.content-grid{
  position:relative !important;
  z-index:4 !important;
}

@media(max-height:760px) and (min-width:1050px){
  .visual-layer{
    height:165px !important;
  }
  .visual-layer .handline{
    top:34px !important;
    font-size:clamp(17px,1.4vw,24px) !important;
  }
}

@media(max-width:1050px){
  .visual-layer{
    display:none !important;
  }
}


/* === v5.6.12 profile avatar fix === */
.header-controls .clear-profile,
.header-controls .user-chip{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  padding:3px 12px 3px 4px !important;
  overflow:hidden !important;
}

.header-controls .clear-profile img,
.header-controls .user-chip img,
.header-controls #userPhoto{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  flex:0 0 30px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:linear-gradient(135deg,#ff3ecf,#6d4cff) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-sizing:border-box !important;
}

.header-controls #userName{
  display:block !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  line-height:1.1 !important;
}

/* If Google profile image is unavailable, keep a clean visible circle */
.header-controls #userPhoto:not([src]),
.header-controls #userPhoto[src=""]{
  background:
    radial-gradient(circle at 35% 35%,rgba(255,255,255,.35),transparent 22%),
    linear-gradient(135deg,#ff3ecf,#00e8ff) !important;
}

/* Prevent old styles from shrinking/cropping the avatar */
.profile-control,
.user-chip{
  border-radius:999px !important;
}


/* === v5.6.13 softer integrated hero === */
.visual-layer{
  top:0 !important;
  right:0 !important;
  width:38% !important;
  height:190px !important;
  overflow:visible !important;
  background:
    radial-gradient(circle at 75% 35%,rgba(255,61,186,.16),transparent 42%),
    radial-gradient(circle at 62% 42%,rgba(0,232,255,.08),transparent 45%) !important;
}

/* Remove the "boxed image" feel */
.visual-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:
    linear-gradient(90deg,rgba(7,3,25,1) 0%,rgba(7,3,25,.45) 16%,rgba(7,3,25,0) 42%),
    linear-gradient(180deg,rgba(7,3,25,0) 55%,rgba(7,3,25,.55) 82%,rgba(7,3,25,1) 100%);
}

/* Hero person is smaller, pushed right and softly blended */
.visual-layer img{
  top:4px !important;
  right:8px !important;
  height:180px !important;
  width:auto !important;
  max-width:62% !important;
  object-fit:contain !important;
  object-position:right center !important;
  border-radius:0 !important;
  clip-path:none !important;
  box-shadow:none !important;
  opacity:.96 !important;
  -webkit-mask-image:
    linear-gradient(to left, black 68%, rgba(0,0,0,.88) 80%, transparent 100%);
  mask-image:
    linear-gradient(to left, black 68%, rgba(0,0,0,.88) 80%, transparent 100%);
}

/* Keep slogan visually separate from person */
.visual-layer .handline{
  left:0 !important;
  top:42px !important;
  width:54% !important;
  max-width:300px !important;
  z-index:5 !important;
  margin:0 !important;
}

/* Artist rail starts below/away from hero visual */
.artist-rail{
  padding-top:8px !important;
}

/* Wide desktop: preserve breathing room */
@media(min-width:1500px){
  .visual-layer{
    width:36% !important;
    height:195px !important;
  }

  .visual-layer img{
    height:186px !important;
    max-width:60% !important;
  }
}

/* Lower laptop screens */
@media(max-height:760px) and (min-width:1050px){
  .visual-layer{
    height:168px !important;
    width:36% !important;
  }

  .visual-layer img{
    height:160px !important;
  }

  .visual-layer .handline{
    top:34px !important;
    max-width:260px !important;
  }
}


/* ==========================================================
   v7.6.41 — Compact genre selector
   ========================================================== */
#genres .v661-genre-grid,
#genres .genre-grid{
  width:min(1180px,calc(100vw - 96px));
  margin:0 auto 34px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:8px;
  row-gap:5px;
}

#genres .genre-card{
  min-width:0;
  min-height:40px;
  height:40px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:10px;
  background:rgba(255,255,255,.022);
  color:#c7ccda;
  text-align:left;
  cursor:pointer;
  transition:
    border-color .14s ease,
    background .14s ease,
    transform .14s ease;
}

#genres .genre-card:hover{
  border-color:rgba(0,232,255,.16);
  background:rgba(0,232,255,.035);
}

#genres .genre-card:active{
  transform:translateY(1px);
}

#genres .genre-check{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border:1.5px solid rgba(191,205,236,.62);
  background:rgba(255,255,255,.045);
  border-radius:4px;
  background:rgba(255,255,255,.025);
  color:#07111d;
  font-size:12px;
  font-weight:900;
  line-height:1;
}

#genres .genre-label{
  min-width:0;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:600;
}

#genres .genre-card.active{
  border-color:rgba(0,232,255,.28);
  background:
    linear-gradient(135deg,rgba(0,232,255,.07),rgba(129,77,255,.09));
  color:#fff;
}

#genres .genre-card.active .genre-check{
  border-color:#62efff;
  background:#62efff;
  color:#091021;
  box-shadow:0 0 12px rgba(98,239,255,.18);
}

@media(max-width:1100px) and (min-width:821px){
  #genres .v661-genre-grid,
  #genres .genre-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:820px){
  #genres .v661-genre-grid,
  #genres .genre-grid{
    width:calc(100vw - 28px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:22px;
  }

  #genres .genre-card{
    min-height:38px;
    height:38px;
    grid-template-columns:20px minmax(0,1fr);
    gap:7px;
    padding:0 9px;
    border-radius:9px;
  }

  #genres .genre-check{
    width:17px;
    height:17px;
    font-size:11px;
  }

  #genres .genre-label{
    font-size:9.5px;
  }
}

@media(max-width:380px){
  #genres .genre-card{
    padding-left:7px;
    padding-right:7px;
    gap:6px;
  }

  #genres .genre-label{
    font-size:9px;
  }
}