@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=JetBrains+Mono:wght@100..800&family=Khand:wght@300;400;500;600;700&display=swap";.file-loader{max-width:560px;margin:0 auto;border:1px solid var(--border-strong);background:var(--bg-surface);border-radius:var(--radius-sm);padding:64px 32px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:all .3s var(--ease-out);&:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(var(--accent-ch),.05) 10px,rgba(var(--accent-ch),.05) 20px);opacity:0;transition:opacity .3s var(--ease-out)}&:hover,&[data-dragging]{border-color:var(--accent);background:var(--bg-raised);box-shadow:4px 4px 0 var(--accent)}&:hover:before,&[data-dragging]:before{opacity:1}&[data-dragging]{transform:translate(-4px,-4px)}.content{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:2}.icon{color:var(--text-primary);transition:color .3s,transform .3s var(--ease-out);animation:floatBounce .6s var(--ease-out) .2s both}&:hover .icon,&[data-dragging] .icon{color:var(--accent);transform:translateY(-4px) scale(1.1)}.heading{font-family:var(--font-display);font-size:24px;font-weight:800;color:var(--text-primary);margin:0;text-transform:uppercase;letter-spacing:-.5px;animation:fadeInUp .4s var(--ease-out) .15s both}.subheading{font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin:-8px 0 0;text-transform:uppercase}.formats{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.format-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-primary);background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:4px 8px;letter-spacing:.5px;text-transform:uppercase;animation:popIn .35s var(--ease-out) both;transition:all .15s;&:nth-child(1){animation-delay:.25s}&:nth-child(2){animation-delay:.3s}&:nth-child(3){animation-delay:.35s}&:nth-child(4){animation-delay:.4s}&:nth-child(5){animation-delay:.45s}&:nth-child(6){animation-delay:.5s}&:nth-child(7){animation-delay:.55s}&:nth-child(8){animation-delay:.6s}}.browse-btn{margin-top:16px;padding:12px 32px;background:var(--text-primary);color:var(--bg-root);border:none;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s;animation:fadeInUp .4s var(--ease-out) .65s both;&:hover{background:var(--accent);color:var(--bg-root);transform:translateY(-2px);box-shadow:0 4px 16px var(--accent-glow)}&:active{transform:translateY(0)}}}@keyframes floatBounce{0%{opacity:0;transform:translateY(16px) scale(.9)}60%{transform:translateY(-3px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}.preview{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;.viewport{width:100%;height:100%;background:#000;cursor:pointer;display:block}.viewport-frame{display:flex;align-items:center;justify-content:center;overflow:hidden}.viewport-zoom{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.viewport-stage{position:relative;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}.controls{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}.play-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-raised);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s;&:hover{background:var(--bg-overlay);border-color:var(--border-strong)}svg{width:16px;height:16px}}.timecode{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-secondary);letter-spacing:.5px;font-variant-numeric:tabular-nums}.timecode-sep{color:var(--text-muted);margin:0 2px}}.compare-view{flex:1;position:relative;background:var(--bg-root);overflow:hidden;cursor:default;user-select:none;animation:fadeIn .3s var(--ease-out) both;border:1px solid var(--border-default);.compare-media{width:100%;height:100%;background:transparent}.compare-overlay{position:absolute;inset:0}.compare-divider{position:absolute;top:0;bottom:0;width:32px;transform:translate(-50%);cursor:col-resize;z-index:3;display:flex;align-items:center;justify-content:center;&:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);transform:translate(-50%);box-shadow:0 0 16px var(--accent-glow)}.compare-grip{width:32px;height:32px;background:var(--bg-root);border:2px solid var(--accent);border-radius:0;box-shadow:0 4px 8px #000c;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center;transform:rotate(45deg);&:before{content:"↔";display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:16px;font-weight:700;color:var(--accent);line-height:1;transform:rotate(-45deg)}}}.compare-label{position:absolute;top:16px;right:16px;padding:6px 12px;background:var(--bg-surface);border:1px solid var(--border-default);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-secondary);pointer-events:none;z-index:4;animation:fadeInUp .35s var(--ease-out) .15s both;text-transform:uppercase}.compare-ratio-badge{position:absolute;bottom:16px;left:50%;padding:8px 16px;background:var(--bg-surface);border:1px solid var(--accent);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent);pointer-events:none;z-index:5;animation:badgePopIn .4s var(--ease-spring) .25s both;box-shadow:4px 4px 0 var(--accent-glow);text-transform:uppercase}}@keyframes badgePopIn{0%{opacity:0;transform:translate(-50%) translateY(20px) scale(.9)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.info-tip-text{max-width:280px;padding:10px 12px;background:#080808f5;border:1px solid rgba(var(--accent-ch),.22);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.45;color:#f8f8f8;letter-spacing:.01em;white-space:normal;z-index:1000;text-wrap:pretty;box-shadow:0 14px 30px #00000080;backdrop-filter:blur(10px);animation:popoverIn .15s var(--ease-out)}.slider-bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none;&:before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fill);background:var(--accent);opacity:.15;pointer-events:none;will-change:width;border-right:2px solid var(--accent)}&:hover:before{opacity:.25}.slider-bar-label{position:relative;color:var(--text-primary);pointer-events:none}.slider-bar-value{position:relative;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);pointer-events:none;margin-left:8px;background:#00000080;padding:2px 6px;border:1px solid var(--accent-border);border-radius:var(--radius-sm)}&.disabled{opacity:.4;pointer-events:none}}.slider{position:relative;display:flex;align-items:center;width:100%;height:24px;user-select:none;touch-action:none;cursor:pointer;.slider-track{position:relative;flex-grow:1;height:8px;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:0}.slider-range{position:absolute;height:100%;background:var(--accent);border-radius:0}.slider-thumb{display:block;width:12px;height:20px;background:var(--accent);border-radius:0;border:2px solid var(--bg-root);opacity:1;transition:transform .15s;cursor:grab;&:focus{outline:none}&:focus-visible{box-shadow:0 0 0 2px var(--accent-border)}&:active{cursor:grabbing;transform:scale(1.2)}}&:hover{.slider-thumb{transform:scale(1.1)}}&[data-disabled]{opacity:.4;pointer-events:none}}.chip-tip{display:flex;>.setting-chip,>[data-radix-popper-content-wrapper]~.setting-chip,>button{flex:1}}.setting-chip{display:flex;align-items:center;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s;border:1px solid var(--border-default);background:var(--bg-raised);user-select:none;padding:8px 12px;text-align:left;color:var(--text-primary);text-transform:uppercase;box-shadow:inset 0 0 0 0 transparent;&:hover:not([disabled]):not(.on):not(.active):not([data-state=open]){background:var(--chip-hover-bg);border-color:var(--chip-hover-border);color:var(--chip-hover-text);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.08)}&[disabled]{opacity:.35;pointer-events:none}}.expandable-chip-trigger{gap:8px;font-weight:700;color:var(--text-muted);.chip-label{color:var(--text-primary);font-weight:700;flex:1;letter-spacing:.5px}.chip-val{color:var(--accent);font-family:var(--font-mono);font-size:11px;background:var(--bg-surface);border:1px solid var(--border-default);padding:2px 6px;border-radius:var(--radius-sm);letter-spacing:0px}&:hover:not([disabled]):not(.active){.chip-val{color:var(--chip-hover-text);background:rgba(var(--accent-ch),.08);border-color:rgba(var(--accent-ch),.24)}}&.active{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-border);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.12);.chip-label{color:var(--chip-active-text)}.chip-val{color:var(--chip-active-text);background:var(--chip-active-pill-bg);border-color:var(--chip-active-pill-border)}}}.chip-popover{min-width:180px;max-width:280px;padding:12px 14px;background:var(--bg-surface);border:2px solid var(--border-default);border-radius:var(--radius-sm);box-shadow:var(--shadow-brutal);animation:popoverIn .15s var(--ease-out) both;z-index:200;&:focus{outline:none}.slider{width:100%;min-width:150px}.chip-popover-label{color:var(--accent);margin-bottom:12px}}.toggle-chip{gap:8px;color:var(--text-primary);font-weight:700;border:1px solid var(--border-default);background:var(--bg-surface);transition:all .2s var(--ease-spring);.chip-grid>&{border:none}.chip-dot{width:8px;height:8px;border-radius:0;background:var(--text-muted);opacity:.5;transition:all .2s var(--ease-out);flex-shrink:0}.chip-label{color:inherit;font-weight:700;letter-spacing:.5px}&:hover:not([disabled]):not(.on){.chip-dot{opacity:.7}}&.on{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-border);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.12);.chip-dot{background:var(--accent);opacity:1}}}.select-chip-trigger{gap:8px;color:var(--text-primary);font-weight:700;.chip-label{color:var(--text-primary);font-weight:700;flex:1}.chip-val{color:var(--accent);font-family:var(--font-mono);font-size:11px;background:var(--bg-surface);border:1px solid var(--border-default);padding:2px 6px;border-radius:var(--radius-sm)}.chip-chevron{display:none;width:12px;height:12px;color:var(--accent);flex-shrink:0;transition:transform .15s var(--ease-spring)}&:hover:not([disabled]):not([data-state=open]){.chip-val{color:var(--chip-hover-text);background:rgba(var(--accent-ch),.08);border-color:rgba(var(--accent-ch),.24)}.chip-chevron{color:var(--accent-hover)}}&[data-state=open]{background:var(--chip-active-bg);color:var(--chip-active-text);border-color:var(--chip-active-border);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.12);.chip-label{color:var(--chip-active-text)}.chip-val{color:var(--chip-active-text);background:var(--chip-active-pill-bg);border-color:var(--chip-active-pill-border)}.chip-chevron{color:var(--chip-active-text);transform:rotate(180deg)}}}.chip-select-content{background:var(--bg-surface);border:2px solid var(--border-default);border-radius:var(--radius-sm);padding:8px;box-shadow:4px 4px #000c;animation:fadeInScale .15s var(--ease-spring) both;z-index:200;min-width:var(--radix-select-trigger-width);max-height:var(--radix-select-content-available-height);overflow-y:auto;.chip-select-item{display:flex;align-items:center;gap:6px;padding:8px 12px 8px 24px;border-radius:0;color:var(--text-primary);cursor:pointer;outline:none;position:relative;transition:background .1s,color .1s,box-shadow .1s;user-select:none;&[data-highlighted]{background:var(--chip-hover-bg);color:var(--chip-hover-text);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.16)}&[data-state=checked]{background:var(--chip-active-bg);color:var(--chip-active-text);box-shadow:inset 0 0 0 1px rgba(var(--accent-ch),.12);&[data-highlighted]{background:rgba(var(--accent-ch),.2);color:var(--chip-active-text)}}.chip-select-indicator{position:absolute;left:6px;display:flex;align-items:center;color:inherit}}}.chip-popover{.chip-input{width:100%;padding:8px 12px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px;font-weight:700;transition:all .2s;&:focus{outline:none;border-color:var(--accent);box-shadow:4px 4px rgba(var(--accent-ch),.2);transform:translate(-1px,-1px)}}}.chip-section{&:not(:last-child){margin-bottom:24px}.chip-section-label{color:var(--accent);opacity:1;margin-bottom:12px;padding-left:12px;position:relative;&:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:100%;background:var(--accent);opacity:1}}.chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--border-default);border-radius:var(--radius-sm);overflow:hidden;border:2px solid var(--border-default);>*{height:36px}>.setting-chip{border-radius:0;border:none}>:last-child:nth-child(odd){grid-column:1 / -1}}}.tune-trigger{display:inline-flex;align-items:center;gap:6px;min-height:var(--toolbar-control-height);padding:0 14px;background:var(--bg-raised);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s var(--ease-out);flex-shrink:0;box-sizing:border-box;&:hover{border-color:var(--border-default);color:var(--text-secondary);background:var(--bg-overlay)}&[data-state=open]{border-color:var(--accent-border);color:var(--accent);background:var(--accent-subtle);box-shadow:0 0 20px #e5a33b14}}.tune-icon{width:14px;height:14px}.tune-popover[data-state=closed]{display:none}.tune-popover{width:460px;max-height:500px;background:var(--bg-surface);border:2px solid var(--border-default);border-radius:var(--radius-sm);box-shadow:8px 8px #000c;z-index:100;&[data-state=open]{animation:tunePopoverIn .4s var(--ease-spring) both}&:focus{outline:none}}.tune-popover-scroll{max-height:496px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:12px}@keyframes tunePopoverIn{0%{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.seg-group{display:flex;align-items:center;border-radius:var(--radius-sm);border:1px solid var(--border-default);overflow:hidden;.seg-label{padding:8px 12px;color:var(--text-primary);border-right:1px solid var(--border-default);background:var(--bg-surface);white-space:nowrap;cursor:help}.seg-item{padding:8px 12px;background:var(--bg-surface);color:var(--text-secondary);flex:1 1 auto;border:none;border-right:1px solid var(--border-default);border-radius:0;cursor:pointer;transition:color .2s var(--ease-spring),background .2s var(--ease-spring),transform .2s var(--ease-spring);white-space:nowrap;text-align:center;min-width:0;overflow:hidden;text-overflow:ellipsis;&:hover:not([aria-checked=true]):not(:disabled){color:var(--text-primary);background:var(--bg-overlay);transform:scale(1.02)}&[aria-checked=true]{background:var(--accent);color:var(--bg-root)}&:disabled{opacity:.4;pointer-events:none}&:last-child{border-right:none}}&.collapsible{display:inline-flex;width:max-content;max-width:100%;flex-shrink:0;.seg-item{flex:0 0 auto;max-width:9rem;transition:width .22s var(--ease-spring),max-width .22s var(--ease-spring),padding-inline .22s var(--ease-spring),opacity .16s ease,border-color .2s var(--ease-spring),color .2s var(--ease-spring),background .2s var(--ease-spring),transform .2s var(--ease-spring)}&:not(:hover){.seg-item:not([aria-checked=true]){width:0;flex-basis:0;max-width:0;padding-left:0;padding-right:0;border-right-width:0;border-right-color:transparent;opacity:0;pointer-events:none}.seg-item[aria-checked=true]{flex-basis:auto;min-width:max-content;overflow:visible;text-overflow:clip;border-right-color:transparent}}}}.export-segment-group{.seg-label,.seg-item{min-height:var(--toolbar-control-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box}}.export-settings{.resolution-group{display:flex;align-items:center;min-height:var(--toolbar-control-height);border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-surface);box-sizing:border-box}.res-label{padding:0 10px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-primary);border-right:1px solid var(--border-default);align-self:stretch;display:flex;align-items:center;min-height:var(--toolbar-control-height);white-space:nowrap;text-transform:uppercase;cursor:help;box-sizing:border-box}.res-input{width:60px;min-height:var(--toolbar-control-height);padding:0 8px;background:transparent;color:var(--accent);border:none;font-family:var(--font-mono);font-size:12px;font-weight:700;text-align:center;outline:none;cursor:ew-resize;user-select:none;-moz-appearance:textfield;box-sizing:border-box;&:focus{cursor:text;user-select:text;background:#0003}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}&::placeholder{color:var(--text-muted)}}.res-sep{display:flex;align-items:center;align-self:stretch;padding:0 4px;color:var(--text-muted);font-size:11px;flex-shrink:0;user-select:none;box-sizing:border-box}.res-lock{display:flex;align-items:center;justify-content:center;width:var(--toolbar-control-height);align-self:stretch;background:none;border:none;border-left:1px solid var(--border-default);cursor:pointer;color:var(--text-muted);transition:all .2s;flex-shrink:0;border-radius:0;&:hover{background:var(--bg-overlay);color:var(--text-primary)}&.active{color:var(--bg-root);background:var(--accent)}svg{width:14px;height:14px}}}.export-settings{--toolbar-control-height: 46px;display:flex;flex-direction:column;gap:16px;border:none;padding:0;margin:0;min-width:0;&:disabled{opacity:.5;pointer-events:none}.essentials-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.essential-card{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;gap:6px;background:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:12px;animation:fadeInUp .25s var(--ease-out) both}.quality-control{display:flex;align-items:stretch;gap:10px;.slider-bar{flex:1;min-width:180px;min-height:var(--toolbar-control-height);box-sizing:border-box}}.lossless-btn{min-width:var(--toolbar-control-height);min-height:var(--toolbar-control-height);padding:0 12px;background:var(--bg-raised);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:11px;font-weight:700;font-family:var(--font-mono);cursor:pointer;transition:all .15s var(--ease-out);flex-shrink:0;letter-spacing:.5px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;&:hover:not(.active){border-color:var(--border-default);color:var(--text-secondary)}&.active{background:var(--accent);color:var(--bg-root);border-color:var(--accent)}}.field{display:flex;flex-direction:column;gap:6px;&.row{flex-direction:row;align-items:center;justify-content:space-between}}.label{color:var(--text-primary)}.ico-sizes{display:flex;gap:4px;flex-wrap:wrap}.ico-size-btn{padding:2px 8px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s var(--ease-out)}.ico-size-btn.active{background:var(--accent);color:var(--bg-root);border-color:var(--accent)}}@media(max-width:600px){.export-settings .essentials-row{flex-direction:column;align-items:stretch}}.overlay-root{position:absolute;z-index:10;pointer-events:none;animation:fadeIn .2s var(--ease-out) both}.overlay-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--_grid-color) 1px,transparent 1px) 33.33% 0 / 33.33% 100%,linear-gradient(to bottom,var(--_grid-color) 1px,transparent 1px) 0 33.33% / 100% 33.33%}.overlay-handle{position:absolute;width:12px;height:12px;background:var(--_handle-bg);border:2px solid #fff;border-radius:2px;transform:translate(-50%,-50%);z-index:2}.overlay-info{position:absolute;bottom:-28px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:11px;color:var(--text-primary);background:#000000b3;padding:2px 8px;border-radius:4px;white-space:nowrap;pointer-events:none}.crop-overlay{--_handle-bg: var(--accent);--_grid-color: rgba(255, 255, 255, .2);overflow:hidden;.crop-dim{position:absolute;background:#0000008c}.crop-box{position:absolute;border:2px solid var(--accent);cursor:move;pointer-events:auto;animation:fadeInScale .25s var(--ease-out) both}}.toolbar{flex-shrink:0;display:flex;align-items:center;gap:clamp(6px,1vw,8px);padding:clamp(8px,1.3vw,10px) clamp(12px,2.3vw,18px);background:var(--bg-surface);border-bottom:1px solid var(--border-default);z-index:10;text-transform:uppercase;.toolbar-brand{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--text-primary);letter-spacing:-.5px;cursor:pointer;flex-shrink:0;position:relative;.accent{color:var(--accent)}&:hover{text-shadow:0 0 16px var(--accent-glow)}&:after{content:"";position:absolute;bottom:4px;right:-10px;width:6px;height:6px;background-color:var(--accent);border-radius:50%;animation:pulseBrand 2s infinite}}@keyframes pulseBrand{0%{box-shadow:0 0 rgba(var(--accent-ch),.7)}70%{box-shadow:0 0 0 6px rgba(var(--accent-ch),0)}to{box-shadow:0 0 rgba(var(--accent-ch),0)}}.toolbar-sep{width:1px;height:18px;background:var(--border-default);margin:0 2px;flex-shrink:0;opacity:.75}.toolbar-spacer{flex:1}.toolbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.toolbar-action-group{display:flex;align-items:center;gap:8px;min-width:0}.toolbar-toolset{display:flex;align-items:center;gap:2px;padding:2px;background:#ffffff05;border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.toolbar-toolset .toolbar-btn.subtle{min-height:30px;padding:5px 10px;color:var(--text-muted)}.toolbar-toolset .toolbar-btn.subtle:hover:not(:disabled){color:var(--text-primary);background:var(--bg-raised)}.toolbar-toolset .toolbar-btn.subtle.active{background:var(--accent-subtle);color:var(--accent);border-color:transparent}.toolbar-progress{width:104px;height:6px;background:var(--bg-overlay);border:1px solid var(--border-default);border-radius:var(--radius-sm);overflow:hidden}.toolbar-progress-fill{height:100%;background:var(--accent);transition:width .3s var(--ease-out);box-shadow:0 0 8px var(--accent-glow);animation:shimmer 1.5s ease-in-out infinite}.toolbar-percent{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);min-width:34px;text-align:right}.toolbar-file-size{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text-primary);background:var(--bg-raised);min-height:34px;padding:4px 9px;border:1px solid var(--border-default);border-radius:var(--radius-sm);animation:fadeInScale .3s var(--ease-spring) both}+.crop-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--bg-raised);border-bottom:1px solid var(--border-default);animation:slideDown .25s var(--ease-out) both}}@media(max-width:768px){.toolbar{flex-wrap:wrap;.toolbar-spacer,.toolbar-sep{display:none}.toolbar-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.toolbar-action-group{flex-wrap:wrap}.toolbar-toolset{margin-left:auto;flex-wrap:wrap}}}.platform-picker{position:relative;display:flex;align-items:center;gap:6px;flex-shrink:0;.platform-picker-trigger{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--bg-raised);color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:13px;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s;&:hover:not(:disabled){color:var(--text-secondary);border-color:var(--border-default)}&:disabled{opacity:.5;cursor:not-allowed}&.has-preset{border-color:var(--accent);color:var(--text-primary)}.platform-picker-platform{color:var(--accent);font-weight:600}.platform-picker-label{color:var(--text-primary)}.platform-picker-placeholder{color:var(--text-muted)}.platform-picker-chevron{width:12px;height:12px;flex-shrink:0}}.platform-constraint-bar{display:flex;align-items:center;gap:8px;padding:3px 8px;background:var(--bg-overlay);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:12px;font-family:var(--font-mono);white-space:nowrap;.platform-constraint-desc{color:var(--text-secondary)}.platform-constraint-size{font-weight:600;&.ok{color:#4ade80}&.over{color:#f87171}}.platform-constraint-clear{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;color:var(--text-muted);cursor:pointer;border-radius:3px;transition:color .15s,background .15s;&:hover{color:var(--text-primary);background:var(--bg-raised)}svg{width:12px;height:12px}}}}.platform-picker-dropdown{z-index:100;min-width:220px;max-height:400px;display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:0 8px 32px #00000080;padding:4px;animation:platform-picker-in .15s var(--ease-out);.platform-picker-search{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--border-subtle);margin-bottom:4px;flex-shrink:0;.platform-picker-search-icon{width:14px;height:14px;flex-shrink:0;color:var(--text-muted)}.platform-picker-search-input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:13px;padding:2px 0;font-family:inherit;&::placeholder{color:var(--text-muted)}}}.platform-picker-list{overflow-y:auto;flex:1;min-height:0;.platform-picker-empty{padding:12px 8px;text-align:center;color:var(--text-muted);font-size:13px}.platform-picker-group{+.platform-picker-group{border-top:1px solid var(--border-subtle);margin-top:4px;padding-top:4px}.platform-picker-group-label{padding:4px 8px 2px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}.platform-picker-option{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:background .1s;&:hover{background:var(--bg-raised)}&.active{background:var(--bg-overlay)}.platform-picker-option-label{color:var(--text-primary);font-size:13px;font-weight:500;white-space:nowrap}.platform-picker-option-desc{color:var(--text-muted);font-size:12px;font-family:var(--font-mono);white-space:nowrap}}}}}@keyframes platform-picker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.still-preview{flex:1;display:flex;background:#000;min-height:0;.still-preview-zoom{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;.still-preview-stage{position:relative;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}.still-preview-img{width:100%;height:100%;animation:fadeIn .3s var(--ease-out) both}}}.format-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border-subtle);min-height:0;animation:fadeIn .25s var(--ease-out) both;.format-cell{background:var(--bg-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;position:relative;min-height:0;overflow:hidden;animation:fadeInScale .3s var(--ease-out) both;&:nth-child(1){animation-delay:0s}&:nth-child(2){animation-delay:.06s}&:nth-child(3){animation-delay:.12s}&:nth-child(4){animation-delay:.18s}&:nth-child(5){animation-delay:.24s}&:nth-child(6){animation-delay:.3s}.format-cell-badge{position:absolute;top:8px;right:8px;padding:3px 8px;background:#0009;backdrop-filter:blur(4px);border-radius:10px;font-size:11px;font-weight:700;color:var(--text-primary);z-index:2}.format-cell-thumb{max-width:100%;max-height:calc(100% - 60px);object-fit:contain;border-radius:4px;animation:fadeInScale .35s var(--ease-out) both}.format-cell-info{display:flex;align-items:center;gap:8px;margin-top:8px;flex-shrink:0;.format-cell-size{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-primary)}.format-cell-ratio{font-size:11px;font-weight:600;color:var(--accent);&.larger{color:var(--text-muted)}}.format-cell-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted)}}.format-cell-actions{display:flex;gap:6px;margin-top:6px;flex-shrink:0}.format-cell-no-preview{font-size:12px;color:var(--text-muted);font-style:italic}.format-cell-loading{font-size:12px;color:var(--text-muted);animation:pulse 1.2s ease-in-out infinite}}}.ruler{position:relative;height:20px;margin-bottom:3px;.tick{position:absolute;bottom:0;width:1px;height:5px;background:var(--border-default);opacity:.5;&.major{height:10px;background:var(--border-strong);opacity:.7}}.tick-label{position:absolute;bottom:calc(100% + 1px);left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:9px;color:var(--text-muted);white-space:nowrap;letter-spacing:.02em}}.cut{position:absolute;top:0;bottom:0;background:rgba(var(--danger-ch),.15);border-left:2px solid rgba(var(--danger-ch),.8);border-right:2px solid rgba(var(--danger-ch),.8);z-index:2;cursor:grab;transition:background .15s;&:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(var(--danger-ch),.15),rgba(var(--danger-ch),.15) 4px,transparent 4px,transparent 8px);pointer-events:none}&:hover{background:rgba(var(--danger-ch),.25);border-color:rgba(var(--danger-ch),1)}&:active{cursor:grabbing}.cut-handle{background:rgba(var(--danger-ch),.9);&:hover{background:var(--text-primary);box-shadow:0 0 16px rgba(var(--danger-ch),.8)}}.region-delete{color:#fff;background:var(--danger);border:1px solid var(--danger)}&:hover .region-delete{opacity:1;transform:scale(1)}}.fade-overlay{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;&.fade-in{background:linear-gradient(to right,rgba(var(--fade-ch),.6),rgba(var(--fade-ch),.05));border-left:2px solid var(--fade)}&.fade-out{background:linear-gradient(to left,rgba(var(--fade-ch),.6),rgba(var(--fade-ch),.05));border-right:2px solid var(--fade)}.fade-handle{background:var(--fade);pointer-events:auto;z-index:3;&:hover{background:var(--text-primary);box-shadow:0 0 16px rgba(var(--fade-ch),.8)}}}.mid-fade-region{position:absolute;top:0;bottom:0;z-index:2;&:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(var(--fade-ch),.6),rgba(var(--fade-ch),.05) 50%,rgba(var(--fade-ch),.6))}.mid-fade-hit{position:absolute;inset:0;cursor:grab;&:active{cursor:grabbing}}.fade-handle{background:var(--fade);pointer-events:auto;z-index:3;&:hover{background:var(--text-primary);box-shadow:0 0 16px rgba(var(--fade-ch),.8)}}.region-delete{background:var(--fade);color:#000;border:1px solid var(--fade)}&:hover .region-delete{opacity:1;transform:scale(1)}}.zoom-region{position:absolute;top:0;bottom:0;z-index:2;&:hover .zoom-core{background:rgba(var(--zoom-ch),.16);border-color:rgba(var(--zoom-ch),.6)}&:hover .region-delete{opacity:1;transform:scale(1)}&.selected .zoom-core{background:rgba(var(--zoom-ch),.2);border-color:rgba(var(--zoom-ch),.8);box-shadow:0 0 12px rgba(var(--zoom-ch),.15),inset 0 0 12px rgba(var(--zoom-ch),.05)}.zoom-core{position:absolute;top:0;bottom:0;background:rgba(var(--zoom-ch),.1);border-left:2px solid rgba(var(--zoom-ch),.45);border-right:2px solid rgba(var(--zoom-ch),.45);cursor:grab;transition:background .15s,border-color .15s,box-shadow .15s;&:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--zoom-ch),.12),rgba(var(--zoom-ch),.03) 50%,rgba(var(--zoom-ch),.12));pointer-events:none}&:active{cursor:grabbing}}.zoom-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;font-family:var(--font-mono);color:rgba(var(--zoom-ch),1);white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.6);letter-spacing:.05em}.zoom-handle{background:rgba(var(--zoom-ch),.9);&:hover{background:var(--text-primary);box-shadow:0 0 16px rgba(var(--zoom-ch),.8)}}.region-delete{color:#fff}.zoom-ease{position:absolute;top:0;bottom:0;pointer-events:none}.zoom-ease-in{left:0;background:linear-gradient(to right,transparent,rgba(var(--zoom-ch),.1))}.zoom-ease-out{background:linear-gradient(to right,rgba(var(--zoom-ch),.1),transparent)}.zoom-ease-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;font-family:var(--font-mono);color:rgba(var(--zoom-ch),.6);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}}.blur-region{position:absolute;top:0;bottom:0;background:rgba(var(--blur-ch),.1);border-left:2px solid rgba(var(--blur-ch),.45);border-right:2px solid rgba(var(--blur-ch),.45);z-index:2;cursor:grab;transition:background .15s,border-color .15s;&:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--blur-ch),.12),rgba(var(--blur-ch),.03) 50%,rgba(var(--blur-ch),.12));pointer-events:none}&.selected{background:rgba(var(--blur-ch),.2);border-color:rgba(var(--blur-ch),.8);box-shadow:0 0 12px rgba(var(--blur-ch),.15),inset 0 0 12px rgba(var(--blur-ch),.05)}&:hover{background:rgba(var(--blur-ch),.16);border-color:rgba(var(--blur-ch),.6)}&:hover .region-delete{opacity:1;transform:scale(1)}&:active{cursor:grabbing}.blur-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;font-family:var(--font-mono);color:rgba(var(--blur-ch),1);white-space:nowrap;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.6);letter-spacing:.05em}.blur-handle{background:rgba(var(--blur-ch),.9);&:hover{background:var(--text-primary);box-shadow:0 0 16px rgba(var(--blur-ch),.8)}}.region-delete{color:#fff}}.timeline-actions{display:flex;gap:8px;align-items:center;width:100%;overflow-x:auto;padding-bottom:4px;.add-cut,.add-fade,.add-zoom,.add-blur,.fade-group-label{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-sm);border:1px solid transparent;transition:all .2s;flex-shrink:0;svg{width:14px;height:14px;opacity:.8;transition:all .2s}}.add-cut{cursor:pointer;background:var(--bg-surface);border-color:var(--danger-border);color:var(--danger);&:hover{background:var(--danger);color:var(--bg-root);border-color:var(--danger);box-shadow:4px 4px rgba(var(--danger-ch),.4);transform:translate(-2px,-2px);svg{opacity:1;fill:var(--bg-root)}}}.add-zoom{cursor:pointer;background:var(--bg-surface);border-color:var(--zoom-border);color:var(--zoom);&:hover{background:var(--zoom);color:var(--bg-root);border-color:var(--zoom);box-shadow:4px 4px rgba(var(--zoom-ch),.4);transform:translate(-2px,-2px);svg{opacity:1;stroke:var(--bg-root)}}}.add-blur{cursor:pointer;background:var(--bg-surface);border-color:var(--blur-border);color:var(--blur);&:hover{background:var(--blur);color:var(--bg-root);border-color:var(--blur);box-shadow:4px 4px rgba(var(--blur-ch),.4);transform:translate(-2px,-2px);svg{opacity:1;stroke:var(--bg-root)}}}.fade-group{display:flex;align-items:center;.fade-group-label{color:var(--fade);background:var(--bg-surface);border-color:var(--fade-border);cursor:default}&[data-has-active] .fade-group-label{box-shadow:inset 0 0 0 1px rgba(var(--fade-ch),.8)}.fade-group-items{display:grid;grid-template-columns:0fr;transition:grid-template-columns .3s var(--ease-out);>div{display:flex;gap:6px;padding-left:6px;overflow:hidden;min-width:0;visibility:hidden;.add-fade{cursor:pointer;background:var(--bg-surface);border-color:var(--fade-border);color:var(--fade);white-space:nowrap;border-radius:var(--radius-sm);border-width:1px;&:hover{background:var(--fade);color:var(--bg-root);border-color:var(--fade);box-shadow:4px 4px rgba(var(--fade-ch),.4);transform:translate(-2px,-2px);svg{stroke:var(--bg-root);opacity:1}}&[data-active]{background:var(--fade);color:var(--bg-root);border-color:var(--fade);svg{stroke:var(--bg-root);opacity:1}}}}}&:hover{.fade-group-items{grid-template-columns:1fr;>div{visibility:visible}}}}}.cut-handle,.fade-handle,.zoom-handle,.blur-handle{position:absolute;top:0;bottom:0;width:6px;cursor:col-resize;transition:background .15s,box-shadow .15s;border:1px solid rgba(0,0,0,.4);&:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:14px;background:#00000080}&.start{left:0}&.end{left:100%;transform:translate(-100%)}}.region-delete{position:absolute;top:4px;right:8px;width:20px;height:20px;border-radius:2px;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:4;opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s var(--ease-spring);pointer-events:auto;box-shadow:var(--shadow-brutal-sm);&:hover{transform:scale(1.15)!important}}.timeline{display:flex;flex-direction:column;gap:10px;&.disabled{opacity:.5;pointer-events:none}.bar-wrapper{padding:4px 0;position:relative}.drag-tooltip{position:absolute;bottom:calc(100% - 14px);transform:translate(-50%);background:#14141ad9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:3px 8px;font-family:var(--font-mono);font-size:10px;color:var(--text-primary);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:0 4px 12px #0006}.bar{position:relative;height:64px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:crosshair;user-select:none;touch-action:none;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0d;.thumb-strip{position:absolute;inset:0;display:flex;z-index:0;opacity:.6;pointer-events:none;img{height:100%;flex:1;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}}}.dim{position:absolute;top:0;bottom:0;background:#0009;pointer-events:none;z-index:1}.trim-handle{position:absolute;top:0;bottom:0;width:12px;background:var(--accent);cursor:col-resize;z-index:3;transition:background .15s,box-shadow .15s;border:1px solid var(--accent-border);&:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:20px;border-radius:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.6) 0px,rgba(0,0,0,.6) 2px,transparent 2px,transparent 4px)}&.start{left:0}&.end{left:100%;transform:translate(-100%)}&:hover,&:active{background:var(--text-primary);box-shadow:0 0 16px var(--accent-glow)}}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;z-index:5;pointer-events:none;transform:translate(-1px);box-shadow:0 0 6px #fff3;&:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #fff;filter:drop-shadow(0 1px 3px rgba(255,255,255,.3))}&:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid #fff}}}.shortcut-overlay-backdrop{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);z-index:100;animation:fadeIn .15s ease-out}.shortcut-overlay{position:fixed;top:50%;left:50%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg, 12px);padding:24px;min-width:320px;max-width:400px;z-index:101;animation:dialogIn .25s var(--ease-out) both;.shortcut-title{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 16px}.shortcut-list{display:flex;flex-direction:column;gap:8px;.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:16px;.shortcut-key{font-family:var(--font-mono);font-size:12px;background:var(--bg-raised, rgba(255, 255, 255, .06));border:1px solid var(--border-subtle);border-radius:4px;padding:2px 8px;color:var(--text-primary);white-space:nowrap;min-width:80px;text-align:center}.shortcut-desc{font-size:13px;color:var(--text-muted);flex:1;text-align:right}}}.shortcut-close{display:block;margin:20px auto 0;padding:6px 20px;background:var(--bg-raised, rgba(255, 255, 255, .06));border:1px solid var(--border-default);border-radius:var(--radius-sm, 6px);color:var(--text-primary);font-size:13px;cursor:pointer;transition:background .15s;&:hover{background:#ffffff1a}}}@keyframes dialogIn{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.preview-wrap{flex:1;min-height:0;position:relative;display:flex;overflow:hidden;&:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(var(--accent-ch),.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--accent-ch),.05) 1px,transparent 1px);background-size:40px 40px;z-index:1;opacity:.5}.preview{flex:1;min-height:0;border:none;border-radius:0;overflow:visible;position:relative;z-index:2;.viewport-frame{flex:1;min-height:0;display:flex;overflow:hidden;animation:fadeInScale .6s var(--ease-spring) both}.viewport-zoom{flex:1;min-height:0;display:flex}.viewport{max-height:none;flex:1;min-height:0;box-shadow:0 0 40px #000c;border:1px solid var(--border-subtle);transition:box-shadow .3s var(--ease-out);&:hover{box-shadow:0 0 60px rgba(var(--accent-ch),.1)}}}.zoom-pan-overlay{position:absolute;inset:0;z-index:6;cursor:grab;&:active{cursor:grabbing}}.zoom-badge{position:absolute;bottom:16px;right:16px;padding:6px 12px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;z-index:7;animation:fadeInScale .3s var(--ease-out) both;box-shadow:var(--shadow-brutal);text-transform:uppercase;transition:all .2s;&:hover{color:var(--bg-root);background:var(--accent);border-color:var(--accent)}}.compare-btn{position:absolute;top:16px;left:16px;padding:8px 16px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;z-index:5;animation:fadeInScale .4s var(--ease-out) both;box-shadow:var(--shadow-brutal);text-transform:uppercase;&:hover{background:var(--text-primary);color:var(--bg-root);border-color:var(--text-primary)}}.preview-error{position:absolute;bottom:60px;left:50%;transform:translate(-50%);padding:8px 16px;background:var(--bg-raised);border:1px solid var(--danger);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--danger);z-index:5;white-space:nowrap;animation:errorSlideUp .35s var(--ease-spring) both;box-shadow:4px 4px 0 var(--danger);text-transform:uppercase}}@keyframes errorSlideUp{0%{opacity:0;transform:translate(-50%) translateY(16px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.zoom-overlay{--_handle-bg: rgba(var(--zoom-ch), .9);--_grid-color: rgba(var(--zoom-ch), .15);.zoom-dim{position:absolute;background:#0006}.zoom-box{position:absolute;pointer-events:auto;&.zoom-box-active{border:2px solid rgba(var(--zoom-ch),.9);cursor:move;z-index:2;animation:fadeInScale .25s var(--ease-out) both}&.zoom-box-inactive{border:2px dashed rgba(var(--zoom-ch),.35);cursor:pointer;z-index:1;transition:border-color .15s;&:hover{border-color:rgba(var(--zoom-ch),.6)}}.zoom-info-inactive{color:rgba(var(--zoom-ch),.5);background:#00000080;font-size:10px}}.zoom-kf-toggle{position:absolute;transform:translate(-50%);display:flex;pointer-events:auto;z-index:3;button{padding:3px 10px;font-size:10px;font-weight:600;border:1px solid rgba(var(--zoom-ch),.4);background:#000000b3;color:rgba(var(--zoom-ch),.6);cursor:pointer;transition:background .15s,color .15s;&:first-child{border-radius:4px 0 0 4px}&:last-child{border-radius:0 4px 4px 0;border-left:none}&.active{background:rgba(var(--zoom-ch),.2);color:rgba(var(--zoom-ch),1);border-color:rgba(var(--zoom-ch),.7)}&:hover:not(.active){background:rgba(var(--zoom-ch),.1);color:rgba(var(--zoom-ch),.8)}}}}.blur-overlay{--_handle-bg: rgb(var(--blur-ch));--_grid-color: rgba(var(--blur-ch), .2);overflow:hidden;.blur-dim{position:absolute;background:#0000008c}.blur-box{position:absolute;border:2px solid rgb(var(--blur-ch));cursor:move;pointer-events:auto;animation:fadeInScale .25s var(--ease-out) both}.blur-strength-control{display:flex;align-items:center;gap:6px;pointer-events:auto;input[type=range]{width:64px;accent-color:rgb(var(--blur-ch));cursor:pointer}span{font-family:var(--font-mono);font-size:11px;font-weight:600;color:rgb(var(--blur-ch));min-width:32px;text-align:right}}}.bottom-panel{flex-shrink:0;background:var(--bg-surface);border-top:2px solid var(--border-default);display:flex;flex-direction:column;max-height:50vh;.panel-tabs{display:flex;gap:0;padding:0 16px;border-bottom:2px solid var(--border-default);flex-shrink:0}.panel-tab{padding:12px 24px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-muted);font-family:var(--font-mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;&:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}&:not(.secondary){color:var(--accent);border-bottom-color:var(--accent)}&:hover:not(.active){background:var(--bg-overlay);color:var(--text-primary);transform:translateY(-2px)}&.active{color:var(--bg-root);background:var(--accent);border-bottom-color:var(--accent)}&.active:after{background:var(--bg-root);transform:scaleX(1)}&.secondary{font-size:12px;font-weight:600;padding:12px 16px;color:var(--text-muted)}&.secondary.active{background:var(--text-primary);color:var(--bg-root);border-bottom-color:var(--text-primary)}&.secondary.active:after{transform:scaleX(1);background:var(--accent)}}.panel-tab-sep{width:2px;align-self:stretch;margin:0 8px;background:var(--border-default)}.panel-content{min-height:0;overflow-y:auto;padding:16px 24px;animation:fadeIn .15s ease-out both}}@media(max-width:768px){.bottom-panel{max-height:60vh}}.batch-mode{.batch-grid-wrap{flex:1;min-height:0;overflow-y:auto;background:var(--bg-base, #0c0c10);.batch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,26vw,200px),1fr));gap:clamp(10px,2.1vw,16px);padding:clamp(12px,2.6vw,20px)}}}.toolbar{.batch-badge{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-muted);background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:4px;padding:2px 8px;margin-left:4px}.batch-size-control{display:flex;align-items:center;gap:6px;flex-shrink:0;.batch-size-label{font-size:11px;font-weight:600;color:var(--text-muted);white-space:nowrap}.batch-size-slider{width:80px}.batch-size-value{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-secondary);min-width:16px}}}@media(max-width:768px){.toolbar{.batch-size-control{display:none}}}@keyframes spin{to{transform:rotate(360deg)}}.batch-item{display:flex;flex-direction:column;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg, 14px);overflow:hidden;transition:border-color .15s,background .15s,box-shadow .2s var(--ease-out),transform .2s var(--ease-out);animation:fadeInUp .25s var(--ease-out) both;cursor:pointer;&:hover{border-color:var(--border-default, #333);transform:translateY(-3px);box-shadow:0 8px 24px #00000059;.batch-item-thumb{transform:scale(1.03)}.batch-item-actions{opacity:1}}&.selected{border-color:var(--accent, #e5a33b);background:var(--accent-subtle, rgba(229, 163, 59, .06));box-shadow:0 0 0 1px var(--accent, #e5a33b)}&.done{border-color:var(--accent, #e5a33b)}&.error{border-color:var(--danger, #e05252)}&.processing{border-color:var(--accent, #e5a33b);opacity:.9}.batch-item-thumb-wrap{position:relative;width:100%;aspect-ratio:4 / 3;background:#000;overflow:hidden;.batch-item-thumb{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease-out)}.batch-item-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0000008c;backdrop-filter:blur(2px);gap:6px;.batch-item-spinner{width:28px;height:28px;border:2.5px solid rgba(255,255,255,.15);border-top-color:var(--accent, #e5a33b);border-radius:50%;animation:spin .8s linear infinite}.batch-item-progress-text{font-family:var(--font-mono);font-size:11px;font-weight:600;color:#fff}}.batch-item-actions{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s;.batch-item-action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm, 6px);border:none;background:#0000008c;backdrop-filter:blur(6px);color:#fff;cursor:pointer;transition:background .15s,transform .15s;&:hover:not(:disabled){background:#000c;transform:scale(1.1)}&:disabled{opacity:.4;cursor:not-allowed}}}.batch-item-override-dot{position:absolute;bottom:8px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--accent, #e5a33b);box-shadow:0 0 6px var(--accent-glow, rgba(229, 163, 59, .4))}}.batch-item-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;.batch-item-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.batch-item-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}.batch-item-result{display:flex;flex-direction:column;gap:5px;margin-top:4px;.batch-item-bar{height:3px;background:var(--border-subtle);border-radius:2px;overflow:hidden;.batch-item-bar-fill{height:100%;background:var(--accent, #e5a33b);border-radius:2px;transition:width .4s var(--ease-out)}}.batch-item-result-text{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-primary);.batch-item-savings{font-weight:700;color:var(--accent, #e5a33b);&.larger{color:var(--danger, #e05252)}}}}.batch-item-error{font-size:11px;color:var(--danger, #e05252);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}}.batch-add-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:4 / 3;padding:20px;border:1.5px dashed var(--border-default);border-radius:var(--radius-lg, 14px);color:var(--text-muted);cursor:pointer;transition:border-color .15s,color .15s,background .15s;&:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle, rgba(229, 163, 59, .05))}span{font-size:12px;font-weight:500}}@media(max-width:768px){.batch-item{.batch-item-thumb-wrap{.batch-item-actions{opacity:1}}}}.bottom-panel{.panel-header-row{display:flex;align-items:center;gap:12px;padding:6px 16px;border-bottom:1px solid var(--border-subtle);min-height:32px;.panel-context-label{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;&.global{color:var(--text-muted)}&.override{color:var(--accent, #e5a33b)}}.panel-context-hint{font-size:10px;color:var(--text-muted);font-style:italic}.panel-reset-btn{font-size:10px!important;padding:1px 6px!important}.panel-tabs{margin-left:auto;border-bottom:none;padding:0}}}.compare-modal-backdrop{position:fixed;inset:0;z-index:100;background:#000000bf;backdrop-filter:blur(8px);animation:fadeIn .2s var(--ease-out) both}.compare-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;width:calc(100% - 64px);max-width:960px;height:80vh;max-height:720px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg, 14px);overflow:hidden;display:flex;flex-direction:column;animation:fadeInScale .25s var(--ease-out) both;.compare-modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;.compare-modal-title{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.compare-modal-close-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm, 6px);border:none;background:var(--bg-raised);color:var(--text-secondary);cursor:pointer;transition:background .15s,transform .15s;flex-shrink:0;&:hover{background:var(--bg-overlay);color:var(--text-primary);transform:scale(1.1)}}}.compare-view{flex:1;min-height:0}}.app.landing{max-width:1140px;margin:0 auto;padding:20px 24px 48px;min-height:100vh}.app .header{display:flex;align-items:baseline;gap:16px;margin-bottom:36px;padding-bottom:24px;border-bottom:2px solid var(--border-default);text-transform:uppercase;animation:fadeInUp .5s var(--ease-out) both}.app .logo{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--text-primary);margin:0;letter-spacing:-1px;.accent{color:var(--accent)}}.app .tagline{font-family:var(--font-mono);font-size:11px;color:var(--accent);margin:0;letter-spacing:.1em}.app .loader-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 200px);gap:12px;animation:fadeInUp .6s var(--ease-out) .1s both}.app .load-error{font-size:13px;color:var(--danger);margin:0;animation:fadeInUp .3s var(--ease-out) both}.app.editor-mode{display:flex;flex-direction:column;height:100dvh;overflow:hidden;animation:fadeIn .35s var(--ease-out) both}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:6px 12px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;line-height:1;cursor:pointer;transition:all .2s;white-space:nowrap;svg{width:14px;height:14px;flex-shrink:0;pointer-events:none}&.icon-only{min-width:30px;width:30px;padding:0;gap:0}&:hover:not(:disabled){background:var(--bg-overlay);border-color:var(--accent);color:var(--accent);box-shadow:2px 2px rgba(var(--accent-ch),.18);transform:translate(-1px,-1px)}&.primary{background:var(--accent);color:var(--bg-root);border-color:var(--accent);&:hover:not(:disabled){background:var(--accent-hover);color:var(--bg-root);border-color:var(--accent-hover);box-shadow:2px 2px rgba(var(--accent-ch),.28);transform:translate(-1px,-1px)}}&.subtle{background:transparent;border-color:transparent;color:var(--text-muted);&:hover:not(:disabled){color:var(--text-primary);background:var(--bg-raised);box-shadow:none;transform:none}}&:disabled{opacity:.4;pointer-events:none}}.toolbar-btn.active{background:var(--accent);color:var(--bg-root);border-color:var(--accent)}:root{--bg-root: #050505;--bg-surface: #0f0f0f;--bg-raised: #1a1a1a;--bg-overlay: #262626;--border-subtle: #2a2a2a;--border-default: #3f3f3f;--border-strong: #c4ff00;--text-primary: #ffffff;--text-secondary: #d4d4d8;--text-muted: #a1a1aa;--accent-ch: 196, 255, 0;--danger-ch: 255, 51, 102;--fade-ch: 255, 180, 50;--zoom-ch: 80, 200, 200;--blur-ch: 160, 120, 255;--accent: #c4ff00;--accent-hover: #d4ff33;--accent-subtle: rgba(var(--accent-ch), .1);--accent-border: rgba(var(--accent-ch), .4);--accent-glow: rgba(var(--accent-ch), .25);--chip-hover-bg: rgba(var(--accent-ch), .06);--chip-hover-border: rgba(var(--accent-ch), .24);--chip-hover-text: #e8eedd;--chip-active-bg: rgba(var(--accent-ch), .22);--chip-active-border: rgba(var(--accent-ch), .65);--chip-active-text: #e5ff80;--chip-active-pill-bg: rgba(var(--accent-ch), .15);--chip-active-pill-border: rgba(var(--accent-ch), .35);--accent-alt: #ff3366;--danger: #ff3366;--danger-subtle: rgba(var(--danger-ch), .1);--danger-border: rgba(var(--danger-ch), .4);--fade: rgb(var(--fade-ch));--fade-border: rgba(var(--fade-ch), .4);--zoom: rgb(var(--zoom-ch));--zoom-border: rgba(var(--zoom-ch), .4);--blur: rgb(var(--blur-ch));--blur-border: rgba(var(--blur-ch), .4);--shadow-brutal: 4px 4px 0 rgba(0, 0, 0, .5);--shadow-brutal-sm: 4px 4px 0 rgba(0, 0, 0, .4);--radius-sm: 0px;--radius-md: 2px;--radius-lg: 4px;--radius-xl: 8px;--font-display: "Bricolage Grotesque", sans-serif;--font-body: "Khand", sans-serif;--font-mono: "JetBrains Mono", monospace;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.175, .885, .32, 1.2);color-scheme:dark}.mono-label{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px}@keyframes popoverIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.6)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-body);font-size:14px;background:var(--bg-root);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}body:before{content:"";position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}input[type=number]{font-family:var(--font-mono);font-size:13px}button{font-family:var(--font-body)}::selection{background:var(--accent-glow);color:#fff}*{scrollbar-width:none}::-webkit-scrollbar{display:none}