.shocx-tabbar{ display:none; }

@media (max-width:720px){
  body:has(.shocx-tabbar){ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

  .shocx-tabbar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:200;
    padding:0 12px calc(10px + env(safe-area-inset-bottom));
    pointer-events:none;
  }
  .shocx-tabbar__inner{
    pointer-events:auto;
    display:flex; align-items:center; gap:2px; height:60px; padding:6px;
    border-radius:24px;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(22px) saturate(185%);
    backdrop-filter:blur(22px) saturate(185%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),     /* верхний спекуляр-блик */
      inset 0 0 0 1px rgba(255,255,255,.35),    /* внутренняя стеклянная грань */
      0 8px 30px rgba(20,10,18,.18);
  }
  .shocx-tabbar__item{
    flex:1; height:48px; border-radius:18px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    text-decoration:none; color:#5c5c63; font-size:11px; letter-spacing:.01em; position:relative;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s cubic-bezier(.2,.7,.2,1.4), color .2s ease;
  }
  .shocx-tabbar__item:active{ transform:scale(.93); }
  .shocx-tabbar__item svg{ width:23px; height:23px; display:block;
    stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .shocx-tabbar__lab{ line-height:1; }
  .shocx-tabbar__item.is-active{ color:#8b253b; }
  .shocx-tabbar__item.is-active::before{
    content:""; position:absolute; inset:0; z-index:-1; border-radius:18px;
    background:rgba(255,255,255,.6);
    -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),       /* спекуляр-блик сверху */
      inset 0 0 0 .5px rgba(139,37,59,.14),      /* тонкая бордовая грань */
      0 5px 16px rgba(139,37,59,.18);
  }
  .shocx-tabbar__badge{
    position:absolute; top:1px; left:calc(50% + 8px);
    min-width:16px; height:16px; padding:0 4px; border-radius:9px;
    background:#8b253b; color:#fff; font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center; line-height:1;
    box-shadow:0 1px 4px rgba(139,37,59,.5);
  }
  @media (prefers-reduced-transparency:reduce){
    .shocx-tabbar__inner{ background:#f4f4f6; -webkit-backdrop-filter:none; backdrop-filter:none; }
    .shocx-tabbar__item.is-active::before{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  }
  @media (prefers-reduced-motion:reduce){
    .shocx-tabbar__item{ transition:none; }
    .shocx-tabbar__item:active{ transform:none; }
  }
}