LGTM

frontend/src/index.css

@@ -364,6 +364,68 @@ h3 {
   bottom: calc(var(--map-mobile-bottom-inset, 0px) + 0.25rem) !important;
 }
 
+/* Highlight flash for newly added filter cards — animated green stroke. */
+@property --filter-highlight-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes filter-highlight-spin {
+  to {
+    --filter-highlight-angle: 360deg;
+  }
+}
+
+@keyframes filter-highlight-fade {
+  0%,
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.filter-highlight-flash {
+  position: relative;
+}
+
+.filter-highlight-flash::after {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: 6px;
+  padding: 2px;
+  background: conic-gradient(
+    from var(--filter-highlight-angle, 0deg),
+    rgba(29, 228, 195, 0) 0%,
+    #1de4c3 18%,
+    #05c9aa 32%,
+    rgba(29, 228, 195, 0) 50%,
+    #1de4c3 68%,
+    #05c9aa 82%,
+    rgba(29, 228, 195, 0) 100%
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation:
+    filter-highlight-spin 1s linear infinite,
+    filter-highlight-fade 2s ease-out forwards;
+  pointer-events: none;
+  z-index: 20;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .filter-highlight-flash::after {
+    background: rgba(29, 228, 195, 0.9);
+    animation: filter-highlight-fade 2s ease-out forwards;
+  }
+}
+
 /* Hide scrollbar for pill groups on mobile */
 .scrollbar-hide {
   -ms-overflow-style: none;