#ybmap{--navy:#1f3a5f;--navy2:#2f5b8a;--ink:#22303f;--sub:#5b6b7a;--line:#d8e0ea;
    --green:#2e9e57;--greenline:#1c7d41;--ok:#2e7d46;--okbg:#e7f4ea;--no:#b3261e;--nobg:#fbeaea;--gold:#b07d2e;background:#fff;color:var(--ink);font-family:"Public Sans",system-ui,-apple-system,sans-serif;}
  #ybmap *{box-sizing:border-box}
  #wrap{max-width:1000px;margin:0 auto}
  /* language toggle (shown only when the map is opened on its own) */
  #langM{position:fixed;top:10px;right:12px;z-index:1000;background:var(--gold);color:#fff;border:none;
    border-radius:999px;padding:8px 16px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
    box-shadow:0 2px 10px rgba(31,58,95,.28);display:none}
  #langM:focus-visible{outline:3px solid #fff;outline-offset:2px}
  /* search */
  .search{padding:12px 14px;background:#f5f7fa;border-bottom:1px solid var(--line)}
  .search h2{margin:0 0 6px;font-size:15px;color:var(--navy)}
  .srow{display:flex;gap:8px;flex-wrap:wrap}
  .srow input{flex:1 1 220px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:16px}
  .srow select,.srow button{padding:10px 12px;border-radius:9px;border:1px solid var(--line);font-size:14px;background:#fff}
  .srow button{background:var(--navy);color:#fff;border:none;font-weight:700}
  #sv{margin-top:8px;font-size:15px;font-weight:700;display:none}
  #sv.ok{color:var(--ok)} #sv.no{color:var(--no)}
  #sv small{display:block;font-weight:400;color:var(--sub);font-size:12.5px;margin-top:2px}
  /* tabs */
  .tabs{display:flex;gap:6px;padding:8px 10px 0;flex-wrap:wrap;background:#fff}
  .tab{flex:1 1 150px;min-width:130px;border:1px solid var(--line);border-bottom:none;background:#fff;border-radius:10px 10px 0 0;padding:8px 11px;cursor:pointer}
  .tab .n{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy2);font-weight:700}
  .tab .t{font-size:13px;font-weight:700;color:var(--sub);line-height:1.15;margin-top:2px}
  .tab.on{background:var(--navy)} .tab.on .n{color:#a9c2e0} .tab.on .t{color:#fff}
  .cap{background:var(--navy);color:#fff;padding:12px 15px}
  .cap h1{margin:0 0 3px;font-size:clamp(16px,2.2vw,20px);font-weight:800}
  .cap p{margin:0;font-size:13.5px;color:#d7e2ef;line-height:1.42}
  #map{height:420px;background:#eef1f4}
  .bar{display:flex;align-items:center;gap:16px;padding:11px 15px;flex-wrap:wrap;border-top:1px solid var(--line)}
  .stat .big{font-size:26px;font-weight:800;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
  .stat .lbl{font-size:11.5px;color:var(--sub)}
  .delta{font-size:13px;font-weight:800;color:var(--green);margin-top:4px;line-height:1.2}
  .slid{flex:1 1 240px;min-width:200px}
  .slid .top{display:flex;justify-content:space-between;font-size:12px;color:var(--sub)}
  .slid .top b{font-size:15px;color:var(--navy)}
  input[type=range]{width:100%;accent-color:var(--navy2)}
  .ticks{position:relative;height:14px;font-size:10.5px;color:var(--sub)}
  .ticks span{position:absolute;transform:translateX(-50%)}
  .legend{padding:8px 15px 14px;font-size:12px;color:var(--sub);line-height:1.5}
  .sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;margin-right:3px}
  .srow input,.srow select,.srow button{min-height:48px}
  input[type=range]{height:30px}
  @media(max-width:600px){
    .srow input{flex:1 1 100%}
    .srow select{flex:1 1 58%}
    .srow button{flex:1 1 38%;font-size:16px;font-weight:700}
    .tab{flex:1 1 47%;padding:12px}
    #map{height:340px}
    input[type=range]{height:40px}
  }