/* =============================================================
   LocalModels — Auth UI (sign-up / sign-in)
   Extracted from designs/auth/Auth.html (Rev 01, May 2026).

   Scope: ALL selectors are prefixed/rooted under .lm-page (the auth
   root wrapper) so nothing leaks into the rest of the site or
   collides with Bootstrap. The design already namespaces every
   class as .lm-* so NO renames were needed (no bare .card / .btn).

   Showcase chrome from the source file (.sheet, .frame, .mobile-frame,
   .mock-caption, .vs-*, .sec-*, .row-2, .row-mob, .meta) is intentionally
   omitted — those laid out the multi-preview review page, not the product.

   Font: keeps the design's 'Inter' family but renders immediately on
   system fallbacks. Load Inter elsewhere (preload/link) if desired — it
   is NOT @imported here so first paint never blocks on a remote font.
   ============================================================= */

/* -------------------------------------------------------------
   Design tokens — scoped to the auth root so they don't override
   global :root vars used elsewhere on the site.
   ------------------------------------------------------------- */
.lm-page {
  --emerald: #0F6F4F;
  --emerald-strong: #0A5439;
  --emerald-soft: #F3F8F5;
  --emerald-soft-2: #DCEBE2;
  --navy: #0F172A;
  --ink: #0F172A;
  --ink-2: #475569;
  --muted: #64748B;
  --muted-2: #94A3B8;
  --rule: #E2E8F0;
  --rule-2: #EEF2F6;
  --surface: #F8FAFC;
  --surface-2: #F1F5F9;
  --paper: #FFFFFF;
  --label: #94A3B8;
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;
  --danger-bd: #FECACA;
  --success: #0A5439;
  --success-bg: #F3F8F5;
  --success-bd: #DCEBE2;
}

/* Dark mode token overrides */
html[data-lm-theme="dark"] .lm-page,
html.lm-dark .lm-page {
  --navy: #f1f5f9;
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --rule: #334155;
  --rule-2: #1e293b;
  --surface: #0d1117;
  --surface-2: #1e293b;
  --paper: #1e293b;
  --label: #cbd5e1;
}

.lm-page,
.lm-page * { box-sizing: border-box; }

/* -------------------------------------------------------------
   Page wrapper (auth root)
   ------------------------------------------------------------- */
.lm-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--navy);
  background: var(--surface);
  min-height: 100%;
  padding: 56px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Dark mode — page background. Matches the chrome frame (--lm-bg #0d1117) so
   the auth content reads as one continuous dark surface with the topbar/frame.
   The right border mirrors the centered-frame edge (--lm-border #2a3038), which
   .lm-page would otherwise paint over. */
html[data-lm-theme="dark"] .lm-page,
html.lm-dark .lm-page {
  background: #0d1117;
  color: #f1f5f9;
  border-right: 1px solid #2a3038;
}

/* Subtle decorative gradient bands */
.lm-page::before,
.lm-page::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.lm-page::before {
  top: -180px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(15,111,79,0.07), transparent 70%);
  border-radius: 50%;
}
.lm-page::after {
  bottom: -200px; left: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(15,111,79,0.05), transparent 70%);
  border-radius: 50%;
}

/* -------------------------------------------------------------
   Brand header (logo tile + name + tagline) — sits OUTSIDE the card.
   Always emerald: it is the brand mark, not a role-mode signal.
   ------------------------------------------------------------- */
.lm-page .lm-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  text-decoration: none;
}
.lm-page .lm-brand-tile {
  width: 36px; height: 36px;
  background: #0F6F4F; /* hard emerald — brand mark stays emerald even in business mode */
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 10px rgba(15,111,79,0.22);
}
.lm-page .lm-brand-text { line-height: 1.2; }
.lm-page .lm-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.lm-page .lm-brand-name sup {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  vertical-align: super;
  margin-left: 1px;
}
.lm-page .lm-brand-name .dot { font-weight: 500; color: var(--muted); }
.lm-page .lm-brand-tag {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
}

/* -------------------------------------------------------------
   Card
   ------------------------------------------------------------- */
.lm-card {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 12px 32px rgba(15,23,42,0.06);
  padding: 40px;
  position: relative;
  z-index: 1;
}

/* Dark mode — card */
html[data-lm-theme="dark"] .lm-card,
html.lm-dark .lm-card {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
}

.lm-card-sm { max-width: 540px; } /* sign-in — wider so the Google/Facebook social buttons fit on one row */
.lm-card-lg { max-width: 520px; } /* sign-up */

.lm-card h2 {
  margin: 0 0 6px 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.2;
}

/* Dark mode — card heading */
html[data-lm-theme="dark"] .lm-card h2,
html.lm-dark .lm-card h2 {
  color: #f1f5f9;
}

.lm-card .lm-sub {
  margin: 0 0 28px 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Dark mode — card subtext */
html[data-lm-theme="dark"] .lm-card .lm-sub,
html.lm-dark .lm-card .lm-sub {
  color: #94a3b8;
}

/* -------------------------------------------------------------
   Social login row (Google / LinkedIn / Facebook / X) — icon-only 4-up
   ------------------------------------------------------------- */
.lm-social {
  display: flex;
  flex-wrap: nowrap;          /* always one row — never break onto two lines */
  gap: 8px;
  margin-bottom: 22px;
}
/* The class name ".lm-social" also styles the profile social-bar in
   lm-profile.css (border + padding + radius), which loads site-wide and would
   wrap this button row in an extra box. Scope-reset it here so only the two
   provider buttons show their own borders — no outer frame. */
.lm-auth-embed .lm-social {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.lm-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 44px;             /* icon-only providers: fixed square */
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  color: var(--navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
/* Labeled providers: split the row in EQUAL shares (flex-basis 0), so two
   labeled buttons are 50/50, three are thirds. When only Google is labeled it
   simply takes all the space the icon-only squares leave. */
.lm-social-btn--labeled {
  flex: 1 1 0;
  width: auto;
  min-width: 0;              /* allow shrink so the row never wraps */
  padding: 0 14px;
}
.lm-social-btn:hover,
.lm-social-btn:focus-visible {
  background: var(--surface);
  border-color: #CBD5E1;
  outline: none;
}

/* Dark mode — social buttons */
html[data-lm-theme="dark"] .lm-social-btn,
html.lm-dark .lm-social-btn {
  background: #334155;
  border-color: #475569;
  color: #f1f5f9;
}
html[data-lm-theme="dark"] .lm-social-btn:hover,
html.lm-dark .lm-social-btn:hover,
html[data-lm-theme="dark"] .lm-social-btn:focus-visible,
html.lm-dark .lm-social-btn:focus-visible {
  background: #3e4c63;
  border-color: #64748b;
}

.lm-social-btn svg { display: block; flex: 0 0 auto; }
.lm-social-btn .lbl { display: none; }                 /* default: icon-only */
.lm-social-btn--labeled .lbl {                          /* Google: show label */
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------
   Divider ("or sign up with email")
   ------------------------------------------------------------- */
.lm-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 24px 0;
  /* Neutralise the generic .lm-divider{height:1px;background} in lm-profile.css
     (same selector, leaks per-property) — otherwise this flex divider collapses
     to a 1px line and the text sits on top of it. */
  height: auto;
  background: none;
}
.lm-divider::before,
.lm-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Dark mode — divider */
html[data-lm-theme="dark"] .lm-divider::before,
html.lm-dark .lm-divider::before,
html[data-lm-theme="dark"] .lm-divider::after,
html.lm-dark .lm-divider::after {
  background: #334155;
}

.lm-divider span {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Dark mode — divider text */
html[data-lm-theme="dark"] .lm-divider span,
html.lm-dark .lm-divider span {
  color: #64748b;
}

/* -------------------------------------------------------------
   Form layout primitives
   ------------------------------------------------------------- */
.lm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.lm-field { margin-bottom: 14px; }
.lm-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.lm-label .opt { color: var(--muted-2); font-weight: 500; margin-left: 4px; }

/* Dark mode — labels and fields */
html[data-lm-theme="dark"] .lm-label,
html.lm-dark .lm-label {
  color: #f1f5f9;
}

/* -------------------------------------------------------------
   Inputs & selects
   ------------------------------------------------------------- */
.lm-page .lm-input,
.lm-page .lm-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--navy);
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
  appearance: none;
  -webkit-appearance: none;
}
.lm-page .lm-input::placeholder { color: var(--muted-2); }
.lm-page .lm-input:focus,
.lm-page .lm-select:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(15,111,79,0.12);
}

/* Inline validation — soft border + helper text (NOT a red alert block) */
.lm-page .lm-input.is-invalid,
.lm-page .lm-select.is-invalid {
  border-color: #DC2626;
  background: var(--danger-bg);
}
.lm-page .lm-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.lm-page .lm-input.is-valid {
  border-color: var(--emerald-soft-2);
  background: var(--emerald-soft);
}

/* Locked field — email pulled (and verified) from the social provider.
   readonly keeps the value posting; this just makes it visibly non-editable. */
.lm-page .lm-input.is-locked {
  background: #f3f4f6;
  color: var(--muted-2);
  cursor: not-allowed;
}
.lm-page .lm-input.is-locked:focus {
  border-color: var(--rule);
  box-shadow: none;
}
.lm-page .lm-field-hint {
  margin: 6px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted-2);
}

/* Dark mode — input fields */
html[data-lm-theme="dark"] .lm-page .lm-input,
html.lm-dark .lm-page .lm-input,
html[data-lm-theme="dark"] .lm-page .lm-select,
html.lm-dark .lm-page .lm-select {
  background: #0f172a;
  border-color: #334155;
  color: #f1f5f9;
}
html[data-lm-theme="dark"] .lm-page .lm-input::placeholder,
html.lm-dark .lm-page .lm-input::placeholder {
  color: #64748b;
}
html[data-lm-theme="dark"] .lm-page .lm-input:focus,
html.lm-dark .lm-page .lm-input:focus,
html[data-lm-theme="dark"] .lm-page .lm-select:focus,
html.lm-dark .lm-page .lm-select:focus {
  border-color: #0F6F4F;
  box-shadow: 0 0 0 3px rgba(15, 111, 79, 0.2);
}
html[data-lm-theme="dark"] .lm-page .lm-input.is-invalid,
html.lm-dark .lm-page .lm-input.is-invalid,
html[data-lm-theme="dark"] .lm-page .lm-select.is-invalid,
html.lm-dark .lm-page .lm-select.is-invalid {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}
html[data-lm-theme="dark"] .lm-page .lm-input.is-valid,
html.lm-dark .lm-page .lm-input.is-valid {
  border-color: #0F6F4F;
  background: rgba(15, 111, 79, 0.1);
}
html[data-lm-theme="dark"] .lm-page .lm-input.is-locked,
html.lm-dark .lm-page .lm-input.is-locked {
  background: #1e293b;
  color: #94a3b8;
}
/* Autofill styling in dark mode */
html[data-lm-theme="dark"] .lm-page .lm-input:-webkit-autofill,
html.lm-dark .lm-page .lm-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
html[data-lm-theme="dark"] .lm-page .lm-input:-webkit-autofill:focus,
html.lm-dark .lm-page .lm-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}

/* Helper text under a field */
.lm-help {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.lm-help.err {
  color: var(--danger);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-help.ok {
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Dark mode — helper text */
html[data-lm-theme="dark"] .lm-help,
html.lm-dark .lm-help {
  color: #94a3b8;
}
html[data-lm-theme="dark"] .lm-help.err,
html.lm-dark .lm-help.err {
  color: #ef4444;
}
html[data-lm-theme="dark"] .lm-help.ok,
html.lm-dark .lm-help.ok {
  color: #10b981;
}

/* Select wrapper draws the chevron */
.lm-select-wrap { position: relative; }
.lm-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.lm-select { padding-right: 36px; }

/* Dark mode — select chevron */
html[data-lm-theme="dark"] .lm-select-wrap::after,
html.lm-dark .lm-select-wrap::after {
  border-right-color: #64748b;
  border-bottom-color: #64748b;
}

/* -------------------------------------------------------------
   Password field + show/hide toggle
   ------------------------------------------------------------- */
.lm-pw { position: relative; }
.lm-pw .lm-input { padding-right: 44px; }
.lm-pw-toggle {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.lm-pw-toggle:hover { background: var(--surface); color: var(--navy); }

/* Dark mode — password toggle */
html[data-lm-theme="dark"] .lm-pw-toggle,
html.lm-dark .lm-pw-toggle {
  color: #64748b;
}
html[data-lm-theme="dark"] .lm-pw-toggle:hover,
html.lm-dark .lm-pw-toggle:hover {
  background: #1e293b;
  color: #f1f5f9;
}

/* -------------------------------------------------------------
   Role cards (talent vs business). Selected state = .is-selected
   on the <label class="lm-role">. The radio inside is visually hidden.
   ------------------------------------------------------------- */
.lm-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 6px;
}
.lm-role {
  display: block;
  position: relative;
  padding: 16px;
  background: #F3F8F5;
  border: 1.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.lm-role[data-mode="business"] {
  background: rgba(49,139,153,0.08);
}
.lm-role input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lm-role-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lm-role-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: #0F6F4F;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms, color 120ms;
}
.lm-role[data-mode="business"] .lm-role-icon {
  background: #00363F;
}
.lm-role-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--rule);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent; /* checkmark hidden until selected */
  transition: background 120ms, border-color 120ms, color 120ms;
}
.lm-role-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.lm-role-desc {
  display: block;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.lm-role:hover { border-color: #CBD5E1; }

.lm-role.is-selected {
  border-color: #0F6F4F;
  background: #F3F8F5;
  box-shadow: 0 0 0 3px rgba(15,111,79,0.08);
}
.lm-role.is-selected .lm-role-icon {
  background: #0F6F4F;
  color: #fff;
}
.lm-role.is-selected .lm-role-check {
  background: #0F6F4F;
  border-color: #0F6F4F;
  color: #fff; /* reveals the checkmark */
}

/* Keyboard a11y: focus ring when the hidden radio is focused */
.lm-role:focus-within {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(15,111,79,0.12);
}

/* Dark mode — role selector buttons */
html[data-lm-theme="dark"] .lm-role,
html.lm-dark .lm-role {
  background: #1e293b;
  border-color: #334155;
}
html[data-lm-theme="dark"] .lm-role[data-mode="business"],
html.lm-dark .lm-role[data-mode="business"] {
  background: #1e293b;
  border-color: #334155;
}
html[data-lm-theme="dark"] .lm-role-icon,
html.lm-dark .lm-role-icon {
  background: #0F6F4F;
  color: #fff;
}
html[data-lm-theme="dark"] .lm-role[data-mode="business"] .lm-role-icon,
html.lm-dark .lm-role[data-mode="business"] .lm-role-icon {
  background: #318b99;
}
html[data-lm-theme="dark"] .lm-role-title,
html.lm-dark .lm-role-title {
  color: #f1f5f9;
}
html[data-lm-theme="dark"] .lm-role-desc,
html.lm-dark .lm-role-desc {
  color: #94a3b8;
}
html[data-lm-theme="dark"] .lm-role-check,
html.lm-dark .lm-role-check {
  border-color: #475569;
  background: #0f172a;
}
html[data-lm-theme="dark"] .lm-role:hover,
html.lm-dark .lm-role:hover {
  border-color: #475569;
}
html[data-lm-theme="dark"] .lm-role.is-selected,
html.lm-dark .lm-role.is-selected {
  border-color: #0F6F4F;
  background: rgba(15, 111, 79, 0.1);
  box-shadow: 0 0 0 3px rgba(15, 111, 79, 0.15);
}
html[data-lm-theme="dark"] .lm-role[data-mode="business"].is-selected,
html.lm-dark .lm-role[data-mode="business"].is-selected {
  border-color: #318b99;
  background: rgba(49, 139, 153, 0.1);
  box-shadow: 0 0 0 3px rgba(49, 139, 153, 0.15);
}
html[data-lm-theme="dark"] .lm-role.is-selected .lm-role-check,
html.lm-dark .lm-role.is-selected .lm-role-check {
  background: #0F6F4F;
  border-color: #0F6F4F;
  color: #fff;
}
html[data-lm-theme="dark"] .lm-role[data-mode="business"].is-selected .lm-role-check,
html.lm-dark .lm-role[data-mode="business"].is-selected .lm-role-check {
  background: #318b99;
  border-color: #318b99;
  color: #fff;
}
html[data-lm-theme="dark"] .lm-role:focus-within,
html.lm-dark .lm-role:focus-within {
  border-color: #0F6F4F;
  box-shadow: 0 0 0 3px rgba(15, 111, 79, 0.15);
}

/* ROLE-BASED COLOR MODE
   Adding .lm-mode-business to the .lm-card flips four CSS variables
   from emerald -> corporate dark teal. Every var()-driven accent
   (selected role card, inputs focus ring, CTA, links, checkboxes,
   strength meter) follows automatically. The brand tile (outside the
   card) stays emerald by design.

   The source design ALSO sets these vars inline via JS for redundancy,
   but this class alone is sufficient — wire the class on/off in JS.
   ------------------------------------------------------------- */
.lm-mode-business {
  --emerald: #00363F;
  --emerald-strong: #002830;
  --emerald-soft: #EAF2F4;
  --emerald-soft-2: #BFD2D6;
}
.lm-mode-business .lm-role[data-mode="business"] {
  background: rgba(49,139,153,0.08) !important;
}
.lm-mode-business .lm-role[data-mode="business"] .lm-role-icon {
  background: #00363F !important;
  color: #fff !important;
}
.lm-mode-business .lm-input:focus,
.lm-mode-business .lm-select:focus {
  box-shadow: 0 0 0 3px rgba(0, 54, 63, 0.12);
}
.lm-mode-business .lm-role[data-mode="business"].is-selected {
  border-color: #00363F !important;
  background: rgba(0,54,63,0.08) !important;
  box-shadow: 0 0 0 3px rgba(0, 54, 63, 0.12) !important;
}
.lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-icon {
  background: #00363F !important;
  color: #fff !important;
}
.lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-check {
  background: #00363F !important;
  border-color: #00363F !important;
  color: #fff !important;
}
.lm-mode-business .lm-role:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 54, 63, 0.12);
}
.lm-mode-business .lm-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 54, 63, 0.25);
}
.lm-mode-business .lm-help.ok {
  color: #00363F;
}
.lm-mode-business .lm-strength.s-3 span:nth-child(-n+3),
.lm-mode-business .lm-strength.s-4 span {
  background: #00363F;
}

/* -------------------------------------------------------------
   Consent / remember-me checkboxes. Checked state = .is-checked
   on the <label class="lm-check">. Native checkbox visually hidden.
   ------------------------------------------------------------- */
.lm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Dark mode — checkbox label */
html[data-lm-theme="dark"] .lm-check,
html.lm-dark .lm-check {
  color: #cbd5e1;
}

.lm-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lm-check-box {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border: 1.5px solid #CBD5E1;
  background: var(--paper);
  border-radius: 5px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent; /* checkmark hidden until checked */
  transition: background 120ms, border-color 120ms, color 120ms;
}

/* Dark mode — checkbox box */
html[data-lm-theme="dark"] .lm-check-box,
html.lm-dark .lm-check-box {
  border-color: #475569;
  background: #0f172a;
}

.lm-check.is-checked .lm-check-box {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
}
.lm-check a {
  color: var(--emerald);
  text-decoration: none;
  font-weight: 500;
}
.lm-check a:hover { text-decoration: underline; }

/* Dark mode — checkbox link */
html[data-lm-theme="dark"] .lm-check a,
html.lm-dark .lm-check a {
  color: #2ea16f;
}

/* -------------------------------------------------------------
   Form-level messages (soft banners — success / error). Optional;
   inline field validation is preferred over these.
   ------------------------------------------------------------- */
.lm-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.lm-message-icon { flex-shrink: 0; margin-top: 1px; }
.lm-message-success {
  background: var(--success-bg);
  border: 1px solid var(--success-bd);
  color: var(--success);
}

/* Dark mode — message success */
html[data-lm-theme="dark"] .lm-message-success,
html.lm-dark .lm-message-success {
  background: rgba(15, 111, 79, 0.15);
  border-color: rgba(15, 111, 79, 0.3);
  color: #10b981;
}

.lm-message-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  color: var(--danger);
}

/* Dark mode — message error */
html[data-lm-theme="dark"] .lm-message-error,
html.lm-dark .lm-message-error {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: #ef4444;
}

.lm-message strong { font-weight: 600; }

/* -------------------------------------------------------------
   Submit button (CTA)
   ------------------------------------------------------------- */
.lm-cta {
  width: 100%;
  height: 48px;
  background: var(--emerald);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  margin-top: 20px;
  transition: background 120ms, box-shadow 120ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lm-cta:hover { background: var(--emerald-strong); }
.lm-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,111,79,0.25);
}

/* Dark mode CTA button — ensure visibility */
html[data-lm-theme="dark"] .lm-page .lm-cta,
html.lm-dark .lm-page .lm-cta,
html[data-lm-theme="dark"] .lm-card .lm-cta,
html.lm-dark .lm-card .lm-cta,
html[data-lm-theme="dark"] button.lm-cta,
html.lm-dark button.lm-cta {
  background: #2ea16f !important;
  color: #fff !important;
  border: none !important;
}
html[data-lm-theme="dark"] .lm-page .lm-cta:hover,
html.lm-dark .lm-page .lm-cta:hover,
html[data-lm-theme="dark"] .lm-card .lm-cta:hover,
html.lm-dark .lm-card .lm-cta:hover,
html[data-lm-theme="dark"] button.lm-cta:hover,
html.lm-dark button.lm-cta:hover {
  background: #6ee7a8 !important;
  color: #0f172a !important;
}

/* Dark mode + business role: the Sign Up button follows the teal accent of
   the "Hire talent for my business" card, not the emerald talent default.
   Overrides the force-emerald dark CTA rule above (same specificity, later). */
html[data-lm-theme="dark"] .lm-card.lm-mode-business .lm-cta,
html.lm-dark .lm-card.lm-mode-business .lm-cta {
  background: #318b99 !important;
  color: #fff !important;
}
html[data-lm-theme="dark"] .lm-card.lm-mode-business .lm-cta:hover,
html.lm-dark .lm-card.lm-mode-business .lm-cta:hover {
  background: #3d9fb0 !important;
  color: #fff !important;
}

/* -------------------------------------------------------------
   Inline links & footer links
   ------------------------------------------------------------- */
.lm-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  margin-bottom: 6px;
}
.lm-link {
  color: var(--emerald);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.lm-link:hover { text-decoration: underline; }

.lm-footer-link {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.lm-footer-link a {
  color: var(--emerald);
  text-decoration: none;
  font-weight: 500;
}
.lm-footer-link a:hover { text-decoration: underline; }

/* -------------------------------------------------------------
   Password strength meter (4 segments). Apply .s-2 / .s-3 / .s-4
   on the .lm-strength element to fill segments.
   ------------------------------------------------------------- */
.lm-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.lm-strength span {
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
}
.lm-strength.s-2 span:nth-child(-n+2) { background: #F59E0B; }
.lm-strength.s-3 span:nth-child(-n+3) { background: var(--emerald); }
.lm-strength.s-4 span { background: var(--emerald); }

/* -------------------------------------------------------------
   Mini page footer under the card
   ------------------------------------------------------------- */
.lm-page-footer {
  margin-top: 28px;
  font-size: 12px;
  color: var(--muted-2);
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
}
.lm-page-footer a { color: var(--muted); text-decoration: none; }
.lm-page-footer a:hover { color: var(--navy); }

/* Three-up birthdate selects (Month / Day / Year) on narrow widths */
.lm-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* =============================================================
   RESPONSIVE — collapses to a single column down to 375px.
   In the source these lived under `.mobile-frame .lm-*` (the 375px
   showcase phone). Re-expressed here as a real mobile media query.
   ============================================================= */
@media (max-width: 480px) {
  .lm-page { padding: 24px 18px 32px; }
  .lm-page .lm-brand { margin-bottom: 22px; }

  .lm-card {
    padding: 24px 20px;
    border-radius: 14px;
  }
  .lm-card h2 { font-size: 22px; }

  /* Name fields stack */
  .lm-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .lm-row .lm-field { margin-bottom: 14px; }

  /* Birthdate keeps three selects in a row */
  .lm-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  /* Role cards stack vertically */
  .lm-role-grid { grid-template-columns: 1fr; }

  /* Social buttons stay on one row (Google labeled + icon-only squares) */
  .lm-social { flex-wrap: nowrap; }

  /* Trim decorative bands on small screens */
  .lm-page::before { width: 320px; height: 320px; top: -160px; right: -100px; }
  .lm-page::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   LM auth integration — site-embedded layout (left value-prop column +
   centered card), label helpers, birthdate trigger + calendar popover.
   Added by Phase auth-integration (2026-05-21). Layout pieces live inside
   .lm-page so the design vars cascade; the calendar popover is appended to
   <body>, so it uses literal colours.
   ════════════════════════════════════════════════════════════════════ */
.lm-auth-page { min-height: calc(100vh - 56px); }
.lm-auth-shell {
  width: 100%; max-width: 1000px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.lm-auth-main { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lm-auth-main .lm-card { width: 100%; }
.lm-auth-aside-inner { max-width: 400px; }
.lm-auth-aside .lm-brand { margin-bottom: 30px; }
.lm-auth-aside-h { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); line-height: 1.2; margin: 0 0 22px; }
.lm-auth-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lm-auth-aside-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-muted, #475569); line-height: 1.5; }
.lm-auth-aside-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--emerald-soft, #F3F8F5); color: var(--emerald, #0F6F4F); display: grid; place-items: center; margin-top: 1px; }

/* Dark mode: light text for auth aside list */
html[data-lm-theme="dark"] .lm-auth-aside-list li,
html.lm-dark .lm-auth-aside-list li {
  color: #c9d1d9 !important;
}
html[data-lm-theme="dark"] .lm-auth-aside-ic,
html.lm-dark .lm-auth-aside-ic {
  background: rgba(46,161,111,.16) !important;
  color: #6ee7a8 !important;
}

@media (max-width: 880px) {
  .lm-auth-shell { grid-template-columns: 1fr; max-width: 540px; gap: 0; }
  .lm-auth-aside { display: none; }
}

/* label helpers */
.lm-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lm-label-opt { font-weight: 500; font-size: 11px; color: var(--ink-muted-2, #94A3B8); text-transform: none; letter-spacing: 0; }
.lm-link-sm { font-size: 12px; }

/* birthdate trigger — styled like .lm-input, opens the calendar */
.lm-dob-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.lm-dob-value { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-dob-trigger.is-empty .lm-dob-value { color: var(--ink-muted-2, #94A3B8); }
.lm-dob-ic { color: var(--ink-muted, #64748B); flex: 0 0 auto; }

/* calendar popover (mounted on <body> — literal colours) */
.lm-dp-pop { position: absolute; z-index: 3000; width: 300px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; box-shadow: 0 18px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08); padding: 14px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.lm-dp-pop[hidden] { display: none; }
.lm-dp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lm-dp-nav { width: 30px; height: 30px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; color: #0f172a; cursor: pointer; font-size: 17px; line-height: 1; padding: 0; }
.lm-dp-nav:hover { background: #f3f8f5; border-color: #dcebe2; color: #0a5439; }
.lm-dp-mon, .lm-dp-yr { appearance: none; -webkit-appearance: none; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; padding: 6px 8px; font-family: inherit; font-size: 13px; font-weight: 600; color: #0f172a; cursor: pointer; }
.lm-dp-mon { flex: 1 1 auto; }
.lm-dp-yr { flex: 0 0 78px; }
.lm-dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.lm-dp-dow span { text-align: center; font-size: 10px; font-weight: 600; color: #64748b; text-transform: uppercase; padding: 4px 0; }
.lm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lm-dp-grid > span { display: block; }
.lm-dp-day { appearance: none; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 13px; color: #0f172a; border-radius: 8px; padding: 7px 0; cursor: pointer; width: 100%; }
.lm-dp-day:hover { background: #f3f8f5; color: #0a5439; border-color: #dcebe2; }
.lm-dp-day.is-out { color: #cbd5e1; cursor: default; }
.lm-dp-day.is-out:hover { background: transparent; color: #cbd5e1; border-color: transparent; }
.lm-dp-day.is-selected { background: #0F6F4F; color: #fff; font-weight: 700; }
.lm-dp-day.is-selected:hover { background: #0A5439; color: #fff; }

/* ════════════════════════════════════════════════════════════════════
   Auth FINAL (2026-05-21) — embedded in site chrome, role value-prop image,
   2-stage signup, signin-mode (no aside). Overrides the earlier standalone
   .lm-page fullscreen behaviour.
   ════════════════════════════════════════════════════════════════════ */
/* Centre the auth content in the main area — both axes, not glued top-left.
   min-height gives vertical room (short forms sit mid-page); taller forms grow
   + scroll. align-items:center caps + centres the shell horizontally. */
.lm-auth-embed { min-height: calc(100vh - 150px); padding: 32px 16px 40px; background: transparent; overflow: visible; align-items: center; justify-content: center; }
.lm-auth-embed::before, .lm-auth-embed::after { display: none !important; }

/* Keep the value-prop image+text vertically CENTRED relative to the form so it
   doesn't jump when stage 2 expands. */
.lm-auth-shell { align-items: center; margin: 0 auto; }
/* Form on the LEFT, value-prop image on the RIGHT (desktop). */
/* Both sign-in and sign-up: form on the LEFT, value-prop image on the RIGHT. */
.lm-auth-shell .lm-auth-main  { order: 0; }
.lm-auth-shell .lm-auth-aside { order: 1; }

/* Role value-prop image — two stacked frames that CROSS-FADE on role switch. */
.lm-auth-figure { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 22px; background: var(--emerald-soft, #F3F8F5); aspect-ratio: 4 / 3; }
.lm-auth-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .5s ease; }
.lm-auth-img.is-hidden { opacity: 0; }

/* Stage 2 — smooth height + fade reveal (lm-auth.js sets max-height/opacity inline). */
.lm-auth-stage2 { overflow: hidden; transition: max-height .45s ease, opacity .35s ease; }
.lm-auth-stage2[hidden] { display: none !important; }

/* Mobile (≤880): stack — image on TOP, form below (signup); signin stays a
   lone centered card. Heading + bullets dropped on mobile to keep it compact. */
@media (max-width: 880px) {
  .lm-auth-shell { grid-template-columns: 1fr; max-width: 560px; gap: 10px; }
  .lm-auth-shell .lm-auth-aside { display: block; order: 0; }
  .lm-auth-shell .lm-auth-main  { order: 1; }
  .lm-auth-aside-h, .lm-auth-aside-list { display: none; }
  .lm-auth-figure { margin-bottom: 0; aspect-ratio: auto; height: 180px; }
}
@media (max-width: 480px) {
  .lm-auth-figure { height: 150px; }
}

/* ════════════════════════════════════════════════════════════════════
   Auth — DARK THEME + footer pinned to viewport bottom (2026-05-21).
   Components are var-driven, so dark = a token override on .lm-page.
   ════════════════════════════════════════════════════════════════════ */
html[data-lm-theme="dark"] .lm-page {
  --emerald: #2ea16f;
  --emerald-strong: #6ee7a8;
  --emerald-soft: rgba(46,161,111,.16);
  --emerald-soft-2: rgba(46,161,111,.42);
  --navy: #e6edf3;
  --ink: #e6edf3;
  --ink-2: #b9c2cc;
  --muted: #9aa4b0;
  --muted-2: #748090;
  --rule: #2b323c;
  --rule-2: #232932;
  --surface: #161b22;
  --surface-2: #1c2230;
  --paper: #1b212b;
  --label: #9aa4b0;
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,.14);
  --danger-bd: rgba(248,113,113,.42);
  --success: #6ee7a8;
  --success-bg: rgba(46,161,111,.16);
  --success-bd: rgba(46,161,111,.42);
}
/* Business role in dark mode: #00363f is too dark — use a lighter teal. */
html[data-lm-theme="dark"] .lm-card.lm-mode-business {
  --emerald: #3d8b9e; --emerald-strong: #6fc7d8;
  --emerald-soft: rgba(61,139,158,.18); --emerald-soft-2: rgba(61,139,158,.45);
}
/* Dark mode keeps the lighter teal #318b99 for the business role icon/border/
   check — the light-mode #00363f set in the base rules is too dark on the dark
   card. Matches the dark business CTA (#318b99). */
html[data-lm-theme="dark"] .lm-mode-business .lm-role[data-mode="business"] .lm-role-icon,
html.lm-dark .lm-mode-business .lm-role[data-mode="business"] .lm-role-icon,
html[data-lm-theme="dark"] .lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-icon,
html.lm-dark .lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-icon {
  background: #318b99 !important;
}
html[data-lm-theme="dark"] .lm-mode-business .lm-role[data-mode="business"].is-selected,
html.lm-dark .lm-mode-business .lm-role[data-mode="business"].is-selected {
  border-color: #318b99 !important;
  box-shadow: 0 0 0 3px rgba(49, 139, 153, 0.12) !important;
}
html[data-lm-theme="dark"] .lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-check,
html.lm-dark .lm-mode-business .lm-role[data-mode="business"].is-selected .lm-role-check {
  background: #318b99 !important;
  border-color: #318b99 !important;
}

/* Calendar popover (mounted on <body>) — dark variant. */
html[data-lm-theme="dark"] .lm-dp-pop { background: #1b212b; border-color: #2b323c; box-shadow: 0 18px 48px rgba(0,0,0,.5); }
html[data-lm-theme="dark"] .lm-dp-nav { background: #232932; border-color: #2b323c; color: #e6edf3; }
html[data-lm-theme="dark"] .lm-dp-nav:hover { background: rgba(46,161,111,.18); border-color: rgba(46,161,111,.4); color: #6ee7a8; }
html[data-lm-theme="dark"] .lm-dp-mon, html[data-lm-theme="dark"] .lm-dp-yr { background: #232932; border-color: #2b323c; color: #e6edf3; }
html[data-lm-theme="dark"] .lm-dp-dow span { color: #9aa4b0; }
html[data-lm-theme="dark"] .lm-dp-day { color: #e6edf3; }
html[data-lm-theme="dark"] .lm-dp-day:hover { background: rgba(46,161,111,.18); color: #6ee7a8; border-color: rgba(46,161,111,.4); }
html[data-lm-theme="dark"] .lm-dp-day.is-out, html[data-lm-theme="dark"] .lm-dp-day.is-out:hover { color: #495059; background: transparent; border-color: transparent; }
html[data-lm-theme="dark"] .lm-dp-day.is-selected { background: #2ea16f; color: #0b1015; }

/* Footer pinned to the bottom of the screen on the auth page (desktop). The
   left/right offsets mirror lm-chrome-active body padding so it spans exactly
   the content frame (right of the 240px sidebar). */
@media (min-width: 769px) {
  html.lm-auth-page-active .lm-page-footer {
    position: fixed; bottom: 0; z-index: 40;
    left: max(240px, calc((100vw - 1440px) / 2 + 240px));
    right: max(0px, calc((100vw - 1440px) / 2));
    width: auto;   /* override base width:100% — with left+right set, 100% would overflow the viewport and push the right-side controls (language switcher) off-screen */
    background: #FFFFFF; border-top: 1px solid #E2E8F0;
  }
  html[data-lm-theme="dark"].lm-auth-page-active .lm-page-footer { background: #11161d; border-top-color: #2b323c; }
  html.lm-auth-page-active .main-wrapper { padding-bottom: 80px; }
}

/* ── Wider signup form (2026-05-21) ───────────────────────────────────
   Give the form column more width than the image column so the paired
   fields (first/last, email/password) stop looking cramped. Desktop only;
   the ≤880 stack rule keeps mobile single-column. */
@media (min-width: 881px) {
  /* Shell stays ~1060 so it centers with clear equal margins inside the
     ~1200px chrome content area; the column ratio leans toward the form so
     the card keeps its wider fields (the extra width comes off the image,
     not off the side margins). */
  .lm-auth-shell {
    max-width: 1060px;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  }
  .lm-card-lg { max-width: 700px; }
}

/* Consent secondary line — Terms & Privacy links / newsletter detail
   drop to their own row beneath the checkbox label. */
.lm-check-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.lm-check-sub a { color: var(--emerald); text-decoration: none; }
.lm-check-sub a:hover { text-decoration: underline; }

/* Dark mode input field fix — ensure text is visible on dark backgrounds */
/* Ultra-specific rules to beat Bootstrap */
html[data-lm-theme="dark"] input.lm-input,
html.lm-dark input.lm-input,
html[data-lm-theme="dark"] input[type="password"].lm-input,
html.lm-dark input[type="password"].lm-input,
html[data-lm-theme="dark"] input[type="email"].lm-input,
html.lm-dark input[type="email"].lm-input,
html[data-lm-theme="dark"] input[type="text"].lm-input,
html.lm-dark input[type="text"].lm-input,
html[data-lm-theme="dark"] select.lm-select,
html.lm-dark select.lm-select {
  background: #1b212b !important;
  color: #e6edf3 !important;
  border-color: #2b323c !important;
}

html[data-lm-theme="dark"] .lm-input::placeholder,
html.lm-dark .lm-input::placeholder {
  color: #748090 !important;
}

/* Dark mode: fix autofill background and text color */
html[data-lm-theme="dark"] input.lm-input:-webkit-autofill,
html.lm-dark input.lm-input:-webkit-autofill,
html[data-lm-theme="dark"] input[type="password"].lm-input:-webkit-autofill,
html.lm-dark input[type="password"].lm-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1b212b inset !important;
  -webkit-text-fill-color: #e6edf3 !important;
}

html[data-lm-theme="dark"] input.lm-input:-webkit-autofill:focus,
html.lm-dark input.lm-input:-webkit-autofill:focus,
html[data-lm-theme="dark"] input[type="password"].lm-input:-webkit-autofill:focus,
html.lm-dark input[type="password"].lm-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1b212b inset !important;
  -webkit-text-fill-color: #e6edf3 !important;
}

html[data-lm-theme="dark"] .lm-input:focus,
html.lm-dark .lm-input:focus,
html[data-lm-theme="dark"] .lm-select:focus,
html.lm-dark .lm-select:focus {
  border-color: #2ea16f !important;
  box-shadow: 0 0 0 3px rgba(46,161,111,0.12) !important;
}

html[data-lm-theme="dark"] .lm-input.is-invalid,
html.lm-dark .lm-input.is-invalid,
html[data-lm-theme="dark"] .lm-select.is-invalid,
html.lm-dark .lm-select.is-invalid {
  border-color: #f87171 !important;
  background: rgba(248,113,113,.14) !important;
}