bạn liên quan gì đến DeepSeek?

README.md

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 📉
-colorFrom: red
-colorTo: red
+title: undefined
+colorFrom: blue
+colorTo: gray
+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).
+      

components/navbar.js

@@ -0,0 +1,147 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
+                    backdrop-filter: blur(10px);
+                    padding: 0.75rem 1.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 50;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                }
+                .logo {
+                    color: white;
+                    font-weight: 600;
+                    font-size: 1.25rem;
+                    display: flex;
+                    align-items: center;
+                }
+                .logo i {
+                    margin-right: 0.75rem;
+                }
+                .right-section {
+                    display: flex;
+                    align-items: center;
+                    gap: 1.5rem;
+                }
+                .user-menu {
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+                    position: relative;
+                }
+                .avatar {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 50%;
+                    object-fit: cover;
+                    border: 2px solid rgba(255, 255, 255, 0.2);
+                }
+                .dropdown {
+                    position: absolute;
+                    top: 100%;
+                    right: 0;
+                    background: white;
+                    min-width: 12rem;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    padding: 0.5rem 0;
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: translateY(0.5rem);
+                    transition: all 0.2s ease;
+                    z-index: 10;
+                }
+                .dark .dropdown {
+                    background: #1f2937;
+                }
+                .dropdown.active {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: translateY(0);
+                }
+                .dropdown-item {
+                    padding: 0.5rem 1rem;
+                    color: #4b5563;
+                    display: flex;
+                    align-items: center;
+                }
+                .dark .dropdown-item {
+                    color: #d1d5db;
+                }
+                .dropdown-item:hover {
+                    background: #f3f4f6;
+                }
+                .dark .dropdown-item:hover {
+                    background: #374151;
+                }
+                .dropdown-item i {
+                    margin-right: 0.75rem;
+                    width: 1rem;
+                }
+                .notifications {
+                    position: relative;
+                }
+                .badge {
+                    position: absolute;
+                    top: -0.25rem;
+                    right: -0.25rem;
+                    background: #ef4444;
+                    color: white;
+                    border-radius: 50%;
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 0.75rem;
+                    font-weight: 600;
+                }
+                .menu-button {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .menu-button {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="logo">
+                    <i data-feather="activity"></i>
+                    <span>DashVista</span>
+                </div>
+                <div class="right-section">
+                    <div class="notifications">
+                        <i data-feather="bell"></i>
+                        <span class="badge">3</span>
+                    </div>
+                    <div class="user-menu">
+                        <img src="http://static.photos/people/200x200/1" alt="User" class="avatar">
+                        <div class="dropdown">
+                            <a href="#" class="dropdown-item">
+                                <i data-feather="user"></i>
+                                <span>Profile</span>
+                            </a>
+                            <a href="#" class="dropdown-item">
+                                <i data-feather="settings"></i>
+                                <span>Settings</span>
+                            </a>
+                            <a href="#" class="dropdown-item">
+                                <i data-feather="log-out"></i>
+                                <span>Logout</span>
+                            </a>
+                        </div>
+{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."}

index.html

@@ -1,19 +1,324 @@
-<!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="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DashVista | Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        },
+                        secondary: {
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <custom-sidebar></custom-sidebar>
+    
+    <main class="lg:ml-64 pt-16 px-4">
+        <div class="py-6">
+            <div class="max-w-7xl mx-auto">
+                <!-- Header -->
+                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
+                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Dashboard Overview</h1>
+                    <div class="flex items-center space-x-4 mt-4 md:mt-0">
+                        <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700">
+                            <i data-feather="moon" class="hidden dark:block text-gray-300"></i>
+                            <i data-feather="sun" class="dark:hidden text-gray-500"></i>
+                        </button>
+                        <div class="relative">
+                            <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-none focus:ring-2 focus:ring-primary-500">
+                            <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 dark:text-gray-400"></i>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-primary-500">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
+                                <p class="text-2xl font-semibold text-gray-900 dark:text-white">$45,231</p>
+                                <p class="text-xs text-green-500 mt-1">+12.5% from last month</p>
+                            </div>
+                            <div class="p-3 rounded-lg bg-primary-100 dark:bg-primary-900/50">
+                                <i data-feather="dollar-sign" class="text-primary-500 dark:text-primary-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-secondary-500">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Users</p>
+                                <p class="text-2xl font-semibold text-gray-900 dark:text-white">2,431</p>
+                                <p class="text-xs text-green-500 mt-1">+8.3% from last month</p>
+                            </div>
+                            <div class="p-3 rounded-lg bg-secondary-100 dark:bg-secondary-900/50">
+                                <i data-feather="users" class="text-secondary-500 dark:text-secondary-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-green-500">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">New Orders</p>
+                                <p class="text-2xl font-semibold text-gray-900 dark:text-white">1,253</p>
+                                <p class="text-xs text-green-500 mt-1">+3.2% from last month</p>
+                            </div>
+                            <div class="p-3 rounded-lg bg-green-100 dark:bg-green-900/50">
+                                <i data-feather="shopping-cart" class="text-green-500 dark:text-green-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 border-l-4 border-yellow-500">
+                        <div class="flex items-center justify-between">
+                            <div>
+                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pending Tasks</p>
+                                <p class="text-2xl font-semibold text-gray-900 dark:text-white">24</p>
+                                <p class="text-xs text-red-500 mt-1">-2.5% from last month</p>
+                            </div>
+                            <div class="p-3 rounded-lg bg-yellow-100 dark:bg-yellow-900/50">
+                                <i data-feather="clock" class="text-yellow-500 dark:text-yellow-300"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts Row -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+                    <!-- Main Chart -->
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
+                        <div class="flex items-center justify-between mb-4">
+                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Revenue Overview</h2>
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 text-xs rounded-lg bg-primary-500 text-white">Monthly</button>
+                                <button class="px-3 py-1 text-xs rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">Weekly</button>
+                            </div>
+                        </div>
+                        <div class="h-80">
+                            <canvas id="mainChart"></canvas>
+                        </div>
+                    </div>
+                    
+                    <!-- Pie Chart -->
+                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
+                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Traffic Sources</h2>
+                        <div class="h-80">
+                            <canvas id="pieChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Recent Activities -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-hidden mb-8">
+                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Activities</h2>
+                    </div>
+                    <div class="divide-y divide-gray-200 dark:divide-gray-700">
+                        <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                            <div class="flex items-start">
+                                <div class="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/50 mr-4">
+                                    <i data-feather="dollar-sign" class="text-primary-500 dark:text-primary-300"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">New order #4321</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">Customer placed a new order for $129.99</p>
+                                    <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                            <div class="flex items-start">
+                                <div class="p-2 rounded-lg bg-green-100 dark:bg-green-900/50 mr-4">
+                                    <i data-feather="user-plus" class="text-green-500 dark:text-green-300"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">New user registered</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">John Doe created a new account</p>
+                                    <p class="text-xs text-gray-400 mt-1">15 minutes ago</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                            <div class="flex items-start">
+                                <div class="p-2 rounded-lg bg-secondary-100 dark:bg-secondary-900/50 mr-4">
+                                    <i data-feather="message-square" class="text-secondary-500 dark:text-secondary-300"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">New message</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">Sarah Johnson sent a new message</p>
+                                    <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                            <div class="flex items-start">
+                                <div class="p-2 rounded-lg bg-yellow-100 dark:bg-yellow-900/50 mr-4">
+                                    <i data-feather="alert-circle" class="text-yellow-500 dark:text-yellow-300"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <p class="text-sm font-medium text-gray-900 dark:text-white">Server alert</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">Disk usage reached 85%</p>
+                                    <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-center">
+                        <a href="#" class="text-sm font-medium text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">View all activities</a>
+                    </div>
+                </div>
+
+                <!-- Quick Actions -->
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                    <button class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <div class="p-3 rounded-lg bg-primary-100 dark:bg-primary-900/50 mb-2">
+                            <i data-feather="plus" class="text-primary-500 dark:text-primary-300"></i>
+                        </div>
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">Add Project</span>
+                    </button>
+                    <button class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <div class="p-3 rounded-lg bg-green-100 dark:bg-green-900/50 mb-2">
+                            <i data-feather="upload" class="text-green-500 dark:text-green-300"></i>
+                        </div>
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">Upload File</span>
+                    </button>
+                    <button class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <div class="p-3 rounded-lg bg-secondary-100 dark:bg-secondary-900/50 mb-2">
+                            <i data-feather="settings" class="text-secondary-500 dark:text-secondary-300"></i>
+                        </div>
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">Settings</span>
+                    </button>
+                    <button class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow flex flex-col items-center justify-center hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                        <div class="p-3 rounded-lg bg-yellow-100 dark:bg-yellow-900/50 mb-2">
+                            <i data-feather="help-circle" class="text-yellow-500 dark:text-yellow-300"></i>
+                        </div>
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">Help</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <!-- Scripts -->
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Theme toggle
+        document.getElementById('theme-toggle').addEventListener('click', function() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+        });
+
+        // Check for saved theme preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+
+        // Charts
+        document.addEventListener('DOMContentLoaded', function() {
+            // Main Chart
+            const ctx = document.getElementById('mainChart').getContext('2d');
+            const mainChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+                    datasets: [{
+                        label: 'Revenue',
+                        data: [12000, 19000, 15000, 28000, 24000, 32000, 41000],
+                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                        borderColor: 'rgb(99, 102, 241)',
+                        borderWidth: 2,
+                        tension: 0.4,
+                        fill: true
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: 'rgba(0, 0, 0, 0.05)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    }
+                }
+            });
+
+            // Pie Chart
+            const pieCtx = document.getElementById('pieChart').getContext('2d');
+            const pieChart = new Chart(pieCtx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Direct', 'Referral', 'Social', 'Organic'],
+                    datasets: [{
+                        data: [35, 25, 20, 20],
+                        backgroundColor: [
+                            'rgb(99, 102, 241)',
+                            'rgb(139, 92, 246)',
+                            'rgb(59, 130, 246)',
+                            'rgb(16, 185, 129)'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'right',
+                            labels: {
+                                usePointStyle: true,
+                                padding: 20
+                            }
+                        }
+                    },
+                    cutout: '70%'
+                }
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,58 @@
+// Shared JavaScript for dashboard
+console.log('DashVista loaded');
+
+// Initialize Vanta.js background effect
+document.addEventListener('DOMContentLoaded', function() {
+    // Check if we're on the main dashboard page
+    if (document.querySelector('#mainChart')) {
+        VANTA.NET({
+            el: 'body',
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x6366f1,
+            backgroundColor: 0xf9fafb,
+            points: 12.00,
+            maxDistance: 22.00,
+            spacing: 18.00
+        });
+        
+        // Update Vanta on theme change
+        document.getElementById('theme-toggle').addEventListener('click', function() {
+            setTimeout(() => {
+                const isDark = document.documentElement.classList.contains('dark');
+                VANTA.NET({
+                    el: 'body',
+                    mouseControls: true,
+                    touchControls: true,
+                    gyroControls: false,
+                    minHeight: 200.00,
+                    minWidth: 200.00,
+                    scale: 1.00,
+                    scaleMobile: 1.00,
+                    color: isDark ? 0x8b5cf6 : 0x6366f1,
+                    backgroundColor: isDark ? 0x111827 : 0xf9fafb,
+                    points: 12.00,
+                    maxDistance: 22.00,
+                    spacing: 18.00
+                });
+            }, 300);
+        });
+    }
+    
+    // Make all cards hoverable
+    document.querySelectorAll('.hover\\:bg-gray-50').forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            card.classList.add('shadow-md');
+            card.classList.remove('shadow');
+        });
+        card.addEventListener('mouseleave', () => {
+            card.classList.remove('shadow-md');
+            card.classList.add('shadow');
+        });
+    });
+});

style.css

@@ -1,28 +1,52 @@
+/* Custom styles for dashboard */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;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 ease;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 3px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.dark ::-webkit-scrollbar-track {
+    background: #1f2937;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dark ::-webkit-scrollbar-thumb {
+    background: #4b5563;
 }
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+
+/* Chart tooltip customization */
+.chartjs-tooltip {
+    background-color: rgba(0, 0, 0, 0.8) !important;
+    border-radius: 0.375rem !important;
+    padding: 0.5rem 0.75rem !important;
+    color: white !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+.dark .chartjs-tooltip {
+    background-color: rgba(255, 255, 255, 0.9) !important;
+    color: #111827 !important;
+}