.bottom-nav-v2{
  position:fixed;
  bottom:0; left:0; right:0;
  height:72px;
  background:var(--bn-bg,#fff);
  border-top:1px solid #e5e5e5;
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:1050;
  padding-bottom:env(safe-area-inset-bottom);
}
.bn-item{
  flex:1;
  text-align:center;
  background:none;
  border:0;
  color:#777;
  font-size:11px;
  text-decoration:none;
  position:relative;
  padding:6px 0;
}
.bn-item .icon{ display:block; font-size:20px; line-height:1.2; }
.bn-item.active{ color:#000; font-weight:600; }
.bn-primary{
  background:#000; color:#fff; border-radius:22px;
  margin-top:-28px; padding:12px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.bn-primary .icon{ font-size:22px; }
.bn-item .badge{
  position:absolute; top:6px; right:18px;
  background:#dc3545; color:#fff; font-size:10px;
  border-radius:10px; padding:2px 6px;
}
@media (max-width:768px){ body{ padding-bottom:88px; } }
@media (prefers-color-scheme: dark){
  .bottom-nav-v2{ --bn-bg:#111; border-top-color:#222; }
  .bn-item{ color:#aaa; }
  .bn-item.active{ color:#fff; }
}