*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f1117;--surface:#1a1d27;--surface2:#22263a;--border:#2e3350;--accent:#6366f1;--accent-hover:#4f52d8;--accent2:#10b981;--text:#f4f7ff;--text-muted:#b7c3e8;--red:#ef4444;--yellow:#f59e0b;--radius:12px;--radius-sm:8px;font-size:16px}html,body{background:var(--bg);height:100%;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.6}main{flex-direction:column;gap:1.5rem;max-width:800px;margin:0 auto;padding:2rem 1rem 4rem;display:flex}header{text-align:center;padding:1rem 0}header h1{background:linear-gradient(135deg,#818cf8,#34d399);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:700}.subtitle{color:#c4d0f2;margin-top:.25rem;font-size:.875rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.settings{flex-direction:column;gap:1.25rem;display:flex}.setting-row{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.setting-row>label,.setting-label{color:#d5def8;min-width:110px;font-size:.875rem;font-weight:500}.format-buttons{gap:.5rem;display:flex}.format-btn{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--text-muted);cursor:pointer;padding:.375rem 1rem;font-size:.875rem;font-weight:600;transition:all .15s}.format-btn:hover{border-color:var(--accent);color:var(--text)}.format-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.quality-val{width:2ch;color:var(--text);font-weight:700;display:inline-block}.slider{min-width:120px;accent-color:var(--accent);cursor:pointer;flex:1}.size-row .size-inputs{align-items:center;gap:.5rem;display:flex}.resize-controls{flex-wrap:wrap;align-items:flex-start;gap:.5rem;display:flex}.resize-presets{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.custom-resize-section{align-items:center;gap:.5rem;width:100%;padding-top:.125rem;display:flex}.radio-chip{border:1px solid var(--border);background:var(--surface2);color:#d1dbf8;cursor:pointer;border-radius:999px;align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.8125rem;display:inline-flex}.radio-chip input{accent-color:var(--accent)}.radio-chip:has(input:checked){border-color:var(--accent);color:var(--text)}.size-inputs.disabled{opacity:.55}.size-field{align-items:center;gap:.375rem;display:flex}.size-label{color:#d7e0fb;font-size:.8125rem}.num-input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);width:96px;color:var(--text);padding:.375rem .625rem;font-size:.875rem}.num-input:focus{border-color:var(--accent);outline:none}.size-sep{color:#d7e0fb}.dropzone{border:2px dashed var(--border);cursor:pointer;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:200px;transition:all .2s;display:flex}.dropzone.dragging{border-color:var(--accent);background:#6366f114}.drop-icon{font-size:3rem;line-height:1}.drop-text{font-size:1.0625rem;font-weight:600}.drop-sub{color:var(--text-muted);font-size:.8125rem}.file-label{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:.5rem 1.25rem;font-size:.875rem;transition:border-color .15s;display:inline-flex}.file-label:hover{border-color:var(--accent)}.file-input{display:none}.file-list-section{flex-direction:column;gap:1rem;display:flex}.list-header{justify-content:space-between;align-items:center;display:flex}.file-count{color:var(--text-muted);font-size:.875rem}.clear-btn{border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:.25rem .75rem;font-size:.8125rem;transition:all .15s}.clear-btn:hover{border-color:var(--red);color:var(--red)}.file-list{flex-direction:column;gap:.5rem;list-style:none;display:flex}.file-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:.875rem;padding:.75rem;display:flex}.thumb{object-fit:cover;background:var(--surface2);border-radius:6px;flex-shrink:0;width:56px;height:56px}.thumb-fallback{letter-spacing:.04em;color:var(--text-muted);border:1px dashed var(--border);place-items:center;font-size:.625rem;font-weight:700;display:grid}.file-info{flex-direction:column;flex:1;gap:.125rem;min-width:0;display:flex}.file-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:500;overflow:hidden}.file-size{color:var(--text-muted);font-size:.75rem}.file-done{color:var(--accent2);font-size:.75rem}.ratio{color:var(--accent2);font-weight:600}.file-error{color:var(--red);font-size:.75rem}.file-status{flex-shrink:0}.badge{border-radius:99px;padding:.2rem .625rem;font-size:.75rem;font-weight:600;display:inline-block}.badge.idle{background:var(--surface2);color:var(--text-muted)}.badge.processing{color:var(--yellow);background:#f59e0b26}.badge.done{color:var(--accent2);background:#10b98126}.badge.error{color:var(--red);background:#ef444426}.remove-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:.25rem;font-size:.875rem;line-height:1;transition:color .15s}.remove-btn:hover{color:var(--red)}.actions{flex-wrap:wrap;gap:1rem;display:flex}.btn-primary{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.625rem 1.75rem;font-size:.9375rem;font-weight:600;transition:background .15s}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-download{background:var(--accent2);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:.625rem 1.75rem;font-size:.9375rem;font-weight:600;transition:opacity .15s}.btn-download:hover{opacity:.85}.error-popup{z-index:1000;background:var(--surface);border:1px solid var(--red);border-radius:var(--radius-sm);width:calc(100vw - 3rem);max-width:360px;padding:1rem 1.25rem;animation:.2s popup-in;position:fixed;bottom:1.5rem;right:1.5rem;box-shadow:0 8px 24px #00000080}@keyframes popup-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.error-popup-header{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.error-popup-icon{flex-shrink:0;font-size:1.1rem}.error-popup-header strong{color:var(--red);flex:1;font-size:.9rem}.error-popup-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;flex-shrink:0;padding:.15rem .3rem;font-size:.85rem;line-height:1;transition:color .15s}.error-popup-close:hover{color:var(--text)}.error-popup-list{flex-direction:column;gap:.15rem;margin-bottom:.5rem;list-style:none;display:flex}.error-popup-list li{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;overflow:hidden}.error-popup-hint{color:var(--text-muted);border-top:1px solid var(--border);margin-top:.25rem;padding-top:.5rem;font-size:.75rem}@media (width<=480px){.setting-row{flex-direction:column;align-items:flex-start}.resize-controls{width:100%}.size-inputs{flex-wrap:wrap}.actions{flex-direction:column}.btn-primary,.btn-download{text-align:center;width:100%}}