#image-compressor { border:1px solid #ccc; padding:20px; border-radius:12px; max-width:800px; margin:auto; background:#fafafa; font-family:sans-serif; }
#image-compressor h2 { margin-bottom:15px; text-align:center; }
#drop-zone { border:2px dashed #888; padding:30px; text-align:center; cursor:pointer; border-radius:10px; margin-bottom:15px; background:#fff; transition:0.3s; }
#drop-zone.dragover { border-color:#0073aa; background:#f0faff; }
.controls { margin:15px 0; text-align:center; }
.controls input { width:60%; }
#preview.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px; }
.card { background:#fff; border:1px solid #ddd; padding:10px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.05); text-align:center; }
.card .thumb { width:100%; height:120px; background-size:cover; background-position:center; border-radius:6px; margin-bottom:8px; }
.progress { width:100%; height:8px; background:#eee; border-radius:5px; margin:8px 0; overflow:hidden; }
.progress .bar { height:100%; width:0; background:#4caf50; transition:width 0.5s; }
.download-btn { display:inline-block; margin-top:10px; padding:6px 12px; background:#0073aa; color:#fff; border-radius:6px; text-decoration:none; }
.download-btn:hover { background:#005d88; }
#download-all { display:block; margin:20px auto 0; padding:10px 20px; background:#28a745; color:#fff; border:none; border-radius:6px; cursor:pointer; }
#download-all:hover { background:#1e7e34; }