Tweak zone labels in support UI

I like making these more concise and consistent across the dropdown and the cards, I'm still not 100% sold on the design but it seems ok for now!

At first I had it in the dropdown as "Background (3)", but realized that conflicts with the usual pattern of like, saying how many items match a certain filter…

src/app/WardrobePage/support/AllItemLayersSupportModal.js

@@ -68,7 +68,7 @@ function AllItemLayersSupportModal({ item, isOpen, onClose }) {
 
 function BulkAddBodySpecificAssetsForm({ onSubmit }) {
   const zones = [...cachedZones].sort((a, b) =>
-    `${a.label} (${a.id})`.localeCompare(`${b.label} (${b.id})`)
+    `${a.label}-${a.id}`.localeCompare(`${b.label}-${b.id}`)
   );
 
   const [minAssetId, setMinAssetId] = React.useState(null);
@@ -144,7 +144,7 @@ function BulkAddBodySpecificAssetsForm({ onSubmit }) {
       >
         {zones.map((zone) => (
           <option key={zone.id} value={zone.id}>
-            {zone.label} ({zone.id})
+            {zone.label} (Zone {zone.id})
           </option>
         ))}
       </Select>

src/app/WardrobePage/support/ItemSupportAppearanceLayer.js

@@ -73,8 +73,14 @@ function ItemSupportAppearanceLayer({
               />
             </Box>
           </Box>
-          <Box fontWeight="bold">{itemLayer.zone.label}</Box>
+          <Box>
-          <Box>Zone ID: {itemLayer.zone.id}</Box>
+            <Box as="span" fontWeight="700">
+              {itemLayer.zone.label}
+            </Box>{" "}
+            <Box as="span" fontWeight="600">
+              (Zone {itemLayer.zone.id})
+            </Box>
+          </Box>
           <Box>Neopets ID: {itemLayer.remoteId}</Box>
           <Box>DTI ID: {itemLayer.id}</Box>
           <ItemLayerSupportModal