.image-compressor-workspace .btn-tooltip-wrap{width:100%;position:relative}.image-compressor-workspace .btn-tooltip{background:var(--color-bg-inset,#1a1a2e);color:var(--color-text-primary,#fff);border-radius:var(--radius-md,6px);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:var(--shadow-md);padding:6px 12px;font-size:.75rem;display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.image-compressor-workspace .btn-tooltip:after{content:"";border:5px solid #0000;border-top-color:var(--color-bg-inset,#1a1a2e);position:absolute;top:100%;left:50%;transform:translate(-50%)}.image-compressor-workspace .btn-tooltip-wrap:hover .btn-tooltip{display:block}.image-compressor-workspace button[disabled],.image-compressor-workspace .btn[disabled]{opacity:.5;cursor:not-allowed}.image-compressor-workspace{gap:var(--space-6);flex-direction:row;align-items:stretch;min-height:520px;display:flex}.image-compressor-workspace .workspace-control-panel{gap:var(--space-4);flex-direction:column;flex:1;min-width:0;display:flex}.image-compressor-workspace .workspace-preview-panel{gap:var(--space-4);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);min-width:0;padding:var(--space-5);min-height:480px;box-shadow:var(--shadow-sm);flex-direction:column;flex:1;justify-content:flex-start;display:flex}@media (width<=1024px){.image-compressor-workspace{flex-direction:column}}.image-compressor-workspace .empty-preview-placeholder{text-align:center;padding:var(--space-6);color:var(--color-text-secondary);flex-direction:column;justify-content:center;align-items:center;margin:auto;display:flex}.image-compressor-workspace .empty-preview-placeholder .placeholder-icon{margin-bottom:var(--space-4);opacity:.6;font-size:3.2rem;animation:2s ease-in-out infinite placeholder-pulse}@keyframes placeholder-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.image-compressor-workspace .empty-preview-placeholder h4{margin:0 0 var(--space-2);font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--color-text-primary)}.image-compressor-workspace .empty-preview-placeholder p{font-size:var(--text-xs);color:var(--color-text-muted);max-width:290px;margin:0;line-height:1.5}.image-compressor-workspace .upload-zone{border-radius:var(--radius-2xl);padding:var(--space-4) var(--space-4);text-align:center;background-color:var(--color-bg-elevated);cursor:pointer;transition:all var(--duration-normal) var(--ease-default);justify-content:center;align-items:center;gap:var(--space-2);border:2px dashed #7c3aed40;flex-direction:column;min-height:120px;display:flex;position:relative;box-shadow:inset 0 0 20px #00000005}.image-compressor-workspace .upload-zone:hover,.image-compressor-workspace .upload-zone.dragover{border-color:var(--tool-accent);background-color:var(--color-hover);box-shadow:0 0 0 4px #7c3aed1a,inset 0 0 20px #7c3aed08}.image-compressor-workspace .upload-icon-wrapper{background:var(--color-bg-base);border:1px solid var(--color-border-default);width:38px;height:38px;box-shadow:var(--shadow-sm);transition:all var(--duration-normal) var(--ease-default);border-radius:50%;justify-content:center;align-items:center;margin-bottom:0;font-size:18px;display:flex}.image-compressor-workspace .upload-zone:hover .upload-icon-wrapper{border-color:var(--tool-accent);background-color:var(--color-accent-subtle);transform:scale(1.08);box-shadow:0 4px 12px #7c3aed26}.image-compressor-workspace .upload-zone h3{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-primary);margin:0}.image-compressor-workspace .upload-zone p{font-size:var(--text-2xs);color:var(--color-text-secondary);margin:0}.image-compressor-workspace .browse-button-styled{background-color:var(--tool-accent);color:#fff;border-radius:var(--radius-md);font-size:10px;font-weight:var(--weight-bold);transition:all var(--duration-fast) var(--ease-default);padding:5px 14px;display:inline-block;box-shadow:0 2px 6px #7c3aed26}.image-compressor-workspace .upload-zone:hover .browse-button-styled{background-color:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 10px #7c3aed40}.image-compressor-workspace .segmented-tabs{background:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);gap:2px;padding:2px;display:flex}.image-compressor-workspace .segmented-tabs.wrap-tabs{flex-wrap:wrap}.image-compressor-workspace .tab-btn{border-radius:calc(var(--radius-lg) - 2px);min-width:60px;font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-text-secondary);cursor:pointer;text-align:center;transition:all var(--duration-fast) var(--ease-default);white-space:nowrap;background:0 0;border:none;flex:1;padding:6px 8px}.image-compressor-workspace .tab-btn.active{background:var(--tool-accent);color:#fff;box-shadow:0 2px 6px #7c3aed33}.image-compressor-workspace .settings-bar{background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.image-compressor-workspace .setting-group{gap:var(--space-2);flex-direction:column;display:flex}.setting-label{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--color-text-secondary)}.custom-range-slider{width:100%;accent-color:var(--tool-accent);cursor:pointer}.image-compressor-workspace .slider-ticks{font-size:var(--text-2xs);color:var(--color-text-muted);justify-content:space-between;display:flex}.image-compressor-workspace .action-bar{background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-5);flex-direction:column;align-items:stretch;display:flex}.hidden-input-overlay{opacity:0;cursor:pointer;position:absolute;inset:0}.image-compressor-workspace .progress-wrap{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-2);width:100%}.progress-header{font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-2);justify-content:space-between;display:flex}.progress-track{background-color:var(--color-bg-elevated);border-radius:var(--radius-full);height:8px;overflow:hidden}.image-compressor-workspace .progress-bar{background-color:var(--tool-accent);border-radius:var(--radius-full);width:0%;height:100%;transition:width .3s}.image-compressor-workspace .summary-bar{background-color:var(--color-accent-subtle);border:1px solid var(--color-border-accent);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-4);width:100%}.summary-stats-grid{gap:var(--space-4);text-align:center;grid-template-columns:repeat(3,1fr);display:grid}.summary-stat-card{gap:var(--space-1);flex-direction:column;display:flex}.stat-lbl{font-size:var(--text-2xs);font-weight:var(--weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.stat-val{font-size:var(--text-base);font-weight:var(--weight-extrabold);color:var(--color-text-primary)}.text-success{color:var(--color-success-text)}.text-accent{color:var(--color-text-accent)}.image-compressor-workspace .image-cards-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(170px,1fr));width:100%;display:grid}.image-compressor-workspace .img-card{background-color:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);transition:transform var(--duration-normal) var(--ease-default);box-shadow:var(--shadow-sm);overflow:hidden}.image-compressor-workspace .img-card:hover{transform:translateY(-2px)}.image-compressor-workspace .img-card-thumb-wrapper{background-color:var(--color-bg-base);width:100%;height:auto;position:relative;overflow:hidden}.image-compressor-workspace .img-card-thumb{object-fit:contain;width:100%;height:auto;max-height:200px;display:block}.image-compressor-workspace .img-card-body{padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.image-compressor-workspace .img-card-name{font-size:var(--text-2xs);font-weight:var(--weight-bold);color:var(--color-text-primary);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.image-compressor-workspace .badges-row{flex-wrap:wrap;gap:4px;display:flex}.image-compressor-workspace .size-badge{border-radius:var(--radius-full);font-size:9px;font-weight:var(--weight-bold);padding:2px 6px;display:inline-block}.image-compressor-workspace .size-orig{background-color:var(--color-bg-elevated);color:var(--color-text-secondary);border:1px solid var(--color-border-default)}.image-compressor-workspace .size-new{background-color:var(--color-success-subtle);color:var(--color-success-text)}.image-compressor-workspace .size-savings{background-color:var(--color-accent-subtle);color:var(--color-text-accent)}.image-compressor-workspace .status-processing{color:var(--color-warning-text);font-size:9px;font-weight:var(--weight-medium)}.image-compressor-workspace .status-done{color:var(--color-success-text);font-size:9px;font-weight:var(--weight-semibold)}.image-compressor-workspace .card-actions{gap:var(--space-2);margin-top:var(--space-2);display:flex}.image-compressor-workspace .dl-btn{padding:6px var(--space-2);font-size:10px;font-weight:var(--weight-bold);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);flex:1;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.image-compressor-workspace .dl-btn:hover{background-color:var(--color-hover)}.image-compressor-workspace .remove-btn{border:1px solid var(--color-border-default);color:var(--color-text-muted);padding:6px var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);background:0 0;font-size:10px}.image-compressor-workspace .remove-btn:hover{border-color:var(--color-error);color:var(--color-error-text)}