/* 2.6.0 part C — THE LOGIN PAGE FOLLOWS THE COMPANY THEME. /<CODE> and /<CODE>/staff: the premium login (login-prem.css) takes the colours
   of the theme the owner chose in the Theme Studio. /super and /staff (no company yet) stay NEXUS Night (data-lt="nexus" = login-prem.css
   as it is). The theme comes from <body data-lt="…"> (set by SBPREM.on(theme) in web/js/core/loginprem.js). WCAG AA checked by
   tests/v26c/ui_themes_c.py. Only colours change — the layout, the moving light and the reduced-motion rule stay the same. */
body.sbprem[data-lt="lavender"] {
  --lp-page: #0d0a1f;
  --lp-bg: radial-gradient(120% 90% at 85% -10%, #3b2a7a 0%, #1c1838 38%, #0d0a1f 75%);
  --lp-o1: rgba(232, 64, 127, 0.42);
  --lp-o2: rgba(43, 179, 168, 0.4);
  --lp-o3: rgba(185, 162, 255, 0.3);
  --lp-card: rgba(34, 29, 66, 0.76);
  --lp-edge: rgba(185, 162, 255, 0.4);
  --lp-hi: #d7c8ff;
  --lp-title: #ffffff;
  --lp-sub: #cfc6ef;
  --lp-label: #ebe5ff;
  --lp-in: rgba(13, 10, 31, 0.7);
  --lp-inline: rgba(207, 198, 239, 0.3);
  --lp-intext: #ffffff;
  --lp-ph: #a59cce;
  --lp-focus: #b9a2ff;
  --lp-btn: linear-gradient(180deg, #e4d9ff, #b9a2ff);
  --lp-btnink: #160f33;
  --lp-link: #d7c8ff;
  --lp-foot: #b9b0dc;
  --lp-footb: #d7c8ff;
  --lp-chipbg: rgba(185, 162, 255, 0.14);
  --lp-chipink: #ebe5ff;
  --lp-langbg: rgba(13, 10, 31, 0.5);
  --lp-langon: #b9a2ff;
  --lp-langonink: #160f33;
  --lp-logo: #1c1838;
  --lp-brandline: rgba(255, 255, 255, 0.06);
  --lp-brandtext: #ffffff;
}
body.sbprem[data-lt="emerald"] {
  --lp-page: #03120c;
  --lp-bg: radial-gradient(120% 90% at 85% -10%, #0c5a3d 0%, #082419 38%, #03120c 75%);
  --lp-o1: rgba(212, 160, 23, 0.5);
  --lp-o2: rgba(16, 185, 129, 0.42);
  --lp-o3: rgba(242, 201, 76, 0.26);
  --lp-card: rgba(8, 36, 25, 0.76);
  --lp-edge: rgba(212, 160, 23, 0.38);
  --lp-hi: #f2c94c;
  --lp-title: #ffffff;
  --lp-sub: #bcd6c9;
  --lp-label: #e2efe8;
  --lp-in: rgba(3, 18, 12, 0.7);
  --lp-inline: rgba(188, 214, 201, 0.28);
  --lp-intext: #ffffff;
  --lp-ph: #8fb2a1;
  --lp-focus: #d4a017;
  --lp-btn: linear-gradient(180deg, #f2c94c, #d4a017);
  --lp-btnink: #1a1300;
  --lp-link: #f2c94c;
  --lp-foot: #a6c7b7;
  --lp-footb: #f2c94c;
  --lp-chipbg: rgba(212, 160, 23, 0.14);
  --lp-chipink: #f8e2a0;
  --lp-langbg: rgba(3, 18, 12, 0.5);
  --lp-langon: #d4a017;
  --lp-langonink: #1a1300;
  --lp-logo: #082419;
  --lp-brandline: rgba(255, 255, 255, 0.06);
  --lp-brandtext: #ffffff;
}
body.sbprem[data-lt="nexuslight"],
body.sbprem[data-lt="pearl"] {
  --lp-page: #f4f1ea;
  --lp-bg: radial-gradient(120% 90% at 85% -10%, #ffffff 0%, #f4f1ea 45%, #e9e2d2 85%);
  --lp-o1: rgba(212, 160, 23, 0.26);
  --lp-o2: rgba(11, 31, 74, 0.14);
  --lp-o3: rgba(242, 201, 76, 0.18);
  --lp-card: rgba(255, 255, 255, 0.86);
  --lp-edge: rgba(176, 127, 30, 0.42);
  --lp-hi: #7a5610;
  --lp-title: #0b1f4a;
  --lp-sub: #4f5d7d;
  --lp-label: #24345a;
  --lp-in: #ffffff;
  --lp-inline: rgba(11, 31, 74, 0.22);
  --lp-intext: #0b1f4a;
  --lp-ph: #6b7794;
  --lp-focus: #8a6a1f;
  --lp-btn: linear-gradient(180deg, #16306b, #0b1f4a);
  --lp-btnink: #ffffff;
  --lp-link: #7a5610;
  --lp-foot: #4f5d7d;
  --lp-footb: #7a5610;
  --lp-chipbg: rgba(176, 127, 30, 0.1);
  --lp-chipink: #5c420c;
  --lp-langbg: #ffffff;
  --lp-langon: #0b1f4a;
  --lp-langonink: #ffffff;
  --lp-logo: #ffffff;
  --lp-brandline: rgba(11, 31, 74, 0.05);
  --lp-brandtext: #0b1f4a;
  color-scheme: light;
}
body.sbprem[data-lt="pearl"] {
  --lp-bg: radial-gradient(120% 90% at 85% -10%, #ffffff 0%, #f8f5ee 45%, #efe6d3 85%);
  --lp-o2: rgba(201, 162, 39, 0.16);
  --lp-title: #2b2416;
  --lp-sub: #5f5440;
  --lp-label: #3b301b;
  --lp-inline: rgba(60, 45, 15, 0.22);
  --lp-intext: #2b2416;
  --lp-ph: #7b6c4f;
  --lp-btn: linear-gradient(180deg, #8a6414, #6f500f);
  --lp-foot: #5f5440;
  --lp-langon: #8a6414;
  --lp-brandline: rgba(60, 45, 15, 0.05);
  --lp-brandtext: #2b2416;
}
/* the same rules for every theme except NEXUS Night (= login-prem.css as it is) */
body.sbprem[data-lt]:not([data-lt="nexus"]) {
  background: var(--lp-page);
  color: var(--lp-title);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-bg {
  background: var(--lp-bg);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-bg i:nth-child(1) {
  background: radial-gradient(circle, var(--lp-o1), transparent 70%);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-bg i:nth-child(2) {
  background: radial-gradient(circle, var(--lp-o2), transparent 70%);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-bg i:nth-child(3) {
  background: radial-gradient(circle, var(--lp-o3), transparent 70%);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .form .card,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .box {
  background: var(--lp-card) !important;
  border-color: var(--lp-edge);
  color: var(--lp-title);
}
body.sbprem:is([data-lt="nexuslight"], [data-lt="pearl"]) .login .form .card,
body.sbprem:is([data-lt="nexuslight"], [data-lt="pearl"]) .login .box {
  box-shadow: 0 30px 70px rgba(60, 45, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-head .sbp-logo {
  background: var(--lp-logo);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-head .sbp-co {
  border-color: var(--lp-logo);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-hi {
  color: var(--lp-hi);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-title,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .bb {
  color: var(--lp-title);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-sub,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .muted,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .small.muted,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .tiny.muted {
  color: var(--lp-sub) !important;
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login label.f {
  color: var(--lp-label) !important;
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .input {
  background: var(--lp-in) !important;
  border-color: var(--lp-inline) !important;
  color: var(--lp-intext) !important;
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .input:focus {
  border-color: var(--lp-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-focus) 28%, transparent) !important;
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .input::placeholder {
  color: var(--lp-ph);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .btn.lg,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login #go {
  background: var(--lp-btn) !important;
  color: var(--lp-btnink) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--lp-focus) 30%, transparent);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .btn.ghost,
body.sbprem[data-lt]:not([data-lt="nexus"]) .login a {
  color: var(--lp-link) !important;
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-foot {
  color: var(--lp-foot);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-foot b {
  color: var(--lp-footb);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .sbp-chip {
  background: var(--lp-chipbg);
  border-color: var(--lp-edge);
  color: var(--lp-chipink);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .box .lang button {
  color: var(--lp-label);
  border-color: var(--lp-inline);
  background: var(--lp-langbg);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .box .lang button.on {
  background: var(--lp-langon);
  color: var(--lp-langonink);
  border-color: var(--lp-langon);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .brandline {
  background: var(--lp-brandline);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .login .brandline .b {
  color: var(--lp-brandtext);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .prayerchip {
  color: var(--lp-title);
  border-color: var(--lp-edge);
  background: var(--lp-chipbg);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .prayerchip b {
  color: var(--lp-hi);
}
body.sbprem[data-lt]:not([data-lt="nexus"]) .prayerchip .pin {
  color: var(--lp-sub);
}
/* the EN | عربي switch and the eye button on the login card */
body.sbprem:is([data-lt="nexuslight"], [data-lt="pearl"]) .langsw button:not(.on) {
  color: var(--lp-title);
}
body.sbprem:is([data-lt="nexuslight"], [data-lt="pearl"]) .pw-eye {
  color: var(--lp-sub);
}
/* the faint grid of x25.css on a light login page */
body.sbprem:is([data-lt="nexuslight"], [data-lt="pearl"])::before {
  --x25grid: rgba(60, 45, 15, 0.05);
}