/* FLUXBOT — sign-in / invite sign-up page. Loaded after style.css, only by index.html.
   Everything is scoped to body.lx-page / .lx so it can't leak into the app. Motion is CSS
   transforms/opacity only; the starfield, the 3D "F" and the warp jump live in fx.js (canvas). */

:root {
  /* neon trio (edge sweep, caret, glows) + deeper trio for the button (white text needs contrast) */
  --lx-c1: #4fd2ff; --lx-c2: #1e90ff; --lx-c3: #0a3cff;
  --lx-b1: #0a3cff; --lx-b2: #1462ee; --lx-b3: #0873d2;
  --lx-logo: 156px; /* the big F */
  --lx-display: var(--font-display, 'Orbitron', 'Exo 2', ui-sans-serif, system-ui, sans-serif);
  --lx-head: 'Exo 2', 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* the shared brand chrome (FLUX) and electric blue (BOT) from style.css, with stand-ins if it's missing */
  --lx-chrome: var(--chrome, linear-gradient(180deg, #ffffff 0%, #f1f5fb 28%, #b4c0d0 50%, #eef3f9 70%, #c2ccda 100%));
  --lx-bot: var(--flux-bot, linear-gradient(180deg, #8fe3ff 0%, #2d9bff 48%, #1f6fff 100%));
  --lx-card: rgba(3, 7, 16, 0.72);
  --lx-card-top: rgba(24, 48, 96, 0.34);
  --lx-field: rgba(1, 4, 12, 0.62);
  --lx-field-focus: rgba(2, 7, 18, 0.9);
  --lx-autofill: #030916;
  --lx-line: rgba(88, 160, 255, 0.2);
  --lx-label: #94a4be;
  --lx-hot: #7fdcff;
  --lx-err: #fb7185;
  --lx-err-text: #fecdd3;
  --lx-warn: #fbbf24;
  --lx-warn-text: #fde68a;
  --lx-ok: #34d399;
}
[data-theme="light"] {
  --lx-card: rgba(255, 255, 255, 0.8);
  --lx-card-top: rgba(214, 232, 255, 0.55);
  --lx-field: rgba(255, 255, 255, 0.94);
  --lx-field-focus: #ffffff;
  --lx-autofill: #ffffff;
  --lx-line: rgba(16, 60, 130, 0.18);
  --lx-label: #4a5870;
  --lx-hot: #0a5fd6;
  --lx-err: #e11d48;
  --lx-err-text: #9f1239;
  --lx-warn: #b45309;
  --lx-warn-text: #92400e;
  --lx-ok: #059669;
}

.lx-page .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- page + layout ---------- */
.lx-page .auth.lx {
  height: 100%; min-height: 0; padding: 0; display: block; background: transparent;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.lx-stage {
  min-height: 100%; width: 100%; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center;
  row-gap: 20px;
  padding: max(28px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

/* ---------- deep-space backdrop (sits under fx.js's star canvas) ---------- */
.lx-sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(8, 36, 96, 0.42), transparent 72%),
    linear-gradient(180deg, #02050c 0%, #040a18 55%, #02050c 100%);
}
.lx-aurora i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.lx-aurora i:nth-child(1) {
  width: 72vmax; height: 46vmax; left: -24vmax; top: -18vmax;
  background: radial-gradient(closest-side, rgba(30, 144, 255, 0.22), rgba(30, 144, 255, 0.06) 55%, transparent);
  animation: lxDriftA 26s ease-in-out infinite alternate;
}
.lx-aurora i:nth-child(2) {
  width: 66vmax; height: 52vmax; right: -24vmax; top: -12vmax;
  background: radial-gradient(closest-side, rgba(10, 60, 255, 0.26), rgba(10, 60, 255, 0.07) 55%, transparent);
  animation: lxDriftB 31s ease-in-out infinite alternate;
}
.lx-aurora i:nth-child(3) {
  width: 92vmax; height: 36vmax; left: 4vmax; bottom: -15vmax;
  background: radial-gradient(closest-side, rgba(79, 210, 255, 0.14), rgba(30, 144, 255, 0.05) 60%, transparent);
  animation: lxDriftC 35s ease-in-out infinite alternate;
}
@keyframes lxDriftA { to { transform: translate3d(9vmax, 6vmax, 0) rotate(12deg) scale(1.12); } }
@keyframes lxDriftB { to { transform: translate3d(-8vmax, 8vmax, 0) rotate(-10deg) scale(1.08); } }
@keyframes lxDriftC { to { transform: translate3d(-6vmax, -5vmax, 0) scale(1.15); } }

/* flux lines: thin light streaks racing up-right across the sky, like the swooshes of the F.
   Light theme only: in dark, fx.js draws its own flux streams on the star canvas. */
.lx-streaks { display: none; position: absolute; inset: -30% -20%; transform: rotate(-16deg); }
[data-theme="light"] .lx-streaks { display: block; }
.lx-streaks i {
  position: absolute; left: 0; display: block; width: 30vmax; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.25) 45%, rgba(79, 210, 255, 0.75) 88%, #eafaff);
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.55);
  transform: translate3d(-40vmax, 0, 0);
  animation: lxStreak 11s linear infinite;
}
.lx-streaks i:nth-child(1) { top: 22%; animation-delay: 0.8s; }
.lx-streaks i:nth-child(2) { top: 41%; width: 22vmax; animation-delay: 4.6s; animation-duration: 13s; }
.lx-streaks i:nth-child(3) { top: 58%; animation-delay: 2.4s; animation-duration: 9.5s; }
.lx-streaks i:nth-child(4) { top: 71%; width: 40vmax; animation-delay: 7.2s; animation-duration: 14s; }
.lx-streaks i:nth-child(5) { top: 33%; width: 18vmax; height: 1px; animation-delay: 9.6s; animation-duration: 12s; }
@keyframes lxStreak {
  0% { transform: translate3d(-40vmax, 0, 0); opacity: 0; }
  4% { opacity: 0.9; }
  26% { opacity: 0.7; }
  30%, 100% { transform: translate3d(170vmax, 0, 0); opacity: 0; }
}

/* perspective grid floor, fading into the horizon */
.lx-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34vh;
  perspective: 320px; perspective-origin: 50% 0; overflow: hidden; opacity: 0.4;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%);
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
.lx-floor i {
  position: absolute; left: -60%; right: -60%; top: 0; height: 170%; display: block;
  transform-origin: 50% 0; transform: rotateX(74deg);
  background-image:
    linear-gradient(rgba(30, 144, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 210, 255, 0.4) 1px, transparent 1px);
  background-size: 64px 64px; background-position: 50% 0;
  animation: lxFloor 3.2s linear infinite;
}
@keyframes lxFloor { to { transform: rotateX(74deg) translateY(64px); } }
.lx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

/* ---------- hero: the big 3D F hovering over an energy pad, wordmark, typewriter ---------- */
.lx-hero { display: grid; justify-items: center; text-align: center; min-width: 0; max-width: 100%; }
.lx-parallax {
  display: grid; justify-items: center; min-width: 0; max-width: 100%;
  transform: translate3d(calc(var(--lx-px, 0) * -12px), calc(var(--lx-py, 0) * -9px), 0);
}
.lx-emblem {
  position: relative; width: var(--lx-logo); height: var(--lx-logo); margin: 4px 0 26px;
  display: grid; place-items: center;
}
.lx-energy { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* electric-blue glow + white-hot core right behind the F */
.lx-halo {
  position: absolute; inset: -64%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127, 220, 255, 0.34), rgba(30, 144, 255, 0.3) 28%, rgba(10, 60, 255, 0.14) 54%, transparent 76%);
  animation: lxHalo 5.5s ease-in-out infinite;
}
.lx-halo::after {
  content: ""; position: absolute; inset: 35%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 247, 255, 0.6), rgba(79, 210, 255, 0.3) 45%, transparent 76%);
  animation: lxCore 3.2s ease-in-out infinite;
}
@keyframes lxHalo { 50% { transform: scale(1.08); opacity: 0.8; } }
@keyframes lxCore { 50% { transform: scale(1.16); opacity: 0.72; } }

/* light beams: two uneven sets turning against each other, so the energy shimmers */
.lx-rays { position: absolute; inset: -52%; }
.lx-rays::before, .lx-rays::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 20%, #000 33%, rgba(0, 0, 0, 0.45) 60%, transparent 80%);
  mask: radial-gradient(closest-side, transparent 20%, #000 33%, rgba(0, 0, 0, 0.45) 60%, transparent 80%);
}
.lx-rays::before {
  background: conic-gradient(from 10deg,
    transparent 0 3%, rgba(127, 220, 255, 0.28) 4%, transparent 5.5% 13%, rgba(30, 144, 255, 0.32) 15%, transparent 18% 29%,
    rgba(127, 220, 255, 0.22) 30%, transparent 31.5% 41%, rgba(30, 144, 255, 0.28) 43.5%, transparent 46% 55%,
    rgba(170, 234, 255, 0.26) 56%, transparent 57.5% 68%, rgba(30, 144, 255, 0.3) 70%, transparent 73% 82%,
    rgba(127, 220, 255, 0.24) 83.5%, transparent 85% 93%, rgba(30, 144, 255, 0.26) 95%, transparent 97%);
  animation: lxTurn 48s linear infinite;
}
.lx-rays::after {
  background: conic-gradient(from 0deg,
    transparent 0 8%, rgba(30, 144, 255, 0.24) 10%, transparent 12% 24%, rgba(127, 220, 255, 0.2) 25.5%, transparent 27% 47%,
    rgba(30, 144, 255, 0.26) 49%, transparent 51.5% 63%, rgba(127, 220, 255, 0.22) 64.5%, transparent 66% 86%,
    rgba(30, 144, 255, 0.24) 88%, transparent 90%);
  animation: lxTurn 72s linear infinite reverse;
}
@keyframes lxTurn { to { transform: rotate(1turn); } }

/* the glowing pad the F hovers over, sending out ripples */
.lx-pad {
  position: absolute; left: -9%; right: -9%; top: 80%; height: 28%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 244, 255, 0.55), rgba(79, 210, 255, 0.42) 24%, rgba(30, 144, 255, 0.22) 52%, transparent 76%);
  animation: lxPad 6s ease-in-out infinite;
}
.lx-pad i {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(127, 220, 255, 0.75);
  box-shadow: 0 0 14px rgba(30, 144, 255, 0.55), inset 0 0 10px rgba(30, 144, 255, 0.35);
  animation: lxRipple 3.6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.lx-pad i:nth-child(2) { animation-delay: 1.2s; }
.lx-pad i:nth-child(3) { animation-delay: 2.4s; }
@keyframes lxPad { 50% { transform: scale(0.88); opacity: 0.72; } }
@keyframes lxRipple { 0% { transform: scale(0.2); opacity: 0; } 14% { opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }

/* sparks drifting up out of the pad */
.lx-sparks { position: absolute; inset: 0; }
.lx-sparks i {
  position: absolute; bottom: 6%; left: 50%; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; opacity: 0;
  background: #e6f8ff; box-shadow: 0 0 6px 1px rgba(79, 210, 255, 0.9);
  animation: lxSpark 4.2s linear infinite;
}
.lx-sparks i:nth-child(1) { left: 12%; --dx: -18px; animation-delay: 0.1s; }
.lx-sparks i:nth-child(2) { left: 26%; --dx: -6px; animation-delay: 2.2s; animation-duration: 3.6s; }
.lx-sparks i:nth-child(3) { left: 38%; --dx: 10px; animation-delay: 1.1s; animation-duration: 5s; width: 2px; height: 2px; }
.lx-sparks i:nth-child(4) { left: 50%; --dx: -12px; animation-delay: 3.1s; }
.lx-sparks i:nth-child(5) { left: 61%; --dx: 14px; animation-delay: 0.6s; animation-duration: 3.8s; }
.lx-sparks i:nth-child(6) { left: 72%; --dx: 4px; animation-delay: 2.7s; animation-duration: 4.6s; width: 2px; height: 2px; }
.lx-sparks i:nth-child(7) { left: 86%; --dx: 20px; animation-delay: 1.6s; }
.lx-sparks i:nth-child(8) { left: 20%; --dx: 8px; animation-delay: 3.6s; animation-duration: 5.2s; width: 2px; height: 2px; }
.lx-sparks i:nth-child(9) { left: 44%; --dx: -20px; animation-delay: 4.1s; animation-duration: 3.9s; }
.lx-sparks i:nth-child(10) { left: 79%; --dx: -8px; animation-delay: 0.3s; animation-duration: 4.8s; width: 2px; height: 2px; }
@keyframes lxSpark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  12% { opacity: 1; }
  70% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--lx-logo) * -0.95), 0) scale(1.1); }
}

/* the 3D F itself: fx.js draws it (with its own float, pointer tilt, rings and orbiting sparks) at this box's size */
.lx-emblem .lx-logo { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }

/* verifying: the energy spins up (fx.js spins the F) · granted: it flares before the jump */
body.lx-busy .lx-halo::after { animation-duration: 0.9s; }
body.lx-busy .lx-pad i { animation-duration: 1.5s; }
body.lx-granted .lx-halo { animation: lxFlare 0.7s ease-out forwards; }
@keyframes lxFlare { to { transform: scale(1.3); opacity: 1; filter: brightness(1.5); } }

/* the wordmark: chrome FLUX + electric BOT, with a light glint running across now and then */
.lx-title {
  position: relative; z-index: 2; max-width: 100%; margin: 0; padding-left: 0.05em; overflow-wrap: anywhere;
  font-family: var(--lx-display); font-weight: 800; font-size: clamp(32px, 10.6vw, 44px); line-height: 1.08; letter-spacing: 0.05em;
  background: var(--lx-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(30, 144, 255, 0.4)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
}
.lx-title.is-mark { background: none; }
.lx-title.long { font-size: clamp(24px, 7.4vw, 32px); letter-spacing: 0.03em; }
.lx-title.xlong { font-size: clamp(19px, 5.6vw, 25px); letter-spacing: 0.01em; }
.lx-title .flux-wordmark {
  display: inline-block; font: inherit; letter-spacing: inherit; line-height: inherit; white-space: nowrap;
  background: none; filter: none; text-shadow: none;
}
.lx-title .flux-w1, .lx-title .flux-w2 {
  display: inline-block; font: inherit; letter-spacing: inherit;
  color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat; background-size: 300% 100%, 100% 100%; background-position: 85% 0, 0 0;
  animation: lxGlint 8s 1.4s ease-in-out infinite;
}
.lx-title .flux-w1 { background-image: linear-gradient(105deg, transparent 46%, rgba(255, 255, 255, 0.95) 50%, transparent 54%), var(--lx-chrome); }
.lx-title .flux-w2 {
  background-image: linear-gradient(105deg, transparent 46%, rgba(235, 250, 255, 0.95) 50%, transparent 54%), var(--lx-bot);
  animation-delay: 1.75s;
}
@keyframes lxGlint { 0% { background-position: 85% 0, 0 0; } 14%, 100% { background-position: 15% 0, 0 0; } }

.lx-tag {
  position: relative; z-index: 2; margin: 10px 0 0; min-height: 1.6em; max-width: 100%;
  font-family: var(--lx-head); font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap;
}
.lx-caret {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.2em; border-radius: 1px;
  background: linear-gradient(#a6eaff, var(--lx-c2)); box-shadow: 0 0 8px rgba(79, 210, 255, 0.85);
  animation: lxBlink 1.05s steps(1) infinite;
}
@keyframes lxBlink { 50% { opacity: 0; } }
@keyframes lxFlow { to { background-position: 300% 0; } }

/* ---------- black-glass card with an electric neon edge sweep ---------- */
.lx-card-wrap { width: 100%; max-width: 420px; min-width: 0; }
.lx-tilt { position: relative; transform-origin: 50% 50%; }
/* soft blue light leaking out round the edge, turning with the sweep */
.lx-aura {
  position: absolute; inset: 0; z-index: 0; border-radius: 22px; overflow: hidden; pointer-events: none;
  opacity: 0.5; filter: blur(16px);
}
.lx-aura i, .lx-edge i {
  position: absolute; left: 50%; top: 50%; width: 250%; aspect-ratio: 1; display: block;
  background: conic-gradient(from 0deg,
    transparent 0 14%, rgba(10, 60, 255, 0.9) 24%, var(--lx-c2) 31%, var(--lx-c1) 36%, #ffffff 37.5%, transparent 46% 64%,
    rgba(10, 60, 255, 0.9) 74%, var(--lx-c2) 81%, var(--lx-c1) 86%, #e6fbff 87.5%, transparent 96%);
  transform: translate(-50%, -50%);
  animation: lxSpin 6s linear infinite;
}
@keyframes lxSpin { to { transform: translate(-50%, -50%) rotate(1turn); } }

.lx .lx-card {
  position: relative; z-index: 1; width: 100%; max-width: none; text-align: left;
  padding: 24px 24px 22px; border-radius: 22px;
  background: linear-gradient(165deg, var(--lx-card-top), transparent 42%), var(--lx-card);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    0 34px 80px -30px rgba(0, 0, 0, 0.95), 0 0 80px -30px rgba(30, 144, 255, 0.6),
    inset 0 1px 0 rgba(200, 230, 255, 0.1), inset 0 -24px 40px -30px rgba(30, 144, 255, 0.35);
  transition: box-shadow 0.4s;
}
.lx-card > :not(.lx-fx) { position: relative; z-index: 1; }
.lx-edge {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, rgba(79, 210, 255, 0.4), rgba(30, 144, 255, 0.12) 45%, rgba(10, 60, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.lx-glare {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(79, 190, 255, 0.12), transparent 45%);
}
.lx-card:hover .lx-glare { opacity: 1; }
/* HUD corner brackets */
.lx-corners { position: absolute; inset: 9px; z-index: 0; pointer-events: none; }
.lx-corners i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(79, 210, 255, 0.55); }
.lx-corners i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 7px; }
.lx-corners i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 7px; }
.lx-corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 7px; }
.lx-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 7px; }

/* neon flash overlay (error = red, lock/paused = amber) */
.lx .lx-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0;
  --f: 251, 113, 133;
  box-shadow: 0 0 0 1.5px rgba(var(--f), 0.95), 0 0 44px 2px rgba(var(--f), 0.45), inset 0 0 34px rgba(var(--f), 0.14);
}
.lx .lx-card.flash-error::after { animation: lxFlash 1.1s ease-out; }
.lx .lx-card.flash-lock::after { --f: 251, 191, 36; animation: lxFlash 1.4s ease-out; }
@keyframes lxFlash { 0%, 18% { opacity: 1; } 100% { opacity: 0; } }
.lx .lx-card.shake { animation: lxShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes lxShake { 15%, 55% { transform: translateX(-8px); } 35%, 75% { transform: translateX(8px); } 90% { transform: translateX(-2px); } }
.lx .lx-card.is-granted { box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.95), 0 0 80px -18px rgba(52, 211, 153, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.lx-card.is-granted .lx-edge { background: linear-gradient(135deg, rgba(52, 211, 153, 0.75), rgba(79, 210, 255, 0.55)); }
.lx-card.is-granted .lx-edge i { animation-duration: 1.1s; }

/* status chip */
.lx-status {
  display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 11px 0 9px; margin: 0 0 14px; border-radius: 999px;
  font-family: var(--lx-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lx-hot); background: rgba(30, 144, 255, 0.1); border: 1px solid rgba(79, 190, 255, 0.28);
}
.lx-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: lxPulse 1.8s ease-in-out infinite; }
.lx-status.is-warn { color: var(--lx-warn); background: rgba(245, 158, 11, 0.1); border-color: rgba(251, 191, 36, 0.35); }
.lx-status.is-ok { color: var(--lx-ok); background: rgba(16, 185, 129, 0.1); border-color: rgba(52, 211, 153, 0.35); }
@keyframes lxPulse { 50% { opacity: 0.35; transform: scale(0.8); } }

/* chrome heading */
.lx .lx-card h1 {
  font-family: var(--lx-head); font-size: 25px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; margin: 0 0 4px;
  background: var(--lx-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  width: fit-content; max-width: 100%;
}
.lx .lx-card .sub { font-size: 14px; color: var(--muted); margin: 0 0 20px; overflow-wrap: anywhere; }

/* ---------- form ---------- */
.lx .auth-form { display: grid; gap: 14px; text-align: left; }
.lx .auth-note {
  font-size: 13px; line-height: 1.5; color: var(--muted); text-align: left;
  background: rgba(30, 144, 255, 0.08); border: 1px solid rgba(79, 170, 255, 0.24); border-radius: 12px; padding: 10px 12px;
}
.lx .auth-note b { color: var(--text); font-weight: 600; }
.lx .auth-note.warn { color: var(--lx-warn-text); background: rgba(245, 158, 11, 0.09); border-color: rgba(251, 191, 36, 0.32); }
.lx .auth-note.warn b { color: var(--lx-warn); }
.lx-quote {
  margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--text);
  background: linear-gradient(90deg, rgba(79, 210, 255, 0.1), rgba(10, 60, 255, 0.07)); border-left: 3px solid var(--lx-c1);
  overflow-wrap: anywhere;
}
.lx-quote p { margin: 0; font-style: italic; }
.lx-quote p::before { content: "\201C"; }
.lx-quote p::after { content: "\201D"; }
.lx-quote cite { display: block; margin-top: 4px; font-size: 12.5px; font-style: normal; color: var(--muted); }

.lx-field { position: relative; }
.lx-field .input {
  height: 58px; padding: 23px 16px 7px 48px; border-radius: 14px; font-size: 15.5px;
  background: var(--lx-field); border: 1px solid var(--lx-line); color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.lx-field .input:hover { border-color: rgba(79, 170, 255, 0.42); }
.lx-field .input:focus {
  outline: none; background: var(--lx-field-focus); border-color: rgba(79, 190, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.18), 0 0 28px -6px rgba(30, 144, 255, 0.8);
}
.lx-field .input[aria-invalid="true"] { border-color: rgba(251, 113, 133, 0.75); box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.13); }
.lx-field .input::placeholder { color: transparent; transition: color 0.2s; }
.lx-field .input:focus::placeholder { color: var(--dim); }
.lx-field.has-eye .input { padding-right: 56px; }
/* energy line along the bottom of the focused field */
.lx-field::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lx-c2) 20%, #dff7ff 50%, var(--lx-c2) 80%, transparent);
  box-shadow: 0 0 10px rgba(79, 210, 255, 0.8);
  transform: scaleX(0); opacity: 0; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}
.lx-field:focus-within::after { transform: scaleX(1); opacity: 1; }
.lx-field label {
  position: absolute; left: 48px; right: 56px; top: 50%; transform: translateY(-50%); transform-origin: left;
  font-size: 15px; color: var(--lx-label); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: top 0.18s ease, transform 0.18s ease, font-size 0.18s ease, color 0.18s, letter-spacing 0.18s;
}
.lx-field:focus-within label,
.lx-field .input:not(:placeholder-shown) ~ label {
  top: 9px; transform: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.lx-field .input:-webkit-autofill ~ label { top: 9px; transform: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lx-field .input:autofill ~ label { top: 9px; transform: none; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.lx-field:focus-within label { color: var(--lx-hot); }
.lx-field .input:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--lx-autofill) inset; box-shadow: 0 0 0 100px var(--lx-autofill) inset;
}
.lx-field .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--lx-autofill) inset, 0 0 0 3px rgba(30, 144, 255, 0.18), 0 0 28px -6px rgba(30, 144, 255, 0.8);
  box-shadow: 0 0 0 100px var(--lx-autofill) inset, 0 0 0 3px rgba(30, 144, 255, 0.18), 0 0 28px -6px rgba(30, 144, 255, 0.8);
}
.lx-ico {
  position: absolute; left: 16px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; pointer-events: none;
  color: var(--lx-label); transition: color 0.2s, filter 0.2s;
}
.lx-field:focus-within .lx-ico { color: var(--lx-hot); filter: drop-shadow(0 0 6px rgba(79, 210, 255, 0.75)); }
.lx-eye {
  position: absolute; right: 8px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 10px;
  display: grid; place-items: center; color: var(--lx-label); transition: color 0.15s, background-color 0.15s;
}
.lx-eye:hover { color: var(--text); background: var(--hover); }
.lx-eye svg { width: 20px; height: 20px; }
.lx-eye .eye-off, .lx-eye.on .eye-on { display: none; }
.lx-eye.on .eye-off { display: block; }
.lx-eye.on { color: var(--lx-hot); }

.lx-caps { display: flex; align-items: center; gap: 8px; margin: -6px 2px 0; font-size: 12.5px; font-weight: 500; color: var(--lx-warn); }
.lx-caps::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.lx-caps:empty { display: none; }

/* honeypot: off-screen for people, still "there" for form-filling bots (never display:none) */
.lx-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* terms checkbox (invite sign-up, only when the owner requires it) */
.lx-check {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px 12px; margin-top: -2px; border-radius: 12px; cursor: pointer;
  font-size: 13.5px; line-height: 1.45; color: var(--muted); border: 1px solid transparent; transition: border-color 0.2s, background-color 0.2s;
}
.lx-check:hover { background: rgba(30, 144, 255, 0.07); }
.lx-check a { color: var(--lx-hot); text-decoration: underline; text-decoration-color: rgba(127, 220, 255, 0.4); text-underline-offset: 2px; }
.lx-check a:hover { text-decoration-color: currentColor; }
.lx-check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; cursor: pointer;
  background: var(--lx-field) center / 14px 14px no-repeat; border: 1.5px solid rgba(110, 170, 255, 0.5);
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.2s;
}
.lx-check input:checked {
  border-color: transparent;
  background-color: var(--lx-b2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: 0 0 14px -2px rgba(30, 144, 255, 0.85);
}
.lx-check input:focus-visible { outline: 2px solid var(--lx-hot); outline-offset: 2px; }
.lx-check.is-invalid { border-color: rgba(251, 191, 36, 0.45); background: rgba(245, 158, 11, 0.07); }
.lx-check.is-invalid input { border-color: var(--lx-warn); }

/* Cloudflare Turnstile slot (only when the server has it switched on) */
.lx-human { display: flex; justify-content: center; min-height: 65px; }
.lx-human.is-broken { min-height: 0; font-size: 13px; color: var(--lx-warn-text); text-align: center; }

/* verifying: a scanner line sweeps the card while the server checks the password */
.lx-scan { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.lx-scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(30, 144, 255, 0.05) 60%, rgba(79, 210, 255, 0.28) 97%, rgba(224, 246, 255, 0.72) 99.5%, transparent);
  transform: translateY(-100%);
  animation: lxScan 1.5s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.lx-card.is-busy .lx-scan { opacity: 1; }
.lx-card.is-busy .lx-edge i, .lx-tilt:has(.is-busy) .lx-aura i { animation-duration: 1.6s; }
@keyframes lxScan { to { transform: translateY(290%); } }

/* ---------- the big button, in the brand gradient ---------- */
.lx-btn {
  position: relative; overflow: hidden; width: 100%; height: 56px; margin-top: 4px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--lx-display); font-size: 13.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 10, 50, 0.5);
  background: linear-gradient(100deg, var(--lx-b1), var(--lx-b2) 33%, var(--lx-b3) 66%, var(--lx-b1)) 0 0 / 300% 100%;
  box-shadow:
    0 14px 34px -12px rgba(30, 144, 255, 0.9), inset 0 0 0 1px rgba(127, 220, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -12px 22px -12px rgba(0, 10, 70, 0.55);
  animation: lxFlow 9s linear infinite;
  transition: transform 0.15s, box-shadow 0.25s, filter 0.2s, letter-spacing 0.3s;
}
.lx-btn::after { /* shimmer sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: translateX(-160%) skewX(-20deg);
  animation: lxShine 3.8s ease-in-out infinite;
}
@keyframes lxShine { 0%, 55% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
.lx-btn:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: 0 16px 42px -10px rgba(30, 144, 255, 1), 0 0 32px -6px rgba(79, 210, 255, 0.65), inset 0 0 0 1px rgba(160, 230, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lx-btn:active:not(:disabled) { transform: scale(0.985); }
.lx-btn:focus-visible { outline: 2px solid var(--lx-hot); outline-offset: 3px; }
.lx-btn:disabled { cursor: default; }
.lx-btn svg { width: 19px; height: 19px; flex: none; }
.lx-btn .go-arrow { transition: transform 0.2s; }
.lx-btn:hover .go-arrow { transform: translateX(3px); }
.lx-btn .spinner { width: 18px; height: 18px; border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }
.lx-btn.is-loading::after { animation-duration: 1.3s; }
.lx-btn.is-granted {
  background: linear-gradient(100deg, #047857, #0e7490 50%, #047857) 0 0 / 200% 100%;
  letter-spacing: 0.22em; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.55) inset, 0 0 40px -4px rgba(52, 211, 153, 0.75);
}
.lx-btn.is-granted .check path { stroke-dasharray: 24; animation: lxDraw 0.45s 0.05s ease-out both; }
@keyframes lxDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* ---------- messages ---------- */
.lx .lx-msg { min-height: 0; font-size: 13.5px; line-height: 1.45; text-align: left; color: var(--lx-err-text); }
.lx .lx-msg:empty { display: none; }
.lx-msg.is-error, .lx-msg.is-lock, .lx-msg.is-hint {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid;
  animation: lxMsgIn 0.3s ease-out;
}
.lx-msg.is-error { color: var(--lx-err-text); background: rgba(244, 63, 94, 0.1); border-color: rgba(251, 113, 133, 0.38); }
.lx-msg.is-lock { color: var(--lx-warn-text); background: rgba(245, 158, 11, 0.1); border-color: rgba(251, 191, 36, 0.42); }
.lx-msg.is-hint { color: var(--muted); background: rgba(30, 144, 255, 0.08); border-color: var(--lx-line); }
.lx-msg svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.lx-msg.is-error svg { color: var(--lx-err); }
.lx-msg.is-lock svg { color: var(--lx-warn); }
.lx-msg b { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lx-warn); }
@keyframes lxMsgIn { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- under the card: help, legal, workspace note ---------- */
.lx-foot { display: grid; justify-items: center; gap: 8px; margin-top: 2px; text-align: center; min-width: 0; max-width: 100%; }
.lx-help {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 8px; max-width: 100%; margin: 0;
  padding: 7px 15px 7px 11px; border-radius: 999px; font-size: 13px; color: var(--muted);
  background: rgba(6, 14, 30, 0.5); border: 1px solid var(--lx-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lx-help svg { width: 16px; height: 16px; flex: none; color: var(--lx-hot); }
.lx-help a {
  color: var(--lx-hot); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; border-radius: 4px;
  text-underline-offset: 3px; transition: color 0.15s;
}
.lx-help a:hover { text-decoration: underline; }
.lx-legal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.lx-legal a { color: var(--muted); text-decoration: none; border-radius: 4px; padding: 2px 2px; transition: color 0.15s; }
.lx-legal a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.lx .auth-foot { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: 0.03em; text-align: center; }

/* ---------- entrance (runs once boot() reveals the page) ---------- */
.lx-in .lx-emblem { animation: lxPowerUp 1.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lx-in .lx-title { animation: lxWipe 0.9s 0.35s cubic-bezier(0.6, 0, 0.2, 1) backwards; }
.lx-in .lx-tag { animation: lxRise 0.8s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lx-in .lx-card-wrap { animation: lxCardIn 0.9s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lx-in .lx-edge, .lx-in .lx-aura { animation: lxNeonOn 1.2s 0.45s linear both; }
.lx-in .lx-foot { animation: lxFade 1s 0.6s both; }
@keyframes lxPowerUp {
  0% { opacity: 0; transform: scale(0.55); filter: blur(10px) brightness(2.4); }
  55% { opacity: 1; filter: blur(0) brightness(1.6); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lxWipe { from { clip-path: inset(-40% 100% -40% -10%); } to { clip-path: inset(-40% -10% -40% -10%); } }
@keyframes lxRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lxCardIn { from { opacity: 0; transform: translateY(28px) scale(0.96); } }
@keyframes lxNeonOn { 0% { opacity: 0; } 8% { opacity: 0.9; } 12% { opacity: 0.1; } 20% { opacity: 1; } 24% { opacity: 0.3; } 34%, 100% { opacity: 1; } }
@keyframes lxFade { from { opacity: 0; } }
.lx-in .lx-aura { animation-name: lxNeonOnAura; }
@keyframes lxNeonOnAura { 0% { opacity: 0; } 8% { opacity: 0.45; } 12% { opacity: 0.05; } 20% { opacity: 0.5; } 24% { opacity: 0.15; } 34%, 100% { opacity: 0.5; } }

/* ---------- warp exit: everything rushes past the viewer while fx.js streaks the stars ---------- */
.lx-warping .lx-card-wrap { animation: lxPastCard 0.55s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.lx-warping .lx-hero { animation: lxPastHero 0.55s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.lx-warping .lx-foot, .lx-warping .lx-sky { animation: lxGone 0.35s ease-in forwards; }
@keyframes lxPastCard { to { opacity: 0; transform: scale(1.45); } }
@keyframes lxPastHero { to { opacity: 0; transform: translateY(-18%) scale(1.6); } }
@keyframes lxGone { to { opacity: 0; } }

/* ---------- wide screens: hero left, card (with help + legal under it) right ---------- */
@media (min-width: 900px) and (min-height: 560px) {
  :root { --lx-logo: 262px; }
  .lx-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-rows: auto auto;
    column-gap: clamp(40px, 7vw, 120px); row-gap: 18px;
    align-items: center; padding: 40px 48px 28px;
  }
  .lx-hero { grid-column: 1; grid-row: 1 / 3; }
  .lx-card-wrap { grid-column: 2; grid-row: 1; align-self: end; }
  .lx-foot { grid-column: 2; grid-row: 2; align-self: start; }
  .lx-emblem { margin: 10px 0 40px; }
  .lx-title { font-size: clamp(48px, 4.7vw, 66px); }
  .lx-title.long { font-size: clamp(34px, 3.4vw, 46px); }
  .lx-title.xlong { font-size: clamp(24px, 2.4vw, 32px); }
  .lx-tag { font-size: 19px; margin-top: 14px; }
  .lx .lx-card { padding: 28px 30px 26px; }
  .lx .lx-card h1 { font-size: 27px; }
}
@media (min-width: 1400px) and (min-height: 800px) { :root { --lx-logo: 300px; } }
/* phones */
@media (max-width: 480px) {
  .lx-stage { row-gap: 18px; padding-top: max(24px, env(safe-area-inset-top)); }
  .lx-emblem { margin-bottom: 22px; }
  .lx .lx-card { padding: 20px 18px 18px; border-radius: 22px; }
  .lx .lx-card h1 { font-size: 22px; }
  .lx .lx-card .sub { margin-bottom: 16px; }
  .lx .auth-form { gap: 12px; }
  .lx-tag { font-size: 15px; }
  .lx-floor { height: 22vh; }
  .lx-corners { inset: 8px; }
  .lx-aura { filter: blur(12px); }
  .lx-streaks i { width: 44vmax; }
}
@media (max-height: 700px) and (max-width: 899px) {
  :root { --lx-logo: 118px; }
  .lx-emblem { margin-bottom: 18px; }
  .lx-title { font-size: clamp(28px, 9vw, 36px); }
  .lx-stage { row-gap: 14px; }
}
@media (max-height: 480px) and (max-width: 899px) {
  :root { --lx-logo: 84px; }
  .lx-title { font-size: 26px; }
}

/* ---------- light theme: bright frosted glass, same electric energy ---------- */
[data-theme="light"] .lx-sky {
  background:
    radial-gradient(60% 50% at 50% 28%, rgba(30, 144, 255, 0.14), transparent 72%),
    linear-gradient(180deg, #f5f9ff 0%, #eaf2fd 60%, #f3f7fd 100%);
}
[data-theme="light"] .lx-aurora i { opacity: 0.5; }
[data-theme="light"] .lx-streaks i { background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.2) 45%, rgba(20, 110, 240, 0.55) 90%, #1e90ff); box-shadow: none; }
[data-theme="light"] .lx-floor { opacity: 0.22; }
[data-theme="light"] .lx-vignette { display: none; }
[data-theme="light"] .lx-halo { background: radial-gradient(closest-side, rgba(79, 190, 255, 0.36), rgba(30, 144, 255, 0.2) 34%, rgba(10, 60, 255, 0.07) 58%, transparent 76%); }
[data-theme="light"] .lx-halo::after { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(160, 225, 255, 0.5) 45%, transparent 76%); }
[data-theme="light"] .lx-rays { opacity: 0.55; }
[data-theme="light"] .lx-pad { background: radial-gradient(closest-side, rgba(79, 190, 255, 0.5), rgba(30, 144, 255, 0.26) 40%, transparent 76%); }
[data-theme="light"] .lx-pad i { border-color: rgba(20, 120, 240, 0.55); box-shadow: 0 0 10px rgba(30, 144, 255, 0.3); }
[data-theme="light"] .lx-sparks i { background: #1e90ff; box-shadow: 0 0 5px rgba(30, 144, 255, 0.7); }
[data-theme="light"] .lx-title { filter: drop-shadow(0 6px 14px rgba(20, 60, 140, 0.18)); }
[data-theme="light"] .lx-caret { box-shadow: none; }
[data-theme="light"] .lx .lx-card {
  box-shadow: 0 30px 70px -34px rgba(16, 50, 120, 0.42), 0 0 60px -30px rgba(30, 144, 255, 0.45), inset 0 1px 0 #fff;
}
[data-theme="light"] .lx-aura { opacity: 0.3; }
[data-theme="light"] .lx-in .lx-aura { animation-name: lxNeonOnAuraLight; }
@keyframes lxNeonOnAuraLight { 0% { opacity: 0; } 20% { opacity: 0.3; } 24% { opacity: 0.1; } 34%, 100% { opacity: 0.3; } }
[data-theme="light"] .lx-edge { background: linear-gradient(135deg, rgba(30, 144, 255, 0.45), rgba(30, 144, 255, 0.14) 45%, rgba(10, 60, 255, 0.4)); }
[data-theme="light"] .lx-corners i { border-color: rgba(20, 110, 230, 0.45); }
[data-theme="light"] .lx-status { background: rgba(30, 144, 255, 0.08); border-color: rgba(20, 110, 230, 0.28); }
[data-theme="light"] .lx-status i { box-shadow: none; }
[data-theme="light"] .lx .auth-note { background: rgba(30, 144, 255, 0.06); border-color: rgba(20, 110, 230, 0.2); }
[data-theme="light"] .lx-field .input:hover { border-color: rgba(20, 110, 230, 0.4); }
[data-theme="light"] .lx-field .input:focus { border-color: #1e7bf0; box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.18); }
[data-theme="light"] .lx-field .input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(30, 144, 255, 0.18); -webkit-box-shadow: 0 0 0 100px #fff inset, 0 0 0 3px rgba(30, 144, 255, 0.18); }
[data-theme="light"] .lx-field::after { background: linear-gradient(90deg, transparent, #1e90ff 25%, #0a3cff 50%, #1e90ff 75%, transparent); box-shadow: 0 0 8px rgba(30, 144, 255, 0.45); }
[data-theme="light"] .lx-field:focus-within .lx-ico { filter: none; }
[data-theme="light"] .lx-msg.is-error { background: rgba(225, 29, 72, 0.07); border-color: rgba(225, 29, 72, 0.3); }
[data-theme="light"] .lx-msg.is-lock, [data-theme="light"] .lx .auth-note.warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(180, 83, 9, 0.3); }
[data-theme="light"] .lx-status.is-warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(180, 83, 9, 0.3); }
[data-theme="light"] .lx-status.is-ok { background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.3); }
[data-theme="light"] .lx-check input { border-color: rgba(16, 60, 130, 0.38); }
[data-theme="light"] .lx-check a { text-decoration-color: rgba(10, 95, 214, 0.4); }
[data-theme="light"] .lx-scan::before { background: linear-gradient(to bottom, transparent, rgba(30, 144, 255, 0.04) 60%, rgba(30, 144, 255, 0.16) 97%, rgba(10, 80, 230, 0.45) 99.5%, transparent); }
[data-theme="light"] .lx .lx-card.is-granted { box-shadow: 0 30px 70px -34px rgba(16, 50, 120, 0.4), 0 0 50px -16px rgba(5, 150, 105, 0.5); }
[data-theme="light"] .lx-help { background: rgba(255, 255, 255, 0.7); }

/* ---------- effects off (Settings) / reduced motion: keep the look, drop the motion ---------- */
body.fx-off .lx-streaks, body.fx-off .lx-sparks, body.fx-off .lx-pad i, body.fx-off .lx-aura { display: none; }
body.fx-off.lx-page *, body.fx-off.lx-page *::before, body.fx-off.lx-page *::after { animation: none !important; }
body.fx-off .lx-edge i, body.fx-off .lx-btn::after, body.fx-off .lx-caret { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-page *, .lx-page *::before, .lx-page *::after { animation: none !important; transition: none !important; }
  .lx-edge i, .lx-btn::after, .lx-caret, .lx-streaks, .lx-sparks, .lx-pad i, .lx-aura { display: none; }
}
/* the busy spinner is feedback, not decoration: it always turns */
body.lx-page .lx-btn .spinner { animation: spin 0.8s linear infinite !important; }
/* Windows high contrast: plain readable text instead of clipped gradients */
@media (forced-colors: active) {
  .lx-title, .lx-title .flux-w1, .lx-title .flux-w2, .lx .lx-card h1 {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none;
  }
}