.canvas-layout{width:100%;position:relative;overflow:hidden}.canvas-container{cursor:grab;contain:layout;width:100%;position:relative;overflow:hidden}.canvas-container:active{cursor:grabbing}.canvas-container.horizontal-mode{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overflow:auto hidden!important}.canvas-container.horizontal-mode::-webkit-scrollbar{height:6px}.canvas-container.horizontal-mode::-webkit-scrollbar-track{background:0 0}.canvas-container.horizontal-mode::-webkit-scrollbar-thumb{background:#8080804d;border-radius:3px}.canvas-container.horizontal-mode::-webkit-scrollbar-thumb:hover{background:#80808080}.canvas-container.horizontal-mode{scrollbar-width:thin;scrollbar-color:#8080804d transparent}.canvas-scroll-indicator{pointer-events:none;z-index:100;width:60px;transition:opacity .3s;position:absolute;top:0;bottom:0}.canvas-scroll-indicator--left{background:linear-gradient(to right,var(--canvas-bg,#f4f4f2),transparent);left:0}.canvas-scroll-indicator--right{background:linear-gradient(to left,var(--canvas-bg,#f4f4f2),transparent);right:0}.canvas{transform-origin:50% 0;will-change:transform;backface-visibility:hidden;width:100%;height:100%;position:relative}.canvas:not(.panning){transition:transform .2s ease-out}@media (max-width:768px){.canvas-layout{width:100%;margin-left:0;margin-right:0}.canvas-container{padding-left:10px!important;padding-right:10px!important}.canvas-layout.editing-mode .draggable-element{touch-action:none}}.grid-overlay{pointer-events:none;transform-origin:50% 0;will-change:transform;backface-visibility:hidden;background-image:linear-gradient(#8080801a 1px,#0000 1px),linear-gradient(90deg,#8080801a 1px,#0000 1px);background-size:20px 20px;width:100%;height:100%;position:absolute;top:0;left:0}.grid-overlay:not(.panning){transition:transform .2s ease-out}.draggable-element{-webkit-user-select:none;user-select:none;border:2px solid #0000}.draggable-element.dragging{will-change:transform;opacity:.8;border-color:#3b82f6;z-index:9999!important}.draggable-element:not(.dragging){will-change:auto}.draggable-element img{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-o-object-fit:contain;object-fit:contain;max-width:100%;max-height:100%}.element-controls{opacity:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe6;border-radius:4px;gap:4px;padding:4px;transition:opacity .2s;display:flex;position:absolute;top:-40px;left:0}.draggable-element:hover .element-controls{opacity:1}.control-button{color:#fff;cursor:pointer;background:#6b7280;border:none;border-radius:3px;padding:4px 8px;font-size:12px;transition:background-color .1s}.control-button:hover{background:#4b5563}.resize-handle{cursor:se-resize;opacity:0;background:#3b82f6;border:2px solid #fff;border-radius:50%;width:12px;height:12px;transition:opacity .15s;position:absolute;bottom:-4px;right:-4px}.rotate-handle{cursor:grab;opacity:0;background:#10b981;border:2px solid #fff;border-radius:50%;width:12px;height:12px;transition:opacity .15s;position:absolute;top:-20px;right:50%;transform:translate(50%)}.rotate-handle:active{cursor:grabbing}.draggable-element:hover .resize-handle,.draggable-element:hover .rotate-handle{opacity:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.new-element{animation:.3s ease-out fadeInScale}.canvas-layout.editing-mode .canvas-container *{-webkit-user-select:none;user-select:none}@media (prefers-color-scheme:dark){.grid-overlay{background-image:linear-gradient(#ffffff1a 1px,#0000 1px),linear-gradient(90deg,#ffffff1a 1px,#0000 1px)}.element-controls{background:#2d3748e6}}.canvas-empty-state{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.canvas-layout:not(.editing-mode) .draggable-element{cursor:default}.canvas-layout:not(.editing-mode) .draggable-element:hover{border-color:#0000}