[Bug][UI] Selected/Hovered option in 'Compatible Protocol' dropdown appears as a solid black block

[shangxinyu1]

Environment

Platform: macOS / Windows (Cross-platform)
Version: 0.1.12-nightly.20260415
Component: Custom Provider Settings / Protocol Selector

Steps to Reproduce

1. Navigate to Settings → AI Model Providers.
2. Click "+" to create a new custom provider.
3. Open the "兼容协议" (Compatible Protocol) dropdown menu.
4. Hover over the options (e.g., Anthropic) or observe the currently selected state.

Actual Behavior

• One or more options in the dropdown appear as a solid black rectangular block.
• The text within the black block is completely invisible (black text on black background).
• This creates a jarring visual contrast with the rest of the light-themed UI.

Expected Behavior

• All dropdown options should be clearly legible.
• Hover/Selection states should use a subtle highlight color (e.g., light gray or brand orange) that maintains high text contrast.
• Visual style should remain consistent with the active light theme.

Impact

Severity: P0 (Critical) - Visual Regression / Accessibility Failure.

• Users cannot read or identify the protocol they are selecting.
• Breaks the core usability of the custom provider configuration.
• Significant brand image damage due to "broken" UI feel.

Root Cause Speculation

1. CSS Token Leak: Dark mode styling (background color) is likely leaking into the light mode dropdown component.
2. Missing Foreground Color: The hover/selection state sets a dark background but fails to update the text color to a contrasting light shade.
3. Library Conflict: Potential styling conflict between the base UI library (e.g., Radix/LobeUI) and custom overrides.

Screenshot