.image-opt-theme{--font-family:'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--opt-primary:#6366f1;--opt-primary-hover:#4f46e5;--opt-success:#10b981;--opt-warning:#f59e0b;--opt-danger:#ef4444;--opt-bg-base:#f8fafc;--opt-bg-card:#ffffff;--opt-text-main:#0f172a;--opt-text-muted:#64748b;--opt-border-color:#e2e8f0;--opt-radius-lg:16px;--opt-radius-md:12px;--opt-radius-sm:8px;--opt-shadow-sm:0 1px 3px rgba(0,0,0,0.05);--opt-shadow-md:0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);--opt-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -2px rgba(0,0,0,0.02);font-family:var(--font-family);background-color:var(--opt-bg-base);color:var(--opt-text-main);padding:24px;border-radius:var(--opt-radius-lg);box-shadow:var(--opt-shadow-md);margin:0 auto;max-width:1400px}.dark .image-opt-theme{--opt-bg-base:#0f172a;--opt-bg-card:#1e293b;--opt-text-main:#f8fafc;--opt-text-muted:#94a3b8;--opt-border-color:#334155;--opt-shadow-sm:0 1px 3px rgba(0,0,0,0.2);--opt-shadow-md:0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.1);--opt-shadow-lg:0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.2)}.optimizer-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--opt-border-color);padding-bottom:20px;margin-bottom:24px}.optimizer-title{font-size:1.8rem;font-weight:800;letter-spacing:-.025em;background:linear-gradient(135deg,var(--opt-primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;margin:0 0 6px 0}.optimizer-subtitle{font-size:.95rem;color:var(--opt-text-muted);margin:0}.action-btn-example{background:linear-gradient(135deg,rgb(99 102 241 / .1),rgb(168 85 247 / .1));border:1px solid rgb(99 102 241 / .2);color:var(--opt-primary);padding:10px 16px;border-radius:var(--opt-radius-md);cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;transition:all 0.2s ease}.action-btn-example:hover{background:linear-gradient(135deg,rgb(99 102 241 / .18),rgb(168 85 247 / .18));transform:translateY(-1px)}.dropzone-panel{background-color:var(--opt-bg-card);border:2.5px dashed var(--opt-primary);border-radius:var(--opt-radius-lg);padding:60px 40px;text-align:center;cursor:pointer;box-shadow:var(--opt-shadow-sm);transition:all 0.25s ease-in-out}.dropzone-panel:hover,.dropzone-panel.dragover{border-color:#a855f7;background-color:rgb(99 102 241 / .03);box-shadow:var(--opt-shadow-lg)}.dropzone-icon{width:64px;height:64px;color:var(--opt-primary);margin-bottom:20px;opacity:.85}.dropzone-panel h3{font-size:1.4rem;font-weight:700;margin:0 0 10px 0}.dropzone-panel p{font-size:.9rem;color:var(--opt-text-muted);margin:0 0 24px 0}.btn-browse-trigger{background-color:var(--opt-primary);color:#fff;border:none;padding:12px 24px;border-radius:var(--opt-radius-md);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background-color 0.2s ease;box-shadow:0 4px 12px rgb(99 102 241 / .2)}.btn-browse-trigger:hover{background-color:var(--opt-primary-hover)}.workspace-layout{display:grid;grid-template-columns:360px 1fr;gap:24px}@media (max-width:1024px){.workspace-layout{grid-template-columns:1fr}}.workspace-sidebar{display:flex;flex-direction:column;gap:24px}.config-card{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-md);padding:20px;box-shadow:var(--opt-shadow-sm)}.card-title{font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 16px 0;border-bottom:1px solid var(--opt-border-color);padding-bottom:10px}.card-title i{color:var(--opt-primary);width:20px;height:20px}.card-info-text{font-size:.78rem;color:var(--opt-text-muted);margin:6px 0 12px 0;line-height:1.4}.control-group{margin-bottom:16px}.control-group:last-child{margin-bottom:0}.control-group label{display:block;font-size:.85rem;font-weight:600;color:var(--opt-text-muted);margin-bottom:6px}.control-group select,.control-group input[type="text"],.control-group input[type="number"]{width:100%;padding:10px 12px;border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-sm);font-size:.9rem;background-color:var(--opt-bg-base);color:var(--opt-text-main);box-sizing:border-box;outline:none;transition:border-color 0.2s ease}.control-group select:focus,.control-group input:focus{border-color:var(--opt-primary)}.slider-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.slider-badge{background-color:rgb(99 102 241 / .1);color:var(--opt-primary);font-size:.8rem;font-weight:700;padding:2px 6px;border-radius:4px}.control-group input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--opt-border-color);outline:none}.control-group input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--opt-primary);cursor:pointer;box-shadow:0 0 4px rgb(0 0 0 / .2)}.checkbox-group{margin-top:12px}.check-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:550;cursor:pointer}.check-item input{cursor:pointer;accent-color:var(--opt-primary)}.toggle-item{background-color:var(--opt-bg-base);padding:8px 12px;border-radius:var(--opt-radius-sm);border:1px dashed var(--opt-border-color)}.dimensions-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.control-group-sub{display:flex;flex-direction:column}.control-group-sub label{font-size:.78rem;font-weight:600;color:var(--opt-text-muted);margin-bottom:4px}.control-group-sub input,.control-group-sub select{width:100%;padding:8px 10px;border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-sm);font-size:.85rem;background-color:var(--opt-bg-base);color:var(--opt-text-main);box-sizing:border-box;outline:none}.presets-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.preset-tag{background-color:var(--opt-bg-base);border:1px solid var(--opt-border-color);border-radius:6px;padding:6px 10px;font-size:.75rem;font-weight:550;cursor:pointer;color:var(--opt-text-muted);transition:all 0.2s ease;text-align:left}.preset-tag:hover,.preset-tag.active{background-color:var(--opt-primary);color:#fff;border-color:var(--opt-primary)}.workspace-main{display:flex;flex-direction:column;gap:24px}.queue-section{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-md);padding:16px;box-shadow:var(--opt-shadow-sm)}.section-tag{font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:8px;margin-bottom:12px}.section-tag i{color:var(--opt-primary)}.queue-list{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.queue-thumb-card{position:relative;width:80px;height:80px;border-radius:var(--opt-radius-sm);border:2px solid var(--opt-border-color);overflow:hidden;cursor:pointer;flex-shrink:0;transition:all 0.2s ease}.queue-thumb-card:hover,.queue-thumb-card.active{border-color:var(--opt-primary);transform:scale(1.04)}.queue-thumb-card img{width:100%;height:100%;object-fit:cover}.queue-thumb-remove{position:absolute;top:4px;right:4px;background-color:rgb(239 68 68 / .9);color:#fff;border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;box-shadow:0 2px 4px rgb(0 0 0 / .2)}.preview-section{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-md);padding:20px;box-shadow:var(--opt-shadow-sm)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.preview-tag{font-weight:700;display:flex;align-items:center;gap:8px}.preview-tag i{color:var(--opt-primary)}.compare-modes{display:flex;background-color:var(--opt-bg-base);padding:3px;border-radius:var(--opt-radius-sm);gap:2px}.compare-btn{background:#fff0;border:none;padding:6px 12px;border-radius:var(--opt-radius-sm);font-size:.8rem;font-weight:600;color:var(--opt-text-muted);cursor:pointer;transition:all 0.2s ease}.compare-btn.active{background-color:var(--opt-bg-card);color:var(--opt-primary);box-shadow:var(--opt-shadow-sm)}.compare-view-box{position:relative;width:100%;height:480px;background-color:#0f172a;border-radius:var(--opt-radius-md);overflow:hidden;user-select:none}.original-image-panel,.optimized-image-panel{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.original-image-panel img{max-width:100%;max-height:100%;object-fit:contain}.optimized-image-panel{width:50%;border-right:1.5px dashed rgb(255 255 255 / .4);z-index:2;background-color:#0f172a}.optimized-image-panel canvas{max-width:100%;max-height:100%;object-fit:contain;cursor:crosshair}.tag-badge-original,.tag-badge-optimized{position:absolute;bottom:12px;font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:4px;color:#fff;box-shadow:0 2px 6px rgb(0 0 0 / .3);z-index:10}.tag-badge-original{left:12px;background-color:rgb(15 23 42 / .75)}.tag-badge-optimized{right:12px;background-color:rgb(99 102 241 / .85)}.slider-divider{position:absolute;top:0;bottom:0;left:50%;width:4px;background-color:#fff;z-index:5;cursor:ew-resize;transform:translateX(-50%)}.divider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgb(0 0 0 / .3);color:var(--opt-primary)}.divider-handle i{width:16px;height:16px}.stats-section{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-md);padding:16px 20px;box-shadow:var(--opt-shadow-sm)}.savings-container{display:flex;justify-content:space-between;align-items:center;gap:20px}.stat-card{display:flex;flex-direction:column}.stat-lbl{font-size:.8rem;color:var(--opt-text-muted);font-weight:600}.stat-val{font-size:1.3rem;font-weight:800}.savings-badge-card{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:var(--opt-radius-md);padding:10px 20px;text-align:center;box-shadow:0 4px 12px rgb(16 185 129 / .2)}.savings-percent{font-size:1.5rem;font-weight:800;display:block;line-height:1.1}.savings-desc{font-size:.72rem;font-weight:600;opacity:.9}.export-section{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-md);padding:20px;box-shadow:var(--opt-shadow-sm)}.export-actions-bar{display:flex;gap:16px}.btn-export-primary{flex:1;background-color:var(--opt-primary);color:#fff;border:none;padding:14px 24px;border-radius:var(--opt-radius-md);font-weight:700;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-color 0.2s ease;box-shadow:0 4px 14px rgb(99 102 241 / .3)}.btn-export-primary:hover{background-color:var(--opt-primary-hover)}.btn-export-secondary{background-color:var(--opt-bg-base);color:var(--opt-text-main);border:1px solid var(--opt-border-color);padding:14px 20px;border-radius:var(--opt-radius-md);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all 0.2s ease}.btn-export-secondary:hover{background-color:var(--opt-primary);color:#fff;border-color:var(--opt-primary)}.srcset-output-panel{background-color:var(--opt-bg-base);border:1px solid var(--opt-border-color);border-radius:var(--opt-radius-sm);padding:14px;margin-top:20px}.srcset-output-panel .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.panel-title{font-size:.82rem;font-weight:700;color:var(--opt-text-muted);display:flex;align-items:center;gap:6px}.btn-copy{background-color:var(--opt-bg-card);border:1px solid var(--opt-border-color);color:var(--opt-text-main);padding:4px 8px;font-size:.72rem;font-weight:700;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all 0.2s ease}.btn-copy:hover{background-color:var(--opt-primary);color:#fff;border-color:var(--opt-primary)}.code-textarea{width:100%;border:1px solid var(--opt-border-color);background-color:#0f172a;color:#38bdf8;font-family:'Courier New',Courier,monospace;font-size:.8rem;padding:10px;border-radius:6px;resize:none;box-sizing:border-box;outline:none}.toast-message{position:fixed;bottom:24px;right:24px;background-color:#0f172a;color:#fff;padding:12px 24px;border-radius:var(--opt-radius-md);box-shadow:0 10px 25px rgb(0 0 0 / .3);font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transform:translateY(10px);transition:all 0.3s cubic-bezier(.16,1,.3,1);z-index:1000}.toast-message.show{opacity:1;pointer-events:auto;transform:translateY(0)}.hidden{display:none!important}