/* Motion is decorative. The line always follows actual donation values. */
.card,
.stat {
  background: linear-gradient(145deg, #2b2a2a, #242424 55%);
  border-color: #ffffff0e;
  box-shadow:
    inset 0 1px 0 #ffffff08,
    0 14px 35px -25px #0009;
}
.card {
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.card:hover {
  border-color: #ffffff1b;
  box-shadow:
    inset 0 1px 0 #ffffff0a,
    0 18px 42px -26px #000b;
}
.chart {
  background: radial-gradient(ellipse at 52% 95%, #7665f414, transparent 68%);
}
.chart-halo {
  opacity: 0.2;
  filter: blur(4px);
  pointer-events: none;
}
.chart-current {
  stroke-dasharray: 32 968;
  animation: chart-current 7s linear infinite;
  filter: drop-shadow(0 0 4px #b6a5ff);
  pointer-events: none;
}
.chart-crosshair {
  pointer-events: none;
}
@keyframes chart-current {
  to {
    stroke-dashoffset: -1000;
  }
}
.chart-caption {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 22px;
  color: #95939e;
  font-size: 10px;
}
.chart-caption > span:last-child {
  margin-left: auto;
}
.signal-dot {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: #aaa2ff;
  box-shadow: 0 0 9px #aaa2ff70;
}
.chart-tooltip {
  background: #25242bf5;
  border-color: #7a708748;
  box-shadow: 0 16px 40px #0005;
  backdrop-filter: blur(12px);
}
.chart-point.highlighted,
.chart-point:focus {
  fill: #c2baff;
  stroke: #fff;
  r: 4;
}
.select-control {
  position: relative;
  min-width: 140px;
  max-width: 100%;
}
.select-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  border: 1px solid #ffffff1a;
  border-radius: 9px;
  background: linear-gradient(#303030, #282828);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}
.select-trigger::after {
  content: '';
  border-right: 1.5px solid #aaa;
  border-bottom: 1.5px solid #aaa;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  margin-top: -3px;
}
.select-trigger[aria-expanded='true'] {
  border-color: #e56a4a;
  box-shadow: 0 0 0 3px #e56a4a15;
}
.select-options {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, 80vw);
  max-height: 270px;
  overflow: auto;
  z-index: 45;
  padding: 5px;
  background: #292929;
  border: 1px solid #ffffff20;
  border-radius: 11px;
  box-shadow: 0 16px 40px #0008;
}
.select-options[hidden] {
  display: none;
}
.select-options button {
  display: block;
  width: 100%;
  padding: 9px 32px 9px 11px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 13px;
  text-align: left;
  font-weight: 400;
}
.select-options button:hover,
.select-options button:focus {
  background: #ffffff0b;
  outline: none;
}
.select-options button[aria-selected='true'] {
  color: #f1a18b;
  background: #e56a4a14;
}
.select-options button[aria-selected='true']::after {
  content: '✓';
  position: absolute;
  right: 15px;
}
.field .select-control {
  width: 100%;
}
.connection-guide {
  margin-bottom: 22px;
}
.connection-guide p {
  color: #a4a1a7;
  font-size: 13px;
  line-height: 1.8;
}
.connection-guide .local-warning {
  color: #e3bc83;
}
@media (max-width: 680px) {
  .chart-caption > span:last-child {
    display: none;
  }
  .top-actions .select-control {
    min-width: 110px;
    max-width: 140px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chart-current {
    animation: none;
    display: none;
  }
}