feat(10-01): serve the embedded admin SPA at backend.uri with cookie login

- backend.uri prefix (default /backend) mounts the admin API at {prefix}/api/v1
  and the embedded SPA shell at {prefix} with an api/ JSON 404 fallback
- cookie transport: an X-Requested-With login sets the HttpOnly summer_admin
  cookie and returns no token; the backend guard reads the cookie after Bearer
- CSRF wrapper refuses cookie-only POST/PUT/DELETE without X-Requested-With
- boardwalk package embeds boardwalk/dist, rewrites index.html once per prefix
  and sets cache and security headers
- framework admin OpenAPI pipeline (swag, swagger2openapi, openapi-typescript)
  with prefix-relative paths and typed envelopes for the tracer routes
- admin/ Vite SPA: login, plugin rail, section panel and read-only list
  through the openapi-fetch client typed by the generated schema

admin/src/styles/main.css

@@ -0,0 +1,160 @@
+@import "tailwindcss";
+
+/* Self-hosted fonts (D-07). Whole-weight files carry latin and latin-ext with
+   unicode-range, so Polish diacritics and basic Latin both resolve. */
+@import "@fontsource/dm-sans/400.css";
+@import "@fontsource/dm-sans/500.css";
+@import "@fontsource/dm-sans/600.css";
+@import "@fontsource/dm-sans/700.css";
+@import "@fontsource/dm-mono/400.css";
+@import "@fontsource/dm-mono/500.css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Design tokens from design/README.md (Direction C v2). Utilities read CSS
+   variables so light and dark mode swap values without new classes. */
+@theme {
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "DM Mono", ui-monospace, monospace;
+
+  --color-bg: var(--c-bg);
+  --color-surface: var(--c-surface);
+  --color-subtle: var(--c-subtle);
+  --color-border: var(--c-border);
+  --color-border-strong: var(--c-border-strong);
+  --color-text: var(--c-text);
+  --color-muted: var(--c-muted);
+  --color-placeholder: var(--c-placeholder);
+  --color-primary: var(--c-primary);
+  --color-on-primary: var(--c-on-primary);
+  --color-danger: var(--c-danger);
+  --color-danger-soft: var(--c-danger-soft);
+  --color-ok-bg: var(--c-ok-bg);
+  --color-ok-text: var(--c-ok-text);
+  --color-ring: var(--c-ring);
+  --color-hover: var(--c-hover);
+  --color-sel: var(--c-sel);
+  --color-skel: var(--c-skel);
+  --color-overlay: var(--c-overlay);
+  --color-side: var(--c-side);
+  --color-side-border: var(--c-side-border);
+  --color-accent: #fcd34d;
+  --color-on-accent: #1b2540;
+  --color-accent-soft: rgba(252, 211, 77, 0.14);
+  --color-side-text: #c3cbda;
+  --color-side-label: #9aa6bd;
+  --color-side-hover: rgba(255, 255, 255, 0.08);
+
+  --radius-control: 10px;
+  --radius-card: 16px;
+  --radius-modal: 20px;
+  --radius-inner: 12px;
+  --radius-tab: 9px;
+  --radius-checkbox: 5px;
+  --radius-pager: 8px;
+  --radius-pill: 999px;
+
+  --spacing-button: 42px;
+  --spacing-input: 44px;
+  --spacing-header: 64px;
+  --spacing-nav: 40px;
+  --spacing-row: 54px;
+  --spacing-row-head: 44px;
+  --spacing-pager: 34px;
+  --spacing-rail: 80px;
+  --spacing-panel: 224px;
+
+  --shadow-card: var(--c-shadow-card);
+  --shadow-login: 0 24px 60px rgba(0, 0, 0, 0.35);
+  --shadow-pop: 0 16px 40px rgba(20, 27, 45, 0.18);
+  --shadow-menu: 0 16px 40px rgba(20, 27, 45, 0.16);
+  --shadow-toast: 0 16px 40px rgba(0, 0, 0, 0.25);
+  --shadow-tab: 0 1px 3px rgba(20, 27, 45, 0.12);
+}
+
+:root {
+  --c-bg: #f4f6f9;
+  --c-surface: #ffffff;
+  --c-subtle: #f3f5f8;
+  --c-border: #e6e9ef;
+  --c-border-strong: #d2d8e2;
+  --c-text: #141b2d;
+  --c-muted: #566175;
+  --c-placeholder: #6b7588;
+  --c-primary: #22304d;
+  --c-on-primary: #ffffff;
+  --c-danger: #c62828;
+  --c-danger-soft: #fdf0f0;
+  --c-ok-bg: #e3f4e8;
+  --c-ok-text: #1c6b35;
+  --c-ring: rgba(252, 196, 40, 0.55);
+  --c-hover: #f1f3f7;
+  --c-sel: #fdf3cf;
+  --c-skel: #eceff4;
+  --c-overlay: rgba(20, 27, 45, 0.5);
+  --c-side: #1d2740;
+  --c-side-border: transparent;
+  --c-shadow-card: 0 1px 2px rgba(20, 27, 45, 0.04), 0 4px 16px rgba(20, 27, 45, 0.05);
+}
+
+.dark {
+  --c-bg: #111726;
+  --c-surface: #182033;
+  --c-subtle: #1f283d;
+  --c-border: #29334b;
+  --c-border-strong: #3a4661;
+  --c-text: #eef1f6;
+  --c-muted: #a9b3c6;
+  --c-placeholder: #8a95ab;
+  --c-primary: #fcd34d;
+  --c-on-primary: #1b2540;
+  --c-danger: #f58a8a;
+  --c-danger-soft: #3a1d24;
+  --c-ok-bg: #173826;
+  --c-ok-text: #8fdfa8;
+  --c-ring: rgba(252, 211, 77, 0.45);
+  --c-hover: #212b42;
+  --c-sel: #3a3622;
+  --c-skel: #263049;
+  --c-overlay: rgba(5, 8, 16, 0.7);
+  --c-side: #0d1320;
+  --c-side-border: #222b40;
+  --c-shadow-card: none;
+}
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--c-text);
+    background: var(--c-bg);
+  }
+
+  body {
+    margin: 0;
+    min-height: 100vh;
+  }
+
+  /* Every interactive element shows the 3px ring; never remove it. */
+  a:focus-visible,
+  button:focus-visible,
+  [role="button"]:focus-visible,
+  [tabindex]:focus-visible {
+    outline: 3px solid var(--c-ring);
+    outline-offset: 2px;
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: none;
+    border-color: var(--c-primary);
+    box-shadow: 0 0 0 3px var(--c-ring);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--c-placeholder);
+  }
+}