/* ===========================
   MODERN LOGIN UI
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

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

:root{

    --primary:#4F46E5;
    --secondary:#06B6D4;

    --text:#1E293B;
    --muted:#64748B;

    --card:#ffffff;
    --border:#E2E8F0;

}

/* ===========================
   BACKGROUND
=========================== */

body{

    min-height:100vh;

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

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#EEF4FF 0%,transparent 45%),
    radial-gradient(circle at bottom right,#DFF9FF 0%,transparent 40%),
    linear-gradient(135deg,#F8FAFC,#EEF2FF);

    position:relative;

}

/* Animated Blobs */

body::before,
body::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(70px);

    z-index:-1;

    animation:float 12s ease-in-out infinite;

}

body::before{

    background:rgba(79,70,229,.18);

    top:-180px;
    left:-150px;

}

body::after{

    background:rgba(6,182,212,.15);

    bottom:-170px;
    right:-150px;

    animation-delay:4s;

}

@keyframes float{

    0%,100%{
        transform:translateY(0px) translateX(0px);
    }

    50%{
        transform:translateY(30px) translateX(20px);
    }

}

/* ===========================
   WRAPPER
=========================== */

.login-wrapper{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;

    padding:30px;

}

/* ===========================
   LOGIN CARD
=========================== */

.login-card{

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

    padding:42px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

    0 20px 60px rgba(15,23,42,.08),
    0 8px 25px rgba(79,70,229,.08);

    animation:cardShow .6s ease;

}

@keyframes cardShow{

    from{

        opacity:0;
        transform:translateY(30px) scale(.96);

    }

    to{

        opacity:1;
        transform:translateY(0) scale(1);

    }

}

/* ===========================
   HEADER
=========================== */

.login-header{

    text-align:center;
    margin-bottom:35px;

}

.logo{

    width:85px;
    height:85px;

    margin:auto auto 18px;

    border-radius:50%;

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

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

    color:#fff;
    font-size:34px;
    font-weight:700;

    box-shadow:
    0 15px 35px rgba(79,70,229,.30);

    transition:.35s;

}

.logo:hover{

    transform:rotate(8deg) scale(1.05);

}

.logo img{

    width:70%;
    height:70%;
    object-fit:contain;

}

.login-header h2{

    color:var(--text);

    font-size:28px;

    font-weight:700;

    letter-spacing:-.5px;

}

.login-header p{

    margin-top:8px;

    color:var(--muted);

    font-size:15px;

}

/* ===========================
   INPUTS
=========================== */

.input{

    width:100%;

    padding:16px 18px;

    margin-bottom:18px;

    border-radius:16px;

    border:1px solid var(--border);

    background:rgba(248,250,252,.85);

    font-size:15px;

    transition:.35s;

}

.input::placeholder{

    color:#94A3B8;

}

.input:hover{

    border-color:#CBD5E1;

}

.input:focus{

    outline:none;

    background:#fff;

    border-color:var(--primary);

    transform:translateY(-2px);

    box-shadow:
    0 0 0 5px rgba(79,70,229,.10);

}

/* ===========================
   BUTTON
=========================== */

.btn{

    width:100%;

    border:none;

    padding:16px;

    border-radius:16px;

    font-size:15px;

    font-weight:600;

    color:#fff;

    cursor:pointer;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:100%;
    height:100%;

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

    transform:skewX(-30deg);

    transition:.7s;

}

.btn:hover::before{

    left:120%;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 15px 35px rgba(79,70,229,.28);

}

.btn:active{

    transform:scale(.98);

}

.btn:disabled{

    opacity:.7;
    cursor:not-allowed;

}

/* ===========================
   FOOTER
=========================== */

.login-footer{

    margin-top:28px;

    text-align:center;

    color:#94A3B8;

    font-size:13px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:600px){

.login-card{

    padding:32px 25px;

    border-radius:24px;

}

.logo{

    width:72px;
    height:72px;

}

.login-header h2{

    font-size:24px;

}

}