/* SERBUNIB V12 visual-only overlay; preserve chart palette, navigation, forms. */
:root { --sb12-spot-blue: rgba(34,132,224,.24); --sb12-spot-cyan: rgba(28,192,210,.18); --sb12-spot-violet: rgba(122,115,232,.14); }
/* Important is intentionally limited to page background layers, not card/chart colors. */
body:not(.dark-mode):not(.dark):not([data-theme="dark"]) {
  background-color: #eef6ff !important;
  background-image:
    radial-gradient(circle 310px at 4% 10%, var(--sb12-spot-blue), transparent 98%),
    radial-gradient(circle 400px at 93% 21%, var(--sb12-spot-cyan), transparent 96%),
    radial-gradient(circle 300px at 58% 82%, var(--sb12-spot-violet), transparent 100%),
    linear-gradient(135deg,#fafdff 0%,#eaf5ff 52%,#f5faff 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
/* Give the Home content its own translucent surface without changing order/sizing. */
body:not(.dark-mode):not(.dark):not([data-theme="dark"]) > main,
body:not(.dark-mode):not(.dark):not([data-theme="dark"]) main.container {
  background-color: transparent;
}
/* Login, Forgot Password, OTP, Reset: same existing 50/50 grid. */
.auth-layout .intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle 330px at 5% 8%, rgba(116,218,255,.30), transparent 95%),
    radial-gradient(circle 230px at 95% 92%, rgba(136,157,255,.28), transparent 95%),
    linear-gradient(135deg, #0a325e 0%, #126da9 60%, #178abe 100%) !important;
}
.auth-layout .intro::before, .auth-layout .intro::after {
  content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%;
  border:1px solid rgba(255,255,255,.23);
  background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.025));
  box-shadow:inset 0 0 24px rgba(255,255,255,.06),0 16px 70px rgba(5,30,65,.12);
}
.auth-layout .intro::before { width:clamp(240px,35vw,480px); aspect-ratio:1; top:-130px; right:-140px; }
.auth-layout .intro::after { width:clamp(170px,23vw,315px); aspect-ratio:1; bottom:-125px; left:-90px; }
.auth-layout .panel {
  background:
    radial-gradient(circle 290px at 92% 8%,rgba(23,159,217,.18),transparent 95%),
    radial-gradient(circle 240px at 6% 92%,rgba(116,121,229,.12),transparent 95%),
    linear-gradient(155deg,#f9fcff,#eef7ff) !important;
}
.auth-layout .card { box-shadow:0 24px 70px rgba(9,61,113,.15); }
@media (prefers-color-scheme:dark) {
  .auth-layout .panel { background:linear-gradient(150deg,#101f30,#142c43) !important; }
}
body.dark-mode,body.dark,body[data-theme="dark"],html[data-theme="dark"] body {
  background-color:#0b182a !important;
  background-image:
    radial-gradient(circle 360px at 3% 10%,rgba(41,112,194,.20),transparent 98%),
    radial-gradient(circle 430px at 93% 24%,rgba(29,174,187,.12),transparent 98%),
    linear-gradient(135deg,#0c1a2c,#10263d) !important;
}
@media(max-width:840px) {
 body { background-attachment:scroll !important; }
 .auth-layout .intro::before {width:190px;top:-80px;right:-75px}
 .auth-layout .intro::after {width:145px;bottom:-90px;left:-40px}
}