.shape-categories{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.category-btn{padding:1rem;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:1rem}.category-btn i{font-size:1.5rem;color:#667eea}.category-btn:hover{border-color:#667eea;background:linear-gradient(135deg,#f0f4ff 0%,#e8edff 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.category-btn.active{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.category-btn.active i{color:#fff}.shape-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}.shape-card{padding:1.5rem 1rem;border:2px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center}.shape-card i{font-size:2.5rem;color:#667eea;transition:all .3s ease}.shape-card span{font-weight:600;font-size:.9rem;color:#2d3748}.shape-card:hover{border-color:#667eea;background:linear-gradient(135deg,#f0f4ff 0%,#e8edff 100%);transform:translateY(-4px);box-shadow:0 6px 16px rgba(102,126,234,.25)}.shape-card:hover i{transform:scale(1.1);color:#764ba2}.shape-card.active{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.shape-card.active i{color:#fff}.shape-card.active span{color:#fff}#dynamicInputs{display:grid;gap:1rem;margin-top:1rem}.input-group-custom{display:flex;flex-direction:column;gap:.5rem}.input-group-custom label{font-weight:600;color:#2d3748;font-size:.95rem;display:flex;align-items:center;gap:.5rem}.input-group-custom label i{color:#667eea;cursor:help}.input-group-custom .form-input{width:100%}.form-input{width:100%;padding:12px 15px;border:2px solid #48bb78;border-radius:12px;font-family:'Roboto Mono',monospace;font-size:1.1rem;background:#f0fff4;transition:all .3s ease}.shape-visualization{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%);border-radius:12px;padding:1rem}#shapeCanvas{max-width:100%;height:auto;border-radius:8px}#visualizationPlaceholder{position:absolute;font-size:1.1rem;color:#a0aec0;font-weight:500}#resultsContent{display:grid;gap:1rem;margin-top:1rem}.result-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:linear-gradient(135deg,#f8faff 0%,#fff 100%);border-radius:8px;border-left:4px solid #48bb78}.result-item-label{font-weight:600;color:#2d3748;font-size:.95rem}.result-item-value{font-size:1.25rem;font-weight:700;color:#667eea;font-family:'Courier New',monospace}.result-item-value .unit{font-size:.85rem;color:#718096;margin-left:.25rem}#formulaContent{margin-top:1rem;padding:1.5rem;background:linear-gradient(135deg,#fffaf0 0%,#fff5e6 100%);border-radius:8px;border-left:4px solid #f59e0b}.formula-item{margin-bottom:1rem;font-family:'Courier New',monospace;font-size:1rem;color:#2d3748;line-height:1.8}.formula-item:last-child{margin-bottom:0}.formula-item strong{color:#667eea;font-weight:700}.message-alert{padding:1rem;border-radius:8px;margin-top:1rem;display:flex;align-items:center;gap:.75rem;font-size:.95rem}.message-alert i{font-size:1.25rem}.message-alert.warning{background:#fff3cd;border-left:4px solid #ffc107;color:#856404}.message-alert.error{background:#f8d7da;border-left:4px solid #dc3545;color:#721c24}.message-alert.success{background:#d4edda;border-left:4px solid #28a745;color:#155724}.message-alert.info{background:#d1ecf1;border-left:4px solid #17a2b8;color:#0c5460}.unit-selector{display:flex;gap:.5rem;align-items:center;margin-top:1rem;padding:1rem;background:linear-gradient(135deg,#f0fff4 0%,#e6fffa 100%);border-radius:8px}.unit-selector label{font-weight:600;color:#2d3748;font-size:.9rem}.unit-selector select{flex:1;padding:.5rem;border:2px solid #48bb78;border-radius:6px;font-size:.9rem;background:#fff;cursor:pointer;transition:all .3s ease}.unit-selector select:hover{border-color:#38a169}.unit-selector select:focus{outline:none;border-color:#2f855a;box-shadow:0 0 0 3px rgba(72,187,120,.1)}.action-buttons-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.btn-custom,.btn-custom-outline{width:100%;padding:.75rem 1rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none}.btn-custom{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.btn-custom:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.3)}.btn-custom-outline{background:#fff;color:#667eea;border:2px solid #667eea}.btn-custom-outline:hover{background:linear-gradient(135deg,#f0f4ff 0%,#e8edff 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.btn-custom:active,.btn-custom-outline:active{transform:translateY(0)}.btn-sponsor{width:100%;padding:.75rem 1rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%);color:#fff}.btn-sponsor:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,158,11,.3)}.btn-sponsor:active{transform:translateY(0)}@media(max-width:992px){.shape-cards-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.shape-cards-grid{grid-template-columns:repeat(2,1fr)}.shape-visualization{min-height:300px}#shapeCanvas{width:100%;height:auto}}@media(max-width:576px){.shape-categories{grid-template-columns:1fr}.shape-cards-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.shape-card{padding:1rem .5rem}.shape-card i{font-size:2rem}.shape-card span{font-size:.85rem}.action-buttons-grid{grid-template-columns:1fr}.shape-visualization{min-height:250px}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}.loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.tooltip-icon{cursor:help;color:#a0aec0;transition:color .2s ease}.tooltip-icon:hover{color:#667eea}#stepsContent{margin-top:1rem}.calculation-step{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-left:4px solid #667eea;border-radius:8px;padding:1rem;margin-bottom:1rem;transition:all .3s ease}.calculation-step:hover{transform:translateX(4px);box-shadow:0 4px 12px rgba(102,126,234,.15)}.step-number{font-size:1.1rem;font-weight:700;color:#667eea;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.step-formula,.step-calculation,.step-intermediate,.step-result{margin:.5rem 0;padding-left:1.5rem;line-height:1.6}.step-formula{color:#2d3748;font-family:'Courier New',monospace;font-size:.95rem}.step-calculation{color:#4a5568;font-family:'Courier New',monospace;font-size:.95rem}.step-intermediate{color:#718096;font-family:'Courier New',monospace;font-size:.95rem;padding-left:2rem}.step-result{color:#2d3748;font-size:1rem}.step-result .highlight{background:linear-gradient(135deg,#48bb78 0%,#38a169 100%);color:#fff;padding:.25rem .75rem;border-radius:6px;font-weight:700;font-size:1.05rem}.feature-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem}.feature-tab{padding:.875rem 1rem;border:2px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.9rem;color:#2d3748}.feature-tab i{font-size:1.1rem;color:#667eea;transition:all .3s ease}.feature-tab:hover{border-color:#667eea;background:linear-gradient(135deg,#f0f4ff 0%,#e8edff 100%);transform:translateY(-2px);box-shadow:0 4px 10px rgba(102,126,234,.15)}.feature-tab.active{border-color:#667eea;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.feature-tab.active i{color:#fff}.feature-content{margin-top:1.5rem}.result-display{padding:1.5rem;background:linear-gradient(135deg,#f0fff4 0%,#e6fffa 100%);border-radius:12px;text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}.result-value{font-size:2.5rem;font-weight:700;color:#667eea;font-family:'Courier New',monospace;margin-bottom:.5rem}.formula-display{padding:1.5rem;background:linear-gradient(135deg,#fffaf0 0%,#fff5e6 100%);border-radius:12px;min-height:100px}.calculation-steps{font-family:'Courier New',monospace;line-height:1.8;color:#2d3748}.calculation-steps .step{margin:1rem 0;padding:.75rem;background:#fff;border-radius:8px;border-left:4px solid #667eea}.shapes-list{max-height:300px;overflow-y:auto;padding:.5rem}.shape-list-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;margin-bottom:.5rem;background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%);border-radius:8px;border-left:4px solid #48bb78;transition:all .3s ease}.shape-list-item.subtract{border-left-color:#f56565}.shape-list-item:hover{transform:translateX(4px);box-shadow:0 4px 10px rgba(102,126,234,.15)}.shape-list-item .shape-info{flex:1}.shape-list-item .shape-name{font-weight:600;color:#2d3748;font-size:.95rem}.shape-list-item .shape-params{font-size:.85rem;color:#718096;margin-top:.25rem}.shape-list-item .shape-volume{font-family:'Courier New',monospace;font-weight:700;color:#667eea;font-size:1rem}.shape-list-item .shape-operation{font-size:1.25rem;margin:0 .75rem;color:#48bb78}.shape-list-item.subtract .shape-operation{color:#f56565}.threejs-container{width:100%;height:500px;background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%);border-radius:12px;margin:1rem 0;position:relative;overflow:hidden}.threejs-container canvas{display:block;width:100% !important;height:100% !important}.loading-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1rem;font-weight:500}.view-toggle{display:flex;gap:.75rem;margin-bottom:1rem}.view-controls{margin-top:1rem}.w-100{width:100%}.d-flex{display:flex}.gap-2{gap:.5rem}.flex-fill{flex:1}.mt-4{margin-top:1.5rem}@media(max-width:992px){.feature-tabs{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.threejs-container{height:400px}.result-value{font-size:2rem}}@media(max-width:576px){.feature-tabs{grid-template-columns:1fr}.feature-tab{font-size:.85rem;padding:.75rem}.threejs-container{height:300px}.result-value{font-size:1.75rem}.view-toggle{flex-direction:column}}