Fix grid cell label and count: label below image, count as green text beside it

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

public/app.mjs

@@ -1293,7 +1293,8 @@ function render_grid_viewer() {
 		} else {
 			cell.classList.add('empty');
 		}
-		set_text(cell, '.grid-cell-label', `R${row + 1}C${col + 1}`);
+		const label_el = qs(cell, '.grid-cell-label');
+		label_el.textContent = `R${row + 1}C${col + 1}`;
 
 		const count = all_inventory.filter(inv =>
 			inv.location_type === 'grid' && inv.grid_id === grid.id &&
@@ -1303,7 +1304,7 @@ function render_grid_viewer() {
 			const badge = document.createElement('span');
 			badge.className = 'grid-cell-count';
 			badge.textContent = count;
-			qs(cell, '.grid-cell-img-wrap').appendChild(badge);
+			label_el.appendChild(badge);
 		}
 
 		cell.addEventListener('click', (e) => open_cell_inventory(grid, row, col, e));

public/style.css

@@ -1483,33 +1483,19 @@ nav {
 }
 
 .grid-cell-label {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 0.3em;
 	font-size: 0.65rem;
-	color: #ccc;
+	color: var(--text-dim);
 	text-align: center;
 	font-family: var(--font-mono);
-	background: linear-gradient(transparent, rgba(0,0,0,0.7));
-	border-radius: 0 0 3px 3px;
-	padding: 6px 2px 2px;
-	pointer-events: none;
 }
 
 .grid-cell-count {
-	position: absolute;
-	top: 3px;
-	right: 3px;
-	background: #2e7d4f;
-	color: #fff;
-	font-size: 0.6rem;
+	color: #4caf50;
 	font-weight: 700;
-	font-family: var(--font-mono);
-	padding: 1px 5px;
-	border-radius: 8px;
-	pointer-events: none;
-	line-height: 1.5;
 }
 
 /* ===== GRID TYPE PILL ===== */