web: frame through the recipe, with the viewfinder where the stage was

The live view is the one place where the look is chosen before the picture
exists, so the columns that hold it have to stay in reach while the camera is
open. The viewfinder was a fixed black sheet over the whole app: the rail and
every slider were behind it, and the only way to change the look was to close
the camera, grade the file, and open it again. It now covers the stage and
nothing else — the stage and the view share a slot (`.stage-slot`, position
relative) and the view is absolutely placed inside it, z-index 5, black in
either theme. Measured at 1600px: the rail and the columns are on screen, the
feed takes 1347px of the 1600 and the stage's own 253px rail the rest. A slider
moved with the camera open reaches the very next frame (the render loop reads
the recipe per frame, so nothing had to be wired), a monochrome sim takes the
live feed from sat 42.1 to 0, and the shutter hands the studio that same frame
with the sim already on it.

The preview render is skipped while the viewfinder is up (`|| shooting` in the
guard, and in the effect's deps): it would run the same recipe through the same
renderer as the frames the user is actually watching, and the live one wins.

Opening it is PRO, like the HSL chips and the geotag — the frames are the paid
ones. The button stays on the page for everyone and carries the badge, and the
click runs the app's own `promptPro`: the account dialog for a guest, the
verification panel for a signed-in account, `/api/auth/me` being what says
which. A verified account gets the camera; a guest gets `.modal-backdrop` and no
`camera-view` at all.

Probes: cam-pro-gate (guest sees the badge, the click opens the dialog, no
viewfinder; verified opens it), cam-live-edit (rail and columns survive the
live view, feed covers the stage, the recipe reaches the live frames and the
shot), cam-smoke, cam-renegotiate, cam-close-flip.

docker/frontend/src/ui/CameraView.tsx

@@ -203,7 +203,7 @@ export function CameraView({
   }, [onShot, shooting, t]);
 
   return (
-    <div className="camera-backdrop" data-key="camera-view">
+    <div className="camera-view" data-key="camera-view">
       {/* The stage and the file are one look; the live frame is shown whole, so
           the user composes against the geometry the export will use. */}
       <canvas ref={canvasRef} className="camera-feed" data-key="camera-feed" />

docker/frontend/src/ui/ImageStage.tsx

@@ -292,7 +292,8 @@ export function ImageStage({
   onFile: (file: File) => void;
   // The other way a picture arrives: shot here, on the device's own camera, and
   // graded by the same pipeline the export uses (see CameraView). Absent on a
-  // build with no camera to open.
+  // build with no camera to open, and PRO — the button carries the badge and the
+  // click says why when the account is not one that may open it.
   onCamera?: () => void;
   // Crop editor: shown over the un-cropped preview until APPLY commits it.
   cropEditing?: boolean;
@@ -1440,6 +1441,7 @@ export function ImageStage({
               }}
             >
               {t('cam.open')}
+              <span className="pro">PRO</span>
             </button>
           ) : null}
           <p className="hint">{t('drop.demoLimit', { px: 2048 })}</p>
@@ -2000,6 +2002,7 @@ export function ImageStage({
           {onCamera ? (
             <button type="button" className="btn" data-key="open-camera" onClick={onCamera}>
               {t('cam.open')}
+              <span className="pro">PRO</span>
             </button>
           ) : null}
           {onSaveOriginal ? (