diff --git a/src/components/CopyButton/styles.css b/src/components/CopyButton/styles.css
index 679afd19d..96217a1bd 100644
--- a/src/components/CopyButton/styles.css
+++ b/src/components/CopyButton/styles.css
@@ -1,71 +1,48 @@
+/* CopyButton — base styles are intentionally neutral so the containing
+   surface (footer chip row or floating island) controls color and spacing. */
 .copy-markdown-btn {
   position: relative;
+  display: inline-flex;
+  align-items: center;
   border: none;
-  flex-direction: row;
-  display: flex;
   background: none;
-  align-items: center;
   cursor: pointer;
-  position: relative;
   outline: none;
-  transition: all 0.3s ease;
-}
-
-.sparkles {
-  width: 20px;
-  height: 20px;
-}
-
-.sparkles.is-visible {
-  fill: var(--ifm-link-color);
-  margin-right: 0.3rem;
-}
-
-html[data-theme="dark"] .sparkles {
-  fill: #ffffff;
+  color: inherit;
+  transition: color 0.3s ease;
 }
 
 .copy-markdown-btn__text {
-  color: var(--ifm-link-color);
+  color: inherit;
   transition: opacity 0.3s ease;
-  margin-left: 0.3rem;
-  font-size: 1rem;
-}
-
-html[data-theme="dark"] .copy-markdown-btn__text {
-  color: var(--ifm-color-gray-100);
-}
-
-.copy-markdown-btn:hover {
-  cursor: pointer;
+  font-size: inherit;
 }
 
 .icon-container {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   pointer-events: none;
 }
 
-.icon-container.not-visible {
-  margin-right: 0.5rem;
+.sparkles {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  transition: opacity 0.3s ease;
 }
 
 .copy-markdown-btn i {
-  color: var(--ifm-color-secondary);
+  color: currentColor;
   position: absolute;
-  top: 0;
-  left: 0;
-  transition: opacity 0.3s ease;
-}
-
-.copy-markdown-btn .sparkles {
-  opacity: 1;
-}
-
-.copy-markdown-btn i.fa-check {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .copy-markdown-btn.copied .sparkles {
diff --git a/src/components/FloatingIsland/styles.css b/src/components/FloatingIsland/styles.css
index 83c0dd2d8..ee5868751 100644
--- a/src/components/FloatingIsland/styles.css
+++ b/src/components/FloatingIsland/styles.css
@@ -1,67 +1,111 @@
-.floating-island-container {
-  height: 40px;
-  width: 150px;
-  align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
+/* Floating action island — appears when the doc footer scrolls off-screen.
+   One shared treatment for all three width variants; content sizes the pill. */
+.floating-island-container,
+.floating-island-container-single,
+.floating-island-container-double {
   position: fixed;
   bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  justify-content: space-between;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: calc(var(--ifm-z-index-fixed) - 1);
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  width: auto;
+  height: auto;
+
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-background-surface-color),
+    transparent 20%
+  );
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  border: var(--pan-card-border);
+  border-radius: 999px;
+  box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.18);
 }
 
-.floating-island-container-single {
-  height: 40px;
-  width: 130px;
+.floating-island-divider {
+  width: 1px;
+  height: 1rem;
+  background-color: var(--ifm-color-emphasis-300);
+  border: 0;
+  flex-shrink: 0;
+}
+
+/* Icon buttons inside the island */
+.floating-island-container a,
+.floating-island-container-single a,
+.floating-island-container-double a {
+  display: inline-flex;
   align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
-  position: fixed;
-  bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
   justify-content: center;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 50%;
+  color: var(--ifm-color-emphasis-700);
+  text-decoration: none;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
 }
 
-.floating-island-container-double {
-  height: 40px;
-  width: 180px;
-  align-items: center;
-  display: flex;
-  border-radius: 20px;
-  background-color: var(--ifm-color-emphasis-200);
-  box-shadow: rgb(0 0 0 / 10%) 0px 2px 10px 0px;
-  z-index: calc(var(--ifm-z-index-fixed) - 1);
-  position: fixed;
-  bottom: 1.3rem;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  margin-right: auto;
-  justify-content: space-between;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  opacity: 1;
+.floating-island-container a:hover,
+.floating-island-container a:focus-visible,
+.floating-island-container-single a:hover,
+.floating-island-container-single a:focus-visible,
+.floating-island-container-double a:hover,
+.floating-island-container-double a:focus-visible {
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-color-primary),
+    transparent 88%
+  );
+  color: var(--ifm-color-primary);
+  text-decoration: none;
 }
 
-.floating-island-divider {
-  border-right: 1px solid var(--ifm-color-emphasis-300);
-  height: 1rem;
+.floating-island-container a svg,
+.floating-island-container-single a svg,
+.floating-island-container-double a svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.floating-island-container a i,
+.floating-island-container-single a i,
+.floating-island-container-double a i {
+  color: inherit;
+  margin: 0;
+  font-size: 14px;
+}
+
+/* Icon-only mode used inside the island: neutralize CopyButton's default
+   sparkle offset and let the flex-centered chip control positioning. */
+.floating-island-container .copy-markdown-btn .icon-container,
+.floating-island-container-single .copy-markdown-btn .icon-container,
+.floating-island-container-double .copy-markdown-btn .icon-container {
+  margin-right: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.floating-island-container .copy-markdown-btn .sparkles,
+.floating-island-container-single .copy-markdown-btn .sparkles,
+.floating-island-container-double .copy-markdown-btn .sparkles {
+  margin-right: 0;
+  fill: currentColor;
+}
+
+.floating-island-container .issue-button > i,
+.floating-island-container-single .issue-button > i,
+.floating-island-container-double .issue-button > i {
+  margin-left: 0;
+  width: auto;
+  height: auto;
 }
diff --git a/src/components/Issue/styles.css b/src/components/Issue/styles.css
index 89c653518..21ce2ff7c 100644
--- a/src/components/Issue/styles.css
+++ b/src/components/Issue/styles.css
@@ -1,6 +1,8 @@
-.issue-button > i {
-  color: var(--ifm-font-color-base);
-  width: 20px;
-  height: 20px;
-  margin-left: 0.5rem;
+/* Issue button — neutral defaults; containing surface controls color/spacing. */
+.issue-button {
+  color: inherit;
+}
+
+.issue-button i {
+  color: inherit;
 }
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 92a4e09ed..42c5b6623 100755
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -127,6 +127,17 @@ html:has(body):has(div):has(div):has(.homepage) {
 
   --ifm-container-width-xl: calc(1600px - var(--doc-sidebar-width));
 
+  /* START CARD */
+  --pan-card-radius: 0.5rem;
+  --pan-card-border: 1px solid var(--ifm-color-emphasis-200);
+  --pan-card-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --pan-card-shadow-hover:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --pan-card-transition: 200ms ease;
+  --pan-card-hover-lift: -2px;
+  /* END CARD */
+
   /* START NAVBAR LOGOS */
   --ifm-github-logo: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
   --ifm-medium-logo: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 1770 1000"><circle cx="500" cy="500" r="500"/><ellipse ry="475" rx="250" cy="501" cx="1296"/><ellipse cx="1682" cy="502" rx="88" ry="424"/></svg>');
@@ -179,16 +190,6 @@ html[data-theme="dark"] {
     filter: invert(1);
   }
 
-  /* START CODE TABS */
-  .tabs__item--active {
-    background-color: var(--ifm-color-gray-800) !important;
-  }
-
-  /* START MIME TABS */
-  .mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module {
-    background-color: var(--ifm-color-gray-800) !important;
-  }
-
   /* START SIDEBAR COLORS */
   .theme-doc-sidebar-container {
     button[class*="collapseSidebarButton_"],
@@ -302,15 +303,56 @@ html[data-theme="dark"] {
   .homepage-main {
     background-color: #000000;
   }
+
+  /* START CARD */
+  --pan-card-border: 1px solid var(--ifm-color-emphasis-300);
+  --pan-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
+  --pan-card-shadow-hover:
+    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  /* END CARD */
 }
 
 .homepage-main {
   background-color: #ffffff;
 }
 
-/* START CODE TABS */
+/* START CODE TABS - pill-style tabs matching sidebar/TOC active treatment */
+.tabs {
+  gap: 0.25rem;
+}
+
+.tabs__item {
+  border-radius: 0.375rem;
+  border-bottom-width: 0;
+  padding: 0.4rem 0.85rem;
+  color: var(--ifm-color-emphasis-700);
+  transition:
+    color 150ms ease,
+    background-color 150ms ease;
+
+  &:hover {
+    background-color: var(--ifm-color-emphasis-100);
+    border-bottom-color: transparent;
+    color: var(--ifm-color-emphasis-900);
+  }
+}
+
 .tabs__item--active {
-  background-color: var(--ifm-color-gray-200) !important;
+  color: var(--ifm-color-primary) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-color-primary),
+    transparent 88%
+  ) !important;
+  border-bottom-color: transparent !important;
+
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--ifm-color-primary),
+      transparent 84%
+    ) !important;
+  }
 }
 
 .responseTabsListContainer_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-ApiTabs-styles-module {
@@ -336,8 +378,13 @@ html[data-theme="dark"] {
 /* END CODE TABS */
 
 /* START MIME TABS */
-.mimeTabActive_node_modules-docusaurus-theme-openapi-docs-lib-next-theme-MimeTabs-styles-module {
-  background-color: var(--ifm-color-gray-200) !important;
+[class*="mimeTabActive_"] {
+  color: var(--ifm-color-primary) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--ifm-color-primary),
+    transparent 88%
+  ) !important;
 }
 /* END MIME TABS */
 
@@ -565,6 +612,102 @@ html[data-theme="dark"] {
 }
 /* END SIDEBAR */
 
+/* START DOC FOOTER META (Copy / Edit / Report chips) */
+.theme-doc-footer-edit-meta-row {
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.85rem;
+    border: var(--pan-card-border);
+    border-radius: 999px;
+    background-color: transparent;
+    color: var(--ifm-color-emphasis-700);
+    font-size: 0.8125rem;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      border-color 150ms ease,
+      background-color 150ms ease,
+      color 150ms ease;
+
+    &:hover,
+    &:focus-visible {
+      border-color: var(--ifm-color-primary);
+      background-color: color-mix(
+        in srgb,
+        var(--ifm-color-primary),
+        transparent 92%
+      );
+      color: var(--ifm-color-primary);
+      text-decoration: none;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    /* Issue button: icon+text wrapped in <span> — make span the flex row */
+    &.issue-button > span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    &.issue-button i {
+      font-size: 0.875rem;
+      color: inherit;
+    }
+
+    /* Copy button: normalize its internal spacing so the chip stays tidy */
+    &.copy-markdown-btn {
+      .icon-container {
+        width: 16px;
+        height: 16px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .sparkles {
+        width: 16px;
+        height: 16px;
+        margin-right: 0;
+        fill: currentColor;
+      }
+      .copy-markdown-btn__text {
+        color: inherit;
+        margin-left: 0;
+        font-size: inherit;
+      }
+      i.fa-check {
+        color: inherit;
+        font-size: 14px !important;
+      }
+    }
+  }
+
+  /* Narrow widths: collapse to icon-only circular chips so all three fit
+     on one row regardless of viewport. */
+  @media (max-width: 996px) {
+    a {
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      justify-content: center;
+      gap: 0;
+      font-size: 0;
+
+      &.copy-markdown-btn .copy-markdown-btn__text {
+        display: none;
+      }
+    }
+  }
+}
+/* END DOC FOOTER META */
+
 /* START TOC */
 .table-of-contents {
   margin-left: 0;
@@ -660,6 +803,201 @@ html[data-theme="dark"] .markdown {
 }
 /* END MARKDOWN TABLES */
 
+/* START MARKDOWN BLOCKQUOTES */
+.markdown {
+  blockquote {
+    margin: 1.5rem 0;
+    padding: 0.75rem 1.25rem;
+    background-color: var(--ifm-color-gray-100);
+    border-left: 3px solid var(--ifm-color-gray-400);
+    border-radius: 0 0.375rem 0.375rem 0;
+    color: var(--ifm-color-gray-700);
+    font-style: normal;
+    box-shadow: none;
+  }
+
+  blockquote > :first-child {
+    margin-top: 0;
+  }
+
+  blockquote > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+html[data-theme="dark"] .markdown {
+  blockquote {
+    background-color: var(--ifm-color-gray-900);
+    border-left-color: var(--ifm-color-gray-600);
+    color: var(--ifm-color-gray-300);
+  }
+}
+/* END MARKDOWN BLOCKQUOTES */
+
+/* START INLINE CODE */
+.markdown :not(pre) > code {
+  background-color: var(--ifm-color-gray-100) !important;
+  border: 1px solid var(--ifm-color-gray-200);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  color: var(--ifm-color-emphasis-900);
+  vertical-align: baseline;
+}
+
+html[data-theme="dark"] .markdown :not(pre) > code {
+  background-color: var(--ifm-color-gray-900) !important;
+  border-color: var(--ifm-color-gray-800);
+  color: var(--ifm-color-gray-100);
+}
+
+.markdown a > code,
+.markdown a:hover > code {
+  color: var(--ifm-link-color);
+}
+/* END INLINE CODE */
+
+/* START ADMONITIONS */
+.markdown .admonition,
+.markdown .theme-admonition {
+  border: 0;
+  border-left: 3px solid var(--ifm-alert-border-color);
+  border-radius: 0 0.375rem 0.375rem 0;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  box-shadow: none;
+}
+
+.markdown .admonition .admonition-heading,
+.markdown .theme-admonition [class*="admonitionHeading_"] {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.markdown .admonition .admonition-icon,
+.markdown .theme-admonition [class*="admonitionIcon_"] {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.markdown .admonition .admonition-icon svg,
+.markdown .theme-admonition [class*="admonitionIcon_"] svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.markdown .admonition > :last-child,
+.markdown .theme-admonition > :last-child {
+  margin-bottom: 0;
+}
+
+html[data-theme="dark"] .markdown .admonition.alert,
+html[data-theme="dark"] .markdown .theme-admonition {
+  background-color: var(--ifm-color-gray-900);
+}
+/* END ADMONITIONS */
+
+/* START HEADING SCROLL MARGIN */
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
+}
+/* END HEADING SCROLL MARGIN */
+
+/* START HEADING HOVER ANCHORS */
+.markdown .hash-link {
+  color: var(--ifm-color-gray-500);
+  font-weight: 400;
+  margin-left: 0.375rem;
+  text-decoration: none;
+}
+
+.markdown .hash-link:hover {
+  color: var(--ifm-color-primary);
+  text-decoration: none;
+}
+
+html[data-theme="dark"] .markdown .hash-link {
+  color: var(--ifm-color-gray-500);
+}
+
+html[data-theme="dark"] .markdown .hash-link:hover {
+  color: var(--ifm-color-primary);
+}
+/* END HEADING HOVER ANCHORS */
+
+/* START CODE BLOCK TITLE */
+.markdown [class*="codeBlockTitle_"] {
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ifm-color-gray-100) !important;
+  background-color: var(--ifm-color-gray-800);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  border-top-left-radius: var(--ifm-code-border-radius);
+  border-top-right-radius: var(--ifm-code-border-radius);
+  letter-spacing: 0.01em;
+  font-family: var(--ifm-font-family-monospace);
+}
+/* END CODE BLOCK TITLE */
+
+/* START DETAILS */
+/* Excludes API-doc details (.theme-api-markdown) which have their own styling at the API markdown rules further down. */
+.markdown details[class*="details_"]:not(.theme-api-markdown *) {
+  background-color: var(--ifm-color-gray-100) !important;
+  border-top: 0 !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 3px solid var(--ifm-color-gray-400) !important;
+  border-radius: 0 0.375rem 0.375rem 0 !important;
+  padding: 0.75rem 1.25rem !important;
+  margin: 1.5rem 0 !important;
+  box-shadow: none !important;
+  --docusaurus-details-decoration-color: var(--ifm-color-gray-600);
+}
+
+.markdown details[class*="details_"]:not(.theme-api-markdown *) > summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--ifm-color-gray-800);
+}
+
+.markdown
+  details[class*="details_"]:not(.theme-api-markdown *)
+  > summary:hover {
+  color: var(--ifm-color-primary);
+}
+
+.markdown
+  details[class*="details_"]:not(.theme-api-markdown *)
+  > div[class*="collapsibleContent_"] {
+  margin-top: 0.75rem !important;
+  padding-top: 0 !important;
+  border-top: 0 !important;
+}
+
+html[data-theme="dark"]
+  .markdown
+  details[class*="details_"]:not(.theme-api-markdown *) {
+  background-color: var(--ifm-color-gray-900) !important;
+  border-left-color: var(--ifm-color-gray-600) !important;
+  --docusaurus-details-decoration-color: var(--ifm-color-gray-400);
+}
+
+html[data-theme="dark"]
+  .markdown
+  details[class*="details_"]:not(.theme-api-markdown *)
+  > summary {
+  color: var(--ifm-color-gray-100);
+}
+/* END DETAILS */
+
 /* START LINK BUG */
 a {
   &:any-link {
@@ -671,6 +1009,17 @@ a {
 /* END LINK BUG */
 
 /* START OPENAPI */
+/* Keep the title + "required" chip on one line when the schema-depth control is present. */
+.openapi-markdown__details-summary--with-control {
+  flex-wrap: wrap !important;
+
+  > h3,
+  > strong {
+    flex-wrap: nowrap !important;
+    white-space: nowrap;
+  }
+}
+
 .api-method {
   > .menu__link {
     align-items: center;
@@ -800,15 +1149,153 @@ a {
 /* END VERSION BADGES */
 
 /* START 404 PAGE */
-.result {
-  padding: 0 var(--ifm-spacing-horizontal);
+/* The inline DocSearch trigger inside the "use our search" sentence.
+   The DocSearch button is normally full-width; constrain and frame it here. */
+.dummy-search {
+  vertical-align: middle;
+  margin: 0 0.25rem;
 }
-
 .dummy-search > button {
   pointer-events: none;
+  padding: 0.4rem 0.75rem;
+  border-radius: 0.375rem;
+}
+
+/* Suggested-result cards under "We found some pages that might match". */
+.result {
+  margin: 0.5rem 0;
+
+  a {
+    display: block;
+    padding: 0.75rem 1rem;
+    border: var(--pan-card-border);
+    border-radius: var(--pan-card-radius);
+    box-shadow: var(--pan-card-shadow);
+    color: var(--ifm-color-emphasis-800);
+    transition: var(--pan-card-transition);
+    text-decoration: none;
+
+    &:hover {
+      border-color: var(--ifm-color-primary);
+      color: var(--ifm-color-primary);
+      box-shadow: var(--pan-card-shadow-hover);
+      transform: translateY(var(--pan-card-hover-lift));
+    }
+  }
 }
 /* END 404 PAGE */
 
+/* START DOCSEARCH - Algolia modal + trigger button
+   Uses DocSearch's own --docsearch-* CSS variables so we ride on top of
+   its theming API rather than fighting individual selectors. */
+:root {
+  --docsearch-primary-color: var(--ifm-color-primary);
+  --docsearch-highlight-color: var(--ifm-color-primary);
+  --docsearch-text-color: var(--ifm-color-emphasis-900);
+  --docsearch-muted-color: var(--ifm-color-emphasis-600);
+  --docsearch-icon-color: var(--ifm-color-emphasis-600);
+  --docsearch-logo-color: var(--ifm-color-primary);
+  --docsearch-container-background: rgba(15, 23, 42, 0.5);
+  --docsearch-modal-background: var(--ifm-background-color);
+  --docsearch-modal-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
+  --docsearch-searchbox-background: var(--ifm-color-emphasis-100);
+  --docsearch-searchbox-focus-background: var(--ifm-background-color);
+  --docsearch-hit-color: var(--ifm-color-emphasis-800);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: transparent;
+  --docsearch-hit-active-color: var(--ifm-color-emphasis-900);
+  --docsearch-footer-background: var(--ifm-color-emphasis-100);
+  --docsearch-footer-shadow: 0 -1px 0 var(--ifm-color-emphasis-200);
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    var(--ifm-color-emphasis-200),
+    var(--ifm-color-emphasis-100)
+  );
+  --docsearch-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* DocSearch's own dark-theme block scopes overrides to `.DocSearch`, so ours
+   must match that specificity or the defaults will win. */
+html[data-theme="dark"] .DocSearch {
+  --docsearch-highlight-color: var(--ifm-color-primary);
+  --docsearch-text-color: var(--ifm-color-emphasis-900);
+  --docsearch-muted-color: var(--ifm-color-emphasis-500);
+  --docsearch-icon-color: var(--ifm-color-emphasis-500);
+  --docsearch-logo-color: var(--ifm-color-primary);
+  --docsearch-container-background: rgba(0, 0, 0, 0.6);
+  --docsearch-modal-background: var(--ifm-background-color);
+  --docsearch-modal-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+  --docsearch-searchbox-background: var(--ifm-color-emphasis-100);
+  --docsearch-searchbox-focus-background: var(--ifm-background-color);
+  --docsearch-hit-color: var(--ifm-color-emphasis-800);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: transparent;
+  --docsearch-hit-active-color: var(--ifm-color-emphasis-900);
+  --docsearch-footer-background: var(--ifm-color-emphasis-100);
+  --docsearch-footer-shadow: 0 -1px 0 var(--ifm-color-emphasis-200);
+  --docsearch-key-gradient: linear-gradient(
+    -225deg,
+    var(--ifm-color-emphasis-200),
+    var(--ifm-color-emphasis-100)
+  );
+  --docsearch-key-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* Container backdrop: subtle blur for a modern feel */
+.DocSearch-Container {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Modal shape matches the card treatment. overflow: hidden clips the
+   searchbox and footer to the rounded corners; without it those children
+   extend past the border-radius and look like the corners are cut. */
+.DocSearch-Modal {
+  border-radius: 0.75rem !important;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  overflow: hidden;
+}
+
+html[data-theme="dark"] .DocSearch-Modal {
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+/* Result rows: rounded hover + selected state uses site primary */
+.DocSearch-Hit a {
+  border-radius: 0.5rem;
+}
+
+.DocSearch .DocSearch-Hit[aria-selected="true"] a {
+  background-color: var(--ifm-color-emphasis-200) !important;
+}
+
+/* Kbd keys — match the modernized aesthetic */
+.DocSearch-Commands-Key,
+.DocSearch-Button-Key {
+  border-radius: 0.25rem !important;
+  border: 1px solid var(--ifm-color-emphasis-300) !important;
+  padding: 0 0.35rem !important;
+  font-weight: 600;
+}
+
+/* Trigger button in the navbar */
+.DocSearch-Button {
+  border-radius: 0.5rem;
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+
+  &:hover {
+    box-shadow: none;
+    border-color: var(--ifm-color-emphasis-300);
+    background-color: var(--ifm-color-emphasis-100);
+  }
+}
+/* END DOCSEARCH */
+
 /* START EDIT THIS PAGE */
 .theme-edit-this-page {
   display: flex;
diff --git a/src/theme/DocItem/Footer/index.tsx b/src/theme/DocItem/Footer/index.tsx
index 9b3889e66..2301f34a2 100644
--- a/src/theme/DocItem/Footer/index.tsx
+++ b/src/theme/DocItem/Footer/index.tsx
@@ -45,9 +45,7 @@ function EditMetaRow({
   return (
     <>
       <hr></hr>
-      <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, styles.docFooterEditMetaRow, "row")}>
-        <div className={clsx("col", styles.docFooterEditMetaRowItem)}>
-        </div>
+      <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, styles.docFooterEditMetaRow)}>
         <div className={styles.docFooterEditMetaRowItemRight}>
           <CopyButton isVisible={true}/>
           {editUrl && <EditThisPage editUrl={editUrl} />}
diff --git a/src/theme/DocItem/Footer/styles.module.css b/src/theme/DocItem/Footer/styles.module.css
index 763b0ff57..255f7d6dc 100644
--- a/src/theme/DocItem/Footer/styles.module.css
+++ b/src/theme/DocItem/Footer/styles.module.css
@@ -1,4 +1,5 @@
 .docFooterEditMetaRow {
+  display: flex;
   justify-content: flex-end;
 }
 
@@ -10,10 +11,11 @@
 
 .docFooterEditMetaRowItemRight {
   display: flex;
-}
-
-.docFooterEditMetaRowItemRight a {
-  margin-right: 1.25rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
 }
 
 @media (min-width: 997px) {
@@ -21,9 +23,3 @@
     text-align: right;
   }
 }
-
-@media (max-width: 996px) {
-  .docFooterEditMetaRowItem {
-    flex-basis: content;
-  }
-}