@elevasis/ui 2.34.0 → 2.35.0

package/dist/index.css

@@ -1,649 +1,649 @@
-/* src/graph/Graph.module.css */
-@keyframes edgeFlow {
-  0% {
-    stroke-dashoffset: 24;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes edgeFlowReverse {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: 24;
-  }
-}
-@keyframes pulse {
-  0%, 100% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes livePulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-.livePulse {
-  animation: livePulse 2s ease-in-out infinite;
+/* src/components/display/StatCard.module.css */
+.heroCard {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
 }
-@keyframes glowPulse {
-  0%, 100% {
-    box-shadow: 0 0 5px var(--glow-color, color-mix(in srgb, var(--color-primary) 30%, transparent)), 0 0 15px var(--glow-color, color-mix(in srgb, var(--color-primary) 10%, transparent));
-  }
-  50% {
-    box-shadow: 0 0 10px var(--glow-color, color-mix(in srgb, var(--color-primary) 50%, transparent)), 0 0 20px var(--glow-color, color-mix(in srgb, var(--color-primary) 20%, transparent));
-  }
+.iconRing {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
 }
-@keyframes nodeEnter {
-  0% {
-    opacity: 0;
-    transform: scale(0.8) translateY(10px);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+.iconRingSm {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 12%, transparent);
 }
-@keyframes handlePulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 0 0 0 var(--handle-color, color-mix(in srgb, var(--color-primary) 40%, transparent));
-  }
-  50% {
-    transform: scale(1.2);
-    box-shadow: 0 0 0 4px var(--handle-color, color-mix(in srgb, var(--color-primary) 0%, transparent));
-  }
+.heroValue {
+  font-family: var(--elevasis-font-family-subtitle);
+  font-size: 1.85rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
 }
-@keyframes gridMove {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 40px 40px;
-  }
+[data-mantine-color-scheme=dark] .heroValue {
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
-@keyframes labelFadeIn {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(1);
-  }
+.heroValueSm {
+  font-family: var(--elevasis-font-family-subtitle);
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
 }
-@keyframes scanLine {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
+.heroLabel {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-text-dimmed);
 }
-.graphContainer {
-  position: relative;
-  background-image:
-    linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--color-primary) 5%, transparent) 1px,
-      transparent 1px),
-    radial-gradient(
-      ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 1.25%, transparent) 0%,
-      transparent 70%);
-  background-color: color-mix(in srgb, var(--color-background) 50%, var(--glass-background));
-  backdrop-filter: var(--glass-blur);
-  background-size:
-    40px 40px,
-    40px 40px,
-    100% 100%;
-  animation: gridMove 20s linear infinite;
+.heroLabelSm {
+  font-size: 0.62rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-text-dimmed);
 }
-[data-mantine-color-scheme=dark] .graphContainer {
-  background-image:
-    linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
-    linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
-      transparent 1px),
-    radial-gradient(
-      ellipse at 50% 50%,
-      color-mix(in srgb, var(--color-primary) 2.25%, transparent) 0%,
-      transparent 70%);
-  background-size:
-    40px 40px,
-    40px 40px,
-    100% 100%;
+
+/* src/components/display/ElevasisLoader.module.css */
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  overflow: visible;
 }
-.node {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
+.loader {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
 }
-.node:nth-child(1) {
-  animation-delay: 0.05s;
+.chevron {
+  stroke: var(--loader-color);
+  stroke-width: 2;
+  stroke-linecap: square;
+  stroke-linejoin: miter;
+  fill: none;
+  opacity: 0.15;
+  animation: chevronPulse 2s ease-in-out infinite;
+  filter: drop-shadow(0 0 1.5px var(--loader-color));
 }
-.node:nth-child(2) {
-  animation-delay: 0.1s;
+[data-mantine-color-scheme=light] .chevron {
+  filter: none;
 }
-.node:nth-child(3) {
-  animation-delay: 0.15s;
+.c1 {
+  animation-delay: 0s;
 }
-.node:nth-child(4) {
+.c2 {
   animation-delay: 0.2s;
 }
-.node:nth-child(5) {
-  animation-delay: 0.25s;
+.c3 {
+  animation-delay: 0.4s;
 }
-.node:nth-child(6) {
-  animation-delay: 0.3s;
+@keyframes chevronPulse {
+  0%, 100% {
+    opacity: 0.12;
+    filter: drop-shadow(0 0 1px var(--loader-color));
+  }
+  40%, 60% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px var(--loader-color));
+  }
 }
-.node:nth-child(7) {
-  animation-delay: 0.35s;
+[data-mantine-color-scheme=light] .chevron {
+  animation-name: chevronPulseLight;
 }
-.node:nth-child(8) {
-  animation-delay: 0.4s;
+@keyframes chevronPulseLight {
+  0%, 100% {
+    opacity: 0.2;
+  }
+  40%, 60% {
+    opacity: 1;
+  }
 }
-.node:nth-child(9) {
-  animation-delay: 0.45s;
+
+/* src/theme/custom.css */
+.mantine-Button-root[data-variant=default] {
+  background-color: var(--color-surface);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
 }
-.node:nth-child(10) {
-  animation-delay: 0.5s;
+.mantine-Button-root[data-variant=default]:hover {
+  background-color: var(--color-surface-hover);
 }
-.node:nth-child(11) {
-  animation-delay: 0.55s;
+.lead-gen-build-action-button:disabled,
+.lead-gen-build-action-button[data-disabled] {
+  background-color: var(--surface-primary-muted) !important;
+  border-color: var(--border-primary-subtle) !important;
+  color: color-mix(in srgb, var(--color-text-subtle) 88%, var(--color-text-dimmed) 12%) !important;
+  opacity: 0.78;
 }
-.node:nth-child(12) {
-  animation-delay: 0.6s;
+.lead-gen-build-action-button:disabled:hover,
+.lead-gen-build-action-button[data-disabled]:hover {
+  background-color: var(--surface-primary-muted) !important;
 }
-.nodeCard {
-  position: relative;
-  border-radius: var(--mantine-radius-md);
-  overflow: hidden;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.mantine-Accordion-control:hover {
+  background-color: var(--color-surface-hover);
 }
-.nodeCard::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(
-      135deg,
-      var(--node-color-light, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
-      transparent 50%,
-      var(--node-color-light, color-mix(in srgb, var(--color-primary) 5%, transparent)) 100%);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.3s ease;
+[data-mantine-color-scheme] .mantine-Accordion-root .mantine-Accordion-item {
+  --item-filled-color: var(--color-surface);
+  --item-border-color: var(--color-border);
 }
-.nodeCard::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 30%;
-  background:
-    linear-gradient(
-      180deg,
-      transparent 0%,
-      var(--node-color-glow, color-mix(in srgb, var(--color-primary) 10%, transparent)) 50%,
-      transparent 100%);
-  pointer-events: none;
-  opacity: 0;
+[data-mantine-color-scheme] .mantine-Accordion-root[data-variant=separated] .mantine-Accordion-item[data-active] {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
 }
-.nodeCard:hover::before,
-.nodeCardSelected::before {
-  opacity: 1;
+.mantine-Menu-item:hover:not([data-disabled]) {
+  background-color: var(--color-surface-hover);
 }
-.nodeCard:hover::after,
-.nodeCardSelected::after {
-  animation: scanLine 3s ease-in-out infinite;
+.mantine-Select-option:hover,
+.mantine-MultiSelect-option:hover,
+.mantine-TagsInput-option:hover,
+.mantine-Combobox-option:hover {
+  background-color: var(--surface-primary-muted) !important;
 }
-.nodeCard:hover {
-  transform: translateY(-2px) scale(1.02);
+.mantine-Select-option[data-combobox-selected],
+.mantine-MultiSelect-option[data-combobox-selected],
+.mantine-TagsInput-option[data-combobox-selected],
+.mantine-Combobox-option[data-combobox-selected] {
+  background-color: var(--surface-primary-subtle) !important;
+  color: var(--color-text);
 }
-.nodeCardSelected {
-  transform: translateY(-2px) scale(1.02);
-  animation: glowPulse 2s ease-in-out infinite;
+[data-mantine-color-scheme=dark] .mantine-Tabs-root {
+  --tab-border-color: var(--color-border);
 }
-.nodeAgent {
-  --glow-color: rgba(139, 92, 246, 0.4);
-  --node-color-light: rgba(139, 92, 246, 0.1);
-  --node-color-glow: rgba(139, 92, 246, 0.15);
-  --handle-color: rgba(139, 92, 246, 0.5);
-  --gradient-start: rgba(139, 92, 246, 0.15);
-  --gradient-end: rgba(139, 92, 246, 0.05);
+.mantine-Tabs-tab:hover {
+  background-color: var(--color-surface-hover);
 }
-.nodeWorkflow {
-  --glow-color: rgba(59, 130, 246, 0.4);
-  --node-color-light: rgba(59, 130, 246, 0.1);
-  --node-color-glow: rgba(59, 130, 246, 0.15);
-  --handle-color: rgba(59, 130, 246, 0.5);
-  --gradient-start: rgba(59, 130, 246, 0.15);
-  --gradient-end: rgba(59, 130, 246, 0.05);
+.mantine-Pagination-control:not([data-active]) {
+  background: var(--color-surface);
 }
-.nodeTrigger {
-  --glow-color: rgba(249, 115, 22, 0.4);
-  --node-color-light: rgba(249, 115, 22, 0.1);
-  --node-color-glow: rgba(249, 115, 22, 0.15);
-  --handle-color: rgba(249, 115, 22, 0.5);
-  --gradient-start: rgba(249, 115, 22, 0.15);
-  --gradient-end: rgba(249, 115, 22, 0.05);
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
 }
-.nodeIntegration {
-  --glow-color: rgba(20, 184, 166, 0.4);
-  --node-color-light: rgba(20, 184, 166, 0.1);
-  --node-color-glow: rgba(20, 184, 166, 0.15);
-  --handle-color: rgba(20, 184, 166, 0.5);
-  --gradient-start: rgba(20, 184, 166, 0.15);
-  --gradient-end: rgba(20, 184, 166, 0.05);
+::-webkit-scrollbar-track {
+  background: transparent;
 }
-.nodeExternal {
-  --glow-color: rgba(107, 114, 128, 0.4);
-  --node-color-light: rgba(107, 114, 128, 0.1);
-  --node-color-glow: rgba(107, 114, 128, 0.15);
-  --handle-color: rgba(107, 114, 128, 0.5);
-  --gradient-start: rgba(107, 114, 128, 0.15);
-  --gradient-end: rgba(107, 114, 128, 0.05);
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
+  border-radius: 4px;
 }
-.nodeHuman {
-  --glow-color: rgba(245, 158, 11, 0.4);
-  --node-color-light: rgba(245, 158, 11, 0.1);
-  --node-color-glow: rgba(245, 158, 11, 0.15);
-  --handle-color: rgba(245, 158, 11, 0.5);
-  --gradient-start: rgba(245, 158, 11, 0.15);
-  --gradient-end: rgba(245, 158, 11, 0.05);
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-subtle);
 }
-.nodePrimary {
-  --glow-color: rgba(37, 99, 235, 0.4);
-  --node-color-light: rgba(37, 99, 235, 0.1);
-  --node-color-glow: rgba(37, 99, 235, 0.15);
-  --handle-color: rgba(37, 99, 235, 0.5);
-  --gradient-start: rgba(37, 99, 235, 0.15);
-  --gradient-end: rgba(37, 99, 235, 0.05);
+[data-mantine-color-scheme] .mantine-Checkbox-input:not(:disabled):not(:checked):not([data-indeterminate]) {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
 }
-.handle {
-  transition: all 0.2s ease;
+[data-mantine-color-scheme] .mantine-Checkbox-input:checked,
+[data-mantine-color-scheme] .mantine-Checkbox-input[data-indeterminate] {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
 }
-.handle:hover {
-  animation: handlePulse 1s ease-in-out infinite;
+.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border);
 }
-.nodeIcon {
-  transition: all 0.3s ease;
+.mantine-Timeline-root {
+  --tl-color: var(--color-primary);
 }
-.badge {
-  transition: all 0.2s ease;
-  backdrop-filter: blur(4px);
+.mantine-Timeline-item {
+  --item-border-color: var(--color-border);
 }
-.nodeCard:hover .badge {
-  transform: scale(1.05);
+.mantine-Timeline-itemBullet {
+  border-color: var(--color-border);
 }
-.badgeProd {
-  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
+.mantine-Timeline-itemBullet:where([data-with-child]) {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
 }
-.edge {
-  transition: all 0.3s ease;
+.mantine-Tree-node:focus-visible > [data-value] {
+  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
+  outline-offset: 2px;
 }
-.edgeAnimated {
-  stroke-dasharray: 8 4;
-  animation: edgeFlow 1s linear infinite;
+.mantine-Tree-label[data-hovered] {
+  background-color: var(--color-surface-hover);
+  border-color: var(--color-border);
 }
-.edgeGlow {
-  filter: drop-shadow(0 0 3px var(--edge-color, color-mix(in srgb, var(--color-primary) 50%, transparent)));
+.mantine-Tree-label[data-selected] {
+  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
+  color: var(--color-primary);
 }
-.edgeHighlighted {
-  stroke-width: 3px;
+[data-knowledge-article] pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+  max-width: 100%;
+  padding: var(--mantine-spacing-sm);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--mantine-radius-sm);
 }
-.edgeLabel {
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px var(--label-glow, color-mix(in srgb, var(--color-primary) 20%, transparent));
-  transition: box-shadow 0.2s ease;
+[data-knowledge-article] pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  white-space: inherit;
+  word-break: inherit;
 }
-.edgeLabel:hover {
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 30px var(--label-glow, color-mix(in srgb, var(--color-primary) 30%, transparent));
+.recharts-surface:focus {
+  outline: none;
 }
-.legend {
-  backdrop-filter: var(--glass-blur);
-  background: var(--glass-background);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 40px color-mix(in srgb, var(--color-primary) 10%, transparent);
+.hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
-[data-mantine-color-scheme=dark] .legend {
-  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }
-.legendDot {
-  transition: all 0.2s ease;
-  box-shadow: 0 0 8px currentColor;
+
+/* src/graph/Graph.globals.css */
+.elevasis-graph-root .react-flow__node.selected,
+.elevasis-graph-root .react-flow__node:focus,
+.elevasis-graph-root .react-flow__node:focus-visible {
+  outline: none !important;
 }
-.legendDot:hover {
-  transform: scale(1.3);
-  box-shadow: 0 0 12px currentColor;
+.elevasis-graph-root .react-flow__node.selected > * {
+  box-shadow: none;
 }
-.nodeHighlighted .nodeCard {
-  transform: translateY(-2px) scale(1.02);
+
+/* src/graph/Graph.module.css */
+@keyframes edgeFlow {
+  0% {
+    stroke-dashoffset: 24;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
 }
-.nodeHighlighted .nodeCard::before {
-  opacity: 1;
+@keyframes edgeFlowReverse {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 24;
+  }
 }
-.nodeHighlighted .nodeCard::after {
-  animation: scanLine 3s ease-in-out infinite;
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes livePulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+.livePulse {
+  animation: livePulse 2s ease-in-out infinite;
+}
+@keyframes glowPulse {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--glow-color, color-mix(in srgb, var(--color-primary) 30%, transparent)), 0 0 15px var(--glow-color, color-mix(in srgb, var(--color-primary) 10%, transparent));
+  }
+  50% {
+    box-shadow: 0 0 10px var(--glow-color, color-mix(in srgb, var(--color-primary) 50%, transparent)), 0 0 20px var(--glow-color, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  }
 }
-.nodeDimmed {
-  opacity: 0.3;
-  filter: grayscale(0.5);
-  transition: all 0.3s ease;
+@keyframes nodeEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
-.edgeHighlighted {
-  stroke-width: 4px !important;
+@keyframes handlePulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--handle-color, color-mix(in srgb, var(--color-primary) 40%, transparent));
+  }
+  50% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px var(--handle-color, color-mix(in srgb, var(--color-primary) 0%, transparent));
+  }
 }
-.edgeDimmed {
-  opacity: 0.15;
-  transition: all 0.3s ease;
+@keyframes gridMove {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 40px 40px;
+  }
 }
-.edgeLabelDimmed {
-  opacity: 0.15;
-  transition: opacity 0.3s ease;
+@keyframes labelFadeIn {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(1);
+  }
 }
-@media (prefers-reduced-motion: reduce) {
-  .node,
-  .nodeCard::after,
-  .edgeAnimated,
-  .nodeIcon,
-  .handle:hover,
-  .graphContainer {
-    animation: none;
+@keyframes scanLine {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
   }
-  .nodeCard:hover {
-    transform: none;
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
   }
 }
-
-/* src/components/display/StatCard.module.css */
-.heroCard {
-  background: var(--glass-background);
+.graphContainer {
+  position: relative;
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 5%, transparent) 1px,
+      transparent 1px),
+    radial-gradient(
+      ellipse at 50% 50%,
+      color-mix(in srgb, var(--color-primary) 1.25%, transparent) 0%,
+      transparent 70%);
+  background-color: color-mix(in srgb, var(--color-background) 50%, var(--glass-background));
   backdrop-filter: var(--glass-blur);
-  border: 1px solid var(--color-border);
+  background-size:
+    40px 40px,
+    40px 40px,
+    100% 100%;
+  animation: gridMove 20s linear infinite;
 }
-.iconRing {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
-  color: var(--color-primary);
-  flex-shrink: 0;
-  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
+[data-mantine-color-scheme=dark] .graphContainer {
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
+      transparent 1px),
+    radial-gradient(
+      ellipse at 50% 50%,
+      color-mix(in srgb, var(--color-primary) 2.25%, transparent) 0%,
+      transparent 70%);
+  background-size:
+    40px 40px,
+    40px 40px,
+    100% 100%;
 }
-.iconRingSm {
+.node {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
-  color: var(--color-primary);
-  flex-shrink: 0;
-  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 12%, transparent);
 }
-.heroValue {
-  font-family: var(--elevasis-font-family-subtitle);
-  font-size: 1.85rem;
-  font-weight: 800;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
+.node:nth-child(1) {
+  animation-delay: 0.05s;
 }
-[data-mantine-color-scheme=dark] .heroValue {
-  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 20%, transparent);
+.node:nth-child(2) {
+  animation-delay: 0.1s;
 }
-.heroValueSm {
-  font-family: var(--elevasis-font-family-subtitle);
-  font-size: 1.35rem;
-  font-weight: 700;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  font-variant-numeric: tabular-nums;
+.node:nth-child(3) {
+  animation-delay: 0.15s;
 }
-.heroLabel {
-  font-size: 0.68rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--color-text-dimmed);
+.node:nth-child(4) {
+  animation-delay: 0.2s;
 }
-.heroLabelSm {
-  font-size: 0.62rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  color: var(--color-text-dimmed);
+.node:nth-child(5) {
+  animation-delay: 0.25s;
 }
-
-/* src/components/display/ElevasisLoader.module.css */
-.wrapper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--loader-size);
-  height: var(--loader-size);
-  overflow: visible;
+.node:nth-child(6) {
+  animation-delay: 0.3s;
 }
-.loader {
-  width: 100%;
-  height: 100%;
-  display: block;
-  overflow: visible;
+.node:nth-child(7) {
+  animation-delay: 0.35s;
 }
-.chevron {
-  stroke: var(--loader-color);
-  stroke-width: 2;
-  stroke-linecap: square;
-  stroke-linejoin: miter;
-  fill: none;
-  opacity: 0.15;
-  animation: chevronPulse 2s ease-in-out infinite;
-  filter: drop-shadow(0 0 1.5px var(--loader-color));
+.node:nth-child(8) {
+  animation-delay: 0.4s;
 }
-[data-mantine-color-scheme=light] .chevron {
-  filter: none;
+.node:nth-child(9) {
+  animation-delay: 0.45s;
 }
-.c1 {
-  animation-delay: 0s;
+.node:nth-child(10) {
+  animation-delay: 0.5s;
 }
-.c2 {
-  animation-delay: 0.2s;
+.node:nth-child(11) {
+  animation-delay: 0.55s;
 }
-.c3 {
-  animation-delay: 0.4s;
+.node:nth-child(12) {
+  animation-delay: 0.6s;
 }
-@keyframes chevronPulse {
-  0%, 100% {
-    opacity: 0.12;
-    filter: drop-shadow(0 0 1px var(--loader-color));
-  }
-  40%, 60% {
-    opacity: 1;
-    filter: drop-shadow(0 0 3px var(--loader-color));
-  }
+.nodeCard {
+  position: relative;
+  border-radius: var(--mantine-radius-md);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-[data-mantine-color-scheme=light] .chevron {
-  animation-name: chevronPulseLight;
+.nodeCard::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      135deg,
+      var(--node-color-light, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
+      transparent 50%,
+      var(--node-color-light, color-mix(in srgb, var(--color-primary) 5%, transparent)) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.nodeCard::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background:
+    linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--node-color-glow, color-mix(in srgb, var(--color-primary) 10%, transparent)) 50%,
+      transparent 100%);
+  pointer-events: none;
+  opacity: 0;
 }
-@keyframes chevronPulseLight {
-  0%, 100% {
-    opacity: 0.2;
-  }
-  40%, 60% {
-    opacity: 1;
-  }
+.nodeCard:hover::before,
+.nodeCardSelected::before {
+  opacity: 1;
 }
-
-/* src/graph/Graph.globals.css */
-.elevasis-graph-root .react-flow__node.selected,
-.elevasis-graph-root .react-flow__node:focus,
-.elevasis-graph-root .react-flow__node:focus-visible {
-  outline: none !important;
+.nodeCard:hover::after,
+.nodeCardSelected::after {
+  animation: scanLine 3s ease-in-out infinite;
 }
-.elevasis-graph-root .react-flow__node.selected > * {
-  box-shadow: none;
+.nodeCard:hover {
+  transform: translateY(-2px) scale(1.02);
 }
-
-/* src/theme/custom.css */
-.mantine-Button-root[data-variant=default] {
-  background-color: var(--color-surface);
-  backdrop-filter: var(--glass-blur);
-  -webkit-backdrop-filter: var(--glass-blur);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
+.nodeCardSelected {
+  transform: translateY(-2px) scale(1.02);
+  animation: glowPulse 2s ease-in-out infinite;
 }
-.mantine-Button-root[data-variant=default]:hover {
-  background-color: var(--color-surface-hover);
+.nodeAgent {
+  --glow-color: rgba(139, 92, 246, 0.4);
+  --node-color-light: rgba(139, 92, 246, 0.1);
+  --node-color-glow: rgba(139, 92, 246, 0.15);
+  --handle-color: rgba(139, 92, 246, 0.5);
+  --gradient-start: rgba(139, 92, 246, 0.15);
+  --gradient-end: rgba(139, 92, 246, 0.05);
 }
-.lead-gen-build-action-button:disabled,
-.lead-gen-build-action-button[data-disabled] {
-  background-color: var(--surface-primary-muted) !important;
-  border-color: var(--border-primary-subtle) !important;
-  color: color-mix(in srgb, var(--color-text-subtle) 88%, var(--color-text-dimmed) 12%) !important;
-  opacity: 0.78;
+.nodeWorkflow {
+  --glow-color: rgba(59, 130, 246, 0.4);
+  --node-color-light: rgba(59, 130, 246, 0.1);
+  --node-color-glow: rgba(59, 130, 246, 0.15);
+  --handle-color: rgba(59, 130, 246, 0.5);
+  --gradient-start: rgba(59, 130, 246, 0.15);
+  --gradient-end: rgba(59, 130, 246, 0.05);
 }
-.lead-gen-build-action-button:disabled:hover,
-.lead-gen-build-action-button[data-disabled]:hover {
-  background-color: var(--surface-primary-muted) !important;
+.nodeTrigger {
+  --glow-color: rgba(249, 115, 22, 0.4);
+  --node-color-light: rgba(249, 115, 22, 0.1);
+  --node-color-glow: rgba(249, 115, 22, 0.15);
+  --handle-color: rgba(249, 115, 22, 0.5);
+  --gradient-start: rgba(249, 115, 22, 0.15);
+  --gradient-end: rgba(249, 115, 22, 0.05);
 }
-.mantine-Accordion-control:hover {
-  background-color: var(--color-surface-hover);
+.nodeIntegration {
+  --glow-color: rgba(20, 184, 166, 0.4);
+  --node-color-light: rgba(20, 184, 166, 0.1);
+  --node-color-glow: rgba(20, 184, 166, 0.15);
+  --handle-color: rgba(20, 184, 166, 0.5);
+  --gradient-start: rgba(20, 184, 166, 0.15);
+  --gradient-end: rgba(20, 184, 166, 0.05);
 }
-[data-mantine-color-scheme] .mantine-Accordion-root .mantine-Accordion-item {
-  --item-filled-color: var(--color-surface);
-  --item-border-color: var(--color-border);
+.nodeExternal {
+  --glow-color: rgba(107, 114, 128, 0.4);
+  --node-color-light: rgba(107, 114, 128, 0.1);
+  --node-color-glow: rgba(107, 114, 128, 0.15);
+  --handle-color: rgba(107, 114, 128, 0.5);
+  --gradient-start: rgba(107, 114, 128, 0.15);
+  --gradient-end: rgba(107, 114, 128, 0.05);
 }
-[data-mantine-color-scheme] .mantine-Accordion-root[data-variant=separated] .mantine-Accordion-item[data-active] {
-  background-color: var(--color-surface);
-  border-color: var(--color-border);
+.nodeHuman {
+  --glow-color: rgba(245, 158, 11, 0.4);
+  --node-color-light: rgba(245, 158, 11, 0.1);
+  --node-color-glow: rgba(245, 158, 11, 0.15);
+  --handle-color: rgba(245, 158, 11, 0.5);
+  --gradient-start: rgba(245, 158, 11, 0.15);
+  --gradient-end: rgba(245, 158, 11, 0.05);
 }
-.mantine-Menu-item:hover:not([data-disabled]) {
-  background-color: var(--color-surface-hover);
+.nodePrimary {
+  --glow-color: rgba(37, 99, 235, 0.4);
+  --node-color-light: rgba(37, 99, 235, 0.1);
+  --node-color-glow: rgba(37, 99, 235, 0.15);
+  --handle-color: rgba(37, 99, 235, 0.5);
+  --gradient-start: rgba(37, 99, 235, 0.15);
+  --gradient-end: rgba(37, 99, 235, 0.05);
 }
-.mantine-Select-option:hover,
-.mantine-MultiSelect-option:hover,
-.mantine-TagsInput-option:hover,
-.mantine-Combobox-option:hover {
-  background-color: var(--surface-primary-muted) !important;
+.handle {
+  transition: all 0.2s ease;
 }
-.mantine-Select-option[data-combobox-selected],
-.mantine-MultiSelect-option[data-combobox-selected],
-.mantine-TagsInput-option[data-combobox-selected],
-.mantine-Combobox-option[data-combobox-selected] {
-  background-color: var(--surface-primary-subtle) !important;
-  color: var(--color-text);
+.handle:hover {
+  animation: handlePulse 1s ease-in-out infinite;
 }
-[data-mantine-color-scheme=dark] .mantine-Tabs-root {
-  --tab-border-color: var(--color-border);
+.nodeIcon {
+  transition: all 0.3s ease;
 }
-.mantine-Tabs-tab:hover {
-  background-color: var(--color-surface-hover);
+.badge {
+  transition: all 0.2s ease;
+  backdrop-filter: blur(4px);
 }
-.mantine-Pagination-control:not([data-active]) {
-  background: var(--color-surface);
+.nodeCard:hover .badge {
+  transform: scale(1.05);
 }
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+.badgeProd {
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
 }
-::-webkit-scrollbar-track {
-  background: transparent;
+.edge {
+  transition: all 0.3s ease;
 }
-::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border));
-  border-radius: 4px;
+.edgeAnimated {
+  stroke-dasharray: 8 4;
+  animation: edgeFlow 1s linear infinite;
 }
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-subtle);
+.edgeGlow {
+  filter: drop-shadow(0 0 3px var(--edge-color, color-mix(in srgb, var(--color-primary) 50%, transparent)));
 }
-[data-mantine-color-scheme] .mantine-Checkbox-input:not(:disabled):not(:checked):not([data-indeterminate]) {
-  background-color: var(--color-surface);
-  border-color: var(--color-border);
+.edgeHighlighted {
+  stroke-width: 3px;
 }
-[data-mantine-color-scheme] .mantine-Checkbox-input:checked,
-[data-mantine-color-scheme] .mantine-Checkbox-input[data-indeterminate] {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+.edgeLabel {
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px var(--label-glow, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  transition: box-shadow 0.2s ease;
 }
-.mantine-Switch-root:has(input:not(:checked)) .mantine-Switch-track {
-  background-color: var(--color-surface-hover);
-  border-color: var(--color-border);
+.edgeLabel:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 30px var(--label-glow, color-mix(in srgb, var(--color-primary) 30%, transparent));
 }
-.mantine-Timeline-root {
-  --tl-color: var(--color-primary);
+.legend {
+  backdrop-filter: var(--glass-blur);
+  background: var(--glass-background);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 40px color-mix(in srgb, var(--color-primary) 10%, transparent);
 }
-.mantine-Timeline-item {
-  --item-border-color: var(--color-border);
+[data-mantine-color-scheme=dark] .legend {
+  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
 }
-.mantine-Timeline-itemBullet {
-  border-color: var(--color-border);
+.legendDot {
+  transition: all 0.2s ease;
+  box-shadow: 0 0 8px currentColor;
 }
-.mantine-Timeline-itemBullet:where([data-with-child]) {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+.legendDot:hover {
+  transform: scale(1.3);
+  box-shadow: 0 0 12px currentColor;
 }
-.mantine-Tree-node:focus-visible > [data-value] {
-  outline: 2px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
-  outline-offset: 2px;
+.nodeHighlighted .nodeCard {
+  transform: translateY(-2px) scale(1.02);
 }
-.mantine-Tree-label[data-hovered] {
-  background-color: var(--color-surface-hover);
-  border-color: var(--color-border);
+.nodeHighlighted .nodeCard::before {
+  opacity: 1;
 }
-.mantine-Tree-label[data-selected] {
-  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
-  color: var(--color-primary);
+.nodeHighlighted .nodeCard::after {
+  animation: scanLine 3s ease-in-out infinite;
 }
-[data-knowledge-article] pre {
-  white-space: pre-wrap;
-  word-break: break-word;
-  overflow-x: auto;
-  max-width: 100%;
-  padding: var(--mantine-spacing-sm);
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--mantine-radius-sm);
+.nodeDimmed {
+  opacity: 0.3;
+  filter: grayscale(0.5);
+  transition: all 0.3s ease;
 }
-[data-knowledge-article] pre code {
-  background: transparent;
-  border: none;
-  padding: 0;
-  white-space: inherit;
-  word-break: inherit;
+.edgeHighlighted {
+  stroke-width: 4px !important;
 }
-.recharts-surface:focus {
-  outline: none;
+.edgeDimmed {
+  opacity: 0.15;
+  transition: all 0.3s ease;
 }
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.edgeLabelDimmed {
+  opacity: 0.15;
+  transition: opacity 0.3s ease;
 }
-.hide-scrollbar::-webkit-scrollbar {
-  display: none;
+@media (prefers-reduced-motion: reduce) {
+  .node,
+  .nodeCard::after,
+  .edgeAnimated,
+  .nodeIcon,
+  .handle:hover,
+  .graphContainer {
+    animation: none;
+  }
+  .nodeCard:hover {
+    transform: none;
+  }
 }