: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:175px;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:0;width:max-content;white-space:nowrap;animation:scroll 18s linear infinite;will-change:transform;font-size:12.5px;color:var(--text-dim);}
.ticker-track span{padding:0 22px;}
@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;}
.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)
  );
}
.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:210px;aspect-ratio:auto;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:100% 100%;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 ===== */
/* ---- order statuses added by the API integration ---- */
.pill.processing{background:#10263a;color:#5bb8ff;}
.pill.failed{background:var(--pill-cancelled-bg);color:var(--pill-cancelled-fg);}
[data-theme="light"] .pill.processing{background:#dcecfb;color:#1c5f9c;}

/* ===== Page loader (bouncing ball) ===== */
.page-loader{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease,visibility .3s;}
.page-loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
.loader-stage{position:relative;width:120px;height:150px;}
.loader-ball{position:absolute;left:50%;top:0;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8ab4ff,#3b82f6 55%,#1d4ed8);box-shadow:0 6px 18px rgba(59,130,246,.45);animation:ballBounce .8s cubic-bezier(.45,.05,.55,.95) infinite alternate;}
.loader-pad{position:absolute;left:50%;bottom:0;width:104px;height:44px;margin-left:-52px;}
.loader-pad .rim{position:absolute;left:0;right:0;top:0;height:30px;border-radius:50%;background:#c9d6fb;}
.loader-pad .hole{position:absolute;left:10px;right:10px;top:6px;height:18px;border-radius:50%;background:var(--bg);}
.loader-pad .body{position:absolute;left:0;right:0;top:15px;height:26px;border-radius:0 0 52px 52px / 0 0 22px 22px;background:#c9d6fb;}
.loader-pad .rim{z-index:2;} .loader-pad .hole{z-index:3;} .loader-pad .body{z-index:1;}
@keyframes ballBounce{0%{transform:translateY(0) scale(.94,1.06);}50%{transform:translateY(34px);}100%{transform:translateY(60px) scale(1.12,.88);}}
@media (prefers-reduced-motion:reduce){.loader-ball{animation-duration:1.6s;}}

/* ===== Popup modals (add money, order details, event banner) ===== */
body.modal-open{overflow:hidden;}
.modal-wrap{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.62);}
.modal-wrap.open{display:flex;}
.modal-box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 110px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);border-radius:16px;margin-bottom:34px;animation:modalIn .22s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.modal-title{padding:16px 16px 14px;text-align:center;font-size:19px;font-weight:800;border-bottom:1px solid var(--border);}
.modal-body{padding:16px;overflow-y:auto;}
.modal-close{position:absolute;left:50%;bottom:-30px;margin-left:-24px;width:48px;height:48px;border-radius:50%;background:var(--panel);border:4px solid var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.btn-grad{display:block;width:100%;text-align:center;border:none;border-radius:10px;padding:14px;font-size:15px;font-weight:800;color:#fff;cursor:pointer;background:linear-gradient(90deg,#7c3aed,var(--accent));}
.btn-grad:disabled{opacity:.55;cursor:not-allowed;}
.btn-grad + .btn-grad{margin-top:10px;}
.modal-amount{font-size:18px;padding:14px;}
.modal-label{font-size:15px;font-weight:700;margin-bottom:8px;display:block;}
.modal-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px;}
.modal-chips button{flex:1 1 28%;padding:9px 0;border-radius:9px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;}
.modal-err{color:var(--danger);font-size:12.5px;margin:-8px 0 12px;min-height:0;}
.od-pack{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--panel-2);margin-bottom:12px;}
.od-pack .od-img{width:54px;height:54px;border-radius:10px;overflow:hidden;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;}
.od-pack .od-img img{width:100%;height:100%;object-fit:cover;}
.od-pack b{font-size:15px;line-height:1.3;word-break:break-word;}
.od-confirm{color:#e0a030;font-size:14px;font-weight:600;margin:0 0 10px;}
.od-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:14px;}
.od-row span:first-child{color:var(--text-dim);}
.od-row span:last-child{text-align:right;font-weight:600;word-break:break-word;}
.od-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0;margin:6px 0 14px;border-top:1px dashed var(--border);border-bottom:1px dashed var(--border);font-weight:700;}
.od-total .amt{color:var(--danger);font-size:19px;font-weight:800;}
.od-low{font-size:11.5px;color:var(--text-dim);text-align:center;margin-top:8px;}

/* sticky continue bar on the product page */
.continue-bar{position:fixed;left:0;right:0;bottom:62px;z-index:25;padding:10px 16px;background:var(--bg);border-top:1px solid var(--border);}
.continue-bar .btn-grad{max-width:448px;margin:0 auto;}

/* event popup banner */
.event-pop{position:relative;width:100%;max-width:440px;margin-bottom:34px;animation:modalIn .25s ease;}
.event-pop img{display:block;width:100%;height:auto;border-radius:14px;}
.event-pop .modal-close{bottom:-30px;}


/* ===== Drawer developer credit / no global footer ===== */
.sitefooter{display:none !important;}
.drawer{padding-bottom:78px;}
.drawer-developer{
  margin:10px 20px 0;
  padding:12px 0 4px;
  border-top:1px solid var(--border);
  font-size:11px;
  line-height:1.45;
  text-align:left;
  color:var(--text-dim);
}
.drawer-developer a{
  color:#ffd400;
  font-weight:800;
  text-decoration:none;
}
.drawer-developer a:hover,
.drawer-developer a:focus{
  color:#ffe45c;
  text-decoration:underline;
}


/* =========================================================
   REPORTS PAGE — scoped fixes only
   Does not modify global page layout, header, drawer, or nav.
   ========================================================= */
.reports-page .app,
body .reports-page .app {
    max-width: none;
    width: 100%;
}

.reports-page {
    box-sizing: border-box;
    width: min(760px, 100%);
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 16px 92px;
}
.reports-page{
  box-sizing:border-box;
  width:min(760px,100%);
  max-width:760px;
  margin:0 auto;
  padding:18px 16px 92px;
}
.reports-head{display:flex;align-items:center;justify-content:space-between;padding:18px 0 22px;}
.reports-head h1{margin:0;font-size:25px;font-weight:800;color:var(--text);}
.reports-back{width:58px;height:58px;border:1px solid var(--border);border-radius:12px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--text);text-decoration:none;}
.reports-head-spacer{width:58px;}
.report-tabs{display:flex;align-items:flex-end;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:8px 10px 0;margin-bottom:22px;}
.report-tab{appearance:none;-webkit-appearance:none;flex:1;border:0;background:transparent;color:var(--text-dim);font:inherit;font-size:16px;padding:12px 4px 16px;border-bottom:3px solid transparent;cursor:pointer;}
.report-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.report-panel{display:none;}
.report-panel.active{display:block;}
.report-row{appearance:none;-webkit-appearance:none;width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--border);border-radius:15px;background:var(--panel);padding:16px 14px;margin:0 0 12px;color:var(--text);cursor:pointer;box-sizing:border-box;}
.report-thumb{width:58px;height:58px;border-radius:13px;object-fit:cover;background:var(--panel-2);flex:0 0 58px;}
.report-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px;}
.report-main strong{font-size:15px;font-weight:600;}
.report-main small{font-size:14px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.report-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:105px;}
.amount{font-size:17px;font-weight:800;white-space:nowrap;}
.amount.success,.amount.credit,.status.success,.status.approved,.status.completed{color:#159f67;}
.amount.pending,.status.pending,.status.processing{color:#e3b526;}
.amount.debit{color:#d73545;}
.status{font-size:14px;font-weight:600;}
.report-empty{padding:30px 10px;text-align:center;color:var(--text-dim);}
.report-wallet-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;flex:0 0 58px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent-dim));border:1.5px solid var(--accent);box-shadow:0 0 14px rgba(57,224,122,.18);color:#fff;}
.report-wallet-icon svg{display:block;width:38px;height:38px;}
.report-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);}
.report-modal.open{display:flex;}
.report-modal-card{position:relative;width:min(100%,520px);max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45);}
.report-modal-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:rgba(0,0,0,.28);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;}
.invoice-hero{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--panel-2);border-bottom:1px solid var(--border);padding:28px 20px;}
.invoice-hero img{width:86px;height:86px;object-fit:cover;border-radius:18px;}
.invoice-hero .report-wallet-icon{width:86px;height:86px;flex-basis:86px;border-radius:18px;}
.invoice-hero .report-wallet-icon svg{width:58px;height:58px;}
.invoice-hero div{font-size:26px;font-weight:700;}
.invoice-body{padding:18px 22px 24px;}
.invoice-line{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--border);font-size:15px;}
.invoice-line:last-child{border-bottom:0;}
.invoice-line span{color:var(--text-dim);}
.invoice-line strong{text-align:right;max-width:62%;overflow-wrap:anywhere;}
@media(max-width:420px){
 body:has(.reports-page) .reports-page{padding-left:14px;padding-right:14px;}
 .report-row{gap:11px;padding:14px 12px;}
 .report-wallet-icon,.report-thumb{width:56px;height:56px;flex-basis:56px;}
 .report-side{min-width:92px;}
 .amount{font-size:16px;}
 .report-main strong{font-size:14px;}
 .report-main small,.status{font-size:13px;}
}

/* =========================================================
   GLOBAL FOOTER + DRAWER DEVELOPER CREDIT
   ========================================================= */
.sitefooter{display:none !important;}
.drawer-developer{margin:10px 20px 0;padding:12px 0 4px;border-top:1px solid var(--border);font-size:11px;line-height:1.45;text-align:left;color:var(--text-dim);}
.drawer-developer a{color:#ffd400 !important;font-weight:800 !important;text-decoration:none !important;}
.drawer-developer a:hover,.drawer-developer a:focus{color:#ffe45c !important;text-decoration:underline !important;}


/* ===== Floating AI assistant + WhatsApp buttons ===== */
.float-stack{position:fixed;right:16px;bottom:84px;z-index:60;display:flex;flex-direction:column;gap:14px;align-items:center;}
body:has(.continue-bar) .float-stack{bottom:150px;}
body.asst-open .float-stack{display:none;}
.fab{position:relative;width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.fab-ai{background:#2f63e0;}
.fab-wa{background:#25D366;}
.fab-wa:before{content:'';position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(37,211,102,.55);animation:waPulse 2s ease-out infinite;}
@keyframes waPulse{0%{transform:scale(.85);opacity:.9;}100%{transform:scale(1.25);opacity:0;}}
.asst-panel{position:fixed;left:0;right:0;bottom:0;z-index:120;width:100%;height:min(82vh,680px);height:min(82dvh,680px);display:flex;flex-direction:column;background:var(--panel);border-top:1px solid var(--border);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.55);overflow:hidden;animation:asstUp .25s ease;}
@keyframes asstUp{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.asst-panel[hidden]{display:none;}
.asst-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(90deg,#2f63e0,#5b3fd6);color:#fff;}
.asst-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.asst-avatar svg{width:22px;height:22px;}
.asst-title{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25;}
.asst-title b{font-size:15px;} .asst-title span{font-size:11.5px;opacity:.85;}
.asst-x{background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:flex;}
.asst-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.asst-b{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word;}
.asst-b.bot{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px;}
.asst-b.me{align-self:flex-end;background:#2f63e0;color:#fff;border-bottom-right-radius:4px;}
.asst-b a{color:inherit;text-decoration:underline;}
.asst-b.typing{color:var(--text-dim);}
.asst-chips{display:flex;gap:8px;overflow-x:auto;padding:0 14px 10px;}
.asst-chips button{flex-shrink:0;border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:16px;padding:7px 12px;font-size:12.5px;cursor:pointer;}
.asst-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);}
.asst-form input{flex:1;min-width:0;border-radius:20px;padding:10px 14px;font-size:14px;}
.asst-form button{width:42px;height:42px;border-radius:50%;border:none;background:#2f63e0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.asst-wa{display:block;text-align:center;padding:10px;font-size:13px;font-weight:700;background:#25D366;color:#fff;}


/* ===== Safety: the loader can never stay forever, and the page can never scroll sideways ===== */
.page-loader{width:100%;max-width:100vw;height:100%;animation:loaderAway .35s ease 5s forwards;}
@keyframes loaderAway{to{opacity:0;visibility:hidden;pointer-events:none;}}
html,body{overflow-x:clip;max-width:100%;}

.asst-b.typing{display:flex;align-items:center;gap:9px;min-width:150px;}
.asst-b.typing i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5b8cff;animation:asstDot 1s ease-in-out infinite;}
.asst-b.typing i:nth-child(2){animation-delay:.15s;} .asst-b.typing i:nth-child(3){animation-delay:.3s;}
@keyframes asstDot{0%,60%,100%{transform:translateY(0);opacity:.45;}30%{transform:translateY(-5px);opacity:1;}}
.asst-b.typing .asst-status{font-style:italic;}