/* ===================================
   LOGIN — Full-viewport Animated ERP
   =================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --c1:#3b82f6;--c1d:#1d4ed8;--c1l:#dbeafe;--c1g:rgba(59,130,246,.35);
    --c2:#8b5cf6;--c3:#06b6d4;--c4:#10b981;--c5:#f59e0b;--c6:#f43f5e;
    --tx:#f1f5f9;--tx2:rgba(255,255,255,.55);--tx3:rgba(255,255,255,.3);
    --dark:#0a0e1a;--dark2:#111827;
    --lt:#1e293b;--ltm:#64748b;--lts:#94a3b8;--lb:#e2e8f0;
    --bg:#f0f4f8;--card:#fff;
    --radius:18px;--radius-s:12px;
    --ease:cubic-bezier(.4,0,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}

html,body{
    height:100%;overflow:hidden;
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
}
body{
    background:linear-gradient(135deg,#060b18 0%,#0f172a 40%,#1a2744 100%);
    color:var(--tx);
}

/* ===================================
   CANVAS + BLOBS (unified BG)
   =================================== */
#pc{position:fixed;inset:0;z-index:0;pointer-events:none}

.lp-blob{
    position:fixed;border-radius:50%;pointer-events:none;z-index:0;
    filter:blur(100px);opacity:.6;will-change:transform;
}
.lp-blob--1{width:600px;height:600px;background:rgba(59,130,246,.12);top:-10%;left:-5%;animation:blobA 20s ease-in-out infinite}
.lp-blob--2{width:500px;height:500px;background:rgba(139,92,246,.1);bottom:-8%;right:10%;animation:blobB 24s ease-in-out infinite}
.lp-blob--3{width:400px;height:400px;background:rgba(6,182,212,.08);top:40%;right:30%;animation:blobC 18s ease-in-out infinite}
.lp-blob--4{width:350px;height:350px;background:rgba(16,185,129,.07);bottom:20%;left:30%;animation:blobD 22s ease-in-out infinite}

@keyframes blobA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,40px) scale(1.15)}66%{transform:translate(-30px,70px) scale(.9)}}
@keyframes blobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,-40px) scale(1.1)}}
@keyframes blobC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,50px) scale(1.2)}}
@keyframes blobD{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-40px,-30px) scale(1.1)}70%{transform:translate(30px,20px) scale(.95)}}

/* ===================================
   PAGE LAYOUT — no scroll
   =================================== */
.lp-page{
    position:relative;z-index:1;
    display:flex;height:100vh;width:100%;
}

/* ===================================
   LEFT SHOWCASE
   =================================== */
.lp-left{
    flex:0 0 52%;max-width:52%;
    display:flex;align-items:center;justify-content:center;
    padding:40px;position:relative;overflow:hidden;
}

.lp-left-inner{
    position:relative;z-index:2;
    width:100%;max-width:480px;
    display:flex;flex-direction:column;
    align-items:center;text-align:center;
}

/* Brand */
.lp-brand{
    margin-bottom:10px;
    animation:revealUp .7s var(--ease) .1s backwards;
}
.lp-brand-logo{margin-bottom:14px}
.lp-brand-logo img{height:44px;width:auto;filter:brightness(0) invert(1)}
.lp-brand-fallback{
    width:50px;height:50px;border-radius:14px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
    color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;
}
.lp-brand-name{
    font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;
    line-height:1.3;
}
.lp-brand-powered{
    display:block;font-size:13px;font-weight:400;
    color:var(--tx2);letter-spacing:1px;text-transform:uppercase;
}

/* Typewriter tagline */
.lp-tagline{
    height:28px;margin-bottom:28px;
    font-size:14px;color:var(--tx2);letter-spacing:.3px;
    animation:revealUp .7s var(--ease) .25s backwards;
}
.lp-tagline-cursor{
    animation:blink .7s step-end infinite;color:var(--c1);font-weight:300;
}
@keyframes blink{50%{opacity:0}}

/* ===================================
   ORBIT ANIMATION — the centerpiece
   =================================== */
.lp-orbit-wrap{
    position:relative;width:280px;height:280px;
    margin:0 auto 28px;
    animation:revealScale .8s var(--spring) .4s backwards;
}

.lp-orbit-center{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:64px;height:64px;border-radius:18px;
    background:linear-gradient(135deg,var(--c1),var(--c1d));
    display:flex;align-items:center;justify-content:center;
    z-index:3;
    box-shadow:0 0 40px rgba(59,130,246,.3),0 0 80px rgba(59,130,246,.1);
}
.lp-orbit-center-icon{color:#fff;font-size:22px}

/* Pulsing rings */
.lp-orbit-center-ring{
    position:absolute;inset:-10px;border-radius:22px;
    border:1.5px solid rgba(59,130,246,.25);
    animation:ringPulse 3s ease-out infinite;
}
.lp-orbit-center-ring--2{
    inset:-6px;border-radius:20px;
    animation-delay:1.5s;
}
@keyframes ringPulse{
    0%{transform:scale(1);opacity:.5}
    100%{transform:scale(1.8);opacity:0}
}

/* Orbit track */
.lp-orbit{
    position:absolute;inset:0;
    border:1px dashed rgba(255,255,255,.06);
    border-radius:50%;
    animation:orbitSpin 30s linear infinite;
}

/* Individual orbs */
.lp-orb{
    position:absolute;width:44px;height:44px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.1);
    /* position on circle: top:50%, left:50%, then rotate around */
    top:50%;left:50%;
    margin:-22px 0 0 -22px;
    transform:rotate(var(--angle)) translateX(132px) rotate(calc(-1 * var(--angle)));
    /* counter-rotate to keep icons upright */
    animation:orbCounterSpin 30s linear infinite;
    transition:all .35s var(--ease);
    cursor:default;
}
.lp-orb::after{
    content:attr(data-tip);
    position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);
    font-size:10px;color:var(--tx3);white-space:nowrap;letter-spacing:.3px;
    opacity:1;pointer-events:none;
}
.lp-orb:hover{
    transform:rotate(var(--angle)) translateX(132px) rotate(calc(-1 * var(--angle))) scale(1.25);
    border-color:rgba(255,255,255,.3);
    box-shadow:0 0 20px rgba(255,255,255,.1);
}

@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes orbCounterSpin{to{transform:rotate(var(--angle)) translateX(132px) rotate(calc(-1 * var(--angle) - 360deg))}}

.lp-orb--blue{background:rgba(59,130,246,.2);color:#60a5fa}
.lp-orb--green{background:rgba(16,185,129,.2);color:#34d399}
.lp-orb--amber{background:rgba(245,158,11,.2);color:#fbbf24}
.lp-orb--purple{background:rgba(139,92,246,.2);color:#a78bfa}
.lp-orb--rose{background:rgba(244,63,94,.2);color:#fb7185}
.lp-orb--cyan{background:rgba(6,182,212,.2);color:#22d3ee}

/* ===================================
   TICKER (infinite scroll)
   =================================== */
.lp-ticker{
    width:100%;overflow:hidden;margin-top:24px;
    mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
    animation:revealUp .7s var(--ease) 1s backwards;
}
.lp-ticker-track{
    display:flex;gap:32px;white-space:nowrap;
    animation:tickerScroll 14s linear infinite;
}
.lp-ticker-item{
    font-size:12px;color:var(--tx3);letter-spacing:.4px;
    display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.lp-ticker-item i{color:var(--c1);font-size:10px}

@keyframes tickerScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* ===================================
   RIGHT — LOGIN SIDE
   =================================== */
.lp-right{
    flex:0 0 48%;max-width:48%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:32px;position:relative;
    /* Glassmorphism overlay — unifies with background */
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(60px);-webkit-backdrop-filter:blur(60px);
    border-left:1px solid rgba(255,255,255,.05);
}

/* Mobile logo */
.lp-mobile-logo{display:none;text-align:center;margin-bottom:20px}
.lp-mobile-logo img{height:36px;width:auto}
.lp-mobile-name{
    display:block;font-size:18px;font-weight:700;color:#fff;margin-top:8px;
}

/* ===================================
   CARD
   =================================== */
.lp-card{
    width:100%;max-width:380px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius);
    box-shadow:
        0 25px 60px rgba(0,0,0,.12),
        0 8px 24px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
    padding:36px 32px 28px;
    animation:cardPop .6s var(--spring) .3s backwards;
    position:relative;z-index:1;
}

@keyframes cardPop{
    from{opacity:0;transform:translateY(40px) scale(.92) rotateX(4deg)}
    to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
}

/* Card top accent bar */
.lp-card::before{
    content:'';position:absolute;top:0;left:32px;right:32px;height:3px;
    background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
    border-radius:0 0 4px 4px;
    animation:accentShimmer 3s ease infinite;
    background-size:200% 100%;
}
@keyframes accentShimmer{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

/* Header */
.lp-card-header{text-align:center;margin-bottom:24px}

.lp-badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 14px;border-radius:20px;
    background:var(--c1l);color:var(--c1);
    font-size:11px;font-weight:600;letter-spacing:.3px;
    margin-bottom:14px;
    animation:badgeDrop .5s var(--spring) .6s backwards;
}
.lp-badge i{font-size:9px}

@keyframes badgeDrop{from{opacity:0;transform:translateY(-12px) scale(.8)}}

.lp-title{
    font-size:24px;font-weight:800;color:var(--lt);
    margin-bottom:4px;letter-spacing:-.3px;
}
.lp-subtitle{font-size:13px;color:var(--ltm);line-height:1.5}
.lp-subtitle strong{color:var(--lt)}

/* Alert */
.lp-alert{
    display:flex;align-items:flex-start;gap:8px;
    padding:10px 14px;border-radius:var(--radius-s);
    font-size:13px;line-height:1.5;margin-bottom:16px;
    background:#fef2f2;color:#ef4444;border:1px solid rgba(239,68,68,.12);
    animation:shake .4s ease;
}
.lp-alert i{margin-top:2px;flex-shrink:0}

@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
    60%{transform:translateX(-3px)}80%{transform:translateX(3px)}
}

/* Form */
.lp-form{display:flex;flex-direction:column;gap:18px}

/* Field */
.lp-field{display:flex;flex-direction:column;gap:5px}
.lp-label{font-size:12px;font-weight:600;color:var(--lt);letter-spacing:.2px}

.lp-input-wrap{position:relative;display:flex;align-items:center}

.lp-input-icon{
    position:absolute;left:13px;font-size:13px;color:var(--lts);
    pointer-events:none;transition:all .3s var(--ease);z-index:2;
}

.lp-input{
    width:100%;height:46px;padding:0 44px 0 40px;
    font-size:13px;color:var(--lt);font-family:inherit;
    background:var(--bg);border:1.5px solid var(--lb);
    border-radius:var(--radius-s);outline:none;
    transition:all .3s var(--ease);position:relative;z-index:1;
}
.lp-input::placeholder{color:var(--lts)}
.lp-input:hover{border-color:#cbd5e1}
.lp-input:focus{
    border-color:var(--c1);background:#fff;
    box-shadow:0 0 0 4px rgba(59,130,246,.08);
}
.lp-input-wrap:focus-within .lp-input-icon{color:var(--c1);transform:scale(1.15)}

/* Input glow line — removed (no bottom border effect) */
.lp-input-glow{display:none}

/* Toggle PW */
.lp-toggle-pw{
    position:absolute;right:4px;width:38px;height:38px;
    display:flex;align-items:center;justify-content:center;
    background:none;border:none;cursor:pointer;
    color:var(--lts);border-radius:10px;font-size:14px;
    transition:all .25s var(--ease);z-index:2;
}
.lp-toggle-pw:hover{background:var(--c1l);color:var(--c1);transform:scale(1.08)}

/* Options */
.lp-options{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:-2px;
}

.lp-remember{
    display:flex;align-items:center;gap:8px;
    font-size:12px;color:var(--ltm);cursor:pointer;
    user-select:none;position:relative;padding-left:24px;
}
.lp-remember input{position:absolute;opacity:0;width:0;height:0}

.lp-check{
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:16px;height:16px;border:1.5px solid var(--lb);
    border-radius:4px;background:var(--bg);transition:all .25s var(--ease);
}
.lp-check::after{
    content:'';position:absolute;left:4.5px;top:1px;
    width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg) scale(0);transition:transform .2s var(--spring);
}
.lp-remember input:checked + .lp-check{
    background:var(--c1);border-color:var(--c1);
    animation:chkPop .3s var(--spring);
}
.lp-remember input:checked + .lp-check::after{transform:rotate(45deg) scale(1)}
@keyframes chkPop{50%{transform:translateY(-50%) scale(1.2)}}

.lp-remember:hover .lp-check{border-color:var(--c1)}

.lp-forgot{
    font-size:12px;color:var(--c1);text-decoration:none;font-weight:500;
    transition:color .25s;
}
.lp-forgot:hover{color:var(--c1d);text-decoration:underline}

/* ===================================
   BUTTON — animated gradient
   =================================== */
.lp-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;height:48px;padding:0 24px;
    font-size:14px;font-weight:700;font-family:inherit;color:#fff;
    background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 50%,var(--c1) 100%);
    background-size:200% 200%;
    border:none;border-radius:var(--radius-s);cursor:pointer;
    position:relative;overflow:hidden;
    transition:all .3s var(--ease);
    margin-top:4px;letter-spacing:.3px;
    animation:btnGradient 4s ease infinite;
}
@keyframes btnGradient{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

.lp-btn-shine{
    position:absolute;inset:0;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);
    transform:translateX(-100%);
}
.lp-btn:hover .lp-btn-shine{animation:shine .7s ease forwards}
@keyframes shine{to{transform:translateX(100%)}}

.lp-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px var(--c1g),0 0 0 2px rgba(59,130,246,.15);
}
.lp-btn:active{transform:translateY(0);box-shadow:0 4px 12px var(--c1g)}

.lp-btn-text,.lp-btn-arrow{position:relative;z-index:1}
.lp-btn-arrow{transition:transform .3s var(--ease)}
.lp-btn:hover .lp-btn-arrow{transform:translateX(4px)}

/* Loading */
.lp-btn--loading{pointer-events:none}
.lp-btn--loading .lp-btn-shine{animation:shine 1.2s ease infinite}
.lp-btn--loading .lp-btn-arrow i::before{
    content:"\f110";font-family:"Font Awesome 5 Free";font-weight:900;
}
.lp-btn--loading .lp-btn-arrow{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.lp-card-footer{
    text-align:center;margin-top:20px;padding-top:16px;
    border-top:1px solid var(--lb);
}
.lp-card-footer p{margin:0;font-size:12px;color:var(--ltm)}
.lp-card-footer strong{color:var(--lt)}

.lp-copyright{
    margin-top:16px;font-size:11px;color:var(--tx3);
    text-align:center;z-index:1;position:relative;
}

/* ===================================
   SHARED KEYFRAMES
   =================================== */
@keyframes revealUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes revealScale{
    from{opacity:0;transform:scale(.7)}
    to{opacity:1;transform:scale(1)}
}

/* ===================================
   RESPONSIVE
   =================================== */
@media(max-width:1100px){
    .lp-left{flex:0 0 46%;max-width:46%;padding:28px}
    .lp-right{flex:0 0 54%;max-width:54%}
    .lp-orbit-wrap{width:240px;height:240px}
    .lp-orb{width:38px;height:38px;margin:-19px 0 0 -19px;
        transform:rotate(var(--angle)) translateX(112px) rotate(calc(-1 * var(--angle)));
    }
}

@media(max-width:768px){
    .lp-left{display:none}
    .lp-right{
        flex:1;max-width:100%;
        background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
        border-left:none;
    }
    .lp-mobile-logo{display:block}
    .lp-card{
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    }
}

@media(max-width:420px){
    .lp-right{padding:16px}
    .lp-card{padding:28px 22px 24px;border-radius:14px}
    .lp-title{font-size:21px}
    .lp-options{flex-direction:column;align-items:flex-start;gap:8px}
}

@media(min-width:1600px){
    .lp-left-inner{max-width:520px}
    .lp-orbit-wrap{width:320px;height:320px}
    .lp-orb{transform:rotate(var(--angle)) translateX(152px) rotate(calc(-1 * var(--angle)))}
    .lp-card{max-width:400px;padding:40px 36px 32px}
    .lp-brand-name{font-size:32px}
}