.image-compressor{max-width:1000px;margin:0 auto}.compressor-input-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.upload-content{text-align:center}.upload-icon{font-size:3rem;margin-bottom:var(--space-md)}.upload-content h3{margin:0 0 var(--space-sm) 0;color:var(--text-primary)}.upload-content p{margin:0 0 var(--space-xs) 0;color:var(--text-muted)}.file-selected-info{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border)}.selected-file-details h4{margin:0 0 var(--space-sm) 0;color:var(--text-primary);font-size:.9rem}.file-name{margin:0 0 var(--space-xs) 0;color:var(--text-secondary);font-weight:500}.file-size{margin:0;color:var(--text-muted);font-size:.85rem}.upload-hint{font-size:.875rem;color:var(--text-muted)!important}.compression-controls{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--border)}.compressor-buttons{display:flex;gap:var(--space-md);margin-top:var(--space-lg)}.image-preview-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-lg)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg)}.preview-item h4{margin:0 0 var(--space-md) 0;color:var(--text-primary);font-family:var(--font-display)}.preview-image{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);margin-bottom:var(--space-md);min-height:200px;display:flex;align-items:center;justify-content:center}.preview-image img{max-width:100%;max-height:300px;border-radius:var(--radius-sm)}.preview-info{font-size:.875rem}.preview-info p{margin:0 0 var(--space-xs) 0;color:var(--text-muted)}.preview-info strong{color:var(--text-primary)}.error-message{color:var(--danger);padding:var(--space-md);background:#ff4d6d1a;border:1px solid var(--danger);border-radius:var(--radius-md)}.tool-guide{max-width:800px;margin:0 auto;padding:40px 0}.guide-section{margin-bottom:60px}.guide-section h2{color:var(--text-primary);font-size:2rem;margin-bottom:24px;font-family:Syne,sans-serif;border-bottom:2px solid var(--accent);padding-bottom:8px}.guide-section h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:12px}.guide-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:16px}.guide-steps{display:flex;flex-direction:column;gap:32px}.step{display:flex;gap:24px;align-items:flex-start}.step-number{width:48px;height:48px;background:var(--accent);color:var(--bg-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex-shrink:0}.step-content{flex:1}.step-content h3{color:var(--accent);margin-bottom:12px;font-size:1.3rem}.step-content p{color:var(--text-secondary);line-height:1.7;margin:0}.faq-list{display:flex;flex-direction:column;gap:24px}.faq-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;transition:all .3s ease}.faq-item:hover{border-color:var(--accent);box-shadow:0 4px 12px #0000001a}.faq-item h3{color:var(--text-primary);margin-bottom:12px;font-size:1.1rem}.faq-item p{color:var(--text-secondary);line-height:1.6;margin:0}.related-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.related-tool{display:block;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:24px;text-decoration:none;transition:all .3s ease}.related-tool:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.tool-icon{color:var(--accent);font-weight:600;font-size:1.1rem;margin-bottom:8px}.tool-description{color:var(--text-secondary);line-height:1.5;font-size:.9rem}@media(max-width:768px){.preview-grid{grid-template-columns:1fr}.compressor-buttons{flex-direction:column}.upload-icon{font-size:2rem}.tool-guide{padding:20px 0}.guide-section h2{font-size:1.5rem}.step{gap:16px}.step-number{width:40px;height:40px;font-size:1rem}.related-tools{grid-template-columns:1fr}}.last-updated{text-align:center;padding:24px 0;border-top:1px solid var(--border);margin-top:60px}.last-updated p{color:var(--text-muted);font-size:14px;margin:0}@media(max-width:480px){.guide-section{margin-bottom:40px}.faq-item,.related-tool{padding:16px}}