I HAVE AN APP BUT NOT WORKING BECUSE CODE PARTS ARE NOT PLACED CORRECTLY.
provide the full correct code. ALSO YOU CAN IMPROVE AND FIX BUGS. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forex Checklist Analyzer</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --accent-color: #e74c3c;
            --background-color: #f5f6fa;
            --text-color: #2c3e50;
            --border-color: #dcdde1;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Styles */
        .sidebar {
            width: 280px;
            background-color: var(--primary-color);
            color: white;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }

        .category-list {
            flex-grow: 1;
        }

        .category-item {
            padding: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            border-radius: 6px;
            transition: background-color 0.3s;
        }

        .category-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .category-item.active {
            background-color: var(--secondary-color);
        }

        .add-category-btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            margin-top: auto;
            transition: background-color 0.3s;
        }

        .add-category-btn:hover {
            background-color: #2980b9;
        }

        /* Main Content Styles */
        .main-content {
            flex-grow: 1;
            padding: 30px;
            overflow-y: auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .score-display {
            background-color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .checklist-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .checklist-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .checklist-item:last-child {
            border-bottom: none;
        }

        .checklist-item input[type="checkbox"] {
            margin-right: 15px;
            width: 20px;
            height: 20px;
        }

        .item-content {
            flex-grow: 1;
        }

        .item-title {
            font-weight: 500;
            margin-bottom: 5px;
        }

        .item-priority {
            font-size: 0.9rem;
            color: #666;
        }

        .item-notes {
            font-size: 0.9rem;
            color: #666;
            margin-top: 5px;
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            width: 90%;
            max-width: 500px;
            margin: 50px auto;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .close-modal {
            cursor: pointer;
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }

        .modal-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: var(--secondary-color);
            color: white;
        }

        .btn-secondary {
            background-color: #95a5a6;
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
        }

        /* Progress Bar Styles */
        .progress-container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #eee;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .progress-fill {
            height: 100%;
            background-color: var(--secondary-color);
            transition: width 0.3s ease;
        }

        /* Export Button Styles */
        .export-btn {
            background-color: var(--accent-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .export-btn:hover {
            background-color: #c0392b;
        }

        /* Search Bar Styles */
        .search-bar {
            width: 100%;
            max-width: 300px;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            margin-bottom: 20px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
            }

            .main-content {
                padding: 15px;
            }

            .header {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-chart-line"></i> Forex Checklist
            </div>
            <div class="category-list" id="categoryList">
                <!-- Categories will be dynamically added here -->
            </div>
            <button class="add-category-btn" onclick="showAddCategoryModal()">
                <i class="fas fa-plus"></i> Add Category
            </button>
        </div>

        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div class="score-display">
                    Total Score: <span id="totalScore">0</span>
                </div>
                <input type="text" class="search-bar" placeholder="Search items..." id="searchInput">
                <button class="export-btn" onclick="exportData()">
                    <i class="fas fa-download"></i> Export Data
                </button>
            </div>

            <div class="progress-container">
                <div>Overall Progress</div>
                <div class="progress-bar">
                    <div class="progress-fill" id="progressBar" style="width: 0%"></div>
                </div>
            </div>

            <div class="checklist-container" id="checklistContainer">
                <!-- Checklist items will be dynamically added here -->
            </div>
        </div>
    </div>

    <!-- Add Category Modal -->
    <div class="modal" id="categoryModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Add Category</h2>
                <span class="close-modal" onclick="closeModal('categoryModal')">&times;</span>
            </div>
            <div class="form-group">
                <label for="categoryName">Category Name</label>
                <input type="text" id="categoryName" required>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-secondary" onclick="closeModal('categoryModal')">Cancel</button>
                <button class="btn btn-primary" onclick="addCategory()">Add</button>
            </div>
        </div>
    </div>

    <!-- Add Item Modal -->
    <div class="modal" id="itemModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Add Item</h2>
                <span class="close-modal" onclick="closeModal('itemModal')">&times;</span>
            </div>
            <div class="form-group">
                <label for="itemTitle">Title</label>
                <input type="text" id="itemTitle" required>
            </div>
            <div class="form-group">
                <label for="itemPriority">Priority (1-100)</label>
                <input type="number" id="itemPriority" min="1" max="100" required>
            </div>
            <div class="form-group">
                <label for="itemNotes">Notes</label>
                <textarea id="itemNotes" rows="3"></textarea>
            </div>
            <div class="modal-buttons">
                <button class="btn btn-secondary" onclick="closeModal('itemModal')">Cancel</button>
                <button class="btn btn-primary" onclick="addItem()">Add</button>
            </div>
        </div>
    </div>

    <script>
        // State management
        let state = {
            categories: [],
            items: {},
            currentCategory: null
        };

        // Initialize default categories
        function initializeApp() {
            // Load data from localStorage if available
            const savedState = localStorage.getItem('forexChecklistState');
            if (savedState) {
                state = JSON.parse(savedState);
            } else {
                // Set default categories
                const defaultCategories = [
                    'Before Trading',
                    'During Trading',
                    'After Trading'
                ];

                defaultCategories.forEach(category => {
                    state.categories.push(category);
                    state.items[category] = [];
                });
            }

            renderCategories();
            if (state.categories.length > 0) {
                selectCategory(state.categories[0]);
            }
        }

        // Render categories in sidebar
        function renderCategories() {
            const categoryList = document.getElementById('categoryList');
            categoryList.innerHTML = '';

            state.categories.forEach(category => {
                const div = document.createElement('div');
                div.className = `category-item ${state.currentCategory === category ? 'active' : ''}`;
                div.onclick = () => selectCategory(category);
                div.innerHTML = `
                    <i class="fas fa-list"></i>
                    ${category}
                `;
                categoryList.appendChild(div);
            });
        }

        // Select category and render its items
        function selectCategory(category) {
            state.currentCategory = category;
            renderCategories();
            renderChecklist();
            updateProgress();
        }

        // Render checklist items for current category
        function renderChecklist() {
            const container = document.getElementById('checklistContainer');
            container.innerHTML = `
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2>${state.currentCategory}</h2>
                    <button class="btn btn-primary" onclick="showAddItemModal()">
                        <i class="fas fa-plus"></i> Add Item
                    </button>
                </div>
            `;

            const items = state.items[state.currentCategory] || [];
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();

            items.filter(item => 
                item.title.toLowerCase().includes(searchTerm) ||
                item.notes.toLowerCase().includes(searchTerm)
            ).forEach(item => {
                const div = document.createElement('div');
                div.className = 'checklist-item';
                div.innerHTML = `
                    <input type="checkbox" ${item.completed ? 'checked' : ''} 
                           onchange="toggleItem('${item.id}')">
                    <div class="item-content">
                        <div class="item-title">${item.title}</div>
                        <div class="item-priority">Priority: ${item.priority}</div>
                        <div class="item-notes">${item.notes}</div>
                    </div>
                `;
                container.appendChild(div);
            });
        }

        // Modal controls
        function showModal(modalId) {
            document.getElementById(modalId).style.display = 'block';
        }

        function closeModal(modalId) {
            document.getElementById(modalId).style.display = 'none';
        }

        function showAddCategoryModal() {
            showModal('categoryModal');
        }

        function showAddItemModal() {
            showModal('itemModal');
        }

        // Add new category
        function addCategory() {
            const nameInput = document.getElementById('categoryName');
            const name = nameInput.value.trim();

            if (name && !state.categories.includes(name)) {
                state.categories.push(name);
                state.items[name] = [];
                saveState();
                renderCategories();
                selectCategory(name);
                closeModal('categoryModal');
                nameInput.value = '';
            }
        }

        // Add new item
        function addItem() {
            const titleInput = document.getElementById('itemTitle');
            const priorityInput = document.getElementById('itemPriority');
            const notesInput = document.getElementById('itemNotes');

            const item = {
                id: Date.now().toString(),
                title: titleInput.value.trim(),
                priority: parseInt(priorityInput.value),
                notes: notesInput.value.trim(),
                completed: false,
                timestamp: new Date().toISOString()
            };

            if (item.title && item.priority >= 1 && item.priority <= 100) {
                if (!state.items[state.currentCategory]) {
                    state.items[state.currentCategory] = [];
                }
                state.items[state.currentCategory].push(item);
                saveState();
                renderChecklist();
                updateProgress();
                closeModal('itemModal');

                // Clear inputs
                titleInput.value = '';
                priorityInput.value = '';
                notesInput.value = '';
            }
        }

        // Toggle item completion
        function toggleItem(itemId) {
            const items = state.items[state.currentCategory];
            const item = items.find(i => i.id === itemId);
            if (item) {
                item.completed = !item.completed;
                saveState();
                updateProgress();
                calculateScore();
            }
        }

        // Update progress bar
        function updateProgress() {
            const items = state.items[state.currentCategory] || [];
            const total = items.length;
            const completed = items.filter(item => item.completed).length;
            const percentage = total === 0 ? 0 : (completed / total) * 100;

            const progressBar = document.getElementById('progressBar');
            progressBar.style.width = `${percentage}%`;
        }

        // Calculate and update total score
        function calculateScore() {
            let totalScore = 0;
            Object.values(state.items).forEach(categoryItems => {
                categoryItems.forEach(item => {
                    if (item.completed) {
                        totalScore += item.priority;
                    }
                });
            });

            document.getElementById('totalScore').textContent = totalScore;
        }

        // Export data as JSON
        function exportData() {
            const dataStr = JSON.stringify(state, null, 2);
            const blob = new Blob([dataStr], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = `forex-checklist-${new Date().toISOString().split('T')[0]}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        // Save state to localStorage
        function saveState() {
            localStorage.setItem('forexChecklistState', JSON.stringify(state));
        }

        // Search functionality
        document.getElementById('searchInput').addEventListener('input', (e) => {
            renderChecklist();
        });

        // Initialize app
        document.addEventListener('DOMContentLoaded', initializeApp);

        // Close modals when clicking outside
        window.onclick = function(event) {
            const modals = document.getElementsByClassName('modal');
            for (let modal of modals) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        }

        // Additional features for data analysis
        function getAnalytics() {
            const analytics = {
                totalItems: 0,
                completedItems: 0,
                averagePriority: 0,
                categoryCompletion: {},
                timeAnalysis: {
                    lastUpdated: null,
                    averageCompletionTime: 0
                }
            };

            Object.entries(state.items).forEach(([category, items]) => {
                analytics.totalItems += items.length;
                const completed = items.filter(item => item.completed).length;
                analytics.completedItems += completed;
                analytics.categoryCompletion[category] = {
                    total: items.length,
                    completed: completed,
                    percentage: items.length ? (completed / items.length * 100) : 0
                };

                const priorities = items.map(item => item.priority);
                if (priorities.length) {
                    analytics.averagePriority += priorities.reduce((a, b) => a + b) / priorities.length;
                }
            });

            analytics.averagePriority = analytics.averagePriority / Object.keys(state.items).length;
            return analytics;
        }

        // Function to generate performance reports
        function generateReport() {
            const analytics = getAnalytics();
            const report = {
                timestamp: new Date().toISOString(),
                summary: {
                    totalItems: analytics.totalItems,
                    completedItems: analytics.completedItems,
                    completionRate: (analytics.completedItems / analytics.totalItems * 100).toFixed(2) + '%',
                    averagePriority: analytics.averagePriority.toFixed(2)
                },
                categoryBreakdown: analytics.categoryCompletion
            };

            return report;
        }

        // Error handling function
        function handleError(error, context) {
            console.error(`Error in ${context}:`, error);
            // You could add user notification here
        }

        // Add event listeners for error handling
        window.addEventListener('error', (event) => {
            handleError(event.error, 'window');
        });

        // Autosave feature
        let autosaveTimeout;
        function setupAutosave() {
            clearTimeout(autosaveTimeout);
            autosaveTimeout = setTimeout(() => {
                saveState();
            }, 1000);
        }

        // Initialize the application with error handling
        try {
            initializeApp();
        } catch (error) {
            handleError(error, 'initialization');
        }

// Add data import functionality
        function importData(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        const importedState = JSON.parse(e.target.result);
                        // Validate imported data
                        if (validateImportedData(importedState)) {
                            state = importedState;
                            saveState();
                            renderCategories();
                            selectCategory(state.categories[0]);
                            showNotification('Data imported successfully!', 'success');
                        } else {
                            showNotification('Invalid data format', 'error');
                        }
                    } catch (error) {
                        showNotification('Error importing data', 'error');
                        handleError(error, 'data import');
                    }
                };
                reader.readAsText(file);
            }
        }

        // Validate imported data structure
        function validateImportedData(data) {
            return data.categories && 
                   Array.isArray(data.categories) && 
                   data.items &&
                   typeof data.items === 'object';
        }

        // Notification system
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = `
                <div class="notification-content">
                    <span>${message}</span>
                    <button onclick="this.parentElement.parentElement.remove()">×</button>
                </div>
            `;
            document.body.appendChild(notification);
            setTimeout(() => notification.remove(), 5000);
        }

        // Add keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            if (e.ctrlKey || e.metaKey) {
                switch(e.key) {
                    case 's':
                        e.preventDefault();
                        saveState();
                        showNotification('Changes saved!', 'success');
                        break;
                    case 'e':
                        e.preventDefault();
                        exportData();
                        break;
                    case 'f':
                        e.preventDefault();
                        document.getElementById('searchInput').focus();
                        break;
                }
            }
        });

        // Add data backup functionality
        function createBackup() {
            const backup = {
                data: state,
                timestamp: new Date().toISOString(),
                version: '1.0'
            };
            
            const backups = JSON.parse(localStorage.getItem('forexChecklistBackups') || '[]');
            backups.push(backup);
            // Keep only last 5 backups
            if (backups.length > 5) backups.shift();
            localStorage.setItem('forexChecklistBackups', JSON.stringify(backups));
            showNotification('Backup created successfully!', 'success');
        }

        // Restore from backup
        function restoreFromBackup(backupIndex) {
            const backups = JSON.parse(localStorage.getItem('forexChecklistBackups') || '[]');
            if (backups[backupIndex]) {
                state = backups[backupIndex].data;
                saveState();
                renderCategories();
                selectCategory(state.categories[0]);
                showNotification('Backup restored successfully!', 'success');
            }
        }

        // Add statistics dashboard
        function updateStatisticsDashboard() {
            const analytics = getAnalytics();
            const stats = document.getElementById('statisticsDashboard');
            if (stats) {
                stats.innerHTML = `
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-title">Completion Rate</div>
                            <div class="stat-value">${(analytics.completedItems / analytics.totalItems * 100).toFixed(1)}%</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-title">Total Items</div>
                            <div class="stat-value">${analytics.totalItems}</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-title">Average Priority</div>
                            <div class="stat-value">${analytics.averagePriority.toFixed(1)}</div>
                        </div>
                    </div>
                `;
            }
        }

        // Add drag and drop reordering for items
        function initializeDragAndDrop() {
            const container = document.getElementById('checklistContainer');
            let draggedItem = null;

            container.addEventListener('dragstart', (e) => {
                draggedItem = e.target;
                e.target.style.opacity = '0.5';
            });

            container.addEventListener('dragend', (e) => {
                e.target.style.opacity = '1';
                draggedItem = null;
            });

            container.addEventListener('dragover', (e) => {
                e.preventDefault();
                const afterElement = getDragAfterElement(container, e.clientY);
                const draggable = document.querySelector('.dragging');
                if (afterElement == null) {
                    container.appendChild(draggable);
                } else {
                    container.insertBefore(draggable, afterElement);
                }
            });
        }

        function getDragAfterElement(container, y) {
            const draggableElements = [...container.querySelectorAll('.checklist-item:not(.dragging)')];

            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = y - box.top - box.height / 2;
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        // Add dark mode support
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
            const isDarkMode = document.body.classList.contains('dark-mode');
            localStorage.setItem('darkMode', isDarkMode);
            showNotification(`Dark mode ${isDarkMode ? 'enabled' : 'disabled'}`, 'info');
        }

        // Initialize dark mode from preference
        function initializeDarkMode() {
            const isDarkMode = localStorage.getItem('darkMode') === 'true';
            if (isDarkMode) {
                document.body.classList.add('dark-mode');
            }
        }

        // Add item editing functionality
        function editItem(itemId) {
            const items = state.items[state.currentCategory];
            const item = items.find(i => i.id === itemId);
            if (item) {
                document.getElementById('itemTitle').value = item.title;
                document.getElementById('itemPriority').value = item.priority;
                document.getElementById('itemNotes').value = item.notes;
                
                // Change modal to edit mode
                const modal = document.getElementById('itemModal');
                modal.querySelector('h2').textContent = 'Edit Item';
                modal.querySelector('.btn-primary').onclick = () => updateItem(itemId);
                showModal('itemModal');
            }
        }

        function updateItem(itemId) {
            const items = state.items[state.currentCategory];
            const index = items.findIndex(i => i.id === itemId);
            if (index !== -1) {
                items[index] = {
                    ...items[index],
                    title: document.getElementById('itemTitle').value,
                    priority: parseInt(document.getElementById('itemPriority').value),
                    notes: document.getElementById('itemNotes').value,
                    lastModified: new Date().toISOString()
                };
                saveState();
                renderChecklist();
                closeModal('itemModal');
                showNotification('Item updated successfully!', 'success');
            }
        }

        // Add category editing functionality
        function editCategory(categoryName) {
            const index = state.categories.indexOf(categoryName);
            if (index !== -1) {
                document.getElementById('categoryName').value = categoryName;
                const modal = document.getElementById('categoryModal');
                modal.querySelector('h2').textContent = 'Edit Category';
                modal.querySelector('.btn-primary').onclick = () => updateCategory(index);
                showModal('categoryModal');
            }
        }

        function updateCategory(index) {
            const newName = document.getElementById('categoryName').value.trim();
            if (newName && !state.categories.includes(newName)) {
                const oldName = state.categories[index];
                state.categories[index] = newName;
                state.items[newName] = state.items[oldName];
                delete state.items[oldName];
                saveState();
                renderCategories();
                selectCategory(newName);
                closeModal('categoryModal');
                showNotification('Category updated successfully!', 'success');
            }
        }

        // Initialize all features
        document.addEventListener('DOMContentLoaded', () => {
            initializeApp();
            initializeDarkMode();
            initializeDragAndDrop();
            updateStatisticsDashboard();
            
            // Add event listener for file import
            const importInput = document.createElement('input');
            importInput.type = 'file';
            importInput.accept = '.json';
            importInput.style.display = 'none';
            importInput.addEventListener('change', importData);
            document.body.appendChild(importInput);
            
            // Create backup periodically
            setInterval(createBackup, 30 * 60 * 1000); // Every 30 minutes
        });

        // Add these styles to the existing CSS
        const additionalStyles = `
            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px;
                border-radius: 4px;
                background: white;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                z-index: 1000;
            }

            .notification-success {
                background: #4CAF50;
                color: white;
            }

            .notification-error {
                background: #f44336;
                color: white;
            }

            .notification-info {
                background: #2196F3;
                color: white;
            }

            .dark-mode {
                background-color: #1a1a1a;
                color: #ffffff;
            }

            .dark-mode .checklist-container,
            .dark-mode .modal-content,
            .dark-mode .score-display {
                background-color: #2d2d2d;
                color: #ffffff;
            }

            .stats-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 20px;
                margin-bottom: 20px;
            }

            .stat-card {
                background: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .dark-mode .stat-card {
                background: #2d2d2d;
            }

            .stat-title {
                font-size: 0.9rem;
                color: #666;
                margin-bottom: 5px;
            }

            .stat-value {
                font-size: 1.5rem;
                font-weight: bold;
            }
        `;

        // Add the styles to the document
        const styleSheet = document.createElement('style');
        styleSheet.textContent = additionalStyles;
        document.head.appendChild(stylesheet);     NOW PROVIDE THE FULL CODE, DO NOT FORGET ANYTHING AND PROVIDE FULLY