:root{color-scheme:dark;--bg: #101215;--shell: #17191c;--surface: #202327;--surface-hover: #292d32;--surface-selected: #24282d;--border: #30343a;--border-strong: #454c55;--text-primary: #eceef1;--text-secondary: #9aa3af;--text-tertiary: #707985;--accent: #0085ff;--accent-strong: #0077ee;--success: #31d477;--danger: #f18d86;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-xs: 3px;--radius-sm: 6px;--radius-md: 8px;--radius-window: 16px;--control-height: 36px;--arrow-size: 16px;--arrow-stroke: 1.5px;--inspector-width: 360px;--scrollbar-width: 8px;--scrollbar-edge-offset: 2px;--community-footer-height: 36px;--community-footer-inset: calc(var(--community-footer-height) + env(safe-area-inset-bottom, 0px))}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,sans-serif;font-size:14px;line-height:20px;color:var(--text-primary);background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button,input,select{outline:none}button{transition:background .12s ease,border-color .12s ease,color .12s ease}button:disabled,input:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:hover,button:active{transform:none}svg{flex-shrink:0;vertical-align:middle}.page-backdrop{width:100%;height:100%}.browser-preview-backdrop{height:calc(100% - var(--community-footer-inset));display:grid;place-items:start stretch;overflow:auto}.app-shell{width:100%;min-width:0;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--shell);position:relative}.browser-preview-shell{height:calc(100dvh - var(--community-footer-inset));min-height:520px;border:0;border-radius:0;box-shadow:none;overflow:hidden}.native-app-shell{border:0;border-radius:0}.app-header{height:56px;padding:0 var(--space-5);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--border)}.app-brand{display:flex;align-items:center;gap:var(--space-4);min-width:0}.brand-lockup{display:inline-flex;align-items:center;gap:var(--space-3)}.brand-mark{width:28px;height:28px;flex:0 0 28px}.wordmark{font-size:12px;line-height:16px;font-weight:400;letter-spacing:.36em}.brand-description{padding-left:var(--space-4);border-left:1px solid var(--border-strong);color:var(--text-secondary);font-size:12px}.titlebar-badge{font-size:10px;letter-spacing:.06em;color:var(--text-secondary);border:1px solid var(--border);border-radius:999px;padding:4px 12px;white-space:nowrap}.workspace-grid{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--inspector-width)}.left-column,.right-column{min-width:0;min-height:0}.right-column{border-left:1px solid var(--border)}.panel{min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}.files-panel{grid-template-rows:auto minmax(0,1fr) auto}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-4)}.panel-header h2{margin:0;font-size:18px;font-weight:600;line-height:24px;letter-spacing:-.025em}.panel-header-actions{display:flex;align-items:center;gap:var(--space-5);color:var(--text-secondary);font-size:12px;white-space:nowrap}.panel-header-actions .link-button{border-left:1px solid var(--border);padding-left:var(--space-5)}.link-button{background:none;border:0;padding:0;font-size:12px;color:var(--text-secondary)}.link-button:hover:not(:disabled){color:var(--text-primary)}.file-list,.settings-grid{overflow:auto;min-height:0;padding:0 16px var(--space-4) var(--space-5);scrollbar-gutter:stable}.app-scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.app-scrollbar::-webkit-scrollbar-track{background:var(--surface);border-radius:999px;border:2px solid transparent;background-clip:padding-box;margin:4px 0}.app-scrollbar::-webkit-scrollbar-thumb{background:#515862;border:2px solid transparent;background-clip:padding-box;border-radius:999px;min-height:32px}.app-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#707a86}.file-row{position:relative;display:flex;align-items:center;min-height:76px;border:1px solid transparent;border-bottom-color:var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-2);overflow:hidden}.file-row.selected{background:var(--surface);border-color:#ffffff06}.file-row:hover{background:var(--surface-hover)}.file-select{background:none;border:0;padding:var(--space-3);flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-4);text-align:left;border-radius:var(--radius-md)}.file-select:focus-visible{outline-offset:-3px}.thumb{width:52px;height:52px;border-radius:var(--radius-sm);object-fit:cover;display:grid;place-items:center;background:var(--bg);color:var(--text-tertiary);flex:0 0 auto}.file-meta{display:grid;min-width:0;gap:1px}.file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:550;line-height:20px}.file-details{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);color:var(--text-secondary);font-size:12px;line-height:17px;font-variant-numeric:tabular-nums}.file-details.secondary{color:#c8cdd5}.file-details.file-error{color:var(--danger);overflow-wrap:anywhere}.dot{color:var(--text-tertiary)}.file-actions{display:flex;align-items:center;gap:var(--space-3);padding-right:var(--space-3)}.success-mark{color:var(--success);display:inline-flex}.remove-file{border-left:1px solid var(--border-strong)!important;border-radius:0!important}.file-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--accent);transition:width .18s ease}.files-empty-state{min-height:200px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-tertiary);gap:var(--space-2)}.files-empty-state p{margin:0}.files-empty-state-title{font-size:14px;color:var(--text-secondary)}.files-empty-state-copy{font-size:12px;max-width:260px}.drop-zone{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin:var(--space-4) var(--space-5) var(--space-5);padding:var(--space-4);border:1px dashed var(--border-strong);border-radius:var(--radius-md)}.drop-browse{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;border-radius:var(--radius-sm)}.drop-plus{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface-hover);color:#cbd1d8;flex:0 0 auto}.drop-copy{display:grid;gap:var(--space-1);min-width:0}.drop-zone-title{font-size:14px;font-weight:500;line-height:20px}.drop-zone-subtitle{color:var(--text-secondary);font-size:12px;line-height:18px}.drop-zone.drag-over{border-color:var(--accent);background:#0085ff0a}.app-shell.global-drag-over:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--accent);border-radius:inherit;background:#0085ff06;pointer-events:none;z-index:10}.files-panel.drag-over .drop-zone{border-color:var(--accent)}.secondary-button,.primary-button,.icon-button{min-height:var(--control-height);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-3);font-size:13px;line-height:20px;font-weight:500;white-space:nowrap}.secondary-button,.icon-button{background:var(--surface);border:1px solid var(--border-strong);color:var(--text-primary)}.secondary-button:hover:not(:disabled),.icon-button:hover:not(:disabled){background:var(--surface-hover);border-color:#626b78}.primary-button{background:var(--accent-strong);border:1px solid var(--accent);padding-inline:var(--space-5);color:#fff}.primary-button:hover:not(:disabled){background:var(--accent)}.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled){filter:brightness(.9)}.icon-button{width:var(--control-height);padding:0}.remove-file{background:none;border-top:0;border-bottom:0;border-right:0;color:var(--text-secondary)}.action-menu{position:relative;flex-shrink:0}.action-menu-popover{position:absolute;bottom:calc(100% + 8px);right:0;width:180px;padding:var(--space-1);display:grid;gap:var(--space-1);background:#24282e;border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:0 8px 24px #0006;z-index:20}.action-menu-popover button{text-align:left;background:none;border:0;border-radius:var(--radius-xs);padding:8px 12px;font-size:13px}.action-menu-popover button:hover:not(:disabled){background:var(--surface-hover)}.settings-grid{padding-top:var(--space-2)}.settings-group{margin-bottom:var(--space-5)}.settings-group:last-child{margin:0}.settings-group-body--flat{display:grid;gap:var(--space-5)}.settings-section-label{display:block;color:var(--text-secondary);font-weight:500;text-transform:uppercase;font-size:10px;line-height:16px;letter-spacing:.1em;margin:0 0 var(--space-3)}.form-row{display:grid;gap:var(--space-2);min-width:0}.form-row-section{gap:0}.field-label{color:var(--text-secondary);font-size:12px;line-height:18px;font-weight:500}.settings-output-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.output-copy{flex:1;min-width:0}.save-destination{margin:0;padding:0 var(--space-3);min-height:var(--control-height);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);display:flex;align-items:center;gap:var(--space-3);font-size:13px;overflow-wrap:anywhere;color:var(--text-primary)}.settings-group-body--toggles{border-top:1px solid var(--border)}.settings-toggle-section{border-bottom:1px solid var(--border)}.settings-toggle-section:last-child{border-bottom:0}.settings-accordion-toggle{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:48px;background:none;border:0;padding:var(--space-3) 0;text-align:left;border-radius:var(--radius-xs)}.settings-accordion-toggle>svg{color:#b5bdc8}.settings-accordion-toggle:hover{background:#ffffff03}.settings-accordion-title{font-size:14px;font-weight:450;flex:1;min-width:0}.settings-accordion-summary{font-size:12px;color:var(--text-secondary);max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.settings-toggle-content{display:grid;gap:var(--space-4);padding:var(--space-2) 0 var(--space-5)}.settings-card{border:0;background:none;border-radius:0}.settings-control-group{min-width:0}.two-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3)}.select-menu-trigger,.settings-grid input[type=number],.settings-grid input[type=text]{width:100%;min-width:0;height:var(--control-height);padding:0 var(--space-3);border:1px solid var(--border-strong);background:#1b1e22;border-radius:var(--radius-sm);font-size:13px;color:var(--text-primary)}.select-menu-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.select-menu-trigger:hover:not(:disabled),.select-menu-trigger.open{background:var(--surface);border-color:#626b78}.select-menu-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-arrow{width:var(--arrow-size);height:var(--arrow-size);flex:0 0 var(--arrow-size);stroke-width:var(--arrow-stroke)}svg.ui-chevron{color:var(--text-secondary);transition:transform .12s ease}.ui-chevron-up{transform:rotate(180deg)}.ui-chevron-right{transform:rotate(-90deg)}.select-menu-popover{position:fixed;z-index:100}.select-menu-popover.top{transform:translateY(-100%)}.select-menu-surface{max-height:260px;overflow:auto;display:grid;gap:var(--space-1);padding:var(--space-1);background:#24282e;border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:0 8px 24px #0006}.select-menu-option{width:100%;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:var(--space-2);min-height:36px;padding:8px 12px;background:none;border:0;border-radius:var(--radius-xs);color:var(--text-primary);font-size:13px;text-align:left}.select-menu-option:hover,.select-menu-option.selected{background:#343a42}.select-menu-option-check{color:var(--accent)}.number-input-wrap{position:relative}.settings-grid .number-input-wrap input{padding-right:40px;-moz-appearance:textfield}.number-input-wrap input::-webkit-inner-spin-button,.number-input-wrap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-stepper{position:absolute;top:1px;right:1px;bottom:1px;width:28px;display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--border)}.number-step{border:0;background:none;border-radius:0;display:grid;place-items:center;padding:0}.number-step:hover{background:var(--surface-hover)}.settings-grid input::placeholder{color:var(--text-tertiary)}.check-row{display:flex;align-items:center;gap:var(--space-2);font-size:12px;line-height:20px;color:#c8cdd5;cursor:pointer}.check-row input{accent-color:var(--accent);width:14px;height:14px;margin:0;flex:0 0 auto}.radio-group{display:grid;gap:var(--space-2)}.label-with-value{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:12px}.settings-grid input[type=range]{width:100%;margin:4px 0;height:18px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;cursor:pointer}.settings-grid input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--border-strong);border-radius:999px}.settings-grid input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;margin-top:-5px}.settings-grid input[type=range]::-moz-range-track{height:2px;background:var(--border-strong)}.settings-grid input[type=range]::-moz-range-thumb{height:12px;width:12px;background:var(--accent);border:0}.range-hints{display:flex;justify-content:space-between;color:var(--text-tertiary);font-size:11px}.color-row{display:flex;align-items:center;gap:var(--space-3);font-size:12px;color:var(--text-secondary)}.color-input{width:36px;height:28px;padding:2px;border:1px solid var(--border-strong);background:var(--surface);border-radius:var(--radius-xs)}.naming-simple-layout{display:grid;gap:var(--space-4)}.naming-separator-input{max-width:56px}.naming-preview-card{border-top:1px solid var(--border);padding-top:var(--space-3);display:grid;gap:var(--space-2);min-width:0}.naming-preview-label{color:var(--text-secondary);font-size:12px}.naming-preview-value{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-switch-row{display:flex;align-items:center;justify-content:space-between;position:relative;min-height:28px;cursor:pointer;font-size:13px}.settings-switch-row input{position:absolute;right:0;opacity:0;width:32px;height:20px;margin:0}.switch-track{display:inline-flex;align-items:center;padding:2px;width:32px;height:20px;background:var(--border-strong);border-radius:999px}.switch-thumb{width:16px;height:16px;border-radius:50%;background:#eff1f4}.switch-track.is-on{background:var(--accent)}.switch-track.is-on .switch-thumb{transform:translate(12px)}.settings-switch-row:focus-within .switch-track{outline:2px solid var(--accent);outline-offset:2px}.footer-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-5);border-top:1px solid var(--border);min-height:80px}.batch-summary{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.batch-summary>svg{color:var(--text-secondary)}.result-size{color:var(--text-primary)}.savings{color:var(--accent)}.savings.size-increased{color:#dfad73}.compression-note{margin:0;color:var(--text-secondary);font-size:12px;line-height:1.5}.footer-actions{display:flex;align-items:center;gap:var(--space-3)}.processing-copy{font-size:12px}.progress-group-bar{position:absolute;top:0;left:0;width:100%;height:2px;overflow:hidden;background:var(--border)}.progress-group-fill{display:block;height:100%;background:var(--accent);transition:width .18s ease}.conversion-error{margin:0;grid-column:1 / -1;color:var(--danger);font-size:12px;overflow-wrap:anywhere}.community-footer{position:fixed;inset:auto 0 0;z-index:50;height:var(--community-footer-inset);padding:0 var(--space-5) env(safe-area-inset-bottom,0px);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--border);background:#141619;color:var(--text-secondary);font-size:11px;line-height:16px}.community-footer a{color:var(--text-secondary);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}.community-footer a:hover{color:var(--text-primary);text-decoration-color:currentColor}.community-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-xs)}@media (max-width: 1050px){.browser-preview-shell .workspace-grid{--inspector-width: 300px}.browser-preview-shell .drop-zone{flex-wrap:wrap}}@media (max-width: 720px){.browser-preview-backdrop{padding:0;overflow:auto}.browser-preview-shell{height:auto;min-height:calc(100dvh - var(--community-footer-inset));border:0;border-radius:0;overflow:visible}.community-footer{padding-inline:var(--space-4);gap:var(--space-2);font-size:10px}.browser-preview-shell .app-header{padding-inline:var(--space-4)}.browser-preview-shell .brand-description{display:none}.browser-preview-shell .workspace-grid{grid-template-columns:minmax(0,1fr)}.browser-preview-shell .left-column{min-height:340px}.browser-preview-shell .right-column{border-left:0;border-top:1px solid var(--border)}.browser-preview-shell .panel-header{padding:var(--space-4)}.browser-preview-shell .file-list,.browser-preview-shell .settings-grid{padding-left:var(--space-4);padding-right:var(--space-2)}.browser-preview-shell .file-list{max-height:420px}.browser-preview-shell .settings-grid{overflow:visible}.browser-preview-shell .drop-zone{margin:var(--space-4)}.browser-preview-shell .footer-row{padding:var(--space-4);grid-template-columns:minmax(0,1fr);gap:var(--space-4)}.browser-preview-shell .footer-actions{justify-content:flex-end}.browser-preview-shell .file-actions{gap:var(--space-1);padding-right:var(--space-1)}.browser-preview-shell .file-details{gap:4px;font-size:11px}.browser-preview-shell .thumb{width:44px;height:44px}.browser-preview-shell .file-select{gap:var(--space-3);padding:var(--space-2)}.browser-preview-shell .drop-zone-title{font-size:13px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}