body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.app-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:5px max(4px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));background:var(--bg);color:var(--fg);border-top:1px solid currentColor;box-shadow:0 -4px 18px #0002}
.app-bottom-item{min-width:0}
.app-bottom-item>summary{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:62px;padding:5px 2px;text-align:center;font-size:clamp(9px,.65rem,14px);line-height:1.15;list-style:none;border-radius:7px}
.app-bottom-item>summary::-webkit-details-marker{display:none}
.app-bottom-item>summary::after{content:none}
.app-bottom-item>summary svg{flex-shrink:0}
.app-bottom-item>summary span{overflow-wrap:anywhere}
.app-bottom-item[open]>summary,.app-bottom-item.is-active>summary{background:var(--fg);color:var(--bg)}
.app-bottom-panel{position:absolute;bottom:calc(100% + 8px);left:8px;right:8px;max-width:600px;margin:auto;max-height:60vh;overflow:auto;overscroll-behavior:contain;background:var(--bg);color:var(--fg);border:1px solid currentColor;border-radius:10px;box-shadow:0 4px 24px #0005;padding:8px}
.app-bottom-panel a{display:flex;align-items:center;min-height:48px;padding:10px 14px;font-size:.85rem;line-height:1.4;border-radius:5px;overflow-wrap:anywhere}
.app-bottom-panel a:hover{background:var(--fg);color:var(--bg)}
@media(min-width:760px){.app-bottom-nav{padding-left:max(16px,calc((100% - 760px)/2));padding-right:max(16px,calc((100% - 760px)/2))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
