Hotpot restaurant marketing planner - set-menu structure calculator tool: have a coding agent build a single-file page that watches per-head perceived price with one hand and per-table margin with the other

You are a coding agent. Build me a single-file HTML hotpot set-menu
structure calculator for the marketing planner - double-click to
open in a browser, no network, no installs, no external resources
of any kind (no fonts, icons, or CSS frameworks).

Part 1 - Features
1. Item library: add/remove items with fields - name, category
   (broth / sauce bar / meat / vegetables / staples / drinks),
   unit cost, a-la-carte price, pricing mode (per order / per
   person self-serve)
2. Per-person self-serve items (sauce bar, per-head charges):
   cost and price both accrue per head at the table; inside a set
   they convert at the average party size ([default 4, editable])
3. Set builder: add items from the library into a set, with
   quantities
4. Set pricing: set price and stated party size, both entered by
   the user
5. Three core figures, recomputed live on any change:
   - Per-head perceived price = set price / stated party size
   - Per-table margin = set price - sum(item cost x quantity;
     per-person items x party size)
   - Discount rate = (a-la-carte total - set price) / a-la-carte
     total
6. Structure view: a share bar of each item's slice of set cost,
   colored by category - see at a glance how much of the cost
   the high-cost meats eat
7. Plan comparison: save multiple set designs and compare the
   three figures side by side

Part 2 - Data
- Everything in localStorage; one-click CSV export (item library
  + set details), export filename dated
- Confirm dialog before any wipe-all
- No built-in sample dishes, default costs, or industry averages -
  empty state says "add your first item"; every number must come
  from user entry

Part 3 - Error handling
- A per-person self-serve item inside a set binds to at least one
  head; quantity 0 gets an inline prompt
- Stated party size 0 or empty: the three figures show "-" rather
  than erroring
- Cost or price non-numeric or negative: row highlighted red,
  excluded from math, summary shows "N invalid rows"
- The same item added twice to a set merges quantities - never
  two lines

Part 4 - Interface
- Single-column layout, usable at phone width
- The three core figures pinned at the top, never scrolled away
- Numbers right-aligned, percentages to one decimal
- No login, no multi-user, no cloud sync

Deliverable: one complete HTML file with all CSS and JS inlined,
opening straight into a working tool. Include a usage note under
two hundred words, in Chinese only.

Why it is written this way

A hotpot set menu is fundamentally "structure traded for price": guests are sensitive to per-head figures and insensitive to structure - the same 268 RMB set is one margin with the meats stacked high and a very different one with broth, sauce bar, and drinks doing the filling. What the planner lacks is never the ability to compute but a thing where "change one item, see both hands instantly" - a spreadsheet computes but resists editing, and rebuilding a set in one costs a dozen cell changes. This tool drops the cost of restructuring to add-a-row, remove-a-row, and that is what makes structure design actually get iterated instead of decided once by gut and frozen for six months.

Per-person self-serve items get their own pricing logic because the cost structure is unique to the format: sauce bars and per-head charges bill by the person, settle by the table, and carry the word "self-serve" - meaning actual consumption is a distribution, not a point. A generic calculator flattens that into per-order pricing and mis-states sauce-bar cost by an order of magnitude. Letting those items be flagged self-serve and converted at average party size is admitting the fact of the business.

Per-head perceived price divides by "stated party size," not "how many it actually feeds," because the deliberate gap between those two numbers is precisely the variable the planner is testing: a set stated for four that really feeds five reads cheap per head, builds a portion reputation, and thins per-pot margin. How much that gap costs is something the planner should see by moving the numbers themselves.

Same iron rule as any cost tool: no built-in sample data. A prefilled "industry margin level" in a planning tool won't be read as reference - it will be copied straight into the proposal. One invented meat cost is more harmful than no tool at all.

Variables