/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) platform_service/ba_platform/web/static/login.css. Do not edit: override in styles.css. */
/* The sign-in page (templates/login.html) in the Sam app's look: FidornUI/Sam website/index.html, section#login
   (.login-art, .login-form-area, .login-box, .field, .password-wrap, .primary, .status-msg, the orb and its orbits).
   Its layout, sizes and the night panel's colours are Sam's; the form side reads wf/tokens.css, so it follows Light
   and Dark (Sam itself is dark only). The night panel stays night in both themes, as in Sam. Sam's web fonts (DM Sans,
   Manrope) are not loaded (the CSP allows fonts from this site only): the tokens' system stack stands in. */
:root {
  --lg-night: #11131a;
  --lg-night-ink: #eff1f8;
  --lg-night-muted: #9aa1af;
  --lg-night-faint: #767d8b;
  --lg-night-line: #2d303c;
  --lg-accent: #a8c3ff;
  --lg-accent-strong: #3f63b8;
  --lg-btn-a: #d2e0ff;
  --lg-btn-b: #9ab9fa;
  --lg-btn-ink: #14161c;
  --lg-bg: var(--wf-panel, #ffffff);
  --lg-ink: var(--wf-ink, #171717);
  --lg-muted: var(--wf-muted, #777777);
  --lg-line: var(--wf-border, #e7e7e7);
  --lg-field: var(--wf-bg, #f0f0f0);
  --lg-field-line: var(--wf-border2, #e3e3e3);
  --lg-focus: var(--lg-accent-strong);
  --lg-msg-bg: var(--wf-bad-soft, #fdecec);
  --lg-msg-ink: var(--wf-bad, #d6453d);
  --lg-pill-line: var(--wf-border, #e7e7e7);
}
:root[data-theme="dark"] {
  --lg-bg: #101116;
  --lg-ink: #eff1f8;
  --lg-muted: #959bab;
  --lg-line: #2d303c;
  --lg-field: #17191c;
  --lg-field-line: #343840;
  --lg-focus: var(--lg-accent);
  --lg-msg-bg: #21252f;
  --lg-msg-ink: #f2b4ae;
  --lg-pill-line: #394258;
}
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--lg-bg);
  color: var(--lg-ink);
  font: 16px/1.5 var(--wf-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
}
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }

/* ---------------------------------------------------------------- the night panel (Sam's .login-art) */
.lg-art {
  position: relative; overflow: hidden; padding: 42px 54px; color: var(--lg-night-ink);
  border-right: 1px solid var(--lg-night-line);
  background: radial-gradient(ellipse at 50% 64%, #23345850, transparent 54%), var(--lg-night);
  display: flex; flex-direction: column;
}
.lg-brand { display: flex; align-items: center; gap: 11px; font-size: 27px; font-weight: 600; letter-spacing: -1.1px; }
.lg-brand-sub { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--lg-night-faint); margin-left: -4px; }
.lg-orb-mark {
  display: block; width: 29px; height: 29px; border-radius: 50%; flex-shrink: 0; border: 1px solid #a4c8ff55;
  background: radial-gradient(circle at 32% 25%, #f0f6ff 0%, #c6dcff 12%, #7497dc 34%, #344b78 57%, #141d32 77%, #6d92d8 100%);
  box-shadow: inset 1px 1px 3px #e6f1ff88, inset -2px -3px 5px #0c1429, 0 0 16px #739dfc35;
}
.lg-eyebrow { margin: 0; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--lg-muted); }
.lg-art .lg-eyebrow { margin-top: 62px; color: var(--lg-night-muted); }
.lg-hero {
  font-size: clamp(38px, 4.4vw, 68px); line-height: 1.13; font-weight: 450; letter-spacing: -3px;
  margin: 22px 0; max-width: 550px;
}
.lg-hero span {
  background: linear-gradient(90deg, #c5d8ff, #7e9fe5); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.lg-lede { margin: 0; color: var(--lg-night-muted); max-width: 370px; line-height: 1.7; }
.lg-orbital { height: 320px; margin-top: 3px; position: relative; display: grid; place-items: center; }
.lg-orbit { position: absolute; width: 275px; height: 275px; border-radius: 50%; border: 1px solid #789de61d; }
.lg-orbit.two { width: 380px; height: 230px; transform: rotate(-25deg); border-color: #a5c8ff30; }
.lg-orbit.three { width: 355px; height: 185px; transform: rotate(35deg); border-color: #789de61a; }
.lg-core {
  position: relative; width: 185px; height: 185px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f0f6ff 0%, #b1cbff 9%, #5c81d8 27%, #30477b 45%, #111725 68%, #253a6a 85%, #6489d0 100%);
  box-shadow: inset -9px -12px 28px #050b1b, inset 5px 6px 22px #d8e9ff88, 0 0 38px #739dfc33, 0 0 105px #638cec24;
  animation: lgPulse 4s ease-in-out infinite;
}
.lg-core::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid #a4c8ff66;
  box-shadow: 0 0 16px #b5d4ff22;
}
.lg-shine {
  position: absolute; inset: 5%; border-radius: 50%; filter: blur(8px);
  background: conic-gradient(from 20deg, transparent, #a1c7ff35, transparent 35%, #b6ccff22, transparent 75%);
  animation: lgRotate 15s linear infinite;
}
.lg-orbit-label {
  position: absolute; left: 0; top: 65px; z-index: 2; padding: 9px 13px; border-radius: 8px; font-size: 12px;
  background: #181e2bd9; border: 1px solid #425579; color: var(--lg-night-ink);
}
.lg-orbit-label.bottom { left: auto; right: 0; top: 239px; }
.lg-art-foot {
  margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 15px;
  font-size: 12px; color: var(--lg-night-faint);
}
@keyframes lgPulse {
  0%, 100% { transform: scale(.96); box-shadow: inset -9px -12px 28px #050b1b, inset 5px 6px 22px #d8e9ff88, 0 0 38px #739dfc33, 0 0 105px #638cec24; }
  50% { transform: scale(1.04); box-shadow: inset -9px -12px 28px #050b1b, inset 5px 6px 22px #d8e9ffaa, 0 0 58px #739dfc66, 0 0 140px #638cec44; }
}
@keyframes lgRotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lg-core, .lg-shine { animation: none; } }

/* ---------------------------------------------------------------- the form (Sam's .login-form-area, .login-box) */
.lg-form-area { position: relative; display: grid; place-items: center; padding: 50px 30px; }
.lg-pill {
  position: absolute; right: 32px; top: 35px; padding: 6px 12px; border-radius: 20px; font-size: 12px;
  border: 1px solid var(--lg-pill-line); color: var(--lg-muted);
}
.lg-box { width: 100%; max-width: 370px; }
.lg-title { font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -1px; margin: 12px 0 10px; }
.lg-line { margin: 0 0 33px; color: var(--lg-muted); line-height: 1.6; }
.lg-msg {
  margin: -13px 0 20px; padding: 14px; border-radius: 9px; font-size: 14px; line-height: 1.6;
  background: var(--lg-msg-bg); color: var(--lg-msg-ink);
}
.lg-form { margin: 0; }
.lg-field { display: block; margin: 21px 0; font-size: 14px; }
.lg-field .input {
  display: block; width: 100%; height: 51px; margin-top: 10px; padding: 0 15px; border-radius: 9px;
  font: inherit; font-size: 16px; color: var(--lg-ink); background: var(--lg-field);
  border: 1px solid var(--lg-field-line); outline: 0;
}
.lg-field .input::placeholder { color: var(--lg-muted); opacity: .8; }
.lg-field .input:focus { border-color: var(--lg-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-focus) 22%, transparent); }
.lg-field .input[aria-invalid="true"] { border-color: var(--lg-msg-ink); }
.lg-pass { position: relative; display: block; }
.lg-pass .input { padding-right: 65px; }
.lg-show {
  position: absolute; right: 8px; top: 8px; padding: 9px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--lg-muted);
}
.lg-show[hidden] { display: none; }
.lg-show:hover { color: var(--lg-ink); }
.lg-primary {
  display: block; width: 100%; margin-top: 30px; padding: 14px 20px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--lg-btn-ink);
  background: linear-gradient(135deg, var(--lg-btn-a), var(--lg-btn-b)); box-shadow: 0 2px 16px #7199ff14;
}
.lg-primary:hover { filter: brightness(1.06); }
.lg-primary[aria-busy="true"] { cursor: progress; opacity: .7; }
.lg-primary[aria-busy="true"]::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: -1px;
  border: 2px solid #14161c40; border-top-color: var(--lg-btn-ink); border-radius: 50%;
  animation: lgRotate 1s linear infinite;
}
.lg-show:focus-visible, .lg-primary:focus-visible { outline: 2px solid var(--lg-focus); outline-offset: 4px; }
.lg-note { margin: 23px 0 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--lg-muted); }

/* ---------------------------------------------------------------- narrower screens (Sam's breakpoints) */
@media (max-width: 1150px) { .lg-art { padding: 35px; } .lg-hero { letter-spacing: -2px; } }
@media (max-width: 950px) { .lg-art { padding: 35px 28px; } .lg-orbit-label { left: 0; } }
@media (max-width: 650px) {
  .lg { display: block; }
  .lg-art { min-height: 290px; padding: 25px 25px 24px; border-right: 0; border-bottom: 1px solid var(--lg-night-line); }
  .lg-art .lg-eyebrow { margin-top: 28px; font-size: 10px; }
  .lg-hero { font-size: 31px; letter-spacing: -1.7px; margin: 15px 0 0; max-width: 240px; position: relative; z-index: 2; }
  .lg-lede, .lg-art-foot, .lg-orbit, .lg-orbit-label { display: none; }
  .lg-orbital { display: block; position: absolute; width: 160px; height: 160px; right: -25px; bottom: 6px; opacity: .85; margin: 0; }
  .lg-core { position: absolute; top: 15px; left: 20px; width: 120px; height: 120px; }
  .lg-form-area { padding: 58px 16px 35px; }
  .lg-pill { top: 16px; right: 16px; font-size: 10px; }
  .lg-title { font-size: 26px; }
  .lg-line { font-size: 14px; margin-bottom: 24px; }
}