From c952be061e01d6713e8ce1fe2bd0acae8fc6206c Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Sun, 31 Aug 2025 10:20:11 +0500
Subject: [PATCH] 1. fixed  json fetch 2. fixed smaller screen visual bugs

---
 dist/css/styles.css | 186 ++++++++++++++++++++++++++---
 dist/index.html     | 282 ++++++++++++++++++++++----------------------
 2 files changed, 311 insertions(+), 157 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index e1467f4..d45f748 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -39,10 +39,10 @@
   --container-max: 1400px;
   --header-height: 5rem;
   --content-max: 1200px;
-  /* Fluid layout spacing additions */
+  /* Fluid layout spacing additions - Adjusted clamp min value for small screens */
   --section-pad-y: clamp(2rem, 6vw, 4.5rem);
   --section-pad-y-tight: clamp(1.5rem, 4vw, 3rem);
-  --container-x: clamp(1rem, 3.2vw, 2.5rem);
+  --container-x: clamp(0.75rem, 3.2vw, 2.5rem); /* Reduced min padding */
   /* Spacing (using CSS custom properties for consistency) */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
@@ -124,6 +124,8 @@ html {
   font-size: 16px;
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
+  /* Fix 1: Prevent horizontal overflow on html */
+  overflow-x: hidden;
 }
 body {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -135,6 +137,7 @@ body {
   text-rendering: optimizeLegibility;
   min-height: 100vh;
   margin: 0;
+  /* Fix 1: Prevent horizontal overflow on body */
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
@@ -160,7 +163,10 @@ a:hover {
   outline: 2px solid var(--border-focus);
   outline-offset: 2px;
 }
-/* Enhanced focus styles for keyboard users */
+/* Enhanced focus styles for keyboard users - Improved logic */
+:focus:not(:focus-visible) {
+  outline: none;
+}
 :focus-visible {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
@@ -194,16 +200,19 @@ a:hover {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  /* Fix 1: Prevent horizontal overflow on wrapper */
+  overflow-x: hidden;
 }
 .container {
   max-width: var(--container-max);
   margin-inline: auto;
   padding-inline: var(--container-x);
-  width: 100%;
+  width: 100%; /* Crucial for preventing overflow */
 }
 .content-container {
   max-width: var(--content-max);
   margin: 0 auto;
+  width: 100%; /* Ensure it also respects width */
 }
 /* ===== 3. HEADER & NAVIGATION ===== */
 .site-header {
@@ -308,7 +317,6 @@ a:hover {
   background: var(--bg-secondary);
   font-weight: var(--font-semibold);
 }
-/* Focus Styles (applied via :focus-visible) */
 .nav-link:hover:not(.active) {
   background: var(--bg-tertiary);
   color: var(--text-primary);
@@ -431,9 +439,9 @@ a:hover {
     transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
     z-index: 120; /* Above overlay */
     /* Isolate the animation context */
-    /* Removed will-change for potential performance issues */
+    /* Removed will-change for potential performance issues on the nav itself */
   }
-  /* Active state for the menu being open */
+  /* Active state for the menu being open - Simplified selector */
   .nav-open .header-nav {
     transform: translate3d(0, 0, 0);
   }
@@ -941,16 +949,18 @@ a:hover {
   border: 1px solid var(--border-primary);
   margin: var(--space-3xl) 0;
   overflow: hidden;
+  width: 100%; /* Ensure it doesn't stretch the container */
 }
 .table-wrapper {
-  overflow-x: auto;
-  border-radius: var(--radius-2xl);
+  overflow-x: auto; /* Allow horizontal scroll for wide tables */
+  border-radius: var(--radius-2xl); /* Inherit rounding */
+  width: 100%; /* Add this */
 }
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
-  min-width: 600px;
+  min-width: 600px; /* This is necessary for wide tables but relies on wrapper overflow */
 }
 /* Table toolbar */
 .table-toolbar {
@@ -1711,7 +1721,7 @@ text-decoration: underline;
   .footer-brand {
     text-align: center;
     padding-bottom: var(--space-lg);
-    border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
+    border-bottom: 1px solid var(--border-primary); /* Use theme variable */
     margin-bottom: var(--space-lg);
   }
   .footer-links {
@@ -1724,6 +1734,14 @@ text-decoration: underline;
   .footer-bottom {
     text-align: center;
   }
+  .footer-bottom-content {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .footer-right {
+    text-align: center; /* Ensure right content centers */
+  }
   .hero-meta {
     margin-bottom: var(--space-2xl);
   }
@@ -1731,12 +1749,144 @@ text-decoration: underline;
     font-size: 10px;
   }
 }
-/* Additional responsive tuning for large hero & section spacing */
+/* Fix 6: Specific adjustments for screens smaller than 420px */
+/* Using em units like the original for consistency, 420px / 16px = 26.25em */
+@media (max-width: 26.25em) {
+  /* Further reduce horizontal padding on very small screens */
+  .container {
+    padding-inline: var(--space-sm); /* Even smaller padding */
+  }
+
+  /* Adjust hero section for very small screens */
+  .hero-section {
+    padding: var(--space-4xl) var(--space-sm); /* Reduce horizontal padding */
+  }
+  .hero-title {
+    font-size: clamp(1.5rem, 8vw, 2.5rem); /* Potentially smaller base */
+    margin-bottom: var(--space-lg);
+  }
+  .hero-description {
+    font-size: var(--text-base); /* Use fixed size or smaller clamp base */
+    margin-bottom: var(--space-3xl);
+  }
+  .hero-actions {
+    margin-bottom: var(--space-4xl);
+    gap: var(--space-md); /* Reduce gap between buttons */
+  }
+  .btn {
+    padding: var(--space-md) var(--space-xl); /* Reduce button padding */
+    min-width: 120px; /* Reduce minimum width if needed */
+    font-size: var(--text-sm); /* Smaller font */
+  }
+
+  /* Adjust section titles and descriptions */
+  .section-header {
+    margin-bottom: var(--space-lg);
+  }
+  .section-title {
+    font-size: clamp(1.5rem, 6vw, 2rem); /* Smaller base size */
+    margin-bottom: var(--space-lg);
+  }
+  .section-description {
+    font-size: var(--text-sm); /* Smaller base size */
+  }
+
+  /* Adjust benefit cards */
+  .benefit-card {
+    padding: var(--space-lg) var(--space-md); /* Reduce horizontal padding */
+    min-height: auto;
+  }
+  .benefit-card h3 {
+    font-size: var(--text-base); /* Adjust heading size */
+  }
+
+  /* Adjust notes */
+  .note-card {
+    padding: var(--space-lg);
+  }
+
+  /* Adjust stats */
+  .hero-stats {
+    gap: var(--space-lg); /* Reduce gap */
+  }
+  .stat-number {
+    font-size: clamp(1.5rem, 10vw, 2rem); /* Smaller base */
+  }
+
+  /* Ensure alerts don't overflow */
+  .alert {
+    padding: var(--space-lg);
+    margin: var(--space-lg) 0;
+    gap: var(--space-sm); /* Reduce gap */
+  }
+
+  /* Refine comparison controls */
+  .compare-controls {
+    gap: var(--space-lg); /* Reduce gap */
+  }
+
+  /* Refine table display if necessary */
+  .data-table-container {
+    font-size: 0.8rem; /* Slightly smaller font */
+  }
+  th,
+  td {
+    padding: var(--space-sm) var(--space-md); /* Reduce padding */
+  }
+
+  /* Refine footer */
+  .site-footer {
+    padding: var(--space-5xl) 0 var(--space-3xl); /* Reduce top padding */
+  }
+  .footer-content {
+    gap: var(--space-md); /* Reduce gap */
+    margin-bottom: var(--space-3xl);
+  }
+  .footer-section h4,
+  .footer-section h5 {
+    margin-bottom: var(--space-lg);
+  }
+  .footer-bottom {
+    padding-top: var(--space-3xl);
+  }
+  .footer-bottom-content {
+    gap: var(--space-lg); /* Reduce gap */
+  }
+  .footer-meta {
+    gap: var(--space-md); /* Reduce gap */
+  }
+
+  /* Refine other components as needed */
+  .speed-section {
+    padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
+  }
+  .resource-category {
+    padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
+  }
+  .resource-item {
+    padding: var(--space-md); /* Reduce padding */
+  }
+  .referral-section {
+    padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
+    margin: var(--space-4xl) 0; /* Reduce margin */
+  }
+  .referral-grid {
+    gap: var(--space-md); /* Reduce gap */
+  }
+  .referral-card {
+    padding: var(--space-md); /* Reduce padding */
+    max-width: none; /* Remove max-width restriction */
+  }
+}
+
+
+/* Additional responsive tuning (existing) */
 @media (max-width: 900px) { .hero-section { padding: clamp(3.5rem, 10vw, 5rem) 0 clamp(3rem, 8vw, 4rem); } }
 @media (max-width: 700px) { .hero-section { padding: clamp(3rem, 9vw, 4rem) 0 clamp(2.5rem, 7vw, 3.5rem); } }
 @media (max-width: 520px) { .hero-section { padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(2rem, 6vw, 3rem); } }
 @media (max-width: 400px) { .hero-section { padding: clamp(2rem, 7vw, 3rem) 0 clamp(1.5rem, 6vw, 2.5rem); } }
-/* Ultra-small devices (<=20em ~ 320px) */
+
+/* Ultra-small devices (<=20em ~ 320px) - Review/Adjust */
 @media (max-width: 20em) {
   html { font-size: 14px; }
   body { line-height: 1.5; }
@@ -1746,14 +1896,14 @@ text-decoration: underline;
   .site-title { font-size: var(--text-lg); padding: var(--space-xs) var(--space-md); }
   .nav-link { padding: var(--space-sm) var(--space-md); font-size: 0.75rem; }
   .dark-mode-toggle { width: 38px; height: 38px; }
-  .hero-title { margin-bottom: var(--space-xl); }
-  .hero-section { padding: 2.25rem 0 1.75rem; }
+  /* .hero-title { margin-bottom: var(--space-xl); } */ /* Handled by 26.25em */
+  /* .hero-section { padding: 2.25rem 0 1.75rem; } */ /* Handled by 26.25em */
   .hero-description { font-size: 0.95rem; }
   .hero-stats { gap: var(--space-lg); }
-  .stat-number { font-size: clamp(1.75rem, 10vw, 2.25rem); }
+  /* .stat-number { font-size: clamp(1.75rem, 10vw, 2.25rem); } */ /* Handled by 26.25em */
   .section { padding: 2rem 0; }
   .section-header { margin-bottom: var(--space-xl); }
-  .section-title { font-size: clamp(1.75rem, 9vw, 2.25rem); margin-bottom: var(--space-xl); }
+  /* .section-title { font-size: clamp(1.75rem, 9vw, 2.25rem); margin-bottom: var(--space-xl); } */ /* Handled by 26.25em */
   .section-description { font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
   .benefit-card { padding: var(--space-lg); }
   .benefit-card h3 { font-size: 0.9rem; }
@@ -1762,6 +1912,7 @@ text-decoration: underline;
   .compare-controls { gap: var(--space-lg); }
   .data-table-container { font-size: 0.85rem; }
 }
+
 /* Print Styles */
 @media print {
   .site-header,
@@ -1818,4 +1969,3 @@ text-decoration: underline;
     transform: none;
   }
 }
-
diff --git a/dist/index.html b/dist/index.html
index 9474905..993d36d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,7 +7,7 @@
 
     <title>Debrid Services Comparison - Compare Pricing & Hosts</title>
     <meta name="description"
-    content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
+        content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
     <meta name="robots" content="index, follow">
     <meta name="author" content="Fynks">
     <meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
@@ -37,9 +37,9 @@
     </noscript>
 
     <!-- Prefetch data for quick subsequent use (non-blocking) -->
-    <link rel="prefetch" href="/json/file-hosts-optimized.json" crossorigin>
-    <link rel="prefetch" href="/json/adult-hosts-optimized.json" crossorigin>
-    <link rel="prefetch" href="/json/pricing.json" crossorigin>
+    <link rel="prefetch" as="fetch" href="/json/file-hosts-optimized.json" crossorigin>
+    <link rel="prefetch" as="fetch" href="/json/adult-hosts-optimized.json" crossorigin>
+    <link rel="prefetch" as="fetch" href="/json/pricing.json" crossorigin>
     <link as="style" rel="preload" href="./css/styles-min.css">
 
     <script>
@@ -87,8 +87,8 @@
                 <div class="header-content">
                     <a href="/" class="site-title">
                         <svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
-  <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                            <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
+                        </svg>
                         Debrid Comparison
                     </a>
                     <nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
@@ -102,13 +102,14 @@
                         <a href="#resources" class="nav-link">Resources</a>
                     </nav>
                     <div class="header-actions">
-                        <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
+                        <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode"
+                            type="button">
                             <svg class="sun-icon" role="img" aria-hidden="true">
-  <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
-<svg class="moon-icon" role="img" aria-hidden="true">
-  <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
+                            <svg class="moon-icon" role="img" aria-hidden="true">
+                                <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
                         </button>
                         <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
                             aria-controls="primary-navigation" aria-expanded="false" type="button">
@@ -173,8 +174,8 @@
                         <div class="features-grid">
                             <article class="benefit-card" role="article">
                                 <svg class="icon-badge" role="img" aria-hidden="true">
-  <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <h3>Maximum Speeds</h3>
                                 <p>Bypass host throttling with direct links</p>
                             </article>
@@ -211,9 +212,9 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                           <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                            <svg class="alert-icon" role="img" aria-hidden="true">
+                                <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
                             <div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator,
                                 Mega, or Uptobox.</div>
                         </div>
@@ -242,8 +243,8 @@
 
                             <div class="alert alert-info" role="alert">
                                 <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div><strong>Important:</strong> Pricing can change frequently. Always verify current
                                     pricing on official websites before purchasing.</div>
                             </div>
@@ -301,17 +302,17 @@
                         <div class="search-section">
                             <form class="search-container" role="search" aria-label="Search file hosts"
                                 onsubmit="return false">
-                               <svg class="search-icon" role="img" aria-hidden="true">
-  <use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <svg class="search-icon" role="img" aria-hidden="true">
+                                    <use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <input type="search" id="host-search-input" class="search-input"
                                     placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
                                     aria-label="Search file hosts" autocomplete="off" />
                                 <button id="clear-host-search" class="clear-icon" aria-label="Clear search"
                                     type="button">
                                     <svg class="clear-icon-svg" role="img" aria-hidden="true">
-  <use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                        <use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
+                                    </svg>
                                 </button>
                             </form>
                         </div>
@@ -465,8 +466,8 @@
 
                             <div class="alert alert-info" role="alert">
                                 <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
 
                                 <div>These tests are best‑case scenarios from the provider's own network.</div>
                             </div>
@@ -554,8 +555,8 @@
 
                         <div class="alert alert-info" role="alert">
                             <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
                             <div><strong>💡 Tip:</strong> Bookmark these pages to verify if a failed link is due to a
                                 temporary host outage rather than a service limitation.</div>
                         </div>
@@ -579,8 +580,8 @@
                         <div class="important-notes-grid">
                             <div class="note-card">
                                 <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
 
                                 <div class="note-content">
                                     <h3>Services change frequently</h3>
@@ -591,8 +592,8 @@
                             </div>
                             <div class="note-card">
                                 <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div class="note-content">
                                     <h3>Final cost may vary</h3>
                                     <p>Displayed prices are subject to exchange rates, regional taxes, or payment
@@ -601,8 +602,8 @@
                             </div>
                             <div class="note-card">
                                 <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div class="note-content">
                                     <h3>Data accuracy</h3>
                                     <p>While we strive for completeness, this comparison reflects community reports and
@@ -612,8 +613,8 @@
                             </div>
                             <div class="note-card">
                                 <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div class="note-content">
                                     <h3>No affiliation</h3>
                                     <p>This project is independent and <strong>not affiliated</strong> with any listed
@@ -622,8 +623,8 @@
                             </div>
                             <div class="note-card">
                                 <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                    <use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div class="note-content">
                                     <h3>Use at your own discretion</h3>
                                     <p>Choosing a debrid service involves personal judgment. Test short-term plans first
@@ -631,9 +632,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                               <svg class="note-icon" role="img" aria-hidden="true">
-  <use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+                                    <use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
                                 <div class="note-content">
                                     <h3>Legal responsibility</h3>
                                     <p>Debrid services are tools. You are responsible for complying with copyright laws
@@ -644,8 +645,8 @@
 
                         <div class="alert alert-warning" role="alert">
                             <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
                             <div><strong>This is an open-source, community-maintained guide. It does not endorse or
                                     promote unauthorized file sharing.</strong></div>
                         </div>
@@ -667,13 +668,13 @@
                             <div class="resource-category elevated">
                                 <h3>
                                     <svg class="resource-category-icon" role="img" aria-hidden="true">
-  <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                        <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
+                                    </svg>
                                     Tools and Integrations
                                 </h3>
                                 <div class="resource-list cards-3">
-                                    <a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item accent-hover"
-                                        target="_blank" rel="noopener noreferrer">
+                                    <a href="https://github.com/debridmediamanager/awesome-debrid"
+                                        class="resource-item accent-hover" target="_blank" rel="noopener noreferrer">
                                         <strong>Awesome-Debrid</strong>
                                         <span>Curated list of debrid-compatible apps, browser extensions, and automation
                                             tools</span>
@@ -689,13 +690,13 @@
                                         <span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
                                             Premiumize TorBox or DebridLink</span>
                                     </a>
-                                    <a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover" target="_blank"
-                                        rel="noopener noreferrer">
+                                    <a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover"
+                                        target="_blank" rel="noopener noreferrer">
                                         <strong>Comet</strong>
                                         <span>Stremio's torrent/debrid search add-on</span>
                                     </a>
-                                    <a href="https://github.com/jackett/jackett" class="resource-item accent-hover" target="_blank"
-                                        rel="noopener noreferrer">
+                                    <a href="https://github.com/jackett/jackett" class="resource-item accent-hover"
+                                        target="_blank" rel="noopener noreferrer">
                                         <strong>Jackett + Prowlarr</strong>
                                         <span>Indexer proxies that work seamlessly with debrid services for
                                             automation</span>
@@ -705,8 +706,8 @@
                             <div class="resource-category elevated">
                                 <h3>
                                     <svg class="resource-category-icon" role="img" aria-hidden="true">
-  <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                        <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
+                                    </svg>
                                     Community and Support
                                 </h3>
                                 <div class="resource-list cards-3">
@@ -731,11 +732,12 @@
 
                         <div class="alert alert-info" role="alert">
                             <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
+                                <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+                            </svg>
                             <div><strong>💡 Pro Tip:</strong> Combine your debrid service with automation tools like
                                 <strong>Debrid Media Manager (DMM)</strong> or <strong>Overseerr</strong> for a seamless
-                                media experience.</div>
+                                media experience.
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -1073,103 +1075,105 @@
         });
     </script>
 
-            <!-- Noscript warning for core interactive features -->
-        <noscript>
-            <div class="alert alert-warning"
-                style="margin: 20px; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1000;">
-                <svg class="alert-icon" role="img" aria-hidden="true">
-  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
-</svg>
-                <div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
-            </div>
-        </noscript>
-<!-- SVG Symbol Sprite (Reusable Icons) -->
-<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
-  <!-- Logo Icon -->
-  <symbol id="icon-logo" viewBox="0 0 24 24" aria-label="Logo">
-    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-  </symbol>
+    <!-- Noscript warning for core interactive features -->
+    <noscript>
+        <div class="alert alert-warning"
+            style="margin: 20px; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1000;">
+            <svg class="alert-icon" role="img" aria-hidden="true">
+                <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+            <div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
+        </div>
+    </noscript>
+    <!-- SVG Symbol Sprite (Reusable Icons) -->
+    <svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+        <!-- Logo Icon -->
+        <symbol id="icon-logo" viewBox="0 0 24 24" aria-label="Logo">
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+        </symbol>
 
-  <!-- Sun Icon (Light Mode) -->
-  <symbol id="icon-sun" viewBox="0 0 24 24" aria-label="Sun">
-    <circle cx="12" cy="12" r="5" />
-    <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2m20 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-  </symbol>
+        <!-- Sun Icon (Light Mode) -->
+        <symbol id="icon-sun" viewBox="0 0 24 24" aria-label="Sun">
+            <circle cx="12" cy="12" r="5" />
+            <path
+                d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2m20 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+        </symbol>
 
-  <!-- Moon Icon (Dark Mode) -->
-  <symbol id="icon-moon" viewBox="0 0 24 24" aria-label="Moon">
-    <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
-  </symbol>
+        <!-- Moon Icon (Dark Mode) -->
+        <symbol id="icon-moon" viewBox="0 0 24 24" aria-label="Moon">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
+        </symbol>
 
-  <!-- Search Icon -->
-  <symbol id="icon-search" viewBox="0 0 24 24" aria-label="Search">
-    <circle cx="11" cy="11" r="8" />
-    <path d="M21 21l-4.35-4.35" />
-  </symbol>
+        <!-- Search Icon -->
+        <symbol id="icon-search" viewBox="0 0 24 24" aria-label="Search">
+            <circle cx="11" cy="11" r="8" />
+            <path d="M21 21l-4.35-4.35" />
+        </symbol>
 
-  <!-- Close/Clear Icon -->
-  <symbol id="icon-close" viewBox="0 0 24 24" aria-label="Close">
-    <line x1="18" y1="6" x2="6" y2="18" />
-    <line x1="6" y1="6" x2="18" y2="18" />
-  </symbol>
+        <!-- Close/Clear Icon -->
+        <symbol id="icon-close" viewBox="0 0 24 24" aria-label="Close">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+        </symbol>
 
-  <!-- Alert Info Icon -->
-  <symbol id="icon-alert" viewBox="0 0 24 24" aria-label="Alert">
-    <circle cx="12" cy="12" r="10" />
-    <path d="M12 16v-4M12 8h.01" />
-  </symbol>
+        <!-- Alert Info Icon -->
+        <symbol id="icon-alert" viewBox="0 0 24 24" aria-label="Alert">
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+        </symbol>
 
-  <!-- Warning Icon -->
-  <symbol id="icon-warning" viewBox="0 0 24 24" aria-label="Warning">
-    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-    <line x1="12" y1="9" x2="12" y2="13" />
-    <line x1="12" y1="17" x2="12.01" y2="17" />
-  </symbol>
+        <!-- Warning Icon -->
+        <symbol id="icon-warning" viewBox="0 0 24 24" aria-label="Warning">
+            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+        </symbol>
 
-  <!-- Check Icon (Used in empty state, notes) -->
-  <symbol id="icon-check" viewBox="0 0 24 24" aria-label="Check">
-    <path d="M9 12l2 2 4-4" />
-    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7" />
-    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6" />
-  </symbol>
+        <!-- Check Icon (Used in empty state, notes) -->
+        <symbol id="icon-check" viewBox="0 0 24 24" aria-label="Check">
+            <path d="M9 12l2 2 4-4" />
+            <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7" />
+            <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6" />
+        </symbol>
 
-  <!-- Lock Icon -->
-  <symbol id="icon-lock" viewBox="0 0 24 24" aria-label="Lock">
-    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-  </symbol>
+        <!-- Lock Icon -->
+        <symbol id="icon-lock" viewBox="0 0 24 24" aria-label="Lock">
+            <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+        </symbol>
 
-  <!-- Tools/Settings Icon -->
-  <symbol id="icon-tools" viewBox="0 0 24 24" aria-label="Tools">
-    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-  </symbol>
+        <!-- Tools/Settings Icon -->
+        <symbol id="icon-tools" viewBox="0 0 24 24" aria-label="Tools">
+            <path
+                d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+        </symbol>
 
-  <!-- User/Community Icon -->
-  <symbol id="icon-user" viewBox="0 0 24 24" aria-label="User">
-    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-    <circle cx="9" cy="7" r="4" />
-    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-  </symbol>
+        <!-- User/Community Icon -->
+        <symbol id="icon-user" viewBox="0 0 24 24" aria-label="User">
+            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+            <circle cx="9" cy="7" r="4" />
+            <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+        </symbol>
 
-  <!-- Note/Info Icon -->
-  <symbol id="icon-note" viewBox="0 0 24 24" aria-label="Note">
-    <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-  </symbol>
+        <!-- Note/Info Icon -->
+        <symbol id="icon-note" viewBox="0 0 24 24" aria-label="Note">
+            <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+        </symbol>
 
-  <!-- Money/Finance Icon -->
-  <symbol id="icon-money" viewBox="0 0 24 24" aria-label="Money">
-    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-  </symbol>
+        <!-- Money/Finance Icon -->
+        <symbol id="icon-money" viewBox="0 0 24 24" aria-label="Money">
+            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+        </symbol>
 
-  <!-- Document Icon -->
-  <symbol id="icon-document" viewBox="0 0 24 24" aria-label="Document">
-    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-    <polyline points="14,2 14,8 20,8" />
-    <line x1="16" y1="13" x2="8" y2="13" />
-    <line x1="16" y1="17" x2="8" y2="17" />
-  </symbol>
+        <!-- Document Icon -->
+        <symbol id="icon-document" viewBox="0 0 24 24" aria-label="Document">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14,2 14,8 20,8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+        </symbol>
 
-</svg>
+    </svg>
 
 </body>