style(v2): amber/yellow meta states now show red instead

Non-active, non-idle VTank states (nav, turn_in_quests, etc.) now
display in red instead of amber/yellow in both:
- Map sidebar: .ml-meta-pill.other (red background + text)
- Dashboard cards: .badge-other (red background + text)

Green = combat/hunt, Red = nav/other states, Gray = idle/default

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/CharacterCard.tsx

@@ -9,10 +9,10 @@ interface Props {
 const vtankBadge = (state: string) => {
   const s = (state || 'idle').toLowerCase();
   if (s === 'combat' || s === 'hunt') return { label: s === 'combat' ? 'Combat' : 'Hunt', cls: 'badge-combat' };
-  if (s === 'nav' || s === 'navigation') return { label: 'Nav', cls: 'badge-nav' };
+  if (s === 'nav' || s === 'navigation') return { label: 'Nav', cls: 'badge-other' };
   if (s === 'default' || s === 'idle' || s === '') return { label: 'Idle', cls: 'badge-idle' };
   // Show the actual state name for anything else (e.g. turn_in_quests)
-  return { label: state, cls: 'badge-nav' };
+  return { label: state, cls: 'badge-other' };
 };
 
 export const CharacterCard: React.FC<Props> = React.memo(({ character }) => {

frontend/src/components/sidebar/PlayerRow.tsx

@@ -40,7 +40,7 @@ export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, co
 
         <span className="ml-gs" title="Rares (session / total)">💎 {p.session_rares ?? 0} / {p.total_rares ?? 0}</span>
         <span className="ml-gs" title="Kills per rare">{kpr ? <>📊 {kpr} <span className="ml-suffix">KPR</span></> : ''}</span>
-        <span className={`ml-meta-pill ${isActive ? 'active' : ''}`}>{p.vt_state || 'idle'}</span>
+        <span className={`ml-meta-pill ${isActive ? 'active' : vtState !== 'idle' && vtState !== 'default' && vtState !== '' ? 'other' : ''}`}>{p.vt_state || 'idle'}</span>
 
         <span className="ml-gs" title="Online time">🕐 {p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
         <span className="ml-gs" title="Deaths">☠️ {p.deaths ?? '0'}</span>

frontend/src/styles/global.css

@@ -166,6 +166,7 @@ body {
 }
 .badge-combat { background: rgba(68,204,68,0.2); color: var(--badge-combat); }
 .badge-nav    { background: rgba(255,170,0,0.2); color: var(--badge-nav); }
+.badge-other  { background: rgba(204,68,68,0.2); color: #c44; }
 .badge-idle   { background: rgba(100,100,100,0.2); color: var(--badge-idle); }
 
 /* ── Vital Bars ───────────────────────────────────────── */

frontend/src/styles/map-layout.css

@@ -319,6 +319,7 @@
   border-color: rgba(68, 136, 255, 0.5);
 }
 .ml-meta-pill.active { background: rgba(68, 204, 68, 0.15); color: #4c4; }
+.ml-meta-pill.other { background: rgba(204, 68, 68, 0.15); color: #c44; }
 
 /* ── Map container ────────────────────────────────────── */
 .ml-map-container {