.drag-handle {
    position: absolute; top: -13px; left: 50%;
    transform: translateX(-50%);
    width: min(48px, 60%); height: 22px;
    border-radius: 999px;
    background: rgba(102,126,234,.9);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; z-index: 20;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, background .2s ease, transform .2s ease;
    box-shadow: 0 4px 10px -4px rgba(102,126,234,.9);
    touch-action: none; user-select: none;
}
.device:hover .drag-handle { opacity: 1; visibility: visible; pointer-events: auto; }
.device.dragging .drag-handle { opacity: 1; visibility: visible; pointer-events: auto; cursor: grabbing; }
.drag-handle:hover { transform: translateX(-50%) scale(1.06); }
.drag-handle svg { pointer-events: none; }

.layer-badge {
    position: absolute; top: -11px; right: -10px;
    min-width: 24px; height: 22px; padding: 0 7px;
    border-radius: 999px;
    border: 1px solid rgba(102,126,234,.35);
    background: rgba(255,255,255,.96);
    color: var(--primary);
    font-size: 11px; font-weight: 700; font-family: inherit; line-height: 1;
    cursor: pointer; z-index: 26;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, transform .15s ease;
    box-shadow: 0 2px 8px -3px rgba(102,126,234,.9);
    touch-action: none; user-select: none;
}
.device:hover .layer-badge, .device.dragging .layer-badge { opacity: 1; visibility: visible; pointer-events: auto; }
.layer-badge:hover { background: rgba(102,126,234,.15); transform: scale(1.1); }

.layer-inline-input {
    position: absolute; top: -11px; right: -10px;
    width: 52px; height: 22px; padding: 0 4px;
    border-radius: 999px;
    border: 1.5px solid var(--primary);
    background: #fff; color: var(--primary);
    font-size: 12px; font-weight: 700; font-family: inherit;
    text-align: center; outline: 0; z-index: 30;
    box-shadow: 0 4px 12px -4px rgba(102,126,234,.9);
    -moz-appearance: textfield;
}
.layer-inline-input::-webkit-outer-spin-button,
.layer-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.device-remove-btn {
    position: absolute; top: -11px; left: -10px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid rgba(239,68,68,.35);
    background: rgba(255,255,255,.96);
    color: #ef4444;
    padding: 0; font-family: inherit;
    cursor: pointer; z-index: 26;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease, transform .15s ease;
    box-shadow: 0 2px 8px -3px rgba(239,68,68,.9);
    touch-action: none; user-select: none;
}
.device:hover .device-remove-btn, .device.dragging .device-remove-btn { opacity: 1; visibility: visible; pointer-events: auto; }
.device-remove-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; transform: scale(1.15); }
.device-remove-btn svg { pointer-events: none; }

@media (hover: none) {
    .drag-handle { opacity: .65; visibility: visible; pointer-events: auto; }
    .layer-badge { opacity: .75; visibility: visible; pointer-events: auto; }
    .device-remove-btn { opacity: .75; visibility: visible; pointer-events: auto; }
}