diff --git a/.gitignore b/.gitignore
index 507be5c3..d86469d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,6 +39,7 @@ htmlcov/
 # Runtime job artifacts and local build scratch
 data/
 jobs/
+settings.json
 .run/
 .build
 
@@ -77,3 +78,6 @@ Thumbs.db
 
 # Tool versions
 .python-version
+
+# Imported design references (kept local, not shipped)
+design/
diff --git a/app/api/jobs.py b/app/api/jobs.py
index 17dc365c..db17a2cb 100644
--- a/app/api/jobs.py
+++ b/app/api/jobs.py
@@ -12,14 +12,7 @@
 from fastapi import APIRouter, HTTPException, Request
 from pydantic import BaseModel, field_validator
 
-from app.core.config import (
-    JOB_ID_RE,
-    JOBS_DIR,
-    MAX_DURATION_SEC,
-    MAX_PENDING_JOBS,
-    STEM_NAMES,
-    ffprobe_executable,
-)
+from app.core.config import JOB_ID_RE, JOBS_DIR, MAX_PENDING_JOBS, STEM_NAMES, ffprobe_executable
 from app.core.models import Job
 from app.core.registry import all_jobs as registry_all_jobs
 from app.core.registry import get as registry_get
@@ -27,6 +20,7 @@
 from app.core.registry import persist as registry_persist
 from app.core.registry import register_if_capacity as registry_register_if_capacity
 from app.core.registry import remove as registry_remove
+from app.core.settings import get_max_duration_sec
 from app.pipeline import run_local_pipeline, run_pipeline
 from app.pipeline.download import InvalidYouTubeURL, validate_youtube_url
 
@@ -213,12 +207,11 @@ async def _create_local_job(request: Request) -> dict[str, str]:
         except Exception as e:
             raise HTTPException(status_code=422, detail=f"Could not read file duration: {e}") from e
 
-        if duration > MAX_DURATION_SEC:
+        max_duration = get_max_duration_sec()
+        if duration > max_duration:
             raise HTTPException(
                 status_code=422,
-                detail=(
-                    f"File is {int(duration // 60)} min — limit is {MAX_DURATION_SEC // 60} min"
-                ),
+                detail=(f"File is {int(duration // 60)} min — limit is {max_duration // 60} min"),
             )
     except HTTPException:
         shutil.rmtree(job_dir, ignore_errors=True)
diff --git a/app/api/stems.py b/app/api/stems.py
index 5447ddb3..396baecd 100644
--- a/app/api/stems.py
+++ b/app/api/stems.py
@@ -6,6 +6,7 @@
 import re
 import subprocess
 import tempfile
+import uuid
 import zipfile
 from pathlib import Path
 
@@ -99,6 +100,50 @@ async def _stream_ffmpeg(cmd: list[str]):
         await proc.wait()
 
 
+async def _ensure_cached_mp3(src: Path) -> Path:
+    """Transcode `src` (a stem WAV) to a sibling `<name>.mp3`, cached on disk.
+    Re-encoding a full song on every request is the slow part of loading a track
+    on mobile (≈3s/stem × 6 in parallel); caching makes repeat loads instant.
+    Written atomically (temp + rename) so concurrent fetches can't serve a
+    partial file."""
+    dest = src.with_suffix(".mp3")
+    if dest.is_file() and dest.stat().st_mtime >= src.stat().st_mtime:
+        return dest
+    tmp = dest.with_name(f".{dest.name}.{uuid.uuid4().hex}.tmp")
+    cmd = [
+        ffmpeg_executable(),
+        "-nostdin",
+        "-loglevel",
+        "error",
+        "-y",
+        "-i",
+        str(src),
+        "-q:a",
+        "2",  # VBR ~190 kbps
+        "-f",
+        "mp3",
+        str(tmp),
+    ]
+    proc = await asyncio.create_subprocess_exec(
+        *cmd, stdout=asyncio.subprocess.DEVNULL, stderr=asyncio.subprocess.PIPE
+    )
+    try:
+        _, stderr = await asyncio.wait_for(proc.communicate(), timeout=TIMEOUT_FFMPEG)
+    except (TimeoutError, asyncio.TimeoutError):
+        proc.kill()
+        await proc.wait()
+        tmp.unlink(missing_ok=True)
+        raise HTTPException(status_code=504, detail="mp3 transcode timed out") from None
+    if proc.returncode != 0:
+        tmp.unlink(missing_ok=True)
+        logger.warning(
+            "mp3 transcode failed for %s: %s", src.name, (stderr or b"").decode("utf-8", "replace")
+        )
+        raise HTTPException(status_code=500, detail="mp3 transcode failed")
+    os.replace(tmp, dest)
+    return dest
+
+
 @router.get("/jobs/{job_id}/stems/peaks.json")
 async def get_stem_peaks(job_id: str) -> Response:
     """Return pre-computed waveform peaks for all stems."""
@@ -166,8 +211,9 @@ async def get_stem_mp3(
     name: str,
     start: float | None = Query(default=None, ge=0, description="Trim start in seconds"),
     end: float | None = Query(default=None, gt=0, description="Trim end in seconds"),
-) -> StreamingResponse:
-    """Stream a stem as MP3 (VBR ~190 kbps). Optional ?start=&end= trims to a time region."""
+) -> Response:
+    """Stem as MP3 (VBR ~190 kbps). Full stems are cached to disk; ?start=&end=
+    streams a freshly-trimmed region (uncached)."""
     path = _validate_stem_path(job_id, name)
 
     if (start is None) != (end is None) or (start is not None and start >= end):
@@ -176,6 +222,21 @@ async def get_stem_mp3(
             detail="start and end are both required and start must be less than end",
         )
 
+    # Full-stem requests (no trim) are cached to disk so repeat loads — the
+    # common case for the mobile player — are instant instead of re-encoding.
+    if start is None:
+        cached = await _ensure_cached_mp3(path)
+        return FileResponse(
+            cached,
+            media_type="audio/mpeg",
+            headers={
+                "Content-Disposition": f'attachment; filename="{name}.mp3"',
+                # Stems are immutable once a job is done — let the phone cache
+                # them so a re-load is instant and offline-friendly.
+                "Cache-Control": "public, max-age=31536000, immutable",
+            },
+        )
+
     pre_seek = ["-ss", str(start)] if start is not None else []
     post_seek = ["-t", str(end - start)] if start is not None else []
 
diff --git a/app/core/settings.py b/app/core/settings.py
new file mode 100644
index 00000000..68e7fae9
--- /dev/null
+++ b/app/core/settings.py
@@ -0,0 +1,118 @@
+"""Runtime, user-toggleable settings (persisted to disk).
+
+These are read live (unlike the env-var constants in config.py, which are fixed
+at startup), so the Settings UI can change them without a restart:
+
+- `allow_network`     — whether StemDeck answers requests from other devices.
+- `max_duration_sec`  — longest track accepted for processing.
+- `video_max_height`  — max video resolution for MP4 export / YouTube pulls.
+
+Defaults fall back to the config.py constants (which honor their env vars), so
+nothing changes until the user overrides a value.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import os
+import threading
+
+from app.core.config import DATA_DIR, MAX_DURATION_SEC, VIDEO_MAX_HEIGHT
+
+_log = logging.getLogger("stemdeck.settings")
+
+_SETTINGS_PATH = DATA_DIR / "settings.json"
+_LOCK = threading.RLock()
+_state: dict | None = None  # whole settings dict, loaded lazily
+
+# Clamp bounds. Max track length is capped at 20 min (the product ceiling).
+_DURATION_MIN, _DURATION_MAX = 60, 1200  # 1 min .. 20 min
+_HEIGHT_MIN, _HEIGHT_MAX = 144, 2160
+
+
+def _default_allow_network() -> bool:
+    # Off by default everywhere — the user explicitly opts other devices in.
+    # STEMDECK_ALLOW_NETWORK=1 can pre-enable it (e.g. headless/Docker deploys).
+    env = os.environ.get("STEMDECK_ALLOW_NETWORK")
+    if env is not None:
+        return env.strip() == "1"
+    return False
+
+
+def _load() -> dict:
+    try:
+        data = json.loads(_SETTINGS_PATH.read_text(encoding="utf-8"))
+        if isinstance(data, dict):
+            return data
+    except FileNotFoundError:
+        pass  # no settings file yet — first run; use defaults
+    except Exception:
+        # Corrupt/unreadable file: fall back to defaults rather than crash.
+        _log.warning("could not read settings from %s", _SETTINGS_PATH, exc_info=True)
+    return {}
+
+
+def _ensure() -> dict:
+    global _state
+    if _state is None:
+        _state = _load()
+    return _state
+
+
+def _save() -> None:
+    try:
+        _SETTINGS_PATH.parent.mkdir(parents=True, exist_ok=True)
+        _SETTINGS_PATH.write_text(json.dumps(_ensure()), encoding="utf-8")
+    except Exception:
+        # Persistence is best-effort (read-only FS, permissions): the in-memory
+        # value still applies for this session, so don't fail the request.
+        _log.warning("could not persist settings to %s", _SETTINGS_PATH, exc_info=True)
+
+
+def _num(v: object) -> int | None:
+    return int(v) if isinstance(v, (int, float)) and not isinstance(v, bool) else None
+
+
+# ── allow_network ──
+def get_allow_network() -> bool:
+    with _LOCK:
+        v = _ensure().get("allow_network")
+        return v if isinstance(v, bool) else _default_allow_network()
+
+
+def set_allow_network(value: bool) -> bool:
+    with _LOCK:
+        _ensure()["allow_network"] = bool(value)
+        _save()
+        return bool(value)
+
+
+# ── max_duration_sec ──
+def get_max_duration_sec() -> int:
+    with _LOCK:
+        v = _num(_ensure().get("max_duration_sec"))
+        return max(_DURATION_MIN, min(_DURATION_MAX, v)) if v is not None else MAX_DURATION_SEC
+
+
+def set_max_duration_sec(value: int) -> int:
+    with _LOCK:
+        clamped = max(_DURATION_MIN, min(_DURATION_MAX, int(value)))
+        _ensure()["max_duration_sec"] = clamped
+        _save()
+        return clamped
+
+
+# ── video_max_height ──
+def get_video_max_height() -> int:
+    with _LOCK:
+        v = _num(_ensure().get("video_max_height"))
+        return max(_HEIGHT_MIN, min(_HEIGHT_MAX, v)) if v is not None else VIDEO_MAX_HEIGHT
+
+
+def set_video_max_height(value: int) -> int:
+    with _LOCK:
+        clamped = max(_HEIGHT_MIN, min(_HEIGHT_MAX, int(value)))
+        _ensure()["video_max_height"] = clamped
+        _save()
+        return clamped
diff --git a/app/main.py b/app/main.py
index 9ee4c384..4558f918 100644
--- a/app/main.py
+++ b/app/main.py
@@ -2,15 +2,19 @@
 
 import asyncio
 import ctypes
+import functools
 import logging
 import os
+import re
 import signal
+import socket
 from collections.abc import AsyncIterator
 from contextlib import asynccontextmanager
 from importlib.metadata import PackageNotFoundError
 from importlib.metadata import version as package_version
 
-from fastapi import FastAPI, Request
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.responses import FileResponse, PlainTextResponse
 from fastapi.staticfiles import StaticFiles
 
 from app.api.router import router
@@ -24,6 +28,14 @@
     ensure_runtime_dirs,
 )
 from app.core.registry import restore as restore_registry
+from app.core.settings import (
+    get_allow_network,
+    get_max_duration_sec,
+    get_video_max_height,
+    set_allow_network,
+    set_max_duration_sec,
+    set_video_max_height,
+)
 from app.pipeline.collect import sweep_old_jobs
 
 # Show our INFO-level logs through uvicorn's root handler. Without this,
@@ -137,6 +149,21 @@ async def lifespan(_: FastAPI) -> AsyncIterator[None]:
     yield
 
 
+# Phones hitting the self-hosted server URL get the mobile UI; everything
+# else (desktop browsers, and the Tauri webviews, which all report desktop
+# user-agents) gets the DAW. Tablets are intentionally treated as desktop —
+# the DAW layout is usable there. "Mobi" is the cross-browser marker for a
+# phone form factor (Chrome/Firefox/Safari all include it); the rest cover
+# vendors that don't.
+_MOBILE_UA_RE = re.compile(
+    r"Mobi|Android|iPhone|iPod|IEMobile|BlackBerry|Opera Mini", re.IGNORECASE
+)
+
+
+def _is_mobile_ua(user_agent: str) -> bool:
+    return bool(user_agent) and _MOBILE_UA_RE.search(user_agent) is not None
+
+
 app = FastAPI(
     title="StemDeck",
     description="Paste a YouTube URL or upload an audio file, get audio stems split into a DAW-style player.",
@@ -145,6 +172,23 @@ async def lifespan(_: FastAPI) -> AsyncIterator[None]:
 )
 
 
+@app.get("/", include_in_schema=False)
+def index(request: Request) -> FileResponse:
+    """Serve the mobile shell to phones, the DAW to everyone else. `?ui=mobile`
+    / `?ui=desktop` forces either one (handy for testing from a desktop). This
+    route is registered before the StaticFiles mount at "/", so it wins for the
+    bare path while the mount still serves every other asset."""
+    ui = request.query_params.get("ui")
+    if ui == "mobile":
+        mobile = True
+    elif ui == "desktop":
+        mobile = False
+    else:
+        mobile = _is_mobile_ua(request.headers.get("user-agent", ""))
+    page = "mobile/index.html" if mobile else "index.html"
+    return FileResponse(STATIC_DIR / page)
+
+
 @app.get("/health", include_in_schema=False)
 def health_root() -> dict[str, object]:
     return health()
@@ -162,6 +206,58 @@ def health() -> dict[str, object]:
     }
 
 
+def _is_lan_ipv4(ip: str) -> bool:
+    """A reachable IPv4 LAN address to show another device: not IPv6 (link-local
+    needs a zone index and won't work in a browser), not loopback, not the
+    169.254.x auto-config range."""
+    if ":" in ip:  # IPv6
+        return False
+    if _is_loopback(ip) or ip.startswith("169.254."):
+        return False
+    parts = ip.split(".")
+    return len(parts) == 4 and all(p.isdigit() for p in parts)
+
+
+def _settings_payload() -> dict[str, object]:
+    return {
+        "allow_network": get_allow_network(),
+        "max_duration_sec": get_max_duration_sec(),
+        "video_max_height": get_video_max_height(),
+    }
+
+
+@app.get("/api/settings", tags=["settings"])
+def get_settings(request: Request) -> dict[str, object]:
+    # LAN addresses other devices can use — loopback excluded (only works on the
+    # host). The port is whatever this request came in on.
+    port = request.url.port or 8000
+    addresses = sorted(f"http://{ip}:{port}" for ip in _local_ips() if _is_lan_ipv4(ip))
+    return {**_settings_payload(), "lan_addresses": addresses}
+
+
+@app.post("/api/settings", tags=["settings"])
+async def update_settings(request: Request) -> dict[str, object]:
+    """Update runtime settings. Reachable from the host machine always; from a
+    LAN device only while network access is currently on (the gate below), so a
+    phone can't change settings once the owner turned access off."""
+    try:
+        body = await request.json()
+    except Exception:
+        body = {}
+    if "allow_network" in body:
+        set_allow_network(bool(body["allow_network"]))
+    for key, setter in (
+        ("max_duration_sec", set_max_duration_sec),
+        ("video_max_height", set_video_max_height),
+    ):
+        if key in body:
+            try:
+                setter(int(body[key]))
+            except (TypeError, ValueError):
+                raise HTTPException(status_code=422, detail=f"{key} must be an integer") from None
+    return _settings_payload()
+
+
 # Content-Security-Policy. Defense-in-depth so an injected string in the webview
 # can't run script (and, in the desktop app, reach the exposed Tauri IPC) — #171.
 # script-src has no 'unsafe-inline'/'eval': all JS is same-origin modules and the
@@ -200,6 +296,68 @@ async def security_and_cache_headers(request: Request, call_next):
     return response
 
 
+def _is_loopback(host: str | None) -> bool:
+    if not host:
+        return False
+    if host.startswith("::ffff:"):  # IPv4-mapped IPv6
+        host = host[7:]
+    return host in {"127.0.0.1", "::1", "localhost"} or host.startswith("127.")
+
+
+@functools.lru_cache(maxsize=1)
+def _local_ips() -> frozenset[str]:
+    """The machine's own interface IPs. Used so the host always reaches the app
+    even via its LAN address (e.g. 192.168.x.x), not just 127.0.0.1 — turning
+    network access off must never cut the host off from its own server."""
+    ips: set[str] = set()
+    try:
+        hostname = socket.gethostname()
+        for info in socket.getaddrinfo(hostname, None):
+            ips.add(info[4][0])
+    except Exception:
+        # Best-effort: name resolution can fail on odd hostnames/configs; we
+        # still try the outbound-socket probe below and fall back to loopback.
+        _log.debug("hostname IP enumeration failed", exc_info=True)
+    try:  # primary outbound IP, robust when the hostname doesn't resolve them all
+        s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
+        s.connect(("8.8.8.8", 80))
+        ips.add(s.getsockname()[0])
+        s.close()
+    except Exception:
+        # Best-effort: no default route / offline — just return what we have.
+        _log.debug("outbound IP probe failed", exc_info=True)
+    return frozenset(ips)
+
+
+def _is_host_request(host: str | None) -> bool:
+    """True when the request originates from the machine StemDeck runs on —
+    whether via loopback or one of its own interface addresses."""
+    if _is_loopback(host):
+        return True
+    if not host:
+        return False
+    h = host[7:] if host.startswith("::ffff:") else host
+    return h in _local_ips()
+
+
+# Network availability gate (Settings → "Make StemDeck available on your
+# network"). Added after the headers middleware so it is the OUTERMOST layer and
+# short-circuits before anything else. It NEVER stops the server — it only
+# refuses requests from OTHER devices when availability is off. The host machine
+# (loopback or its own LAN IP) is always served, so the app keeps working
+# locally regardless of this setting.
+@app.middleware("http")
+async def network_gate(request: Request, call_next):
+    if not get_allow_network():
+        client_host = request.client.host if request.client else None
+        if not _is_host_request(client_host):
+            return PlainTextResponse(
+                "StemDeck is not available on the network. Enable it in Settings on the host machine.",
+                status_code=403,
+            )
+    return await call_next(request)
+
+
 app.include_router(router, prefix="/api")
 app.mount("/", StaticFiles(directory=STATIC_DIR, html=True), name="static")
 
diff --git a/app/pipeline/download.py b/app/pipeline/download.py
index 4dac6f30..c69d6095 100644
--- a/app/pipeline/download.py
+++ b/app/pipeline/download.py
@@ -8,8 +8,9 @@
 
 from yt_dlp import YoutubeDL
 
-from app.core.config import FFMPEG_DIR, MAX_DURATION_SEC, VIDEO_MAX_HEIGHT
+from app.core.config import FFMPEG_DIR
 from app.core.models import Job, JobCancelled, _set
+from app.core.settings import get_max_duration_sec, get_video_max_height
 
 logger = logging.getLogger("stemdeck.download")
 
@@ -173,10 +174,11 @@ def vhook(d: dict) -> None:
     # Prefer H.264 (avc1) so the exported MP4 plays everywhere -- YouTube also
     # serves AV1/VP9 in mp4 containers, which many players (Safari/iOS, older
     # devices) can't decode. Fall back to any <=cap mp4 only if no avc1 exists.
+    max_height = get_video_max_height()
     ydl_opts = {
         "format": (
-            f"bestvideo[height<={VIDEO_MAX_HEIGHT}][vcodec^=avc1]"
-            f"/bestvideo[height<={VIDEO_MAX_HEIGHT}][ext=mp4]"
+            f"bestvideo[height<={max_height}][vcodec^=avc1]"
+            f"/bestvideo[height<={max_height}][ext=mp4]"
         ),
         "outtmpl": str(job_dir / "video.%(ext)s"),
         "quiet": True,
@@ -222,8 +224,9 @@ def download(job: Job, url: str, job_dir: Path) -> Path:
     ) as ydl:
         meta = ydl.extract_info(url, download=False) or {}
     duration = meta.get("duration") or 0
-    if duration > MAX_DURATION_SEC:
-        mins = MAX_DURATION_SEC // 60
+    max_duration = get_max_duration_sec()
+    if duration > max_duration:
+        mins = max_duration // 60
         raise RuntimeError(f"Video is {int(duration // 60)} min -- limit is {mins} min")
 
     def hook(d: dict) -> None:
diff --git a/desktop/src-tauri/src/main.rs b/desktop/src-tauri/src/main.rs
index e4916989..93f866ee 100644
--- a/desktop/src-tauri/src/main.rs
+++ b/desktop/src-tauri/src/main.rs
@@ -202,6 +202,7 @@ fn main() {
             ensure_external_assets,
             ensure_torch_device,
             start_backend,
+            local_ip,
             open_url,
             save_audio_file,
             store_get,
@@ -528,6 +529,11 @@ fn start_backend(
     app_handle: tauri::AppHandle,
     state: tauri::State<BackendState>,
 ) -> Result<BackendStarted, String> {
+    // Always bind all interfaces; whether other devices are actually served is
+    // controlled live by the backend's network gate (Settings → "Make StemDeck
+    // available on your network"), which defaults off and always allows
+    // loopback. The WebView itself connects via 127.0.0.1 regardless.
+    let bind_host = "0.0.0.0";
     // Gate concurrent calls: return immediately if already running or starting (#145).
     {
         let mut inner = state.inner.lock().map_err(|e| e.to_string())?;
@@ -576,7 +582,7 @@ fn start_backend(
             "uvicorn",
             "app.main:app",
             "--host",
-            "127.0.0.1",
+            bind_host,
             "--port",
             &port.to_string(),
         ]);
@@ -645,6 +651,21 @@ fn start_backend(
     }
 }
 
+/// Best-effort primary LAN IPv4, shown in Settings so the user knows the address
+/// to open StemDeck from another device. Uses the "connect a UDP socket" trick:
+/// no packets are sent — connect() just makes the OS pick the source IP for the
+/// default route. Returns None when offline / no route.
+#[tauri::command]
+fn local_ip() -> Option<String> {
+    use std::net::UdpSocket;
+    let sock = UdpSocket::bind("0.0.0.0:0").ok()?;
+    sock.connect("8.8.8.8:80").ok()?;
+    match sock.local_addr().ok()?.ip() {
+        std::net::IpAddr::V4(v4) if !v4.is_loopback() => Some(v4.to_string()),
+        _ => None,
+    }
+}
+
 /// Detects GPU hardware, installs CUDA torch if needed, and persists the chosen device.
 #[tauri::command]
 fn ensure_torch_device(state: tauri::State<BackendState>) -> Result<GpuSetup, String> {
diff --git a/desktop/ui/setup.js b/desktop/ui/setup.js
index d8c3693c..1ef824bc 100644
--- a/desktop/ui/setup.js
+++ b/desktop/ui/setup.js
@@ -2,6 +2,12 @@ const { invoke } = window.__TAURI__.core;
 
 let _runtimeUnlisten = null;
 
+// The backend always binds all interfaces; network availability is gated live
+// by the backend itself (Settings → "Make StemDeck available on your network").
+function startBackend() {
+  return invoke("start_backend");
+}
+
 const statusEl = document.getElementById("status");
 const detailsEl = document.getElementById("details");
 const retryBtn = document.getElementById("retry");
@@ -242,7 +248,7 @@ async function runSetup() {
       }
       await runStep("backend", async () => {
         setStatus("Runtime is ready. Starting StemDeck backend...");
-        const backend = await invoke("start_backend");
+        const backend = await startBackend();
         setStatus("Opening StemDeck...");
         window.location.replace(backend.url);
       });
@@ -359,7 +365,7 @@ async function runSetup() {
 
     await runStep("backend", async () => {
       setStatus(gpuSummary ? `${gpuSummary} - starting backend...` : "Starting StemDeck backend...");
-      const backend = await invoke("start_backend");
+      const backend = await startBackend();
       setStatus("Opening StemDeck...");
       window.location.replace(backend.url);
     });
diff --git a/static/css/daw.css b/static/css/daw.css
index 57f43d79..da6bec24 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -772,6 +772,44 @@ input, textarea { font-family: inherit; }
 .library-editor-table tr.unavailable .le-name { color: var(--danger); }
 .le-badge { margin-left: 7px; padding: 1px 6px; border-radius: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(214,90,74,0.16); color: var(--danger); }
 .library-editor-empty { color: var(--muted); text-align: center; padding: 22px 10px !important; }
+/* Settings → tabs */
+.settings-tabs { display: flex; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
+.settings-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; padding: 5px 12px 9px; cursor: pointer; margin-bottom: -1px; }
+.settings-tab:hover { color: var(--fg-2); }
+.settings-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
+.settings-pane { display: flex; flex-direction: column; min-height: 0; }
+.settings-pane[data-pane="general"] { flex: 1; }
+.settings-pane.hidden { display: none; }
+.settings-pane[data-pane="advanced"] .library-editor-table-wrap { flex: none; max-height: 240px; margin-bottom: 2px; }
+.settings-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 28px 10px; }
+.settings-num { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
+.settings-num input { width: 62px; background: rgba(10,17,24,0.6); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--fg); font-family: var(--font-mono); font-size: 12px; padding: 6px 8px; text-align: right; }
+.settings-num-unit { color: var(--muted); font-size: 11px; }
+.settings-select { flex-shrink: 0; background: rgba(10,17,24,0.6); border: 1px solid var(--border-strong); border-radius: 7px; color: var(--fg); font-family: var(--font-mono); font-size: 12px; padding: 6px 9px; cursor: pointer; }
+.settings-num input:focus, .settings-select:focus { outline: none; border-color: rgba(244,183,64,0.5); }
+
+/* Settings → network access section */
+.settings-section { margin-bottom: 12px; }
+.settings-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.settings-row-text { min-width: 0; }
+.settings-row-title { font-size: 12.5px; font-weight: 600; color: var(--fg); }
+.settings-row-desc { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
+.settings-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; cursor: pointer; }
+.settings-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
+.settings-switch-track { position: absolute; inset: 0; border-radius: 999px; background: rgba(148,163,184,0.22); border: 1px solid var(--border-strong); transition: background 0.15s ease; }
+.settings-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--fg); transition: transform 0.15s ease; }
+.settings-switch input:checked + .settings-switch-track { background: rgba(244,183,64,0.55); border-color: rgba(244,183,64,0.5); }
+.settings-switch input:checked + .settings-switch-track .settings-switch-thumb { transform: translateX(18px); background: var(--accent); }
+.settings-switch.disabled { cursor: default; opacity: 0.7; }
+.settings-switch.disabled input { cursor: default; }
+.settings-net { margin-top: 10px; font-size: 11px; color: var(--muted); }
+.settings-net.hidden { display: none; }
+.settings-net-label { margin-bottom: 7px; }
+.settings-net-list { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
+.settings-net-list code { color: var(--accent); background: rgba(244,183,64,0.1); padding: 3px 9px; border-radius: 5px; font-size: 11.5px; }
+.settings-net-empty { color: var(--muted); }
+.settings-subhead { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; margin: 4px 0 7px; }
+
 .library-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; }
 .library-editor-status { font-size: 10.5px; color: var(--muted); }
 .library-editor-status.out-of-sync { color: var(--danger); font-weight: 600; }
diff --git a/static/js/audioEngine.js b/static/js/audioEngine.js
index 7301b9d9..c444006d 100644
--- a/static/js/audioEngine.js
+++ b/static/js/audioEngine.js
@@ -19,8 +19,12 @@ const AudioCtx = window.AudioContext || window.webkitAudioContext;
  * @param {{name:string,url:string}[]} stems  Active stems only (caller filters).
  * @param {{onTime?:(t:number)=>void, onEnded?:()=>void}} cbs
  */
-export function createAudioEngine(stems, { onTime, onEnded } = {}) {
-  const ctx = new AudioCtx();
+export function createAudioEngine(stems, { onTime, onEnded, context } = {}) {
+  // Mobile/iOS only starts audio from a context resumed inside a user gesture.
+  // Callers can pass a shared, gesture-unlocked `context` (the mobile UI does);
+  // desktop passes none and we own a fresh one. We only close contexts we own.
+  const ctx = context || new AudioCtx();
+  const ownsCtx = !context;
   const master = ctx.createGain();
   master.connect(ctx.destination);
 
@@ -146,7 +150,7 @@ export function createAudioEngine(stems, { onTime, onEnded } = {}) {
     stopSources();
     if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
     tracks.clear();
-    ctx.close().catch(() => {});
+    if (ownsCtx) ctx.close().catch(() => {});
   }
 
   return {
diff --git a/static/js/catalog.js b/static/js/catalog.js
index c68d5715..1b4f66e5 100644
--- a/static/js/catalog.js
+++ b/static/js/catalog.js
@@ -1770,8 +1770,9 @@ function closeLibraryEditor() {
 function renderLibraryRows(tbody) {
   tbody.textContent = "";
   const trashIds = new Set(getTrashFolder()?.items || []);
+  // Only out-of-sync (audio missing) tracks — this table sits next to Resync.
   const entries = Object.entries(tracks)
-    .filter(([id]) => !trashIds.has(id))
+    .filter(([id, t]) => !trashIds.has(id) && t.status === "unavailable")
     .sort((a, b) => (b[1].createdAt || 0) - (a[1].createdAt || 0));
 
   if (!entries.length) {
@@ -1779,7 +1780,7 @@ function renderLibraryRows(tbody) {
     const td = document.createElement("td");
     td.colSpan = 3;
     td.className = "library-editor-empty";
-    td.textContent = "No tracks in your library yet.";
+    td.textContent = "All tracks are in sync.";
     tr.appendChild(td);
     tbody.appendChild(tr);
     return;
@@ -1816,6 +1817,127 @@ function renderLibraryRows(tbody) {
   }
 }
 
+// "Make StemDeck available on your network" toggle. The backend always binds
+// all interfaces and gates LAN access on a runtime flag (GET/POST /api/settings)
+// — so this works live, no restart, identically in the desktop app and the
+// self-hosted server. Loopback is always allowed, so the owner can't lock
+// themselves out of this control.
+function networkSettingsHtml() {
+  return `
+    <div class="settings-section">
+      <div class="settings-row">
+        <div class="settings-row-text">
+          <div class="settings-row-title">Make StemDeck available on your network</div>
+          <div class="settings-row-desc">Let other devices (like your phone) open StemDeck at the address below.</div>
+        </div>
+        <label class="settings-switch">
+          <input type="checkbox" class="net-access-input" />
+          <span class="settings-switch-track"><span class="settings-switch-thumb"></span></span>
+        </label>
+      </div>
+      <div class="settings-net hidden">
+        <div class="settings-net-label">Access on your local network by any of these addresses:</div>
+        <div class="settings-net-list"></div>
+      </div>
+    </div>
+  `;
+}
+
+// General settings: max track length (minutes) + MP4 video quality. Read live
+// and POSTed on change to /api/settings (same runtime store as the toggle).
+async function wireGeneralSettings(overlay) {
+  const durInput = overlay.querySelector(".set-max-duration");
+  const heightSel = overlay.querySelector(".set-video-height");
+  if (!durInput && !heightSel) return;
+
+  const apply = (d) => {
+    if (durInput && d.max_duration_sec) durInput.value = String(Math.round(d.max_duration_sec / 60));
+    if (heightSel && d.video_max_height) heightSel.value = String(d.video_max_height);
+  };
+
+  try {
+    const r = await fetch("/api/settings", { cache: "no-store" });
+    if (r.ok) apply(await r.json());
+  } catch { /* leave blank */ }
+
+  const post = async (patch) => {
+    try {
+      const r = await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(patch),
+      });
+      if (r.ok) apply(await r.json()); // reflect the server's clamped value
+    } catch { /* ignore */ }
+  };
+
+  durInput?.addEventListener("change", () => {
+    const mins = Math.max(1, Math.min(20, parseInt(durInput.value, 10) || 20));
+    post({ max_duration_sec: mins * 60 });
+  });
+  heightSel?.addEventListener("change", () => {
+    post({ video_max_height: parseInt(heightSel.value, 10) });
+  });
+}
+
+async function wireNetworkSetting(overlay) {
+  const input = overlay.querySelector(".net-access-input");
+  const netWrap = overlay.querySelector(".settings-net");
+  const list = overlay.querySelector(".settings-net-list");
+  if (!input) return;
+
+  let enabled = false;
+  let addresses = [];
+  try {
+    const r = await fetch("/api/settings", { cache: "no-store" });
+    if (r.ok) {
+      const data = await r.json();
+      enabled = data.allow_network === true;
+      addresses = Array.isArray(data.lan_addresses) ? data.lan_addresses : [];
+    }
+  } catch { /* leave defaults */ }
+
+  // Build the address list with textContent (URLs are server data, but never
+  // interpolate untrusted strings into innerHTML).
+  if (list) {
+    list.textContent = "";
+    if (addresses.length) {
+      for (const a of addresses) {
+        const code = document.createElement("code");
+        code.textContent = a;
+        list.appendChild(code);
+      }
+    } else {
+      const span = document.createElement("span");
+      span.className = "settings-net-empty";
+      span.textContent = "No local network connection detected.";
+      list.appendChild(span);
+    }
+  }
+
+  input.checked = enabled;
+  const refresh = () => netWrap?.classList.toggle("hidden", !input.checked);
+  refresh();
+
+  input.addEventListener("change", async () => {
+    const want = input.checked;
+    input.disabled = true;
+    try {
+      const r = await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ allow_network: want }),
+      });
+      input.checked = r.ok ? (await r.json()).allow_network === true : !want;
+    } catch {
+      input.checked = !want; // revert on failure
+    } finally {
+      input.disabled = false;
+      refresh();
+    }
+  });
+}
+
 function openLibraryEditor() {
   closeFolderEditor();
   closeLibraryEditor();
@@ -1823,28 +1945,72 @@ function openLibraryEditor() {
   const overlay = document.createElement("div");
   overlay.className = "library-editor-backdrop";
   overlay.innerHTML = `
-    <div class="library-editor" role="dialog" aria-modal="true" aria-label="Edit library">
+    <div class="library-editor" role="dialog" aria-modal="true" aria-label="Settings">
       <div class="library-editor-head">
-        <span>Edit Library</span>
+        <span>Settings</span>
         <button class="library-editor-close" type="button" aria-label="Close">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>
         </button>
       </div>
-      <div class="library-editor-table-wrap">
-        <table class="library-editor-table">
-          <thead><tr><th>Name</th><th>Source</th><th>Location</th></tr></thead>
-          <tbody class="library-editor-body"></tbody>
-        </table>
+      <div class="settings-tabs" role="tablist">
+        <button class="settings-tab active" type="button" data-tab="general" role="tab">General</button>
+        <button class="settings-tab" type="button" data-tab="advanced" role="tab">Advanced</button>
+      </div>
+      <div class="settings-pane" data-pane="general">
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-row-text">
+              <div class="settings-row-title">Max track length</div>
+              <div class="settings-row-desc">Longest track accepted for processing.</div>
+            </div>
+            <div class="settings-num">
+              <input type="number" class="set-max-duration" min="1" max="20" step="1" inputmode="numeric" />
+              <span class="settings-num-unit">min</span>
+            </div>
+          </div>
+        </div>
+        <div class="settings-section">
+          <div class="settings-row">
+            <div class="settings-row-text">
+              <div class="settings-row-title">MP4 video quality</div>
+              <div class="settings-row-desc">Max resolution for MP4 export and YouTube video.</div>
+            </div>
+            <select class="settings-select set-video-height">
+              <option value="360">360p</option>
+              <option value="480">480p</option>
+              <option value="720">720p</option>
+              <option value="1080">1080p</option>
+            </select>
+          </div>
+        </div>
       </div>
-      <div class="library-editor-foot">
-        <span class="library-editor-status" aria-live="polite"></span>
-        <button class="library-editor-sync" type="button">Sync again</button>
+      <div class="settings-pane hidden" data-pane="advanced">
+        ${networkSettingsHtml()}
+        <div class="settings-subhead">Out of sync tracks</div>
+        <div class="library-editor-table-wrap">
+          <table class="library-editor-table">
+            <thead><tr><th>Name</th><th>Source</th><th>Location</th></tr></thead>
+            <tbody class="library-editor-body"></tbody>
+          </table>
+        </div>
+        <div class="library-editor-foot">
+          <span class="library-editor-status" aria-live="polite"></span>
+          <button class="library-editor-sync" type="button">Resync out of sync tracks</button>
+        </div>
       </div>
     </div>
   `;
 
   renderLibraryRows(overlay.querySelector(".library-editor-body"));
 
+  overlay.querySelectorAll(".settings-tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      const name = tab.dataset.tab;
+      overlay.querySelectorAll(".settings-tab").forEach((t) => t.classList.toggle("active", t === tab));
+      overlay.querySelectorAll(".settings-pane").forEach((p) => p.classList.toggle("hidden", p.dataset.pane !== name));
+    });
+  });
+
   overlay.addEventListener("mousedown", (e) => { if (e.target === overlay) closeLibraryEditor(); });
   // (status summary is filled in after the overlay is in the DOM, below)
   overlay.querySelector(".library-editor-close")?.addEventListener("click", closeLibraryEditor);
@@ -1856,6 +2022,8 @@ function openLibraryEditor() {
   document.body.appendChild(overlay);
   libraryEditor = overlay;
   refreshLibrarySyncSummary();
+  wireGeneralSettings(overlay);
+  wireNetworkSetting(overlay);
 }
 
 // Poll a job until it reaches a terminal state, so auto-restores run one at a
diff --git a/static/js/shared/jobs.js b/static/js/shared/jobs.js
new file mode 100644
index 00000000..68074e64
--- /dev/null
+++ b/static/js/shared/jobs.js
@@ -0,0 +1,75 @@
+// Shared, DOM-free job/library helpers used by both the mobile UI and
+// (incrementally) the desktop catalog. Anything in here must stay free of
+// document/window-element access so it can be imported from either entry
+// point. The API (`GET /api/jobs`) is the canonical data source.
+import { fmtTime } from "../utils.js";
+
+// Mirror of catalog.js PROCESSING_STATUSES — keep in sync with the backend
+// job lifecycle. These map to the amber "working" dot.
+const PROCESSING_STATUSES = new Set(["queued", "downloading", "analyzing", "separating", "processing"]);
+
+export async function fetchJobs() {
+  const res = await fetch("/api/jobs", { cache: "no-store" });
+  if (!res.ok) throw new Error(`GET /api/jobs -> ${res.status}`);
+  return res.json();
+}
+
+export function deriveSource(sourceUrl) {
+  if (!sourceUrl) return "Local file";
+  if (sourceUrl.startsWith("local:")) return "Local file";
+  if (sourceUrl.includes("youtube.com") || sourceUrl.includes("youtu.be")) return "YouTube";
+  if (sourceUrl.includes("soundcloud.com")) return "SoundCloud";
+  return "Web";
+}
+
+// One of: "done" (green), "processing" (amber), "unavailable" (grey/red).
+export function statusKind(status) {
+  if (PROCESSING_STATUSES.has(status)) return "processing";
+  if (status === "done") return "done";
+  return "unavailable"; // unavailable / error / failed / unknown
+}
+
+export function coverInitial(title) {
+  const t = (title || "").trim();
+  return t ? t[0].toUpperCase() : "♪";
+}
+
+// Deterministic cover gradient: the same track always gets the same color.
+// Palette matches the mobile design's aesthetic (design/mobile prototype).
+const GRADIENTS = [
+  "linear-gradient(150deg,#7b46f0,#3f6ef0 55%,#1b245f)",
+  "linear-gradient(140deg,#2bd4c4,#1a6d9e)",
+  "linear-gradient(150deg,#c44ad0,#5a2b9e)",
+  "linear-gradient(150deg,#f06a6a,#7a2b4e)",
+  "linear-gradient(150deg,#4a9bf5,#2b3a7a)",
+  "linear-gradient(150deg,#f5a516,#d2541f)",
+  "linear-gradient(150deg,#3fcf6e,#1a6d4e)",
+];
+
+export function coverGradient(seed) {
+  const s = String(seed || "");
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  return GRADIENTS[h % GRADIENTS.length];
+}
+
+// Normalize an /api/jobs state object into the shape the mobile UI renders.
+export function jobToCard(state) {
+  const id = state.job_id;
+  const title = state.title || "Untitled";
+  const stemCount = (state.stems || state.selected_stems || []).length;
+  const parts = [];
+  if (state.duration) parts.push(fmtTime(state.duration));
+  if (stemCount) parts.push(`${stemCount} stem${stemCount === 1 ? "" : "s"}`);
+  return {
+    id,
+    title,
+    sub: deriveSource(state.source_url),
+    meta: parts.join(" · "),
+    stemCount,
+    status: statusKind(state.status),
+    createdAt: state.created_at || 0,
+    initial: coverInitial(title),
+    gradient: coverGradient(id || title),
+  };
+}
diff --git a/static/mobile/app.js b/static/mobile/app.js
new file mode 100644
index 00000000..201135a5
--- /dev/null
+++ b/static/mobile/app.js
@@ -0,0 +1,867 @@
+// StemDeck mobile — vanilla port of the Claude Design prototype
+// (design/mobile/StemDeck-Mobile.dc.html). No framework, no build step,
+// to match the rest of static/. Library + Mixer are wired to the real API
+// (GET /api/jobs, /api/jobs/{id}, the Web Audio engine, mixdown export).
+// Extract is still mock pending the SSE/upload wiring (next step).
+import { fetchJobs, jobToCard } from "../js/shared/jobs.js";
+import { createAudioEngine } from "../js/audioEngine.js";
+
+// Per-stem label + color, keyed by the backend stem name. Unknown names fall
+// back to a rotating palette so non-standard models still render sensibly.
+const STEM_META = {
+  vocals: { label: "Vocals", color: "#f0506e" },
+  drums: { label: "Drums", color: "#f5862b" },
+  bass: { label: "Bass", color: "#f5c518" },
+  guitar: { label: "Guitar", color: "#3fcf6e" },
+  piano: { label: "Piano", color: "#9b6cf0" },
+  other: { label: "Other", color: "#4a9bf5" },
+};
+const FALLBACK_COLORS = ["#f0506e", "#f5862b", "#f5c518", "#3fcf6e", "#9b6cf0", "#4a9bf5", "#2bd4c4", "#c44ad0"];
+function stemMeta(name, idx) {
+  return STEM_META[name] || { label: name.charAt(0).toUpperCase() + name.slice(1), color: FALLBACK_COLORS[idx % FALLBACK_COLORS.length] };
+}
+
+// Stem chips shown on the (still-mock) Extract screen.
+const EXTRACT_STEMS = Object.entries(STEM_META).map(([id, m]) => ({ id, name: m.label, color: m.color }));
+
+const DEFAULT_GRADIENT = "linear-gradient(150deg,#3a3a42,#202026)";
+const FILTERS = ["All", "Favorites"];
+
+// ─── Web Audio engine (reused from desktop: ../js/audioEngine.js) ───
+let engine = null;
+let engineTrackId = null;
+let engineToken = 0; // guards against races when switching tracks mid-decode
+let engineReady = false; // true once the current engine has decodable stems
+let pendingPlay = false;
+
+// Shared AudioContext, created + resumed inside a user gesture (mobile/iOS
+// won't start audio otherwise). Once running it stays running, so later
+// programmatic play() calls work even outside a gesture.
+let audioCtx = null;
+function ensureAudioCtx() {
+  const AC = window.AudioContext || window.webkitAudioContext;
+  if (!AC) return null;
+  if (!audioCtx) audioCtx = new AC();
+  if (audioCtx.state === "suspended") audioCtx.resume().catch(() => {});
+  return audioCtx;
+}
+
+const ICON = {
+  chevron: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>',
+  dots: '<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg>',
+  clock: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>',
+  prev: '<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M7 6v12M19 6l-9 6 9 6z"/></svg>',
+  next: '<svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17 6v12M5 6l9 6-9 6z"/></svg>',
+  loop: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2l4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="M7 22l-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>',
+  play: (sz, fill) => `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${fill}"><path d="M8 5.5v13l11-6.5z"/></svg>`,
+  pause: (sz, fill) => `<svg width="${sz}" height="${sz}" viewBox="0 0 24 24" fill="${fill}"><rect x="6" y="5" width="4" height="14" rx="1.3"/><rect x="14" y="5" width="4" height="14" rx="1.3"/></svg>`,
+  download: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 11l4 4 4-4"/><path d="M4 21h16"/></svg>',
+  search: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#65656d" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>',
+  link: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#65656d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>',
+  upload: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="M8 8l4-4 4 4"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>',
+  check: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
+  scissors: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"/></svg>',
+  tabLib: '<svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>',
+  tabMix: '<svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 8h16M4 16h16"/><circle cx="9" cy="8" r="2.4" fill="currentColor" stroke="none"/><circle cx="15" cy="16" r="2.4" fill="currentColor" stroke="none"/></svg>',
+  tabExt: '<svg width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.6"/><circle cx="6" cy="18" r="2.6"/><path d="M20 4L8.5 15.5M14 14.5L20 20M8.5 8.5L11.5 11.5"/></svg>',
+};
+
+const state = {
+  tab: "mixer",
+  mixerView: "stems",
+  playing: false,
+  progress: 0,
+  vols: {}, // per-stem gain 0..1, keyed by backend stem name
+  muted: {},
+  solo: {},
+  selected: { vocals: true, drums: true, bass: true, guitar: true, piano: true, other: true },
+  quality: "High",
+  filter: "All",
+  // Library data from /api/jobs. libState: "loading" | "ready" | "empty" | "error".
+  tracks: [],
+  libState: "loading",
+  swipedTrackId: null, // track whose swipe-to-delete is revealed
+  current: null, // selected track card (with .detail once loaded), or null
+  // Extract screen.
+  extractUrl: "",
+  extractFile: null, // File chosen for upload
+  extractJob: null, // { id, title, status, progress, stage } while a job runs
+};
+
+let extractES = null; // EventSource for the active extraction
+let extractPoll = null; // REST poll fallback timer
+
+const app = document.getElementById("app");
+
+function fmt(sec) {
+  if (!isFinite(sec) || sec < 0) sec = 0;
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return m + ":" + String(s).padStart(2, "0");
+}
+function esc(s) {
+  return String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+
+// ─── Mixer / engine helpers ───
+function lanes() {
+  return state.current?.detail?.lanes || [];
+}
+function curDuration() {
+  return state.current?.detail?.duration || 0;
+}
+function anySolo() {
+  return Object.values(state.solo).some(Boolean);
+}
+function laneActive(name) {
+  const muted = !!state.muted[name];
+  const soloed = !!state.solo[name];
+  return !(muted || (anySolo() && !soloed));
+}
+function effectiveGain(name) {
+  return laneActive(name) ? (state.vols[name] ?? 1) : 0;
+}
+function applyMix() {
+  if (!engine) return;
+  for (const l of lanes()) engine.setGain(l.name, effectiveGain(l.name));
+}
+
+function cap(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
+}
+function drLabel(dr) {
+  if (dr < 7) return "Compressed";
+  if (dr < 10) return "Moderate";
+  if (dr < 14) return "High";
+  return "Wide";
+}
+function stabilityLabel(pct) {
+  if (pct >= 90) return "Very stable";
+  if (pct >= 70) return "Stable";
+  if (pct >= 40) return "Variable";
+  return "Unstable";
+}
+
+// Build the Analysis tab's stat cards + stem-presence rows from a job detail.
+function extractAnalysis(d, laneList) {
+  const stats = [];
+  if (d.key) stats.push({ k: "KEY", v: d.key, s: d.scale ? cap(d.scale) : "" });
+  if (d.bpm) stats.push({ k: "TEMPO", v: String(Math.round(d.bpm)), s: "BPM" });
+  if (d.lufs != null) stats.push({ k: "LUFS", v: Number(d.lufs).toFixed(1), s: d.peak_db != null ? `Peak ${Number(d.peak_db).toFixed(1)} dB` : "Integrated" });
+  if (d.duration) stats.push({ k: "DURATION", v: fmt(d.duration), s: "Full length" });
+  if (d.dynamic_range != null) stats.push({ k: "DYN RANGE", v: Number(d.dynamic_range).toFixed(1), s: drLabel(d.dynamic_range) });
+  if (d.tempo_stability != null) {
+    const pct = d.tempo_stability > 1 ? d.tempo_stability : d.tempo_stability * 100;
+    stats.push({ k: "STABILITY", v: Math.round(pct) + "%", s: stabilityLabel(pct) });
+  }
+  const sp = d.stem_presence || {};
+  const presence = laneList
+    .filter((l) => sp[l.name] != null)
+    .map((l) => ({ name: l.label, color: l.color, val: Math.round(sp[l.name]) }));
+  return { stats, presence };
+}
+
+function onEngineTime(t) {
+  const dur = curDuration() || 1;
+  state.progress = Math.max(0, Math.min(1, t / dur));
+  const head = app.querySelector(".playhead");
+  const cur = app.querySelector(".wave-times .cur");
+  if (head) head.style.left = state.progress * 100 + "%";
+  if (cur) cur.textContent = fmt(t);
+}
+
+// Load a track: fetch detail, build lanes, spin up the Web Audio engine.
+async function openTrack(card, { autoplay = false } = {}) {
+  state.tab = "mixer";
+  state.current = { ...card, detail: null, loading: true, error: null };
+  state.playing = false;
+  state.progress = 0;
+  render();
+
+  if (engine) { engine.destroy(); engine = null; engineTrackId = null; }
+  engineReady = false;
+  const token = ++engineToken;
+  pendingPlay = autoplay;
+
+  let detail;
+  try {
+    const res = await fetch(`/api/jobs/${card.id}`, { cache: "no-store" });
+    if (!res.ok) throw new Error(`GET /api/jobs/${card.id} -> ${res.status}`);
+    detail = await res.json();
+  } catch (e) {
+    if (token !== engineToken) return;
+    console.warn("[mobile] track detail failed:", e);
+    state.current.loading = false;
+    state.current.error = "Couldn't load this track.";
+    render();
+    return;
+  }
+  if (token !== engineToken) return;
+
+  // Use the MP3 stem variant on mobile: ~10-20x smaller than WAV, so it
+  // downloads in seconds and decodes in far less memory (full-song WAV stems
+  // can be hundreds of MB and exhaust a phone's RAM).
+  const laneList = (detail.stems || [])
+    .filter((s) => s && s.name !== "original" && s.url)
+    .map((s, i) => ({ name: s.name, url: s.url.replace(/\.wav(\?|$)/, ".mp3$1"), ...stemMeta(s.name, i) }));
+
+  state.vols = {};
+  state.muted = {};
+  state.solo = {};
+  for (const l of laneList) state.vols[l.name] = 1;
+
+  state.current.detail = {
+    duration: detail.duration || 0,
+    lanes: laneList,
+    hasVideo: !!detail.has_video,
+    analysis: extractAnalysis(detail, laneList),
+  };
+  state.current.loading = false;
+  state.current.stemCount = laneList.length;
+
+  if (!laneList.length) {
+    state.current.error = "This track has no playable stems yet.";
+    render();
+    return;
+  }
+
+  engine = createAudioEngine(laneList.map((l) => ({ name: l.name, url: l.url })), {
+    onTime: onEngineTime,
+    onEnded: () => { state.playing = false; render(); },
+    context: ensureAudioCtx(),
+  });
+  engineTrackId = card.id;
+  render();
+
+  const ok = await engine.ready;
+  if (token !== engineToken) return;
+  if (!ok) {
+    state.current.error = "Couldn't load this track's audio.";
+    pendingPlay = false;
+    toast("Couldn't load this track's audio.");
+    render();
+    return;
+  }
+  engineReady = true;
+  applyMix();
+  render();
+  if (pendingPlay) { pendingPlay = false; engine.play(); state.playing = engine.isPlaying(); render(); }
+}
+
+function togglePlay() {
+  if (!state.current) return;
+  ensureAudioCtx(); // unlock audio within this gesture
+  // Engine not loaded for this track yet → load then autoplay.
+  if (!engine || engineTrackId !== state.current.id) {
+    openTrack(state.current, { autoplay: true });
+    return;
+  }
+  // Decode still in flight → remember the intent and play once ready.
+  if (!engineReady) {
+    pendingPlay = true;
+    return;
+  }
+  if (engine.isPlaying()) engine.pause();
+  else engine.play();
+  state.playing = engine.isPlaying();
+  render();
+}
+
+function seekToFraction(frac) {
+  if (!engine) return;
+  engine.seek(Math.max(0, Math.min(1, frac)) * curDuration());
+}
+
+function triggerDownload(url) {
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+function exportMix(kind) {
+  const id = state.current?.id;
+  if (!id || !lanes().length) return;
+  const names = [];
+  const gains = [];
+  for (const l of lanes()) {
+    const g = effectiveGain(l.name);
+    if (g > 0) { names.push(l.name); gains.push(g); }
+  }
+  if (!names.length) { toast("Every stem is muted — nothing to export."); return; }
+  const q = new URLSearchParams({ stems: names.join(","), gains: gains.map((g) => g.toFixed(3)).join(",") });
+  const path = kind === "mp4" ? `video.mp4` : `mixdown.wav`;
+  triggerDownload(`/api/jobs/${id}/${path}?${q}`);
+}
+
+let _toastTimer = null;
+function toast(msg) {
+  let el = document.getElementById("m-toast");
+  if (!el) {
+    el = document.createElement("div");
+    el.id = "m-toast";
+    el.className = "m-toast";
+    document.body.appendChild(el);
+  }
+  el.textContent = msg;
+  el.classList.add("show");
+  clearTimeout(_toastTimer);
+  _toastTimer = setTimeout(() => el.classList.remove("show"), 2400);
+}
+
+function mainWaveform() {
+  const N = 56;
+  const played = Math.round(state.progress * N);
+  let bars = "";
+  for (let i = 0; i < N; i++) {
+    let h = 24 + Math.abs(Math.sin(i * 0.7) + Math.sin(i * 0.21) * 0.7) * 46 + ((i * 37) % 11);
+    h = Math.max(14, Math.min(98, h));
+    const bg = i <= played ? "#f5b417" : "#34343c";
+    bars += `<i style="height:${h}%;background:${bg}"></i>`;
+  }
+  return bars;
+}
+
+function stemWave(idx, color, vol, eff) {
+  const wn = 28;
+  const wplayed = Math.round(state.progress * wn);
+  let out = "";
+  for (let i = 0; i < wn; i++) {
+    let wh = 16 + Math.abs(Math.sin(i * (0.55 + idx * 0.13)) + Math.sin(i * 0.33 + idx) * 0.6) * 62 + ((i * (7 + idx * 3)) % 9);
+    wh = Math.max(7, Math.min(98, wh)) * (0.3 + 0.7 * vol);
+    const wc = eff ? "#34343c" : i <= wplayed ? color : color + "3d";
+    out += `<i style="height:${wh}%;background:${wc}"></i>`;
+  }
+  return out;
+}
+
+function stemsBody() {
+  const c = state.current;
+  if (!c) return `<div class="lib-note">Pick a track from your Library to start mixing.</div>`;
+  if (c.loading) return `<div class="lib-note">Loading stems…</div>`;
+  if (c.error) return `<div class="lib-note">${esc(c.error)}</div>`;
+  const ll = lanes();
+  if (!ll.length) return `<div class="lib-note">No stems available.</div>`;
+  return `<div class="stems-grid">${ll.map((l, idx) => {
+    const vol = state.vols[l.name] ?? 1;
+    const muted = !!state.muted[l.name];
+    const soloed = !!state.solo[l.name];
+    const eff = !laneActive(l.name);
+    const pct = Math.round(vol * 100) + "%";
+    const mOn = muted ? `background:${l.color};color:#15100a;border-color:${l.color};` : "";
+    const sOn = soloed ? "background:#f5b417;color:#1a1206;border-color:#f5b417;" : "";
+    return `<div class="stem">
+      <div class="stem-top">
+        <div class="stem-dot" style="background:${l.color};box-shadow:0 0 8px ${l.color}88;opacity:${eff ? 0.4 : 1}"></div>
+        <div class="stem-name" style="color:${eff ? "#6a6a72" : l.color}">${esc(l.label)}</div>
+        <button class="ms-btn" style="${mOn}" data-action="mute" data-id="${l.name}">M</button>
+        <button class="ms-btn" style="${sOn}" data-action="solo" data-id="${l.name}">S</button>
+      </div>
+      <div class="stem-wave">${stemWave(idx, l.color, vol, eff)}</div>
+      <div class="fader" data-fader data-id="${l.name}">
+        <div class="fader-track"></div>
+        <div class="fader-fill" style="width:${pct};background:${eff ? "#46464e" : l.color}"></div>
+        <div class="fader-knob" style="left:${pct};background:${eff ? "#8a8a90" : "#fff"}"></div>
+      </div>
+    </div>`;
+  }).join("")}</div>`;
+}
+
+function analysisBody() {
+  const a = state.current?.detail?.analysis;
+  const hasVideo = state.current?.detail?.hasVideo;
+  const statsHtml = a && a.stats.length
+    ? `<div class="stats">${a.stats.map((x) => `<div class="stat"><div class="stat-k">${x.k}</div><div class="stat-v">${esc(x.v)}</div><div class="stat-s">${esc(x.s)}</div></div>`).join("")}</div>`
+    : `<div class="lib-note" style="margin-top:8px">Analysis not available for this track.</div>`;
+  const presenceHtml = a && a.presence.length
+    ? `<div class="eyebrow">STEM PRESENCE</div>${a.presence.map((p) => `<div class="presence-row"><div class="presence-name">${esc(p.name)}</div><div class="presence-bar"><i style="width:${p.val}%;background:${p.color}"></i></div><span class="presence-val">${p.val}%</span></div>`).join("")}`
+    : "";
+  const exportBtns = `<button class="cta sm" data-action="export" data-kind="wav">${ICON.download}Export mix</button>${
+    hasVideo ? `<button class="cta sm" data-action="export" data-kind="mp4" style="margin-top:10px">${ICON.download}Export MP4 (with video)</button>` : ""
+  }`;
+  return `<div class="pad" style="padding-top:16px">${statsHtml}${presenceHtml}${exportBtns}</div>`;
+}
+
+function mixerScreen() {
+  const c = state.current || { title: "No track selected", sub: "Pick one from your Library", initial: "♪", gradient: DEFAULT_GRADIENT, stemCount: 0 };
+  const bg = c.gradient || DEFAULT_GRADIENT;
+  const sourceTag = c.sub || "—";
+  const stemTag = c.stemCount ? `${c.stemCount} stems` : "";
+  const dur = curDuration();
+  const body = state.mixerView === "stems" ? stemsBody() : analysisBody();
+  const ready = engineReady && engineTrackId === state.current?.id;
+  const preparing = !!state.current && !state.current.loading && !state.current.error && !ready;
+  const canPlay = ready;
+
+  return `<div class="screen scrl">
+    <div class="pad">
+      <div class="mx-head">
+        <button class="icon-btn" data-action="tab" data-tab="library">${ICON.chevron}</button>
+        <span class="now-playing">NOW PLAYING</span>
+        <button class="icon-btn">${ICON.dots}</button>
+      </div>
+      <div class="cover-wrap">
+        <div class="cover" style="background:${bg}"><span>${esc(c.initial)}</span></div>
+        <div class="track-title">${esc(c.title)}</div>
+        <div class="track-sub">${esc(c.sub)}</div>
+        <div class="tags"><span class="tag">${esc(sourceTag)}</span>${stemTag ? `<span class="tag">${stemTag}</span>` : ""}</div>
+      </div>
+      <div class="wave">
+        <div class="wave-bars" data-seek>${mainWaveform()}<div class="playhead" style="left:${state.progress * 100}%"></div></div>
+        <div class="wave-times"><span class="cur">${fmt(state.progress * dur)}</span><span class="dur">${fmt(dur)}</span></div>
+      </div>
+      <div class="transport">
+        <button class="t-ghost">${ICON.clock}.75x</button>
+        <button class="t-step">${ICON.prev}</button>
+        <button class="t-play" data-action="play" ${canPlay ? "" : "disabled style=opacity:.45"}>${state.playing ? ICON.pause(26, "#1a1206") : ICON.play(28, "#1a1206")}</button>
+        <button class="t-step">${ICON.next}</button>
+        <button class="t-ghost" style="color:#85858d">${ICON.loop}</button>
+      </div>
+      ${preparing ? '<div class="mx-prep">Preparing audio…</div>' : ""}
+      <div class="segmented">
+        <button class="${state.mixerView === "stems" ? "on" : ""}" data-action="mixview" data-view="stems">Stems</button>
+        <button class="${state.mixerView === "analysis" ? "on" : ""}" data-action="mixview" data-view="analysis">Analysis</button>
+      </div>
+    </div>
+    ${body}
+  </div>`;
+}
+
+function libraryBody() {
+  if (state.libState === "loading") {
+    return `<div class="lib-note">Loading your library…</div>`;
+  }
+  if (state.libState === "error") {
+    return `<div class="lib-note">Couldn't reach the server. <button class="lib-retry" data-action="reload">Retry</button></div>`;
+  }
+  if (state.libState === "empty") {
+    return `<div class="lib-note">No tracks yet. Head to <b>Extract</b> to split your first song.</div>`;
+  }
+  return `<div class="eyebrow">RECENT</div>
+    ${state.tracks.map((t) => `<div class="track-wrap${state.swipedTrackId === t.id ? " swiped" : ""}">
+      <button class="track-delete" data-action="delete" data-id="${esc(t.id)}">Delete</button>
+      <div class="track" data-action="open" data-id="${esc(t.id)}">
+        <div class="track-art" style="background:${t.gradient}">${esc(t.initial)}</div>
+        <div class="track-info"><div class="t">${esc(t.title)}</div><div class="s">${esc(t.sub)}</div><div class="m">${esc(t.meta)}</div></div>
+        <div class="track-dot ${t.status}"></div>
+        <button class="track-load" data-action="open" data-id="${esc(t.id)}">Load</button>
+      </div>
+    </div>`).join("")}`;
+}
+
+function libraryScreen() {
+  return `<div class="screen scrl">
+    <div class="pad">
+      <div class="lib-head">
+        <span class="h1">Library</span>
+        <div class="avatar">JS</div>
+      </div>
+      <div class="search">${ICON.search}<span>Search your library</span></div>
+      <div class="filters scrl">${FILTERS.map((f) => `<span class="filter ${f === state.filter ? "on" : ""}" data-action="filter" data-filter="${f}">${f}</span>`).join("")}</div>
+      ${libraryBody()}
+    </div>
+  </div>`;
+}
+
+function extractProgressCard() {
+  const j = state.extractJob;
+  if (!j) return "";
+  const pct = Math.round((j.progress || 0) * 100);
+  const failed = j.status === "error";
+  const cancelled = j.status === "cancelled";
+  const done = j.status === "done";
+  const line = failed ? "Failed" : cancelled ? "Cancelled" : done ? "Done" : `${j.stage || j.status}…`;
+  return `<div class="eyebrow">IN PROGRESS</div>
+    <div class="progress-card">
+      <div class="progress-top">
+        <div class="progress-art"></div>
+        <div style="flex:1;min-width:0">
+          <div style="font-size:14px;font-weight:600;color:#eaeaec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(j.title || "Track")}</div>
+          <div style="font-size:12px;color:${failed ? "#f0506e" : "#7a7a82"};margin-top:1px">${esc(line)}</div>
+        </div>
+        <span class="progress-pct">${done ? "100" : pct}%</span>
+      </div>
+      <div class="progress-bar"><i style="width:${done ? 100 : pct}%"></i></div>
+    </div>`;
+}
+
+function extractScreen() {
+  const fileName = state.extractFile?.name;
+  return `<div class="screen scrl">
+    <div class="pad">
+      <div class="h1">Extract stems</div>
+      <div class="sub">Paste a link or upload audio to split into stems.</div>
+      <div class="paste">${ICON.link}<input id="ext-url" class="ext-input" type="url" inputmode="url" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Paste YouTube or audio URL" value="${esc(state.extractUrl || "")}"></div>
+      <button class="upload" data-action="pick-file">${ICON.upload}${fileName ? esc(fileName) : "Upload audio file"}</button>
+      <input id="ext-file" type="file" accept="audio/*,video/mp4,.mp3,.wav,.flac,.m4a,.ogg" style="display:none">
+      <div class="eyebrow">STEMS TO EXTRACT</div>
+      <div class="chips">${EXTRACT_STEMS.map((s) => {
+        const on = !!state.selected[s.id];
+        const onStyle = on ? `border-color:${s.color};background:${s.color}1c;` : "";
+        return `<button class="chip-btn ${on ? "on" : ""}" style="${onStyle}" data-action="chip" data-id="${s.id}"><div class="dot" style="background:${s.color}"></div><span class="nm">${s.name}</span>${on ? ICON.check : ""}</button>`;
+      }).join("")}</div>
+      <button class="cta" style="margin-top:22px" data-action="split">${ICON.scissors}Split stems</button>
+      ${extractProgressCard()}
+    </div>
+  </div>`;
+}
+
+// Submit an extraction (URL or file) and follow it to completion.
+async function startExtraction() {
+  const stems = Object.keys(state.selected).filter((k) => state.selected[k]);
+  if (!stems.length) { toast("Pick at least one stem."); return; }
+  const file = state.extractFile;
+  const url = (state.extractUrl || "").trim();
+  if (!file && !url) { toast("Paste a URL or choose a file first."); return; }
+
+  let init, title;
+  if (file) {
+    const fd = new FormData();
+    fd.append("file", file);
+    fd.append("stems", JSON.stringify(stems));
+    init = { method: "POST", body: fd };
+    title = file.name;
+  } else {
+    init = { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url, stems }) };
+    title = url;
+  }
+
+  state.extractJob = { id: null, title, status: "queued", progress: 0, stage: "Queued" };
+  render();
+
+  let jobId;
+  try {
+    const res = await fetch("/api/jobs", init);
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(data.detail || res.statusText);
+    jobId = data.job_id;
+  } catch (e) {
+    console.warn("[mobile] extraction submit failed:", e);
+    state.extractJob = null;
+    toast(`Couldn't start: ${e.message}`);
+    render();
+    return;
+  }
+
+  state.extractJob.id = jobId;
+  state.extractFile = null;
+  state.extractUrl = "";
+  followExtraction(jobId);
+  render();
+}
+
+function _onExtractState(jobId, s) {
+  if (!state.extractJob || state.extractJob.id !== jobId) return false;
+  state.extractJob.status = s.status;
+  state.extractJob.progress = s.progress || 0;
+  state.extractJob.stage = s.stage || s.status;
+  if (state.tab === "extract") render();
+  if (s.status === "done" || s.status === "error" || s.status === "cancelled") {
+    if (s.status === "done") { toast("Stems ready!"); loadLibrary(); }
+    else if (s.status === "error") toast("Extraction failed.");
+    const finishedId = jobId;
+    setTimeout(() => {
+      if (state.extractJob && state.extractJob.id === finishedId) {
+        state.extractJob = null;
+        if (state.tab === "extract") render();
+      }
+    }, 4000);
+    return true; // terminal
+  }
+  return false;
+}
+
+// SSE with a REST-poll fallback (mirrors the desktop's resilience, simplified).
+function followExtraction(jobId) {
+  if (extractES) { extractES.close(); extractES = null; }
+  if (extractPoll) { clearInterval(extractPoll); extractPoll = null; }
+
+  const startPolling = () => {
+    if (extractPoll) return;
+    extractPoll = setInterval(async () => {
+      try {
+        const r = await fetch(`/api/jobs/${jobId}`, { cache: "no-store" });
+        if (!r.ok) throw new Error(String(r.status));
+        if (_onExtractState(jobId, await r.json())) { clearInterval(extractPoll); extractPoll = null; }
+      } catch { /* keep polling */ }
+    }, 2500);
+  };
+
+  try {
+    const es = new EventSource(`/api/jobs/${jobId}/events`);
+    extractES = es;
+    es.onmessage = (ev) => {
+      let s;
+      try { s = JSON.parse(ev.data); } catch { return; }
+      if (_onExtractState(jobId, s)) { es.close(); extractES = null; }
+    };
+    es.onerror = () => { es.close(); extractES = null; startPolling(); };
+  } catch {
+    startPolling();
+  }
+}
+
+function miniPlayer() {
+  if (state.tab === "mixer" || !state.current) return "";
+  const c = state.current;
+  const bg = c.gradient || DEFAULT_GRADIENT;
+  return `<div class="mini" data-action="tab" data-tab="mixer">
+    <div class="mini-art" style="background:${bg}">${esc(c.initial)}</div>
+    <div class="mini-info"><div class="t">${esc(c.title)}</div><div class="s">${esc(c.sub)}</div></div>
+    <button class="mini-play" data-action="play-mini">${state.playing ? ICON.pause(17, "#1a1206") : ICON.play(18, "#1a1206")}</button>
+  </div>`;
+}
+
+function tabBar() {
+  const t = (tab, icon, label) => `<button class="tab ${state.tab === tab ? "on" : ""}" data-action="tab" data-tab="${tab}">${icon}${label}</button>`;
+  return `<div class="tabbar">${t("extract", ICON.tabExt, "Extract")}${t("mixer", ICON.tabMix, "Mixer")}${t("library", ICON.tabLib, "Library")}</div>`;
+}
+
+function render() {
+  let screen = mixerScreen();
+  if (state.tab === "library") screen = libraryScreen();
+  else if (state.tab === "extract") screen = extractScreen();
+  app.innerHTML = screen + miniPlayer() + tabBar();
+  wireFaders();
+  wireSwipe();
+}
+
+// Suppresses the synthetic click that follows a swipe gesture, so swiping a
+// row open doesn't immediately count as a tap.
+let suppressClick = false;
+
+// Swipe a library row left to reveal its Delete button (iOS-style). Wired
+// imperatively after each render.
+function wireSwipe() {
+  app.querySelectorAll(".track-wrap .track").forEach((row) => {
+    const id = row.dataset.id;
+    let x0 = 0, y0 = 0, active = false, horizontal = false;
+    const base = () => (state.swipedTrackId === id ? -84 : 0);
+
+    row.addEventListener("pointerdown", (e) => {
+      x0 = e.clientX; y0 = e.clientY; active = true; horizontal = false;
+      row.style.transition = "none";
+    });
+    row.addEventListener("pointermove", (e) => {
+      if (!active) return;
+      const dx = e.clientX - x0;
+      const dy = e.clientY - y0;
+      if (!horizontal && Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) horizontal = true;
+      if (horizontal) {
+        e.preventDefault();
+        const tx = Math.max(-84, Math.min(0, base() + dx));
+        row.style.transform = `translateX(${tx}px)`;
+      }
+    });
+    const end = (e) => {
+      if (!active) return;
+      active = false;
+      if (!horizontal) { row.style.transition = ""; row.style.transform = ""; return; }
+      suppressClick = true;
+      setTimeout(() => { suppressClick = false; }, 60);
+      const dx = e.clientX - x0;
+      const open = dx < -40 ? true : dx > 40 ? false : state.swipedTrackId === id;
+      // Animate to the snap position by toggling the class (no DOM rebuild, so
+      // it transitions smoothly from wherever the finger let go).
+      closeOtherSwipes(row.closest(".track-wrap"));
+      row.style.transition = "transform 0.22s cubic-bezier(0.22,1,0.36,1)";
+      row.closest(".track-wrap").classList.toggle("swiped", open);
+      row.style.transform = "";
+      state.swipedTrackId = open ? id : null;
+    };
+    row.addEventListener("pointerup", end);
+    row.addEventListener("pointercancel", end);
+  });
+}
+
+// Smoothly close any revealed row (optionally except `keep`), without a full
+// re-render so the close animates.
+function closeOtherSwipes(keep) {
+  app.querySelectorAll(".track-wrap.swiped").forEach((w) => {
+    if (w === keep) return;
+    const r = w.querySelector(".track");
+    if (r) { r.style.transition = "transform 0.22s cubic-bezier(0.22,1,0.36,1)"; r.style.transform = ""; }
+    w.classList.remove("swiped");
+  });
+}
+
+function closeSwipe() {
+  state.swipedTrackId = null;
+  closeOtherSwipes(null);
+}
+
+async function deleteTrack(id) {
+  state.swipedTrackId = null;
+  try {
+    await fetch(`/api/jobs/${id}`, { method: "DELETE" });
+  } catch (e) {
+    console.warn("[mobile] delete failed:", e);
+  }
+  state.tracks = state.tracks.filter((t) => t.id !== id);
+  if (!state.tracks.length) state.libState = "empty";
+  if (state.current?.id === id) {
+    if (engine) { engine.destroy(); engine = null; engineTrackId = null; engineReady = false; }
+    state.current = null;
+    state.playing = false;
+  }
+  toast("Track deleted");
+  render();
+}
+
+// Faders + waveform seek need live pointer drag, so they're wired imperatively
+// after each render (the rest of the UI uses click delegation below).
+function wireFaders() {
+  app.querySelectorAll("[data-fader]").forEach((el) => {
+    el.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      const id = el.dataset.id;
+      const fill = el.querySelector(".fader-fill");
+      const knob = el.querySelector(".fader-knob");
+      const rect = el.getBoundingClientRect();
+      const set = (cx) => {
+        let v = (cx - rect.left) / rect.width;
+        v = Math.max(0, Math.min(1, v));
+        state.vols[id] = v;
+        const pct = Math.round(v * 100) + "%";
+        fill.style.width = pct;
+        knob.style.left = pct;
+        if (engine && laneActive(id)) engine.setGain(id, v);
+      };
+      set(e.clientX);
+      el.setPointerCapture(e.pointerId);
+      const mv = (ev) => set(ev.clientX);
+      const up = () => {
+        el.removeEventListener("pointermove", mv);
+        el.removeEventListener("pointerup", up);
+      };
+      el.addEventListener("pointermove", mv);
+      el.addEventListener("pointerup", up);
+    });
+  });
+
+  const bars = app.querySelector("[data-seek]");
+  if (bars) {
+    bars.addEventListener("pointerdown", (e) => {
+      if (!engine || !curDuration()) return;
+      e.preventDefault();
+      const rect = bars.getBoundingClientRect();
+      const head = bars.querySelector(".playhead");
+      const seek = (cx) => {
+        const frac = Math.max(0, Math.min(1, (cx - rect.left) / rect.width));
+        if (head) head.style.left = frac * 100 + "%";
+        const cur = app.querySelector(".wave-times .cur");
+        if (cur) cur.textContent = fmt(frac * curDuration());
+        seekToFraction(frac);
+      };
+      seek(e.clientX);
+      bars.setPointerCapture(e.pointerId);
+      const mv = (ev) => seek(ev.clientX);
+      const up = () => {
+        bars.removeEventListener("pointermove", mv);
+        bars.removeEventListener("pointerup", up);
+      };
+      bars.addEventListener("pointermove", mv);
+      bars.addEventListener("pointerup", up);
+    });
+  }
+}
+
+app.addEventListener("click", (e) => {
+  if (suppressClick) { suppressClick = false; return; }
+  const t = e.target.closest("[data-action]");
+  if (!t) return;
+  ensureAudioCtx(); // any in-app tap unlocks audio on mobile
+  const a = t.dataset.action;
+  // A row is swiped open: any tap other than its Delete just closes it.
+  if (state.swipedTrackId && a !== "delete") {
+    closeSwipe();
+    return;
+  }
+  switch (a) {
+    case "delete":
+      deleteTrack(t.dataset.id);
+      return;
+    case "tab":
+      state.tab = t.dataset.tab;
+      break;
+    case "mixview":
+      state.mixerView = t.dataset.view;
+      break;
+    case "play":
+    case "play-mini":
+      e.stopPropagation();
+      togglePlay();
+      return;
+    case "mute":
+      state.muted[t.dataset.id] = !state.muted[t.dataset.id];
+      applyMix();
+      break;
+    case "solo":
+      state.solo[t.dataset.id] = !state.solo[t.dataset.id];
+      applyMix();
+      break;
+    case "chip":
+      state.selected[t.dataset.id] = !state.selected[t.dataset.id];
+      break;
+    case "qual":
+      state.quality = t.dataset.q;
+      break;
+    case "filter":
+      state.filter = t.dataset.filter;
+      break;
+    case "export":
+      exportMix(t.dataset.kind || "wav");
+      return;
+    case "split":
+      startExtraction();
+      return;
+    case "pick-file":
+      document.getElementById("ext-file")?.click();
+      return;
+    case "open": {
+      const track = state.tracks.find((x) => x.id === t.dataset.id);
+      if (track) openTrack(track);
+      return;
+    }
+    case "reload":
+      loadLibrary();
+      return;
+    default:
+      return;
+  }
+  render();
+});
+
+// URL field is uncontrolled-but-tracked: store keystrokes in state without
+// re-rendering (which would steal focus), so the value survives later renders.
+app.addEventListener("input", (e) => {
+  if (e.target.id === "ext-url") state.extractUrl = e.target.value;
+});
+app.addEventListener("change", (e) => {
+  if (e.target.id === "ext-file") {
+    state.extractFile = e.target.files?.[0] || null;
+    render();
+  }
+});
+
+// Load the real library from /api/jobs (newest first). On success, seed the
+// Mixer with the most recent track if nothing is selected yet.
+async function loadLibrary() {
+  state.libState = "loading";
+  render();
+  try {
+    const jobs = await fetchJobs();
+    state.tracks = jobs.map(jobToCard).sort((a, b) => b.createdAt - a.createdAt);
+    state.libState = state.tracks.length ? "ready" : "empty";
+    if (!state.current && state.tracks.length) state.current = state.tracks[0];
+  } catch (e) {
+    console.warn("[mobile] failed to load library:", e);
+    state.libState = "error";
+  }
+  render();
+}
+
+render();
+loadLibrary();
diff --git a/static/mobile/index.html b/static/mobile/index.html
new file mode 100644
index 00000000..ad97d2cd
--- /dev/null
+++ b/static/mobile/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1"
+    />
+    <meta name="theme-color" content="#0b0b0d" />
+    <title>StemDeck</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=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/mobile/styles.css" />
+  </head>
+  <body>
+    <!-- The whole UI is rendered by app.js into #app. This is a static
+         visual shell on mock data (issue: mobile redesign). Screens and
+         interactions are real; data is not yet wired to the API. -->
+    <div id="app" class="m-app"></div>
+    <script type="module" src="/mobile/app.js"></script>
+  </body>
+</html>
diff --git a/static/mobile/styles.css b/static/mobile/styles.css
new file mode 100644
index 00000000..e9457dc1
--- /dev/null
+++ b/static/mobile/styles.css
@@ -0,0 +1,986 @@
+/* StemDeck mobile — ported from the Claude Design prototype
+   (design/mobile/StemDeck-Mobile.dc.html). Full-bleed for real phones:
+   the device frame / status bar / dynamic island from the design canvas
+   are dropped; the app fills the viewport and respects safe-area insets. */
+
+:root {
+  --bg: #0b0b0d;
+  --bg-grad: radial-gradient(120% 70% at 50% 0%, #15131c 0%, #0a0a0c 55%, #08080a 100%);
+  --card: #101013;
+  --card-2: #121215;
+  --card-3: #141417;
+  --chip: #161619;
+  --line: rgba(255, 255, 255, 0.06);
+  --line-2: rgba(255, 255, 255, 0.05);
+  --txt: #f2f2f4;
+  --txt-2: #cfcfd4;
+  --muted: #85858d;
+  --muted-2: #65656d;
+  --muted-3: #7a7a82;
+  --accent: #f5b417;
+  --accent-grad: linear-gradient(160deg, #fbc94a, #f5a516);
+  --accent-ink: #1a1206;
+  --sans: "Space Grotesk", system-ui, sans-serif;
+  --mono: "JetBrains Mono", ui-monospace, monospace;
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --tabbar-h: 64px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  background: var(--bg);
+  color: var(--txt);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+  overscroll-behavior: none;
+}
+
+.m-app {
+  position: relative;
+  width: 100%;
+  min-height: 100dvh;
+  background: var(--bg-grad);
+  display: flex;
+  flex-direction: column;
+}
+
+button {
+  font-family: inherit;
+}
+
+[data-fader] {
+  touch-action: none;
+}
+
+.scrl::-webkit-scrollbar {
+  display: none;
+}
+.scrl {
+  scrollbar-width: none;
+}
+
+/* ── screens ── */
+.screen {
+  flex: 1;
+  overflow-y: auto;
+  padding: calc(var(--safe-top) + 14px) 0 calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
+}
+.pad {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  color: var(--muted-2);
+  margin: 24px 0 8px;
+}
+.h1 {
+  font-size: 27px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  color: var(--txt);
+}
+.sub {
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 5px;
+}
+
+/* ── mixer header ── */
+.mx-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.icon-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  border: none;
+  background: var(--chip);
+  color: var(--txt-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.now-playing {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 1.5px;
+  color: var(--muted-2);
+}
+
+/* ── cover ── */
+.cover-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 14px;
+}
+.cover {
+  position: relative;
+  width: 172px;
+  height: 172px;
+  border-radius: 26px;
+  box-shadow:
+    0 24px 50px -16px rgba(90, 60, 200, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.cover::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, 0.22), transparent 60%);
+}
+.cover span {
+  font-size: 60px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.92);
+  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
+}
+.track-title {
+  font-size: 21px;
+  font-weight: 600;
+  color: var(--txt);
+  margin-top: 18px;
+  text-align: center;
+  letter-spacing: -0.2px;
+}
+.track-sub {
+  font-size: 14px;
+  color: var(--muted);
+  margin-top: 3px;
+}
+.tags {
+  display: flex;
+  gap: 7px;
+  margin-top: 12px;
+}
+.tag {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 500;
+  color: #9a9aa2;
+  background: var(--chip);
+  border: 1px solid var(--line);
+  padding: 4px 9px;
+  border-radius: 7px;
+  letter-spacing: 0.3px;
+}
+
+/* ── waveform ── */
+.wave {
+  margin-top: 22px;
+}
+.wave-bars {
+  position: relative;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.wave-bars > i {
+  flex: 1;
+  min-width: 2px;
+  border-radius: 2px;
+  display: block;
+}
+.playhead {
+  position: absolute;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent);
+  border-radius: 2px;
+}
+.playhead::after {
+  content: "";
+  position: absolute;
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: var(--accent);
+  box-shadow: 0 0 8px var(--accent);
+}
+.wave-times {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 9px;
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 500;
+}
+.wave-times .cur {
+  color: var(--accent);
+}
+.wave-times .dur {
+  color: var(--muted-2);
+}
+
+/* ── transport ── */
+.transport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 22px;
+  margin-top: 8px;
+}
+.t-ghost {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+.t-step {
+  background: none;
+  border: none;
+  color: #d8d8dc;
+  cursor: pointer;
+  display: flex;
+}
+.t-play {
+  width: 66px;
+  height: 66px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent-grad);
+  box-shadow: 0 12px 30px -6px rgba(245, 165, 22, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.mx-prep {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--accent);
+  animation: prep-pulse 1.2s ease-in-out infinite;
+}
+@keyframes prep-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* ── segmented ── */
+.segmented {
+  display: flex;
+  gap: 4px;
+  background: var(--card-3);
+  border: 1px solid var(--line-2);
+  border-radius: 12px;
+  padding: 4px;
+  margin-top: 24px;
+}
+.segmented button {
+  flex: 1;
+  padding: 9px 0;
+  border-radius: 9px;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: var(--muted-3);
+}
+.segmented button.on {
+  background: #26262c;
+  color: #fff;
+}
+
+/* ── stems grid ── */
+.stems-grid {
+  padding: 14px 16px 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.stem {
+  background: var(--card);
+  border: 1px solid var(--line-2);
+  border-radius: 13px;
+  padding: 10px 11px;
+}
+.stem-top {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.stem-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.stem-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ms-btn {
+  width: 26px;
+  height: 24px;
+  border-radius: 7px;
+  font-size: 11px;
+  font-weight: 600;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: var(--muted-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.stem-wave {
+  display: flex;
+  align-items: center;
+  gap: 1.5px;
+  height: 22px;
+  margin-top: 10px;
+}
+.stem-wave > i {
+  flex: 1;
+  min-width: 1.5px;
+  border-radius: 1.5px;
+  display: block;
+}
+.fader {
+  position: relative;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 8px;
+}
+.fader-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 4px;
+  border-radius: 3px;
+  background: #202025;
+}
+.fader-fill {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 4px;
+  border-radius: 3px;
+}
+.fader-knob {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
+}
+
+/* ── analysis ── */
+.stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.stat {
+  background: var(--card-2);
+  border: 1px solid var(--line-2);
+  border-radius: 14px;
+  padding: 13px 14px;
+}
+.stat-k {
+  font-size: 9.5px;
+  font-weight: 600;
+  letter-spacing: 1.2px;
+  color: var(--muted-2);
+}
+.stat-v {
+  font-family: var(--mono);
+  font-size: 20px;
+  font-weight: 600;
+  color: #eaeaec;
+  margin-top: 5px;
+}
+.stat-s {
+  font-size: 11px;
+  color: var(--muted-3);
+  margin-top: 2px;
+}
+.presence-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+}
+.presence-name {
+  width: 46px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--txt-2);
+  flex-shrink: 0;
+}
+.presence-bar {
+  flex: 1;
+  height: 7px;
+  border-radius: 4px;
+  background: #1c1c21;
+  overflow: hidden;
+}
+.presence-bar > i {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+}
+.presence-val {
+  width: 38px;
+  text-align: right;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 500;
+  color: #9a9aa2;
+  flex-shrink: 0;
+}
+
+/* ── primary action button ── */
+.cta {
+  width: 100%;
+  height: 54px;
+  border-radius: 15px;
+  border: none;
+  background: var(--accent-grad);
+  color: var(--accent-ink);
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  box-shadow: 0 12px 30px -8px rgba(245, 165, 22, 0.55);
+}
+.cta.sm {
+  height: 52px;
+  font-size: 15px;
+  border-radius: 14px;
+  margin-top: 18px;
+}
+
+/* ── library ── */
+.lib-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: linear-gradient(150deg, #f5a516, #d2541f);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--accent-ink);
+}
+.search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--card-3);
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  padding: 12px 14px;
+  margin-top: 16px;
+  color: var(--muted-2);
+  font-size: 14px;
+}
+.filters {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  overflow-x: auto;
+}
+.filter {
+  flex-shrink: 0;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #a8a8b0;
+  background: var(--chip);
+  border: 1px solid var(--line);
+  padding: 7px 14px;
+  border-radius: 20px;
+}
+.filter.on {
+  font-weight: 600;
+  color: var(--accent-ink);
+  background: var(--accent);
+  border-color: transparent;
+}
+.track-wrap {
+  position: relative;
+  overflow: hidden;
+}
+.track-delete {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 84px;
+  border: none;
+  background: #e0344e;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.track {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  padding: 9px 0;
+  background: var(--bg);
+  cursor: pointer;
+  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+  touch-action: pan-y;
+}
+.track-wrap.swiped .track {
+  transform: translateX(-84px);
+}
+.track-art {
+  width: 50px;
+  height: 50px;
+  border-radius: 13px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+.track-info {
+  flex: 1;
+  min-width: 0;
+}
+.track-info .t {
+  font-size: 14.5px;
+  font-weight: 600;
+  color: #eaeaec;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.track-info .s {
+  font-size: 12.5px;
+  color: var(--muted-3);
+  margin-top: 1px;
+}
+.track-info .m {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: #5c5c64;
+  margin-top: 3px;
+}
+.track-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #3fcf6e;
+  box-shadow: 0 0 8px #3fcf6e88;
+  flex-shrink: 0;
+}
+.track-dot.processing {
+  background: #f5b417;
+  box-shadow: 0 0 8px #f5b41788;
+  animation: dotpulse 1.2s ease-in-out infinite;
+}
+.track-dot.unavailable {
+  background: #5c5c64;
+  box-shadow: none;
+}
+@keyframes dotpulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+.lib-note {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--muted);
+  line-height: 1.6;
+}
+.lib-retry {
+  margin-top: 12px;
+  display: inline-block;
+  background: var(--chip);
+  border: 1px solid var(--line);
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 18px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.m-toast {
+  position: fixed;
+  left: 50%;
+  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 20px);
+  transform: translate(-50%, 12px);
+  max-width: 80vw;
+  background: rgba(28, 28, 33, 0.96);
+  color: var(--txt);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 11px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  z-index: 80;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
+}
+.m-toast.show {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+.track-load {
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--chip);
+  color: #e8e8ea;
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 8px 16px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.track-load:active {
+  background: rgba(245, 180, 23, 0.16);
+  border-color: rgba(245, 180, 23, 0.4);
+  color: var(--accent);
+}
+.collections {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.collection {
+  background: var(--card-2);
+  border: 1px solid var(--line-2);
+  border-radius: 16px;
+  padding: 14px;
+  cursor: pointer;
+}
+.collection-art {
+  position: relative;
+  height: 42px;
+  width: 54px;
+}
+.collection-art > .b {
+  position: absolute;
+  left: 10px;
+  top: 2px;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  opacity: 0.55;
+}
+.collection-art > .f {
+  position: absolute;
+  left: 0;
+  top: 5px;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
+}
+.collection .name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #eaeaec;
+  margin-top: 12px;
+}
+.collection .count {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted-2);
+  margin-top: 2px;
+}
+
+/* ── extract ── */
+.paste {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--card-3);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  padding: 14px;
+  margin-top: 22px;
+  color: var(--muted-2);
+  font-size: 13.5px;
+}
+.paste .label {
+  flex: 1;
+}
+.paste .act {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent);
+}
+.ext-input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--txt);
+  font-family: inherit;
+  font-size: 13.5px;
+}
+.ext-input::placeholder {
+  color: var(--muted-2);
+}
+.upload {
+  width: 100%;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  background: transparent;
+  border: 1.5px dashed rgba(255, 255, 255, 0.13);
+  border-radius: 14px;
+  padding: 15px;
+  color: #a8a8b0;
+  font-size: 13.5px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.chips {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.chip-btn {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 13px;
+  border-radius: 13px;
+  border: 1.5px solid rgba(255, 255, 255, 0.09);
+  background: transparent;
+  color: var(--muted);
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.chip-btn .dot {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  opacity: 0.4;
+}
+.chip-btn .nm {
+  flex: 1;
+  text-align: left;
+}
+.chip-btn.on {
+  color: var(--txt);
+}
+.chip-btn.on .dot {
+  opacity: 1;
+}
+.progress-card {
+  background: var(--card-2);
+  border: 1px solid var(--line-2);
+  border-radius: 16px;
+  padding: 14px;
+}
+.progress-top {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.progress-art {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: linear-gradient(140deg, #2bd4c4, #1a6d9e);
+  flex-shrink: 0;
+}
+.progress-pct {
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent);
+}
+.progress-bar {
+  height: 6px;
+  border-radius: 4px;
+  background: #1c1c21;
+  margin-top: 12px;
+  overflow: hidden;
+}
+.progress-bar > i {
+  display: block;
+  height: 100%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f5a516, #fbc94a);
+}
+
+/* ── mini player ── */
+.mini {
+  position: fixed;
+  left: 10px;
+  right: 10px;
+  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
+  height: 60px;
+  background: rgba(22, 22, 26, 0.82);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 12px;
+  z-index: 45;
+  cursor: pointer;
+  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
+}
+.mini-art {
+  width: 42px;
+  height: 42px;
+  border-radius: 11px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+}
+.mini-info {
+  flex: 1;
+  min-width: 0;
+}
+.mini-info .t {
+  font-size: 13.5px;
+  font-weight: 600;
+  color: #eaeaec;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mini-info .s {
+  font-size: 12px;
+  color: var(--muted-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mini-play {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--accent-grad);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* ── tab bar ── */
+.tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(var(--tabbar-h) + var(--safe-bottom));
+  padding: 10px 30px var(--safe-bottom);
+  background: rgba(11, 11, 13, 0.88);
+  backdrop-filter: blur(24px);
+  border-top: 1px solid var(--line);
+  display: flex;
+  justify-content: space-around;
+  z-index: 50;
+}
+.tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 10.5px;
+  font-weight: 600;
+  padding: 0;
+  color: #62626a;
+}
+.tab.on {
+  color: var(--accent);
+}
diff --git a/tests/conftest.py b/tests/conftest.py
new file mode 100644
index 00000000..9841e4e3
--- /dev/null
+++ b/tests/conftest.py
@@ -0,0 +1,21 @@
+from __future__ import annotations
+
+import pytest
+
+from app.core import settings as _settings
+
+
+@pytest.fixture(autouse=True)
+def _isolate_network_settings(tmp_path, monkeypatch):
+    """Isolate the runtime network gate for every test. Without this, a stray
+    settings.json in the repo (written by a local dev server) could flip the
+    gate off and 403 the whole suite, since TestClient's client host is not
+    loopback. Each test starts from the env default (on, outside desktop mode)."""
+    monkeypatch.setattr(_settings, "_SETTINGS_PATH", tmp_path / "settings.json")
+    # Network access defaults OFF in production, which would 403 TestClient
+    # (whose client host isn't loopback). Default the suite ON; gate tests set
+    # it explicitly. Tests checking the real default clear this env var.
+    monkeypatch.setenv("STEMDECK_ALLOW_NETWORK", "1")
+    _settings._state = None  # force a fresh load from the isolated path
+    yield
+    _settings._state = None
diff --git a/tests/test_mobile_routing.py b/tests/test_mobile_routing.py
new file mode 100644
index 00000000..1ba5e277
--- /dev/null
+++ b/tests/test_mobile_routing.py
@@ -0,0 +1,66 @@
+from __future__ import annotations
+
+import pytest
+from fastapi.testclient import TestClient
+
+from app.main import _is_mobile_ua, app
+
+IPHONE_UA = (
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) "
+    "AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1"
+)
+ANDROID_UA = (
+    "Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36"
+)
+DESKTOP_UA = (
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+)
+# Modern iPadOS Safari reports a Mac desktop UA — tablets fall through to the DAW.
+IPAD_UA = (
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
+    "(KHTML, like Gecko) Version/17.0 Safari/605.1.15"
+)
+
+
+@pytest.mark.parametrize("ua", [IPHONE_UA, ANDROID_UA])
+def test_is_mobile_ua_true_for_phones(ua: str):
+    assert _is_mobile_ua(ua) is True
+
+
+@pytest.mark.parametrize("ua", [DESKTOP_UA, IPAD_UA, "", "curl/8.0"])
+def test_is_mobile_ua_false_for_non_phones(ua: str):
+    assert _is_mobile_ua(ua) is False
+
+
+def test_root_serves_mobile_shell_to_phones():
+    with TestClient(app) as c:
+        resp = c.get("/", headers={"user-agent": IPHONE_UA})
+    assert resp.status_code == 200
+    assert "/mobile/app.js" in resp.text
+
+
+def test_root_serves_daw_to_desktop():
+    with TestClient(app) as c:
+        resp = c.get("/", headers={"user-agent": DESKTOP_UA})
+    assert resp.status_code == 200
+    assert "/css/daw.css" in resp.text
+
+
+def test_ui_query_override_forces_mobile_on_desktop():
+    with TestClient(app) as c:
+        resp = c.get("/", params={"ui": "mobile"}, headers={"user-agent": DESKTOP_UA})
+    assert "/mobile/app.js" in resp.text
+
+
+def test_ui_query_override_forces_desktop_on_phone():
+    with TestClient(app) as c:
+        resp = c.get("/", params={"ui": "desktop"}, headers={"user-agent": IPHONE_UA})
+    assert "/css/daw.css" in resp.text
+
+
+def test_mobile_assets_are_served():
+    with TestClient(app) as c:
+        assert c.get("/mobile/app.js").status_code == 200
+        assert c.get("/mobile/styles.css").status_code == 200
diff --git a/tests/test_network_gate.py b/tests/test_network_gate.py
new file mode 100644
index 00000000..48727217
--- /dev/null
+++ b/tests/test_network_gate.py
@@ -0,0 +1,100 @@
+from __future__ import annotations
+
+import pytest
+from fastapi.testclient import TestClient
+
+from app.core import settings as settings_mod
+from app.main import _is_host_request, _is_loopback, app
+
+MOBILE_UA = "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) Mobile/15E148"
+
+
+@pytest.mark.parametrize(
+    "host,expected",
+    [
+        ("127.0.0.1", True),
+        ("::1", True),
+        ("localhost", True),
+        ("::ffff:127.0.0.1", True),
+        ("127.0.1.1", True),
+        ("192.168.1.14", False),
+        ("10.0.0.5", False),
+        ("", False),
+        (None, False),
+    ],
+)
+def test_is_loopback(host, expected):
+    assert _is_loopback(host) is expected
+
+
+def test_host_request_recognizes_own_lan_ip(monkeypatch):
+    # The host reaching itself via its LAN address must count as local, so
+    # turning network access off never cuts the host off from its own server.
+    monkeypatch.setattr("app.main._local_ips", lambda: frozenset({"192.168.1.14"}))
+    assert _is_host_request("192.168.1.14") is True  # the host's own IP
+    assert _is_host_request("127.0.0.1") is True  # loopback
+    assert _is_host_request("192.168.1.99") is False  # a different device
+
+
+def test_default_is_off(monkeypatch):
+    # Off by default everywhere — the user must opt in.
+    monkeypatch.delenv("STEMDECK_ALLOW_NETWORK", raising=False)
+    assert settings_mod._default_allow_network() is False
+
+
+def test_env_var_pre_enables(monkeypatch):
+    monkeypatch.setenv("STEMDECK_ALLOW_NETWORK", "1")
+    assert settings_mod._default_allow_network() is True
+
+
+def test_runtime_settings_round_trip_and_clamp():
+    with TestClient(app) as c:
+        r = c.post("/api/settings", json={"max_duration_sec": 600, "video_max_height": 1080})
+        assert r.status_code == 200
+        body = r.json()
+        assert body["max_duration_sec"] == 600
+        assert body["video_max_height"] == 1080
+        # GET reflects the new values.
+        assert c.get("/api/settings").json()["max_duration_sec"] == 600
+
+    # Out-of-range values are clamped, not rejected.
+    assert settings_mod.set_max_duration_sec(5) == 60  # floor
+    assert settings_mod.set_max_duration_sec(99999) == 1200  # ceiling = 20 min
+    assert settings_mod.set_video_max_height(99999) == 2160  # ceil
+
+
+def test_settings_reject_non_integer():
+    with TestClient(app) as c:
+        assert c.post("/api/settings", json={"max_duration_sec": "abc"}).status_code == 422
+
+
+def test_gate_blocks_non_loopback_when_off():
+    settings_mod.set_allow_network(False)
+    # TestClient's client host ("testclient") is treated as non-loopback.
+    with TestClient(app) as c:
+        r = c.get("/", headers={"user-agent": MOBILE_UA})
+    assert r.status_code == 403
+
+
+def test_gate_allows_everyone_when_on():
+    settings_mod.set_allow_network(True)
+    with TestClient(app) as c:
+        assert c.get("/api/health").status_code == 200
+
+
+def test_loopback_always_allowed_even_when_off(monkeypatch):
+    settings_mod.set_allow_network(False)
+    monkeypatch.setattr("app.main._is_loopback", lambda _host: True)
+    with TestClient(app) as c:
+        assert c.get("/api/health").status_code == 200
+
+
+def test_post_toggles_off_then_blocks():
+    settings_mod.set_allow_network(True)  # so the non-loopback client can reach POST
+    with TestClient(app) as c:
+        r = c.post("/api/settings", json={"allow_network": False})
+        assert r.status_code == 200
+        assert r.json()["allow_network"] is False
+    # Now off → a non-loopback client is blocked from everything.
+    with TestClient(app) as c:
+        assert c.get("/api/settings").status_code == 403