.bottomnav{
  position:fixed;
  z-index:var(--zNav);
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(var(--navMaxW),calc(var(--appW) - 28px));
  padding:var(--gapMd) var(--gapMd) calc(var(--gapMd) + var(--appSafeBottom));
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  border-radius:var(--rXl) var(--rXl) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(var(--blurXl)) saturate(1.8);
  -webkit-backdrop-filter:blur(var(--blurXl)) saturate(1.8);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--gapXs);
  box-shadow:0 -10px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.14);
}

.navitem{
  border:0;
  background:transparent;
  color:var(--appMuted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--gapSm);
  font-size:.74rem;
  font-weight:800;
  transition:all var(--easeFast);
}

.navitem i{
  font-size:1.32rem;
  line-height:1;
}

.navitem.active{
  color:var(--appText);
}

.navitem.active i{
  color:var(--appBlue);
  text-shadow:0 0 18px rgba(24,182,255,.42);
}

@media (max-width:520px){
  .bottomnav{
    width:var(--appW);
    border-left:0;
    border-right:0;
    border-radius:var(--rLg) var(--rLg) 0 0;
  }

  .navitem{
    font-size:.66rem;
  }

  .navitem i{
    font-size:1.16rem;
  }
}