.mocno-n8n-demo {
  --mocno-n8n-bg: rgba(15, 23, 42, .78);
  --mocno-n8n-border: rgba(148, 163, 184, .22);
  --mocno-n8n-muted: var(--muted, #64748b);
  --mocno-n8n-text: var(--text, #0f172a);
  --mocno-n8n-card: var(--card, #ffffff);
  --mocno-n8n-accent: #ea4b71;
  margin: 1.6rem 0;
  overflow: hidden;
  border: 1px solid var(--mocno-n8n-border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--mocno-n8n-bg), color-mix(in oklab, var(--mocno-n8n-bg) 92%, var(--mocno-n8n-accent) 8%));
  box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
}

.mocno-n8n-demo__header {
  display: grid;
  gap: 8px;
  padding: .95rem 1rem .82rem;
  border-bottom: 1px solid var(--mocno-n8n-border);

}

.force-light {
  --playground-muted: #64748b;
  --header-background: #f8fafc;
    color-scheme: light;
}

.dark {
  --playground-muted: #94a3b8;
  --header-background: #0e1628;
  color-scheme: dark;
}

.mocno-n8n-demo__header {
  background: var(--header-background);
}



.mocno-n8n-demo__eyebrow {
  color: var(--mocno-n8n-accent);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mocno-n8n-demo__title {
  margin: 0;
  color: var(--playground-muted);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  font-weight: 850;
  line-height: 1.25;
}



.mocno-n8n-demo__error {
  margin: 0;
  padding: 1rem;
  color: var(--mocno-n8n-muted);
}

.mocno-n8n-demo--error {
  border-color: color-mix(in oklab, #ef4444 44%, var(--border, #e2e8f0));
  background: color-mix(in oklab, #ef4444 10%, var(--card, #ffffff));
}

.mocno-n8n-demo__header {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.mocno-n8n-demo__header-icon {
  display: flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--mocno-n8n-accent);
  border: 1px solid color-mix(in srgb, var(--mocno-n8n-accent) 42%, hsla(346, 20%, 65%, 0.22));
  border-radius: 8px;
  color: var(--mocno-n8n-accent);
  padding: 1px 4px;
}

.mocno-n8n-demo__fallback-code {
  border-top: 1px solid var(--mocno-n8n-border);
  background: color-mix(in oklab, var(--mocno-n8n-card) 90%, var(--mocno-n8n-accent) 10%);
}

.mocno-n8n-demo__fallback-code[open] {
  padding-bottom: .85rem;
}

.mocno-n8n-demo__fallback-code summary {
  cursor: pointer;
  padding: .78rem 1rem;
  color: var(--mocno-n8n-text);
  font-weight: 800;
}

.mocno-n8n-demo__fallback-code pre {
  max-height: min(70vh, 560px);
  margin: 0 1rem;
  overflow: auto;
  border: 1px solid var(--mocno-n8n-border);
  border-radius: 14px;
  padding: .9rem;
  background: var(--mocno-n8n-card);
  color: var(--mocno-n8n-text);
  font-size: .86rem;
  line-height: 1.55;
}

.force-light .mocno-n8n-demo n8n-demo {
  --n8n-color-primary-h: 198.44;
  --n8n-frame-background-color: #fffeff;
  --n8n-json-background-color: #ffffff;
  --mocno-n8n-json-color: #0f172a;
  --mocno-n8n-button-border-color: color-mix(in srgb, #0ea5e9 70%, rgba(148, 163, 184, .32));
  --mocno-n8n-button-background: color-mix(in srgb, #0ea5e9 12%, transparent);
  --mocno-n8n-button-color: #0ea5e9;
  --mocno-n8n-text: #0f172a;
}


.dark .mocno-n8n-demo n8n-demo {
  --n8n-color-primary-h: 198.44;
  --n8n-frame-background-color: #0f172a;
  --n8n-json-background-color: #060a1d;
  --mocno-n8n-json-color: #7cdcf0;
  --mocno-n8n-button-border-color: color-mix(in srgb, #38bdf8 70%, rgba(148, 163, 184, .22));
  --mocno-n8n-button-background: color-mix(in srgb, #38bdf8 12%, transparent);
  --mocno-n8n-button-color: #38bdf8;
  --mocno-n8n-text: #e5e7eb;
}

  .mocno-n8n-demo n8n-demo {
    --n8n-workflow-min-height: 420px;
  }

@media (max-width: 760px) {
  .mocno-n8n-demo {
    border-radius: 18px;
  }

  .mocno-n8n-demo n8n-demo {
    --n8n-workflow-min-height: 420px;
  }
}