@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--claude-orange: #ff7a00;--claude-orange-light: #ff9933;--claude-orange-dark: #e66900;--claude-blue: #1e40af;--claude-blue-light: #3b82f6;--claude-purple: #7c3aed;--claude-purple-light: #8b5cf6;--primary-gradient: linear-gradient(135deg, #ff7a00 0%, #ff9933 100%);--secondary-gradient: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);--hero-gradient: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #2d1b69 100%);--accent-gradient: linear-gradient(135deg, #ff7a00 0%, #7c3aed 100%);--success: #10b981;--warning: #f59e0b;--error: #ef4444;--info: #3b82f6;--text-primary: #0f0f23;--text-secondary: #525266;--text-tertiary: #8e8ea0;--text-inverse: #ffffff;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #0f0f23;--bg-glass: rgba(255, 255, 255, .8);--bg-glass-dark: rgba(15, 15, 35, .8);--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-strong: #94a3b8;--shadow-subtle: 0 1px 3px rgba(15, 15, 35, .1);--shadow-soft: 0 4px 12px rgba(15, 15, 35, .15);--shadow-medium: 0 8px 24px rgba(15, 15, 35, .15);--shadow-strong: 0 16px 32px rgba(15, 15, 35, .2);--shadow-intense: 0 24px 48px rgba(15, 15, 35, .25);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);min-height:100vh;color:var(--text-primary);line-height:1.6;scroll-behavior:smooth;font-weight:400}#root{min-height:100vh;display:flex;flex-direction:column}.header-nav{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:1000;transition:all .3s ease}.header-container{max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:1rem}.logo-icon{font-size:2rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text{display:flex;flex-direction:column}.logo-title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.logo-tagline{font-size:.8rem;color:var(--text-secondary);font-weight:500}.nav-menu{display:flex;gap:2rem;align-items:center}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .3s ease;position:relative;background:none;border:none;cursor:pointer;font-size:inherit;font-family:inherit}.nav-link:hover,.nav-link.active{color:var(--color-primary)}.nav-link.active:after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--primary-gradient);border-radius:2px}.nav-actions{display:flex;gap:1rem;align-items:center}.btn-primary{background:var(--primary-gradient);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:transparent;color:var(--text-secondary);border:2px solid var(--border-medium);padding:.75rem 1.5rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-large{padding:1rem 2rem;font-size:1rem}.mobile-menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.5rem}.mobile-menu-toggle span{width:24px;height:2px;background:var(--text-primary);transition:all .3s ease}.hero{background:var(--primary-gradient);color:#fff;padding:6rem 2rem;text-align:center}.hero-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-title{font-size:3.5rem;font-weight:800;line-height:1.2;margin-bottom:1.5rem}.gradient-text{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:1.2rem;opacity:.9;margin-bottom:2rem;line-height:1.6}.hero-stats{display:flex;gap:2rem;justify-content:center;margin-bottom:2rem}.stat{text-align:center}.stat-number{display:block;font-size:2rem;font-weight:700;color:#fbbf24}.stat-label{font-size:.9rem;opacity:.8}.hero-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.hero-features{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.feature-badge{background:#ffffff1a;padding:.5rem 1rem;border-radius:var(--radius-lg);font-size:.9rem;border:1px solid rgba(255,255,255,.2)}.hero-visual{display:flex;justify-content:center;align-items:center}.compression-demo{display:flex;align-items:center;gap:2rem}.demo-card{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);padding:2rem;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.demo-image{font-size:3rem;margin-bottom:1rem}.demo-size{display:block;font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.demo-label{font-size:.9rem;opacity:.8}.demo-arrow{font-size:2rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.features{padding:6rem 2rem;background:#fff}.features-container{max-width:1200px;margin:0 auto}.features-header{text-align:center;margin-bottom:4rem}.features-header h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary)}.features-header p{font-size:1.2rem;color:var(--text-secondary)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-bottom:4rem}.feature-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:2rem;transition:all .3s ease;cursor:pointer}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-primary)}.feature-icon{font-size:2.5rem;margin-bottom:1rem}.feature-highlight{background:var(--primary-gradient);color:#fff;padding:.25rem .75rem;border-radius:var(--radius-lg);font-size:.8rem;font-weight:600;display:inline-block;margin-bottom:1rem}.feature-card h3{font-size:1.3rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.feature-card p{color:var(--text-secondary);line-height:1.6}.features-cta{background:var(--primary-gradient);border-radius:var(--radius-xl);padding:3rem;text-align:center;color:#fff}.cta-content h3{font-size:2rem;font-weight:700;margin-bottom:1rem}.cta-content p{font-size:1.1rem;opacity:.9;margin-bottom:2rem}.cta-content .btn-primary{background:#fff;color:var(--color-primary)}.footer{background:var(--bg-dark);color:#fff;padding:4rem 2rem 2rem;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:3rem}.footer-section h3{font-size:1.1rem;font-weight:600;margin-bottom:1.5rem;color:#fff}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:.75rem}.footer-section a{color:#94a3b8;text-decoration:none;transition:color .3s ease}.footer-section a:hover{color:#fff}.footer-logo-text{margin-left:1rem}.footer-logo-text p{color:#94a3b8;margin-top:.5rem;line-height:1.6}.footer-bottom{border-top:1px solid #334155;margin-top:3rem;padding-top:2rem}.footer-bottom-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.footer-social{display:flex;gap:1rem}.social-link{width:40px;height:40px;background:#334155;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .3s ease}.social-link:hover{background:var(--color-primary);transform:translateY(-2px)}.footer-copy p{color:#94a3b8;font-size:.9rem}.footer-badges{display:flex;gap:1rem}.badge{background:#334155;padding:.5rem 1rem;border-radius:var(--radius-md);font-size:.8rem;color:#94a3b8}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-10px) rotate(2deg)}66%{transform:translateY(5px) rotate(-1deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes slideInUp{0%{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}html{scroll-behavior:smooth}::selection{background:#ff7a004d;color:#fff}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1a1a2e}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff7a00,#ff4757);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#f93,#ff6b35)}.advanced-controls{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:2rem;margin-bottom:2rem;border:1px solid var(--border-light)}.advanced-controls h3{font-size:1.5rem;font-weight:700;margin-bottom:2rem;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.controls-section{margin-bottom:2rem}.controls-section h4{font-size:1.1rem;font-weight:600;margin-bottom:1.5rem;color:var(--text-primary);border-bottom:2px solid var(--border-light);padding-bottom:.5rem}.presets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.preset-card{background:var(--bg-light);border:2px solid var(--border-light);border-radius:var(--radius-md);padding:1.5rem;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:all .3s ease;text-align:left}.preset-card:hover{border-color:var(--color-primary);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.preset-icon{font-size:2rem}.preset-info{display:flex;flex-direction:column}.preset-name{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.preset-desc{font-size:.9rem;color:var(--text-secondary)}.quality-slider{width:100%;height:8px;border-radius:4px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:1rem 0}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:var(--shadow-md)}.quality-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;box-shadow:var(--shadow-md)}.quality-indicator{background:var(--primary-gradient);color:#fff;padding:.25rem .75rem;border-radius:var(--radius-lg);font-size:.8rem;font-weight:600;margin-left:1rem}.quality-marks{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-secondary);margin-top:.5rem}.format-select{width:100%;padding:.75rem;border:2px solid var(--border-light);border-radius:var(--radius-md);font-size:1rem;background:#fff;cursor:pointer;transition:border-color .3s ease}.format-select:focus{outline:none;border-color:var(--color-primary)}.checkbox-item{margin-bottom:1rem}.checkbox-label{display:flex;align-items:center;gap:1rem;cursor:pointer;padding:1rem;border:2px solid var(--border-light);border-radius:var(--radius-md);transition:all .3s ease}.checkbox-label:hover{border-color:var(--color-primary);background:var(--bg-light)}.checkbox-label input[type=checkbox]{display:none}.checkmark{width:20px;height:20px;border:2px solid var(--border-medium);border-radius:4px;position:relative;transition:all .3s ease}.checkbox-label input[type=checkbox]:checked+.checkmark{background:var(--color-primary);border-color:var(--color-primary)}.checkbox-label input[type=checkbox]:checked+.checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:12px}.option-desc{font-size:.9rem;color:var(--text-secondary);margin-left:auto}.compress-btn-advanced{background:var(--success-gradient);color:#fff;border:none;padding:1.25rem 2rem;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:2rem}.compress-btn-advanced:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.compress-btn-advanced:disabled{background:var(--text-light);cursor:not-allowed;transform:none;box-shadow:none}.btn-icon{font-size:1.2rem}.enhanced-result{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:2rem;margin-top:2rem;border:1px solid var(--border-light)}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.result-success{display:flex;align-items:center;gap:.75rem}.success-icon{font-size:2rem}.result-success h3{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.view-toggle{display:flex;gap:.5rem;background:var(--bg-light);padding:.25rem;border-radius:var(--radius-md)}.toggle-btn{padding:.5rem 1rem;border:none;background:transparent;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.toggle-btn.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-sm)}.compression-grade{display:flex;justify-content:center;margin-bottom:2rem}.grade-circle{width:120px;height:120px;border:4px solid;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;box-shadow:var(--shadow-lg)}.grade-emoji{font-size:2rem;margin-bottom:.25rem}.grade-text{font-size:.9rem;font-weight:600;margin-bottom:.25rem}.grade-percentage{font-size:1.2rem;font-weight:700;color:var(--text-primary)}.result-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.stat-card{background:var(--bg-light);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:all .3s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card.highlight{background:var(--success-gradient);color:#fff;border-color:var(--color-success)}.stat-card.highlight .stat-content{color:#fff}.stat-icon{font-size:1.5rem}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:1.3rem;font-weight:700;color:var(--text-primary)}.stat-label{font-size:.9rem;color:var(--text-secondary)}.performance-metrics{background:var(--bg-light);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:2rem}.performance-metrics h4{font-size:1.1rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.metric{text-align:center;padding:1rem;background:#fff;border-radius:var(--radius-md);border:1px solid var(--border-light)}.metric-label{display:block;font-size:.9rem;color:var(--text-secondary);margin-bottom:.5rem}.metric-value{font-size:1.2rem;font-weight:700;color:var(--color-success)}.comparison-container{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-bottom:2rem}.comparison-side h4{text-align:center;margin-bottom:1rem;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.image-container{background:var(--bg-light);border:2px dashed var(--border-medium);border-radius:var(--radius-lg);padding:2rem;text-align:center;position:relative}.image-container img{max-width:100%;max-height:200px;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.compressed-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-secondary);min-height:120px;justify-content:center}.placeholder-icon{font-size:3rem}.image-info{position:absolute;bottom:.5rem;left:.5rem;right:.5rem;background:#000c;color:#fff;padding:.5rem;border-radius:var(--radius-sm);display:flex;justify-content:space-between;font-size:.8rem}.comparison-divider{display:flex;justify-content:center;align-items:center}.vs-badge{background:var(--primary-gradient);color:#fff;padding:.75rem 1.5rem;border-radius:50%;font-weight:700;font-size:.9rem;box-shadow:var(--shadow-lg)}.download-btn-enhanced{background:var(--primary-gradient);color:#fff;border:none;padding:1.25rem 2rem;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.download-btn-enhanced:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.btn-text{font-size:1rem}.btn-subtext{font-size:.8rem;opacity:.8;background:#fff3;padding:.25rem .5rem;border-radius:var(--radius-sm)}.secondary-actions{display:flex;gap:1rem;justify-content:center}.error-result{background:#fff;border:2px solid var(--color-error);border-radius:var(--radius-xl);padding:3rem;text-align:center;margin-top:2rem}.error-result h3{color:var(--color-error);margin-bottom:1rem;font-size:1.3rem}.error-result p{color:var(--text-secondary);margin-bottom:2rem}.compress-section{padding:6rem 2rem;background:var(--bg-light);min-height:100vh}.compress-container{max-width:1200px;margin:0 auto}.compress-header{text-align:center;margin-bottom:4rem}.compress-header h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:var(--text-primary)}.compress-header p{font-size:1.2rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.compress-content{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}.upload-section{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:2rem;border:1px solid var(--border-light)}.controls-section{display:grid;gap:2rem}.upload-area{border:3px dashed var(--border-medium);border-radius:var(--radius-lg);padding:3rem;text-align:center;background:var(--bg-light);transition:all .3s ease;cursor:pointer;margin-bottom:0}.upload-area:hover{border-color:var(--color-primary);background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}.upload-area.drag-over{border-color:var(--color-primary);background:var(--primary-gradient);color:#fff}.upload-area.drag-over .upload-text h3,.upload-area.drag-over .upload-text p{color:#fff}.upload-icon{font-size:4rem;margin-bottom:1.5rem;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.upload-text h3{font-size:1.5rem;color:var(--text-primary);margin-bottom:.5rem;font-weight:600}.upload-text p{color:var(--text-secondary);font-size:1rem;margin-bottom:.5rem}.upload-btn{background:var(--primary-gradient);color:#fff;border:none;padding:1rem 2rem;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:1.5rem}.upload-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.file-input{display:none}.preview-image{max-width:200px;max-height:200px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);margin:1rem auto;display:block}@media (max-width: 768px){.hero-content{grid-template-columns:1fr;text-align:center}.hero-title{font-size:2.5rem}.hero-stats{flex-direction:column;gap:1rem}.hero-actions{flex-direction:column}.compression-demo{flex-direction:column;gap:1rem}.features-grid{grid-template-columns:1fr}.footer-content{grid-template-columns:1fr;text-align:center}.nav-menu,.nav-actions{display:none}.mobile-menu-toggle{display:flex}.result-header{flex-direction:column;align-items:stretch}.comparison-container{grid-template-columns:1fr;gap:1rem}.vs-badge{margin:1rem 0}.secondary-actions{flex-direction:column}.presets-grid{grid-template-columns:1fr}.result-stats-grid{grid-template-columns:repeat(2,1fr)}.metrics-grid{grid-template-columns:1fr}}.minimal-compress-page{background:#fafafa;min-height:100vh;padding:2rem 1rem}.minimal-compress-container{max-width:800px;margin:0 auto}.minimal-page-header{text-align:center;margin-bottom:3rem}.minimal-page-header h1{font-size:2.5rem;font-weight:700;color:#1f2937;margin-bottom:.5rem}.minimal-page-header p{font-size:1.1rem;color:#6b7280;max-width:500px;margin:0 auto}.compress-workflow{display:grid;gap:2rem}.minimal-upload-container{width:100%}.minimal-upload-area{border:2px dashed #d1d5db;border-radius:12px;padding:3rem 2rem;text-align:center;background:#fff;transition:all .3s ease;cursor:pointer}.minimal-upload-area:hover{border-color:#667eea;background:#f9fafb}.minimal-upload-area.drag-over{border-color:#667eea;background:#eef2ff;border-style:solid}.upload-content h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.5rem}.upload-content p{color:#6b7280;margin-bottom:1.5rem}.upload-icon-minimal{font-size:3rem;margin-bottom:1rem;opacity:.7}.supported-formats{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.supported-formats span{background:#f3f4f6;color:#6b7280;padding:.25rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500}.minimal-upload-selected{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.selected-image-container{position:relative;display:flex;align-items:center;padding:1.5rem;gap:1.5rem}.selected-image{width:80px;height:80px;object-fit:cover;border-radius:8px;flex-shrink:0}.image-info{flex:1}.image-info h3{font-size:1rem;font-weight:600;color:#374151;margin-bottom:.25rem;word-break:break-all}.image-info p{font-size:.875rem;color:#6b7280}.change-image-btn{background:#f3f4f6;color:#374151;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s}.change-image-btn:hover{background:#e5e7eb}.minimal-controls{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 1px 3px #0000001a}.controls-header{text-align:center;margin-bottom:2rem}.controls-header h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.5rem}.controls-header p{color:#6b7280;font-size:.875rem}.preset-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:2rem}.preset-option{background:#f9fafb;border:2px solid transparent;border-radius:8px;padding:1.25rem;text-align:center;cursor:pointer;transition:all .2s ease}.preset-option:hover{background:#f3f4f6;border-color:#e5e7eb}.preset-option.active{background:#eef2ff;border-color:#667eea}.preset-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.preset-icon{font-size:1.5rem}.preset-tag{background:#667eea;color:#fff;font-size:.625rem;font-weight:700;padding:.25rem .5rem;border-radius:4px;letter-spacing:.025em}.preset-option h4{font-size:1rem;font-weight:600;color:#374151;margin-bottom:.25rem}.preset-option p{font-size:.875rem;color:#6b7280;line-height:1.4}.advanced-toggle{margin-bottom:2rem;padding:1.5rem;background:#f9fafb;border-radius:8px}.quality-display{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.quality-display label{font-weight:600;color:#374151}.quality-label{font-size:.875rem;color:#6b7280}.quality-slider-minimal{width:100%;height:6px;border-radius:3px;background:#e5e7eb;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.quality-slider-minimal::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 4px #0000001a}.quality-slider-minimal::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 4px #0000001a}.format-selector{margin-bottom:2rem}.format-selector label{display:block;font-weight:600;color:#374151;margin-bottom:.75rem}.format-options{display:flex;gap:.5rem}.format-btn{flex:1;background:#f9fafb;border:2px solid #e5e7eb;color:#6b7280;padding:.75rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease}.format-btn:hover{border-color:#d1d5db}.format-btn.active{background:#667eea;border-color:#667eea;color:#fff}.compress-btn-minimal{width:100%;background:#667eea;color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.compress-btn-minimal:hover{background:#5a67d8;transform:translateY(-1px);box-shadow:0 4px 8px #667eea4d}.compress-btn-minimal:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.spinner-minimal{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.minimal-result{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 1px 3px #0000001a}.minimal-result.error{border-left:4px solid #ef4444}.minimal-result.success{border-left:4px solid #10b981}.result-header{margin-bottom:2rem}.check-icon{width:48px;height:48px;background:#10b981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.success-text h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.25rem}.success-text p{color:#6b7280;font-size:.875rem}.compression-summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;padding:1.5rem;background:#f9fafb;border-radius:8px}.size-comparison{display:flex;align-items:center;gap:1.5rem}.size-before,.size-after{text-align:center}.size-label{display:block;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.size-value{display:block;font-size:1.25rem;font-weight:700;color:#374151}.arrow{font-size:1.5rem;color:#9ca3af;font-weight:700}.savings-badge{text-align:center;color:#fff;padding:.75rem 1rem;border-radius:8px;min-width:80px}.savings-percentage{display:block;font-size:1.5rem;font-weight:700;line-height:1}.savings-label{display:block;font-size:.75rem;font-weight:600;opacity:.9}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.stat{text-align:center;padding:1rem;background:#f9fafb;border-radius:6px}.stat-label{display:block;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.stat-value{display:block;font-size:1.125rem;font-weight:700;color:#374151}.result-actions{display:grid;gap:.75rem}.download-btn-minimal{width:100%;background:#10b981;color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.download-btn-minimal:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.secondary-btn{width:100%;background:#f3f4f6;color:#374151;border:none;padding:.75rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.secondary-btn:hover{background:#e5e7eb}.error-content{text-align:center}.error-icon{font-size:3rem;margin-bottom:1rem}.error-content h3{font-size:1.25rem;font-weight:600;color:#374151;margin-bottom:.5rem}.error-content p{color:#6b7280;margin-bottom:1.5rem}.retry-btn{background:#ef4444;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color .2s ease}.retry-btn:hover{background:#dc2626}@media (max-width: 768px){.minimal-compress-page{padding:1rem .5rem}.minimal-page-header h1{font-size:2rem}.preset-selector{grid-template-columns:1fr}.compression-summary{flex-direction:column;gap:1rem}.size-comparison{gap:1rem}.format-options{flex-direction:column}.result-stats{grid-template-columns:1fr}.minimal-upload-area{padding:2rem 1rem}.selected-image-container{flex-direction:column;text-align:center}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.minimal-hero{background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:6rem 2rem 4rem;min-height:80vh;display:flex;align-items:center;position:relative}.hero-container{max-width:1200px;margin:0 auto;width:100%}.hero-content-minimal{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.hero-badge{display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:50px;padding:.5rem 1rem;margin-bottom:2rem;box-shadow:0 1px 3px #0000001a}.badge-text{font-size:.875rem;font-weight:600;color:#475569}.hero-title-minimal{font-size:3.5rem;font-weight:800;line-height:1.1;color:#0f172a;margin-bottom:1.5rem}.title-highlight{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.25rem;line-height:1.6;color:#64748b;margin-bottom:2rem;max-width:500px}.hero-stats-minimal{display:flex;align-items:center;gap:1rem;margin-bottom:3rem}.stat-minimal{text-align:center}.stat-number-minimal{display:block;font-size:1.5rem;font-weight:700;color:#0f172a;line-height:1}.stat-label-minimal{font-size:.875rem;color:#64748b;font-weight:500}.stat-divider{color:#cbd5e1;font-weight:300}.hero-actions-minimal{display:flex;flex-direction:column;gap:2rem}.cta-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;box-shadow:0 4px 14px #667eea4d}.cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.cta-arrow{transition:transform .3s ease}.cta-primary:hover .cta-arrow{transform:translate(4px)}.quick-features{display:flex;gap:1.5rem;flex-wrap:wrap}.feature-item{font-size:.875rem;color:#64748b;font-weight:500}.hero-visual-minimal{display:flex;justify-content:center;align-items:center}.compression-showcase{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 20px 40px #0000001a;border:1px solid #e2e8f0}.showcase-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center;margin-bottom:1rem}.showcase-item{text-align:center}.file-preview{width:80px;height:80px;border-radius:12px;background:#f8fafc;border:2px dashed #cbd5e1;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:.5rem;position:relative}.file-preview.optimized{background:#f0fdf4;border-color:#22c55e}.file-icon{font-size:1.5rem;margin-bottom:.25rem}.file-size{font-size:.75rem;font-weight:600}.file-size.large{color:#dc2626}.file-size.small{color:#16a34a}.file-label{font-size:.875rem;color:#64748b;font-weight:500}.process-indicator{display:flex;flex-direction:column;align-items:center;gap:.5rem}.process-line{width:2px;height:20px;background:linear-gradient(to bottom,#cbd5e1,#667eea)}.process-icon{font-size:1.25rem;color:#667eea}.savings-indicator{text-align:center;background:#16a34a;color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:600}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);animation:bounce 2s infinite}.scroll-arrow{width:24px;height:24px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg)}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(-10px)}60%{transform:translate(-50%) translateY(-5px)}}.minimal-features{padding:6rem 2rem;background:#fff}.features-container-minimal{max-width:1200px;margin:0 auto}.features-header-minimal{text-align:center;margin-bottom:4rem}.section-badge{display:inline-flex;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:50px;padding:.5rem 1rem;font-size:.875rem;font-weight:600;color:#475569;margin-bottom:1rem}.features-header-minimal h2{font-size:2.5rem;font-weight:700;color:#0f172a;margin-bottom:1rem;line-height:1.2}.features-header-minimal p{font-size:1.1rem;color:#64748b;max-width:600px;margin:0 auto}.features-grid-minimal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:3rem}.feature-card-minimal{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:2rem;transition:all .3s ease;position:relative;overflow:hidden}.feature-card-minimal:hover{background:#fff;box-shadow:0 10px 25px #0000001a;transform:translateY(-2px)}.feature-icon-minimal{font-size:2rem;margin-bottom:1rem}.feature-content-minimal h3{font-size:1.25rem;font-weight:600;color:#0f172a;margin-bottom:.5rem}.feature-content-minimal p{color:#64748b;line-height:1.6;margin-bottom:.75rem}.feature-detail{font-size:.875rem;color:#667eea;font-weight:600}.features-cta-minimal{text-align:center}.cta-secondary{background:#fff;color:#475569;border:2px solid #e2e8f0;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem}.cta-secondary:hover{border-color:#667eea;color:#667eea;transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.multi-upload-container{background:#fff;border-radius:16px;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;overflow:hidden}.multi-upload-area{padding:4rem 2rem;text-align:center;border:2px dashed #cbd5e1;margin:1rem;border-radius:12px;background:#f8fafc;transition:all .3s ease;cursor:pointer}.multi-upload-area:hover{border-color:#667eea;background:#f1f5f9}.multi-upload-area.drag-over{border-color:#667eea;background:#eef2ff;border-style:solid}.multi-upload-content h3{font-size:1.5rem;font-weight:600;color:#0f172a;margin-bottom:.5rem}.multi-upload-content p{color:#64748b;margin-bottom:2rem}.upload-icon-multi{font-size:4rem;margin-bottom:1.5rem;opacity:.7}.upload-features{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap}.upload-feature{background:#fff;color:#475569;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;border:1px solid #e2e8f0}.selected-files-container{padding:1.5rem}.files-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.files-header h3{font-size:1.25rem;font-weight:600;color:#0f172a}.files-actions{display:flex;gap:.75rem}.add-more-btn,.clear-all-btn{padding:.5rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.add-more-btn{background:#667eea;color:#fff;border:none}.add-more-btn:hover{background:#5a67d8}.clear-all-btn{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}.clear-all-btn:hover{background:#e2e8f0}.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-bottom:1rem}.file-item{position:relative}.file-preview{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#f8fafc;border:1px solid #e2e8f0}.file-preview img{width:100%;height:100%;object-fit:cover}.remove-file-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;background:#000000b3;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.file-info{margin-top:.5rem;text-align:center}.file-name{display:block;font-size:.75rem;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{display:block;font-size:.75rem;color:#6b7280}.add-more-zone{padding:1rem;border:2px dashed #cbd5e1;border-radius:8px;text-align:center;background:#f8fafc;cursor:pointer;transition:all .3s ease;color:#64748b;font-size:.875rem}.add-more-zone:hover{border-color:#667eea;background:#f1f5f9}.add-more-zone.drag-over{border-color:#667eea;background:#eef2ff;border-style:solid}@media (max-width: 768px){.hero-content-minimal{grid-template-columns:1fr;text-align:center;gap:2rem}.hero-title-minimal{font-size:2.5rem}.hero-stats-minimal{justify-content:center;flex-wrap:wrap}.quick-features{justify-content:center}.compression-showcase{padding:1.5rem}.showcase-grid{gap:1rem}.features-grid-minimal{grid-template-columns:1fr}.files-actions{flex-direction:column}.files-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.batch-controls{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;margin-top:1rem}.batch-header{text-align:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.batch-header h3{font-size:1.5rem;font-weight:600;color:#0f172a;margin-bottom:.5rem}.batch-header p{color:#64748b;font-size:.875rem}.compression-mode{margin-bottom:2rem}.mode-label{display:block;font-size:1rem;font-weight:600;color:#374151;margin-bottom:1rem}.preset-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.preset-tab{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .3s ease;position:relative}.preset-tab:hover{background:#f1f5f9;border-color:#cbd5e1}.preset-tab.active{background:#eef2ff;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.tab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.tab-icon{font-size:1.5rem}.tab-reduction{background:#10b981;color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .5rem;border-radius:4px}.tab-name{display:block;font-size:1rem;font-weight:600;color:#374151;margin-bottom:.25rem}.tab-desc{font-size:.875rem;color:#6b7280}.advanced-options{background:#f8fafc;border-radius:12px;padding:1.5rem;margin-bottom:2rem}.option-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.option-row:last-child{margin-bottom:0}.option-group{display:flex;flex-direction:column}.option-group label{font-size:.875rem;font-weight:600;color:#374151;margin-bottom:.5rem}.quality-range{width:100%;height:6px;border-radius:3px;background:#e2e8f0;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.quality-range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;box-shadow:0 2px 4px #0003}.quality-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.format-select-batch{padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;background:#fff;font-size:.875rem;cursor:pointer;transition:border-color .2s ease}.format-select-batch:focus{outline:none;border-color:#667eea}.dimension-input{padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:.875rem;transition:border-color .2s ease}.dimension-input:focus{outline:none;border-color:#667eea}.option-toggles{display:flex;gap:2rem;margin-top:1rem}.toggle-option{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-option input[type=checkbox]{width:16px;height:16px;accent-color:#667eea}.toggle-label{font-size:.875rem;color:#374151;font-weight:500}.compression-progress{background:#f0f9ff;border:2px solid #0ea5e9;border-radius:12px;padding:1.5rem;margin-bottom:1rem}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.875rem;font-weight:600;color:#0c4a6e}.progress-bar{width:100%;height:8px;background:#e0f2fe;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#0ea5e9,#0284c7);transition:width .3s ease;border-radius:4px}.progress-text{text-align:center;font-size:.875rem;color:#0c4a6e;font-weight:600}.batch-compress-btn{width:100%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:1.25rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem}.batch-compress-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.batch-compress-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.spinner-batch{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}.batch-result{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 6px #0000000d;border:1px solid #e2e8f0;margin-top:1rem}.batch-result.success{border-left:4px solid #10b981}.batch-result.error{border-left:4px solid #ef4444}.result-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.success-indicator{display:flex;align-items:center;gap:1rem}.check-icon-batch{width:48px;height:48px;background:#10b981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.success-text h3{font-size:1.25rem;font-weight:600;color:#0f172a;margin-bottom:.25rem}.success-text p{color:#64748b;font-size:.875rem}.view-toggle-batch{display:flex;background:#f1f5f9;border-radius:8px;padding:.25rem}.toggle-btn-batch{padding:.5rem 1rem;border:none;background:transparent;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;color:#64748b}.toggle-btn-batch.active{background:#fff;color:#0f172a;box-shadow:0 1px 3px #0000001a}.batch-summary{margin-bottom:2rem}.summary-stats{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:2rem}.summary-card{text-align:center;padding:1.5rem;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;min-width:150px}.summary-card.highlight{background:#f0fdf4;border-color:#22c55e}.summary-value{display:block;font-size:1.5rem;font-weight:700;color:#0f172a;margin-bottom:.25rem}.summary-label{font-size:.875rem;color:#64748b;font-weight:500}.summary-arrow{font-size:1.5rem;color:#9ca3af;font-weight:700}.savings-summary{display:flex;align-items:center;gap:2rem;background:#f8fafc;padding:2rem;border-radius:12px;border:1px solid #e2e8f0}.savings-circle{width:120px;height:120px;background:#10b981;color:#fff;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}.savings-percentage{font-size:2rem;font-weight:700;line-height:1}.savings-text{font-size:.75rem;font-weight:600;opacity:.9}.savings-details{flex:1}.savings-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid #e2e8f0}.savings-item:last-child{border-bottom:none}.savings-label{font-size:.875rem;color:#64748b;font-weight:500}.savings-amount{font-size:1rem;color:#0f172a;font-weight:600}.details-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.detail-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:1rem;display:flex;gap:1rem}.detail-item.success{border-left:4px solid #10b981}.detail-item.error{border-left:4px solid #ef4444}.detail-preview{position:relative;width:60px;height:60px;flex-shrink:0}.detail-preview img{width:100%;height:100%;object-fit:cover;border-radius:6px}.detail-status{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;box-shadow:0 1px 3px #0003}.detail-info{flex:1;display:flex;flex-direction:column;gap:.25rem}.detail-name{font-size:.875rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-sizes{font-size:.75rem;color:#64748b;display:flex;align-items:center;gap:.5rem}.detail-reduction{font-size:.75rem;color:#10b981;font-weight:600}.detail-error{font-size:.75rem;color:#ef4444;font-weight:500}.download-single-btn{background:#667eea;color:#fff;border:none;padding:.25rem .75rem;border-radius:4px;font-size:.75rem;font-weight:500;cursor:pointer;transition:background-color .2s ease;margin-top:auto}.download-single-btn:hover{background:#5a67d8}.batch-actions{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}.download-all-btn{background:#10b981;color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.75rem}.download-all-btn:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.secondary-actions-batch{display:flex;justify-content:center}.action-btn{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#e2e8f0;border-color:#cbd5e1}@media (max-width: 768px){.preset-tabs,.option-row{grid-template-columns:1fr}.option-toggles{flex-direction:column;gap:1rem}.result-header{flex-direction:column;align-items:stretch}.summary-stats{flex-direction:column;gap:1rem}.savings-summary{flex-direction:column;text-align:center}.details-grid{grid-template-columns:1fr}.detail-item{flex-direction:column;text-align:center}}