:root {
  color: #1f2937;
  background: #d1d5db;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}

* { box-sizing: border-box; }

body { min-width: 320px; min-height: 100vh; margin: 0; }

button, input, select { font: inherit; }

a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

.app-layout { display: flex; width: 100%; height: 100vh; overflow: hidden; background: #d1d5db; }

.sidebar {
  z-index: 400;
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  gap: 0;
  height: calc(100vh - 32px);
  overflow-y: auto;
  margin: 16px;
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 16px -8px #11182730;
}

.sidebar-section { padding: 8px; background: #f3f4f6; border-bottom: 1px solid #9ca3af; }
.sidebar-section h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: .01em; }
.settings h2 { margin: 0 0 8px; }
.settings label { display: block; margin: 7px 0 4px; color: #374151; font-size: 13px; font-weight: 650; }

input, select {
  min-width: 0;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid #9ca3af;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #111827;
  font-size: 14px;
}

input:focus, select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb25; }
.settings input { width: 100%; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: -8px -8px 4px; padding: 8px; background: #fff; }
.search-row { display: flex; gap: 6px; }
.search-row input { flex: 1; }
.search-row select { width: 70px; padding-right: 4px; }
.coordinates { display: flex; gap: 6px; margin-top: 4px; }
.coordinates input { width: 0; flex: 1; }
.find-button { min-width: 64px; padding: 0 10px; border: 1px solid #9ca3af; border-radius: 6px; background: #fff; color: #374151; cursor: pointer; font-size: 14px; }
.find-button:hover { border-color: #2563eb; color: #1d4ed8; }

.results { display: grid; gap: 3px; max-height: 230px; overflow-y: auto; margin: 7px -5px 0; padding: 0; list-style: none; }
.result { min-width: 0; margin: 0; padding: 0; }
.city-result { display: block; width: 100%; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #1f2937; cursor: pointer; text-align: left; }
.city-result:hover, .city-result:focus-visible { outline: none; background: #2563eb; color: white; }
.city-result strong { font-size: 13px; font-weight: 650; }
.country { margin-left: 5px; color: #6b7280; font-size: 12px; }
.city-result:hover .country, .city-result:focus-visible .country { color: #dbeafe; }
.details { display: block; margin-top: 2px; color: #6b7280; font-size: 11px; line-height: 1.4; }
.city-result:hover .details, .city-result:focus-visible .details { color: #eff6ff; }
.hint, .error { margin: 7px 0 2px; color: #6b7280; font-size: 12px; line-height: 1.45; }
.error { color: #b91c1c; }

.city-section { border-bottom: 0; }
.city-details { display: grid; gap: 5px; margin: 8px 0 0; font-size: 12px; }
.city-details div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 7px; }
.city-details dt { color: #6b7280; }
.city-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-weight: 550; }

.sidebar-footer { display: grid; gap: 4px; margin-top: auto; padding: 8px; font-size: 13px; }
.sidebar-footer strong { margin-right: 4px; }
.sidebar-footer span { margin: 0 4px; color: #9ca3af; }

.map-panel { position: relative; min-width: 0; flex: 1; height: 100vh; }
#map { width: 100%; height: 100%; background: #e5e7eb; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 10px !important; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 1280px) {
  .sidebar { flex-basis: 25%; }
}

@media (max-width: 1023px) {
  .app-layout { height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { width: calc(100% - 32px); max-width: 600px; height: auto; min-height: calc(100vh - 32px); flex-basis: auto; margin: 16px auto; }
  .map-panel { display: none; }
}