.belt-diagram{width:100%;height:280px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:12px;position:relative;overflow:hidden;margin-bottom:1rem}.belt-diagram canvas{width:100%;height:100%}.mode-switch{display:flex;gap:.5rem;margin-bottom:1rem}.mode-switch .btn{flex:1;padding:.5rem 1rem;border:2px solid #667eea;background:#fff;color:#667eea;border-radius:8px;font-weight:500;transition:all .3s ease;cursor:pointer}.mode-switch .btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border-color:transparent}.mode-switch .btn:hover:not(.active){background:rgba(102,126,234,.1)}.result-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #e2e8f0}.result-item:last-child{border-bottom:none}.result-label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:#4a5568}.result-label i{color:#667eea;width:20px;text-align:center}.result-value{font-size:1.4rem;font-weight:700;font-family:'Roboto Mono',monospace;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-value.large{font-size:1.8rem}.result-unit{font-size:.85rem;color:#718096;margin-left:.25rem}.risk-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.9rem}.risk-badge.risk-low{background:rgba(72,187,120,.15);color:#22543d}.risk-badge.risk-medium{background:rgba(236,201,75,.2);color:#744210}.risk-badge.risk-high{background:rgba(237,137,54,.2);color:#7b341e}.risk-badge.risk-critical{background:rgba(229,62,62,.15);color:#742a2a}.spec-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:1rem}.spec-table th{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:.6rem .5rem;text-align:center;font-weight:600}.spec-table th:first-child{border-radius:8px 0 0 0}.spec-table th:last-child{border-radius:0 8px 0 0}.spec-table td{padding:.5rem;text-align:center;border-bottom:1px solid #e2e8f0}.spec-table tr:hover td{background:rgba(102,126,234,.05)}.spec-table tr.recommended td{background:rgba(72,187,120,.15);font-weight:600}.reverse-section{display:none}.reverse-section.active{display:block}.forward-section{display:block}.forward-section.hidden{display:none}.input-group-custom{margin-bottom:1rem}.input-label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:500;color:#4a5568}.input-label i{color:#667eea;width:18px;text-align:center}.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#e2e8f0;color:#718096;border-radius:50%;font-size:.7rem;cursor:help;margin-left:.25rem}.angle-display{display:flex;gap:1rem;margin-top:.5rem}.angle-item{flex:1;padding:.75rem;background:#f7fafc;border-radius:8px;text-align:center}.angle-item .label{font-size:.8rem;color:#718096;margin-bottom:.25rem}.angle-item .value{font-size:1.2rem;font-weight:700;font-family:'Roboto Mono',monospace;color:#667eea}.recommended-belt{background:linear-gradient(135deg,rgba(102,126,234,.1) 0%,rgba(118,75,162,.1) 100%);border:2px solid #667eea;border-radius:12px;padding:1rem;text-align:center;margin-top:1rem}.recommended-belt .title{font-size:.85rem;color:#718096;margin-bottom:.25rem}.recommended-belt .value{font-size:1.5rem;font-weight:700;color:#667eea}.speed-ratio{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:#f7fafc;border-radius:8px;margin-top:.5rem}.speed-ratio .ratio-value{font-size:1.2rem;font-weight:700;font-family:'Roboto Mono',monospace;color:#667eea}.error-message{color:#e53e3e;font-size:.85rem;margin-top:.25rem;display:none}.error-message.show{display:block}@media(max-width:767px){.belt-diagram{height:200px}.result-value{font-size:1.2rem}.result-value.large{font-size:1.4rem}.angle-display{flex-direction:column;gap:.5rem}.spec-table{font-size:.75rem}.spec-table th,.spec-table td{padding:.4rem .3rem}}