/* ============================================================================
   3999BET VIP — BLUE & WHITE THEME LAYER
   Loads AFTER the existing master theme and re-maps its tokens.
   No markup or engine change. Delete the two <link>/<script> tags at the
   bottom of index.html to fall back to the previous look.
   ========================================================================== */

:root{
  --vip-primary:#08777A;
  --vip-bright:#2ABBA5;
  --vip-royal:#0A9290;
  --vip-navy:#002D30;
  --vip-dark:#00181A;
  --vip-bg:#02383B;
  --vip-border:rgba(42,187,165,0.18);
  --vip-text:#F4F7F9;
  --vip-text-2:#B8C9C7;
  --vip-soft:#0A4B4D;
  --vip-radius:22px;
  --vip-shadow:0 4px 18px rgba(0,0,0,.35);
  --vip-shadow-lg:0 12px 30px rgba(0,0,0,.55);
}

/* ---- re-map every token the master theme reads ---- */
html:root,html body{
  --zx-ink:#FFFFFF;
  --zx-ink-2:#F4F7F9;
  --zx-vault:#0A4B4D;
  --zx-gold:#27E5C1;
  --zx-gold-hi:#2ABBA5;
  --zx-gold-lo:#08777A;
  --zx-brass:#0A9290;
  --zx-ruby:#08777A;
  --zx-ruby-hi:#2ABBA5;
  --zx-ruby-lo:#066B6E;
  --zx-txt:#F4F7F9;
  --zx-txt-2:#B8C9C7;
  --zx-txt-3:#7FA6A3;
  --zx-line:#135A5A;
  --zx-line-2:#0E4F50;

  --zx-floor:linear-gradient(180deg,#02383B 0%,#002D30 100%);
  --zx-card:#073F42;
  --zx-raise:linear-gradient(150deg,#0A4B4D 0%,#073F42 100%);
  --zx-gold-btn:linear-gradient(135deg,#0A9290 0%,#08777A 60%,#066B6E 100%);
  --zx-ruby-btn:linear-gradient(135deg,#0A9290 0%,#08777A 60%,#066B6E 100%);
  --zx-shadow:0 4px 18px rgba(0,0,0,.35);
  --zx-shadow-lg:0 12px 30px rgba(0,0,0,.55);

  --premium-black:#073F42 !important;
  --neon-green:#27E5C1 !important;
  --neon-red:#FF5A6E !important;
  --text-light:#F4F7F9 !important;
  --glass-border:rgba(42,187,165,0.18) !important;
  --input-bg:#002D30 !important;
  --input-border:rgba(42,187,165,0.25) !important;
  --bg-card:#073F42 !important;
  --primary-gold:#27E5C1 !important;
  --btn-green:#08777A !important;
  --btn-border:#066B6E !important;
}

/* ============================ 1 · FLOOR ============================ */
html body{
  background:#02383B !important;
  color:var(--vip-text) !important;
}
html body .ambient-bg{
  background:
    radial-gradient(760px 420px at 12% -4%,#0A4B4D 0%,transparent 62%),
    radial-gradient(760px 420px at 92% 100%,#0A4B4D 0%,transparent 62%),
    #02383B !important;
}
html body .ambient-bg::before,
html body .ambient-bg::after{display:none !important;}

/* keep the app column phone-shaped on wide screens */
@media (min-width:1024px){
  html body .view-page,html body .bottom-nav{max-width:480px !important;margin-left:auto !important;margin-right:auto !important;}
}

/* ============================ 2 · TYPE ============================ */
html body h1,html body h2,html body h3,html body h4,
html body .header-title,html body .ck-head-title,html body .section-title{
  color:var(--vip-text) !important;
}
html body p,html body span,html body div,html body label,html body li{
  color:inherit;
}
html body .sub-text,html body .muted,html body .ck-sub,
html body .dep-note,html body .side-menu-item .sm-text{color:var(--vip-text-2) !important;}

/* ============================ 3 · SURFACES ============================ */
html body .card,
html body #mainDashboard .card,
html body #mainDashboard .acc-info-pill,
html body .sup-card,html body .sup-faq-item,
html body .ck-form,html body .ck-fi,html body .ck-sc-card,
html body .ck-sc-item,html body .ck-sc-list,html body .ck-rebate-row,
html body .ck-rebate-body,html body .ck-rebate-tabs,html body .ck-type-item,
html body .ck-rec,html body .ck-row-flex,html body .ck-question-row,
html body .ck-filter-bar,html body .ck-empty,html body .ck-tr-card,
html body .ck-phone-prefix,html body .ck-bottom-sheet,
html body .dep-promo-card,html body .pay-input-premium,html body .pay-body-white,
html body #page-deposit .dep-method-card,
html body #page-deposit .dep-channel,
html body #page-deposit .dep-amount-btn,
html body #page-deposit .dep-input-wrap,
html body #page-withdrawal .lw-form-box,
html body #page-withdrawal .wg-item,
html body #page-withdrawal .lw-input-group,
html body #page-withdrawal .withdraw-wallet-card,
html body #page-link-wallet .lw-form-box,
html body #page-link-wallet .lw-input-group,
html body #page-my-cards .wallet-card,
html body #page-my-cards .empty-wallet-box,
html body .dp-pay-container,html body .dp-copy-box,
html body .wg-item,html body .withdraw-wallet-card{
  background:#073F42 !important;
  border:1px solid var(--vip-border) !important;
  color:var(--vip-text) !important;
  border-radius:18px !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:var(--vip-shadow) !important;
}

/* ============================ 4 · INPUTS ============================ */
html body input,html body select,html body textarea{
  background:#02383B !important;
  border:1px solid var(--vip-border) !important;
  color:var(--vip-text) !important;
  border-radius:12px !important;
}
html body input::placeholder,html body textarea::placeholder{color:#7FA6A3 !important;}
html body input:focus,html body select:focus,html body textarea:focus{
  border-color:var(--vip-primary) !important;
  box-shadow:0 0 0 3px rgba(8,119,122,.12) !important;outline:none !important;
}

/* ============================ 5 · BUTTONS ============================ */
html body .btn,html body .btn-primary,html body .auth-btn,
html body .ck-btn,html body .dep-submit,html body .lw-submit,
html body .primary-btn,html body .h-action-btn,
html body .guest-auth-btn{
  background:linear-gradient(135deg,#2ABBA5 0%,#08777A 60%,#0A9290 100%) !important;
  border:0 !important;color:#F4F7F9 !important;
  border-radius:12px !important;
  box-shadow:0 6px 16px rgba(8,119,122,.28) !important;
  font-weight:800 !important;letter-spacing:.02em !important;
}
html body .h-action-btn.wd-red,
html body .guest-auth-btn.guest-login-btn,
html body .switch-btn,
html body .switch-btn-red{
  background:var(--vip-soft) !important;color:var(--vip-primary) !important;
  box-shadow:none !important;border:1px solid var(--vip-border) !important;
}
/* the disabled-timer state also inherited neon-red — normalise to soft blue */
html body .disabled-timer{
  background:var(--vip-soft) !important;color:var(--vip-text-2) !important;
  border-color:var(--vip-border) !important;box-shadow:none !important;
}
html body .btn:active,html body .h-action-btn:active,html body .ck-btn:active{
  transform:translateY(1px) scale(.985);
}

/* ============================ 6 · HEADER ============================ */
html body .home-header-small,html body .ck-head,html body .dep-header,
html body .promo-header,html body .neon-gold-header,html body .acc-page-header,
html body .auth-header{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(150%) !important;
  border-bottom:1px solid var(--vip-border) !important;
  box-shadow:0 2px 14px rgba(2,56,59,.06) !important;
  color:var(--vip-text) !important;
  padding:9px 13px !important;
}
html body .home-header-small{
  min-height:62px !important;gap:9px !important;
  border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;
}
html body .home-header-small .hamburger{
  color:var(--vip-primary) !important;font-size:20px !important;
}

/* logo lockup injected by vip-blue.js */
html body .vip-logo{display:flex;align-items:center;gap:5px;position:relative;flex:none;}
html body .vip-logo-word{
  font-family:'Poppins','Segoe UI',sans-serif;font-weight:900;font-style:italic;
  font-size:21px;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#2ABBA5 0%,#0A9290 55%,#002D30 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html body .vip-logo-tag{
  font-family:'Poppins','Segoe UI',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.06em;color:var(--vip-primary);line-height:1;
  border:2px solid var(--vip-primary);border-radius:6px;padding:3px 5px;
}
html body .vip-logo-crown{position:absolute;top:-10px;right:11px;color:var(--vip-navy);}
html body .vip-logo.lg .vip-logo-word{font-size:34px;}
html body .vip-logo.lg .vip-logo-tag{font-size:15px;padding:4px 7px;}
html body .vip-logo.lg .vip-logo-crown{top:-15px;right:18px;}

/* balance → wallet pill */
html body .home-header-small .user-info-h{
  background:linear-gradient(135deg,#2ABBA5 0%,#08777A 58%,#0A9290 100%) !important;
  border:0 !important;border-radius:12px !important;
  padding:7px 10px !important;gap:7px !important;
  box-shadow:0 4px 12px rgba(8,119,122,.3) !important;
}
html body .home-header-small .user-info-h *{color:#F4F7F9 !important;}
html body .home-header-small .balance-h{font-weight:800 !important;font-size:13.5px !important;}
html body .home-header-small .user-avatar-h,
html body .home-header-small .home-profile-icon{
  width:22px !important;height:22px !important;
  filter:brightness(0) invert(1) !important;
}

/* ============================ 7 · HERO (injected) ============================ */
html body .vip-hero{
  position:relative;overflow:hidden;
  margin:12px 13px 0;border-radius:24px;
  background:linear-gradient(135deg,#002D30 0%,#066B6E 45%,#00181A 100%);
  box-shadow:var(--vip-shadow-lg);
  aspect-ratio:16/10;
}
html body .vip-hero-art{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  width:52%;z-index:1;pointer-events:none;
}
html body .vip-hero-body{
  position:relative;z-index:2;height:100%;max-width:64%;
  padding:16px 15px;display:flex;flex-direction:column;justify-content:center;
}
html body .vip-eyebrow{
  align-self:flex-start;background:rgba(42,187,165,.92);color:#F4F7F9;
  font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:5px 10px;border-radius:8px;margin-bottom:8px;
}
html body .vip-hero-h1{
  font-family:'Poppins',sans-serif;font-weight:900;font-style:italic;
  font-size:28px;line-height:.95;color:#F4F7F9 !important;margin:0;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  text-shadow:0 3px 14px rgba(0,0,0,.35);
}
html body .vip-hero-h1 em{
  font-style:normal;font-size:13px;letter-spacing:.06em;
  background:#2ABBA5;padding:3px 6px;border-radius:6px;text-shadow:none;
}
html body .vip-hero-sub{
  font-family:'Poppins',sans-serif;font-weight:800;font-style:italic;
  font-size:12px;color:#27E5C1 !important;margin:7px 0 0;
}
html body .vip-hero-p{font-size:12.5px;color:rgba(255,255,255,.92) !important;margin:6px 0 0;font-weight:500;}
html body .vip-hero-cta{
  margin-top:12px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:12px;color:#F4F7F9 !important;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;cursor:pointer;
  background:linear-gradient(135deg,#2ABBA5 0%,#08777A 100%);
  box-shadow:0 6px 18px rgba(42,187,165,.42);border:0;
}
html body .vip-hero-cta:active{transform:translateY(1px) scale(.98);}

/* ============================ 8 · BANNER SLIDER ============================ */
html body .home-banner-slider,html body #homeBannerSlider{
  border:1px solid var(--vip-border) !important;
  border-radius:20px !important;
  background:transparent !important;
  box-shadow:var(--vip-shadow) !important;
  overflow:hidden !important;
}
html body .banner-track img{
  background:transparent !important;
  object-fit:cover !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  opacity:1 !important;
  filter:none !important;
  display:block !important;
}
html body .banner-slide{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  background:transparent !important;
}
html body .banner-slide::before,
html body .banner-slide::after,
html body .banner-shine-layer{
  display:none !important;
  opacity:0 !important;
  content:none !important;
  animation:none !important;
}

/* ============================ 9 · LIVE TICKER ============================ */
html body .zx-live-ticker{
  background:#073F42 !important;border:1px solid var(--vip-border) !important;
  border-radius:14px !important;box-shadow:var(--vip-shadow) !important;
  color:var(--vip-text) !important;
}
html body .zx-lt-badge{
  background:linear-gradient(135deg,#2ABBA5,#08777A) !important;color:#F4F7F9 !important;
  border:0 !important;border-radius:8px !important;font-weight:800 !important;
}
html body .zx-lt-dot{background:#073F42 !important;}
html body .zx-lt-track,html body .zx-lt-track *{color:var(--vip-text-2) !important;}

/* ============================ 10 · SECTION CARDS ============================ */
html body .game-platform-section,
html body .game-grid-wrapper,
html body .zx-section{
  background:#073F42 !important;
  border:1px solid var(--vip-border) !important;
  border-radius:var(--vip-radius) !important;
  box-shadow:var(--vip-shadow) !important;
  margin:14px 13px !important;padding:4px 0 6px !important;
}
html body .game-platform-item span{color:var(--vip-text-2) !important;font-weight:600 !important;}
html body .game-platform-item.active span{color:var(--vip-primary) !important;font-weight:800 !important;}
html body .game-platform-item.active .game-platform-icon{
  box-shadow:0 0 0 2px var(--vip-primary) !important;border-radius:14px !important;
}
html body .game-card{
  background:#073F42 !important;border:1px solid var(--vip-border) !important;
  border-radius:16px !important;box-shadow:0 5px 14px rgba(2,56,59,.1) !important;
}
html body .game-img{border-radius:16px !important;}
html body .heart-icon{background:rgba(8,119,122,.85) !important;}

/* section heading injected by vip-blue.js */
html body .vip-sechead{
  display:flex;align-items:center;gap:8px;padding:14px 14px 10px;
}
html body .vip-sechead h3{
  font-family:'Poppins',sans-serif;font-weight:800;font-size:15px;
  letter-spacing:.04em;margin:0;color:var(--vip-text) !important;
}
html body .vip-viewall{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;color:var(--vip-primary) !important;
  background:none;border:0;cursor:pointer;
}
html body .vip-viewall i{
  width:24px;height:24px;border-radius:50%;border:1.5px solid var(--vip-primary);
  display:grid;place-items:center;font-size:11px;
}

/* ============================ 11 · PROMO PAIR (injected) ============================ */
html body .vip-promos{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 13px;
}
@media (max-width:379px){html body .vip-promos{grid-template-columns:1fr;}}
html body .vip-promo{
  position:relative;overflow:hidden;border-radius:20px;
  padding:15px 14px;min-height:176px;text-align:left;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:#F4F7F9 !important;box-shadow:0 8px 22px rgba(2,56,59,.22);
}
html body .vip-promo.a{background:linear-gradient(150deg,#066B6E 0%,#002D30 55%,#00181A 100%);}
html body .vip-promo.b{background:linear-gradient(150deg,#08777A 0%,#0A9290 55%,#002D30 100%);}
html body .vip-promo svg{position:absolute;z-index:1;pointer-events:none;}
html body .vip-promo .txt{position:relative;z-index:2;}
html body .vip-promo .k{font-family:'Poppins',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.05em;line-height:1.25;color:#F4F7F9 !important;}
html body .vip-promo .big{font-family:'Poppins',sans-serif;font-weight:900;font-size:19px;line-height:1.05;margin-top:2px;color:#F4F7F9 !important;}
html body .vip-promo .note{font-size:11.5px;color:rgba(255,255,255,.88) !important;margin-top:5px;line-height:1.45;font-weight:500;}
html body .vip-promo .mini{
  margin-top:11px;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:8px 12px;border-radius:10px;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:linear-gradient(135deg,#2ABBA5,#08777A);box-shadow:0 4px 12px rgba(0,0,0,.28);
}

/* ============================ 12 · TRUST STRIP (injected) ============================ */
html body .vip-feats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:#073F42;border:1px solid var(--vip-border);
  border-radius:var(--vip-radius);box-shadow:var(--vip-shadow);
  margin:14px 13px;padding:15px 4px;
}
html body .vip-feat{padding:0 8px;position:relative;}
html body .vip-feat+.vip-feat::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--vip-border);
}
html body .vip-feat .ic{
  width:34px;height:34px;border-radius:11px;margin-bottom:8px;
  background:linear-gradient(140deg,#2ABBA5 0%,#08777A 60%,#0A9290 100%);
  display:grid;place-items:center;color:#F4F7F9;font-size:15px;
  box-shadow:0 5px 12px rgba(8,119,122,.3);
}
html body .vip-feat .t{font-family:'Poppins',sans-serif;font-weight:800;font-size:10.5px;line-height:1.25;color:var(--vip-text) !important;}
html body .vip-feat .s{font-size:10px;line-height:1.35;color:var(--vip-text-2) !important;margin-top:4px;}

html body .vip-legal{
  text-align:center;font-size:11px;color:var(--vip-text-2) !important;
  padding:6px 24px 4px;line-height:1.6;
}

/* ============================ 13 · BOTTOM NAV ============================ */
html body .bottom-nav{
  height:auto !important;min-height:0 !important;
  align-items:stretch !important;
  padding:9px 6px calc(9px + env(safe-area-inset-bottom,0px)) !important;
  background:linear-gradient(135deg,rgba(2,56,59,.97) 0%,rgba(10,75,77,.92) 48%,rgba(2,56,59,.97) 100%) !important;
  background-color:#02383B !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-top:0 !important;
  border-radius:22px 22px 0 0 !important;
  box-shadow:0 -8px 26px rgba(2,56,59,.3) !important;
}
html body .bottom-nav .nav-item,
html body .bottom-nav .nav-item.active,
html body .bottom-nav .nav-item:hover,
html body .bottom-nav .nav-item:focus{
  color:rgba(255,255,255,.74) !important;
  gap:4px !important;padding:6px 2px !important;border-radius:14px !important;
  background:transparent !important;top:0 !important;
}
html body .bottom-nav .nav-item span{
  font-size:10.5px !important;font-weight:600 !important;color:inherit !important;
}
/* nav artwork — original PNGs, untouched. Nothing animates, nothing recolours. */
html body .bottom-nav .nav-item img{
  width:36px !important;height:36px !important;
  margin:0 0 3px !important;padding:0 !important;
  object-fit:contain !important;
  filter:none !important;-webkit-filter:none !important;
  opacity:1 !important;transform:none !important;
  transition:none !important;animation:none !important;
  box-shadow:none !important;border:0 !important;border-radius:0 !important;
  background:none !important;background-color:transparent !important;
  mix-blend-mode:normal !important;
}

/* every state renders identically — no press flash, no shake, no tint */
html body .bottom-nav .nav-item,
html body .bottom-nav .nav-item:link,
html body .bottom-nav .nav-item:visited,
html body .bottom-nav .nav-item:hover,
html body .bottom-nav .nav-item:focus,
html body .bottom-nav .nav-item:focus-visible,
html body .bottom-nav .nav-item:active,
html body .bottom-nav .nav-item.active,
html body .bottom-nav .nav-invite,
html body .bottom-nav .nav-item img,
html body .bottom-nav .nav-item:hover img,
html body .bottom-nav .nav-item:focus img,
html body .bottom-nav .nav-item:active img,
html body .bottom-nav .nav-item.active img{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;border-radius:0 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  filter:none !important;-webkit-filter:none !important;
  opacity:1 !important;
  top:0 !important;
}
html body .bottom-nav .nav-item::before,
html body .bottom-nav .nav-item::after,
html body .bottom-nav .nav-item.active::before,
html body .bottom-nav .nav-item.active::after{
  content:none !important;display:none !important;
}

/* only the label tells you which tab you are on */
html body .bottom-nav .nav-item span{color:rgba(255,255,255,.72) !important;}
html body .bottom-nav .nav-item.active span{color:#F4F7F9 !important;}
html body .bottom-nav .nav-invite{
  position:static !important;top:0 !important;background:transparent !important;
  width:auto !important;height:auto !important;border:0 !important;
  border-radius:14px !important;box-shadow:none !important;color:rgba(255,255,255,.74) !important;
}

/* ============================ 14 · SIDE MENU ============================ */
html body .side-menu-drawer{
  background:linear-gradient(170deg,#002D30 0%,#00181A 100%) !important;
  border-right:0 !important;color:#F4F7F9 !important;
}
html body .side-menu-drawer *{color:#F4F7F9 !important;}
html body .side-menu-item{
  background:rgba(255,255,255,.07) !important;border:0 !important;
  border-radius:14px !important;margin-bottom:8px !important;
}
html body .side-menu-item:active{background:rgba(255,255,255,.15) !important;}
html body .side-menu-overlay{background:rgba(0,45,48,.5) !important;}

/* ============================ 15 · AUTH & SPLASH ============================ */
html body .zx-splash{background:linear-gradient(160deg,#066B6E 0%,#00181A 100%) !important;}
html body #page-login,html body #page-register,html body #page-forgot{
  background:linear-gradient(170deg,#073F42 0%,#0A4B4D 100%) !important;
}
html body .auth-card,html body .auth-box{
  background:#073F42 !important;border:1px solid var(--vip-border) !important;
  border-radius:20px !important;box-shadow:var(--vip-shadow-lg) !important;
}

/* ============================ 16 · MODALS / POPUPS ============================ */
html body .modal-overlay,html body .popup-overlay{background:rgba(0,45,48,.5) !important;}
html body .avatar-modal,html body .popup-box,html body .ck-bottom-sheet{
  background:#073F42 !important;color:var(--vip-text) !important;
  border:1px solid var(--vip-border) !important;border-radius:20px !important;
}

/* ============================ 17 · MISC CLEANUP ============================ */
html body .floating-social .bg-telegram{
  background:linear-gradient(135deg,#2ABBA5,#08777A) !important;
  border:2px solid rgba(255,255,255,.6) !important;
}
html body::-webkit-scrollbar{width:0;}
@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{animation:none !important;transition:none !important;}
}

/* ============================================================================
   18 · NO BLACK TEXT ANYWHERE
   Every legacy black / near-black colour in the original stylesheets and in
   inline style="" attributes is remapped to readable brand blue. Text that
   sits on a dark blue surface is re-asserted as white at the end of the file,
   so the two rules never fight.
   ========================================================================== */

html body,
html body p, html body span, html body div, html body li, html body td, html body th,
html body a, html body label, html body small, html body strong, html body b, html body em,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body input, html body select, html body textarea, html body option,
html body .header-title, html body .section-title, html body .sm-text,
html body .ck-head-title, html body .ck-label, html body .ck-value,
html body .dep-title, html body .dep-label, html body .dep-note,
html body .lw-label, html body .promo-title, html body .modal-title{
  color:#F4F7F9;
}

/* any element that still asks for black — element or inline attribute */
html body [style*="color:#000"], html body [style*="color: #000"],
html body [style*="color:#111"], html body [style*="color: #111"],
html body [style*="color:#222"], html body [style*="color: #222"],
html body [style*="color:#333"], html body [style*="color: #333"],
html body [style*="color:#444"], html body [style*="color: #444"],
html body [style*="color:black"], html body [style*="color: black"],
html body [style*="color:rgb(0,0,0)"], html body [style*="color: rgb(0, 0, 0)"],
html body [color="#000000"], html body [color="black"]{
  color:#F4F7F9 !important;
}

/* secondary / muted copy — lighter blue, still well above contrast floor */
html body .sub-text, html body .muted, html body .ck-sub, html body .dep-note,
html body .zx-lt-track, html body .zx-lt-track *,
html body .vip-feat .s, html body .vip-legal,
html body .row-sub, html body .hint, html body .note{
  color:#7FA6A3 !important;
}

/* icons that inherited black */
html body i.fa-solid, html body i.fas, html body i.fa-regular, html body i.far,
html body i.fa-brands, html body i.fab{
  color:inherit;
}

/* placeholders */
html body input::placeholder, html body textarea::placeholder{color:#7FA6A3 !important;}

/* ---- re-assert white on every dark blue surface ---- */
html body .bottom-nav, html body .bottom-nav *,
html body .side-menu-drawer, html body .side-menu-drawer *,
html body .vip-hero, html body .vip-hero *,
html body .vip-promo, html body .vip-promo *,
html body .zx-splash, html body .zx-splash *,
html body .zx-lt-badge, html body .zx-lt-badge *,
html body .home-header-small .user-info-h, html body .home-header-small .user-info-h *,
html body .btn, html body .btn-primary, html body .auth-btn, html body .ck-btn,
html body .dep-submit, html body .lw-submit, html body .primary-btn,
html body .h-action-btn, html body .guest-auth-btn.guest-reg-btn,
html body .vip-hero-cta, html body .vip-promo .mini,
html body .vip-feat .ic, html body .vip-feat .ic *{
  color:#F4F7F9 !important;
}

/* the few blue-on-white exceptions inside those groups */
html body .h-action-btn.wd-red,
html body .guest-auth-btn.guest-login-btn,
html body .vip-viewall, html body .vip-viewall *{
  color:#08777A !important;
}
html body .vip-hero-sub{color:#27E5C1 !important;}
html body .vip-promo .note{color:rgba(255,255,255,.88) !important;}
html body .vip-feat .t{color:#F4F7F9 !important;}
html body .vip-feat .s{color:#7FA6A3 !important;}

/* logo lockup keeps its gradient fill */
html body .vip-logo-word{color:transparent !important;}
html body .vip-logo-tag{color:#08777A !important;}
html body .vip-logo-crown{color:#002D30 !important;}


/* ============================================================================
   19 · FOOTER ICONS — ABSOLUTE FREEZE + SIZING  (must stay last in this file)
   The original stylesheet ships these, which caused the colour flash and the
   "vibration" on tap:
       .nav-item              { transition: color .3s }
       .nav-item.active       { color: var(--neon-green) }
       .nav-item.active i     { transform: translate3d(0,-2px,0) }
       .nav-item:active img   { transform: scale(.92) !important }
       .nav-item.center       { transform: translateY(-8px) !important }
       .nav-invite            { top:-20px; background:var(--neon-green) }
   All of them are neutralised below, for every element and every state.
   ========================================================================== */

/* ---- 19a · kill every state change on the whole nav ---- */
html body nav.bottom-nav *,
html body nav.bottom-nav *::before,
html body nav.bottom-nav *::after,
html body nav.bottom-nav a.nav-item,
html body nav.bottom-nav a.nav-item:link,
html body nav.bottom-nav a.nav-item:visited,
html body nav.bottom-nav a.nav-item:hover,
html body nav.bottom-nav a.nav-item:focus,
html body nav.bottom-nav a.nav-item:focus-within,
html body nav.bottom-nav a.nav-item:focus-visible,
html body nav.bottom-nav a.nav-item:active,
html body nav.bottom-nav a.nav-item.active,
html body nav.bottom-nav a.nav-item.center,
html body nav.bottom-nav a.nav-item.center.active,
html body nav.bottom-nav a.nav-item.center:active,
html body nav.bottom-nav a.nav-item.center:hover,
html body nav.bottom-nav .nav-invite,
html body nav.bottom-nav .nav-invite:hover,
html body nav.bottom-nav .nav-invite:active{
  transform:none !important;-webkit-transform:none !important;
  transition:none !important;-webkit-transition:none !important;
  animation:none !important;-webkit-animation:none !important;
  filter:none !important;-webkit-filter:none !important;
  opacity:1 !important;
  top:auto !important;bottom:auto !important;
  -webkit-tap-highlight-color:transparent !important;
}
html body nav.bottom-nav a.nav-item,
html body nav.bottom-nav a.nav-item:hover,
html body nav.bottom-nav a.nav-item:active,
html body nav.bottom-nav a.nav-item.active,
html body nav.bottom-nav .nav-invite{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;border-radius:0 !important;
  width:20% !important;height:auto !important;
  display:flex !important;flex-direction:column !important;
  align-items:center !important;justify-content:flex-end !important;
}
html body nav.bottom-nav a.nav-item::before,
html body nav.bottom-nav a.nav-item::after,
html body nav.bottom-nav a.nav-item.active::before,
html body nav.bottom-nav a.nav-item.active::after,
html body nav.bottom-nav a.nav-item i{
  content:none !important;display:none !important;
}

/* ---- 19b · sizing: side tabs large, deposit largest ---- */
html body nav.bottom-nav a.nav-item img,
html body nav.bottom-nav a.nav-item:link img,
html body nav.bottom-nav a.nav-item:visited img,
html body nav.bottom-nav a.nav-item:hover img,
html body nav.bottom-nav a.nav-item:focus img,
html body nav.bottom-nav a.nav-item:focus-visible img,
html body nav.bottom-nav a.nav-item:active img,
html body nav.bottom-nav a.nav-item.active img{
  width:44px !important;height:44px !important;
  min-width:44px !important;min-height:44px !important;
  max-width:44px !important;max-height:44px !important;
  padding:0 !important;margin:0 0 2px !important;
  object-fit:contain !important;
  transform:none !important;transition:none !important;animation:none !important;
  filter:none !important;-webkit-filter:none !important;opacity:1 !important;
  background:none !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;outline:none !important;mix-blend-mode:normal !important;
}

/* deposit — the centre tab, deliberately the biggest */
html body nav.bottom-nav a.nav-item.center img,
html body nav.bottom-nav a.nav-item.center:hover img,
html body nav.bottom-nav a.nav-item.center:focus img,
html body nav.bottom-nav a.nav-item.center:active img,
html body nav.bottom-nav a.nav-item.center.active img,
html body nav.bottom-nav a#navDeposit img{
  width:58px !important;height:58px !important;
  min-width:58px !important;min-height:58px !important;
  max-width:58px !important;max-height:58px !important;
  margin:0 0 1px !important;padding:0 !important;
  transform:none !important;transition:none !important;
}

/* nav box grows to fit the larger artwork */
html body nav.bottom-nav{
  padding:6px 4px calc(7px + env(safe-area-inset-bottom,0px)) !important;
  align-items:flex-end !important;
}

/* label is the only thing that marks the current tab */
html body nav.bottom-nav a.nav-item span{
  color:rgba(255,255,255,.72) !important;
  font-size:10.5px !important;font-weight:600 !important;
  transition:none !important;line-height:1.2 !important;
}
html body nav.bottom-nav a.nav-item.active span{color:#F4F7F9 !important;}

@media (max-width:359px){
  html body nav.bottom-nav a.nav-item img{
    width:38px !important;height:38px !important;
    min-width:38px !important;min-height:38px !important;
    max-width:38px !important;max-height:38px !important;
  }
  html body nav.bottom-nav a.nav-item.center img,
  html body nav.bottom-nav a#navDeposit img{
    width:50px !important;height:50px !important;
    min-width:50px !important;min-height:50px !important;
    max-width:50px !important;max-height:50px !important;
  }
}


/* ============================================================================
   20 · SCREEN-BY-SCREEN FIXES  (reported after the first blue pass)
   ========================================================================== */

/* ---- 20a · home header: wallet pill was showing a white blob + hidden text ---- */
html body .home-header-small .user-avatar-h,
html body .home-header-small .home-profile-icon{display:none !important;}
html body .home-header-small .user-info-h{
  padding:8px 12px !important;gap:8px !important;min-width:0 !important;
}
html body .home-header-small .user-info-h::before{
  content:"\f555";font-family:"Font Awesome 6 Free";font-weight:900;
  color:#F4F7F9;font-size:14px;line-height:1;flex:none;
}
html body .home-header-small .balance-h{
  display:flex !important;align-items:center !important;gap:7px !important;
  font-size:14px !important;font-weight:800 !important;color:#F4F7F9 !important;
  white-space:nowrap !important;
}
html body .home-header-small .balance-h span,
html body .home-header-small #balanceTextHome{color:#F4F7F9 !important;}
html body .home-header-small .balance-h i,
html body .home-header-small #toggleBalance{
  color:rgba(255,255,255,.85) !important;font-size:13px !important;padding:0 !important;
}

/* hamburger: plain blue glyph, no dark box */
html body .home-header-small .hamburger{
  background:none !important;background-color:transparent !important;
  border:0 !important;box-shadow:none !important;border-radius:0 !important;
  width:auto !important;height:auto !important;padding:0 4px !important;
  color:#08777A !important;font-size:21px !important;
}
html body .home-header-small .hamburger i{color:#08777A !important;}

/* ---- 20b · My Account: profile card was still maroon with dark text ---- */
html body .ck-acct .ck-head-bg,
html body #mainDashboard .ck-head-bg{
  background:#073F42 !important;border-bottom:1px solid #135A5A !important;
}
html body #mainDashboard .ck-head,
html body #mainDashboard .ck-head *{color:#F4F7F9 !important;}

html body .ck-profile{
  background:linear-gradient(140deg,#2ABBA5 0%,#08777A 48%,#002D30 100%) !important;
  border:0 !important;border-radius:20px !important;
  box-shadow:0 10px 26px rgba(2,56,59,.24) !important;
}
html body .ck-profile,
html body .ck-profile *,
html body .ck-username,html body .ck-username *,
html body .ck-nickname,html body .ck-nickname *,
html body .ck-joined,html body .ck-joined *,
html body .ck-balance,
html body .ck-balance-actions i{color:#F4F7F9 !important;}
html body .ck-nickname,html body .ck-joined{color:rgba(255,255,255,.82) !important;}
html body .ck-ribbon{
  background:rgba(255,255,255,.20) !important;color:#F4F7F9 !important;
  backdrop-filter:blur(4px) !important;
}
html body .ck-vip-badge{
  background:rgba(255,255,255,.22) !important;color:#F4F7F9 !important;
  box-shadow:none !important;
}
html body .ck-bg-badge{display:none !important;}
html body .ck-action{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  color:#F4F7F9 !important;box-shadow:none !important;
}
html body .ck-action *{color:#F4F7F9 !important;}
html body .ck-avatar-wrap,html body .ck-avatar{
  border-color:rgba(255,255,255,.55) !important;
}

/* Member Center tiles — blue, not gold */
html body .ck-icp{
  background:linear-gradient(140deg,#2ABBA5 0%,#08777A 60%,#0A9290 100%) !important;
  border:0 !important;border-radius:14px !important;
  box-shadow:0 4px 10px rgba(8,119,122,.26) !important;
}
html body .ck-icp i{
  color:#F4F7F9 !important;text-shadow:none !important;
}
html body .ck-ic-label,html body .ck-ic-label *{color:#F4F7F9 !important;}
html body .ck-divider span{color:#F4F7F9 !important;}
html body .ck-divider::before,html body .ck-divider::after{background:#135A5A !important;}
html body .ck-count-badge{background:#2ABBA5 !important;color:#F4F7F9 !important;border:2px solid #073F42 !important;}

/* ---- 20c · Promotions page header ---- */
html body .top,html body header .top-in{
  background:#073F42 !important;border-bottom:1px solid #135A5A !important;
}
html body .brand-txt h1{
  background:linear-gradient(100deg,#2ABBA5 12%,#08777A 55%,#002D30 90%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
}
html body .brand-txt p{color:#B8C9C7 !important;}
html body .brand img{filter:none !important;}
html body .dom{
  background:#0A4B4D !important;border:1px solid #0E4F50 !important;
  color:#08777A !important;font-weight:700 !important;border-radius:9px !important;
}
html body .foot-brand span{color:#08777A !important;}


/* ============================================================================
   21 · NAV POSITION LOCK  +  NO GOLD ANYWHERE
   ========================================================================== */

/* ---- 21a · the bar itself stays pinned to the bottom ---- */
html body nav.bottom-nav,
html body .bottom-nav{
  position:fixed !important;
  left:50% !important;right:auto !important;
  transform:translateX(-50%) !important;
  top:auto !important;
  bottom:0 !important;
  width:100% !important;max-width:480px !important;
  z-index:1000 !important;
  margin:0 !important;
}
/* children reset must never touch the bar's own offsets */
html body nav.bottom-nav a.nav-item,
html body nav.bottom-nav .nav-invite{
  position:relative !important;top:0 !important;bottom:auto !important;
}

/* ---- 21b · every gold / amber / yellow token becomes brand blue ---- */
html:root,html body{
  --primary-gold:#08777A !important;
  --zx-gold:#08777A !important;
  --zx-gold-hi:#2ABBA5 !important;
  --zx-gold-lo:#0A9290 !important;
  --zx-brass:#002D30 !important;
  --gold:#08777A !important;
  --gold-hi:#2ABBA5 !important;
  --gold-lo:#0A9290 !important;
  --neon-green:#08777A !important;
  --neon-red:#2ABBA5 !important;
  --accent:#08777A !important;
}

/* gold text set directly in the old stylesheets or inline */
html body [style*="color:#FFD"], html body [style*="color: #FFD"],
html body [style*="color:#ffd"], html body [style*="color: #ffd"],
html body [style*="color:#FFC"], html body [style*="color: #FFC"],
html body [style*="color:#ffc"], html body [style*="color: #ffc"],
html body [style*="color:#FFE"], html body [style*="color: #FFE"],
html body [style*="color:#ffe"], html body [style*="color: #ffe"],
html body [style*="color:#F0B"], html body [style*="color: #F0B"],
html body [style*="color:#f0b"], html body [style*="color: #f0b"],
html body [style*="color:#E8A"], html body [style*="color: #E8A"],
html body [style*="color:#e8a"], html body [style*="color: #e8a"],
html body [style*="color:#B87"], html body [style*="color: #B87"],
html body [style*="color:#b87"], html body [style*="color: #b87"],
html body [style*="color:gold"], html body [style*="color: gold"],
html body [style*="color:#DAA"], html body [style*="color:#daa"],
html body .gold, html body .text-gold, html body .golden,
html body .zx-gold, html body .gold-text, html body .neon-gold,
html body .primary-gold{
  color:#08777A !important;
  background:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:#08777A !important;
  text-shadow:none !important;
}

/* gold gradient text (background-clip trick) used by the old master theme */
html body .zx-gold-text, html body .gold-gradient,
html body .neon-gold-header .header-title,
html body .ck-head-title, html body .header-title,
html body .section-title, html body .sec-title, html body .title-gold{
  background:none !important;
  -webkit-background-clip:border-box !important;background-clip:border-box !important;
  -webkit-text-fill-color:#F4F7F9 !important;
  color:#F4F7F9 !important;
  text-shadow:none !important;
}

/* gold borders, rules and glows */
html body [style*="border-color:#FFD"], html body [style*="border-color: #FFD"],
html body [style*="border:1px solid #FFD"], html body [style*="border: 1px solid #FFD"]{
  border-color:#0E4F50 !important;
}

/* on dark blue surfaces gold text becomes white, not blue */
html body nav.bottom-nav [style*="color:#FFD"],
html body .ck-profile [style*="color:#FFD"],
html body .side-menu-drawer [style*="color:#FFD"],
html body .vip-hero [style*="color:#FFD"],
html body .vip-promo [style*="color:#FFD"],
html body nav.bottom-nav .gold,
html body .ck-profile .gold,
html body .side-menu-drawer .gold{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* ---- 21c · catch-all: no pure black text left anywhere ---- */
html body [style*="color:#000"], html body [style*="color: #000"],
html body [style*="color:black"], html body [style*="color: black"],
html body [style*="color:rgb(0"], html body [style*="color: rgb(0"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body nav.bottom-nav [style*="color:#000"],
html body .ck-profile [style*="color:#000"],
html body .side-menu-drawer [style*="color:#000"],
html body .vip-hero [style*="color:#000"],
html body .vip-promo [style*="color:#000"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}


/* ============================================================================
   22 · LEGACY COLOUR SWEEP — auth, loader, toasts, buttons, icons
   The original build was neon-green / gold / crimson. Everything below is
   re-pointed at the 3999BET blue system.
   ========================================================================== */

/* ---- 22a · banner slider RESTORED (was hidden here) ---- */
html body .home-banner-slider,
html body #homeBannerSlider{
  display:block !important;
}
/* Only these truly-unused elements stay hidden */
html body .promo-banner,
html body #promoContainer .promo-banner,
html body .ph-grid{
  display:none !important;
}

/* ---- 22b · splash / loading screen ---- */
html body .zx-splash,
html body .loading-overlay,
html body .fullscreen-loader,
html body #globalLoader{
  background:linear-gradient(160deg,#066B6E 0%,#002D30 55%,#00181A 100%) !important;
}
html body .loader-ring::before{
  background:conic-gradient(transparent,#27E5C1,#073F42,transparent) !important;
}
html body .loader-ring::after{background:#066B6E !important;}
html body .loader-ring i{
  color:#F4F7F9 !important;text-shadow:0 0 14px rgba(255,255,255,.55) !important;
}
html body .loader-text{color:#F4F7F9 !important;text-shadow:none !important;}
html body .loader-subtext{color:rgba(255,255,255,.72) !important;}
html body .loader-logo-img{filter:none !important;}
html body .spinner{
  border:4px solid rgba(255,255,255,.22) !important;
  border-top-color:#F4F7F9 !important;
}

/* ---- 22c · login / register / forgot ---- */
html body #page-login,html body #page-register,html body #page-forgot{
  background:linear-gradient(170deg,#066B6E 0%,#002D30 55%,#00181A 100%) !important;
}
html body #page-login *,html body #page-register *,html body #page-forgot *{
  color:#F4F7F9;
}
html body .auth-header i{color:#F4F7F9 !important;}
html body .auth-title{color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;}

html body .input-group-auth{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:14px !important;
}
html body .input-group-auth:focus-within{
  border-color:#27E5C1 !important;
  background:rgba(255,255,255,.18) !important;
  box-shadow:0 0 0 3px rgba(39,229,193,.22) !important;
}
html body .input-group-auth input{
  background:transparent !important;color:#F4F7F9 !important;
  -webkit-text-fill-color:#F4F7F9 !important;
}
html body .input-group-auth input::placeholder{color:rgba(255,255,255,.60) !important;}
html body .input-group-auth:focus-within .input-icon,
html body .input-icon,html body .auth-svg-icon{color:#F4F7F9 !important;text-shadow:none !important;}
html body .phone-prefix{
  color:#F4F7F9 !important;border-right:1px solid rgba(255,255,255,.28) !important;
}

html body .auth-btn{
  background:linear-gradient(135deg,#2ABBA5 0%,#08777A 60%,#0A9290 100%) !important;
  border:0 !important;border-radius:14px !important;color:#F4F7F9 !important;
  box-shadow:0 8px 22px rgba(42,187,165,.42) !important;
  animation:none !important;
}
html body .auth-btn:hover{
  background:linear-gradient(135deg,#2ABBA5 0%,#08777A 100%) !important;
  transform:none !important;
}
html body .auth-btn:active{transform:translateY(1px) scale(.99) !important;}
html body .auth-link,html body .auth-switch a,html body .forgot-link{
  color:#B8C9C7 !important;-webkit-text-fill-color:#B8C9C7 !important;
}
html body .auth-footer,html body .auth-note{color:rgba(255,255,255,.7) !important;}
html body .checkbox-auth input:checked + span,
html body .auth-check i{color:#B8C9C7 !important;}

/* the inline SVG field icons ship hard-coded fills */
html body .auth-svg-icon rect[fill="#2ABBA5"],
html body .auth-svg-icon circle[fill="#2ABBA5"],
html body .auth-svg-icon path[fill="#2ABBA5"]{fill:#2ABBA5 !important;}
html body .auth-svg-icon polygon[fill="#0A9290"],
html body .auth-svg-icon path[fill="#0A9290"]{fill:#0A9290 !important;}

/* ---- 22d · toasts & alerts ---- */
html body .toast-premium{
  background:linear-gradient(135deg,#2ABBA5,#08777A) !important;
  color:#F4F7F9 !important;border-radius:14px !important;border:0 !important;
}
html body .toast-premium *{color:#F4F7F9 !important;}
html body .toast-premium.error{background:linear-gradient(135deg,#FF5A6E,#D62741) !important;}
html body .toast-premium.copy-toast{
  background:#002D30 !important;color:#F4F7F9 !important;border:0 !important;
}

/* ---- 22e · leftover neon-green / crimson accents on buttons and icons ---- */
html body [style*="color:#27E5C1"],html body [style*="color:#2ABBA5"],
html body [style*="color:#2ABBA5"],html body [style*="color:#27E5C1"],
html body [style*="color:#27E5C1"],html body [style*="color:#27E5C1"],
html body [style*="color:#27E5C1"],html body [style*="color:#ff073a"],
html body [style*="color:#ff0033"],html body [style*="color:#e01230"],
html body [style*="color:#ff2a00"],html body [style*="color:#F4CE19"]{
  color:#08777A !important;-webkit-text-fill-color:#08777A !important;
}
html body nav.bottom-nav [style*="color:#27E5C1"],
html body .ck-profile [style*="color:#27E5C1"],
html body .side-menu-drawer [style*="color:#27E5C1"],
html body #page-login [style*="color:#27E5C1"],
html body #page-register [style*="color:#27E5C1"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* generic accent icons that were green or gold */
html body .h-action-btn i,html body .sm-icon i,
html body .ck-action i,html body .dep-method-card i{color:inherit !important;}
html body .sm-icon{
  background:linear-gradient(140deg,#2ABBA5,#08777A) !important;
  border:0 !important;border-radius:12px !important;
}
html body .sm-icon i,html body .sm-icon img{color:#F4F7F9 !important;filter:none !important;}
html body .floating-social .social-btn{
  background:linear-gradient(135deg,#2ABBA5,#08777A) !important;
  border:2px solid rgba(255,255,255,.55) !important;color:#F4F7F9 !important;
}

/* status colours stay meaningful but move into the blue family */
html body .status-success,html body .text-success,html body .ck-ok{color:#0E8F5A !important;}
html body .status-fail,html body .text-danger,html body .ck-fail{color:#D62741 !important;}


/* ============================================================================
   23 · DEEP AUDIT PASS
   Rules below were found by scanning the two legacy stylesheets for every
   declaration that still forced a dark or gold colour. Each is answered with a
   selector of equal-or-higher weight, so nothing is left to cascade luck.

   Rule of the palette:
     · white / light surface  -> #F4F7F9 text, #7FA6A3 secondary
     · blue / dark surface    -> #073F42 text, rgba(255,255,255,.78) secondary
   ========================================================================== */

/* ---- 23a · Account page: Member Center icon tiles ---- */
html body #mainDashboard .ck-icp,
html body .ck-acct .ck-icp,
html body .ck-gitem .ck-icp{
  background:linear-gradient(140deg,#2ABBA5 0%,#08777A 58%,#0A9290 100%) !important;
  border:0 !important;border-radius:15px !important;
  box-shadow:0 5px 12px rgba(8,119,122,.28) !important;
}
/* the glyph inside every tile — nth-child variants included, they outranked
   the plain selector and kept one tile dark/cream */
html body #mainDashboard .ck-icp i,
html body .ck-acct .ck-icp i,
html body .ck-gitem .ck-icp i,
html body .ck-gitem:nth-child(1) .ck-icp i,
html body .ck-gitem:nth-child(2) .ck-icp i,
html body .ck-gitem:nth-child(3) .ck-icp i,
html body .ck-gitem:nth-child(4) .ck-icp i,
html body .ck-gitem:nth-child(5) .ck-icp i,
html body .ck-gitem:nth-child(6) .ck-icp i,
html body .ck-gitem:nth-child(7) .ck-icp i,
html body .ck-gitem:nth-child(8) .ck-icp i,
html body .ck-gitem:nth-child(9) .ck-icp i,
html body .ck-gitem:nth-child(10) .ck-icp i,
html body .ck-gitem:nth-child(11) .ck-icp i,
html body .ck-gitem:nth-child(12) .ck-icp i,
html body .ck-gitem .ck-icp svg,
html body .ck-gitem .ck-icp svg *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  fill:#F4F7F9 !important;
  text-shadow:none !important;
}
html body #mainDashboard .ck-ic-label,
html body .ck-acct .ck-ic-label,
html body .ck-gitem .ck-ic-label{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .ck-divider span{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background:#073F42 !important;
}
html body .ck-count-badge{
  background:#2ABBA5 !important;color:#F4F7F9 !important;
  border:2px solid #073F42 !important;box-shadow:none !important;
}

/* ---- 23b · profile card internals that were forced dark ---- */
html body .ck-ribbon,
html body .ck-ribbon i,html body .ck-ribbon b,
html body .ck-vip-badge span,
html body .ck-balance-actions i,
html body .ck-action-icon circle,
html body .ck-action-icon rect[x],
html body .ck-sc-chev,html body .ck-sc-pen{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  fill:#F4F7F9 !important;
}
html body .ck-link-blue,html body .ck-center-link{
  color:#08777A !important;-webkit-text-fill-color:#08777A !important;
}

/* ---- 23c · deposit / payment pages ---- */
html body #dep-promo-section *,
html body #dep-promo-bonus-amt{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body #page-deposit .dep-input-wrap input,
html body .dp-trx-input,html body .dp-trx-input.filled,
html body .pay-input-premium,html body .pay-input-premium input{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background:#02383B !important;
}
html body .dp-pay-badge,
html body .dp-lang-toggle .active,
html body .dp-bottom-alert-title,
html body .dp-label,html body .pay-label,
html body .dep-badge-text,html body .dep-subtitle em,
html body .pay-body-white,html body .white-bg,
html body .app-com-text,html body .modal-title{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .dp-pay-badge,html body .dp-lang-toggle .active{
  background:#0A4B4D !important;border:1px solid #0E4F50 !important;
}
html body .pay-copy-box i,html body .checkmark i,
html body #authWrapper .checkmark i{color:#08777A !important;}
html body #authWrapper .checkmark{
  background:#0A4B4D !important;border-color:#08777A !important;
}

/* ---- 23d · support / security / records pages ---- */
html body .sup-chip i,html body .sup-ct-ic,html body .sup-faq-q i,
html body .sup-topic i,html body .sup-stars i,
html body .ck-sc-title,html body .ck-sc-level,html body .ck-sc-ok,
html body .ck-rec-title,html body .ck-empty-text,html body .ck-privacy-title,
html body .ck-cal-top,html body .ck-cal-date,html body .ck-type-item,
html body .ck-rebate-tab,html body .ck-fi,html body .pill-icon,
html body th,html body .name-display{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .ck-rebate-tab.active{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background:linear-gradient(135deg,#2ABBA5,#08777A) !important;
}
html body .ck-rec-amt.dep{color:#0E8F5A !important;}
html body .ck-rec-amt.wd{color:#D62741 !important;}
html body .ck-st-success{color:#0E8F5A !important;}
html body .status-pending,html body .st-pending{color:#B26A00 !important;}

/* ---- 23e · headers that kept dark or gold titles ---- */
html body .acc-page-header,
html body .acc-page-header .header-title,
html body .dep-header,html body .dep-header .header-title,
html body .ck-head,html body .ck-head-title{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background-image:none !important;
}
html body .acc-page-header,html body .dep-header{
  background:#073F42 !important;border-bottom:1px solid #135A5A !important;
}

/* ---- 23f · misc gold leftovers ---- */
html body .game-platform-item.active span{color:#08777A !important;}
html body .game-platform-item.active::after{background:#08777A !important;}
html body .game-platform-thumb{border-color:#0E4F50 !important;}
html body .global-loader .loader-text{color:#F4F7F9 !important;}
html body .h-action-btn.wd-red i{color:#08777A !important;}
html body .home-header-small .hamburger,
html body .home-header-small .hamburger i{color:#08777A !important;}
html body #app-download-popup .app-dl-text h4{color:#F4F7F9 !important;}
html body .popup-icon-container .popup-icon{color:#08777A !important;}
html body .vip-badge.vip-4,html body .vip-badge.vip-4 i,
html body .vip-badge.vip-5,html body .vip-badge.vip-5 i{
  color:#F4F7F9 !important;background:linear-gradient(135deg,#2ABBA5,#0A9290) !important;
}
html body ::selection{background:#2ABBA5 !important;color:#F4F7F9 !important;}

/* ---- 23g · final safety net ----
   Any element still resolving to a dark colour through an inline attribute is
   caught here. Elements sitting on a blue surface are handled in the second
   block so they end up white rather than dark blue.                       */
html body [style*="color:#0"],html body [style*="color: #0"],
html body [style*="color:#1"],html body [style*="color: #1"],
html body [style*="color:#2"],html body [style*="color: #2"],
html body [style*="color:#3"],html body [style*="color: #3"],
html body [style*="color:#4"],html body [style*="color: #4"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body nav.bottom-nav [style*="color:#"],
html body .ck-profile [style*="color:#"],
html body .side-menu-drawer [style*="color:#"],
html body .vip-hero [style*="color:#"],
html body .vip-promo [style*="color:#"],
html body .zx-splash [style*="color:#"],
html body #page-login [style*="color:#"],
html body #page-register [style*="color:#"],
html body #page-forgot [style*="color:#"],
html body .toast-premium [style*="color:#"],
html body .ck-icp [style*="color:#"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}


/* ============================================================================
   24 · PERFORMANCE PASS
   The stack shipped with 253 @keyframes rules and 54 backdrop-filter surfaces;
   most were still running every second even after this rebrand. Below we shut
   them down globally on top of the existing rules so scroll is smooth and CPU
   sits idle when the user is not touching the screen.
   ========================================================================== */

/* ---- 24a · stop the always-on pulse/shine/glow animations ---- */
html body .auth-btn,html body .h-action-btn,html body .btn-primary,
html body .primary-btn,html body .guest-auth-btn,html body .ck-btn,
html body .dep-submit,html body .lw-submit,html body .vip-hero-cta,
html body .vip-promo .mini,html body .neon-gold-header,
html body .home-header-small,html body .promo-header,
html body .dep-header,html body .ck-head,
html body .ck-count-badge,html body .ck-vip-badge,html body .ck-vip-badge::after,
html body .floating-social .social-btn,html body .bg-telegram,
html body .zx-live-ticker,html body .zx-lt-badge,
html body .zx-lt-dot,html body .banner-shine-layer,
html body .zx-logo-shine,html body .zx-logo-shine img,
html body [class*="pulse"],html body [class*="shine"],
html body [class*="glow"],html body [class*="float"]{
  animation:none !important;-webkit-animation:none !important;
}

/* keep purposeful spinners running */
html body .spinner,
html body .loader-ring::before,
html body .ck-balance-actions .spinning{animation-play-state:running !important;}

/* ---- 24b · lighten the glass layer ---- */
html body .home-header-small,html body .promo-header,
html body .dep-header,html body .ck-head,html body .acc-page-header,
html body .neon-gold-header,html body .auth-header{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body .card,html body .ck-form,html body .ck-fi,html body .ck-sc-card,
html body .ck-sc-item,html body .sup-card,html body .sup-faq-item,
html body .dep-promo-card,html body .pay-input-premium,
html body #page-deposit .dep-method-card,html body #page-deposit .dep-channel,
html body .dp-pay-container,html body .withdraw-wallet-card,
html body .wg-item,html body .modal-overlay,html body .popup-box,
html body .avatar-modal,html body .ck-bottom-sheet{
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}

/* ---- 24c · GPU hints so scroll doesn't repaint the whole tree ---- */
html body .view-page{contain:content;content-visibility:auto;contain-intrinsic-size:auto 900px;}
html body .home-banner-slider,html body .vip-hero,html body .vip-promo,
html body .ck-profile,html body .game-platform-scroll,
html body nav.bottom-nav,html body .side-menu-drawer{will-change:auto;}

/* ---- 24d · pause everything when the tab is hidden ---- */
@media (prefers-reduced-motion:reduce){
  html body *,html body *::before,html body *::after{
    animation:none !important;-webkit-animation:none !important;
    transition:none !important;-webkit-transition:none !important;
  }
}

/* ---- 24e · never render broken rox-x.com placeholders ---- */
html body img[src*="rox-x.com"],
html body img[src="https://ck111vip.com/wps_750x253++_20251022205438.webp"]{
  display:none !important;
}


/* ============================================================================
   25 · MY ACCOUNT — profile card background artwork + text contrast fix
   ========================================================================== */

/* card gets the VIP medal watermark on the right, above the blue gradient */
html body #mainDashboard .ck-profile,
html body .ck-acct .ck-profile{
  position:relative !important;
  background:
    url('img/vip-medal-bg.png') no-repeat right 14px center / auto 78%,
    linear-gradient(135deg,#2ABBA5 0%,#08777A 55%,#0A9290 100%) !important;
  overflow:hidden !important;
}
/* a soft blue veil so the medal reads as watermark, not a sticker */
html body #mainDashboard .ck-profile::after,
html body .ck-acct .ck-profile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(42,187,165,.30) 0%,rgba(42,187,165,0) 45%,rgba(2,56,59,.35) 100%);
  z-index:0;
}
/* everything inside the card stays above the veil */
html body #mainDashboard .ck-profile > *,
html body .ck-acct .ck-profile > *{position:relative;z-index:1;}

/* the dark member name / nickname / joined line were unreadable on blue */
html body #mainDashboard .ck-username,
html body #mainDashboard .ck-username *,
html body .ck-acct .ck-username,
html body .ck-acct .ck-username *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  text-shadow:0 1px 4px rgba(0,45,48,.4) !important;
}
html body #mainDashboard .ck-nickname,
html body #mainDashboard .ck-nickname *,
html body #mainDashboard .ck-joined,
html body #mainDashboard .ck-joined *,
html body .ck-acct .ck-nickname,html body .ck-acct .ck-nickname *,
html body .ck-acct .ck-joined,html body .ck-acct .ck-joined *{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
  text-shadow:0 1px 3px rgba(0,45,48,.35) !important;
}
html body #mainDashboard .ck-nickname i,
html body .ck-acct .ck-nickname i{color:#F4F7F9 !important;}

/* the UID pill sits on the right where the medal is — pull it left a bit */
html body #mainDashboard .ck-ribbon,
html body .ck-acct .ck-ribbon{
  background:rgba(0,45,48,.55) !important;
  backdrop-filter:blur(4px) !important;-webkit-backdrop-filter:blur(4px) !important;
  border:1px solid rgba(255,255,255,.24) !important;
}

/* Deposit / Withdraw / My Cards buttons stay pill-shaped and legible */
html body #mainDashboard .ck-action,
html body .ck-acct .ck-action{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.40) !important;
  color:#F4F7F9 !important;
  backdrop-filter:blur(3px) !important;-webkit-backdrop-filter:blur(3px) !important;
}
html body #mainDashboard .ck-action *,
html body .ck-acct .ck-action *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}


/* ============================================================================
   26 · IMAGE-ONLY BANNERS (hero + promo pair)
   The old designed hero and text-overlay promo cards are replaced by the
   three artwork PNGs the user supplied. All copy lives inside the images.
   ========================================================================== */

/* neutralise the old CSS from sections 7 & 11 */
html body .vip-hero,html body .vip-promos{display:none !important;}

/* ---- 26a · hero ---- */
html body .vip-hero-img{
  display:block;width:calc(100% - 26px);
  margin:12px 13px 0;padding:0;border:0;background:none;
  border-radius:22px;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 26px rgba(2,56,59,.22);
  -webkit-tap-highlight-color:transparent;
}
html body .vip-hero-img img{
  display:block;width:100%;height:auto;
  border-radius:22px;
}
html body .vip-hero-img:active{transform:scale(.995);}

/* ---- 26b · promo pair ---- */
html body .vip-promos-img{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:14px 13px;
}
@media (max-width:379px){html body .vip-promos-img{grid-template-columns:1fr;}}

html body .vip-promo-img{
  display:block;padding:0;border:0;background:none;cursor:pointer;
  border-radius:18px;overflow:hidden;
  box-shadow:0 8px 22px rgba(2,56,59,.20);
  -webkit-tap-highlight-color:transparent;
}
html body .vip-promo-img img{
  display:block;width:100%;height:auto;border-radius:18px;
}
html body .vip-promo-img:active{transform:scale(.985);}


/* ============================================================================
   27 · MY ACCOUNT — cream / beige theme (per BD999 reference)
   Overrides section 20b, 23a and 25 for the account page only.
   Everywhere else in the app stays on the blue system.
   ========================================================================== */

/* page background */
html body #mainDashboard,
html body .ck-acct{
  background:#F6EFE4 !important;
}
html body #mainDashboard .ck-head-bg,
html body .ck-acct .ck-head-bg{
  background:linear-gradient(180deg,#1F1712 0%,#2A1E15 100%) !important;
  border-bottom:0 !important;
}
html body #mainDashboard .ck-head,
html body #mainDashboard .ck-head *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body #mainDashboard .ck-head i,
html body #mainDashboard .ck-head svg{color:#F4F7F9 !important;fill:#F4F7F9 !important;}

/* ---- profile card: soft beige, dark text, medal watermark on the right ---- */
html body #mainDashboard .ck-profile,
html body .ck-acct .ck-profile{
  background:
    url('img/vip-medal-bg.png') no-repeat right 18px center / auto 80%,
    linear-gradient(180deg,#0A4B4D 0%,#E4D6BE 100%) !important;
  border:1px solid #E1D3B7 !important;
  box-shadow:0 8px 22px rgba(63,45,20,.10) !important;
  overflow:hidden !important;
}
html body #mainDashboard .ck-profile::after,
html body .ck-acct .ck-profile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(239,229,210,0) 40%,rgba(239,229,210,.35) 100%);
  z-index:0;
}

/* text inside the card */
html body #mainDashboard .ck-username,
html body #mainDashboard .ck-username *,
html body .ck-acct .ck-username,
html body .ck-acct .ck-username *{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
  text-shadow:none !important;
}
html body #mainDashboard .ck-nickname,
html body #mainDashboard .ck-nickname *,
html body #mainDashboard .ck-joined,
html body #mainDashboard .ck-joined *,
html body .ck-acct .ck-nickname,html body .ck-acct .ck-nickname *,
html body .ck-acct .ck-joined,html body .ck-acct .ck-joined *{
  color:#7A5F42 !important;-webkit-text-fill-color:#7A5F42 !important;
  text-shadow:none !important;
}
html body #mainDashboard .ck-balance,
html body .ck-acct .ck-balance{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
}
html body #mainDashboard .ck-balance-actions i,
html body .ck-acct .ck-balance-actions i{color:#7A5F42 !important;}

/* VIP badge — dark pill on the beige */
html body #mainDashboard .ck-vip-badge,
html body .ck-acct .ck-vip-badge{
  background:linear-gradient(135deg,#3A2A1C 0%,#1F1712 100%) !important;
  color:#F4F7F9 !important;border:0 !important;box-shadow:none !important;
}
html body #mainDashboard .ck-vip-badge span,
html body .ck-acct .ck-vip-badge span{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* UID ribbon top-right → red "Verified" style tag */
html body #mainDashboard .ck-ribbon,
html body .ck-acct .ck-ribbon{
  background:linear-gradient(135deg,#E64453 0%,#C4283A 100%) !important;
  color:#F4F7F9 !important;border:0 !important;backdrop-filter:none !important;
  border-radius:0 0 0 14px !important;
  padding:8px 14px !important;
  box-shadow:0 4px 10px rgba(196,40,58,.28) !important;
}
html body #mainDashboard .ck-ribbon *,
html body .ck-acct .ck-ribbon *{color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;}

/* avatar frame — subtle gold border */
html body #mainDashboard .ck-avatar-wrap,
html body #mainDashboard .ck-avatar,
html body .ck-acct .ck-avatar-wrap,
html body .ck-acct .ck-avatar{
  border-color:#C9A85E !important;
}

/* Deposit / Withdraw / My Cards pill buttons — white on beige */
html body #mainDashboard .ck-action,
html body .ck-acct .ck-action{
  background:#073F42 !important;
  border:1px solid #E1D3B7 !important;
  color:#2A1E15 !important;
  box-shadow:0 3px 8px rgba(63,45,20,.08) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
html body #mainDashboard .ck-action *,
html body .ck-acct .ck-action *{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
}

/* ---- Member Center divider ---- */
html body #mainDashboard .ck-divider span,
html body .ck-acct .ck-divider span{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
  background:#F1E7D3 !important;border:1px solid #E1D3B7 !important;
}

/* ---- Member Center tiles: soft beige circles with dark glyphs ---- */
html body #mainDashboard .ck-icp,
html body .ck-acct .ck-icp,
html body .ck-gitem .ck-icp{
  background:linear-gradient(180deg,#F3E7CE 0%,#E7D6B4 100%) !important;
  border:1px solid #E1D3B7 !important;
  border-radius:50% !important;
  box-shadow:0 3px 8px rgba(63,45,20,.10),inset 0 -2px 4px rgba(63,45,20,.06) !important;
  width:56px !important;height:56px !important;
}
html body #mainDashboard .ck-icp i,
html body .ck-acct .ck-icp i,
html body .ck-gitem .ck-icp i,
html body .ck-gitem:nth-child(1) .ck-icp i,
html body .ck-gitem:nth-child(2) .ck-icp i,
html body .ck-gitem:nth-child(3) .ck-icp i,
html body .ck-gitem:nth-child(4) .ck-icp i,
html body .ck-gitem:nth-child(5) .ck-icp i,
html body .ck-gitem:nth-child(6) .ck-icp i,
html body .ck-gitem:nth-child(7) .ck-icp i,
html body .ck-gitem:nth-child(8) .ck-icp i,
html body .ck-gitem:nth-child(9) .ck-icp i,
html body .ck-gitem:nth-child(10) .ck-icp i,
html body .ck-gitem:nth-child(11) .ck-icp i,
html body .ck-gitem:nth-child(12) .ck-icp i{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
  fill:#2A1E15 !important;font-size:22px !important;text-shadow:none !important;
}
html body #mainDashboard .ck-ic-label,
html body .ck-acct .ck-ic-label,
html body .ck-gitem .ck-ic-label{
  color:#2A1E15 !important;-webkit-text-fill-color:#2A1E15 !important;
  font-weight:500 !important;
}

/* red count badge on tiles stays red — reads well on beige */
html body #mainDashboard .ck-count-badge,
html body .ck-acct .ck-count-badge{
  background:#E64453 !important;color:#F4F7F9 !important;
  border:2px solid #073F42 !important;box-shadow:none !important;
}


/* ============================================================================
   28 · SPLASH SCREEN — kill maroon + purple gem, use new blue logo
   ========================================================================== */
html body #splashFrame,
html body .zx-splash{
  background:linear-gradient(160deg,#066B6E 0%,#002D30 55%,#00181A 100%) !important;
  background-color:#002D30 !important;
}
html body #splashFrame *{color:#F4F7F9 !important;text-shadow:none !important;}
/* the loading text under the logo — hide the old maroon-era placeholder */
html body .zx-splash-txt,html body #splashFrame .zx-splash-txt{display:none !important;}
/* progress bar in brand colours */
html body .zx-splash-bar{
  width:180px !important;height:3px !important;border-radius:3px !important;
  background:rgba(255,255,255,.20) !important;overflow:hidden !important;
  margin-top:6px !important;
}
html body .zx-splash-bar i{
  display:block !important;height:100% !important;width:40% !important;
  background:linear-gradient(90deg,transparent,#073F42,transparent) !important;
  animation:vipSplashBar 1.15s linear infinite !important;
  transform:none !important;
}
@keyframes vipSplashBar{0%{margin-left:-45%}100%{margin-left:105%}}

/* the new logo — no filter, no glow, keeps its native colours */
html body .zx-splash-logo,
html body .home-header-logo,
html body .auth-logo-img,
html body .brand img{
  filter:none !important;-webkit-filter:none !important;
  background:none !important;box-shadow:none !important;
  animation:none !important;
}

/* header logo — really large now, fills most of the header card height */
html body .home-header-small{
  min-height:78px !important;
  padding:6px 12px !important;
  align-items:center !important;
}
html body .home-header-small .home-header-logo,
html body .home-header-small .zx-logo-shine img,
html body .home-header-small .zx-logo-shine{
  height:66px !important;width:auto !important;max-width:240px !important;
  max-height:66px !important;
  object-fit:contain !important;
  margin:0 !important;padding:0 !important;
}
/* the shine wrapper had padding/margin defaults — flatten it */
html body .home-header-small .zx-logo-shine{
  display:inline-flex !important;align-items:center !important;
  background:none !important;box-shadow:none !important;
  padding:0 !important;margin:0 !important;
}
html body .brand img{
  height:52px !important;width:auto !important;max-width:200px !important;
  object-fit:contain !important;
}
html body .top,html body header .top-in{padding:6px 12px !important;}

/* ============================================================================
   29 · DEEP TEXT-CONTRAST SWEEP
   Wherever the app puts light text on a light surface or dark text on a dark
   surface, we make the text follow the surface instead of the token.
   ========================================================================== */

/* white text that ended up on white surfaces */
html body .card [style*="color:#F4F7F9"],
html body .card [style*="color: #F4F7F9"],
html body .card [style*="color:#F4F7F9"],
html body .card [style*="color: #F4F7F9"],
html body .card [style*="color:white"],
html body .zx-section [style*="color:#F4F7F9"],
html body .zx-section [style*="color:white"],
html body .game-platform-section [style*="color:#F4F7F9"],
html body .ck-form [style*="color:#F4F7F9"],
html body .ck-fi [style*="color:#F4F7F9"],
html body .pay-body-white [style*="color:#F4F7F9"],
html body .white-bg [style*="color:#F4F7F9"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* explicit dark-on-dark leftovers inside blue surfaces */
html body nav.bottom-nav *[style*="color:#F4F7F9"],
html body .vip-hero-img *[style*="color:#F4F7F9"],
html body .side-menu-drawer *[style*="color:#F4F7F9"],
html body #splashFrame *[style*="color:#"],
html body .toast-premium *[style*="color:#"]{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* input fields — dark blue text on light input background */
html body input,html body textarea,html body select{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body input::placeholder,html body textarea::placeholder{
  color:#7FA6A3 !important;
}

/* auth pages are on blue — inputs go white text on translucent white */
html body #page-login input,html body #page-register input,html body #page-forgot input,
html body #page-login textarea,html body #page-register textarea,html body #page-forgot textarea{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background:rgba(255,255,255,.12) !important;
}
html body #page-login input::placeholder,html body #page-register input::placeholder,
html body #page-forgot input::placeholder{color:rgba(255,255,255,.60) !important;}

/* game platform section titles */
html body .game-platform-section .section-title,
html body .game-grid-wrapper .section-title,
html body .zx-section .section-title,
html body .zx-section h3,html body .zx-section h4{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  background:none !important;
}

/* modal / popup bodies */
html body .modal-overlay .popup-box,
html body .popup-overlay .popup-box,
html body .avatar-modal{
  background:#073F42 !important;color:#F4F7F9 !important;
}
html body .modal-overlay .popup-box *,
html body .popup-overlay .popup-box *,
html body .avatar-modal *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .modal-overlay .btn-primary,
html body .modal-overlay .btn-primary *,
html body .popup-overlay .btn-primary,
html body .popup-overlay .btn-primary *,
html body .avatar-modal .btn-primary,
html body .avatar-modal .btn-primary *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}

/* side menu items are on dark blue — keep them white */
html body .side-menu-drawer,
html body .side-menu-drawer *{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .side-menu-drawer .sm-text,
html body .side-menu-drawer .sm-sub{color:rgba(255,255,255,.85) !important;}

/* live ticker — was gold-on-white or white-on-white in a few skins */
html body .zx-live-ticker,
html body .zx-live-ticker .zx-lt-track,
html body .zx-live-ticker .zx-lt-track *{color:#F4F7F9 !important;}
html body .zx-live-ticker .zx-lt-badge{color:#F4F7F9 !important;background:#08777A !important;}


/* ============================================================================
   31 · POST-SPLASH LOADING SCREEN
   Some slow devices show a blank/maroon frame between splash and the app
   painting. Hide the amber progress bar and paint the frame in brand blue.
   ========================================================================== */
html body #splashFrame,
html body #splashFrame.hide,
html body .zx-splash{
  background:linear-gradient(160deg,#066B6E 0%,#002D30 55%,#00181A 100%) !important;
  background-color:#002D30 !important;
}
/* the amber horizontal line in the middle — remove it entirely */
html body #splashFrame .zx-splash-bar,
html body #splashFrame .zx-splash-bar i,
html body .zx-splash-bar,
html body .zx-splash-bar i{display:none !important;}

html body #splashFrame .zx-splash-inner{
  align-items:center !important;justify-content:center !important;
  gap:22px !important;
}

/* also cover the first paint before any style loads */
html body,html body .ambient-bg{background:#002D30 !important;}


/* ============================================================================
   32 · AUTH PAGES — clean rebuild (login / register / forgot)
   The previous white header strip + translucent glass card was picking up the
   maroon ambient tint. Solid brand blue everywhere, one card, no leaks.
   ========================================================================== */

/* solid blue floor, edge to edge */
html body #page-login,
html body #page-register,
html body #page-forgot{
  background:linear-gradient(180deg,#066B6E 0%,#002D30 60%,#00181A 100%) !important;
  background-color:#002D30 !important;
  min-height:100vh !important;
  padding:0 0 32px !important;
  position:relative !important;
  isolation:isolate !important;
}
html body #page-login::before,
html body #page-register::before,
html body #page-forgot::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#002D30;
}

/* header row — no more white strip, just a translucent back button */
html body #page-login .auth-header,
html body #page-register .auth-header,
html body #page-forgot .auth-header{
  background:transparent !important;
  padding:14px 20px 0 !important;margin:0 !important;
  box-shadow:none !important;border:0 !important;
  min-height:0 !important;
  display:flex !important;align-items:center !important;
}
html body #page-login .auth-header i,
html body #page-register .auth-header i,
html body #page-forgot .auth-header i{
  color:#F4F7F9 !important;font-size:20px !important;
  width:40px !important;height:40px !important;border-radius:12px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  text-shadow:none !important;
}

/* logo block */
html body #page-login .brand-logo,
html body #page-register .brand-logo,
html body #page-forgot .brand-logo{
  display:flex !important;justify-content:center !important;
  margin:22px 0 8px !important;
}
html body #page-login .auth-logo-img,
html body #page-register .auth-logo-img,
html body #page-forgot .auth-logo-img{
  width:clamp(220px,72vw,300px) !important;height:auto !important;
  filter:none !important;background:none !important;box-shadow:none !important;
  animation:none !important;
}
html body #page-login .zx-logo-shine,
html body #page-register .zx-logo-shine,
html body #page-forgot .zx-logo-shine{
  background:none !important;box-shadow:none !important;
  animation:none !important;padding:0 !important;
}

/* title */
html body #page-login .auth-title,
html body #page-register .auth-title,
html body #page-forgot .auth-title{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  font-size:24px !important;font-weight:800 !important;
  margin:6px 0 20px !important;text-align:center !important;
  text-shadow:none !important;background:none !important;
}

/* form container — one solid card, no glass */
html body #page-login .auth-form,
html body #page-register .auth-form,
html body #page-forgot .auth-form{
  margin:0 18px !important;padding:22px 18px 20px !important;
  background:#0A9290 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:20px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
  gap:14px !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}

/* input rows — light, clearly separate from card */
html body #page-login .input-group-auth,
html body #page-register .input-group-auth,
html body #page-forgot .input-group-auth{
  background:#073F42 !important;
  border:1px solid #073F42 !important;
  border-radius:14px !important;
  padding:2px 16px !important;
  min-height:52px !important;
  box-shadow:0 3px 8px rgba(0,0,0,.10) !important;
}
html body #page-login .input-group-auth:focus-within,
html body #page-register .input-group-auth:focus-within,
html body #page-forgot .input-group-auth:focus-within{
  border-color:#B8C9C7 !important;
  box-shadow:0 0 0 3px rgba(184,201,199,.30) !important;
}
html body #page-login .input-group-auth input,
html body #page-register .input-group-auth input,
html body #page-forgot .input-group-auth input{
  background:transparent !important;
  color:#002D30 !important;-webkit-text-fill-color:#002D30 !important;
  font-size:15px !important;font-weight:600 !important;
  padding:14px 0 !important;letter-spacing:.1px !important;
  border:0 !important;
}
html body #page-login .input-group-auth input::placeholder,
html body #page-register .input-group-auth input::placeholder,
html body #page-forgot .input-group-auth input::placeholder{
  color:#7FA6A3 !important;font-weight:500 !important;
}

/* +880 prefix — flag + number, dark blue on the white input */
html body #page-login .phone-prefix,
html body #page-register .phone-prefix,
html body #page-forgot .phone-prefix{
  color:#002D30 !important;font-weight:700 !important;font-size:15px !important;
  border-right:1px solid #0E4F50 !important;
  padding-right:12px !important;margin-right:12px !important;
  gap:6px !important;
}

/* the inline SVG lock icons ship with #2ABBA5 fills — keep them blue */
html body #page-login .auth-svg-icon,
html body #page-register .auth-svg-icon,
html body #page-forgot .auth-svg-icon{
  width:28px !important;height:28px !important;margin-right:10px !important;
  flex-shrink:0 !important;
}
html body #page-login .input-icon,
html body #page-register .input-icon,
html body #page-forgot .input-icon{
  color:#08777A !important;font-size:16px !important;
  text-shadow:none !important;margin-right:10px !important;
}
/* show/hide password eye icon */
html body #page-login .toggle-pass,html body #page-login .pass-eye,
html body #page-register .toggle-pass,html body #page-register .pass-eye,
html body #page-forgot .toggle-pass,html body #page-forgot .pass-eye,
html body #page-login .input-group-auth > i:last-child,
html body #page-register .input-group-auth > i:last-child,
html body #page-forgot .input-group-auth > i:last-child{
  color:#08777A !important;font-size:18px !important;
  text-shadow:none !important;
}

/* Remember me / terms row */
html body #page-login .auth-check,html body #page-register .auth-check,
html body #page-login .terms-row,html body #page-register .terms-row{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  font-size:13px !important;font-weight:500 !important;
  display:flex !important;align-items:center !important;gap:10px !important;
  margin:2px 0 !important;
}
html body #page-login .auth-check i,html body #page-register .auth-check i,
html body #page-login .terms-row i,html body #page-register .terms-row i,
html body #page-login .checkbox-icon,html body #page-register .checkbox-icon{
  color:#F4F7F9 !important;background:#08777A !important;
  width:22px !important;height:22px !important;border-radius:6px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border:2px solid #073F42 !important;font-size:11px !important;
}
html body #page-login .auth-check a,html body #page-register .auth-check a,
html body #page-login .terms-row a,html body #page-register .terms-row a{
  color:#B8C9C7 !important;font-weight:700 !important;text-decoration:underline !important;
}
html body #page-login .forgot-link-wrap,html body #page-login .forgot-row{
  display:flex !important;justify-content:flex-end !important;
  margin:-2px 2px 0 !important;
}
html body #page-login .forgot-link,
html body #page-register .forgot-link,
html body #page-forgot .forgot-link{
  color:#B8C9C7 !important;-webkit-text-fill-color:#B8C9C7 !important;
  font-weight:700 !important;font-size:13px !important;
  text-decoration:none !important;
}

/* primary submit button */
html body #page-login .auth-btn,
html body #page-register .auth-btn,
html body #page-forgot .auth-btn{
  width:100% !important;
  background:linear-gradient(135deg,#2ABBA5 0%,#2ABBA5 55%,#08777A 100%) !important;
  border:0 !important;border-radius:14px !important;
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
  font-size:16px !important;font-weight:800 !important;
  padding:16px 0 !important;letter-spacing:.4px !important;
  box-shadow:0 10px 24px rgba(42,187,165,.42) !important;
  animation:none !important;margin-top:8px !important;
  min-height:52px !important;
}
html body #page-login .auth-btn i,
html body #page-register .auth-btn i,
html body #page-forgot .auth-btn i{
  color:#F4F7F9 !important;
}
html body #page-login .auth-btn:active,
html body #page-register .auth-btn:active,
html body #page-forgot .auth-btn:active{
  transform:translateY(1px) scale(.99) !important;
  box-shadow:0 5px 12px rgba(42,187,165,.4) !important;
}

/* "OR" divider */
html body #page-login .auth-or,html body #page-register .auth-or,
html body #page-login .or-divider,html body #page-register .or-divider,
html body #page-login .divider-text,html body #page-register .divider-text{
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;margin:22px 22px 12px !important;
  position:relative !important;font-size:13px !important;
  display:flex !important;align-items:center !important;gap:12px !important;
}
html body #page-login .auth-or::before,html body #page-login .auth-or::after,
html body #page-register .auth-or::before,html body #page-register .auth-or::after,
html body #page-login .or-divider::before,html body #page-login .or-divider::after,
html body #page-register .or-divider::before,html body #page-register .or-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.20) !important;
}

/* Google button (currently the white empty circle) */
html body #page-login .g_id_signin,html body #page-register .g_id_signin,
html body #page-login .google-btn,html body #page-register .google-btn,
html body #page-login .social-btn,html body #page-register .social-btn{
  display:flex !important;justify-content:center !important;
  margin:8px auto 14px !important;
}
html body #page-login .g_id_signin div[role="button"],
html body #page-register .g_id_signin div[role="button"]{
  background:#073F42 !important;color:#002D30 !important;
  border-radius:14px !important;box-shadow:0 6px 14px rgba(0,0,0,.15) !important;
}

/* bottom switch link ("অথবা একাউন্ট না থাকলে" / "ইতিমধ্যে একাউন্ট আছে?") */
html body #page-login .auth-footer,html body #page-register .auth-footer,
html body #page-forgot .auth-footer,
html body #page-login .auth-switch,html body #page-register .auth-switch,
html body #page-forgot .auth-switch,
html body #page-login .switch-line,html body #page-register .switch-line{
  color:rgba(255,255,255,.75) !important;-webkit-text-fill-color:rgba(255,255,255,.75) !important;
  text-align:center !important;padding:8px 22px 0 !important;
  font-size:13.5px !important;font-weight:500 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:12px !important;
}
html body #page-login .auth-footer::before,html body #page-login .auth-footer::after,
html body #page-register .auth-footer::before,html body #page-register .auth-footer::after,
html body #page-login .auth-switch::before,html body #page-login .auth-switch::after,
html body #page-register .auth-switch::before,html body #page-register .auth-switch::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.20) !important;
}

/* the secondary "open account" / "লগইন" pill at the very bottom */
html body #page-login > .auth-btn:last-child,
html body #page-register > .auth-btn:last-child,
html body #page-login .auth-btn.auth-secondary,
html body #page-register .auth-btn.auth-secondary{
  margin:12px 18px 0 !important;width:calc(100% - 36px) !important;
}

/* ============================================================
   REWARD POPUP CLOSE (✕) — platform-matched blue+gold, instant
   Applies to both the Treasure popup and the Golden-Egg popup.
   ============================================================ */
html body #closeBottom.ck-tr-close-bottom,
html body #depositCloseBottom.ck-egg-close-bottom{
  width:40px !important;height:40px !important;
  margin-top:22px !important;
  background:radial-gradient(circle at 50% 32%,#2ABBA5 0%,#08777A 52%,#002D30 100%) !important;
  border:1.6px solid rgba(255,210,74,.9) !important;      /* gold ring, matches ribbons/eggs */
  border-radius:50% !important;
  color:#F4F7F9 !important;                                 /* crisp white ✕ */
  font-size:18px !important;font-weight:700 !important;line-height:1 !important;
  box-shadow:
    0 6px 16px rgba(0,24,26,.55),
    0 0 0 4px rgba(42,187,165,.16),
    inset 0 1px 2px rgba(255,255,255,.45) !important;
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease !important;
  -webkit-tap-highlight-color:transparent;
}
html body #closeBottom.ck-tr-close-bottom:hover,
html body #depositCloseBottom.ck-egg-close-bottom:hover{
  filter:brightness(1.08) !important;
}
html body #closeBottom.ck-tr-close-bottom:active,
html body #depositCloseBottom.ck-egg-close-bottom:active{
  transform:scale(.85) !important;
  box-shadow:
    0 3px 9px rgba(0,24,26,.55),
    inset 0 1px 3px rgba(0,0,0,.35) !important;
}

/* ════════════════════════════════════════════════════════════════
   USER-REQUESTED FIXES
   1) App/home background → WHITE
   2) Home header → same blue as the footer, white text
   3) Account page header → blue like footer, readable white text
   4) Login / Register frame → buttons aligned to inputs, tidy card
   ════════════════════════════════════════════════════════════════ */

/* ---- 1 · APP BACKGROUND → WHITE (undo the earlier blue floor at ~L1729) ---- */
html body{background:#02383B !important;background-color:#02383B !important;}
html body .ambient-bg{
  background:
    radial-gradient(760px 420px at 12% -4%,#0A4B4D 0%,transparent 60%),
    radial-gradient(760px 420px at 92% 100%,#0A4B4D 0%,transparent 60%),
    #073F42 !important;
}

/* ---- 2 · HOME (PLATFORM) HEADER → footer blue + white content ---- */
html body .home-header-small{
  background:linear-gradient(180deg,#08777A 0%,#0A9290 60%,#002D30 100%) !important;
  background-color:#08777A !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border-bottom:0 !important;
  border-bottom-left-radius:22px !important;
  border-bottom-right-radius:22px !important;
  box-shadow:0 8px 24px rgba(2,56,59,.30) !important;
  color:#F4F7F9 !important;
}
html body .home-header-small .hamburger,
html body .home-header-small .header-title,
html body .home-header-small .balance-h,
html body .home-header-small .balance-h *,
html body .home-header-small #balanceTextHome{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body .home-header-small #toggleBalance{color:rgba(255,255,255,.85) !important;}
/* balance pill now sits on blue → translucent white for clean contrast */
html body .home-header-small .user-info-h{
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.30) !important;
}

/* ---- 3 · ACCOUNT PAGE HEADER → footer blue, readable white text ---- */
html body #mainDashboard .ck-head-bg,
html body .ck-acct .ck-head-bg{
  background:linear-gradient(180deg,#08777A 0%,#0A9290 60%,#002D30 100%) !important;
  border-bottom:0 !important;
}
html body #mainDashboard .ck-head,
html body #mainDashboard .ck-head *,
html body #mainDashboard .ck-head-title{
  color:#F4F7F9 !important;-webkit-text-fill-color:#F4F7F9 !important;
}
html body #mainDashboard .ck-head i,
html body #mainDashboard .ck-head svg{
  color:#F4F7F9 !important;fill:#F4F7F9 !important;
}

/* ---- 4 · AUTH FRAME — buttons align to input width, centered card ---- */
html body #page-login .auth-form,
html body #page-register .auth-form,
html body #page-forgot .auth-form{
  max-width:460px !important;
  margin-left:auto !important;margin-right:auto !important;
  padding:20px 18px !important;
  box-sizing:border-box !important;
}
/* action buttons inside the frame: full width, flush with the inputs above */
html body #page-login .auth-form .auth-btn,
html body #page-register .auth-form .auth-btn,
html body #page-forgot .auth-form .auth-btn{
  width:100% !important;
  margin:10px 0 0 !important;
  box-sizing:border-box !important;
}
/* the "or / already have an account" area + secondary button share the frame width */
html body #page-login .google-auth-wrap,
html body #page-register .google-auth-wrap,
html body #page-login .divider-text,
html body #page-register .divider-text{
  max-width:460px !important;margin-left:auto !important;margin-right:auto !important;
}
html body #page-login > .auth-btn,
html body #page-register > .auth-btn,
html body #page-login .auth-secondary,
html body #page-register .auth-secondary{
  width:calc(100% - 36px) !important;max-width:460px !important;
  margin-left:auto !important;margin-right:auto !important;
}