.gif-compress-container{display:grid;grid-template-columns:380px 1fr;gap:2rem;align-items:start}.config-panel{display:flex;flex-direction:column;gap:1rem}.upload-section{background:linear-gradient(180deg,#fffffffa,#ecf2ffe6);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:1rem;border:1px solid rgba(15,23,42,.08)}.upload-content{text-align:center;padding:1rem;border:2px dashed rgba(15,23,42,.12);border-radius:var(--border-radius);background:var(--surface-2);transition:var(--transition)}.upload-area{position:relative}#gifFileInput{display:none}.upload-content{text-align:center;padding:1.5rem;border:2px dashed var(--border-color);border-radius:var(--border-radius);background:var(--bg-color);transition:var(--transition)}.upload-area:hover .upload-content{border-color:var(--primary-color);background:rgba(var(--primary-rgb),.06)}.upload-area.drag-over .upload-content{border-color:var(--primary-color);background:rgba(var(--primary-rgb),.12);transform:scale(1.02)}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-content h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.upload-content p{font-size:.75rem;color:var(--text-secondary);margin-bottom:.75rem}.upload-icon{font-size:2rem;margin-bottom:.5rem}.upload-btn{display:inline-block;padding:.5rem 1rem;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);font-weight:500;font-size:.875rem;box-shadow:var(--shadow-sm)}.upload-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.file-list-section{background:linear-gradient(180deg,#fffffffa,#eaf1ffe6);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:1rem;border:1px solid rgba(15,23,42,.08);display:flex;flex-direction:column;max-height:300px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.section-header h3{font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0}.file-count{color:var(--text-secondary);font-size:.75rem}.clear-btn{background:none;border:none;color:var(--danger-color);font-size:.75rem;cursor:pointer;padding:.25rem .5rem;border-radius:var(--border-radius);transition:var(--transition)}.clear-btn:hover{background:#ef44441a}.file-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:var(--text-secondary);font-size:.875rem;gap:.5rem}.empty-icon{font-size:2rem;opacity:.5}.file-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#fffc;border-radius:var(--border-radius);border:1px solid transparent;cursor:pointer;transition:var(--transition)}.file-item:hover{border-color:var(--primary-color);background:rgba(var(--primary-rgb),.06)}.file-item.selected{border-color:var(--primary-color);background:rgba(var(--primary-rgb),.12)}.file-item-icon{font-size:1.25rem;flex-shrink:0}.file-item-info{flex:1;min-width:0}.file-item-name{font-size:.75rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-item-size{font-size:.625rem;color:var(--text-secondary)}.file-item-status{flex-shrink:0;font-size:.75rem}.status-badge{padding:.125rem .375rem;border-radius:.25rem;font-size:.625rem;font-weight:500}.status-badge.pending{background:var(--bg-color);color:var(--text-secondary)}.status-badge.compressing{background:rgba(var(--primary-rgb),.12);color:var(--primary-color)}.status-badge.success{background:#10b9811a;color:var(--success-color)}.status-badge.error{background:#ef44441a;color:var(--danger-color)}.file-item-delete{flex-shrink:0;background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;border-radius:var(--border-radius);transition:var(--transition);font-size:.875rem}.file-item-delete:hover{color:var(--danger-color);background:#ef44441a}.batch-actions{display:flex;flex-direction:column;gap:.5rem}.batch-actions .btn-primary,.batch-actions .btn-secondary{padding:.75rem 1rem;font-size:.875rem}.preview-hint{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:rgba(var(--primary-rgb),.12);border-radius:var(--border-radius);font-size:.875rem;color:var(--text-secondary);border:1px solid rgba(var(--primary-rgb),.24)}.hint-icon{font-size:1rem}.overall-progress-card{background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--accent-rgb),.12));border-radius:var(--border-radius-lg);padding:1rem;border:1px solid rgba(var(--primary-rgb),.24)}.overall-progress-card .progress-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.overall-progress-card .progress-icon{font-size:1.25rem;animation:spin 2s linear infinite}.progress-info h4{font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0}.progress-detail{font-size:.75rem;color:var(--text-secondary)}.overall-progress-card .progress-bar{height:6px;margin-bottom:.5rem}.overall-progress-card .progress-text{font-size:.75rem;color:var(--text-secondary)}.file-info{margin-top:1rem;padding:1rem;background:var(--bg-color);border-radius:var(--border-radius);font-size:.875rem}.file-info p{margin:.25rem 0;color:var(--text-secondary)}.compress-settings{background:linear-gradient(180deg,#fffffffa,#ecf2ffe6);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:1.5rem;border:1px solid rgba(15,23,42,.08)}.compress-settings h3{margin-bottom:1.25rem;color:var(--text-primary);font-size:1.125rem;font-weight:600}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:.875rem 0;border-bottom:1px solid var(--border-color)}.setting-item:last-child{border-bottom:none}.setting-item label{font-weight:500;color:var(--text-secondary);font-size:.875rem;display:flex;align-items:center;gap:.5rem}.setting-item.strategy-setting{align-items:flex-start;flex-direction:column;gap:.75rem}.strategy-options{width:100%;display:grid;gap:.75rem}.strategy-option{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem .9rem;border-radius:.85rem;border:1px solid rgba(15,23,42,.1);background:#ffffffe6;cursor:pointer;transition:var(--transition)}.strategy-option input[type=radio]{margin-top:.2rem;accent-color:var(--primary-color)}.strategy-option.is-active{border-color:rgba(var(--primary-rgb),.5);box-shadow:0 10px 26px rgba(var(--primary-rgb),.18);background:linear-gradient(135deg,#fffffffa,#ecf3fff2)}.strategy-text{display:flex;flex-direction:column;gap:.25rem}.strategy-text strong{font-weight:600;color:var(--text-primary)}.strategy-text em{font-style:normal;font-size:.78rem;color:var(--text-secondary)}.setting-item input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary-color)}.setting-value{text-align:right}.target-size{font-weight:700;color:var(--primary-color);font-size:1.125rem;display:block}.setting-hint{font-size:.75rem;color:var(--text-secondary);display:block}.setting-desc{font-size:.75rem;color:var(--text-secondary)}.action-buttons{display:flex;flex-direction:column;gap:.75rem}.btn-primary,.btn-secondary{padding:1rem 1.5rem;border:none;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);font-weight:600;font-size:1rem;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;gap:.5rem}.btn-primary{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:disabled{background:var(--border-color);cursor:not-allowed;opacity:.6}.btn-secondary{background:linear-gradient(135deg,var(--accent-color),#8abaff);color:#fff}.btn-secondary:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary:disabled{background:var(--border-color);cursor:not-allowed;opacity:.6}.btn-icon{font-size:1.125rem}.progress-section{background:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:1.5rem;border:1px solid var(--border-color)}.progress-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}.progress-icon{font-size:1.5rem;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-section h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin:0}.progress-bar{width:100%;height:10px;background:var(--bg-color);border-radius:5px;overflow:hidden;margin-bottom:.75rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));background-size:200% 100%;animation:gradient-shift 2s ease infinite;transition:width .3s ease;width:0%}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.progress-text{font-size:.875rem;color:var(--text-secondary);text-align:center}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.stats-card{background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(var(--accent-rgb),.12));border-radius:var(--border-radius-lg);padding:1.5rem;display:flex;align-items:center;justify-content:space-around;border:1px solid rgba(var(--primary-rgb),.24);animation:slideIn .5s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.stat-item{display:flex;align-items:center;gap:.75rem;text-align:left}.stat-item.highlight{background:#fffc;padding:.75rem 1rem;border-radius:var(--border-radius);box-shadow:var(--shadow-md)}.stat-icon{font-size:1.5rem}.stat-content{display:flex;flex-direction:column}.stat-label{font-size:.75rem;color:var(--text-secondary);margin-bottom:.25rem}.stat-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.stat-value.success{color:var(--success-color)}.stat-value.primary{color:var(--primary-color)}.stat-divider{width:1px;height:40px;background:#0000001a}.compare-preview{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.preview-item{background:#fffffff2;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);padding:1.25rem;border:1px solid rgba(15,23,42,.08)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preview-header h4{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.preview-badge{font-size:.75rem;padding:.25rem .75rem;border-radius:1rem;background:var(--bg-color);color:var(--text-secondary)}.preview-badge.uploaded{background:#10b9811a;color:var(--success-color)}.preview-badge.compressed{background:rgba(var(--primary-rgb),.12);color:var(--primary-color)}.preview-box{width:100%;height:250px;display:flex;align-items:center;justify-content:center;background:var(--bg-color);border-radius:var(--border-radius);border:2px dashed var(--border-color);overflow:hidden}.preview-box img{max-width:100%;max-height:100%;object-fit:contain}.preview-box .placeholder{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--text-secondary)}.placeholder-icon{font-size:2.5rem;opacity:.5}.image-info{margin-top:.75rem;padding:.75rem;background:var(--bg-color);border-radius:var(--border-radius);font-size:.875rem}.image-info p{margin:.25rem 0;color:var(--text-secondary)}.image-info .success{color:var(--success-color);font-weight:600}.image-info .warning{color:var(--warning-color);font-weight:600}.tech-note{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:rgba(var(--accent-rgb),.12);border-radius:var(--border-radius);font-size:.875rem;color:var(--text-secondary);border:1px solid rgba(var(--accent-rgb),.24)}.tech-icon{font-size:1.25rem}@media (max-width: 1200px){.gif-compress-container{grid-template-columns:340px 1fr;gap:1.5rem}.compare-preview{grid-template-columns:1fr}}@media (max-width: 1024px){.gif-compress-container{grid-template-columns:1fr}.stats-card{flex-wrap:wrap;gap:1rem}.stat-divider{display:none}}@media (max-width: 768px){.upload-content{padding:1rem}.upload-icon{font-size:2rem}.preview-box{height:200px}.stats-card{padding:1rem}.stat-item{flex:1;min-width:120px}.stat-value{font-size:1rem}}