On Accessories screen, locked/unlocked state is confusing
### Feature Description

### What is happening?

On Accessories screen, the locked/unlocked state is confusing:

<img width="129" alt="Image" src="https://github.com/user-attachments/assets/6c5967ae-6438-45f8-8b67-6a628018b494" /><p>

The icons above indicates that the grayed out icon indicates the currently selected state and the non-grayed out icon indicates the currently unselected state.

### What you expect to happen?

Locked/Unlocked state should be more explicit. Maybe something like this:

<img width="129" alt="Image" src="https://github.com/user-attachments/assets/2fd853de-5eb9-4dc1-90d0-de80501254ef" /><p>

<img width="129" alt="Image" src="https://github.com/user-attachments/assets/e64eacac-9376-42b7-b969-ad7fadb81225" /><p>

Maybe refer to feature request [Improved contrast between selected and deselected controls on modal](https://github.com/homebridge/homebridge-config-ui-x/issues/2343)
