/* Utility classes replacing Tailwind for Category/Tag List */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.max-w-4xl { max-width: 56rem; }
.min-h-screen { min-height: 100vh; }
.mt-12 { margin-top: 3rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.pb-8 { padding-bottom: 2rem; }
.text-center { text-align: center; }
.border-b-2 { border-bottom-width: 2px; }
.border-b { border-bottom-width: 1px; }
.border-gray-100 { border-color: #f3f4f6; }

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-bold { font-weight: 700; }
.text-gray-800 { color: #1f2937; }
.text-gray-500 { color: #6b7280; }
.text-blue-500 { color: #3b82f6; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 2rem;
}

.category-item {
    transition: background-color 0.2s;
}
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:text-blue-600:hover { color: #2563eb; }
.rounded-lg { border-radius: 0.5rem; }
.p-4 { padding: 1rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }

.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

/* Clean list style specifically */
.category-input-list {
  list-style: none;
  padding: 0;
}