.tabbar {
  --tab-width:min(140px, calc((100vw - 40px - var(--telegram-safe-left) - var(--telegram-safe-right)) / 2));
  position:fixed; left:0; right:0; margin:auto;
  bottom:calc(14px + max(env(safe-area-inset-bottom, 0px), var(--telegram-safe-bottom)));
  width:max-content; display:flex; direction:rtl; padding:5px; z-index:50;
  background:#fff; border:1px solid #f1f1f4; border-radius:99px;
  box-shadow:0 8px 28px rgba(20,20,26,.12);
}
.tabbar a {
  position:relative; z-index:1; width:var(--tab-width);
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 0; border-radius:99px;
  font-size:14px; font-weight:500; text-decoration:none; color:#8b8b96;
  transition:color .25s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.tabbar a.on { color:#f0142f; font-weight:700; }
.tabbar a:active { transform:scale(.94); }
.tabbar a:focus-visible { outline:2px solid #f0142f; outline-offset:2px; }
.tabbar svg {
  width:22px; height:22px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.tabbar__pill {
  position:absolute; top:5px; bottom:5px; right:5px; width:var(--tab-width);
  border-radius:99px; background:#fff2f3; pointer-events:none;
  transition:transform .45s cubic-bezier(.3,1.3,.5,1);
}
.tabbar.second .tabbar__pill { transform:translateX(-100%); }
@media (prefers-reduced-motion:reduce) {
  .tabbar__pill,.tabbar a { transition:none; }
}