Card layout polish

- Optional card title via config.title (rendered as ha-card header)
- Remove table column headers
- Collapse status toggle into right-justified action column with edit/clear
- Hide number input spinners on slot# field

custom_components/zlock_slots/frontend/zlock-slots-card.js

@@ -65,7 +65,6 @@ class ZLockSlotsCard extends HTMLElement {
         ha-card { padding: 16px; }
         h3 { margin: 0 0 12px; font-size: 1rem; font-weight: 600; }
         table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-        th { text-align: left; padding: 4px 8px; opacity: 0.6; font-weight: 500; }
         td { padding: 4px 8px; vertical-align: middle; }
         tr:not(:last-child) td { border-bottom: 1px solid var(--divider-color, #e0e0e0); }
         .status-icon { --mdc-icon-size: 20px; }
@@ -76,6 +75,11 @@ class ZLockSlotsCard extends HTMLElement {
         .icon-btn:hover { opacity: 1; }
         .icon-btn ha-icon { --mdc-icon-size: 18px; }
         .clear-btn ha-icon { color: var(--error-color, #f44336); --mdc-icon-size: 20px; }
+        .actions-cell { text-align: right; white-space: nowrap; }
+        .actions-cell span { display: inline-flex; gap: 4px; align-items: center; }
+        input[type=number]::-webkit-outer-spin-button,
+        input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+        input[type=number] { -moz-appearance: textfield; }
         .section { margin-top: 20px; }
         .form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
         .form-row-inline { display: flex; gap: 10px; margin-bottom: 10px; }
@@ -96,7 +100,7 @@ class ZLockSlotsCard extends HTMLElement {
         .pin-edit-row label { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; }
         .name-display { cursor: text; }
       </style>
-      <ha-card>
+      <ha-card${this._config.title ? ` header="${this._config.title}"` : ""}>
         <div class="section">
           <div class="status-row">
             <span><span class="status-label">Last action:</span> ${lastAction}</span>
@@ -109,16 +113,10 @@ class ZLockSlotsCard extends HTMLElement {
           ${slots.length === 0
             ? '<div class="empty-note">No active code slots.</div>'
             : `<table>
-                <thead><tr><th>#</th><th>Status</th><th>Name</th><th></th></tr></thead>
                 <tbody>
                   ${slots.map(s => `
                     <tr data-slot="${s.slot_num}">
                       <td>${s.slot_num}</td>
-                      <td>
-                        <button class="icon-btn status-icon ${s.status}" data-action="toggle-enabled" data-slot="${s.slot_num}" data-enabled="${s.status === "enabled"}" title="${s.status === "enabled" ? "Disable slot" : "Enable slot"}">
-                          <ha-icon icon="${s.status === "enabled" ? "mdi:account" : "mdi:account-off"}"></ha-icon>
-                        </button>
-                      </td>
                       <td>
                         <span id="name-display-${s.slot_num}" class="name-display" data-action="edit-name" data-slot="${s.slot_num}" title="Click to edit name">
                           ${s.name ?? '<em style="opacity:.4">unnamed</em>'}
@@ -127,8 +125,11 @@ class ZLockSlotsCard extends HTMLElement {
                           <input id="name-input-${s.slot_num}" type="text" value="${s.name ?? ''}" placeholder="Enter name — Enter to save, Esc to cancel" data-slot="${s.slot_num}" />
                         </span>
                       </td>
-                      <td>
-                        <span style="display:flex;gap:4px;align-items:center">
+                      <td class="actions-cell">
+                        <span>
+                          <button class="icon-btn status-icon ${s.status}" data-action="toggle-enabled" data-slot="${s.slot_num}" data-enabled="${s.status === "enabled"}" title="${s.status === "enabled" ? "Disable slot" : "Enable slot"}">
+                            <ha-icon icon="${s.status === "enabled" ? "mdi:account" : "mdi:account-off"}"></ha-icon>
+                          </button>
                           <button class="icon-btn" data-action="edit-pin" data-slot="${s.slot_num}" title="Change PIN">
                             <ha-icon icon="mdi:account-edit"></ha-icon>
                           </button>
@@ -139,7 +140,7 @@ class ZLockSlotsCard extends HTMLElement {
                       </td>
                     </tr>
                     <tr class="pin-edit-row" id="pin-edit-row-${s.slot_num}" style="display:none">
-                      <td colspan="4">
+                      <td colspan="3">
                         <div class="pin-edit">
                           <label>New PIN</label>
                           <input id="pin-input-${s.slot_num}" type="password" minlength="4" maxlength="8" placeholder="4–8 digits — Enter to save, Esc to cancel" data-slot="${s.slot_num}" data-type="pin" />