/* TokenValue (tokenvalue.si) — relationship graph (/network/), drawn by graph.js. Every class starts with .ng-.
   The map is always dark, whatever the site theme (PRD section 2): in the light theme only the top bar turns light.
   Its colours are the --ng-* tokens below, from the brand navy #16142b, purple #6b4eff and gold #ffc53d. */

.ng-main {
  --ng-bg-0: #1a1240;
  --ng-bg-1: #0e0b1c;
  --ng-bg-2: #05040d;
  --ng-token: #ffc53d;
  --ng-person: #6ee7f9;
  --ng-wallet: #8fa3c7;
  --ng-inst: #a78bfa;
  --ng-gold: #ffc53d;
  /* fund flows: money in and money out, away from the type colours and from the stance's up and down */
  --ng-in: #4ade80;
  --ng-out: #f87171;
  /* fund flows through a protocol (owner, 2026-11-01: "要用不同颜色来标注跨链，swap等协议情况"): the line to or from it, and its dot */
  --ng-k-swap: #22d3ee;
  --ng-k-bridge: #c084fc;
  --ng-k-cross: #c084fc;
  --ng-k-exchange: #f8fafc;  /* white (owner, 2026-11-03: amber was too like Bitcoin's orange) */
  --ng-k-lending: #a3e635;  /* lime (owner, 2026-11-03: orange was too like Bitcoin's) */
  --ng-k-mixer: #f472b6;
  /* a KOL's stance: the site's dark-theme green and red, as up and down (swapped below when the reader picks red for up);
     away from the type colours and the gold of selection, and at least 6:1 on the map's background */
  --ng-pos: #3ccf8a;
  --ng-neg: #ff6b62;
  --ng-label: #eeebff;
  --ng-label-2: #c0b9e2;
  --ng-label-dim: #9f98c6;
  --ng-outline: #0b0920;
  --ng-fg: #eeebff;
  --ng-fg-2: #c0b9e2;
  --ng-fg-3: #a29bc9;
  --ng-accent: #b4a5ff;
  --ng-panel: #141026; /* opaque: map labels never show through a panel */
  --ng-panel-solid: #161229;
  --ng-panel-2: rgb(38 31 78 / 0.72);
  --ng-line: rgb(154 134 255 / 0.24);
  --ng-line-2: rgb(154 134 255 / 0.4);
  --ng-shadow: 0 10px 32px rgb(3 2 10 / 0.55);
  /* panel text: the site's sizes less one step; body text stays at 12px or more */
  --ng-fs-xs: 12px;
  --ng-fs-sm: 12px;
  --ng-fs-md: 13px;
  --ng-fs-lg: 15px;
  color-scheme: dark;
}
.ng-main.ng-on { overflow: hidden; }
:root[data-updown="cn"] .ng-main { --ng-pos: #ff6b62; --ng-neg: #3ccf8a; }

/* ---------- the map ---------- */
.ng-root {
  position: absolute; inset: 0; overflow: hidden; color: var(--ng-fg); font-family: var(--font-sans);
  background:
    radial-gradient(38% 34% at 28% 34%, rgb(107 78 255 / 0.12), transparent 72%),
    radial-gradient(34% 30% at 74% 64%, rgb(192 78 255 / 0.06), transparent 72%),
    radial-gradient(30% 26% at 62% 18%, rgb(42 212 255 / 0.05), transparent 72%),
    radial-gradient(farthest-corner at 50% 50%, var(--ng-bg-0) 0%, var(--ng-bg-1) 48%, var(--ng-bg-2) 100%);
}
.ng-sky, .ng-fx, .ng-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ng-sky, .ng-fx { pointer-events: none; }
.ng-svg { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden; }
.ng-root.is-panning .ng-svg { cursor: grabbing; }
.ng-world.ng-fade-in { animation: ng-fade 0.15s ease-out; }
@keyframes ng-fade { from { opacity: 0; } to { opacity: 1; } }

/* lines: centre to dot; 25% inner, 12% outer, 90% when lit. Solid = official, filing or news; dashed = on-chain or
   database; dotted = derived. */
.ng-line { stroke: var(--ng-label-2); stroke-width: 1; stroke-opacity: 0.25; fill: none; transition: stroke-opacity 0.2s; }
.ng-line.tier-outer { stroke-opacity: 0.12; }
.ng-line.t-token { stroke: var(--ng-token); }
.ng-line.t-person { stroke: var(--ng-person); }
.ng-line.t-inst { stroke: var(--ng-inst); }
.ng-line.t-wallet { stroke: var(--ng-wallet); }
.ng-line.ls-dashed { stroke-dasharray: 5 4; }
.ng-line.ls-dotted { stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.4; }
.ng-line.is-lit { stroke-opacity: 0.9; transition-duration: 0.15s; }
/* fund flows (owner, 2026-10-21): a band of light per counterparty, green for money in and red for money out, as thick
   as the value moved (graph.js nodeEl, flowLine): a wide faint halo, the band, and light running along it the way the
   money went (graph.js FLOW_RUN: a dash every 20px at 40px a second); the arrowhead at the receiver's end. Money the
   other way with the same counterparty: a thin line beside it, in its own colour. */
.ng-line.is-flow { stroke-opacity: 1; transition: opacity 0.2s; }
.ng-line.is-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ng-line.is-flow.dir-in, .ng-fl-back.dir-in { stroke: var(--ng-in); color: var(--ng-in); }
.ng-line.is-flow.dir-out, .ng-fl-back.dir-out { stroke: var(--ng-out); color: var(--ng-out); }
/* money neither way of the selected address (graph.js paintFlows) */
.ng-line.is-flow.dir-none, .ng-fl-back.dir-none { stroke: var(--ng-label-2); color: var(--ng-label-2); }
.ng-line.is-flow.dir-none .ng-fl-band { stroke-opacity: 0.3; }
.ng-line.is-flow.dir-none .ng-fl-run, .ng-line.is-flow .ng-fl-back.dir-none .ng-fl-run { stroke: #e5e7eb; stroke-opacity: 0.4; }
.ng-label .ng-note-l.dir-none { fill: var(--ng-label-2); }
.ng-lg-line.is-flow.dir-none { border-top-color: var(--ng-label-2); }
.ng-fl-halo { stroke-opacity: 0.1; transition: stroke-opacity 0.2s; }
.ng-fl-band { stroke-opacity: 0.5; transition: stroke-opacity 0.2s; }
.ng-fl-thin { stroke-opacity: 0.7; }
.ng-fl-run { stroke-opacity: 0.75; stroke-dasharray: 5 15; animation: ng-run 0.5s linear infinite; }
.ng-line.is-flow.dir-in .ng-fl-run, .ng-line.is-flow .ng-fl-back.dir-in .ng-fl-run { stroke: #dcfce7; }
.ng-line.is-flow.dir-out .ng-fl-run, .ng-line.is-flow .ng-fl-back.dir-out .ng-fl-run { stroke: #fee2e2; }
@keyframes ng-run { to { stroke-dashoffset: -20; } }
.ng-line.is-flow .ng-flow-arr { stroke: none; fill: currentColor; fill-opacity: 0.9; }
.ng-line.is-flow:is(.is-lit, .in-sec) .ng-fl-halo { stroke-opacity: 0.22; }
.ng-line.is-flow:is(.is-lit, .in-sec) .ng-fl-band { stroke-opacity: 0.9; }
.ng-line.is-flow:is(.is-lit, .in-sec) .ng-fl-thin { stroke-opacity: 1; }
.ng-root.has-sec .ng-line.is-flow:not(.in-sec) { opacity: 0.12; }
/* chain mode: a line whose step is not read (or no longer has it) is grey and dashed */
.ng-line.is-flow.is-none { stroke: var(--ng-label-2); }
.ng-line.is-flow.is-none :is(.ng-fl-halo, .ng-fl-run, .ng-flow-arr) { display: none; }
.ng-line.is-flow.is-none .ng-fl-band { stroke-dasharray: 3 5; stroke-opacity: 0.45; }
.ng-tree-l { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 3px; max-height: 32vh; overflow: auto; }
.ng-tree-l .ng-check { display: grid; grid-template-columns: auto minmax(84px, 1fr) auto; gap: 6px; width: 100%; }
.ng-tree-n { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ng-tree-nm { font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ng-tree .ng-btn { margin: 4px 6px 8px 0; }
.ng-tree-all { margin: 2px 0 4px; font-size: var(--ng-fs-xs); }
.ng-tree-b.dir-in { border-color: var(--ng-in); }
.ng-tree-b.dir-out { border-color: var(--ng-out); }
.ng-flow-tok { min-height: 30px; border-radius: 9px; border: 1px solid var(--ng-line); background: var(--ng-panel); color: var(--ng-fg); padding: 2px 6px; font: inherit; font-size: var(--ng-fs-sm); }
.ng-flow-seq, .ng-flow-txm { padding: 4px 8px; border-radius: 9px; border: 1px solid var(--ng-line); background: var(--ng-panel); font-size: var(--ng-fs-sm); }
.ng-flow-min { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border-radius: 9px; border: 1px solid var(--ng-line);
  background: var(--ng-panel); font-size: var(--ng-fs-sm); color: var(--ng-fg-2); }
.ng-flow-min-i { width: 84px; min-height: 26px; border-radius: 7px; border: 1px solid var(--ng-line); background: var(--ng-panel-2); color: var(--ng-fg);
  padding: 2px 6px; font: inherit; font-variant-numeric: tabular-nums; }
.ng-flow-min-n { color: var(--ng-fg-3); padding-right: 4px; }
.ng-level-h { margin-top: 10px; }
.ng-level { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
/* the trace page (owner, 2026-10-30: graph.js CHAIN_PAGE): no centre types or axes to pick; before an address is entered,
   only the address box in the middle of the map */
.ng-root.is-chain :is(.ng-cats, .ng-axes, .ng-mode) { display: none; }
.ng-root.is-start :is(.ng-console, .ng-trail, .ng-flowbar, .ng-legend, .ng-ctrl, .ng-dupbar, .ng-tx, .ng-replay, .ng-tip) { display: none; }
/* the panorama (graph.js renderPanorama): its own map over the sky, the trace map's panels hidden */
.ng-root.is-pano :is(.ng-console, .ng-trail, .ng-flowbar, .ng-legend, .ng-ctrl:not(.ng-pano-ctrl), .ng-dupbar, .ng-replay, .ng-tip, .ng-svg, .ng-card:not(.ng-pano-card), .ng-walb, .ng-wal, .ng-empty) { display: none; }
.ng-pano { position: absolute; inset: 0; z-index: 3; }
.ng-pano[hidden] { display: none; }
.ng-pano-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ng-pano-svg:active { cursor: grabbing; }
.ng-pano-head {
  position: absolute; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 7px 14px;
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow);
  color: var(--ng-fg); font-size: var(--ng-fs-sm);
}
.ng-pano-t { color: #fff; font-size: var(--ng-fs-md); }
.ng-pano-prog { color: var(--ng-gold); }
.ng-pano-opt { display: inline-flex; align-items: center; gap: 5px; color: var(--ng-fg-2); }
.ng-pano-opt select { min-height: 26px; border-radius: 7px; border: 1px solid var(--ng-line-2); background: var(--ng-panel-2); color: var(--ng-fg); font: inherit; }
.ng-pano-frozen { color: #7dd3fc; }
.ng-pano-legend {
  position: absolute; z-index: 4; left: 12px; bottom: 12px; max-width: 220px; padding: 8px 10px; font-size: var(--ng-fs-xs); color: var(--ng-fg-2);
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow);
}
.ng-pano-legend > summary { cursor: pointer; color: var(--ng-fg); font-weight: 600; }
.ng-pano-legend[open] > summary { margin-bottom: 5px; }
.ng-pano-legend ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
@media (max-width: 767.98px) {
  .ng-pano-head { top: 8px; width: calc(100% - 16px); box-sizing: border-box; padding: 5px 8px; gap: 2px 8px; font-size: var(--ng-fs-xs); }
  .ng-pano-legend { left: 8px; bottom: 8px; }
  .ng-pano-ctrl { right: 8px; bottom: 8px; }
}
.ng-pano-legend li { display: flex; align-items: center; gap: 7px; }
.ng-pano-sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ng-pano-mk { width: 10px; height: 10px; flex: none; border: 1.5px solid var(--ng-fg-2); }
.ng-pano-mk.is-ex { border-radius: 2px; background: var(--ng-k-exchange); border-color: var(--ng-k-exchange); }
.ng-pano-mk.is-svc { transform: rotate(45deg) scale(0.85); }
.ng-pano-mk.is-frozen { border-radius: 50%; border-color: #7dd3fc; box-shadow: 0 0 0 2px rgb(125 211 252 / 0.35); }
.ng-pano-mk.is-pending { border-radius: 50%; border-style: dashed; }
.ng-pano-ln { width: 18px; height: 0; flex: none; border-top: 2px dashed #c4b5fd; }
.ng-pano-ln.is-swap { border-top: 1.5px dashed var(--ng-fg-3); }
.ng-pano-ctrl { right: 12px; bottom: 12px; z-index: 4; }
.ng-root.is-pano .ng-pano-ctrl { display: grid; gap: 6px; }
.ng-pano-card { z-index: 5; }
.ng-pe { fill: none; stroke: var(--c, #9aa3b5); stroke-opacity: 0.5; stroke-linecap: round; }
.ng-pe:hover { stroke-opacity: 0.9; }
.ng-pe.is-cross { stroke: #c4b5fd; stroke-dasharray: 8 6; stroke-opacity: 0.8; }
.ng-pe.is-swap { stroke: var(--ng-fg-3); stroke-dasharray: 3 4; stroke-opacity: 0.7; }
/* which way the money went, and the selected address's money in and out (owner, 2026-11-02) */
.ng-pl { --pa: var(--c, #9aa3b5); }
.ng-pa { fill: var(--pa); fill-opacity: 0.75; stroke: none; pointer-events: none; }
.ng-pano-g.has-sel .ng-pl:not(.is-in, .is-out) { opacity: 0.12; }
.ng-pano-g.has-sel .ng-pn:not(.is-sel, .is-near) { opacity: 0.35; }
.ng-pano-ln.is-in { border-top: 2.5px solid var(--ng-in); }
.ng-pano-ln.is-out { border-top: 2.5px solid var(--ng-out); }
.ng-pano-side { margin: 10px 0 4px; font-size: var(--ng-fs-sm); }
.ng-pano-side.is-in { color: var(--ng-in); }
.ng-pano-side.is-out { color: var(--ng-out); }
.ng-pn { cursor: pointer; outline: none; }
.ng-pn :is(circle, rect, path) { fill: var(--c); fill-opacity: 0.85; stroke: #0b0920; stroke-width: 1.5; }
.ng-pn .ng-pn-stack { fill-opacity: 0.25; stroke: var(--c); stroke-dasharray: 3 3; }
.ng-pn.is-root :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-gold); stroke-width: 3; }
.ng-pn.is-frozen :is(circle, rect, path):not(.ng-pn-stack) { stroke: #7dd3fc; stroke-width: 3; }
.ng-pn.is-pending :is(circle, rect, path) { fill-opacity: 0.25; stroke: var(--c); stroke-dasharray: 3 3; }
.ng-pn.is-sel :is(circle, rect, path):not(.ng-pn-stack), .ng-pn:focus-visible :is(circle, rect, path) { stroke: #fff; stroke-width: 3; }
.ng-pn text { font-size: 12px; paint-order: stroke; stroke: #0b0920; stroke-width: 3px; stroke-linejoin: round; }
.ng-pn-l { fill: #fff; font-weight: 600; }
.ng-pn-s { fill: var(--ng-fg-2); font-size: 11px !important; }
.ng-pn-f { fill: #7dd3fc; font-size: 11px !important; }
/* a branch drawn as one dot (owner, 2026-11-02: an overview first, a click or a zoom into each part) */
.ng-pn.is-branch .ng-pn-stack { fill-opacity: 0.18; stroke-dasharray: none; stroke-opacity: 0.7; }
.ng-pn.is-branch .ng-pn-stack.is-far { fill-opacity: 0.08; stroke-opacity: 0.4; }
.ng-pn.is-branch:hover .ng-pn-stack { stroke: #fff; stroke-opacity: 0.9; }
.ng-pn-b { fill: #c4b5fd; font-size: 11px !important; }
.ng-pano-mk.is-branch { border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.12), 0 0 0 4px rgb(255 255 255 / 0.06); }
.ng-pano-crumb { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; }
.ng-pano-cb { border: 0; padding: 1px 4px; border-radius: 6px; background: none; color: var(--ng-gold); font: inherit; cursor: pointer; }
.ng-pano-cb:hover, .ng-pano-cb:focus-visible { background: var(--ng-panel-2); }
.ng-pano-find { min-height: 26px; width: 170px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--ng-line-2); background: var(--ng-panel-2); color: var(--ng-fg); font: inherit; }
.ng-pano-mini {
  position: absolute; z-index: 4; right: 62px; bottom: 12px; width: 190px; height: 124px; cursor: crosshair; touch-action: none;
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 10px; box-shadow: var(--ng-shadow);
}
/* the panorama until its first flow is read, the marks that come in, and its replay (owner, 2026-11-03) */
.ng-pano-wait { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; pointer-events: none; }
.ng-pano-wait[hidden] { display: none; }
.ng-pano-wait-o { position: relative; width: 120px; height: 120px; margin-bottom: 14px; }
.ng-pano-wait-o i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ng-gold); opacity: 0; animation: ng-pano-ping 2.4s ease-out infinite; }
.ng-pano-wait-o i:nth-child(2) { animation-delay: 0.8s; }
.ng-pano-wait-o i:nth-child(3) { animation-delay: 1.6s; }
.ng-pano-wait-o::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ng-gold); box-shadow: 0 0 14px var(--ng-gold); }
@keyframes ng-pano-ping { from { transform: scale(0.15); opacity: 0.9; } to { transform: scale(1); opacity: 0; } }
.ng-pano-wait-t { margin: 0; color: var(--ng-fg); font-size: var(--ng-fs-lg); }
.ng-pano-wait-s { margin: 0; color: var(--ng-fg-3); font-size: var(--ng-fs-sm); }
.ng-pn.is-fresh, .ng-pl.is-fresh { animation: ng-pano-in 0.9s ease-out backwards; }
@keyframes ng-pano-in { from { opacity: 0; } }
.ng-pano-g.is-replay .ng-pl.is-later { opacity: 0.08; }
.ng-pano-g.is-replay .ng-pn.is-later { opacity: 0.25; }
.ng-pano-g.is-replay .ng-pl.is-now .ng-pe { stroke-opacity: 1; filter: drop-shadow(0 0 4px var(--c, #fff)); }
.ng-pano-g.is-replay .ng-pn.is-now :is(circle, rect, path):not(.ng-pn-stack) { stroke: #fff; stroke-width: 2.5; }
.ng-pano-rp { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(720px, calc(100% - 520px)); min-width: 320px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow);
  color: var(--ng-fg); font-size: var(--ng-fs-sm); }
.ng-pano-rp[hidden] { display: none; }
.ng-pano-rp { flex-wrap: wrap; }
.ng-pano-rp-clip { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ng-pano-rp-clip .ng-rp-save { margin-left: auto; }
.ng-pano-rp-clip .ng-btn { padding: 4px 10px; font-size: var(--ng-fs-sm); }
.ng-pano-rp-r { flex: 1; min-width: 0; accent-color: var(--ng-gold); }
.ng-pano-rp-t { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ng-fg-2); }
.ng-root.is-pano.has-tx .ng-pano-rp { bottom: calc(42% + 24px); }
.ng-ctrl .ng-ibtn.is-on { color: var(--ng-gold); border-color: var(--ng-gold); }
@media (max-width: 767.98px) {
  .ng-pano-rp { left: 8px; right: 8px; transform: none; width: auto; min-width: 0; bottom: 64px; }
  .ng-pano-rp-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ng-pn.is-fresh, .ng-pl.is-fresh { animation: none; }
  .ng-pano-wait-o i { animation: none; opacity: 0.4; transform: scale(0.6); }
}
/* the hop ruler (owner, 2026-11-02: layers by hop, as analysts draw them): each column's hop, moved with the map */
.ng-pano-hops { position: absolute; z-index: 3; left: 0; right: 0; top: 64px; height: 0; pointer-events: none; }
.ng-pano-hop {
  position: absolute; top: 0; transform: translateX(-12px); display: grid; gap: 1px; padding: 3px 8px; white-space: nowrap;
  font-size: var(--ng-fs-xs); color: var(--ng-fg-2); background: rgb(11 9 32 / 0.72); border: 1px solid var(--ng-line); border-radius: 8px;
}
.ng-pano-hop b { color: var(--ng-fg); }
button.ng-pano-hop { pointer-events: auto; cursor: pointer; font: inherit; text-align: left; }
button.ng-pano-hop:hover, button.ng-pano-hop:focus-visible { border-color: var(--ng-gold); }
button.ng-pano-hop.is-on { border-color: var(--ng-gold); background: rgb(242 201 76 / 0.16); }
.ng-pano-hop-left { color: var(--ng-gold); }
.ng-pano-hops.is-compact .ng-pano-hop-left { display: none; }
/* a hop's column boxed (owner, 2026-11-03), what is not of it faded */
.ng-pano-hopbox { fill: rgb(242 201 76 / 0.06); stroke: var(--ng-gold); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.ng-pano-g.has-hop .ng-pn:not(.is-hop, .is-sel) { opacity: 0.3; }
.ng-pano-g.has-hop .ng-pl:not(.is-hop, .is-in, .is-out) { opacity: 0.15; }
.ng-pano-hops.is-compact .ng-pano-hop-v, .ng-pano-hops.is-tiny .ng-pano-hop-n { display: none; }
.ng-pano-hops.is-tiny .ng-pano-hop { padding: 2px 5px; transform: translateX(-8px); }
.ng-pano-hop-s { display: none; }
.ng-pano-hops.is-micro .ng-pano-hop b:not(.ng-pano-hop-s) { display: none; }
.ng-pano-hops.is-micro .ng-pano-hop-s { display: inline; }
.ng-pano-hops.is-micro .ng-pano-hop { padding: 1px 4px; min-width: 14px; text-align: center; transform: translateX(-50%); }
@media (max-width: 767.98px) {
  .ng-pano-mini { display: none; }
  .ng-pano-find { width: 120px; }
}
.ng-pano-members { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.ng-pano-members li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ng-start-pano { margin-top: 14px; border-top: 1px solid var(--ng-line); padding-top: 10px; }
.ng-start-t2 { margin: 0 0 6px; color: var(--ng-fg); font-size: var(--ng-fs-md); font-weight: 700; }
/* the panorama's start (owner, 2026-11-03): an address box as the trace's, + for another, the minimum and the period */
.ng-start-pf { display: grid; gap: 8px; }
.ng-start-rows { display: grid; gap: 8px; }
.ng-start-row { display: flex; gap: 8px; }
.ng-start-add { min-width: 38px; min-height: 38px; padding: 0; font-size: 18px; line-height: 1; }
/* the trace's start: an address on several chains, one picked (owner, 2026-11-03) */
.ng-start-pick:empty { display: none; }
.ng-start-pick { margin-top: 12px; }
.ng-start-chains { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ng-start-chain { display: grid; gap: 2px; text-align: left; padding: 8px 12px; }
.ng-start-chain span { font-size: var(--ng-fs-xs); }
/* centred in the map, never past its edges: a tall card (a long list of chains to pick from) scrolls inside (2026-11-03) */
.ng-start { position: absolute; z-index: 4; left: 50%; top: 16px; bottom: 16px; margin: auto 0; height: fit-content; max-height: calc(100% - 32px); overflow-y: auto; box-sizing: border-box; transform: translateX(-50%); width: min(640px, calc(100% - 32px));
  padding: 22px 24px; background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 14px; box-shadow: var(--ng-shadow);
  color: var(--ng-fg); text-align: center; }
.ng-start[hidden] { display: none; }
.ng-start-t { margin: 0 0 6px; color: #fff; font-size: var(--ng-fs-lg); font-weight: 700; }
.ng-start-l { margin: 0 0 14px; color: var(--ng-fg-2); font-size: var(--ng-fs-sm); line-height: 1.5; }
.ng-start-f { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ng-start-i { flex: 1 1 320px; min-width: 0; min-height: 38px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--ng-line-2);
  background: var(--ng-panel-2); color: var(--ng-fg); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ng-start-c { min-height: 38px; border-radius: 9px; border: 1px solid var(--ng-line-2); background: var(--ng-panel-2); color: var(--ng-fg); padding: 0 8px; font: inherit; }
.ng-start-b { min-height: 38px; }
.ng-start-m { margin: 10px 0 0; min-height: 1em; color: var(--ng-out); font-size: var(--ng-fs-sm); }
.ng-start-m:empty { display: none; }
/* chain mode, the replay (owner, 2026-10-29: graph.js openReplay): a bar at the bottom with the time and a tick per
   transfer (taller for more money); lines whose money has not moved yet and addresses it has not reached yet faint, a
   line flashing as its money moves; above each address that passed money on, how long after it came in */
.ng-replay { position: absolute; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(860px, calc(100% - 24px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px;
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow); color: var(--ng-fg);
  font-size: var(--ng-fs-sm); }
.ng-replay[hidden] { display: none; }
.ng-root.has-replay :is(.ng-legend, .ng-dupbar) { visibility: hidden; }
.ng-root.has-replay .ng-toast { bottom: 120px; }
.ng-rp-play, .ng-rp-close { width: 32px; height: 32px; font-size: 13px; }
.ng-rp-track { display: grid; gap: 2px; min-width: 0; }
.ng-rp-ticks { display: block; width: 100%; height: 16px; }
.ng-rp-ticks rect { fill: var(--ng-gold); fill-opacity: 0.7; }
.ng-rp-range { width: 100%; margin: 0; accent-color: var(--ng-gold); }
.ng-rp-now { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the clip (owner, 2026-11-01): its window shaded on the time line, its buttons on a second row */
.ng-rp-win { fill: var(--ng-accent); fill-opacity: 0.3; }
.ng-rp-ticks rect.is-out { fill-opacity: 0.18; }
.ng-rp-clip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ng-rp-clip .ng-btn { padding: 3px 9px; font-size: var(--ng-fs-xs); }
.ng-rp-win-t { color: var(--ng-label-dim); font-variant-numeric: tabular-nums; }
.ng-rp-save { margin-left: auto; }
.ng-fl-main.is-future, .ng-fl-back.is-future, .ng-line.is-link.is-future { opacity: 0.08; }
.is-future .ng-fl-run { visibility: hidden; }
.ng-node.is-future { opacity: 0.25; }
.ng-fl-main.is-pulse .ng-fl-band, .ng-fl-back.is-pulse .ng-fl-thin { stroke-opacity: 1; filter: drop-shadow(0 0 6px currentColor); }
.ng-dwell { display: none; font-size: 9.5px; fill: var(--ng-gold); stroke: var(--ng-bg-1); stroke-width: 3px; stroke-opacity: 0.85; paint-order: stroke; }
.ng-root.has-replay .ng-dwell { display: inline; }
/* chain mode: a line to an address already on the graph (graph.js linkLine), its amount at the middle */
.ng-line.is-flow.is-link .ng-fl-band { stroke-opacity: 0.4; }
.ng-line.is-flow.is-link.is-lit .ng-fl-band { stroke-opacity: 0.85; }
.ng-link-t { font-size: 10px; fill: var(--ng-label-2); stroke: var(--ng-bg-1); stroke-width: 3px; stroke-opacity: 0.85; paint-order: stroke; }
.ng-link-t.dir-in { fill: var(--ng-in); }
.ng-link-t.dir-out { fill: var(--ng-out); }
/* fund flows: what an address is, by its shape (graph.js SHAPES): exchange square, swap or pool diamond, bridge hexagon, mixer
   triangle, other contract pentagon */
.ng-dot:is(.is-exchange, .is-swap, .is-bridge, .is-mixer, .is-contract) { stroke-linejoin: round; stroke-width: 1.6; fill-opacity: 0.85; }
.ng-swap-tag { flex: none; }
.ng-check.is-fixed { cursor: default; }
.ng-check.is-fixed input { opacity: 0.6; }
.ng-hop-a li { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.ng-hop-a li > span:last-child { text-align: right; }
.ng-lg-shapes { display: flex !important; flex-wrap: wrap; gap: 2px 10px !important; }
.ng-lg-shape { width: 14px; height: 14px; flex: none; overflow: visible; }
/* a step through a service: what happened inside the same transactions (graph.js hopNotes) */
.ng-hop-h { margin: 6px 0 2px; font-size: var(--ng-fs-xs); color: #e7c46a; font-weight: 600; }
.ng-hop-p { margin: 2px 0 4px; font-size: var(--ng-fs-sm); }
.ng-hop-p.is-loss { color: var(--ng-neg); }
.ng-hop-p.is-gain { color: var(--ng-pos); }
.ng-hop-a { margin: 0 0 4px; padding: 0; list-style: none; font-size: var(--ng-fs-xs); }

/* dots: one size for all (5 inner, 4 outer), 8 when lit; the glow round a lit dot is on the effects canvas */
.ng-node, .ng-center { cursor: pointer; outline: none; }
.ng-hit { fill: transparent; }
.ng-halo { opacity: 0.32; pointer-events: none; }
.ng-node.t-token .ng-halo { fill: url(#ng-halo-token); }
.ng-node.t-person .ng-halo { fill: url(#ng-halo-person); }
.ng-node.t-inst .ng-halo { fill: url(#ng-halo-inst); }
.ng-node.t-wallet .ng-halo { fill: url(#ng-halo-wallet); }
.ng-node.t-plus .ng-halo { fill: url(#ng-halo-plus); }
.ng-dot {
  pointer-events: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center;
  transition: transform 0.2s ease-out, opacity 0.15s; vector-effect: non-scaling-stroke;
}
.t-token .ng-dot { fill: var(--ng-token); stroke: var(--ng-token); }
.t-person .ng-dot { fill: var(--ng-person); stroke: var(--ng-person); }
.t-inst .ng-dot { fill: var(--ng-inst); stroke: var(--ng-inst); }
.t-wallet .ng-dot { fill: var(--ng-wallet); stroke: var(--ng-wallet); }
.t-plus .ng-dot { fill: var(--ng-bg-1); stroke: var(--ng-label-2); stroke-dasharray: 2 2; }
/* former members and ended partnerships: hollow dashed dot, dimmer name */
.ng-node.is-former .ng-dot { fill: var(--ng-bg-1); fill-opacity: 0.6; stroke-dasharray: 2.2 1.8; }
.ng-glint { fill: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.ng-ring { fill: none; stroke: var(--ng-gold); stroke-width: 1.5; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
/* a KOL's stance on the token: a thin ring round the dot (graph.js stanceRing); mixed alternates the two colours */
.ng-stance { pointer-events: none; transition: transform 0.2s; }
.ng-stance circle { fill: none; stroke-width: 1.4; }
.ng-stance.st-positive circle, .ng-stance.st-mixed .ng-st-a { stroke: var(--ng-pos); }
.ng-stance.st-negative circle, .ng-stance.st-mixed .ng-st-b { stroke: var(--ng-neg); }
.ng-stance.st-mixed circle { stroke-dasharray: 1 1; }
.ng-stance.st-mixed .ng-st-b { stroke-dashoffset: 1; }
.ng-node.tier-core:is(.is-hot, .is-sel) .ng-stance { transform: scale(1.24); transition-duration: 0.15s; }
.ng-node.tier-outer:is(.is-hot, .is-sel) .ng-stance { transform: scale(1.43); transition-duration: 0.15s; }
.ng-node.tier-core.is-hot .ng-dot, .ng-node.tier-core.is-sel .ng-dot { transform: scale(1.6); transition-duration: 0.15s; }
.ng-node.tier-outer.is-hot .ng-dot, .ng-node.tier-outer.is-sel .ng-dot { transform: scale(2); transition-duration: 0.15s; }
.ng-node.is-flow.is-hot .ng-dot, .ng-node.is-flow.is-sel .ng-dot { transform: scale(1.35); } /* 6, graph.js FLOW_DOT */
.ng-node.is-hot .ng-glint, .ng-node.is-sel .ng-glint { opacity: 0.85; transition-duration: 0.15s; }
.ng-node.is-former.is-hot .ng-glint, .ng-node.is-former.is-sel .ng-glint { opacity: 0.4; }
.ng-node.is-hot .ng-ring, .ng-node.is-sel .ng-ring, .ng-node:focus-visible .ng-ring { opacity: 1; transition-duration: 0.15s; }
.ng-node:focus-visible .ng-ring { stroke-width: 2; }
.ng-node.is-plus .ng-dot { transform: none; }

/* labels: full name under the dot, 12px inner / 11px outer, with a dark outline so stars behind do not show through */
.ng-label, .ng-sec, .ng-c-name, .ng-note {
  paint-order: stroke; stroke: var(--ng-outline); stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
  text-anchor: middle; font-family: var(--font-sans);
}
.ng-label { font-size: 12px; fill: var(--ng-label); transition: opacity 0.15s; }
.ng-node.tier-outer .ng-label { font-size: 11px; fill: var(--ng-label-2); }
.ng-node.t-wallet .ng-label { font-family: var(--font-mono); }
.ng-node.is-former .ng-label { fill: var(--ng-label-dim); }
.ng-node.is-plus .ng-label { fill: var(--ng-label-2); font-weight: 600; }
.ng-node.is-hot .ng-label, .ng-node.is-sel .ng-label { fill: #fff; font-weight: 700; }
.ng-label.is-off, .ng-sec.is-off { display: none; }
.ng-sec { font-size: 11px; fill: #e7c46a; letter-spacing: 0.02em; }
.ng-label .ng-note-l { fill: #e7c46a; font-family: inherit; } /* a holder's share under its name, in the sector colour */
/* a fund flow's amounts: a size smaller than the name (graph.js FLOW_NOTE_K), in the colour of their direction */
.ng-node.is-flow .ng-note-l { font-size: 0.85em; }
.ng-label .ng-note-l.dir-in { fill: var(--ng-in); }
.ng-label .ng-note-l.dir-out { fill: var(--ng-out); }
.ng-funds { color: #e7c46a; }
.ng-flow-h.dir-in, .ng-flow-a .dir-in { color: var(--ng-in); }
.ng-flow-h.dir-out, .ng-flow-a .dir-out { color: var(--ng-out); }
.ng-flow-a li { display: flex; justify-content: space-between; gap: 10px; }
.ng-flow-p { font-size: var(--ng-fs-xs); margin: 3px 0 8px; }
.ng-flow-stop { font-size: var(--ng-fs-sm); color: #e7c46a; margin: 8px 0 0; }
.ng-flow-days { margin-top: 8px; }
.ng-linkb { background: none; border: 0; padding: 0; color: var(--ng-accent); cursor: pointer; text-decoration: underline; font: inherit; }
/* sector names are buttons: hovered or focused they preview, clicked or tapped they pin, their sector's dots lighting up
   the way a selected dot does (gold ring, bold white name, lit line) while the rest dims */
.ng-sec-g { cursor: pointer; outline: none; }
.ng-sec-g.is-off { display: none; }
.ng-sec-g.no-hit { pointer-events: none; } /* its hit area would cover a dot's: the dot wins (keyboard still reaches it) */
.ng-sec-bg { fill: transparent; stroke: transparent; stroke-width: 1; transition: fill 0.15s, stroke 0.15s; }
.ng-sec-g:hover .ng-sec, .ng-sec-g.is-on .ng-sec { fill: #fff; }
.ng-sec-g.is-on .ng-sec-bg { fill: rgb(255 197 61 / 0.16); stroke: rgb(255 197 61 / 0.55); }
.ng-sec-g:focus-visible .ng-sec-bg { stroke: var(--ng-gold); stroke-width: 2; }
.ng-sec-g { transition: opacity 0.15s; }
.ng-root.has-sec .ng-sec-g:not(.is-on) { opacity: 0.5; }
.ng-root.has-sec .ng-node:not(.in-sec) :is(.ng-dot, .ng-halo, .ng-label, .ng-stance) { opacity: 0.28; }
.ng-root.has-sec .ng-line:not(.in-sec) { stroke-opacity: 0.05; }
.ng-line.in-sec { stroke-opacity: 0.9; }
.ng-node.in-sec .ng-ring { opacity: 1; }
.ng-node.in-sec .ng-label { fill: #fff; font-weight: 700; }
.ng-note { font-size: 12px; fill: var(--ng-fg-3); }

/* centre: round logo in a frame, full name below. A token without an icon and an address are star bodies; a person is
   the shared side profile; an institution without a logo is its initials in a round badge */
.ng-c-bg { fill: #0b0920; }
.ng-c-frame { fill: none; stroke-width: 0.05; stroke: var(--ng-gold); }
.ng-center.t-inst .ng-c-frame { stroke: var(--ng-inst); }
.ng-center.t-person .ng-c-frame { stroke: var(--ng-person); }
.ng-c-mono { fill: #f1ecff; font-weight: 700; font-size: 80px; text-anchor: middle; font-family: var(--font-sans); pointer-events: none; }
.ng-c-mono.is-two { font-size: 60px; letter-spacing: -2px; }
.ng-c-mono-bg, .ng-c-pglow { pointer-events: none; }
/* person: with the dark site theme a dark figure, edged with a thin line of starlight, on a disc lit from behind (a pure
   black figure would vanish into the dark map); with the light site theme a black figure on a pale disc. The map itself
   stays dark in both themes. Units here are the 200-unit box of the path. */
.ng-c-pdisc { fill: #150f38; }
.ng-c-pfig { fill: #06041a; stroke: #d9e4ff; stroke-opacity: 0.8; stroke-width: 2.4; stroke-linejoin: round; }
:root[data-theme="light"] .ng-c-pdisc { fill: #e9e6fb; }
:root[data-theme="light"] .ng-c-pglow { opacity: 0; }
:root[data-theme="light"] .ng-c-pfig { fill: #000; stroke: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ng-c-pdisc { fill: #e9e6fb; }
  :root:not([data-theme="dark"]) .ng-c-pglow { opacity: 0; }
  :root:not([data-theme="dark"]) .ng-c-pfig { fill: #000; stroke: none; }
}
.ng-c-name { font-size: 16px; font-weight: 700; fill: #fff; }
.ng-center:focus-visible .ng-c-frame, .ng-center:focus-visible .ng-c-body { stroke: var(--ng-gold); stroke-width: 0.1; }

/* re-centring: the old map fades while the clicked dot flies to the middle */
.ng-world { transition: none; }
.ng-world.is-leaving { opacity: 0; transition: opacity 0.22s ease-in; }
.ng-flyer { opacity: 0.9; }
.ng-flyer.t-token { fill: var(--ng-token); }
.ng-flyer.t-person { fill: var(--ng-person); }
.ng-flyer.t-inst { fill: var(--ng-inst); }
.ng-flyer.t-wallet { fill: var(--ng-wallet); }
.ng-center.is-sel .ng-c-frame, .ng-center.is-sel .ng-c-body { stroke: var(--ng-gold); stroke-width: 0.08; }
/* fund flows: the centre lit as a repeated address, and the other places of the selected address */
.ng-center:is(.in-sec, .is-twin) .ng-c-frame, .ng-center:is(.in-sec, .is-twin) .ng-c-body { stroke: var(--ng-gold); stroke-width: 0.08; }
.ng-node.is-twin .ng-ring { opacity: 1; }
.ng-node.is-twin .ng-label { fill: #fff; font-weight: 700; }

/* ---------- panels over the map ---------- */
.ng-console, .ng-trail, .ng-flowbar, .ng-dupbar, .ng-legend, .ng-ctrl, .ng-card, .ng-toast, .ng-empty-in {
  position: absolute; z-index: 4; color: var(--ng-fg); font-size: var(--ng-fs-sm); line-height: 1.45;
}
.ng-console, .ng-legend, .ng-card, .ng-toast {
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow);
}
/* the search list drops down over the trail and the cards while the field has focus */
.ng-console:focus-within { z-index: 6; }
.ng-root button { font: inherit; color: inherit; }
.ng-root a { color: var(--ng-accent); }
.ng-root a:hover { color: #fff; }
.ng-ibtn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; flex: none;
  border: 1px solid var(--ng-line-2); background: var(--ng-panel-2); color: var(--ng-fg-2); cursor: pointer;
}
.ng-ibtn:hover { color: #fff; border-color: var(--ng-accent); }
.ng-i { width: 14px; height: 14px; display: block; }
.ng-tag {
  display: inline-block; padding: 0 6px; border-radius: 4px; font-size: var(--ng-fs-xs); line-height: 1.6; white-space: nowrap;
  background: rgb(154 134 255 / 0.16); color: var(--ng-fg-2);
}
.ng-tag.is-dim { background: rgb(255 255 255 / 0.06); color: var(--ng-fg-3); }
.ng-muted { color: var(--ng-fg-3); }
.ng-root mark { background: rgb(255 197 61 / 0.22); color: #fff; border-radius: 2px; }
.ng-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* console: top left, 320px; collapses to a capsule with the centre's name */
.ng-console { left: 12px; top: 12px; width: 256px; max-width: calc(100% - 24px); padding: 8px 10px 10px; display: grid; gap: 8px; }
.ng-cap { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ng-cap-name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--ng-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-cap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ng-label-2); }
.ng-cap-dot.t-token { background: var(--ng-token); }
.ng-cap-dot.t-person { background: var(--ng-person); }
.ng-cap-dot.t-inst { background: var(--ng-inst); }
.ng-cap-dot.t-wallet { background: var(--ng-wallet); }
.ng-collapse { width: 24px; height: 24px; }
.ng-collapse .ng-i { transform: rotate(180deg); transition: transform 0.2s; }
.ng-console.is-collapsed { width: auto; max-width: min(256px, calc(100% - 24px)); padding: 4px 6px 4px 12px; border-radius: 999px; }
.ng-console.is-collapsed .ng-con-body { display: none; }
.ng-console.is-collapsed .ng-collapse .ng-i { transform: none; }
.ng-con-body { display: grid; gap: 8px; }
.ng-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: 9px; background: rgb(0 0 0 / 0.28); border: 1px solid var(--ng-line); }
.ng-seg-b {
  min-height: 26px; padding: 2px 6px; border: 0; border-radius: 7px; background: none; color: var(--ng-fg-2); cursor: pointer;
  font-size: var(--ng-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-seg-b:hover { color: #fff; }
.ng-seg-b[aria-pressed="true"] { background: var(--ng-panel-2); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px var(--ng-line-2); }
.ng-row { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.ng-mode { display: none; }
.ng-search { position: relative; flex: 1 1 100%; min-width: 0; }
.ng-search > .ng-i { position: absolute; left: 9px; top: 9px; color: var(--ng-fg-3); pointer-events: none; }
.ng-q {
  width: 100%; height: 32px; padding: 0 10px 0 28px; border-radius: 9px; border: 1px solid var(--ng-line-2);
  background: rgb(0 0 0 / 0.3); color: var(--ng-fg); font: inherit; font-size: var(--ng-fs-sm); text-overflow: ellipsis;
}
.ng-q::placeholder { color: var(--ng-fg-3); }
.ng-q:focus { outline: none; border-color: var(--ng-gold); box-shadow: 0 0 0 1px var(--ng-gold); }
.ng-q::-webkit-search-cancel-button { filter: invert(0.8); }
/* the list can hold every token, person or institution: graph.js draws only the rows in view, and places the others
   from these row heights (a name never wraps) */
.ng-lb {
  --ng-row: 30px; --ng-row-h: 26px;
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; margin: 0; padding: 4px; list-style: none;
  max-height: min(360px, 56vh); overflow: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: var(--ng-panel-solid); border: 1px solid var(--ng-line-2); border-radius: 10px; box-shadow: var(--ng-shadow);
}
.ng-lb-pad { margin: 0; padding: 0; }
.ng-opt-h {
  min-height: var(--ng-row-h); padding: 8px 6px 3px; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-opt { display: flex; align-items: center; gap: 6px; min-height: var(--ng-row); padding: 4px 6px; border-radius: 7px; cursor: pointer; min-width: 0; }
.ng-opt[aria-selected="true"], .ng-opt:hover { background: rgb(154 134 255 / 0.18); }
/* the map's centre */
.ng-opt.is-cur { box-shadow: inset 2px 0 0 var(--ng-gold); }
.ng-opt.is-cur .ng-opt-n { color: var(--ng-gold); font-weight: 600; }
.ng-opt-k { flex: none; margin-left: auto; padding-left: 4px; color: var(--ng-fg-3); font-size: var(--ng-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-opt.is-msg { cursor: default; color: var(--ng-fg-3); background: none; }
.ng-opt.is-action { color: var(--ng-gold); }
.ng-opt-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ng-fg); }
.ng-opt-s { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ng-fg-3); font-size: var(--ng-fs-xs); }
.ng-opt .ng-tag { margin-left: auto; }
.ng-filters { flex: 1 1 100%; }
.ng-filters > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none; color: var(--ng-fg-2);
  padding: 1px 3px; border-radius: 6px;
}
.ng-filters > summary::-webkit-details-marker { display: none; }
.ng-filters > summary:hover { color: #fff; }
.ng-filters[open] > summary { color: #fff; }
.ng-filter-in { display: grid; gap: 6px; margin-top: 6px; max-height: 36vh; overflow: auto; }
.ng-filter-in fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; }
.ng-filter-in legend { padding: 0; margin-bottom: 3px; font-size: var(--ng-fs-xs); color: var(--ng-fg-3); width: 100%; }
.ng-check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--ng-fg-2); }
.ng-check input { accent-color: var(--ng-gold); margin: 0; }
.ng-summary { font-size: var(--ng-fs-xs); color: var(--ng-fg-2); }
.ng-summary span { white-space: nowrap; }
.ng-note { font-size: var(--ng-fs-xs); color: #e7c46a; }

/* exploration trail: top, over the centre of the map */
.ng-trail { top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 600px); min-width: 0; }
.ng-root.has-dock .ng-trail { max-width: calc(100% - 640px); }
/* fund flows: the period, under the trail */
.ng-flowbar { top: 48px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 8px; width: max-content; max-width: calc(100% - 16px); }
.ng-flowbar[hidden] { display: none; }
/* fund flows: the other chains the address moved money on, each a button that opens it there */
.ng-chains { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ng-chains-h { color: var(--ng-fg-3); padding: 0 2px 0 4px; }
.ng-chains-b { min-height: 26px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ng-line); background: rgb(0 0 0 / 0.28);
  color: var(--ng-fg); cursor: pointer; font: inherit; }
.ng-chains-b:hover:not(:disabled) { border-color: var(--ng-line-2); color: #fff; }
.ng-chains-b:disabled { cursor: progress; color: var(--ng-fg-3); }
@media (max-width: 640px) {
  /* one line on a phone, scrolled sideways */
  .ng-chains { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .ng-chains > * { flex: none; }
}
.ng-chains-b.is-on { cursor: default; background: var(--ng-panel-2); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px var(--ng-line-2); margin-right: 6px; }
/* fund flows: the addresses on the map more than once, at the bottom; each lights up its places */
.ng-dupbar { bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 6px; width: max-content; max-width: calc(100% - 520px); padding: 6px 10px; border-radius: 12px; background: var(--ng-panel);
  border: 1px solid var(--ng-line); font-size: var(--ng-fs-sm); }
.ng-dupbar[hidden] { display: none; }
.ng-dup-h { color: var(--ng-fg-3); }
.ng-dup-b { padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: none; color: #e7c46a; cursor: pointer;
  font: inherit; font-family: var(--font-mono); }
.ng-dup-b:hover, .ng-dup-b.is-on { border-color: rgb(255 197 61 / 0.55); background: rgb(255 197 61 / 0.16); color: #fff; }
/* chain mode: the transfers list of the clicked address, at the bottom over the map (graph.js renderTx) */
.ng-tx { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 12px; max-height: 42%; display: flex; flex-direction: column;
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow); color: var(--ng-fg);
  font-size: var(--ng-fs-sm); line-height: 1.45; }
.ng-tx[hidden] { display: none; }
/* chain mode, when the money moved (owner, 2026-10-29: graph.js whenText, treeBands): the days under each address's
   amount and above a link's, in the muted label colour; a band clicked is split into thinner bands, one per part in
   time order, its tip pinned beside it with the parts listed */
.ng-label .ng-note-l.dir-time { fill: var(--ng-fg-3); }
.ng-link-t.is-time { fill: var(--ng-fg-3); font-size: 9.5px; }
[data-band] { cursor: pointer; }
.ng-fl-main.is-split > :is(.ng-fl-band, .ng-fl-run, .ng-flow-arr) { opacity: 0.12; }
.ng-fl-main.is-split > .ng-fl-halo { stroke-opacity: 0.05; }
.ng-line.is-flow .ng-strand .ng-fl-band { stroke-opacity: 0.85; }
.ng-line.is-flow .ng-strand.is-hot .ng-fl-band { stroke-opacity: 1; }
.ng-strand.is-hot { filter: drop-shadow(0 0 3px currentColor); }
.ng-tip { position: absolute; left: 0; top: 0; z-index: 6; max-width: min(340px, calc(100% - 16px)); padding: 8px 10px; border-radius: 10px;
  background: var(--ng-panel-solid); border: 1px solid var(--ng-line-2); box-shadow: var(--ng-shadow); color: var(--ng-fg);
  font-size: var(--ng-fs-sm); line-height: 1.4; pointer-events: none; }
.ng-tip[hidden] { display: none; }
.ng-tip p { margin: 0; }
.ng-tip-h { font-weight: 600; color: #fff; }
.ng-tip-m { margin-top: 2px; color: var(--ng-fg-2); }
.ng-tip-s { margin-top: 6px; color: var(--ng-fg-3); }
.ng-tip-l { counter-reset: part; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.ng-tip-l li { counter-increment: part; display: grid; grid-template-columns: 1.4em minmax(0, 1fr) auto auto; gap: 8px; padding: 1px 4px;
  border-radius: 6px; font-variant-numeric: tabular-nums; }
.ng-tip-l li::before { content: counter(part); color: var(--ng-fg-3); text-align: right; }
.ng-tip-a { text-align: right; white-space: nowrap; }
.ng-tip-v { text-align: right; color: var(--ng-fg-3); white-space: nowrap; }
.ng-tip-f { margin-top: 6px; color: var(--ng-fg-3); font-size: 0.92em; }
.ng-root.has-tx :is(.ng-legend, .ng-dupbar) { visibility: hidden; }
.ng-root.has-tx .ng-ctrl { bottom: calc(42% + 24px); }
/* the panorama with an address's transactions open under it (owner, 2026-11-02): its controls and minimap above the list */
.ng-root.is-pano.has-tx :is(.ng-pano-ctrl, .ng-pano-mini) { bottom: calc(42% + 24px); }
.ng-root.is-pano.has-tx .ng-pano-ctrl { right: 296px; }
.ng-root.is-pano.has-tx .ng-pano-mini { right: 346px; }
.ng-root.is-pano.has-tx .ng-pano-legend { visibility: hidden; }
.ng-root.has-tx .ng-toast { bottom: calc(42% + 28px); }
.ng-tx-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--ng-line); }
.ng-tx-t { margin: 0; color: #fff; font-size: var(--ng-fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ng-tx-h .ng-seg { margin: 0; }
.ng-tx-h .ng-x { margin-left: auto; }
.ng-tx-min { display: inline-flex; align-items: center; gap: 4px; color: var(--ng-fg-2); }
.ng-tx-min-i { width: 88px; min-height: 28px; border-radius: 8px; border: 1px solid var(--ng-line); background: var(--ng-panel-2); color: var(--ng-fg);
  padding: 2px 6px; font: inherit; }
.ng-tx-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; }
.ng-tx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ng-tx-table th { position: sticky; top: 0; z-index: 1; background: var(--ng-panel-2); text-align: left; font-weight: 600; color: var(--ng-fg-3);
  padding: 6px 10px; white-space: nowrap; border-bottom: 1px solid var(--ng-line); }
.ng-tx-table td { padding: 4px 10px; border-bottom: 1px solid rgb(255 255 255 / 0.05); white-space: nowrap; }
.ng-tx-table :is(td, th):is(.c-token, .c-value) { text-align: right; }
.ng-tx-table :is(td.c-from, td.c-to) { font-family: var(--font-mono); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ng-tx-table td.c-token.dir-in { color: var(--ng-in); }
.ng-tx-table td.c-token.dir-out { color: var(--ng-out); }
.ng-tx-table td.c-time { cursor: help; color: var(--ng-fg-2); }
.ng-tx-table tbody tr:hover { background: rgb(255 255 255 / 0.04); }
.ng-tx-sort { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font-weight: inherit; }
.ng-tx-sort:hover, th[aria-sort] .ng-tx-sort { color: #fff; }
.ng-tx-self { color: var(--ng-fg-3); }
.ng-tx-msg { margin: 0; padding: 14px 12px; }
.ng-flowbar .ng-seg { background: var(--ng-panel); }
.ng-flowbar .ng-flow-days { margin-top: 0; }
.ng-steps { display: flex; align-items: center; gap: 2px; margin: 0; padding: 3px; list-style: none; border-radius: 999px;
  background: var(--ng-panel); border: 1px solid var(--ng-line); overflow: hidden; }
.ng-steps li { display: flex; align-items: center; min-width: 0; }
.ng-steps li + li::before { content: "›"; color: var(--ng-fg-3); padding: 0 2px; }
.ng-step {
  max-width: 120px; padding: 2px 8px; border: 0; border-radius: 999px; background: none; color: var(--ng-fg-2); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-step:hover { color: #fff; background: rgb(154 134 255 / 0.16); }
.ng-step[aria-current="step"] { color: #fff; font-weight: 700; cursor: default; background: var(--ng-panel-2); }
.ng-trail-m { display: none; }

/* legend: bottom left, collapsible */
.ng-legend { left: 12px; bottom: 12px; width: 208px; padding: 0; font-size: var(--ng-fs-xs); }
.ng-legend > summary { cursor: pointer; list-style: none; padding: 5px 10px; font-weight: 600; color: var(--ng-fg-2); }
.ng-legend > summary::-webkit-details-marker { display: none; }
.ng-legend > summary::after { content: "▴"; float: right; color: var(--ng-fg-3); }
.ng-legend[open] > summary::after { content: "▾"; }
.ng-legend:not([open]) { width: auto; }
.ng-lg-in { display: grid; gap: 6px; padding: 0 10px 8px; color: var(--ng-fg-2); }
.ng-lg-in ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ng-lg-in p { margin: 0; line-height: 1.4; }
.ng-lg-in li { display: flex; align-items: center; gap: 6px; }
/* fund flows: only their own part of the legend */
.ng-legend.is-flows .ng-lg-in > ul, .ng-legend.is-flows .ng-lg-in > p[data-lg] { display: none; }
.ng-lg-line.is-flow { border-top-width: 3px; border-radius: 2px; }
.ng-lg-line.is-flow.dir-in { border-top-color: var(--ng-in); }
.ng-lg-line.is-flow.dir-out { border-top-color: var(--ng-out); }
.ng-lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ng-lg-dot.t-former { background: transparent; border: 1.2px dashed var(--ng-label-2); }
.ng-lg-line { width: 18px; height: 0; border-top: 1.5px solid var(--ng-label-2); flex: none; }
.ng-lg-line.ls-dashed { border-top-style: dashed; }
.ng-lg-line.ls-dotted { border-top-style: dotted; border-top-width: 2px; }
/* this map's relationships and statuses, as small chips */
.ng-lg-map { display: grid; gap: 5px; }
.ng-lg-grp { display: grid; gap: 3px; }
.ng-lg-h { color: var(--ng-fg-3); font-size: 11px; }
.ng-lg-in ul.ng-lg-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.ng-lg-chips li { padding: 0 6px; border-radius: 4px; line-height: 1.6; background: rgb(255 255 255 / 0.05); }
/* a KOL stance: the ring round the dot, in small (mixed: the two colours in turn, as on the map) */
.ng-lg-st, .ng-st > i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ng-pos); flex: none; }
.ng-lg-st.st-negative, .ng-st.st-negative > i { border-color: var(--ng-neg); }
.ng-lg-st.st-mixed, .ng-st.st-mixed > i { border-color: var(--ng-pos) var(--ng-neg); }
.ng-lg-chips li:has(> .ng-lg-st) { display: inline-flex; align-items: center; gap: 4px; }
.ng-st { display: inline-flex; align-items: center; gap: 4px; }
/* a selected dot lights up the entries that describe it; the rest dims */
.ng-lg-in [data-lg] { border-radius: 4px; transition: opacity 0.15s, background-color 0.15s, color 0.15s; }
.ng-lg-in li[data-lg]:not(.ng-lg-chips li), .ng-lg-in p[data-lg] { margin: 0 -4px; padding: 0 4px; }
/* dimmed text stays at 5:1 contrast on the panel; only the colour swatches fade */
.ng-legend.has-pick [data-lg]:not(.is-match) { color: #8a84ad; }
.ng-legend.has-pick [data-lg]:not(.is-match) > span { opacity: 0.4; }
.ng-legend.has-pick [data-lg].is-match { color: #fff; background: rgb(255 197 61 / 0.16); box-shadow: inset 0 0 0 1px rgb(255 197 61 / 0.55); }

/* canvas controls: bottom right */
.ng-ctrl { right: 12px; bottom: 12px; display: grid; gap: 4px; }
.ng-ctrl .ng-ibtn { width: 30px; height: 30px; background: var(--ng-panel); box-shadow: var(--ng-shadow); }
.ng-root.has-dock .ng-ctrl { right: 296px; }

/* cards: beside the dot on hover; docked right when clicked */
.ng-card { width: 272px; max-width: calc(100% - 24px); padding: 10px 12px 9px; overflow: auto; overscroll-behavior: contain; }
.ng-card.is-float { left: 0; top: 0; max-height: min(62vh, calc(100% - 16px)); z-index: 5; }
.ng-card.is-dock { right: 12px; top: 12px; max-height: calc(100% - 24px); z-index: 5; }
/* a wallet's holdings: left of the docked card, opened by the arrow halfway down its left edge (graph.js syncWallet) */
.ng-wal {
  position: absolute; z-index: 5; top: 12px; right: 292px; width: 256px; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 12px 9px; color: var(--ng-fg); font-size: var(--ng-fs-sm); line-height: 1.45;
  background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow);
}
.ng-wal[hidden], .ng-walb[hidden] { display: none; }
.ng-walb {
  position: absolute; z-index: 6; left: 0; top: 0; width: 18px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--ng-line-2); border-right: 0; border-radius: 9px 0 0 9px; background: var(--ng-panel-solid); color: var(--ng-fg-2);
  box-shadow: var(--ng-shadow);
}
.ng-walb:hover, .ng-walb:focus-visible { color: #fff; border-color: var(--ng-gold); }
.ng-walb .ng-i { width: 12px; height: 12px; transition: transform 0.2s; }
.ng-walb[aria-expanded="true"] .ng-i { transform: rotate(180deg); }
.ng-root.has-wal .ng-ctrl { right: 560px; }
.ng-root.has-wal .ng-trail { max-width: max(200px, calc(100% - 1136px)); }
.ng-wal-h { display: grid; gap: 1px; margin-bottom: 8px; }
.ng-wal-t { margin: 0; font-size: var(--ng-fs-lg); line-height: 1.25; color: #fff; }
.ng-wal-s { margin: 0; color: var(--ng-fg-2); font-size: var(--ng-fs-xs); }
.ng-wal-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--ng-fg-3); }
.ng-wal-sum b { font-size: var(--ng-fs-lg); color: #fff; font-variant-numeric: tabular-nums; }
.ng-wal-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ng-wal-l li {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding: 3px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; overflow: hidden;
}
.ng-wal-l li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: rgb(255 197 61 / 0.1); pointer-events: none; }
.ng-wal-k { color: #fff; font-weight: 600; }
.ng-wal-q { text-align: right; color: var(--ng-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-wal-v { text-align: right; color: var(--ng-fg-2); min-width: 64px; }
.ng-wal-m { margin: 6px 0; color: var(--ng-fg-2); }
.ng-wal-h + .ng-btn { margin-top: 4px; }
.ng-wal-f { margin-top: 8px; display: grid; gap: 4px; color: var(--ng-fg-3); font-size: var(--ng-fs-xs); }
.ng-wal-f p { margin: 0; }
.ng-card-in { display: grid; gap: 9px; }
.ng-x { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; }
.ng-card-h { display: flex; align-items: center; gap: 8px; padding-right: 24px; }
.ng-card-logo { width: 26px; height: 26px; border-radius: 50%; flex: none; background: #0b0920; }
.ng-card-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; margin: 0 7px; background: var(--ng-label-2); box-shadow: 0 0 12px currentColor; }
.ng-card-dot.t-token { background: var(--ng-token); color: rgb(255 197 61 / 0.6); }
.ng-card-dot.t-person { background: var(--ng-person); color: rgb(110 231 249 / 0.6); }
.ng-card-dot.t-inst { background: var(--ng-inst); color: rgb(167 139 250 / 0.6); }
.ng-card-dot.t-wallet { background: var(--ng-wallet); color: rgb(143 163 199 / 0.6); }
.ng-card-dot.is-former { background: transparent; border: 1.5px dashed var(--ng-label-2); box-shadow: none; }
.ng-card-t { min-width: 0; display: grid; gap: 2px; }
.ng-card-name { font-size: var(--ng-fs-lg); line-height: 1.25; color: #fff; overflow-wrap: anywhere; outline: none; }
.ng-card-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; color: var(--ng-fg-2); }
.ng-rows { display: grid; gap: 5px; margin: 0; }
.ng-rowi { display: grid; grid-template-columns: 60px 1fr; gap: 6px; align-items: baseline; }
.ng-rowi dt { color: var(--ng-fg-3); font-size: var(--ng-fs-xs); }
.ng-rowi dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; overflow-wrap: anywhere; }
.ng-addrs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; width: 100%; }
.ng-addrs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; }
.ng-chain { color: var(--ng-fg-2); }
.ng-addr { font-family: var(--font-mono); font-size: var(--ng-fs-xs); color: var(--ng-fg); }
.ng-addr.is-full { word-break: break-all; }
.ng-copy {
  padding: 0 6px; border-radius: 6px; border: 1px solid var(--ng-line-2); background: none; color: var(--ng-fg-2); cursor: pointer;
  font-size: var(--ng-fs-xs); line-height: 1.7;
}
.ng-copy:hover { color: #fff; border-color: var(--ng-accent); }
.ng-ext::after { content: "↗"; font-size: 0.85em; margin-left: 2px; color: var(--ng-fg-3); }
.ng-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ng-chip {
  display: inline-block; padding: 0 6px; border-radius: 6px; font-size: var(--ng-fs-xs); font-weight: 600; line-height: 1.7;
  border: 1px solid rgb(255 197 61 / 0.45); color: var(--ng-token) !important; background: rgb(255 197 61 / 0.08); text-decoration: none;
}
.ng-chip:hover { background: rgb(255 197 61 / 0.2); text-decoration: none; }
.ng-chip.is-uncovered { border-style: dashed; }
.ng-chip-more { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); align-self: center; }
.ng-rels h3 { font-size: var(--ng-fs-xs); font-weight: 600; color: var(--ng-fg-3); margin-bottom: 4px; letter-spacing: 0.02em; }
.ng-rels ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ng-rel { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgb(0 0 0 / 0.22); border: 1px solid var(--ng-line); }
.ng-rel-k { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; color: #fff; }
.ng-rel-t { color: var(--ng-fg-2); }
.ng-rel-via { color: var(--ng-fg-2); font-style: italic; }
.ng-rel-src { font-size: var(--ng-fs-xs); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; }
.ng-kind { font-size: var(--ng-fs-xs); line-height: 1.4; color: var(--ng-fg-3); border: 1px solid var(--ng-line); border-radius: 3px; padding: 0 4px; margin-left: 2px; }
.ng-acts { display: grid; gap: 6px; justify-items: start; }
.ng-acts-l { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); }
.ng-acts-b { display: flex; flex-wrap: wrap; gap: 5px; }
.ng-btn.is-primary { border-color: rgb(255 197 61 / 0.55); color: #fff; background: rgb(255 197 61 / 0.12); }
.ng-btn.is-primary:hover { background: rgb(255 197 61 / 0.24); border-color: var(--ng-gold); }
.ng-btn.ng-detail { justify-self: start; color: var(--ng-fg) !important; text-decoration: none; }
.ng-card-f { font-size: var(--ng-fs-xs); color: var(--ng-fg-3); padding-top: 6px; border-top: 1px solid var(--ng-line); }
.ng-card-f a { color: var(--ng-fg-2); }

/* empty axis: a box in the core ring with a button for the other axis */
.ng-empty { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.ng-empty-in { position: static; pointer-events: auto; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 260px; color: var(--ng-fg-2); }

/* toast: short notes ("Link copied", "That entity was not found") */
.ng-toast { left: 50%; bottom: 16px; transform: translateX(-50%); padding: 6px 12px; z-index: 7; max-width: calc(100% - 32px); }

/* ---------- loading, error and other messages over the map ---------- */
.ng-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; }
.ng-msg {
  pointer-events: auto; display: grid; justify-items: center; gap: 12px; padding: 18px 22px; max-width: min(360px, calc(100% - 32px));
  text-align: center; color: var(--ng-fg); font-size: var(--fs-md);
}
.ng-msg-error { background: var(--ng-panel); border: 1px solid var(--ng-line); border-radius: 12px; box-shadow: var(--ng-shadow); }
/* loading has no words on screen: the jump on the sky canvas is the sign; the text is for screen readers */
.ng-msg-loading { background: none; padding: 0; pointer-events: none; }
/* the new map is drawn behind the jump and shown when it arrives */
.ng-root.is-warping .ng-world, .ng-root.is-warping .ng-empty { visibility: hidden; }
.ng-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 28px; padding: 2px 11px;
  border: 1px solid var(--ng-line-2); border-radius: 999px; background: var(--ng-panel-2); color: var(--ng-fg);
  font-size: var(--ng-fs-sm); cursor: pointer;
}
.ng-btn:hover { border-color: var(--ng-accent); color: #fff; }
.ng-root :focus-visible { outline: 2px solid var(--ng-gold); outline-offset: 2px; }

/* ---------- phones (< 768px): the console is one row (category and axis in one dropdown, search, filters), the trail
   is "back" and the centre's name, the docked card is a drawer of at most 60% of the screen ---------- */
@media (max-width: 767.98px) {
  .ng-console { left: 8px; right: 8px; top: 8px; width: auto; max-width: none; padding: 5px; border-radius: 12px; gap: 4px; }
  .ng-console .ng-cap, .ng-cats, .ng-axes, .ng-summary { display: none; }
  .ng-console.is-collapsed .ng-con-body { display: grid; }
  .ng-con-body { gap: 4px; }
  .ng-row { flex-wrap: nowrap; gap: 6px; align-items: center; }
  .ng-mode {
    display: block; flex: 0 1 auto; max-width: 38%; height: 34px; padding: 0 5px; border-radius: 9px; border: 1px solid var(--ng-line-2);
    background: rgb(0 0 0 / 0.3); color: var(--ng-fg); font: inherit; font-size: var(--ng-fs-xs);
  }
  .ng-search { flex: 1 1 auto; position: static; }
  .ng-search > .ng-i { display: none; }
  .ng-q { height: 34px; padding: 0 9px; font-size: 16px; } /* 16px keeps iOS from zooming the page when the field is focused */
  .ng-lb { --ng-row: 40px; --ng-row-h: 28px; left: 0; right: 0; top: calc(100% + 4px); max-height: 52vh; }
  .ng-filters { flex: none; position: static; }
  .ng-filters > summary { width: 34px; height: 34px; justify-content: center; padding: 0; border-radius: 9px; border: 1px solid var(--ng-line-2); background: rgb(0 0 0 / 0.3); }
  .ng-filters > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ng-filters[open] > summary { border-color: var(--ng-gold); }
  .ng-filter-in {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 6; margin: 0; padding: 10px; max-height: 46vh;
    background: var(--ng-panel-solid); border: 1px solid var(--ng-line-2); border-radius: 12px; box-shadow: var(--ng-shadow);
  }
  .ng-note { padding: 0 4px; }
  .ng-trail { top: 58px; max-width: calc(100% - 16px); }
  .ng-flowbar { top: 102px; }
  .ng-dupbar { max-width: calc(100% - 16px); bottom: 64px; }
  .ng-root.has-dock .ng-trail { max-width: calc(100% - 16px); }
  .ng-steps { display: none; }
  .ng-trail-m {
    display: flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 10px 2px 3px; border-radius: 999px;
    background: var(--ng-panel); border: 1px solid var(--ng-line);
  }
  .ng-back { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 8px 0 4px; border: 0; border-radius: 999px; background: none; color: var(--ng-fg-2); cursor: pointer; }
  .ng-back:disabled { opacity: 0.4; cursor: default; }
  .ng-trail-now { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ng-legend { left: 8px; bottom: 8px; width: auto; max-width: calc(100% - 60px); }
  .ng-legend[open] { width: min(224px, calc(100% - 60px)); }
  .ng-legend > summary { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ng-ctrl { right: 8px; bottom: 8px; gap: 4px; }
  .ng-ctrl .ng-ibtn { width: 34px; height: 34px; }
  .ng-root.has-dock .ng-ctrl { visibility: hidden; }
  /* with a card drawer open, the legend (left as it was, open or not) sits just above it, so its highlight can be seen */
  .ng-root.has-dock .ng-legend { bottom: calc(var(--ng-dock-h, 46%) + 8px); max-height: calc(100% - var(--ng-dock-h, 46%) - 112px); overflow: auto; } /* stops below the trail */
  .ng-card.is-float { display: none; }
  .ng-card.is-dock {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 46%;
    border-radius: 14px 14px 0 0; border-bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ng-card.is-dock::before { content: ""; display: block; width: 32px; height: 3px; margin: -4px auto 6px; border-radius: 2px; background: var(--ng-line-2); }
  .ng-card.is-dock .ng-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: none; }
  .ng-card.is-dock .ng-chip { flex: none; }
  .ng-card.is-dock .ng-acts { justify-items: stretch; }
  .ng-card.is-dock .ng-acts-b { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .ng-card.is-dock .ng-btn { width: 100%; min-height: 34px; }
  .ng-card.is-dock .ng-x { width: 32px; height: 32px; right: 6px; top: 4px; }
  .ng-card.is-dock .ng-card-h { padding-right: 36px; }
  .ng-card.is-dock .ng-copy { min-height: 32px; padding: 0 10px; }
  .ng-card.is-dock .ng-chip { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; }
  /* the holdings take the drawer's place, the arrow halfway down its left edge */
  .ng-wal {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 46%; min-height: var(--ng-dock-h, 0px); z-index: 6;
    border-radius: 14px 14px 0 0; border-bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 30px;
  }
  .ng-root.has-wal .ng-card.is-dock { visibility: hidden; }
  .ng-root.has-walb .ng-card.is-dock { padding-left: 30px; }
  .ng-walb { z-index: 7; width: 22px; height: 48px; border: 1px solid var(--ng-line-2); border-left: 0; border-radius: 0 9px 9px 0; }
  .ng-check { min-height: 32px; }
  .ng-rowi { grid-template-columns: 56px 1fr; }
  .ng-tx { left: 0; right: 0; bottom: 0; max-height: 55%; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .ng-tx-t { max-width: 100%; flex-basis: 100%; }
  .ng-root.has-tx .ng-ctrl { visibility: hidden; }
  .ng-toast { bottom: 56px; }
  .ng-replay { grid-template-columns: auto minmax(0, 1fr) auto; bottom: 8px; width: calc(100% - 16px); }
  .ng-rp-speed { grid-column: 1 / 3; }
  .ng-empty-in { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-fl-run { animation: none; display: none; }
  .ng-line, .ng-dot, .ng-glint, .ng-ring, .ng-stance { transition-duration: 0.01s !important; }
  .ng-lg-in [data-lg], .ng-sec-g, .ng-sec-bg, .ng-dot, .ng-label { transition: none; }
  /* no jump to watch: the loading text is shown, still */
  .ng-msg-loading p.sr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; color: var(--ng-fg-2); }
}

/* fund flows: the period, how recent and at which prices, in the middle of the footer's line (graph.js footNote) */
.foot-lite-in.ng-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
.ng-foot-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; min-width: 0; }
.foot-lite-in:not(.ng-foot) .ng-foot-l { display: contents; }
.ng-foot-note { text-align: center; }
.ng-foot-note[hidden], .foot-lite-in:not(.ng-foot) .ng-foot-r { display: none; }
@media (max-width: 767.98px) {
  .foot-lite-in.ng-foot { grid-template-columns: 1fr; }
  .ng-foot-note { order: -1; }
  .ng-foot-r { display: none; }
}

/* chain mode: a fold of addresses with nothing hanging from them (graph.js treeItems), a dashed ring round its dot */
.ng-node.is-fold .ng-dot { stroke: var(--ng-label-2); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.ng-node.is-fold .ng-halo { opacity: 0.35; }
/* chain mode: following the money by itself (graph.js autoTrace) */
.ng-auto-b { margin: 6px 0 4px; }

/* money through a protocol (graph.js viaKind): the line to or from it in the protocol's colour, a line across chains
   dashed, the swap's way back dashed; the protocol's dot in its colour */
.ng-line.is-flow:is(.via-swap, .via-bridge, .via-cross, .via-exchange, .via-lending, .via-mixer) { stroke: var(--vk); color: var(--vk); }
.ng-line.is-flow.via-swap { --vk: var(--ng-k-swap); }
.ng-line.is-flow.via-bridge { --vk: var(--ng-k-bridge); }
.ng-line.is-flow.via-cross { --vk: var(--ng-k-cross); }
.ng-line.is-flow.via-exchange { --vk: var(--ng-k-exchange); }
.ng-line.is-flow.via-lending { --vk: var(--ng-k-lending); }
.ng-line.is-flow.via-mixer { --vk: var(--ng-k-mixer); }
.ng-line.is-flow:is(.via-swap, .via-bridge, .via-cross, .via-exchange, .via-lending, .via-mixer) .ng-fl-run { stroke: #fff; stroke-opacity: 0.6; }
.ng-line.is-flow.via-cross .ng-fl-band, .ng-line.is-flow.is-link.via-swap .ng-fl-band { stroke-dasharray: 9 6; }
.ng-node.k-swap .ng-dot { fill: var(--ng-k-swap); stroke: var(--ng-k-swap); }
.ng-node.k-bridge .ng-dot, .ng-node.k-cross .ng-dot { fill: var(--ng-k-bridge); stroke: var(--ng-k-bridge); }
.ng-node.k-exchange .ng-dot { fill: var(--ng-k-exchange); stroke: var(--ng-k-exchange); }
.ng-node.k-lending .ng-dot { fill: var(--ng-k-lending); stroke: var(--ng-k-lending); }
.ng-node.k-mixer .ng-dot { fill: var(--ng-k-mixer); stroke: var(--ng-k-mixer); }
.ng-lg-line.is-flow:is(.via-swap, .via-bridge, .via-cross, .via-exchange, .via-lending, .via-mixer) { border-top-color: var(--vk); }
.ng-lg-line.via-swap { --vk: var(--ng-k-swap); } .ng-lg-line.via-cross { --vk: var(--ng-k-cross); border-top-style: dashed; }
.ng-lg-line.via-bridge { --vk: var(--ng-k-bridge); } .ng-lg-line.via-exchange { --vk: var(--ng-k-exchange); }
.ng-lg-line.via-lending { --vk: var(--ng-k-lending); } .ng-lg-line.via-mixer { --vk: var(--ng-k-mixer); }
/* the panorama: a protocol's ring and the swap's way back in its colour */
.ng-pn.is-k-swap :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-k-swap); stroke-width: 2.5; }
.ng-pn.is-k-bridge :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-k-bridge); stroke-width: 2.5; }
.ng-pn.is-k-exchange :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-k-exchange); stroke-width: 2.5; }
/* an exchange on the panorama: white, edged in its chain's colour */
.ng-pn.is-ex :is(circle, rect, path):not(.ng-pn-stack) { fill: var(--ng-k-exchange); fill-opacity: 0.95; stroke: var(--c); stroke-width: 2.5; }
.ng-pn.is-sel :is(circle, rect, path):not(.ng-pn-stack) { filter: drop-shadow(0 0 5px rgb(255 255 255 / 0.85)); }
.ng-pn.is-k-lending :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-k-lending); stroke-width: 2.5; }
.ng-pn.is-k-mixer :is(circle, rect, path):not(.ng-pn-stack) { stroke: var(--ng-k-mixer); stroke-width: 2.5; }
.ng-pe.is-swap { stroke: var(--ng-k-swap); stroke-opacity: 0.75; }
.ng-pe.is-cross { stroke: var(--ng-k-cross); }
.ng-pe.is-k-swap { stroke: var(--ng-k-swap); } .ng-pe.is-k-bridge { stroke: var(--ng-k-bridge); }
.ng-pe.is-k-exchange { stroke: var(--ng-k-exchange); } .ng-pe.is-k-lending { stroke: var(--ng-k-lending); } .ng-pe.is-k-mixer { stroke: var(--ng-k-mixer); }
/* a panorama line's arrow in its line's colour; the selected address's lines in and out over all of them */
.ng-pl.is-swap { --pa: var(--ng-k-swap); } .ng-pl.is-cross { --pa: var(--ng-k-cross); }
.ng-pl.is-k-swap { --pa: var(--ng-k-swap); } .ng-pl.is-k-bridge { --pa: var(--ng-k-bridge); } .ng-pl.is-k-exchange { --pa: var(--ng-k-exchange); }
.ng-pl.is-k-lending { --pa: var(--ng-k-lending); } .ng-pl.is-k-mixer { --pa: var(--ng-k-mixer); }
.ng-pl.is-in .ng-pe { stroke: var(--ng-in); stroke-opacity: 0.95; }
.ng-pl.is-out .ng-pe { stroke: var(--ng-out); stroke-opacity: 0.95; }
.ng-pl.is-in { --pa: var(--ng-in); }
.ng-pl.is-out { --pa: var(--ng-out); }
.ng-pl:is(.is-in, .is-out) .ng-pa { fill-opacity: 1; }