:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #10151c; color: #e7edf5; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 900px; }
header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: #19232e; border-bottom: 1px solid #314250; }
header strong { font-size: 18px; } header span { margin-left: 9px; color: #8ea2b5; font-size: 13px; }
.brand { color: inherit; text-decoration: none; font-size: 18px; font-weight: 700; }.nav-link { padding: 7px 9px; color: #bfe7f2; text-decoration: none; font-size: 13px; }
button, select, input, .button { font: inherit; border: 1px solid #3d5365; border-radius: 5px; padding: 7px 9px; background: #243442; color: inherit; }
button, .button { cursor: pointer; } button:hover, .button:hover { background: #314b60; } .quiet { background: transparent; }
.header-actions { display: flex; gap: 8px; align-items: center; } .button input { display: none; }
main { display: flex; height: calc(100vh - 58px); } .sidebar { overflow: auto; width: 300px; padding: 16px; background: #15202a; border-right: 1px solid #314250; }
h1, h2 { margin: 0 0 10px; } h1 { font-size: 16px; } h2 { font-size: 14px; margin-top: 22px; color: #b7c7d5; }
label { display: grid; gap: 5px; margin: 10px 0; font-size: 12px; color: #b7c7d5; } select, input { width: 100%; color: #eef6ff; }
.help, .selection, .results { padding: 10px; margin: 8px 0; line-height: 1.5; background: #1d2b37; border-radius: 5px; font-size: 12px; color: #c5d2de; }
.results ul { padding-left: 18px; margin: 0; }.results li { margin: 4px 0; }
.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }.canvas-toolbar { height: 40px; padding: 10px 15px; display: flex; justify-content: space-between; font-size: 12px; background: #19232e; color: #9fb2c1; }
.canvas { position: relative; flex: 1; overflow: auto; min-height: 700px; background-color: #111a22; background-image: linear-gradient(#22313d 1px, transparent 1px), linear-gradient(90deg, #22313d 1px, transparent 1px); background-size: 24px 24px; }
#wires, #nodes { position: absolute; width: 1200px; height: 1200px; inset: 0; } #wires { pointer-events: none; overflow: visible; }
.wire { fill: none; stroke: #e5a844; stroke-width: 3; } .pipe { stroke: #51bcd2; } .wire-label { fill: #dce8f0; font-size: 11px; paint-order: stroke; stroke: #10151c; stroke-width: 3px; }
.node { position: absolute; min-width: 94px; min-height: 54px; padding: 7px; text-align: left; border-color: #5a7387; background: #263b4b; box-shadow: 0 2px 8px #0008; }
.node.source { border-color: #54b69b; background: #1d4a43; }.node.sink { border-color: #c56a82; background: #4a2632; }.node.selected { outline: 3px solid #f0c95b; }.node.connecting { outline: 3px solid #57bce5; }
.node-title, .node-detail { display: block; }.node-title { font-weight: 650; font-size: 13px; }.node-detail { margin-top: 4px; font-size: 11px; color: #c7d6e2; }