:root{
  --nav-bg: rgba(14,16,26,.92);
  --nav-border: rgba(255,255,255,.08);
  --nav-active: rgba(255,255,255,.10);
  --nav-glow: rgba(140, 120, 255, .55);
  --nav-text: rgba(255,255,255,.86);
  --nav-muted: rgba(255,255,255,.55);
  --nav-glass: rgba(12,14,22,.72);
  --nav-glass-2: rgba(12,14,22,.92);
  --nav-shadow: 0 18px 40px rgba(0,0,0,.42);
}

/* PJAX transitions */
#pjax-root{will-change: transform, opacity;}
.pjax-out{opacity:.0; transform: translateY(8px) scale(.995); filter: blur(2px); transition: opacity .18s ease, transform .18s ease, filter .18s ease;}
.pjax-in{opacity:1; transform: translateY(0) scale(1); filter: blur(0); transition: opacity .20s ease, transform .20s ease, filter .20s ease;}
html.pjax-busy{cursor: progress;}

/* Bottom nav - modern Telegram-like */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0;
  height:72px;
  display:flex; align-items:center; justify-content:flex-start;
  gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--nav-glass), var(--nav-glass-2));
  border-top: 1px solid var(--nav-border);
  backdrop-filter: blur(16px);
  z-index: 999;
  box-shadow: var(--nav-shadow);
  transform: translate3d(0,0,0);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease, filter .22s ease;

  /* Slider mode: when items don't fit, the nav becomes horizontally scrollable */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.bottom-nav::-webkit-scrollbar{height:0; width:0;}
.bottom-nav{scrollbar-width:none;}

.bottom-nav.nav-hidden{
  transform: translate3d(0, 12px, 0);
  opacity: .92;
  filter: saturate(.95);
}

.bottom-nav::before{
  content:"";
  position:absolute;
  inset: -40px -20px 0 -20px;
  pointer-events:none;
  background: radial-gradient(1200px 220px at 50% 100%, rgba(140,120,255,.18), transparent 60%),
              radial-gradient(800px 180px at 30% 100%, rgba(90,220,255,.10), transparent 55%);
  opacity:.9;
}

.bottom-nav .nav-item{
  position:relative;
  flex: 0 0 auto;
  width: 78px;
  max-width: 92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
  color: var(--nav-muted);
  font-size: 11px;
  line-height: 1;
  letter-spacing:.2px;
  padding: 10px 6px 8px;
  border-radius: 16px;
  transition: transform .18s ease, color .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
  isolation:isolate;

  scroll-snap-align: center;
}

.bottom-nav .nav-item svg{
  width: 22px; height: 22px;
  opacity: .95;
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), filter .22s ease;
}

.bottom-nav .nav-item svg [stroke]{
  transition: stroke-width .22s ease, opacity .22s ease;
}

.bottom-nav .nav-item svg [fill]{
  transition: opacity .22s ease;
}

.bottom-nav .nav-item:hover{transform: translateY(-2px); color: var(--nav-text);}
.bottom-nav .nav-item:active{transform: translateY(0px) scale(.98);}

.bottom-nav .nav-item.active{
  color: var(--nav-text);
  background: rgba(255,255,255,.06);
}

.bottom-nav .nav-item.active svg{
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 10px 18px rgba(140,120,255,.22));
}

.bottom-nav .nav-item.active svg [stroke]{
  stroke-width: 2.2;
  opacity: 1;
}

/* Ripple */
.bottom-nav .nav-item .nav-ripple{
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  overflow:hidden;
  z-index:-1;
}

.bottom-nav .nav-item .nav-ripple::after{
  content:"";
  position:absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  background: radial-gradient(circle, rgba(140,120,255,.45), rgba(140,120,255,0) 68%);
}

.bottom-nav .nav-item.ripple .nav-ripple::after{
  animation: navRipple .55s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes navRipple{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.2);} 
  18%{opacity:.75;}
  100%{opacity:0; transform: translate(-50%,-50%) scale(14);} 
}

/* Sliding indicator */
.bottom-nav .nav-indicator{
  position:absolute;
  top:8px;
  left:10px;
  height: 54px;
  width: 80px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: translate3d(0,0,0);
  transition: transform .22s cubic-bezier(.2,.9,.2,1), width .22s cubic-bezier(.2,.9,.2,1);
  pointer-events:none;
}

.bottom-nav .nav-pulse{
  position:absolute;
  inset:-10px;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 30%, var(--nav-glow), transparent 60%);
  opacity:.18;
  filter: blur(6px);
}

/* Make sure pages have room for nav */
body{padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));}