*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8f9fa;--surface:#fff;--border:#dee2e6;--accent:#3b82f6;--accent-hover:#2563eb;--accent-light:#eff6ff;--text:#1a1a2e;--muted:#6c757d;--success:#22c55e;--warn:#f59e0b;--error:#ef4444;--radius:12px;--shadow:0 2px 8px #00000012}body{background:var(--bg);color:var(--text);flex-direction:column;align-items:center;min-height:100vh;padding:48px 16px 0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}#app{flex-direction:column;flex:1;width:100%;display:flex}.container{flex-direction:column;flex:1;gap:28px;width:100%;max-width:640px;margin:0 auto;display:flex}header{text-align:center}header h1{letter-spacing:-.04em;color:var(--accent);font-size:2.4rem;font-weight:800}.subtitle{color:var(--muted);margin-top:8px;font-size:.95rem;line-height:1.6}.drop-zone{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;outline:none;padding:48px 24px;transition:border-color .2s,background .2s,transform .15s}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--accent);background:var(--accent-light)}.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-light);transform:scale(1.01)}.drop-zone__inner{pointer-events:none;flex-direction:column;align-items:center;gap:12px;display:flex}.drop-icon{width:56px;height:56px;color:var(--accent);opacity:.65}.drop-label{color:var(--text);font-size:1rem}.btn-upload{pointer-events:all;background:var(--accent);color:#fff;cursor:pointer;border-radius:8px;padding:10px 24px;font-size:.9rem;font-weight:600;transition:background .15s;display:inline-block}.btn-upload:hover{background:var(--accent-hover)}.drop-hint{color:var(--muted);font-size:.8rem}.file-list{flex-direction:column;gap:12px;list-style:none;display:flex}.file-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;gap:10px;padding:16px 20px;display:flex}.file-info{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.file-name{white-space:nowrap;text-overflow:ellipsis;max-width:70%;font-size:.9rem;font-weight:600;overflow:hidden}.file-size{color:var(--muted);white-space:nowrap;font-size:.8rem}.file-status{flex-direction:column;gap:6px;display:flex}.progress-bar{background:var(--border);border-radius:99px;height:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:99px;height:100%;transition:width .25s}.progress-fill.done{background:var(--success)}.progress-fill.warn{background:var(--warn)}.progress-fill.error{background:var(--error);width:100%!important}.status-text{color:var(--muted);flex-wrap:wrap;align-items:center;gap:4px;font-size:.82rem;display:flex}.size-before{color:var(--muted);text-decoration:line-through}.arrow{color:var(--muted)}.size-after{color:var(--success);font-weight:700}.size-after.size-warn{color:var(--warn)}.reduction{color:var(--success)}.warn-text{color:var(--warn)}.btn-download{background:var(--accent);color:#fff;border-radius:8px;align-self:flex-end;padding:8px 20px;font-size:.85rem;font-weight:600;text-decoration:none;transition:background .15s;display:inline-block}.btn-download:hover{background:var(--accent-hover)}.btn-download--skip{background:var(--muted)}.btn-download--skip:hover{background:#495057}.footer{text-align:center;width:100%;color:var(--muted);border-top:1px solid var(--border);margin-top:auto;padding:24px 16px 20px;font-size:.78rem}.footer a{color:var(--muted);text-decoration:none}.footer a:hover{color:var(--accent)}.footer-sep{margin:0 6px}@media (width<=480px){header h1{font-size:1.8rem}.drop-zone{padding:36px 16px}}