@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  min-height: 100vh;
}

.node-connection {
  stroke: #64748b;
  stroke-width: 2;
  fill: none;
  transition: stroke 0.2s;
}

.node-connection:hover {
  stroke: #94a3b8;
  stroke-width: 3;
}

.node-connection.active {
  stroke: #22c55e;
  stroke-width: 3;
  animation: pulse-line 1.5s ease-in-out infinite;
}

@keyframes pulse-line {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.canvas-grid {
  background-image: 
    linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}