.mobile-bottom-bar{display:none}

@media (max-width:820px){
  :root{
    --mobile-bottom-height:72px;
  }

  .shell{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--top) minmax(0,1fr) calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom, 0px));
    grid-template-areas:"top" "main" "bottom";
  }

  .sidebar,
  .side-scroll,
  .side-toggle,
  #btnToggle,
  #nav{
    display:none !important;
  }

  .topbar{
    padding:0 10px;
    border-bottom:0;
    box-shadow:0 10px 24px rgba(30,64,175,.16);
  }

  .content{
    padding:0;
    overflow:auto;
    min-height:0;
  }

  .content-trail{
    display:none !important;
  }

  .mobile-bottom-bar{
    display:flex !important;
    grid-area:bottom;
    min-width:0;
    height:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom, 0px));
    max-height:calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    background:var(--topbar-chrome);
    border-top:0;
    box-shadow:0 -10px 24px rgba(30,64,175,.16);
    padding:4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
    overflow:hidden;
  }

  .mobile-nav{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    align-items:center;
    justify-items:center;
    gap:4px;
    direction:rtl;
    overflow:hidden;
  }

  html[data-sidebar] .mobile-nav .navbtn,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn,
  html[data-sidebar="open"] .mobile-nav .navbtn{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    min-width:0 !important;
    padding:0 2px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    color:#fff !important;
    border-radius:16px !important;
    transform:none !important;
    overflow:hidden !important;
  }

  html[data-sidebar] .mobile-nav .navbtn:hover,
  html[data-sidebar] .mobile-nav .navbtn:focus-visible,
  html[data-sidebar] .mobile-nav .navbtn:active,
  html[data-sidebar] .mobile-nav .navbtn.active{
    transform:none !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[data-sidebar] .mobile-nav .nav-ico,
  html[data-sidebar="collapsed"] .mobile-nav .nav-ico,
  html[data-sidebar="open"] .mobile-nav .nav-ico{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    flex:0 0 42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.17) !important;
    border:1px solid rgba(255,255,255,.30) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 6px 14px rgba(15,23,42,.10) !important;
    overflow:hidden !important;
  }

  html[data-sidebar] .mobile-nav .nav-img,
  html[data-sidebar] .mobile-nav .nav-ico img,
  html[data-sidebar="collapsed"] .mobile-nav .nav-img,
  html[data-sidebar="collapsed"] .mobile-nav .nav-ico img,
  html[data-sidebar="open"] .mobile-nav .nav-img,
  html[data-sidebar="open"] .mobile-nav .nav-ico img{
    width:24px !important;
    height:24px !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:24px !important;
    max-height:24px !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
  }

  html[data-sidebar] .mobile-nav .navbtn.active .nav-ico{
    background:#ffffff !important;
    border-color:rgba(255,255,255,.95) !important;
    box-shadow:0 8px 18px rgba(15,23,42,.18) !important;
  }

  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    max-width:46px !important;
    max-height:46px !important;
    flex-basis:46px !important;
  }

  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img{
    width:26px !important;
    height:26px !important;
    max-width:26px !important;
    max-height:26px !important;
  }

  html[data-sidebar] .mobile-nav .nav-txt,
  html[data-sidebar="collapsed"] .mobile-nav .nav-txt,
  html[data-sidebar="open"] .mobile-nav .nav-txt{
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    font-size:9px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    color:#ffffff !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    letter-spacing:0 !important;
  }

  .taif-topbar-auth,
  .taif-topbar-auth--compact,
  .taif-topbar-actions,
  .taif-topbar-actions--compact{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }

  .taif-topbar-name-chip,
  .taif-sync-status{
    max-width:calc(50vw - 20px);
    min-height:32px;
    padding:6px 10px;
    font-size:12px;
  }

  .panel{
    min-height:100%;
  }
}

@media (max-width:430px){
  :root{
    --top:54px;
    --mobile-bottom-height:68px;
  }

  html[data-sidebar] .mobile-nav .nav-ico,
  html[data-sidebar="collapsed"] .mobile-nav .nav-ico,
  html[data-sidebar="open"] .mobile-nav .nav-ico{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    flex-basis:38px !important;
  }

  html[data-sidebar] .mobile-nav .nav-img,
  html[data-sidebar] .mobile-nav .nav-ico img,
  html[data-sidebar="collapsed"] .mobile-nav .nav-img,
  html[data-sidebar="collapsed"] .mobile-nav .nav-ico img,
  html[data-sidebar="open"] .mobile-nav .nav-img,
  html[data-sidebar="open"] .mobile-nav .nav-ico img{
    width:22px !important;
    height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
  }

  html[data-sidebar] .mobile-nav .nav-txt,
  html[data-sidebar="collapsed"] .mobile-nav .nav-txt,
  html[data-sidebar="open"] .mobile-nav .nav-txt{
    font-size:8.5px !important;
  }

  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    flex-basis:42px !important;
  }

  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-img,
  html[data-sidebar="open"] .mobile-nav .navbtn[data-view="price-screen"] .nav-ico img{
    width:24px !important;
    height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
  }
}