* {

    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;

}



body {

    margin:0;
    height:100vh;

    background:
    radial-gradient(circle at top,#162447,#050816);

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

    color:white;

}



.background {

    width:100%;
    height:100%;

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

}



.login-box {


    width:380px;

    padding:40px;

    background:

    rgba(255,255,255,0.08);


    backdrop-filter:blur(15px);


    border-radius:20px;


    border:1px solid rgba(0,255,255,0.35);


    box-shadow:

    0 0 30px rgba(0,255,255,0.25);



}



.language-selector {


    text-align:right;

    margin-bottom:25px;


}



.language-selector select {


    background:#101827;

    color:white;

    border:1px solid #00ffff;

    padding:8px 12px;

    border-radius:10px;

    cursor:pointer;


}



.logo {


    text-align:center;

    font-size:48px;

    font-weight:700;


    letter-spacing:4px;


    color:#00ffff;


    text-shadow:

    0 0 10px #00ffff,

    0 0 30px #00ffff;



}



.subtitle {


    text-align:center;

    color:#aaa;

    margin-bottom:35px;

    font-size:18px;


}



.input-box {


    margin-bottom:20px;


}



.input-box input {


    width:100%;

    padding:15px;


    background:#0b1220;


    color:white;


    border:none;


    outline:none;


    border-radius:12px;


    border:1px solid #00ffff;


    box-shadow:

    0 0 10px rgba(0,255,255,0.5);


    transition:.3s;


}



.input-box input:focus {


    box-shadow:

    0 0 20px #00ffff;


}



.login-button {


    width:100%;


    padding:15px;


    margin-top:10px;


    border:none;


    border-radius:30px;


    background:

    linear-gradient(
        90deg,
        #00ffff,
        #0077ff
    );


    color:#001;


    font-size:17px;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;



}



.login-button:hover {


    transform:scale(1.05);


    box-shadow:

    0 0 25px #00ffff;


}





#message {


    text-align:center;

    margin-top:20px;

    color:#ff6666;


}




/*
    Password visibility toggle
*/


.password-box {

    position:relative;

}



.password-toggle {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:20px;

    user-select:none;

    opacity:0.8;

}



.password-toggle:hover {

    opacity:1;

}