/* Bottom navigation pro v1 */

.bnav{
  left:18px!important;
  right:18px!important;
  bottom:calc(10px + env(safe-area-inset-bottom))!important;
  padding:6px!important;
  min-height:68px!important;
  border-radius:24px!important;
  background:
    linear-gradient(135deg,rgba(34,28,82,.90),rgba(10,18,40,.92))!important;
  border:1px solid rgba(167,139,250,.28)!important;
  backdrop-filter:blur(24px) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.5)!important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 24px rgba(109,40,217,.12)!important;
}

.bnav-item{
  min-width:0!important;
  padding:7px 1px 6px!important;
  border-radius:18px!important;
  color:#8f96af!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
}

.bnav-item .bi{
  font-size:20px!important;
  line-height:1!important;
  margin-bottom:4px!important;
  filter:grayscale(.45) opacity(.72)!important;
}

.bnav-item.active{
  color:#fff!important;
  background:
    linear-gradient(145deg,rgba(124,58,237,.82),rgba(91,33,182,.58))!important;
  border:1px solid rgba(196,181,253,.38)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 7px 18px rgba(91,33,182,.38),
    0 0 16px rgba(139,92,246,.22)!important;
}

.bnav-item.active .bi{
  transform:translateY(-1px) scale(1.12)!important;
  filter:none!important;
}

.bnav-item:active{
  transform:scale(.94)!important;
}

body{
  padding-bottom:calc(130px + env(safe-area-inset-bottom))!important;
}

#fo-command-v2{
  padding-bottom:calc(145px + env(safe-area-inset-bottom))!important;
}