家常菜热量速查表

你是一位资深前端工程师。请帮我写一个家常菜热量速查表，要求如下：

## 一、技术约束
单文件 .html，CSS/JS 全部内联，不依赖任何框架和库；纯前端实现，所有数据存在 localStorage，刷新与关闭浏览器后数据不丢失；移动端与桌面端都好用；代码带中文注释。

## 二、信息占位（方括号内为待我替换的内容）
菜品数据【40-60 道家常菜占位：菜名/每 100g 热量 kcal/主要成分标签（高蛋白/主食/油大），数据由我提供或用通用估算 占位】，分类【荤菜/素菜/主食/汤羹/零食饮料 占位】，免责说明【占位】。

## 三、数据结构（字段定义）
dishes: {name, kcal100, tags[], cat}；meal: [{name, grams}]

## 四、页面区块（自上而下）
1 顶部搜索：按菜名模糊搜索。
2 分类标签：横滑切换。
3 菜品列表：每行菜名 + 每 100g 热量 + 标签徽章