:root{--c:#4f6ef7;--c-rgb:79,110,247;--dark:#0f1530;--dark2:#0a0f20;--dark3:#131a36}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;min-height:100vh;overflow:hidden;background:var(--dark);-webkit-font-smoothing:antialiased;color:#fff}

.bg-tint{position:fixed;inset:0;background:linear-gradient(160deg,var(--dark3) 0%,var(--dark) 35%,var(--dark2) 65%,var(--dark3) 100%);pointer-events:none;z-index:0}

/* ═══════ LANDING ═══════ */
.landing{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),filter .6s ease}
.landing.hidden{opacity:0;transform:translateX(-30px) scale(.97);filter:blur(4px);pointer-events:none}

.amb{position:absolute;inset:0;overflow:hidden}
.amb-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;will-change:transform}
.orb-1{width:600px;height:600px;top:-15%;left:-10%;background:rgba(var(--c-rgb),.1);animation:od1 25s ease-in-out infinite}
.orb-2{width:450px;height:450px;bottom:-20%;right:-5%;background:rgba(var(--c-rgb),.06);animation:od2 30s 2s ease-in-out infinite}
.orb-3{width:300px;height:300px;top:50%;left:60%;background:rgba(var(--c-rgb),.04);animation:od3 20s 4s ease-in-out infinite}
@keyframes od1{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(40px,30px) scale(1.08)}80%{transform:translate(-20px,-15px) scale(.95)}}
@keyframes od2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-35px,-40px) scale(1.1)}}
@keyframes od3{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,-30px)}}

.amb-noise{position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px}

.amb-shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ash{position:absolute;will-change:transform}
.ash-1{width:500px;height:500px;bottom:-180px;left:-120px;background:linear-gradient(135deg,rgba(var(--c-rgb),.06),rgba(var(--c-rgb),.015));border:1px solid rgba(var(--c-rgb),.06);transform:rotate(30deg);animation:sa 22s ease-in-out infinite}
.ash-2{width:400px;height:400px;top:-100px;right:-60px;background:linear-gradient(200deg,rgba(var(--c-rgb),.05),rgba(var(--c-rgb),.01));border:1px solid rgba(var(--c-rgb),.04);transform:rotate(-20deg);animation:sa 28s 3s ease-in-out infinite reverse}
.ash-3{width:700px;height:100px;top:35%;left:-80px;background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.04),transparent);transform:rotate(-8deg);animation:sa 18s 1s ease-in-out infinite}
.ash-4{width:160px;height:160px;top:25%;left:20%;background:linear-gradient(135deg,rgba(var(--c-rgb),.035),transparent);transform:rotate(45deg);animation:sa 20s 5s ease-in-out infinite}
@keyframes sa{0%,100%{transform:rotate(var(--r,30deg)) translate(0,0)}50%{transform:rotate(var(--r,30deg)) translate(10px,-12px)}}
.ash-1{--r:30deg}.ash-2{--r:-20deg}.ash-3{--r:-8deg}.ash-4{--r:45deg}

.land-content{position:relative;z-index:2;text-align:center;max-width:480px;padding:0 24px}
.land-logo{position:relative;width:100px;height:100px;margin:0 auto 40px}
.land-logo-glow{position:absolute;inset:-16px;border-radius:34px;background:radial-gradient(circle,rgba(var(--c-rgb),.12) 0%,transparent 70%);animation:glow 4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}
.land-logo-ring{position:absolute;inset:0;border-radius:28px;border:2px solid rgba(255,255,255,.1);animation:ringS 1s cubic-bezier(.22,1,.36,1) .2s both}
.land-logo-ring::after{content:'';position:absolute;top:-2px;left:25%;width:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);border-radius:1px;animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,100%{opacity:0;left:25%}50%{opacity:1;left:65%}}
@keyframes ringS{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
.land-logo-box{position:relative;width:100px;height:100px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(20px)}
.land-logo-box img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2))}

.land-tag{font-size:.78rem;color:rgba(255,255,255,.3);font-weight:500;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:16px;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .35s both}
.land-title{font-size:3rem;font-weight:800;letter-spacing:-1px;margin-bottom:16px;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .45s both}
.land-desc{font-size:.95rem;color:rgba(255,255,255,.4);line-height:1.8;max-width:380px;margin:0 auto 48px;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .55s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.btn-landing{display:inline-flex;align-items:center;gap:12px;padding:16px 44px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 75%,#000));color:#fff;font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .45s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .65s both;box-shadow:0 4px 24px rgba(var(--c-rgb),.3)}
.btn-landing::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 50%);opacity:0;transition:opacity .4s ease;border-radius:inherit}
.btn-landing:hover::before{opacity:1}
.btn-landing::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .7s ease}
.btn-landing:hover::after{left:100%}
.btn-landing:hover{transform:translateY(-4px);box-shadow:0 14px 50px rgba(var(--c-rgb),.45)}
.btn-landing:active{transform:translateY(0) scale(.98)}
.btn-landing i{font-size:1.1rem;transition:all .35s cubic-bezier(.22,1,.36,1)}
.btn-landing:hover i{transform:translateX(4px)}
.btn-shine{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 55%,transparent 60%);background-size:200% 100%;animation:btnShine 4s ease-in-out infinite;pointer-events:none}
@keyframes btnShine{0%{background-position:200% 0}100%{background-position:-200% 0}}

.land-footer{position:absolute;bottom:28px;left:0;right:0;text-align:center;z-index:2;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .8s both}
.land-footer p{color:rgba(255,255,255,.15);font-size:.72rem;font-weight:500;letter-spacing:.3px}

/* ═══════ OVERLAY ═══════ */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20;opacity:0;pointer-events:none;transition:opacity .6s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.overlay.active{opacity:1;pointer-events:auto}

/* ═══════ LEFT BRANDING (saat form buka) ═══════ */
.brand-left{position:fixed;top:0;left:0;bottom:0;width:calc(100% - 520px);z-index:25;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;opacity:0;transform:scale(.92);transition:all .7s cubic-bezier(.22,1,.36,1) .1s}
.brand-left.show{opacity:1;transform:scale(1)}

.bl-logo{position:relative;width:140px;height:140px;margin-bottom:36px}
.bl-glow{position:absolute;inset:-20px;border-radius:44px;background:radial-gradient(circle,rgba(var(--c-rgb),.15) 0%,transparent 70%);animation:glow 4s ease-in-out infinite}
.bl-ring{position:absolute;inset:0;border-radius:40px;border:2px solid rgba(255,255,255,.1);animation:ringS .8s cubic-bezier(.22,1,.36,1) .3s both}
.bl-ring::after{content:'';position:absolute;top:-2px;left:25%;width:50%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);border-radius:1px;animation:shine 3.5s ease-in-out infinite}
.bl-box{position:relative;width:140px;height:140px;border-radius:36px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(20px)}
.bl-box img{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(0,0,0,.2))}

.bl-name{font-size:1.6rem;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:8px;text-align:center}
.bl-desc{font-size:.85rem;color:rgba(255,255,255,.35);text-align:center;max-width:280px;line-height:1.6}

/* ═══════ LOGIN PANEL ═══════ */
.login-panel{
    position:fixed;top:0;right:0;bottom:0;
    width:520px;z-index:30;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:60px 48px;
    background:rgba(var(--c-rgb),.06);
    backdrop-filter:blur(60px) saturate(1.3);
    -webkit-backdrop-filter:blur(60px) saturate(1.3);
    border-left:1px solid rgba(255,255,255,.06);
    box-shadow:-20px 0 80px rgba(0,0,0,.4);
    transform:translateX(105%) scale(.96);
    opacity:0;
    transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.22,1,.36,1);
}
.login-panel.open{transform:translateX(0) scale(1);opacity:1}
.login-panel::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(180deg,transparent 5%,rgba(var(--c-rgb),.35) 25%,rgba(var(--c-rgb),.15) 50%,rgba(var(--c-rgb),.35) 75%,transparent 95%);pointer-events:none;opacity:0;transition:opacity .6s .2s ease}
.login-panel.open::before{opacity:1}
.login-panel::after{content:'';position:absolute;top:0;left:-30px;width:30px;height:100%;background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.04));pointer-events:none;opacity:0;transition:opacity .6s .15s ease}
.login-panel.open::after{opacity:1}

.lp-close{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);font-size:1.1rem;transition:all .3s ease;z-index:5}
.lp-close:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.2)}

.lp-form{width:100%;max-width:380px}

/* ═══ form reveal: each element clips from right ═══ */
.lp-head,#fgUser,#fgPass,.btn-login-wrap,.lp-info{opacity:0;transform:translateX(20px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.login-panel.open .lp-head{opacity:1;transform:translateX(0);transition-delay:.15s}
.login-panel.open #fgUser{opacity:1;transform:translateX(0);transition-delay:.25s}
.login-panel.open #fgPass{opacity:1;transform:translateX(0);transition-delay:.32s}
.login-panel.open .btn-login-wrap{opacity:1;transform:translateX(0);transition-delay:.39s}
.login-panel.open .lp-info{opacity:1;transform:translateX(0);transition-delay:.46s}

.lp-head{margin-bottom:36px}
.lp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;background:rgba(var(--c-rgb),.08);border:1px solid rgba(var(--c-rgb),.12);font-size:.73rem;font-weight:600;color:rgb(var(--c-rgb));margin-bottom:18px}
.lp-badge i{animation:twinkle 2.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.lp-head h2{font-size:1.65rem;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:6px}
.lp-head p{font-size:.88rem;color:rgba(255,255,255,.4)}

.lp-form .fg{margin-bottom:18px}
.lp-form label{display:block;font-size:.78rem;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:7px;letter-spacing:.15px}
.lp-form label .r{color:#ef4444;margin-left:2px}

.ig{position:relative}
.ig .ii{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.25);font-size:1.08rem;pointer-events:none;transition:all .35s cubic-bezier(.22,1,.36,1);z-index:2}
.ig input{width:100%;height:48px;border:1.5px solid rgba(255,255,255,.08);border-radius:11px;padding:0 15px 0 46px;font-size:.88rem;font-family:inherit;color:#fff;background:rgba(255,255,255,.04);outline:none;transition:all .4s cubic-bezier(.22,1,.36,1)}
.ig input::placeholder{color:rgba(255,255,255,.2)}
.ig input:focus{border-color:var(--c);box-shadow:0 0 0 4px rgba(var(--c-rgb),.08);background:rgba(255,255,255,.06)}
.ig input:focus~.ii{color:var(--c);transform:translateY(-50%) scale(1.15) rotate(-5deg)}
.ig .ep{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.25);cursor:pointer;padding:6px;font-size:1.05rem;z-index:2;transition:all .3s cubic-bezier(.22,1,.36,1);border-radius:8px}
.ig .ep:hover{color:var(--c);background:rgba(var(--c-rgb),.08)}
.ig .uline{position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--c);border-radius:1px;transition:all .45s cubic-bezier(.22,1,.36,1);transform:translateX(-50%)}
.ig input:focus~.uline{width:calc(100% - 30px)}

.btn-login-wrap{margin-bottom:0}

.btn-login{width:100%;height:50px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 75%,#000));color:#fff;font-size:.92rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .4s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden;box-shadow:0 4px 20px rgba(var(--c-rgb),.25)}
.btn-login::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 50%);opacity:0;transition:opacity .3s ease;border-radius:inherit}
.btn-login:hover::before{opacity:1}
.btn-login::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .65s ease}
.btn-login:hover::after{left:100%}
.btn-login:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(var(--c-rgb),.4)}
.btn-login:active{transform:translateY(0) scale(.98)}
.btn-login:disabled{opacity:.55;cursor:wait;transform:none !important}
.btn-login .sp{display:none;width:17px;height:17px;border:2.5px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:sp .6s linear infinite}
.btn-login.loading .bt{display:none}
.btn-login.loading .sp{display:block}
@keyframes sp{to{transform:rotate(360deg)}}

.lmsg{margin-top:14px;padding:11px 15px;border-radius:11px;font-size:.8rem;font-weight:600;display:none;align-items:center;gap:9px}
.lmsg i{font-size:1.05rem;flex-shrink:0}
.lmsg.show{display:flex;animation:mIn .4s cubic-bezier(.22,1,.36,1)}
.mok{background:rgba(16,163,129,.1);color:#34d399;border:1px solid rgba(16,163,129,.15)}
.merr{background:rgba(239,68,68,.08);color:#f87171;border:1px solid rgba(239,68,68,.12)}
.mwait{background:rgba(59,130,246,.08);color:#60a5fa;border:1px solid rgba(59,130,246,.12)}
@keyframes mIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ═══ info section ═══ */
.lp-info{margin-top:28px;width:100%}
.lp-info-divider{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.lp-info-divider::before,.lp-info-divider::after{content:'';flex:1;height:1px;background:rgba(var(--c-rgb),.15)}
.lp-info-divider span{font-size:.78rem;font-weight:600;color:rgba(var(--c-rgb),.6);white-space:nowrap;letter-spacing:.3px}
.lp-info-card{padding:16px 20px;border-radius:12px;background:rgba(var(--c-rgb),.04);border:1px solid rgba(var(--c-rgb),.1);font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.7}
.lp-info-card strong{color:rgb(var(--c-rgb));font-weight:700}

.shake{animation:shakeX .45s ease}
.shake input{border-color:#ef4444 !important;box-shadow:0 0 0 4px rgba(239,68,68,.08) !important}
@keyframes shakeX{0%,100%{transform:translateX(0)}12%,52%{transform:translateX(-5px)}32%,72%{transform:translateX(5px)}}

@media(max-width:768px){
    .brand-left{display:none}
    .login-panel{width:100%;padding:40px 24px}
    .land-title{font-size:2.2rem}
    .land-desc{font-size:.88rem}
}

/* ═══════ MODE TOGGLE ═══════ */
.mode-toggle{position:fixed;top:20px;right:20px;z-index:100;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);font-size:1.15rem;transition:all .4s cubic-bezier(.22,1,.36,1)}
.mode-toggle:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);transform:scale(1.08)}
.mode-toggle.panel-open{position:absolute;top:24px;right:70px;z-index:5;width:36px;height:36px;border-radius:10px;font-size:1.05rem}
.mode-toggle.panel-open:hover{transform:scale(1.08)}

/* ═══════ LIGHT MODE ═══════ */
body.light{color:#1a1a2e}
body.light .bg-tint{background:linear-gradient(160deg,#f4f6fc 0%,#f8faff 30%,#eef1f9 60%,#f4f6fc 100%)}

body.light .amb-orb{opacity:1}
body.light .orb-1{background:rgba(var(--c-rgb),.12)}
body.light .orb-2{background:rgba(var(--c-rgb),.08)}
body.light .orb-3{background:rgba(var(--c-rgb),.06)}
body.light .amb-noise{opacity:.01}

body.light .ash{opacity:1}
body.light .ash-1{background:linear-gradient(135deg,rgba(var(--c-rgb),.1),rgba(var(--c-rgb),.03));border:1px solid rgba(var(--c-rgb),.1)}
body.light .ash-2{background:linear-gradient(200deg,rgba(var(--c-rgb),.08),rgba(var(--c-rgb),.02));border:1px solid rgba(var(--c-rgb),.07)}
body.light .ash-3{background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.07),transparent)}
body.light .ash-4{background:linear-gradient(135deg,rgba(var(--c-rgb),.06),transparent)}

body.light .land-logo-glow{background:radial-gradient(circle,rgba(var(--c-rgb),.12) 0%,transparent 70%)}
body.light .land-logo-ring{border-color:rgba(var(--c-rgb),.12)}
body.light .land-logo-ring::after{background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.15),transparent)}
body.light .land-logo-box{background:rgba(255,255,255,.8);border-color:rgba(var(--c-rgb),.1);box-shadow:0 4px 24px rgba(var(--c-rgb),.06)}
body.light .land-logo-box img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.08))}

body.light .land-tag{color:rgba(0,0,0,.35)}
body.light .land-title{color:#1a1a2e}
body.light .land-desc{color:rgba(0,0,0,.45)}

body.light .btn-landing{box-shadow:0 4px 24px rgba(var(--c-rgb),.2)}
body.light .btn-landing:hover{box-shadow:0 14px 50px rgba(var(--c-rgb),.3)}

body.light .land-footer p{color:rgba(0,0,0,.25)}

body.light .overlay{background:rgba(0,0,0,.25)}

body.light .brand-left .bl-logo .bl-glow{background:radial-gradient(circle,rgba(var(--c-rgb),.18) 0%,transparent 70%)}
body.light .brand-left .bl-logo .bl-ring{border-color:rgba(var(--c-rgb),.12)}
body.light .brand-left .bl-logo .bl-ring::after{background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.15),transparent)}
body.light .brand-left .bl-logo .bl-box{background:rgba(255,255,255,.8);border-color:rgba(var(--c-rgb),.1);box-shadow:0 4px 24px rgba(var(--c-rgb),.08)}
body.light .brand-left .bl-logo .bl-box img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.08))}
body.light .brand-left .bl-name{color:#1a1a2e}
body.light .brand-left .bl-desc{color:rgba(0,0,0,.4)}

body.light .login-panel{background:rgba(255,255,255,.7);border-left-color:rgba(var(--c-rgb),.1);box-shadow:-20px 0 80px rgba(0,0,0,.06)}
body.light .login-panel::before{background:linear-gradient(180deg,transparent 5%,rgba(var(--c-rgb),.25) 25%,rgba(var(--c-rgb),.1) 50%,rgba(var(--c-rgb),.25) 75%,transparent 95%)}
body.light .login-panel::after{background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.02))}

body.light .lp-close{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.04);color:rgba(0,0,0,.5)}
body.light .lp-close:hover{background:rgba(0,0,0,.08);color:rgba(0,0,0,.8);border-color:rgba(0,0,0,.15)}

body.light .lp-badge{background:rgba(var(--c-rgb),.06);border-color:rgba(var(--c-rgb),.1)}
body.light .lp-head h2{color:#1a1a2e}
body.light .lp-head p{color:rgba(0,0,0,.4)}

body.light .lp-form label{color:rgba(0,0,0,.55)}
body.light .ig .ii{color:rgba(0,0,0,.25)}
body.light .ig input{border-color:rgba(0,0,0,.1);background:rgba(0,0,0,.02);color:#1a1a2e}
body.light .ig input::placeholder{color:rgba(0,0,0,.25)}
body.light .ig input:focus{background:rgba(0,0,0,.03);box-shadow:0 0 0 4px rgba(var(--c-rgb),.06)}
body.light .ig .ep{color:rgba(0,0,0,.25)}
body.light .ig .ep:hover{color:var(--c);background:rgba(var(--c-rgb),.06)}
body.light .ig .uline{background:var(--c)}

body.light .btn-login{box-shadow:0 4px 20px rgba(var(--c-rgb),.15)}
body.light .btn-login:hover{box-shadow:0 10px 35px rgba(var(--c-rgb),.25)}

body.light .lmsg{border-radius:11px}
body.light .mok{background:rgba(16,163,129,.06);color:#059669;border-color:rgba(16,163,129,.12)}
body.light .merr{background:rgba(239,68,68,.05);color:#dc2626;border-color:rgba(239,68,68,.1)}
body.light .mwait{background:rgba(59,130,246,.05);color:#2563eb;border-color:rgba(59,130,246,.1)}

body.light .lp-info-card{background:rgba(var(--c-rgb),.03);border-color:rgba(var(--c-rgb),.08);color:rgba(0,0,0,.45)}
body.light .lp-info-card strong{color:var(--c)}
body.light .lp-info-divider::before,.lp-info-divider::after{background:rgba(var(--c-rgb),.1)}

body.light .shake input{border-color:#ef4444 !important;box-shadow:0 0 0 4px rgba(239,68,68,.06) !important}

body.light .mode-toggle{border-color:rgba(0,0,0,.08);background:rgba(0,0,0,.03);color:rgba(0,0,0,.35)}
body.light .mode-toggle:hover{background:rgba(0,0,0,.06);color:rgba(0,0,0,.7);border-color:rgba(0,0,0,.12)}