*{
    margin:0;

    padding:0;

    box-sizing:border-box;
}



body{

    font-family:Arial,sans-serif;

    background:#f5f5f5;

    min-height:100vh;

}



/* ======================
FORM
====================== */

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;

}



/* ======================
TITLE
====================== */

h1{

    margin:0;

    font-size:2rem;

    color:#050816;

}



h2{

    margin:0;

    font-size:1rem;

    color:#64748b;

    font-weight:400;

}



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

.error{

    color:#dc2626;

    font-size:.95rem;

}



/* ======================
FIELDS
====================== */

input{

    width:100%;

    padding:14px;

    border:1px solid #dbe2ea;

    border-radius:10px;

    outline:none;

    font-size:1rem;

}



input:focus{

    border-color:#14b814;

}



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

button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#050816;

    color:white;

    font-size:1rem;

    cursor:pointer;

}



button:hover{

    background:#111827;

}



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

p{

    color:#64748b;

    font-size:.95rem;

}



a{

    color:#050816;

    font-weight:600;

    text-decoration:none;

}



a:hover{

    text-decoration:underline;

}



/* ======================
RESPONSIVE
====================== */

@media(max-width:768px){

form{

margin:40px 20px;

padding:28px;

}

}