Visual polish: theme-aware colors, collapsible cards, skeletons, hover consistency

Templates only, no backend changes:

- Fixed the real bug: JS-generated status/loading text and a few component
  styles used hardcoded hex (#007acc, #999/#666, #28a745, #ff6b6b) instead
  of the CSS variables the theme system already provides, so they didn't
  track the user's chosen theme/accent - most visible on Light or any named
  theme other than the default. Added --success/--error to all 5 templates'
  :root blocks and replaced every non-:root occurrence. Left the
  .lesson-type badge colors and generic UI chrome grays alone (intentional,
  not theme-dependent). Verified live by switching to Nord and Light themes.
- Dashboard cards (Library Stats, Next Up, Pick Back Up, Recently Added,
  Continue Watching, Recently Viewed) are now collapsible, state remembered
  per device via localStorage - the no-course dashboard had grown to 7
  stacked cards.
- Course page's three action buttons get consistent compact sizing and
  icons instead of a plain stack.
- Library browser and transcript search show shimmering skeleton rows
  instead of bare "Loading..."/"Searching..." text while a fetch is in
  flight.
- Hover treatment made consistent: transcript results get the same lift
  .lesson-item already had, heatmap cells get a GitHub-style hover
  scale-up, and Notes Hub links get a background-chip hover.

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

OfflineU-project-summary.md

@@ -324,6 +324,47 @@ export, a Next Up queue, and an activity heatmap.
   into the existing Library Stats card, using the same per-day counts the
   shared scan already computes for the streak stat.
 
+## Visual polish pass (this session)
+
+Templates-only, no backend changes. Confirmed by inventory
+(`grep -noE '#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b'` across all 5 templates)
+before touching anything, to separate real bugs from the `:root` theme
+palette definitions themselves.
+
+- **Theme-aware colors (the actual bug)** — JS-generated status/loading
+  text and a few component styles used hardcoded hex instead of the CSS
+  variables the theme system already provides: `#007acc` instead of
+  `var(--accent)` (the course completion-% number, lesson_view.html's
+  notification banner), `#999`/`#666` instead of `var(--text-muted)` for
+  loading/empty/error hint text, and `#28a745`/`#ff6b6b` (success/error)
+  hardcoded in ~25 places with no shared variable at all. Added
+  `--success`/`--error` to all 5 templates' `:root` blocks (fixed values,
+  not theme-varied - semantic status colors stay recognizable across
+  themes by convention) and replaced every non-`:root` occurrence.
+  Deliberately left alone: the `.lesson-type` badge colors (video/audio/
+  text/quiz/mixed - intentional fixed content-type coding) and generic UI
+  chrome grays (progress-bar track, disabled-button background) unrelated
+  to theme. Verified live by switching to Nord and Light themes and
+  confirming the completion-% number and status text actually track the
+  chosen accent/muted colors instead of staying stuck on the old defaults.
+- **Dashboard card collapse** — click a card's `<h2>` to collapse it,
+  remembered in `localStorage` per card, no backend involved. Applied to
+  the six stackable no-course-dashboard cards (Library Stats, Next Up,
+  Pick Back Up, Recently Added, Continue Watching, Recently Viewed) - the
+  Library browser card stays always-visible as the primary action.
+- **Course page action buttons** — the three stats-card buttons (Mark all
+  completed / Add to Next Up / Download Study Guide) now use consistent
+  `.btn-sm` compact sizing with icons, in a `.course-actions` flex row
+  instead of a plain inline-styled stack.
+- **Skeleton loading states** — the Library browser and transcript search
+  show shimmering placeholder rows (`skeletonRowsHtml()`, pure CSS
+  gradient-position animation) while a fetch is in flight, instead of
+  bare "Loading…"/"Searching…" text.
+- **Hover consistency** — `.transcript-result` now gets the same lift
+  hover `.lesson-item` already had; `.heatmap-day` gets a GitHub-style
+  hover scale-up; `.note-card-link` (Notes Hub) gets a background-chip
+  hover instead of just underline.
+
 ## Workflow that's been in use
 Edit locally → `git add . && git commit -m "..." && git push` to the private
 Gitea repo → redeploy the stack in Dockhand (which builds from the fresh