Extend line range to antipode (20k km), increase city limit to 100, and fix info panel layout

frontend/src/styles/App.css

@@ -3,6 +3,7 @@
   height: 100vh;
   width: 100vw;
   overflow: hidden;
+  position: relative;
 }
 
 .map-container {
@@ -19,6 +20,7 @@
   box-shadow: -2px 0 10px rgba(0,0,0,0.1);
   overflow-y: auto;
   z-index: 2;
+  position: relative;
 }
 
 .control-group {
@@ -62,6 +64,7 @@
 .setting-row span {
   font-weight: bold;
   color: #2c3e50;
+  min-width: 40px;
 }
 
 .setting-row button {
@@ -112,7 +115,14 @@
   margin-top: 0;
   color: #2c3e50;
   font-size: 16px;
-  margin-bottom: 15px;
+  margin-bottom: 5px;
+}
+
+.results-panel .hint {
+  font-size: 11px;
+  color: #7f8c8d;
+  margin-bottom: 10px;
+  font-style: italic;
 }
 
 .results-panel table {
@@ -124,21 +134,114 @@
 .results-panel th {
   background: #34495e;
   color: white;
-  padding: 10px;
+  padding: 8px 4px;
   text-align: left;
 }
 
 .results-panel td {
-  padding: 8px;
+  padding: 8px 4px;
   border-bottom: 1px solid #ddd;
+  cursor: pointer;
 }
 
 .results-panel tr:nth-child(even) {
-  background: #f8f9fa;
+  background: #fdfdfd;
 }
 
 .results-panel tr:hover {
-  background: #e9ecef;
+  background: #ecf0f1;
+}
+
+.results-panel tr.selected-row {
+  background: #d5e8d4 !important;
+  font-weight: bold;
+}
+
+.info-panel-modal {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  width: 280px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+  z-index: 1000;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.info-panel-content {
+  padding: 20px;
+  position: relative;
+}
+
+.info-panel-content h2 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 18px;
+  color: #2c3e50;
+  border-bottom: 2px solid #4CAF50;
+  padding-bottom: 8px;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #95a5a6;
+}
+
+.close-btn:hover {
+  color: #34495e;
+}
+
+.info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.info-item label {
+  font-size: 11px;
+  color: #7f8c8d;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.info-item span {
+  font-size: 14px;
+  color: #2c3e50;
+  font-weight: 500;
+}
+
+.action-btn-small {
+  width: 100%;
+  padding: 8px;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.action-btn-small:hover {
+  background: #2980b9;
 }
 
 .more-info {
@@ -177,6 +280,23 @@
   flex-direction: column;
   align-items: center;
   font-family: sans-serif;
+  z-index: 100;
+}
+
+.marker-number {
+  background: #2c3e50;
+  color: white;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: bold;
+  margin-bottom: -4px;
+  border: 1px solid white;
+  z-index: 2;
 }
 
 .marker-dot {
@@ -186,6 +306,7 @@
   border: 2px solid white;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  z-index: 1;
 }
 
 .marker-label {
@@ -223,4 +344,12 @@
   .map-container {
     height: 60vh;
   }
+
+  .info-panel-modal {
+    left: 10px;
+    right: 10px;
+    width: auto;
+    bottom: 20px;
+    top: auto;
+  }
 }