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

body{

    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;

    background:
    radial-gradient(circle at top left,#3b82f655,transparent 35%),
    radial-gradient(circle at bottom right,#7c3aed55,transparent 40%),
    #0d1117;

    color:#fff;

    overflow:hidden;
}

body::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.35;
}

.container{

    position:relative;
    z-index:1;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.login-card{

    width:430px;

    padding:42px;

    border-radius:24px;

    background:rgba(22,27,34,.75);

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    inset 0 1px rgba(255,255,255,.08);

    position:relative;

    animation:fadeIn .6s ease;
}

.login-card::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:24px;

    padding:1px;

    background:linear-gradient(135deg,#3b82f6,#7c3aed,#06b6d4);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;
}

.login-card h1{

    text-align:center;

    font-size:34px;

    color:#fff;

    letter-spacing:1px;
}

.subtitle{

    text-align:center;

    color:#9ca3af;

    margin-top:12px;

    margin-bottom:35px;
}

.input-group{

    margin-bottom:22px;
}

.input-group label{

    display:block;

    margin-bottom:8px;

    color:#cbd5e1;

    font-size:14px;

    font-weight:600;
}

.input-group input{

    width:100%;

    height:55px;

    padding:0 18px;

    border-radius:14px;

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

    background:#111827;

    color:white;

    font-size:15px;

    transition:.25s;
}

.input-group input::placeholder{

    color:#6b7280;
}

.input-group input:focus{

    outline:none;

    border-color:#3b82f6;

    background:#151d2d;

    box-shadow:0 0 0 4px rgba(59,130,246,.18);
}

.login-btn{

    width:100%;

    height:56px;

    margin-top:10px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#3b82f6,#6366f1);

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 35px rgba(59,130,246,.35);
}

.login-btn:active{

    transform:scale(.98);
}


.bottom-text{

    margin-top:28px;

    text-align:center;

    color:#9ca3af;

    font-size:14px;
}

.bottom-text a{

    color:#60a5fa;

    text-decoration:none;

    font-weight:600;

    transition:.2s;
}

.bottom-text a:hover{

    color:#93c5fd;
}

#errorMessage{

    margin-top:18px;

    text-align:center;

    color:#f87171;

    font-weight:600;

    min-height:20px;
}

.footer{

    margin-top:24px;

    color:#6b7280;

    font-size:13px;

    letter-spacing:1px;
}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px) scale(.96);
    }

    to{

        opacity:1;

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

}

@media(max-width:500px){

    .login-card{

        width:92vw;

        padding:30px;
    }

    .login-card h1{

        font-size:30px;
    }

}