.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.template-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 10px;border:2px solid #e2e8f0;border-radius:12px;background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);cursor:pointer;transition:all .3s ease;text-align:center}.template-btn:hover{border-color:#667eea;background:linear-gradient(135deg,#ebf4ff 0%,#e9d8fd 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.template-btn:active{transform:translateY(0)}.template-btn i{font-size:1.8rem;color:#667eea;margin-bottom:8px}.template-btn span{font-size:.95rem;font-weight:600;color:#2d3748;margin-bottom:4px}.template-btn small{font-size:.75rem;color:#718096}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}.input-group-custom{display:flex;flex-direction:column}.input-label{font-size:.9rem;color:#4a5568;margin-bottom:6px;font-weight:500;display:flex;align-items:center;gap:5px}.input-label i{color:#667eea}.input-wrapper{position:relative}.input-range{font-size:.75rem;color:#a0aec0;margin-top:4px}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#e2e8f0;color:#718096;font-size:.7rem;cursor:help;position:relative;margin-left:3px}.tooltip-icon .tooltip-text{visibility:hidden;width:200px;background-color:#2d3748;color:#fff;text-align:left;border-radius:8px;padding:10px;position:absolute;z-index:100;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .3s;font-size:.8rem;font-weight:normal;line-height:1.4}.tooltip-icon .tooltip-text::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#2d3748 transparent transparent transparent}.tooltip-icon:hover .tooltip-text{visibility:visible;opacity:1}.result-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%) !important;color:#fff}.result-card .card-title{color:#fff !important}.result-main{text-align:center;padding:20px 0}.result-label{font-size:.95rem;opacity:.9;margin-bottom:5px}.result-value{font-size:2.8rem;font-weight:700;font-family:'Roboto Mono',monospace;line-height:1.2}.result-divider{border:none;border-top:1px solid rgba(255,255,255,.3);margin:15px 0}.result-details{background:rgba(255,255,255,.15);border-radius:12px;padding:15px;margin-top:15px}.result-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1)}.result-item:last-child{border-bottom:none}.result-item-label{font-size:.9rem;opacity:.9}.result-item-value{font-size:1rem;font-weight:600;font-family:'Roboto Mono',monospace}.warning-box{background:linear-gradient(135deg,rgba(245,158,11,.15) 0%,rgba(249,115,22,.15) 100%);border-left:4px solid #f59e0b;padding:12px 15px;border-radius:8px;margin-top:15px;display:none}.warning-box.show{display:block}.warning-box i{color:#f59e0b;margin-right:8px}.warning-box span{color:#92400e;font-size:.9rem}.info-box{background:linear-gradient(135deg,rgba(59,130,246,.1) 0%,rgba(99,102,241,.1) 100%);border-left:4px solid #3b82f6;padding:12px 15px;border-radius:8px;margin-top:15px}.info-box i{color:#3b82f6;margin-right:8px}.info-box span{color:#1e40af;font-size:.9rem}.motor-spec{background:linear-gradient(135deg,rgba(16,185,129,.15) 0%,rgba(5,150,105,.15) 100%);border-radius:12px;padding:20px;margin-top:15px;text-align:center}.motor-spec-label{font-size:.9rem;color:#065f46;margin-bottom:8px}.motor-spec-value{font-size:2rem;font-weight:700;color:#059669;font-family:'Roboto Mono',monospace}.motor-spec-note{font-size:.8rem;color:#047857;margin-top:8px}.chart-container{position:relative;height:280px;margin-top:10px}.pipe-diagram{width:100%;max-width:400px;margin:15px auto;display:block}.fittings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.fitting-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#f7fafc;border-radius:8px}.fitting-item i{color:#667eea;font-size:1.1rem}.fitting-item label{flex:1;font-size:.85rem;color:#4a5568}.fitting-item input{width:60px;text-align:center}@media(max-width:768px){.template-grid{grid-template-columns:repeat(2,1fr)}.template-btn{padding:12px 8px}.template-btn i{font-size:1.5rem}.template-btn span{font-size:.85rem}.template-btn small{font-size:.7rem}.input-row{grid-template-columns:1fr}.fittings-grid{grid-template-columns:1fr}.result-value{font-size:2.2rem}.motor-spec-value{font-size:1.6rem}.tooltip-icon .tooltip-text{width:160px;left:auto;right:-10px;transform:none}.tooltip-icon .tooltip-text::after{left:auto;right:15px}}.calculation-steps{background:#f7fafc;border-radius:12px;padding:15px;margin-top:15px}.calculation-step{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #e2e8f0}.calculation-step:last-child{border-bottom:none}.step-number{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-size:.8rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-content{flex:1}.step-label{font-size:.85rem;color:#718096;margin-bottom:2px}.step-value{font-size:1rem;font-weight:600;color:#2d3748;font-family:'Roboto Mono',monospace}.unit-toggle{display:inline-flex;background:#e2e8f0;border-radius:8px;padding:3px;margin-left:10px}.unit-toggle button{padding:4px 12px;border:none;background:transparent;border-radius:6px;font-size:.8rem;color:#718096;cursor:pointer;transition:all .2s}.unit-toggle button.active{background:#fff;color:#667eea;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}.summary-table{width:100%;border-collapse:collapse;margin-top:15px}.summary-table th,.summary-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e2e8f0}.summary-table th{background:#f7fafc;font-weight:600;color:#4a5568;font-size:.85rem}.summary-table td{font-size:.9rem;color:#2d3748}.summary-table tr:last-child td{border-bottom:none}.velocity-indicator{display:flex;align-items:center;gap:10px;margin-top:10px}.velocity-bar{flex:1;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.velocity-fill{height:100%;border-radius:4px;transition:width .3s,background .3s}.velocity-fill.safe{background:linear-gradient(90deg,#48bb78,#38a169)}.velocity-fill.warning{background:linear-gradient(90deg,#f6ad55,#ed8936)}.velocity-fill.danger{background:linear-gradient(90deg,#fc8181,#f56565)}.velocity-value{font-size:.9rem;font-weight:600;color:#4a5568;min-width:80px;text-align:right}