feat: brand icons for widgets, fix stale accent color

Two separate issues, both real bugs:

- Dark mode was showing light blue instead of green: config.yml still
  had a leftover --pn-accent: #38bdf8 override from before the design
  redesign, which won via the runtime theme injector regardless of
  what app/globals.css defaulted to. Removed the override and pushed
  the dark-mode default from a soft mint (#5ee08c) to an actual neon
  green (#39ff88) - closer to what "neon" means and closer to the real
  phosphor-green a cardiac monitor trace uses, which fits the pulse
  metaphor better than the pastel version did.

- No per-service brand icons anywhere. Added an optional `icon` field
  to docker/bookmark widgets (a key into lib/brand-icons.ts) rather
  than guessing from containerName, since a heuristic would silently
  misfire for anyone's own container naming. database widgets derive
  their icon automatically from `engine` (postgres/redis) since that's
  already required and unambiguous. Icon path data comes from the CC0
  simple-icons package via scripts/extract-brand-icons.py, extracted
  and committed as plain TS data (lib/brand-icons.ts) rather than
  imported live - keeps it self-hosted (no unpkg.com/CDN calls at
  runtime, matching the fonts) and pinned regardless of dependency
  updates. Rendered monochrome (currentColor, not each brand's own
  hex) to stay consistent with the single-accent design rather than a
  dozen competing colors - only the shape carries the identity.

Wired real icons into config.yml for every service that has one:
traefik, coolify, gitea (+ gitea_runner), immich (+ immich_ml), n8n,
passbolt, umami, headscale, plus postgresql/redis on every database
widget. code and mailpit have no brand match in the curated set, so
they render without one rather than a wrong/generic substitute.

Verified in the actual rendered page: compiled CSS confirms
--pn-accent is #39ff88 (dark) / #339a5a (light) with no trace of the
old #38bdf8, and all 18 expected icon instances (10 docker + 8
database widgets) are present.

components/widgets/BrandIcon.tsx

@@ -0,0 +1,13 @@
+import { BRAND_ICON_PATHS } from "@/lib/brand-icons";
+
+export function BrandIcon({ slug, size = 18 }: { slug?: string; size?: number }) {
+  if (!slug) return null;
+  const path = BRAND_ICON_PATHS[slug];
+  if (!path) return null;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className="shrink-0 text-fg-muted" aria-hidden>
+      <path d={path} />
+    </svg>
+  );
+}

components/widgets/bookmark/Widget.tsx

@@ -1,6 +1,7 @@
 import { ArrowUpRight } from "@phosphor-icons/react/ssr";
 import type { Widget } from "@/lib/config/schema";
 import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 
 type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;
 
@@ -14,8 +15,9 @@ export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
       style={{ gridColumn: "span 3" }}
     >
       <div className="flex items-center gap-2">
-        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
-        <ArrowUpRight size={16} className="text-accent" aria-hidden />
+        <BrandIcon slug={widget.icon} />
+        <span className="min-w-0 flex-1 truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        <ArrowUpRight size={16} className="shrink-0 text-accent" aria-hidden />
       </div>
       {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
     </a>

components/widgets/database/Widget.tsx

@@ -4,6 +4,7 @@ import type { Widget } from "@/lib/config/schema";
 import { useWidgetSubscription } from "@/lib/ws/client";
 import { StatusDot } from "@/components/widgets/StatusDot";
 import { WidgetCard } from "@/components/widgets/WidgetCard";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 import { formatUptime } from "@/lib/format";
 
 type DatabaseWidget = Extract<Widget, { type: "database" }>;
@@ -13,6 +14,11 @@ const ENGINE_LABEL: Record<DatabaseWidget["engine"], string> = {
   redis: "Redis",
 };
 
+const ENGINE_ICON: Record<DatabaseWidget["engine"], string> = {
+  postgres: "postgresql",
+  redis: "redis",
+};
+
 export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; widgetId: string }) {
   const result = useWidgetSubscription(widgetId);
   const data = result?.type === "database" ? result.data : null;
@@ -21,7 +27,10 @@ export function DatabaseWidget({ widget, widgetId }: { widget: DatabaseWidget; w
   return (
     <WidgetCard span={4}>
       <div className="flex items-center justify-between gap-2">
-        <span className="text-[15px] font-medium text-fg">{widget.name}</span>
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={ENGINE_ICON[widget.engine]} />
+          <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+        </div>
         <StatusDot status={data?.status} health={data?.health} />
       </div>
       <span className="text-[11px] text-fg-muted">{ENGINE_LABEL[widget.engine]}</span>

components/widgets/docker/Widget.tsx

@@ -6,6 +6,7 @@ import { StatusDot } from "@/components/widgets/StatusDot";
 import { SkeletonLines } from "@/components/widgets/Skeleton";
 import { WidgetCard } from "@/components/widgets/WidgetCard";
 import { MetricBar } from "@/components/widgets/MetricBar";
+import { BrandIcon } from "@/components/widgets/BrandIcon";
 import { formatBytes, formatUptime } from "@/lib/format";
 
 type DockerWidget = Extract<Widget, { type: "docker" }>;
@@ -19,18 +20,21 @@ export function DockerWidget({ widget, widgetId }: { widget: DockerWidget; widge
   return (
     <WidgetCard span={4}>
       <div className="flex items-center justify-between gap-2">
-        {widget.href ? (
-          <a
-            href={widget.href}
-            target="_blank"
-            rel="noreferrer"
-            className="text-[15px] font-medium text-fg hover:text-accent"
-          >
-            {widget.name}
-          </a>
-        ) : (
-          <span className="text-[15px] font-medium text-fg">{widget.name}</span>
-        )}
+        <div className="flex min-w-0 items-center gap-2">
+          <BrandIcon slug={widget.icon} />
+          {widget.href ? (
+            <a
+              href={widget.href}
+              target="_blank"
+              rel="noreferrer"
+              className="truncate text-[15px] font-medium text-fg hover:text-accent"
+            >
+              {widget.name}
+            </a>
+          ) : (
+            <span className="truncate text-[15px] font-medium text-fg">{widget.name}</span>
+          )}
+        </div>
         <StatusDot status={data?.status} health={data?.health} />
       </div>
       {errorMessage && <span className="text-xs text-status-down">{errorMessage}</span>}