:root{--bg:#131417;--bg2:#1a1c21;--bg3:#23262d;--line:#2c2f37;--text:#e6e8eb;--muted:#8b919c;--accent:#4c8dff;--accent2:#3572e0}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}.hidden{display:none!important}#topbar{background:var(--bg2);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:14px;height:56px;padding:0 16px;display:flex}.brand{white-space:nowrap;align-items:center;gap:9px;font-size:15px;font-weight:700;display:flex}.brand .logo{background:linear-gradient(135deg,#4c8dff,#9b5bff);border-radius:8px;justify-content:center;align-items:center;width:27px;height:27px;display:flex;box-shadow:0 2px 8px #4c8dff59}.brand .sub{color:var(--muted);margin-left:3px;font-size:12px;font-weight:400}.tools{align-items:center;gap:6px;margin-left:8px;display:flex}.sep{background:var(--line);flex:none;width:1px;height:22px;margin:0 5px}#topbar .right{margin-left:auto}button{font:inherit;color:var(--text);background:var(--bg3);border:1px solid var(--line);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:7px;padding:7px 11px;transition:background .12s,border-color .12s,opacity .12s,filter .12s;display:inline-flex}button:hover:not(:disabled){background:#2a2e37;border-color:#3a3f4a}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:17px;height:17px}button.icon{padding:7px}button.active{border-color:var(--accent);color:var(--accent);background:#4c8dff21}button.primary{background:linear-gradient(180deg, var(--accent), var(--accent2));color:#fff;border-color:#0000;font-weight:600}button.primary:hover:not(:disabled){filter:brightness(1.12);background:linear-gradient(180deg, var(--accent), var(--accent2))}#main{flex:1;min-height:0;display:flex}#stage{background:radial-gradient(1100px 600px at 50% 38%, #ffffff06, transparent 70%), var(--bg);flex:1;min-width:0;position:relative;overflow:hidden}#view{background:#000;border-radius:2px;position:absolute;box-shadow:0 10px 44px #0000008c}#compare-wrap{cursor:ew-resize;position:absolute}#compare{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#divider{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #00000073}#divider:after{content:"";background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 12px #0000008c}.tag{letter-spacing:.8px;text-transform:uppercase;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#0009;border-radius:6px;padding:4px 9px;font-size:10.5px;font-weight:700;position:absolute;top:10px}.tag.before{left:10px}.tag.after{right:10px}#crop-overlay{cursor:crosshair;touch-action:none;position:absolute}#crop-rect{cursor:move;border:1px solid #fffffff2;position:absolute;box-shadow:0 0 0 9999px #080a0e8c}#crop-rect .grid{pointer-events:none;background:linear-gradient(90deg,#0000 33.1%,#ffffff52 33.1% 33.5%,#0000 33.5% 66.4%,#ffffff52 66.4% 66.8%,#0000 66.8%),linear-gradient(#0000 33.1%,#ffffff52 33.1% 33.5%,#0000 33.5% 66.4%,#ffffff52 66.4% 66.8%,#0000 66.8%);position:absolute;inset:0}#crop-rect .h{border:2px solid var(--accent);background:#fff;border-radius:3px;width:13px;height:13px;position:absolute;box-shadow:0 1px 4px #00000080}#crop-rect .h.nw{cursor:nwse-resize;top:-7px;left:-7px}#crop-rect .h.ne{cursor:nesw-resize;top:-7px;right:-7px}#crop-rect .h.sw{cursor:nesw-resize;bottom:-7px;left:-7px}#crop-rect .h.se{cursor:nwse-resize;bottom:-7px;right:-7px}#crop-rect .h.n{cursor:ns-resize;margin-left:-6.5px;top:-7px;left:50%}#crop-rect .h.s{cursor:ns-resize;margin-left:-6.5px;bottom:-7px;left:50%}#crop-rect .h.w{cursor:ew-resize;margin-top:-6.5px;top:50%;left:-7px}#crop-rect .h.e{cursor:ew-resize;margin-top:-6.5px;top:50%;right:-7px}#crop-label{font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;background:#000000bf;border-radius:6px;padding:3px 9px;font-size:12px;position:absolute;top:-32px;left:50%;transform:translate(-50%)}#crop-label.below{top:auto;bottom:-32px}#panel{background:var(--bg2);border-left:1px solid var(--line);flex-direction:column;flex:none;gap:19px;width:300px;padding:15px 16px 22px;display:flex;overflow-y:auto}#panel h2{letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin:0 0 11px;font-size:11px;font-weight:700}.slider-row{grid-template-columns:78px 1fr 36px;align-items:center;gap:10px;margin-bottom:11px;display:grid}.slider-row label{font-size:13px}.slider-row .val{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:12px}input[type=range]{appearance:none;background:var(--bg3);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent);cursor:grab;background:#fff;border-radius:50%;width:15px;height:15px;box-shadow:0 1px 5px #00000073}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}#filters{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.filter{flex-direction:column;align-items:stretch;gap:5px;padding:4px;display:flex}.filter canvas{aspect-ratio:4/3;border:1px solid var(--line);background:var(--bg3);border-radius:6px;width:100%;display:block}.filter span{text-align:center;color:var(--muted);font-size:10.5px}.filter.active{border-color:var(--accent);background:#4c8dff1a}.filter.active span{color:var(--accent)}#aspects{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}#aspects button{padding:5px 10px;font-size:12px}.crop-actions{gap:8px;display:flex}.crop-actions button{flex:1;justify-content:center;padding:8px 6px}.crop-actions button svg{width:15px;height:15px}.info{flex-direction:column;gap:6px;font-size:12.5px;display:flex}.info .row{justify-content:space-between;gap:10px;display:flex}.info .row span:first-child{color:var(--muted)}.info .row span:last-child{font-variant-numeric:tabular-nums}#statusbar{background:var(--bg2);border-top:1px solid var(--line);height:34px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;align-items:center;gap:16px;padding:0 16px;font-size:12px;display:flex}#statusbar .hints{align-items:center;gap:5px;margin-left:auto;display:flex}kbd{background:var(--bg3);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:1px 5px;font-family:inherit;font-size:10.5px}