body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f0f0f0; }

#ui-panel {
    position: fixed; top: 20px; left: 20px; z-index: 9999;
    background: white; padding: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#board {
    width: 5000px; /* Massive canvas for dragging */
    height: 5000px;
    position: relative; 
    cursor: grab;
}

.pin {
    position: absolute; /* This makes the X/Y coordinates work */
    width: 200px;
    background: white;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.2s;
}

.pin:active { cursor: grabbing; box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.pin img { width: 100%; pointer-events: none; }