.signup-content {
    margin-top: 20px; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}
.signup-container {
    max-width: 400px;
    background: rgba(51, 51, 51, 0.8);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
}
.password-strength-text {
    margin-top: 10px;
    font-weight: bold;
}
.too-short {
    color: red;
}
.very-weak {
    color: red;
}
.weak {
    color: orange;
}
.good {
    color: yellow;
}
.strong {
    color: green;
}
.invalid {
    color: red;
}
.valid {
    color: green;
}
#password-criteria ul {
    list-style-type: none;
    padding: 0;
}
#password-criteria li.invalid::before {
    content: '✗ ';
    color: red;
}
#password-criteria li.valid::before {
    content: '✓ ';
    color: green;
}
.input-group-text {
    cursor: pointer;
}
.message-box {
    display: none;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}