.popup-host { position: relative; }
.popup-trigger { cursor: help; outline: none; }
.info-popup {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  left: 50%;
  display: none;
  width: max-content;
  min-width: 245px;
  max-width: min(360px, calc(100vw - 28px));
  padding: 9px 11px;
  transform: translateX(-50%);
  border: 1px solid #41516a;
  border-radius: 7px;
  background: rgba(8,13,22,.98);
  box-shadow: 0 10px 30px rgba(0,0,0,.48);
  color: var(--muted);
  font: 13.2px/1.55 ui-monospace,monospace;
  white-space: normal;
}
.info-popup::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #41516a;
}
.info-popup div { display: flex; justify-content: space-between; gap: 18px; }
.info-popup strong { color: var(--text); white-space: nowrap; }
.info-popup .popup-alert { color: #ff3b4f; }
.info-popup .popup-buy span,
.info-popup .popup-buy strong { color: var(--up); }
.info-popup .popup-sell span,
.info-popup .popup-sell strong { color: var(--down); }
.popup-host[data-popup-align="right"] .info-popup { right: 0; left: auto; transform: none; }
.popup-host[data-popup-align="right"] .info-popup::before { right: 14px; left: auto; transform: none; }
.popup-host:hover .info-popup,
.popup-host:focus-within .info-popup { display: block; }