.compressor-container{flex-direction:column;gap:32px;margin-bottom:40px;display:flex}@media (min-width:1024px){.compressor-container{flex-direction:row;align-items:stretch}}.compressor-sidebar{background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);width:100%;padding:24px}@media (min-width:1024px){.compressor-sidebar{flex-shrink:0;width:320px}}.settings-group{margin-bottom:24px}.settings-group:last-child{margin-bottom:0}.settings-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:14px;font-weight:600;display:block}.preset-btn{background-color:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-md);width:100%;transition:all var(--transition-fast);flex-direction:column;align-items:flex-start;margin-bottom:8px;padding:12px 16px;display:flex}.preset-btn:hover{border-color:var(--border-hover);background-color:var(--bg-elevated)}.preset-btn.active{border-color:var(--accent);background-color:var(--accent-soft)}.preset-title{color:var(--text-primary);margin-bottom:4px;font-weight:600}.preset-desc{color:var(--text-muted);text-align:left;font-size:12px}.range-input{appearance:none;background:var(--bg-input);border-radius:var(--radius-full);outline:none;width:100%;height:6px;margin-top:8px}.range-input::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;width:18px;height:18px;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast);border-radius:50%}.range-input::-webkit-slider-thumb:hover{transform:scale(1.1)}.range-value{color:var(--text-primary);float:right;font-size:14px;font-weight:600}.compressor-main{flex-direction:column;flex-grow:1;gap:24px;width:100%;display:flex}.dropzone{border:2px dashed var(--border-default);border-radius:var(--radius-lg);background-color:var(--bg-card);text-align:center;width:100%;transition:all var(--transition-fast);cursor:pointer;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;padding:24px;display:flex}.dropzone:hover,.dropzone.active{border-color:var(--accent);background-color:var(--accent-soft)}.dropzone-icon{color:var(--accent);margin-bottom:16px;font-size:48px}.dropzone-text{color:var(--text-primary);margin-bottom:8px;font-size:18px;font-weight:600}.dropzone-subtext{color:var(--text-muted);font-size:14px}.image-list{flex-direction:column;gap:16px;display:flex}.image-item{background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-md);flex-direction:column;gap:16px;padding:16px;display:flex}@media (min-width:640px){.image-item{flex-direction:row;align-items:center}}.image-preview-wrap{border-radius:var(--radius-sm);background:var(--bg-input);border:1px solid var(--border-default);flex-shrink:0;width:80px;height:80px;overflow:hidden}.image-preview{object-fit:cover;width:100%;height:100%}.image-info{flex-direction:column;flex-grow:1;gap:4px;min-width:0;display:flex}.image-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.image-stats{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;display:flex}.stat-badge{background:var(--bg-input);border-radius:4px;padding:4px 8px;font-weight:500}.stat-badge.savings{color:#34d399;background:#10b98126}.stat-badge.error{color:#f87171;background:#f8717126}.image-actions{align-items:center;gap:8px;display:flex}.progress-container{background:var(--bg-input);border-radius:var(--radius-full);width:100%;height:6px;margin-top:8px;overflow:hidden}.progress-bar{background:var(--accent);border-radius:var(--radius-full);height:100%;transition:width .3s}.btn-primary{background:var(--btn-bg);color:var(--btn-text);border-radius:var(--radius-full);box-shadow:var(--btn-shadow);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;display:inline-flex}.btn-primary:hover:not(:disabled){background:var(--btn-bg-hover);box-shadow:var(--btn-shadow-hover);transform:translateY(-2px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-full);transition:all var(--transition-fast);justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;display:inline-flex}.btn-secondary:hover:not(:disabled){border-color:var(--border-hover);background:var(--bg-card-hover)}.btn-icon{background:var(--bg-elevated);width:36px;height:36px;color:var(--text-secondary);border:1px solid var(--border-default);transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.btn-icon:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-card-hover)}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.btn-icon.danger:hover:not(:disabled){color:#f87171;background:#f871711a;border-color:#f871714d}.actions-bar{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-default);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px;display:flex}.total-stats{color:var(--text-secondary);flex-wrap:wrap;gap:16px;font-size:14px;display:flex}.total-stats span{color:var(--text-primary);font-weight:600}.comparison-modal-overlay{z-index:1000;background:#0a0908e6;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.comparison-modal{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);flex-direction:column;width:100%;max-width:900px;max-height:90vh;display:flex;overflow:hidden}.comparison-header{border-bottom:1px solid var(--border-default);justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.comparison-title{color:var(--text-primary);font-size:18px;font-weight:700}.comparison-body{flex-direction:column;flex-grow:1;align-items:center;padding:24px;display:flex;overflow:auto}.image-slider-container{border-radius:var(--radius-md);background:var(--bg-input);-webkit-user-select:none;user-select:none;background-image:linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;width:100%;max-width:800px;position:relative;overflow:hidden}.image-slider-img{object-fit:contain;width:100%;height:auto;max-height:60vh;display:block}.image-slider-overlay{position:absolute;inset:0;overflow:hidden}.slider-handle{background:var(--accent);cursor:ew-resize;z-index:10;width:4px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.slider-handle:after{content:"";background:var(--accent);width:32px;height:32px;box-shadow:var(--shadow-md);border:2px solid #fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.slider-label{color:#fff;border-radius:var(--radius-full);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;padding:4px 12px;font-size:12px;font-weight:600;position:absolute;top:16px}.slider-label.original{left:16px}.slider-label.compressed{right:16px}.toast-container{z-index:9999;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.toast{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);align-items:center;gap:12px;padding:12px 20px;font-size:14px;font-weight:500;animation:.3s slideIn;display:flex}.toast.success i{color:#34d399}.toast.error i{color:#f87171}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.tc-seo-content{background:var(--tc-surface);border:1px solid var(--tc-border);border-radius:var(--tc-radius);color:var(--tc-text-muted);margin-top:40px;margin-bottom:80px;padding:40px 0;line-height:1.7}.tc-seo-content h2{color:var(--tc-text);margin-top:0;margin-bottom:16px;font-size:24px;font-weight:700}.tc-seo-content h3{color:var(--tc-text);margin-top:32px;margin-bottom:16px;font-size:20px;font-weight:600}.tc-seo-content p{margin-bottom:16px;font-size:15px}.tc-seo-content ul{margin-bottom:24px;padding-left:24px;list-style-type:disc}.tc-seo-content li{margin-bottom:8px;font-size:15px}.tc-seo-content li strong{color:var(--tc-primary)}@media (max-width:768px){.tc-seo-content{margin-top:40px;padding:24px 0}.tc-seo-content h2{font-size:20px}.tc-seo-content h3{font-size:18px}}