:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#f5f3ff,#dbeafe)}#app{min-height:100vh;padding:2rem}.container{max-width:1200px;margin:0 auto}.header{text-align:center;margin-bottom:2rem}.header-content{display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.header-icon{color:#9333ea;margin-right:1rem}.header-title{font-size:2.5rem;font-weight:700;color:#1f2937}.header-subtitle{color:#6b7280;font-size:1.125rem}.upload-area{background:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a;padding:3rem;margin-bottom:2rem;border:2px dashed #d8b4fe;cursor:pointer;transition:all .3s ease;text-align:center}.upload-area:hover,.upload-area.dragover{border-color:#9333ea;background:#faf5ff}.upload-icon{color:#9333ea;margin:0 auto 1rem}.upload-title{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.5rem}.upload-subtitle{color:#6b7280}.controls-section{background:#fff;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a;padding:1.5rem;margin-bottom:1.5rem}.controls-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.quality-label{font-size:1.125rem;font-weight:600;color:#374151}.apply-btn{padding:.5rem 1rem;background:#9333ea;color:#fff;border:none;border-radius:.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.apply-btn:hover{background:#7e22ce}.quality-slider{width:100%;height:.5rem;background:#e9d5ff;border-radius:1rem;outline:none;cursor:pointer;margin-bottom:.5rem}.quality-slider::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:#9333ea;border-radius:50%;cursor:pointer}.quality-slider::-moz-range-thumb{width:1.25rem;height:1.25rem;background:#9333ea;border-radius:50%;cursor:pointer;border:none}.quality-labels{display:flex;justify-content:space-between;font-size:.875rem;color:#6b7280}.images-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.images-title{font-size:1.5rem;font-weight:700;color:#1f2937}.download-all-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#16a34a;color:#fff;border:none;border-radius:.5rem;font-weight:600;cursor:pointer;transition:background .3s ease}.download-all-btn:hover{background:#15803d}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.image-card{background:#fff;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a;overflow:hidden}.image-preview{position:relative;width:100%;height:200px;overflow:hidden;background:#f3f4f6}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-btn{position:absolute;top:.5rem;right:.5rem;padding:.5rem;background:#ef4444;color:#fff;border:none;border-radius:50%;cursor:pointer;transition:background .3s ease;display:flex;align-items:center;justify-content:center}.remove-btn:hover{background:#dc2626}.image-info{padding:1rem}.image-name{font-weight:600;color:#1f2937;margin-bottom:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-details{font-size:.875rem;color:#6b7280;margin-bottom:1rem}.image-details p{margin-bottom:.25rem}.savings{color:#16a34a!important;font-weight:600}.download-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:#9333ea;color:#fff;border:none;border-radius:.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.download-btn:hover{background:#7e22ce}.compressing-btn{width:100%;display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;background:#e5e7eb;color:#6b7280;border-radius:.5rem;font-weight:500}.empty-state{text-align:center;color:#6b7280;margin-top:3rem}.empty-text{font-size:1.125rem;margin-bottom:.5rem}.empty-subtext{font-size:1rem}@media (max-width: 768px){.header-title{font-size:2rem}.images-grid{grid-template-columns:1fr}.controls-header,.images-header{flex-direction:column;gap:1rem;align-items:flex-start}}