:root{
  --yellow:#ffd51f;--yellow2:#ffef79;--orange:#ff9f00;--brown:#6b3600;--cream:#fff9dc;--paper:#fffef7;
  --ink:#312300;--muted:#806f3d;--line:#eadb9a;--green:#19b95d;--red:#e43d53;--blue:#1597ff;
  --shadow:0 8px 0 rgba(145,92,0,.15),0 14px 30px rgba(135,83,0,.15);
  --inset:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(143,88,0,.12)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff7bd}body{overflow-x:hidden;background:linear-gradient(180deg,#ffdf22 0,#fff19c 22%,#fff9df 56%,#ffe86a 100%);background-attachment:fixed}button,input,select{font:inherit}.hidden{display:none!important}.embossed{border:1px solid rgba(157,105,0,.18);box-shadow:var(--shadow),var(--inset)}
.bg-cloud{position:fixed;z-index:-3;background:#fff;border-radius:999px;filter:blur(.2px);opacity:.55}.bg-cloud:before,.bg-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud-a{width:220px;height:78px;left:-50px;top:180px}.cloud-a:before{width:90px;height:90px;left:40px;top:-45px}.cloud-a:after{width:110px;height:110px;right:22px;top:-58px}.cloud-b{width:260px;height:90px;right:-80px;top:420px}.cloud-b:before{width:120px;height:120px;left:40px;top:-60px}.cloud-b:after{width:100px;height:100px;right:30px;top:-48px}.bg-hill{position:fixed;z-index:-4;width:430px;height:240px;border-radius:50%;bottom:-155px;background:linear-gradient(#8ce069,#4eb84c)}.hill-a{left:-140px}.hill-b{right:-160px;transform:scale(.9)}
.primary{border:0;border-radius:18px;background:linear-gradient(180deg,#fff15a,#ffc400);color:#442800;font-weight:1000;padding:12px 18px;box-shadow:0 5px 0 #d99900,inset 0 2px 0 rgba(255,255,255,.8);cursor:pointer}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #d99900}.primary:disabled{filter:grayscale(.6);opacity:.6;cursor:not-allowed}.jumbo{font-size:18px;padding:14px 24px}.wide-btn{width:100%;margin-top:14px}
.splash{min-height:100vh;display:grid;place-items:center;padding:20px;overflow:hidden;position:relative}.sunburst{position:absolute;width:1200px;height:1200px;background:repeating-conic-gradient(from 0deg,#fff7a0 0 7deg,#ffd415 7deg 14deg);opacity:.28;border-radius:50%;animation:spin 80s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.splash-card{position:relative;z-index:1;width:min(430px,94vw);padding:26px 24px 30px;text-align:center;border-radius:38px;background:rgba(255,251,221,.92)}.splash-mascot{width:190px;max-width:60vw;display:block;margin:-20px auto -18px}.splash-logo{width:min(360px,86vw);display:block;margin:0 auto}.subtag{font-weight:900;color:#805000;margin:2px 0 22px;font-size:15px}
.app{width:min(620px,100%);margin:0 auto;min-height:100vh;padding:16px 16px 110px;position:relative}.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 16px}.profile-wrap{display:flex;align-items:center;gap:12px}.avatar{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(#fff,#ffe67d);font-size:25px;font-weight:1000;color:#8b4d00}.hello{font-size:12px;color:#8c6500}.top-actions{display:flex;gap:8px}.icon-btn{position:relative;border:0;background:linear-gradient(#fffdf1,#ffe679);width:46px;height:46px;border-radius:16px;font-size:20px;cursor:pointer}.dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff3d5a;border:2px solid white}
.balance-card{border-radius:28px;padding:18px;background:linear-gradient(135deg,#fffef8 0,#fff3a8 100%);display:flex;align-items:center;justify-content:space-between;gap:12px}.small-label{font-size:12px;color:#8d7224;font-weight:900}.balance{font-size:24px;font-weight:1000;margin-top:4px}.connection-line{display:flex;align-items:center;gap:6px;font-size:11px;color:#7a690e;margin-top:6px}.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.status-dot.online{background:#1bc75f;box-shadow:0 0 0 3px #c8f8d8}.status-dot.offline{background:#d9a400;box-shadow:0 0 0 3px #fff0a0}
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.quick{border:0;border-radius:20px;background:linear-gradient(#fff,#fff0a0);padding:9px 5px 10px;font-size:10.5px;font-weight:1000;color:#604000;cursor:pointer}.quick img{display:block;width:42px;height:42px;margin:0 auto 3px;border-radius:13px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:6px;border-radius:30px;padding:18px 14px 16px 18px;background:linear-gradient(135deg,#ffd21e,#ffeb7e 48%,#fff7bd);overflow:hidden;min-height:154px}.banner-copy{min-width:0;position:relative;z-index:2}.banner h2{font-size:20px;line-height:1.04;margin:4px 0 8px;max-width:320px}.banner p{font-size:12px;line-height:1.35;margin:0;color:#775600;max-width:330px}.banner-kicker{font-weight:1000;color:#7b3e00;letter-spacing:1.2px}.banner-mascot{width:150px;margin-right:-20px;align-self:flex-end}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}.section-head h3{margin:0;font-size:19px}.link-btn{border:0;background:none;color:#b16a00;font-weight:1000;cursor:pointer}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.service{border:1px solid rgba(185,132,0,.14);border-radius:22px;min-height:112px;padding:10px 4px 9px;background:linear-gradient(#fffef9,#fff6c9);color:#553d00;font-weight:1000;font-size:11px;box-shadow:0 6px 0 rgba(161,103,0,.14),inset 0 2px 0 #fff;cursor:pointer}.service:hover{transform:translateY(-1px)}.service:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(161,103,0,.14),inset 0 2px 0 #fff}.service .svc-icon{width:62px;height:62px;display:block;margin:0 auto 4px}.service .badge{display:inline-block;margin-top:4px;padding:2px 6px;border-radius:999px;background:#ffe16d;color:#764800;font-size:8px}
.promo{margin-top:18px;border-radius:24px;background:linear-gradient(135deg,#fff,#ffe36c);padding:14px;display:flex;align-items:center;gap:12px}.promo-icon img{width:46px;height:46px}.promo p{margin:2px 0 0;font-size:11px;color:#785b00;line-height:1.35}.mini-btn{margin-left:auto;border:0;border-radius:12px;padding:8px 10px;background:#ffb600;color:#402800;font-weight:1000;cursor:pointer}.recent-list{display:grid;gap:9px}.recent{background:#fffdf2;border:1px solid #eedc8b;border-radius:18px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.recent-left{display:flex;align-items:center;gap:10px;min-width:0}.recent-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#ffed9b;flex:0 0 auto}.recent-icon img{width:42px;height:42px}.recent b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.recent small{display:block;color:#8f8053;font-size:10px;line-height:1.4}.amount{font-weight:1000;white-space:nowrap}.status-pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:1000;margin-top:3px}.status-pill.success{background:#daf7e5;color:#11713a}.status-pill.pending{background:#fff2b7;color:#7a5a00}.status-pill.fail{background:#ffe0e5;color:#98283b}
.bottom-nav{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-50%);width:min(588px,calc(100% - 24px));height:82px;background:rgba(255,253,231,.97);border-radius:27px;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px}.nav-item{border:0;background:none;color:#93762a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:18px;cursor:pointer;font-weight:800}.nav-item img{width:39px;height:39px}.nav-item span{font-size:10px}.nav-item.active{background:linear-gradient(#fff7a5,#ffd934);color:#513300;box-shadow:0 4px 0 #e0a100,inset 0 2px 0 #fff}
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:rgba(57,38,0,.32);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(620px,100%);max-height:92vh;overflow:auto;background:linear-gradient(#fffef9,#fff8d1);border-radius:32px 32px 0 0;padding:12px 16px 30px}.sheet-handle{width:64px;height:6px;border-radius:999px;background:#dfcc84;margin:2px auto 13px}.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-12px;background:linear-gradient(#fffef9 75%,rgba(255,254,249,.1));z-index:4;padding:10px 0 12px}.sheet-head h2{margin:2px 0 0}.sheet-loading{padding:34px 12px;text-align:center;color:#8a7000;font-weight:900}.spinner{width:42px;height:42px;border:6px solid #ffe69a;border-top-color:#ffad00;border-radius:50%;animation:rot 1s linear infinite;margin:0 auto 12px}@keyframes rot{to{transform:rotate(360deg)}}
.form-group{margin:12px 0}.form-group label{display:block;font-size:12px;font-weight:1000;margin:0 0 6px}.input,.select{width:100%;border:2px solid #ead78d;background:#fffdf6;border-radius:16px;padding:13px 14px;outline:none}.input:focus,.select:focus{border-color:#ffb600;box-shadow:0 0 0 4px #fff0ad}.chips{display:grid;gap:8px}.chip{width:100%;border:2px solid #ead78d;background:#fffdf6;border-radius:16px;padding:12px;text-align:left;font-weight:900;color:#4b3900;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}.chip.selected{border-color:#ffad00;background:#fff3a8;box-shadow:inset 0 2px 0 #fff}.chip small{display:block;color:#8b7a4a;font-weight:600;margin-top:2px}.chip .product-price{text-align:right;color:#9d5a00}.product-list{display:grid;gap:8px;max-height:50vh;overflow:auto;padding:2px}.product-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:17px;background:#fffdf4;border:1px solid #eadb9a;cursor:pointer}.product-row:hover{border-color:#ffb700;background:#fff8cd}.product-row b{font-size:12px}.product-row small{display:block;color:#877641;margin-top:3px;line-height:1.35}.product-row .price{font-weight:1000;color:#a35b00;white-space:nowrap}.summary{border:1px solid #eadb9a;border-radius:20px;background:#fffdf4;padding:14px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed #e7d79a;font-size:12px}.summary-row:last-child{border-bottom:0}.summary-row.total{font-size:17px;font-weight:1000;color:#9d5b00}.summary-row b{text-align:right}.success{text-align:center}.success .check{font-size:66px;margin:6px 0}.success h2{margin:0 0 6px;color:#10994c}.success h3{margin:0 0 16px}.result-sn{word-break:break-all}.empty{padding:22px;text-align:center;background:#fff8cf;border:1px dashed #e1c867;border-radius:18px;color:#856b17}.warning{padding:12px 14px;border-radius:16px;background:#fff2c0;border:1px solid #edc658;color:#7a5700;font-size:12px;line-height:1.45}.danger{background:#ffe6e9;border-color:#f0a3af;color:#8b2b3b}.info-card{padding:14px;border-radius:18px;background:#fffdf3;border:1px solid #eadb9a;line-height:1.5;font-size:12px}.token-card{margin:10px 0;padding:14px;border-radius:20px;background:linear-gradient(#fff,#fff1a8);border:1px solid #e3c45a}.account-card{text-align:center;padding:18px;border-radius:22px;background:#fffdf3}.account-card .avatar-large{width:80px;height:80px;border-radius:26px;margin:0 auto 8px;display:grid;place-items:center;background:linear-gradient(#fff,#ffe67d);font-size:40px;font-weight:1000;color:#8b4d00}.search-box{position:sticky;top:70px;z-index:3;background:#fff9df;padding:4px 0 8px}.search-box .input{padding-left:40px}.search-wrap{position:relative}.search-wrap:before{content:"⌕";position:absolute;left:14px;top:7px;font-size:24px;color:#a88419;z-index:2}.section-label{font-weight:1000;font-size:12px;margin:14px 0 7px;color:#765000}.api-note{font-size:10px;color:#8a7b50;margin-top:8px;line-height:1.4}
.toast{position:fixed;z-index:100;left:50%;bottom:106px;transform:translateX(-50%);background:#2d260d;color:#fff;border-radius:14px;padding:11px 15px;font-weight:800;font-size:12px;box-shadow:0 8px 25px rgba(0,0,0,.25);max-width:90vw;text-align:center}
@media(max-width:430px){.app{padding-left:10px;padding-right:10px}.service-grid{gap:7px}.service{min-height:102px;font-size:10px;border-radius:18px}.service .svc-icon{width:56px;height:56px}.banner{padding-left:14px}.banner h2{font-size:17px}.banner-mascot{width:128px}.balance{font-size:20px}.quick{font-size:9px}.quick img{width:38px;height:38px}.bottom-nav{height:75px}.nav-item img{width:34px;height:34px}.nav-item span{font-size:9px}.recent b{max-width:170px}}
@media(min-width:760px){body{padding-top:4px}.app{background:rgba(255,248,201,.44);box-shadow:0 0 50px rgba(137,90,0,.12)}.sheet{border-radius:32px;margin-bottom:12px;max-height:88vh}.sheet-backdrop{align-items:center}.bottom-nav{bottom:18px}}

/* v1.2 - login, profile, settings */
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:18px;position:relative;overflow:auto}.auth-shell{width:min(480px,100%);padding:8px 0 24px}.auth-hero{border-radius:34px;background:linear-gradient(145deg,#fffbe2,#ffe04a 55%,#ffc20f);padding:14px 18px 18px;text-align:center;position:relative;overflow:hidden}.auth-hero:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.28);right:-90px;top:-90px}.auth-mascot{width:140px;display:block;margin:-6px auto -10px;position:relative;z-index:1}.auth-logo{width:min(320px,82vw);display:block;margin:0 auto;position:relative;z-index:1}.auth-tagline{font-weight:900;color:#704200;font-size:13px;margin-top:4px;position:relative;z-index:1}.auth-card{margin-top:16px;border-radius:30px;background:rgba(255,254,242,.96);padding:22px}.auth-title{font-size:24px;font-weight:1000;text-align:center}.auth-subtitle{text-align:center;color:#8b7125;font-size:12px;margin:5px 0 14px}.auth-main-btn{font-size:15px}.ghost-btn{border:2px solid #e7c74f;background:#fffdf2;border-radius:18px;padding:12px 16px;font-weight:1000;color:#744900;cursor:pointer}.check-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#715d20;margin:8px 2px 4px}.check-row input{width:18px;height:18px;accent-color:#f2b600}.password-wrap{position:relative}.password-wrap .input{padding-right:50px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:#fff1a9;border-radius:12px;width:36px;height:36px;cursor:pointer}.auth-footer,.app-footer{text-align:center;color:#765a00;font-size:12px;font-weight:800}.auth-footer{padding:18px 4px 4px}.app-footer{padding:28px 0 4px}.auth-footer a,.app-footer a{color:#7a3d00;font-weight:1000;text-decoration:none}.auth-footer a:hover,.app-footer a:hover{text-decoration:underline}
.profile-button{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit}.profile-text{min-width:0}.profile-text strong{display:block;max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-text small{display:block;color:#9a7518;font-size:10px;margin-top:2px;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar.has-photo,.avatar-large.has-photo{background-position:center;background-size:cover;color:transparent}.form-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.profile-summary{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:center;padding:16px;border-radius:22px;background:linear-gradient(145deg,#fffdf2,#fff0a2);border:1px solid #ead27a}.profile-photo{width:88px;height:88px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(#fff,#ffe06b);font-weight:1000;font-size:38px;color:#8a4b00;overflow:hidden;box-shadow:0 6px 0 rgba(157,100,0,.15),inset 0 2px 0 #fff}.profile-photo img{width:100%;height:100%;object-fit:cover}.profile-meta h3{margin:0 0 4px;font-size:20px}.profile-meta p{margin:3px 0;color:#806a27;font-size:11px;line-height:1.35}.settings-list{display:grid;gap:9px;margin-top:14px}.settings-item{width:100%;border:1px solid #ead792;border-radius:18px;background:#fffdf3;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;color:#4a3500;box-shadow:0 4px 0 rgba(154,98,0,.09),inset 0 1px 0 #fff}.settings-item .left{display:flex;align-items:center;gap:10px;min-width:0}.settings-item .ico{width:42px;height:42px;border-radius:13px;background:linear-gradient(#fff5a4,#ffd536);display:grid;place-items:center;font-size:20px;flex:0 0 auto}.settings-item b{display:block;font-size:12px}.settings-item small{display:block;color:#8a7542;font-size:10px;margin-top:2px}.settings-chevron{font-size:24px;color:#a86f00}.danger-btn{border-color:#f0a8b1;background:#fff0f2;color:#9b2f3f}.field-hint{font-size:10px;color:#8c7b50;line-height:1.4;margin-top:5px}.settings-status{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:16px;background:#fff7c9;border:1px solid #ead47b;font-size:12px;font-weight:900}.settings-status .status-dot{flex:0 0 auto}.masked-value{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}.photo-actions{display:flex;gap:8px;margin-top:10px}.photo-actions button{flex:1}.secondary-btn{border:2px solid #e0c14a;border-radius:15px;background:#fff8cc;color:#674400;font-weight:1000;padding:10px 12px;cursor:pointer}.notice-box{background:#eef9ff;border:1px solid #acdfff;color:#275f75;border-radius:16px;padding:12px;font-size:11px;line-height:1.45}.separator{height:1px;background:#eadb9a;margin:16px 0}.logout-btn{width:100%;border:0;border-radius:17px;padding:12px;background:linear-gradient(#ff8b9c,#f34a61);color:#fff;font-weight:1000;box-shadow:0 5px 0 #c72f45;cursor:pointer}.logout-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c72f45}.tiny-label{font-size:9px;color:#927d43;text-transform:uppercase;letter-spacing:.5px;font-weight:1000}.version-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#fff2aa;color:#795400;font-size:9px;font-weight:1000}.profile-section-title{font-weight:1000;color:#765000;margin:17px 2px 8px;font-size:12px}
@media(max-width:430px){.auth-screen{padding:10px}.auth-card{padding:18px}.auth-mascot{width:125px}.auth-title{font-size:21px}.form-grid.two{grid-template-columns:1fr}.profile-summary{grid-template-columns:76px 1fr}.profile-photo{width:72px;height:72px;border-radius:22px;font-size:30px}.profile-text strong{max-width:185px}.profile-text small{max-width:180px}}