/* Auto Dark Flow System */
.auto-dark-flow {
  --bg: #080a12;
  --panel-bg: #0f111a;
  --border: rgba(255,255,255,0.05);
  --accent-start: #00c853;
  --accent-event: #ff8a4b;
  --accent-condition: #3fb6ff;
  --accent-action: #b57cff;
  --text: #e6eef8;
}

.auto-dark-container {
  background: var(--panel-bg);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  width: 100%;
  height: 400px; /* auto large view */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

/* Canvas */
.auto-dark-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    var(--bg);
  background-size: 40px 40px;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  border: 1px solid rgba(255,255,255,0.03);
}

/* Nodes */
.auto-node {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.2s ease;
  z-index: 2;
}
.auto-node:active { cursor: grabbing; }

.node-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
}

/* Node Styles */
.node-start { background: rgba(0,200,83,0.08); border: 1px solid rgba(0,200,83,0.2); }
.node-start .node-icon { background: var(--accent-start); }

.node-event { background: rgba(255,138,75,0.08); border: 1px solid rgba(255,138,75,0.2); }
.node-event .node-icon { background: var(--accent-event); }

.node-condition { background: rgba(63,182,255,0.08); border: 1px solid rgba(63,182,255,0.2); }
.node-condition .node-icon { background: var(--accent-condition); }

.node-action { background: rgba(181,124,255,0.08); border: 1px solid rgba(181,124,255,0.2); }
.node-action .node-icon { background: var(--accent-action); }

/* Ports */
.port {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 8px rgba(0,0,0,0.4) inset;
}
.port.in { left: -5px; top: 50%; transform: translateY(-50%); }
.port.out { right: -5px; top: 50%; transform: translateY(-50%); }

/* Edges */
.edge-path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px currentColor);
}
.edge-particle {
  fill: currentColor;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px currentColor);
}

 

/*----------------===============----------------------*/

 

          @keyframes float {

               0%,
               100% {
                    transform: translateY(0px) rotate(0deg);
               }

               33% {
                    transform: translateY(-10px) rotate(1deg);
               }

               66% {
                    transform: translateY(-5px) rotate(-1deg);
               }
          }

          @keyframes pulse {

               0%,
               100% {
                    opacity: 0.7;
                    transform: scale(1);
               }

               50% {
                    opacity: 1;
                    transform: scale(1.02);
               }
          }

          @keyframes glow {

               0%,
               100% {
                    box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
               }

               50% {
                    box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
               }
          }

          .animate-float {
               animation: float 6s ease-in-out infinite;
          }

          .animate-pulse {
               animation: pulse 2s ease-in-out infinite;
          }

          .animate-glow {
               animation: glow 2s ease-in-out infinite;
          }

          .node-card:hover {
               transform: translateY(-6px) scale(1.03);
               transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
          }

          .edge-line {
               stroke-dasharray: 5, 5;
               stroke-linecap: round;
               transition: all 0.3s ease;
          }

          .edge-line:hover {
               stroke-width: 4;
               stroke-dasharray: none;
          }

          .particle {
               position: absolute;
               width: 6px;
               height: 6px;
               border-radius: 50%;
               pointer-events: none;
               z-index: 10;
          }

          .tooltip-custom {
               position: absolute;
               background: rgba(15, 23, 42, 0.95);
               backdrop-filter: blur(12px);
               border: 1px solid rgba(99, 102, 241, 0.3);
               border-radius: 12px;
               padding: 12px 16px;
               font-size: 14px;
               color: white;
               opacity: 0;
               visibility: hidden;
               transition: all 0.3s ease;
               z-index: 50;
          }

          .tooltip-custom::after {
               content: '';
               position: absolute;
               top: 100%;
               left: 50%;
               transform: translateX(-50%);
               width: 0;
               height: 0;
               border-left: 8px solid transparent;
               border-right: 8px solid transparent;
               border-top: 8px solid rgba(99, 102, 241, 0.3);
          }

          .tooltip-custom.show {
               opacity: 1;
               visibility: visible;
               transform: translateY(-8px);
          }

          .section-header {
               background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(147, 53, 234, 0.1));
               border-radius: 16px;
               padding: 2px;
               margin-bottom: 2rem;
          }

          .section-title {
               background: linear-gradient(135deg, #6366f1, #8b5cf6);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
               background-clip: text;
          }

          .flow-diagram {
               position: relative;
               height: 200px;
               margin: 2rem 0;
               overflow: hidden;
          }

          .flow-node {
               position: absolute;
               width: 120px;
               height: 80px;
               border-radius: 12px;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               color: white;
               font-weight: 600;
               box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
               transition: all 0.3s ease;
          }

          .flow-node:hover {
               transform: translateY(-4px);
               box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
          }

          .flow-label {
               font-size: 12px;
               opacity: 0.9;
               margin-top: 4px;
          }

          .flow-connection {
               position: absolute;
               height: 4px;
               background: linear-gradient(90deg, #6366f1, #8b5cf6);
               transform: translateY(-50%);
               filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
          }

          .flow-connection::before {
               content: '';
               position: absolute;
               right: 0;
               top: 50%;
               transform: translateY(-50%);
               width: 0;
               height: 0;
               border-left: 10px solid #8b5cf6;
               border-top: 5px solid transparent;
               border-bottom: 5px solid transparent;
          }

          .energy-particle {
               position: absolute;
               width: 8px;
               height: 8px;
               background: white;
               border-radius: 50%;
               box-shadow: 0 0 10px white;
               pointer-events: none;
          }