/* ==========================================================================
   SPARK — the sign-in page (and the update-password page, which shares it)
   --------------------------------------------------------------------------
   A near-black navy room with a fine grid of dots, the Spark S traced into
   it in lit dots, and the sign-in card on glass at the left. spark-login.js
   draws the field on one canvas (and makes it answer the pointer, a click,
   the wheel and the form); everything a first paint needs is here, keyed on
   the page's own data-path, so the card never flashes in its stock white
   before the script runs.

   Only these two pages: every selector starts from body[data-path=…]. The
   platform's handlers, ids and classes are left exactly as they are.

   The page is dark by design, in either colour scheme: a guest's page has no
   desk theme to follow (no data-theme is set before sign-in).
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/spark/fonts/montserrat-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body:is([data-path="login"], [data-path="update-password"]) {
  /* The website's orange (spark-ps.com.au: #F05A00) running into the desk's
     amber (spark.css: --spark-amber), so the door and the room match. */
  --spk-orange: #F05A00;
  --spk-orange-2: #FF7A1A;
  --spk-amber: var(--spark-amber, #FF9F1C);
  --spk-charcoal: #111418;
  --spk-night: #05070C;
  --spk-navy: #0A1120;
  --spk-ink: #F4F6F8;
  --spk-ink-2: rgba(236, 240, 244, .74);
  --spk-ink-3: rgba(236, 240, 244, .52);
  --spk-line: rgba(255, 255, 255, .11);
  --spk-field: rgba(255, 255, 255, .055);
  --spk-field-hover: rgba(255, 255, 255, .08);
  --spk-ring: rgba(255, 122, 26, .30);
  --spk-gutter: clamp(16px, 6.2vw, 112px);
  --spk-face: "Montserrat", var(--spark-font, "Inter"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --spk-mono: var(--spark-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
  --spk-ease: cubic-bezier(.2, .8, .2, 1);

  position: relative;
  height: auto;
  min-height: 100svh;
  margin: 0;
  background: var(--spk-night);
  color: var(--spk-ink);
  font-family: var(--spk-face);
  overflow-x: hidden;
  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────── the scene
   Near-black navy, a deeper navy pool of light where the S sits (the script
   sets --spk-mx/--spk-my to its centre), a faint ember low on the left
   under the card, and the canvas of dots over all of it. The canvas is the
   height of the largest viewport, so a phone's address bar coming and
   going never re-lays the grid. */

.spk-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at var(--spk-mx, 72%) var(--spk-my, 38%), rgba(34, 56, 102, .42), rgba(20, 34, 66, .14) 55%, transparent 80%),
    radial-gradient(46% 50% at 6% 100%, rgba(240, 90, 0, .075), transparent 70%),
    linear-gradient(180deg, #070A12 0%, var(--spk-night) 100%);
}
.spk-field {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
}
@supports (height: 100lvh) { .spk-field { height: 100lvh; } }
/* The room's corners fall away, and a floor under the footer. */
.spk-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 95% at 50% 42%, transparent 58%, rgba(2, 3, 6, .7) 100%),
    linear-gradient(0deg, rgba(3, 4, 8, .55) 0%, rgba(3, 4, 8, 0) 16%);
}

/* ─────────────────────────────────────────────────────── the frame */

body:is([data-path="login"], [data-path="update-password"]) > div[data-path] {
  position: relative;
  z-index: 2;
}
body:is([data-path="login"], [data-path="update-password"]) .page-content-wrapper {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 104px var(--spk-gutter) 96px;
  box-sizing: border-box;
}
body:is([data-path="login"], [data-path="update-password"]) main.container {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 432px;
}
body:is([data-path="login"], [data-path="update-password"]) .page-breadcrumbs,
body:is([data-path="login"], [data-path="update-password"]) .page-header-wrapper,
body:is([data-path="login"], [data-path="update-password"]) .page-footer,
body:is([data-path="login"], [data-path="update-password"]) .web-footer,
body:is([data-path="login"], [data-path="update-password"]) .navbar {
  display: none !important;
}

.spk-top, .spk-foot, .spk-hero {
  position: fixed;
  z-index: 3;
  color: var(--spk-ink);
  font-family: var(--spk-face);
}
/* The bar and the footer ride with the page rather than over it, so a tall
   card (the two-step set-up, the password rules) scrolls clear of both. */
.spk-top, .spk-foot { position: absolute; }
.spk-top {
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px var(--spk-gutter) 0;
}
.spk-top-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.spk-top-brand img { height: 30px; width: auto; display: block; }
.spk-top-tag {
  font: 600 10.5px/1.2 var(--spk-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--spk-ink-3);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.spk-top-right { display: flex; align-items: center; gap: 12px; }
.spk-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(17, 20, 24, .42);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font: 500 12.5px/1 var(--spk-face);
  color: var(--spk-ink-2);
  white-space: nowrap;
}
.spk-chip b { color: var(--spk-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.spk-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3DDC97;
  box-shadow: 0 0 0 0 rgba(61, 220, 151, .6);
  animation: spk-live 2.4s ease-out infinite;
}
@keyframes spk-live {
  0%   { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}
a.spk-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--spk-orange);
  color: #fff;
  font: 600 12.5px/1 var(--spk-face);
  text-decoration: none;
  box-shadow: 0 8px 24px -10px rgba(240, 90, 0, .8);
  transition: background .2s, transform .2s var(--spk-ease);
}
a.spk-site:hover { background: var(--spk-orange-2); color: #fff; text-decoration: none; transform: translateY(-1px); }
a.spk-site svg { width: 14px; height: 14px; }

/* The website's own words, bottom right, as the caption under the S the
   field draws above them (the script places the S off this box). */
.spk-hero {
  right: var(--spk-gutter);
  bottom: 88px;
  width: min(540px, 38vw);
  text-align: left;
  pointer-events: none;
}
.spk-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 var(--spk-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #FFB27A;
}
/* A little shade under the words, so a passing arc never runs through them. */
.spk-hero::before {
  content: "";
  position: absolute;
  inset: -40px -40px -30px -60px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 7, 12, .8), rgba(5, 7, 12, .45) 65%, rgba(5, 7, 12, 0));
  pointer-events: none;
}
.spk-hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--spk-orange); border-radius: 2px; box-shadow: 0 0 10px rgba(255, 122, 26, .8); }
.spk-hero h2 {
  margin: 14px 0 0;
  font: 800 clamp(24px, 2.2vw, 36px)/1.12 var(--spk-face);
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}
.spk-hero h2 em {
  font-style: normal;
  background: linear-gradient(95deg, #FF6A10 0%, #FF9A4A 55%, #FFC896 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* What the firm does, as a spec line rather than pills: pills on a field of
   dots are one texture too many. */
.spk-hero-points {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font: 500 11px/1.2 var(--spk-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(236, 240, 244, .62);
}
.spk-hero-points li { display: inline-flex; align-items: center; white-space: nowrap; }
.spk-hero-points li::before {
  content: "";
  width: 3px; height: 3px;
  margin: 0 10px 0 0;
  border-radius: 50%;
  background: var(--spk-orange-2);
  box-shadow: 0 0 6px rgba(255, 122, 26, .9);
}

.spk-foot {
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--spk-gutter) 24px;
  font-size: 12px;
  color: var(--spk-ink-3);
}
.spk-foot a { color: var(--spk-ink-2); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.spk-foot a:hover { color: #fff; border-bottom-color: var(--spk-orange-2); }
.spk-foot-secure { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.spk-foot-secure svg { width: 13px; height: 13px; color: rgba(236, 240, 244, .6); }
.spk-foot-secure > span + span::before { content: "·"; margin-right: 7px; color: rgba(236, 240, 244, .3); }

/* ─────────────────────────────────────────────────────── the card */

body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card {
  /* The platform's login styles are written against these; pointing them at
     a dark glass ground re-inks every part of the card it draws, including
     the parts this file never names. */
  --bg-color: transparent;
  --heading-color: #fff;
  --text-color: var(--spk-ink);
  --ink-gray-4: rgba(236, 240, 244, .48);
  --ink-gray-5: rgba(236, 240, 244, .70);
  --ink-gray-6: rgba(236, 240, 244, .66);
  --ink-gray-8: var(--spk-ink);
  --surface-white: var(--spk-field);
  --surface-gray-2: rgba(255, 255, 255, .08);
  --outline-gray-1: var(--spk-line);
  --outline-gray-2: rgba(255, 255, 255, .14);
  --outline-red-2: rgba(255, 107, 94, .7);
  --red-50: rgba(240, 101, 91, .14);
  --ink-red-4: #FF9A90;
  --surface-green-1: rgba(61, 220, 151, .12);
  --ink-green-3: #7BE7B5;
  --gray-100: rgba(255, 255, 255, .07);
  --gray-200: rgba(255, 255, 255, .12);
  --gray-800: rgba(255, 255, 255, .9);

  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 36px 36px 30px;
  gap: 24px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(240, 90, 0, .10), transparent 60%),
    linear-gradient(180deg, rgba(22, 28, 40, .78), rgba(9, 12, 20, .86));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--spk-ink);
  font-family: var(--spk-face);
  animation: spk-rise .9s var(--spk-ease) backwards .12s;
  isolation: isolate;
}
/* A live busbar along the card's top edge. */
body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 28px; right: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--spk-orange) 18%, #FFB066 50%, var(--spk-orange) 82%, transparent);
  box-shadow: 0 0 18px 1px rgba(255, 122, 26, .55);
}
/* While signing in: current runs round the card's edge. */
body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--spk-angle, 0deg), transparent 0 62%, rgba(255, 122, 26, .0) 64%, #FF7A1A 80%, #FFD2A6 86%, transparent 88%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 1;
}
body.spk-busy:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card::after {
  opacity: 1;
  animation: spk-orbit 1.3s linear infinite;
}
@property --spk-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spk-orbit { to { --spk-angle: 360deg; } }
@keyframes spk-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* The platform's wiggle on a wrong password still plays; it only needs the
   card's own animation out of the way. */
body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card.invalid-login {
  animation: wiggle .4s ease-in-out;
}

/* head */
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head { gap: 22px; }
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head img.app-logo {
  height: 34px;
  max-height: 34px;
  width: auto;
}
/* The S, on a charged tile: a slow arc of light runs round its edge. */
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head img.app-logo.spk-mark,
body[data-path="login"] section .page-card .spk-2fa img.app-logo {
  width: 54px;
  height: 54px;
  max-height: 54px;
  padding: 7px;
  border-radius: 16px;
  object-fit: contain;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(240, 90, 0, .28), rgba(240, 90, 0, 0) 60%),
    linear-gradient(150deg, #262a31, #111418);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 0 0 1px rgba(240, 90, 0, .38),
    0 12px 32px -10px rgba(240, 90, 0, .7),
    0 2px 6px rgba(0, 0, 0, .4);
  align-self: flex-start;
}
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head .page-card-head-text { gap: 8px; }
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head h4 {
  font: 700 26px/1.15 var(--spk-face);
  letter-spacing: -.02em;
  color: #fff;
}
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head .page-card-subtitle {
  font: 400 14px/1.55 var(--spk-face);
  letter-spacing: 0;
  color: var(--spk-ink-2);
}
/* spark.css's mono caption under the old head. */
body:is([data-path="login"], [data-path="update-password"]) .for-login .page-card-head::after { content: none; display: none; }
.spk-greet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 var(--spk-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FF9A52;
  margin-bottom: 2px;
}
.spk-greet svg { width: 14px; height: 14px; }

/* body + fields */
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body { gap: 18px; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .form-group { gap: 8px; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .form-label {
  font: 600 12.5px/1.2 var(--spk-face);
  letter-spacing: .02em;
  color: var(--spk-ink-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body input.form-control {
  height: 48px;
  padding: 0 14px 0 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  background: var(--spk-field);
  color: #fff;
  font: 500 15px/1 var(--spk-face);
  letter-spacing: .01em;
  caret-color: var(--spk-orange-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field input.form-control { padding-right: 48px; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body input.form-control::placeholder { color: rgba(236, 240, 244, .34); }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body input.form-control:hover { background: var(--spk-field-hover); border-color: rgba(255, 255, 255, .2); }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body input.form-control:focus {
  outline: none;
  background: rgba(255, 255, 255, .075);
  border-color: var(--spk-orange-2);
  box-shadow: 0 0 0 4px var(--spk-ring), 0 0 26px -6px rgba(255, 122, 26, .55);
}
/* The browser's autofill paints its own pale yellow; keep it on the glass. */
body:is([data-path="login"], [data-path="update-password"]) section .page-card input.form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #23282F inset;
  box-shadow: 0 0 0 1000px #23282F inset;
  caret-color: #fff;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .field-icon {
  left: 15px;
  color: rgba(236, 240, 244, .45);
  transition: color .18s;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .field-icon use { stroke: currentColor; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body :is(.email-field, .password-field):focus-within .field-icon { color: #FF9A52; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field .toggle-password {
  right: 8px;
  width: 34px;
  height: 34px;
  padding: 9px;
  border-radius: 9px;
  color: rgba(236, 240, 244, .55);
  transition: color .18s, background-color .18s;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field .toggle-password use { stroke: currentColor; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field .toggle-password:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field .toggle-password:focus-visible {
  outline: 2px solid var(--spk-orange-2);
  outline-offset: 0;
  color: #fff;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .password-field .toggle-password.spk-on { color: #FF9A52; }

body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .forgot-password-message { margin-top: 2px; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .forgot-password-message > a {
  font: 600 13px/1.2 var(--spk-face);
  color: #FF9A52;
  text-decoration: none;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .forgot-password-message > a:hover { color: #FFC08F; text-decoration: underline; text-underline-offset: 3px; }

body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .login-error-banner {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 94, .28);
  font: 500 13px/1.45 var(--spk-face);
  align-items: flex-start;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .login-error-banner svg { margin-top: 1px; color: #FF9A90; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .login-error-banner svg use { stroke: currentColor; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .field-error { font: 500 12.5px/1.3 var(--spk-face); color: #FF9A90; margin: 0; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-body .login-success-banner {
  border-radius: 12px; padding: 10px 12px; border: 1px solid rgba(61, 220, 151, .28); font: 500 13px/1.45 var(--spk-face);
}

.spk-caps {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 159, 28, .14);
  color: #FFC27A;
  font: 600 11px/1.2 var(--spk-face);
  letter-spacing: .02em;
}
.spk-caps.on { display: inline-flex; }

/* actions */
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions { gap: 12px; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update),
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--spk-orange) 0%, var(--spk-orange-2) 100%);
  color: #fff;
  font: 700 15px/1 var(--spk-face);
  letter-spacing: .01em;
  box-shadow: 0 14px 30px -12px rgba(240, 90, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .2s var(--spk-ease), box-shadow .2s, filter .2s, opacity .2s;
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update)::before,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary::before {
  /* the sheen that crosses the button on hover */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .7s var(--spk-ease);
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update):not(:disabled):hover,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, var(--spk-orange) 0%, var(--spk-orange-2) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -12px rgba(240, 90, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .3);
  filter: brightness(1.06);
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update):not(:disabled):hover::before,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary:not(:disabled):hover::before { left: 120%; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update):active,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary:active { transform: translateY(0) scale(.99); }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update):focus-visible,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--spk-charcoal), 0 0 0 5px var(--spk-orange-2);
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions :is(.btn-login, .btn-ldap-login, .btn-forgot, .btn-login-with-email-link, .btn-signup, #update):disabled,
body:is([data-path="login"], [data-path="update-password"]) .spk-2fa .btn-primary:disabled {
  background: rgba(255, 255, 255, .08);
  color: rgba(236, 240, 244, .45);
  box-shadow: none;
  opacity: 1;
}
/* "Login with email link" / "Login with password": the quiet second choice. */
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions a.btn-login-option {
  height: 46px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--spk-ink);
  font: 600 14px/1 var(--spk-face);
}
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions a.btn-login-option:hover { background: rgba(255, 255, 255, .1); color: #fff; }
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions .resend-link,
body:is([data-path="login"], [data-path="update-password"]) section .page-card .page-card-actions .resend-link a { color: var(--spk-ink-2); }

/* Sign-in button: label, arrow, spinner. */
.spk-btn-arrow { width: 18px; height: 18px; transition: transform .25s var(--spk-ease); }
.btn-login:hover .spk-btn-arrow { transform: translateX(3px); }
.spk-spin {
  display: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: spk-spin .7s linear infinite;
}
.btn-login.spk-loading { pointer-events: none; }
.btn-login.spk-loading .spk-spin { display: inline-block; }
.btn-login.spk-loading .spk-btn-arrow { display: none; }
@keyframes spk-spin { to { transform: rotate(360deg); } }

/* One line under the button, centred between two hairlines. */
.spk-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -4px;
  font: 500 12px/1 var(--spk-face);
  letter-spacing: .01em;
  color: var(--spk-ink-2);
  cursor: default;
}
.spk-trust::before,
.spk-trust::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1));
}
.spk-trust::after { background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .1)); }
.spk-trust svg { flex: none; width: 15px; height: 15px; margin-left: 6px; color: #3DDC97; }
.spk-trust span { margin-right: 6px; white-space: nowrap; }

body:is([data-path="login"], [data-path="update-password"]) section .sign-up-message { color: var(--spk-ink-3); font: 500 13px/1.5 var(--spk-face); }
body:is([data-path="login"], [data-path="update-password"]) section .sign-up-message a { color: #FF9A52; text-decoration: none; font-weight: 600; }
body:is([data-path="login"], [data-path="update-password"]) section .sign-up-message a:hover { color: #FFC08F; text-decoration: underline; text-underline-offset: 3px; }

/* Signup is disabled here; if a guest lands on #signup it still reads. */
body:is([data-path="login"]) .signup-disabled-message .indicator { color: var(--spk-ink-2); }
body:is([data-path="login"]) .signup-disabled-message .text-muted { color: var(--spk-ink-3) !important; }

/* ─────────────────────────────────── update-password (spark-password.js) */

body[data-path="update-password"] section .page-card .page-card-body .password-hint { color: var(--spk-ink-3); }
body[data-path="update-password"] .spk-pw-rules {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 4px;
  font: 500 12.5px/1.4 var(--spk-face);
}
body[data-path="update-password"] .spk-pw-rules li { color: var(--spk-ink-3); padding: 3px 0; transition: color .2s; }
body[data-path="update-password"] .spk-pw-rules li i { background: rgba(255, 255, 255, .12); color: transparent; transition: background-color .2s, color .2s; }
body[data-path="update-password"] .spk-pw-rules li.ok { color: #9BEFC6; }
body[data-path="update-password"] .spk-pw-rules li.ok i { background: #2FBF7F; color: #fff; }
body[data-path="update-password"] .spk-pw-note { color: var(--spk-ink-3); font: 400 12.5px/1.5 var(--spk-face); }
body[data-path="update-password"] section .password-strength-container .password-strength-label { color: var(--spk-ink-2); }

/* ───────────────────────────────── two-step sign-in (spark-login.js) */

body[data-path="login"] .spk-2fa { display: flex; flex-direction: column; gap: 16px; text-align: left; color: var(--spk-ink); font-family: var(--spk-face); }
body[data-path="login"] .spk-2fa .app-logo { margin-bottom: 4px; }
body[data-path="login"] .spk-2fa-eyebrow { font: 600 11px/1 var(--spk-mono); letter-spacing: .2em; text-transform: uppercase; color: #FF9A52; }
body[data-path="login"] .spk-2fa h4 { margin: 0; font: 700 24px/1.15 var(--spk-face); letter-spacing: -.02em; color: #fff; }
body[data-path="login"] .spk-2fa .spk-sub { margin: -6px 0 0; font: 400 14px/1.55 var(--spk-face); color: var(--spk-ink-2); }
body[data-path="login"] .spk-2fa ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 16px; }
body[data-path="login"] .spk-2fa ol > li { counter-increment: s; position: relative; padding-left: 36px; font: 400 13.5px/1.55 var(--spk-face); color: var(--spk-ink-2); }
body[data-path="login"] .spk-2fa ol > li::before {
  content: counter(s);
  position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(240, 90, 0, .16);
  border: 1px solid rgba(255, 122, 26, .45);
  color: #FFB27A; font: 700 12px/1 var(--spk-face);
}
body[data-path="login"] .spk-2fa ol > li b { color: #fff; font-weight: 600; }
body[data-path="login"] .spk-2fa-qr { margin: 12px 0 4px; display: block; width: fit-content; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -18px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(255, 122, 26, .45); }
body[data-path="login"] .spk-2fa-qr img { display: block; width: 176px; height: 176px; image-rendering: pixelated; }
body[data-path="login"] .spk-2fa details { margin-top: 6px; font-size: 12.5px; color: var(--spk-ink-2); }
body[data-path="login"] .spk-2fa summary { cursor: pointer; color: #FF9A52; font-weight: 600; list-style: none; }
body[data-path="login"] .spk-2fa summary::-webkit-details-marker { display: none; }
body[data-path="login"] .spk-2fa :is(summary, button, a):focus-visible { outline: 2px solid var(--spk-orange-2); outline-offset: 2px; border-radius: 6px; }
body[data-path="login"] .spk-2fa-key { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
body[data-path="login"] .spk-2fa-key code { flex: 1; font: 600 13px/1.4 var(--spk-mono); letter-spacing: .06em; color: #fff; background: none; padding: 0; word-break: break-all; }
body[data-path="login"] .spk-2fa-key button { flex: none; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 4px 10px; font: 600 12px/1.2 var(--spk-face); color: #fff; cursor: pointer; }
body[data-path="login"] .spk-2fa-meta { margin: 6px 0 0; font-size: 12px; color: var(--spk-ink-3); }
body[data-path="login"] .spk-2fa-meta b { color: var(--spk-ink-2); }
body[data-path="login"] .spk-2fa-code {
  display: block; width: 100%; margin-top: 10px; height: 60px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  text-align: center;
  font: 600 28px/1 var(--spk-mono);
  letter-spacing: .5em;
  padding: 0 0 0 .5em;
  color: #fff;
  caret-color: var(--spk-orange-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  transition: border-color .18s, box-shadow .18s;
}
body[data-path="login"] .spk-2fa-code::placeholder { color: rgba(236, 240, 244, .25); }
body[data-path="login"] .spk-2fa-code:focus { outline: none; border-color: var(--spk-orange-2); box-shadow: 0 0 0 4px var(--spk-ring), 0 0 30px -6px rgba(255, 122, 26, .6); }
body[data-path="login"] .spk-2fa .login-error-banner { display: none; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(240, 101, 91, .14); border: 1px solid rgba(255, 107, 94, .28); color: #FF9A90; font: 500 13px/1.45 var(--spk-face); }
body[data-path="login"] .spk-2fa-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font: 400 12.5px/1.5 var(--spk-face); color: var(--spk-ink-3); }
body[data-path="login"] .spk-2fa-foot a { color: #FF9A52; font-weight: 600; text-decoration: none; }
body[data-path="login"] .spk-2fa-foot a:hover { color: #FFC08F; text-decoration: underline; text-underline-offset: 3px; }
body[data-path="login"] .spk-pw-set { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 11px 13px; border-radius: 12px; background: rgba(61, 220, 151, .12); border: 1px solid rgba(61, 220, 151, .3); color: #9BEFC6; font: 500 13px/1.5 var(--spk-face); }

/* The moment between "Logged In" and the desk: the platform swaps the page
   for a centred logo. On this ground it glows rather than sits on white. */
body[data-path="login"] > .centered.splash {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(240, 90, 0, .22), transparent 70%), var(--spk-charcoal);
}
body[data-path="login"] > .centered.splash img {
  width: 96px !important;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 60px -6px rgba(255, 122, 26, .7);
  animation: spk-splash 1.1s ease-in-out infinite alternate;
}
@keyframes spk-splash { from { transform: scale(.96); filter: brightness(.9); } to { transform: scale(1.03); filter: brightness(1.15); } }

/* Entrance: the frame follows the card in. */
.spk-top  { animation: spk-fade .8s ease backwards .35s; }
.spk-hero { animation: spk-rise 1s var(--spk-ease) backwards .5s; }
.spk-foot { animation: spk-fade .8s ease backwards .6s; }
@keyframes spk-fade { from { opacity: 0; } to { opacity: 1; } }

/* ─────────────────────────────────────────────────────── sizes */

/* A laptop: the headline gives way to the card. */
@media (max-width: 1180px) {
  .spk-hero { width: min(440px, 42vw); }
  .spk-hero-points { display: none; }
}
@media (max-width: 960px), (max-height: 640px) {
  .spk-hero { display: none; }
}
@media (max-height: 760px) {
  body:is([data-path="login"], [data-path="update-password"]) .page-content-wrapper { padding-top: 88px; padding-bottom: 72px; }
  body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card { padding: 28px 30px 24px; gap: 20px; }
}

/* A tablet: the card comes to the middle, the S glowing behind it. */
@media (max-width: 820px) {
  body:is([data-path="login"], [data-path="update-password"]) .page-content-wrapper { justify-content: center; }
  .spk-top-tag { display: none; }
}

/* A phone: the card full width. */
@media (max-width: 560px) {
  body:is([data-path="login"], [data-path="update-password"]) {
    --spk-gutter: 16px;
  }
  body:is([data-path="login"], [data-path="update-password"]) .page-content-wrapper {
    align-items: flex-start;
    padding: 84px 16px 28px;
  }
  body:is([data-path="login"], [data-path="update-password"]) main.container { max-width: none; }
  body:is([data-path="login"], [data-path="update-password"]) .page_content { min-height: 0; }
  body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card {
    min-height: 0;
    height: auto;
    padding: 26px 20px 22px;
    border-radius: 20px;
    gap: 20px;
    background: linear-gradient(180deg, rgba(18, 24, 36, .74), rgba(8, 11, 19, .84));
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
  }
  body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head h4 { font-size: 23px; }
  .spk-top { position: absolute; padding-top: 18px; }
  .spk-top-brand img { height: 24px; }
  .spk-chip { height: 32px; padding: 0 11px; font-size: 12px; }
  .spk-chip .spk-chip-date { display: none; }
  a.spk-site { height: 32px; padding: 0 12px; font-size: 12px; }
  a.spk-site .spk-site-long { display: none; }
  .spk-foot {
    position: static;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 0 16px 24px;
  }
}
@media (max-width: 380px) {
  .spk-chip { display: none; }
}

/* ─────────────────────────────────────────────────────── stillness */

@media (prefers-reduced-motion: reduce) {
  .spk-live { animation: none; }
  body:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card,
  .spk-top, .spk-hero, .spk-foot { animation: spk-fade .01s backwards; }
  body.spk-busy:is([data-path="login"], [data-path="update-password"]) section .login-content.page-card::after { animation: none; opacity: .9; --spk-angle: 90deg; }
  .spk-spin { animation-duration: 1.6s; }
  body[data-path="login"] > .centered.splash img { animation: none; }
}

/* The mark that draws itself in: the SVG brings its own tile, so the card's
   padding and painted tile give way and only the glow stays. */
body:is([data-path="login"], [data-path="update-password"]) .page-card .page-card-head img.app-logo.spk-mark-anim,
body[data-path="login"] section .page-card .spk-2fa img.app-logo {
  padding: 0;
  background: none;
  border-radius: 13px;
}

/* Signed in: the loader takes the screen while the desk comes up. */
.spk-launch {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(120% 80% at 50% 40%, #16202B 0%, #0A1118 70%);
  opacity: 0; transition: opacity .35s ease;
}
.spk-launch.is-on { opacity: 1; }
.spk-launch img { width: 170px; height: auto; filter: drop-shadow(0 18px 40px rgba(255, 159, 28, .22)); }
.spk-launch span {
  font: 600 13px/1 Montserrat, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(214, 226, 238, .7);
  animation: spk-launch-word 1.6s ease-in-out .4s infinite alternate;
}
@keyframes spk-launch-word { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spk-launch { transition: none; } .spk-launch span { animation: none; } }