The single bg-fx layer was painting at full vibrancy behind the entire
app. Most UI elements use rgba() fills — chips, sub-panels, the
achievements .ach-item, the goal-tier bar — so saturated colors bled
right through, hurting readability on the Достижения / dashboard /
mocks tabs.
Layered fix:
• bg-fx drops to z-index:-2 (the animated layer)
• new #ls-bg-veil sits on z-index:-1 with rgba(245,247,251,.78)
(light) or rgba(15,23,42,.55) when body[data-bg-tone='dark']
• applyCosmetics injects both elements and tags the body with
bg-tone based on the slug (dark/stars/aurora/nebula/grid go dark,
everything else light)
• clearing the bg removes both layers + the tone attribute
Result: animations stay perceptible (~22% of the chosen palette comes
through the veil), but the page chrome reads at normal contrast.
Shop swatches keep full vibrancy — the .bg-preview is meant to show
the raw palette so users can compare.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Maxim Dolgolyov
d2ca0d61cc