refactor: UI consistency — shared CSS, design system colors, no inline styles

Phase 1: Extract 6 shared CSS modules (table-section, log-panel,
rate-colors, refresh-indicator, chart-card, section-card) eliminating
~135 duplicate class definitions across 11 files.

Phase 2: Replace all hardcoded hex colors in CSS modules with design
system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4
undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised).

Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG
components with var() CSS custom properties. Fix Dashboard.tsx color prop.

Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage,
OidcCallback (previously 100% inline). Extract shared PageLoader
component (replaces 3 copy-pasted spinner patterns). Move AppsTab
static inline styles to CSS classes. Extract LayoutShell StarredList styles.

58 files changed, net -219 lines.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/Admin/AppConfigDetailPage.tsx

@@ -11,6 +11,7 @@ import { useCatalog } from '../../api/queries/catalog';
 import type { CatalogApp, CatalogRoute } from '../../api/queries/catalog';
 import { applyTracedProcessorUpdate, applyRouteRecordingUpdate } from '../../utils/config-draft-utils';
 import styles from './AppConfigDetailPage.module.css';
+import sectionStyles from '../../styles/section-card.module.css';
 
 type BadgeColor = 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto';
 
@@ -325,7 +326,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Settings ──────────────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Settings</SectionHeader>
         <div className={styles.settingsGrid}>
           <div className={styles.field}>
@@ -424,7 +425,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Traces & Taps ─────────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Traces &amp; Taps</SectionHeader>
         <span className={styles.sectionSummary}>
           {tracedCount} traced &middot; {tapCount} taps &middot; manage taps on route pages
@@ -440,7 +441,7 @@ export default function AppConfigDetailPage() {
       </div>
 
       {/* ── Route Recording ───────────────────────────────────────────── */}
-      <div className={styles.section}>
+      <div className={sectionStyles.section}>
         <SectionHeader>Route Recording</SectionHeader>
         <span className={styles.sectionSummary}>
           {recordingCount} of {routeRecordingRows.length} routes recording