.image-resizer-container{max-width:1200px;margin:0 auto;padding:2rem 1rem;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#333}.image-resizer-container h1{text-align:center;font-size:2.5rem;margin-bottom:.5rem;color:#0f172a;font-weight:800}.image-resizer-container h2{text-align:center;font-size:1.25rem;font-weight:400;margin-bottom:2.5rem;color:#64748b}.image-resizer-container .upload-area{border:2px dashed #94a3b8;border-radius:1rem;padding:3.5rem 2rem;text-align:center;margin-bottom:2rem;cursor:pointer;transition:all .3s ease;background-color:#f8fafc}.image-resizer-container .upload-area:hover{border-color:#0070f3;background-color:#f0f7ff}.image-resizer-container .upload-area.dragging{border-color:#0070f3;background-color:#e6f0ff;border-style:solid}.image-resizer-container .upload-area .upload-icon{width:72px;height:72px;margin:0 auto 1.75rem;color:#64748b}.image-resizer-container .upload-area .upload-icon svg{width:100%;height:100%}.image-resizer-container .upload-area p{font-size:1.35rem;margin-bottom:.75rem;color:#334155;font-weight:500}.image-resizer-container .upload-area .upload-hint{font-size:.95rem;color:#64748b;display:block;margin-top:.75rem}.image-resizer-container .upload-area .file-input{display:none}.image-resizer-container .image-processing-area .image-container{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}@media(max-width:900px){.image-resizer-container .image-processing-area .image-container{flex-direction:column}.image-resizer-container .image-processing-area .image-container .arrow-icon{transform:rotate(90deg)}}.image-resizer-container .image-processing-area .image-container .original-image,.image-resizer-container .image-processing-area .image-container .resized-image{flex:1;min-width:280px;max-width:500px}.image-resizer-container .image-processing-area .image-container .original-image h3,.image-resizer-container .image-processing-area .image-container .resized-image h3{text-align:center;margin-bottom:1rem;font-size:1.1rem;color:#475569;font-weight:600}.image-resizer-container .image-processing-area .image-container .original-image .image-wrapper,.image-resizer-container .image-processing-area .image-container .resized-image .image-wrapper{border-radius:.75rem;overflow:hidden;background-color:#f1f5f9;box-shadow:0 4px 16px rgba(0,0,0,.1);position:relative}.image-resizer-container .image-processing-area .image-container .original-image .image-wrapper img,.image-resizer-container .image-processing-area .image-container .resized-image .image-wrapper img{display:block;width:100%;height:auto;object-fit:contain}.image-resizer-container .image-processing-area .image-container .original-image .image-wrapper .file-name,.image-resizer-container .image-processing-area .image-container .resized-image .image-wrapper .file-name{position:absolute;bottom:0;left:0;right:0;padding:.625rem;background-color:rgba(0,0,0,.7);color:#fff;font-size:.875rem;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.image-resizer-container .image-processing-area .image-container .original-image .image-wrapper .placeholder,.image-resizer-container .image-processing-area .image-container .resized-image .image-wrapper .placeholder{width:100%;height:0;padding-top:100%;position:relative;background-color:#e2e8f0}.image-resizer-container .image-processing-area .image-container .original-image .image-wrapper .placeholder p,.image-resizer-container .image-processing-area .image-container .resized-image .image-wrapper .placeholder p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.25rem;color:#94a3b8;font-weight:500}.image-resizer-container .image-processing-area .image-container .arrow-icon{width:48px;height:48px;color:#64748b}.image-resizer-container .image-processing-area .image-container .arrow-icon svg{width:100%;height:100%}.image-resizer-container .image-processing-area .quality-options{margin-bottom:2rem}.image-resizer-container .image-processing-area .quality-options .quality-features{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap}.image-resizer-container .image-processing-area .quality-options .quality-features .quality-feature{display:flex;flex-direction:column;align-items:center;gap:.5rem}.image-resizer-container .image-processing-area .quality-options .quality-features .quality-feature svg{width:28px;height:28px;color:#0284c7}.image-resizer-container .image-processing-area .quality-options .quality-features .quality-feature span{font-size:.95rem;color:#475569;font-weight:500}.image-resizer-container .image-processing-area .action-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}.image-resizer-container .image-processing-area .action-buttons button{padding:.875rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;outline:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}.image-resizer-container .image-processing-area .action-buttons button.resize-button{background-color:#0284c7;color:#fff;padding:1rem 2rem}.image-resizer-container .image-processing-area .action-buttons button.resize-button:hover{background-color:#0369a1;box-shadow:0 4px 12px rgba(0,0,0,.15)}.image-resizer-container .image-processing-area .action-buttons button.resize-button:disabled{background-color:#94a3b8;cursor:not-allowed;box-shadow:none}.image-resizer-container .image-processing-area .action-buttons button.download-button{background-color:#10b981;color:#fff;padding:1rem 2rem}.image-resizer-container .image-processing-area .action-buttons button.download-button:hover{background-color:#059669;box-shadow:0 4px 12px rgba(0,0,0,.15)}.image-resizer-container .image-processing-area .action-buttons button.reset-button{background-color:#f1f5f9;color:#475569}.image-resizer-container .image-processing-area .action-buttons button.reset-button:hover{background-color:#e2e8f0}.image-resizer-container footer{margin-top:4rem;text-align:center;padding:1.5rem;color:#64748b;font-size:.9rem;border-top:1px solid #e2e8f0}