[FEATURE] Clean up checkbox border in UI

Problem

The checkboxes in the UI currently have a thick black border that looks outdated and visually heavy. It doesn't match the overall modern style of the rest of the interface and can be distracting, especially when working with multiple checkboxes in the same view.

Solution

Remove or soften the black border around checkboxes by updating the CSS to make them visually lighter and cleaner. This could be done by using a subtle border or relying only on the native browser focus outline, or using a soft box-shadow to indicate focus without being too aggressive.

Alternative

I considered leaving the current styling as-is or completely redesigning the checkbox component. However, a simple tweak to the border styling provides the necessary visual improvement without requiring major changes or added complexity.

Anything else?

This is a small but impactful visual improvement. I'm attaching before/after screenshots showing how the checkbox looked before the change and how it looks now with the fix applied. I believe this makes the UI feel more modern and polished.

Let me know if you'd like me to turn this into a PR, I've already implemented and tested the fix locally.

Locate the checkbox styling in the UI CSS and inspect the current border and focus treatment. Compare the rendered result with the attached before/after images; done means the border is visually lighter without losing a clear focus indication.