*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{--bg:#0a0e2a;--bg2:#10163d;--card:#141b4d;--line:#232c6b;--txt:#eef1ff;--mut:#9aa3d0;--acc:#2f7bff;--acc2:#1f5fd6;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,"Segoe UI",Roboto,"Noto Sans Myanmar","Myanmar3",sans-serif;font-size:15px}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:76px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit;font-size:15px;background:#0d1335;border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--acc)}
textarea{min-height:110px;resize:vertical;line-height:1.6}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(10,14,42,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;justify-content:space-between}
.hdr .logo{font-size:20px;font-weight:800;letter-spacing:.3px;user-select:none;flex:1;text-align:center}
.hdr .logo b{background:linear-gradient(135deg,#5aa2ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.hdr .iconbtn{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--txt);font-size:18px;position:relative;display:flex;align-items:center;justify-content:center}
.badge{position:absolute;top:-6px;right:-6px;background:var(--bad);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-weight:700}

/* banner carousel */
.carousel{position:relative;margin:12px 14px 4px;border-radius:16px;overflow:hidden;background:var(--card);min-height:150px}
.carousel .slide{display:none}
.carousel .slide.on{display:block}
.carousel img{width:100%;height:170px;object-fit:cover;display:block}
.carousel .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.carousel .dots i{width:8px;height:8px;border-radius:4px;background:#ffffff55}
.carousel .dots i.on{background:#fff;width:22px}
.carousel .empty{height:150px;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:14px;padding:20px;text-align:center}

/* category tabs */
.cats{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 4px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:14px;white-space:nowrap}
.cat.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:700}

/* game grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px}
.gcard{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;min-height:148px;padding:0;text-align:left;color:#fff;width:100%;background:#0d1b3d;cursor:pointer}
.gcard .gcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.gcard .giemoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px}
.gcard .gov{position:absolute;left:0;right:0;bottom:0;padding:32px 12px 12px;background:linear-gradient(to top,rgba(2,7,20,.96),rgba(2,7,20,.55) 55%,transparent);display:block}
.gcard .gov b{display:block;font-size:14px;line-height:1.3}
.gcard .gov small{display:block;margin-top:3px;font-size:10px;color:#b7c6e6}

/* wallet card */
.wallet{margin:12px 14px;background:linear-gradient(135deg,#182058,#232c6b);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px}
.wallet .wic{width:52px;height:52px;border-radius:14px;background:var(--acc);display:flex;align-items:center;justify-content:center;font-size:26px;flex:0 0 auto}
.wallet .wl{flex:1}
.wallet .wl small{color:var(--mut);font-size:12px}
.wallet .wl .amt{font-size:26px;font-weight:800}
.wallet .wl .amt span{font-size:14px;color:var(--mut);font-weight:400}

/* quick actions */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 14px 12px}
.qabtn{background:none;color:var(--txt);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}
.qabtn .qc{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;border:1px solid var(--line)}
.qabtn small{color:var(--mut)}

/* section titles */
.sec{padding:8px 14px 0;font-size:16px;font-weight:700}

/* bottom nav */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#0d1335;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.bnav button{background:none;color:var(--mut);padding:10px 4px 12px;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bnav button .bi{font-size:22px}
.bnav button.on{color:var(--acc)}

/* product list */
.plist{padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:space-between}
.pcard .pn{font-size:15px;font-weight:600}
.pcard .pp{color:var(--ok);font-weight:800;margin-top:4px}
.buybtn{background:var(--acc);color:#fff;padding:10px 20px;border-radius:12px;font-weight:700;font-size:14px}

/* forms */
.form{padding:14px;display:flex;flex-direction:column;gap:12px}
.form label{font-size:13px;color:var(--mut);margin-bottom:-6px}
.bigbtn{background:var(--acc);color:#fff;padding:14px;border-radius:14px;font-size:16px;font-weight:700}
.bigbtn:disabled{opacity:.5}
.ghostbtn{background:var(--card);border:1px solid var(--line);color:var(--txt);padding:12px;border-radius:14px;font-size:15px}
.notice{background:#12203f;border:1px solid #2b4a7a;border-left:4px solid var(--acc);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.8;color:#cfe0ff;white-space:pre-line;margin:0 14px 6px}

/* lists */
.lrow{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 14px;font-size:14px}
.lrow .t{font-weight:700}
.lrow .s{color:var(--mut);font-size:12.5px;margin-top:4px;line-height:1.6}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.pending{background:#3a2c10;color:var(--warn)}
.pill.approved,.pill.fulfilled{background:#0f3524;color:var(--ok)}
.pill.rejected{background:#3d1414;color:var(--bad)}

/* profile */
.pfhead{text-align:center;padding:26px 14px 10px}
.avatar{width:96px;height:96px;border-radius:50%;background:var(--card);border:2px solid var(--line);margin:0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pfhead h2{margin-top:10px;font-size:20px}
.pfhead p{color:var(--mut);font-size:13px}
.prow{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:8px 14px;padding:13px 14px;display:flex;align-items:center;gap:12px;width:calc(100% - 28px);color:var(--txt);font-size:14.5px;text-align:left}
.prow .pi{width:38px;height:38px;border-radius:10px;background:#1b2452;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.prow .pt{flex:1}
.prow .pt small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.prow .arr{color:var(--mut)}

/* auth */
.authwrap{padding:40px 24px;max-width:380px;margin:0 auto}
.authwrap h1{text-align:center;font-size:26px;margin-bottom:6px}
.authwrap h1 b{background:linear-gradient(135deg,#5aa2ff,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.authwrap p.sub{text-align:center;color:var(--mut);margin-bottom:24px;font-size:14px}
.authwrap .form{padding:0}
.linklike{background:none;color:var(--acc);font-size:14px;margin-top:14px}

/* admin */
.adm-tabs{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;scrollbar-width:none;position:sticky;top:57px;background:var(--bg);z-index:15}
.adm-tabs::-webkit-scrollbar{display:none}
.atab{flex:0 0 auto;padding:8px 13px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:13px;white-space:nowrap}
.atab.on{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat .n{font-size:22px;font-weight:800}
.stat small{color:var(--mut)}
.admrow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 14px;font-size:13.5px}
.admrow .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.smbtn{padding:7px 12px;border-radius:9px;font-size:13px;background:#1b2452;color:var(--txt);border:1px solid var(--line)}
.smbtn.ok{background:#0f3524;border-color:#14532d;color:#4ade80}
.smbtn.bad{background:#3d1414;border-color:#7f1d1d;color:#f87171}
.smbtn.pri{background:var(--acc);color:#fff;border-color:var(--acc)}
.arow{display:flex;gap:8px;margin:8px 14px}
.arow input,.arow select{flex:1}
.pinwrap{max-width:320px;margin:60px auto;padding:0 20px;text-align:center}
.pinwrap input{text-align:center;font-size:24px;letter-spacing:8px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#1b2452;border:1px solid var(--line);color:var(--txt);padding:12px 20px;border-radius:12px;font-size:14px;z-index:99;max-width:90%}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal .mbox{background:var(--bg2);border:1px solid var(--line);border-radius:20px 20px 0 0;width:100%;max-width:480px;max-height:80vh;overflow:auto;padding:16px}
.mrow{padding:10px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.mrow:last-child{border:none}
.hidden{display:none!important}
.mt{margin-top:12px}
.ctr{text-align:center;color:var(--mut);padding:30px;font-size:14px}
.qrimg{max-width:180px;border-radius:12px;margin-top:8px;display:block}
.thumb{width:100%;border-radius:10px;margin-top:8px}