style(watchlist): counters on their own centred line, sane placeholders

The counters are the tab's headline and now sit alone, centred, above the
toolbar; everything one interacts with lives on the second row. The inputs stop
shouting their placeholders — the uppercase belonged to the VALUE (callsigns),
not the hint text — and the auto-contest field says what it is.

frontend/src/components/WatchlistTab.tsx

@@ -223,18 +223,22 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
     // Capped and centred: a card is a reading surface, and callsign-to-badge
     // lines stretched across a 34-inch window are not readable, they are long.
     <div className="flex flex-col min-h-0 flex-1 gap-2 p-2 w-full max-w-5xl mx-auto">
-      {/* toolbar */}
-      <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
+      {/* Header: the counters alone, centred — they are the tab's headline.
+          Everything one INTERACTS with lives on the second row. */}
+      <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
         <Eye className="size-4 text-primary shrink-0" />
-        <span className="text-[11px] text-muted-foreground shrink-0">
+        <span>
           {t('wl.cTotal')} <b className="text-foreground">{counters.total}</b>
-          <span className="mx-1 opacity-50">·</span>
+          <span className="mx-1.5 opacity-50">|</span>
           {t('wl.cActive')} <b className="text-info">{counters.active}</b>
-          <span className="mx-1 opacity-50">·</span>
+          <span className="mx-1.5 opacity-50">|</span>
           {t('wl.cNeeded')} <b className="text-warning">{counters.needed}</b>
         </span>
-        <Input className="h-8 w-44 font-mono uppercase" placeholder={t('wl.addPh')} value={addCall}
-          onChange={(e) => setAddCall(e.target.value)}
+      </div>
+      {/* toolbar */}
+      <div className="flex items-center gap-x-2 gap-y-1.5 flex-wrap">
+        <Input className="h-8 w-44 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.addPh')} value={addCall}
+          onChange={(e) => setAddCall(e.target.value.toUpperCase())}
           onKeyDown={(e) => { if (e.key === 'Enter') void add(); }} />
         <label className="flex items-center gap-1.5 text-xs cursor-pointer" title={t('wl.contestHint')}>
           <Checkbox checked={addContest} onCheckedChange={(c) => setAddContest(!!c)} />
@@ -243,7 +247,7 @@ export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: P
         <Button size="sm" className="h-8" onClick={() => void add()} disabled={!addCall.trim()}>
           <Plus className="size-3.5" /> {t('wl.add')}
         </Button>
-        <Input className="h-8 w-28 font-mono uppercase" placeholder={t('wl.patternPh')}
+        <Input className="h-8 w-28 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.patternPh')}
           title={t('wl.patternHint')}
           value={pattern}
           onChange={(e) => setPattern(e.target.value.toUpperCase())}