/* ============================================================
   BUILD PRODUCT FAMILY — Login Page | Command Center Terminal
   Dark / Light mode support via CSS custom properties.
   Compact layout — fits in one viewport.
   ============================================================ */

/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES — DARK (default)
   ═══════════════════════════════════════ */
.lg-universe {
  /* Background & surface */
  --lg-bg:               #0c111b;
  --lg-surface:          #151c2c;
  --lg-surface-hover:    rgba(255,255,255,0.05);
  --lg-border:           rgba(255,255,255,0.07);
  --lg-border-hover:     rgba(255,255,255,0.14);
  /* Text */
  --lg-text:             #f1f5f9;
  --lg-text-strong:      #ffffff;
  --lg-text-muted:       #cbd5e1;
  --lg-text-faint:       #b0bec9;
  --lg-text-placeholder: #8899aa;
  /* Input */
  --lg-input-bg:         rgba(255,255,255,0.04);
  --lg-input-bg-hover:   rgba(255,255,255,0.06);
  --lg-input-bg-focus:   rgba(255,255,255,0.07);
  --lg-input-border:     rgba(255,255,255,0.15);
  /* Accents */
  --lg-accent:           #7f56d9;
  --lg-accent-rgb:       127,86,217;
  --lg-purple:           #6941c6;
  --lg-purple-rgb:       105,65,198;
  --lg-blue:             #175cd3;
  --lg-blue-rgb:         23,92,211;
  /* Misc */
  --lg-grid-dot:         rgba(255,255,255,0.025);
  --lg-particle:         rgba(255,255,255,0.15);
  --lg-pill-bg:          rgba(255,255,255,0.04);
  --lg-pill-text:        #cbd5e1;
  --lg-pill-strong:      #f1f5f9;
  --lg-dropdown-bg:      #1e293b;
  --lg-dropdown-shadow:  rgba(0,0,0,0.5);
  --lg-shadow-terminal:  0 4px 8px rgba(0,0,0,0.2),
                         0 16px 48px rgba(0,0,0,0.3),
                         0 0 0 1px rgba(255,255,255,0.04);
  --lg-glow1:            rgba(127,86,217,0.12);
  --lg-glow2:            rgba(23,92,211,0.10);
  --lg-glow3:            rgba(105,65,198,0.07);
  --lg-social-hover-shadow: rgba(0,0,0,0.4);
  /* Theme toggle icon: dark mode shows sun, light shows moon */
  --lg-theme-icon-show:  inline-block;
  --lg-theme-icon-hide:  none;
  --lg-illus-opacity:    .28;
  --lg-illus-contrast:   1.18;
  --lg-illus-brightness: .88;
}

.lg-universe.lg-buildquality {
  --lg-bg: #061719;
  --lg-surface: #0d2527;
  --lg-surface-hover: rgba(45,212,191,0.08);
  --lg-border: rgba(94,234,212,0.12);
  --lg-border-hover: rgba(94,234,212,0.25);
  --lg-accent: #14b8a6;
  --lg-accent-rgb: 20,184,166;
  --lg-purple: #0f766e;
  --lg-purple-rgb: 15,118,110;
  --lg-blue: #2dd4bf;
  --lg-blue-rgb: 45,212,191;
  --lg-grid-dot: rgba(94,234,212,0.05);
  --lg-glow1: rgba(20,184,166,0.18);
  --lg-glow2: rgba(13,148,136,0.13);
  --lg-glow3: rgba(45,212,191,0.09);
}

.lg-universe.lg-buildquality .buildquality-mark {
  background: linear-gradient(145deg, #0f766e, #14b8a6);
  border-radius: 13px;
  box-shadow: 0 7px 20px rgba(20,184,166,.3);
}

.lg-universe.lg-buildquality .buildacs-wordmark b {
  color: #2dd4bf;
}

/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES — LIGHT
   ═══════════════════════════════════════ */
.lg-universe.lg-light {
  --lg-bg:               #f8fafc;
  --lg-surface:          #ffffff;
  --lg-surface-hover:    rgba(64,81,137,0.06);
  --lg-border:           rgba(64,81,137,0.20);
  --lg-border-hover:     rgba(64,81,137,0.30);
  --lg-text:             #0f172a;
  --lg-text-strong:      #020617;
  --lg-text-muted:       #1e293b;
  --lg-text-faint:       #334155;
  --lg-text-placeholder: #475569;
  --lg-input-bg:         #f1f5f9;
  --lg-input-bg-hover:   #e8eef4;
  --lg-input-bg-focus:   #fff;
  --lg-input-border:     rgba(64,81,137,0.25);
  --lg-accent:           #7f56d9;
  --lg-accent-rgb:       127,86,217;
  --lg-purple:           #7c3aed;
  --lg-purple-rgb:       124,58,237;
  --lg-blue:             #299cdb;
  --lg-blue-rgb:         41,156,219;
  --lg-grid-dot:         rgba(64,81,137,0.04);
  --lg-particle:         rgba(64,81,137,0.06);
  --lg-pill-bg:          rgba(64,81,137,0.08);
  --lg-pill-text:        #0f172a;
  --lg-pill-strong:      #020617;
  --lg-dropdown-bg:      #fff;
  --lg-dropdown-shadow:  rgba(64,81,137,0.12);
  --lg-shadow-terminal:  0 4px 6px rgba(64,81,137,0.04),
                         0 12px 40px rgba(64,81,137,0.08),
                         0 0 0 1px rgba(64,81,137,0.06);
  --lg-glow1:            rgba(127,86,217,0.08);
  --lg-glow2:            rgba(23,92,211,0.06);
  --lg-glow3:            rgba(105,65,198,0.04);
  --lg-social-hover-shadow: rgba(64,81,137,0.15);
  --lg-theme-icon-show:  none;
  --lg-theme-icon-hide:  inline-block;
  --lg-illus-opacity:    .40;
  --lg-illus-contrast:   1.08;
  --lg-illus-brightness: .98;
}

.lg-universe.lg-buildquality.lg-light {
  --lg-bg: #f1faf8;
  --lg-surface: #ffffff;
  --lg-surface-hover: rgba(15,118,110,0.07);
  --lg-border: rgba(15,118,110,0.20);
  --lg-border-hover: rgba(15,118,110,0.34);
  --lg-accent: #0f766e;
  --lg-accent-rgb: 15,118,110;
  --lg-purple: #0b5f59;
  --lg-purple-rgb: 11,95,89;
  --lg-blue: #14b8a6;
  --lg-blue-rgb: 20,184,166;
  --lg-grid-dot: rgba(15,118,110,0.06);
  --lg-pill-bg: rgba(15,118,110,0.07);
  --lg-glow1: rgba(20,184,166,0.10);
  --lg-glow2: rgba(15,118,110,0.07);
  --lg-glow3: rgba(45,212,191,0.05);
}

/* Light mode logo */
.lg-universe.lg-light .mc-bar {
  background: linear-gradient(90deg, #405189, #299cdb);
}
.lg-universe.lg-light .mc-mon {
  background: linear-gradient(135deg, #2a2e3d 0%, #405189 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════
   LIGHT MODE — ALL TEXT FORCED DARK / BLACK
   ══════════════════════════════════════════════ */

/* Left side hero */
.lg-universe.lg-light .lg-hero-title {
  color: #000 !important;
}
.lg-universe.lg-light .lg-hero-highlight {
  background: linear-gradient(135deg, var(--lg-purple) 0%, var(--lg-blue) 55%, var(--lg-accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800;
  opacity: 1 !important;
}

/* Left side feature cards */
.lg-universe.lg-light .lg-feat-card {
  background: rgba(64,81,137,0.08);
  border-color: rgba(64,81,137,0.22);
}
.lg-universe.lg-light .lg-feat-card:hover {
  background: rgba(64,81,137,0.14);
  border-color: rgba(64,81,137,0.35);
}
.lg-universe.lg-light .lg-feat-name {
  color: #000 !important;
}
.lg-universe.lg-light .lg-feat-sub {
  color: #1e293b !important;
}
.lg-universe.lg-light .lg-feat-icon {
  background: rgba(var(--fcr), 0.18);
}

/* Left side explore link */
.lg-universe.lg-light .lg-explore-link {
  background: rgba(64,81,137,0.08);
  border-color: rgba(64,81,137,0.22);
  color: #000 !important;
  font-weight: 700;
}
.lg-universe.lg-light .lg-explore-link:hover {
  background: rgba(64,81,137,0.16);
  border-color: rgba(64,81,137,0.35);
  color: #000 !important;
}

/* Right side terminal */
.lg-universe.lg-light .lg-term-title {
  color: #334155 !important;
}
.lg-universe.lg-light .lg-term-lock {
  color: var(--lg-accent) !important;
}

/* Right side greeting */
.lg-universe.lg-light .lg-greeting h2 {
  color: #000 !important;
}
.lg-universe.lg-light .lg-greeting p {
  color: #1e293b !important;
}

/* Right side form labels & inputs */
.lg-universe.lg-light .lg-field label {
  color: #0f172a !important;
}
.lg-universe.lg-light .lg-forgot {
  color: var(--lg-purple) !important;
}
.lg-universe.lg-light .lg-input-box input {
  color: #000 !important;
  border-color: rgba(64,81,137,0.30) !important;
}
.lg-universe.lg-light .lg-input-box input::placeholder {
  color: #64748b !important;
}
.lg-universe.lg-light .lg-input-ico {
  color: #475569 !important;
}

/* Right side checkbox, divider, social, signup */
.lg-universe.lg-light .lg-check-label {
  color: #0f172a !important;
}
.lg-universe.lg-light .lg-divider span {
  color: #334155 !important;
}
.lg-universe.lg-light .lg-oauth-button {
  color: #1e293b !important;
  border-color: rgba(64,81,137,0.25) !important;
}
.lg-universe.lg-light .lg-signup-row {
  color: #0f172a !important;
}
.lg-universe.lg-light .lg-signup-row a {
  color: var(--lg-accent) !important;
  font-weight: 700;
}

/* Status pill */
.lg-universe.lg-light .lg-status-pill {
  color: #1e293b !important;
}

/* Logo */
.lg-universe.lg-light .mc-mon {
  background: linear-gradient(135deg, #0f172a 0%, #1e40af 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.lg-universe.lg-light .mc-cls {
  background: linear-gradient(135deg, #299cdb 0%, #0ab39c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.lg-universe.lg-light .mc-reg {
  color: #0ab39c !important;
  -webkit-text-fill-color: #0ab39c !important;
}

/* Footer */
.lg-universe.lg-light .lg-footer {
  color: #334155 !important;
}

/* Dark mode logo adjustments */
.lg-universe:not(.lg-light) .mc-bar {
  background: linear-gradient(90deg, #94a3b8, #299cdb);
}
.lg-universe:not(.lg-light) .mc-mon {
  background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Universe container ── */
.lg-universe {
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--lg-bg);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--lg-text);
  transition: background 0.4s ease, color 0.4s ease;
}
.lg-universe.lg-buildacs {
  background:
    radial-gradient(circle at 8% 12%, rgba(127,86,217,.08), transparent 30%),
    radial-gradient(circle at 92% 86%, rgba(23,92,211,.07), transparent 32%),
    var(--lg-bg);
}
.lg-universe.lg-buildquality {
  background:
    linear-gradient(135deg, rgba(45,212,191,.025) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 8% 12%, rgba(20,184,166,.12), transparent 31%),
    radial-gradient(circle at 92% 86%, rgba(15,118,110,.13), transparent 34%),
    var(--lg-bg);
}
.lg-universe *, .lg-universe *::before, .lg-universe *::after { box-sizing: border-box; }

/* ── Dot grid background ── */
.lg-bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--lg-grid-dot) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
  mask: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

/* ── Ambient glows ── */
.lg-bg-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(120px);
  z-index: 1;
  transition: transform 0.4s ease-out, background 0.4s ease;
}

/* ── Construction illustration layer (transparent PNG) ── */
.lg-bg-illustration {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('/assets/images/Login.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(1150px, 92vw) auto;
  mix-blend-mode: normal;
  opacity: var(--lg-illus-opacity);
    filter: blur(2.2px)
      grayscale(.12)
          contrast(var(--lg-illus-contrast))
          brightness(var(--lg-illus-brightness));
  -webkit-mask: radial-gradient(ellipse 78% 68% at 52% 48%, #000 28%, transparent 82%);
  mask: radial-gradient(ellipse 78% 68% at 52% 48%, #000 28%, transparent 82%);
  transition: opacity .35s ease, filter .35s ease;
}

.lg-universe.lg-light .lg-bg-illustration {
  mix-blend-mode: normal;
  opacity: .46;
  filter: blur(1.8px) grayscale(.10) contrast(1.08) brightness(.98);
}

.lg-universe:not(.lg-light) .lg-bg-illustration {
  display: none;
}
.lg-glow-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--lg-glow1) 0%, transparent 70%);
  top: -150px; left: -100px;
}
.lg-glow-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--lg-glow2) 0%, transparent 70%);
  bottom: -130px; right: -80px;
}
.lg-glow-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--lg-glow3) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Particles ── */
.lg-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.lg-particles span {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--lg-particle);
  border-radius: 50%;
  animation: lgPartFloat linear infinite;
}
.lg-particles span:nth-child(1)  { left: 5%;  animation-duration: 20s; animation-delay: 0s; }
.lg-particles span:nth-child(2)  { left: 15%; animation-duration: 24s; animation-delay: 2s; width: 2px; height: 2px; }
.lg-particles span:nth-child(3)  { left: 28%; animation-duration: 18s; animation-delay: 4s; }
.lg-particles span:nth-child(4)  { left: 40%; animation-duration: 22s; animation-delay: 1s; width: 4px; height: 4px; }
.lg-particles span:nth-child(5)  { left: 55%; animation-duration: 26s; animation-delay: 3s; width: 2px; height: 2px; }
.lg-particles span:nth-child(6)  { left: 65%; animation-duration: 19s; animation-delay: 5s; }
.lg-particles span:nth-child(7)  { left: 75%; animation-duration: 23s; animation-delay: 0s; width: 4px; height: 4px; opacity: 0.15; }
.lg-particles span:nth-child(8)  { left: 82%; animation-duration: 17s; animation-delay: 2s; }
.lg-particles span:nth-child(9)  { left: 90%; animation-duration: 25s; animation-delay: 4s; width: 2px; height: 2px; }
.lg-particles span:nth-child(10) { left: 35%; animation-duration: 21s; animation-delay: 6s; }
.lg-particles span:nth-child(11) { left: 50%; animation-duration: 16s; animation-delay: 1s; width: 5px; height: 5px; opacity: 0.12; }
.lg-particles span:nth-child(12) { left: 70%; animation-duration: 28s; animation-delay: 3s; }

@keyframes lgPartFloat {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* ══════════════════════════════════════
   TOP BAR  (compact)
   ══════════════════════════════════════ */
.lg-topbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 12px;
  flex-shrink: 0;
}
.lg-topbar-brand {
  display: flex; align-items: center;
  text-decoration: none;
}

/* ── MONCLASS Logo (matches marketing page) ── */
/* ── MONCLASS Logo (matches marketing page exactly) ── */
.mc-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.mc-logo-icon {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 22px;
}
.mc-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #405189, #299cdb);
}
.mc-bar-1 { width: 100%; }
.mc-bar-2 { width: 75%; }
.mc-bar-3 { width: 50%; }
.mc-logo-text {
  display: inline-flex;
  align-items: baseline;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
}
.mc-mon {
  background: linear-gradient(135deg, #2a2e3d 0%, #405189 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc-cls {
  background: linear-gradient(135deg, #299cdb 0%, #0ab39c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc-reg {
  font-size: 0.4em;
  color: #0ab39c;
  -webkit-text-fill-color: #0ab39c;
  font-weight: 400;
}

.lg-topbar-right {
  display: flex; align-items: center; gap: 10px;
}

/* ── Theme Toggle Button ── */
.lg-theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--lg-pill-bg);
  border: 1px solid var(--lg-border);
  border-radius: 10px;
  color: var(--lg-text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}
.lg-theme-toggle:hover {
  background: var(--lg-surface-hover);
  border-color: var(--lg-border-hover);
  color: var(--lg-text-strong);
  transform: rotate(15deg);
}
/* Dark mode: show sun (click → go light). Light mode: show moon (click → go dark) */
.lg-theme-toggle .ri-sun-line      { display: var(--lg-theme-icon-show); }
.lg-theme-toggle .ri-moon-line     { display: var(--lg-theme-icon-hide); }

/* Status pill */
.lg-status-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  background: var(--lg-pill-bg);
  border: 1px solid var(--lg-border);
  border-radius: 20px;
  font-size: 10px; font-weight: 600;
  color: var(--lg-pill-text);
  letter-spacing: 0.4px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.lg-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #22c55e;
  animation: lgPulse 2s ease-in-out infinite;
}
@keyframes lgPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%     { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}

/* ── Language Switcher ── */
.lg-lang-wrap { position: relative; }
.lg-lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--lg-pill-bg);
  border: 1px solid var(--lg-border);
  border-radius: 8px;
  padding: 5px 12px;
  color: var(--lg-text-muted);
  font-size: 11px; font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
}
.lg-lang-btn:hover {
  background: var(--lg-surface-hover);
  border-color: var(--lg-border-hover);
}
.lg-lang-btn img { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; }
.lg-lang-arrow { font-size: 10px; transition: transform 0.3s; }
.lg-lang-label { display: inline; }

.lg-lang-dropdown {
  display: none;
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--lg-dropdown-bg);
  border: 1px solid var(--lg-border);
  border-radius: 10px;
  box-shadow: 0 12px 48px var(--lg-dropdown-shadow);
  padding: 4px; min-width: 180px;
  z-index: 1000;
  transition: background 0.3s;
}
.lg-lang-dropdown.show {
  display: block;
  animation: lgDropIn 0.2s ease-out;
}
@keyframes lgDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lg-lang-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  color: var(--lg-text-muted); text-decoration: none;
  font-size: 12px; transition: all 0.2s;
}
.lg-lang-option:hover {
  background: var(--lg-surface-hover);
  color: var(--lg-text-strong);
}
.lg-lang-option.active {
  background: rgba(var(--lg-accent-rgb),0.1);
  color: var(--lg-accent); font-weight: 600;
}
.lg-lang-option img { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.lg-lang-check { margin-left: auto; font-size: 13px; color: var(--lg-accent); }

/* ══════════════════════════════════════
   MAIN — Two Column Layout  (compact)
   ══════════════════════════════════════ */
.lg-main {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative; z-index: 10;
  padding: 0 28px 0;
  gap: 48px;
  min-height: 0;
}

/* ── Left: Info Column ── */
.lg-info-col {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0;
}
.lg-info-inner {
  max-width: 420px;
  animation: lgFadeUp 0.8s ease-out both;
}
.lg-product-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: var(--lg-accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1.8px;
}
.lg-product-kicker span {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--lg-accent),var(--lg-blue));
  box-shadow: 0 0 12px rgba(var(--lg-accent-rgb),.4);
}
.lg-hero-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--lg-text-strong);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 24px;
  transition: color 0.3s;
}
.lg-hero-highlight {
  display: block;
  background: linear-gradient(135deg, var(--lg-purple) 0%, var(--lg-blue) 55%, var(--lg-accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 8px;
  opacity: 1;
}

/* Feature cards (compact) */
.lg-feature-cards {
  display: flex; flex-direction: column; gap: 8px;
}
.lg-feat-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--lg-pill-bg);
  border: 1px solid var(--lg-border);
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  animation: lgSlideR 0.7s ease-out both;
}
.lg-feat-card:nth-child(1) { animation-delay: 0.2s; }
.lg-feat-card:nth-child(2) { animation-delay: 0.35s; }
.lg-feat-card:nth-child(3) { animation-delay: 0.5s; }

.lg-feat-card:hover {
  background: var(--lg-surface-hover);
  border-color: rgba(var(--fcr), 0.2);
  transform: translateX(4px);
}
.lg-feat-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--fcr), 0.1);
}
.lg-feat-icon i { font-size: 15px; color: var(--fc); }
.lg-feat-name {
  font-size: 12.5px; font-weight: 700;
  color: var(--lg-text-strong);
  transition: color 0.3s;
}
.lg-feat-sub {
  font-size: 10.5px; font-weight: 500;
  color: var(--lg-text-muted);
  margin-top: 1px;
  transition: color 0.3s;
}

@keyframes lgSlideR {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lgFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Explore link */
.lg-explore-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 20px;
  padding: 8px 18px;
  background: var(--lg-pill-bg);
  border: 1px solid var(--lg-border);
  border-radius: 8px;
  color: var(--lg-text-muted);
  font-size: 12px; font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
}
.lg-explore-link:hover {
  background: var(--lg-surface-hover);
  border-color: var(--lg-border-hover);
  color: var(--lg-text-strong);
  transform: translateY(-2px);
}
.lg-explore-link i:first-child { font-size: 14px; }
.lg-explore-link i:last-child  { font-size: 11px; opacity: 0.5; transition: transform 0.3s; }
.lg-explore-link:hover i:last-child { transform: translate(2px,-2px); opacity: 1; }

/* ══════════════════════════════════════
   RIGHT: LOGIN TERMINAL (compact)
   ══════════════════════════════════════ */
.lg-form-col {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0;
}
.lg-terminal {
  width: 400px;
  background: var(--lg-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--lg-shadow-terminal);
  animation: lgFadeUp 0.7s ease-out 0.15s both;
  position: relative;
  transition: background 0.4s, box-shadow 0.4s;
}
.lg-buildquality .lg-terminal {
  border: 1px solid rgba(94,234,212,.16);
  box-shadow: 0 20px 60px rgba(0,45,43,.34), 0 0 0 1px rgba(45,212,191,.05);
}
.lg-buildquality.lg-light .lg-terminal {
  border-color: rgba(15,118,110,.20);
  box-shadow: 0 20px 55px rgba(15,118,110,.12), 0 0 0 1px rgba(15,118,110,.05);
}
.lg-buildquality .lg-term-bar {
  background: rgba(20,184,166,.035);
}

/* Inner ambient glow */
.lg-terminal::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(var(--lg-accent-rgb),0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(var(--lg-purple-rgb),0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ── Titlebar ── */
.lg-term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--lg-border);
  position: relative; z-index: 1;
  transition: border-color 0.3s;
}
.lg-term-dots {
  display: flex; gap: 5px;
}
.lg-dot-r, .lg-dot-y, .lg-dot-g {
  width: 9px; height: 9px; border-radius: 50%;
}
.lg-dot-r { background: #f06548; }
.lg-dot-y { background: #f7b84b; }
.lg-dot-g { background: #0ab39c; }
.lg-term-title {
  flex: 1;
  font-size: 10px; font-weight: 600;
  color: var(--lg-text-faint);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: color 0.3s;
}
.lg-term-lock {
  display: flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700;
  color: rgba(var(--lg-accent-rgb),0.6);
  letter-spacing: 0.4px;
}
.lg-term-lock i { font-size: 11px; }

/* ── Terminal Body (compact) ── */
.lg-term-body {
  padding: 20px 24px 18px;
  position: relative; z-index: 1;
}

/* Greeting (compact) */
.lg-greeting {
  text-align: center;
  margin-bottom: 16px;
}
.lg-greeting-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, rgba(var(--lg-accent-rgb),0.12), rgba(var(--lg-blue-rgb),0.12));
  border: 1px solid rgba(var(--lg-accent-rgb),0.15);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
  animation: lgIconPulse 3s ease-in-out infinite;
  transition: background 0.3s, border-color 0.3s;
}
.lg-greeting-icon i {
  font-size: 20px;
  color: var(--lg-accent);
}
@keyframes lgIconPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--lg-accent-rgb),0.15); }
  50%     { box-shadow: 0 0 0 10px rgba(var(--lg-accent-rgb),0); }
}

.lg-greeting h2 {
  font-size: 1.15rem; font-weight: 700;
  color: var(--lg-text-strong);
  margin: 0 0 3px;
  letter-spacing: -0.2px;
  transition: color 0.3s;
}
.lg-greeting p {
  font-size: 0.78rem;
  color: var(--lg-text-muted);
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s;
}

/* ── Flash Alerts ── */
.lg-alert {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 500;
  margin-bottom: 12px;
  animation: lgFadeUp 0.4s ease-out;
}
.lg-alert i { font-size: 14px; flex-shrink: 0; }
.lg-alert-ok {
  background: rgba(16,185,129,0.08);
  color: #34d399;
  border: 1px solid rgba(16,185,129,0.15);
}
.lg-alert-err {
  background: rgba(239,68,68,0.08);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.15);
}

/* ── Form Fields (compact) ── */
.lg-field {
  margin-bottom: 14px;
}
.lg-field label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700;
  color: var(--lg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
  transition: color 0.3s;
}
.lg-forgot {
  font-size: 10px; font-weight: 600;
  color: rgba(var(--lg-purple-rgb),0.7);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s;
}
.lg-forgot:hover { color: var(--lg-purple); text-decoration: underline; }

.lg-input-box {
  position: relative;
}
.lg-input-ico {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--lg-text-faint);
  transition: color 0.3s;
  z-index: 2; pointer-events: none;
}
.lg-input-box input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--lg-input-bg);
  border: 1.5px solid var(--lg-input-border);
  border-radius: 10px;
  font-size: 13px; font-weight: 400;
  color: var(--lg-text-strong);
  outline: none;
  transition: all 0.3s;
}
.lg-input-box input::placeholder {
  color: var(--lg-text-placeholder);
}
.lg-input-box input:focus {
  border-color: rgba(var(--lg-accent-rgb),0.5);
  background: var(--lg-input-bg-focus);
  box-shadow: 0 0 0 3px rgba(var(--lg-accent-rgb),0.08);
}
.lg-input-box:focus-within .lg-input-ico {
  color: var(--lg-accent);
}
.lg-input-box input:hover:not(:focus) {
  border-color: var(--lg-border-hover);
  background: var(--lg-input-bg-hover);
}

/* Password eye toggle */
.lg-eye-toggle {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--lg-text-faint);
  cursor: pointer; padding: 3px;
  font-size: 14px; z-index: 2;
  transition: color 0.2s;
}
.lg-eye-toggle:hover { color: var(--lg-text-muted); }

/* ── Remember Me ── */
.lg-remember {
  margin-bottom: 14px;
}
.lg-check-label {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; font-size: 12px;
  color: var(--lg-text-muted);
  user-select: none;
  transition: color 0.3s;
}
.lg-check-label input[type="checkbox"] {
  display: none;
}
.lg-check-box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--lg-border-hover);
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
  flex-shrink: 0;
}
.lg-check-label input:checked + .lg-check-box {
  background: var(--lg-accent);
  border-color: var(--lg-accent);
}
.lg-check-label input:checked + .lg-check-box::after {
  content: '✓';
  color: #fff; font-size: 10px; font-weight: 700;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

/* ── Submit Button ── */
.lg-btn-submit {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--lg-purple) 0%, var(--lg-blue) 52%, var(--lg-accent) 100%);
  background-size: 200% 200%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  letter-spacing: 0.2px;
}
.lg-btn-submit::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.14);
  opacity: 0;
  transition: opacity 0.4s;
}
.lg-btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(var(--lg-accent-rgb),0.3);
  background-position: right center;
}
.lg-btn-submit:hover::before { opacity: 1; }
.lg-btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(var(--lg-accent-rgb),0.2);
}

.lg-btn-text {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.lg-btn-arrow { transition: transform 0.3s; font-size: 14px; }
.lg-btn-submit:hover .lg-btn-arrow { transform: translateX(4px); }

/* Loading state */
.lg-btn-loader {
  display: none;
  position: absolute; inset: 0;
  z-index: 3;
  align-items: center; justify-content: center;
}
.lg-btn-loader::after {
  content: '';
  width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lgSpin 0.7s linear infinite;
}
@keyframes lgSpin { to { transform: rotate(360deg); } }

.lg-btn-submit.is-loading .lg-btn-text { opacity: 0; }
.lg-btn-submit.is-loading .lg-btn-loader { display: flex; }
.lg-btn-submit.is-loading { pointer-events: none; }

/* ── Divider ── */
.lg-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0;
}
.lg-divider::before,
.lg-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--lg-border);
  transition: background 0.3s;
}
.lg-divider span {
  font-size: 9px; font-weight: 600;
  color: var(--lg-text-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  transition: color 0.3s;
}

/* ── External identity buttons ── */
.lg-oauth-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lg-oauth-button {
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--lg-border);
  border-radius: 8px;
  background: var(--lg-input-bg);
  color: var(--lg-text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition: all 0.3s;
}
.lg-oauth-button i { font-size: 16px; flex: 0 0 auto; }
.lg-oauth-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-oauth-button:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--lg-social-hover-shadow);
  color: #fff;
}
.lg-oauth-button.facebook:hover { background: #1877f2; }
.lg-oauth-button.google:hover { background: #4285f4; }
.lg-oauth-consent { margin: 9px 0 0; text-align: center; color: var(--lg-text-faint); font-size: 9px; line-height: 1.45; }
.lg-oauth-consent a { color: var(--lg-accent); }

/* ── Signup Link ── */
.lg-signup-row {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--lg-text-muted);
  transition: color 0.3s;
}
.lg-signup-row a {
  color: var(--lg-accent); font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.lg-signup-row a:hover {
  color: #34d399;
  text-decoration: underline;
}

/* Floating stat pills removed */

/* ══════════════════════════════════════
   FOOTER  (compact)
   ══════════════════════════════════════ */
.lg-footer {
  position: relative; z-index: 10;
  text-align: center;
  padding: 6px 28px 10px;
  flex-shrink: 0;
}
.lg-footer p {
  font-size: 10px;
  color: var(--lg-text-faint);
  margin: 0;
  transition: color 0.3s;
}
.lg-product-family {
  display: inline-block;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--lg-border-hover);
  color: var(--lg-accent);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ══════════════════════════════════════
   ENTRANCE ANIMATION STAGGER
   ══════════════════════════════════════ */
.lg-term-body .lg-greeting   { animation: lgFadeUp 0.5s ease-out 0.3s both; }
.lg-term-body .lg-field:nth-child(1) { animation: lgFadeUp 0.5s ease-out 0.45s both; }
.lg-term-body .lg-field:nth-child(2) { animation: lgFadeUp 0.5s ease-out 0.55s both; }
.lg-term-body .lg-remember   { animation: lgFadeUp 0.5s ease-out 0.65s both; }
.lg-term-body .lg-btn-submit { animation: lgFadeUp 0.5s ease-out 0.75s both; }
.lg-term-body .lg-divider    { animation: lgFadeUp 0.5s ease-out 0.85s both; }
.lg-term-body .lg-oauth-stack { animation: lgFadeUp 0.5s ease-out 0.95s both; }
.lg-term-body .lg-signup-row { animation: lgFadeUp 0.5s ease-out 1.05s both; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .lg-main { gap: 28px; }
  .lg-hero-title { font-size: 1.7rem; }
  .lg-terminal { width: 380px; }
}

@media (max-width: 768px) {
  .lg-universe { height: auto; min-height: 100vh; max-height: none; }
  .lg-main {
    flex-direction: column;
    padding: 0 16px 16px;
    gap: 16px;
  }
  .lg-info-col {
    text-align: center;
    padding: 0;
  }
  .lg-info-inner { max-width: 100%; }
  .lg-hero-title { font-size: 1.4rem; margin-bottom: 16px; }
  .lg-feature-cards { display: none; }
  .lg-explore-link { display: none; }
  .lg-form-col { width: 100%; }
  .lg-terminal { width: 100%; max-width: 400px; }
  .lg-topbar { padding: 10px 12px; }
  .lg-status-pill { display: none; }
}

@media (max-width: 480px) {
  .lg-hero-title { font-size: 1.2rem; margin-bottom: 12px; }
  .lg-term-body { padding: 18px 16px 16px; }
  .lg-greeting-icon { width: 36px; height: 36px; }
  .lg-greeting-icon i { font-size: 17px; }
  .lg-greeting h2 { font-size: 1.05rem; }
  .lg-oauth-stack { grid-template-columns: 1fr; }
  .lg-topbar { padding: 8px 12px; }
  .lg-brand-text { font-size: 13px; }
  .lg-lang-label { display: none; }
}

/* ══════════════════════════════════════
   HEIGHT-BASED RESPONSIVE (ensure fit)
   ══════════════════════════════════════ */
@media (max-height: 720px) and (min-width: 769px) {
  .lg-topbar { padding: 6px 12px; }
  .lg-main { gap: 32px; }
  .lg-hero-title { font-size: 1.8rem; margin-bottom: 16px; }
  .lg-feat-card { padding: 8px 12px; gap: 10px; }
  .lg-feat-icon { width: 30px; height: 30px; }
  .lg-feat-icon i { font-size: 13px; }
  .lg-feat-name { font-size: 11px; }
  .lg-feat-sub { font-size: 9px; }
  .lg-feature-cards { gap: 6px; }
  .lg-explore-link { margin-top: 14px; padding: 6px 14px; font-size: 11px; }
  .lg-term-body { padding: 16px 20px 14px; }
  .lg-greeting { margin-bottom: 10px; }
  .lg-greeting-icon { width: 36px; height: 36px; margin-bottom: 6px; }
  .lg-greeting-icon i { font-size: 17px; }
  .lg-greeting h2 { font-size: 1rem; }
  .lg-greeting p { font-size: 0.72rem; }
  .lg-field { margin-bottom: 10px; }
  .lg-input-box input { padding: 8px 10px 8px 34px; font-size: 12px; }
  .lg-input-ico { font-size: 13px; left: 11px; }
  .lg-remember { margin-bottom: 10px; }
  .lg-btn-submit { padding: 8px; font-size: 12px; }
  .lg-divider { margin: 10px 0; }
  .lg-oauth-button { padding: 9px; font-size: 10px; }
  .lg-signup-row { margin-top: 10px; font-size: 11px; }
  .lg-footer { padding: 4px 28px 6px; }
  .lg-terminal { width: 370px; }
}

/* ============================================================
   REGISTER PAGE — Variant Styles (Command Center Terminal)
   ============================================================ */

/* Register mode follows the active product palette. */
.lg-reg-mode .lg-glow-1 {
  background: radial-gradient(circle, rgba(var(--lg-accent-rgb),0.17) 0%, transparent 70%);
}
.lg-reg-mode .lg-glow-2 {
  background: radial-gradient(circle, rgba(var(--lg-blue-rgb),0.11) 0%, transparent 70%);
}
.lg-reg-mode .lg-glow-3 {
  background: radial-gradient(circle, rgba(var(--lg-purple-rgb),0.08) 0%, transparent 70%);
}

.lg-term-reg {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.15),
    0 16px 48px rgba(var(--lg-accent-rgb),0.14),
    0 32px 80px rgba(0,0,0,0.15),
    0 0 0 1px rgba(var(--lg-accent-rgb),0.08);
}
.lg-term-reg::after {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(var(--lg-accent-rgb),0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(var(--lg-blue-rgb),0.04) 0%, transparent 50%);
}

.lg-greeting-icon-reg {
  background: linear-gradient(135deg, rgba(var(--lg-accent-rgb),0.13), rgba(var(--lg-blue-rgb),0.11));
  border-color: rgba(var(--lg-accent-rgb),0.18);
}
.lg-greeting-icon-reg i {
  color: var(--lg-accent);
}

.lg-btn-register {
  background: linear-gradient(135deg, var(--lg-purple) 0%, var(--lg-blue) 52%, var(--lg-accent) 100%) !important;
  background-size: 200% 200% !important;
}
.lg-btn-register::before {
  background: rgba(0,0,0,.14) !important;
}
.lg-btn-register:hover {
  box-shadow: 0 8px 28px rgba(var(--lg-accent-rgb),0.35) !important;
}

/* Password strength indicator (dark theme) */
.lg-pwd-strength {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  animation: lgFadeUp 0.3s ease-out;
}
.lg-str-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.lg-str-bar {
  height: 4px;
  flex: 1;
  border-radius: 4px;
  background: var(--lg-border);
  transition: background 0.3s, transform 0.2s;
  transform-origin: left;
}
.lg-str-text {
  font-size: 11px;
  font-weight: 700;
  min-width: 60px;
  text-align: right;
  color: var(--lg-text-faint);
  transition: color 0.3s;
  letter-spacing: 0.3px;
}

/* Terms & Conditions */
.lg-terms {
  margin-bottom: 20px;
}
.lg-terms .lg-check-label {
  align-items: flex-start;
}
.lg-terms-text {
  font-size: 12px;
  color: var(--lg-text-muted);
  line-height: 1.6;
}
.lg-terms-text a {
  color: var(--lg-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.lg-terms-text a:hover {
  color: var(--lg-blue);
  text-decoration: underline;
}

/* Register form adds an extra field, tighten spacing */
.lg-term-reg .lg-field {
  margin-bottom: 12px;
}
.lg-term-reg .lg-term-body {
  padding: 20px 22px 18px;
}
.lg-term-reg .lg-greeting {
  margin-bottom: 14px;
}

/* Register entrance animation stagger (3 fields + terms) */
.lg-term-reg .lg-term-body .lg-greeting       { animation: lgFadeUp 0.5s ease-out 0.25s both; }
.lg-term-reg .lg-term-body .lg-field:nth-of-type(1) { animation: lgFadeUp 0.5s ease-out 0.35s both; }
.lg-term-reg .lg-term-body .lg-field:nth-of-type(2) { animation: lgFadeUp 0.5s ease-out 0.45s both; }
.lg-term-reg .lg-term-body .lg-field:nth-of-type(3) { animation: lgFadeUp 0.5s ease-out 0.55s both; }
.lg-term-reg .lg-term-body .lg-terms           { animation: lgFadeUp 0.5s ease-out 0.65s both; }
.lg-term-reg .lg-term-body .lg-btn-submit      { animation: lgFadeUp 0.5s ease-out 0.75s both; }
.lg-term-reg .lg-term-body .lg-divider         { animation: lgFadeUp 0.5s ease-out 0.85s both; }
.lg-term-reg .lg-term-body .lg-oauth-stack     { animation: lgFadeUp 0.5s ease-out 0.95s both; }
.lg-term-reg .lg-term-body .lg-signup-row      { animation: lgFadeUp 0.5s ease-out 1.05s both; }

.lg-invite-gate {
  position: relative;
  z-index: 1;
}
.lg-invite-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 9px;
  border: 1px solid rgba(var(--lg-accent-rgb),.22);
  border-radius: 999px;
  color: var(--lg-accent);
  background: rgba(var(--lg-accent-rgb),.08);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}
.lg-invite-steps {
  display: grid;
  gap: 8px;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}
.lg-invite-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--lg-border);
  border-radius: 10px;
  background: var(--lg-input-bg);
}
.lg-invite-steps li > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg,var(--lg-purple),var(--lg-blue));
  font-size: 10px;
  font-weight: 800;
}
.lg-invite-steps div { min-width: 0; }
.lg-invite-steps strong,
.lg-invite-steps small { display: block; }
.lg-invite-steps strong { color: var(--lg-text-strong); font-size: 11.5px; }
.lg-invite-steps small { margin-top: 2px; color: var(--lg-text-muted); font-size: 9.5px; line-height: 1.35; }
.lg-invite-login { display: flex; text-decoration: none; }
.lg-invite-login:hover { color: #fff; }
.lg-invite-help { margin: 10px 4px 0; color: var(--lg-text-faint); font-size: 9.5px; line-height: 1.45; text-align: center; }

/* Shake animation for validation */
@keyframes lgShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}