[data-vaia-nav]{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;filter:drop-shadow(0 2px 4px #0005);transition:transform .2s ease;vertical-align:middle}[data-vaia-nav] svg{display:block;width:24px;height:24px}button:hover>[data-vaia-nav]{transform:translateY(-1px) rotate(-5deg)}button[aria-current=page]>[data-vaia-nav],button.on>[data-vaia-nav]{filter:drop-shadow(0 0 5px #ad87ff70)}@media(prefers-reduced-motion:reduce){[data-vaia-nav]{transition:none}button:hover>[data-vaia-nav]{transform:none}}
/* Five flat destinations, with the objects carrying the color. */
#tnav.tnav{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;padding:0;gap:5px}
#tnav.tnav button,#mnav.mnav button{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;color:#fff!important;transform:none!important}
#tnav.tnav button{padding:7px 10px;min-height:48px;gap:7px}
#tnav [data-vaia-nav],#mnav [data-vaia-nav]{width:32px;height:32px;flex-basis:32px}
#tnav [data-vaia-nav] svg,#mnav [data-vaia-nav] svg{width:32px;height:32px}
#tnav button::after,#mnav button::after{content:'';position:absolute;bottom:0;left:32%;right:32%;height:2px;border-radius:3px;background:transparent}
#tnav button.on::after,#mnav button.on::after{background:#b8a0ff;box-shadow:0 0 6px #a68aff55}
#tnav button:focus-visible,#mnav button:focus-visible{outline:2px solid #cab8ff!important;outline-offset:2px}
#mnav.mnav{border-radius:16px;background:#0e1021f2;gap:2px;padding:5px}
#mnav.mnav button{min-width:0;gap:2px;min-height:58px;padding:3px 0 5px}
#mnav.mnav b{font-size:10px;color:#fff;letter-spacing:-.02em}
.topbar #tnav [data-vaia-nav] svg{width:32px;height:32px;max-width:none}.topbar #tnav [data-vaia-nav]{width:32px;height:32px;flex:0 0 32px}
/* Phone dock is always exactly five columns, never a wrapping flex row. */
@media(max-width:760px){html:not(.native) body #mnav.mnav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:1fr!important;grid-auto-flow:column!important;flex-wrap:nowrap!important;left:6px!important;right:6px!important;width:auto!important;gap:0!important;padding:4px!important;height:66px!important;min-height:0!important}#mnav.mnav>button{display:flex!important;flex-direction:column!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:none!important;padding:2px 0 5px!important;margin:0!important;gap:1px!important;height:58px!important}#mnav.mnav>button b{font-size:10px!important;line-height:12px!important;white-space:nowrap!important}#mnav.mnav [data-vaia-nav],#mnav.mnav [data-vaia-nav] svg{width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important}}
@media(max-width:760px){html:not(.native) body #mnav.mnav{position:fixed!important;transform:none!important;translate:none!important;left:6px!important;right:6px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;width:auto!important}}
/* A modest saturation lift keeps each destination's assigned hue clear. */
#tnav [data-vaia-nav] svg,#mnav [data-vaia-nav] svg{filter:saturate(1.22)}
