diff --git a/AGENT.MD b/AGENT.MD
index ef3ec40..bee2295 100644
--- a/AGENT.MD
+++ b/AGENT.MD
@@ -190,7 +190,10 @@ Remote image search:
 - `GET /api/artwork/providers` exposes available providers to the UI
 - `GET /api/artwork/search` calls the selected provider
 - `POST /api/artwork/import` downloads, validates, size-limits, and caches a selected remote image
-- The first provider is Wikimedia Commons; add future providers by implementing `ImageSearchProvider` and registering it in `IMAGE_SEARCH_PROVIDERS`
+- Current providers are Wikimedia Commons, optional TMDB, and optional Google Custom Search
+- TMDB is enabled with `TMDB_BEARER_TOKEN` or `TMDB_API_KEY`
+- Google Custom Search is enabled with `GOOGLE_CUSTOM_SEARCH_API_KEY` and `GOOGLE_CUSTOM_SEARCH_ENGINE_ID`
+- Add future providers by implementing `ImageSearchProvider` and registering it in `IMAGE_SEARCH_PROVIDERS`
 
 ## Rendering Pipeline
 
diff --git a/README.md b/README.md
index 23d880b..5cd64fc 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,20 @@ A self-hosted web UI that generates landscape thumbnails from your Emby library
 3. Give it a name (e.g. "Thumb Generator")
 4. Copy the key
 
+## Optional Artwork Providers
+
+The artwork editor always supports Emby images and Wikimedia Commons. You can enable additional search providers with environment variables:
+
+```bash
+export TMDB_BEARER_TOKEN=your-tmdb-read-access-token
+# or: export TMDB_API_KEY=your-tmdb-v3-api-key
+
+export GOOGLE_CUSTOM_SEARCH_API_KEY=your-google-api-key
+export GOOGLE_CUSTOM_SEARCH_ENGINE_ID=your-google-search-engine-id
+```
+
+TMDB is the preferred external artwork source for posters and backdrops. Google Custom Search is optional and only uses Google's official Custom Search JSON API.
+
 ## Notes
 
 - First generation will be slower as rembg downloads the U2-Net model (~170MB)
diff --git a/app.py b/app.py
index 20021a9..0c1351c 100644
--- a/app.py
+++ b/app.py
@@ -4,9 +4,8 @@ import os
 import hashlib
 import base64
 import time
-import urllib.parse
+from contextlib import asynccontextmanager
 from datetime import datetime, timedelta, timezone
-from dataclasses import dataclass
 from pathlib import Path
 
 import httpx
@@ -16,17 +15,16 @@ from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from PIL import Image, ImageDraw, ImageFont, ImageFilter, ImageColor, ImageOps, UnidentifiedImageError
 
-app = FastAPI(title="Emby Thumbnail Generator")
-app.mount("/static", StaticFiles(directory="static"), name="static")
-templates = Jinja2Templates(directory="templates")
-
 EMBY_URL = os.environ.get("EMBY_URL", "http://10.0.0.2:8096")
 EMBY_API_KEY = os.environ.get("EMBY_API_KEY", "b9af54b630f6448289ab96422add567a")
 CACHE_DIR = Path("cache")
 CACHE_DIR.mkdir(exist_ok=True)
 IMPORT_CACHE_DIR = CACHE_DIR / "imports"
 IMPORT_CACHE_DIR.mkdir(exist_ok=True)
-RENDER_VERSION = "series-banner-v10"
+EMBY_IMAGE_CACHE_DIR = CACHE_DIR / "emby_images"
+EMBY_IMAGE_CACHE_DIR.mkdir(exist_ok=True)
+RENDER_VERSION = "series-banner-v11"
+COLLECTION_RENDER_VERSION = "collection-cover-v1"
 
 THUMB_WIDTH = 800
 THUMB_HEIGHT = 450
@@ -34,13 +32,10 @@ PRIMARY_WIDTH = 1000
 PRIMARY_HEIGHT = 1500
 PRIMARY_MIN_ZOOM = 1.0
 PRIMARY_MAX_ZOOM = 2.6
-REMOTE_IMAGE_MAX_BYTES = 18 * 1024 * 1024
-EDITOR_TARGETS = {
-    "poster": {"width": 1000, "height": 1500, "emby_type": "Primary", "label": "Poster"},
-    "thumb": {"width": 1920, "height": 1080, "emby_type": "Thumb", "label": "Thumb"},
-    "backdrop": {"width": 1920, "height": 1080, "emby_type": "Backdrop", "label": "Backdrop"},
-}
+UPLOAD_MAX_BYTES = 40 * 1024 * 1024
 HTTP_TIMEOUT = 30.0
+EMBY_SOURCE_CACHE_TTL = 300
+EMBY_SOURCE_MISS_TTL = 90
 http_client: httpx.AsyncClient | None = None
 AIRING_LOOKUP_CACHE_TTL = 900
 NEW_SEASON_MIN_AGE_DAYS = 7
@@ -106,152 +101,89 @@ def validate_image_bytes(image_bytes: bytes, *, max_pixels: int = 24_000_000) ->
     return width, height, fmt
 
 
-def get_editor_target(target_mode: str) -> dict:
-    target = EDITOR_TARGETS.get(target_mode)
-    if target is None:
-        raise HTTPException(status_code=400, detail="Invalid artwork target mode.")
-    return target
-
-
-def get_import_cache_path(import_id: str) -> Path:
-    if not import_id or any(ch not in "0123456789abcdef" for ch in import_id.lower()):
-        raise HTTPException(status_code=400, detail="Invalid imported image id.")
-    path = IMPORT_CACHE_DIR / f"{import_id}.img"
+def get_upload_cache_path(upload_id: str) -> Path:
+    if not upload_id or any(ch not in "0123456789abcdef" for ch in upload_id.lower()):
+        raise HTTPException(status_code=400, detail="Invalid upload id.")
+    path = IMPORT_CACHE_DIR / f"{upload_id}.img"
     if not path.exists():
-        raise HTTPException(status_code=404, detail="Imported image was not found in cache.")
+        raise HTTPException(status_code=404, detail="Uploaded background not found in cache.")
     return path
 
 
-async def resolve_editor_source_bytes(body: dict) -> bytes:
-    source_kind = body.get("source_kind", "emby")
-    item_id = body.get("item_id")
-    if source_kind == "import":
-        return get_import_cache_path(body.get("import_id", "")).read_bytes()
-    if source_kind != "emby":
-        raise HTTPException(status_code=400, detail="Invalid source image kind.")
-    if not item_id:
-        raise HTTPException(status_code=400, detail="Missing item id.")
-    image_type = body.get("source_type", "Primary")
-    if image_type not in {"Primary", "Thumb", "Backdrop"}:
-        raise HTTPException(status_code=400, detail="Invalid Emby source image type.")
-    index_raw = body.get("source_index", None)
-    index = int(index_raw) if index_raw is not None else None
-    return await emby_get_image(item_id, image_type, index=index)
+def get_emby_image_cache_key(item_id: str, image_type: str, index: int | None = None) -> str:
+    payload = f"{item_id}:{image_type}:{index if index is not None else 'default'}"
+    return hashlib.md5(payload.encode("utf-8")).hexdigest()
 
 
-def image_to_data_url(image_bytes: bytes, media_type: str = "image/jpeg") -> str:
-    return f"data:{media_type};base64,{base64.b64encode(image_bytes).decode('ascii')}"
+def get_emby_image_cache_path(item_id: str, image_type: str, index: int | None = None) -> Path:
+    return EMBY_IMAGE_CACHE_DIR / f"{get_emby_image_cache_key(item_id, image_type, index)}.img"
 
 
-def fit_image_positioned(
-    img: Image.Image,
-    width: int,
-    height: int,
+def get_emby_image_miss_path(item_id: str, image_type: str, index: int | None = None) -> Path:
+    return EMBY_IMAGE_CACHE_DIR / f"{get_emby_image_cache_key(item_id, image_type, index)}.missing"
+
+
+def get_fresh_cached_bytes(path: Path, ttl_seconds: int) -> bytes | None:
+    if not path.exists():
+        return None
+    age = time.time() - path.stat().st_mtime
+    if age > ttl_seconds:
+        return None
+    return path.read_bytes()
+
+
+async def get_cached_emby_source_image(
+    item_id: str,
+    image_type: str,
+    index: int | None = None,
     *,
-    fit_mode: str = "cover",
-    zoom: float = 1.0,
-    pan_x: float = 0.0,
-    pan_y: float = 0.0,
-) -> tuple[Image.Image, tuple[int, int]]:
-    fit_mode = fit_mode if fit_mode in {"cover", "contain"} else "cover"
-    pan_x = max(-1.0, min(1.0, float(pan_x)))
-    pan_y = max(-1.0, min(1.0, float(pan_y)))
-    zoom = max(0.25, min(5.0, float(zoom)))
-    scale_fn = max if fit_mode == "cover" else min
-    scale = scale_fn(width / max(1, img.width), height / max(1, img.height)) * zoom
-    fitted_w = max(1, int(round(img.width * scale)))
-    fitted_h = max(1, int(round(img.height * scale)))
-    fitted = img.resize((fitted_w, fitted_h), Image.LANCZOS)
+    optional: bool = False,
+) -> bytes | None:
+    cache_path = get_emby_image_cache_path(item_id, image_type, index)
+    cached_bytes = get_fresh_cached_bytes(cache_path, EMBY_SOURCE_CACHE_TTL)
+    if cached_bytes is not None:
+        return cached_bytes
 
-    if fitted_w >= width:
-        x = -int(round((fitted_w - width) * ((pan_x + 1.0) / 2.0)))
-    else:
-        x = int(round((width - fitted_w) * ((pan_x + 1.0) / 2.0)))
-    if fitted_h >= height:
-        y = -int(round((fitted_h - height) * ((pan_y + 1.0) / 2.0)))
-    else:
-        y = int(round((height - fitted_h) * ((pan_y + 1.0) / 2.0)))
-    return fitted, (x, y)
+    miss_path = get_emby_image_miss_path(item_id, image_type, index)
+    if optional and miss_path.exists() and (time.time() - miss_path.stat().st_mtime) <= EMBY_SOURCE_MISS_TTL:
+        return None
 
-
-def build_editor_fill(
-    img: Image.Image,
-    width: int,
-    height: int,
-    *,
-    fill_mode: str,
-    fill_color: str | None,
-) -> Image.Image:
-    if fill_mode == "solid":
-        try:
-            color = ImageColor.getrgb(fill_color or "#111318")
-        except ValueError:
-            color = (17, 19, 24)
-        return Image.new("RGB", (width, height), color)
-
-    base = cover_crop(img, width, height)
-    if fill_mode == "mirror":
-        base = ImageOps.mirror(base)
-        overlay = Image.new("RGBA", (width, height), (0, 0, 0, 54))
-        return Image.alpha_composite(base.convert("RGBA"), overlay).convert("RGB")
-
-    base = base.filter(ImageFilter.GaussianBlur(radius=max(18, int(min(width, height) * 0.035))))
-    overlay = Image.new("RGBA", (width, height), (0, 0, 0, 70))
-    return Image.alpha_composite(base.convert("RGBA"), overlay).convert("RGB")
-
-
-def render_artwork_editor_image(
-    source_bytes: bytes,
-    *,
-    target_mode: str = "poster",
-    fit_mode: str = "cover",
-    fill_mode: str = "blur",
-    fill_color: str | None = "#101318",
-    zoom: float = 1.0,
-    pan_x: float = 0.0,
-    pan_y: float = 0.0,
-    quality: int = 95,
-) -> bytes:
-    target = get_editor_target(target_mode)
-    width = target["width"]
-    height = target["height"]
-    source = load_image_from_bytes(source_bytes, mode="RGB")
-    canvas = build_editor_fill(source, width, height, fill_mode=fill_mode, fill_color=fill_color)
-    fitted, (x, y) = fit_image_positioned(
-        source,
-        width,
-        height,
-        fit_mode=fit_mode,
-        zoom=zoom,
-        pan_x=pan_x,
-        pan_y=pan_y,
+    image_bytes = (
+        await emby_get_image_optional(item_id, image_type, index=index)
+        if optional
+        else await emby_get_image(item_id, image_type, index=index)
     )
-    canvas.paste(fitted, (x, y))
-    return encode_jpeg_bytes(canvas, quality=max(80, min(98, int(quality))))
+    if image_bytes is None:
+        if optional:
+            miss_path.touch()
+            return None
+        raise HTTPException(status_code=404, detail=f"Emby image {image_type} was not found.")
 
-
-def build_editor_cache_key(body: dict) -> str:
-    payload = {
-        "version": "artwork-editor-v1",
-        "item_id": body.get("item_id"),
-        "source_kind": body.get("source_kind", "emby"),
-        "source_type": body.get("source_type", "Primary"),
-        "source_index": body.get("source_index"),
-        "import_id": body.get("import_id"),
-        "target_mode": body.get("target_mode", "poster"),
-        "fit_mode": body.get("fit_mode", "cover"),
-        "fill_mode": body.get("fill_mode", "blur"),
-        "fill_color": body.get("fill_color", "#101318"),
-        "zoom": round(float(body.get("zoom", 1.0)), 4),
-        "pan_x": round(float(body.get("pan_x", 0.0)), 4),
-        "pan_y": round(float(body.get("pan_y", 0.0)), 4),
-        "quality": int(body.get("quality", 95)),
-    }
-    return hashlib.md5(repr(payload).encode("utf-8")).hexdigest()
+    cache_path.write_bytes(image_bytes)
+    if miss_path.exists():
+        miss_path.unlink(missing_ok=True)
+    return image_bytes
 
 
 # --- Emby API helpers ---
 
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    get_http_client()
+    try:
+        yield
+    finally:
+        global http_client
+        if http_client is not None:
+            await http_client.aclose()
+            http_client = None
+
+
+app = FastAPI(title="Emby Thumbnail Generator", lifespan=lifespan)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
 def get_http_client() -> httpx.AsyncClient:
     global http_client
     if http_client is None:
@@ -259,26 +191,51 @@ def get_http_client() -> httpx.AsyncClient:
     return http_client
 
 
-@app.on_event("startup")
-async def startup_event():
-    get_http_client()
-
-
-@app.on_event("shutdown")
-async def shutdown_event():
-    global http_client
-    if http_client is not None:
-        await http_client.aclose()
-        http_client = None
-
-async def emby_get(path: str, params: dict = None) -> dict:
+async def emby_request(method: str, path: str, *, params: dict | None = None, **kwargs) -> httpx.Response:
     client = get_http_client()
     url = f"{EMBY_URL}{path}"
-    p = params or {}
+    p = dict(params or {})
     p["api_key"] = EMBY_API_KEY
-    r = await client.get(url, params=p)
-    r.raise_for_status()
-    return r.json()
+    try:
+        return await client.request(method, url, params=p, **kwargs)
+    except httpx.ReadTimeout as exc:
+        raise HTTPException(
+            status_code=504,
+            detail=f"Emby timed out while requesting {path}. Try again in a moment.",
+        ) from exc
+    except httpx.ConnectTimeout as exc:
+        raise HTTPException(
+            status_code=504,
+            detail=f"Timed out connecting to Emby at {EMBY_URL}.",
+        ) from exc
+    except httpx.ConnectError as exc:
+        raise HTTPException(
+            status_code=502,
+            detail=f"Could not connect to Emby at {EMBY_URL}.",
+        ) from exc
+    except httpx.RequestError as exc:
+        raise HTTPException(
+            status_code=502,
+            detail=f"Emby request failed while requesting {path}: {exc}",
+        ) from exc
+
+
+def ensure_emby_success(response: httpx.Response, *, context: str) -> httpx.Response:
+    try:
+        response.raise_for_status()
+    except httpx.HTTPStatusError as exc:
+        detail = response.text.strip() or str(exc)
+        raise HTTPException(
+            status_code=502,
+            detail=f"{context} failed ({response.status_code}): {detail}",
+        ) from exc
+    return response
+
+
+async def emby_get(path: str, params: dict = None) -> dict:
+    response = await emby_request("GET", path, params=params)
+    ensure_emby_success(response, context=f"Emby request to {path}")
+    return response.json()
 
 
 async def emby_get_image(
@@ -290,8 +247,6 @@ async def emby_get_image(
     max_height: int | None = None,
     quality: int | None = None,
 ) -> bytes:
-    client = get_http_client()
-    url = f"{EMBY_URL}/Items/{item_id}/Images/{image_type}"
     params: dict[str, str | int] = {"api_key": EMBY_API_KEY}
     if index is not None:
         params["Index"] = index
@@ -301,9 +256,9 @@ async def emby_get_image(
         params["maxHeight"] = max_height
     if quality is not None:
         params["quality"] = quality
-    r = await client.get(url, params=params)
-    r.raise_for_status()
-    return r.content
+    response = await emby_request("GET", f"/Items/{item_id}/Images/{image_type}", params=params)
+    ensure_emby_success(response, context=f"Emby image request for {image_type}")
+    return response.content
 
 
 async def emby_get_image_with_type(
@@ -315,8 +270,6 @@ async def emby_get_image_with_type(
     max_height: int | None = None,
     quality: int | None = None,
 ) -> tuple[bytes, str]:
-    client = get_http_client()
-    url = f"{EMBY_URL}/Items/{item_id}/Images/{image_type}"
     params: dict[str, str | int] = {"api_key": EMBY_API_KEY}
     if index is not None:
         params["Index"] = index
@@ -326,27 +279,25 @@ async def emby_get_image_with_type(
         params["maxHeight"] = max_height
     if quality is not None:
         params["quality"] = quality
-    r = await client.get(url, params=params)
-    r.raise_for_status()
-    content_type = (r.headers.get("content-type", "image/jpeg") or "image/jpeg").split(";")[0]
-    return r.content, content_type
+    response = await emby_request("GET", f"/Items/{item_id}/Images/{image_type}", params=params)
+    ensure_emby_success(response, context=f"Emby image request for {image_type}")
+    content_type = (response.headers.get("content-type", "image/jpeg") or "image/jpeg").split(";")[0]
+    return response.content, content_type
 
 
 async def emby_get_image_optional(item_id: str, image_type: str, index: int | None = None) -> bytes | None:
     """Returns image bytes or None if the image type doesn't exist for this item."""
-    client = get_http_client()
-    url = f"{EMBY_URL}/Items/{item_id}/Images/{image_type}"
     params: dict[str, str | int] = {"api_key": EMBY_API_KEY}
     if index is not None:
         params["Index"] = index
-    r = await client.get(url, params=params)
-    if r.status_code in (404, 400):
+    response = await emby_request("GET", f"/Items/{item_id}/Images/{image_type}", params=params)
+    if response.status_code in (404, 400):
         return None
-    r.raise_for_status()
-    content_type = r.headers.get("content-type", "").lower()
+    ensure_emby_success(response, context=f"Optional Emby image request for {image_type}")
+    content_type = response.headers.get("content-type", "").lower()
     if content_type and not content_type.startswith("image/"):
         return None
-    return r.content
+    return response.content
 
 
 async def emby_upload_image(item_id: str, image_bytes: bytes, image_type: str = "Thumb"):
@@ -355,10 +306,9 @@ async def emby_upload_image(item_id: str, image_bytes: bytes, image_type: str =
     upload_image.save(upload_buf, format="JPEG", quality=92, optimize=True)
     upload_b64 = base64.b64encode(upload_buf.getvalue())
 
-    client = get_http_client()
-    url = f"{EMBY_URL}/Items/{item_id}/Images/{image_type}"
-    r = await client.post(
-        url,
+    response = await emby_request(
+        "POST",
+        f"/Items/{item_id}/Images/{image_type}",
         params={"api_key": EMBY_API_KEY},
         content=upload_b64,
         headers={
@@ -366,84 +316,12 @@ async def emby_upload_image(item_id: str, image_bytes: bytes, image_type: str =
             "X-Emby-Token": EMBY_API_KEY,
         },
     )
-    try:
-        r.raise_for_status()
-    except httpx.HTTPStatusError as exc:
-        detail = r.text.strip() or str(exc)
-        raise HTTPException(
-            status_code=502,
-            detail=f"Emby upload failed ({r.status_code}): {detail}",
-        ) from exc
-    return r.status_code
+    ensure_emby_success(response, context=f"Emby upload for {image_type}")
+    return response.status_code
 
 
-@dataclass
-class ArtworkSearchResult:
-    id: str
-    title: str
-    thumbnail_url: str
-    image_url: str
-    source_url: str
-    provider: str
-    width: int | None = None
-    height: int | None = None
 
 
-class ImageSearchProvider:
-    key = "base"
-    label = "Base"
-
-    async def search(self, query: str, limit: int = 12) -> list[ArtworkSearchResult]:
-        raise NotImplementedError
-
-
-class WikimediaImageSearchProvider(ImageSearchProvider):
-    key = "wikimedia"
-    label = "Wikimedia Commons"
-
-    async def search(self, query: str, limit: int = 12) -> list[ArtworkSearchResult]:
-        client = get_http_client()
-        params = {
-            "action": "query",
-            "generator": "search",
-            "gsrnamespace": "6",
-            "gsrsearch": query,
-            "gsrlimit": str(max(1, min(24, limit))),
-            "prop": "imageinfo",
-            "iiprop": "url|size|mime",
-            "iiurlwidth": "420",
-            "format": "json",
-            "origin": "*",
-        }
-        r = await client.get("https://commons.wikimedia.org/w/api.php", params=params)
-        r.raise_for_status()
-        pages = (r.json().get("query") or {}).get("pages") or {}
-        results: list[ArtworkSearchResult] = []
-        for page in pages.values():
-            info = (page.get("imageinfo") or [{}])[0]
-            mime = info.get("mime", "")
-            if not mime.startswith("image/"):
-                continue
-            image_url = info.get("url")
-            if not image_url:
-                continue
-            title = (page.get("title") or "Artwork").replace("File:", "", 1)
-            results.append(ArtworkSearchResult(
-                id=hashlib.md5(image_url.encode("utf-8")).hexdigest(),
-                title=title,
-                thumbnail_url=info.get("thumburl") or image_url,
-                image_url=image_url,
-                source_url=info.get("descriptionurl") or image_url,
-                provider=self.key,
-                width=info.get("width"),
-                height=info.get("height"),
-            ))
-        return results
-
-
-IMAGE_SEARCH_PROVIDERS: dict[str, ImageSearchProvider] = {
-    WikimediaImageSearchProvider.key: WikimediaImageSearchProvider(),
-}
 
 
 def parse_emby_datetime(value: str | None) -> datetime | None:
@@ -897,11 +775,149 @@ def wrap_text(text: str, font: ImageFont.FreeTypeFont, max_width: int) -> list:
     return lines
 
 
+def parse_generator_request(body: dict) -> dict:
+    logo_index_raw = body.get("logo_index", None)
+    logo_index = int(logo_index_raw) if logo_index_raw is not None else None
+    return {
+        "item_id": body["item_id"],
+        "title": body.get("title", ""),
+        "bg_mode": body.get("bg_mode", "backdrop"),
+        "backdrop_index": int(body.get("backdrop_index", 0)),
+        "text_color": body.get("text_color", "#FFFFFF"),
+        "logo_align": body.get("logo_align", "bottom-center"),
+        "logo_scale": float(body.get("logo_scale", 1.3)),
+        "darkness": float(body.get("darkness", 0.0)),
+        "studio": body.get("studio", "none"),
+        "studio_position": body.get("studio_position", "bottom-right"),
+        "new_episodes_tag": bool(body.get("new_episodes_tag", False)),
+        "season_finale_tag": bool(body.get("season_finale_tag", False)),
+        "generate_primary": bool(body.get("generate_primary", False)),
+        "logo_index": logo_index,
+        "primary_zoom": float(body.get("primary_zoom", 1.0)),
+        "primary_pan_x": float(body.get("primary_pan_x", 0.0)),
+        "primary_pan_y": float(body.get("primary_pan_y", -0.16)),
+        "thumb_zoom": float(body.get("thumb_zoom", 1.0)),
+        "thumb_pan_x": float(body.get("thumb_pan_x", 0.0)),
+        "thumb_pan_y": float(body.get("thumb_pan_y", 0.0)),
+        "upload_bg_id": body.get("upload_bg_id") or None,
+    }
+
+
+async def get_logo_bytes_for_item(
+    item_id: str,
+    preferred_index: int | None,
+    *,
+    fallback_to_first: bool = False,
+) -> bytes | None:
+    if preferred_index is not None and preferred_index < 0:
+        return None
+    if preferred_index is not None:
+        logo_bytes = await get_cached_emby_source_image(item_id, "Logo", preferred_index, optional=True)
+        if logo_bytes or not fallback_to_first or preferred_index == 0:
+            return logo_bytes
+    fallback_index = 0 if fallback_to_first else preferred_index
+    if fallback_index is not None and fallback_index < 0:
+        return None
+    return await get_cached_emby_source_image(item_id, "Logo", fallback_index, optional=True)
+
+
+async def render_item_artwork(options: dict, *, fallback_logo_to_first: bool = False) -> tuple[bytes, bytes | None]:
+    poster_bytes = await get_cached_emby_source_image(options["item_id"], "Primary")
+    logo_bytes = await get_logo_bytes_for_item(
+        options["item_id"],
+        options["logo_index"],
+        fallback_to_first=fallback_logo_to_first,
+    )
+    if options["bg_mode"] == "upload" and options["upload_bg_id"]:
+        upload_path = get_upload_cache_path(options["upload_bg_id"])
+        backdrop_bytes = upload_path.read_bytes()
+    else:
+        backdrop_bytes = await get_cached_emby_source_image(
+            options["item_id"],
+            "Backdrop",
+            options["backdrop_index"],
+            optional=True,
+        )
+
+    effective_bg_mode = "backdrop" if options["bg_mode"] == "upload" else options["bg_mode"]
+    thumb_bytes = generate_thumbnail(
+        poster_bytes,
+        options["title"],
+        bg_mode=effective_bg_mode,
+        text_color=options["text_color"],
+        logo_align=options["logo_align"],
+        logo_scale=options["logo_scale"],
+        darkness=options["darkness"],
+        studio=options["studio"],
+        studio_position=options["studio_position"],
+        new_episodes_tag=options["new_episodes_tag"],
+        season_finale_tag=options["season_finale_tag"],
+        logo_index=options["logo_index"],
+        logo_bytes=logo_bytes,
+        backdrop_bytes=backdrop_bytes,
+        primary_zoom=options["primary_zoom"],
+        primary_pan_x=options["primary_pan_x"],
+        primary_pan_y=options["primary_pan_y"],
+        thumb_zoom=options["thumb_zoom"],
+        thumb_pan_x=options["thumb_pan_x"],
+        thumb_pan_y=options["thumb_pan_y"],
+    )
+
+    primary_bytes = None
+    if options["generate_primary"]:
+        try:
+            primary_bytes = generate_primary_cover(
+                poster_bytes,
+                options["title"],
+                bg_mode=effective_bg_mode,
+                text_color=options["text_color"],
+                logo_align=options["logo_align"],
+                logo_scale=options["logo_scale"],
+                darkness=options["darkness"],
+                studio=options["studio"],
+                studio_position=options["studio_position"],
+                new_episodes_tag=options["new_episodes_tag"],
+                season_finale_tag=options["season_finale_tag"],
+                logo_index=options["logo_index"],
+                logo_bytes=logo_bytes,
+                backdrop_bytes=backdrop_bytes,
+                primary_zoom=options["primary_zoom"],
+                primary_pan_x=options["primary_pan_x"],
+                primary_pan_y=options["primary_pan_y"],
+            )
+        except Exception:
+            primary_bytes = None
+    return thumb_bytes, primary_bytes
+
+
+def get_generator_cache_key(options: dict) -> str:
+    return build_cache_key(
+        item_id=options["item_id"],
+        bg_mode=options["bg_mode"],
+        backdrop_index=options["backdrop_index"],
+        text_color=options["text_color"],
+        logo_align=options["logo_align"],
+        logo_scale=options["logo_scale"],
+        darkness=options["darkness"],
+        studio=options["studio"],
+        studio_position=options["studio_position"],
+        new_episodes_tag=options["new_episodes_tag"],
+        season_finale_tag=options["season_finale_tag"],
+        logo_index=options["logo_index"],
+        primary_zoom=options["primary_zoom"],
+        primary_pan_x=options["primary_pan_x"],
+        primary_pan_y=options["primary_pan_y"],
+        thumb_zoom=options["thumb_zoom"],
+        thumb_pan_x=options["thumb_pan_x"],
+        thumb_pan_y=options["thumb_pan_y"],
+        upload_bg_id=options["upload_bg_id"],
+    )
+
+
 def build_cache_key(
     item_id: str,
     bg_mode: str = "backdrop",
     backdrop_index: int = 0,
-    custom_bg: str | None = None,
     text_color: str = "#FFFFFF",
     logo_align: str = "bottom-center",
     logo_scale: float = 1.3,
@@ -914,13 +930,16 @@ def build_cache_key(
     primary_zoom: float = 1.0,
     primary_pan_x: float = 0.0,
     primary_pan_y: float = -0.16,
+    thumb_zoom: float = 1.0,
+    thumb_pan_x: float = 0.0,
+    thumb_pan_y: float = 0.0,
+    upload_bg_id: str | None = None,
 ) -> str:
     payload = {
         "render_version": RENDER_VERSION,
         "item_id": item_id,
         "bg_mode": bg_mode,
         "backdrop_index": int(backdrop_index),
-        "custom_bg": custom_bg,
         "text_color": text_color,
         "logo_align": logo_align,
         "logo_scale": round(float(logo_scale), 4),
@@ -933,6 +952,10 @@ def build_cache_key(
         "primary_zoom": round(float(primary_zoom), 4),
         "primary_pan_x": round(float(primary_pan_x), 4),
         "primary_pan_y": round(float(primary_pan_y), 4),
+        "thumb_zoom": round(float(thumb_zoom), 4),
+        "thumb_pan_x": round(float(thumb_pan_x), 4),
+        "thumb_pan_y": round(float(thumb_pan_y), 4),
+        "upload_bg_id": upload_bg_id,
     }
     return hashlib.md5(repr(payload).encode("utf-8")).hexdigest()
 
@@ -949,7 +972,6 @@ def generate_thumbnail(
     poster_bytes: bytes,
     title: str,
     bg_mode: str = "backdrop",
-    custom_bg: str = None,
     text_color: str = "#FFFFFF",
     logo_align: str = "bottom-center",
     logo_scale: float = 1.3,
@@ -966,6 +988,9 @@ def generate_thumbnail(
     primary_zoom: float = 1.0,
     primary_pan_x: float = 0.0,
     primary_pan_y: float = -0.16,
+    thumb_zoom: float = 1.0,
+    thumb_pan_x: float = 0.0,
+    thumb_pan_y: float = 0.0,
 ) -> bytes:
 
     # darkness is 0.0 (no dimming) → 1.0 (very dark); scale bg and vignette together
@@ -975,7 +1000,7 @@ def generate_thumbnail(
     is_tall_layout = height >= int(width * 1.3)
 
     # --- Build background ---
-    if backdrop_bytes and bg_mode != "solid":
+    if backdrop_bytes:
         backdrop = load_image_from_bytes(backdrop_bytes, mode="RGB")
         if is_tall_layout:
             bg = build_tall_backdrop_background(
@@ -988,14 +1013,8 @@ def generate_thumbnail(
                 pan_y=primary_pan_y,
             )
         else:
-            bg = cover_crop(backdrop, width, height)
+            bg = cover_crop_positioned(backdrop, width, height, zoom=thumb_zoom, pan_x=thumb_pan_x, pan_y=thumb_pan_y)
             bg = bg.point(lambda p: int(p * bg_dim))
-    elif bg_mode == "solid" and custom_bg:
-        try:
-            bg_color = ImageColor.getrgb(custom_bg)
-        except ValueError:
-            bg_color = (15, 15, 25)
-        bg = Image.new("RGB", (width, height), bg_color)
     else:
         poster = load_image_from_bytes(poster_bytes, mode="RGB")
         if is_tall_layout:
@@ -1010,7 +1029,7 @@ def generate_thumbnail(
             )
         else:
             # Blurred poster fallback for landscape thumbs.
-            bg = cover_crop(poster, width, height)
+            bg = cover_crop_positioned(poster, width, height, zoom=thumb_zoom, pan_x=thumb_pan_x, pan_y=thumb_pan_y)
             bg = bg.filter(ImageFilter.GaussianBlur(radius=20))
             bg = bg.point(lambda p: int(p * bg_dim * 0.85))
 
@@ -1127,15 +1146,15 @@ def generate_thumbnail(
         logo = logo.resize((lw, lh), Image.LANCZOS)
         logo_x, logo_y = logo_position(lw, lh)
 
-        # Drop shadow — blur only a tight crop around the logo, not the whole frame,
-        # to avoid a visible dark haze spreading across the backdrop.
-        blur_r = 5
+        # Drop shadow — diffuse glow with no offset for a soft, professional look.
+        # Blur only a tight crop around the logo to avoid dark haze on the backdrop.
+        blur_r = 11
         pad = blur_r * 3
         _, _, _, a = logo.split()
         black = Image.new("RGB", (lw, lh), (0, 0, 0))
         shadow_logo = Image.merge("RGBA", (*black.split()[:3], a))
         shadow_crop = Image.new("RGBA", (lw + pad * 2, lh + pad * 2), (0, 0, 0, 0))
-        shadow_crop.paste(shadow_logo, (pad + 4, pad + 4), shadow_logo)
+        shadow_crop.paste(shadow_logo, (pad, pad), shadow_logo)
         shadow_crop = shadow_crop.filter(ImageFilter.GaussianBlur(radius=blur_r))
         bg = bg.convert("RGBA")
         bg.alpha_composite(shadow_crop, (logo_x - pad, logo_y - pad))
@@ -1193,7 +1212,6 @@ def generate_primary_cover(
     poster_bytes: bytes,
     title: str,
     bg_mode: str = "backdrop",
-    custom_bg: str | None = None,
     text_color: str = "#FFFFFF",
     logo_align: str = "bottom-center",
     logo_scale: float = 1.3,
@@ -1209,11 +1227,12 @@ def generate_primary_cover(
     primary_pan_x: float = 0.0,
     primary_pan_y: float = -0.16,
 ) -> bytes:
+    # Use the same backdrop_bytes as the thumb (backdrop image or uploaded photo).
+    # When none is provided, falls back to using poster_bytes as background.
     return generate_thumbnail(
         poster_bytes,
         title,
         bg_mode=bg_mode,
-        custom_bg=custom_bg,
         text_color=text_color,
         logo_align=logo_align,
         logo_scale=logo_scale,
@@ -1233,6 +1252,328 @@ def generate_primary_cover(
     )
 
 
+def normalize_collection_target_type(value: str | None) -> str:
+    normalized = (value or "Thumb").strip().lower()
+    if normalized == "primary":
+        return "Primary"
+    if normalized == "thumb":
+        return "Thumb"
+    raise HTTPException(status_code=400, detail="Invalid target type.")
+
+
+def normalize_collection_choice(value: str | None, allowed: set[str], default: str) -> str:
+    normalized = (value or default).strip().lower()
+    if normalized not in allowed:
+        return default
+    return normalized
+
+
+def normalize_collection_text(value: str | None) -> str:
+    text = " ".join((value or "").split())
+    if not text:
+        raise HTTPException(status_code=400, detail="Text is required.")
+    return text[:140]
+
+
+def clamp_float(value: float, minimum: float, maximum: float) -> float:
+    return max(minimum, min(maximum, float(value)))
+
+
+def get_collection_canvas_size(target_type: str) -> tuple[int, int]:
+    return (PRIMARY_WIDTH, PRIMARY_HEIGHT) if target_type == "Primary" else (THUMB_WIDTH, THUMB_HEIGHT)
+
+
+def build_collection_cache_key(
+    *,
+    item_id: str,
+    target_type: str,
+    text: str,
+    text_color: str,
+    text_align: str,
+    text_position: str,
+    text_scale: float,
+    darkness: float,
+    zoom: float,
+    pan_x: float,
+    pan_y: float,
+    upload_bg_id: str | None,
+) -> str:
+    payload = {
+        "render_version": COLLECTION_RENDER_VERSION,
+        "item_id": item_id,
+        "target_type": target_type,
+        "text": text,
+        "text_color": text_color,
+        "text_align": text_align,
+        "text_position": text_position,
+        "text_scale": round(float(text_scale), 4),
+        "darkness": round(float(darkness), 4),
+        "zoom": round(float(zoom), 4),
+        "pan_x": round(float(pan_x), 4),
+        "pan_y": round(float(pan_y), 4),
+        "upload_bg_id": upload_bg_id,
+    }
+    return hashlib.md5(repr(payload).encode("utf-8")).hexdigest()
+
+
+def get_collection_cache_path(cache_key: str) -> Path:
+    return CACHE_DIR / f"{cache_key}.collection.png"
+
+
+def build_collection_fallback_background(width: int, height: int) -> Image.Image:
+    bg = Image.new("RGB", (width, height), "#121723")
+    draw = ImageDraw.Draw(bg)
+    for y in range(height):
+        t = y / max(1, height - 1)
+        r = int(18 + (28 * t))
+        g = int(24 + (18 * t))
+        b = int(35 + (48 * t))
+        draw.line([(0, y), (width, y)], fill=(r, g, b))
+    accent_radius = max(width, height) // 2
+    accent = Image.new("RGBA", (width, height), (0, 0, 0, 0))
+    accent_draw = ImageDraw.Draw(accent)
+    accent_draw.ellipse(
+        (
+            width - accent_radius,
+            -accent_radius // 3,
+            width + accent_radius // 2,
+            accent_radius + accent_radius // 6,
+        ),
+        fill=(74, 111, 255, 50),
+    )
+    accent_draw.ellipse(
+        (
+            -accent_radius // 2,
+            height - accent_radius,
+            accent_radius,
+            height + accent_radius // 3,
+        ),
+        fill=(52, 211, 153, 34),
+    )
+    return Image.alpha_composite(bg.convert("RGBA"), accent).convert("RGB")
+
+
+def fit_collection_text_block(
+    text: str,
+    *,
+    width: int,
+    height: int,
+    text_scale: float,
+) -> tuple[ImageFont.FreeTypeFont, list[str], list[tuple[int, int, int, int]], int]:
+    is_tall = height > width
+    max_width = width - int(width * 0.12)
+    max_height = int(height * (0.54 if is_tall else 0.42))
+    max_lines = 5 if is_tall else 3
+    base_size = int(height * (0.07 if is_tall else 0.12) * text_scale)
+    min_size = 34 if is_tall else 24
+
+    size = max(base_size, min_size)
+    while size >= min_size:
+        font = get_arial_bold_font(size)
+        lines = wrap_text(text, font, max_width)
+        boxes = [font.getbbox(line) for line in lines] if lines else []
+        heights = [(box[3] - box[1]) for box in boxes]
+        line_gap = max(8, int(size * 0.16))
+        total_height = sum(heights) + line_gap * max(0, len(lines) - 1)
+        if lines and len(lines) <= max_lines and total_height <= max_height:
+            return font, lines, boxes, line_gap
+        size -= 4
+
+    font = get_arial_bold_font(min_size)
+    lines = wrap_text(text, font, max_width)
+    boxes = [font.getbbox(line) for line in lines] if lines else []
+    line_gap = max(8, int(min_size * 0.16))
+    return font, lines or [text], boxes or [font.getbbox(text)], line_gap
+
+
+def generate_collection_art(
+    *,
+    source_bytes: bytes | None,
+    target_type: str,
+    text: str,
+    text_color: str,
+    text_align: str,
+    text_position: str,
+    text_scale: float,
+    darkness: float,
+    zoom: float,
+    pan_x: float,
+    pan_y: float,
+) -> bytes:
+    width, height = get_collection_canvas_size(target_type)
+    darkness = clamp_float(darkness, 0.0, 1.0)
+    zoom = clamp_float(zoom, PRIMARY_MIN_ZOOM, PRIMARY_MAX_ZOOM)
+    pan_x = clamp_float(pan_x, -1.0, 1.0)
+    pan_y = clamp_float(pan_y, -1.0, 1.0)
+
+    if source_bytes:
+        source = load_image_from_bytes(source_bytes, mode="RGB")
+        bg = cover_crop_positioned(source, width, height, zoom=zoom, pan_x=pan_x, pan_y=pan_y)
+    else:
+        bg = build_collection_fallback_background(width, height)
+
+    if darkness > 0:
+        bg = bg.point(lambda p: int(p * (1.0 - (darkness * 0.42))))
+
+    font, lines, boxes, line_gap = fit_collection_text_block(
+        text,
+        width=width,
+        height=height,
+        text_scale=clamp_float(text_scale, 0.65, 1.8),
+    )
+    try:
+        text_fill = ImageColor.getrgb(text_color)
+    except ValueError:
+        text_fill = (255, 255, 255)
+    padding_x = max(34, int(width * 0.06))
+    padding_y = max(28, int(height * 0.05))
+    line_heights = [(box[3] - box[1]) for box in boxes]
+    line_widths = [(box[2] - box[0]) for box in boxes]
+    text_block_w = max(line_widths) if line_widths else 0
+    text_block_h = sum(line_heights) + line_gap * max(0, len(lines) - 1)
+
+    if text_align == "left":
+        text_x = padding_x
+    elif text_align == "right":
+        text_x = width - padding_x - text_block_w
+    else:
+        text_x = (width - text_block_w) // 2
+
+    if text_position == "top":
+        text_y = padding_y
+    elif text_position == "center":
+        text_y = max(padding_y, (height - text_block_h) // 2)
+    else:
+        text_y = height - padding_y - text_block_h
+
+    panel_pad_x = max(22, int(font.size * 0.45))
+    panel_pad_y = max(18, int(font.size * 0.34))
+    panel_left = max(14, text_x - panel_pad_x)
+    panel_top = max(14, text_y - panel_pad_y)
+    panel_right = min(width - 14, text_x + text_block_w + panel_pad_x)
+    panel_bottom = min(height - 14, text_y + text_block_h + panel_pad_y)
+
+    overlay = Image.new("RGBA", (width, height), (0, 0, 0, 0))
+    overlay_draw = ImageDraw.Draw(overlay)
+    overlay_draw.rounded_rectangle(
+        [(panel_left, panel_top), (panel_right, panel_bottom)],
+        radius=max(18, int(min(width, height) * 0.024)),
+        fill=(0, 0, 0, 92 + int(darkness * 80)),
+        outline=(255, 255, 255, 18),
+        width=1,
+    )
+
+    bg = Image.alpha_composite(bg.convert("RGBA"), overlay).convert("RGB")
+    draw = ImageDraw.Draw(bg)
+    stroke_width = max(2, int(font.size * 0.08))
+    current_y = text_y
+    for line, box, line_height, line_width in zip(lines, boxes, line_heights, line_widths):
+        if text_align == "left":
+            line_x = padding_x - box[0]
+        elif text_align == "right":
+            line_x = width - padding_x - line_width - box[0]
+        else:
+            line_x = ((width - line_width) // 2) - box[0]
+        draw.text(
+            (line_x, current_y - box[1]),
+            line,
+            font=font,
+            fill=text_fill,
+            stroke_width=stroke_width,
+            stroke_fill=(0, 0, 0),
+        )
+        current_y += line_height + line_gap
+
+    buf = io.BytesIO()
+    bg.save(buf, format="PNG")
+    buf.seek(0)
+    return buf.getvalue()
+
+
+def parse_collection_render_request(body: dict) -> dict:
+    try:
+        item_id = str(body["item_id"])
+    except KeyError as exc:
+        raise HTTPException(status_code=400, detail="Missing item id.") from exc
+
+    return {
+        "item_id": item_id,
+        "target_type": normalize_collection_target_type(body.get("target_type", "Thumb")),
+        "text": normalize_collection_text(body.get("text") or body.get("title")),
+        "text_color": body.get("text_color", "#FFFFFF"),
+        "text_align": normalize_collection_choice(body.get("text_align"), {"left", "center", "right"}, "center"),
+        "text_position": normalize_collection_choice(body.get("text_position"), {"top", "center", "bottom"}, "bottom"),
+        "text_scale": clamp_float(body.get("text_scale", 1.0), 0.65, 1.8),
+        "darkness": clamp_float(body.get("darkness", 0.18), 0.0, 0.85),
+        "zoom": clamp_float(body.get("zoom", 1.0), PRIMARY_MIN_ZOOM, PRIMARY_MAX_ZOOM),
+        "pan_x": clamp_float(body.get("pan_x", 0.0), -1.0, 1.0),
+        "pan_y": clamp_float(body.get("pan_y", 0.0), -1.0, 1.0),
+        "upload_bg_id": body.get("upload_bg_id") or None,
+    }
+
+
+async def get_collection_source_bytes(item_id: str, target_type: str, upload_bg_id: str | None) -> bytes | None:
+    if upload_bg_id:
+        return get_upload_cache_path(upload_bg_id).read_bytes()
+
+    fallback_types = [target_type]
+    if target_type == "Thumb":
+        fallback_types.append("Primary")
+    else:
+        fallback_types.append("Thumb")
+
+    seen: set[str] = set()
+    for image_type in fallback_types:
+        if image_type in seen:
+            continue
+        seen.add(image_type)
+        image_bytes = await emby_get_image_optional(item_id, image_type)
+        if image_bytes:
+            return image_bytes
+    return None
+
+
+async def render_collection_art_preview(options: dict) -> tuple[str, bytes]:
+    cache_key = build_collection_cache_key(
+        item_id=options["item_id"],
+        target_type=options["target_type"],
+        text=options["text"],
+        text_color=options["text_color"],
+        text_align=options["text_align"],
+        text_position=options["text_position"],
+        text_scale=options["text_scale"],
+        darkness=options["darkness"],
+        zoom=options["zoom"],
+        pan_x=options["pan_x"],
+        pan_y=options["pan_y"],
+        upload_bg_id=options["upload_bg_id"],
+    )
+    cache_path = get_collection_cache_path(cache_key)
+    if cache_path.exists():
+        return cache_key, cache_path.read_bytes()
+
+    source_bytes = await get_collection_source_bytes(
+        options["item_id"],
+        options["target_type"],
+        options["upload_bg_id"],
+    )
+    preview_bytes = generate_collection_art(
+        source_bytes=source_bytes,
+        target_type=options["target_type"],
+        text=options["text"],
+        text_color=options["text_color"],
+        text_align=options["text_align"],
+        text_position=options["text_position"],
+        text_scale=options["text_scale"],
+        darkness=options["darkness"],
+        zoom=options["zoom"],
+        pan_x=options["pan_x"],
+        pan_y=options["pan_y"],
+    )
+    cache_path.write_bytes(preview_bytes)
+    return cache_key, preview_bytes
+
+
 # --- API Routes ---
 
 @app.get("/", response_class=HTMLResponse)
@@ -1240,6 +1581,11 @@ async def index(request: Request):
     return templates.TemplateResponse(request, "index.html")
 
 
+@app.get("/collections", response_class=HTMLResponse)
+async def collections_page(request: Request):
+    return templates.TemplateResponse(request, "collections.html")
+
+
 @app.get("/airing", response_class=HTMLResponse)
 async def airing_page(request: Request):
     return templates.TemplateResponse(request, "airing.html")
@@ -1304,7 +1650,6 @@ async def apply_new_season_banner(request: Request):
         item_id=item_id,
         bg_mode="backdrop",
         backdrop_index=0,
-        custom_bg=None,
         text_color="#FFFFFF",
         logo_align="bottom-center",
         logo_scale=1.3,
@@ -1354,7 +1699,6 @@ async def apply_new_season_banner(request: Request):
                 season_finale_tag=False,
                 logo_index=0,
                 logo_bytes=logo_bytes,
-                backdrop_bytes=backdrop_bytes,
             )
             primary_cache_path.write_bytes(primary_bytes)
 
@@ -1372,7 +1716,7 @@ async def apply_new_season_banner(request: Request):
         "status": "applied",
         "thumb_code": thumb_status,
         "primary_code": primary_status,
-        "primary_attempted": generate_primary,
+        "primary_attempted": options["generate_primary"],
         "primary_error": primary_error,
     }
 
@@ -1417,6 +1761,87 @@ async def search_items(
     }
 
 
+@app.get("/api/categories")
+async def get_categories():
+    data = await emby_get("/Genres", {
+        "Recursive": "true",
+        "SortBy": "SortName",
+        "SortOrder": "Ascending",
+    })
+    items = []
+    for item in data.get("Items", []):
+        items.append({
+            "id": item.get("Id"),
+            "name": item.get("Name", ""),
+            "item_count": item.get("ItemCount") or item.get("ChildCount") or 0,
+        })
+    items.sort(key=lambda entry: entry["name"].lower())
+    return {"items": items}
+
+
+@app.get("/api/collections")
+async def get_collections(
+    q: str = Query(""),
+    start: int = Query(0, ge=0),
+    limit: int = Query(24, ge=1, le=60),
+):
+    params = {
+        "IncludeItemTypes": "BoxSet",
+        "Recursive": "true",
+        "SortBy": "SortName",
+        "SortOrder": "Ascending",
+        "Fields": "ChildCount",
+        "StartIndex": str(start),
+        "Limit": str(limit),
+        "ImageTypeLimit": "1",
+        "EnableImageTypes": "Primary,Thumb",
+    }
+    if q.strip():
+        params["SearchTerm"] = q.strip()
+
+    data = await emby_get("/Items", params)
+    items = []
+    for item in data.get("Items", []):
+        image_tags = item.get("ImageTags") or {}
+        items.append({
+            "id": item["Id"],
+            "name": item.get("Name", ""),
+            "type": item.get("Type", ""),
+            "child_count": item.get("ChildCount") or 0,
+            "poster_url": f"/api/poster/{item['Id']}?w=72&h=108&q=72" if "Primary" in image_tags else None,
+        })
+
+    total = int(data.get("TotalRecordCount", start + len(items)))
+    return {
+        "items": items,
+        "start": start,
+        "limit": limit,
+        "total": total,
+        "has_more": start + len(items) < total,
+    }
+
+
+@app.get("/api/collections/{item_id}/artwork")
+async def get_collection_artwork(item_id: str):
+    images = await emby_get(f"/Items/{item_id}/Images")
+    artwork = {
+        "Primary": {"exists": False, "url": None},
+        "Thumb": {"exists": False, "url": None},
+    }
+    for image in images:
+        image_type = image.get("ImageType")
+        if image_type not in artwork or artwork[image_type]["exists"]:
+            continue
+        artwork[image_type] = {
+            "exists": True,
+            "url": f"/api/item-image/{item_id}?type={image_type}&w={300 if image_type == 'Primary' else 420}&h={450 if image_type == 'Primary' else 236}&q=88",
+        }
+    return {
+        "primary": artwork["Primary"],
+        "thumb": artwork["Thumb"],
+    }
+
+
 @app.get("/api/images/{item_id}")
 async def get_image_info(item_id: str):
     """Returns accurate logo and backdrop counts by querying the Images endpoint directly."""
@@ -1513,267 +1938,87 @@ async def get_cached_primary_preview(cache_key: str):
     )
 
 
-@app.get("/api/artwork/providers")
-async def list_artwork_search_providers():
-    return {
-        "providers": [
-            {"key": provider.key, "label": provider.label}
-            for provider in IMAGE_SEARCH_PROVIDERS.values()
-        ],
-        "targets": [
-            {
-                "key": key,
-                "label": value["label"],
-                "width": value["width"],
-                "height": value["height"],
-                "emby_type": value["emby_type"],
-            }
-            for key, value in EDITOR_TARGETS.items()
-        ],
-    }
-
-
-@app.get("/api/artwork/search")
-async def search_external_artwork(
-    q: str = Query(..., min_length=2),
-    provider: str = Query("wikimedia"),
-    limit: int = Query(12, ge=1, le=24),
-):
-    search_provider = IMAGE_SEARCH_PROVIDERS.get(provider)
-    if search_provider is None:
-        raise HTTPException(status_code=400, detail="Unknown image search provider.")
-    try:
-        results = await search_provider.search(q, limit=limit)
-    except httpx.HTTPError as exc:
-        raise HTTPException(status_code=502, detail=f"Image search failed: {exc}") from exc
-    return {
-        "provider": provider,
-        "items": [result.__dict__ for result in results],
-    }
-
-
-@app.post("/api/artwork/import")
-async def import_remote_artwork(request: Request):
-    body = await request.json()
-    image_url = body.get("image_url", "")
-    if not image_url:
-        raise HTTPException(status_code=400, detail="Missing image URL.")
-    parsed = urllib.parse.urlparse(image_url)
-    if parsed.scheme not in {"http", "https"}:
-        raise HTTPException(status_code=400, detail="Only http and https image URLs are supported.")
-
-    client = get_http_client()
-    try:
-        r = await client.get(image_url, follow_redirects=True)
-        r.raise_for_status()
-    except httpx.HTTPError as exc:
-        raise HTTPException(status_code=502, detail=f"Could not import remote image: {exc}") from exc
-
-    content_type = r.headers.get("content-type", "").split(";")[0].lower()
-    if content_type and not content_type.startswith("image/"):
-        raise HTTPException(status_code=400, detail="Remote URL did not return an image.")
-    image_bytes = r.content
-    if len(image_bytes) > REMOTE_IMAGE_MAX_BYTES:
-        raise HTTPException(status_code=400, detail="Remote image is too large.")
-    width, height, fmt = validate_image_bytes(image_bytes)
-    import_id = hashlib.sha256(image_bytes).hexdigest()
-    import_path = IMPORT_CACHE_DIR / f"{import_id}.img"
-    if not import_path.exists():
-        import_path.write_bytes(image_bytes)
-    return {
-        "id": import_id,
-        "width": width,
-        "height": height,
-        "format": fmt,
-        "preview_url": f"/api/artwork/import/{import_id}",
-    }
-
-
-@app.get("/api/artwork/import/{import_id}")
-async def get_imported_artwork(import_id: str):
-    image_bytes = get_import_cache_path(import_id).read_bytes()
-    return Response(
-        content=image_bytes,
-        media_type="image/jpeg",
-        headers={"Cache-Control": "public, max-age=86400"},
-    )
-
-
-@app.post("/api/artwork/export")
-async def export_artwork(request: Request):
-    body = await request.json()
-    source_bytes = await resolve_editor_source_bytes(body)
-    cache_key = build_editor_cache_key(body)
-    cache_path = CACHE_DIR / f"{cache_key}.editor.jpg"
-    if not cache_path.exists():
-        cache_path.write_bytes(render_artwork_editor_image(
-            source_bytes,
-            target_mode=body.get("target_mode", "poster"),
-            fit_mode=body.get("fit_mode", "cover"),
-            fill_mode=body.get("fill_mode", "blur"),
-            fill_color=body.get("fill_color", "#101318"),
-            zoom=float(body.get("zoom", 1.0)),
-            pan_x=float(body.get("pan_x", 0.0)),
-            pan_y=float(body.get("pan_y", 0.0)),
-            quality=int(body.get("quality", 95)),
-        ))
-    target = get_editor_target(body.get("target_mode", "poster"))
-    return Response(
-        content=cache_path.read_bytes(),
-        media_type="image/jpeg",
-        headers={
-            "Cache-Control": "no-store",
-            "X-Editor-Cache-Key": cache_key,
-            "X-Editor-Width": str(target["width"]),
-            "X-Editor-Height": str(target["height"]),
-            "X-Editor-Emby-Type": target["emby_type"],
-        },
-    )
-
-
-@app.get("/api/artwork/export/{cache_key}")
-async def get_exported_artwork(cache_key: str):
+@app.get("/api/cache/{cache_key}/collection")
+async def get_cached_collection_preview(cache_key: str):
     if not cache_key or any(ch not in "0123456789abcdef" for ch in cache_key.lower()):
-        raise HTTPException(status_code=400, detail="Invalid export cache key.")
-    cache_path = CACHE_DIR / f"{cache_key}.editor.jpg"
+        raise HTTPException(status_code=400, detail="Invalid cache key.")
+    cache_path = get_collection_cache_path(cache_key)
     if not cache_path.exists():
-        raise HTTPException(status_code=404, detail="Export was not found in cache.")
+        raise HTTPException(status_code=404, detail="Collection preview not found.")
     return Response(
         content=cache_path.read_bytes(),
-        media_type="image/jpeg",
+        media_type="image/png",
         headers={"Cache-Control": "no-store"},
     )
 
 
-@app.post("/api/artwork/apply")
-async def apply_artwork_export(request: Request):
+@app.post("/api/upload-background")
+async def upload_background(request: Request):
+    form = await request.form()
+    file = form.get("file")
+    if file is None:
+        raise HTTPException(status_code=400, detail="Missing file field.")
+    image_bytes = await file.read()
+    if len(image_bytes) > UPLOAD_MAX_BYTES:
+        raise HTTPException(status_code=400, detail="Uploaded file is too large (max 40 MB).")
+    width, height, fmt = validate_image_bytes(image_bytes)
+    upload_id = hashlib.sha256(image_bytes).hexdigest()
+    upload_path = IMPORT_CACHE_DIR / f"{upload_id}.img"
+    if not upload_path.exists():
+        upload_path.write_bytes(image_bytes)
+    return {"upload_id": upload_id, "width": width, "height": height, "format": fmt}
+
+
+@app.post("/api/collections/generate")
+async def generate_collection_preview(request: Request):
     body = await request.json()
-    item_id = body.get("item_id")
-    if not item_id:
-        raise HTTPException(status_code=400, detail="Missing item id.")
-    target = get_editor_target(body.get("target_mode", "poster"))
-    cache_key = body.get("cache_key") or build_editor_cache_key(body)
-    cache_path = CACHE_DIR / f"{cache_key}.editor.jpg"
-    if cache_path.exists():
-        image_bytes = cache_path.read_bytes()
-    else:
-        source_bytes = await resolve_editor_source_bytes(body)
-        image_bytes = render_artwork_editor_image(
-            source_bytes,
-            target_mode=body.get("target_mode", "poster"),
-            fit_mode=body.get("fit_mode", "cover"),
-            fill_mode=body.get("fill_mode", "blur"),
-            fill_color=body.get("fill_color", "#101318"),
-            zoom=float(body.get("zoom", 1.0)),
-            pan_x=float(body.get("pan_x", 0.0)),
-            pan_y=float(body.get("pan_y", 0.0)),
-            quality=int(body.get("quality", 95)),
-        )
-        cache_path.write_bytes(image_bytes)
-    status = await emby_upload_image(item_id, image_bytes, target["emby_type"])
+    options = parse_collection_render_request(body)
+    cache_key, preview_bytes = await render_collection_art_preview(options)
+    return StreamingResponse(
+        io.BytesIO(preview_bytes),
+        media_type="image/png",
+        headers={"X-Cache-Key": cache_key},
+    )
+
+
+@app.post("/api/collections/apply")
+async def apply_collection_art(request: Request):
+    body = await request.json()
+    options = parse_collection_render_request(body)
+    _, preview_bytes = await render_collection_art_preview(options)
+    status_code = await emby_upload_image(options["item_id"], preview_bytes, options["target_type"])
     return {
         "status": "applied",
-        "emby_type": target["emby_type"],
-        "code": status,
-        "cache_key": cache_key,
+        "target_type": options["target_type"],
+        "code": status_code,
     }
 
 
 @app.post("/api/generate")
 async def generate(request: Request):
-    body = await request.json()
-    item_id = body["item_id"]
-    title = body["title"]
-    bg_mode = body.get("bg_mode", "backdrop")
-    custom_bg = body.get("custom_bg", None)
-    text_color = body.get("text_color", "#FFFFFF")
-    logo_align = body.get("logo_align", "bottom-center")
-    logo_scale = float(body.get("logo_scale", 1.3))
-    darkness = float(body.get("darkness", 0.0))
-    studio = body.get("studio", "none")
-    studio_position = body.get("studio_position", "bottom-right")
-    new_episodes_tag = bool(body.get("new_episodes_tag", False))
-    season_finale_tag = bool(body.get("season_finale_tag", False))
-    generate_primary = bool(body.get("generate_primary", False))
-    logo_index_raw = body.get("logo_index", None)
-    logo_index = int(logo_index_raw) if logo_index_raw is not None else None
-    backdrop_index = int(body.get("backdrop_index", 0))
-    primary_zoom = float(body.get("primary_zoom", 1.0))
-    primary_pan_x = float(body.get("primary_pan_x", 0.0))
-    primary_pan_y = float(body.get("primary_pan_y", -0.16))
-
-    poster_bytes = await emby_get_image(item_id, "Primary")
-    logo_bytes = await emby_get_image_optional(item_id, "Logo", logo_index)
-    backdrop_bytes = await emby_get_image_optional(item_id, "Backdrop", backdrop_index)
-
-    thumb_bytes = generate_thumbnail(
-        poster_bytes, title,
-        bg_mode=bg_mode,
-        custom_bg=custom_bg,
-        text_color=text_color,
-        logo_align=logo_align,
-        logo_scale=logo_scale,
-        darkness=darkness,
-        studio=studio,
-        studio_position=studio_position,
-        new_episodes_tag=new_episodes_tag,
-        season_finale_tag=season_finale_tag,
-        logo_index=logo_index,
-        logo_bytes=logo_bytes,
-        backdrop_bytes=backdrop_bytes,
-        primary_zoom=primary_zoom,
-        primary_pan_x=primary_pan_x,
-        primary_pan_y=primary_pan_y,
-    )
-
-    cache_key = build_cache_key(
-        item_id=item_id,
-        bg_mode=bg_mode,
-        backdrop_index=backdrop_index,
-        custom_bg=custom_bg,
-        text_color=text_color,
-        logo_align=logo_align,
-        logo_scale=logo_scale,
-        darkness=darkness,
-        studio=studio,
-        studio_position=studio_position,
-        new_episodes_tag=new_episodes_tag,
-        season_finale_tag=season_finale_tag,
-        logo_index=logo_index,
-        primary_zoom=primary_zoom,
-        primary_pan_x=primary_pan_x,
-        primary_pan_y=primary_pan_y,
-    )
+    options = parse_generator_request(await request.json())
+    cache_key = get_generator_cache_key(options)
     thumb_cache_path = get_thumb_cache_path(cache_key)
+    primary_cache_path = get_primary_cache_path(cache_key)
+
+    thumb_cached = thumb_cache_path.exists()
+    primary_cached = primary_cache_path.exists()
+    if thumb_cached and (not options["generate_primary"] or primary_cached):
+        return StreamingResponse(
+            io.BytesIO(thumb_cache_path.read_bytes()),
+            media_type="image/png",
+            headers={
+                "X-Primary-Generated": "1" if (options["generate_primary"] and primary_cached) else "0",
+                "X-Cache-Key": cache_key,
+            },
+        )
+
+    thumb_bytes, primary_bytes = await render_item_artwork(options)
     thumb_cache_path.write_bytes(thumb_bytes)
 
-    primary_generated = False
-    if generate_primary:
-        try:
-            primary_bytes = generate_primary_cover(
-                poster_bytes,
-                title,
-                bg_mode=bg_mode,
-                custom_bg=custom_bg,
-                text_color=text_color,
-                logo_align=logo_align,
-                logo_scale=logo_scale,
-                darkness=darkness,
-                studio=studio,
-                studio_position=studio_position,
-                new_episodes_tag=new_episodes_tag,
-                season_finale_tag=season_finale_tag,
-                logo_index=logo_index,
-                logo_bytes=logo_bytes,
-                backdrop_bytes=backdrop_bytes,
-                primary_zoom=primary_zoom,
-                primary_pan_x=primary_pan_x,
-                primary_pan_y=primary_pan_y,
-            )
-            get_primary_cache_path(cache_key).write_bytes(primary_bytes)
-            primary_generated = True
-        except Exception:
-            primary_generated = False
+    primary_generated = primary_bytes is not None
+    if primary_generated:
+        get_primary_cache_path(cache_key).write_bytes(primary_bytes)
 
     return StreamingResponse(
         io.BytesIO(thumb_bytes),
@@ -1787,135 +2032,32 @@ async def generate(request: Request):
 
 @app.post("/api/apply")
 async def apply_to_emby(request: Request):
-    body = await request.json()
-    item_id = body["item_id"]
-    title = body.get("title", "")
-    bg_mode = body.get("bg_mode", "backdrop")
-    backdrop_index = int(body.get("backdrop_index", 0))
-    custom_bg = body.get("custom_bg", None)
-    text_color = body.get("text_color", "#FFFFFF")
-    logo_align = body.get("logo_align", "bottom-center")
-    logo_scale = float(body.get("logo_scale", 1.3))
-    darkness = float(body.get("darkness", 0.0))
-    studio = body.get("studio", "none")
-    studio_position = body.get("studio_position", "bottom-right")
-    new_episodes_tag = bool(body.get("new_episodes_tag", False))
-    season_finale_tag = bool(body.get("season_finale_tag", False))
-    generate_primary = bool(body.get("generate_primary", False))
-    logo_index_raw = body.get("logo_index", None)
-    logo_index = int(logo_index_raw) if logo_index_raw is not None else None
-    primary_zoom = float(body.get("primary_zoom", 1.0))
-    primary_pan_x = float(body.get("primary_pan_x", 0.0))
-    primary_pan_y = float(body.get("primary_pan_y", -0.16))
-
-    cache_key = build_cache_key(
-        item_id=item_id,
-        bg_mode=bg_mode,
-        backdrop_index=backdrop_index,
-        custom_bg=custom_bg,
-        text_color=text_color,
-        logo_align=logo_align,
-        logo_scale=logo_scale,
-        darkness=darkness,
-        studio=studio,
-        studio_position=studio_position,
-        new_episodes_tag=new_episodes_tag,
-        season_finale_tag=season_finale_tag,
-        logo_index=logo_index,
-        primary_zoom=primary_zoom,
-        primary_pan_x=primary_pan_x,
-        primary_pan_y=primary_pan_y,
-    )
+    options = parse_generator_request(await request.json())
+    cache_key = get_generator_cache_key(options)
     thumb_cache_path = get_thumb_cache_path(cache_key)
     primary_cache_path = get_primary_cache_path(cache_key)
 
     if not thumb_cache_path.exists():
-        poster_bytes = await emby_get_image(item_id, "Primary")
-        logo_bytes = await emby_get_image_optional(item_id, "Logo", logo_index)
-        backdrop_bytes = await emby_get_image_optional(item_id, "Backdrop", backdrop_index)
-        thumb_bytes = generate_thumbnail(
-            poster_bytes,
-            title or "",
-            bg_mode=bg_mode,
-            custom_bg=custom_bg,
-            text_color=text_color,
-            logo_align=logo_align,
-            logo_scale=logo_scale,
-            darkness=darkness,
-            studio=studio,
-            studio_position=studio_position,
-            new_episodes_tag=new_episodes_tag,
-            season_finale_tag=season_finale_tag,
-            logo_index=logo_index,
-            logo_bytes=logo_bytes,
-            backdrop_bytes=backdrop_bytes,
-            primary_zoom=primary_zoom,
-            primary_pan_x=primary_pan_x,
-            primary_pan_y=primary_pan_y,
-        )
+        thumb_bytes, primary_bytes = await render_item_artwork(options)
         thumb_cache_path.write_bytes(thumb_bytes)
-        if generate_primary and not primary_cache_path.exists():
-            try:
-                primary_cache_path.write_bytes(
-                    generate_primary_cover(
-                        poster_bytes,
-                        title or "",
-                        bg_mode=bg_mode,
-                        custom_bg=custom_bg,
-                        text_color=text_color,
-                        logo_align=logo_align,
-                        logo_scale=logo_scale,
-                        darkness=darkness,
-                        studio=studio,
-                        studio_position=studio_position,
-                        new_episodes_tag=new_episodes_tag,
-                        season_finale_tag=season_finale_tag,
-                        logo_index=logo_index,
-                        logo_bytes=logo_bytes,
-                        backdrop_bytes=backdrop_bytes,
-                        primary_zoom=primary_zoom,
-                        primary_pan_x=primary_pan_x,
-                        primary_pan_y=primary_pan_y,
-                    )
-                )
-            except Exception:
-                pass
+        if primary_bytes is not None and not primary_cache_path.exists():
+            primary_cache_path.write_bytes(primary_bytes)
 
     thumb_bytes = thumb_cache_path.read_bytes()
-    thumb_status = await emby_upload_image(item_id, thumb_bytes, "Thumb")
+    thumb_status = await emby_upload_image(options["item_id"], thumb_bytes, "Thumb")
 
     primary_status = None
     primary_error = None
-    if generate_primary:
+    if options["generate_primary"]:
         try:
             if primary_cache_path.exists():
                 primary_bytes = primary_cache_path.read_bytes()
             else:
-                poster_bytes = await emby_get_image(item_id, "Primary")
-                logo_bytes = await emby_get_image_optional(item_id, "Logo", logo_index)
-                backdrop_bytes = await emby_get_image_optional(item_id, "Backdrop", backdrop_index)
-                primary_bytes = generate_primary_cover(
-                    poster_bytes,
-                    title or "",
-                    bg_mode=bg_mode,
-                    custom_bg=custom_bg,
-                    text_color=text_color,
-                    logo_align=logo_align,
-                    logo_scale=logo_scale,
-                    darkness=darkness,
-                    studio=studio,
-                    studio_position=studio_position,
-                    new_episodes_tag=new_episodes_tag,
-                    season_finale_tag=season_finale_tag,
-                    logo_index=logo_index,
-                    logo_bytes=logo_bytes,
-                    backdrop_bytes=backdrop_bytes,
-                    primary_zoom=primary_zoom,
-                    primary_pan_x=primary_pan_x,
-                    primary_pan_y=primary_pan_y,
-                )
+                _, primary_bytes = await render_item_artwork(options)
+                if primary_bytes is None:
+                    raise HTTPException(status_code=500, detail="Primary artwork could not be generated.")
                 primary_cache_path.write_bytes(primary_bytes)
-            primary_status = await emby_upload_image(item_id, primary_bytes, "Primary")
+            primary_status = await emby_upload_image(options["item_id"], primary_bytes, "Primary")
         except Exception as exc:
             primary_error = str(exc)
 
@@ -1923,11 +2065,85 @@ async def apply_to_emby(request: Request):
         "status": "applied",
         "thumb_code": thumb_status,
         "primary_code": primary_status,
-        "primary_attempted": generate_primary,
+        "primary_attempted": options["generate_primary"],
         "primary_error": primary_error,
     }
 
 
+@app.post("/api/bulk-apply/category")
+async def bulk_apply_category(request: Request):
+    body = await request.json()
+    category_id = (body.get("category_id") or "").strip()
+    category_name = (body.get("category_name") or "").strip()
+    if not category_id:
+        raise HTTPException(status_code=400, detail="Category is required.")
+
+    base_options = parse_generator_request(body)
+    items = await emby_get_all("/Items", {
+        "GenreIds": category_id,
+        "IncludeItemTypes": "Movie,Series",
+        "Recursive": "true",
+        "SortBy": "SortName",
+        "SortOrder": "Ascending",
+        "Fields": "ProductionYear",
+        "ImageTypeLimit": "1",
+        "EnableImageTypes": "Primary,Logo,Backdrop",
+    })
+    eligible_items: list[dict] = []
+    skipped_without_logo: list[str] = []
+    skipped_without_primary: list[str] = []
+    for item in items:
+        image_tags = item.get("ImageTags") or {}
+        name = item.get("Name") or "Unknown"
+        if "Primary" not in image_tags:
+            skipped_without_primary.append(name)
+            continue
+        if "Logo" not in image_tags:
+            skipped_without_logo.append(name)
+            continue
+        eligible_items.append(item)
+
+    applied: list[str] = []
+    failed: list[dict] = []
+    for item in eligible_items:
+        item_options = dict(base_options)
+        item_options["item_id"] = item["Id"]
+        item_options["title"] = item.get("Name", "")
+        if item.get("Type") != "Series":
+            item_options["new_episodes_tag"] = False
+            item_options["season_finale_tag"] = False
+        cache_key = get_generator_cache_key(item_options)
+        thumb_cache_path = get_thumb_cache_path(cache_key)
+        primary_cache_path = get_primary_cache_path(cache_key)
+        try:
+            thumb_bytes, primary_bytes = await render_item_artwork(item_options, fallback_logo_to_first=True)
+            thumb_cache_path.write_bytes(thumb_bytes)
+            await emby_upload_image(item["Id"], thumb_bytes, "Thumb")
+            if item_options["generate_primary"] and primary_bytes is not None:
+                primary_cache_path.write_bytes(primary_bytes)
+                await emby_upload_image(item["Id"], primary_bytes, "Primary")
+            applied.append(item.get("Name", ""))
+        except Exception as exc:
+            failed.append({
+                "name": item.get("Name", ""),
+                "error": str(exc),
+            })
+
+    return {
+        "status": "completed",
+        "category_id": category_id,
+        "category_name": category_name,
+        "matched_count": len(items),
+        "eligible_count": len(eligible_items),
+        "applied_count": len(applied),
+        "skipped_without_logo_count": len(skipped_without_logo),
+        "skipped_without_primary_count": len(skipped_without_primary),
+        "failed_count": len(failed),
+        "failed": failed[:12],
+        "applied": applied[:12],
+    }
+
+
 @app.get("/api/config")
 async def get_config():
     return {
diff --git a/docker-compose.yml b/docker-compose.yml
index 1739a14..da34e5f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,11 @@ services:
     environment:
       - EMBY_URL=http://your-emby-server:8096
       - EMBY_API_KEY=your-api-key-here
+      # Optional external artwork providers:
+      # - TMDB_BEARER_TOKEN=your-tmdb-read-access-token
+      # - TMDB_API_KEY=your-tmdb-v3-api-key
+      # - GOOGLE_CUSTOM_SEARCH_API_KEY=your-google-api-key
+      # - GOOGLE_CUSTOM_SEARCH_ENGINE_ID=your-google-search-engine-id
     volumes:
       - ./output:/app/output
       - ./cache:/app/cache
diff --git a/emby-cover.code-workspace b/emby-cover.code-workspace
new file mode 100644
index 0000000..362d7c2
--- /dev/null
+++ b/emby-cover.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}
\ No newline at end of file
diff --git a/templates/airing.html b/templates/airing.html
index d5ad7bc..57c8a93 100644
--- a/templates/airing.html
+++ b/templates/airing.html
@@ -387,6 +387,7 @@
   <h1>Emby Thumbnail Generator</h1>
   <nav class="header-nav">
     <a class="nav-link" href="/">Generator</a>
+    <a class="nav-link" href="/collections">Collections</a>
     <a class="nav-link active" href="/airing">Airing</a>
   </nav>
   <div class="header-status">
diff --git a/templates/collections.html b/templates/collections.html
new file mode 100644
index 0000000..9252c91
--- /dev/null
+++ b/templates/collections.html
@@ -0,0 +1,1786 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Emby Collection Artwork</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0d0f12;
+    --surface: #13171f;
+    --surface2: #1a2030;
+    --surface3: #222840;
+    --border: #252d3d;
+    --border-active: #4a6fff;
+    --text: #e8ecf4;
+    --text-2: #8892a8;
+    --text-3: #4e5a70;
+    --accent: #4a6fff;
+    --accent-h: #6384ff;
+    --accent-glow: rgba(74,111,255,0.12);
+    --green: #34d399;
+    --green-bg: rgba(52,211,153,0.08);
+    --red: #f87171;
+    --red-bg: rgba(248,113,113,0.09);
+    --r: 10px;
+    --r-lg: 14px;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    min-height: 100vh;
+    min-height: 100svh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: 'DM Sans', sans-serif;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .header {
+    height: 56px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+    flex-shrink: 0;
+  }
+  .header-logo {
+    width: 30px;
+    height: 30px;
+    border-radius: 7px;
+    display: grid;
+    place-items: center;
+    background: var(--accent);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .header h1 {
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+  }
+  .header-nav {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 10px;
+  }
+  .nav-link {
+    padding: 6px 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    color: var(--text-2);
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: 600;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .nav-link:hover {
+    background: var(--surface2);
+    color: var(--text);
+  }
+  .nav-link.active {
+    background: var(--accent-glow);
+    border-color: var(--accent);
+    color: var(--text);
+  }
+  .header-status {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 12px;
+    color: var(--text-2);
+  }
+  .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--green);
+    box-shadow: 0 0 6px var(--green);
+  }
+  .dot.off {
+    background: var(--red);
+    box-shadow: 0 0 6px var(--red);
+  }
+
+  .body {
+    flex: 1;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 320px minmax(0, 1fr);
+  }
+
+  .sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    border-right: 1px solid var(--border);
+    background: var(--surface);
+  }
+  .search-wrap {
+    padding: 14px;
+    border-bottom: 1px solid var(--border);
+  }
+  .search-inner {
+    position: relative;
+  }
+  .search-inner svg {
+    position: absolute;
+    left: 11px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-3);
+    pointer-events: none;
+  }
+  .search-input {
+    width: 100%;
+    padding: 9px 12px 9px 36px;
+    background: var(--surface2);
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 13px;
+    outline: none;
+  }
+  .search-input:focus {
+    border-color: var(--border-active);
+    box-shadow: 0 0 0 3px var(--accent-glow);
+  }
+  .results-toolbar,
+  .results-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface);
+    flex-shrink: 0;
+  }
+  .results-footer {
+    justify-content: flex-end;
+    border-top: 1px solid var(--border);
+    border-bottom: 0;
+    margin-top: auto;
+  }
+  .results-count,
+  .results-page {
+    font-size: 11px;
+    color: var(--text-2);
+    font-family: 'JetBrains Mono', monospace;
+  }
+  .results {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .result-item {
+    display: flex;
+    align-items: center;
+    gap: 11px;
+    padding: 9px 10px;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background 0.12s, border-color 0.12s;
+  }
+  .result-item:hover {
+    background: var(--surface2);
+  }
+  .result-item.active {
+    background: var(--accent-glow);
+    border-color: var(--accent);
+  }
+  .result-poster {
+    width: 36px;
+    height: 54px;
+    border-radius: 5px;
+    object-fit: cover;
+    background: var(--surface2);
+    flex-shrink: 0;
+  }
+  .result-info {
+    min-width: 0;
+    flex: 1;
+  }
+  .result-name {
+    font-size: 13px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .result-sub {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 2px;
+    font-size: 11px;
+    color: var(--text-2);
+  }
+  .tag {
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--surface3);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .empty {
+    padding: 42px 20px;
+    text-align: center;
+    color: var(--text-3);
+    font-size: 13px;
+  }
+
+  .pager-btn,
+  .btn {
+    min-height: 36px;
+    padding: 0 14px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
+  }
+  .pager-btn:hover:not(:disabled),
+  .btn:hover:not(:disabled) {
+    background: var(--surface3);
+  }
+  .pager-btn:disabled,
+  .btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+  .btn-primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  .btn-primary:hover:not(:disabled) {
+    background: var(--accent-h);
+  }
+  .btn-green {
+    background: var(--green);
+    border-color: var(--green);
+    color: #08120e;
+  }
+  .btn-ghost {
+    background: transparent;
+  }
+
+  .main {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    padding: 20px 22px 24px;
+  }
+  .hero {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+  }
+  .hero-copy h2 {
+    margin: 0 0 8px;
+    font-size: clamp(24px, 3vw, 34px);
+    line-height: 1;
+    letter-spacing: -0.04em;
+  }
+  .hero-copy p {
+    margin: 0;
+    max-width: 780px;
+    color: var(--text-2);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+  .hero-badge {
+    padding: 8px 12px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: linear-gradient(180deg, rgba(26,32,48,0.95), rgba(19,23,31,0.95));
+    color: var(--text-2);
+    font-size: 11px;
+    font-family: 'JetBrains Mono', monospace;
+    white-space: nowrap;
+  }
+
+  .workspace {
+    display: grid;
+    grid-template-columns: 292px minmax(0, 1fr);
+    gap: 18px;
+    min-height: 0;
+  }
+  .panel {
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
+    background: linear-gradient(180deg, rgba(19,23,31,0.98), rgba(13,15,18,0.98));
+    overflow: hidden;
+  }
+  .panel-head {
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+  }
+  .panel-head h3 {
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+  .panel-head span {
+    color: var(--text-2);
+    font-size: 11px;
+  }
+  .panel-body {
+    padding: 16px;
+  }
+
+  .collection-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 14px;
+  }
+  .collection-name {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1.05;
+    letter-spacing: -0.04em;
+  }
+  .collection-sub {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    color: var(--text-2);
+    font-size: 12px;
+  }
+
+  .asset-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+  .asset-card {
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    border-radius: 12px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    cursor: pointer;
+    transition: border-color 0.12s, background 0.12s, transform 0.12s;
+  }
+  .asset-card:hover {
+    border-color: var(--border-active);
+  }
+  .asset-card.active {
+    border-color: var(--accent);
+    background: rgba(74,111,255,0.12);
+  }
+  .asset-card-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .asset-title {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .asset-pill {
+    padding: 3px 7px;
+    border-radius: 999px;
+    background: rgba(52,211,153,0.12);
+    color: var(--green);
+    font-size: 10px;
+    font-weight: 700;
+  }
+  .asset-pill.off {
+    background: rgba(136,146,168,0.14);
+    color: var(--text-3);
+  }
+  .asset-frame {
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    background: var(--bg);
+    border: 1px solid rgba(255,255,255,0.05);
+  }
+  .asset-frame.thumb {
+    aspect-ratio: 16 / 9;
+  }
+  .asset-frame.primary {
+    aspect-ratio: 2 / 3;
+  }
+  .asset-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: none;
+  }
+  .asset-empty {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    padding: 12px;
+    color: var(--text-3);
+    font-size: 11px;
+  }
+
+  .dropzone {
+    border: 1px dashed var(--border);
+    border-radius: 14px;
+    padding: 14px;
+    background: rgba(26,32,48,0.5);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    transition: border-color 0.12s, background 0.12s;
+  }
+  .dropzone.drag-over {
+    border-color: var(--accent);
+    background: rgba(74,111,255,0.1);
+  }
+  .dropzone-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .dropzone-title {
+    font-size: 13px;
+    font-weight: 700;
+  }
+  .dropzone-copy p,
+  .source-status {
+    color: var(--text-2);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+  .dropzone-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .source-status strong {
+    color: var(--text);
+  }
+
+  .editor {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    min-width: 0;
+  }
+  .preview-panel {
+    padding: 18px;
+  }
+  .preview-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+  .preview-title {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  .preview-title strong {
+    font-size: 16px;
+    letter-spacing: -0.03em;
+  }
+  .preview-title span {
+    color: var(--text-2);
+    font-size: 12px;
+  }
+  .preview-meta {
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface2);
+    color: var(--text-2);
+    font-size: 11px;
+    font-family: 'JetBrains Mono', monospace;
+    white-space: nowrap;
+  }
+  .preview-shell {
+    display: grid;
+    place-items: center;
+    min-height: 320px;
+    border: 1px solid var(--border);
+    border-radius: 18px;
+    background:
+      radial-gradient(circle at top right, rgba(74,111,255,0.18), transparent 34%),
+      linear-gradient(180deg, rgba(26,32,48,0.7), rgba(13,15,18,0.92));
+    padding: 20px;
+  }
+  .preview-placeholder {
+    color: var(--text-3);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    justify-content: center;
+  }
+  .preview-frame {
+    position: relative;
+    width: min(100%, 860px);
+    aspect-ratio: 16 / 9;
+    border-radius: 18px;
+    overflow: hidden;
+    background: var(--surface2);
+    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
+    display: none;
+    cursor: grab;
+    touch-action: none;
+  }
+  .preview-frame.primary {
+    width: min(100%, 360px);
+    aspect-ratio: 2 / 3;
+  }
+  .preview-frame.visible {
+    display: block;
+  }
+  .preview-frame.dragging {
+    cursor: grabbing;
+  }
+  .preview-frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .preview-tools,
+  .preview-zoom {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .preview-tools {
+    top: 12px;
+    left: 12px;
+    padding: 7px 10px;
+    border-radius: 999px;
+    background: rgba(0,0,0,0.56);
+    border: 1px solid rgba(255,255,255,0.1);
+    backdrop-filter: blur(8px);
+  }
+  .preview-zoom {
+    top: 12px;
+    right: 12px;
+  }
+  .mini-link {
+    border: 0;
+    background: transparent;
+    color: var(--accent-h);
+    font: inherit;
+    font-size: 11px;
+    font-weight: 700;
+    cursor: pointer;
+    padding: 0;
+  }
+  .mini-link:hover {
+    color: #8fa4ff;
+  }
+  .preview-zoom-btn {
+    width: 32px;
+    height: 32px;
+    border: 1px solid rgba(255,255,255,0.14);
+    border-radius: 999px;
+    background: rgba(0,0,0,0.58);
+    color: rgba(255,255,255,0.92);
+    font: inherit;
+    font-size: 18px;
+    line-height: 1;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+  }
+  .preview-zoom-btn:hover {
+    background: rgba(0,0,0,0.72);
+  }
+  .preview-hint {
+    position: absolute;
+    left: 50%;
+    bottom: 12px;
+    transform: translateX(-50%);
+    padding: 7px 10px;
+    border-radius: 999px;
+    background: rgba(0,0,0,0.58);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.88);
+    font-size: 11px;
+    font-weight: 600;
+    pointer-events: none;
+    backdrop-filter: blur(8px);
+    white-space: nowrap;
+  }
+  .loading-cover {
+    position: absolute;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(13,15,18,0.82);
+    z-index: 3;
+  }
+  .loading-cover.on {
+    display: flex;
+  }
+
+  .controls-panel {
+    padding: 16px 18px 18px;
+  }
+  .control-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 14px;
+  }
+  .control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .control-group label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-2);
+  }
+  .span-12 { grid-column: span 12; }
+  .span-6 { grid-column: span 6; }
+  .span-4 { grid-column: span 4; }
+  .span-3 { grid-column: span 3; }
+
+  .ctrl-input,
+  .ctrl-textarea,
+  .ctrl-select {
+    width: 100%;
+    min-height: 38px;
+    padding: 9px 11px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    color: var(--text);
+    font-family: inherit;
+    font-size: 13px;
+    outline: none;
+  }
+  .ctrl-input:focus,
+  .ctrl-textarea:focus,
+  .ctrl-select:focus {
+    border-color: var(--border-active);
+    box-shadow: 0 0 0 3px var(--accent-glow);
+  }
+  .ctrl-textarea {
+    min-height: 94px;
+    resize: vertical;
+    line-height: 1.45;
+  }
+  .ctrl-select option {
+    background: var(--surface);
+  }
+
+  .picker-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+  .picker-row input[type="color"] {
+    width: 42px;
+    height: 38px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    cursor: pointer;
+    padding: 2px;
+  }
+  .picker-row input[type="text"] {
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .segmented {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .seg-btn {
+    min-height: 38px;
+    padding: 0 12px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    color: var(--text-2);
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+  }
+  .seg-btn:hover {
+    background: var(--surface3);
+  }
+  .seg-btn.active {
+    background: var(--accent-glow);
+    border-color: var(--accent);
+    color: var(--text);
+  }
+
+  .slider-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .slider-step {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    background: var(--surface2);
+    color: var(--text);
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .slider-step:hover {
+    background: var(--surface3);
+    border-color: var(--border-active);
+  }
+  .slider-wrap input[type="range"] {
+    width: 100%;
+    accent-color: var(--accent);
+    cursor: pointer;
+  }
+  .slider-val {
+    min-width: 44px;
+    text-align: right;
+    color: var(--text-2);
+    font-size: 11px;
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 18px;
+    flex-wrap: wrap;
+  }
+
+  .spinner {
+    width: 32px;
+    height: 32px;
+    border: 2.5px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  .toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 11px 18px;
+    border-radius: var(--r);
+    font-size: 13px;
+    font-weight: 500;
+    z-index: 200;
+    transform: translateY(80px);
+    opacity: 0;
+    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
+    pointer-events: none;
+  }
+  .toast.show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  .toast.ok {
+    background: var(--green-bg);
+    border: 1px solid var(--green);
+    color: var(--green);
+  }
+  .toast.err {
+    background: var(--red-bg);
+    border: 1px solid var(--red);
+    color: var(--red);
+  }
+
+  @media (max-width: 1280px) {
+    .workspace {
+      grid-template-columns: 260px minmax(0, 1fr);
+    }
+    .control-grid {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .span-6 { grid-column: span 8; }
+    .span-4 { grid-column: span 4; }
+    .span-3 { grid-column: span 4; }
+  }
+
+  @media (max-width: 980px) {
+    .body {
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(220px, 34vh) minmax(0, 1fr);
+    }
+    .sidebar {
+      border-right: 0;
+      border-bottom: 1px solid var(--border);
+    }
+    .workspace {
+      grid-template-columns: 1fr;
+    }
+    .hero {
+      flex-direction: column;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .header {
+      padding: 0 14px;
+      gap: 10px;
+    }
+    .header-nav {
+      gap: 6px;
+      margin-left: 2px;
+    }
+    .nav-link {
+      padding: 6px 8px;
+    }
+    .main {
+      padding: 16px 14px 20px;
+    }
+    .control-grid {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+    .span-12,
+    .span-6,
+    .span-4,
+    .span-3 {
+      grid-column: span 1;
+    }
+    .actions {
+      justify-content: stretch;
+    }
+    .actions .btn {
+      width: 100%;
+    }
+  }
+</style>
+</head>
+<body>
+
+<header class="header">
+  <div class="header-logo">TG</div>
+  <h1>Emby Thumbnail Generator</h1>
+  <nav class="header-nav">
+    <a class="nav-link" href="/">Generator</a>
+    <a class="nav-link active" href="/collections">Collections</a>
+    <a class="nav-link" href="/airing">Airing</a>
+  </nav>
+  <div class="header-status">
+    <span class="dot" id="statusDot"></span>
+    <span id="statusText">Checking…</span>
+  </div>
+</header>
+
+<div class="body">
+  <aside class="sidebar">
+    <div class="search-wrap">
+      <div class="search-inner">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input class="search-input" id="searchInput" type="text" placeholder="Search collections…" autocomplete="off">
+      </div>
+    </div>
+    <div class="results-toolbar">
+      <div class="results-count" id="resultsCount">Loading…</div>
+      <div class="results-page" id="resultsPage"></div>
+    </div>
+    <div class="results" id="resultsList">
+      <div class="empty"><div class="spinner" style="margin:0 auto 10px"></div>Loading collections…</div>
+    </div>
+    <div class="results-footer">
+      <button class="pager-btn" id="btnPrevPage" disabled>Previous</button>
+      <button class="pager-btn" id="btnNextPage" disabled>Next</button>
+    </div>
+  </aside>
+
+  <main class="main">
+    <section class="hero">
+      <div class="hero-copy">
+        <h2>Collection Artwork</h2>
+        <p>Select an Emby collection, switch between `Thumb` and `Primary`, then use either the current artwork or a dropped image as the base. The editor lets you crop, darken, and overlay custom text before pushing the result back to Emby.</p>
+      </div>
+      <div class="hero-badge" id="sourceBadge">Waiting for collection</div>
+    </section>
+
+    <section class="workspace">
+      <div class="panel">
+        <div class="panel-head">
+          <h3>Collection</h3>
+          <span id="selectedTargetNote">Editing Thumb</span>
+        </div>
+        <div class="panel-body">
+          <div class="collection-meta">
+            <div class="collection-name" id="collectionName">Pick a collection</div>
+            <div class="collection-sub" id="collectionMeta">
+              <span class="tag">BoxSet</span>
+              <span>No selection yet</span>
+            </div>
+          </div>
+
+          <div class="asset-grid">
+            <button class="asset-card active" id="thumbCard" type="button" data-target="Thumb">
+              <div class="asset-card-head">
+                <span class="asset-title">Thumb</span>
+                <span class="asset-pill off" id="thumbState">Missing</span>
+              </div>
+              <div class="asset-frame thumb">
+                <img id="thumbCurrentImg" alt="">
+                <div class="asset-empty" id="thumbEmpty">No thumb artwork yet</div>
+              </div>
+            </button>
+
+            <button class="asset-card" id="primaryCard" type="button" data-target="Primary">
+              <div class="asset-card-head">
+                <span class="asset-title">Primary</span>
+                <span class="asset-pill off" id="primaryState">Missing</span>
+              </div>
+              <div class="asset-frame primary">
+                <img id="primaryCurrentImg" alt="">
+                <div class="asset-empty" id="primaryEmpty">No primary artwork yet</div>
+              </div>
+            </button>
+          </div>
+
+          <div class="dropzone" id="dropzone">
+            <div class="dropzone-copy">
+              <div class="dropzone-title">Upload or drop a base image</div>
+              <p>Drop a JPG, PNG, or WEBP here to use it as the background for the current target. If you clear it, the editor falls back to the collection’s existing artwork.</p>
+            </div>
+            <div class="source-status" id="sourceStatus">Using current artwork when available.</div>
+            <div class="dropzone-actions">
+              <button class="btn btn-primary" id="btnChooseImage" type="button">Choose image</button>
+              <button class="btn btn-ghost" id="btnClearImage" type="button" disabled>Clear upload</button>
+            </div>
+            <input id="uploadInput" type="file" accept="image/*" hidden>
+          </div>
+        </div>
+      </div>
+
+      <div class="editor">
+        <div class="panel preview-panel">
+          <div class="preview-top">
+            <div class="preview-title">
+              <strong id="previewHeading">Preview</strong>
+              <span id="previewSub">Select a collection to start editing.</span>
+            </div>
+            <div class="preview-meta" id="previewMeta">100% · X 0 · Y 0</div>
+          </div>
+
+          <div class="preview-shell">
+            <div class="preview-placeholder" id="previewPlaceholder">
+              <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.1"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m8 8 8 8m0-8-8 8"/></svg>
+              <div>Select a collection from the left to build custom artwork.</div>
+            </div>
+
+            <div class="preview-frame" id="previewFrame" title="Drag to reposition the crop. Use the mouse wheel to zoom.">
+              <img id="previewImg" alt="">
+              <div class="preview-tools">
+                <button class="mini-link" id="btnResetCrop" type="button">Reset</button>
+              </div>
+              <div class="preview-zoom">
+                <button class="preview-zoom-btn" id="btnPreviewZoomOut" type="button" aria-label="Zoom out">-</button>
+                <button class="preview-zoom-btn" id="btnPreviewZoomIn" type="button" aria-label="Zoom in">+</button>
+              </div>
+              <div class="preview-hint">Drag to position • Wheel to zoom</div>
+              <div class="loading-cover" id="loadingCover"><div class="spinner"></div></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel controls-panel">
+          <div class="control-grid">
+            <div class="control-group span-12">
+              <label for="overlayText">Overlay Text</label>
+              <textarea class="ctrl-textarea" id="overlayText" placeholder="Collection title"></textarea>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Artwork Target</label>
+              <div class="segmented" id="targetButtons">
+                <button class="seg-btn active" type="button" data-target="Thumb">Thumb</button>
+                <button class="seg-btn" type="button" data-target="Primary">Primary</button>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Text Alignment</label>
+              <div class="segmented" id="alignButtons">
+                <button class="seg-btn" type="button" data-align="left">Left</button>
+                <button class="seg-btn active" type="button" data-align="center">Center</button>
+                <button class="seg-btn" type="button" data-align="right">Right</button>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Text Position</label>
+              <div class="segmented" id="positionButtons">
+                <button class="seg-btn" type="button" data-position="top">Top</button>
+                <button class="seg-btn" type="button" data-position="center">Center</button>
+                <button class="seg-btn active" type="button" data-position="bottom">Bottom</button>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Text Colour</label>
+              <div class="picker-row">
+                <input id="textColorPicker" type="color" value="#ffffff">
+                <input class="ctrl-input" id="textColorText" type="text" value="#FFFFFF" maxlength="7">
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Text Size</label>
+              <div class="slider-wrap">
+                <button class="slider-step" id="btnTextScaleDown" type="button">-</button>
+                <input id="textScaleSlider" type="range" min="70" max="180" value="100">
+                <button class="slider-step" id="btnTextScaleUp" type="button">+</button>
+                <span class="slider-val" id="textScaleVal">100%</span>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Darkness</label>
+              <div class="slider-wrap">
+                <input id="darknessSlider" type="range" min="0" max="85" value="18">
+                <span class="slider-val" id="darknessVal">18%</span>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Zoom</label>
+              <div class="slider-wrap">
+                <button class="slider-step" id="btnZoomOut" type="button">-</button>
+                <input id="zoomSlider" type="range" min="100" max="260" value="100">
+                <button class="slider-step" id="btnZoomIn" type="button">+</button>
+                <span class="slider-val" id="zoomVal">100%</span>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>X Position</label>
+              <div class="slider-wrap">
+                <input id="panXSlider" type="range" min="-100" max="100" value="0">
+                <span class="slider-val" id="panXVal">0</span>
+              </div>
+            </div>
+
+            <div class="control-group span-4">
+              <label>Y Position</label>
+              <div class="slider-wrap">
+                <input id="panYSlider" type="range" min="-100" max="100" value="0">
+                <span class="slider-val" id="panYVal">0</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="actions">
+            <button class="btn btn-ghost" id="btnRegenerate" type="button" disabled>Regenerate</button>
+            <button class="btn btn-primary" id="btnGenerate" type="button" disabled>Generate</button>
+            <button class="btn btn-green" id="btnApply" type="button" disabled>Apply Thumb to Emby</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const state = {
+  item: null,
+  targetType: 'Thumb',
+  artwork: {
+    thumb: { exists: false, url: null },
+    primary: { exists: false, url: null },
+  },
+  uploadBgId: null,
+  uploadFileName: '',
+  generated: false,
+  cacheKey: null,
+  searchQuery: '',
+  searchStart: 0,
+  searchLimit: 24,
+  searchTotal: 0,
+  searchController: null,
+};
+
+const $ = selector => document.querySelector(selector);
+const searchInput = $('#searchInput');
+const resultsList = $('#resultsList');
+const resultsCount = $('#resultsCount');
+const resultsPage = $('#resultsPage');
+const btnPrevPage = $('#btnPrevPage');
+const btnNextPage = $('#btnNextPage');
+const collectionName = $('#collectionName');
+const collectionMeta = $('#collectionMeta');
+const thumbCard = $('#thumbCard');
+const primaryCard = $('#primaryCard');
+const thumbCurrentImg = $('#thumbCurrentImg');
+const primaryCurrentImg = $('#primaryCurrentImg');
+const thumbEmpty = $('#thumbEmpty');
+const primaryEmpty = $('#primaryEmpty');
+const thumbState = $('#thumbState');
+const primaryState = $('#primaryState');
+const selectedTargetNote = $('#selectedTargetNote');
+const dropzone = $('#dropzone');
+const sourceStatus = $('#sourceStatus');
+const sourceBadge = $('#sourceBadge');
+const uploadInput = $('#uploadInput');
+const btnChooseImage = $('#btnChooseImage');
+const btnClearImage = $('#btnClearImage');
+const previewHeading = $('#previewHeading');
+const previewSub = $('#previewSub');
+const previewMeta = $('#previewMeta');
+const previewPlaceholder = $('#previewPlaceholder');
+const previewFrame = $('#previewFrame');
+const previewImg = $('#previewImg');
+const loadingCover = $('#loadingCover');
+const overlayText = $('#overlayText');
+const targetButtons = $('#targetButtons');
+const alignButtons = $('#alignButtons');
+const positionButtons = $('#positionButtons');
+const textColorPicker = $('#textColorPicker');
+const textColorText = $('#textColorText');
+const textScaleSlider = $('#textScaleSlider');
+const textScaleVal = $('#textScaleVal');
+const darknessSlider = $('#darknessSlider');
+const darknessVal = $('#darknessVal');
+const zoomSlider = $('#zoomSlider');
+const zoomVal = $('#zoomVal');
+const panXSlider = $('#panXSlider');
+const panXVal = $('#panXVal');
+const panYSlider = $('#panYSlider');
+const panYVal = $('#panYVal');
+const btnTextScaleDown = $('#btnTextScaleDown');
+const btnTextScaleUp = $('#btnTextScaleUp');
+const btnZoomOut = $('#btnZoomOut');
+const btnZoomIn = $('#btnZoomIn');
+const btnPreviewZoomOut = $('#btnPreviewZoomOut');
+const btnPreviewZoomIn = $('#btnPreviewZoomIn');
+const btnResetCrop = $('#btnResetCrop');
+const btnGenerate = $('#btnGenerate');
+const btnRegenerate = $('#btnRegenerate');
+const btnApply = $('#btnApply');
+const toast = $('#toast');
+
+let searchTimer;
+let previewTimer;
+let generateController = null;
+let generateRequestId = 0;
+let dragState = null;
+let textAlign = 'center';
+let textPosition = 'bottom';
+
+function esc(value) {
+  const div = document.createElement('div');
+  div.textContent = value;
+  return div.innerHTML;
+}
+
+function showToast(message, type) {
+  toast.textContent = message;
+  toast.className = `toast ${type} show`;
+  setTimeout(() => toast.classList.remove('show'), 2800);
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function updatePreviewMeta() {
+  zoomVal.textContent = `${zoomSlider.value}%`;
+  panXVal.textContent = panXSlider.value;
+  panYVal.textContent = panYSlider.value;
+  textScaleVal.textContent = `${textScaleSlider.value}%`;
+  darknessVal.textContent = `${darknessSlider.value}%`;
+  previewMeta.textContent = `${zoomSlider.value}% · X ${panXSlider.value} · Y ${panYSlider.value}`;
+}
+
+function getSelectedTextAlign() {
+  return textAlign;
+}
+
+function getSelectedTextPosition() {
+  return textPosition;
+}
+
+function getCurrentSourceLabel() {
+  if (state.uploadBgId) {
+    return `Using uploaded image${state.uploadFileName ? `: ${state.uploadFileName}` : ''}`;
+  }
+  const target = state.targetType.toLowerCase();
+  const targetExists = state.targetType === 'Thumb' ? state.artwork.thumb.exists : state.artwork.primary.exists;
+  const fallbackExists = state.targetType === 'Thumb' ? state.artwork.primary.exists : state.artwork.thumb.exists;
+  if (targetExists) {
+    return `Using current ${target} artwork as the base`;
+  }
+  if (fallbackExists) {
+    return `Using current ${state.targetType === 'Thumb' ? 'primary' : 'thumb'} artwork as the base`;
+  }
+  return 'No existing artwork found. Preview uses a generated fallback background until you upload an image.';
+}
+
+function updateSourceUi() {
+  sourceStatus.innerHTML = `<strong>Source:</strong> ${esc(getCurrentSourceLabel())}`;
+  sourceBadge.textContent = state.item ? getCurrentSourceLabel() : 'Waiting for collection';
+  btnClearImage.disabled = !state.uploadBgId;
+}
+
+function updateApplyButton() {
+  btnApply.textContent = state.targetType === 'Primary' ? 'Apply Primary to Emby' : 'Apply Thumb to Emby';
+  selectedTargetNote.textContent = `Editing ${state.targetType}`;
+}
+
+function updateTargetUi() {
+  thumbCard.classList.toggle('active', state.targetType === 'Thumb');
+  primaryCard.classList.toggle('active', state.targetType === 'Primary');
+  targetButtons.querySelectorAll('[data-target]').forEach(button => {
+    button.classList.toggle('active', button.dataset.target === state.targetType);
+  });
+  previewFrame.classList.toggle('primary', state.targetType === 'Primary');
+  updateApplyButton();
+  updateSourceUi();
+}
+
+function updateArtworkCard(kind, payload) {
+  const isThumb = kind === 'thumb';
+  const img = isThumb ? thumbCurrentImg : primaryCurrentImg;
+  const empty = isThumb ? thumbEmpty : primaryEmpty;
+  const pill = isThumb ? thumbState : primaryState;
+  const frame = img.closest('.asset-frame');
+  frame.classList.toggle('thumb', isThumb);
+  frame.classList.toggle('primary', !isThumb);
+  if (payload.exists && payload.url) {
+    img.src = `${payload.url}&t=${Date.now()}`;
+    img.style.display = 'block';
+    empty.style.display = 'none';
+    pill.textContent = 'Exists';
+    pill.classList.remove('off');
+  } else {
+    img.removeAttribute('src');
+    img.style.display = 'none';
+    empty.style.display = '';
+    pill.textContent = 'Missing';
+    pill.classList.add('off');
+  }
+}
+
+function updateArtworkUi() {
+  updateArtworkCard('thumb', state.artwork.thumb);
+  updateArtworkCard('primary', state.artwork.primary);
+  updateSourceUi();
+}
+
+function updateSelectionUi() {
+  if (!state.item) {
+    collectionName.textContent = 'Pick a collection';
+    collectionMeta.innerHTML = '<span class="tag">BoxSet</span><span>No selection yet</span>';
+    previewHeading.textContent = 'Preview';
+    previewSub.textContent = 'Select a collection to start editing.';
+    btnGenerate.disabled = true;
+    btnRegenerate.disabled = true;
+    btnApply.disabled = true;
+    updateTargetUi();
+    return;
+  }
+
+  collectionName.textContent = state.item.name;
+  collectionMeta.innerHTML = `
+    <span class="tag">${esc(state.item.type || 'BoxSet')}</span>
+    <span>${state.item.child_count || 0} item${state.item.child_count === 1 ? '' : 's'}</span>
+  `;
+  previewHeading.textContent = `${state.item.name} · ${state.targetType}`;
+  previewSub.textContent = 'Drag to adjust the crop, then apply the generated artwork back to Emby.';
+  btnGenerate.disabled = false;
+  btnRegenerate.disabled = !state.generated;
+  btnApply.disabled = !state.generated;
+  updateTargetUi();
+}
+
+function setGenerated(value) {
+  state.generated = value;
+  btnRegenerate.disabled = !value || !state.item;
+  btnApply.disabled = !value || !state.item;
+}
+
+async function checkConnection() {
+  try {
+    const response = await fetch('/api/config');
+    const data = await response.json();
+    if (data.connected) {
+      $('#statusText').textContent = 'Connected to Emby';
+    } else {
+      $('#statusDot').classList.add('off');
+      $('#statusText').textContent = 'No API key';
+    }
+  } catch {
+    $('#statusDot').classList.add('off');
+    $('#statusText').textContent = 'Connection error';
+  }
+}
+
+function updatePager(total, start, limit) {
+  resultsCount.textContent = total
+    ? `${Math.min(start + 1, total)}-${Math.min(start + limit, total)} of ${total}`
+    : '0 results';
+  resultsPage.textContent = total ? `Page ${Math.floor(start / limit) + 1}` : '';
+  btnPrevPage.disabled = start === 0;
+  btnNextPage.disabled = start + limit >= total;
+}
+
+async function loadCollections(query = '', start = 0) {
+  if (state.searchController) state.searchController.abort();
+  const controller = new AbortController();
+  state.searchController = controller;
+  state.searchQuery = query;
+  state.searchStart = start;
+  resultsList.innerHTML = '<div class="empty"><div class="spinner" style="margin:0 auto 10px"></div>Loading collections…</div>';
+  try {
+    const response = await fetch(`/api/collections?q=${encodeURIComponent(query)}&start=${start}&limit=${state.searchLimit}`, {
+      signal: controller.signal,
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.detail || `${response.status}`);
+    if (state.searchController !== controller) return;
+    state.searchTotal = data.total;
+    state.searchStart = data.start;
+    if (!data.items.length) {
+      resultsList.innerHTML = `<div class="empty">${query ? 'No matching collections.' : 'No collections found.'}</div>`;
+      updatePager(0, 0, state.searchLimit);
+      return;
+    }
+    resultsList.innerHTML = data.items.map(item => `
+      <div class="result-item ${state.item?.id === item.id ? 'active' : ''}" data-item='${JSON.stringify(item).replace(/'/g, '&#39;')}'>
+        ${item.poster_url
+          ? `<img class="result-poster" src="${item.poster_url}" alt="" loading="lazy" decoding="async" width="36" height="54">`
+          : '<div class="result-poster" aria-hidden="true"></div>'}
+        <div class="result-info">
+          <div class="result-name">${esc(item.name)}</div>
+          <div class="result-sub">
+            <span class="tag">Collection</span>
+            <span>${item.child_count || 0} item${item.child_count === 1 ? '' : 's'}</span>
+          </div>
+        </div>
+      </div>
+    `).join('');
+    updatePager(data.total, data.start, data.limit);
+    resultsList.querySelectorAll('.result-item').forEach(element => {
+      element.addEventListener('click', () => selectCollection(JSON.parse(element.dataset.item)));
+    });
+  } catch (error) {
+    if (error.name === 'AbortError') return;
+    resultsList.innerHTML = `<div class="empty">Failed to load collections: ${esc(error.message)}</div>`;
+    updatePager(0, 0, state.searchLimit);
+  } finally {
+    if (state.searchController === controller) state.searchController = null;
+  }
+}
+
+async function refreshArtwork() {
+  if (!state.item) return;
+  try {
+    const response = await fetch(`/api/collections/${state.item.id}/artwork`);
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.detail || `${response.status}`);
+    state.artwork = {
+      thumb: data.thumb ?? { exists: false, url: null },
+      primary: data.primary ?? { exists: false, url: null },
+    };
+    updateArtworkUi();
+  } catch {
+    state.artwork = {
+      thumb: { exists: false, url: null },
+      primary: { exists: false, url: null },
+    };
+    updateArtworkUi();
+  }
+}
+
+function schedulePreview() {
+  if (!state.item) return;
+  clearTimeout(previewTimer);
+  setGenerated(false);
+  previewTimer = setTimeout(() => generatePreview({ silent: true }), 180);
+}
+
+function setCropValues({ zoom, panX, panY }, { regenerate = false } = {}) {
+  if (zoom != null) zoomSlider.value = String(clamp(Math.round(zoom), 100, 260));
+  if (panX != null) panXSlider.value = String(clamp(Math.round(panX), -100, 100));
+  if (panY != null) panYSlider.value = String(clamp(Math.round(panY), -100, 100));
+  updatePreviewMeta();
+  if (regenerate) schedulePreview();
+}
+
+function setTextScale(value, { regenerate = false } = {}) {
+  textScaleSlider.value = String(clamp(Math.round(value), 70, 180));
+  updatePreviewMeta();
+  if (regenerate) schedulePreview();
+}
+
+function setTarget(targetType) {
+  if (!targetType || targetType === state.targetType) return;
+  state.targetType = targetType;
+  state.cacheKey = null;
+  setGenerated(false);
+  updateSelectionUi();
+  updateSourceUi();
+  if (state.item) generatePreview({ silent: true });
+}
+
+async function selectCollection(item) {
+  if (state.item?.id === item.id) return;
+  state.item = item;
+  state.artwork = {
+    thumb: { exists: false, url: null },
+    primary: { exists: false, url: null },
+  };
+  state.uploadBgId = null;
+  state.uploadFileName = '';
+  state.cacheKey = null;
+  previewPlaceholder.style.display = 'none';
+  previewFrame.classList.add('visible');
+  overlayText.value = item.name;
+  setCropValues({ zoom: 100, panX: 0, panY: 0 });
+  setTextScale(100);
+  darknessSlider.value = '18';
+  textColorText.value = '#FFFFFF';
+  textColorPicker.value = '#ffffff';
+  updatePreviewMeta();
+  setGenerated(false);
+  updateSelectionUi();
+  updateArtworkUi();
+  resultsList.querySelectorAll('.result-item').forEach(element => element.classList.remove('active'));
+  resultsList.querySelector(`[data-item*='"id":"${item.id}"']`)?.classList.add('active');
+  generatePreview({ silent: true });
+  refreshArtwork();
+}
+
+async function uploadFile(file) {
+  if (!file) return;
+  const formData = new FormData();
+  formData.append('file', file);
+  btnChooseImage.disabled = true;
+  try {
+    const response = await fetch('/api/upload-background', {
+      method: 'POST',
+      body: formData,
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.detail || `${response.status}`);
+    state.uploadBgId = data.upload_id;
+    state.uploadFileName = file.name;
+    updateSourceUi();
+    showToast(`Image ready (${data.width}×${data.height})`, 'ok');
+    if (state.item) generatePreview({ silent: true });
+  } catch (error) {
+    state.uploadBgId = null;
+    state.uploadFileName = '';
+    updateSourceUi();
+    showToast(`Upload failed: ${error.message}`, 'err');
+  } finally {
+    btnChooseImage.disabled = false;
+  }
+}
+
+async function generatePreview({ silent = false } = {}) {
+  if (!state.item) return;
+  clearTimeout(previewTimer);
+  if (generateController) generateController.abort();
+  const controller = new AbortController();
+  generateController = controller;
+  const requestId = ++generateRequestId;
+  loadingCover.classList.add('on');
+  btnGenerate.disabled = true;
+  try {
+    const response = await fetch('/api/collections/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      signal: controller.signal,
+      body: JSON.stringify({
+        item_id: state.item.id,
+        title: state.item.name,
+        target_type: state.targetType,
+        text: overlayText.value.trim() || state.item.name,
+        text_color: textColorText.value,
+        text_align: getSelectedTextAlign(),
+        text_position: getSelectedTextPosition(),
+        text_scale: Number(textScaleSlider.value) / 100,
+        darkness: Number(darknessSlider.value) / 100,
+        zoom: Number(zoomSlider.value) / 100,
+        pan_x: Number(panXSlider.value) / 100,
+        pan_y: Number(panYSlider.value) / 100,
+        upload_bg_id: state.uploadBgId,
+      }),
+    });
+    if (!response.ok) {
+      let detail = `${response.status}`;
+      try {
+        const data = await response.json();
+        if (data.detail) detail = data.detail;
+      } catch {}
+      throw new Error(detail);
+    }
+    if (requestId !== generateRequestId) return;
+    state.cacheKey = response.headers.get('X-Cache-Key');
+    const blob = await response.blob();
+    if (previewImg.src.startsWith('blob:')) URL.revokeObjectURL(previewImg.src);
+    previewImg.src = URL.createObjectURL(blob);
+    setGenerated(true);
+    if (!silent) {
+      showToast(`Generated ${state.targetType.toLowerCase()} artwork`, 'ok');
+    }
+  } catch (error) {
+    if (error.name === 'AbortError') return;
+    state.cacheKey = null;
+    setGenerated(false);
+    showToast(`Failed: ${error.message}`, 'err');
+  } finally {
+    if (generateController === controller) generateController = null;
+    if (requestId === generateRequestId) {
+      loadingCover.classList.remove('on');
+      btnGenerate.disabled = !state.item;
+    }
+  }
+}
+
+async function applyArtwork() {
+  if (!state.item || !state.generated) return;
+  btnApply.disabled = true;
+  try {
+    const response = await fetch('/api/collections/apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        item_id: state.item.id,
+        title: state.item.name,
+        target_type: state.targetType,
+        text: overlayText.value.trim() || state.item.name,
+        text_color: textColorText.value,
+        text_align: getSelectedTextAlign(),
+        text_position: getSelectedTextPosition(),
+        text_scale: Number(textScaleSlider.value) / 100,
+        darkness: Number(darknessSlider.value) / 100,
+        zoom: Number(zoomSlider.value) / 100,
+        pan_x: Number(panXSlider.value) / 100,
+        pan_y: Number(panYSlider.value) / 100,
+        upload_bg_id: state.uploadBgId,
+      }),
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.detail || `${response.status}`);
+    showToast(`Applied ${data.target_type.toLowerCase()} artwork`, 'ok');
+    refreshArtwork();
+  } catch (error) {
+    showToast(`Failed: ${error.message}`, 'err');
+  } finally {
+    btnApply.disabled = !state.generated;
+  }
+}
+
+function finishDrag(pointerId = null) {
+  if (!dragState) return;
+  if (pointerId != null && dragState.pointerId !== pointerId) return;
+  try {
+    previewFrame.releasePointerCapture(dragState.pointerId);
+  } catch {}
+  previewFrame.classList.remove('dragging');
+  dragState = null;
+}
+
+searchInput.addEventListener('input', () => {
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => loadCollections(searchInput.value.trim(), 0), 180);
+});
+
+btnPrevPage.addEventListener('click', () => {
+  if (state.searchStart === 0) return;
+  loadCollections(state.searchQuery, Math.max(0, state.searchStart - state.searchLimit));
+});
+
+btnNextPage.addEventListener('click', () => {
+  if (state.searchStart + state.searchLimit >= state.searchTotal) return;
+  loadCollections(state.searchQuery, state.searchStart + state.searchLimit);
+});
+
+[thumbCard, primaryCard].forEach(card => {
+  card.addEventListener('click', () => setTarget(card.dataset.target));
+});
+
+targetButtons.querySelectorAll('[data-target]').forEach(button => {
+  button.addEventListener('click', () => setTarget(button.dataset.target));
+});
+
+alignButtons.querySelectorAll('[data-align]').forEach(button => {
+  button.addEventListener('click', () => {
+    textAlign = button.dataset.align;
+    alignButtons.querySelectorAll('[data-align]').forEach(btn => btn.classList.remove('active'));
+    button.classList.add('active');
+    schedulePreview();
+  });
+});
+
+positionButtons.querySelectorAll('[data-position]').forEach(button => {
+  button.addEventListener('click', () => {
+    textPosition = button.dataset.position;
+    positionButtons.querySelectorAll('[data-position]').forEach(btn => btn.classList.remove('active'));
+    button.classList.add('active');
+    schedulePreview();
+  });
+});
+
+overlayText.addEventListener('input', schedulePreview);
+textColorPicker.addEventListener('input', () => {
+  textColorText.value = textColorPicker.value.toUpperCase();
+  schedulePreview();
+});
+textColorText.addEventListener('input', () => {
+  if (/^#[0-9a-f]{6}$/i.test(textColorText.value)) {
+    textColorPicker.value = textColorText.value;
+    schedulePreview();
+  }
+});
+textScaleSlider.addEventListener('input', () => setTextScale(Number(textScaleSlider.value), { regenerate: true }));
+darknessSlider.addEventListener('input', () => {
+  updatePreviewMeta();
+  schedulePreview();
+});
+zoomSlider.addEventListener('input', () => setCropValues({ zoom: Number(zoomSlider.value) }, { regenerate: true }));
+panXSlider.addEventListener('input', () => setCropValues({ panX: Number(panXSlider.value) }, { regenerate: true }));
+panYSlider.addEventListener('input', () => setCropValues({ panY: Number(panYSlider.value) }, { regenerate: true }));
+btnTextScaleDown.addEventListener('click', () => setTextScale(Number(textScaleSlider.value) - 10, { regenerate: true }));
+btnTextScaleUp.addEventListener('click', () => setTextScale(Number(textScaleSlider.value) + 10, { regenerate: true }));
+btnZoomOut.addEventListener('click', () => setCropValues({ zoom: Number(zoomSlider.value) - 10 }, { regenerate: true }));
+btnZoomIn.addEventListener('click', () => setCropValues({ zoom: Number(zoomSlider.value) + 10 }, { regenerate: true }));
+btnPreviewZoomOut.addEventListener('click', () => setCropValues({ zoom: Number(zoomSlider.value) - 10 }, { regenerate: true }));
+btnPreviewZoomIn.addEventListener('click', () => setCropValues({ zoom: Number(zoomSlider.value) + 10 }, { regenerate: true }));
+btnResetCrop.addEventListener('click', () => setCropValues({ zoom: 100, panX: 0, panY: 0 }, { regenerate: true }));
+btnGenerate.addEventListener('click', () => generatePreview());
+btnRegenerate.addEventListener('click', () => generatePreview());
+btnApply.addEventListener('click', applyArtwork);
+
+previewFrame.addEventListener('pointerdown', event => {
+  if (!state.item || event.target.closest('button')) return;
+  event.preventDefault();
+  dragState = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    startPanX: Number(panXSlider.value),
+    startPanY: Number(panYSlider.value),
+  };
+  previewFrame.classList.add('dragging');
+  previewFrame.setPointerCapture(event.pointerId);
+});
+
+previewFrame.addEventListener('pointermove', event => {
+  if (!dragState || dragState.pointerId !== event.pointerId) return;
+  const rect = previewFrame.getBoundingClientRect();
+  const deltaX = event.clientX - dragState.startX;
+  const deltaY = event.clientY - dragState.startY;
+  setCropValues({
+    panX: dragState.startPanX - (deltaX / Math.max(1, rect.width)) * 200,
+    panY: dragState.startPanY - (deltaY / Math.max(1, rect.height)) * 200,
+  }, { regenerate: true });
+});
+
+previewFrame.addEventListener('pointerup', event => finishDrag(event.pointerId));
+previewFrame.addEventListener('pointercancel', event => finishDrag(event.pointerId));
+previewFrame.addEventListener('lostpointercapture', () => finishDrag());
+previewFrame.addEventListener('wheel', event => {
+  if (!state.item) return;
+  event.preventDefault();
+  const delta = event.deltaY < 0 ? 8 : -8;
+  setCropValues({ zoom: Number(zoomSlider.value) + delta }, { regenerate: true });
+}, { passive: false });
+
+btnChooseImage.addEventListener('click', () => uploadInput.click());
+uploadInput.addEventListener('change', () => {
+  const file = uploadInput.files[0];
+  if (file) uploadFile(file);
+  uploadInput.value = '';
+});
+
+btnClearImage.addEventListener('click', () => {
+  state.uploadBgId = null;
+  state.uploadFileName = '';
+  updateSourceUi();
+  schedulePreview();
+});
+
+['dragenter', 'dragover'].forEach(eventName => {
+  dropzone.addEventListener(eventName, event => {
+    event.preventDefault();
+    dropzone.classList.add('drag-over');
+  });
+});
+
+['dragleave', 'dragend', 'drop'].forEach(eventName => {
+  dropzone.addEventListener(eventName, event => {
+    event.preventDefault();
+    if (eventName !== 'drop') {
+      dropzone.classList.remove('drag-over');
+    }
+  });
+});
+
+dropzone.addEventListener('drop', event => {
+  dropzone.classList.remove('drag-over');
+  const file = event.dataTransfer?.files?.[0];
+  if (file) uploadFile(file);
+});
+
+updatePreviewMeta();
+updateSelectionUi();
+updateArtworkUi();
+checkConnection();
+loadCollections('', 0);
+</script>
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index d690511..6796350 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -362,193 +362,25 @@
     white-space: nowrap;
   }
 
-  .artwork-editor {
-    margin: 0 clamp(16px, 2.4vw, 28px) clamp(14px, 2vw, 22px);
-    border: 1px solid var(--border);
-    border-radius: var(--r-lg);
-    background: linear-gradient(135deg, rgba(26,32,48,0.92), rgba(13,15,18,0.94));
-    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
+  .upload-bg-group {
     display: none;
-    overflow: hidden;
-  }
-  .artwork-editor.visible { display: block; }
-  .editor-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    padding: 14px 16px;
-    border-bottom: 1px solid var(--border);
-  }
-  .editor-title {
-    font-size: 13px;
-    font-weight: 800;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-  .editor-subtitle {
-    margin-top: 3px;
-    color: var(--text-2);
-    font-size: 12px;
-  }
-  .editor-grid {
-    display: grid;
-    grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.2fr) minmax(220px, 0.9fr);
-    gap: 14px;
-    padding: 14px;
-  }
-  .editor-panel {
-    border: 1px solid var(--border);
-    border-radius: var(--r);
-    background: rgba(13,15,18,0.54);
-    padding: 12px;
-  }
-  .editor-panel h3 {
-    font-size: 11px;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--text-2);
-    margin-bottom: 10px;
-  }
-  .editor-source-list {
-    display: grid;
-    gap: 8px;
-  }
-  .editor-source-btn {
-    border: 1px solid var(--border);
-    border-radius: 9px;
-    padding: 9px 10px;
-    background: var(--surface2);
-    color: var(--text);
-    font: inherit;
-    font-size: 12px;
-    text-align: left;
-    cursor: pointer;
-  }
-  .editor-source-btn.active {
-    border-color: var(--accent);
-    box-shadow: 0 0 0 3px var(--accent-glow);
-  }
-  .editor-canvas-wrap {
-    display: grid;
-    place-items: center;
-    min-height: 360px;
-  }
-  .editor-canvas {
-    position: relative;
-    width: min(100%, 330px);
-    aspect-ratio: 2 / 3;
-    border-radius: 16px;
-    overflow: hidden;
-    background: #07080a;
-    border: 1px solid rgba(255,255,255,0.08);
-    box-shadow: 0 20px 70px rgba(0,0,0,0.55);
-    cursor: grab;
-    touch-action: none;
-  }
-  .editor-canvas.thumb,
-  .editor-canvas.backdrop { aspect-ratio: 16 / 9; width: min(100%, 470px); }
-  .editor-canvas.dragging { cursor: grabbing; }
-  .editor-canvas img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    display: block;
-  }
-  .editor-canvas-empty {
-    position: absolute;
-    inset: 0;
-    display: grid;
-    place-items: center;
-    color: var(--text-3);
-    font-size: 12px;
-    text-align: center;
-    padding: 20px;
-  }
-  .editor-row {
-    display: grid;
     gap: 6px;
-    margin-bottom: 10px;
-  }
-  .editor-row label {
-    color: var(--text-2);
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-  .editor-row select,
-  .editor-row input[type="text"],
-  .editor-row input[type="color"] {
-    width: 100%;
+    align-items: center;
+    margin-top: 5px;
+    padding: 5px 8px;
+    background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 8px;
-    background: var(--surface2);
-    color: var(--text);
-    padding: 8px;
-    font: inherit;
-    font-size: 12px;
   }
-  .editor-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-  .editor-note {
-    color: var(--text-2);
-    font-size: 12px;
-    line-height: 1.45;
-  }
-  .modal-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 500;
-    display: none;
-    place-items: center;
-    background: rgba(0,0,0,0.72);
-    padding: 22px;
-  }
-  .modal-backdrop.visible { display: grid; }
-  .modal-card {
-    width: min(920px, 100%);
-    max-height: min(760px, 92vh);
-    overflow: auto;
-    border: 1px solid var(--border);
-    border-radius: 18px;
-    background: var(--surface);
-    box-shadow: 0 24px 90px rgba(0,0,0,0.6);
-  }
-  .modal-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 16px;
-    border-bottom: 1px solid var(--border);
-  }
-  .modal-body { padding: 16px; }
-  .image-search-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 12px;
-    margin-top: 14px;
-  }
-  .image-result {
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    background: var(--surface2);
-    overflow: hidden;
-  }
-  .image-result img {
-    width: 100%;
-    aspect-ratio: 4 / 3;
-    object-fit: cover;
-    display: block;
-  }
-  .image-result div {
-    padding: 9px;
+  .upload-bg-group.visible { display: flex; }
+  .upload-bg-name {
     font-size: 11px;
-    color: var(--text-2);
+    color: var(--green);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
   }
 
   .preview-placeholder {
@@ -569,10 +401,62 @@
     background: var(--surface2);
     box-shadow: 0 8px 40px rgba(0,0,0,0.5);
     display: none;
+    cursor: grab;
+    touch-action: none;
   }
   .preview-frame.visible { display: block; }
+  .preview-frame.dragging { cursor: grabbing; }
   .preview-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
+  .thumb-preview-tools {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    z-index: 2;
+    padding: 6px 9px;
+    border-radius: 999px;
+    background: rgba(0,0,0,0.58);
+    border: 1px solid rgba(255,255,255,0.1);
+    backdrop-filter: blur(8px);
+  }
+  .thumb-preview-meta {
+    color: rgba(255,255,255,0.88);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 11px;
+    white-space: nowrap;
+  }
+  .thumb-preview-zoom {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 8px;
+    z-index: 2;
+  }
+  .thumb-preview-hint {
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    padding: 7px 10px;
+    border-radius: 999px;
+    background: rgba(0,0,0,0.58);
+    border: 1px solid rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.88);
+    font-size: 11px;
+    font-weight: 600;
+    pointer-events: none;
+    backdrop-filter: blur(8px);
+    white-space: nowrap;
+    z-index: 2;
+  }
+  .bd-counter + .thumb-preview-hint {
+    bottom: 38px;
+  }
+
   /* Backdrop navigation overlaid on the frame */
   .bd-nav {
     position: absolute; inset: 0;
@@ -618,6 +502,7 @@
     position: absolute; inset: 0;
     background: rgba(13,15,18,0.8);
     display: none; align-items: center; justify-content: center;
+    z-index: 4;
   }
   .loading-cover.on { display: flex; }
 
@@ -652,6 +537,12 @@
     text-transform: uppercase; letter-spacing: 0.08em;
     color: var(--text-2);
   }
+  .ctrl-hint {
+    font-size: 10px;
+    color: var(--text-3);
+    max-width: 180px;
+    line-height: 1.35;
+  }
 
   .ctrl-select {
     padding: 7px 10px;
@@ -990,6 +881,7 @@
   <h1>Emby Thumbnail Generator</h1>
   <nav class="header-nav">
     <a class="nav-link active" href="/">Generator</a>
+    <a class="nav-link" href="/collections">Collections</a>
     <a class="nav-link" href="/airing">Airing</a>
   </nav>
   <div class="header-status">
@@ -1038,13 +930,22 @@
           </div>
 
           <!-- Preview frame -->
-          <div class="preview-frame" id="previewFrame">
+          <div class="preview-frame" id="previewFrame" title="Drag to position the thumb crop. Use the mouse wheel to zoom.">
             <img id="thumbImg" src="" alt="">
+            <div class="thumb-preview-tools">
+              <button class="mini-link" id="btnThumbReset" type="button">Reset</button>
+              <span class="thumb-preview-meta" id="thumbPreviewMeta">100% · X 0 · Y 0</span>
+            </div>
+            <div class="thumb-preview-zoom">
+              <button class="primary-preview-zoom-btn" id="btnThumbPreviewZoomOut" type="button" aria-label="Zoom out">-</button>
+              <button class="primary-preview-zoom-btn" id="btnThumbPreviewZoomIn" type="button" aria-label="Zoom in">+</button>
+            </div>
             <div class="bd-nav" id="bdNav">
               <button class="bd-btn" id="btnBdPrev" disabled>&#8592;</button>
               <button class="bd-btn" id="btnBdNext" disabled>&#8594;</button>
             </div>
             <div class="bd-counter" id="bdCounter" style="display:none"></div>
+            <div class="thumb-preview-hint">Drag to position • Wheel to zoom</div>
             <div class="loading-cover" id="loadingCover"><div class="spinner"></div></div>
           </div>
         </div>
@@ -1071,97 +972,6 @@
       </div>
     </div>
 
-    <section class="artwork-editor" id="artworkEditor">
-      <div class="editor-head">
-        <div>
-          <div class="editor-title">Artwork Editor</div>
-          <div class="editor-subtitle" id="editorSubtitle">Select an Emby item to reframe poster, thumb, or backdrop artwork.</div>
-        </div>
-        <div class="editor-actions">
-          <button class="btn btn-ghost" id="btnOpenImageSearch" type="button">Search web image</button>
-          <button class="btn btn-primary" id="btnEditorPreview" type="button">Preview export</button>
-        </div>
-      </div>
-      <div class="editor-grid">
-        <div class="editor-panel">
-          <h3>Source Image</h3>
-          <div class="editor-source-list" id="editorSourceList">
-            <button class="editor-source-btn active" type="button" data-source-kind="emby" data-source-type="Primary">Emby Primary poster</button>
-            <button class="editor-source-btn" type="button" data-source-kind="emby" data-source-type="Backdrop">Selected Emby backdrop</button>
-            <button class="editor-source-btn" type="button" data-source-kind="emby" data-source-type="Thumb">Current Emby thumb</button>
-          </div>
-          <p class="editor-note" id="editorImportNote" style="margin-top:12px">Remote imports will appear here after you search and import a full-size image.</p>
-        </div>
-
-        <div class="editor-panel">
-          <h3>Editor Canvas</h3>
-          <div class="editor-canvas-wrap">
-            <div class="editor-canvas" id="editorCanvas" title="Drag to reposition. Use the wheel or zoom controls to scale.">
-              <img id="editorPreviewImg" alt="">
-              <div class="editor-canvas-empty" id="editorCanvasEmpty">Generate a preview to start editing.</div>
-            </div>
-          </div>
-          <div class="editor-row">
-            <label>Zoom <span id="editorZoomVal">100%</span></label>
-            <input type="range" id="editorZoomSlider" min="25" max="500" value="100">
-          </div>
-          <div class="editor-row">
-            <label>Position X <span id="editorPanXVal">0</span></label>
-            <input type="range" id="editorPanXSlider" min="-100" max="100" value="0">
-          </div>
-          <div class="editor-row">
-            <label>Position Y <span id="editorPanYVal">0</span></label>
-            <input type="range" id="editorPanYSlider" min="-100" max="100" value="0">
-          </div>
-          <div class="editor-actions">
-            <button class="btn btn-ghost" id="btnEditorZoomOut" type="button">Zoom out</button>
-            <button class="btn btn-ghost" id="btnEditorZoomIn" type="button">Zoom in</button>
-            <button class="btn btn-ghost" id="btnEditorReset" type="button">Reset</button>
-          </div>
-        </div>
-
-        <div class="editor-panel">
-          <h3>Export</h3>
-          <div class="editor-row">
-            <label>Target mode</label>
-            <select id="editorTargetSelect">
-              <option value="poster">Poster / Primary 1000x1500</option>
-              <option value="thumb">Thumb 1920x1080</option>
-              <option value="backdrop">Backdrop 1920x1080</option>
-            </select>
-          </div>
-          <div class="editor-row">
-            <label>Image fit</label>
-            <select id="editorFitSelect">
-              <option value="cover">Cover frame</option>
-              <option value="contain">Contain full image</option>
-            </select>
-          </div>
-          <div class="editor-row">
-            <label>Background fill</label>
-            <select id="editorFillSelect">
-              <option value="blur">Blurred fill</option>
-              <option value="mirror">Mirrored fill</option>
-              <option value="solid">Solid colour</option>
-            </select>
-          </div>
-          <div class="editor-row">
-            <label>Fill colour</label>
-            <input type="color" id="editorFillColor" value="#101318">
-          </div>
-          <div class="editor-row">
-            <label>JPEG quality <span id="editorQualityVal">95</span></label>
-            <input type="range" id="editorQualitySlider" min="80" max="98" value="95">
-          </div>
-          <div class="editor-actions">
-            <button class="btn btn-primary" id="btnEditorDownload" type="button" disabled>Download</button>
-            <button class="btn btn-green" id="btnEditorApply" type="button" disabled>Apply to Emby</button>
-          </div>
-          <p class="editor-note" id="editorExportMeta" style="margin-top:12px">Exports are cached and uploaded to the matching Emby image type.</p>
-        </div>
-      </div>
-    </section>
-
     <!-- Controls bar -->
     <div class="controls" id="controlsBar">
       <div class="ctrl-row">
@@ -1218,16 +1028,12 @@
           <select class="ctrl-select" id="bgSelect">
             <option value="backdrop" selected>Backdrop</option>
             <option value="blur">Blurred poster</option>
-            <option value="solid">Solid colour</option>
+            <option value="upload">↑ Upload photo…</option>
           </select>
-        </div>
-
-        <!-- BG colour (solid only) -->
-        <div class="ctrl-group" id="bgColorGroup" style="display:none">
-          <label>BG colour</label>
-          <div class="color-wrap">
-            <input type="color" id="bgColorPicker" value="#1a1a2e">
-            <input type="text" id="bgColorText" value="#1a1a2e" maxlength="7">
+          <input type="file" id="uploadBgInput" accept="image/*" style="display:none">
+          <div class="upload-bg-group" id="uploadBgGroup">
+            <span class="upload-bg-name" id="uploadBgName"></span>
+            <button class="btn btn-ghost" id="btnUploadBg" type="button" style="font-size:10px;padding:3px 8px;margin-left:auto">Change</button>
           </div>
         </div>
 
@@ -1297,6 +1103,33 @@
           </label>
         </div>
 
+        <!-- Thumb crop -->
+        <div class="ctrl-group" id="thumbZoomGroup">
+          <label>Thumb zoom</label>
+          <div class="slider-wrap">
+            <button class="slider-step" id="btnThumbZoomOut" type="button" aria-label="Zoom out">-</button>
+            <input type="range" id="thumbZoomSlider" min="100" max="260" value="100">
+            <button class="slider-step" id="btnThumbZoomIn" type="button" aria-label="Zoom in">+</button>
+            <span class="slider-val" id="thumbZoomVal">100%</span>
+          </div>
+        </div>
+
+        <div class="ctrl-group" id="thumbPanXGroup">
+          <label>Thumb X</label>
+          <div class="slider-wrap">
+            <input type="range" id="thumbPanXSlider" min="-100" max="100" value="0">
+            <span class="slider-val" id="thumbPanXVal">0</span>
+          </div>
+        </div>
+
+        <div class="ctrl-group" id="thumbPanYGroup">
+          <label>Thumb Y</label>
+          <div class="slider-wrap">
+            <input type="range" id="thumbPanYSlider" min="-100" max="100" value="0">
+            <span class="slider-val" id="thumbPanYVal">0</span>
+          </div>
+        </div>
+
         <div class="ctrl-group" id="primaryZoomGroup" style="display:none">
           <label>Poster zoom</label>
           <div class="slider-wrap">
@@ -1332,6 +1165,14 @@
           </div>
         </div>
 
+        <div class="ctrl-group">
+          <label>Bulk category</label>
+          <select class="ctrl-select" id="bulkCategorySelect">
+            <option value="">Choose category…</option>
+          </select>
+          <div class="ctrl-hint">Uses the current settings. Only items that already have an Emby logo will be updated.</div>
+        </div>
+
         <div class="ctrl-spacer"></div>
 
         <!-- Actions -->
@@ -1341,40 +1182,13 @@
         </button>
         <button class="btn btn-primary" id="btnGenerate" disabled>Generate</button>
         <button class="btn btn-green" id="btnApply" disabled>Apply to Emby</button>
+        <button class="btn btn-ghost" id="btnBulkApply" disabled>Bulk Apply Category</button>
       </div>
     </div>
 
   </main>
 </div>
 
-<div class="modal-backdrop" id="imageSearchModal">
-  <div class="modal-card">
-    <div class="modal-head">
-      <div>
-        <div class="editor-title">Search Full-Size Artwork</div>
-        <div class="editor-subtitle">Find a better poster, still, or backdrop and import it into the editor cache.</div>
-      </div>
-      <button class="btn btn-ghost" id="btnCloseImageSearch" type="button">Close</button>
-    </div>
-    <div class="modal-body">
-      <div class="editor-grid" style="grid-template-columns: 1fr 180px auto; padding:0">
-        <div class="editor-row" style="margin:0">
-          <label>Search query</label>
-          <input type="text" id="imageSearchInput" placeholder="Movie or show title artwork">
-        </div>
-        <div class="editor-row" style="margin:0">
-          <label>Provider</label>
-          <select id="imageProviderSelect"></select>
-        </div>
-        <div class="editor-row" style="margin:0; align-self:end">
-          <button class="btn btn-primary" id="btnRunImageSearch" type="button">Search</button>
-        </div>
-      </div>
-      <div class="image-search-grid" id="imageSearchResults"></div>
-    </div>
-  </div>
-</div>
-
 <div class="toast" id="toast"></div>
 
 <script>
@@ -1386,23 +1200,13 @@ const state = {
   generated: false,
   cacheKey: null,
   primaryGenerated: false,
+  uploadBgId: null,
   searchQuery: '',
   searchStart: 0,
   searchLimit: 12,
   searchTotal: 0,
   searchController: null,
-};
-
-const editorState = {
-  sourceKind: 'emby',
-  sourceType: 'Primary',
-  sourceIndex: null,
-  importId: null,
-  cacheKey: null,
-  previewUrl: null,
-  imported: null,
-  drag: null,
-  providersLoaded: false,
+  categoriesLoaded: false,
 };
 
 const $ = s => document.querySelector(s);
@@ -1425,39 +1229,10 @@ const primaryPreviewMeta = $('#primaryPreviewMeta');
 const btnPrimaryReset = $('#btnPrimaryReset');
 const btnPrimaryPreviewZoomOut = $('#btnPrimaryPreviewZoomOut');
 const btnPrimaryPreviewZoomIn = $('#btnPrimaryPreviewZoomIn');
-const artworkEditor = $('#artworkEditor');
-const editorSubtitle = $('#editorSubtitle');
-const editorSourceList = $('#editorSourceList');
-const editorImportNote = $('#editorImportNote');
-const editorCanvas = $('#editorCanvas');
-const editorPreviewImg = $('#editorPreviewImg');
-const editorCanvasEmpty = $('#editorCanvasEmpty');
-const editorTargetSelect = $('#editorTargetSelect');
-const editorFitSelect = $('#editorFitSelect');
-const editorFillSelect = $('#editorFillSelect');
-const editorFillColor = $('#editorFillColor');
-const editorQualitySlider = $('#editorQualitySlider');
-const editorQualityVal = $('#editorQualityVal');
-const editorZoomSlider = $('#editorZoomSlider');
-const editorZoomVal = $('#editorZoomVal');
-const editorPanXSlider = $('#editorPanXSlider');
-const editorPanXVal = $('#editorPanXVal');
-const editorPanYSlider = $('#editorPanYSlider');
-const editorPanYVal = $('#editorPanYVal');
-const btnEditorPreview = $('#btnEditorPreview');
-const btnEditorDownload = $('#btnEditorDownload');
-const btnEditorApply = $('#btnEditorApply');
-const btnEditorReset = $('#btnEditorReset');
-const btnEditorZoomOut = $('#btnEditorZoomOut');
-const btnEditorZoomIn = $('#btnEditorZoomIn');
-const editorExportMeta = $('#editorExportMeta');
-const btnOpenImageSearch = $('#btnOpenImageSearch');
-const imageSearchModal = $('#imageSearchModal');
-const btnCloseImageSearch = $('#btnCloseImageSearch');
-const imageSearchInput = $('#imageSearchInput');
-const imageProviderSelect = $('#imageProviderSelect');
-const btnRunImageSearch = $('#btnRunImageSearch');
-const imageSearchResults = $('#imageSearchResults');
+const uploadBgGroup = $('#uploadBgGroup');
+const uploadBgInput = $('#uploadBgInput');
+const btnUploadBg = $('#btnUploadBg');
+const uploadBgName = $('#uploadBgName');
 const loadingCover = $('#loadingCover');
 const bdNav        = $('#bdNav');
 const bdCounter    = $('#bdCounter');
@@ -1475,9 +1250,6 @@ const btnBdNext    = $('#btnBdNext');
 const controlsBar  = $('#controlsBar');
 const posGrid      = $('#posGrid');
 const bgSelect     = $('#bgSelect');
-const bgColorGroup = $('#bgColorGroup');
-const bgColorPicker= $('#bgColorPicker');
-const bgColorText  = $('#bgColorText');
 const textColorPicker=$('#textColorPicker');
 const textColorText= $('#textColorText');
 const logoScaleSlider  = $('#logoScaleSlider');
@@ -1491,6 +1263,21 @@ const seriesTagGroup   = $('#seriesTagGroup');
 const newEpisodesToggle= $('#newEpisodesToggle');
 const seasonFinaleToggle = $('#seasonFinaleToggle');
 const matchPrimaryToggle = $('#matchPrimaryToggle');
+const thumbZoomGroup = $('#thumbZoomGroup');
+const thumbPanXGroup = $('#thumbPanXGroup');
+const thumbPanYGroup = $('#thumbPanYGroup');
+const btnThumbZoomOut = $('#btnThumbZoomOut');
+const btnThumbZoomIn = $('#btnThumbZoomIn');
+const btnThumbPreviewZoomOut = $('#btnThumbPreviewZoomOut');
+const btnThumbPreviewZoomIn = $('#btnThumbPreviewZoomIn');
+const btnThumbReset = $('#btnThumbReset');
+const thumbPreviewMeta = $('#thumbPreviewMeta');
+const thumbZoomSlider = $('#thumbZoomSlider');
+const thumbZoomVal = $('#thumbZoomVal');
+const thumbPanXSlider = $('#thumbPanXSlider');
+const thumbPanXVal = $('#thumbPanXVal');
+const thumbPanYSlider = $('#thumbPanYSlider');
+const thumbPanYVal = $('#thumbPanYVal');
 const primaryZoomGroup = $('#primaryZoomGroup');
 const primaryPanXGroup = $('#primaryPanXGroup');
 const primaryPanYGroup = $('#primaryPanYGroup');
@@ -1505,6 +1292,8 @@ const primaryPanYVal = $('#primaryPanYVal');
 const btnGenerate  = $('#btnGenerate');
 const btnRegenerate= $('#btnRegenerate');
 const btnApply     = $('#btnApply');
+const bulkCategorySelect = $('#bulkCategorySelect');
+const btnBulkApply = $('#btnBulkApply');
 const toast        = $('#toast');
 
 // ── Connection check ──
@@ -1523,6 +1312,40 @@ const toast        = $('#toast');
   }
 })();
 
+async function readErrorMessage(response) {
+  try {
+    const data = await response.json();
+    if (typeof data?.detail === 'string' && data.detail.trim()) return data.detail;
+    if (Array.isArray(data?.detail)) return data.detail.map(entry => entry.msg || entry.message || String(entry)).join(', ');
+  } catch {}
+  return `${response.status}`;
+}
+
+async function loadCategories() {
+  if (state.categoriesLoaded) return;
+  try {
+    const response = await fetch('/api/categories');
+    if (!response.ok) throw new Error(await readErrorMessage(response));
+    const data = await response.json();
+    const options = (data.items || []).map(item =>
+      `<option value="${item.id}">${esc(item.name)}${item.item_count ? ` (${item.item_count})` : ''}</option>`
+    ).join('');
+    bulkCategorySelect.innerHTML = `<option value="">Choose category…</option>${options}`;
+    state.categoriesLoaded = true;
+  } catch (error) {
+    bulkCategorySelect.innerHTML = '<option value="">Categories unavailable</option>';
+    showToast(`Category load failed: ${error.message}`, 'err');
+  }
+}
+
+function currentCategoryLabel() {
+  return bulkCategorySelect.options[bulkCategorySelect.selectedIndex]?.text || '';
+}
+
+function updateBulkApplyState() {
+  btnBulkApply.disabled = !state.item || !bulkCategorySelect.value;
+}
+
 // ── Search ──
 let searchTimer;
 searchInput.addEventListener('input', () => {
@@ -1555,6 +1378,7 @@ function updateSearchPager(total, start, limit) {
 }
 
 function currentLogoAsset() {
+  if (state.logoIndex < 0) return null;
   return state.imageInfo.logos[state.logoIndex] ?? null;
 }
 
@@ -1565,17 +1389,19 @@ function currentBackdropAsset() {
 function updateAssetPickers() {
   const logos = state.imageInfo.logos ?? [];
   const backdrops = state.imageInfo.backdrops ?? [];
+  const totalLogoChoices = logos.length + 1;
+  const activeLogoChoice = state.logoIndex < 0 ? 1 : state.logoIndex + 2;
 
-  logoAssetGroup.style.display = logos.length ? '' : 'none';
-  logoAssetCount.textContent = logos.length ? `${state.logoIndex + 1}/${logos.length}` : '0/0';
-  btnLogoPrev.disabled = logos.length <= 1 || state.logoIndex === 0;
-  btnLogoNext.disabled = logos.length <= 1 || state.logoIndex >= logos.length - 1;
-  if (logos.length) {
+  logoAssetGroup.style.display = state.item ? '' : 'none';
+  logoAssetCount.textContent = `${activeLogoChoice}/${totalLogoChoices}`;
+  btnLogoPrev.disabled = totalLogoChoices <= 1 || state.logoIndex < 0;
+  btnLogoNext.disabled = totalLogoChoices <= 1 || state.logoIndex >= logos.length - 1;
+  if (state.logoIndex < 0 || !logos.length) {
+    logoAssetPreview.classList.add('empty');
+    logoAssetPreview.textContent = 'Text';
+  } else {
     logoAssetPreview.classList.remove('empty');
     logoAssetPreview.innerHTML = `<img src="${logos[state.logoIndex].url}" alt="" loading="lazy" decoding="async">`;
-  } else {
-    logoAssetPreview.classList.add('empty');
-    logoAssetPreview.textContent = 'No logo';
   }
 
   backdropAssetGroup.style.display = backdrops.length > 1 ? '' : 'none';
@@ -1598,6 +1424,13 @@ function getSeriesTagFlags() {
   };
 }
 
+function updateThumbPreviewMeta() {
+  thumbZoomVal.textContent = thumbZoomSlider.value + '%';
+  thumbPanXVal.textContent = thumbPanXSlider.value;
+  thumbPanYVal.textContent = thumbPanYSlider.value;
+  thumbPreviewMeta.textContent = `${thumbZoomSlider.value}% · X ${thumbPanXSlider.value} · Y ${thumbPanYSlider.value}`;
+}
+
 function updatePrimaryPreviewMeta() {
   primaryZoomVal.textContent = primaryZoomSlider.value + '%';
   primaryPanXVal.textContent = primaryPanXSlider.value;
@@ -1632,14 +1465,29 @@ function syncPrimaryPreviewState() {
 }
 
 let primaryPreviewTimer;
+let thumbPreviewTimer;
 let generateController = null;
 let generateRequestId = 0;
 let primaryDragState = null;
+let thumbDragState = null;
 
 function clamp(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
 
+function setThumbCropValues({ zoom, panX, panY }, { regenerate = false } = {}) {
+  if (zoom != null) thumbZoomSlider.value = String(clamp(Math.round(zoom), 100, 260));
+  if (panX != null) thumbPanXSlider.value = String(clamp(Math.round(panX), -100, 100));
+  if (panY != null) thumbPanYSlider.value = String(clamp(Math.round(panY), -100, 100));
+  updateThumbPreviewMeta();
+  if (regenerate) {
+    state.generated = false;
+    btnApply.disabled = true;
+    btnRegenerate.disabled = true;
+    scheduleThumbPreviewRegenerate();
+  }
+}
+
 function setPrimaryCropValues({ zoom, panX, panY }, { regenerate = false } = {}) {
   if (zoom != null) primaryZoomSlider.value = String(clamp(Math.round(zoom), 100, 260));
   if (panX != null) primaryPanXSlider.value = String(clamp(Math.round(panX), -100, 100));
@@ -1653,6 +1501,13 @@ function setPrimaryCropValues({ zoom, panX, panY }, { regenerate = false } = {})
   }
 }
 
+function scheduleThumbPreviewRegenerate() {
+  updateThumbPreviewMeta();
+  if (!state.item) return;
+  clearTimeout(thumbPreviewTimer);
+  thumbPreviewTimer = setTimeout(() => generateThumb({ silent: true }), 180);
+}
+
 function schedulePrimaryPreviewRegenerate() {
   updatePrimaryPreviewMeta();
   if (!state.item || !matchPrimaryToggle.checked) return;
@@ -1670,6 +1525,23 @@ function finishPrimaryDrag(pointerId = null) {
   primaryDragState = null;
 }
 
+function finishThumbDrag(pointerId = null) {
+  if (!thumbDragState) return;
+  if (pointerId != null && thumbDragState.pointerId !== pointerId) return;
+  try {
+    previewFrame.releasePointerCapture(thumbDragState.pointerId);
+  } catch {}
+  previewFrame.classList.remove('dragging');
+  thumbDragState = null;
+}
+
+function nudgeThumbZoom(delta) {
+  if (!state.item) return;
+  setThumbCropValues({
+    zoom: Number(thumbZoomSlider.value) + delta,
+  }, { regenerate: true });
+}
+
 function nudgePrimaryZoom(delta) {
   if (!state.item || !matchPrimaryToggle.checked) return;
   setPrimaryCropValues({
@@ -1677,175 +1549,6 @@ function nudgePrimaryZoom(delta) {
   }, { regenerate: true });
 }
 
-function updateEditorLabels() {
-  editorZoomVal.textContent = `${editorZoomSlider.value}%`;
-  editorPanXVal.textContent = editorPanXSlider.value;
-  editorPanYVal.textContent = editorPanYSlider.value;
-  editorQualityVal.textContent = editorQualitySlider.value;
-  editorCanvas.classList.toggle('thumb', editorTargetSelect.value === 'thumb');
-  editorCanvas.classList.toggle('backdrop', editorTargetSelect.value === 'backdrop');
-}
-
-function editorPayload() {
-  const effectiveSourceIndex = editorState.sourceType === 'Backdrop'
-    ? (currentBackdropAsset()?.index ?? state.backdropIndex)
-    : editorState.sourceIndex;
-  return {
-    item_id: state.item?.id,
-    source_kind: editorState.sourceKind,
-    source_type: editorState.sourceType,
-    source_index: effectiveSourceIndex,
-    import_id: editorState.importId,
-    target_mode: editorTargetSelect.value,
-    fit_mode: editorFitSelect.value,
-    fill_mode: editorFillSelect.value,
-    fill_color: editorFillColor.value,
-    zoom: Number(editorZoomSlider.value) / 100,
-    pan_x: Number(editorPanXSlider.value) / 100,
-    pan_y: Number(editorPanYSlider.value) / 100,
-    quality: Number(editorQualitySlider.value),
-  };
-}
-
-function resetEditorTransform({ preview = false } = {}) {
-  editorZoomSlider.value = '100';
-  editorPanXSlider.value = '0';
-  editorPanYSlider.value = '0';
-  updateEditorLabels();
-  if (preview) scheduleEditorPreview();
-}
-
-function setEditorSource(button) {
-  editorSourceList.querySelectorAll('.editor-source-btn').forEach(btn => btn.classList.remove('active'));
-  button.classList.add('active');
-  editorState.sourceKind = button.dataset.sourceKind;
-  editorState.sourceType = button.dataset.sourceType || 'Primary';
-  editorState.sourceIndex = button.dataset.sourceIndex ? Number(button.dataset.sourceIndex) : null;
-  editorState.importId = button.dataset.importId || null;
-  editorState.cacheKey = null;
-  resetEditorTransform();
-  scheduleEditorPreview();
-}
-
-function syncArtworkEditorForItem() {
-  const visible = Boolean(state.item);
-  artworkEditor.classList.toggle('visible', visible);
-  if (!visible) return;
-  editorSubtitle.textContent = `Editing artwork for ${state.item.name}`;
-  imageSearchInput.value = `${state.item.name} ${state.item.year || ''} poster backdrop`.trim();
-  editorSourceList.querySelectorAll('.editor-source-btn').forEach(btn => {
-    btn.classList.toggle('active', btn.dataset.sourceKind === editorState.sourceKind && btn.dataset.sourceType === editorState.sourceType && !btn.dataset.importId);
-  });
-  scheduleEditorPreview();
-}
-
-function appendImportedSource(imported) {
-  editorState.imported = imported;
-  let btn = editorSourceList.querySelector('[data-source-kind="import"]');
-  if (!btn) {
-    btn = document.createElement('button');
-    btn.className = 'editor-source-btn';
-    btn.type = 'button';
-    btn.dataset.sourceKind = 'import';
-    editorSourceList.appendChild(btn);
-    btn.addEventListener('click', () => setEditorSource(btn));
-  }
-  btn.dataset.importId = imported.id;
-  btn.textContent = `Imported image ${imported.width}x${imported.height}`;
-  editorImportNote.textContent = `Imported ${imported.format} image cached locally for this editor session.`;
-  setEditorSource(btn);
-}
-
-let editorPreviewTimer;
-async function generateEditorPreview() {
-  if (!state.item) return;
-  updateEditorLabels();
-  btnEditorPreview.disabled = true;
-  btnEditorApply.disabled = true;
-  btnEditorDownload.disabled = true;
-  try {
-    const r = await fetch('/api/artwork/export', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(editorPayload()),
-    });
-    if (!r.ok) throw new Error(`${r.status}`);
-    editorState.cacheKey = r.headers.get('X-Editor-Cache-Key');
-    const blob = await r.blob();
-    if (editorState.previewUrl) URL.revokeObjectURL(editorState.previewUrl);
-    editorState.previewUrl = URL.createObjectURL(blob);
-    editorPreviewImg.src = editorState.previewUrl;
-    editorCanvasEmpty.style.display = 'none';
-    editorExportMeta.textContent = `${r.headers.get('X-Editor-Emby-Type')} export · ${r.headers.get('X-Editor-Width')}x${r.headers.get('X-Editor-Height')} · cached`;
-    btnEditorApply.disabled = false;
-    btnEditorDownload.disabled = false;
-  } catch (e) {
-    showToast(`Editor preview failed: ${e.message}`, 'err');
-  } finally {
-    btnEditorPreview.disabled = false;
-  }
-}
-
-function scheduleEditorPreview() {
-  if (!state.item) return;
-  clearTimeout(editorPreviewTimer);
-  editorPreviewTimer = setTimeout(generateEditorPreview, 220);
-}
-
-async function loadImageProviders() {
-  if (editorState.providersLoaded) return;
-  const r = await fetch('/api/artwork/providers');
-  if (!r.ok) throw new Error(`${r.status}`);
-  const data = await r.json();
-  imageProviderSelect.innerHTML = data.providers.map(provider => `<option value="${provider.key}">${esc(provider.label)}</option>`).join('');
-  editorState.providersLoaded = true;
-}
-
-async function runImageSearch() {
-  const q = imageSearchInput.value.trim();
-  if (q.length < 2) return;
-  imageSearchResults.innerHTML = '<div class="empty">Searching...</div>';
-  try {
-    const url = `/api/artwork/search?q=${encodeURIComponent(q)}&provider=${encodeURIComponent(imageProviderSelect.value)}&limit=12`;
-    const r = await fetch(url);
-    if (!r.ok) throw new Error(`${r.status}`);
-    const data = await r.json();
-    if (!data.items.length) {
-      imageSearchResults.innerHTML = '<div class="empty">No images found</div>';
-      return;
-    }
-    imageSearchResults.innerHTML = data.items.map(item => `
-      <button class="image-result" type="button" data-image-url="${esc(item.image_url)}">
-        <img src="${esc(item.thumbnail_url)}" alt="">
-        <div>${esc(item.title)}${item.width && item.height ? `<br>${item.width}x${item.height}` : ''}</div>
-      </button>
-    `).join('');
-    imageSearchResults.querySelectorAll('.image-result').forEach(btn => {
-      btn.addEventListener('click', async () => {
-        btn.disabled = true;
-        try {
-          const r = await fetch('/api/artwork/import', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ image_url: btn.dataset.imageUrl }),
-          });
-          if (!r.ok) throw new Error(`${r.status}`);
-          appendImportedSource(await r.json());
-          imageSearchModal.classList.remove('visible');
-          showToast('Imported image into editor', 'ok');
-        } catch (e) {
-          showToast(`Import failed: ${e.message}`, 'err');
-        } finally {
-          btn.disabled = false;
-        }
-      });
-    });
-  } catch (e) {
-    imageSearchResults.innerHTML = '<div class="empty">Search failed</div>';
-    showToast(`Image search failed: ${e.message}`, 'err');
-  }
-}
-
 async function doSearch(q, start = 0) {
   if (state.searchController) state.searchController.abort();
   const controller = new AbortController();
@@ -1863,7 +1566,7 @@ async function doSearch(q, start = 0) {
       { signal: controller.signal },
     );
     const data = await r.json();
-    if (!r.ok) throw new Error(`${r.status}`);
+    if (!r.ok) throw new Error(typeof data?.detail === 'string' ? data.detail : `${r.status}`);
     if (state.searchController !== controller) return;
     state.searchTotal = data.total;
     state.searchStart = data.start;
@@ -1918,22 +1621,15 @@ async function selectItem(item) {
 
   state.item = item;
   state.backdropIndex = 0;
-  state.logoIndex = 0;
+  state.logoIndex = item.has_logo ? 0 : -1;
   state.imageInfo = { logos: [], backdrops: [], primaries: [] };
   state.generated = false;
   state.cacheKey = null;
   state.primaryGenerated = false;
-  editorState.sourceKind = 'emby';
-  editorState.sourceType = 'Primary';
-  editorState.sourceIndex = null;
-  editorState.importId = null;
-  editorState.cacheKey = null;
-  editorImportNote.textContent = 'Remote imports will appear here after you search and import a full-size image.';
-  editorSourceList.querySelector('[data-source-kind="import"]')?.remove();
-  resetEditorTransform();
   primaryZoomSlider.value = '100';
   primaryPanXSlider.value = '0';
   primaryPanYSlider.value = '-16';
+  updateThumbPreviewMeta();
   updatePrimaryPreviewMeta();
   syncPrimaryPreviewState();
 
@@ -1942,9 +1638,9 @@ async function selectItem(item) {
 
   placeholder.style.display = 'none';
   controlsBar.classList.add('visible');
-  syncArtworkEditorForItem();
   btnRegenerate.disabled = true;
   btnApply.disabled = true;
+  updateBulkApplyState();
   bdCounter.style.display = 'none';
   btnBdPrev.disabled = true;
   btnBdNext.disabled = true;
@@ -1970,7 +1666,11 @@ async function selectItem(item) {
         primaries: info.primaries ?? [],
       };
       state.item.backdrop_count = info.backdrop_count;
-      state.logoIndex = 0;
+      if (!state.imageInfo.logos.length) {
+        state.logoIndex = -1;
+      } else if (state.logoIndex > state.imageInfo.logos.length - 1) {
+        state.logoIndex = 0;
+      }
       state.backdropIndex = 0;
       updateAssetPickers();
       updateBdUI();
@@ -1999,14 +1699,12 @@ function stepBackdrop(delta) {
   state.backdropIndex = nextIndex;
   updateAssetPickers();
   updateBdUI();
-  if (editorState.sourceKind === 'emby' && editorState.sourceType === 'Backdrop') scheduleEditorPreview();
   generateThumb();
 }
 
 function stepLogo(delta) {
   const max = (state.imageInfo.logos.length || 0) - 1;
-  if (max < 0) return;
-  const nextIndex = Math.max(0, Math.min(max, state.logoIndex + delta));
+  const nextIndex = Math.max(-1, Math.min(max, state.logoIndex + delta));
   if (nextIndex === state.logoIndex) return;
   state.logoIndex = nextIndex;
   updateAssetPickers();
@@ -2031,10 +1729,6 @@ posGrid.querySelectorAll('.pos-btn[data-pos]').forEach(btn => {
   });
 });
 
-// ── BG select ──
-bgSelect.addEventListener('change', () => {
-  bgColorGroup.style.display = bgSelect.value === 'solid' ? '' : 'none';
-});
 logoScaleSlider.addEventListener('input', () => logoScaleVal.textContent = logoScaleSlider.value + '%');
 darknessSlider.addEventListener('input', () => darknessVal.textContent = darknessSlider.value + '%');
 
@@ -2058,8 +1752,6 @@ studioCornerGrid.querySelectorAll('.corner-btn').forEach(btn => {
     studioPos = btn.dataset.pos;
   });
 });
-bgColorPicker.addEventListener('input', () => bgColorText.value = bgColorPicker.value);
-bgColorText.addEventListener('input', () => { if (/^#[0-9a-f]{6}$/i.test(bgColorText.value)) bgColorPicker.value = bgColorText.value; });
 textColorPicker.addEventListener('input', () => textColorText.value = textColorPicker.value);
 textColorText.addEventListener('input', () => { if (/^#[0-9a-f]{6}$/i.test(textColorText.value)) textColorPicker.value = textColorText.value; });
 newEpisodesToggle.addEventListener('change', () => syncSeriesTagToggles('new'));
@@ -2071,74 +1763,97 @@ matchPrimaryToggle.addEventListener('change', () => {
 primaryZoomSlider.addEventListener('input', schedulePrimaryPreviewRegenerate);
 primaryPanXSlider.addEventListener('input', schedulePrimaryPreviewRegenerate);
 primaryPanYSlider.addEventListener('input', schedulePrimaryPreviewRegenerate);
-editorSourceList.querySelectorAll('.editor-source-btn').forEach(btn => {
-  btn.addEventListener('click', () => setEditorSource(btn));
+
+// Thumb crop sliders
+thumbZoomSlider.addEventListener('input', () => {
+  setThumbCropValues({ zoom: Number(thumbZoomSlider.value) }, { regenerate: true });
 });
-editorTargetSelect.addEventListener('change', () => {
-  resetEditorTransform();
-  scheduleEditorPreview();
+thumbPanXSlider.addEventListener('input', () => {
+  setThumbCropValues({ panX: Number(thumbPanXSlider.value) }, { regenerate: true });
 });
-editorFitSelect.addEventListener('change', scheduleEditorPreview);
-editorFillSelect.addEventListener('change', scheduleEditorPreview);
-editorFillColor.addEventListener('input', scheduleEditorPreview);
-editorQualitySlider.addEventListener('input', () => {
-  updateEditorLabels();
-  scheduleEditorPreview();
+thumbPanYSlider.addEventListener('input', () => {
+  setThumbCropValues({ panY: Number(thumbPanYSlider.value) }, { regenerate: true });
 });
-editorZoomSlider.addEventListener('input', scheduleEditorPreview);
-editorPanXSlider.addEventListener('input', scheduleEditorPreview);
-editorPanYSlider.addEventListener('input', scheduleEditorPreview);
-btnEditorPreview.addEventListener('click', generateEditorPreview);
-btnEditorReset.addEventListener('click', () => resetEditorTransform({ preview: true }));
-btnEditorZoomOut.addEventListener('click', () => {
-  editorZoomSlider.value = String(clamp(Number(editorZoomSlider.value) - 10, 25, 500));
-  scheduleEditorPreview();
+btnThumbZoomOut.addEventListener('click', () => nudgeThumbZoom(-10));
+btnThumbZoomIn.addEventListener('click', () => nudgeThumbZoom(10));
+btnThumbPreviewZoomOut.addEventListener('click', () => nudgeThumbZoom(-10));
+btnThumbPreviewZoomIn.addEventListener('click', () => nudgeThumbZoom(10));
+btnThumbReset.addEventListener('click', () => {
+  setThumbCropValues({ zoom: 100, panX: 0, panY: 0 }, { regenerate: true });
 });
-btnEditorZoomIn.addEventListener('click', () => {
-  editorZoomSlider.value = String(clamp(Number(editorZoomSlider.value) + 10, 25, 500));
-  scheduleEditorPreview();
+previewFrame.addEventListener('pointerdown', event => {
+  if (!state.item || event.target.closest('button')) return;
+  event.preventDefault();
+  thumbDragState = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    startPanX: Number(thumbPanXSlider.value),
+    startPanY: Number(thumbPanYSlider.value),
+  };
+  previewFrame.classList.add('dragging');
+  previewFrame.setPointerCapture(event.pointerId);
 });
-btnEditorDownload.addEventListener('click', () => {
-  if (!editorState.cacheKey) return;
-  const a = document.createElement('a');
-  a.href = `/api/artwork/export/${editorState.cacheKey}`;
-  a.download = `${state.item?.name || 'artwork'}-${editorTargetSelect.value}.jpg`;
-  a.click();
+previewFrame.addEventListener('pointermove', event => {
+  if (!thumbDragState || thumbDragState.pointerId !== event.pointerId) return;
+  const rect = previewFrame.getBoundingClientRect();
+  const deltaX = event.clientX - thumbDragState.startX;
+  const deltaY = event.clientY - thumbDragState.startY;
+  setThumbCropValues({
+    panX: thumbDragState.startPanX - (deltaX / Math.max(1, rect.width)) * 200,
+    panY: thumbDragState.startPanY - (deltaY / Math.max(1, rect.height)) * 200,
+  }, { regenerate: true });
 });
-btnEditorApply.addEventListener('click', async () => {
+previewFrame.addEventListener('pointerup', event => finishThumbDrag(event.pointerId));
+previewFrame.addEventListener('pointercancel', event => finishThumbDrag(event.pointerId));
+previewFrame.addEventListener('lostpointercapture', () => finishThumbDrag());
+previewFrame.addEventListener('wheel', event => {
   if (!state.item) return;
-  btnEditorApply.disabled = true;
+  event.preventDefault();
+  const delta = event.deltaY < 0 ? 8 : -8;
+  nudgeThumbZoom(delta);
+}, { passive: false });
+
+// ── Background select / upload ──
+bgSelect.addEventListener('change', () => {
+  if (bgSelect.value === 'upload') {
+    // Immediately open file picker when this option is chosen
+    uploadBgInput.click();
+  } else {
+    uploadBgGroup.classList.remove('visible');
+    state.uploadBgId = null;
+  }
+});
+btnUploadBg.addEventListener('click', () => uploadBgInput.click());
+uploadBgInput.addEventListener('change', async () => {
+  const file = uploadBgInput.files[0];
+  if (!file) {
+    // User cancelled — revert to backdrop if no file was previously uploaded
+    if (!state.uploadBgId) bgSelect.value = 'backdrop';
+    return;
+  }
+  uploadBgName.textContent = file.name;
+  uploadBgGroup.classList.add('visible');
+  btnUploadBg.disabled = true;
   try {
-    const r = await fetch('/api/artwork/apply', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ ...editorPayload(), cache_key: editorState.cacheKey }),
-    });
+    const fd = new FormData();
+    fd.append('file', file);
+    const r = await fetch('/api/upload-background', { method: 'POST', body: fd });
     if (!r.ok) throw new Error(`${r.status}`);
     const data = await r.json();
-    showToast(`Applied ${data.emby_type} artwork`, 'ok');
+    state.uploadBgId = data.upload_id;
+    showToast(`Photo ready (${data.width}×${data.height})`, 'ok');
+    if (state.item) generateThumb();
   } catch (e) {
-    showToast(`Apply failed: ${e.message}`, 'err');
+    showToast(`Upload failed: ${e.message}`, 'err');
+    state.uploadBgId = null;
+    bgSelect.value = 'backdrop';
+    uploadBgGroup.classList.remove('visible');
   } finally {
-    btnEditorApply.disabled = false;
+    btnUploadBg.disabled = false;
   }
 });
-btnOpenImageSearch.addEventListener('click', async () => {
-  try {
-    await loadImageProviders();
-    imageSearchModal.classList.add('visible');
-  } catch (e) {
-    showToast(`Could not load image providers: ${e.message}`, 'err');
-  }
-});
-btnCloseImageSearch.addEventListener('click', () => imageSearchModal.classList.remove('visible'));
-imageSearchModal.addEventListener('click', event => {
-  if (event.target === imageSearchModal) imageSearchModal.classList.remove('visible');
-});
-btnRunImageSearch.addEventListener('click', runImageSearch);
-imageSearchInput.addEventListener('keydown', event => {
-  if (event.key === 'Enter') runImageSearch();
-});
+
 btnPrimaryZoomOut.addEventListener('click', () => {
   nudgePrimaryZoom(-10);
 });
@@ -2182,52 +1897,14 @@ primaryPreviewFrame.addEventListener('wheel', event => {
   const delta = event.deltaY < 0 ? 8 : -8;
   nudgePrimaryZoom(delta);
 }, { passive: false });
-editorCanvas.addEventListener('pointerdown', event => {
-  if (!state.item) return;
-  event.preventDefault();
-  editorState.drag = {
-    pointerId: event.pointerId,
-    startX: event.clientX,
-    startY: event.clientY,
-    startPanX: Number(editorPanXSlider.value),
-    startPanY: Number(editorPanYSlider.value),
-  };
-  editorCanvas.classList.add('dragging');
-  editorCanvas.setPointerCapture(event.pointerId);
-});
-editorCanvas.addEventListener('pointermove', event => {
-  if (!editorState.drag || editorState.drag.pointerId !== event.pointerId) return;
-  const rect = editorCanvas.getBoundingClientRect();
-  editorPanXSlider.value = String(clamp(Math.round(editorState.drag.startPanX - ((event.clientX - editorState.drag.startX) / Math.max(1, rect.width)) * 200), -100, 100));
-  editorPanYSlider.value = String(clamp(Math.round(editorState.drag.startPanY - ((event.clientY - editorState.drag.startY) / Math.max(1, rect.height)) * 200), -100, 100));
-  scheduleEditorPreview();
-});
-function finishEditorDrag(pointerId = null) {
-  if (!editorState.drag) return;
-  if (pointerId != null && editorState.drag.pointerId !== pointerId) return;
-  try {
-    editorCanvas.releasePointerCapture(editorState.drag.pointerId);
-  } catch {}
-  editorCanvas.classList.remove('dragging');
-  editorState.drag = null;
-}
-editorCanvas.addEventListener('pointerup', event => finishEditorDrag(event.pointerId));
-editorCanvas.addEventListener('pointercancel', event => finishEditorDrag(event.pointerId));
-editorCanvas.addEventListener('lostpointercapture', () => finishEditorDrag());
-editorCanvas.addEventListener('wheel', event => {
-  if (!state.item) return;
-  event.preventDefault();
-  const delta = event.deltaY < 0 ? 8 : -8;
-  editorZoomSlider.value = String(clamp(Number(editorZoomSlider.value) + delta, 25, 500));
-  scheduleEditorPreview();
-}, { passive: false });
+updateThumbPreviewMeta();
 updatePrimaryPreviewMeta();
-updateEditorLabels();
 
 // ── Generate ──
 async function generateThumb({ silent = false } = {}) {
   if (!state.item) return;
   clearTimeout(primaryPreviewTimer);
+  clearTimeout(thumbPreviewTimer);
   if (generateController) generateController.abort();
   const controller = new AbortController();
   generateController = controller;
@@ -2247,7 +1924,7 @@ async function generateThumb({ silent = false } = {}) {
         item_id: state.item.id,
         title: state.item.name,
         bg_mode: bgSelect.value,
-        custom_bg: bgSelect.value === 'solid' ? bgColorText.value : null,
+        upload_bg_id: bgSelect.value === 'upload' ? state.uploadBgId : null,
         text_color: textColorText.value,
         logo_align: logoAlign,
         logo_index: currentLogoAsset()?.index ?? null,
@@ -2261,10 +1938,13 @@ async function generateThumb({ silent = false } = {}) {
         primary_zoom: primaryZoomSlider.value / 100,
         primary_pan_x: primaryPanXSlider.value / 100,
         primary_pan_y: primaryPanYSlider.value / 100,
+        thumb_zoom: thumbZoomSlider.value / 100,
+        thumb_pan_x: thumbPanXSlider.value / 100,
+        thumb_pan_y: thumbPanYSlider.value / 100,
         backdrop_index: currentBackdropAsset()?.index ?? state.backdropIndex,
       }),
     });
-    if (!r.ok) throw new Error(`${r.status}`);
+    if (!r.ok) throw new Error(await readErrorMessage(r));
     if (requestId !== generateRequestId) return;
     const primaryGenerated = r.headers.get('X-Primary-Generated') === '1';
     state.cacheKey = r.headers.get('X-Cache-Key');
@@ -2307,6 +1987,7 @@ async function generateThumb({ silent = false } = {}) {
 
 btnGenerate.addEventListener('click', generateThumb);
 btnRegenerate.addEventListener('click', generateThumb);
+bulkCategorySelect.addEventListener('change', updateBulkApplyState);
 
 // ── Apply ──
 btnApply.addEventListener('click', async () => {
@@ -2321,7 +2002,7 @@ btnApply.addEventListener('click', async () => {
         item_id: state.item.id,
         title: state.item.name,
         bg_mode: bgSelect.value,
-        custom_bg: bgSelect.value === 'solid' ? bgColorText.value : null,
+        upload_bg_id: bgSelect.value === 'upload' ? state.uploadBgId : null,
         text_color: textColorText.value,
         logo_align: logoAlign,
         logo_index: currentLogoAsset()?.index ?? null,
@@ -2335,10 +2016,13 @@ btnApply.addEventListener('click', async () => {
         primary_zoom: primaryZoomSlider.value / 100,
         primary_pan_x: primaryPanXSlider.value / 100,
         primary_pan_y: primaryPanYSlider.value / 100,
+        thumb_zoom: thumbZoomSlider.value / 100,
+        thumb_pan_x: thumbPanXSlider.value / 100,
+        thumb_pan_y: thumbPanYSlider.value / 100,
         backdrop_index: currentBackdropAsset()?.index ?? state.backdropIndex,
       }),
     });
-    if (!r.ok) throw new Error(`${r.status}`);
+    if (!r.ok) throw new Error(await readErrorMessage(r));
     const data = await r.json();
     if (data.primary_attempted && data.primary_code) {
       showToast('Applied thumb + primary poster', 'ok');
@@ -2354,6 +2038,56 @@ btnApply.addEventListener('click', async () => {
   }
 });
 
+btnBulkApply.addEventListener('click', async () => {
+  if (!state.item || !bulkCategorySelect.value) return;
+  const categoryLabel = currentCategoryLabel();
+  const confirmed = window.confirm(`Bulk apply the current settings to "${categoryLabel}"?\n\nOnly items with Emby logos will be updated.`);
+  if (!confirmed) return;
+  btnBulkApply.disabled = true;
+  try {
+    const seriesTagFlags = getSeriesTagFlags();
+    const response = await fetch('/api/bulk-apply/category', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        category_id: bulkCategorySelect.value,
+        category_name: categoryLabel,
+        item_id: state.item.id,
+        title: state.item.name,
+        bg_mode: bgSelect.value,
+        upload_bg_id: bgSelect.value === 'upload' ? state.uploadBgId : null,
+        text_color: textColorText.value,
+        logo_align: logoAlign,
+        logo_index: currentLogoAsset()?.index ?? null,
+        logo_scale: logoScaleSlider.value / 100,
+        darkness: darknessSlider.value / 100,
+        studio: selectedStudio,
+        studio_position: studioPos,
+        new_episodes_tag: seriesTagFlags.newEpisodes,
+        season_finale_tag: seriesTagFlags.seasonFinale,
+        generate_primary: matchPrimaryToggle.checked,
+        primary_zoom: primaryZoomSlider.value / 100,
+        primary_pan_x: primaryPanXSlider.value / 100,
+        primary_pan_y: primaryPanYSlider.value / 100,
+        thumb_zoom: thumbZoomSlider.value / 100,
+        thumb_pan_x: thumbPanXSlider.value / 100,
+        thumb_pan_y: thumbPanYSlider.value / 100,
+        backdrop_index: currentBackdropAsset()?.index ?? state.backdropIndex,
+      }),
+    });
+    if (!response.ok) throw new Error(await readErrorMessage(response));
+    const data = await response.json();
+    showToast(
+      `Bulk complete: ${data.applied_count}/${data.eligible_count} applied, ${data.skipped_without_logo_count} skipped without logo, ${data.failed_count} failed`,
+      data.failed_count ? 'err' : 'ok',
+    );
+  } catch (error) {
+    showToast(`Bulk apply failed: ${error.message}`, 'err');
+  } finally {
+    updateBulkApplyState();
+  }
+});
+
 // ── Utils ──
 function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
 function showToast(msg, type) {
@@ -2361,6 +2095,8 @@ function showToast(msg, type) {
   toast.className = `toast ${type} show`;
   setTimeout(() => toast.classList.remove('show'), 2800);
 }
+
+loadCategories();
 </script>
 </body>
 </html>