.comparison-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000bf;display:flex;align-items:flex-start;justify-content:center;z-index:50;padding:1rem;overflow-y:auto}.comparison-modal{background-color:#fff;border-radius:.75rem;max-width:72rem;width:100%;max-height:none;display:flex;flex-direction:column;margin:1rem auto}.comparison-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid rgb(226,232,240)}.comparison-modal-header-content{flex:1}.comparison-modal-title{font-size:1.125rem;font-weight:600;color:#1e293b}.comparison-modal-info{display:flex;align-items:center;gap:1rem;margin-top:0}.comparison-modal-file-info{font-size:.875rem;color:#475569}.comparison-modal-file-info span{font-weight:500}.comparison-modal-file-details{font-size:.75rem;color:#64748b;margin-top:.125rem}.comparison-modal-file-info--result{color:#15803d}.comparison-modal-file-details--result{color:#16a34a}.comparison-modal-file-details--result .savings{margin-left:.5rem;font-weight:600}.comparison-modal-divider{height:2rem;width:1px;background-color:#cbd5e1}.comparison-modal-close-btn{padding:.5rem;border-radius:.5rem;background:none;border:none;cursor:pointer;transition:background-color .2s}.comparison-modal-close-btn:hover{background-color:#f1f5f9}.comparison-modal-close-btn svg{width:1.25rem;height:1.25rem;color:#475569}.comparison-modal-body{flex:1;overflow:visible;padding:1rem}.comparison-modal-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;align-items:center}.comparison-modal-zoom-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:#f1f5f9;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s;font-size:.875rem}.comparison-modal-zoom-btn:hover{background-color:#e2e8f0}.comparison-modal-zoom-btn svg{width:1rem;height:1rem}.comparison-modal-zoom-level{display:flex;align-items:center;padding:.5rem .75rem;background-color:#f1f5f9;border-radius:.5rem;font-size:.875rem}.comparison-modal-reset-btn{padding:.5rem .75rem;background-color:#f1f5f9;border:none;border-radius:.5rem;cursor:pointer;transition:background-color .2s;font-size:.875rem}.comparison-modal-reset-btn:hover{background-color:#e2e8f0}.comparison-modal-quality-controls{display:flex;align-items:center;gap:.75rem;margin-left:auto}.comparison-modal-quality-label{font-size:.875rem;font-weight:500;color:#334155}.comparison-modal-quality-slider{width:8rem;height:.5rem;background-color:#e2e8f0;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;accent-color:rgb(37,99,235)}.comparison-modal-quality-input{width:4rem;padding:.25rem .5rem;border:1px solid rgb(203,213,225);border-radius:.25rem;font-size:.875rem;text-align:center}.comparison-modal-quality-input:focus{outline:none;ring:2px;ring-color:rgb(37,99,235);border-color:#2563eb}.comparison-modal-quality-unit{font-size:.875rem;color:#475569}.comparison-canvas-container{position:relative;overflow:hidden;background-color:#cbd5e1;border-radius:.5rem;cursor:crosshair;height:calc(100% - 60px);min-height:400px}.comparison-canvas{width:100%;height:100%;display:block}.comparison-slider{position:absolute;top:0;height:100%;width:1px;background-color:#fff;box-shadow:0 4px 6px #0000001a;cursor:ew-resize;z-index:10;pointer-events:none}.comparison-slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2rem;height:2rem;background-color:#fff;border-radius:9999px;box-shadow:0 4px 6px #0000001a;display:flex;align-items:center;justify-content:center;pointer-events:auto}.comparison-slider-handle-inner{width:.25rem;height:1rem;background-color:#94a3b8}.comparison-label{position:absolute;top:1rem;background-color:#000000bf;color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;z-index:20;pointer-events:none}.comparison-label--left{left:1rem}.comparison-label--right{right:1rem}.comparison-label-detail{font-size:.75rem;color:#cbd5e1;margin-top:.25rem}.comparison-label-savings{font-size:.75rem;color:#4ade80;margin-top:.25rem;font-weight:600}.comparison-modal-footer{padding:1rem;border-top:1px solid rgb(226,232,240);background-color:#f8fafc;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}.comparison-modal-footer-text{font-size:.875rem;color:#475569;text-align:center}@media (max-width: 768px){.comparison-modal-overlay{padding:.5rem}.comparison-modal{max-height:none;margin:.5rem auto}.comparison-modal-header,.comparison-modal-body,.comparison-modal-footer{padding:.75rem}.comparison-modal-zoom-btn span{display:none}.comparison-modal-zoom-btn{padding:.5rem;min-width:2.5rem;justify-content:center}.comparison-modal-controls{gap:.5rem}.comparison-modal-quality-controls{margin-left:0;width:100%;gap:.5rem}.comparison-modal-quality-slider{flex:1;min-width:0}.comparison-modal-quality-input{width:3rem}.comparison-modal-info{flex-direction:column;align-items:flex-start;gap:.5rem}.comparison-modal-file-info{font-size:.75rem}.comparison-modal-file-details{font-size:.6875rem}.comparison-modal-divider{display:none}.comparison-modal-footer-text{font-size:.75rem}}