:root{
  --bg:#f3f4f2; --panel:#ffffff; --ink:#1c2326; --ink2:#55616a; --line:#dde2e4;
  --pin:#263238; --pin-ink:#ffffff; --our:#f26b21; --accent:#0a58ca;
  --mask-lo:#fde3c8; --mask-hi:#d9480f; --nodata:#b9c0c4;
  --chip:#eef1f2; --chip-on:#1c2326; --chip-on-ink:#fff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121619; --panel:#1a2024; --ink:#e7ecee; --ink2:#9aa7ae; --line:#2c353a;
    --chip:#252d32; --chip-on:#e7ecee; --chip-on-ink:#121619; --accent:#6ea8fe;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121619; --panel:#1a2024; --ink:#e7ecee; --ink2:#9aa7ae; --line:#2c353a;
  --chip:#252d32; --chip-on:#e7ecee; --chip-on-ink:#121619; --accent:#6ea8fe; color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
html,body{ height:100%; margin:0; }
body{ background:var(--bg); color:var(--ink); font:14px/1.45 "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app{ display:grid; grid-template-columns: 360px 1fr; height:100%; }
#panel{ background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; padding:20px 20px 28px; }
#map{ height:100%; width:100%; background:#dfe3e1; }
h1{ font-size:21px; line-height:1.2; font-weight:700; margin:0 0 6px; letter-spacing:-0.01em; }
.sub{ color:var(--ink2); font-size:13px; margin:0 0 16px; }
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px; }
.stats div{ background:var(--panel); padding:10px 10px 9px; }
.stats b{ display:block; font-size:20px; font-weight:700; font-variant-numeric: tabular-nums; }
.stats span{ font-size:12px; color:var(--ink2); }
fieldset{ border:0; padding:0; margin:0 0 16px; }
legend, .h{ font-weight:600; font-size:13px; margin-bottom:7px; padding:0; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip span{ display:inline-block; padding:5px 10px; border-radius:999px; background:var(--chip); color:var(--ink); font-size:12.5px; border:1px solid transparent; user-select:none; }
.chip input:checked + span{ background:var(--chip-on); color:var(--chip-on-ink); }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
.note{ font-size:12px; color:var(--ink2); margin-top:6px; }
.seg{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg label{ position:relative; text-align:center; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg span{ display:block; padding:7px 4px; font-size:12.5px; }
.seg label + label span{ border-left:1px solid var(--line); }
.seg input:checked + span{ background:var(--chip-on); color:var(--chip-on-ink); }
.seg input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:-2px; }
.toggle{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.scale{ margin-top:10px; display:none; }
.scale.on{ display:block; }
.ramp{ height:10px; border-radius:5px; background:linear-gradient(90deg,var(--mask-lo),var(--mask-hi)); }
.ramp-l{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink2); margin-top:3px; font-variant-numeric: tabular-nums; }
.nd{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); margin-top:6px; }
.nd i{ width:14px; height:10px; border:1px dashed #8a959b; background:rgba(185,192,196,.25); display:inline-block; }
.lg{ display:grid; grid-template-columns:auto 1fr; gap:8px 10px; align-items:center; font-size:12.5px; }
.lg .demo{ justify-self:start; }
hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
.nl a{ color:var(--accent); }
.nl li{ margin-bottom:6px; font-size:12.5px; }
.nl ul{ padding-left:18px; margin:6px 0 0; }
.allnone{ display:flex; gap:12px; margin:-2px 0 7px; }
.allnone button{ background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.allnone button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
#map.vec{ background:#f2efe9; }
.plc{ transform:translate(-50%,calc(-100% + 4px)); white-space:nowrap; pointer-events:none; text-align:center; }
.plc span{ color:#333; font:500 11px/1.1 "Golos Text",system-ui,sans-serif; text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff; }
.plc.r1 span{ font-size:13.5px; font-weight:700; color:#1c2326; }
.plc.r2 span{ font-size:12px; font-weight:600; }
.plc.r4 span{ font-size:11px; color:#6b5a7b; font-style:italic; }
.plc i{ display:block; width:5px; height:5px; margin:2px auto 0; border-radius:50%; background:#555; border:1px solid #fff; }
.plc.r4 i{ display:none; }
#toggle-panel{ display:none; }
.rng{ margin-bottom:14px; }
.rng .row{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; }
.rng .row b{ font-weight:600; }
.rng .val{ font-variant-numeric: tabular-nums; color:var(--ink2); font-size:12.5px; }
.dual{ position:relative; height:26px; }
.dual .track{ position:absolute; left:0; right:0; top:11px; height:4px; border-radius:2px; background:var(--line); }
.dual .fill{ position:absolute; top:11px; height:4px; border-radius:2px; background:var(--ink); }
.dual input[type=range]{ position:absolute; left:0; width:100%; top:0; height:26px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.dual input[type=range]::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--panel); border:2px solid var(--ink); cursor:pointer; }
.dual input[type=range]::-moz-range-thumb{ pointer-events:auto; width:15px; height:15px; border-radius:50%; background:var(--panel); border:2px solid var(--ink); cursor:pointer; }
.dual input[type=range]::-webkit-slider-runnable-track{ background:none; }
.dual input[type=range]::-moz-range-track{ background:none; }
.dual input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:2px; }
.nums{ display:flex; gap:8px; margin-top:4px; }
.nums input{ width:50%; font:inherit; font-size:12.5px; padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink); font-variant-numeric: tabular-nums; }

/* маркери */
.pin{ position:relative; display:inline-flex; align-items:baseline; gap:1px; white-space:nowrap; transform:translate(-50%,-100%);
  background:var(--pin); color:var(--pin-ink); font:600 12.5px/1 "Golos Text",system-ui,sans-serif; padding:6px 8px 6px; border-radius:7px;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.pin::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); border:6px solid transparent; border-top-color:#fff; border-bottom:0; }
.pin .u{ font-weight:500; font-size:10.5px; opacity:.8; }
.pin.our{ background:var(--our); }
.pin.build{ border-style:dashed; }
.pin.unfin{ border-style:dotted; border-width:3px; }
.pin .ax{ font-weight:500; opacity:.85; margin-right:2px; }
.pin .cnt{ margin-left:5px; padding:2px 5px; border-radius:4px; background:rgba(255,255,255,.2); font-size:11px; }
.pin .bdg{ position:absolute; top:-9px; right:-9px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-style:normal;
  background:#fff; color:#1c2326; border:1.5px solid #1c2326; }
.pin .bdg.b2{ right:12px; }
.pin.noprice{ background:#6b767c; }
.leaflet-marker-icon.pin-wrap{ background:none; border:0; }
.cl{ transform:translate(-50%,-50%); display:grid; place-items:center; text-align:center; border-radius:50%;
  background:rgba(38,50,56,.92); color:#fff; border:3px solid rgba(255,255,255,.95); box-shadow:0 0 0 6px rgba(38,50,56,.18), 0 2px 6px rgba(0,0,0,.3);
  font:600 13px/1.1 "Golos Text",system-ui,sans-serif; cursor:pointer; font-variant-numeric: tabular-nums; }
.cl small{ display:block; font-weight:500; font-size:10.5px; opacity:.85; }
.cl.our{ background:rgba(242,107,33,.95); box-shadow:0 0 0 6px rgba(242,107,33,.25), 0 2px 6px rgba(0,0,0,.3); }
.cl.mix{ background:linear-gradient(135deg, rgba(242,107,33,.95) 0 50%, rgba(38,50,56,.92) 50% 100%); }

/* картка */
.leaflet-popup-content-wrapper{ border-radius:12px; }
.leaflet-popup-content{ margin:14px 16px; min-width:250px; max-width:300px; font:13px/1.45 "Golos Text",system-ui,sans-serif; color:#1c2326; }
.card h3{ margin:0 0 8px; font-size:14.5px; line-height:1.3; }
.card .pr{ font-size:20px; font-weight:700; font-variant-numeric: tabular-nums; }
.card .pr small{ font-size:12px; font-weight:500; color:#55616a; }
.card dl{ display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:8px 0 10px; }
.card dt{ color:#55616a; }
.card dd{ margin:0; }
.card a.go{ display:inline-block; padding:6px 10px; border-radius:7px; background:#1c2326; color:#fff !important; text-decoration:none; font-weight:600; }
.card .warn{ background:#fff4e5; border-left:3px solid #e8590c; padding:6px 8px; font-size:12px; margin:8px 0; border-radius:0 6px 6px 0; }
.card .our-tag{ display:inline-block; background:#f26b21; color:#fff; border-radius:4px; padding:1px 6px; font-size:11.5px; margin-left:4px; }
.car{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:-2px 0 10px; padding-bottom:8px; border-bottom:1px solid #e3e7e9; }
.car button{ width:30px; height:30px; border-radius:50%; border:1px solid #c9d0d4; background:#fff; cursor:pointer; font-size:15px; line-height:1; color:#1c2326; }
.car button:focus-visible{ outline:2px solid #0a58ca; outline-offset:2px; }
.car .ctr{ font-size:12.5px; color:#55616a; text-align:center; }
.car .ctr b{ color:#1c2326; }
.leaflet-tooltip.mtip{ font:12.5px/1.4 "Golos Text",system-ui,sans-serif; padding:7px 9px; border-radius:8px; }
.empty{ position:absolute; z-index:800; left:50%; top:16px; transform:translateX(-50%); background:var(--panel); color:var(--ink); border:1px solid var(--line);
  padding:8px 12px; border-radius:8px; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.15); display:none; }

@media (max-width: 800px){
  #app{ grid-template-columns: 1fr; grid-template-rows: 1fr; }
  #panel{ position:fixed; z-index:1000; left:0; right:0; bottom:0; max-height:72%; border-right:0; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0; transform:translateY(calc(100% - 64px)); transition:transform .25s ease; padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); }
  #panel.open{ transform:none; }
  #toggle-panel{ display:block; width:100%; background:none; border:0; color:var(--ink); font:600 14px "Golos Text",system-ui,sans-serif; padding:4px 0 14px; cursor:pointer; text-align:left; }
  #map{ position:fixed; inset:0; }
}
@media (prefers-reduced-motion: reduce){ #panel{ transition:none; } }