*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--bg-surface: #1a1d27;--bg-surface-hover: #232736;--border: #2a2e3d;--border-accent: #5b6ef5;--text: #e4e6ed;--text-muted: #8b8fa3;--accent: #5b6ef5;--accent-hover: #7381f7;--success: #34d399;--warning: #fbbf24;--error: #f87171;--radius: 12px;--radius-sm: 8px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}@media(prefers-color-scheme:light){:root{--bg: #f5f6fa;--bg-surface: #ffffff;--bg-surface-hover: #f0f1f5;--border: #d8dae5;--border-accent: #5b6ef5;--text: #1a1d27;--text-muted: #6b7085;--accent: #5b6ef5;--accent-hover: #4a5cd4}}html{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.5}body{min-height:100vh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:48px 20px 32px}header{text-align:center;margin-bottom:32px}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.subtitle{color:var(--text-muted);font-size:.95rem;margin-top:4px}footer{text-align:center;padding:20px;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border)}.error{background:color-mix(in srgb,var(--error) 12%,transparent);color:var(--error);border:1px solid color-mix(in srgb,var(--error) 30%,transparent);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:16px;font-size:.9rem;text-align:center}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--bg-surface)}.drop-zone:hover,.drop-zone.dragover{border-color:var(--border-accent);background:color-mix(in srgb,var(--accent) 5%,var(--bg-surface))}.drop-zone__prompt{display:flex;flex-direction:column;align-items:center;gap:8px}.drop-zone__icon{width:48px;height:48px;color:var(--text-muted);margin-bottom:4px}.drop-zone__text{font-size:1.1rem;font-weight:500}.drop-zone__hint{color:var(--text-muted);font-size:.9rem}.drop-zone__formats{color:var(--text-muted);font-size:.8rem;opacity:.7}.controls{margin-top:24px}.file-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.file-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:.88rem;gap:8px}.file-item__thumb{width:40px;height:40px;border-radius:6px;background:var(--bg-surface-hover);flex-shrink:0;overflow:hidden}.file-item__thumb-img{width:100%;height:100%;object-fit:cover}.file-item__info{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap}.file-item__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.file-item__sizes{display:flex;align-items:center;gap:6px;white-space:nowrap;margin-left:auto}.file-item__original{color:var(--text-muted);font-size:.85rem}.file-item__arrow{color:var(--text-muted);font-size:.8rem}.file-item__estimate{color:var(--text-muted);font-weight:500;font-size:.85rem;font-style:italic}.file-item__estimate--ready{color:var(--accent);font-weight:600;font-style:normal}.file-item__remove{background:none;border:none;color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.file-item__remove:hover{color:var(--error);background:color-mix(in srgb,var(--error) 10%,transparent)}.file-summary{color:var(--text-muted);font-size:.82rem;margin-bottom:16px}.options{display:flex;flex-direction:column;gap:20px}.format-selector{border:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.format-selector legend{grid-column:1 / -1;font-size:.85rem;color:var(--text-muted);margin-bottom:4px;font-weight:500}.format-option{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 12px;background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s}.format-option:hover{background:var(--bg-surface-hover)}.format-option:has(input:checked){border-color:var(--border-accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface))}.format-option input{position:absolute;opacity:0;pointer-events:none}.format-option__label{font-weight:600;font-size:.95rem}.format-option__desc{font-size:.75rem;color:var(--text-muted)}.format-info{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:var(--radius-sm);padding:10px 14px;font-size:.82rem;color:var(--text-muted)}.compression-mode-toggle,.naming-mode-toggle{display:flex;gap:2px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;padding:2px;margin-bottom:8px;width:fit-content}.mode-btn{padding:5px 14px;border:none;background:transparent;color:var(--text-muted);font-size:.8rem;font-weight:500;border-radius:4px;cursor:pointer;transition:background .15s,color .15s;font-family:var(--font)}.mode-btn:hover{color:var(--text)}.mode-btn--active{background:var(--accent);color:#fff}.quality-control{display:flex;flex-direction:column;gap:8px}.quality-control label{font-size:.85rem;color:var(--text-muted);font-weight:500}.quality-control label span{color:var(--text);font-weight:600}.slider-wrapper{position:relative;padding-bottom:28px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;padding:0;background:var(--border);border-radius:3px;outline:none;display:block}.slider-marks{position:absolute;top:20px;left:0;right:0;pointer-events:none}.slider-mark{position:absolute;transform:translate(-50%);font-size:.68rem;color:var(--text-muted);font-weight:500;line-height:1}.slider-mark:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:1.5px;height:8px;background:var(--text-muted);border-radius:1px;opacity:.4}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}.target-size-fields{display:flex;align-items:center;gap:8px;margin-top:6px}.target-size-input{width:100px;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.9rem;font-family:var(--font);outline:none;transition:border-color .15s}.target-size-input:focus{border-color:var(--border-accent)}.target-size-unit{padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.9rem;font-family:var(--font);outline:none;cursor:pointer}.exif-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toggle-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted);font-weight:500;cursor:pointer;user-select:none}.toggle-label input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}.toggle-switch{position:relative;width:36px;height:20px;background:var(--border);border-radius:10px;transition:background .2s;flex-shrink:0}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--bg);border-radius:50%;transition:transform .2s}.toggle-label input:checked+.toggle-switch{background:var(--accent)}.toggle-label input:checked+.toggle-switch:after{transform:translate(16px)}.exif-summary{font-size:.78rem;color:var(--text-muted);opacity:.7}.naming-control label{font-size:.85rem;color:var(--text-muted);font-weight:500;display:block;margin-bottom:6px}.naming-mode-toggle{margin-bottom:6px}.naming-fields{display:flex;align-items:center;gap:4px}.naming-input{width:120px;padding:8px 10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.85rem;font-family:var(--font);outline:none;transition:border-color .15s}.naming-input--wide{width:260px}.naming-input:focus{border-color:var(--border-accent)}.naming-input::placeholder{color:var(--text-muted);opacity:.5}.naming-original{color:var(--text-muted);font-size:.8rem;font-style:italic;padding:0 4px;white-space:nowrap}.naming-hint{color:var(--text-muted);font-size:.72rem;opacity:.6;white-space:nowrap}.hidden{display:none!important}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:background .15s,transform .1s}.btn:hover{text-decoration:none}.btn:active{transform:scale(.98)}.btn--primary{background:var(--accent);color:#fff;margin-top:20px;width:100%}.btn--primary:hover{background:var(--accent-hover)}.btn--secondary{background:var(--bg-surface);color:var(--text);border:1px solid var(--border)}.btn--secondary:hover{background:var(--bg-surface-hover)}.btn--small{padding:6px 16px;font-size:.82rem;border-radius:6px;background:var(--accent);color:#fff;flex-shrink:0}.btn--small:hover{background:var(--accent-hover)}.progress{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px;color:var(--text-muted)}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results{margin-top:24px}.results-list{display:flex;flex-direction:column;gap:8px}.result-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;gap:10px}.result-item--error{border-color:color-mix(in srgb,var(--error) 40%,var(--border))}.result-item__top{display:flex;align-items:center;justify-content:space-between;gap:12px}.result-item__name{font-weight:500;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.result-item__bottom{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.result-item__original{color:var(--text-muted);font-size:.95rem}.result-item__arrow{color:var(--text-muted)}.result-item__compressed{font-size:1.1rem;font-weight:700;color:var(--text)}.result-item__ratio{font-weight:700;font-size:.9rem;white-space:nowrap;margin-left:auto}.result-item__ratio.great{color:var(--success)}.result-item__ratio.good{color:var(--accent)}.result-item__ratio.bad{color:var(--warning)}.result-item__error{color:var(--error);font-size:.85rem}.results-summary{text-align:center;padding:16px 0;font-size:.95rem}.results-summary .great{color:var(--success);font-weight:700}.results-summary .good{color:var(--accent);font-weight:700}.results-summary .bad{color:var(--warning);font-weight:700}.results__actions{margin-top:8px;display:flex;gap:12px}.results__actions .btn{flex:1;margin-top:0}body[data-state=idle] #controls,body[data-state=idle] #progress,body[data-state=idle] #results,body[data-state=loaded] #progress,body[data-state=loaded] #results,body[data-state=compressing] .drop-zone,body[data-state=compressing] #controls,body[data-state=compressing] #results,body[data-state=done] .drop-zone,body[data-state=done] #controls,body[data-state=done] #progress{display:none}@media(max-width:768px){main{padding:24px 16px}h1{font-size:1.4rem}.drop-zone{padding:32px 16px}.format-selector{grid-template-columns:repeat(2,1fr)}.naming-input--wide{width:180px}.result-item{flex-direction:column;align-items:flex-start}}