.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge .icon {
  width: 12px;
  height: 12px;
}

.badge-verified {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.badge-new {
  background: var(--color-accent-100);
  color: var(--color-accent);
}

.badge-hot {
  background: var(--color-accent);
  color: #fff;
  animation: badge-pulse 1.8s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 93, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 93, 93, 0); }
}

.badge-code {
  background: var(--color-code-100);
  color: var(--color-code);
}

.badge-deal {
  background: var(--color-deal-100);
  color: var(--color-deal);
}

.badge-expiring {
  background: var(--color-accent-100);
  color: var(--color-accent);
}

.badge-muted {
  background: var(--color-canvas-2);
  color: var(--color-ink-muted);
  text-transform: none;
  letter-spacing: 0;
}

.pill-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

.meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-14);
  color: var(--color-ink-muted);
}

.meta-row > * {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.meta-row .icon {
  width: 14px;
  height: 14px;
  color: var(--color-ink-subtle);
}