#nowPlaying{

    position:fixed;
    left:0;
    right:0;
    bottom:62px;
    width:100%;
    height:62px;
    background:rgba(18,18,18,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.04);    
    display:flex;
    align-items:center;
    padding:10px 14px;
    z-index:99999;

}
#playerCover{

    width:60px;
    height:60px;
    border-radius:8px;
    overflow:hidden;
    flex-shrink:0;
    box-shadow:0 0 12px rgba(0,0,0,.45);

}

#playerCover img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

}

#playerPlay:hover .icon{

    background:var(--red2);

}

#playerInfo{

    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 12px;
    min-width:0;

}

#playerTitle{

    font-family:'Montserrat',sans-serif;
    font-size:14px;
    font-weight:500;
    color:white;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:18px;

}

#playerArtist{

    margin-top:2px;
    font-family:'Montserrat',sans-serif;
    font-size:11px;
    color:#999;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:14px;

}


#playerProgressFill{

    width:35%;
    height:100%;
    background:var(--red);

}

#playerControls{

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0px;
    margin-left:auto;
    padding-right:4px;

}

#playerPrevious,
#playerNext{

    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    display: none !important;

}



#playerPlay:hover{

    background:var(--red);

}

#playerPlay:hover .icon{

    filter:brightness(0);
}

#playIcon{

    width:44px;
    height:44px;
    display:block;
    object-fit:contain;
    filter:brightness(0) invert(1);
    transition:.25s;

}
.themeIcon{

    width:100%;
    height:100%;

    color:var(--mainTheme);

    display:block;

}
/* ===============================
   MINI PLAYER — CONTROLS SVG
=============================== */

#playerControls {
    flex: 0 0 72px !important;
    width: 72px !important;
    margin-left: auto !important;
    margin-right: 10px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#playerPrevious,
#playerNext {
    width: 30px;
    height: 38px;
    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
    cursor: default;
}

#previousIcon,
#nextIcon {
    display: block;

    width: 32px;
    height: 32px;

    transform: scale(1.35);
    transform-origin: center;

    object-fit: contain;
    cursor: pointer;
    pointer-events: auto;

    opacity: .9;
    filter: brightness(0) invert(1);
}

#playerPlay {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    cursor: pointer;
    margin-left: auto !important;
}
.albumCover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    object-fit: contain !important;
}
#playerScreen > .albumCover {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}
.albumCover {
    width: 370px;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
/* Portada de la pantalla de l'àlbum */
.albumPageCover {
    display: block;
    width: 100% !important;
    max-width: 320px !important;
    height: auto;

    margin-left: auto !important;
    margin-right: auto !important;

    position: static !important;
    left: auto !important;
    transform: none !important;

    object-fit: contain;
}
/* =====================================================
   BAITAI 2.0 — COMPACT MINI PLAYER
===================================================== */
#nowPlaying {
    bottom: var(--bottomMenuHeight) !important;
    height: var(--miniPlayerHeight) !important;
    min-height: var(--miniPlayerHeight) !important;
    padding: 5px 10px !important;
}

#playerCover {
    width: 48px !important;
    height: 48px !important;
    border-radius: 7px !important;
}

#playerInfo { padding: 0 9px !important; }
#playerTitle { font-size: 13px !important; line-height: 16px !important; }
#playerArtist { font-size: 10px !important; line-height: 13px !important; }

#playerPlay {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
}

#playIcon { width: 44px !important; height: 44px !important; }
#playerPrevious, #playerNext { width: 27px !important; height: 34px !important; flex-basis: 27px !important; }
#previousIcon, #nextIcon { width: 27px !important; height: 27px !important; transform: scale(1.2) !important; }

#nowPlaying::before { top: -34px !important; height: 34px !important; }
#continueTitle { bottom: calc(var(--bottomMenuHeight) + var(--miniPlayerHeight) + 7px) !important; }

/* =====================================================
   BAITAI 2.2 — MINI PLAYER ABOVE ANDROID NAV BAR
===================================================== */
#nowPlaying {
    bottom: calc(var(--nativeBottomInset) + var(--bottomMenuHeight)) !important;
    height: var(--miniPlayerHeight) !important;
    min-height: var(--miniPlayerHeight) !important;
    padding: 4px 9px !important;
}

#playerCover {
    width: 46px !important;
    height: 46px !important;
}

#nowPlaying::before {
    top: -34px !important;
    height: 34px !important;
}

/* =====================================================
   BAITAI — FULL PLAYER SPOTIFY STYLE
===================================================== */

#playerScreen.spotifyPlayerScreen {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    min-height: calc(
        100vh -
        var(--bottomMenuHeight, 62px) -
        var(--nativeBottomInset, 0px)
    );

    margin: 0 auto;
    padding:
        calc(
            env(safe-area-inset-top, 0px) +
            18px
        )
        24px
        calc(
            var(--bottomMenuHeight, 62px) +
            var(--nativeBottomInset, 0px) +
            22px
        );

    color: #fff;
    text-align: left;
    overflow: hidden;
}

.spotifyPlayerTopBar {
    min-height: 56px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.spotifyTopButton {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.spotifyTopButton svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spotifyPlayerTopText {
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spotifyPlayerTopText span {
    width: 100%;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotifyPlayerTopText strong {
    width: 100%;
    margin-top: 1px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotifyTopMenu {
    flex-direction: column;
    gap: 4px;
}

.spotifyTopMenu span {
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}

.spotifyCoverButton {
    display: block;
    width: 100%;
    max-width: 370px;
    margin:
        0
        auto
        clamp(34px, 7vh, 54px);

    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .38);
}

.spotifyPlayerCover {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
}

.spotifyTrackInformation {
    width: 100%;
    max-width: 370px;
    margin: 0 auto 30px;
}

.spotifyTrackTitle {
    font-family: "Montserrat", sans-serif;
    font-size: clamp(21px, 5.8vw, 28px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.035em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotifyTrackArtist {
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .68);
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotifyTrackArtist svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spotifyProgressSection {
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
}

.spotifyProgressContainer {
    position: relative;
    width: 100%;
    height: 18px;
    display: flex;
    align-items: center;
}

.spotifyProgressBackground,
.spotifyProgressPlayed {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
}

.spotifyProgressBackground {
    width: 100%;
    background:
        rgba(255, 255, 255, .28);
}

.spotifyProgressPlayed {
    width: 0;
    background: #fff;
}

.spotifyProgressInput {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.spotifyProgressInput::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: transparent;
}

.spotifyProgressInput::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, .35);
}

.spotifyProgressInput::-moz-range-track {
    height: 4px;
    background: transparent;
}

.spotifyProgressInput::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
}

.spotifyTimeRow {
    margin-top: 2px;
    display: flex;
    justify-content: space-between;
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 450;
    line-height: 16px;
    color: rgba(255, 255, 255, .62);
}

.spotifyPlayerControls {
    width: 100%;
    max-width: 390px;
    margin: 24px auto 0;
    display: grid;
    grid-template-columns:
        42px
        58px
        minmax(76px, 1fr)
        58px
        42px;
    align-items: center;
    justify-items: center;
    gap: 4px;
}

.spotifyControlButton {
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.spotifyControlButton svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spotifySecondaryControl {
    width: 42px;
    height: 42px;
    color: rgba(255, 255, 255, .72);
}

.spotifySecondaryControl svg {
    width: 25px;
    height: 25px;
    fill: none;
}

.spotifyMainSideControl {
    width: 58px;
    height: 58px;
}

.spotifyMainSideControl svg {
    width: 39px;
    height: 39px;
}

.spotifyMainPlayButton {
    width: 66px;
    height: 66px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        0 9px 28px
        rgba(0, 0, 0, .25);
}

.spotifyMainPlayButton svg {
    width: 38px;
    height: 38px;
    fill: currentColor;
}

.spotifyMainPlayButton:active {
    transform: scale(.96);
}

.spotifyControlButton:active {
    transform: scale(.9);
}


body:has(#playerScreen) #nowPlaying {
    display: none !important;
}


#playerScreen .spotifyPlayerCover {
    position: static !important;
    left: auto !important;
    transform: none !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Mòbils baixos o estrets */

@media (
    max-height: 760px
) {
    #playerScreen.spotifyPlayerScreen {
        padding-top:
            calc(
                env(
                    safe-area-inset-top,
                    0px
                ) +
                10px
            );
    }

    .spotifyPlayerTopBar {
        margin-bottom: 16px;
    }

    .spotifyCoverButton {
        max-width: 310px;
        margin-bottom: 26px;
    }

    .spotifyTrackInformation {
        margin-bottom: 20px;
    }

    .spotifyPlayerControls {
        margin-top: 18px;
    }

    .spotifyMainPlayButton {
        width: 68px;
        height: 68px;
    }
}

@media (
    max-width: 370px
) {
    #playerScreen.spotifyPlayerScreen {
        padding-left: 18px;
        padding-right: 18px;
    }

    .spotifyPlayerControls {
        grid-template-columns:
            36px
            50px
            minmax(68px, 1fr)
            50px
            36px;
    }

    .spotifySecondaryControl {
        width: 36px;
    }

    .spotifyMainSideControl {
        width: 50px;
    }
}

.spotifySecondaryControl.active {
    color: var(--mainTheme);
}

.spotifySecondaryControl.active::after {
    content: "";
    position: absolute;
    bottom: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.spotifySecondaryControl {
    position: relative;
}

#playerScreenRepeat.repeatOne::before {
    content: "1";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    color: currentColor;
}

/* =====================================================
   FULL PLAYER — POLISH 01
===================================================== */

/*
 * Botó superior amb aspecte de text,
 * però completament clicable.
 */
button.spotifyPlayerTopText {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}


#playerScreen.spotifyPlayerScreen {
    padding-top:
        calc(
            env(
                safe-area-inset-top,
                0px
            ) +
            28px
        );
}
.spotifyTrackTitle {
    font-size:
        clamp(
            17px,
            4.6vw,
            21px
        );
}

.spotifyTrackArtist {
    margin-top: 3px;
}
.spotifyTrackInformation {
    margin-bottom: 24px;
}

#playerScreenShuffle.active {
    color: var(--mainTheme);
}
.spotifyTopSpacer {
    width: 44px;
    height: 44px;
}

/* MINI PLAYER — icones des d'Icons.js */

#playIcon {
    width: 38px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #fff;
    filter: none !important;
}

#playIcon .svgIcon {
    display: block;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;

    color: currentColor;
    fill: currentColor;
}
/* Mini player: icona simple play/pause. */
#playIcon {
    width: 34px !important;
    height: 34px !important;
}

#playIcon .svgIcon,
#playIcon svg {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform: none !important;
}
/* =====================================================
   MINI PLAYER — PLAY / PAUSE GRAN
===================================================== */

#playerControls {
    flex: 0 0 62px !important;
    width: 62px !important;
    min-width: 62px !important;

    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#playerPlay {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

#playIcon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    line-height: 0 !important;
    color: #fff !important;
    filter: none !important;
    overflow: visible !important;
}

#playIcon .svgIcon,
#playIcon svg {
    display: block !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;
    transform: none !important;

    color: currentColor !important;
    fill: currentColor !important;
}

/* MINI PLAYER — control una mica més a l'esquerra */

#playerControls {
    transform: translateX(-10px) !important;
}

/* =====================================================
   RANDOM MODES — ACTIVE STATE
===================================================== */

#spotifyAlbumShuffle {
    color: #fff;
    transition: color .2s ease, transform .18s ease;
}

#spotifyAlbumShuffle.active {
    color: var(--mainTheme) !important;
}

#spotifyAlbumShuffle.active svg {
    color: currentColor;
    stroke: currentColor;
}

#artistRandomButton {
    color: #fff;
}

#artistRandomButton .svgIcon,
#artistRandomButton svg {
    width: 28px;
    height: 28px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
    filter: none !important;
}

#artistRandomButton.active {
    color: var(--mainTheme) !important;
}

#artistRandomButton.active .svgIcon,
#artistRandomButton.active svg {
    color: currentColor !important;
    fill: currentColor !important;
}


/* =====================================================
   FULL PLAYER — ADD TRACK TO PERSONAL LIST
===================================================== */

.spotifyAddToListButton {
    color: rgba(255,255,255,.82);
}

.spotifyAddToListButton .svgIcon,
.spotifyAddToListButton svg {
    width: 27px;
    height: 27px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
}

.spotifyAddToListButton:active {
    color: var(--mainTheme);
    transform: scale(.9);
}

/* =====================================================
   TRACK SCREEN — ADD TO PERSONAL LIST
===================================================== */

.spotifyTrackInformation {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        44px;
    align-items: center;
    gap: 10px;
}

.spotifyTrackText {
    min-width: 0;
}

.spotifyTrackListButton {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}

.spotifyTrackListButton .svgIcon,
.spotifyTrackListButton svg {
    width: 27px;
    height: 27px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
}

.spotifyTrackListButton:active {
    color: var(--mainTheme);
    transform: scale(.9);
}

.spotifyTrackActions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.spotifyTrackFavoriteButton {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotifyTrackFavoriteButton svg {
    width: 26px;
    height: 26px;
    fill: transparent;
    stroke: currentColor;
}

.spotifyTrackFavoriteButton:not(.active),
.spotifyTrackFavoriteButton:not(.active) svg,
.spotifyTrackFavoriteButton:not(.active) svg * {
    color: #fff !important;
    fill: #fff !important;
}

.spotifyTrackFavoriteButton.active,
.spotifyTrackFavoriteButton.active svg,
.spotifyTrackFavoriteButton.active svg * {
    color: #e85d68 !important;
    fill: #e85d68 !important;
}

.spotifyTrackQueueButton {
    width: 42px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.86);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spotifyTrackQueueButton svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.playbackQueueModal {
    position: fixed;
    inset: 0;
    z-index: 220000;
    padding-top: max(28px, env(safe-area-inset-top));
    background: rgba(0,0,0,.66);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: flex;
    align-items: flex-end;
}

.playbackQueueModal.closed { display: none; }

.playbackQueueSheet {
    box-sizing: border-box;
    width: 100%;
    max-height: min(82vh, 720px);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: #111416;
    color: #fff;
    box-shadow: 0 -24px 70px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
}

.playbackQueueHeader {
    padding: 20px 20px 13px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.playbackQueueEyebrow { color: var(--mainTheme); font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.playbackQueueHeader h2 { margin: 3px 0 0; font-size: 21px; font-weight: 650; }
.playbackQueueClose { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.75); }
.playbackQueueClose svg { width: 24px; height: 24px; fill: currentColor; }
.playbackQueueContent { min-height: 120px; overflow-y: auto; padding: 8px 14px 12px; }
.playbackQueueSectionLabel { padding: 12px 6px 7px; color: rgba(255,255,255,.48); font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.playbackQueueRow { min-height: 62px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; border-radius: 10px; }
.playbackQueueRow.current { background: rgba(255,255,255,.045); }
.playbackQueueTrack { min-width: 0; padding: 6px; border: 0; background: transparent; color: #fff; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 11px; text-align: left; }
.playbackQueueTrack img { width: 48px; height: 48px; border-radius: 5px; object-fit: cover; }
.playbackQueueTrack span { min-width: 0; display: flex; flex-direction: column; }
.playbackQueueTrack strong,
.playbackQueueTrack small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playbackQueueTrack strong { font-size: 13px; font-weight: 550; }
.playbackQueueTrack small { margin-top: 3px; color: rgba(255,255,255,.48); font-size: 10px; }
.playbackQueuePlaying { padding-right: 10px; color: var(--mainTheme); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.playbackQueueActions { display: flex; align-items: center; }
.playbackQueueActions button { width: 36px; height: 44px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.65); font-size: 20px; }
.playbackQueueActions button:disabled { opacity: .2; }
.playbackQueueActions [data-remove-index] { color: #e85d68; font-size: 25px; }
.playbackQueueFooter { padding: 12px 20px 0; border-top: 1px solid rgba(255,255,255,.09); }
.playbackQueueFooter button { min-height: 44px; width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: transparent; color: rgba(255,255,255,.78); font-weight: 600; }
.playbackQueueFooter button:disabled { opacity: .35; }
.playbackQueueEmpty { min-height: 150px; display: grid; place-items: center; color: rgba(255,255,255,.5); text-align: center; }

@media (min-width: 720px) {
    .playbackQueueModal { align-items: center; justify-content: center; padding: 30px; }
    .playbackQueueSheet { width: min(100%, 560px); border-radius: 22px; padding-bottom: 16px; }
}

@media (max-width: 420px) {
    .spotifyTrackActions { gap: 0; }
    .spotifyTrackFavoriteButton,
    .spotifyTrackQueueButton,
    .spotifyTrackListButton { width: 38px; }
}

.addTrackListModal {
    position: fixed;
    inset: 0;
    z-index: 200500;
    padding: 22px;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.addTrackListModal.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.addTrackListModal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.addTrackListDialog {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 330px);
    max-height: min(72vh, 520px);
    padding: 24px 20px 20px;
    border: 1px solid #303030;
    border-radius: 18px;
    background: #171717;
    color: #fff;
    box-shadow:
        0 24px 70px
        rgba(0,0,0,.55);
}

.addTrackListDialog h2 {
    margin: 0 42px 20px 0;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

.addTrackListClose {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.addTrackListClose .svgIcon,
.addTrackListClose svg {
    width: 25px;
    height: 25px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
}

.addTrackListChoices {
    max-height: 330px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.addTrackListChoice {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #303030;
    border-radius: 10px;
    background: #0f0f0f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: "Montserrat", sans-serif;
    text-align: left;
}

.addTrackListChoice span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
}

.addTrackListChoice small {
    flex: 0 0 auto;
    color: var(--mainTheme);
    font-size: 10px;
}

.addTrackListChoice.alreadyAdded {
    opacity: .5;
}

.addTrackListMessage {
    min-height: 18px;
    margin-top: 8px;
    color: #ff7777;
    font-size: 11px;
    line-height: 16px;
}

.addTrackListLoading,
.addTrackListEmpty {
    padding: 28px 10px;
    color: rgba(255,255,255,.55);
    text-align: center;
    font-size: 12px;
}

/* =====================================================
   FULL PLAYER — TRACK LYRICS
===================================================== */

.spotifyLyricsSection {
    box-sizing: border-box;
    width: 100%;
    max-width: 370px;

    margin:
        34px
        auto
        12px;

    padding:
        20px
        18px
        24px;

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            .09
        );

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.spotifyLyricsSection[hidden] {
    display: none;
}

.spotifyLyricsHeading {
    margin:
        0
        0
        16px;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;
    font-weight: 650;
    line-height: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spotifyLyricsText {
    color: #fff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 370px) {
    .spotifyLyricsSection {
        padding:
            18px
            15px
            22px;
    }

    .spotifyLyricsText {
        font-size: 16px;
    }
}

/* =====================================================
   TRACK LYRICS — SMOOTH TRACK CHANGE
===================================================== */

.spotifyLyricsSection {
    transition:
        opacity .18s ease;
}

.spotifyLyricsSection.lyricsUpdating {
    opacity: .38;
}

.spotifyLyricsSection.lyricsUpdating
.spotifyLyricsText {
    opacity: 0;
}

.spotifyLyricsText {
    transition:
        opacity .18s ease;
}

.spotifyLyricsSection[hidden].lyricsUpdating {
    display: block;
    visibility: hidden;
    min-height: 180px;
}

/* =====================================================
   TRACK LYRICS — SYNCHRONIZED LRC
===================================================== */

.spotifyLyricsSection.syncedLyricsSection {
    padding-bottom: 14px;
}

.spotifyLyricsText.syncedLyricsText {
    position: relative;
    max-height: min(52vh, 500px);
    padding:
        34px
        3px
        42px;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;

    white-space: normal;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0,
            #000 34px,
            #000 calc(100% - 42px),
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0,
            #000 34px,
            #000 calc(100% - 42px),
            transparent 100%
        );
}

.spotifyLyricsText.syncedLyricsText::-webkit-scrollbar {
    display: none;
}

.spotifyLyricsLine {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;

    margin: 0;
    padding:
        10px
        8px
        10px
        16px;

    border: 0;
    border-radius: 8px;
    background: transparent;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 17px;
    font-weight: 560;
    line-height: 1.42;
    letter-spacing: -.012em;
    text-align: left;

    cursor: pointer;
    touch-action: manipulation;

    transform:
        scale(1);

    transform-origin:
        left center;

    transition:
        color .22s ease,
        opacity .22s ease,
        transform .24s ease,
        background-color .22s ease;
}

.spotifyLyricsLine::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 50%;

    width: 4px;
    height: 0;

    border-radius: 999px;
    background:
        var(
            --mainTheme,
            #47d7ff
        );

    transform:
        translateY(-50%);

    transition:
        height .24s ease,
        box-shadow .24s ease;
}

.spotifyLyricsLine.active {
    z-index: 1;

    color: #fff;

    background:
        rgba(
            255,
            255,
            255,
            .055
        );

    font-weight: 760;

    transform:
        scale(1.025);

    text-shadow:
        0
        2px
        18px
        rgba(
            0,
            0,
            0,
            .34
        );
}

.spotifyLyricsLine.active::before {
    height: 64%;

    box-shadow:
        0
        0
        15px
        color-mix(
            in srgb,
            var(
                --mainTheme,
                #47d7ff
            )
            72%,
            transparent
        );
}

.spotifyLyricsLine:active {
    color: #fff;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}

@supports not (
    box-shadow:
        0 0 10px
        color-mix(
            in srgb,
            #fff 50%,
            transparent
        )
) {
    .spotifyLyricsLine.active::before {
        box-shadow:
            0
            0
            14px
            rgba(
                71,
                215,
                255,
                .45
            );
    }
}

@media (max-width: 370px) {
    .spotifyLyricsText.syncedLyricsText {
        max-height: min(50vh, 450px);
    }

    .spotifyLyricsLine {
        padding-left: 14px;
        font-size: 16px;
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .spotifyLyricsText.syncedLyricsText {
        scroll-behavior: auto;
    }

    .spotifyLyricsLine,
    .spotifyLyricsLine::before {
        transition: none;
    }
}

/* PLAYER 2.6: portada alineada amb la vista de l'àlbum */
#playerScreen.spotifyPlayerScreen {
    padding-top: calc(env(safe-area-inset-top, 0px) + 24px) !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

#playerScreen .spotifyPlayerTopBar {
    display: none !important;
}

#playerScreen .spotifyCoverButton {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto clamp(34px, 7vh, 54px) !important;
    border-radius: 5px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42) !important;
}

#playerScreen .spotifyPlayerCover {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
}

@media (max-height: 760px) {
    #playerScreen.spotifyPlayerScreen {
        padding-top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    }

    #playerScreen .spotifyCoverButton {
        max-width: 300px !important;
        margin-bottom: 26px !important;
    }
}

@media (max-width: 370px) {
    #playerScreen.spotifyPlayerScreen {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}