web: the studio header carries the mark and the page name too

The landing, /admin and /profile all show the icon + RecipesCam wordmark
with the page name beside it; the studio still showed a bare "RecipesCam
web" text. Same pair now, so the phone header says where the visitor is.

docker/frontend/src/i18n/en.ts

@@ -114,6 +114,7 @@ export const en: Dict = {
 
   'nav.admin': 'Admin',
   'nav.profile': 'Profile',
+  'nav.studio': 'Studio',
   'adm.title': 'Strip moderation',
   'adm.subtitle': 'Photos contributed by users. Delete one to pull it off the landing page.',
   'adm.upload': 'ADD A PHOTO',

docker/frontend/src/i18n/vi.ts

@@ -16,6 +16,7 @@ export const vi = {
   'nav.back': 'Về trang chủ',
   'nav.admin': 'Quản trị',
   'nav.profile': 'Hồ sơ',
+  'nav.studio': 'Studio',
   'nav.guest': 'Khách',
 
   'act.undo': 'HOÀN TÁC',

docker/frontend/src/styles/app.css

@@ -13,8 +13,12 @@
   background: var(--bg-elev);
   flex-wrap: wrap;
 }
-.brand { font-weight: 700; letter-spacing: 0.04em; }
-.brand small { color: var(--text-dim); font-weight: 400; margin-left: 6px; letter-spacing: 0; }
+.brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); text-decoration: none; }
+.brand img { border-radius: 8px; }
+.brand em { font-style: normal; font-weight: 400; color: var(--text-dim); }
+/* The page name, top-left beside the mark — the same pair /admin and /profile
+   carry, so every screen says where the visitor is. */
+.page-name { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
 .header .spacer { flex: 1 1 auto; }
 .recipe-name {
   font-family: var(--mono);

docker/frontend/src/ui/TopBar.tsx

@@ -48,8 +48,10 @@ export function TopBar({
   return (
     <header className="header" ref={wrap}>
       <a className="brand" href="/">
-        RecipesCam <small>web</small>
+        <img src="/assets/RecipesCamIcon.png" alt="" width="26" height="26" />
+        <span>Recipes<em>Cam</em></span>
       </a>
+      <b className="page-name">{t('nav.studio')}</b>
       <span className="recipe-name">{recipeName}</span>
       <span className="spacer" />