Harden RC9 UX and performance states

frontend/src/styles/app.css

@@ -7347,6 +7347,133 @@ section {
 .workspace-persistent-map[hidden] {
   display: none;
 }
+
+#workspace-main:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.geo-bootstrap-status {
+  display: flex;
+  gap: 0.7rem;
+  align-items: center;
+  min-height: 3.25rem;
+  border: 1px solid #b9d2ca;
+  border-radius: 6px;
+  padding: 0.65rem 0.8rem;
+  background: #f1f8f6;
+  color: #24453d;
+}
+
+.geo-bootstrap-status > div {
+  display: grid;
+  gap: 0.15rem;
+}
+
+.geo-bootstrap-status strong {
+  font-size: 0.8rem;
+}
+
+.geo-bootstrap-status small {
+  color: #5b6e68;
+  font-size: 0.7rem;
+}
+
+.geo-bootstrap-status-error {
+  border-color: #d6aaa0;
+  background: #fff6f3;
+  color: #7a2f21;
+}
+
+.geo-loading-indicator {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 1rem;
+  border: 2px solid #a7c8bf;
+  border-top-color: #176a5c;
+  border-radius: 50%;
+  animation: geo-loading-spin 0.8s linear infinite;
+}
+
+@keyframes geo-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.geo-performance-status {
+  margin: 0;
+  border-left: 3px solid #79a89c;
+  padding: 0.45rem 0.55rem;
+  background: #f5f9f8;
+  color: #4d625c;
+  font-size: 0.68rem;
+  line-height: 1.4;
+}
+
+.geo-performance-status-warning {
+  border-left-color: #b36b1e;
+  background: #fff8ec;
+  color: #78450f;
+}
+
+.geo-theme-option strong,
+.geo-theme-option small {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .geo-loading-indicator {
+    animation: none;
+    border-top-color: #a7c8bf;
+    background: #176a5c;
+  }
+}
+
+@media (min-width: 2400px) {
+  .geo-explorer-layout {
+    grid-template-columns: minmax(19rem, 21rem) minmax(46rem, 1fr) minmax(23rem, 25rem);
+    height: clamp(42rem, calc(100dvh - 11rem), 70rem);
+  }
+
+  .geo-theme-panel,
+  .geo-results-panel {
+    padding: 0.9rem;
+  }
+
+  .geo-map-canvas .map-container {
+    min-height: 42rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .geo-explorer {
+    gap: 0.55rem;
+  }
+
+  .geo-explorer-header,
+  .geo-theme-panel,
+  .geo-results-panel {
+    padding-inline: 0.65rem;
+  }
+
+  .geo-theme-list {
+    grid-template-columns: 1fr;
+  }
+
+  .geo-map-actions {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+
+  .geo-map-actions button {
+    min-height: 2.75rem;
+  }
+}
+
 .coverage-resolution-surface {
   padding: 18px 20px;
   border-block: 1px solid var(--line);