@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&family=Poppins:wght@500;600;700;800;900&display=swap');

/* ─── CSS Variables ───
   The auth screens load standalone (no global.css), so they carry their own
   copy of the type and surface tokens. Keep the font stacks and radii in
   step with global.css v4 or sign-in will drift from the rest of the app. */
:root {
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.011em;
  --tracking-label:    0.06em;

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius:     10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-full: 999px;

  --bg:        #0b0a0d;
  --panel:     #131216;
  --panel2:    #1c1b21;
  --border:    rgba(255, 255, 255, 0.075);
  --border-2:  rgba(255, 255, 255, 0.14);
  --accent:    #f05a28;
  --accent-h:  #fd7343;
  --text:      #f4f3f6;
  --muted:     #a2a0ab;
  --input-bg:  #0e0d11;
  --input-bdr: rgba(255, 255, 255, 0.10);
  --purple:    #6b5ce7;   /* legacy; not used for chrome any more */

  --shadow-md: 0 2px 4px rgba(0,0,0,0.24), 0 8px 20px -8px rgba(0,0,0,0.48);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.24), 0 16px 36px -12px rgba(0,0,0,0.55);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.26), 0 28px 64px -20px rgba(0,0,0,0.62);
  --ring:      0 0 0 3px rgba(240,90,40,0.26);
}

/* ─── Reset & Base ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11' 1, 'ss03' 1, 'calt' 1;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-x: hidden;
}

/* ─── Particles ─── */
#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: particleDrift linear infinite;
}

@keyframes particleDrift {
  0%   { opacity: 0;    transform: translateY(0) scale(0); }
  10%  { opacity: 0.25; }
  90%  { opacity: 0.06; }
  100% { opacity: 0;    transform: translateY(-100vh) scale(1); }
}

/* ─── Outer Glow Wrapper ─── */
.lf-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  z-index: 1;
}

.lf-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--accent) 55%, transparent) 0%,
              transparent 45%,
              color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  z-index: 0;
  animation: borderPulse 6s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-wrapper::before { animation: none; opacity: 0.6; }
}

/* ─── Main Card ─── */
.lf-card {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: cardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════
   LEFT PANEL
════════════════════════════════ */
.lf-left {
  padding: 52px 52px 48px;
  display: flex;
  flex-direction: column;
  position: relative;
  background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(240, 90, 40, 0.18) 0%, transparent 70%);
  overflow: hidden;
}

.lf-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
}

/* Logo */
.lf-logo {
  letter-spacing: var(--tracking-label);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--text);
  text-transform: uppercase;
  animation: fadeUp 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* The wordmark stood here alone. Sign-in is the first surface a new account
   ever sees, and it was the one screen in the product where the mark did not
   appear — so the tile someone learns on the dashboard was nowhere on the page
   that sends them there. The tile below is the header's: same gradient, same
   optical size, same radius family. */
.lf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lf-brand__mark {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 9px;
  background: linear-gradient(145deg, #fd7343, #f05a28);
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* Deliberately the same delay and curve as `.lf-logo` above. A mark that
     enters on a different beat from its own wordmark reads as two arriving
     elements rather than one lockup. */
  animation: fadeUp 0.6s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Headline */
.lf-headline {
  letter-spacing: var(--tracking-display);
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.08;
  color: var(--text);
  margin-top: 40px;
  animation: fadeUp 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lf-sub {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  margin-top: 18px;
  max-width: 340px;
  animation: fadeUp 0.6s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── AI Slider ─── */
/* ── The offer ───────────────────────────────────────────────────
   Sits between the hero and the slider, because it is the sentence
   that converts: every competitor sells upside, which is unprovable
   at trial. This one is true by construction — Protect mode may only
   reduce spend — so it carries no risk for the reader to accept. */

.lf-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.lf-offer__pill {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .lf-offer {
    margin-bottom: 18px;
  }
}

.lf-slider-wrap {
  margin-top: 44px;
  max-width: 380px;
  animation: fadeUp 0.6s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  z-index: 2;
}

.lf-slider .carousel-inner {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* All slides share the tallest slide's height so the card never jumps */
.lf-slider .carousel-item {
  min-height: 136px;
}

.lf-slide-card {
  background: #1e1e20;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  height: 100%;
  min-height: 136px;
  display: flex;
  flex-direction: column;
}

.lf-slide-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.lf-tag {
  background: rgba(240, 90, 40, 0.15);
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.lf-dots {
  display: flex;
  gap: 4px;
}

.lf-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.lf-dots span:nth-child(2) { animation-delay: 0.2s; }
.lf-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 60%, 100% { opacity: 1;    transform: scale(1);    }
  30%            { opacity: 0.35; transform: scale(0.72); }
}

.lf-slide-text {
  font-size: 14px;
  color: #ccc;
  line-height: 1.65;
}

/* ─── Slider control row (below the card) ─── */
.lf-slider-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

/* Nav dots — flow inline instead of overlaying the slide */
.lf-slider .carousel-indicators {
  position: static;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  z-index: auto;
}

.lf-slider .carousel-indicators [data-bs-target] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  border: none;
  margin: 0;
  padding: 0;
  opacity: 0.55;
  text-indent: 0;
  transition: background 0.3s, transform 0.3s, opacity 0.3s, width 0.3s;
}

.lf-slider .carousel-indicators [data-bs-target]:hover {
  opacity: 0.85;
}

.lf-slider .carousel-indicators .active {
  background: var(--accent);
  opacity: 1;
  width: 18px;
  border-radius: var(--radius-xs);
}

/* Prev / Next arrows — sit in the control row, not floating outside the panel */
.lf-slider-arrows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lf-slider .carousel-control-prev,
.lf-slider .carousel-control-next {
  position: static;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-radius: 50%;
  border: 1px solid var(--border);
  opacity: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.lf-slider .carousel-control-prev:hover,
.lf-slider .carousel-control-next:hover {
  background: rgba(240, 90, 40, 0.2);
  border-color: rgba(240, 90, 40, 0.45);
  color: var(--accent);
}

.lf-slider .carousel-control-prev:focus-visible,
.lf-slider .carousel-control-next:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Trust Section ─── */
.lf-trust {
  margin-top: auto;
  padding-top: 44px;
  animation: fadeUp 0.6s 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lf-trust-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Channel marks. The partial emits `.lf-channel.ig-logo` with the brand's own
   dark tint as an inline background, so these rules only size and space the
   tile — the colour belongs to each platform. */
.lf-channels {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lf-channel {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition, .2s ease), border-color var(--transition, .2s ease);
}

.lf-channel:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
}

.lf-channel svg { display: block; }

/* ════════════════════════════════
   RIGHT PANEL
════════════════════════════════ */
.lf-right {
  background: var(--panel2);
  padding: 44px 52px 36px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  animation: fadeUp 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── Tabs ─── */
.lf-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 36px;
}

.lf-tab {
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s;
}

.lf-tab.active {
  background: var(--accent);
  color: #fff;
}

.lf-tab.inactive {
  background: transparent;
  color: var(--muted);
}

.lf-tab.inactive:hover { color: var(--text); }

/* ─── Form ─── */
.lf-form-title {
  letter-spacing: var(--tracking-display);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.lf-form-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 30px;
}

.lf-field { margin-bottom: 18px; }

.lf-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.lf-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.lf-forgot {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}

.lf-forgot:hover { opacity: 0.75; }

.lf-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-bdr);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lf-input::placeholder { color: #44444a; }

.lf-input:focus {
  border-color: rgba(240, 90, 40, 0.5);
  box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.12);
}

/* ─── Sign In Button ─── */
.lf-btn-signin {
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 14px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.lf-btn-signin::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
}

.lf-btn-signin:hover {
  background: var(--accent-h);
  box-shadow: 0 6px 24px rgba(240, 90, 40, 0.35);
  transform: translateY(-1px);
}

.lf-btn-signin:active { transform: translateY(0); }

.lf-btn-signin .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Divider ─── */
.lf-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.lf-divider::before,
.lf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─── Google Button ─── */
.lf-btn-google {
  width: 100%;
  background: transparent;
  border: 1px solid var(--input-bdr);
  border-radius: var(--radius-sm);
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.lf-btn-google:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.lf-btn-google:active { transform: translateY(0); }

/* ─── Footer ─── */
.lf-form-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--muted);
}

.lf-form-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.lf-form-footer a:hover { opacity: 0.75; }

.lf-support {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: var(--font-sans);
}

.lf-support:hover { color: var(--text); }

/* ─── Fade Up Keyframe ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .lf-card {
    grid-template-columns: 1fr;
  }

  .lf-left {
    padding: 36px 28px 36px;
  }

  .lf-headline {
    font-size: 34px;
  }

  .lf-right {
    padding: 36px 28px 32px;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .lf-slider-wrap {
    max-width: 100%;
    margin-top: 32px;
  }
}

/* ════════════════════════════════
   FORGOT PASSWORD MODAL
════════════════════════════════ */
.lf-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lf-modal__box {
  position: relative;
  z-index: 1;
  background: #1e1e22;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 420px;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}

/* Open state */
.lf-modal--open {
  pointer-events: all;
}

.lf-modal--open .lf-modal__overlay {
  opacity: 1;
}

.lf-modal--open .lf-modal__box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close button */
.lf-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.lf-modal__close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

/* Icon */
.lf-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(240,90,40,0.12);
  border: 1px solid rgba(240,90,40,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 20px;
}

.lf-modal__title {
  letter-spacing: var(--tracking-display);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.lf-modal__sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Feedback message */
.lf-fp-msg {
  font-size: 13px;
  min-height: 18px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.lf-fp-msg--error   { color: #f05050; }
.lf-fp-msg--success { color: #4ade80; }


/* ═══════════════════════════════════════════════════════════════
   Notices
   ═══════════════════════════════════════════════════════════════
   One component for every message these screens show, in the two
   colours the modal already uses — #f05050 and #4ade80.

   Written down because the first version of this got it wrong in a
   way that is easy to repeat: these screens are DARK (--panel2 is
   #1c1b21), and the light-theme reds and greens a form usually
   reaches for (#b91c1c, #047857) are near-invisible on them.

   Above the form, never below. A message under the submit button is
   read after the attempt that failed, which is too late to prevent
   it. */

.lf-note {
  display: grid;
  gap: 4px;
  margin-bottom: 20px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.55;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lf-note strong {
  font-weight: 600;
}

.lf-note a {
  color: inherit;
  font-weight: 600;
}

.lf-note__help {
  font-size: 12px;
  opacity: 0.78;
}

.lf-note--error {
  border-color: rgba(240, 80, 80, 0.32);
  background: rgba(240, 80, 80, 0.09);
  color: #ff8080;
}

.lf-note--error strong { color: #ff9c9c; }

.lf-note--ok {
  border-color: rgba(74, 222, 128, 0.30);
  background: rgba(74, 222, 128, 0.08);
  color: #7ee2a4;
}

.lf-note--ok strong { color: #a5ecc0; }


/* ═══════════════════════════════════════════════════════════════
   Single-column auth pages
   ═══════════════════════════════════════════════════════════════
   Somebody arriving to reset a password clicked a link in their inbox
   to do one thing. The two-panel layout sells the product alongside
   the form, which is in the way of that.

   The wrapper is narrowed, not just the card: `.lf-wrapper::before`
   draws the glow at the wrapper's width, so leaving it at 1100px
   around a 460px card frames it in a halo three times its size. */

.lf-wrapper--single {
  max-width: 440px;
}

.lf-card--single {
  grid-template-columns: 1fr;
}

.lf-card--single .lf-right {
  border-left: 0;
  padding: 40px 40px 34px;
}

/* The lockup, on its own line above the title. The spacing moved from
   `.lf-logo` to `.lf-brand` when the mark joined it: left on the wordmark it
   pushed the text down inside the flex row and knocked it off the tile's
   centre line. `.lf-logo` is already light — it lives on the dark left panel
   on the sign-in page — so it needs no colour of its own here. */
.lf-card--single .lf-brand {
  margin-bottom: 26px;
}

.lf-card--single .lf-logo {
  display: block;
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════════
   Which account is being changed
   ═══════════════════════════════════════════════════════════════
   Shown, not editable. The address is what the token was issued
   against, so an editable field lets somebody change it and get
   "that link is no longer valid" — a message about the link, for a
   mistake they made in the form. It travels as a hidden input. */

.lf-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
}

.lf-account__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(240, 90, 40, 0.14);
  color: var(--accent);
}

.lf-account__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.lf-account__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

.lf-account__email {
  font-size: 13.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   Password field with a reveal
   ═══════════════════════════════════════════════════════════════
   A 12-character minimum on a field nobody can read is a rule people
   fail twice before they see it. The toggle is a real button so it
   reaches the keyboard. */

.lf-pw {
  position: relative;
}

.lf-pw .lf-input {
  padding-right: 46px;
}

.lf-pw__reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.lf-pw__reveal:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.lf-pw__reveal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* ═══════════════════════════════════════════════════════════════
   Live requirements
   ═══════════════════════════════════════════════════════════════
   The rules are visible before they are broken rather than reported
   afterwards by a validator. Two rules only: anything longer is a
   list people stop reading. */

.lf-rules {
  display: grid;
  gap: 7px;
  margin: -4px 0 20px;
  padding: 0;
  list-style: none;
}

.lf-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  transition: color 0.2s;
}

.lf-rule__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-2);
  font-size: 10px;
  line-height: 1;
  color: transparent;
  transition: all 0.2s;
}

.lf-rule.is-met {
  color: #7ee2a4;
}

.lf-rule.is-met .lf-rule__mark {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.14);
  color: #7ee2a4;
}