.shared-canvas{--canvas-surface:var(--surface,#fff);--canvas-ink:var(--text,#263330);--canvas-muted:var(--muted,#677970);--canvas-line:var(--line,#dbe3de);--canvas-accent:var(--accent,#39775f);color:var(--canvas-ink);border:1px solid var(--canvas-line);border-radius:14px;background:var(--canvas-surface);overflow:hidden;min-width:0;text-align:left}
.shared-canvas-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-bottom:1px solid var(--canvas-line)}
.shared-canvas-title{font-size:14px;margin-right:auto}.shared-canvas-view-controls{display:flex;align-items:center;gap:4px}.shared-canvas button{font:inherit;font-size:12px;min-width:32px;min-height:32px;padding:5px 9px;border:1px solid var(--canvas-line);border-radius:6px;color:var(--canvas-ink);background:var(--canvas-surface);cursor:pointer}.shared-canvas button:hover{border-color:var(--canvas-accent);background:var(--soft,#f0f5f2)}.shared-canvas button:disabled{opacity:.4;cursor:default}.shared-canvas button:focus-visible{outline:2px solid var(--canvas-accent);outline-offset:2px}.shared-canvas [hidden]{display:none!important}.shared-canvas-zoom{font-size:11px;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.shared-canvas-save-state{font-size:11px;color:var(--canvas-muted)}.shared-canvas-save-state.is-error{color:var(--danger,#a83232)}
.shared-canvas-selection{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:8px 16px;border-bottom:1px solid var(--canvas-line);min-height:34px}.shared-canvas-selection-label{margin-right:auto;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--canvas-muted)}
.shared-canvas-stage{position:relative;isolation:isolate;overflow:hidden;height:clamp(320px,54vh,620px);min-height:320px;background-color:var(--canvas,#f5f7f5);background-image:radial-gradient(var(--canvas-line) 1px,transparent 1px);background-size:var(--canvas-grid-size,24px) var(--canvas-grid-size,24px);background-position:var(--canvas-grid-x,0) var(--canvas-grid-y,0);touch-action:none;cursor:grab;outline:none;overscroll-behavior:contain}
.shared-canvas-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--canvas-accent)}.shared-canvas-stage.is-dragging,.shared-canvas-stage.is-panning,.shared-canvas-stage.is-panning .shared-canvas-object{cursor:grabbing}.shared-canvas-world{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}.shared-canvas-object{position:absolute;box-sizing:border-box;background:var(--canvas-surface);border:1px solid var(--canvas-line);border-radius:8px;box-shadow:0 3px 12px #14291c0d;pointer-events:auto;cursor:move;user-select:none;outline:none}.shared-canvas-object.is-selected,.shared-canvas-object:focus-visible{outline:2px solid var(--canvas-accent);outline-offset:2px}.shared-canvas-media{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:7px;background:repeating-conic-gradient(#e9ece9 0% 25%,#fafbfa 0% 50%) 0 0/16px 16px}.shared-canvas-media img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.shared-canvas-placeholder{position:absolute;inset:12px;display:grid;place-items:center;font-size:13px;line-height:1.5;text-align:center;color:var(--canvas-muted);overflow-wrap:anywhere;pointer-events:none}.shared-canvas-media img:not([hidden])+.shared-canvas-placeholder{display:none}.shared-canvas-object.image-unavailable .shared-canvas-placeholder{display:grid!important}.shared-canvas-object.image-unavailable img{opacity:.15}.shared-canvas-caption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:6px 9px;background:color-mix(in srgb,var(--canvas-surface) 94%,transparent);border-top:1px solid var(--canvas-line);border-radius:0 0 7px 7px;font-size:11px;pointer-events:none}.shared-canvas-object-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shared-canvas-object-status{font-size:10px;color:var(--canvas-muted);white-space:nowrap}.shared-canvas-object[data-status=failed] .shared-canvas-object-status{color:var(--danger,#a83232)}.shared-canvas .shared-canvas-resize{position:absolute;right:-7px;bottom:-7px;z-index:1;width:16px;height:16px;min-width:16px;min-height:16px;padding:0;border:2px solid var(--canvas-surface);border-radius:4px;background:var(--canvas-accent);cursor:nwse-resize;opacity:0}.shared-canvas-object.is-selected .shared-canvas-resize,.shared-canvas-object:focus-visible .shared-canvas-resize{opacity:1}.shared-canvas-empty{position:absolute;top:40%;left:24px;right:24px;margin:0;color:var(--canvas-muted);font-size:13px;line-height:1.8;text-align:center;pointer-events:none}.shared-canvas-help{margin:0;padding:10px 16px;border-top:1px solid var(--canvas-line);font-size:11px;line-height:1.6;color:var(--canvas-muted)}
@media(max-width:600px){.shared-canvas-toolbar{padding:10px;gap:8px}.shared-canvas-title{font-size:13px}.shared-canvas-save-state{width:100%}.shared-canvas-selection{padding:8px 10px}.shared-canvas-selection-label{max-width:38%;font-size:11px}.shared-canvas button{min-height:38px}.shared-canvas-stage{height:380px}.shared-canvas-help{padding:8px 10px;font-size:10px}.shared-canvas .shared-canvas-resize{width:24px;height:24px;min-width:24px;min-height:24px;right:-11px;bottom:-11px}}
.shared-canvas-host-fill{display:flex;min-width:0;min-height:0}.shared-canvas-host-fill>.shared-canvas{display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;width:100%;height:100%}.shared-canvas-host-fill .shared-canvas-toolbar,.shared-canvas-host-fill .shared-canvas-selection,.shared-canvas-host-fill .shared-canvas-help{flex:none}.shared-canvas-host-fill .shared-canvas-stage{flex:1 1 0;height:auto;min-height:0}
/* Alignment marks are transient guides, never persisted canvas objects. */
.shared-canvas-guides{position:absolute;inset:0;pointer-events:none;z-index:1000001}.shared-canvas-guide{position:absolute;background:var(--accent,#3761de);pointer-events:none}.shared-canvas-guide.x{top:-100000px;height:200000px;width:1px}.shared-canvas-guide.y{left:-100000px;width:200000px;height:1px}
/* Selection bounds and progress stay in the editor, outside exported image pixels. */
.shared-canvas[data-multiselect=true] .shared-canvas-stage{cursor:crosshair}.shared-canvas-stage.is-selecting{cursor:crosshair}.shared-canvas-marquee{position:absolute;border:1px solid var(--canvas-accent);background:color-mix(in srgb,var(--canvas-accent) 12%,transparent);box-sizing:border-box;pointer-events:none;z-index:1000002}
.shared-canvas-object[data-commerce=true] .shared-canvas-caption{display:none}.shared-canvas-object[data-commerce=true] .shared-canvas-placeholder{padding:12px;border-radius:7px;background:#fafbfae6;align-content:center;gap:8px}.shared-canvas-placeholder.is-processing::before{content:'';width:20px;height:20px;justify-self:center;border:2px solid var(--canvas-line);border-top-color:var(--canvas-accent);border-radius:50%;animation:shared-canvas-progress 1s linear infinite}
@keyframes shared-canvas-progress{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.shared-canvas-placeholder.is-processing::before{animation:none}}