fix(style): isolate JSON Snap styles with scoped container

src/content.js

@@ -61,7 +61,6 @@ function createCollapsibleJSON(container, json, depth = 0, maxOpenDepth = 0) {
     return;
   }
 
-  const isArray = Array.isArray(json);
   const wrapper = document.createElement('div');
   wrapper.style.marginLeft = '1em';
 
@@ -133,8 +132,11 @@ function formatPageJSON() {
     try {
       const jsonObj = JSON.parse(raw);
       pre.textContent = '';
+
       const container = document.createElement('div');
+      container.id = 'json-snap-container';
       pre.appendChild(container);
+
       createCollapsibleJSON(container, jsonObj, 0, 0); // All nodes collapsed
     } catch {
       pre.textContent = formatJSON(raw); // fallback

src/styles/theme.css

@@ -1,50 +1,50 @@
-/* Background & text */
-body {
-  background-color: #1e1e2f;      /* Soft dark blue background */
-  color: #c8c8ff;                 /* Light blue text for good contrast */
+/* Main container scope */
+#json-snap-container {
+  background-color: #1e1e2f;
+  color: #c8c8ff;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
   margin: 1em;
 }
 
 /* Containers (each tree node) */
-div {
+#json-snap-container div {
   user-select: text;
-  color: #c8c8ff; /* Ensure all text inside div inherits this color */
+  color: #c8c8ff;
 }
 
 /* Buttons and toggles */
-button {
+#json-snap-container button {
   font-weight: bold;
   background-color: transparent;
   border: none;
-  color: #ff79c6;            /* Bright pink for toggle buttons */
+  color: #ff79c6;
   cursor: pointer;
   transition: color 0.3s ease;
 }
 
-button:hover {
-  color: #50fa7b;            /* Neon green on hover */
+#json-snap-container button:hover {
+  color: #50fa7b;
 }
 
 /* Labels and values */
-span {
-  color: #f8f8f2;            /* Off-white color for labels/values */
+#json-snap-container span {
+  color: #f8f8f2;
 }
 
 /* Vertical tree line */
-div > div {
-  border-left: 2px solid #6272a4; /* Visible vertical line, bluish purple */
+#json-snap-container div > div {
+  border-left: 2px solid #6272a4;
   padding-left: 0.5em;
   margin-bottom: 0.2em;
 }
 
 /* Differentiate keys and values */
-span:first-child {
+#json-snap-container span:first-child {
   font-weight: 700;
-  color: #8be9fd;   /* Light cyan for keys */
+  color: #8be9fd;
 }
 
-span:last-child {
-  color: #f1fa8c;   /* Light yellow for values */
+#json-snap-container span:last-child {
+  color: #f1fa8c;
 }