@loafmarkets/ui 0.1.100 → 0.1.102

package/dist/index.js

@@ -1796,11 +1796,6 @@ function useViewportCompact(breakpoint) {
   return isCompact;
 }
 var formatNumber = (value, precision) => value.toFixed(precision);
-var formatTradeTime = (time) => {
-  const d = new Date(time);
-  if (Number.isNaN(d.getTime())) return time;
-  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
-};
 var FLASH_DURATION_MS = 450;
 var FLASH_UP_COLOR = "rgba(14, 203, 129, 0.35)";
 var FLASH_DOWN_COLOR = "rgba(246, 70, 93, 0.35)";
@@ -1870,12 +1865,14 @@ function TradeRow({
       {
         ref: rowRef,
         className: "grid items-center",
-        style: { gridTemplateColumns: "1fr 1fr 1fr", padding: "0.2rem 0", fontSize: "0.8rem" },
+        style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d" }, className: "tabular-nums", children: formatNumber(trade.price, precision) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "right" }, className: "tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, className: "tabular-nums text-white/50", children: [
-            trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTradeTime(trade.time) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 }, children: [
+            "$",
+            formatNumber(trade.price, precision)
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, children: [
+            formatNumber(trade.amount, amountPrecision),
             explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
@@ -1896,22 +1893,24 @@ function TradeRow({
     "div",
     {
       ref: rowRef,
-      className: "relative grid grid-cols-3 items-center gap-3 px-3 text-[0.8rem]",
-      style: { height: `${DEPTH_ROW_HEIGHT_PX}px` },
+      className: "grid grid-cols-3 items-center gap-3 px-3 py-1.5",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
               "tabular-nums",
               trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
             ),
-            children: formatNumber(trade.price, precision)
+            children: [
+              "$",
+              formatNumber(trade.price, precision)
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5 tabular-nums text-white/50", children: [
-          trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: trade.time }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+          trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-white/50 text-xs", children: trade.time }),
           explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
@@ -1979,8 +1978,8 @@ function DepthRow({
   );
 }
 var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
-var LEVEL_ROWS_VISIBLE = 5;
-var DEPTH_ROW_HEIGHT_PX = 28;
+var LEVEL_ROWS_VISIBLE = 6;
+var DEPTH_ROW_HEIGHT_PX = 26;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
 var COMPACT_BREAKPOINT_PX = 1024;
@@ -2004,8 +2003,6 @@ var Orderbook = React5__namespace.forwardRef(
     onPriceClick,
     onLoafLiquidityClick,
     tradeExplorerUrl,
-    maxLevels,
-    fillHeight = false,
     className,
     ...props
   }, ref) => {
@@ -2050,10 +2047,8 @@ var Orderbook = React5__namespace.forwardRef(
       onTabChange?.(next);
     };
     const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
-    const effectiveLevels = maxLevels ?? LEVEL_ROWS_VISIBLE;
-    const effectiveCompactLevels = maxLevels ?? COMPACT_ROWS_VISIBLE;
-    const sectionHeight = isCompact ? effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX : effectiveLevels * DEPTH_ROW_HEIGHT_PX;
-    const rowCount = isCompact ? effectiveCompactLevels : effectiveLevels;
+    const sectionHeight = isCompact ? COMPACT_ROWS_VISIBLE * COMPACT_ROW_HEIGHT_PX : LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
+    const rowCount = isCompact ? COMPACT_ROWS_VISIBLE : LEVEL_ROWS_VISIBLE;
     const askVisibleLevels = asks.slice(-rowCount);
     const bidVisibleLevels = bids.slice(0, rowCount);
     const askCumDepths = new Array(askVisibleLevels.length);
@@ -2072,8 +2067,7 @@ var Orderbook = React5__namespace.forwardRef(
         bidCumDepths[i] = acc;
       }
     }
-    const askMaxCumDepth = Math.max(1, ...askCumDepths);
-    const bidMaxCumDepth = Math.max(1, ...bidCumDepths);
+    const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     const layoutProps = {
@@ -2093,8 +2087,7 @@ var Orderbook = React5__namespace.forwardRef(
       bidVisibleLevels,
       askCumDepths,
       bidCumDepths,
-      askMaxCumDepth,
-      bidMaxCumDepth,
+      combinedMaxCumDepth,
       midPrice,
       midChangePercent,
       midClass,
@@ -2104,19 +2097,15 @@ var Orderbook = React5__namespace.forwardRef(
       isLoading,
       seenTradeKeysRef,
       tradeExplorerUrl,
-      onPriceClick,
-      levelCount: effectiveLevels,
-      compactLevelCount: effectiveCompactLevels,
-      fillHeight
+      onPriceClick
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
       {
         ref,
         className: cn(
-          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
+          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col h-full",
           isCompact && "max-w-none",
-          fillHeight && "h-full",
           className
         ),
         ...props,
@@ -2165,8 +2154,7 @@ function DesktopOrderbookLayout({
   bidVisibleLevels,
   askCumDepths,
   bidCumDepths,
-  askMaxCumDepth,
-  bidMaxCumDepth,
+  combinedMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2176,10 +2164,7 @@ function DesktopOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick,
-  levelCount: effectiveLevels,
-  compactLevelCount: _compactLevelCount,
-  fillHeight
+  onPriceClick
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2267,7 +2252,7 @@ function DesktopOrderbookLayout({
         {
           className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
           style: { scrollbarGutter: "stable" },
-          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: tradeFiltered.map((trade, i) => {
+          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => {
             const tradeKey = getTradeKey(trade, i);
             const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2284,20 +2269,20 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
-            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
+            style: { height: `${sectionHeight}px` },
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "ask",
                 price: l.price,
                 amount: l.amount,
                 cumDepth: askCumDepths[i],
-                depthPct: askCumDepths[i] / askMaxCumDepth * 100,
+                depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userAskPrices.has(l.price),
@@ -2311,7 +2296,7 @@ function DesktopOrderbookLayout({
           "div",
           {
             ref: midRef,
-            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
+            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 "$",
@@ -2329,16 +2314,16 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
-            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            className: "divide-y divide-white/5 overflow-hidden",
+            style: { height: `${sectionHeight}px` },
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "bid",
                 price: l.price,
                 amount: l.amount,
                 cumDepth: bidCumDepths[i],
-                depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
+                depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userBidPrices.has(l.price),
@@ -2367,8 +2352,7 @@ function MobileOrderbookLayout({
   bidVisibleLevels: visibleBids,
   askCumDepths,
   bidCumDepths,
-  askMaxCumDepth,
-  bidMaxCumDepth,
+  combinedMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2378,9 +2362,7 @@ function MobileOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick,
-  levelCount: _levelCount,
-  compactLevelCount: effectiveCompactLevels
+  onPriceClick
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
@@ -2452,13 +2434,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", height: `${effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX}px`, justifyContent: "flex-end", overflow: "hidden" }, children: isLoading ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No asks" }) : visibleAsks.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No asks" }) : visibleAsks.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "ask",
           price: l.price,
           amount: l.amount,
-          depthPct: askCumDepths[i] / askMaxCumDepth * 100,
+          depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userAskPrices.has(l.price),
@@ -2499,13 +2481,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", height: `${effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX}px`, overflow: "hidden" }, children: isLoading ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No bids" }) : visibleBids.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No bids" }) : visibleBids.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "bid",
           price: l.price,
           amount: l.amount,
-          depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
+          depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userBidPrices.has(l.price),
@@ -2525,7 +2507,7 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
         const tradeKey = getTradeKey(trade, i);
         const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2565,8 +2547,7 @@ function MobileDepthRow({
       style: {
         display: "grid",
         gridTemplateColumns: "1.2fr 0.8fr",
-        height: `${COMPACT_ROW_HEIGHT_PX}px`,
-        alignItems: "center",
+        padding: "0.2rem 0",
         fontSize: "0.8rem",
         position: "relative",
         cursor: onPriceClick ? "pointer" : void 0
@@ -2709,7 +2690,7 @@ var PropertyTour = React5__namespace.forwardRef(
   }
 );
 PropertyTour.displayName = "PropertyTour";
-var ITEMS_PER_PAGE = 6;
+var ITEMS_PER_PAGE = 4;
 var ensureAnimationsInjected = () => {
   if (typeof document === "undefined") return;
   if (document.getElementById("property-news-updates-animations")) return;
@@ -2754,22 +2735,6 @@ var formatDate = (value) => {
   if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
   return value.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 };
-var formatDateShort = (value) => {
-  const d = typeof value === "string" ? new Date(value) : value;
-  if (!(d instanceof Date) || Number.isNaN(d.getTime())) {
-    if (typeof value === "string") {
-      return value.replace(/\s*\d{4}\s*$/, "");
-    }
-    return "";
-  }
-  const diffMs = Date.now() - d.getTime();
-  const diffS = diffMs / 1e3;
-  if (diffS < 60) return "Just now";
-  if (diffS < 3600) return `${Math.floor(diffS / 60)}m ago`;
-  if (diffS < 86400) return `${Math.floor(diffS / 3600)}h ago`;
-  const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
-  return `${time} \xB7 ${d.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
-};
 var formatTimeAgo = (timestamp) => {
   const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;
   if (diff < 60) return `${Math.floor(diff)}s ago`;
@@ -2780,7 +2745,7 @@ function getSentimentInfo(score) {
   if (score == null) return null;
   if (score > 0.15) return { arrow: "\u25B2", label: "Bullish", color: "#0ecb81" };
   if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
-  return { arrow: "", label: "Neutral", color: "#848e9c" };
+  return { arrow: "\u2014", label: "Neutral", color: "#848e9c" };
 }
 function NewsArticleModal({ item, onClose }) {
   const sentimentInfo = getSentimentInfo(item.sentimentScore);
@@ -2862,7 +2827,8 @@ function NewsArticleModal({ item, onClose }) {
                   border: `1px solid ${sentimentInfo.color}40`
                 },
                 children: [
-                  sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
+                  sentimentInfo.arrow,
+                  " ",
                   sentimentInfo.label
                 ]
               }
@@ -2902,35 +2868,7 @@ function NewsArticleModal({ item, onClose }) {
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1px", background: "rgba(255,255,255,0.08)", marginBottom: "1.25rem" } }),
-            item.summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." }),
-            item.url && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "1.25rem", paddingTop: "1rem", borderTop: "1px solid rgba(255,255,255,0.08)" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
-              {
-                href: item.url,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: "0.4rem",
-                  fontSize: "0.8rem",
-                  fontWeight: 600,
-                  color: "var(--color-accent, #f0b90b)",
-                  textDecoration: "none",
-                  transition: "opacity 0.15s"
-                },
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.opacity = "0.8";
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.opacity = "1";
-                },
-                children: [
-                  "Read full article",
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" }) })
-                ]
-              }
-            ) })
+            item.summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
           ]
         }
       )
@@ -2962,7 +2900,6 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     const [homeTab, setHomeTab] = React5__namespace.useState("all");
     const [homePage, setHomePage] = React5__namespace.useState(0);
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React5__namespace.useState(0);
     const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
     React5__namespace.useEffect(() => {
       ensureAnimationsInjected();
@@ -2971,14 +2908,6 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
       setHomePage(0);
     }, [homeTab]);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5__namespace.useMemo(
-      () => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
-      [hasItems, items.length]
-    );
-    React5__namespace.useEffect(() => {
-      setPage((prev) => Math.min(prev, totalPages - 1));
-    }, [totalPages]);
-    const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
     const homeFilteredItems = React5__namespace.useMemo(
       () => hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab) : [],
       [hasItems, items, homeTab]
@@ -3000,10 +2929,10 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-              isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)", flexShrink: 0, display: "block" }, 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-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
+              isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)" }, 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-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
               isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#0ecb81", boxShadow: "0 0 8px rgba(14,203,129,0.8)", animation: "propertyNewsPulse 1.5s infinite" } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", style: { margin: 0 }, children: resolvedHeading }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", children: resolvedHeading }),
                 subheading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
@@ -3018,7 +2947,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "LIVE"
             ] }) : null
           ] }),
-          isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "1.5rem", marginTop: "0.75rem", marginBottom: "0.5rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 0, marginTop: "0.75rem", marginBottom: "0.25rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -3027,8 +2956,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 background: "transparent",
                 border: "none",
                 borderBottom: homeTab === tab ? "2px solid var(--color-accent, #f0b90b)" : "2px solid transparent",
-                padding: "0 0 0.5rem 0",
-                marginBottom: "-1px",
+                padding: "0.5rem 0.75rem",
                 fontSize: "0.75rem",
                 fontWeight: homeTab === tab ? 600 : 400,
                 color: homeTab === tab ? "var(--color-text, #fff)" : "var(--color-text-secondary, #848e9c)",
@@ -3042,8 +2970,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn("flex flex-1 flex-col overflow-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
-              style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
+              className: "mt-4 flex flex-1 flex-col gap-3 overflow-hidden",
               children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
                 const maxAmount = 6e4;
                 const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
@@ -3081,7 +3008,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                     style: {
                       width: "100%",
                       textAlign: "left",
-                      backgroundColor: "transparent",
+                      background: "transparent",
                       border: "none",
                       cursor: "pointer",
                       padding: "0.75rem 0",
@@ -3090,28 +3017,18 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                       justifyContent: "space-between",
                       alignItems: "flex-start",
                       gap: "0.5rem",
-                      color: "inherit",
-                      transition: "background-color 0.15s"
-                    },
-                    onMouseEnter: (e) => {
-                      e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
-                      const title = e.currentTarget.querySelector("h3");
-                      if (title) title.style.color = "var(--color-accent, #E6C87E)";
-                    },
-                    onMouseLeave: (e) => {
-                      e.currentTarget.style.backgroundColor = "transparent";
-                      const title = e.currentTarget.querySelector("h3");
-                      if (title) title.style.color = "#f8f9fa";
+                      color: "inherit"
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.95rem", fontWeight: 500, marginBottom: "0.35rem", color: "#f8f9fa", lineHeight: 1.45, transition: "color 0.15s" }, children: item.title }),
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
                         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: formatDateShort(item.date) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
                           item.source && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.1rem 0.4rem", borderRadius: "3px", fontSize: "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.15rem 0.4rem", borderRadius: "2px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#f0b90b" }, children: isProperty ? "Property Update" : "Market News" }),
                           sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
-                            sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
+                            sentimentInfo.arrow,
+                            " ",
                             sentimentInfo.label
                           ] })
                         ] })
@@ -3121,12 +3038,11 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                   },
                   key
                 );
-              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
-                const absoluteIndex = page * ITEMS_PER_PAGE + index;
-                const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
+              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowY: "auto", maxHeight: "520px", display: "flex", flexDirection: "column", gap: "0" }, children: items.map((item, index) => {
+                const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
                 const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
-                const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
-                const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
+                const dateLabel = item.isNew ?? (highlightFirst && index === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
+                const isHighlighted = item.isNew ?? (highlightFirst && index === 0);
                 const sentimentInfo = getSentimentInfo(item.sentimentScore);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -3168,7 +3084,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                             ] }),
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
                               sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
-                                sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
+                                sentimentInfo.arrow,
+                                " ",
                                 sentimentInfo.label
                               ] }),
                               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.25rem 0.6rem", borderRadius: "4px", border: `1px solid ${catStyle.borderColor}`, backgroundColor: catStyle.backgroundColor, color: catStyle.color, fontSize: "0.68rem", fontWeight: 600, textTransform: "uppercase", whiteSpace: "nowrap" }, children: item.type === "property" ? catStyle.label : "Market News" })
@@ -3180,7 +3097,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                   },
                   key
                 );
-              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
+              }) }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
                 "No property news yet. Updates will land here as soon as we receive new intelligence."
               ] })
@@ -3193,8 +3110,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 onClick: () => setHomePage((p) => Math.max(0, p - 1)),
                 disabled: homePage === 0,
-                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "50%", width: "28px", height: "28px", display: "flex", alignItems: "center", justifyContent: "center", padding: 0, cursor: homePage === 0 ? "not-allowed" : "pointer", opacity: homePage === 0 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage === 0 ? "not-allowed" : "pointer", opacity: homePage === 0 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
+                children: "Prev"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)" }, children: [
@@ -3208,38 +3125,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 onClick: () => setHomePage((p) => Math.min(homeTotalPages - 1, p + 1)),
                 disabled: homePage >= homeTotalPages - 1,
-                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "50%", width: "28px", height: "28px", display: "flex", alignItems: "center", justifyContent: "center", padding: 0, cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer", opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
-              }
-            )
-          ] }),
-          !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPage((p) => Math.max(0, p - 1)),
-                disabled: page === 0,
-                className: cn("rounded-full border border-white/15 flex items-center justify-center", page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
-                style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-white/70", children: [
-              "Page ",
-              page + 1,
-              " / ",
-              totalPages
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
-                disabled: page >= totalPages - 1,
-                className: cn("rounded-full border border-white/15 flex items-center justify-center", page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
-                style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
-                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer", opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
+                children: "Next"
               }
             )
           ] }),
@@ -4742,16 +4629,14 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     imageUrl,
     imageAlt,
     name,
-    address,
     location,
     price,
     currencySymbol = "$",
     changePercent,
-    priceChange,
-    beds: _beds,
-    baths: _baths,
-    cars: _cars,
-    propertyTypeLabel: _propertyTypeLabel,
+    beds,
+    baths,
+    cars,
+    propertyTypeLabel,
     onTrade,
     onMakeOffer,
     tradeButtonLabel = "Trade",
@@ -4767,6 +4652,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
+    const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
     const showMakeOfferButton = !hideMakeOfferButton;
@@ -4779,112 +4665,201 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
       setIsOfferInteracting(state);
     };
     const headingStyle = {
-      fontSize: "clamp(1.3rem, 3vw, 1.8rem)",
-      marginBottom: "0",
+      fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
+      marginBottom: "0.5rem",
       color: "#ffffff",
       textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
       fontWeight: 600,
       lineHeight: 1.2
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(OuterWrapper, { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(HeroContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        HeroImage,
-        {
-          src: imageUrl,
-          alt: imageAlt ?? name
-        }
-      ),
-      statusBadge ? /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge, { $isLive: statusBadge.variant === "live", children: [
-        statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
-        statusBadge.label
-      ] }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", style: { background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { src: imageUrl, alt: imageAlt ?? name }),
-          /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(NameGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
-                location ? /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { children: location }) : null
+    return /* @__PURE__ */ jsxRuntime.jsxs(OuterWrapper, { ref, className: cn(className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HeroContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          HeroImage,
+          {
+            src: imageUrl,
+            alt: imageAlt ?? name
+          }
+        ),
+        statusBadge ? /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge, { $isLive: statusBadge.variant === "live", children: [
+          statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
+          statusBadge.label
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(HeroGradient, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(InfoCard, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LocationText, { children: location }),
+                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(PriceBlock, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 18 }) }) : price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock, { children: [
+                  formatPrice3(price, currencySymbol),
+                  changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "ml-2 flex items-center text-[0.875rem] font-medium",
+                        isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "svg",
+                          {
+                            xmlns: "http://www.w3.org/2000/svg",
+                            width: "12",
+                            height: "12",
+                            viewBox: "0 0 24 24",
+                            fill: "currentColor",
+                            className: "mr-[0.15rem]",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
+                          }
+                        ),
+                        Math.abs(changePercent).toFixed(2),
+                        "%"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 52, height: 14 })
               ] }),
-              address ? /* @__PURE__ */ jsxRuntime.jsx(AddressText, { children: address }) : null
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(PriceGroup, { children: [
-              isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 24 }) : price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CurrencyLabel, { children: "USD" }),
-                changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(PriceArrow, { $isPositive: isPositive, children: isPositive ? "\u25B2" : "\u25BC" }) : null,
-                formatPrice3(price, "")
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 56, height: 14 })
               ] }),
-              changePercent != null ? /* @__PURE__ */ jsxRuntime.jsxs(PriceChangeRow, { $isPositive: isPositive, children: [
-                priceChange != null ? `${isPositive ? "+" : ""}${priceChange.toFixed(2)} ` : null,
-                "(",
-                isPositive ? "+" : "",
-                Math.abs(changePercent).toFixed(2),
-                "%)"
-              ] }) : null
-            ] })
-          ] }) })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: isTradeDisabled ? void 0 : onTrade,
-              className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-              style: {
-                backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
-                color: "black",
-                padding: "0.75rem 1.5rem",
-                borderColor: isTradeInteracting ? accentColor : "transparent",
-                boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
-                opacity: isTradeDisabled ? 0.5 : 1,
-                cursor: isTradeDisabled ? "not-allowed" : "pointer"
-              },
-              onMouseEnter: () => setTradeInteraction(true),
-              onMouseLeave: () => setTradeInteraction(false),
-              onMouseDown: () => setTradeInteraction(true),
-              onMouseUp: () => setTradeInteraction(false),
-              onFocus: () => setTradeInteraction(true),
-              onBlur: () => setTradeInteraction(false),
-              onTouchStart: () => setTradeInteraction(true),
-              onTouchEnd: () => setTradeInteraction(false),
-              disabled: isTradeDisabled,
-              "aria-disabled": isTradeDisabled,
-              children: tradeButtonLabel
-            }
-          ),
-          showMakeOfferButton ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
-              className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-              style: {
-                backgroundColor: isOfferInteracting ? accentColor : "transparent",
-                borderColor: accentColor,
-                color: isOfferInteracting ? "black" : accentColor,
-                padding: "0.75rem 1.5rem",
-                boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
-                opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
-                cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
-              },
-              onMouseEnter: () => setOfferInteraction(true),
-              onMouseLeave: () => setOfferInteraction(false),
-              onMouseDown: () => setOfferInteraction(true),
-              onMouseUp: () => setOfferInteraction(false),
-              onFocus: () => setOfferInteraction(true),
-              onBlur: () => setOfferInteraction(false),
-              onTouchStart: () => setOfferInteraction(true),
-              onTouchEnd: () => setOfferInteraction(false),
-              disabled: isMakeOfferButtonDisabled,
-              "aria-disabled": isMakeOfferButtonDisabled,
-              children: makeOfferButtonLabel
-            }
-          ) : null
-        ] })
-      ] }) })
-    ] }) });
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 50, height: 14 })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 60, height: 14 })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "mr-2 h-[18px] w-[18px]" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  beds,
+                  " Beds"
+                ] })
+              ] }),
+              baths == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "mr-2 h-[18px] w-[18px]" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  baths,
+                  " Baths"
+                ] })
+              ] }),
+              cars == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "mr-2 h-[18px] w-[18px]" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  cars,
+                  " Cars"
+                ] })
+              ] }),
+              propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: isTradeDisabled ? void 0 : onTrade,
+                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+                style: {
+                  backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
+                  color: "black",
+                  padding: "0.75rem 1.5rem",
+                  borderColor: isTradeInteracting ? accentColor : "transparent",
+                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isTradeDisabled ? 0.5 : 1,
+                  cursor: isTradeDisabled ? "not-allowed" : "pointer"
+                },
+                onMouseEnter: () => setTradeInteraction(true),
+                onMouseLeave: () => setTradeInteraction(false),
+                onMouseDown: () => setTradeInteraction(true),
+                onMouseUp: () => setTradeInteraction(false),
+                onFocus: () => setTradeInteraction(true),
+                onBlur: () => setTradeInteraction(false),
+                onTouchStart: () => setTradeInteraction(true),
+                onTouchEnd: () => setTradeInteraction(false),
+                disabled: isTradeDisabled,
+                "aria-disabled": isTradeDisabled,
+                children: tradeButtonLabel
+              }
+            ),
+            showMakeOfferButton ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
+                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+                style: {
+                  backgroundColor: isOfferInteracting ? accentColor : "transparent",
+                  borderColor: accentColor,
+                  color: isOfferInteracting ? "black" : accentColor,
+                  padding: "0.75rem 1.5rem",
+                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                  opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
+                  cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
+                },
+                onMouseEnter: () => setOfferInteraction(true),
+                onMouseLeave: () => setOfferInteraction(false),
+                onMouseDown: () => setOfferInteraction(true),
+                onMouseUp: () => setOfferInteraction(false),
+                onFocus: () => setOfferInteraction(true),
+                onBlur: () => setOfferInteraction(false),
+                onTouchStart: () => setOfferInteraction(true),
+                onTouchEnd: () => setOfferInteraction(false),
+                disabled: isMakeOfferButtonDisabled,
+                "aria-disabled": isMakeOfferButtonDisabled,
+                children: makeOfferButtonLabel
+              }
+            ) : null
+          ] })
+        ] }) })
+      ] }),
+      hasAmenities ? /* @__PURE__ */ jsxRuntime.jsx(MobileAmenities, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 40, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 44, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 42, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(MobileAmenity, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 52, height: 12 }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            beds,
+            " Beds"
+          ] })
+        ] }),
+        baths == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            baths,
+            " Baths"
+          ] })
+        ] }),
+        cars == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            cars,
+            " Cars"
+          ] })
+        ] }),
+        propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx(MobileAmenity, { children: propertyTypeLabel })
+      ] }) }) : null
+    ] });
   }
 );
 PropertyHeroHeader.displayName = "PropertyHeroHeader";
@@ -4927,6 +4902,32 @@ var HeroContainer = styled25__default.default.div`
     border-radius: 6px;
   }
 `;
+var MobileAmenities = styled25__default.default.div`
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(8, 8, 12, 0.85);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 0.85rem;
+
+  @media (max-width: 768px) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+var MobileAmenity = styled25__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  font-weight: 500;
+`;
 var HeroImage = styled25__default.default.img`
   width: 100%;
   height: 100%;
@@ -4941,6 +4942,15 @@ var HeroImage = styled25__default.default.img`
   transform: scale(1.0);
   transform-origin: center;
 `;
+var HeroGradient = styled25__default.default.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 1;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
+`;
 var ActionButtons = styled25__default.default.div`
   display: flex;
   flex-wrap: wrap;
@@ -4956,42 +4966,13 @@ var ActionButtons = styled25__default.default.div`
     display: none;
   }
 `;
-var CardLayout = styled25__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-
-  @media (max-width: 480px) {
-    gap: 0.75rem;
-  }
-`;
-var Thumbnail = styled25__default.default.img`
-  width: 72px;
-  height: 72px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex-shrink: 0;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-
-  @media (max-width: 768px) {
-    width: 56px;
-    height: 56px;
-    border-radius: 6px;
-  }
-
-  @media (max-width: 480px) {
-    width: 48px;
-    height: 48px;
-  }
-`;
-var CardContent2 = styled25__default.default.div`
-  min-width: 0;
-  flex: 1;
-`;
 var InfoCard = styled25__default.default.div`
+  display: inline-block;
+  width: fit-content;
+  max-width: 70%;
   border-radius: 12px;
-  background: rgba(0, 0, 0, 0.15);
-  padding: 1rem 1.5rem;
+  background: rgba(0, 0, 0, 0.12);
+  padding: 0.75rem 1rem;
   color: #fff;
   backdrop-filter: blur(6px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
@@ -4999,92 +4980,45 @@ var InfoCard = styled25__default.default.div`
   min-width: 0;
 
   @media (max-width: 768px) {
-    padding: 0.85rem 1.15rem;
+    max-width: 85%;
+  }
+
+  @media (max-width: 640px) {
+    max-width: 92%;
   }
 
   @media (max-width: 480px) {
-    padding: 0.65rem 0.85rem;
+    max-width: 95%;
   }
 `;
-var NameGroup = styled25__default.default.div`
-  display: flex;
+var InfoRow = styled25__default.default.div`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.75rem;
-  min-width: 0;
-  flex-wrap: wrap;
+  width: 100%;
+
+  @media (max-width: 640px) {
+    gap: 0.5rem;
+  }
 `;
-var TypeBadge = styled25__default.default.span`
-  display: inline-flex;
-  align-items: center;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  line-height: 1;
-  color: #E6C87E;
-  background: rgba(230, 200, 126, 0.12);
+var LocationText = styled25__default.default.span`
+  font-size: clamp(1rem, 2.6vw, 1.25rem);
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
-  flex-shrink: 0;
 `;
-var InfoRow = styled25__default.default.div`
+var PriceBlock = styled25__default.default.span`
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 1rem;
-`;
-var PriceGroup = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  flex-shrink: 0;
-`;
-var PriceRow = styled25__default.default.span`
-  display: inline-flex;
-  align-items: baseline;
-  font-size: clamp(1.3rem, 3vw, 1.8rem);
-  font-weight: 600;
-  color: #fff;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  flex-shrink: 0;
-`;
-var CurrencyLabel = styled25__default.default.span`
-  font-size: 0.55em;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.4);
-  margin-right: 0.3em;
-`;
-var PriceArrow = styled25__default.default.span`
-  color: ${({ $isPositive }) => $isPositive ? "#0ecb81" : "#f6465d"};
-  font-size: 0.65em;
-  margin: 0 0.1em;
-`;
-var AddressText = styled25__default.default.p`
-  font-size: 1.1rem;
-  color: rgba(255, 255, 255, 0.7);
-  font-weight: 400;
-  margin: 0.1rem 0 0;
-
-  @media (max-width: 768px) {
-    font-size: 1rem;
-  }
-
-  @media (max-width: 480px) {
-    font-size: 0.9rem;
-  }
-`;
-var PriceChangeRow = styled25__default.default.span`
-  display: inline-flex;
   align-items: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-size: 0.85rem;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
-  font-variant-numeric: tabular-nums;
-  color: ${({ $isPositive }) => $isPositive ? "#0ecb81" : "#f6465d"};
+  font-size: clamp(1rem, 2.2vw, 1.25rem);
+  font-weight: 600;
+  color: var(--color-accent, #f0b90b);
+  padding-left: 1rem;
+  border-left: 1px solid rgba(255, 255, 255, 0.25);
+  min-height: 1.5rem;
 `;
 var StatusBadge = styled25__default.default.div`
   position: absolute;
@@ -5161,45 +5095,13 @@ var Header = ({
   onProfileNavigate: _onProfileNavigate,
   onOrdersNavigate: _onOrdersNavigate,
   onWalletNavigate: _onWalletNavigate,
-  showTradeTab = true,
-  portfolioSummary
+  showTradeTab = true
 }) => {
   const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
   const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
   const [showLoginPopup, setShowLoginPopup] = React5.useState(false);
   const [loginPopupInitialView, setLoginPopupInitialView] = React5.useState(void 0);
-  const [isPortfolioBarVisible, setIsPortfolioBarVisible] = React5.useState(() => {
-    if (typeof localStorage === "undefined") return false;
-    return localStorage.getItem("portfolioBarVisible") !== "false";
-  });
-  const portfolioPillRef = React5.useRef(null);
-  const [portfolioArrowLeft, setPortfolioArrowLeft] = React5.useState(null);
-  const togglePortfolioBar = React5.useCallback(() => {
-    setIsPortfolioBarVisible((prev) => {
-      const next = !prev;
-      try {
-        localStorage.setItem("portfolioBarVisible", String(next));
-      } catch {
-      }
-      return next;
-    });
-  }, []);
-  const updatePortfolioArrow = React5.useCallback(() => {
-    const eye = document.getElementById("portfolio-eye-toggle");
-    const pill = portfolioPillRef.current;
-    if (!eye || !pill) return;
-    const eyeRect = eye.getBoundingClientRect();
-    const pillRect = pill.getBoundingClientRect();
-    const offset = eyeRect.left + eyeRect.width / 2 - pillRect.left - 7;
-    setPortfolioArrowLeft(offset);
-  }, []);
-  React5.useEffect(() => {
-    if (!isPortfolioBarVisible || !portfolioSummary) return;
-    updatePortfolioArrow();
-    window.addEventListener("resize", updatePortfolioArrow);
-    return () => window.removeEventListener("resize", updatePortfolioArrow);
-  }, [isPortfolioBarVisible, portfolioSummary, updatePortfolioArrow]);
   React5.useEffect(() => {
     if (typeof window === "undefined") return;
     const ua = navigator.userAgent;
@@ -5577,17 +5479,6 @@ var Header = ({
         }
       ),
       isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-        portfolioSummary && /* @__PURE__ */ jsxRuntime.jsx(
-          PortfolioEyeButton,
-          {
-            id: "portfolio-eye-toggle",
-            type: "button",
-            onClick: togglePortfolioBar,
-            $active: isPortfolioBarVisible,
-            title: isPortfolioBarVisible ? "Hide portfolio" : "Show portfolio",
-            children: isPortfolioBarVisible ? /* @__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: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }) : /* @__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: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 001 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" }) })
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsxs(UserMenu, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             UserButton,
@@ -5659,51 +5550,6 @@ var Header = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(HeaderSpacer, {}),
-    isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
-      const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-      const isPLPositive = portfolioSummary.pnl >= 0;
-      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
-        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
-        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Holdings" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
-            "$",
-            fmt(portfolioSummary.holdings)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "+" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Cash" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
-            "$",
-            fmt(portfolioSummary.cash)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "=" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Portfolio" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
-            "$",
-            fmt(portfolioSummary.portfolioValue)
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
-            isPLPositive ? "+" : "",
-            "$",
-            fmt(Math.abs(portfolioSummary.pnl)),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
-              "(",
-              isPLPositive ? "+" : "",
-              portfolioSummary.pnlPercent.toFixed(2),
-              "%)"
-            ] })
-          ] })
-        ] })
-      ] }) });
-    })(),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsxRuntime.jsx(
       LoginPopupComponent,
       {
@@ -5789,19 +5635,8 @@ var HeaderContainer = styled25__default.default.header`
   box-sizing: border-box;
 
   @media (max-width: 768px) {
-    top: 0.5rem;
-    left: 0.75rem;
-    right: 0.75rem;
-    width: calc(100% - 1.5rem);
-    height: 46px;
-    min-height: 46px;
-    padding: 0 0.75rem;
-    border-radius: 12px;
-    background-color: rgba(13, 17, 23, 0.92);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    padding: 0 1rem;
+    padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
   }
 `;
 var HeaderSpacer = styled25__default.default.div`
@@ -5809,10 +5644,6 @@ var HeaderSpacer = styled25__default.default.div`
   min-height: 56px;
   min-height: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
   flex-shrink: 0;
-
-  @media (max-width: 768px) {
-    min-height: calc(46px + 0.5rem);
-  }
 `;
 var Logo = styled25__default.default.div`
   display: flex;
@@ -6146,151 +5977,6 @@ var MobileNavItem = styled25__default.default.div`
     padding-left: 24px;
   }
 `;
-var pbShimmer = styled25.keyframes`
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-`;
-var PortfolioEyeButton = styled25__default.default.button`
-  background: ${(p) => p.$active ? "rgba(212, 175, 55, 0.15)" : "transparent"};
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  padding: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.5)"};
-  transition: all 0.2s ease;
-  margin-right: 4px;
-
-  &:hover {
-    background: rgba(212, 175, 55, 0.2);
-    color: #D4AF37;
-  }
-
-  @media (max-width: 768px) {
-    padding: 4px;
-    margin-right: 2px;
-  }
-`;
-var PortfolioBarContainer = styled25__default.default.div`
-  position: fixed;
-  top: 56px;
-  top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
-  left: 0;
-  right: 0;
-  z-index: 999;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  padding: 0 5%;
-  pointer-events: none;
-  overflow: visible;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 40%;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.25) 100%);
-    pointer-events: none;
-  }
-
-  @media (max-width: 768px) {
-    top: calc(46px + 0.5rem);
-    padding: 0 0.75rem;
-    justify-content: center;
-
-    &::before {
-      left: 0;
-      right: 0;
-      background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 30%, rgba(212, 175, 55, 0.4) 70%, transparent 100%);
-    }
-  }
-`;
-var PortfolioBarPill = styled25__default.default.div`
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-  padding: 0.5rem 1.5rem;
-  border-radius: 0 0 20px 20px;
-  background: linear-gradient(135deg, rgba(24, 26, 34, 0.98) 0%, rgba(32, 34, 42, 0.97) 100%);
-  backdrop-filter: blur(16px);
-  border: 1px solid rgba(212, 175, 55, 0.25);
-  border-top: none;
-  box-shadow:
-    0 4px 16px rgba(0, 0, 0, 0.3),
-    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
-    0 1px 0 rgba(212, 175, 55, 0.06) inset;
-  position: relative;
-  overflow: visible;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
-    background-size: 200% 100%;
-    animation: ${pbShimmer} 4s linear infinite;
-  }
-
-  @media (max-width: 768px) {
-    gap: 0.75rem;
-    padding: 0.4rem 1rem;
-    border-radius: 0 0 16px 16px;
-  }
-`;
-var PortfolioBarArrow = styled25__default.default.div`
-  position: absolute;
-  top: -7px;
-  width: 14px;
-  height: 14px;
-  background: linear-gradient(135deg, rgba(26, 28, 36, 1) 0%, rgba(30, 32, 40, 1) 100%);
-  border-left: 1px solid rgba(212, 175, 55, 0.3);
-  border-top: 1px solid rgba(212, 175, 55, 0.3);
-  transform: rotate(45deg);
-  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.25);
-  pointer-events: none;
-`;
-var PBMetric = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  white-space: nowrap;
-`;
-var PBMetricLabel = styled25__default.default.span`
-  font-size: 0.55rem;
-  color: rgba(255, 255, 255, 0.6);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 500;
-`;
-var PBMetricValue = styled25__default.default.span`
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: ${(p) => p.$positive ? "#0ecb81" : p.$negative ? "#f6465d" : "#eaecef"};
-  font-variant-numeric: tabular-nums;
-`;
-var PBDot = styled25__default.default.div`
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: rgba(212, 175, 55, 0.25);
-  flex-shrink: 0;
-`;
-var PBOperator = styled25__default.default.span`
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.35);
-  flex-shrink: 0;
-`;
 var PropertySubheader = React5__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
     const tabsContainerRef = React5__namespace.useRef(null);
@@ -6414,8 +6100,193 @@ var PropertySubheader = React5__namespace.forwardRef(
       }
     );
   }
-);
-PropertySubheader.displayName = "PropertySubheader";
+);
+PropertySubheader.displayName = "PropertySubheader";
+var slideIn = styled25.keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = styled25.keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = styled25.keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled25__default.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled25__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled25__default.default.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled25__default.default.div`
+  flex: 1;
+  min-width: 0;
+`;
+var Title = styled25__default.default.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+`;
+var Amount = styled25__default.default.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
+`;
+var TxRow = styled25__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
+`;
+var TxArrow = styled25__default.default.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled25__default.default.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar = styled25__default.default.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: ${({ $color }) => $color};
+    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
+  }
+`;
+var Container = styled25__default.default.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = React5.useState(false);
+  const timerRef = React5.useRef(null);
+  const dismiss = React5.useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  React5.useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = React5.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React5.useState([]);
+  const addToast = React5.useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = React5.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = React5.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
@@ -6443,6 +6314,7 @@ var LoginPopup = ({
   const [error, setError] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
+  const { toast } = useToast();
   const [fundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
   const [showKycWidget, setShowKycWidget] = React5.useState(false);
@@ -6456,6 +6328,11 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
+  React5.useEffect(() => {
+    if (view === "kyc" && renderKycWidget) {
+      setShowKycWidget(true);
+    }
+  }, [view, renderKycWidget]);
   React5.useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
@@ -6658,10 +6535,19 @@ var LoginPopup = ({
   };
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
+    onClose();
     if (result.passed) {
-      setView("kyc-success");
+      toast({
+        variant: "success",
+        title: "KYC submitted \u2014 pending review",
+        amount: "Your documents are under review. Please check back in a few minutes."
+      });
     } else {
-      setView("kyc-failed");
+      toast({
+        variant: "error",
+        title: "Verification unsuccessful",
+        amount: "Your identity check didn't pass. Please contact support if you believe this is an error."
+      });
     }
   };
   const handleKycWidgetClose = () => {
@@ -6752,7 +6638,7 @@ var LoginPopup = ({
   if (view === "main") {
     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(Title2, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Welcome to Loaf"
       ] }),
@@ -6813,7 +6699,7 @@ var LoginPopup = ({
         /* @__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" }) }),
         "Back"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         isSignUp ? "Sign up with Email" : "Sign in with Email"
       ] }),
@@ -6852,7 +6738,7 @@ var LoginPopup = ({
         /* @__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" }) }),
         "Back"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Enter Verification Code"
       ] }),
@@ -6968,7 +6854,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "funding") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
       FundingPopupContainer,
       {
         onClick: (event) => event.stopPropagation(),
@@ -7038,16 +6924,6 @@ var Overlay2 = styled25__default.default.div`
   justify-content: center;
   align-items: center;
   z-index: 10000;
-  animation: fadeIn 0.2s ease-in-out;
-
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
 `;
 var PopupContainer = styled25__default.default.div`
   background-color: var(--color-background, #0a0a0a);
@@ -7057,20 +6933,8 @@ var PopupContainer = styled25__default.default.div`
   max-width: 440px;
   width: 90%;
   position: relative;
-  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 
-  @keyframes slideUp {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   @media (max-width: 768px) {
     padding: 2rem;
     max-width: 90%;
@@ -7084,21 +6948,9 @@ var KycPopupContainer = styled25__default.default.div`
   max-width: ${(props) => props.$expanded ? "680px" : "440px"};
   width: 90%;
   position: relative;
-  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   transition: max-width 0.3s ease;
 
-  @keyframes slideUp {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   @media (max-width: 768px) {
     padding: 1.5rem;
     max-width: 95%;
@@ -7157,7 +7009,7 @@ var CloseButton = styled25__default.default.button`
     color: var(--color-accent, #e6c656);
   }
 `;
-var Title = styled25__default.default.h2`
+var Title2 = styled25__default.default.h2`
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--color-text, #eaecef);
@@ -7426,21 +7278,9 @@ var FundingPopupContainer = styled25__default.default.div`
   max-width: ${(props) => props.$hasWidget ? "900px" : "440px"};
   width: 90%;
   position: relative;
-  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   overflow: hidden;
 
-  @keyframes slideUp {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
   @media (max-width: 768px) {
     padding: ${(props) => props.$hasWidget ? "0" : "2rem"};
     max-width: 95%;
@@ -7729,7 +7569,7 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       void 0,
       pricePercentFormat
     )}%`;
-    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock, { $variant: propertyValueVariant, children: [
+    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock2, { $variant: propertyValueVariant, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PriceAmount, { children: formattedPriceValue }),
       formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxRuntime.jsxs(
         PriceChange,
@@ -8042,7 +7882,7 @@ var PropertyValueChange = styled25__default.default.span`
     font-size: 0.65rem;
   }
 `;
-var PriceBlock = styled25__default.default.div`
+var PriceBlock2 = styled25__default.default.div`
   display: none;
 
   ${({ $variant }) => $variant === "pill" && styled25.css`
@@ -8136,7 +7976,7 @@ function GalleryMapSection({
       /* @__PURE__ */ jsxRuntime.jsxs(ThumbStrip, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ThumbScroll, { children: images.filter((img) => img.category !== "Floorplan").map((img) => {
           const actualIndex = images.indexOf(img);
-          return /* @__PURE__ */ jsxRuntime.jsx(Thumbnail2, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
             stopAutoPlay();
             setShowVideo(false);
             setCarouselIndex(actualIndex);
@@ -8276,7 +8116,7 @@ var ThumbScroll = styled25__default.default.div`
   scrollbar-width: none;
   &::-webkit-scrollbar { display: none; }
 `;
-var Thumbnail2 = styled25__default.default.div`
+var Thumbnail = styled25__default.default.div`
   min-width: 60px; height: 45px; border-radius: 4px; overflow: hidden;
   cursor: pointer; border: 2px solid transparent; opacity: 0.6;
   transition: all 0.2s ease; flex-shrink: 0;
@@ -8807,7 +8647,7 @@ function PropertyHistory() {
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: loafListing.date.replace(/\d+,\s|\s\d+$/, "") })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { $isOwnershipStart: true, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: loafListing.type, children: loafListing.type === "Sale" ? "Sold" : loafListing.type }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: loafListing.type, children: loafListing.type === "Sale" ? "Sold" : loafListing.type }) }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { children: loafListing.saleType ?? "-" }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { children: loafListing.agent })
           ] }) }) }),
@@ -8869,7 +8709,7 @@ function PropertyHistory() {
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: ownershipSale.date.replace(/\d+,\s|\s\d+$/, "") })
             ] }) }),
             ownershipSale && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { $isOwnershipStart: true, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: ownershipSale.type, children: ownershipSale.type === "Sale" ? "Sold" : ownershipSale.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: ownershipSale.type, children: ownershipSale.type === "Sale" ? "Sold" : ownershipSale.type }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: ownershipSale.saleType ?? "-" }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: ownershipSale.agent })
             ] }) }) }),
@@ -8878,7 +8718,7 @@ function PropertyHistory() {
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: events.map((event) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(EventDetails, { event }) }, event.id)) })
             ] }),
             otherSales.length > 0 && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: otherSales.map((sale) => /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: sale.type, children: sale.type === "Sale" ? "Sold" : sale.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: sale.type, children: sale.type === "Sale" ? "Sold" : sale.type }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: sale.saleType ?? "-" }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: sale.agent })
             ] }, sale.id)) }) })
@@ -9021,7 +8861,7 @@ function EventDetails({ event }) {
         onClick: toggleExpand,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center flex-1 gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: event.type, children: event.type === "Sale" ? "Sold" : event.type }),
+            /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: event.type, children: event.type === "Sale" ? "Sold" : event.type }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: event.date })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-[var(--color-text-secondary)] w-6 h-6 rounded-full transition-colors duration-200 hover:bg-white/10", children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 20 }) })
@@ -9265,7 +9105,7 @@ var HistoryRow = styled25__default.default.tr`
     background-color: rgba(255, 255, 255, 0.08);
   }
 `;
-var TypeBadge2 = styled25__default.default.span`
+var TypeBadge = styled25__default.default.span`
   display: inline-block;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
@@ -9675,9 +9515,7 @@ function AssetSelectorBar({
   metrics: metricsProp,
   currentTokenName,
   selectorItems,
-  onSelect,
-  trailing,
-  imageUrl
+  onSelect
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -9686,7 +9524,6 @@ function AssetSelectorBar({
     ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
   ];
   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,
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9707,7 +9544,7 @@ function AssetSelectorBar({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: m.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, $secondary: !!m.secondary, children: m.value })
+          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, children: m.value })
         ] }),
         m.change != null && /* @__PURE__ */ jsxRuntime.jsxs(MetricChange, { $positive: m.change >= 0, children: [
           m.change >= 0 ? "\u2191" : "\u2193",
@@ -9716,7 +9553,6 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
-    trailing,
     isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
@@ -9776,20 +9612,6 @@ var IPOAssetSelector = styled25__default.default.div`
     padding: 0.6rem 0.75rem;
   }
 `;
-var AssetThumbnail = styled25__default.default.img`
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex-shrink: 0;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-
-  @media (max-width: 768px) {
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-  }
-`;
 var AssetSelectorDropdown = styled25__default.default.div`
   display: flex;
   align-items: center;
@@ -9857,16 +9679,16 @@ var MetricLabel2 = styled25__default.default.span`
   }
 `;
 var MetricValue = styled25__default.default.span`
-  font-size: ${(p) => p.$secondary ? "0.95rem" : "1.25rem"};
-  font-weight: ${(p) => p.$secondary ? "600" : "700"};
-  color: ${(p) => p.$accent ? "#D4AF37" : p.$secondary ? "rgba(255,255,255,0.7)" : "#fff"};
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
 
   @media (max-width: 768px) {
-    font-size: ${(p) => p.$secondary ? "0.85rem" : "1.05rem"};
+    font-size: 1.05rem;
   }
 
   @media (max-width: 480px) {
-    font-size: ${(p) => p.$secondary ? "0.8rem" : "0.95rem"};
+    font-size: 0.95rem;
   }
 `;
 var MetricChange = styled25__default.default.span`
@@ -9963,7 +9785,6 @@ function OfferingProgressCard({
   raisedAmount,
   targetAmount,
   isPrivateClient = false,
-  variant = "default",
   style,
   className
 }) {
@@ -9995,109 +9816,7 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
-  if (variant === "compact") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(CompactContainer, { style, className, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ProgressSubscribers, { children: [
-          "Subscribers: ",
-          subscriberCount.toLocaleString()
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ProgressAmounts, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "target", children: [
-            " / ",
-            formatCurrency3(computedTarget)
-          ] })
-        ] })
-      ] })
-    ] });
-  }
-  if (variant === "home") {
-    const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
-    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
-          " Offering Progress"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: "#0ecb81", $pulse: true }),
-          "LIVE"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: statusColor || "#D4AF37" }),
-          statusLabel || "Preparing"
-        ] }) })
-      ] }),
-      isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
-        countdown ? /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { children: "Opens In" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsSide, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsLabel, { children: "Units Subscribed" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsValue, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HomeSpinner, {}),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              " / ",
-              supplyToSell.toLocaleString()
-            ] })
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(LiveBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(LiveTopRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(LiveLabel, { children: [
-              "Offering Subscribed ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
-              percentSold.toFixed(1),
-              "%",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arrow", children: "\u2191" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LiveLabel, { children: "Units Subscribed" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(UnitsValue, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: totalSold.toLocaleString() }),
-              /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
-                "/ ",
-                supplyToSell.toLocaleString()
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ProgressSubscribers, { children: [
-            "Subscribers: ",
-            subscriberCount.toLocaleString()
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ProgressAmounts, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "target", children: [
-              " / ",
-              formatCurrency3(computedTarget)
-            ] })
-          ] })
-        ] })
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { style, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
@@ -10165,7 +9884,7 @@ function OfferingProgressCard({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
-            percentSold.toFixed(1),
+            percentSold < 0.1 && percentSold > 0 ? percentSold.toFixed(3) : percentSold.toFixed(1),
             "%",
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arrow", children: "\u2191" })
           ] })
@@ -10198,7 +9917,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container = styled25__default.default.div`
+var Container2 = styled25__default.default.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -10398,59 +10117,6 @@ var ProgressAmounts = styled25__default.default.div`
   .raised { color: #D4AF37; }
   .target { color: rgba(255,255,255,0.3); }
 `;
-var CompactContainer = styled25__default.default.div`
-  width: 100%;
-  margin: 1.5rem 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-`;
-var HomePreLiveRow = styled25__default.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: 1rem;
-`;
-var HomeCountdownSide = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex: 1;
-`;
-var HomeUnitsSide = styled25__default.default.div`
-  text-align: center;
-  flex-shrink: 0;
-`;
-var HomeUnitsLabel = styled25__default.default.div`
-  font-size: 0.6rem;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: 0.2rem;
-`;
-var HomeUnitsValue = styled25__default.default.div`
-  font-size: 1.1rem;
-  font-weight: 700;
-  font-family: monospace;
-  span {
-    color: var(--color-text-secondary);
-    font-weight: 400;
-  }
-`;
-var HomeSpinner = styled25__default.default.span`
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--color-accent, #f0b90b);
-  border-radius: 50%;
-  animation: homeSpin 1s linear infinite;
-  vertical-align: middle;
-  margin-right: 0.15rem;
-  @keyframes homeSpin {
-    to { transform: rotate(360deg); }
-  }
-`;
 var MAX_DISPLAY_AMOUNT = 6e4;
 var formatCurrency4 = (amount) => {
   if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
@@ -10787,191 +10453,6 @@ var LiveIndicatorDot = styled25__default.default.span`
     100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
   }
 `;
-var slideIn = styled25.keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut = styled25.keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = styled25.keyframes`
-  from { width: 100%; }
-  to   { width: 0%; }
-`;
-var VARIANT_COLORS = {
-  success: { accent: "#0ecb81", icon: "\u2713" },
-  error: { accent: "#f6465d", icon: "\u2715" },
-  info: { accent: "#E6C656", icon: "\u2139" },
-  pending: { accent: "#7EB3E6", icon: "\u25CC" }
-};
-var Wrapper = styled25__default.default.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 340px;
-  background: #0d0f1a;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
-  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled25__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled25__default.default.div`
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: ${({ $color }) => $color}1a;
-  border: 1px solid ${({ $color }) => $color}55;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: ${({ $color }) => $color};
-  margin-top: 1px;
-`;
-var Content = styled25__default.default.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title2 = styled25__default.default.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled25__default.default.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled25__default.default.a`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
-  font-size: 0.68rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.15s;
-  &:hover {
-    color: #7EB3E6;
-  }
-`;
-var TxArrow = styled25__default.default.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled25__default.default.button`
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  padding: 2px 4px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 0.9rem;
-  line-height: 1;
-  transition: color 0.15s;
-  &:hover { color: rgba(255, 255, 255, 0.7); }
-`;
-var ProgressBar = styled25__default.default.div`
-  height: 2px;
-  background: rgba(255, 255, 255, 0.06);
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: ${({ $color }) => $color};
-    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container2 = styled25__default.default.div`
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 10px;
-  pointer-events: none;
-`;
-var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
-function truncateHash(hash) {
-  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
-}
-function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = React5.useState(false);
-  const timerRef = React5.useRef(null);
-  const dismiss = React5.useCallback(() => {
-    setExiting(true);
-    setTimeout(() => onDismiss(toast.id), 280);
-  }, [onDismiss, toast.id]);
-  React5.useEffect(() => {
-    const duration2 = toast.duration ?? 6e3;
-    if (duration2 > 0) {
-      timerRef.current = setTimeout(dismiss, duration2);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [dismiss, toast.duration]);
-  const { accent, icon } = VARIANT_COLORS[toast.variant];
-  const duration = toast.duration ?? 6e3;
-  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
-  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
-        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
-        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
-          truncateHash(toast.txHash),
-          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
-    ] }),
-    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
-  ] });
-}
-var ToastContext = React5.createContext(null);
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = React5.useState([]);
-  const addToast = React5.useCallback((data) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-    setToasts((prev) => [...prev, { ...data, id }]);
-    return id;
-  }, []);
-  const dismiss = React5.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
-  ] });
-}
-function useToast() {
-  const ctx = React5.useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
-  return ctx;
-}
 function OrderPanel({
   statusLabel,
   statusColor,
@@ -11989,7 +11470,7 @@ function PortfolioActivityPanel({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(HoldingsQuantity, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              formatNumber2(pos.quantity),
+              pos.quantity.toFixed(2),
               " ",
               pos.tokenName
             ] }),
@@ -12001,7 +11482,8 @@ function PortfolioActivityPanel({
           /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPnL, { children: [
             /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
               isPositive ? "+" : "-",
-              formatCurrency5(Math.abs(pnl))
+              "$",
+              Math.abs(pnl).toFixed(2)
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
               isPositive ? "+" : "",
@@ -12127,14 +11609,7 @@ function PortfolioActivityPanel({
             formatTimestamp(trade.executedAt)
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ActivityTag,
-          {
-            $color: trade.side === "SELL" ? "#f6465d" : "#0ecb81",
-            $bg: trade.side === "SELL" ? "rgba(246,70,93,0.12)" : "rgba(14,203,129,0.12)",
-            children: sideLabel(trade.side)
-          }
-        ),
+        trade.status === "SETTLEMENT_FAILED" ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#f6465d", $bg: "rgba(246,70,93,0.12)", children: "Failed" }) : trade.status === "SETTLED" ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#0ecb81", $bg: "rgba(14,203,129,0.12)", children: "Settled" }) : /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#f0b90b", $bg: "rgba(240,185,11,0.15)", children: "Settling" }),
         /* @__PURE__ */ jsxRuntime.jsx(ActivityAmount, { children: formatCurrency5(trade.price * trade.quantity) })
       ] }, trade.tradeId))
     ] }),
@@ -12312,8 +11787,8 @@ var ActivityPrimary = styled25__default.default.span`
   font-weight: 500;
 `;
 var ActivitySecondary = styled25__default.default.span`
-  font-size: 0.6rem;
-  color: rgba(255, 255, 255, 0.35);
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.5);
 `;
 var ActivityTag = styled25__default.default.span`
   font-size: 0.58rem;
@@ -14206,7 +13681,7 @@ function PropertyValuation({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Last Price" }),
-              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: formatCurrency6(lastPrice) })
+              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: formatCompact(lastPrice) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
@@ -14217,11 +13692,11 @@ function PropertyValuation({
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(PricingDetailValue, { style: { color: "var(--color-accent)", fontWeight: "bold" }, children: [
-                formatCurrency6(fairValue),
+                formatCompact(fairValue),
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
                   "(",
-                  formatCurrency6(fairValue * tokensOutstanding, { maximumFractionDigits: 0 }),
+                  formatCompact(fairValue * tokensOutstanding),
                   ")"
                 ] })
               ] })
@@ -14238,7 +13713,7 @@ function PropertyValuation({
               /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "fairValue", position: 50 }),
               /* @__PURE__ */ jsxRuntime.jsxs(GaugePriceTag, { position: gaugePosition, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Last Price" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency6(lastPrice) })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCompact(lastPrice) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "lastPrice", position: gaugePosition })
             ] }),
@@ -14246,36 +13721,36 @@ function PropertyValuation({
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#4CAF50" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "< ",
-                  formatCurrency6(undervaluedThreshold)
+                  formatCompact(undervaluedThreshold)
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatMillions(undervaluedThreshold * tokensOutstanding),
+                  formatCompact(undervaluedThreshold * tokensOutstanding),
                   ")"
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "var(--color-accent)" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency6(fairValue) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCompact(fairValue) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatMillions(fairValue * tokensOutstanding),
+                  formatCompact(fairValue * tokensOutstanding),
                   ")"
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#F44336" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "> ",
-                  formatCurrency6(overvaluedThreshold)
+                  formatCompact(overvaluedThreshold)
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatMillions(overvaluedThreshold * tokensOutstanding),
+                  formatCompact(overvaluedThreshold * tokensOutstanding),
                   ")"
                 ] })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HiddenMobileChart, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
             /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
               axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
@@ -14394,15 +13869,7 @@ function PropertyValuation({
               ] })
             ] }) })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "desktop-only-historical-chart", style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { className: "desktop-only-historical-chart", children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
-          axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
-          /* @__PURE__ */ jsxRuntime.jsxs(ValuationSvg, { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, preserveAspectRatio: "none", children: [
-            valuationPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: valuationPath, fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null,
-            fairValuePath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: fairValuePath, fill: "none", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null
-          ] })
-        ] }) })
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(RecentSalesSection, { children: [
@@ -14476,6 +13943,14 @@ function formatMillions(value) {
   }
   return `$${(value / 1e6).toFixed(2)}m`;
 }
+function formatCompact(value) {
+  if (value == null || !Number.isFinite(value)) return "\u2014";
+  const abs = Math.abs(value);
+  if (abs >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
+  if (abs >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
+  if (abs >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;
+  return formatCurrency6(value);
+}
 function formatBedroomLabel(bedrooms) {
   if (!Number.isFinite(bedrooms)) return "\u2014";
   return `${bedrooms} Bed`;
@@ -14599,12 +14074,6 @@ var GaugePriceTag = styled25__default.default.div`
     color: var(--color-accent);
   }
 `;
-var HiddenMobileChart = styled25__default.default.div`
-  display: none;
-  @media (max-width: 480px) {
-    display: block;
-  }
-`;
 var ValuationWrapper = styled25__default.default.div`
   display: flex;
   flex-direction: column;
@@ -14656,9 +14125,10 @@ var PricingModelCard = styled25__default.default.div`
 var PricingModelHeader = styled25__default.default.div`
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   margin-bottom: 1.5rem;
   gap: 1rem;
+  flex-wrap: wrap;
 
   .valuation-info {
     display: flex;
@@ -14666,6 +14136,7 @@ var PricingModelHeader = styled25__default.default.div`
     gap: 0.25rem;
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.75);
+    flex-shrink: 0;
   }
 `;
 var PricingModelTitle = styled25__default.default.h3`
@@ -14732,15 +14203,31 @@ var ValuationDetails = styled25__default.default.div`
   display: flex;
   justify-content: space-between;
   margin-top: 1rem;
+  gap: 0.25rem;
 `;
 var ValuationItem = styled25__default.default.div`
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
 `;
 var ValuationValue = styled25__default.default.div`
   font-size: 1rem;
   font-weight: 600;
   color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow-wrap: break-word;
+  word-break: break-word;
+
+  @media (max-width: 480px) {
+    font-size: 0.72rem;
+
+    .valuation-amount-span {
+      display: none;
+    }
+  }
 `;
 var ChartContainer = styled25__default.default.div`
   width: 100%;
@@ -15153,7 +14640,7 @@ var ThumbnailStrip = styled25__default.default.div`
     display: none;
   }
 `;
-var Thumbnail3 = styled25__default.default.button`
+var Thumbnail2 = styled25__default.default.button`
   width: 86px;
   height: 64px;
   border-radius: 6px;
@@ -15489,7 +14976,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(Thumbnail3, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
+        /* @__PURE__ */ jsxRuntime.jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(Thumbnail2, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
       ]
     }
   );