@@
-      <div class="mb-8 flex items-center justify-between"><div><h1 class="text-4xl font-bold tracking-tight text-foreground mb-2">Your Metrics Widget</h1><p class="text-muted-foreground">Manage and embed your metrics</p></div><div class="flex gap-2"><a href="/admin"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Manage Metrics</button></a><a href="mailto:herowidgethelp@gmail.com" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>Help</a><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out mr-2 h-4 w-4"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>Sign Out</button></div></div>
+      <div class="mb-8 flex items-center justify-between">
+        <div>
+          <h1 class="text-4xl font-bold tracking-tight text-foreground mb-2">Your Metrics Widget</h1>
+          <p class="text-muted-foreground">Manage and embed your metrics</p>
+        </div>
+
+        <!-- Desktop actions -->
+        <div class="hidden md:flex gap-2">
+          <a href="/admin">
+            <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+              Manage Metrics
+            </button>
+          </a>
+          <a
+            href="mailto:herowidgethelp@gmail.com"
+            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4">
+              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
+              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+            Help
+          </a>
+          <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out mr-2 h-4 w-4">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+              <polyline points="16 17 21 12 16 7"></polyline>
+              <line x1="21" x2="9" y1="12" y2="12"></line>
+            </svg>
+            Sign Out
+          </button>
+        </div>
+
+        <!-- Mobile hamburger -->
+        <button
+          type="button"
+          id="mobile-menu-button"
+          class="md:hidden inline-flex items-center justify-center rounded-md border border-input bg-background p-2 text-foreground hover:bg-accent hover:text-accent-foreground"
+          aria-label="Open menu"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-5 w-5">
+            <line x1="4" x2="20" y1="6" y2="6"></line>
+            <line x1="4" x2="20" y1="12" y2="12"></line>
+            <line x1="4" x2="20" y1="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Mobile drawer -->
+      <div
+        id="mobile-menu-backdrop"
+        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm hidden md:hidden"
+      >
+        <div
+          id="mobile-menu-drawer"
+          class="fixed inset-y-0 right-0 z-50 w-64 bg-background border-l shadow-lg px-4 py-6 flex flex-col gap-3 translate-x-full transition-transform"
+        >
+          <div class="flex items-center justify-between mb-4">
+            <span class="text-sm font-medium text-muted-foreground">Menu</span>
+            <button
+              type="button"
+              class="inline-flex items-center justify-center rounded-md border border-input bg-background p-1 text-foreground hover:bg-accent hover:text-accent-foreground"
+              data-mobile-menu-close
+              aria-label="Close menu"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+
+          <a
+            href="/admin"
+            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <span>Manage Metrics</span>
+          </a>
+
+          <a
+            href="mailto:herowidgethelp@gmail.com"
+            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <span>Help</span>
+          </a>
+
+          <button
+            type="button"
+            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <span>Sign Out</span>
+          </button>
+        </div>
+      </div>
@@
-  </body></html>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const button = document.getElementById("mobile-menu-button");
+      const backdrop = document.getElementById("mobile-menu-backdrop");
+      const drawer = document.getElementById("mobile-menu-drawer");
+      const closeButtons = document.querySelectorAll("[data-mobile-menu-close]");
+
+      if (!button || !backdrop || !drawer) return;
+
+      function openMenu() {
+        backdrop.classList.remove("hidden");
+        drawer.classList.remove("translate-x-full");
+      }
+
+      function closeMenu() {
+        drawer.classList.add("translate-x-full");
+        backdrop.classList.add("hidden");
+      }
+
+      button.addEventListener("click", openMenu);
+      backdrop.addEventListener("click", function (event) {
+        if (event.target === backdrop) {
+          closeMenu();
+        }
+      });
+
+      closeButtons.forEach(function (btn) {
+        btn.addEventListener("click", closeMenu);
+      });
+    });
+  </script>
+</body></html>