Add persistent language switcher across all learn/parent pages

useNativeLanguage: Now has setNativeLang() that persists to localStorage.
Language selection carries across all pages automatically.

LanguageSwitcher: Compact dropdown component added to learn/layout.tsx
and parent/layout.tsx — visible on every sub-page (top-right).

Parent portal: Language dropdown syncs both UI language and native
language. Parents can switch language mid-session (e.g. when both
parents speak different languages).

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

studio-v2/app/learn/layout.tsx

@@ -2,14 +2,16 @@
 
 import { Sidebar } from '@/components/Sidebar'
 import { useTheme } from '@/lib/ThemeContext'
+import { useNativeLanguage } from '@/lib/useNativeLanguage'
+import { LanguageSwitcher } from '@/components/learn/LanguageSwitcher'
 
 /**
  * Shared layout for ALL /learn/* pages.
- * Provides: Sidebar + gradient background + flex container.
- * Individual pages only need to render their content.
+ * Provides: Sidebar + gradient background + language switcher.
  */
 export default function LearnLayout({ children }: { children: React.ReactNode }) {
   const { isDark } = useTheme()
+  const { nativeLang, setNativeLang, isThirdLanguage } = useNativeLanguage()
 
   return (
     <div className={`min-h-screen flex relative overflow-hidden ${
@@ -21,6 +23,14 @@ export default function LearnLayout({ children }: { children: React.ReactNode })
         <Sidebar />
       </div>
       <div className="flex-1 flex flex-col relative z-10 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
+        {/* Sticky language switcher at top-right */}
+        <div className="sticky top-0 z-20 flex justify-end px-4 py-2">
+          <LanguageSwitcher
+            currentLang={nativeLang}
+            onLangChange={setNativeLang}
+            isDark={isDark}
+          />
+        </div>
         {children}
       </div>
     </div>