feat(details): NEW badge on a county never worked

The cluster already answers this question for a spot; the entry panel did
not answer it for the station actually being worked. A county hunter
needs to know before the QSO ends — by the time the county shows up in
the awards table the station is long gone.

qso.CountyWorked asks about one county instead of loading the whole
worked set, narrowed to the state so it stays a few dozen rows on a
remote MySQL. It compares through award.USCountyKey on both sides rather
than in SQL, because logged spellings vary ("Los Angeles" against
"LOS ANGELES, CA") and that key function is what resolves it everywhere
else.

An empty or non-US county is not "new" but unknown, and shows nothing: a
badge on a guess is worse than no badge.

frontend/src/components/DetailsPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ComputeQSOAwardRefs } from '../../wailsjs/go/main/App';
+import { ComputeQSOAwardRefs, IsNewUSCounty } from '../../wailsjs/go/main/App';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -121,15 +121,15 @@ function numOrUndef(v: string): number | undefined {
   return isNaN(n) ? undefined : n;
 }
 
-// Compact field helper to keep the JSX dense.
-// Written out rather than built as `col-span-${n}`: Tailwind scans for literal
-// class names, so an interpolated one is never emitted.
+// Column spans written out rather than built as `col-span-${n}`: Tailwind scans
+// for literal class names, so an interpolated one is never emitted.
 const SPAN_CLASS: Record<number, string> = {
   1: '', 2: 'col-span-2', 3: 'col-span-3', 4: 'col-span-4', 5: 'col-span-5',
   6: 'col-span-6', 7: 'col-span-7', 8: 'col-span-8', 9: 'col-span-9',
   10: 'col-span-10', 11: 'col-span-11', 12: 'col-span-12',
 };
 
+// Compact field helper to keep the JSX dense.
 function Field({ label, span = 1, className, children }: { label: string; span?: number; className?: string; children: React.ReactNode }) {
   return (
     <div className={cn('flex flex-col min-w-0', SPAN_CLASS[span], className)}>
@@ -155,6 +155,23 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth,
   // matches are merged into award_refs
   // (idempotent; award_refs is NOT a dependency, so removing one by hand sticks).
   const [detected, setDetected] = useState<Array<{ code: string; ref: string; name?: string; pickable?: boolean; ambiguous?: boolean }>>([]);
+
+  // NEW badge on the county: the same question the cluster's NEW CTY badge
+  // answers, for the station being worked right now. Debounced because the
+  // county field is typed into as well as filled by the lookup.
+  const [newCounty, setNewCounty] = useState(false);
+  useEffect(() => {
+    const cnty = (details.cnty ?? '').trim();
+    if (!cnty) { setNewCounty(false); return; }
+    let alive = true;
+    const id = window.setTimeout(async () => {
+      try {
+        const isNew = await IsNewUSCounty(details.state ?? '', cnty);
+        if (alive) setNewCounty(!!isNew);
+      } catch { if (alive) setNewCounty(false); }
+    }, 300);
+    return () => { alive = false; window.clearTimeout(id); };
+  }, [details.state, details.cnty]);
   useEffect(() => {
     if (open !== 'awards' || !callsign.trim()) { setDetected([]); return; }
     const t = window.setTimeout(async () => {
@@ -259,8 +276,16 @@ export function DetailsPanel({ callsign, prefix, operatorGrid, remoteGrid, qth,
           <Field label={t('detp.statePref')} span={2}>
             <Input value={details.state} onChange={(e) => onChange({ state: e.target.value })} />
           </Field>
-          <Field label={t('detp.county')} span={4}>
-            <Input value={details.cnty} onChange={(e) => onChange({ cnty: e.target.value })} />
+          <Field label={t('detp.county')} span={4} className="relative">
+            <Input value={details.cnty} onChange={(e) => onChange({ cnty: e.target.value })} className={cn(newCounty && 'pr-14')} />
+            {newCounty && (
+              <span
+                title={t('detp.newCountyTip')}
+                className="absolute right-1.5 bottom-1.5 rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wide bg-success text-success-foreground pointer-events-none"
+              >
+                {t('detp.newCounty')}
+              </span>
+            )}
           </Field>
           <Field label={t('detp.prefix')} span={2}>
             <Input className="font-mono uppercase" value={prefix} readOnly tabIndex={-1} />