From e2f743e8bc8c841016f98a6b442d6ba34a2f8cc1 Mon Sep 17 00:00:00 2001
From: Brian McGonagill <brian@fixitdelrio.com>
Date: Mon, 9 Mar 2026 17:42:26 -0500
Subject: [PATCH] Initial Commit

---
 Dockerfile         |   92 ++++
 README.md          |  125 +++++
 app.js             |  696 +++++++++++++++++++++++++
 app.py             |  486 +++++++++++++++++
 docker-compose.yml |   85 +++
 gunicorn.conf.py   |   39 ++
 index.html         |  260 ++++++++++
 main.css           | 1231 ++++++++++++++++++++++++++++++++++++++++++++
 requirements.txt   |   12 +
 start.sh           |   60 +++
 wsgi.py            |   18 +
 11 files changed, 3104 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 README.md
 create mode 100644 app.js
 create mode 100644 app.py
 create mode 100644 docker-compose.yml
 create mode 100644 gunicorn.conf.py
 create mode 100644 index.html
 create mode 100644 main.css
 create mode 100644 requirements.txt
 create mode 100644 start.sh
 create mode 100644 wsgi.py

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..abd1a99
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,92 @@
+# =============================================================================
+# VideoPress — Dockerfile
+# =============================================================================
+#
+# Build:
+#   docker build -t videopress .
+#
+# Run (quick):
+#   docker run -d \
+#     -p 8080:8080 \
+#     -v /your/video/path:/media \
+#     --name videopress \
+#     videopress
+#
+# See docker-compose.yml for a fully-configured example.
+# =============================================================================
+
+# ── Stage 1: Python dependency builder ──────────────────────────────────────
+FROM python:3.12-slim AS builder
+
+WORKDIR /build
+
+# Install build tools needed to compile gevent's C extensions
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        gcc \
+        libffi-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+
+# Install into an isolated prefix so we can copy just the packages
+RUN pip install --upgrade pip \
+ && pip install --prefix=/install --no-cache-dir -r requirements.txt
+
+
+# ── Stage 2: Runtime image ───────────────────────────────────────────────────
+FROM python:3.12-slim
+
+# ── System packages: ffmpeg (includes ffprobe) ───────────────────────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        ffmpeg \
+    && rm -rf /var/lib/apt/lists/*
+
+# ── Copy Python packages from builder ────────────────────────────────────────
+COPY --from=builder /install /usr/local
+
+# ── Create a non-root application user ───────────────────────────────────────
+#    UID/GID 1000 is conventional and matches most Linux desktop users,
+#    which makes the volume-mapped files readable without extra chown steps.
+RUN groupadd --gid 1000 appuser \
+ && useradd  --uid 1000 --gid 1000 --no-create-home --shell /sbin/nologin appuser
+
+# ── Application code ─────────────────────────────────────────────────────────
+WORKDIR /app
+COPY app.py wsgi.py gunicorn.conf.py requirements.txt ./
+COPY templates/ templates/
+COPY static/    static/
+
+# ── Media volume mount point ──────────────────────────────────────────────────
+#    The host directory containing videos is mounted here at runtime.
+#    All file-system access by the application is restricted to this path.
+RUN mkdir -p /media && chown appuser:appuser /media
+
+# ── File ownership ────────────────────────────────────────────────────────────
+RUN chown -R appuser:appuser /app
+
+# ── Switch to non-root user ───────────────────────────────────────────────────
+USER appuser
+
+# ── Environment defaults (all overridable via docker run -e or compose) ──────
+#   MEDIA_ROOT  — the path inside the container where videos are accessed.
+#                 Must match the container-side of your volume mount.
+#   PORT        — TCP port Gunicorn listens on (exposed below).
+#   LOG_LEVEL   — Gunicorn log verbosity (debug | info | warning | error).
+ENV MEDIA_ROOT=/media \
+    PORT=8080 \
+    LOG_LEVEL=info \
+    PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1
+
+# ── Expose the web UI port ────────────────────────────────────────────────────
+#    The UI and API share the same port — no separate API port is needed.
+EXPOSE 8080
+
+# ── Health check ─────────────────────────────────────────────────────────────
+HEALTHCHECK --interval=30s --timeout=10s --start-period=15s --retries=3 \
+    CMD python3 -c \
+        "import urllib.request; urllib.request.urlopen('http://localhost:8080/')" \
+    || exit 1
+
+# ── Start Gunicorn ────────────────────────────────────────────────────────────
+CMD ["gunicorn", "-c", "gunicorn.conf.py", "wsgi:app"]
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c339cbf
--- /dev/null
+++ b/README.md
@@ -0,0 +1,125 @@
+# VideoPress — FFmpeg Video Compressor
+
+A web-based video compression tool served via **Gunicorn + gevent** (WSGI),
+containerised with **Docker**.  FFmpeg compresses video files to approximately
+1/3 their original size.  All file-system access is restricted to a single
+configurable media root for security.
+
+---
+
+## Quick start with Docker (recommended)
+
+```bash
+# 1. Build the image
+docker build -t videopress .
+
+# 2. Run — replace /your/video/path with the real path on your host
+docker run -d \
+  --name videopress \
+  --restart unless-stopped \
+  -p 8080:8080 \
+  -v /your/video/path:/media \
+  videopress
+
+# 3. Open http://localhost:8080
+```
+
+### With docker compose
+
+```bash
+# Edit the volume path in docker-compose.yml  (or export the env var):
+export MEDIA_HOST_PATH=/your/video/path
+
+docker compose up -d
+```
+
+---
+
+## Bare-metal (without Docker)
+
+### Requirements
+
+| Tool | Version |
+|------|---------|
+| Python | 3.8+ |
+| FFmpeg + FFprobe | any recent |
+| pip packages | see requirements.txt |
+
+```bash
+# Install Python dependencies
+pip install -r requirements.txt
+
+# Development server (Flask built-in — not for production)
+./start.sh
+
+# Production server (Gunicorn + gevent)
+MEDIA_ROOT=/your/video/path ./start.sh --prod
+# or on a custom port:
+MEDIA_ROOT=/your/video/path ./start.sh --prod 9000
+```
+
+---
+
+## Security model
+
+Every API call that accepts a path validates it with `safe_path()` before any
+OS operation.  `safe_path()` resolves symlinks and asserts the result is inside
+`MEDIA_ROOT`.  Requests that attempt directory traversal are rejected with
+HTTP 403.  The container runs as a non-root user (UID 1000).
+
+---
+
+## Architecture
+
+```
+Browser  ──HTTP──▶  Gunicorn (gevent worker)
+                        │
+                        ├─ GET  /                 → index.html
+                        ├─ GET  /api/config        → {"media_root": ...}
+                        ├─ GET  /api/browse        → directory listing
+                        ├─ POST /api/scan          → ffprobe metadata
+                        ├─ POST /api/compress/start → launch ffmpeg thread
+                        ├─ GET  /api/compress/progress/<id>  ← SSE stream
+                        └─ POST /api/compress/cancel/<id>
+```
+
+**Why gevent?**  SSE (`/api/compress/progress`) is a long-lived streaming
+response.  Standard Gunicorn sync workers block for its entire duration.
+Gevent workers use cooperative greenlets so a single worker process can
+handle many concurrent SSE streams and normal requests simultaneously.
+
+**Why workers=1?**  Job state lives in an in-process Python dict.  Multiple
+worker *processes* would not share it.  One gevent worker with many greenlets
+is sufficient for this workload.  To scale to multiple workers, replace the
+in-process job store with Redis.
+
+---
+
+## Environment variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `MEDIA_ROOT` | `/media` | Root directory the app may access |
+| `PORT` | `8080` | Port Gunicorn listens on |
+| `LOG_LEVEL` | `info` | Gunicorn log level |
+
+---
+
+## File layout
+
+```
+videocompressor/
+├── app.py              ← Flask application + all API routes
+├── wsgi.py             ← Gunicorn entry point  (imports app from app.py)
+├── gunicorn.conf.py    ← Gunicorn configuration (gevent, timeout, logging)
+├── requirements.txt    ← Python dependencies
+├── Dockerfile          ← Two-stage Docker build
+├── docker-compose.yml  ← Volume mapping, port, env vars
+├── start.sh            ← Helper script (dev + prod modes)
+├── README.md
+├── templates/
+│   └── index.html
+└── static/
+    ├── css/main.css
+    └── js/app.js
+```
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..7c29f4e
--- /dev/null
+++ b/app.js
@@ -0,0 +1,696 @@
+/**
+ * VideoPress — Frontend Application
+ * Handles all UI interactions, API calls, and SSE progress streaming.
+ * WCAG 2.2 compliant, fully functional, no stubs.
+ */
+
+'use strict';
+
+// ─── State ──────────────────────────────────────────────────────────────────
+const state = {
+  scannedFiles: [],         // enriched file objects from API
+  selectedPaths: new Set(), // paths of selected files
+  currentJobId: null,
+  eventSource: null,
+  compressionResults: [],
+  browserPath: '/',
+};
+
+// ─── DOM References ──────────────────────────────────────────────────────────
+const $ = (id) => document.getElementById(id);
+
+const els = {
+  // Config section
+  dirInput:       $('dir-input'),
+  browseBtn:      $('browse-btn'),
+  minSizeInput:   $('min-size-input'),
+  suffixInput:    $('suffix-input'),
+  scanBtn:        $('scan-btn'),
+  scanStatus:     $('scan-status'),
+
+  // Browser modal
+  browserModal:   $('browser-modal'),
+  browserList:    $('browser-list'),
+  browserPath:    $('browser-current-path'),
+  closeBrowser:   $('close-browser'),
+  browserCancel:  $('browser-cancel'),
+  browserSelect:  $('browser-select'),
+
+  // Files section
+  sectionFiles:   $('section-files'),
+  selectAllBtn:   $('select-all-btn'),
+  deselectAllBtn: $('deselect-all-btn'),
+  selectionSummary: $('selection-summary'),
+  fileTbody:      $('file-tbody'),
+  compressBtn:    $('compress-btn'),
+
+  // Progress section
+  sectionProgress: $('section-progress'),
+  progTotal:      $('prog-total'),
+  progDone:       $('prog-done'),
+  progStatus:     $('prog-status'),
+  overallBar:     $('overall-bar'),
+  overallBarFill: $('overall-bar-fill'),
+  overallPct:     $('overall-pct'),
+  fileProgressList: $('file-progress-list'),
+  cancelBtn:      $('cancel-btn'),
+
+  // Results
+  sectionResults: $('section-results'),
+  resultsContent: $('results-content'),
+  restartBtn:     $('restart-btn'),
+
+  // Theme
+  themeToggle:    $('theme-toggle'),
+  themeIcon:      $('theme-icon'),
+
+  // Screen reader announce
+  srAnnounce:     $('sr-announce'),
+};
+
+// ─── Accessibility Helper ─────────────────────────────────────────────────────
+function announce(msg) {
+  els.srAnnounce.textContent = '';
+  requestAnimationFrame(() => {
+    els.srAnnounce.textContent = msg;
+  });
+}
+
+// ─── Theme Management ─────────────────────────────────────────────────────────
+function initTheme() {
+  const saved = localStorage.getItem('vp-theme');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const theme = saved || (prefersDark ? 'dark' : 'light');
+  applyTheme(theme);
+}
+
+function applyTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  els.themeIcon.textContent = theme === 'dark' ? '☀' : '◑';
+  els.themeToggle.setAttribute('aria-label', `Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`);
+  localStorage.setItem('vp-theme', theme);
+}
+
+els.themeToggle.addEventListener('click', () => {
+  const current = document.documentElement.getAttribute('data-theme') || 'light';
+  applyTheme(current === 'dark' ? 'light' : 'dark');
+});
+
+// ─── Directory Browser ────────────────────────────────────────────────────────
+async function loadBrowserPath(path) {
+  els.browserList.innerHTML = '<p class="browser-loading" aria-live="polite">Loading…</p>';
+  els.browserPath.textContent = path;
+
+  try {
+    const resp = await fetch(`/api/browse?path=${encodeURIComponent(path)}`);
+    if (!resp.ok) throw new Error((await resp.json()).error || 'Error loading directory');
+    const data = await resp.json();
+
+    state.browserPath = data.current;
+    els.browserPath.textContent = data.current;
+
+    let html = '';
+
+    // Parent directory link
+    if (data.parent !== null) {
+      html += `
+        <button class="browser-item parent-dir" data-path="${escHtml(data.parent)}" data-is-dir="true">
+          <span class="item-icon" aria-hidden="true">↑</span>
+          <span>.. (parent directory)</span>
+        </button>`;
+    }
+
+    if (data.entries.length === 0 && !data.parent) {
+      html += '<p class="browser-loading">No accessible directories found.</p>';
+    }
+
+    for (const entry of data.entries) {
+      if (!entry.is_dir) continue;
+      html += `
+        <button class="browser-item" data-path="${escHtml(entry.path)}" data-is-dir="true"
+                role="option" aria-label="Directory: ${escHtml(entry.name)}">
+          <span class="item-icon" aria-hidden="true">📁</span>
+          <span>${escHtml(entry.name)}</span>
+        </button>`;
+    }
+
+    if (html === '') {
+      html = '<p class="browser-loading">No subdirectories found.</p>';
+    }
+
+    els.browserList.innerHTML = html;
+
+    // Attach click events
+    els.browserList.querySelectorAll('.browser-item').forEach(item => {
+      item.addEventListener('click', () => loadBrowserPath(item.dataset.path));
+      item.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          loadBrowserPath(item.dataset.path);
+        }
+      });
+    });
+
+  } catch (err) {
+    els.browserList.innerHTML = `<p class="browser-error" role="alert">Error: ${escHtml(err.message)}</p>`;
+  }
+}
+
+function openBrowserModal() {
+  els.browserModal.hidden = false;
+  document.body.style.overflow = 'hidden';
+  loadBrowserPath(els.dirInput.value || '/');
+  // Focus trap
+  els.closeBrowser.focus();
+  announce('Directory browser opened');
+}
+
+function closeBrowserModal() {
+  els.browserModal.hidden = true;
+  document.body.style.overflow = '';
+  els.browseBtn.focus();
+  announce('Directory browser closed');
+}
+
+els.browseBtn.addEventListener('click', openBrowserModal);
+els.closeBrowser.addEventListener('click', closeBrowserModal);
+els.browserCancel.addEventListener('click', closeBrowserModal);
+
+els.browserSelect.addEventListener('click', () => {
+  els.dirInput.value = state.browserPath;
+  closeBrowserModal();
+  announce(`Directory selected: ${state.browserPath}`);
+});
+
+// Close modal on backdrop click
+els.browserModal.addEventListener('click', (e) => {
+  if (e.target === els.browserModal) closeBrowserModal();
+});
+
+// Keyboard: close on Escape
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && !els.browserModal.hidden) {
+    closeBrowserModal();
+  }
+});
+
+// ─── Scan for Files ───────────────────────────────────────────────────────────
+els.scanBtn.addEventListener('click', async () => {
+  const directory = els.dirInput.value.trim();
+  const minSize = parseFloat(els.minSizeInput.value);
+
+  if (!directory) {
+    showScanStatus('Please enter a directory path.', 'error');
+    els.dirInput.focus();
+    return;
+  }
+  if (isNaN(minSize) || minSize <= 0) {
+    showScanStatus('Please enter a valid minimum size greater than 0.', 'error');
+    els.minSizeInput.focus();
+    return;
+  }
+
+  els.scanBtn.disabled = true;
+  els.scanBtn.textContent = '⟳ Scanning…';
+  showScanStatus('Scanning directory, please wait…', 'info');
+  announce('Scanning directory for video files, please wait.');
+
+  // Hide previous results
+  els.sectionFiles.hidden = true;
+
+  try {
+    const resp = await fetch('/api/scan', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ directory, min_size_gb: minSize }),
+    });
+
+    const data = await resp.json();
+
+    if (!resp.ok) {
+      showScanStatus(`Error: ${data.error}`, 'error');
+      announce(`Scan failed: ${data.error}`);
+      return;
+    }
+
+    state.scannedFiles = data.files;
+    state.selectedPaths.clear();
+
+    if (data.files.length === 0) {
+      showScanStatus(
+        `No video files larger than ${minSize} GB found in that directory.`,
+        'warn'
+      );
+      announce('No video files found matching your criteria.');
+      return;
+    }
+
+    showScanStatus(`Found ${data.files.length} file(s).`, 'success');
+    announce(`Scan complete. Found ${data.files.length} video files.`);
+    renderFileTable(data.files);
+    els.sectionFiles.hidden = false;
+    els.sectionFiles.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  } catch (err) {
+    showScanStatus(`Network error: ${err.message}`, 'error');
+    announce(`Scan error: ${err.message}`);
+  } finally {
+    els.scanBtn.disabled = false;
+    els.scanBtn.innerHTML = '<span class="btn-icon-prefix" aria-hidden="true">⊙</span> Scan for Files';
+  }
+});
+
+function showScanStatus(msg, type) {
+  els.scanStatus.textContent = msg;
+  els.scanStatus.style.color = type === 'error' ? 'var(--text-danger)'
+                              : type === 'success' ? 'var(--text-success)'
+                              : type === 'warn' ? 'var(--accent)'
+                              : 'var(--text-muted)';
+}
+
+// ─── File Table Rendering ─────────────────────────────────────────────────────
+function renderFileTable(files) {
+  let html = '';
+  files.forEach((f, idx) => {
+    const sizeFmt   = f.size_gb.toFixed(3);
+    const curBitrate = f.bit_rate_mbps ? `${f.bit_rate_mbps} Mbps` : 'Unknown';
+    const tgtBitrate = f.target_bit_rate_mbps ? `${f.target_bit_rate_mbps} Mbps` : '—';
+    const codec = f.codec || 'unknown';
+    const pathDir = f.path.replace(f.name, '');
+
+    html += `
+      <tr id="row-${idx}" data-path="${escHtml(f.path)}">
+        <td class="col-check">
+          <input
+            type="checkbox"
+            class="file-checkbox"
+            id="chk-${idx}"
+            data-path="${escHtml(f.path)}"
+            aria-label="Select ${escHtml(f.name)} for compression"
+          />
+        </td>
+        <td class="col-name">
+          <label for="chk-${idx}" class="file-name-cell" style="cursor:pointer">
+            <span class="file-name">${escHtml(f.name)}</span>
+            <span class="file-path" title="${escHtml(f.path)}">${escHtml(pathDir)}</span>
+          </label>
+        </td>
+        <td class="col-size">
+          <strong>${sizeFmt}</strong> GB
+        </td>
+        <td class="col-bitrate">
+          <span class="bitrate-badge">${escHtml(curBitrate)}</span>
+        </td>
+        <td class="col-target">
+          <span class="bitrate-badge target">${escHtml(tgtBitrate)}</span>
+        </td>
+        <td class="col-codec">
+          <span class="codec-tag">${escHtml(codec)}</span>
+        </td>
+      </tr>`;
+  });
+
+  els.fileTbody.innerHTML = html;
+
+  // Attach change events
+  els.fileTbody.querySelectorAll('.file-checkbox').forEach(chk => {
+    chk.addEventListener('change', () => {
+      const path = chk.dataset.path;
+      const row = chk.closest('tr');
+      if (chk.checked) {
+        state.selectedPaths.add(path);
+        row.classList.add('selected');
+      } else {
+        state.selectedPaths.delete(path);
+        row.classList.remove('selected');
+      }
+      updateSelectionUI();
+    });
+  });
+
+  updateSelectionUI();
+}
+
+function updateSelectionUI() {
+  const total = state.scannedFiles.length;
+  const sel = state.selectedPaths.size;
+  els.selectionSummary.textContent = `${sel} of ${total} selected`;
+  els.compressBtn.disabled = sel === 0;
+}
+
+els.selectAllBtn.addEventListener('click', () => {
+  els.fileTbody.querySelectorAll('.file-checkbox').forEach(chk => {
+    chk.checked = true;
+    state.selectedPaths.add(chk.dataset.path);
+    chk.closest('tr').classList.add('selected');
+  });
+  updateSelectionUI();
+  announce(`All ${state.scannedFiles.length} files selected.`);
+});
+
+els.deselectAllBtn.addEventListener('click', () => {
+  els.fileTbody.querySelectorAll('.file-checkbox').forEach(chk => {
+    chk.checked = false;
+    chk.closest('tr').classList.remove('selected');
+  });
+  state.selectedPaths.clear();
+  updateSelectionUI();
+  announce('All files deselected.');
+});
+
+// ─── Start Compression ────────────────────────────────────────────────────────
+els.compressBtn.addEventListener('click', async () => {
+  const selectedFiles = state.scannedFiles.filter(f => state.selectedPaths.has(f.path));
+  if (selectedFiles.length === 0) return;
+
+  const suffix = els.suffixInput.value.trim() || '_new';
+
+  const payload = {
+    files: selectedFiles.map(f => ({
+      path: f.path,
+      size_bytes: f.size_bytes,
+      target_bit_rate_bps: f.target_bit_rate_bps || 1000000,
+    })),
+    suffix,
+  };
+
+  els.compressBtn.disabled = true;
+  els.compressBtn.textContent = 'Starting…';
+
+  try {
+    const resp = await fetch('/api/compress/start', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+
+    const data = await resp.json();
+
+    if (!resp.ok) {
+      alert(`Failed to start compression: ${data.error}`);
+      els.compressBtn.disabled = false;
+      els.compressBtn.innerHTML = '<span class="btn-icon-prefix" aria-hidden="true">⚡</span> Compress Selected Files';
+      return;
+    }
+
+    state.currentJobId = data.job_id;
+    state.compressionResults = [];
+
+    // Show progress section
+    setupProgressSection(selectedFiles);
+    els.sectionProgress.hidden = false;
+    els.sectionProgress.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    announce(`Compression started for ${selectedFiles.length} file(s).`);
+
+    // Start SSE stream
+    startProgressStream(data.job_id, selectedFiles);
+
+  } catch (err) {
+    alert(`Error: ${err.message}`);
+    els.compressBtn.disabled = false;
+    els.compressBtn.innerHTML = '<span class="btn-icon-prefix" aria-hidden="true">⚡</span> Compress Selected Files';
+  }
+});
+
+// ─── Progress Setup ───────────────────────────────────────────────────────────
+function setupProgressSection(files) {
+  els.progTotal.textContent = files.length;
+  els.progDone.textContent = '0';
+  els.progStatus.textContent = 'Running';
+  setOverallProgress(0);
+
+  // Create per-file items
+  let html = '';
+  files.forEach((f, idx) => {
+    html += `
+      <div class="file-progress-item" id="fpi-${idx}" role="listitem"
+           aria-label="File ${idx+1} of ${files.length}: ${escHtml(f.name)}">
+        <div class="fp-header">
+          <span class="fp-name">${escHtml(f.name)}</span>
+          <span class="fp-status waiting" id="fps-${idx}" aria-live="polite">Waiting</span>
+        </div>
+        <div class="fp-bar-wrap" aria-label="Progress for ${escHtml(f.name)}">
+          <div class="fp-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+               id="fpbar-${idx}" aria-label="${escHtml(f.name)} progress">
+            <div class="fp-bar-fill" id="fpfill-${idx}" style="width:0%"></div>
+          </div>
+          <span class="fp-pct" id="fppct-${idx}" aria-hidden="true">0%</span>
+        </div>
+        <div class="fp-detail" id="fpdetail-${idx}"></div>
+      </div>`;
+  });
+
+  els.fileProgressList.innerHTML = html;
+}
+
+function setOverallProgress(pct) {
+  const p = Math.round(pct);
+  els.overallBarFill.style.width = `${p}%`;
+  els.overallBar.setAttribute('aria-valuenow', p);
+  els.overallPct.textContent = `${p}%`;
+}
+
+function updateFileProgress(idx, pct, statusClass, statusText, detail, detailClass) {
+  const fill   = $(`fpfill-${idx}`);
+  const bar    = $(`fpbar-${idx}`);
+  const pctEl  = $(`fppct-${idx}`);
+  const status = $(`fps-${idx}`);
+  const item   = $(`fpi-${idx}`);
+  const det    = $(`fpdetail-${idx}`);
+
+  if (!fill) return;
+
+  const p = Math.round(pct);
+  fill.style.width = `${p}%`;
+  bar.setAttribute('aria-valuenow', p);
+  pctEl.textContent = `${p}%`;
+
+  status.className = `fp-status ${statusClass}`;
+  status.textContent = statusText;
+
+  item.className = `file-progress-item ${statusClass}`;
+
+  // Toggle animation on bar fill
+  fill.classList.toggle('active', statusClass === 'running');
+
+  if (detail !== undefined) {
+    det.textContent = detail;
+    det.className = `fp-detail ${detailClass || ''}`;
+  }
+}
+
+// ─── SSE Stream Handling ──────────────────────────────────────────────────────
+function startProgressStream(jobId, files) {
+  if (state.eventSource) {
+    state.eventSource.close();
+  }
+
+  state.eventSource = new EventSource(`/api/compress/progress/${jobId}`);
+  let doneCount = 0;
+
+  state.eventSource.onmessage = (evt) => {
+    let data;
+    try { data = JSON.parse(evt.data); }
+    catch { return; }
+
+    switch (data.type) {
+      case 'start':
+        els.progStatus.textContent = 'Running';
+        break;
+
+      case 'file_start':
+        updateFileProgress(data.index, 0, 'running', 'Compressing…', '', '');
+        // Scroll to active item
+        const activeItem = $(`fpi-${data.index}`);
+        if (activeItem) {
+          activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+        announce(`Compressing file ${data.index + 1} of ${data.total}: ${files[data.index]?.name || ''}`);
+        break;
+
+      case 'progress': {
+        const pct = data.percent || 0;
+        let detail = '';
+        if (data.elapsed_secs > 0 && data.duration_secs > 0) {
+          detail = `${fmtTime(data.elapsed_secs)} / ${fmtTime(data.duration_secs)}`;
+        }
+        updateFileProgress(data.index, pct, 'running', 'Compressing…', detail, '');
+
+        // Update overall progress
+        const overallPct = ((doneCount + (pct / 100)) / files.length) * 100;
+        setOverallProgress(overallPct);
+        break;
+      }
+
+      case 'file_done': {
+        doneCount++;
+        els.progDone.textContent = doneCount;
+        const detail = data.reduction_pct
+          ? `Saved ${data.reduction_pct}% → ${data.output_size_gb} GB`
+          : 'Complete';
+        updateFileProgress(data.index, 100, 'done', '✓ Done', detail, 'success');
+        setOverallProgress((doneCount / files.length) * 100);
+        state.compressionResults.push({ ...data, status: 'done' });
+        announce(`File complete: ${files[data.index]?.name}. Saved ${data.reduction_pct}%.`);
+        break;
+      }
+
+      case 'file_error': {
+        doneCount++;
+        els.progDone.textContent = doneCount;
+        updateFileProgress(data.index, 0, 'error', '✗ Error', data.message, 'error');
+        state.compressionResults.push({ ...data, status: 'error' });
+        announce(`Error compressing file ${files[data.index]?.name}: ${data.message}`);
+        break;
+      }
+
+      case 'done':
+        state.eventSource.close();
+        els.progStatus.textContent = 'Complete';
+        setOverallProgress(100);
+        els.cancelBtn.disabled = true;
+        announce('All compression operations complete.');
+        showResults('done');
+        break;
+
+      case 'cancelled':
+        state.eventSource.close();
+        els.progStatus.textContent = 'Cancelled';
+        announce('Compression cancelled.');
+        showResults('cancelled');
+        break;
+
+      case 'error':
+        state.eventSource.close();
+        els.progStatus.textContent = 'Error';
+        announce(`Compression error: ${data.message}`);
+        break;
+    }
+  };
+
+  state.eventSource.onerror = () => {
+    if (state.eventSource.readyState === EventSource.CLOSED) return;
+    console.error('SSE connection error');
+  };
+}
+
+// ─── Cancel ───────────────────────────────────────────────────────────────────
+els.cancelBtn.addEventListener('click', async () => {
+  if (!state.currentJobId) return;
+
+  const confirmed = window.confirm(
+    'Cancel all compression operations? Any files currently being processed will be deleted.'
+  );
+  if (!confirmed) return;
+
+  els.cancelBtn.disabled = true;
+  els.cancelBtn.textContent = 'Cancelling…';
+
+  try {
+    await fetch(`/api/compress/cancel/${state.currentJobId}`, { method: 'POST' });
+    announce('Cancellation requested.');
+  } catch (err) {
+    console.error('Cancel error:', err);
+  }
+});
+
+// ─── Results ──────────────────────────────────────────────────────────────────
+function showResults(finalStatus) {
+  const results = state.compressionResults;
+  let html = '';
+
+  if (finalStatus === 'cancelled') {
+    html += `<p style="color:var(--text-muted); margin-bottom: var(--space-md)">
+      Compression was cancelled. Any completed files are listed below.
+    </p>`;
+  }
+
+  if (results.length === 0 && finalStatus === 'cancelled') {
+    html += '<p style="color:var(--text-muted)">No files were completed before cancellation.</p>';
+  }
+
+  results.forEach(r => {
+    if (r.status === 'done') {
+      html += `
+        <div class="result-row">
+          <span class="result-icon">✅</span>
+          <div class="result-info">
+            <div class="result-name">${escHtml(r.filename)}</div>
+            <div class="result-meta">→ ${escHtml(r.output || '')}</div>
+          </div>
+          <span class="result-reduction">-${r.reduction_pct}%</span>
+        </div>`;
+    } else if (r.status === 'error') {
+      html += `
+        <div class="result-row">
+          <span class="result-icon">❌</span>
+          <div class="result-info">
+            <div class="result-name">${escHtml(r.filename)}</div>
+            <div class="result-meta" style="color:var(--text-danger)">${escHtml(r.message)}</div>
+          </div>
+        </div>`;
+    }
+  });
+
+  if (html === '') {
+    html = '<p style="color:var(--text-muted)">No results to display.</p>';
+  }
+
+  els.resultsContent.innerHTML = html;
+  els.sectionResults.hidden = false;
+  els.sectionResults.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+// ─── Restart ──────────────────────────────────────────────────────────────────
+els.restartBtn.addEventListener('click', () => {
+  // Reset state
+  state.scannedFiles = [];
+  state.selectedPaths.clear();
+  state.currentJobId = null;
+  state.compressionResults = [];
+  if (state.eventSource) { state.eventSource.close(); state.eventSource = null; }
+
+  // Reset UI
+  els.sectionFiles.hidden = true;
+  els.sectionProgress.hidden = true;
+  els.sectionResults.hidden = true;
+  els.fileTbody.innerHTML = '';
+  els.fileProgressList.innerHTML = '';
+  els.scanStatus.textContent = '';
+  els.compressBtn.innerHTML = '<span class="btn-icon-prefix" aria-hidden="true">⚡</span> Compress Selected Files';
+  els.compressBtn.disabled = true;
+  els.cancelBtn.disabled = false;
+  els.cancelBtn.textContent = '✕ Cancel Compression';
+
+  // Scroll to top
+  document.getElementById('section-config').scrollIntoView({ behavior: 'smooth' });
+  els.dirInput.focus();
+  announce('Session reset. Ready to scan again.');
+});
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function escHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function fmtTime(seconds) {
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sec = s % 60;
+  if (h > 0) return `${h}:${pad(m)}:${pad(sec)}`;
+  return `${m}:${pad(sec)}`;
+}
+
+function pad(n) {
+  return String(n).padStart(2, '0');
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────────
+initTheme();
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..97fca89
--- /dev/null
+++ b/app.py
@@ -0,0 +1,486 @@
+#!/usr/bin/env python3
+"""
+Video Compressor Web Application — WSGI/Docker edition
+See wsgi.py for the Gunicorn entry point.
+"""
+
+import os
+import json
+import subprocess
+import threading
+import time
+from pathlib import Path
+from flask import Flask, request, jsonify, Response, render_template, stream_with_context
+
+# ---------------------------------------------------------------------------
+# Configuration
+# ---------------------------------------------------------------------------
+
+BASE_DIR   = Path(__file__).resolve().parent
+MEDIA_ROOT = Path(os.environ.get('MEDIA_ROOT', '/media')).resolve()
+
+app = Flask(
+    __name__,
+    template_folder=str(BASE_DIR / 'templates'),
+    static_folder=str(BASE_DIR / 'static'),
+)
+
+active_jobs: dict = {}
+job_lock = threading.Lock()
+
+# ---------------------------------------------------------------------------
+# Path-jail helper — every client-supplied path passes through this
+# ---------------------------------------------------------------------------
+
+def safe_path(raw: str) -> Path:
+    """
+    Resolve *raw* and assert it is inside MEDIA_ROOT.
+    Raises PermissionError on any attempt to escape the root.
+    """
+    try:
+        resolved = Path(raw).resolve()
+    except Exception:
+        raise PermissionError(f"Invalid path: {raw!r}")
+
+    root_str = str(MEDIA_ROOT)
+    path_str = str(resolved)
+    if path_str != root_str and not path_str.startswith(root_str + os.sep):
+        raise PermissionError(
+            f"Access denied: path is outside the allowed media root ({MEDIA_ROOT})."
+        )
+    return resolved
+
+# ---------------------------------------------------------------------------
+# FFprobe / filesystem helpers
+# ---------------------------------------------------------------------------
+
+VIDEO_EXTENSIONS = {
+    '.mp4', '.mkv', '.mov', '.avi', '.wmv', '.flv',
+    '.webm', '.m4v', '.mpg', '.mpeg', '.ts', '.mts',
+    '.m2ts', '.vob', '.ogv', '.3gp', '.3g2',
+}
+
+
+def get_video_info(filepath: str) -> dict | None:
+    cmd = [
+        'ffprobe', '-v', 'error',
+        '-select_streams', 'v:0',
+        '-show_entries', 'format=duration,bit_rate,size:stream=codec_name,width,height',
+        '-of', 'json',
+        filepath,
+    ]
+    try:
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=30)
+        if result.returncode != 0:
+            return None
+        data   = json.loads(result.stdout)
+        fmt    = data.get('format', {})
+        stream = (data.get('streams') or [{}])[0]
+
+        duration   = float(fmt.get('duration', 0))
+        bit_rate   = int(fmt.get('bit_rate', 0))
+        size_bytes = int(fmt.get('size', 0))
+        codec      = stream.get('codec_name', 'unknown')
+        width      = stream.get('width', 0)
+        height     = stream.get('height', 0)
+
+        if bit_rate == 0 and duration > 0:
+            bit_rate = int((size_bytes * 8) / duration)
+
+        audio_bps        = 128_000
+        video_bps        = bit_rate - audio_bps if bit_rate > audio_bps else bit_rate
+        target_video_bps = max(int(video_bps / 3), 200_000)
+
+        return {
+            'duration':             duration,
+            'bit_rate_bps':         bit_rate,
+            'bit_rate_mbps':        round(bit_rate / 1_000_000, 2),
+            'target_bit_rate_bps':  target_video_bps,
+            'target_bit_rate_mbps': round(target_video_bps / 1_000_000, 2),
+            'size_bytes':           size_bytes,
+            'size_gb':              round(size_bytes / (1024 ** 3), 3),
+            'codec':  codec,
+            'width':  width,
+            'height': height,
+        }
+    except Exception:
+        return None
+
+
+def list_video_files(directory: Path, min_size_gb: float) -> list:
+    min_bytes = min_size_gb * (1024 ** 3)
+    results   = []
+    try:
+        for root, dirs, files in os.walk(directory):
+            dirs[:] = [d for d in dirs if not d.startswith('.')]
+            for fname in files:
+                if Path(fname).suffix.lower() in VIDEO_EXTENSIONS:
+                    fpath = os.path.join(root, fname)
+                    try:
+                        fsize = os.path.getsize(fpath)
+                        if fsize >= min_bytes:
+                            results.append({
+                                'path':       fpath,
+                                'name':       fname,
+                                'size_bytes': fsize,
+                                'size_gb':    round(fsize / (1024 ** 3), 3),
+                            })
+                    except OSError:
+                        continue
+    except PermissionError as exc:
+        raise PermissionError(f"Cannot access directory: {exc}") from exc
+    return results
+
+# ---------------------------------------------------------------------------
+# Routes — UI
+# ---------------------------------------------------------------------------
+
+@app.route('/')
+def index():
+    return render_template('index.html', media_root=str(MEDIA_ROOT))
+
+# ---------------------------------------------------------------------------
+# Routes — API
+# ---------------------------------------------------------------------------
+
+@app.route('/api/config')
+def api_config():
+    """Expose server-side config the frontend needs (e.g. media root)."""
+    return jsonify({'media_root': str(MEDIA_ROOT)})
+
+
+@app.route('/api/browse')
+def browse_directory():
+    raw = request.args.get('path', str(MEDIA_ROOT))
+    try:
+        path = safe_path(raw)
+    except PermissionError as exc:
+        return jsonify({'error': str(exc)}), 403
+
+    if not path.exists():
+        return jsonify({'error': 'Path does not exist'}), 404
+    if not path.is_dir():
+        return jsonify({'error': 'Not a directory'}), 400
+
+    try:
+        entries = []
+        for entry in sorted(path.iterdir(), key=lambda e: (not e.is_dir(), e.name.lower())):
+            if entry.name.startswith('.'):
+                continue
+            entries.append({'name': entry.name, 'path': str(entry), 'is_dir': entry.is_dir()})
+
+        parent = str(path.parent) if path != MEDIA_ROOT else None
+        return jsonify({
+            'current':    str(path),
+            'parent':     parent,
+            'entries':    entries,
+            'media_root': str(MEDIA_ROOT),
+        })
+    except PermissionError:
+        return jsonify({'error': 'Permission denied'}), 403
+
+
+@app.route('/api/scan', methods=['POST'])
+def scan_directory():
+    data        = request.get_json(silent=True) or {}
+    raw_dir     = data.get('directory', '')
+    min_size_gb = float(data.get('min_size_gb', 1.0))
+
+    if not raw_dir:
+        return jsonify({'error': 'No directory provided'}), 400
+    try:
+        directory = safe_path(raw_dir)
+    except PermissionError as exc:
+        return jsonify({'error': str(exc)}), 403
+    if not directory.is_dir():
+        return jsonify({'error': 'Invalid directory'}), 400
+
+    try:
+        files = list_video_files(directory, min_size_gb)
+    except PermissionError as exc:
+        return jsonify({'error': str(exc)}), 403
+
+    enriched = []
+    for f in files:
+        info = get_video_info(f['path'])
+        if info:
+            f.update(info)
+        else:
+            f['bit_rate_mbps']        = round((f['size_bytes'] * 8) / (90 * 60 * 1_000_000), 2)
+            f['target_bit_rate_mbps'] = round(f['bit_rate_mbps'] / 3, 2)
+            f['bit_rate_bps']         = int(f['bit_rate_mbps'] * 1_000_000)
+            f['target_bit_rate_bps']  = int(f['target_bit_rate_mbps'] * 1_000_000)
+            f['duration'] = 0
+            f['codec']    = 'unknown'
+            f['width']    = 0
+            f['height']   = 0
+        enriched.append(f)
+
+    enriched.sort(key=lambda x: x['size_bytes'], reverse=True)
+    return jsonify({'files': enriched, 'count': len(enriched)})
+
+
+@app.route('/api/compress/start', methods=['POST'])
+def start_compression():
+    data   = request.get_json(silent=True) or {}
+    files  = data.get('files', [])
+    suffix = data.get('suffix', '_new')
+
+    if not files:
+        return jsonify({'error': 'No files provided'}), 400
+
+    for f in files:
+        try:
+            safe_path(f.get('path', ''))
+        except PermissionError as exc:
+            return jsonify({'error': str(exc)}), 403
+
+    job_id = f"job_{int(time.time() * 1000)}"
+    job = {
+        'id':            job_id,
+        'files':         files,
+        'suffix':        suffix,
+        'status':        'running',
+        'current_index': 0,
+        'total':         len(files),
+        'events':        [],
+        'process':       None,
+        'cancelled':     False,
+        'lock':          threading.Lock(),
+    }
+    with job_lock:
+        active_jobs[job_id] = job
+
+    threading.Thread(target=run_compression_job, args=(job_id,), daemon=True).start()
+    return jsonify({'job_id': job_id})
+
+
+@app.route('/api/compress/progress/<job_id>')
+def compression_progress(job_id):
+    """
+    SSE stream.  Works under Gunicorn+gevent: time.sleep() yields the
+    greenlet instead of blocking a real OS thread.
+    """
+    def event_stream():
+        last_idx = 0
+        while True:
+            with job_lock:
+                job = active_jobs.get(job_id)
+            if not job:
+                yield f"data: {json.dumps({'type': 'error', 'message': 'Job not found'})}\n\n"
+                return
+
+            with job['lock']:
+                new_events = job['events'][last_idx:]
+                last_idx  += len(new_events)
+                status     = job['status']
+
+            for event in new_events:
+                yield f"data: {json.dumps(event)}\n\n"
+
+            if status in ('done', 'cancelled', 'error') and not new_events:
+                break
+
+            time.sleep(0.25)
+
+    return Response(
+        stream_with_context(event_stream()),
+        mimetype='text/event-stream',
+        headers={'Cache-Control': 'no-cache', 'X-Accel-Buffering': 'no'},
+    )
+
+
+@app.route('/api/compress/cancel/<job_id>', methods=['POST'])
+def cancel_compression(job_id):
+    with job_lock:
+        job = active_jobs.get(job_id)
+    if not job:
+        return jsonify({'error': 'Job not found'}), 404
+
+    with job['lock']:
+        job['cancelled'] = True
+        proc = job.get('process')
+
+    if proc and proc.poll() is None:
+        try:
+            proc.terminate()
+            time.sleep(1)
+            if proc.poll() is None:
+                proc.kill()
+        except Exception:
+            pass
+
+    return jsonify({'status': 'cancellation requested'})
+
+# ---------------------------------------------------------------------------
+# Compression worker
+# ---------------------------------------------------------------------------
+
+def push_event(job: dict, event: dict) -> None:
+    with job['lock']:
+        job['events'].append(event)
+
+
+def run_compression_job(job_id: str) -> None:
+    with job_lock:
+        job = active_jobs.get(job_id)
+    if not job:
+        return
+
+    files  = job['files']
+    suffix = job['suffix']
+    total  = job['total']
+
+    push_event(job, {'type': 'start', 'total': total,
+                     'message': f'Starting compression of {total} file(s)'})
+
+    for idx, file_info in enumerate(files):
+        with job['lock']:
+            cancelled = job['cancelled']
+        if cancelled:
+            push_event(job, {'type': 'cancelled', 'message': 'Compression cancelled by user'})
+            with job['lock']:
+                job['status'] = 'cancelled'
+            return
+
+        src_path       = file_info['path']
+        target_bitrate = file_info.get('target_bit_rate_bps', 1_000_000)
+        p              = Path(src_path)
+        out_path       = str(p.parent / (p.stem + suffix + p.suffix))
+
+        push_event(job, {
+            'type': 'file_start', 'index': idx, 'total': total,
+            'filename': p.name, 'output': out_path,
+            'message': f'Compressing ({idx + 1}/{total}): {p.name}',
+        })
+
+        try:
+            probe = subprocess.run(
+                ['ffprobe', '-v', 'error', '-show_entries', 'format=duration',
+                 '-of', 'default=noprint_wrappers=1:nokey=1', src_path],
+                capture_output=True, text=True, timeout=30,
+            )
+            duration_secs = float(probe.stdout.strip()) if probe.stdout.strip() else 0
+        except Exception:
+            duration_secs = 0
+
+        video_k = max(int(target_bitrate / 1000), 200)
+        cmd = [
+            'ffmpeg', '-y', '-i', src_path,
+            '-c:v', 'libx264',
+            '-b:v', f'{video_k}k',
+            '-maxrate', f'{int(video_k * 1.5)}k',
+            '-bufsize', f'{video_k * 2}k',
+            '-c:a', 'aac', '-b:a', '128k',
+            '-movflags', '+faststart',
+            '-progress', 'pipe:1', '-nostats',
+            out_path,
+        ]
+
+        try:
+            proc = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE,
+                                    text=True, bufsize=1)
+            with job['lock']:
+                job['process'] = proc
+
+            for line in proc.stdout:
+                with job['lock']:
+                    cancelled = job['cancelled']
+                if cancelled:
+                    proc.terminate()
+                    break
+
+                line = line.strip()
+                if '=' not in line:
+                    continue
+                key, _, value = line.partition('=')
+                key, value = key.strip(), value.strip()
+
+                if key == 'out_time_ms' and duration_secs > 0:
+                    try:
+                        elapsed = int(value) / 1_000_000
+                        pct     = min(100.0, (elapsed / duration_secs) * 100)
+                        push_event(job, {
+                            'type': 'progress', 'index': idx,
+                            'percent': round(pct, 1),
+                            'elapsed_secs': round(elapsed, 1),
+                            'duration_secs': round(duration_secs, 1),
+                        })
+                    except (ValueError, ZeroDivisionError):
+                        pass
+                elif key == 'progress' and value == 'end':
+                    push_event(job, {
+                        'type': 'progress', 'index': idx,
+                        'percent': 100.0,
+                        'elapsed_secs': duration_secs,
+                        'duration_secs': duration_secs,
+                    })
+
+            proc.wait()
+            with job['lock']:
+                cancelled = job['cancelled']
+
+            if cancelled:
+                try:
+                    if os.path.exists(out_path):
+                        os.remove(out_path)
+                except OSError:
+                    pass
+                push_event(job, {'type': 'cancelled', 'message': 'Compression cancelled by user'})
+                with job['lock']:
+                    job['status'] = 'cancelled'
+                return
+
+            if proc.returncode != 0:
+                try:
+                    tail = proc.stderr.read()[-500:]
+                except Exception:
+                    tail = ''
+                push_event(job, {
+                    'type': 'file_error', 'index': idx, 'filename': p.name,
+                    'message': f'ffmpeg exited with code {proc.returncode}',
+                    'detail': tail,
+                })
+            else:
+                try:
+                    out_sz    = os.path.getsize(out_path)
+                    out_gb    = round(out_sz / (1024 ** 3), 3)
+                    orig_sz   = file_info.get('size_bytes', 0)
+                    reduction = round((1 - out_sz / orig_sz) * 100, 1) if orig_sz else 0
+                except OSError:
+                    out_gb    = 0
+                    reduction = 0
+
+                push_event(job, {
+                    'type': 'file_done', 'index': idx,
+                    'filename': p.name, 'output': out_path,
+                    'output_size_gb': out_gb, 'reduction_pct': reduction,
+                    'message': f'Completed: {p.name} → saved {reduction}%',
+                })
+
+            with job['lock']:
+                job['current_index'] = idx + 1
+
+        except Exception as exc:
+            push_event(job, {
+                'type': 'file_error', 'index': idx,
+                'filename': p.name, 'message': f'Exception: {exc}',
+            })
+
+    push_event(job, {'type': 'done', 'message': f'All {total} file(s) processed.'})
+    with job['lock']:
+        job['status'] = 'done'
+
+
+# ---------------------------------------------------------------------------
+# Dev-server entry point  (production: gunicorn -c gunicorn.conf.py wsgi:app)
+# ---------------------------------------------------------------------------
+
+if __name__ == '__main__':
+    import sys
+    port = int(sys.argv[1]) if len(sys.argv) > 1 else 5000
+    print(f"\n{'='*60}")
+    print(f"  VideoPress — dev server  http://localhost:{port}")
+    print(f"  MEDIA_ROOT : {MEDIA_ROOT}")
+    print(f"{'='*60}\n")
+    app.run(host='0.0.0.0', port=port, debug=False, threaded=True)
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..e52d3ea
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,85 @@
+# =============================================================================
+# VideoPress — docker-compose.yml
+# =============================================================================
+#
+# Quick start:
+#   1. Edit MEDIA_HOST_PATH below (or set it as a shell variable before running)
+#   2. docker compose up -d
+#   3. Open http://localhost:8080
+#
+# All configuration lives in the 'environment' section — no .env file needed
+# for basic usage, though a .env file is supported (see comments below).
+# =============================================================================
+
+services:
+  videopress:
+    build:
+      context: .
+      dockerfile: Dockerfile
+
+    # ── Alternatively, use a pre-built image: ───────────────────────────────
+    # image: videopress:latest
+
+    container_name: videopress
+
+    restart: unless-stopped
+
+    # ── Port mapping ─────────────────────────────────────────────────────────
+    # Format: "HOST_PORT:CONTAINER_PORT"
+    # The UI and REST API are served on the same port — no separate API port
+    # is required.  Change the host port (left side) as needed.
+    ports:
+      - "8080:8080"
+
+    # ── Volume mapping ────────────────────────────────────────────────────────
+    # Map the directory on your HOST that contains the video files into the
+    # container at /media (MEDIA_ROOT).
+    #
+    # *** Change /path/to/your/videos to the real path on your host. ***
+    #
+    # You can also set MEDIA_HOST_PATH as an environment variable before
+    # running docker compose:
+    #   export MEDIA_HOST_PATH=/mnt/nas/videos && docker compose up -d
+    volumes:
+      - ${MEDIA_HOST_PATH:-/path/to/your/videos}:/media
+
+    # ── Environment variables ─────────────────────────────────────────────────
+    environment:
+      # Path *inside the container* where videos are accessible.
+      # Must match the right-hand side of the volume mount above.
+      MEDIA_ROOT: /media
+
+      # TCP port Gunicorn listens on (must match EXPOSE in Dockerfile and
+      # the right-hand side of the ports mapping above).
+      PORT: 8080
+
+      # Gunicorn log level: debug | info | warning | error | critical
+      LOG_LEVEL: info
+
+    # ── Resource limits (optional — uncomment to enable) ─────────────────────
+    # Compressing large video files is CPU-intensive.  Limits prevent the
+    # container from starving other workloads on the host.
+    # deploy:
+    #   resources:
+    #     limits:
+    #       cpus: '4'
+    #       memory: 2G
+    #     reservations:
+    #       cpus: '1'
+    #       memory: 512M
+
+    # ── Health check ──────────────────────────────────────────────────────────
+    healthcheck:
+      test: ["CMD", "python3", "-c",
+             "import urllib.request; urllib.request.urlopen('http://localhost:8080/')"]
+      interval: 30s
+      timeout:  10s
+      retries:  3
+      start_period: 15s
+
+    # ── Logging ───────────────────────────────────────────────────────────────
+    logging:
+      driver: json-file
+      options:
+        max-size: "10m"
+        max-file: "3"
diff --git a/gunicorn.conf.py b/gunicorn.conf.py
new file mode 100644
index 0000000..7b2a172
--- /dev/null
+++ b/gunicorn.conf.py
@@ -0,0 +1,39 @@
+"""
+gunicorn.conf.py — Gunicorn configuration for VideoPress.
+
+Key choices:
+  worker_class = gevent
+      Gevent workers are required for Server-Sent Events (SSE).  A standard
+      sync worker would block on the SSE generator and starve other requests.
+      Gevent patches blocking I/O so each SSE stream is handled as a
+      lightweight greenlet, not a full OS thread.
+
+  workers = 1
+      FFmpeg compression jobs are stored in an in-process dict (active_jobs).
+      Multiple worker *processes* would not share that state.  Keep workers=1
+      and let gevent's concurrency handle multiple simultaneous HTTP clients.
+      If you need multi-process resilience, replace the in-process job store
+      with Redis or a database.
+
+  timeout = 0
+      SSE streams are long-lived; the default 30-second worker timeout would
+      kill them.  Setting timeout=0 disables the timeout entirely for gevent
+      workers (gevent uses its own internal greenlet scheduling).
+"""
+
+import os
+
+bind        = f"0.0.0.0:{os.environ.get('PORT', '8080')}"
+workers     = 1                  # see note above — must stay at 1
+worker_class = 'gevent'
+worker_connections = 100         # max simultaneous greenlets per worker
+timeout     = 0                  # disable worker timeout for SSE streams
+keepalive   = 5
+loglevel    = os.environ.get('LOG_LEVEL', 'info')
+accesslog   = '-'                # stdout
+errorlog    = '-'                # stderr
+capture_output = True
+
+# Forward the real client IP when behind a reverse proxy (nginx / Traefik)
+forwarded_allow_ips = '*'
+proxy_allow_ips     = '*'
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c7b6b03
--- /dev/null
+++ b/index.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Server-side video compression tool using FFmpeg. Browse, select, and compress large video files." />
+  <title>VideoPress — FFmpeg Compressor</title>
+  <link rel="stylesheet" href="/static/css/main.css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <!-- Fallback font stack if Google Fonts unavailable -->
+</head>
+<body>
+
+<!-- Skip navigation for accessibility -->
+<a href="#main-content" class="skip-link">Skip to main content</a>
+
+<header class="app-header" role="banner">
+  <div class="header-inner">
+    <div class="logo" aria-label="VideoPress FFmpeg Compressor">
+      <span class="logo-icon" aria-hidden="true">▶</span>
+      <span class="logo-text">Video<strong>Press</strong></span>
+    </div>
+    <div class="header-actions">
+      <button 
+        id="theme-toggle" 
+        class="btn-icon" 
+        aria-label="Toggle dark/light mode"
+        title="Toggle dark/light mode"
+      >
+        <span class="theme-icon" aria-hidden="true" id="theme-icon">◑</span>
+      </button>
+    </div>
+  </div>
+</header>
+
+<main id="main-content" class="app-main" role="main">
+
+  <!-- STEP 1: Directory & Filter Configuration -->
+  <section class="card" id="section-config" aria-labelledby="config-heading">
+    <h2 id="config-heading" class="card-title">
+      <span class="step-badge" aria-hidden="true">01</span>
+      Configure Source
+    </h2>
+
+    <div class="config-grid">
+      <!-- Directory Browser -->
+      <div class="field-group">
+        <label for="dir-input" class="field-label">Server Directory</label>
+        <div class="dir-input-row">
+          <input 
+            type="text" 
+            id="dir-input" 
+            class="text-input" 
+            placeholder="/path/to/videos"
+            value="/"
+            aria-describedby="dir-hint"
+            autocomplete="off"
+            spellcheck="false"
+          />
+          <button class="btn btn-secondary" id="browse-btn" aria-label="Browse server directories">
+            Browse
+          </button>
+        </div>
+        <p id="dir-hint" class="field-hint">Enter or browse to a directory on the server where videos are stored.</p>
+      </div>
+
+      <!-- Minimum File Size -->
+      <div class="field-group">
+        <label for="min-size-input" class="field-label">
+          Minimum File Size
+          <span class="field-unit">(GB)</span>
+        </label>
+        <input 
+          type="number" 
+          id="min-size-input" 
+          class="text-input" 
+          min="0.1" 
+          max="1000" 
+          step="0.1" 
+          value="1.0"
+          aria-describedby="size-hint"
+        />
+        <p id="size-hint" class="field-hint">Only files larger than this threshold will be listed.</p>
+      </div>
+
+      <!-- Suffix -->
+      <div class="field-group">
+        <label for="suffix-input" class="field-label">
+          Output Filename Suffix
+        </label>
+        <input 
+          type="text" 
+          id="suffix-input" 
+          class="text-input" 
+          value="_new"
+          placeholder="_new"
+          aria-describedby="suffix-hint"
+          maxlength="64"
+        />
+        <p id="suffix-hint" class="field-hint">
+          Appended before the file extension. E.g. <code>movie_new.mp4</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="card-footer">
+      <button class="btn btn-primary btn-lg" id="scan-btn" aria-describedby="scan-status">
+        <span class="btn-icon-prefix" aria-hidden="true">⊙</span>
+        Scan for Files
+      </button>
+      <span id="scan-status" class="status-text" aria-live="polite" aria-atomic="true"></span>
+    </div>
+  </section>
+
+  <!-- Directory Browser Modal -->
+  <div 
+    id="browser-modal" 
+    class="modal-backdrop" 
+    role="dialog" 
+    aria-modal="true"
+    aria-labelledby="browser-modal-title"
+    hidden
+  >
+    <div class="modal-panel">
+      <div class="modal-header">
+        <h3 id="browser-modal-title" class="modal-title">Browse Server Directory</h3>
+        <button class="btn-icon" id="close-browser" aria-label="Close directory browser">✕</button>
+      </div>
+      <div class="browser-path-bar">
+        <span class="browser-path-label" aria-label="Current path:">
+          <span id="browser-current-path" aria-live="polite">/</span>
+        </span>
+      </div>
+      <div id="browser-list" class="browser-list" role="listbox" aria-label="Directory contents" tabindex="0">
+        <p class="browser-loading">Loading…</p>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" id="browser-cancel">Cancel</button>
+        <button class="btn btn-primary" id="browser-select">Select This Directory</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- STEP 2: File List -->
+  <section class="card" id="section-files" aria-labelledby="files-heading" hidden>
+    <h2 id="files-heading" class="card-title">
+      <span class="step-badge" aria-hidden="true">02</span>
+      Select Files to Compress
+    </h2>
+
+    <div class="files-toolbar" role="toolbar" aria-label="File selection controls">
+      <div class="toolbar-left">
+        <button class="btn btn-sm btn-outline" id="select-all-btn" aria-label="Mark all files for compression">
+          ☑ Select All
+        </button>
+        <button class="btn btn-sm btn-outline" id="deselect-all-btn" aria-label="Unmark all files">
+          ☐ Deselect All
+        </button>
+      </div>
+      <div class="toolbar-right">
+        <span id="selection-summary" class="selection-summary" aria-live="polite" aria-atomic="true">
+          0 of 0 selected
+        </span>
+      </div>
+    </div>
+
+    <div class="table-wrapper" role="region" aria-label="Video files list" tabindex="0">
+      <table class="file-table" id="file-table" aria-describedby="files-heading">
+        <thead>
+          <tr>
+            <th scope="col" class="col-check">
+              <span class="sr-only">Select</span>
+            </th>
+            <th scope="col" class="col-name">File Name</th>
+            <th scope="col" class="col-size">Size (GB)</th>
+            <th scope="col" class="col-bitrate">Current Bitrate</th>
+            <th scope="col" class="col-target">Target Bitrate</th>
+            <th scope="col" class="col-codec">Codec</th>
+          </tr>
+        </thead>
+        <tbody id="file-tbody">
+        </tbody>
+      </table>
+    </div>
+
+    <div class="card-footer">
+      <button class="btn btn-primary btn-lg" id="compress-btn" disabled>
+        <span class="btn-icon-prefix" aria-hidden="true">⚡</span>
+        Compress Selected Files
+      </button>
+    </div>
+  </section>
+
+  <!-- STEP 3: Compression Progress -->
+  <section class="card" id="section-progress" aria-labelledby="progress-heading" hidden>
+    <h2 id="progress-heading" class="card-title">
+      <span class="step-badge" aria-hidden="true">03</span>
+      Compression Progress
+    </h2>
+
+    <div class="progress-overview" role="region" aria-label="Overall progress">
+      <div class="overview-stats">
+        <div class="stat-chip">
+          <span class="stat-label">Total Files</span>
+          <span class="stat-value" id="prog-total">—</span>
+        </div>
+        <div class="stat-chip">
+          <span class="stat-label">Completed</span>
+          <span class="stat-value" id="prog-done">0</span>
+        </div>
+        <div class="stat-chip">
+          <span class="stat-label">Status</span>
+          <span class="stat-value" id="prog-status" aria-live="polite">Waiting</span>
+        </div>
+      </div>
+
+      <div class="overall-bar-wrap" aria-label="Overall compression progress">
+        <div class="overall-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="overall-bar">
+          <div class="overall-bar-fill" id="overall-bar-fill" style="width:0%"></div>
+        </div>
+        <span class="overall-pct" id="overall-pct" aria-hidden="true">0%</span>
+      </div>
+    </div>
+
+    <div id="file-progress-list" class="file-progress-list" aria-label="Individual file progress" role="list">
+    </div>
+
+    <div class="card-footer">
+      <button class="btn btn-danger" id="cancel-btn" aria-label="Cancel all compression operations">
+        ✕ Cancel Compression
+      </button>
+    </div>
+  </section>
+
+  <!-- Results summary (shown after done/cancelled) -->
+  <section class="card" id="section-results" aria-labelledby="results-heading" hidden>
+    <h2 id="results-heading" class="card-title">
+      <span class="step-badge" aria-hidden="true">04</span>
+      Results
+    </h2>
+    <div id="results-content" class="results-content"></div>
+    <div class="card-footer">
+      <button class="btn btn-secondary" id="restart-btn">
+        ↺ Start New Session
+      </button>
+    </div>
+  </section>
+
+</main>
+
+<footer class="app-footer" role="contentinfo">
+  <p>VideoPress uses <strong>FFmpeg</strong> for video compression. Files are processed on the server.</p>
+</footer>
+
+<!-- Live region for screen reader announcements -->
+<div id="sr-announce" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
+
+<script src="/static/js/app.js"></script>
+</body>
+</html>
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..75fc31b
--- /dev/null
+++ b/main.css
@@ -0,0 +1,1231 @@
+/* =============================================================
+   VideoPress — Main Stylesheet
+   WCAG 2.2 AA Compliant | Dark & Light Mode | 4.5:1 min contrast
+   ============================================================= */
+
+/* ── Custom Properties ─────────────────────────────────────── */
+:root {
+  /* Fonts */
+  --font-display: 'Courier New', 'Lucida Console', monospace;
+  --font-body: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'Courier New', Courier, monospace;
+
+  /* Spacing scale */
+  --space-xs:  4px;
+  --space-sm:  8px;
+  --space-md:  16px;
+  --space-lg:  24px;
+  --space-xl:  40px;
+  --space-2xl: 64px;
+
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 14px;
+  --radius-pill: 999px;
+
+  /* Transitions */
+  --transition-fast: 140ms ease;
+  --transition-base: 240ms ease;
+
+  /* Focus ring */
+  --focus-ring: 0 0 0 3px var(--color-focus);
+}
+
+/* ── LIGHT MODE ─────────────────────────────────────────────── */
+:root, [data-theme="light"] {
+  color-scheme: light;
+
+  /* Backgrounds */
+  --bg-page:    #f0f0ed;
+  --bg-card:    #ffffff;
+  --bg-card2:   #f7f7f5;
+  --bg-header:  #1a1a18;
+  --bg-footer:  #1a1a18;
+  --bg-input:   #ffffff;
+  --bg-table-head: #1a1a18;
+  --bg-row-alt: #f5f5f2;
+  --bg-row-sel: #e8f0fe;
+  --bg-modal:   rgba(0,0,0,0.55);
+  --bg-progress-track: #e2e2df;
+  --bg-progress-fill:  #1d6f42;
+  --bg-progress-file:  #f0f0ed;
+
+  /* Text — all meet 4.5:1 on their respective backgrounds */
+  --text-primary:   #111110;   /* 17:1 on white */
+  --text-secondary: #3d3d3a;   /* 9.5:1 on white */
+  --text-muted:     #595955;   /* 5.8:1 on white */
+  --text-inverse:   #ffffff;
+  --text-header:    #f5f5f2;
+  --text-link:      #1a56db;   /* 5.5:1 on white */
+  --text-danger:    #9b1b1b;   /* 6.2:1 on white */
+  --text-success:   #166534;   /* 5.1:1 on white */
+  --text-code:      #c7254e;
+
+  /* Borders */
+  --border-base:   #c8c8c4;
+  --border-strong: #8a8a85;
+  --border-input:  #888884;
+  --border-focus:  #1a56db;
+
+  /* Brand / accent */
+  --accent:        #e05c1a;   /* 4.6:1 on white */
+  --accent-hover:  #c24d12;
+  --accent-text:   #ffffff;
+
+  /* Buttons */
+  --btn-primary-bg:    #1a1a18;
+  --btn-primary-text:  #f5f5f2;
+  --btn-primary-hover: #2e2e2b;
+  --btn-secondary-bg:  #ffffff;
+  --btn-secondary-text:#111110;
+  --btn-secondary-border:#888884;
+  --btn-secondary-hover:#f0f0ed;
+  --btn-danger-bg:     #b91c1c;
+  --btn-danger-text:   #ffffff;
+  --btn-danger-hover:  #991b1b;
+  --btn-outline-bg:    transparent;
+  --btn-outline-text:  #111110;
+  --btn-outline-border:#888884;
+  --btn-outline-hover: #f0f0ed;
+
+  /* Step badge */
+  --badge-bg:   #e05c1a;
+  --badge-text: #ffffff;
+
+  /* Focus */
+  --color-focus: rgba(26, 86, 219, 0.5);
+
+  /* Shadows */
+  --shadow-card:   0 1px 3px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
+  --shadow-modal:  0 8px 32px rgba(0,0,0,0.22);
+  --shadow-btn:    0 1px 2px rgba(0,0,0,0.15);
+}
+
+/* ── DARK MODE ─────────────────────────────────────────────── */
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --bg-page:    #111110;
+  --bg-card:    #1c1c1a;
+  --bg-card2:   #252522;
+  --bg-header:  #0a0a09;
+  --bg-footer:  #0a0a09;
+  --bg-input:   #252522;
+  --bg-table-head: #0e0e0c;
+  --bg-row-alt: #222220;
+  --bg-row-sel: #1a2a46;
+  --bg-modal:   rgba(0,0,0,0.75);
+  --bg-progress-track: #333330;
+  --bg-progress-fill:  #34d399;
+  --bg-progress-file:  #1c1c1a;
+
+  --text-primary:   #f5f5f2;   /* 14:1 on #1c1c1a */
+  --text-secondary: #d4d4cf;   /* 8:1 on dark card */
+  --text-muted:     #a3a39e;   /* 4.7:1 on dark card */
+  --text-inverse:   #111110;
+  --text-header:    #f5f5f2;
+  --text-link:      #93c5fd;   /* 5.2:1 on dark */
+  --text-danger:    #fca5a5;   /* 5.5:1 on dark */
+  --text-success:   #86efac;   /* 6.0:1 on dark */
+  --text-code:      #fb923c;
+
+  --border-base:   #3a3a37;
+  --border-strong: #5a5a56;
+  --border-input:  #5a5a56;
+  --border-focus:  #93c5fd;
+
+  --accent:        #f97316;
+  --accent-hover:  #fb923c;
+  --accent-text:   #0a0a09;
+
+  --btn-primary-bg:    #f5f5f2;
+  --btn-primary-text:  #111110;
+  --btn-primary-hover: #e0e0dc;
+  --btn-secondary-bg:  #252522;
+  --btn-secondary-text:#f5f5f2;
+  --btn-secondary-border:#5a5a56;
+  --btn-secondary-hover:#333330;
+  --btn-danger-bg:     #dc2626;
+  --btn-danger-text:   #ffffff;
+  --btn-danger-hover:  #b91c1c;
+  --btn-outline-bg:    transparent;
+  --btn-outline-text:  #f5f5f2;
+  --btn-outline-border:#5a5a56;
+  --btn-outline-hover: #252522;
+
+  --badge-bg:   #f97316;
+  --badge-text: #0a0a09;
+
+  --color-focus: rgba(147, 197, 253, 0.5);
+
+  --shadow-card:   0 1px 3px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.30);
+  --shadow-modal:  0 8px 48px rgba(0,0,0,0.60);
+  --shadow-btn:    0 1px 2px rgba(0,0,0,0.40);
+}
+
+/* ── Auto dark mode from OS ─────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg-page:    #111110;
+    --bg-card:    #1c1c1a;
+    --bg-card2:   #252522;
+    --bg-header:  #0a0a09;
+    --bg-footer:  #0a0a09;
+    --bg-input:   #252522;
+    --bg-table-head: #0e0e0c;
+    --bg-row-alt: #222220;
+    --bg-row-sel: #1a2a46;
+    --bg-modal:   rgba(0,0,0,0.75);
+    --bg-progress-track: #333330;
+    --bg-progress-fill:  #34d399;
+    --bg-progress-file:  #1c1c1a;
+
+    --text-primary:   #f5f5f2;
+    --text-secondary: #d4d4cf;
+    --text-muted:     #a3a39e;
+    --text-inverse:   #111110;
+    --text-header:    #f5f5f2;
+    --text-link:      #93c5fd;
+    --text-danger:    #fca5a5;
+    --text-success:   #86efac;
+    --text-code:      #fb923c;
+
+    --border-base:   #3a3a37;
+    --border-strong: #5a5a56;
+    --border-input:  #5a5a56;
+    --border-focus:  #93c5fd;
+
+    --accent:        #f97316;
+    --accent-hover:  #fb923c;
+    --accent-text:   #0a0a09;
+
+    --btn-primary-bg:    #f5f5f2;
+    --btn-primary-text:  #111110;
+    --btn-primary-hover: #e0e0dc;
+    --btn-secondary-bg:  #252522;
+    --btn-secondary-text:#f5f5f2;
+    --btn-secondary-border:#5a5a56;
+    --btn-secondary-hover:#333330;
+    --btn-danger-bg:     #dc2626;
+    --btn-danger-text:   #ffffff;
+    --btn-danger-hover:  #b91c1c;
+    --btn-outline-bg:    transparent;
+    --btn-outline-text:  #f5f5f2;
+    --btn-outline-border:#5a5a56;
+    --btn-outline-hover: #252522;
+
+    --badge-bg:   #f97316;
+    --badge-text: #0a0a09;
+
+    --color-focus: rgba(147, 197, 253, 0.5);
+
+    --shadow-card:   0 1px 3px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.30);
+    --shadow-modal:  0 8px 48px rgba(0,0,0,0.60);
+    --shadow-btn:    0 1px 2px rgba(0,0,0,0.40);
+  }
+}
+
+/* ── Reset & Base ───────────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background: var(--bg-page);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  transition: background var(--transition-base), color var(--transition-base);
+}
+
+/* ── Accessibility Utilities ────────────────────────────────── */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: var(--space-md);
+  background: var(--accent);
+  color: var(--accent-text);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-sm);
+  font-weight: 700;
+  z-index: 9999;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: top var(--transition-fast);
+}
+
+.skip-link:focus {
+  top: var(--space-md);
+}
+
+/* Universal focus style — WCAG 2.2 2.4.11 */
+:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+
+/* Remove default focus for mouse users */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.app-header {
+  background: var(--bg-header);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--space-md) var(--space-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  color: var(--text-header);
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  letter-spacing: -0.02em;
+  user-select: none;
+}
+
+.logo-icon {
+  color: var(--accent);
+  font-size: 1.1rem;
+}
+
+.logo strong {
+  color: var(--accent);
+}
+
+.header-actions {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+/* ── Main layout ────────────────────────────────────────────── */
+.app-main {
+  flex: 1;
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+/* ── Cards ──────────────────────────────────────────────────── */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  padding: var(--space-xl);
+  transition: background var(--transition-base), border-color var(--transition-base);
+}
+
+.card-title {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-bottom: var(--space-xl);
+  padding-bottom: var(--space-md);
+  border-bottom: 1px solid var(--border-base);
+}
+
+.step-badge {
+  background: var(--badge-bg);
+  color: var(--badge-text);
+  font-size: 0.7rem;
+  font-weight: 900;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+}
+
+.card-footer {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-md);
+  border-top: 1px solid var(--border-base);
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+
+/* ── Config Grid ────────────────────────────────────────────── */
+.config-grid {
+  display: grid;
+  grid-template-columns: 1fr 180px 1fr;
+  gap: var(--space-xl);
+  align-items: start;
+}
+
+@media (max-width: 700px) {
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.field-label {
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-secondary);
+}
+
+.field-unit {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-muted);
+}
+
+.field-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.field-hint code {
+  font-family: var(--font-mono);
+  color: var(--text-code);
+  background: var(--bg-card2);
+  padding: 1px 5px;
+  border-radius: var(--radius-sm);
+  font-size: 0.85em;
+}
+
+/* ── Inputs ─────────────────────────────────────────────────── */
+.text-input {
+  width: 100%;
+  padding: 10px var(--space-md);
+  background: var(--bg-input);
+  border: 1.5px solid var(--border-input);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  line-height: 1.4;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.text-input:focus-visible {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+.text-input::placeholder {
+  color: var(--text-muted);
+}
+
+.dir-input-row {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.dir-input-row .text-input {
+  flex: 1;
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+}
+
+/* ── Buttons ────────────────────────────────────────────────── */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 10px var(--space-lg);
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-md);
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast),
+              border-color var(--transition-fast), box-shadow var(--transition-fast),
+              transform var(--transition-fast);
+  white-space: nowrap;
+  text-decoration: none;
+  box-shadow: var(--shadow-btn);
+  min-height: 44px; /* WCAG 2.2 target size */
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn:disabled, .btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border-color: transparent;
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--btn-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border-color: var(--btn-secondary-border);
+}
+.btn-secondary:hover:not(:disabled) {
+  background: var(--btn-secondary-hover);
+}
+
+.btn-danger {
+  background: var(--btn-danger-bg);
+  color: var(--btn-danger-text);
+  border-color: transparent;
+}
+.btn-danger:hover:not(:disabled) {
+  background: var(--btn-danger-hover);
+}
+
+.btn-outline {
+  background: var(--btn-outline-bg);
+  color: var(--btn-outline-text);
+  border-color: var(--btn-outline-border);
+}
+.btn-outline:hover:not(:disabled) {
+  background: var(--btn-outline-hover);
+}
+
+.btn-lg {
+  font-size: 0.95rem;
+  padding: 12px var(--space-xl);
+  min-height: 48px;
+}
+
+.btn-sm {
+  font-size: 0.82rem;
+  padding: 7px var(--space-md);
+  min-height: 36px;
+}
+
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: 1.5px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--text-header);
+  font-size: 1.1rem;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.btn-icon:hover {
+  background: rgba(255,255,255,0.12);
+}
+
+.btn-icon-prefix {
+  font-size: 1rem;
+}
+
+/* ── Status / hint text ─────────────────────────────────────── */
+.status-text {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* ── Files toolbar ──────────────────────────────────────────── */
+.files-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.toolbar-left {
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.selection-summary {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+/* ── File Table ─────────────────────────────────────────────── */
+.table-wrapper {
+  overflow-x: auto;
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-md);
+  max-height: 480px;
+  overflow-y: auto;
+}
+
+/* Custom scrollbar */
+.table-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.table-wrapper::-webkit-scrollbar-track {
+  background: var(--bg-card2);
+}
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 4px;
+}
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+.file-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.file-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bg-table-head);
+}
+
+.file-table th {
+  padding: var(--space-sm) var(--space-md);
+  text-align: left;
+  color: var(--text-inverse);
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  white-space: nowrap;
+  border-bottom: 2px solid var(--border-strong);
+}
+
+[data-theme="dark"] .file-table th,
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .file-table th {
+    color: var(--text-primary);
+  }
+}
+
+.file-table th.col-check {
+  width: 48px;
+  text-align: center;
+}
+
+.file-table td {
+  padding: 10px var(--space-md);
+  border-bottom: 1px solid var(--border-base);
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+
+.file-table tbody tr:nth-child(even) {
+  background: var(--bg-row-alt);
+}
+
+.file-table tbody tr:hover {
+  background: var(--bg-row-sel);
+}
+
+.file-table tbody tr.selected {
+  background: var(--bg-row-sel);
+}
+
+.file-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.col-check {
+  text-align: center;
+}
+
+.col-name {
+  max-width: 340px;
+  word-break: break-word;
+}
+
+.file-name-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.file-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.file-path {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.col-size, .col-bitrate, .col-target, .col-codec {
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.bitrate-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  font-size: 0.8rem;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  background: var(--bg-card2);
+  border: 1px solid var(--border-base);
+  color: var(--text-secondary);
+}
+
+.bitrate-badge.target {
+  background: rgba(22, 101, 52, 0.12);
+  border-color: rgba(22, 101, 52, 0.3);
+  color: var(--text-success);
+}
+
+[data-theme="dark"] .bitrate-badge.target {
+  background: rgba(134, 239, 172, 0.1);
+  border-color: rgba(134, 239, 172, 0.25);
+  color: var(--text-success);
+}
+
+.codec-tag {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* Checkbox styling */
+.file-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--accent);
+  min-width: 18px;
+  min-height: 18px;
+}
+
+/* ── Modal ──────────────────────────────────────────────────── */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--bg-modal);
+  z-index: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-md);
+  animation: fade-in 160ms ease;
+}
+
+.modal-backdrop[hidden] {
+  display: none !important;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.modal-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-modal);
+  width: 100%;
+  max-width: 540px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  animation: slide-up 200ms ease;
+}
+
+@keyframes slide-up {
+  from { transform: translateY(20px); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--border-base);
+}
+
+.modal-title {
+  font-family: var(--font-display);
+  font-size: 0.95rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-primary);
+}
+
+.modal-header .btn-icon {
+  color: var(--text-secondary);
+  min-width: 36px;
+  min-height: 36px;
+  width: 36px;
+  height: 36px;
+}
+
+.browser-path-bar {
+  padding: var(--space-sm) var(--space-lg);
+  background: var(--bg-card2);
+  border-bottom: 1px solid var(--border-base);
+}
+
+.browser-path-label {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  word-break: break-all;
+}
+
+#browser-current-path {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.browser-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-sm) 0;
+  min-height: 200px;
+}
+
+.browser-list::-webkit-scrollbar {
+  width: 6px;
+}
+.browser-list::-webkit-scrollbar-track {
+  background: var(--bg-card2);
+}
+.browser-list::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 3px;
+}
+
+.browser-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 9px var(--space-lg);
+  cursor: pointer;
+  color: var(--text-primary);
+  font-size: 0.88rem;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  transition: background var(--transition-fast);
+  min-height: 44px;
+}
+
+.browser-item:hover, .browser-item:focus-visible {
+  background: var(--bg-row-sel);
+  outline: none;
+}
+
+.browser-item .item-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.browser-item.parent-dir {
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.browser-item.parent-dir .item-icon {
+  color: var(--text-muted);
+}
+
+.browser-loading {
+  text-align: center;
+  padding: var(--space-xl);
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.browser-error {
+  text-align: center;
+  padding: var(--space-xl);
+  color: var(--text-danger);
+  font-size: 0.85rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  border-top: 1px solid var(--border-base);
+}
+
+/* ── Progress Section ───────────────────────────────────────── */
+.progress-overview {
+  background: var(--bg-card2);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg);
+  margin-bottom: var(--space-xl);
+}
+
+.overview-stats {
+  display: flex;
+  gap: var(--space-lg);
+  margin-bottom: var(--space-md);
+  flex-wrap: wrap;
+}
+
+.stat-chip {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.stat-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.overall-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.overall-bar {
+  flex: 1;
+  height: 12px;
+  background: var(--bg-progress-track);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.overall-bar-fill {
+  height: 100%;
+  background: var(--bg-progress-fill);
+  border-radius: var(--radius-pill);
+  transition: width 300ms ease;
+}
+
+.overall-pct {
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  min-width: 44px;
+  text-align: right;
+}
+
+/* ── Per-File Progress ──────────────────────────────────────── */
+.file-progress-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.file-progress-item {
+  background: var(--bg-progress-file);
+  border: 1px solid var(--border-base);
+  border-radius: var(--radius-md);
+  padding: var(--space-md) var(--space-lg);
+  transition: border-color var(--transition-base);
+}
+
+.file-progress-item.active {
+  border-color: var(--accent);
+}
+
+.file-progress-item.done {
+  border-color: rgba(22, 101, 52, 0.4);
+}
+
+[data-theme="dark"] .file-progress-item.done {
+  border-color: rgba(134, 239, 172, 0.3);
+}
+
+.file-progress-item.error {
+  border-color: rgba(185, 28, 28, 0.5);
+}
+
+.fp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.fp-name {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.fp-status {
+  font-size: 0.78rem;
+  font-weight: 700;
+  padding: 2px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--bg-card2);
+  color: var(--text-muted);
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.fp-status.waiting  { color: var(--text-muted); }
+.fp-status.running  { background: rgba(224, 92, 26, 0.12); color: var(--accent); }
+.fp-status.done     { background: rgba(22, 101, 52, 0.12); color: var(--text-success); }
+.fp-status.error    { background: rgba(185, 28, 28, 0.12); color: var(--text-danger); }
+.fp-status.cancelled{ color: var(--text-muted); }
+
+[data-theme="dark"] .fp-status.running  { background: rgba(249, 115, 22, 0.18); }
+[data-theme="dark"] .fp-status.done     { background: rgba(134, 239, 172, 0.12); }
+[data-theme="dark"] .fp-status.error    { background: rgba(220, 38, 38, 0.18); }
+
+.fp-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.fp-bar {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-progress-track);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.fp-bar-fill {
+  height: 100%;
+  background: var(--bg-progress-fill);
+  border-radius: var(--radius-pill);
+  transition: width 250ms ease;
+}
+
+.fp-pct {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  min-width: 38px;
+  text-align: right;
+}
+
+.fp-detail {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  margin-top: var(--space-xs);
+}
+
+.fp-detail.success { color: var(--text-success); }
+.fp-detail.error   { color: var(--text-danger); }
+
+/* ── Results ────────────────────────────────────────────────── */
+.results-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.result-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-md);
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  background: var(--bg-card2);
+  border: 1px solid var(--border-base);
+}
+
+.result-icon {
+  font-size: 1.2rem;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.result-info {
+  flex: 1;
+}
+
+.result-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+}
+
+.result-meta {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.result-reduction {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: var(--text-success);
+}
+
+/* ── Footer ─────────────────────────────────────────────────── */
+.app-footer {
+  background: var(--bg-footer);
+  color: rgba(245,245,242,0.45);
+  text-align: center;
+  padding: var(--space-lg) var(--space-xl);
+  font-size: 0.78rem;
+  border-top: 1px solid rgba(255,255,255,0.05);
+}
+
+.app-footer strong {
+  color: rgba(245,245,242,0.65);
+}
+
+/* ── Animations ─────────────────────────────────────────────── */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.5; }
+}
+
+.fp-bar-fill.active {
+  animation: pulse 1.8s ease infinite;
+}
+
+/* ── Responsive ─────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .app-main {
+    padding: var(--space-lg) var(--space-md);
+  }
+
+  .card {
+    padding: var(--space-lg);
+  }
+
+  .header-inner {
+    padding: var(--space-sm) var(--space-md);
+  }
+
+  .file-table th,
+  .file-table td {
+    padding: 8px var(--space-sm);
+  }
+
+  .col-codec {
+    display: none;
+  }
+
+  .overview-stats {
+    gap: var(--space-md);
+  }
+}
+
+@media (max-width: 480px) {
+  .col-bitrate, .col-target {
+    display: none;
+  }
+}
+
+/* ── Reduce motion ──────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Dark mode table header text fix */
+[data-theme="dark"] .file-table th {
+  color: var(--text-primary);
+}
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..10b0082
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,12 @@
+# VideoPress — Python dependencies
+# Install with:  pip install -r requirements.txt
+
+# Web framework
+Flask==3.1.0
+
+# WSGI server (production)
+gunicorn==23.0.0
+
+# Async worker for SSE / long-lived streaming responses
+gevent==24.11.1
+greenlet==3.1.1
diff --git a/start.sh b/start.sh
new file mode 100644
index 0000000..a2ad87f
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,60 @@
+#!/usr/bin/env bash
+# =============================================================================
+# VideoPress — startup script
+# Usage: ./start.sh [--prod] [PORT]
+# =============================================================================
+set -e
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+MODE="dev"
+PORT=""
+
+for arg in "$@"; do
+  case "$arg" in
+    --prod)   MODE="prod" ;;
+    --help|-h)
+      echo "Usage: $0 [--prod] [PORT]"
+      echo "  --prod   Run via Gunicorn+gevent (production)"
+      echo "  PORT     Port number (default: 5000 dev / 8080 prod)"
+      exit 0 ;;
+    [0-9]*)   PORT="$arg" ;;
+  esac
+done
+
+[[ -z "$PORT" ]] && PORT=$( [[ "$MODE" == "prod" ]] && echo "8080" || echo "5000" )
+
+echo ""
+echo "============================================================"
+echo "  VideoPress  |  mode: $MODE  |  port: $PORT"
+echo "============================================================"
+echo ""
+
+check() { command -v "$1" &>/dev/null || { echo "ERROR: $1 not found. $2"; exit 1; }; }
+check python3  "Install Python 3.8+"
+check ffmpeg   "sudo apt install ffmpeg"
+check ffprobe  "Bundled with ffmpeg"
+python3 -c "import flask" 2>/dev/null || { echo "ERROR: Flask missing — pip install -r requirements.txt"; exit 1; }
+
+echo "  ✓ Python  $(python3 --version)"
+echo "  ✓ Flask   $(python3 -c 'import flask; print(flask.__version__)')"
+echo "  ✓ FFmpeg  available"
+echo "  MEDIA_ROOT: ${MEDIA_ROOT:-/media (default)}"
+echo ""
+
+cd "$SCRIPT_DIR"
+
+if [[ "$MODE" == "prod" ]]; then
+  python3 -c "import gunicorn" 2>/dev/null || { echo "ERROR: gunicorn missing — pip install -r requirements.txt"; exit 1; }
+  python3 -c "import gevent"   2>/dev/null || { echo "ERROR: gevent missing — pip install -r requirements.txt"; exit 1; }
+  echo "  Starting Gunicorn on http://0.0.0.0:${PORT}"
+  echo "  Press Ctrl+C to stop."
+  echo "============================================================"
+  echo ""
+  PORT="$PORT" exec gunicorn -c gunicorn.conf.py wsgi:app
+else
+  echo "  WARNING: Dev server only — use --prod or Docker for production."
+  echo "  Starting Flask on http://localhost:${PORT}"
+  echo "============================================================"
+  echo ""
+  exec python3 app.py "$PORT"
+fi
diff --git a/wsgi.py b/wsgi.py
new file mode 100644
index 0000000..4f31ea1
--- /dev/null
+++ b/wsgi.py
@@ -0,0 +1,18 @@
+"""
+wsgi.py — Gunicorn entry point for VideoPress.
+
+Start with:
+    gunicorn -c gunicorn.conf.py wsgi:app
+
+Or directly:
+    gunicorn \
+        --worker-class geventwebsocket.gunicorn.workers.GeventWebSocketWorker \
+        --workers 1 \
+        --bind 0.0.0.0:8080 \
+        wsgi:app
+"""
+
+from app import app  # noqa: F401  — 'app' is the Flask application object
+
+# Gunicorn imports this module and looks for a callable named 'app'.
+# Nothing else is needed here.