Live picks: cleaner count chip on the bolt button

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/frontend/src/components/views/LivePicks.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { CloseOutlined, DownOutlined, LockOutlined, ThunderboltFilled } from "@ant-design/icons";
-import { Badge, Button, Card, Flex, Progress, Typography } from "antd";
+import { Button, Card, Flex, Progress, Typography } from "antd";
 import type { OrderStats } from "../../lib/services/ordersService";
 import { getStoredValue, setStoredValue } from "../../lib/storage";
 
@@ -99,9 +99,8 @@ export function LivePicksFab({ stats, closed }: { stats: OrderStats; closed: boo
           aria-label={`Show live picks, ${stats.participant_count} ordered`}
           onClick={() => setOpen(true)}
         >
-          <Badge count={stats.participant_count} size="small" offset={[4, -4]} color="#fff" styles={{ indicator: { color: "#c2410c", fontWeight: 700 } }}>
-            <span className="live-fab-icon">{icon(closed)}</span>
-          </Badge>
+          <span className="live-fab-icon">{icon(closed)}</span>
+          <span className="live-fab-count">{stats.participant_count}</span>
         </button>
       )}
     </div>

src/frontend/src/styles.css

@@ -213,6 +213,7 @@
 .live-fab-wrap > * { pointer-events: auto; }
 .live-sheet { width: 100%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
 .live-fab {
+  position: relative;
   width: 48px;
   height: 48px;
   border: 0;
@@ -228,3 +229,19 @@
 @media (prefers-reduced-motion: reduce) {
   .live-banner, .live-banner > .anticon:first-child, .live-fab-icon { animation: none !important; }
 }
+.live-fab-count {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  color: #c2410c;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+.live-fab.closed .live-fab-count { color: #6b6560; }