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/LessonsScreen.tsx

@@ -4,6 +4,7 @@ import { Brain, Check, ChevronDown, Lock, Play, Sparkles } from 'lucide-react';
 import { api, type HomeNode, type HomeUnit } from '@/api';
 import { useAppData } from '@/state/AppData';
 import { findContinue, unitColor, unitProgress } from '@/state/curriculum';
+import { onWhite } from '@/lib/color';
 import { useNav } from '@/nav/Navigator';
 import { useAsync } from '@/lib/useAsync';
 import { EmptyState, ErrorState, LoadingState, ProgressBar, Screen, ScreenHeader, Sep } from '@/components/ui';
@@ -36,7 +37,7 @@ export function LessonsScreen() {
       <ScreenHeader
         title="درس‌ها"
         subtitle={<>{gradeTitle && <>{gradeTitle}<Sep /></>}اول بخون، بعد آزمونِ جزیره رو بده</>}
-        color="#2FB36B"
+        color="#97C0C0"
         mascot={{ char: 'sigma', mood: 'happy' }}
       >
         {home && totalNodes > 0 && (
@@ -62,7 +63,7 @@ export function LessonsScreen() {
                 type="button"
                 onClick={() => nav.push({ name: 'lesson', lessonId: current.node.nextLessonId as number, nodeId: current.node.id })}
                 className="flex items-center gap-3 rounded-2xl px-4 py-3.5 text-right text-white"
-                style={{ backgroundColor: unitColor(current.unitIndex), boxShadow: `0 4px 0 ${unitColor(current.unitIndex)}99` }}
+                style={{ backgroundColor: onWhite(unitColor(current.unitIndex)), boxShadow: `0 4px 0 ${onWhite(unitColor(current.unitIndex))}99` }}
               >
                 <span className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-white/25">
                   <Play size={20} fill="white" />
@@ -181,7 +182,7 @@ function NodeRow({
       >
         <span
           className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-black"
-          style={done ? { backgroundColor: '#5FBF8F', color: '#fff' } : { backgroundColor: locked ? '#f0eeff' : `${color}22`, color: locked ? '#727299' : color }}
+          style={done ? { backgroundColor: '#3E9E73', color: '#fff' } : { backgroundColor: locked ? '#f0eeff' : `${color}22`, color: locked ? '#727299' : color }}
         >
           {done ? <Check size={15} strokeWidth={3.5} /> : locked ? <Lock size={13} /> : toFa(num)}
         </span>
@@ -219,7 +220,7 @@ function NodeRow({
                     >
                       <span
                         className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-[11px] font-black"
-                        style={l.done ? { backgroundColor: '#5FBF8F', color: '#fff' } : { backgroundColor: '#fff', color: '#727299', border: '1px solid #e9e6f7' }}
+                        style={l.done ? { backgroundColor: '#3E9E73', color: '#fff' } : { backgroundColor: '#fff', color: '#727299', border: '1px solid #e9e6f7' }}
                       >
                         {l.done ? <Check size={13} strokeWidth={3.5} /> : toFa(li + 1)}
                       </span>
@@ -232,7 +233,7 @@ function NodeRow({
                 type="button"
                 onClick={() => nav.push({ name: 'quiz', nodeId: node.id })}
                 className="mt-2.5 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-black text-white active:translate-y-[2px]"
-                style={{ backgroundColor: color, boxShadow: `0 3px 0 ${color}99` }}
+                style={{ backgroundColor: onWhite(color), boxShadow: `0 3px 0 ${onWhite(color)}99` }}
               >
                 {done ? <Sparkles size={15} /> : <Play size={15} fill="white" />}
                 {done ? 'دوباره تمرین کن' : 'درس‌ها رو خوندی؟ برو آزمون'}