:root{--bg:#0e1013;--panel:#16191e;--panel2:#1c2027;--border:#262c36;--text:#e9ecf2;--muted:#8d95a5;--accent:#58a6ff;--accent-soft:#58a6ff24;--good:#2dd4bf;--danger:#f87171;--radius:8px}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:13px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}#topbar{background:var(--panel);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:6px;height:52px;padding:0 12px;display:flex}.brand{letter-spacing:.2px;color:var(--text);align-items:center;gap:8px;margin-right:10px;font-size:14px;font-weight:650;display:flex}.brand svg{color:var(--accent)}.tb-group{align-items:center;gap:4px;display:flex}.tb-sep{background:var(--border);width:1px;height:22px;margin:0 8px}.tb-flex{flex:1}.tbtn{height:32px;color:var(--text);border-radius:var(--radius);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;align-items:center;gap:7px;padding:0 11px;font-weight:500;display:inline-flex}.tbtn svg{flex:none;width:16px;height:16px}.tbtn:hover{background:var(--panel2);border-color:var(--border)}.tbtn:active{transform:translateY(.5px)}.tbtn:disabled{opacity:.35;cursor:default}.tbtn:disabled:hover{background:0 0;border-color:#0000}.tbtn.primary{background:var(--accent);border-color:var(--accent);color:#071018}.tbtn.primary:hover{background:#6fb3ff;border-color:#6fb3ff}.tbtn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.tbtn.small{height:27px;padding:0 10px;font-size:12px}#workspace{flex:1;min-height:0;display:flex}#sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;flex:none;width:272px;min-height:0;display:flex}.side-scroll{flex:1;padding:14px 14px 20px;overflow-y:auto}.side-scroll::-webkit-scrollbar{width:9px}.side-scroll::-webkit-scrollbar-thumb{border:2px solid var(--panel);background:#2a313d;border-radius:5px}.panel{margin-bottom:20px}.panel h2{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:650}.slider-row{margin-bottom:11px}.slider-row .s-top{justify-content:space-between;align-items:baseline;margin-bottom:4px;display:flex}.slider-row label{color:var(--text);cursor:default;font-weight:500}.slider-row .s-val{font-variant-numeric:tabular-nums;color:var(--muted);background:var(--panel2);border:1px solid var(--border);text-align:center;border-radius:5px;min-width:34px;padding:0 6px;font-size:11.5px}.slider-row .s-val.zero{color:var(--muted)}.slider-row .s-val.set{color:var(--accent);border-color:#58a6ff66}.slider-row input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px;margin:0}.slider-row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill,50%), #2b323d var(--fill,50%), #2b323d 100%);border-radius:2px;height:4px}.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;background:#e9ecf2;border:1px solid #0008;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 1px 3px #00000080}.slider-row input[type=range]:focus{outline:none}.slider-row input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--accent-soft), 0 1px 3px #00000080}.presets{grid-template-columns:1fr 1fr;gap:8px;display:grid}.preset{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel2);cursor:pointer;font:inherit;color:var(--text);text-align:left;padding:0;overflow:hidden}.preset:hover{border-color:var(--accent)}.preset canvas{object-fit:cover;background:#000;width:100%;height:58px;display:block}.preset .p-name{color:var(--muted);padding:5px 8px;font-size:11.5px;font-weight:550;display:block}.preset:hover .p-name{color:var(--text)}#stage{background:var(--bg);flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}#cropBar{background:var(--panel);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:10px;padding:8px 14px;display:flex}#cropBar.hidden{display:none}.cropbar-label{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:11px}.chips{gap:4px;display:flex}.chip{border:1px solid var(--border);height:26px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border-radius:13px;padding:0 10px;font-size:12px}.chip:hover{color:var(--text);border-color:#3a4250}.chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.crop-nums{gap:8px;margin-left:6px;display:flex}.crop-nums label{color:var(--muted);align-items:center;gap:4px;font-size:11.5px;display:flex}.crop-nums input{background:var(--panel2);border:1px solid var(--border);width:52px;height:26px;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;border-radius:6px;padding:0 6px;font-size:12px}.crop-nums input:focus{border-color:var(--accent);outline:none}.crop-nums input::-webkit-outer-spin-button{opacity:.25}.crop-nums input::-webkit-inner-spin-button{opacity:.25}#canvasArea{background:radial-gradient(1200px 500px at 50% -10%, #58a6ff0d, transparent 60%), var(--bg);flex:1;justify-content:center;align-items:center;min-height:0;padding:22px;display:flex}#canvasWrap{line-height:0;position:relative}#view{box-shadow:0 0 0 1px var(--border), 0 18px 50px -12px #000000a6;background:#000;border-radius:4px;display:block}#cropOverlay{touch-action:none;position:absolute;inset:0}#cropOverlay.hidden{display:none}#cropRect{cursor:move;background:linear-gradient(#ffffff42,#ffffff42) 33.33% 0/1px 100% no-repeat,linear-gradient(#ffffff42,#ffffff42) 66.66% 0/1px 100% no-repeat,linear-gradient(#ffffff42,#ffffff42) 0 33.33%/100% 1px no-repeat,linear-gradient(#ffffff42,#ffffff42) 0 66.66%/100% 1px no-repeat;position:absolute;box-shadow:0 0 0 1px #ffffffe6,0 0 0 9999px #05080c9e}.handle{background:#fff;border:1px solid #0000008c;border-radius:2px;width:11px;height:11px;position:absolute;box-shadow:0 1px 3px #00000080}.handle.nw{cursor:nwse-resize;top:-6px;left:-6px}.handle.n{cursor:ns-resize;top:-6px;left:calc(50% - 5.5px)}.handle.ne{cursor:nesw-resize;top:-6px;right:-6px}.handle.e{cursor:ew-resize;top:calc(50% - 5.5px);right:-6px}.handle.se{cursor:nwse-resize;bottom:-6px;right:-6px}.handle.s{cursor:ns-resize;bottom:-6px;left:calc(50% - 5.5px)}.handle.sw{cursor:nesw-resize;bottom:-6px;left:-6px}.handle.w{cursor:ew-resize;top:calc(50% - 5.5px);left:-6px}#baLabels{pointer-events:none;line-height:1.4;position:absolute;inset:0}#baLabels.hidden{display:none}.ba{letter-spacing:.06em;text-transform:uppercase;color:#dfe5ee;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0d12b8;border:1px solid #ffffff29;border-radius:12px;padding:3px 9px;font-size:11px;font-weight:600;position:absolute;top:10px}.ba.before{left:10px}.ba.after{color:var(--accent);border-color:#58a6ff73;right:10px}#statusbar{background:var(--panel);border-top:1px solid var(--border);height:30px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;align-items:center;gap:10px;padding:0 14px;font-size:11.5px;display:flex}.st-sep{background:var(--border);width:1px;height:14px}.hint{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.hint kbd{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:2px 5px;font:11px/1 inherit}#toast{color:var(--text);border:1px solid var(--border);opacity:0;pointer-events:none;z-index:50;background:#20262f;border-radius:8px;padding:9px 16px;font-size:12.5px;font-weight:500;transition:opacity .18s,transform .18s;position:fixed;bottom:46px;left:50%;transform:translate(-50%)translateY(8px);box-shadow:0 10px 30px #00000080}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}#toast.hidden{display:none}.hidden{display:none!important}