:root{--bg:#f5f7fa;--surface:#fff;--border:#dce3eb;--text:#526174;--muted:#687789;--strong:#111827;--accent:#2b73e6;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-family:var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.45}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;margin:0}h1,h2,h3,p{overflow-wrap:anywhere}h1{color:var(--strong);letter-spacing:0;font-size:34px;font-weight:760;line-height:1.08}input,button{font:inherit}.app{width:min(1040px,100% - 32px);margin:0 auto;padding:32px 0}.hero{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:22px;display:flex}.hero h1,.dropzone h2,.section-title h2,.progress-block h2,.result-block h2,.set-row h3{color:var(--strong);margin:0}.hero h1{font-size:30px;line-height:1.1}.hero p,.dropzone p,.set-row p,.progress-block p,.result-block p,.idle p{color:var(--muted);margin:6px 0 0}.mode-pill{border:1px solid var(--border);background:var(--surface);color:var(--strong);white-space:nowrap;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}.dropzone,.sets,.compress-panel{border:1px solid var(--border);background:var(--surface);border-radius:8px}.dropzone{border-style:dashed;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;min-height:138px;padding:22px;display:grid}.dropzone.is-dragging{border-color:var(--accent);background:#f4f8ff}.dropzone>svg{width:28px;height:28px;color:var(--accent)}.dropzone h2,.section-title h2,.progress-block h2,.result-block h2{font-size:17px;line-height:1.25}.dropzone p,.set-row p,.progress-block p,.result-block p,.idle p,.section-title span,.message{font-size:14px}.drop-actions,.actions{flex-wrap:wrap;gap:8px;display:flex}button,.download{border:1px solid var(--border);background:var(--surface);min-height:38px;color:var(--strong);cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:0 13px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}button:hover:not(:disabled),.download:hover{background:#f8fafc;border-color:#b7c2d0}button:disabled{opacity:.5;cursor:not-allowed}button svg,.download svg{width:16px;height:16px}.primary,.download{background:var(--accent);border-color:var(--accent);color:#fff}.primary:hover:not(:disabled),.download:hover{background:#185fca;border-color:#185fca}.hidden-input{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}.message{color:#315271;align-items:center;gap:8px;min-height:38px;display:flex}.message.is-error{color:#a23a2d}.message svg{width:16px;height:16px;animation:.9s linear infinite spin}.workarea{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:14px;display:grid}.sets,.compress-panel{overflow:hidden}.section-title{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:14px 16px;display:flex}.section-title span{color:var(--muted);white-space:nowrap}.set-list{max-height:460px;overflow:auto}.set-row{border-bottom:1px solid var(--border);grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-height:62px;padding:12px 16px;display:grid}.set-row:last-child{border-bottom:0}.set-row>svg{color:#6f7f93;width:19px;height:19px}.set-row h3{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.empty,.idle{min-height:160px;color:var(--muted);text-align:center;place-items:center;padding:24px;display:grid}.compress-panel{padding:16px}.progress-block,.result-block{gap:14px;display:grid}.progress-copy p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.progress-meta{color:var(--muted);justify-content:space-between;gap:12px;font-size:13px;display:flex}.progress-track{background:#e8eef5;border-radius:999px;height:9px;overflow:hidden}.progress-track div{border-radius:inherit;background:var(--accent);height:100%;transition:width .12s}.result-block .download{width:100%}.actions{margin-top:18px}.actions button{flex:1 1 0}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=820px){.app{width:min(100% - 24px,1040px);padding:20px 0}.hero,.dropzone,.workarea{grid-template-columns:1fr}.hero,.dropzone{display:grid}.drop-actions button,.actions button{flex:auto}.section-title{flex-direction:column;align-items:flex-start;gap:4px}.section-title span{white-space:normal}}