#bottomMenu{

    position:fixed;
    left:0;
    right:0;
    height: 62px;
    display:flex;
    justify-content:space-around;
    align-items:center;
    background:#000;    
    z-index:9999;
}

body{
    visibility:hidden;
}

.menuButton{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;    
    font-size:9px;
    font-weight:500;
    gap:0px;
    opacity:1;
    color: #888888; 
    --icon:#888;   
}

.menuButton span{

    font-size:10px;
    margin-top:0px;
    line-height:1;
    font-family:'Montserrat',sans-serif;
    letter-spacing:.5px;
}

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

#logo {
    width: 78%;
    max-width: 340px;
    margin-top: 0px;
    display: block;
}

#menuButton{

    position:fixed;
    top:18px;
    left:22px;
    width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:500;
       
}

.menuIcon{

    width:18px;
    height:18px;
    display:block;
    margin-bottom:4px;
    opacity:1;
    filter:brightness(0) invert(1);
    transition:filter .25s, opacity .25s;  

}

#artistRandomButton.active img {
    filter:
        brightness(0)
        saturate(100%)
        invert(82%)
        sepia(37%)
        saturate(2705%)
        hue-rotate(163deg)
        brightness(101%)
        contrast(101%);
}

#artistActions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;

    width: calc(100% - 28px);
    max-width: 340px;

    margin: 12px auto 18px;
}

#artistActions button {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

#artistLikeButton.active img {
    filter:
        brightness(0)
        saturate(100%)
        invert(82%)
        sepia(37%)
        saturate(2705%)
        hue-rotate(163deg)
        brightness(101%)
        contrast(101%);
}

#artistActions img {
    width: 28px;
    height: 28px;
    display: block;

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

    transition:
        transform .2s ease,
        opacity .2s ease,
        filter .2s ease;
}

#artistActions button:hover img {
    transform: scale(1.1);
    opacity: 1;
}

.menuButton.active .menuIcon{

    opacity:1;
    color:var(--mainTheme);
    filter:
        brightness(0)
        saturate(100%)
        invert(82%)
        sepia(37%)
        saturate(2705%)
        hue-rotate(163deg)
        brightness(101%)
        contrast(101%);
    }

#menuIcon:hover{

    transform:scale(1.08);
}

#exitIcon{

    width:25px;
    height:25px;
}

#artistHeaderImage{

    width:100%;
    height:240px;
    object-fit:cover;
}

#artistHeroContainer{

    display:none;
    width:100%;
    margin:0;
    padding:0;
}

#artistHeroImage{

    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    object-fit:cover;
}

.svgIcon{

    width:30px;
    height:30px;
    display:block;
    margin-bottom:4px;
    fill:currentColor;
    color:var(--icon);
}

/* ===============================
   ICON SPIN
=============================== */

.spin {
    color: var(--mainTheme);
    animation: iconSpin .8s linear infinite;

}

/* ===============================
   HOME SETTINGS
=============================== */

#homeSettings{

    position:absolute;
    top:18px;
    right:18px;
    width:28px;
    height:28px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    z-index:100;
}

#homeSettings.open .svgIcon {
    width: 28px;
    height: 28px;
    color: var(--mainTheme);
    transform: rotate(90deg);
    transition:
    color .25s ease,
    transform .35s ease;
}


#settingsTheme svg {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0;
}
.settingsSpin{
    animation:settingsSpin .35s ease;
}

@keyframes settingsSpin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(180deg);
    }
}

/* ===============================
   HOME SETTINGS MENU
=============================== */
#homeSettingsMenu {
    position: absolute;
    top: 60%;
    left: 50%;

    width: 280px;
    height: 180px;

    transform:
        translate(-50%, -50%);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

#homeSettingsMenu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1) !important;
    
}

#homeSettingsMenu.closed {
    opacity: 0;
    pointer-events: none;

    transform:
        translate(-50%, -47%)
        scale(.95);
}

.settingsOption {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);

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

    gap: 10px;

    color: white;
    cursor: pointer;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

#settingsReload {
    top: 0;
}

#settingsTheme {
    top: 100px;
}

.settingsOption .svgIcon {
    width: 34px;
    height: 34px;
    margin: 0;
    color: var(--mainTheme);
}

#homeSettingsMenu .settingsOption span {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

/* Mode de confirmació Reload */

#homeSettingsMenu.reload-mode
#settingsReload span {
    opacity: 0;
    visibility: hidden;
}

#homeSettingsMenu.reload-mode
#settingsTheme {
    opacity: 0;
    pointer-events: none;
}

#reloadMenu {
    position: absolute;
    top: 45px;
    left: 50%;

    width: max-content;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        scale(.88);

    transform-origin: center;

    transition:
        opacity .25s ease,
        transform .28s ease,
        visibility 0s linear .28s;
}

#reloadMenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        scale(1);

    transition-delay: 0s;
}

#reloadMenu.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        scale(.88);
}

#reloadLibraryButton {
    width: 240px;
    height: 46px;

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

    margin: 0;

    border: 2px solid var(--mainTheme);
    border-radius: 25px;

    background: #000;
    color: #fff;

    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
}
#settingsReload .svgIcon.spin {
    transform-origin: center;
    animation: iconSpin .8s linear infinite !important;
}
@keyframes iconSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#settingsReload .svgIcon.spin {
    transform-origin: center center;
    transform-box: fill-box;
    animation: iconSpin .8s linear infinite !important;
}

/* ===============================
   SECTION MENU V2
=============================== */

#sectionMenu {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    background: #000;
    border: 0;
    position: relative;
    z-index: 100;
}

.sectionMenuButton {
    min-width: 70px;
    height: 58px;
    padding: 5px 6px 4px;
    border: 0;
    background: transparent;
    color: #777;
    --icon: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

.sectionMenuButton .svgIcon,
.sectionMenuButton .menuIcon {
    width: 25px;
    height: 25px;

    margin: 0 0 2px;

    color: currentColor;
    fill: currentColor;

    opacity: 1;
    filter: none;
}

.sectionMenuButton span {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .5px;
    color: currentColor;
    font-weight: 500;
}
.sectionMenuButton.active {
    color: var(--mainTheme);
    --icon: var(--mainTheme);
}

/* El menú inferior és sempre de quatre opcions. */
#bottomMenu .menuButton {
    width: 25%;
}

/* A Home, BACK és visible però no queda actiu. */
#bottomMenu .menuButton:not(.active) {
    color: #888;
    --icon: #888;
}

/* ===============================
   V2.1 — TOP LAYOUT ADJUSTMENTS
=============================== */

/* El cercador queda pràcticament enganxat a la part superior. */
.container-main {
    padding-top: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#screenTitle {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#screenTitle > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Menú contextual més compacte, enganxat al cercador i amb el fons del tema. */
#sectionMenu {
    height: 52px;
    min-height: 52px;
    margin-top: 2px;
    background: var(--themeBackground);
    gap: 42px;
}

.sectionMenuButton {
    height: 52px;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Evita separacions afegides abans del grid. */
.filter-container {
    margin-top: 0 !important;
}


/* ===============================
   V2.2 — HOME + PLAYER FADE
=============================== */

/* El primer botó global ara és HOME. */
#menuHome .svgIcon,
#menuHome .menuIcon {
    width: 25px;
    height: 25px;
}

/* Degradat suau del contingut cap al mini reproductor. */
#nowPlaying::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -42px;
    height: 42px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--themeBackground) 35%, transparent) 42%,
        var(--themeBackground) 100%
    );
}

/* Fallback per WebViews que no suportin color-mix(). */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    #nowPlaying::before {
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(14,14,14,.45) 48%,
            var(--themeBackground) 100%
        );
    }
}

/* CONTINUE LISTENING per sobre del degradat */
#continueTitle {
    z-index: 100001 !important;
    pointer-events: none;
}

/* ===============================
   HOME LOGO POSITION
=============================== */



#homeScreen #logo {
    width: 78%;
    max-width: 340px;
    display: block;
    margin-top: 35px !important;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    margin-top: 82px !important;
}
/* =====================================================
   BAITAI 2.0 — GLOBAL TOP / BOTTOM NAVIGATION
===================================================== */
:root {
    --nativeTopInset: 0px;
    --nativeBottomInset: 0px;
    --topMenuHeight: 54px;
    --bottomMenuHeight: 54px;
    --miniPlayerHeight: 56px;
}
:root {
    --nativeBottomInset: max(
        50px,
        env(safe-area-inset-bottom, 0px)
    );
}

#appTopChrome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100200;
    background: var(--themeBackground);
    transition: transform .25s ease, opacity .2s ease;
}

#appTopChrome.hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
}

#topMenu {
    height: var(--topMenuHeight);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

#topMenu::-webkit-scrollbar { display: none; }

.topMenuButton {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 22px;
    background: #292929;
    color: #d0d0d0;
    font: 600 14px/1 'Montserrat', sans-serif;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.topMenuButton.active {
    color: #071014;
    background: var(--mainTheme);
}

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

#globalSearchWrap {
    overflow: hidden;
    padding: 0 14px;
    transition: max-height .28s ease, opacity .22s ease, padding .28s ease;
}

#globalSearchWrap.closed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#globalSearchWrap.open {
    max-height: 68px;
    opacity: 1;
    padding-top: 2px;
    padding-bottom: 10px;
}

.globalSearchInner { position: relative; }

#globalSearch {
    width: 100%;
    height: 46px;
    padding: 0 44px 0 20px;
    border: 0;
    border-radius: 25px;
    outline: none;
    background: #1b1b1b;
    color: #fff;
    caret-color: var(--mainTheme);
    font-size: 16px;
}

#globalSearchClear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--mainTheme);
    font-size: 24px;
    opacity: 0;
    pointer-events: none;
}

#globalSearchClear.visible { opacity: 1; pointer-events: auto; }

body:has(#appTopChrome:not(.hidden)) .container-main,
body:has(#appTopChrome:not(.hidden)) .filter-container {
    transform: translateY(var(--topMenuHeight));
    transition: transform .28s ease;
}

body:has(#globalSearchWrap.open) .container-main,
body:has(#globalSearchWrap.open) .filter-container {
    transform: translateY(calc(var(--topMenuHeight) + 58px));
}

#bottomMenu {
    bottom: 0 !important;
    height: var(--bottomMenuHeight) !important;
    z-index: 100300 !important;
    padding: 2px 0 1px;
}

#bottomMenu .menuButton {
    width: 25%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #858585;
    --icon: #858585;
}

#bottomMenu .menuButton.active {
    color: var(--mainTheme);
    --icon: var(--mainTheme);
}

#bottomMenu .menuButton .svgIcon,
#bottomMenu .menuButton .menuIcon {
    width: 30px;
    height: 30px;
    margin-bottom: 1px;
}

#bottomMenu .menuButton span {
    
    font-size: 9px; }

/* La roda de Home ja no existeix a la V2.0. */
#homeSettings, #homeSettingsMenu { 
    display: none !important; 
    top: 64vh !important;
}


.settingsScreen,
.listsScreen {
    width: min(100%, 480px);
    margin: 0 auto;
    padding: 34px 20px calc(var(--miniPlayerHeight) + var(--bottomMenuHeight) + 30px);
}

.settingsScreen h1,
.listsScreen h1 {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 500;
}

.settingsCard {
    width: 100%;
    min-height: 72px;
    margin-bottom: 12px;
    padding: 0 20px;
    border: 1px solid #2b2b2b;
    border-radius: 16px;
    background: #181818;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    text-align: left;
}

.settingsCard .svgIcon {
    width: 28px;
    height: 28px;
    margin: 0;
    color: var(--mainTheme);
}

/* =====================================================
   BAITAI 2.1 — HOME / LIBRARY / BACK
===================================================== */

/* A V2.1 Settings torna a Home: anul·la la regla V2.0 que l'ocultava. */
#homeSettings {
    display: flex !important;
}

#homeSettingsMenu {
    display: block !important;
}

/* Tres opcions, centrades i amb més aire. */
#bottomMenu .menuButton {
    width: 33.3333% !important;
    flex: 1 1 33.3333%;
}

#menuLibrary .svgIcon,
#menuLibrary .menuIcon {
    width: 23px !important;
    height: 23px !important;
}

/* Home queda buit: només logo, settings i Continue Listening. */
#homeScreen {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding-top: 0 !important;
}

/* El panell de Settings ocupa la zona central quan s'obre. */
#homeSettingsMenu {
    top: 57% !important;
    z-index: 100150;
}

/* Ja no existeixen ni el botó Search inferior ni la seva barra. */
#globalSearchWrap,
#menuSearch,
#menuSettings {
    display: none !important;
}

/* La barra superior continua sent exclusiva de Library. */
#appTopChrome {
    transform: translateY(0);
}

#appTopChrome.hidden {
    transform: translateY(-110%);
}

/* Neteja del layout antic que comptava amb el cercador desplegable. */
body:has(#appTopChrome:not(.hidden)) .container-main,
body:has(#appTopChrome:not(.hidden)) .filter-container {
    transform: translateY(var(--topMenuHeight));
}

/* El contingut de Home no mostra la llista de reproduccions recents. */
#homeScreen #listeningHistoryList,
#homeScreen .historyItem {
    display: none !important;
}

/* =====================================================
   BAITAI 2.2 — PHONE SAFE AREA + COMPACT NAVIGATION
===================================================== */
:root {
    --nativeBottomInset: max(48px, env(safe-area-inset-bottom, 0px));
    --nativeTopInset: env(safe-area-inset-top, 0px);
    --topMenuHeight: 48px;
    --bottomMenuHeight: 50px;
    --miniPlayerHeight: 54px;
}

/* Home: quatre botons, incloent Search. */
#bottomMenu .menuButton {
    width: 25% !important;
    flex: 1 1 25% !important;
}

#menuSearch { display: flex !important; }
#globalSearchWrap { display: block !important; }

/* Tot el bloc web queda per sobre de la navegació nativa d'Android. */
#bottomMenu {
    bottom: var(--nativeBottomInset) !important;
    height: var(--bottomMenuHeight) !important;
    padding: 1px 0 0 !important;
}

#bottomMenu .menuButton .svgIcon,
#bottomMenu .menuButton .menuIcon {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 2px !important;
}

#bottomMenu .menuButton span {
    font-size: 11px;
    margin-top: 0;
}

/* Pills superiors més petites perquè les quatre càpiguen. */
#topMenu {
    height: var(--topMenuHeight) !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
}

.topMenuButton {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    white-space: nowrap;
}

#globalSearchWrap.open {
    max-height: 62px !important;
    padding: 2px 12px 8px !important;
}

#globalSearch {
    height: 42px !important;
    font-size: 15px !important;
}

body:has(#appTopChrome:not(.hidden)) .container-main,
body:has(#appTopChrome:not(.hidden)) .filter-container {
    transform: translateY(var(--topMenuHeight)) !important;
}

body:has(#globalSearchWrap.open) .container-main,
body:has(#globalSearchWrap.open) .filter-container {
    transform: translateY(calc(var(--topMenuHeight) + 52px)) !important;
}

/* Logo de Home més avall sota la barra d'estat. */
#homeScreen #logo {
    margin-top: 62px !important;
}

#homeSettings {
    top: 20px !important;
}

/* Continue Listening acompanya el player i el menú cap amunt. */
#continueTitle {
    bottom: calc(
        var(--nativeBottomInset) +
        var(--bottomMenuHeight) +
        var(--miniPlayerHeight) + 7px
    ) !important;
}

/* =====================================================
   BAITAI 2.3 — HOME POSITION + TRUE SYSTEM SAFE AREAS
===================================================== */
:root {
    /* En aquesta WebView env(safe-area-inset-*) pot retornar 0.
       Reservem l'alçada real de les barres natives del mòbil. */
    --nativeTopInset: max(54px, env(safe-area-inset-top, 0px));
    --nativeBottomInset: max(46px, env(safe-area-inset-bottom, 0px));
}

/* La navegació superior comença sota el rellotge/bateria i queda fixa. */
#appTopChrome {
    top: var(--nativeTopInset) !important;
}

/* El contingut de Library comença sota barra nativa + menú superior. */
body:has(#appTopChrome:not(.hidden)) .container-main,
body:has(#appTopChrome:not(.hidden)) .filter-container {
    transform: translateY(
        calc(var(--nativeTopInset) + var(--topMenuHeight))
    ) !important;
    transition: transform .30s cubic-bezier(.2,.8,.2,1) !important;
}

body:has(#globalSearchWrap.open) .container-main,
body:has(#globalSearchWrap.open) .filter-container {
    transform: translateY(
        calc(var(--nativeTopInset) + var(--topMenuHeight) + 52px)
    ) !important;
}

/* El desplegable del cercador creix sense repintar la graella. */
#globalSearchWrap {
    display: block !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-8px);
    transition:
        max-height .30s cubic-bezier(.2,.8,.2,1),
        padding .30s cubic-bezier(.2,.8,.2,1),
        opacity .20s ease,
        transform .30s cubic-bezier(.2,.8,.2,1) !important;
}

#globalSearchWrap.open {
    max-height: 62px !important;
    padding: 2px 12px 8px !important;
    opacity: 1;
    transform: translateY(0);
}

/* Home: logo i Settings clarament més avall de la barra nativa. */
#homeScreen #logo {
    margin-top: 112px !important;
}

#homeSettings {
    top: 72px !important;
    right: 22px !important;
}

/* Settings apareix al centre de la zona buida, no sobre el logo. */
#homeSettingsMenu {
    position: fixed !important;
    top: 57vh !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100250 !important;
}

#homeSettingsMenu.closed {
        transform:translate(-50%, -46%)
                  scale(.95) !important;
}


/* =========================================
   HOME — ESTAT ACTIU DEFINITIU
========================================= */

body.home-mode #bottomMenu .menuButton {
    color: #888 !important;
    --icon: #888 !important;
}

body.home-mode #bottomMenu #menuHome {
    color: var(--mainTheme) !important;
    --icon: var(--mainTheme) !important;
}

body.home-mode #bottomMenu #menuHome .svgIcon,
body.home-mode #bottomMenu #menuHome .menuIcon {
    color: var(--mainTheme) !important;
    fill: var(--mainTheme) !important;
    opacity: 1 !important;
}
/* Tapa la zona entre el menú web i la navegació nativa d’Android */
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--nativeBottomInset);
    background: #000;

    z-index: 100250;
    pointer-events: none;
}

/* =====================================================
   TOP CHROME SEMPRE FIX, OPAC I AMB ESPAI INFERIOR
===================================================== */

:root {
    --libraryContentGap: 12px;
}

/* Cobreix també tota la zona del rellotge i bateria */
#appTopChrome {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    padding-top: var(--nativeTopInset) !important;

    background: var(--themeBackground) !important;
    opacity: 1 !important;

    z-index: 100200 !important;

    transform: none;
    box-sizing: border-box;

    /* Evita qualsevol transparència visual */
    isolation: isolate;
}

/* Tots els elements de la barra tenen el mateix fons opac */
#topMenu,
#globalSearchWrap,
.globalSearchInner {
    background: var(--themeBackground) !important;
}

/* Sense Search: contingut sota barra nativa + menú + aire */
body:has(#appTopChrome:not(.hidden))
.container-main,
body:has(#appTopChrome:not(.hidden))
.filter-container {
    transform: translateY(
        calc(
            var(--nativeTopInset)
            + var(--topMenuHeight)
            + var(--libraryContentGap)
        )
    ) !important;
}

/* Amb Search: continua tot fix i afegeix l’alçada del cercador */
body:has(#globalSearchWrap.open)
.container-main,
body:has(#globalSearchWrap.open)
.filter-container {
    transform: translateY(
        calc(
            var(--nativeTopInset)
            + var(--topMenuHeight)
            + 52px
            + var(--libraryContentGap)
        )
    ) !important;
}

/* El desplegable Search forma part del bloc sticky */
#globalSearchWrap {
    position: relative !important;
    z-index: 2;
}

/* Una mica d’aire visual sota l’última barra */
#appTopChrome::after {
    content: "";
    display: block;
    height: var(--libraryContentGap);
    background: var(--themeBackground);
}

/* ==============================
   SEARCH: treure la creu nativa
============================== */

#globalSearch {
    -webkit-appearance: none;
    appearance: none;
}

#globalSearch::-webkit-search-decoration,
#globalSearch::-webkit-search-cancel-button,
#globalSearch::-webkit-search-results-button,
#globalSearch::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

#globalSearch::-ms-clear,
#globalSearch::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* ==============================
   SEARCH: ajustar la creu bona
============================== */

#globalSearchClear {
    position: absolute;
    right: 16px;
    top: 46%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   HOME — SEPARAR LOGO I MENÚ SETTINGS
===================================================== */

/* Pugem lleugerament el logo */
#homeScreen #logo {
    margin-top: 82px !important;
}

/* Baixem el menú perquè no tapi el logo */
#homeSettingsMenu {
    top: 60vh !important;
}

/* Mateixa posició visual quan està tancat */
#homeSettingsMenu.closed {
    transform:
        translate(-50%, -46%)
        scale(.95) !important;
}

/* =====================================================
   HOME SETTINGS — THEME SELECTOR
===================================================== */

/* Settings una mica més amunt. */
#homeSettings {
    top: 62px !important;
}

/*
 * Panell central amb prou alçada per als submenús,
 * sense alterar la posició general de Reload.
 */
#homeSettingsMenu {
    width: 280px !important;
    height: 210px !important;
}

/* Estat normal. */
#settingsReload {
    top: 0;
}

#settingsTheme {
    top: 100px;
}

/*
 * En obrir Theme, la seva icona i el text
 * ocupen exactament la posició superior de Reload.
 */
#homeSettingsMenu.theme-mode
#settingsReload {
    opacity: 0;
    pointer-events: none;
}

#homeSettingsMenu.theme-mode
#settingsTheme {
    top: 0;
}

/* La icona i el nom continuen centrats com Reload. */
#settingsTheme {
    transition:
        top .28s cubic-bezier(.2,.8,.2,1),
        opacity .22s ease,
        transform .28s cubic-bezier(.2,.8,.2,1);
}

/* Paleta 2 × 3. */
#themeMenu {
    position: absolute;
    top: 76px;
    left: 50%;

    width: 150px;

    display: grid;
    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px 22px;

    transform:
        translateX(-50%)
        scale(.92);

    transform-origin: top center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .22s ease,
        transform .26s cubic-bezier(.2,.8,.2,1),
        visibility 0s linear .26s;
}

#themeMenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        scale(1);

    transition-delay: 0s;
}

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

.themeColorButton {
    position: relative;

    width: 28px;
    height: 14px;

    margin: 0 auto;
    padding: 0;

    border: 0;
    border-radius: 999px;

    background:
        var(--themeSwatch);

    cursor: pointer;

    box-shadow:
        0 0 0 2px
        transparent;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;
}

.themeColorButton[data-color="#48d8ff"] {
    --themeSwatch: #48d8ff;
}

.themeColorButton[data-color="#e97f28"] {
    --themeSwatch: #e97f28;
}

.themeColorButton[data-color="#e61d60"] {
    --themeSwatch: #e61d60;
}

.themeColorButton[data-color="#27e460"] {
    --themeSwatch: #27e460;
}

.themeColorButton[data-color="#e61d1d"] {
    --themeSwatch: #e61d1d;
}

.themeColorButton[data-color="#f048ff"] {
    --themeSwatch: #f048ff;
}

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

.themeColorButton.active {
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 5px
        rgba(255,255,255,.12);
}



/* En mode Reload, Theme continua desapareixent. */
#homeSettingsMenu.reload-mode
#themeMenu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =====================================================
   YOUR LIBRARY — HEADER + FILTER PILLS
===================================================== */

:root {
    --libraryHeaderHeight: 60px;
    --libraryTabsHeight: 46px;
}

#appTopChrome {
    padding-top: 4px;
}

.libraryHeader {
    box-sizing: border-box;
    width: 100%;
    height: var(--libraryHeaderHeight);

    padding: 10px 18px 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.libraryHeader h1 {
    margin: 0;

    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 650;
    line-height: 1;
}

#libraryCreateButton {
    min-width: 92px;
    height: 32px;

    padding: 0 13px;

    border: 0;
    border-radius: 999px;

    background: #292929;
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
    touch-action: manipulation;
}

#libraryCreateButton .svgIcon,
#libraryCreateButton svg {
    width: 15px;
    height: 15px;
    margin: 0;
    color: currentColor;
    fill: currentColor;
}

#topMenu {
    height: var(--libraryTabsHeight) !important;
    min-height: var(--libraryTabsHeight) !important;

    padding: 4px 54px 8px !important;
    gap: 9px !important;

    justify-content: center;
    overflow: visible !important;
}

.topMenuButton {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 88px;

    height: 28px !important;
    padding: 0 10px !important;

    border-radius: 999px !important;

    font-size: 11px !important;
    font-weight: 550 !important;
}

body:has(#appTopChrome:not(.hidden))
.container-main,
body:has(#appTopChrome:not(.hidden))
.filter-container {
    transform:
        translateY(
            calc(
                var(--nativeTopInset) +
                var(--libraryHeaderHeight) +
                var(--libraryTabsHeight)
            )
        ) !important;
}

body:has(#globalSearchWrap.open)
.container-main,
body:has(#globalSearchWrap.open)
.filter-container {
    transform:
        translateY(
            calc(
                var(--nativeTopInset) +
                var(--libraryHeaderHeight) +
                var(--libraryTabsHeight) +
                52px
            )
        ) !important;
}

@media (max-width: 370px) {
    .libraryHeader {
        padding-left: 14px;
        padding-right: 14px;
    }

    #topMenu {
        padding-left: 44px !important;
        padding-right: 44px !important;
        gap: 7px !important;
    }

    #libraryCreateButton {
        min-width: 88px;
    }
}

/* YOUR LIBRARY — separació neta sense degradat */

:root {
    --libraryContentGap: 18px;
}

#appTopChrome::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--libraryContentGap);
    background: var(--themeBackground);
    pointer-events: none;
}

body:has(#appTopChrome:not(.hidden))
.container-main,
body:has(#appTopChrome:not(.hidden))
.filter-container {
    transform:
        translateY(
            calc(
                var(--nativeTopInset) +
                var(--libraryHeaderHeight) +
                var(--libraryTabsHeight) +
                var(--libraryContentGap)
            )
        ) !important;
}

body:has(#globalSearchWrap.open)
.container-main,
body:has(#globalSearchWrap.open)
.filter-container {
    transform:
        translateY(
            calc(
                var(--nativeTopInset) +
                var(--libraryHeaderHeight) +
                var(--libraryTabsHeight) +
                var(--libraryContentGap) +
                52px
            )
        ) !important;
}

/* =====================================================
   YOUR LIBRARY — EXACT HEADER VERTICAL ALIGNMENT
===================================================== */

.libraryHeader {
    align-items: center !important;
}

.libraryHeader h1 {
    height: 32px;
    margin: 0 !important;

    display: flex;
    align-items: center;

    line-height: 32px !important;
}

#libraryCreateButton {
    height: 32px !important;
    margin: 0 !important;
    align-self: center;
}

/* =====================================================
   YOUR LIBRARY — ALIGN HEADER WITH LIST CONTENT
===================================================== */

.libraryHeader {
    box-sizing: border-box !important;

    /*
     * Mateix eix visual que el contingut de Lists:
     * títol, icona Rename, portada i controls.
     */
    padding-left: 28px !important;
    padding-right: 28px !important;
}

.libraryHeader h1,
#libraryCreateButton {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 370px) {
    .libraryHeader {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}