diff --git a/src/app.css b/src/app.css
index 4d5b404..59bb195 100644
--- a/src/app.css
+++ b/src/app.css
@@ -88,7 +88,9 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   word-break: break-all;
-  color: var(--pico-color); /* explicit; do not rely on inheritance */
+  /* No explicit color — inherit from body. Pico sets this correctly for both
+     light (#373c44) and dark (#c2c7d0). Overriding with a CSS var here is
+     what caused the invisible-text regression. */
 }
 
 .result-label {
@@ -96,11 +98,7 @@
   color: var(--color-label);
 }
 
-.result-symbol {
-  font-size: 0.75rem;
-  color: var(--pico-muted-color);
-  font-style: italic;
-}
+/* .result-symbol removed — symbol is now rendered inline in the label */
 
 /* ── Highlighted result (above grid) ──────────────────────────────────────── */
 .highlighted-result {
diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte
index 5ff341e..01a4f80 100644
--- a/src/components/ConversionResult.svelte
+++ b/src/components/ConversionResult.svelte
@@ -57,6 +57,5 @@
   aria-pressed={highlighted}
 >
   <span class="result-value">{formattedValue}</span>
-  <span class="result-label">{unit.labelPlural}</span>
-  <span class="result-symbol">{unit.symbol}</span>
+  <span class="result-label">{unit.labelPlural} ({unit.symbol})</span>
 </div>