.menu-group .menu-toggle{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 12px;
  background:transparent; border:0; color:inherit; font:inherit; cursor:pointer;
}
.menu-group .menu-toggle:hover{ background: rgba(255,255,255,0.04); }
.menu-group .menu-toggle:focus-visible{ outline:2px solid rgba(100,150,255,.6); outline-offset:2px; }

.menu-group .chevron{ transition: transform .2s ease; }
.menu-group .menu-toggle.is-open .chevron{ transform: rotate(180deg); }

.submenu{ margin:4px 0 8px 0; padding:4px 0 8px 8px; overflow: hidden; }
.submenu.animating{ transition: height .2s ease, opacity .2s ease; }
.submenu.hidden-vis{ opacity:0; }


.avatar-link{
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 9999px;
  outline: none;
}

.avatar-glow{
  padding: 6px;                       
  border: 2px dashed #9fef00;         
  box-shadow: 0 0 0 rgba(159,239,0,0);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  background: radial-gradient(transparent 60%, rgba(159,239,0,.06));
}

@keyframes neonPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(159,239,0,0); filter: none; }
  50%      { box-shadow: 0 0 18px 4px rgba(159,239,0,.55); filter: saturate(1.05); }
}

.avatar-link::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(159,239,0,0);
  animation: ringPulse 2.4s ease-in-out infinite;
  opacity: .85;
}

@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(159,239,0,.0); }
  50%  { box-shadow: 0 0 22px 8px rgba(159,239,0,.22); }
  100% { box-shadow: 0 0 0 0 rgba(159,239,0,.0); }
}

.avatar-glow{ animation: neonPulse 2.4s ease-in-out infinite; }

.avatar-link:hover .avatar-glow,
.avatar-link:focus .avatar-glow,
.avatar-link:focus-visible .avatar-glow{
  transform: translateY(-1px);
  box-shadow: 0 0 22px 6px rgba(159,239,0,.65);
}

.avatar-link:focus-visible{
  outline: 2px solid rgba(159,239,0,.8);
  outline-offset: 4px;
  border-radius: 9999px;
}

@media (prefers-reduced-motion: reduce){
  .avatar-glow, .avatar-link::after{ animation: none !important; }
}


.nav-sep{
  width:2px; height:50px;
  margin:0 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.25), rgba(255,255,255,.05));
  border-radius:1px;
  align-self:center;
}

.badge-number{
  margin-left:6px; padding:0 .45em; min-width:1.6em; text-align:center;
  font-size:0.95em; border-radius:10px; background:#ff3e3e; color:#fff; font-weight:700;
}

.badge-dot{
  margin-left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #9fef00;
  display: inline-block;

  position: relative;
  overflow: visible;         
  filter: drop-shadow(0 0 6px #9fef00);
  animation: dotPulse 1.6s ease-in-out infinite;
}

.badge-dot::before,
.badge-dot::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(159,239,0,0.45);
  border-radius: 9999px;
  transform: translate(-50%, -50%) scale(1);
  opacity: .7;
  pointer-events: none;
  animation: ripple 2.2s ease-out infinite;
}

.badge-dot::after{
  animation-delay: 1.1s;
}

@keyframes dotPulse{
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #9fef00); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 10px #9fef00); }
}

@keyframes ripple{
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .6; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .badge-dot,
  .badge-dot::before,
  .badge-dot::after{
    animation: none !important;
  }
}