diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,5123 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crypto Monitor ULTIMATE - Unified Dashboard</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
-        rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-    <link rel="stylesheet" href="/static/css/connection-status.css">
-    <script src="/static/js/websocket-client.js"></script>
+    <meta http-equiv="refresh" content="0; url=/unified_dashboard.html">
+    <title>Crypto Monitor HF - Redirecting...</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --bg-dark: #0a0e1a;
-            --bg-card: #111827;
-            --bg-card-hover: #1f2937;
-            --text-primary: #f9fafb;
-            --text-secondary: #9ca3af;
-            --accent-blue: #3b82f6;
-            --accent-green: #10b981;
-            --accent-red: #ef4444;
-            --accent-yellow: #f59e0b;
-            --accent-purple: #8b5cf6;
-            --accent-pink: #ec4899;
-            --border: rgba(255, 255, 255, 0.1);
-            --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-        }
-
         body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-dark);
-            color: var(--text-primary);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background:
-                radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%),
-                radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%);
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .container {
-            max-width: 1920px;
-            margin: 0 auto;
-            padding: 20px;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* Header */
-        .header {
-            background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow);
-        }
-
-        .header-top {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .logo-icon {
-            width: 60px;
-            height: 60px;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 32px;
-            box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
-            animation: pulse-glow 3s ease-in-out infinite;
-        }
-
-        @keyframes pulse-glow {
-
-            0%,
-            100% {
-                box-shadow: 0 10px 40px rgba(59, 130, 246, 0.4);
-            }
-
-            50% {
-                box-shadow: 0 10px 60px rgba(139, 92, 246, 0.6);
-            }
-        }
-
-        .logo-text h1 {
-            font-size: 32px;
-            font-weight: 900;
-            background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: -1px;
-        }
-
-        .logo-text p {
-            font-size: 14px;
-            color: var(--text-secondary);
-            font-weight: 500;
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .status-badge {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 24px;
-            background: rgba(16, 185, 129, 0.15);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            border-radius: 12px;
-            font-size: 14px;
-            font-weight: 600;
-        }
-
-        .status-dot {
-            width: 10px;
-            height: 10px;
-            background: var(--accent-green);
-            border-radius: 50%;
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-
-            0%,
-            100% {
-                opacity: 1;
-                transform: scale(1);
-            }
-
-            50% {
-                opacity: 0.5;
-                transform: scale(1.2);
-            }
-        }
-
-        .live-indicator {
-            padding: 8px 16px;
-            background: rgba(239, 68, 68, 0.15);
-            border: 1px solid rgba(239, 68, 68, 0.3);
-            border-radius: 8px;
-            font-size: 12px;
-            font-weight: 700;
-            text-transform: uppercase;
-            color: var(--accent-red);
-            animation: blink 2s infinite;
-        }
-
-        @keyframes blink {
-
-            0%,
-            50%,
-            100% {
-                opacity: 1;
-            }
-
-            25%,
-            75% {
-                opacity: 0.3;
-            }
-        }
-
-        /* Tabs */
-        .tabs {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-            border-bottom: 2px solid var(--border);
-            padding-bottom: 10px;
-        }
-
-        .tab {
-            padding: 12px 24px;
-            background: transparent;
-            border: none;
-            border-radius: 12px 12px 0 0;
-            color: var(--text-secondary);
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-size: 14px;
-            position: relative;
-        }
-
-        .tab:hover {
-            color: var(--text-primary);
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .tab.active {
-            color: var(--accent-blue);
-            background: rgba(59, 130, 246, 0.1);
-        }
-
-        .tab.active::after {
-            content: '';
-            position: absolute;
-            bottom: -12px;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
-            border-radius: 2px;
-        }
-
-        .tab-content {
-            display: none;
-            animation: fadeIn 0.3s;
-        }
-
-        .tab-content.active {
-            display: block;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
-            gap: 16px;
-            margin-bottom: 24px;
-            align-items: stretch;
-        }
-
-        @media (min-width: 1280px) {
-            .stats-grid--market {
-                grid-template-columns: repeat(5, minmax(180px, 1fr));
-            }
-        }
-
-        .stat-card {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            padding: 20px;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .stat-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
-            transform: scaleX(0);
-            transition: transform 0.3s ease;
-        }
-
-        .stat-card:hover {
-            transform: translateY(-8px) scale(1.02);
-            border-color: rgba(59, 130, 246, 0.5);
-            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.3);
-        }
-
-        .stat-card:hover::before {
-            transform: scaleX(1);
-        }
-
-        .stat-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 8px;
-        }
-
-        .stat-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 14px;
+            font-family: 'Inter', -apple-system, sans-serif;
             display: flex;
             align-items: center;
             justify-content: center;
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
-            color: var(--accent-blue);
-        }
-
-        .stat-icon svg {
-            width: 24px;
-            height: 24px;
-            stroke: currentColor;
-            stroke-width: 1.6;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-            fill: none;
-        }
-
-        .stat-value {
-            font-size: 30px;
-            font-weight: 900;
-            margin-bottom: 0;
-            background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .stat-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-weight: 600;
-        }
-
-        .stat-change {
-            font-size: 14px;
-            font-weight: 700;
-            margin-top: 12px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .stat-change.positive {
-            color: var(--accent-green);
-        }
-
-        .stat-change.negative {
-            color: var(--accent-red);
-        }
-
-        /* Market Table */
-        .market-section {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow);
-        }
-
-        .section-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 25px;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-
-        .section-title {
-            font-size: 24px;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .refresh-btn {
-            padding: 10px 20px;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border: none;
-            border-radius: 10px;
+            min-height: 100vh;
+            margin: 0;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .refresh-btn:hover {
-            transform: scale(1.05);
-            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-
-        thead {
-            background: rgba(59, 130, 246, 0.1);
-        }
-
-        th {
-            padding: 16px;
-            text-align: left;
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        td {
-            padding: 16px;
-            border-top: 1px solid var(--border);
-            font-size: 14px;
-        }
-
-        tr:hover {
-            background: rgba(59, 130, 246, 0.05);
-        }
-
-        .crypto-name {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-        }
-
-        .crypto-img {
-            width: 36px;
-            height: 36px;
-            border-radius: 10px;
-            object-fit: cover;
-        }
-
-        .price {
-            font-weight: 700;
-            font-size: 15px;
-        }
-
-        .change {
-            padding: 6px 12px;
-            border-radius: 8px;
-            font-weight: 700;
-            font-size: 13px;
-        }
-
-        .change.positive {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-        }
-
-        .change.negative {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-        }
-
-        /* Charts */
-        .chart-container {
-            background: rgba(17, 24, 39, 0.6);
-            backdrop-filter: blur(10px);
-            border: 1px solid var(--border);
-            border-radius: 24px;
-            padding: 30px;
-            margin-bottom: 30px;
-        }
-
-        canvas {
-            max-height: 350px;
-        }
-
-        /* Loading */
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 60px;
-        }
-
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 4px solid var(--border);
-            border-top-color: var(--accent-blue);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        /* Forms */
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        .form-input,
-        .form-select,
-        .form-textarea {
-            width: 100%;
-            padding: 12px;
-            background: rgba(17, 24, 39, 0.6);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            color: var(--text-primary);
-            font-family: inherit;
-            font-size: 14px;
-        }
-
-        .form-input:focus,
-        .form-select:focus,
-        .form-textarea:focus {
-            outline: none;
-            border-color: var(--accent-blue);
-        }
-
-        .form-textarea {
-            resize: vertical;
-            min-height: 100px;
-        }
-
-        /* Badges */
-        .badge {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
-        }
-
-        .badge-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-        }
-
-        .badge-warning {
-            background: rgba(245, 158, 11, 0.15);
-            color: var(--accent-yellow);
-        }
-
-        .badge-danger {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-        }
-
-        .badge-info {
-            background: rgba(59, 130, 246, 0.15);
-            color: var(--accent-blue);
-        }
-
-        /* Alert */
-        .alert {
-            padding: 12px 16px;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            font-size: 14px;
-        }
-
-        .alert-success {
-            background: rgba(16, 185, 129, 0.15);
-            color: var(--accent-green);
-            border-left: 4px solid var(--accent-green);
-        }
-
-        .alert-error {
-            background: rgba(239, 68, 68, 0.15);
-            color: var(--accent-red);
-            border-left: 4px solid var(--accent-red);
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .header-top {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-
-            table {
-                font-size: 12px;
-            }
-
-            th,
-            td {
-                padding: 10px;
-            }
-
-            .tabs {
-                overflow-x: auto;
-            }
-        }
-
-        /* Modal Styles */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(5px);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-            animation: fadeIn 0.3s;
-        }
-
-        .modal.active {
-            display: flex;
-        }
-
-        .modal-content {
-            background: var(--bg-card);
-            border-radius: 20px;
-            padding: 30px;
-            max-width: 600px;
-            width: 90%;
-            max-height: 90vh;
-            overflow-y: auto;
-            border: 1px solid var(--border);
-            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-            animation: slideUp 0.3s;
-        }
-
-        @keyframes slideUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        /* Improved Button Styles */
-        .btn-icon {
-            padding: 8px 12px;
-            border-radius: 8px;
-            border: 1px solid;
-            cursor: pointer;
-            font-size: 12px;
-            font-weight: 600;
-            transition: all 0.3s;
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-        }
-
-        .btn-icon:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Pool Card Hover Effect */
-        .pool-card-hover {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        .pool-card-hover:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
-        }
-
-        /* Improved Empty States */
-        .empty-state {
             text-align: center;
-            padding: 60px 20px;
-            background: rgba(17, 24, 39, 0.6);
-            border-radius: 20px;
-            border: 2px dashed var(--border);
-        }
-
-        .empty-state-icon {
-            font-size: 64px;
-            margin-bottom: 20px;
-            opacity: 0.5;
-        }
-
-        /* Loading States */
-        .skeleton {
-            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
-            background-size: 200% 100%;
-            animation: loading 1.5s infinite;
-        }
-
-        @keyframes loading {
-            0% {
-                background-position: 200% 0;
-            }
-
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 10px;
-            height: 10px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: var(--bg-dark);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border-radius: 5px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
-        }
-
-        /* Toast Notifications */
-        .toast {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 16px 20px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-            z-index: 2000;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            min-width: 300px;
-            animation: slideInRight 0.3s;
-        }
-
-        @keyframes slideInRight {
-            from {
-                opacity: 0;
-                transform: translateX(100%);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        .toast-success {
-            border-left: 4px solid var(--accent-green);
-        }
-
-        .toast-error {
-            border-left: 4px solid var(--accent-red);
-        }
-
-        .toast-info {
-            border-left: 4px solid var(--accent-blue);
-        }
-
-        /* === کارت کاربران آنلاین - استایل جدید === */
-        .online-users-card {
-            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
-            backdrop-filter: blur(10px);
-            border: 2px solid rgba(59, 130, 246, 0.3);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .online-users-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
-        }
-
-        .online-users-card:hover {
-            border-color: rgba(59, 130, 246, 0.6);
-            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.4);
-        }
-
-        .pulse-ring {
-            position: absolute;
-            top: 50%;
-            right: 20px;
-            transform: translateY(-50%);
-            width: 60px;
-            height: 60px;
-        }
-
-        .pulse-ring::before,
-        .pulse-ring::after {
-            content: '';
-            position: absolute;
-            border: 2px solid var(--accent-blue);
-            border-radius: 50%;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            animation: pulse-ring-animation 3s infinite;
-        }
-
-        .pulse-ring::after {
-            animation-delay: 1.5s;
-        }
-
-        @keyframes pulse-ring-animation {
-            0% {
-                transform: scale(0.5);
-                opacity: 1;
-            }
-
-            100% {
-                transform: scale(1.5);
-                opacity: 0;
-            }
-        }
-
-        /* === Connection Status Indicator === */
-        .ws-status-indicator {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 10000;
-            background: rgba(17, 24, 39, 0.95);
-            backdrop-filter: blur(20px);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 12px 20px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-            transition: all 0.3s ease;
-        }
-
-        .ws-status-indicator:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
-        }
-
-        .ws-status-indicator.connected {
-            border-color: rgba(16, 185, 129, 0.5);
-        }
-
-        .ws-status-indicator.disconnected {
-            border-color: rgba(239, 68, 68, 0.5);
-        }
-
-        /* === انیمیشن‌های بیشتر === */
-        .stat-value {
-            animation: fadeInUp 0.5s ease;
-        }
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(20px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .shimmer {
-            position: relative;
-            overflow: hidden;
-        }
-
-        .shimmer::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background: linear-gradient(90deg,
-                    transparent,
-                    rgba(255, 255, 255, 0.1),
-                    transparent);
-            animation: shimmer 2s infinite;
-        }
-
-        @keyframes shimmer {
-            0% {
-                transform: translateX(-100%);
-            }
-
-            100% {
-                transform: translateX(100%);
-            }
-        }
-
-        /* === گلو افکت برای آیکون‌ها === */
-        .stat-icon {
-            position: relative;
-        }
-
-        .stat-icon::after {
-            content: '';
-            position: absolute;
-            inset: -10px;
-            background: inherit;
-            filter: blur(20px);
-            opacity: 0;
-            transition: opacity 0.3s ease;
-            z-index: -1;
-        }
-
-        .stat-card:hover .stat-icon::after {
-            opacity: 0.6;
-        }
-
-        .count-updated {
-            animation: pop-scale 0.4s ease;
-        }
-
-        @keyframes pop-scale {
-            0% {
-                transform: scale(1);
-            }
-
-            50% {
-                transform: scale(1.08);
-            }
-
-            100% {
-                transform: scale(1);
-            }
-        }
-
-        /* === بهبود دکمه‌ها === */
-        .refresh-btn {
-            position: relative;
-            overflow: hidden;
-        }
-
-        .refresh-btn::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.3);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        .refresh-btn:active::before {
-            width: 300px;
-            height: 300px;
-        }
-
-        /* === توسط Badge === */
-        .live-indicator {
-            position: relative;
-        }
-
-        .live-indicator::before {
-            content: '';
-            position: absolute;
-            left: -20px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 12px;
-            height: 12px;
-            background: var(--accent-red);
-            border-radius: 50%;
-            animation: live-pulse 2s infinite;
-        }
-
-        @keyframes live-pulse {
-
-            0%,
-            100% {
-                box-shadow: 0 0 0 0 var(--accent-red);
-            }
-
-            50% {
-                box-shadow: 0 0 0 8px transparent;
-            }
-        }
-
-        /* === Glassmorphism برای کارت‌ها === */
-        .glass-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px) saturate(180%);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        /* === Progress Bar انیمیت شده === */
-        .animated-progress {
-            position: relative;
-            height: 4px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-
-        .animated-progress::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 30%;
-            background: linear-gradient(90deg,
-                    transparent,
-                    var(--accent-blue),
-                    transparent);
-            animation: progress-slide 2s infinite;
-        }
-
-        @keyframes progress-slide {
-            0% {
-                transform: translateX(-100%);
-            }
-
-            100% {
-                transform: translateX(400%);
-            }
-        }
-
-        /* === Modern UI Enhancements === */
-        
-        /* Ripple Effect for Buttons */
-        .ripple {
-            position: relative;
-            overflow: hidden;
-        }
-
-        .ripple::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.5);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
-        }
-
-        .ripple:active::after {
-            width: 300px;
-            height: 300px;
-        }
-
-        /* Enhanced Card Animations */
-        .stat-card,
-        .market-section,
-        .chart-container {
-            animation: cardFadeIn 0.6s ease-out;
-            animation-fill-mode: both;
-        }
-
-        .stat-card:nth-child(1) { animation-delay: 0.1s; }
-        .stat-card:nth-child(2) { animation-delay: 0.2s; }
-        .stat-card:nth-child(3) { animation-delay: 0.3s; }
-        .stat-card:nth-child(4) { animation-delay: 0.4s; }
-        .stat-card:nth-child(5) { animation-delay: 0.5s; }
-
-        @keyframes cardFadeIn {
-            from {
-                opacity: 0;
-                transform: translateY(30px) scale(0.95);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0) scale(1);
-            }
-        }
-
-        /* Number Counter Animation */
-        .number-counter {
-            display: inline-block;
-            transition: all 0.3s ease;
-        }
-
-        .number-counter.updated {
-            animation: numberPop 0.5s ease;
-        }
-
-        @keyframes numberPop {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.15); color: var(--accent-blue); }
-        }
-
-        /* Skeleton Loading */
-        .skeleton-loader {
-            background: linear-gradient(
-                90deg,
-                rgba(255, 255, 255, 0.05) 25%,
-                rgba(255, 255, 255, 0.15) 50%,
-                rgba(255, 255, 255, 0.05) 75%
-            );
-            background-size: 200% 100%;
-            animation: skeleton-loading 1.5s ease-in-out infinite;
-            border-radius: 8px;
         }
-
-        @keyframes skeleton-loading {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
-        }
-
-        .skeleton-text {
-            height: 16px;
-            margin-bottom: 8px;
+        .container {
+            max-width: 400px;
+            padding: 2rem;
         }
-
-        .skeleton-title {
-            height: 24px;
-            width: 60%;
-            margin-bottom: 16px;
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
         }
-
-        .skeleton-avatar {
+        .spinner {
             width: 40px;
             height: 40px;
-            border-radius: 50%;
-        }
-
-        /* Enhanced Table Row Animations */
-        table tbody tr {
-            animation: rowSlideIn 0.4s ease-out;
-            animation-fill-mode: both;
-        }
-
-        table tbody tr:nth-child(1) { animation-delay: 0.05s; }
-        table tbody tr:nth-child(2) { animation-delay: 0.1s; }
-        table tbody tr:nth-child(3) { animation-delay: 0.15s; }
-        table tbody tr:nth-child(4) { animation-delay: 0.2s; }
-        table tbody tr:nth-child(5) { animation-delay: 0.25s; }
-        table tbody tr:nth-child(n+6) { animation-delay: 0.3s; }
-
-        @keyframes rowSlideIn {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
-        }
-
-        /* Enhanced Hover Effects */
-        tr {
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-
-        tr:hover {
-            background: rgba(59, 130, 246, 0.1) !important;
-            transform: translateX(5px);
-            box-shadow: -5px 0 0 var(--accent-blue);
-        }
-
-        /* Search Bar */
-        .search-container {
-            position: relative;
-            margin-bottom: 20px;
-        }
-
-        .search-input {
-            width: 100%;
-            padding: 14px 20px 14px 50px;
-            background: rgba(17, 24, 39, 0.8);
-            border: 2px solid var(--border);
-            border-radius: 12px;
-            color: var(--text-primary);
-            font-size: 14px;
-            transition: all 0.3s ease;
-        }
-
-        .search-input:focus {
-            outline: none;
-            border-color: var(--accent-blue);
-            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-            background: rgba(17, 24, 39, 0.95);
-        }
-
-        .search-icon {
-            position: absolute;
-            left: 18px;
-            top: 50%;
-            transform: translateY(-50%);
-            color: var(--text-secondary);
-            font-size: 18px;
-            pointer-events: none;
-        }
-
-        /* Filter Chips */
-        .filter-chips {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-bottom: 20px;
-        }
-
-        .filter-chip {
-            padding: 8px 16px;
-            background: rgba(17, 24, 39, 0.6);
-            border: 1px solid var(--border);
-            border-radius: 20px;
-            color: var(--text-secondary);
-            font-size: 13px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .filter-chip:hover {
-            border-color: var(--accent-blue);
-            color: var(--accent-blue);
-            transform: translateY(-2px);
-        }
-
-        .filter-chip.active {
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border-color: transparent;
-            color: white;
-            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
-        }
-
-        /* Enhanced Toast Notifications */
-        .toast-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 10000;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-            max-width: 400px;
-        }
-
-        .toast {
-            position: relative;
-            padding: 16px 20px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            min-width: 300px;
-            animation: toastSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-            backdrop-filter: blur(20px);
-        }
-
-        @keyframes toastSlideIn {
-            from {
-                opacity: 0;
-                transform: translateX(400px) scale(0.8);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0) scale(1);
-            }
-        }
-
-        .toast-icon {
-            font-size: 24px;
-            flex-shrink: 0;
-        }
-
-        .toast-content {
-            flex: 1;
-        }
-
-        .toast-title {
-            font-weight: 700;
-            font-size: 14px;
-            margin-bottom: 4px;
-        }
-
-        .toast-message {
-            font-size: 13px;
-            color: var(--text-secondary);
-        }
-
-        .toast-close {
-            background: none;
-            border: none;
-            color: var(--text-secondary);
-            font-size: 20px;
-            cursor: pointer;
-            padding: 0;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 6px;
-            transition: all 0.2s ease;
-        }
-
-        .toast-close:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: var(--text-primary);
-        }
-
-        /* Progress Indicator */
-        .progress-indicator {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 3px;
-            background: rgba(255, 255, 255, 0.1);
-            z-index: 10001;
-            overflow: hidden;
-        }
-
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
-            width: 0%;
-            transition: width 0.3s ease;
-            animation: progress-shimmer 2s infinite;
-        }
-
-        @keyframes progress-shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
-        }
-
-        /* Floating Action Button */
-        .fab {
-            position: fixed;
-            bottom: 30px;
-            right: 30px;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            border: none;
-            color: white;
-            font-size: 24px;
-            cursor: pointer;
-            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
-            transition: all 0.3s ease;
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .fab:hover {
-            transform: scale(1.1) rotate(90deg);
-            box-shadow: 0 15px 40px rgba(59, 130, 246, 0.6);
-        }
-
-        .fab:active {
-            transform: scale(0.95);
-        }
-
-        /* Success/Error Feedback */
-        .feedback-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            backdrop-filter: blur(5px);
-            z-index: 10002;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-        }
-
-        .feedback-overlay.show {
-            opacity: 1;
-            pointer-events: all;
-        }
-
-        .feedback-card {
-            background: var(--bg-card);
-            border-radius: 20px;
-            padding: 40px;
-            text-align: center;
-            max-width: 400px;
-            border: 2px solid var(--border);
-            transform: scale(0.8);
-            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-        }
-
-        .feedback-overlay.show .feedback-card {
-            transform: scale(1);
-        }
-
-        .feedback-icon {
-            font-size: 64px;
-            margin-bottom: 20px;
-            animation: feedbackBounce 0.6s ease;
-        }
-
-        @keyframes feedbackBounce {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.2); }
-        }
-
-        .feedback-title {
-            font-size: 24px;
-            font-weight: 800;
-            margin-bottom: 10px;
-        }
-
-        .feedback-message {
-            color: var(--text-secondary);
-            margin-bottom: 30px;
-        }
-
-        /* Pulse Animation for Live Data */
-        .pulse-data {
-            animation: pulseGlow 2s ease-in-out infinite;
-        }
-
-        @keyframes pulseGlow {
-            0%, 100% {
-                box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
-            }
-            50% {
-                box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
-            }
-        }
-
-        /* Smooth Scroll */
-        html {
-            scroll-behavior: smooth;
-        }
-
-        /* Enhanced Focus States */
-        *:focus-visible {
-            outline: 2px solid var(--accent-blue);
-            outline-offset: 2px;
-            border-radius: 4px;
-        }
-
-        /* Loading Overlay */
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(10, 14, 26, 0.9);
-            backdrop-filter: blur(10px);
-            z-index: 10003;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 20px;
-            opacity: 0;
-            pointer-events: none;
-            transition: opacity 0.3s ease;
-        }
-
-        .loading-overlay.show {
-            opacity: 1;
-            pointer-events: all;
-        }
-
-        .loading-spinner-large {
-            width: 80px;
-            height: 80px;
-            border: 6px solid var(--border);
-            border-top-color: var(--accent-blue);
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
             border-radius: 50%;
             animation: spin 1s linear infinite;
+            margin: 2rem auto;
         }
-
-        .loading-text {
-            font-size: 18px;
-            font-weight: 600;
-            color: var(--text-primary);
-        }
-
-        /* Tooltip */
-        .tooltip {
-            position: relative;
-            cursor: help;
-        }
-
-        .tooltip::before {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%) translateY(-10px);
-            padding: 8px 12px;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            font-size: 12px;
-            white-space: nowrap;
-            opacity: 0;
-            pointer-events: none;
-            transition: all 0.3s ease;
-            z-index: 1000;
-        }
-
-        .tooltip:hover::before {
-            opacity: 1;
-            transform: translateX(-50%) translateY(-5px);
-        }
-
-        /* Gradient Text Animation */
-        .gradient-text {
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple), var(--accent-pink));
-            background-size: 200% 200%;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            animation: gradientShift 3s ease infinite;
-        }
-
-        @keyframes gradientShift {
-            0%, 100% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-        }
-
-        /* Badge Pulse */
-        .badge-pulse {
-            animation: badgePulse 2s ease-in-out infinite;
-        }
-
-        @keyframes badgePulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-        }
-
-        /* Smooth Transitions for All Interactive Elements */
-        button, a, input, select, textarea {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-
-        /* Enhanced Table Styling */
-        table {
-            border-collapse: separate;
-            border-spacing: 0;
-        }
-
-        thead th:first-child {
-            border-top-left-radius: 12px;
-        }
-
-        thead th:last-child {
-            border-top-right-radius: 12px;
-        }
-
-        tbody tr:last-child td:first-child {
-            border-bottom-left-radius: 12px;
-        }
-
-        tbody tr:last-child td:last-child {
-            border-bottom-right-radius: 12px;
-        }
-
-        /* SVG Icon Styles */
-        .icon {
-            width: 20px;
-            height: 20px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-        }
-
-        .icon-sm {
-            width: 16px;
-            height: 16px;
-        }
-
-        .icon-md {
-            width: 24px;
-            height: 24px;
-        }
-
-        .icon-lg {
-            width: 32px;
-            height: 32px;
-        }
-
-        .icon-xl {
-            width: 48px;
-            height: 48px;
-        }
-
-        .icon svg {
-            width: 100%;
-            height: 100%;
-            stroke: currentColor;
-            fill: none;
-            stroke-width: 2;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-
-        .icon-filled svg {
-            fill: currentColor;
-            stroke: none;
-        }
-
-        .icon-gradient {
-            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        /* Tab Icons */
-        .tab-icon {
-            width: 18px;
-            height: 18px;
-            margin-right: 8px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .tab-icon svg {
-            width: 100%;
-            height: 100%;
-        }
-
-        /* Status Icons */
-        .status-icon {
-            width: 20px;
-            height: 20px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .status-icon-success svg {
-            color: var(--accent-green);
-        }
-
-        .status-icon-error svg {
-            color: var(--accent-red);
-        }
-
-        .status-icon-warning svg {
-            color: var(--accent-yellow);
+        @keyframes spin {
+            to { transform: rotate(360deg); }
         }
-
-        .status-icon-info svg {
-            color: var(--accent-blue);
+        a {
+            color: white;
+            text-decoration: underline;
         }
     </style>
-
-    <!-- SVG Icon Definitions -->
-    <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
-        <!-- Success Icon -->
-        <symbol id="icon-success" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M8 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Error Icon -->
-        <symbol id="icon-error" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Warning Icon -->
-        <symbol id="icon-warning" viewBox="0 0 24 24">
-            <path d="M12 2L2 22h20L12 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12 9v4M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Info Icon -->
-        <symbol id="icon-info" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Market/Chart Icon -->
-        <symbol id="icon-market" viewBox="0 0 24 24">
-            <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M7 12l4-4 4 4 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Monitor/API Icon -->
-        <symbol id="icon-monitor" viewBox="0 0 24 24">
-            <rect x="2" y="3" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Advanced/Flash Icon -->
-        <symbol id="icon-advanced" viewBox="0 0 24 24">
-            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Settings/Gear Icon -->
-        <symbol id="icon-settings" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- HuggingFace Icon -->
-        <symbol id="icon-hf" viewBox="0 0 24 24">
-            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="M8 12h8M12 8v8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Pools/Refresh Icon -->
-        <symbol id="icon-pools" viewBox="0 0 24 24">
-            <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Logs/File Icon -->
-        <symbol id="icon-logs" viewBox="0 0 24 24">
-            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Resources/Box Icon -->
-        <symbol id="icon-resources" viewBox="0 0 24 24">
-            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Reports/Chart Icon -->
-        <symbol id="icon-reports" viewBox="0 0 24 24">
-            <path d="M3 3v18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M18 17V9M12 17V5M6 17v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Search Icon -->
-        <symbol id="icon-search" viewBox="0 0 24 24">
-            <circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
-            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Refresh Icon -->
-        <symbol id="icon-refresh" viewBox="0 0 24 24">
-            <path d="M23 4v6h-6M1 20v-6h6M3.51 9a10 10 0 0 1 17.8-4.3M20.49 15a10 10 0 0 1-17.8 4.3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Trending Up Icon -->
-        <symbol id="icon-trending-up" viewBox="0 0 24 24">
-            <path d="M23 6l-9.5 9.5-5-5L1 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M17 6h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Trending Down Icon -->
-        <symbol id="icon-trending-down" viewBox="0 0 24 24">
-            <path d="M23 18l-9.5-9.5-5 5L1 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M17 18h6v-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Volume Icon -->
-        <symbol id="icon-volume" viewBox="0 0 24 24">
-            <path d="M11 5L6 9H2v6h4l5 4V5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Diamond/Gem Icon -->
-        <symbol id="icon-diamond" viewBox="0 0 24 24">
-            <path d="M6 3h12l4 6-10 12L2 9l4-6z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M11 3l1 18M13 3l-1 18M6 3l5 18M18 3l-5 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Fire/Trending Icon -->
-        <symbol id="icon-fire" viewBox="0 0 24 24">
-            <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Link/Chain Icon -->
-        <symbol id="icon-link" viewBox="0 0 24 24">
-            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Export/Download Icon -->
-        <symbol id="icon-export" viewBox="0 0 24 24">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Delete/Trash Icon -->
-        <symbol id="icon-delete" viewBox="0 0 24 24">
-            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M10 11v6M14 11v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </symbol>
-
-        <!-- Brain/AI Icon -->
-        <symbol id="icon-brain" viewBox="0 0 24 24">
-            <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44L2 22v-4a2.5 2.5 0 0 1 2.5-2.5h5z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44L22 22v-4a2.5 2.5 0 0 0-2.5-2.5h-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Arrow Up Icon -->
-        <symbol id="icon-arrow-up" viewBox="0 0 24 24">
-            <path d="M12 19V5M5 12l7-7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </symbol>
-
-        <!-- Live/Dot Icon -->
-        <symbol id="icon-live" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="10" fill="currentColor"/>
-        </symbol>
-    </svg>
 </head>
-
 <body>
-    <!-- Progress Indicator -->
-    <div class="progress-indicator" id="progressIndicator">
-        <div class="progress-bar" id="progressBar"></div>
-    </div>
-
-    <!-- Toast Container -->
-    <div class="toast-container" id="toastContainer"></div>
-
-    <!-- Loading Overlay -->
-    <div class="loading-overlay" id="loadingOverlay">
-        <div class="loading-spinner-large"></div>
-        <div class="loading-text" id="loadingText">در حال بارگذاری...</div>
-    </div>
-
-    <!-- Feedback Overlay -->
-    <div class="feedback-overlay" id="feedbackOverlay">
-        <div class="feedback-card">
-            <div class="feedback-icon" id="feedbackIcon">✅</div>
-            <div class="feedback-title" id="feedbackTitle">موفق!</div>
-            <div class="feedback-message" id="feedbackMessage">عملیات با موفقیت انجام شد</div>
-            <button class="refresh-btn ripple" onclick="hideFeedback()">بستن</button>
-        </div>
-    </div>
-
-    <!-- Floating Action Button -->
-    <button class="fab ripple" onclick="scrollToTop()" title="بازگشت به بالا">
-        ↑
-    </button>
-
-    <!-- WebSocket Status Indicator -->
-    <div id="ws-connection-status" class="ws-status-indicator disconnected">
-        <div id="ws-status-dot" class="status-dot status-dot-offline"></div>
-        <span id="ws-status-text" class="ws-status-text">در حال اتصال...</span>
-        <div id="online-users-badge" class="badge badge-info badge-pulse" style="margin-left: 10px;">0</div>
-    </div>
-
     <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <div class="header-top">
-                <div class="logo">
-                    <div class="logo-icon">₿</div>
-                    <div class="logo-text">
-                        <h1>Crypto Monitor ULTIMATE</h1>
-                        <p>Unified Dashboard • Real-time data from 100+ free APIs</p>
-                    </div>
-                </div>
-                <div class="header-actions">
-                    <div class="live-indicator">
-                        <span class="status-icon"><svg><use href="#icon-live"></use></svg></span>
-                        LIVE
-                    </div>
-                    <div class="status-badge">
-                        <div class="status-dot"></div>
-                        <span id="statusText">All Systems Operational</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Tabs -->
-            <div class="tabs">
-                <button class="tab active" onclick="switchTab('market')">
-                    <span class="tab-icon"><svg><use href="#icon-market"></use></svg></span>
-                    Market
-                </button>
-                <button class="tab" onclick="switchTab('monitor')">
-                    <span class="tab-icon"><svg><use href="#icon-monitor"></use></svg></span>
-                    API Monitor
-                </button>
-                <button class="tab" onclick="switchTab('advanced')">
-                    <span class="tab-icon"><svg><use href="#icon-advanced"></use></svg></span>
-                    Advanced
-                </button>
-                <button class="tab" onclick="switchTab('admin')">
-                    <span class="tab-icon"><svg><use href="#icon-settings"></use></svg></span>
-                    Admin
-                </button>
-                <button class="tab" onclick="switchTab('hf')">
-                    <span class="tab-icon"><svg><use href="#icon-hf"></use></svg></span>
-                    HuggingFace
-                </button>
-                <button class="tab" onclick="switchTab('pools')">
-                    <span class="tab-icon"><svg><use href="#icon-pools"></use></svg></span>
-                    Pools
-                </button>
-                <button class="tab" onclick="switchTab('logs')">
-                    <span class="tab-icon"><svg><use href="#icon-logs"></use></svg></span>
-                    Logs
-                </button>
-                <button class="tab" onclick="switchTab('resources')">
-                    <span class="tab-icon"><svg><use href="#icon-resources"></use></svg></span>
-                    Resources
-                </button>
-                <button class="tab" onclick="switchTab('reports')">
-                    <span class="tab-icon"><svg><use href="#icon-reports"></use></svg></span>
-                    Reports
-                </button>
-            </div>
-        </div>
-
-        <!-- Market Tab -->
-        <div id="tab-market" class="tab-content active">
-            <!-- Stats Grid -->
-            <div class="stats-grid stats-grid--market">
-                <div class="stat-card online-users-card">
-                    <div class="pulse-ring"></div>
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <circle cx="9" cy="8" r="3" />
-                                <circle cx="17" cy="9" r="2.5" />
-                                <path d="M4 19v-1.5A4.5 4.5 0 018.5 13h1A4.5 4.5 0 0114 17.5V19" />
-                                <path d="M17 19v-1a3 3 0 00-3-3h-1.5" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value shimmer" id="active-users-count">0</div>
-                    <div class="stat-label">کاربران آنلاین</div>
-                    <div class="stat-change positive">
-                        <span>📊</span>
-                        <span>کل نشست‌ها: <span id="total-sessions-count">0</span></span>
-                    </div>
-                    <div class="animated-progress"></div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <circle cx="12" cy="12" r="6" />
-                                <path d="M12 8v8" />
-                                <path d="M9.5 10.5h5" />
-                                <path d="M9.5 13.5h5" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="totalMarketCap">$0.00T</div>
-                    <div class="stat-label">Total Market Cap</div>
-                    <div class="stat-change positive" id="mcapChange">
-                        <span>↑</span> <span>0.0%</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M6 16V9" />
-                                <path d="M12 16V5" />
-                                <path d="M18 16v-7" />
-                                <path d="M4 16h16" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="totalVolume">$0.00B</div>
-                    <div class="stat-label">24h Trading Volume</div>
-                    <div class="stat-change positive">
-                        <span>↑</span> <span>Volume spike</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <circle cx="12" cy="12" r="6" />
-                                <path d="M10 8h3a2 2 0 010 4h-3h3a2 2 0 010 4h-3" />
-                                <path d="M11 6v2" />
-                                <path d="M11 16v2" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="btcDominance">0.0%</div>
-                    <div class="stat-label">BTC Dominance</div>
-                    <div class="stat-change">
-                        <span id="btcDomIcon">↑</span> <span id="btcDomChange">0.0%</span>
-                    </div>
-                </div>
-
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <path
-                                    d="M5.5 15c0 3.6 3 5.5 6.5 5.5s6.5-1.9 6.5-5.5c0-2.6-1.7-4.4-3.4-6.4-.4-.5-.8-1-1.1-1.6-.3-.6-.6-1.3-.8-2-1.6 1.4-3.3 3.2-3.3 5.1-1.2-.8-2.4-2-2.4-3.6C7 9 5.5 11.4 5.5 13.5Z" />
-                                <path d="M10.5 18.5c-1.1-.7-1.8-1.7-1.8-3 0-1.1.5-2 1.2-2.8" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="fearGreed">50</div>
-                    <div class="stat-label">Fear & Greed Index</div>
-                    <div class="stat-change" id="sentimentLabel">
-                        <span>Neutral</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Market Table -->
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title gradient-text">
-                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-diamond"></use></svg></span>
-                        Live Market Data
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadMarketData()" data-tooltip="به‌روزرسانی داده‌های بازار">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        Refresh
-                    </button>
-                </div>
-                
-                <!-- Search Bar -->
-                <div class="search-container">
-                    <span class="search-icon icon"><svg><use href="#icon-search"></use></svg></span>
-                    <input type="text" class="search-input" id="marketSearch" placeholder="جستجوی ارز دیجیتال (مثال: Bitcoin, BTC, Ethereum)..." oninput="filterMarketTable()">
-                </div>
-                
-                <!-- Filter Chips -->
-                <div class="filter-chips">
-                    <button class="filter-chip active" onclick="filterByCategory('all')">همه</button>
-                    <button class="filter-chip" onclick="filterByCategory('top10')">Top 10</button>
-                    <button class="filter-chip" onclick="filterByCategory('gainers')">
-                        <span class="icon icon-sm status-icon-success"><svg><use href="#icon-trending-up"></use></svg></span>
-                        در حال رشد
-                    </button>
-                    <button class="filter-chip" onclick="filterByCategory('losers')">
-                        <span class="icon icon-sm status-icon-error"><svg><use href="#icon-trending-down"></use></svg></span>
-                        در حال سقوط
-                    </button>
-                    <button class="filter-chip" onclick="filterByCategory('volume')">
-                        <span class="icon icon-sm"><svg><use href="#icon-volume"></use></svg></span>
-                        حجم بالا
-                    </button>
-                </div>
-                <div style="overflow-x: auto;">
-                    <table id="marketTable">
-                        <thead>
-                            <tr>
-                                <th>#</th>
-                                <th>Name</th>
-                                <th>Price</th>
-                                <th>24h Change</th>
-                                <th>Market Cap</th>
-                                <th>Volume 24h</th>
-                            </tr>
-                        </thead>
-                        <tbody id="marketTableBody">
-                            <tr>
-                                <td colspan="6">
-                                    <div class="loading">
-                                        <div class="spinner"></div>
-                                    </div>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <!-- Charts Row -->
-            <div
-                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 30px;">
-                <div class="chart-container">
-                    <div class="section-title" style="margin-bottom: 20px;">📈 Market Dominance</div>
-                    <canvas id="dominanceChart"></canvas>
-                </div>
-
-                <div class="chart-container">
-                    <div class="section-title" style="margin-bottom: 20px;">😱 Fear & Greed Index</div>
-                    <div style="text-align: center;">
-                        <canvas id="gaugeChart"></canvas>
-                        <div style="font-size: 48px; font-weight: 900; margin: 20px 0 10px;" id="sentimentValue">50
-                        </div>
-                        <div style="color: var(--text-secondary); font-size: 16px; font-weight: 600;"
-                            id="sentimentText">Neutral</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Trending Section -->
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-fire"></use></svg></span>
-                    Trending Now
-                </div>
-                <div id="trendingGrid"
-                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- DeFi Section -->
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🏦 Top DeFi Protocols</div>
-                <div id="defiList">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- API Monitor Tab -->
-        <div id="tab-monitor" class="tab-content">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <rect x="4" y="4" width="16" height="5" rx="2" />
-                                <rect x="4" y="11" width="16" height="5" rx="2" />
-                                <path d="M8 6h.01" />
-                                <path d="M8 13h.01" />
-                                <path d="M12 16v4" />
-                                <path d="M10 20h4" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="totalAPIs">0</div>
-                    <div class="stat-label">Total APIs</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <circle cx="12" cy="12" r="7.5" />
-                                <path d="M9.2 12.2l2 2 4-4" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="onlineAPIs" style="color: var(--accent-green);">0</div>
-                    <div class="stat-label">Online</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <circle cx="12" cy="12" r="7.5" />
-                                <path d="M9 9l6 6" />
-                                <path d="M15 9l-6 6" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="offlineAPIs" style="color: var(--accent-red);">0</div>
-                    <div class="stat-label">Offline</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M11 3L6 13h5l-1 8 8-14h-5l1-4z" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="avgResponse" style="font-size: 28px;">0ms</div>
-                    <div class="stat-label">Avg Response</div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-monitor"></use></svg></span>
-                        API Providers Status
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadMonitorData()">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        Refresh
-                    </button>
-                </div>
-                <div style="overflow-x: auto;">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Provider</th>
-                                <th>Category</th>
-                                <th>Status</th>
-                                <th>Response Time</th>
-                                <th>Last Check</th>
-                            </tr>
-                        </thead>
-                        <tbody id="providersTable">
-                            <tr>
-                                <td colspan="5" style="text-align: center;">Loading...</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-brain"></use></svg></span>
-                    HuggingFace Sentiment Analysis
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Enter crypto-related text (one per line):</label>
-                    <textarea class="form-textarea" id="sentimentText" rows="5"
-                        placeholder="BTC strong breakout&#10;ETH looks weak&#10;Market is bullish">BTC strong breakout
-ETH looks weak
-Market is bullish today</textarea>
-                </div>
-                <button class="refresh-btn ripple" onclick="runSentiment()">
-                    <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
-                    Analyze Sentiment
-                </button>
-                <div id="sentimentResult"
-                    style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
-                    —</div>
-                <pre id="sentimentDetails"
-                    style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;"></pre>
-            </div>
-        </div>
-
-        <!-- Advanced Tab -->
-        <div id="tab-advanced" class="tab-content">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <rect x="4" y="4" width="16" height="5" rx="2" />
-                                <rect x="4" y="11" width="16" height="5" rx="2" />
-                                <path d="M8 6h.01" />
-                                <path d="M8 13h.01" />
-                                <path d="M12 16v4" />
-                                <path d="M10 20h4" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="totalApis">0</div>
-                    <div class="stat-label">Total APIs</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M6 4v7m0 5v4" />
-                                <circle cx="6" cy="11" r="2" />
-                                <path d="M12 4v2m0 4v10" />
-                                <circle cx="12" cy="8" r="2" />
-                                <path d="M18 4v9m0 4v3" />
-                                <circle cx="18" cy="15" r="2" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="activeTasks">0</div>
-                    <div class="stat-label">Active Tasks</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <ellipse cx="12" cy="6" rx="7" ry="3" />
-                                <path d="M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6" />
-                                <path d="M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="cachedData">0</div>
-                    <div class="stat-label">Cached Data</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-header">
-                        <div class="stat-icon">
-                            <svg viewBox="0 0 24 24" aria-hidden="true">
-                                <path d="M8 3v4" />
-                                <path d="M16 3v4" />
-                                <path d="M6 11h12" />
-                                <path d="M10 15h4v6" />
-                                <path d="M8 7h8v4a6 6 0 01-12 0V7z" />
-                            </svg>
-                        </div>
-                    </div>
-                    <div class="stat-value" id="wsConnections">0</div>
-                    <div class="stat-label">WS Connections</div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">🔧 Advanced Actions</div>
-                </div>
-                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
-                    <button class="refresh-btn" onclick="exportJSON()">💾 Export JSON</button>
-                    <button class="refresh-btn" onclick="exportCSV()">📊 Export CSV</button>
-                    <button class="refresh-btn" onclick="createBackup()">🔄 Create Backup</button>
-                    <button class="refresh-btn" onclick="clearCache()">🗑️ Clear Cache</button>
-                    <button class="refresh-btn" onclick="forceUpdateAll()">🔃 Force Update All</button>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📈 Recent Activity</div>
-                <div id="activityLog"
-                    style="max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px;">
-                    <div style="padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;">
-                        <span style="opacity: 0.6;">--:--:--</span> Waiting for updates...
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔌 API Sources</div>
-                <div id="apiList">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Admin Tab -->
-        <div id="tab-admin" class="tab-content">
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">➕ Add New API Source</div>
-                <div class="form-group">
-                    <label class="form-label">API Name</label>
-                    <input type="text" class="form-input" id="newApiName" placeholder="e.g., CoinGecko">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API URL</label>
-                    <input type="text" class="form-input" id="newApiUrl" placeholder="https://api.example.com/endpoint">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Category</label>
-                    <select class="form-select" id="newApiCategory">
-                        <option value="market_data">Market Data</option>
-                        <option value="blockchain_explorers">Blockchain Explorers</option>
-                        <option value="news">News & Social</option>
-                        <option value="sentiment">Sentiment</option>
-                        <option value="defi">DeFi</option>
-                        <option value="nft">NFT</option>
-                    </select>
-                </div>
-                <button class="refresh-btn" onclick="addNewAPI()">➕ Add API Source</button>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-logs"></use></svg></span>
-                    Current API Sources
-                </div>
-                <div id="apisList">Loading...</div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-settings"></use></svg></span>
-                    Settings
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API Check Interval (seconds)</label>
-                    <input type="number" class="form-input" id="checkInterval" value="30" min="10" max="300">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Dashboard Auto-Refresh (seconds)</label>
-                    <input type="number" class="form-input" id="dashboardRefresh" value="30" min="5" max="300">
-                </div>
-                <button class="refresh-btn" onclick="saveSettings()">💾 Save Settings</button>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
-                    Statistics
-                </div>
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-value" id="statTotal">0</div>
-                        <div class="stat-label">Total API Sources</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="statOnline" style="color: var(--accent-green);">0</div>
-                        <div class="stat-label">Currently Online</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="statOffline" style="color: var(--accent-red);">0</div>
-                        <div class="stat-label">Currently Offline</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- HuggingFace Tab -->
-        <div id="tab-hf" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md" style="margin-left: 8px;"><svg><use href="#icon-reports"></use></svg></span>
-                        Health Status
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadHFHealth()">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        Refresh
-                    </button>
-                </div>
-                <pre id="healthOutput"
-                    style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; max-height: 200px; overflow-y: auto;">Loading...</pre>
-            </div>
-
-            <div
-                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px;">
-                <div class="market-section">
-                    <div class="section-title" style="margin-bottom: 20px;">🤖 Models Registry</div>
-                    <button class="refresh-btn" onclick="loadModels()" style="margin-bottom: 15px;">Load Models</button>
-                    <div id="modelsList"
-                        style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                        <p style="color: var(--text-secondary);">Click "Load Models" to fetch...</p>
-                    </div>
-                </div>
-
-                <div class="market-section">
-                    <div class="section-title" style="margin-bottom: 20px;">📚 Datasets Registry</div>
-                    <button class="refresh-btn" onclick="loadDatasets()" style="margin-bottom: 15px;">Load
-                        Datasets</button>
-                    <div id="datasetsList"
-                        style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                        <p style="color: var(--text-secondary);">Click "Load Datasets" to fetch...</p>
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">🔍 Search Registry</div>
-                <div class="form-group">
-                    <input type="text" class="form-input" id="searchQuery"
-                        placeholder="Search query (e.g., crypto, bitcoin, sentiment)" value="crypto">
-                </div>
-                <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                    <button class="refresh-btn" onclick="doSearch()">Search Models</button>
-                    <button class="refresh-btn" onclick="doSearchDatasets()">Search Datasets</button>
-                </div>
-                <div id="searchResults"
-                    style="max-height: 300px; overflow-y: auto; background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 8px;">
-                    <p style="color: var(--text-secondary);">Enter a query and click search...</p>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">
-                    <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
-                    Sentiment Analysis
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Enter text samples (one per line):</label>
-                    <textarea class="form-textarea" id="sentimentTexts" rows="5"
-                        placeholder="BTC strong breakout&#10;ETH looks weak&#10;Market sentiment is bullish">BTC strong breakout
-ETH looks weak
-Crypto market is bullish today</textarea>
-                </div>
-                <button class="refresh-btn ripple" onclick="doSentiment()">
-                    <span class="icon icon-sm"><svg><use href="#icon-brain"></use></svg></span>
-                    Run Sentiment Analysis
-                </button>
-                <div id="voteDisplay"
-                    style="margin-top: 20px; padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; text-align: center; font-size: 36px; font-weight: 900;">
-                    —</div>
-                <pre id="sentimentOutput"
-                    style="background: #1e293b; color: #e2e8f0; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 12px; margin-top: 15px; max-height: 300px; overflow-y: auto;">Results will appear here...</pre>
-            </div>
-        </div>
-
-        <!-- Logs Tab -->
-        <div id="tab-logs" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md"><svg><use href="#icon-logs"></use></svg></span>
-                        Log Management
-                    </div>
-                    <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn ripple" onclick="loadLogs()">
-                            <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                            Refresh
-                        </button>
-                        <button class="refresh-btn ripple" onclick="exportLogsJSON()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
-                            <span class="icon icon-sm"><svg><use href="#icon-export"></use></svg></span>
-                            Export JSON
-                        </button>
-                        <button class="refresh-btn ripple" onclick="exportLogsCSV()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
-                            <span class="icon icon-sm"><svg><use href="#icon-reports"></use></svg></span>
-                            Export CSV
-                        </button>
-                        <button class="refresh-btn ripple" onclick="clearAllLogs()"
-                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">
-                            <span class="icon icon-sm"><svg><use href="#icon-delete"></use></svg></span>
-                            Clear
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Filters -->
-                <div
-                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
-                    <div class="form-group">
-                        <label class="form-label">Level</label>
-                        <select class="form-select" id="logLevelFilter" onchange="loadLogs()">
-                            <option value="">All Levels</option>
-                            <option value="debug">Debug</option>
-                            <option value="info">Info</option>
-                            <option value="warning">Warning</option>
-                            <option value="error">Error</option>
-                            <option value="critical">Critical</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Category</label>
-                        <select class="form-select" id="logCategoryFilter" onchange="loadLogs()">
-                            <option value="">All Categories</option>
-                            <option value="provider">Provider</option>
-                            <option value="pool">Pool</option>
-                            <option value="api">API</option>
-                            <option value="system">System</option>
-                            <option value="health_check">Health Check</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Search</label>
-                        <input type="text" class="form-input" id="logSearch" placeholder="Search logs..."
-                            onkeyup="loadLogs()">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Limit</label>
-                        <input type="number" class="form-input" id="logLimit" value="100" min="10" max="1000"
-                            onchange="loadLogs()">
-                    </div>
-                </div>
-
-                <!-- Log Stats -->
-                <div class="stats-grid" style="margin-bottom: 20px;">
-                    <div class="stat-card">
-                        <div class="stat-value" id="totalLogs">0</div>
-                        <div class="stat-label">Total Logs</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="errorLogs" style="color: var(--accent-red);">0</div>
-                        <div class="stat-label">Errors</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="infoLogs" style="color: var(--accent-blue);">0</div>
-                        <div class="stat-label">Info</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="warningLogs" style="color: var(--accent-yellow);">0</div>
-                        <div class="stat-label">Warnings</div>
-                    </div>
-                </div>
-
-                <!-- Logs Table -->
-                <div style="overflow-x: auto;">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>Time</th>
-                                <th>Level</th>
-                                <th>Category</th>
-                                <th>Message</th>
-                                <th>Provider</th>
-                                <th>Response Time</th>
-                            </tr>
-                        </thead>
-                        <tbody id="logsTableBody">
-                            <tr>
-                                <td colspan="6" style="text-align: center;">Loading logs...</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-
-        <!-- Resources Tab -->
-        <div id="tab-resources" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">📦 Resource Management</div>
-                    <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn" onclick="loadResources()">🔄 Refresh</button>
-                        <button class="refresh-btn" onclick="exportResourcesJSON()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">💾 Export
-                            JSON</button>
-                        <button class="refresh-btn" onclick="exportResourcesCSV()"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">📊 Export
-                            CSV</button>
-                        <button class="refresh-btn" onclick="backupResources()"
-                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">💾 Backup</button>
-                        <button class="refresh-btn" onclick="showImportModal()"
-                            style="background: rgba(139, 92, 246, 0.2); color: var(--accent-purple);">📥 Import</button>
-                    </div>
-                </div>
-
-                <!-- Resource Stats -->
-                <div class="stats-grid" style="margin-bottom: 20px;">
-                    <div class="stat-card">
-                        <div class="stat-value" id="totalResources">0</div>
-                        <div class="stat-label">Total Resources</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="freeResources" style="color: var(--accent-green);">0</div>
-                        <div class="stat-label">Free APIs</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="paidResources" style="color: var(--accent-yellow);">0</div>
-                        <div class="stat-label">Paid APIs</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" id="authResources">0</div>
-                        <div class="stat-label">Requires Auth</div>
-                    </div>
-                </div>
-
-                <!-- Category Filter -->
-                <div style="margin-bottom: 20px;">
-                    <label class="form-label">Filter by Category</label>
-                    <select class="form-select" id="resourceCategoryFilter" onchange="loadResources()"
-                        style="max-width: 300px;">
-                        <option value="">All Categories</option>
-                        <option value="market_data">Market Data</option>
-                        <option value="exchange">Exchange</option>
-                        <option value="blockchain_explorer">Block Explorer</option>
-                        <option value="rpc">RPC</option>
-                        <option value="defi">DeFi</option>
-                        <option value="news">News</option>
-                        <option value="sentiment">Sentiment</option>
-                        <option value="analytics">Analytics</option>
-                    </select>
-                </div>
-
-                <!-- Resources Grid -->
-                <div id="resourcesGrid"
-                    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px;">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Import Modal -->
-        <div id="importModal" class="modal">
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h2 style="font-size: 24px; font-weight: 800;">📥 Import Resources</h2>
-                    <button onclick="closeImportModal()"
-                        style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer;">×</button>
-                </div>
-                <form id="importForm">
-                    <div class="form-group">
-                        <label class="form-label">File Path</label>
-                        <input type="text" class="form-input" id="importFilePath" placeholder="path/to/file.json"
-                            required>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Import Mode</label>
-                        <select class="form-select" id="importMode">
-                            <option value="true">Merge (Add to existing)</option>
-                            <option value="false">Replace (Overwrite all)</option>
-                        </select>
-                    </div>
-                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
-                        <button type="button" class="refresh-btn" onclick="closeImportModal()"
-                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
-                        <button type="submit" class="refresh-btn">Import</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Reports Tab -->
-        <div id="tab-reports" class="tab-content">
-            <!-- System Status Alerts -->
-            <div class="market-section" id="systemAlertsSection" style="display: none;">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md status-icon-warning"><svg><use href="#icon-warning"></use></svg></span>
-                        System Status & Alerts
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadSystemAlerts()">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        Refresh
-                    </button>
-                </div>
-                <div id="systemAlertsContainer"></div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md"><svg><use href="#icon-search"></use></svg></span>
-                        System Diagnostics
-                    </div>
-                    <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn ripple" onclick="runDiagnostics(false)"
-                            style="background: rgba(59, 130, 246, 0.2); color: var(--accent-blue);">
-                            <span class="icon icon-sm"><svg><use href="#icon-search"></use></svg></span>
-                            بررسی
-                        </button>
-                        <button class="refresh-btn ripple" onclick="runDiagnostics(true)"
-                            style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green);">
-                            <span class="icon icon-sm"><svg><use href="#icon-settings"></use></svg></span>
-                            بررسی و تعمیر
-                        </button>
-                        <button class="refresh-btn ripple" onclick="loadReports()">
-                            <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                            به‌روزرسانی
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Diagnostics Results -->
-                <div id="diagnosticsResults" style="margin-top: 20px;">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md"><svg><use href="#icon-pools"></use></svg></span>
-                        Auto-Discovery Service Report
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadDiscoveryReport()">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        به‌روزرسانی
-                    </button>
-                </div>
-                <div id="discoveryReport">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">
-                        <span class="icon icon-md"><svg><use href="#icon-brain"></use></svg></span>
-                        HuggingFace Models Status Report
-                    </div>
-                    <button class="refresh-btn ripple" onclick="loadModelsReport()">
-                        <span class="icon icon-sm"><svg><use href="#icon-refresh"></use></svg></span>
-                        به‌روزرسانی
-                    </button>
-                </div>
-                <div id="modelsReport">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Pools Tab -->
-        <div id="tab-pools" class="tab-content">
-            <div class="market-section">
-                <div class="section-header">
-                    <div class="section-title">🔄 Source Pool Management</div>
-                    <div style="display: flex; gap: 10px;">
-                        <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
-                        <button class="refresh-btn" onclick="loadPools()">🔄 Refresh</button>
-                    </div>
-                </div>
-                <div id="poolsContainer"
-                    style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px;">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="market-section">
-                <div class="section-title" style="margin-bottom: 20px;">📜 Rotation History</div>
-                <div id="rotationHistory" style="max-height: 400px; overflow-y: auto;">
-                    <div class="loading">
-                        <div class="spinner"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Create Pool Modal -->
-        <div id="createPoolModal" class="modal">
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h2 style="font-size: 24px; font-weight: 800;">➕ Create New Pool</h2>
-                    <button onclick="closeCreatePoolModal()"
-                        style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
-                </div>
-                <form id="createPoolForm">
-                    <div class="form-group">
-                        <label class="form-label">Pool Name</label>
-                        <input type="text" class="form-input" id="poolName" required
-                            placeholder="e.g., Market Data Pool">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Category</label>
-                        <select class="form-select" id="poolCategory" required>
-                            <option value="market_data">Market Data</option>
-                            <option value="blockchain_explorers">Blockchain Explorers</option>
-                            <option value="news">News & Social</option>
-                            <option value="sentiment">Sentiment</option>
-                            <option value="defi">DeFi</option>
-                            <option value="nft">NFT</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Rotation Strategy</label>
-                        <select class="form-select" id="rotationStrategy" required>
-                            <option value="round_robin">Round Robin</option>
-                            <option value="priority">Priority Based</option>
-                            <option value="weighted">Weighted</option>
-                            <option value="least_used">Least Used</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Description (optional)</label>
-                        <textarea class="form-textarea" id="poolDescription" rows="3"
-                            placeholder="Pool description..."></textarea>
-                    </div>
-                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
-                        <button type="button" class="refresh-btn" onclick="closeCreatePoolModal()"
-                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
-                        <button type="submit" class="refresh-btn">Create Pool</button>
-                    </div>
-                </form>
-            </div>
-        </div>
-
-        <!-- Add Member Modal -->
-        <div id="addMemberModal" class="modal">
-            <div class="modal-content">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <h2 style="font-size: 24px; font-weight: 800;">➕ Add Provider to Pool</h2>
-                    <button onclick="closeAddMemberModal()"
-                        style="background: none; border: none; color: var(--text-secondary); font-size: 28px; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">×</button>
-                </div>
-                <form id="addMemberForm">
-                    <div class="form-group">
-                        <label class="form-label">Provider</label>
-                        <select class="form-select" id="memberProvider" required>
-                            <option value="">Select a provider...</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Priority (1-10, higher = better)</label>
-                        <input type="number" class="form-input" id="memberPriority" value="1" min="1" max="10">
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label">Weight (1-100, for weighted strategy)</label>
-                        <input type="number" class="form-input" id="memberWeight" value="1" min="1" max="100">
-                    </div>
-                    <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px;">
-                        <button type="button" class="refresh-btn" onclick="closeAddMemberModal()"
-                            style="background: rgba(239, 68, 68, 0.2); color: var(--accent-red);">Cancel</button>
-                        <button type="submit" class="refresh-btn">Add Member</button>
-                    </div>
-                </form>
-            </div>
-        </div>
+        <h1>💎 Crypto Monitor HF</h1>
+        <p>Redirecting to dashboard...</p>
+        <div class="spinner"></div>
+        <p><small>If you are not redirected automatically, <a href="/unified_dashboard.html">click here</a>.</small></p>
     </div>
-
-    <script>
-        // Global variables
-        let charts = {};
-        let wsConnection = null;
-        let currentTab = 'market';
-
-        // Tab switching
-        function switchTab(tabName) {
-            currentTab = tabName;
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
-
-            event.target.classList.add('active');
-            document.getElementById(`tab-${tabName}`).classList.add('active');
-
-            // Load data for specific tabs
-            if (tabName === 'market') {
-                loadMarketData();
-            } else if (tabName === 'monitor') {
-                loadMonitorData();
-            } else if (tabName === 'advanced') {
-                loadAdvancedData();
-            } else if (tabName === 'admin') {
-                loadAdminData();
-            } else if (tabName === 'hf') {
-                loadHFHealth();
-            } else if (tabName === 'pools') {
-                loadPools();
-            } else if (tabName === 'logs') {
-                loadLogs();
-            } else if (tabName === 'resources') {
-                loadResources();
-            } else if (tabName === 'reports') {
-                loadReports();
-            }
-        }
-
-        // Initialize
-        document.addEventListener('DOMContentLoaded', async () => {
-            await loadMarketData();
-            initCharts();
-            connectWebSocket();
-            setInterval(() => {
-                if (currentTab === 'market') loadMarketData();
-                else if (currentTab === 'monitor') loadMonitorData();
-            }, 60000);
-        });
-
-        // Market Data Functions
-        async function loadMarketData() {
-            try {
-                // Show loading state
-                const marketTableBody = document.getElementById('marketTableBody');
-                if (marketTableBody) {
-                    marketTableBody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px;"><div class="loading"><div class="spinner"></div></div><div style="margin-top: 10px; color: var(--text-secondary);">در حال بارگذاری داده‌های بازار...</div></td></tr>';
-                }
-
-                showProgress(60);
-                
-                const [marketRes, statsRes, sentimentRes, trendingRes, defiRes] = await Promise.all([
-                    fetch('/api/market'),
-                    fetch('/api/stats'),
-                    fetch('/api/sentiment'),
-                    fetch('/api/trending'),
-                    fetch('/api/defi')
-                ]);
-                
-                showProgress(80);
-
-                // Check if responses are OK
-                if (!marketRes.ok) throw new Error(`خطا در دریافت داده‌های بازار: ${marketRes.status}`);
-                if (!statsRes.ok) throw new Error(`خطا در دریافت آمار: ${statsRes.status}`);
-                if (!sentimentRes.ok) throw new Error(`خطا در دریافت احساسات: ${sentimentRes.status}`);
-                if (!trendingRes.ok) throw new Error(`خطا در دریافت ترندها: ${trendingRes.status}`);
-                if (!defiRes.ok) throw new Error(`خطا در دریافت DeFi: ${defiRes.status}`);
-
-                const [market, stats, sentiment, trending, defi] = await Promise.all([
-                    marketRes.json(),
-                    statsRes.json(),
-                    sentimentRes.json(),
-                    trendingRes.json(),
-                    defiRes.json()
-                ]);
-
-                // Validate data with more detailed checks
-                if (!market || !Array.isArray(market.cryptocurrencies)) {
-                    throw new Error('داده‌های بازار نامعتبر است: cryptocurrencies array not found');
-                }
-                if (!stats || typeof stats !== 'object' || stats === null) {
-                    console.error('Invalid stats:', stats);
-                    throw new Error('آمار نامعتبر است: stats object not found');
-                }
-                // Check if stats.market exists and is an object
-                if (!stats.market || typeof stats.market !== 'object' || stats.market === null || Array.isArray(stats.market)) {
-                    console.error('Invalid stats.market:', stats.market);
-                    console.error('Full stats object:', JSON.stringify(stats, null, 2));
-                    throw new Error('آمار نامعتبر است: stats.market object not found');
-                }
-                if (!sentiment || typeof sentiment !== 'object' || sentiment === null) {
-                    throw new Error('داده‌های احساسات نامعتبر است: sentiment object not found');
-                }
-                // Note: sentiment can have different structures:
-                // - sentiment.fear_greed_index (from /api/sentiment)
-                // - sentiment.fear_greed_value (from /api/stats)
-                // So we don't validate the exact structure here
-                if (!trending || !Array.isArray(trending.trending)) {
-                    throw new Error('داده‌های ترند نامعتبر است: trending array not found');
-                }
-                if (!defi || typeof defi !== 'object' || defi === null) {
-                    throw new Error('داده‌های DeFi نامعتبر است: defi object not found');
-                }
-
-                // Call updateStats with validated data - double check before calling
-                if (stats && stats.market && typeof stats.market === 'object' && !Array.isArray(stats.market)) {
-                updateStats(stats, sentiment);
-                } else {
-                    console.error('Failed final validation before updateStats:', { stats, sentiment });
-                    throw new Error('داده‌های stats.market نامعتبر است');
-                }
-                updateMarketTable(market.cryptocurrencies);
-                updateTrending(trending.trending);
-                updateDeFi(defi);
-                updateCharts(market, sentiment);
-            } catch (error) {
-                console.error('Error loading market data:', error);
-                const marketTableBody = document.getElementById('marketTableBody');
-                if (marketTableBody) {
-                    marketTableBody.innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--accent-red);">
-                        <div style="font-size: 24px; margin-bottom: 10px;">❌</div>
-                        <div style="font-weight: 600; margin-bottom: 5px;">خطا در بارگذاری داده‌ها</div>
-                        <div style="font-size: 14px; color: var(--text-secondary);">${error.message || 'خطای نامشخص'}</div>
-                        <button onclick="loadMarketData()" style="margin-top: 15px; padding: 10px 20px; background: var(--accent-blue); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600;">تلاش مجدد</button>
-                    </td></tr>`;
-                }
-                showToast('❌ خطا در بارگذاری داده‌های بازار: ' + (error.message || 'خطای نامشخص'), 'error');
-            }
-        }
-
-        function updateStats(stats, sentiment) {
-            try {
-                // More robust validation with detailed checks
-                if (!stats || typeof stats !== 'object' || stats === null) {
-                    console.warn('updateStats: stats is undefined, null, or not an object', stats);
-                    return;
-                }
-                if (!stats.market || typeof stats.market !== 'object' || stats.market === null || Array.isArray(stats.market)) {
-                    console.warn('updateStats: stats.market is invalid', { stats, market: stats.market });
-                    return;
-                }
-                if (!sentiment || typeof sentiment !== 'object' || sentiment === null) {
-                    console.warn('updateStats: sentiment is undefined, null, or not an object', sentiment);
-                    return;
-                }
-
-                // Use safe property access for market data with additional checks
-                const marketObj = stats.market;
-                if (!marketObj || typeof marketObj !== 'object' || marketObj === null) {
-                    console.warn('updateStats: marketObj is invalid', marketObj);
-                    return;
-                }
-                
-                const mcap = (typeof marketObj.total_market_cap !== 'undefined' && marketObj.total_market_cap !== null) ? marketObj.total_market_cap : 0;
-                const totalMarketCapEl = document.getElementById('totalMarketCap');
-                if (totalMarketCapEl) {
-                    totalMarketCapEl.textContent = '$' + (mcap / 1e12).toFixed(2) + 'T';
-                }
-
-                const volume = (typeof marketObj.total_volume !== 'undefined' && marketObj.total_volume !== null) ? marketObj.total_volume : 0;
-                const totalVolumeEl = document.getElementById('totalVolume');
-                if (totalVolumeEl) {
-                    totalVolumeEl.textContent = '$' + (volume / 1e9).toFixed(2) + 'B';
-                }
-
-                const btcDom = (typeof marketObj.btc_dominance !== 'undefined' && marketObj.btc_dominance !== null) ? marketObj.btc_dominance : 0;
-                const btcDominanceEl = document.getElementById('btcDominance');
-                if (btcDominanceEl) {
-                    btcDominanceEl.textContent = btcDom.toFixed(1) + '%';
-                }
-
-                // Handle sentiment data - support both structures:
-                // 1. sentiment.fear_greed_index.value (from /api/sentiment)
-                // 2. sentiment.fear_greed_value (from /api/stats)
-                let fg = 50;
-                let classification = 'Neutral';
-                
-                if (sentiment.fear_greed_index && typeof sentiment.fear_greed_index === 'object') {
-                    // Structure from /api/sentiment endpoint
-                    fg = (typeof sentiment.fear_greed_index.value !== 'undefined') ? sentiment.fear_greed_index.value : 50;
-                    classification = sentiment.fear_greed_index.classification || 'Neutral';
-                } else if (typeof sentiment.fear_greed_value !== 'undefined') {
-                    // Structure from /api/stats endpoint
-                    fg = sentiment.fear_greed_value;
-                    classification = sentiment.classification || 'Neutral';
-                } else if (typeof sentiment.value !== 'undefined') {
-                    // Fallback structure
-                    fg = sentiment.value;
-                    classification = sentiment.classification || 'Neutral';
-                }
-
-                const fearGreedEl = document.getElementById('fearGreed');
-                if (fearGreedEl) {
-                    fearGreedEl.textContent = fg;
-                }
-                const sentimentLabelEl = document.getElementById('sentimentLabel');
-                if (sentimentLabelEl) {
-                    sentimentLabelEl.innerHTML = `<span>${classification}</span>`;
-                    
-            if (fg < 25) {
-                        sentimentLabelEl.style.color = 'var(--accent-red)';
-            } else if (fg < 45) {
-                        sentimentLabelEl.style.color = 'var(--accent-yellow)';
-            } else if (fg < 55) {
-                        sentimentLabelEl.style.color = 'var(--text-secondary)';
-            } else if (fg < 75) {
-                        sentimentLabelEl.style.color = 'var(--accent-blue)';
-            } else {
-                        sentimentLabelEl.style.color = 'var(--accent-green)';
-                    }
-                }
-            } catch (error) {
-                console.error('Error updating stats:', error);
-                console.error('Stats object:', stats);
-                console.error('Sentiment object:', sentiment);
-            }
-        }
-
-        function updateMarketTable(cryptos) {
-            try {
-                if (!cryptos || !Array.isArray(cryptos) || cryptos.length === 0) {
-            const tbody = document.getElementById('marketTableBody');
-                    if (tbody) {
-                        tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ داده‌ای یافت نشد</td></tr>';
-                    }
-                    return;
-                }
-
-                const tbody = document.getElementById('marketTableBody');
-                if (!tbody) return;
-
-                // Store data for filtering
-                marketDataCache = cryptos;
-                
-                tbody.innerHTML = cryptos.map((crypto, index) => {
-                    const price = crypto.price || 0;
-                    const change24h = crypto.change_24h || 0;
-                    const marketCap = crypto.market_cap || 0;
-                    const volume24h = crypto.volume_24h || 0;
-                    const symbol = crypto.symbol || 'N/A';
-                    const name = crypto.name || 'نامشخص';
-                    const changeClass = change24h >= 0 ? 'positive' : 'negative';
-                    const changeIcon = change24h >= 0 ? '📈' : '📉';
-
-                    return `
-                        <tr data-name="${name.toLowerCase()}" data-symbol="${symbol.toLowerCase()}" data-change="${change24h}" data-rank="${crypto.rank || index + 1}">
-                    <td style="font-weight: 700; color: var(--text-secondary);">${crypto.rank || index + 1}</td>
-                    <td>
-                        <div class="crypto-name">
-                                    ${crypto.image ? `<img src="${crypto.image}" class="crypto-img" alt="${symbol}" onerror="this.style.display='none'">` :
-                                `<div class="crypto-img" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-weight: 700; color: white;">${symbol[0] || '?'}</div>`}
-                            <div>
-                                        <div style="font-weight: 600;">${name}</div>
-                                        <div class="crypto-symbol">${symbol}</div>
-                            </div>
-                        </div>
-                    </td>
-                            <td class="price number-counter">$${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}</td>
-                            <td><span class="change ${changeClass} pulse-data">${changeIcon} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%</span></td>
-                            <td style="font-weight: 600;">$${(marketCap / 1e9).toFixed(2)}B</td>
-                            <td style="color: var(--text-secondary);">$${(volume24h / 1e9).toFixed(2)}B</td>
-                </tr>
-                    `;
-                }).join('');
-            } catch (error) {
-                console.error('Error updating market table:', error);
-                const tbody = document.getElementById('marketTableBody');
-                if (tbody) {
-                    tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش داده‌ها</td></tr>';
-                }
-            }
-        }
-
-        function updateTrending(trending) {
-            try {
-            const grid = document.getElementById('trendingGrid');
-                if (!grid) return;
-
-                if (!trending || !Array.isArray(trending) || trending.length === 0) {
-                    grid.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ ترندی یافت نشد</div>';
-                    return;
-                }
-
-                grid.innerHTML = trending.map((coin, index) => {
-                    const name = coin.name || 'نامشخص';
-                    const symbol = coin.symbol || 'N/A';
-                    return `
-                <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; padding: 15px; display: flex; align-items: center; gap: 12px;">
-                    <div style="font-size: 20px; font-weight: 900; color: var(--accent-yellow);">#${index + 1}</div>
-                            ${coin.thumb ? `<img src="${coin.thumb}" style="width: 32px; height: 32px; border-radius: 8px;" onerror="this.style.display='none'">` : ''}
-                    <div>
-                                <div style="font-weight: 600;">${name}</div>
-                                <div style="font-size: 12px; color: var(--text-secondary);">${symbol}</div>
-                    </div>
-                </div>
-                    `;
-                }).join('');
-            } catch (error) {
-                console.error('Error updating trending:', error);
-                const grid = document.getElementById('trendingGrid');
-                if (grid) {
-                    grid.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش ترندها</div>';
-                }
-            }
-        }
-
-        function updateDeFi(defi) {
-            try {
-            const list = document.getElementById('defiList');
-                if (!list) return;
-
-                const protocols = defi && defi.protocols ? defi.protocols : [];
-                const totalTvl = defi && defi.total_tvl ? defi.total_tvl : 0;
-
-            list.innerHTML = `
-                    <div class="stat-card" style="margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));">
-                        <div class="stat-value gradient-text" style="font-size: 42px; margin-bottom: 8px;">$${(totalTvl / 1e9).toFixed(2)}B</div>
-                        <div class="stat-label" style="font-size: 16px;">Total Value Locked</div>
-                </div>
-                <div style="display: grid; gap: 12px;">
-                        ${protocols.length > 0 ? protocols.map((p, i) => {
-                            const name = p.name || 'نامشخص';
-                            const chain = p.chain || 'N/A';
-                            const tvl = p.tvl || 0;
-                            const change24h = p.change_24h || 0;
-                            const changeClass = change24h >= 0 ? 'positive' : 'negative';
-                            return `
-                                <div class="stat-card" style="animation-delay: ${i * 0.05}s; cursor: pointer;" onclick="showToast('${name}: $${(tvl / 1e9).toFixed(2)}B TVL', 'info', 'DeFi Protocol')">
-                                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                            <div>
-                                            <div style="font-weight: 700; font-size: 16px; margin-bottom: 4px;">${i + 1}. ${name}</div>
-                                            <div style="font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px;">
-                                                <span>🔗</span> <span>${chain}</span>
-                                            </div>
-                            </div>
-                            <div style="text-align: right;">
-                                            <div class="stat-value" style="font-size: 18px; margin-bottom: 4px;">$${(tvl / 1e9).toFixed(2)}B</div>
-                                            <div class="stat-change ${changeClass}" style="font-size: 13px;">
-                                                ${change24h >= 0 ? '📈' : '📉'} ${change24h >= 0 ? '+' : ''}${change24h.toFixed(2)}%
-                                </div>
-                            </div>
-                        </div>
-                </div>
-            `;
-                        }).join('') : '<div class="empty-state"><div class="empty-state-icon">📦</div><div>هیچ پروتکلی یافت نشد</div></div>'}
-                    </div>
-                `;
-            } catch (error) {
-                console.error('Error updating DeFi:', error);
-                const list = document.getElementById('defiList');
-                if (list) {
-                    list.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--accent-red);">خطا در نمایش داده‌های DeFi</div>';
-                }
-            }
-        }
-
-        function initCharts() {
-            Chart.defaults.color = '#9ca3af';
-            Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
-
-            charts.dominance = new Chart(document.getElementById('dominanceChart'), {
-                type: 'doughnut',
-                data: {
-                    labels: ['Bitcoin', 'Ethereum', 'Others'],
-                    datasets: [{
-                        data: [45, 18, 37],
-                        backgroundColor: ['#f7931a', '#627eea', '#8b5cf6'],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: { position: 'bottom', labels: { padding: 15, font: { size: 12, weight: 600 } } }
-                    }
-                }
-            });
-
-            charts.gauge = new Chart(document.getElementById('gaugeChart'), {
-                type: 'doughnut',
-                data: {
-                    datasets: [{
-                        data: [50, 50],
-                        backgroundColor: ['#3b82f6', 'rgba(255, 255, 255, 0.1)'],
-                        borderWidth: 0
-                    }]
-                },
-                options: {
-                    rotation: -90,
-                    circumference: 180,
-                    cutout: '75%',
-                    plugins: { legend: { display: false }, tooltip: { enabled: false } }
-                }
-            });
-        }
-
-        function updateCharts(market, sentiment) {
-            const btcDom = market.global.btc_dominance;
-            const ethDom = market.global.eth_dominance;
-            charts.dominance.data.datasets[0].data = [btcDom, ethDom, 100 - btcDom - ethDom];
-            charts.dominance.update();
-
-            const fg = sentiment.fear_greed_index.value;
-            charts.gauge.data.datasets[0].data = [fg, 100 - fg];
-
-            if (fg < 25) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#ef4444';
-            } else if (fg < 45) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#f59e0b';
-            } else if (fg < 55) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#6b7280';
-            } else if (fg < 75) {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#3b82f6';
-            } else {
-                charts.gauge.data.datasets[0].backgroundColor[0] = '#10b981';
-            }
-
-            charts.gauge.update();
-            document.getElementById('sentimentValue').textContent = fg;
-            document.getElementById('sentimentText').textContent = sentiment.fear_greed_index.classification;
-        }
-
-        // استفاده از WebSocket Client جدید
-        let wsConnectAttempts = 0;
-        const MAX_WS_CONNECT_ATTEMPTS = 10; // حداکثر 10 تلاش (10 ثانیه)
-        let wsStatsInterval = null;
-
-        function connectWebSocket() {
-            // WebSocket client از websocket-client.js استفاده می‌شود
-            // که به صورت خودکار اتصال برقرار می‌کند
-
-            // بررسی وجود wsClient و متدهای مورد نیاز
-            if (window.wsClient && typeof window.wsClient.on === 'function' && typeof window.wsClient.requestStats === 'function') {
-                console.log('✅ WebSocket Client آماده است');
-                wsConnectAttempts = 0; // Reset counter on success
-
-                // ثبت handler برای به‌روزرسانی آمار
-                window.wsClient.on('stats_update', (message) => {
-                    console.log('📊 Stats update:', message.data);
-                    if (typeof updateOnlineStats === 'function') {
-                    updateOnlineStats(message.data);
-                    }
-                });
-
-                window.wsClient.on('provider_stats', (message) => {
-                    console.log('📡 Provider stats:', message.data);
-                    if (currentTab === 'monitor' && typeof updateProviderStatsDisplay === 'function') {
-                        updateProviderStatsDisplay(message.data);
-                    }
-                });
-
-                window.wsClient.on('market_update', (message) => {
-                    console.log('💰 Market update');
-                    if (currentTab === 'market') {
-                        loadMarketData();
-                    }
-                });
-
-                // درخواست آمار اولیه
-                setTimeout(() => {
-                    if (window.wsClient && window.wsClient.isConnected) {
-                        window.wsClient.requestStats();
-                    }
-                }, 1000);
-
-                // درخواست آمار هر 10 ثانیه (فقط یک بار تنظیم شود)
-                if (!wsStatsInterval) {
-                    wsStatsInterval = setInterval(() => {
-                    if (window.wsClient && window.wsClient.isConnected) {
-                        window.wsClient.requestStats();
-                    }
-                }, 10000);
-                }
-            } else {
-                wsConnectAttempts++;
-                if (wsConnectAttempts < MAX_WS_CONNECT_ATTEMPTS) {
-                    // فقط هر 5 ثانیه یک بار لاگ کنیم تا console پر نشود
-                    if (wsConnectAttempts % 5 === 0 || wsConnectAttempts === 1) {
-                        console.log(`⏳ در انتظار WebSocket Client... (${wsConnectAttempts}/${MAX_WS_CONNECT_ATTEMPTS})`);
-                    }
-                setTimeout(connectWebSocket, 1000);
-                } else {
-                    console.warn('⚠️ WebSocket Client پس از ' + MAX_WS_CONNECT_ATTEMPTS + ' تلاش آماده نشد. ممکن است فایل websocket-client.js لود نشده باشد یا WebSocket پشتیبانی نشود.');
-                    console.warn('⚠️ بررسی کنید که فایل /static/js/websocket-client.js به درستی لود شده باشد.');
-                    // تلاش نهایی بعد از 5 ثانیه
-                    setTimeout(() => {
-                        if (!window.wsClient) {
-                            console.warn('⚠️ WebSocket Client غیرفعال است. برخی ویژگی‌های real-time ممکن است کار نکنند.');
-                            console.warn('⚠️ برای فعال کردن WebSocket، صفحه را refresh کنید (Ctrl+F5 برای clear cache).');
-                        }
-                    }, 5000);
-                    // متوقف کردن تلاش‌های بیشتر
-                    return;
-                }
-            }
-        }
-
-        // تابع برای به‌روزرسانی آمار آنلاین
-        function updateOnlineStats(data) {
-            const activeEl = document.getElementById('active-users-count');
-            const totalEl = document.getElementById('total-sessions-count');
-
-            if (data.active_connections !== undefined && activeEl) {
-                activeEl.textContent = data.active_connections;
-                // اضافه کردن انیمیشن
-                activeEl.classList.add('count-updated');
-                setTimeout(() => activeEl.classList.remove('count-updated'), 500);
-            }
-
-            if (data.total_sessions !== undefined && totalEl) {
-                totalEl.textContent = data.total_sessions;
-            }
-        }
-
-        // تابع برای به‌روزرسانی نمایش آمار Provider
-        function updateProviderStatsDisplay(stats) {
-            if (stats.summary) {
-                const summary = stats.summary;
-                if (document.getElementById('totalAPIs')) {
-                    document.getElementById('totalAPIs').textContent = summary.total_providers || 0;
-                }
-                if (document.getElementById('onlineAPIs')) {
-                    document.getElementById('onlineAPIs').textContent = summary.online || 0;
-                }
-                if (document.getElementById('offlineAPIs')) {
-                    document.getElementById('offlineAPIs').textContent = summary.offline || 0;
-                }
-            }
-        }
-
-        // Monitor Functions
-        async function loadMonitorData() {
-            try {
-                // Show loading state
-                const tbody = document.getElementById('providersTable');
-                if (tbody) {
-                    tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 40px;"><div class="loading"><div class="spinner"></div></div><div style="margin-top: 10px; color: var(--text-secondary);">در حال بارگذاری وضعیت APIها...</div></td></tr>';
-                }
-
-                const [statusRes, providersRes] = await Promise.all([
-                    fetch('/api/status'),
-                    fetch('/api/providers')
-                ]);
-
-                // Check if responses are OK
-                if (!statusRes.ok) throw new Error(`خطا در دریافت وضعیت: ${statusRes.status}`);
-                if (!providersRes.ok) throw new Error(`خطا در دریافت لیست APIها: ${providersRes.status}`);
-
-                const [status, providers] = await Promise.all([
-                    statusRes.json(),
-                    providersRes.json()
-                ]);
-
-                // Validate data
-                if (!status || typeof status.total_providers === 'undefined') throw new Error('داده‌های وضعیت نامعتبر است');
-                if (!providers || !Array.isArray(providers)) throw new Error('لیست APIها نامعتبر است');
-
-                if (document.getElementById('totalAPIs')) {
-                    document.getElementById('totalAPIs').textContent = status.total_providers || 0;
-                }
-                if (document.getElementById('onlineAPIs')) {
-                    document.getElementById('onlineAPIs').textContent = status.online || 0;
-                }
-                if (document.getElementById('offlineAPIs')) {
-                    document.getElementById('offlineAPIs').textContent = status.offline || 0;
-                }
-                if (document.getElementById('avgResponse')) {
-                    document.getElementById('avgResponse').textContent = (status.avg_response_time_ms || 0) + 'ms';
-                }
-
-                if (tbody) {
-                    if (providers.length === 0) {
-                        tbody.innerHTML = '<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ APIای یافت نشد</td></tr>';
-                    } else {
-                tbody.innerHTML = providers.map(p => {
-                    let statusClass = 'badge-success';
-                    if (p.status === 'offline') statusClass = 'badge-danger';
-                    else if (p.status === 'degraded') statusClass = 'badge-warning';
-
-                    return `
-                        <tr>
-                                    <td><strong>${p.name || 'نامشخص'}</strong></td>
-                                    <td><span class="badge badge-info">${p.category || 'نامشخص'}</span></td>
-                                    <td><span class="badge ${statusClass}">${(p.status || 'unknown').toUpperCase()}</span></td>
-                                    <td>${p.response_time_ms || p.avg_response_time_ms || 0}ms</td>
-                                    <td style="color: var(--text-secondary); font-size: 13px;">${p.last_fetch ? new Date(p.last_fetch).toLocaleTimeString() : 'نامشخص'}</td>
-                        </tr>
-                    `;
-                }).join('');
-                    }
-                }
-            } catch (error) {
-                console.error('Error loading monitor data:', error);
-                const tbody = document.getElementById('providersTable');
-                if (tbody) {
-                    tbody.innerHTML = `<tr><td colspan="5" style="text-align: center; padding: 40px; color: var(--accent-red);">
-                        <div style="font-size: 24px; margin-bottom: 10px;">❌</div>
-                        <div style="font-weight: 600; margin-bottom: 5px;">خطا در بارگذاری داده‌ها</div>
-                        <div style="font-size: 14px; color: var(--text-secondary);">${error.message || 'خطای نامشخص'}</div>
-                        <button onclick="loadMonitorData()" style="margin-top: 15px; padding: 10px 20px; background: var(--accent-blue); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600;">تلاش مجدد</button>
-                    </td></tr>`;
-                }
-                showToast('❌ خطا در بارگذاری داده‌های مانیتور: ' + (error.message || 'خطای نامشخص'), 'error');
-            }
-        }
-
-        async function runSentiment() {
-            const text = document.getElementById('sentimentText').value;
-            const texts = text.split('\n').filter(t => t.trim());
-
-            if (texts.length === 0) {
-                showToast('Please enter at least one line of text', 'info');
-                return;
-            }
-
-            try {
-                document.getElementById('sentimentResult').textContent = '⏳ Analyzing...';
-                document.getElementById('sentimentDetails').textContent = '';
-
-                const res = await fetch('/api/hf/run-sentiment', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
-                });
-
-                const data = await res.json();
-                const vote = data.vote || 0;
-                let emoji = '😐';
-                let color = 'var(--text-secondary)';
-
-                if (vote > 0.2) {
-                    emoji = '📈';
-                    color = 'var(--accent-green)';
-                } else if (vote < -0.2) {
-                    emoji = '📉';
-                    color = 'var(--accent-red)';
-                }
-
-                document.getElementById('sentimentResult').innerHTML = `<span style="color: ${color};">${emoji} ${vote.toFixed(3)}</span>`;
-                document.getElementById('sentimentDetails').textContent = JSON.stringify(data, null, 2);
-            } catch (error) {
-                document.getElementById('sentimentResult').innerHTML = '<span style="color: var(--accent-red);">❌ Error</span>';
-                document.getElementById('sentimentDetails').textContent = 'Error: ' + error.message;
-            }
-        }
-
-        // Advanced Functions
-        async function loadAdvancedData() {
-            try {
-                const response = await fetch('/api/v2/status');
-                const data = await response.json();
-
-                document.getElementById('totalApis').textContent = data.services.config_loader.apis_loaded;
-                document.getElementById('activeTasks').textContent = data.services.scheduler.total_tasks;
-                document.getElementById('cachedData').textContent = data.services.persistence.cached_apis;
-                document.getElementById('wsConnections').textContent = data.services.websocket.total_connections;
-
-                const apisResponse = await fetch('/api/v2/config/apis');
-                const apisData = await apisResponse.json();
-                displayAPIs(apisData.apis);
-            } catch (error) {
-                console.error('Error loading advanced data:', error);
-            }
-        }
-
-        function displayAPIs(apis) {
-            const listElement = document.getElementById('apiList');
-            listElement.innerHTML = '';
-
-            for (const [apiId, api] of Object.entries(apis)) {
-                const item = document.createElement('div');
-                item.style.cssText = 'background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;';
-                item.innerHTML = `
-                    <div>
-                        <div style="font-weight: 600;">${api.name}</div>
-                        <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
-                    </div>
-                    <button class="refresh-btn" onclick="forceUpdate('${apiId}')" style="padding: 6px 12px; font-size: 12px;">🔄 Update</button>
-                `;
-                listElement.appendChild(item);
-            }
-        }
-
-        async function exportJSON() {
-            try {
-                const response = await fetch('/api/v2/export/json', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ include_history: true })
-                });
-                const data = await response.json();
-                showToast('✅ JSON export created!', 'success');
-                addLog(`Exported to JSON: ${data.filepath}`);
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function exportCSV() {
-            try {
-                const response = await fetch('/api/v2/export/csv', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ flatten: true })
-                });
-                const data = await response.json();
-                showToast('✅ CSV export created!', 'success');
-                addLog(`Exported to CSV: ${data.filepath}`);
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function createBackup() {
-            try {
-                const response = await fetch('/api/v2/backup', { method: 'POST' });
-                const data = await response.json();
-                showToast('✅ Backup created!', 'success');
-                addLog(`Backup created: ${data.backup_file}`);
-            } catch (error) {
-                showToast('❌ Backup failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function clearCache() {
-            if (!confirm('Clear all cached data?')) return;
-            try {
-                await fetch('/api/v2/cleanup/cache', { method: 'POST' });
-                showToast('✅ Cache cleared!', 'success');
-                addLog('Cache cleared');
-            } catch (error) {
-                showToast('❌ Failed to clear cache', 'error');
-                console.error(error);
-            }
-        }
-
-        async function forceUpdateAll() {
-            try {
-                const response = await fetch('/api/v2/config/apis');
-                const data = await response.json();
-                for (const apiId of Object.keys(data.apis)) {
-                    await forceUpdate(apiId);
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                }
-                showToast('✅ All APIs updated!', 'success');
-            } catch (error) {
-                showToast('❌ Update failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function forceUpdate(apiId) {
-            try {
-                await fetch(`/api/v2/schedule/tasks/${apiId}/force-update`, { method: 'POST' });
-                addLog(`Forced update: ${apiId}`);
-            } catch (error) {
-                console.error(error);
-            }
-        }
-
-        function addLog(text) {
-            const logContainer = document.getElementById('activityLog');
-            const time = new Date().toLocaleTimeString();
-            const entry = document.createElement('div');
-            entry.style.cssText = 'padding: 10px; border-left: 3px solid var(--accent-blue); margin-bottom: 8px;';
-            entry.innerHTML = `<span style="opacity: 0.6;">${time}</span> ${text}`;
-            logContainer.insertBefore(entry, logContainer.firstChild);
-            while (logContainer.children.length > 50) {
-                logContainer.removeChild(logContainer.lastChild);
-            }
-        }
-
-        // Admin Functions
-        async function loadAdminData() {
-            try {
-                const [status, providers] = await Promise.all([
-                    fetch('/api/status').then(r => r.json()),
-                    fetch('/api/providers').then(r => r.json())
-                ]);
-
-                document.getElementById('statTotal').textContent = status.total_providers;
-                document.getElementById('statOnline').textContent = status.online;
-                document.getElementById('statOffline').textContent = status.offline;
-
-                const list = document.getElementById('apisList');
-                list.innerHTML = providers.map(api => `
-                    <div style="background: rgba(17, 24, 39, 0.6); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
-                        <div>
-                            <div style="font-weight: 600;">${api.name}</div>
-                            <div style="font-size: 12px; color: var(--text-secondary);">${api.category}</div>
-                        </div>
-                        <span class="badge ${api.status === 'online' ? 'badge-success' : 'badge-danger'}">${api.status.toUpperCase()}</span>
-                    </div>
-                `).join('');
-            } catch (error) {
-                console.error('Error loading admin data:', error);
-            }
-        }
-
-        async function addNewAPI() {
-            const name = document.getElementById('newApiName').value;
-            const url = document.getElementById('newApiUrl').value;
-            const category = document.getElementById('newApiCategory').value;
-
-            if (!name || !url) {
-                showToast('Please fill in API name and URL', 'info');
-                return;
-            }
-
-            showToast('✅ API added! Note: Restart server to activate.', 'success');
-            document.getElementById('newApiName').value = '';
-            document.getElementById('newApiUrl').value = '';
-            loadAdminData();
-        }
-
-        function saveSettings() {
-            const interval = document.getElementById('checkInterval').value;
-            const refresh = document.getElementById('dashboardRefresh').value;
-            localStorage.setItem('monitorSettings', JSON.stringify({ interval, refresh }));
-            showToast('✅ Settings saved!', 'success');
-        }
-
-        // HuggingFace Functions
-        async function loadHFHealth() {
-            try {
-                const data = await fetch('/api/hf/health').then(r => r.json());
-                document.getElementById('healthOutput').textContent = JSON.stringify(data, null, 2);
-            } catch (err) {
-                document.getElementById('healthOutput').textContent = `Error: ${err.message}`;
-            }
-        }
-
-        async function loadModels() {
-            try {
-                document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
-                // Mock data for now
-                document.getElementById('modelsList').innerHTML = '<p style="color: var(--text-secondary);">Models registry endpoint not implemented</p>';
-            } catch (err) {
-                document.getElementById('modelsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
-            }
-        }
-
-        async function loadDatasets() {
-            try {
-                document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Loading...</p>';
-                // Mock data for now
-                document.getElementById('datasetsList').innerHTML = '<p style="color: var(--text-secondary);">Datasets registry endpoint not implemented</p>';
-            } catch (err) {
-                document.getElementById('datasetsList').innerHTML = `<p style="color: var(--accent-red);">Error: ${err.message}</p>`;
-            }
-        }
-
-        async function doSearch() {
-            const q = document.getElementById('searchQuery').value;
-            document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching for "${q}"...</p>`;
-            // Mock search
-            document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
-        }
-
-        async function doSearchDatasets() {
-            const q = document.getElementById('searchQuery').value;
-            document.getElementById('searchResults').innerHTML = `<p style="color: var(--text-secondary);">Searching datasets for "${q}"...</p>`;
-            // Mock search
-            document.getElementById('searchResults').innerHTML = '<p style="color: var(--text-secondary);">Search endpoint not implemented</p>';
-        }
-
-        async function doSentiment() {
-            const texts = document.getElementById('sentimentTexts').value.split('\n').filter(t => t.trim());
-            if (texts.length === 0) {
-                showToast('Please enter at least one text sample', 'info');
-                return;
-            }
-            try {
-                document.getElementById('voteDisplay').innerHTML = '<span>⏳ Analyzing...</span>';
-                document.getElementById('sentimentOutput').textContent = 'Running sentiment analysis...';
-
-                const data = await fetch('/api/hf/run-sentiment', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ texts })
-                }).then(r => r.json());
-
-                const vote = data.vote || 0;
-                let voteClass = 'vote-neutral';
-                let voteEmoji = '😐';
-                if (vote > 0.2) { voteClass = 'vote-positive'; voteEmoji = '📈'; }
-                else if (vote < -0.2) { voteClass = 'vote-negative'; voteEmoji = '📉'; }
-
-                document.getElementById('voteDisplay').innerHTML = `<span style="color: ${voteClass === 'vote-positive' ? 'var(--accent-green)' : voteClass === 'vote-negative' ? 'var(--accent-red)' : 'var(--text-secondary)'};">${voteEmoji} ${vote.toFixed(3)}</span>`;
-                document.getElementById('sentimentOutput').textContent = JSON.stringify(data, null, 2);
-            } catch (err) {
-                document.getElementById('voteDisplay').innerHTML = '<span style="color: var(--accent-red);">Error</span>';
-                document.getElementById('sentimentOutput').textContent = `Error: ${err.message}`;
-            }
-        }
-
-        // Pools Functions
-        let currentPoolId = null;
-        let allProvidersList = [];
-
-        async function loadPools() {
-            try {
-                const [poolsRes, historyRes] = await Promise.all([
-                    fetch('/api/pools').then(r => r.json()),
-                    fetch('/api/pools/history?limit=20').then(r => r.json())
-                ]);
-
-                const pools = poolsRes.pools || [];
-                const container = document.getElementById('poolsContainer');
-
-                if (pools.length === 0) {
-                    container.innerHTML = `
-                        <div style="grid-column: 1/-1; text-align: center; padding: 40px; background: rgba(17, 24, 39, 0.6); border-radius: 20px; border: 2px dashed var(--border);">
-                            <div style="font-size: 48px; margin-bottom: 15px;">🔄</div>
-                            <div style="font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--text-primary);">No pools configured</div>
-                            <div style="color: var(--text-secondary); margin-bottom: 20px;">Create your first pool to get started with API source rotation</div>
-                            <button class="refresh-btn" onclick="showCreatePoolModal()">➕ Create Pool</button>
-                        </div>
-                    `;
-                } else {
-                    container.innerHTML = pools.map(pool => createPoolCard(pool)).join('');
-                }
-
-                // Load rotation history
-                const history = historyRes.history || [];
-                const historyContainer = document.getElementById('rotationHistory');
-                if (history.length === 0) {
-                    historyContainer.innerHTML = '<p style="color: var(--text-secondary); text-align: center; padding: 20px;">No rotation history yet</p>';
-                } else {
-                    historyContainer.innerHTML = history.map(h => `
-                        <div style="padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; margin-bottom: 10px; border-left: 3px solid var(--accent-blue);">
-                            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
-                                <div>
-                                    <div style="font-weight: 600; margin-bottom: 5px;">${h.pool_name}</div>
-                                    <div style="font-size: 12px; color: var(--text-secondary);">Rotated to: <strong>${h.provider_name}</strong></div>
-                                </div>
-                                <div style="text-align: right;">
-                                    <div style="font-size: 12px; color: var(--text-secondary);">${new Date(h.timestamp).toLocaleString()}</div>
-                                    <span class="badge badge-info" style="margin-top: 5px; display: inline-block;">${h.reason}</span>
-                                </div>
-                            </div>
-                        </div>
-                    `).join('');
-                }
-            } catch (error) {
-                console.error('Error loading pools:', error);
-                document.getElementById('poolsContainer').innerHTML = `
-                    <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">
-                        <div>❌ Error loading pools: ${error.message}</div>
-                    </div>
-                `;
-            }
-        }
-
-        function createPoolCard(pool) {
-            const currentProvider = pool.current_provider
-                ? `<div style="margin-bottom: 15px; padding: 12px; background: rgba(16, 185, 129, 0.1); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.3);">
-                     <div style="display: flex; align-items: center; gap: 8px;">
-                         <span style="width: 10px; height: 10px; background: var(--accent-green); border-radius: 50%; display: inline-block;"></span>
-                         <span style="font-weight: 600;">Current: ${pool.current_provider.name}</span>
-                     </div>
-                   </div>`
-                : '<div style="margin-bottom: 15px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.3); color: var(--text-secondary);">No active provider</div>';
-
-            const membersHTML = pool.members && pool.members.length > 0
-                ? pool.members.map(member => {
-                    const successRate = member.success_rate || 0;
-                    const statusClass = successRate >= 90 ? 'badge-success' : successRate >= 70 ? 'badge-warning' : 'badge-danger';
-                    const rateLimit = member.rate_limit || { usage: 0, limit: 100, percentage: 0 };
-
-                    return `
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px; margin-bottom: 8px;">
-                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                                <div style="font-weight: 600;">${member.provider_name}</div>
-                                <span class="badge ${statusClass}">${successRate.toFixed(1)}%</span>
-                            </div>
-                            <div style="display: flex; gap: 15px; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">
-                                <span>Used: ${member.use_count || 0}</span>
-                                <span>Priority: ${member.priority || 1}</span>
-                                <span>Weight: ${member.weight || 1}</span>
-                            </div>
-                            <div>
-                                <div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;">
-                                    Rate Limit: ${rateLimit.usage}/${rateLimit.limit} (${rateLimit.percentage}%)
-                                </div>
-                                <div style="height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden;">
-                                    <div style="height: 100%; background: ${rateLimit.percentage < 70 ? 'var(--accent-green)' : rateLimit.percentage < 90 ? 'var(--accent-yellow)' : 'var(--accent-red)'}; width: ${rateLimit.percentage}%; transition: width 0.3s;"></div>
-                                </div>
-                            </div>
-                        </div>
-                    `;
-                }).join('')
-                : '<div style="color: var(--text-secondary); font-size: 14px; padding: 20px; text-align: center;">No members in pool</div>';
-
-            return `
-                <div class="pool-card-hover" style="background: rgba(17, 24, 39, 0.6); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 20px; padding: 25px;">
-                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
-                        <div>
-                            <div style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">${pool.pool_name}</div>
-                            <span class="badge badge-info">${pool.category}</span>
-                        </div>
-                        <div style="display: flex; gap: 8px;">
-                            <button onclick="addMemberToPool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(59, 130, 246, 0.2); border: 1px solid var(--accent-blue); border-radius: 8px; color: var(--accent-blue); cursor: pointer; font-size: 12px; font-weight: 600;">➕</button>
-                            <button onclick="rotatePool(${pool.pool_id})" style="padding: 8px 12px; background: rgba(16, 185, 129, 0.2); border: 1px solid var(--accent-green); border-radius: 8px; color: var(--accent-green); cursor: pointer; font-size: 12px; font-weight: 600;">🔄</button>
-                            <button onclick="deletePool(${pool.pool_id}, '${pool.pool_name}')" style="padding: 8px 12px; background: rgba(239, 68, 68, 0.2); border: 1px solid var(--accent-red); border-radius: 8px; color: var(--accent-red); cursor: pointer; font-size: 12px; font-weight: 600;">🗑️</button>
-                        </div>
-                    </div>
-
-                    ${currentProvider}
-
-                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0;">
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Strategy</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.rotation_strategy.replace('_', ' ')}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Rotations</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.total_rotations || 0}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Members</div>
-                            <div style="font-weight: 600; font-size: 14px;">${pool.members ? pool.members.length : 0}</div>
-                        </div>
-                        <div style="background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px;">
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">Status</div>
-                            <span class="badge ${pool.enabled ? 'badge-success' : 'badge-danger'}">${pool.enabled ? 'Enabled' : 'Disabled'}</span>
-                        </div>
-                    </div>
-
-                    <div style="margin-top: 20px;">
-                        <div style="font-weight: 600; margin-bottom: 12px; font-size: 14px;">Pool Members</div>
-                        <div style="max-height: 300px; overflow-y: auto;">
-                            ${membersHTML}
-                        </div>
-                    </div>
-                </div>
-            `;
-        }
-
-        async function loadProvidersForPool() {
-            try {
-                const providers = await fetch('/api/providers').then(r => r.json());
-                allProvidersList = providers;
-                const select = document.getElementById('memberProvider');
-                select.innerHTML = '<option value="">Select a provider...</option>' + providers.map(p => {
-                    const providerId = p.name.toLowerCase().replace(/\s+/g, '_');
-                    return `<option value="${providerId}">${p.name} (${p.category})</option>`;
-                }).join('');
-            } catch (error) {
-                console.error('Error loading providers:', error);
-            }
-        }
-
-        function showCreatePoolModal() {
-            document.getElementById('createPoolModal').classList.add('active');
-        }
-
-        function closeCreatePoolModal() {
-            document.getElementById('createPoolModal').classList.remove('active');
-            document.getElementById('createPoolForm').reset();
-        }
-
-        function addMemberToPool(poolId) {
-            currentPoolId = poolId;
-            loadProvidersForPool();
-            document.getElementById('addMemberModal').classList.add('active');
-        }
-
-        function closeAddMemberModal() {
-            document.getElementById('addMemberModal').classList.remove('active');
-            document.getElementById('addMemberForm').reset();
-            currentPoolId = null;
-        }
-
-        document.getElementById('createPoolForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const data = {
-                name: document.getElementById('poolName').value,
-                category: document.getElementById('poolCategory').value,
-                rotation_strategy: document.getElementById('rotationStrategy').value,
-                description: document.getElementById('poolDescription').value
-            };
-
-            try {
-                const response = await fetch('/api/pools', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
-                });
-
-                if (response.ok) {
-                    showToast('✅ Pool created successfully!', 'success');
-                    closeCreatePoolModal();
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to create pool'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        });
-
-        document.getElementById('addMemberForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const data = {
-                provider_id: document.getElementById('memberProvider').value,
-                priority: parseInt(document.getElementById('memberPriority').value),
-                weight: parseInt(document.getElementById('memberWeight').value)
-            };
-
-            try {
-                const response = await fetch(`/api/pools/${currentPoolId}/members`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
-                });
-
-                if (response.ok) {
-                    showToast('✅ Member added successfully!', 'success');
-                    closeAddMemberModal();
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to add member'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        });
-
-        async function rotatePool(poolId) {
-            try {
-                const response = await fetch(`/api/pools/${poolId}/rotate`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ reason: 'manual' })
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    showToast(`✅ Rotated to ${result.provider_name}`, 'success');
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to rotate'), 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error: ' + error.message, 'error');
-                console.error(error);
-            }
-        }
-
-        async function deletePool(poolId, poolName) {
-            if (!confirm(`Are you sure you want to delete pool "${poolName}"?`)) {
-                return;
-            }
-
-            try {
-                const response = await fetch(`/api/pools/${poolId}`, {
-                    method: 'DELETE'
-                });
-
-                if (response.ok) {
-                    showToast('✅ Pool deleted successfully!', 'success');
-                    loadPools();
-                } else {
-                    const error = await response.json();
-                    showToast('❌ Error: ' + (error.detail || 'Failed to delete pool'), 'error');
-                }
-            } catch (error) {
-                alert('❌ Error: ' + error.message);
-                console.error(error);
-            }
-        }
-
-        // Toast notification function
-        // Enhanced Toast Notification System
-        function showToast(message, type = 'info', title = null) {
-            const toastContainer = document.getElementById('toastContainer') || document.body;
-            const toast = document.createElement('div');
-            toast.className = `toast toast-${type}`;
-            
-            const icons = {
-                success: '✅',
-                error: '❌',
-                warning: '⚠️',
-                info: 'ℹ️'
-            };
-            
-            const titles = {
-                success: 'موفق!',
-                error: 'خطا!',
-                warning: 'هشدار!',
-                info: 'اطلاعیه'
-            };
-            
-            toast.innerHTML = `
-                <div class="toast-icon">${icons[type] || icons.info}</div>
-                <div class="toast-content">
-                    <div class="toast-title">${title || titles[type] || titles.info}</div>
-                    <div class="toast-message">${message}</div>
-                </div>
-                <button class="toast-close" onclick="this.parentElement.remove()">×</button>
-            `;
-            
-            toastContainer.appendChild(toast);
-            
-            // Auto remove after 5 seconds
-            setTimeout(() => {
-                toast.style.animation = 'toastSlideIn 0.3s reverse';
-                setTimeout(() => toast.remove(), 300);
-            }, 5000);
-            
-            // Add click to dismiss
-            toast.addEventListener('click', (e) => {
-                if (e.target.classList.contains('toast-close') || e.target === toast) {
-                    toast.style.animation = 'toastSlideIn 0.3s reverse';
-                    setTimeout(() => toast.remove(), 300);
-                }
-            });
-        }
-
-        // Progress Indicator Functions
-        function showProgress(percent = 0) {
-            const progressBar = document.getElementById('progressBar');
-            if (progressBar) {
-                progressBar.style.width = percent + '%';
-            }
-        }
-
-        function hideProgress() {
-            const progressBar = document.getElementById('progressBar');
-            if (progressBar) {
-                progressBar.style.width = '0%';
-            }
-        }
-
-        // Loading Overlay Functions
-        function showLoading(message = 'در حال بارگذاری...') {
-            const overlay = document.getElementById('loadingOverlay');
-            const text = document.getElementById('loadingText');
-            if (overlay) {
-                overlay.classList.add('show');
-            }
-            if (text) {
-                text.textContent = message;
-            }
-        }
-
-        function hideLoading() {
-            const overlay = document.getElementById('loadingOverlay');
-            if (overlay) {
-                overlay.classList.remove('show');
-            }
-        }
-
-        // Feedback Overlay Functions
-        function showFeedback(type, title, message) {
-            const overlay = document.getElementById('feedbackOverlay');
-            const icon = document.getElementById('feedbackIcon');
-            const titleEl = document.getElementById('feedbackTitle');
-            const messageEl = document.getElementById('feedbackMessage');
-            
-            if (overlay && icon && titleEl && messageEl) {
-                const icons = {
-                    success: '✅',
-                    error: '❌',
-                    warning: '⚠️'
-                };
-                
-                icon.textContent = icons[type] || icons.success;
-                titleEl.textContent = title;
-                messageEl.textContent = message;
-                
-                overlay.classList.add('show');
-                
-                // Auto hide after 3 seconds
-                setTimeout(() => {
-                    hideFeedback();
-            }, 3000);
-            }
-        }
-
-        function hideFeedback() {
-            const overlay = document.getElementById('feedbackOverlay');
-            if (overlay) {
-                overlay.classList.remove('show');
-            }
-        }
-
-        // Scroll to Top Function
-        function scrollToTop() {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
-            });
-        }
-
-        // Show FAB when scrolling down
-        let lastScroll = 0;
-        window.addEventListener('scroll', () => {
-            const fab = document.querySelector('.fab');
-            if (fab) {
-                const currentScroll = window.pageYOffset;
-                if (currentScroll > 300) {
-                    fab.style.opacity = '1';
-                    fab.style.pointerEvents = 'all';
-                } else {
-                    fab.style.opacity = '0';
-                    fab.style.pointerEvents = 'none';
-                }
-                lastScroll = currentScroll;
-            }
-        });
-
-        // Filter Market Table Function
-        let currentFilter = 'all';
-        let marketDataCache = [];
-
-        function filterMarketTable() {
-            const searchInput = document.getElementById('marketSearch');
-            const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
-            const tbody = document.getElementById('marketTableBody');
-            
-            if (!tbody) return;
-            
-            const rows = tbody.querySelectorAll('tr');
-            let visibleCount = 0;
-            
-            // Remove existing no-results row
-            const existingNoResults = tbody.querySelector('tr[data-no-results]');
-            if (existingNoResults) {
-                existingNoResults.remove();
-            }
-            
-            rows.forEach((row, index) => {
-                if (row.querySelector('td[colspan]')) {
-                    return; // Skip loading/error rows
-                }
-                
-                const cells = row.querySelectorAll('td');
-                if (cells.length < 4) return;
-                
-                const name = cells[1]?.textContent?.toLowerCase() || '';
-                const symbol = cells[1]?.querySelector('.crypto-symbol')?.textContent?.toLowerCase() || '';
-                const changeText = cells[3]?.textContent || '';
-                const changeValue = parseFloat(changeText.replace(/[^0-9.-]/g, '')) || 0;
-                
-                let matchesSearch = !searchTerm || name.includes(searchTerm) || symbol.includes(searchTerm);
-                let matchesFilter = true;
-                
-                if (currentFilter === 'top10') {
-                    matchesFilter = index < 10;
-                } else if (currentFilter === 'gainers') {
-                    matchesFilter = changeValue > 0;
-                } else if (currentFilter === 'losers') {
-                    matchesFilter = changeValue < 0;
-                } else if (currentFilter === 'volume') {
-                    // This would need volume data - for now show all
-                    matchesFilter = true;
-                }
-                
-                if (matchesSearch && matchesFilter) {
-                    row.style.display = '';
-                    visibleCount++;
-                    row.style.animation = `rowSlideIn 0.3s ease-out`;
-                    row.style.animationDelay = `${index * 0.05}s`;
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-            
-            // Show message if no results
-            if (visibleCount === 0 && rows.length > 0 && !searchTerm && currentFilter === 'all') {
-                // Don't show message if no search/filter is applied
-                return;
-            }
-            
-            if (visibleCount === 0) {
-                const noResultsRow = document.createElement('tr');
-                noResultsRow.setAttribute('data-no-results', 'true');
-                noResultsRow.innerHTML = `<td colspan="6" style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                    <div style="font-size: 48px; margin-bottom: 10px;">🔍</div>
-                    <div style="font-weight: 600; margin-bottom: 5px;">نتیجه‌ای یافت نشد</div>
-                    <div style="font-size: 14px;">لطفاً عبارت جستجوی دیگری را امتحان کنید</div>
-                </td>`;
-                tbody.appendChild(noResultsRow);
-            }
-        }
-
-        function filterByCategory(category) {
-            currentFilter = category;
-            
-            // Update active chip
-            document.querySelectorAll('.filter-chip').forEach(chip => {
-                chip.classList.remove('active');
-            });
-            if (event && event.target) {
-                event.target.classList.add('active');
-            }
-            
-            filterMarketTable();
-        }
-
-        // Number Counter Animation
-        function animateNumber(element, from, to, duration = 1000) {
-            if (!element) return;
-            
-            const start = performance.now();
-            const difference = to - from;
-            
-            function update(currentTime) {
-                const elapsed = currentTime - start;
-                const progress = Math.min(elapsed / duration, 1);
-                
-                // Easing function
-                const easeOutQuart = 1 - Math.pow(1 - progress, 4);
-                const current = from + (difference * easeOutQuart);
-                
-                element.textContent = typeof to === 'number' && to >= 1000 
-                    ? current.toLocaleString('fa-IR', { maximumFractionDigits: 2 })
-                    : current.toFixed(2);
-                
-                if (progress < 1) {
-                    requestAnimationFrame(update);
-                } else {
-                    element.classList.add('updated');
-                    setTimeout(() => element.classList.remove('updated'), 500);
-                }
-            }
-            
-            requestAnimationFrame(update);
-        }
-
-        // Close modals when clicking outside
-        document.addEventListener('click', (e) => {
-            if (e.target.classList.contains('modal')) {
-                e.target.style.display = 'none';
-            }
-        });
-
-        // ===== Log Management Functions =====
-
-        async function loadLogs() {
-            try {
-                const level = document.getElementById('logLevelFilter')?.value || '';
-                const category = document.getElementById('logCategoryFilter')?.value || '';
-                const search = document.getElementById('logSearch')?.value || '';
-                const limit = parseInt(document.getElementById('logLimit')?.value || '100');
-
-                let url = `/api/logs?limit=${limit}`;
-                if (level) url += `&level=${level}`;
-                if (category) url += `&category=${category}`;
-                if (search) url += `&search=${search}`;
-
-                const response = await fetch(url);
-                const data = await response.json();
-
-                // Update stats
-                const statsResponse = await fetch('/api/logs/stats');
-                const stats = await statsResponse.json();
-
-                if (document.getElementById('totalLogs')) {
-                    document.getElementById('totalLogs').textContent = stats.total || 0;
-                    document.getElementById('errorLogs').textContent = stats.errors || 0;
-                    document.getElementById('infoLogs').textContent = stats.by_level?.info || 0;
-                    document.getElementById('warningLogs').textContent = stats.by_level?.warning || 0;
-                }
-
-                // Update table
-                const tbody = document.getElementById('logsTableBody');
-                if (data.logs && data.logs.length > 0) {
-                    tbody.innerHTML = data.logs.map(log => {
-                        const levelColor = {
-                            'error': 'var(--accent-red)',
-                            'critical': 'var(--accent-red)',
-                            'warning': 'var(--accent-yellow)',
-                            'info': 'var(--accent-blue)',
-                            'debug': 'var(--text-secondary)'
-                        }[log.level] || 'var(--text-secondary)';
-
-                        return `
-                            <tr>
-                                <td style="font-size: 12px; color: var(--text-secondary);">${new Date(log.timestamp).toLocaleString()}</td>
-                                <td><span style="color: ${levelColor}; font-weight: 700;">${log.level.toUpperCase()}</span></td>
-                                <td><span class="badge badge-info">${log.category}</span></td>
-                                <td>${log.message}</td>
-                                <td>${log.provider_id || '—'}</td>
-                                <td>${log.response_time ? log.response_time.toFixed(0) + 'ms' : '—'}</td>
-                            </tr>
-                        `;
-                    }).join('');
-                } else {
-                    tbody.innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--text-secondary);">No logs found</td></tr>';
-                }
-            } catch (error) {
-                console.error('Error loading logs:', error);
-                if (document.getElementById('logsTableBody')) {
-                    document.getElementById('logsTableBody').innerHTML = '<tr><td colspan="6" style="text-align: center; color: var(--accent-red);">Error loading logs</td></tr>';
-                }
-            }
-        }
-
-        async function exportLogsJSON() {
-            try {
-                const level = document.getElementById('logLevelFilter')?.value || '';
-                const category = document.getElementById('logCategoryFilter')?.value || '';
-
-                let url = '/api/logs/export/json?';
-                if (level) url += `level=${level}&`;
-                if (category) url += `category=${category}&`;
-
-                const response = await fetch(url);
-                const data = await response.json();
-                showToast(`✅ Logs exported to ${data.filepath}`, 'success');
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function exportLogsCSV() {
-            try {
-                const level = document.getElementById('logLevelFilter')?.value || '';
-                const category = document.getElementById('logCategoryFilter')?.value || '';
-
-                let url = '/api/logs/export/csv?';
-                if (level) url += `level=${level}&`;
-                if (category) url += `category=${category}&`;
-
-                const response = await fetch(url);
-                const data = await response.json();
-                showToast(`✅ Logs exported to ${data.filepath}`, 'success');
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function clearAllLogs() {
-            if (!confirm('Are you sure you want to clear all logs? This cannot be undone.')) {
-                return;
-            }
-            try {
-                const response = await fetch('/api/logs', { method: 'DELETE' });
-                if (response.ok) {
-                    showToast('✅ All logs cleared', 'success');
-                    loadLogs();
-                } else {
-                    showToast('❌ Failed to clear logs', 'error');
-                }
-            } catch (error) {
-                showToast('❌ Error clearing logs', 'error');
-                console.error(error);
-            }
-        }
-
-        // ===== Resource Management Functions =====
-
-        async function loadResources() {
-            try {
-                const category = document.getElementById('resourceCategoryFilter')?.value || '';
-
-                let url = '/api/resources';
-                if (category) {
-                    url = `/api/resources/category/${category}`;
-                }
-
-                const response = await fetch(url);
-                const data = await response.json();
-
-                // Update stats
-                const stats = category ? { count: data.count } : data.statistics;
-                if (stats && document.getElementById('totalResources')) {
-                    document.getElementById('totalResources').textContent = stats.total_providers || stats.count || 0;
-                    document.getElementById('freeResources').textContent = stats.by_free?.free || 0;
-                    document.getElementById('paidResources').textContent = stats.by_free?.paid || 0;
-                    document.getElementById('authResources').textContent = stats.by_auth?.requires_auth || 0;
-                }
-
-                // Update grid
-                const grid = document.getElementById('resourcesGrid');
-                const providers = category ? data.providers : Object.values(data.providers || {});
-
-                if (providers && providers.length > 0) {
-                    grid.innerHTML = providers.map(provider => {
-                        const authBadge = provider.requires_auth
-                            ? '<span class="badge badge-warning">Auth Required</span>'
-                            : '<span class="badge badge-success">No Auth</span>';
-
-                        const freeBadge = provider.free !== false
-                            ? '<span class="badge badge-success">Free</span>'
-                            : '<span class="badge badge-danger">Paid</span>';
-
-                        return `
-                            <div class="stat-card pool-card-hover">
-                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px;">
-                                    <div>
-                                        <div style="font-size: 18px; font-weight: 700; margin-bottom: 8px;">${provider.name}</div>
-                                        <span class="badge badge-info">${provider.category}</span>
-                                    </div>
-                                    <div style="display: flex; gap: 5px; flex-direction: column;">
-                                        ${authBadge}
-                                        ${freeBadge}
-                                    </div>
-                                </div>
-                                <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; word-break: break-all;">
-                                    ${provider.base_url}
-                                </div>
-                                <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary);">
-                                    <span>Priority: ${provider.priority || 5}</span>
-                                    <span>Weight: ${provider.weight || 50}</span>
-                                </div>
-                                ${provider.docs_url ? `<div style="margin-top: 10px;"><a href="${provider.docs_url}" target="_blank" style="color: var(--accent-blue); font-size: 12px;">📖 Docs</a></div>` : ''}
-                            </div>
-                        `;
-                    }).join('');
-                } else {
-                    grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-secondary);">No resources found</div>';
-                }
-            } catch (error) {
-                console.error('Error loading resources:', error);
-                if (document.getElementById('resourcesGrid')) {
-                    document.getElementById('resourcesGrid').innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--accent-red);">Error loading resources</div>';
-                }
-            }
-        }
-
-        async function exportResourcesJSON() {
-            try {
-                const response = await fetch('/api/resources/export/json');
-                const data = await response.json();
-                showToast(`✅ Resources exported to ${data.filepath}`, 'success');
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function exportResourcesCSV() {
-            try {
-                const response = await fetch('/api/resources/export/csv');
-                const data = await response.json();
-                showToast(`✅ Resources exported to ${data.filepath}`, 'success');
-            } catch (error) {
-                showToast('❌ Export failed', 'error');
-                console.error(error);
-            }
-        }
-
-        async function backupResources() {
-            try {
-                const response = await fetch('/api/resources/backup', { method: 'POST' });
-                const data = await response.json();
-                showToast(`✅ Backup created: ${data.filepath}`, 'success');
-            } catch (error) {
-                showToast('❌ Backup failed', 'error');
-                console.error(error);
-            }
-        }
-
-        function showImportModal() {
-            document.getElementById('importModal').classList.add('active');
-        }
-
-        function closeImportModal() {
-            document.getElementById('importModal').classList.remove('active');
-            const form = document.getElementById('importForm');
-            if (form) form.reset();
-        }
-
-        // Import form handler
-        const importForm = document.getElementById('importForm');
-        if (importForm) {
-            importForm.addEventListener('submit', async (e) => {
-                e.preventDefault();
-                const filePath = document.getElementById('importFilePath').value;
-                const merge = document.getElementById('importMode').value === 'true';
-
-                try {
-                    const response = await fetch(`/api/resources/import/json?file_path=${encodeURIComponent(filePath)}&merge=${merge}`, {
-                        method: 'POST'
-                    });
-
-                    if (response.ok) {
-                        const data = await response.json();
-                        showToast(`✅ Resources imported successfully (${data.merged ? 'merged' : 'replaced'})`, 'success');
-                        closeImportModal();
-                        loadResources();
-                    } else {
-                        const error = await response.json();
-                        showToast(`❌ Import failed: ${error.detail}`, 'error');
-                    }
-                } catch (error) {
-                    showToast('❌ Error importing resources', 'error');
-                    console.error(error);
-                }
-            });
-        }
-
-        // ===== Reports Functions =====
-
-        async function loadReports() {
-            await Promise.all([
-                loadDiscoveryReport(),
-                loadModelsReport(),
-                loadLastDiagnostics()
-            ]);
-        }
-
-        // Load System Alerts
-        async function loadSystemAlerts() {
-            try {
-                const response = await fetch('/api/diagnostics/last');
-                const report = await response.json();
-                
-                if (report.message || !report.issues || report.issues.length === 0) {
-                    document.getElementById('systemAlertsSection').style.display = 'none';
-                    return;
-                }
-                
-                displaySystemAlerts(report.issues);
-                document.getElementById('systemAlertsSection').style.display = 'block';
-            } catch (error) {
-                console.error('Error loading system alerts:', error);
-            }
-        }
-
-        function displaySystemAlerts(issues) {
-            const container = document.getElementById('systemAlertsContainer');
-            if (!container) return;
-
-            const severityConfig = {
-                'critical': {
-                    icon: 'icon-error',
-                    color: 'var(--accent-red)',
-                    bg: 'rgba(239, 68, 68, 0.1)',
-                    border: 'rgba(239, 68, 68, 0.3)'
-                },
-                'warning': {
-                    icon: 'icon-warning',
-                    color: 'var(--accent-yellow)',
-                    bg: 'rgba(245, 158, 11, 0.1)',
-                    border: 'rgba(245, 158, 11, 0.3)'
-                },
-                'info': {
-                    icon: 'icon-info',
-                    color: 'var(--accent-blue)',
-                    bg: 'rgba(59, 130, 246, 0.1)',
-                    border: 'rgba(59, 130, 246, 0.3)'
-                }
-            };
-
-            const solutions = {
-                'HF_API_TOKEN': {
-                    title: 'تنظیم متغیر محیطی HF_API_TOKEN',
-                    steps: [
-                        '1. یک توکن از HuggingFace دریافت کنید:',
-                        '   - به https://huggingface.co/settings/tokens بروید',
-                        '   - یک توکن جدید ایجاد کنید',
-                        '2. توکن را به متغیر محیطی اضافه کنید:',
-                        '   Windows: set HF_API_TOKEN=your_token_here',
-                        '   Linux/Mac: export HF_API_TOKEN=your_token_here',
-                        '   یا در فایل .env: HF_API_TOKEN=your_token_here'
-                    ]
-                },
-                'resources.json': {
-                    title: 'ایجاد فایل resources.json',
-                    steps: [
-                        'این فایل به صورت خودکار ساخته می‌شود.',
-                        'اگر نیاز به تنظیمات دستی دارید، می‌توانید آن را ایجاد کنید:',
-                        '{',
-                        '  "resources": []',
-                        '}'
-                    ]
-                },
-                'config.json': {
-                    title: 'ایجاد فایل config.json',
-                    steps: [
-                        'این فایل به صورت خودکار ساخته می‌شود.',
-                        'اگر نیاز به تنظیمات دستی دارید، می‌توانید آن را ایجاد کنید.'
-                    ]
-                },
-                'HuggingFace API': {
-                    title: 'رفع مشکل اتصال به HuggingFace',
-                    steps: [
-                        '1. بررسی اتصال اینترنت',
-                        '2. بررسی فایروال و پروکسی',
-                        '3. بررسی DNS settings',
-                        '4. اگر از VPN استفاده می‌کنید، آن را غیرفعال کنید',
-                        '5. بررسی کنید که https://api.huggingface.co قابل دسترسی باشد'
-                    ]
-                },
-                'Auto-Discovery': {
-                    title: 'فعال‌سازی Auto-Discovery Service',
-                    steps: [
-                        'برای فعال‌سازی سرویس Auto-Discovery:',
-                        '1. متغیر محیطی را تنظیم کنید:',
-                        '   export ENABLE_AUTO_DISCOVERY=true',
-                        '2. یا در فایل .env اضافه کنید:',
-                        '   ENABLE_AUTO_DISCOVERY=true',
-                        '3. سرور را restart کنید'
-                    ]
-                }
-            };
-
-            let html = '';
-            issues.forEach((issue, index) => {
-                const config = severityConfig[issue.severity] || severityConfig['info'];
-                const solutionKey = issue.title.includes('HF_API_TOKEN') ? 'HF_API_TOKEN' :
-                                   issue.title.includes('resources.json') ? 'resources.json' :
-                                   issue.title.includes('config.json') ? 'config.json' :
-                                   issue.title.includes('HuggingFace') ? 'HuggingFace API' :
-                                   issue.title.includes('Auto-Discovery') ? 'Auto-Discovery' : null;
-                
-                const solution = solutionKey ? solutions[solutionKey] : null;
-
-                html += `
-                    <div class="stat-card" style="margin-bottom: 15px; border-left: 4px solid ${config.border}; background: ${config.bg}; animation-delay: ${index * 0.1}s;">
-                        <div style="display: flex; align-items: start; gap: 12px;">
-                            <div class="icon icon-md status-icon-${issue.severity}" style="flex-shrink: 0; margin-top: 2px;">
-                                <svg><use href="#${config.icon}"></use></svg>
-                            </div>
-                            <div style="flex: 1;">
-                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
-                                    <div>
-                                        <h3 style="font-size: 16px; font-weight: 700; margin-bottom: 4px; color: ${config.color};">
-                                            ${issue.title}
-                                        </h3>
-                                        <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">
-                                            ${issue.description}
-                                        </div>
-                                    </div>
-                                    <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}" style="flex-shrink: 0;">
-                                        ${issue.category}
-                                    </span>
-                                </div>
-                                
-                                ${solution ? `
-                                    <div style="margin-top: 12px; padding: 12px; background: rgba(17, 24, 39, 0.6); border-radius: 8px; border: 1px solid var(--border);">
-                                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                                            <span class="icon icon-sm status-icon-info"><svg><use href="#icon-info"></use></svg></span>
-                                            <strong style="font-size: 14px;">راه‌حل:</strong>
-                                        </div>
-                                        <div style="font-size: 12px; color: var(--text-secondary); font-family: 'Courier New', monospace; line-height: 1.8;">
-                                            ${solution.steps.map(step => `<div style="margin-bottom: 4px;">${step}</div>`).join('')}
-                                        </div>
-                                    </div>
-                                ` : ''}
-                                
-                                <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
-                                    ${new Date(issue.timestamp).toLocaleString('fa-IR')}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            });
-
-            container.innerHTML = html || '<div style="text-align: center; padding: 40px; color: var(--text-secondary);">هیچ هشداری یافت نشد</div>';
-        }
-
-        async function runDiagnostics(autoFix = false) {
-            const resultsDiv = document.getElementById('diagnosticsResults');
-            resultsDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
-
-            try {
-                const response = await fetch(`/api/diagnostics/run?auto_fix=${autoFix}`, {
-                    method: 'POST'
-                });
-                const report = await response.json();
-
-                displayDiagnosticsReport(report);
-                showToast(`اشکال‌یابی انجام شد (${report.total_issues} مشکل یافت شد)`, 'success', 'Diagnostics');
-                
-                // Update system alerts
-                if (report.issues && report.issues.length > 0) {
-                    displaySystemAlerts(report.issues);
-                    document.getElementById('systemAlertsSection').style.display = 'block';
-                }
-            } catch (error) {
-                resultsDiv.innerHTML = `<div class="alert alert-error">
-                    <span class="icon icon-md status-icon-error"><svg><use href="#icon-error"></use></svg></span>
-                    خطا: ${error.message}
-                </div>`;
-                showToast('خطا در اجرای اشکال‌یابی', 'error', 'Error');
-            }
-        }
-
-        function displayDiagnosticsReport(report) {
-            const resultsDiv = document.getElementById('diagnosticsResults');
-
-            const severityColors = {
-                'critical': 'var(--accent-red)',
-                'warning': 'var(--accent-yellow)',
-                'info': 'var(--accent-blue)'
-            };
-
-            const severityIcons = {
-                'critical': '🔴',
-                'warning': '⚠️',
-                'info': 'ℹ️'
-            };
-
-            let html = `
-                <div class="stats-grid" style="margin-bottom: 20px;">
-                    <div class="stat-card">
-                        <div class="stat-value" style="color: ${severityColors.critical};">${report.critical_issues}</div>
-                        <div class="stat-label">مشکلات بحرانی</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" style="color: ${severityColors.warning};">${report.warnings}</div>
-                        <div class="stat-label">هشدارها</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value" style="color: ${severityColors.info};">${report.info_issues}</div>
-                        <div class="stat-label">اطلاعات</div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-value">${report.fixed_issues.length}</div>
-                        <div class="stat-label">تعمیر شده</div>
-                    </div>
-                </div>
-            `;
-
-            if (report.fixed_issues && report.fixed_issues.length > 0) {
-                html += `
-                    <div style="margin-bottom: 20px; padding: 15px; background: rgba(16, 185, 129, 0.1); border-radius: 12px; border-left: 4px solid var(--accent-green);">
-                        <h3 style="margin-bottom: 10px; color: var(--accent-green);">✅ مشکلات تعمیر شده</h3>
-                        ${report.fixed_issues.map(issue => `
-                            <div style="padding: 10px; margin-bottom: 8px; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
-                                <strong>${issue.title}</strong><br>
-                                <span style="font-size: 12px; color: var(--text-secondary);">${issue.description}</span>
-                            </div>
-                        `).join('')}
-                    </div>
-                `;
-            }
-
-            if (report.issues && report.issues.length > 0) {
-                html += `
-                    <div>
-                        <h3 style="margin-bottom: 15px;">📋 لیست مشکلات</h3>
-                        ${report.issues.map(issue => `
-                            <div style="padding: 15px; margin-bottom: 10px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${severityColors[issue.severity]};">
-                                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
-                                    <div>
-                                        <span style="font-size: 20px; margin-left: 8px;">${severityIcons[issue.severity]}</span>
-                                        <strong>${issue.title}</strong>
-                                    </div>
-                                    <span class="badge badge-${issue.severity === 'critical' ? 'danger' : issue.severity === 'warning' ? 'warning' : 'info'}">${issue.category}</span>
-                                </div>
-                                <div style="color: var(--text-secondary); margin-bottom: 8px; font-size: 14px;">
-                                    ${issue.description}
-                                </div>
-                                ${issue.fixable && issue.fix_action ? `
-                                    <div style="margin-top: 8px; padding: 8px; background: rgba(59, 130, 246, 0.1); border-radius: 6px; font-family: monospace; font-size: 12px;">
-                                        🔧 ${issue.fix_action}
-                                    </div>
-                                ` : ''}
-                                <div style="margin-top: 8px; font-size: 11px; color: var(--text-secondary);">
-                                    ${new Date(issue.timestamp).toLocaleString('fa-IR')}
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                `;
-            } else {
-                html += `
-                    <div style="text-align: center; padding: 40px; background: rgba(16, 185, 129, 0.1); border-radius: 12px;">
-                        <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
-                        <div style="font-size: 18px; font-weight: 600; color: var(--accent-green);">هیچ مشکلی یافت نشد!</div>
-                        <div style="color: var(--text-secondary); margin-top: 10px;">سیستم شما در وضعیت مطلوب است.</div>
-                    </div>
-                `;
-            }
-
-            html += `
-                <div style="margin-top: 20px; padding: 15px; background: rgba(17, 24, 39, 0.6); border-radius: 12px;">
-                    <div style="font-size: 12px; color: var(--text-secondary);">
-                        <strong>زمان اجرا:</strong> ${(report.duration_ms / 1000).toFixed(2)} ثانیه<br>
-                        <strong>تاریخ:</strong> ${new Date(report.timestamp).toLocaleString('fa-IR')}
-                    </div>
-                </div>
-            `;
-
-            resultsDiv.innerHTML = html;
-        }
-
-        async function loadLastDiagnostics() {
-            try {
-                const response = await fetch('/api/diagnostics/last');
-                const report = await response.json();
-
-                if (report.message) {
-                    return; // هیچ گزارشی موجود نیست
-                }
-
-                displayDiagnosticsReport(report);
-                
-                // Load system alerts
-                if (report.issues && report.issues.length > 0) {
-                    displaySystemAlerts(report.issues);
-                    document.getElementById('systemAlertsSection').style.display = 'block';
-                }
-            } catch (error) {
-                console.error('Error loading last diagnostics:', error);
-            }
-        }
-
-        async function loadDiscoveryReport() {
-            const reportDiv = document.getElementById('discoveryReport');
-            reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
-
-            try {
-                const response = await fetch('/api/reports/discovery');
-                const report = await response.json();
-
-                const lastRun = report.last_run;
-                const status = report.service_status;
-
-                let html = `
-                    <div class="stats-grid" style="margin-bottom: 20px;">
-                        <div class="stat-card">
-                            <div class="stat-value" style="color: ${report.enabled ? 'var(--accent-green)' : 'var(--accent-red)'};">
-                                ${report.enabled ? '✅' : '❌'}
-                            </div>
-                            <div class="stat-label">وضعیت سرویس</div>
-                        </div>
-                        <div class="stat-card">
-                            <div class="stat-value">${report.model || 'N/A'}</div>
-                            <div class="stat-label">مدل استفاده شده</div>
-                        </div>
-                        <div class="stat-card">
-                            <div class="stat-value">${Math.floor(report.interval_seconds / 3600)}h</div>
-                            <div class="stat-label">فاصله اجرا</div>
-                        </div>
-                        ${report.next_run_estimate ? `
-                        <div class="stat-card">
-                            <div class="stat-value" style="color: var(--accent-purple);">⏰</div>
-                            <div class="stat-label">اجرای بعدی</div>
-                            <div style="font-size: 12px; color: var(--text-secondary); margin-top: 5px;">
-                                ${new Date(report.next_run_estimate).toLocaleString('fa-IR')}
-                            </div>
-                        </div>
-                        ` : ''}
-                    </div>
-                `;
-
-                if (lastRun) {
-                    html += `
-                        <div style="background: rgba(17, 24, 39, 0.6); padding: 20px; border-radius: 12px;">
-                            <h3 style="margin-bottom: 15px;">📊 آخرین اجرا</h3>
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">شروع</div>
-                                    <div style="font-weight: 600;">${new Date(lastRun.started_at).toLocaleString('fa-IR')}</div>
-                                </div>
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پایان</div>
-                                    <div style="font-weight: 600;">${new Date(lastRun.finished_at).toLocaleString('fa-IR')}</div>
-                                </div>
-                                ${report.next_run_estimate ? `
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">⏰ اجرای بعدی</div>
-                                    <div style="font-weight: 600; color: var(--accent-purple);">${new Date(report.next_run_estimate).toLocaleString('fa-IR')}</div>
-                                </div>
-                                ` : ''}
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">کاندیداها</div>
-                                    <div style="font-weight: 600; color: var(--accent-blue);">${lastRun.candidates_seen || 0}</div>
-                                </div>
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">پیشنهاد شده</div>
-                                    <div style="font-weight: 600; color: var(--accent-yellow);">${lastRun.suggested || 0}</div>
-                                </div>
-                                <div>
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 5px;">ذخیره شده</div>
-                                    <div style="font-weight: 600; color: var(--accent-green);">${lastRun.persisted || 0}</div>
-                                </div>
-                            </div>
-                            ${lastRun.persisted_ids && lastRun.persisted_ids.length > 0 ? `
-                                <div style="margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border);">
-                                    <div style="font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;">Providerهای اضافه شده:</div>
-                                    <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-                                        ${lastRun.persisted_ids.map(id => `<span class="badge badge-success">${id}</span>`).join('')}
-                                    </div>
-                                </div>
-                            ` : ''}
-                        </div>
-                    `;
-                } else {
-                    html += `
-                        <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                            هنوز اجرایی انجام نشده است
-                        </div>
-                    `;
-                }
-
-                reportDiv.innerHTML = html;
-            } catch (error) {
-                reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
-            }
-        }
-
-        async function loadModelsReport() {
-            const reportDiv = document.getElementById('modelsReport');
-            reportDiv.innerHTML = '<div class="loading"><div class="spinner"></div></div>';
-
-            try {
-                const response = await fetch('/api/reports/models');
-                const report = await response.json();
-
-                if (report.error) {
-                    reportDiv.innerHTML = `
-                        <div class="alert alert-warning">
-                            ⚠️ ${report.error}
-                        </div>
-                    `;
-                    return;
-                }
-
-                let html = `
-                    <div class="stats-grid" style="margin-bottom: 20px;">
-                        <div class="stat-card">
-                            <div class="stat-value">${report.total_models}</div>
-                            <div class="stat-label">کل مدل‌ها</div>
-                        </div>
-                        <div class="stat-card">
-                            <div class="stat-value" style="color: var(--accent-green);">${report.available}</div>
-                            <div class="stat-label">در دسترس</div>
-                        </div>
-                        <div class="stat-card">
-                            <div class="stat-value" style="color: var(--accent-red);">${report.errors}</div>
-                            <div class="stat-label">خطا</div>
-                        </div>
-                    </div>
-                `;
-
-                if (report.models && report.models.length > 0) {
-                    html += `
-                        <div style="display: grid; gap: 15px;">
-                            ${report.models.map(model => `
-                                <div style="padding: 20px; background: rgba(17, 24, 39, 0.6); border-radius: 12px; border-left: 4px solid ${model.status === 'available' ? 'var(--accent-green)' : 'var(--accent-red)'};">
-                                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px;">
-                                        <div>
-                                            <h3 style="margin-bottom: 5px;">${model.model_id}</h3>
-                                            <span class="badge badge-${model.status === 'available' ? 'success' : 'danger'}">${model.status === 'available' ? '✅ در دسترس' : '❌ خطا'}</span>
-                                        </div>
-                                    </div>
-                                    ${model.status === 'available' ? `
-                                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 15px;">
-                                            ${model.downloads ? `<div><span style="font-size: 12px; color: var(--text-secondary);">دانلودها:</span> <strong>${model.downloads.toLocaleString()}</strong></div>` : ''}
-                                            ${model.likes ? `<div><span style="font-size: 12px; color: var(--text-secondary);">لایک‌ها:</span> <strong>${model.likes}</strong></div>` : ''}
-                                            ${model.pipeline_tag ? `<div><span style="font-size: 12px; color: var(--text-secondary);">نوع:</span> <strong>${model.pipeline_tag}</strong></div>` : ''}
-                                        </div>
-                                    ` : `
-                                        <div style="color: var(--accent-red); margin-top: 10px;">
-                                            ${model.error || 'خطای نامشخص'}
-                                        </div>
-                                    `}
-                                </div>
-                            `).join('')}
-                        </div>
-                    `;
-                }
-
-                reportDiv.innerHTML = html;
-            } catch (error) {
-                reportDiv.innerHTML = `<div class="alert alert-error">❌ خطا: ${error.message}</div>`;
-            }
-        }
-    </script>
 </body>
-
-</html>
\ No newline at end of file
+</html>
