/* Shared desktop geometry from the full-page and 1203 x 726 SVG references. */
body.lc-signin {
  --lc-primary: #059669;
  --lc-primary-600: #047857;
  margin: 0;
  background: #070c18;
  background-image: radial-gradient(ellipse 97.65vw 122.18vh at 20% 30%, rgb(99 71 209 / 18%), transparent 60%), radial-gradient(ellipse 97.65vw 122.18vh at 80% 70%, rgb(34 197 94 / 12%), transparent 55%);
  color: #f8fafc;
}
.lc-signin *, .lc-signin *::before, .lc-signin *::after { box-sizing: border-box; }
.signin-shell { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 40px 24px; }
.signin-layout { width: 100%; max-width: 1152px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 442.667px); gap: 64px; align-items: center; }
.signin-intro { min-width: 0; max-width: 544px; text-align: left; }
.signin-logo { display: inline-flex; margin-bottom: 32px; max-width: 100%; }
.signin-logo .lc-logo__lockup { width: 318px; height: 64px; object-fit: contain; max-width: 100%; }
.signin-logo--mobile { display: none; }
.signin-badge { display: block; width: 314px; max-width: 100%; margin: 0 0 30px; line-height: 0; }
.signin-badge img { display: block; width: 100%; height: auto; }
.signin-intro h1 { font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -1.5px; margin: 0 0 20px; color: #f8fafc; }
.signin-intro h1 span { display: block; color: #c084fc; }
.signin-description { color: #a2afc2; font-size: 19px; line-height: 1.5; margin: 0 0 40px; }
.signin-features { max-width: 512px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.signin-feature { display: flex; gap: 12px; min-height: 82px; padding: 14px; border: 1px solid #334155; border-radius: 12px; background: #101828; }
.signin-feature > span { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgb(16 185 129 / 10%); color: #34d399; font-size: 20px; }
.signin-feature:nth-child(2) > span { color: #c084fc; background: rgb(168 85 247 / 10%); }
.signin-feature strong { font-size: 15px; font-weight: 500; }
.signin-feature p { color: #94a3b8; font-size: 14px; line-height: 1.3; margin: 4px 0 0; }
.signin-certifications { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 18px 0 0; margin: 30px 0 0; border-top: 1px solid #334155; list-style: none; color: #a2afc2; font-size: 12px; font-weight: 600; }
.signin-certifications li::before { content: '\2713'; color: #34d399; margin-right: 8px; }
.signin-form-column { min-width: 0; position: relative; }
/* Form is first in source; pin the two-column desktop placement to intro left, form right. */
.signin-intro { grid-column: 1; grid-row: 1; }
.signin-form-column { grid-column: 2; grid-row: 1; }
.signin-form-column::before { content: ""; position: absolute; top: -32px; right: -32px; width: 144px; height: 144px; background: url("../brand/lucid_login_glow.svg") center / contain no-repeat; pointer-events: none; }
.lc-signin .login-card { display: block; min-height: 0; padding: 0; background: transparent; }
.lc-signin .login-card > div { width: 100%; }
.lc-signin .login-main { width: 100%; min-height: 615.375px; padding: 40px; border-radius: 24px; background: #fff; color: #0f172a; box-shadow: 0 25px 50px rgb(0 0 0 / 80%); }
.lc-signin .login-main .theme-form h4 { font-size: 30px; line-height: 1.15; font-weight: 600; margin-bottom: 14px; }
.lc-signin .login-main .theme-form > p { color: #7b8ba4; font-size: 16px; line-height: 1.5; margin-bottom: 28px; }
.lc-signin .login-main .theme-form .form-group { margin-bottom: 22px; }
.lc-signin .col-form-label { font-size: 13px; font-weight: 600; gap: 8px; flex-wrap: wrap; }
.lc-signin .col-form-label a { color: #7950df; }
.lc-signin .login-main .theme-form input.form-control { min-height: 48px; width: 100%; background: #f8fafc; border: 1px solid #dce3ee; border-radius: 12px; font-size: 16px; }
.lc-signin .login-main .theme-form input#id_password { padding-right: 64px; }
.lc-signin .login-main .theme-form .btn { min-height: 54px; border-radius: 12px; font-size: 18px; }
.signin-form-divider { width: 100%; height: 16px; margin: 24px 0 20px; background: linear-gradient(#e2e8f0, #e2e8f0) center / 100% 1px no-repeat; }
@media (max-width: 1100px) {
  .signin-intro h1 { font-size: clamp(36px, 4vw, 44px); }
  .signin-layout { gap: 32px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .lc-signin .login-main { padding: 28px; }
  .signin-features { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .signin-shell { padding: 40px 24px; }
  .signin-layout { grid-template-columns: minmax(0, 1fr); max-width: 600px; gap: 40px; }
  /* Stacked: logo, login form, then marketing, following source order. */
  .signin-intro, .signin-form-column { grid-column: auto; grid-row: auto; }
  .signin-logo { margin-bottom: 28px; }
  .signin-logo--mobile { display: inline-flex; }
  .signin-intro .signin-logo { display: none; }
  .signin-form-column::before { display: none; }
  .signin-intro h1 { font-size: clamp(32px, 6vw, 44px); }
  .signin-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-signin .login-main { min-height: 0; }
}
@media (max-width: 440px) {
  .signin-shell { padding: 28px 16px; }
  .signin-features { grid-template-columns: 1fr; }
  .signin-description { font-size: 17px; margin-bottom: 24px; }
  .lc-signin .login-main { padding: 24px 20px; }
  .lc-signin .login-main .theme-form h4 { font-size: 27px; }
}

/* Keep semantic, reflowable text; use the supplied outlines at desktop size. */
.signin-copy-art { display: none; }
@media (min-width: 1101px) {
  .signin-copy { position: relative; margin-bottom: 40px; }
  .signin-copy-art { display: block; width: 100%; max-width: 544px; height: auto; }
  .signin-copy-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Exact feature artwork on desktop; readable, wrapping cards below. */
.signin-features-art { display: none; }
@media (min-width: 1101px) {
  .signin-features-section { position: relative; max-width: 512px; }
  .signin-features-art { display: block; width: 100%; height: auto; }
  .signin-features-section .signin-features { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Supplied compliance row includes its divider; mobile labels can wrap. */
.signin-certifications-art { display: none; }
@media (min-width: 1101px) {
  .signin-certifications-section { position: relative; max-width: 544px; margin-top: 30px; }
  .signin-certifications-art { display: block; width: 100%; height: auto; }
  .signin-certifications-section .signin-certifications { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Keep the decorative glow inside the available narrow-screen gutter. */
@media (max-width: 1232px) {
  .signin-form-column::before { right: -16px; }
}

/* Form introduction artwork at desktop size, with semantic text retained. */
.signin-form-intro-art { display: none; }
.lc-signin .login-main .signin-form-intro-text > p { color: #7b8ba4; font-size: 16px; line-height: 1.5; margin-bottom: 28px; }
@media (min-width: 1101px) {
  .signin-form-intro { position: relative; margin-bottom: 28px; }
  .signin-form-intro-art { display: block; width: 100%; max-width: 363px; height: auto; }
  .signin-form-intro-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

/* Interactive controls sized to the supplied form reference. */
.lc-signin .login-main .theme-form .form-group { margin-bottom: 16px; }
.lc-signin .col-form-label { padding: 0 0 8px; line-height: 20px; text-transform: uppercase; }
.lc-signin .col-form-label a { text-transform: none; font-size: 12px; }
.signin-input-wrap { position: relative; }
.lc-signin .login-main .theme-form input.form-control { min-height: 46px; padding: 11px 16px 11px 44px; line-height: 22px; font-size: 14px; border-color: #e2e8f0; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.signin-input-icon { position: absolute; top: 15px; left: 14px; width: 16px; height: 16px; color: #6b7280; pointer-events: none; }
.lc-signin .signin-password-toggle { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 11px; padding: 0; background: transparent; color: #6b7280; cursor: pointer; }
.signin-password-toggle svg { width: 18px; height: 18px; }
.signin-password-toggle:focus-visible { outline: 2px solid #7950df; outline-offset: -3px; }
.lc-signin .login-main .theme-form .signin-submit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 24px; font-size: 16px; box-shadow: 0 4px 6px rgb(5 150 105 / 30%), 0 10px 15px rgb(5 150 105 / 30%); }
.signin-submit svg { width: 20px; height: 20px; }

/* Email detail reference: 16px label line plus 8px gap above the 46px field. */
.lc-signin .login-main .col-form-label[for="id_username"] { display: block; margin: 0; padding: 0 0 8px; font-size: 12px; line-height: 16px; font-weight: 600; color: #475569; }
.lc-signin #id_username { padding-left: 44px; }
.lc-signin #id_username::placeholder { color: #6b7280; opacity: 1; }

.signin-input-icon.signin-email-icon { width: 15px; height: 15px; top: 15.5px; }

/* Password label reference: a 16px row above the editable field. */
.signin-password-label-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.lc-signin .login-main .signin-password-label-row .col-form-label { margin: 0; padding: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: #334155; }
.lc-signin .signin-password-label-row a { font-size: 12px; line-height: 16px; font-weight: 500; color: #6347d1; }
.lc-signin .signin-password-label-row a:hover { text-decoration: underline !important; }
.lc-signin .signin-password-label-row a:focus-visible { outline: 2px solid #6347d1; outline-offset: 3px; border-radius: 2px; }

.lc-signin #id_password::placeholder { color: #6b7280; opacity: 1; }
.lc-signin #id_password::-ms-reveal,
.lc-signin #id_password::-ms-clear { display: none; }

.signin-input-icon.signin-lock-icon { width: 15px; height: 15px; top: 15.5px; }

/* Remember-me reference; retain a native, keyboard-operable checkbox. */
.signin-remember-row { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.lc-signin .login-main .theme-form .signin-remember-row input { appearance: none; flex: 0 0 16px; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; cursor: pointer; }
.lc-signin .login-main .theme-form .signin-remember-row input:checked { background: #059669; border-color: #059669; }
.signin-remember-row input:checked::after { content: ""; display: block; width: 5px; height: 9px; margin: 1px 0 0 4px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.signin-remember-row input:focus-visible { outline: 2px solid #6347d1; outline-offset: 3px; }
.lc-signin .signin-remember-row label { margin: 0; color: #475569; font-size: 12px; line-height: 16px; font-weight: 400; cursor: pointer; }
@media (forced-colors: active) {
  .lc-signin .login-main .theme-form .signin-remember-row input { appearance: auto; }
  .signin-remember-row input:checked::after { display: none; }
}

.signin-session-caption { margin-left: auto; color: #94a3b8; font-size: 12px; line-height: 16px; font-weight: 300; white-space: nowrap; }
.signin-remember-row { flex-wrap: wrap; }
@media (max-width: 340px) {
  .signin-session-caption { flex-basis: 100%; margin-left: 26px; }
}

.lc-signin .signin-submit-label { color: #fff; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: normal; text-transform: none; }

.signin-submit-arrow { display: block; flex: 0 0 16px; width: 16px; height: 16px; }

.lc-signin .login-main .theme-form > .signin-help { margin: 0; min-height: 24px; color: #64748b; font-size: 12px; line-height: 24px; font-weight: 300; text-align: center; }
.signin-help a { color: #6347d1; text-decoration: none; }
.signin-help a:hover { text-decoration: underline; }
.signin-help a:focus-visible { outline: 2px solid #6347d1; outline-offset: 3px; border-radius: 2px; }

.signin-password-toggle[aria-pressed="false"] .signin-eye-open,
.signin-password-toggle[aria-pressed="true"] .signin-eye-crossed { display: none; }
.signin-password-toggle[aria-pressed="false"] .signin-eye-crossed,
.signin-password-toggle[aria-pressed="true"] .signin-eye-open { display: block; }

.signin-submit.is-loading .signin-submit-arrow {  display: none; }

/* Spinner element baseline (hidden by default) */
.signin-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff; /* Matches button text color */
  animation: signin-spin 0.6s linear infinite;
  flex: 0 0 16px;
}

/* Show the spinner when the loading class is applied */
.signin-submit.is-loading .spinner {
  display: inline-block;
}

/* Disabled styling tweak for UX */
.signin-submit:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* Spinner Rotation Keyframes */
@keyframes signin-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Compact mobile layout from the login-first mobile design. app.css restyles
   .login-card/.login-main with !important below 768px, so those properties need it here too. */
@media (max-width: 767.98px) {
  .lc-signin .signin-shell { padding: 20px 16px 28px; }
  .lc-signin .signin-layout { gap: 28px; }
  .lc-signin .signin-logo--mobile { margin-bottom: 16px; }
  .lc-signin .signin-logo--mobile .lc-logo__lockup { width: 200px; height: auto; }

  .lc-signin .login-card { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
  .lc-signin .login-main { padding: 20px 18px !important; border-radius: 20px; }
  .lc-signin .login-main .theme-form h4 { font-size: clamp(20px, 5.6vw, 22px) !important; margin-bottom: 6px !important; }
  .lc-signin .login-main .signin-form-intro-text > p { font-size: 13px !important; line-height: 1.45; margin-bottom: 18px !important; }
  .lc-signin .login-main .theme-form .form-group { margin-bottom: 14px !important; }
  .lc-signin .login-card .col-form-label { font-size: 12px !important; }
  .lc-signin .login-card .form-control { height: 46px !important; font-size: 16px !important; }
  .lc-signin .login-main .theme-form .signin-submit { min-height: 48px; margin-top: 18px; }
  .lc-signin .login-card .signin-submit { background: var(--lc-primary-600) !important; border-color: var(--lc-primary-600) !important; }
  .lc-signin .signin-form-divider { margin: 18px 0 10px; }
  .lc-signin .login-main .theme-form > .signin-help { font-size: 12px !important; margin: 0 !important; }

  .lc-signin .signin-badge { margin-bottom: 20px; }
  .lc-signin .signin-intro h1 { font-size: 26px; letter-spacing: -0.8px; margin-bottom: 14px; }
  .lc-signin .signin-description { font-size: 15px; margin-bottom: 20px; }
  .lc-signin .signin-features { gap: 10px; }
  .lc-signin .signin-feature { min-height: 0; padding: 12px; gap: 10px; }
  .lc-signin .signin-feature strong { font-size: 14px; }
  .lc-signin .signin-feature p { font-size: 13px; }
  .lc-signin .signin-certifications { justify-content: center; gap: 10px 12px; margin-top: 20px; padding-top: 14px; font-size: 10.5px; }
  .lc-signin .signin-certifications li::before { margin-right: 5px; }
}