:root{
  --srNavBg: rgba(10, 12, 18, .92);
  --srNavStroke: rgba(255,255,255,.10);
  --srNavItemBg: rgba(255,255,255,.04);
  --srNavItemStroke: rgba(255,255,255,.10);
  --srNavMuted: rgba(154,163,178,.92);
  --srNavActiveA: #06b6d4;
  --srNavActiveB: #7c3aed;

  /* ✅ stabilizacja na iOS */
  --srNavH: 78px;        /* ustawiane/aktualizowane przez JS (bez safe-area) */
  --srSafeB: 0px;        /* ustawiane przez JS (tylko safe-area) */
  --srNavPad: 10px;      /* MUSI odpowiadać BASE_PAD w JS */

  --srNavFxBg: rgba(2, 6, 23, .92);
}

body{
  /* ✅ bez env() — żeby nie liczyć safe-area 2x */
  padding-bottom: calc(var(--srNavH) + var(--srSafeB)) !important;
}

.srNav{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100vw !important;
  margin: 0 !important;

  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;

  /* ✅ stała “rama” + safe-area tylko raz */
  height: calc(var(--srNavH) + var(--srSafeB)) !important;

  padding: var(--srNavPad) var(--srNavPad) !important;
  padding-bottom: calc(var(--srNavPad) + var(--srSafeB)) !important;

  border-top: 1px solid var(--srNavStroke) !important;
  background: linear-gradient(180deg, rgba(10,12,18,.55), var(--srNavBg)) !important;

  backdrop-filter: blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;

  box-shadow: 0 -18px 60px rgba(0,0,0,.55) !important;

  z-index: 999999 !important;
}

.srNavItem{
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;

  position: relative;

  /* ✅ wysokość itemów wynika z navH i paddingów */
  height: calc(var(--srNavH) - (var(--srNavPad) * 2)) !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;
  padding: 8px 8px;

  border-radius: 18px;
  border: 1px solid var(--srNavItemStroke);
  background: var(--srNavItemBg);

  color: var(--srNavMuted);
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transform: translateZ(0);
  transition:
    transform .14s ease,
    filter .14s ease,
    border-color .14s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.srNavItem:active{
  transform: translateY(1px) scale(.985);
}

.srNavIco{
  font-size: 16px;
  line-height: 1;
}

.srNavTxt{
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srNavItem.isActive{
  color: #0b0d10;
  border-color: transparent;
  background: linear-gradient(135deg, var(--srNavActiveA), var(--srNavActiveB));
  box-shadow: 0 14px 35px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

.srNavItem.isActive .srNavTxt{
  color: #0b0d10;
}

.srNavItem.isActive::after{
  content: "";
  position: absolute;
  bottom: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: .9;
}

#srNavFx{
  position: fixed;
  inset: 0;
  background: var(--srNavFxBg);
  opacity: 0;
  pointer-events: none;
  z-index: 999998;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity .18s ease, backdrop-filter .18s ease, -webkit-backdrop-filter .18s ease;
}

html.sr-leaving #srNavFx{
  opacity: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.sr-enter main.page{
  animation: srEnter .22s ease both;
}
@keyframes srEnter{
  from{ opacity:.86; transform: translateY(6px); }
  to{ opacity:1; transform:none; }
}

@media (min-width: 861px){
  .srNav{ display: none !important; }
  body{ padding-bottom: 0 !important; }
  #srNavFx{ display:none !important; }
}