.tabbar { min-height: 78px; padding: 7px 6px 9px; border-radius: 8px; border-color: #7aa39745; background: linear-gradient(110deg, #0b231bf7, #071410fc 48%, #14241ef7); box-shadow: inset 0 1px 0 #d3fff025, inset 8px 0 20px -17px #42ffa475, inset -8px 0 20px -17px #42ffa475, 0 -6px 24px #0005; bottom: max(6px, env(safe-area-inset-bottom)); }
.tab { min-height: 60px; gap: 4px; border-radius: 6px; color: #a6b9b0; font-size: 10px; font-weight: 500; text-shadow: none; }
.tab > svg { display: none; }
.nav-art { position: relative; z-index: 1; width: 34px; height: 34px; object-fit: contain; opacity: .7; filter: saturate(.45) brightness(.83) drop-shadow(0 3px 4px #0008); transition: filter .18s ease, opacity .18s ease; pointer-events: none; }
.tab.is-active { color: #9effc5; text-shadow: none; background: linear-gradient(180deg, #4cff9e08, #4cff9e13); }
.tab.is-active .nav-art { opacity: 1; filter: saturate(1) brightness(1.12) drop-shadow(0 0 5px #31ff9a55); }
.tab.is-active::before { content: ''; position: absolute; top: auto; bottom: -3px; width: 23px; height: 2px; border-radius: 2px; background: #60ffac; box-shadow: 0 0 7px #25ff9380; }
.tab:focus-visible { outline: 1px solid #8effbe; outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .nav-art { transition: none; } }