UI badge cleanup + /chart-of-accounts route + loop skills (#850)

Bundles three separable concerns:

- style(ui): badge audit + cleanup across 45 files — real-status chips use Badge variants (raw Tailwind colors dropped), non-status count/type/label chips demoted to muted text, clustered badges consolidated; 20 unused imports removed.
- feat(bookkeeping): Kontoplan moved to a dedicated /chart-of-accounts route (nav + command palette wired); /bookkeeping shows the journal list only.
- chore(skills): loop-* automation skills + design-scan workflow under .claude/.

fix(reports): restored the destructive count badge on blocking errors in the periodisk sammanställning (EC Sales List) — a genuine status cue the audit had wrongly flattened; flagged by the PR reviewer and Swedish compliance bot, now clean.

All CI green; compliance bots report no findings.

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

components/extensions/CategoryBadge.tsx

@@ -2,22 +2,20 @@
 
 import { useTranslations } from 'next-intl'
 import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
 import type { ExtensionCategory } from '@/lib/extensions/types'
 
-const CATEGORY_CONFIG: Record<ExtensionCategory, { labelKey: string; className: string }> = {
-  accounting: { labelKey: 'category_accounting', className: 'bg-destructive/10 text-destructive border-destructive/30' },
-  reports: { labelKey: 'category_reports', className: 'bg-primary/10 text-primary border-primary/30' },
-  import: { labelKey: 'category_import', className: 'bg-success/10 text-success border-success/30' },
-  operations: { labelKey: 'category_operations', className: 'bg-muted text-muted-foreground border-border' },
+const CATEGORY_LABEL_KEY: Record<ExtensionCategory, string> = {
+  accounting: 'category_accounting',
+  reports: 'category_reports',
+  import: 'category_import',
+  operations: 'category_operations',
 }
 
 export default function CategoryBadge({ category }: { category: ExtensionCategory }) {
   const t = useTranslations('extensions')
-  const config = CATEGORY_CONFIG[category]
   return (
-    <Badge variant="outline" className={cn('text-[10px] font-medium', config.className)}>
-      {t(config.labelKey)}
+    <Badge variant="outline" className="text-[10px] font-medium">
+      {t(CATEGORY_LABEL_KEY[category])}
     </Badge>
   )
 }

components/extensions/general/ArcimMigrationWorkspace.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback, useEffect } from 'react'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
 import { Progress } from '@/components/ui/progress'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -304,10 +305,10 @@ function ProviderStep({
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
                         <p className="font-medium">{providerInfo?.name ?? consent.provider}</p>
-                        <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
+                        <Badge variant="success" className="gap-1">
                           <CheckCircle className="h-3 w-3" />
                           Ansluten
-                        </span>
+                        </Badge>
                       </div>
                       <div className="mt-0.5 space-y-0.5">
                         {consent.companyName && (
@@ -411,19 +412,13 @@ function ProviderStep({
                       <div className="flex items-center gap-2">
                         <p className="font-medium">{provider.name}</p>
                         {comingSoon && (
-                          <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                            Kommer snart
-                          </span>
+                          <Badge variant="secondary">Kommer snart</Badge>
                         )}
                         {alreadyConnected && (
-                          <span className="inline-flex items-center rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
-                            Ansluten
-                          </span>
+                          <Badge variant="success">Ansluten</Badge>
                         )}
                         {needsSieFirst && !comingSoon && !alreadyConnected && (
-                          <span className="inline-flex items-center rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-600 dark:text-amber-500">
-                            SIE krävs först
-                          </span>
+                          <Badge variant="warning">SIE krävs först</Badge>
                         )}
                       </div>
                       <p className="text-xs text-muted-foreground">