.credit-wrapper {

    width:100%;

    display:flex;

    justify-content:center;

}



.credit-box {

    width:450px;
    margin-left: auto;
    margin-right: auto;
    max-width:100%;

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}



h1 {

    text-align:center;

    margin:0 0 15px;

    color:#0f4c81;

    font-size:28px;

}



.description {

    text-align:center;

    color:#64748b;

    line-height:1.5;

    margin-bottom:25px;

}




label {

    display:block;

    font-weight:600;

    margin-top:15px;

    margin-bottom:7px;

}




.input-group {

    display:flex;

    align-items:center;

    background:#f8fafc;

    border:1px solid #cbd5e1;

    border-radius:10px;

    overflow:hidden;

}



.input-group input {
    flex:1;
    border:0;
    background:transparent;
margin-bottom: 1px;
    padding:14px;
    font-size:18px;
    outline:none;
}



.input-group span {

    padding:0 15px;

    color:#64748b;

    font-weight:bold;

}





.term {

    display:flex;

    gap:15px;

}



.term div {

    flex:1;

}



.term input {

    width:100%;

    padding:14px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    font-size:18px;

}




button {
    width:100%;
    margin-top:25px;
    padding:15px;
    background:#4facfe;
    border:0;
    border-radius:12px;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:.2s;
}



button:hover {
    background:#008cff;
    transform:translateY(-1px);
}





#result {


    margin-top:25px;


    padding:20px;


    background:#f8fafc;


    border-radius:15px;


    border-left:5px solid #0f4c81;


    line-height:1.8;


    font-size:17px;


}




.result-title {


    font-size:20px;

    font-weight:bold;

    color:#0f4c81;

    margin-bottom:10px;

}




.result-value {


    font-size:22px;

    font-weight:bold;

    color:#0f4c81;

}





.credit-line {


    padding:8px 0;

    border-bottom:1px solid #e2e8f0;


}



.credit-line:last-child {


    border-bottom:none;


}






@media(max-width:500px){


body{

    padding:15px;

}


.credit-box{

    padding:20px;

}


h1{

    font-size:24px;

}


}