Add Docker support and refactor prompt/queue internals

- Add Dockerfile, docker-compose.yml, .dockerignore for containerised deployment - Extract _resolve_character(), _ensure_character_fields(), _append_background() helpers to eliminate repeated inline character-field injection and background-tag patterns across all secondary-category generate routes - Add _IDENTITY_KEYS / _WARDROBE_KEYS constants - Fix build_extras_prompt() bug: detailer prompt (a list) was being appended as a single item instead of extended - Replace all per-route _finalize closures with _make_finalize() factory, reducing duplication across 10 generate routes - Add _prune_job_history() called each worker loop iteration to prevent unbounded memory growth - Remove 10 orphaned legacy finalize_generation HTTP routes and check_status route (superseded by job queue API since job-queue branch) - Remove one-time migration scripts (migrate_actions, migrate_detailers, migrate_lora_weight_range, migrate_wardrobe) - Update CLAUDE.md and README.md to document new helpers, queue architecture, and Docker deployment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Redesign gallery grid layout and update CSS across all index pages
2026-03-05 16:46:36 +00:00 · 2026-03-04 21:43:40 +00:00 · 2026-03-03 02:33:04 +00:00
20 changed files with 680 additions and 1551 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,8 @@
+venv/
+__pycache__/
+*.pyc
+instance/
+flask_session/
+static/uploads/
+tools/
+.git/
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -96,6 +96,30 @@ Cross-deduplicates tags between the positive and negative prompt strings. For ea

 Called as the last step of `_prepare_workflow`, after `_apply_checkpoint_settings` has added `base_positive`/`base_negative`, so it operates on fully-assembled prompts.

+### `_IDENTITY_KEYS` / `_WARDROBE_KEYS` (module-level constants)
+Lists of canonical field names for the `identity` and `wardrobe` sections. Used by `_ensure_character_fields()` to avoid hard-coding key lists in every route.
+
+### `_resolve_character(character_slug)`
+Returns a `Character` ORM object for a given slug string. Handles the `"__random__"` sentinel by selecting a random character. Returns `None` if `character_slug` is falsy or no match is found. Every route that accepts an optional character dropdown (outfit, action, style, scene, detailer, checkpoint, look generate routes) uses this instead of an inline if/elif block.
+
+### `_ensure_character_fields(character, selected_fields, include_wardrobe=True, include_defaults=False)`
+Mutates `selected_fields` in place, appending any populated identity, wardrobe, and optional defaults keys that are not already present. Ensures `"special::name"` is always included. Called in every secondary-category generate route immediately after `_resolve_character()` to guarantee the character's essential fields are sent to `build_prompt`.
+
+### `_append_background(prompts, character=None)`
+Appends a `"<primary_color> simple background"` tag (or plain `"simple background"` if no primary color) to `prompts['main']`. Called in outfit, action, style, detailer, and checkpoint generate routes instead of repeating the same inline string construction.
+
+### `_make_finalize(category, slug, db_model_class=None, action=None)`
+Factory function that returns a `_finalize(comfy_prompt_id, job)` callback closure. The closure:
+1. Calls `get_history()` and `get_image()` to retrieve the generated image from ComfyUI.
+2. Saves the image to `static/uploads/<category>/<slug>/gen_<timestamp>.png`.
+3. Sets `job['result']` with `image_url` and `relative_path`.
+4. If `db_model_class` is provided **and** (`action` is `None` or `action == 'replace'`), updates the ORM object's `image_path` and commits.
+
+All `generate` routes pass a `_make_finalize(...)` call as the finalize argument to `_enqueue_job()` instead of defining an inline closure.
+
+### `_prune_job_history(max_age_seconds=3600)`
+Removes entries from `_job_history` that are in a terminal state (`done`, `failed`, `removed`) and older than `max_age_seconds`. Called at the end of every worker loop iteration to prevent unbounded memory growth.
+
 ### `_queue_generation(character, action, selected_fields, client_id)`
 Convenience wrapper for character detail page generation. Loads workflow, calls `build_prompt`, calls `_prepare_workflow`, calls `queue_prompt`.

@@ -225,8 +249,7 @@ Checkpoint JSONs are keyed by `checkpoint_path`. If no JSON exists for a discove
 ### Characters
 - `GET /` — character gallery (index)
 - `GET /character/<slug>` — character detail with generation UI
- `POST /character/<slug>/generate` — queue generation (AJAX or form)
- `POST /character/<slug>/finalize_generation/<prompt_id>` — retrieve image from ComfyUI
+- `POST /character/<slug>/generate` — queue generation (AJAX or form); returns `{"job_id": ...}`
 - `POST /character/<slug>/replace_cover_from_preview` — promote preview to cover
 - `GET/POST /character/<slug>/edit` — edit character data
 - `POST /character/<slug>/upload` — upload cover image
@@ -239,8 +262,7 @@ Checkpoint JSONs are keyed by `checkpoint_path`. If no JSON exists for a discove
 Each category follows the same URL pattern:
 - `GET /<category>/` — gallery
 - `GET /<category>/<slug>` — detail + generation UI
- `POST /<category>/<slug>/generate` — queue generation
- `POST /<category>/<slug>/finalize_generation/<prompt_id>` — retrieve image
+- `POST /<category>/<slug>/generate` — queue generation; returns `{"job_id": ...}`
 - `POST /<category>/<slug>/replace_cover_from_preview`
 - `GET/POST /<category>/<slug>/edit`
 - `POST /<category>/<slug>/upload`
@@ -254,15 +276,13 @@ Each category follows the same URL pattern:
 - `GET /looks` — gallery
 - `GET /look/<slug>` — detail
 - `GET/POST /look/<slug>/edit`
- `POST /look/<slug>/generate`
- `POST /look/<slug>/finalize_generation/<prompt_id>`
+- `POST /look/<slug>/generate` — queue generation; returns `{"job_id": ...}`
 - `POST /look/<slug>/replace_cover_from_preview`
 - `GET/POST /look/create`
 - `POST /looks/rescan`

 ### Generator (Mix & Match)
 - `GET/POST /generator` — freeform generator with multi-select accordion UI
- `POST /generator/finalize/<slug>/<prompt_id>` — retrieve image
 - `POST /generator/preview_prompt` — AJAX: preview composed prompt without generating

 ### Checkpoints
@@ -271,11 +291,16 @@ Each category follows the same URL pattern:
 - `POST /checkpoint/<slug>/save_json`
 - `POST /checkpoints/rescan`

+### Job Queue API
+All generation routes use the background job queue. Frontend polls:
+- `GET /api/queue/<job_id>/status` — returns `{"status": "pending"|"running"|"done"|"failed", "result": {...}}`
+
+Image retrieval is handled server-side by the `_make_finalize()` callback; there are no separate client-facing finalize routes.
+
 ### Utilities
 - `POST /set_default_checkpoint` — save default checkpoint to session
- `GET /check_status/<prompt_id>` — poll ComfyUI for completion
 - `GET /get_missing_{characters,outfits,actions,scenes}` — AJAX: list items without cover images
- `POST /generate_missing` — batch generate covers for characters
+- `POST /generate_missing` — batch generate covers for all characters missing one (uses job queue)
 - `POST /clear_all_covers` / `clear_all_{outfit,action,scene}_covers`
 - `GET /gallery` — global image gallery browsing `static/uploads/`
 - `GET/POST /settings` — LLM provider configuration
@@ -295,7 +320,7 @@ Each category follows the same URL pattern:
  - `initJsonEditor(saveUrl)` — shared JSON editor modal (simple form + raw textarea tabs)
 - Context processors inject `all_checkpoints`, `default_checkpoint_path`, and `COMFYUI_WS_URL` into every template.
 - **No `{% block head %}` exists** in layout.html — do not try to use it.
- Generation is async: JS submits the form via AJAX (`X-Requested-With: XMLHttpRequest`), receives a `prompt_id`, opens a WebSocket to ComfyUI to show progress, then calls the finalize endpoint to save the image.
+- Generation is async: JS submits the form via AJAX (`X-Requested-With: XMLHttpRequest`), receives a `{"job_id": ...}` response, then polls `/api/queue/<job_id>/status` every ~1.5 seconds until `status == "done"`. The server-side worker handles all ComfyUI polling and image saving via the `_make_finalize()` callback. There are no client-facing finalize HTTP routes.

 ---

@@ -374,6 +399,8 @@ The Flask filesystem session stores:

 ## Running the App

+### Directly (development)
+
 ```bash
 cd /mnt/alexander/Projects/character-browser
 source venv/bin/activate
@@ -384,6 +411,25 @@ The app runs in debug mode on port 5000 by default. ComfyUI must be running at `

 The DB is initialised and all sync functions are called inside `with app.app_context():` at the bottom of `app.py` before `app.run()`.

+### Docker
+
+```bash
+docker compose up -d
+```
+
+The compose file (`docker-compose.yml`) runs two services:
+- **`danbooru-mcp`** — built from `https://git.liveaodh.com/aodhan/danbooru-mcp.git`; the MCP tag-search container used by `call_llm()`.
+- **`app`** — the Flask app, exposed on host port **5782** → container port 5000.
+
+Key environment variables set by compose:
+- `COMFYUI_URL=http://10.0.0.200:8188` — points at ComfyUI on the Docker host network.
+- `SKIP_MCP_AUTOSTART=true` — disables the app's built-in danbooru-mcp launch logic (compose manages it).
+
+Volumes mounted into the app container:
+- `./data`, `./static/uploads`, `./instance`, `./flask_session` — persistent app data.
+- `/Volumes/ImageModels:/ImageModels:ro` — model files for checkpoint/LoRA scanning (**requires Docker Desktop file sharing enabled for `/Volumes/ImageModels`**).
+- `/var/run/docker.sock` — Docker socket so the app can exec danbooru-mcp tool containers.
+
 ---

 ## Common Pitfalls
@@ -396,3 +442,4 @@ The DB is initialised and all sync functions are called inside `with app.app_con
 - **AJAX detection**: `request.headers.get('X-Requested-With') == 'XMLHttpRequest'` determines whether to return JSON or redirect.
 - **Session must be marked modified for JSON responses**: After setting session values in AJAX-responding routes, set `session.modified = True`.
 - **Detailer `prompt` is a list**: The `prompt` field in detailer JSON is stored as a list of strings (e.g. `["detailed skin", "pores"]`), not a plain string. When merging into `tags` for `build_prompt`, use `extend` for lists and `append` for strings — never append the list object itself or `", ".join()` will fail on the nested list item.
+- **`_make_finalize` action semantics**: Pass `action=None` when the route should always update the DB cover (e.g. batch generate, checkpoint generate). Pass `action=request.form.get('action')` for routes that support both "preview" (no DB update) and "replace" (update DB). The factory skips the DB write when `action` is truthy and not `"replace"`.
--- a/29
+++ b/29
@@ -0,0 +1,29 @@
+FROM python:3.12-slim
+
+# Install system deps: git (for danbooru-mcp repo clone) + docker CLI
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    curl \
+    ca-certificates \
+    && install -m 0755 -d /etc/apt/keyrings \
+    && curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc \
+    && chmod a+r /etc/apt/keyrings/docker.asc \
+    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian $(. /etc/os-release && echo "$VERSION_CODENAME") stable" \
+       > /etc/apt/sources.list.d/docker.list \
+    && apt-get update && apt-get install -y --no-install-recommends docker-ce-cli docker-compose-plugin \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Writable dirs that will typically be bind-mounted at runtime
+RUN mkdir -p static/uploads instance flask_session data/characters data/clothing \
+    data/actions data/styles data/scenes data/detailers data/checkpoints data/looks
+
+EXPOSE 5000
+
+CMD ["python", "app.py"]
--- a/README.md
+++ b/README.md
@@ -39,6 +39,20 @@ A local web-based GUI for managing character profiles (JSON) and generating cons

 ## Setup & Installation

+### Option A — Docker (recommended)
+
+1. **Clone the repository.**
+2. Edit `docker-compose.yml` if needed:
+   - Set `COMFYUI_URL` to your ComfyUI host/port.
+   - Adjust the `/Volumes/ImageModels` volume path to your model directory. If you're on Docker Desktop, add the path under **Settings → Resources → File Sharing** first.
+3. **Start services:**
+   ```bash
+   docker compose up -d
+   ```
+   The app will be available at `http://localhost:5782`.
+
+### Option B — Local (development)
+
 1. **Clone the repository** to your local machine.
 2. **Configure Paths**: Open `app.py` and update the following variables to match your system:
   ```python
--- a/app.py
+++ b/app.py
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,31 @@
+services:
+  danbooru-mcp:
+    build: https://git.liveaodh.com/aodhan/danbooru-mcp.git
+    image: danbooru-mcp:latest
+    stdin_open: true
+    restart: unless-stopped
+
+  app:
+    build: .
+    ports:
+      - "5782:5000"
+    environment:
+      # ComfyUI runs on the Docker host
+      COMFYUI_URL: http://10.0.0.200:8188     # Compose manages danbooru-mcp — skip the app's auto-start logic
+      SKIP_MCP_AUTOSTART: "true"
+    volumes:
+      # Persistent data
+      - ./data:/app/data
+      - ./static/uploads:/app/static/uploads
+      - ./instance:/app/instance
+      - ./flask_session:/app/flask_session
+      # Model files (read-only — used for checkpoint/LoRA scanning)
+      - /Volumes/ImageModels:/ImageModels:ro
+      # Docker socket so the app can run danbooru-mcp tool containers
+      - /var/run/docker.sock:/var/run/docker.sock
+    extra_hosts:
+      # Resolve host.docker.internal on Linux hosts
+      - "host.docker.internal:host-gateway"
+    depends_on:
+      - danbooru-mcp
+    restart: unless-stopped
--- a/migrate_actions.py
+++ b/migrate_actions.py
@@ -1,63 +0,0 @@
-import os
-import json
-from collections import OrderedDict
-
-ACTIONS_DIR = 'data/actions'
-
-def migrate_actions():
-    if not os.path.exists(ACTIONS_DIR):
-        print(f"Directory {ACTIONS_DIR} not found.")
-        return
-
-    count = 0
-    for filename in os.listdir(ACTIONS_DIR):
-        if not filename.endswith('.json'):
-            continue
-            
-        filepath = os.path.join(ACTIONS_DIR, filename)
-        try:
-            with open(filepath, 'r') as f:
-                data = json.load(f, object_pairs_hook=OrderedDict)
-            
-            # Check if participants already exists
-            if 'participants' in data:
-                print(f"Skipping {filename}: 'participants' already exists.")
-                continue
-                
-            # Create new ordered dict to enforce order
-            new_data = OrderedDict()
-            
-            # Copy keys up to 'action'
-            found_action = False
-            for key, value in data.items():
-                new_data[key] = value
-                if key == 'action':
-                    found_action = True
-                    # Insert participants here
-                    new_data['participants'] = {
-                        "solo_focus": "true",
-                        "orientation": "MF"
-                    }
-            
-            # If 'action' wasn't found, append at the end
-            if not found_action:
-                print(f"Warning: 'action' key not found in {filename}. Appending 'participants' at the end.")
-                new_data['participants'] = {
-                    "solo_focus": "true",
-                    "orientation": "MF"
-                }
-            
-            # Write back to file
-            with open(filepath, 'w') as f:
-                json.dump(new_data, f, indent=2)
-                
-            count += 1
-            # print(f"Updated {filename}") # Commented out to reduce noise if many files
-            
-        except Exception as e:
-            print(f"Error processing {filename}: {e}")
-
-    print(f"Migration complete. Updated {count} files.")
-
-if __name__ == "__main__":
-    migrate_actions()
--- a/migrate_detailers.py
+++ b/migrate_detailers.py
@@ -1,61 +0,0 @@
-import os
-import json
-import re
-
-DETAILERS_DIR = 'data/detailers'
-
-def migrate_detailers():
-    if not os.path.exists(DETAILERS_DIR):
-        print(f"Directory {DETAILERS_DIR} does not exist.")
-        return
-
-    count = 0
-    for filename in os.listdir(DETAILERS_DIR):
-        if filename.endswith('.json'):
-            file_path = os.path.join(DETAILERS_DIR, filename)
-            try:
-                with open(file_path, 'r') as f:
-                    data = json.load(f)
-                
-                # Create a new ordered dictionary
-                new_data = {}
-                
-                # Copy existing fields up to 'prompt'
-                if 'detailer_id' in data:
-                    new_data['detailer_id'] = data['detailer_id']
-                if 'detailer_name' in data:
-                    new_data['detailer_name'] = data['detailer_name']
-                
-                # Handle 'prompt'
-                prompt_val = data.get('prompt', [])
-                if isinstance(prompt_val, str):
-                    # Split by comma and strip whitespace
-                    new_data['prompt'] = [p.strip() for p in prompt_val.split(',') if p.strip()]
-                else:
-                    new_data['prompt'] = prompt_val
-                
-                # Insert 'focus'
-                if 'focus' not in data:
-                    new_data['focus'] = ""
-                else:
-                    new_data['focus'] = data['focus']
-                
-                # Copy remaining fields
-                for key, value in data.items():
-                    if key not in ['detailer_id', 'detailer_name', 'prompt', 'focus']:
-                        new_data[key] = value
-                
-                # Write back to file
-                with open(file_path, 'w') as f:
-                    json.dump(new_data, f, indent=2)
-                
-                print(f"Migrated {filename}")
-                count += 1
-                
-            except Exception as e:
-                print(f"Error processing {filename}: {e}")
-
-    print(f"Migration complete. Processed {count} files.")
-
-if __name__ == '__main__':
-    migrate_detailers()
--- a/migrate_lora_weight_range.py
+++ b/migrate_lora_weight_range.py
@@ -1,79 +0,0 @@
-#!/usr/bin/env python3
-"""
-Migration: add lora_weight_min / lora_weight_max to every entity JSON.
-
-For each JSON file in the target directories we:
-  - Read the existing lora_weight value (default 1.0 if missing)
-  - Write lora_weight_min = lora_weight (if not already set)
-  - Write lora_weight_max = lora_weight (if not already set)
-  - Leave lora_weight in place (the resolver still uses it as a fallback)
-
-Directories processed (skip data/checkpoints — no LoRA weight there):
-  data/characters/
-  data/clothing/
-  data/actions/
-  data/styles/
-  data/scenes/
-  data/detailers/
-  data/looks/
-"""
-
-import glob
-import json
-import os
-import sys
-
-DIRS = [
-    'data/characters',
-    'data/clothing',
-    'data/actions',
-    'data/styles',
-    'data/scenes',
-    'data/detailers',
-    'data/looks',
-]
-
-dry_run = '--dry-run' in sys.argv
-updated = 0
-skipped = 0
-errors = 0
-
-for directory in DIRS:
-    pattern = os.path.join(directory, '*.json')
-    for path in sorted(glob.glob(pattern)):
-        try:
-            with open(path, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-
-            lora = data.get('lora')
-            if not isinstance(lora, dict):
-                skipped += 1
-                continue
-
-            weight = float(lora.get('lora_weight', 1.0))
-            changed = False
-
-            if 'lora_weight_min' not in lora:
-                lora['lora_weight_min'] = weight
-                changed = True
-            if 'lora_weight_max' not in lora:
-                lora['lora_weight_max'] = weight
-                changed = True
-
-            if changed:
-                if not dry_run:
-                    with open(path, 'w', encoding='utf-8') as f:
-                        json.dump(data, f, indent=2, ensure_ascii=False)
-                        f.write('\n')
-                print(f"  [{'DRY' if dry_run else 'OK'}]  {path}  weight={weight}")
-                updated += 1
-            else:
-                skipped += 1
-
-        except Exception as e:
-            print(f"  [ERR] {path}: {e}", file=sys.stderr)
-            errors += 1
-
-print(f"\nDone. updated={updated}  skipped={skipped}  errors={errors}")
-if dry_run:
-    print("(dry-run — no files were written)")
--- a/migrate_wardrobe.py
+++ b/migrate_wardrobe.py
@@ -1,153 +0,0 @@
-#!/usr/bin/env python3
-"""
-Migration script to convert wardrobe structure from flat to nested format.
-
-Before:
-  "wardrobe": {
-    "headwear": "...",
-    "top": "...",
-    ...
-  }
-
-After:
-  "wardrobe": {
-    "default": {
-      "headwear": "...",
-      "top": "...",
-      ...
-    }
-  }
-
-This enables multiple outfits per character.
-"""
-
-import os
-import json
-from pathlib import Path
-
-
-def migrate_wardrobe(characters_dir: str = "characters", dry_run: bool = False):
-    """
-    Migrate all character JSON files to the new wardrobe structure.
-    
-    Args:
-        characters_dir: Path to the directory containing character JSON files
-        dry_run: If True, only print what would be changed without modifying files
-    """
-    characters_path = Path(characters_dir)
-    
-    if not characters_path.exists():
-        print(f"Error: Directory '{characters_dir}' does not exist")
-        return
-    
-    json_files = list(characters_path.glob("*.json"))
-    
-    if not json_files:
-        print(f"No JSON files found in '{characters_dir}'")
-        return
-    
-    migrated_count = 0
-    skipped_count = 0
-    error_count = 0
-    
-    for json_file in json_files:
-        try:
-            with open(json_file, 'r', encoding='utf-8') as f:
-                data = json.load(f)
-            
-            # Check if character has a wardrobe
-            if 'wardrobe' not in data:
-                print(f"  [SKIP] {json_file.name}: No wardrobe field")
-                skipped_count += 1
-                continue
-            
-            wardrobe = data['wardrobe']
-            
-            # Check if already migrated (wardrobe contains 'default' key with nested dict)
-            if 'default' in wardrobe and isinstance(wardrobe['default'], dict):
-                # Verify it's actually the new format (has wardrobe keys inside)
-                expected_keys = {'headwear', 'top', 'legwear', 'footwear', 'hands', 'accessories', 
-                                'inner_layer', 'outer_layer', 'lower_body', 'gloves'}
-                if any(key in wardrobe['default'] for key in expected_keys):
-                    print(f"  [SKIP] {json_file.name}: Already migrated")
-                    skipped_count += 1
-                    continue
-            
-            # Check if wardrobe is a flat structure (not already nested)
-            # A flat wardrobe has string values, a nested one has dict values
-            if not isinstance(wardrobe, dict):
-                print(f"  [ERROR] {json_file.name}: Wardrobe is not a dictionary")
-                error_count += 1
-                continue
-            
-            # Check if any value is a dict (indicating partial migration or different structure)
-            has_nested_values = any(isinstance(v, dict) for v in wardrobe.values())
-            if has_nested_values:
-                print(f"  [SKIP] {json_file.name}: Wardrobe has nested values, may already be migrated")
-                skipped_count += 1
-                continue
-            
-            # Perform migration
-            new_wardrobe = {
-                "default": wardrobe
-            }
-            data['wardrobe'] = new_wardrobe
-            
-            if dry_run:
-                print(f"  [DRY-RUN] {json_file.name}: Would migrate wardrobe")
-                print(f"            Old: {json.dumps(wardrobe, indent=2)[:100]}...")
-                print(f"            New: {json.dumps(new_wardrobe, indent=2)[:100]}...")
-            else:
-                with open(json_file, 'w', encoding='utf-8') as f:
-                    json.dump(data, f, indent=2, ensure_ascii=False)
-                print(f"  [MIGRATED] {json_file.name}")
-            
-            migrated_count += 1
-            
-        except json.JSONDecodeError as e:
-            print(f"  [ERROR] {json_file.name}: Invalid JSON - {e}")
-            error_count += 1
-        except Exception as e:
-            print(f"  [ERROR] {json_file.name}: {e}")
-            error_count += 1
-    
-    print()
-    print("=" * 50)
-    print(f"Migration complete:")
-    print(f"  - Migrated: {migrated_count}")
-    print(f"  - Skipped:  {skipped_count}")
-    print(f"  - Errors:   {error_count}")
-    if dry_run:
-        print()
-        print("This was a dry run. No files were modified.")
-        print("Run with --execute to apply changes.")
-
-
-if __name__ == "__main__":
-    import argparse
-    
-    parser = argparse.ArgumentParser(
-        description="Migrate character wardrobe structure to support multiple outfits"
-    )
-    parser.add_argument(
-        "--execute",
-        action="store_true",
-        help="Actually modify files (default is dry-run)"
-    )
-    parser.add_argument(
-        "--dir",
-        default="characters",
-        help="Directory containing character JSON files (default: characters)"
-    )
-    
-    args = parser.parse_args()
-    
-    print("=" * 50)
-    print("Wardrobe Migration Script")
-    print("=" * 50)
-    print(f"Directory: {args.dir}")
-    print(f"Mode: {'EXECUTE' if args.execute else 'DRY-RUN'}")
-    print("=" * 50)
-    print()
-    
-    migrate_wardrobe(characters_dir=args.dir, dry_run=not args.execute)
--- a/static/style.css
+++ b/static/style.css
@@ -1,42 +1,78 @@
 /* ============================================================
-   Character Browser — Dark Theme (Indigo / Violet)
+   GAZE — Character Browser Design System
+   Space Grotesk (display) + Inter (body)
+   Deep dark, violet-indigo accent palette
   ============================================================ */

 /* --- Variables ------------------------------------------------ */
 :root {
-  --bg-base:      #0f0f1a;
-  --bg-card:      #1a1a2e;
-  --bg-raised:    #222240;
-  --bg-input:     #16162a;
-  --accent:       #6c63ff;
-  --accent-dim:   #4f46e5;
-  --accent-glow:  rgba(108, 99, 255, 0.22);
-  --border:       #2d2d5e;
-  --border-light: #3a3a6a;
-  --text:         #e2e2f0;
-  --text-muted:   #8888aa;
-  --text-dim:     #5555aa;
-  --success:      #22c55e;
-  --danger:       #ef4444;
-  --warning:      #f59e0b;
-  --info:         #38bdf8;
-  --radius:       10px;
+  /* Backgrounds */
+  --bg-base:      #07070f;
+  --bg-card:      #0c0c1c;
+  --bg-raised:    #111128;
+  --bg-input:     #09091a;
+
+  /* Accent — violet */
+  --accent:       #8b7eff;
+  --accent-dim:   #6c5ce7;
+  --accent-bright:#b0a8ff;
+  --accent-glow:  rgba(139, 126, 255, 0.14);
+  --accent-glow-strong: rgba(139, 126, 255, 0.32);
+
+  /* Borders */
+  --border:       #16163a;
+  --border-light: #21214a;
+  --border-focus: #5548c8;
+
+  /* Text */
+  --text:         #e8e8f5;
+  --text-muted:   #6a6a9a;
+  --text-dim:     #35356a;
+
+  /* Status */
+  --success:      #34d399;
+  --danger:       #f87171;
+  --warning:      #fbbf24;
+  --info:         #60c8ff;
+
+  /* Shape */
+  --radius:       12px;
+  --radius-sm:    8px;
+
+  /* Fonts */
+  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
 }

 /* --- Base ----------------------------------------------------- */
 body {
  background-color: var(--bg-base);
+  /* Subtle radial accent glow — premium depth effect */
+  background-image:
+    radial-gradient(ellipse at 18% 0%, rgba(139, 126, 255, 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 82% 100%, rgba(192, 132, 252, 0.05) 0%, transparent 55%);
+  background-attachment: fixed;
  color: var(--text);
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.6;
  min-height: 100vh;
 }

-a { color: var(--accent); }
-a:hover { color: #9d98ff; }
+a { color: var(--accent-bright); text-decoration: none; }
+a:hover { color: #c4b5fd; }
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+h5, h6 { color: var(--text); }

 /* Scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-card); }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

@@ -44,109 +80,108 @@ a:hover { color: #9d98ff; }
   Navbar
   ============================================================ */
 .navbar {
-  background: rgba(15, 15, 26, 0.95) !important;
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border);
-  padding: 0.55rem 0;
+  background: rgba(7, 7, 15, 0.97) !important;
+  backdrop-filter: blur(24px) saturate(1.3);
+  border-bottom: 1px solid var(--border) !important;
+  padding: 0.5rem 0;
 }

 .navbar-brand {
+  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.18em;
  text-transform: uppercase;
-  background: linear-gradient(90deg, #a78bfa, #6c63ff, #c084fc);
+  background: linear-gradient(135deg, #c084fc 0%, #8b7eff 45%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }
 .navbar-brand:hover {
-  background: linear-gradient(90deg, #c4b5fd, #818cf8, #d8b4fe);
+  background: linear-gradient(135deg, #d8b4fe 0%, #b0a8ff 45%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
 }

 .navbar-logo {
-  height: 28px;
+  height: 26px;
  width: auto;
 }

-/* All nav outline-light buttons become understated link-style items */
+/* Nav links — borderless, subtle hover */
 .navbar .btn-outline-light {
  border: none;
  color: var(--text-muted) !important;
  background: transparent;
-  font-size: 0.82rem;
-  padding: 0.28rem 0.6rem;
-  border-radius: 6px;
+  font-size: 0.79rem;
+  font-weight: 500;
+  padding: 0.28rem 0.58rem;
+  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
+  letter-spacing: 0.01em;
 }
 .navbar .btn-outline-light:hover,
 .navbar .btn-outline-light:focus {
  color: var(--text) !important;
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(139, 126, 255, 0.08);
  box-shadow: none;
 }

-/* Generator and Gallery get accent tint */
 .navbar .btn-outline-light[href="/generator"],
 .navbar .btn-outline-light[href="/gallery"] {
-  color: #9d98ff !important;
+  color: var(--accent-bright) !important;
 }
 .navbar .btn-outline-light[href="/generator"]:hover,
 .navbar .btn-outline-light[href="/gallery"]:hover {
  background: var(--accent-glow);
-  color: #b8b4ff !important;
+  color: #c4b5fd !important;
 }

-/* Create Character */
 .navbar .btn-outline-success {
-  border: 1px solid rgba(34, 197, 94, 0.5);
+  border: 1px solid rgba(52, 211, 153, 0.35);
  color: var(--success) !important;
-  font-size: 0.82rem;
+  font-size: 0.79rem;
+  font-weight: 500;
  padding: 0.28rem 0.7rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  transition: all 0.15s;
 }
 .navbar .btn-outline-success:hover {
-  background: rgba(34, 197, 94, 0.12);
+  background: rgba(52, 211, 153, 0.1);
  border-color: var(--success);
  box-shadow: none;
  color: var(--success) !important;
 }

-/* Vertical divider in navbar */
 .navbar .vr {
-  background-color: var(--border);
+  background-color: var(--border-light);
  opacity: 1;
 }

-/* ---- Queue button in navbar ---- */
+/* Queue button */
 .queue-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-muted);
-  font-size: 1rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 6px;
+  font-size: 0.95rem;
+  padding: 0.2rem 0.48rem;
+  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  line-height: 1;
 }
 .queue-btn:hover {
  color: var(--text);
-  background: rgba(255, 255, 255, 0.07);
-}
-.queue-btn-active {
-  color: var(--accent) !important;
+  background: rgba(255, 255, 255, 0.06);
 }
+.queue-btn-active { color: var(--accent-bright) !important; }
 .queue-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  background: var(--accent);
  color: #fff;
-  font-size: 0.6rem;
+  font-size: 0.58rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
@@ -157,14 +192,12 @@ a:hover { color: #9d98ff; }
  padding: 0 3px;
  line-height: 1;
 }
-.queue-icon {
-  font-size: 0.95rem;
-}
+.queue-icon { font-size: 0.88rem; }

 /* Queue status dots */
 .queue-status-dot {
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
@@ -174,14 +207,13 @@ a:hover { color: #9d98ff; }
 .queue-status-paused     { background: var(--text-dim); }
 .queue-status-done       { background: var(--success); }
 .queue-status-failed     { background: var(--danger); }
-.queue-status-removed    { background: var(--border); }
+.queue-status-removed    { background: var(--border-light); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+  50%       { opacity: 0.35; }
 }

-/* Small button variant for queue actions */
 .btn-xs {
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
@@ -189,6 +221,19 @@ a:hover { color: #9d98ff; }
  line-height: 1.4;
 }

+/* ============================================================
+   Checkpoint Bar
+   ============================================================ */
+.default-checkpoint-bar {
+  background:
+    linear-gradient(to right,
+      rgba(139, 126, 255, 0.04) 0%,
+      transparent 25%,
+      transparent 75%,
+      rgba(139, 126, 255, 0.04) 100%);
+  border-bottom: 1px solid var(--border) !important;
+}
+
 /* ============================================================
   Cards
   ============================================================ */
@@ -204,10 +249,10 @@ a:hover { color: #9d98ff; }
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 600;
-  font-size: 0.88rem;
+  font-size: 0.84rem;
+  letter-spacing: 0.01em;
 }

-/* Override Bootstrap bg utility classes on card-header */
 .card-header.bg-primary,
 .card-header.bg-dark,
 .card-header.bg-secondary,
@@ -224,19 +269,76 @@ a:hover { color: #9d98ff; }

 .card-body { color: var(--text); }

-/* Character / category card hover */
+/* ============================================================
+   Gallery Cards (.character-card)
+   ============================================================ */
 .character-card {
  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  overflow: hidden;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  display: flex !important;
+  flex-direction: column;
 }
 .character-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 32px var(--accent-glow);
+  transform: translateY(-5px);
+  box-shadow: 0 20px 60px rgba(4, 4, 10, 0.7), 0 0 0 1px var(--accent);
  border-color: var(--accent) !important;
 }

+/* Gallery card image container — portrait 2:3 ratio */
+.character-card .img-container {
+  aspect-ratio: 2 / 3;
+  height: auto;
+  min-height: unset;
+  flex-shrink: 0;
+}
+
+.character-card .img-container img {
+  transition: transform 0.4s ease;
+}
+.character-card:hover .img-container img {
+  transform: scale(1.07);
+}
+
+/* Subtle accent tint on hover via pseudo-overlay */
+.character-card:hover .img-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 55%, rgba(108, 92, 231, 0.12) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Compact name strip */
+.character-card .card-body {
+  padding: 0.55rem 0.7rem 0.4rem;
+  flex: 1;
+}
+.character-card .card-title {
+  font-family: var(--font-display);
+  font-size: 0.84rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
+}
+.character-card .card-text {
+  display: none; /* Hide verbose prompt text — cleaner gallery look */
+}
+.character-card .card-footer {
+  padding: 0.28rem 0.7rem;
+}
+.character-card .card-footer small {
+  font-size: 0.66rem;
+  font-family: monospace;
+  color: var(--text-dim) !important;
+}
+
 /* ============================================================
-   Image container
+   Image container (detail pages and standalone use)
   ============================================================ */
 .img-container {
  height: 300px;
@@ -246,6 +348,7 @@ a:hover { color: #9d98ff; }
  align-items: center;
  justify-content: center;
  border-radius: var(--radius) var(--radius) 0 0;
+  position: relative;
 }
 .img-container img {
  width: 100%;
@@ -265,15 +368,16 @@ a:hover { color: #9d98ff; }
 .form-control,
 .form-select {
  background-color: var(--bg-input) !important;
-  border-color: var(--border) !important;
+  border-color: var(--border-light) !important;
  color: var(--text) !important;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
+  font-size: 0.875rem;
 }
 .form-control:focus,
 .form-select:focus {
-  border-color: var(--accent) !important;
-  box-shadow: 0 0 0 3px var(--accent-glow) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22) !important;
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
 }
@@ -282,10 +386,11 @@ a:hover { color: #9d98ff; }
 .form-select:disabled {
  background-color: var(--bg-raised) !important;
  color: var(--text-muted) !important;
+  opacity: 0.65;
 }

-.form-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
-.form-text  { color: var(--text-dim) !important; }
+.form-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; }
+.form-text  { color: var(--text-dim) !important; font-size: 0.77rem; }

 .form-check-input {
  background-color: var(--bg-input);
@@ -295,8 +400,11 @@ a:hover { color: #9d98ff; }
  background-color: var(--accent);
  border-color: var(--accent);
 }
-.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-glow); }
-.form-check-label { color: var(--text); }
+.form-check-input:focus {
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22);
+  border-color: var(--border-focus);
+}
+.form-check-label { color: var(--text); font-size: 0.875rem; }

 option { background-color: var(--bg-raised); color: var(--text); }

@@ -304,22 +412,24 @@ option { background-color: var(--bg-raised); color: var(--text); }
   Buttons
   ============================================================ */
 .btn-primary {
-  background-color: var(--accent);
-  border-color: var(--accent-dim);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
+  border: 1px solid var(--accent-dim);
  color: #fff;
+  font-weight: 500;
 }
 .btn-primary:hover,
 .btn-primary:active,
 .btn-primary:focus {
-  background-color: var(--accent-dim);
-  border-color: #3730a3;
-  box-shadow: 0 0 0 3px var(--accent-glow);
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(139, 126, 255, 0.22);
  color: #fff;
 }

 .btn-outline-primary {
  border-color: var(--accent);
  color: var(--accent);
+  font-weight: 500;
 }
 .btn-outline-primary:hover,
 .btn-outline-primary:active {
@@ -332,9 +442,10 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-raised);
  border-color: var(--border-light);
  color: var(--text);
+  font-weight: 500;
 }
 .btn-secondary:hover {
-  background-color: #2a2a50;
+  background-color: #1c1c38;
  border-color: var(--border-light);
  color: var(--text);
 }
@@ -342,6 +453,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
 .btn-outline-secondary {
  border-color: var(--border-light);
  color: var(--text-muted);
+  font-weight: 500;
 }
 .btn-outline-secondary:hover,
 .btn-outline-secondary:active {
@@ -352,36 +464,36 @@ option { background-color: var(--bg-raised); color: var(--text); }

 /* Active resolution preset */
 .btn-secondary.preset-btn {
-  background-color: var(--accent);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  border-color: var(--accent-dim);
  color: #fff;
 }

-.btn-outline-success { border-color: var(--success); color: var(--success); }
-.btn-outline-success:hover { background-color: rgba(34,197,94,.12); border-color: var(--success); color: var(--success); }
-.btn-success { background-color: var(--success); border-color: #16a34a; color: #fff; }
-.btn-success:hover { background-color: #16a34a; border-color: #15803d; color: #fff; }
+.btn-outline-success { border-color: var(--success); color: var(--success); font-weight: 500; }
+.btn-outline-success:hover { background-color: rgba(52,211,153,.1); border-color: var(--success); color: var(--success); }
+.btn-success { background-color: #059669; border-color: #047857; color: #fff; font-weight: 500; }
+.btn-success:hover { background-color: #047857; border-color: #065f46; color: #fff; }

-.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
-.btn-outline-danger:hover { background-color: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); }
-.btn-danger { background-color: var(--danger); border-color: #dc2626; color: #fff; }
-.btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; color: #fff; }
+.btn-outline-danger { border-color: var(--danger); color: var(--danger); font-weight: 500; }
+.btn-outline-danger:hover { background-color: rgba(248,113,113,.1); border-color: var(--danger); color: var(--danger); }
+.btn-danger { background-color: #dc2626; border-color: #b91c1c; color: #fff; font-weight: 500; }
+.btn-danger:hover { background-color: #b91c1c; border-color: #991b1b; color: #fff; }

-.btn-outline-warning { border-color: var(--warning); color: var(--warning); }
-.btn-outline-warning:hover { background-color: rgba(245,158,11,.12); border-color: var(--warning); color: var(--warning); }
+.btn-outline-warning { border-color: var(--warning); color: var(--warning); font-weight: 500; }
+.btn-outline-warning:hover { background-color: rgba(251,191,36,.1); border-color: var(--warning); color: var(--warning); }

 .btn-light, .btn-outline-light {
-  background-color: rgba(255,255,255,.08);
+  background-color: rgba(255,255,255,.06);
  border-color: var(--border-light);
  color: var(--text);
+  font-weight: 500;
 }
 .btn-light:hover, .btn-outline-light:hover {
-  background-color: rgba(255,255,255,.14);
+  background-color: rgba(255,255,255,.1);
  color: var(--text);
 }

-/* Close button override (visible on dark bg) */
-.btn-close { filter: invert(1) brightness(0.8); }
+.btn-close { filter: invert(1) brightness(0.7); }

 /* ============================================================
   Accordion
@@ -390,60 +502,57 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
 }
-
 .accordion-button {
  background-color: var(--bg-raised) !important;
  color: var(--text) !important;
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 .accordion-button:not(.collapsed) {
-  background-color: #252450 !important;
-  color: var(--text) !important;
+  background-color: #181835 !important;
+  color: var(--accent-bright) !important;
  box-shadow: inset 0 -1px 0 var(--border);
 }
-/* Make the chevron arrow visible on dark bg */
 .accordion-button::after,
 .accordion-button:not(.collapsed)::after {
-  filter: invert(1) brightness(0.75);
+  filter: invert(1) brightness(0.6);
 }
 .accordion-button:focus { box-shadow: none; }
 .accordion-body { background-color: var(--bg-card); padding: 0.5rem; }

 /* Mix & match list items */
-.mix-item { user-select: none; border-radius: 6px; }
-.mix-item:hover { background-color: rgba(108, 99, 255, 0.12) !important; }
-
-/* N/A placeholder for items without images */
+.mix-item { user-select: none; border-radius: var(--radius-sm); }
+.mix-item:hover { background-color: rgba(139, 126, 255, 0.1) !important; }
 .mix-item .bg-light {
  background-color: var(--bg-raised) !important;
  color: var(--text-dim) !important;
 }

 /* ============================================================
-   Progress bars
+   Progress Bars
   ============================================================ */
 .progress {
  background-color: var(--bg-raised);
  border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 999px;
 }
 .progress-bar {
-  background-color: var(--accent);
-  border-radius: 8px;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+  border-radius: 999px;
  transition: width 0.4s ease-in-out;
 }
-.progress-bar.bg-success { background-color: var(--success) !important; }
-.progress-bar.bg-info    { background-color: var(--info)    !important; }
+.progress-bar.bg-success { background: var(--success) !important; }
+.progress-bar.bg-info    { background: var(--info)    !important; }

 /* ============================================================
   Badges
   ============================================================ */
 .badge.bg-primary   { background-color: var(--accent)  !important; }
-.badge.bg-secondary { background-color: #2e2e52        !important; color: var(--text-muted) !important; }
-.badge.bg-info      { background-color: var(--info)    !important; color: #0f172a !important; }
-.badge.bg-success   { background-color: var(--success) !important; }
+.badge.bg-secondary { background-color: #1b1b40        !important; color: var(--text-muted) !important; }
+.badge.bg-info      { background-color: var(--info)    !important; color: #0c1a2b !important; }
+.badge.bg-success   { background-color: var(--success) !important; color: #012218 !important; }
 .badge.bg-danger    { background-color: var(--danger)  !important; }
-.badge.bg-warning   { background-color: var(--warning) !important; color: #0f172a !important; }
+.badge.bg-warning   { background-color: var(--warning) !important; color: #1a0f00 !important; }
 .badge.bg-light     { background-color: var(--bg-raised) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }

 /* ============================================================
@@ -451,39 +560,50 @@ option { background-color: var(--bg-raised); color: var(--text); }
   ============================================================ */
 .modal-content {
  background-color: var(--bg-card);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(139, 126, 255, 0.08);
 }
 .modal-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-raised);
  border-radius: var(--radius) var(--radius) 0 0;
+  padding: 1rem 1.25rem;
 }
 .modal-footer {
  border-top: 1px solid var(--border);
  background-color: var(--bg-raised);
  border-radius: 0 0 var(--radius) var(--radius);
+  padding: 0.75rem 1.25rem;
+}
+.modal-title {
+  color: var(--text);
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1rem;
 }
-.modal-title { color: var(--text); }

 /* ============================================================
   Alerts
   ============================================================ */
 .alert-info {
-  background-color: rgba(56, 189, 248, 0.1);
-  border-color: rgba(56, 189, 248, 0.3);
+  background-color: rgba(96, 200, 255, 0.08);
+  border-color: rgba(96, 200, 255, 0.22);
  color: var(--info);
+  border-radius: var(--radius-sm);
 }
 .alert-success {
-  background-color: rgba(34, 197, 94, 0.1);
-  border-color: rgba(34, 197, 94, 0.3);
+  background-color: rgba(52, 211, 153, 0.08);
+  border-color: rgba(52, 211, 153, 0.22);
  color: var(--success);
+  border-radius: var(--radius-sm);
 }
 .alert-danger {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
+  background-color: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.22);
  color: var(--danger);
+  border-radius: var(--radius-sm);
 }

 /* ============================================================
@@ -493,6 +613,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
  background-color: var(--bg-card);
  border-color: var(--border);
  color: var(--text-muted);
+  font-size: 0.875rem;
 }
 .page-link:hover {
  background-color: var(--bg-raised);
@@ -511,22 +632,31 @@ option { background-color: var(--bg-raised); color: var(--text); }
 }

 /* ============================================================
-   Text / utility overrides
+   Text / Utility overrides
   ============================================================ */
 .text-muted { color: var(--text-muted) !important; }
-h1, h2, h3, h4, h5, h6 { color: var(--text); }
 .border-bottom { border-color: var(--border) !important; }
 .border-top    { border-color: var(--border) !important; }
 .border        { border-color: var(--border) !important; }
-hr             { border-color: var(--border); }
-small          { color: var(--text-muted); }
+hr             { border-color: var(--border); opacity: 1; }
+small          { color: var(--text-muted); font-size: 0.8em; }
 .font-monospace { color: var(--text); }
-
-/* Spinner on dark bg */
 .spinner-border.text-secondary { color: var(--text-muted) !important; }

+/* List group */
+.list-group-item {
+  background-color: var(--bg-card);
+  border-color: var(--border);
+  color: var(--text);
+}
+.list-group-item:hover { background-color: var(--bg-raised); }
+.list-group-flush .list-group-item {
+  border-left: none;
+  border-right: none;
+}
+
 /* ============================================================
-   Gallery page
+   Gallery Page
   ============================================================ */
 .gallery-card {
  position: relative;
@@ -539,20 +669,20 @@ small          { color: var(--text-muted); }
 }
 .gallery-card:hover {
  border-color: var(--accent);
-  box-shadow: 0 0 20px var(--accent-glow);
+  box-shadow: 0 0 28px var(--accent-glow);
 }
 .gallery-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
-  transition: transform 0.2s;
+  transition: transform 0.25s ease;
 }
 .gallery-card:hover img { transform: scale(1.04); }
 .gallery-card .overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
-  background: linear-gradient(transparent, rgba(0,0,0,0.88));
-  padding: 28px 8px 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  padding: 32px 10px 10px;
  opacity: 0;
  transition: opacity 0.2s;
 }
@@ -564,16 +694,16 @@ small          { color: var(--text-muted); }

 .gallery-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
 }
-@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
-@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
+@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
+@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }

 /* Lightbox */
 #lightbox {
  display: none; position: fixed; inset: 0;
-  background: rgba(0, 0, 0, 0.94); z-index: 9999;
+  background: rgba(0, 0, 0, 0.97); z-index: 9999;
  align-items: center; justify-content: center; flex-direction: column;
 }
 #lightbox.active { display: flex; }
@@ -581,16 +711,16 @@ small          { color: var(--text-muted); }
 #lightbox-img {
  max-width: 90vw; max-height: 80vh; object-fit: contain;
  border-radius: 8px;
-  box-shadow: 0 0 60px rgba(108, 99, 255, 0.3);
+  box-shadow: 0 0 80px rgba(139, 126, 255, 0.22);
  cursor: zoom-in; display: block;
 }
-#lightbox-meta  { color: #eee; margin-top: 10px; text-align: center; font-size: .85rem; }
-#lightbox-hint  { color: rgba(255,255,255,.38); font-size: .75rem; margin-top: 3px; }
+#lightbox-meta  { color: #eee; margin-top: 12px; text-align: center; font-size: .85rem; }
+#lightbox-hint  { color: rgba(255,255,255,.3); font-size: .75rem; margin-top: 4px; }
 #lightbox-close { position: fixed; top: 16px; right: 20px; font-size: 2rem; color: #fff; cursor: pointer; z-index: 10000; line-height: 1; }
 #lightbox-actions { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; gap: 8px; }

 /* Prompt modal metadata */
-.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .85rem; }
+.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; }
 .meta-grid .meta-label { color: var(--text-muted); white-space: nowrap; font-weight: 600; }
 .meta-grid .meta-value { font-family: monospace; word-break: break-all; color: var(--text); }

@@ -602,49 +732,10 @@ small          { color: var(--text-muted); }
  font-size: .8rem; font-family: monospace; margin: 2px;
  color: var(--text);
 }
-.lora-chip .lora-strength { color: var(--accent); }
+.lora-chip .lora-strength { color: var(--accent-bright); }

 /* ============================================================
-   Misc
-   ============================================================ */
-/* Vertical rule in navbar */
-.vr { opacity: 1; background-color: var(--border); }
-
-/* Inline icons inside buttons */
-.btn img { height: 1em; vertical-align: -0.125em; }
-
-/* Icon-only square button */
-.btn-icon {
-  width: 34px;
-  height: 34px;
-  padding: 0;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.btn-icon img {
-  width: 18px;
-  height: 18px;
-  filter: brightness(0) invert(1);
-}
-
-/* Make forms invisible to flex layout so buttons flow naturally */
-.d-contents { display: contents !important; }
-
-/* Tags display */
-.badge.rounded-pill { font-weight: 400; }
-
-/* Textarea read-only */
-textarea[readonly] {
-  background-color: var(--bg-raised) !important;
-  color: var(--text) !important;
-  border-color: var(--border) !important;
-  resize: vertical;
-}
-
-/* ============================================================
-   Service status indicators (navbar)
+   Service Status Indicators (navbar)
   ============================================================ */
 .service-status {
  display: inline-flex;
@@ -652,30 +743,63 @@ textarea[readonly] {
  gap: 4px;
  cursor: default;
  user-select: none;
-  opacity: 0.85;
+  opacity: 0.8;
 }
 .service-status:hover { opacity: 1; }

 .status-dot {
  display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.4s ease;
 }
-.status-dot.status-ok       { background-color: #3dd68c; box-shadow: 0 0 4px #3dd68c88; }
-.status-dot.status-error    { background-color: #f06080; box-shadow: 0 0 4px #f0608088; }
-.status-dot.status-checking { background-color: #888; animation: status-pulse 1.2s ease-in-out infinite; }
+.status-dot.status-ok       { background-color: #34d399; box-shadow: 0 0 5px rgba(52, 211, 153, 0.55); }
+.status-dot.status-error    { background-color: #f87171; box-shadow: 0 0 5px rgba(248, 113, 113, 0.55); }
+.status-dot.status-checking { background-color: var(--border-light); animation: status-pulse 1.4s ease-in-out infinite; }

 .status-label {
  font-size: 0.7rem;
  font-weight: 500;
-  color: rgba(255,255,255,0.65);
+  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
 }

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.3; }
+  50%       { opacity: 0.2; }
+}
+
+/* ============================================================
+   Misc
+   ============================================================ */
+.vr { opacity: 1; background-color: var(--border-light); }
+
+.btn img { height: 1em; vertical-align: -0.125em; }
+
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.btn-icon img {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1);
+}
+
+.d-contents { display: contents !important; }
+
+.badge.rounded-pill { font-weight: 400; }
+
+textarea[readonly] {
+  background-color: var(--bg-raised) !important;
+  color: var(--text) !important;
+  border-color: var(--border) !important;
+  resize: vertical;
 }
--- a/templates/actions/index.html
+++ b/templates/actions/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for action in actions %}
    <div class="col" id="card-{{ action.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/action/{{ action.slug }}'">
--- a/templates/checkpoints/index.html
+++ b/templates/checkpoints/index.html
@@ -44,7 +44,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for ckpt in checkpoints %}
    <div class="col" id="card-{{ ckpt.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">
--- a/templates/detailers/index.html
+++ b/templates/detailers/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for detailer in detailers %}
    <div class="col" id="card-{{ detailer.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/detailer/{{ detailer.slug }}'">
--- a/templates/index.html
+++ b/templates/index.html
@@ -39,7 +39,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for char in characters %}
    <div class="col" id="card-{{ char.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/character/{{ char.slug }}'">
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -6,7 +6,7 @@
    <title>GAZE</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
 </head>
--- a/templates/looks/index.html
+++ b/templates/looks/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for look in looks %}
    <div class="col" id="card-{{ look.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">
--- a/templates/outfits/index.html
+++ b/templates/outfits/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for outfit in outfits %}
    <div class="col" id="card-{{ outfit.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/outfit/{{ outfit.slug }}'">
--- a/templates/scenes/index.html
+++ b/templates/scenes/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for scene in scenes %}
    <div class="col" id="card-{{ scene.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/scene/{{ scene.slug }}'">
--- a/templates/styles/index.html
+++ b/templates/styles/index.html
@@ -47,7 +47,7 @@
    </div>
 </div>

-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
    {% for style in styles %}
    <div class="col" id="card-{{ style.slug }}">
        <div class="card h-100 character-card" onclick="window.location.href='/style/{{ style.slug }}'">