Update results.html

results.html

@@ -5,312 +5,527 @@
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
     <title>SurfGO | نتائج البحث</title>
     <link href="https://fonts.googleapis.com" rel="preconnect" />
-    <link
-        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;family=Tajawal:wght@300;400;500;700&amp;display=swap"
-        rel="stylesheet" />
+    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" />
     <style>
         :root {
-            --bg-base: #f8fafc;
-            --bg-nav: rgba(255, 255, 255, 0.85);
+            --bg-base: #f0f2f8;
+            --bg-nav: rgba(255,255,255,0.75);
             --bg-card: #ffffff;
-            --bg-input: #f1f5f9;
+            --bg-input: #e8ebf5;
             --bg-input-focus: #ffffff;
-            --border: #e2e8f0;
-            --accent: #6366f1;
-            --accent-2: #ec4899;
-            --text-main: #0f172a;
-            --text-sub: #64748b;
-            --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+            --border: rgba(99,102,241,0.12);
+            --border-hover: rgba(99,102,241,0.4);
+            --accent: #5b5ef4;
+            --accent-2: #e0427a;
+            --accent-glow: rgba(91,94,244,0.18);
+            --text-main: #12132a;
+            --text-sub: #6b7280;
+            --text-faint: #9ca3af;
+            --shadow-card: 0 2px 12px rgba(91,94,244,0.07), 0 1px 3px rgba(0,0,0,0.04);
+            --shadow-hover: 0 8px 32px rgba(91,94,244,0.13), 0 2px 8px rgba(0,0,0,0.06);
+            --radius-nav: 22px;
+            --radius-card: 18px;
+            --radius-pill: 100px;
+            --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         [data-theme="dark"] {
-            --bg-base: #0f172a;
-            --bg-nav: rgba(15, 23, 42, 0.9);
-            --bg-card: #1e293b;
-            --bg-input: #334155;
-            --bg-input-focus: #1e293b;
-            --border: #334155;
-            --accent: #818cf8;
+            --bg-base: #0c0d1d;
+            --bg-nav: rgba(18,20,40,0.88);
+            --bg-card: #13152e;
+            --bg-input: #1c1f3d;
+            --bg-input-focus: #13152e;
+            --border: rgba(130,133,255,0.13);
+            --border-hover: rgba(130,133,255,0.4);
+            --accent: #8284fc;
             --accent-2: #f472b6;
-            --text-main: #f1f5f9;
-            --text-sub: #94a3b8;
+            --accent-glow: rgba(130,133,255,0.16);
+            --text-main: #eef0ff;
+            --text-sub: #9099c0;
+            --text-faint: #5a6080;
+            --shadow-card: 0 2px 14px rgba(0,0,0,0.28);
+            --shadow-hover: 0 10px 36px rgba(130,133,255,0.14);
         }
 
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            outline: none;
-        }
+        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; outline:none; }
 
         body {
-            font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
+            font-family: 'Tajawal', sans-serif;
             background: var(--bg-base);
             color: var(--text-main);
             min-height: 100vh;
             overflow-x: hidden;
-            transition: background-color 0.3s ease, color 0.3s ease;
+            transition: background 0.35s, color 0.35s;
         }
 
-        .orb {
+        /* ─── Background mesh ─── */
+        .bg-mesh {
             position: fixed;
-            border-radius: 50%;
-            filter: blur(100px);
+            inset: 0;
             z-index: 0;
             pointer-events: none;
-            opacity: 0.15;
-            transition: opacity 0.3s;
+            overflow: hidden;
         }
-
-        .orb-1 {
-            top: -10%;
-            left: -10%;
-            width: 50vw;
-            height: 50vw;
-            background: var(--accent);
+        .bg-mesh::before {
+            content: '';
+            position: absolute;
+            top: -20%;
+            right: -15%;
+            width: 55vw;
+            height: 55vw;
+            background: radial-gradient(circle, rgba(91,94,244,0.13) 0%, transparent 70%);
+            border-radius: 50%;
+            animation: drift 18s ease-in-out infinite alternate;
         }
-        .orb-2 {
-            bottom: -10%;
-            right: -10%;
-            width: 40vw;
-            height: 40vw;
-            background: var(--accent-2);
+        .bg-mesh::after {
+            content: '';
+            position: absolute;
+            bottom: -15%;
+            left: -10%;
+            width: 45vw;
+            height: 45vw;
+            background: radial-gradient(circle, rgba(224,66,122,0.1) 0%, transparent 70%);
+            border-radius: 50%;
+            animation: drift 22s ease-in-out infinite alternate-reverse;
         }
+        @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(4%,3%) scale(1.06); } }
 
+        /* ─── Navbar ─── */
         .navbar {
             position: fixed;
-            top: 16px;
+            top: 14px;
             left: 50%;
             transform: translateX(-50%);
             width: 95%;
-            max-width: 1300px;
+            max-width: 1280px;
             height: auto;
-            min-height: 72px;
+            min-height: 68px;
             background: var(--bg-nav);
-            backdrop-filter: blur(24px);
+            backdrop-filter: blur(28px) saturate(1.6);
+            -webkit-backdrop-filter: blur(28px) saturate(1.6);
             border: 1px solid var(--border);
-            border-radius: 20px;
+            border-radius: var(--radius-nav);
             display: flex;
             flex-wrap: wrap;
             align-items: center;
             justify-content: space-between;
-            padding: 10px 20px;
+            padding: 10px 18px;
             z-index: 1000;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-            gap: 15px;
-            transition: background 0.3s, border-color 0.3s;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
+            gap: 12px;
+            transition: background 0.35s, border-color 0.35s;
         }
 
+        /* ─── Brand ─── */
         .brand {
-            font-weight: 700;
-            font-size: 22px;
+            font-family: 'Syne', sans-serif;
+            font-weight: 800;
+            font-size: 21px;
             text-decoration: none;
             color: var(--text-main);
             display: flex;
             align-items: center;
             gap: 10px;
+            letter-spacing: -0.02em;
+            flex-shrink: 0;
         }
-
         .brand-icon {
-            width: 38px;
-            height: 38px;
-            background: linear-gradient(135deg, var(--accent), var(--accent-2));
-            border-radius: 11px;
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #fff;
+            font-size: 15px;
             flex-shrink: 0;
+            box-shadow: 0 4px 14px var(--accent-glow);
         }
+        .brand span { transition: color 0.3s; }
 
+        /* ─── Search bar ─── */
         .search-container {
             flex: 1;
-            max-width: 600px;
+            max-width: 580px;
             width: 100%;
-            margin: 0;
         }
-
         .search-bar {
             display: flex;
             align-items: center;
             background: var(--bg-input);
-            border: 1px solid var(--border);
-            border-radius: 100px;
-            padding: 4px;
-            transition: var(--transition), background-color 0.3s;
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-pill);
+            padding: 4px 4px 4px 16px;
+            transition: var(--transition);
             width: 100%;
         }
-
         .search-bar:focus-within {
             border-color: var(--accent);
             background: var(--bg-input-focus);
-            box-shadow: 0 0 15px rgba(99, 102, 241, 0.1);
+            box-shadow: 0 0 0 4px var(--accent-glow);
         }
-
         .search-bar input {
             flex: 1;
             background: transparent;
             border: none;
-            padding: 10px 18px;
+            padding: 9px 0;
             color: var(--text-main);
-            font-size: 15px;
-            width: 100%;
+            font-family: 'Tajawal', sans-serif;
+            font-size: 14.5px;
+            min-width: 0;
         }
-
-        .search-bar input::placeholder {
-            color: var(--text-sub);
+        .search-bar input::placeholder { color: var(--text-faint); }
+        .search-btn {
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            border: none;
+            color: #fff;
+            cursor: pointer;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            flex-shrink: 0;
+            transition: var(--transition);
+            box-shadow: 0 2px 10px var(--accent-glow);
         }
+        .search-btn:hover { transform: scale(1.07); box-shadow: 0 4px 16px var(--accent-glow); }
 
+        /* ─── Theme toggle ─── */
         #theme-toggle {
-            background: none;
-            border: none;
-            color: var(--text-main);
+            background: var(--bg-input);
+            border: 1.5px solid var(--border);
+            color: var(--text-sub);
             cursor: pointer;
-            padding: 5px;
-            font-size: 20px;
-            width: 40px;
-            height: 40px;
+            width: 38px;
+            height: 38px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: background 0.3s, color 0.3s;
+            font-size: 15px;
+            transition: var(--transition);
+            flex-shrink: 0;
         }
-        #theme-toggle:hover { background: var(--border); }
+        #theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-input-focus); }
 
+        /* ─── Tabs ─── */
         .tabs-bar {
             position: fixed;
-            top: 105px;
+            top: 98px;
             left: 50%;
             transform: translateX(-50%);
             width: 95%;
-            max-width: 1300px;
+            max-width: 1280px;
             display: flex;
-            gap: 8px;
+            gap: 6px;
             z-index: 999;
             overflow-x: auto;
-            padding-bottom: 5px;
+            padding-bottom: 4px;
             scrollbar-width: none;
         }
         .tabs-bar::-webkit-scrollbar { display: none; }
 
         .tab-pill {
-            padding: 8px 16px;
-            border-radius: 100px;
+            padding: 7px 16px;
+            border-radius: var(--radius-pill);
             background: var(--bg-card);
-            border: 1px solid var(--border);
+            border: 1.5px solid var(--border);
             color: var(--text-sub);
+            font-family: 'Tajawal', sans-serif;
             font-size: 13px;
+            font-weight: 500;
             cursor: pointer;
-            transition: 0.3s;
+            transition: var(--transition);
             display: flex;
             align-items: center;
             gap: 6px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
             white-space: nowrap;
+            box-shadow: var(--shadow-card);
         }
-        .tab-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+        .tab-pill:hover { border-color: var(--border-hover); color: var(--accent); }
+        .tab-pill.active {
+            background: var(--accent);
+            color: #fff;
+            border-color: var(--accent);
+            box-shadow: 0 4px 16px var(--accent-glow);
+        }
+        .tab-pill i { font-size: 11px; }
 
+        /* ─── Page layout ─── */
         .page-wrapper {
-            max-width: 1300px;
-            margin: 180px auto 50px;
+            position: relative;
+            z-index: 1;
+            max-width: 1280px;
+            margin: 170px auto 60px;
             padding: 0 16px;
             display: flex;
             flex-direction: column;
-            gap: 30px;
+            gap: 24px;
         }
         .results-area { min-width: 0; width: 100%; }
 
-        /* بطاقات النتائج (عامة) – بيضاء تماماً في الوضع الفاتح */
-        .gsc-result,
+        /* ─── Loading state ─── */
+        #loading-text {
+            color: var(--text-sub);
+            font-size: 13.5px;
+            margin-bottom: 18px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        #loading-text::before {
+            content: '';
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border: 2px solid var(--border);
+            border-top-color: var(--accent);
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            flex-shrink: 0;
+        }
+        #loading-text.done::before { display: none; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* ─── Result cards ─── */
         .tavily-result {
-            background: #ffffff !important;  /* أبيض صلب في الوضع الفاتح */
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 16px;
-            margin-bottom: 15px;
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 18px 20px;
+            margin-bottom: 12px;
             transition: var(--transition);
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
+            box-shadow: var(--shadow-card);
             display: flex;
-            gap: 12px;
+            gap: 14px;
             align-items: flex-start;
+            animation: fadeSlideIn 0.35s ease both;
         }
-        /* في الوضع الداكن نعيد اللون الداكن للبطاقات */
-        [data-theme="dark"] .gsc-result,
-        [data-theme="dark"] .tavily-result {
-            background: var(--bg-card) !important;
+        .tavily-result:nth-child(1) { animation-delay: 0.04s; }
+        .tavily-result:nth-child(2) { animation-delay: 0.08s; }
+        .tavily-result:nth-child(3) { animation-delay: 0.12s; }
+        .tavily-result:nth-child(4) { animation-delay: 0.16s; }
+        .tavily-result:nth-child(n+5) { animation-delay: 0.20s; }
+
+        @keyframes fadeSlideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
 
-        .gsc-result:hover,
         .tavily-result:hover {
-            border-color: var(--accent);
-            transform: translateX(-5px);
-            background: var(--bg-input) !important;
-            box-shadow: 0 8px 30px rgba(99,102,241,0.08);
+            border-color: var(--border-hover);
+            box-shadow: var(--shadow-hover);
+            transform: translateY(-2px);
+        }
+
+        .tavily-favicon {
+            width: 22px;
+            height: 22px;
+            border-radius: 5px;
+            margin-top: 3px;
+            flex-shrink: 0;
+            object-fit: contain;
+        }
+        .favicon-placeholder {
+            width: 22px;
+            height: 22px;
+            border-radius: 5px;
+            background: var(--bg-input);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-faint);
+            font-size: 10px;
+            flex-shrink: 0;
+            margin-top: 3px;
+        }
+        .tavily-content { flex: 1; min-width: 0; }
+        .tavily-domain {
+            font-size: 11.5px;
+            color: var(--text-faint);
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .tavily-domain i { font-size: 9px; }
+        .tavily-title {
+            font-family: 'Tajawal', sans-serif;
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--accent);
+            text-decoration: none;
+            display: block;
+            margin-bottom: 6px;
+            line-height: 1.4;
+            transition: color 0.2s;
         }
-        [data-theme="dark"] .gsc-result:hover,
-        [data-theme="dark"] .tavily-result:hover {
-            background: var(--bg-input) !important;
+        .tavily-title:hover { color: var(--accent-2); }
+        .tavily-snippet {
+            font-size: 13.5px;
+            color: var(--text-sub);
+            line-height: 1.65;
         }
 
-        /* Google CSE overrides */
+        /* ─── Google CSE overrides ─── */
         .gsc-control-cse { background: transparent !important; border: none !important; padding: 0 !important; }
-        .gs-title, .gs-title * { color: var(--accent) !important; text-decoration: none !important; font-size: 16px !important; }
-        .gs-snippet { color: var(--text-sub) !important; line-height: 1.6 !important; font-size: 14px !important; }
-
-        .gsc-adBlock, .gsc-branding, .gsc-search-box, .gcsc-branding, .gsc-branding-text, .gsc-branding-img, .gsc-branding-img-noclear,
-        .gs-watermark, .gsc-results-branding, .gcsc-find-more-on-google, .gcsc-find-more-on-google-root,
-        .gsc-result-info, .gsc-orderby, .gsc-selected-option-container, .gsc-thumbnail-inside,
+        .gs-title, .gs-title * { color: var(--accent) !important; text-decoration: none !important; font-size: 16px !important; font-weight: 700 !important; font-family: 'Tajawal', sans-serif !important; }
+        .gs-snippet { color: var(--text-sub) !important; line-height: 1.65 !important; font-size: 13.5px !important; font-family: 'Tajawal', sans-serif !important; }
+        .gsc-thumbnail-inside, .gsc-url-top { padding: 0 !important; }
+        .gsc-result { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: var(--radius-card) !important; padding: 18px 20px !important; margin-bottom: 12px !important; box-shadow: var(--shadow-card) !important; }
+        .gsc-result:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-hover) !important; }
+        .gsc-adBlock, .gsc-branding, .gsc-search-box, .gcsc-branding, .gsc-branding-text,
+        .gsc-branding-img, .gsc-branding-img-noclear, .gs-watermark, .gsc-results-branding,
+        .gcsc-find-more-on-google, .gcsc-find-more-on-google-root, .gsc-result-info,
+        .gsc-orderby, .gsc-selected-option-container, .gsc-thumbnail-inside,
         .gsc-tabsArea, .gsc-tabsAreaInvisible, .gsc-refinementHeader, .gsc-refinementBlock {
-            display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important;
-            width: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important;
+            display: none !important; visibility: hidden !important; height: 0 !important;
+            width: 0 !important; margin: 0 !important; padding: 0 !important;
         }
         .gsc-above-wrapper-area { border: none !important; padding: 0 !important; margin: 0 !important; height: 0 !important; }
 
-        /* Tavily card specifics */
-        .tavily-favicon {
-            width: 24px; height: 24px; border-radius: 4px; margin-top: 2px; flex-shrink: 0;
+        /* ─── Sidebar ─── */
+        .sidebar { width: 100%; order: 2; margin-top: 12px; }
+
+        .widget {
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 20px;
+            box-shadow: var(--shadow-card);
+            overflow: hidden;
         }
-        .tavily-content { flex: 1; }
-        .tavily-title {
-            font-size: 16px; font-weight: 600; color: var(--accent); text-decoration: none;
-            display: block; margin-bottom: 6px;
+
+        .widget-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 18px;
+        }
+        .widget-icon {
+            width: 32px;
+            height: 32px;
+            border-radius: 9px;
+            background: linear-gradient(135deg, var(--accent), var(--accent-2));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 13px;
+            flex-shrink: 0;
+        }
+        .widget-title {
+            font-family: 'Syne', sans-serif;
+            font-size: 14px;
+            font-weight: 700;
+            color: var(--text-main);
+            letter-spacing: -0.01em;
         }
-        .tavily-title:hover { text-decoration: underline; }
-        .tavily-url { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; word-break: break-all; }
-        .tavily-snippet { font-size: 14px; color: var(--text-sub); line-height: 1.6; }
 
-        .sidebar { width: 100%; order: 2; margin-top: 20px; }
-        .widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
-        .sidebar-toggle { display: none; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 15px; text-align: center; font-weight: 600; color: var(--text-main); cursor: pointer; margin-bottom: 15px; }
+        .engine-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--bg-input);
+            padding: 9px 13px;
+            border-radius: 11px;
+            border: 1.5px solid var(--border);
+            margin-bottom: 8px;
+            transition: var(--transition);
+        }
+        .engine-item:last-of-type { margin-bottom: 0; }
+        .engine-item:hover { border-color: var(--border-hover); }
+        .engine-name { font-size: 13px; font-weight: 500; color: var(--text-main); }
+        .engine-status {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            font-size: 11px;
+            color: #10b981;
+            font-weight: 600;
+        }
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            background: #10b981;
+            border-radius: 50%;
+            animation: pulse-dot 2.5s ease-in-out infinite;
+        }
+        @keyframes pulse-dot {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+        .widget-footer {
+            font-size: 11px;
+            color: var(--text-faint);
+            text-align: center;
+            margin-top: 16px;
+            padding-top: 14px;
+            border-top: 1px solid var(--border);
+        }
+
+        .sidebar-toggle {
+            display: none;
+            width: 100%;
+            background: var(--bg-card);
+            border: 1.5px solid var(--border);
+            border-radius: var(--radius-card);
+            padding: 14px 18px;
+            text-align: right;
+            font-family: 'Tajawal', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--text-main);
+            cursor: pointer;
+            margin-bottom: 12px;
+            transition: var(--transition);
+            display: none;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: var(--shadow-card);
+        }
+        .sidebar-toggle:hover { border-color: var(--border-hover); }
         .sidebar-content { display: block; }
 
+        /* ─── No results ─── */
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-sub);
+        }
+        .empty-state i { font-size: 40px; margin-bottom: 16px; color: var(--text-faint); }
+        .empty-state p { font-size: 15px; }
+
+        /* ─── Responsive ─── */
         @media (max-width: 767px) {
-            .navbar { top: 10px; border-radius: 16px; padding: 12px 16px; }
+            .navbar { top: 10px; border-radius: 16px; padding: 10px 14px; gap: 10px; }
             .brand { font-size: 18px; }
-            .brand-icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
-            .tabs-bar { top: 135px; }
-            .page-wrapper { margin-top: 190px; }
-            .sidebar-toggle { display: block; }
+            .brand-icon { width: 32px; height: 32px; font-size: 13px; }
+            .tabs-bar { top: 125px; }
+            .page-wrapper { margin-top: 176px; gap: 16px; }
+            .tavily-result { padding: 14px 15px; }
+            .sidebar-toggle { display: flex; }
             .sidebar-content { display: none; }
             .sidebar-content.active { display: block; }
-            .gsc-result, .tavily-result { padding: 14px; }
         }
         @media (min-width: 768px) {
-            .navbar { flex-wrap: nowrap; padding: 0 20px; height: 72px; gap: 0; }
-            .search-container { margin: 0 24px; }
-            .tabs-bar { top: 105px; overflow-x: visible; padding-bottom: 0; }
-            .tab-pill { padding: 8px 20px; font-size: 13px; gap: 8px; }
-            .page-wrapper { display: grid; grid-template-columns: 1fr 300px; margin: 180px auto 50px; }
+            .navbar { flex-wrap: nowrap; padding: 0 22px; height: 68px; gap: 0; }
+            .search-container { margin: 0 20px; }
+            .tabs-bar { top: 98px; overflow-x: visible; padding-bottom: 0; }
+            .page-wrapper { display: grid; grid-template-columns: 1fr 288px; margin: 176px auto 60px; gap: 24px; }
             .sidebar { order: unset; margin-top: 0; }
-            .gsc-result, .tavily-result { padding: 22px; }
+            .sidebar-toggle { display: none !important; }
         }
     </style>
 </head>
 <body>
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
+    <div class="bg-mesh" aria-hidden="true"></div>
 
     <nav class="navbar">
         <a class="brand" href="index.html">
@@ -319,282 +534,291 @@
         </a>
         <div class="search-container">
             <form class="search-bar" id="search-form">
-                <input id="main-input" placeholder="ابحث في الويب..." type="text" />
-                <button style="background:none; border:none; color:var(--accent); cursor:pointer; padding:0 15px;" type="submit">
-                    <i class="fa-solid fa-search"></i>
+                <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>
-        <button id="theme-toggle" aria-label="تغيير السمة">
-            <i class="fa-solid fa-moon"></i>
-        </button>
+        <button id="theme-toggle" aria-label="تغيير السمة"></button>
     </nav>
 
-    <div class="tabs-bar">
-        <button class="tab-pill active" data-tab="all"><i class="fa-solid fa-globe"></i> الويب</button>
-        <button class="tab-pill" data-tab="news"><i class="fa-solid fa-newspaper"></i> أخبار</button>
-        <button class="tab-pill" data-tab="images"><i class="fa-solid fa-image"></i> صور</button>
-        <button class="tab-pill" data-tab="videos"><i class="fa-solid fa-play"></i> فيديو</button>
+    <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">
-            <div id="loading-text" style="color:var(--text-sub); margin-bottom:20px; font-size: 14px;">
-                جاري استدعاء البيانات من SurfGO...
-            </div>
+        <main class="results-area" role="main">
+            <div id="loading-text">جاري جلب النتائج…</div>
             <div id="results-container"></div>
         </main>
 
-        <aside class="sidebar">
-            <button class="sidebar-toggle" id="sidebarToggle">
-                <i class="fa-solid fa-server" style="margin-left: 8px; color: var(--accent);"></i> المحركات النشطة
-                <i class="fa-solid fa-chevron-down" style="margin-right: 8px; font-size: 12px;"></i>
+        <aside class="sidebar" aria-label="معلومات المحركات">
+            <button class="sidebar-toggle" id="sidebarToggle" aria-expanded="false">
+                <span><i class="fa-solid fa-server" style="margin-left:8px; color:var(--accent);"></i> المحركات النشطة</span>
+                <i class="fa-solid fa-chevron-down" style="font-size:12px; color:var(--text-sub);"></i>
             </button>
             <div class="sidebar-content" id="sidebarContent">
                 <div class="widget">
-                    <div class="brand-icon" style="margin: 0 auto 15px auto;"><i class="fa-solid fa-server"></i></div>
-                    <h3 style="font-size: 16px; margin-bottom: 15px;">المحركات النشطة</h3>
-                    <div style="display: flex; flex-direction: column; gap: 10px; text-align: right;">
-                        <div style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
-                            <span style="font-size: 13px;">Tavily (الويب)</span>
-                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span> نشط
-                            </div>
-                        </div>
-                        <div style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
-                            <span style="font-size: 13px;">أخبار Google</span>
-                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span> نشط
-                            </div>
-                        </div>
-                        <div style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
-                            <span style="font-size: 13px;">صور Google</span>
-                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span> نشط
-                            </div>
-                        </div>
-                        <div style="display: flex; align-items: center; justify-content: space-between; background: var(--bg-base); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);">
-                            <span style="font-size: 13px;">فيديو Google</span>
-                            <div style="display: flex; align-items: center; gap: 5px; color: #10b981; font-size: 11px;">
-                                <span style="width: 6px; height: 6px; background: #10b981; border-radius: 50%;"></span> نشط
-                            </div>
-                        </div>
+                    <div class="widget-header">
+                        <div class="widget-icon"><i class="fa-solid fa-server"></i></div>
+                        <span class="widget-title">المحركات النشطة</span>
                     </div>
-                    <p style="font-size: 11px; color: var(--text-sub); margin-top: 15px;">مدعوم بواسطة AnesNT Core</p>
+                    <div class="engine-item">
+                        <span class="engine-name">Tavily (الويب)</span>
+                        <span class="engine-status"><span class="status-dot"></span> نشط</span>
+                    </div>
+                    <div class="engine-item">
+                        <span class="engine-name">أخبار Google</span>
+                        <span class="engine-status"><span class="status-dot"></span> نشط</span>
+                    </div>
+                    <div class="engine-item">
+                        <span class="engine-name">صور Google</span>
+                        <span class="engine-status"><span class="status-dot"></span> نشط</span>
+                    </div>
+                    <div class="engine-item">
+                        <span class="engine-name">فيديو Google</span>
+                        <span class="engine-status"><span class="status-dot"></span> نشط</span>
+                    </div>
+                    <p class="widget-footer">مدعوم بواسطة AnesNT Core</p>
                 </div>
             </div>
         </aside>
     </div>
 
     <script>
-        (function() {
-            // ═══════════════════════════════
-            // إعدادات المفاتيح (يُفضل متغيرات بيئة)
-            // ═══════════════════════════════
-            const TAVILY_API_KEYS = [
-                "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",
-                "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",
-                "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"
-            ];
-
-            const GOOGLE_ENGINES = {
-                news: '35b0f5b6012e94f78',
-                images: '23c7fd94975714dd8',
-                videos: 'b11f5dceb04784b9f'
-            };
-
-            // ═══════════════════
-            // إدارة السمة
-            // ═══════════════════
-            const themeToggle = document.getElementById('theme-toggle');
-            const themeIcon = themeToggle.querySelector('i');
-            function setTheme(theme) {
-                document.documentElement.setAttribute('data-theme', theme);
-                localStorage.setItem('surfgo-theme', theme);
-                themeIcon.classList.toggle('fa-moon', theme === 'light');
-                themeIcon.classList.toggle('fa-sun', theme === 'dark');
-            }
-            const savedTheme = localStorage.getItem('surfgo-theme') || 'light';
-            setTheme(savedTheme);
-            themeToggle.addEventListener('click', () => {
-                const current = document.documentElement.getAttribute('data-theme');
-                setTheme(current === 'dark' ? 'light' : 'dark');
-            });
-
-            // ═══════════════════════════════
-            // عناصر الواجهة
-            // ═══════════════════════════════
-            const params = new URLSearchParams(window.location.search);
-            let query = params.get('q');
-            let currentTab = params.get('tab') || 'all';
-            const inputField = document.getElementById('main-input');
-            const resultsContainer = document.getElementById('results-container');
-            const loadingText = document.getElementById('loading-text');
-            const sidebarToggle = document.getElementById('sidebarToggle');
-            const sidebarContent = document.getElementById('sidebarContent');
-
-            sidebarToggle?.addEventListener('click', () => {
-                sidebarContent.classList.toggle('active');
-                const icon = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
-                if (sidebarContent.classList.contains('active')) {
-                    icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
-                } else {
-                    icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
-                }
+    (function () {
+        // ════════════════════════════════════
+        //  Config
+        // ════════════════════════════════════
+        const TAVILY_API_KEYS = [
+            "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",
+            "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",
+            "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"
+        ];
+        const GOOGLE_ENGINES = {
+            news:   '35b0f5b6012e94f78',
+            images: '23c7fd94975714dd8',
+            videos: 'b11f5dceb04784b9f'
+        };
+
+        // ════════════════════════════════════
+        //  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';
+
+        const inputEl  = document.getElementById('main-input');
+        const resultsEl = document.getElementById('results-container');
+        const loadingEl = document.getElementById('loading-text');
+
+        // Sidebar toggle (mobile)
+        const sidebarToggle  = document.getElementById('sidebarToggle');
+        const sidebarContent = document.getElementById('sidebarContent');
+        sidebarToggle?.addEventListener('click', () => {
+            const open = sidebarContent.classList.toggle('active');
+            sidebarToggle.setAttribute('aria-expanded', open);
+            const chevron = sidebarToggle.querySelector('.fa-chevron-down, .fa-chevron-up');
+            chevron?.classList.toggle('fa-chevron-down', !open);
+            chevron?.classList.toggle('fa-chevron-up',   open);
+        });
+
+        // ════════════════════════════════════
+        //  Tab management
+        // ════════════════════════════════════
+        function setActiveTab(tab) {
+            document.querySelectorAll('.tab-pill').forEach(btn => {
+                const active = btn.dataset.tab === tab;
+                btn.classList.toggle('active', active);
+                btn.setAttribute('aria-selected', active);
             });
+        }
+        setActiveTab(currentTab);
+
+        // ════════════════════════════════════
+        //  Helpers
+        // ════════════════════════════════════
+        function truncateWords(text, max = 22) {
+            if (!text) return '';
+            const words = text.trim().split(/\s+/);
+            return words.length <= max ? text : words.slice(0, max).join(' ') + '…';
+        }
 
-            function updateTabUI(tab) {
-                document.querySelectorAll('.tab-pill').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
-            }
-            updateTabUI(currentTab);
-
-            // ═══════════════════
-            // دالة قص النص إلى 22 كلمة
-            // ═══════════════════
-            function truncateWords(text, maxWords = 22) {
-                if (!text) return '';
-                const words = text.trim().split(/\s+/);
-                if (words.length <= maxWords) return text;
-                return words.slice(0, maxWords).join(' ') + '...';
-            }
+        function getDomain(url) {
+            try { return new URL(url).hostname.replace('www.', ''); }
+            catch { return url; }
+        }
 
-            // تطبيق القص على جميع مقتطفات Google بعد التحميل
-            function truncateGoogleSnippets() {
-                document.querySelectorAll('.gs-snippet').forEach(el => {
-                    if (el.dataset.truncated) return;
-                    const original = el.textContent || '';
-                    el.textContent = truncateWords(original);
-                    el.dataset.truncated = 'true';
-                });
-            }
+        function showLoading(visible) {
+            loadingEl.style.display = visible ? 'flex' : 'none';
+            if (!visible) loadingEl.classList.add('done');
+        }
 
-            if (query) {
-                inputField.value = query;
-                document.title = `${query} - SurfGO`;
-                loadTabResults(currentTab);
-            } else {
-                loadingText.textContent = "يرجى إدخال كلمة بحث للبدء.";
-            }
+        // ════════════════════════════════════
+        //  Boot
+        // ════════════════════════════════════
+        if (query) {
+            inputEl.value = query;
+            document.title = `${query} – SurfGO`;
+            loadTabResults(currentTab);
+        } else {
+            showLoading(false);
+            loadingEl.style.display = 'block';
+            loadingEl.textContent = 'يرجى إدخال كلمة بحث للبدء.';
+        }
 
-            function loadTabResults(tab) {
-                resultsContainer.innerHTML = '';
-                loadingText.style.display = 'block';
-                updateTabUI(tab);
+        // ════════════════════════════════════
+        //  Tab loader
+        // ════════════════════════════════════
+        function loadTabResults(tab) {
+            resultsEl.innerHTML = '';
+            showLoading(true);
+            setActiveTab(tab);
+            tab === 'all' ? fetchTavilyResults(query) : loadGoogleCSE(tab);
+        }
 
-                if (tab === 'all') {
-                    fetchTavilyResults(query);
-                } else {
-                    loadGoogleCSE(tab);
-                }
-            }
+        // ════════════════════════════════════
+        //  Google CSE
+        // ════════════════════════════════════
+        function loadGoogleCSE(tab) {
+            const cx = GOOGLE_ENGINES[tab];
+            if (!cx) return;
+            document.getElementById('cse-logic')?.remove();
+            const s = document.createElement('script');
+            s.id  = 'cse-logic';
+            s.src = `https://cse.google.com/cse.js?cx=${cx}`;
+            s.async = true;
+            s.onload = () => {
+                const div = document.createElement('div');
+                div.className = 'gcse-searchresults-only';
+                div.setAttribute('data-query', query);
+                resultsEl.appendChild(div);
+                setTimeout(() => {
+                    truncateGoogleSnippets();
+                    showLoading(false);
+                }, 1400);
+            };
+            document.head.appendChild(s);
+        }
 
-            function loadGoogleCSE(tab) {
-                const cx = GOOGLE_ENGINES[tab];
-                if (!cx) return;
-
-                const oldScript = document.getElementById('cse-logic');
-                if (oldScript) oldScript.remove();
-
-                const script = document.createElement('script');
-                script.id = 'cse-logic';
-                script.src = `https://cse.google.com/cse.js?cx=${cx}`;
-                script.async = true;
-                script.onload = () => {
-                    const gcseDiv = document.createElement('div');
-                    gcseDiv.className = 'gcse-searchresults-only';
-                    gcseDiv.setAttribute('data-query', query);
-                    resultsContainer.appendChild(gcseDiv);
-                    // ننتظر قليلاً ثم نقص المقتطفات
-                    setTimeout(() => {
-                        truncateGoogleSnippets();
-                        loadingText.style.display = 'none';
-                    }, 1200);
-                };
-                document.head.appendChild(script);
-            }
+        function truncateGoogleSnippets() {
+            document.querySelectorAll('.gs-snippet:not([data-done])').forEach(el => {
+                el.textContent = truncateWords(el.textContent);
+                el.dataset.done = '1';
+            });
+        }
 
-            async function fetchTavilyResults(searchQuery, keyIndex = 0) {
-                if (keyIndex >= TAVILY_API_KEYS.length) {
-                    loadingText.textContent = "عذراً، جميع مفاتيح API غير صالحة. حاول لاحقاً.";
-                    return;
-                }
-                const apiKey = TAVILY_API_KEYS[keyIndex];
-                try {
-                    const response = await fetch('https://api.tavily.com/search', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            api_key: apiKey,
-                            query: searchQuery,
-                            search_depth: 'ultra-fast',
-                            max_results: 20,
-                            include_favicon: true
-                        })
-                    });
-                    if (!response.ok) throw new Error(`HTTP ${response.status}`);
-                    const data = await response.json();
-                    if (data.error) throw new Error(data.error);
-                    renderTavilyResults(data.results || []);
-                    loadingText.style.display = 'none';
-                } catch (error) {
-                    console.warn(`Tavily key ${keyIndex+1} فشل:`, error);
-                    fetchTavilyResults(searchQuery, keyIndex + 1);
-                }
+        // ════════════════════════════════════
+        //  Tavily
+        // ════════════════════════════════════
+        async function fetchTavilyResults(q, idx = 0) {
+            if (idx >= TAVILY_API_KEYS.length) {
+                showLoading(false);
+                resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-triangle-exclamation"></i><p>تعذّر الاتصال بالخادم. حاول مجدداً.</p></div>`;
+                return;
             }
-
-            function renderTavilyResults(results) {
-                resultsContainer.innerHTML = '';
-                if (!results.length) {
-                    resultsContainer.innerHTML = '<p style="color:var(--text-sub); text-align:center; margin-top:40px;">لا توجد نتائج.</p>';
-                    return;
-                }
-                results.forEach(item => {
-                    const card = document.createElement('div');
-                    card.className = 'tavily-result';
-                    const favicon = item.favicon || '';
-                    // قص المحتوى إلى 22 كلمة
-                    const truncatedContent = truncateWords(item.content, 22);
-                    card.innerHTML = `
-                        ${favicon ? `<img class="tavily-favicon" src="${favicon}" alt="favicon" onerror="this.style.display='none'">` : ''}
-                        <div class="tavily-content">
-                            <a class="tavily-title" href="${item.url}" target="_blank" rel="noopener">${item.title}</a>
-                            <div class="tavily-url">${item.url}</div>
-                            <p class="tavily-snippet">${truncatedContent}</p>
-                        </div>
-                    `;
-                    resultsContainer.appendChild(card);
+            try {
+                const res = await fetch('https://api.tavily.com/search', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        api_key: TAVILY_API_KEYS[idx],
+                        query: q,
+                        search_depth: 'ultra-fast',
+                        max_results: 20,
+                        include_favicon: true
+                    })
                 });
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                const data = await res.json();
+                if (data.error) throw new Error(data.error);
+                renderTavilyResults(data.results || []);
+                showLoading(false);
+            } catch (e) {
+                console.warn(`Tavily key ${idx + 1} failed:`, e);
+                fetchTavilyResults(q, idx + 1);
             }
+        }
 
-            // أحداث التبويبات والبحث
-            document.querySelectorAll('.tab-pill').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    currentTab = btn.dataset.tab;
-                    const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query || '')}&tab=${currentTab}`;
-                    window.history.pushState({ path: newUrl }, '', newUrl);
-                    if (query) loadTabResults(currentTab);
-                    else updateTabUI(currentTab);
-                });
-            });
-
-            document.getElementById('search-form').addEventListener('submit', (e) => {
-                e.preventDefault();
-                query = inputField.value.trim();
-                if (query) {
-                    const newUrl = `${window.location.pathname}?q=${encodeURIComponent(query)}&tab=${currentTab}`;
-                    window.history.pushState({ path: newUrl }, '', newUrl);
-                    loadTabResults(currentTab);
-                }
+        function renderTavilyResults(results) {
+            resultsEl.innerHTML = '';
+            if (!results.length) {
+                resultsEl.innerHTML = `<div class="empty-state"><i class="fa-solid fa-magnifying-glass"></i><p>لا توجد نتائج لهذا البحث.</p></div>`;
+                return;
+            }
+            const frag = document.createDocumentFragment();
+            results.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'tavily-result';
+                const domain = getDomain(item.url);
+                const snippet = truncateWords(item.content, 22);
+                const faviconHTML = item.favicon
+                    ? `<img class="tavily-favicon" src="${item.favicon}" alt="" loading="lazy" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'favicon-placeholder',innerHTML:'<i class=\\'fa-solid fa-link\\'></i>'}));"/>`
+                    : `<div class="favicon-placeholder"><i class="fa-solid fa-link"></i></div>`;
+                card.innerHTML = `
+                    ${faviconHTML}
+                    <div class="tavily-content">
+                        <div class="tavily-domain"><i class="fa-solid fa-circle-dot"></i>${domain}</div>
+                        <a class="tavily-title" href="${item.url}" target="_blank" rel="noopener noreferrer">${item.title}</a>
+                        <p class="tavily-snippet">${snippet}</p>
+                    </div>`;
+                frag.appendChild(card);
             });
+            resultsEl.appendChild(frag);
+        }
 
-            // مراقب DOM لإخفاء عناصر Google غير المرغوب فيها + قص المقتطفات تلقائياً
-            const observer = new MutationObserver(() => {
-                document.querySelectorAll('.gsc-adBlock, .gcsc-branding, .gsc-result-info, .gsc-tabsArea, .gsc-refinementHeader')
-                    .forEach(el => el.remove());
-                truncateGoogleSnippets();
+        // ════════════════════════════════════
+        //  Events
+        // ════════════════════════════════════
+        document.querySelectorAll('.tab-pill').forEach(btn => {
+            btn.addEventListener('click', () => {
+                currentTab = btn.dataset.tab;
+                const url = `${location.pathname}?q=${encodeURIComponent(query)}&tab=${currentTab}`;
+                history.pushState({}, '', url);
+                if (query) loadTabResults(currentTab);
+                else setActiveTab(currentTab);
             });
-            observer.observe(document.body, { childList: true, subtree: true });
-        })();
+        });
+
+        document.getElementById('search-form').addEventListener('submit', e => {
+            e.preventDefault();
+            query = inputEl.value.trim();
+            if (!query) return;
+            document.title = `${query} – SurfGO`;
+            const url = `${location.pathname}?q=${encodeURIComponent(query)}&tab=${currentTab}`;
+            history.pushState({}, '', url);
+            loadTabResults(currentTab);
+        });
+
+        // DOM observer – strip Google branding & truncate snippets
+        new MutationObserver(() => {
+            document.querySelectorAll(
+                '.gsc-adBlock,.gcsc-branding,.gsc-result-info,.gsc-tabsArea,.gsc-refinementHeader,.gsc-above-wrapper-area'
+            ).forEach(el => el.remove());
+            truncateGoogleSnippets();
+        }).observe(document.body, { childList: true, subtree: true });
+
+    })();
     </script>
 </body>
 </html>