feat: Implement Supabase authentication, account management UI, and entitlement services.

frontend/components/dashboard/Dashboard.module.css

@@ -1643,6 +1643,28 @@
 }
 
 /* ── Info Button ── */
+.root :global(.account-btn) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(34, 211, 238, 0.34);
+  background: rgba(34, 211, 238, 0.08);
+  color: var(--accent-cyan);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  transition: var(--transition);
+}
+.root :global(.account-btn:hover) {
+  background: rgba(34, 211, 238, 0.16);
+  border-color: rgba(34, 211, 238, 0.62);
+  color: #f8fbff;
+  transform: translateY(-1px);
+}
+
 .root :global(.info-btn) {
   background: rgba(99, 102, 241, 0.1);
   border: 1px solid rgba(99, 102, 241, 0.3);

frontend/components/dashboard/HeaderBar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import clsx from "clsx";
 import { useDashboardStore } from "@/hooks/useDashboardStore";
 import { useI18n } from "@/hooks/useI18n";
@@ -33,6 +34,15 @@ export function HeaderBar() {
           </button>
         </div>
 
+        <Link
+          href="/account"
+          className="account-btn"
+          title={t("header.accountAria")}
+          aria-label={t("header.accountAria")}
+        >
+          {t("header.account")}
+        </Link>
+
         <button
           type="button"
           className="info-btn"