*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem}.container{max-width:800px;margin:0 auto;background:#fff;border-radius:16px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}h1{color:#333;margin-bottom:1.5rem;text-align:center;font-size:2rem}.upload-section{margin-bottom:2rem}.form-group{margin-bottom:1.5rem}label{display:block;margin-bottom:.5rem;color:#555;font-weight:500}input[type=file]{width:100%;padding:.75rem;border:2px dashed #667eea;border-radius:8px;background:#f8f9fa;cursor:pointer;transition:all .3s ease}input[type=file]:hover{border-color:#764ba2;background:#f0f0f0}.drop-zone{width:100%;min-height:200px;border:2px dashed #667eea;border-radius:8px;background:#f8f9fa;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.drop-zone:hover{border-color:#764ba2;background:#f0f0f0}.drop-zone.dragging{border-color:#764ba2;background:#e8e9ff;transform:scale(1.02)}.drop-zone.has-preview{min-height:300px;border:2px solid #667eea;background:#fff}.drop-zone-content{text-align:center;padding:2rem}.drop-zone-icon{font-size:3rem;margin-bottom:1rem}.drop-zone-text{color:#555;font-size:1.1rem;font-weight:500;margin-bottom:.5rem}.drop-zone-hint{color:#999;font-size:.9rem}.preview-container{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.preview-image{max-width:100%;max-height:280px;object-fit:contain;border-radius:8px}.preview-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);padding:1rem;color:#fff;text-align:center}.preview-filename{font-weight:600;margin-bottom:.25rem;font-size:.95rem}.preview-size{font-size:.85rem;opacity:.9;margin-bottom:.5rem}.change-image-btn{padding:.5rem 1rem!important;font-size:.9rem!important;background:hsla(0,0%,100%,.2)!important;border:1px solid hsla(0,0%,100%,.3)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:auto!important;margin:0 auto}.change-image-btn:hover{background:hsla(0,0%,100%,.3)!important;transform:translateY(0)!important;box-shadow:none!important}input[type=range]{width:100%;margin-top:.5rem}.quality-display{text-align:center;margin-top:.5rem;color:#667eea;font-weight:600}button{width:100%;padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.4)}button:disabled{opacity:.6;cursor:not-allowed}.loading{text-align:center;padding:2rem;color:#667eea;font-weight:500}.error{background:#fee;color:#c33;border-left:4px solid #c33}.error,.success{padding:1rem;border-radius:8px;margin-top:1rem}.success{background:#efe;color:#3c3;border-left:4px solid #3c3}.result-section{margin-top:2rem;padding-top:2rem;border-top:2px solid #eee}.result-image{max-width:100%;box-shadow:0 4px 12px rgba(0,0,0,.1)}.result-image,.result-info{border-radius:8px;margin-top:1rem}.result-info{padding:1rem;background:#f8f9fa}.result-info p{margin:.5rem 0;color:#555}.result-info strong{color:#333}.download-button{margin-top:1rem;background:linear-gradient(135deg,#28a745,#20c997)!important}.download-button:hover:not(:disabled){box-shadow:0 10px 20px rgba(40,167,69,.4)!important}