/* The sign-in page (templates/login.html). Every class is `lp-` prefixed and
   scoped to that page -- see the comment at the top of the template. */

@property --lp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.lp-page {
    --lp-ink: #0f172a;
    --lp-muted: #64748b;
    --lp-line: #e2e8f0;
    --lp-field: #f8fafc;
    --lp-purple-1: #667eea;
    --lp-purple-2: #764ba2;
    --lp-danger: #dc2626;
    --lp-gap: clamp(10px, 2.1vh, 22px);
    display: block;
    min-height: 100vh;
    background: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--lp-ink);
}
.lp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 30%, 520px);
    height: calc(100vh - var(--app-footer-h, 52px));
    height: calc(100dvh - var(--app-footer-h, 52px));
    min-height: 480px;
}
.lp svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Left: the product ---------- */
.lp-info {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: var(--lp-gap);
    padding: clamp(16px, 3.6vh, 38px) clamp(24px, 4vw, 64px);
    color: #e2e8f0;
    background: linear-gradient(150deg, #120c3f 0%, #241a6e 55%, #3a1f7d 100%);
}
/* A faint grid over the glow, fading out towards the bottom. */
.lp-info::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
/* A soft light that follows the pointer (--mx/--my set by the script). */
.lp-info::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(520px circle at var(--mx, 25%) var(--my, 30%), rgba(167, 139, 250, .16), transparent 60%),
        radial-gradient(60% 80% at 100% 50%, rgba(118, 75, 162, .35), transparent 70%);
    transition: background .08s;
}
/* Aurora: three blurred glows drifting slowly behind everything. */
.lp-orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.lp-orb--a { width: 520px; height: 520px; left: -140px; top: -160px; background: #667eea; animation: lp-drift-a 16s ease-in-out infinite alternate; }
.lp-orb--b { width: 420px; height: 420px; right: -120px; top: 30%; background: #8b5cf6; opacity: .42; animation: lp-drift-b 19s ease-in-out infinite alternate; }
.lp-orb--c { width: 380px; height: 380px; left: 30%; bottom: -200px; background: #c084fc; opacity: .3; animation: lp-drift-c 13s ease-in-out infinite alternate; }
@keyframes lp-drift-a { to { transform: translate(220px, 140px) scale(1.15); } }
@keyframes lp-drift-b { to { transform: translate(-240px, -110px) scale(.9); } }
@keyframes lp-drift-c { to { transform: translate(200px, -160px) scale(1.2); } }

/* Particles: little crosses and dots rising through the panel. */
.lp-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.lp-fx i {
    position: absolute; bottom: -24px; left: var(--x);
    font-style: normal; font-weight: 800; font-size: var(--s, 14px); line-height: 1;
    color: rgba(255, 255, 255, .3);
    animation: lp-rise var(--t, 14s) linear infinite; animation-delay: var(--d, 0s);
}
.lp-fx i.g { color: rgba(240, 171, 252, .35); }
.lp-fx i.c { color: rgba(196, 181, 253, .45); }
@keyframes lp-rise {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: .8; }
    100% { transform: translateY(-110vh) rotate(180deg); opacity: 0; }
}

.lp-brand { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; animation: lp-up .6s ease-out both; }
.lp-logo { display: block; height: clamp(30px, 5vh, 44px); width: auto; filter: drop-shadow(0 6px 18px rgba(102, 126, 234, .45)); }
.lp-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: #a5f3fc;
    background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .3);
}
/* A solid green "live" dot with a ring pulsing out of it. */
.lp-pill::before {
    content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7), 0 0 8px rgba(74, 222, 128, .8);
    animation: lp-pill-ping 1.8s ease-out infinite;
}
@keyframes lp-pill-ping {
    70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0), 0 0 8px rgba(74, 222, 128, .8); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0), 0 0 8px rgba(74, 222, 128, .8); }
}

/* Brand at the top, everything else centred in the space below it. */
.lp-main { display: flex; flex-direction: column; gap: var(--lp-gap); margin: auto 0; }
.lp-hero { animation: lp-up .6s .1s ease-out both; }
.lp-hero h1 {
    margin: 0 0 clamp(6px, 1.2vh, 12px); font-size: clamp(26px, min(3vw, 5.2vh), 44px); line-height: 1.1;
    font-weight: 800; letter-spacing: -.025em; color: #fff;
}
.lp-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #38bdf8, #4ade80, #a78bfa, #38bdf8);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: lp-sheen 5s linear infinite;
}
@keyframes lp-sheen { to { background-position: 300% center; } }

/* One feature at a time, each in for 2.5s, sliding up -- CSS only. */
.lp-rotator { display: flex; align-items: center; gap: 10px; font-size: clamp(14px, 2.1vh, 17px); font-weight: 600; color: #cbd5e1; }
.lp-rotator-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: lp-ping 1.6s ease-out infinite; }
@keyframes lp-ping { 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.lp-rotator-win { position: relative; flex: 1; height: 1.6em; overflow: hidden; }
.lp-rotator-win span {
    position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
    animation: lp-rot 12.5s infinite; animation-delay: calc(var(--i) * 2.5s);
}
.lp-rotator-win b { color: #fff; font-weight: 700; }
@keyframes lp-rot {
    0% { opacity: 0; transform: translateY(100%); filter: blur(4px); }
    3%, 17% { opacity: 1; transform: none; filter: none; }
    20%, 100% { opacity: 0; transform: translateY(-100%); filter: blur(4px); }
}
.lp-hero p { margin: clamp(6px, 1.2vh, 12px) 0 0; max-width: 620px; font-size: 14.5px; line-height: 1.6; color: #a8b6cc; }

/* Heartbeat: a faint trace with a bright pulse running along it. */
.lp-ecg { display: block; flex: none; width: 100%; height: clamp(26px, 5.5vh, 50px); animation: lp-up .6s .2s ease-out both; }
.lp-ecg path { stroke-width: 2; }
.lp-ecg-base { stroke: rgba(148, 197, 255, .18); }
.lp-ecg-run {
    stroke: url(#lpEcgGrad); stroke-width: 2.6 !important;
    stroke-dasharray: 140 1000; stroke-dashoffset: 1140;
    filter: drop-shadow(0 0 6px rgba(167, 139, 250, .9));
    animation: lp-trace 2.6s linear infinite;
}
@keyframes lp-trace { to { stroke-dashoffset: 0; } }

.lp-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.3vh, 12px); }
.lp-mod {
    position: relative; display: flex; align-items: center; gap: 11px; min-width: 0;
    padding: clamp(9px, 1.5vh, 13px) 12px; border-radius: 14px;
    background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
    animation: lp-up .5s ease-out both; animation-delay: calc(.25s + var(--i) * 60ms);
}
/* Lit from the pointer: every card glows on the side nearest the cursor. */
.lp-mod::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--cx, -999px) var(--cy, -999px), rgba(196, 181, 253, .2), transparent 60%);
}
/* The spotlight: a glow that walks from card to card, 1.5s each (12 cards = 18s). */
.lp-mod::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    border: 1px solid rgba(196, 181, 253, .75);
    box-shadow: 0 0 24px rgba(167, 139, 250, .45), inset 0 0 18px rgba(167, 139, 250, .16);
    opacity: 0; animation: lp-spot 18s ease-in-out infinite; animation-delay: calc(1s + var(--i) * 1.5s);
}
@keyframes lp-spot { 0%, 100% { opacity: 0; } 2%, 7% { opacity: 1; } 10% { opacity: 0; } }
.lp-mod:hover { background: rgba(255, 255, 255, .1); border-color: rgba(196, 181, 253, .5); transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); }
.lp-mod-ic {
    flex: none; width: 36px; height: 36px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: linear-gradient(135deg, var(--c1, #38bdf8), var(--c2, #6366f1));
    box-shadow: 0 8px 18px -6px var(--c2, #6366f1);
}
.lp-mod-ic svg { width: 18px; height: 18px; animation: lp-bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes lp-bob { 50% { transform: translateY(-2px) scale(1.08); } }
.lp-mod-tx { min-width: 0; }
.lp-mod strong { display: block; font-size: 13.5px; font-weight: 650; color: #fff; line-height: 1.3; }
.lp-mod-tx span { display: block; margin-top: 1px; font-size: 12px; color: #94a3b8; line-height: 1.35; }

.lp-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; animation: lp-up .6s .8s ease-out both; }
.lp-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #cbd5e1; }
.lp-trust svg { width: 17px; height: 17px; color: #4ade80; }

@keyframes lp-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Right: sign in, on the original purple ---------- */
.lp-auth {
    position: relative; overflow-x: hidden; overflow-y: auto; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: clamp(10px, 2vh, 18px);
    padding: clamp(14px, 3vh, 32px) 24px;
    background: linear-gradient(135deg, var(--lp-purple-1) 0%, var(--lp-purple-2) 50%, var(--lp-purple-1) 100%);
    background-size: 200% 200%;
    animation: lp-shift 10s ease-in-out infinite alternate;
}
@keyframes lp-shift { to { background-position: 100% 100%; } }
/* The bubbles get a clipped layer of their own: loose in .lp-auth (which may
   scroll, for very short windows) they overhang its edges and summon a scrollbar. */
.lp-bubs { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.lp-bub { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.lp-bub--a { width: 260px; height: 260px; top: -80px; right: -90px; animation: lp-float 8s ease-in-out infinite alternate; }
.lp-bub--b { width: 180px; height: 180px; bottom: -50px; left: -60px; background: rgba(255, 255, 255, .09); animation: lp-float 10s ease-in-out infinite alternate-reverse; }
.lp-bub--c { width: 70px; height: 70px; top: 22%; left: 10%; background: rgba(255, 255, 255, .1); animation: lp-float 6s ease-in-out infinite alternate; }
.lp-bub--d { width: 34px; height: 34px; bottom: 18%; right: 12%; background: rgba(255, 255, 255, .16); animation: lp-float 5s ease-in-out infinite alternate-reverse; }
@keyframes lp-float { to { transform: translate(-28px, 34px) scale(1.08); } }

/* The ring sits on a wrapper, not on .lp-box: the entrance animation makes
   its element a stacking context, and a z-index:-1 ring inside the card's
   own context would paint over the card's white instead of behind it. */
.lp-card { position: relative; flex: none; width: 100%; max-width: 400px; animation: lp-up .6s .15s ease-out both; }
.lp-box {
    position: relative;
    padding: clamp(18px, 3.4vh, 30px) 26px clamp(14px, 2.6vh, 22px); border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(30, 14, 70, .6);
}
/* A colour ring turning round the card, with a soft glow of itself behind. */
.lp-card::before, .lp-card::after {
    content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 24px; pointer-events: none;
    background: conic-gradient(from var(--lp-ang), #667eea, #a78bfa, #f0abfc, #764ba2, #667eea);
    animation: lp-spin 6s linear infinite;
}
.lp-card::after { inset: 4px; filter: blur(22px); opacity: .55; }
@keyframes lp-spin { to { --lp-ang: 360deg; } }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-purple-2);
}
.lp-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lp-purple-1), var(--lp-purple-2)); }
.lp-wave { display: inline-block; transform-origin: 70% 70%; animation: lp-wave 2.4s ease-in-out 1s infinite; }
@keyframes lp-wave { 0%, 60%, 100% { transform: none; } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
.lp-box h2 { margin: 0 0 4px; font-size: clamp(21px, 3.2vh, 25px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-sub { margin: 0 0 clamp(12px, 2.4vh, 22px); font-size: 13.5px; color: var(--lp-muted); }

.lp-field { margin-bottom: clamp(10px, 1.8vh, 16px); }
.lp-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.lp-input { position: relative; display: flex; align-items: center; }
.lp-input > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: #94a3b8; pointer-events: none; transition: color .15s, transform .2s; }
.lp-input input {
    width: 100%; height: clamp(42px, 6vh, 50px); padding: 0 46px 0 44px;
    font: inherit; font-size: 15px; color: var(--lp-ink);
    background: var(--lp-field); border: 1.5px solid var(--lp-line); border-radius: 12px;
    outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-input input::placeholder { color: #94a3b8; }
.lp-input input:focus { background: #fff; border-color: var(--lp-purple-1); box-shadow: 0 0 0 4px rgba(102, 126, 234, .18); }
.lp-input:focus-within > svg { color: var(--lp-purple-1); transform: scale(1.12); }
/* Chrome paints autofilled boxes light blue; keep them the card's own colour. */
.lp-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--lp-field) inset; -webkit-text-fill-color: var(--lp-ink); caret-color: var(--lp-ink); }
.lp-input input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 4px rgba(102, 126, 234, .18); }
.lp-input input.is-invalid { border-color: var(--lp-danger); background: #fef2f2; animation: lp-shake .35s; }
.lp-input input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
@keyframes lp-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.lp-field .error-text { margin-top: 5px; font-size: 12.5px; color: var(--lp-danger); }
.lp-field .error-text:empty { display: none; }

.lp-eye {
    position: absolute; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #64748b; cursor: pointer;
}
.lp-eye:hover { background: #eef2ff; color: var(--lp-purple-2); }
.lp-eye:focus-visible { outline: 2px solid var(--lp-purple-1); outline-offset: 1px; }
.lp-eye svg { width: 19px; height: 19px; }
.lp-eye .lp-eye-off, .lp-eye.is-shown .lp-eye-on { display: none; }
.lp-eye.is-shown .lp-eye-off { display: block; }

.lp-row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 clamp(12px, 2.2vh, 20px); }
.lp-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: #475569; cursor: pointer; user-select: none; }
.lp-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--lp-purple-2); cursor: pointer; }

.lp-submit {
    position: relative; overflow: hidden;
    width: 100%; height: clamp(44px, 6.2vh, 52px); border: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: inherit; font-size: 15.5px; font-weight: 700; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--lp-purple-1) 0%, var(--lp-purple-2) 50%, var(--lp-purple-1) 100%);
    background-size: 200% auto;
    box-shadow: 0 12px 26px -10px rgba(118, 75, 162, .8);
    transition: transform .15s, box-shadow .15s, background-position .4s;
}
/* A band of light that sweeps across every few seconds, and fast on hover. */
.lp-submit::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-20deg); animation: lp-shine 3.5s ease-in-out 1.5s infinite;
}
.lp-submit:hover::after { animation-duration: 1.1s; }
@keyframes lp-shine { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.lp-submit:hover { transform: translateY(-1px); background-position: 100% center; box-shadow: 0 16px 30px -10px rgba(118, 75, 162, .9); }
.lp-submit:active { transform: scale(.98); }
.lp-submit:disabled { cursor: wait; filter: saturate(.7); transform: none; }
.lp-submit:disabled::after { display: none; }
.lp-submit:focus-visible { outline: 3px solid rgba(102, 126, 234, .45); outline-offset: 2px; }
.lp-submit .btn-text { flex: none; } /* style.css grows it, which shoves the arrow to the edge */
.lp-submit .lp-arrow { width: 18px; height: 18px; transition: transform .15s; }
.lp-submit:hover .lp-arrow { transform: translateX(4px); }
.lp-submit:disabled .lp-arrow { display: none; }

.lp-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: clamp(12px, 2.2vh, 18px); padding-top: clamp(10px, 1.8vh, 14px); border-top: 1px dashed var(--lp-line);
    font-size: 12.5px; color: var(--lp-muted);
}
.lp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lp-meta svg { width: 15px; height: 15px; color: #10b981; }
.lp-clock { font-variant-numeric: tabular-nums; }

/* ---------- Shorter desktop windows: drop lines, never scroll ----------
   Only what genuinely does not fit: a 1366x768 laptop (about 560px of
   window) still shows every module with its line and the trust strip. */
@media (min-width: 961px) and (max-height: 700px) {
    .lp-hero p { display: none; }
}
@media (min-width: 961px) and (max-height: 600px) {
    .lp-sub { display: none; }
}
@media (min-width: 961px) and (max-height: 520px) {
    .lp-trust, .lp-mod-tx span { display: none; }
}
@media (min-width: 961px) and (max-width: 1180px) {
    .lp-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-mod-tx span { display: none; }
}

/* ---------- Narrow screens: a brand band above the form ---------- */
@media (max-width: 960px) {
    .lp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: auto; min-height: calc(100vh - var(--app-footer-h, 52px)); }
    .lp-info, .lp-main { gap: 12px; }
    .lp-info { padding: 20px 16px 18px; }
    .lp-ecg, .lp-trust, .lp-hero p, .lp-mod-tx span { display: none; }
    .lp-hero h1 { font-size: 24px; }
    .lp-mods {
        display: flex; gap: 8px; margin: 0 -16px; padding: 2px 16px 4px;
        overflow-x: auto; scrollbar-width: none;
    }
    .lp-mods::-webkit-scrollbar { display: none; }
    .lp-mod { flex: none; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; }
    .lp-mod:hover { transform: none; }
    .lp-mod-ic { width: 26px; height: 26px; border-radius: 50%; box-shadow: none; }
    .lp-mod-ic svg { width: 14px; height: 14px; }
    .lp-mod strong { font-size: 12.5px; }
    .lp-auth { justify-content: flex-start; overflow: visible; padding: 24px 16px 32px; }
    .lp-card { max-width: 440px; }
    .lp-input input { height: 48px; }
    .lp-submit { height: 50px; }
}
@media (max-width: 480px) {
    .lp-box { padding: 24px 20px 18px; }
    .lp-input input { font-size: 16px; } /* 16px stops iOS zooming into the box */
}
@media (prefers-reduced-motion: reduce) {
    .lp-orb, .lp-auth, .lp-bub, .lp-hero h1 em, .lp-rotator-mark, .lp-pill::before, .lp-mod::after,
    .lp-mod-ic svg, .lp-submit::after, .lp-card, .lp-card::before, .lp-card::after, .lp-wave { animation: none !important; }
    .lp-fx, .lp-ecg-run { display: none; }
    .lp-rotator-win span { animation: none !important; }
    .lp-rotator-win span:first-child { opacity: 1; }
}