:root{
  --bg:#0c0f0d;--panel:#161a17;--panel-2:#1e2420;--accent:#39e07a;--accent-dim:#1f7a45;--accent-rgb:57,224,122;
  --text:#eef1ee;--text-dim:#8b958f;--border:#262c27;--danger:#e5484d;--select:#3b82f6;
  --pill-customer-bg:#1e2420;--pill-customer-fg:#8b958f;
  --pill-reseller-bg:#1f7a45;--pill-reseller-fg:#39e07a;
  --pill-pending-bg:#3a2a10;--pill-pending-fg:#e0a030;
  --pill-approved-bg:#122a1c;--pill-approved-fg:#39e07a;
  --pill-completed-bg:#122a1c;--pill-completed-fg:#39e07a;
  --pill-cancelled-bg:#3a1416;--pill-cancelled-fg:#ff8a8f;
  --banner-g1:#e7f2c9;--banner-g2:#d3e79a;--banner-g3:#c3dd6f;--banner-text:#12210c;--banner-sub:#3a4a2c;
  --wa-color:#25D366;--on-accent:#04170c;
}
/* Light theme (toggled from the menu) — a completely different palette, not just a tint. */
:root[data-theme="light"]{
  --bg:#fef6f6;--panel:#ffffff;--panel-2:#fdeaea;--accent:#e0323c;--accent-dim:#b0232b;--accent-rgb:224,50,60;
  --text:#2a1416;--text-dim:#8a6b6d;--border:#f2d3d3;--danger:#c81e2c;--select:#2563eb;
  --pill-customer-bg:#f6e7e7;--pill-customer-fg:#8a6b6d;
  --pill-reseller-bg:#f6cccf;--pill-reseller-fg:#b0232b;
  --pill-pending-bg:#fde6c6;--pill-pending-fg:#a3650a;
  --pill-approved-bg:#fbdcdc;--pill-approved-fg:#b0232b;
  --pill-completed-bg:#fbdcdc;--pill-completed-fg:#b0232b;
  --pill-cancelled-bg:#f6d0d0;--pill-cancelled-fg:#9c1f1f;
  --banner-g1:#ffd9d9;--banner-g2:#ffb3b3;--banner-g3:#ff8a8a;--banner-text:#3a0d0d;--banner-sub:#5c1a1a;
  --on-accent:#ffffff;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100%;display:flex;flex-direction:column;transition:background .2s,color .2s;}
svg{display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px;width:100%;}
.btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:9px;padding:9px 14px;font-weight:700;font-size:13px;cursor:pointer;display:inline-block;}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn.danger{background:var(--danger);color:#fff;}
.btn.sm{padding:6px 10px;font-size:11.5px;border-radius:7px;}
.btn.block{width:100%;text-align:center;}
.app{max-width:480px;margin:0 auto;padding-bottom:84px;width:100%;flex:1;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.icon-btn{width:38px;height:38px;border-radius:10px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text);cursor:pointer;flex-shrink:0;}
.tb-actions{display:flex;gap:8px;align-items:center;}
.wallet-chip{
  display:flex;align-items:center;gap:8px;height:38px;padding:4px 14px 4px 4px;border-radius:20px;
  background:var(--panel);border:1.5px solid var(--accent);
}
.wallet-icon{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-dim));
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.wallet-amt{font-weight:800;font-size:13.5px;color:var(--text);white-space:nowrap;}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;}
.brand img{width:22px;height:22px;border-radius:6px;object-fit:cover;}
.banner{margin:14px 16px 0;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--banner-g1) 0%,var(--banner-g2) 55%,var(--banner-g3) 100%);padding:22px 18px;min-height:150px;color:var(--banner-text);position:relative;}
.banner.has-image{color:#fff;}
.banner.has-image::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15));}
.banner.has-image h1, .banner.has-image p, .banner.has-image .tag{position:relative;z-index:1;}
.banner.has-image p{color:#f0f0f0;}
.banner.has-image .tag{background:rgba(0,0,0,.5);color:#fff;}
.banner h1{margin:0 0 4px;font-size:22px;line-height:1.15;font-weight:800;}
.banner p{margin:0;font-size:13px;color:var(--banner-sub);}
.banner .tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;background:var(--banner-text);color:var(--banner-g1);padding:4px 10px;border-radius:20px;}
.ticker-wrap{margin:12px 16px 0;border:1px solid var(--border);background:var(--panel);border-radius:12px;overflow:hidden;padding:9px 0;}
.ticker-track{display:flex;gap:40px;white-space:nowrap;animation:scroll 18s linear infinite;font-size:12.5px;color:var(--text-dim);}
.ticker-track span{padding-left:16px;}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px 16px 4px;}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;cursor:pointer;}
.qa .qa-icon{width:54px;height:54px;border-radius:14px;background:var(--panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);
  box-shadow:0 8px 18px rgba(var(--accent-rgb),.22),0 3px 8px rgba(0,0,0,.55);}
.qa span{color:var(--text);}
.section{padding:20px 16px 4px;}
.section h2{margin:0 0 16px;font-size:17px;font-weight:700;}
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 14px;}
.game{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;}
.game .thumb{width:56px;height:56px;border-radius:14px;background:var(--panel-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--accent);}
.game .thumb img{width:100%;height:100%;object-fit:cover;}
.game .name{font-size:11px;color:var(--text-dim);line-height:1.25;}
@property --rgb-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}
.promo{margin:22px 16px 0;border-radius:16px;padding:20px;position:relative;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb, var(--accent) 22%, var(--bg)),var(--bg));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.28);}
.promo::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--rgb-angle),var(--accent-dim) 0deg,var(--accent-dim) 200deg,var(--accent) 290deg,#fff 330deg,var(--accent) 350deg,var(--accent-dim) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:rgbSpin 4s linear infinite;}
@keyframes rgbSpin{to{--rgb-angle:360deg;}}
.promo p{margin:0 0 14px;font-size:14.5px;font-weight:600;line-height:1.4;}
.promo-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.promo-row .link{color:var(--accent);font-weight:700;cursor:pointer;}
.sitefooter{margin:24px 16px 0;padding:18px 4px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim);line-height:1.6;}
.sitefooter b{color:var(--text);}
.bottomnav{position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--border);display:flex;justify-content:center;z-index:30;}
.bottomnav-inner{max-width:480px;width:100%;display:grid;grid-template-columns:repeat(4,1fr);padding:14px 6px 8px;}
.nav-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--text-dim);cursor:pointer;}
.nav-item::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:0;height:3px;border-radius:2px;background:var(--accent);transition:width .2s ease;}
.nav-item.active{color:var(--accent);}
.nav-item.active::before{width:24px;}
.nav-item.active svg{filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 10px rgba(var(--accent-rgb),.7));}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;bottom:0;left:0;width:78%;max-width:300px;background:var(--panel);z-index:50;transform:translateX(-100%);transition:transform .25s ease;padding:20px 0;border-right:1px solid var(--border);overflow-y:auto;}
.drawer.open{transform:translateX(0);}
.drawer-brand{display:flex;align-items:center;gap:10px;padding:0 20px 18px;font-weight:700;font-size:16px;border-bottom:1px solid var(--border);margin-bottom:8px;padding-bottom:18px;}
.drawer-item{display:flex;align-items:center;gap:14px;padding:13px 20px;color:var(--text);font-size:14.5px;cursor:pointer;}
.drawer-item:active{background:var(--panel-2);}
.stack-top{position:sticky;top:0;background:var(--bg);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);}
.stack-body{max-width:480px;width:100%;margin:0 auto;padding:18px 16px 60px;}
.admin-body{max-width:640px;}
.admin-tabs{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;border-bottom:1px solid var(--border);max-width:640px;margin:0 auto;}
.admin-tab{flex-shrink:0;padding:8px 13px;border-radius:20px;border:1px solid var(--border);font-size:12.5px;color:var(--text-dim);cursor:pointer;background:var(--panel);}
.admin-tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;}
.stat b{display:block;font-size:20px;color:var(--accent);}
.stat span{font-size:11.5px;color:var(--text-dim);}
.form-row{margin-bottom:10px;}
.form-row label{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:5px;}
.form-inline{display:flex;gap:8px;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;color:var(--text-dim);font-weight:600;font-size:11px;padding:6px 8px;border-bottom:1px solid var(--border);}
td{padding:8px;border-bottom:1px solid var(--border);vertical-align:middle;}
.pill{padding:3px 8px;border-radius:20px;font-size:10.5px;font-weight:700;}
.pill.customer{background:var(--pill-customer-bg);color:var(--pill-customer-fg);}
.pill.reseller{background:var(--pill-reseller-bg);color:var(--pill-reseller-fg);}
.pill.pending{background:var(--pill-pending-bg);color:var(--pill-pending-fg);}
.pill.approved{background:var(--pill-approved-bg);color:var(--pill-approved-fg);}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;}
.empty{color:var(--text-dim);font-size:12.5px;padding:10px 2px;}
.note{font-size:11px;color:var(--text-dim);margin-top:6px;line-height:1.5;}
.pkg-row{display:flex;justify-content:space-between;align-items:center;padding:12px 4px;border-bottom:1px solid var(--border);margin:0;}
.pkg-row:last-child{border-bottom:none;}
.amt-chip{display:inline-block;}
.amt-chip input{position:absolute;opacity:0;width:0;height:0;}
.amt-chip label{display:block;padding:12px 0;text-align:center;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);cursor:pointer;font-weight:700;font-size:13px;}
.amt-chip input:checked + label{border-color:var(--accent);color:var(--accent);}
.amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.rank{width:26px;display:inline-block;color:var(--text-dim);font-weight:700;}
.auth-logo{display:flex;justify-content:center;margin:10px 0 14px;}
.auth-tabs{display:flex;gap:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:14px;}
.auth-tab{flex:1;text-align:center;padding:9px 0;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-dim);cursor:pointer;}
.auth-tab.active{background:var(--accent);color:var(--on-accent);}
.checkout-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.game-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:14px;}
.game-card .thumb{width:52px;height:52px;border-radius:12px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;overflow:hidden;}
.game-card .thumb img{width:100%;height:100%;object-fit:cover;}
.social-row{display:flex;justify-content:space-between;padding:4px 0 18px;}
.social-btn{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.social-btn img{width:100%;height:100%;object-fit:cover;}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.pkg-card{position:relative;}
.pkg-card input{position:absolute;opacity:0;width:0;height:0;}
.pkg-card label{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr auto;grid-template-areas:"thumb name" "price price";column-gap:10px;row-gap:8px;padding:11px 12px;height:100%;border-radius:12px;background:var(--panel);border:1.5px solid var(--border);cursor:pointer;}
.pkg-card input:checked + label{border-color:var(--select);box-shadow:0 0 0 1px var(--select);}
.pkg-card .thumb{grid-area:thumb;align-self:start;width:38px;height:38px;border-radius:9px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0;overflow:hidden;}
.pkg-card .thumb img{width:100%;height:100%;object-fit:cover;}
.pkg-card .pname{grid-area:name;align-self:start;font-size:13px;font-weight:600;line-height:1.3;margin:0;min-height:0;word-break:break-word;}
.pkg-card .pprice{grid-area:price;align-self:end;font-size:15px;font-weight:800;color:var(--text);}
.id-input-wrap{position:relative;}
.id-input-wrap input{padding-right:96px;}
.validate-btn-inline{position:absolute;right:4px;top:4px;bottom:4px;background:linear-gradient(90deg,#7c3aed,#22c55e);color:#fff;border:none;border-radius:7px;padding:0 14px;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;}

/* ===== Banner carousel ===== */
.banner-carousel{position:relative;margin:14px 16px 0;border-radius:16px;overflow:hidden;}
.banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.banner-track::-webkit-scrollbar{display:none;}
.banner-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;min-height:150px;aspect-ratio:3/1;padding:22px 18px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,var(--banner-g1) 0%,var(--banner-g2) 55%,var(--banner-g3) 100%);background-size:cover;background-position:center;color:var(--banner-text);}
.banner-slide h1{margin:0 0 4px;font-size:22px;line-height:1.15;font-weight:800;position:relative;z-index:1;}
.banner-slide p{margin:0;font-size:13px;color:var(--banner-sub);position:relative;z-index:1;}
.banner-slide .tag{display:inline-block;align-self:flex-start;margin-top:10px;font-size:11px;font-weight:700;background:var(--banner-text);color:var(--banner-g1);padding:4px 10px;border-radius:20px;position:relative;z-index:1;}
.banner-slide.has-image{color:#fff;}
.banner-slide.has-image.has-text::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.1));}
.banner-slide.has-image p{color:#f0f0f0;}
.banner-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:2;}
.banner-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .2s;}
.banner-dots span.active{width:18px;border-radius:4px;background:#fff;}

/* ===== Image uploader ===== */
.uploader{position:relative;margin-bottom:12px;}
.up-caption{font-size:11.5px;color:var(--text-dim);margin-bottom:6px;}
.up-box{display:flex;align-items:center;gap:12px;padding:10px;border:1.5px dashed var(--border);border-radius:12px;background:var(--panel-2);cursor:pointer;}
.up-box:hover{border-color:var(--accent);}
.up-preview{width:56px;height:56px;border-radius:10px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--text-dim);overflow:hidden;flex-shrink:0;}
.up-preview img{width:100%;height:100%;object-fit:cover;}
.up-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;}
.up-text small{color:var(--text-dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.up-btn{background:var(--accent);color:var(--on-accent);font-weight:700;font-size:12px;padding:8px 14px;border-radius:8px;flex-shrink:0;}
.up-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}

/* ===== Admin drawer / analytics ===== */
.drawer-item.active{color:var(--accent);background:var(--panel-2);}
.drawer-item svg{flex-shrink:0;color:var(--text-dim);}
.drawer-item.active svg{color:var(--accent);}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:8px;}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--accent),var(--accent-dim));border-radius:3px 3px 0 0;min-height:2px;}
.chart-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-dim);margin-top:6px;}
.seg{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.seg a{padding:7px 14px;border-radius:20px;border:1px solid var(--border);font-size:12px;color:var(--text-dim);background:var(--panel);}
.seg a.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700;}
.pill.completed{background:var(--pill-completed-bg);color:var(--pill-completed-fg);}
.pill.cancelled{background:var(--pill-cancelled-bg);color:var(--pill-cancelled-fg);}
.strike{text-decoration:line-through;color:var(--text-dim);font-weight:500;font-size:12px;margin-left:6px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* ===== Leaderboard ===== */
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;}
.lb-rank{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;}
.lb-rank.r1{background:#f5c542;color:#3a2a00;}
.lb-rank.r2{background:#c9d1d9;color:#1d2530;}
.lb-rank.r3{background:#d08a4b;color:#2b1600;}
.lb-name{font-weight:700;font-size:14px;}
.lb-meta{font-size:11.5px;color:var(--text-dim);}
.lb-amt{margin-left:auto;text-align:right;font-weight:800;}
.prize{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;background:rgba(57,224,122,.12);color:var(--accent);border:1px solid var(--accent-dim);}
.credit{margin-top:8px;}
.credit b{color:var(--accent);}

/* ===== Dark/light toggle switch (in the drawer) ===== */
.drawer-theme{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;margin-top:8px;border-top:1px dashed var(--border);font-size:14px;color:var(--text-dim);}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--panel-2);border:1px solid var(--border);transition:.2s;border-radius:24px;}
.switch .slider:before{content:'';position:absolute;height:18px;width:18px;left:2px;top:2px;background:#fff;transition:.2s;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.35);}
.switch input:checked + .slider{background:var(--accent);border-color:var(--accent);}
.switch input:checked + .slider:before{transform:translateX(20px);}

/* ===== WhatsApp floating support button ===== */
.wa-float{
  position:fixed;rig