Stage pill colors scale from light gray to dark blue

Stage 1 = bg-slate-100 (matches Flat status pill), each subsequent stage
gets a deeper blue. Shared helper in lib/stage-colors.ts used by both
the main dashboard and the account detail page.

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

app/accounts/[id]/page.tsx

@@ -15,6 +15,7 @@ import {
     Dot,
 } from 'recharts';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undefined {
     return [...firm.accounts]
@@ -381,7 +382,7 @@ export default function AccountPage() {
                             label={
                                 <span className="inline-flex items-center gap-1.5">
                                     Profit Target
-                                    <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                                         Stage {account.stage}
                                     </span>
                                 </span>

app/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 type SortKey = 'name' | 'balance' | 'dayPnL' | 'daysTraded' | 'target' | 'status';
 type SortDir = 'asc' | 'desc';
@@ -24,6 +25,7 @@ function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undef
         .find((a) => name.startsWith(a.prefix));
 }
 
+
 function fmt(value: number) {
     return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
@@ -137,7 +139,7 @@ function AccountRow({ account, firm, hideDead, privacy }: { account: AccountStat
                 <div className="flex flex-col">
                     <div className="flex items-center gap-1.5">
                         <span>${(account.effectiveProfitTarget ?? cfg?.profitTarget ?? 0).toLocaleString(undefined, { maximumFractionDigits: 2 })}</span>
-                        <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                        <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                             Stage {account.stage}
                         </span>
                     </div>

lib/stage-colors.ts

@@ -0,0 +1,11 @@
+/**
+ * Stage 1 starts very light (matching Flat status), gets progressively darker blue with each stage.
+ */
+export function stagePillClasses(stage: number): string {
+    if (stage <= 1) return 'bg-slate-100 text-slate-500';
+    if (stage === 2) return 'bg-blue-100 text-blue-700';
+    if (stage === 3) return 'bg-blue-200 text-blue-800';
+    if (stage === 4) return 'bg-blue-400 text-white';
+    if (stage === 5) return 'bg-blue-600 text-white';
+    return 'bg-blue-800 text-white'; // 6+
+}