Fix the Broken App

Repair the expense tracker below and return one complete HTML file with inline CSS and vanilla JavaScript. No libraries, CDNs, external resources, network requests, storage, or embedded frames. It must work inside an iframe sandboxed with allow-scripts only. Return only the repaired HTML, not an explanation. Preserve the basic form, filter, table, total, reset control and their existing IDs; improve labels and keyboard accessibility as needed.

Required behavior:
- Initial rows: Coffee €3.50 (Food), Train €12.00 (Travel), Sandwich €5.00 (Food). Initial total €20.50.
- Add an expense from a non-empty trimmed description, category Food/Travel/Other, and a positive amount with at most two decimal places. Reject blank, zero, negative, nonnumeric and excess-decimal amounts with a visible error; do not add a row or reload the page.
- Use integer cents: adding 0.10 and 0.20 increases the total by exactly €0.30.
- Filter shows only matching rows. Total always represents ALL expenses, not only the visible rows.
- Delete uses stable identity, never the filtered array index. Filtering Travel and deleting Train must leave Coffee and Sandwich and total €8.50.
- Descriptions containing HTML markup must be displayed literally, not interpreted. Use safe DOM APIs; do not execute entered content.
- Reset restores the original three rows, clears the filter and form errors, and does not duplicate listeners. After resetting three times, submitting once still adds exactly one row.
- Render each row with data-id equal to its stable expense ID. Keep total's id="total". Give all controls visible associated labels. Add a short visible visitor checklist for the cases above.

Original buggy source (the same input is given to every model):
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Expense tracker</title></head>
<body>
<h1>Expense tracker</h1>
<form id="expense-form">
<input id="description" placeholder="Description">
<input id="amount" placeholder="Amount">
<select id="category"><option>Food</option><option>Travel</option><option>Other</option></select>
<button type="submit">Add expense</button>
</form>
<select id="filter"><option value="">All categories</option><option>Food</option><option>Travel</option><option>Other</option></select>
<table><thead><tr><th>Description</th><th>Amount</th><th>Category</th><th>Action</th></tr></thead><tbody id="rows"></tbody></table>
<p>Total: <span id="total"></span></p><button id="reset">Reset</button>
<script>
const initial = [{id:1,description:'Coffee',amount:'3.50',category:'Food'},{id:2,description:'Train',amount:'12.00',category:'Travel'},{id:3,description:'Sandwich',amount:'5.00',category:'Food'}];
let expenses = initial;
const form = document.querySelector('#expense-form');
const description = document.querySelector('#description');
const amount = document.querySelector('#amount');
const category = document.querySelector('#category');
const filter = document.querySelector('#filter');
const rows = document.querySelector('#rows');
function render() {
 const visible = expenses.filter(e => !filter.value || e.category === filter.value);
 rows.innerHTML = visible.map((e,i) => `<tr><td>${e.description}</td><td>${e.amount}</td><td>${e.category}</td><td><button onclick="removeExpense(${i})">Delete</button></td></tr>`).join('');
 document.querySelector('#total').textContent = visible.reduce((sum,e) => sum + e.amount, 0);
}
function removeExpense(index) { expenses.splice(index,1); render(); }
function bind() {
 form.addEventListener('submit', event => {
  event.preventDefault();
  expenses.push({id:expenses.length+1,description:description.value,amount:amount.value,category:category.value});
  form.reset(); render();
 });
}
filter.addEventListener('change',render);
document.querySelector('#reset').addEventListener('click', () => { expenses = initial; bind(); render(); });
bind(); render();
</script>
</body></html>