.editor-canvas-area{background:var(--background);display:flex;flex-direction:column;overflow-y:auto;overflow-x:visible;position:relative}.editor-canvas-area .calendar-pages-bar,.editor-canvas-area .postcard-pages-bar{flex-shrink:0;z-index:10}.canvas-wrapper{position:relative;flex:1;display:flex;justify-content:center;align-items:center;overflow:visible;padding:var(--spacing-lg);min-height:0}.canvas-wrapper.canvas-overflowing{align-items:flex-start}@media(min-width:769px){.editor-canvas-area.has-calendar-bar:not(.calendar-bar-hidden) .canvas-wrapper{align-items:center}}.editor-canvas-area.has-postcard-bar .canvas-wrapper{align-items:center}@media(max-width:768px){.editor-canvas-area{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.canvas-wrapper{overflow:visible}}.canvas-wrapper .canvas-container{position:relative;box-shadow:0 4px 20px #00000026;background:#fff;border-radius:2px;max-width:100%;max-height:100%;transition:width .3s ease,height .3s ease,max-width .3s ease,max-height .3s ease;flex-shrink:0}.canvas-wrapper .canvas-container.has-mask{background:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#fff}.canvas-wrapper .canvas-container canvas{display:block;max-width:100%;height:auto;transition:width .3s ease,height .3s ease}.out-of-bounds-tooltip{position:absolute;bottom:var(--spacing-md);left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:8px;padding:10px 16px;background:#fff3cd;border:1px solid #ffc107;border-radius:var(--border-radius);box-shadow:var(--box-shadow);font-size:14px;font-weight:500;color:#856404;pointer-events:none;animation:outOfBoundsTooltipFade .2s ease}.out-of-bounds-tooltip.hidden{display:none!important}.quality-overlay-tooltip{position:fixed;z-index:1000;padding:8px 12px;background:#000000d9;color:#fff;font-size:13px;border-radius:6px;max-width:280px;pointer-events:none;box-shadow:0 2px 8px #0003}.quality-overlay-tooltip.hidden{display:none!important}.out-of-bounds-tooltip-icon{font-size:18px}@keyframes outOfBoundsTooltipFade{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.canvas-wrapper .canvas-container{position:relative;display:inline-block}.canvas-wrapper .canvas-container .upper-canvas{position:absolute!important;top:0!important;left:0!important;transition:width .3s ease,height .3s ease}.canvas-wrapper .canvas-container .lower-canvas{position:relative!important;display:block;transition:width .3s ease,height .3s ease}.canvas-wrapper .canvas-container.has-mask{overflow:hidden}.canvas-wrapper .canvas-container.has-mask canvas{clip-path:url(#product-mask)}.canvas-loading{position:absolute;inset:0;background:#ffffffe6;display:flex;align-items:center;justify-content:center;z-index:10}.canvas-loading-spinner{width:48px;height:48px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.canvas-overlay,.canvas-guides{position:absolute;inset:0;pointer-events:none}.canvas-guide-line{position:absolute;background:var(--primary);opacity:.5;z-index:5}.canvas-guide-line.horizontal{height:1px;width:100%}.canvas-guide-line.vertical{width:1px;height:100%}.canvas-controls{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.canvas-control-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--surface);color:var(--text-primary);box-shadow:var(--box-shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .2s}.canvas-control-btn:hover{background:var(--primary);color:#fff;transform:scale(1.1)}.canvas-minimap{position:absolute;bottom:var(--spacing-lg);left:var(--spacing-lg);width:150px;height:100px;background:#fff;border:1px solid var(--border);border-radius:var(--border-radius);box-shadow:var(--box-shadow);overflow:hidden;display:none}.canvas-minimap canvas{width:100%;height:100%;object-fit:contain}