.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-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;
  }
}


/* TAIF mobile-only auth/action placement: user + sync status + circular logout in bottom bar. */
.taif-mobile-auth-actions{display:none}

@media (max-width:820px){
  .mobile-nav .navbtn[data-action="factory-reset"]{
    display:none !important;
  }

  .mobile-bottom-bar{
    justify-content:flex-start;
    gap:5px;
    padding-inline:5px;
    direction:ltr;
  }

  .mobile-nav{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    gap:2px;
  }

  .taif-topbar-actions--auth{
    display:none !important;
  }

  .taif-mobile-auth-actions{
    display:flex;
    order:-1;
    flex:0 0 clamp(78px, 23vw, 92px);
    width:clamp(78px, 23vw, 92px);
    min-width:0;
    height:100%;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    direction:ltr;
    overflow:hidden;
  }

  .taif-mobile-auth-actions[hidden]{
    display:none !important;
  }


  .taif-mobile-user-chip{
    display:none !important;
  }

  .taif-mobile-user-chip{
    min-width:0;
    flex:1 1 auto;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    padding:0 5px;
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
    overflow:hidden;
  }

  .taif-mobile-user-chip__avatar{
    width:20px;
    height:20px;
    min-width:20px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#1d4ed8;
    background:#fff;
    overflow:hidden;
  }

  .taif-mobile-user-chip__avatar svg{
    width:14px;
    height:14px;
    display:block;
  }

  .taif-mobile-user-chip__name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.8px;
    line-height:1;
    font-weight:1000;
  }

  .taif-mobile-online-status{
    flex:0 0 42px;
    width:42px;
    height:28px;
    min-width:42px;
    max-width:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.32);
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:7.4px;
    line-height:1;
    font-weight:1000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  }

  .taif-mobile-online-status[data-state="ready"]{
    background:rgba(34,197,94,.24);
    border-color:rgba(187,247,208,.56);
  }

  .taif-mobile-online-status[data-state="syncing"],
  .taif-mobile-online-status[data-state="deferred"]{
    background:rgba(245,158,11,.24);
    border-color:rgba(253,230,138,.56);
  }

  .taif-mobile-online-status[data-state="error"]{
    background:rgba(239,68,68,.27);
    border-color:rgba(254,202,202,.58);
  }

  .taif-mobile-logout{
    flex:0 0 32px;
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    display:grid;
    place-items:center;
    padding:0;
    color:#1d4ed8;
    background:#fff;
    box-shadow:0 6px 14px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.85);
    cursor:pointer;
    overflow:hidden;
  }

  .taif-mobile-logout svg{
    width:17px;
    height:17px;
    display:block;
  }

  .taif-mobile-logout:active{
    transform:scale(.96);
  }

  html[data-sidebar] .mobile-nav .navbtn,
  html[data-sidebar="collapsed"] .mobile-nav .navbtn,
  html[data-sidebar="open"] .mobile-nav .navbtn{
    gap:2px !important;
    padding-inline:1px !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:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    flex-basis:34px !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:20px !important;
    height:20px !important;
    max-width:20px !important;
    max-height:20px !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: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 .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: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:7.4px !important;
    line-height:1.05 !important;
  }
}

@media (max-width:430px){
  .taif-mobile-auth-actions{
    flex-basis:74px;
    width:74px;
    gap:3px;
  }

  .taif-mobile-user-chip{
    height:30px;
    padding-inline:4px;
  }

  .taif-mobile-user-chip__avatar{
    width:18px;
    height:18px;
    min-width:18px;
  }

  .taif-mobile-user-chip__avatar svg{
    width:13px;
    height:13px;
  }

  .taif-mobile-user-chip__name{
    font-size:7.8px;
  }

  .taif-mobile-online-status{
    flex-basis:38px;
    width:38px;
    min-width:38px;
    max-width:38px;
    height:26px;
    padding-inline:2px;
    font-size:6.5px;
  }

  .taif-mobile-logout{
    flex-basis:29px;
    width:29px;
    height:29px;
    min-width:29px;
    min-height:29px;
  }

  .taif-mobile-logout svg{
    width:15px;
    height:15px;
  }

  html[data-sidebar] .mobile-nav .nav-ico,
  html[data-sidebar="collapsed"] .mobile-nav .nav-ico,
  html[data-sidebar="open"] .mobile-nav .nav-ico{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    max-width:30px !important;
    max-height:30px !important;
    flex-basis:30px !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:18px !important;
    height:18px !important;
    max-width:18px !important;
    max-height:18px !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:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    flex-basis:34px !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:20px !important;
    height:20px !important;
    max-width:20px !important;
    max-height:20px !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:6.8px !important;
  }
}

/* TAIF mobile-only topbar removal: reclaim the full upper space for sections while keeping desktop untouched. */
@media (max-width:820px){
  :root{
    --top:0px;
  }

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

  .topbar{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .content{
    grid-area:main !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    overflow:auto !important;
  }

  .panel{
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}