/* =========================================================
   CANTAIMY v6.0 — CLEAN HOMEPAGE
   Homepage-only architecture. Legacy subpages remain intact.
   ========================================================= */

.v6-home{
  --v6-bg:#070319;
  --v6-panel:#0e0929;
  --v6-line:rgba(255,255,255,.09);
  --v6-muted:#aeb4cc;
  --v6-cyan:#00e8ff;
  --v6-pink:#ff3ecf;
  --v6-purple:#7551ff;
  --v6-orange:#ff8e39;
  width:100vw;
  height:100dvh;
  min-height:640px;
  overflow:hidden;
  background:
    radial-gradient(circle at 74% 0%,rgba(121,65,255,.11),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(255,62,207,.08),transparent 24%),
    #050116;
  padding:10px 16px;
  box-sizing:border-box;
  color:#fff;
}

.v6-home *{box-sizing:border-box}

.v6-shell{
  width:min(1780px,100%);
  height:calc(100dvh - 20px);
  min-height:620px;
  margin:0 auto;
  border:1px solid rgba(123,88,255,.34);
  border-radius:30px;
  overflow:hidden;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) 86px;
  background:
    linear-gradient(135deg,rgba(18,12,56,.96),rgba(5,2,23,.99));
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}

/* ---------- Sidebar ---------- */
.v6-sidebar{
  grid-column:1;
  grid-row:1 / 3;
  border-right:1px solid var(--v6-line);
  padding:18px 14px 14px;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

.v6-brand{
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 4px;
  font:800 15px/1 Montserrat,Inter,sans-serif;
  letter-spacing:-.02em;
}
.v6-brand-mark{
  color:var(--v6-pink);
  font-size:23px;
  line-height:1;
}

.v6-language{
  position:static!important;
  width:max-content;
  margin:13px 0 11px!important;
  padding:4px!important;
  display:flex!important;
  gap:3px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.04)!important;
}
.v6-language button{
  width:37px!important;
  height:30px!important;
  min-width:37px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  color:#9ea5bf!important;
  font:800 11px/1 Inter,sans-serif!important;
}
.v6-language button.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--v6-pink),var(--v6-purple))!important;
  box-shadow:0 6px 16px rgba(117,81,255,.28)!important;
}

.v6-nav{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-height:0;
}
.v6-nav button{
  width:100%;
  min-height:36px;
  padding:0 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#d8dae6;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
  white-space:nowrap;
  font:500 14px/1 Inter,sans-serif;
  cursor:pointer;
}
.v6-nav button:hover{
  background:rgba(255,255,255,.05);
  color:#fff;
}
.v6-nav button.active,
.v6-nav button.active-view{
  background:linear-gradient(90deg,rgba(0,190,255,.24),rgba(21,39,90,.20));
  color:var(--v6-cyan);
}
.v6-nav-divider{
  height:1px;
  margin:5px 9px 4px;
  background:rgba(255,255,255,.08);
  flex:0 0 auto;
}
.v6-nav-divider-info{
  margin-top:5px;
}

/* ---------- Main ---------- */
.v6-main{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:174px minmax(0,1fr);
  overflow:hidden;
}

/* ---------- Header ---------- */
.v6-header{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(430px,1fr) 178px 390px;
  gap:22px;
  align-items:start;
  padding:18px 20px 10px 24px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.03);
}

.v6-intro{
  position:relative;
  z-index:5;
  min-width:0;
}
.v6-intro h1{
  margin:0;
  font:800 clamp(30px,2.35vw,43px)/.98 Montserrat,Inter,sans-serif;
  letter-spacing:-.045em;
  color:#fff;
}
.v6-search{
  margin-top:15px;
  width:430px;
  max-width:100%;
  height:44px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  color:#9fa7c2;
  background:rgba(7,4,30,.42);
  font-size:13px;
}
.v6-search-icon{font-size:16px}

/* account controls live in their own real grid column */
.v6-account{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:178px!important;
  min-width:178px!important;
  max-width:178px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  z-index:12;
  padding-top:2px;
  background:transparent!important;
}
.v6-account-btn,
.v6-user-chip{
  width:178px!important;
  height:36px!important;
  min-height:36px!important;
  max-width:178px!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:999px!important;
  background:rgba(7,4,28,.72)!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:0 14px!important;
  font:700 12px/1 Inter,sans-serif!important;
  box-shadow:none!important;
}
.v6-account-btn:hover{
  background:rgba(25,17,64,.9)!important;
  border-color:rgba(255,255,255,.25)!important;
}
.v6-pro{color:#ffc94a!important}
.v6-user-chip{
  padding:3px 10px 3px 4px!important;
  gap:8px!important;
  overflow:hidden!important;
}
.v6-user-chip:not(.show){display:none!important}
.v6-user-chip img{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  border:1px solid rgba(255,255,255,.18)!important;
}
.v6-user-chip #userName{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
}

/* ---------- hero pane ---------- */
.v6-hero{
  position:relative;
  height:152px;
  min-width:0;
  overflow:hidden;
  border-radius:0 22px 0 28px;
  background:
    radial-gradient(circle at 72% 42%,rgba(255,43,175,.20),transparent 35%),
    linear-gradient(90deg,rgba(10,5,34,.25),rgba(10,5,34,0));
}
.v6-hero img{
  position:absolute!important;
  top:0!important;
  right:0!important;
  height:152px!important;
  width:auto!important;
  max-width:54%!important;
  object-fit:contain!important;
  object-position:right center!important;
  border-radius:0!important;
  clip-path:none!important;
  mask-image:linear-gradient(to left,#000 75%,transparent 100%);
  -webkit-mask-image:linear-gradient(to left,#000 75%,transparent 100%);
}
.v6-hero-copy{
  position:absolute;
  left:0;
  top:28px;
  z-index:2;
  width:58%;
  transform:rotate(-4deg);
}
.v6-hero-copy em,
.v6-hero-copy strong{
  display:block;
  font-family:Inter,sans-serif;
  font-style:italic;
  line-height:1.02;
}
.v6-hero-copy em{
  color:var(--v6-cyan);
  font-size:clamp(18px,1.55vw,26px);
  font-weight:800;
}
.v6-hero-copy em b{color:var(--v6-orange)}
.v6-hero-copy strong{
  color:#d45cff;
  font-size:clamp(18px,1.55vw,25px);
  margin-top:5px;
}

/* ---------- content ---------- */
.v6-content{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  border-top:1px solid rgba(255,255,255,.03);
}
.v6-feed{
  min-width:0;
  min-height:0;
  padding:12px 18px 14px 24px;
  overflow:hidden;
}
.v6-artist-rail{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  padding:12px 18px 12px!important;
  border-left:1px solid var(--v6-line);
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.14) transparent;
  background:rgba(7,4,28,.16)!important;
}

.v6-section-head{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.v6-section-head h2{
  margin:0!important;
  font:800 16px/1.1 Montserrat,Inter,sans-serif!important;
  color:#fff!important;
}
.v6-section-head button{
  border:0;
  background:transparent;
  color:var(--v6-cyan);
  font-size:11px;
  cursor:pointer;
}

/* ---------- track cards ---------- */
.v6-track-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  min-width:0;
}
.v6-track-grid .track-card{
  min-width:0;
}
.v6-track-grid .track-cover{
  aspect-ratio:1/1;
  min-height:0!important;
  height:auto!important;
  border-radius:15px!important;
  overflow:hidden!important;
  background-size:cover!important;
  background-position:center!important;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.v6-track-grid .track-card h3{
  margin:7px 0 2px!important;
  font-size:13px!important;
  line-height:1.1!important;
}
.v6-track-grid .track-card p{
  margin:0!important;
  color:#9198b1!important;
  font-size:10px!important;
}
.v6-track-grid .playdot{
  width:35px!important;
  height:35px!important;
  right:8px!important;
  bottom:8px!important;
}

/* ---------- moods ---------- */
.v6-mood-head{
  margin-top:14px;
  margin-bottom:8px;
}
.v6-moods{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:9px!important;
  min-height:0!important;
}
.v6-moods button{
  min-height:66px!important;
  height:66px!important;
  border-radius:14px!important;
  padding:0 8px!important;
  font-size:15px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

/* ---------- artist rail ---------- */
.v6-rising-list{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
.v6-rising-list .rising-item{
  min-height:57px!important;
  padding:7px 0!important;
  gap:10px!important;
}
.v6-rising-list .rising-item img{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  flex:0 0 40px!important;
  object-fit:cover!important;
  border-radius:50%!important;
}
.v6-rising-list .rising-item strong{
  font-size:14px!important;
  line-height:1.1!important;
}
.v6-rising-list .rising-item span{
  margin-top:4px!important;
  font-size:11px!important;
  line-height:1.1!important;
  color:#a7aec6!important;
}

.v6-rail-cta{
  position:absolute!important;
  left:50%!important;
  bottom:14px!important;
  transform:translateX(-50%)!important;
  width:88px!important;
  height:88px!important;
  min-width:88px!important;
  min-height:88px!important;
  max-width:88px!important;
  max-height:88px!important;
  margin:0!important;
  padding:10px!important;
  border-radius:50%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  z-index:5!important;
  font-size:8px!important;
  line-height:1.22!important;
}

/* ---------- player ---------- */
.v6-player{
  grid-column:2;
  grid-row:2;
  position:relative!important;
  z-index:20!important;
  min-height:86px!important;
  height:86px!important;
  display:grid!important;
  grid-template-columns:250px 170px minmax(260px,1fr) 220px!important;
  align-items:center!important;
  gap:14px!important;
  padding:0 18px 0 20px!important;
  border-top:1px solid var(--v6-line)!important;
  background:rgba(5,2,22,.96)!important;
}
.v6-player .player-left img{
  width:48px!important;
  height:48px!important;
  border-radius:11px!important;
}
.v6-player .player-left strong{font-size:13px!important}
.v6-player .player-left span{font-size:10px!important}
.v6-player .play{
  width:52px!important;
  height:52px!important;
}
.v6-player .eq-bars{min-width:0!important}
.v6-player #progress{width:100%!important}

/* ---------- responsive desktop ---------- */
@media(max-width:1450px) and (min-width:1050px){
  .v6-shell{grid-template-columns:178px minmax(0,1fr)}
  .v6-header{
    grid-template-columns:minmax(380px,1fr) 160px 330px;
    gap:16px;
  }
  .v6-account,
  .v6-account-btn,
  .v6-user-chip{
    width:160px!important;
    min-width:160px!important;
    max-width:160px!important;
  }
  .v6-content{grid-template-columns:minmax(0,1fr) 235px}
  .v6-moods button{font-size:13px!important}
}

@media(max-height:760px) and (min-width:1050px){
  .v6-home{padding-top:6px;padding-bottom:6px}
  .v6-shell{
    height:calc(100dvh - 12px);
    grid-template-rows:minmax(0,1fr) 74px;
  }
  .v6-main{grid-template-rows:148px minmax(0,1fr)}
  .v6-header{padding-top:12px}
  .v6-intro h1{font-size:32px}
  .v6-search{height:39px;margin-top:10px}
  .v6-hero,.v6-hero img{height:130px!important}
  .v6-track-grid{gap:9px!important}
  .v6-track-grid .track-card h3{font-size:11px!important}
  .v6-mood-head{margin-top:9px}
  .v6-moods button{height:54px!important;min-height:54px!important;font-size:12px!important}
  .v6-artist-rail{padding-bottom:10px!important}
  .v6-rising-list .rising-item{min-height:49px!important;padding:4px 0!important}
  .v6-rising-list .rising-item img{width:34px!important;height:34px!important;min-width:34px!important}
  .v6-rail-cta{width:72px!important;height:72px!important;min-width:72px!important;min-height:72px!important;max-width:72px!important;max-height:72px!important;font-size:6.8px!important}
  .v6-player{height:74px!important;min-height:74px!important}
}

/* ---------- tablet/mobile ---------- */
@media(max-width:1049px){
  .v6-home{
    height:auto;
    min-height:100dvh;
    overflow:auto;
    padding:0;
  }
  .v6-shell{
    height:auto;
    min-height:100dvh;
    border-radius:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .v6-sidebar{
    grid-column:1;
    grid-row:1;
    height:auto;
    border-right:0;
    border-bottom:1px solid var(--v6-line);
    padding:14px 16px;
  }
  .v6-brand{margin-bottom:8px}
  .v6-language{margin:8px 0!important}
  .v6-nav{
    flex-direction:row;
    overflow-x:auto;
    gap:5px;
  }
  .v6-nav button{
    width:auto;
    flex:0 0 auto;
  }
  .v6-sidebar-bottom{display:none}
  .v6-main{
    grid-column:1;
    grid-row:2;
    display:block;
    overflow:visible;
  }
  .v6-header{
    grid-template-columns:1fr;
    padding:22px 18px;
  }
  .v6-account{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .v6-account-btn,.v6-user-chip{
    width:220px!important;
    min-width:220px!important;
    max-width:220px!important;
  }
  .v6-hero{display:none}
  .v6-content{
    grid-template-columns:1fr;
  }
  .v6-feed{padding:18px}
  .v6-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v6-moods{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v6-artist-rail{
    border-left:0;
    border-top:1px solid var(--v6-line);
    min-height:430px!important;
  }
  .v6-player{
    grid-column:1;
    grid-row:3;
    grid-template-columns:1fr auto!important;
    height:auto!important;
    min-height:86px!important;
  }
  .v6-player .eq-bars,
  .v6-player #progress{display:none!important}
}


/* =========================================================
   v6.0.1 — compact account card
   ========================================================= */

.v6-account{
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
}

.v6-account-card{
  width:100%;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(8,5,31,.58);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

/* profile becomes the visual primary element */
.v6-account-card .v6-user-chip{
  width:100%!important;
  max-width:none!important;
  height:40px!important;
  min-height:40px!important;
  padding:4px 8px 4px 4px!important;
  border:0!important;
  background:transparent!important;
  border-radius:12px!important;
  gap:9px!important;
}

.v6-account-card .v6-user-chip img{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  flex:0 0 32px!important;
}

.v6-account-card .v6-user-chip #userName{
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:700!important;
}

/* logged-out state: one simple sign-in button */
.v6-login-main{
  width:100%;
  height:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 12px/1 Inter,sans-serif;
  cursor:pointer;
}
.v6-login-main:hover{
  background:rgba(255,255,255,.09);
}

/* logged-in actions sit side-by-side under profile */
.v6-account-actions{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:6px;
  margin-top:5px;
}

.v6-mini-action{
  min-width:0;
  height:30px;
  padding:0 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:#dfe2ef;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font:700 10px/1 Inter,sans-serif;
  white-space:nowrap;
  cursor:pointer;
}
.v6-mini-action:hover{
  background:rgba(255,255,255,.075);
  color:#fff;
}
.v6-mini-action.v6-pro{
  color:#ffc94a;
}

/* Keep hidden state absolute: hidden controls must never consume layout space */
.v6-account-card [hidden]{
  display:none!important;
}

/* When signed out, suppress empty action area except Pro */
.v6-account-card #loginBtn:not([hidden]) + .v6-account-actions{
  grid-template-columns:1fr;
}
.v6-account-card #loginBtn:not([hidden]) + .v6-account-actions #logoutBtn{
  display:none!important;
}
.v6-account-card #loginBtn:not([hidden]) + .v6-account-actions .v6-pro{
  width:100%;
}

/* Hero receives a little more room */
.v6-header{
  grid-template-columns:minmax(430px,1fr) 190px 410px!important;
}

@media(max-width:1450px) and (min-width:1050px){
  .v6-account{
    width:172px!important;
    min-width:172px!important;
    max-width:172px!important;
  }
  .v6-header{
    grid-template-columns:minmax(380px,1fr) 172px 345px!important;
  }
}

@media(max-height:760px) and (min-width:1050px){
  .v6-account-card{
    padding:6px;
    border-radius:15px;
  }
  .v6-account-card .v6-user-chip{
    height:36px!important;
    min-height:36px!important;
  }
  .v6-account-card .v6-user-chip img{
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    flex-basis:28px!important;
  }
  .v6-mini-action{height:27px}
}


/* v7.6.37 — desktop rising artists rail */
@media(min-width:821px){
  .v6-artist-rail::-webkit-scrollbar{width:6px}
  .v6-artist-rail::-webkit-scrollbar-track{background:transparent}
  .v6-artist-rail::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:999px;
  }
}