Refine mobile header branding

frontend/src/pages/HomePage.css

@@ -7,19 +7,45 @@
 }
 
 .mobile-toggle {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   border-bottom: 1px solid var(--border-subtle);
   background: var(--bg-toolbar);
   display: flex;
   flex-direction: column;
+  gap: 0.35rem;
+}
+
+.mobile-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
 }
 
+.mobile-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.mobile-brand-mark {
+  height: 1.25rem;
+  width: auto;
+}
+
+.mobile-brand-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
 .mobile-toggle-buttons {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.25rem;
-  padding: 0.25rem;
+  padding: 0.2rem;
   border-radius: 9999px;
   background: var(--bg-background);
   border: 1px solid var(--border-subtle);
@@ -28,8 +54,8 @@
 .mobile-toggle-button {
   border: none;
   border-radius: 9999px;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-muted);
   background: transparent;
@@ -47,7 +73,7 @@
 }
 
 .mobile-toggle-hint {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--text-muted);
   text-align: center;
 }

frontend/src/pages/HomePage.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useToolWorkflow } from "../contexts/ToolWorkflowContext";
-import { ActionIcon, Group } from "@mantine/core";
+import { ActionIcon, Group, useMantineColorScheme } from "@mantine/core";
 import { useSidebarContext } from "../contexts/SidebarContext";
 import { useDocumentMeta } from "../hooks/useDocumentMeta";
-import { getBaseUrl } from "../constants/app";
+import { BASE_PATH, getBaseUrl } from "../constants/app";
 import { useMediaQuery } from "@mantine/hooks";
 
 import ToolPanel from "../components/tools/ToolPanel";
@@ -31,10 +31,17 @@ export default function HomePage() {
   const { selectedTool, selectedToolKey } = useToolWorkflow();
 
   const { openFilesModal } = useFilesModalContext();
+  const { colorScheme } = useMantineColorScheme();
   const isMobile = useMediaQuery("(max-width: 1024px)");
   const sliderRef = useRef<HTMLDivElement | null>(null);
   const [activeMobileView, setActiveMobileView] = useState<MobileView>("tools");
 
+  const brandName = t("home.mobile.brandName", "Stirling");
+  const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
+  const brandMarkSrc = `${BASE_PATH}/branding/StirlingPDFLogoNoText${
+    colorScheme === "dark" ? "Dark" : "Light"
+  }.svg`;
+
   const handleSelectMobileView = useCallback((view: MobileView) => {
     setActiveMobileView(view);
   }, []);
@@ -106,20 +113,19 @@ export default function HomePage() {
       {isMobile ? (
         <div className="mobile-layout">
           <div className="mobile-toggle">
-            <div className="flex items-center justify-between">
-              <h1 className="text-base font-semibold text-[var(--text-primary)]">
-                {selectedTool?.name || t('home.mobile.toolSettings', 'Tool settings')}
-              </h1>
-              <div className="flex items-center gap-2">
-                <ActionIcon
-                  variant="subtle"
-                  size="lg"
-                  aria-label={t('home.mobile.openFiles', 'Open files')}
-                  onClick={() => openFilesModal()}
-                >
-                  <LocalIcon icon="folder-rounded" width="1.5rem" height="1.5rem" />
-                </ActionIcon>
+            <div className="mobile-header">
+              <div className="mobile-brand">
+                <img src={brandMarkSrc} alt={brandAltText} className="mobile-brand-mark" />
+                <span className="mobile-brand-name">{brandName}</span>
               </div>
+              <ActionIcon
+                variant="subtle"
+                size="md"
+                aria-label={t('home.mobile.openFiles', 'Open files')}
+                onClick={() => openFilesModal()}
+              >
+                <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />
+              </ActionIcon>
             </div>
             <div className="mobile-toggle-buttons" role="tablist" aria-label={t('home.mobile.viewSwitcher', 'Switch workspace view')}>
               <button