/* Fixed four-item navigation with a solid, bounce-safe footer colour. */
:root{--boyan-nav-bg:#fafbf6}
html,body{min-height:100%;background:var(--boyan-nav-bg)}
.app-main{padding-bottom:calc(76px + env(safe-area-inset-bottom));background:var(--bg,var(--boyan-nav-bg))}
.bottom-nav{position:fixed;z-index:80;bottom:-1px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 9px calc(6px + env(safe-area-inset-bottom));background:var(--boyan-nav-bg);border:1px solid rgba(189,203,184,.72);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -5px 24px rgba(25,49,35,.10);backdrop-filter:none;-webkit-backdrop-filter:none;isolation:isolate}
.bottom-nav::after{content:"";position:absolute;z-index:-1;left:-1px;right:-1px;top:calc(100% - 2px);height:72px;background:var(--boyan-nav-bg);pointer-events:none}
.bottom-nav a{display:flex;min-width:0;min-height:44px;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:2px 0;font-size:10px;line-height:1.2}
.bottom-nav a svg{width:20px;height:20px}
@media(min-width:1180px){.bottom-nav{width:620px;margin-left:0}}
@media(min-width:701px) and (max-width:1179px){.bottom-nav{width:min(680px,calc(100vw - 210px));margin-left:0}}
@media(max-width:700px){.bottom-nav{left:50%;transform:translateX(-50%);width:100%;max-width:520px;padding:5px 7px calc(6px + env(safe-area-inset-bottom))}.app-main{padding-bottom:calc(74px + env(safe-area-inset-bottom))}}
@media(display-mode:standalone){.bottom-nav{padding-bottom:calc(7px + env(safe-area-inset-bottom))}}