.ff-bottomnav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  display:none;
  gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--ff-border);
  background: rgba(10,12,18,.84);
  backdrop-filter: blur(var(--ff-blur));
  -webkit-backdrop-filter: blur(var(--ff-blur));
  transition: transform .22s ease, opacity .22s ease;
}

.ff-bottomnav.is-hidden{
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.ff-bottomnav__item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 0;
  border-radius:16px;
  border:1px solid transparent;
  background: transparent;
  color:var(--ff-txt);
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}

/* Prevent underline on tap/hover (mobile) */
.ff-bottomnav__item:hover,
.ff-bottomnav__item:active,
.ff-bottomnav__item:focus,
.ff-bottomnav__item:focus-visible{
  text-decoration:none;
}
.ff-bottomnav__item:hover{border-color:var(--ff-border)}
.ff-bottomnav__item:active{transform: translateY(1px)}

.ff-bottomnav__icon{
  width:22px; height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.ff-bottomnav__icon svg{display:block}

.ff-bottomnav__txt{font-size:12px; color:var(--ff-muted); line-height:1.1}

.ff-bottomnav__item.is-active{
  border-color: rgba(255,79,216,.55);
  background: rgba(255,79,216,.12);
  color: var(--ff-accent);
}
.ff-bottomnav__item.is-active .ff-bottomnav__txt{color: var(--ff-accent)}

@media (max-width: 980px){
  .ff-bottomnav{display:flex}
}