feat: update update image

Move filters into a left sidebar, tighten spacing, match homepage checkboxes, fix forecast line domain/looping, and remove the redundant page subtitle. Also fix crxjs dev service worker live reload after Vite upgrade.

.gitignore

@@ -18,6 +18,7 @@ betterseqtaplus-safari/
 
 .million/
 .vscode/
+.cursor/
 **/.DS_Store
 .parcel-cache
 .env

lib/fixCrxWorkerLiveReload.ts

@@ -0,0 +1,19 @@
+import type { Plugin } from "vite";
+
+/**
+ * crxjs 2.6.x only replaces the first `__LIVE_RELOAD__` in `@crx/client-worker`,
+ * which crashes the service worker when the dev server reconnects.
+ */
+export default function fixCrxWorkerLiveReload(): Plugin {
+  return {
+    name: "fix-crx-worker-live-reload",
+    apply: "serve",
+    enforce: "post",
+    transform(code, id) {
+      if (!id.includes("@crx/client-worker") || !code.includes("__LIVE_RELOAD__")) {
+        return;
+      }
+      return code.replaceAll("__LIVE_RELOAD__", "true");
+    },
+  };
+}

package.json

@@ -42,7 +42,7 @@
     "@babel/plugin-transform-runtime": "^7.26.9",
     "@babel/runtime": "^7.26.9",
     "@bedframe/cli": "^0.1.2",
-    "@crxjs/vite-plugin": "^2.4.0",
+    "@crxjs/vite-plugin": "^2.6.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
     "@types/jest": "^30.0.0",
@@ -77,7 +77,7 @@
     "@codemirror/search": "^6.5.10",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.4",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@tsconfig/svelte": "^5.0.4",
     "@types/chrome": "^0.1.4",
@@ -122,7 +122,7 @@
     "svelte": "^5.46.4",
     "typescript": "^5.8.2",
     "uuid": "^11.1.0",
-    "vite": "^8.0.5",
+    "vite": "^6.2.1",
     "webextension-polyfill": "^0.12.0"
   }
 }

src/css/injected.scss

@@ -3615,26 +3615,6 @@ div.day-empty {
   font-size: 1em;
   color: var(--text-primary);
 }
-.whatsnewHeader.engageParentsAnnouncementHeader {
-  height: auto;
-  min-height: unset;
-}
-.whatsnewHeader.engageParentsAnnouncementHeader h1 {
-  line-height: 1.2;
-}
-.whatsnewHeader.engageParentsAnnouncementHeader .engageParentsSubheading {
-  margin-top: 0.35rem;
-  font-size: 1.05rem;
-  font-weight: 600;
-  opacity: 0.92;
-}
-.seqtaEngageAccent {
-  color: #ea580c;
-  font-weight: 700;
-}
-.dark .seqtaEngageAccent {
-  color: #fb923c;
-}
 .whatsnewBackground {
   width: 100%;
   height: 100%;
@@ -3763,25 +3743,6 @@ div.day-empty {
   object-fit: cover;
   margin-bottom: 12px;
 }
-.whatsnewTextContainer .engageParentsPromoWrap {
-  width: 100%;
-  margin-bottom: 12px;
-  border-radius: 16px;
-  overflow: hidden;
-  aspect-ratio: 16 / 9;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);
-  background: color-mix(in srgb, var(--background-secondary) 88%, var(--text-primary) 12%);
-}
-.whatsnewTextContainer .engageParentsPromoWrap .engageParentsPromoImg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  border-radius: 0;
-  aspect-ratio: unset;
-  object-fit: contain;
-  object-position: center;
-}
 
 .whatsnewHeader.bsCloudAutoSyncAnnouncementHeader {
   height: auto;
@@ -5014,66 +4975,3 @@ h2.home-subtitle {
   font-size: 20px;
   font-weight: 400;
 }
-
-.bsplus-toast {
-  position: fixed;
-  right: max(18px, env(safe-area-inset-right));
-  bottom: max(18px, env(safe-area-inset-bottom));
-  z-index: 10000;
-  width: min(360px, calc(100vw - 36px));
-  padding: 14px 16px 16px;
-  border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
-  border-radius: 20px;
-  background: var(--background-primary, #fff);
-  color: var(--text-primary, #1a1a1a);
-  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35);
-  font-size: 0.9rem;
-  line-height: 1.45;
-}
-.bsplus-toast-eyebrow {
-  margin: 0 0 6px !important;
-  font-size: 0.72rem !important;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: color-mix(in srgb, #ea580c 82%, var(--text-primary) 18%);
-  opacity: 1 !important;
-}
-.dark .bsplus-toast-eyebrow {
-  color: color-mix(in srgb, #fb923c 82%, var(--text-primary) 18%);
-}
-.bsplus-toast-content strong {
-  display: block;
-  padding-right: 34px;
-  font-size: 1.2rem;
-  line-height: 1.2;
-}
-.bsplus-toast-content p:not(.bsplus-toast-eyebrow) {
-  display: -webkit-box;
-  margin: 8px 0 0;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
-  font-size: 0.92rem;
-  line-height: 1.45;
-}
-.bsplus-toast-close {
-  position: absolute !important;
-  top: 4px !important;
-  right: 4px !important;
-  z-index: 2;
-  width: 32px;
-  height: 32px;
-  border: 1px solid rgba(255, 255, 255, 0.22);
-  border-radius: 16px !important;
-  background: rgba(0, 0, 0, 0.42);
-  color: white;
-  cursor: pointer;
-  font-size: 1.35rem;
-  line-height: 1;
-  transition: filter 0.15s ease;
-}
-.bsplus-toast-close:hover {
-  filter: brightness(1.08);
-}

src/plugins/built-in/gradeAnalytics/AnalyticsAreaChart.svelte

@@ -2,13 +2,14 @@
   import * as Chart from "./chart/index";
   import { scaleLinear } from "d3-scale";
   import { Area, AreaChart, ChartClipPath, Spline } from "layerchart";
-  import { curveNatural } from "d3-shape";
+  import { curveMonotoneX } from "d3-shape";
   import { cubicInOut } from "svelte/easing";
   import type { Assessment } from "./types";
   import {
     buildGradeTrendChart,
     getTimeRangeLabel,
     type TimeRange,
+    type TrendPoint,
   } from "./timeRange";
   import { computeGradeForecast, aggregateToMonthlyPoints } from "./utils/gradePrediction";
   import PredictionMonthsSlider from "./PredictionMonthsSlider.svelte";
@@ -46,7 +47,7 @@
     return computeGradeForecast(points, predictionMonths);
   });
 
-  /** Bridge point + future months — separate from historical so the main line stays intact. */
+  /** Bridge point + future months — separate series rendered via Spline. */
   const forecastLineData = $derived.by(() => {
     if (!showPrediction || !forecast) return [];
 
@@ -60,19 +61,21 @@
     ];
   });
 
-  /** Ghost future dates (null grades) extend the x domain without touching the historical line. */
+  const xDomain = $derived.by((): [Date, Date] | undefined => {
-  const chartData = $derived.by(() => {
+    const times = historicalData.map((p) => p.date.getTime());
-    if (!showPrediction || forecastLineData.length <= 1) {
+
-      return historicalData;
+    if (showPrediction && forecastLineData.length > 1) {
+      for (const point of forecastLineData.slice(1)) {
+        times.push(point.date.getTime());
+      }
     }
 
-    const futurePadding = forecastLineData.slice(1).map((p) => ({
+    if (!times.length) return undefined;
-      date: p.date,
-      average: null,
-      count: 0,
-    }));
 
-    return [...historicalData, ...futurePadding];
+    return [
+      new Date(Math.min(...times)),
+      new Date(Math.max(...times)),
+    ];
   });
 
   const chartConfig = $derived.by(() => {
@@ -157,12 +160,49 @@
     );
     return monthly.length >= 3;
   });
+
+  /** Historical + future forecast points so tooltips work across the dashed line. */
+  const chartData = $derived.by((): TrendPoint[] => {
+    if (!showPrediction || !forecast?.points.length) {
+      return historicalData;
+    }
+
+    const points = historicalData.map((p) => ({ ...p }));
+    const validHist = points.filter((p) => !Number.isNaN(p.average));
+    const last = validHist[validHist.length - 1];
+
+    if (last) {
+      const lastIdx = points.findIndex((p) => p.date.getTime() === last.date.getTime());
+      if (lastIdx >= 0) {
+        points[lastIdx] = { ...points[lastIdx], forecast: last.average };
+      }
+    }
+
+    const futurePoints: TrendPoint[] = forecast.points.map((p) => ({
+      date: p.date,
+      count: 0,
+      forecast: p.value,
+    })) as TrendPoint[];
+
+    return [...points, ...futurePoints];
+  });
 </script>
 
 <article class="bsplus-analytics-card">
   <header class="bsplus-analytics-card-header bsplus-analytics-card-header-split">
-    <div>
+    <div class="bsplus-analytics-card-header-text">
-      <h3 class="bsplus-analytics-card-title">Grade trends</h3>
+      <div class="bsplus-analytics-card-title-row">
+        <h3 class="bsplus-analytics-card-title">Grade trends</h3>
+        <label class="bsplus-analytics-checkbox bsplus-analytics-forecast-toggle">
+          <input
+            type="checkbox"
+            bind:checked={showPrediction}
+            disabled={!canForecast}
+          />
+          <span class="bsplus-analytics-checkmark" aria-hidden="true"></span>
+          <span>Forecast</span>
+        </label>
+      </div>
       <p class="bsplus-analytics-card-desc">
         {#if showSubjectTrends}
           Overall and per-subject averages · {getTimeRangeLabel(timeRange)}
@@ -172,21 +212,14 @@
       </p>
     </div>
 
-    <div class="bsplus-analytics-card-controls bsplus-analytics-forecast-controls">
+    {#if showPrediction}
-      <label class="bsplus-analytics-checkbox bsplus-analytics-forecast-toggle">
+      <div class="bsplus-analytics-card-controls">
-        <input
+        <label class="bsplus-analytics-card-control bsplus-analytics-forecast-horizon">
-          type="checkbox"
+          <span class="bsplus-analytics-field-label">Months</span>
-          bind:checked={showPrediction}
+          <PredictionMonthsSlider bind:value={predictionMonths} />
-          disabled={!canForecast}
+        </label>
-        />
-        <span>Grade forecast</span>
-      </label>
-
-      <div class="bsplus-analytics-card-control bsplus-analytics-forecast-horizon">
-        <span class="bsplus-analytics-field-label">Months ahead</span>
-        <PredictionMonthsSlider bind:value={predictionMonths} disabled={!showPrediction} />
       </div>
-    </div>
+    {/if}
   </header>
 
   <div class="bsplus-analytics-card-body">
@@ -197,11 +230,12 @@
           legend
           data={chartData}
           x="date"
+          {xDomain}
           yScale={yScale}
           series={areaSeries}
           props={{
             area: {
-              curve: curveNatural,
+              curve: curveMonotoneX,
               "fill-opacity": showSubjectTrends ? 0.12 : 0.35,
               line: { class: "stroke-2" },
               motion: "tween",
@@ -263,7 +297,7 @@
                 data={forecastLineData}
                 x="date"
                 y="forecast"
-                curve={curveNatural}
+                curve={curveMonotoneX}
                 class="bsplus-analytics-forecast-line"
               />
             {/if}

src/plugins/built-in/gradeAnalytics/GradeAnalyticsPage.svelte

@@ -209,7 +209,6 @@
           </span>
         {/if}
       </h1>
-      <p>Track your academic performance and progress over time</p>
       {#if lastUpdated && analyticsData && analyticsData.length > 0}
         <p class="bsplus-analytics-meta">Last updated: {formattedTimestamp()}</p>
       {/if}
@@ -244,32 +243,22 @@
       <div class="bsplus-analytics-spinner" aria-label="Loading analytics"></div>
     </div>
   {:else if analyticsData && analyticsData.length > 0}
-    <section
+    <div class="bsplus-analytics-layout bsplus-analytics-animate bsplus-analytics-delay-1">
-      class="bsplus-analytics-stats bsplus-analytics-animate bsplus-analytics-delay-1"
+      <aside class="bsplus-analytics-filters" aria-label="Filters">
-      aria-label="Summary statistics"
+        <div class="bsplus-analytics-filters-head">
-    >
+          <h2 class="bsplus-analytics-filters-title">Filters</h2>
-      <div class="bsplus-analytics-stat">
+          {#if hasActiveFilters()}
-        <div class="bsplus-analytics-stat-label">Average grade</div>
+            <button
-        <div class="bsplus-analytics-stat-value bsplus-analytics-stat-value-accent">
+              type="button"
-          {statsAverage !== null ? `${statsAverage}%` : "—"}
+              class="bsplus-analytics-filters-clear"
+              onclick={clearFilters}
+            >
+              Clear all
+            </button>
+          {/if}
         </div>
-      </div>
-      <div class="bsplus-analytics-stat">
-        <div class="bsplus-analytics-stat-label">Graded shown</div>
-        <div class="bsplus-analytics-stat-value">{gradedFiltered().length}</div>
-      </div>
-      <div class="bsplus-analytics-stat">
-        <div class="bsplus-analytics-stat-label">Subjects</div>
-        <div class="bsplus-analytics-stat-value">{statsSubjectCount}</div>
-      </div>
-    </section>
 
-    <div class="bsplus-analytics-toolbar bsplus-analytics-animate bsplus-analytics-delay-2">
+        <div class="bsplus-analytics-filter-group" data-analytics-dropdown>
-      <div class="bsplus-analytics-toolbar-grid">
-        <div
-          class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
-          data-analytics-dropdown
-        >
           <span class="bsplus-analytics-field-label">Time period</span>
           <div class="bsplus-analytics-dropdown" data-analytics-dropdown>
             <button
@@ -309,10 +298,7 @@
           </div>
         </div>
 
-        <div
+        <div class="bsplus-analytics-filter-group" data-analytics-dropdown>
-          class="bsplus-analytics-field bsplus-analytics-toolbar-dropdown-field"
-          data-analytics-dropdown
-        >
           <span class="bsplus-analytics-field-label">Subjects</span>
           <div class="bsplus-analytics-dropdown" data-analytics-dropdown>
             <button
@@ -361,7 +347,7 @@
                     <span class="bsplus-analytics-dropdown-check"
                       >{selected ? "✓" : ""}</span
                     >
-                    <span style="overflow:hidden;text-overflow:ellipsis">{subject}</span>
+                    <span class="bsplus-analytics-filter-subject-name">{subject}</span>
                   </button>
                 {/each}
               </div>
@@ -369,7 +355,7 @@
           </div>
         </div>
 
-        <div class="bsplus-analytics-field bsplus-analytics-toolbar-search">
+        <div class="bsplus-analytics-filter-group">
           <span class="bsplus-analytics-field-label">Search</span>
           <input
             type="search"
@@ -379,62 +365,65 @@
           />
         </div>
 
-        {#if hasActiveFilters()}
+        <div class="bsplus-analytics-filter-group">
-          <button
-            type="button"
-            class="bsplus-analytics-btn bsplus-analytics-btn-ghost bsplus-analytics-toolbar-clear"
-            onclick={clearFilters}
-          >
-            Clear filters
-          </button>
-        {/if}
-
-        <div class="bsplus-analytics-field bsplus-analytics-grade-range">
           <span class="bsplus-analytics-field-label">Grade range</span>
           <GradeRangeSlider bind:value={gradeRange} />
         </div>
 
-        <label
+        <div class="bsplus-analytics-filter-group">
-          class="bsplus-analytics-checkbox bsplus-analytics-toolbar-trends"
+          <label class="bsplus-analytics-checkbox">
-          class:bsplus-analytics-toolbar-trends-top={!hasActiveFilters()}
+            <input type="checkbox" bind:checked={showSubjectTrends} />
-        >
+            <span class="bsplus-analytics-checkmark" aria-hidden="true"></span>
-          <input type="checkbox" bind:checked={showSubjectTrends} />
+            <span>Per-subject trends</span>
-          <span>Show per-subject trends on chart</span>
+          </label>
-        </label>
+        </div>
+      </aside>
+
+      <div class="bsplus-analytics-main">
+        <div class="bsplus-analytics-stats" aria-label="Summary statistics">
+          <div class="bsplus-analytics-stat">
+            <div class="bsplus-analytics-stat-label">Average grade</div>
+            <div class="bsplus-analytics-stat-value bsplus-analytics-stat-value-accent">
+              {statsAverage !== null ? `${statsAverage}%` : "—"}
+            </div>
+          </div>
+          <div class="bsplus-analytics-stat">
+            <div class="bsplus-analytics-stat-label">Graded shown</div>
+            <div class="bsplus-analytics-stat-value">{gradedFiltered().length}</div>
+          </div>
+          <div class="bsplus-analytics-stat">
+            <div class="bsplus-analytics-stat-label">Subjects</div>
+            <div class="bsplus-analytics-stat-value">{statsSubjectCount}</div>
+          </div>
+        </div>
+
+        <div class="bsplus-analytics-results">
+          <div class="bsplus-analytics-charts">
+            <div class="bsplus-analytics-chart-cell">
+              <AnalyticsAreaChart
+                data={gradedFiltered()}
+                {timeRange}
+                showSubjectTrends={showSubjectTrends}
+              />
+            </div>
+            <div class="bsplus-analytics-chart-cell">
+              <AnalyticsBarChart data={gradedFiltered()} {timeRange} />
+            </div>
+          </div>
+
+          <AssessmentTable data={timeScopedData()} />
+        </div>
+
+        <footer class="bsplus-analytics-footer">
+          <span>
+            {timeScopedData().length} of {analyticsData.length} assessments shown
+            {#if gradedFiltered().length !== timeScopedData().length}
+              ({gradedFiltered().length} with grades)
+            {/if}
+          </span>
+        </footer>
       </div>
     </div>
-
-    <div class="bsplus-analytics-charts">
-      {#key filteredData().length + "-" + gradeRange.join(",") + filterSearch + filterSubjects.join("|") + timeRange + String(showSubjectTrends)}
-        <div class="bsplus-analytics-chart-cell">
-          <div class="bsplus-analytics-animate bsplus-analytics-delay-3">
-            <AnalyticsAreaChart
-              data={gradedFiltered()}
-              {timeRange}
-              showSubjectTrends={showSubjectTrends}
-            />
-          </div>
-        </div>
-        <div class="bsplus-analytics-chart-cell">
-          <div class="bsplus-analytics-animate bsplus-analytics-delay-4">
-            <AnalyticsBarChart data={gradedFiltered()} {timeRange} />
-          </div>
-        </div>
-      {/key}
-    </div>
-
-    <div class="bsplus-analytics-animate bsplus-analytics-delay-5">
-      <AssessmentTable data={timeScopedData()} />
-    </div>
-
-    <footer class="bsplus-analytics-footer">
-      <span>
-        {timeScopedData().length} of {analyticsData.length} assessments shown
-        {#if gradedFiltered().length !== timeScopedData().length}
-          ({gradedFiltered().length} with grades)
-        {/if}
-      </span>
-    </footer>
   {:else}
     <div class="bsplus-analytics-empty bsplus-analytics-animate" transition:fade={{ duration: 300 }}>
       <h2>No analytics data yet</h2>

src/plugins/built-in/gradeAnalytics/chart/chart-tooltip.svelte

@@ -143,7 +143,7 @@
                   {itemConfig?.label || item.name}
                 </span>
               </div>
-              {#if item.value !== undefined}
+              {#if item.value != null && !Number.isNaN(Number(item.value))}
                 <span class="font-mono font-medium tabular-nums">
                   {item.value.toLocaleString()}
                 </span>

src/plugins/built-in/gradeAnalytics/styles.css

@@ -12,6 +12,8 @@
   min-height: min(100%, calc(100vh - 6rem));
 }
 
+/* Theme tokens (mount + page); layout padding only on the inner page root */
+.bsplus-analytics-mount,
 .bsplus-analytics-root {
   --bsplus-analytics-radius: 16px;
   --bsplus-analytics-radius-sm: 12px;
@@ -34,21 +36,46 @@
   /* Set on host via ui.ts from --better-main / user selectedColor */
   --bsplus-analytics-accent: var(--better-main, #007bff);
   --bsplus-analytics-chart-height: 300px;
+  --bsplus-analytics-stack-gap: 0.625rem;
+  /* Form controls — aligned with global SEQTA select styling */
+  --bsplus-analytics-control-bg: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface) 94%,
+    var(--bsplus-analytics-surface-2) 6%
+  );
+  --bsplus-analytics-control-bg-elevated: var(--bsplus-analytics-surface);
+  --bsplus-analytics-control-border: color-mix(
+    in srgb,
+    var(--theme-offset-bg, var(--bsplus-analytics-surface-2)) 88%,
+    transparent
+  );
+  --bsplus-analytics-control-border-strong: color-mix(
+    in srgb,
+    var(--bsplus-analytics-text) 18%,
+    var(--theme-offset-bg, var(--bsplus-analytics-surface-2)) 82%
+  );
 
   width: 100%;
   max-width: none;
   margin: 0;
-  min-height: min(100%, calc(100vh - 6rem));
   box-sizing: border-box;
-  padding: 1.5rem 1.25rem 2rem;
+}
+
+.bsplus-analytics-mount {
+  min-height: min(100%, calc(100vh - 6rem));
+}
+
+.bsplus-analytics-root {
   font-family: Rubik, system-ui, sans-serif;
   font-size: 0.875rem;
   color: var(--bsplus-analytics-text);
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 0.75rem;
+  padding: 1rem 1rem 1.25rem;
 }
 
+.bsplus-analytics-mount.dark,
 .bsplus-analytics-root.dark {
   --bsplus-analytics-shadow: 0 5px 20px 6px rgba(0, 0, 0, 0.45);
   --bsplus-analytics-shadow-hover: 0 10px 28px 10px rgba(0, 0, 0, 0.55);
@@ -56,8 +83,8 @@
 
 @media (max-width: 768px) {
   .bsplus-analytics-root {
-    padding: 1.25rem 1rem 1.5rem;
+    padding: 0.875rem 0.75rem 1rem;
-    gap: 1.5rem;
+    gap: 0.875rem;
   }
 }
 
@@ -109,7 +136,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .bsplus-analytics-header-actions {
@@ -138,7 +165,7 @@
 }
 
 .bsplus-analytics-header-text h1 {
-  margin: 0 0 0.35rem;
+  margin: 0 0 0.2rem;
   font-size: 1.875rem;
   font-weight: 700;
   letter-spacing: -0.02em;
@@ -154,7 +181,7 @@
 }
 
 .bsplus-analytics-meta {
-  margin-top: 0.5rem;
+  margin-top: 0.15rem;
   font-size: 0.75rem;
   color: var(--bsplus-analytics-muted);
 }
@@ -266,58 +293,200 @@
   transform: none !important;
 }
 
-/* ─── Stat cards ─── */
+/* ─── Sidebar layout (shop-style filters) ─── */
-.bsplus-analytics-stats {
+.bsplus-analytics-layout {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: 1fr;
-  gap: 1rem;
+  gap: var(--bsplus-analytics-stack-gap);
+  align-items: start;
+  min-width: 0;
+}
+
+.bsplus-analytics-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bsplus-analytics-stack-gap);
+  min-width: 0;
+}
+
+.bsplus-analytics-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  min-width: 0;
+  position: relative;
+  padding-right: 0.375rem;
+  z-index: 4;
+}
+
+.bsplus-analytics-filters-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.bsplus-analytics-filters-title {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--bsplus-analytics-text);
+}
+
+.bsplus-analytics-filters-clear {
+  padding: 0;
+  border: none;
+  background: none;
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--bsplus-analytics-accent);
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 45%,
+    transparent
+  );
+}
+
+.bsplus-analytics-filters-clear:hover {
+  color: var(--bsplus-analytics-text);
+}
+
+.bsplus-analytics-filters-clear:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--bsplus-analytics-accent) 35%, transparent);
+  border-radius: 4px;
+}
+
+.bsplus-analytics-filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  position: relative;
+}
+
+.bsplus-analytics-filter-group .bsplus-analytics-field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--bsplus-analytics-muted);
+}
+
+.bsplus-analytics-filter-subject-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bsplus-analytics-filters .bsplus-analytics-dropdown {
+  width: 100%;
+  min-width: 0;
+}
+
+.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger {
+  width: 100%;
+  min-width: 0;
+  min-height: 2.35rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  background-color: var(--bsplus-analytics-control-bg-elevated);
+  border-color: var(--bsplus-analytics-control-border-strong);
+  box-shadow: 0 1px 4px
+    color-mix(in srgb, var(--bsplus-analytics-text) 10%, transparent);
+}
+
+.bsplus-analytics-filters .bsplus-analytics-input {
+  width: 100%;
+  min-width: 0;
+  min-height: 2.35rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+  padding-left: 2.25rem;
+  padding-right: 0;
+  background-color: var(--bsplus-analytics-control-bg-elevated);
+  border-color: var(--bsplus-analytics-control-border-strong);
+  box-shadow: 0 1px 4px
+    color-mix(in srgb, var(--bsplus-analytics-text) 10%, transparent);
+}
+
+.bsplus-analytics-filters .bsplus-grade-range-slider {
+  width: 100%;
+}
+
+.bsplus-analytics-filters .bsplus-analytics-range-value {
+  min-width: 3.75rem;
+  text-align: right;
+}
+
+@media (min-width: 900px) {
+  .bsplus-analytics-layout {
+    grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
+    gap: var(--bsplus-analytics-stack-gap);
+  }
+
+  .bsplus-analytics-filters {
+    position: sticky;
+    top: 0.5rem;
+  }
+}
+
+@media (max-width: 899px) {
+  .bsplus-analytics-filters-head {
+    padding-bottom: 0;
+  }
+}
+
+/* ─── Stat strip ─── */
+.bsplus-analytics-stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 1.25rem;
 }
 
 @media (max-width: 640px) {
   .bsplus-analytics-stats {
-    grid-template-columns: 1fr;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
   }
 }
 
 .bsplus-analytics-stat {
-  padding: 1.1rem 1.25rem;
+  display: flex;
-  border-radius: var(
+  align-items: baseline;
-    --bsplus-theme-card-radius,
+  gap: 0.45rem;
-    var(--bsplus-analytics-radius)
+  padding: 0;
-  );
+  background: none;
-  background: var(--bsplus-theme-card-bg, var(--bsplus-analytics-surface));
+  border: none;
-  border: var(
+  box-shadow: none;
-    --bsplus-theme-card-border,
+  backdrop-filter: none;
-    1px solid var(--bsplus-analytics-border)
-  );
-  box-shadow: var(--bsplus-theme-card-shadow, var(--bsplus-analytics-shadow));
-  backdrop-filter: var(--bsplus-theme-card-blur, none);
-  transition:
-    transform 0.25s var(--bsplus-analytics-ease),
-    box-shadow 0.25s var(--bsplus-analytics-ease);
-}
-
-.bsplus-analytics-stat:hover {
-  transform: translateY(-2px);
-  box-shadow: var(
-    --bsplus-theme-card-shadow-hover,
-    var(--bsplus-analytics-shadow-hover)
-  );
 }
 
 .bsplus-analytics-stat-label {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 500;
-  text-transform: uppercase;
+  text-transform: none;
-  letter-spacing: 0.04em;
+  letter-spacing: normal;
   color: var(--bsplus-analytics-muted);
-  margin-bottom: 0.35rem;
+  margin-bottom: 0;
+}
+
+.bsplus-analytics-stat-label::after {
+  content: ":";
 }
 
 .bsplus-analytics-stat-value {
-  font-size: 1.75rem;
+  font-size: 1.125rem;
   font-weight: 700;
-  line-height: 1.1;
+  line-height: 1.2;
   color: var(--bsplus-analytics-text);
 }
 
@@ -325,95 +494,11 @@
   color: var(--bsplus-analytics-accent);
 }
 
-/* ─── Filter toolbar ─── */
+.bsplus-analytics-results {
-.bsplus-analytics-toolbar {
+  display: flex;
-  padding: 1rem 1.15rem;
+  flex-direction: column;
-  border-radius: var(
+  gap: var(--bsplus-analytics-stack-gap);
-    --bsplus-theme-card-radius,
+  min-width: 0;
-    var(--bsplus-analytics-radius)
-  );
-  background: var(--bsplus-theme-card-bg, var(--bsplus-analytics-surface));
-  border: var(
-    --bsplus-theme-card-border,
-    1px solid var(--bsplus-analytics-border)
-  );
-  box-shadow: var(--bsplus-theme-card-shadow, var(--bsplus-analytics-shadow));
-  backdrop-filter: var(--bsplus-theme-card-blur, none);
-  overflow: visible;
-  position: relative;
-  z-index: 3;
-}
-
-.bsplus-analytics-toolbar-grid {
-  display: grid;
-  grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(12rem, 1.4fr) auto;
-  grid-template-rows: auto auto;
-  gap: 0.9rem 1rem;
-  align-items: end;
-  width: 100%;
-}
-
-.bsplus-analytics-toolbar-clear {
-  grid-column: 4;
-  grid-row: 1;
-  justify-self: end;
-  align-self: end;
-  padding: 0.65rem 0.9rem;
-  white-space: nowrap;
-}
-
-.bsplus-analytics-toolbar-trends {
-  grid-column: 4;
-  grid-row: 2;
-  justify-self: end;
-  align-self: center;
-  margin-left: 0;
-  max-width: 14rem;
-  text-align: right;
-}
-
-.bsplus-analytics-toolbar-trends-top {
-  grid-row: 1;
-  align-self: end;
-}
-
-@media (max-width: 900px) {
-  .bsplus-analytics-toolbar-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .bsplus-analytics-toolbar-search {
-    grid-column: 1 / -1;
-  }
-
-  .bsplus-analytics-toolbar-clear {
-    grid-column: 1 / -1;
-    grid-row: auto;
-    justify-self: stretch;
-  }
-
-  .bsplus-analytics-grade-range {
-    grid-column: 1 / -1;
-  }
-
-  .bsplus-analytics-toolbar-trends {
-    grid-column: 1 / -1;
-    grid-row: auto;
-    justify-self: start;
-    max-width: none;
-    text-align: left;
-  }
-}
-
-@media (max-width: 520px) {
-  .bsplus-analytics-toolbar-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.bsplus-analytics-toolbar-dropdown-field {
-  position: relative;
-  z-index: 4;
 }
 
 .bsplus-analytics-field {
@@ -432,11 +517,13 @@
 }
 
 .bsplus-analytics-checkbox {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  height: 20px;
-  padding: 0.35rem 0;
+  padding-left: 25px;
-  font-size: 0.8125rem;
+  padding-right: 10px;
+  font-size: 0.75rem;
   font-weight: 500;
   color: var(--bsplus-analytics-text);
   cursor: pointer;
@@ -445,12 +532,67 @@
 }
 
 .bsplus-analytics-checkbox input[type="checkbox"] {
-  width: 1.05rem;
+  position: absolute;
-  height: 1.05rem;
+  opacity: 0;
+  width: 0;
+  height: 0;
   margin: 0;
-  accent-color: var(--bsplus-analytics-accent);
+  padding: 0;
   cursor: pointer;
-  flex-shrink: 0;
+}
+
+.bsplus-analytics-checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: content-box;
+  width: 15px;
+  height: 15px;
+  border: 3px solid
+    var(--item-colour, var(--better-main, var(--bsplus-analytics-accent)));
+  border-radius: 5px;
+  color: var(--bsplus-analytics-text);
+}
+
+.bsplus-analytics-checkbox:hover
+  input:not(:disabled)
+  ~ .bsplus-analytics-checkmark {
+  filter: brightness(0.8);
+}
+
+.bsplus-analytics-checkbox input:checked ~ .bsplus-analytics-checkmark {
+  background: var(--item-colour, var(--better-main, var(--bsplus-analytics-accent)));
+}
+
+.lc-legend-swatch-group {
+  gap: 8px;
+}
+
+.bsplus-analytics-checkmark::after {
+  content: "";
+  position: absolute;
+  display: none;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 3px 3px 0;
+}
+
+.bsplus-analytics-checkbox input:checked ~ .bsplus-analytics-checkmark::after {
+  display: block;
+}
+
+.bsplus-analytics-checkbox input:disabled {
+  cursor: not-allowed;
+}
+
+.bsplus-analytics-checkbox input:disabled ~ .bsplus-analytics-checkmark,
+.bsplus-analytics-checkbox input:disabled ~ span:not(.bsplus-analytics-checkmark) {
+  opacity: 0.45;
+  cursor: not-allowed;
 }
 
 .bsplus-analytics-select,
@@ -460,16 +602,24 @@
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--bsplus-analytics-text);
-  background: var(--bsplus-analytics-surface-2);
+  background-color: var(--bsplus-analytics-control-bg);
-  border: 2px solid var(--bsplus-analytics-border);
+  border: 2px solid var(--bsplus-analytics-control-border);
   border-radius: var(--bsplus-analytics-radius-sm);
   padding: 0.65rem 2.25rem 0.65rem 0.9rem;
   min-height: 2.75rem;
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease,
+    background-color 0.2s ease,
     transform 0.2s var(--bsplus-analytics-ease);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px
+    color-mix(in srgb, var(--bsplus-analytics-text) 8%, transparent);
+}
+
+.bsplus-analytics-card .bsplus-analytics-select,
+.bsplus-analytics-card .bsplus-analytics-input,
+.bsplus-analytics-card .bsplus-analytics-dropdown-trigger {
+  background-color: var(--bsplus-analytics-surface-2);
 }
 
 .bsplus-analytics-select {
@@ -497,26 +647,58 @@
 
 .bsplus-analytics-select:hover,
 .bsplus-analytics-input:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface) 96%,
+    var(--bsplus-analytics-surface-2) 4%
+  );
   border-color: color-mix(
     in srgb,
     var(--bsplus-analytics-accent) 35%,
-    var(--bsplus-analytics-border)
+    var(--bsplus-analytics-control-border)
+  );
+}
+
+.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger:hover {
+  background-color: var(--bsplus-analytics-control-bg-elevated);
+  border-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 40%,
+    var(--bsplus-analytics-control-border-strong)
+  );
+}
+
+.bsplus-analytics-filters .bsplus-analytics-input:hover {
+  background-color: var(--bsplus-analytics-control-bg-elevated);
+  border-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-accent) 40%,
+    var(--bsplus-analytics-control-border-strong)
   );
 }
 
 .bsplus-analytics-select:focus,
 .bsplus-analytics-input:focus {
   outline: none;
+  background-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface) 96%,
+    var(--bsplus-analytics-surface-2) 4%
+  );
   border-color: var(--bsplus-analytics-accent);
-  box-shadow: 0 0 0 3px
+  box-shadow:
-    color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
+    0 0 0 1px color-mix(in srgb, var(--bsplus-analytics-text) 12%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
 }
 
-.bsplus-analytics-grade-range {
+.bsplus-analytics-filters .bsplus-analytics-dropdown-trigger:focus-visible {
-  grid-column: 1 / 4;
+  background-color: var(--bsplus-analytics-control-bg-elevated);
-  grid-row: 2;
+  border-color: var(--bsplus-analytics-accent);
-  min-width: 0;
+}
-  max-width: none;
+
+.bsplus-analytics-filters .bsplus-analytics-input:focus {
+  background-color: var(--bsplus-analytics-control-bg-elevated);
+  border-color: var(--bsplus-analytics-accent);
 }
 
 .bsplus-analytics-range-value {
@@ -528,24 +710,16 @@
   text-align: right;
 }
 
-.bsplus-analytics-toolbar-search {
+/* Custom dropdowns (time period, subjects) */
-  min-width: 0;
-}
-
-/* Toolbar custom dropdowns (time period, subjects) */
 .bsplus-analytics-dropdown {
   position: relative;
   min-width: 11rem;
 }
 
-.dark .bsplus-analytics-dropdown-trigger {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255,255,255,0.72)'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
-}
-
 .bsplus-analytics-dropdown-trigger {
+  position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
   min-height: 2.75rem;
   padding: 0.65rem 2.25rem 0.65rem 0.9rem;
@@ -554,35 +728,86 @@
   font-weight: 500;
   text-align: left;
   color: var(--bsplus-analytics-text);
-  background: var(--bsplus-analytics-surface-2);
+  background-color: var(--bsplus-analytics-control-bg);
-  border: 2px solid var(--bsplus-analytics-border);
+  border: 2px solid var(--bsplus-analytics-control-border);
   border-radius: var(--bsplus-analytics-radius-sm);
   cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    color-mix(in srgb, var(--bsplus-analytics-text) 8%, transparent);
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease,
+    background-color 0.2s ease,
     transform 0.2s var(--bsplus-analytics-ease);
 }
 
+.bsplus-analytics-dropdown-trigger::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0.9rem;
+  width: 0.42rem;
+  height: 0.42rem;
+  border-right: 2px solid var(--bsplus-analytics-muted);
+  border-bottom: 2px solid var(--bsplus-analytics-muted);
+  transform: translateY(-65%) rotate(45deg);
+  pointer-events: none;
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s var(--bsplus-analytics-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bsplus-analytics-dropdown-trigger::after {
+    transition: border-color 0.2s ease;
+  }
+}
+
 .bsplus-analytics-dropdown-trigger:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface) 96%,
+    var(--bsplus-analytics-surface-2) 4%
+  );
   border-color: color-mix(
     in srgb,
     var(--bsplus-analytics-accent) 35%,
-    var(--bsplus-analytics-border)
+    var(--bsplus-analytics-control-border)
   );
   transform: scale(1.01);
 }
 
+.bsplus-analytics-dropdown-trigger:hover::after {
+  border-color: var(--bsplus-analytics-text);
+}
+
+.bsplus-analytics-card .bsplus-analytics-dropdown-trigger:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface-2) 92%,
+    var(--bsplus-analytics-surface) 8%
+  );
+}
+
 .bsplus-analytics-dropdown-trigger:focus-visible {
   outline: none;
+  background-color: color-mix(
+    in srgb,
+    var(--bsplus-analytics-surface) 96%,
+    var(--bsplus-analytics-surface-2) 4%
+  );
   border-color: var(--bsplus-analytics-accent);
-  box-shadow: 0 0 0 3px
+  box-shadow:
-    color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
+    0 0 0 1px color-mix(in srgb, var(--bsplus-analytics-text) 12%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--bsplus-analytics-accent) 22%, transparent);
+}
+
+.bsplus-analytics-dropdown-trigger:focus-visible::after {
+  border-color: var(--bsplus-analytics-accent);
+}
+
+.bsplus-analytics-dropdown-trigger[aria-expanded="true"]::after {
+  transform: translateY(-35%) rotate(225deg);
 }
 
 .bsplus-analytics-dropdown-menu {
@@ -595,9 +820,9 @@
   overflow-y: auto;
   padding: 0.35rem;
   border-radius: var(--bsplus-analytics-radius-sm);
-  background: var(--bsplus-analytics-surface);
+  background: var(--bsplus-analytics-control-bg-elevated);
-  border: 1px solid var(--bsplus-analytics-border);
+  border: 1px solid var(--bsplus-analytics-control-border-strong);
-  box-shadow: var(--bsplus-analytics-shadow-hover);
+  box-shadow: var(--bsplus-analytics-shadow);
 }
 
 .bsplus-analytics-dropdown-item {
@@ -645,7 +870,7 @@
 .bsplus-analytics-charts {
   display: grid;
   grid-template-columns: 1fr;
-  gap: 1.25rem;
+  gap: var(--bsplus-analytics-stack-gap);
   width: 100%;
   position: relative;
   z-index: 1;
@@ -660,42 +885,17 @@
   min-width: 0;
 }
 
-.bsplus-analytics-chart-cell > :global(.bsplus-analytics-animate) {
+.bsplus-analytics-chart-cell > :global(.bsplus-analytics-card) {
-  display: flex;
-  flex-direction: column;
   flex: 1;
   width: 100%;
   min-width: 0;
-}
+  min-height: 100%;
-
-.bsplus-analytics-chart-cell :global(.bsplus-analytics-card) {
-  flex: 1;
-  width: 100%;
-  min-width: 0;
-}
-
-/* Fade-in animation must not paint above the filter toolbar / dropdown */
-.bsplus-analytics-charts > .bsplus-analytics-animate {
-  z-index: 1;
-  display: flex;
-  min-width: 0;
-}
-
-.bsplus-analytics-charts > .bsplus-analytics-animate > .bsplus-analytics-card {
-  flex: 1;
-  width: 100%;
 }
 
 @media (min-width: 960px) {
   .bsplus-analytics-charts {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 1.5rem;
+    gap: var(--bsplus-analytics-stack-gap);
-  }
-
-  .bsplus-analytics-charts .bsplus-analytics-card-header {
-    min-height: 5.75rem;
-    box-sizing: border-box;
-    align-items: flex-end;
   }
 }
 
@@ -730,10 +930,9 @@
 .bsplus-analytics-card-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: flex-start;
-  gap: 1rem;
+  gap: 0.5rem 0.75rem;
-  min-height: 4.75rem;
+  padding: 0.65rem 0.85rem;
-  padding: 1.15rem 1.25rem;
   border-bottom: 1px solid var(--bsplus-analytics-border);
 }
 
@@ -741,27 +940,40 @@
   flex-wrap: wrap;
 }
 
+.bsplus-analytics-card-header-text {
+  min-width: 0;
+  flex: 1;
+}
+
+.bsplus-analytics-card-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.bsplus-analytics-card-title-row .bsplus-analytics-card-title {
+  margin: 0;
+}
+
 .bsplus-analytics-card-controls {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  gap: 0.75rem 1rem;
+  gap: 0.5rem;
   flex-shrink: 0;
 }
 
-.bsplus-analytics-forecast-controls {
-  min-width: min(100%, 18rem);
-  max-width: 22rem;
-}
-
 .bsplus-analytics-forecast-toggle {
-  width: 100%;
+  height: 20px;
-  justify-content: flex-end;
+  padding: 0 0 0 25px;
+  font-size: 0.8125rem;
+  white-space: nowrap;
 }
 
 .bsplus-analytics-forecast-horizon {
-  flex: 1;
+  min-width: 8.5rem;
-  min-width: 11rem;
+  max-width: 11rem;
 }
 
 .bsplus-analytics-forecast-line {
@@ -816,18 +1028,20 @@
 }
 
 .bsplus-analytics-card-desc {
-  margin: 0.25rem 0 0;
+  margin: 0.15rem 0 0;
   font-size: 0.8125rem;
   color: var(--bsplus-analytics-muted);
 }
 
 .bsplus-analytics-card-body {
-  padding: 1rem 1.15rem;
+  padding: 0.5rem 0.85rem 0.65rem;
   flex: 1;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   width: 100%;
   min-width: 0;
+  min-height: 0;
   background: var(--bsplus-analytics-surface);
 }
 
@@ -836,19 +1050,14 @@
 }
 
 .bsplus-analytics-card-footer {
-  padding: 0.85rem 1.25rem 1.1rem;
+  padding: 0.5rem 0.85rem 0.65rem;
   border-top: 1px solid var(--bsplus-analytics-border);
   font-size: 0.8125rem;
   color: var(--bsplus-analytics-muted);
-  line-height: 1.5;
+  line-height: 1.4;
   margin-top: auto;
 }
 
-.bsplus-analytics-charts .bsplus-analytics-card-footer {
-  min-height: 4.25rem;
-  box-sizing: border-box;
-}
-
 .bsplus-analytics-card-footer p {
   margin: 0;
 }
@@ -884,21 +1093,13 @@
   color: var(--bsplus-analytics-muted);
 }
 
-.bsplus-analytics-root .bsplus-chart-surface {
+.bsplus-analytics-root .bsplus-chart-surface,
-  width: 100%;
-  min-width: 0;
-  height: var(--bsplus-analytics-chart-height, 280px);
-  min-height: var(--bsplus-analytics-chart-height, 280px);
-  max-height: var(--bsplus-analytics-chart-height, 280px);
-  flex-shrink: 0;
-}
-
 .bsplus-analytics-root .bsplus-chart-surface-bar {
   width: 100%;
   min-width: 0;
-  height: 320px;
+  height: var(--bsplus-analytics-chart-height, 300px);
-  min-height: 320px;
+  min-height: var(--bsplus-analytics-chart-height, 300px);
-  max-height: 320px;
+  max-height: var(--bsplus-analytics-chart-height, 300px);
   flex-shrink: 0;
 }
 
@@ -1033,7 +1234,7 @@
 }
 
 .bsplus-analytics-table-header {
-  padding: 1rem 1.25rem;
+  padding: 0.65rem 0.85rem;
   border-bottom: 1px solid var(--bsplus-analytics-border);
 }
 
@@ -1062,7 +1263,7 @@
 }
 
 .bsplus-analytics-table th {
-  padding: 0.75rem 1rem;
+  padding: 0.55rem 0.85rem;
   font-weight: 600;
   text-align: left;
   color: var(--bsplus-analytics-muted);
@@ -1085,7 +1286,7 @@
 }
 
 .bsplus-analytics-table td {
-  padding: 0.7rem 1rem;
+  padding: 0.55rem 0.85rem;
   border-top: 1px solid var(--bsplus-analytics-border);
   color: var(--bsplus-analytics-text);
 }
@@ -1128,8 +1329,8 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: 0.65rem;
-  padding: 0.85rem 1.25rem;
+  padding: 0.55rem 0.85rem;
   border-top: 1px solid var(--bsplus-analytics-border);
   color: var(--bsplus-analytics-muted);
   font-size: 0.8125rem;
@@ -1150,8 +1351,8 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.75rem;
+  gap: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0;
   color: var(--bsplus-analytics-muted);
   font-size: 0.8125rem;
 }

src/plugins/built-in/gradeAnalytics/ui.ts

@@ -124,6 +124,7 @@ function syncThemeFromPage(target: HTMLElement) {
 
   target.style.setProperty("--bsplus-analytics-accent", palette.accent);
   target.style.setProperty("--bsplus-analytics-accent-subtle", palette.accentSubtle);
+  target.style.setProperty("--item-colour", palette.accent);
   target.style.setProperty(
     "--bsplus-analytics-forecast",
     `color-mix(in srgb, ${palette.accent} 72%, ${target.classList.contains("dark") ? "#f8fafc" : "#64748b"})`,
@@ -210,7 +211,7 @@ export function renderAnalyticsPage(container: HTMLElement) {
   shadow.appendChild(styleElement);
 
   analyticsRoot = document.createElement("div");
-  analyticsRoot.className = "bsplus-analytics-root";
+  analyticsRoot.className = "bsplus-analytics-mount";
   syncThemeToAnalyticsUi();
   shadow.appendChild(analyticsRoot);
 

src/plugins/syncablePluginDefaults.ts

@@ -0,0 +1,41 @@
+/**
+ * Serializable plugin setting defaults for cloud sync backfill.
+ *
+ * Kept separate from `@/plugins` so the service worker never imports Svelte UI or
+ * Vite HMR clients. Values must match each plugin's non-component settings.
+ */
+function defaultSearchHotkey(): string {
+  if (typeof navigator !== "undefined") {
+    return navigator.platform.toUpperCase().includes("MAC") ? "cmd+k" : "ctrl+k";
+  }
+  return "ctrl+k";
+}
+
+/** `plugin.<id>.settings` defaults (component/button keys omitted). */
+export const SYNCABLE_PLUGIN_SETTING_DEFAULTS: Record<
+  string,
+  Record<string, unknown>
+> = {
+  themes: {},
+  "animated-background": { speed: 1 },
+  "assessments-average": { lettergrade: false },
+  notificationCollector: {},
+  timetable: {},
+  timetableEdit: {},
+  "profile-picture": { useCloudPfp: false },
+  "assessments-overview": {},
+  "background-music": { volume: 0.5, pauseOnHidden: true },
+  messageFolders: {
+    showTagsInAllMessages: true,
+    hideFolderedMessagesInAll: true,
+  },
+  "enhanced-navigation": { autoScrollOnClick: false },
+  "global-search": {
+    searchHotkey: defaultSearchHotkey(),
+    showRecentFirst: true,
+    transparencyEffects: true,
+    runIndexingOnLoad: true,
+    passiveIndexing: true,
+  },
+  "grade-analytics": { cacheTtlHours: 24 },
+};

src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts

@@ -1,55 +0,0 @@
-import { settingsState } from "../listeners/SettingsState";
-import { animate as motionAnimate } from "motion";
-
-export function shouldShowEngageParentsAnnouncement(): boolean {
-  return !settingsState.engageParentsAnnouncementShown;
-}
-
-/**
- * Non-blocking bottom-right toast announcing SEQTA Engage support. Shown once.
- */
-export function showEngageParentsToast() {
-  if (!shouldShowEngageParentsAnnouncement()) return;
-
-  settingsState.engageParentsAnnouncementShown = true;
-
-  const toast = document.createElement("div");
-  toast.className = "bsplus-toast engageParentsToast";
-  toast.innerHTML = /* html */ `
-    <button class="bsplus-toast-close" aria-label="Dismiss">&times;</button>
-    <div class="bsplus-toast-content">
-      <p class="bsplus-toast-eyebrow">SEQTA Engage support</p>
-      <strong>BetterSEQTA+ now supports <span class="seqtaEngageAccent">SEQTA Engage</span></strong>
-      <p>Buy your mum a BetterSEQTA Plus! Parents now get themes, a cleaner home page, and all the Plus polish on SEQTA Engage.</p>
-    </div>
-  `;
-
-  toast.style.opacity = "0";
-  document.getElementById("container")?.append(toast);
-
-  if (settingsState.animations) {
-    (motionAnimate as any)(
-      toast,
-      { opacity: [0, 1], y: [40, 0] },
-      { duration: 0.35, easing: [0.22, 0.03, 0.26, 1] },
-    );
-  } else {
-    toast.style.opacity = "1";
-  }
-
-  const dismiss = () => {
-    if (settingsState.animations) {
-      (motionAnimate as any)(
-        toast,
-        { opacity: [1, 0], y: [0, 40] },
-        { duration: 0.2, easing: [0.22, 0.03, 0.26, 1] },
-      ).then(() => toast.remove());
-    } else {
-      toast.remove();
-    }
-  };
-
-  toast.querySelector(".bsplus-toast-close")!.addEventListener("click", dismiss);
-
-  setTimeout(dismiss, 10000);
-}

src/seqta/utils/Openers/StartupPopupQueue.ts

@@ -1,9 +1,5 @@
 import { settingsState } from "../listeners/SettingsState";
 import { OpenWhatsNewPopup } from "./OpenWhatsNewPopup";
-import {
-  shouldShowEngageParentsAnnouncement,
-  showEngageParentsToast,
-} from "./OpenEngageParentsAnnouncement";
 import {
   fetchThemeOfTheMonth,
   OpenThemeOfTheMonthPopup,
@@ -15,8 +11,7 @@ type QueueStep = (goNext: () => void) => void;
 
 /**
  * Runs startup modals in order: What's New (if the extension just updated),
- * Theme of the Month (when the user hasn't dismissed this calendar month), then shows
+ * Theme of the Month (when the user hasn't dismissed this calendar month).
- * the SEQTA Engage toast (once, non-blocking).
  */
 export async function runStartupPopupQueue() {
   // Make sure the background script knows about any dev-mode API override
@@ -41,11 +36,6 @@ export async function runStartupPopupQueue() {
   function runNext() {
     const step = steps.shift();
     if (step) step(runNext);
-    else {
-      if (shouldShowEngageParentsAnnouncement()) {
-        showEngageParentsToast();
-      }
-    }
   }
 
   runNext();

src/seqta/utils/defaultSettings.ts

@@ -67,7 +67,6 @@ export function getDefaultSettingsState(): SettingsState {
     selectedFont: "rubik",
     timeFormat: "24",
     privacyStatementShown: false,
-    engageParentsAnnouncementShown: false,
     bsCloudAutoSyncAnnouncementShown: false,
   };
 }

src/seqta/utils/ensureSyncableStorageDefaults.ts

@@ -1,5 +1,5 @@
 import browser from "webextension-polyfill";
-import { getAllPluginSettings } from "@/plugins";
+import { SYNCABLE_PLUGIN_SETTING_DEFAULTS } from "@/plugins/syncablePluginDefaults";
 import { getDefaultSettingsState } from "@/seqta/utils/defaultSettings";
 import {
   isKeyIncludedInCloudUploadPayload,
@@ -24,7 +24,6 @@ const OPTIONAL_UNSET_MEANS_DEFAULT_KEYS = [
   "selectedFont",
   "privacyStatementShown",
   "privacyStatementLastUpdated",
-  "engageParentsAnnouncementShown",
   "bsCloudAutoSyncAnnouncementShown",
   "themeOfTheMonthDismissedMonth",
   "themeOfTheMonthLastSeenId",
@@ -38,18 +37,6 @@ const OPTIONAL_UNSET_MEANS_DEFAULT_KEYS = [
   "profile_picture_revision",
 ] as const;
 
-function buildDefaultPluginSettings(
-  plugin: ReturnType<typeof getAllPluginSettings>[number],
-): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  for (const [key, setting] of Object.entries(plugin.settings)) {
-    const meta = setting as { type?: string; default?: unknown };
-    if (meta.type === "component" || meta.type === "button") continue;
-    out[key] = meta.default;
-  }
-  return out;
-}
-
 /**
  * Flat default map in upload shape (plugin-format only; no legacy keys).
  */
@@ -65,9 +52,10 @@ export function getSyncableStorageDefaults(): Record<string, unknown> {
     delete flat[key];
   }
 
-  for (const plugin of getAllPluginSettings()) {
+  for (const [pluginId, settings] of Object.entries(
-    flat[`plugin.${plugin.pluginId}.settings`] =
+    SYNCABLE_PLUGIN_SETTING_DEFAULTS,
-      buildDefaultPluginSettings(plugin);
+  )) {
+    flat[`plugin.${pluginId}.settings`] = settings;
   }
 
   return flat;

src/types/storage.ts

@@ -32,8 +32,6 @@ export interface SettingsState {
   justupdated?: boolean;
   privacyStatementShown?: boolean;
   privacyStatementLastUpdated?: string;
-  /** One-time announcement: SEQTA Engage support for parents (dismissed popup queue). */
-  engageParentsAnnouncementShown?: boolean;
   /** One-time announcement: BS Cloud automatic settings sync (last in startup popup queue). */
   bsCloudAutoSyncAnnouncementShown?: boolean;
   /**

vite.config.ts

@@ -4,8 +4,9 @@ import { join, resolve } from "path";
 import touchGlobalCSSPlugin from "./lib/touchGlobalCSS";
 import InlineWorkerPlugin from "./lib/inlineWorker";
 import { base64Loader } from "./lib/base64loader";
-import type { BuildTarget } from "./lib/types";
+import type { BuildTarget, Manifest } from "./lib/types";
 import ClosePlugin from "./lib/closePlugin";
+import fixCrxWorkerLiveReload from "./lib/fixCrxWorkerLiveReload";
 import { firefoxStripFunctionProbe } from "./lib/firefoxStripFunctionProbe";
 
 import million from "million/compiler";
@@ -22,6 +23,37 @@ import { crx } from "@crxjs/vite-plugin";
 
 const targets: BuildTarget[] = [chrome, brave, edge, firefox, opera, safari];
 
+const DEV_SERVER_PORT = 5173;
+
+/** Vite HMR needs localhost script + ws origins; only applied during `vite dev`. */
+function withDevManifestCsp(manifest: Manifest, command: string): Manifest {
+  if (command !== "serve") return manifest;
+
+  const extensionPages = manifest.content_security_policy?.extension_pages;
+  if (!extensionPages) return manifest;
+
+  const localhost = `http://localhost:${DEV_SERVER_PORT}`;
+  const localhostWs = `ws://localhost:${DEV_SERVER_PORT}`;
+  const loopback = `http://127.0.0.1:${DEV_SERVER_PORT}`;
+  const loopbackWs = `ws://127.0.0.1:${DEV_SERVER_PORT}`;
+
+  return {
+    ...manifest,
+    content_security_policy: {
+      ...manifest.content_security_policy,
+      extension_pages: extensionPages
+        .replace(
+          "script-src 'self'",
+          `script-src 'self' ${localhost} ${loopback}`,
+        )
+        .replace(
+          /connect-src ([^;]+)/,
+          `connect-src $1 ${localhost} ${localhostWs} ${loopback} ${loopbackWs}`,
+        ),
+    },
+  };
+}
+
 const mode = process.env.MODE || "chrome"; // Check the environment variable to determine which build type to use.
 //const sourcemap = (process.env.SOURCEMAP === "true") || false; // Check whether we want sourcemaps.
 /** Million's compiler can emit `new Function()`, which Firefox extension pages block (strict CSP, no unsafe-eval). */
@@ -46,11 +78,14 @@ export default defineConfig(({ command }) => ({
     }),
     ...(useMillion ? [million.vite({ auto: true })] : []),
     crx({
-      manifest:
+      manifest: withDevManifestCsp(
         targets.find((t) => t.browser === mode.toLowerCase())?.manifest ??
-        chrome.manifest,
+          chrome.manifest,
+        command,
+      ),
       browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome",
     }),
+    fixCrxWorkerLiveReload(),
     touchGlobalCSSPlugin(),
     ...(command === "build" ? [ClosePlugin(), firefoxStripFunctionProbe()] : []),
   ],
@@ -61,11 +96,12 @@ export default defineConfig(({ command }) => ({
     },
   },
   server: {
-    port: 5173,
+    port: DEV_SERVER_PORT,
+    strictPort: true,
     hmr: {
       host: "localhost",
       protocol: "ws",
-      port: 5173,
+      port: DEV_SERVER_PORT,
     },
   },
   css: {