.trading-stats .section-heading { margin-bottom: 24px; }

.stats-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.stats-jump a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 5px;
  background: #15101e;
  color: #e9d9f5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: background .2s ease, border-color .2s ease;
}

.stats-jump a:hover { border-color: #8b6ba3; background: #21162d; }
.stats-jump img { object-fit: contain; }
.stats-jump svg { width: 14px; height: 14px; color: #c9a3e3; }

@media (max-width: 550px) {
  .stats-jump { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

.fusion-volume {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid #514067;
  border-radius: 8px;
  background: radial-gradient(ellipse at 8% 0, #261536, transparent 73%), #110e1b;
}

.fusion-summary,
.fusion-route {
  min-width: 0;
  padding: clamp(19px, 3.1vw, 42px);
}

.fusion-kicker,
.fusion-route-kicker {
  margin: 0;
  color: #d6b3f3;
}

.fusion-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fusion-summary h3 {
  margin: 12px 0 8px;
  font-size: clamp(23px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.055em;
}

.fusion-total {
  display: block;
  color: #ead1ff;
  font-size: clamp(54px, 7.2vw, 103px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: .98;
  letter-spacing: -.04em;
}

.fusion-period { margin: 12px 0 0; color: #cdaee8; }
.fusion-note { max-width: 43ch; margin: 12px 0 10px; color: var(--muted); font-size: 14px; }
.fusion-method { max-width: 43ch; margin: 0 0 7px; color: var(--quiet); font-size: 12px; }

.fusion-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-bright);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fusion-source:hover { color: #fff; }
.fusion-source svg { width: 14px; height: 14px; flex: none; }

.fusion-route {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 15px;
  border-left: 1px solid #3c2b52;
  background:
    radial-gradient(ellipse at 52% 45%, #2d1b49 0%, transparent 73%),
    radial-gradient(circle at 1px 1px, #4c3868 1px, transparent 1.1px) 0 0 / 24px 24px,
    #110d20;
}

.fusion-diagram { position: relative; width: 100%; }
.fusion-wiring { position: absolute; inset: 0 0 auto; width: 100%; height: 112px; }
.fusion-orbit { stroke: #523c74; stroke-width: 1; }
.fusion-wire { stroke: #a77bd3; stroke-width: 1; }
.fusion-packet {
  stroke: #e9bdff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 13 87;
  stroke-dashoffset: 13;
  filter: drop-shadow(0 0 5px #b274f9);
  animation: fusion-flow 4.8s linear infinite paused;
}

.fusion-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
  text-align: center;
}

.fusion-nodes li { display: grid; justify-items: center; align-content: start; gap: 4px; }
.fusion-nodes strong { margin-top: 6px; font-size: clamp(12px, 1.6vw, 19px); line-height: 1.15; }
.fusion-nodes .micro { color: #c9aadf; font-size: 9px; letter-spacing: .06em; }

.fusion-node-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid #8061a1;
  border-radius: 14px;
  background: linear-gradient(145deg, #322247, #170e25);
  box-shadow: inset 0 1px 0 #dfbcff3d, 0 3px 18px #7d4aa453;
}

.fusion-node-icon img { object-fit: contain; }
.fusion-node-resolver {
  border-color: #8abac5;
  background: linear-gradient(145deg, #28424f, #151b2b);
  color: #bdf2f5;
  font: 400 17px/1 var(--mono);
}

.fusion-node-resolver::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid #bdf2f5;
  border-radius: inherit;
  opacity: 0;
  animation: fusion-resolve 4.8s ease-out infinite paused;
}

.fusion-volume.is-in-view .fusion-packet,
.fusion-volume.is-in-view .fusion-node-resolver::after {
  animation-play-state: running;
}

:root[data-motion-paused] .fusion-volume .fusion-packet,
:root[data-motion-paused] .fusion-volume .fusion-node-resolver::after {
  animation-play-state: paused;
}

@keyframes fusion-flow {
  0% { stroke-dashoffset: 13; opacity: 0; }
  12% { opacity: 1; }
  76% { opacity: 1; }
  83%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes fusion-resolve {
  0%, 38% { transform: scale(1); opacity: 0; }
  43% { opacity: .8; }
  66%, 100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 760px) {
  .fusion-volume { grid-template-columns: minmax(0, 1fr); }
  .fusion-route { border-top: 1px solid #3c2b52; border-left: 0; }
}

@media (max-width: 500px) {
  .fusion-route { padding-inline: 9px; }
  .fusion-nodes { padding-top: 32px; }
  .fusion-node-icon { width: 48px; height: 48px; border-radius: 11px; }
}

.trading-stats .stats-shell {
  --stats-inset: clamp(14px, 2.2vw, 26px);
  min-width: 0;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  background: radial-gradient(ellipse at 8% 0, #1a1125, transparent 65%), var(--surface);
}

.trading-stats .stats-shell [hidden] { display: none; }

.stats-live-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  padding: clamp(14px, 2.2vw, 24px) var(--stats-inset);
  border-bottom: 1px solid var(--line);
}

.stats-live-header h3 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 31px);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.stats-live-header p { margin: 0; color: var(--muted); font-size: 13px; }

.trading-stats .stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px 22px;
  padding: 11px var(--stats-inset);
  border-bottom: 1px solid var(--line);
  background: #15101f;
}

.trading-stats .stats-status {
  --stats-signal: #c5a6e4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  color: var(--muted);
  font: 400 12px/1.55 var(--mono);
}

.trading-stats .stats-status:is([data-state="ready"], [data-state="live"]) { --stats-signal: #93debc; }
.trading-stats .stats-status[data-state="stale"] { --stats-signal: #e8c08d; }
.trading-stats .stats-status[data-state="error"] { --stats-signal: #f1a6b8; }

.trading-stats .stats-dot {
  display: inline-block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stats-signal);
  box-shadow: 0 0 8px color-mix(in srgb, var(--stats-signal) 55%, transparent);
}

.trading-stats .stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  min-width: 0;
}

.trading-stats .stats-controls label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 9px;
  color: var(--muted);
  font: 400 12px/1.45 var(--mono);
}

.trading-stats .stats-controls :is(select, button) {
  min-height: 40px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid #543b65;
  border-radius: 4px;
  background: #22162f;
  color: #ead8fa;
  font: 700 13px/1.3 var(--display);
}

.trading-stats .stats-controls :is(select, button):hover:not(:disabled) {
  border-color: #9469b0;
  background: #302041;
}

.trading-stats .stats-controls :is(select, button):focus-visible {
  outline-offset: 2px;
}

.trading-stats .stats-controls :is(select, button):disabled {
  opacity: .58;
  cursor: default;
}

.trading-stats .stats-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.trading-stats .stats-controls button svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.trading-stats .stats-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 183px), 1fr));
  gap: 9px;
  margin: 0;
  padding: var(--stats-inset);
}

.trading-stats .stats-metric {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 126px;
  padding: clamp(12px, 1.65vw, 20px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: radial-gradient(ellipse at 12% 0, #22152f, transparent 80%), #100c18;
}

.trading-stats .stats-label {
  margin: 0;
  color: var(--accent-bright);
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.trading-stats .stats-value {
  margin: 0;
  color: var(--text);
  font: 700 clamp(29px, 3.65vw, 51px)/.98 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
  overflow-wrap: anywhere;
}

.trading-stats .stats-detail {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.trading-stats .stats-activity {
  min-width: 0;
  padding: 0 var(--stats-inset) var(--stats-inset);
}

.trading-stats .stats-activity-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  margin-bottom: 12px;
}

.trading-stats .stats-activity-heading h4 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.18;
  letter-spacing: -.04em;
}

.trading-stats .stats-activity-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.trading-stats .stats-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #100c17;
  scrollbar-color: #604779 #120d1a;
}

.trading-stats .stats-table-wrap:focus-visible {
  outline-offset: 2px;
}

.trading-stats .stats-table {
  width: 100%;
  min-width: 31rem;
  border-spacing: 0;
  border-collapse: collapse;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.trading-stats .stats-table :is(th, td) {
  padding: 12px clamp(10px, 1.45vw, 19px);
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.trading-stats .stats-table thead th {
  background: #191223;
  color: #d5bedf;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .065em;
  text-transform: uppercase;
}

.trading-stats .stats-table tbody tr:last-child > * {
  border-bottom: 0;
}

.trading-stats .stats-table tbody tr:nth-child(even) {
  background: #17101f;
}

.trading-stats .stats-table tbody tr:focus-within {
  background: #21152c;
}

.trading-stats .stats-table :is(th, td):nth-child(4) {
  text-align: end;
  white-space: nowrap;
}

.trading-stats .stats-table tbody :is(td, th):is(:first-child, :nth-child(2)) {
  color: var(--muted);
}

.trading-stats .stats-table tbody :is(td, th):nth-child(3) {
  width: 35%;
  font-weight: 700;
}

.trading-stats .stats-table a,
.trading-stats .stats-footer a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-decoration-color: #9576ac;
  text-underline-offset: 3px;
}

.trading-stats .stats-table a:hover,
.trading-stats .stats-footer a:hover {
  color: #f8eaff;
  text-decoration-color: currentColor;
}

.trading-stats .stats-table a svg {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -.12em;
}

.trading-stats .stats-empty {
  margin: 0;
  padding: 18px 14px;
  color: var(--muted);
  font-size: 14px;
}

.trading-stats .stats-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 11px var(--stats-inset);
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.55;
}

.trading-stats .stats-footer p { margin: 0; }

@media (max-width: 900px) {
  .trading-stats .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trading-stats .stats-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 500px) {
  .trading-stats .stats-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .trading-stats .stats-controls :is(select, button) { min-height: 44px; }
  .trading-stats .stats-metric { min-height: 110px; gap: 6px; }
  .trading-stats .stats-label { font-size: 10px; }
  .trading-stats .stats-value { font-size: clamp(25px, 7.2vw, 35px); }
  .trading-stats .stats-detail { font-size: 12px; }
  .trading-stats .stats-table { font-size: 13px; }
  .trading-stats .stats-table :is(th, td) { padding-block: 10px; }
}

.trading-stats .stats-chart {
  --chart-accent: #c8a0fb;
  margin: 0 var(--stats-inset) var(--stats-inset);
  min-width: 0;
  padding: clamp(13px, 2vw, 22px);
  border: 1px solid #39264b;
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 64% 45%, #2b1740 0%, transparent 70%),
    #120d1a;
}
.trading-stats .stats-chart[data-metric="volume"] { --chart-accent: #9bdcdd; }

.trading-stats .stats-chart-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 20px;
  margin-bottom: 16px;
}

.trading-stats .stats-chart-heading h4 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.18;
  letter-spacing: -.04em;
}

.trading-stats .stats-chart-heading p,
.trading-stats .stats-chart-empty,
.trading-stats .stats-chart-note {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.trading-stats .stats-chart-empty {
  display: grid;
  place-items: center;
  min-height: 142px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.trading-stats .stats-chart-modes {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid #493659;
  border-radius: 6px;
  background: #130e1d;
}

.trading-stats .stats-chart-modes button {
  min-height: 39px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
}

.trading-stats .stats-chart-modes button[aria-pressed="true"] {
  color: var(--text);
  border-color: #6a4c82;
  background: #352249;
}

.trading-stats .stats-chart-modes button:disabled { opacity: .62; cursor: default; }

.trading-stats .stats-chart-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 32px;
  color: var(--muted);
  font: 400 12px/1.45 var(--mono);
}

.trading-stats .stats-chart-readout strong {
  color: var(--chart-accent);
  font-weight: 600;
}

.trading-stats .stats-chart-graph {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  font: 400 10px/1.3 var(--mono);
  color: var(--muted);
}

.trading-stats .stats-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: end;
}

.trading-stats .stats-chart-plot {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  height: clamp(132px, 16vw, 205px);
  border-block: 1px solid #70538b55;
  background: linear-gradient(transparent calc(50% - 0.5px), #70538b55 50%, transparent calc(50% + 0.5px));
}

.trading-stats .stats-chart-column {
  display: flex;
  align-items: end;
  justify-content: center;
  cursor: crosshair;
  border-radius: 3px 3px 0 0;
}

.trading-stats .stats-chart-column.is-selected { background: #c6a0f21e; }

.trading-stats .stats-chart-bar {
  display: block;
  width: 65%;
  height: max(2px, var(--bar-height, 0%));
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--chart-accent), color-mix(in srgb, var(--chart-accent) 36%, #221431));
  box-shadow: 0 0 11px color-mix(in srgb, var(--chart-accent) 22%, transparent);
  transition: height .28s ease;
}

.trading-stats .stats-chart-column.is-selected .stats-chart-bar { filter: brightness(1.25); }
.trading-stats .stats-chart-column[data-zero] .stats-chart-bar { background: #66497f; box-shadow: none; }
.trading-stats .stats-chart-column[data-unpriced] .stats-chart-bar {
  height: 9px;
  background: repeating-linear-gradient(135deg, #d1a6f375 0 2px, transparent 2px 4px);
  box-shadow: none;
}

.trading-stats .stats-chart-axis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 9px;
}

.trading-stats .stats-chart-scrub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font: 400 11px/1.3 var(--mono);
}

.trading-stats .stats-chart-scrub input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  margin: 0;
  accent-color: var(--chart-accent);
}

.trading-stats .stats-chart-details { margin-top: 7px; }
.trading-stats .stats-chart-details summary {
  width: fit-content;
  min-height: 28px;
  padding: 4px 0;
  color: var(--accent-bright);
  cursor: pointer;
  font-size: 12px;
}

.trading-stats .stats-chart-details[open] .stats-table-wrap {
  margin-top: 6px;
  max-height: 310px;
  overflow: auto;
}

.trading-stats .stats-chart-table tbody th { font-weight: 500; }
.trading-stats .stats-chart-table tbody td:nth-child(3) { width: auto; font-weight: 400; }

:root[data-motion-paused] .trading-stats .stats-chart-bar { transition: none; }

@media (max-width: 500px) {
  .trading-stats .stats-chart-modes button { min-height: 44px; }
  .trading-stats .stats-chart-graph { font-size: 9px; gap: 6px; }
  .trading-stats .stats-chart-scrub input { min-height: 44px; }
}