/* HLB V5.4.2o - Bigger + centered mobile bottom nav */
@media (max-width:820px){
  :root{
    --hlb-v542o-nav-h:58px;
  }

  .mobile-nav.mobile-nav-v43{
    min-height:unset !important;
    height:calc(var(--hlb-v542o-nav-h) + max(4px, calc(env(safe-area-inset-bottom,0px) - 10px))) !important;
    padding:4px 10px max(4px, calc(env(safe-area-inset-bottom,0px) - 10px)) !important;
    align-items:stretch !important;
  }

  .mobile-nav.mobile-nav-v43 > a{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    gap:4px !important;
    padding:2px 2px !important;
    line-height:1.08 !important;
    font-size:10.5px !important;
    font-weight:700 !important;
  }

  .mobile-nav.mobile-nav-v43 > a > span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:24px !important;
    height:24px !important;
    margin:0 auto !important;
  }

  .mobile-nav.mobile-nav-v43 > a > span > svg,
  .mobile-nav.mobile-nav-v43 > a > svg{
    width:24px !important;
    height:24px !important;
  }

  .mobile-nav.mobile-nav-v43 > a.active::before{
    width:20px !important;
    height:4px !important;
    top:2px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    border-radius:999px !important;
  }

  .mobile-nav.mobile-nav-v43 a span>b{
    right:-7px !important;
    top:-6px !important;
    min-width:15px !important;
    height:15px !important;
    font-size:7px !important;
    line-height:11px !important;
    border-width:2px !important;
  }

  .player-shell{
    bottom:calc(var(--hlb-v542o-nav-h) + max(4px, calc(env(safe-area-inset-bottom,0px) - 10px))) !important;
  }

  .music-app{
    padding-bottom:calc(var(--hlb-v542o-nav-h) + max(4px, calc(env(safe-area-inset-bottom,0px) - 10px))) !important;
  }

  .page-main{
    padding-bottom:154px !important;
  }

  .player-queue-drawer{
    bottom:calc(var(--hlb-v542o-nav-h) + 8px + max(4px, calc(env(safe-area-inset-bottom,0px) - 10px))) !important;
  }
}

@media (max-width:430px){
  :root{
    --hlb-v542o-nav-h:57px;
  }
  .mobile-nav.mobile-nav-v43 > a{
    font-size:10px !important;
  }
  .mobile-nav.mobile-nav-v43 > a > span,
  .mobile-nav.mobile-nav-v43 > a > span > svg,
  .mobile-nav.mobile-nav-v43 > a > svg{
    width:23px !important;
    height:23px !important;
  }
}

@media (max-width:370px){
  :root{
    --hlb-v542o-nav-h:56px;
  }
  .mobile-nav.mobile-nav-v43 > a{
    font-size:9.5px !important;
    gap:3px !important;
  }
  .mobile-nav.mobile-nav-v43 > a > span,
  .mobile-nav.mobile-nav-v43 > a > span > svg,
  .mobile-nav.mobile-nav-v43 > a > svg{
    width:22px !important;
    height:22px !important;
  }
}