*{box-sizing:border-box}body{margin:0;background:#070c20;color:#f8faff;font-family:Arial,Helvetica,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 0 12%,#24336588,transparent 45%),radial-gradient(ellipse at 110% 40%,#63432633,transparent 48%)}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}header{height:88px;background:#2b353e;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 850px)/2));font-size:24px}header button{background:none;font-size:35px}header small{font-size:9px;color:#a6b1c5;vertical-align:middle;margin-left:6px}main{max-width:850px;margin:auto;padding:42px 26px 110px}.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px}.wordmark{display:flex;align-items:center;gap:20px;font-size:22px}.wordmark svg{width:52px;height:60px;color:#2264dd}.wordmark em{font-size:17px;font-style:normal;letter-spacing:3px;color:#72d6f1;margin-left:8px}.wallet{background:#19473d55;color:#2bd37e;border:1px solid #287052;border-radius:30px;padding:14px 20px;font-size:20px}.heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:26px}h1{font-size:36px;margin:0}h1 span{color:#16b9e9}.demo{font-size:11px;color:#a2aec9;border:1px solid #36425e;padding:6px 9px;border-radius:12px}.assets{padding:36px 40px 28px;border-radius:30px;border:1px solid #35415f;background:linear-gradient(130deg,#1c2c68,#101d36 65%,#1d1c50);box-shadow:0 15px 35px #0002}.asset-top{display:flex;justify-content:space-between;align-items:center;gap:20px}.muted{color:#8b95ad;font-size:23px}.asset-label{display:flex;align-items:center;gap:16px;font-size:21px}.asset-label i{display:grid;place-items:center;width:51px;height:51px;background:#0c65db;border:4px double white;border-radius:50%;font-style:normal;color:white;font-size:32px}.assets strong{font-size:70px;display:block;margin-top:12px;letter-spacing:1px}.vip{padding:17px 22px;border-radius:23px;border:1px solid #5a658055;background:#ffffff07;min-width:225px;color:#9aa9c2}.vip b{display:block;text-align:right;font-size:27px}.progress{height:7px;background:#ffffff15;border-radius:8px;margin:15px 0 10px}.progress span{display:block;width:60%;height:100%;background:#a2b0c9;border-radius:8px}.vip small{font-size:14px}.chart{width:100%;height:96px;margin-top:18px;overflow:visible}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.stat{text-align:center;border:1px solid #234c485e;border-radius:24px;padding:22px 8px 15px;background:linear-gradient(#10313555,#0a102433)}.stat div{color:#8994ab;font-size:17px;line-height:1.4;min-height:45px}.stat strong{display:block;font-size:27px;margin:8px 0}.stat>span{font-size:30px}.green{color:#2bce79}.blue{color:#1bbcf4;border-color:#18547866;background:linear-gradient(#10384e55,#0a102433)}.purple{color:#8490ff;border-color:#41447366;background:linear-gradient(#2e294855,#0a102433)}.cash{width:100%;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(110deg,#3a2b2455,#0d1021);border:1px solid #6f4d2966;border-radius:24px;padding:25px 30px;margin-bottom:24px;color:#9598a8;font-size:23px}.cash span{display:flex;align-items:center;gap:18px}.cash i{font-style:normal;background:#6c421c33;color:#ffa216;padding:9px 14px;border-radius:14px}.cash b{font-size:34px;color:#ffa20d}.withdraw{background:#121831;border:1px solid #303653;border-radius:25px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:16px}.withdraw .muted span{color:#8391ff;margin-right:10px}.withdraw strong{display:block;font-size:43px;margin:12px 0}.withdraw small{color:#7b859e;font-size:16px}.withdraw button,.primary{background:linear-gradient(110deg,#ff9e13,#ed8300);color:#1a1207;font-weight:bold;padding:22px 30px;border-radius:22px;font-size:23px;box-shadow:0 0 30px #f6971515}.tabs{display:flex;background:#121831;border:1px solid #2c3452;border-radius:24px;padding:8px;margin:36px 20px 23px}.tabs button{flex:1;background:none;color:#8490a7;padding:14px 3px;border-radius:16px;font-size:28px}.tabs span{display:block;font-size:17px;margin-top:10px}.tabs .active{color:#27ca78;background:#164b46aa}.row{display:flex;align-items:center;gap:18px;background:#121831;border:1px solid #2a3451;border-radius:20px;margin:12px 20px;padding:24px}.row .icon{color:#2bd27f;background:#164b4644;padding:12px;border-radius:12px;font-size:24px}.row b{font-size:21px;font-weight:500}.row small{display:block;color:#8c98ae;margin-top:8px}.row strong{color:#2bce79;margin-left:auto;font-size:22px}.empty{padding:35px;text-align:center;color:#8f9db5}.footnote{text-align:center;font-size:12px;color:#727e97;line-height:1.8;margin-top:28px}nav{position:fixed;bottom:0;width:100%;height:78px;background:#090f25f5;border-top:1px solid #252d48;display:flex;justify-content:space-evenly;backdrop-filter:blur(16px)}nav button{background:none;color:#7c879c;font-size:36px;position:relative;min-width:65px}.selected{color:#ff9e13!important}.selected:before{content:'';position:absolute;top:6px;left:20%;width:60%;height:5px;border-radius:5px;background:#ff9e13;box-shadow:0 0 14px #ffa513}dialog{background:#141e38;color:white;border:1px solid #3a486a;border-radius:24px;padding:28px;width:min(90vw,440px)}dialog::backdrop{background:#030817cc;backdrop-filter:blur(7px)}dialog h2{margin-top:4px}dialog p{color:#a8b5cd;line-height:1.7}dialog label{display:block;color:#b3bfd3;margin:18px 0}dialog input{display:block;width:100%;margin-top:10px;padding:14px;background:#090f24;color:white;border:1px solid #3e4d6e;border-radius:12px}.primary{width:100%;font-size:17px;padding:16px}.close{float:right;background:none;font-size:26px}#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:#263b52;border:1px solid #46637e;padding:16px 22px;border-radius:15px;display:none;max-width:90vw;width:max-content;font-size:14px}button:hover{filter:brightness(1.15)}button:focus-visible{outline:2px solid #45cfff;outline-offset:4px}button:disabled{opacity:.45;cursor:default}@media(max-width:600px){header{height:70px;font-size:19px;padding:0 19px}main{padding:26px 18px 95px}.wordmark{font-size:16px;gap:10px}.wordmark svg{width:34px;height:44px}.wordmark em{font-size:11px;letter-spacing:2px;margin-left:4px}.wallet{font-size:12px;padding:10px}.brand{margin-bottom:24px}h1{font-size:28px}.demo{font-size:9px}.assets{padding:23px 19px 18px;border-radius:23px}.asset-label{font-size:13px;gap:8px}.asset-label i{width:33px;height:33px;font-size:22px}.assets strong{font-size:43px;letter-spacing:0}.vip{min-width:128px;padding:12px 10px;border-radius:18px}.vip b{font-size:20px}.vip small{font-size:9px}.chart{height:70px}.stats{gap:8px;margin:16px 0}.stat{padding:16px 4px 10px;border-radius:19px}.stat div{font-size:11px;min-height:32px}.stat strong{font-size:17px}.stat>span{font-size:25px}.cash{padding:17px 16px;font-size:17px;border-radius:19px;margin-bottom:16px}.cash b{font-size:27px}.withdraw{padding:23px 16px;border-radius:20px;gap:8px}.muted{font-size:15px}.withdraw strong{font-size:28px}.withdraw small{font-size:11px}.withdraw button{font-size:15px;padding:19px 16px;border-radius:18px}.tabs{margin:24px 10px 16px;border-radius:20px}.tabs span{font-size:12px}.row{margin:10px;padding:17px 12px;gap:10px}.row b{font-size:16px}.row strong{font-size:16px}.row small{font-size:11px}nav{height:70px}}@media(max-width:360px){.wordmark em{display:none}.assets strong{font-size:36px}.vip{min-width:115px}.stat strong{font-size:14px}.withdraw button{padding:15px 10px;font-size:13px}}

/* Responsive layout and touch controls */
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:110px}
body{min-width:280px}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
header button,.close{min-width:44px;min-height:44px}
header>span{min-width:0;text-align:center}
.brand,.asset-top,.withdraw,.row{min-width:0}
.wordmark svg,.asset-label i{flex-shrink:0}
.wallet{white-space:nowrap}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat,.asset-top>div,.withdraw>div,.row>div{min-width:0}
.assets strong,.stat strong,.withdraw strong,.row strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tabs button{min-width:0;min-height:60px}
nav{z-index:10;height:calc(78px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
#toast{z-index:20;bottom:calc(96px + env(safe-area-inset-bottom,0px));overflow-wrap:anywhere}
@media(max-width:760px){
 .assets{padding:26px 22px}.assets strong{font-size:clamp(32px,7vw,58px)}
 .asset-top{gap:14px}.vip{min-width:150px}
 .withdraw{flex-wrap:wrap}.withdraw>div{flex:1 1 240px}
 .withdraw button{flex:1 1 180px;min-height:52px}
 .stat strong{font-size:clamp(15px,3.1vw,24px)}
 .row{gap:12px}.row strong{font-size:clamp(15px,2.8vw,22px)}
}
@media(max-width:600px){
 header{height:auto;min-height:66px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;font-size:18px;gap:4px}
 main{padding:24px max(14px,env(safe-area-inset-right,0px)) calc(100px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
 .brand{flex-wrap:wrap;gap:12px}.wordmark{flex:1 1 auto;gap:9px}.wordmark b{font-size:15px}.wordmark em{display:inline;font-size:10px;letter-spacing:1.5px}.wallet{min-height:44px;padding:10px 12px;font-size:12px}
 .heading{margin-bottom:20px}.assets{padding:22px 18px 16px}.asset-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.7fr);gap:12px;align-items:center}
 .asset-label{font-size:12px;gap:7px;line-height:1.4}.asset-label i{width:29px;height:29px;font-size:19px}
 .assets strong{font-size:clamp(30px,8.5vw,48px);line-height:1.1}.vip{min-width:0;padding:12px 10px}.vip b{font-size:20px}.vip small{font-size:10px;line-height:1.5;display:block}.progress{margin:12px 0 8px}
 .stats{gap:8px}.stat{padding:16px 7px 10px}.stat strong{font-size:clamp(13px,3.5vw,20px);letter-spacing:-.3px}.stat div{font-size:12px;min-height:36px}
 .withdraw{gap:18px;padding:22px 18px}.withdraw>div{flex-basis:100%}.withdraw strong{font-size:clamp(28px,8vw,40px)}.withdraw button{flex-basis:100%;width:100%;padding:17px;font-size:18px}.withdraw small{font-size:12px}
 .tabs{margin:24px 0 16px;padding:6px}.tabs span{font-size:12px;line-height:1.35}.tabs button{padding:12px 4px}
 .row{margin:10px 0;padding:16px 12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px}.row .icon{padding:8px;font-size:20px;text-align:center;grid-row:1 / 3}.row b{font-size:16px}.row small{font-size:12px;line-height:1.6;overflow-wrap:anywhere}.row strong{grid-column:2;margin-left:0;font-size:18px}
 .cash{padding:16px}.cash span{gap:10px}.cash b{font-size:27px}
 nav{height:calc(70px + env(safe-area-inset-bottom,0px))}nav button{flex:1;min-width:44px;min-height:44px;font-size:32px}
 dialog{padding:22px;width:calc(100% - 28px);max-width:440px}dialog h2{font-size:22px;padding-right:35px}dialog p{font-size:15px}.close{position:absolute;right:10px;top:10px}
 .footnote{font-size:11px;padding:0 6px}
}
@media(max-width:380px){
 .brand{align-items:flex-start}.wallet{margin-left:auto}.asset-top{grid-template-columns:minmax(0,1fr)}
 .vip{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center}.vip b{text-align:left}.vip .progress{margin:0}.vip small{grid-column:1 / -1}
 .assets strong{font-size:42px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:first-child{grid-column:1 / -1}.stat strong{font-size:19px}.stat:first-child div{min-height:0}.stat:first-child>span{display:none}.stat div{font-size:12px}.tabs span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

main{animation:page-enter .65s ease-out both}
.assets,.stat,.cash,.withdraw,.tabs{animation:card-enter .7s cubic-bezier(.2,.7,.25,1) both}
.assets{animation-delay:.06s}
.stat:nth-child(1){animation-delay:.12s}
.stat:nth-child(2){animation-delay:.18s}
.stat:nth-child(3){animation-delay:.24s}
.cash{animation-delay:.28s}
.withdraw{animation-delay:.32s}
.tabs{animation-delay:.38s}
@keyframes page-enter{from{opacity:0}to{opacity:1}}
@keyframes card-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){main,.assets,.stat,.cash,.withdraw,.tabs{animation:none}}
