/* Canvas headers */

.canvas-header {
    position: absolute;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    transition: background 0.2s, box-shadow 0.2s;
    z-index: 1;
    min-width: 60px;
    white-space: nowrap;
}

.canvas-header:hover {
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(64, 201, 255, 0.1);
}

.canvas-header[contenteditable="true"] {
    cursor: text !important;
    user-select: text !important;
    white-space: normal;
    word-break: break-word;
    outline: 2px solid rgba(64, 201, 255, 0.3) !important;
    background: rgba(0, 0, 0, 0.95) !important;
}

.canvas-header.dragging {
    opacity: 0.8;
    cursor: grabbing;
    box-shadow: 0 4px 20px rgba(64, 201, 255, 0.2);
}

/* Selected canvas headers */
.canvas-header.selected {
    background: rgba(0, 0, 0, 0.8) !important;
    border: none !important;
    box-shadow: 
        0 0 20px rgba(64, 201, 255, 0.2),
        0 0 36px rgba(64, 201, 255, 0.15),
        0 0 52px rgba(64, 201, 255, 0.1),
        0 0 68px rgba(64, 201, 255, 0.06),
        0 0 84px rgba(64, 201, 255, 0.03) !important;
    z-index: 10001 !important;
    border-radius: 6px;
}