*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    width:100%;
    height:100%;
}

body{
    font-family:"Inter","Segoe UI",sans-serif;

    background:
        linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
        url("background.png") center center / cover no-repeat fixed;

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

.login-box{

    width:420px;

    padding:40px;

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(8px);

    border-radius:18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.35);
}

/* HDD image */

.logo{
    text-align:center;
    margin-bottom:10px;
}

.logo img{
    width:95px;
    height:auto;
}

/* Title */

h1{
    margin:0;
    text-align:center;
    font-size:30px;
    font-weight:700;
    color:#182032;
}

.subtitle{
    margin:12px 0 32px;
    text-align:center;
    font-size:15px;
    color:#5d6777;
}

/* Labels */

label{
    display:block;
    margin-bottom:7px;
    font-size:15px;
    font-weight:600;
    color:#222;
}

input{

    width:100%;
    padding:14px;

    margin-bottom:22px;

    border:1px solid #d6d6d6;
    border-radius:8px;

    font-size:15px;

    transition:.2s;
}

input:focus{

    outline:none;

    border-color:#2962ff;

    box-shadow:0 0 0 3px rgba(41,98,255,.15);
}

/* Button */

button{

    width:100%;

    padding:15px;

    border:none;
    border-radius:8px;

    background:#2962ff;

    color:white;

    font-size:18px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

button:hover{

    background:#1d53e5;
}

/* Error */

#error{

    display:none;

    margin-top:22px;

    padding:14px 16px;

    border-radius:8px;

    background:#fff5f5;

    border:1px solid #f0b7b7;

    color:#c62828;

    align-items:center;

    gap:12px;
}

.error-icon{

    width:28px;
    height:28px;

    border:2px solid #d32f2f;

    border-radius:50%;

    color:#d32f2f;

    font-weight:700;

    font-size:18px;

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

    flex-shrink:0;
}

/* Footer */

.footer{

    position:fixed;

    left:0;
    bottom:18px;

    width:100%;

    text-align:center;

    color:rgba(255,255,255,.9);

    font-size:13px;

    user-select:none;
}