:root{
  --sx-bg:#230007;
  --sx-bg-soft:#2c0209;
  --sx-panel:#31050b;
  --sx-panel-2:#3a070d;
  --sx-header:#47080c;
  --sx-header-deep:#390306;
  --sx-nav:#4c0709;
  --sx-gold:#e7c63f;
  --sx-gold-soft:#f3dc72;
  --sx-border:#6f171d;
  --sx-muted:#c2aeb0;
}

html,body{background:var(--sx-bg)!important;color:#f7f2e7!important}
body,.site,.page,.page-shell,.main,.wrap,.content,.content-wrap,.ui-page,.event-page,.game-page,.game-shell,.pay-shell,.profile-page,.member-page,.togel-page{background:var(--sx-bg)!important}

/* Header / top bar mengikuti warna utama QQSTAR reference. */
.topbar,.top,.ui-head,.pay-top,.tw-head,.page-head,.header,.site-header,.game-header,.member-header,.profile-head,.togel-head{
  background:linear-gradient(180deg,var(--sx-header),var(--sx-header-deep))!important;
  border-bottom-color:var(--sx-border)!important;
}

/* Area konten dan kartu: maroon gelap, bukan hitam pekat. */
.card,.panel,.box,.summary,.status,.level,.mission,.notice,.important,.history article,.hrow,.ui-card,.ui-acc,.ui-lang-card,.event-card,.event-time,.event-empty,.tier-item,.bonus-card,.modal-card,.qris-box,.method,.balance,.member-account-panel,.rp-member-chip,.profile-card,.wallet-card,.menu-panel,.provider-card,.game-panel{
  background-color:var(--sx-panel)!important;
  border-color:var(--sx-border)!important;
}
.level.current,.status,.event-card,.bonus-card,.mission,.summary{
  background-image:linear-gradient(145deg,var(--sx-panel-2),var(--sx-panel))!important;
}

/* Judul dan aksen gold. */
h1,h2,.section-title,.section-heading h2,.guest-section-title b,.ui-logo b,.tag,.reward,.right b,.current-badge,.exclusive{
  color:var(--sx-gold-soft)!important;
}
.muted,.ui-muted,.event-head p,.event-copy p,.progress-txt,.tier-off{color:var(--sx-muted)!important}

/* Tombol/tab aktif. */
.tabs a.active,.pstabs a.on,.tab.active,.ui-tabs a.active,.ui-tabs a.active svg,.pay-tabs a.active{
  color:var(--sx-gold)!important;
  border-color:var(--sx-gold)!important;
  stroke:var(--sx-gold)!important;
}
.primary,.ui-submit,.btn-primary,.submit-btn{
  background:linear-gradient(180deg,#f3d75b,#c99b16)!important;
  color:#201300!important;
  border-color:#9e7810!important;
}

/* Bottom navigation seragam di semua halaman member. */
.redpay-main-nav,.member-fixed-nav,.ui-bottom,.bottom-nav,.guest-simple-nav{
  background:linear-gradient(180deg,#56080b,var(--sx-nav))!important;
  border-top-color:#741318!important;
  box-shadow:0 -5px 16px rgba(0,0,0,.28)!important;
}
.redpay-main-nav a,.member-fixed-nav a,.ui-bottom a,.bottom-nav a,.guest-simple-nav a,
.redpay-main-nav a.active,.member-fixed-nav a.active,.ui-bottom a.active,.bottom-nav a.active{
  color:var(--sx-gold-soft)!important;
}
.redpay-main-nav svg,.member-fixed-nav svg,.ui-bottom svg,.bottom-nav svg,.guest-simple-nav svg{
  stroke:var(--sx-gold-soft)!important;
}
.redpay-main-nav .dana .nav-icon,.member-fixed-nav .dana .circle,.ui-bottom.member-nav .dana .dana-circle,.bottom-nav .member-dana-icon,.bottom-nav .guest-dana-icon{
  background:#f0bd16!important;
  color:#fff!important;
}
.redpay-main-nav .dana svg,.member-fixed-nav .dana svg,.ui-bottom.member-nav .dana svg{stroke:#fff!important}

/* Drawer/modal ikut tema utama. */
.ui-drawer,.ui-games-panel,.ui-login-drawer,.guest-drawer,.guest-games-panel,.member-account-panel,.panens-profile-drawer,.rp-account-drawer,.feature-drawer{
  background:var(--sx-panel)!important;
  border-color:var(--sx-border)!important;
}
.ui-drawer-item,.ui-provider-item,.guest-drawer-item{border-color:rgba(231,198,63,.12)!important}

/* Halaman pembayaran. */
.pay-wallet,.pay-tabs,.pay-content{background:var(--sx-bg)!important;border-color:var(--sx-border)!important}
.pay-tabs a{color:#f0e7dd!important}
.info,.alert{background:var(--sx-panel)!important;border-color:var(--sx-border)!important}

/* Provider/game pages. */
.provider-strip,.provider-list,.provider-section,.provider-showcase,.slots-providers,.filter-row,.game-list,.games-section{background:transparent!important}
.provider-item.active,.provider-card.active{border-color:var(--sx-gold)!important;box-shadow:0 0 0 1px rgba(231,198,63,.25)!important}

/* Togel/user pages that still use old black cards. */
.market,.hero,.row,.item,.estimate,.ticket-card,.result-card,.bet-card,.market-card{background-color:var(--sx-panel)!important;border-color:var(--sx-border)!important}
.back,.market-title,.date,.month{color:var(--sx-gold-soft)!important}

@media(max-width:480px){
  body,.site,.page,.main,.wrap,.ui-page,.event-page,.game-page,.pay-shell{background:var(--sx-bg)!important}
}


/* STARXBOY FINAL MAROON/GOLD CONSISTENCY V2
   UI only: menyamakan warna header, konten, footer/nav pada seluruh halaman member. */
:root{
  --sx-bg:#230007;
  --sx-bg-deep:#190004;
  --sx-header:#56080d;
  --sx-header-deep:#430408;
  --sx-nav:#65070a;
  --sx-nav-deep:#500407;
  --sx-panel:#31050b;
  --sx-panel-2:#3b080e;
  --sx-gold:#f0d34d;
  --sx-gold-soft:#f6df79;
  --sx-border:#76151b;
}

html,body,
body .site,body .page,body .page-shell,body .main,body .wrap,body .content,body .content-wrap,
body .ui-page,body .event-page,body .game-page,body .game-shell,body .pay-shell,body .profile-page,
body .member-page,body .togel-page{
  background-color:var(--sx-bg)!important;
}

/* Header semua halaman: maroon yang sama. */
body .topbar,body .top,body .ui-head,body .pay-top,body .tw-head,body .page-head,
body .header,body .site-header,body .game-header,body .member-header,body .profile-head,body .togel-head{
  background:linear-gradient(180deg,var(--sx-header),var(--sx-header-deep))!important;
  border-bottom-color:var(--sx-border)!important;
}

/* Area tengah/konten jangan kembali ke abu-abu atau hitam pekat. */
body main,body .main-content,body .page-content,body .member-content,body .game-content,
body .finance-content,body .promo-content,body .profile-content,body .togel-content,
body .games-section,body .guest-section,body .lobby-content{
  background-color:var(--sx-bg)!important;
}

body .card,body .panel,body .box,body .summary,body .status,body .ui-card,body .event-card,
body .tier-item,body .bonus-card,body .profile-card,body .wallet-card,body .menu-panel,
body .provider-card,body .game-panel,body .qris-box,body .method{
  background-color:var(--sx-panel)!important;
  border-color:var(--sx-border)!important;
}

/* Bottom navigation: maroon penuh, tidak boleh abu-abu pada halaman mana pun. */
body .redpay-main-nav,
body .member-fixed-nav,
body .ui-bottom,
body .bottom-nav,
body .guest-simple-nav,
body nav.bottom-nav,
body footer.bottom-nav{
  background:linear-gradient(180deg,var(--sx-nav),var(--sx-nav-deep))!important;
  border-top:1px solid #85151a!important;
  box-shadow:0 -5px 16px rgba(0,0,0,.30)!important;
}

body .redpay-main-nav a,body .member-fixed-nav a,body .ui-bottom a,body .bottom-nav a,body .guest-simple-nav a,
body .redpay-main-nav a.active,body .member-fixed-nav a.active,body .ui-bottom a.active,body .bottom-nav a.active,
body .guest-simple-nav a.active{
  color:var(--sx-gold-soft)!important;
  background:transparent!important;
}
body .redpay-main-nav svg,body .member-fixed-nav svg,body .ui-bottom svg,body .bottom-nav svg,body .guest-simple-nav svg,
body .redpay-main-nav a.active svg,body .member-fixed-nav a.active svg,body .ui-bottom a.active svg,body .bottom-nav a.active svg{
  stroke:var(--sx-gold-soft)!important;
}
body .bottom-nav .guest-bottom-line-icon,body .bottom-nav .nav-icon,
body .member-fixed-nav .nav-icon,body .ui-bottom .nav-icon{
  color:var(--sx-gold-soft)!important;
}
body .bottom-nav .guest-bottom-line-icon svg,body .bottom-nav .nav-icon svg,
body .member-fixed-nav .nav-icon svg,body .ui-bottom .nav-icon svg{
  stroke:var(--sx-gold-soft)!important;
}
body .bottom-nav img:not(.member-dana-icon img):not(.guest-dana-icon img),
body .member-fixed-nav img:not(.dana img),body .ui-bottom img:not(.dana img){
  filter:sepia(1) saturate(3.2) hue-rotate(354deg) brightness(1.55)!important;
}

/* Tombol DANA tetap lingkaran emas dengan icon putih. */
body .redpay-main-nav .dana .nav-icon,
body .member-fixed-nav .dana .circle,
body .ui-bottom.member-nav .dana .dana-circle,
body .bottom-nav .member-dana-icon,
body .bottom-nav .guest-dana-icon{
  background:#f0bd16!important;
  color:#fff!important;
}
body .redpay-main-nav .dana svg,body .member-fixed-nav .dana svg,body .ui-bottom.member-nav .dana svg,
body .bottom-nav .member-dana-icon svg,body .bottom-nav .guest-dana-icon svg{
  stroke:#fff!important;
}

/* Gold headings/aksen mengikuti tema utama. */
body h1,body h2,body .section-title,body .section-heading h2,body .guest-section-title b,
body .market-title,body .page-title{
  color:var(--sx-gold-soft)!important;
}

@media(max-width:480px){
  html,body,body .site,body .page,body .main,body .wrap,body .content,body .ui-page,
  body .event-page,body .game-page,body .pay-shell{background-color:var(--sx-bg)!important}
}

/* ============================================================
   STARXBOY MAROON/GOLD CONSISTENCY V3 — 2026-09-09
   UI-only. Menyamakan header, saldo, konten dan bottom nav.
   ============================================================ */
:root{
  --sx-v3-bg:#250006;
  --sx-v3-bg-soft:#310309;
  --sx-v3-header:#700d13;
  --sx-v3-header-deep:#53070b;
  --sx-v3-panel:#3a060d;
  --sx-v3-panel-2:#470910;
  --sx-v3-nav:#7b090c;
  --sx-v3-nav-deep:#5e0508;
  --sx-v3-gold:#f0cf45;
  --sx-v3-gold-soft:#f7e27e;
  --sx-v3-line:#8d2027;
  --sx-v3-muted:#cbb7b8;
}

html,body,
body .site,body .page,body .page-shell,body .main,body .wrap,body .content,body .content-wrap,
body .ui-page,body .event-page,body .game-page,body .game-shell,body .pay-shell,body .profile-page,
body .member-page,body .togel-page,body .more-shell,body .more-main,body .promo-ref,body .ps,
body .shell,body main{
  background:var(--sx-v3-bg)!important;
  color:#fff!important;
}

/* HEADER: semua halaman memakai maroon yang sama seperti web utama. */
body .topbar,body .top,body .ui-head,body .pay-top,body .tw-head,body .page-head,
body .header,body .site-header,body .game-header,body .member-header,body .profile-head,body .togel-head,
body .slot-topbar,body .more-topbar{
  background:linear-gradient(180deg,var(--sx-v3-header),var(--sx-v3-header-deep))!important;
  border-bottom:1px solid var(--sx-v3-line)!important;
  box-shadow:none!important;
}

/* SALDO MEMBER: jangan lagi memakai blok hitam. */
body .member-balance-strip,
body .slot-balance,
body .pay-wallet,
body .account-balance-row,
body .member-account-balance-card,
body .member-balance{
  background:linear-gradient(180deg,#5f090e,#480509)!important;
  border-color:var(--sx-v3-line)!important;
  color:var(--sx-v3-gold-soft)!important;
}
body .member-balance-strip strong,body .member-balance-strip span,
body .slot-balance span,body .pay-wallet b,
body .member-balance strong,body .member-balance small{
  color:var(--sx-v3-gold-soft)!important;
}
body .member-balance-currency{
  border-color:var(--sx-v3-gold-soft)!important;
  color:var(--sx-v3-gold-soft)!important;
}

/* Member chip di halaman EVENT/VIP/LAINNYA: teks selalu jelas. */
body .rp-member-chip,body .more-account{
  background:linear-gradient(145deg,#5f0910,#41050a)!important;
  border-color:#8e2028!important;
  color:#fff!important;
}
body .rp-member-chip b,body .more-account b{color:#fff!important}
body .rp-member-chip small,body .more-account small{color:var(--sx-v3-gold-soft)!important}
body .rp-member-chip-avatar,body .more-avatar{
  background:linear-gradient(145deg,#ffd54f,#e0a800)!important;
  color:#2b1700!important;
}

/* KONTEN/KARTU: panel tetap maroon, bukan abu atau hitam. */
body .card,body .panel,body .box,body .summary,body .status,body .level,body .mission,body .notice,
body .important,body .history article,body .hrow,body .ui-card,body .ui-acc,body .ui-lang-card,
body .event-card,body .event-time,body .event-empty,body .tier-item,body .bonus-card,body .modal-card,
body .qris-box,body .method,body .profile-card,body .wallet-card,body .menu-panel,body .provider-card,
body .game-panel,body .more-card,body .promo-card,body .vip-banner{
  background-color:var(--sx-v3-panel)!important;
  border-color:var(--sx-v3-line)!important;
}
body .level.current,body .status,body .event-card,body .bonus-card,body .mission,body .summary,
body .more-card{
  background-image:linear-gradient(145deg,var(--sx-v3-panel-2),var(--sx-v3-panel))!important;
}

/* Provider/game page tetap menyatu dengan tema utama. */
body .provider-img,body .provider-strip-logo,body .game-thumb,body .provider-fallback,
body .provider-strip-fallback{
  background-color:#3a060d!important;
  border-color:rgba(240,207,69,.34)!important;
}
body .provider-card.is-active .provider-img,body .provider-strip-item.active .provider-strip-logo{
  border-color:var(--sx-v3-gold)!important;
  box-shadow:0 0 0 2px rgba(240,207,69,.16)!important;
}

/* Bottom navigation: maroon/gold sama di SEMUA halaman. */
body .redpay-main-nav,body .member-fixed-nav,body .ui-bottom,body .bottom-nav,body .guest-simple-nav,
body nav.bottom-nav,body footer.bottom-nav{
  background:linear-gradient(180deg,var(--sx-v3-nav),var(--sx-v3-nav-deep))!important;
  border-top:1px solid #991b21!important;
  box-shadow:0 -6px 18px rgba(0,0,0,.28)!important;
}
body .redpay-main-nav a,body .member-fixed-nav a,body .ui-bottom a,body .bottom-nav a,
body .guest-simple-nav a,body .redpay-main-nav a.active,body .member-fixed-nav a.active,
body .ui-bottom a.active,body .bottom-nav a.active,body .guest-simple-nav a.active{
  color:var(--sx-v3-gold-soft)!important;
  background:transparent!important;
}
body .redpay-main-nav svg,body .member-fixed-nav svg,body .ui-bottom svg,body .bottom-nav svg,
body .guest-simple-nav svg,body .redpay-main-nav a.active svg,body .member-fixed-nav a.active svg,
body .ui-bottom a.active svg,body .bottom-nav a.active svg{
  stroke:var(--sx-v3-gold-soft)!important;
}
body .redpay-main-nav .dana .nav-icon,body .member-fixed-nav .dana .circle,
body .ui-bottom.member-nav .dana .dana-circle,body .bottom-nav .member-dana-icon,
body .bottom-nav .guest-dana-icon{
  background:#f2bd16!important;
  color:#fff!important;
  border-color:#c78d00!important;
}

/* Judul dan separator memakai gold, bukan merah terang yang berbeda sendiri. */
body h1,body h2,body .section-title,body .section-heading h2,body .guest-section-title b,
body .market-title,body .page-title,body .more-section-title h2,body .provider-landing-title{
  color:var(--sx-v3-gold-soft)!important;
}
body .more-section-title:before,body .section-title:before,body .event-head h1:before{
  background:var(--sx-v3-gold)!important;
  box-shadow:0 0 8px rgba(240,207,69,.22)!important;
}

/* Fitur LAINNYA: kartu ringkas dengan thumbnail media nyata. */
body .more-section-title{margin-top:20px!important;margin-bottom:12px!important}
body .more-grid{gap:9px!important}
body .more-card{
  min-height:0!important;
  padding:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  text-align:left!important;
  display:block!important;
}
body .more-card:before{display:none!important}
body .more-card-inner{display:block!important}
body .more-real-thumb{
  width:100%!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
  background:#250006!important;
  border-bottom:1px solid rgba(240,207,69,.18)!important;
}
body .more-real-thumb img{
  width:100%!important;height:100%!important;display:block!important;
  object-fit:cover!important;object-position:center!important;
}
body .more-real-copy{padding:9px 10px 10px!important;min-height:62px!important}
body .more-real-copy b{display:block!important;margin:0!important;font-size:13px!important;color:#fff!important;line-height:1.15!important}
body .more-real-copy span{
  display:block!important;margin-top:4px!important;color:var(--sx-v3-muted)!important;
  font-size:9px!important;line-height:1.3!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

@media(max-width:480px){
  body .more-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  body .more-card{border-radius:11px!important}
  body .more-real-copy{padding:7px 7px 8px!important;min-height:51px!important}
  body .more-real-copy b{font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  body .more-real-copy span{font-size:8px!important}
  body .member-balance-strip,body .slot-balance,body .pay-wallet{background:linear-gradient(180deg,#5f090e,#480509)!important}
}

/* V5 BOTTOM NAV SYNC: every frontend page uses the same STARXBOY main navigation component. */
.starxboy-main-nav{background:linear-gradient(180deg,#9b0609 0%,#6d0004 100%)!important;border-top:1px solid #b31b21!important;box-shadow:0 -6px 18px rgba(0,0,0,.26)!important}.starxboy-main-nav a,.starxboy-main-nav a.active{color:#f2da73!important}.starxboy-main-nav svg,.starxboy-main-nav a.active svg{stroke:#f2da73!important}.starxboy-main-nav .dana .nav-icon{background:#f4bd12!important;border-color:#c98f00!important}.starxboy-main-nav .dana .nav-icon svg{stroke:#fff!important}


/* V4 FINAL — sidebar maroon + bottom navigation compact on every member/frontend page. */
body .ui-drawer,body .ui-games-panel,body .ui-login-drawer,body .guest-drawer,body .guest-games-panel,
body .member-account-panel,body .panens-profile-drawer,body .rp-account-drawer,body .feature-drawer{
  background:linear-gradient(180deg,#650a10 0%,#430408 100%)!important;
  border-color:#8f2027!important;
}
body .guest-drawer-item,body .ui-drawer-item,body .ui-provider-item{
  background:transparent!important;color:#f4dc72!important;border-color:rgba(238,204,81,.16)!important;
}
body .guest-drawer-item svg,body .ui-drawer-item svg{stroke:#f4dc72!important}

body .starxboy-main-nav,
body .redpay-main-nav,body .member-fixed-nav,body .ui-bottom,body .bottom-nav,body .guest-simple-nav,
body nav.bottom-nav,body footer.bottom-nav{
  height:62px!important;min-height:62px!important;
}
body .starxboy-main-nav a,
body .redpay-main-nav a,body .member-fixed-nav a,body .ui-bottom a,body .bottom-nav a,body .guest-simple-nav a{
  min-height:62px!important;padding-top:4px!important;padding-bottom:3px!important;gap:3px!important;
  font-size:8px!important;
}
body .starxboy-main-nav .nav-icon,body .starxboy-main-nav svg,
body .redpay-main-nav .nav-icon,body .member-fixed-nav .nav-icon,body .ui-bottom .nav-icon,
body .bottom-nav .nav-icon,body .guest-simple-nav .nav-icon{
  width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;
}
body .starxboy-main-nav b,body .redpay-main-nav b,body .member-fixed-nav b,body .ui-bottom b,
body .bottom-nav b,body .guest-simple-nav b{font-size:8px!important;line-height:1!important}
body .starxboy-main-nav .dana .nav-icon,
body .redpay-main-nav .dana .nav-icon,body .member-fixed-nav .dana .circle,
body .ui-bottom.member-nav .dana .dana-circle,body .bottom-nav .member-dana-icon,
body .bottom-nav .guest-dana-icon{
  width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;
  top:-23px!important;
}
body .starxboy-main-nav .dana .nav-icon svg,body .redpay-main-nav .dana .nav-icon svg,
body .member-fixed-nav .dana .circle svg,body .ui-bottom.member-nav .dana .dana-circle svg,
body .bottom-nav .member-dana-icon svg,body .bottom-nav .guest-dana-icon svg{
  width:24px!important;height:24px!important;
}
body .starxboy-main-nav .dana b,body .redpay-main-nav .dana b,body .member-fixed-nav .dana b,
body .ui-bottom.member-nav .dana b,body .bottom-nav .member-dana-nav b,body .bottom-nav .guest-dana-nav b{
  margin-top:23px!important;
}