/* =============================================================================
   SIGN-IN — "the control room". Aira's own design (not LNX's):
   left, a deep-navy canvas where the plant runs — aurora light, a moving
   perspective floor, the animated plant scene, live glass KPI cards and a
   cursor-following glow; right, a calm sign-in panel with a two-step track,
   floating-label fields and a shimmering action.
   Views/Account/Login.cshtml + erpJs/CommonHelperJs/lnx-fx/lnx-login.js.
   ============================================================================= */

body.lx { margin: 0; min-height: 100vh; font-family: "Jost", "Segoe UI", Arial, sans-serif; background: #f6f7fb; color: #1d2433; }
.lx-login { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr); min-height: 100vh; }

/* ===================== LEFT: the control room ===================== */
.lx-art {
    position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 2.25rem 2.75rem;
    display: flex; flex-direction: column;
    background: radial-gradient(120% 90% at 20% 0%, #1e2a6b 0%, #0b1230 55%, #070b1f 100%);
    --mx: 50%; --my: 40%;
}
.lx-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: .75; }
.lx-aurora i { position: absolute; border-radius: 50%; animation: lx-drift 18s ease-in-out infinite; }
.lx-aurora i:nth-child(1) { width: 55%; height: 45%; left: 5%; top: 10%; background: #3f51b5; }
.lx-aurora i:nth-child(2) { width: 45%; height: 40%; right: 0; top: 30%; background: #0ea5e9; opacity: .55; animation-delay: -6s; }
.lx-aurora i:nth-child(3) { width: 40%; height: 35%; left: 30%; bottom: 0; background: #8b5cf6; opacity: .5; animation-delay: -12s; }
@keyframes lx-drift { 33% { transform: translate(8%, -6%) scale(1.1); } 66% { transform: translate(-6%, 8%) scale(.95); } }

.lx-floor {
    position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; z-index: -1;
    background-image: linear-gradient(rgba(124, 147, 255, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 147, 255, .28) 1px, transparent 1px);
    background-size: 56px 56px; transform: perspective(520px) rotateX(62deg); transform-origin: top center;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    animation: lx-floor 3.5s linear infinite;
}
@keyframes lx-floor { to { background-position: 0 56px, 0 0; } }
.lx-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(129, 140, 248, .22), transparent 60%); transition: background .1s; }

.lx-brand { display: flex; align-items: center; justify-content: space-between; animation: lx-in .7s cubic-bezier(.22, .9, .32, 1) both; }
.lx-brand img { height: 34px; }
.lx-live { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; padding: .35rem .8rem; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.lx-live i { width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: lx-beat 1.8s infinite; }
@keyframes lx-beat { 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

.lx-headline { margin-top: 3.5rem; max-width: 34rem; animation: lx-in .8s cubic-bezier(.22, .9, .32, 1) both .1s; }
.lx-headline h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1rem; }
.lx-grad { background: linear-gradient(90deg, #a5b4fc, #67e8f9, #c4b5fd, #a5b4fc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lx-shine 6s linear infinite; }
@keyframes lx-shine { to { background-position: 300% 0; } }
.lx-headline p { font-size: 1.05rem; color: rgba(255, 255, 255, .7); margin: 0; }
.lx-rotate { display: inline-grid; height: 1.5em; overflow: hidden; vertical-align: bottom; color: #fff; font-weight: 600; }
.lx-rotate b { grid-area: 1 / 1; font-weight: 600; animation: lx-word 12.5s infinite; opacity: 0; }
.lx-rotate b:nth-child(2) { animation-delay: 2.5s; } .lx-rotate b:nth-child(3) { animation-delay: 5s; }
.lx-rotate b:nth-child(4) { animation-delay: 7.5s; } .lx-rotate b:nth-child(5) { animation-delay: 10s; }
@keyframes lx-word { 0% { opacity: 0; transform: translateY(100%); } 4%, 18% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; transform: translateY(-100%); } }

.lx-stage { position: relative; flex: 1; min-height: 200px; display: flex; align-items: flex-end; justify-content: center; margin: 1rem -2.75rem 0; }
.lx-stage .lnx-svg-scene { width: 100%; max-width: 900px; opacity: .9; }
.lx-stage .lnx-s-plant, .lx-stage .lnx-s-crane rect, .lx-stage .lnx-s-gear path { fill: rgba(165, 180, 252, .2); }

.lx-kpi { position: absolute; z-index: 2; padding: .8rem 1rem; border-radius: 16px; min-width: 9.5rem;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); animation: lx-in .8s cubic-bezier(.22, .9, .32, 1) both, lx-bob 7s ease-in-out infinite; }
.lx-kpi small { display: block; font-size: .7rem; letter-spacing: .04em; color: rgba(255, 255, 255, .65); margin-bottom: .2rem; }
.lx-kpi b { font-size: 1.5rem; font-weight: 700; }
.lx-kpi em { font-style: normal; font-size: .8rem; margin-left: .25rem; color: rgba(255, 255, 255, .6); }
.lx-kpi svg polyline { fill: none; stroke: #67e8f9; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: lx-line 2s ease-out .8s forwards; }
.lx-kpi svg { display: block; width: 100%; height: 28px; margin-top: .3rem; }
@keyframes lx-line { to { stroke-dashoffset: 0; } }
.lx-kpi-1 { right: 9%; top: 26%; animation-delay: .3s, 0s; }
.lx-kpi-2 { left: 8%; top: 52%; animation-delay: .45s, -2.5s; }
.lx-kpi-3 { right: 14%; top: 56%; animation-delay: .6s, -5s; }
.lx-bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-top: .3rem; }
.lx-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(#a5b4fc, #6366f1); transform-origin: bottom; animation: lx-grow .9s cubic-bezier(.22, .9, .32, 1) both; }
.lx-bars i:nth-child(2) { animation-delay: .1s; } .lx-bars i:nth-child(3) { animation-delay: .2s; } .lx-bars i:nth-child(4) { animation-delay: .3s; }
.lx-bars i:nth-child(5) { animation-delay: .4s; } .lx-bars i:nth-child(6) { animation-delay: .5s; }
@keyframes lx-grow { from { transform: scaleY(0); } }
.lx-ring { position: relative; display: flex; align-items: center; gap: .3rem; }
.lx-ring svg { width: 46px; height: 46px; transform: rotate(-90deg); margin-right: .35rem; }
.lx-ring circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 4; }
.lx-ring .lx-ring-v { stroke: #34d399; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; animation: lx-ring 1.6s ease-out 1s forwards; }
@keyframes lx-ring { to { stroke-dashoffset: 2.8; } }
@keyframes lx-bob { 50% { transform: translateY(-8px); } }

.lx-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.25rem; font-size: .78rem; color: rgba(255, 255, 255, .62); animation: lx-in .8s ease both .5s; }
.lx-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.lx-trust svg { width: 16px; height: 16px; fill: none; stroke: #a5b4fc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lx-in { from { opacity: 0; transform: translateY(14px); } }

/* ===================== RIGHT: sign in ===================== */
.lx-panel { position: relative; display: flex; flex-direction: column; padding: 2rem 3rem; background: #fff;
    background-image: radial-gradient(rgba(63, 81, 181, .07) 1px, transparent 1.2px); background-size: 18px 18px; }
.lx-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .85)); pointer-events: none; }
.lx-panel > * { position: relative; }
.lx-panel-top { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: #6b7280; }
.lx-greet { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(63, 81, 181, .07); color: #3f51b5; font-weight: 600; }
.lx-greet .lx-wave { display: inline-block; transform-origin: 70% 80%; animation: lx-wave 2.4s ease-in-out 1s 2; }
@keyframes lx-wave { 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } 50% { transform: none; } }
.lx-clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.lx-form { width: 100%; max-width: 380px; margin: auto; padding: 2rem 0; animation: lx-in .7s cubic-bezier(.22, .9, .32, 1) both .2s; }
.lx-form h2 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .3rem; color: #111827; }
.lx-sub { color: #6b7280; margin: 0 0 1.4rem; }

.lx-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.6rem; counter-reset: s; }
.lx-steps li { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: #9ca3af; position: relative; padding-bottom: .55rem; }
.lx-steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: #e5e7eb; }
.lx-steps li::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px; background: linear-gradient(90deg, #3f51b5, #6366f1); z-index: 1; transition: width .6s cubic-bezier(.22, .9, .32, 1); }
.lx-steps li.is-on, .lx-steps li.is-done { color: #3f51b5; }
.lx-steps li.is-on::before, .lx-steps li.is-done::before { width: 100%; }
.lx-steps i { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-style: normal; font-size: .72rem; background: #f3f4f6; color: #9ca3af; transition: all .3s; }
.lx-steps li.is-on i { background: #3f51b5; color: #fff; box-shadow: 0 0 0 4px rgba(63, 81, 181, .15); }
.lx-steps li.is-done i { background: #10b981; color: #fff; }

.lx-step { animation: lx-step .45s cubic-bezier(.22, .9, .32, 1) both; }
@keyframes lx-step { from { opacity: 0; transform: translateX(16px); } }

.lx-field { position: relative; margin-bottom: 1rem; }
.lx-field input { width: 100%; height: 3.3rem; padding: 1.15rem 2.8rem .35rem 2.85rem; border-radius: 14px; border: 1.5px solid #e5e7eb; background: #f9fafb;
    font: 500 .98rem "Jost", sans-serif; color: #111827; outline: 0; transition: border-color .2s, background .2s, box-shadow .2s; }
.lx-field input:hover { border-color: #d1d5db; }
.lx-field input:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); }
.lx-field label { position: absolute; left: 2.85rem; top: 1rem; font-size: .95rem; color: #9ca3af; pointer-events: none; transition: all .18s ease; }
.lx-field input:focus + label, .lx-field input:not(:placeholder-shown) + label { top: .45rem; font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: #6366f1; }
.lx-field > svg { position: absolute; left: 1rem; top: 1.05rem; width: 1.15rem; height: 1.15rem; fill: none; stroke: #9ca3af; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.lx-field input:focus ~ svg { stroke: #6366f1; }
.lx-eye { position: absolute; right: .55rem; top: .7rem; width: 2rem; height: 1.9rem; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #9ca3af; }
.lx-eye svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.lx-eye:hover { background: rgba(99, 102, 241, .08); color: #6366f1; }
.lx-eye-slash { transition: opacity .2s; }
.lx-eye.is-on .lx-eye-slash { opacity: 0; }
.lx-caps { margin: -.4rem 0 .8rem; font-size: .78rem; font-weight: 600; color: #b45309; animation: lx-in .2s ease both; }
.lx-caps::before { content: "⇪  "; }

.lx-btn { position: relative; overflow: hidden; width: 100%; height: 3.2rem; margin-top: .4rem; border: 0; border-radius: 14px; color: #fff; font: 600 1rem "Jost", sans-serif;
    background: linear-gradient(135deg, #3f51b5, #6366f1 60%, #8b5cf6); background-size: 150% 150%;
    box-shadow: 0 14px 28px -14px rgba(79, 70, 229, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .2s, box-shadow .2s, background-position .4s; }
.lx-btn::after { content: "→"; margin-left: .6rem; display: inline-block; transition: transform .25s; }
.lx-btn:hover:not(:disabled) { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 18px 32px -14px rgba(79, 70, 229, 1); }
.lx-btn:hover:not(:disabled)::after { transform: translateX(5px); }
.lx-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.lx-btn:disabled { opacity: .75; cursor: progress; }
.lx-btn:disabled::after { content: none; }
.lx-btn::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: lx-sheen 3.6s ease-in-out infinite 1.5s; }
@keyframes lx-sheen { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.lx-note { margin: 1rem 0 0; font-size: .78rem; color: #9ca3af; text-align: center; }

.lx-sent { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(16, 185, 129, .08); color: #065f46; font-size: .88rem; margin-bottom: 1.25rem; }
.lx-sent svg { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: #10b981; stroke-width: 1.8; stroke-linecap: round; animation: lx-buzz 1.2s ease-in-out .3s 2; }
@keyframes lx-buzz { 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 60% { transform: none; } }
.lx-otp { display: flex; gap: .55rem; justify-content: space-between; margin-bottom: 1.2rem; }
.lx-otp .otp-digit { width: 100%; max-width: 3.3rem; height: 3.7rem; text-align: center; font: 700 1.5rem "Jost", sans-serif; border-radius: 14px; border: 1.5px solid #e5e7eb; background: #f9fafb; color: #111827; outline: 0; padding: 0;
    transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
.lx-otp .otp-digit:focus { border-color: #6366f1; background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, .14); transform: translateY(-2px); }
.lx-otp .otp-digit.filled { border-color: #6366f1; background: rgba(99, 102, 241, .06); animation: lx-pop .25s ease; }
@keyframes lx-pop { 50% { transform: scale(1.08); } }
.lx-links { display: flex; justify-content: space-between; margin-top: 1rem; font-size: .86rem; }
.lx-links a { color: #4f46e5; font-weight: 600; text-decoration: none; }
.lx-links a:hover { text-decoration: underline; }

.lx-reason { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.25rem; padding: .75rem .9rem; border-radius: 14px; font-size: .86rem; animation: lx-in .4s ease both; }
.lx-reason svg { width: 22px; height: 22px; flex: none; }
.lx-reason.is-warning { background: rgba(245, 158, 11, .1); color: #8a5a00; }
.lx-reason.is-info { background: rgba(14, 165, 233, .09); color: #0b5c86; }
.lx-reason.is-success { background: rgba(16, 185, 129, .09); color: #065f46; }

.lx-foot { text-align: center; font-size: .76rem; color: #9ca3af; }

/* ===================== small screens: the panel first, the room as a band ===================== */
@media (max-width: 991.98px) {
    .lx-login { grid-template-columns: 1fr; }
    .lx-art { min-height: 300px; padding: 1.5rem; }
    .lx-headline { margin-top: 1.5rem; }
    .lx-headline h1 { font-size: 1.9rem; }
    .lx-kpi, .lx-trust { display: none; }
    .lx-stage { min-height: 120px; margin: .5rem -1.5rem 0; }
    .lx-panel { padding: 1.5rem; }
}

/* ===================== the plant scene (LnxSvg.scene) ===================== */
.lnx-svg-scene { width: 100%; height: auto; display: block; }
.lnx-s-plant, .lnx-s-crane rect, .lnx-s-gear path { fill: rgba(165, 180, 252, .2); }
.lnx-s-hole { fill: rgba(11, 18, 48, .85); }
.lnx-s-win { fill: rgba(255, 220, 120, 0); animation: lnx-window 5s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
@keyframes lnx-window { 30%, 60% { fill: rgba(255, 220, 120, .8); } }
.lnx-s-smoke circle { fill: rgba(255, 255, 255, .16); }
.lnx-s-smoke { animation: lnx-smoke 4s ease-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes lnx-smoke { from { transform: translateY(10px) scale(.6); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(-40px) scale(1.4); opacity: 0; } }
.lnx-a-spin { animation: lnx-spin 9s linear infinite; }
.lnx-a-spin-rev { animation: lnx-spin 6s linear infinite reverse; }
.lnx-s-roller { fill: rgba(255, 255, 255, .35); }
.lnx-a-convey { animation: lnx-convey 6s linear infinite; }
@keyframes lnx-convey { from { transform: translateX(-120px); } to { transform: translateX(160px); } }
.lnx-s-box { fill: rgba(253, 186, 116, .6); stroke: rgba(255, 255, 255, .35); }
.lnx-s-cable { stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
.lnx-s-load { fill: rgba(253, 186, 116, .65); }
.lnx-a-hoist { animation: lnx-hoist 5s ease-in-out infinite; }
@keyframes lnx-hoist { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-70px); } }
.lnx-s-chart { fill: none; stroke: rgba(103, 232, 249, .7); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 800; stroke-dashoffset: 800; animation: lnx-chart 6s ease-in-out infinite; }
@keyframes lnx-chart { 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -800; } }
.lnx-s-node { fill: #67e8f9; opacity: 0; animation: lnx-node 6s ease-in-out infinite; animation-delay: calc(var(--i) * .5s + .6s); }
@keyframes lnx-node { 10%, 60% { opacity: .95; } 80% { opacity: 0; } }
.lnx-s-particle { fill: rgba(255, 255, 255, .55); animation: lnx-particle 9s linear infinite; animation-delay: calc(var(--i) * -0.7s); }
@keyframes lnx-particle { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: .8; } to { transform: translate(30px, -60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lx *, .lx *::before, .lx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ===================== fit the window: no scrolling, at any height ===================== */
html:has(body.lx), body.lx { height: 100%; overflow: hidden; }
.lx-login { height: 100vh; height: 100dvh; min-height: 0; }
.lx-art { padding: clamp(1rem, 3vh, 2.25rem) clamp(1.25rem, 3vw, 2.75rem); min-height: 0; }
.lx-headline { margin-top: clamp(1rem, 5vh, 3.5rem); }
.lx-headline h1 { font-size: clamp(1.8rem, min(3.4vw, 5.6vh), 3.1rem); }
.lx-stage { flex: 1 1 0; min-height: 0; overflow: hidden; }
.lx-stage .lnx-svg-scene { max-height: 100%; width: auto; max-width: 100%; }
.lx-trust { margin-top: clamp(.5rem, 2vh, 1.25rem); }

/* the panel: a soft tinted surface (no stark white), the form centred in the space left */
.lx-panel {
    min-height: 0; overflow: hidden; padding: clamp(1rem, 3vh, 2rem) clamp(1.5rem, 3vw, 3rem);
    background:
        radial-gradient(80% 60% at 100% 0%, rgba(99, 102, 241, .14), transparent 60%),
        radial-gradient(70% 50% at 0% 100%, rgba(14, 165, 233, .10), transparent 60%),
        linear-gradient(165deg, #f4f6fd, #eceffa);
}
.lx-panel::before { background: radial-gradient(rgba(63, 81, 181, .08) 1px, transparent 1.2px) 0 0 / 18px 18px; opacity: .7; }
.lx-form {
    margin: auto; padding: clamp(1.1rem, 3vh, 2rem) clamp(1.1rem, 2vw, 1.75rem); max-width: 420px;
    border-radius: 22px; background: rgba(255, 255, 255, .62); backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 30px 60px -34px rgba(49, 46, 129, .45), 0 2px 8px rgba(15, 23, 42, .04);
}
.lx-field input, .lx-otp .otp-digit { background: rgba(255, 255, 255, .85); }
.lx-greet { background: rgba(255, 255, 255, .7); }

/* shorter windows: tighten everything a step */
@media (max-height: 820px) {
    .lx-form h2 { font-size: 1.6rem; }
    .lx-sub { margin-bottom: 1rem; }
    .lx-steps { margin-bottom: 1.1rem; }
    .lx-field { margin-bottom: .75rem; }
    .lx-field input { height: 3rem; padding-top: 1rem; }
    .lx-field label { top: .85rem; }
    .lx-field > svg { top: .9rem; }
    .lx-eye { top: .55rem; }
    .lx-btn { height: 2.9rem; }
    .lx-note { margin-top: .6rem; }
    .lx-kpi { padding: .6rem .8rem; }
    .lx-kpi b { font-size: 1.25rem; }
    #lxReason .lx-reason { padding: .55rem .8rem; margin-bottom: .8rem; }
}
@media (max-height: 680px) {
    .lx-trust, .lx-note { display: none; }
    .lx-kpi-2 { display: none; }
    .lx-headline p { font-size: .9rem; }
}
@media (max-width: 991.98px) {
    html:has(body.lx), body.lx { overflow: auto; }
    .lx-login { height: auto; min-height: 100dvh; }
}

/* the local sign-in link must show on short screens too (it is the way in while Nexus is down) */
.lx-note.lx-local { display: block !important; }
.lx-note.lx-local[hidden] { display: none !important; }