.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border-radius: 6px;
    transition: all 0.2s;
    cursor: pointer;
    font-size: 10px;
    gap: 4px;
    color: #f8fafc;
    background: transparent;
    border: 1px solid transparent;
    text-align: center;
}



.tool-btn.active {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.tool-btn.active i {
    color: #ffffff;
}

.top-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
    color: #cbd5e1;
    border: 1px solid transparent;
}

.top-btn:hover {
    background-color: #334155;
    color: #f8fafc;
}

.top-btn:active {
    background-color: #475569;
}

/* Background Engineering Grid (rendered efficiently via CSS for the wrapper) */
#canvas-wrapper {
    background-image: 
        linear-gradient(to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px);
        
    background-position: center center;
    /* We'll control the background size via JS to match zoom level */
}

/* Fix text selection when dragging */
canvas {
    user-select: none;
    -webkit-user-select: none;
}
/* Enhanced Elegance */
canvas { filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.02)); }
.top-btn { border-radius: 8px; font-weight: 500; font-family: system-ui, sans-serif; letter-spacing: -0.01em; }
.tool-btn { border-radius: 8px; font-weight: 500; letter-spacing: -0.01em; }
.tool-btn:hover { background-color: #334155; color: #f8fafc; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.04); }


.tool-btn svg { width: var(--icon-size, 20px) !important; height: var(--icon-size, 20px) !important; transition: all 0.1s; }
.tool-btn { font-size: var(--icon-font, 10px) !important; transition: font-size 0.1s; }