diff --git a/src/app/globals.css b/src/app/globals.css
index 2118453..6449fe8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -37,6 +37,10 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --safe-top: env(safe-area-inset-top);
+  --safe-right: env(safe-area-inset-right);
+  --safe-bottom: env(safe-area-inset-bottom);
+  --safe-left: env(safe-area-inset-left);
 }
 
 .dark {
@@ -73,9 +77,48 @@
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
 }
+.page {
+  min-height: 100dvh; /* use dynamic viewport to avoid iOS URL bar jumps */
+  padding-top: var(--safe-top);
+  padding-right: var(--safe-right);
+  padding-bottom: var(--safe-bottom);
+  padding-left: var(--safe-left);
+}
+
+/* Utilities for fixed headers/footers that must clear safe areas */
+.fixed-top {
+  position: fixed;
+  inset: 0 0 auto 0;
+  padding-top: var(--safe-top);
+}
+
+.fixed-bottom {
+  position: fixed;
+  inset: auto 0 0 0;
+  padding-bottom: var(--safe-bottom);
+}
+
+/* Optional touch target helper for bottom bars */
+.touch-target {
+  padding-bottom: max(16px, var(--safe-bottom));
+}
+
+/* Tailwind font hook if you use the font variables */
+.font-sans {
+  font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
+    "Segoe UI Emoji";
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  background: #ffffff; /* match themeColor (light) */
+}
 
 @theme inline {
-  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
   --font-sans: "Geist", "Geist Fallback";
   --font-mono: "Geist Mono", "Geist Mono Fallback";
   --color-background: var(--background);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7f4fb48..a9b03a5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Geist, Geist_Mono } from "next/font/google"
 import type { ReactNode } from "react"
 import "./globals.css"
@@ -27,6 +27,14 @@ export const metadata: Metadata = {
   },
 }
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+};
+
 export default function RootLayout({
   children,
 }: Readonly<{