.ui-tab-bar {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--viewport-bottom-offset) + max(var(--space-2), env(safe-area-inset-bottom)));
  left: var(--space-4);
  z-index: 75;
  display: grid;
  /* Gleich breite Einträge; ein längeres Wort (Französisch «Entraînement», Italienisch «Allenamento» bei 320 px) bekommt
     seine volle Breite, die übrigen teilen sich den Rest. So berühren sich die Beschriftungen nie. */
  grid-template-columns: repeat(5, minmax(max-content, 1fr));
  max-width: var(--tab-bar-max-width);
  margin: 0 auto;
  padding: var(--space-1);
  background: var(--tab-bar-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

.ui-tab-bar button {
  display: flex;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0 var(--space-1);
  align-items: center;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-tab) / 1.2 var(--font-system);
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.ui-tab-bar .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: inherit;
}

.ui-tab-bar button.active,
.ui-tab-bar button[aria-current="page"] {
  color: var(--accent);
  background: var(--tab-bar-active);
}

/* Ohne Weichzeichner (ältere Browser) bleibt die Leiste deckend und lesbar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ui-tab-bar {
    background: var(--card);
  }
}

body.auth-locked .ui-tab-bar {
  display: none;
}

body.ux-workout-mode.ui-shell-enabled .main {
  padding-bottom: calc(var(--tab-bar-clearance) + var(--workout-rest-timer-height)) !important;
}