refactor: extract shared trade card styles to shared.ts

Move duplicate style definitions from trades/page.tsx and
admin/trades/page.tsx to a new tradeCardStyles export in shared.ts.

Both pages now import and use these shared styles, keeping only
page-specific styles locally. This improves maintainability and
ensures visual consistency.

frontend/app/styles/shared.ts

@@ -659,6 +659,114 @@ export const toastStyles: StyleRecord = {
   },
 };
 
+// =============================================================================
+// Trade Card Styles (shared between trades and admin/trades pages)
+// =============================================================================
+
+export const tradeCardStyles: StyleRecord = {
+  /** Container for list of trade cards */
+  tradeList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.75rem",
+  },
+  /** Individual trade card */
+  tradeCard: {
+    background: tokens.surfaceBg,
+    border: `1px solid ${tokens.surfaceBorder}`,
+    borderRadius: tokens.radiusLg,
+    padding: "1.25rem",
+    transition: "all 0.2s",
+  },
+  /** Trade card header - flex row for info + actions */
+  tradeHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    gap: "1rem",
+  },
+  /** Left side info container */
+  tradeInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+  },
+  /** Trade date/time display */
+  tradeTime: {
+    fontFamily: tokens.fontSans,
+    fontSize: "1rem",
+    fontWeight: 500,
+    color: tokens.white,
+    marginBottom: "0.5rem",
+  },
+  /** Trade amount details row */
+  tradeDetails: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    flexWrap: "wrap",
+  },
+  /** BUY/SELL direction badge (base - color applied inline) */
+  directionBadge: {
+    fontFamily: tokens.fontSans,
+    fontSize: "0.7rem",
+    fontWeight: 600,
+    padding: "0.2rem 0.5rem",
+    borderRadius: "4px",
+    textTransform: "uppercase",
+  },
+  /** EUR amount display */
+  amount: {
+    fontFamily: tokens.fontMono,
+    fontSize: "0.95rem",
+    color: tokens.white,
+    fontWeight: 500,
+  },
+  /** Arrow between EUR and sats */
+  arrow: {
+    color: tokens.textDisabled,
+    fontSize: "0.8rem",
+  },
+  /** Sats amount in Bitcoin orange */
+  satsAmount: {
+    fontFamily: tokens.fontMono,
+    fontSize: "0.9rem",
+    color: "#f7931a", // Bitcoin orange
+  },
+  /** Rate info row */
+  rateRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    marginTop: "0.25rem",
+    flexWrap: "wrap",
+  },
+  /** Rate label text */
+  rateLabel: {
+    fontFamily: tokens.fontSans,
+    fontSize: "0.75rem",
+    color: tokens.textDim,
+  },
+  /** Rate value in monospace */
+  rateValue: {
+    fontFamily: tokens.fontMono,
+    fontSize: "0.8rem",
+    color: tokens.textSecondary,
+  },
+  /** Button group container */
+  buttonGroup: {
+    display: "flex",
+    gap: "0.5rem",
+  },
+  /** Empty state for no trades */
+  emptyState: {
+    fontFamily: tokens.fontSans,
+    color: tokens.textDim,
+    textAlign: "center" as const,
+    padding: "3rem",
+  },
+};
+
 // =============================================================================
 // Misc Utility Styles
 // =============================================================================