/* bottom tab bar: a floating rounded bar, the selected tab gets a soft pill */
.tabs{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;justify-content:center;gap:2px;
  max-width:520px;margin:0 auto;border-radius:24px;padding:6px;
  background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);box-shadow:var(--shadow-2)}
.tab{flex:1;background:none;border:0;border-radius:18px;padding:6px 0 4px;color:var(--sub);position:relative;display:grid;justify-items:center;gap:1px;min-height:52px;font-size:10.5px;font-weight:500;letter-spacing:.02em;transition:color .2s,background-color .25s}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-spring)}
.tab[aria-selected="true"]{color:var(--red);font-weight:700;background:color-mix(in srgb,var(--red) 10%,transparent)}
.tab[aria-selected="true"] svg{stroke-width:2}
@media (prefers-reduced-motion:no-preference){ .tab[aria-selected="true"] svg{transform:translateY(-1px) scale(1.06)} }
.tab small{position:absolute;top:3px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--red);color:var(--on-red);font-size:10px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--card)}
.tab small:empty,#tWent{display:none}