rebrand: MangaBM → BookmarkManager, add novel library support (#15)

Two intertwined changes — the rebrand and the novel library were developed on
the same branch because the novel UI plumbing is part of the new "Bookmark
Manager" wordmark in the web shell.

## What it does

- **Rebrand**: MangaBM → BookmarkManager across the Go module, compose stack,
  env vars, Traefik hostnames, container/image names, userscript storage
  prefixes (`mangabm:cache` → `bmgr:manga:cache`, `mangabm:queue` → `bmgr:manga:queue`),
  and docs.
- **Novel library**: same backend, two libraries. New `kind` column splits
  bookmarks into `manga` / `novel`; PUT validates it. Two userscripts:
  - `manga-bookmark.user.js` — unchanged behaviour, just stamps its own `kind`.
  - `novel-bookmark.user.js` — separate Violentmonkey install with adapters
    for **novelfull.com** (polled via headless browser — Cloudflare JS
    challenge) and **lightnovelworld.net** (polled via plain TLS).
- **Web UI**: library switch on the app shell. Login art, libswitch, and
  novel-site colours from the Cinder design snapshot.

## Plumbing

- `addedColumns` ALTER for `kind` runs on first start after upgrade; every
  pre-existing row is backfilled to `'manga'`. No manual SQL, no down-time.
- `ALLOWED_ORIGINS` gains the two novel sites.
- New `NOVEL_USERSCRIPT_PATH` env (default `/userscript/novel-bookmark.user.js`),
  bindmounted alongside the manga script.
- Traefik router names `mangabm*` → `bmapi*` / `bmweb*`.

## Test status

- `go test ./...` — green
- `node --test userscript/test/logic.test.js` — 34 pass
- `node --test userscript/test/novel-logic.test.js` — 11 pass
- `node --check` on both userscripts — clean

## Notes for the redeploy

.env keys were renamed (`MANGA_API_HOST` → `BOOKMARK_API_HOST`,
`MANGA_WEB_HOST` → `BOOKMARK_WEB_HOST`). Update DNS / Traefik labels on the
prod override before pulling, otherwise the public hostnames go dark.
See the redeploy instructions I'll post next to this PR.

Reviewed-on: #15
Co-authored-by: Sulthan Zaki <sultankiki05@gmail.com>
Co-committed-by: Sulthan Zaki <sultankiki05@gmail.com>

backend/internal/web/static/style.css

@@ -97,6 +97,10 @@
   --comix: #8a9a7d;
   --kagane: #9a8aa5;
 
+  /* novel sources: same muted family, two hues the manga sites do not use */
+  --novelfull: #a59a7d;
+  --lightnovelworld: #7da59a;
+
   /* Covers are often missing; the hatch keeps the slot honest instead of
      faking artwork. */
   --hatch: repeating-linear-gradient(135deg, #211d1b 0 5px, #191614 5px 10px);
@@ -150,6 +154,8 @@
     --demonic: #8a6a55;
     --comix: #5f7250;
     --kagane: #6f5f7d;
+    --novelfull: #7d6f4f;
+    --lightnovelworld: #4f7d70;
 
     --hatch: repeating-linear-gradient(135deg, #e6e0d8 0 5px, #efeae3 5px 10px);
     --hatch-dim: repeating-linear-gradient(135deg, #ebe6de 0 5px, #f2eee8 5px 10px);
@@ -485,12 +491,51 @@ button { cursor: pointer; }
 .site-demonic { color: var(--demonic); }
 .site-comix { color: var(--comix); }
 .site-kagane { color: var(--kagane); }
+.site-novelfull { color: var(--novelfull); }
+.site-lightnovelworld { color: var(--lightnovelworld); }
 .new-chapter { color: var(--ember); }
 .state { display: flex; align-items: center; gap: 4px; color: var(--mute); }
 .state svg { width: 10px; height: 10px; }
 .is-dim .meta { color: var(--mute-2); }
 .is-dim .site-asura, .is-dim .site-demonic,
-.is-dim .site-comix, .is-dim .site-kagane { color: var(--mute); filter: grayscale(.6); }
+.is-dim .site-comix, .is-dim .site-kagane,
+.is-dim .site-novelfull, .is-dim .site-lightnovelworld { color: var(--mute); filter: grayscale(.6); }
+
+/* ---- library switch: manga and novels are separate libraries, so the pair
+   sits in the topbar next to the wordmark rather than among the buckets. ---- */
+.libswitch {
+  display: flex;
+  margin-left: auto;
+  border: 1px solid var(--field-line);
+}
+.libswitch a {
+  padding: 7px 13px;
+  font: 500 10px/1 var(--font-mono);
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--mute);
+  text-decoration: none;
+}
+.libswitch a + a { border-left: 1px solid var(--field-line); }
+.libswitch a:hover { color: var(--paper-dim); }
+/* The library you are in carries the ember, the same heat the wordmark and the
+   Updated tab use — it is the one piece of chrome that has to be unmistakable. */
+.libswitch a.active {
+  background: var(--ember-wash);
+  color: var(--ember);
+  box-shadow: inset 0 -2px 0 var(--ember);
+}
+.topbar form { margin-left: 18px; }
+/* At phone width brand + switch + Log out do not fit on one line, so the
+   switch takes its own row under the wordmark rather than pushing Log out
+   off-screen. */
+@media (max-width: 719px) {
+  .topbar { flex-wrap: wrap; row-gap: 12px; }
+  .brand { flex: 1 1 auto; min-width: 0; }
+  .libswitch { order: 3; margin-left: 0; }
+  .libswitch a { flex: 1; text-align: center; padding: 8px 14px; }
+  .topbar form { margin-left: 12px; }
+}
 
 /* ---- action strip: full-width on a phone, hairline-divided cells ---- */
 .actions {
@@ -714,6 +759,20 @@ button { cursor: pointer; }
   color: var(--paper);
 }
 .login-card h1 em { color: var(--ember); font-style: italic; }
+.login-art {
+  margin: 8px auto 0;
+  width: 240px;
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  background: radial-gradient(circle, var(--ember-wash) 0%, transparent 70%);
+}
+.login-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: drop-shadow(0 0 34px var(--ember-wash)) drop-shadow(0 18px 24px rgba(0,0,0,.5));
+}
 .login-card form { display: flex; flex-direction: column; gap: 18px; }
 .login-card label {
   font: 500 10px/1 var(--font-mono);
@@ -754,12 +813,22 @@ button { cursor: pointer; }
   color: #fff;
 }
 
+/* ---- laptop and up: the whole sheet is drawn 20% larger, which is what
+   reading it at 120% zoom on a 1920-wide screen was doing by hand. Everything
+   in this file is sized in px, so scaling the root is the one adjustment that
+   keeps every proportion — hairlines, cover ratios, hit targets —
+   intact. ---- */
+@media (min-width: 1280px) {
+  :root { zoom: 1.2; }
+}
+
 /* ---- desktop: same measure, actions fold up beside the row ---- */
 @media (min-width: 720px) {
   :root { --cover-w: 80px; --row-gap: 20px; }
   .topbar { padding: 26px 32px 18px; }
   .brand { font-size: 30px; }
   .brand .mark { width: 35px; height: 30px; }
+  .libswitch a { padding: 9px 16px; font-size: 11px; }
 
   .chrome {
     flex-direction: row;