菜品成本核算与定价页

你是一位资深前端工程师兼餐饮成本核算师。请帮我写一个菜品成本核算与定价页，要求如下：

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

## 二、信息占位（方括号内为待我替换的内容）
菜品信息【占位：菜名/所属分类/预计销量占比】，食材明细【占位：主料名称用量单价、辅料、调料、油盐燃气等分摊】，成本参数【占位：食材损耗附加比例/调料打包盒分摊比例】，定价目标【占位：期望毛利率区间/同档次店铺的参考售价，可留空】。

## 三、数据结构（字段定义）
dish：{菜名、分类、期望毛利率、单份总成本、建议售价}；item：{菜品ID、材料名、用量、单位、采购单价、单项小计}；hidden：{损耗附加率、调料提点、能耗分摊、打包耗材}。

## 四、页面区块（自上而下）