refactor(ui): unify frontend around compact, desktop-first design

Extract shared utilities (color functions, icon registry), replace hero
banners with compact PageHeader, add TrimesterSelector/ConfirmDialog/
Breadcrumb components, consolidate off-palette colors to design tokens,
convert AssessmentListView to table layout, compress ResultsView stats
into horizontal bar, and inline ClassFormView as a modal in ClassListView.

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

frontend/src/components/common/PageHeader.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="mb-6">
+    <Breadcrumb v-if="breadcrumbs && breadcrumbs.length" :crumbs="breadcrumbs" />
+    <div class="flex items-center justify-between">
+      <div>
+        <div class="flex items-center gap-3">
+          <router-link
+            v-if="backTo"
+            :to="backTo"
+            class="text-gray-400 hover:text-gray-600"
+          >
+            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
+          </router-link>
+          <h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
+          <slot name="meta"></slot>
+        </div>
+        <p v-if="subtitle" class="text-sm text-gray-500 mt-1">{{ subtitle }}</p>
+      </div>
+      <div class="flex items-center gap-2">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Breadcrumb from '@/components/common/Breadcrumb.vue'
+
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  backTo: {
+    type: [String, Object],
+    default: null
+  },
+  breadcrumbs: {
+    type: Array,
+    default: null
+  }
+})
+</script>