Refactor code structure for improved readability and maintainability

frontend/src/App.tsx

@@ -507,9 +507,12 @@ export default function App() {
 	return (
 		<main className="page">
 			<header className="hero">
-				<div>
-					<p className="eyebrow">{pageInfo.eyebrow}</p>
-					<h1>{pageInfo.title}</h1>
+				<div className="hero-title">
+					<img src="/favicon.svg" alt="MedAssist" className="hero-logo" />
+					<div>
+						<p className="eyebrow">{pageInfo.eyebrow}</p>
+						<h1>{pageInfo.title}</h1>
+					</div>
 				</div>
 				<div className="header-actions">
 					<div className="tabs">
@@ -1405,7 +1408,7 @@ function getReminderStatusText(reminderDaysBefore: number, lowStock: Coverage[],
 			return (
 				<>
 					<strong className="warning-text">⚠ {medsNeedingReminder.length} med{medsNeedingReminder.length > 1 ? "s" : ""} need reorder</strong>
-					{" · "}Last email: {formatLastSent(lastSent)}
+					{" · "}Last reminder: {formatLastSent(lastSent)}
 				</>
 			);
 		}
@@ -1435,7 +1438,7 @@ function getReminderStatusText(reminderDaysBefore: number, lowStock: Coverage[],
 		return (
 			<>
 				<span className="success-text">✓ All stock OK</span>
-				{" · "}Last email: {formatLastSent(lastSent)}
+				{" · "}Last reminder: {formatLastSent(lastSent)}
 			</>
 		);
 	}

frontend/src/styles.css

@@ -111,6 +111,8 @@ body {
 [data-theme="light"] .icon-btn:hover { background: rgba(0, 0, 0, 0.08); }
 [data-theme="light"] .icon-btn.active { background: rgba(47, 134, 246, 0.12); }
 
+.hero-title { display: flex; align-items: center; gap: 1rem; }
+.hero-logo { width: 48px; height: 48px; }
 .hero h1 { margin: 0.15rem 0 0; font-size: 1.6rem; font-weight: 600; }
 .sub { color: var(--text-secondary); margin: 0; }
 .eyebrow { letter-spacing: 0.06em; text-transform: uppercase; color: #7ca7ff; font-size: 0.75rem; margin: 0; font-weight: 500; }