:root{
  --bg:#0f1419; --panel:#1a2129; --panel2:#222b35; --line:#2e3a46;
  --fg:#e6edf3; --muted:#9fb0bf; --accent:#ff8a3d; --accent2:#3da9fc;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--fg);line-height:1.45}
header{padding:14px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#16202a,#0f1419);display:flex;align-items:center;gap:14px}
header h1{margin:0;font-size:18px}
header h1 .a{color:var(--accent)}
header .sub{color:var(--muted);font-size:12px}

.app{display:grid;grid-template-columns:minmax(180px,15%) 1fr 200px;height:calc(100vh - 51px)}

/* ---- palette ---- */
.palette{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:10px 10px 30px}
.pal-group{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:14px 4px 6px;font-weight:600}
.pal-group:first-child{margin-top:2px}
.pal-item{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;padding:7px 9px;margin-bottom:6px;font-size:13px;cursor:grab;user-select:none}
.pal-item:hover{border-color:var(--accent2)}
.pal-item:active{cursor:grabbing}
.pal-item .sw{width:11px;height:11px;border-radius:3px;flex:none}
.pal-item .thumb{width:30px;height:30px;object-fit:contain;flex:none;
  background:#fff;border-radius:4px;padding:2px}
.pal-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- canvas ---- */
.canvas{position:relative;overflow:auto;background:
  radial-gradient(circle at 22% 12%, #16202a, var(--bg) 60%),
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.025) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.025) 23px 24px)}
.canvas.drop{outline:2px dashed var(--accent2);outline-offset:-6px}
.canvas-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--muted);font-size:14px;pointer-events:none}
/* sizer reserves the (scaled) scroll area; world is scaled and holds the blocks */
.sizer{position:relative;width:100%;height:100%}
.world{position:absolute;top:0;left:0;transform-origin:0 0}
/* wire/anchor overlay sits above the parts; only the anchor dots take clicks */
.wires{position:absolute;top:0;left:0;z-index:10;pointer-events:none;overflow:visible}
.wire{stroke:var(--warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none}
.wire-hit{stroke:transparent;stroke-width:12;fill:none;pointer-events:stroke;cursor:pointer}
.wire.invalid{stroke:var(--bad);stroke-dasharray:6 5}
.wire.sel{stroke-width:3.5;filter:drop-shadow(0 0 3px rgba(255,255,255,.45))}
.anchor{fill:var(--bad);stroke:#fff;stroke-width:1.2;pointer-events:all;cursor:crosshair}
.anchor:hover{fill:#ff7b72}
.anchor.pending{fill:var(--accent2);stroke:#fff}
/* draggable manual-routing handles on the selected wire */
.waypoint{fill:var(--accent);stroke:#fff;stroke-width:1.5;pointer-events:all;cursor:move}
.waypoint:hover{fill:#ffb070}
/* a selected waypoint — draggable; moves with the rest of the selection */
.waypoint.sel{fill:var(--accent2);pointer-events:all;cursor:move}
/* a plain, non-interactive waypoint marker, shown alongside the connector dots */
.waypoint.dot{pointer-events:none;cursor:default;opacity:.8}
/* hidden = visually gone but still clickable, so you can keep wiring */
.anchor.hidden{opacity:0}
.anchor.hidden:hover{opacity:.5}

/* placed part block (positioned absolutely; holds art <img> or a placeholder svg) */
.block{position:absolute;cursor:grab;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.block:active{cursor:grabbing}
.block>svg,.block>img{display:block;width:100%;height:100%}
.block .art-img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.block .body{fill:var(--panel2);stroke-width:1.5}
.block .name{fill:var(--fg);font:600 13px var(--sans);dominant-baseline:middle}
.block.sel{outline:2px solid var(--accent2);outline-offset:2px;border-radius:4px}
.rubber{position:absolute;border:1px solid var(--accent2);background:rgba(61,169,252,.12);pointer-events:none;z-index:5}

/* ---- right tools panel ---- */
.tools{border-left:1px solid var(--line);background:var(--panel);padding:14px 14px;overflow-y:auto}
.tools-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;margin-bottom:10px}
.tool{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;
  background:#26323d;color:var(--fg);margin-bottom:8px}
.tool:disabled{opacity:.45;cursor:not-allowed}
.tool .kbd{margin-left:auto}
.tools-hint{color:var(--muted);font-size:12px;margin-top:6px}
/* properties view for the selected component */
.props{font-size:12px;color:var(--muted)}
.prop-name{color:var(--fg);font-weight:600;font-size:13px;margin-bottom:8px}
.prop-row{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.prop-row input{background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font-size:13px}
.prop-row input:focus{outline:none;border-color:var(--accent2)}
.prop-meta{margin-top:3px}
/* parameters pop-up: a scrollable table grouped Motion / Driver */
.modal-box.pm-wide{width:min(1060px,96vw)}
.pm-cols{display:flex;gap:14px;flex:1;min-height:0}
.pm-params{flex:1 1 44%;overflow-y:auto;min-width:0;margin:-2px 0}
/* right pane: the whole config, this part's section(s) highlighted */
.pm-config{flex:1 1 56%;display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--line);border-radius:7px;background:var(--bg);overflow:hidden}
.pm-config-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:7px 12px;border-bottom:1px solid var(--line)}
/* editable config: a transparent textarea over a highlighted mirror, pixel-aligned.
   The selector beats the generic `.modal textarea` rule (which would force an opaque
   background + its own font and hide the highlights underneath). */
.pm-config-edit{position:relative;flex:1;min-height:0;overflow:hidden}
.cfg-mirror,.pm-config-edit textarea.cfg-input{position:absolute;inset:0;margin:0;overflow:auto;
  min-height:0;font:11.5px/17px var(--mono,ui-monospace,monospace);white-space:pre;
  -moz-tab-size:8;tab-size:8}
.cfg-mirror{padding:6px 0;pointer-events:none}
.pm-config-edit textarea.cfg-input{padding:6px 12px;border:0;resize:none;outline:none;
  background:transparent;color:transparent;caret-color:var(--fg);z-index:2}
.cfg-line{padding:0 12px;color:var(--muted)}
.cfg-line.hl{background:rgba(61,169,252,.15);color:var(--fg);box-shadow:inset 3px 0 0 var(--accent2)}
.pm-body{overflow-y:auto;flex:1;margin:-2px 0}
.pm-group{color:var(--fg);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;margin:14px 0 6px}
.pm-group:first-child{margin-top:0}
.pm-group .pm-hdr{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;
  font-family:var(--mono,ui-monospace,monospace)}
.pm-table{width:100%;border-collapse:collapse}
.pm-table td{padding:3px 6px;border-bottom:1px solid var(--line);font-size:12px;vertical-align:middle}
.pm-table td.pk{color:var(--muted);font-family:var(--mono,ui-monospace,monospace);
  width:46%;white-space:nowrap}
.pm-table input{width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:5px;padding:4px 7px;font-size:12px;
  font-family:var(--mono,ui-monospace,monospace)}
.pm-table input:focus{outline:none;border-color:var(--accent2)}
.zoomrow{display:flex;gap:8px}
.zoomrow .tool{margin-bottom:0;justify-content:center}
.tool.sq{flex:none;width:38px;font-size:16px;justify-content:center}

/* ---- config modal ---- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;z-index:100}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  width:min(680px,90vw);max-height:85vh;display:flex;flex-direction:column;padding:14px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal-head b{font-size:14px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.modal textarea{flex:1;min-height:340px;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:7px;padding:10px;
  font-family:var(--mono);font-size:12px;resize:vertical}