.xl-h5-account{display:none}
@media(max-width:640px){
 .xl-h5-shell-enabled .xl-h5-account{display:flex;flex-direction:column;gap:calc(24 * var(--xl-h5-unit));padding:calc(16 * var(--xl-h5-unit)) calc(16 * var(--xl-h5-unit)) calc(32 * var(--xl-h5-unit))}
 .xl-h5-shell-enabled .xl-h5-account-desktop,.xl-h5-shell-enabled:has(.xl-h5-account) .xl-footer{display:none!important}
 .xl-h5-account h2{font-size:calc(24 * var(--xl-h5-unit));line-height:calc(34 * var(--xl-h5-unit));font-weight:600}
 .xl-h5-account-profile{display:flex;gap:calc(16 * var(--xl-h5-unit));align-items:center;background:var(--bg-surface);padding:calc(16 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit))}
 .xl-h5-account-profile>.my-avatar{width:calc(56 * var(--xl-h5-unit));height:calc(56 * var(--xl-h5-unit));object-fit:cover;border-radius:calc(100 * var(--xl-h5-unit));flex:none}
 .xl-h5-account-profile>span{display:flex;flex-direction:column;gap:calc(6 * var(--xl-h5-unit));flex:1;min-width:0}
 .xl-h5-account-profile strong{font-size:calc(16 * var(--xl-h5-unit));line-height:calc(22 * var(--xl-h5-unit));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .xl-h5-account-profile .user-id{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary)}
 .xl-h5-account-wallets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12 * var(--xl-h5-unit))}
 .xl-h5-account-wallet{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;height:calc(180 * var(--xl-h5-unit));padding:calc(16 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));overflow:hidden;background:linear-gradient(90deg,#fff8eb,#fff0d8)}
 .xl-h5-account-wallet>p,.xl-h5-account-wallet>strong,.xl-h5-account-wallet>a{position:relative;z-index:1}
 .xl-h5-account-wallet p{font-size:calc(14 * var(--xl-h5-unit));line-height:calc(20 * var(--xl-h5-unit))}
 .xl-h5-account-wallet strong{font-size:calc(28 * var(--xl-h5-unit));line-height:calc(34 * var(--xl-h5-unit));color:var(--membership-selection-text-accent-foreground);font-family:var(--font-number,var(--font-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .xl-h5-account-wallet .xl-h5-account-muted{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(17 * var(--xl-h5-unit));color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .xl-h5-account-wallet>a{display:flex;align-items:center;justify-content:center;height:calc(36 * var(--xl-h5-unit));padding:0 calc(8 * var(--xl-h5-unit));flex:none;border-radius:calc(100 * var(--xl-h5-unit));background:linear-gradient(90deg,#ffdb96,#f6b264);font-size:calc(12 * var(--xl-h5-unit));font-weight:600;color:var(--membership-on-accent)}
 .xl-h5-account-vip{background:linear-gradient(90deg,#f1efff,#f9eeff)}
 .xl-h5-account-vip strong{font:600 calc(20 * var(--xl-h5-unit))/calc(34 * var(--xl-h5-unit)) var(--font-ui);color:var(--text-primary)}
 .xl-h5-account-vip>a{background:linear-gradient(90deg,var(--brand-gradient-default-start),var(--brand-gradient-default-end));color:var(--text-on-brand)}
 .xl-h5-account-wallet .xl-h5-account-art{position:absolute;right:calc(-21 * var(--xl-h5-unit));top:calc(18 * var(--xl-h5-unit));width:calc(128 * var(--xl-h5-unit));height:calc(128 * var(--xl-h5-unit));object-fit:contain;opacity:.1;pointer-events:none}
 :root[data-theme="dark"] .xl-h5-account-coin{background:linear-gradient(90deg,#30241b,#3b2b1f)}
 :root[data-theme="dark"] .xl-h5-account-vip{background:linear-gradient(90deg,#231e38,#352440)}
 :root[data-theme="dark"] .xl-h5-account-wallet .xl-h5-account-art{opacity:.2}
 .xl-h5-account-group{display:flex;flex-direction:column;border-radius:calc(12 * var(--xl-h5-unit));background:var(--bg-surface);overflow:hidden}
 .xl-h5-account-entry{position:relative;display:flex;align-items:center;gap:calc(12 * var(--xl-h5-unit));min-width:0;width:100%;height:calc(56 * var(--xl-h5-unit));padding:0 calc(16 * var(--xl-h5-unit));border:0;border-radius:0;background:transparent;color:var(--text-primary);text-align:left;font:400 calc(14 * var(--xl-h5-unit))/calc(20 * var(--xl-h5-unit)) var(--font-ui)}
 .xl-h5-account-entry+.xl-h5-account-entry:before{content:'';position:absolute;top:0;left:calc(16 * var(--xl-h5-unit));right:calc(16 * var(--xl-h5-unit));height:calc(1 * var(--xl-h5-unit));background:var(--border-default)}
 .xl-h5-account-entry>span{flex:1;min-width:0}
 .xl-h5-account-icon{width:calc(20 * var(--xl-h5-unit));height:calc(20 * var(--xl-h5-unit));flex:none}
 .xl-h5-account-arrow{width:calc(16 * var(--xl-h5-unit));height:calc(16 * var(--xl-h5-unit));flex:none}
 .xl-h5-account-logout{display:flex;align-items:center;justify-content:center;height:calc(44 * var(--xl-h5-unit));width:100%;padding:0 calc(16 * var(--xl-h5-unit));border:0;border-radius:calc(100 * var(--xl-h5-unit));background:var(--bg-surface);color:var(--text-tertiary);font-size:calc(14 * var(--xl-h5-unit))}
 .xl-h5-account a:focus-visible,.xl-h5-account button:focus-visible{outline:calc(2 * var(--xl-h5-unit)) solid var(--brand-blue-default);outline-offset:calc(-2 * var(--xl-h5-unit))}
}

/* H5 notification modal: 90% of the viewport with an independent scrolling list. */
.xl-notification-modal{display:none}
@media(max-width:640px){
 .xl-ui .xl-notification-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;margin:0;background:var(--overlay-mask-default);overscroll-behavior:contain}
 .xl-notification-modal .xl-notification-arrow{display:none}
 .xl-notification-modal .xl-notification-box{box-sizing:border-box;width:90vw;height:90vh;height:90dvh;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:0;padding:calc(16 * var(--xl-h5-unit));gap:calc(12 * var(--xl-h5-unit));border-radius:calc(12 * var(--xl-h5-unit));box-shadow:0 8px 32px rgba(0,0,0,.2)}
 .xl-notification-modal-title{display:flex;flex:none;align-items:center;justify-content:space-between;gap:calc(12 * var(--xl-h5-unit))}
 .xl-notification-modal-title h2{margin:0;font-size:calc(18 * var(--xl-h5-unit));line-height:calc(26 * var(--xl-h5-unit));font-weight:600}
 .xl-notification-modal-title [data-notification-close]{display:flex;align-items:center;justify-content:center;flex:none;width:calc(40 * var(--xl-h5-unit));height:calc(40 * var(--xl-h5-unit));min-height:0;padding:0;font-size:calc(28 * var(--xl-h5-unit));line-height:1;font-weight:400}
 .xl-notification-modal .xl-notification-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;gap:calc(12 * var(--xl-h5-unit));-webkit-overflow-scrolling:touch}
 .xl-notification-modal .xl-notification-state{min-height:0;gap:calc(16 * var(--xl-h5-unit))}
 .xl-notification-modal .xl-notification-empty{width:calc(140 * var(--xl-h5-unit));height:calc(141 * var(--xl-h5-unit))}
 .xl-notification-modal .xl-notification-state p{font-size:calc(16 * var(--xl-h5-unit));line-height:calc(22 * var(--xl-h5-unit))}
 .xl-notification-modal .xl-notification-heading{gap:calc(8 * var(--xl-h5-unit))}
 .xl-notification-modal .xl-notification-heading p{font-size:calc(12 * var(--xl-h5-unit));line-height:calc(18 * var(--xl-h5-unit))}
 .xl-notification-modal .xl-notification-heading button{padding:0 calc(12 * var(--xl-h5-unit));min-height:calc(28 * var(--xl-h5-unit));font-size:calc(12 * var(--xl-h5-unit))}
 .xl-ui .xl-notification-modal .xl-notification-card{padding:calc(16 * var(--xl-h5-unit))}
}