.badge {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  font-size: 0.72rem;
  margin-right: 6px;
  background: #1b1b1b;
  color: #ffffff;
}

.pills { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3px;
  background: #f4f6f8;
  border: 1px solid #ddd;
  color: #111;
  text-shadow: none;
}

.pill.active {
  background: #e9ecef;
  border-color: #ccc;
}

.pill small { opacity: 0.7; margin-left: 6px; }

.pill.gain { border-color: #d0f1d6; background: #f0faf2; }

.pill.loss { border-color: #ffd7d7; background: #fff2f2; }

.pill.pick { border-style: dashed; }

/* Ensure pills in transaction and history cards are readable (dark text) */
.tx-card .pill,
.news-card .pill,
.ros-card .pill,
.tx-badges .pill,
.tx-single .pill {
  color: #111 !important; /* high contrast black */
  text-shadow: none !important;
}

/* Make sure the <small> inside pills inherits the pill text color */
.pill small { color: inherit; opacity: 0.85; margin-left: 6px; }