.compression-controls{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.format-select{padding:8px;border:1px solid #ddd;border-radius:4px;font-size:14px}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.image-card{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}.image-comparison{display:flex;gap:5px;height:200px;overflow:hidden}.image-side{flex:1;display:flex;flex-direction:column}.image-label{font-size:12px;font-weight:600;color:#666;text-align:center;padding:5px;background:#f8f9fa;border-bottom:1px solid #ddd}.image-preview{width:100%;height:100%;object-fit:cover;display:block}.image-info{padding:15px}.image-title{font-size:14px;font-weight:600;margin-bottom:8px;color:#333;display:flex;align-items:center}.filename-start{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.filename-ext{flex-shrink:0;color:#666}.compression-ratio{color:#28a745;font-weight:600}.batch-actions{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.processing-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}.image-card{position:relative}.spinner{width:30px;height:30px;border:3px solid #f3f3f3;border-top-color:#41907c;border-radius:50%;animation:spin 1s linear infinite}.empty-placeholder{text-align:center;padding:60px 20px;color:#666}.placeholder-icon{font-size:48px;margin-bottom:16px}.placeholder-text{font-size:18px;font-weight:600;margin-bottom:8px;color:#333}.placeholder-hint{font-size:14px;color:#888}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media(max-width:768px){.compression-controls{flex-direction:column;align-items:stretch}.images-grid{grid-template-columns:1fr;gap:15px}.batch-actions{flex-direction:column}}