feat(ui): update LoRA pool widget color scheme and empty state styling

- Change primary accent color from green to blue across multiple components
- Update background colors for better visual consistency
- Improve empty state styling in TagsSection with better padding and background
- Add box-sizing to BaseModelSection for consistent layout
- Update CSS comments to reflect new color scheme

vue-widgets/src/components/LoraPoolWidget.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
 <style scoped>
 .lora-pool-widget {
   padding: 12px;
-  background: var(--comfy-menu-bg, #1a1a1a);
+  background: rgba(40, 44, 52, 0.6);
   border-radius: 4px;
   height: 100%;
   display: flex;

vue-widgets/src/components/lora-pool/LoraPoolSummaryView.vue

@@ -106,10 +106,10 @@ defineEmits<{
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(66, 153, 225, 0.15);
-  border: 1px solid rgba(59, 130, 246, 0.4);
+  border: 1px solid rgba(66, 153, 225, 0.4);
   border-radius: 4px;
-  color: #3b82f6;
+  color: #4299e1;
 }
 
 .summary-view__badge-icon {

vue-widgets/src/components/lora-pool/modals/TagsModal.vue

@@ -144,12 +144,12 @@ const toggleTag = (tag: string) => {
   border-color: var(--fg-color, #fff);
 }
 
-/* Include variant - green when selected */
+/* Include variant - blue when selected */
 .tags-modal--include .tag-chip--selected,
 .tag-chip--selected {
-  background: rgba(34, 197, 94, 0.2);
+  background: rgba(66, 153, 225, 0.2);
-  border-color: rgba(34, 197, 94, 0.6);
+  border-color: rgba(66, 153, 225, 0.6);
-  color: #22c55e;
+  color: #4299e1;
 }
 
 /* Exclude variant - red when selected */

vue-widgets/src/components/lora-pool/sections/BaseModelSection.vue

@@ -77,6 +77,7 @@ const getCount = (name: string) => {
   color: var(--fg-color, #fff);
   opacity: 0.5;
   text-align: center;
+  box-sizing: border-box;
 }
 
 .section__chips {

vue-widgets/src/components/lora-pool/sections/FoldersSection.vue

@@ -160,7 +160,7 @@ const removeExclude = (path: string) => {
 }
 
 .section__column-title--include {
-  color: #22c55e;
+  color: #4299e1;
 }
 
 .section__column-title--exclude {
@@ -214,9 +214,9 @@ const removeExclude = (path: string) => {
 }
 
 .section__add-btn--include:hover {
-  background: rgba(34, 197, 94, 0.2);
+  background: rgba(66, 153, 225, 0.2);
-  border-color: #22c55e;
+  border-color: #4299e1;
-  color: #22c55e;
+  color: #4299e1;
 }
 
 .section__add-btn--exclude:hover {

vue-widgets/src/components/lora-pool/sections/LicenseSection.vue

@@ -104,8 +104,8 @@ defineEmits<{
 }
 
 .toggle-switch--active .toggle-switch__track {
-  background: rgba(34, 197, 94, 0.3);
+  background: rgba(66, 153, 225, 0.3);
-  border-color: rgba(34, 197, 94, 0.6);
+  border-color: rgba(66, 153, 225, 0.6);
 }
 
 .toggle-switch__thumb {
@@ -122,7 +122,7 @@ defineEmits<{
 
 .toggle-switch--active .toggle-switch__thumb {
   transform: translateX(16px);
-  background: #22c55e;
+  background: #4299e1;
   opacity: 1;
 }
 

vue-widgets/src/components/lora-pool/sections/TagsSection.vue

@@ -107,7 +107,7 @@ defineEmits<{
 }
 
 .section__column-title--include {
-  color: #22c55e;
+  color: #4299e1;
 }
 
 .section__column-title--exclude {
@@ -119,10 +119,15 @@ defineEmits<{
 }
 
 .section__empty {
-  padding: 6px 0;
+  width: 100%;
-  font-size: 11px;
+  padding: 8px 12px;
+  background: var(--comfy-input-bg, #333);
+  border-radius: 4px;
+  font-size: 12px;
   color: var(--fg-color, #fff);
-  opacity: 0.4;
+  opacity: 0.5;
+  text-align: center;
+  box-sizing: border-box;
 }
 
 .section__chips {

vue-widgets/src/components/lora-pool/shared/FilterChip.vue

@@ -82,9 +82,9 @@ const variantClass = computed(() => {
 
 /* Variants */
 .filter-chip--include {
-  background: rgba(34, 197, 94, 0.15);
+  background: rgba(66, 153, 225, 0.15);
-  border-color: rgba(34, 197, 94, 0.4);
+  border-color: rgba(66, 153, 225, 0.4);
-  color: #22c55e;
+  color: #4299e1;
 }
 
 .filter-chip--exclude {