.cls_draggable_item {
        /*
        padding: 12px;
        margin: 6px 0;
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        border-radius: 8px;
        */
        cursor: grab;
        transition: background-color 0.3s;
        user-select: none;
        touch-action: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cls_draggable_item:focus { box-shadow: 0 0 0 2px #80bdff; }
    .highlight { background-color: #ffe066 !important; }
    .hover-highlight { background-color: #cce5ff !important; }
    .drop-preview { background-color: #007bff !important; color: #fff; }

    /*
    .ghost {
        position: fixed;
        pointer-events: none;
        opacity: 0.5;
        background: #e0e0e0;
        border: 2px dashed #aaa;
        border-radius: 8px;
        box-sizing: border-box;
        padding: 12px;
        margin: 0;
        z-index: 9999;
        left: 0; top: 0;
        cursor: grabbing;
        font-size: inherit !important;
        transform: scale(1) !important;
    }
    */
    
    
    .ghost {
        position: fixed;
        transform: scale(1) !important;
        transform-origin: top left;
        pointer-events: none;
        opacity: 0.9;
        border: 1px dashed rgba(0,0,0,0.2);
        background: rgba(200, 220, 255, 0.25);
        z-index: 9999;
        font-size: inherit !important;
        line-height: inherit;
        box-sizing: border-box;
    }
    

    @keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
        100% { transform: translateX(0); }
    }
    .shake { animation: shake 0.3s ease; }

    .sr-only {
        padding:8px; 
        overflow:hidden;
        clip:rect(0,0,0,0); 
        white-space:nowrap; 
        border:1px solid #333;
    }