:root {
  --bg: #0b0c0f;
  --panel: #171821;
  --text: #e8eaf0;
  --muted: #9aa3b2;
  --accent: #6ea8fe;
  --ok: #a7e0b3;
  --decision: #ffe08a;
  --process: #b7d2ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 820px; height: 560px; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
h1 { font-size: 16px; margin: 0; font-weight: 600; }
header { padding: 10px; background: var(--panel); border-bottom: 1px solid #222533; position: sticky; top: 0; z-index: 2; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
button { background: #2a2d3a; color: var(--text); border: 1px solid #2f3446; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
button:hover { border-color: var(--accent); }
label { color: var(--muted); font-size: 12px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; height: calc(100% - 88px); }
#steps { width: 100%; height: 100%; background: #10121a; color: var(--text); border: 1px solid #23283a; border-radius: 8px; padding: 10px; line-height: 1.35; resize: none; }
#canvasWrap { background: #0e1017; border: 1px solid #23283a; border-radius: 8px; overflow: auto; }

#chart { width: 100%; height: 100%; }

.node { stroke: #1d2233; stroke-width: 1.2; }
.process { fill: var(--process); }
.startend { fill: var(--ok); }
.decision { fill: var(--decision); }
text { font-size: 12px; fill: #111; dominant-baseline: middle; text-anchor: middle; }
.label { fill: var(--muted); font-size: 12px; }