/* Infinite canvas viewport: the camera transform lives on #canvas, chrome is drawn in screen space. */
#workspace{position:relative;overflow:hidden!important;padding:0!important;overscroll-behavior:none}
#workspace>.canvas-title{position:absolute;top:8px;left:12px;right:12px;margin:0;z-index:6}
#workspace>footer{position:absolute;left:12px;bottom:8px;padding:0!important;z-index:6;pointer-events:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#canvas-wrap{position:absolute!important;inset:0;width:auto!important;height:auto!important;margin:0!important;overflow:hidden;touch-action:none}
#canvas{--iz:1;position:absolute;left:0;top:0;width:1000px;height:700px;transform-origin:0 0;overflow:visible!important}
/* Promoted only while panning (see applyCamera in canvas-interactions.js): a permanent layer keeps a stale raster scale and exhausts tile memory. */
#canvas.camera-moving{will-change:transform}
#canvas .layer{cursor:default}
#canvas .layer.selected:not([data-outline]){outline-width:calc(1.5px * var(--iz))!important;outline-offset:0!important}
/* A layer with its own outline keeps it while selected; the selection ring is drawn inside the box instead. */
#canvas .layer.selected[data-outline]::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;outline:calc(1.5px * var(--iz)) solid var(--shell-accent,#9371ff);outline-offset:calc(-1.5px * var(--iz));z-index:2147483647}

#canvas .layer>.handle{width:calc(8px * var(--iz))!important;height:calc(8px * var(--iz))!important;border-width:calc(1px * var(--iz))!important}
#canvas .layer>.handle[data-corner=nw]{left:calc(-4px * var(--iz))!important;top:calc(-4px * var(--iz))!important}
#canvas .layer>.handle[data-corner=ne]{right:calc(-4px * var(--iz))!important;top:calc(-4px * var(--iz))!important}
#canvas .layer>.handle[data-corner=sw]{left:calc(-4px * var(--iz))!important;bottom:calc(-4px * var(--iz))!important}
#canvas .layer>.handle[data-corner=se]{right:calc(-4px * var(--iz))!important;bottom:calc(-4px * var(--iz))!important}
#workspace[data-tool=frame] #canvas-wrap,#workspace[data-tool=rectangle] #canvas-wrap,#workspace[data-tool=shader] #canvas-wrap,#workspace[data-tool=frame] #canvas .layer,#workspace[data-tool=rectangle] #canvas .layer,#workspace[data-tool=shader] #canvas .layer{cursor:crosshair}
#workspace[data-tool=text] #canvas-wrap,#workspace[data-tool=text] #canvas .layer{cursor:text}
#workspace[data-tool=hand] #canvas-wrap,#workspace[data-tool=hand] #canvas .layer,#workspace.space-pan #canvas-wrap,#workspace.space-pan #canvas .layer{cursor:grab}
#workspace.panning #canvas-wrap,#workspace.panning #canvas .layer{cursor:grabbing!important}

#canvas-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}
#canvas-overlay .guide-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#canvas-overlay .guide{stroke:#ff3d7f;stroke-width:1;shape-rendering:crispEdges}
#canvas-overlay .guide-gap{stroke-dasharray:3 2}
#canvas-overlay .guide-label{position:absolute;transform:translate(-50%,-50%);background:#ff3d7f;color:#fff;font:10px/14px Inter,system-ui,sans-serif;padding:0 4px;border-radius:3px;white-space:nowrap}
#canvas-overlay .marquee{position:absolute;border:1px solid var(--shell-accent,#b93cdb);background:color-mix(in srgb,var(--shell-accent,#b93cdb) 10%,transparent)}
#canvas-overlay .marquee[data-kind=draw]{background:transparent}
#canvas-overlay .hover-box,#canvas-overlay .drop-target{position:absolute;box-sizing:border-box;border:1.5px solid var(--shell-accent,#b93cdb)}
#canvas-overlay .hover-child{position:absolute;box-sizing:border-box;border:1px dashed color-mix(in srgb,var(--shell-accent,#b93cdb) 60%,transparent)}
#canvas-overlay .selection-ring{position:absolute;box-sizing:border-box;border:1.5px solid var(--shell-accent,#9371ff)}
#canvas-overlay .selection-ring>.handle{position:absolute;width:8px;height:8px;box-sizing:border-box;background:#fff;border:1px solid var(--shell-accent,#9371ff);pointer-events:auto}
#canvas-overlay .selection-ring>.handle[data-corner=nw]{left:-5px;top:-5px;cursor:nwse-resize}#canvas-overlay .selection-ring>.handle[data-corner=ne]{right:-5px;top:-5px;cursor:nesw-resize}#canvas-overlay .selection-ring>.handle[data-corner=sw]{left:-5px;bottom:-5px;cursor:nesw-resize}#canvas-overlay .selection-ring>.handle[data-corner=se]{right:-5px;bottom:-5px;cursor:nwse-resize}
.moving #canvas-overlay .clipped-selection,#canvas.spacing-measure~#canvas-overlay .clipped-selection{display:none}
#canvas-overlay .drop-line{position:absolute;background:var(--shell-accent,#b93cdb);border-radius:1px}
#canvas-overlay [hidden]{display:none}
/* Spacing handles (selected auto-layout frame): gaps are red hatched bands, padding is blue; both show a value badge. */
#canvas-overlay .spacing-layer{position:absolute;inset:0}
#canvas-overlay .spacing-band{--spacing:#f2541b;position:absolute;box-sizing:border-box;pointer-events:auto;display:flex;align-items:center;justify-content:center}
#canvas-overlay .spacing-gap{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--spacing) 45%,transparent) 0 1px,transparent 1px 5px)}
#canvas-overlay .spacing-padding{--spacing:#3d8bff}
#canvas-overlay .spacing-padding:hover,#canvas-overlay .spacing-padding.active{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--spacing) 45%,transparent) 0 1px,transparent 1px 5px)}
#canvas-overlay .spacing-gap:hover,#canvas-overlay .spacing-gap.active{background-color:color-mix(in srgb,var(--spacing) 14%,transparent)}
#canvas-overlay .spacing-band[data-axis=y]{cursor:row-resize}
#canvas-overlay .spacing-band[data-axis=x]{cursor:col-resize}
#canvas-overlay .spacing-padding[data-axis=y]{cursor:ns-resize}
#canvas-overlay .spacing-padding[data-axis=x]{cursor:ew-resize}
#canvas-overlay .spacing-bar{display:block;flex:none;background:var(--spacing);border-radius:1px;pointer-events:none}
#canvas-overlay .spacing-band[data-axis=y] .spacing-bar{width:12px;height:2px}
#canvas-overlay .spacing-band[data-axis=x] .spacing-bar{width:2px;height:12px}
#canvas-overlay .spacing-badge{display:none;position:absolute;left:50%;top:50%;transform:translate(6px,6px);min-width:18px;padding:0 5px;border-radius:4px;background:var(--spacing);color:#fff;font:600 10px/18px Inter,system-ui,sans-serif;text-align:center;white-space:nowrap;pointer-events:none;z-index:1}
#canvas-overlay .spacing-band:hover .spacing-badge,#canvas-overlay .spacing-band.active .spacing-badge{display:block}
#workspace[data-spacing-drag=y] #canvas-wrap,#workspace[data-spacing-drag=y] #canvas-wrap *{cursor:row-resize!important}
#workspace[data-spacing-drag=x] #canvas-wrap,#workspace[data-spacing-drag=x] #canvas-wrap *{cursor:col-resize!important}
#canvas-overlay .frame-label{position:absolute;pointer-events:auto;cursor:default;color:#9a9a9a;font:11px/16px Inter,system-ui,sans-serif;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;user-select:none}
#canvas-overlay .frame-label:hover{color:var(--shell-accent,#b93cdb)}

#canvas-toolbar button.tool-active,#canvas-toolbar #select-tool.tool-active{background:#3d3d3d}
#canvas-toolbar #select-tool:not(.tool-active){background:transparent}
#canvas-toolbar button.tool-active img{opacity:1}
#frame-presets{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);width:260px;max-height:min(420px,48vh);overflow:auto;background:#1f1f1f;border:1px solid #333;border-radius:10px;padding:8px;z-index:31;box-shadow:0 8px 30px #0006}
#frame-presets[hidden]{display:none}
#frame-presets p{margin:2px 6px 8px;color:#888;font-size:10px;line-height:1.4}
#frame-presets strong{display:block;font-size:10px;font-weight:500;color:#8a8a8a;margin:8px 6px 4px}
#frame-presets button{display:flex;width:100%;justify-content:space-between;align-items:center;background:transparent;border:0;padding:5px 8px;font-size:11px;color:#ccc;border-radius:5px}
#frame-presets button:hover{background:#333}
#frame-presets small{color:#7a7a7a;font-size:10px}

#canvas-menu{position:fixed;z-index:60;min-width:210px;background:#262626;border:1px solid #3a3a3a;border-radius:8px;padding:4px;box-shadow:0 10px 30px #0007}
#canvas-menu button{display:flex;width:100%;justify-content:space-between;gap:20px;background:transparent;border:0;padding:6px 8px;font-size:11px;color:#ddd;border-radius:5px;text-align:left}
#canvas-menu button:hover{background:var(--shell-accent,#b93cdb);color:#fff}
#canvas-menu kbd{font:inherit;color:#8a8a8a}
#canvas-menu button:hover kbd{color:#fff}
#canvas-menu hr{border:0;border-top:1px solid #383838;margin:4px 2px}

#layers .layer-row{position:relative}
#layers .layer-row.is-hidden{opacity:.45}
.layer-row-toggles{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;gap:2px}
.layer-toggle{display:none;width:20px;height:20px;align-items:center;justify-content:center;border-radius:4px;cursor:pointer}
.layer-toggle img{width:13px!important;height:13px!important}
.layer-toggle:hover{background:#ffffff14}
.layer-row:hover .layer-toggle,.layer-toggle.on{display:flex}
.layer-toggle.on img{opacity:1!important}
#inspector select.sizing-mode{margin-top:4px;height:24px!important;font-size:10px!important;padding:2px 6px!important}
html[data-ui-theme=light] #frame-presets,html[data-ui-theme=light] #canvas-menu{background:#fff;border-color:#ddd}
html[data-ui-theme=light] #frame-presets button,html[data-ui-theme=light] #canvas-menu button{color:#333}

/* Measuring a child's smallest width for spacing drags: words do not break mid-word. */
#canvas.measuring-min .layer{overflow-wrap:normal!important;word-break:normal!important}
#canvas.spacing-measure .layer>.handle{display:none!important}