* Scope styles to the container so they don't break the rest of your Bubble app */

    #container { 

        text-align: center;

        padding-bottom: 40px; /*unsure*/

    }

    

    ul { 

        padding: 0; /*unsure*/

        list-style: none; 

        display: block; 

        width: 400px; 

        margin: 0 auto 0px auto; /*unsure*/

        text-align: center; 

        /* Responsive width: 95% of screen, but cap it so it doesn't get huge */

         width: 95%;           

         max-width: 320px;     /* Set this slightly larger than your li max-width */

    }

    

    .group { 

        border: 1px dashed #aaa; 

        padding: 10px; 

        border-radius: 8px; 

        min-height: 150px;

    }

    .group.locked {

        border: 2px solid #2e7d32; /* Solid green border */

        background-color: #e8f5e9; /* Light green background */

        cursor: default;           /* Change cursor back to normal */

    }

    

    li { 

        /*min-height: 50px;*/

        width: 90%;

        padding: 10px; 

        border: 1px solid #ccc; 

        margin: 5px auto; 

        background: #f9f9f9; 

        cursor: move; 

        max-width: 300px; 

    }

    

    .dragging { opacity: 0.5; }



    #action-btn {

        display: block;
        margin: 0px auto;
        text-align: center;
        padding: 15px 30px;

        font-size: 16px;

        cursor: pointer;

        font-family: inherit;

    }



    #action-btn:disabled {

        background-color: #ccc;

        color: #666;

        cursor: not-allowed;

        border: none;

    }

    

    /* 3. Style when the button is ENABLED (Not disabled) */

#action-btn:not(:disabled) {

    background-color: #e8f5e9 !important; /* Green-ish background */

    color: #2e7d32 !important;            /* Green text */

    border: 2px solid #2e7d32 !important; /* Green border */

}

    

    .feedback {

        max-width: 300px;

        margin: 0 auto 15px auto; /*Center it*/

        min-height: 20px;

        margin-top: 5px;

        margin-bottom: 15px; /* Added so it doesn't touch the next group */

        font-weight: bold;

        font-size: 14px;

        text-align: center;

        /* Optional: helps ensure the text stays contained */

        word-wrap: break-word; 

        padding: 0 10px;

    }

    

    #drag-ghost {

    background: #f9f9f9;

    border: 1px solid #ccc;

    padding: 10px;

    border-radius: 8px;

    /*width: 200px;*/ /* Match your li width (300px total with padding) */

    pointer-events: none;

    z-index: 9999;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

        list-style: none;

        text-align: center;

        /* ADD THESE */

    margin: 0 !important;

    box-sizing: border-box !important;

}