diff --git a/frontend/src/styles/igny8-colors.css b/frontend/src/styles/igny8-colors.css
index 3b696ce5..9b40bec4 100644
--- a/frontend/src/styles/igny8-colors.css
+++ b/frontend/src/styles/igny8-colors.css
@@ -230,6 +230,35 @@
 .igny8-badge-danger { background: var(--igny8-red); }
 .igny8-badge-purple { background: var(--igny8-purple); }
 
+/* ===================================================================
+   LIGHTBOX GLASSMORPHISM STYLES
+   =================================================================== */
+/* Custom glassmorphism background for yet-another-react-lightbox */
+.yarl__container {
+  background: rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+}
+
+.yarl__backdrop {
+  background: rgba(0, 0, 0, 0.3) !important;
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+}
+
+/* Dark mode adjustments */
+.dark .yarl__container {
+  background: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
+.dark .yarl__backdrop {
+  background: rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+}
+
 /* ===================================================================
    COMPACT LAYOUT STYLES (Global - Apply to all pages)
    =================================================================== */