html:root{--topbar-h:calc(1.2 * (min(100vw, 430px) / 7.5))}html.is-desktop{--topbar-h:64px}html .topbar{--u:calc(min(100vw, 430px) / 7.5);height:calc(var(--topbar-h) + var(--safe-top));padding:var(--safe-top) calc(.23 * var(--u)) 0;background:color-mix(in srgb, var(--surface-1) 62%, transparent);-webkit-backdrop-filter:blur(16px)saturate(150%);backdrop-filter:blur(16px)saturate(150%);border-bottom:1px solid color-mix(in srgb, var(--primary-hot) 38%, transparent);justify-content:space-between;align-items:center;display:flex;box-shadow:inset 0 -1px #ffffff24}html .topbar .tb-left{flex:0 auto;align-items:center;min-width:0;display:flex}html .topbar .tb-right{flex:none}html .topbar .header-logo-wrap{align-items:center;gap:calc(.1 * var(--u));min-width:0;display:flex}html .topbar .tb-logo{align-items:center;text-decoration:none;display:flex}html .topbar .header-logo-img{width:calc(.86 * var(--u));height:calc(.86 * var(--u));object-fit:contain;background:0 0;border:none;border-radius:0;padding:0;display:block}html .topbar .header-wordmark{font-size:calc(.34 * var(--u));letter-spacing:0;color:#fff;white-space:nowrap;text-overflow:clip;font-weight:800;overflow:hidden}html .topbar .tb-right{align-items:center;gap:calc(.18 * var(--u));min-width:0;display:flex}html .topbar .member-balance.hdr-balance{align-items:center;gap:calc(.1 * var(--u));height:calc(.75 * var(--u));padding:0 calc(.16 * var(--u));background:var(--surface-3);border-radius:calc(.088 * var(--u));display:flex}html .topbar .hdr-balance .symbol{width:calc(.35 * var(--u));height:calc(.35 * var(--u));background:linear-gradient(var(--primary-hot), var(--accent));color:var(--on-primary);font-size:calc(.22 * var(--u));border-radius:50%;justify-content:center;align-items:center;font-weight:800;display:flex}html .topbar .hdr-balance .sum-balance{color:#fff;font-size:calc(.24 * var(--u));font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}html .topbar .hdr-balance .balance-control{width:calc(.35 * var(--u));height:calc(.35 * var(--u));color:var(--text-dim);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}html .topbar .hdr-balance .balance-control .material-symbols-outlined{font-size:calc(.3 * var(--u));line-height:1;display:block}html .topbar .hdr-balance .balance-control.spinning .material-symbols-outlined{animation:.5s linear infinite tb-refresh-spin}@keyframes tb-refresh-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}html .topbar .user-info{align-items:center;gap:calc(.12 * var(--u));height:calc(.75 * var(--u));min-width:0;text-decoration:none;display:flex}html .topbar .user-avatar{width:calc(.69 * var(--u));height:calc(.69 * var(--u));border-radius:50%;flex:none;display:flex;overflow:hidden}html .topbar .user-avatar>*{width:100%;height:100%}html .topbar .user-name{min-width:0;font-size:calc(.27 * var(--u));flex-direction:column;justify-content:center;line-height:1.15;display:flex}html .topbar .user-name b{color:#fff;font-weight:600}html .topbar .user-name i{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:calc(1.35 * var(--u));font-style:normal;overflow:hidden}html .topbar .login-register{align-items:center;gap:calc(.21 * var(--u));display:flex}html .topbar .login-register .nav-btn{width:calc(1.17 * var(--u));height:calc(.76 * var(--u));border-radius:calc(.08 * var(--u));font-size:calc(.24 * var(--u));white-space:nowrap;justify-content:center;align-items:center;font-weight:700;text-decoration:none;display:flex}html .topbar .login-register .nav-btn.login-btn{background:var(--primary);color:var(--on-primary);border:0}html .topbar .login-register .nav-btn.register-btn{background:linear-gradient(var(--surface-3), var(--surface-3)) padding-box, linear-gradient(0deg, var(--primary-hot), var(--primary)) border-box;border:calc(.04 * var(--u)) solid transparent;color:var(--text)}
