body{margin:0;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f7f6;color:#333;line-height:1.6}#root{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:20px;box-sizing:border-box}.App{width:100%;max-width:400px;background-color:#fff;border-radius:12px;box-shadow:0 6px 20px #0000001a;padding:25px;box-sizing:border-box;margin-top:20px}.calculator-container{display:flex;flex-direction:column;gap:15px}.calculator-title{text-align:center;color:#2c3e50;margin-bottom:20px;font-size:1.8em}.input-group{margin-bottom:10px}.input-label{display:block;margin-bottom:8px;font-weight:700;color:#555;font-size:.95em}.input-field{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-size:1em;transition:border-color .3s ease}.input-field:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff40}.calculate-button{width:100%;padding:14px 20px;background-color:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1.1em;font-weight:700;transition:background-color .3s ease,transform .1s ease;margin-top:10px}.calculate-button:hover{background-color:#0056b3;transform:translateY(-1px)}.calculate-button:active{transform:translateY(0)}.result-container{margin-top:25px;padding:20px;background-color:#e6f7ff;border:1px solid #91d5ff;border-radius:8px;box-shadow:0 2px 8px #007bff1a}.result-title{color:#0056b3;margin-top:0;margin-bottom:12px;font-size:1.4em}.result-text{margin:0;line-height:1.8;color:#333;font-size:1em}.fabric-visualization{display:flex;flex-wrap:wrap;gap:5px;margin-top:20px;justify-content:center}.fabric-piece{background-color:#a8dadc;border:1px solid #457b9d;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.8em;color:#1d3557;font-weight:700;box-shadow:0 1px 3px #0000001a;min-width:50px;height:30px;box-sizing:border-box;padding:5px;text-align:center}.fabric-piece.remaining{background-color:#f1faee;border-color:#e63946;color:#e63946}@media (min-width: 768px){.App{max-width:600px;padding:40px}.fabric-visualization{justify-content:flex-start}}.App-header{text-align:center;margin-bottom:25px}.App-header h1{color:#2c3e50;font-size:2em;margin-bottom:15px}.calculator-tabs{display:flex;justify-content:center;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab-button{background-color:#f0f0f0;border:none;padding:12px 20px;cursor:pointer;font-size:1em;font-weight:700;color:#555;transition:background-color .3s ease,color .3s ease;border-radius:8px 8px 0 0;margin:0 2px}.tab-button:hover{background-color:#e0e0e0}.tab-button.active{background-color:#007bff;color:#fff;border-bottom:2px solid #007bff}.slider-group{margin-bottom:20px}.slider-track{width:100%;height:10px;background:linear-gradient(to right,#a8dadc,#457b9d);border-radius:5px;position:relative;margin-top:15px;cursor:grab}.slider-knob{width:20px;height:20px;background-color:#e63946;border:2px solid #1d3557;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 2px 5px #0003;z-index:1}.slider-knob:active{cursor:grabbing}.panel-width-display{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;font-size:.9em;color:#666;justify-content:center}.panel-width-display span{background-color:#f1faee;padding:5px 10px;border-radius:5px;border:1px solid #457b9d}.panel-visualization-container{margin-top:30px;text-align:center}.panel-visualization-container h3{color:#0056b3;margin-bottom:20px}.panels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;justify-content:center;align-items:flex-end}.panel-card{background-color:#f8f8f8;border:1px solid #e0e0e0;border-radius:8px;padding:15px;box-shadow:0 4px 10px #00000014;display:flex;flex-direction:column;align-items:center;text-align:center}.panel-card h4{color:#333;margin-top:0;margin-bottom:10px;font-size:1.1em}.panel-svg{border:1px dashed #ccc;margin-bottom:10px;max-width:100%;height:auto}.panel-card p{font-size:.85em;color:#666;margin:2px 0}@media (min-width: 768px){.App-header h1{font-size:2.5em}.calculator-tabs{margin-bottom:30px}.tab-button{padding:15px 25px;font-size:1.1em}.panels-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}