Add segmented control to switch between name and location search

Replace the confusing combined search interface with a clear toggle
between "Find by Name" and "Find by Location" modes. Each mode shows
only its relevant controls, and switching modes clears the other
mode's state to prevent confusion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/styles.css

@@ -198,6 +198,62 @@ body {
     margin: 2rem auto 3rem;
 }
 
+/* Search Mode Toggle */
+.search-mode-toggle {
+    display: flex;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 1.5rem;
+    background: var(--bg-card);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 4px;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.search-mode-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.search-mode-btn:hover {
+    color: var(--text-primary);
+}
+
+.search-mode-btn.active {
+    background: var(--accent-coral);
+    color: white;
+    box-shadow: 0 2px 8px rgba(224, 114, 86, 0.3);
+}
+
+.search-mode-btn svg {
+    flex-shrink: 0;
+}
+
+/* Search Panels */
+.search-panel {
+    display: none;
+}
+
+.search-panel.active {
+    display: block;
+}
+
 .search-container {
     position: relative;
     margin-bottom: 1rem;
@@ -258,11 +314,8 @@ body {
 }
 
 /* Location Search */
-.location-search {
-    margin-bottom: 1rem;
-}
-
 .location-input-group {
+    margin-bottom: 1rem;
     display: flex;
     gap: 0.75rem;
     align-items: center;