fix: Use theme system CSS variables for modal/menu backgrounds

How theming actually works:
- Themes set CSS variables on .rpg-panel[data-theme="..."]
  (--rpg-bg, --rpg-accent, --rpg-text, --rpg-highlight, --rpg-border)
- Elements inside .rpg-panel inherit these solid-color variables
- Base .rpg-modal-content already uses var(--rpg-accent) gradient

Solution:
1. Copy data-theme attribute from panel to modals/menus
2. Define theme variables for .rpg-modal-content[data-theme]
3. Variables automatically apply to gradient background

Now modals/menus inherit theme styling through CSS variables:
- Sci-fi: --rpg-bg: #0a0e27, --rpg-accent: #1a1f3a
- Fantasy: --rpg-bg: #2b1810, --rpg-accent: #3d2414
- Cyberpunk: --rpg-bg: #000000, --rpg-accent: #0d0d0d
- Custom themes: Just work through variable system

Changes:
- style.css: Add variable definitions for themed .rpg-modal-content
- promptDialog.js: Copy data-theme from panel
- tabContextMenu.js: Copy data-theme (menu + icon picker)

src/systems/dashboard/promptDialog.js

@@ -37,6 +37,13 @@ export function showPromptDialog(options) {
         // Create modal content (uses .rpg-modal-content class for theming)
         const modalContent = document.createElement('div');
         modalContent.className = 'rpg-modal-content rpg-prompt-content';
+
+        // Copy theme from panel so modal inherits theme CSS variables
+        const panel = document.querySelector('.rpg-panel');
+        if (panel && panel.dataset.theme) {
+            modalContent.dataset.theme = panel.dataset.theme;
+        }
+
         modalContent.style.cssText = `
             min-width: 400px;
             max-width: 90vw;

src/systems/dashboard/tabContextMenu.js

@@ -157,20 +157,26 @@ export class TabContextMenu {
         const tab = this.tabManager.getTab(tabId);
         if (!tab) return;
 
-        // Create menu container (matches widget styling with solid background)
+        // Create menu container (uses CSS variables, themed via data-theme attribute)
         this.menu = document.createElement('div');
-        this.menu.className = 'rpg-tab-context-menu';
+        this.menu.className = 'rpg-tab-context-menu rpg-modal-content'; // Use .rpg-modal-content for theme styling
+
+        // Copy theme from panel so menu inherits theme-specific styles
+        const panel = document.querySelector('.rpg-panel');
+        if (panel && panel.dataset.theme) {
+            this.menu.dataset.theme = panel.dataset.theme;
+        }
+
         this.menu.style.cssText = `
             position: fixed;
             left: ${x}px;
             top: ${y}px;
-            background: linear-gradient(135deg, rgba(22, 33, 62, 1) 0%, rgba(26, 26, 46, 1) 100%);
-            border: 2px solid var(--rpg-border);
-            border-radius: 6px;
-            box-shadow: 0 4px 18px var(--rpg-shadow), inset 0 0 12px rgba(0, 0, 0, 0.3);
             z-index: 10002;
             min-width: 180px;
             padding: 6px 0;
+            max-width: none;
+            max-height: none;
+            overflow: visible;
         `;
 
         // Menu items
@@ -420,6 +426,13 @@ export class TabContextMenu {
             // Modal content (uses .rpg-modal-content class for theming)
             const content = document.createElement('div');
             content.className = 'rpg-modal-content';
+
+            // Copy theme from panel so modal inherits theme CSS variables
+            const panel = document.querySelector('.rpg-panel');
+            if (panel && panel.dataset.theme) {
+                content.dataset.theme = panel.dataset.theme;
+            }
+
             content.style.padding = '1.5rem';
             content.style.maxWidth = '500px';
 

style.css

@@ -1479,7 +1479,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
 /* Modal Content Container */
 .rpg-modal-content {
-    background: linear-gradient(135deg, rgba(22, 33, 62, 1) 0%, rgba(26, 26, 46, 1) 100%);
+    background: linear-gradient(135deg, var(--rpg-accent) 0%, var(--rpg-bg) 100%);
     border: 2px solid var(--rpg-border);
     border-radius: 8px;
     max-width: 600px;
@@ -4096,6 +4096,34 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
    THEME SUPPORT FOR ALL PANEL ELEMENTS
    ============================================ */
 
+/* Apply theme CSS variables to standalone elements (modals, menus) */
+.rpg-modal-content[data-theme="sci-fi"] {
+    --rpg-bg: #0a0e27;
+    --rpg-accent: #1a1f3a;
+    --rpg-text: #00fff9;
+    --rpg-highlight: #ff006e;
+    --rpg-border: #8b00ff;
+    --rpg-shadow: rgba(139, 0, 255, 0.5);
+}
+
+.rpg-modal-content[data-theme="fantasy"] {
+    --rpg-bg: #2b1810;
+    --rpg-accent: #3d2414;
+    --rpg-text: #f4e8d0;
+    --rpg-highlight: #d4af37;
+    --rpg-border: #8b6914;
+    --rpg-shadow: rgba(0, 0, 0, 0.7);
+}
+
+.rpg-modal-content[data-theme="cyberpunk"] {
+    --rpg-bg: #000000;
+    --rpg-accent: #0d0d0d;
+    --rpg-text: #00ff41;
+    --rpg-highlight: #ff2a6d;
+    --rpg-border: #05d9e8;
+    --rpg-shadow: rgba(5, 217, 232, 0.5);
+}
+
 /* Apply theme colors to tabs navigation */
 .rpg-panel[data-theme="sci-fi"] .rpg-tabs-nav,
 .rpg-panel[data-theme="fantasy"] .rpg-tabs-nav,