/* =========================================================
   ALBUM PLAYBACK QUEUE
========================================================= */

@media (min-width:1100px){
    /* Keep the cover and title together, then give the metadata strip the full hero width. */
    .album-playlist-page .album-hero{
        grid-template-columns:minmax(220px,280px) minmax(0,1fr) !important;
        grid-template-areas:
            "cover label"
            "cover title"
            "cover subtitle"
            "info info" !important;
        grid-template-rows:auto auto auto auto !important;
        column-gap:24px !important;
        row-gap:8px !important;
        margin-bottom:24px !important;
    }

    .album-playlist-page .album-cover-box{
        grid-area:cover !important;
        max-width:280px !important;
        align-self:stretch !important;
    }

    .album-playlist-page .album-details{
        display:contents !important;
    }

    .album-playlist-page .song-label{
        grid-area:label !important;
        align-self:end !important;
        width:max-content !important;
        max-width:100% !important;
    }

    .album-playlist-page .song-title{
        grid-area:title !important;
        align-self:center !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .album-playlist-page .song-subtitle{
        grid-area:subtitle !important;
        align-self:start !important;
        margin:0 !important;
    }

    .album-playlist-page .album-info-card{
        grid-area:info !important;
        margin:8px 0 0 !important;
    }
}

.album-playlist-page .album-info-card .info-grid{
    grid-template-columns:
        minmax(170px,1.05fr)
        minmax(130px,.9fr)
        minmax(180px,1.12fr)
        minmax(145px,.95fr)
        minmax(125px,.8fr) !important;
    align-items:stretch !important;
    gap:8px !important;
}

/* Let track count and genre occupy their own desktop grid cells. */
.album-playlist-page .info-item-tracks-genre{
    display:contents !important;
}

.album-playlist-page .album-info-card .info-grid > .info-item,
.album-playlist-page .info-item-tracks-genre > .info-item{
    justify-content:center !important;
    min-height:66px !important;
    padding:9px 11px !important;
    border-color:#263449 !important;
    border-radius:11px !important;
    background:#111c2d !important;
}

.album-playlist-page .album-info-card .info-item span{
    font-size:10px !important;
    letter-spacing:.7px !important;
}

.album-playlist-page .album-info-card .info-item strong{
    font-size:13px !important;
    line-height:1.25 !important;
}

.album-playlist-page .album-play-all-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-width:0 !important;
    min-height:66px !important;
    padding:10px 12px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,#ff414d,#d91425) !important;
    box-shadow:0 7px 18px rgba(217,20,37,.18) !important;
    color:#fff !important;
    font:inherit !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease !important;
}

.album-playlist-page .album-play-all-btn:hover:not(:disabled){
    filter:brightness(1.08) !important;
    transform:translateY(-1px) !important;
    box-shadow:0 10px 22px rgba(217,20,37,.25) !important;
}

.album-playlist-page .album-play-all-btn:focus-visible{
    outline:3px solid rgba(255,255,255,.8) !important;
    outline-offset:3px !important;
}

.album-playlist-page .album-play-all-btn:disabled{
    opacity:.55 !important;
    cursor:not-allowed !important;
    box-shadow:none !important;
}

.album-playlist-page .album-play-all-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.18) !important;
    font-size:12px !important;
}

.album-playlist-page .album-tracklist-card .tracklist-heading{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
}

.album-playlist-page .album-tracklist-context{
    color:#fff !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}

.album-playlist-page .tracklist-title-group{
    display:inline-flex !important;
    flex:0 1 auto !important;
    align-items:baseline !important;
    gap:8px !important;
    min-width:0 !important;
    color:#fff !important;
    white-space:nowrap !important;
}

.album-playlist-page .tracklist-label{
    color:#fff !important;
    font-size:inherit !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .tracklist-heading,
.album-playlist-page .album-tracklist-card .tracklist-heading > span:first-child{
    color:#fff !important;
}

.album-playlist-page .album-tracklist-card .tracklist-meta{
    color:#94a3b8 !important;
    font-size:12px !important;
    font-weight:500 !important;
    text-align:right !important;
}

.album-playlist-page .album-tracklist-card .album-track{
    display:grid !important;
    grid-template-columns:34px 28px minmax(120px,1.3fr) minmax(72px,.8fr) auto 42px !important;
    grid-template-areas:"play number info seek time view" !important;
    column-gap:10px !important;
    row-gap:0 !important;
    align-items:center !important;
    min-height:64px !important;
    padding:8px 6px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    cursor:pointer !important;
    transition:background-color .18s ease,border-color .18s ease !important;
}

.album-playlist-page .album-tracklist-card .album-track:hover,
.album-playlist-page .album-tracklist-card .album-track.is-current{
    background:#111e30 !important;
}

.album-playlist-page .album-tracklist-card .album-track.is-current{
    box-shadow:inset 3px 0 0 #ff334f !important;
}

.album-playlist-page .album-track-play,
.album-playlist-page .album-track-play-placeholder{
    grid-area:play !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#dc202e !important;
    color:#fff !important;
    font-size:12px !important;
}

.album-playlist-page .album-track-play{cursor:pointer !important;}
.album-playlist-page .album-track-play:hover{background:#f12f3c !important;}
.album-playlist-page .album-track-play-placeholder{visibility:hidden !important;}

.album-playlist-page .album-tracklist-card .track-number{
    grid-area:number !important;
    color:#91a0b6 !important;
    font-size:13px !important;
    font-weight:800 !important;
}

.album-playlist-page .album-tracklist-card .track-info{
    grid-area:info !important;
    gap:3px !important;
}

.album-playlist-page .album-tracklist-card .track-title{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .track-artist{
    overflow:hidden !important;
    color:#94a3b8 !important;
    font-size:12px !important;
    line-height:1.3 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card .track-main-artist,
.album-playlist-page .album-tracklist-card .track-featuring strong{
    color:inherit !important;
    font-weight:800 !important;
}

@media (min-width:1100px){
    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:34px 28px minmax(120px,1fr) minmax(180px,1.4fr) auto 54px !important;
        column-gap:14px !important;
    }
}

.album-playlist-page .album-tracklist-card .album-track-progress{
    grid-area:seek !important;
    min-width:0 !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .16s ease !important;
}

.album-playlist-page .album-tracklist-card .album-track.is-current .album-track-progress{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.album-playlist-page .album-tracklist-card .album-track-seek{
    display:block !important;
    width:100% !important;
    height:18px !important;
    margin:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    background:transparent !important;
    cursor:pointer !important;
}

.album-playlist-page .album-track-seek::-webkit-slider-runnable-track{
    height:5px !important;
    border-radius:5px !important;
    background:linear-gradient(to right,#ef3340 var(--seek-progress,0%),#344154 var(--seek-progress,0%)) !important;
}

.album-playlist-page .album-track-seek::-moz-range-track{
    height:5px !important;
    border-radius:5px !important;
    background:#344154 !important;
}

.album-playlist-page .album-track-seek::-moz-range-progress{
    height:5px !important;
    border-radius:5px !important;
    background:#ef3340 !important;
}

.album-playlist-page .album-track-seek::-webkit-slider-thumb{
    width:11px !important;
    height:11px !important;
    margin-top:-3px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:0 !important;
    border-radius:50% !important;
    background:#ff5964 !important;
}

.album-playlist-page .album-track-seek::-moz-range-thumb{
    width:11px !important;
    height:11px !important;
    border:0 !important;
    border-radius:50% !important;
    background:#ff5964 !important;
}

.album-playlist-page .album-track-time{
    grid-area:time !important;
    color:#cbd5e1 !important;
    font-size:12px !important;
    font-variant-numeric:tabular-nums !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-track-time-separator{color:#738198 !important;}

.album-playlist-page .album-tracklist-card .track-view{
    grid-area:view !important;
    display:block !important;
    color:#ff6670 !important;
    font-size:12px !important;
    white-space:nowrap !important;
}

.album-playlist-page .album-tracklist-card.has-album-playlist-js .track-player[data-album-audio]{
    display:none !important;
}

.album-playlist-page:not(.has-album-playlist-js) .album-playlist-row .track-player{
    grid-column:3 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    height:28px !important;
}

.album-playlist-page .album-playlist-status{
    margin:10px 0 4px !important;
    padding:9px 12px !important;
    border:1px solid rgba(255,99,109,.3) !important;
    border-radius:9px !important;
    background:rgba(217,20,37,.1) !important;
    color:#ffd1d4 !important;
    font-size:13px !important;
    line-height:1.4 !important;
}

.album-playlist-page .album-playlist-status[hidden]{display:none !important;}

@media (min-width:768px) and (max-width:1099px){
    .album-playlist-page .album-info-card .info-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }

    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:32px 25px minmax(100px,1.2fr) minmax(66px,.7fr) auto 38px !important;
        column-gap:7px !important;
    }
}

@media (max-width:767px){
    .album-playlist-page .album-info-card .info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
    }

    .album-playlist-page .info-item-tracks-genre{
        display:grid !important;
        grid-column:span 2 !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        min-width:0 !important;
    }

    .album-playlist-page .album-info-card .info-grid > .info-item,
    .album-playlist-page .info-item-tracks-genre > .info-item{
        min-height:58px !important;
        padding:8px 9px !important;
    }

    .album-playlist-page .album-play-all-btn{
        min-height:58px !important;
        padding:9px 8px !important;
        gap:7px !important;
        font-size:13px !important;
    }

    .album-playlist-page .album-play-all-icon{
        width:24px !important;
        height:24px !important;
        flex-basis:24px !important;
        font-size:11px !important;
    }

    .album-playlist-page .album-tracklist-card .tracklist-heading{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:4px !important;
    }

    .album-playlist-page .tracklist-title-group{
        gap:6px !important;
    }

    .album-playlist-page .album-tracklist-context{
        font-size:13px !important;
    }

    .album-playlist-page .tracklist-label{
        font-size:16px !important;
    }

    .album-playlist-page .album-tracklist-card .tracklist-meta{
        text-align:left !important;
    }

    .album-playlist-page .album-tracklist-card .album-track{
        grid-template-columns:30px 25px minmax(0,1fr) auto !important;
        grid-template-areas:
            "play number info time"
            ". . seek view" !important;
        column-gap:7px !important;
        row-gap:3px !important;
        min-height:66px !important;
        padding:8px 4px !important;
    }

    .album-playlist-page .album-track-play,
    .album-playlist-page .album-track-play-placeholder{
        width:28px !important;
        height:28px !important;
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-number{
        font-size:12px !important;
    }

    .album-playlist-page .album-tracklist-card .track-title{
        font-size:12.5px !important;
    }

    .album-playlist-page .album-tracklist-card .track-artist{
        font-size:11px !important;
    }

    .album-playlist-page .album-track-time{
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-view{
        font-size:10px !important;
    }

    .album-playlist-page .album-tracklist-card .track-player{
        width:100% !important;
    }
}




/* Keep total album/EP duration directly over the per-track duration column. */
.album-playlist-page .album-tracklist-runtime-row {
    display: grid !important;
    grid-template-columns: 32px 25px minmax(120px, 1.3fr) minmax(72px, .8fr) 78px 38px !important;
    column-gap: 7px !important;
    margin: 0 6px 12px !important;
}

.album-playlist-page .album-tracklist-runtime {
    grid-column: 5 !important;
    justify-self: end !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.album-playlist-page .album-tracklist-runtime-label {
    display: block !important;
    color: var(--z-muted, #94a3b8) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.album-playlist-page .album-tracklist-runtime-value {
    display: block !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums !important;
}

@media (min-width: 1100px) {
    .album-playlist-page .album-tracklist-runtime-row {
        grid-template-columns: 34px 28px minmax(120px, 1.3fr) minmax(72px, .8fr) 78px 54px !important;
        column-gap: 14px !important;
    }
}

@media (max-width: 767px) {
    .album-playlist-page .album-tracklist-runtime-row {
        grid-template-columns: 30px 25px minmax(0, 1fr) auto !important;
        column-gap: 7px !important;
        margin: 0 4px 10px !important;
    }

    .album-playlist-page .album-tracklist-runtime {
        grid-column: 4 !important;
    }

    .album-playlist-page .album-tracklist-runtime-label {
        font-size: 8px !important;
    }

    .album-playlist-page .album-tracklist-runtime-value {
        font-size: 11px !important;
    }
}
/* Responsive tracklist alignment: preserve the card, keep the heading on one line,
   right-align the count/runtime, and remove the extra gap before the first track. */
.album-playlist-page .album-tracklist-card .tracklist-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.album-playlist-page .tracklist-title-group {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.album-playlist-page .album-tracklist-context {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.album-playlist-page .tracklist-label {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.album-playlist-page .album-tracklist-card .tracklist-meta {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: 34% !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Runtime remains directly over the track-duration column, flush with track 01. */
.album-playlist-page .album-tracklist-runtime-row {
    align-items: end !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.album-playlist-page .album-tracklist-card .album-playlist-row {
    margin-top: 0 !important;
}

.album-playlist-page .album-tracklist-card .track-number {
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

@media (max-width: 767px) {
    .album-playlist-page .album-tracklist-card .tracklist-heading {
        align-items: center !important;
        flex-direction: row !important;
        gap: 6px !important;
    }

    .album-playlist-page .album-tracklist-card .tracklist-meta {
        max-width: 24% !important;
        font-size: 10px !important;
        text-align: right !important;
    }

    .album-playlist-page .album-tracklist-context {
        font-size: 12px !important;
    }

    .album-playlist-page .tracklist-label {
        font-size: 14px !important;
    }

    .album-playlist-page .album-tracklist-runtime-row {
        margin-bottom: 0 !important;
    }
}

/* Keep Album Runtime / EP Runtime and its total on the same right-aligned line. */
.album-playlist-page .album-tracklist-runtime {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
}

.album-playlist-page .album-tracklist-runtime-label,
.album-playlist-page .album-tracklist-runtime-value {
    display: inline !important;
    white-space: nowrap !important;
}

.album-playlist-page .album-tracklist-runtime-label {
    line-height: 1.2 !important;
}

@media (max-width: 767px) {
    .album-playlist-page .album-tracklist-runtime {
        gap: 3px !important;
    }
}