Saved Filters Pills

<div class="nuda-chip-saved">
  <span class="nuda-chip-saved__label">Saved</span>
  <button type="button" class="nuda-chip-saved__pill nuda-chip-saved__pill--active">
    <span class="nuda-chip-saved__dot"></span>
    High value · EU
  </button>
  <button type="button" class="nuda-chip-saved__pill">
    <span class="nuda-chip-saved__dot"></span>
    Churn risk
  </button>
  <button type="button" class="nuda-chip-saved__pill">
    <span class="nuda-chip-saved__dot"></span>
    New this week
  </button>
  <button type="button" class="nuda-chip-saved__pill nuda-chip-saved__pill--add">
    + Save view
  </button>
</div>

/* Saved Filters Pills
   Clickable saved filter combos, plus a dashed "save view" pill.
   Customize: --saved-accent */

.nuda-chip-saved {
  --saved-accent: #e4ff54;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
}

.nuda-chip-saved__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #63636e;
  margin-right: 2px;
}

.nuda-chip-saved__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  color: #a0a0a8;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}

.nuda-chip-saved__pill:hover {
  color: #fafafa;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.nuda-chip-saved__pill--active {
  color: #fafafa;
  background: #111114;
  border-color: var(--saved-accent);
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.08);
}

.nuda-chip-saved__pill--add {
  color: #63636e;
  border-style: dashed;
}

.nuda-chip-saved__pill--add:hover {
  color: var(--saved-accent);
  border-color: rgba(228, 255, 84, 0.4);
}

.nuda-chip-saved__dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--saved-accent);
  box-shadow: 0 0 6px rgba(228, 255, 84, 0.6);
}

.nuda-chip-saved__pill:not(.nuda-chip-saved__pill--active) .nuda-chip-saved__dot {
  background: #63636e;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-chip-saved__pill { transition: none; }
  .nuda-chip-saved__pill:hover { transform: none; }
}