.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#workspace {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0d0d10;
    /* Darker background for contrast with surface elements */
    overflow: hidden;
    /* Scroll later if we add zoom */
    padding: 32px;
}

/* Canvas Area */
.canvas-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Canvas Stack Engine */
#canvas-stack {
    position: relative;
    box-shadow: var(--shadow-lg);
    display: none;
    /* Hidden until document is created */
    border-radius: 4px;
    background-image:
        linear-gradient(45deg, #1A1A23 25%, transparent 25%),
        linear-gradient(-45deg, #1A1A23 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1A1A23 75%),
        linear-gradient(-45deg, transparent 75%, #1A1A23 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #242430;
}

#canvas-stack.active {
    display: block;
}

#canvas-stack canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
}

#canvas-stack.tool-pencil {
    cursor: crosshair;
}

#canvas-stack.tool-zoom {
    cursor: zoom-in;
}

#canvas-stack.tool-zoom.alt-down {
    cursor: zoom-out;
}

#canvas-stack.is-panning {
    cursor: grabbing !important;
}

#no-image-state {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#no-image-state.hidden {
    opacity: 0;
}


#canvas-stack.tool-move {
    cursor: move;
}

#canvas-stack.tool-pencil,
#canvas-stack.tool-rect-select,
#canvas-stack.tool-oval-select,
#canvas-stack.tool-polygon-select {
    cursor: crosshair;
}

#canvas-stack.tool-rect-select.shift-down,
#canvas-stack.tool-oval-select.shift-down,
#canvas-stack.tool-polygon-select.shift-down {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0v24M0 12h24" stroke="white" stroke-width="3"/><path d="M12 0v24M0 12h24" stroke="black" stroke-width="1"/><path d="M18 16v8M14 20h8" stroke="white" stroke-width="3"/><path d="M18 16v8M14 20h8" stroke="black" stroke-width="1"/></svg>') 12 12, crosshair;
}

#canvas-stack.tool-rect-select.alt-down,
#canvas-stack.tool-oval-select.alt-down,
#canvas-stack.tool-polygon-select.alt-down {
    cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 0v24M0 12h24" stroke="white" stroke-width="3"/><path d="M12 0v24M0 12h24" stroke="black" stroke-width="1"/><path d="M14 20h8" stroke="white" stroke-width="3"/><path d="M14 20h8" stroke="black" stroke-width="1"/></svg>') 12 12, crosshair;
}

#selection-overlay,
#selection-drag-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    pointer-events: none;
}