*{
    margin:0;

    padding:0;

    box-sizing:border-box;
}



body{

    font-family:Arial,sans-serif;

    background:#f5f5f5;

    min-height:100vh;

}



/* ======================
PAGE
====================== */

.login-form{

    width:100%;

    max-width:380px;

    margin:80px auto;

    padding:40px;

    background:white;

    border:1px solid #e5e7eb;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    gap:18px;

}



/* ======================
TEXT
====================== */

.login-form h1{

    margin:0;

    font-size:2rem;

    color:#050816;

}



.login-form h2{

    margin:0;

    font-size:1rem;

    color:#64748b;

    font-weight:400;

}



/* ======================
ERROR
====================== */

.error{

    color:#dc2626;

    font-size:.95rem;

}



/* ======================
INPUTS
====================== */

.login-form input{

    padding:14px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    outline:none;

    font-size:1rem;

}



.login-form input:focus{

    border-color:#14b814;

}



/* ======================
BUTTON
====================== */

.login-form button{

    padding:14px;

    border:none;

    border-radius:10px;

    background:#050816;

    color:white;

    font-size:1rem;

    cursor:pointer;

}



.login-form button:hover{

    background:#111827;

}



/* ======================
BOTTOM TEXT
====================== */

.login-form p{

    font-size:.95rem;

    color:#64748b;

}



.login-form a{

    color:#050816;

    font-weight:600;

    text-decoration:none;

}



.login-form a:hover{

    text-decoration:underline;

}



/* ======================
MOBILE
====================== */

@media(max-width:768px){

.login-form{

margin:40px 20px;

padding:28px;

}

}