Dedupe menu admin CSS/markup, restore Mark Sold Out/Available labels

CSS redundancy cleanup on the online menu management feature:

- .menu-category was a byte-for-byte duplicate of the existing .panel
  class (background/border/border-radius/padding); folds it into
  .panel's shared selector group instead, keeping only what's not
  shared (no margin-bottom, since these sit in a grid whose own gap
  already spaces them)
- Several inline style="..." attributes were hand-copied verbatim
  between admin/menu.php's PHP template and admin/menu.js's client-
  side row/panel templates (price/sort/description cell formatting,
  category heading spacing, the empty-state row). Replaced with real
  CSS classes (.item-price-cell, .item-sort-cell, .item-desc-cell,
  .cat-name-heading, .cat-desc-text, .no-items-row td) so the styling
  lives in one place instead of two
- class="font-mono" was referenced four times but never defined
  anywhere in CSS (silently doing nothing); it's now a real one-line
  utility, which also fixes two previously-dead uses of it already
  sitting in admin/index.php
- .form-actions already existed as a class with its own margin-top,
  but every usage (two new modals here, plus a pre-existing one in
  admin/index.php) redundantly re-specified layout via inline style
  with a slightly different margin-top value each time; extended the
  shared class to own the whole pattern and dropped all three inline
  overrides
- Removed a no-op `justify-content: flex-start` (the default value)
  from the new .admin-toolbar

Caught and fixed a regression from the above before it shipped:
removing the inline margin-bottom override on the category heading
exposed that .panel h2's margin-bottom (from the existing panel
styles) has higher specificity than a bare .cat-name-heading class,
so the heading would have rendered with 5x the intended spacing.
Rescoped as .category-panel .cat-name-heading to reliably win.

Also restores the "Mark Sold Out" / "Mark Available" button wording
(both directions of the toggle, in both the PHP-rendered rows and
the two JS render paths) after it had been shortened to just "Sold
Out" / "Available".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

admin/menu.js

@@ -277,10 +277,10 @@ function updateOrInsertItemRow(item, isNew) {
 
     const badgeCell = existingRow.querySelector('.item-badge-cell');
     badgeCell.innerHTML = item.badge
-      ? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>`
+      ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>`
       : '<span class="muted">—</span>';
 
-    existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Sold Out' : 'Available';
+    existingRow.querySelector('.btn-toggle-item').textContent = isAvail ? 'Mark Sold Out' : 'Mark Available';
     return;
   }
 
@@ -298,13 +298,13 @@ function updateOrInsertItemRow(item, isNew) {
 
   tr.innerHTML = `
     <td><span class="status-badge ${isAvail ? 'active' : 'inactive'}">${isAvail ? '● Available' : '○ Sold Out / Hidden'}</span></td>
-    <td><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell" style="font-size: 0.82rem; margin-top: 0.2rem;">${escapeHtml(item.description || '')}</div></td>
-    <td class="font-mono item-price-cell" style="color: var(--gold-bright); font-weight: 500;">${escapeHtml(item.price)}</td>
-    <td class="item-badge-cell">${item.badge ? `<span class="eyebrow" style="font-size: 0.68rem;">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
-    <td class="font-mono item-sort-cell" style="color: var(--ink-muted); font-size: 0.8rem;">${item.sort_order || 0}</td>
+    <td><strong class="item-name-cell">${escapeHtml(item.name)}</strong><div class="muted item-desc-cell">${escapeHtml(item.description || '')}</div></td>
+    <td class="font-mono item-price-cell">${escapeHtml(item.price)}</td>
+    <td class="item-badge-cell">${item.badge ? `<span class="eyebrow">${escapeHtml(item.badge)}</span>` : '<span class="muted">—</span>'}</td>
+    <td class="font-mono item-sort-cell">${item.sort_order || 0}</td>
     <td><div class="admin-table-actions">
       <button type="button" class="btn btn-outline btn-sm btn-edit-item">Edit</button>
-      <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Sold Out' : 'Available'}</button>
+      <button type="button" class="btn btn-outline btn-sm btn-toggle-item" data-id="${item.id}">${isAvail ? 'Mark Sold Out' : 'Mark Available'}</button>
       <button type="button" class="btn btn-danger btn-sm btn-delete-item" data-id="${item.id}">Delete</button>
     </div></td>
   `;
@@ -320,10 +320,10 @@ function categoryPanelHtml(category) {
   return `
     <div class="panel-head">
       <div>
-        <h2 class="cat-name-heading" style="margin-bottom: 0.25rem;">
+        <h2 class="cat-name-heading">
           <span>${escapeHtml(category.name)}</span>
         </h2>
-        <p class="muted cat-desc-text" style="font-size: 0.88rem;">${escapeHtml(category.description || '')}</p>
+        <p class="muted cat-desc-text">${escapeHtml(category.description || '')}</p>
       </div>
       <div class="admin-table-actions">
         <button type="button" class="btn btn-outline btn-sm btn-edit-cat">Edit Category</button>
@@ -345,7 +345,7 @@ function categoryPanelHtml(category) {
         </thead>
         <tbody class="items-tbody">
           <tr class="no-items-row">
-            <td colspan="6" class="muted" style="text-align: center; padding: 1.5rem 0;">No items in this category yet.</td>
+            <td colspan="6" class="muted">No items in this category yet.</td>
           </tr>
         </tbody>
       </table>