fix: Improve Embedding Pool UI styling

- Add dedicated CSS for embedding-pool-main-panel
- Style discovered providers list with proper cards
- Fix toggle switch visibility
- Add info-message component styling
- Update renderDiscoveredProviders() to use CSS classes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ccw/src/templates/dashboard-css/31-api-settings.css

@@ -2095,4 +2095,171 @@ select.cli-input {
 
 .capabilities-checkboxes .checkbox-label {
   font-size: 0.875rem;
+}
+
+/* ========== Embedding Pool Section ========== */
+.embedding-pool-main-panel {
+  padding: 1.5rem;
+}
+
+.embedding-pool-main-panel .panel-header {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.embedding-pool-main-panel .panel-header h2 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.5rem 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+}
+
+.embedding-pool-main-panel .panel-header h2 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: hsl(var(--primary));
+}
+
+.embedding-pool-main-panel .settings-section {
+  margin-bottom: 1.5rem;
+  padding: 1.25rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+}
+
+.embedding-pool-main-panel .settings-section .section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.embedding-pool-main-panel .settings-section .section-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.embedding-pool-main-panel .form-group {
+  margin-bottom: 1.25rem;
+}
+
+.embedding-pool-main-panel .form-group:last-child {
+  margin-bottom: 0;
+}
+
+.embedding-pool-main-panel .form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+}
+
+.embedding-pool-main-panel .form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid hsl(var(--border));
+}
+
+/* Discovered Providers List */
+.discovered-providers-list {
+  margin-top: 1rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.discovered-providers-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.5);
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.discovered-providers-header h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.discovered-providers-header .provider-count {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.discovered-provider-item:last-child {
+  border-bottom: none;
+}
+
+.discovered-provider-item.excluded {
+  opacity: 0.5;
+  background: hsl(var(--muted) / 0.3);
+}
+
+.discovered-provider-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.discovered-provider-info .provider-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: hsl(var(--primary));
+}
+
+.discovered-provider-info .provider-icon.excluded {
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.discovered-provider-keys {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.discovered-provider-actions .btn-sm {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+/* Info Message */
+.info-message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.3);
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.info-message svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
 }