fix: Remove agreed_price from price API response

The agreed_price depends on trade direction (buy/sell) and must be
calculated on the frontend. Returning a buy-side-only agreed_price
from the API was misleading and unused.

Frontend already calculates the direction-aware price correctly.

frontend/app/trades/page.tsx

@@ -26,14 +26,56 @@ function formatEur(cents: number): string {
 }
 
 /**
- * Format satoshi amount with thousand separators
+ * Format satoshi amount with styled components
+ * Leading zeros are subtle, main digits are prominent
  */
-function formatSats(sats: number): string {
+function SatsDisplay({ sats }: { sats: number }) {
   const btc = sats / 100_000_000;
   const btcStr = btc.toFixed(8);
   const [whole, decimal] = btcStr.split(".");
-  const grouped = decimal.replace(/(.{2})(.{3})(.{3})/, "$1 $2 $3");
-  return `${whole}.${grouped}`;
+
+  const part1 = decimal.slice(0, 2);
+  const part2 = decimal.slice(2, 5);
+  const part3 = decimal.slice(5, 8);
+
+  const fullDecimal = part1 + part2 + part3;
+  let firstNonZero = fullDecimal.length;
+  for (let i = 0; i < fullDecimal.length; i++) {
+    if (fullDecimal[i] !== "0") {
+      firstNonZero = i;
+      break;
+    }
+  }
+
+  const subtleStyle: React.CSSProperties = {
+    opacity: 0.45,
+    fontWeight: 400,
+  };
+
+  const renderPart = (part: string, startIdx: number) => {
+    return part.split("").map((char, i) => {
+      const globalIdx = startIdx + i;
+      const isSubtle = globalIdx < firstNonZero;
+      return (
+        <span key={globalIdx} style={isSubtle ? subtleStyle : undefined}>
+          {char}
+        </span>
+      );
+    });
+  };
+
+  return (
+    <span style={{ fontFamily: "'DM Mono', monospace" }}>
+      <span style={subtleStyle}>₿</span>
+      <span style={subtleStyle}> {whole}.</span>
+      {renderPart(part1, 0)}
+      <span> </span>
+      {renderPart(part2, 2)}
+      <span> </span>
+      {renderPart(part3, 5)}
+      <span> sats</span>
+    </span>
+  );
 }
 
 /**
@@ -196,7 +238,7 @@ export default function TradesPage() {
                               <span style={styles.amount}>{formatEur(trade.eur_amount)}</span>
                               <span style={styles.arrow}>↔</span>
                               <span style={styles.satsAmount}>
-                                {formatSats(trade.sats_amount)} sats
+                                <SatsDisplay sats={trade.sats_amount} />
                               </span>
                             </div>
                             <div style={styles.rateRow}>
@@ -208,18 +250,6 @@ export default function TradesPage() {
                                 })}
                                 /BTC
                               </span>
-                              <span
-                                style={{
-                                  ...styles.premiumBadge,
-                                  background: isBuy
-                                    ? "rgba(248, 113, 113, 0.15)"
-                                    : "rgba(74, 222, 128, 0.15)",
-                                  color: isBuy ? "#f87171" : "#4ade80",
-                                }}
-                              >
-                                {isBuy ? "+" : "-"}
-                                {trade.premium_percentage}%
-                              </span>
                             </div>
                             <span
                               style={{
@@ -297,7 +327,7 @@ export default function TradesPage() {
                           <span style={styles.amount}>{formatEur(trade.eur_amount)}</span>
                           <span style={styles.arrow}>↔</span>
                           <span style={styles.satsAmount}>
-                            {formatSats(trade.sats_amount)} sats
+                            <SatsDisplay sats={trade.sats_amount} />
                           </span>
                         </div>
                         <span
@@ -421,13 +451,6 @@ const styles: Record<string, React.CSSProperties> = {
     fontSize: "0.8rem",
     color: "rgba(255, 255, 255, 0.7)",
   },
-  premiumBadge: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    fontSize: "0.65rem",
-    fontWeight: 600,
-    padding: "0.15rem 0.4rem",
-    borderRadius: "3px",
-  },
   buttonGroup: {
     display: "flex",
     gap: "0.5rem",