/* Pointer tracking is direct; no easing delays the user's drag. */
#compare-line{width:44px;margin-left:-22px;background:none;pointer-events:auto;cursor:ew-resize;touch-action:none;z-index:20}
#compare-line::before{content:'';position:absolute;top:0;bottom:0;left:21px;width:2px;background:#fff;box-shadow:0 0 3px #0008}
#compare-line::after{display:none;content:none}
#compare-line>span{right:34px;pointer-events:none}#compare-line>span+span{left:34px;right:auto}
#compare-handle{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:2px solid #fff;background:#edf4ff;color:#182330;font-size:21px;line-height:30px;box-shadow:0 2px 12px #0005;cursor:ew-resize;touch-action:none}
#compare-handle:hover,#compare-line.dragging #compare-handle{background:#82b4ff;color:#10213b}
#mask-guide{pointer-events:auto;cursor:move;touch-action:none;z-index:15;background:#82b4ff08;border:1px dashed #fff;box-shadow:0 0 0 1px #0008}
#mask-guide::before,#mask-guide::after{content:'';position:absolute;background:#ffffff40;pointer-events:none}
#mask-guide::before{left:0;right:0;top:50%;height:1px}#mask-guide::after{top:0;bottom:0;left:50%;width:1px}
#mask-guide.dragging{border-color:#82b4ff;background:#82b4ff12}
.mask-handle,.mask-center{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;background:none;touch-action:none;z-index:2;border-radius:50%}
.mask-handle:hover:enabled,.mask-center:hover:enabled{background:#82b4ff24}.mask-handle i{width:13px;height:13px;border-radius:50%;background:#f5f8ff;border:2px solid #3f75b7;box-shadow:0 1px 5px #0008;pointer-events:none}
.mask-n{left:50%;top:0;cursor:ns-resize}.mask-s{left:50%;top:100%;cursor:ns-resize}.mask-w{left:0;top:50%;cursor:ew-resize}.mask-e{left:100%;top:50%;cursor:ew-resize}.mask-center{left:50%;top:50%;cursor:move;color:#fff;text-shadow:0 1px 3px #000;font-size:25px}.mask-center span{pointer-events:none}
input[type=range]{height:6px}
#temperature,#maskTemperature{background:linear-gradient(90deg,#377be8,#a8c7ef 35%,#b8bdc1 50%,#e3c876 70%,#f08b35)}
#tint,#maskTint{background:linear-gradient(90deg,#40bf73,#adc3aa 35%,#adb3b8 50%,#c98bb4 70%,#e55cbe)}
#saturation,#maskSaturation,#vibrance,#maskVibrance{background:linear-gradient(90deg,#90979e,transparent),linear-gradient(90deg,#c98575,#ec5d8f,#b97bf3,#44bcdc,#52ca8c,#eac14c)}
[id^=hsl][id$=Sat]{background:linear-gradient(90deg,#969da4,var(--channel-color,#82b4ff))}
[id^=hsl][id$=Lum]{background:linear-gradient(90deg,#182027,var(--channel-color,#82b4ff),#f8fbff)}
#gradeShadowHue,#gradeHighHue{background:linear-gradient(90deg,#ee5555,#eac74b,#57c875,#45bfc9,#647cee,#bf6ce4,#ee5555)}
#exposure,#brightness,#shadows,#highlights,#whites,#blacks,#maskExposure,#maskBrightness,#maskShadows,#maskHighlights,#maskWhites,#maskBlacks{background:linear-gradient(90deg,#303944,#8a96a6,#edf3fa)}
input[type=range]::-webkit-slider-thumb{width:13px;height:13px;border:2px solid #eef5ff;background:#202b3c;box-shadow:0 0 0 1px #18233080}
input[type=range]::-moz-range-thumb{background:#202b3c;border:2px solid #eef5ff}
.filter-card canvas{height:112px;background:#242d38}.filter-card span{font-size:11px;padding:10px 3px 6px}.filter-card>button:first-child{border-radius:8px}.filter-card canvas:not(.ready){background:linear-gradient(135deg,#303d4e,#202a37)}
.inspect-filter{position:absolute;right:7px;top:79px;width:28px;height:28px;min-height:28px;padding:5px;border-radius:50%;background:#17202bd9;color:#f3f7ff;display:grid;place-items:center}.inspect-filter svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.inspect-filter:hover:enabled{background:#315883}
#filter-preview-dialog{width:min(1050px,calc(100vw - 28px));padding:22px}#filter-preview-stage{display:flex;justify-content:center;align-items:center;min-height:180px;height:min(62dvh,660px);padding:14px;background:#131820;border-radius:6px;overflow:hidden}#filter-preview-stage canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.filter-preview-actions{display:flex;gap:12px;justify-content:flex-end}.filter-preview-actions .button{width:auto}#filter-preview-status{font:11px var(--utility);color:var(--muted)}
@media(max-width:760px){input[type=range]{height:7px}input[type=range]::-webkit-slider-thumb{width:21px;height:21px;border-width:3px}.filter-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.filter-card canvas{height:128px}.inspect-filter{top:95px;width:32px;height:32px;min-height:32px}.filter-card span{font-size:12px}.favorite-filter{width:34px;min-height:34px}.mask-handle i{width:15px;height:15px}#compare-handle{width:40px;height:40px;min-height:40px;left:2px}#filter-preview-dialog{padding:16px}.filter-preview-actions{justify-content:stretch}.filter-preview-actions .button{flex:1;font-size:11px;padding:10px}#filter-preview-stage{height:54dvh;padding:8px}}