Restyle admin UI to dark theme, fix Docker /data volume permissions

- Rework the admin UI (topbar, sidebar, cards, tables, badges, stat
  tiles) into a dark theme with a light/dark toggle, matching the
  visual style requested for the project.
- Fix Dockerfile: chown /data to the distroless nonroot uid/gid before
  the VOLUME declaration so a freshly created named volume is seeded
  with writable permissions instead of root:root (was causing
  "unable to open database file" on first run).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QTXFrNP1imCW7jtfL5SZrw

internal/web/templates/partials/header.html

@@ -1,5 +1,5 @@
 {{define "header"}}<!doctype html>
-<html lang="en" data-bs-theme="light">
+<html lang="en" data-bs-theme="dark">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -7,22 +7,46 @@
   <link rel="stylesheet" href="/static/css/bootstrap.min.css">
   <link rel="stylesheet" href="/static/css/bootstrap-icons.min.css">
   <link rel="stylesheet" href="/static/css/app.css">
+  <script>
+    (function () {
+      var saved = localStorage.getItem("vp-theme");
+      if (saved === "light" || saved === "dark") {
+        document.documentElement.setAttribute("data-bs-theme", saved);
+      }
+    })();
+  </script>
 </head>
 <body>
+<header class="vp-topbar d-flex align-items-center justify-content-between">
+  <a href="/dashboard" class="vp-brand d-flex align-items-center gap-2">
+    <i class="bi bi-hexagon-fill"></i>
+    <span>vibeproxy</span>
+  </a>
+  <div class="d-flex align-items-center gap-2">
+    <button type="button" class="btn vp-icon-btn" title="Toggle theme" data-theme-toggle>
+      <i class="bi bi-moon-stars"></i>
+    </button>
+    <span class="vp-user-badge"><i class="bi bi-person-circle"></i> admin</span>
+  </div>
+</header>
 <div class="vp-shell">
   <nav class="vp-sidebar d-flex flex-column">
-    <a href="/dashboard" class="vp-brand d-flex align-items-center gap-2">
-      <i class="bi bi-hexagon-fill"></i>
-      <span>vibeproxy</span>
-    </a>
     <ul class="nav flex-column vp-nav">
       <li class="nav-item"><a class="nav-link {{if eq .Active "dashboard"}}active{{end}}" href="/dashboard"><i class="bi bi-speedometer2"></i> Dashboard</a></li>
+
+      <li class="vp-nav-label">Proxy</li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "proxy_hosts"}}active{{end}}" href="/proxy-hosts"><i class="bi bi-globe2"></i> Proxy Hosts</a></li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "streams"}}active{{end}}" href="/streams"><i class="bi bi-arrow-left-right"></i> TCP/UDP Streams</a></li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "backends"}}active{{end}}" href="/backends"><i class="bi bi-hdd-network"></i> Backends</a></li>
+
+      <li class="vp-nav-label">Security</li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "certificates"}}active{{end}}" href="/certificates"><i class="bi bi-shield-lock"></i> Certificates</a></li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "access_lists"}}active{{end}}" href="/access-lists"><i class="bi bi-key"></i> Access Lists</a></li>
+
+      <li class="vp-nav-label">Operations</li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "logs"}}active{{end}}" href="/logs"><i class="bi bi-journal-text"></i> Logs</a></li>
+
+      <li class="vp-nav-label">Settings</li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "settings"}}active{{end}}" href="/settings"><i class="bi bi-gear"></i> Settings</a></li>
       <li class="nav-item"><a class="nav-link {{if eq .Active "api"}}active{{end}}" href="/api-tokens"><i class="bi bi-code-slash"></i> API</a></li>
     </ul>
@@ -30,11 +54,11 @@
       <i class="bi bi-box-seam"></i> vibeproxy
     </div>
   </nav>
-  <div class="vp-main">
-    <header class="vp-topbar d-flex align-items-center justify-content-between">
-      <h1 class="h5 mb-0">{{.Title}}</h1>
-    </header>
-    <main class="vp-content">
+  <main class="vp-main">
+    <div class="vp-page-header d-flex align-items-center justify-content-between">
+      <h1 class="h4 mb-0">{{.Title}}</h1>
+    </div>
+    <div class="vp-content">
       {{if .Flash}}
       <div class="alert alert-{{if .FlashKind}}{{.FlashKind}}{{else}}success{{end}} alert-dismissible fade show" role="alert">
         {{.Flash}}