diff --git a/core/templates/base.html b/core/templates/base.html
index b81bcc7..0f22f0f 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -110,6 +110,9 @@
     <!-- === MAIN CONTENT AREA === -->
     <div class="app-main">
 
+        <!-- Decorative gradient glows (separate from app-main to avoid stacking context trapping modals) -->
+        <div class="app-glow d-print-none"></div>
+
         <!-- === TOP BAR (mobile only, hidden on desktop via CSS) === -->
         <div class="app-topbar d-print-none">
             <a href="{% url 'home' %}" style="text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.2rem;">
diff --git a/static/css/custom.css b/static/css/custom.css
index 6456bdf..f905565 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -329,33 +329,36 @@ a:hover {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    position: relative;
+    /* NO position/z-index here — avoids trapping Bootstrap modals in a stacking context */
 }
 
-/* Decorative gradient glow in top-right corner of content area */
-.app-main::before {
-    content: '';
+/* Decorative gradient glows — separate fixed element, not on .app-main */
+.app-glow {
     position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.app-glow::before {
+    content: '';
+    position: absolute;
     top: -200px;
     right: -100px;
     width: 600px;
     height: 600px;
     background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
-    pointer-events: none;
-    z-index: 0;
 }
 
-/* Decorative gradient glow in bottom-left */
-.app-main::after {
+.app-glow::after {
     content: '';
-    position: fixed;
+    position: absolute;
     bottom: -300px;
     left: var(--sidebar-width);
     width: 500px;
     height: 500px;
     background: radial-gradient(ellipse, rgba(232, 133, 26, 0.06) 0%, transparent 70%);
-    pointer-events: none;
-    z-index: 0;
 }
 
 /* === TOP BAR (mobile) === */
@@ -418,17 +421,14 @@ a:hover {
     font-weight: 600;
 }
 
-/* Main content inner — sits above the decorative gradients */
+/* Main content inner */
 .app-content {
-    position: relative;
-    z-index: 1;
     flex-grow: 1;
+    /* NO position/z-index — lets Bootstrap modals escape to body-level stacking */
 }
 
 /* Footer inside main content */
 .app-footer {
-    position: relative;
-    z-index: 1;
     padding: 1.25rem 0;
     margin-top: auto;
     border-top: 1px solid var(--border-default);
@@ -458,7 +458,7 @@ a:hover {
     }
 
     /* Decorative gradients on mobile are positioned differently */
-    .app-main::after {
+    .app-glow::after {
         left: -100px;
     }
 }