style(app): mobile-native layout with safe areas and grouped list

src/App.tsx

@@ -37,8 +37,8 @@ function App() {
   }
 
   return (
-    <main className="mx-auto w-full max-w-2xl flex flex-col min-h-dvh pb-28">
-      <header className="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3">
+    <main className="mx-auto flex w-full max-w-2xl min-h-dvh flex-col pb-[calc(env(safe-area-inset-bottom)+7rem)]">
+      <header className="sticky top-0 z-10 border-b border-gray-200 bg-white/95 px-4 pb-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] backdrop-blur">
         {creating || selectedNote ? (
           <div className="flex items-center gap-1">
             <button