.app-bottom-nav{display:none}
@media(max-width:700px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
  .app-bottom-nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed;
    z-index:60;
    inset:auto 0 0;
    box-sizing:border-box;
    width:100%;
    min-height:68px;
    padding:6px 4px max(6px,env(safe-area-inset-bottom));
    background:rgba(255,253,249,.97);
    border-top:1px solid #e3ddcf;
    box-shadow:0 -8px 28px rgba(64,78,68,.08);
    backdrop-filter:blur(16px);
    direction:rtl
  }
  .app-bottom-nav a{
    min-width:0;
    min-height:44px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    padding:1px;
    color:#838a83;
    font-family:"Tajawal","Segoe UI",Tahoma,sans-serif;
    font-size:.59rem;
    font-weight:500;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent
  }
  .app-bottom-nav .app-nav-label{display:block;max-width:100%;overflow:hidden;text-overflow:clip}
  .app-bottom-nav .app-nav-icon{
    width:27px;
    height:27px;
    flex:0 0 27px;
    overflow:visible;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round
  }
  .app-bottom-nav .app-nav-marker{display:block;width:16px;height:2.5px;flex:0 0 2.5px;border-radius:99px;background:transparent}
  .app-bottom-nav a.active{color:#4f6e58;font-weight:700}
  .app-bottom-nav a.active .app-nav-icon{stroke-width:2}
  .app-bottom-nav a.active .app-nav-marker{background:#d6977d}
  .app-bottom-nav a:focus-visible{outline:2px solid #d6977d;outline-offset:-2px;border-radius:8px}
}