.tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(15, 23, 42, .08);
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
}

.tabbar__item{
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  color: rgba(15,23,42,.58);
}

.tabbar__icon{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
}

.tabbar__label{
  font-size: 11px;
  letter-spacing: .2px;
}

.tabbar__item--active{
  color: rgba(15,23,42,.92);
}

.tabbar__item--active .tabbar__icon{
  border-color: rgba(255,77,79,.35);
  background: rgba(255,77,79,.10);
}