body{

    margin:0;

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

    background:linear-gradient(
        135deg,
        #ffffff,
        #dcdcdc
    );

    display:flex;

    justify-content:center;

    align-items:center;

    height:100vh;

}


/* =====================
   CARD
===================== */

.card{

    width:400px;

    background:white;

    padding:35px;

    border-radius:16px;

    box-shadow:0 20px 50px rgba(0,0,0,0.2);

    position:relative; /* needed for toast */

}


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

.logo img{
width:60px;
margin-bottom:5px;
}

h2{
margin:0;
font-size:22px;
}

*{
box-sizing:border-box;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-top: 20px;
    letter-spacing: 0.2px;
}

.desc{
text-align:center;
color:#757575;
font-size:12px;
margin-bottom:10px;
margin-top:30px;
}

input,
button{
width:100%;
padding:12px;
border-radius:8px;
font-size:14px;
}

input{
margin:8px 0;
border:1px solid #e0e0e0;
}

button{
margin-top:10px;
border:none;
background:#3d0e64;
color:white;
font-weight:600;
cursor:pointer;
}


.alert{
padding:10px;
border-radius:8px;
margin-bottom:15px;
font-size:13px;
text-align:center;
}

.success{
background:#e8f7ee;
color:#0c7a43;
}

.error{
background:#fdecea;
color:#c0392b;
}

.bottom{
text-align:center;
margin-top:20px;
font-size:13px;
}

.bottom a{
text-decoration:none;
color:#490e49;
font-weight:700;
margin:0 5px;
}

.bottom span{
color:#ccc;
}

.success-box{
background:#e8f7ee;
color:#0c7a43;
padding:12px;
border-radius:8px;
text-align:center;
margin-bottom:15px;
}

.login-btn{
display:inline-block;
padding:10px 20px;
background:#0c7c04;
color:white !important;
border-radius:6px;
}