/* One header geometry for home and cards; reuse the site's 375px design units. */
:root{--shell-u:var(--pg-unit,1vw)}
#p-home .topbar,.app .cards-toolbar{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;height:calc(11.733333 * var(--shell-u));min-height:0;padding:0 calc(3.2 * var(--shell-u));gap:0;margin:0;background:#fff;border:0}
#p-home .logo,.app .brand-link{display:flex;align-items:center;flex:none;width:calc(24 * var(--shell-u));height:calc(8.533333 * var(--shell-u));padding:0;margin:0;background:none;border:0;border-radius:0}
#p-home .logo img,.app .brand-link img{display:block;width:100%;max-width:none;height:100%!important;object-fit:contain}
#p-home .topbar-actions,.app .toolbar-actions{display:flex;align-items:center;flex:none;gap:calc(2.05 * var(--shell-u));padding:0;margin:0}
#p-home #topbarJoinBtn,.app #supportLink{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:calc(8.5 * var(--shell-u));height:calc(8.5 * var(--shell-u));min-height:0;padding:0;margin:0;background:none;border:0;border-radius:0}
#p-home #topbarJoinBtn img,.app #supportLink img{width:100%;height:100%;object-fit:contain;display:block}
#p-home #topbarWalletBtn,.app .cards-toolbar #balance{box-sizing:border-box;align-items:stretch;flex:none;width:calc(32 * var(--shell-u));min-width:0;max-width:none;height:calc(7.7 * var(--shell-u));padding:0;gap:0;border:1px solid #15171b;border-radius:999px;overflow:hidden;background:#fff;box-shadow:none}
#p-home #topbarWalletAmount,.app #previewBalance{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;width:auto;max-width:none;padding:0 0 0 calc(1.7 * var(--shell-u));margin:0;white-space:nowrap;color:#111318;letter-spacing:0;line-height:1;font-family:var(--font-num,'HarmonyOS Sans',sans-serif);font-size:calc(3.1 * var(--shell-u));font-weight:700;background:#fff}
.app #previewBalance b{font:inherit;letter-spacing:0}
#p-home .topbar-wallet-plus,.app #topupLink{box-sizing:border-box;display:flex;align-items:center;justify-content:center;align-self:stretch;flex:0 0 calc(8 * var(--shell-u));width:calc(8 * var(--shell-u));height:auto;min-height:0;padding:0 0 0 calc(1 * var(--shell-u));margin:0;background:#f20a2d;color:white;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%);border:0;border-radius:0;box-shadow:none;font-size:0}
#p-home .topbar-wallet-plus svg,.app #topupLink svg{display:block;flex:none;width:calc(5.1 * var(--shell-u));height:calc(5.1 * var(--shell-u));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Cards use the actual home navigation assets and the exact same sizing rules. */
#tbar>.cards-preview-tab>.cards-preview-link{gap:calc(.27 * var(--shell-u))!important}
#tbar>.cards-preview-tab>.cards-preview-link img{width:calc(6.4 * var(--shell-u))!important;height:calc(6.4 * var(--shell-u))!important}
#tbar>.cards-preview-tab>.cards-preview-link>span{font-size:calc(2.4 * var(--shell-u))!important}
.app .bottom-nav{box-sizing:border-box!important;display:flex!important;align-items:center!important;width:100%!important;height:calc(13 * var(--shell-u) + env(safe-area-inset-bottom,0px))!important;min-height:0!important;padding:0 0 env(safe-area-inset-bottom,0px)!important;margin:0!important;border-top:1px solid #ececf3!important;background:#fff!important;box-shadow:0 calc(-.533333 * var(--shell-u)) calc(.8 * var(--shell-u)) #0000000f,inset 0 calc(-.266667 * var(--shell-u)) calc(.8 * var(--shell-u)) #0000000a}
.app .bottom-nav a{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:100%;padding:0;margin:0;gap:calc(.27 * var(--shell-u));color:#a0a3bd;text-decoration:none}
.app .bottom-nav a>span{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;width:calc(6.4 * var(--shell-u))!important;height:calc(6.4 * var(--shell-u))!important;line-height:normal}
.app .bottom-nav a>span img,.app .bottom-nav a>span svg{display:block;width:100%!important;height:100%!important;object-fit:contain}
.app .bottom-nav a>span svg{stroke:currentColor;fill:none}
.app .bottom-nav small{display:block;font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;font-size:calc(2.4 * var(--shell-u))!important;font-weight:400;line-height:normal;margin:0;padding:0}
.app .bottom-nav a[aria-current]{color:#f20a2d}.app .bottom-nav a[aria-current]>span{transform:scale(1.12)}
/* Split the rule around the caption, centered on its text rather than above it. */
.app .pack-stats{position:relative;border-top:0;padding-top:24px;margin-top:0}
.app .pack-stats .max-stat small{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:10px;transform:none;margin:0;padding:0;background:none;font-size:13px;line-height:18px;font-weight:500;color:#858b94}
.app .pack-stats .max-stat small:before,.app .pack-stats .max-stat small:after{content:'';display:block;flex:1;height:2px;background:#d9dde3}
@media(max-height:640px){.app .pack-stats{padding-top:22px}.app .pack-stats .max-stat small{font-size:12px;line-height:17px}}
@media(max-height:450px){.app .pack-stats{padding-top:19px}.app .pack-stats .max-stat small{font-size:11px;line-height:15px}}
@media(min-width:501px){.app{--pg-unit:5.6px;max-width:560px;height:94vh;height:94dvh;margin:3vh auto;margin:3dvh auto}.app .cards-toolbar,#p-home .topbar{height:68px;padding-inline:24px}.app .bottom-nav{height:76px!important}}