أنت خبير متمرس في برمجة MQL5 ولديك معرفة عميقة بجميع جوانب تطوير المستشارين الخبراء (Expert Advisors)، المؤشرات (Indicators)، والسكريبتات (Scripts) لمنصة MetaTrader 5. مهمتك هي تحليل ملفات أكواد MQL5 المرفوعة بدقة متناهية، ثم بناء تطبيق شامل لتصحيح الأخطاء البرمجية وتجميع الأكواد.

**المرحلة الأولى - التحليل العميق:**
عند استلام ملفات MQL5، يجب عليك:
1. فحص بنية الكود بالكامل وتحديد الأنماط البرمجية المستخدمة
2. تحليل الدوال المخصصة (Custom Functions) والمكتبات المستوردة
3. دراسة معالجة الأخطاء (Error Handling) وإدارة الذاكرة
4. فهم منطق التداول والشروط المطبقة
5. تحديد التبعيات (Dependencies) والمتطلبات الخارجية

**المرحلة الثانية - بناء التطبيق:**
قم بإنشاء تطبيق متكامل يتضمن الوظائف التالية:

**وظائف كشف وتصحيح الأخطاء:**
- كشف الأخطاء النحوية (Syntax Errors)
- كشف الأخطاء المنطقية (Logic Errors)
- كشف أخطاء الذاكرة وتسرب الموارد (Memory Leaks)
- التحقق من صحة استدعاءات الدوال والمعاملات
- كشف الأخطاء الشائعة في التعامل مع OrderSend وPositionSelect
- التحقق من صحة استخدام المؤشرات الفنية

**وظائف التجميع والبناء:**
- تجميع الكود وإنشاء ملفات .ex5 القابلة للتنفيذ
- إدارة المكتبات والملفات المضمنة (#include)
- التحقق من التوافق مع إصدارات MQL5 المختلفة
- تحسين الكود وإزالة التكرارات

**وظائف إضافية شاملة:**
- توثيق الكود تلقائياً مع شرح الدوال
- اقتراح تحسينات للأداء والكفاءة
- فحص الأمان والثغرات المحتملة
- التحقق من الامتثال لمعايير MQL5 القياسية
- إنشاء تقارير تفصيلية عن جودة الكود

**متطلبات التطبيق:**
- واجهة سهلة الاستخدام لرفع الملفات
- عرض الأخطاء مع أرقام الأسطر والشرح التفصيلي
- إمكانية تصحيح الأخطاء تلقائياً أو يدوياً
- دعم جميع أنواع ملفات MQL5: .mq5, .mqh, .ex5
- نظام سجلات (Logging) لتتبع عمليات التصحيح

**التنفيذ:**
ابدأ فوراً بكتابة الكود الكامل للتطبيق باستخدام لغة برمجة مناسبة (Python موصى به) مع جميع المكتبات اللازمة. يجب أن يكون التطبيق جاهزاً للاستخدام الفوري ويتضمن:
- الكود المصدري الكامل
- تعليمات التثبيت والإعداد
- أمثلة على الاستخدام
- ملفات الاختبار

قدم الكود الكامل والجاهز للتشغيل مباشرة دون اختصارات أو ملخصات.


A Comprehensive Technical Report on the MQL5 Programming Language for Advanced Algorithmic Trading
Section 1: Foundational Architecture of the MQL5 Language
MetaQuotes Language 5 (MQL5) is a high-level, object-oriented programming language engineered specifically for the development of automated trading strategies, custom technical indicators, and other analytical tools within the MetaTrader 5 trading platform. Its architecture is deliberately rooted in the concepts of the C++ programming language, a strategic choice that provides a familiar and powerful foundation for a vast community of developers. However, MQL5 is not merely a C++ clone; it is a domain-specific language, meticulously adapted for the rigors of financial markets. This adaptation involves both the inclusion of specialized trading functionalities and the intentional omission of certain C++ features to enhance stability and security in a mission-critical environment. A thorough understanding of this foundational architecture—its syntax, data management philosophy, and operational logic—is the prerequisite for mastering the development of sophisticated and reliable algorithmic trading systems.
1.1 Core Syntax and C++ Heritage
The syntax of MQL5 is designed to be exceptionally close to that of C++, which significantly lowers the barrier to entry for programmers proficient in modern, object-oriented languages. This shared heritage means that fundamental constructs such as variable declaration, function definition, control flow statements (
if-else, for, while, switch), and the use of operators are immediately recognizable. The basic structure of an MQL5 program is composed of a sequence of operators, which are separated by semicolons, and can be grouped into blocks using curly braces
{}. This syntactic familiarity allows developers to leverage existing knowledge and quickly become productive in the MQL5 environment.
However, the similarity is not absolute. MetaQuotes has made deliberate architectural decisions to diverge from C++ in several key areas, primarily to create a more secure and stable programming environment tailored for financial applications. These differences represent a fundamental design philosophy: a trade-off that favors safety and predictability over the low-level power that can introduce instability. The most significant deviations from C++ include :
• No Address Arithmetic: MQL5 does not support pointers or direct memory manipulation. This is a critical security feature that eliminates an entire class of common and severe programming errors, such as buffer overflows and memory corruption. In a context where a program crash can lead to direct financial loss, this restriction is a cornerstone of the platform's stability.
• No goto Operator: The goto statement is excluded to promote structured programming practices and prevent the creation of "spaghetti code," which is difficult to read, debug, and maintain.
• No Anonymous Enumerations: All enumerations in MQL5 must be declared with a name, enforcing clearer and more self-documenting code.
• No Multiple Inheritance: MQL5 classes can only inherit from a single base class. This simplifies the inheritance hierarchy and avoids the complexities and potential ambiguities associated with the "diamond problem" in multiple inheritance scenarios.
These limitations are not shortcomings but rather intentional design choices that fortify the language against common sources of failure. By abstracting away low-level memory management and enforcing stricter structural rules, MQL5 provides a robust "sandbox" where developers can focus on trading logic without the constant risk of system-level errors that could compromise a live trading account. The fundamental building blocks of MQL5 syntax, such as comments, identifiers for naming variables and functions, and a set of reserved words, are all defined in the official documentation and align closely with C++ standards.
1.2 Data Types and Structures
MQL5 is a strongly-typed language, meaning that every variable must be declared with a specific data type before use. This enforcement of type safety is crucial for ensuring the precision and correctness of financial calculations. The language provides a comprehensive set of built-in data types, which can be broadly classified into basic (or primitive) types and complex (or compound) types.
The basic types cover a wide range of numeric, logical, and textual data, including specialized types designed to simplify common tasks in trading programming. Any program operates on data, and the efficiency of this operation depends on the correct choice of type. Integer data is processed fastest, while double-precision floating-point numbers may require a special co-processor.
A significant evolution in MQL5 is the introduction of native types for advanced mathematical and quantitative analysis: complex, vector, and matrix. The inclusion of these types signals a strategic expansion of MQL5's capabilities beyond simple trade automation. It positions the language as a self-contained platform for developing and executing complex quantitative models, such as those used in machine learning and statistical arbitrage, directly within the low-latency environment of the trading terminal.
Table 1: MQL5 Built-in Data Types
Type Size (bytes) Description Primary Use Case in Trading
char 1 Single-byte character or signed integer Low-level data integration, compact integer storage
uchar 1 Single-byte character or unsigned integer Representing raw byte data
short 2 Two-byte character or signed integer Storing integer values with a smaller range
ushort 2 Two-byte character or unsigned integer Storing positive integer values, character codes
int 4 Signed integer Loop counters, order tickets, bar counts, error codes
uint 4 Unsigned integer Storing positive integer values like color representations
long 8 Signed 64-bit integer High-precision tick volumes, timestamps (e.g., in milliseconds)
ulong 8 Unsigned 64-bit integer High-precision positive values, datetime representations
float 4 Single-precision floating-point number General-purpose floating-point math where high precision is not critical
double 8 Double-precision floating-point number Storing all price data (Open, High, Low, Close), indicator values, account balance
bool 1 Logical value (true or false) Storing state, flags, and results of conditional checks
string 10+ Sequence of characters (Unicode) Symbol names, comments, alerts, file paths, object names
color 4 Color representation (stored as uint) Setting colors for indicators, graphical objects, and chart elements
datetime 8 Date and time (stored as ulong seconds since 1970.01.01) Storing bar times, order expiration, time-based conditions
enum 4 Enumeration (user-defined set of named integer constants) Creating readable and maintainable code for pred

README.md

@@ -1,10 +1,13 @@
 ---
-title: Mql5 Code Wizard Pro
-emoji: 🌖
-colorFrom: green
+title: MQL5 Code Wizard Pro ‍♂️
+colorFrom: red
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,252 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MQL5 Code Wizard Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              },
+              secondary: {
+                50: '#f5f3ff',
+                100: '#ede9fe',
+                200: '#ddd6fe',
+                300: '#c4b5fd',
+                400: '#a78bfa',
+                500: '#8b5cf6',
+                600: '#7c3aed',
+                700: '#6d28d9',
+                800: '#5b21b6',
+                900: '#4c1d95',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 h-full">
+    <div class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-primary-700 text-white shadow-lg">
+            <div class="container mx-auto px-4 py-6">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="code" class="w-8 h-8"></i>
+                        <h1 class="text-2xl font-bold">MQL5 Code Wizard Pro</h1>
+                    </div>
+                    <nav class="hidden md:flex space-x-6">
+                        <a href="#" class="hover:text-primary-200 transition">Home</a>
+                        <a href="#" class="hover:text-primary-200 transition">Features</a>
+                        <a href="#" class="hover:text-primary-200 transition">Documentation</a>
+                        <a href="#" class="hover:text-primary-200 transition">Community</a>
+                    </nav>
+                    <button class="md:hidden">
+                        <i data-feather="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-grow container mx-auto px-4 py-8">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <!-- Left Sidebar -->
+                <div class="lg:col-span-1">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
+                        <h2 class="text-xl font-semibold mb-4 flex items-center">
+                            <i data-feather="file-text" class="w-5 h-5 mr-2"></i>
+                            File Explorer
+                        </h2>
+                        <div class="space-y-2">
+                            <div class="flex items-center text-primary-600 dark:text-primary-400">
+                                <i data-feather="folder" class="w-4 h-4 mr-2"></i>
+                                <span>Expert Advisors</span>
+                            </div>
+                            <div class="flex items-center text-primary-600 dark:text-primary-400">
+                                <i data-feather="folder" class="w-4 h-4 mr-2"></i>
+                                <span>Indicators</span>
+                            </div>
+                            <div class="flex items-center text-primary-600 dark:text-primary-400">
+                                <i data-feather="folder" class="w-4 h-4 mr-2"></i>
+                                <span>Scripts</span>
+                            </div>
+                            <div class="flex items-center text-primary-600 dark:text-primary-400">
+                                <i data-feather="folder" class="w-4 h-4 mr-2"></i>
+                                <span>Include Files</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
+                        <h2 class="text-xl font-semibold mb-4 flex items-center">
+                            <i data-feather="tool" class="w-5 h-5 mr-2"></i>
+                            Tools
+                        </h2>
+                        <div class="space-y-3">
+                            <button class="w-full flex items-center px-4 py-2 bg-primary-100 dark:bg-gray-700 hover:bg-primary-200 dark:hover:bg-gray-600 rounded transition">
+                                <i data-feather="code" class="w-4 h-4 mr-2"></i>
+                                Code Generator
+                            </button>
+                            <button class="w-full flex items-center px-4 py-2 bg-primary-100 dark:bg-gray-700 hover:bg-primary-200 dark:hover:bg-gray-600 rounded transition">
+                                <i data-feather="search" class="w-4 h-4 mr-2"></i>
+                                Debugger
+                            </button>
+                            <button class="w-full flex items-center px-4 py-2 bg-primary-100 dark:bg-gray-700 hover:bg-primary-200 dark:hover:bg-gray-600 rounded transition">
+                                <i data-feather="bar-chart-2" class="w-4 h-4 mr-2"></i>
+                                Strategy Tester
+                            </button>
+                            <button class="w-full flex items-center px-4 py-2 bg-primary-100 dark:bg-gray-700 hover:bg-primary-200 dark:hover:bg-gray-600 rounded transition">
+                                <i data-feather="settings" class="w-4 h-4 mr-2"></i>
+                                Settings
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Main Editor Area -->
+                <div class="lg:col-span-2">
+                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                        <div class="bg-gray-100 dark:bg-gray-700 px-4 py-2 flex items-center justify-between">
+                            <div class="flex items-center space-x-2">
+                                <i data-feather="file" class="w-4 h-4"></i>
+                                <span class="font-medium">ExpertAdvisor.mq5</span>
+                            </div>
+                            <div class="flex space-x-2">
+                                <button class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded">
+                                    <i data-feather="minimize-2" class="w-4 h-4"></i>
+                                </button>
+                                <button class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded">
+                                    <i data-feather="maximize-2" class="w-4 h-4"></i>
+                                </button>
+                                <button class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded">
+                                    <i data-feather="x" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="p-4">
+                            <div class="bg-gray-900 text-gray-300 p-4 rounded-lg font-mono text-sm overflow-x-auto">
+                                <pre><code class="language-mql5">//+------------------------------------------------------------------+
+//| Expert Advisor Template                                          |
+//+------------------------------------------------------------------+
+#include &lt;Trade\Trade.mqh&gt;
+
+input int FastMA_Period = 10;
+input int SlowMA_Period = 20;
+input double LotSize = 0.1;
+input int StopLoss = 50;
+input int TakeProfit = 100;
+
+CTrade trade;
+
+int OnInit()
+{
+   // Initialization code
+   return(INIT_SUCCEEDED);
+}
+
+void OnDeinit(const int reason)
+{
+   // Cleanup code
+}
+
+void OnTick()
+{
+   // Trading logic here
+   double fastMA = iMA(NULL, 0, FastMA_Period, 0, MODE_SMA, PRICE_CLOSE, 0);
+   double slowMA = iMA(NULL, 0, SlowMA_Period, 0, MODE_SMA, PRICE_CLOSE, 0);
+   
+   if(fastMA > slowMA)
+   {
+      trade.Buy(LotSize, NULL, 0, 0, StopLoss, TakeProfit, "Buy Order");
+   }
+   else if(fastMA < slowMA)
+   {
+      trade.Sell(LotSize, NULL, 0, 0, StopLoss, TakeProfit, "Sell Order");
+   }
+}</code></pre>
+                            </div>
+                        </div>
+                        <div class="bg-gray-100 dark:bg-gray-700 px-4 py-2 flex justify-end space-x-2">
+                            <button class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded flex items-center">
+                                <i data-feather="play" class="w-4 h-4 mr-2"></i>
+                                Compile & Run
+                            </button>
+                            <button class="px-4 py-2 bg-secondary-600 hover:bg-secondary-700 text-white rounded flex items-center">
+                                <i data-feather="save" class="w-4 h-4 mr-2"></i>
+                                Save
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
+                        <div class="bg-gray-100 dark:bg-gray-700 px-4 py-2">
+                            <h3 class="font-medium flex items-center">
+                                <i data-feather="terminal" class="w-4 h-4 mr-2"></i>
+                                Output Console
+                            </h3>
+                        </div>
+                        <div class="p-4">
+                            <div class="bg-gray-900 text-gray-300 p-4 rounded-lg font-mono text-sm h-40 overflow-y-auto">
+                                <div class="text-green-400">> Initializing Expert Advisor...</div>
+                                <div class="text-green-400">> Indicators loaded successfully</div>
+                                <div class="text-blue-400">> Waiting for new tick...</div>
+                                <div class="text-yellow-400">> New tick received at 2023.05.15 14:30:45</div>
+                                <div class="text-green-400">> Buy order executed at 1.2345</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-gray-800 text-white py-6">
+            <div class="container mx-auto px-4">
+                <div class="flex flex-col md:flex-row justify-between items-center">
+                    <div class="mb-4 md:mb-0">
+                        <p class="flex items-center">
+                            <i data-feather="code" class="w-5 h-5 mr-2"></i>
+                            MQL5 Code Wizard Pro © 2023
+                        </p>
+                    </div>
+                    <div class="flex space-x-4">
+                        <a href="#" class="hover:text-primary-300 transition">
+                            <i data-feather="github" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="hover:text-primary-300 transition">
+                            <i data-feather="twitter" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="hover:text-primary-300 transition">
+                            <i data-feather="linkedin" class="w-5 h-5"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Toggle dark mode
+    const darkModeToggle = document.createElement('button');
+    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
+    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
+    document.body.appendChild(darkModeToggle);
+    
+    darkModeToggle.addEventListener('click', function() {
+        document.documentElement.classList.toggle('dark');
+        const icon = darkModeToggle.querySelector('i');
+        if (document.documentElement.classList.contains('dark')) {
+            icon.setAttribute('data-feather', 'sun');
+        } else {
+            icon.setAttribute('data-feather', 'moon');
+        }
+        feather.replace();
+    });
+
+    // Simulate code editor functionality
+    const compileButton = document.querySelector('button:has(i[data-feather="play"])');
+    if (compileButton) {
+        compileButton.addEventListener('click', function() {
+            const outputConsole = document.querySelector('.bg-gray-900.text-gray-300');
+            if (outputConsole) {
+                const newEntry = document.createElement('div');
+                newEntry.className = 'text-green-400';
+                newEntry.textContent = '> Code compiled successfully!';
+                outputConsole.appendChild(newEntry);
+                outputConsole.scrollTop = outputConsole.scrollHeight;
+            }
+        });
+    }
+
+    // Mobile menu toggle
+    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
+    if (mobileMenuButton) {
+        mobileMenuButton.addEventListener('click', function() {
+            // This would toggle a mobile menu in a real implementation
+            alert('Mobile menu would open here in a full implementation');
+        });
+    }
+
+    // Initialize tooltips
+    const tooltipElements = document.querySelectorAll('[data-tooltip]');
+    tooltipElements.forEach(el => {
+        el.addEventListener('mouseenter', function() {
+            // Tooltip display logic would go here
+        });
+    });
+
+    // Re-initialize feather icons after dynamic content changes
+    feather.replace();
+});
+
+// Syntax highlighting for MQL5 code
+function highlightMQL5Code() {
+    const codeBlocks = document.querySelectorAll('code.language-mql5');
+    codeBlocks.forEach(block => {
+        const code = block.textContent;
+        let highlighted = code;
+        
+        // Highlight keywords
+        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
+                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
+        keywords.forEach(keyword => {
+            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
+            highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`);
+        });
+        
+        // Highlight functions
+        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
+        functions.forEach(func => {
+            const regex = new RegExp(`\\b${func}\\b`, 'g');
+            highlighted = highlighted.replace(regex, `<span

style.css

@@ -1,28 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+pre, code {
+    font-family: 'Fira Code', monospace;
+}
+
+/* Dark mode transition */
+.dark pre, .dark code {
+    background-color: #1a202c;
+}
+
+/* Syntax highlighting for MQL5 code */
+.language-mql5 .keyword {
+    color: #f472b6; /* Pink for keywords */
+}
+
+.language-mql5 .function {
+    color: #60a5fa; /* Blue for functions */
+}
+
+.language-mql5 .comment {
+    color: #6b7280; /* Gray for comments */
+    font-style: italic;
+}
+
+.language-mql5 .string {
+    color: #34d399; /* Green for strings */
+}
+
+.language-mql5 .number {
+    color: #fbbf24; /* Yellow for numbers */
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.dark ::-webkit-scrollbar-track {
+    background: #2d3748;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark ::-webkit-scrollbar-thumb {
+    background: #4a5568;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #718096;
 }
+
+/* Animation for buttons */
+button {
+    transition: all 0.2s ease-in-out;
+}
+
+/* Tooltip styles */
+[data-tooltip] {
+    position: relative;
+    cursor: pointer;
+}
+
+[data-tooltip]:hover::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #333;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 10;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .editor-container {
+        flex-direction: column;
+    }
+    
+    .sidebar {
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+}