火锅店厨师长：锅底成本卡小工具——让编码代理做一个单文件页面，算清每种锅底的成本结构与涨价敏感点

你是一个编码代理。请为我做一个单文件 HTML 的锅底成本卡
工具，给火锅店厨师长用，浏览器双击打开即用，不联网、
不装依赖、不引任何外部资源（字体、图标、CSS 框架都
不要）。

一、功能需求
1. 锅型管理：可增删锅型（如全辣 / 清汤 / 鸳鸯），每个
   锅型一张成本卡
2. 原料行：每个锅型下可增删原料行，字段为——原料名、
   单锅用量、用量单位（克 / 毫升 / 个）、采购单价
   （按每千克 / 每升 / 每个填，工具自动换算到单锅）
3. 每卡汇总：单锅原料成本（各行合计）、锅底售价
   （用户填）、毛利额、毛利率
4. 成本结构：每卡列出各原料占成本的百分比，占比超过
   【X】% 的行高亮标注「成本大头」
5. 多锅型对比表：全部锅型的成本 / 售价 / 毛利率一张表
   横向对比
6. 变价测算：任改一个原料单价，全卡结果实时重算——
   这是本工具的核心场景：某原料涨了，马上看到锅底
   成本动多少、毛利还剩多少

二、数据要求
- 所有数据存 localStorage，关页面不丢
- 一键导出 CSV（锅型 × 原料 × 成本结构），一键清空
  （清空前弹确认框）
- 工具不内置任何示例价格、默认配方、行业均价——
  空状态就提示「先建第一个锅型」，数字必须全部来自
  用户录入

三、防错要求
- 单位换算边界：克与千克、毫升与升混用时结果必须
  正确；单锅用量与单价的计量单位不匹配时，行内提示
  而不是算错
- 删除锅型时连带删其原料行
- 任何输入框非法（非数字、负数）时不参与计算并标红
- 鸳鸯锅这类双份锅：允许一个锅型下原料行标记「双侧
  各一份」，成本按双份计

四、界面要求
- 单栏布局，手机宽度可用（厨师长多在手机上看）
- 表格数字右对齐，百分比保留一位小数
- 不做登录、不做多用户、不做云同步

交付：一个完整的 HTML 文件，内联全部 CSS 与 JS，浏览器
直接打开即可用。附一段两百字以内的使用说明，说明只用
中文写。

为什么这样写

锅底成本难算不是因为数学难，是因为数据散：十几种原料分属不同供应商、不同计价单位（牛油按千克、灯笼椒按斤、高汤按桶），手工算一次要一下午，于是实际操作里大家只算「底料桶进价」这个粗数，单锅真实成本永远是笔糊涂账。工具把「算一次」的成本压到几秒钟，变价测算才是真正的使用场景——原料涨价的当天就能回答「锅底毛利还守不守得住」，而不是等月底盘点倒推。

「不内置任何示例价格和默认配方」是这类工具最重要的一条纪律：编码代理做计算器时有个顽固习惯——预填一套看起来合理的示例数据让 demo 好看。但成本工具里任何预填数字都会被当成行业均价引用，一个编出来的牛油价格比没有工具更有害。空状态逼着用户录自己的数，工具只负责算得快、算得对。

单位换算和「双侧各一份」是火锅特有的坑：采购按千克计价、配方按克投料是常态；鸳鸯锅两侧各投一份料，漏算这一层成本直接少算一半。把这些写成明确的防错要求，是因为编码代理不会主动想到——它没有在打锅台前站过一个班次。

变量