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

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

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

    padding: 20px;

    background:
    linear-gradient(rgba(15,23,42,0.85),
    rgba(15,23,42,0.85)),
    url('../images/bg.jpg');

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


.login-container{
    width: 100%;
    max-width: 430px;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 8px 32px rgba(0,0,0,0.35);

    text-align: center;
}


.logo-container{
    margin-bottom: 5px;
}

.logo{
    width: 130px;
    height: 130px;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid rgba(255,255,255,0.3);

    box-shadow:
    0 0 25px rgba(255,255,255,0.2);
}


.login-container h1{
    color: white;

    font-size: 52px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-top: 10px;
}


.system-title{
    color: #cbd5e1;

    font-size: 16px;

    margin-bottom: 30px;
}


.form-control{
    height: 54px;

    border-radius: 16px;

    border: none;

    padding-left: 20px;

    font-size: 16px;

    background: rgba(255,255,255,0.12);

    color: white;

    margin-bottom: 18px;
}

.form-control::placeholder{
    color: #e2e8f0;
}

.form-control:focus{
    box-shadow: 0 0 0 3px rgba(59,130,246,0.3);

    background: rgba(255,255,255,0.15);

    color: white;
}

.btn-login{
    width: 100%;

    height: 54px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(to right,
    #2563eb,
    #1d4ed8);

    color: white;

    font-size: 18px;

    font-weight: 600;

    transition: 0.3s;
}

.btn-login:hover{
    transform: translateY(-2px);

    box-shadow:
    0 8px 20px rgba(37,99,235,0.4);
}


.error-message{
    background: rgba(239,68,68,0.15);

    border: 1px solid rgba(239,68,68,0.4);

    color: #fecaca;

    padding: 14px;

    border-radius: 14px;

    margin-bottom: 20px;
}

@media(max-width: 500px){

.login-container{
    width: 95%;
    padding: 28px;
}

.login-container h1{
    font-size: 42px;
}

.logo{
    width: 110px;
    height: 110px;
}

}
/* REGISTER LINK */

.register-link{

    margin-top: 18px;

    text-align: center;

    color: #ffffff;

    font-size: 16px;

    font-weight: 500;
}

.register-link a{

    color: #60a5fa;

    text-decoration: none;

    font-weight: 700;
}

.register-link a:hover{

    color: #93c5fd;

    text-decoration: underline;
}