.image-uploader{width:100%;max-width:1000px;margin:0 auto}.dropzone{position:relative;border:2px dashed #ccc;border-radius:8px;background-color:#f9f9f9;padding:40px;text-align:center;cursor:pointer;transition:all .3s ease}.dropzone.active{border-color:#3490dc;background-color:#ebf3fb}.file-input{display:none}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666}.placeholder .icon{margin-bottom:16px;color:#3490dc}.placeholder h3{margin:0 0 8px;font-weight:500}.placeholder p{margin:0 0 8px}.formats{font-size:.8rem;color:#999;margin-top:16px}.file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:16px}.file-item{position:relative;border:1px solid #eee;border-radius:4px;overflow:hidden;background-color:#fff;box-shadow:0 2px 4px #0000000d}.preview{height:150px;overflow:hidden;background-color:#f1f1f1}.preview img{width:100%;height:100%;object-fit:cover}.info{padding:12px}.name{font-size:.9rem;font-weight:500;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.size{font-size:.8rem;color:#666;margin-bottom:8px}.progress{height:4px;background-color:#eee;border-radius:2px;overflow:hidden;margin-bottom:8px}.progress-bar{height:100%;background-color:#3490dc;transition:width .3s ease}.optimization-result{display:flex;justify-content:space-between;font-size:.8rem;margin-top:8px}.percent{color:#38c172;font-weight:500}.size-diff{color:#666}.remove-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background-color:#fffc;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#666;transition:all .2s ease}.remove-btn:hover{background-color:#fff;color:#e3342f}.options{margin-top:24px;padding:16px;background-color:#f5f5f5;border-radius:8px}.options-title{font-size:1rem;font-weight:600;margin-bottom:.75rem;color:#333}.format-conversion{margin-bottom:1.5rem;padding:1rem;background-color:#f8f9fa;border-radius:.5rem;border:1px dashed #dee2e6}.format-options{display:flex;flex-direction:column;gap:.75rem}.file-format-option{display:flex;align-items:center;justify-content:space-between;padding:.5rem;background-color:#fff;border-radius:.375rem;box-shadow:0 1px 2px #0000000d}.file-info{display:flex;flex-direction:column;max-width:40%}.file-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-type{font-size:.75rem;color:#6c757d;text-transform:uppercase}.format-selector{display:flex;align-items:center;gap:.5rem}.format-select{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem;background-color:#fff;font-size:.875rem}.format-benefits{font-size:.75rem;color:#6c757d;max-width:12rem}.quality-slider{margin-bottom:16px}.quality-slider label{display:block;margin-bottom:8px;font-weight:500}.quality-slider input{width:100%}.auto-optimize{display:flex;align-items:center}.auto-optimize input{margin-right:8px}.actions{margin-top:24px;display:flex;justify-content:space-between}.upload-btn,.clear-btn{padding:12px 24px;border-radius:4px;font-weight:500;cursor:pointer;transition:all .2s ease}.upload-btn{background-color:#3490dc;color:#fff;border:none}.upload-btn:hover:not(:disabled){background-color:#2779bd}.clear-btn{background-color:transparent;color:#666;border:1px solid #ccc}.clear-btn:hover:not(:disabled){border-color:#e3342f;color:#e3342f}button:disabled{opacity:.7;cursor:not-allowed}