diff --git a/frontend/src/components/KeyboardHints.tsx b/frontend/src/components/KeyboardHints.tsx
index 8b16f52..0299720 100644
--- a/frontend/src/components/KeyboardHints.tsx
+++ b/frontend/src/components/KeyboardHints.tsx
@@ -31,24 +31,27 @@ export function KeyboardHints() {
     // inside the main column in App.tsx so it isn't offset by the
     // sidebar widths.
     <div className="pointer-events-none absolute bottom-4 left-1/2 z-30 -translate-x-1/2">
-      <div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-border/60 bg-surface/40 px-4 py-1.5 shadow-lg ring-1 ring-white/5 backdrop-blur-md">
+      {/* Near-opaque dark pill so the hints stay legible against busy
+       *  thumbnails. The previous bg-surface/40 + 5% white ring left
+       *  text washed out when a bright photo sat directly behind it. */}
+      <div className="pointer-events-auto flex items-center gap-3 whitespace-nowrap rounded-full border border-white/15 bg-black/80 px-4 py-1.5 shadow-xl ring-1 ring-black/40 backdrop-blur-md">
         {hints.map((hint, i) => (
           <div key={i} className="flex items-center gap-1.5">
-            <kbd className="rounded bg-surface-offset/80 px-1.5 py-0.5 text-[11px] font-medium text-text">
+            <kbd className="rounded bg-white/15 px-1.5 py-0.5 text-[11px] font-medium text-white shadow-sm">
               {hint.key}
             </kbd>
-            <span className="whitespace-nowrap text-xs text-text-muted">
+            <span className="whitespace-nowrap text-xs text-white/85">
               {hint.action}
             </span>
             {i < hints.length - 1 && (
-              <span className="ml-1 text-text-faint">•</span>
+              <span className="ml-1 text-white/30">•</span>
             )}
           </div>
         ))}
         {selectedCount > 0 && (
           <>
-            <span className="text-text-faint">•</span>
-            <span className="whitespace-nowrap text-xs font-medium text-primary">
+            <span className="text-white/30">•</span>
+            <span className="whitespace-nowrap text-xs font-semibold text-primary">
               {selectedCount} selected
             </span>
           </>