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;