@loafmarkets/ui 0.1.384 → 0.1.385

package/dist/index.js

@@ -1900,6 +1900,7 @@ var Orderbook = React5__namespace.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
+    showTradesTab = true,
     rightHeader,
     variant = "auto",
     userOrderPrices,
@@ -1913,7 +1914,9 @@ var Orderbook = React5__namespace.forwardRef(
     ...props
   }, ref) => {
     const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem] orderbook-ll-badge", onClick: onLoafLiquidityClick });
-    const [tab, setTab] = React5__namespace.useState(defaultTab);
+    const [tab, setTabState] = React5__namespace.useState(defaultTab);
+    const setTab = setTabState;
+    const effectiveTab = showTradesTab ? tab : "orderbook";
     const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
     const { userAskPrices, userBidPrices } = React5__namespace.useMemo(() => {
@@ -2007,7 +2010,8 @@ var Orderbook = React5__namespace.forwardRef(
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     const layoutProps = {
-      tab,
+      tab: effectiveTab,
+      showTradesTab,
       handleTab,
       tradeFilter,
       setTradeFilter,
@@ -2084,6 +2088,7 @@ function SkeletonRow({ compact }) {
 }
 function DesktopOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2133,7 +2138,7 @@ function DesktopOrderbookLayout({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
@@ -2147,7 +2152,7 @@ function DesktopOrderbookLayout({
               tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -bottom-px left-0 h-[2px] w-full bg-[#E6C87E]" }) : null
             ]
           }
-        )
+        ) : null
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2286,6 +2291,7 @@ function DesktopOrderbookLayout({
 }
 function MobileOrderbookLayout({
   tab,
+  showTradesTab = true,
   handleTab,
   tradeFilter,
   setTradeFilter,
@@ -2334,7 +2340,7 @@ function MobileOrderbookLayout({
             children: "Orderbook"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        showTradesTab ? /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
             onClick: () => handleTab("trades"),
@@ -2348,7 +2354,7 @@ function MobileOrderbookLayout({
             },
             children: "Trades"
           }
-        )
+        ) : null
       ] }),
       tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 text-[0.6rem] text-white/70", children: ["all", "buy", "sell"].map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -5036,9 +5042,9 @@ var PulsingDot = styled10__default.default.span`
 `;
 function fmtCompactUsd(n) {
   const abs = Math.abs(n);
-  if (abs >= 1e6) return `$${(abs / 1e6).toFixed(2)}M`;
-  if (abs >= 1e3) return `$${(abs / 1e3).toFixed(1)}K`;
-  return `$${abs.toFixed(2)}`;
+  if (abs >= 1e6) return `${(abs / 1e6).toFixed(2)}M`;
+  if (abs >= 1e3) return `${(abs / 1e3).toFixed(1)}K`;
+  return `${abs.toFixed(2)}`;
 }
 function useIsNarrow(maxWidthPx = 768) {
   const query = `(max-width:${maxWidthPx}px)`;
@@ -5389,7 +5395,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, $menuOpen: isMobileMenuOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5865,7 +5871,8 @@ var Overlay = styled10__default.default.div`
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(3px);
-  z-index: 970;
+  /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
+  z-index: 10070;
 `;
 var MobileOnlyButton = styled10__default.default.button.attrs({ type: "button" })`
   display: none;
@@ -5913,7 +5920,11 @@ var HeaderContainer = styled10__default.default.header`
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1000;
+  /* Normally 1000. When the mobile menu is open, lift the whole header
+     (and the Nav drawer trapped inside its stacking context) above the
+     backdrop Overlay (10070) AND the trade page's modal layers (10001) so
+     the drawer renders on top instead of being dimmed by the backdrop. */
+  z-index: ${({ $menuOpen }) => $menuOpen ? 10075 : 1e3};
   width: 100%;
   /* Fallback min-height for browsers that can't evaluate calc+env */
   min-height: 56px;
@@ -6007,7 +6018,8 @@ var Nav = styled10__default.default.nav`
     max-width: 100%;
     height: calc(100dvh - var(--loaf-menu-top, calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)))));
     background: rgb(17, 17, 19);
-    z-index: 980;
+    /* Above the trade page's sticky/console layers (z 2000) + close modal (10001). */
+    z-index: 10080;
     /* Gentle fade + slide-down instead of an abrupt slide-in. */
     opacity: ${(props) => props.$isOpen ? "1" : "0"};
     transform: ${(props) => props.$isOpen ? "translateY(0)" : "translateY(-14px)"};
@@ -6025,9 +6037,12 @@ var Nav = styled10__default.default.nav`
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
+      /* safe-center keeps centering when the menu fits, but top-aligns (honouring the
+         2.5rem top padding) when the logged-in menu overflows — otherwise flex
+         centering pushes the first item + padding above the scroll area and clips it. */
+      justify-content: safe center;
       min-height: 100%;
-      padding: 2rem 1.5rem 2.5rem;
+      padding: 2.5rem 1.5rem 2.5rem;
       gap: 0.4rem;
     }
   }
@@ -6737,6 +6752,17 @@ PropertySubheader.displayName = "PropertySubheader";
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
+var CODE_PREFIX = "LOAF-";
+var CODE_SUFFIX_LEN = 5;
+var normalizeAccessCode = (raw) => CODE_PREFIX + raw.toUpperCase().replace(/^LOAF-?/, "").replace(/[^A-Z0-9]/g, "").slice(0, CODE_SUFFIX_LEN);
+var friendlyError = (err, fallback) => {
+  const data = err?.response?.data;
+  if (typeof data?.error === "string" && data.error.trim()) return data.error;
+  if (typeof data?.message === "string" && data.message.trim()) return data.message;
+  const msg = err instanceof Error ? err.message : "";
+  if (msg && !/request failed with status code/i.test(msg) && !/network error/i.test(msg)) return msg;
+  return fallback;
+};
 var LoginPopup = ({
   onClose,
   onOpenEarlyAccess,
@@ -6755,10 +6781,13 @@ var LoginPopup = ({
   renderKycWidget,
   onFundWallet,
   initialView,
+  initialCode,
   kycStatus: kycStatusProp,
   walletAddress,
   onSubmitReferralCode,
-  onJoinWaitlist
+  onValidateCode,
+  onCheckAccess,
+  gate
 }) => {
   const [view, setView] = React5.useState(() => initialView ?? "main");
   const [email, setEmail] = React5.useState("");
@@ -6766,19 +6795,17 @@ var LoginPopup = ({
   const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
   const [error, setError] = React5.useState("");
   const [copied, setCopied] = React5.useState(false);
-  const [referralCode, setReferralCode] = React5.useState("");
+  const [referralCode, setReferralCode] = React5.useState(
+    () => gate && initialCode ? normalizeAccessCode(initialCode) : ""
+  );
   const [referralLoading, setReferralLoading] = React5.useState(false);
   const [referralError, setReferralError] = React5.useState("");
-  const [waitlistLoading, setWaitlistLoading] = React5.useState(false);
-  const [waitlistMessage, setWaitlistMessage] = React5.useState("");
+  const [codeStatus, setCodeStatus] = React5.useState("idle");
+  const [signInRevealed, setSignInRevealed] = React5.useState(false);
+  const [otpStatus, setOtpStatus] = React5.useState("idle");
+  const [signInMode, setSignInMode] = React5.useState(false);
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
-  const [loginTitle] = React5.useState(() => {
-    if (typeof window === "undefined") return null;
-    const t = window.__LOAF_LOGIN_TITLE__ ?? null;
-    if (t) delete window.__LOAF_LOGIN_TITLE__;
-    return t;
-  });
   const [fundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
   const [showKycWidget, setShowKycWidget] = React5.useState(false);
@@ -6788,6 +6815,64 @@ var LoginPopup = ({
   const [fundingError, setFundingError] = React5.useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
   const suppressAutoCloseRef = React5__namespace.default.useRef(false);
+  const validatedCodeRef = React5__namespace.default.useRef(null);
+  const finishGate = React5__namespace.default.useCallback(async () => {
+    if (!gate) return true;
+    const code = validatedCodeRef.current;
+    if (code) {
+      try {
+        await onSubmitReferralCode?.(code);
+        window.dispatchEvent(new CustomEvent("loaf:onboarding-start"));
+        return true;
+      } catch {
+      }
+    }
+    const hasAccess = onCheckAccess ? await onCheckAccess() : true;
+    if (hasAccess) return true;
+    suppressAutoCloseRef.current = true;
+    validatedCodeRef.current = null;
+    setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+    setOtpStatus("idle");
+    setSignInMode(false);
+    setSignInRevealed(false);
+    setCodeStatus(code ? "invalid" : "idle");
+    setView("referral");
+    setError(
+      code ? "That code can't be redeemed anymore. Enter a different access code." : "Enter your access code to continue."
+    );
+    return false;
+  }, [gate, onSubmitReferralCode, onCheckAccess]);
+  const runCodeValidation = React5__namespace.default.useCallback(async (fullCode) => {
+    setCodeStatus("checking");
+    setError("");
+    try {
+      const ok = onValidateCode ? await onValidateCode(fullCode) : true;
+      if (!ok) {
+        validatedCodeRef.current = null;
+        setCodeStatus("invalid");
+        return;
+      }
+      validatedCodeRef.current = fullCode;
+      setCodeStatus("valid");
+      if (isAuthenticated) {
+        if (await finishGate()) setTimeout(() => onClose(), 500);
+        return;
+      }
+      setIsSignUp(true);
+      setSignInRevealed(true);
+    } catch {
+      validatedCodeRef.current = null;
+      setCodeStatus("invalid");
+    }
+  }, [onValidateCode, isAuthenticated, finishGate, onClose]);
+  const autoCodeTriedRef = React5__namespace.default.useRef(false);
+  React5.useEffect(() => {
+    if (autoCodeTriedRef.current || !gate || !initialCode) return;
+    const full = normalizeAccessCode(initialCode);
+    if (full.length !== CODE_PREFIX.length + CODE_SUFFIX_LEN) return;
+    autoCodeTriedRef.current = true;
+    void runCodeValidation(full);
+  }, [gate, initialCode, runCodeValidation]);
   React5.useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
@@ -6842,11 +6927,11 @@ var LoginPopup = ({
   }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose, view]);
   React5.useEffect(() => {
     const handleEsc = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape" && !gate) onClose();
     };
     window.addEventListener("keydown", handleEsc);
     return () => window.removeEventListener("keydown", handleEsc);
-  }, [onClose]);
+  }, [onClose, gate]);
   const handleWalletLogin = async () => {
     if (onWalletLogin) {
       suppressAutoCloseRef.current = true;
@@ -6858,12 +6943,16 @@ var LoginPopup = ({
           setView("wallet-handle");
           return;
         }
-        suppressAutoCloseRef.current = false;
-        onClose();
+        if (await finishGate()) {
+          suppressAutoCloseRef.current = false;
+          onClose();
+        }
         return;
       } catch (err) {
         console.error("[LoginTrace][Popup] Wallet login failed", err);
         suppressAutoCloseRef.current = false;
+        setError(friendlyError(err, "Wallet login failed. Please try again."));
+        return;
       }
     }
     onClose();
@@ -6885,6 +6974,13 @@ var LoginPopup = ({
     setError("");
     try {
       await onWalletSignup(handle.trim());
+      if (gate) {
+        if (await finishGate()) {
+          suppressAutoCloseRef.current = false;
+          onClose();
+        }
+        return;
+      }
       if (onSubmitReferralCode) {
         setView("referral");
       } else {
@@ -6896,6 +6992,11 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
+  const handleEmailClick = (signUp = false) => {
+    setIsSignUp(signUp);
+    setView("email");
+    setError("");
+  };
   const handleSendCode = async (event) => {
     event?.preventDefault();
     if (!email || !email.includes("@")) {
@@ -6908,6 +7009,7 @@ var LoginPopup = ({
     }
     setLoading(true);
     setError("");
+    setOtpStatus("idle");
     const normalizedHandle = isSignUp && handle.trim() ? handle.trim() : void 0;
     try {
       const demoResult = await onDemoLogin?.(email, normalizedHandle ?? null);
@@ -6928,11 +7030,15 @@ var LoginPopup = ({
       setView("otp");
       setOtp(Array(OTP_INPUT_LENGTH).fill(""));
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to send verification code";
+      const message = friendlyError(err, "We couldn't send a code to that email. Please double-check it and try again.");
       console.error("[LoginTrace][Popup] onSendEmailCode threw", err);
       if (!isSignUp && message.includes("No account found")) {
+        if (signInMode) {
+          setError("No account found for this email. Go back and enter your access code to create one.");
+          setLoading(false);
+          return;
+        }
         setIsSignUp(true);
-        setView("email");
         setError("");
         setLoading(false);
         return;
@@ -6944,7 +7050,7 @@ var LoginPopup = ({
           setView("otp");
           setOtp(Array(OTP_INPUT_LENGTH).fill(""));
         } catch (retryErr) {
-          setError(retryErr instanceof Error ? retryErr.message : "Failed to send verification code");
+          setError(friendlyError(retryErr, "We couldn't send a code to that email. Please try again."));
         }
         setLoading(false);
         return;
@@ -7038,6 +7144,30 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
+  const runGateOtpVerify = React5__namespace.default.useCallback(async (code) => {
+    if (!onVerifyEmailCode) return;
+    setOtpStatus("checking");
+    setError("");
+    suppressAutoCloseRef.current = true;
+    try {
+      await onVerifyEmailCode({ code, email });
+      if (await finishGate()) {
+        setOtpStatus("valid");
+        setTimeout(() => onClose(), 750);
+      }
+    } catch {
+      suppressAutoCloseRef.current = false;
+      setOtpStatus("invalid");
+    }
+  }, [onVerifyEmailCode, email, finishGate, onClose]);
+  React5.useEffect(() => {
+    if (!gate || view !== "otp") return;
+    if (otp.join("").length < OTP_INPUT_LENGTH) {
+      if (otpStatus === "invalid") setOtpStatus("idle");
+      return;
+    }
+    if (otpStatus === "idle") void runGateOtpVerify(otp.join(""));
+  }, [gate, view, otp, otpStatus, runGateOtpVerify]);
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
     if (result.passed) {
@@ -7134,35 +7264,36 @@ var LoginPopup = ({
     setError("");
   };
   if (view === "main") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(MainHeading, { children: loginTitle?.title ?? "Welcome to Loaf" }),
-      (loginTitle ? loginTitle.subtitle : "Sign in to claim 100k in test USD.") && /* @__PURE__ */ jsxRuntime.jsx(MainSubtitle, { children: loginTitle ? loginTitle.subtitle : "Sign in to claim 100k in test USD." }),
-      /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { onSubmit: handleSendCode, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(GateInputRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            GateInput,
-            {
-              type: "email",
-              placeholder: "Enter your email",
-              value: email,
-              onChange: (event) => setEmail(event.target.value),
-              autoFocus: true
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(GateSubmit, { type: "submit", disabled: loading || !email, "aria-label": "Continue with email", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
         ] }),
-        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
+        /* @__PURE__ */ jsxRuntime.jsx(TitleText, { children: "Welcome to Loaf" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(GateOr, { children: "or" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: handleWalletLogin, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
-        "Join with wallet"
+      /* @__PURE__ */ jsxRuntime.jsx(Subtitle, { children: "Sign in to claim 100k in test USD." }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ButtonsContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: () => handleEmailClick(false), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) }),
+          "Sign in with Email"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", color: "var(--color-text-secondary, #848e9c)", fontSize: "0.875rem" }, children: "or" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(LoginButton, { onClick: handleWalletLogin, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+          "Sign in with Wallet"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SignUpPrompt, { children: [
+        "New to Loaf?",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(SignUpLink, { type: "button", onClick: () => handleEmailClick(true), children: "Sign up" })
       ] })
     ] }) });
   }
   if (view === "email") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(BackButton, { onClick: handleBack, children: [
         /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
@@ -7201,7 +7332,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "wallet-handle") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
@@ -7226,7 +7357,71 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "otp") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+    if (gate) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: otpStatus === "valid" ? 3 : 2 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(GateOtpText, { children: [
+            "We sent a code to",
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: email })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            OTPInput,
+            {
+              id: `otp-${index}`,
+              type: "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              $status: otpStatus,
+              readOnly: otpStatus === "valid" || otpStatus === "checking",
+              value: digit,
+              onChange: (event) => handleOTPChange(index, event.target.value),
+              onKeyDown: (event) => handleOTPKeyDown(index, event),
+              onInput: (event) => handleOTPInput(index, event),
+              onPaste: handleOTPPaste,
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              autoFocus: index === 0
+            },
+            index
+          )) }),
+          otpStatus === "invalid" && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: "That code isn't right. Try again." }),
+          /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (event) => {
+                  event.preventDefault();
+                  void handleSendCode(event);
+                },
+                children: "Resend code"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setOtp(Array(OTP_INPUT_LENGTH).fill(""));
+                  setOtpStatus("idle");
+                  setError("");
+                  setView("referral");
+                },
+                children: "Back"
+              }
+            )
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { $transparent: gate, onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       !loading && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
       loading ? /* @__PURE__ */ jsxRuntime.jsxs(AccountCreationLoader, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(SpinnerRing, {}),
@@ -7315,8 +7510,8 @@ var LoginPopup = ({
               /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
               /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(KycHeading, { children: "Verify Your Identity" }),
-            /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to verified investors" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycHeading, { children: "Verify Wholesale Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to accredited or wholesale investors" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycStartButton, { type: "button", onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycDuration, { children: "Takes about 2 minutes" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycDivider, {}),
@@ -7402,7 +7597,7 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit USDC from an exchange or wallet" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: fiatFundingLoading, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ModalOptionCard, { onClick: handleFiatFund, disabled: true, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "rgba(255,255,255,0.6)", flexShrink: 0 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "22", x2: "21", y2: "22" }),
                   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "18", x2: "6", y2: "11" }),
@@ -7412,7 +7607,10 @@ var LoginPopup = ({
                   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 20 7 4 7" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem" }, children: fiatFundingLoading ? "Loading widget\u2026" : "Bank Deposit" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.6rem", fontWeight: 700, color: "#E6C87E", background: "rgba(230,198,86,0.12)", padding: "0.12rem 0.4rem", borderRadius: "4px", textTransform: "uppercase", letterSpacing: "0.04em", whiteSpace: "nowrap" }, children: "Coming Soon" })
+                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Deposit to your account via card or bank transfer" })
                 ] })
               ] })
@@ -7443,84 +7641,162 @@ var LoginPopup = ({
         setReferralLoading(false);
       }
     };
-    const handleJoinWaitlistSkip = async () => {
-      if (!onJoinWaitlist || !email) {
-        onClose();
-        return;
-      }
+    const codeSuffix = referralCode.startsWith(CODE_PREFIX) ? referralCode.slice(CODE_PREFIX.length) : referralCode.replace(/^LOAF-?/i, "");
+    const setCodeSuffix = (suffix) => {
+      setReferralCode(CODE_PREFIX + suffix);
       setReferralError("");
-      setWaitlistLoading(true);
-      try {
-        const message = await onJoinWaitlist(email);
-        setWaitlistMessage(message || "You're on the waitlist.");
-        setTimeout(() => onClose(), 1400);
-      } catch (err) {
-        setReferralError(err instanceof Error ? err.message : "Couldn't join the waitlist. Please try again.");
-        setWaitlistLoading(false);
+      setError("");
+      if (gate) {
+        if (suffix.length === 5) void runCodeValidation(CODE_PREFIX + suffix);
+        else {
+          validatedCodeRef.current = null;
+          setCodeStatus("idle");
+        }
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(OnboardingStepContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-          width: 52,
-          height: 52,
-          borderRadius: 14,
-          background: "linear-gradient(135deg, rgba(230,200,126,0.15) 0%, rgba(230,200,126,0.08) 100%)",
-          border: "1px solid rgba(230,200,126,0.25)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          marginBottom: "1.1rem"
-        }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#e6c87e", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { children: "Enter code to access Private Beta trading" }),
-        /* @__PURE__ */ jsxRuntime.jsx(OnboardingSubtext, { style: { marginBottom: "1.5rem" }, children: "Enter code to trade 100k in USDC, or skip to continue." }),
-        /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginBottom: 0 }, children: [
+    const handleCodeChange = (e) => {
+      setCodeSuffix(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 5));
+    };
+    const handleCodePaste = (e) => {
+      e.preventDefault();
+      const text = (e.clipboardData.getData("text") || "").toUpperCase();
+      setCodeSuffix(text.replace(/^LOAF-?/, "").replace(/[^A-Z0-9]/g, "").slice(0, 5));
+    };
+    const codeComplete = codeSuffix.length === 5;
+    const codeInput = /* @__PURE__ */ jsxRuntime.jsx(
+      CodeSuffixInput,
+      {
+        type: "text",
+        inputMode: "text",
+        autoComplete: "off",
+        autoCapitalize: "characters",
+        spellCheck: false,
+        maxLength: 5,
+        "aria-label": "Access code",
+        readOnly: codeStatus === "valid",
+        value: codeSuffix,
+        onChange: handleCodeChange,
+        onPaste: handleCodePaste,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" || !codeComplete) return;
+          if (gate) void runCodeValidation(referralCode);
+          else void handleReferralSubmit();
+        },
+        autoFocus: true
+      }
+    );
+    const signInStep = /* @__PURE__ */ jsxRuntime.jsxs(GateReveal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSendCode, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            EmailInput,
+            GateEmailInput,
             {
-              type: "text",
-              placeholder: "e.g. LOAF-XXXX",
-              value: referralCode,
-              onChange: (e) => {
-                setReferralCode(e.target.value.toUpperCase());
-                setReferralError("");
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter") void handleReferralSubmit();
-              },
+              type: "email",
+              inputMode: "email",
+              autoComplete: "email",
+              placeholder: "Enter your email",
+              value: email,
+              onChange: (event) => setEmail(event.target.value),
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SubmitButton,
-            {
-              type: "button",
-              onClick: () => void handleReferralSubmit(),
-              disabled: referralLoading || !referralCode.trim(),
-              children: referralLoading ? "Verifying\u2026" : "Apply Code"
-            }
-          ),
-          referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
+          /* @__PURE__ */ jsxRuntime.jsx(GateSubmit, { type: "submit", "aria-label": "Continue", disabled: loading || !email, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) }) })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateOr, { children: "or" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateWalletButton, { type: "button", onClick: handleWalletLogin, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }),
+          signInMode ? "Sign in with Wallet" : "Connect Wallet"
+        ] })
+      ] })
+    ] });
+    if (gate) {
+      const codeAccepted = codeStatus === "valid";
+      const showSignIn = signInMode || signInRevealed;
+      return /* @__PURE__ */ jsxRuntime.jsxs(GateShell, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GateTint, { $reveal: showSignIn ? 1 : 0 }),
+        /* @__PURE__ */ jsxRuntime.jsxs(GateForm, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(GateBrand, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GateLogoLink, { href: "https://loafmarkets.com", "aria-label": "Go to loafmarkets.com", children: /* @__PURE__ */ jsxRuntime.jsx(GateLogo, { src: logoSrc, alt: logoAlt }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBrandDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(GateBetaTag, { children: "Private Beta" })
+          ] }),
+          signInMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            signInStep,
+            /* @__PURE__ */ jsxRuntime.jsx(GateResendText, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setError("");
+                  setSignInMode(false);
+                },
+                children: "\u2190 Enter access code instead"
+              }
+            ) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { $status: codeStatus, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
+              codeInput,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                GateSubmit,
+                {
+                  type: "button",
+                  "aria-label": "Submit access code",
+                  $status: codeStatus,
+                  disabled: codeStatus === "checking" || !codeComplete,
+                  onClick: () => void runCodeValidation(referralCode),
+                  children: codeAccepted ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) }) : codeStatus === "checking" ? /* @__PURE__ */ jsxRuntime.jsx(GateSpinner, {}) : /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M13 6l6 6-6 6" }) })
+                }
+              )
+            ] }),
+            (codeStatus === "invalid" || error && !signInRevealed) && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error || "That code isn't valid. Double-check and try again." }),
+            signInRevealed ? signInStep : /* @__PURE__ */ jsxRuntime.jsxs(GateResendText, { children: [
+              "Already have an account?",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setError("");
+                    setIsSignUp(false);
+                    setSignInMode(true);
+                  },
+                  children: "Sign in"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LogoContainer3, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }),
+          /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TitleText, { children: "Enter your access code" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(EmailFormContainer, { style: { width: "100%", marginTop: "1.5rem", marginBottom: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(CodeInputWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CodePrefix, { children: CODE_PREFIX }),
+          codeInput
         ] }),
-        waitlistMessage ? /* @__PURE__ */ jsxRuntime.jsxs(StatusMessage, { style: { marginTop: "0.75rem" }, children: [
-          "\u2713 ",
-          waitlistMessage
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          OnboardingSkipButton,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubmitButton,
           {
             type: "button",
-            onClick: () => void handleJoinWaitlistSkip(),
-            disabled: waitlistLoading,
-            style: { marginTop: "0.75rem" },
-            children: waitlistLoading ? "Joining\u2026" : email ? "Skip for now & join Waitlist" : "Skip for now"
+            onClick: () => void handleReferralSubmit(),
+            disabled: referralLoading || !codeComplete,
+            children: referralLoading ? "Verifying\u2026" : "Continue"
           }
-        )
+        ),
+        referralError && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: referralError })
       ] })
     ] }) });
   }
@@ -7640,8 +7916,9 @@ var Overlay2 = styled10__default.default.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
+  background-color: ${(props) => props.$gate ? "var(--color-background, #0a0a0a)" : props.$transparent ? "rgba(0, 0, 0, 0.45)" : "rgba(0, 0, 0, 0.8)"};
+  backdrop-filter: ${(props) => props.$gate ? "none" : props.$transparent ? "blur(2px)" : "blur(4px)"};
+  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7658,15 +7935,15 @@ var Overlay2 = styled10__default.default.div`
   }
 `;
 var PopupContainer = styled10__default.default.div`
-  background-color: var(--color-background, #0a0a0a);
-  border: 1px solid rgba(230, 198, 86, 0.3);
+  background-color: ${(props) => props.$gate ? "transparent" : "var(--color-background, #0a0a0a)"};
+  border: ${(props) => props.$gate ? "none" : "1px solid rgba(230, 198, 86, 0.3)"};
   border-radius: var(--border-radius, 12px);
   padding: 2.5rem;
   max-width: 440px;
   width: 90%;
   position: relative;
   animation: slideUp 0.3s ease-out;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  box-shadow: ${(props) => props.$gate ? "none" : "0 10px 30px rgba(0, 0, 0, 0.3)"};
 
   @keyframes slideUp {
     from {
@@ -7853,29 +8130,27 @@ var Title = styled10__default.default.h2`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
+  gap: 1rem;
 `;
-styled10__default.default.p`
-  font-size: 0.9rem;
-  font-weight: 400;
-  color: var(--color-text-secondary, #848e9c);
+var TitleText = styled10__default.default.span`
   text-align: center;
-  margin: 0 0 2rem;
+  line-height: 1.2;
 `;
-var MainHeading = styled10__default.default.h2`
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text, #eaecef);
-  text-align: left;
-  margin: 0 0 0.35rem;
+var LogoBeta = styled10__default.default.span`
+  color: var(--color-accent, #E6C87E);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  padding-bottom: 0.95rem;
 `;
-var MainSubtitle = styled10__default.default.p`
+var Subtitle = styled10__default.default.p`
   font-size: 0.9rem;
   font-weight: 400;
   color: var(--color-text-secondary, #848e9c);
-  text-align: left;
-  margin: 0 0 1.5rem;
-  line-height: 1.5;
+  text-align: center;
+  margin: 0 0 2rem;
 `;
 var LogoContainer3 = styled10__default.default.div`
   display: flex;
@@ -7885,21 +8160,21 @@ var LogoContainer3 = styled10__default.default.div`
   margin-bottom: 0.5rem;
 `;
 var LogoImage = styled10__default.default.img`
-  height: 40px;
+  height: 60px;
 `;
-styled10__default.default.div`
+var ButtonsContainer = styled10__default.default.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-bottom: 1.5rem;
 `;
-styled10__default.default.div`
+var SignUpPrompt = styled10__default.default.div`
   text-align: center;
   font-size: 0.875rem;
   color: var(--color-text-secondary, #848e9c);
   margin-bottom: 0.5rem;
 `;
-styled10__default.default.button`
+var SignUpLink = styled10__default.default.button`
   background: none;
   border: none;
   padding: 0;
@@ -7914,23 +8189,19 @@ styled10__default.default.button`
 `;
 var LoginButton = styled10__default.default.button`
   display: flex;
-  width: 100%;
-  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  gap: 0.55rem;
-  padding: 0.55rem 1.1rem;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
   background-color: var(--color-background-light, #1a1a1a);
   border: 1px solid rgba(230, 198, 86, 0.2);
   border-radius: var(--border-radius, 8px);
   color: var(--color-text, #eaecef);
-  font-size: 0.82rem;
+  font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
 
-  svg { width: 16px; height: 16px; }
-
   &:hover {
     background-color: rgba(230, 198, 86, 0.1);
     border-color: var(--color-accent, #E6C87E);
@@ -7973,60 +8244,265 @@ var EmailInput = styled10__default.default.input`
     color: var(--color-text-secondary, #848e9c);
   }
 `;
-var GateForm = styled10__default.default.form`
+var codeBorderColor = (status, focused) => {
+  if (status === "valid") return "var(--color-positive, #00C076)";
+  if (status === "invalid") return "var(--color-negative, #FF5757)";
+  return focused ? "var(--color-accent, #E6C87E)" : "rgba(230, 198, 86, 0.2)";
+};
+var CodeInputWrapper = styled10__default.default.div`
   display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  width: 100%;
-`;
-var GateInputRow = styled10__default.default.div`
-  position: relative;
-  width: 100%;
-`;
-var GateInput = styled10__default.default.input`
+  align-items: center;
   width: 100%;
-  box-sizing: border-box;
-  padding: 1rem 3.25rem 1rem 1.25rem;
+  padding: 1rem 1.25rem;
   background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid rgba(230, 198, 86, 0.2);
+  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
   border-radius: var(--border-radius, 8px);
-  color: var(--color-text, #eaecef);
-  font-size: 1rem;
+  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
   transition: all 0.2s ease;
 
-  &:focus { outline: none; border-color: var(--color-accent, #E6C87E); }
-  &::placeholder { color: var(--color-text-secondary, #848e9c); }
+  &:focus-within {
+    border-color: ${(props) => codeBorderColor(props.$status, true)};
+  }
 `;
-var GateSubmit = styled10__default.default.button`
+var CodePrefix = styled10__default.default.span`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  font-family: 'Space Grotesk', monospace;
+  user-select: none;
+`;
+var CodeSuffixInput = styled10__default.default.input`
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text, #eaecef);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  font-family: 'Space Grotesk', monospace;
+  /* Explicit line-height so iOS in-app WebViews size the caret to the text
+     box instead of rendering a short, top-aligned caret (line-height: normal
+     + webfont + letter-spacing miscomputes it in some WebViews). */
+  line-height: 1.5;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: rgba(132, 142, 156, 0.45);
+    letter-spacing: 0.22em;
+  }
+`;
+var GateBrand = styled10__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.7rem;
+  margin-bottom: 0.6rem;
+`;
+var GateLogoLink = styled10__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.85;
+  }
+`;
+var GateLogo = styled10__default.default.img`
+  height: 44px;
+  display: block;
+`;
+var GateBrandDivider = styled10__default.default.span`
+  width: 1px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.18);
+`;
+var GateBetaTag = styled10__default.default.span`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+`;
+var GateForm = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.9rem;
+  width: 100%;
+  max-width: 360px;
+  position: relative;
+  z-index: 1;
+`;
+var GateShell = styled10__default.default.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  background-color: rgba(10, 10, 12, 0.66);
+`;
+var GateTint = styled10__default.default.div`
   position: absolute;
-  top: 50%;
-  right: 0.55rem;
-  transform: translateY(-50%);
-  width: 34px;
-  height: 34px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(${(props) => (3 - Math.max(0, Math.min(3, props.$reveal))) / 3 * 100}% + 90px);
+  background: linear-gradient(
+    to top,
+    var(--color-background, #0a0a0c) calc(100% - 90px),
+    rgba(10, 10, 12, 0) 100%
+  );
+  transition: height 0.65s ease;
+  pointer-events: none;
+`;
+var GateOtpText = styled10__default.default.p`
+  margin: 0;
+  text-align: center;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: var(--color-text-secondary, #848e9c);
+
+  strong {
+    color: var(--color-text, #eaecef);
+    font-weight: 600;
+  }
+`;
+var GateResendText = styled10__default.default.p`
+  margin: 0.2rem 0 0;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary, #848e9c);
+
+  button {
+    background: none;
+    border: none;
+    color: var(--color-accent, #E6C87E);
+    cursor: pointer;
+    text-decoration: underline;
+    font-size: inherit;
+  }
+`;
+var GateSubmit = styled10__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin-left: 0.5rem;
+  padding: 0;
   background: none;
   border: none;
-  border-radius: 8px;
-  color: var(--color-text-secondary, #848e9c);
   cursor: pointer;
-  transition: color 0.2s ease, background 0.2s ease;
+  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
+  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
+
+  &:not(:disabled):hover {
+    transform: translateX(2px);
+  }
 
-  svg { width: 18px; height: 18px; }
-  &:hover:not(:disabled) { color: var(--color-accent, #E6C87E); background: rgba(230, 198, 86, 0.1); }
-  &:disabled { opacity: 0.4; cursor: not-allowed; }
+  &:disabled {
+    opacity: ${(props) => props.$status === "valid" ? 1 : 0.35};
+    color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : "var(--color-text-secondary, #848e9c)"};
+    cursor: default;
+  }
+`;
+var GateEmailInput = styled10__default.default.input`
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: rgba(132, 142, 156, 0.5);
+  }
+`;
+var GateSpinner = styled10__default.default.span`
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(230, 198, 86, 0.3);
+  border-top-color: var(--color-accent, #E6C87E);
+  border-radius: 50%;
+  animation: gateSpin 0.7s linear infinite;
+
+  @keyframes gateSpin {
+    to { transform: rotate(360deg); }
+  }
 `;
 var GateOr = styled10__default.default.div`
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.6rem;
+  width: 100%;
   color: var(--color-text-secondary, #848e9c);
-  font-size: 0.8rem;
-  margin: 0.4rem 0;
+  font-size: 0.78rem;
+  text-transform: lowercase;
 
-  &::before, &::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+`;
+var GateWalletButton = styled10__default.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.1rem;
+  padding: 0.55rem 1.1rem;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: var(--border-radius, 8px);
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    border-color: rgba(230, 198, 86, 0.4);
+    color: var(--color-text, #eaecef);
+  }
+`;
+var GateReveal = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.9rem;
+  width: 100%;
+  animation: gateReveal 0.3s ease-out;
+
+  @keyframes gateReveal {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 `;
 var OTPContainer = styled10__default.default.div`
   display: flex;
@@ -8040,15 +8516,17 @@ var OTPInput = styled10__default.default.input`
   font-size: 1.5rem;
   font-weight: 600;
   background-color: var(--color-background-light, #1a1a1a);
-  border: 1px solid rgba(230, 198, 86, 0.2);
+  border: 1px solid ${(props) => codeBorderColor(props.$status, false)};
   border-radius: var(--border-radius, 8px);
-  color: var(--color-accent, #E6C87E);
+  color: ${(props) => props.$status === "valid" ? "var(--color-positive, #00C076)" : props.$status === "invalid" ? "var(--color-negative, #FF5757)" : "var(--color-accent, #E6C87E)"};
+  box-shadow: ${(props) => props.$status === "valid" ? "0 0 0 1px var(--color-positive, #00C076)" : props.$status === "invalid" ? "0 0 0 1px var(--color-negative, #FF5757)" : "none"};
+  opacity: ${(props) => props.$status === "checking" ? 0.6 : 1};
   transition: all 0.2s ease;
 
   &:focus {
     outline: none;
-    border-color: var(--color-accent, #E6C87E);
-    box-shadow: 0 0 0 2px rgba(230, 198, 86, 0.2);
+    border-color: ${(props) => codeBorderColor(props.$status, true)};
+    box-shadow: 0 0 0 2px ${(props) => props.$status === "valid" ? "rgba(0, 192, 118, 0.25)" : props.$status === "invalid" ? "rgba(255, 87, 87, 0.25)" : "rgba(230, 198, 86, 0.2)"};
   }
 `;
 var SubmitButton = styled10__default.default.button`
@@ -8416,15 +8894,24 @@ var SpinnerRing = styled10__default.default.div`
   }
 `;
 var PREPARING_FACTS = [
-  "Property is the world's largest asset class \u2014 worth over US$300 trillion.",
-  "Loaf settles trades in about 1 second. Traditional property takes ~90 days.",
+  // Exchange
   "Our matching engine processes orders in 30 microseconds.",
-  "Every token is backed 1:1 by land-title-registered property.",
-  "Own a slice of premium real estate \u2014 no mortgage, no paperwork.",
+  "Loaf settles in 1 second. Traditional property takes 30-90 days.",
   "Buy and sell property as easily as a stock, on a live orderbook.",
-  "Earn rental yield on the exact fraction of property you own.",
-  "Title-backed by the NSW Land Registry \u2014 real ownership, on-chain.",
-  "Loaf ran the world's first property IPO."
+  "Continuous price discovery, not a single buyer negotiating in a back room.",
+  "Algo-trade property on our API. Build a bot with Claude using our docs.",
+  // What you're holding
+  "Hold shares secured 1:1 by the underlying property, as regulated securities.",
+  "The same economic exposure as owning the property. Without the friction, gatekeeping, or illiquidity.",
+  "Securitisation of property brings a new dimension of flexibility and tradability.",
+  // Frictionless
+  "Settle in seconds, then sell again whenever you want. No waiting days or weeks.",
+  "99% of the frictions in property transactions can be, and have been, reduced.",
+  // Vision
+  "A family office can rebalance a billion dollars in an afternoon, but couldn't sell a $50M property in under six months.",
+  "Family offices and HNWIs prize capital flexibility. Loaf makes property flexible.",
+  "There's no law of physics that says the world's oldest asset class must stay illiquid.",
+  "What if property underwent an IPO?"
 ];
 var FactCard = styled10__default.default.div`
   margin-top: 1.5rem;
@@ -8532,7 +9019,7 @@ var LogoImage2 = styled10__default.default.img`
   height: 30px;
   width: auto;
 `;
-var LogoBeta = styled10__default.default.span`
+var LogoBeta2 = styled10__default.default.span`
   font-size: 0.6rem;
   font-weight: 600;
   letter-spacing: 0.08em;
@@ -8690,7 +9177,7 @@ function OnboardingGuide({
     /* @__PURE__ */ jsxRuntime.jsx(CloseButton2, { onClick: onClose, "aria-label": "Skip", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M18 6L6 18" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(LogoRow, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(LogoImage2, { src: logoSrc, alt: "Loaf" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogoBeta, { children: "Private Beta" })
+      /* @__PURE__ */ jsxRuntime.jsx(LogoBeta2, { children: "Private Beta" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "You're in \u{1F389}" }),
     /* @__PURE__ */ jsxRuntime.jsx(Subtitle2, { children: "Here's everything you need to make your first trade." }),
@@ -12060,7 +12547,8 @@ function AssetSelectorBar({
   onSelect,
   trailing,
   imageUrl,
-  badgeLabel
+  badgeLabel,
+  tickerPrimary
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -12071,9 +12559,14 @@ function AssetSelectorBar({
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
     imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
-    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
-      propertyName,
-      currentTicker ? ` (${currentTicker.toUpperCase()})` : "",
+    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { $flush: tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
+      tickerPrimary && currentTicker ? /* @__PURE__ */ jsxRuntime.jsxs(AssetIdentity, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AssetTicker, { children: currentTicker.toUpperCase() }),
+        /* @__PURE__ */ jsxRuntime.jsx(AssetSubName, { children: propertyName })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        propertyName,
+        currentTicker ? ` (${currentTicker.toUpperCase()})` : ""
+      ] }),
       badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: badgeLabel }),
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
@@ -12102,7 +12595,7 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
-    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { className: "asset-bar-trailing", children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
     isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
@@ -12193,13 +12686,40 @@ var AssetSelectorDropdown = styled10__default.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 0.5rem;
+  /* $flush (tickerPrimary): no horizontal padding / no hover box, so opening the
+     selector doesn't make the ticker appear shoved right by the highlight box. */
+  padding: ${(p) => p.$flush ? "0.25rem 0" : "0.5rem"};
   border-radius: 8px;
-  transition: all 0.2s ease;
+  transition: ${(p) => p.$flush ? "none" : "all 0.2s ease"};
   flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
-  &:hover { background-color: rgba(255,255,255,0.05); }
+  &:hover { background-color: ${(p) => p.$flush ? "transparent" : "rgba(255,255,255,0.05)"}; }
+`;
+var AssetIdentity = styled10__default.default.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  line-height: 1.2;
+`;
+var AssetTicker = styled10__default.default.span`
+  font-weight: 700;
+  font-size: 1.35rem;
+  color: var(--color-text);
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (max-width: 480px) { font-size: 1.2rem; }
+`;
+var AssetSubName = styled10__default.default.span`
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.4);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 var AssetName = styled10__default.default.div`
   display: flex;
@@ -14877,27 +15397,30 @@ function PortfolioActivityPanel({
             ] }, pos.tokenName);
           })
         ] }),
-        positions.length > 0 && closeAllOpen && onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
-          /* @__PURE__ */ jsxRuntime.jsx(CloseAllTitle, { children: "Confirm Sell All" }),
-          /* @__PURE__ */ jsxRuntime.jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Market Sell" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Limit Sell at Mid Price" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CloseAllConfirmBtn, { onClick: () => {
-            positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
-            setCloseAllOpen(false);
-          }, children: [
-            "Confirm ",
-            closeAllType === "market" ? "Market" : "Limit",
-            " Sell"
-          ] })
-        ] }) })
+        positions.length > 0 && closeAllOpen && onClosePosition && typeof document !== "undefined" && ReactDOM.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(CloseAllOverlay, { onClick: () => setCloseAllOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CloseAllModal, { onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CloseAllModalX, { onClick: () => setCloseAllOpen(false), children: "\xD7" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CloseAllTitle, { children: "Confirm Sell All" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CloseAllDesc, { children: "This will sell all your positions and cancel their associated TP/SL orders." }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("market"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "market" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Market Sell" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllOption, { onClick: () => setCloseAllType("limit"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CloseAllRadio, { $selected: closeAllType === "limit" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Limit Sell at Mid Price" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(CloseAllConfirmBtn, { onClick: () => {
+              positions.forEach((pos) => onClosePosition(pos.tokenName, closeAllType, pos.quantity, pos.marketPrice));
+              setCloseAllOpen(false);
+            }, children: [
+              "Confirm ",
+              closeAllType === "market" ? "Market" : "Limit",
+              " Sell"
+            ] })
+          ] }) }),
+          document.body
+        )
       ] }),
       activeTab === "subscriptions" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         offeringOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -15354,57 +15877,63 @@ function PortfolioActivityPanel({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(PaginationBtn, { disabled: currentPage >= totalPages - 1, onClick: () => setCurrentPage((p) => p + 1), children: "Next \u203A" })
     ] }),
-    cancelAllConfirmOpen && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
-        "Are you sure you want to cancel all ",
-        openOrdersCount,
-        " open orders? This action cannot be undone."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CancelConfirmProceed,
-          {
-            type: "button",
-            disabled: cancellingAll,
-            onClick: async () => {
-              if (onCancelAllOrders) {
-                setCancellingAll(true);
-                try {
-                  await onCancelAllOrders();
-                } finally {
-                  setCancellingAll(false);
+    cancelAllConfirmOpen && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setCancelAllConfirmOpen(false), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel All Orders" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmBody, { children: [
+          "Are you sure you want to cancel all ",
+          openOrdersCount,
+          " open orders? This action cannot be undone."
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setCancelAllConfirmOpen(false), children: "Keep Orders" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CancelConfirmProceed,
+            {
+              type: "button",
+              disabled: cancellingAll,
+              onClick: async () => {
+                if (onCancelAllOrders) {
+                  setCancellingAll(true);
+                  try {
+                    await onCancelAllOrders();
+                  } finally {
+                    setCancellingAll(false);
+                  }
                 }
-              }
-              setCancelAllConfirmOpen(false);
-            },
-            children: cancellingAll ? "Cancelling\u2026" : "Yes, Cancel All"
-          }
-        )
-      ] })
-    ] }) }),
-    pendingCancelOrderId !== null && /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel Order" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
-      /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CancelConfirmProceed,
-          {
-            type: "button",
-            disabled: cancellingOrderId != null,
-            onClick: async () => {
-              if (onCancelOrder && pendingCancelOrderId !== null) {
-                await onCancelOrder(pendingCancelOrderId);
-              }
-              setPendingCancelOrderId(null);
-            },
-            children: cancellingOrderId === pendingCancelOrderId ? "Cancelling\u2026" : "Yes, Cancel"
-          }
-        )
-      ] })
-    ] }) })
+                setCancelAllConfirmOpen(false);
+              },
+              children: cancellingAll ? "Cancelling\u2026" : "Yes, Cancel All"
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    ),
+    pendingCancelOrderId !== null && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmOverlay, { onClick: () => setPendingCancelOrderId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmModal, { onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmTitle, { children: "Cancel Order" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmBody, { children: "Are you sure you want to cancel this order? This action cannot be undone." }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CancelConfirmActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CancelConfirmDismiss, { type: "button", onClick: () => setPendingCancelOrderId(null), children: "Keep Order" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CancelConfirmProceed,
+            {
+              type: "button",
+              disabled: cancellingOrderId != null,
+              onClick: async () => {
+                if (onCancelOrder && pendingCancelOrderId !== null) {
+                  await onCancelOrder(pendingCancelOrderId);
+                }
+                setPendingCancelOrderId(null);
+              },
+              children: cancellingOrderId === pendingCancelOrderId ? "Cancelling\u2026" : "Yes, Cancel"
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    )
   ] });
 }
 var Container2 = styled10__default.default.div`
@@ -15475,7 +16004,7 @@ var Tab = styled10__default.default.button`
   }
 `;
 var TabCount = styled10__default.default.span`
-  color: #E6C656;
+  color: var(--color-accent, #E6C87E);
   font-weight: 600;
   margin-left: 2px;
 `;
@@ -15660,7 +16189,8 @@ var CancelConfirmOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
+  z-index: 10050;
 `;
 var CancelConfirmModal = styled10__default.default.div`
   background: #1a1a1a;
@@ -15774,7 +16304,8 @@ var CloseAllOverlay = styled10__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  /* Above the trade page's fullscreen/sticky layers (TradePage.css uses up to 10001). */
+  z-index: 10050;
 `;
 var CloseAllModal = styled10__default.default.div`
   background: #1a1a1a;