:root {
      --color-text: #172026;
      --color-muted: #66737f;
      --color-border: #d7e0e7;
      --color-border-soft: #edf1f4;
      --color-surface: #ffffff;
      --color-surface-muted: #f6f8fa;
      --color-primary: #0f6b5b;
      --color-primary-dark: #0b3d35;
      --color-primary-strong: #0b5fff;
      --color-secondary: #334155;
      --shadow-panel: 0 14px 36px rgb(17 24 39 / 18%);
      --radius: 8px;
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      color: var(--color-text);
      font-family: Arial, Helvetica, sans-serif;
      background: #eef2f5;
      font-size: 14px;
    }
    .top-nav {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 52px;
      padding: 0 14px 0 16px;
      border-bottom: 1px solid #082f2a;
      background: var(--color-primary-dark);
      box-shadow: 0 3px 12px rgb(23 32 38 / 12%);
    }
    .top-nav__items {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .top-nav__updates {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 12px;
      align-items: center;
      color: rgb(255 255 255 / 86%);
      font-size: 12px;
      font-weight: 700;
    }
    .top-nav__updates span {
      white-space: nowrap;
    }
    .top-nav__updates strong {
      color: #fff;
      font-weight: 700;
    }
    .top-nav__link {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 14px;
      border-radius: var(--radius);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0;
      text-decoration: none;
    }
    .top-nav__brand {
      color: #fff;
      font-size: 15px;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .top-nav__link--active {
      background: rgb(255 255 255 / 14%);
      color: #fff;
    }
    .top-nav__link:hover {
      background: rgb(255 255 255 / 10%);
    }
    #map { height: calc(100vh - 52px); width: 100%; margin-top: 52px; }
    .panel {
      position: absolute;
      top: 64px;
      right: 12px;
      background: var(--color-surface);
      z-index: 1000;
      padding: 0;
      border-radius: var(--radius);
      width: 356px;
      max-height: calc(100vh - 76px);
      overflow: auto;
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-panel);
    }
    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--color-border-soft);
      background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
    }
    .panel-header h3 {
      margin: 0;
      color: #0f2f2a;
      font-size: 18px;
      line-height: 1.2;
    }
    .panel-subtitle {
      margin-top: 4px;
      color: var(--color-muted);
      font-size: 12px;
    }
    .panel-toggle,
    .section-toggle {
      display: none;
    }
    .panel-body {
      display: block;
    }
    .panel-section {
      padding: 10px 14px;
      border-bottom: 1px solid var(--color-border-soft);
    }
    .panel-section:last-child {
      border-bottom: 0;
    }
    .section-title {
      display: block;
      margin-bottom: 8px;
      color: #455766;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .section-title--center {
      text-align: center;
      font-weight: 800;
    }
    .field-label {
      display: block;
      margin-bottom: 6px;
      color: var(--color-text);
      font-size: 13px;
      font-weight: 700;
    }
    .search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px;
      gap: 7px;
      align-items: center;
    }
    .search-input,
    .select-input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      border: 1px solid #b8c5ce;
      border-radius: var(--radius);
      padding: 0 11px;
      background: #fff;
      color: var(--color-text);
      font: inherit;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .search-input:focus,
    .select-input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgb(15 107 91 / 14%);
    }
    .select-input.hidden {
      display: none;
    }
    .primary-button {
      width: 100%;
      min-height: 36px;
      margin-top: 0;
      border: 0;
      border-radius: var(--radius);
      background: var(--color-primary-strong);
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 14px rgb(11 95 255 / 18%);
      transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    }
    .primary-button:hover {
      background: #094ed4;
      box-shadow: 0 7px 18px rgb(11 95 255 / 24%);
    }
    .secondary-button {
      min-height: 36px;
      border: 0;
      border-radius: var(--radius);
      background: var(--color-secondary);
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: background 140ms ease, opacity 140ms ease;
    }
    .secondary-button:hover:not(:disabled) {
      background: #1f2937;
    }
    .secondary-button:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
    .search-results {
      display: grid;
      gap: 6px;
      margin-top: 8px;
      max-height: 260px;
      overflow-y: auto;
      padding-right: 2px;
    }
    .search-results[hidden] {
      display: none;
    }
    .search-results__button {
      display: grid;
      gap: 2px;
      width: 100%;
      border: 1px solid #b8c5ce;
      border-radius: var(--radius);
      background: #fff;
      color: var(--color-text);
      cursor: pointer;
      font: inherit;
      line-height: 1.25;
      padding: 8px 10px;
      text-align: left;
    }
    .search-results__button:hover,
    .search-results__button:focus {
      border-color: var(--color-primary);
      outline: none;
    }
    .search-results__title {
      font-weight: 700;
    }
    .search-results__meta {
      color: var(--color-text-muted);
      font-size: 12px;
    }
    .layer-list {
      display: grid;
      gap: 6px;
    }
    .layer-item {
      padding: 8px 9px;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius);
      background: var(--color-surface-muted);
      transition: border-color 140ms ease, background 140ms ease;
    }
    .layer-item:has(input:checked) {
      border-color: #b9d7cf;
      background: #f1f8f6;
    }
    .legend { margin-top: 5px; padding-left: 24px; font-size: 12px; }
    .legend.hidden { display: none; }
    .legend span { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
    .legend i { width: 14px; height: 14px; border: 1px solid #fff; border-radius: 3px; }
    .legend .amostra,
    .legend .recolhido,
    .legend .validado {
      border-radius: 50%;
    }
    .legend .amostra { background: #b72f2a; }
    .legend .recolhido { background: #facc15; }
    .legend .validado { background: #167a3b; }
    .legend .concelho {
      background: transparent;
      border: 2px solid #1d4ed8;
      border-radius: 2px;
    }
    .legend .estradas-caminhos {
      height: 0;
      background: transparent;
      border: 0;
      border-top: 2px solid #8a949e;
      border-radius: 0;
    }
    .estradas-caminhos-tile {
      filter: grayscale(1) saturate(0) brightness(1.08) contrast(0.72);
    }
    .legend .swatch {
      display: block;
      width: 12px;
      height: 12px;
      border: 1px solid #fff;
      border-radius: 50% 50% 50% 0;
      box-shadow: 0 1px 3px rgb(17 24 39 / 30%);
      transform: rotate(-45deg);
    }
    .legend img {
      display: block;
      max-width: 100%;
      margin-top: 6px;
    }
    .marcador-coletado {
      position: relative;
      display: block;
      width: var(--marker-size, 10px);
      height: var(--marker-size, 10px);
      border: 2px solid #fff;
      border-radius: 50% 50% 50% 0;
      box-shadow: 0 1px 4px rgb(17 24 39 / 35%);
      transform: rotate(-45deg);
    }
    .marcador-coletado::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: max(3px, calc(var(--marker-size, 10px) * 0.24));
      height: max(3px, calc(var(--marker-size, 10px) * 0.24));
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }
    .stats {
      display: block;
      font-size: 12px;
    }
    .stats.visible { display: block; }
    .stats-title {
      display: block;
      margin-top: 6px;
      color: #3f4f5b;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .stats-filter {
      display: grid;
      gap: 6px;
      margin-top: 6px;
    }
    .stats-filter .select-input {
      min-width: 0;
    }
    .stats-filter .field-label {
      margin-bottom: -2px;
      font-size: 12px;
    }
    .stats-context {
      margin-top: 8px;
      color: #455766;
      font-size: 12px;
      font-weight: 700;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-top: 8px;
    }
    .stat-card {
      background: #f7f9fb;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius);
      padding: 8px;
      color: #52616d;
      line-height: 1.2;
    }
    .stat-card--wide {
      margin-top: 6px;
      text-align: center;
    }
    .stat-card strong {
      display: block;
      margin-top: 4px;
      color: var(--color-text);
      font-size: 15px;
    }
    .progress {
      height: 8px;
      overflow: hidden;
      margin-top: 6px;
      background: #e4e9ed;
      border-radius: 999px;
    }
    .progress-bar {
      height: 100%;
      width: 0%;
      background: var(--color-primary);
    }
    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .checkbox-row input {
      accent-color: var(--color-primary);
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    .dr-tools {
      display: grid;
      gap: 6px;
    }
    .dr-tools label {
      grid-column: 1 / -1;
      font-size: 13px;
      font-weight: 700;
    }
    .dr-search-row {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 1fr 82px;
      gap: 6px;
    }
    .dr-action-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .search-actions {
      margin-top: 6px;
    }
    .dr-search-row input,
    .dr-tools button {
      min-height: 32px;
      border-radius: 6px;
      font: inherit;
    }
    .dr-search-row input {
      box-sizing: border-box;
      border: 1px solid #b9c6cf;
      background: #fff;
      padding: 0 8px;
    }
    .dr-tools button {
      border: 0;
      background: #0b5fff;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }
    .dr-tools button:disabled {
      cursor: wait;
      opacity: 0.65;
    }
    .north-arrow {
      position: absolute;
      left: 10px;
      bottom: 36px;
      z-index: 900;
      display: grid;
      place-items: center;
      width: 46px;
      height: 58px;
      border: 1px solid #b8c5ce;
      border-radius: var(--radius);
      background: rgb(255 255 255 / 92%);
      color: #111827;
      font-weight: 700;
      box-shadow: 0 4px 12px rgb(23 32 38 / 12%);
    }
    .north-arrow::before {
      content: "";
      width: 0;
      height: 0;
      border-right: 10px solid transparent;
      border-bottom: 28px solid #111827;
      border-left: 10px solid transparent;
    }
    .north-arrow span {
      font-size: 13px;
      line-height: 1;
    }
    .popup-action {
      box-sizing: border-box;
      display: block;
      width: 100%;
      margin-top: 8px;
      padding: 6px 8px;
      border: 0;
      border-radius: var(--radius);
      background: var(--color-primary);
      color: #fff;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
    }
    .popup-action:visited,
    .popup-action:hover,
    .popup-action:focus {
      background: var(--color-primary);
      color: #fff;
      text-decoration: none;
    }
    .leaflet-control-layers,
    .leaflet-bar a,
    .leaflet-bar a:hover {
      border-color: var(--color-border);
    }
    .leaflet-control-layers,
    .leaflet-bar {
      border-radius: var(--radius);
      box-shadow: 0 8px 22px rgb(17 24 39 / 14%);
    }
    .leaflet-control-layers {
      padding: 4px 6px;
      color: var(--color-text);
      font: 13px Arial, Helvetica, sans-serif;
    }
    .leaflet-control-layers-selector {
      accent-color: var(--color-primary);
    }
    .leaflet-popup-content-wrapper {
      border-radius: var(--radius);
      box-shadow: 0 12px 30px rgb(17 24 39 / 18%);
    }
    .leaflet-popup-content {
      color: var(--color-text);
      font: 13px/1.45 Arial, Helvetica, sans-serif;
    }
    @media (max-width: 680px) {
      html,
      body {
        height: 100%;
        overflow: hidden;
      }
      .top-nav {
        align-items: flex-start;
        flex-wrap: wrap;
        height: auto;
        min-height: 48px;
        padding: 8px 10px;
      }
      .top-nav__updates {
        width: 100%;
        gap: 4px 10px;
      }
      .top-nav__brand {
        font-size: 14px;
      }
      .top-nav__items {
        gap: 1px;
      }
      .top-nav__link {
        min-height: 32px;
        padding: 0 9px;
        font-size: 12px;
      }
      #map {
        height: calc(100dvh - 78px);
        margin-top: 78px;
      }
      .panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: auto;
        max-height: min(62dvh, 430px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 28px rgb(23 32 38 / 22%);
        transform: translateY(0);
        transition: transform 180ms ease;
      }
      .panel::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: #c7d1d8;
      }
      .panel.is-collapsed {
        transform: translateY(calc(100% - 62px - env(safe-area-inset-bottom)));
      }
      .panel.is-collapsed .panel-body {
        visibility: hidden;
        pointer-events: none;
      }
      .panel-header {
        position: sticky;
        top: 0;
        z-index: 2;
        align-items: center;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom) * 0);
        background: #fff;
      }
      .panel-header h3 {
        font-size: 15px;
      }
      .panel-subtitle {
        display: none;
      }
      .panel-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        border: 1px solid #b8c5ce;
        border-radius: var(--radius);
        padding: 0 10px;
        background: #fff;
        color: var(--color-primary);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
      }
      .panel-body {
        max-height: calc(min(62dvh, 430px) - 62px);
        overflow: auto;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }
      .panel-section {
        padding: 8px 10px;
      }
      .panel-section--collapsible {
        padding: 0;
      }
      .panel-section--collapsible .section-title,
      .panel-section--collapsible .stats-title {
        display: none;
      }
      .section-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        min-height: 42px;
        border: 0;
        border-bottom: 1px solid var(--color-border-soft);
        padding: 0 12px;
        background: #fff;
        color: var(--color-text);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        cursor: pointer;
      }
      .section-toggle::after {
        content: "−";
        color: var(--color-primary);
        font-size: 20px;
        line-height: 1;
      }
      .panel-section--collapsed .section-toggle::after {
        content: "+";
      }
      .section-body {
        padding: 8px 10px;
      }
      .panel-section--collapsed .section-body {
        display: none;
      }
      .search-input,
      .select-input,
      .primary-button,
      .secondary-button,
      .dr-search-row input,
      .dr-tools button {
        min-height: 42px;
        font-size: 16px;
      }
      .search-row {
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 6px;
      }
      .dr-action-row {
        grid-template-columns: 1fr 1fr;
      }
      .layer-list {
        gap: 5px;
      }
      .layer-item {
        padding: 8px;
      }
      .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .stat-card {
        min-height: 42px;
      }
      .leaflet-control-layers {
        max-width: calc(100vw - 20px);
        font-size: 12px;
      }
      .leaflet-bottom .leaflet-control {
        margin-bottom: 72px;
      }
      .north-arrow {
        bottom: 78px;
        width: 38px;
        height: 48px;
      }
      .north-arrow::before {
        border-right-width: 8px;
        border-bottom-width: 24px;
        border-left-width: 8px;
      }
      .panel:not(.is-collapsed) ~ .north-arrow {
        display: none;
      }
    }