Fix: Explanation card visible + visual divider between 2/3 and 1/3

- exerciseType prop for correct explanation lookup (was using title)
- Vertical divider line between work area and native helper
- Cyan-tinted explanation card with lightbulb icon
- Padding between sections (pr-6 / pl-6 around divider)
- Explanation card has distinct background for visibility

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

studio-v2/app/learn/[unitId]/match/page.tsx

@@ -124,9 +124,9 @@ export default function MatchPage() {
   return (
     <ExerciseLayout
       title={t('match')}
+      exerciseType="match"
       onBack={() => router.push('/learn')}
       progress={{ current: matchedTotal, total: totalPairs }}
-      exerciseExplanation={undefined}
       nativeHelper={nativePanel}
       score={
         <div className={`text-xs ${isDark ? 'text-white/50' : 'text-slate-500'}`}>

studio-v2/components/learn/ExerciseLayout.tsx

@@ -11,6 +11,8 @@ interface ExerciseLayoutProps {
   nativeHelper?: React.ReactNode
   /** Explanation text for parents (shown above native words) */
   exerciseExplanation?: string
+  /** Exercise type key for auto-explanation lookup (e.g. 'match', 'flashcards') */
+  exerciseType?: string
   /** Title for the exercise in the header */
   title: string
   /** Progress: current / total */
@@ -50,6 +52,7 @@ export function ExerciseLayout({
   children,
   nativeHelper,
   exerciseExplanation,
+  exerciseType,
   title,
   progress,
   onBack,
@@ -62,9 +65,10 @@ export function ExerciseLayout({
     ? 'bg-white/10 backdrop-blur-xl border border-white/10'
     : 'bg-white/80 backdrop-blur-xl border border-black/5'
 
+  const typeKey = exerciseType || title.toLowerCase()
   const explanation = exerciseExplanation
-    || explanations[title.toLowerCase()]?.[nativeLang]
+    || explanations[typeKey]?.[nativeLang]
-    || explanations[title.toLowerCase()]?.['de']
+    || explanations[typeKey]?.['de']
     || ''
 
   return (
@@ -100,23 +104,29 @@ export function ExerciseLayout({
 
       {/* Main content: 2/3 left + 1/3 right */}
       <div className="max-w-5xl mx-auto w-full px-6 py-6">
-        <div className={`flex gap-6 ${isThirdLanguage ? '' : ''}`}>
+        <div className="flex gap-0">
           {/* Left: Exercise area (2/3 or full) */}
-          <div className={isThirdLanguage ? 'w-2/3' : 'w-full'}>
+          <div className={isThirdLanguage ? 'w-2/3 pr-6' : 'w-full'}>
             {children}
           </div>
 
+          {/* Divider line */}
+          {isThirdLanguage && (
+            <div className={`w-px self-stretch ${isDark ? 'bg-white/10' : 'bg-slate-200'}`} />
+          )}
+
           {/* Right: Native language helper (1/3) — only for migrants */}
           {isThirdLanguage && (
-            <div className="w-1/3">
+            <div className="w-1/3 pl-6">
-              <div className={`sticky top-20 space-y-4`}>
+              <div className="sticky top-20 space-y-4">
                 {/* Explanation card */}
                 {explanation && (
-                  <div className={`${glassCard} rounded-2xl p-4`}>
+                  <div className={`rounded-2xl p-4 ${isDark ? 'bg-cyan-500/5 border border-cyan-400/20' : 'bg-cyan-50 border border-cyan-200'}`}>
-                    <h3 className={`text-xs font-semibold mb-2 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
+                    <h3 className={`text-xs font-semibold mb-2 flex items-center gap-2 ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
+                      <span className="text-base">💡</span>
                       {nativeLang.toUpperCase()} · {t('english')} · {t('german')}
                     </h3>
-                    <p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+                    <p className={`text-xs leading-relaxed ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
                       {explanation}
                     </p>
                   </div>