fix: design system v4 polish — home icon, mobile hamburger, contrast, font-label cleanup

- Home sidebar icon: always cyan, bg-accent-dim only when route is "/"
- Mobile TopBar: add left padding so hamburger isn't hidden behind logo
- Landing page: bump card border color (#1e2130 → #2a2f3d) for better contrast
- Replace all font-label references (40 occurrences, 19 files) with font-mono or font-sans
- Remove deprecated --font-label CSS variable from index.css
- Convert hardcoded hex in layout inline styles to CSS variables (light-mode ready)
- Add @types/react-syntax-highlighter for script builder types

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

frontend/src/components/sidebar/ActivityItem.tsx

@@ -91,12 +91,12 @@ export function ActivityItem({
 
       {/* Ticket number or timestamp */}
       {ticketNumber && !isRecent && (
-        <span className="shrink-0 font-label text-[0.5625rem] text-[#60a5fa]">
+        <span className="shrink-0 font-mono text-[0.5625rem] text-[#60a5fa]">
           {ticketNumber}
         </span>
       )}
       {isRecent && timestamp && (
-        <span className="shrink-0 font-label text-[0.5625rem] text-text-muted">
+        <span className="shrink-0 font-mono text-[0.5625rem] text-text-muted">
           {formatRelativeTime(timestamp)}
         </span>
       )}

frontend/src/components/sidebar/CategoryList.tsx

@@ -47,7 +47,7 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
               style={{ backgroundColor: cat.color }}
             />
             <span className="flex-1 truncate text-left">{cat.name}</span>
-            <span className="font-label text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
+            <span className="font-mono text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
           </button>
         ))}
         {hasMore && (

frontend/src/components/sidebar/SidebarActivityFeed.tsx

@@ -22,7 +22,7 @@ export function SidebarActivityFeed({
       {/* Header */}
       <div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
         <Clock size={10} style={{ color: '#34d399' }} />
-        <span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
+        <span className="font-sans text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
           Activity
         </span>
       </div>

frontend/src/components/sidebar/SidebarStatsBar.tsx

@@ -55,36 +55,36 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
     >
       <div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
         <div
-          className="font-label text-sm font-semibold leading-none"
+          className="font-mono text-sm font-semibold leading-none"
           style={{ color: '#34d399' }}
           aria-label={`${resolved} resolved today`}
         >
           {resolved}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
+        <div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Resolved
         </div>
       </div>
       <div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
         <div
-          className="font-label text-sm font-semibold leading-none"
+          className="font-mono text-sm font-semibold leading-none"
           style={{ color: '#22d3ee' }}
           aria-label={`${active} active sessions`}
         >
           {active}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
+        <div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Active
         </div>
       </div>
       <div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
         <div
-          className="font-label text-sm font-semibold leading-none text-muted-foreground"
+          className="font-mono text-sm font-semibold leading-none text-muted-foreground"
           aria-label={`${formatDuration(totalSeconds)} total session time today`}
         >
           {formatDuration(totalSeconds)}
         </div>
-        <div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
+        <div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
           Total Time
         </div>
       </div>

frontend/src/components/sidebar/TagCloud.tsx

@@ -22,7 +22,7 @@ export function TagCloud({ tags, activeTags = [], onTagClick }: TagCloudProps) {
               key={tag}
               onClick={() => onTagClick(tag)}
               className={cn(
-                'rounded-md border px-2 py-0.5 font-label text-[0.625rem] transition-colors',
+                'rounded-md border px-2 py-0.5 font-sans text-[0.625rem] transition-colors',
                 isActive
                   ? 'border-primary/30 bg-primary/10 text-primary'
                   : 'border-border bg-card text-muted-foreground hover:border-primary/20 hover:text-foreground'