:root {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 162 94% 44%;
  --secondary: 262 83% 66%;
  --muted: 222 28% 18%;
  --destructive: 0 84% 62%;
  --border: 222 22% 24%;
  --card: 222 38% 11%;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --shadow-sm: 0 8px 24px rgba(0,0,0,.18);
  --shadow-md: 0 18px 50px rgba(0,0,0,.28);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.38);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 162 94% 44%;
  --secondary: 262 83% 66%;
  --muted: 222 28% 18%;
  --destructive: 0 84% 62%;
  --border: 222 22% 24%;
  --card: 222 38% 11%;
}

* { box-sizing: border-box; }
html { background: hsl(var(--background)); }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 18% 10%, hsla(var(--secondary), .28), transparent 34rem),
    radial-gradient(circle at 88% 4%, hsla(var(--primary), .22), transparent 31rem),
    hsl(var(--background));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
.glass {
  background: linear-gradient(180deg, hsla(var(--card), .92), hsla(var(--card), .72));
  border: 1px solid hsla(var(--border), .85);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
}
.workflow-grid {
  background-image:
    linear-gradient(hsla(var(--border), .45) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--border), .45) 1px, transparent 1px);
  background-size: 28px 28px;
}
.focus-ring:focus-visible {
  outline: 3px solid hsla(var(--primary), .45);
  outline-offset: 3px;
}
.node-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1rem;
  width: 1rem;
  height: 2px;
  background: hsl(var(--primary));
  opacity: .65;
}
.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  .node-card:not(:last-child)::after { display: none; }
}