/* sysgraph.css — InstaSupply Live System Graph · dark ops room.
   Flat, calm by default; only live activity and problems glow. */

:root{
  --bg:#0B0F17; --panel:#121826; --panel-2:#0F1420; --node:#1A2233; --node-q:#151B28;
  --border:#243044; --border-hover:#33415A; --line:#1E2735;
  --text:#E6EAF2; --muted:#9AA7BD; --hint:#5E6B82;
  --dot:#243044;
  --blue:#3B82F6; --green:#2FD27A; --grey:#64748B; --amber:#F5A623; --red:#EF4444; --hot:#8B5CF6;
  --teal:#4FB3A0; --violet:#B98BE0;
  --wire:#2C384B; --wire-hi:#46577a; --token:#5B8DEF; --wire-trigger:#36506e; --wire-dep:#222d3e;
  --r:11px; --r-lg:14px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,monospace;
}

/* light mode — same structure, calm daylight palette */
:root[data-theme="light"]{
  --bg:#EDF1F7; --panel:#FFFFFF; --panel-2:#F4F6FB; --node:#FFFFFF; --node-q:#F6F8FC;
  --border:#DCE2EC; --border-hover:#B7C2D4; --line:#E7EBF3;
  --text:#1B2536; --muted:#566377; --hint:#8A97AB;
  --dot:#D3DBE7;
  --blue:#2F6FE6; --green:#179A57; --grey:#6B7787; --amber:#B97A12; --red:#DC2626; --hot:#7C5CD6;
  --teal:#2A9D8F; --violet:#8B6FC6;
  --wire:#C3CDDC; --wire-hi:#90A4C4; --token:#2F6FE6;
  --wire-trigger:#A7B6CF; --wire-dep:#D2DAE6;
}
:root[data-theme="light"] .node-ic{background:rgba(0,0,0,.045)}
:root[data-theme="light"] [data-layer="edit"] .viewport{background-color:#E6EAF2}
:root[data-theme="light"] .diff-added .diff-badge{color:#178a4e}
:root[data-theme="light"] .diff-changed .diff-badge{color:#946312}
:root[data-theme="light"] .diff-disabled .diff-badge{color:#c0392b}
:root[data-theme="light"] .diff-row.del{color:#b23b30}
:root[data-theme="light"] .diff-row.add{color:#1a7a45}
:root[data-theme="light"] .toast{box-shadow:0 10px 34px -16px rgba(20,30,50,.28)}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:400;
  font-size:14px; line-height:1.45; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font-family:inherit;color:inherit;cursor:pointer}
::selection{background:rgba(76,141,255,.3)}

/* ---------- app shell + canvas ---------- */
#app{position:fixed;inset:0;overflow:hidden}
.viewport{
  position:absolute;inset:0;overflow:hidden;cursor:grab;
  background-color:var(--bg);
  background-image:radial-gradient(circle at center, var(--dot) 1.1px, transparent 1.6px);
  background-size:calc(22px * var(--k,1)) calc(22px * var(--k,1));
  background-position:var(--px,0px) var(--py,0px);
}
.viewport.panning{cursor:grabbing}
.world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.wires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.wires path{pointer-events:stroke}

/* ---------- cluster frames ---------- */
.frame{
  position:absolute;border:1px solid var(--line);border-radius:18px;
  border-width:calc(1.1px * var(--inv,1));
  background:rgba(255,255,255,.012);transition:border-color .25s,background .25s;
}
.frame-label{
  position:absolute;left:16px;top:12px;display:flex;align-items:baseline;gap:8px;
  color:var(--muted);font-size:13px;font-weight:500;pointer-events:none;
  transform:scale(var(--inv,1));transform-origin:left top;
}
.frame-label .cnt{font-family:var(--mono);font-size:11px;color:var(--hint)}
[data-density="far"] .frame{border-color:var(--border);background:rgba(255,255,255,.022)}
[data-density="far"] .node{opacity:.4}
[data-density="far"] .node.s-running,[data-density="far"] .node.s-error{opacity:.62}
[data-density="far"] .frame-label{left:50%;top:50%;color:var(--text);
  transform:translate(-50%,-50%) scale(calc(var(--inv,1) * 1.12));transform-origin:center;
  background:var(--bg);border:1px solid var(--border);padding:4px 12px;border-radius:9px;z-index:5}
[data-density="far"] .frame-label .cnt{color:var(--muted)}

/* ---------- nodes ---------- */
.node{
  position:absolute;background:var(--node);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 13px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .18s,box-shadow .25s,opacity .2s,transform .2s;
  user-select:none;cursor:pointer;overflow:visible;
}
.node:hover{border-color:var(--border-hover)}
.node.sel{border-color:var(--border-hover);box-shadow:0 0 0 1px var(--border-hover)}
.node-head{display:flex;align-items:center;gap:9px;min-height:20px}
.node-ic{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:rgba(255,255,255,.04);color:var(--muted)}
.node-ic svg{width:14px;height:14px;display:block}
.node-title{font-size:13.5px;font-weight:500;letter-spacing:-0.01em;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-sub{font-family:var(--mono);font-size:10.5px;color:var(--hint);margin-top:-4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-metrics{display:flex;gap:18px}
.node-nodata{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--hint);opacity:.7;
  display:inline-flex;align-items:center;gap:6px}
.node-nodata::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hint);opacity:.5}
.insp-nodata{font-size:12px;color:var(--hint);padding:8px 10px;border:1px dashed var(--line);border-radius:8px;background:rgba(255,255,255,.02)}
.metric{display:flex;flex-direction:column;gap:1px;min-width:0}
.metric .v{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);line-height:1}
.metric .k{font-size:10.5px;color:var(--hint);white-space:nowrap}

/* status dot */
.sdot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;background:var(--grey)}
.s-live .sdot{background:var(--green)}
.s-running .sdot{background:var(--blue)}
.s-idle .sdot{background:var(--grey)}
.s-paused .sdot{background:var(--amber)}
.s-error .sdot{background:var(--red)}
.sdot.ping::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid currentColor;color:inherit;animation:ping 1.6s ease-out infinite;opacity:0}
.s-running .sdot.ping::after{border-color:var(--blue)}
.s-error .sdot.ping::after{border-color:var(--red)}
@keyframes ping{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* states */
.node.s-running{border-color:rgba(76,141,255,.6)}
.node.s-running.glow{box-shadow:0 0 0 1px rgba(76,141,255,.45),0 0 26px -6px rgba(76,141,255,.6);
  animation:runpulse 2.4s ease-in-out infinite}
@keyframes runpulse{0%,100%{box-shadow:0 0 0 1px rgba(76,141,255,.4),0 0 18px -8px rgba(76,141,255,.45)}
  50%{box-shadow:0 0 0 1px rgba(76,141,255,.6),0 0 30px -4px rgba(76,141,255,.7)}}
.node.s-paused{border-style:dashed;border-color:rgba(224,165,59,.5);opacity:.9}
.node.s-error{border-color:rgba(242,104,94,.65)}
.node.s-error.glow{box-shadow:0 0 0 1px rgba(242,104,94,.5),0 0 26px -6px rgba(242,104,94,.6);
  animation:errpulse 1.3s ease-in-out infinite}
@keyframes errpulse{0%,100%{box-shadow:0 0 0 1px rgba(242,104,94,.4),0 0 16px -8px rgba(242,104,94,.4)}
  50%{box-shadow:0 0 0 1px rgba(242,104,94,.75),0 0 30px -4px rgba(242,104,94,.75)}}

/* node types */
.node.service{background:var(--node-q);opacity:.82}
.node.service .node-ic{color:var(--grey)}
.node.service:hover{opacity:1}
.node.datastore{border-radius:7px 7px var(--r) var(--r)}
.node.datastore::before{content:'';position:absolute;left:11px;right:11px;top:6px;height:7px;
  border:1px solid var(--border);border-bottom:none;border-radius:50%/100% 100% 0 0;opacity:.7}
.node.trigger .node-ic{color:var(--amber)}
.node.agent .node-ic{color:var(--blue)}
.node.datastore .node-ic{color:var(--teal)}
.node.output .node-ic{color:var(--violet)}

/* ports */
.port{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--border-hover);top:50%;transform:translateY(-50%);transition:border-color .15s}
.port.in{left:-5px}.port.out{right:-5px}
.node:hover .port,.node.sel .port{border-color:var(--blue)}

/* near-density inline body */
.node-near{display:none;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:9px}
[data-density="near"] .node-near{display:flex}
/* cards stay compact; only a live (running/error) card shows its activity line, at any zoom */
.node.s-running .node-near,.node.s-error .node-near{display:flex}
.node-near .nr-row{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.node-near .nr-row .mono{font-family:var(--mono);color:var(--text);font-size:11px}
.node-near .nr-log{font-family:var(--mono);font-size:10px;color:var(--hint);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* far-density: collapse to chips */
[data-density="far"] .node{padding:9px 11px;gap:0}
[data-density="far"] .node-sub,[data-density="far"] .node-metrics,[data-density="far"] .port,
[data-density="far"] .node-near{display:none}
[data-density="far"] .node-title{font-size:14px}

/* GitHub-diff overlay states */
.node.diff-added{border-color:rgba(47,191,113,.6);border-style:solid}
.node.diff-changed{border-color:rgba(224,165,59,.55)}
.node.diff-disabled{opacity:.4;filter:saturate(.4)}
.diff-badge{position:absolute;top:-9px;right:10px;font-size:10px;font-weight:500;
  padding:2px 7px;border-radius:20px;font-family:var(--mono);letter-spacing:.02em}
.diff-added .diff-badge{background:rgba(47,191,113,.16);color:#7fe0a8;border:1px solid rgba(47,191,113,.4)}
.diff-changed .diff-badge{background:rgba(224,165,59,.16);color:#f0c878;border:1px solid rgba(224,165,59,.4)}
.diff-disabled .diff-badge{background:rgba(242,104,94,.16);color:#f5a39c;border:1px solid rgba(242,104,94,.4)}
@keyframes nodein{0%{transform:scale(.86)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
.node.animate-in{animation:nodein .55s cubic-bezier(.2,.8,.25,1)}

/* trace highlight + dim */
.world.tracing .node:not(.traced){opacity:.22}
.world.tracing .frame{opacity:.5}
.node.traced{border-color:var(--blue)}
.node.traced.hot{border-color:var(--green);box-shadow:0 0 0 1px rgba(47,191,113,.4),0 0 20px -6px rgba(47,191,113,.5)}
.world.dim-others .node:not(.hl):not(.sel){opacity:.4}

/* recently-ran ripple */
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(76,141,255,.5)}100%{box-shadow:0 0 0 16px rgba(76,141,255,0)}}
.node.ripple{animation:ripple 1.1s ease-out}
/* timeline replay: nodes light up as the playhead passes their events */
.node.lit{border-color:rgba(76,141,255,.55);box-shadow:0 0 0 1px rgba(76,141,255,.35),0 0 22px -6px rgba(76,141,255,.55)}
/* ports drawn in svg world space */
.port-dot{transition:opacity .2s;stroke:var(--border-hover);stroke-width:1.4}
.port-dot.out{fill:var(--border-hover)}
.port-dot.in{fill:var(--bg)}
[data-density="far"] .port-dot{opacity:0}

/* node anatomy: status label, freshness dot, hover quick-actions, why, last-run, filter dim */
.node-stat{display:flex;align-items:center;gap:6px;flex:none}
.fresh-dot{width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.5}
.stat-label{font-size:10.5px;color:var(--muted);font-family:var(--mono)}
.s-running .stat-label{color:var(--blue)}.s-live .stat-label{color:var(--green)}
.s-paused .stat-label{color:var(--amber)}.s-error .stat-label{color:var(--red)}.s-idle .stat-label{color:var(--hint)}
[data-density="far"] .stat-label{display:none}
.svc-mark{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--grey);letter-spacing:-.02em}
.node-actions{position:absolute;top:-14px;right:8px;display:none;gap:3px;z-index:7;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:3px}
.node:hover .node-actions{display:flex}
[data-density="far"] .node:hover .node-actions{display:none}
.node-actions button{width:23px;height:23px;border:none;background:transparent;border-radius:5px;
  color:var(--muted);font-size:11px;display:grid;place-items:center;line-height:1}
.node-actions button:hover{background:var(--node);color:var(--text)}
.nr-why{font-size:11px;color:var(--muted);line-height:1.45}
.lr-ok{color:var(--green)}.lr-warn{color:var(--amber)}.lr-run{color:var(--blue)}.lr-err{color:var(--red)}
.node.fdim{opacity:.15}
.node.fdim .node-actions{display:none}
.world.filtering .frame{opacity:.45}

/* breadcrumb · synced-ago · calls-in-flight · filter bar */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.breadcrumb a{color:var(--muted);cursor:pointer;text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb .sep{color:var(--hint)}.breadcrumb .cur{color:var(--text)}
.sync .ago{color:var(--hint);font-family:var(--mono);font-size:10.5px}
.inflight{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--blue);font-family:var(--mono);white-space:nowrap}
.inflight .sdot{background:var(--blue)}
.filterbar{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:33;display:flex;gap:7px;align-items:center;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px 8px}
.filterbar .fl-label{font-size:11px;color:var(--hint);font-family:var(--mono)}
.filterbar .fl-tag{font-size:12px;color:var(--text);background:var(--node);border:1px solid var(--border);border-radius:7px;padding:3px 10px}
.filterbar .fl-x{background:transparent;border:none;color:var(--hint);cursor:pointer;font-size:15px;padding:0 4px;line-height:1}
.filterbar .fl-x:hover{color:var(--text)}

/* ---------- wires ---------- */
.wire{fill:none;stroke:var(--wire);stroke-linecap:round;transition:stroke .2s,opacity .2s;pointer-events:none}
.wire-hit{fill:none;stroke:transparent;stroke-width:18;stroke-linecap:round;cursor:pointer;pointer-events:stroke}
.wire.k-data{stroke:var(--wire)}
.wire.k-trigger{stroke:var(--wire-trigger);stroke-dasharray:5 7;stroke-width:1.4 !important;opacity:.55}
.wire.k-dependency{stroke:var(--wire-dep);stroke-width:1.2 !important;opacity:.6}
.wire.inactive{opacity:.5}
.wire.hl,.wire.traced{stroke:var(--token);opacity:1 !important}
.wire.traced{stroke:#79a6ff}
.wire.newedge{stroke:var(--green) !important;stroke-dasharray:6 5;opacity:1 !important;animation:flowdash 1s linear infinite}
@keyframes flowdash{to{stroke-dashoffset:-22}}
.world.tracing .wire:not(.traced){opacity:.12}
/* animated flow tokens — only on active data wires while live */
.flow{fill:none;stroke:var(--token);stroke-linecap:round;stroke-dasharray:1.5 13;opacity:0;
  transition:opacity .3s}
.flow.on{opacity:.9;animation:flow 1.1s linear infinite;pointer-events:none}
@keyframes flow{to{stroke-dashoffset:-29}}
.wire-label{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));font-family:var(--mono);font-size:10.5px;
  color:var(--muted);background:var(--bg);padding:1px 6px;border-radius:5px;white-space:nowrap;
  pointer-events:none;border:1px solid var(--line);opacity:.92}
.wire-label.zero{color:var(--hint)}
.wire-label.traced{color:#9dbcff;border-color:rgba(76,141,255,.4)}
[data-density="far"] .wire-label{display:none}
.world.tracing .wire-label:not(.traced){opacity:.12}

/* ---- connect handle (drag-from-port to create a wire) ---- */
.conn-handle{position:absolute;right:-7px;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translateY(-50%) scale(.55);transform-origin:center;opacity:0;cursor:crosshair;
  background:var(--blue);border:2px solid var(--panel);transition:opacity .15s,transform .15s;z-index:8}
.node:hover .conn-handle{opacity:1;transform:translateY(-50%) scale(1)}
.conn-handle:hover{transform:translateY(-50%) scale(1.25)}
[data-density="far"] .conn-handle{display:none}
.conn-in{position:absolute;left:-5px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--bg);
  border:1.5px solid var(--border-hover);transform:translateY(-50%);opacity:0;transition:opacity .15s}
.node.conn-target{border-color:var(--green) !important;box-shadow:0 0 0 2px rgba(47,191,113,.4),0 0 26px -6px rgba(47,191,113,.5)}
.node.conn-target .conn-in{opacity:1;border-color:var(--green);background:var(--green)}
.world.connecting{cursor:crosshair}
.world.connecting .node{cursor:crosshair}
.ghost-wire{position:absolute;top:0;left:0;overflow:visible;pointer-events:none;z-index:6}
.ghost-wire path{fill:none;stroke:var(--green);stroke-width:2.2;stroke-dasharray:6 5;stroke-linecap:round;
  animation:flowdash 1s linear infinite}
.ghost-wire circle{fill:var(--green)}

/* ---- last-payload tooltip (wire hover) ---- */
.wire-payload{position:absolute;transform:translate(-50%,calc(-100% - 14px)) scale(var(--inv,1));
  transform-origin:bottom center;min-width:208px;max-width:280px;background:var(--panel);
  border:1px solid var(--border-hover);border-radius:10px;padding:0;pointer-events:none;z-index:9;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.55)}
.wire-payload .wp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 11px;border-bottom:1px solid var(--line)}
.wire-payload .wp-label{font-size:11.5px;font-weight:500;color:var(--text)}
.wire-payload .wp-t{font-family:var(--mono);font-size:10px;color:var(--hint)}
.wire-payload .wp-body{padding:8px 11px;display:flex;flex-direction:column;gap:4px}
.wire-payload .wp-row{display:flex;justify-content:space-between;gap:14px;font-size:11px}
.wire-payload .wp-k{color:var(--hint);font-family:var(--mono)}
.wire-payload .wp-v{color:var(--text);font-family:var(--mono);text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:160px}
.wire-payload .wp-foot{padding:5px 11px;border-top:1px solid var(--line);font-size:9.5px;color:var(--hint);
  font-family:var(--mono);letter-spacing:.02em}
[data-density="far"] .wire-payload{display:none}

/* ---- super-node (collapsed cluster) ---- */
.node.super{height:auto;cursor:pointer;border-style:solid;border-color:var(--border-hover);
  background:linear-gradient(180deg,var(--node),var(--node-q));gap:7px;justify-content:center}
.node.super::before,.node.super::after{content:'';position:absolute;left:7px;right:7px;border:1px solid var(--border);
  border-radius:var(--r);z-index:-1;background:var(--node-q)}
.node.super::before{top:5px;bottom:-5px;opacity:.8}
.node.super::after{top:9px;bottom:-9px;opacity:.45}
.node.super:hover{border-color:var(--blue)}
.super-stack{display:inline-flex;gap:2px;align-items:center}
.super-stack span{width:4px;height:13px;border-radius:1.5px;background:var(--muted);opacity:.55}
.super-stack span:nth-child(2){opacity:.8}.super-stack span:nth-child(3){opacity:1}
.super-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.super-expand{font-size:10.5px;color:var(--hint);font-family:var(--mono)}
.node.super.s-running{border-color:rgba(76,141,255,.6)}
.node.super.s-error{border-color:rgba(242,104,94,.6)}
.node.super.s-paused{border-color:rgba(224,165,59,.5)}
.frame-collapse{pointer-events:auto;margin-left:8px;width:18px;height:18px;border:1px solid var(--border);
  background:var(--panel);border-radius:5px;color:var(--muted);font-size:11px;line-height:1;cursor:pointer;
  display:inline-grid;place-items:center;transition:.15s}
.frame-collapse:hover{border-color:var(--border-hover);color:var(--text)}
[data-density="far"] .frame-collapse{display:none}

/* ---- collapsible timeline pill ---- */
.tl-pill{position:fixed;left:16px;bottom:16px;z-index:36;display:flex;align-items:center;gap:9px;
  padding:9px 14px;border:none;background:var(--panel);border:1px solid var(--border);border-radius:22px;
  color:var(--text);cursor:pointer;transition:border-color .15s;box-shadow:0 6px 20px -12px rgba(0,0,0,.5)}
.tl-pill:hover{border-color:var(--border-hover)}
.tl-pill .tl-pill-txt{font-size:12.5px;font-family:var(--mono);color:var(--muted)}
.tl-pill svg{color:var(--hint)}
.tl-pill .tl-pill-cta{font-size:11px;color:var(--hint);border-left:1px solid var(--border);padding-left:9px;margin-left:1px}
.tl-range{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px}
.tl-range button{background:transparent;border:none;border-radius:5px;padding:3px 9px;font-size:11px;
  font-family:var(--mono);color:var(--muted);cursor:pointer;transition:.15s}
.tl-range button.on{background:var(--node);color:var(--text)}
.tl-collapse{margin-left:auto;width:26px;height:26px;border:1px solid var(--border);background:var(--panel-2);
  border-radius:7px;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.15s}
.tl-collapse:hover{border-color:var(--border-hover);color:var(--text)}
.tl-day{position:absolute;top:9px;width:1px;height:16px;background:var(--border-hover);opacity:.6}

/* ---------- floating chrome (shared) ---------- */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg)}
.pill-btn{background:var(--node);border:1px solid var(--border);border-radius:8px;
  padding:6px 10px;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:7px;
  transition:border-color .15s,color .15s,background .15s}
.pill-btn:hover{border-color:var(--border-hover);color:var(--text)}
.pill-btn.active{color:var(--text);background:#1f293b;border-color:var(--border-hover)}
.kbd{font-family:var(--mono);font-size:10.5px;color:var(--hint);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;background:var(--panel-2)}

/* top strip */
.topstrip{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:14px;padding:8px 12px;height:48px;max-width:calc(100vw - 28px)}
.brand{display:flex;align-items:center;gap:9px;padding-right:4px}
.brand svg{width:22px;height:22px;color:var(--text)}
.brand b{font-weight:500;font-size:14px;letter-spacing:-0.01em;white-space:nowrap}
.brand .tag{font-size:11px;color:var(--hint);font-family:var(--mono);white-space:nowrap}
.vsep{width:1px;height:22px;background:var(--border)}
.sync{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.sync .sdot{background:var(--green)}
.sync .sdot.ping::after{border-color:var(--green)}
.layer-toggle{display:flex;gap:3px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:9px;padding:3px}
.layer-toggle button{background:transparent;border:none;border-radius:6px;padding:5px 11px;
  font-size:12.5px;color:var(--muted);transition:.15s;white-space:nowrap}
.layer-toggle button.on{background:var(--node);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.cmdk{display:flex;align-items:center;gap:8px}

/* zoom controls + minimap (right) */
.zoom-ctrl{position:fixed;top:74px;right:16px;z-index:35;display:flex;flex-direction:column;
  padding:4px;gap:2px}
.zoom-ctrl button{width:34px;height:34px;background:transparent;border:none;border-radius:8px;
  color:var(--muted);font-size:17px;display:grid;place-items:center;transition:.15s}
.zoom-ctrl button:hover{background:var(--node);color:var(--text)}
.zoom-ctrl .zlabel{font-family:var(--mono);font-size:10px;color:var(--hint);text-align:center;padding:2px 0}
.minimap{position:fixed;bottom:16px;right:16px;z-index:35;width:210px;height:120px;padding:0;
  overflow:hidden;border-radius:12px}
.minimap svg{width:100%;height:100%;display:block}
.mm-node{fill:var(--border-hover)}.mm-frame{fill:none;stroke:var(--line)}
.mm-view{fill:rgba(76,141,255,.12);stroke:var(--blue);stroke-width:2}
.mm-run{fill:var(--blue)}.mm-paused{fill:var(--amber)}.mm-err{fill:var(--red)}

/* legend (bottom-left) */
.legend{position:fixed;left:16px;bottom:16px;z-index:35;padding:11px 13px;max-width:230px}
.legend h4{margin:0 0 8px;font-size:11px;font-weight:500;color:var(--hint);letter-spacing:.02em}
.legend .lg-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin:5px 0}
.legend .lg-dot{width:8px;height:8px;border-radius:50%}
.legend .lg-line{width:18px;height:0;border-top:2px solid var(--wire)}
.legend .lg-line.tr{border-top-style:dashed;border-color:#36506e}
.legend .lg-line.dp{border-top-width:1px;border-color:#2a3548}
.legend.collapsed .legend-body{display:none}
.legend.raised{bottom:120px}
.legend-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer}

/* ---------- inspector ---------- */
.inspector{position:fixed;top:74px;right:16px;bottom:16px;width:372px;z-index:38;
  display:flex;flex-direction:column;overflow:hidden;animation:slidein .22s ease}
.inspector.with-mm{bottom:148px}
@keyframes slidein{from{transform:translateX(14px)}to{transform:none}}
.insp-head{padding:15px 16px;border-bottom:1px solid var(--border);display:flex;gap:11px;align-items:flex-start}
.insp-head .node-ic{width:30px;height:30px}.insp-head .node-ic svg{width:17px;height:17px}
.insp-title{flex:1;min-width:0}
.insp-title h3{margin:0;font-size:16px;font-weight:500;letter-spacing:-0.01em}
.insp-title .meta{font-family:var(--mono);font-size:11px;color:var(--hint);margin-top:2px}
.insp-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 8px;
  border-radius:20px;border:1px solid var(--border);color:var(--muted);font-family:var(--mono)}
.insp-close{background:transparent;border:none;color:var(--hint);font-size:18px;padding:2px 6px;border-radius:6px}
.insp-close:hover{background:var(--node);color:var(--text)}
.insp-body{flex:1;overflow-y:auto;padding:15px 16px;display:flex;flex-direction:column;gap:18px}
.insp-body::-webkit-scrollbar{width:8px}.insp-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.insp-sec h5{margin:0 0 9px;font-size:11px;font-weight:500;color:var(--hint);letter-spacing:.03em;
  text-transform:none;display:flex;align-items:center;gap:7px}
.insp-desc{font-size:13px;color:var(--muted);line-height:1.55}
.io-row{display:flex;gap:8px;flex-wrap:wrap}
.io-chip{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--border);border-radius:7px;padding:4px 9px;display:flex;align-items:center;gap:6px}
.io-chip .ar{color:var(--hint)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:12px}
.kv .k{color:var(--hint)}.kv .v{font-family:var(--mono);color:var(--text);text-align:right}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mc{background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px}
.mc .v{font-family:var(--mono);font-size:19px;font-weight:500}
.mc .k{font-size:11px;color:var(--hint);margin-top:2px}
.log{display:flex;flex-direction:column;gap:0;font-family:var(--mono);font-size:11px;
  border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--panel-2)}
.log-line{display:flex;gap:10px;padding:6px 11px;border-bottom:1px solid var(--line);align-items:baseline}
.log-line:last-child{border-bottom:none}
.log-line .t{color:var(--hint);flex:none;width:38px}
.log-line .m{color:var(--muted);flex:1;min-width:0}
.log-line.ok .lvl{color:var(--green)}.log-line.warn .lvl{color:var(--amber)}
.log-line.run .lvl{color:var(--blue)}.log-line.err .lvl{color:var(--red)}
.log-line .lvl{flex:none}
.activity-row{display:flex;gap:10px;font-size:12px;color:var(--muted);padding:3px 0}
.activity-row .t{font-family:var(--mono);font-size:11px;color:var(--hint);flex:none;width:30px}
.links{display:flex;flex-wrap:wrap;gap:7px}
.link-chip{font-size:11.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);
  border-radius:7px;padding:5px 9px;display:flex;align-items:center;gap:6px;text-decoration:none;transition:.15s}
.link-chip:hover{border-color:var(--border-hover);color:var(--text)}
.link-chip svg{width:12px;height:12px;opacity:.7}

/* tier-1 controls */
.controls{display:flex;flex-direction:column;gap:11px;padding:14px 16px;border-top:1px solid var(--border);
  background:var(--panel)}
.ctrl-row{display:flex;gap:9px;align-items:center}
.btn{border-radius:9px;padding:9px 13px;font-size:13px;font-weight:500;border:1px solid var(--border);
  background:var(--node);color:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:.15s;flex:1}
.btn:hover{border-color:var(--border-hover)}
.btn.solid{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.solid:hover{background:#5d98ff}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#1b1405}
.btn.ghost{background:transparent}
.btn.danger{color:var(--red);border-color:rgba(242,104,94,.4)}
.btn svg{width:15px;height:15px}
.seg{display:flex;gap:0;border:1px solid var(--border);border-radius:9px;overflow:hidden;flex:1}
.seg button{flex:1;background:transparent;border:none;padding:8px;font-size:12px;color:var(--muted);
  border-right:1px solid var(--border)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--node);color:var(--text)}
.slider-row{display:flex;flex-direction:column;gap:7px}
.slider-row .sl-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.slider-row .sl-head b{font-family:var(--mono);color:var(--text);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:var(--border);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--text);cursor:pointer;border:3px solid var(--panel)}
.ctrl-note{font-size:11px;color:var(--hint);text-align:center}
.tier-tag{font-size:10px;font-family:var(--mono);color:var(--hint);display:flex;align-items:center;gap:6px;margin-bottom:2px}

/* ---------- change drawer (tier 2) ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(7,10,16,.55)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{position:fixed;top:0;right:0;bottom:0;width:480px;max-width:94vw;z-index:51;
  background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;
  animation:drawerin .26s cubic-bezier(.2,.8,.2,1)}
@keyframes drawerin{from{transform:translateX(30px)}to{transform:none}}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--border)}
.review-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-family:var(--mono);
  color:var(--amber);background:rgba(224,165,59,.1);border:1px solid rgba(224,165,59,.35);
  padding:4px 10px;border-radius:20px;margin-bottom:12px}
.drawer-head h3{margin:0;font-size:17px;font-weight:500}
.drawer-head .sub{font-size:12px;color:var(--hint);font-family:var(--mono);margin-top:4px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.drawer-body::-webkit-scrollbar{width:8px}.drawer-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.summary{font-size:13.5px;color:var(--text);line-height:1.55}
.impact{display:flex;gap:10px;font-size:12.5px;color:var(--muted);background:var(--panel-2);
  border:1px solid var(--border);border-left:2px solid var(--amber);border-radius:9px;padding:11px 13px;line-height:1.5}
.diff{border:1px solid var(--border);border-radius:10px;overflow:hidden;font-family:var(--mono);font-size:12px}
.diff-row{display:flex;gap:9px;padding:8px 12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.diff-row .sign{flex:none;width:12px;text-align:center}
.diff-row.del{background:rgba(242,104,94,.07);color:#f0a59e}
.diff-row.del .sign{color:var(--red)}
.diff-row.add{background:rgba(47,191,113,.07);color:#8fe3b1}
.diff-row.add .sign{color:var(--green)}
.drawer-foot{padding:15px 20px;border-top:1px solid var(--border);display:flex;gap:10px;align-items:center}
.drawer-foot .note{font-size:11px;color:var(--hint);flex:1;font-family:var(--mono)}

/* ---------- changes queue overlay ---------- */
.queue{position:fixed;top:74px;right:16px;bottom:16px;width:430px;z-index:46;display:flex;flex-direction:column;
  animation:slidein .22s ease}
.queue-head{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.queue-head h3{margin:0;font-size:15px;font-weight:500}
.queue-head .cnt{font-family:var(--mono);font-size:11px;color:var(--hint)}
.queue-tabs{display:flex;gap:4px;padding:10px 14px;border-bottom:1px solid var(--border)}
.queue-tabs button{font-size:12px;color:var(--muted);background:transparent;border:1px solid transparent;
  border-radius:7px;padding:5px 10px}
.queue-tabs button.on{background:var(--node);border-color:var(--border);color:var(--text)}
.queue-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.queue-body::-webkit-scrollbar{width:8px}.queue-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.cr-card{border:1px solid var(--border);border-radius:11px;padding:12px 14px;background:var(--panel-2);
  cursor:pointer;transition:.15s}
.cr-card:hover{border-color:var(--border-hover)}
.cr-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cr-top .st{font-size:10px;font-family:var(--mono);padding:2px 7px;border-radius:20px;border:1px solid var(--border)}
.cr-top .st.pending{color:var(--amber);border-color:rgba(224,165,59,.4);background:rgba(224,165,59,.08)}
.cr-top .st.approved{color:var(--blue);border-color:rgba(76,141,255,.4);background:rgba(76,141,255,.08)}
.cr-top .st.merged{color:var(--green);border-color:rgba(47,191,113,.4);background:rgba(47,191,113,.08)}
.cr-top .pr{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--hint)}
.cr-card h4{margin:0 0 4px;font-size:13.5px;font-weight:500}
.cr-card .cr-sum{font-size:12px;color:var(--muted);line-height:1.5}
.cr-card .cr-meta{font-family:var(--mono);font-size:10.5px;color:var(--hint);margin-top:7px}

/* ---------- command palette ---------- */
.cmd-scrim{position:fixed;inset:0;z-index:60;background:rgba(7,10,16,.5);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh}
.cmd{width:560px;max-width:92vw;max-height:62vh;display:flex;flex-direction:column;overflow:hidden;
  animation:cmdin .18s ease}
@keyframes cmdin{from{transform:translateY(-8px)}to{transform:none}}
.cmd-input{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--border)}
.cmd-input svg{width:17px;height:17px;color:var(--hint)}
.cmd-input input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;
  font-family:var(--sans)}
.cmd-input input::placeholder{color:var(--hint)}
.cmd-list{overflow-y:auto;padding:7px}
.cmd-list::-webkit-scrollbar{width:8px}.cmd-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.cmd-group{font-size:10.5px;color:var(--hint);font-family:var(--mono);padding:8px 12px 5px;letter-spacing:.04em}
.cmd-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:13.5px}
.cmd-item .ci-ic{width:22px;height:22px;border-radius:6px;background:var(--panel-2);display:grid;place-items:center;
  color:var(--muted);flex:none}
.cmd-item .ci-ic svg{width:13px;height:13px}
.cmd-item .ci-sub{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--hint)}
.cmd-item.sel{background:var(--node)}
.cmd-item kbd{font-family:var(--mono);font-size:10px;color:var(--hint);border:1px solid var(--border);
  border-radius:4px;padding:1px 5px;margin-left:auto}

/* ---------- timeline scrubber ---------- */
.timeline{position:fixed;left:16px;right:246px;bottom:16px;z-index:36;padding:11px 16px 13px;
  display:flex;flex-direction:column;gap:8px;animation:slideup .22s ease}
@keyframes slideup{from{transform:translateY(12px)}to{transform:none}}
.tl-head{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.tl-play{width:30px;height:30px;border-radius:8px;background:var(--node);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text)}
.tl-play:hover{border-color:var(--border-hover)}
.tl-time{font-family:var(--mono);font-size:12px;color:var(--text)}
.tl-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--green);font-family:var(--mono)}
.tl-track-wrap{position:relative;height:34px;cursor:pointer}
.tl-track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:4px;background:var(--border)}
.tl-fill{position:absolute;left:0;top:15px;height:4px;border-radius:4px;background:var(--blue)}
.tl-tick{position:absolute;top:11px;width:2px;height:12px;border-radius:2px;background:var(--border-hover);transform:translateX(-1px)}
.tl-tick.hot{background:var(--green);height:16px;top:9px}
.tl-play-head{position:absolute;top:7px;width:3px;height:20px;border-radius:3px;background:var(--text);
  transform:translateX(-1.5px);box-shadow:0 0 8px rgba(230,234,242,.4)}
.tl-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--hint)}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:160px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--border);
  border-radius:11px;padding:11px 14px;font-size:13px;animation:toastin .24s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.6)}
@keyframes toastin{from{transform:translateY(10px)}to{transform:none}}
.toast .t-ic{width:18px;height:18px;flex:none;color:var(--green)}
.toast.amber .t-ic{color:var(--amber)}.toast.blue .t-ic{color:var(--blue)}
.toast .t-msg{color:var(--text)}.toast .t-msg b{font-weight:500}
.toast .t-undo{background:transparent;border:none;color:var(--blue);font-size:12.5px;font-weight:500;
  padding:4px 8px;border-radius:6px}
.toast .t-undo:hover{background:var(--node)}

/* ---------- add-node palette (edit layer) ---------- */
.addpalette{position:fixed;left:16px;top:74px;z-index:34;width:208px;padding:12px;
  animation:slidein-l .22s ease}
@keyframes slidein-l{from{transform:translateX(-12px)}to{transform:none}}
.addpalette h4{margin:0 0 4px;font-size:12px;font-weight:500}
.addpalette .ap-hint{font-size:11px;color:var(--hint);margin-bottom:11px;line-height:1.4}
.ap-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--border);
  border-radius:9px;background:var(--panel-2);margin-bottom:7px;cursor:pointer;transition:.15s}
.ap-item:hover{border-color:var(--border-hover)}
.ap-item .ap-ic{width:24px;height:24px;border-radius:6px;background:var(--node);display:grid;place-items:center;color:var(--muted)}
.ap-item .ap-ic svg{width:14px;height:14px}
.ap-item .ap-l{font-size:12.5px;font-weight:500}
.ap-item .ap-s{font-family:var(--mono);font-size:10px;color:var(--hint)}

/* edit-layer canvas affordance */
[data-layer="edit"] .viewport{background-color:#0a0e15}
[data-layer="edit"] .node{cursor:pointer}
.edit-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:33;font-size:11.5px;
  color:var(--hint);font-family:var(--mono);background:var(--panel);border:1px solid var(--border);
  padding:6px 12px;border-radius:20px}

/* ============ v2 additions ============ */

/* node flags: attention / human-waiting / deprecated */
.flag-badge{position:absolute;top:-9px;left:10px;font-size:10px;font-weight:500;padding:2px 7px;border-radius:20px;
  font-family:var(--mono);letter-spacing:.02em;z-index:6}
.fb-attention{background:rgba(224,165,59,.16);color:#f0c878;border:1px solid rgba(224,165,59,.45)}
.fb-human{background:rgba(139,108,224,.18);color:#c3a7f0;border:1px solid rgba(139,108,224,.45)}
.fb-deprecated{background:rgba(94,107,130,.18);color:var(--muted);border:1px solid var(--border-hover)}
.node.flag-attention{border-color:rgba(224,165,59,.5)}
.node.flag-human{border-color:rgba(139,108,224,.45)}
.node.flag-deprecated{opacity:.5}
.node.flag-deprecated .node-title{text-decoration:line-through;text-decoration-color:var(--hint)}
[data-density="far"] .flag-badge{display:none}

/* multi-select + marquee */
.node.multisel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 0 4px rgba(76,141,255,.18)}
.marquee{position:fixed;z-index:30;border:1px solid var(--blue);background:rgba(76,141,255,.1);border-radius:3px;pointer-events:none}
.bulkbar{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:44;display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:13px}
.bulk-count{font-size:12.5px;color:var(--text);font-weight:500;padding:0 4px}
.bulk-sep{width:1px;height:20px;background:var(--border)}
.bulk-btn{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);background:var(--node);
  border:1px solid var(--border);border-radius:8px;padding:7px 11px;transition:.15s}
.bulk-btn:hover{border-color:var(--border-hover);color:var(--text)}
.bulk-btn.amber{color:var(--amber);border-color:rgba(224,165,59,.4)}
.bulk-x{width:30px;height:30px;border:none;background:transparent;border-radius:8px;color:var(--hint);display:grid;place-items:center}
.bulk-x:hover{background:var(--node);color:var(--text)}

/* port hover tips + wire selection */
.port-tip{position:absolute;top:50%;transform:translateY(-50%) scale(var(--inv,1));font-family:var(--mono);font-size:9px;
  color:var(--hint);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 4px;opacity:0;
  transition:opacity .15s;pointer-events:none;z-index:7}
.port-tip.in{left:-30px;transform-origin:right center}.port-tip.out{right:-34px;transform-origin:left center}
.node:hover .port-tip{opacity:.85}
[data-density="far"] .port-tip,[data-density="mid"] .port-tip{display:none}
.wire.wsel{stroke:var(--blue) !important;opacity:1 !important;stroke-width:3 !important}

/* context menu */
.ctxmenu{position:fixed;z-index:62;min-width:188px;padding:5px;border-radius:10px;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.6);animation:cmdin .12s ease}
.ctx-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--text);cursor:pointer;text-align:left}
.ctx-item:hover{background:var(--node)}
.ctx-item.danger{color:var(--red)}
.ctx-ic{width:16px;display:grid;place-items:center;color:var(--muted)}
.ctx-item.danger .ctx-ic{color:var(--red)}
.ctx-item kbd{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--hint);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.ctx-sep{height:1px;background:var(--border);margin:4px 6px}

/* top strip extras */
/* hover tooltips for icon buttons (what each does) */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--node);border:1px solid var(--border-hover);
  border-radius:7px;padding:5px 9px;font-size:11.5px;line-height:1;color:var(--text);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:65;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
.tip::before{content:'';position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--border-hover);opacity:0;transition:opacity .14s;z-index:65}
.tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
.tip:hover::before{opacity:1}
.tip.tip-r::after{left:auto;right:0;transform:translateX(0) translateY(4px)}
.tip.tip-r::before{left:auto;right:11px;transform:none}
.tip.tip-r:hover::after{transform:translateX(0) translateY(0)}
.tip.tip-side::after{top:50%;left:auto;right:calc(100% + 9px);transform:translateY(-50%) translateX(4px)}
.tip.tip-side::before{top:50%;left:auto;right:calc(100% + 4px);transform:translateY(-50%);border-color:transparent;border-left-color:var(--border-hover)}
.tip.tip-side:hover::after{transform:translateY(-50%) translateX(0)}
.env-badge{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--green);
  background:rgba(47,191,113,.12);border:1px solid rgba(47,191,113,.35);border-radius:5px;padding:2px 6px;margin-left:2px}
.pill-btn.icon-btn{padding:7px 9px}
.notif-btn{position:relative}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-family:var(--mono);display:grid;place-items:center;font-weight:600}
.avatar-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border-hover);background:var(--node);
  color:var(--text);font-size:12px;font-weight:600;font-family:var(--mono);cursor:pointer;flex:none}
.avatar-btn:hover{border-color:var(--blue)}
.sync.stale{color:var(--amber)}

/* notification center */
.notif{position:fixed;top:74px;right:16px;width:340px;max-height:70vh;z-index:48;display:flex;flex-direction:column;
  border-radius:13px;overflow:hidden;animation:slidein .2s ease}
.notif-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border)}
.notif-head h3{margin:0;font-size:14px;font-weight:500;flex:1}
.notif-readall{background:transparent;border:none;color:var(--blue);font-size:11.5px;cursor:pointer}
.notif-body{overflow-y:auto;padding:6px}
.notif-row{display:flex;gap:11px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;
  padding:10px 11px;cursor:pointer}
.notif-row:hover{background:var(--panel-2)}
.notif-row.unread{background:rgba(76,141,255,.05)}
.notif-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--panel-2);color:var(--muted)}
.notif-ic.k-hot{color:var(--hot);background:rgba(139,108,224,.12)}
.notif-ic.k-pr{color:var(--green);background:rgba(47,191,113,.12)}
.notif-ic.k-attention{color:var(--amber);background:rgba(224,165,59,.12)}
.notif-ic.k-warn{color:var(--amber);background:rgba(224,165,59,.12)}
.notif-txt{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px}
.notif-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
.notif-body-txt{font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.notif-t{font-family:var(--mono);font-size:10px;color:var(--hint);margin-top:4px}
.empty-mini{text-align:center;color:var(--hint);font-size:12.5px;padding:28px 0}

/* settings + shortcuts modals */
.settings,.shsheet{width:620px;max-width:94vw;max-height:78vh;display:flex;flex-direction:column;overflow:hidden;
  border-radius:14px;animation:cmdin .16s ease}
.settings-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.settings-head h3{margin:0;font-size:16px;font-weight:500}
.settings-wrap{display:flex;min-height:340px}
.settings-nav{width:150px;border-right:1px solid var(--border);padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.settings-nav button{text-align:left;background:transparent;border:none;border-radius:8px;padding:9px 12px;font-size:13px;
  color:var(--muted);cursor:pointer;text-transform:capitalize}
.settings-nav button.on{background:var(--node);color:var(--text)}
.settings-body{flex:1;padding:18px 22px;overflow-y:auto}
.settings-lead{font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.conn-list{display:flex;flex-direction:column;gap:8px}
.conn-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
.conn-mark{width:30px;height:30px;border-radius:8px;background:var(--node);display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);flex:none}
.conn-meta{flex:1;min-width:0}
.conn-label{font-size:13px;font-weight:500}
.conn-detail{font-family:var(--mono);font-size:11px;color:var(--hint);margin-top:1px}
.conn-state{display:flex;align-items:center;gap:6px;font-size:11.5px;font-family:var(--mono);color:var(--green)}
.conn-connect{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--blue);background:transparent;
  border:1px solid rgba(76,141,255,.4);border-radius:7px;padding:5px 10px;cursor:pointer}
.set-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.set-row-txt{flex:1}.set-title{font-size:13.5px;font-weight:500}.set-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.set-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);background:var(--node);
  border:1px solid var(--border);border-radius:8px;padding:7px 12px;cursor:pointer}
.set-toggle:hover{border-color:var(--border-hover)}
.env-pick{font-family:var(--mono);font-size:11px;color:var(--green);background:rgba(47,191,113,.12);
  border:1px solid rgba(47,191,113,.3);border-radius:6px;padding:4px 9px}
.switch{width:40px;height:23px;border-radius:13px;border:1px solid var(--border);background:var(--panel-2);position:relative;cursor:pointer;transition:.18s;flex:none}
.switch span{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--muted);transition:.18s}
.switch.on{background:var(--blue);border-color:var(--blue)}.switch.on span{left:19px;background:#fff}
.settings-foot{font-family:var(--mono);font-size:10.5px;color:var(--hint);margin-top:18px;line-height:1.6}

/* shortcuts grid */
.sh-grid{padding:16px 20px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.sh-row{display:flex;align-items:center;gap:12px}
.sh-keys{display:flex;gap:4px;flex:none;min-width:96px}
.sh-keys kbd{font-family:var(--mono);font-size:11px;color:var(--text);background:var(--panel-2);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:5px;padding:3px 7px;min-width:20px;text-align:center}
.sh-label{font-size:12.5px;color:var(--muted)}

/* user menu */
.usermenu{position:fixed;top:74px;right:16px;width:248px;z-index:48;padding:6px;border-radius:12px;animation:slidein .18s ease}
.um-head{display:flex;align-items:center;gap:11px;padding:10px 11px}
.um-avatar{width:34px;height:34px;border-radius:50%;background:var(--node);border:1px solid var(--border-hover);display:grid;place-items:center;font-weight:600;font-family:var(--mono)}
.um-name{font-size:13.5px;font-weight:500}.um-mail{font-size:11px;color:var(--hint);font-family:var(--mono)}

/* first-run tour */
.tour-scrim{position:fixed;inset:0;z-index:64;background:rgba(7,10,16,.62)}
.tour-spot{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(7,10,16,.62);border:1.5px solid var(--blue);
  transition:.25s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tour-card{position:fixed;width:340px;max-width:90vw;padding:18px 20px;border-radius:13px;z-index:65;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.6);animation:cmdin .2s ease}
.tour-step{font-family:var(--mono);font-size:10.5px;color:var(--hint);margin-bottom:8px}
.tour-card h3{margin:0 0 7px;font-size:16px;font-weight:500}
.tour-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.tour-skip{background:transparent;border:none;color:var(--hint);font-size:12px;cursor:pointer}
.tour-nav{display:flex;gap:8px}
.tour-nav .btn{flex:none;padding:8px 16px}

/* banner */
.banner{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:43;display:flex;align-items:center;gap:11px;
  padding:9px 12px 9px 14px;border-radius:11px;font-size:12.5px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--border);box-shadow:0 8px 28px -14px rgba(0,0,0,.5);animation:slideup .22s ease}
.banner .bn-ic{flex:none;display:grid;place-items:center}
.banner.hot{border-color:rgba(139,108,224,.5)}.banner.hot .bn-ic{color:var(--hot)}
.banner.error{border-color:rgba(224,165,59,.5)}.banner.error .bn-ic{color:var(--amber)}
.banner.readonly{border-color:var(--border-hover)}.banner.readonly .bn-ic{color:var(--muted)}
.bn-msg{color:var(--text)}.bn-msg b{font-weight:500}
.bn-action{background:var(--node);border:1px solid var(--border);border-radius:7px;color:var(--text);font-size:12px;padding:5px 11px;cursor:pointer}
.bn-action:hover{border-color:var(--border-hover)}
.bn-x{width:24px;height:24px;border:none;background:transparent;color:var(--hint);border-radius:6px;display:grid;place-items:center;cursor:pointer}
.bn-x:hover{background:var(--node);color:var(--text)}

/* skeleton boot */
.skeleton{position:fixed;inset:0;z-index:80;background:var(--bg)}
.sk-strip{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:520px;max-width:90vw;height:48px;border-radius:14px;background:var(--panel);overflow:hidden}
.sk-node{position:absolute;width:200px;height:110px;border-radius:11px;background:var(--panel);overflow:hidden}
.sk-strip::after,.sk-node::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-boot{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:12px;color:var(--hint)}
.sk-spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--blue);animation:spin 0.8s linear infinite}

/* kiosk / TV mode: hide all chrome, show only the graph */
[data-kiosk="1"] .topstrip,[data-kiosk="1"] .zoom-ctrl,[data-kiosk="1"] .legend,[data-kiosk="1"] .minimap,
[data-kiosk="1"] .timeline,[data-kiosk="1"] .tl-pill,[data-kiosk="1"] .filterbar,[data-kiosk="1"] .inspector,
[data-kiosk="1"] .banner,[data-kiosk="1"] .addpalette,[data-kiosk="1"] .edit-hint{display:none !important}
.kiosk-exit{position:fixed;bottom:16px;right:16px;z-index:90;font-family:var(--mono);font-size:11px;color:var(--hint);
  background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:7px 13px;cursor:pointer;opacity:.4;transition:.15s}
.kiosk-exit:hover{opacity:1;color:var(--text)}

/* read-only: visually disable controls that would change the system */
[data-readonly="1"] .controls,[data-readonly="1"] .node-actions,[data-readonly="1"] .addpalette,
[data-readonly="1"] .conn-handle,[data-readonly="1"] .frame-collapse{opacity:.4;pointer-events:none;filter:saturate(.5)}

/* timeline speed + workflows + collapsible sections */
.tl-speed{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:7px;padding:2px}
.tl-speed button{background:transparent;border:none;border-radius:5px;padding:3px 7px;font-size:10.5px;font-family:var(--mono);color:var(--muted);cursor:pointer}
.tl-speed button.on{background:var(--node);color:var(--text)}
.wf-list{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:11px}
.wf-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px}
.wf-row:hover{background:var(--panel-2)}
.wf-name{color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-cron{color:var(--hint);font-size:10px}.wf-t{color:var(--hint);font-size:10px;width:34px;text-align:right}
.sec-head{cursor:pointer;user-select:none;display:flex;align-items:center;gap:7px}
.sec-caret{color:var(--hint);font-size:9px;width:9px}
.sec-count{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--hint)}
.insp-sec.closed .sec-head{margin-bottom:0}

/* accessibility: focus rings + reduced motion */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.node:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
[data-motion="reduce"] *{animation:none !important;transition:none !important}
[data-motion="reduce"] .flow{display:none !important}
@media (prefers-reduced-motion: reduce){ .flow{animation:none}}

/* misc */
.hide{display:none !important}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* ---- responsive: tablet (incl. iPad portrait) ---- */
@media (max-width:1024px){
  .topstrip{gap:8px;padding:6px 9px;height:44px;max-width:calc(100vw - 14px);overflow-x:auto;overflow-y:hidden}
  .topstrip::-webkit-scrollbar{display:none}
  .brand .tag{display:none}
  .sync{display:none}
  .vsep{display:none}
  .layer-toggle button{padding:5px 9px;font-size:12px}
  .cmdk .kbd{display:none}
  .inspector,.queue{width:calc(100vw - 24px)}
  .minimap,.legend{display:none}
  .zoom-ctrl{top:64px}
  .filterbar{top:64px}
  .timeline{right:16px}
}
/* ---- responsive: phone ---- */
@media (max-width:560px){
  .topstrip{left:8px;right:8px;transform:none;max-width:none;width:auto;justify-content:flex-start;
    -webkit-overflow-scrolling:touch;gap:6px;padding:5px 7px;height:42px}
  .brand b{font-size:13px}
  .layer-toggle button{padding:4px 7px;font-size:11.5px}
  .inspector,.queue{left:0;right:0;width:100vw;top:auto;bottom:0;height:76vh;border-radius:16px 16px 0 0}
  .inspector.with-mm{bottom:0}
  .drawer{width:100vw}
  .timeline{left:8px;right:8px}
  .tl-pill{left:8px;bottom:8px}
  .zoom-ctrl{top:56px;right:8px}
  .filterbar{top:56px;width:calc(100vw - 16px)}
}