
/* Isolated TEST: futuristic, permanently docked navigation. Existing click handlers unchanged. */
@media(max-width:600px){
:root{--as6-nav-h:90px}
#bottom.bottom{
 position:fixed!important;bottom:0!important;top:auto!important;left:0!important;right:0!important;
 width:100%!important;max-width:none!important;height:calc(var(--as6-nav-h) + env(safe-area-inset-bottom))!important;
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;
 padding:7px max(9px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-right))!important;
 margin:0!important;box-sizing:border-box!important;z-index:1000!important;
 border:1px solid rgba(76,194,251,.46)!important;border-bottom:0!important;border-radius:23px 23px 0 0!important;
 background:linear-gradient(160deg,rgba(247,253,255,.98),rgba(217,241,255,.98))!important;
 box-shadow:0 -3px 17px rgba(16,147,218,.15),inset 0 2px 2px rgba(255,255,255,.85)!important;
 backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
body.dark #bottom.bottom{
 background:linear-gradient(155deg,rgba(9,35,72,.98),rgba(2,17,42,.99))!important;
 border-color:rgba(51,183,255,.62)!important;
 box-shadow:0 -3px 19px rgba(0,153,255,.26),inset 0 1px 1px rgba(154,222,255,.2)!important;
}
#bottom.bottom button{
 min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;
 justify-content:center!important;gap:3px!important;transform:none!important;
 padding:0 1px!important;margin:0!important;border:0!important;background:transparent!important;
 color:#173e75!important;font-size:clamp(9px,2.8vw,12px)!important;line-height:1.15!important;
 font-weight:550!important;white-space:nowrap!important;
}
body.dark #bottom.bottom button{color:#e9f4ff!important}
#bottom.bottom button .nav-icon{
 width:clamp(35px,10vw,43px)!important;height:clamp(35px,10vw,43px)!important;
 object-fit:contain!important;display:block!important;padding:7px!important;box-sizing:border-box!important;
 border-radius:50%!important;border:1px solid rgba(95,183,249,.35)!important;
 background:radial-gradient(circle at 35% 22%,#fff,#d5eeff 66%,#a5d3f8)!important;
 box-shadow:inset 0 2px 3px rgba(255,255,255,.9),0 3px 9px rgba(25,113,198,.18)!important;
}
body.dark #bottom.bottom button .nav-icon{
 background:radial-gradient(circle at 35% 20%,#205a9b,#071b4a 74%)!important;
 border-color:rgba(55,166,255,.64)!important;
 box-shadow:inset 0 1px 2px rgba(136,225,255,.42),0 0 10px rgba(25,126,255,.25)!important;
}
#bottom.bottom button.active .nav-icon{
 background:radial-gradient(circle at 40% 18%,#5cefff,#167cf0 67%,#1748a7)!important;
 border-color:#77eaff!important;box-shadow:0 0 13px rgba(5,176,255,.65),inset 0 2px 4px rgba(255,255,255,.65)!important;
}
#bottom.bottom button.active{color:#008ac8!important}
body.dark #bottom.bottom button.active{color:#53eaff!important}
#bottom.bottom button span{font-size:inherit!important;line-height:inherit!important;white-space:nowrap!important}
#bottom.bottom button.active::after{content:'';height:2px;width:50%;border-radius:4px;background:#22d8f9;box-shadow:0 0 6px #1beaff}
main{padding-bottom:calc(var(--as6-nav-h) + env(safe-area-inset-bottom) + 14px)!important}
}

/* Approved MASTER icon artwork, preserve full icon pixels without CSS simulation. */
@media(max-width:600px){
#bottom.bottom button .nav-icon,
body.dark #bottom.bottom button .nav-icon,
#bottom.bottom button.active .nav-icon{
 width:clamp(44px,12vw,52px)!important;height:clamp(44px,12vw,52px)!important;
 padding:0!important;border:0!important;border-radius:50%!important;
 background:none!important;box-shadow:none!important;filter:none!important;
 object-fit:contain!important;
}
#bottom.bottom button.active .nav-icon{filter:drop-shadow(0 0 5px rgba(21,194,255,.48))!important}
}
