.spinner {
        border: 4px solid rgba(255, 255, 255, 0.3);
        border-top: 4px solid #fff;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        animation: spin 1s linear infinite;
        display: inline-block;
        margin-left: 8px;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .spinner.hidden {
        display: none;
    }
    /* Base styles for all input fields */
.sign__input {
    background-color: #181818 !important; /* Force dark background */
    color: #c0c0c0 !important; /* Force light text */
    border: .5px solid #222227; /* Optional border */
    caret-color: #c0c0c0; /* Ensures the caret matches the text color */
}

/* Maintain styles when focused */
.sign__input:focus {
    background-color: #181818 !important; /* Force dark background */
    color: #c0c0c0 !important; /* Force light text */
    outline: none; /* Remove default browser outline */
    border-color: #fc4600; /* Optional focus border */
}

/* Maintain styles when filled */
.sign__input:not(:placeholder-shown) {
    background-color: #181818 !important; /* Force dark background */
    color: #c0c0c0 !important; /* Force light text */
}

/* Handle autofill background (for saved credentials or autofill suggestions) */
input:-webkit-autofill {
    background-color: #181818 !important;
    color: #c0c0c0 !important;
    -webkit-text-fill-color: #c0c0c0 !important;
    transition: background-color 5000s ease-in-out 0s; /* Prevent autofill styling override */
}