/*
 * Shared Power Center atmosphere.
 * Replaces flat black screen canvases while leaving cards, controls, headers,
 * modals and financial status colours untouched.
 */
:root{
  --sk-power-canvas:
    radial-gradient(circle at 50% 10%,rgba(185,38,94,.25),transparent 35%),
    radial-gradient(circle at 92% 82%,rgba(0,119,190,.22),transparent 40%),
    repeating-linear-gradient(135deg,transparent 0 23px,rgba(255,208,91,.04) 24px 25px),
    linear-gradient(155deg,#190d22 0%,#1b1027 40%,#0d2133 72%,#09121e 100%);
}

/* The information-dense areas need a lighter canvas and clearer card contrast. */
#s-product>.scroll,
#s-plandetail>.scroll,
#s-finplans>.scroll,
#s-mydev>.scroll,
#s-home>.scroll{
  background-color:#132238!important;
  background-image:
    radial-gradient(circle at 18% 8%,rgba(202,49,105,.27),transparent 33%),
    radial-gradient(circle at 88% 78%,rgba(23,139,207,.25),transparent 40%),
    repeating-linear-gradient(135deg,transparent 0 23px,rgba(255,218,126,.045) 24px 25px),
    linear-gradient(155deg,#21152f,#17223a 52%,#0e2a3b)!important;
}

#s-mydev .bm-outer{
  background:linear-gradient(145deg,#243146,#172235 62%,#291927)!important;
  border-color:#394d68!important;
}
#s-mydev .bm-display,
#s-mydev .bm-stat-box{
  background:linear-gradient(145deg,#26364d,#19273b)!important;
  border-color:#405875!important;
}
#s-mydev .bm-stat-lbl,
#s-mydev .bm-pad-txt{color:rgba(255,255,255,.72)!important}

#s-home .arena-news-desk{
  background:linear-gradient(145deg,#142b40,#18263b 58%,#21172c)!important;
}
#s-home .arena-news-story{
  background:linear-gradient(148deg,#29445e,#172a40 65%,#251b32)!important;
  border-color:rgba(145,220,255,.48)!important;
}
#s-home .arena-news-story.featured{
  background:linear-gradient(135deg,#304b69,#1d314a 55%,#1b3942)!important;
}
#s-home .arena-news-title,
#s-home .arena-news-kicker,
#s-home .arena-news-meta{filter:brightness(1.13)}

/* Login/register form deck: continue the Gains-style premium canvas instead
   of dropping to a flat white lower half. Form controls stay light and clear. */
#s-login .auth-body,
#s-reg .auth-body{
  color:#fff!important;
  background-color:#142039!important;
  background-image:
    radial-gradient(circle at 12% 5%,rgba(211,37,94,.28),transparent 31%),
    radial-gradient(circle at 94% 78%,rgba(24,150,219,.24),transparent 38%),
    repeating-linear-gradient(135deg,transparent 0 23px,rgba(255,213,105,.045) 24px 25px),
    linear-gradient(155deg,#24142e,#17243d 55%,#0d2b3e)!important;
  border-radius:26px 26px 0 0;
  box-shadow:0 -12px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#s-login .auth-hl,
#s-reg .auth-hl{color:#f4e9ff!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}
#s-login .auth-switch,
#s-reg .auth-switch{color:rgba(255,255,255,.72)!important}
#s-login .auth-switch a,
#s-reg .auth-switch a{color:#ffd268!important;border-bottom-color:rgba(255,210,104,.5)!important}
#s-login .auth-tab-row,
#s-reg .auth-tab-row,
#s-login #lg-method-tabs{
  background:rgba(7,13,25,.64)!important;
  border-color:rgba(145,201,255,.24)!important;
}
#s-login .auth-tab,
#s-reg .auth-tab{color:rgba(255,255,255,.62)!important}
#s-login .auth-tab.on,
#s-reg .auth-tab.on{
  color:#fff!important;
  background:linear-gradient(135deg,#b61735,#76102b 52%,#173d65)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.35),0 0 14px rgba(210,33,78,.18)!important;
}
#s-login .auth-activity-strip{
  background:linear-gradient(135deg,rgba(29,52,79,.94),rgba(48,21,47,.96))!important;
  border-color:rgba(255,100,132,.32)!important;
}
#s-login .auth-activity-copy{color:rgba(255,255,255,.75)!important}
#s-login .auth-activity-pill{
  color:#d9edff!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.13)!important;
}

/* The translated text layer previously removed the button's text node on some
   languages. A visual label in CSS keeps the live action name permanently. */
#s-login .btn-auth,
#s-reg #reg-submit-btn{
  min-height:54px!important;
  font-size:0!important;
  color:#fff!important;
  background:linear-gradient(110deg,#d21f42,#98152f 46%,#174f7c)!important;
  border:1px solid rgba(255,215,112,.58)!important;
  border-left:5px solid #ffd268!important;
  border-radius:13px!important;
  box-shadow:0 8px 24px rgba(191,24,61,.38),0 0 18px rgba(255,190,63,.13)!important;
}
#s-login .btn-auth::after,
#s-reg #reg-submit-btn::after{
  position:relative;
  z-index:2;
  display:inline-block;
  color:#fff;
  font:950 14px/1 'Barlow Condensed',system-ui,sans-serif;
  letter-spacing:2.4px;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
}
#s-login #lg-phone-fields .btn-auth::after{content:"🏋  SIGN IN • LIVE"}
#s-login #lg-email-fields .btn-auth::after{content:"✉  SIGN IN WITH EMAIL • LIVE"}
#s-reg #reg-submit-btn::after{content:"🎁  CREATE ACCOUNT • LIVE"}

html,
body,
.app,
.screen,
.screen>.scroll{
  background-color:#080b12!important;
  background-image:var(--sk-power-canvas)!important;
  background-attachment:local!important;
}

/* Keep the Power Center itself on the identical shared canvas too. */
#s-me>.scroll,
#s-me .pw-hero{
  background-color:#080b12!important;
  background-image:var(--sk-power-canvas)!important;
}

/* Preserve solid navigation surfaces so labels remain crisp while scrolling. */
.topbar,
.bnav,
.modal,
.popup,
.sheet{
  background-image:none;
}

@media(prefers-reduced-motion:reduce){
  html,body,.app,.screen,.screen>.scroll{background-attachment:scroll!important}
}