:root{--nav-height: 56px;--right-sidebar-width: 380px;--max-content-width: 1400px;--primary-accent: #3b82f6;--border-color: #e5e7eb;--bg-primary: #fff;--bg-secondary: #f9fafb;--bg-tertiary: #fff;--bg-default: #f3f4f6;--bg-hover: #eff6ff;--border-dashed: #d1d5db;--text-primary: #1f2937;--text-secondary: #4b5563;--text-muted: #9ca3af}#center-content{flex:1;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:2rem;height:calc(100vh - var(--nav-height));overflow:hidden}.toolbar-group-right{width:100%;max-width:var(--max-content-width);margin:10px auto;display:flex;justify-content:flex-end}#canvas-viewport{width:100%;height:100%;max-width:var(--max-content-width);max-height:100%;min-width:380px;min-height:380px;margin:0 auto;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 6px #0000000d}#canvas-viewport.drag-over{border-color:var(--primary-accent);background-color:var(--bg-hover)}#crop-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-muted, #6b7f99);cursor:pointer;-webkit-user-select:none;user-select:none;background:none}#crop-placeholder svg{width:54px;height:54px;stroke:var(--primary-accent,#4583f7);stroke-width:1.6;margin-bottom:1.1rem;opacity:.8}#crop-placeholder span{font-weight:500;font-size:1.13rem;color:var(--text-secondary, #42526e);letter-spacing:.01em}#cropper-container{position:relative;overflow:hidden;margin:0 auto;background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 0 / 20px 20px;box-shadow:0 0 10px #0000001a;max-width:100%;max-height:100%;border-radius:8px}#image-to-crop{position:absolute;top:0;left:0;z-index:10;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}#live-preview-canvas{position:absolute;z-index:20;transition:border-radius .3s ease;pointer-events:none;background:transparent}.crop-box{position:absolute;border:2px dashed #ffffff;outline:1px solid rgba(0,0,0,.5);box-shadow:0 0 0 9999px #00000080;cursor:grab;touch-action:none;z-index:30;-webkit-user-select:none;user-select:none;will-change:transform,width,height}.crop-box:active{cursor:grabbing}.crop-handle{position:absolute;width:12px;height:12px;background-color:var(--primary-accent);border:2px solid #ffffff;box-shadow:0 0 4px #00000080;z-index:40}.crop-handle.tl{top:-6px;left:-6px;cursor:nwse-resize}.crop-handle.tr{top:-6px;right:-6px;cursor:nesw-resize}.crop-handle.bl{bottom:-6px;left:-6px;cursor:nesw-resize}.crop-handle.br{bottom:-6px;right:-6px;cursor:nwse-resize}.crop-handle.t,.crop-handle.b,.crop-handle.l,.crop-handle.r{display:none}@media(max-width:1024px){#app-container{flex-direction:column;height:auto}#center-content{padding:1rem;height:70vh;grid-template-rows:auto 1fr auto}}