[Feature] Background overlay controls — dim, blur, and tint for readability

[404-Page-Found]

User Story

As a user who loves photo backgrounds (e.g. Beach, Australia), I want sliders to dim / blur / tint the background so clock, search, and todo text stay legible without swapping the photo.

Problem / Motivation

Background images burn out white foreground text. The only remedy today is to change the photo. Users expect a dim 0–80% slider like Momentum/Start.

Evidence:

• src/data/backgrounds.js only stores id/thumb/url/type — no overlay metadata.
• src/ui/settings.js applyBg() / captureBackgroundSnapshot() swaps #bg-thumbnail/#bg-full/#bg-video with no overlay layer; the only overlay (#bg-transition-overlay in css/core.css:121) is for transitions.
• .background-container (css/core.css:52) has no dim pseudo-element or --bg-overlay-opacity var; video backgrounds in custom-backgrounds.js follow the same unfiltered path.
• Settings Background section has no readability controls.

No duplicate exists (searched: overlay, dim, blur background — none). Recent #649 (custom backgrounds in rotation) and #674 (shadcn redesign) did not add this.

Proposed Solution

• Add a persistent overlay layer <div id="bg-overlay"> inside .background-container with CSS vars --bg-overlay-opacity, --bg-overlay-blur, --bg-tint.
• Settings → Background: three controls — Dim (0–80% slider), Blur (0–12px), Tint (color picker + strength, optional). Preview live via CSS filters (backdrop-filter: blur() / background: rgba()).
• Persist to localStorage (bgOverlayOpacity, bgOverlayBlur, bgTint) and include in data-manager.js export/import. Apply per-background or globally (global is simpler v1).
• Ensure videos respect the same overlay and that .glass widgets (css/glass.css) remain legible in both themes.

Acceptance Criteria

• Dim slider visibly darkens any background (image or video) without altering the source file.
• Blur applies to the background layer only, not to foreground widgets.
• Tint applies a subtle color wash with adjustable strength.
• Values persist across reloads and are included in settings backup/restore.
• No layout shift; overlay is pointer-events-none and does not block drag/switch animations.

Additional Context

• Files: css/core.css, css/glass.css, New-Tab.html, src/ui/settings.js, src/data/backgrounds.js, src/data/custom-backgrounds.js, src/features/background-rotation.js.
• Nice-to-have follow-ups: per-background saved overlays, solid-color background type (type:'color'), per-background object-fit.