diff --git a/frontend/css/ls.css b/frontend/css/ls.css
index 377da8e..d27cb0b 100644
--- a/frontend/css/ls.css
+++ b/frontend/css/ls.css
@@ -1263,13 +1263,37 @@ body[data-bg-tone="dark"] .p-section > h2,
 body[data-bg-tone="dark"] .p-section > h3 {
   color: #f3f4f6;
 }
-body[data-bg-tone="dark"] .shop-filter:not(.active) {
+body[data-bg-tone="dark"] .shop-filter:not(.active),
+body[data-bg-tone="dark"] .p-tab:not(.active) {
   color: rgba(243, 244, 246, 0.78);
 }
-body[data-bg-tone="dark"] .shop-filter:not(.active):hover {
+body[data-bg-tone="dark"] .shop-filter:not(.active):hover,
+body[data-bg-tone="dark"] .p-tab:not(.active):hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.08);
 }
+/* Container pills (`.p-tabs`, `.shop-filters`) used a 6% dark fill that
+   vanishes on the dark veil — restore the rounded outline with a
+   white-tinted wash + subtle border so the button group still reads
+   as a contained pill. */
+body[data-bg-tone="dark"] .p-tabs,
+body[data-bg-tone="dark"] .shop-filters {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+}
+/* Active tab/filter — keep the white pill but add a contrast halo so
+   it doesn't look like a separate floating chip. */
+body[data-bg-tone="dark"] .p-tab.active,
+body[data-bg-tone="dark"] .shop-filter.active {
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
+}
+/* Thin progress bars (xp, daily-goal) used a 7% dark fill that's
+   invisible on dark — switch to a faint light track. */
+body[data-bg-tone="dark"] .ach-xp-progress,
+body[data-bg-tone="dark"] .ep-bar,
+body[data-bg-tone="dark"] .po-bar {
+  background: rgba(255, 255, 255, 0.10);
+}
 body[data-bg-tone="dark"] .ach-group-head {
   border-bottom-color: rgba(255, 255, 255, 0.15);
 }