:root { --accent: #5f7d2a; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; position: relative; }
.toolbar .input { max-width: 340px; flex: 1; min-width: 160px; }
.toolbar select { width: auto; }
.toolbar .sep { flex: 1; }
.menu { position: absolute; right: 24px; top: 52px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; z-index: 30; overflow: hidden; }
.menu button { font: inherit; background: none; border: 0; color: var(--text); padding: 9px 16px; text-align: left; cursor: pointer; }
.menu button:hover { background: var(--panel-2); }
.stage { position: relative; flex: 1; min-height: 0; }
#canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; background:
  radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0 / 22px 22px; }
#canvas.panning { cursor: grabbing; }
.node { cursor: pointer; }
.node rect { stroke-width: 1.5; transition: stroke-width .15s; }
.node text { font: 600 13px Inter, system-ui, sans-serif; fill: var(--text); pointer-events: none; }
.node.root text { font-size: 16px; fill: #fff; }
.node.sel rect { stroke-width: 3.5; }
.node.loading rect { stroke-dasharray: 5 4; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.node .plus { font-size: 12px; fill: var(--muted); }
.node.hit rect { stroke-width: 4; filter: drop-shadow(0 0 6px #facc15); }
.node.drop rect { stroke: var(--good); stroke-width: 4; stroke-dasharray: 6 3; }
.node.dragging { opacity: .7; cursor: grabbing; }
.toolbar .search { max-width: 170px; min-width: 110px; flex: 0 1 170px; }
.float { position: absolute; left: 16px; top: 16px; width: 380px; max-width: calc(100% - 32px); z-index: 25; }
.float.wide { width: 560px; max-height: calc(100% - 32px); overflow: auto; }
.inspector textarea { min-height: 54px; font-size: 13px; margin-top: 6px; }
.link { fill: none; stroke-width: 2; opacity: .55; }
.inspector { position: absolute; right: 16px; top: 16px; width: 320px; max-height: calc(100% - 32px); overflow: auto; }
.inspector h2 { font-size: 17px; }
.counter { position: absolute; left: 16px; bottom: 16px; background: var(--panel); }
@media (max-width: 820px) {
  .toolbar { padding: 10px 16px; }
  .inspector { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 45%; }
  .counter { display: none; }
}