Colors keep their role: headers/banners darken to readable contrast (same hue), lessons uses the teal token, packages use indigo; +XP pop, streak milestone card, lazy confetti

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

src/screens/StreakScreen.tsx

@@ -57,6 +57,8 @@ export function StreakScreen() {
               ))}
             </div>
 
+            <StreakGoal current={calendar.data.currentStreak} />
+
             <div className="rounded-3xl border border-line bg-white p-4">
               <div className="mb-2 grid grid-cols-7 gap-1.5 text-center text-[10px] font-bold text-muted">
                 {WEEKDAYS.map((d) => <span key={d}>{d}</span>)}
@@ -90,3 +92,24 @@ export function StreakScreen() {
     </Screen>
   );
 }
+
+/** نقطه‌عطف‌های زنجیره؛ فقط پیام و نوار، هیچ پاداشِ واقعی‌ای پشتش نیست (پاداش تصمیمِ محصولی است). */
+const MILESTONES = [3, 7, 14, 30, 60, 100];
+
+function StreakGoal({ current }: { current: number }) {
+  const next = MILESTONES.find((m) => m > current);
+  const reached = MILESTONES.filter((m) => m <= current).pop();
+  return (
+    <div className="rounded-3xl border border-line bg-[#FFF3E8] px-4 py-3">
+      <p className="text-sm font-black leading-7 text-ink">
+        {reached ? `🔥 ${toFa(current)} روزه‌ای! ` : ''}
+        {next ? `${toFa(next - current)} روز دیگه می‌شه زنجیره‌ی ${toFa(next)} روزه.` : 'از همه‌ی نقطه‌عطف‌ها رد شدی، افسانه‌ای!'}
+      </p>
+      {next && (
+        <div className="mt-2 h-2 overflow-hidden rounded-full bg-white">
+          <div className="h-full rounded-full bg-orange transition-[width]" style={{ width: `${Math.round((current / next) * 100)}%` }} />
+        </div>
+      )}
+    </div>
+  );
+}