:root {
  --ink: #17312b;
  --muted: #35473f;
  --forest: #174c3f;
  --forest-2: #236b58;
  --cream: #f6f3ea;
  --paper: #fffdf8;
  --line: #dfe5df;
  --accent: #e4572e;
  --accent-2: #f2a541;
  --height: var(--forest-2);
  --veil: rgba(255, 253, 248, 0.75);
  --shadow: 0 20px 25px -5px rgba(18, 49, 42, 0.15), 0 10px 10px -5px rgba(18, 49, 42, 0.08);
  --sh-1: 0 4px 6px -1px rgba(18, 49, 42, 0.08), 0 2px 4px -1px rgba(18, 49, 42, 0.04);
  --sh-2: 0 10px 15px -3px rgba(18, 49, 42, 0.12), 0 4px 6px -2px rgba(18, 49, 42, 0.06);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --panel-width: clamp(312px, 25vw, 352px);
}

:root.dark-mode {
  --ink: #f0f4f2;
  --muted: #a3b8af;
  --forest: #51c4a5;
  --forest-2: #349c80;
  --cream: #14221d;
  --paper: #0c1814;
  --line: #223c34;
  --accent: #ff6e45;
  --accent-2: #ffbc57;
  --height: var(--forest);
  --veil: rgba(16, 28, 24, 0.75);
  --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
  --sh-1: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --sh-2: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  transition: background 0.24s, color 0.24s;
}
button, select, input { font: inherit; }
button, label, select, input[type="range"], input[type="search"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid rgba(228, 87, 46, .28);
  outline-offset: 2px;
}
:root.dark-mode button:focus-visible, :root.dark-mode select:focus-visible, :root.dark-mode input:focus-visible {
  outline-color: rgba(255, 110, 69, .4);
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#map {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #dce6df;
  transition: background 0.24s;
}
:root.dark-mode #map { background: #16241f; }
:root.dark-mode .osm-tiles { filter: brightness(0.85); }

#panel {
  position: fixed;
  inset: 12px auto 12px 12px;
  z-index: 1000;
  width: var(--panel-width);
  background: rgba(255, 253, 248, 0.85);
  border: 1px solid rgba(23, 76, 63, 0.12);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background 0.24s, border-color 0.24s;
}
:root.dark-mode #panel {
  background: rgba(16, 28, 24, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}

#panelScroll {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 24px;
  scrollbar-width: thin;
  scrollbar-color: #aebcb6 transparent;
}
:root.dark-mode #panelScroll { scrollbar-color: #3a5249 transparent; }
#panelToggle { display: none; }
.clear-map-btn {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 6px 10px;
  background: var(--cream); color: var(--muted);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  box-shadow: var(--sh-1);
  font-size: 12px; font-weight: 600;
  transition: transform 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.clear-map-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(228, 87, 46, 0.06); }
.clear-map-btn:active { transform: scale(0.97); }
.clear-map-btn.hidden { display: none; }
.clear-map-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.clear-map-label { line-height: 1; }
:root.dark-mode .clear-map-btn { background: rgba(255, 255, 255, 0.05); color: var(--muted); border-color: rgba(255, 255, 255, 0.1); }
:root.dark-mode .clear-map-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(228, 87, 46, 0.12); }

.brand { display: flex; gap: 12px; align-items: center; }
.brand-copy { min-width: 0; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px;
  color: #fff; background: var(--forest); border-radius: 13px;
  box-shadow: 0 8px 20px rgba(23, 76, 63, .22);
}
:root.dark-mode .brand-mark { box-shadow: 0 8px 20px rgba(0, 0, 0, .4); background: #1f5e4b; }
.brand-mark svg { width: 30px; height: 30px; fill: currentColor; }
.brand-mark .snow { fill: var(--accent-2); }
h1 {
  margin: 0;
  color: var(--forest);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.08;
  white-space: normal;
}
.tagline {
  margin: 4px 0 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root.dark-mode h1 { color: #f5fbf7; }
:root.dark-mode .tagline { color: #ffbc57; }
.lead { display: none; margin: 10px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.panel-omni-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 38px; margin: -2px 0 12px; padding: 8px 11px;
  color: var(--forest); background: rgba(255, 253, 248, .92);
  border: 1px solid rgba(23, 76, 63, .18); border-radius: 11px;
  font: inherit; font-size: 12.5px; font-weight: 800; text-align: left;
  box-shadow: var(--sh-1); cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.panel-omni-btn svg {
  flex: 0 0 17px; width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.panel-omni-btn:hover { border-color: var(--forest); background: var(--cream); }
.panel-omni-btn:active { transform: scale(.985); }
:root.dark-mode .panel-omni-btn { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); }
.has-result .panel-omni-btn { display: none; }

.mode-picker {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px;
  position: relative;
  margin: 0 0 10px; padding: 0; border: 0;
}
/* Ukryte radia: zrodlo prawdy dla setMode/deep-link (UI steruje nimi programowo). */
.mode-picker .sr-only-radio {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* --- Split-button „Zaznacz obszar” (model QGIS) --- */
.draw-split { display: flex; min-width: 0; }
.draw-primary {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 8px 10px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0;
  cursor: pointer; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.draw-caret {
  flex: 0 0 26px; width: 26px; position: relative;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 5px 5px 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 0 var(--r-md) var(--r-md) 0; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.draw-primary-icon { flex: 0 0 22px; display: flex; }
.draw-primary-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--forest-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.draw-primary-label {
  /* Zawijanie po spacji (np. „Zaznacz / prostokątem") zamiast ucinania wielokropkiem.
     Ciasny line-height + clamp do 2 wierszy mieszczą napis w obecnej wysokości buttona. */
  min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 12px; font-weight: 700; line-height: 1.05;
}
/* Trojkacik QGIS w prawym dolnym narozniku. */
.draw-caret-tri {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--forest-2);
}
.draw-split:hover .draw-primary, .draw-split:hover .draw-caret { border-color: var(--forest-2); }
.draw-primary:hover, .draw-caret:hover { background: var(--cream); }
.draw-primary:active { transform: scale(0.98); }
:root.dark-mode .draw-primary, :root.dark-mode .draw-caret { background: rgba(255,255,255,0.03); }

/* Stan aktywny (zielony) — geometria rysowania jest wlaczona. */
.draw-split.is-active .draw-primary, .draw-split.is-active .draw-caret {
  background: var(--forest); border-color: var(--forest); color: #fff;
  box-shadow: 0 7px 18px rgba(23,76,63,.22);
}
.draw-split.is-active .draw-primary-icon svg { stroke: #fff; }
.draw-split.is-active .draw-caret-tri { border-top-color: #fff; }

/* --- Przycisk "Regiony" (osobny paradygmat: wybor gotowej jednostki) --- */
.cat-mode-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 0; min-height: 46px; padding: 6px 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cat-mode-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--forest-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cat-mode-btn span { font-size: 11px; font-weight: 700; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cat-mode-btn:hover { transform: translateY(-2px); border-color: var(--forest-2); box-shadow: var(--sh-1); }
.cat-mode-btn:active { transform: scale(0.97); }
.cat-mode-btn.is-active { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: 0 7px 18px rgba(23,76,63,.18); }
.cat-mode-btn.is-active svg { stroke: #fff; }
:root.dark-mode .cat-mode-btn { background: rgba(255,255,255,0.03); }

/* --- Flyout z trybami zaznaczania --- */
.draw-flyout {
  position: absolute; top: 50px; left: 0; z-index: 30; grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 2px;
  width: max-content; min-width: 200px;
  padding: 5px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(23,76,63,.20);
}
.draw-flyout.hidden { display: none; }
:root.dark-mode .draw-flyout { background: #14211c; border-color: rgba(255,255,255,0.1); }
.draw-geom-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; color: var(--ink);
  font-size: 12.5px; font-weight: 600; text-align: left;
}
.draw-geom-item svg { flex: 0 0 19px; width: 19px; height: 19px; fill: none; stroke: var(--forest-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.draw-geom-item:hover { background: var(--cream); }
.draw-geom-item.is-current { background: rgba(23,76,63,.1); color: var(--forest); }
.draw-geom-item.is-current svg { stroke: var(--forest); }
:root.dark-mode .draw-geom-item:hover { background: rgba(255,255,255,0.05); }
:root.dark-mode .draw-geom-item.is-current { background: rgba(255,255,255,0.08); color: #cfeede; }

.non-tiled-wms-image {
  transition: filter .12s ease;
  will-change: transform;
}
.non-tiled-wms-image.non-tiled-wms-loading {
  filter: saturate(.92);
}

/* Animacja zachety na split-buttonie: delikatny puls obramowania przyciagajacy uwage */
@keyframes tileAttract {
 0%, 100% { box-shadow: 0 0 0 0 rgba(23, 76, 63, 0); }
 50% { box-shadow: 0 0 0 4px rgba(23, 76, 63, .18); }
}
.draw-split.attract .draw-primary, .draw-split.attract .draw-caret {
 animation: tileAttract 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
 .draw-split.attract .draw-primary, .draw-split.attract .draw-caret { animation: none; }
}


.control-card {
  flex: 0 0 auto;
  margin-top: 0; padding: 12px 0;
  background: transparent; border: 0; border-top: 1px solid rgba(23, 76, 63, 0.11); border-radius: 0;
}
:root.dark-mode .control-card { background: transparent; border-top-color: rgba(255,255,255,0.08); }
.panel-accordion {
  flex: 0 0 auto;
  margin-top: 2px;
  border: 0;
  border-top: 1px solid rgba(23, 76, 63, 0.13);
  border-radius: 0;
  background: transparent;
}
:root.dark-mode .panel-accordion { background: transparent; border-top-color: rgba(255,255,255,0.08); }
.panel-accordion summary {
  position: sticky;
  top: -22px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 0;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  background: rgba(255, 253, 248, .94);
  border-radius: 0;
}
:root.dark-mode .panel-accordion summary { background: rgba(16, 28, 24, .96); }
.panel-accordion summary::-webkit-details-marker { display: none; }
.panel-accordion summary b,
.panel-accordion summary small { display: block; }
.panel-accordion summary b { font-size: 12.5px; }
.panel-accordion summary small { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.accordion-chevron {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 89, 70, 0.1);
  color: var(--forest);
  border-radius: 50%;
  transition: transform .2s, background .2s, color .2s;
}
.accordion-chevron svg {
  width: 16px;
  height: 16px;
}
:root.dark-mode .accordion-chevron {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.panel-accordion summary:hover .accordion-chevron {
  background: var(--forest);
  color: #fff;
}
.panel-accordion[open] .accordion-chevron { transform: rotate(180deg); }
.panel-accordion-body {
  padding: 0 0 6px;
  animation: accordionIn .14s ease-out;
}
.panel-accordion:not([open]) {
  background: transparent;
}
@keyframes accordionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.inline-control, .control-grid {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.inline-control { color: var(--muted); font-size: 12.5px; }
.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.help-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,0.62);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}
.help-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root.dark-mode .help-dot { background: rgba(255,255,255,0.08); }

.help-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  width: 220px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}
:root.dark-mode .help-popover { background: #16241f; }

select, input[type="search"] {
  min-height: 34px; padding: 5px 30px 5px 9px; color: var(--ink); font-size: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
:root.dark-mode select, :root.dark-mode input[type="search"] { background: rgba(255,255,255,0.05); }
.wide-select, input[type="search"] { width: 100%; margin-top: 5px; }

.search-wrap { position: relative; margin-top: 10px; }
input[type="search"] { cursor: text; padding: 5px 9px; }
.search-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
  max-height: 200px; overflow-y: auto; margin: 4px 0 0; padding: 0;
  list-style: none; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
:root.dark-mode .search-list { background: #16241f; }
.search-list li {
  padding: 8px 10px; font-size: 11px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.search-list li:hover { background: var(--cream); }
:root.dark-mode .search-list li:hover { background: rgba(255,255,255,0.05); }
/* Etap 4c: pozycja wskazana klawiatura (strzalki) w omniboksie. */
.search-list li:has(> .omni-active) { background: var(--cream); }
:root.dark-mode .search-list li:has(> .omni-active) { background: rgba(255,255,255,0.06); }
.omni-active { box-shadow: inset 3px 0 0 var(--forest); }
.search-list li:last-child { border-bottom: 0; }
.peak-search-item {
  display: block;
  width: 100%;
  padding: 0;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.peak-search-name {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.peak-search-meta {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-list-note {
  color: var(--muted);
  cursor: default;
}
.search-list-note:hover { background: transparent; }
.search-peak-pin span {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  transform: rotate(-45deg);
}
.search-peak-pin span::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
.field-label {
  color: var(--muted); font-size: 12px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.control-grid { margin-top: 12px; }

.switch-row {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; cursor: pointer;
}
.switch-row b, .switch-row small { display: block; }
.switch-row b { font-size: 12px; }
.switch-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  position: relative; flex: 0 0 38px; width: 38px; height: 22px;
  background: #cbd5d0; border-radius: 20px; transition: background .18s;
}
:root.dark-mode .switch { background: #3a5249; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .18s;
}
.switch-row input:checked + .switch { background: var(--forest-2); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }

.primary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 40px; color: #fff; background: linear-gradient(135deg, var(--forest-2), var(--forest));
  border: 0; border-radius: 10px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(23, 76, 63, .22);
  transition: transform 0.1s, filter 0.15s, box-shadow 0.15s;
}
.primary-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 16px rgba(23, 76, 63, .28); }
.primary-btn:active { transform: scale(0.97); }
.primary-btn svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round;
}
.range-label { display: flex; justify-content: space-between; margin-top: 13px; font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.hint { min-height: 31px; margin: 11px 2px 7px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
/* W trybie prostokata stan niesie karta rect-state oraz podpis kafelka, wiec dolny hint bylby redundantny. */
.mode-rect #hint { display: none; }

.rect-control { padding: 11px 12px; }
.rect-state { display: flex; align-items: center; gap: 9px; }
.rect-state b, .rect-state small { display: block; }
.rect-state b { font-size: 12px; }
.rect-state small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.rect-state-icon {
  position: relative; flex: 0 0 24px; width: 24px; height: 24px;
  border: 2px dashed var(--accent); border-radius: 6px;
}
.rect-state-icon::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px;
  background: var(--accent); border: 2px solid var(--paper); border-radius: 50%;
}
.rect-control.is-complete .rect-state-icon {
  border-style: solid; border-color: var(--forest-2);
}
.rect-control.is-complete .rect-state-icon::after { background: var(--forest-2); }
.secondary-btn {
  width: 100%; min-height: 34px; margin-top: 10px; padding: 6px 10px;
  color: var(--forest); background: var(--cream); border: 1px solid var(--line);
  border-radius: 9px; font-size: 11px; font-weight: 800; cursor: pointer;
  transition: transform 0.1s;
}
:root.dark-mode .secondary-btn { background: rgba(255,255,255,0.05); }
.secondary-btn:hover { background: var(--line); }
.secondary-btn:active { transform: scale(0.97); }
.rect-control.is-armed .secondary-btn { color: var(--accent); background: rgba(228, 87, 46, 0.1); border-color: rgba(228, 87, 46, 0.3); }
/* Stan poczatkowy: mapa odblokowana, brak zaznaczenia -> "Zacznij zaznaczanie" jest glowna akcja, wiec wyrozniamy ja kolorem lesnym. */
.rect-control:not(.is-armed):not(.is-complete) .secondary-btn {
  color: #fff; background: var(--forest); border-color: var(--forest);
}
.rect-control:not(.is-armed):not(.is-complete) .secondary-btn:hover { background: var(--forest-2); }

.result {
  flex: 1 1 auto;
  position: relative; overflow: hidden; min-height: 78px; max-height: min(360px, 48vh); padding: 13px;
  background: var(--paper); border: 1px solid rgba(23, 76, 63, .12); border-radius: 15px;
  box-shadow: 0 9px 25px rgba(30, 59, 51, .08);
  transition: opacity .16s, transform .16s;
}
.result { overflow-y: auto; }

.has-result .lead { display: none; }
.has-result .brand { margin-bottom: 11px; }
.has-result #hint { display: none; }
.result-custom #result {
  min-height: 180px;
  max-height: min(430px, 62vh);
  padding: 15px;
  box-shadow: var(--sh-2);
}
.result-custom #settingsPanel:not([open]) + #result {
  min-height: min(430px, 62vh);
}
.result-custom #customCtrl {
  margin-top: 4px;
  padding: 8px 0;
}
.result-custom #rectCtrl,
.result-custom #radiusCtrl {
  padding-top: 10px;
  padding-bottom: 10px;
}

.mode-cat .lead { margin-top: 9px; margin-bottom: 12px; }
.mode-cat .mode-picker { margin-bottom: 6px; }
.mode-cat .control-card { margin-top: 6px; padding-top: 10px; padding-bottom: 10px; }
.mode-cat .switch-row { margin-top: 9px; }
.mode-cat .hint { min-height: 22px; margin-top: 7px; margin-bottom: 5px; }
.mode-cat #result { min-height: 88px; }
.result::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(var(--accent-2), var(--accent));
}
.result.is-loading { opacity: .84; }
.result.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent),
    linear-gradient(var(--paper), var(--paper));
  background-size: 80px 100%, 100% 100%;
  background-position: -90px 0, 0 0;
  animation: loadingSweep 1.05s ease-in-out infinite;
  pointer-events: none;
}
:root.dark-mode .result.is-loading::after {
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent),
    linear-gradient(var(--paper), var(--paper));
  background-size: 80px 100%, 100% 100%;
  background-position: -90px 0, 0 0;
}
@keyframes loadingSweep {
  to { background-position: calc(100% + 90px) 0, 0 0; }
}
.result-placeholder { display: flex; gap: 11px; align-items: center; }
.result-placeholder b, .result-placeholder small { display: block; }
.result-placeholder b { font-size: 13px; }
.result-placeholder small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.loading-lines { display: grid; gap: 5px; margin-top: 10px; }
.loading-lines i {
  display: block; height: 7px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(23,76,63,.08), rgba(15,111,140,.18), rgba(23,76,63,.08));
  background-size: 180% 100%; animation: shimmer 1s ease-in-out infinite;
}
.loading-lines i:nth-child(1) { width: 150px; }
.loading-lines i:nth-child(2) { width: 112px; animation-delay: .08s; }
.loading-lines i:nth-child(3) { width: 132px; animation-delay: .16s; }
@keyframes shimmer { 50% { background-position: 100% 0; } }
.placeholder-peak {
  flex: 0 0 36px; width: 36px; height: 36px; background: var(--line);
  clip-path: polygon(50% 5%, 66% 42%, 76% 29%, 100% 92%, 0 92%);
}
.winner-hero { 
  position: relative; 
  padding: 10px 12px 14px; 
  margin: 0 -8px 10px; 
  border-radius: 14px; 
  background: linear-gradient(135deg, rgba(234, 91, 46, 0.06) 0%, rgba(234, 91, 46, 0) 65%);
  animation: resultIn .18s ease-out; 
}
:root.dark-mode .winner-hero {
  background: linear-gradient(135deg, rgba(234, 91, 46, 0.12) 0%, rgba(234, 91, 46, 0) 65%);
}
.winner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.winner-kicker {
  color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.winner-height { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.winner-height strong {
  color: var(--height); font-weight: 800; font-size: 32px; line-height: 1;
}
.winner-height span { color: var(--muted); font-size: 11px; font-weight: 700; }
.winner-name { margin: 4px 0 2px; font-size: 18px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
.winner-place { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.result-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.show-on-map {
  flex: 0 0 auto; margin-top: 0; padding: 6px 9px; color: var(--forest); background: var(--cream);
  border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; font-weight: 800; cursor: pointer;
  transition: transform 0.1s;
}
:root.dark-mode .show-on-map { background: rgba(255,255,255,0.05); }
.show-on-map:active { transform: scale(0.96); }
.new-area-btn {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 6px 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--forest), var(--forest-2));
  border: 1px solid var(--forest);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(23, 76, 63, .2);
  transition: transform 0.1s, filter .15s, box-shadow .15s;
}
.new-area-btn:hover { filter: brightness(1.07); box-shadow: 0 5px 14px rgba(23, 76, 63, .26); }
.new-area-btn:active { transform: scale(0.96); }

.gpx-btn {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 6px 12px;
  color: var(--forest);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
:root.dark-mode .gpx-btn { background: rgba(255,255,255,0.05); }
.gpx-btn:hover { background: var(--line); }
.gpx-btn:active { transform: scale(0.96); }
.result-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.result-toolbar-title {
  min-width: 0; color: var(--muted); font-size: 11px; font-weight: 850;
  letter-spacing: .04em; text-transform: uppercase;
}
.result-share {
  position: relative; flex: 0 0 auto;
}
.result-share summary {
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 6px 10px;
  color: var(--forest); background: var(--cream);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 11.5px; font-weight: 850; cursor: pointer;
}
.result-share summary::-webkit-details-marker { display: none; }
.result-share summary::after { content: "▾"; font-size: 10px; line-height: 1; color: var(--muted); }
.result-share[open] summary::after { content: "▴"; }
.result-share-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 5;
  display: grid; gap: 5px; min-width: 132px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow);
}
.result-share-menu .gpx-btn {
  width: 100%; justify-content: flex-start; text-align: left; margin: 0;
}
:root.dark-mode .result-share summary { background: rgba(255,255,255,0.05); }
:root.dark-mode .result-share-menu { background: #16241f; border-color: rgba(255,255,255,.1); }

.clear-result-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 6px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
:root.dark-mode .clear-result-btn { background: rgba(255,255,255,0.05); }
.leaflet-bar a:hover, .leaflet-bar button:hover { background-color: #f4f4f4; color: var(--ink); }
.leaflet-bar button.is-tracking, .leaflet-bar a.is-tracking { color: #007aff; }
.clear-result-btn:hover { background: var(--line); }
.clear-result-btn:active { transform: scale(0.92); }
.clear-result-btn svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 2; fill: none; }

.ranklist { list-style: none; margin: 10px -4px -3px; padding: 0; border-top: 1px solid var(--line); }
.ranklist li { margin: 0; padding: 0; opacity: 0; animation: fadeUp 0.3s ease-out forwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.result-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  width: 100%; padding: 9px 4px; color: var(--ink); text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 0.15s, transform .12s;
}
.result-row:hover { background: var(--cream); }
.result-row:active { transform: scale(.985); }
:root.dark-mode .result-row:hover { background: rgba(255,255,255,0.03); }
/* Podświetlenie wiersza wyniku przy najechaniu na znacznik szczytu na mapie (mikrointegracja mapa→lista) */
.result-row.is-hovered { background: var(--cream); box-shadow: inset 3px 0 0 var(--accent); }
:root.dark-mode .result-row.is-hovered { background: rgba(255,255,255,0.05); box-shadow: inset 3px 0 0 var(--accent); }
.result-row .rk {
  display: grid; place-items: center; width: 20px; height: 20px; color: var(--paper);
  background: var(--accent-2); border-radius: 50%; font-size: 11.5px; font-weight: 800;
}
.result-main { min-width: 0; }
.result-row .nm { display: block; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.result-row .meta { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.result-side { text-align: right; }
.result-row .hh { display: block; color: var(--height); font-size: 12px; font-weight: 800; white-space: nowrap; }
.result-row .jump { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; }

/* Wyszukiwarka zewnętrzna */
.search-widget {
  position: absolute;
  top: 64px; /* Etap 3: POD paskiem przyciskow — otwarte pole nachodzilo na ikony paska */
  right: 12px;
  width: 300px;
  max-width: calc(100vw - 80px);
  z-index: 1100;
  background: var(--paper);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: opacity 0.2s, transform 0.2s;
  transform-origin: top right;
}
.search-widget.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  display: block; /* Przesłaniamy domyślne display:none z .hidden, by animacja transformacji zadziałała, ale opacity chowa wizualnie */
}
@media (min-width: 721px) and (max-width: 1024px) {
  .search-widget { right: 50px; width: min(320px, calc(100vw - 460px)); }
}
.search-widget .search-wrap {
  margin-top: 0;
  padding: 8px;
}
.search-widget input[type="search"] {
  width: 100%;
  margin-top: 0;
  border: 1px solid var(--line);
  box-sizing: border-box;
}
.search-list-group {
  padding: 7px 10px 4px;
  color: var(--muted);
  background: rgba(23, 76, 63, 0.04);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: default;
}
.search-list-group:hover { background: rgba(23, 76, 63, 0.04); }
:root.dark-mode .search-list-group { background: rgba(255,255,255,0.04); }
.omni-search-item {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 2px 7px;
}
.omni-search-item::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  grid-row: 1 / 3;
  align-self: center;
  background: var(--accent);
}
.omni-place::before { background: #236b58; }
.omni-unit::before { background: #3f7fbe; }
.omni-peak::before { background: #e4572e; }

.category-summary b { color: var(--accent); }
.category-summary strong { display: block; margin-bottom: 4px; font-size: 14px; }
.category-summary span { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.foot { margin: 12px 2px 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

#legend { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 10px; }
#legend .legend-title { flex: 0 0 100%; color: var(--muted); font-size: 11.5px; }
#legend .legend-item { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11.5px; }
#legend .swatch { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .13); }

.map-toolbar {
  position: fixed; top: 12px; right: 12px; z-index: 1050;
  display: flex; gap: 7px;
}
.map-toolbar button,
.layer-menu button,
.more-menu button {
  display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 11px;
  color: var(--ink); background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1); cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.1s, background 0.15s;
}
:root.dark-mode .map-toolbar button,
:root.dark-mode .layer-menu button,
:root.dark-mode .more-menu button { background: rgba(16, 28, 24, 0.88); border-color: rgba(255, 255, 255, 0.08); }
.map-toolbar button:active,
.layer-menu button:active,
.more-menu button:active { transform: scale(0.95); }
.map-toolbar button[aria-pressed="true"],
.map-toolbar button[aria-expanded="true"],
.layer-menu button[aria-pressed="true"],
.more-menu button[aria-pressed="true"] { color: #fff; background: var(--forest); }
:root.dark-mode .map-toolbar button[aria-pressed="true"],
:root.dark-mode .layer-menu button[aria-pressed="true"],
:root.dark-mode .more-menu button[aria-pressed="true"] { background: var(--forest); color: #0c1814; border-color: var(--forest); }
.map-toolbar svg,
.layer-menu svg,
.more-menu svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.map-toolbar span,
.layer-menu span,
.more-menu span { font-size: 11.5px; font-weight: 750; }
.layer-menu-wrap,
.preset-menu-wrap,
.more-menu-wrap { position: relative; }
.layer-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 850;
  display: grid; grid-template-columns: 1fr; gap: 6px;
  /* Szerokosc dopasowana do tresci (najdluzszy element). scrollbar-gutter rezerwuje miejsce
     na pasek przewijania, wiec gdy menu sie przewija (niskie okno), tekst nie jest sciskany. */
  width: max-content; min-width: 168px; max-width: 240px;
  scrollbar-gutter: stable;
  padding: 8px; background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* Gdy menu jest dluzsze niz miejsce pod przyciskiem (krotki ekran, orientacja
     pozioma, aktywny suwak przezroczystosci) -> przewijanie zamiast ucinania pozycji. */
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
:root.dark-mode .layer-menu { background: rgba(16, 28, 24, 0.92); border-color: rgba(255, 255, 255, 0.08); }

.more-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 870;
  display: grid; grid-template-columns: 1fr; gap: 6px;
  width: max-content; min-width: 188px; max-width: 240px;
  padding: 8px; background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.more-menu.hidden { display: none; }
:root.dark-mode .more-menu { background: rgba(16, 28, 24, 0.92); border-color: rgba(255, 255, 255, 0.08); }
.more-menu button {
  width: 100%; justify-content: flex-start; box-shadow: none;
  background: rgba(255,255,255,0.64); border-radius: 9px;
}
:root.dark-mode .more-menu button { background: rgba(255,255,255,0.04); }
.more-menu button:hover { border-color: var(--forest-2); background: var(--cream); }
:root.dark-mode .more-menu button:hover { background: rgba(255,255,255,0.08); }
.more-menu .lang-code {
  min-width: 28px;
  display: inline-flex;
  justify-content: center;
  font-weight: 850;
  letter-spacing: .04em;
}

.preset-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 860;
  display: grid; grid-template-columns: 1fr; gap: 6px;
  width: max-content; min-width: 164px; max-width: 220px;
  padding: 8px; background: rgba(255, 253, 248, 0.94);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.preset-menu.hidden { display: none; }
:root.dark-mode .preset-menu { background: rgba(16, 28, 24, 0.92); border-color: rgba(255, 255, 255, 0.08); }
.preset-menu .preset-menu-item {
  width: 100%; justify-content: flex-start; box-shadow: none;
  background: rgba(255,255,255,0.64); border-radius: 9px;
}
:root.dark-mode .preset-menu .preset-menu-item { background: rgba(255,255,255,0.04); }
.preset-menu .preset-menu-item:hover { border-color: var(--forest-2); background: var(--cream); }
:root.dark-mode .preset-menu .preset-menu-item:hover { background: rgba(255,255,255,0.08); }
.preset-menu .preset-menu-item.is-active {
  color: #fff; background: var(--forest); border-color: var(--forest);
}
:root.dark-mode .preset-menu .preset-menu-item.is-active {
  color: #0c1814; background: var(--forest-2); border-color: var(--forest-2);
}
.layer-menu button {
  justify-content: flex-start; width: 100%; box-shadow: none;
}
.layer-opacity-control {
  /* Lewy wciecie 14px zrownuje suwak z kafelkami warstw (uchwyt 8px + odstep 6px),
     dzieki czemu belka suwaka nie jest szersza od pozostalych elementow panelu. */
  padding: 8px 0 2px 14px; border-top: 1px solid var(--line); margin-top: 2px;
}
.layer-opacity-control.hidden { display: none; }
:root.dark-mode .layer-opacity-control { border-color: rgba(255, 255, 255, 0.08); }
.layer-opacity-label {
  display: block; margin: 0 0 5px; color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-opacity-control input[type=range] {
  width: 100%; margin: 0; cursor: pointer; accent-color: var(--forest);
}

/* Wiersz warstwy: uchwyt przeciagania + kafelek warstwy. */
.layer-row {
  display: flex; align-items: center; gap: 6px; position: relative; min-height: 38px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.layer-row[data-layer-key]::before {
  content: "";
  width: 8px; flex: 0 0 8px; align-self: stretch; margin: 6px 0; border-radius: 7px;
  color: var(--muted); opacity: 0.46; cursor: grab;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.6px);
  background-size: 4px 4px;
}
.layer-row[data-layer-key]:hover::before { color: var(--forest); opacity: 0.82; }
.layer-row[draggable="true"]:active::before { cursor: grabbing; }
.layer-row.is-dragging { opacity: 0.52; }
.layer-row.is-dragging .layer-menu-item { transform: none; }
.layer-row.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.layer-row.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.layer-row .layer-menu-item { flex: 1 1 auto; width: auto; min-width: 0; min-height: 38px; }
.layer-row .layer-menu-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root.dark-mode .layer-row[data-layer-key]:hover::before { color: var(--accent-2); }

/* Pkt 7 audytu: wyszarzony kafelek warstwy (np. „Rzeźba” przy małym zoomie). */
.layer-menu-item.layer-item-dim { opacity: 0.5; }
.layer-menu-item.layer-item-dim:hover { opacity: 0.7; }

.map-controls-right {
  position: fixed; right: 12px; bottom: 85px; z-index: 800;
  display: flex; flex-direction: column; gap: 10px;
}
.map-ctrl-group {
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
:root.dark-mode .map-ctrl-group {
  background: rgba(16, 28, 24, 0.88); border-color: rgba(255, 255, 255, 0.08);
}
.map-controls-right button {
  display: flex; align-items: center; justify-content: flex-start; gap: 7px;
  min-width: 34px; height: 34px; padding: 0 9px;
  color: var(--ink); background: transparent; border: 0; border-radius: 9px;
  cursor: pointer; transition: transform 0.1s, background 0.15s, color 0.15s;
}
.map-controls-right .zoom-group button {
  justify-content: center;
  width: 34px;
  padding: 0;
}
.map-controls-right button:hover { background: var(--cream); }
:root.dark-mode .map-controls-right button:hover { background: rgba(255, 255, 255, 0.08); }
.map-controls-right button:active { transform: scale(0.92); }
.map-controls-right svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.map-controls-right .ctrl-label {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.labgis-label {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ctrl-sep {
  width: 24px; height: 1px; margin: 3px auto; background: var(--line);
}
:root.dark-mode .ctrl-sep { background: rgba(255, 255, 255, 0.08); }


.map-status {
  position: fixed; top: 62px; left: calc(var(--panel-width) + 50%); z-index: 800;
  display: flex; align-items: center; gap: 8px; transform: translateX(-50%);
  padding: 8px 14px; color: #fff; background: rgba(23, 49, 43, .85);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.spinner {
  width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner ladowania na przycisku warstwy w menu (hipsometria - wolny WMS GUGiK). */
.layer-menu-item.is-loading { position: relative; }
.layer-menu-item.is-loading::after {
  content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(23, 76, 63, .25); border-top-color: var(--forest);
  animation: spin .75s linear infinite;
}
.layer-menu-item.is-loading[aria-pressed="true"]::after,
:root.dark-mode .layer-menu-item.is-loading::after {
  border-color: rgba(255, 255, 255, .4); border-top-color: #fff;
}
/* Spinner na przycisku "Obrazek" podczas generowania mozaiki mapy (proces bywa kilkusekundowy). */
.gpx-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.gpx-btn.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  margin: -7px 0 0 -7px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(23, 76, 63, .3); border-top-color: var(--forest);
  animation: spin .7s linear infinite;
}
:root.dark-mode .gpx-btn.is-loading::after { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }
/* Plywajacy chip "Laduje hipsometrie..." - widoczny takze przy zamknietym menu,
   np. gdy warstwa przeladowuje sie po przesunieciu mapy (jeden duzy GetMap, do ~10 s). */
.hypso-loading-chip {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 805;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px; color: #fff; background: rgba(23, 49, 43, .85);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.floating-legend {
  position: fixed; left: calc(var(--panel-width) + 24px); bottom: 24px; z-index: 805;
  min-width: 220px; max-width: min(360px, calc(100vw - var(--panel-width) - 52px));
  padding: 11px 12px; color: var(--ink); background: var(--veil);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: floatIn .18s ease-out;
}
.floating-legend .legend-title { margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.floating-legend .legend-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.floating-legend .legend-chip { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.2; }
.floating-legend .swatch { height: 8px; border-radius: 99px; border: 1px solid rgba(0,0,0,.12); }
.floating-legend .legend-close {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  display: grid; place-items: center; background: transparent; border: 0;
  color: var(--muted); cursor: pointer; border-radius: 4px; transition: background 0.15s;
}
.floating-legend .legend-close:hover { background: var(--cream); }
:root.dark-mode .floating-legend .legend-close:hover { background: rgba(255,255,255,0.08); }
.floating-legend .legend-close svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.mobile-draw-guide,
.mobile-mode-pill {
  display: none;
}

.mobile-result-bar {
  position: fixed; left: 10px; right: 10px; bottom: calc(min(50vh, 440px) + 18px + env(safe-area-inset-bottom, 0px)); bottom: calc(min(50dvh, 440px) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 815;
  display: none; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px; color: #fff; background: rgba(23, 49, 43, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-align: left;
}
:root.dark-mode .mobile-result-bar { background: rgba(16, 28, 24, 0.95); }
.mobile-result-rank {
  display: grid; place-items: center; width: 32px; height: 32px; color: #142d27;
  background: #f2a541; border-radius: 50%; font-size: 12px; font-weight: 800;
}
.mobile-result-main { display: grid; line-height: 1.25; }
.mobile-result-main b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-result-main small { color: rgba(255, 255, 255, 0.7); font-size: 11.5px; margin-top: 1px; }
#mobileResultHeight { font-size: 15px; font-weight: 800; color: #f2a541; }

.mobile-result-carousel {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(106px + env(safe-area-inset-bottom, 0px));
  z-index: 816;
  display: none;
  gap: 10px;
  overflow-x: auto;
  padding: 0 10px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mobile-result-carousel::-webkit-scrollbar { display: none; }
.mobile-result-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  flex: 0 0 min(82vw, 360px);
  min-height: 66px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(23, 49, 43, 0.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.32);
  scroll-snap-align: center;
  text-align: left;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.mobile-result-card.is-active { border-color: #f2a541; box-shadow: 0 16px 44px rgba(0,0,0,.38), inset 0 0 0 1px rgba(242,165,65,.35); }
.mobile-card-rank {
  display: grid; place-items: center; width: 34px; height: 34px;
  color: #142d27; background: #f2a541; border-radius: 50%;
  font-size: 12px; font-weight: 850;
}
.mobile-card-main { display: grid; min-width: 0; line-height: 1.25; }
.mobile-card-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mobile-card-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.72); font-size: 11.5px; }
.mobile-result-card strong { color: #f2a541; font-size: 15px; white-space: nowrap; }
.mobile-expanded-ranking { display: none; }
.mobile-expanded-ranking-title {
  display: block; margin: 0 0 6px;
  color: var(--muted); font-size: 10.5px; font-weight: 850;
  letter-spacing: .06em; text-transform: uppercase;
}

.mobile-draw-guide {
  display: none;
  position: fixed; left: 10px; right: 10px; bottom: calc(min(50vh, 440px) + 18px + env(safe-area-inset-bottom, 0px)); bottom: calc(min(50svh, 440px) + 18px + env(safe-area-inset-bottom, 0px)); z-index: 820;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 50px; padding: 8px 10px; color: #fff; background: rgba(23, 76, 63, .95);
  border: 1px solid rgba(255,255,255,.16); border-radius: 15px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.mobile-draw-guide span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mobile-draw-guide button {
  min-height: 40px; padding: 0 14px; color: #fff; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px; font-size: 11px; font-weight: 800;
  pointer-events: auto;
}

@media (min-width: 721px) {
  body.poly-drawing .mobile-draw-guide:not(.hidden) {
    display: grid;
    left: calc(var(--panel-width) + 24px);
    right: auto;
    bottom: 24px;
    width: min(420px, calc(100vw - var(--panel-width) - 56px));
  }
}

.mobile-mode-pill {
  position: fixed; left: 10px; right: 10px; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 812;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 44px; padding: 7px 11px; color: var(--ink); background: var(--veil);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mobile-mode-pill b,
.mobile-mode-pill span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-mode-pill b { font-size: 12px; }
.mobile-mode-pill span { color: var(--muted); font-size: 11.5px; text-align: right; }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes resultIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


.mode-rect.rect-armed #map, .mode-rect.rect-armed .leaflet-container { cursor: crosshair !important; }

.rank-panel {
  position: fixed; top: 64px; right: 12px; z-index: 790;
  width: fit-content; min-width: 260px; max-width: min(360px, calc(100vw - var(--panel-width) - 48px));
  max-height: 48vh; overflow: hidden; background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
:root.dark-mode .rank-panel { background: rgba(16, 28, 24, 0.85); border-color: rgba(255, 255, 255, 0.08); }
#drawerHead {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px;
  color: var(--ink); text-align: left; background: transparent; border: 0; cursor: pointer;
}
#drawerHead small, #drawerHead b { display: block; }
#drawerHead small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
#drawerHead b { font-size: 12px; }
#drawerHead .chev { transition: transform .18s; transform: rotate(180deg); }
#drawerBody { max-height: calc(48vh - 52px); overflow-y: auto; border-top: 1px solid var(--line); }
.rank-panel.collapsed #drawerBody { display: none; }
.rank-panel.collapsed #drawerHead .chev { transform: rotate(0deg); }
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table td { padding: 0; border-bottom: 1px solid var(--line); }
.rank-jump {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 7px; align-items: center;
  width: 100%; padding: 8px 11px; color: var(--ink); text-align: left; background: transparent;
  border: 0; cursor: pointer; transition: background 0.15s;
}
.rank-jump:hover { background: var(--cream); }
:root.dark-mode .rank-jump:hover { background: rgba(255,255,255,0.05); }
.rank-jump .num {
  display: grid; place-items: center; width: 20px; height: 20px; color: #fff;
  background: var(--accent); border-radius: 50%; font-size: 11.5px; font-weight: 800;
}
.rank-jump .zone { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rank-jump .height { color: var(--accent); font-size: 11px; font-weight: 800; }

.rankpin { background: transparent; border: 0; pointer-events: auto; }
.bubble-wrap {
  width: 100%; height: 100%;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center bottom;
}
.rankpin span {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; color: #fff;
  background: var(--accent); border: 2px solid #fff; border-radius: 50% 50% 50% 12px;
  box-shadow: 0 5px 14px rgba(23, 49, 43, .34); font-size: 11.5px; font-weight: 800;
  transform: rotate(-45deg);
}
.rankpin span::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%;
}
.rankpin span b { position: relative; transform: rotate(45deg); }
/* Markery rankingu koloryzowane wg metryki (presety/gotowe widoki) - mocniejszy cien tekstu
   i obwodka, zeby numer pozostal czytelny na jasnych barwach palety (zolty/limonkowy). */
.rankpin-colored span { border-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.rankpin-colored span b { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.rankpin.rank-one span {
  width: 36px; height: 36px; background: var(--forest); font-size: 12px; border-color: #fff;
  box-shadow: 0 0 0 7px rgba(15, 111, 140, .18), 0 8px 18px rgba(0, 0, 0, 0.38);
  animation: winnerPulse 2.2s ease-in-out infinite;
}
@keyframes winnerPulse { 50% { box-shadow: 0 0 0 11px rgba(15, 111, 140, .12), 0 8px 18px rgba(0, 0, 0, 0.38); transform: rotate(-45deg) scale(1.05); } }

.rankpin.is-hovered { z-index: 10000 !important; }
.rankpin.is-hovered span {
  transform: rotate(-45deg) scale(1.2) !important;
  box-shadow: 0 0 0 5px rgba(228, 87, 46, .22), 0 12px 28px rgba(0,0,0,0.4) !important;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: none !important;
}
:root.dark-mode .rankpin.is-hovered span {
  box-shadow: 0 0 0 5px rgba(255, 110, 69, .3), 0 12px 28px rgba(0,0,0,0.55) !important;
}

/* Tooltip nazwy szczytu po najechaniu na marker wyniku (D1) */
.leaflet-tooltip.peak-hover-tip {
  padding: 5px 9px;
  color: var(--ink);
  background: var(--veil);
  border: 1px solid rgba(23, 76, 63, .14);
  border-radius: 9px;
  box-shadow: var(--sh-1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; font-weight: 700; line-height: 1.3;
  white-space: nowrap;
}
.leaflet-tooltip.peak-hover-tip b { font-weight: 800; }
.leaflet-tooltip.peak-hover-tip::before { display: none; }
:root.dark-mode .leaflet-tooltip.peak-hover-tip { border-color: rgba(255,255,255,.1); }

.peak-text-label {
  pointer-events: none;
  background: transparent;
  border: 0;
}
.peak-text-label span {
  display: block;
  max-width: 190px;
  overflow: hidden;
  padding: 2px 5px;
  color: #142d27;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 45, 39, 0.28);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
}
:root.dark-mode .peak-text-label span {
  color: #f7fbf8;
  background: rgba(20, 45, 39, 0.88);
  border-color: rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

.leaflet-control-labgis { display: block; padding: 4px; border-radius: 4px; transition: opacity 0.2s, transform 0.2s; opacity: 0.85; cursor: pointer; }
.leaflet-control-labgis:hover { opacity: 1; transform: scale(1.05); }
.leaflet-control-labgis img { display: block; max-width: 60px; height: auto; cursor: pointer; }

.leaflet-control-zoom {
  overflow: hidden; border: 1px solid var(--line) !important;
  border-radius: 11px !important; box-shadow: 0 5px 16px rgba(0, 0, 0, .14) !important;
}
.leaflet-control-zoom a { color: var(--ink) !important; background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(8px); }
:root.dark-mode .leaflet-control-zoom a { background: rgba(16, 28, 24, 0.85) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--veil) !important; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(23, 76, 63, .12);
}
:root.dark-mode .leaflet-popup-content-wrapper, :root.dark-mode .leaflet-popup-tip {
  color: var(--ink); border: 1px solid rgba(255,255,255,0.08);
}
:root.dark-mode .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.leaflet-popup-content { margin: 12px 13px; color: var(--ink); font-size: 12px; line-height: 1.45; }
.peak-popup { min-width: 170px; }
.peak-popup .popup-kicker { color: var(--accent); font-size: 11.5px; font-weight: 800; text-transform: uppercase; }
.peak-popup .popup-height { display: block; margin: 2px 0 5px; color: var(--height); font-size: 22px; line-height: 1; }
.peak-popup .popup-name { font-weight: 800; }
.peak-popup .popup-meta { margin-top: 4px; color: var(--muted); font-size: 12px; }
.peak-popup .popup-coords { margin-top: 7px; color: var(--muted); font-size: 12px; }

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: var(--forest-2);
  color: #fff !important;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 10.5px;
  transition: background 0.2s;
  cursor: pointer;
  border: none;
}
.nav-btn:hover { background: var(--forest); text-decoration: none; color: #fff !important; }
:root.dark-mode .nav-btn { background: var(--forest-2); color: #ffffff !important; }
:root.dark-mode .nav-btn:hover { background: var(--forest); }

@media (max-width: 720px) {
  :root { --panel-width: 0px; }
  #map { inset: 0; }
  .search-widget {
    top: max(60px, calc(env(safe-area-inset-top) + 56px));
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform-origin: top center;
    box-shadow: var(--sh-2);
  }
  .search-widget .search-wrap { padding: 10px; }
  .search-widget input[type="search"] {
    min-height: 48px;
    font-size: 16px; /* >=16px zapobiega autozoomowi iOS przy fokusie */
    padding: 8px 12px;
  }
  .search-widget .search-list {
    max-height: min(50vh, 360px);
    max-height: min(50svh, 360px);
  }
  .search-widget .search-list li { padding: 12px; }
  .search-widget .peak-search-name { font-size: 14px; }
  .search-widget .peak-search-meta { font-size: 12.5px; }
  #panel {
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) 8px; width: auto; height: auto; max-height: min(50vh, 440px); max-height: min(50svh, 440px);
    display: flex; flex-direction: column;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 30px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
    background: rgba(255, 253, 248, 0.9);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transition: transform .24s cubic-bezier(0.3, 1, 0.3, 1), height .24s ease;
  }
  :root.dark-mode #panel { background: rgba(16, 28, 24, 0.88); border-color: rgba(255,255,255,0.06); box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5); }
  #panel.mobile-result { height: auto; max-height: min(70vh, 680px); max-height: min(70svh, 680px); }
  #panel.mobile-collapsed { transform: translateY(calc(100% - 40px)); }
  #panelToggle {
    display: grid; place-items: center; width: 100%; height: 38px; flex: 0 0 38px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
  }
  .sheet-handle { width: 52px; height: 6px; background: var(--muted); border-radius: 6px; opacity: 0.4; }
  #panelScroll {
    display: block; flex: 1 1 auto; min-height: 0; height: auto; padding: 0 16px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  #panelScroll::-webkit-scrollbar { display: none; }
  .panel-accordion summary { top: 0; }
  #result { overflow: visible; }
  .result-custom #result { min-height: 190px; }
  #panel:not(.mobile-collapsed) .mobile-expanded-ranking {
    display: block;
    margin: 0 0 10px;
  }
  #panel:not(.mobile-collapsed) .mobile-expanded-ranking .ranklist {
    margin-top: 0;
  }
  .desktop-ranklist { display: none; }
  .has-result .brand { margin-bottom: 8px; }
  .result-custom #customCtrl { position: sticky; top: 0; z-index: 2; }
  .brand { margin-bottom: 6px; }
  .brand-mark { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; }
  .brand-mark svg { width: 24px; height: 24px; }
  h1 { font-size: clamp(16px, 4.4vw, 19px); }
  .tagline { display: none; }
  .lead { margin: 9px 0 11px; font-size: 11px; }
  .foot { display: none; }
  /* Na telefonie glowny przycisk zaczyna rysowanie, a osobny kwadrat rozwija geometrie. */
  .draw-caret {
    display: flex; flex: 0 0 38px; width: 38px;
    align-items: center; justify-content: center; padding: 0;
  }
  .draw-primary { border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0; }
  .draw-split.is-active .draw-primary { border-right-color: var(--forest); }
  .draw-flyout {
    position: static; grid-column: 1 / -1;
    flex-direction: row; width: auto; min-width: 0; margin-top: 6px;
    padding: 0; gap: 6px; background: transparent; border: 0; box-shadow: none;
  }
  .draw-geom-item {
    flex: 1 1 0; flex-direction: column; gap: 5px; padding: 9px 4px;
    text-align: center; font-size: 11px;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  }
  .draw-geom-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  :root.dark-mode .draw-geom-item { background: rgba(255,255,255,0.03); }
  .map-toolbar { top: max(10px, env(safe-area-inset-top)); right: 9px; flex-direction: column; align-items: flex-end; }
  .map-toolbar > button,
  .map-toolbar > .layer-menu-wrap > button { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .map-toolbar > button span,
  .map-toolbar > .layer-menu-wrap > button span { display: none; }
  .more-menu-wrap { display: none; }
  .layer-menu {
    width: 168px;
    /* Na telefonie przycisk "Warstwy" siedzi nizej (kolumna narzedzi u gory),
       wiec menu zaczyna sie ok. 110-120 px od gory - mocniej ograniczamy wysokosc,
       by dolne pozycje (Pobierz HIPSO, Widoki, Motyw) zawsze byly osiagalne scrollem. */
    max-height: min(56dvh, calc(100dvh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .layer-menu button { width: 100%; min-height: 44px; padding: 0 10px; }
  .layer-menu span { display: inline; }
  .layer-row { touch-action: auto; }
  .layer-row[data-layer-key]::before { display: none; }
  .layer-row .layer-menu-item { width: 100%; }
  .map-controls-right {
    top: max(124px, calc(env(safe-area-inset-top) + 116px));
    right: 9px;
    transform: none;
    gap: 8px;
  }
  /* Mobile: rozpuszczamy obudowe grupy w pojedyncze pigulki, zeby ikonki
     home/lokalizacja/info tworzyly jedna kolumne idealnie wyrownana z pigulkami
     wyszukiwarki i warstw u gory (ten sam prawy brzeg, srodek i szerokosc). */
  .map-controls-right .map-ctrl-group {
    background: transparent; border: 0; box-shadow: none; padding: 0; gap: 8px;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :root.dark-mode .map-controls-right .map-ctrl-group { background: transparent; border: 0; }
  .map-controls-right button {
    width: 44px; height: 44px; border-radius: 11px;
    justify-content: center; padding: 0;
    background: rgba(255, 255, 255, 0.92); border: 1px solid var(--line);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .map-controls-right .ctrl-label { display: none; }
  :root.dark-mode .map-controls-right button {
    background: rgba(16, 28, 24, 0.88); border-color: rgba(255, 255, 255, 0.08);
  }
  .map-controls-right button:hover { background: var(--cream); }
  :root.dark-mode .map-controls-right button:hover { background: rgba(255, 255, 255, 0.08); }
  .zoom-group { display: none !important; }
  #ctrlMeasure { display: none !important; }
  .map-controls-right .ctrl-sep {
    display: none;
  }
  .map-status { top: 60px; left: 50%; white-space: nowrap; }
  .floating-legend {
    left: 10px; right: auto; bottom: calc(min(50vh, 440px) + 18px); bottom: calc(min(50svh, 440px) + 18px);
    min-width: 0; width: auto; max-width: calc(100vw - 20px); padding: 0;
  }
  .floating-legend .legend-title {
    margin: 0; padding: 9px 11px; color: var(--ink); font-size: 11px;
  }
  .floating-legend .legend-title::after { content: " ⌄"; color: var(--muted); }
  .floating-legend .legend-scale { display: none; padding: 0 11px 10px; grid-template-columns: repeat(5, minmax(42px, 1fr)); }
  .floating-legend.is-expanded { right: 10px; width: auto; }
  .floating-legend.is-expanded .legend-title { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .floating-legend.is-expanded .legend-title::after { content: " ⌃"; }
  .floating-legend.is-expanded .legend-scale { display: grid; }
  #panel.mobile-collapsed ~ .floating-legend { bottom: 110px; }
  #panel.mobile-collapsed ~ .mobile-result-bar:not(.hidden) { display: grid; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .mobile-result-carousel:not(.hidden) { display: flex; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .mobile-draw-guide:not(.hidden) { display: grid; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .mobile-mode-pill:not(.hidden) { display: grid; }
  #panel:not(.mobile-collapsed) ~ .mobile-mode-pill { display: none; }
  .mobile-draw-guide:not(.hidden) { display: grid; }
  .draw-guide {
    left: 50%; bottom: calc(min(50vh, 440px) + 20px);
    max-width: calc(100vw - 24px); white-space: nowrap;
  }

  .rank-panel {
    top: 62px; right: 71px; left: 8px; width: auto; max-height: 34vh;
  }
  #drawerBody { max-height: calc(34vh - 52px); }
  .leaflet-control-attribution { max-width: 70vw; font-size: 10px !important; }

  /* B2: powiekszone cele dotykowe dla malych przyciskow-ikon (>=40px obszar dotyku) */
  .help-dot { position: relative; }
  .help-dot::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 40px; height: 40px; transform: translate(-50%, -50%);
  }
  .clear-result-btn { width: 44px; height: 44px; margin-left: 2px; }
  .floating-legend .legend-close { width: 44px; height: 44px; }
  .modal-header button { width: 44px; height: 44px; }
  .edit-handle {
    width: 18px !important; height: 18px !important;
    margin-left: -9px !important; margin-top: -9px !important;
  }
  .edit-handle span { width: 6px; height: 6px; }
}

@media (max-width: 390px) {
  #panel { height: auto; max-height: min(54vh, 400px); max-height: min(54dvh, 400px); }
  #panel.mobile-result { height: auto; max-height: min(72vh, 610px); max-height: min(72dvh, 610px); }
  .lead { display: none; }
  .brand { margin-bottom: 9px; }
  .mobile-result-bar,
  .mobile-result-carousel,
  .mobile-draw-guide { bottom: calc(min(54vh, 400px) + 16px); bottom: calc(min(54dvh, 400px) + 16px); }

}

@media (max-width: 360px) {
  .mode-card-body small { display: none; }
  .mode-card-body { min-height: 44px; }
}

@media (min-width: 721px) and (max-height: 700px) {
  #panelScroll { padding-top: 14px; padding-bottom: 14px; }
  .lead { display: none; }
  .brand { margin-bottom: 10px; }
  .mode-card-body small { display: none; }
  .mode-card-body { min-height: 48px; padding: 8px 10px; }
  .control-card { margin-top: 7px; padding-top: 9px; padding-bottom: 9px; }
  .hint { min-height: 22px; margin-top: 7px; margin-bottom: 5px; }
  .foot { margin-top: 7px; }
  .panel-accordion summary { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.info-modal {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  width: 90vw;
  max-width: 620px;
  max-height: min(82vh, 760px);
  overflow: hidden;
}
#infoModal.info-modal {
  max-width: 960px;
}
.info-modal::backdrop {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.modal-header button {
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; transition: background 0.2s;
}
.modal-header button:hover { background: var(--cream); }
:root.dark-mode .modal-header button:hover { background: rgba(255,255,255,0.05); }
.modal-header svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.modal-body {
  max-height: calc(min(82vh, 760px) - 66px);
  overflow-y: auto;
  padding: 18px 20px 20px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
}
.modal-body p { margin-top: 0; margin-bottom: 10px; }
.modal-lead {
  color: var(--ink);
  font-size: 14px;
}
.info-modal-layout {
  display: block;
}
.info-modal-nav {
  display: none;
}
.modal-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.modal-section h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.modal-section ul {
  margin: 0;
  padding-left: 18px;
}
.modal-section li { margin: 0 0 7px; }
.modal-section li:last-child { margin-bottom: 0; }
.modal-credit {
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.modal-credit-text p {
  margin: 0;
}
.modal-credit-text p:first-child {
  margin-bottom: 2px;
  font-size: 12px;
  color: var(--muted);
}
.modal-credit-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.modal-credit-logo {
  flex: 0 0 auto;
}
.modal-credit-logo img {
  width: 170px;
  max-width: 34vw;
  height: auto;
  display: block;
  border-radius: 8px;
}
.modal-body p:last-child { margin-bottom: 0; }
.modal-body a { color: var(--accent); text-decoration: none; font-weight: 700; }
.modal-body a:hover { text-decoration: underline; }
.modal-body svg { border-radius: 10px; background: rgba(23,76,63,0.03); border: 1px solid var(--line); }
:root.dark-mode .modal-body svg { background: rgba(255,255,255,0.03); }
:root.dark-mode .info-modal { border-color: rgba(255,255,255,0.08); }
/* Tracking styles */
button.is-tracking {
  color: #007aff !important;
}
#geoBtn.is-tracking {
  background: #007aff !important;
  color: #fff !important;
  border-color: #007aff !important;
}
#ctrlLocate.is-tracking {
  color: #007aff !important;
  background: rgba(0, 122, 255, 0.12);
}
:root.dark-mode #ctrlLocate.is-tracking {
  background: rgba(0, 122, 255, 0.18);
}
#ctrlLocate.is-tracking svg {
  stroke: #007aff !important;
}
button.is-locating svg {
  animation: locatePulse 1.05s ease-in-out infinite;
}
.user-accuracy-ring, .user-location-dot {
  pointer-events: none;
}
@keyframes locatePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.14); opacity: .72; }
}

/* A4: Radius slider tooltip */
.range-tooltip {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  padding: 3px 7px; color: #fff; background: var(--forest);
  border-radius: 6px; font-size: 11px; font-weight: 800; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
.range-tooltip.visible { opacity: 1; }

/* Etykieta promienia podczas rysowania okregu gestem (pokazywana przy kursorze). */
.circle-radius-label {
  position: absolute; z-index: 650; transform: translate(12px, -50%);
  padding: 3px 8px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  pointer-events: none; box-shadow: 0 4px 12px rgba(23,76,63,.18);
}
:root.dark-mode .circle-radius-label { background: #14211c; color: #eef6f0; border-color: rgba(255,255,255,.12); }
.mode-radius.circle-armed #map, .mode-radius.circle-armed .leaflet-container { cursor: crosshair !important; }

/* A5: GPX toast */
.gpx-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999; padding: 10px 18px; color: #fff; background: var(--forest);
  border-radius: 12px; font-size: 12px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toastIn 0.2s ease-out, toastOut 0.3s ease-in 1.7s forwards;
  pointer-events: none;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

/* C3: Zoom indicator on mobile */
.zoom-indicator {
  position: fixed; right: 12px; bottom: 12px; z-index: 790;
  padding: 4px 7px; color: var(--muted); background: var(--veil);
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 10px; font-weight: 800; pointer-events: none;
  opacity: 0; transition: opacity 0.3s;
}
.zoom-indicator.visible { opacity: 1; }

@media (max-width: 720px) {
  .leaflet-bottom.leaflet-right .leaflet-control-labgis { position: fixed; top: 12px; left: 12px; bottom: auto; right: auto; z-index: 1000; }
}

/* ═══════════════════════════════════════════════════════════════
   PROFIL TERENU – panel wykresu + przycisk + rysowanie
   ═══════════════════════════════════════════════════════════════ */

/* Przycisk aktywny */
#ctrlProfile.is-active {
  background: var(--accent) !important;
  color: #fff !important;
}
:root.dark-mode #ctrlProfile.is-active {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Panel wykresu */
.profile-panel {
  position: fixed;
  bottom: 0; left: var(--panel-width); right: 0;
  z-index: 900;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
  transition: transform 0.25s ease;
}
.profile-panel.hidden { display: none; }

/* Uwaga: aktywny uklad naglowka profilu definiuje pozniejszy blok "NOWE STYLE PROFILU" (kolumnowy). */
.profile-title {
  font-weight: 800; font-size: 13px; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
.profile-stats {
  font-size: 11px; color: var(--muted);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.45;
}
.profile-stats-warn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(228, 87, 46, 0.12);
  color: #c0392b;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
}
:root.dark-mode .profile-stats-warn {
  background: rgba(255, 110, 69, 0.15);
  color: #ff8a6a;
}
.profile-warn {
  flex-shrink: 0;
  width: auto !important; height: auto !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  font-size: 10px; font-weight: 700;
  background: rgba(228, 87, 46, 0.12) !important;
  color: #c0392b !important;
  border: 1px solid rgba(228, 87, 46, 0.3) !important;
  white-space: nowrap; cursor: pointer;
}
.profile-warn:hover { background: rgba(228, 87, 46, 0.2) !important; }
.profile-warn.hidden { display: none !important; }
:root.dark-mode .profile-warn {
  background: rgba(255, 110, 69, 0.15) !important;
  color: #ff8a6a !important;
  border-color: rgba(255, 110, 69, 0.35) !important;
}

/* Menu „więcej opcji" w nagłówku profilu */
.profile-menu-btn svg {
  width: 18px !important; height: 18px !important;
}
.profile-menu-item {
  display: flex !important; align-items: center; gap: 9px;
  width: 100% !important; height: auto !important;
  justify-content: flex-start;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important; border: 0 !important;
  font-size: 12px; font-weight: 600;
  color: var(--ink) !important; cursor: pointer;
}
.profile-menu-item:hover { background: var(--cream) !important; }
.profile-menu-item svg {
  width: 16px !important; height: 16px !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 2 !important;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--forest); flex-shrink: 0;
}
.profile-menu-sep { height: 1px; background: var(--line); margin: 5px 6px; }
.profile-menu-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.profile-menu-select {
  flex-shrink: 0;
  min-height: 26px; padding: 3px 6px;
  font-size: 11px; font-weight: 700;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
/* Wiersz „pionowy": etykieta u góry, kontrolka pełnej szerokości pod spodem. Eliminuje
   puste „powietrze" między napisem a selectem i pozwala zwęzić cały panel. */
.profile-menu-row-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.profile-menu-row-stack .profile-menu-select { width: 100%; }

.profile-header button {
  display: grid; place-items: center;
  width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; border-radius: 7px;
  transition: background 0.15s;
}
.profile-header button:hover { background: var(--cream); }
.profile-header button svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#profileClose {
  position: absolute;
  top: 6px; right: 10px;
  z-index: 2;
}

.profile-redraw-btn {
  display: flex !important; align-items: center; gap: 4px;
  width: auto !important; padding: 4px 10px !important;
  font-size: 11px; font-weight: 700;
  color: var(--forest) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
}
.profile-redraw-btn svg {
  width: 14px !important; height: 14px !important;
  fill: currentColor !important; stroke: none !important;
}
.profile-redraw-btn:hover {
  background: var(--cream) !important;
  border-color: var(--forest) !important;
}

.profile-chart-wrap {
  position: relative;
  height: 180px;
  padding: 4px 10px 6px;
}
.profile-hover-info {
  position: absolute;
  top: 6px; right: 14px;
  z-index: 5;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
  min-height: 18px;
  opacity: 0.92;
}
.profile-hover-info:empty { display: none; }
.profile-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* Legenda nachylenia (pływająca nad wykresem, lewy górny róg) */
.slope-legend {
  position: absolute;
  bottom: 4px; right: 12px;
  top: auto; left: auto;
  z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px;
  max-width: calc(100% - 56px);
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  font-size: 10px; font-weight: 700; color: var(--ink);
  pointer-events: none;
  line-height: 1.4;
}
.slope-legend.hidden { display: none; }
.slope-legend-title { color: var(--muted); margin-right: 2px; }
.slope-legend-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.slope-legend-item i {
  width: 12px; height: 4px; border-radius: 2px; display: inline-block; flex-shrink: 0;
}

.profile-progress {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--paper);
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.profile-progress.hidden { display: none; }

/* Guide  – rysowanie linii */
.profile-draw-guide {
  position: fixed;
  top: 62px; left: calc(var(--panel-width) + 50%);
  transform: translateX(-50%);
  z-index: 850;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(23, 49, 43, 0.9);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  font-size: 12px; font-weight: 700;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.profile-draw-guide.hidden { display: none; }
.profile-draw-guide button {
  padding: 4px 10px; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff; border-radius: 12px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
}
.profile-draw-guide button:hover { background: rgba(255,255,255,0.15); }

/* Kursor crosshair podczas rysowania profilu — overlay ma własny cursor */
.profile-drawing-active .leaflet-container {
  cursor: crosshair !important;
}
.profile-drawing-active .leaflet-interactive {
  cursor: crosshair !important;
}

/* Hover marker na profilu */
.profile-hover-marker {
  z-index: 800;
}

/* Min/Max markery na mapie */
.profile-triangle {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.profile-triangle svg {
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.profile-triangle-max svg {
  fill: #d32f2f;
  stroke: #000;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.profile-triangle-min svg {
  fill: #1976d2;
  stroke: #000;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
:root.dark-mode .profile-triangle-min svg {
  fill: #4fc3f7;
}

.profile-minmax-label {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.profile-minmax-label span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  line-height: 1.3;
  letter-spacing: 0.2px;
  background: rgba(23, 49, 43, 0.82);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.minmax-arrow {
  width: 10px; height: 10px; flex-shrink: 0;
  fill: currentColor;
}
.profile-max-label span .minmax-arrow { fill: #ffb4a0; }
.profile-min-label span .minmax-arrow { fill: #90caf9; }
.profile-max-label span {
  color: #ffc1b0;
}
.profile-min-label span {
  color: #b3e5fc;
}
:root.dark-mode .profile-minmax-label span {
  background: rgba(12, 24, 20, 0.88);
}
:root.dark-mode .profile-max-label span {
  color: #ff9a7f;
}
:root.dark-mode .profile-min-label span {
  color: #81d4fa;
}

/* Responsywność mobile */
@media (max-width: 720px) {
  .profile-panel {
    left: 0;
    border-radius: 16px 16px 0 0;
    height: auto;
    max-height: 42vh;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.2);
  }
  .profile-chart-wrap {
    height: 140px;
    padding: 4px 6px 4px;
  }
  .slope-legend {
    bottom: 4px; right: 8px;
    top: auto; left: auto;
    font-size: 9px; gap: 1px 5px; padding: 2px 6px;
    max-width: calc(100% - 44px);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  :root.dark-mode .slope-legend { background: rgba(12,24,20,0.82); }
  .slope-legend-title { display: none; } /* na wąskim ekranie legenda mieści się w jednym wierszu */
  .slope-legend-item i { width: 10px; }
  .profile-header {
    padding: 6px 44px 6px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .profile-stats {
    display: none;
  }
  .profile-redraw-label { display: none; }
  .profile-redraw-btn { padding: 4px 6px !important; }
  .profile-menu { min-width: 180px; }
  .profile-draw-guide {
    left: 50%;
    top: auto; bottom: 76px;
    font-size: 11px;
    padding: 7px 12px;
  }
  /* Gdy profil jest aktywny na telefonie, oddajemy dol ekranu wykresowi:
     chowamy glowny panel (zwiniety uchwyt nachodzilby na profil) oraz mobilne paski. */
  body.profile-open #panel { display: none !important; }
  body.profile-open .mobile-result-bar,
  body.profile-open .mobile-mode-pill,
  body.profile-open .mobile-draw-guide,
  body.profile-open .floating-legend {
    display: none !important;
  }
  /* Stara regula (zachowana dla zgodnosci) */
  .profile-panel:not(.hidden) ~ .mobile-result-bar,
  .profile-panel:not(.hidden) ~ .mobile-mode-pill {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POMIAR ODLEGŁOŚCI
   ═══════════════════════════════════════════════════════════════ */
#ctrlMeasure.is-active {
  background: #1976d2 !important;
  color: #fff !important;
}
.measure-drawing-active .leaflet-container {
  cursor: crosshair !important;
}
.measure-drawing-active .leaflet-interactive {
  cursor: crosshair !important;
}
.measure-label {
  pointer-events: none !important;
  border: none !important;
  background: transparent !important;
}
.measure-label span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  white-space: nowrap;
  background: rgba(23, 49, 43, 0.8);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.measure-total-label span {
  background: #1976d2;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
:root.dark-mode .measure-label span {
  background: rgba(12, 24, 20, 0.88);
}
:root.dark-mode .measure-total-label span {
  background: #4fc3f7;
  color: #0d2137;
}

/* Fresnel toggle */
.fresnel-toggle {
  display: flex; align-items: center; gap: 0;
  cursor: pointer; border-radius: 7px; padding: 2px 4px;
  transition: background 0.15s;
}
.fresnel-toggle:hover { background: var(--cream); }
:root.dark-mode .fresnel-toggle:hover { background: rgba(255,255,255,0.08); }
.fresnel-toggle input { display: none; }
.fresnel-toggle svg {
  width: 32px; height: 16px;
  stroke: var(--muted); fill: none;
  transition: stroke 0.15s, opacity 0.15s;
  opacity: 0.75;
}
.fresnel-toggle input:checked ~ svg {
  stroke: #1976d2;
  opacity: 1;
}
/* --- NOWE STYLE PROFILU (Ergonomia i Estetyka) --- */
.profile-header {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 14px 6px;
  border-bottom: 1px solid var(--line);
  position: relative;
  align-items: stretch;
}
.profile-header-top {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; gap: 8px; flex-wrap: wrap;
}
.profile-title { flex-shrink: 0; order: 1; }
#profileWarn { order: 2; }
.profile-header-actions {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; order: 3;
}
.profile-header-actions button, .profile-header-actions label {
  position: relative !important; top: auto !important; right: auto !important;
}
.profile-stats {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 0 12px 0 8px; flex-basis: auto; flex-grow: 1; order: 2; width: auto;
}
.profile-redraw-label { display: none; }
.profile-redraw-btn {
  padding: 6px !important;
  border-radius: 8px !important;
}
.profile-redraw-btn svg { width: 16px !important; height: 16px !important; }

/* Modal ustawie nad wykresem */
.profile-settings-panel {
  position: absolute;
  top: auto; bottom: 0; left: auto; right: 0;
  width: max-content;
  min-width: 190px;
  max-width: 100%;
  z-index: 100;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  box-shadow: -5px -10px 30px rgba(0,0,0,0.15);
  border-radius: 16px 0 0 0;
  display: flex; flex-direction: column;
  padding: 0 0 12px;
  transition: transform 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
  transform: translateY(0);
}
.profile-settings-panel.hidden {
  transform: translateY(110%);
  display: flex !important;
}
.profile-chart-wrap { overflow: hidden; position: relative; }

.profile-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.profile-settings-title {
  font-weight: 800; font-size: 13px; color: var(--ink);
}
.profile-settings-close {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  transition: background 0.15s;
}
.profile-settings-close:hover { background: var(--cream); }
.profile-settings-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

.profile-settings-body {
  padding: 0 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.profile-settings-body .profile-menu-item {
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.profile-settings-body .profile-menu-row {
  padding: 8px 12px;
}
.profile-menu-label {
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 700;
}
.profile-menu-label svg {
  color: var(--forest);
}

.profile-triangle { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.profile-minmax-label { box-shadow: 0 3px 12px rgba(0,0,0,0.15); border: none !important; }

.profile-draw-guide .mobile-text { display: none; }
@media (max-width: 720px) {
  .profile-draw-guide .desktop-text { display: none; }
  .profile-draw-guide .mobile-text { display: inline; }
  .profile-header { padding: 8px 12px 6px; }
}

/* Gotowe widoki map (predefiniowane uklady) */
.preset-modal { max-width: 360px; }
.preset-list { list-style: none; margin: 12px 0 0; padding: 0; }
.preset-group {
  padding: 2px 4px 8px; font-size: 11px; font-weight: 850; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted, #35473f);
}
.preset-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; padding: 11px 8px; background: none; border: 0; border-radius: 10px;
  border-bottom: 1px solid var(--line, #e6ece6);
  color: var(--ink, #17312b); text-align: left; cursor: pointer; transition: background 0.15s;
}
.preset-item:hover { background: var(--cream, #f6f3ec); }
:root.dark-mode .preset-item:hover { background: rgba(255,255,255,0.04); }
.preset-swatches { display: inline-flex; border-radius: 5px; overflow: hidden; box-shadow: var(--sh-1); flex: 0 0 auto; }
.preset-swatches span { width: 11px; height: 22px; display: block; }
.preset-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.preset-name { font-size: 14px; font-weight: 750; }
.preset-sub { font-size: 12px; color: var(--muted, #35473f); }

/* Paski parametrow w dymkach - wskaznik typu naladowanie baterii */
.metric-bars { margin-top: 9px; display: flex; flex-direction: column; gap: 8px; }
.metric-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.metric-bar-label { font-size: 11.5px; font-weight: 550; color: var(--muted, #35473f); letter-spacing: .01em; }
.metric-bar-val { font-size: 11px; font-weight: 650; color: var(--muted, #35473f); white-space: nowrap; }
.metric-bar-track { position: relative; height: 9px; border-radius: 6px; background: var(--bar-track, rgba(23,49,43,.10)); overflow: hidden; }
.metric-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 4px; border-radius: 6px; background: linear-gradient(90deg, rgba(228,87,46,.26), rgba(228,87,46,.46)); transition: width .35s ease; }
:root.dark-mode .metric-bar-track {
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(100% / var(--metric-segments, 5) - 1.4px),
      rgba(0,0,0,.32) calc(100% / var(--metric-segments, 5) - 1.4px),
      rgba(0,0,0,.32) calc(100% / var(--metric-segments, 5))),
    rgba(255,255,255,.14);
}

/* UX 2026: help popover jako inline disclosure (odporne na overflow scrollera) + dark elevation */
.inline-control { flex-wrap: wrap; }
.help-popover { position: static; flex-basis: 100%; width: 100%; top: auto; left: auto; margin-top: 6px; z-index: auto; box-shadow: var(--sh-1); font-size: 12px; line-height: 1.45; }
:root.dark-mode .help-popover { background: #1b2c26; border-color: rgba(255,255,255,0.1); box-shadow: var(--sh-2); }

/* UX 2026-06-24: filtr + opis w JEDNYM wierszu (jak „Sortuj wg”), bez rozjazdu na 2 linie.
   Etykieta kurczy się (nigdy nie zawija), select ma stałą, jednakową szerokość -> spójny
   rytm i prawy brzeg. Popover (flex-basis:100%) nadal spada do osobnej linii pod spodem. */
.inline-control { gap: 8px; }
.inline-control > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-control > select { flex: 0 0 128px; width: 128px; padding-right: 20px; font-size: 11.5px; }
/* Tryb ciemny: rozwijana lista selecta miała jasne tło z jasną czcionką (nieczytelne).
   Wymuszamy solidne ciemne tło i jasny tekst zarówno na kontrolce, jak i na opcjach. */
:root.dark-mode select { background-color: #16241f; color: var(--ink); }
:root.dark-mode select option { background-color: #16241f; color: var(--ink); }
:root.dark-mode .info-modal { background: #16241f; box-shadow: 0 18px 50px rgba(0,0,0,0.55); }
@media (max-width: 720px) { .help-popover { font-size: 13px; line-height: 1.5; padding: 10px 12px; } }

/* Esthetic pass 2026-06: lighter hierarchy, compact map overlays, modern popup cards. */
body:not(.has-result) #result {
  flex: 0 0 auto;
  min-height: 78px;
  max-height: none;
  box-shadow: var(--sh-1);
}
body:not(.has-result) .result-placeholder { min-height: 52px; }
body:not(.has-result) .placeholder-peak { flex-basis: 30px; width: 30px; height: 30px; opacity: .7; }

.winner-hero {
  border: 1px solid rgba(23, 76, 63, .1);
  background:
    radial-gradient(circle at 10% 5%, rgba(242, 165, 65, .14), transparent 38%),
    linear-gradient(135deg, rgba(255, 253, 248, .96), rgba(246, 243, 234, .8));
}
:root.dark-mode .winner-hero {
  border-color: rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 10% 5%, rgba(255, 188, 87, .14), transparent 38%),
    linear-gradient(135deg, rgba(22, 36, 31, .98), rgba(12, 24, 20, .78));
}
.winner-hero .metric-bars { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line); }
.result-note {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(23, 76, 63, .035);
}
:root.dark-mode .result-note { background: rgba(255,255,255,.035); }

.mode-cat #catCtrl {
  display: grid;
  gap: 10px;
}
.mode-cat #catCtrl > .field-label,
.mode-cat #catCtrl > .wide-select,
.mode-cat #catCtrl > .search-wrap,
.mode-cat .cat-advanced-body > .control-grid,
.mode-cat #rankSortGrid,
.mode-cat .cat-advanced-body > .switch-row,
.mode-cat #legend {
  margin-top: 0;
}
.mode-cat #catCtrl > .search-wrap,
.mode-cat #rankSortGrid,
.mode-cat .cat-advanced-body > .switch-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cat-advanced {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(23, 76, 63, .025);
}
.cat-advanced summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px;
  color: var(--forest); font-size: 12px; font-weight: 850;
  cursor: pointer; list-style: none;
}
.cat-advanced summary::-webkit-details-marker { display: none; }
.cat-advanced summary::after {
  content: "▾"; color: var(--muted); font-size: 10px; line-height: 1;
}
.cat-advanced[open] summary {
  border-bottom: 1px solid var(--line);
}
.cat-advanced[open] summary::after { content: "▴"; }
.cat-advanced-body {
  display: grid; gap: 10px;
  padding: 10px;
}
:root.dark-mode .cat-advanced { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); }

.mobile-menu-extra { display: none !important; }
/* Mobilne menu "Warstwy": naglowek sekcji oddzielajacy faktyczne warstwy od skrotow
   aplikacji (Widoki, Motyw) - linia u gory + maly wersalikowy podpis. */
.layer-menu-group {
  margin: 5px 2px 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 9.5px; font-weight: 850; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
:root.dark-mode .layer-menu-group { border-color: rgba(255, 255, 255, 0.08); }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(255, 253, 248, .94) !important;
  border-color: rgba(23, 76, 63, .16) !important;
  box-shadow: 0 18px 44px rgba(18, 49, 42, .24) !important;
}
:root.dark-mode .leaflet-popup-content-wrapper,
:root.dark-mode .leaflet-popup-tip {
  background: rgba(16, 28, 24, .96) !important;
}
.leaflet-popup-content {
  margin: 12px 34px 12px 13px;
  font-size: 12px;
}
.leaflet-container a.leaflet-popup-close-button {
  width: 30px; height: 30px;
  top: 3px; right: 3px;
  font-size: 24px; line-height: 28px;
  border-radius: 8px;
}
.leaflet-container a.leaflet-popup-close-button:hover {
  background: rgba(23, 76, 63, .08);
  color: var(--forest);
}
.peak-popup-modern {
  min-width: 178px;
  max-width: 218px;
}
.popup-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.peak-popup .popup-kicker {
  display: inline-flex;
  align-items: center;
  max-width: 92px;
  min-height: 22px;
  padding: 3px 7px;
  color: var(--accent);
  background: rgba(228, 87, 46, .1);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peak-popup .popup-height {
  margin: 0;
  color: var(--height);
  font-size: 21px;
  font-weight: 850;
  white-space: nowrap;
}
.peak-popup .popup-name {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.18;
}
.peak-popup .popup-name-main {
  margin-top: 0;
  color: var(--height);
  font-size: 15px;
  font-weight: 850;
}
.peak-popup .popup-meta {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.3;
}
.popup-footer,
.popup-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.popup-footer { justify-content: space-between; flex-wrap: nowrap; }
/* Para akcji w prawym dolnym rogu: gwiazdka (lewa) + „⋮" (prawy narożnik), zawsze obok siebie. */
.popup-foot-actions { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
.popup-actions { flex-wrap: wrap; }
.peak-popup .popup-coords {
  min-width: 0;
  margin-top: 0;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.peak-popup .nav-btn {
  flex: 1 1 auto;
  min-height: 24px;
  padding: 4px 6px;
  border-radius: 6px;
}
.peak-popup .popup-zone-btn, .peak-popup .popup-around-btn {
  flex: 1 1 100%;
}
.metric-bars-compact {
  gap: 6px;
  margin-top: 9px;
}
.metric-bars-compact .metric-bar-head {
  margin-bottom: 2px;
}
.metric-bars-compact .metric-bar-label {
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.metric-bars-compact .metric-bar-val {
  font-size: 11px;
  color: var(--ink);
}
.metric-bar-track {
  height: 10px;
  border: 1px solid rgba(23, 49, 43, .08);
  background:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(100% / var(--metric-segments, 5) - 1.4px),
      rgba(255,255,255,.55) calc(100% / var(--metric-segments, 5) - 1.4px),
      rgba(255,255,255,.55) calc(100% / var(--metric-segments, 5))),
    var(--bar-track, rgba(23,49,43,.10));
}
.metric-bars-compact .metric-bar-track {
  height: 8px;
  border-radius: 999px;
}
.metric-bar-fill {
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}

.modal-section.modal-disclosure {
  margin-top: 8px;
  padding-top: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(23, 76, 63, .025);
  overflow: hidden;
}
.modal-disclosure summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 12px;
  color: var(--ink);
  cursor: pointer;
}
.modal-disclosure summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  margin-left: auto;
  transition: transform .16s;
}
.modal-disclosure[open] summary::after { transform: rotate(180deg); }
.modal-disclosure summary::-webkit-details-marker { display: none; }
.modal-summary-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(228, 87, 46, .08);
}
.modal-summary-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.modal-summary-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.modal-summary-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.18;
  text-transform: uppercase;
}
.modal-summary-subtitle {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
}
.modal-section-body {
  padding: 0 12px 12px;
}
.modal-more {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.modal-more summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
  font-size: 12.5px;
}
.modal-more p {
  margin-top: 8px;
}
:root.dark-mode .modal-section.modal-disclosure { background: rgba(255,255,255,.03); }
:root.dark-mode .modal-summary-icon { background: rgba(255,255,255,.05); color: #ffbc57; }

@media (min-width: 900px) {
  #infoModal.info-modal {
    width: min(94vw, 960px);
    max-height: min(86vh, 820px);
  }
  #infoModal .modal-body {
    max-height: calc(min(86vh, 820px) - 66px);
    padding: 18px 22px 20px;
  }
  #infoModal .modal-lead {
    max-width: 760px;
    margin-bottom: 16px;
  }
  .info-modal-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .info-modal-nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: calc(min(86vh, 820px) - 178px);
    overflow-y: auto;
    padding: 2px 2px 2px 0;
  }
  .info-nav-item {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
  }
  .info-nav-item:hover {
    background: rgba(23, 76, 63, .045);
  }
  .info-nav-item.is-active {
    border-color: rgba(228, 87, 46, .30);
    background: rgba(228, 87, 46, .08);
  }
  .info-nav-item .modal-summary-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .info-nav-item .modal-summary-title {
    font-size: 11.4px;
  }
  .info-nav-item .modal-summary-subtitle {
    font-size: 11px;
  }
  .info-modal-sections {
    min-width: 0;
  }
  .info-modal-sections .modal-section.modal-disclosure {
    display: none;
    margin-top: 0;
    background: transparent;
  }
  .info-modal-sections .modal-section.modal-disclosure.is-active {
    display: block;
  }
  .info-modal-sections .modal-disclosure summary {
    min-height: 58px;
    padding: 12px 14px;
    cursor: default;
  }
  .info-modal-sections .modal-disclosure summary::after {
    display: none;
  }
  .info-modal-sections .modal-summary-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .info-modal-sections .modal-summary-icon svg {
    width: 23px;
    height: 23px;
  }
  .info-modal-sections .modal-summary-title {
    font-size: 14px;
  }
  .info-modal-sections .modal-summary-subtitle {
    font-size: 12.5px;
  }
  .info-modal-sections .modal-section-body {
    padding: 4px 14px 16px;
  }
  .info-modal-sections .modal-section-body > svg {
    margin-top: 10px !important;
  }
  :root.dark-mode .info-nav-item:hover {
    background: rgba(255,255,255,.04);
  }
  :root.dark-mode .info-nav-item.is-active {
    border-color: rgba(255,188,87,.36);
    background: rgba(255,188,87,.08);
  }
}

@media (max-width: 720px) {
  /* Na telefonie gorny pasek pokazuje tylko wyszukiwarke i Warstwy; reszta meta-akcji
     (Widoki, Losowy szczyt, Moje szczyty, Jezyk, Motyw) zyje w menu jako pozycje
     .mobile-menu-extra, a profil terenu ma osobny widoczny skrot w prawej kolumnie.
     Inaczej kolumna ikon zachodzi na dolny panel nawigacji
     (Lokalizacja/Dom/Info), przez co polprzezroczyste tla ikon "rozjezdzaly sie". */
  #ctrlPresets,
  #ctrlSurprise,
  #ctrlFav,
  #ctrlCrowns,
  #langBtn,
  #themeBtn { display: none; }
  .mobile-menu-extra { display: flex !important; }
  #mobileProfileBtn.mobile-menu-extra { display: none !important; }
  .layer-menu-group.mobile-menu-extra { display: block !important; }
  .map-toolbar { gap: 8px; }
  .map-controls-right {
    bottom: auto;
    pointer-events: none;
  }
  .map-ctrl-group,
  .map-controls-right button {
    pointer-events: auto;
  }
  .map-ctrl-group {
    border-radius: 18px;
  }
  .leaflet-bottom.leaflet-right .leaflet-control-labgis {
    transform: scale(.82);
    transform-origin: top left;
    opacity: .82;
  }
  #panel.mobile-collapsed ~ .mobile-result-bar:not(.hidden) + .mobile-mode-pill {
    display: none !important;
  }
  .rank-panel {
    max-height: 31vh;
  }
  .rank-panel:not(.collapsed) {
    max-height: 42vh;
  }
  .rank-panel.collapsed {
    left: 12px;
    right: 72px;
    width: auto;
  }
  .rank-panel.collapsed #drawerHead {
    min-height: 50px;
  }
  .leaflet-popup-content {
    margin: 11px 12px;
  }
  .peak-popup-modern {
    min-width: min(210px, calc(100vw - 96px));
    max-width: min(238px, calc(100vw - 78px));
  }
  .peak-popup .popup-height { font-size: 22px; }
  .peak-popup .popup-name { font-size: 14px; }
  .popup-footer,
  .popup-actions { margin-top: 10px; }
  .peak-popup .nav-btn {
    min-height: 28px;
    padding: 5px 6px;
  }
  .result-custom #result {
    min-height: 170px;
  }
  body:not(.has-result) #result {
    min-height: 72px;
  }
  .modal-section.modal-disclosure {
    border-radius: 14px;
  }
  .modal-disclosure summary {
    min-height: 46px;
    font-size: 12.5px;
  }
  .modal-credit {
    align-items: flex-start;
  }
  .modal-credit-logo img {
    width: 132px;
    max-width: 36vw;
  }
}

/* ==========================================================================
   Pkt 3 audytu (2026-06-23): w trybie ciemnym panel i UI robią się głęboko
   zielone, a jasny podkład OSM/ortofoto zostaje jaskrawy — kontrast bije po
   oczach. Delikatnie przygaszamy SAM kafelkowy podkład (pane kafli). Markery,
   granice i prostokąt zaznaczenia są w pane'ach wektorowych, więc pozostają
   pełnej jasności i czytelne. Zabieg czysto kosmetyczny, bez dark-basemapu.
   ========================================================================== */
:root.dark-mode .leaflet-tile-pane {
  filter: brightness(0.82) saturate(0.9);
}

/* UX 2026-06-24: opisy ustawien pojawiaja sie po najechaniu (desktop / mysz).
 Zamiast klikalnej ikony pomocy pokazujemy opis automatycznie po najechaniu na wiersz
 ustawienia albo po wejsciu w kontrolke klawiatura (focus-within). Na dotyku (hover:none)
 zostaje klikalna ikona pomocy i dotychczasowe zachowanie z sekcji 25. */
@media (hover: hover) and (pointer: fine) {
 .control-card .help-dot,
 .custom-controls .help-dot { display: none; }
 .control-card .inline-control,
 .custom-controls .inline-control { position: relative; cursor: default; }
 .control-card .inline-control > .help-popover,
 .custom-controls .inline-control > .help-popover {
 position: absolute;
 top: calc(100% - 2px);
 left: 0; right: 0;
 width: auto;
 flex-basis: auto;
 margin-top: 0;
 z-index: 60;
 box-shadow: var(--sh-2);
 }
 .control-card .inline-control:hover > .help-popover,
 .control-card .inline-control:focus-within > .help-popover,
 .custom-controls .inline-control:hover > .help-popover,
 .custom-controls .inline-control:focus-within > .help-popover {
 display: block !important;
 }
}

/* ── A2: klikalne wspolrzedne w dymku (button) ────────────────────────── */
.peak-popup button.popup-coords {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.peak-popup button.popup-coords:hover,
.peak-popup button.popup-coords:focus-visible {
  background: var(--cream);
  border-color: var(--line);
  color: var(--ink);
  outline: none;
}

/* ── A1/A2: toast potwierdzajacy kopiowanie/udostepnianie ─────────────── */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--forest);
  color: #fffdf8;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  z-index: 4000;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.pwa-install-prompt {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 24px));
  padding: 10px 10px 10px 14px;
  color: #fff;
  background: rgba(23, 49, 43, .96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0,0,0,.3);
  transform: translateX(-50%);
}
.pwa-install-prompt b,
.pwa-install-prompt span { display: block; }
.pwa-install-prompt b { font-size: 13px; }
.pwa-install-prompt span { color: rgba(255,255,255,.72); font-size: 11.5px; }
.pwa-install-prompt button {
  min-height: 36px; border: 0; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pwa-install-add { padding: 0 13px; color: #17312b; background: #f2a541; }
.pwa-install-later { width: 36px; color: #fff; background: rgba(255,255,255,.12); }
/* Etap 4c (2026-07-06): na telefonie dolny brzeg jest zajety przez chipy kompozycji i pasek
   wyniku/karuzele — prompt PWA (do niedawna na dole) je zaslanial. Przenosimy go na gore,
   z marginesem po prawej na kolumne narzedzi (wyszukiwarka + Warstwy). */
@media (max-width: 720px) {
  .pwa-install-prompt {
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    left: 12px;
    right: 66px;
    width: auto;
    transform: none;
  }
}

.onboarding-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(8, 18, 15, .18);
}
.onboarding-card {
  position: fixed;
  width: min(320px, calc(100vw - 28px));
  padding: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
  transform: translate(-50%, 0);
}
.onboarding-card.above { transform: translate(-50%, -100%); }
.onboarding-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.35; font-weight: 700; }
.onboarding-actions { display: flex; justify-content: flex-end; gap: 8px; }
.onboarding-actions button {
  min-height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
.onboarding-actions [data-onboard-next] { color: #fff; background: var(--forest); border-color: var(--forest); }
.onboarding-target {
  position: relative;
  z-index: 1301 !important;
  outline: 3px solid rgba(242,165,65,.8);
  outline-offset: 4px;
  border-radius: 14px;
}

/* ── B6: kontekstowe menu prawego kliku na mapie ──────────────────────── */
.map-context-menu {
  position: absolute;
  z-index: 1200;
  min-width: 172px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.map-context-menu.hidden { display: none; }
.map-context-menu button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.map-context-menu button:hover,
.map-context-menu button:focus-visible {
  background: var(--cream);
  outline: none;
}

/* ── A5: podswietlenie karty wyniku po przeliczeniu zmienionym filtrem ── */
@keyframes resultUpdatedFlash {
  0%   { box-shadow: 0 0 0 0 rgba(35, 107, 88, 0.0); background: transparent; }
  25%  { box-shadow: 0 0 0 2px rgba(35, 107, 88, 0.45); background: rgba(35, 107, 88, 0.07); }
  100% { box-shadow: 0 0 0 0 rgba(35, 107, 88, 0.0); background: transparent; }
}
.result-updated {
  animation: resultUpdatedFlash 0.85s ease;
  border-radius: var(--r-md);
}
@media (prefers-reduced-motion: reduce) {
  .app-toast { transition: opacity 0.2s ease; transform: translateX(-50%); }
  .app-toast.show { transform: translateX(-50%); }
  .result-updated { animation: none; }
}

/* =====================================================================
   Nowe funkcje (2026-06-25): jezyk, "Zaskocz mnie", ulubione, share card
   ===================================================================== */

/* Przelacznik jezyka w pasku narzedzi */
.lang-btn { min-width: 38px; justify-content: center; }
.lang-btn span { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; }

/* Licznik ulubionych (badge na ikonie gwiazdki) */
#ctrlFav { position: relative; }
.fav-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--accent); border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.fav-count.hidden { display: none; }

/* Gwiazdka ulubionych w dymku */
.popup-fav-btn {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--cream);
  width: 30px; height: 30px; min-width: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; margin-left: auto; flex-shrink: 0;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.popup-fav-btn:hover { background: var(--line); }
.popup-fav-btn:active { transform: scale(0.92); }
.popup-fav-btn .fav-star { font-size: 16px; line-height: 1; color: var(--muted); }
.popup-fav-btn.is-fav { background: rgba(228, 87, 46, 0.12); border-color: var(--accent); }
.popup-fav-btn.is-fav .fav-star { color: var(--accent); }
:root.dark-mode .popup-fav-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
:root.dark-mode .popup-fav-btn.is-fav { background: rgba(255,188,87,0.16); border-color: #ffbc57; }
:root.dark-mode .popup-fav-btn.is-fav .fav-star { color: #ffbc57; }

/* Menu „⋮": gwiazdka zostaje szybka akcja, obok ⋮ rozwija rzad akcji per-szczyt. */
.popup-share { position: relative; display: inline-flex; flex-shrink: 0; }
.popup-more-btn {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--cream);
  width: 30px; height: 30px; min-width: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.popup-more-btn:hover { background: var(--line); }
.popup-more-btn:active { transform: scale(0.92); }
.popup-more-dots { font-size: 19px; line-height: 1; color: var(--muted); }
:root.dark-mode .popup-more-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
/* Popover wysuwa sie w LEWO od „⋮", w jednym rzedzie z przyciskiem — pozycja absolutna,
   wiec NIE zmienia rozmiaru dymka (wczesniej margin-bottom rozpychalo popup w pionie). */
.popup-share-row {
  position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; gap: 6px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 8px 22px rgba(23,76,63,.22);
}
.popup-share-row.hidden { display: none; }
:root.dark-mode .popup-share-row { background: #14211c; border-color: rgba(255,255,255,0.12); }
.popup-share-act {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); background: var(--cream);
  width: 32px; height: 32px; min-width: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--muted);
  transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s;
}
.popup-share-act svg { width: 17px; height: 17px; }
.popup-share-act:hover { background: var(--paper); border-color: var(--forest-2); color: var(--forest); }
.popup-share-act:active { transform: scale(0.92); }
:root.dark-mode .popup-share-act { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
:root.dark-mode .popup-share-act:hover { color: #cfeede; border-color: #cfeede; }

/* Modal "Moje szczyty" — szerokosc dopasowana do zawartosci (paski metryk), nie za szeroka */
.fav-modal { max-width: 720px; }
/* Etap 4c: hub „Moje" — jeden panel z zakladkami Ulubione/Korony. */
.my-modal { max-width: 720px; }
.my-tabs { display: flex; gap: 4px; margin: 4px 0 2px; padding: 0 2px; }
.my-tab {
  flex: 0 0 auto; padding: 8px 16px; min-height: 38px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.my-tab:hover { color: var(--ink); }
.my-tab.is-active { color: var(--forest); border-bottom-color: var(--forest); }
:root.dark-mode .my-tab.is-active { color: var(--forest-2); border-bottom-color: var(--forest-2); }
.my-panel.hidden { display: none; }
.fav-counter { margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.fav-list { margin: 10px 0 0; padding: 0; }
.fav-empty { color: var(--muted); font-size: 13.5px; padding: 14px 4px; text-align: center; }

/* Tabela "Moje szczyty" — komorki metryk z tlem wg skali parametru. */
.fav-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--line); }
.fav-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fav-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--cream); color: var(--muted);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  text-align: center; padding: 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fav-table thead th.fav-th-name, .fav-table thead th.fav-th-loc { text-align: left; }
.fav-table tbody td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.fav-table tbody tr:last-child td { border-bottom: 0; }
.fav-row { cursor: pointer; transition: background 0.12s; }
.fav-row:hover td:not(.fav-td-metric) { background: var(--line); }
.fav-row:hover .fav-td-metric { filter: brightness(0.97); }
.fav-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fav-td-name { min-width: 130px; }
.fav-name { display: block; font-weight: 750; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.fav-coord { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.fav-td-loc { color: var(--muted); font-size: 12px; min-width: 150px; }
.fav-td-h { text-align: right; font-weight: 800; font-size: 14px; color: var(--accent); white-space: nowrap; }
.fav-unit { font-weight: 600; font-size: 11px; color: var(--muted); }
.fav-td-metric { text-align: center; white-space: nowrap; }
.fav-metric-val { font-weight: 700; font-size: 12px; color: #1d2e28; }
.fav-cell-empty { color: var(--muted); opacity: 0.6; }
.fav-td-del { text-align: center; width: 34px; }
.fav-item-del {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--muted); font-size: 14px; font-weight: 700;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.fav-item-del:hover { background: rgba(228,87,46,0.14); color: var(--accent); }
.fav-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fav-actions .gpx-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.fav-clear { color: var(--accent); }
:root.dark-mode .fav-table-wrap { border-color: rgba(255,255,255,0.1); }
:root.dark-mode .fav-table thead th { background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.1); }
:root.dark-mode .fav-table tbody td { border-bottom-color: rgba(255,255,255,0.08); }
:root.dark-mode .fav-row:hover td:not(.fav-td-metric) { background: rgba(255,255,255,0.06); }
/* W trybie ciemnym tlo komorek metryk jest pokolorowane, wiec wymuszamy czytelny ciemny tekst. */
:root.dark-mode .fav-metric-val { color: #11201b; }

@media (max-width: 720px) {
  .fav-table-wrap { overflow-x: visible; }
  .fav-table { table-layout: fixed; font-size: 12px; }
  .fav-table th:nth-child(4),
  .fav-table th:nth-child(5),
  .fav-table th:nth-child(6),
  .fav-table td:nth-child(4),
  .fav-table td:nth-child(5),
  .fav-table td:nth-child(6) { display: none; }
  .fav-table thead th,
  .fav-table tbody td { padding: 7px 6px; }
  .fav-td-name { min-width: 0; width: auto; }
  .fav-name { max-width: 100%; font-size: 12.5px; }
  .fav-coord { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  .fav-td-loc { min-width: 0; width: 86px; font-size: 10.5px; line-height: 1.25; }
  .fav-td-h { width: 62px; font-size: 12.5px; }
  .fav-td-del { width: 30px; }
}

/* ───────── F1: wysokość pod kursorem ───────── */
.map-controls-right button.is-active {
  background: var(--accent); color: #fff;
}
.map-controls-right button.is-active:hover { background: var(--accent); }
:root.dark-mode .map-controls-right button.is-active { background: var(--accent); color: #fff; }
body.elev-probe-active .leaflet-container,
body.elev-probe-active .leaflet-interactive { cursor: crosshair !important; }
.elev-probe-popup { text-align: center; min-width: 96px; }
.elev-probe-h { display: block; font-size: 15px; color: var(--accent); }
.elev-probe-coords { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.elev-probe-src { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); opacity: .8; }
.elev-probe-err { font-size: 12px; color: var(--muted); }
.map-answer-card { display: grid; gap: 7px; min-width: 190px; }
.map-answer-kicker { color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.map-answer-card b { color: var(--height); font-size: 18px; line-height: 1.05; }
.map-answer-card span { color: var(--muted); font-size: 12px; }
/* Etap 4: wiersz "najwyzszy w 10 km" — mniejsza wysokosc, klikalna nazwa szczytu. */
.map-answer-peak b { font-size: 12.5px; color: var(--height); }
.map-answer-peak-btn {
  padding: 0; border: 0; background: none; color: var(--forest-2);
  font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; text-decoration: underline;
}
.map-answer-radius-btn {
  min-height: 34px; padding: 0 10px; color: #fff; background: var(--forest);
  border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
}
/* Etap 4c: wtorna akcja karty tap-odpowiedzi — profil terenu stad. */
.map-answer-profile-btn {
  min-height: 32px; padding: 0 10px; color: var(--forest-2); background: transparent;
  border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.map-answer-profile-btn:hover { border-color: var(--forest); }
.edit-handle {
  display: grid; place-items: center;
  width: 14px !important; height: 14px !important;
  margin-left: -7px !important; margin-top: -7px !important;
  background: rgba(255,255,255,.96);
  border: 2px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 3px 9px rgba(0,0,0,.22);
  cursor: grab;
}
.edit-handle:active { cursor: grabbing; }
.edit-handle span {
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--accent);
}
:root.dark-mode .edit-handle { background: #14211c; border-color: #ffbc57; }
:root.dark-mode .edit-handle span { background: #ffbc57; }
body.editing-geometry .leaflet-container { cursor: grabbing !important; }

/* ───────── F2: rysowanie wielokąta ───────── */
body.poly-drawing .leaflet-container { cursor: crosshair !important; }
.adv-tools { margin-top: 10px; }
.adv-tools > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0;
  user-select: none;
}
.adv-tools > summary::-webkit-details-marker { display: none; }
.adv-tools > summary::before {
  content: '▸'; font-size: 10px; transition: transform 0.15s; display: inline-block;
}
.adv-tools[open] > summary::before { transform: rotate(90deg); }
.adv-tools-body { padding: 6px 0 2px; }
.poly-draw-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.poly-draw-btn svg { width: 16px; height: 16px; }
.poly-draw-btn.is-active {
  color: var(--accent); background: rgba(228, 87, 46, 0.12); border-color: rgba(228, 87, 46, 0.35);
}
.adv-tools-help { display: block; margin-top: 7px; font-size: 11px; color: var(--muted); line-height: 1.4; }

/* Przycisk „Zakoncz obszar” widoczny tylko podczas rysowania wielokata (geometria z split-buttona). */
.poly-finish-only { display: none; margin-top: 9px; }
body.poly-drawing .poly-finish-only { display: flex; }
body.poly-drawing #rectCtrl .rect-state,
body.poly-drawing #rectCtrl #rectArmBtn { display: none; }

/* ==== Pasek kompozycji (mobile) + "Szukaj w tym widoku" ====
   Na desktopie gotowe widoki sa w przycisku "Widoki" w gornym toolbarze. Chipy zostaja
   tylko na telefonie nad zwinietym bottom sheetem. */
.mobile-preset-bar { display: none; }
.view-search-btn { display: none; }

.preset-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 38px; padding: 8px 13px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.94); border: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1); cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.preset-chip svg { width: 15px; height: 15px; flex: 0 0 auto; }
.preset-chip:hover { border-color: var(--forest); }
.preset-chip.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
:root.dark-mode .preset-chip { background: rgba(16, 28, 24, 0.9); border-color: rgba(255, 255, 255, 0.08); }
:root.dark-mode .preset-chip.is-active { background: var(--forest-2); border-color: var(--forest-2); color: #fff; }

body.rect-armed .mobile-preset-bar,
body.circle-armed .mobile-preset-bar,
body.poly-drawing .mobile-preset-bar { display: none !important; }

@media (min-width: 721px) {
  .view-search-btn {
    position: fixed; top: 64px; left: calc(var(--panel-width) + 40px);
    display: flex; align-items: center; gap: 7px;
    min-height: 38px; padding: 8px 14px; border-radius: 999px;
    background: rgba(255, 253, 248, 0.96); border: 1px solid var(--accent);
    color: var(--accent); font: inherit; font-size: 13px; font-weight: 800;
    box-shadow: var(--sh-2); cursor: pointer; white-space: nowrap; z-index: 813;
  }
  .view-search-btn.hidden { display: none; }
  .view-search-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
  :root.dark-mode .view-search-btn { background: rgba(16, 28, 24, 0.94); }
}

@media (max-width: 720px) {
  .mobile-preset-bar {
    position: fixed; left: 8px; right: 8px;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    display: none; gap: 7px; overflow-x: auto; padding: 3px 1px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
    z-index: 812;
  }
  .mobile-preset-bar::-webkit-scrollbar { display: none; }
  #panel.mobile-collapsed ~ .mobile-preset-bar { display: flex; }

  .view-search-btn {
    position: fixed; top: max(60px, calc(env(safe-area-inset-top) + 56px)); left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 9px 15px; border-radius: 999px;
    background: rgba(255, 253, 248, 0.96); border: 1px solid var(--accent);
    color: var(--accent); font: inherit; font-size: 13px; font-weight: 800;
    box-shadow: var(--sh-2); cursor: pointer; white-space: nowrap; z-index: 813;
  }
  .view-search-btn.hidden { display: none; }
  .view-search-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
  :root.dark-mode .view-search-btn { background: rgba(16, 28, 24, 0.94); }

  /* Pasek wyniku i legenda ustepuja miejsca pasowi kompozycji (nadpisuje wczesniejsze bottom). */
  #panel.mobile-collapsed ~ .mobile-result-bar:not(.hidden) { bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .mobile-result-carousel:not(.hidden) { bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .mobile-draw-guide:not(.hidden) { bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
  #panel.mobile-collapsed ~ .floating-legend { bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }

  /* Pigulka trybu na telefonie jest zbedna: gdy panel zwiniety pokazujemy chipy,
     a podczas rysowania stan komunikuje przewodnik .mobile-draw-guide (etap 2.5 usunal
     dublujaca pigulke "Zaznaczanie aktywne" wyswietlana rownoczesnie z przewodnikiem). */
  #panel.mobile-collapsed ~ .mobile-mode-pill:not(.hidden) { display: none; }

  /* Plywajaca legenda nie moze nachodzic na pasek zwyciezcy (etap 2.5): gdy pasek
     jest widoczny (body.has-mobile-result), legenda wedruje nad niego. */
  body.has-mobile-result #panel.mobile-collapsed ~ .floating-legend { bottom: 200px; }
  body.has-mobile-carousel #panel.mobile-collapsed ~ .floating-legend { bottom: 214px; }
  body.has-mobile-result #panel.mobile-collapsed ~ .mobile-preset-bar,
  body.has-mobile-carousel #panel.mobile-collapsed ~ .mobile-preset-bar {
    display: none;
  }
  body.has-mobile-result #panel.mobile-collapsed ~ .mobile-result-bar:not(.hidden),
  body.has-mobile-carousel #panel.mobile-collapsed ~ .mobile-result-carousel:not(.hidden) {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-result #panel.mobile-collapsed ~ .floating-legend { bottom: 148px; }
  body.has-mobile-carousel #panel.mobile-collapsed ~ .floating-legend { bottom: 156px; }

  /* Zwinieta legenda-chip ma byc jedna linia: X do zamykania dopiero po rozwinieciu
     (44px przycisk zawijal sie pod tytul i wygladal jak usterka). */
  .floating-legend:not(.is-expanded) .legend-close { display: none; }
}

/* ==== Etap 2 redesignu (2026-07-05): sekcja ustawien — pytania zamiast parametrow ====
   Segment "Ile szczytow" + kafelki ikonowe "Ktore szczyty" sterujace ukrytymi selectami;
   dominacja/widocznosc/odludnosc schowane w zwijanych "Filtrach zaawansowanych". */
#customCtrl .field-label { display: block; }
.seg-control {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 7px 0 2px; border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; background: var(--paper);
}
.seg-control button {
  min-height: 38px; padding: 8px 0;
  background: transparent; border: 0; border-left: 1px solid var(--line);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.seg-control button:first-child { border-left: 0; }
.seg-control button:hover { color: var(--ink); }
.seg-control button.is-active { background: var(--forest); color: #fff; }
:root.dark-mode .seg-control { background: rgba(255, 255, 255, 0.03); }
:root.dark-mode .seg-control button.is-active { background: var(--forest-2); }

.order-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 7px 0 2px; }
.order-tiles button {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink);
  cursor: pointer; text-align: left;
}
.order-tiles button svg {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.order-tiles button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-tiles button:hover { border-color: var(--forest); }
.order-tiles button.is-active { background: var(--forest); border-color: var(--forest); color: #fff; }
:root.dark-mode .order-tiles button { background: rgba(255, 255, 255, 0.03); }
:root.dark-mode .order-tiles button.is-active { background: var(--forest-2); border-color: var(--forest-2); color: #fff; }

#advFilters { margin-top: 12px; }
#advFilters > summary small.adv-filters-state {
  margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--muted);
}
#advFilters .adv-tools-body .inline-control:first-child { margin-top: 2px; }

/* ==== Etap 3 (2026-07-05): audyt desktopu — panel, ustawienia, ciemna mapa ==== */

/* Karta wyników wypełnia całą wolną wysokość panelu (koniec z pustką pod kartą przy
   jednocześnie ściśniętym rankingu). flex-basis 0 = karta dostaje dokładnie wolne miejsce,
   nadmiar listy przewija się WEWNĄTRZ karty — ustawienia pozostają widoczne (decyzja
   klienta: przewija się karta wyników, nie cały panel). */
@media (min-width: 721px) {
  #result { flex: 1 1 0; min-height: 200px; max-height: none; }
  .result-custom #result { max-height: none; }

  /* Deduplikacja akcji rysowania: karta stanu w ustawieniach pokazuje się dopiero
     PODCZAS zaznaczania (status + Anuluj / Zakończ obszar). Start rysowania ma jedno
     oczywiste miejsce: kafelek "Zaznacz prostokątem" u góry panelu. */
  body.mode-rect #rectCtrl { display: none; }
  body.rect-armed #rectCtrl,
  body.circle-armed #rectCtrl,
  body.poly-drawing #rectCtrl { display: block; }
}

/* Wiersz "Filtry zaawansowane": stan filtrów dosunięty do prawej, większy obszar kliku. */
#advFilters > summary { padding: 6px 0; }
#advFilters > summary .adv-filters-state { margin-left: auto; padding-left: 10px; text-align: right; }

/* Tryb ciemny obejmuje też podkład OSM (filtr tylko na kaflach OSM; ortofoto,
   cieniowanie i mapy GUGiK pozostają nietknięte). */
:root.dark-mode .osm-tiles { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.55); }

/* ==== Profil terenu na telefonie (2026-07-05) ==== */
/* Przycisk "Zakończ" w przewodniku rysowania: tylko na dotyku (na desktopie linię kończy
   dwuklik / prawy przycisk). Wyróżniony akcentem, bo to główna akcja kroku. */
.profile-draw-guide #profileDrawFinish { display: none; }
@media (max-width: 720px) {
  .profile-draw-guide #profileDrawFinish {
    display: inline-block;
    background: var(--accent); border-color: var(--accent);
    min-height: 34px; padding: 6px 14px;
  }
  /* Podczas rysowania przewodnik ma być nad kciukiem, nie pod górnym paskiem. */
  .profile-draw-guide { max-width: calc(100vw - 16px); white-space: nowrap; }
}
/* Chipy kompozycji i "Szukaj w tym widoku" nie mogą kolidować z aktywnym profilem
   (klik w chip zmieniałby tryb w trakcie rysowania linii). */
body.profile-open .mobile-preset-bar,
body.profile-open .view-search-btn { display: none !important; }

/* ==== Etap 4 (2026-07-06): Korony — checklisty zdobywcy ==== */
.crowns-list { display: grid; gap: 10px; }
.crowns-loading { color: var(--muted); font-size: 13px; }
.crown-section { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
:root.dark-mode .crown-section { background: rgba(255, 255, 255, 0.03); }
.crown-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; background: transparent;
  font: inherit; text-align: left; cursor: pointer;
}
.crown-head-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.crown-head-main b { font-size: 13.5px; color: var(--ink); }
.crown-head-main small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.crown-progress {
  flex: 0 0 90px; height: 8px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.crown-progress span { display: block; height: 100%; border-radius: 99px; background: var(--forest-2); }
.crown-section.is-open .accordion-chevron svg { transform: rotate(180deg); }
.crown-head .accordion-chevron svg { width: 15px; height: 15px; color: var(--muted); transition: transform .15s; }
.crown-body { padding: 0 10px 12px; }
.crown-filter {
  width: 100%; box-sizing: border-box; margin: 2px 0 8px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font: inherit; font-size: 13px; color: var(--ink);
}
.crown-list {
  list-style: none; margin: 0; padding: 0;
  max-height: min(44vh, 380px); overflow-y: auto;
}
.crown-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; border-bottom: 1px solid var(--line);
}
.crown-row:last-child { border-bottom: 0; }
.crown-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.crown-row-main b { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crown-row-main small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crown-row.is-done .crown-row-main b { color: var(--forest-2); }
.crown-check { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.crown-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.crown-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 8px;
  background: var(--paper); transition: background .12s, border-color .12s;
}
.crown-check input:checked + .crown-tick { background: var(--forest); border-color: var(--forest); }
.crown-check input:checked + .crown-tick::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.crown-check input:focus-visible + .crown-tick { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.crown-show {
  flex: 0 0 auto; padding: 6px 10px; min-height: 32px;
  border: 1px solid var(--line); border-radius: 9px; background: transparent;
  font: inherit; font-size: 11px; font-weight: 800; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
}
.crown-show:hover { border-color: var(--forest); color: var(--forest); }
.crown-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
/* Etap 4c: GPS „Potwierdź na szczycie" w wierszu korony. */
.crown-gps {
  flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 9px; background: transparent;
  color: var(--muted); cursor: pointer;
}
.crown-gps svg { width: 16px; height: 16px; }
.crown-gps:hover { border-color: var(--forest); color: var(--forest); }
.crown-gps.is-locating { color: var(--accent); animation: crownGpsPulse 1s ease-in-out infinite; }
@keyframes crownGpsPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.crown-gps-badge {
  margin-left: 7px; padding: 1px 6px; border-radius: 99px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  color: #fff; background: var(--forest-2); vertical-align: middle;
}

/* Etap 4b (2026-07-06): przycisk resetu ustawien w akordeonie Ustawienia. */
.reset-defaults-btn { width: 100%; margin-top: 10px; }

/* ==== Audyt live interfejsu (2026-07-07): spokojniejsze warstwy i mobile ==== */
:root {
  --fs-body: 13.5px;
  --fs-ui: 13px;
  --fs-label: 12px;
  --fs-meta: 12px;
  --fs-micro: 8.5px;
  --shadow: 0 16px 34px -14px rgba(18, 49, 42, 0.28);
  --sh-1: 0 1px 3px rgba(18, 49, 42, 0.12);
  --sh-2: 0 10px 24px -14px rgba(18, 49, 42, 0.30);
}
:root.dark-mode {
  --shadow: 0 18px 38px -16px rgba(0, 0, 0, 0.62);
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.28);
  --sh-2: 0 12px 28px -16px rgba(0, 0, 0, 0.64);
}
body { font-size: var(--fs-body); }
#panel {
  border-color: rgba(23, 76, 63, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root.dark-mode #panel { border-color: rgba(255, 255, 255, 0.06); }
#panelScroll { font-size: var(--fs-body); line-height: 1.42; }
.control-card,
.panel-accordion {
  background: transparent;
  box-shadow: none;
}
.panel-accordion summary {
  box-shadow: none;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
}
.field-label,
.inline-control,
.hint,
.rect-state small,
.category-summary span,
.foot,
.result-row .meta,
.rank-jump .zone,
.peak-popup .popup-meta,
.floating-legend .legend-chip,
.mobile-result-main small,
.mobile-card-main small {
  font-size: var(--fs-meta);
}
.panel-omni-btn,
.draw-primary-label,
.panel-accordion summary b,
.seg-control button,
.order-tiles button,
.result-row .nm,
.result-row .hh,
.category-summary strong,
.crown-head-main b {
  font-size: var(--fs-ui);
}
.panel-accordion summary small,
#advFilters > summary small.adv-filters-state,
.adv-tools-help,
.crown-head-main small,
.crown-row-main small {
  font-size: var(--fs-label);
}
.map-toolbar button,
.layer-menu button,
.more-menu button,
.map-controls-right button,
.preset-chip,
.view-search-btn,
.map-status,
.hypso-loading-chip,
.mobile-result-bar,
.mobile-result-card,
.mobile-draw-guide {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.map-toolbar button,
.map-controls-right button,
.preset-chip {
  box-shadow: var(--sh-1);
  border-width: 0;
}
:root.dark-mode .map-toolbar button,
:root.dark-mode .map-controls-right button,
:root.dark-mode .preset-chip {
  border-color: rgba(255, 255, 255, 0.07);
}
.map-ctrl-group {
  box-shadow: var(--sh-1);
  border-color: rgba(23, 76, 63, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.layer-menu,
.more-menu,
.preset-menu,
.floating-legend {
  border-color: rgba(23, 76, 63, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:root.dark-mode .layer-menu,
:root.dark-mode .more-menu,
:root.dark-mode .preset-menu,
:root.dark-mode .floating-legend,
:root.dark-mode .map-ctrl-group {
  border-color: rgba(255, 255, 255, 0.06);
}
.more-menu button,
.layer-menu button,
.preset-menu .preset-menu-item {
  box-shadow: none;
}
.view-search-btn {
  box-shadow: var(--sh-2);
}
.panel-omni-btn,
.clear-map-btn {
  box-shadow: none;
}
.mobile-result-bar,
.mobile-result-card,
.map-status,
.hypso-loading-chip {
  border-width: 0;
}
.mobile-result-card,
.mobile-result-bar {
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
}
.mobile-result-card.is-active {
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(242, 165, 65, .35);
}
.desktop-tool-label { display: inline; }
.mobile-tool-label { display: none; }

@media (max-width: 720px) {
  .map-toolbar > button,
  .map-toolbar > .layer-menu-wrap > button {
    width: 50px;
    min-height: 50px;
    padding: 4px 3px;
    flex-direction: column;
    gap: 2px;
  }
  .map-toolbar > button span,
  .map-toolbar > .layer-menu-wrap > button span {
    display: block;
    max-width: 44px;
    overflow: hidden;
    color: currentColor;
    font-size: var(--fs-micro);
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #layersBtn .desktop-tool-label { display: none; }
  #layersBtn .mobile-tool-label { display: block; }
  .map-controls-right {
    top: max(134px, calc(env(safe-area-inset-top) + 126px));
    right: 9px;
  }
  .map-controls-right button {
    width: 50px;
    height: 50px;
    padding: 4px 3px;
    flex-direction: column;
    gap: 3px;
  }
  .map-controls-right svg {
    width: 18px;
    height: 18px;
  }
  .map-controls-right .ctrl-label {
    display: block;
    max-width: 44px;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .map-controls-right .ctrl-label::after {
    content: attr(data-mobile-label);
    color: currentColor;
    font-size: var(--fs-micro);
    font-weight: 850;
    line-height: 1;
  }
  .pwa-install-prompt {
    top: auto;
    left: 10px;
    right: 10px;
    bottom: calc(116px + env(safe-area-inset-bottom, 0px));
    width: auto;
    transform: none;
  }
  body.has-mobile-result .pwa-install-prompt,
  body.has-mobile-carousel .pwa-install-prompt,
  body.map-answer-open .pwa-install-prompt {
    display: none !important;
  }
  body.has-mobile-result #panel.mobile-collapsed ~ .floating-legend,
  body.has-mobile-carousel #panel.mobile-collapsed ~ .floating-legend,
  body.map-answer-open #panel.mobile-collapsed ~ .floating-legend {
    display: none !important;
  }
  body.map-answer-open #panel.mobile-collapsed ~ .mobile-result-bar:not(.hidden),
  body.map-answer-open #panel.mobile-collapsed ~ .mobile-result-carousel:not(.hidden) {
    display: none !important;
  }
  .mobile-card-main small,
  .mobile-result-main small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (max-width: 390px) {
  .map-toolbar > button,
  .map-toolbar > .layer-menu-wrap > button,
  .map-controls-right button {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
}

/* ==== Audyt interfejsu iteracja 3 (2026-07-07): pierwszy kontakt i zasieg kciuka ==== */
#settingsPanel.panel-accordion {
  margin-top: 0;
  border-top: 0;
}
#settingsPanel .panel-accordion-body {
  display: grid;
  gap: 10px;
  padding-bottom: 2px;
}
#customCtrl.custom-controls {
  padding: 8px 0 10px;
  border-top: 0;
}
#rectCtrl.control-card,
#radiusCtrl.control-card,
#catCtrl.control-card {
  border-top-color: rgba(23, 76, 63, .08);
}
#advFilters {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(23, 76, 63, .10);
}
:root.dark-mode #advFilters { border-top-color: rgba(255, 255, 255, .07); }
#advFilters > summary {
  min-height: 38px;
  padding: 7px 0;
  font-size: var(--fs-ui);
}
.adv-tools-body {
  padding: 4px 0 0;
}
.seg-control,
.order-tiles button {
  box-shadow: none;
}
#result,
.result-share-menu,
.help-popover,
.rank-panel,
.layer-menu,
.more-menu,
.preset-menu,
.floating-legend {
  border-width: 0;
}
#result {
  box-shadow: var(--sh-1);
}
.layer-menu,
.more-menu,
.preset-menu,
.floating-legend {
  box-shadow: var(--sh-2);
}
.winner-kicker,
.result-row .jump,
.layer-opacity-label,
.floating-legend .legend-title,
.mobile-expanded-ranking-title,
.map-answer-kicker,
.peak-popup .popup-coords,
.popup-coords,
.fav-coord,
.fav-td-loc,
.result-updated,
.crown-gps-badge {
  font-size: var(--fs-meta);
}
.layer-menu-group,
.cat-mode-btn span,
.switch-row small,
.small,
.rect-state small,
.result-note,
.rank-jump .height,
.metric-bar-val,
.metric-bars-compact .metric-bar-label,
.metric-bars-compact .metric-bar-val,
.adv-tools-help,
.crown-show {
  font-size: var(--fs-label);
}
.start-placeholder {
  align-items: flex-start;
}
.start-placeholder-main {
  display: grid;
  gap: 7px;
}
.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}
.start-actions button {
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 10px;
  background: var(--forest);
  color: #fff;
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 800;
  cursor: pointer;
}
.start-actions button + button {
  background: rgba(23, 76, 63, .10);
  color: var(--forest);
}
:root.dark-mode .start-actions button + button {
  background: rgba(255, 255, 255, .08);
  color: var(--forest);
}
@media (min-width: 721px) {
  .map-controls-right {
    bottom: 74px;
    gap: 0;
  }
  .map-controls-right .tools-group {
    gap: 3px;
    padding: 5px;
  }
  .map-controls-right button {
    min-width: 118px;
    min-height: 34px;
  }
  .map-controls-right .map-zoom-btn {
    justify-content: flex-start;
  }
  .map-controls-right .ctrl-sep-tools {
    width: calc(100% - 14px);
    margin: 7px auto;
  }
}
.mobile-thumb-actions {
  display: none;
}
@media (max-width: 720px) {
  #ctrlZoomIn,
  #ctrlZoomOut {
    display: none !important;
  }
  .mobile-thumb-actions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
    z-index: 814;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #panel.mobile-collapsed ~ .mobile-thumb-actions {
    display: grid;
  }
  .mobile-thumb-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 8px 12px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 253, 248, .96);
    color: var(--ink);
    box-shadow: var(--sh-2);
    font: inherit;
    font-size: var(--fs-ui);
    font-weight: 850;
    cursor: pointer;
  }
  .mobile-thumb-actions svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-thumb-actions button[aria-pressed="true"],
  .mobile-thumb-actions button.is-locating {
    background: var(--forest);
    color: #fff;
  }
  :root.dark-mode .mobile-thumb-actions button {
    background: rgba(16, 28, 24, .94);
  }
  body.has-mobile-result #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.has-mobile-carousel #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.map-answer-open #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.rect-armed #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.circle-armed #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.poly-drawing #panel.mobile-collapsed ~ .mobile-thumb-actions,
  body.profile-open #panel.mobile-collapsed ~ .mobile-thumb-actions {
    display: none !important;
  }
  #panel.mobile-collapsed ~ .mobile-preset-bar {
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  }
  body.has-mobile-result #panel.mobile-collapsed ~ .mobile-preset-bar,
  body.has-mobile-carousel #panel.mobile-collapsed ~ .mobile-preset-bar {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  .pwa-install-prompt {
    bottom: calc(166px + env(safe-area-inset-bottom, 0px));
  }
  .layer-menu {
    width: min(320px, calc(100vw - 74px));
    max-width: min(320px, calc(100vw - 74px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .layer-menu-group,
  .layer-opacity-control,
  #gridBtn,
  .mobile-menu-extra:not(#mobileLangBtn):not(#mobileThemeBtn) {
    grid-column: 1 / -1;
  }
  .layer-row[data-layer-key] {
    min-height: 0;
  }
  .layer-row[data-layer-key] .layer-menu-item {
    min-height: 54px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 7px 5px;
    text-align: center;
  }
  .layer-row[data-layer-key] .layer-menu-item span {
    max-width: 100%;
  }
  #mobileLangBtn,
  #mobileThemeBtn {
    justify-content: center;
  }
}

/* ==== Audyt interfejsu iteracja 4 (2026-07-07): domkniecie panelu, mobile i menu ==== */
#customCtrl.custom-controls {
  display: grid;
  gap: 10px;
  padding: 6px 0 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#customCtrl.custom-controls #advFilters {
  margin-top: 2px;
  padding-top: 10px;
}

@media (min-width: 721px) {
  .map-controls-right .ctrl-sep-tools {
    width: calc(100% - 12px);
    height: 2px;
    margin: 10px auto;
    background: linear-gradient(90deg, transparent, rgba(23, 76, 63, .22), transparent);
  }
  :root.dark-mode .map-controls-right .ctrl-sep-tools {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  }
}

@media (max-width: 720px) {
  #ctrlSearchBtn,
  #ctrlLocate {
    display: none !important;
  }
  .map-toolbar > .layer-menu-wrap > button {
    width: 46px;
    min-height: 46px;
  }
  .map-controls-right {
    top: max(72px, calc(env(safe-area-inset-top) + 64px));
    right: 8px;
  }
  .map-controls-right button {
    width: 46px;
    height: 46px;
    min-height: 46px;
  }
  .map-controls-right .tools-group {
    gap: 7px;
  }
  .layer-menu {
    width: min(330px, calc(100vw - 72px));
    max-width: min(330px, calc(100vw - 72px));
    max-height: min(64dvh, calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    align-content: start;
    padding-bottom: 8px;
  }
  .layer-menu-group.mobile-base-heading {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: -2px -2px 0;
    padding: 7px 2px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 0;
  }
  .layer-menu-group.mobile-tools-heading {
    margin-top: 8px;
  }
  .mobile-menu-settings.mobile-menu-extra {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    position: static;
    z-index: 4;
    margin: 8px 0 0;
    padding-top: 7px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 -10px 22px -20px rgba(0, 0, 0, .42);
  }
  .mobile-menu-settings .mobile-settings-heading {
    grid-column: 1 / -1;
    margin: 0;
    padding: 7px 2px 0;
    background: transparent;
  }
  #mobileLangBtn,
  #mobileThemeBtn {
    min-height: 48px;
    justify-content: center;
  }
  :root.dark-mode .layer-menu-group.mobile-base-heading,
  :root.dark-mode .mobile-menu-settings.mobile-menu-extra {
    background: rgba(16, 28, 24, .96);
  }
}