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/components/LayoutShell.tsx

@@ -232,7 +232,7 @@ function collectStarredItems(apps: SidebarApp[], starredIds: Set<string>): Starr
 function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; onNavigate: (path: string) => void; onRemove: (key: string) => void }) {
   if (items.length === 0) return null;
   return (
-    <div style={{ padding: '4px 0' }}>
+    <div className={css.starredList}>
       {items.map((item) => (
         <div
           key={item.starKey}
@@ -242,13 +242,13 @@ function StarredList({ items, onNavigate, onRemove }: { items: StarredItem[]; on
           tabIndex={0}
           onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onNavigate(item.path); }}
         >
-          {item.icon && <span style={{ display: 'flex', alignItems: 'center', color: 'var(--sidebar-muted)' }}>{item.icon}</span>}
-          <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {item.icon && <span className={css.starredIconWrap}>{item.icon}</span>}
+          <span className={css.starredLabel}>
             {item.label}
             {item.parentApp && <span className={css.starredParentApp}>{item.parentApp}</span>}
           </span>
           <button
-            style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', color: 'var(--sidebar-muted)', display: 'flex', alignItems: 'center', opacity: 0.6 }}
+            className={css.starredRemoveBtn}
             onClick={(e) => { e.stopPropagation(); onRemove(item.starKey); }}
             aria-label={`Remove ${item.label} from starred`}
           >
@@ -771,7 +771,7 @@ function LayoutContent() {
         <ContentTabs active={scope.tab} onChange={setTab} scope={scope} />
       )}
 
-      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minHeight: 0 }}>
+      <main className={css.mainContent}>
         <Outlet key={selectedEnv ?? '__all__'} />
       </main>
     </AppShell>