/* ==========================================================
   CANTAIMY v6.1 — Approved homepage composition
   Restores the stronger visual direction from the approved
   homepage while retaining later functional fixes.
   ========================================================== */

.v6-home{
  padding:6px 14px !important;
}

.v6-shell{
  width:min(1810px,100%) !important;
  height:calc(100dvh - 12px) !important;
  grid-template-columns:205px minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) 88px !important;
  border-radius:30px !important;
}

/* ---------- sidebar ---------- */
.v6-sidebar{
  padding:18px 15px 14px !important;
}
.v6-brand{
  font-size:16px !important;
}
.v6-brand-mark{
  font-size:25px !important;
}
.v6-language{
  margin:13px 0 11px!important;
}
.v6-nav button{
  min-height:37px !important;
  font-size:14.5px !important;
}

/* ---------- main visual proportions ---------- */
.v6-main{
  grid-template-rows:185px minmax(0,1fr) !important;
}

.v6-header{
  grid-template-columns:minmax(500px,1fr) 190px 430px !important;
  gap:24px !important;
  padding:20px 22px 12px 26px !important;
}

.v6-intro h1{
  font-size:clamp(38px,2.8vw,52px) !important;
  line-height:.96 !important;
  letter-spacing:-.05em !important;
}

.v6-search{
  width:430px !important;
  height:46px !important;
  margin-top:15px !important;
  font-size:14px !important;
}

/* ---------- compact account card ---------- */
.v6-account{
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  padding-top:4px !important;
}
.v6-account-card{
  padding:7px !important;
  border-radius:16px !important;
  background:rgba(8,5,31,.54) !important;
  box-shadow:none !important;
}
.v6-account-card .v6-user-chip{
  height:39px!important;
  min-height:39px!important;
}
.v6-account-card .v6-user-chip #userName{
  font-size:11.5px!important;
}
.v6-account-actions{
  grid-template-columns:62px minmax(0,1fr) !important;
}
.v6-mini-action{
  height:29px !important;
  font-size:10px !important;
}

/* ---------- hero: strong but clean ---------- */
.v6-hero{
  height:160px !important;
  border-radius:0 24px 0 30px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 76% 42%,rgba(255,48,176,.23),transparent 36%),
    linear-gradient(90deg,rgba(9,5,32,.2),rgba(9,5,32,0)) !important;
}

.v6-hero img{
  height:160px!important;
  max-width:58%!important;
  right:0!important;
  top:0!important;
  -webkit-mask-image:linear-gradient(to left,#000 76%,transparent 100%) !important;
  mask-image:linear-gradient(to left,#000 76%,transparent 100%) !important;
}

.v6-hero-copy{
  left:2px !important;
  top:34px !important;
  width:58% !important;
  transform:rotate(-4deg) !important;
}

.v6-hero-copy em,
.v6-hero-copy strong{
  font-size:clamp(22px,1.7vw,30px) !important;
  line-height:1.02 !important;
}
.v6-hero-copy strong{
  margin-top:8px !important;
}

/* ---------- content split ---------- */
.v6-content{
  grid-template-columns:minmax(0,1fr) 290px !important;
}

.v6-feed{
  padding:14px 18px 14px 26px !important;
}

.v6-section-head{
  height:32px !important;
  margin-bottom:10px !important;
}

.v6-section-head h2{
  font-size:20px !important;
  font-weight:800 !important;
}

.v6-section-head button{
  font-size:12px !important;
  font-weight:700 !important;
}

/* ---------- stronger track cards ---------- */
.v6-track-grid{
  gap:14px !important;
}

.v6-track-grid .track-cover{
  border-radius:16px!important;
  box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
}

.v6-track-grid .track-card h3{
  margin:9px 0 3px!important;
  font-size:15px!important;
  font-weight:800!important;
}

.v6-track-grid .track-card p{
  font-size:11px!important;
  color:#9ba2ba!important;
}

.v6-track-grid .playdot{
  width:38px!important;
  height:38px!important;
  font-size:14px!important;
}

/* ---------- moods restored to bold visual weight ---------- */
.v6-mood-head{
  margin-top:18px !important;
  margin-bottom:10px !important;
}

.v6-moods{
  gap:10px!important;
}

.v6-moods button{
  min-height:76px!important;
  height:76px!important;
  border-radius:15px!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.01em !important;
}

/* ---------- artist rail ---------- */
.v6-artist-rail{
  padding:14px 20px 14px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

.v6-rising-list .rising-item{
  min-height:66px!important;
  padding:9px 0!important;
  gap:12px!important;
}

.v6-rising-list .rising-item img{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  flex-basis:46px!important;
}

.v6-rising-list .rising-item strong{
  font-size:16px!important;
  font-weight:800!important;
}

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

.v6-rail-cta{
  bottom:16px!important;
  width:96px!important;
  height:96px!important;
  min-width:96px!important;
  min-height:96px!important;
  max-width:96px!important;
  max-height:96px!important;
  font-size:8.5px!important;
}

/* ---------- player ---------- */
.v6-player{
  height:88px!important;
  min-height:88px!important;
  grid-template-columns:270px 180px minmax(300px,1fr) 245px!important;
  gap:18px!important;
}

.v6-player .player-left img{
  width:52px!important;
  height:52px!important;
}

.v6-player .player-left strong{
  font-size:14px!important;
}
.v6-player .player-left span{
  font-size:10.5px!important;
}

.v6-player .play{
  width:54px!important;
  height:54px!important;
}

/* ---------- avoid tiny typography on full-HD laptop screens ---------- */
@media(max-height:820px) and (min-width:1100px){
  .v6-main{
    grid-template-rows:165px minmax(0,1fr)!important;
  }

  .v6-header{
    padding-top:14px!important;
  }

  .v6-intro h1{
    font-size:39px!important;
  }

  .v6-search{
    height:42px!important;
    margin-top:11px!important;
  }

  .v6-hero,
  .v6-hero img{
    height:145px!important;
  }

  .v6-section-head h2{
    font-size:18px!important;
  }

  .v6-track-grid .track-card h3{
    font-size:14px!important;
  }

  .v6-track-grid .track-card p{
    font-size:10.5px!important;
  }

  .v6-mood-head{
    margin-top:12px!important;
  }

  .v6-moods button{
    height:64px!important;
    min-height:64px!important;
    font-size:16px!important;
  }

  .v6-rising-list .rising-item{
    min-height:58px!important;
    padding:6px 0!important;
  }

  .v6-rising-list .rising-item img{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    flex-basis:40px!important;
  }

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

  .v6-rising-list .rising-item span{
    font-size:12px!important;
  }

  .v6-rail-cta{
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    min-height:82px!important;
    max-width:82px!important;
    max-height:82px!important;
    font-size:7.4px!important;
  }
}

/* medium width desktop */
@media(max-width:1500px) and (min-width:1050px){
  .v6-shell{
    grid-template-columns:190px minmax(0,1fr)!important;
  }
  .v6-header{
    grid-template-columns:minmax(450px,1fr) 172px 350px!important;
    gap:18px!important;
  }
  .v6-account{
    width:172px!important;
    min-width:172px!important;
    max-width:172px!important;
  }
  .v6-content{
    grid-template-columns:minmax(0,1fr) 255px!important;
  }
  .v6-moods button{
    font-size:15px!important;
  }
}

/* mobile/tablet preserve responsive version */
@media(max-width:1049px){
  .v6-shell{
    grid-template-columns:1fr!important;
  }
  .v6-header{
    grid-template-columns:1fr!important;
  }
  .v6-content{
    grid-template-columns:1fr!important;
  }
  .v6-moods{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}