Replace the header brand emoji with a play-badge logo

Swap the 📚 emoji in the header for an inline SVG mark - a rounded
square with a play triangle, echoing that this is a video-course
library. Uses var(--accent)/var(--bg-secondary) rather than fixed
colors so it re-colors automatically with whichever of the app's
theme presets is active, same as everything else in the header.

Applied consistently across all 5 templates; the small secondary
footer brand mark (still plain 📚 text) is untouched - this only
replaces the prominent header lockup.

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

templates/course_dashboard.html

@@ -105,9 +105,9 @@
             cursor: pointer;
         }
 
-        .brand-icon {
-            font-size: 2.2em;
-            line-height: 1;
+        .brand-mark {
+            flex-shrink: 0;
+            display: block;
         }
 
         .brand h1 {
@@ -901,7 +901,10 @@
     <div class="app-header">
         <div class="container">
             <a href="/reset_course" class="brand">
-                <span class="brand-icon">📚</span>
+                <svg class="brand-mark" viewBox="0 0 64 64" width="44" height="44" aria-hidden="true">
+                    <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                    <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+                </svg>
                 <div>
                     <h1>OfflineU</h1>
                     <p class="tagline">Your self-hosted course library</p>