/* ==========================================================
   CANTAIMY v7.5 — dedicated mobile responsive layer
   Desktop layout remains unchanged above 820px.
   ========================================================== */

.mobile-menu-btn,
.mobile-menu-close,
.mobile-nav-backdrop,
.mobile-top-logo{
  display:none;
}

/* Tablet smoothing */
@media (max-width:1099px) and (min-width:821px){
  body{overflow-x:hidden}
  .v6-shell{
    width:100% !important;
    max-width:none !important;
  }
  .v6-main{
    min-width:0 !important;
  }
  .v6-content{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .v6-artist-rail{
    display:block !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    padding:20px !important;
  }
  .v6-rising-list{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px 18px !important;
  }
}

/* ==========================================================
   PHONE / SMALL TABLET
   ========================================================== */
@media (max-width:820px){

  html,body{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  body{
    background:#07031b !important;
    padding:0 !important;
  }

  body.mobile-menu-open{
    overflow:hidden !important;
  }

  #app,
  .view,
  .standard-view,
  .home-view{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* ---------- mobile navigation ---------- */
  .mobile-menu-btn{
    position:fixed !important;
    top:max(12px,env(safe-area-inset-top)) !important;
    left:12px !important;
    z-index:30024 !important;
    width:42px !important;
    height:42px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:11px !important;
    background:rgba(9,5,31,.90) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.24) !important;
    backdrop-filter:blur(14px) !important;
  }
  .mobile-menu-btn span{
    display:block !important;
    width:18px !important;
    height:2px !important;
    border-radius:3px !important;
    background:#fff !important;
  }

  #home::before{
    content:"" !important;
    position:fixed !important;
    z-index:30000 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:calc(68px + env(safe-area-inset-top)) !important;
    background:rgba(5,2,21,.94) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    backdrop-filter:blur(16px) !important;
    pointer-events:none !important;
  }

  .mobile-top-logo{
    position:fixed !important;
    top:calc(max(12px,env(safe-area-inset-top)) + 7px) !important;
    left:68px !important;
    z-index:30022 !important;
    display:block !important;
    width:138px !important;
    height:auto !important;
    pointer-events:none !important;
  }

  .mobile-menu-close{
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    z-index:2 !important;
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.035) !important;
    color:#fff !important;
    font-size:23px !important;
    cursor:pointer !important;
  }

  .mobile-nav-backdrop:not([hidden]){
    position:fixed !important;
    inset:0 !important;
    z-index:29990 !important;
    display:block !important;
    background:rgba(2,0,12,.72) !important;
    backdrop-filter:blur(5px) !important;
  }

  #home .v6-sidebar{
    position:fixed !important;
    z-index:30000 !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(84vw,320px) !important;
    height:100dvh !important;
    padding:
      calc(18px + env(safe-area-inset-top))
      18px
      calc(18px + env(safe-area-inset-bottom)) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow-y:auto !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease !important;
    background:#0b0627 !important;
    border-right:1px solid rgba(255,255,255,.09) !important;
    box-shadow:24px 0 60px rgba(0,0,0,.45) !important;
  }

  #home .v6-sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  .v68-brand{
    min-height:68px !important;
    padding-right:50px !important;
  }
  .v68-logo{
    width:165px !important;
  }
  .v6-language{
    margin:4px 0 11px !important;
    width:max-content !important;
  }
  .v6-nav{
    display:flex !important;
    flex-direction:column !important;
    gap:1px !important;
  }
  .v6-nav button{
    min-height:40px !important;
    width:100% !important;
    justify-content:flex-start !important;
    padding:0 10px !important;
    font-size:14px !important;
    border-radius:9px !important;
  }
  .v6-nav-divider{
    margin:5px 8px 4px !important;
  }

  /* ---------- home shell ---------- */
  .v6-shell{
    width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    max-width:none !important;
    margin:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
    background:#09051f !important;
    padding-bottom:92px !important;
  }

  .v6-main{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
  }

  .v6-header{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:
      calc(76px + env(safe-area-inset-top))
      16px
      14px !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    overflow:visible !important;
  }

  .v6-intro{
    width:100% !important;
    min-width:0 !important;
    padding:0 !important;
  }

  .v6-intro h1{
    max-width:330px !important;
    margin:0 0 10px !important;
    font-size:clamp(27px,7.8vw,36px) !important;
    line-height:1.01 !important;
    letter-spacing:-.045em !important;
  }

  .v6-search,
  .v670-search{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:48px !important;
    margin:0 !important;
  }

  .catalog-searchbox{
    font-size:13px !important;
  }

  .home-search-results{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:52dvh !important;
  }

  /* hide desktop hero artwork on mobile */
  .v6-hero{
    display:none !important;
  }

  /* compact mobile account avatar in the top bar */
  .v6-account{
    position:fixed !important;
    top:max(10px,env(safe-area-inset-top)) !important;
    right:12px !important;
    z-index:30023 !important;
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:46px !important;
    padding:0 !important;
  }
  .v73-account-card{
    position:relative !important;
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    border:0 !important;
    overflow:visible !important;
    box-shadow:none !important;
  }
  .v73-account-grid{
    position:relative !important;
    width:46px !important;
    height:46px !important;
    display:block !important;
  }
  .v73-account-grid .identity-cell,
  .v73-account-grid .role-cell,
  .v73-account-grid .plan-cell,
  .v73-account-grid #logoutBtn{
    display:none !important;
  }
  .v73-account-grid .avatar-cell{
    display:grid !important;
    place-items:center !important;
    width:46px !important;
    height:46px !important;
    padding:0 !important;
    border:1px solid rgba(255,74,195,.45) !important;
    border-radius:50% !important;
    background:rgba(17,9,46,.96) !important;
    overflow:hidden !important;
  }
  .v73-user-photo{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:50% !important;
    object-fit:cover !important;
  }
  #profileOpenBtn{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    display:block !important;
    width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:transparent !important;
    font-size:0 !important;
    cursor:pointer !important;
  }
  .v6-login-main,
  .v73-login-btn{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:0 !important;
  }
  .v6-login-main::before,
  .v73-login-btn::before{
    content:"👤";
    font-size:20px;
  }

  /* ---------- main feed ---------- */
  .v6-content{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .v6-feed{
    width:100% !important;
    min-width:0 !important;
    padding:16px 14px 16px !important;
  }

  .v6-section-head{
    min-height:32px !important;
    margin:0 0 9px !important;
  }
  .v6-section-head h2{
    font-size:18px !important;
  }
  .v6-section-head button{
    min-height:32px !important;
    font-size:10px !important;
  }

  /* v7.6.24 — compact icon cards: small square cover, title below */
  #home .v6-track-grid,
  .v6-track-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px 10px !important;
  }

  .v6-track-grid .track-card{
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    overflow:hidden !important;
  }

  .v6-track-grid .track-cover{
    position:relative !important;
    width:96px !important;
    height:96px !important;
    min-height:96px !important;
    max-height:96px !important;
    max-width:96px !important;
    aspect-ratio:1 / 1 !important;
    align-self:flex-start !important;
    border-radius:12px !important;
    background-size:cover !important;
    background-position:center !important;
    overflow:hidden !important;
    box-shadow:0 8px 20px rgba(0,0,0,.20) !important;
  }

  .v6-track-grid .track-card h3{
    width:100% !important;
    margin:7px 0 2px !important;
    font-size:11.5px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .v6-track-grid .track-card p{
    width:100% !important;
    margin:0 0 2px !important;
    font-size:8.8px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .v6-track-grid .track-card-stats{
    width:100% !important;
    margin-top:1px !important;
    gap:5px !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    overflow:hidden !important;
  }

  .v6-track-grid .track-listen-count,
  .v6-track-grid .track-rating-summary{
    font-size:8px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
  }

  .v6-track-grid .playdot{
    width:30px !important;
    height:30px !important;
    right:5px !important;
    bottom:5px !important;
    font-size:10px !important;
  }

  @media(max-width:390px){
    .v6-track-grid .track-cover{
      width:84px !important;
      height:84px !important;
      min-height:84px !important;
      max-height:84px !important;
      max-width:84px !important;
    }
    .v6-track-grid .track-card h3{
      font-size:10.5px !important;
    }
    .v6-track-grid .track-card p{
      font-size:8px !important;
    }
    .v6-track-grid .track-listen-count,
    .v6-track-grid .track-rating-summary{
      font-size:7.4px !important;
    }
  }

  /* compact moods */
  .v6-mood-head{
    margin-top:18px !important;
  }
  .v6-moods{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .v6-moods button{
    min-height:48px !important;
    height:48px !important;
    padding:7px !important;
    font-size:11.5px !important;
    border-radius:11px !important;
  }

  /* compact rising artists after feed */
  .v6-artist-rail{
    width:100% !important;
    display:block !important;
    order:2 !important;
    min-width:0 !important;
    padding:16px 14px 104px !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
  }
  .v6-rising-list{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  .rising-item{
    min-height:52px !important;
    padding:6px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
  }
  .rising-item img{
    width:40px !important;
    height:40px !important;
  }
  .rising-item strong{
    font-size:13px !important;
  }
  .rising-item span{
    font-size:10px !important;
  }

  /* ---------- fixed mobile player ---------- */
  .v6-player,
  .player.v6-player{
    position:fixed !important;
    z-index:25000 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:78px !important;
    min-height:78px !important;
    padding:
      8px
      10px
      calc(8px + env(safe-area-inset-bottom)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.4fr) auto auto !important;
    grid-template-rows:1fr 6px !important;
    gap:5px 8px !important;
    align-items:center !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    background:rgba(5,2,21,.97) !important;
    backdrop-filter:blur(16px) !important;
    box-sizing:border-box !important;
  }

  .v6-player .player-left{
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
  }
  .v6-player .player-left img{
    width:44px !important;
    height:44px !important;
    border-radius:9px !important;
  }
  .v6-player .player-left strong{
    display:block !important;
    font-size:10.5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .v6-player .player-left span{
    display:block !important;
    margin-top:2px !important;
    font-size:8.5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .v6-player .player-buttons{
    display:flex !important;
    align-items:center !important;
    gap:3px !important;
  }
  .v6-player .player-buttons button{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    padding:0 !important;
  }
  .v6-player .player-buttons .play{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
  }

  .v69-player-actions{
    display:flex !important;
    gap:3px !important;
  }
  .player-mini-action{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }

  .v6-player .eq-bars{
    display:none !important;
  }

  .v6-player #progress{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:6px !important;
    margin:0 !important;
  }

  /* ---------- standard subpages ---------- */
  .standard-view{
    min-height:100dvh !important;
    padding-bottom:96px !important;
    overflow-x:hidden !important;
  }

  .std-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1000 !important;
    min-height:58px !important;
    padding:
      calc(10px + env(safe-area-inset-top))
      14px
      10px !important;
    gap:10px !important;
    background:rgba(6,2,22,.95) !important;
    backdrop-filter:blur(14px) !important;
  }
  .std-topbar button{
    min-height:40px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }
  .std-topbar h1{
    min-width:0 !important;
    font-size:14px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .page-head,
  .compact-head{
    width:calc(100vw - 32px) !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:24px 0 18px !important;
  }
  .page-head .eyebrow{
    font-size:11px !important;
  }
  .page-head h1{
    margin:3px 0 8px !important;
    font-size:clamp(34px,12vw,54px) !important;
    line-height:.98 !important;
  }
  .page-head p{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  /* compact 2-column genre selector */
  .standard-view .genre-grid,
  #genres .genre-grid,
  .v661-genre-grid{
    width:calc(100vw - 28px) !important;
    margin:0 auto !important;
    padding:0 0 100px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:7px !important;
    row-gap:5px !important;
  }

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

  #genres .genre-card .genre-check{
    display:grid !important;
    width:17px !important;
    height:17px !important;
    place-items:center !important;
    border:1.5px solid rgba(191,205,236,.62) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.045) !important;
  }

  #genres .genre-card .genre-label{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10px !important;
    font-family:Inter,Arial,sans-serif !important;
    font-weight:500 !important;
  }

  /* artist cards: 2-column on phones */
  .standard-view .artist-grid{
    width:calc(100vw - 28px) !important;
    margin:0 auto !important;
    padding:0 0 100px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .standard-view .artist-card{
    min-width:0 !important;
    min-height:138px !important;
    padding:9px !important;
    border-radius:12px !important;
  }
  .artist-card .avatar{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    margin-bottom:7px !important;
  }
  .artist-card h3{
    margin-bottom:3px !important;
    font-size:11.5px !important;
    line-height:1.15 !important;
  }
  .artist-card .muted{
    font-size:8.5px !important;
  }
  .artist-card .tag{
    margin-top:5px !important;
    padding:2px 5px !important;
    font-size:7.5px !important;
  }

  /* library */
  .library-shell{
    width:calc(100vw - 32px) !important;
    margin:0 auto 110px !important;
  }
  .library-toolbar{
    justify-content:stretch !important;
  }
  .library-toolbar button{
    width:100% !important;
    min-height:44px !important;
  }
  .library-song-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    min-height:68px !important;
    gap:5px 8px !important;
  }
  .library-song-title{font-size:12px !important}
  .library-song-artist{font-size:10px !important}
  .library-row-actions{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
  }
  .library-action{
    min-height:36px !important;
  }
  .playlist-card{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .playlist-card-actions{
    justify-content:flex-start !important;
  }

  /* catalogue */
  .catalog-shell{
    width:calc(100vw - 32px) !important;
    padding-bottom:110px !important;
  }
  .catalog-toolbar{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }
  .catalog-track-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:18px 10px !important;
  }
  .catalog-track-cover{
    border-radius:12px !important;
  }
  .catalog-track-card h3{
    font-size:11.5px !important;
  }
  .catalog-track-card p{
    font-size:9px !important;
  }
  .catalog-track-play{
    width:38px !important;
    height:38px !important;
    right:8px !important;
    bottom:8px !important;
  }
  .catalog-pagination{
    flex-wrap:wrap !important;
    margin-bottom:16px !important;
  }

  /* profile */
  /* v7.6.24 — compact single-screen-style mobile profile */
  #profile .std-topbar{
    min-height:54px !important;
    padding:
      calc(8px + env(safe-area-inset-top))
      14px
      8px !important;
  }

  #profile .page-head{
    width:calc(100vw - 28px) !important;
    padding:14px 0 10px !important;
  }

  #profile .page-head .eyebrow{
    display:none !important;
  }

  #profile .page-head h1{
    margin:0 0 4px !important;
    font-size:34px !important;
  }

  #profile .page-head p{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  .profile-shell{
    width:calc(100vw - 28px) !important;
    margin:0 auto 92px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .profile-card,
  .profile-identity-card,
  .profile-actions-card,
  .subscription-card{
    grid-column:auto !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:12px !important;
    border-radius:14px !important;
  }

  .profile-card h2{
    margin:0 0 9px !important;
    font-size:15px !important;
  }

  .profile-identity-card{
    min-height:92px !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:11px !important;
    align-items:center !important;
  }

  .profile-avatar-wrap{
    gap:5px !important;
  }

  .profile-avatar{
    width:64px !important;
    height:64px !important;
  }

  .profile-avatar-action{
    min-height:27px !important;
    padding:0 7px !important;
    font-size:9px !important;
  }

  .profile-identity-copy h2{
    margin:0 0 2px !important;
    font-size:18px !important;
    line-height:1.1 !important;
  }

  .profile-identity-copy p{
    margin:0 0 5px !important;
    font-size:10px !important;
  }

  .profile-role-pill{
    min-height:24px !important;
    padding:4px 8px !important;
    font-size:9px !important;
  }

  .profile-field{
    gap:4px !important;
    margin-bottom:7px !important;
  }

  .profile-field span{
    font-size:9.5px !important;
  }

  .profile-field input{
    min-height:38px !important;
    height:38px !important;
    padding:0 11px !important;
    font-size:16px !important; /* avoids iOS zoom */
    border-radius:10px !important;
  }

  #saveProfileBtn{
    min-height:38px !important;
    height:38px !important;
    padding:0 16px !important;
    font-size:11px !important;
  }

  .profile-current-plan{
    min-height:42px !important;
    padding:0 10px !important;
    border-radius:10px !important;
  }

  .profile-current-plan span{
    font-size:9px !important;
  }

  .profile-current-plan strong{
    font-size:13px !important;
  }

  .profile-help{
    margin:7px 0 0 !important;
    font-size:8.8px !important;
    line-height:1.35 !important;
  }

  #changePasswordBtn{
    min-height:36px !important;
    height:36px !important;
    padding:0 13px !important;
    font-size:10px !important;
  }

  .profile-actions-card{
    min-height:48px !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
  }

  #profileLogoutBtn{
    min-height:36px !important;
    height:36px !important;
    padding:0 14px !important;
    font-size:10px !important;
  }

  .profile-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* admin */
  .admin-shell{
    width:calc(100vw - 32px) !important;
    margin:0 auto 110px !important;
  }
  .admin-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .admin-stat{
    min-height:80px !important;
    padding:12px !important;
  }
  .admin-stat strong{font-size:22px !important}
  .admin-tabs{
    width:100% !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
  }
  .admin-tab{
    flex:0 0 auto !important;
    min-height:42px !important;
  }
  .admin-row{
    grid-template-columns:minmax(0,1fr) !important;
    gap:5px !important;
    padding:11px !important;
  }
  .admin-row .admin-secondary,
  .admin-row .admin-tertiary{
    display:block !important;
  }
  .admin-actions{
    justify-content:flex-start !important;
  }

  /* creator studio and forms */
  #upload .form-grid,
  #upload .studio-grid,
  #upload .studio-form-grid,
  #upload .release-form-grid,
  #upload .upload-grid,
  .form-grid{
    grid-template-columns:1fr !important;
  }
  #upload input,
  #upload select,
  #upload textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:46px !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }
  #upload textarea{
    min-height:110px !important;
  }
  .studio-primary-nav{
    grid-template-columns:1fr 1fr !important;
    width:calc(100vw - 32px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .publisher-activation-panel{
    width:calc(100vw - 32px) !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    padding:14px !important;
  }
  .publisher-activation-icon{
    width:48px !important;
    height:48px !important;
  }

  /* royalties/policies */
  .standard-view .policy-grid,
  .royalty-grid{
    width:calc(100vw - 32px) !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* modals */
  .auth-modal,
  .track-modal,
  .legal-modal{
    padding:8px !important;
    align-items:flex-end !important;
  }
  .auth-card,
  .track-modal-card,
  .legal-modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    border-radius:20px 20px 0 0 !important;
    padding:16px !important;
    overflow-y:auto !important;
  }
  .legal-tabs{
    overflow-x:auto !important;
  }
  .legal-panel{
    font-size:12px !important;
  }
  .auth-role-selector,
  .v73-auth-role-grid{
    grid-template-columns:1fr !important;
  }
  .v73-plan-buttons{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  /* login gate */
  .login-gate{
    padding:16px !important;
  }
  .login-gate-card{
    width:min(100%,420px) !important;
    padding:24px 18px !important;
  }
}

/* Very small phones */
@media (max-width:420px){
  .v6-header{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .v6-feed,
  .v6-artist-rail{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .v6-intro h1{
    font-size:clamp(28px,9vw,38px) !important;
  }
  .v6-account,
  .v73-account-card,
  .v73-account-grid,
  .v73-account-grid .avatar-cell,
  #profileOpenBtn{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
  }
  .v73-user-photo{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }
  .v6-player,
  .player.v6-player{
    grid-template-columns:minmax(0,1fr) auto !important;
  }
  .v69-player-actions{
    display:none !important;
  }
  .catalog-toolbar{
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}

/* Landscape phone: protect vertical space */
@media (max-width:820px) and (orientation:landscape) and (max-height:500px){
  .v6-header{
    padding-top:62px !important;
  }
  .v6-intro h1{
    font-size:28px !important;
  }
  .v73-account-card{
    display:none !important;
  }
  .v6-player,
  .player.v6-player{
    height:68px !important;
    min-height:68px !important;
  }
}


/* v7.5.1 — Creator Studio role visibility */
#creatorStudioNavBtn[hidden],
.role-protected-studio[hidden]{
  display:none !important;
}


/* v7.5.2 — Royalty role visibility */
#royaltyNavBtn[hidden],
.role-protected-royalty[hidden]{
  display:none !important;
}


@media(max-width:820px){
  .admin-maintenance{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding:14px !important;
  }
  .admin-maintenance-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  .admin-maintenance-primary,
  .admin-maintenance-secondary{
    width:100% !important;
    min-height:44px !important;
    white-space:normal !important;
  }
}


/* v7.5.4.3 — Admin nav visibility */
#adminNavBtn[hidden],
.role-protected-admin[hidden]{
  display:none !important;
}


@media(max-width:820px){
  .track-listen-count{
  margin-top:4px;
  color:#8d98b3;
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
}
  .player-listen-count{
    font-size:7.5px !important;
  }
}


/* ==========================================================
   v7.6.40 — Mobile Info as topic cards
   ========================================================== */
@media(max-width:820px){
  #legalModal .legal-modal-card{
    display:flex !important;
    flex-direction:column !important;
  }

  #legalModal .legal-modal-head{
    flex:0 0 auto !important;
    margin-bottom:10px !important;
  }

  #legalModal .mobile-info-topics-head{
    display:none;
    padding:4px 2px 12px;
  }

  #legalModal .mobile-info-topics-head h2{
    margin:2px 0 5px;
    color:#fff;
    font-size:24px;
    line-height:1.05;
  }

  #legalModal .mobile-info-topics-head > p:last-child{
    margin:0;
    color:#929cb5;
    font-size:11px;
    line-height:1.45;
  }

  #legalModal .mobile-info-back{
    display:none;
    width:max-content;
    min-height:34px;
    margin:0 0 8px;
    padding:0 10px;
    border:1px solid rgba(0,232,255,.13);
    border-radius:9px;
    background:rgba(0,232,255,.035);
    color:#8feef7;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
  }

  #legalModal .legal-tabs{
    overflow:visible !important;
  }

  #legalModal.mobile-topics-mode .mobile-info-topics-head{
    display:block;
  }

  #legalModal.mobile-topics-mode .legal-tabs{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:0 0 6px !important;
    border-bottom:0 !important;
    overflow:visible !important;
  }

  #legalModal.mobile-topics-mode .legal-tab{
    width:100% !important;
    min-height:50px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 18px !important;
    align-items:center !important;
    gap:10px !important;
    padding:7px 10px !important;
    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.028) !important;
    color:#e7eaf3 !important;
    text-align:left !important;
  }

  #legalModal.mobile-topics-mode .legal-tab.active{
    border-color:rgba(255,255,255,.075) !important;
    background:rgba(255,255,255,.028) !important;
    box-shadow:none !important;
  }

  #legalModal.mobile-topics-mode .legal-tab:hover,
  #legalModal.mobile-topics-mode .legal-tab:focus-visible{
    border-color:rgba(0,232,255,.18) !important;
    background:rgba(0,232,255,.045) !important;
  }

  #legalModal.mobile-topics-mode .legal-tab-icon{
    display:grid !important;
    place-items:center !important;
    width:32px !important;
    height:32px !important;
    border-radius:9px !important;
    background:linear-gradient(135deg,rgba(255,66,187,.12),rgba(0,232,255,.10)) !important;
    color:#dcecff !important;
    font-size:15px !important;
  }

  #legalModal.mobile-topics-mode .legal-tab > span[data-i18n]{
    min-width:0;
    font-size:12px !important;
    font-weight:800 !important;
  }

  #legalModal.mobile-topics-mode .legal-tab > b{
    display:block !important;
    justify-self:end !important;
    color:#69748f !important;
    font-size:20px !important;
    font-weight:400 !important;
  }

  #legalModal.mobile-topics-mode .legal-panel{
    display:none !important;
  }

  #legalModal.mobile-content-mode .legal-tabs,
  #legalModal.mobile-content-mode .mobile-info-topics-head{
    display:none !important;
  }

  #legalModal.mobile-content-mode .mobile-info-back{
    display:inline-flex !important;
    align-items:center !important;
  }

  #legalModal.mobile-content-mode .legal-panel.active{
    display:block !important;
    padding-top:8px !important;
  }

  #legalModal.mobile-content-mode .legal-panel h2{
    font-size:23px !important;
  }
}


/* ==========================================================
   v7.6.46 — Mobile History typography + row hierarchy
   ========================================================== */
@media(max-width:820px){
  #history .library-song-list{
    gap:8px !important;
  }

  #history .library-song-row{
    min-height:82px !important;
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) 44px !important;
    grid-template-rows:auto auto auto !important;
    column-gap:10px !important;
    row-gap:2px !important;
    align-items:center !important;
    padding:9px 10px !important;
  }

  #history .library-song-cover{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    border-radius:9px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  #history .library-song-copy{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    min-width:0 !important;
    align-self:center !important;
  }

  #history .library-song-title{
    margin:0 0 2px !important;
    color:#fff !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:12.5px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #history .library-song-artist{
    margin:0 !important;
    color:#9aa4bc !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:400 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #history .library-song-secondary{
    margin-top:3px !important;
    color:#79849d !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:8.5px !important;
    line-height:1.2 !important;
    font-weight:400 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #history .library-song-stats{
    grid-column:2 !important;
    grid-row:3 !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  #history .library-song-listens,
  #history .library-song-rating{
    font-family:Inter,Arial,sans-serif !important;
    font-size:9.5px !important;
    line-height:1.15 !important;
    font-weight:500 !important;
  }

  #history .library-song-listens{
    color:#a8b1c6 !important;
  }

  #history .library-song-rating{
    color:#e8c95f !important;
  }

  #history .library-song-duration{
    grid-column:3 !important;
    grid-row:3 !important;
    align-self:end !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:3px !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  #history .library-song-duration span{
    color:#68738c !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:7px !important;
    line-height:1 !important;
    font-weight:500 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }

  #history .library-song-duration strong{
    color:#aeb6c8 !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:500 !important;
  }

  #history .library-row-actions{
    grid-column:3 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  #history .library-action.play{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:11px !important;
  }
}

@media(max-width:390px){
  #history .library-song-row{
    grid-template-columns:46px minmax(0,1fr) 40px !important;
    column-gap:8px !important;
    padding:8px !important;
  }

  #history .library-song-cover{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
  }

  #history .library-song-title{
    font-size:11.5px !important;
  }

  #history .library-song-artist{
    font-size:9.5px !important;
  }

  #history .library-song-secondary{
    font-size:8px !important;
  }

  #history .library-song-listens,
  #history .library-song-rating{
    font-size:9px !important;
  }

  #history .library-action.play{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


/* ==========================================================
   v7.6.49 — Mobile Artist Releases
   ========================================================== */
@media(max-width:820px){
  .artist-releases-shell{
    width:calc(100vw - 28px) !important;
    margin:0 auto 110px !important;
  }

  .artist-releases-hero{
    gap:12px !important;
    padding:14px 0 12px !important;
  }

  .artist-releases-avatar{
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
  }

  .artist-releases-identity h1{
    margin-bottom:5px !important;
    font-size:26px !important;
  }

  .artist-releases-meta{
    font-size:9px !important;
  }

  .artist-releases-section-head{
    padding:15px 0 8px !important;
  }

  .artist-releases-section-head h2{
    font-size:13px !important;
  }

  #artistReleases .library-song-list{
    gap:7px !important;
  }

  #artistReleases .library-song-row{
    min-height:70px !important;
    display:grid !important;
    grid-template-columns:50px minmax(0,1fr) 40px !important;
    grid-template-rows:auto auto !important;
    column-gap:9px !important;
    row-gap:2px !important;
    align-items:center !important;
    padding:8px !important;
  }

  #artistReleases .library-song-cover{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    border-radius:8px !important;
    background-size:cover !important;
    background-position:center !important;
  }

  #artistReleases .library-song-copy{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  #artistReleases .library-song-title{
    margin:0 0 2px !important;
    font-size:11.5px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #artistReleases .library-song-artist{
    font-size:9px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  #artistReleases .library-song-stats{
    grid-column:2 !important;
    grid-row:2 !important;
    display:flex !important;
    gap:6px !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  #artistReleases .library-song-listens,
  #artistReleases .library-song-rating{
    font-size:8.5px !important;
    line-height:1.1 !important;
  }

  #artistReleases .library-song-duration{
    display:none !important;
  }

  #artistReleases .library-row-actions{
    grid-column:3 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    justify-self:end !important;
  }

  #artistReleases .library-action.play{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    padding:0 !important;
    border-radius:50% !important;
    font-size:10px !important;
  }
}