Flowfile 0.5.1__py3-none-any.whl → 0.5.4__py3-none-any.whl

flowfile/web/static/assets/{designer-8da3ba3a.css → DesignerView-49abb835.css}

@@ -1,9 +1,9 @@
 
-.button-group[data-v-c0f9acc7] {
+.button-group[data-v-182a7a87] {
   display: flex;
   gap: 10px;
 }
-.button-group .el-button[data-v-c0f9acc7] {
+.button-group .el-button[data-v-182a7a87] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -15,219 +15,282 @@
   font-size: 13px;
   font-weight: 500 !important;
   letter-spacing: 0.01em;
-  box-shadow: 0 1px 2px rgba(1, 5, 13, 0.08);
+  box-shadow: var(--shadow-xs);
   flex-shrink: 0;
 }
 
 /* Run button - normal state */
-.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]) {
-  background-color: rgb(2, 27, 45) !important;
-  border: 1px solid rgb(17, 64, 97) !important;
-  color: white !important;
+.button-group .el-button[data-v-182a7a87]:first-child:not([disabled]) {
+  background-color: var(--primary-blue) !important;
+  border: 1px solid var(--primary-blue-light) !important;
+  color: var(--color-text-inverse) !important;
 }
 
 /* Run button - hover state */
-.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]):hover {
-  background-color: rgba(65, 55, 200, 0.95) !important;
-  border-color: rgba(65, 55, 200, 1) !important;
+.button-group .el-button[data-v-182a7a87]:first-child:not([disabled]):hover {
+  background-color: var(--color-button-primary) !important;
+  border-color: var(--color-button-primary) !important;
 }
 
 /* Run button - disabled state */
-.button-group .el-button:first-child[disabled][data-v-c0f9acc7] {
-  background-color: rgba(16, 24, 40, 0.3) !important;
-  border: 1px solid rgba(16, 24, 40, 0.2) !important;
-  color: rgba(255, 255, 255, 0.8) !important;
+.button-group .el-button:first-child[disabled][data-v-182a7a87] {
+  background-color: var(--color-gray-400) !important;
+  border: 1px solid var(--color-gray-400) !important;
+  color: var(--color-text-inverse) !important;
   cursor: not-allowed;
+  opacity: 0.7;
 }
 
 /* Cancel button */
-.button-group .el-button[data-v-c0f9acc7]:nth-child(2) {
-  background-color: rgba(220, 53, 69, 0.9) !important;
-  border: 1px solid rgba(220, 53, 69, 0.95) !important;
-  color: white !important;
+.button-group .el-button[data-v-182a7a87]:nth-child(2) {
+  background-color: var(--color-danger) !important;
+  border: 1px solid var(--color-danger) !important;
+  color: var(--color-text-inverse) !important;
 }
 
 /* Cancel button - hover state */
-.button-group .el-button[data-v-c0f9acc7]:nth-child(2):hover {
-  background-color: rgba(200, 35, 51, 0.95) !important;
-  border-color: rgba(200, 35, 51, 1) !important;
+.button-group .el-button[data-v-182a7a87]:nth-child(2):hover {
+  background-color: var(--color-danger-hover) !important;
+  border-color: var(--color-danger-hover) !important;
 }
 
 /* Active state for both buttons */
-.button-group .el-button[data-v-c0f9acc7]:active {
+.button-group .el-button[data-v-182a7a87]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
 
-.browser-title[data-v-11a74179] {
+.browser-title[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 16px;
   font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: var(--color-text-primary);
 }
-.mode-selector[data-v-11a74179] {
+.mode-selector[data-v-bcb824aa] {
   display: flex;
   justify-content: center;
 }
-.browser-content[data-v-11a74179] {
+.browser-content[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   height: calc(100% - 116px); /* Adjust based on header height */
   overflow: hidden;
 }
-.browser-toolbar[data-v-11a74179] {
+.browser-toolbar[data-v-bcb824aa] {
   padding: 16px;
-  background-color: #fff;
-  border-bottom: 1px solid #e9ecef;
+  background-color: var(--color-background-primary);
+  border-bottom: 1px solid var(--color-border-primary);
+}
+.browser-action-btn[data-v-bcb824aa] {
+  background-color: var(--color-file-browser-bg);
+  color: var(--color-text-inverse);
 }
-.path-navigation[data-v-11a74179] {
+.path-navigation[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
-.nav-button[data-v-11a74179] {
+.nav-button[data-v-bcb824aa] {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 8px 16px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--color-border-primary);
   border-radius: 4px;
-  background-color: white;
-  color: #495057;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-secondary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.nav-button[data-v-11a74179]:hover:not(:disabled) {
-  background-color: #f8f9fa;
-  border-color: #ced4da;
+.nav-button[data-v-bcb824aa]:hover:not(:disabled) {
+  background-color: var(--color-background-secondary);
+  border-color: var(--color-border-secondary);
 }
-.current-path[data-v-11a74179] {
+.current-path[data-v-bcb824aa] {
   flex: 1;
   padding: 8px 12px;
-  background-color: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-border-primary);
   border-radius: 4px;
-  font-family: monospace;
-  color: #495057;
+  font-family: var(--font-family-mono);
+  color: var(--color-text-secondary);
 }
-.search-container[data-v-11a74179] {
+.search-container[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.search-input[data-v-11a74179] {
+.search-input[data-v-bcb824aa] {
   flex: 1;
 }
-.browser-main[data-v-11a74179] {
+.browser-main[data-v-bcb824aa] {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
 }
-.file-item[data-v-11a74179] {
-  border: 1px solid #e9ecef;
+.file-item[data-v-bcb824aa] {
+  border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
-.file-item[data-v-11a74179]:hover {
+.file-item[data-v-bcb824aa]:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
+}
+.file-item.selected[data-v-bcb824aa] {
+  border-color: var(--color-info);
+  border-width: 2px;
+  background-color: var(--color-background-selected);
+  box-shadow: var(--shadow-md);
+  position: relative;
 }
-.file-item.selected[data-v-11a74179] {
-  border-color: #3b82f6;
-  background-color: #eff6ff;
+.file-item.selected[data-v-bcb824aa]::after {
+  content: "check_circle";
+  font-family: "Material Icons";
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  color: var(--color-info);
+  font-size: 18px;
+  background: var(--color-background-primary);
+  border-radius: 50%;
 }
-.file-item-content[data-v-11a74179] {
+.file-item-content[data-v-bcb824aa] {
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.file-icon-wrapper[data-v-11a74179] {
+.file-icon-wrapper[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
 }
-.file-icon[data-v-11a74179] {
+.file-icon[data-v-bcb824aa] {
   width: 24px;
   height: 24px;
-  color: #6b7280;
+  color: var(--color-text-tertiary);
 }
-.file-details[data-v-11a74179] {
+.file-details[data-v-bcb824aa] {
   flex: 1;
   min-width: 0;
 }
-.file-name[data-v-11a74179] {
+.file-name[data-v-bcb824aa] {
   font-weight: 500;
-  color: #1f2937;
+  color: var(--color-text-primary);
   margin-bottom: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.file-info[data-v-11a74179] {
+.file-info[data-v-bcb824aa] {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
-.browser-actions[data-v-11a74179] {
+.browser-actions[data-v-bcb824aa] {
   padding: 16px;
-  background-color: #f8f9fa;
-  border-top: 1px solid #e9ecef;
+  background-color: var(--color-background-secondary);
+  border-top: 1px solid var(--color-border-primary);
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 72px;
   box-sizing: border-box;
-  gap: 12px; /* Add gap between buttons */
+  gap: 12px;
 }
-.selected-file[data-v-11a74179] {
-  color: #6b7280;
+.selected-file[data-v-bcb824aa] {
+  color: var(--color-text-secondary);
   font-size: 14px;
 }
-.loading-state[data-v-11a74179],
-.error-state[data-v-11a74179] {
+.loading-state[data-v-bcb824aa],
+.error-state[data-v-bcb824aa],
+.empty-state[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
-  color: #6b7280;
+  color: var(--color-text-secondary);
+}
+.error-state[data-v-bcb824aa] {
+  color: var(--color-danger);
+}
+.error-content[data-v-bcb824aa] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+.error-icon[data-v-bcb824aa] {
+  font-size: 48px;
+  color: var(--color-danger, #ef4444);
+}
+.error-message[data-v-bcb824aa] {
+  max-width: 300px;
 }
-.error-state[data-v-11a74179] {
-  color: #dc2626;
+.empty-state[data-v-bcb824aa] {
+  flex-direction: column;
+  gap: 8px;
+  color: var(--color-text-secondary);
 }
-.hidden-file[data-v-11a74179] {
+.empty-state .material-icons[data-v-bcb824aa] {
+  font-size: 48px;
   opacity: 0.5;
 }
-.file-browser[data-v-11a74179] {
+
+/* Refresh button styling */
+.refresh-button[data-v-bcb824aa] {
+  padding: 8px;
+  min-width: auto;
+}
+.refresh-button .material-icons[data-v-bcb824aa] {
+  transition: transform 0.3s ease;
+}
+.refresh-button .material-icons.spin[data-v-bcb824aa] {
+  animation: spin-bcb824aa 1s linear infinite;
+}
+@keyframes spin-bcb824aa {
+from {
+    transform: rotate(0deg);
+}
+to {
+    transform: rotate(360deg);
+}
+}
+.hidden-file[data-v-bcb824aa] {
+  opacity: 0.5;
+}
+.file-browser[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   height: 70vh; /* Set to 70% of viewport height */
-  background-color: white;
+  background-color: var(--color-background-primary);
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
 }
-.browser-content[data-v-11a74179] {
+.browser-content[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0; /* Enable proper flex child scrolling */
   overflow: hidden;
 }
-.browser-main[data-v-11a74179] {
+.browser-main[data-v-bcb824aa] {
   flex: 1;
   overflow-y: auto; /* Make this section scrollable */
   padding: 16px;
   min-height: 0; /* Enable proper flex child scrolling */
 }
-.grid-container[data-v-11a74179] {
+.grid-container[data-v-bcb824aa] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 16px;
@@ -235,25 +298,25 @@
 }
 
 /* Optional: if you want to maintain icon size consistency */
-.file-icon[data-v-11a74179] {
+.file-icon[data-v-bcb824aa] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
 
 /* Add new styles for sort controls */
-.search-and-sort-container[data-v-11a74179] {
+.search-and-sort-container[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.sort-controls[data-v-11a74179] {
+.sort-controls[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 180px; /* Prevent select from being too narrow */
 }
-.sort-direction-button[data-v-11a74179] {
+.sort-direction-button[data-v-bcb824aa] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -261,139 +324,142 @@
   height: 32px;
   padding: 0;
 }
-.controls-row[data-v-11a74179] {
+.controls-row[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
 }
-.form-hint[data-v-11a74179] {
+.form-hint[data-v-bcb824aa] {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--color-text-tertiary);
   margin-top: 8px;
   display: flex;
   align-items: center;
   gap: 6px;
   flex-wrap: wrap;
 }
-.preview-label[data-v-11a74179] {
-  color: #374151;
+.preview-label[data-v-bcb824aa] {
+  color: var(--color-text-secondary);
 }
-.form-hint code[data-v-11a74179] {
-  background-color: #f3f4f6;
+.form-hint code[data-v-bcb824aa] {
+  background-color: var(--color-background-secondary);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: monospace;
-  color: #1f2937;
+  color: var(--color-text-primary);
 }
-.auto-extension-hint[data-v-11a74179] {
-  color: #9ca3af;
+.auto-extension-hint[data-v-bcb824aa] {
+  color: var(--color-text-muted);
   font-style: italic;
 }
 
-.action-buttons[data-v-3359ec07] {
-  padding-left: 20px;
+.action-buttons[data-v-92d73926] {
+  padding-left: var(--spacing-5);
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: var(--spacing-2);
   height: 50px;
-  font-family:
-    "Inter",
-    "Roboto",
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
+  font-family: var(--font-family-base);
 }
-.action-btn[data-v-3359ec07] {
+.action-btn[data-v-92d73926] {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  height: 36px;
-  background-color: rgba(3, 11, 27, 0.05); /* Slightly darker background */
-  border: 1px solid rgba(16, 24, 40, 0.12); /* Darker border */
-  border-radius: 6px;
+  gap: var(--spacing-1-5);
+  padding: var(--spacing-2) var(--spacing-3);
+  height: 34px;
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
   cursor: pointer;
-  transition: all 0.2s ease;
-  color: rgb(2, 27, 45); /* Darker text color */
-  font-size: 13px;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  box-shadow: 0 1px 2px rgba(1, 5, 13, 0.08); /* Slightly darker shadow */
+  transition: all var(--transition-fast);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  box-shadow: var(--shadow-xs);
 }
-.action-btn[data-v-3359ec07]:hover {
-  background-color: rgba(16, 24, 40, 0.08); /* Darker hover background */
-  border-color: rgba(16, 24, 40, 0.18); /* Darker hover border */
+.action-btn[data-v-92d73926]:hover {
+  background-color: var(--color-background-tertiary);
+  border-color: var(--color-border-secondary);
 }
-.action-btn[data-v-3359ec07]:active {
+.action-btn[data-v-92d73926]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
-.btn-icon[data-v-3359ec07] {
-  font-size: 16px;
-  color: rgb(2, 27, 45); /* Darker icon color */
+.action-btn.active[data-v-92d73926] {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
 }
-.btn-text[data-v-3359ec07] {
+.btn-icon[data-v-92d73926] {
+  font-size: 18px;
+  color: var(--color-text-secondary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+.action-btn:hover .btn-icon[data-v-92d73926] {
+  color: var(--color-text-primary);
+}
+.action-btn.active .btn-icon[data-v-92d73926] {
+  color: var(--color-accent);
+}
+.btn-text[data-v-92d73926] {
   white-space: nowrap;
 }
-.settings-modal-content[data-v-3359ec07] {
-  padding: 16px;
-  font-family:
-    "Inter",
-    "Roboto",
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
-}
-.form-group[data-v-3359ec07] {
-  margin-bottom: 16px;
+.settings-modal-content[data-v-92d73926] {
+  padding: var(--spacing-4);
+  font-family: var(--font-family-base);
+}
+.form-group[data-v-92d73926] {
+  margin-bottom: var(--spacing-4);
 }
-.form-group label[data-v-3359ec07] {
+.form-group label[data-v-92d73926] {
   display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: rgba(16, 24, 40, 0.9);
+  margin-bottom: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
 }
-.quick-create-modal[data-v-3359ec07] {
-  padding: 16px 0;
+.quick-create-modal[data-v-92d73926] {
+  padding: var(--spacing-4) 0;
 }
-.quick-create-modal .form-group[data-v-3359ec07] {
-  margin-bottom: 20px;
+.quick-create-modal .form-group[data-v-92d73926] {
+  margin-bottom: var(--spacing-5);
 }
-.quick-create-modal label[data-v-3359ec07] {
+.quick-create-modal label[data-v-92d73926] {
   display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: rgba(16, 24, 40, 0.9);
+  margin-bottom: var(--spacing-2);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
 }
-.preview-text[data-v-3359ec07] {
-  padding: 12px;
-  background-color: rgba(3, 11, 27, 0.03);
-  border: 1px solid rgba(16, 24, 40, 0.08);
-  border-radius: 6px;
-  font-size: 13px;
-  color: rgba(16, 24, 40, 0.7);
+.preview-text[data-v-92d73926] {
+  padding: var(--spacing-3);
+  background-color: var(--color-background-muted);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
 }
-.preview-text code[data-v-3359ec07] {
-  background-color: rgba(16, 24, 40, 0.08);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
-  font-size: 12px;
+.preview-text code[data-v-92d73926] {
+  background-color: var(--color-background-tertiary);
+  padding: 2px var(--spacing-1-5);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
 }
-.dialog-footer[data-v-3359ec07] {
+.dialog-footer[data-v-92d73926] {
   display: flex;
-  gap: 8px;
+  gap: var(--spacing-2);
 }
 
-.status-wrapper[data-v-4aa2388b] {
+.status-wrapper[data-v-0ee1952b] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.flow-card[data-v-4aa2388b] {
+.flow-card[data-v-0ee1952b] {
   position: relative;
   width: 40px;
   height: 40px;
@@ -402,22 +468,22 @@
   cursor: help;
   overflow: hidden;
 }
-.flow-card[data-v-4aa2388b]:hover {
+.flow-card[data-v-0ee1952b]:hover {
   transform: translateY(-0.5px);
-  box-shadow: 0 4px 16px rgba(159, 129, 228, 0.25);
+  box-shadow: var(--shadow-lg);
 }
-.flow-animation[data-v-4aa2388b] {
+.flow-animation[data-v-0ee1952b] {
   width: 100%;
   height: 100%;
 }
 
 /* Flow Container */
-.flow-container[data-v-4aa2388b] {
+.flow-container[data-v-0ee1952b] {
   fill: #8c8caa;
 }
 
 /* Extra Thick Flow Lines with Gradient */
-.flow-line[data-v-4aa2388b] {
+.flow-line[data-v-0ee1952b] {
   fill: none;
   stroke: url(#lineGradient);
   stroke-width: 8; /* Extra thick lines */
@@ -427,35 +493,35 @@
 }
 
 /* Animation only when flowing */
-.is-flowing .flow-line[data-v-4aa2388b] {
-  animation: flowMove-4aa2388b 3s infinite linear;
+.is-flowing .flow-line[data-v-0ee1952b] {
+  animation: flowMove-0ee1952b 3s infinite linear;
 }
-.is-flowing .flow-line-2[data-v-4aa2388b] {
+.is-flowing .flow-line-2[data-v-0ee1952b] {
   animation-delay: -1s;
 }
-.is-flowing .flow-line-3[data-v-4aa2388b] {
+.is-flowing .flow-line-3[data-v-0ee1952b] {
   animation-delay: -2s;
 }
 
 /* Flow Particles - only visible when running */
-.flow-particle[data-v-4aa2388b] {
+.flow-particle[data-v-0ee1952b] {
   fill: #5256c6;
   opacity: 0;
 }
-.is-flowing .flow-particle[data-v-4aa2388b] {
-  animation: particleFlow-4aa2388b 3s infinite ease-in-out;
+.is-flowing .flow-particle[data-v-0ee1952b] {
+  animation: particleFlow-0ee1952b 3s infinite ease-in-out;
 }
-.particle-1[data-v-4aa2388b] {
+.particle-1[data-v-0ee1952b] {
   animation-delay: 0s;
 }
-.particle-2[data-v-4aa2388b] {
+.particle-2[data-v-0ee1952b] {
   animation-delay: -1s;
 }
-.particle-3[data-v-4aa2388b] {
+.particle-3[data-v-0ee1952b] {
   animation-delay: -2s;
 }
 /* Control Button */
-.control-button[data-v-4aa2388b] {
+.control-button[data-v-0ee1952b] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -463,25 +529,25 @@
   height: 32px;
   border-radius: 50%;
   border: none;
-  background: #8c8caa;
-  color: #4834d4;
+  background: var(--color-gray-400);
+  color: var(--color-button-primary);
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(76, 0, 255, 0.2);
+  box-shadow: var(--shadow-sm);
 }
-.control-button[data-v-4aa2388b]:hover {
-  background: #4834d4;
-  color: white;
+.control-button[data-v-0ee1952b]:hover {
+  background: var(--color-button-primary);
+  color: var(--color-text-inverse);
   transform: translateY(-1px);
-  box-shadow: 0 4px 16px rgba(76, 0, 255, 0.3);
+  box-shadow: var(--shadow-md);
 }
-.control-button.is-active[data-v-4aa2388b] {
-  background: #4834d4;
-  color: white;
+.control-button.is-active[data-v-0ee1952b] {
+  background: var(--color-button-primary);
+  color: var(--color-text-inverse);
 }
 
 /* Animations */
-@keyframes flowMove-4aa2388b {
+@keyframes flowMove-0ee1952b {
 0% {
     transform: translateX(0);
 }
@@ -489,7 +555,7 @@
     transform: translateX(-70px);
 }
 }
-@keyframes particleFlow-4aa2388b {
+@keyframes particleFlow-0ee1952b {
 0% {
     opacity: 0;
     transform: translateX(-10px) scale(0.8);
@@ -508,37 +574,37 @@
 }
 }
 
-.status-indicator[data-v-8ef0b204] {
+.status-indicator[data-v-4064b904] {
   position: relative;
   display: flex;
   align-items: center;
   margin-right: 8px;
 }
-.status-indicator[data-v-8ef0b204]::before {
+.status-indicator[data-v-4064b904]::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
 }
-.status-indicator.success[data-v-8ef0b204]::before {
+.status-indicator.success[data-v-4064b904]::before {
   background-color: #4caf50;
 }
-.status-indicator.failure[data-v-8ef0b204]::before {
+.status-indicator.failure[data-v-4064b904]::before {
   background-color: #f44336;
 }
-.status-indicator.warning[data-v-8ef0b204]::before {
+.status-indicator.warning[data-v-4064b904]::before {
   background-color: #f09f5dd1;
 }
-.status-indicator.unknown[data-v-8ef0b204]::before {
-  background-color: #ffffff;
+.status-indicator.unknown[data-v-4064b904]::before {
+  background-color: var(--color-text-muted);
 }
-.status-indicator.running[data-v-8ef0b204]::before {
+.status-indicator.running[data-v-4064b904]::before {
   background-color: #0909ca;
-  animation: pulse-8ef0b204 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: pulse-4064b904 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   box-shadow: 0 0 10px #0909ca;
 }
-@keyframes pulse-8ef0b204 {
+@keyframes pulse-4064b904 {
 0% {
     transform: scale(1);
     opacity: 1;
@@ -555,11 +621,11 @@
     box-shadow: 0 0 5px #0909ca;
 }
 }
-.tooltip-text[data-v-8ef0b204] {
+.tooltip-text[data-v-4064b904] {
   visibility: hidden;
   width: 120px;
-  background-color: black;
-  color: #fff;
+  background-color: var(--color-gray-800);
+  color: var(--color-text-inverse);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
@@ -571,29 +637,29 @@
   opacity: 0;
   transition: opacity 0.3s;
 }
-.status-indicator:hover .tooltip-text[data-v-8ef0b204] {
+.status-indicator:hover .tooltip-text[data-v-4064b904] {
   visibility: visible;
   opacity: 1;
 }
-.description-input[data-v-8ef0b204]:hover,
-.description-input[data-v-8ef0b204]:focus {
-  background-color: #e7e7e7; /* Slightly darker on hover/focus */
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover/focus */
+.description-input[data-v-4064b904]:hover,
+.description-input[data-v-4064b904]:focus {
+  background-color: var(--color-background-tertiary);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
 }
-.component-wrapper[data-v-8ef0b204] {
+.component-wrapper[data-v-4064b904] {
   position: relative; /* This makes the absolute positioning of the child relative to this container */
   max-width: 60px;
   overflow: visible; /* Allows children to visually overflow */
 }
-.description-display[data-v-8ef0b204] {
+.description-display[data-v-4064b904] {
   padding: 8px;
   width: 200px !important;
   max-height: 8px !important;
-  background-color: #ffffff; /* Light grey background */
-  border-radius: 4px; /* Rounded corners for a modern look */
-  cursor: pointer; /* Indicates the text can be clicked */
+  background-color: var(--color-background-primary);
+  border-radius: 4px;
+  cursor: pointer;
 }
-.overlay[data-v-8ef0b204] {
+.overlay[data-v-4064b904] {
   position: fixed; /* This is key for viewport-level positioning */
   width: 200px; /* Or whatever width you prefer */
   height: 200px; /* Or whatever height you prefer */
@@ -603,70 +669,72 @@
   z-index: 1000; /* High enough to float above everything else */
   /* Your existing styles for background, padding, etc. */
 }
-.node-button[data-v-8ef0b204] {
-  background-color: #ffffff;
+.node-button[data-v-4064b904] {
+  background-color: #dedede;
   border-radius: 10px;
   border-width: 0px;
 }
-.node-button[data-v-8ef0b204]:hover {
-  background-color: #f5f5f5;
+.node-button[data-v-4064b904]:hover {
+  background-color: var(--color-background-hover);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
-.overlay-content[data-v-8ef0b204] {
+.overlay-content[data-v-4064b904] {
   padding: 20px;
   border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
-.overlay-prompt[data-v-8ef0b204] {
+.overlay-prompt[data-v-4064b904] {
   margin-bottom: 10px;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 16px;
 }
-.description-input[data-v-8ef0b204] {
+.description-input[data-v-4064b904] {
   margin-bottom: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--color-border-primary);
   border-radius: 4px;
   padding: 10px;
   font-size: 14px;
-  height: 100px; /* Adjust based on your needs */
+  height: 100px;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
 }
-.selected[data-v-8ef0b204] {
-  border: 2px solid #828282;
+.selected[data-v-4064b904] {
+  border: 2px solid var(--color-accent);
 }
 
-.error-node[data-v-00eceaf3] {
+.error-node[data-v-840d2e40] {
   padding: 8px;
-  background: #ffcccc;
-  border-radius: 4px;
+  background: var(--color-node-error-bg);
+  border-radius: var(--border-radius-sm);
   font-size: 12px;
 }
 
-.custom-node[data-v-0887a495] {
+.custom-node[data-v-e650ee69] {
   border-radius: 4px;
   padding: 1px;
-  background-color: white;
+  background-color: var(--color-background-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 }
-.selected[data-v-0887a495] {
+.selected[data-v-e650ee69] {
   border: 2px solid #409eff;
 }
-.custom-node-header[data-v-0887a495] {
+.custom-node-header[data-v-e650ee69] {
   font-weight: 100;
   font-size: small;
   width: 20px;
   white-space: nowrap;
   overflow: visible;
   text-overflow: ellipsis;
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-base);
 }
-.description-display[data-v-0887a495] {
+.description-display[data-v-e650ee69] {
   position: relative;
   white-space: normal;
   min-width: 100px;
@@ -674,71 +742,75 @@
   width: auto;
   padding: 2px 4px;
   cursor: pointer;
-  background-color: rgba(185, 185, 185, 0.117);
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+  background-color: var(--color-background-secondary);
+  font-family: var(--font-family-base);
   display: flex;
   align-items: flex-start;
   gap: 4px;
   border-radius: 4px;
+  color: var(--color-text-primary);
 }
-.edit-icon[data-v-0887a495] {
+.edit-icon[data-v-e650ee69] {
   opacity: 0;
   transition: opacity 0.2s;
-  color: #0f275f;
+  color: var(--color-accent);
   cursor: pointer;
   display: flex;
   align-items: center;
   padding: 2px;
 }
-.description-display:hover .edit-icon[data-v-0887a495] {
+.description-display:hover .edit-icon[data-v-e650ee69] {
   opacity: 1;
 }
-.edit-icon[data-v-0887a495]:hover {
-  color: #051233;
+.edit-icon[data-v-e650ee69]:hover {
+  color: var(--color-accent-hover);
 }
-.description-text[data-v-0887a495] {
+.description-text[data-v-e650ee69] {
   margin: 0;
   white-space: pre-wrap;
   word-wrap: break-word;
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
 }
-.edit-overlay[data-v-0887a495] {
+.edit-overlay[data-v-e650ee69] {
   position: fixed;
   z-index: 1000;
-  background: white;
+  background: var(--color-background-primary);
   border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-lg);
 }
-.description-input[data-v-0887a495] {
+.description-input[data-v-e650ee69] {
   width: 200px;
   height: 75px;
   resize: both;
   padding: 4px;
-  border: 1px solid #0f275f;
+  border: 1px solid var(--color-accent);
   border-radius: 4px;
   font-size: small;
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
-  background-color: white;
+  font-family: var(--font-family-base);
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
 }
-.handle-input[data-v-0887a495] {
+.handle-input[data-v-e650ee69] {
   position: absolute;
   left: -8px;
 }
-.handle-output[data-v-0887a495] {
+.handle-output[data-v-e650ee69] {
   position: absolute;
   right: -8px;
 }
-.context-menu[data-v-0887a495] {
+.context-menu[data-v-e650ee69] {
   position: fixed;
-  z-index: 10000;
-  background-color: white;
+  z-index: var(--z-index-canvas-context-menu, 100002);
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
   border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-lg);
   padding: 4px 0;
   min-width: 120px;
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-base);
 }
-.context-menu-item[data-v-0887a495] {
+.context-menu-item[data-v-e650ee69] {
   padding: 8px 12px;
   display: flex;
   align-items: center;
@@ -746,192 +818,243 @@
   cursor: pointer;
   font-size: 13px;
   transition: background-color 0.2s;
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-base);
+  color: var(--color-text-primary);
+}
+.context-menu-item[data-v-e650ee69]:hover {
+  background-color: var(--color-background-hover);
 }
-.context-menu-item[data-v-0887a495]:hover {
-  background-color: #f5f5f5;
+.context-menu-item svg[data-v-e650ee69] {
+  color: var(--color-text-secondary);
 }
-.context-menu-item svg[data-v-0887a495] {
-  color: #555;
+.context-menu-item span[data-v-e650ee69] {
+  font-family: var(--font-family-base);
+}
+.context-menu-divider[data-v-e650ee69] {
+  height: 1px;
+  background-color: var(--color-border-primary);
+  margin: 4px 0;
 }
-.context-menu-item span[data-v-0887a495] {
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+.context-menu-item-danger[data-v-e650ee69] {
+  color: #dc3545;
+}
+.context-menu-item-danger[data-v-e650ee69]:hover {
+  background-color: rgba(220, 53, 69, 0.1);
+}
+.context-menu-item-danger svg[data-v-e650ee69] {
+  color: #dc3545;
 }
 
-.code-container[data-v-8bafe064] {
+.code-container[data-v-b36d237e] {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
-.code-header[data-v-8bafe064] {
+.code-header[data-v-b36d237e] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
 }
-.code-header h4[data-v-8bafe064] {
+.code-header h4[data-v-b36d237e] {
   margin: 0;
 }
-.header-actions[data-v-8bafe064] {
+.header-actions[data-v-b36d237e] {
   display: flex;
   gap: 12px;
 }
-.export-button[data-v-8bafe064],
-.refresh-button[data-v-8bafe064] {
+.export-button[data-v-b36d237e],
+.refresh-button[data-v-b36d237e] {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
-  background: #007acc;
-  color: white;
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
   border: none;
-  border-radius: 6px;
+  border-radius: var(--border-radius-md);
   cursor: pointer;
-  font-size: 14px;
-  transition: background 0.2s;
+  font-size: var(--font-size-base);
+  transition: background var(--transition-fast);
 }
-.export-button[data-v-8bafe064]:hover,
-.refresh-button[data-v-8bafe064]:hover:not(:disabled) {
-  background: #005a9e;
+.export-button[data-v-b36d237e]:hover,
+.refresh-button[data-v-b36d237e]:hover:not(:disabled) {
+  background: var(--color-accent-hover);
 }
-.refresh-button[data-v-8bafe064]:disabled {
-  background: #6c757d;
+.refresh-button[data-v-b36d237e]:disabled {
+  background: var(--color-gray-500);
   cursor: not-allowed;
 }
-.spinner[data-v-8bafe064] {
+.spinner[data-v-b36d237e] {
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid #ffffff;
+  border: 2px solid var(--color-text-inverse);
   border-radius: 50%;
   border-top-color: transparent;
-  animation: spin-8bafe064 0.8s linear infinite;
+  animation: spin-b36d237e 0.8s linear infinite;
 }
-@keyframes spin-8bafe064 {
+@keyframes spin-b36d237e {
 to {
     transform: rotate(360deg);
 }
 }
 
-.nodes-wrapper[data-v-63142f09] {
+.nodes-wrapper[data-v-0930336a] {
   display: flex;
   flex-direction: column;
-  gap: 5px;
-  padding: 6px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  gap: var(--spacing-1);
+  padding: var(--spacing-1-5);
+  background-color: var(--color-background-primary);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Style for search input */
-.search-input[data-v-63142f09] {
-  padding: 8px 16px;
-  margin-bottom: 8px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+.search-input[data-v-0930336a] {
+  padding: var(--spacing-2) var(--spacing-4);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-2);
+  border: 1px solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-sm);
+  background-color: var(--color-background-primary);
+  transition: border-color var(--transition-fast);
+}
+.search-input[data-v-0930336a]:focus {
+  outline: none;
+  border-color: var(--input-border-focus);
 }
-.category-container[data-v-63142f09] {
+.category-container[data-v-0930336a] {
   overflow: hidden;
-  border-radius: 4px;
+  border-radius: var(--border-radius-sm);
 }
-.category-header[data-v-63142f09] {
+.category-header[data-v-0930336a] {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 8px 16px;
-  background-color: #fafafa;
+  padding: var(--spacing-2) var(--spacing-4);
+  background-color: var(--color-background-muted);
   border: none;
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: background-color var(--transition-fast);
   height: 32px;
 }
-.category-header[data-v-63142f09]:hover {
-  background-color: #f5f5f5;
+.category-header[data-v-0930336a]:hover {
+  background-color: var(--color-background-tertiary);
 }
-.category-title[data-v-63142f09] {
-  font-size: small;
-  font-weight: 200;
-  color: #333;
+.category-title[data-v-0930336a] {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-primary);
   text-align: left;
 }
-.category-icon[data-v-63142f09] {
-  font-size: 12px;
-  color: #666;
+.category-icon[data-v-0930336a] {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
 }
-.category-content[data-v-63142f09] {
+.category-content[data-v-0930336a] {
   display: flex;
   flex-direction: column;
-  background-color: #fff;
+  background-color: var(--color-background-primary);
 }
-.node-item[data-v-63142f09] {
+.node-item[data-v-0930336a] {
   display: flex;
   align-items: center;
-  padding: 8px 16px;
+  padding: var(--spacing-2) var(--spacing-4);
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.2s ease;
-  border-bottom: 1px solid #eee;
+  transition: background-color var(--transition-fast);
+  border-bottom: 1px solid var(--color-border-light);
   height: 32px;
 }
-.node-item[data-v-63142f09]:last-child {
+.node-item[data-v-0930336a]:last-child {
   border-bottom: none;
 }
-.node-item[data-v-63142f09]:hover {
-  background-color: #f5f5f5;
+.node-item[data-v-0930336a]:hover {
+  background-color: var(--color-background-tertiary);
 }
-.node-image[data-v-63142f09] {
+.node-image[data-v-0930336a] {
   width: 24px;
   height: 24px;
-  margin-right: 10px;
+  margin-right: var(--spacing-2-5);
 }
-.node-name[data-v-63142f09] {
-  font-size: 12px;
-  color: #333;
+.node-name[data-v-0930336a] {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
 }
 
 /* Custom scrollbar */
-.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar {
-  width: 8px;
+.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar {
+  width: 6px;
 }
-.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-track {
+.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-track {
   background: transparent;
 }
-.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-300);
+  border-radius: var(--border-radius-full);
 }
-.nodes-wrapper[data-v-63142f09]::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-gray-400);
 }
 
-.intro-content[data-v-0db5c358] {
-  white-space: pre-wrap; /* Preserves whitespace and line breaks */
+.listbox-wrapper[data-v-02f7d886] {
+  color: var(--color-text-primary);
+}
+.listbox-title[data-v-02f7d886] {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.title[data-v-02f7d886] {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.intro-content[data-v-02f7d886] {
+  white-space: pre-wrap;
+  color: var(--color-text-secondary);
+}
+.listbox-expandable[data-v-02f7d886] {
+  --el-collapse-header-background-color: transparent;
+  --el-collapse-content-background-color: transparent;
+  border: none;
+}
+.listbox-expandable[data-v-02f7d886] .el-collapse-item__header {
+  background-color: transparent;
+  border: none;
+}
+.listbox-expandable[data-v-02f7d886] .el-collapse-item__wrap {
+  background-color: transparent;
+  border: none;
+}
+.listbox-expandable[data-v-02f7d886] .el-collapse-item__content {
+  background-color: transparent;
 }
 
 /* (Styles are unchanged) */
-.minimal-button[data-v-47a34251] {
+.minimal-button[data-v-c293e868] {
   background: none;
   border: none;
   padding: 4px;
   margin: 0 2px;
   font-size: 16px;
   cursor: pointer;
-  color: #333;
+  color: var(--color-text-primary);
   position: relative;
-  background-color: #b6c1ff;
+  background-color: var(--color-background-tertiary);
   border-radius: 4px;
   width: 25px;
   height: 25px;
 }
-.minimal-button[data-tooltip="true"][data-v-47a34251]::after {
+.minimal-button[data-tooltip="true"][data-v-c293e868]::after {
   content: attr(data-tooltip-text);
   position: absolute;
   top: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
-  background-color: #333;
-  color: #fff;
+  background-color: var(--color-gray-800);
+  color: var(--color-text-inverse);
   padding: 4px 8px;
   border-radius: 4px;
   white-space: nowrap;
@@ -944,7 +1067,7 @@ to {
   pointer-events: none;
   z-index: 100000;
 }
-.minimal-button[data-tooltip="true"][data-v-47a34251]::before {
+.minimal-button[data-tooltip="true"][data-v-c293e868]::before {
   content: "";
   position: absolute;
   top: 100%;
@@ -952,7 +1075,7 @@ to {
   transform: translateX(-50%);
   border-width: 4px;
   border-style: solid;
-  border-color: transparent transparent #333 transparent;
+  border-color: transparent transparent var(--color-gray-800) transparent;
   opacity: 0;
   visibility: hidden;
   transition:
@@ -961,21 +1084,21 @@ to {
   pointer-events: none;
   z-index: 100000;
 }
-.minimal-button[data-tooltip="true"][data-v-47a34251]:hover::after,
-.minimal-button[data-tooltip="true"][data-v-47a34251]:hover::before {
+.minimal-button[data-tooltip="true"][data-v-c293e868]:hover::after,
+.minimal-button[data-tooltip="true"][data-v-c293e868]:hover::before {
   opacity: 1;
   visibility: visible;
 }
-.minimal-button .icon[data-v-47a34251] {
+.minimal-button .icon[data-v-c293e868] {
   font-size: 16px;
 }
-.minimal-button[data-v-47a34251]:hover {
-  color: #000;
-  background-color: #9facff;
+.minimal-button[data-v-c293e868]:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-background-hover);
 }
-.group-badge[data-v-47a34251] {
-  background-color: #074273;
-  color: white;
+.group-badge[data-v-c293e868] {
+  background-color: var(--color-accent);
+  color: var(--color-text-inverse);
   padding: 2px 6px;
   border-radius: 3px;
   font-size: 11px;
@@ -984,37 +1107,38 @@ to {
   transition: background-color 0.2s;
   user-select: none;
 }
-.title-text[data-v-47a34251] {
+.title-text[data-v-c293e868] {
   flex-grow: 1;
   padding: 0 8px;
   font-size: 14px;
-  color: #333;
+  color: var(--color-text-primary);
 }
-.overlay.minimized[data-v-47a34251] {
+.overlay.minimized[data-v-c293e868] {
   width: auto !important;
   height: 35px !important;
   cursor: default;
 }
-.overlay[data-v-47a34251] {
+.overlay[data-v-c293e868] {
   position: absolute;
   width: auto;
   max-width: 100%;
   height: auto;
   max-height: 100%;
   box-sizing: border-box;
-  background-color: #f9f9f9;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: var(--color-background-primary);
+  box-shadow: var(--shadow-md);
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   cursor: move;
   transition: border-color 0.2s;
   overflow: hidden;
+  border: 1px solid var(--color-border-primary);
 }
-.no-transition[data-v-47a34251] {
+.no-transition[data-v-c293e868] {
   transition: none !important;
 }
-.header[data-v-47a34251] {
+.header[data-v-c293e868] {
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -1022,68 +1146,73 @@ to {
   padding: 4px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  background: linear-gradient(135deg, #2189791d 0%, #15a2da25 100%);
+  background: var(--color-background-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
   min-height: 35px;
   box-sizing: border-box;
   overflow: hidden;
 }
-.content[data-v-47a34251] {
+.content[data-v-c293e868] {
   flex-grow: 1;
   overflow: auto;
   padding: 10px;
   max-height: calc(100% - 50px);
   box-sizing: border-box;
 }
-.draggable-line[data-v-47a34251] {
+.draggable-line[data-v-c293e868] {
   position: absolute;
   opacity: 1;
 }
-.draggable-line.right-vertical[data-v-47a34251] {
+.draggable-line.right-vertical[data-v-c293e868] {
   top: 0;
   right: 0;
   width: 5px;
   height: 100%;
   cursor: ew-resize;
 }
-.draggable-line.left-vertical[data-v-47a34251] {
+.draggable-line.left-vertical[data-v-c293e868] {
   top: 0;
   left: 0;
   width: 5px;
   height: 100%;
   cursor: ew-resize;
 }
-.draggable-line.bottom-horizontal[data-v-47a34251] {
+.draggable-line.bottom-horizontal[data-v-c293e868] {
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
   cursor: ns-resize;
 }
-.draggable-line.top-horizontal[data-v-47a34251] {
+.draggable-line.top-horizontal[data-v-c293e868] {
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   cursor: ns-resize;
 }
-.resizing-highlight-line[data-v-47a34251] {
+.resizing-highlight-line[data-v-c293e868] {
   background-color: #080b0e43;
 }
-.draggable-line[data-v-47a34251]:hover {
+.draggable-line[data-v-c293e868]:hover {
   background-color: #2196f330;
 }
 
-.layout-widget-wrapper[data-v-0bdaa52f] {
+.layout-widget-wrapper[data-v-d6625e59] {
   position: fixed;
   z-index: 20000;
 }
-.trigger-btn[data-v-0bdaa52f] {
+.trigger-btn[data-v-d6625e59] {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   border: none;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+  background: linear-gradient(
+    135deg,
+    var(--color-gradient-purple-start) 0%,
+    var(--color-gradient-purple-end) 100%
+  );
+  box-shadow: var(--shadow-md);
   cursor: move;
   display: flex;
   align-items: center;
@@ -1092,15 +1221,15 @@ to {
   position: relative;
   overflow: hidden;
 }
-.trigger-btn[data-v-0bdaa52f]:hover {
+.trigger-btn[data-v-d6625e59]:hover {
   width: 55px;
   height: 55px;
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+  box-shadow: var(--shadow-lg);
 }
-.trigger-btn.is-open[data-v-0bdaa52f] {
+.trigger-btn.is-open[data-v-d6625e59] {
   cursor: pointer;
 }
-.trigger-btn[data-v-0bdaa52f]::before {
+.trigger-btn[data-v-d6625e59]::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1108,60 +1237,58 @@ to {
   width: 0;
   height: 0;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--color-white-alpha-20);
   transform: translate(-50%, -50%);
   transition:
     width 0.6s,
     height 0.6s;
 }
-.trigger-btn[data-v-0bdaa52f]:hover::before {
+.trigger-btn[data-v-d6625e59]:hover::before {
   width: 100px;
   height: 100px;
 }
-.layout-icon[data-v-0bdaa52f] {
-  color: white;
+.layout-icon[data-v-d6625e59] {
+  color: var(--color-text-inverse);
   transition: transform 0.3s ease;
   pointer-events: none;
 }
-.trigger-btn:hover .layout-icon[data-v-0bdaa52f] {
+.trigger-btn:hover .layout-icon[data-v-d6625e59] {
   transform: scale(1.1);
 }
-.trigger-btn.is-open .layout-icon[data-v-0bdaa52f] {
+.trigger-btn.is-open .layout-icon[data-v-d6625e59] {
   transform: rotate(90deg);
 }
-.panel[data-v-0bdaa52f] {
+.panel[data-v-d6625e59] {
   position: absolute;
-  /* REMOVED: right: 60px; */
-  /* REMOVED: bottom: 0; */
   width: 250px;
-  background: white;
+  background: var(--color-background-primary);
   border-radius: 12px;
-  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-xl);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   backdrop-filter: blur(10px);
-  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid var(--color-border-primary);
 }
-.panel-header[data-v-0bdaa52f] {
+.panel-header[data-v-d6625e59] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid #f0f0f0;
-  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%);
+  border-bottom: 1px solid var(--color-border-primary);
+  background: var(--color-background-secondary);
 }
-.panel-title[data-v-0bdaa52f] {
+.panel-title[data-v-d6625e59] {
   font-weight: 600;
   font-size: 16px;
-  color: #333;
+  color: var(--color-text-primary);
   user-select: none;
 }
-.close-btn[data-v-0bdaa52f] {
+.close-btn[data-v-d6625e59] {
   background: none;
   border: none;
   font-size: 20px;
-  color: #888;
+  color: var(--color-text-muted);
   cursor: pointer;
   padding: 0;
   line-height: 1;
@@ -1173,20 +1300,20 @@ to {
   border-radius: 4px;
   transition: all 0.2s;
 }
-.close-btn[data-v-0bdaa52f]:hover {
-  color: #333;
-  background: rgba(0, 0, 0, 0.05);
+.close-btn[data-v-d6625e59]:hover {
+  color: var(--color-text-primary);
+  background: var(--color-background-hover);
 }
-.panel-body[data-v-0bdaa52f] {
+.panel-body[data-v-d6625e59] {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-.control-btn[data-v-0bdaa52f] {
-  background-color: #f8f9fa;
-  color: #333;
-  border: 1px solid #e0e0e0;
+.control-btn[data-v-d6625e59] {
+  background-color: var(--color-background-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-primary);
   border-radius: 8px;
   padding: 10px 16px;
   cursor: pointer;
@@ -1200,49 +1327,62 @@ to {
   position: relative;
   overflow: hidden;
 }
-.control-btn[data-v-0bdaa52f]::before {
+.control-btn[data-v-d6625e59]::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    var(--color-focus-ring-purple-light),
+    transparent
+  );
   transition: left 0.5s;
 }
-.control-btn[data-v-0bdaa52f]:hover::before {
+.control-btn[data-v-d6625e59]:hover::before {
   left: 100%;
 }
-.control-btn[data-v-0bdaa52f]:hover {
-  background-color: #f0f2ff;
-  border-color: #667eea;
+.control-btn[data-v-d6625e59]:hover {
+  background-color: var(--color-background-hover);
+  border-color: var(--color-accent);
   transform: translateX(2px);
 }
 
 /* Accent button style for Reset Layout Graph */
-.control-btn.accent[data-v-0bdaa52f] {
-  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
-  border-color: #764ba2;
-}
-.control-btn.accent[data-v-0bdaa52f]:hover {
-  background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
-  border-color: #667eea;
-}
-.control-btn .icon[data-v-0bdaa52f] {
+.control-btn.accent[data-v-d6625e59] {
+  background: linear-gradient(
+    135deg,
+    var(--color-focus-ring-purple-light) 0%,
+    var(--color-focus-ring-purple-light) 100%
+  );
+  border-color: var(--color-gradient-purple-end);
+}
+.control-btn.accent[data-v-d6625e59]:hover {
+  background: linear-gradient(
+    135deg,
+    var(--color-focus-ring-purple) 0%,
+    var(--color-focus-ring-purple) 100%
+  );
+  border-color: var(--color-gradient-purple-start);
+}
+.control-btn .icon[data-v-d6625e59] {
   font-size: 16px;
   min-width: 20px;
 }
 
 /* Vue Transition Styles */
-.panel-fade-enter-active[data-v-0bdaa52f],
-.panel-fade-leave-active[data-v-0bdaa52f] {
+.panel-fade-enter-active[data-v-d6625e59],
+.panel-fade-leave-active[data-v-d6625e59] {
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.panel-fade-enter-from[data-v-0bdaa52f] {
+.panel-fade-enter-from[data-v-d6625e59] {
   opacity: 0;
   transform: translateY(10px) scale(0.95);
 }
-.panel-fade-leave-to[data-v-0bdaa52f] {
+.panel-fade-leave-to[data-v-d6625e59] {
   opacity: 0;
   transform: translateY(-10px) scale(0.95);
 }
@@ -10184,7 +10324,8 @@ input[class^=ag-][type=range]:disabled {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: var(--color-background-primary);
+  opacity: 0.9;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10193,8 +10334,8 @@ input[class^=ag-][type=range]:disabled {
 .spinner {
   width: 50px;
   height: 50px;
-  border: 5px solid #f3f3f3;
-  border-top: 5px solid #3498db;
+  border: 5px solid var(--color-border-primary);
+  border-top: 5px solid var(--color-accent);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -10281,7 +10422,7 @@ to {
 }
 .outdated-data-banner p {
   margin: 0;
-  color: #78350f;
+  color: var(--color-warning-darker);
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -10297,9 +10438,13 @@ to {
   animation: pulse 2s ease-in-out infinite;
 }
 .refresh-link-button {
-  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
-  border: 1px solid #f59e0b;
-  color: #92400e;
+  background: linear-gradient(
+    135deg,
+    var(--color-background-primary) 0%,
+    var(--color-warning-light) 100%
+  );
+  border: 1px solid var(--color-warning);
+  color: var(--color-warning-dark);
   border-radius: 6px;
   padding: 5px 14px;
   font-size: 13px;
@@ -10323,13 +10468,11 @@ to {
   transition: transform 0.3s ease;
 }
 .refresh-link-button:hover {
-  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-  color: white;
-  border-color: #d97706;
+  background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-hover) 100%);
+  color: var(--color-text-inverse);
+  border-color: var(--color-warning-hover);
   transform: translateY(-1px);
-  box-shadow:
-    0 4px 12px rgba(245, 158, 11, 0.3),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: var(--shadow-md);
 }
 .refresh-link-button:hover::before {
   transform: rotate(180deg);
@@ -10341,15 +10484,15 @@ to {
     inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .dismiss-button {
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(251, 191, 36, 0.3);
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-warning);
   width: 24px;
   height: 24px;
   border-radius: 50%;
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
-  color: #92400e;
+  color: var(--color-warning-dark);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10360,11 +10503,11 @@ to {
   z-index: 1;
 }
 .dismiss-button:hover {
-  background: white;
-  border-color: #f59e0b;
-  color: #78350f;
+  background: var(--color-background-hover);
+  border-color: var(--color-warning);
+  color: var(--color-warning-darker);
   transform: rotate(90deg) scale(1.1);
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 .dismiss-button:active {
   transform: rotate(90deg) scale(0.95);
@@ -10374,19 +10517,19 @@ to {
 .fetch-data-section {
   padding: 20px;
   text-align: center;
-  background-color: #f9fafb;
-  border: 1px solid #e5e7eb;
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-border-primary);
   border-top: none;
   border-radius: 0 0 8px 8px;
 }
 .fetch-data-section p {
-  color: #6b7280;
+  color: var(--color-text-secondary);
   font-size: 14px;
   margin-bottom: 12px;
 }
 .fetch-data-button {
-  background-color: #3498db;
-  color: white;
+  background-color: var(--color-button-secondary);
+  color: var(--color-text-inverse);
   border: none;
   padding: 8px 20px;
   font-size: 14px;
@@ -10396,15 +10539,15 @@ to {
   position: relative;
 }
 .fetch-data-button:hover:not(:disabled) {
-  background-color: #2980b9;
+  background-color: var(--color-button-secondary-hover);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+  box-shadow: var(--shadow-md);
 }
 .fetch-data-button:active:not(:disabled) {
   transform: translateY(0);
 }
 .fetch-data-button:disabled {
-  background-color: #93c5fd;
+  background-color: var(--color-button-secondary-light);
   cursor: not-allowed;
   opacity: 0.7;
 }
@@ -10413,35 +10556,42 @@ to {
 .ag-theme-balham {
   max-width: 100%;
   position: relative;
-  --ag-odd-row-background-color: rgb(255, 255, 255);
-  --ag-row-background-color: rgb(255, 255, 255);
-  --ag-header-background-color: rgb(246, 247, 251);
-}
-
-.hide-results-button[data-v-8ed83347] {
+  --ag-background-color: var(--color-background-primary);
+  --ag-odd-row-background-color: var(--color-background-primary);
+  --ag-row-background-color: var(--color-background-primary);
+  --ag-header-background-color: var(--color-background-secondary);
+  --ag-header-foreground-color: var(--color-text-primary);
+  --ag-foreground-color: var(--color-text-primary);
+  --ag-border-color: var(--color-border-primary);
+  --ag-secondary-foreground-color: var(--color-text-secondary);
+  --ag-row-hover-color: var(--color-background-hover);
+  --ag-selected-row-background-color: var(--color-background-selected);
+}
+
+.hide-results-button[data-v-469df264] {
   margin-bottom: 10px;
 }
-.flow-summary[data-v-8ed83347] {
+.flow-summary[data-v-469df264] {
   margin-left: 10px;
   font-weight: bold;
-  color: #333;
+  color: var(--color-text-primary);
 }
-.node-card[data-v-8ed83347] {
+.node-card[data-v-469df264] {
   padding: 15px;
 }
-.node-details p[data-v-8ed83347] {
+.node-details p[data-v-469df264] {
   margin: 5px 0;
 }
-.success[data-v-8ed83347] {
-  color: green;
+.success[data-v-469df264] {
+  color: var(--color-success);
 }
-.failure[data-v-8ed83347] {
-  color: red;
+.failure[data-v-469df264] {
+  color: var(--color-danger);
 }
-.running[data-v-8ed83347] {
-  animation: pulse-8ed83347 1.5s infinite;
+.running[data-v-469df264] {
+  animation: pulse-469df264 1.5s infinite;
 }
-@keyframes pulse-8ed83347 {
+@keyframes pulse-469df264 {
 0% {
     opacity: 1;
 }
@@ -10452,21 +10602,21 @@ to {
     opacity: 1;
 }
 }
-.node-info[data-v-8ed83347] {
+.node-info[data-v-469df264] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.node-title[data-v-8ed83347] {
+.node-title[data-v-469df264] {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  color: var(--color-text-primary);
 }
-.node-description[data-v-8ed83347] {
+.node-description[data-v-469df264] {
   margin: 0;
   font-size: 14px;
-  color: #606266;
+  color: var(--color-text-secondary);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -10474,62 +10624,62 @@ to {
   -webkit-box-orient: vertical;
 }
 
-.log-container[data-v-9b3bdb24] {
+.log-container[data-v-0ab12658] {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #1e1e1e;
-  color: #d4d4d4;
-  font-family: "Consolas", "Monaco", "Courier New", monospace;
+  background-color: var(--color-code-bg);
+  color: var(--color-code-text);
+  font-family: var(--font-family-mono);
   overflow-y: auto;
 }
-.log-header[data-v-9b3bdb24] {
+.log-header[data-v-0ab12658] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
-  background-color: #252526;
-  border-bottom: 1px solid #333;
+  background-color: var(--color-gray-800);
+  border-bottom: 1px solid var(--color-border-primary);
   position: sticky;
   top: 0;
   z-index: 10; /* Ensures it stays above the logs */
 }
-.log-status[data-v-9b3bdb24] {
+.log-status[data-v-0ab12658] {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9em;
 }
-.status-indicator[data-v-9b3bdb24] {
+.status-indicator[data-v-0ab12658] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: #666;
+  background-color: var(--color-gray-500);
 }
-.status-indicator.active[data-v-9b3bdb24] {
-  background-color: #4caf50;
+.status-indicator.active[data-v-0ab12658] {
+  background-color: var(--color-success);
 }
-.status-indicator.error[data-v-9b3bdb24] {
-  background-color: #f44336;
+.status-indicator.error[data-v-0ab12658] {
+  background-color: var(--color-danger);
 }
-.log-controls[data-v-9b3bdb24] {
+.log-controls[data-v-0ab12658] {
   display: flex;
   gap: 8px;
 }
-.error-banner[data-v-9b3bdb24] {
+.error-banner[data-v-0ab12658] {
   padding: 8px 12px;
-  background-color: rgba(244, 67, 54, 0.2);
-  color: #f44336;
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
   font-size: 0.9em;
-  border-bottom: 1px solid #f44336;
+  border-bottom: 1px solid var(--color-danger);
 }
-.empty-state[data-v-9b3bdb24] {
+.empty-state[data-v-0ab12658] {
   padding: 16px;
   text-align: center;
-  color: #777;
+  color: var(--color-text-muted);
   font-style: italic;
 }
-.logs[data-v-9b3bdb24] {
+.logs[data-v-0ab12658] {
   flex-grow: 1;
   margin: 0;
   padding: 8px;
@@ -10539,63 +10689,32 @@ to {
   line-height: 1.8; /* Reduced line height */
   font-size: small;
 }
-.logs.auto-scroll[data-v-9b3bdb24] {
+.logs.auto-scroll[data-v-0ab12658] {
   scroll-behavior: smooth;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar {
+[data-v-0ab12658]::-webkit-scrollbar {
   width: 12px;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-track {
-  background: #1e1e1e;
+[data-v-0ab12658]::-webkit-scrollbar-track {
+  background: var(--color-code-bg);
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-thumb {
-  background: #424242;
+[data-v-0ab12658]::-webkit-scrollbar-thumb {
+  background: var(--color-gray-600);
   border-radius: 6px;
-  border: 3px solid #1e1e1e;
+  border: 3px solid var(--color-code-bg);
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-thumb:hover {
-  background: #4f4f4f;
+[data-v-0ab12658]::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
 }
-.error-line[data-v-9b3bdb24] {
-  background-color: rgba(255, 0, 0, 0.2); /* Light red background */
-  color: #ffcdd2; /* Light red text for better readability */
+.error-line[data-v-0ab12658] {
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
 }
 
-.context-menu[data-v-7db4e6fc] {
-  position: fixed;
+/* Context menu styles are now centralized in styles/components/_context-menu.css */
+/* Component-specific overrides only */
+.context-menu[data-v-9260496a] {
   min-width: 200px;
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  z-index: 10000;
-  overflow: hidden;
-}
-.context-menu-header[data-v-7db4e6fc] {
-  padding: 8px 12px;
-  font-weight: bold;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 14px;
-}
-.context-menu-items[data-v-7db4e6fc] {
-  max-height: 300px;
-  overflow-y: auto;
-}
-.context-menu-item[data-v-7db4e6fc] {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  font-size: 14px;
-}
-.context-menu-item[data-v-7db4e6fc]:hover {
-  background-color: #f5f5f5;
-}
-.context-menu-icon[data-v-7db4e6fc] {
-  margin-right: 8px;
-  width: 20px;
-  text-align: center;
 }
 .vue-flow {
   position: relative;
@@ -11086,7 +11205,13 @@ body,
   filter: invert(100%);
 }
 .animated-bg-gradient {
-  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
+  background: linear-gradient(
+    122deg,
+    var(--color-gradient-canvas-1),
+    var(--color-gradient-canvas-2),
+    var(--color-gradient-canvas-3),
+    var(--color-gradient-canvas-4)
+  );
   background-size: 800% 800%;
   -webkit-animation: gradient 4s ease infinite;
   -moz-animation: gradient 4s ease infinite;
@@ -11134,277 +11259,272 @@ main {
   position: relative;
 }
 
-.dialog-footer[data-v-28bc5fb2] {
+.dialog-footer[data-v-e2fb0741] {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
 }
 
-.flow-tabs-container[data-v-0aac27a5] {
+.flow-tabs-container[data-v-1d0bca1e] {
   width: 100%;
-  font-family:
-    "Inter",
-    "Roboto",
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
+  font-family: var(--font-family-base);
 }
-.flow-tabs[data-v-0aac27a5] {
+.flow-tabs[data-v-1d0bca1e] {
   display: flex;
   align-items: center;
   overflow-x: auto;
-  background-color: rgba(16, 24, 40, 0.02);
-  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
+  background-color: var(--color-background-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
   height: 42px;
-  padding-left: 4px;
+  padding-left: var(--spacing-1);
   scrollbar-width: thin;
 }
-.flow-tabs[data-v-0aac27a5]::-webkit-scrollbar {
+.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar {
   height: 4px;
 }
-.flow-tabs[data-v-0aac27a5]::-webkit-scrollbar-track {
+.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-track {
   background: transparent;
 }
-.flow-tabs[data-v-0aac27a5]::-webkit-scrollbar-thumb {
-  background-color: rgba(16, 24, 40, 0.2);
-  border-radius: 2px;
+.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-300);
+  border-radius: var(--border-radius-full);
 }
-.flow-tab[data-v-0aac27a5] {
+.flow-tab[data-v-1d0bca1e] {
   display: flex;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 var(--spacing-4);
   height: 38px;
   background-color: transparent;
-  border-right: 1px solid rgba(16, 24, 40, 0.06);
+  border-right: 1px solid var(--color-border-light);
   cursor: pointer;
   min-width: 120px;
   max-width: 180px;
   position: relative;
   user-select: none;
-  border-radius: 6px 6px 0 0;
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   margin-right: 1px;
-  transition: all 0.2s ease;
+  transition: all var(--transition-fast);
 }
-.flow-tab.active[data-v-0aac27a5] {
-  background-color: #fff;
-  border-top: 2px solid rgb(0, 34, 60);
-  box-shadow: 0 2px 5px rgba(16, 24, 40, 0.04);
+.flow-tab.active[data-v-1d0bca1e] {
+  background-color: var(--color-background-primary);
+  border-top: 2px solid var(--primary-blue);
+  box-shadow: var(--shadow-xs);
   z-index: 1;
 }
-.flow-tab[data-v-0aac27a5]:not(.active):hover {
-  background-color: rgba(19, 37, 73, 0.164);
+.flow-tab[data-v-1d0bca1e]:not(.active):hover {
+  background-color: var(--color-background-hover);
 }
-.tab-content[data-v-0aac27a5] {
+.tab-content[data-v-1d0bca1e] {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-2);
   width: calc(100% - 20px);
   overflow: hidden;
 }
-.tab-icon[data-v-0aac27a5] {
-  font-size: 16px;
-  color: rgb(2, 27, 45);
+.tab-icon[data-v-1d0bca1e] {
+  font-size: var(--font-size-xl);
+  color: var(--primary-blue);
   flex-shrink: 0;
 }
-.tab-name[data-v-0aac27a5] {
+.tab-name[data-v-1d0bca1e] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
   letter-spacing: 0.01em;
-  color: rgba(16, 24, 40, 0.8);
+  color: var(--color-text-secondary);
 }
-.active .tab-name[data-v-0aac27a5] {
-  color: rgba(16, 24, 40, 0.95);
+.active .tab-name[data-v-1d0bca1e] {
+  color: var(--color-text-primary);
 }
-.close-icon[data-v-0aac27a5] {
-  font-size: 15px;
-  color: rgba(16, 24, 40, 0.4);
+.close-icon[data-v-1d0bca1e] {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-muted);
   opacity: 0;
   position: absolute;
-  right: 8px;
-  border-radius: 50%;
+  right: var(--spacing-2);
+  border-radius: var(--border-radius-full);
   padding: 2px;
-  transition: all 0.15s ease;
+  transition: all var(--transition-fast);
   transform: scale(0.9);
 }
-.flow-tab:hover .close-icon[data-v-0aac27a5] {
+.flow-tab:hover .close-icon[data-v-1d0bca1e] {
   opacity: 1;
 }
-.close-icon[data-v-0aac27a5]:hover {
-  background-color: rgba(16, 24, 40, 0.06);
-  color: rgba(16, 24, 40, 0.7);
+.close-icon[data-v-1d0bca1e]:hover {
+  background-color: var(--color-background-tertiary);
+  color: var(--color-text-secondary);
   transform: scale(1);
 }
-.active .close-icon[data-v-0aac27a5]:hover {
-  background-color: rgba(80, 70, 230, 0.1);
-  color: rgba(80, 70, 230, 0.9);
+.active .close-icon[data-v-1d0bca1e]:hover {
+  background-color: var(--color-background-hover);
+  color: var(--color-primary);
 }
 
 /* New flow tab styling */
-.new-flow-tab[data-v-0aac27a5] {
+.new-flow-tab[data-v-1d0bca1e] {
   min-width: 40px;
   max-width: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: rgba(80, 70, 230, 0.8);
+  color: var(--color-primary);
 }
-.new-flow-tab[data-v-0aac27a5]:hover {
-  background-color: rgba(80, 70, 230, 0.1);
+.new-flow-tab[data-v-1d0bca1e]:hover {
+  background-color: var(--color-background-hover);
 }
 
-.canvas[data-v-24dbaac4] {
-  height: calc(100vh - 100px); /* Adjusted for potentially taller header */
+.canvas[data-v-b6db3c6c] {
+  height: calc(100vh - 100px);
 }
-.header[data-v-24dbaac4] {
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #ececec;
+.header[data-v-b6db3c6c] {
+  background-color: var(--color-background-secondary);
+  border-bottom: 1px solid var(--color-border-primary);
 }
 
 /* Desktop layout - single row */
 @media (min-width: 1025px) {
-.header[data-v-24dbaac4] {
+.header[data-v-b6db3c6c] {
     display: flex;
     justify-content: space-between;
     align-items: stretch;
     height: 50px;
 }
-.header-top[data-v-24dbaac4] {
-    display: contents; /* Makes children behave as direct children of .header */
+.header-top[data-v-b6db3c6c] {
+    display: contents;
 }
-.header-bottom[data-v-24dbaac4] {
+.header-bottom[data-v-b6db3c6c] {
     display: contents;
 }
-.left-section[data-v-24dbaac4] {
+.left-section[data-v-b6db3c6c] {
     min-width: 250px;
-    padding: 0 16px;
+    padding: 0 var(--spacing-4);
     display: flex;
     align-items: center;
 }
-.middle-section[data-v-24dbaac4] {
+.middle-section[data-v-b6db3c6c] {
     flex: 1;
     display: flex;
     align-items: center;
     overflow: hidden;
 }
-.right-section[data-v-24dbaac4] {
+.right-section[data-v-b6db3c6c] {
     min-width: 150px;
-    padding: 0 16px;
+    padding: 0 var(--spacing-4);
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }
-.canvas[data-v-24dbaac4] {
+.canvas[data-v-b6db3c6c] {
     height: calc(100vh - 50px);
 }
 }
 
 /* Mobile/tablet layout - stacked */
 @media (max-width: 1024px) {
-.header[data-v-24dbaac4] {
+.header[data-v-b6db3c6c] {
     height: auto;
     min-height: 80px;
 }
-.header-top[data-v-24dbaac4] {
+.header-top[data-v-b6db3c6c] {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 50px;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--color-border-primary);
 }
-.header-bottom[data-v-24dbaac4] {
+.header-bottom[data-v-b6db3c6c] {
     display: flex;
     height: 40px;
-    padding: 0 8px;
+    padding: 0 var(--spacing-2);
 }
-.left-section[data-v-24dbaac4] {
-    padding: 0 12px;
+.left-section[data-v-b6db3c6c] {
+    padding: 0 var(--spacing-3);
     display: flex;
     align-items: center;
 }
-.middle-section[data-v-24dbaac4] {
+.middle-section[data-v-b6db3c6c] {
     flex: 1;
     display: flex;
     align-items: center;
     overflow: hidden;
-    padding: 0 8px;
+    padding: 0 var(--spacing-2);
 }
-.right-section[data-v-24dbaac4] {
-    padding: 0 12px;
+.right-section[data-v-b6db3c6c] {
+    padding: 0 var(--spacing-3);
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }
-.canvas[data-v-24dbaac4] {
+.canvas[data-v-b6db3c6c] {
     height: calc(100vh - 90px);
 }
 }
 
 /* Very narrow screens */
 @media (max-width: 480px) {
-.left-section[data-v-24dbaac4] {
-    padding: 0 8px;
+.left-section[data-v-b6db3c6c] {
+    padding: 0 var(--spacing-2);
     min-width: auto;
 }
-.right-section[data-v-24dbaac4] {
-    padding: 0 8px;
+.right-section[data-v-b6db3c6c] {
+    padding: 0 var(--spacing-2);
     min-width: auto;
 }
-.middle-section[data-v-24dbaac4] {
-    padding: 0 4px;
+.middle-section[data-v-b6db3c6c] {
+    padding: 0 var(--spacing-1);
 }
 }
 
 /* Loading state styles */
-.loading-state[data-v-24dbaac4] {
+.loading-state[data-v-b6db3c6c] {
   height: calc(100vh - 50px);
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f9fafb;
+  background-color: var(--color-background-secondary);
 }
-.loading-state-content[data-v-24dbaac4] {
+.loading-state-content[data-v-b6db3c6c] {
   text-align: center;
-  padding: 2rem;
+  padding: var(--spacing-8);
 }
-.loading-state-content p[data-v-24dbaac4] {
-  color: #6b7280;
-  margin-top: 1rem;
+.loading-state-content p[data-v-b6db3c6c] {
+  color: var(--color-text-secondary);
+  margin-top: var(--spacing-4);
 }
 
 /* Empty state styles */
-.empty-state[data-v-24dbaac4] {
+.empty-state[data-v-b6db3c6c] {
   height: calc(100vh - 50px);
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f9fafb;
+  background-color: var(--color-background-secondary);
 }
-.empty-state-content[data-v-24dbaac4] {
+.empty-state-content[data-v-b6db3c6c] {
   text-align: center;
-  padding: 2rem;
+  padding: var(--spacing-8);
 }
-.empty-icon[data-v-24dbaac4] {
-  font-size: 64px;
-  color: #9ca3af;
-  margin-bottom: 1rem;
+.empty-icon[data-v-b6db3c6c] {
+  font-size: var(--font-size-4xl);
+  color: var(--color-gray-400);
+  margin-bottom: var(--spacing-4);
 }
-.empty-state h2[data-v-24dbaac4] {
-  color: #374151;
-  margin-bottom: 0.5rem;
+.empty-state h2[data-v-b6db3c6c] {
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-2);
 }
-.empty-state p[data-v-24dbaac4] {
-  color: #6b7280;
-  margin-bottom: 1.5rem;
+.empty-state p[data-v-b6db3c6c] {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-6);
 }
-.action-button[data-v-24dbaac4] {
+.action-button[data-v-b6db3c6c] {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  margin: 0 0.5rem;
+  gap: var(--spacing-2);
+  margin: 0 var(--spacing-2);
 }
-.action-button .material-icons[data-v-24dbaac4] {
-  font-size: 18px;
+.action-button .material-icons[data-v-b6db3c6c] {
+  font-size: var(--font-size-2xl);
 }