feat: компонент фильтр-чипов в дизайн-систему + фильтр проектов на /ai-dev/

public/css/main.css

@@ -3570,6 +3570,82 @@ body.home .section__title {
   white-space: nowrap;
 }
 
+/* ==========================================================================
+ Фильтр-чипы — переключаемая группа тегов для фильтрации карточек.
+   Разметка: .filter-chips > button.filter-chip[aria-pressed] (или .filter-chip--all).
+   Партнёр: элементы с [data-filter-item] и [data-filter-tag~="<значение>"].
+   ========================================================================== */
+
+.filter-chips {
+  list-style: none;
+  margin: 0 0 1.25rem;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.45rem;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.35rem 0.75rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--surface) 78%, transparent);
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    color 0.18s ease,
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.filter-chip:hover {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
+}
+
+/* Выбранный чип — акцентная заливка. aria-pressed держит состояние явным,
+   поэтому оформление не зависит от :focus и переживает клик без залипания. */
+.filter-chip[aria-pressed="true"] {
+  color: var(--accent-text);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+}
+
+.filter-chip:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.filter-chip__count {
+  margin-left: 0.45rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.72rem;
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .filter-chip {
+    transition: none;
+  }
+}
+
+/* Скрытие несовпавших карточек: display:none, чтобы grid не оставлял дыр.
+   Плавное затухание вместо этого потребовало бы анимации высоты —
+   для фильтра мгновенный отклик важнее. */
+[data-filter-item][hidden] {
+  display: none;
+}
+
 .mp-card__media {
   position: relative;
   z-index: 1;