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

web/css/components/app-dialog.css

@@ -50,20 +50,28 @@
   /* ── Close icon ──────────────────────────────────────────────────────── */
   dialog > article .close,
   dialog > article :is(a, button)[rel="prev"] {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    margin-top: calc(var(--app-spacing) * -1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    min-height: 2rem;
+    width: 2rem;
+    height: 2rem;
+    margin-top: calc(var(--app-spacing) * -0.5);
     margin-bottom: var(--app-spacing);
     margin-left: auto;
     border: none;
+    border-radius: var(--app-border-radius);
     background-image: var(--app-icon-close);
     background-position: center;
     background-size: auto 1rem;
     background-repeat: no-repeat;
     background-color: transparent;
     opacity: 0.5;
-    transition: opacity var(--app-transition);
+    cursor: pointer;
+    transition:
+      opacity var(--app-transition),
+      background var(--app-transition);
   }
 
   dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
@@ -71,6 +79,18 @@
     opacity: 1;
   }
 
+  dialog > article .close:hover,
+  dialog > article :is(a, button)[rel="prev"]:hover {
+    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+  }
+
+  dialog > article .close:focus-visible,
+  dialog > article :is(a, button)[rel="prev"]:focus-visible {
+    outline: 2px solid var(--app-primary);
+    outline-offset: -2px;
+    opacity: 1;
+  }
+
   /* ── Mobile: stack buttons vertically ────────────────────────────────── */
   @media (max-width: 576px) {
     dialog > article > footer,