Status text prefers the readable text twin (audio, docs, image) (#87)

ddiff --git a/apps/audio/public/css/style.css b/apps/audio/public/css/style.css
iindex 690fedf..74b0335 100644
---- a/apps/audio/public/css/style.css
++++ b/apps/audio/public/css/style.css
@@@ -199,7 +199,7 @@ a:hover { color: var(--accent-hover); }
      padding: 8px 14px;
      font-size: .85rem;
  }
--.btn-ghost:hover { color: var(--error); }
++.btn-ghost:hover { color: var(--error-text, var(--error)); }
  .btn-lg { font-size: 1.05rem; padding: 14px 32px; border-radius: var(--radius); }
  
  /* ---------- Options Panel ---------- */
@@@ -379,7 +379,7 @@ a:hover { color: var(--accent-hover); }
      animation: fadeIn .35s ease;
  }
  .result-panel h2 {
--    color: var(--success);
++    color: var(--success-text, var(--success));
      margin-bottom: 16px;
      font-size: 1.3rem;
  }
ddiff --git a/apps/docs/public/css/style.css b/apps/docs/public/css/style.css
iindex 47e054a..c3f9f98 100644
---- a/apps/docs/public/css/style.css
++++ b/apps/docs/public/css/style.css
@@@ -172,7 +172,7 @@ body {
      white-space: nowrap;
  }
  .file-list li .remove-file {
--    color: var(--danger);
++    color: var(--danger-text, var(--danger));
      cursor: pointer;
      margin-left: 8px;
      padding: 2px 6px;
@@@ -352,7 +352,7 @@ body {
  }
  .result-panel h2 {
      font-size: 24px;
--    color: var(--success);
++    color: var(--success-text, var(--success));
      margin-bottom: 16px;
  }
  .result-panel h2 i { margin-right: 8px; }
@@@ -363,7 +363,7 @@ body {
  }
  .result-info strong { color: var(--text-primary); }
  .result-info .savings {
--    color: var(--success);
++    color: var(--success-text, var(--success));
      font-weight: 600;
  }
  .result-actions {
ddiff --git a/apps/img/public/css/style.css b/apps/img/public/css/style.css
iindex 1f5023e..8b0e0e8 100644
---- a/apps/img/public/css/style.css
++++ b/apps/img/public/css/style.css
@@@ -319,7 +319,7 @@ body {
      color: var(--text-muted);
      padding: 6px 12px;
  }
--.btn-ghost:hover { color: var(--danger); }
++.btn-ghost:hover { color: var(--danger-text, var(--danger)); }
  .btn-lg { padding: 14px 32px; font-size: 16px; }
  
  /* ── Processing Spinner ─────────────────────────────────────── */
@@@ -348,7 +348,7 @@ body {
      margin-bottom: 24px;
  }
  .result-panel h2 {
--    color: var(--success);
++    color: var(--success-text, var(--success));
      margin-bottom: 20px;
      font-size: 24px;
  }
@@@ -368,7 +368,7 @@ body {
      color: var(--text-secondary);
  }
  .result-info .savings {
--    color: var(--success);
++    color: var(--success-text, var(--success));
      font-weight: 600;
  }
  .result-actions {