diff --git a/frontend/package.json b/frontend/package.json
index eedf486..c4db06e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,8 +4,8 @@
   "description": "Standalone offline HTML/JS tool for building APDU commands for SIM, USIM, and GlobalPlatform RAM, plus encoding conversions.",
   "main": "index.js",
   "scripts": {
-    "build": "npx tailwindcss -i src/style.css -o style.css --config tailwind.config.js",
-    "build:prod": "NODE_ENV=production npx tailwindcss -i src/style.css -o style.css --config tailwind.config.js --minify",
+    "build": "npx tailwindcss -i src/style.css -o style.css --config tailwind.config.js && cat src/contrast.css >> style.css",
+    "build:prod": "NODE_ENV=production npx tailwindcss -i src/style.css -o style.css --config tailwind.config.js --minify && cat src/contrast.css >> style.css",
     "test": "node --test"
   },
   "repository": {
diff --git a/frontend/src/contrast.css b/frontend/src/contrast.css
new file mode 100644
index 0000000..9bb89f2
--- /dev/null
+++ b/frontend/src/contrast.css
@@ -0,0 +1,107 @@
+/* ===== Theme contrast adjustments ===== */
+
+/* Light theme: darken softer (muted) text one step for higher contrast */
+.text-gray-400 {
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.text-gray-500 {
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.text-gray-600 {
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: lighten softer (muted) text one step for higher contrast */
+.dark\:text-slate-500:is(.dark *) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark\:text-slate-400:is(.dark *) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: red text is too dark on dark backgrounds — lighten it */
+.dark :where(.text-red-500) {
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.dark :where(.text-red-600) {
+  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
+}
+.dark :where(.text-red-700) {
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
+/* Light theme: darken light gray shades (backgrounds & borders) one step */
+.bg-gray-50 {
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-100 {
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.bg-gray-200 {
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
+.border-gray-100 {
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+.border-gray-200 {
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+}
+.border-gray-300 {
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+}
+.text-gray-300 {
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.hover\:bg-gray-100:hover {
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-gray-200:hover {
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
+}
+.hover\:bg-gray-300:hover {
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
+/* Dark theme: lighten gray fonts */
+.dark\:text-gray-400:is(.dark *) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark\:text-gray-600:is(.dark *) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: gray text without an explicit dark variant (ids, timestamps,
+   expand markers, ...) — match the lighten-on-dark level used above */
+.dark .text-gray-300:not([class*="dark:text-"]) {
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-400:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-500:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-600:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-700:not([class*="dark:text-"]) {
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-800:not([class*="dark:text-"]) {
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: brighten gray borders one step so they stay visible on dark
+   backgrounds */
+.dark\:border-slate-600:is(.dark *) {
+  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
+}
+.dark\:border-slate-700:is(.dark *) {
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+.dark\:border-slate-700\/50:is(.dark *) {
+  border-color: rgb(71 85 105 / 0.5);
+}
+.dark\:border-slate-800:is(.dark *) {
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+}
\ No newline at end of file
diff --git a/frontend/style.css b/frontend/style.css
index f005ccd..44b3f4e 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -1702,7 +1702,7 @@ video {
 
 /* Dark theme: lighten softer (muted) text one step for higher contrast */
 .dark\:text-slate-500:is(.dark *) {
-  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
 }
 .dark\:text-slate-400:is(.dark *) {
   color: rgb(203 213 225 / var(--tw-text-opacity, 1));
@@ -1753,8 +1753,44 @@ video {
 
 /* Dark theme: lighten gray fonts */
 .dark\:text-gray-400:is(.dark *) {
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
 }
 .dark\:text-gray-600:is(.dark *) {
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: gray text without an explicit dark variant (ids, timestamps,
+   expand markers, ...) — match the lighten-on-dark level used above */
+.dark .text-gray-300:not([class*="dark:text-"]) {
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-400:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-500:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-600:not([class*="dark:text-"]) {
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-700:not([class*="dark:text-"]) {
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+.dark .text-gray-800:not([class*="dark:text-"]) {
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
+
+/* Dark theme: brighten gray borders one step so they stay visible on dark
+   backgrounds */
+.dark\:border-slate-600:is(.dark *) {
+  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
+}
+.dark\:border-slate-700:is(.dark *) {
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+.dark\:border-slate-700\/50:is(.dark *) {
+  border-color: rgb(71 85 105 / 0.5);
+}
+.dark\:border-slate-800:is(.dark *) {
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
 }
\ No newline at end of file
diff --git a/frontend/sw.js b/frontend/sw.js
index e1b9fa7..b9954ad 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'otaman-v95';
+const CACHE = 'otaman-v96';
 const URLS = [
   'index.html',
   'help.html',