:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;
    --success:#198754;
    --light:#f8f9fa;
    --border:#dee2e6;
    --text:#495057;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;

    background:linear-gradient(135deg,#0d6efd,#084298);

    min-height:100vh;

}

.card-form{

    border:none;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

    animation:fade .5s ease;

}

.logo-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    margin:auto;

}

.form-label{

    font-weight:600;

    color:var(--text);

}

.form-control,
.form-select{

    height:56px;

    border-radius:12px;

    border:1px solid var(--border);

    transition:.25s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

.input-group-text{

    border-radius:12px 0 0 12px;

    background:#fff;

}

.btn-primary{

    height:56px;

    border-radius:12px;

    font-weight:600;

    font-size:17px;

    transition:.25s;

}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(13,110,253,.25);

}

.invalid-feedback{

    display:block;

    color:#dc3545;

    font-size:.90rem;

}

.spinner-border{

    width:18px;
    height:18px;

}

.card{

    animation:fade .5s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@media(max-width:768px){

    .card-body{

        padding:30px;

    }

    h2{

        font-size:1.7rem;

    }

}