.page-nav{
  position:fixed;
  inset: auto min(12px, 5%) min(12px, 5%) auto;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  width:min(100%, 780px);
  padding:0 6px;
  animation: float-nav 10s ease-in-out infinite;
}
.page-nav-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  background:rgba(15,23,42,0.82);
  border:1px solid rgba(148,163,184,0.2);
  backdrop-filter:blur(26px);
  box-shadow:0 16px 32px rgba(0,0,0,0.18);
  border-radius:999px;
  padding:7px 10px;
  overflow:hidden;
}
.page-nav-inner::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(139,92,246,0.22), rgba(59,130,246,0.12), rgba(56,189,248,0.04));
  opacity:0.6;
  filter:blur(14px);
  transform:translateX(-25%);
  animation: slide-glow 12s linear infinite;
}
.page-nav-inner::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 0 30px rgba(255,255,255,0.02);
  pointer-events:none;
}
.nav-logo{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-logo img{
  width:22px;
  height:22px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,0.12);
}
.nav-logo .brand{
  color:rgba(255,255,255,0.96);
  font-size:13px;
  font-weight:700;
}
.nav-links{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.btn-nav{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 10px;
  border-radius:999px;
  color:rgba(255,255,255,0.88);
  background:rgba(255,255,255,0.12);
  text-decoration:none;
  transition:transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
  font-size:11px;
  font-weight:500;
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
.btn-nav::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, rgba(255,255,255,0.32), transparent 35%);
  opacity:0.3;
  transition:opacity 180ms ease;
}
.btn-nav:hover{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(255,255,255,0.24);
}
.btn-nav:hover::before{
  opacity:0.45;
}
.btn-outline{
  background:rgba(255,255,255,0.1);
}
.btn-primary,
.btn-nav.active{
  color:#fff;
  background:rgba(139,92,246,0.25);
  border-color:rgba(139,92,246,0.35);
  box-shadow:0 14px 30px rgba(139,92,246,0.18);
}
.btn-primary:hover,
.btn-nav.active:hover{
  background:rgba(139,92,246,0.34);
}
.nav-icon{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.nav-label{
  display:inline;
}
@media(max-width:768px){
  .page-nav{
    inset: auto min(12px, 5%) min(12px, 5%) auto;
    top:auto;
    bottom:12px;
    padding:0 6px;
  }
  .page-nav-inner{
    gap:4px;
    padding:6px 8px;
  }
  .nav-label{
    display:none;
  }
  .btn-nav{
    padding:6px 8px;
    font-size:11px;
  }
}
@media(min-width:769px){
  .page-nav{
    top:16px;
    bottom:auto;
    width:min(100%, 820px);
  }
}

@keyframes float-nav{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-2px)}
}

@keyframes slide-glow{
  0%{transform:translateX(-30%)}
  50%{transform:translateX(30%)}
  100%{transform:translateX(-30%)}
}