.category-pill-list {
  display: flex;
  gap: 0.75rem;
  min-width: max-content;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(251, 146, 60, 0.25);
  background: rgba(255, 255, 255, 0.7);
  color: rgb(194, 65, 12);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  outline: none;
}

.category-pill--active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(251, 146, 60, 0.38));
  border-color: rgba(251, 146, 60, 0.75);
  color: rgb(124, 45, 18);
}

.dark .category-pill--active {
  background: linear-gradient(135deg, rgba(253, 186, 116, 0.32), rgba(249, 115, 22, 0.28));
  border-color: rgba(253, 186, 116, 0.75);
  color: rgb(255, 237, 213);
}

.category-pill:hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 146, 60, 0.5);
}

.category-pill:focus-visible {
  outline: 2px solid rgba(251, 146, 60, 0.75);
  outline-offset: 2px;
}

.category-pill__name {
  white-space: nowrap;
}

.category-pill__count {
  min-width: 1.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: rgba(251, 146, 60, 0.15);
  color: inherit;
  font-size: 0.75rem;
  text-align: center;
}

.dark .category-pill {
  border-color: rgba(253, 186, 116, 0.35);
  background: rgba(17, 24, 39, 0.7);
  color: rgb(253, 186, 116);
}

.dark .category-pill:hover {
  background: rgba(253, 186, 116, 0.2);
  border-color: rgba(253, 186, 116, 0.5);
}

.category-section {
  margin-bottom: 3rem;
}

.category-section__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .category-section__header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.category-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(17, 24, 39);
}

.dark .category-section__title {
  color: rgb(255, 255, 255);
}

.category-default-badge {
  margin-left: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(59, 130, 246, 0.12);
  color: rgb(37, 99, 235);
  font-size: 0.75rem;
  font-weight: 600;
}

.dark .category-default-badge {
  background: rgba(147, 197, 253, 0.16);
  color: rgb(191, 219, 254);
}

.category-section__description {
  font-size: 0.9rem;
  color: rgb(75, 85, 99);
}

.dark .category-section__description {
  color: rgb(156, 163, 175);
}

.category-section__manage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: rgb(30, 64, 175);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.category-section__manage-link:hover {
  background: rgba(59, 130, 246, 0.15);
  color: rgb(29, 78, 216);
}

.dark .category-section__manage-link {
  border-color: rgba(147, 197, 253, 0.4);
  color: rgb(191, 219, 254);
}

.dark .category-section__manage-link:hover {
  background: rgba(96, 165, 250, 0.18);
  color: rgb(191, 219, 254);
}

.category-section__empty {
  border-radius: 1.5rem;
  border: 1px dashed rgba(251, 146, 60, 0.35);
  background: rgba(255, 255, 255, 0.8);
  padding: 3rem 1.5rem;
  text-align: center;
}

.category-section__empty .empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1rem;
  border-radius: 9999px;
  background: rgba(251, 191, 36, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(249, 115, 22);
  font-size: 1.8rem;
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(55, 65, 81);
}

.empty-subtitle {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: rgb(107, 114, 128);
}

.dark .category-section__empty {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(17, 24, 39, 0.85);
}

.dark .category-section__empty .empty-icon {
  background: rgba(234, 88, 12, 0.25);
  color: rgb(253, 186, 116);
}

.dark .empty-title {
  color: rgb(226, 232, 240);
}

.dark .empty-subtitle {
  color: rgb(156, 163, 175);
}