/* Mobile-native Back/Forward nav pills */
:root{
  --nav-pill-size: 46px;
  --nav-pill-radius: 999px;
  --nav-pill-border: rgba(255,255,255,.18);
  --nav-pill-shadow: 0 10px 22px rgba(0,0,0,.18);
  --nav-pill-shadow-pressed: 0 6px 14px rgba(0,0,0,.14);
  --nav-pill-bg-1: rgba(15, 23, 42, .92);
  --nav-pill-bg-2: rgba(2, 132, 199, .92);
}

.native-nav{
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  gap: 10px;
  align-items: center;
}

.native-pill{
  width: var(--nav-pill-size);
  height: var(--nav-pill-size);
  border-radius: var(--nav-pill-radius);
  border: 1px solid var(--nav-pill-border);
  background: linear-gradient(135deg, var(--nav-pill-bg-1), var(--nav-pill-bg-2));
  box-shadow: var(--nav-pill-shadow);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease;
}

.native-pill span{
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-.5px);
}

.native-pill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), rgba(255,255,255,0) 55%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}

.native-pill:hover{
  transform: translateY(-1px);
}

.native-pill.is-pressed,
.native-pill:active{
  transform: translateY(1px) scale(.98);
  box-shadow: var(--nav-pill-shadow-pressed);
}

.native-pill.is-pressed::after,
.native-pill:active::after{
  opacity: 1;
  transform: scale(1.08);
}

.native-pill.disabled,
.native-pill:disabled{
  opacity: .42;
  filter: grayscale(1);
  cursor: not-allowed;
}

@media (max-width: 480px){
  .native-nav{ left: 12px; bottom: 14px; gap: 8px; }
  :root{ --nav-pill-size: 44px; }
}