/* =============================================================
   HEADER BRIGHT / DARK TOGGLE
   Bright mode intentionally keeps the website's dark identity.
   It only lifts surfaces, borders and background illumination.
   It NEVER applies the legacy body.theme-light class, so media,
   banners and product images stay untouched.
   ============================================================= */
.header-bright-toggle{
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:1px solid rgba(98,137,208,.16);
  outline:none;
  padding:0;
  margin:0 2px 0 0;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(18,23,33,.98),rgba(10,14,22,.98));
  box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  overflow:hidden;
  color:#d9ebff;
  transition:transform .18s ease,border-color .2s ease,background .28s ease,box-shadow .28s ease;
}
.header-bright-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(108,172,255,.34);
  box-shadow:0 12px 22px rgba(0,0,0,.28),0 0 18px rgba(69,139,255,.1),inset 0 1px 0 rgba(255,255,255,.08);
}
.header-bright-toggle:active{transform:translateY(0) scale(.97)}
.header-bright-toggle:focus-visible{box-shadow:0 0 0 3px rgba(79,151,255,.2),0 8px 18px rgba(0,0,0,.22)}
.hbt-core{position:relative;width:27px;height:27px;display:block}
.hbt-aura{
  position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle,rgba(76,167,255,.3),rgba(76,167,255,0) 68%);
  filter:blur(1px);opacity:.86;animation:hbtPulse 3.2s ease-in-out infinite;
}
.hbt-stars i,.hbt-sun,.hbt-moon{position:absolute;display:block}
.hbt-stars i{width:3px;height:3px;border-radius:50%;background:#e2f1ff;box-shadow:0 0 8px rgba(217,239,255,.72);transition:opacity .22s ease,transform .25s ease;animation:hbtTwinkle 2.5s ease-in-out infinite}
.hbt-stars i:nth-child(1){top:2px;left:3px;animation-delay:.15s}
.hbt-stars i:nth-child(2){top:7px;right:0;animation-delay:.95s}
.hbt-stars i:nth-child(3){bottom:3px;left:1px;animation-delay:1.65s}
.hbt-moon{
  top:4px;left:6px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(145deg,#fbfdff,#a9ceff 86%);
  box-shadow:0 0 15px rgba(101,181,255,.28);
  opacity:1;transform:scale(1) rotate(0deg);
  transition:opacity .22s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.hbt-moon::after{content:"";position:absolute;top:0;left:7px;width:16px;height:16px;border-radius:50%;background:#0d121b;transition:background .28s ease}
.hbt-sun{
  right:5px;bottom:5px;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 34% 32%,#fff9bd,#ffd35b 56%,#ffb21f 100%);
  box-shadow:0 0 17px rgba(255,190,53,.44);
  opacity:0;transform:scale(.55) rotate(-70deg);
  transition:opacity .22s ease,transform .38s cubic-bezier(.2,.8,.2,1);
}
.hbt-sun::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,215,96,.9) 0 5deg,transparent 5deg 45deg);
  animation:hbtSpin 10s linear infinite;
}
.hbt-sun i{display:none}

html.ui-bright-mode .header-bright-toggle{
  background:linear-gradient(180deg,rgba(38,49,65,.98),rgba(26,36,50,.98));
  border-color:rgba(122,188,255,.36);
  box-shadow:0 9px 20px rgba(0,0,0,.2),0 0 20px rgba(91,171,255,.12),inset 0 1px 0 rgba(255,255,255,.1);
}
html.ui-bright-mode .hbt-aura{background:radial-gradient(circle,rgba(255,192,57,.28),rgba(255,192,57,0) 70%)}
html.ui-bright-mode .hbt-stars i{opacity:0;transform:scale(.45)}
html.ui-bright-mode .hbt-moon{opacity:0;transform:scale(.55) rotate(70deg)}
html.ui-bright-mode .hbt-sun{opacity:1;transform:scale(1) rotate(0deg)}
html.ui-bright-mode .hbt-moon::after{background:#263243}

@keyframes hbtPulse{0%,100%{transform:scale(.91);opacity:.62}50%{transform:scale(1.08);opacity:1}}
@keyframes hbtTwinkle{0%,100%{transform:scale(.75);opacity:.42}50%{transform:scale(1.28);opacity:1}}
@keyframes hbtSpin{to{transform:rotate(360deg)}}

/* =============================================================
   BRIGHT MODE — BRIGHTER DARK UI, NO OVERLAY / NO MEDIA FILTER
   ============================================================= */
html.ui-bright-mode body:not(.adm-body){
  --bg-dark:#111a25;
  --bg-sidebar:#131d28;
  --bg-card:#192432;
  --bg-card2:#202d3c;
  --text-primary:#f7fbff;
  --text-secondary:#d0dbe8;
  --text-muted:#8092a9;
  --border:rgba(127,176,225,.13);
  --border2:rgba(126,184,239,.23);
  background:#101923!important;
  color:#f4f8fc!important;
}

/* Remove any leftover class from older Light Mode versions. */
html.ui-bright-mode body:not(.adm-body).theme-light{
  background:#101923!important;
  color:#f4f8fc!important;
}

/* Background is brighter, but never placed over content. */
html.ui-bright-mode body:not(.adm-body) .site-layout,
html.ui-bright-mode body:not(.adm-body) .site-main,
html.ui-bright-mode body:not(.adm-body) .page-content{
  background-color:transparent!important;
}
html.ui-bright-mode body:not(.adm-body) .site-bg-overlay{
  background:
    radial-gradient(circle at 22% 16%,rgba(43,139,219,.13),transparent 35%),
    radial-gradient(circle at 82% 42%,rgba(92,78,201,.10),transparent 32%),
    linear-gradient(160deg,rgba(12,21,31,.66),rgba(13,25,37,.58) 50%,rgba(11,18,28,.68))!important;
  opacity:1!important;
}
html.ui-bright-mode body:not(.adm-body) .site-bg-gif,
html.ui-bright-mode body:not(.adm-body) .site-bg-img{
  /* Keep images themselves unchanged; only let background layers be more visible. */
  filter:none!important;
}

/* Hexagon layer becomes clearer instead of being washed out. */
html.ui-bright-mode body:not(.adm-body) :where(.hexagon-background,.site-bg-hexagons,.site-bg-seam){
  opacity:.62!important;
  filter:saturate(1.15) brightness(1.18)!important;
}

/* Main chrome */
html.ui-bright-mode body:not(.adm-body) .topbar{
  background:rgba(20,30,41,.96)!important;
  border-bottom-color:rgba(120,177,229,.15)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.22),inset 0 -1px 0 rgba(91,161,222,.05)!important;
}
html.ui-bright-mode body:not(.adm-body) .sidebar{
  background:rgba(18,28,39,.975)!important;
  border-right-color:rgba(120,177,229,.14)!important;
}
html.ui-bright-mode body:not(.adm-body) :where(.topbar-search-wrap,.topbar-user,.topbar-login-btn,.site-language-switcher,.topbar-user-drop){
  background:linear-gradient(180deg,rgba(31,43,57,.94),rgba(24,35,48,.96))!important;
  border-color:rgba(129,181,230,.16)!important;
  color:#eff7ff!important;
}
html.ui-bright-mode body:not(.adm-body) .topbar-search-wrap input{background:transparent!important;color:#f2f8ff!important}
html.ui-bright-mode body:not(.adm-body) .topbar-search-wrap input::placeholder{color:rgba(217,229,241,.58)!important}
html.ui-bright-mode body:not(.adm-body) .sb-item{color:#cdd8e5!important}
html.ui-bright-mode body:not(.adm-body) .sb-item:hover{background:rgba(78,128,176,.10)!important;color:#fff!important;border-color:rgba(117,176,229,.14)!important}
html.ui-bright-mode body:not(.adm-body) .sb-item.sb-active{background:linear-gradient(135deg,rgba(60,112,198,.20),rgba(77,68,170,.14))!important;color:#d9e9ff!important;border-color:rgba(106,159,240,.22)!important}

/* Cards / panels — selectively lifted. Do not touch img/video/canvas. */
html.ui-bright-mode body:not(.adm-body) :where(
  .hd-profile-card,.hd-desc-card,.hd-stat-card,
  .about-strip,.about-card,.tp3-wrap,.tp3-feat,
  .ann-section,.ann-card,.sp-section-header,.sp-card,
  .pd-panel,.pd-purchase-panel,.pd-pkg-card,.pd-section,
  .topup-section,.topup-pkg,.ord2-row-card,.hv3-stat,.hv3-filterbar,.hv3-panel,
  .wt-stat,.wt-card,.wt-qa,.rk-section,.rk-my-pos,
  .ct2-info-card,.ct2-form-card,.ct2-ch-card,
  .comment-form,.comment-item,.dl-card,.blog-card,
  .home-monthly-topup-card,.hct-item,.hct-shell,
  .tud-balance-card,.music-player-shell,.music-player-panel
){
  background:linear-gradient(145deg,rgba(29,41,54,.97),rgba(21,32,44,.98))!important;
  border-color:rgba(125,180,232,.15)!important;
  box-shadow:0 11px 25px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

/* Product and payment media must stay exactly visible. */
html.ui-bright-mode body:not(.adm-body) :where(img,picture,video,canvas,svg){
  filter:none;
}
html.ui-bright-mode body:not(.adm-body) :where(.sp-card-banner,.sp-card-banner img,.home-hero__image,.tp3-pay-img,.tp3-banner img,.pd-product-image,.fb-slide img){
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Stat custom shapes remain dark graphite but clearer. */
html.ui-bright-mode body:not(.adm-body) .hd-stat-fancy::before{
  background:linear-gradient(145deg,rgba(32,45,59,.99),rgba(21,32,43,.99))!important;
  box-shadow:0 11px 25px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.07)!important;
}

/* Text remains light/clear, avoiding the dark-text-on-dark bug. */
html.ui-bright-mode body:not(.adm-body) :where(h1,h2,h3,h4,h5,h6,.sp-title,.hd-stat-val,.hd-stat-rank-text,.tud-username,.pd-title,.section-title){
  color:#f7fbff!important;
}
html.ui-bright-mode body:not(.adm-body) :where(p,li,.sp-desc,.hd-stat-lbl,.tud-balance-mini,.hct-text small,.footer-note,.pd-short-desc,.pd-note-text){
  color:rgba(220,231,242,.78)!important;
}
html.ui-bright-mode body:not(.adm-body) :where(.sp-meta,.sp-kicker,.sb-section-label,.hd-stat-caption,.ft-link,.sp-stock-text){
  color:rgba(184,204,224,.67)!important;
}

/* Inputs */
html.ui-bright-mode body:not(.adm-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.ui-bright-mode body:not(.adm-body) select,
html.ui-bright-mode body:not(.adm-body) textarea{
  background:rgba(22,34,47,.94)!important;
  color:#f2f8ff!important;
  border-color:rgba(125,181,235,.18)!important;
}
html.ui-bright-mode body:not(.adm-body) input::placeholder,
html.ui-bright-mode body:not(.adm-body) textarea::placeholder{color:rgba(204,220,237,.48)!important}

/* Footer is lifted but keeps the artwork visible. */
html.ui-bright-mode body:not(.adm-body) :where(.site-cloud-footer,.site-cloud-footer__shell){
  background:linear-gradient(180deg,rgba(28,39,53,.95),rgba(19,29,41,.97))!important;
  border-color:rgba(125,180,232,.13)!important;
}
html.ui-bright-mode body:not(.adm-body) .site-cloud-footer img{filter:none!important;opacity:1!important}

/* Smooth switch, without animating images. */
body.ui-theme-switching:not(.adm-body),
body.ui-theme-switching:not(.adm-body) :where(.topbar,.sidebar,.page-content,.site-bg-overlay,.hd-profile-card,.hd-stat-card,.sp-card,.about-strip,.tp3-wrap,.ann-section,.topup-section,.site-cloud-footer__shell,.hct-item,.hct-shell){
  transition:background-color .34s ease,background .34s ease,color .24s ease,border-color .3s ease,box-shadow .3s ease!important;
}

@media(max-width:640px){
  .header-bright-toggle{width:40px;height:40px;flex-basis:40px;border-radius:13px}
  .hbt-core{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){
  .hbt-aura,.hbt-stars i,.hbt-sun::before{animation:none!important}
}