@geenius/ai-workflow 0.1.0 → 0.4.0

package/packages/react-css/{src/styles.css → dist/index.css}

@@ -1,39 +1,83 @@
-/* @geenius-ai-workflow — styles.css
- * Unified BEM stylesheet for all CSS variant packages.
- * Uses OKLCH color tokens consistent with the Geenius design system.
- */
-
-/* ========================================
-   Color Tokens (OKLCH)
-   ======================================== */
+/* src/styles.css */
 :root {
-  --ai-workflow-bg: oklch(0.10 0.01 250);
-  --ai-workflow-surface: oklch(0.13 0.01 250);
-  --ai-workflow-surface-2: oklch(0.16 0.01 250);
-  --ai-workflow-border: oklch(0.22 0.01 250);
-  --ai-workflow-text: oklch(0.95 0.01 250);
-  --ai-workflow-text-muted: oklch(0.65 0.01 250);
-  --ai-workflow-accent: oklch(0.65 0.22 265);
-  --ai-workflow-running: oklch(0.65 0.20 265);
-  --ai-workflow-success: oklch(0.72 0.20 145);
-  --ai-workflow-error: oklch(0.60 0.25 25);
-  --ai-workflow-pending: oklch(0.65 0.15 200);
-  --ai-workflow-skipped: oklch(0.45 0.01 250);
-  --ai-workflow-connector: oklch(0.35 0.02 250);
-  --ai-workflow-radius: 0.75rem;
-  --ai-workflow-radius-sm: 0.5rem;
-  --ai-workflow-radius-lg: 1rem;
-  --ai-workflow-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
-  --ai-workflow-shadow-sm: 0 2px 8px oklch(0 0 0 / 0.2);
-  --ai-workflow-shadow-lg: 0 16px 48px oklch(0 0 0 / 0.5);
-  --ai-workflow-transition: 200ms ease;
+  --gui-bg: oklch(0.985 0.003 255);
+  --gui-foreground: oklch(0.278 0.03 257);
+  --gui-primary: oklch(0.63 0.2 262);
+  --gui-primary-fg: oklch(0.985 0.002 255);
+  --gui-primary-subtle: color-mix(in oklab, var(--gui-primary) 12%, white);
+  --gui-success: oklch(0.72 0.17 152);
+  --gui-warning: oklch(0.82 0.16 84);
+  --gui-danger: oklch(0.63 0.24 28);
+  --gui-border: oklch(0.9 0.008 255);
+  --gui-card: oklch(0.998 0.001 255);
+  --gui-card-fg: var(--gui-foreground);
+  --gui-muted-fg: oklch(0.56 0.018 255);
+  --gui-surface: oklch(0.968 0.004 255);
+  --gui-ring: color-mix(in oklab, var(--gui-primary) 35%, transparent);
+  --background: var(--gui-bg);
+  --foreground: var(--gui-foreground);
+  --primary: var(--gui-primary);
+  --primary-foreground: var(--gui-primary-fg);
+  --primary-soft: var(--gui-primary-subtle);
+  --success: var(--gui-success);
+  --warning: var(--gui-warning);
+  --danger: var(--gui-danger);
+  --border: var(--gui-border);
+  --card: var(--gui-card);
+  --card-foreground: var(--gui-card-fg);
+  --muted-foreground: var(--gui-muted-fg);
+  --secondary: var(--gui-surface);
+  --ring: var(--gui-ring);
+  --shadow-color: color-mix(in oklab, var(--foreground) 20%, transparent);
+  --shadow-color-sm: color-mix(in oklab, var(--foreground) 10%, transparent);
+  --shadow-color-lg: color-mix(in oklab, var(--foreground) 40%, transparent);
+  --primary-ring: color-mix(in oklab, var(--primary) 20%, transparent);
+  --primary-ring-strong: color-mix(in oklab, var(--primary) 55%, transparent);
+  --primary-glow: color-mix(in oklab, var(--primary) 40%, transparent);
+  --warning-soft: color-mix(in oklab, var(--warning) 10%, transparent);
+  --danger-soft: color-mix(in oklab, var(--danger) 10%, transparent);
+  --success-soft: color-mix(in oklab, var(--success) 10%, transparent);
+  --ai-workflow-bg: var(--background);
+  --ai-workflow-surface: var(--card);
+  --ai-workflow-surface-2: var(--secondary);
+  --ai-workflow-border: var(--border);
+  --ai-workflow-text: var(--foreground);
+  --ai-workflow-text-muted: var(--muted-foreground);
+  --ai-workflow-accent: var(--primary);
+  --ai-workflow-running: var(--primary);
+  --ai-workflow-success: var(--success);
+  --ai-workflow-error: var(--danger);
+  --ai-workflow-pending: var(--warning);
+  --ai-workflow-skipped: var(--muted-foreground);
+  --ai-workflow-connector: var(--border);
+  --ai-workflow-radius: 1.5rem;
+  --ai-workflow-radius-sm: 0.75rem;
+  --ai-workflow-radius-lg: 2rem;
+  --ai-workflow-shadow: 0 8px 32px var(--shadow-color);
+  --ai-workflow-shadow-sm: 0 4px 16px var(--shadow-color-sm);
+  --ai-workflow-shadow-lg: 0 16px 48px var(--shadow-color-lg);
+  --ai-workflow-glow: 0 0 24px var(--primary-glow);
+  --ai-workflow-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --ai-workflow-transition-fast: 100ms ease;
-  --ai-workflow-transition-slow: 300ms ease;
+  --ai-workflow-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+[data-theme=dark],
+.dark {
+  --gui-bg: oklch(0.19 0.01 255);
+  --gui-foreground: oklch(0.94 0.01 255);
+  --gui-primary: oklch(0.71 0.18 262);
+  --gui-primary-fg: oklch(0.22 0.02 255);
+  --gui-primary-subtle: color-mix(in oklab, var(--gui-primary) 16%, black);
+  --gui-success: oklch(0.78 0.16 152);
+  --gui-warning: oklch(0.86 0.15 84);
+  --gui-danger: oklch(0.71 0.2 28);
+  --gui-border: oklch(0.34 0.015 255);
+  --gui-card: oklch(0.23 0.01 255);
+  --gui-card-fg: var(--gui-foreground);
+  --gui-muted-fg: oklch(0.72 0.014 255);
+  --gui-surface: oklch(0.27 0.01 255);
+  --gui-ring: color-mix(in oklab, var(--gui-primary) 45%, transparent);
 }
-
-/* ========================================
-   BLOCK: ai-workflow__canvas
-   ======================================== */
 .ai-workflow__canvas {
   position: relative;
   min-height: 500px;
@@ -42,8 +86,9 @@
   overflow: hidden;
   border: 1px solid var(--ai-workflow-border);
   box-shadow: var(--ai-workflow-shadow-sm);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
 }
-
 .ai-workflow__canvas--empty {
   display: flex;
   flex-direction: column;
@@ -52,26 +97,23 @@
   height: 100%;
   color: var(--ai-workflow-text-muted);
 }
-
 .ai-workflow__canvas-bg {
   position: absolute;
   inset: 0;
   background-image:
     linear-gradient(var(--ai-workflow-border) 1px, transparent 1px),
-    linear-gradient(90deg, var(--ai-workflow-border) 1px, transparent 1px);
+    linear-gradient(
+      90deg,
+      var(--ai-workflow-border) 1px,
+      transparent 1px);
   background-size: 20px 20px;
   pointer-events: none;
 }
-
 .ai-workflow__canvas-grid {
   position: relative;
   z-index: 1;
   height: 100%;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__step-node
-   ======================================== */
 .ai-workflow__step-node {
   position: relative;
   background: var(--ai-workflow-surface-2);
@@ -83,62 +125,51 @@
   transition: all var(--ai-workflow-transition);
   box-shadow: var(--ai-workflow-shadow-sm);
 }
-
 .ai-workflow__step-node:hover {
   border-color: var(--ai-workflow-accent);
   background: var(--ai-workflow-surface-2);
 }
-
 .ai-workflow__step-node--selected {
   border-color: var(--ai-workflow-accent);
-  background: oklch(0.65 0.22 265 / 0.1);
-  box-shadow: 0 0 0 3px oklch(0.65 0.22 265 / 0.2), var(--ai-workflow-glow);
+  background: var(--primary-soft);
+  box-shadow: 0 0 0 3px var(--primary-ring), var(--ai-workflow-glow);
 }
-
 .ai-workflow__step-node--pending {
   border-color: var(--ai-workflow-pending);
 }
-
 .ai-workflow__step-node--running {
   border-color: var(--ai-workflow-running);
   animation: ai-workflow-pulse-running 1.5s ease-in-out infinite;
 }
-
 .ai-workflow__step-node--success {
   border-color: var(--ai-workflow-success);
 }
-
 .ai-workflow__step-node--error {
   border-color: var(--ai-workflow-error);
-  background: oklch(0.25 0.05 25 / 0.1);
+  background: var(--danger-soft);
 }
-
 .ai-workflow__step-node--skipped {
   border-color: var(--ai-workflow-skipped);
   opacity: 0.7;
 }
-
 @keyframes ai-workflow-pulse-running {
   0%, 100% {
-    box-shadow: 0 0 0 0 oklch(0.65 0.20 265 / 0.5), var(--ai-workflow-shadow-sm);
+    box-shadow: 0 0 0 0 var(--primary-ring-strong), var(--ai-workflow-shadow-sm);
   }
   50% {
-    box-shadow: 0 0 0 8px oklch(0.65 0.20 265 / 0), var(--ai-workflow-shadow-sm);
+    box-shadow: 0 0 0 8px transparent, var(--ai-workflow-shadow-sm);
   }
 }
-
 .ai-workflow__step-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 .ai-workflow__step-icon {
   font-size: 1.25rem;
   flex-shrink: 0;
 }
-
 .ai-workflow__step-name {
   font-weight: 600;
   color: var(--ai-workflow-text);
@@ -147,7 +178,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .ai-workflow__step-type-badge {
   font-size: 0.7rem;
   color: var(--ai-workflow-text-muted);
@@ -157,7 +187,6 @@
   padding: 0.2rem 0.4rem;
   border-radius: 2px;
 }
-
 .ai-workflow__step-optional-badge,
 .ai-workflow__step-retry-badge {
   display: inline-block;
@@ -168,7 +197,6 @@
   color: var(--ai-workflow-text-muted);
   font-weight: 500;
 }
-
 .ai-workflow__step-status {
   display: flex;
   align-items: center;
@@ -178,33 +206,24 @@
   border-radius: 50%;
   font-size: 0.8rem;
 }
-
 .ai-workflow__step-status--pending {
   background: var(--ai-workflow-pending);
 }
-
 .ai-workflow__step-status--running {
   background: var(--ai-workflow-running);
   animation: ai-workflow-spin 1s linear infinite;
 }
-
 .ai-workflow__step-status--success {
   background: var(--ai-workflow-success);
 }
-
 .ai-workflow__step-status--error {
   background: var(--ai-workflow-error);
 }
-
 @keyframes ai-workflow-spin {
   to {
     transform: rotate(360deg);
   }
 }
-
-/* ========================================
-   BLOCK: ai-workflow__connector
-   ======================================== */
 .ai-workflow__connector {
   position: absolute;
   pointer-events: none;
@@ -212,20 +231,16 @@
   stroke-width: 2px;
   fill: none;
 }
-
 .ai-workflow__connector--running {
   stroke: var(--ai-workflow-running);
   animation: ai-workflow-flow 2s ease-in-out infinite;
 }
-
 .ai-workflow__connector--error {
   stroke: var(--ai-workflow-error);
 }
-
 .ai-workflow__connector--success {
   stroke: var(--ai-workflow-success);
 }
-
 @keyframes ai-workflow-flow {
   0%, 100% {
     opacity: 0.5;
@@ -234,10 +249,6 @@
     opacity: 1;
   }
 }
-
-/* ========================================
-   BLOCK: ai-workflow__step-detail-panel
-   ======================================== */
 .ai-workflow__step-detail-panel {
   background: var(--ai-workflow-surface-2);
   border-left: 1px solid var(--ai-workflow-border);
@@ -249,7 +260,6 @@
   flex-direction: column;
   gap: 1.5rem;
 }
-
 .ai-workflow__detail-header {
   display: flex;
   justify-content: space-between;
@@ -258,14 +268,12 @@
   border-bottom: 1px solid var(--ai-workflow-border);
   padding-bottom: 1rem;
 }
-
 .ai-workflow__detail-title {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--ai-workflow-text);
   margin: 0;
 }
-
 .ai-workflow__detail-close {
   background: transparent;
   border: none;
@@ -275,17 +283,14 @@
   padding: 0;
   transition: color var(--ai-workflow-transition);
 }
-
 .ai-workflow__detail-close:hover {
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__detail-section {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
-
 .ai-workflow__detail-label {
   font-size: 0.8rem;
   font-weight: 600;
@@ -293,38 +298,30 @@
   letter-spacing: 0.05em;
   color: var(--ai-workflow-text-muted);
 }
-
 .ai-workflow__detail-value {
   font-size: 0.9rem;
   color: var(--ai-workflow-text);
   word-break: break-word;
 }
-
 .ai-workflow__detail-code {
   background: var(--ai-workflow-surface);
   padding: 0.75rem;
   border-radius: var(--ai-workflow-radius-sm);
   border: 1px solid var(--ai-workflow-border);
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   font-size: 0.8rem;
   color: var(--ai-workflow-accent);
   overflow-x: auto;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__run-history-table
-   ======================================== */
 .ai-workflow__run-history-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--ai-workflow-surface);
 }
-
 .ai-workflow__history-header {
   background: var(--ai-workflow-surface-2);
   border-bottom: 2px solid var(--ai-workflow-border);
 }
-
 .ai-workflow__history-th {
   padding: 1rem;
   text-align: left;
@@ -334,22 +331,18 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
-
 .ai-workflow__history-row {
   border-bottom: 1px solid var(--ai-workflow-border);
   transition: background var(--ai-workflow-transition);
 }
-
 .ai-workflow__history-row:hover {
   background: var(--ai-workflow-surface-2);
 }
-
 .ai-workflow__history-td {
   padding: 1rem;
   font-size: 0.9rem;
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__history-status-badge {
   display: inline-flex;
   align-items: center;
@@ -359,35 +352,26 @@
   font-size: 0.8rem;
   font-weight: 600;
 }
-
 .ai-workflow__history-status-badge--pending {
   background: var(--ai-workflow-pending);
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__history-status-badge--running {
   background: var(--ai-workflow-running);
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__history-status-badge--success {
   background: var(--ai-workflow-success);
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__history-status-badge--error {
   background: var(--ai-workflow-error);
   color: white;
 }
-
 .ai-workflow__history-time {
   font-size: 0.8rem;
   color: var(--ai-workflow-text-muted);
 }
-
-/* ========================================
-   BLOCK: ai-workflow__trigger-selector
-   ======================================== */
 .ai-workflow__trigger-selector {
   display: flex;
   flex-direction: column;
@@ -397,13 +381,11 @@
   border: 1px solid var(--ai-workflow-border);
   border-radius: var(--ai-workflow-radius-sm);
 }
-
 .ai-workflow__trigger-title {
   font-weight: 600;
   color: var(--ai-workflow-text);
   font-size: 0.9rem;
 }
-
 .ai-workflow__trigger-option {
   padding: 0.75rem;
   background: var(--ai-workflow-surface-2);
@@ -415,16 +397,13 @@
   align-items: center;
   gap: 0.5rem;
 }
-
 .ai-workflow__trigger-option:hover {
   border-color: var(--ai-workflow-accent);
 }
-
 .ai-workflow__trigger-option--selected {
   border-color: var(--ai-workflow-accent);
-  background: oklch(0.65 0.22 265 / 0.1);
+  background: var(--primary-soft);
 }
-
 .ai-workflow__trigger-radio {
   width: 1rem;
   height: 1rem;
@@ -435,64 +414,48 @@
   justify-content: center;
   transition: all var(--ai-workflow-transition);
 }
-
 .ai-workflow__trigger-option--selected .ai-workflow__trigger-radio {
   border-color: var(--ai-workflow-accent);
   background: var(--ai-workflow-accent);
 }
-
 .ai-workflow__trigger-label {
   flex: 1;
   color: var(--ai-workflow-text);
   font-size: 0.9rem;
   font-weight: 500;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__execution-log
-   ======================================== */
 .ai-workflow__execution-log {
   background: var(--ai-workflow-surface);
   border: 1px solid var(--ai-workflow-border);
   border-radius: var(--ai-workflow-radius-sm);
   padding: 1rem;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   font-size: 0.8rem;
   max-height: 400px;
   overflow-y: auto;
 }
-
 .ai-workflow__log-line {
   margin: 0.5rem 0;
   color: var(--ai-workflow-text-muted);
   white-space: pre-wrap;
   word-wrap: break-word;
 }
-
 .ai-workflow__log-line--info {
   color: var(--ai-workflow-accent);
 }
-
 .ai-workflow__log-line--success {
   color: var(--ai-workflow-success);
 }
-
 .ai-workflow__log-line--error {
   color: var(--ai-workflow-error);
 }
-
 .ai-workflow__log-line--warning {
-  color: oklch(0.75 0.18 70);
+  color: var(--warning);
 }
-
 .ai-workflow__log-timestamp {
   color: var(--ai-workflow-border);
   margin-right: 0.5rem;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__progress-tracker
-   ======================================== */
 .ai-workflow__progress-tracker {
   display: flex;
   align-items: center;
@@ -502,7 +465,6 @@
   border: 1px solid var(--ai-workflow-border);
   border-radius: var(--ai-workflow-radius-sm);
 }
-
 .ai-workflow__progress-bar {
   flex: 1;
   height: 0.5rem;
@@ -510,25 +472,25 @@
   border-radius: 999px;
   overflow: hidden;
 }
-
 .ai-workflow__progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, var(--ai-workflow-accent), var(--ai-workflow-running));
+  background:
+    linear-gradient(
+      90deg,
+      var(--ai-workflow-accent),
+      var(--ai-workflow-running));
   border-radius: 999px;
   animation: ai-workflow-progress 2s ease-in-out;
 }
-
 .ai-workflow__progress-fill--complete {
   background: var(--ai-workflow-success);
   animation: none;
 }
-
 @keyframes ai-workflow-progress {
   0% {
     width: 0%;
   }
 }
-
 .ai-workflow__progress-text {
   font-size: 0.85rem;
   color: var(--ai-workflow-text);
@@ -536,10 +498,6 @@
   min-width: 60px;
   text-align: right;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__step-list
-   ======================================== */
 .ai-workflow__step-list {
   list-style: none;
   padding: 0;
@@ -548,7 +506,6 @@
   flex-direction: column;
   gap: 0.5rem;
 }
-
 .ai-workflow__step-list-item {
   padding: 0.75rem 1rem;
   background: var(--ai-workflow-surface);
@@ -560,17 +517,14 @@
   transition: all var(--ai-workflow-transition);
   cursor: pointer;
 }
-
 .ai-workflow__step-list-item:hover {
   background: var(--ai-workflow-surface-2);
   border-color: var(--ai-workflow-accent);
 }
-
 .ai-workflow__step-list-item--selected {
   border-color: var(--ai-workflow-accent);
-  background: oklch(0.65 0.22 265 / 0.1);
+  background: var(--primary-soft);
 }
-
 .ai-workflow__step-list-number {
   display: flex;
   align-items: center;
@@ -584,25 +538,18 @@
   color: var(--ai-workflow-text);
   flex-shrink: 0;
 }
-
 .ai-workflow__step-list-item--success .ai-workflow__step-list-number {
   background: var(--ai-workflow-success);
 }
-
 .ai-workflow__step-list-item--error .ai-workflow__step-list-number {
   background: var(--ai-workflow-error);
 }
-
 .ai-workflow__step-list-label {
   flex: 1;
   font-size: 0.9rem;
   color: var(--ai-workflow-text);
   font-weight: 500;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__variable-editor
-   ======================================== */
 .ai-workflow__variable-editor {
   background: var(--ai-workflow-surface);
   border: 1px solid var(--ai-workflow-border);
@@ -612,18 +559,15 @@
   flex-direction: column;
   gap: 1rem;
 }
-
 .ai-workflow__variable-header {
   font-weight: 600;
   color: var(--ai-workflow-text);
   font-size: 0.9rem;
 }
-
 .ai-workflow__variable-item {
   display: flex;
   gap: 0.75rem;
 }
-
 .ai-workflow__variable-name {
   flex: 0 0 120px;
   padding: 0.5rem;
@@ -632,9 +576,8 @@
   border-radius: var(--ai-workflow-radius-sm);
   color: var(--ai-workflow-text);
   font-size: 0.85rem;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
 }
-
 .ai-workflow__variable-value {
   flex: 1;
   padding: 0.5rem;
@@ -644,15 +587,10 @@
   color: var(--ai-workflow-text);
   font-size: 0.85rem;
 }
-
 .ai-workflow__variable-value:focus {
   outline: none;
   border-color: var(--ai-workflow-accent);
 }
-
-/* ========================================
-   BLOCK: ai-workflow__condition-block
-   ======================================== */
 .ai-workflow__condition-block {
   background: var(--ai-workflow-surface);
   border: 1px solid var(--ai-workflow-border);
@@ -662,19 +600,16 @@
   flex-direction: column;
   gap: 0.75rem;
 }
-
 .ai-workflow__condition-label {
   font-weight: 600;
   color: var(--ai-workflow-text);
   font-size: 0.9rem;
 }
-
 .ai-workflow__condition-row {
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
-
 .ai-workflow__condition-field {
   flex: 1;
   padding: 0.5rem;
@@ -684,12 +619,10 @@
   color: var(--ai-workflow-text);
   font-size: 0.85rem;
 }
-
 .ai-workflow__condition-field:focus {
   outline: none;
   border-color: var(--ai-workflow-accent);
 }
-
 .ai-workflow__condition-operator {
   flex: 0 0 80px;
   padding: 0.5rem;
@@ -700,10 +633,6 @@
   font-size: 0.85rem;
   text-align: center;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__loop-indicator
-   ======================================== */
 .ai-workflow__loop-indicator {
   display: inline-flex;
   align-items: center;
@@ -715,60 +644,46 @@
   font-size: 0.8rem;
   font-weight: 600;
 }
-
 .ai-workflow__loop-icon {
   font-size: 0.9rem;
   animation: ai-workflow-spin 1s linear infinite;
 }
-
-/* ========================================
-   BLOCK: ai-workflow__parallel-badge
-   ======================================== */
 .ai-workflow__parallel-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.35rem 0.75rem;
-  background: oklch(0.72 0.20 145);
+  background: var(--success);
   color: var(--ai-workflow-text);
   border-radius: 999px;
   font-size: 0.8rem;
   font-weight: 600;
 }
-
 .ai-workflow__parallel-icon {
   font-size: 0.9rem;
 }
-
-/* ========================================
-   STATES: Skeleton Loading
-   ======================================== */
 .ai-workflow__skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--ai-workflow-surface-2) 0%,
-    var(--ai-workflow-border) 50%,
-    var(--ai-workflow-surface-2) 100%
-  );
+  background:
+    linear-gradient(
+      90deg,
+      var(--ai-workflow-surface-2) 0%,
+      var(--ai-workflow-border) 50%,
+      var(--ai-workflow-surface-2) 100%);
   background-size: 200% 100%;
   animation: ai-workflow-skeleton-loading 1.5s ease-in-out infinite;
   border-radius: var(--ai-workflow-radius-sm);
 }
-
 .ai-workflow__skeleton--text {
   height: 1rem;
   margin: 0.5rem 0;
 }
-
 .ai-workflow__skeleton--node {
   height: 5rem;
   width: 180px;
 }
-
 .ai-workflow__skeleton--card {
   height: 6rem;
 }
-
 @keyframes ai-workflow-skeleton-loading {
   0% {
     background-position: 200% 0;
@@ -777,10 +692,6 @@
     background-position: -200% 0;
   }
 }
-
-/* ========================================
-   STATES: Empty State
-   ======================================== */
 .ai-workflow__empty-state {
   display: flex;
   flex-direction: column;
@@ -794,102 +705,76 @@
   border: 2px dashed var(--ai-workflow-border);
   border-radius: var(--ai-workflow-radius);
 }
-
 .ai-workflow__empty-icon {
   font-size: 3rem;
   opacity: 0.3;
 }
-
 .ai-workflow__empty-title {
   margin: 0;
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--ai-workflow-text);
 }
-
 .ai-workflow__empty-description {
   margin: 0;
   color: var(--ai-workflow-text-muted);
   font-size: 0.9rem;
   max-width: 300px;
 }
-
-/* ========================================
-   RESPONSIVE: Tablet
-   ======================================== */
 @media (max-width: 768px) {
   .ai-workflow__step-detail-panel {
     max-width: none;
     min-width: 250px;
   }
-
   .ai-workflow__run-history-table {
     font-size: 0.85rem;
   }
-
   .ai-workflow__history-th,
   .ai-workflow__history-td {
     padding: 0.75rem;
   }
-
   .ai-workflow__execution-log {
     max-height: 300px;
     font-size: 0.75rem;
   }
 }
-
-/* ========================================
-   RESPONSIVE: Mobile
-   ======================================== */
 @media (max-width: 480px) {
   .ai-workflow__canvas {
     min-height: 300px;
   }
-
   .ai-workflow__step-detail-panel {
     min-width: 100%;
     max-width: none;
     border-left: none;
     border-top: 1px solid var(--ai-workflow-border);
   }
-
   .ai-workflow__step-node {
     min-width: 150px;
     padding: 0.75rem;
   }
-
   .ai-workflow__run-history-table {
     font-size: 0.75rem;
   }
-
   .ai-workflow__history-th,
   .ai-workflow__history-td {
     padding: 0.5rem;
   }
-
   .ai-workflow__condition-row {
     flex-direction: column;
   }
-
   .ai-workflow__condition-field,
   .ai-workflow__condition-operator {
     width: 100%;
   }
-
   .ai-workflow__execution-log {
     font-size: 0.7rem;
     max-height: 250px;
   }
 }
-
-/* ========================================
-   UTILITY: Accessibility
-   ======================================== */
 .ai-workflow__focus-visible:focus-visible {
   outline: 2px solid var(--ai-workflow-accent);
   outline-offset: 2px;
 }
-
 @media (prefers-reduced-motion: reduce) {
   .ai-workflow__step-node--running,
   .ai-workflow__step-status--running,
@@ -901,45 +786,14 @@
     transition: none;
   }
 }
-
-/* ========================================
-   UTILITY: Dark Mode
-   ======================================== */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ai-workflow-bg: oklch(0.08 0.01 250);
-    --ai-workflow-surface: oklch(0.11 0.01 250);
-    --ai-workflow-surface-2: oklch(0.14 0.01 250);
-    --ai-workflow-border: oklch(0.20 0.01 250);
-    --ai-workflow-text: oklch(0.97 0.01 250);
-  }
-}
-
-/* ========================================
-   UTILITY: Light Mode
-   ======================================== */
-@media (prefers-color-scheme: light) {
-  :root {
-    --ai-workflow-bg: oklch(0.98 0.01 250);
-    --ai-workflow-surface: oklch(0.93 0.01 250);
-    --ai-workflow-surface-2: oklch(0.88 0.01 250);
-    --ai-workflow-border: oklch(0.75 0.01 250);
-    --ai-workflow-text: oklch(0.15 0.01 250);
-    --ai-workflow-text-muted: oklch(0.40 0.01 250);
-  }
-}
-
-/* ========================================
-   UTILITY: Print Styles
-   ======================================== */
 @media print {
   .ai-workflow__canvas {
     break-inside: avoid;
     page-break-inside: avoid;
   }
-
   .ai-workflow__step-node {
     break-inside: avoid;
     page-break-inside: avoid;
   }
 }
+/*# sourceMappingURL=index.css.map */