/* TinyPNG-inspired multi-image compressor */
.compressor-page{max-width:1050px}
.compressor-heading{padding:12px 12px 4px}
.compressor-heading h1{font-size:clamp(1.8rem,4vw,2.5rem);color:#202b3c}
.compressor-icon{width:58px;height:58px;margin:auto;border-radius:18px;display:grid;place-items:center;background:#e8f2ff;color:#0878df;font-size:30px}
.compressor-steps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.compressor-steps span{background:#f0f6ff;color:#2867a8;border-radius:30px;padding:7px 15px;font-size:13px;font-weight:600}
.compressor-upload{border:2px dashed #a9c9ed;border-radius:18px;background:#f8fbff;text-align:center;padding:42px 18px;transition:.2s}
.compressor-upload.dragover{border-color:#0878df;background:#edf6ff;transform:scale(1.005)}
.upload-cloud{font-size:44px;color:#1683e8;line-height:1.2;margin-bottom:12px}
.compressor-upload h4{color:#26364a}
.compressor-settings{background:#fff;border:1px solid #e7ebf0;border-radius:14px;padding:20px}
.image-results{display:grid;gap:12px}
.image-result{background:#fff;border:1px solid #e7ebf0;border-radius:14px;padding:14px;display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:15px;align-items:center}
.image-thumb{width:76px;height:76px;border-radius:10px;background:#f3f5f8;object-fit:contain}
.image-name{font-weight:600;overflow-wrap:anywhere;color:#26364a}
.image-meta{font-size:13px;color:#758195;margin-top:4px}
.image-progress{height:7px;margin-top:10px;background:#edf0f4}
.image-progress .progress-bar{background:#1683e8}
.image-status{font-size:12px;color:#758195;margin-top:5px}
.image-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.compression-badge{display:inline-block;border-radius:30px;background:#e8f7ee;color:#16834a;padding:5px 10px;font-size:12px;font-weight:700}
.compression-badge.increased{background:#fff3e7;color:#a45b00}
.overall-progress{background:#fff;border:1px solid #e7ebf0;border-radius:12px;padding:15px}
.overall-progress .progress{height:9px}
.empty-results{background:#fff;border:1px dashed #d9e0e8;border-radius:14px}
.success-note{color:#16834a;font-weight:600}
@media(max-width:600px){
 .compressor-upload{padding:32px 14px}
 .image-result{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:11px}
 .image-thumb{width:58px;height:58px}
 .image-actions{grid-column:1/-1;justify-content:space-between}
 .image-actions .btn{flex:1}
 .compressor-settings{padding:15px}
}