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/scripts/TemplateCard.tsx

@@ -31,7 +31,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
               <ShieldAlert size={13} className="text-amber-400" />
             </span>
           )}
-          <span className={cn('font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
+          <span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
             {template.complexity}
           </span>
         </div>
@@ -44,7 +44,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
       )}
 
       <div className="flex items-center justify-between gap-3">
-        <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
+        <div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-sans">
           <span>{template.usage_count}× used</span>
           {template.tags.length > 0 && (
             <div className="flex gap-1 flex-wrap">