.password-requirements {
    font-size: 14px;
    color: #666;
}
.password-field-container {
    position: relative;
    display: flex;
    align-items: center;
}
    .password-field-container input {
        padding-right: 40px !important;
    }

.password-toggle-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #B5B5C3;
    z-index: 2;
    pointer-events: auto;
}

    .password-toggle-btn:hover {
        color: #7E8299;
    }

    .password-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

.requirement-item {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

    .requirement-item::before {
        content: '•';
        color: #ddd;
        margin-right: 8px;
        transition: color 0.3s ease;
    }

    .requirement-item.valid {
        color: #28a745;
    }

        .requirement-item.valid::before {
            color: #28a745;
        }

    .requirement-item.invalid {
        color: #dc3545;
    }

        .requirement-item.invalid::before {
            color: #dc3545;
        }

.progress-container {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #28a745;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

.strength-status {
    font-size: 13px;
    font-weight: 500;
}

    .strength-status.match {
        color: #28a745;
    }

    .strength-status.no-match {
        color: #dc3545;
    }