Add load balancer marker for inbound country flag

Reserved CountryCode "XX" (Inbound.BalancerCountryCode) marks an inbound
behind a load balancer whose exit country is unknown: the site shows a
Shuffle icon with a tooltip instead of a flag, the bot shows 🔀. Admin can
pick it in the publish dialog. Fits the existing column, no migration.

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

frontend/src/shared/ui/country-flag.tsx

@@ -1,8 +1,19 @@
-import { FLAGS } from '@/shared/lib/countries'
+import { Shuffle } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { BALANCER_COUNTRY_CODE, FLAGS } from '@/shared/lib/countries'
 import { cn } from '@/shared/lib/cn'
 
 export function CountryFlag({ code, className }: { code: string | null | undefined; className?: string }) {
+  const { t } = useTranslation()
   if (!code) return null
+  if (code.toUpperCase() === BALANCER_COUNTRY_CODE) {
+    const label = t('countries.balancer')
+    return (
+      <span title={label} aria-label={label} className={cn('inline-flex shrink-0 text-sky-400', className)}>
+        <Shuffle className="h-3.5 w-3.5" aria-hidden />
+      </span>
+    )
+  }
   const Flag = FLAGS[code.toUpperCase()]
   if (!Flag) {
     return <span className={cn('font-mono text-xs text-muted-foreground', className)}>{code.toUpperCase()}</span>