:root{

    --primary:#2563EB;
    --primary2:#4F8EF7;
    --bg:#EEF4FF;
    --white:#ffffff;
    --text:#111827;
    --text2:#6B7280;
    --border:#E5E7EB;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Plus Jakarta Sans',sans-serif;
}

body{

    background:
    radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom right,#bfdbfe 0%,transparent 35%),
    var(--bg);

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:30px;

}

body::before{

content:"";

position:fixed;

left:-150px;

top:-150px;

width:450px;

height:450px;

background:#3B82F6;

filter:blur(150px);

opacity:.18;

}

body::after{

content:"";

position:fixed;

right:-180px;

bottom:-180px;

width:420px;

height:420px;

background:#60A5FA;

filter:blur(160px);

opacity:.18;

}

.login-wrapper{

    width:100%;
    max-width:430px;

}

.login-card{

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(20px);

    border-radius:34px;

    padding:45px 35px;

    border:1px solid rgba(255,255,255,.5);

    box-shadow:

    0 15px 40px rgba(37,99,235,.08),
    0 30px 80px rgba(0,0,0,.06);

    transition:.35s;
    animation:fadeUp .8s;

box-shadow:

0 15px 35px rgba(37,99,235,.08),

0 30px 70px rgba(15,23,42,.08),

0 0 0 1px rgba(255,255,255,.7);


}

.login-card:hover{

    transform:translateY(-3px);

}

.logo-area{

    position:relative;

    display:flex;

    justify-content:center;

    margin-bottom:30px;

}

.logo-area::before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    background:#60A5FA;

    border-radius:50%;

    filter:blur(70px);

    opacity:.22;

}

.logo{

    width:95px;

    height:95px;

    display:block;

    margin:auto;

    padding:16px;

    background:white;

    border-radius:28px;

    box-shadow:
        0 12px 35px rgba(37,99,235,.12);

    animation:floatLogo 4s ease-in-out infinite;

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}

.title{

    font-size:52px;

    font-weight:800;

    text-align:center;

    letter-spacing:-3px;

    color:#111827;

    margin-top:15px;

}

.title span{

    color:#2563EB;

}

h2{

    text-align:center;

    margin-top:12px;

    color:#6B7280;

    font-size:18px;

    font-weight:500;

    margin-bottom:40px;

}

.badge{

    width:max-content;

    margin:18px auto;

    background:#EFF6FF;

    color:#2563EB;

    padding:8px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}


h1{

font-size:38px;

font-weight:800;

letter-spacing:-2px;

line-height:1.1;

color:#111827;

animation:fadeDown .8s;
 align-content: center;
}

p{

font-size:17px;

color:#6B7280;

margin-top:12px;

margin-bottom:40px;

animation:fadeDown 1s;

}

.input-group{

transition:.35s;

}

.input-group:hover{

transform:translateY(-2px);

}
.input-group{
    position: relative;

    display: flex;
    align-items: center;

    height: 62px;

    margin-bottom: 20px;
}

.input-group span{

    position: absolute;

    left: 22px;

    color: #94A3B8;

    font-size: 20px;

    pointer-events: none;

}

.input-group input{

    width: 100%;

    height: 100%;

    border: 2px solid transparent;

    border-radius: 18px;

    background: #F8FAFC;

    padding: 0 55px 0 58px;

    font-size: 15px;

    color: var(--text);

    transition: .25s;

}

.input-group input:focus{

    outline: none;

    background: white;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(37,99,235,.08);

}

.input-group input::placeholder{

    color:#9CA3AF;

}

.input-group button{

    position:absolute;

    right:20px;

    background:none;

    border:none;

    color:#94A3B8;

    cursor:pointer;

    font-size:18px;

}

.input-group button:hover{

    color:var(--primary);

}
.remember{
    display:flex;
    align-items:center;
    margin:18px 0 28px;
}

.remember label{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-size:14px;
    color:#4B5563;
    line-height:1.5;
}

.remember input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--primary);
    flex-shrink:0;
}

.remember span{
    margin:0;
}

.login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary2)
    );

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:
    0 15px 35px rgba(37,99,235,.30);

overflow:hidden;

position:relative;

}

.login-btn{

overflow:hidden;

position:relative;

}

.login-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transition:.7s;

}

.login-btn:hover::before{

left:140%;

}

.register{

    text-align:center;

    margin-top:30px;

    color:#6B7280;

    font-size:15px;

}

.register a{

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

}

.register a:hover{

    text-decoration:underline;

}

.error{

    color:#DC2626;

    font-size:13px;

    margin:-10px 0 15px;

}

@media(max-width:576px){

    body{

        padding:18px;

    }

    .login-card{

        border-radius:28px;

        padding:35px 24px;

    }

    h1{

        font-size:30px;

    }

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.login-card{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}




body::before,
body::after{
    pointer-events:none;
}

.login-btn{
    position:relative;
    z-index:10;
}

/* ===========================
   TOAST
=========================== */

.toast{

    position:fixed;
    top:20px;
    left:50%;

    transform:translate(-50%,0);

    width:380px;
    max-width:calc(100% - 30px);

    background:#fff;
    border-radius:18px;

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px;

    box-shadow:0 18px 45px rgba(15,23,42,.18);

    z-index:99999;

    opacity:1;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.toast.hide{

    opacity:0;

    transform:translate(-50%,-25px);

    pointer-events:none;

}

.toast.success{
    border-left:6px solid #22c55e;
}

.toast.error{
    border-left:6px solid #ef4444;
}

.toast.warning{
    border-left:6px solid #f59e0b;
}

.toast.info{
    border-left:6px solid #3b82f6;
}

.toast-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:24px;

}

.success .toast-icon{
    background:#DCFCE7;
    color:#16A34A;
}

.error .toast-icon{
    background:#FEE2E2;
    color:#DC2626;
}

.warning .toast-icon{
    background:#FEF3C7;
    color:#D97706;
}

.info .toast-icon{
    background:#DBEAFE;
    color:#2563EB;
}

.toast-body{
    flex:1;
}

.toast-body h5{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#111827;
}

.toast-body p{
    margin:4px 0 0;
    color:#64748B;
    font-size:14px;
}

.toast-close{

    border:none;
    background:none;

    cursor:pointer;

    color:#94A3B8;

    font-size:18px;

}

.remember{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin:18px 0 28px;
    gap:12px;
}

.remember label{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-size:14px;
    color:#4B5563;
    line-height:1.5;
    margin:0;
}

.remember input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:var(--primary);
    flex-shrink:0;
}

.remember span{
    margin:0;
}

.forgot-password{
    margin-left:auto;
    color:var(--primary);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

.forgot-password:hover{
    text-decoration:underline;
}