/* Where you are, without a coloured underline: the current tab sits on a soft
   frosted pill with a fine light edge, its icon at full colour; the others
   step back. Applies to the desktop tabs and the phone tab bar. */
#tnav button::after,#mnav button::after{display:none!important}
#tnav.tnav button,#mnav.mnav button{transition:background-color .25s ease,box-shadow .25s ease,color .25s ease!important}
#tnav.tnav button [data-vaia-nav],#mnav.mnav button [data-vaia-nav]{opacity:.62;filter:saturate(.75) drop-shadow(0 2px 4px #0005);transition:opacity .25s ease,filter .25s ease,transform .25s ease}
#tnav.tnav button:not(.on),#mnav.mnav button:not(.on),#mnav.mnav button:not(.on) b{color:#aab3c8!important}
.topbar #tnav.tnav button.on,html body #mnav.mnav button.on{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px -8px rgba(0,0,0,.6)!important;
  border-radius:14px!important;color:#fff!important;animation:none!important}
#tnav.tnav button.on [data-vaia-nav],#mnav.mnav button.on [data-vaia-nav]{opacity:1;filter:saturate(1.25) drop-shadow(0 3px 8px rgba(0,0,0,.45));transform:scale(1.06)}
#mnav.mnav button.on b{color:#fff!important}
@media (hover:hover){#tnav.tnav button:not(.on):hover [data-vaia-nav]{opacity:.9;filter:saturate(1) drop-shadow(0 2px 4px #0005)}
  #tnav.tnav button:not(.on):hover{color:#e4e8f2!important;background:rgba(255,255,255,.04)!important;border-radius:14px!important}}
@media (prefers-reduced-motion:reduce){#tnav.tnav button [data-vaia-nav],#mnav.mnav button [data-vaia-nav]{transition:none}}