Flowfile 0.5.3__py3-none-any.whl → 0.5.6__py3-none-any.whl

flowfile/web/static/assets/{DesignerView-a6d0ee84.css → DesignerView-71d4e9a1.css}

@@ -1,9 +1,9 @@
 
-.button-group[data-v-b6e5fd3a] {
+.button-group[data-v-e214f6f3] {
   display: flex;
   gap: 10px;
 }
-.button-group .el-button[data-v-b6e5fd3a] {
+.button-group .el-button[data-v-e214f6f3] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -15,51 +15,52 @@
   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-b6e5fd3a]: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-e214f6f3]:first-child:not([disabled]) {
+  background-color: var(--primary-blue) !important;
+  border: 1px solid var(--primary-blue-light) !important;
+  color: var(--color-accent-subtle) !important;
 }
 
 /* Run button - hover state */
-.button-group .el-button[data-v-b6e5fd3a]: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-e214f6f3]: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-b6e5fd3a] {
-  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-e214f6f3] {
+  background-color: var(--color-gray-400) !important;
+  border: 1px solid var(--color-gray-400) !important;
+  color: var(--color-accent-subtle) !important;
   cursor: not-allowed;
+  opacity: 0.7;
 }
 
 /* Cancel button */
-.button-group .el-button[data-v-b6e5fd3a]: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-e214f6f3]:nth-child(2) {
+  background-color: var(--color-danger) !important;
+  border: 1px solid var(--color-danger) !important;
+  color: var(--color-accent-subtle) !important;
 }
 
 /* Cancel button - hover state */
-.button-group .el-button[data-v-b6e5fd3a]: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-e214f6f3]: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-b6e5fd3a]:active {
+.button-group .el-button[data-v-e214f6f3]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
 
-.browser-title[data-v-d209bc3c] {
+.browser-title[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -68,104 +69,122 @@
   font-weight: 600;
   color: var(--color-text-primary);
 }
-.mode-selector[data-v-d209bc3c] {
+.mode-selector[data-v-bcb824aa] {
   display: flex;
   justify-content: center;
 }
-.browser-content[data-v-d209bc3c] {
+.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-d209bc3c] {
+.browser-toolbar[data-v-bcb824aa] {
   padding: 16px;
   background-color: var(--color-background-primary);
-  border-bottom: 1px solid #e9ecef;
+  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-d209bc3c] {
+.path-navigation[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
-.nav-button[data-v-d209bc3c] {
+.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: var(--color-background-primary);
-  color: #495057;
+  color: var(--color-text-secondary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.nav-button[data-v-d209bc3c]: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-d209bc3c] {
+.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-d209bc3c] {
+.search-container[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.search-input[data-v-d209bc3c] {
+.search-input[data-v-bcb824aa] {
   flex: 1;
 }
-.browser-main[data-v-d209bc3c] {
+.browser-main[data-v-bcb824aa] {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
 }
-.file-item[data-v-d209bc3c] {
-  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-d209bc3c]: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-d209bc3c] {
-  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-d209bc3c] {
+.file-item-content[data-v-bcb824aa] {
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.file-icon-wrapper[data-v-d209bc3c] {
+.file-icon-wrapper[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
 }
-.file-icon[data-v-d209bc3c] {
+.file-icon[data-v-bcb824aa] {
   width: 24px;
   height: 24px;
-  color: #6b7280;
+  color: var(--color-text-tertiary);
 }
-.file-details[data-v-d209bc3c] {
+.file-details[data-v-bcb824aa] {
   flex: 1;
   min-width: 0;
 }
-.file-name[data-v-d209bc3c] {
+.file-name[data-v-bcb824aa] {
   font-weight: 500;
   color: var(--color-text-primary);
   margin-bottom: 4px;
@@ -173,11 +192,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.file-info[data-v-d209bc3c] {
+.file-info[data-v-bcb824aa] {
   font-size: 12px;
   color: var(--color-text-secondary);
 }
-.browser-actions[data-v-d209bc3c] {
+.browser-actions[data-v-bcb824aa] {
   padding: 16px;
   background-color: var(--color-background-secondary);
   border-top: 1px solid var(--color-border-primary);
@@ -188,46 +207,90 @@
   box-sizing: border-box;
   gap: 12px;
 }
-.selected-file[data-v-d209bc3c] {
+.selected-file[data-v-bcb824aa] {
   color: var(--color-text-secondary);
   font-size: 14px;
 }
-.loading-state[data-v-d209bc3c],
-.error-state[data-v-d209bc3c] {
+.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: var(--color-text-secondary);
 }
-.error-state[data-v-d209bc3c] {
+.error-state[data-v-bcb824aa] {
   color: var(--color-danger);
 }
-.hidden-file[data-v-d209bc3c] {
+.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;
+}
+.empty-state[data-v-bcb824aa] {
+  flex-direction: column;
+  gap: 8px;
+  color: var(--color-text-secondary);
+}
+.empty-state .material-icons[data-v-bcb824aa] {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+/* 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-d209bc3c] {
+.file-browser[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   height: 70vh; /* Set to 70% of viewport height */
   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-d209bc3c] {
+.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-d209bc3c] {
+.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-d209bc3c] {
+.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-d209bc3c] {
+.file-icon[data-v-bcb824aa] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
 
 /* Add new styles for sort controls */
-.search-and-sort-container[data-v-d209bc3c] {
+.search-and-sort-container[data-v-bcb824aa] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.sort-controls[data-v-d209bc3c] {
+.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-d209bc3c] {
+.sort-direction-button[data-v-bcb824aa] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -261,37 +324,37 @@
   height: 32px;
   padding: 0;
 }
-.controls-row[data-v-d209bc3c] {
+.controls-row[data-v-bcb824aa] {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
 }
-.form-hint[data-v-d209bc3c] {
+.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-d209bc3c] {
+.preview-label[data-v-bcb824aa] {
   color: var(--color-text-secondary);
 }
-.form-hint code[data-v-d209bc3c] {
+.form-hint code[data-v-bcb824aa] {
   background-color: var(--color-background-secondary);
   padding: 2px 6px;
   border-radius: 4px;
   font-family: monospace;
   color: var(--color-text-primary);
 }
-.auto-extension-hint[data-v-d209bc3c] {
+.auto-extension-hint[data-v-bcb824aa] {
   color: var(--color-text-muted);
   font-style: italic;
 }
 
-.action-buttons[data-v-b6daebea] {
+.action-buttons[data-v-f8281642] {
   padding-left: var(--spacing-5);
   display: flex;
   align-items: center;
@@ -299,7 +362,7 @@
   height: 50px;
   font-family: var(--font-family-base);
 }
-.action-btn[data-v-b6daebea] {
+.action-btn[data-v-f8281642] {
   display: flex;
   align-items: center;
   gap: var(--spacing-1-5);
@@ -315,63 +378,63 @@
   font-weight: var(--font-weight-medium);
   box-shadow: var(--shadow-xs);
 }
-.action-btn[data-v-b6daebea]:hover {
+.action-btn[data-v-f8281642]:hover {
   background-color: var(--color-background-tertiary);
   border-color: var(--color-border-secondary);
 }
-.action-btn[data-v-b6daebea]:active {
+.action-btn[data-v-f8281642]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
-.action-btn.active[data-v-b6daebea] {
+.action-btn.active[data-v-f8281642] {
   background-color: var(--color-accent-subtle);
   border-color: var(--color-accent);
   color: var(--color-accent);
 }
-.btn-icon[data-v-b6daebea] {
+.btn-icon[data-v-f8281642] {
   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-b6daebea] {
+.action-btn:hover .btn-icon[data-v-f8281642] {
   color: var(--color-text-primary);
 }
-.action-btn.active .btn-icon[data-v-b6daebea] {
+.action-btn.active .btn-icon[data-v-f8281642] {
   color: var(--color-accent);
 }
-.btn-text[data-v-b6daebea] {
+.btn-text[data-v-f8281642] {
   white-space: nowrap;
 }
-.settings-modal-content[data-v-b6daebea] {
+.settings-modal-content[data-v-f8281642] {
   padding: var(--spacing-4);
   font-family: var(--font-family-base);
 }
-.form-group[data-v-b6daebea] {
+.form-group[data-v-f8281642] {
   margin-bottom: var(--spacing-4);
 }
-.form-group label[data-v-b6daebea] {
+.form-group label[data-v-f8281642] {
   display: block;
   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-b6daebea] {
+.quick-create-modal[data-v-f8281642] {
   padding: var(--spacing-4) 0;
 }
-.quick-create-modal .form-group[data-v-b6daebea] {
+.quick-create-modal .form-group[data-v-f8281642] {
   margin-bottom: var(--spacing-5);
 }
-.quick-create-modal label[data-v-b6daebea] {
+.quick-create-modal label[data-v-f8281642] {
   display: block;
   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-b6daebea] {
+.preview-text[data-v-f8281642] {
   padding: var(--spacing-3);
   background-color: var(--color-background-muted);
   border: 1px solid var(--color-border-light);
@@ -379,24 +442,24 @@
   font-size: var(--font-size-md);
   color: var(--color-text-secondary);
 }
-.preview-text code[data-v-b6daebea] {
+.preview-text code[data-v-f8281642] {
   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-b6daebea] {
+.dialog-footer[data-v-f8281642] {
   display: flex;
   gap: var(--spacing-2);
 }
 
-.status-wrapper[data-v-b959ca1b] {
+.status-wrapper[data-v-0ee1952b] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.flow-card[data-v-b959ca1b] {
+.flow-card[data-v-0ee1952b] {
   position: relative;
   width: 40px;
   height: 40px;
@@ -405,22 +468,22 @@
   cursor: help;
   overflow: hidden;
 }
-.flow-card[data-v-b959ca1b]: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-b959ca1b] {
+.flow-animation[data-v-0ee1952b] {
   width: 100%;
   height: 100%;
 }
 
 /* Flow Container */
-.flow-container[data-v-b959ca1b] {
+.flow-container[data-v-0ee1952b] {
   fill: #8c8caa;
 }
 
 /* Extra Thick Flow Lines with Gradient */
-.flow-line[data-v-b959ca1b] {
+.flow-line[data-v-0ee1952b] {
   fill: none;
   stroke: url(#lineGradient);
   stroke-width: 8; /* Extra thick lines */
@@ -430,35 +493,35 @@
 }
 
 /* Animation only when flowing */
-.is-flowing .flow-line[data-v-b959ca1b] {
-  animation: flowMove-b959ca1b 3s infinite linear;
+.is-flowing .flow-line[data-v-0ee1952b] {
+  animation: flowMove-0ee1952b 3s infinite linear;
 }
-.is-flowing .flow-line-2[data-v-b959ca1b] {
+.is-flowing .flow-line-2[data-v-0ee1952b] {
   animation-delay: -1s;
 }
-.is-flowing .flow-line-3[data-v-b959ca1b] {
+.is-flowing .flow-line-3[data-v-0ee1952b] {
   animation-delay: -2s;
 }
 
 /* Flow Particles - only visible when running */
-.flow-particle[data-v-b959ca1b] {
+.flow-particle[data-v-0ee1952b] {
   fill: #5256c6;
   opacity: 0;
 }
-.is-flowing .flow-particle[data-v-b959ca1b] {
-  animation: particleFlow-b959ca1b 3s infinite ease-in-out;
+.is-flowing .flow-particle[data-v-0ee1952b] {
+  animation: particleFlow-0ee1952b 3s infinite ease-in-out;
 }
-.particle-1[data-v-b959ca1b] {
+.particle-1[data-v-0ee1952b] {
   animation-delay: 0s;
 }
-.particle-2[data-v-b959ca1b] {
+.particle-2[data-v-0ee1952b] {
   animation-delay: -1s;
 }
-.particle-3[data-v-b959ca1b] {
+.particle-3[data-v-0ee1952b] {
   animation-delay: -2s;
 }
 /* Control Button */
-.control-button[data-v-b959ca1b] {
+.control-button[data-v-0ee1952b] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -466,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-b959ca1b]: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-b959ca1b] {
-  background: #4834d4;
-  color: white;
+.control-button.is-active[data-v-0ee1952b] {
+  background: var(--color-button-primary);
+  color: var(--color-text-inverse);
 }
 
 /* Animations */
-@keyframes flowMove-b959ca1b {
+@keyframes flowMove-0ee1952b {
 0% {
     transform: translateX(0);
 }
@@ -492,7 +555,7 @@
     transform: translateX(-70px);
 }
 }
-@keyframes particleFlow-b959ca1b {
+@keyframes particleFlow-0ee1952b {
 0% {
     opacity: 0;
     transform: translateX(-10px) scale(0.8);
@@ -511,37 +574,37 @@
 }
 }
 
-.status-indicator[data-v-5b62c397] {
+.status-indicator[data-v-4064b904] {
   position: relative;
   display: flex;
   align-items: center;
   margin-right: 8px;
 }
-.status-indicator[data-v-5b62c397]::before {
+.status-indicator[data-v-4064b904]::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
 }
-.status-indicator.success[data-v-5b62c397]::before {
+.status-indicator.success[data-v-4064b904]::before {
   background-color: #4caf50;
 }
-.status-indicator.failure[data-v-5b62c397]::before {
+.status-indicator.failure[data-v-4064b904]::before {
   background-color: #f44336;
 }
-.status-indicator.warning[data-v-5b62c397]::before {
+.status-indicator.warning[data-v-4064b904]::before {
   background-color: #f09f5dd1;
 }
-.status-indicator.unknown[data-v-5b62c397]::before {
+.status-indicator.unknown[data-v-4064b904]::before {
   background-color: var(--color-text-muted);
 }
-.status-indicator.running[data-v-5b62c397]::before {
+.status-indicator.running[data-v-4064b904]::before {
   background-color: #0909ca;
-  animation: pulse-5b62c397 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-5b62c397 {
+@keyframes pulse-4064b904 {
 0% {
     transform: scale(1);
     opacity: 1;
@@ -558,7 +621,7 @@
     box-shadow: 0 0 5px #0909ca;
 }
 }
-.tooltip-text[data-v-5b62c397] {
+.tooltip-text[data-v-4064b904] {
   visibility: hidden;
   width: 120px;
   background-color: var(--color-gray-800);
@@ -574,21 +637,21 @@
   opacity: 0;
   transition: opacity 0.3s;
 }
-.status-indicator:hover .tooltip-text[data-v-5b62c397] {
+.status-indicator:hover .tooltip-text[data-v-4064b904] {
   visibility: visible;
   opacity: 1;
 }
-.description-input[data-v-5b62c397]:hover,
-.description-input[data-v-5b62c397]: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-5b62c397] {
+.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-5b62c397] {
+.description-display[data-v-4064b904] {
   padding: 8px;
   width: 200px !important;
   max-height: 8px !important;
@@ -596,7 +659,7 @@
   border-radius: 4px;
   cursor: pointer;
 }
-.overlay[data-v-5b62c397] {
+.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 */
@@ -606,17 +669,17 @@
   z-index: 1000; /* High enough to float above everything else */
   /* Your existing styles for background, padding, etc. */
 }
-.node-button[data-v-5b62c397] {
-  background-color: var(--color-background-primary);
+.node-button[data-v-4064b904] {
+  background-color: #dedede;
   border-radius: 10px;
   border-width: 0px;
 }
-.node-button[data-v-5b62c397]:hover {
+.node-button[data-v-4064b904]:hover {
   background-color: var(--color-background-hover);
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
 }
-.overlay-content[data-v-5b62c397] {
+.overlay-content[data-v-4064b904] {
   padding: 20px;
   border-radius: 10px;
   box-shadow: var(--shadow-md);
@@ -624,12 +687,12 @@
   flex-direction: column;
   align-items: stretch;
 }
-.overlay-prompt[data-v-5b62c397] {
+.overlay-prompt[data-v-4064b904] {
   margin-bottom: 10px;
   color: var(--color-text-primary);
   font-size: 16px;
 }
-.description-input[data-v-5b62c397] {
+.description-input[data-v-4064b904] {
   margin-bottom: 10px;
   border: 1px solid var(--color-border-primary);
   border-radius: 4px;
@@ -639,31 +702,30 @@
   background-color: var(--color-background-primary);
   color: var(--color-text-primary);
 }
-.selected[data-v-5b62c397] {
+.selected[data-v-4064b904] {
   border: 2px solid var(--color-accent);
 }
 
-.error-node[data-v-7132c328] {
+.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-e49586cb] {
+.custom-node[data-v-e650ee69] {
   border-radius: 4px;
   padding: 1px;
   background-color: var(--color-background-primary);
-  border: 1px solid var(--color-border-primary);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 }
-.selected[data-v-e49586cb] {
+.selected[data-v-e650ee69] {
   border: 2px solid #409eff;
 }
-.custom-node-header[data-v-e49586cb] {
+.custom-node-header[data-v-e650ee69] {
   font-weight: 100;
   font-size: small;
   width: 20px;
@@ -672,7 +734,7 @@
   text-overflow: ellipsis;
   font-family: var(--font-family-base);
 }
-.description-display[data-v-e49586cb] {
+.description-display[data-v-e650ee69] {
   position: relative;
   white-space: normal;
   min-width: 100px;
@@ -688,7 +750,7 @@
   border-radius: 4px;
   color: var(--color-text-primary);
 }
-.edit-icon[data-v-e49586cb] {
+.edit-icon[data-v-e650ee69] {
   opacity: 0;
   transition: opacity 0.2s;
   color: var(--color-accent);
@@ -697,27 +759,27 @@
   align-items: center;
   padding: 2px;
 }
-.description-display:hover .edit-icon[data-v-e49586cb] {
+.description-display:hover .edit-icon[data-v-e650ee69] {
   opacity: 1;
 }
-.edit-icon[data-v-e49586cb]:hover {
+.edit-icon[data-v-e650ee69]:hover {
   color: var(--color-accent-hover);
 }
-.description-text[data-v-e49586cb] {
+.description-text[data-v-e650ee69] {
   margin: 0;
   white-space: pre-wrap;
   word-wrap: break-word;
   font-family: var(--font-family-base);
   font-size: var(--font-size-xs);
 }
-.edit-overlay[data-v-e49586cb] {
+.edit-overlay[data-v-e650ee69] {
   position: fixed;
   z-index: 1000;
   background: var(--color-background-primary);
   border-radius: 4px;
   box-shadow: var(--shadow-lg);
 }
-.description-input[data-v-e49586cb] {
+.description-input[data-v-e650ee69] {
   width: 200px;
   height: 75px;
   resize: both;
@@ -729,17 +791,17 @@
   background-color: var(--color-background-primary);
   color: var(--color-text-primary);
 }
-.handle-input[data-v-e49586cb] {
+.handle-input[data-v-e650ee69] {
   position: absolute;
   left: -8px;
 }
-.handle-output[data-v-e49586cb] {
+.handle-output[data-v-e650ee69] {
   position: absolute;
   right: -8px;
 }
-.context-menu[data-v-e49586cb] {
+.context-menu[data-v-e650ee69] {
   position: fixed;
-  z-index: 10000;
+  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;
@@ -748,7 +810,7 @@
   min-width: 120px;
   font-family: var(--font-family-base);
 }
-.context-menu-item[data-v-e49586cb] {
+.context-menu-item[data-v-e650ee69] {
   padding: 8px 12px;
   display: flex;
   align-items: center;
@@ -759,86 +821,86 @@
   font-family: var(--font-family-base);
   color: var(--color-text-primary);
 }
-.context-menu-item[data-v-e49586cb]:hover {
+.context-menu-item[data-v-e650ee69]:hover {
   background-color: var(--color-background-hover);
 }
-.context-menu-item svg[data-v-e49586cb] {
+.context-menu-item svg[data-v-e650ee69] {
   color: var(--color-text-secondary);
 }
-.context-menu-item span[data-v-e49586cb] {
+.context-menu-item span[data-v-e650ee69] {
   font-family: var(--font-family-base);
 }
-.context-menu-divider[data-v-e49586cb] {
+.context-menu-divider[data-v-e650ee69] {
   height: 1px;
   background-color: var(--color-border-primary);
   margin: 4px 0;
 }
-.context-menu-item-danger[data-v-e49586cb] {
+.context-menu-item-danger[data-v-e650ee69] {
   color: #dc3545;
 }
-.context-menu-item-danger[data-v-e49586cb]:hover {
+.context-menu-item-danger[data-v-e650ee69]:hover {
   background-color: rgba(220, 53, 69, 0.1);
 }
-.context-menu-item-danger svg[data-v-e49586cb] {
+.context-menu-item-danger svg[data-v-e650ee69] {
   color: #dc3545;
 }
 
-.code-container[data-v-3b81aa8c] {
+.code-container[data-v-b36d237e] {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
-.code-header[data-v-3b81aa8c] {
+.code-header[data-v-b36d237e] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
 }
-.code-header h4[data-v-3b81aa8c] {
+.code-header h4[data-v-b36d237e] {
   margin: 0;
 }
-.header-actions[data-v-3b81aa8c] {
+.header-actions[data-v-b36d237e] {
   display: flex;
   gap: 12px;
 }
-.export-button[data-v-3b81aa8c],
-.refresh-button[data-v-3b81aa8c] {
+.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-3b81aa8c]:hover,
-.refresh-button[data-v-3b81aa8c]: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-3b81aa8c]:disabled {
-  background: #6c757d;
+.refresh-button[data-v-b36d237e]:disabled {
+  background: var(--color-gray-500);
   cursor: not-allowed;
 }
-.spinner[data-v-3b81aa8c] {
+.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-3b81aa8c 0.8s linear infinite;
+  animation: spin-b36d237e 0.8s linear infinite;
 }
-@keyframes spin-3b81aa8c {
+@keyframes spin-b36d237e {
 to {
     transform: rotate(360deg);
 }
 }
 
-.nodes-wrapper[data-v-0930336a] {
+.nodes-wrapper[data-v-49354e27] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
@@ -849,7 +911,7 @@ to {
 }
 
 /* Style for search input */
-.search-input[data-v-0930336a] {
+.search-input[data-v-49354e27] {
   padding: var(--spacing-2) var(--spacing-4);
   color: var(--color-text-primary);
   margin-bottom: var(--spacing-2);
@@ -859,15 +921,15 @@ to {
   background-color: var(--color-background-primary);
   transition: border-color var(--transition-fast);
 }
-.search-input[data-v-0930336a]:focus {
+.search-input[data-v-49354e27]:focus {
   outline: none;
   border-color: var(--input-border-focus);
 }
-.category-container[data-v-0930336a] {
+.category-container[data-v-49354e27] {
   overflow: hidden;
   border-radius: var(--border-radius-sm);
 }
-.category-header[data-v-0930336a] {
+.category-header[data-v-49354e27] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -879,25 +941,25 @@ to {
   transition: background-color var(--transition-fast);
   height: 32px;
 }
-.category-header[data-v-0930336a]:hover {
+.category-header[data-v-49354e27]:hover {
   background-color: var(--color-background-tertiary);
 }
-.category-title[data-v-0930336a] {
+.category-title[data-v-49354e27] {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-normal);
   color: var(--color-text-primary);
   text-align: left;
 }
-.category-icon[data-v-0930336a] {
+.category-icon[data-v-49354e27] {
   font-size: var(--font-size-sm);
   color: var(--color-text-secondary);
 }
-.category-content[data-v-0930336a] {
+.category-content[data-v-49354e27] {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background-primary);
 }
-.node-item[data-v-0930336a] {
+.node-item[data-v-49354e27] {
   display: flex;
   align-items: center;
   padding: var(--spacing-2) var(--spacing-4);
@@ -907,34 +969,34 @@ to {
   border-bottom: 1px solid var(--color-border-light);
   height: 32px;
 }
-.node-item[data-v-0930336a]:last-child {
+.node-item[data-v-49354e27]:last-child {
   border-bottom: none;
 }
-.node-item[data-v-0930336a]:hover {
+.node-item[data-v-49354e27]:hover {
   background-color: var(--color-background-tertiary);
 }
-.node-image[data-v-0930336a] {
+.node-image[data-v-49354e27] {
   width: 24px;
   height: 24px;
   margin-right: var(--spacing-2-5);
 }
-.node-name[data-v-0930336a] {
+.node-name[data-v-49354e27] {
   font-size: var(--font-size-sm);
   color: var(--color-text-primary);
 }
 
 /* Custom scrollbar */
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar {
   width: 6px;
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-track {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-track {
   background: transparent;
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-thumb {
   background-color: var(--color-gray-300);
   border-radius: var(--border-radius-full);
 }
-.nodes-wrapper[data-v-0930336a]::-webkit-scrollbar-thumb:hover {
+.nodes-wrapper[data-v-49354e27]::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-gray-400);
 }
 
@@ -1136,17 +1198,21 @@ to {
   background-color: #2196f330;
 }
 
-.layout-widget-wrapper[data-v-d23060a3] {
+.layout-widget-wrapper[data-v-d6625e59] {
   position: fixed;
   z-index: 20000;
 }
-.trigger-btn[data-v-d23060a3] {
+.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;
@@ -1155,15 +1221,15 @@ to {
   position: relative;
   overflow: hidden;
 }
-.trigger-btn[data-v-d23060a3]: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-d23060a3] {
+.trigger-btn.is-open[data-v-d6625e59] {
   cursor: pointer;
 }
-.trigger-btn[data-v-d23060a3]::before {
+.trigger-btn[data-v-d6625e59]::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1171,28 +1237,28 @@ 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-d23060a3]:hover::before {
+.trigger-btn[data-v-d6625e59]:hover::before {
   width: 100px;
   height: 100px;
 }
-.layout-icon[data-v-d23060a3] {
-  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-d23060a3] {
+.trigger-btn:hover .layout-icon[data-v-d6625e59] {
   transform: scale(1.1);
 }
-.trigger-btn.is-open .layout-icon[data-v-d23060a3] {
+.trigger-btn.is-open .layout-icon[data-v-d6625e59] {
   transform: rotate(90deg);
 }
-.panel[data-v-d23060a3] {
+.panel[data-v-d6625e59] {
   position: absolute;
   width: 250px;
   background: var(--color-background-primary);
@@ -1204,7 +1270,7 @@ to {
   backdrop-filter: blur(10px);
   border: 1px solid var(--color-border-primary);
 }
-.panel-header[data-v-d23060a3] {
+.panel-header[data-v-d6625e59] {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1212,13 +1278,13 @@ to {
   border-bottom: 1px solid var(--color-border-primary);
   background: var(--color-background-secondary);
 }
-.panel-title[data-v-d23060a3] {
+.panel-title[data-v-d6625e59] {
   font-weight: 600;
   font-size: 16px;
   color: var(--color-text-primary);
   user-select: none;
 }
-.close-btn[data-v-d23060a3] {
+.close-btn[data-v-d6625e59] {
   background: none;
   border: none;
   font-size: 20px;
@@ -1234,17 +1300,17 @@ to {
   border-radius: 4px;
   transition: all 0.2s;
 }
-.close-btn[data-v-d23060a3]:hover {
+.close-btn[data-v-d6625e59]:hover {
   color: var(--color-text-primary);
   background: var(--color-background-hover);
 }
-.panel-body[data-v-d23060a3] {
+.panel-body[data-v-d6625e59] {
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 }
-.control-btn[data-v-d23060a3] {
+.control-btn[data-v-d6625e59] {
   background-color: var(--color-background-secondary);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-primary);
@@ -1261,49 +1327,62 @@ to {
   position: relative;
   overflow: hidden;
 }
-.control-btn[data-v-d23060a3]::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-d23060a3]:hover::before {
+.control-btn[data-v-d6625e59]:hover::before {
   left: 100%;
 }
-.control-btn[data-v-d23060a3]:hover {
+.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-d23060a3] {
-  background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
-  border-color: #764ba2;
-}
-.control-btn.accent[data-v-d23060a3]:hover {
-  background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
-  border-color: #667eea;
-}
-.control-btn .icon[data-v-d23060a3] {
+.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-d23060a3],
-.panel-fade-leave-active[data-v-d23060a3] {
+.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-d23060a3] {
+.panel-fade-enter-from[data-v-d6625e59] {
   opacity: 0;
   transform: translateY(10px) scale(0.95);
 }
-.panel-fade-leave-to[data-v-d23060a3] {
+.panel-fade-leave-to[data-v-d6625e59] {
   opacity: 0;
   transform: translateY(-10px) scale(0.95);
 }
@@ -10343,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;
@@ -10359,9 +10438,13 @@ to {
   animation: pulse 2s ease-in-out infinite;
 }
 .refresh-link-button {
-  background: linear-gradient(135deg, var(--color-background-primary) 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;
@@ -10385,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);
@@ -10404,14 +10485,14 @@ to {
 }
 .dismiss-button {
   background: var(--color-background-primary);
-  border: 1px solid rgba(251, 191, 36, 0.3);
+  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;
@@ -10423,10 +10504,10 @@ to {
 }
 .dismiss-button:hover {
   background: var(--color-background-hover);
-  border-color: #f59e0b;
-  color: #78350f;
+  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);
@@ -10447,8 +10528,8 @@ to {
   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;
@@ -10458,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;
 }
@@ -10487,30 +10568,30 @@ to {
   --ag-selected-row-background-color: var(--color-background-selected);
 }
 
-.hide-results-button[data-v-2e3312f9] {
+.hide-results-button[data-v-469df264] {
   margin-bottom: 10px;
 }
-.flow-summary[data-v-2e3312f9] {
+.flow-summary[data-v-469df264] {
   margin-left: 10px;
   font-weight: bold;
   color: var(--color-text-primary);
 }
-.node-card[data-v-2e3312f9] {
+.node-card[data-v-469df264] {
   padding: 15px;
 }
-.node-details p[data-v-2e3312f9] {
+.node-details p[data-v-469df264] {
   margin: 5px 0;
 }
-.success[data-v-2e3312f9] {
-  color: green;
+.success[data-v-469df264] {
+  color: var(--color-success);
 }
-.failure[data-v-2e3312f9] {
-  color: red;
+.failure[data-v-469df264] {
+  color: var(--color-danger);
 }
-.running[data-v-2e3312f9] {
-  animation: pulse-2e3312f9 1.5s infinite;
+.running[data-v-469df264] {
+  animation: pulse-469df264 1.5s infinite;
 }
-@keyframes pulse-2e3312f9 {
+@keyframes pulse-469df264 {
 0% {
     opacity: 1;
 }
@@ -10521,18 +10602,18 @@ to {
     opacity: 1;
 }
 }
-.node-info[data-v-2e3312f9] {
+.node-info[data-v-469df264] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.node-title[data-v-2e3312f9] {
+.node-title[data-v-469df264] {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
-.node-description[data-v-2e3312f9] {
+.node-description[data-v-469df264] {
   margin: 0;
   font-size: 14px;
   color: var(--color-text-secondary);
@@ -10543,62 +10624,63 @@ to {
   -webkit-box-orient: vertical;
 }
 
-.log-container[data-v-4eceb639] {
+.log-container[data-v-5497bec4] {
   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-4eceb639] {
+.log-header[data-v-5497bec4] {
   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);
+  opacity: 0.95;
   position: sticky;
   top: 0;
   z-index: 10; /* Ensures it stays above the logs */
 }
-.log-status[data-v-4eceb639] {
+.log-status[data-v-5497bec4] {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9em;
 }
-.status-indicator[data-v-4eceb639] {
+.status-indicator[data-v-5497bec4] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: #666;
+  background-color: var(--color-gray-500);
 }
-.status-indicator.active[data-v-4eceb639] {
-  background-color: #4caf50;
+.status-indicator.active[data-v-5497bec4] {
+  background-color: var(--color-success);
 }
-.status-indicator.error[data-v-4eceb639] {
-  background-color: #f44336;
+.status-indicator.error[data-v-5497bec4] {
+  background-color: var(--color-danger);
 }
-.log-controls[data-v-4eceb639] {
+.log-controls[data-v-5497bec4] {
   display: flex;
   gap: 8px;
 }
-.error-banner[data-v-4eceb639] {
+.error-banner[data-v-5497bec4] {
   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-4eceb639] {
+.empty-state[data-v-5497bec4] {
   padding: 16px;
   text-align: center;
-  color: #777;
+  color: var(--color-text-muted);
   font-style: italic;
 }
-.logs[data-v-4eceb639] {
+.logs[data-v-5497bec4] {
   flex-grow: 1;
   margin: 0;
   padding: 8px;
@@ -10608,67 +10690,32 @@ to {
   line-height: 1.8; /* Reduced line height */
   font-size: small;
 }
-.logs.auto-scroll[data-v-4eceb639] {
+.logs.auto-scroll[data-v-5497bec4] {
   scroll-behavior: smooth;
 }
-[data-v-4eceb639]::-webkit-scrollbar {
+[data-v-5497bec4]::-webkit-scrollbar {
   width: 12px;
 }
-[data-v-4eceb639]::-webkit-scrollbar-track {
-  background: #1e1e1e;
+[data-v-5497bec4]::-webkit-scrollbar-track {
+  background: var(--color-code-bg);
 }
-[data-v-4eceb639]::-webkit-scrollbar-thumb {
-  background: #424242;
+[data-v-5497bec4]::-webkit-scrollbar-thumb {
+  background: var(--color-gray-600);
   border-radius: 6px;
-  border: 3px solid #1e1e1e;
+  border: 3px solid var(--color-code-bg);
 }
-[data-v-4eceb639]::-webkit-scrollbar-thumb:hover {
-  background: #4f4f4f;
+[data-v-5497bec4]::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
 }
-.error-line[data-v-4eceb639] {
-  background-color: rgba(255, 0, 0, 0.2); /* Light red background */
-  color: #ffcdd2; /* Light red text for better readability */
+.error-line[data-v-5497bec4] {
+  background-color: var(--color-danger-light);
+  color: var(--color-danger);
 }
 
-.context-menu[data-v-2d0cd6bf] {
-  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: var(--color-background-primary);
-  border-radius: var(--border-radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 10000;
-  overflow: hidden;
-  border: 1px solid var(--color-border-primary);
-}
-.context-menu-header[data-v-2d0cd6bf] {
-  padding: var(--spacing-2) var(--spacing-3);
-  font-weight: var(--font-weight-semibold);
-  background-color: var(--color-background-secondary);
-  border-bottom: 1px solid var(--color-border-primary);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
-}
-.context-menu-items[data-v-2d0cd6bf] {
-  max-height: 300px;
-  overflow-y: auto;
-}
-.context-menu-item[data-v-2d0cd6bf] {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-2) var(--spacing-3);
-  cursor: pointer;
-  transition: background-color var(--transition-fast);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-primary);
-}
-.context-menu-item[data-v-2d0cd6bf]:hover {
-  background-color: var(--color-background-tertiary);
-}
-.context-menu-icon[data-v-2d0cd6bf] {
-  margin-right: var(--spacing-2);
-  width: 20px;
-  text-align: center;
-  color: var(--color-text-secondary);
 }
 .vue-flow {
   position: relative;
@@ -11159,7 +11206,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;
@@ -11213,11 +11266,11 @@ main {
   gap: 10px;
 }
 
-.flow-tabs-container[data-v-1d0bca1e] {
+.flow-tabs-container[data-v-5470f189] {
   width: 100%;
   font-family: var(--font-family-base);
 }
-.flow-tabs[data-v-1d0bca1e] {
+.flow-tabs[data-v-5470f189] {
   display: flex;
   align-items: center;
   overflow-x: auto;
@@ -11227,17 +11280,17 @@ main {
   padding-left: var(--spacing-1);
   scrollbar-width: thin;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar {
+.flow-tabs[data-v-5470f189]::-webkit-scrollbar {
   height: 4px;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-track {
+.flow-tabs[data-v-5470f189]::-webkit-scrollbar-track {
   background: transparent;
 }
-.flow-tabs[data-v-1d0bca1e]::-webkit-scrollbar-thumb {
+.flow-tabs[data-v-5470f189]::-webkit-scrollbar-thumb {
   background-color: var(--color-gray-300);
   border-radius: var(--border-radius-full);
 }
-.flow-tab[data-v-1d0bca1e] {
+.flow-tab[data-v-5470f189] {
   display: flex;
   align-items: center;
   padding: 0 var(--spacing-4);
@@ -11253,28 +11306,28 @@ main {
   margin-right: 1px;
   transition: all var(--transition-fast);
 }
-.flow-tab.active[data-v-1d0bca1e] {
+.flow-tab.active[data-v-5470f189] {
   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-1d0bca1e]:not(.active):hover {
+.flow-tab[data-v-5470f189]:not(.active):hover {
   background-color: var(--color-background-hover);
 }
-.tab-content[data-v-1d0bca1e] {
+.tab-content[data-v-5470f189] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   width: calc(100% - 20px);
   overflow: hidden;
 }
-.tab-icon[data-v-1d0bca1e] {
+.tab-icon[data-v-5470f189] {
   font-size: var(--font-size-xl);
-  color: var(--primary-blue);
+  color: var(--color-accent-subtle);
   flex-shrink: 0;
 }
-.tab-name[data-v-1d0bca1e] {
+.tab-name[data-v-5470f189] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11283,10 +11336,10 @@ main {
   letter-spacing: 0.01em;
   color: var(--color-text-secondary);
 }
-.active .tab-name[data-v-1d0bca1e] {
+.active .tab-name[data-v-5470f189] {
   color: var(--color-text-primary);
 }
-.close-icon[data-v-1d0bca1e] {
+.close-icon[data-v-5470f189] {
   font-size: var(--font-size-lg);
   color: var(--color-text-muted);
   opacity: 0;
@@ -11297,21 +11350,21 @@ main {
   transition: all var(--transition-fast);
   transform: scale(0.9);
 }
-.flow-tab:hover .close-icon[data-v-1d0bca1e] {
+.flow-tab:hover .close-icon[data-v-5470f189] {
   opacity: 1;
 }
-.close-icon[data-v-1d0bca1e]:hover {
+.close-icon[data-v-5470f189]:hover {
   background-color: var(--color-background-tertiary);
   color: var(--color-text-secondary);
   transform: scale(1);
 }
-.active .close-icon[data-v-1d0bca1e]:hover {
+.active .close-icon[data-v-5470f189]:hover {
   background-color: var(--color-background-hover);
   color: var(--color-primary);
 }
 
 /* New flow tab styling */
-.new-flow-tab[data-v-1d0bca1e] {
+.new-flow-tab[data-v-5470f189] {
   min-width: 40px;
   max-width: 40px;
   display: flex;
@@ -11319,7 +11372,7 @@ main {
   align-items: center;
   color: var(--color-primary);
 }
-.new-flow-tab[data-v-1d0bca1e]:hover {
+.new-flow-tab[data-v-5470f189]:hover {
   background-color: var(--color-background-hover);
 }