/* NAUTEX · нижняя панель с вкладками */
/* ---------- Таббар ---------- */
.tb {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 32px); max-width: 448px; height: 70px; margin: 0 auto; padding: 0 6px;
  display: flex; align-items: stretch; border-radius: 26px;
  background: linear-gradient(180deg, var(--tb-top), var(--tb-bot)); color: var(--tb-ink);
  box-shadow: inset 0 1px 0 var(--tb-edge), inset 0 -2px 0 var(--tb-deep),
    0 2px 4px var(--tb-deep), 0 10px 20px -6px var(--tb-deep), var(--tb-shadow);
}
.tb-side { flex: 1; display: flex; }
.tb-tab, .tb-mid {
  position: relative; flex: 1; min-width: 0; border: 0; padding: 0 0 9px; background: none; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
  font: 600 12px/1.1 "Golos Text", system-ui, sans-serif;
}
.tb-mid { flex: 0 0 78px; }
.tb-ic {
  width: 44px; height: 34px; display: grid; place-items: center; border-radius: 14px;
  transition: box-shadow .12s ease-out, color .12s ease-out;
}
.tb-tab[aria-pressed="true"] .tb-ic {
  color: var(--tb-active);
  background: var(--tb-bot);
  box-shadow: inset 3px 3px 7px var(--tb-deep), inset -2px -2px 5px var(--tb-edge);
}
.tb-circle {
  position: absolute; top: -22px; left: 50%; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--tb-hi), var(--tb-bot));
  /* неоморфизм: светлая тень слева сверху, тёмная справа снизу */
  box-shadow: -5px -5px 12px var(--tb-edge), 6px 7px 14px var(--tb-deep), inset 1px 1px 0 var(--tb-edge);
  transition: box-shadow .12s ease-out, color .12s ease-out;
}
.tb-mid[aria-pressed="true"] .tb-circle { color: var(--tb-active); background: var(--tb-bot); box-shadow: inset 4px 4px 9px var(--tb-deep), inset -3px -3px 8px var(--tb-edge); }
.tb-mid .tb-circle { transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease-out; }
.tb-mid:active .tb-circle { transform: scale(.96); box-shadow: inset 4px 4px 9px var(--tb-deep), inset -3px -3px 8px var(--tb-edge); }
.tb-badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: grid; place-items: center; background: var(--badge-bg); color: var(--badge-ink); font-size: 12px; font-weight: 700;
  border: 2px solid var(--tb-top);
}
.tb-badge[hidden] { display: none; }
.tb-badge.pop { animation: pop .32s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform: scale(.4); } }
.tb button:focus-visible { outline: 3px solid var(--tb-ink); outline-offset: -3px; border-radius: 16px; }