doc 04 §3e: ElegantFin migration with ARRFLIX recolor

Migrated active CSS theme from Cineplex v1.0.6 to ElegantFin v25.12.31
with Netflix-red #E50914 accent overrides over ElegantFin's default
Jellyseerr-blue/violet palette. ARRFLIX wordmark logo preserved on both
.adminDrawerLogo img and .pageTitleWithLogo selectors (split-rule form).

Eight accent variables overridden at :root: --uiAccentColor, --activeColor
(+Alpha), --osdSeekBarPlayedColor, --checkboxCheckedBgColor,
--highlightOutlineColor, --btnSubmitColor, --btnSubmitBorderColor.

All prior custom blocks preserved verbatim: cast/crew hide, Quick Connect
hide, header-icon hide (§3c), white slider thumbs (§3d), pure-black bg
(§3d), Settings drawer hide, count badge hide, ARRFLIX logo override.
LoginDisclaimer + SplashscreenEnabled untouched.

POST → 204; GET /Branding/Configuration confirms no Cineplex import,
ElegantFin pinned to v25.12.31, all overrides intact. Smoke test on
https://arrflix.s8n.ru/ → HTTP 302 (baseline). No container restart.

Restructured §1: Cineplex content moved to §1 'Previous themes'
subsection (#### Why Cineplex won, #### Tradeoffs, #### What it looked
like, #### Theme history) with the new ElegantFin+recolor stack as
the canonical current theme.

Snapshot tag for rollback: snapshot-2026-05-08-pre-elegantfin

docs/04-theming-and-users.md

@@ -19,7 +19,13 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
 
 ---
 
-## 1. Theme decision: Cineplex v1.0.6 (Netflix-faithful)
+## 1. Theme decision: ElegantFin v25.12.31 + ARRFLIX recolor (current)
+
+**As of 2026-05-08 (later in the day), the active theme is ElegantFin
+v25.12.31 with the Netflix-red `#E50914` accent recolored over the
+default Jellyseerr-blue/violet palette and the ARRFLIX wordmark logo
+preserved.** See §3e for the migration details and §1.x ("Previous
+themes") below for the Cineplex history that preceded it.
 
 ### Candidates surveyed (2026-05-08)
 
@@ -34,7 +40,18 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
 | zombB / NetfliFin / Finetwo | mostly fork-style replacement of jellyfin-web | varies | varies | n/a | requires image swap or JS injector | DQ — violates "pure CSS, no image swap, no plugins" constraint |
 | Ultrachromic (CTalvio) | community CSS | "selectively maintained" | varies | 6/10 — accent-tunable but no Netflix preset | unknown | not Netflix enough |
 
-### Why Cineplex won
+### Previous themes
+
+The two sub-sections below ("Why Cineplex won", "Tradeoffs", "What it
+looks like", "Theme history") are kept verbatim from when Cineplex was
+the active theme (earlier on 2026-05-08, before the ElegantFin migration
+documented in §3e). They remain useful as the reasoning trail for the
+final brand brief — Netflix-faithful was the goal, Cineplex was the
+purest expression of that, and the current ElegantFin + recolor stack
+is a deliberate tradeoff toward "more polished browsing UI" while
+keeping the Netflix-red accent.
+
+#### Why Cineplex won (historical)
 
 1. **It is actually Netflix.** The CSS literally embeds Netflix Sans
    (`https://assets.nflxext.com/ffe/siteui/fonts/netflix-sans/v3/...`) and
@@ -62,7 +79,7 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
 6. **Cast/crew hide rule still appended** at the bottom of `CustomCss`,
    exactly as before.
 
-### Tradeoffs (honest list)
+#### Tradeoffs (honest list, Cineplex era)
 
 - **License: none.** Cineplex doesn't declare one. CSS is generally
   permissive in practice (you redistribute by `@import`, not by copying)
@@ -79,7 +96,7 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
 - **Theme footer.** Cineplex doesn't add a brand stamp, so users see no
   "Cineplex" tag — cleaner than ElegantFin's footer label was.
 
-### What it looks like (live, post-apply)
+#### What Cineplex looked like (live, post-apply)
 
 - **Background:** `#181818` (Finity base) — Netflix-black.
 - **Accent:** `#E50914` (canonical Netflix red) on focus rings, progress
@@ -92,16 +109,18 @@ maintenance/revert. LAN-only constraints preserved (no public-facing changes).
   netflix.com's sign-in page.
 - **No theme-brand footer label** any more.
 
-### Theme history
+#### Theme history
 
 | Date | Theme | Version | Why changed |
 |---|---|---|---|
 | 2026-05-08 (earlier today) | ElegantFin | v25.12.31 | Initial Jellyfin theming pass. Picked for activity + safety (most actively maintained CSS in the ecosystem). |
-| 2026-05-08 (this entry) | **Cineplex** | **v1.0.6** | Owner asked for the most Netflix-faithful theme available. ElegantFin's Jellyseerr aesthetic (blue-grey, no red) is too far from Netflix; Cineplex is purpose-built for this look and explicitly targets the 10.10 series we're on. JellyFlix (the genre's elder) is halted. |
+| 2026-05-08 (mid-day) | **Cineplex** | **v1.0.6** | Owner asked for the most Netflix-faithful theme available. ElegantFin's Jellyseerr aesthetic (blue-grey, no red) is too far from Netflix; Cineplex is purpose-built for this look and explicitly targets the 10.10 series we're on. JellyFlix (the genre's elder) is halted. |
+| 2026-05-08 (later, current) | **ElegantFin + ARRFLIX recolor** | **v25.12.31** + `#E50914` accent overrides | Owner liked Cineplex's Netflix accent but preferred ElegantFin's polished browsing UI. Best of both: ElegantFin's layout/typography + ARRFLIX brand red overrides. Snapshot tag for rollback: `snapshot-2026-05-08-pre-elegantfin`. See §3e. |
 
-If we ever roll back to ElegantFin, the previous `@import` was
+Rollback paths:
-`https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@v25.12.31/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css`.
+- To Cineplex (Netflix-faithful): apply `snapshots/2026-05-08-pre-elegantfin/branding.json` per `snapshots/2026-05-08-pre-elegantfin/RESTORE.md`.
-The previous incarnation of this doc lives in git history.
+- To plain ElegantFin (no recolor): see §6b.
+- To vanilla Jellyfin: see §6b.
 
 ---
 
@@ -374,6 +393,135 @@ hide, ARRFLIX logo override, Quick Connect hide, Settings drawer hide,
 header icon hide) preserved verbatim. Same race rule applies — this is
 the last branding POST in the sequence.
 
+### 3e. ElegantFin migration with ARRFLIX recolor (2026-05-08, current)
+
+Later on 2026-05-08, the active theme was migrated **from Cineplex to
+ElegantFin v25.12.31** while preserving the ARRFLIX brand: Netflix-red
+`#E50914` accent overrides over ElegantFin's default Jellyseerr-blue/
+violet palette, plus the existing ARRFLIX wordmark logo. The owner had
+seen the demo at <https://lscambo13.github.io/ElegantFin/>, liked
+ElegantFin's polished browsing UI more than Cineplex's purer Netflix
+fidelity, and asked for the swap with the brand colour kept intact.
+
+**Snapshot tag for rollback (committed and pushed before any change):**
+`snapshot-2026-05-08-pre-elegantfin`. Captures `branding.json`,
+`index.html`, `docker-compose.yml`, all per-user `displayprefs-*.json`,
+`users.json`, `libraries.json`, plus `RESTORE.md` with three concrete
+rollback commands. Located at `snapshots/2026-05-08-pre-elegantfin/`.
+
+**ElegantFin tag pinned: `v25.12.31`** (latest tag at migration time;
+list resolved via `git ls-remote --tags https://github.com/lscambo13/ElegantFin.git`).
+jsDelivr serves tagged refs immutably with year-long cache TTL — same
+no-surprise-update guarantee we had on `cineplex@v1.0.6`. To opt into
+upstream churn, edit the URL to `@main`; to pin a different tag, edit
+the version segment.
+
+**ElegantFin import:**
+
+```css
+@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@v25.12.31/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
+```
+
+**Accent variables overridden (ARRFLIX recolor block).** ElegantFin
+declares its accent palette through CSS custom properties at `:root`.
+Eight variables were identified by grepping the minified theme for
+`--[a-z]*` definitions and inspecting their default values; all eight
+are remapped to `#E50914` (or its `rgba()` form for alpha variants):
+
+| Variable | ElegantFin default | ARRFLIX value | What it controls |
+|---|---|---|---|
+| `--uiAccentColor` | `rgb(117 111 226)` (violet) | `#E50914` | Primary UI accent — most surfaces |
+| `--activeColor` | `rgb(119,91,244)` (violet) | `#E50914` | Active / focused state highlights |
+| `--activeColorAlpha` | `rgba(119,91,244,.9)` | `rgba(229, 9, 20, 0.9)` | Same with alpha — hover overlays |
+| `--osdSeekBarPlayedColor` | `var(--textColor)` (white) | `#E50914` | Played portion of the video scrubber |
+| `--checkboxCheckedBgColor` | `rgb(79,70,229)` (indigo) | `#E50914` | Checked checkboxes (settings, lib pickers) |
+| `--highlightOutlineColor` | `rgb(37,99,235)` (blue) | `#E50914` | Focus / highlight outlines on cards |
+| `--btnSubmitColor` | `rgb(61,54,178)` (indigo) | `#E50914` | "Submit" button background |
+| `--btnSubmitBorderColor` | `rgb(117 111 226)` (violet) | `#E50914` | "Submit" button border |
+
+Override block:
+
+```css
+:root {
+  --uiAccentColor: #E50914 !important;
+  --activeColor: #E50914 !important;
+  --activeColorAlpha: rgba(229, 9, 20, 0.9) !important;
+  --osdSeekBarPlayedColor: #E50914 !important;
+  --checkboxCheckedBgColor: #E50914 !important;
+  --highlightOutlineColor: #E50914 !important;
+  --btnSubmitColor: #E50914 !important;
+  --btnSubmitBorderColor: #E50914 !important;
+}
+```
+
+Variables deliberately NOT changed:
+- `--osdSeekBarThumbColor: white` — kept the explicit white-thumb rule
+  from §3d (white thumbs read as a neutral position indicator, not as
+  brand colour). The slider-thumb override in this doc's §3d still
+  applies.
+- `--drawerColor`, `--headerColor` — kept ElegantFin's translucent
+  blur over its dark-blue surface; these are structural, not accent.
+- `--borderColor`, `--textColor` — typography / structure, not accent.
+
+**Logo selectors used.** ElegantFin does NOT define rules for the two
+ARRFLIX logo selectors (verified by grepping the minified theme for
+`adminDrawerLogo` and `pageTitleWithLogo` — zero matches), so the same
+override skeleton from §3a/§3b is re-applied verbatim against the
+ElegantFin base:
+
+```css
+.adminDrawerLogo img {
+  /* <img> in admin sidebar drawer — content: replaces src */
+  content: url("data:image/png;base64,<...ARRFLIX wordmark...>") !important;
+}
+.pageTitleWithLogo {
+  /* <div> masthead on dashboard + login — bg image only, no content: */
+  background-image: url("data:image/png;base64,<...ARRFLIX wordmark...>") !important;
+}
+```
+
+The data-URL bytes are byte-for-byte identical to the Cineplex-era
+override (extracted from the snapshot's `branding.json` and re-inlined
+into the new `CustomCss` payload). Both selectors are still split-rule
+form (per the §3a/§3b lesson — never combine `content:` and
+`background-image:` on the same selector).
+
+**Preserved blocks** (every custom rule from the Cineplex era was
+re-applied on top of ElegantFin):
+- `#castCollapsible, #guestCastCollapsible { display: none }` — cast/crew sections hidden
+- `.btnQuick { display: none }` — Quick Connect login button hidden
+- `.headerSyncButton`, `.headerCastButton`, `.headerUserButton` — top-right header icons hidden (§3c)
+- `.MuiSlider-thumb` + variants — white scrubber/volume thumbs (§3d)
+- `:root { --primary-background-color: #000000; --background-color: #000000; }` and the wrapper-element rules — pure black bg (§3d)
+- `mypreferencesmenu` selectors — Settings drawer entry hidden
+- `.countIndicator { display: none }` — unwatched-episode count badges hidden
+- `.adminDrawerLogo img` / `.pageTitleWithLogo` — ARRFLIX wordmark override
+- `LoginDisclaimer` — `"Welcome to ARRFLIX - Private invite only service"` preserved
+- `SplashscreenEnabled: true` — preserved
+
+**Verification (executed 2026-05-08):**
+- POST to `/System/Configuration/branding` → HTTP 204
+- GET on `/Branding/Configuration` → no Cineplex `@import`, ElegantFin
+  `@import` present and pinned to `v25.12.31`, ARRFLIX logo data URL
+  intact on both selectors, all preserved blocks intact, all eight
+  accent variable overrides present
+- HEAD on `https://arrflix.s8n.ru/` → HTTP 302 (Traefik redirect to
+  `web/`, baseline behaviour — proxy still serving)
+
+**Operational notes:**
+- The bind-mounted `/web/index.html` was NOT touched (sibling work owns
+  that file via the index-patcher). All visual changes ride on
+  `CustomCss` via the public `/Branding/Configuration` consumer + the
+  authenticated `/System/Configuration/branding` writer.
+- No container restart, no `docker compose` action, no Traefik change.
+- Same race rule from §3b applies — the branding POST in this migration
+  was the **last** POST in the sequence.
+
+**Rollback** — see `snapshots/2026-05-08-pre-elegantfin/RESTORE.md`,
+or in one shot: `git checkout snapshot-2026-05-08-pre-elegantfin --
+snapshots/2026-05-08-pre-elegantfin/branding.json` then POST it back
+to `/System/Configuration/branding`.
+
 ---
 
 ## 4. Multi-user UX prep