:root{--primary-color:#41907c;--primary-hover:#367a68;--primary-light:#e8f5f3;--success-color:#28a745;--error-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--text-primary:#333;--text-secondary:#666;--text-muted:#999;--border-color:#f0f0f0;--bg-light:#f8f9fa;--bg-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--shadow-sm:0 1px 3px rgba(0,0,0,0.1);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease}.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}}