:root{
  --bg:#14121f;
  --bg-alt:#1d1a2b;
  --surface:#292543;
  --surface-soft:#332f4b;
  --surface-light:#3c3660;
  --text:#f7f6ff;
  --muted:#b6b1c9;
  --accent:#ffd84d;
  --accent-strong:#ffb400;
  --stroke:rgba(255,255,255,.08);
  --shadow-lg:0 24px 60px rgba(12,10,20,.55);
  --shadow-md:0 16px 32px rgba(10,8,18,.4);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;
  --transition:all .25s ease;
}
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-alt:#eef1f7;
  --surface:#ffffff;
  --surface-soft:#f4f5fa;
  --surface-light:#f0f2f8;
  --text:#12131a;
  --muted:#5a5e6e;
  --accent:#ffb400;
  --accent-strong:#ff9100;
  --stroke:rgba(0,0,0,.08);
  --shadow-lg:0 18px 36px rgba(0,0,0,.12);
  --shadow-md:0 12px 26px rgba(0,0,0,.1);
}

.hidden{display:none!important}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:'Poppins','Segoe UI',Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 900px at 10% -10%,rgba(103,84,209,.35) 0%,transparent 60%),
    radial-gradient(1400px 1000px at 100% 0%,rgba(70,53,163,.3) 0%,transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,#0b0a13 100%);
  line-height:1.45;
}
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 900px at 10% -10%,rgba(255,200,120,.25) 0%,transparent 60%),
    radial-gradient(1400px 1000px at 100% 0%,rgba(255,170,90,.2) 0%,transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,#ffffff 100%);
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}
.container{width:min(1180px,100% - 48px);margin:0 auto}

.muted{color:var(--muted)}
.muted.center{text-align:center;margin-top:14px;font-size:.85rem}

/* Top navigation */
.topbar{position:sticky;top:0;z-index:20;background:rgba(14,13,21,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.05)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.logo-link{display:flex;align-items:center;gap:12px;color:var(--text)}
.logo{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.05);padding:8px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.brand-name{font-weight:700;font-size:1.08rem;display:block}
.brand-note{font-size:.75rem;color:var(--muted)}
.menu{display:flex;gap:20px;font-size:.92rem}
.menu a{color:var(--muted);transition:var(--transition)}
.menu a:hover{color:var(--text)}
.menu-actions{display:flex;align-items:center;gap:12px}
.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--stroke);background:transparent;color:var(--muted);font-weight:600;font-size:.82rem;transition:var(--transition)}
.chip.ghost:hover{color:var(--accent);border-color:var(--accent)}
.chip.primary{background:linear-gradient(110deg,var(--accent),var(--accent-strong));color:#161616;border:none;box-shadow:0 14px 30px rgba(255,216,77,.28)}
.chip.primary:hover{filter:brightness(1.05)}
.cs-link{display:flex;align-items:center;gap:8px}
.cs-link img{width:22px;height:22px;border-radius:50%}

/* Recent activity toast */
.activity-toast{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:30;
  max-width:320px;
  background:rgba(9,9,14,.96);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.65);
  padding:10px 14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  transform:translateY(120%);
  opacity:0;
  pointer-events:none;
  transition:transform .35s ease,opacity .35s ease;
}
.activity-toast.visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.activity-toast-badge{font-size:11px;color:#ffb9c9;margin-bottom:2px}
.activity-toast-main{font-size:13px;line-height:1.35}
.activity-toast-main b{font-weight:600}
.activity-toast-time{font-size:11px;color:var(--muted);margin-top:4px}
.activity-toast-thumb{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-size:18px}
@media (max-width:640px){
  .activity-toast{left:10px;right:10px;max-width:none}
}

/* Homepage hero */
.landing{padding:48px 0 80px;display:flex;flex-direction:column;gap:28px}
.page-home .hero{display:flex;gap:38px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(255,216,77,.08),rgba(255,255,255,0));border:1px solid var(--stroke);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.page-home .hero:after{content:"";position:absolute;inset:auto -70px -90px auto;width:260px;height:260px;background:radial-gradient(circle at 50% 50%,rgba(255,216,77,.45),transparent 70%);transform:rotate(12deg);}
.hero-copy{max-width:520px;position:relative;z-index:1}
.hero-copy h1{margin:0 0 12px;font-size:2.45rem;line-height:1.18}
.hero-copy p{margin:0 0 18px;color:var(--muted)}
.hero-text{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;max-width:520px}
.hero-text h1{margin:0;font-size:2.2rem;line-height:1.15}
.hero-subtitle{margin:0;color:var(--muted);font-size:1rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px}
.meta-chip{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:600;color:var(--text)}
.hero-rating{position:relative;z-index:1;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:20px;text-align:center;box-shadow:0 18px 40px rgba(10,8,18,.45)}
.hero-rating .rating-score{font-size:2.1rem;font-weight:700;color:var(--accent);margin-bottom:6px}
.hero-rating .rating-stars{color:var(--accent);letter-spacing:4px;font-size:1.05rem}
.hero-rating .small{display:block;margin-top:4px;font-size:.75rem}
.payment-badges{display:flex;gap:12px;flex-wrap:wrap}
.payment-badges span{background:rgba(255,255,255,.05);border:1px solid var(--stroke);padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600;backdrop-filter:blur(2px)}
.hero-search{max-width:340px;width:100%;position:relative;z-index:1}
.search-field{display:block}
.search-field input{width:100%;padding:14px 18px;border-radius:var(--radius-md);border:1px solid transparent;background:rgba(255,255,255,.06);color:var(--text);font-size:.95rem;transition:var(--transition);box-shadow:0 12px 28px rgba(0,0,0,.32)}
.search-field input::placeholder{color:rgba(255,255,255,.55)}
.search-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,216,77,.25);background:rgba(0,0,0,.45)}
.search-hint{margin:10px 0 0;font-size:.82rem;color:var(--muted)}
.search-results{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.search-result{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--radius-md);background:rgba(15,15,26,.86);border:1px solid rgba(255,255,255,.08);text-decoration:none;transition:var(--transition)}
.search-result .title{font-weight:600;color:var(--text);font-size:.94rem}
.search-result .desc{color:var(--muted);font-size:.78rem}
.search-result.item:hover{border-color:var(--accent);box-shadow:0 14px 30px rgba(0,0,0,.32);transform:translateY(-2px)}
.search-result.empty{border-style:dashed;color:var(--muted);background:rgba(15,15,26,.65)}
.search-result.more{color:var(--muted);font-size:.78rem;background:rgba(15,15,26,.55)}
.search-result mark{background:rgba(255,216,77,.18);color:var(--accent);padding:0 3px;border-radius:6px}

/* Category tabs */
.category-tabs{display:flex;flex-wrap:wrap;gap:12px}
.tab{padding:10px 18px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--muted);font-weight:600;font-size:.82rem;transition:var(--transition)}
.tab.active,.tab:hover{background:linear-gradient(100deg,var(--accent),var(--accent-strong));color:#161616;border-color:transparent;box-shadow:0 16px 36px rgba(255,216,77,.28)}

/* Popular & quick sections */
.popular,.quick-topup{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow-md)}
.popular{margin-top:18px}
.section-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.section-heading h2{margin:0;font-size:1.4rem;letter-spacing:.02em}
.section-heading p{margin:4px 0 0;font-size:.86rem}
.emoji{font-size:1.4rem}
.emoji-flame,
.emoji-bolt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  animation:emojiPulse 1.5s ease-in-out infinite alternate;
  transform-origin:center center;
}
.emoji-flame{animation-duration:1.6s}
.emoji-bolt{animation-duration:1.3s}

@keyframes emojiPulse{
  from{transform:scale(.9)}
  to{transform:scale(1.15)}
}
.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.popular-card{position:relative;min-height:160px;border-radius:var(--radius-md);padding:20px;background-size:cover;background-position:center;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .3s ease,box-shadow .3s ease;color:#fff;display:flex;align-items:flex-end}
.popular-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.55),transparent 65%);opacity:.85;transition:opacity .3s ease}
.popular-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(10,8,18,.55)}
.popular-card:hover:before{opacity:.7}
.popular-card .pop-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;color:#fff}
.popular-card .pop-info h3{margin:0;font-size:1.1rem}
.pop-tag{display:inline-block;font-size:.75rem;font-weight:600;background:rgba(0,0,0,.55);padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.pop-cta{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:999px;width:max-content}

.quick-topup{margin-top:26px}
.quick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.quick-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:220px;padding:24px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background-size:cover;background-position:center;box-shadow:var(--shadow-md);color:#fff;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.quick-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(12,10,18,.95),rgba(12,10,18,.55));mix-blend-mode:hard-light;opacity:.8;transition:opacity .3s ease}
.quick-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(10,8,18,.6);border-color:rgba(255,216,77,.7)}
.quick-card:hover::before{opacity:.65}
.quick-card>*{position:relative;z-index:1}
.quick-card__badge{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:.78rem;font-weight:600}
.quick-card__body h3{margin:6px 0;font-size:1.2rem}
.quick-card__body p{margin:0;color:rgba(255,255,255,.86);font-weight:600}
.quick-card__note{margin-top:6px;display:block;font-size:.78rem;color:rgba(255,255,255,.7)}
.quick-card__cta{align-self:flex-start;background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;font-weight:700;padding:8px 16px;border-radius:999px;font-size:.82rem;box-shadow:0 16px 32px rgba(255,216,77,.28)}

.skeleton{background:linear-gradient(110deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 45%,rgba(255,255,255,.08) 55%,rgba(255,255,255,.02));background-size:200% 100%;animation:skeleton 1.4s linear infinite;border-radius:var(--radius-md);min-height:120px}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Promo strip */
.promo-strip{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--radius-md);background:rgba(255,216,77,.12);border:1px solid rgba(255,216,77,.24);box-shadow:0 14px 28px rgba(40,32,7,.25)}
.promo-strip .pill{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.78rem}
.promo-strip .promo-title{font-weight:700;font-size:1rem}
.promo-strip .promo-text{color:#3b3320;font-size:.88rem}

/* Game grid */
.grid-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;margin-top:22px}
.game-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:240px;padding:20px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.04);background-color:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;color:#fff}
.game-card:hover{transform:translateY(-6px) scale(1.01);border-color:rgba(255,216,77,.6);box-shadow:0 30px 60px rgba(10,8,18,.6)}
.card-top{display:flex;justify-content:flex-end;z-index:1}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:700;background:rgba(255,255,255,.12)}
.pill.hot{background:linear-gradient(120deg,#ff6a74,#ff365f);color:#fff;box-shadow:0 12px 24px rgba(255,66,103,.35)}
.card-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.game-name{font-weight:800;font-size:1.08rem;letter-spacing:.35px;text-shadow:0 12px 28px rgba(0,0,0,.55)}
.game-desc{color:rgba(255,255,255,.72);font-size:.82rem}
.game-card .cta{margin-top:auto;align-self:flex-start;padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.4);font-size:.78rem;font-weight:600;transition:var(--transition)}
.game-card:hover .cta{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;border-color:transparent}
.game-placeholder{display:flex;align-items:center;justify-content:center;min-height:220px;border-radius:var(--radius-lg);border:1px dashed rgba(255,255,255,.2);color:var(--muted);background:rgba(255,255,255,.03)}

/* Forms & inputs */
label{display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--muted);margin:10px 0}
input,select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);color:var(--text);padding:12px 14px;font-size:.92rem;transition:var(--transition)}
input::placeholder,select::placeholder{color:rgba(255,255,255,.5)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,216,77,.22);background:rgba(0,0,0,.38)}
.input-status{font-size:.78rem;margin-top:6px;color:var(--muted)}
.input-status.error{color:#ff6a6a}
.input-status.pending{color:var(--muted);font-style:italic}
.input-status.success{color:#7bd88f}
button.primary{background:linear-gradient(120deg,var(--accent),var(--accent-strong));border:none;color:#161616;font-weight:700;padding:13px 22px;border-radius:var(--radius-md);box-shadow:0 22px 48px rgba(255,216,77,.32);transition:var(--transition)}
button.primary:hover{transform:translateY(-2px)}
button.primary:active{transform:translateY(0)}
button[disabled]{opacity:.65;filter:grayscale(.3);cursor:not-allowed;box-shadow:none}
.status{margin:10px 0;padding:12px;border-radius:var(--radius-sm);background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.12)}
.link{color:var(--accent)}

/* Order status badges */
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
}
.status-badge--pending{background:rgba(255,216,77,.16);color:#ffd84d}
.status-badge--processing{background:rgba(123,216,143,.16);color:#7bd88f}
.status-badge--fulfilled{background:rgba(123,216,143,.22);color:#9ff5b2}
.status-badge--failed{background:rgba(255,106,106,.18);color:#ff6a6a}
.status-badge--expired{background:rgba(182,177,201,.14);color:#b6b1c9}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-md);margin:14px 0}

/* Topup page */
body.page-topup main.container{padding:40px 0 70px}
body.page-topup .hero{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--stroke);margin-bottom:18px;padding:24px 28px;background:linear-gradient(135deg,rgba(255,216,77,.08),rgba(255,255,255,0));box-shadow:var(--shadow-md)}
body.page-topup .hero h1{margin:0;font-size:1.9rem}
body.page-topup .hero .accent{position:absolute;inset:auto -12% -35% auto;width:260px;height:260px;border-radius:50%;filter:blur(38px);opacity:.4;background:radial-gradient(circle at 50% 50%,var(--accent),transparent 65%)}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:24px}
@media (max-width:960px){.cols{grid-template-columns:1fr}.summary{position:static}}
.summary{background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:20px;position:sticky;top:24px;box-shadow:var(--shadow-md)}
.summary h3{margin:0 0 12px;font-size:1.08rem}
.qty{display:flex;align-items:center;gap:12px;margin-top:12px}
.qty button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font-size:1.05rem;transition:var(--transition)}
.qty button:hover{background:rgba(255,255,255,.12)}
.summary-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:.86rem;color:var(--muted)}
.summary-row.savings{color:#7bd88f}
.summary-row .good{color:#7bd88f;font-weight:700}
.total{display:flex;justify-content:space-between;margin-top:18px;font-weight:700;font-size:1.05rem}
.summary-row .toggle{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text);cursor:pointer}
.summary-row .toggle input{accent-color:var(--accent)}
.options{position:relative;display:flex;flex-direction:column;gap:24px;margin-top:10px}
.options.disabled .opt{pointer-events:none;opacity:.45;filter:saturate(.4);cursor:not-allowed}
.options-empty{padding:18px;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.2);text-align:center;color:var(--muted);font-size:.85rem}
.popular-strip{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.popular-strip .chip{border-color:rgba(255,255,255,.12);color:var(--text);background:rgba(255,255,255,.04)}
.popular-strip .chip:hover{border-color:var(--accent);color:var(--accent)}
.option-section{margin-bottom:24px}
.option-section h3{margin:0 0 12px;font-size:1.06rem;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.opt{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(0,0,0,.35));border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:18px;cursor:pointer;display:flex;flex-direction:column;gap:10px;min-height:120px;position:relative;transition:var(--transition)}
.opt:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 22px 46px rgba(10,8,18,.5)}
.opt.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,216,77,.24) inset}
.opt.pulse{animation:pulse 1s ease}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,216,77,.4)}100%{box-shadow:0 0 0 12px rgba(255,216,77,0)}}
.opt .opt-title{color:var(--text);font-weight:700;font-size:1rem;line-height:1.25}
.opt .opt-price{color:var(--accent);font-weight:800;font-size:1.18rem;letter-spacing:.3px}
.opt .opt-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.opt .opt-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12)}
.opt-review{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.opt-review .opt-stars{color:var(--accent);font-weight:700}
.opt-review .opt-count{opacity:.85}
.opt-badge{position:absolute;top:14px;right:14px;padding:4px 9px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.18);color:var(--text);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.opt-badge.best{background:linear-gradient(140deg,var(--accent),var(--accent-strong));color:#161616}
#hero.topup-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px}
.step-card{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-md);padding:22px;box-shadow:var(--shadow-md);margin-bottom:22px}
.step-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.step-number{width:34px;height:34px;border-radius:50%;background:linear-gradient(130deg,var(--accent),var(--accent-strong));color:#161616;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(255,216,77,.32)}
.step-header h2{margin:0;font-size:1.22rem}
.step-header p{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.order-actions{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.step-card.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(255,216,77,.35)}
.step-card.completed .step-number{background:linear-gradient(135deg,#3bd68b,#7fffd4);color:#111}
.step-card.completed .step-header h2::after{content:" ✓";margin-left:4px;font-size:.9rem;color:#7fffd4}
.footnote{font-size:.82rem}
.rating-block{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);padding:18px;text-align:center;margin-bottom:18px;box-shadow:0 12px 30px rgba(10,8,18,.45)}
.rating-block .rating-score{font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:6px}
.rating-block .rating-stars{color:var(--accent);letter-spacing:4px;font-size:1rem;margin-bottom:4px}
.rating-block .muted{font-size:.78rem}

.user-hub{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:20px;box-shadow:0 18px 38px rgba(0,0,0,.38);position:relative;overflow:hidden}
.user-hub:after{content:"";position:absolute;inset:auto -80px -120px auto;width:240px;height:240px;background:radial-gradient(circle at 50% 50%,rgba(255,216,77,.22),transparent 70%);opacity:.6;pointer-events:none}
.user-hub__intro h2{margin:6px 0;font-size:1.4rem}
.auth-form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.auth-profile{display:flex;flex-direction:column;gap:10px}
.autofill-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.pill.tiny{padding:4px 8px;font-size:.7rem}
.user-hub__panels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hub-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:14px;box-shadow:0 14px 32px rgba(0,0,0,.32)}
.hub-title{font-weight:700;font-size:.96rem;margin-bottom:6px}
.hub-subtitle{margin-top:12px;font-weight:600;font-size:.85rem;color:var(--muted)}
.hub-list{display:flex;flex-direction:column;gap:8px}
.hub-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.hub-row__status{white-space:nowrap}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip.small{padding:6px 10px;font-size:.75rem}
.chip-voucher{border-color:rgba(255,216,77,.65);color:var(--text)}
@media(max-width:960px){
  .user-hub{grid-template-columns:1fr}
  .user-hub__panels{grid-template-columns:1fr}
}

.live-strip{display:flex;align-items:center;gap:10px;margin:12px 0 18px;padding:12px 14px;border-radius:var(--radius-md);background:rgba(255,216,77,.08);border:1px solid rgba(255,216,77,.24);box-shadow:0 12px 28px rgba(40,32,7,.25);overflow:hidden}
.live-strip.active{filter:brightness(1.05)}
.live-strip__items{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#fdea96}
.live-dot{width:10px;height:10px;background:#ff6a6a;border-radius:50%;display:inline-block;animation:pulseLive 1.1s infinite alternate}
@keyframes pulseLive{from{transform:scale(.9);opacity:.7}to{transform:scale(1.15);opacity:1}}

.review-card{margin-top:12px;padding:14px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);box-shadow:0 12px 22px rgba(0,0,0,.24)}
.review-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.review-score{font-weight:700;color:var(--accent)}
.review-quote{font-size:.9rem;color:var(--text)}
.review-quote.muted{color:var(--muted)}

.promo-board{margin:12px 0;padding:12px;border-radius:var(--radius-md);background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.promo-board__left{flex:1 1 240px;display:flex;flex-direction:column;gap:6px}
.promo-board__title{font-weight:700}
.promo-board__countdown{color:#ffd84d}
.promo-board__chips{display:flex;flex-wrap:wrap;gap:8px}
.promo{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.promo-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(255,216,77,.16);color:#ffd84d;font-weight:700;font-size:.8rem}
.promo-title{font-weight:800;font-size:1.05rem}
.promo-text{color:var(--muted)}

.promo-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:center;background:radial-gradient(circle at 20% 20%,rgba(255,216,77,.16),transparent 60%),rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:22px;box-shadow:0 18px 38px rgba(0,0,0,.35)}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:12px}
.promo-card{padding:14px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3);box-shadow:0 16px 32px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:10px}
.promo-card__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:700;font-size:.78rem;width:max-content}
.promo-card__meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.82rem;color:var(--muted)}
.promo-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.promo-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.countdown{margin-top:10px;font-weight:700;color:#ffd84d}

@media(max-width:960px){
  .promo-hero{grid-template-columns:1fr}
}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px}
.testi-card{border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 12px 26px rgba(0,0,0,.3)}
.testi-thumb{padding-top:130%;background-size:cover;background-position:center;filter:saturate(.9)}
.testi-thumb.blur{filter:blur(3px) brightness(.9)}
.testi-label{padding:10px;font-weight:700;font-size:.9rem}
.input-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.helper{font-size:.8rem;color:var(--muted)}
.login-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50}
.login-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.login-modal__card{position:relative;z-index:1;width:min(480px,94vw);background:var(--surface);border-radius:18px;box-shadow:0 24px 48px rgba(0,0,0,.45);padding:18px;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.login-modal__header{display:flex;align-items:center;justify-content:space-between}
.chat-toggle{position:fixed;right:18px;bottom:18px;border-radius:999px;border:none;padding:12px 16px;font-weight:700;box-shadow:0 18px 32px rgba(0,0,0,.35);background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;z-index:40}
.chat-widget{position:fixed;right:18px;bottom:80px;width:320px;max-width:90vw;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:var(--surface);box-shadow:0 20px 44px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden;z-index:40}
.chat-widget.show{display:flex}
.chat-widget__header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--stroke);background:var(--surface-soft)}
.chat-widget__body{padding:12px;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto;background:var(--surface-soft)}
.chat-widget__footer{display:flex;gap:8px;padding:10px;background:var(--surface-soft);border-top:1px solid var(--stroke)}
.chat-widget__footer input{flex:1}
.chat-widget__footer button{padding:10px 14px;border-radius:10px;border:none;background:var(--accent);color:#161616;font-weight:700}
.chat-msg{padding:10px 12px;border-radius:12px;max-width:88%;width:max-content}
.chat-msg.bot{background:rgba(255,255,255,.08);align-self:flex-start}
.chat-msg.user{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;align-self:flex-end}
.secure-box{padding:14px;border-radius:var(--radius-md);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.secure-box h3{margin:0 0 6px}
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.status-card{padding:14px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.32);display:flex;align-items:center;justify-content:space-between}
.status-card.ok{border-color:rgba(123,216,143,.4)}
.status-card.busy{border-color:rgba(255,216,77,.4)}
.status-card.down{border-color:rgba(255,106,106,.4)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.blog-card{padding:14px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.32);box-shadow:0 12px 26px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:8px}
.progress-steps{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.progress-step{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.progress-step .dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-block}
.progress-step.active{border-color:rgba(123,216,143,.4);background:rgba(123,216,143,.08)}
.progress-step.active .dot{background:#7bd88f}
.support-box{margin-top:24px;padding:18px;border-radius:var(--radius-md);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 28px rgba(10,8,18,.4);display:flex;flex-direction:column;gap:16px}
.support-header{display:flex;align-items:center;gap:12px}
.support-icon{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.support-box strong{display:block;font-size:1.02rem}
.support-box .small{display:block;margin-top:2px;font-size:.78rem}
.support-actions{display:flex;gap:10px;flex-wrap:wrap}
.support-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;font-weight:700;font-size:.85rem;transition:var(--transition)}
.support-btn.whatsapp{background:linear-gradient(120deg,var(--accent),var(--accent-strong));color:#161616;box-shadow:0 16px 32px rgba(255,216,77,.28)}
.support-btn.instagram{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--text)}
.support-btn.instagram:hover{background:rgba(255,255,255,.15)}
.support-btn.whatsapp:hover{filter:brightness(1.05)}

.skeleton .shimmer{height:14px;border-radius:8px;background:rgba(255,255,255,.08);animation:skeleton 1.4s linear infinite}
.data-saver .skeleton .shimmer{animation:none}
.skeleton .opt-title.shimmer{height:18px;width:70%;margin-bottom:6px}
.skeleton .opt-price.shimmer{height:16px;width:50%}
.skeleton .opt-meta.shimmer{height:12px;width:60%}
.data-saver{image-rendering:-webkit-optimize-contrast}

.toast{
  position:fixed;
  right:16px;
  bottom:20px;
  background:rgba(0,0,0,.9);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .25s ease,transform .25s ease;
  z-index:40;
}
.toast.show{opacity:1;transform:translateY(0)}

.mobile-summary{
  display:none;
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  padding:12px 16px;
  background:rgba(10,9,15,.92);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -12px 28px rgba(0,0,0,.55);
  z-index:18;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mobile-summary__info{display:flex;flex-direction:column;gap:2px}
.mobile-summary__title{font-size:.82rem;color:var(--muted)}
.mobile-summary__value{font-weight:800;font-size:1.08rem}
.mobile-summary__note{font-size:.78rem}

/* Step states override */
body.page-topup .step-card.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,216,77,.4)}
body.page-topup .step-card.completed .step-number{background:linear-gradient(135deg,#3bd68b,#7fffd4);color:#111}
body.page-topup .step-card.completed .step-header h2::after{content:"✓";margin-left:6px;font-size:.9rem;color:#7fffd4}

/* Pay button loading */
#payBtn.loading{position:relative;opacity:.92}
#payBtn.loading::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:16px;
  height:16px;
  margin-top:-8px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.2);
  border-top-color:#000;
  animation:btnspin .8s linear infinite;
}
@keyframes btnspin{
  to{transform:rotate(360deg);}
}

body.page-topup.is-processing{
  cursor:wait;
}

/* Payment methods */
.page-topup .pay-group h3::after{content:"▾";font-size:.75rem;opacity:.7;transition:transform .2s ease}
.pay-groups{display:flex;flex-direction:column;gap:18px}
.pay-groups.locked{opacity:.55}
.pay-group h3{margin:0 0 10px;font-size:.9rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.pay-group h3::after{content:"▾";font-size:.75rem;opacity:.7;transition:transform .2s ease}
.pay-group.collapsed h3::after{transform:rotate(-90deg)}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pay-option{border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--text);padding:10px 12px;font-size:.8rem;font-weight:600;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:var(--transition)}
.pay-option:hover{border-color:var(--accent);background:rgba(255,255,255,.06)}
.pay-option.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,216,77,.4);background:linear-gradient(120deg,rgba(255,216,77,.08),rgba(255,255,255,0))}
.pay-option.disabled{opacity:.45;pointer-events:none;filter:grayscale(.6)}
.pay-groups.locked .pay-option{pointer-events:none;cursor:not-allowed}
.pay-group.collapsed .pay-grid{display:none}
.pay-left{display:flex;flex-direction:column;gap:2px}
.pay-name{font-size:.86rem;font-weight:600}
.pay-note{font-size:.75rem;font-weight:500;color:var(--muted)}
.pay-right{text-align:right;display:flex;flex-direction:column;gap:2px;font-size:.78rem}
.pay-price{font-weight:700;color:var(--accent)}
.pay-fee{font-size:.72rem;color:var(--muted)}

/* Footer */
.footer{background:rgba(0,0,0,.4);border-top:1px solid rgba(255,255,255,.05);padding:32px 0;margin-top:70px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:16px}
.foot-links a{color:var(--muted);font-size:.85rem;transition:var(--transition)}
.foot-links a:hover{color:var(--text)}

/* Keyboard focus states */
.tab:focus-visible,
.popular-card:focus-visible,
.quick-card:focus-visible,
button:focus-visible,
.pay-option:focus-visible,
.opt:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (max-width:900px){
  .menu{display:none}
  .page-home .hero{flex-direction:column;align-items:flex-start}
  .hero-search{max-width:100%}
  #hero.topup-hero{flex-direction:column;align-items:flex-start;padding:26px}
  .hero-rating{width:100%;margin-top:12px}
  .popular,.quick-topup{padding:22px 20px}
  .popular-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

@media (max-width:600px){
  .topbar-inner{padding:16px 0}
  .chip{padding:6px 14px}
  .landing{padding-top:32px}
  .grid-games{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .game-card{min-height:210px}
  .pay-grid{grid-template-columns:1fr}
  .popular,.quick-topup{padding:18px 16px}
  .section-heading h2{font-size:1.3rem}
  .section-heading p{font-size:.82rem}
  body.page-topup main.container{padding:28px 0 56px}
  body.page-topup .hero{padding:18px 18px}
  body.page-topup .hero h1{font-size:1.6rem}
  body.page-topup .step-card{padding:18px}
  body.page-topup button.primary,
  body.page-topup .order-actions button{
    width:100%;
    min-height:44px;
  }
  .mobile-summary{display:flex}
  .summary{
    position:sticky;
    bottom:0;
    left:0;
    right:0;
    margin:16px -24px 0;
    border-radius:16px 16px 0 0;
    box-shadow:0 -16px 40px rgba(0,0,0,.75);
    z-index:15;
  }
}