:root{
    --bg:#0B0F1A; --panel:#0F172A; --panel-2:#111827; --line:#1F2937;
    --text:#E5E7EB; --muted:#9CA3AF;
    --violet:#7C3AED; --cyan:#06B6D4; --green:#22C55E; --amber:#F59E0B; --pink:#EC4899;
    --font:'Poppins',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}

.hidden{display:none!important}

/* Layout */
.login-layout{
    display:grid; grid-template-columns:1.2fr 1fr; min-height:100vh;
    background: radial-gradient(1200px 1200px at -10% 110%, rgba(124,58,237,.15), transparent 60%),
    radial-gradient(1200px 1200px at 110% -10%, rgba(6,182,212,.15), transparent 60%),
    var(--bg);
}

/* Left (brand + lottie) */
.login-left{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:2rem;
}
.branding{ text-align:center; margin-bottom:1.5rem; }
.branding h1{
    font-size:2.4rem; font-weight:800; letter-spacing:.2px;
    background:linear-gradient(90deg,var(--violet),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.branding p{ color:var(--muted); margin-top:.4rem }
.lottie{ width:min(560px, 80%); height:auto; aspect-ratio:1/1 }

/* Right (form) */
.login-right{
    display:flex; align-items:center; justify-content:center; padding:2rem;
    background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.6));
    border-left:1px solid var(--line);
}

.login-box{
    width:min(420px, 92vw);
    background: linear-gradient(180deg, rgba(17,24,39,.7), rgba(15,23,42,.6));
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.4rem 1.4rem 1.6rem;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}

.login-box h2{
    font-size:1.6rem; font-weight:800; margin-bottom:1rem;
    background:linear-gradient(90deg,var(--violet),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Form */
.form-row{ margin:.6rem 0; }
.input-wrap{ position:relative; }
.input{
    width:100%; padding:0.9rem 1rem; border-radius:12px; border:1px solid var(--line);
    background:#0e152a; color:var(--text); font-size:1rem; transition:border .15s, box-shadow .15s, background .15s;
}
.input::placeholder{ color:#9CA3AF; opacity:.8 }
.input:focus{ outline:none; border-color:#2b3a66; box-shadow:0 0 0 3px rgba(99,102,241,.15); background:#0c1222 }

.input-error{ border-color:#b91c1c !important; box-shadow:0 0 0 3px rgba(185,28,28,.15) !important }

.eye-btn{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:transparent; color:#cbd5e1; border:0; cursor:pointer; font-size:.95rem; padding:.25rem .35rem; border-radius:8px;
}
.eye-btn:hover{ color:#fff; background:#18223e }

.inline{
    display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:.2rem 0 .8rem;
    color:var(--muted); font-size:.95rem;
}
.inline label{ display:flex; align-items:center; gap:.5rem; cursor:pointer }
.inline input[type="checkbox"]{ width:16px; height:16px; accent-color:#6478ff }

.btn{
    width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid transparent;
    background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#fff; font-weight:800;
    transition:transform .1s, opacity .15s, box-shadow .15s; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); opacity:.95; box-shadow:0 8px 20px rgba(124,58,237,.2) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }

.alt{
    text-align:center; margin-top:.9rem; color:var(--muted); font-size:.95rem;
}
.alt a{ color:#a5b4fc }
.alt a:hover{ color:#fff }

#errorBox{
    margin-top:.7rem; font-size:.92rem; color:#fecaca; background:#3b0d0d; border:1px solid #7f1d1d; padding:.5rem .7rem; border-radius:10px;
}
#successBox{
    margin-top:.7rem; font-size:.92rem; color:#d1fae5; background:#0b2f22; border:1px solid #065f46; padding:.5rem .7rem; border-radius:10px;
}

/* Responsive */
@media (max-width: 980px){
    .login-layout{ grid-template-columns:1fr }
    .login-right{ border-left:none; border-top:1px solid var(--line) }
    .lottie{ width:min(380px, 70%); }
}