.site-navigation { position: fixed; bottom: calc(8px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 32px),424px); height: 64px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; padding: 6px 7px; border: 0; border-radius: 999px; background: rgba(22,25,29,.68); backdrop-filter: blur(28px) saturate(1.65); -webkit-backdrop-filter: blur(28px) saturate(1.65); box-shadow: 0 8px 28px #0004,inset 0 1px #ffffff40,inset 0 -1px #0003,inset 0 0 0 .5px #ffffff26; z-index: 1000; font-family: "SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 11px; box-sizing: border-box; }
.site-navigation::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(#ffffff14,transparent 28%); }
.site-navigation::after { content: ""; position: absolute; top: .5px; left: 18%; right: 18%; height: 1px; pointer-events: none; background: linear-gradient(90deg,transparent,#ffffff59,transparent); }
.site-navigation[data-page="market"], .site-navigation[data-page="trade"] { z-index: 999999; }
.site-navigation * { box-sizing: border-box; letter-spacing: 0; }
.site-navigation-item { position: relative; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #b2b6bf; text-decoration: none; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1; transition: background-color .18s ease,color .18s ease; }
.site-navigation-item svg { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-navigation-item span { max-width: 100%; white-space: nowrap; }
.site-navigation-item.is-active { color: #fff; background: #ffffff24; box-shadow: inset 0 .5px #ffffff2e; font-weight: 600; }
.site-navigation-item.is-active svg[data-lucide="house"] { fill: #fff; stroke: #fff; -webkit-mask: linear-gradient(#000 0 0),linear-gradient(#000 0 0) center bottom / 5.5px 9px no-repeat; -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0),linear-gradient(#000 0 0) center bottom / 5.5px 9px no-repeat; mask-composite: exclude; }
.site-navigation-item:focus-visible { outline: 2px solid #1065ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-navigation-item { transition: none; } }
body.site-navigation-visible #app .my-tabbar, body.site-navigation-visible #app .van-tabbar--fixed { display: none !important; }
body.site-navigation-visible .qdd-market-shell, body.site-navigation-visible .trade-page, body.site-navigation-visible .contents, body.site-navigation-visible .contents-box { padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important; }
body.site-navigation-visible .qdd-pro-page { z-index: 999990 !important; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }