feat(model-manager): generated-photo Gallery + device-routing landing

- Gallery view: grid of generated photos from ComfyUI's output/, full-size
  lightbox, and permanent delete (with confirm). Paginated ("Load more").
- Backend: GET /api/gallery, GET /gallery/file (path-guarded image serve),
  DELETE /api/gallery (path-guarded; clear error on permission denial).
- Mount ./output read-write into model-manager so the gallery can delete.
- Device-routing landing at /start: phones -> ComfyUIMini, desktops ->
  the Gallery; ?force=mobile|desktop overrides. Ports come from the new
  /api/ui-config (COMFYUI_PORT / COMFYUIMINI_PORT env).
- Responsive tweaks so the gallery is usable if opened directly on a phone.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

model-manager/app/static/style.css

@@ -132,6 +132,66 @@ code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size:
 .model-card .card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
 .empty { color: var(--text-dim); }
 
+/* ---- gallery (generated photos) ---- */
+.gallery-grid {
+  display: grid; gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+.photo-card {
+  position: relative; background: var(--bg-2);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1;
+}
+.photo-card img {
+  width: 100%; height: 100%; object-fit: cover; display: block;
+  transition: transform .2s;
+}
+.photo-card:hover img { transform: scale(1.04); }
+.photo-card .p-del {
+  position: absolute; top: 6px; right: 6px;
+  background: rgba(12,16,32,.7); color: #fff; border: none;
+  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
+  font-size: 14px; opacity: 0; transition: opacity .15s;
+}
+.photo-card:hover .p-del { opacity: 1; }
+.photo-card .p-del:hover { background: var(--red); }
+.photo-card .p-meta {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: linear-gradient(transparent, rgba(12,16,32,.85));
+  color: var(--text); font-size: 11px; padding: 16px 8px 6px;
+  opacity: 0; transition: opacity .15s; word-break: break-all;
+}
+.photo-card:hover .p-meta { opacity: 1; }
+
+/* Single column on phones (the device-routing landing normally sends phones to
+   ComfyUIMini, but keep the gallery usable if opened directly on mobile). */
+@media (max-width: 720px) {
+  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+  .sidebar { width: 64px; }
+  .brand-title, .brand-sub, .nav-item { font-size: 0; }
+  .nav-ico { font-size: 18px; }
+}
+
+/* ---- lightbox ---- */
+.lightbox {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(8,10,16,.92);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  padding: 28px;
+}
+.lightbox[hidden] { display: none; }
+.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; object-fit: contain; }
+.lb-close {
+  position: absolute; top: 18px; right: 22px;
+  background: transparent; color: #fff; border: none; font-size: 26px; cursor: pointer;
+}
+.lb-bar {
+  display: flex; align-items: center; gap: 16px; margin-top: 16px;
+  max-width: 92vw;
+}
+.lb-name { color: var(--text-dim); font-size: 13px; word-break: break-all; }
+.lb-actions { display: flex; gap: 10px; margin-left: auto; }
+
 /* ---- browse civitai ---- */
 .browse-controls {
   display: flex; flex-wrap: wrap; gap: 10px; align-items: center;