.chip {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.chip:hover {
  border-color: rgba(106, 141, 115, 0.48);
  transform: translateY(-1px);
}

.chip.selected {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, rgba(106, 141, 115, 0.22), rgba(106, 141, 115, 0.14));
  box-shadow: 0 8px 20px rgba(51, 92, 68, 0.18);
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.chip.selected span { font-weight: 700; }

.toggle-compact:has(input:checked) {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, rgba(106, 141, 115, 0.18), rgba(106, 141, 115, 0.12));
  box-shadow: 0 10px 22px rgba(51, 92, 68, 0.1);
}