/* P04 reference: full-width bottom bar; only the active icon has a blue pill. */
#app-nav.ui-bottom-nav{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));box-sizing:border-box;padding:0 4px env(safe-area-inset-bottom,0px);border:0;border-top:1px solid #e2e8f0;border-radius:0;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);box-shadow:0 -4px 20px rgba(0,0,0,.03);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#app-nav.ui-bottom-nav a{height:58px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;border:0;border-radius:0;background:transparent;color:#545f73;text-decoration:none;box-shadow:none}
#app-nav.ui-bottom-nav .ui-nav-icon{height:28px;min-width:52px;box-sizing:border-box;padding:4px 16px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:transparent}
#app-nav.ui-bottom-nav .material-symbols-outlined{font-size:20px;line-height:20px}
#app-nav.ui-bottom-nav .ui-nav-label{font-size:11px;line-height:16px;background:transparent;color:inherit;font-weight:500;white-space:nowrap}
#app-nav.ui-bottom-nav a[aria-current="page"]{background:transparent;color:#0e4282}
#app-nav.ui-bottom-nav a[aria-current="page"] .ui-nav-icon{background:#0e4282;color:white;box-shadow:0 1px 3px #0e42821a}
#app-nav.ui-bottom-nav a[aria-current="page"] .material-symbols-outlined{font-variation-settings:'FILL' 1}
#app-nav.ui-bottom-nav a[aria-current="page"] .ui-nav-label{background:transparent;color:#0e4282;font-weight:700}
#app-nav.ui-bottom-nav a:focus-visible{outline:2px solid #2563eb;outline-offset:-3px}
body:has(#app-nav.ui-bottom-nav)>main{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
