style: Clean up CSS by removing unused styles and organizing global reset

src/App.css

@@ -1,42 +1,30 @@
-#root {
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
-    max-width: 1280px;
+
-    margin: 0 auto;
+:root {
-    padding: 2rem;
+  --bg-color: #050505;
-    text-align: center;
+  --text-main: #ffffff;
+  --text-muted: #888888;
+  --card-bg: rgba(255, 255, 255, 0.03);
+  --border-color: rgba(255, 255, 255, 0.08);
+  --accent: #00F0FF;
 }
 
-.map {
+[data-theme='light'] {
-    position: absolute;
+  --bg-color: #F4F4F5;
-    top: 0;
+  --text-main: #18181B;
-    bottom: 25px;
+  --text-muted: #52525B;
-    left: 0;
+  --card-bg: rgba(255, 255, 255, 0.6);
-    width: 100%;
+  --border-color: rgba(0, 0, 0, 0.08);
+  --accent: #0070F3;
 }
 
-.coordinates-container {
+body {
-    position: absolute;
+  background-color: var(--bg-color);
-    bottom: -2px;
+  color: var(--text-main);
+  transition: background-color 0.5s ease, color 0.5s ease;
 }
 
-.ol-popup{
+/* Hide Scrollbar for cleaner look */
-  position: absolute;
+::-webkit-scrollbar { width: 6px; }
-  background-color: white;
+::-webkit-scrollbar-track { background: transparent; }
-  padding: 5px;
+::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.4); border-radius: 4px; }
-  border-radius: 5px;
-  border: 1px solid black;
-  transform: translate(-50%, -100%);
-  pointer-events: none;
-  width: 220px;
-  color: black;
-};
-
-.input {
-  margin-bottom: 30px;
-  padding: 5px 15px;
-  width: 300px;
-}
-
-.btn {
-  padding: 5px 10px;
-  cursor: pointer;
-}

src/index.css

@@ -1,68 +1,24 @@
-:root {
+/* IMPORTANT: Global Reset */
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+* {
-  line-height: 1.5;
+  margin: 0;
-  font-weight: 400;
+  padding: 0;
+  box-sizing: border-box;
+}
 
-  color-scheme: light dark;
+html, body {
-  color: rgba(255, 255, 255, 0.87);
+  width: 100%;
-  background-color: #242424;
+  min-height: 100vh;
-
+  overflow-x: hidden; /* Prevents horizontal scrollbars */
-  font-synthesis: none;
+  background-color: #030303; /* Match your theme.bg color so any loading gaps are black */
-  text-rendering: optimizeLegibility;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
+/* Ensure the React root div also takes full width */
-  font-weight: 500;
+#root {
-  color: #646cff;
+  width: 100%;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
-}
+}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}