fix(ui): improve pause toggle position in flow-viz account cards

- move pause toggle inline with email (was absolute positioned)

- always visible with subtle styling (not hover-only)

- amber highlight when paused for quick visual scan

ui/src/components/account/flow-viz/account-card.tsx

@@ -122,7 +122,16 @@ export function AccountCard({
         transform: `translate(${offset.x}px, ${offset.y}px)${isDragging ? ' scale(1.05)' : ''}`,
       }}
     >
-      {/* Pause toggle button - visible on hover or when paused */}
+      <GripVertical className="absolute top-2 right-2 w-4 h-4 text-muted-foreground/40" />
+      <div className="flex items-center gap-1.5 mb-1 mr-4">
+        <span
+          className={cn(
+            'text-xs font-semibold text-foreground tracking-tight truncate max-w-[100px]',
+            privacyMode && PRIVACY_BLUR_CLASS
+          )}
+        >
+          {cleanEmail(account.email)}
+        </span>
         {onPauseToggle && (
           <TooltipProvider>
             <Tooltip>
@@ -131,9 +140,9 @@ export function AccountCard({
                   variant="ghost"
                   size="icon"
                   className={cn(
-                  'absolute top-1.5 left-1.5 h-5 w-5 z-10',
+                    'h-4 w-4 shrink-0',
-                  'opacity-0 group-hover/card:opacity-100 transition-opacity',
+                    'transition-all rounded-full',
-                  account.paused && 'opacity-100'
+                    account.paused ? 'bg-amber-500/20 hover:bg-amber-500/30' : 'hover:bg-muted'
                   )}
                   onClick={(e) => {
                     e.stopPropagation();
@@ -142,11 +151,11 @@ export function AccountCard({
                   disabled={isPausingAccount}
                 >
                   {isPausingAccount ? (
-                  <Loader2 className="w-3 h-3 animate-spin" />
+                    <Loader2 className="w-2.5 h-2.5 animate-spin" />
                   ) : account.paused ? (
-                  <Play className="w-3 h-3 text-emerald-500" />
+                    <Play className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
                   ) : (
-                  <Pause className="w-3 h-3 text-muted-foreground" />
+                    <Pause className="w-2.5 h-2.5 text-muted-foreground/50 hover:text-foreground" />
                   )}
                 </Button>
               </TooltipTrigger>
@@ -156,16 +165,6 @@ export function AccountCard({
             </Tooltip>
           </TooltipProvider>
         )}
-      <GripVertical className="absolute top-2 right-2 w-4 h-4 text-muted-foreground/40" />
-      <div className="flex justify-between items-start mb-1 mr-4">
-        <span
-          className={cn(
-            'text-xs font-semibold text-foreground tracking-tight truncate max-w-[100px]',
-            privacyMode && PRIVACY_BLUR_CLASS
-          )}
-        >
-          {cleanEmail(account.email)}
-        </span>
       </div>
       <AccountCardStats
         success={account.successCount}