.pc-wrapper{
max-width:700px;
margin:auto;
padding:40px;
background:white;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.15);
position:relative;
overflow:hidden;
font-family:Arial;
}

.pc-title{
text-align:center;
margin-bottom:30px;
}

.pc-grid{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.pc-card{
flex:1;
background:#f7f7f7;
padding:20px;
border-radius:12px;
}

.pc-card input{
width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #ddd;
}

.pc-results{
margin-top:30px;
background:#f0f7ff;
padding:20px;
border-radius:12px;
}

.pc-row{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-size:18px;
}

.pc-syringe{
margin-top:30px;
text-align:center;
}

.pc-bar{
height:22px;
background:#ddd;
border-radius:20px;
overflow:hidden;
}

#pc-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,#00c6ff,#0072ff);
transition:width .4s ease;
}

.pc-unit-label{
display:block;
margin-top:10px;
font-size:14px;
}

.pc-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}

.pc-shape{
position:absolute;
border-radius:50%;
opacity:.2;
animation:float 7s infinite ease-in-out;
}

.s1{
width:180px;
height:180px;
background:#ff9f1c;
top:-50px;
left:-40px;
}

.s2{
width:120px;
height:120px;
background:#2ec4b6;
right:-40px;
top:30%;
}

.s3{
width:220px;
height:220px;
background:#e71d36;
bottom:-80px;
left:30%;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

@media(max-width:600px){

.pc-grid{
flex-direction:column;
}

}