Clarify active grid filters

src/app/globals.css

@@ -71,6 +71,44 @@ body {
   opacity: 0.45;
 }
 
+.active-view-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid #bfdbfe;
+  border-radius: 5px;
+  background: #eff6ff;
+  color: #1e3a5f;
+  font-size: 0.78rem;
+}
+
+.active-view-label {
+  font-weight: 600;
+}
+
+.active-view-chip,
+.active-view-reset {
+  border: 1px solid #93b4df;
+  border-radius: 999px;
+  background: #fff;
+  color: #1e3a5f;
+  padding: 0.18rem 0.48rem;
+  font-size: 0.76rem;
+  cursor: pointer;
+}
+
+.active-view-chip:hover,
+.active-view-reset:hover {
+  border-color: #2563eb;
+}
+
+.active-view-reset {
+  margin-left: auto;
+  font-weight: 600;
+}
+
 .column-settings-menu {
   position: absolute;
   z-index: 9;
@@ -278,6 +316,7 @@ body {
 .tree-grid .header-filter-btn.active {
   border-color: #2563eb;
   color: #2563eb;
+  background: #eff6ff;
 }
 
 .tree-grid .header-filter-menu {
@@ -293,13 +332,33 @@ body {
   padding: 0.35rem;
 }
 
+.tree-grid .header-filter-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.4rem;
+  margin-bottom: 0.35rem;
+  font-size: 0.72rem;
+}
+
+.tree-grid .header-filter-explanation {
+  margin-bottom: 0.4rem;
+  color: #4b5563;
+  font-size: 0.72rem;
+  line-height: 1.3;
+  white-space: normal;
+}
+
 .tree-grid .header-filter-clear {
   border: 1px solid #c4cddc;
   background: #fff;
   border-radius: 3px;
   font-size: 0.72rem;
   padding: 0.12rem 0.3rem;
-  margin-bottom: 0.25rem;
+}
+
+.tree-grid .header-filter-clear:disabled {
+  opacity: 0.45;
 }
 
 .tree-grid .header-filter-values {