div#formula-box{display:none!important;}
.calc-wrap{margin:30px auto;}
.hero{background:linear-gradient(rgba(0,0,0,0.42),rgba(0,0,0,0.52)),url('../image/calculator-image.webp') center/cover no-repeat;border-radius:10px;padding:50px 24px 36px;text-align:center;color:#fff;}
.hero h2{font-size:30px;font-weight:600;margin-bottom:8px;letter-spacing:0.5px;color:#fff;}
.hero p{font-size:15px;opacity:0.9;margin-bottom:30px;}
.controls{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;gap:20px;justify-content:center;background:rgba(65,175,195,0.82);border-radius:8px;padding:16px 20px;}
.field{display:flex;align-items:center;gap:10px;}
.field label{color:#fff;font-size:18px;line-height:29px;font-weight:400;white-space:nowrap;}
.field input,.field select{background:#fff;border:none;border-radius:4px;padding:5px 10px;font-size:14px;outline:none;}
.fields-wrap{display:flex;flex-direction:row;justify-content:center;gap:20px;}
.field select{width:max-content;cursor:pointer;}
.field input{width:95px;}
.calc-btn{background:#e05a2b;color:#fff;border:none;border-radius:4px;padding:9px 24px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0.5px;white-space:nowrap;transition:background 0.15s;}
.calc-btn:hover{background:#c44e22;}
.result-row{margin-top:12px;background:rgba(65,175,195,0.72);border-radius:8px;padding:18px 20px;text-align:center;font-size:19px;color:#fff;font-weight:400;display:none;}
.result-row strong{font-weight:700;}
.formula-box{background:#f0f8f9;border:1px solid #b2dde4;border-radius:8px;padding:14px 18px;margin-top:14px;font-size:13px;color:#555;display:none;}
.formula-box .flabel{font-weight:700;color:#1a7a8a;display:block;margin-bottom:4px;}
.shapes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.shape-card{background:#fff;border:1px solid #ddd;border-radius:8px;padding:16px 10px;text-align:center;font-size:12px;color:#666;}
.shape-card svg{display:block;margin:0 auto 10px;}
.shape-card strong{display:block;font-size:13px;color:#222;margin-bottom:4px;}
@media (max-width:767px){
  .fields-wrap {
    flex-direction: column;
}

div#controls {
    align-items: flex-start;
}
}
@media (max-width:600px){
  .shapes-grid{grid-template-columns:repeat(2,1fr);}
  .field select{width:150px;}
  .field input{width:80px;}

}