:root{color-scheme:light dark;--bg: #f2f3f7;--bg-accent: #d8e1ff;--card: #ffffff;--ink: #0a0f1f;--muted: #556078;--accent: #1b5cff;--accent-soft: #d7e3ff;--success: #0d7a4e;--danger: #b42318;--shadow: 0 20px 60px rgba(10, 15, 31, .14);--radius: 18px;font-family:Space Grotesk,Fira Sans,Avenir Next,sans-serif}:root[data-theme=dark]{--bg: #0d1117;--bg-accent: #1c2128;--card: #161b22;--ink: #e6edf3;--muted: #8b949e;--accent: #4f93ff;--accent-soft: #1f3d66;--success: #2ea043;--danger: #f85149;--shadow: 0 20px 60px rgba(0, 0, 0, .4)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0d1117;--bg-accent: #1c2128;--card: #161b22;--ink: #e6edf3;--muted: #8b949e;--accent: #4f93ff;--accent-soft: #1f3d66;--success: #2ea043;--danger: #f85149;--shadow: 0 20px 60px rgba(0, 0, 0, .4)}}*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:rgba(10,15,31,.2) transparent}html::-webkit-scrollbar{width:10px;height:10px}html::-webkit-scrollbar-track{background:transparent}html::-webkit-scrollbar-thumb{background:#0a0f1f33;border-radius:5px;transition:background .2s ease}html::-webkit-scrollbar-thumb:hover{background:#0a0f1f59}html::-webkit-scrollbar-corner{background:transparent}:root[data-theme=dark] html{scrollbar-color:rgba(230,237,243,.2) transparent}:root[data-theme=dark] html::-webkit-scrollbar-thumb{background:#e6edf333}:root[data-theme=dark] html::-webkit-scrollbar-thumb:hover{background:#e6edf359}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) html{scrollbar-color:rgba(230,237,243,.2) transparent}:root:not([data-theme=light]) html::-webkit-scrollbar-thumb{background:#e6edf333}:root:not([data-theme=light]) html::-webkit-scrollbar-thumb:hover{background:#e6edf359}}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 10%,#fef6e8,transparent 40%),radial-gradient(circle at 90% 20%,var(--bg-accent),transparent 40%),var(--bg);min-height:100vh}.page{max-width:1100px;margin:0 auto;padding:24px 24px 12px;display:flex;flex-direction:column;gap:32px}.hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}.hero-copy{flex:1 1 420px}.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.hero-actions{display:flex;gap:8px}.tag{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}h1{font-size:clamp(2.4rem,4vw,3.4rem);margin:0 0 12px}.lede{max-width:520px;color:var(--muted);margin:0}.hero-card{background:var(--card);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);min-width:240px;display:grid;gap:12px}.stat{display:flex;justify-content:space-between;font-size:.95rem}.controls{display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(260px,.9fr);gap:24px;align-items:start}.dropzone{background:linear-gradient(135deg,#fff,#f0f4ff);border-radius:var(--radius);padding:32px;border:1px dashed rgba(27,92,255,.4);display:flex;align-items:center;gap:16px;cursor:pointer;position:relative;transition:transform .2s ease,box-shadow .2s ease;height:100%}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone.dragover{transform:translateY(-2px);box-shadow:var(--shadow)}.control-panel{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:20px;max-height:calc(100vh - 420px);position:sticky;top:24px}.control-panel-scroll{display:flex;flex-direction:column;gap:20px;overflow:auto;padding-right:6px;margin-right:-6px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:rgba(10,15,31,.2) transparent}.control-panel-scroll::-webkit-scrollbar{width:8px}.control-panel-scroll::-webkit-scrollbar-track{background:transparent;border-radius:4px}.control-panel-scroll::-webkit-scrollbar-thumb{background:#0a0f1f33;border-radius:4px;transition:background .2s ease}.control-panel-scroll::-webkit-scrollbar-thumb:hover{background:#0a0f1f59}:root[data-theme=dark] .control-panel-scroll{scrollbar-color:rgba(230,237,243,.2) transparent}:root[data-theme=dark] .control-panel-scroll::-webkit-scrollbar-thumb{background:#e6edf333}:root[data-theme=dark] .control-panel-scroll::-webkit-scrollbar-thumb:hover{background:#e6edf359}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .control-panel-scroll{scrollbar-color:rgba(230,237,243,.2) transparent}:root:not([data-theme=light]) .control-panel-scroll::-webkit-scrollbar-thumb{background:#e6edf333}:root:not([data-theme=light]) .control-panel-scroll::-webkit-scrollbar-thumb:hover{background:#e6edf359}}.preset-container{display:flex;flex-direction:column;gap:10px}.preset-container label{font-weight:600;font-size:.95rem}.preset-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.preset-btn{padding:10px 8px;border:1px solid rgba(10,15,31,.15);background:var(--bg);border-radius:10px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;text-align:center}.preset-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.preset-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}.preset-description{font-size:.8rem;color:var(--muted);margin:0;min-height:1.2em}.mode-selector{display:flex;flex-direction:column;gap:10px}.mode-selector label{font-weight:600;font-size:.95rem}.mode-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.mode-btn{padding:10px;border:1px solid rgba(10,15,31,.15);background:var(--bg);border-radius:10px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;text-align:center}.mode-btn:hover{border-color:var(--accent);background:var(--accent-soft)}.mode-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}.target-size-container{display:flex;flex-direction:column;gap:10px}.target-size-container label{font-weight:600;font-size:.95rem}.target-size-row{display:flex;gap:8px;align-items:center}.target-size-row input[type=number]{flex:1;padding:8px 12px;border:1px solid rgba(10,15,31,.2);border-radius:8px;font-size:.95rem;background:var(--bg);color:var(--ink)}.target-size-row select{padding:8px 12px;border:1px solid rgba(10,15,31,.2);border-radius:8px;font-size:.95rem;background:var(--bg);color:var(--ink);cursor:pointer}.target-size-hint{font-size:.8rem;color:var(--muted);margin:0}.resize-container{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bg);border-radius:10px}.resize-label{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;cursor:pointer;user-select:none}.resize-controls{display:flex;gap:8px;align-items:center}.resize-select{flex:1;padding:8px 12px;border:1px solid rgba(10,15,31,.2);border-radius:8px;font-size:.9rem;background:var(--card);color:var(--ink);cursor:pointer}.resize-input{width:80px;padding:8px 12px;border:1px solid rgba(10,15,31,.2);border-radius:8px;font-size:.9rem;background:var(--card);color:var(--ink)}.resize-unit{font-size:.9rem;color:var(--muted);min-width:24px}.slider label{font-weight:600}.slider-row{display:flex;align-items:center;gap:12px;margin-top:10px}.slider-row input[type=range]{flex:1}.toggle-grid{display:grid;gap:12px}.toggle{display:flex;align-items:center;gap:12px;font-size:.95rem;color:var(--muted)}.actions{display:flex;gap:12px;position:sticky;bottom:0;background:var(--card);padding-top:8px}button{border:none;border-radius:999px;padding:10px 18px;font-weight:600;font-family:inherit;cursor:pointer}button.primary{background:var(--accent);color:#fff}button.ghost{background:transparent;border:1px solid rgba(10,15,31,.2);color:var(--ink)}button.ghost.danger{border-color:#b4231866;color:var(--danger)}.lang-toggle,.theme-toggle{padding:8px 12px;min-width:44px;display:flex;align-items:center;justify-content:center}.theme-icon-dark{display:none}:root[data-theme=dark] .theme-icon-dark{display:inline}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .theme-icon-dark{display:inline}}:root[data-theme=dark] .theme-icon-light{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .theme-icon-light{display:none}}button:disabled{opacity:.5;cursor:not-allowed}.privacy{font-size:.85rem;color:var(--muted);margin:0}.queue{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.queue-header{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px}.file-list{display:grid;gap:12px;margin-top:18px}.file-row{border:1px solid rgba(10,15,31,.08);border-radius:14px;padding:16px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:12px;align-items:center}.row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.file-name{font-weight:600}.file-meta{font-size:.85rem;color:var(--muted)}.file-status{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.file-status.done{color:var(--success)}.file-status.error{color:var(--danger)}.file-status.aborted{color:#8b6a00}.footer{text-align:center;color:var(--muted);font-size:.9rem}@media (max-width: 900px){.controls{grid-template-columns:1fr}.control-panel{max-height:none;position:static}.control-panel-scroll{overflow:visible;padding-right:0;margin-right:0}.preset-buttons{grid-template-columns:repeat(2,1fr)}.file-row{grid-template-columns:1fr}.actions{flex-direction:column}.hero-side{align-items:flex-start}.hero-actions,.lang-toggle,.theme-toggle{align-self:flex-start}}.preview-btn{padding:8px 14px;font-size:.85rem}.preview-modal{position:fixed;inset:0;background:#0a0f1f99;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.preview-modal.active{opacity:1;visibility:visible}.preview-modal-content{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(10,15,31,.08);max-width:90vw;max-height:90vh;width:760px;display:flex;flex-direction:column;overflow:hidden;transform:translateY(8px) scale(.98);transition:transform .2s ease,box-shadow .2s ease}.preview-modal.active .preview-modal-content{transform:translateY(0) scale(1)}.preview-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 24px;border-bottom:1px solid rgba(10,15,31,.08)}.preview-modal-header h3{margin:0;font-size:1.2rem}.preview-modal-close{background:transparent;border:none;cursor:pointer;padding:8px;color:var(--muted);display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease,color .2s ease}.preview-modal-close:hover{color:var(--ink);background:#0a0f1f0d}.preview-modal-body{padding:10px;overflow:auto;flex:1}.preview-compare-container{position:relative;width:100%;aspect-ratio:16 / 10;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#f8f9fb,#eef1f6);cursor:pointer;user-select:none}.preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .2s ease-in;user-select:none;-webkit-user-drag:none}#previewOriginal{z-index:1}#previewCompressed{z-index:2;clip-path:inset(0 50% 0 0);transition:clip-path .05s ease-out,opacity .2s ease-in}.preview-slider-overlay{position:absolute;inset:0;pointer-events:none;z-index:3;user-select:none}.preview-slider-handle{position:absolute;top:0;bottom:0;left:50%;display:flex;flex-direction:column;align-items:center;pointer-events:auto;cursor:ew-resize;transform:translate(-50%);user-select:none}.preview-slider-line{width:2px;height:100%;background:#fffc;box-shadow:0 0 4px #0003}.preview-slider-button{width:40px;height:40px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #00000026;font-size:1.2rem;position:absolute;top:50%;transform:translateY(-50%)}.preview-label{position:absolute;bottom:12px;padding:6px 12px;background:#0009;color:#fff;font-size:.8rem;border-radius:6px;pointer-events:none;z-index:5}.preview-label-original{left:12px}.preview-label-compressed{right:12px}.preview-modal-footer{padding:16px 24px;border-top:1px solid rgba(10,15,31,.08);text-align:center;color:var(--muted);font-size:.9rem}@media (max-width: 768px){.preview-modal-content{width:95vw;max-height:85vh}.preview-compare-container{aspect-ratio:4 / 3}.preview-modal-header{padding:16px 20px}.preview-modal-body{padding:16px}}.confirm-dialog{position:fixed;inset:0;background:#0a0f1f80;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1100;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.confirm-dialog.active{opacity:1;visibility:visible}.confirm-dialog-content{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(10,15,31,.1);max-width:420px;width:90vw;display:flex;flex-direction:column;overflow:hidden;transform:scale(.95);transition:transform .2s ease}.confirm-dialog.active .confirm-dialog-content{transform:scale(1)}.confirm-dialog-header{padding:20px 24px 12px}.confirm-dialog-header h3{margin:0;font-size:1.2rem;color:var(--ink)}.confirm-dialog-body{padding:12px 24px 20px}.confirm-dialog-body p{margin:0;color:var(--muted);line-height:1.5}.confirm-dialog-footer{padding:16px 24px;background:#0a0f1f05;border-top:1px solid rgba(10,15,31,.08);display:flex;gap:12px;justify-content:flex-end}.confirm-dialog-footer .ghost,.confirm-dialog-footer .primary{min-width:80px}@media (prefers-color-scheme: dark){.confirm-dialog-footer{background:#ffffff08;border-top-color:#ffffff14}}[data-theme=dark] .confirm-dialog-footer{background:#ffffff08;border-top-color:#ffffff14}