Add the CREATE RECIPES tab to the web app

The phone's RecipeCreateModal becomes a rail tab with the same rows, seeding
from the look on screen and clamping the same way. SAVE RECIPE applies the new
look, lists it under RECIPES and, when signed in, stores it on the account; a
guest's copy stays in memory and goes away with the page. Signed-in users can
also export the recipe as the app's encrypted .recipe file (shared/utils
/recipeShare.ts vendored byte-identical from the RN project).

docker/frontend/src/styles/app.css

@@ -121,6 +121,29 @@
 input[type="range"] { width: 100%; accent-color: var(--accent); }
 .hint { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
 
+/* --- CREATE RECIPES form (the phone's RecipeCreateModal, unrolled) ------- */
+.create-form {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.create-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+.create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.create-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.create-num span { font-size: 10px; letter-spacing: 0.12em; color: var(--text-dim); font-weight: 600; }
+.create-num.wide { grid-column: 1 / -1; }
+.create-shift { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.create-shift .field { width: 64px; }
+.create-actions { display: flex; gap: 6px; margin-top: 4px; }
+.create-actions .btn { flex: 1 1 auto; }
+
 /* --- stage -------------------------------------------------------------- */
 .stage {
   flex: 1 1 auto;