/* Four primary destinations stay fixed while the page scrolls beneath the translucent dock. */
.bottom-nav{bottom:calc(7px + env(safe-area-inset-bottom));padding:4px 9px;background:rgba(250,251,246,.76);border:1px solid rgba(189,203,184,.72);border-radius:18px;box-shadow:0 7px 26px rgba(25,49,35,.11);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15)}
.bottom-nav a{min-height:44px;gap:2px;padding:2px 0;font-size:10px;line-height:1.2}
.bottom-nav a svg{width:20px;height:20px}
.app-main{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
@media(min-width:1180px){.bottom-nav{width:596px;margin-left:12px}}
@media(min-width:701px) and (max-width:1179px){.bottom-nav{width:calc(min(680px,100vw - 210px) - 24px);margin-left:12px}}
@media(max-width:700px){.bottom-nav{left:50%;transform:translateX(-50%);width:calc(100% - 18px);max-width:502px;padding:4px 7px}.app-main{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}

.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr))}