Modernize UI design with new color system, typography and layout

- Add sticky dark header with nav replacing inline text links
- Introduce CSS custom properties design system (colors, spacing, shadows)
- Use DM Sans + JetBrains Mono fonts replacing Arial
- Modernize tables with uppercase headers and subtle hover states
- Add gradient fill and rounded line to rating chart
- Unify card sections across players and courses pages
- Add backdrop blur to modals
- Clean up inline styles to use CSS variables

views/pages/courses.ejs

@@ -1,21 +1,22 @@
 <% var body = `
-        <div class="search-container">
-            <input
-                type="text"
-                class="search-input"
-                id="course-search"
-                name="q"
-                placeholder="Search courses by name or city..."
-                hx-get="/partials/course-table"
-                hx-trigger="input changed delay:300ms, search"
-                hx-target="#courses-table"
-            />
-        </div>
-
-        <div class="controls">
-            <button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
-                <i class="fas fa-sync-alt"></i> Scrape Courses
-            </button>
+        <div class="card-section">
+            <h3>Find Courses</h3>
+            <div class="card-section-form">
+                <input
+                    type="text"
+                    class="input"
+                    id="course-search"
+                    name="q"
+                    placeholder="Search courses by name or city..."
+                    hx-get="/partials/course-table"
+                    hx-trigger="input changed delay:300ms, search"
+                    hx-target="#courses-table"
+                    style="width: 340px;"
+                />
+                <button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
+                    <i class="fas fa-sync-alt"></i> Scrape Courses
+                </button>
+            </div>
         </div>
 
         <div id="loading" class="loading" style="display: none;">Loading courses...</div>
@@ -29,4 +30,4 @@
     cssFiles: ['courses.css'],
     jsFiles: ['courses.js'],
     body: body
-}) %>
+}) %>