.image-compressor{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.image-compressor h2{color:#343a40;margin-bottom:20px;font-size:24px}.image-compressor h3{color:#343a40;margin-bottom:16px;font-size:18px}.compressor-container{background:#fff;border-radius:8px;grid-template-columns:60% 40%;display:grid;overflow:hidden;box-shadow:0 2px 8px #0000001a}@media (max-width:768px){.compressor-container{grid-template-columns:1fr}}.left-panel{border-right:1px solid #e1e4e8;padding:20px}@media (max-width:768px){.left-panel{border-bottom:1px solid #e1e4e8;border-right:none}}.right-panel{background-color:#f8f9fa;padding:20px}.upload-area{text-align:center;cursor:pointer;background-color:#fff;border:2px dashed #e1e4e8;border-radius:8px;padding:40px;transition:all .3s}.upload-area:hover{background-color:#0070f30d;border-color:#0070f3}.upload-area .file-input{display:none}.upload-area .upload-content{flex-direction:column;align-items:center;gap:12px;display:flex}.upload-area .upload-icon{color:#6c757d;font-size:48px}.upload-area .upload-text{color:#343a40;font-size:16px;font-weight:500}.upload-area .upload-hint{color:#6c757d;font-size:14px}.image-list-container .image-list-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.image-list-container .image-list-header h3{margin:0}.image-list-container .image-list-header .image-list-actions{gap:8px;display:flex}.image-list-container .image-list{flex-direction:column;gap:12px;max-height:600px;display:flex;overflow-y:auto}.image-list-container .image-list::-webkit-scrollbar{width:6px}.image-list-container .image-list::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.image-list-container .image-list::-webkit-scrollbar-thumb{background:#e1e4e8;border-radius:3px}.image-list-container .image-list::-webkit-scrollbar-thumb:hover{background:#6c757d}.image-item{background:#fff;border:1px solid #e1e4e8;border-radius:8px;gap:12px;padding:12px;display:flex;box-shadow:0 1px 3px #0000000d}.image-item .image-preview{border-radius:8px;flex-shrink:0;width:100px;height:100px;overflow:hidden}.image-item .image-preview img{object-fit:cover;width:100%;height:100%}.image-item .image-info{flex-direction:column;flex:1;gap:8px;display:flex}.image-item .image-info .image-name{color:#343a40;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.image-item .image-info .image-meta{color:#6c757d;flex-direction:column;gap:4px;font-size:12px;display:flex}.image-item .image-info .image-actions{gap:8px;margin-top:auto;display:flex}.params-container{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.param-item{flex-direction:column;gap:8px;display:flex}.param-item label{color:#343a40;font-size:14px;font-weight:500}.param-item select,.param-item input[type=number]{border:1px solid #e1e4e8;border-radius:8px;padding:8px 12px;font-size:14px;transition:all .3s}.param-item select:focus,.param-item input[type=number]:focus{border-color:#0070f3;outline:none;box-shadow:0 0 0 2px #0070f31a}.param-item .range-container{flex-direction:column;gap:12px;margin-bottom:8px;display:flex}.param-item input[type=range]{-webkit-appearance:none;background:#f8f9fa;border:2px solid #e1e4e8;border-radius:6px;outline:none;width:100%;height:12px;transition:all .3s;position:relative;box-shadow:inset 0 2px 4px #00000026,0 1px 2px #0000000d}.param-item input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#0070f3;border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:all .3s;box-shadow:0 2px 4px #0003}.param-item input[type=range]::-webkit-slider-thumb:hover{background:#0056b3;transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.param-item input[type=range]::-webkit-slider-thumb:active{transform:scale(1.2);box-shadow:0 4px 8px #0006}.param-item input[type=range]::-moz-range-thumb{cursor:pointer;background:#0070f3;border:2px solid #fff;border-radius:50%;width:20px;height:20px;transition:all .3s;box-shadow:0 2px 4px #0003}.param-item input[type=range]::-moz-range-thumb:hover{background:#0056b3;transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.param-item input[type=range]::-moz-range-thumb:active{transform:scale(1.2);box-shadow:0 4px 8px #0006}.param-item input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;background:#f8f9fa;border-radius:6px;height:12px}.param-item input[type=range]::-moz-range-track{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:6px;height:12px}.param-item .radix-slider{-webkit-user-select:none;user-select:none;touch-action:none;align-items:center;width:100%;height:40px;display:flex;position:relative}.param-item .radix-slider-track{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:6px;flex-grow:1;height:12px;position:relative;box-shadow:inset 0 2px 4px #00000026,0 1px 2px #0000000d}.param-item .radix-slider-range{background:#0070f3;border-radius:4px;height:8px;position:absolute;top:2px;left:0}.param-item .radix-slider-thumb{cursor:pointer;background:#0070f3;border:2px solid #fff;border-radius:50%;outline:none;width:20px;height:20px;transition:all .3s;display:block;box-shadow:0 2px 4px #0003}.param-item .radix-slider-thumb:hover{background:#0056b3;transform:scale(1.15);box-shadow:0 3px 6px #0000004d}.param-item .radix-slider-thumb:active{transform:scale(1.2);box-shadow:0 4px 8px #0006}.param-item .range-values{color:#6c757d;justify-content:space-between;margin-top:8px;padding:0 4px;font-size:12px;display:flex}.param-item .range-values span{-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:12px;padding:4px 8px;transition:all .3s}.param-item .range-values span.active{color:#0070f3;background-color:#0070f31a;font-weight:500}.param-item .range-values span:hover{color:#0070f3}.param-item .range-display{color:#343a40;text-align:center;font-size:14px;font-weight:500}.param-item .segmented-control{background:#f8f9fa;border:2px solid #e1e4e8;border-radius:8px;display:flex;overflow:hidden;box-shadow:0 1px 2px #0000000d}.param-item .segmented-control .segmented-item{color:#6c757d;cursor:pointer;background:0 0;border:none;outline:none;flex:1;padding:10px 16px;font-size:14px;font-weight:500;transition:all .3s}.param-item .segmented-control .segmented-item:hover{color:#0070f3;background-color:#0070f314}.param-item .segmented-control .segmented-item.active{color:#fff;background:#0070f3}.param-item .checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.param-item .checkbox-label input[type=checkbox]{cursor:pointer}.dark .compressor-container{background:#1f2937}.dark .left-panel{background:#1f2937;border-right-color:#4b5563}.dark .left-panel h2{color:#f3f4f6}.dark .right-panel{background:#374151;border-left-color:#4b5563}.dark .right-panel h3{color:#f3f4f6}.dark .upload-area{background:#1f2937;border-color:#4b5563}.dark .upload-area:hover{background-color:#3b82f60d;border-color:#3b82f6}.dark .upload-area .upload-text{color:#f3f4f6}.dark .upload-area .upload-hint,.dark .upload-area .upload-icon{color:#9ca3af}.dark .image-item{background:#1f2937;border-color:#4b5563}.dark .image-item .image-name{color:#f3f4f6}.dark .image-item .image-meta{color:#9ca3af}.dark .params-container .param-item label{color:#f3f4f6}.dark .params-container .param-item select,.dark .params-container .param-item input[type=number]{color:#f3f4f6;background:#1f2937;border-color:#4b5563}.dark .params-container .param-item select:focus,.dark .params-container .param-item input[type=number]:focus{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f640}.dark .params-container .param-item .checkbox-label{color:#f3f4f6}.dark input[type=range]{background:#374151;border-color:#4b5563;box-shadow:inset 0 2px 4px #0000004d,0 1px 2px #0000001a}.dark input[type=range]::-webkit-slider-runnable-track{background:#374151}.dark input[type=range]::-moz-range-track{background:#374151;border-color:#4b5563}.dark input[type=range]::-webkit-slider-thumb{border-color:#1f2937;box-shadow:0 2px 4px #0006}.dark input[type=range]::-moz-range-thumb{border-color:#1f2937;box-shadow:0 2px 4px #0006}.dark .radix-slider-track{background:#374151;border-color:#4b5563;box-shadow:inset 0 2px 4px #0000004d,0 1px 2px #0000001a}.dark .radix-slider-range{background:#3b82f6}.dark .radix-slider-thumb{background:#3b82f6;border-color:#1f2937;box-shadow:0 2px 4px #0006}.dark .radix-slider-thumb:hover{background:#2563eb}.dark .segmented-control{background:#374151;border-color:#4b5563;box-shadow:0 1px 2px #0000001a}.dark .segmented-control .segmented-item{color:#9ca3af}.dark .segmented-control .segmented-item:hover{color:#3b82f6;background-color:#3b82f626}.dark .segmented-control .segmented-item.active{color:#fff;background:#3b82f6}.dark .range-values{color:#9ca3af}.dark .range-values span.active{color:#3b82f6;background-color:#3b82f626}.dark .range-values span:hover{color:#3b82f6}.dark .range-display{color:#f3f4f6}.dark .btn.btn-primary{background-color:#3b82f6}.dark .btn.btn-primary:hover:not(:disabled){background-color:#2563eb}.dark .btn.btn-secondary{background-color:#6b7280}.dark .btn.btn-secondary:hover:not(:disabled){background-color:#4b5563}.dark .btn:disabled{color:#9ca3af;background-color:#374151}.dark .processing-overlay{background-color:#000c}.dark .processing-overlay .processing-content{color:#f3f4f6;background:#1f2937}.dark .processing-overlay .processing-text{color:#f3f4f6}.dark .processing-overlay .progress-bar{background-color:#3b82f6}.dark .processing-overlay .progress-percentage{color:#9ca3af}.dark .preview-modal{background-color:#000000e6}.dark .preview-modal .preview-content{color:#f3f4f6;background:#1f2937}.dark .preview-modal h3{color:#f3f4f6}.dark .preview-modal .preview-info,.dark .preview-modal .close-btn{color:#9ca3af}.dark .preview-modal .close-btn:hover{color:#f3f4f6;background-color:#374151}.dark .drag-hint{color:#9ca3af}.dark .image-list-container h3{color:#f3f4f6}.dark .image-list-container .image-list::-webkit-scrollbar-track{background:#374151}.dark .image-list-container .image-list::-webkit-scrollbar-thumb{background:#4b5563}.dark .image-list-container .image-list::-webkit-scrollbar-thumb:hover{background:#6b7280}.dark .checkbox-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.dark .checkbox-label input[type=checkbox]{cursor:pointer}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;padding:8px 16px;font-size:14px;font-weight:500;transition:all .3s;display:inline-flex}.btn.btn-primary{color:#fff;background-color:#0070f3}.btn.btn-primary:hover:not(:disabled){background-color:#0056b3}.btn.btn-secondary{color:#fff;background-color:#6c757d}.btn.btn-secondary:hover:not(:disabled){background-color:#5a6268}.btn.btn-small{padding:6px 12px;font-size:12px}.btn.btn-large{width:100%;padding:12px 24px;font-size:16px}.btn:disabled{opacity:.6;cursor:not-allowed}.batch-download-btn{margin-top:12px}.processing-overlay{z-index:1000;background-color:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.processing-overlay .processing-content{text-align:center;background:#fff;border-radius:8px;width:90%;max-width:400px;padding:32px;box-shadow:0 4px 16px #0003}.processing-overlay .processing-text{color:#343a40;margin-bottom:16px;font-size:16px}.processing-overlay .progress-bar-container{background-color:#f8f9fa;border-radius:4px;width:100%;height:8px;margin-bottom:12px;overflow:hidden}.processing-overlay .progress-bar{background-color:#0070f3;border-radius:4px;height:100%;transition:width .3s}.processing-overlay .progress-percentage{color:#6c757d;font-size:14px}.preview-modal{z-index:1000;background-color:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.preview-modal .preview-content{background:#fff;border-radius:8px;width:100%;max-width:800px;max-height:90vh;position:relative;overflow-y:auto;box-shadow:0 4px 16px #0000004d}.preview-modal .close-btn{cursor:pointer;color:#6c757d;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:24px;transition:all .3s;display:flex;position:absolute;top:12px;right:12px}.preview-modal .close-btn:hover{color:#343a40;background-color:#f8f9fa}.preview-modal h3{margin:0;padding:20px 20px 0}.preview-modal .preview-image-container{text-align:center;padding:20px}.preview-modal .preview-image-container img{object-fit:contain;border-radius:8px;max-width:100%;max-height:50vh}.preview-modal .preview-info{color:#6c757d;flex-direction:column;gap:4px;padding:0 20px 20px;font-size:14px;display:flex}.preview-modal .preview-actions{justify-content:center;padding:0 20px 20px;display:flex}