@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
  }

  .badge-yes,
  .badge-active { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
  .badge-no { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-tertiary); }
  .badge-sentiment { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
  .badge-alert { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong);
    color: var(--text-secondary);
  }

  .trend-delta {
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .delta-up { color: var(--up); }
  .delta-down { color: var(--down); }
  .trend-delta .trend-delta-label { color: var(--text-secondary); font-weight: 400; }
}