:root{
      --bg: #f5fbf8;
      --surface: #ffffff;
      --text: #0b1b14;
      --muted: #3f5f55;
      --line: rgba(13, 55, 39, .14);
      --accent: #1ea65a;
      --accent2:#2d7ef7;
      --radius: 18px;
      --radius2: 14px;
      --shadow2: 0 10px 26px rgba(11, 27, 20, .10);
      --maxw: 1180px;
      --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(900px 520px at 18% 0%, rgba(30,166,90,.14), transparent 60%),
        radial-gradient(900px 520px at 78% 8%, rgba(45,126,247,.12), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
      line-height: 1.45;
    }
    a{ color: inherit; text-decoration:none; }
    a:hover{ text-decoration: underline; }

    .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

    /* Topbar */
    .topbar{
      position: sticky; top:0; z-index: 50;
      backdrop-filter: blur(10px);
      background: rgba(255,255,255,.82);
      border-bottom: 1px solid var(--line);
    }
    .topbar .row{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap: 10px;
      min-width: 220px;
    }

    /* === LOGO: как на предыдущих страницах === */
    .logo{
      width: 64px;
      height: 64px;
      border-radius: 0px;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .brand b{ font-size: 15px; letter-spacing: .2px; }
    .brand span{ display:block; font-size: 12px; color: var(--muted); margin-top: 1px; }

    .nav{
      display:flex; flex-wrap:wrap; gap: 10px;
      justify-content:center;
    }
    .nav a{
      padding: 8px 10px;
      border-radius: 999px;
      color: var(--muted);
      border: 1px solid transparent;
    }
    .nav a.active{
      color: var(--text);
      background: rgba(30,166,90,.10);
      border-color: rgba(30,166,90,.22);
      text-decoration: none;
    }

    .nav a:hover{
      color: var(--text);
      background: rgba(30,166,90,.08);
      border-color: rgba(30,166,90,.18);
      text-decoration:none;
    }

    .actions{
      display:flex; gap: 10px; align-items:center; justify-content:flex-end;
      min-width: 220px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid rgba(13,55,39,.18);
      background: rgba(255,255,255,.88);
      color: var(--text);
      white-space: nowrap;
      text-decoration:none;
      box-shadow: 0 6px 18px rgba(11,27,20,.06);
      cursor: pointer;
    }
    .btn:hover{ background:#fff; text-decoration:none; }
    .btn.primary{
      border-color: rgba(30,166,90,.22);
      background: linear-gradient(135deg, rgba(30,166,90,.18), rgba(45,126,247,.14));
    }
    .btn:focus-visible{
      outline: 3px solid rgba(45,126,247,.30);
      outline-offset: 2px;
    }

    /* Page */
    .page{ padding: 14px 0 18px; }

    /* Panel */
    .panel{
      border: 1px solid var(--line);
      background: rgba(255,255,255,.88);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      overflow: hidden;
    }
    .panelInner{
      display:flex;
      gap: 10px;
      align-items:center;
      padding: 12px 14px;
      flex-wrap: nowrap; /* десктоп: без переносов */
    }
    .panelInner > *{ min-width: 0; }

    .label{
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }

    .field{
      display:flex;
      align-items:center;
      gap: 8px;
      min-width: 0;
    }

    .panel input[type="text"]{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(13,55,39,.18);
      background: #fff;
      color: var(--text);
      outline:none;
      font: inherit;
      min-width: 0;
    }

    /* ✅ select в стиле input */
    .panel select{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(13,55,39,.18);
      background: #fff;
      color: var(--text);
      outline:none;
      font: inherit;
      min-width: 0;
      -webkit-appearance: none;
      appearance: none;
    }

    .original-bird-field{ flex: 1 1 320px; }

    .small{
      width: 140px;
      min-width: 120px;
      flex: 0 0 auto;
    }

    .panelActions{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .iconLink{
      display:inline-flex;
      gap:8px;
      align-items:center;
    }
    .iconLink svg{ width:18px; height:18px; }

    /* ✅ Map: 90% ширины окна, по центру */
    .mapWrap{
      margin-top: 12px;

      width: 90vw;
      max-width: 90vw;
      margin-left: auto;
      margin-right: auto;

      border: 1px solid var(--line);
      background: #fff;

      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow2);

      /* ✅ ключевая правка: отдельный stacking context, чтобы z-index работал предсказуемо */
      isolation: isolate;
    }

    /* ✅ Карта: минимум 80% экрана */
    .original-map-canvas{
      width: 100%;
      height: max(80vh, 520px);

      /* ✅ чтобы легенда могла быть поверх */
      position: relative;
      z-index: 0;
    }

    /* ✅ Legend: всегда поверх карты */
    .legend{
      position: absolute;
      left: 14px;
      bottom: 14px;

      z-index: 10;              /* внутри isolate этого достаточно */
      pointer-events: none;

      background: rgba(255,255,255,.70);
      border: 1px solid rgba(13,55,39,.14);
      border-radius: 12px;
      padding: 6px 8px;
      box-shadow: 0 10px 26px rgba(11,27,20,.10);
      backdrop-filter: blur(6px);
    }
    .legend img{
      display:block;
      max-width: min(520px, 74vw);
      height:auto;
    }

    /* Preloader */
    #preloader{
      position: fixed;
      inset: 0;
      display:none;
      place-items:center;
      background: rgba(255,255,255,.55);
      z-index: 9999;
      backdrop-filter: blur(4px);
    }
    #preloader img{ width: 44px; height: 44px; }

    /* Note */
    .note{
      margin: 10px 0 14px;
      color: rgba(63,95,85,.9);
      font-size: 12px;
    }
    .footer{
      border-top: 1px solid var(--line);
      padding: 18px 0 26px;
      color: rgba(63,95,85,.9);
      font-size: 12px;
      background: rgba(255,255,255,.65);
    }

    /* Autocomplete font */
    .ui-autocomplete{
      font-size: 13px;
      line-height: 1.25;
      max-height: 260px;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 10000 !important;
      box-shadow: 0 14px 38px rgba(11,27,20,.16);
      border-radius: 12px;
      border: 1px solid rgba(13,55,39,.18);
    }
    .ui-menu .ui-menu-item-wrapper{ padding: 8px 10px; }
    .ui-state-active,
    .ui-widget-content .ui-state-active{
      border: 1px solid rgba(45,126,247,.28);
      background: rgba(45,126,247,.12);
      color: var(--text);
      border-radius: 10px;
    }

    .ui-autocomplete b{ font-weight: 700; }

    @media (max-width: 980px){
      .actions{ min-width: auto; }
      .brand{ min-width: auto; }
    }
    @media (max-width: 720px){
      .nav{ display:none; }
      .panelInner{ flex-wrap: wrap; }
      .panelActions{
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
      }
      .original-bird-field{ flex: 1 1 100%; }

      .original-map-canvas{ height: max(80vh, 420px); }

      .mapWrap{ width: 100%; max-width: 100%; }
    }
  
/* Analytics extends the existing /map/ visual system. */
.explore-page{padding-top:22px;padding-bottom:32px}
.page-heading{margin-bottom:20px}.page-heading h1{font-size:30px;line-height:1.2;margin:0 0 8px}.intro{color:var(--muted);margin:0}
h2{font-size:20px;margin:0 0 12px}#filters{padding:20px;overflow:visible}
.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.fields>*{min-width:0}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--muted)}
input,select,button{font:inherit;color:var(--text);min-height:44px;border:1px solid rgba(13,55,39,.18);border-radius:12px;padding:10px 12px;background:#fff;min-width:0;max-width:100%}
input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid rgba(45,126,247,.30);outline-offset:2px}
button{cursor:pointer;border-radius:999px;box-shadow:0 6px 18px rgba(11,27,20,.06)}button:hover{background:#f5fbf8}
button.primary{border-color:rgba(30,166,90,.22);background:linear-gradient(135deg,rgba(30,166,90,.18),rgba(45,126,247,.14))}
.check{flex-direction:row;align-items:center}.check input,.periods input{min-height:auto;accent-color:var(--accent)}
fieldset{padding:0;border:0;margin:0 0 18px}legend{font-size:14px;color:var(--muted);margin-bottom:8px}
.periods,.tabs,.paging{display:flex;flex-wrap:wrap;gap:10px}.periods label{flex-direction:row;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
.periods label:has(input:checked){background:rgba(30,166,90,.10);border-color:rgba(30,166,90,.22);color:var(--text)}
.explore-page .actions{min-width:0;justify-content:flex-start;flex-wrap:wrap}
.tabs{border-bottom:1px solid var(--line);margin-top:20px;padding-bottom:10px}.tabs button{background:transparent;border-color:transparent;box-shadow:none}.tabs button[aria-current]{background:rgba(30,166,90,.10);border-color:rgba(30,166,90,.22)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0 24px}.metrics>div,article{background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow2);min-width:0}
.metrics strong{display:block;font-size:30px;margin-top:6px}.tables{display:grid;grid-template-columns:1fr 1fr;gap:20px}.table-heading{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:start}
article p,.muted,#status{color:var(--muted)}.muted{font-size:12px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;text-align:left;margin:16px 0}th,td{padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:13px;color:var(--muted)}td a{color:#187d44}td a:hover{text-decoration:underline}
.notice{padding:12px;background:rgba(30,166,90,.10);border:1px solid var(--line);border-radius:12px}
#map-canvas{height:max(70vh,520px);min-height:360px;margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg);box-shadow:var(--shadow2)}#status{min-height:24px}
[hidden]{display:none!important}.paging{align-items:center;justify-content:center;margin:16px}button:disabled{opacity:.45;cursor:default}
@media(max-width:1150px){.topbar .row{flex-wrap:wrap}.topbar .nav{order:3;width:100%}.topbar .actions{min-width:0}}
@media(max-width:900px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}.tables{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.explore-page{padding-top:18px}.topbar .row{gap:8px}.brand{gap:8px}.logo{width:44px;height:44px}.brand span{display:none}.topbar .actions{gap:6px}.topbar .btn{font-size:12px;padding:8px 10px}.fields{grid-template-columns:1fr}#filters,article{padding:16px}.periods{gap:6px}.periods label{flex:1 1 45%;font-size:13px}.explore-page .actions button{flex:1 1 auto}#map-canvas{height:65vh;min-height:360px}.page-heading h1{font-size:26px}}

#filters .fields:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}.map-region-wrap{position:relative;isolation:isolate}.map-region-button{position:absolute;left:12px;top:72px;z-index:2;background:#fff;box-shadow:0 4px 16px rgba(11,27,20,.18)}.map-region-button[aria-pressed="true"]{background:#e4f4ec;border-color:var(--accent)}@media(max-width:900px){#filters .fields:first-child{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){#filters .fields:first-child{grid-template-columns:1fr}.map-region-button{left:10px;top:64px;font-size:13px}}
.topbar .nav{gap:4px;font-size:14px}.topbar .nav a{padding:8px 7px}.map-region-button{left:auto;right:12px;top:64px}button.species-link{padding:0;min-height:44px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#187d44;text-align:left;line-height:1.45}button.species-link:hover{text-decoration:underline}

.density-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}.density-legend span{display:inline-flex;align-items:center;gap:6px}.density-legend i{display:inline-block;width:12px;height:12px;border:1px solid #fff}

.compact-periods{display:flex;flex-wrap:wrap;gap:16px;align-items:end;margin-bottom:18px}.compact-periods>label{flex:0 1 230px}.compact-periods>label:nth-child(2){flex-basis:180px}.custom-dates{display:flex;flex-wrap:wrap;gap:16px}.custom-dates label{flex:1 1 150px}.compact-periods #period-summary{margin:0 0 12px}@media(max-width:520px){.compact-periods>label,.compact-periods>label:nth-child(2){flex:1 1 100%}.custom-dates{width:100%}.compact-periods #period-summary{margin:0}}

.explore-page{padding-top:14px}.page-heading{margin-bottom:12px}.page-heading h1{font-size:24px;margin:0}
.custom-dates{flex-wrap:nowrap;min-width:0}.custom-dates label{flex:1 1 0;min-width:0}.custom-dates input{width:100%}
.leader-charts{margin-top:20px}.leader-chart{list-style:none;padding:0;margin:16px 0 0}.leader-chart li{margin-bottom:14px}.leader-label{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:5px}.leader-label span{min-width:0;overflow-wrap:anywhere}.leader-label strong{white-space:nowrap}.leader-track{height:12px;background:#edf5f0;border-radius:4px;overflow:hidden}.leader-fill{height:100%;background:linear-gradient(90deg,#1ea65a,#66bb91);border-radius:4px}
button.sort-heading{padding:0;min-height:44px;border:0;border-radius:0;box-shadow:none;background:transparent;font-size:13px;text-align:left;color:var(--muted);font-weight:600}button.sort-heading:hover{color:var(--text);text-decoration:underline}

#status{display:flex;align-items:center;gap:12px;padding:12px 16px;margin:12px 0;background:#e0f3e4;border:1px solid #70a982;border-left:5px solid #277448;border-radius:10px;color:#174f30;font-weight:600;box-shadow:0 3px 12px #27644512}#status[hidden]{display:none}#status.is-loading::before{content:"";width:18px;height:18px;flex:0 0 18px;border:3px solid #a5cdb0;border-top-color:#246c42;border-radius:50%;animation:status-spin .8s linear infinite}#status.is-error{background:#fff0df;border-color:#d2964b;border-left-color:#b16a18;color:#704515}#status button{margin-left:auto;padding:5px 10px;min-height:30px;font-size:13px}#map-status{padding:10px 14px;background:#e0f3e4;border-left:4px solid #277448;border-radius:8px;color:#174f30;font-weight:600}@keyframes status-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){#status.is-loading::before{animation:none}}
.compact-periods{margin-bottom:0;gap:12px}.filter-actions{display:flex;gap:8px;margin-left:auto;align-self:flex-end;padding-bottom:3px}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;width:38px;height:38px;padding:8px;border-radius:10px;box-shadow:none}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.compact-periods>label:first-child{order:0}.compact-periods>label:nth-child(2){flex:1 1 calc(100% - 104px);order:1}.filter-actions{margin-left:0;order:2}.custom-dates,.compact-periods #period-summary{order:3}}

.boundary-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 10px;border:1px solid rgba(30,166,90,.22);border-radius:10px;color:#187d44;background:rgba(30,166,90,.08);font-size:13px;white-space:nowrap}.boundary-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.boundary-chip:focus-visible{outline:3px solid rgba(45,126,247,.30);outline-offset:2px}@media(max-width:520px){.boundary-chip{order:4}}
.map-region-button{left:12px;right:auto;top:12px}
.map-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 22px;border:1px solid rgba(39,100,69,.18);border-radius:14px;background:rgba(255,255,255,.96);color:#174f30;box-shadow:0 4px 24px rgba(11,27,20,.18);font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none}.map-loading-spinner{width:34px;height:34px;border:4px solid #c1ddcb;border-top-color:#277448;border-radius:50%;animation:status-spin .8s linear infinite}@media(prefers-reduced-motion:reduce){.map-loading-spinner{animation:none}}