body { font-family: 'Inter', sans-serif; overflow: hidden; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Canvas Pattern Background */
.canvas-bg {
    background-color: #f1f5f9;
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 20px 20px;
}
.dark .canvas-bg {
    background-color: #0f172a;
    background-image: radial-gradient(#334155 1px, transparent 1px);
}

/* Tooltip hack */
.tool-btn:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #1e293b;
    color: white;
    font-size: 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 50;
    pointer-events: none;
}

/* Prevent scrolling/gestures ONLY on the canvas area */
#canvasContainer {
    touch-action: none;
}

.modal-overlay {
    backdrop-filter: blur(2px);
}

/* Checkerboard pattern for transparency indication */
.bg-checkerboard {
    background-color: #ffffff;
    background-image: 
        linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
        linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
        linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .bg-checkerboard {
    background-color: #1e293b;
    background-image: 
        linear-gradient(45deg, #0f172a 25%, transparent 25%), 
        linear-gradient(-45deg, #0f172a 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #0f172a 75%), 
        linear-gradient(-45deg, transparent 75%, #0f172a 75%);
}