refactor(ui): extract UI systems into modular architecture

Extracted ~920 lines of UI management code from index.js into 4 specialized modules to improve maintainability and organization.

Modules Created:
- src/systems/ui/theme.js (100 lines) - Theme management and custom colors
- src/systems/ui/modals.js (568 lines) - DiceModal and SettingsModal ES6 classes
- src/systems/ui/layout.js (254 lines) - Panel visibility, positioning, and collapse toggle
- src/systems/ui/mobile.js (694 lines) - Mobile FAB, tabs, keyboard handling, and viewport management

Changes:
- Extracted theme application and custom color management
- Extracted modal classes with proper state management
- Extracted layout management (visibility, sections, positioning)
- Extracted mobile-specific UI (FAB dragging with touch/mouse, tab navigation, keyboard handling)
- Removed unused import (closeMobilePanelWithAnimation only used internally by mobile.js)
- Updated imports in index.js to use new module structure
- Added comprehensive documentation comments

Result:
- index.js reduced from 1606 to 921 lines (-685 lines)
- All UI systems properly modularized with clean dependencies
- Maintains 100% backward compatibility
- All modules pass syntax validation

Dependencies:
- All modules import from src/core/state.js for shared state
- Mobile module imports layout functions for panel animation
- Layout module properly manages DOM element state

src/systems/ui/theme.js

@@ -0,0 +1,100 @@
+/**
+ * Theme Management Module
+ * Handles theme application, custom colors, and animations
+ */
+
+import { extensionSettings, $panelContainer } from '../../core/state.js';
+
+/**
+ * Applies the selected theme to the panel.
+ */
+export function applyTheme() {
+    if (!$panelContainer) return;
+
+    const theme = extensionSettings.theme;
+
+    // Remove all theme attributes first
+    $panelContainer.removeAttr('data-theme');
+
+    // Clear any inline CSS variable overrides
+    $panelContainer.css({
+        '--rpg-bg': '',
+        '--rpg-accent': '',
+        '--rpg-text': '',
+        '--rpg-highlight': '',
+        '--rpg-border': '',
+        '--rpg-shadow': ''
+    });
+
+    // Apply the selected theme
+    if (theme === 'custom') {
+        applyCustomTheme();
+    } else if (theme !== 'default') {
+        // For non-default themes, set the data-theme attribute
+        // which will trigger the CSS theme rules
+        $panelContainer.attr('data-theme', theme);
+    }
+    // For 'default', we do nothing - it will use the CSS variables from .rpg-panel class
+    // which fall back to SillyTavern's theme variables
+}
+
+/**
+ * Applies custom colors when custom theme is selected.
+ */
+export function applyCustomTheme() {
+    if (!$panelContainer) return;
+
+    const colors = extensionSettings.customColors;
+
+    // Apply custom CSS variables as inline styles
+    $panelContainer.css({
+        '--rpg-bg': colors.bg,
+        '--rpg-accent': colors.accent,
+        '--rpg-text': colors.text,
+        '--rpg-highlight': colors.highlight,
+        '--rpg-border': colors.highlight,
+        '--rpg-shadow': `${colors.highlight}80` // Add alpha for shadow
+    });
+}
+
+/**
+ * Toggles visibility of custom color pickers.
+ */
+export function toggleCustomColors() {
+    const isCustom = extensionSettings.theme === 'custom';
+    $('#rpg-custom-colors').toggle(isCustom);
+}
+
+/**
+ * Toggles animations on/off by adding/removing a class to the panel.
+ */
+export function toggleAnimations() {
+    if (extensionSettings.enableAnimations) {
+        $panelContainer.addClass('rpg-animations-enabled');
+    } else {
+        $panelContainer.removeClass('rpg-animations-enabled');
+    }
+}
+
+/**
+ * Updates the settings popup theme in real-time.
+ * Backwards compatible wrapper for SettingsModal class.
+ * @param {Object} settingsModal - The SettingsModal instance (passed as parameter to avoid circular dependency)
+ */
+export function updateSettingsPopupTheme(settingsModal) {
+    if (settingsModal) {
+        settingsModal.updateTheme();
+    }
+}
+
+/**
+ * Applies custom theme colors to the settings popup.
+ * Backwards compatible wrapper for SettingsModal class.
+ * @deprecated Use settingsModal.updateTheme() instead
+ * @param {Object} settingsModal - The SettingsModal instance (passed as parameter to avoid circular dependency)
+ */
+export function applyCustomThemeToSettingsPopup(settingsModal) {
+    if (settingsModal) {
+        settingsModal._applyCustomTheme();
+    }
+}