standardize card design and colors, change font to mono

[nielthiart]

No description provided.

[Copilot]

Pull Request Overview

This PR standardizes the card design and colors across the application while also updating the font to a monospace type for improved consistency.

• Added the "card" class to error messages and QR code links for a unified card style.
• Updated layout and styling in index.html to reflect the new design principles.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/main.ts	Applied "card" class to the error message container
src/controllers/qr-code-controller.ts	Added "card" class to download link and error message
index.html	Updated font to monospace; refined layout and card styles

Comments suppressed due to low confidence (2)

src/controllers/qr-code-controller.ts:137

• Verify that applying the 'card' styling to the download link is the intended design, as card styling may affect interactive elements differently than static information displays.

a.className = 'qr-code-link card';

index.html:249

• Confirm that adding the 'card' class to the preload placeholder aligns with the design intent; ensure that the card styling does not interfere with its primary role of preventing layout shifts.

<div class="preload-spacer card"><!-- This placeholder prevents layout shift --></div>

[Copilot]

Review the use of the 'card' class on error messages to ensure that the visual emphasis for errors is maintained and that the card styling does not override important error cues.

Suggested change

	<div class="error-message card">
	<div class="error-message">