:root{--content-w: 420px;--tabbar-h: 56px;--tabbar-radius: 14px;--tabbar-gap: 8px;--green: #39d98a;--purple-1: #5b4bde;--purple-2: #6a56e8}html,body,#app{height:100%}html,body{margin:0;padding:0;background:#0b0b0d;color:#e9e9f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;max-width:none;margin:0;padding:0;text-align:initial}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;object-fit:contain}.container-phone{width:min(78vw,var(--content-w));margin:0 auto}.page-with-tabbar{padding-bottom:calc(var(--tabbar-h) + 16px)}.tabbar{position:fixed;left:50%;transform:translate(-50%);bottom:var(--tabbar-gap);width:min(78vw,var(--content-w));height:var(--tabbar-h);background:#111218;border:1px solid #1e2130;border-radius:var(--tabbar-radius);box-shadow:0 6px 16px #00000059;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;z-index:1000}.tabbar .item{position:relative;display:grid;justify-items:center;gap:2px;padding:6px 0;font-size:11px;color:#8f93a6}.tabbar .item img{width:20px;height:20px;object-fit:contain}.tabbar .item.active{color:#e8e8ff;font-weight:600}.tabbar .item .badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);font-size:10px;line-height:14px;padding:0 6px;border-radius:999px;background:#ff4d4f;color:#fff}