feat(search): refresh global search UI and align qa/docs updates

web/css/components/app-tabs.css

@@ -27,7 +27,7 @@
     position: relative;
     display: flex;
     align-items: stretch;
-    border-bottom: 1px solid var(--tabs-border);
+    border-bottom: 1px solid var(--app-tabs-border);
   }
 
   /* Chevron scroll buttons — ghost icons, visible only on overflow.
@@ -36,7 +36,7 @@
   .app-tabs-nav-wrap > .app-tabs-chevron {
     --app-background-color: transparent;
     --app-border-color: transparent;
-    --app-color: var(--tabs-muted);
+    --app-color: var(--app-tabs-muted);
     --app-box-shadow: none;
     flex: 0 0 auto;
     display: none;
@@ -45,7 +45,7 @@
     border: none;
     border-radius: 50%;
     background: transparent;
-    color: var(--tabs-muted);
+    color: var(--app-tabs-muted);
     font-size: var(--text-xs);
     line-height: var(--leading-none);
     width: 24px;
@@ -119,7 +119,7 @@
   /* ------------------------------------------------------------------ */
   .app-tabs-nav {
     display: flex;
-    border-bottom: 1px solid var(--tabs-border); /* No-JS fallback border */
+    border-bottom: 1px solid var(--app-tabs-border); /* No-JS fallback border */
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     padding-block-start: 2px;
@@ -148,7 +148,7 @@
     background: transparent;
     border: 0;
     padding: 5px 10px 5px 10px;
-    color: var(--tabs-muted) !important;
+    color: var(--app-tabs-muted) !important;
     cursor: pointer;
     border-bottom: 2px solid transparent;
     text-decoration: none;
@@ -169,7 +169,7 @@
   .app-tabs-nav a.is-active {
     --app-color: inherit;
     color: var(--app-color) !important;
-    border-color: var(--tabs-active);
+    border-color: var(--app-tabs-active);
   }
 
   .app-tabs-nav button.has-invalid,