/*
  Zait Alaa — final white typography theme
  Text stays white; rose is reserved for borders, focus rings and ambient glow.
*/
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&display=swap');

:root{
  --text:#ffffff !important;
  --muted:#ffffff !important;
  --soft:#ffffff !important;
  --pink:#f22f67;
  --pink2:#ff6f98;
  --red:#b81945;
  --line:rgba(255,255,255,.18);
  --line2:rgba(242,47,103,.72);
}

html{background:#030303;color-scheme:dark}
body{
  font-family:'Alexandria',Arial,'Segoe UI',sans-serif !important;
  font-weight:400 !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 82% 8%,rgba(242,47,103,.17),transparent 31%),
    radial-gradient(circle at 12% 22%,rgba(184,25,69,.13),transparent 34%),
    linear-gradient(145deg,#080507 0%,#020202 56%,#11060b 100%) !important;
}

/* All visible copy is white. Pink remains an accent, never a text color. */
body,body *{color:#fff}
body :is(h1,h2,h3,h4,h5,h6,strong,b){font-weight:600 !important}
body :is(p,span,small,label,a,li,td,th,option){color:#fff !important}
body :is(input,select,textarea,button){
  color:#fff !important;
  font-family:'Alexandria',Arial,'Segoe UI',sans-serif !important;
  font-weight:500 !important;
}
body :is(.brandText span,.panelHead p,.hero p,.info,.infoList,.muted,.field small,.formSectionTitle small,.meterLabel,.welcome p,.marketerIdentity span,.miniStats span,.sideBrand span,.notice,.security,.archiveNote,.driverBox,.miniStat){
  color:#fff !important;
  opacity:.92;
}

/* Cancel gradient-filled text so headlines remain clear white. */
body :is(.hero h1 span,.heroTitle span,.titleGradient,.gradientText){
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
}

/* Calm regular/medium typography instead of extra-heavy copy. */
body :is(.btn,.authTabs button,.tabs button,.field label,.badge,.statusPill,.sectionIndex,.phoneBox .prefix,.passwordToggle,.trustedAccountBadge){font-weight:500 !important}
body :is(h1,.hero h1){font-weight:600 !important}

/* Strong black surfaces with a restrained moving rose glow. */
:is(.panel,.authCard,.authCardWide,.formSection,.card,.stat,.report,.reportBox,.distCard,.orderCard,.reportCard,.dataCard,.cityBox,.modalCard,.modalBox,.adminLoginCard,.loginCard,.choiceCard,.entryChoice){
  background:
    radial-gradient(circle at 85% 0%,rgba(242,47,103,.12),transparent 35%),
    linear-gradient(145deg,rgba(18,12,16,.97),rgba(4,4,4,.97)) !important;
  border-color:rgba(255,255,255,.16) !important;
}

.authCardWide,.heroPanel,.productFrame{position:relative;isolation:isolate}
.authCardWide::before,.heroPanel::before,.productFrame::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border-radius:50%;
  background:rgba(242,47,103,.12);
  filter:blur(34px);
  pointer-events:none;
  z-index:-1;
  animation:zaitRoseGlow 7s ease-in-out infinite alternate;
}
.authCardWide::before,.heroPanel::before{top:-90px;left:-70px}
.productFrame::after{right:-90px;bottom:-100px}
@keyframes zaitRoseGlow{
  from{transform:translate3d(-12px,8px,0) scale(.88);opacity:.45}
  to{transform:translate3d(24px,26px,0) scale(1.18);opacity:.9}
}
@media (prefers-reduced-motion:reduce){.authCardWide::before,.heroPanel::before,.productFrame::after{animation:none}}

/* Empty, high-contrast controls. */
.field input,.field select,.field textarea,.phoneBox,.passwordBox,td input{
  background:linear-gradient(180deg,#0d0d0d,#060606) !important;
  border-color:rgba(255,255,255,.24) !important;
  color:#fff !important;
  caret-color:var(--pink) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important;
}
.field input::placeholder,.field textarea::placeholder,input::placeholder,textarea::placeholder{
  color:transparent !important;
  opacity:0 !important;
}
.field select option{background:#080808 !important;color:#fff !important}
.field input:focus,.field select:focus,.field textarea:focus,.phoneBox:focus-within,.passwordBox:focus-within,td input:focus{
  border-color:var(--pink) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(242,47,103,.18),0 0 24px rgba(242,47,103,.12) !important;
}

/* Keep accents rose while all button and badge copy remains white. */
.btn,.authTabs button,.tabs button,.withdrawMethodTabs button,.sideMenu button,.sideMenu a{
  color:#fff !important;
}
.btn.primary,.authTabs button.active,.tabs button.active,.sideMenu .active{
  color:#fff !important;
  border-color:rgba(242,47,103,.72) !important;
  background:linear-gradient(135deg,#f22f67,#b81945) !important;
}
.btn:hover,.authTabs button:hover,.tabs button:hover{
  color:#fff !important;
  border-color:rgba(242,47,103,.78) !important;
}
:is(.badge,.statusPill,.notice,.notice.gold,.notice.error,.security,.archiveNote,.driverBox,.commissionBadge,.adminBadge,.heroEyebrow,.kicker,.codeHint){color:#fff !important}
:is(.badge,.statusPill,.notice,.security,.archiveNote,.driverBox,.commissionBadge,.adminBadge,.heroEyebrow,.kicker,.codeHint){border-color:rgba(242,47,103,.36) !important}
:is(.goldIdentity span,.commissionBadge b,.stat.gold b,.card a,.statusPill.gold,.badge.gold){color:#fff !important}

/* Header stays stable while moving between pages. */
.topbar{background:rgba(3,3,3,.93) !important}
.brand img,.heroLogo,.partnerIntroFinal img,.modalLogo img,.logoBox img,.sideBrand img,.adminLoginBrand img{
  transform:none !important;
  transition:filter .22s ease,opacity .22s ease !important;
}
body.page-leaving{opacity:1 !important;transform:none !important}
body.page-leaving::after{content:"";position:fixed;inset:0;z-index:9999;background:#030303;opacity:.22;pointer-events:none;animation:pageFadeOut .14s ease both}
@keyframes pageFadeOut{from{opacity:0}to{opacity:.22}}

/* Mobile clarity. */
@media(max-width:760px){
  body :is(h1,.hero h1){letter-spacing:0 !important}
  .field input,.field select,.field textarea{font-size:16px !important}
}