:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #e8ecff;
}

* { box-sizing: border-box; }
body { margin: 0; display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }
.sidebar { border-right: 1px solid #26314f; background: #111832; padding: 18px; overflow-y: auto; }
h1 { margin: 0 0 8px; font-size: 24px; }
h2 { margin: 22px 0 8px; font-size: 14px; color: #b7c4ff; text-transform: uppercase; letter-spacing: .08em; }
.muted { color: #99a4c8; font-size: 13px; line-height: 1.4; }
input, select, button { width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #354469; background: #0b1020; color: #e8ecff; }
button { cursor: pointer; background: linear-gradient(135deg, #455dff, #8a5cff); border: none; font-weight: 700; }
button:hover { filter: brightness(1.1); }
pre { white-space: pre-wrap; font-size: 12px; background: #080c19; border: 1px solid #26314f; border-radius: 10px; padding: 10px; min-height: 60px; }
.canvas-wrap { position: relative; overflow: hidden; background: radial-gradient(circle at top left, #18224a, #080c19 55%); }
#canvas { width: 100%; height: 100vh; display: block; }
.edge-line { stroke: #90a4ff; stroke-width: 2.2; marker-end: url(#arrow); }
.edge-label { fill: #b7c4ff; font-size: 12px; paint-order: stroke; stroke: #080c19; stroke-width: 4px; stroke-linejoin: round; }
.node rect { fill: #172143; stroke: #6176ff; stroke-width: 2; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.node.selected rect { stroke: #f9d65c; stroke-width: 3; }
.node text { pointer-events: none; fill: #f4f6ff; font-size: 14px; font-weight: 700; }
.node .kind { fill: #aab5d8; font-size: 11px; font-weight: 500; text-transform: uppercase; }