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

flowfile/web/static/assets/{designer-e3c150ec.css → DesignerView-a6d0ee84.css}

@@ -1,9 +1,9 @@
 
-.button-group[data-v-c0f9acc7] {
+.button-group[data-v-b6e5fd3a] {
   display: flex;
   gap: 10px;
 }
-.button-group .el-button[data-v-c0f9acc7] {
+.button-group .el-button[data-v-b6e5fd3a] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -20,20 +20,20 @@
 }
 
 /* Run button - normal state */
-.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]) {
+.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;
 }
 
 /* Run button - hover state */
-.button-group .el-button[data-v-c0f9acc7]:first-child:not([disabled]):hover {
+.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;
 }
 
 /* Run button - disabled state */
-.button-group .el-button:first-child[disabled][data-v-c0f9acc7] {
+.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;
@@ -41,72 +41,72 @@
 }
 
 /* Cancel button */
-.button-group .el-button[data-v-c0f9acc7]:nth-child(2) {
+.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;
 }
 
 /* Cancel button - hover state */
-.button-group .el-button[data-v-c0f9acc7]:nth-child(2):hover {
+.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;
 }
 
 /* Active state for both buttons */
-.button-group .el-button[data-v-c0f9acc7]:active {
+.button-group .el-button[data-v-b6e5fd3a]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
 
-.browser-title[data-v-b74852a7] {
+.browser-title[data-v-d209bc3c] {
   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-b74852a7] {
+.mode-selector[data-v-d209bc3c] {
   display: flex;
   justify-content: center;
 }
-.browser-content[data-v-b74852a7] {
+.browser-content[data-v-d209bc3c] {
   display: flex;
   flex-direction: column;
   height: calc(100% - 116px); /* Adjust based on header height */
   overflow: hidden;
 }
-.browser-toolbar[data-v-b74852a7] {
+.browser-toolbar[data-v-d209bc3c] {
   padding: 16px;
-  background-color: #fff;
+  background-color: var(--color-background-primary);
   border-bottom: 1px solid #e9ecef;
 }
-.path-navigation[data-v-b74852a7] {
+.path-navigation[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }
-.nav-button[data-v-b74852a7] {
+.nav-button[data-v-d209bc3c] {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 8px 16px;
   border: 1px solid #dee2e6;
   border-radius: 4px;
-  background-color: white;
+  background-color: var(--color-background-primary);
   color: #495057;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.nav-button[data-v-b74852a7]:hover:not(:disabled) {
+.nav-button[data-v-d209bc3c]:hover:not(:disabled) {
   background-color: #f8f9fa;
   border-color: #ced4da;
 }
-.current-path[data-v-b74852a7] {
+.current-path[data-v-d209bc3c] {
   flex: 1;
   padding: 8px 12px;
   background-color: #f8f9fa;
@@ -115,119 +115,119 @@
   font-family: monospace;
   color: #495057;
 }
-.search-container[data-v-b74852a7] {
+.search-container[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   gap: 16px;
   flex: 1;
 }
-.search-input[data-v-b74852a7] {
+.search-input[data-v-d209bc3c] {
   flex: 1;
 }
-.browser-main[data-v-b74852a7] {
+.browser-main[data-v-d209bc3c] {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
 }
-.file-item[data-v-b74852a7] {
+.file-item[data-v-d209bc3c] {
   border: 1px solid #e9ecef;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.2s ease;
 }
-.file-item[data-v-b74852a7]:hover {
+.file-item[data-v-d209bc3c]:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
-.file-item.selected[data-v-b74852a7] {
+.file-item.selected[data-v-d209bc3c] {
   border-color: #3b82f6;
   background-color: #eff6ff;
 }
-.file-item-content[data-v-b74852a7] {
+.file-item-content[data-v-d209bc3c] {
   padding: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.file-icon-wrapper[data-v-b74852a7] {
+.file-icon-wrapper[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
 }
-.file-icon[data-v-b74852a7] {
+.file-icon[data-v-d209bc3c] {
   width: 24px;
   height: 24px;
   color: #6b7280;
 }
-.file-details[data-v-b74852a7] {
+.file-details[data-v-d209bc3c] {
   flex: 1;
   min-width: 0;
 }
-.file-name[data-v-b74852a7] {
+.file-name[data-v-d209bc3c] {
   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-b74852a7] {
+.file-info[data-v-d209bc3c] {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
-.browser-actions[data-v-b74852a7] {
+.browser-actions[data-v-d209bc3c] {
   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-b74852a7] {
-  color: #6b7280;
+.selected-file[data-v-d209bc3c] {
+  color: var(--color-text-secondary);
   font-size: 14px;
 }
-.loading-state[data-v-b74852a7],
-.error-state[data-v-b74852a7] {
+.loading-state[data-v-d209bc3c],
+.error-state[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
-  color: #6b7280;
+  color: var(--color-text-secondary);
 }
-.error-state[data-v-b74852a7] {
-  color: #dc2626;
+.error-state[data-v-d209bc3c] {
+  color: var(--color-danger);
 }
-.hidden-file[data-v-b74852a7] {
+.hidden-file[data-v-d209bc3c] {
   opacity: 0.5;
 }
-.file-browser[data-v-b74852a7] {
+.file-browser[data-v-d209bc3c] {
   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);
 }
-.browser-content[data-v-b74852a7] {
+.browser-content[data-v-d209bc3c] {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0; /* Enable proper flex child scrolling */
   overflow: hidden;
 }
-.browser-main[data-v-b74852a7] {
+.browser-main[data-v-d209bc3c] {
   flex: 1;
   overflow-y: auto; /* Make this section scrollable */
   padding: 16px;
   min-height: 0; /* Enable proper flex child scrolling */
 }
-.grid-container[data-v-b74852a7] {
+.grid-container[data-v-d209bc3c] {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
   gap: 16px;
@@ -235,25 +235,25 @@
 }
 
 /* Optional: if you want to maintain icon size consistency */
-.file-icon[data-v-b74852a7] {
+.file-icon[data-v-d209bc3c] {
   width: 24px;
   height: 24px;
   object-fit: contain;
 }
 
 /* Add new styles for sort controls */
-.search-and-sort-container[data-v-b74852a7] {
+.search-and-sort-container[data-v-d209bc3c] {
   display: flex;
   flex-direction: column;
   gap: 12px;
 }
-.sort-controls[data-v-b74852a7] {
+.sort-controls[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   gap: 8px;
   min-width: 180px; /* Prevent select from being too narrow */
 }
-.sort-direction-button[data-v-b74852a7] {
+.sort-direction-button[data-v-d209bc3c] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -261,116 +261,142 @@
   height: 32px;
   padding: 0;
 }
-.controls-row[data-v-b74852a7] {
+.controls-row[data-v-d209bc3c] {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 12px;
 }
+.form-hint[data-v-d209bc3c] {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.preview-label[data-v-d209bc3c] {
+  color: var(--color-text-secondary);
+}
+.form-hint code[data-v-d209bc3c] {
+  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] {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
 
-.action-buttons[data-v-2566c44c] {
-  padding-left: 20px;
+.action-buttons[data-v-b6daebea] {
+  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-2566c44c] {
+.action-btn[data-v-b6daebea] {
   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-2566c44c]: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-b6daebea]:hover {
+  background-color: var(--color-background-tertiary);
+  border-color: var(--color-border-secondary);
 }
-.action-btn[data-v-2566c44c]:active {
+.action-btn[data-v-b6daebea]:active {
   transform: translateY(1px);
   box-shadow: none;
 }
-.btn-icon[data-v-2566c44c] {
-  font-size: 16px;
-  color: rgb(2, 27, 45); /* Darker icon color */
+.action-btn.active[data-v-b6daebea] {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.btn-icon[data-v-b6daebea] {
+  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] {
+  color: var(--color-text-primary);
 }
-.btn-text[data-v-2566c44c] {
+.action-btn.active .btn-icon[data-v-b6daebea] {
+  color: var(--color-accent);
+}
+.btn-text[data-v-b6daebea] {
   white-space: nowrap;
 }
-.settings-modal-content[data-v-2566c44c] {
-  padding: 16px;
-  font-family:
-    "Inter",
-    "Roboto",
-    -apple-system,
-    BlinkMacSystemFont,
-    sans-serif;
-}
-.form-group[data-v-2566c44c] {
-  margin-bottom: 16px;
+.settings-modal-content[data-v-b6daebea] {
+  padding: var(--spacing-4);
+  font-family: var(--font-family-base);
+}
+.form-group[data-v-b6daebea] {
+  margin-bottom: var(--spacing-4);
 }
-.form-group label[data-v-2566c44c] {
+.form-group label[data-v-b6daebea] {
   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-2566c44c] {
-  padding: 16px 0;
+.quick-create-modal[data-v-b6daebea] {
+  padding: var(--spacing-4) 0;
 }
-.quick-create-modal .form-group[data-v-2566c44c] {
-  margin-bottom: 20px;
+.quick-create-modal .form-group[data-v-b6daebea] {
+  margin-bottom: var(--spacing-5);
 }
-.quick-create-modal label[data-v-2566c44c] {
+.quick-create-modal label[data-v-b6daebea] {
   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-2566c44c] {
-  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-b6daebea] {
+  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-2566c44c] {
-  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-b6daebea] {
+  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-2566c44c] {
+.dialog-footer[data-v-b6daebea] {
   display: flex;
-  gap: 8px;
+  gap: var(--spacing-2);
 }
 
-.status-wrapper[data-v-4aa2388b] {
+.status-wrapper[data-v-b959ca1b] {
   display: flex;
   align-items: center;
   gap: 12px;
 }
-.flow-card[data-v-4aa2388b] {
+.flow-card[data-v-b959ca1b] {
   position: relative;
   width: 40px;
   height: 40px;
@@ -379,22 +405,22 @@
   cursor: help;
   overflow: hidden;
 }
-.flow-card[data-v-4aa2388b]:hover {
+.flow-card[data-v-b959ca1b]:hover {
   transform: translateY(-0.5px);
   box-shadow: 0 4px 16px rgba(159, 129, 228, 0.25);
 }
-.flow-animation[data-v-4aa2388b] {
+.flow-animation[data-v-b959ca1b] {
   width: 100%;
   height: 100%;
 }
 
 /* Flow Container */
-.flow-container[data-v-4aa2388b] {
+.flow-container[data-v-b959ca1b] {
   fill: #8c8caa;
 }
 
 /* Extra Thick Flow Lines with Gradient */
-.flow-line[data-v-4aa2388b] {
+.flow-line[data-v-b959ca1b] {
   fill: none;
   stroke: url(#lineGradient);
   stroke-width: 8; /* Extra thick lines */
@@ -404,35 +430,35 @@
 }
 
 /* Animation only when flowing */
-.is-flowing .flow-line[data-v-4aa2388b] {
-  animation: flowMove-4aa2388b 3s infinite linear;
+.is-flowing .flow-line[data-v-b959ca1b] {
+  animation: flowMove-b959ca1b 3s infinite linear;
 }
-.is-flowing .flow-line-2[data-v-4aa2388b] {
+.is-flowing .flow-line-2[data-v-b959ca1b] {
   animation-delay: -1s;
 }
-.is-flowing .flow-line-3[data-v-4aa2388b] {
+.is-flowing .flow-line-3[data-v-b959ca1b] {
   animation-delay: -2s;
 }
 
 /* Flow Particles - only visible when running */
-.flow-particle[data-v-4aa2388b] {
+.flow-particle[data-v-b959ca1b] {
   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-b959ca1b] {
+  animation: particleFlow-b959ca1b 3s infinite ease-in-out;
 }
-.particle-1[data-v-4aa2388b] {
+.particle-1[data-v-b959ca1b] {
   animation-delay: 0s;
 }
-.particle-2[data-v-4aa2388b] {
+.particle-2[data-v-b959ca1b] {
   animation-delay: -1s;
 }
-.particle-3[data-v-4aa2388b] {
+.particle-3[data-v-b959ca1b] {
   animation-delay: -2s;
 }
 /* Control Button */
-.control-button[data-v-4aa2388b] {
+.control-button[data-v-b959ca1b] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -446,19 +472,19 @@
   transition: all 0.3s ease;
   box-shadow: 0 2px 8px rgba(76, 0, 255, 0.2);
 }
-.control-button[data-v-4aa2388b]:hover {
+.control-button[data-v-b959ca1b]:hover {
   background: #4834d4;
   color: white;
   transform: translateY(-1px);
   box-shadow: 0 4px 16px rgba(76, 0, 255, 0.3);
 }
-.control-button.is-active[data-v-4aa2388b] {
+.control-button.is-active[data-v-b959ca1b] {
   background: #4834d4;
   color: white;
 }
 
 /* Animations */
-@keyframes flowMove-4aa2388b {
+@keyframes flowMove-b959ca1b {
 0% {
     transform: translateX(0);
 }
@@ -466,7 +492,7 @@
     transform: translateX(-70px);
 }
 }
-@keyframes particleFlow-4aa2388b {
+@keyframes particleFlow-b959ca1b {
 0% {
     opacity: 0;
     transform: translateX(-10px) scale(0.8);
@@ -485,37 +511,37 @@
 }
 }
 
-.status-indicator[data-v-8ef0b204] {
+.status-indicator[data-v-5b62c397] {
   position: relative;
   display: flex;
   align-items: center;
   margin-right: 8px;
 }
-.status-indicator[data-v-8ef0b204]::before {
+.status-indicator[data-v-5b62c397]::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
 }
-.status-indicator.success[data-v-8ef0b204]::before {
+.status-indicator.success[data-v-5b62c397]::before {
   background-color: #4caf50;
 }
-.status-indicator.failure[data-v-8ef0b204]::before {
+.status-indicator.failure[data-v-5b62c397]::before {
   background-color: #f44336;
 }
-.status-indicator.warning[data-v-8ef0b204]::before {
+.status-indicator.warning[data-v-5b62c397]::before {
   background-color: #f09f5dd1;
 }
-.status-indicator.unknown[data-v-8ef0b204]::before {
-  background-color: #ffffff;
+.status-indicator.unknown[data-v-5b62c397]::before {
+  background-color: var(--color-text-muted);
 }
-.status-indicator.running[data-v-8ef0b204]::before {
+.status-indicator.running[data-v-5b62c397]::before {
   background-color: #0909ca;
-  animation: pulse-8ef0b204 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: pulse-5b62c397 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   box-shadow: 0 0 10px #0909ca;
 }
-@keyframes pulse-8ef0b204 {
+@keyframes pulse-5b62c397 {
 0% {
     transform: scale(1);
     opacity: 1;
@@ -532,11 +558,11 @@
     box-shadow: 0 0 5px #0909ca;
 }
 }
-.tooltip-text[data-v-8ef0b204] {
+.tooltip-text[data-v-5b62c397] {
   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;
@@ -548,29 +574,29 @@
   opacity: 0;
   transition: opacity 0.3s;
 }
-.status-indicator:hover .tooltip-text[data-v-8ef0b204] {
+.status-indicator:hover .tooltip-text[data-v-5b62c397] {
   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-5b62c397]:hover,
+.description-input[data-v-5b62c397]: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-5b62c397] {
   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-5b62c397] {
   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-5b62c397] {
   position: fixed; /* This is key for viewport-level positioning */
   width: 200px; /* Or whatever width you prefer */
   height: 200px; /* Or whatever height you prefer */
@@ -580,70 +606,73 @@
   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-5b62c397] {
+  background-color: var(--color-background-primary);
   border-radius: 10px;
   border-width: 0px;
 }
-.node-button[data-v-8ef0b204]:hover {
-  background-color: #f5f5f5;
+.node-button[data-v-5b62c397]: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-5b62c397] {
   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-5b62c397] {
   margin-bottom: 10px;
-  color: #333;
+  color: var(--color-text-primary);
   font-size: 16px;
 }
-.description-input[data-v-8ef0b204] {
+.description-input[data-v-5b62c397] {
   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-5b62c397] {
+  border: 2px solid var(--color-accent);
 }
 
-.error-node[data-v-00eceaf3] {
+.error-node[data-v-7132c328] {
   padding: 8px;
   background: #ffcccc;
   border-radius: 4px;
   font-size: 12px;
 }
 
-.custom-node[data-v-e5db3d68] {
+.custom-node[data-v-e49586cb] {
   border-radius: 4px;
   padding: 1px;
-  background-color: white;
+  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-e5db3d68] {
+.selected[data-v-e49586cb] {
   border: 2px solid #409eff;
 }
-.custom-node-header[data-v-e5db3d68] {
+.custom-node-header[data-v-e49586cb] {
   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-e5db3d68] {
+.description-display[data-v-e49586cb] {
   position: relative;
   white-space: normal;
   min-width: 100px;
@@ -651,71 +680,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-e5db3d68] {
+.edit-icon[data-v-e49586cb] {
   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-e5db3d68] {
+.description-display:hover .edit-icon[data-v-e49586cb] {
   opacity: 1;
 }
-.edit-icon[data-v-e5db3d68]:hover {
-  color: #051233;
+.edit-icon[data-v-e49586cb]:hover {
+  color: var(--color-accent-hover);
 }
-.description-text[data-v-e5db3d68] {
+.description-text[data-v-e49586cb] {
   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-e5db3d68] {
+.edit-overlay[data-v-e49586cb] {
   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-e5db3d68] {
+.description-input[data-v-e49586cb] {
   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-e5db3d68] {
+.handle-input[data-v-e49586cb] {
   position: absolute;
   left: -8px;
 }
-.handle-output[data-v-e5db3d68] {
+.handle-output[data-v-e49586cb] {
   position: absolute;
   right: -8px;
 }
-.context-menu[data-v-e5db3d68] {
+.context-menu[data-v-e49586cb] {
   position: fixed;
   z-index: 10000;
-  background-color: white;
+  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-e5db3d68] {
+.context-menu-item[data-v-e49586cb] {
   padding: 8px 12px;
   display: flex;
   align-items: center;
@@ -723,38 +756,53 @@
   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-e49586cb]:hover {
+  background-color: var(--color-background-hover);
+}
+.context-menu-item svg[data-v-e49586cb] {
+  color: var(--color-text-secondary);
+}
+.context-menu-item span[data-v-e49586cb] {
+  font-family: var(--font-family-base);
+}
+.context-menu-divider[data-v-e49586cb] {
+  height: 1px;
+  background-color: var(--color-border-primary);
+  margin: 4px 0;
 }
-.context-menu-item[data-v-e5db3d68]:hover {
-  background-color: #f5f5f5;
+.context-menu-item-danger[data-v-e49586cb] {
+  color: #dc3545;
 }
-.context-menu-item svg[data-v-e5db3d68] {
-  color: #555;
+.context-menu-item-danger[data-v-e49586cb]:hover {
+  background-color: rgba(220, 53, 69, 0.1);
 }
-.context-menu-item span[data-v-e5db3d68] {
-  font-family: "Roboto", "Source Sans Pro", Avenir, Helvetica, Arial, sans-serif;
+.context-menu-item-danger svg[data-v-e49586cb] {
+  color: #dc3545;
 }
 
-.code-container[data-v-8bafe064] {
+.code-container[data-v-3b81aa8c] {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
 }
-.code-header[data-v-8bafe064] {
+.code-header[data-v-3b81aa8c] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
 }
-.code-header h4[data-v-8bafe064] {
+.code-header h4[data-v-3b81aa8c] {
   margin: 0;
 }
-.header-actions[data-v-8bafe064] {
+.header-actions[data-v-3b81aa8c] {
   display: flex;
   gap: 12px;
 }
-.export-button[data-v-8bafe064],
-.refresh-button[data-v-8bafe064] {
+.export-button[data-v-3b81aa8c],
+.refresh-button[data-v-3b81aa8c] {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -767,148 +815,184 @@
   font-size: 14px;
   transition: background 0.2s;
 }
-.export-button[data-v-8bafe064]:hover,
-.refresh-button[data-v-8bafe064]:hover:not(:disabled) {
+.export-button[data-v-3b81aa8c]:hover,
+.refresh-button[data-v-3b81aa8c]:hover:not(:disabled) {
   background: #005a9e;
 }
-.refresh-button[data-v-8bafe064]:disabled {
+.refresh-button[data-v-3b81aa8c]:disabled {
   background: #6c757d;
   cursor: not-allowed;
 }
-.spinner[data-v-8bafe064] {
+.spinner[data-v-3b81aa8c] {
   display: inline-block;
   width: 14px;
   height: 14px;
   border: 2px solid #ffffff;
   border-radius: 50%;
   border-top-color: transparent;
-  animation: spin-8bafe064 0.8s linear infinite;
+  animation: spin-3b81aa8c 0.8s linear infinite;
 }
-@keyframes spin-8bafe064 {
+@keyframes spin-3b81aa8c {
 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;
@@ -921,7 +1005,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%;
@@ -929,7 +1013,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:
@@ -938,21 +1022,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;
@@ -961,37 +1045,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;
@@ -999,62 +1084,63 @@ 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-d23060a3] {
   position: fixed;
   z-index: 20000;
 }
-.trigger-btn[data-v-0bdaa52f] {
+.trigger-btn[data-v-d23060a3] {
   width: 45px;
   height: 45px;
   border-radius: 50%;
@@ -1069,15 +1155,15 @@ to {
   position: relative;
   overflow: hidden;
 }
-.trigger-btn[data-v-0bdaa52f]:hover {
+.trigger-btn[data-v-d23060a3]:hover {
   width: 55px;
   height: 55px;
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
 }
-.trigger-btn.is-open[data-v-0bdaa52f] {
+.trigger-btn.is-open[data-v-d23060a3] {
   cursor: pointer;
 }
-.trigger-btn[data-v-0bdaa52f]::before {
+.trigger-btn[data-v-d23060a3]::before {
   content: "";
   position: absolute;
   top: 50%;
@@ -1091,54 +1177,52 @@ to {
     width 0.6s,
     height 0.6s;
 }
-.trigger-btn[data-v-0bdaa52f]:hover::before {
+.trigger-btn[data-v-d23060a3]:hover::before {
   width: 100px;
   height: 100px;
 }
-.layout-icon[data-v-0bdaa52f] {
+.layout-icon[data-v-d23060a3] {
   color: white;
   transition: transform 0.3s ease;
   pointer-events: none;
 }
-.trigger-btn:hover .layout-icon[data-v-0bdaa52f] {
+.trigger-btn:hover .layout-icon[data-v-d23060a3] {
   transform: scale(1.1);
 }
-.trigger-btn.is-open .layout-icon[data-v-0bdaa52f] {
+.trigger-btn.is-open .layout-icon[data-v-d23060a3] {
   transform: rotate(90deg);
 }
-.panel[data-v-0bdaa52f] {
+.panel[data-v-d23060a3] {
   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-d23060a3] {
   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-d23060a3] {
   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-d23060a3] {
   background: none;
   border: none;
   font-size: 20px;
-  color: #888;
+  color: var(--color-text-muted);
   cursor: pointer;
   padding: 0;
   line-height: 1;
@@ -1150,20 +1234,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-d23060a3]:hover {
+  color: var(--color-text-primary);
+  background: var(--color-background-hover);
 }
-.panel-body[data-v-0bdaa52f] {
+.panel-body[data-v-d23060a3] {
   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-d23060a3] {
+  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;
@@ -1177,7 +1261,7 @@ to {
   position: relative;
   overflow: hidden;
 }
-.control-btn[data-v-0bdaa52f]::before {
+.control-btn[data-v-d23060a3]::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1187,39 +1271,39 @@ to {
   background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
   transition: left 0.5s;
 }
-.control-btn[data-v-0bdaa52f]:hover::before {
+.control-btn[data-v-d23060a3]:hover::before {
   left: 100%;
 }
-.control-btn[data-v-0bdaa52f]:hover {
-  background-color: #f0f2ff;
-  border-color: #667eea;
+.control-btn[data-v-d23060a3]: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] {
+.control-btn.accent[data-v-d23060a3] {
   background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
   border-color: #764ba2;
 }
-.control-btn.accent[data-v-0bdaa52f]:hover {
+.control-btn.accent[data-v-d23060a3]:hover {
   background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
   border-color: #667eea;
 }
-.control-btn .icon[data-v-0bdaa52f] {
+.control-btn .icon[data-v-d23060a3] {
   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-d23060a3],
+.panel-fade-leave-active[data-v-d23060a3] {
   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-d23060a3] {
   opacity: 0;
   transform: translateY(10px) scale(0.95);
 }
-.panel-fade-leave-to[data-v-0bdaa52f] {
+.panel-fade-leave-to[data-v-d23060a3] {
   opacity: 0;
   transform: translateY(-10px) scale(0.95);
 }
@@ -10161,7 +10245,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;
@@ -10170,8 +10255,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;
 }
@@ -10274,7 +10359,7 @@ to {
   animation: pulse 2s ease-in-out infinite;
 }
 .refresh-link-button {
-  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
+  background: linear-gradient(135deg, var(--color-background-primary) 0%, #fef3c7 100%);
   border: 1px solid #f59e0b;
   color: #92400e;
   border-radius: 6px;
@@ -10318,7 +10403,7 @@ to {
     inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .dismiss-button {
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--color-background-primary);
   border: 1px solid rgba(251, 191, 36, 0.3);
   width: 24px;
   height: 24px;
@@ -10337,7 +10422,7 @@ to {
   z-index: 1;
 }
 .dismiss-button:hover {
-  background: white;
+  background: var(--color-background-hover);
   border-color: #f59e0b;
   color: #78350f;
   transform: rotate(90deg) scale(1.1);
@@ -10351,13 +10436,13 @@ 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;
 }
@@ -10390,35 +10475,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-2e3312f9] {
   margin-bottom: 10px;
 }
-.flow-summary[data-v-8ed83347] {
+.flow-summary[data-v-2e3312f9] {
   margin-left: 10px;
   font-weight: bold;
-  color: #333;
+  color: var(--color-text-primary);
 }
-.node-card[data-v-8ed83347] {
+.node-card[data-v-2e3312f9] {
   padding: 15px;
 }
-.node-details p[data-v-8ed83347] {
+.node-details p[data-v-2e3312f9] {
   margin: 5px 0;
 }
-.success[data-v-8ed83347] {
+.success[data-v-2e3312f9] {
   color: green;
 }
-.failure[data-v-8ed83347] {
+.failure[data-v-2e3312f9] {
   color: red;
 }
-.running[data-v-8ed83347] {
-  animation: pulse-8ed83347 1.5s infinite;
+.running[data-v-2e3312f9] {
+  animation: pulse-2e3312f9 1.5s infinite;
 }
-@keyframes pulse-8ed83347 {
+@keyframes pulse-2e3312f9 {
 0% {
     opacity: 1;
 }
@@ -10429,21 +10521,21 @@ to {
     opacity: 1;
 }
 }
-.node-info[data-v-8ed83347] {
+.node-info[data-v-2e3312f9] {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }
-.node-title[data-v-8ed83347] {
+.node-title[data-v-2e3312f9] {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: #303133;
+  color: var(--color-text-primary);
 }
-.node-description[data-v-8ed83347] {
+.node-description[data-v-2e3312f9] {
   margin: 0;
   font-size: 14px;
-  color: #606266;
+  color: var(--color-text-secondary);
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -10451,7 +10543,7 @@ to {
   -webkit-box-orient: vertical;
 }
 
-.log-container[data-v-9b3bdb24] {
+.log-container[data-v-4eceb639] {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -10460,7 +10552,7 @@ to {
   font-family: "Consolas", "Monaco", "Courier New", monospace;
   overflow-y: auto;
 }
-.log-header[data-v-9b3bdb24] {
+.log-header[data-v-4eceb639] {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -10471,42 +10563,42 @@ to {
   top: 0;
   z-index: 10; /* Ensures it stays above the logs */
 }
-.log-status[data-v-9b3bdb24] {
+.log-status[data-v-4eceb639] {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 0.9em;
 }
-.status-indicator[data-v-9b3bdb24] {
+.status-indicator[data-v-4eceb639] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #666;
 }
-.status-indicator.active[data-v-9b3bdb24] {
+.status-indicator.active[data-v-4eceb639] {
   background-color: #4caf50;
 }
-.status-indicator.error[data-v-9b3bdb24] {
+.status-indicator.error[data-v-4eceb639] {
   background-color: #f44336;
 }
-.log-controls[data-v-9b3bdb24] {
+.log-controls[data-v-4eceb639] {
   display: flex;
   gap: 8px;
 }
-.error-banner[data-v-9b3bdb24] {
+.error-banner[data-v-4eceb639] {
   padding: 8px 12px;
   background-color: rgba(244, 67, 54, 0.2);
   color: #f44336;
   font-size: 0.9em;
   border-bottom: 1px solid #f44336;
 }
-.empty-state[data-v-9b3bdb24] {
+.empty-state[data-v-4eceb639] {
   padding: 16px;
   text-align: center;
   color: #777;
   font-style: italic;
 }
-.logs[data-v-9b3bdb24] {
+.logs[data-v-4eceb639] {
   flex-grow: 1;
   margin: 0;
   padding: 8px;
@@ -10516,63 +10608,67 @@ to {
   line-height: 1.8; /* Reduced line height */
   font-size: small;
 }
-.logs.auto-scroll[data-v-9b3bdb24] {
+.logs.auto-scroll[data-v-4eceb639] {
   scroll-behavior: smooth;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar {
+[data-v-4eceb639]::-webkit-scrollbar {
   width: 12px;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-track {
+[data-v-4eceb639]::-webkit-scrollbar-track {
   background: #1e1e1e;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-thumb {
+[data-v-4eceb639]::-webkit-scrollbar-thumb {
   background: #424242;
   border-radius: 6px;
   border: 3px solid #1e1e1e;
 }
-[data-v-9b3bdb24]::-webkit-scrollbar-thumb:hover {
+[data-v-4eceb639]::-webkit-scrollbar-thumb:hover {
   background: #4f4f4f;
 }
-.error-line[data-v-9b3bdb24] {
+.error-line[data-v-4eceb639] {
   background-color: rgba(255, 0, 0, 0.2); /* Light red background */
   color: #ffcdd2; /* Light red text for better readability */
 }
 
-.context-menu[data-v-7db4e6fc] {
+.context-menu[data-v-2d0cd6bf] {
   position: fixed;
   min-width: 200px;
-  background-color: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  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-7db4e6fc] {
-  padding: 8px 12px;
-  font-weight: bold;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #e0e0e0;
-  font-size: 14px;
+.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-7db4e6fc] {
+.context-menu-items[data-v-2d0cd6bf] {
   max-height: 300px;
   overflow-y: auto;
 }
-.context-menu-item[data-v-7db4e6fc] {
+.context-menu-item[data-v-2d0cd6bf] {
   display: flex;
   align-items: center;
-  padding: 8px 12px;
+  padding: var(--spacing-2) var(--spacing-3);
   cursor: pointer;
-  transition: background-color 0.2s;
-  font-size: 14px;
+  transition: background-color var(--transition-fast);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
 }
-.context-menu-item[data-v-7db4e6fc]:hover {
-  background-color: #f5f5f5;
+.context-menu-item[data-v-2d0cd6bf]:hover {
+  background-color: var(--color-background-tertiary);
 }
-.context-menu-icon[data-v-7db4e6fc] {
-  margin-right: 8px;
+.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;
@@ -11111,277 +11207,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);
 }