Update styles.css

Author: omarakhmedov-web

styles.css

@@ -283,3 +283,32 @@ figure.screen{padding:0 !important; margin:0 auto !important; max-width:1000px}
 /* Optional toolbar/look can stay minimal */
 .mdx-frame .toolbar, .mdx-frame .mdx-nav{display:none}
 
+
+/* === AURUM-DELTA: Lightbox & nav for screens === */
+.mdx-frame{ position:relative }
+.mdx-nav, .mdx-prev, .mdx-next{ display:flex; align-items:center; justify-content:center }
+.mdx-prev, .mdx-next{
+  position:absolute; top:50%; transform:translateY(-50%);
+  width:42px; height:42px; border-radius:50%;
+  background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.12);
+  color:#fff; font-size:22px; line-height:1; cursor:pointer;
+  user-select:none;
+}
+.mdx-prev{ left:10px } .mdx-next{ right:10px }
+.mdx-prev:hover, .mdx-next:hover{ background:rgba(0,0,0,0.6) }
+
+.mdx-lightbox{
+  position:fixed; inset:0; background:rgba(0,0,0,.9);
+  display:none; align-items:center; justify-content:center; z-index:10000;
+}
+.mdx-lightbox.open{ display:flex }
+.mdx-lb-img{ max-width:92vw; max-height:92vh; object-fit:contain; }
+.mdx-lb-prev, .mdx-lb-next, .mdx-lb-close{
+  position:absolute; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2);
+  width:48px; height:48px; border-radius:50%; cursor:pointer;
+  display:flex; align-items:center; justify-content:center; font-size:26px;
+}
+.mdx-lb-prev{ left:24px } .mdx-lb-next{ right:24px }
+.mdx-lb-close{ top:20px; right:20px; font-size:28px }
+.mdx-lb-prev:hover, .mdx-lb-next:hover, .mdx-lb-close:hover{ background:rgba(255,255,255,0.2) }
+