.container-box{
max-width:720px;
margin:auto;
}

.card-main{
background:white;
border-radius:22px;
box-shadow:0 20px 60px rgba(0,0,0,.15);
overflow:hidden;
}

.headerb{
background:linear-gradient(135deg,#0f766e,#0d9488);
color:white;
padding:28px;
text-align:center;
}

.headerb h2{
font-weight:900;
margin:0;
}

.headerb p{
margin-top:8px;
opacity:.9;
}

.bodyb{
padding:25px;
}

.input-box{
background:#ecfdf5;
border-radius:16px;
padding:20px;
border:1px solid #a7f3d0;
}

label{
font-weight:700;
margin-bottom:6px;
}

input{
height:50px!important;
border-radius:14px!important;
font-size:16px!important;
}

input:focus{
border-color:#0d9488!important;
box-shadow:0 0 0 .2rem rgba(13,148,136,.15)!important;
}

.btn-main{
background:#0f766e;
color:white;
border:none;
height:52px;
border-radius:14px;
font-weight:900;
width:100%;
margin-top:18px;
transition:.25s;
}

.btn-main:hover{
background:#0d9488;
transform:translateY(-2px);
}

.result-card{
margin-top:25px;
background:#f9fafb;
border-radius:18px;
padding:22px;
border:1px solid #e5e7eb;
animation:fade .4s ease;
}

.result-item{
display:flex;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid #eee;
font-weight:700;
font-size:17px;
}

.result-item:last-child{
border-bottom:none;
}

.result-number{
font-weight:900;
color:#0f766e;
font-size:18px;
}

@keyframes fade{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}