:root{
  --yellow:#ffd51f;
  --yellow2:#ffeb78;
  --orange:#ff9d00;
  --brown:#6c3700;
  --cream:#fff9dc;
  --paper:#fffef7;
  --ink:#2f2500;
  --muted:#817648;
  --line:#eadb9a;
  --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{background:linear-gradient(180deg,#ffe93b 0,#fff3a0 24%,#fff9dd 58%,#ffef85 100%);background-attachment:fixed}
body:before,body:after{content:"";position:fixed;inset:auto;z-index:-1;border-radius:50%;filter:blur(2px);opacity:.55}
body:before{width:280px;height:280px;left:-90px;top:90px;background:radial-gradient(circle,#fff8bd 0 40%,#f5c800 41% 43%,transparent 44%)}
body:after{width:360px;height:360px;right:-130px;bottom:70px;background:radial-gradient(circle,#fffbe0 0 36%,#ffcf14 37% 39%,transparent 40%)}
button,input,select{font:inherit}.hidden{display:none!important}.embossed{border:1px solid rgba(157,105,0,.18);box-shadow:var(--shadow),var(--inset)}
.primary{border:0;border-radius:18px;background:linear-gradient(180deg,#ffef55,#ffc400);color:#442800;font-weight:900;padding:12px 18px;box-shadow:0 5px 0 #d99900,inset 0 2px 0 rgba(255,255,255,.8)}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #d99900}.jumbo{font-size:18px;padding:14px 24px}
.splash{min-height:100vh;display:grid;place-items:center;padding:20px;overflow:hidden;position:relative;background:linear-gradient(#ffe226aa,#fff8c2aa)}
.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:36px 28px;text-align:center;border-radius:38px;background:rgba(255,251,221,.9)}
.mascot{font-size:48px;filter:drop-shadow(0 6px 0 rgba(116,72,0,.15))}.mascot.big{font-size:92px}.brand{font-weight:1000;letter-spacing:-2px;color:#ffb300;text-shadow:0 3px 0 #fff,0 6px 0 #7a4100,0 10px 18px rgba(121,69,0,.22)}.brand.mega{font-size:52px}.tagline{font-weight:1000;font-size:24px;margin-top:12px}.subtag{font-weight:700;color:#8b5b00;margin:5px 0 24px}
.app{width:min(560px,100%);margin:0 auto;min-height:100vh;padding:16px 16px 104px;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:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(#fff,#ffe67d);font-size:25px}.hello{font-size:12px;color:#8c6500}.icon-btn{position:relative;border:0;background:linear-gradient(#fffdf1,#ffe679);width:46px;height:46px;border-radius:16px;font-size:20px}.dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff3d5a;border:2px solid white}
.balance-card{border-radius:26px;padding:18px;background:linear-gradient(135deg,#fffef8 0,#fff2a3 100%);display:flex;align-items:center;justify-content:space-between}.small-label{font-size:12px;color:#8d7224;font-weight:800}.balance{font-size:28px;font-weight:1000;margin-top:2px}.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0}.quick{border:0;border-radius:18px;background:linear-gradient(#fff,#fff0a0);padding:11px 5px;font-size:11px;font-weight:900;color:#604000}.quick span{display:block;font-size:26px;margin-bottom:5px}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:28px;padding:18px;background:linear-gradient(135deg,#ffd21e,#ffeb7e 48%,#fff7bd);overflow:hidden}.banner h2{font-size:19px;line-height:1.05;margin:3px 0 7px}.banner p{font-size:12px;margin:0;color:#775600}.banner-kicker{font-weight:1000;color:#7b3e00;letter-spacing:.8px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}.section-head h3{margin:0;font-size:18px}.link-btn{border:0;background:none;color:#b16a00;font-weight:900}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.service{border:0;border-radius:20px;min-height:92px;padding:9px 4px;background:linear-gradient(#fffef9,#fff5ba);color:#584000;font-weight:900;font-size:11px;box-shadow:0 5px 0 rgba(161,103,0,.14),inset 0 2px 0 #fff}.service .svc-icon{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;margin:0 auto 6px;font-size:26px;background:var(--tile,#ffe78b);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 3px 0 rgba(120,76,0,.12)}
.promo{margin-top:18px;border-radius:22px;background:linear-gradient(135deg,#fff,#ffe36c);padding:14px;display:flex;align-items:center;gap:12px}.promo-icon{font-size:34px}.promo p{margin:2px 0 0;font-size:11px;color:#785b00}.mini-btn{margin-left:auto;border:0;border-radius:12px;padding:8px 10px;background:#ffb600;color:#402800;font-weight:900}.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}.recent-left{display:flex;align-items:center;gap:10px}.recent-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#ffed9b}.recent small{display:block;color:#8f8053}.amount{font-weight:1000}
.bottom-nav{position:fixed;z-index:20;bottom:12px;left:50%;transform:translateX(-50%);width:min(528px,calc(100% - 24px));height:76px;background:rgba(255,253,231,.97);border-radius:24px;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px}.nav-item{border:0;background:none;font-size:22px;color:#93762a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.nav-item span{font-size:10px;font-weight:900}.nav-item.active{background:linear-gradient(#fff6a8,#ffd42b);border-radius:18px;color:#3f2b00;box-shadow:inset 0 2px 0 #fff,0 3px 0 #dfad00}
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:rgba(47,37,0,.4);display:flex;align-items:flex-end;justify-content:center;padding:10px}.sheet{width:min(560px,100%);max-height:88vh;overflow:auto;background:#fffdf1;border-radius:30px 30px 18px 18px;padding:13px 16px 22px}.sheet-handle{width:56px;height:6px;border-radius:99px;background:#d6bf70;margin:0 auto 12px}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-head h2{margin:2px 0 0}.form-group{margin:14px 0}.form-group label{display:block;font-size:12px;font-weight:900;color:#6f5700;margin:0 0 6px 3px}.input{width:100%;border:1px solid #ead77c;background:#fffef8;border-radius:16px;padding:14px;outline:none;box-shadow:inset 0 2px 5px rgba(92,60,0,.08)}.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.chip{border:1px solid #ead16a;background:#fffdf0;border-radius:16px;padding:12px;text-align:left;font-weight:900}.chip small{display:block;color:#9c8645;margin-top:3px}.chip.selected{background:linear-gradient(#fff6a4,#ffd324);box-shadow:0 4px 0 #dca600}.summary{background:#fff7c4;border:1px dashed #d5a800;border-radius:18px;padding:14px;margin:12px 0}.summary-row{display:flex;justify-content:space-between;margin:7px 0}.summary-row.total{font-size:18px;font-weight:1000;border-top:1px dashed #d6b42a;padding-top:10px}.success{text-align:center;padding:20px 4px}.success .check{font-size:80px}.success h2{color:#2aa22a}.toast{position:fixed;z-index:100;left:50%;bottom:100px;transform:translateX(-50%);background:#3a2b00;color:white;padding:12px 16px;border-radius:14px;font-weight:800;box-shadow:0 8px 30px #0004}.empty{padding:18px;text-align:center;background:#fffdf4;border-radius:18px;color:#8c7644}.account-card{padding:18px;border-radius:22px;background:#fffdf0;margin-top:8px}.page-title{margin:8px 2px 12px}.wide-btn{width:100%;margin-top:10px}
@media (max-width:380px){.service-grid{grid-template-columns:repeat(3,1fr)}.quick-row{grid-template-columns:repeat(2,1fr)}.brand.mega{font-size:44px}.balance{font-size:24px}}