.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:15px}
.shape-btn{padding:12px 8px;text-align:center;border:2px solid #e8e8e8;border-radius:8px;cursor:pointer;transition:all .2s;background:#fff}
.shape-btn:hover{border-color:#3592e2}
.shape-btn.active{border-color:#3592e2;background:#e8f4fd}
.shape-icon{font-size:24px;margin-bottom:4px}
.shape-btn div:last-child{font-size:12px;color:#555;font-weight:700}
.dimension-inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.dim-group label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-weight:700}
.dim-group input{width:100%;padding:8px;border:1px solid #ddd;border-radius:3px;font-size:14px}
.step-calc{margin-top:15px;padding:15px;background:#f9f9f9;border-radius:3px}
.step-calc h3{font-size:14px;color:#333;margin-bottom:10px}
.step-line{padding:6px 0;border-bottom:1px solid #eee;font-size:13px;color:#555}
.step-line:last-child{border-bottom:none}
.step-line .label{font-weight:700;color:#3592e2;margin-right:5px}
.svg-shape{margin-top:15px;text-align:center}
.svg-shape svg{max-width:100%;height:auto}
@media(max-width:768px){
  .shape-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .shape-btn{padding:8px 4px}
  .shape-icon{font-size:20px}
}
@media(max-width:480px){
  .shape-grid{grid-template-columns:repeat(2,1fr)}
}