Update index.html

index.html

@@ -23,8 +23,8 @@
             --text-main: #12132a;
             --text-sub: #6b7280;
             --text-faint: #9ca3af;
-            --shadow-card: 0 2px 12px rgba(91, 94, 244, 0.06), 0 1px 3px rgba(0,0,0,0.03);
-            --shadow-hover: 0 10px 32px rgba(91, 94, 244, 0.12), 0 2px 8px rgba(0,0,0,0.05);
+            --shadow-card: 0 2px 12px rgba(91, 94, 244, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
+            --shadow-hover: 0 10px 32px rgba(91, 94, 244, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05);
             --radius-nav: 24px;
             --radius-card: 20px;
             --radius-pill: 100px;
@@ -50,7 +50,12 @@
             --shadow-hover: 0 12px 40px rgba(130, 133, 255, 0.18);
         }
 
-        * { margin:0; padding:0; box-sizing:border-box; }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
             font-family: 'Tajawal', sans-serif;
             background: var(--bg-base);
@@ -61,619 +66,1198 @@
             position: relative;
         }
 
-        /* Animated mesh background with floating orbs */
+        /* خلفية متحركة */
         .bg-mesh {
-            position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            pointer-events: none;
+            overflow: hidden;
         }
         .orb {
-            position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4;
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            opacity: 0.4;
             animation: float 20s ease-in-out infinite alternate;
         }
         .orb-1 {
-            width: 60vw; height: 60vw;
-            background: radial-gradient(circle, rgba(91,94,244,0.18) 0%, transparent 70%);
-            top: -15%; right: -10%;
+            width: 60vw;
+            height: 60vw;
+            background: radial-gradient(circle, rgba(91, 94, 244, 0.18) 0%, transparent 70%);
+            top: -15%;
+            right: -10%;
         }
         .orb-2 {
-            width: 50vw; height: 50vw;
-            background: radial-gradient(circle, rgba(224,66,122,0.14) 0%, transparent 70%);
-            bottom: -10%; left: -5%;
+            width: 50vw;
+            height: 50vw;
+            background: radial-gradient(circle, rgba(224, 66, 122, 0.14) 0%, transparent 70%);
+            bottom: -10%;
+            left: -5%;
         }
         .orb-3 {
-            width: 35vw; height: 35vw;
-            background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
-            top: 60%; left: 60%;
+            width: 35vw;
+            height: 35vw;
+            background: radial-gradient(circle, rgba(167, 139, 250, 0.12) 0%, transparent 70%);
+            top: 60%;
+            left: 60%;
         }
         @keyframes float {
-            0% { transform: translate(0, 0) scale(1); }
-            100% { transform: translate(5%, 3%) scale(1.08); }
+            0% {
+                transform: translate(0, 0) scale(1);
+            }
+            100% {
+                transform: translate(5%, 3%) scale(1.08);
+            }
         }
 
-        /* Navigation */
+        /* شريط التنقل */
         .navbar {
-            position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
-            width: 95%; max-width: 1280px; min-height: 70px;
-            background: var(--bg-nav); backdrop-filter: var(--glass-blur);
+            position: fixed;
+            top: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 95%;
+            max-width: 1280px;
+            min-height: 70px;
+            background: var(--bg-nav);
+            backdrop-filter: var(--glass-blur);
             -webkit-backdrop-filter: var(--glass-blur);
             border: 1px solid var(--border);
             border-radius: var(--radius-nav);
-            display: flex; flex-wrap: wrap; align-items: center;
-            justify-content: space-between; padding: 10px 22px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 22px;
             z-index: 1000;
-            box-shadow: 0 4px 24px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.7) inset;
-            gap: 14px; transition: background 0.4s, border-color 0.4s, box-shadow 0.3s;
-        }
-        .navbar.scrolled {
-            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
+            gap: 14px;
+            transition: background 0.4s, border-color 0.4s, box-shadow 0.3s;
         }
 
         .brand {
-            font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px;
-            text-decoration: none; color: var(--text-main); display: flex; align-items: center; gap: 10px;
-            letter-spacing: -0.02em; flex-shrink: 0;
+            font-family: 'Syne', sans-serif;
+            font-weight: 800;
+            font-size: 22px;
+            text-decoration: none;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            letter-spacing: -0.02em;
+            flex-shrink: 0;
             transition: transform 0.2s;
         }
-        .brand:hover { transform: scale(1.03); }
+        .brand:hover {
+            transform: scale(1.03);
+        }
         .brand-icon {
-            width: 40px; height: 40px;
+            width: 40px;
+            height: 40px;
             background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            border-radius: 12px; display: flex; align-items: center; justify-content: center;
-            color: #fff; font-size: 18px; box-shadow: 0 6px 18px var(--accent-glow);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 18px;
+            box-shadow: 0 6px 18px var(--accent-glow);
         }
 
-        .search-container { flex: 1; max-width: 600px; width: 100%; }
+        .search-container {
+            flex: 1;
+            max-width: 600px;
+            width: 100%;
+        }
         .search-bar {
-            display: flex; align-items: center; background: var(--bg-input);
-            border: 2px solid transparent; border-radius: var(--radius-pill);
-            padding: 4px 4px 4px 20px; transition: var(--transition); width: 100%;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+            display: flex;
+            align-items: center;
+            background: var(--bg-input);
+            border: 2px solid transparent;
+            border-radius: var(--radius-pill);
+            padding: 4px 4px 4px 20px;
+            transition: var(--transition);
+            width: 100%;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
         }
         .search-bar:focus-within {
-            border-color: var(--accent); background: var(--bg-input-focus);
-            box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.04);
+            border-color: var(--accent);
+            background: var(--bg-input-focus);
+            box-shadow: 0 0 0 4px var(--accent-glow), 0 4px 16px rgba(0, 0, 0, 0.04);
             transform: translateY(-1px);
         }
         .search-bar input {
-            flex: 1; background: transparent; border: none; padding: 10px 0;
-            color: var(--text-main); font-family: 'Tajawal', sans-serif; font-size: 15px; min-width: 0;
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 10px 0;
+            color: var(--text-main);
+            font-family: 'Tajawal', sans-serif;
+            font-size: 15px;
+            min-width: 0;
         }
         .search-btn {
             background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            border: none; color: #fff; cursor: pointer; width: 44px; height: 40px;
-            border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
-            font-size: 15px; transition: var(--transition);
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            width: 44px;
+            height: 40px;
+            border-radius: var(--radius-pill);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 15px;
+            transition: var(--transition);
             box-shadow: 0 4px 14px var(--accent-glow);
         }
-        .search-btn:hover { transform: scale(1.06); box-shadow: 0 6px 18px var(--accent-glow); }
+        .search-btn:hover {
+            transform: scale(1.06);
+            box-shadow: 0 6px 18px var(--accent-glow);
+        }
 
         #theme-toggle {
-            background: var(--bg-input); border: 2px solid var(--border);
-            color: var(--text-sub); cursor: pointer; width: 42px; height: 42px;
-            border-radius: 50%; display: flex; align-items: center; justify-content: center;
-            font-size: 16px; transition: var(--transition);
+            background: var(--bg-input);
+            border: 2px solid var(--border);
+            color: var(--text-sub);
+            cursor: pointer;
+            width: 42px;
+            height: 42px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: var(--transition);
+        }
+        #theme-toggle:hover {
+            border-color: var(--accent);
+            color: var(--accent);
+            transform: rotate(180deg);
         }
-        #theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(180deg); }
 
-        /* Tabs */
+        /* علامات التبويب */
         .tabs-bar {
-            position: fixed; top: 110px; left: 50%; transform: translateX(-50%);
-            width: 95%; max-width: 1280px; display: flex; gap: 8px; z-index: 999;
-            overflow-x: auto; padding-bottom: 6px; scrollbar-width: none;
-            backdrop-filter: blur(10px); padding: 6px 10px; border-radius: 40px;
-            background: rgba(255,255,255,0.25); border: 1px solid var(--border); margin-top: 8px;
+            position: fixed;
+            top: 110px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 95%;
+            max-width: 1280px;
+            display: flex;
+            gap: 8px;
+            z-index: 999;
+            overflow-x: auto;
+            padding: 6px 10px;
+            scrollbar-width: none;
+            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.25);
+            border: 1px solid var(--border);
+            border-radius: 40px;
+        }
+        [data-theme="dark"] .tabs-bar {
+            background: rgba(18, 20, 46, 0.35);
         }
-        [data-theme="dark"] .tabs-bar { background: rgba(18,20,46,0.35); }
         .tab-pill {
-            padding: 8px 18px; border-radius: var(--radius-pill);
-            background: var(--bg-card); border: 1.5px solid var(--border);
-            color: var(--text-sub); font-family: 'Tajawal', sans-serif;
-            font-size: 13.5px; font-weight: 500; cursor: pointer;
-            transition: var(--transition); display: flex; align-items: center; gap: 7px;
-            white-space: nowrap; box-shadow: var(--shadow-card);
-            backdrop-filter: blur(10px);
+            padding: 8px 18px;
+            border-radius: var(--radius-pill);
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            color: var(--text-sub);
+            font-family: 'Tajawal', sans-serif;
+            font-size: 13.5px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            white-space: nowrap;
+            box-shadow: var(--shadow-card);
+        }
+        .tab-pill:hover {
+            border-color: var(--border-hover);
+            color: var(--accent);
+            transform: translateY(-1px);
         }
-        .tab-pill:hover { border-color: var(--border-hover); color: var(--accent); transform: translateY(-1px); }
         .tab-pill.active {
-            background: var(--accent); color: #fff; border-color: var(--accent);
+            background: var(--accent);
+            color: #fff;
+            border-color: var(--accent);
             box-shadow: 0 6px 20px var(--accent-glow);
             font-weight: 600;
         }
 
-        /* Page Layout */
         .page-wrapper {
-            position: relative; z-index: 1; max-width: 1280px;
-            margin: 190px auto 60px; padding: 0 20px;
-            display: flex; flex-direction: column; gap: 28px;
+            position: relative;
+            z-index: 1;
+            max-width: 1280px;
+            margin: 190px auto 60px;
+            padding: 0 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 28px;
+        }
+        .results-area {
+            min-width: 0;
+            width: 100%;
         }
-        .results-area { min-width: 0; width: 100%; }
 
-        /* Loading */
         .loading-spinner {
-            display: flex; align-items: center; gap: 10px; color: var(--text-sub);
-            font-size: 14px; padding: 24px; justify-content: center;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            color: var(--text-sub);
+            font-size: 14px;
+            padding: 24px;
+            justify-content: center;
         }
         .spinner {
-            width: 20px; height: 20px; border: 3px solid var(--border);
-            border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite;
+            width: 20px;
+            height: 20px;
+            border: 3px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 0.7s linear infinite;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
-        @keyframes spin { to { transform: rotate(360deg); } }
 
-        /* Cards Animation */
-        .search-result, .image-card, .video-card, .rich-graph-container {
-            opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease;
+        /* تأثيرات الظهور */
+        .search-result,
+        .image-card,
+        .video-card,
+        .rich-graph-container {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.5s ease, transform 0.5s ease;
         }
-        .search-result.visible, .image-card.visible, .video-card.visible, .rich-graph-container.visible {
-            opacity: 1; transform: translateY(0);
+        .search-result.visible,
+        .image-card.visible,
+        .video-card.visible,
+        .rich-graph-container.visible {
+            opacity: 1;
+            transform: translateY(0);
         }
 
         .search-result {
-            background: var(--bg-card); border: 1.5px solid var(--border);
-            border-radius: var(--radius-card); padding: 20px 22px; margin-bottom: 14px;
-            transition: var(--transition); box-shadow: var(--shadow-card);
-            display: flex; gap: 16px; align-items: flex-start;
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 20px 22px;
+            margin-bottom: 14px;
+            transition: var(--transition);
+            box-shadow: var(--shadow-card);
+            display: flex;
+            gap: 16px;
+            align-items: flex-start;
             backdrop-filter: blur(5px);
         }
         .search-result:hover {
-            border-color: var(--border-hover); box-shadow: var(--shadow-hover);
+            border-color: var(--border-hover);
+            box-shadow: var(--shadow-hover);
             transform: translateY(-3px);
         }
         .favicon-wrap {
-            width: 28px; height: 28px; border-radius: 8px; overflow: hidden;
-            flex-shrink: 0; margin-top: 2px; background: var(--bg-input);
-            display: flex; align-items: center; justify-content: center;
-            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-        }
-        .favicon-wrap img { width: 18px; height: 18px; object-fit: contain; }
-        .result-content { flex: 1; min-width: 0; }
-        .result-domain { font-size: 12px; color: var(--text-faint); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
+            width: 28px;
+            height: 28px;
+            border-radius: 8px;
+            overflow: hidden;
+            flex-shrink: 0;
+            margin-top: 2px;
+            background: var(--bg-input);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+        }
+        .favicon-wrap img {
+            width: 18px;
+            height: 18px;
+            object-fit: contain;
+        }
+        .fallback-icon {
+            color: var(--text-faint);
+            font-size: 13px;
+        }
+        .result-content {
+            flex: 1;
+            min-width: 0;
+        }
+        .result-domain {
+            font-size: 12px;
+            color: var(--text-faint);
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
         .result-title {
-            font-size: 17px; font-weight: 700; color: var(--accent); text-decoration: none;
-            display: inline-block; margin-bottom: 8px; line-height: 1.4; transition: color 0.2s;
+            font-size: 17px;
+            font-weight: 700;
+            color: var(--accent);
+            text-decoration: none;
+            display: inline-block;
+            margin-bottom: 8px;
+            line-height: 1.4;
+            transition: color 0.2s;
+        }
+        .result-title:hover {
+            color: var(--accent-2);
+            text-decoration: underline;
+        }
+        .result-snippet {
+            font-size: 14px;
+            color: var(--text-sub);
+            line-height: 1.7;
         }
-        .result-title:hover { color: var(--accent-2); text-decoration: underline; }
-        .result-snippet { font-size: 14px; color: var(--text-sub); line-height: 1.7; }
 
-        /* Rich Results */
-        .rich-graph-container { display: flex; flex-direction: column; gap: 22px; margin-bottom: 28px; }
+        /* ===== الرسم البياني الغني ===== */
+        .rich-graph-container {
+            display: flex;
+            flex-direction: column;
+            gap: 22px;
+            margin-bottom: 28px;
+        }
         .rich-images-row {
-            display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; min-height: 170px; align-items: center;
+            display: flex;
+            gap: 10px;
+            overflow-x: auto;
+            scrollbar-width: none;
+            padding-bottom: 8px;
+            min-height: 170px;
+            align-items: center;
         }
         .rich-img-card {
-            flex-shrink: 0; height: 170px; border-radius: 16px; overflow: hidden;
-            background: var(--bg-input); border: 1px solid var(--border); box-shadow: var(--shadow-card);
-            transition: var(--transition); position: relative;
+            flex-shrink: 0;
+            height: 170px;
+            border-radius: 16px;
+            overflow: hidden;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-card);
+            transition: var(--transition);
+            position: relative;
+        }
+        .rich-img-card:hover {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: var(--shadow-hover);
+        }
+        .rich-img-card img {
+            height: 100%;
+            width: auto;
+            object-fit: cover;
+            display: block;
         }
-        .rich-img-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-hover); }
-        .rich-img-card img { height: 100%; width: auto; object-fit: cover; display: block; }
         .img-error-overlay {
-            position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
-            background: var(--bg-input); color: var(--text-faint); flex-direction: column; gap: 6px; font-size: 13px;
+            position: absolute;
+            inset: 0;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background: var(--bg-input);
+            color: var(--text-faint);
+            flex-direction: column;
+            gap: 6px;
+            font-size: 13px;
+        }
+        .img-error-overlay i {
+            font-size: 24px;
+        }
+        .wiki-card {
+            margin-bottom: 0 !important;
+        }
+        .wiki-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 10px;
+        }
+        .wiki-domain {
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-main);
+        }
+        .wiki-url {
+            font-size: 12px;
+            color: var(--text-faint);
+            text-decoration: none;
         }
-        .img-error-overlay i { font-size: 24px; }
-
-        .wiki-card { margin-bottom: 0 !important; }
-        .wiki-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
-        .wiki-domain { font-size: 14px; font-weight: 700; color: var(--text-main); }
-        .wiki-url { font-size: 12px; color: var(--text-faint); text-decoration: none; }
         .rich-section-title {
-            font-size: 20px; font-weight: 700; margin: 12px 0 8px; color: var(--text-main);
-            display: flex; align-items: center; gap: 10px;
+            font-size: 20px;
+            font-weight: 700;
+            margin: 12px 0 8px;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .rich-section-title i {
+            font-size: 15px;
+            color: var(--text-faint);
+            margin-right: auto;
+        }
+        .rich-videos-row {
+            display: flex;
+            gap: 14px;
+            overflow-x: auto;
+            padding-bottom: 12px;
+            scrollbar-width: none;
         }
-        .rich-section-title i { font-size: 15px; color: var(--text-faint); margin-right: auto; }
-
-        .rich-videos-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
         .rich-vid-card {
-            flex: 0 0 250px; text-decoration: none; background: var(--bg-card); border-radius: 16px;
-            overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: var(--transition);
+            flex: 0 0 250px;
+            text-decoration: none;
+            background: var(--bg-card);
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-card);
+            transition: var(--transition);
+        }
+        .rich-vid-card:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-hover);
+            border-color: var(--accent);
+        }
+        .rich-vid-thumb {
+            height: 140px;
+            position: relative;
+            background: var(--bg-input);
+        }
+        .rich-vid-thumb img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
-        .rich-vid-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--accent); }
-        .rich-vid-thumb { height: 140px; position: relative; background: var(--bg-input); }
-        .rich-vid-thumb img { width: 100%; height: 100%; object-fit: cover; }
         .rich-vid-play {
-            position: absolute; bottom: 12px; left: 12px;
-            background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); color: #fff;
-            width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center;
-            justify-content: center; font-size: 13px; transition: 0.2s;
+            position: absolute;
+            bottom: 12px;
+            left: 12px;
+            background: rgba(0, 0, 0, 0.75);
+            backdrop-filter: blur(6px);
+            color: #fff;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            transition: 0.2s;
+        }
+        .rich-vid-card:hover .rich-vid-play {
+            background: var(--accent);
+        }
+        .rich-vid-info {
+            padding: 14px;
         }
-        .rich-vid-card:hover .rich-vid-play { background: var(--accent); }
-        .rich-vid-info { padding: 14px; }
         .rich-vid-title {
-            font-size: 14px; font-weight: 600; color: var(--text-main);
-            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-main);
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            line-height: 1.5;
+        }
+        .rich-vid-meta {
+            font-size: 12px;
+            color: var(--text-faint);
+            margin-top: 8px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .discover-bubbles {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
         }
-        .rich-vid-meta { font-size: 12px; color: var(--text-faint); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
-
-        .discover-bubbles { display: flex; flex-direction: column; gap: 10px; }
         .discover-bubble {
-            background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 60px;
-            padding: 15px 24px; display: flex; align-items: center; gap: 14px;
-            cursor: pointer; transition: var(--transition); font-family: 'Tajawal', sans-serif;
-            font-size: 16px; font-weight: 500; color: var(--text-main); text-align: right;
-            box-shadow: var(--shadow-card); backdrop-filter: blur(5px); width: 100%;
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: 60px;
+            padding: 15px 24px;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            cursor: pointer;
+            transition: var(--transition);
+            font-family: 'Tajawal', sans-serif;
+            font-size: 16px;
+            font-weight: 500;
+            color: var(--text-main);
+            text-align: right;
+            box-shadow: var(--shadow-card);
+            backdrop-filter: blur(5px);
+            width: 100%;
+        }
+        .discover-bubble i {
+            color: var(--text-faint);
+            font-size: 16px;
+            transition: 0.2s;
         }
-        .discover-bubble i { color: var(--text-faint); font-size: 16px; transition: 0.2s; }
         .discover-bubble:hover {
-            background: var(--bg-input-focus); border-color: var(--accent); color: var(--accent);
-            transform: translateX(-6px); box-shadow: var(--shadow-hover);
+            background: var(--bg-input-focus);
+            border-color: var(--accent);
+            color: var(--accent);
+            transform: translateX(-6px);
+            box-shadow: var(--shadow-hover);
+        }
+        .discover-bubble:hover i {
+            color: var(--accent);
         }
-        .discover-bubble:hover i { color: var(--accent); }
 
-        /* Image Grid */
+        /* شبكات الصور والفيديو */
         .images-grid {
-            display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; width: 100%;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 16px;
+            width: 100%;
         }
         .image-card {
-            background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-card);
-            overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card);
-            display: flex; flex-direction: column;
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            transition: var(--transition);
+            box-shadow: var(--shadow-card);
+            display: flex;
+            flex-direction: column;
+        }
+        .image-card:hover {
+            border-color: var(--border-hover);
+            box-shadow: var(--shadow-hover);
+            transform: translateY(-5px);
+        }
+        .image-card-link {
+            display: block;
+            width: 100%;
+            height: 190px;
+            overflow: hidden;
+            background: var(--bg-input);
+            position: relative;
+        }
+        .image-card-link img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.4s ease;
+        }
+        .image-card:hover .image-card-link img {
+            transform: scale(1.08);
+        }
+        .image-info {
+            padding: 10px 14px;
+            font-size: 13px;
+            color: var(--text-sub);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-        .image-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-hover); transform: translateY(-5px); }
-        .image-card-link { display: block; width: 100%; height: 190px; overflow: hidden; background: var(--bg-input); position: relative; }
-        .image-card-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
-        .image-card:hover .image-card-link img { transform: scale(1.08); }
-        .image-info { padding: 10px 14px; font-size: 13px; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-        /* Video Grid */
         .videos-grid {
-            display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; width: 100%;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 22px;
+            width: 100%;
         }
         .video-card {
-            background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-card);
-            overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card);
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            transition: var(--transition);
+            box-shadow: var(--shadow-card);
+        }
+        .video-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-hover);
+        }
+        .video-thumb-wrap {
+            position: relative;
+            width: 100%;
+            height: 190px;
+            background: var(--bg-input);
+            display: block;
+            overflow: hidden;
+        }
+        .video-thumb-wrap img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: 0.3s;
         }
-        .video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
-        .video-thumb-wrap { position: relative; width: 100%; height: 190px; background: var(--bg-input); display: block; overflow: hidden; }
-        .video-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
         .play-overlay {
-            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-            width: 50px; height: 50px; background: rgba(91,94,244,0.9); color: white; border-radius: 50%;
-            display: flex; align-items: center; justify-content: center; font-size: 18px;
-            box-shadow: 0 0 20px rgba(0,0,0,0.3); transition: var(--transition); z-index: 2;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 50px;
+            height: 50px;
+            background: rgba(91, 94, 244, 0.9);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            transition: var(--transition);
+            z-index: 2;
+        }
+        .video-details {
+            padding: 16px;
+        }
+        .video-title {
+            font-size: 15px;
+            font-weight: 700;
+            color: var(--text-main);
+            text-decoration: none;
+            display: block;
+            line-height: 1.5;
         }
-        .video-details { padding: 16px; }
-        .video-title { font-size: 15px; font-weight: 700; color: var(--text-main); text-decoration: none; display: block; line-height: 1.5; }
 
-        /* AI Widget */
-        .sidebar { width: 100%; order: 2; margin-top: 12px; }
-        .ai-widget-wrap { position: relative; border-radius: var(--radius-card); }
+        /* مساعد AI */
+        .sidebar {
+            width: 100%;
+            order: 2;
+            margin-top: 12px;
+        }
+        .ai-widget-wrap {
+            position: relative;
+            border-radius: var(--radius-card);
+        }
         .ai-glow-ring {
-            position: absolute; inset: -3px; border-radius: calc(var(--radius-card) + 3px);
+            position: absolute;
+            inset: -3px;
+            border-radius: calc(var(--radius-card) + 3px);
             background: conic-gradient(from var(--angle, 0deg), var(--accent), var(--accent-2), #a78bfa, var(--accent), var(--accent-2), var(--accent));
-            z-index: 0; animation: spin-glow 5s linear infinite; filter: blur(1.5px);
+            z-index: 0;
+            animation: spin-glow 5s linear infinite;
+            filter: blur(1.5px);
+        }
+        @property --angle {
+            syntax: '<angle>';
+            initial-value: 0deg;
+            inherits: false;
+        }
+        @keyframes spin-glow {
+            to {
+                --angle: 360deg;
+            }
         }
-        @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
-        @keyframes spin-glow { to { --angle: 360deg; } }
         .ai-widget {
-            position: relative; z-index: 1; background: var(--bg-card);
-            border-radius: var(--radius-card); padding: 20px 20px 18px;
-            box-shadow: var(--shadow-card); backdrop-filter: blur(5px);
+            position: relative;
+            z-index: 1;
+            background: var(--bg-card);
+            border-radius: var(--radius-card);
+            padding: 20px 20px 18px;
+            box-shadow: var(--shadow-card);
+            backdrop-filter: blur(5px);
+        }
+        .ai-widget-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 16px;
         }
-        .ai-widget-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
         .ai-widget-icon {
-            width: 34px; height: 34px; border-radius: 10px;
+            width: 34px;
+            height: 34px;
+            border-radius: 10px;
             background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            display: flex; align-items: center; justify-content: center;
-            color: #fff; font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 14px;
+        }
+        .ai-widget-badge {
+            margin-right: auto;
+            font-size: 11px;
+            padding: 3px 10px;
+            border-radius: 20px;
+            background: var(--accent-glow);
+            color: var(--accent);
+        }
+        .ai-answer-body {
+            font-size: 14px;
+            color: var(--text-sub);
+            line-height: 1.8;
+            min-height: 60px;
+        }
+        .ai-skeleton {
+            height: 12px;
+            border-radius: 6px;
+            background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%);
+            background-size: 200% 100%;
+            animation: shimmer 1.4s ease-in-out infinite;
+            margin-bottom: 10px;
+        }
+        @keyframes shimmer {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+        .ai-sources {
+            margin-top: 12px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+        }
+        .ai-source-chip {
+            font-size: 11px;
+            padding: 3px 10px;
+            border-radius: 20px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            color: var(--text-faint);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            transition: var(--transition);
+        }
+        .ai-source-chip:hover {
+            border-color: var(--accent);
+            color: var(--accent);
         }
-        .ai-widget-badge { margin-right: auto; font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--accent-glow); color: var(--accent); }
-        .ai-answer-body { font-size: 14px; color: var(--text-sub); line-height: 1.8; min-height: 60px; }
-        .ai-skeleton { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; margin-bottom: 10px; }
-        @keyframes shimmer { 0%{background-position:200% 0}100%{background-position:-200% 0}}
         .ai-copy-btn {
-            margin-top: 14px; padding: 8px 16px; background: var(--bg-input); border: 1px solid var(--border);
-            border-radius: 30px; cursor: pointer; font-size: 12px; color: var(--text-sub); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition);
+            margin-top: 14px;
+            padding: 8px 16px;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 30px;
+            cursor: pointer;
+            font-size: 12px;
+            color: var(--text-sub);
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            transition: var(--transition);
+        }
+        .ai-copy-btn:hover {
+            background: var(--accent);
+            color: #fff;
+            border-color: var(--accent);
+        }
+        .ai-widget-footer {
+            font-size: 10.5px;
+            color: var(--text-faint);
+            margin-top: 12px;
+            padding-top: 10px;
+            border-top: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
-        .ai-copy-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
 
-        /* Back to Top */
         .back-to-top {
-            position: fixed; bottom: 30px; right: 30px; z-index: 999;
-            width: 46px; height: 46px; border-radius: 50%; background: var(--accent);
-            color: #fff; display: flex; align-items: center; justify-content: center;
-            font-size: 18px; cursor: pointer; opacity: 0; visibility: hidden;
-            transition: 0.3s; box-shadow: 0 6px 20px var(--accent-glow); border: none;
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 999;
+            width: 46px;
+            height: 46px;
+            border-radius: 50%;
+            background: var(--accent);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            cursor: pointer;
+            opacity: 0;
+            visibility: hidden;
+            transition: 0.3s;
+            box-shadow: 0 6px 20px var(--accent-glow);
+            border: none;
+        }
+        .back-to-top.show {
+            opacity: 1;
+            visibility: visible;
         }
-        .back-to-top.show { opacity: 1; visibility: visible; }
 
-        /* Mobile */
-        .ai-mobile-wrap { display: none; border-radius: var(--radius-card); margin-bottom: 20px; position: relative; }
+        .ai-mobile-wrap {
+            display: none;
+            border-radius: var(--radius-card);
+            margin-bottom: 20px;
+            position: relative;
+        }
 
         @media (max-width: 767px) {
-            .navbar { top: 10px; border-radius: 18px; padding: 10px 16px; }
-            .tabs-bar { top: 140px; gap: 4px; }
-            .page-wrapper { margin-top: 210px; }
-            .sidebar { display: none !important; }
-            .ai-mobile-wrap { display: block; }
-            .rich-img-card { height: 130px; }
-            .images-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
-            .videos-grid { grid-template-columns: 1fr; }
+            .navbar {
+                top: 10px;
+                border-radius: 18px;
+                padding: 10px 16px;
+            }
+            .tabs-bar {
+                top: 140px;
+                gap: 4px;
+            }
+            .page-wrapper {
+                margin-top: 210px;
+            }
+            .sidebar {
+                display: none !important;
+            }
+            .ai-mobile-wrap {
+                display: block;
+            }
+            .rich-img-card {
+                height: 130px;
+            }
+            .images-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+            .videos-grid {
+                grid-template-columns: 1fr;
+            }
         }
         @media (min-width: 768px) {
-            .navbar { flex-wrap: nowrap; padding: 0 24px; height: 70px; }
-            .page-wrapper { display: grid; grid-template-columns: 1fr 320px; gap: 28px; }
-            .sidebar { order: unset; margin-top: 0; }
-            .ai-mobile-wrap { display: none !important; }
+            .navbar {
+                flex-wrap: nowrap;
+                padding: 0 24px;
+                height: 70px;
+            }
+            .page-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 320px;
+                gap: 28px;
+            }
+            .sidebar {
+                order: unset;
+                margin-top: 0;
+            }
+            .ai-mobile-wrap {
+                display: none !important;
+            }
         }
     </style>
 </head>
 <body>
-<div class="bg-mesh">
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
-    <div class="orb orb-3"></div>
-</div>
-
-<nav class="navbar" id="navbar">
-    <a class="brand" href="index.html">
-        <div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
-        <span>SurfGO</span>
-    </a>
-    <div class="search-container">
-        <form class="search-bar" id="search-form">
-            <input id="main-input" placeholder="ابحث عن أي شيء..." type="text" autocomplete="off" />
-            <button class="search-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
-        </form>
+    <div class="bg-mesh">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
     </div>
-    <div class="nav-actions">
-        <button id="theme-toggle" aria-label="تغيير السمة"></button>
+
+    <nav class="navbar" id="navbar">
+        <a class="brand" href="index.html">
+            <div class="brand-icon"><i class="fa-solid fa-bolt"></i></div>
+            <span>SurfGO</span>
+        </a>
+        <div class="search-container">
+            <form class="search-bar" id="search-form">
+                <input id="main-input" placeholder="ابحث عن أي شيء..." type="text" autocomplete="off" />
+                <button class="search-btn" type="submit" aria-label="بحث"><i class="fa-solid fa-magnifying-glass"></i></button>
+            </form>
+        </div>
+        <div class="nav-actions">
+            <button id="theme-toggle" aria-label="تغيير السمة"></button>
+        </div>
+    </nav>
+
+    <div class="tabs-bar" role="tablist">
+        <button class="tab-pill active" data-tab="all" role="tab"><i class="fa-solid fa-globe"></i> الويب</button>
+        <button class="tab-pill" data-tab="news" role="tab"><i class="fa-solid fa-newspaper"></i> أخبار</button>
+        <button class="tab-pill" data-tab="images" role="tab"><i class="fa-solid fa-image"></i> صور</button>
+        <button class="tab-pill" data-tab="videos" role="tab"><i class="fa-solid fa-play"></i> فيديو</button>
     </div>
-</nav>
-
-<div class="tabs-bar" role="tablist">
-    <button class="tab-pill active" data-tab="all" role="tab"><i class="fa-solid fa-globe"></i> الويب</button>
-    <button class="tab-pill" data-tab="news" role="tab"><i class="fa-solid fa-newspaper"></i> أخبار</button>
-    <button class="tab-pill" data-tab="images" role="tab"><i class="fa-solid fa-image"></i> صور</button>
-    <button class="tab-pill" data-tab="videos" role="tab"><i class="fa-solid fa-play"></i> فيديو</button>
-</div>
-
-<div class="page-wrapper">
-    <main class="results-area" role="main">
-        <div id="loading-text" class="loading-spinner"><div class="spinner"></div> جاري جلب النتائج…</div>
-
-        <div class="ai-mobile-wrap" id="ai-mobile-wrap">
-            <div class="ai-glow-ring"></div>
-            <div class="ai-widget">
-                <div class="ai-widget-header">
-                    <div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div>
-                    <span class="ai-widget-title">إجابة الذكاء الاصطناعي</span>
-                    <span class="ai-widget-badge">AI</span>
-                </div>
-                <div class="ai-answer-body loading" id="ai-answer-body-mobile">
-                    <div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>
+
+    <div class="page-wrapper">
+        <main class="results-area" role="main">
+            <div id="loading-text" class="loading-spinner"><div class="spinner"></div> جاري جلب النتائج…</div>
+
+            <div class="ai-mobile-wrap" id="ai-mobile-wrap">
+                <div class="ai-glow-ring"></div>
+                <div class="ai-widget">
+                    <div class="ai-widget-header">
+                        <div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div>
+                        <span class="ai-widget-title">إجابة الذكاء الاصطناعي</span>
+                        <span class="ai-widget-badge">AI</span>
+                    </div>
+                    <div class="ai-answer-body loading" id="ai-answer-body-mobile">
+                        <div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>
+                    </div>
+                    <div class="ai-sources" id="ai-sources-mobile"></div>
+                    <button class="ai-copy-btn" id="ai-copy-mobile" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
+                    <div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div>
                 </div>
-                <button class="ai-copy-btn" id="ai-copy-mobile" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
             </div>
-        </div>
 
-        <div id="results-meta" class="results-meta" style="display:none"></div>
-        <div id="results-container"></div>
-    </main>
-
-    <aside class="sidebar">
-        <div class="ai-widget-wrap">
-            <div class="ai-glow-ring"></div>
-            <div class="ai-widget">
-                <div class="ai-widget-header">
-                    <div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div>
-                    <span class="ai-widget-title">إجابة الذكاء الاصطناعي</span>
-                    <span class="ai-widget-badge">AI</span>
-                </div>
-                <div class="ai-answer-body loading" id="ai-answer-body">
-                    <div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>
+            <div id="results-meta" class="results-meta" style="display:none"></div>
+            <div id="results-container"></div>
+            <button id="load-more-btn" class="load-more-btn" style="display:none"><i class="fa-solid fa-chevron-down"></i> تحميل المزيد</button>
+        </main>
+
+        <aside class="sidebar">
+            <div class="ai-widget-wrap">
+                <div class="ai-glow-ring"></div>
+                <div class="ai-widget">
+                    <div class="ai-widget-header">
+                        <div class="ai-widget-icon"><i class="fa-solid fa-robot"></i></div>
+                        <span class="ai-widget-title">إجابة الذكاء الاصطناعي</span>
+                        <span class="ai-widget-badge">AI</span>
+                    </div>
+                    <div class="ai-answer-body loading" id="ai-answer-body">
+                        <div class="ai-skeleton"></div><div class="ai-skeleton"></div><div class="ai-skeleton"></div>
+                    </div>
+                    <div class="ai-sources" id="ai-sources-desktop"></div>
+                    <button class="ai-copy-btn" id="ai-copy-desktop" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
+                    <div class="ai-widget-footer"><i class="fa-solid fa-bolt"></i> مدعوم بواسطة AnesNT</div>
                 </div>
-                <button class="ai-copy-btn" id="ai-copy-desktop" style="display:none"><i class="fa-regular fa-copy"></i> نسخ</button>
             </div>
-        </div>
-    </aside>
-</div>
-
-<button class="back-to-top" id="backToTop"><i class="fa-solid fa-arrow-up"></i></button>
-
-<script>
-    (function() {
-        const SEARXNG_URL = "https://cjj-on-hf-searxng.hf.space/search";
-
-        // Theme
-        const themeBtn = document.getElementById('theme-toggle');
-        function setTheme(t) {
-            document.documentElement.setAttribute('data-theme', t);
-            localStorage.setItem('surfgo-theme', t);
-            themeBtn.innerHTML = t === 'dark' ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
-        }
-        setTheme(localStorage.getItem('surfgo-theme') || 'light');
-        themeBtn.addEventListener('click', () => setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'));
-
-        // State
-        const params = new URLSearchParams(window.location.search);
-        let query = params.get('q') || '';
-        let currentTab = params.get('tab') || 'all';
-        let allResults = [];
-
-        const inputEl = document.getElementById('main-input');
-        const resultsEl = document.getElementById('results-container');
-        const loadingEl = document.getElementById('loading-text');
-        const metaEl = document.getElementById('results-meta');
-
-        function setActiveTab(tab) {
-            document.querySelectorAll('.tab-pill').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
-        }
-        setActiveTab(currentTab);
-
-        // Helpers
-        function escapeHTML(str) { return str ? str.replace(/[&<>'"]/g, t => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[t] || t)) : ''; }
-        function getDomain(url) { try { return new URL(url).hostname.replace('www.', ''); } catch { return url || ''; } }
-        function proxyImage(url) { return url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp&maxage=7d&default=placeholder` : url; }
-        function faviconURL(domain) { return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`; }
-        function getBestImageUrl(r) {
-            const candidates = [r.img_src, r.thumbnail_src, r.thumbnail, r.image, r.url, r.img];
-            for (const c of candidates) if (c && typeof c === 'string' && c.match(/\.(jpg|jpeg|png|gif|webp)/i)) return c;
-            return candidates.find(c => c && typeof c === 'string' && c.startsWith('http'));
-        }
-
-        // AI with copy
-        let currentAIAnswer = '';
-        function runAI(q, results) {
-            const desktop = document.getElementById('ai-answer-body');
-            const mobile = document.getElementById('ai-answer-body-mobile');
-            const copyDesktop = document.getElementById('ai-copy-desktop');
-            const copyMobile = document.getElementById('ai-copy-mobile');
-            [desktop, mobile].forEach(el => { if(el) { el.classList.add('loading'); el.innerHTML = '<div class="ai-skeleton"></div><div class="ai-skeleton"></div>'; } });
-            [copyDesktop, copyMobile].forEach(el => { if(el) el.style.display = 'none'; });
-
-            setTimeout(() => {
-                currentAIAnswer = results[0] ? `بناءً على البحث، ${results[0].content.slice(0, 200)}...` : 'لا توجد معلومات كافية.';
-                [desktop, mobile].forEach(el => { if(el) { el.classList.remove('loading'); el.textContent = currentAIAnswer; } });
-                [copyDesktop, copyMobile].forEach(el => { if(el) el.style.display = 'inline-flex'; });
-            }, 1200);
-        }
-        document.getElementById('ai-copy-desktop')?.addEventListener('click', () => navigator.clipboard.writeText(currentAIAnswer));
-        document.getElementById('ai-copy-mobile')?.addEventListener('click', () => navigator.clipboard.writeText(currentAIAnswer));
-
-        // Intersection Observer for animations
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
+        </aside>
+    </div>
+
+    <button class="back-to-top" id="backToTop"><i class="fa-solid fa-arrow-up"></i></button>
+
+    <script>
+        (function() {
+            const SEARXNG_URL = "https://cjj-on-hf-searxng.hf.space/search";
+            const GEMINI_API = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent";
+            const GEMINI_API_KEY = ""; // ضع مفتاح API هنا إن وجد
+
+            // السمة
+            const themeBtn = document.getElementById('theme-toggle');
+            function setTheme(t) {
+                document.documentElement.setAttribute('data-theme', t);
+                localStorage.setItem('surfgo-theme', t);
+                themeBtn.innerHTML = t === 'dark' ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
+            }
+            setTheme(localStorage.getItem('surfgo-theme') || 'light');
+            themeBtn.addEventListener('click', () => setTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'));
+
+            // الحالة
+            const params = new URLSearchParams(window.location.search);
+            let query = params.get('q') || '';
+            let currentTab = params.get('tab') || 'all';
+            let allResults = [];
+
+            const inputEl = document.getElementById('main-input');
+            const resultsEl = document.getElementById('results-container');
+            const loadingEl = document.getElementById('loading-text');
+            const metaEl = document.getElementById('results-meta');
+            const loadMoreBtn = document.getElementById('load-more-btn');
+
+            function setActiveTab(tab) {
+                document.querySelectorAll('.tab-pill').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
+            }
+            setActiveTab(currentTab);
+
+            // دوال مساعدة
+            function escapeHTML(str) {
+                return str ? str.replace(/[&<>'"]/g, t => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[t] || t)) : '';
+            }
+            function getDomain(url) {
+                try { return new URL(url).hostname.replace('www.', ''); } catch { return url || ''; }
+            }
+            function proxyImage(url) {
+                return url && !url.startsWith('data:') ? `https://wsrv.nl/?url=${encodeURIComponent(url)}&output=webp&maxage=7d&default=placeholder` : url;
+            }
+            function faviconURL(domain) {
+                return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+            }
+            function getBestImageUrl(r) {
+                const candidates = [r.img_src, r.thumbnail_src, r.thumbnail, r.image, r.url, r.img];
+                for (const c of candidates) if (c && typeof c === 'string' && c.match(/\.(jpg|jpeg|png|gif|webp)/i)) return c;
+                return candidates.find(c => c && typeof c === 'string' && c.startsWith('http'));
+            }
+
+            // نسخ نص AI
+            let currentAIAnswer = '';
+            document.getElementById('ai-copy-desktop')?.addEventListener('click', () => navigator.clipboard.writeText(currentAIAnswer));
+            document.getElementById('ai-copy-mobile')?.addEventListener('click', () => navigator.clipboard.writeText(currentAIAnswer));
+
+            function updateAISources(sources) {
+                const chipsHTML = sources.slice(0, 4).map(s => {
+                    let domain = '';
+                    try { domain = new URL(s.url).hostname.replace('www.', ''); } catch { domain = s.url; }
+                    return `<a class="ai-source-chip" href="${s.url}" target="_blank" rel="noopener"><i class="fa-solid fa-link"></i>${escapeHTML(domain)}</a>`;
+                }).join('');
+                document.getElementById('ai-sources-desktop').innerHTML = chipsHTML;
+                document.getElementById('ai-sources-mobile').innerHTML = chipsHTML;
+            }
+
+            function runAI(q, results) {
+                const desktop = document.getElementById('ai-answer-body');
+                const mobile = document.getElementById('ai-answer-body-mobile');
+                const copyDesktop = document.getElementById('ai-copy-desktop');
+                const copyMobile = document.getElementById('ai-copy-mobile');
+                [desktop, mobile].forEach(el => { if(el) { el.classList.add('loading'); el.innerHTML = '<div class="ai-skeleton"></div><div class="ai-skeleton"></div>'; } });
+                [copyDesktop, copyMobile].forEach(el => { if(el) el.style.display = 'none'; });
+                document.getElementById('ai-sources-desktop').innerHTML = '';
+                document.getElementById('ai-sources-mobile').innerHTML = '';
+
+                const bestResult = results[0];
+                const fallbackText = bestResult ? `بناءً على البحث، ${bestResult.content.slice(0, 200)}...` : 'لا توجد معلومات كافية.';
+                const sources = results.slice(0, 4);
+
+                setTimeout(() => {
+                    currentAIAnswer = fallbackText;
+                    [desktop, mobile].forEach(el => { if(el) { el.classList.remove('loading'); el.textContent = currentAIAnswer; } });
+                    [copyDesktop, copyMobile].forEach(el => { if(el) el.style.display = 'inline-flex'; });
+                    updateAISources(sources);
+                }, 1200);
+            }
+
+            // Intersection Observer للرسوم المتحركة
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) entry.target.classList.add('visible');
+                });
+            }, { threshold: 0.1, rootMargin: '0px 0px -20px 0px' });
+
+            function observeNewElements() {
+                document.querySelectorAll('.search-result, .image-card, .video-card, .rich-graph-container').forEach(el => observer.observe(el));
+            }
+
+            // العودة إلى الأعلى
+            const backBtn = document.getElementById('backToTop');
+            window.addEventListener('scroll', () => { backBtn.classList.toggle('show', window.scrollY > 400); });
+            backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+
+            // البحث
+            async function performSearch(q, tab = 'all') {
+                resultsEl.innerHTML = '';
+                metaEl.style.display = 'none';
+                loadMoreBtn.style.display = 'none';
+                loadingEl.style.display = 'flex';
+                const category = { all: 'general', news: 'news', images: 'images', videos: 'videos' }[tab] || 'general';
+
+                try {
+                    const response = await fetch(`${SEARXNG_URL}?q=${encodeURIComponent(q)}&format=json&categories=${category}&language=ar&safesearch=1`, { signal: AbortSignal.timeout(15000) });
+                    const data = await response.json();
+                    allResults = data.results || [];
+                    loadingEl.style.display = 'none';
+
+                    if (allResults.length > 0) {
+                        metaEl.style.display = 'flex';
+                        metaEl.innerHTML = `تقريباً <span style="color:var(--accent);font-weight:700">${allResults.length}</span> نتيجة`;
+                        runAI(q, allResults);
+
+                        if (tab === 'images') renderAllImages(allResults);
+                        else if (tab === 'videos') renderAllVideos(allResults);
+                        else renderRichWeb(q, allResults);
+                        observeNewElements();
+                    } else {
+                        resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-face-frown"></i><p>لا توجد نتائج لـ "${escapeHTML(q)}"</p></div>`;
+                    }
+                } catch (error) {
+                    loadingEl.style.display = 'none';
+                    resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>تعذّر الاتصال بالمحرك.</p></div>`;
                 }
-            });
-        }, { threshold: 0.1, rootMargin: '0px 0px -20px 0px' });
-
-        function observeNewElements() {
-            document.querySelectorAll('.search-result, .image-card, .video-card, .rich-graph-container').forEach(el => observer.observe(el));
-        }
-
-        // Back to top
-        const backBtn = document.getElementById('backToTop');
-        window.addEventListener('scroll', () => { backBtn.classList.toggle('show', window.scrollY > 400); });
-        backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
-
-        // Search
-        async function performSearch(q, tab = 'all') {
-            resultsEl.innerHTML = ''; metaEl.style.display = 'none';
-            loadingEl.style.display = 'flex';
-            const category = { all: 'general', news: 'news', images: 'images', videos: 'videos' }[tab] || 'general';
-
-            try {
-                const response = await fetch(`${SEARXNG_URL}?q=${encodeURIComponent(q)}&format=json&categories=${category}&language=ar&safesearch=1`, { signal: AbortSignal.timeout(15000) });
-                const data = await response.json();
-                allResults = data.results || [];
-                loadingEl.style.display = 'none';
-
-                if (allResults.length > 0) {
-                    metaEl.style.display = 'flex'; metaEl.innerHTML = `تقريباً <span style="color:var(--accent);font-weight:700">${allResults.length}</span> نتيجة`;
-                    runAI(q, allResults);
-
-                    if (tab === 'images') renderImages(allResults);
-                    else if (tab === 'videos') renderVideos(allResults);
-                    else renderWeb(q, allResults);
-                    observeNewElements();
-                } else {
-                    resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-face-frown"></i><p>لا توجد نتائج لـ "${escapeHTML(q)}"</p></div>`;
+            }
+
+            function renderRichWeb(q, results) {
+                resultsEl.innerHTML = '';
+                let mainCard = results.find(r => r.url.includes('wikipedia.org')) || results.find(r => !r.url.includes('youtube.com'));
+                const ytResults = results.filter(r => r.url.includes('youtube.com/watch')).slice(0, 4);
+
+                const richContainer = document.createElement('div');
+                richContainer.className = 'rich-graph-container';
+
+                const imagesRow = document.createElement('div');
+                imagesRow.className = 'rich-images-row';
+                imagesRow.innerHTML = '<div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div>';
+                richContainer.appendChild(imagesRow);
+
+                fetch(`${SEARXNG_URL}?q=${encodeURIComponent(q)}&format=json&categories=images&language=ar`)
+                    .then(res => res.json())
+                    .then(data => {
+                        if (data.results) {
+                            const valid = data.results.filter(r => getBestImageUrl(r)).slice(0, 6);
+                            if (valid.length) {
+                                imagesRow.innerHTML = valid.map(r => {
+                                    const img = proxyImage(getBestImageUrl(r));
+                                    return `<a href="${escapeHTML(r.url||'#')}" target="_blank" class="rich-img-card">
+                                        <img src="${escapeHTML(img)}" alt="صورة" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />
+                                        <div class="img-error-overlay"><i class="fa-solid fa-image-slash"></i> تعذّر التحميل</div>
+                                    </a>`;
+                                }).join('');
+                            } else imagesRow.style.display = 'none';
+                        }
+                    }).catch(() => imagesRow.style.display = 'none');
+
+                if (mainCard) {
+                    const dmn = getDomain(mainCard.url);
+                    richContainer.innerHTML += `
+                        <div class="wiki-card search-result">
+                            <div class="wiki-header"><img src="${faviconURL(dmn)}" style="width:26px;height:26px;border-radius:6px" /><div><div class="wiki-domain">${escapeHTML(dmn)}</div><a href="${escapeHTML(mainCard.url)}" target="_blank" class="wiki-url">${escapeHTML(mainCard.url)}</a></div></div>
+                            <a href="${escapeHTML(mainCard.url)}" target="_blank" class="result-title" style="font-size:20px">${escapeHTML(mainCard.title)}</a>
+                            <p class="result-snippet">${escapeHTML(mainCard.content)}</p>
+                        </div>`;
                 }
-            } catch (error) {
-                loadingEl.style.display = 'none';
-                resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>تعذّر الاتصال بالمحرك.</p></div>`;
-            }
-        }
-
-        function renderWeb(q, results) {
-            resultsEl.innerHTML = '';
-            let mainCard = results.find(r => r.url.includes('wikipedia.org')) || results.find(r => !r.url.includes('youtube.com'));
-            const ytResults = results.filter(r => r.url.includes('youtube.com/watch')).slice(0, 4);
-
-            const richContainer = document.createElement('div');
-            richContainer.className = 'rich-graph-container';
-
-            const imagesRow = document.createElement('div');
-            imagesRow.className = 'rich-images-row';
-            imagesRow.innerHTML = '<div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div><div class="rich-img-skeleton"></div>';
-            richContainer.appendChild(imagesRow);
-
-            fetch(`${SEARXNG_URL}?q=${encodeURIComponent(q)}&format=json&categories=images&language=ar`)
-                .then(res => res.json())
-                .then(data => {
-                    if (data.results) {
-                        const valid = data.results.filter(r => getBestImageUrl(r)).slice(0, 6);
-                        if (valid.length) {
-                            imagesRow.innerHTML = valid.map(r => {
-                                const img = proxyImage(getBestImageUrl(r));
-                                return `<a href="${escapeHTML(r.url||'#')}" target="_blank" class="rich-img-card">
-                                    <img src="${escapeHTML(img)}" alt="صورة" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />
-                                    <div class="img-error-overlay"><i class="fa-solid fa-image-slash"></i> تعذّر التحميل</div>
-                                </a>`;
-                            }).join('');
-                        } else imagesRow.style.display = 'none';
-                    }
-                }).catch(() => imagesRow.style.display = 'none');
-
-            if (mainCard) {
-                const dmn = getDomain(mainCard.url);
-                richContainer.innerHTML += `
-                    <div class="wiki-card search-result">
-                        <div class="wiki-header"><img src="${faviconURL(dmn)}" style="width:26px;height:26px;border-radius:6px" /><div><div class="wiki-domain">${escapeHTML(dmn)}</div><a href="${escapeHTML(mainCard.url)}" target="_blank" class="wiki-url">${escapeHTML(mainCard.url)}</a></div></div>
-                        <a href="${escapeHTML(mainCard.url)}" target="_blank" class="result-title" style="font-size:20px">${escapeHTML(mainCard.title)}</a>
-                        <p class="result-snippet">${escapeHTML(mainCard.content)}</p>
-                    </div>`;
-            }
-            if (ytResults.length) {
-                richContainer.innerHTML += `<h3 class="rich-section-title">فيديوهات <i class="fa-solid fa-chevron-left"></i></h3><div class="rich-videos-row">${ytResults.map(r => {
-                    const vidMatch = r.url.match(/v=([^&]+)/);
-                    const thumb = vidMatch ? `https://img.youtube.com/vi/${vidMatch[1]}/mqdefault.jpg` : proxyImage(r.thumbnail);
-                    return `<a href="${escapeHTML(r.url)}" target="_blank" class="rich-vid-card"><div class="rich-vid-thumb"><img src="${escapeHTML(thumb)}" loading="lazy" /><div class="rich-vid-play"><i class="fa-solid fa-play"></i></div></div><div class="rich-vid-info"><div class="rich-vid-title">${escapeHTML(r.title)}</div><div class="rich-vid-meta"><img src="${faviconURL('youtube.com')}" /> YouTube</div></div></a>`;
-                }).join('')}</div>`;
-            }
-            richContainer.innerHTML += `<h3 class="rich-section-title">استكشف ${escapeHTML(q)} بالتفصيل</h3><div class="discover-bubbles">${['جميلة جدا','أنواع','صور','فيديوهات','معلومات'].map(d => `<button class="discover-bubble" data-query="${escapeHTML(d+' '+q)}"><i class="fa-solid fa-magnifying-glass"></i> ${escapeHTML(d+' '+q)}</button>`).join('')}</div>`;
-            resultsEl.appendChild(richContainer);
-
-            richContainer.querySelectorAll('.discover-bubble').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    inputEl.value = btn.dataset.query;
-                    document.getElementById('search-form').dispatchEvent(new Event('submit'));
+                if (ytResults.length) {
+                    richContainer.innerHTML += `<h3 class="rich-section-title">فيديوهات <i class="fa-solid fa-chevron-left"></i></h3><div class="rich-videos-row">${ytResults.map(r => {
+                        const vidMatch = r.url.match(/v=([^&]+)/);
+                        const thumb = vidMatch ? `https://img.youtube.com/vi/${vidMatch[1]}/mqdefault.jpg` : proxyImage(r.thumbnail);
+                        return `<a href="${escapeHTML(r.url)}" target="_blank" class="rich-vid-card"><div class="rich-vid-thumb"><img src="${escapeHTML(thumb)}" loading="lazy" /><div class="rich-vid-play"><i class="fa-solid fa-play"></i></div></div><div class="rich-vid-info"><div class="rich-vid-title">${escapeHTML(r.title)}</div><div class="rich-vid-meta"><img src="${faviconURL('youtube.com')}" /> YouTube</div></div></a>`;
+                    }).join('')}</div>`;
+                }
+                richContainer.innerHTML += `<h3 class="rich-section-title">استكشف ${escapeHTML(q)} بالتفصيل</h3><div class="discover-bubbles">${['جميلة جدا','أنواع','صور','فيديوهات','معلومات'].map(d => `<button class="discover-bubble" data-query="${escapeHTML(d+' '+q)}"><i class="fa-solid fa-magnifying-glass"></i> ${escapeHTML(d+' '+q)}</button>`).join('')}</div>`;
+                resultsEl.appendChild(richContainer);
+
+                richContainer.querySelectorAll('.discover-bubble').forEach(btn => {
+                    btn.addEventListener('click', () => {
+                        inputEl.value = btn.dataset.query;
+                        document.getElementById('search-form').dispatchEvent(new Event('submit'));
+                    });
                 });
-            });
 
-            const used = new Set([mainCard?.url, ...ytResults.map(r=>r.url)]);
-            results.filter(r => !used.has(r.url)).forEach(r => {
-                const domain = getDomain(r.url);
-                const article = document.createElement('article');
-                article.className = 'search-result';
-                article.innerHTML = `<div class="favicon-wrap"><img src="${faviconURL(domain)}" loading="lazy" /></div><div class="result-content"><div class="result-domain"><i class="fa-solid fa-link"></i> ${escapeHTML(domain)}</div><a class="result-title" href="${escapeHTML(r.url)}" target="_blank">${escapeHTML(r.title)}</a><p class="result-snippet">${escapeHTML(r.content)}</p></div>`;
-                resultsEl.appendChild(article);
-            });
-        }
+                const used = new Set([mainCard?.url, ...ytResults.map(r=>r.url)]);
+                results.filter(r => !used.has(r.url)).forEach(r => {
+                    const domain = getDomain(r.url);
+                    const article = document.createElement('article');
+                    article.className = 'search-result';
+                    article.innerHTML = `<div class="favicon-wrap"><img src="${faviconURL(domain)}" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /><i class="fa-solid fa-globe fallback-icon" style="display:none"></i></div><div class="result-content"><div class="result-domain"><i class="fa-solid fa-link"></i> ${escapeHTML(domain)}</div><a class="result-title" href="${escapeHTML(r.url)}" target="_blank">${escapeHTML(r.title)}</a><p class="result-snippet">${escapeHTML(r.content)}</p></div>`;
+                    resultsEl.appendChild(article);
+                });
+            }
 
-        function renderImages(results) {
-            const wrap = document.createElement('div'); wrap.className = 'images-grid';
-            results.forEach(r => {
-                const raw = getBestImageUrl(r); if(!raw) return;
-                wrap.innerHTML += `<div class="image-card"><a class="image-card-link" href="${escapeHTML(r.url)}" target="_blank"><img src="${escapeHTML(proxyImage(raw))}" alt="${escapeHTML(r.title)}" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /><div class="img-error-overlay"><i class="fa-solid fa-image-slash"></i> تعذّر</div></a><div class="image-info">${escapeHTML(r.title)}</div></div>`;
-            });
-            resultsEl.appendChild(wrap);
-        }
+            function renderAllImages(results) {
+                const wrap = document.createElement('div'); wrap.className = 'images-grid';
+                results.forEach(r => {
+                    const raw = getBestImageUrl(r); if(!raw) return;
+                    wrap.innerHTML += `<div class="image-card"><a class="image-card-link" href="${escapeHTML(r.url)}" target="_blank"><img src="${escapeHTML(proxyImage(raw))}" alt="${escapeHTML(r.title)}" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" /><div class="img-error-overlay"><i class="fa-solid fa-image-slash"></i> تعذّر</div></a><div class="image-info">${escapeHTML(r.title)}</div></div>`;
+                });
+                resultsEl.appendChild(wrap);
+            }
 
-        function renderVideos(results) {
-            const wrap = document.createElement('div'); wrap.className = 'videos-grid';
-            results.forEach(r => {
-                wrap.innerHTML += `<div class="video-card"><a href="${escapeHTML(r.url)}" target="_blank" class="video-thumb-wrap"><img src="${proxyImage(r.thumbnail)}" loading="lazy" /><div class="play-overlay"><i class="fa-solid fa-play"></i></div></a><div class="video-details"><a class="video-title" href="${escapeHTML(r.url)}">${escapeHTML(r.title)}</a></div></div>`;
+            function renderAllVideos(results) {
+                const wrap = document.createElement('div'); wrap.className = 'videos-grid';
+                results.forEach(r => {
+                    wrap.innerHTML += `<div class="video-card"><a href="${escapeHTML(r.url)}" target="_blank" class="video-thumb-wrap"><img src="${proxyImage(r.thumbnail)}" loading="lazy" /><div class="play-overlay"><i class="fa-solid fa-play"></i></div></a><div class="video-details"><a class="video-title" href="${escapeHTML(r.url)}">${escapeHTML(r.title)}</a></div></div>`;
+                });
+                resultsEl.appendChild(wrap);
+            }
+
+            // التهيئة
+            if (query) { inputEl.value = query; performSearch(query, currentTab); }
+            document.getElementById('search-form').addEventListener('submit', (e) => {
+                e.preventDefault(); const q = inputEl.value.trim(); if(!q) return;
+                window.history.pushState({}, '', `?q=${encodeURIComponent(q)}&tab=${currentTab}`);
+                query = q; performSearch(q, currentTab);
             });
-            resultsEl.appendChild(wrap);
-        }
-
-        if (query) { inputEl.value = query; performSearch(query, currentTab); }
-        document.getElementById('search-form').addEventListener('submit', (e) => {
-            e.preventDefault(); const q = inputEl.value.trim(); if(!q) return;
-            window.history.pushState({}, '', `?q=${encodeURIComponent(q)}&tab=${currentTab}`);
-            query = q; performSearch(q, currentTab);
-        });
-        document.querySelectorAll('.tab-pill').forEach(btn => {
-            btn.addEventListener('click', () => {
-                const tab = btn.dataset.tab; if(tab===currentTab) return;
-                currentTab = tab; setActiveTab(tab);
-                window.history.pushState({}, '', `?q=${encodeURIComponent(query)}&tab=${tab}`);
-                if(query) performSearch(query, tab);
+            document.querySelectorAll('.tab-pill').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const tab = btn.dataset.tab; if(tab===currentTab) return;
+                    currentTab = tab; setActiveTab(tab);
+                    window.history.pushState({}, '', `?q=${encodeURIComponent(query)}&tab=${tab}`);
+                    if(query) performSearch(query, tab);
+                });
             });
-        });
-    })();
-</script>
+            loadMoreBtn.addEventListener('click', () => performSearch(query, currentTab));
+        })();
+    </script>
 </body>
 </html>