feat: add custom advanced query mode

src/app/App.tsx

@@ -22,6 +22,7 @@ import type {
   SearchChoice,
   SearchState,
 } from '../features/search/types';
+import { SelectField, type SelectOptionGroup } from '../shared/ui/SelectField';
 
 const DEFAULT_BBOX: BBox = {
   south: 52.191,
@@ -48,9 +49,12 @@ const namedAreas = [
 const radiusOptions = [50, 100, 250, 500, 1000];
 const customChoice = 'custom';
 const noNearbyChoice = 'none';
+const customRadiusChoice = 'custom-radius';
 
 type RequestStatus = 'idle' | 'loading' | 'success' | 'error';
 type NearbyChoice = typeof noNearbyChoice | typeof customChoice | string;
+type RadiusChoice = string;
+type QueryMode = 'generated' | 'custom';
 
 export function App() {
   const [category, setCategory] = useState(searchPresetCategories[0]);
@@ -64,12 +68,15 @@ export function App() {
   const [nearbyChoice, setNearbyChoice] = useState<NearbyChoice>(noNearbyChoice);
   const [nearbyCustomKey, setNearbyCustomKey] = useState('');
   const [nearbyCustomValue, setNearbyCustomValue] = useState('');
+  const [radiusChoice, setRadiusChoice] = useState<RadiusChoice>('100');
   const [nearbyRadius, setNearbyRadius] = useState(100);
   const [areaMode, setAreaMode] = useState<SearchArea['mode']>('bbox');
   const [bbox, setBBox] = useState<BBox>(DEFAULT_BBOX);
   const [namedArea, setNamedArea] = useState(namedAreas[0]);
   const [results, setResults] = useState<ParsedOsmResult[]>([]);
   const [selectedResultId, setSelectedResultId] = useState<string | null>(null);
+  const [queryMode, setQueryMode] = useState<QueryMode>('generated');
+  const [customQuery, setCustomQuery] = useState('');
   const [status, setStatus] = useState<RequestStatus>('idle');
   const [message, setMessage] = useState<string | null>(null);
   const activeQueryRef = useRef<string | null>(null);
@@ -87,6 +94,36 @@ export function App() {
 
   const commonFilters = selectedPreset?.commonFilters ?? [];
 
+  const nearbyOptionGroups = useMemo<SelectOptionGroup[]>(() => {
+    const suggestedPresetIds = selectedPreset?.usefulNearbyPresetIds ?? [];
+    const suggestedOptions = suggestedPresetIds.map((presetId) => {
+      const preset = getPresetById(presetId);
+
+      return {
+        value: preset.id,
+        label: preset.label,
+      };
+    });
+
+    return [
+      ...(suggestedOptions.length > 0
+        ? [
+            {
+              label: 'Suggested for this search',
+              options: suggestedOptions,
+            },
+          ]
+        : []),
+      ...searchPresetCategories.map((item) => ({
+        label: item,
+        options: getPresetsByCategory(item).map((preset) => ({
+          value: preset.id,
+          label: preset.label,
+        })),
+      })),
+    ];
+  }, [selectedPreset]);
+
   useEffect(() => {
     setSelectedFilterIds([]);
     setExtraFilters([]);
@@ -136,7 +173,7 @@ export function App() {
     nearbyRadius,
   ]);
 
-  const queryPreview = useMemo(() => {
+  const generatedQuery = useMemo(() => {
     try {
       return {
         query: buildOverpassQuery(searchState),
@@ -150,34 +187,44 @@ export function App() {
     }
   }, [searchState]);
 
+  const activeQuery =
+    queryMode === 'custom' ? customQuery.trim() : generatedQuery.query;
+  const activeQueryError =
+    queryMode === 'custom'
+      ? customQuery.trim()
+        ? null
+        : 'Enter a custom Overpass QL query.'
+      : generatedQuery.error;
+  const shouldBlockLargeBBox = queryMode === 'generated' && areaMode === 'bbox';
+
   const canSearch =
     status !== 'loading' &&
-    Boolean(queryPreview.query) &&
-    !(areaMode === 'bbox' && isBBoxTooLarge(bbox));
+    Boolean(activeQuery) &&
+    !(shouldBlockLargeBBox && isBBoxTooLarge(bbox));
 
   async function handleSearch() {
-    if (!queryPreview.query) {
+    if (!activeQuery) {
       setStatus('error');
-      setMessage(queryPreview.error);
+      setMessage(activeQueryError);
       return;
     }
 
-    if (areaMode === 'bbox' && isBBoxTooLarge(bbox)) {
+    if (shouldBlockLargeBBox && isBBoxTooLarge(bbox)) {
       setStatus('error');
       setMessage('Zoom in before searching. The current viewport is too large.');
       return;
     }
 
-    if (status === 'loading' && activeQueryRef.current === queryPreview.query) {
+    if (status === 'loading' && activeQueryRef.current === activeQuery) {
       return;
     }
 
     setStatus('loading');
     setMessage(null);
-    activeQueryRef.current = queryPreview.query;
+    activeQueryRef.current = activeQuery;
 
     try {
-      const response = await fetchOverpass(queryPreview.query);
+      const response = await fetchOverpass(activeQuery);
       const parsedResults = parseOverpassResponse(response);
       setResults(parsedResults);
       setSelectedResultId(parsedResults[0]?.id ?? null);
@@ -232,6 +279,35 @@ export function App() {
     setExtraFilters((current) => current.filter((_, itemIndex) => itemIndex !== index));
   }
 
+  function handleClearNearby() {
+    setNearbyChoice(noNearbyChoice);
+    setNearbyCustomKey('');
+    setNearbyCustomValue('');
+  }
+
+  function handleRadiusChoiceChange(value: string) {
+    if (value === customRadiusChoice) {
+      setRadiusChoice(customRadiusChoice);
+      return;
+    }
+
+    const radius = Number(value);
+    setRadiusChoice(value);
+    setNearbyRadius(radius);
+  }
+
+  function handleCustomRadiusChange(value: string) {
+    const radius = Number(value);
+
+    if (Number.isFinite(radius)) {
+      setNearbyRadius(radius);
+    }
+  }
+
+  function handleRadiusStep(direction: 1 | -1) {
+    setNearbyRadius((current) => Math.max(1, current + direction));
+  }
+
   function handleClearResults() {
     setResults([]);
     setSelectedResultId(null);
@@ -240,16 +316,16 @@ export function App() {
   }
 
   async function handleCopyQuery() {
-    if (queryPreview.query) {
-      await navigator.clipboard.writeText(queryPreview.query);
+    if (activeQuery) {
+      await navigator.clipboard.writeText(activeQuery);
       setMessage('Query copied to clipboard.');
     }
   }
 
   function handleOpenOverpassTurbo() {
-    if (queryPreview.query) {
+    if (activeQuery) {
       window.open(
-        `https://overpass-turbo.eu/?Q=${encodeURIComponent(queryPreview.query)}`,
+        `https://overpass-turbo.eu/?Q=${encodeURIComponent(activeQuery)}`,
         '_blank',
         'noopener,noreferrer',
       );
@@ -271,35 +347,28 @@ export function App() {
             <h2 id="target-heading">Find</h2>
             <span>{searchPresets.length} presets</span>
           </div>
-          <div className="control-group">
-            <label htmlFor="category">Category</label>
-            <select
-              id="category"
-              value={category}
-              onChange={(event) => handleCategoryChange(event.target.value)}
-            >
-              {searchPresetCategories.map((item) => (
-                <option key={item} value={item}>
-                  {item}
-                </option>
-              ))}
-            </select>
-          </div>
+          <SelectField
+            id="category"
+            label="Category"
+            value={category}
+            options={searchPresetCategories.map((item) => ({ value: item, label: item }))}
+            onChange={handleCategoryChange}
+          />
 
           <div className="control-group">
-            <label htmlFor="preset">Object type</label>
-            <select
+            <SelectField
               id="preset"
+              label="Object type"
               value={choice}
-              onChange={(event) => setChoice(event.target.value as SearchChoice)}
-            >
-              {categoryPresets.map((preset) => (
-                <option key={preset.id} value={preset.id}>
-                  {preset.label}
-                </option>
-              ))}
-              <option value={customChoice}>Custom tag</option>
-            </select>
+              options={[
+                ...categoryPresets.map((preset) => ({
+                  value: preset.id,
+                  label: preset.label,
+                })),
+                { value: customChoice, label: 'Custom tag' },
+              ]}
+              onChange={(value) => setChoice(value as SearchChoice)}
+            />
             {selectedPreset ? <p className="field-note">{selectedPreset.description}</p> : null}
           </div>
 
@@ -327,9 +396,9 @@ export function App() {
           ) : null}
         </section>
 
-        <section className="search-section" aria-labelledby="refine-heading">
+        <section className="search-section" aria-labelledby="object-filters-heading">
           <div className="section-heading">
-            <h2 id="refine-heading">Refine</h2>
+            <h2 id="object-filters-heading">Object filters</h2>
           </div>
 
           {commonFilters.length > 0 ? (
@@ -390,47 +459,24 @@ export function App() {
         <section className="search-section" aria-labelledby="near-heading">
           <div className="section-heading">
             <h2 id="near-heading">Near</h2>
+            {nearbyChoice !== noNearbyChoice ? (
+              <button type="button" className="compact-button" onClick={handleClearNearby}>
+                Clear nearby
+              </button>
+            ) : null}
           </div>
 
-          {selectedPreset?.usefulNearbyPresetIds?.length ? (
-            <div className="suggestion-row" aria-label="Suggested nearby presets">
-              {selectedPreset.usefulNearbyPresetIds.slice(0, 5).map((presetId) => {
-                const preset = getPresetById(presetId);
-
-                return (
-                  <button
-                    key={preset.id}
-                    type="button"
-                    className={nearbyChoice === preset.id ? 'suggestion-active' : ''}
-                    onClick={() => setNearbyChoice(preset.id)}
-                  >
-                    {preset.label}
-                  </button>
-                );
-              })}
-            </div>
-          ) : null}
-
-          <div className="control-group">
-            <label htmlFor="nearby-preset">Nearby object</label>
-            <select
-              id="nearby-preset"
-              value={nearbyChoice}
-              onChange={(event) => setNearbyChoice(event.target.value)}
-            >
-              <option value={noNearbyChoice}>No nearby condition</option>
-              {searchPresetCategories.map((item) => (
-                <optgroup key={item} label={item}>
-                  {getPresetsByCategory(item).map((preset) => (
-                    <option key={preset.id} value={preset.id}>
-                      {preset.label}
-                    </option>
-                  ))}
-                </optgroup>
-              ))}
-              <option value={customChoice}>Custom nearby tag</option>
-            </select>
-          </div>
+          <SelectField
+            id="nearby-preset"
+            label="Nearby object"
+            value={nearbyChoice}
+            options={[
+              { value: noNearbyChoice, label: 'No nearby condition' },
+              { value: customChoice, label: 'Custom nearby tag' },
+            ]}
+            groups={nearbyOptionGroups}
+            onChange={setNearbyChoice}
+          />
 
           {nearbyChoice === customChoice ? (
             <div className="custom-fields">
@@ -456,19 +502,51 @@ export function App() {
           ) : null}
 
           <div className="control-group">
-            <label htmlFor="nearby-radius">Radius</label>
-            <select
-              id="nearby-radius"
-              value={nearbyRadius}
-              disabled={nearbyChoice === noNearbyChoice}
-              onChange={(event) => setNearbyRadius(Number(event.target.value))}
-            >
-              {radiusOptions.map((radius) => (
-                <option key={radius} value={radius}>
-                  {radius} meters
-                </option>
-              ))}
-            </select>
+            <div className="radius-controls">
+              <SelectField
+                id="nearby-radius"
+                label="Radius"
+                value={radiusChoice}
+                disabled={nearbyChoice === noNearbyChoice}
+                options={[
+                  ...radiusOptions.map((radius) => ({
+                    value: String(radius),
+                    label: `${radius} meters`,
+                  })),
+                  { value: customRadiusChoice, label: 'Custom' },
+                ]}
+                onChange={handleRadiusChoiceChange}
+              />
+              {radiusChoice === customRadiusChoice ? (
+                <div className="number-stepper">
+                  <input
+                    aria-label="Custom radius in meters"
+                    type="number"
+                    min="1"
+                    step="1"
+                    value={nearbyRadius}
+                    disabled={nearbyChoice === noNearbyChoice}
+                    onChange={(event) => handleCustomRadiusChange(event.target.value)}
+                  />
+                  <div className="stepper-buttons">
+                    <button
+                      type="button"
+                      className="stepper-button stepper-up"
+                      aria-label="Increase radius"
+                      disabled={nearbyChoice === noNearbyChoice}
+                      onClick={() => handleRadiusStep(1)}
+                    />
+                    <button
+                      type="button"
+                      className="stepper-button stepper-down"
+                      aria-label="Decrease radius"
+                      disabled={nearbyChoice === noNearbyChoice}
+                      onClick={() => handleRadiusStep(-1)}
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
           </div>
         </section>
 
@@ -495,20 +573,13 @@ export function App() {
         </fieldset>
 
         {areaMode === 'namedArea' ? (
-          <div className="control-group">
-            <label htmlFor="named-area">Named area</label>
-            <select
-              id="named-area"
-              value={namedArea}
-              onChange={(event) => setNamedArea(event.target.value)}
-            >
-              {namedAreas.map((area) => (
-                <option key={area} value={area}>
-                  {area}
-                </option>
-              ))}
-            </select>
-          </div>
+          <SelectField
+            id="named-area"
+            label="Named area"
+            value={namedArea}
+            options={namedAreas.map((area) => ({ value: area, label: area }))}
+            onChange={setNamedArea}
+          />
         ) : (
           <p className="viewport-note">
             Using the visible map viewport. Zoom in if the area is too large.
@@ -529,28 +600,63 @@ export function App() {
           </button>
         </div>
 
-        <section className="query-panel" aria-labelledby="query-heading">
+        <section className="query-panel query-panel-separated" aria-labelledby="query-heading">
           <div className="panel-heading">
-            <h2 id="query-heading">Query Preview</h2>
-            <div className="query-actions">
-              <button type="button" disabled={!queryPreview.query} onClick={handleCopyQuery}>
-                Copy query
-              </button>
-              <button
-                type="button"
-                disabled={!queryPreview.query}
-                onClick={handleOpenOverpassTurbo}
-              >
-                Open in Overpass Turbo
-              </button>
+            <div>
+              <h2 id="query-heading">Query Preview</h2>
+              <p className="field-note">Advanced output generated from the current search.</p>
             </div>
           </div>
-          <pre className="query-preview">
-            {queryPreview.query || queryPreview.error || 'Choose a preset to generate a query.'}
-          </pre>
+          <div className="query-actions">
+            <button type="button" disabled={!activeQuery} onClick={handleCopyQuery}>
+              Copy query
+            </button>
+            <button
+              type="button"
+              disabled={!activeQuery}
+              onClick={handleOpenOverpassTurbo}
+            >
+              Open in Overpass Turbo
+            </button>
+          </div>
+          <div className="query-mode-control" aria-label="Query mode">
+            <label>
+              <input
+                type="radio"
+                checked={queryMode === 'generated'}
+                onChange={() => setQueryMode('generated')}
+              />
+              Generated
+            </label>
+            <label>
+              <input
+                type="radio"
+                checked={queryMode === 'custom'}
+                onChange={() => setQueryMode('custom')}
+              />
+              Custom query
+            </label>
+          </div>
+          {queryMode === 'custom' ? (
+            <textarea
+              className="custom-query-input"
+              aria-label="Custom Overpass QL query"
+              value={customQuery}
+              onChange={(event) => setCustomQuery(event.target.value)}
+              placeholder={
+                '[out:json][timeout:25];\nnode["amenity"="bench"](52.191000,20.941000,52.268000,21.079000);\nout center 100;'
+              }
+            />
+          ) : (
+            <pre className="query-preview">
+              {generatedQuery.query ||
+                generatedQuery.error ||
+                'Choose a preset to generate a query.'}
+            </pre>
+          )}
         </section>
 
-        {areaMode === 'bbox' && isBBoxTooLarge(bbox) ? (
+        {shouldBlockLargeBBox && isBBoxTooLarge(bbox) ? (
           <p className="message error-message">
             The current viewport is too large for a responsible Overpass request.
           </p>

src/shared/ui/SelectField.tsx

@@ -0,0 +1,144 @@
+import { useEffect, useId, useRef, useState } from 'react';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+
+export type SelectOptionGroup = {
+  label: string;
+  options: SelectOption[];
+};
+
+type SelectFieldProps = {
+  id?: string;
+  label: string;
+  value: string;
+  options: SelectOption[];
+  groups?: SelectOptionGroup[];
+  disabled?: boolean;
+  onChange: (value: string) => void;
+};
+
+export function SelectField({
+  id,
+  label,
+  value,
+  options,
+  groups = [],
+  disabled = false,
+  onChange,
+}: SelectFieldProps) {
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  const [isOpen, setIsOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const selectedOption = findOption(value, options, groups);
+
+  useEffect(() => {
+    function handlePointerDown(event: PointerEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  function handleSelect(nextValue: string) {
+    onChange(nextValue);
+    setIsOpen(false);
+  }
+
+  return (
+    <div className="select-field" ref={rootRef}>
+      <label id={`${fieldId}-label`} htmlFor={fieldId}>
+        {label}
+      </label>
+      <button
+        id={fieldId}
+        type="button"
+        className="select-trigger"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-labelledby={`${fieldId}-label ${fieldId}`}
+        disabled={disabled}
+        onClick={() => setIsOpen((current) => !current)}
+      >
+        <span>{selectedOption?.label ?? 'Choose an option'}</span>
+        <span className="select-chevron" aria-hidden="true" />
+      </button>
+      {isOpen ? (
+        <div className="select-menu" role="listbox" aria-labelledby={`${fieldId}-label`}>
+          {options.map((option) => (
+            <SelectItem
+              key={option.value}
+              option={option}
+              isSelected={option.value === value}
+              onSelect={handleSelect}
+            />
+          ))}
+          {groups.map((group) => (
+            <div className="select-group" key={group.label}>
+              <div className="select-group-label">{group.label}</div>
+              {group.options.map((option) => (
+                <SelectItem
+                  key={`${group.label}-${option.value}`}
+                  option={option}
+                  isSelected={option.value === value}
+                  onSelect={handleSelect}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function SelectItem({
+  option,
+  isSelected,
+  onSelect,
+}: {
+  option: SelectOption;
+  isSelected: boolean;
+  onSelect: (value: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={isSelected ? 'select-option select-option-selected' : 'select-option'}
+      role="option"
+      aria-selected={isSelected}
+      onClick={() => onSelect(option.value)}
+    >
+      <span>{option.label}</span>
+      {isSelected ? <span className="select-check" aria-hidden="true" /> : null}
+    </button>
+  );
+}
+
+function findOption(
+  value: string,
+  options: SelectOption[],
+  groups: SelectOptionGroup[],
+): SelectOption | undefined {
+  return (
+    options.find((option) => option.value === value) ??
+    groups.flatMap((group) => group.options).find((option) => option.value === value)
+  );
+}

src/styles.css

@@ -21,23 +21,36 @@ body {
 
 button,
 input,
+textarea,
 select {
   font: inherit;
 }
 
 button {
-  border: 1px solid #b8c2b5;
-  border-radius: 6px;
-  background: #ffffff;
+  border: 1px solid #acb8ad;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f4f7f3);
   color: #17211c;
   cursor: pointer;
   min-height: 38px;
   padding: 0.55rem 0.8rem;
+  box-shadow: 0 1px 1px rgb(23 33 28 / 6%);
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    transform 120ms ease;
 }
 
 button:hover:not(:disabled) {
-  border-color: #5d7f86;
-  background: #f4f8f7;
+  border-color: #6b8c86;
+  background: linear-gradient(#ffffff, #eef6f3);
+  box-shadow: 0 2px 7px rgb(23 33 28 / 10%);
+}
+
+button:active:not(:disabled) {
+  transform: translateY(1px);
+  box-shadow: 0 1px 2px rgb(23 33 28 / 8%);
 }
 
 button:disabled {
@@ -46,14 +59,59 @@ button:disabled {
 }
 
 input,
+textarea,
 select {
   width: 100%;
-  border: 1px solid #b8c2b5;
-  border-radius: 6px;
+  border: 1px solid #acb8ad;
+  border-radius: 7px;
   background: #ffffff;
   color: #17211c;
   min-height: 38px;
   padding: 0.5rem 0.65rem;
+  box-shadow:
+    inset 0 1px 1px rgb(23 33 28 / 4%),
+    0 1px 0 rgb(255 255 255 / 80%);
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    background 120ms ease;
+}
+
+input:hover:not(:disabled),
+textarea:hover:not(:disabled),
+select:hover:not(:disabled) {
+  border-color: #7f9588;
+  background: #fcfdfb;
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+button:focus-visible {
+  outline: none;
+  border-color: #226a5d;
+  box-shadow:
+    0 0 0 3px rgb(34 106 93 / 16%),
+    inset 0 1px 1px rgb(23 33 28 / 4%);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled {
+  cursor: not-allowed;
+  background: #eff2ee;
+  color: #8a958d;
+}
+
+input[type="number"] {
+  padding-right: 2rem;
+  appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  margin: 0;
+  opacity: 0;
 }
 
 label,
@@ -74,12 +132,14 @@ a {
 }
 
 .control-panel {
+  --panel-padding: 1rem;
+
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-right: 1px solid #cdd5c9;
   background: #fafbf8;
-  padding: 1rem;
+  padding: var(--panel-padding);
   overflow-y: auto;
 }
 
@@ -107,6 +167,132 @@ a {
   padding: 0;
 }
 
+.select-field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.42rem;
+  min-width: 0;
+}
+
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 40px;
+  border-color: #a9b7ae;
+  background:
+    linear-gradient(180deg, #ffffff 0%, #f6f8f5 100%);
+  padding: 0.5rem 0.65rem 0.5rem 0.75rem;
+  text-align: left;
+}
+
+.select-trigger span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-trigger[aria-expanded="true"] {
+  border-color: #226a5d;
+  background: #ffffff;
+  box-shadow:
+    0 0 0 3px rgb(34 106 93 / 16%),
+    0 8px 24px rgb(23 33 28 / 10%);
+}
+
+.select-chevron {
+  width: 0.56rem;
+  height: 0.56rem;
+  border-right: 2px solid #52635a;
+  border-bottom: 2px solid #52635a;
+  transform: translateY(-2px) rotate(45deg);
+  flex: 0 0 auto;
+}
+
+.select-trigger[aria-expanded="true"] .select-chevron {
+  transform: translateY(2px) rotate(225deg);
+}
+
+.select-menu {
+  position: absolute;
+  z-index: 1100;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  right: 0;
+  display: grid;
+  gap: 0.18rem;
+  max-height: min(320px, 55vh);
+  overflow: auto;
+  border: 1px solid #9db0a6;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 0.35rem;
+  box-shadow:
+    0 18px 38px rgb(23 33 28 / 18%),
+    0 2px 8px rgb(23 33 28 / 10%);
+}
+
+.select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 34px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  padding: 0.42rem 0.55rem;
+  text-align: left;
+  box-shadow: none;
+}
+
+.select-option:hover,
+.select-option:focus-visible {
+  background: #eef6f3;
+  box-shadow: none;
+}
+
+.select-option-selected {
+  background: #dcece7;
+  color: #174d44;
+  font-weight: 720;
+}
+
+.select-check {
+  width: 0.42rem;
+  height: 0.72rem;
+  border-right: 2px solid #226a5d;
+  border-bottom: 2px solid #226a5d;
+  transform: rotate(45deg);
+  flex: 0 0 auto;
+}
+
+.select-group {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.select-group + .select-group,
+.select-option + .select-group {
+  margin-top: 0.25rem;
+  border-top: 1px solid #e1e6df;
+  padding-top: 0.3rem;
+}
+
+.select-group-label {
+  color: #66726a;
+  padding: 0.35rem 0.55rem 0.15rem;
+  font-size: 0.74rem;
+  font-weight: 760;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
 .search-section {
   display: grid;
   gap: 0.75rem;
@@ -134,6 +320,27 @@ a {
   line-height: 1.35;
 }
 
+.compact-button {
+  min-height: 30px;
+  border-color: #c3d0c7;
+  border-radius: 6px;
+  background: linear-gradient(#ffffff, #f3f7f4);
+  color: #29433b;
+  padding: 0.32rem 0.58rem;
+  font-size: 0.78rem;
+  font-weight: 720;
+  box-shadow:
+    0 1px 2px rgb(23 33 28 / 6%),
+    inset 0 1px 0 rgb(255 255 255 / 70%);
+}
+
+.compact-button:hover:not(:disabled) {
+  border-color: #7f9588;
+  background: linear-gradient(#ffffff, #e9f3ef);
+  color: #174d44;
+  box-shadow: 0 2px 6px rgb(23 33 28 / 9%);
+}
+
 .field-note {
   margin: 0;
 }
@@ -144,6 +351,76 @@ a {
   gap: 0.75rem;
 }
 
+.radius-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.55fr);
+  gap: 0.5rem;
+  align-items: end;
+}
+
+.number-stepper {
+  position: relative;
+}
+
+.number-stepper input {
+  min-height: 40px;
+}
+
+.stepper-buttons {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  bottom: 4px;
+  display: grid;
+  width: 1.35rem;
+  overflow: hidden;
+  border-left: 1px solid #d5ded7;
+  border-radius: 0 5px 5px 0;
+  background: #f2f6f3;
+}
+
+.stepper-button {
+  position: relative;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  box-shadow: none;
+}
+
+.stepper-button:hover:not(:disabled) {
+  border: 0;
+  background: #e4eee8;
+  box-shadow: none;
+}
+
+.stepper-button:focus-visible {
+  border: 0;
+  box-shadow: inset 0 0 0 2px rgb(34 106 93 / 28%);
+}
+
+.stepper-button::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform: translateX(-50%);
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+
+.stepper-up::before {
+  top: 7px;
+  border-bottom: 5px solid #52635a;
+}
+
+.stepper-down::before {
+  bottom: 7px;
+  border-top: 5px solid #52635a;
+}
+
 .checkbox-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -154,17 +431,68 @@ a {
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  border: 1px solid #d7ded5;
-  border-radius: 6px;
-  background: #ffffff;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
   min-height: 36px;
   padding: 0.42rem 0.55rem;
   font-weight: 560;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    background 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.checkbox-grid label:hover {
+  border-color: #7f9588;
+  background: #f3f9f6;
 }
 
 .checkbox-grid input {
-  width: auto;
-  min-height: auto;
+  position: relative;
+  flex: 0 0 1rem;
+  width: 1rem !important;
+  min-width: 1rem;
+  max-width: 1rem;
+  height: 1rem;
+  min-height: 1rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 4px;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+  box-shadow: inset 0 1px 1px rgb(23 33 28 / 8%);
+}
+
+.checkbox-grid input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 46%;
+  width: 0.28rem;
+  height: 0.52rem;
+  border-right: 2px solid #ffffff;
+  border-bottom: 2px solid #ffffff;
+  transform: translate(-50%, -50%) rotate(45deg) scale(0);
+  transform-origin: center;
+  transition: transform 120ms ease;
+}
+
+.checkbox-grid input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.checkbox-grid input:checked::before {
+  transform: translate(-50%, -50%) rotate(45deg) scale(1);
+}
+
+.checkbox-grid label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
 }
 
 .active-filter-list {
@@ -200,24 +528,6 @@ a {
   font-size: 0.8rem;
 }
 
-.suggestion-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-}
-
-.suggestion-row button {
-  min-height: 32px;
-  padding: 0.35rem 0.55rem;
-  font-size: 0.82rem;
-}
-
-.suggestion-active {
-  border-color: #226a5d;
-  background: #e8f3ef;
-  color: #174d44;
-}
-
 .segmented-control {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -228,17 +538,67 @@ a {
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  border: 1px solid #b8c2b5;
-  border-radius: 6px;
-  background: #ffffff;
-  min-height: 38px;
-  padding: 0.45rem 0.55rem;
-  font-weight: 560;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
+  min-height: 40px;
+  padding: 0.45rem 0.6rem;
+  font-weight: 620;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    background 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.segmented-control label:hover {
+  border-color: #7f9588;
+  background: #f3f9f6;
 }
 
 .segmented-control input {
-  width: auto;
-  min-height: auto;
+  position: relative;
+  flex: 0 0 1.05rem;
+  width: 1.05rem !important;
+  min-width: 1.05rem;
+  max-width: 1.05rem;
+  height: 1.05rem;
+  min-height: 1.05rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 50%;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+  box-shadow: inset 0 1px 1px rgb(23 33 28 / 8%);
+}
+
+.segmented-control input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 120ms ease;
+}
+
+.segmented-control input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.segmented-control input:checked::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.segmented-control label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
 }
 
 .viewport-note {
@@ -257,14 +617,17 @@ a {
 
 .primary-button {
   border-color: #226a5d;
-  background: #226a5d;
+  background: linear-gradient(180deg, #2b7a6c 0%, #226a5d 100%);
   color: #ffffff;
   font-weight: 700;
+  box-shadow:
+    0 2px 7px rgb(34 106 93 / 22%),
+    inset 0 1px 0 rgb(255 255 255 / 16%);
 }
 
 .primary-button:hover:not(:disabled) {
   border-color: #174d44;
-  background: #174d44;
+  background: linear-gradient(180deg, #2b7368 0%, #174d44 100%);
 }
 
 .query-panel,
@@ -274,6 +637,106 @@ a {
   min-height: 0;
 }
 
+.query-panel-separated {
+  position: relative;
+  gap: 0.65rem;
+  border-top: 1px solid #dbe3dc;
+  background:
+    linear-gradient(180deg, rgb(238 246 242 / 62%) 0%, rgb(250 251 248 / 0%) 100%);
+  margin: 0.15rem calc(var(--panel-padding) * -1) 0;
+  padding: 1rem var(--panel-padding) 0;
+}
+
+.query-panel-separated::before {
+  content: "Advanced";
+  position: absolute;
+  top: -0.62rem;
+  left: var(--panel-padding);
+  background: #fafbf8;
+  color: #6b7770;
+  padding-right: 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 760;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.query-actions {
+  border: 1px solid #d7ded5;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 0.45rem;
+}
+
+.query-actions button {
+  min-height: 34px;
+  padding: 0.42rem 0.64rem;
+  font-size: 0.82rem;
+}
+
+.query-mode-control {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.45rem;
+}
+
+.query-mode-control label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 34px;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
+  padding: 0.42rem 0.55rem;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.query-mode-control input {
+  position: relative;
+  flex: 0 0 0.95rem;
+  width: 0.95rem !important;
+  min-width: 0.95rem;
+  max-width: 0.95rem;
+  height: 0.95rem;
+  min-height: 0.95rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 50%;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+}
+
+.query-mode-control input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.44rem;
+  height: 0.44rem;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 120ms ease;
+}
+
+.query-mode-control input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.query-mode-control input:checked::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.query-mode-control label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
+}
+
 .panel-heading {
   display: flex;
   align-items: center;
@@ -309,6 +772,22 @@ a {
   word-break: break-word;
 }
 
+.custom-query-input {
+  min-height: 190px;
+  resize: vertical;
+  background: #16201d;
+  color: #eaf4ef;
+  padding: 0.75rem;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.custom-query-input::placeholder {
+  color: #91a39a;
+}
+
 .message {
   margin: 0;
   border-left: 3px solid #2e7a70;
@@ -342,6 +821,52 @@ a {
   height: 100%;
 }
 
+.map-view .leaflet-control-zoom {
+  overflow: hidden;
+  border: 1px solid #a7b6ad;
+  border-radius: 8px;
+  box-shadow:
+    0 10px 24px rgb(23 33 28 / 14%),
+    0 2px 6px rgb(23 33 28 / 10%);
+}
+
+.map-view .leaflet-control-zoom a {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-bottom: 1px solid #d5ded7;
+  background: linear-gradient(#ffffff, #f3f7f4);
+  color: #29433b;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-size: 1.25rem;
+  font-weight: 760;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    background 120ms ease,
+    color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.map-view .leaflet-control-zoom a:last-child {
+  border-bottom: 0;
+}
+
+.map-view .leaflet-control-zoom a:hover,
+.map-view .leaflet-control-zoom a:focus-visible {
+  background: linear-gradient(#ffffff, #e6f1ed);
+  color: #174d44;
+  box-shadow: inset 0 0 0 2px rgb(34 106 93 / 14%);
+}
+
+.map-view .leaflet-control-zoom a.leaflet-disabled {
+  background: #eef2ee;
+  color: #99a59d;
+  cursor: not-allowed;
+}
+
 .result-marker {
   display: grid;
   place-items: center;
@@ -454,12 +979,16 @@ a {
 @media (max-width: 560px) {
   .control-panel,
   .results-panel {
-    padding: 0.8rem;
+    --panel-padding: 0.8rem;
+
+    padding: var(--panel-padding);
   }
 
   .custom-fields,
+  .radius-controls,
   .segmented-control,
-  .checkbox-grid {
+  .checkbox-grid,
+  .query-mode-control {
     grid-template-columns: 1fr;
   }