/* ==============================
   SCANDU LOGIN PAGE STYLE
   ============================== */


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


body {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b,
            #334155
        );

}


/* Login container */

.login-box {

    width: 420px;

    padding: 45px;

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

    backdrop-filter: blur(15px);

    border-radius: 20px;

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

    box-shadow:
        0 20px 50px rgba(0,0,0,0.35);

    color: white;

    animation: slideIn 0.6s ease;

}



/* Animation */

@keyframes slideIn {

    from {

        opacity:0;

        transform:translateY(40px);

    }

    to {

        opacity:1;

        transform:translateY(0);

    }

}



/* Logo */

.login-box h1 {

    text-align:center;

    font-size:48px;

    letter-spacing:4px;

    color:#38bdf8;

    margin-bottom:10px;

}



/* Subtitle */

.login-box > p {

    text-align:center;

    color:#cbd5e1;

    margin-bottom:35px;

    font-size:16px;

}



/* Inputs */

.login-box input {


    width:100%;

    padding:15px 18px;

    margin-bottom:18px;

    border:none;

    outline:none;

    border-radius:12px;

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

    color:white;

    font-size:16px;

}



.login-box input::placeholder {

    color:#cbd5e1;

}



.login-box input:focus {

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

    box-shadow:

        0 0 0 2px #38bdf8;

}



/* Login button */

.login-box button {


    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#38bdf8;

    color:#0f172a;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

}



.login-box button:hover {


    background:#7dd3fc;

    transform:translateY(-2px);

    box-shadow:

        0 10px 25px rgba(56,189,248,0.4);

}



/* Message */

#message {


    margin-top:20px;

    text-align:center;

    color:#fca5a5;

    min-height:20px;

}



/* Mobile */

@media(max-width:500px){


    .login-box {

        width:90%;

        padding:30px;

    }


    .login-box h1 {

        font-size:38px;

    }

}