:root{--bg:#0f1117;--bg-card:#1a1d27;--bg-hover:#252837;--border:#2e3144;--border-focus:#5b6abf;--text:#e4e7f1;--text-secondary:#9298ad;--text-muted:#6b7185;--primary:#5b6abf;--primary-hover:#6e7cd4;--primary-bg:#5b6abf26;--success:#34d399;--success-bg:#34d39926;--error:#f87171;--error-bg:#f8717126;--warning:#fbbf24;--badge-bg:#5b6abf33;--badge-text:#5b6abf;--radius:8px;--radius-lg:12px;--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.6}#app{max-width:860px;margin:0 auto;padding:24px 20px 60px}.hidden{display:none!important}.header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px 0 24px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.logo-icon{width:32px;height:32px;color:var(--primary)}.header-title{color:var(--text);font-size:22px;font-weight:700}.header-desc{color:var(--text-muted);font-size:13px}.upload-section{margin-bottom:24px}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg-card);padding:48px 24px}.drop-zone:hover,.drop-zone.dragover{border-color:var(--primary);background:var(--primary-bg)}.drop-icon{width:48px;height:48px;color:var(--text-muted);margin-bottom:12px}.drop-text{color:var(--text);margin-bottom:4px;font-size:16px;font-weight:600}.drop-subtext{color:var(--text-muted);font-size:13px}.file-info{background:var(--bg-card);border-radius:var(--radius);border:1px solid var(--border);padding:16px 20px}.file-info-row{align-items:center;gap:16px;display:flex}.file-name{color:var(--text);font-weight:600}.file-size{color:var(--text-secondary);font-size:14px}.btn-reset{border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:0 0;margin-left:auto;padding:6px 14px;font-size:13px}.btn-reset:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border-focus)}.section-title{color:var(--text);margin-bottom:16px;font-size:18px;font-weight:700}.options-section{margin-bottom:24px}.options-grid{gap:12px;display:grid}.option-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:all var(--transition);padding:16px 20px}.option-card:hover{border-color:var(--border-focus)}.option-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.toggle-label{cursor:pointer;align-items:center;gap:10px;display:flex}.toggle-label input[type=checkbox]{display:none}.toggle-switch{background:var(--border);width:36px;height:20px;transition:background var(--transition);border-radius:10px;flex-shrink:0;position:relative}.toggle-switch:after{content:"";background:var(--text-muted);width:16px;height:16px;transition:all var(--transition);border-radius:8px;position:absolute;top:2px;left:2px}.toggle-label input:checked+.toggle-switch{background:var(--primary)}.toggle-label input:checked+.toggle-switch:after{background:#fff;left:18px}.toggle-text{color:var(--text);font-size:15px;font-weight:600}.option-badge{background:var(--badge-bg);color:var(--badge-text);border-radius:4px;padding:2px 8px;font-size:12px;font-weight:600}.option-desc{color:var(--text-muted);margin-top:6px;font-size:13px}.option-details{border-top:1px solid var(--border);gap:10px;margin-top:12px;padding-top:12px;display:grid}.option-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.option-row label{color:var(--text-secondary);white-space:nowrap;font-size:13px}.option-row select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);cursor:pointer;outline:none;padding:6px 10px;font-size:13px}.option-row select:focus{border-color:var(--border-focus)}.slider-group{align-items:center;gap:8px;display:flex}.slider-group input[type=range]{width:120px;accent-color:var(--primary);cursor:pointer}.slider-value{color:var(--primary);text-align:right;min-width:24px;font-size:13px;font-weight:600}.action-bar{justify-content:center;margin-top:20px;display:flex}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;align-items:center;gap:8px;padding:12px 32px;font-size:15px;font-weight:600;display:flex}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.progress-section{margin-bottom:24px}.progress-header{justify-content:space-between;align-items:baseline;margin-bottom:16px;display:flex}.progress-step{color:var(--primary);font-size:13px;font-weight:600}.progress-bar-container{background:var(--border);border-radius:3px;width:100%;height:6px;overflow:hidden}.progress-bar{background:var(--primary);border-radius:3px;width:0%;height:100%;transition:width .3s}.progress-detail{color:var(--text-muted);margin-top:8px;font-size:13px}.result-section{margin-bottom:24px}.result-stats{grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:24px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:16px}.stat-label{color:var(--text-muted);margin-bottom:4px;font-size:13px;display:block}.stat-value{color:var(--text);font-size:22px;font-weight:700}.stat-card.ratio .stat-value{color:var(--success)}.stat-card.original .stat-value{color:var(--text-secondary)}.stat-card.compressed .stat-value{color:var(--primary)}.preview-container{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;display:grid}.preview-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.preview-title{border-bottom:1px solid var(--border);color:var(--text);padding:10px 16px;font-size:14px;font-weight:600}.preview-canvas{background:#141620;width:100%;height:320px;position:relative}.preview-canvas canvas{width:100%;height:100%;display:block}.download-bar{justify-content:center;display:flex}.btn-download{background:var(--success);color:#0f1117;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;align-items:center;gap:8px;padding:14px 40px;font-size:16px;font-weight:700;display:flex}.btn-download:hover{opacity:.9;transform:translateY(-1px)}.error-section{margin-bottom:24px}.error-card{background:var(--error-bg);border:1px solid var(--error);border-radius:var(--radius);text-align:center;padding:24px}.error-card svg{color:var(--error);margin-bottom:8px}.error-title{color:var(--error);margin-bottom:4px;font-size:16px;font-weight:700}.error-message{color:var(--text-secondary);font-size:14px}@media (width<=640px){#app{padding:16px 12px 40px}.header{flex-direction:column;align-items:flex-start;gap:4px}.result-stats,.preview-container{grid-template-columns:1fr}.option-row{flex-direction:column;align-items:flex-start;gap:4px}.slider-group input[type=range]{width:100%}}