.compress-preview,.compress-result{display:flex;flex-direction:column;gap:var(--space-lg)}.preview-image,.result-image{max-width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);margin:0 auto;display:block;box-shadow:var(--shadow-md)}.compress-controls{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-lg);background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-xl);position:relative;overflow:hidden}.compress-controls:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f59e0b 0%,#fbbf24 50%,transparent 100%);opacity:.8}.encoder-selector{display:flex;flex-direction:column;gap:var(--space-xs)}.encoder-selector label{font-weight:600;font-size:var(--text-sm);color:var(--color-text-primary)}.encoder-selector select{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--text-base);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-base)}.encoder-selector select:hover{border-color:#f59e0b}.encoder-selector select:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}.encoder-description{font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic}.compress-error{padding:var(--space-sm) var(--space-md);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#ef4444;font-size:var(--text-sm);text-align:center}.encoder-badge{text-align:center;font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-sm)}.encoder-badge strong{color:#f59e0b}.quality-slider{display:flex;flex-direction:column;gap:var(--space-sm)}.quality-slider label{font-weight:600;text-align:center;font-size:var(--text-base);color:var(--color-text-primary)}.quality-slider input[type=range]{width:100%;height:8px;border-radius:var(--radius-full);background:var(--color-bg-tertiary);outline:none;appearance:none;-webkit-appearance:none;cursor:pointer}.quality-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;box-shadow:0 2px 8px #f59e0b66;transition:all var(--transition-base)}.quality-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #f59e0b80}.quality-slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#fbbf24);cursor:pointer;border:none;box-shadow:0 2px 8px #f59e0b66}.quality-labels{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted)}.result-stats{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;padding:var(--space-lg);background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--radius-lg);border:1px solid var(--color-success);position:relative;overflow:hidden}.result-stats:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--color-success) 0%,#4ade80 100%)}.stat{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:var(--text-lg);font-weight:700;color:var(--color-text-primary)}.stat-arrow{font-size:var(--text-xl);color:var(--color-text-muted)}.stat-highlight{background:linear-gradient(135deg,var(--color-success) 0%,#4ade80 100%);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);box-shadow:0 4px 12px #22c55e4d}.stat-highlight .stat-label{color:#fffc}.stat-highlight .stat-value{color:#fff}@media(max-width:480px){.compress-controls{padding:var(--space-md)}.preview-image,.result-image{max-height:200px}.result-stats{gap:var(--space-md);padding:var(--space-md)}.stat-value{font-size:var(--text-base)}}