* Scope styles to the container so they don't break the rest of your Bubble app */
    #container { 
        text-align: center;
        padding-bottom: 40px; /*unsure*/
    }
body {
  font-family: 'Roboto', sans-serif;
}
    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;
}
#auth-container {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #ccc;
        text-align: center;
}
#auth-container label {
  display: block;
  margin: 0 auto 0 auto; /* auto centers it horizontally */
  font-weight: bold;
  max-width: 300px;         /* Match this to your input width */
  text-align: left;         /* Keeps the label text left-aligned while the label itself is centered */
}

#auth-container input {
  display: block;
  margin: 5px auto 20px auto;  /* auto centers the block horizontally */
  width: 100%;
  max-width: 300px;
  padding: 8px;
}

/* Also center your buttons */
#auth-container button {
  display: block;
  margin: 10px auto;
padding: 10px 20px;  /* Make these match your preferred button size */
  font-size: 16px;
}