:root{--ic-primary-color:#4a5568;--ic-success-color:#48bb78;--ic-warning-color:#ed8936;--ic-danger-color:#f56565;--ic-info-color:#4299e1;--ic-gray-50:#f9fafb;--ic-gray-100:#f3f4f6;--ic-gray-200:#e5e7eb;--ic-gray-300:#d1d5db;--ic-gray-400:#9ca3af;--ic-gray-500:#6b7280;--ic-gray-600:#4b5563;--ic-gray-700:#374151;--ic-gray-800:#1f2937;--ic-gray-900:#111827;--ic-border-radius:4px;--ic-transition:all 0.2s ease}.png-compressor-container{max-width:800px;background:#fff;font-size:14px;line-height:1.5;color:var(--ic-gray-800);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}.png-compressor-container *{box-sizing:border-box}.png-compressor-header{text-align:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid var(--ic-gray-200)}.png-compressor-logo{font-size:40px;margin-bottom:15px}.png-compressor-title{margin:0 0 8px;font-size:28px;font-weight:600;color:var(--ic-gray-800);display:flex;align-items:center;justify-content:center;gap:10px}h1.png-compressor-title{margin-bottom:0!important}.png-compressor-subtitle{margin:0;color:var(--ic-gray-500);font-size:16px}.png-compressor-upload-area{border:2px dashed var(--ic-gray-300);border-radius:var(--ic-border-radius);padding:48px 24px;text-align:center;background:var(--ic-gray-50);transition:var(--ic-transition);cursor:pointer;position:relative;min-height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}.png-compressor-upload-area:hover{border-color:var(--ic-primary-color);background:var(--ic-gray-100)}.png-compressor-upload-area.dragover{border-color:var(--ic-success-color);background:var(--ic-gray-100);border-style:solid}.png-compressor-upload-area.uploading{pointer-events:none;opacity:.7}.png-compressor-upload-area.disabled{background:var(--ic-gray-100)!important;border-color:var(--ic-gray-300)!important;cursor:not-allowed!important;opacity:0.5!important;pointer-events:none!important}.png-compressor-upload-content{width:100%;pointer-events:none}.png-compressor-upload-icon{font-size:48px;display:block;margin-bottom:16px;color:var(--ic-gray-400)}.png-compressor-upload-text{font-size:18px;font-weight:500;color:var(--ic-gray-700);margin-bottom:8px}.png-compressor-upload-subtext{color:var(--ic-gray-500);margin-bottom:12px}.png-compressor-supported-formats{font-size:12px;color:var(--ic-gray-400);margin-top:8px;font-weight:500}.png-compressor-hidden{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;z-index:1!important}.png-compressor-upload-progress{margin-top:20px;padding:16px;background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius)}.png-compressor-upload-progress .png-compressor-progress-text{text-align:center;font-weight:500;color:var(--ic-gray-600);font-size:13px}.png-compressor-file-preview{background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);margin-bottom:30px}.png-compressor-preview-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:var(--ic-gray-100);border-bottom:1px solid var(--ic-gray-200)}.png-compressor-preview-title{margin:0;font-size:18px;font-weight:600;color:var(--ic-gray-800);display:flex;align-items:center;gap:8px}.png-compressor-section-icon{font-size:18px}.png-compressor-file-count{font-size:14px;color:var(--ic-gray-500);background:var(--ic-gray-200);padding:4px 12px;border-radius:12px;font-weight:500;margin-left:12px}.png-compressor-preview-actions{display:flex;gap:12px}.png-compressor-action-btn{padding:8px 16px;border:1px solid var(--ic-gray-300);border-radius:var(--ic-border-radius);background:#fff;color:var(--ic-gray-700);cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;transition:var(--ic-transition);text-decoration:none}.png-compressor-action-btn:hover{background:var(--ic-gray-50);border-color:var(--ic-gray-400);color:#333}.png-compressor-btn-icon{font-size:14px}.png-compressor-btn-text{font-weight:500}.png-compressor-file-list{padding:20px;display:grid;gap:12px;max-height:400px;overflow-y:auto}.png-compressor-file-item{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;padding:16px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);gap:16px;position:relative;transition:var(--ic-transition)}.png-compressor-file-item:hover{background:var(--ic-gray-50);border-color:var(--ic-gray-300)}.png-compressor-file-item.completed{border-color:var(--ic-success-color);background:#f0fdf4}.png-compressor-file-item.png-compressor-success{border-color:var(--ic-success-color);background:#f0fdf4}.png-compressor-file-icon{width:40px;height:40px;background:var(--ic-info-color);border-radius:var(--ic-border-radius);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem;flex-shrink:0}.png-compressor-file-info{flex:1;min-width:0}.png-compressor-file-name{font-weight:500;margin-bottom:3px;word-break:break-all;color:var(--ic-gray-800);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.png-compressor-file-size{font-size:13px;color:var(--ic-gray-500);margin-bottom:5px}.png-compressor-compression-stats{text-align:right;font-size:14px;min-width:200px;color:var(--ic-gray-600);font-weight:500}.png-compressor-file-progress{margin-top:8px}.png-compressor-file-progress-bar{width:100%;height:4px;background:var(--ic-gray-200);border-radius:2px;overflow:hidden;margin-bottom:5px}.png-compressor-file-progress-fill{height:100%;background:var(--ic-success-color);width:0%;transition:width 0.3s ease}.png-compressor-file-progress-text{font-size:.75rem;color:var(--ic-gray-500);font-weight:500}.png-compressor-result-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.png-compressor-result-info{flex:1}.png-compressor-download-section{flex-shrink:0}.png-compressor-savings{color:var(--ic-success-color);font-weight:600}.png-compressor-global-progress{margin-top:16px;padding:20px 24px;background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius)}.png-compressor-progress-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;font-size:13px}.png-compressor-detail-item{display:flex;flex-direction:column;align-items:center;padding:8px;background:#fff;border-radius:var(--ic-border-radius);border:1px solid var(--ic-gray-300)}.png-compressor-detail-label{font-weight:500;color:var(--ic-gray-600);margin-bottom:4px}.png-compressor-detail-value{font-weight:700;color:var(--ic-gray-700);font-size:16px}.png-compressor-settings-panel{background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);margin-bottom:30px}.png-compressor-settings-header{padding:20px 24px;background:var(--ic-gray-100);border-bottom:1px solid var(--ic-gray-200)}.png-compressor-settings-title{margin:0;font-size:18px;font-weight:600;color:var(--ic-gray-800);display:flex;align-items:center;gap:8px}.png-compressor-settings-content{padding:24px}.png-compressor-setting-group{margin-bottom:24px;padding:20px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius)}.png-compressor-setting-group:last-child{margin-bottom:0}.png-compressor-setting-label{font-weight:500;margin-bottom:8px;color:var(--ic-gray-700);display:flex;align-items:center;gap:8px;font-size:16px}.png-compressor-setting-icon{font-size:18px}.png-compressor-setting-description{font-size:13px;color:var(--ic-gray-500);margin-top:8px;line-height:1.4}.png-compressor-slider-container{margin:15px 0}.png-compressor-slider{width:100%;height:6px;border-radius:3px;background:var(--ic-gray-200);outline:none;-webkit-appearance:none;position:relative}.png-compressor-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ic-info-color);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgb(0 0 0 / .2)}.png-compressor-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ic-info-color);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgb(0 0 0 / .2)}.png-compressor-slider-value{display:inline-block;background:var(--ic-info-color);color:#fff;padding:4px 8px;border-radius:var(--ic-border-radius);font-size:13px;font-weight:500;margin-left:10px}.png-compressor-select-custom{width:100%;padding:10px 12px;border:1px solid var(--ic-gray-300);border-radius:var(--ic-border-radius);font-size:14px;background:#fff;cursor:pointer;transition:var(--ic-transition);color:var(--ic-gray-800);font-family:inherit}.png-compressor-select-custom:focus{outline:none;border-color:var(--ic-primary-color)}.png-compressor-process-btn{background:var(--ic-success-color);color:#fff;border:none;padding:16px 32px;font-size:16px;font-weight:500;border-radius:var(--ic-border-radius);cursor:pointer;width:100%;margin-top:20px;transition:var(--ic-transition);border:1px solid var(--ic-success-color);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}.png-compressor-process-btn:hover:not(:disabled){background:#38a169;border-color:#38a169}.png-compressor-process-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.png-compressor-results{background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);margin-bottom:30px}.png-compressor-results-header{padding:20px;background:var(--ic-gray-100);border-bottom:1px solid var(--ic-gray-200)}.png-compressor-results-title{margin:0;font-size:20px;font-weight:600;color:var(--ic-gray-800);display:flex;align-items:center;gap:10px}.png-compressor-results-actions{padding:20px;background:var(--ic-gray-50);border-bottom:1px solid var(--ic-gray-200);display:flex;gap:12px;flex-wrap:wrap}.png-compressor-download-btn,.png-compressor-new-files-btn{padding:12px 20px;border-radius:var(--ic-border-radius);font-weight:500;font-size:14px;cursor:pointer;transition:var(--ic-transition);display:flex;align-items:center;gap:8px;flex:1;justify-content:center;text-decoration:none;font-family:inherit;border:none}.png-compressor-download-btn{background:var(--ic-info-color);color:#fff;border:1px solid var(--ic-info-color)}.png-compressor-download-btn:hover{background:#3182ce;border-color:#3182ce}.png-compressor-new-files-btn{background:var(--ic-gray-500);color:#fff;border:1px solid var(--ic-gray-500)}.png-compressor-new-files-btn:hover{background:var(--ic-gray-600);border-color:var(--ic-gray-600)}.png-compressor-results-list{padding:24px;display:grid;gap:12px}.png-compressor-result-item{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;padding:16px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);gap:16px;transition:var(--ic-transition)}.png-compressor-result-item:hover{background:var(--ic-gray-50);border-color:var(--ic-gray-300)}.png-compressor-result-icon{font-size:18px}.png-compressor-result-name{font-weight:500;color:var(--ic-gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.png-compressor-result-savings{color:var(--ic-success-color);font-weight:600;font-size:14px}.png-compressor-download-icon{background:var(--ic-success-color);color:#fff;border:none;width:36px;height:36px;border-radius:var(--ic-border-radius);cursor:pointer;transition:var(--ic-transition);display:flex;align-items:center;justify-content:center;border:1px solid var(--ic-success-color);font-family:inherit}.png-compressor-download-icon:hover{background:#38a169;border-color:#38a169}.png-compressor-download-icon.downloading{background:#10b981;animation:pulse 1s ease-in-out}.png-compressor-download-icon i{font-size:14px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.png-compressor-converter-card{background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);margin-bottom:20px}.png-compressor-features-section{padding:20px}.png-compressor-features-title,.png-compressor-tips-title{color:var(--ic-gray-800);margin-bottom:15px;font-size:18px;font-weight:600}.png-compressor-features-grid{display:grid;gap:16px}.png-compressor-feature-item{display:flex;gap:16px;align-items:flex-start;padding:16px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);transition:var(--ic-transition)}.png-compressor-feature-item:hover{border-color:var(--ic-gray-300);background:var(--ic-gray-50)}.png-compressor-feature-icon{font-size:24px;margin-top:2px;flex-shrink:0}.png-compressor-feature-content{flex:1}.png-compressor-feature-header{color:var(--ic-gray-800);margin-bottom:8px;font-weight:600;font-size:15px}.png-compressor-feature-desc{color:var(--ic-gray-600);line-height:1.6;font-size:14px}.png-compressor-tips-section{padding:20px}.png-compressor-tips-list{display:grid;gap:16px}.png-compressor-tip-item{display:flex;gap:16px;align-items:flex-start;padding:16px;background:#fff;border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);transition:var(--ic-transition)}.png-compressor-tip-item:hover{border-color:var(--ic-gray-300);background:var(--ic-gray-50)}.png-compressor-tip-icon{font-size:24px;margin-top:2px;flex-shrink:0}.png-compressor-tip-content{flex:1}.png-compressor-tip-header{color:var(--ic-gray-800);margin-bottom:8px;font-weight:600;font-size:15px}.png-compressor-tip-desc{color:var(--ic-gray-600);line-height:1.6;font-size:14px}.png-compressor-seo-content{background:var(--ic-gray-50);border:1px solid var(--ic-gray-200);border-radius:var(--ic-border-radius);padding:20px;margin:20px 0 30px}.png-compressor-seo-content h2{color:var(--ic-gray-800);font-size:24px;margin-bottom:20px;font-weight:600}.png-compressor-seo-content h3{color:var(--ic-gray-700);font-size:20px;margin:25px 0 15px;font-weight:600}.png-compressor-seo-content p{color:var(--ic-gray-600);margin-bottom:0;line-height:1.7}.png-compressor-seo-content ul{margin:15px 0;padding-left:20px}.png-compressor-seo-content li{color:var(--ic-gray-600);margin-bottom:8px;line-height:1.6}.png-compressor-highlight-box{background:#fdf9ee;padding:20px;border-radius:var(--ic-border-radius);margin:20px 0}.png-compressor-highlight-box p{margin:0;font-weight:500;color:var(--ic-gray-800)}.png-compressor-progress-bar{width:100%;height:8px;background:var(--ic-gray-200);border-radius:4px;overflow:hidden;margin:15px 0;border:1px solid var(--ic-gray-300)}.png-compressor-progress-fill{height:100%;background:var(--ic-success-color);width:0%;transition:width 0.3s ease;border-radius:4px}.png-compressor-error{color:var(--ic-danger-color);background:#fffbf0;border:1px solid #fed7aa;padding:12px 16px;border-radius:var(--ic-border-radius);margin:10px 0;font-size:14px}.png-compressor-success{color:var(--ic-success-color);background:#f0fff4;border:1px solid #c6f6d5;padding:12px 16px;border-radius:var(--ic-border-radius);margin:10px 0;font-size:14px}.png-compressor-file-remove{width:28px;height:28px;border:1px solid var(--ic-danger-color);background:#fff;color:var(--ic-danger-color);border-radius:var(--ic-border-radius);cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;transition:var(--ic-transition)}.png-compressor-file-remove:hover{background:var(--ic-danger-color)}.png-compressor-container>*:empty{display:none!important;margin:0!important;padding:0!important;height:0!important}.png-compressor-container>*[style*="display: none"]{margin:0!important;padding:0!important;height:0!important;overflow:hidden!important}.png-compressor-h2{font-size:20px;font-weight:600;margin:25px 0 20px;align-items:center;text-align:center;border-bottom:1px solid #e5e7eb;padding-bottom:18px}@media (max-width:768px){.png-compressor-title{font-size:24px;flex-direction:column;gap:8px}.png-compressor-upload-area{padding:32px 20px;min-height:120px}.png-compressor-file-item{grid-template-columns:40px 1fr auto;gap:12px}.png-compressor-compression-stats{text-align:left;width:100%;min-width:auto}.png-compressor-result-item{grid-template-columns:1fr;gap:12px;text-align:left}.png-compressor-result-row{flex-direction:column;align-items:flex-start;gap:10px}.png-compressor-download-section{align-self:flex-end}.png-compressor-results-actions{flex-direction:column}.png-compressor-preview-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 20px}.png-compressor-progress-details{grid-template-columns:repeat(2,1fr)}}