:root{
  --bg: #0F1215;
  --grid-dot: rgba(232,234,237,0.05);
  --panel: #171B1F;
  --panel-2: #1C2126;
  --panel-3: #21262C;
  --border: #262B31;
  --border-soft: #1E2329;
  --text: #E8EAED;
  --text-dim: #97A0A8;
  --text-faint: #5B636C;

  --extract: #D8A657;
  --extract-dim: rgba(216,166,87,.14);
  --extract-line: rgba(216,166,87,.55);

  --craft: #4FB6C4;
  --craft-dim: rgba(79,182,196,.14);
  --craft-line: rgba(79,182,196,.55);

  --good: #6FCF97;
  --warn: #E8B34A;
  --bad: #E5686B;

  --radius-card: 12px;
  --radius-control: 6px;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-ui: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button{ font-family: inherit; }

#app{
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ---------- Topbar ---------- */

#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 20px;
  background: var(--panel);
  border-bottom:1px solid var(--border);
  flex: 0 0 auto;
  z-index: 20;
}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand-mark{ color: var(--craft); flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:16px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.brand-sub{
  font-size:11.5px;
  color: var(--text-faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.divider{ width:1px; height:22px; background: var(--border); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 13px;
  border-radius: var(--radius-control);
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition: border-color .12s ease, background .12s ease, transform .05s ease;
}
.btn:hover{ background: var(--panel-3); border-color:#33393f; }
.btn:active{ transform: translateY(1px); }
.btn-plus{ font-weight:600; font-size:14px; line-height:1; }

.btn-extract{ border-color: rgba(216,166,87,.35); color:#F0C888; }
.btn-extract:hover{ background: var(--extract-dim); border-color: var(--extract); }
.btn-craft{ border-color: rgba(79,182,196,.35); color:#8FDBE5; }
.btn-craft:hover{ background: var(--craft-dim); border-color: var(--craft); }
.btn-ghost{ background:transparent; color: var(--text-dim); }
.btn-ghost:hover{ color: var(--text); }
.icon-btn{ width:32px; height:32px; padding:0; justify-content:center; border-radius:50%; }

.stat-pill{
  display:flex; align-items:center; gap:7px;
  padding:6px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  font-family: var(--font-mono);
  font-size:12px;
  color: var(--text-dim);
}
.stat-dot{ width:6px; height:6px; border-radius:50%; background: var(--good); box-shadow:0 0 6px var(--good); }

/* ---------- Canvas / viewport ---------- */

#viewport{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  background: var(--bg);
  cursor: grab;
}
#viewport.panning{ cursor: grabbing; }

#world{
  position:absolute;
  top:0; left:0;
  width:6000px;
  height:4000px;
  transform-origin: 0 0;
  background-image: radial-gradient(circle, var(--grid-dot) 1.4px, transparent 1.4px);
}

#connectionsLayer{
  position:absolute;
  top:0; left:0;
  width:6000px;
  height:4000px;
  overflow:visible;
  pointer-events:none;
}
#connectionsLayer path.conn-line{
  pointer-events: stroke;
  cursor:pointer;
}
#connectionsLayer path.conn-hit{
  pointer-events: stroke;
  cursor:pointer;
}

#nodesLayer{
  position:absolute;
  top:0; left:0;
  width:6000px;
  height:4000px;
}

#emptyState{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  padding:32px;
  pointer-events:none;
}
#emptyState.hidden{ display:none; }
#emptyState p{
  max-width:420px;
  margin:0;
  color: var(--text-dim);
  font-size:14px;
  line-height:1.6;
}
.empty-kicker{
  font-family: var(--font-display);
  font-size:15px !important;
  color: var(--text) !important;
  font-weight:600;
}
.empty-actions{ display:flex; gap:10px; pointer-events:all; margin-top:4px; }

#zoomControls{
  position:absolute;
  right:16px;
  bottom:16px;
  display:flex;
  align-items:center;
  gap:2px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 999px;
  padding:4px;
  z-index:15;
}
#zoomControls button{
  border:none;
  background:transparent;
  color: var(--text-dim);
  width:26px; height:26px;
  border-radius:50%;
  cursor:pointer;
  font-size:14px;
}
#zoomControls button:hover{ background: var(--panel-3); color:var(--text); }
#zoomReset{ width:auto !important; padding:0 10px; font-size:11px !important; }
#zoomLabel{
  font-family: var(--font-mono);
  font-size:11px;
  color: var(--text-faint);
  width:38px;
  text-align:center;
}

#toast{
  position:absolute;
  left:50%;
  top:18px;
  transform: translateX(-50%);
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}
.toast-msg{
  background: #241A1B;
  border:1px solid rgba(229,104,107,.4);
  color:#F3B3B4;
  padding:8px 14px;
  border-radius:999px;
  font-size:12.5px;
  animation: toast-in .15s ease-out, toast-out .3s ease-in 1.7s forwards;
}
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} }
@keyframes toast-out{ to{ opacity:0; } }

/* ---------- Nodes ---------- */

.node{
  position:absolute;
  width:268px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius-card);
  overflow:visible;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  user-select:none;
}
.node.type-craft{ width:296px; }
.node.dragging{ box-shadow: 0 16px 40px rgba(0,0,0,.5); border-color:#3a4148; z-index:10; }

.node-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px 10px 12px;
  border-bottom:1px solid var(--border-soft);
  cursor:grab;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.node-head:active{ cursor:grabbing; }
.node.type-extract .node-head{ background: linear-gradient(180deg, var(--extract-dim), transparent); }
.node.type-craft .node-head{ background: linear-gradient(180deg, var(--craft-dim), transparent); }

.type-dot{
  width:9px; height:9px;
  border-radius:50%;
  flex:0 0 auto;
}
.type-extract .type-dot{ background: var(--extract); box-shadow:0 0 8px var(--extract); }
.type-craft .type-dot{ background: var(--craft); box-shadow:0 0 8px var(--craft); }

.node-title{
  flex:1 1 auto;
  min-width:0;
  background:transparent;
  border:none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight:600;
  font-size:14px;
  padding:2px 4px;
  border-radius:4px;
}
.node-title:hover{ background: rgba(255,255,255,.04); }
.node-title:focus{ outline:1px solid var(--border); background: rgba(255,255,255,.04); }

.node-delete{
  flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  border:none;
  background:transparent;
  color: var(--text-faint);
  font-size:13px;
  cursor:pointer;
  line-height:1;
}
.node-delete:hover{ background: rgba(229,104,107,.15); color: var(--bad); }

.node-body{ padding:12px; display:flex; flex-direction:column; gap:9px; }

.section-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.06em;
  color: var(--text-faint);
  margin-top:2px;
}
.add-row-btn{
  border:1px dashed var(--border);
  background:transparent;
  color: var(--text-dim);
  width:18px; height:18px;
  border-radius:5px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}
.add-row-btn:hover{ border-color: var(--text-dim); color:var(--text); }

.field-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.field-label{
  flex: 0 0 64px;
  font-size:11.5px;
  color: var(--text-dim);
}
.field-input{
  flex:1 1 auto;
  min-width:0;
  background: var(--panel-2);
  border:1px solid var(--border);
  color: var(--text);
  padding:6px 8px;
  border-radius: var(--radius-control);
  font-size:12.5px;
  font-family: var(--font-ui);
}
.field-input.num{ font-family: var(--font-mono); text-align:right; }
.field-input:focus{ outline:none; border-color:#454d55; background: var(--panel-3); }
.field-input:disabled{ opacity:.55; cursor:not-allowed; }
.field-suffix{ font-size:11px; color: var(--text-faint); flex:0 0 auto; }

.io-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  padding: 2px 0;
}
.io-row .field-input.name{ flex: 1.3 1 auto; }
.io-row .field-input.amt{ flex: 0.7 1 auto; }
.io-remove{
  flex:0 0 auto;
  width:18px; height:18px;
  border:none;
  background:transparent;
  color: var(--text-faint);
  cursor:pointer;
  font-size:12px;
  border-radius:4px;
}
.io-remove:hover{ background: rgba(229,104,107,.15); color: var(--bad); }

.node-divider{ height:1px; background: var(--border-soft); margin:2px 0; }

.readout{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:11.5px;
  color: var(--text-dim);
}
.readout .val{
  font-family: var(--font-mono);
  color: var(--text);
  font-size:12.5px;
}

.readout-list{ display:flex; flex-direction:column; gap:5px; }
.readout-line{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color: var(--text-dim);
}
.readout-line .rname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.readout-line .rval{ font-family: var(--font-mono); color: var(--text); font-size:11.5px; }
.status-dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.status-dot.ok{ background: var(--good); box-shadow:0 0 5px rgba(111,207,151,.7); }
.status-dot.surplus{ background: var(--warn); box-shadow:0 0 5px rgba(232,179,74,.6); }
.status-dot.short{ background: var(--bad); box-shadow:0 0 5px rgba(229,104,107,.6); }
.status-dot.idle{ background: #3a4148; }

.auto-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color: var(--text-dim);
}
.auto-row .switch{
  position:relative;
  width:32px; height:18px;
  border-radius:999px;
  background: var(--panel-2);
  border:1px solid var(--border);
  cursor:pointer;
  flex:0 0 auto;
}
.auto-row .switch::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:12px; height:12px;
  border-radius:50%;
  background: var(--text-faint);
  transition: left .12s ease, background .12s ease;
}
.auto-row input[type=checkbox]{ display:none; }
.auto-row input[type=checkbox]:checked + .switch{ border-color: var(--craft); background: var(--craft-dim); }
.auto-row input[type=checkbox]:checked + .switch::after{ left:16px; background: var(--craft); }

/* Ports */
.port-dot{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:13px; height:13px;
  border-radius:50%;
  background: var(--panel);
  border:2px solid var(--text-faint);
  cursor:crosshair;
  z-index:5;
}
.port-dot:hover{ transform: translateY(-50%) scale(1.25); }
.port-input{ left:-7px; }
.port-output{ right:-7px; }
.node.type-extract .port-output{ border-color: var(--extract); background: var(--extract-dim); }
.node.type-craft .port-input{ border-color: var(--craft); background: var(--craft-dim); }
.node.type-craft .port-output{ border-color: var(--craft); background: var(--craft-dim); }
.port-dot.is-pending{
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(255,255,255,.12);} 50%{ box-shadow:0 0 0 7px rgba(255,255,255,.03);} }

.out-port-row{ position:relative; padding-right:4px; }

/* ---------- SVG connections ---------- */

.conn-line{ fill:none; stroke-width:2; }
.conn-hit{ fill:none; stroke:transparent; stroke-width:16; }
.conn-line.status-ok{ stroke: var(--good); }
.conn-line.status-surplus{ stroke: var(--warn); }
.conn-line.status-short{ stroke: var(--bad); }
.conn-line.status-idle{ stroke:#4a525a; }
.conn-line.mismatch{ stroke-dasharray:5 4; stroke: var(--bad); }
.conn-label{
  font-family: var(--font-mono);
  font-size:10.5px;
  fill: var(--text-dim);
}
.conn-label-bg{ fill: var(--bg); opacity:.85; }
.temp-line{ stroke:#fff; stroke-width:2; stroke-dasharray:4 4; fill:none; opacity:.6; }

/* ---------- Help overlay ---------- */

.overlay{
  position:fixed; inset:0;
  background: rgba(6,8,10,.7);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
  padding:24px;
}
.overlay.hidden{ display:none; }
.overlay-card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  max-width:520px;
  width:100%;
  max-height:80vh;
  overflow:auto;
  padding:22px 24px 24px;
}
.overlay-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.overlay-head h2{
  font-family: var(--font-display);
  font-size:17px;
  margin:0;
}
.overlay-card ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:11px; }
.overlay-card li{ font-size:13px; line-height:1.55; color: var(--text-dim); }
.overlay-card li strong{ color: var(--text); }
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 2px; }
.legend-dot.ok{ background: var(--good); }
.legend-dot.surplus{ background: var(--warn); }
.legend-dot.short{ background: var(--bad); }

/* ---------- Responsive ---------- */

@media (max-width: 720px){
  #topbar{ flex-wrap:wrap; gap:10px; padding:10px 14px; }
  .brand-sub{ display:none; }
  .topbar-actions{ width:100%; justify-content:flex-start; }
  #zoomControls{ right:10px; bottom:10px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}