*{
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;
}


body{

    margin:0;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    linear-gradient(
        135deg,
        #020617,
        #1e40af,
        #0f172a
    );

    color:white;

}



/* LOGIN PAGE */

.box{

    width:430px;

    padding:45px;

    text-align:center;

    background:
    rgba(255,255,255,0.12);

    backdrop-filter:
    blur(20px);

    border-radius:25px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.5);

}



.icon{

    font-size:60px;

}



.box h1{

    margin:10px 0;

    font-size:38px;

}



.box h2{

    margin:0;

    font-weight:400;

}



.box p{

    opacity:.8;

}



label{

    display:block;

    text-align:left;

    margin-top:20px;

    font-weight:600;

}



input{


    width:100%;

    padding:15px;

    margin-top:8px;

    border:none;

    border-radius:12px;

    font-size:16px;

    outline:none;

}



button{


    width:100%;

    padding:16px;

    margin-top:25px;

    border:none;

    border-radius:12px;

    background:#22c55e;

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



button:hover{

    transform:translateY(-2px);

    background:#16a34a;

}



.note{

    margin-top:25px;

    font-size:13px;

    opacity:.75;

}



.error{

    background:#dc2626;

    padding:12px;

    border-radius:10px;

    margin-bottom:15px;

}





/* DASHBOARD */


.dashboard{


    width:1000px;

    padding:40px;


    background:
    rgba(255,255,255,0.12);


    backdrop-filter:
    blur(20px);


    border-radius:25px;


    box-shadow:
    0 25px 60px rgba(0,0,0,.5);


}



.dashboard h1{

    text-align:center;

}




.client-info{


    background:
    rgba(255,255,255,.1);


    padding:20px;


    border-radius:15px;


    margin:25px 0;


}




.status{


    padding:15px;


    border-radius:12px;


    text-align:center;


    background:#92400e;


    font-size:18px;


    margin-bottom:20px;


}





.cards{


    display:grid;


    grid-template-columns:
    repeat(3,1fr);


    gap:20px;


    margin-top:30px;


}




.card{


    background:
    rgba(255,255,255,.12);


    padding:25px;


    border-radius:20px;


}



.card h2{


    font-size:20px;


    border-bottom:
    1px solid rgba(255,255,255,.3);


    padding-bottom:10px;


}



.card p{


    line-height:1.8;


}



.card b{


    color:#93c5fd;


}





.actions{


    display:flex;


    gap:20px;


    margin-top:30px;


}



.actions a{


    width:50%;

}



.actions button{


    background:#2563eb;


}



.actions .email{


    background:#9333ea;


}





@media(max-width:900px){


.dashboard{

    width:95%;

    padding:25px;

}



.cards{

    grid-template-columns:1fr;

}



.actions{

    flex-direction:column;

}



.actions a{

    width:100%;

}



}