/* Reset */

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

/* Pagina */

body{

    background:#f5f7fb;

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

}

/* Box Login */

.login-box{

    width:420px;

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:0px 10px 30px rgba(0,0,0,.12);

}

/* Titolo */

.login-box h1{

    text-align:center;

    margin-bottom:30px;

    color:#222;

}

/* Input */

.login-box input{

    width:100%;

    padding:14px;

    margin-bottom:18px;

    border-radius:10px;

    border:1px solid #d8d8d8;

    outline:none;

    font-size:16px;

}

.login-box input:focus{

    border-color:#0077ff;

}

/* Bottone */

.login-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    background:#0077ff;

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.login-box button:hover{

    background:#005fd1;

}

/* Messaggio errore */

#errore{

    margin-top:18px;

    text-align:center;

    color:red;

}
.login-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.20), transparent 35%),
        radial-gradient(circle at bottom right, rgba(14,165,233,.16), transparent 35%),
        #f8fafc;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    font-family:Inter, Arial, sans-serif;
}

.login-shell{
    width:100%;
    max-width:1100px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:34px;
    align-items:center;
}

.login-hero{
    padding:40px;
}

.big-brand{
    margin-bottom:38px;
}

.login-hero h1{
    font-size:58px;
    line-height:1;
    letter-spacing:-2px;
    color:#0f172a;
    margin-bottom:24px;
}

.login-hero p{
    max-width:560px;
    color:#64748b;
    font-size:18px;
    line-height:1.7;
}

.login-panel{
    max-width:430px;
    width:100%;
    justify-self:end;
}

.login-panel h2{
    font-size:34px;
    margin-bottom:8px;
}

.login-submit{
    width:100%;
    margin-top:8px;
}

#errore{
    color:#dc2626;
    margin-top:18px;
    text-align:center;
    font-weight:700;
}

@media(max-width:900px){
    .login-shell{
        grid-template-columns:1fr;
    }

    .login-panel{
        justify-self:stretch;
        max-width:none;
    }

    .login-hero{
        padding:10px;
    }

    .login-hero h1{
        font-size:40px;
    }
}