#bottom-nav {
  position: fixed;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: calc(26.875rem - 2rem);
  height: 4.5rem;
  background: var(--bg-card);
  border: 0.0625rem solid var(--border-subtle);
  border-radius: 2.25rem;
  display: flex;
  align-items: center;
  z-index: 100;
  box-shadow: var(--shadow-nav), 0 0 0 0.0625rem var(--border-subtle);
  backdrop-filter: blur(1.25rem);
  overflow: visible;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:active { opacity: 0.65; }

.nav-icon { color: var(--text-muted); transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-icon svg, .nav-icon iconify-icon { width: 1.3125rem; height: 1.3125rem; font-size: 1.3125rem; }
.nav-label { font-family: var(--font-brand); font-size: 0.5938rem; font-weight: 600; color: var(--text-muted); transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1); letter-spacing: 0.0125rem; }

.nav-item.is-active .nav-icon  { color: var(--gold-text); }
.nav-item.is-active .nav-label { color: var(--gold-text); }
.nav-item.is-active::before {
  content: '';
  position: absolute; top: -0.125rem;
  left: 50%; transform: translateX(-50%);
  width: 1.375rem; height: 0.1875rem;
  border-radius: 0 0 0.1875rem 0.1875rem;
  background: var(--gold);
}

/* CTA (centre Deposit button) */
.nav-item.nav-cta {
  flex: 0 0 4.25rem;
  margin-top: -1.75rem;
}
.nav-cta-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.3125rem;
}
.nav-cta-btn {
  width: 3.375rem; height: 3.375rem;
  border-radius: 50%;
  background: var(--gold-gradient);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0.1875rem var(--bg-card), 0 0 0 0.25rem rgba(var(--gold-rgb), 0.28), 0 0.375rem 1.375rem rgba(var(--gold-rgb), 0.50);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item.nav-cta:active .nav-cta-btn { transform: scale(0.91); box-shadow: 0 0 0 0.1875rem var(--bg-card); }
.nav-cta-btn svg { width: 1.5rem; height: 1.5rem; fill: var(--text-on-gold); }
.nav-item.nav-cta .nav-label { color: var(--gold-text); font-weight: 700; }