:root{
  --paper:#FFFFFF; --mist:#F2F3F3; --line:#E2E2E2; --stone:#AEAEAD; --graphite:#6A6A69; --ink:#1A1A18;
  --teal:#00BAB1; --teal-ink:#00827C; --tint1:#E2F6F5; --tint2:#A9E6E2; --on-teal:#FFFFFF;
  --asph:#DDE0E0; --asph2:#E9EBEB; --pave:#CDD0D0; --grn:#D2EFEC; --curb:#AAB0B0; --mark:#FFFFFF;
  --blk:#FFFFFF; --blk-stroke:#B9BCBC; --office:#45494E; --strip:#EEF0F0;
  --co-bg:#1A1A18; --co-fg:#FFFFFF; --co-sub:#C9CAC8;
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1F1F1D; --mist:#171716; --line:#34342F; --stone:#5F5F5B; --graphite:#A6A6A2; --ink:#F1F1EE;
    --teal:#00BAB1; --teal-ink:#3CD0C8; --tint1:#14302E; --tint2:#1E5550; --on-teal:#0E1A19;
    --asph:#2F302E; --asph2:#292A28; --pave:#3A3B39; --grn:#163734; --curb:#4B4C49; --mark:#5D5E5B;
    --blk:#2B2C2A; --blk-stroke:#4E4F4B; --office:#7A7E83; --strip:#252624;
    --co-bg:#F1F1EE; --co-fg:#1A1A18; --co-sub:#4A4A47;
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .raster{filter:invert(.9) hue-rotate(180deg) saturate(.85) brightness(.95)}
}
:root[data-theme="dark"]{
  --paper:#1F1F1D; --mist:#171716; --line:#34342F; --stone:#5F5F5B; --graphite:#A6A6A2; --ink:#F1F1EE;
  --teal:#00BAB1; --teal-ink:#3CD0C8; --tint1:#14302E; --tint2:#1E5550; --on-teal:#0E1A19;
  --asph:#2F302E; --asph2:#292A28; --pave:#3A3B39; --grn:#163734; --curb:#4B4C49; --mark:#5D5E5B;
  --blk:#2B2C2A; --blk-stroke:#4E4F4B; --office:#7A7E83; --strip:#252624;
  --co-bg:#F1F1EE; --co-fg:#1A1A18; --co-sub:#4A4A47;
  color-scheme:dark;
}
:root[data-theme="dark"] .raster{filter:invert(.9) hue-rotate(180deg) saturate(.85) brightness(.95)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.app{display:grid;grid-template-columns:minmax(0,1fr) 440px;height:100%}
.stage{position:relative;overflow:hidden;background:var(--mist);touch-action:none;user-select:none;-webkit-user-select:none}
#map{position:absolute;inset:0;z-index:1}
#c3d{position:absolute;inset:0;width:100%;height:100%;display:none;cursor:grab;z-index:2}
.stage.is3d #map,.stage.is3d #co,.stage.is3d #lead{visibility:hidden}
.stage.is3d #c3d{display:block}
#lead,#co{position:absolute;inset:0;pointer-events:none;z-index:3}
#lead{width:100%;height:100%}

/* brand mark */
.brand{position:absolute;left:20px;top:18px;display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;z-index:5;pointer-events:none}
.brand .bx{background:var(--teal);color:#fff;padding:3px 7px 2px}
.tools{position:absolute;right:16px;top:14px;display:flex;gap:8px;z-index:6}
.tbtn{height:38px;padding:0 14px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.tbtn:hover{border-color:var(--ink)}
.tbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.zoom{position:absolute;right:16px;bottom:70px;display:flex;flex-direction:column;z-index:6}
.zoom button{width:38px;height:38px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:18px;margin-top:-1px;display:grid;place-items:center}
.zoom button:hover{position:relative;border-color:var(--ink)}
.dots{position:absolute;left:20px;right:70px;bottom:20px;display:flex;align-items:center;gap:6px;z-index:6;flex-wrap:wrap}
.dots .d{width:22px;height:6px;border:0;padding:0;background:var(--stone);cursor:pointer;opacity:.55}
.dots .d.on{background:var(--teal);opacity:1;width:34px}
.dots .cnt{margin-left:10px;height:30px;padding:0 10px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:13px;font-variant-numeric:tabular-nums}

/* callouts */
.co{position:absolute;left:0;top:0;background:var(--co-bg);color:var(--co-fg);padding:7px 10px 8px;max-width:230px;transform-origin:0 0;transition:opacity .3s}
.co b{display:block;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.co span{display:block;font-size:12px;line-height:1.35;color:var(--co-sub);margin-top:2px}
.co.tl{background:var(--teal);color:#fff}.co.tl span{color:#E8FBFA}

/* plan styling */
.raster{transition:opacity .2s}
#plan{transition:opacity .2s}
.base{fill:var(--paper)}
.asph{fill:var(--asph)}.asph2{fill:var(--asph2)}.pave{fill:var(--pave)}.grn{fill:var(--grn)}
.mark{fill:none;stroke:var(--mark);stroke-width:.7px;vector-effect:non-scaling-stroke}
.curb{fill:none;stroke:var(--curb);stroke-width:.8px;vector-effect:non-scaling-stroke}
.fence{fill:none;stroke:var(--graphite);stroke-width:1.4px;vector-effect:non-scaling-stroke}
.parcel{fill:none;stroke:var(--teal);stroke-width:2.2px;vector-effect:non-scaling-stroke;stroke-dasharray:10 5}
.strip{fill:var(--strip);stroke:var(--blk-stroke);stroke-width:.6px;vector-effect:non-scaling-stroke}
.blk{fill:var(--blk);stroke:var(--blk-stroke);stroke-width:.7px;vector-effect:non-scaling-stroke;transition:fill .15s,opacity .2s}
.ann{fill:var(--office);pointer-events:none}
.obj{fill:var(--office)}
.obj.bktp{fill:var(--teal)}
.bt{font:600 9.5px var(--text);fill:var(--ink);text-anchor:middle;pointer-events:none;font-variant-numeric:tabular-nums}
.poi circle{fill:var(--ink)}.poi text{font:700 8px var(--text);fill:var(--paper);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.phz{stroke-width:2px;vector-effect:non-scaling-stroke}
.phz.ph1{fill:var(--teal);fill-opacity:.16;stroke:var(--teal)}
.phz.ph2{fill:var(--graphite);fill-opacity:.06;stroke:var(--graphite);stroke-dasharray:6 4}
.net{fill:none;stroke-width:2.4px;vector-effect:non-scaling-stroke;stroke-linecap:round}
.net-water{stroke:var(--teal)}
.net-sewer{stroke:var(--graphite);stroke-dasharray:7 4}
.net-power{stroke:var(--ink);stroke-dasharray:2 4}
.net-gas{stroke:var(--teal-ink);stroke-dasharray:12 4 2 4}
.dimg [data-layer="ground"]{opacity:.45}
.m-phase .blk.ph1{fill:var(--teal)}
.m-phase .blk.ph2{fill:var(--asph2)}
.m-phase .blk.ph1 + .ann{fill:var(--office)}
.m-pick .blk{cursor:pointer}
.m-pick .blk:hover{fill:var(--tint2)}
.blk.dim{opacity:.22}
.blk.sel{fill:var(--teal)!important}

/* panel */
.panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--paper)}
.pscroll{flex:1;overflow-y:auto;padding:40px 40px 28px;scrollbar-width:thin}
.kick{font-size:12.5px;color:var(--graphite);margin:0 0 14px}
.hero{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.12;letter-spacing:-.005em;text-transform:uppercase;margin:0 0 16px}
.hero em{font-style:normal;display:block;font-weight:400;font-size:18px;letter-spacing:.02em;margin-top:6px}
h2.ttl{position:relative;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;text-transform:uppercase;letter-spacing:.005em;margin:0 0 16px}
h2.ttl::before{content:"";position:absolute;left:-40px;top:.3em;width:26px;height:.62em;background:var(--teal)}
h3{font-family:var(--display);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.02em;margin:26px 0 10px}
p{margin:0 0 12px}
.lead{font-size:16px}
.big{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin:22px 0 8px}
.big div b{display:block;font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;font-variant-numeric:tabular-nums}
.big div span{display:block;font-size:13px;color:var(--graphite);margin-top:4px;line-height:1.35}
.facts{margin:18px 0 6px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--graphite)}
.facts dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.tbl{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:13.5px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:500;color:var(--graphite);font-size:12px;padding:7px 6px 7px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:8px 6px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.n,.tbl th.n{text-align:right}
.tbl tr.go{cursor:pointer}.tbl tr.go:hover td{background:var(--tint1)}
.note{font-size:13px;color:var(--graphite)}
.src{font-size:12px;color:var(--graphite);border-top:1px solid var(--line);padding-top:12px;margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px}
.chip{height:32px;padding:0 13px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:13px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lbl{font-size:12px;color:var(--graphite);margin:14px 0 0}
.legend{list-style:none;padding:0;margin:14px 0 6px}
.legend li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.legend li span:last-child{color:var(--graphite);font-size:13px;font-variant-numeric:tabular-nums}
.sw{width:30px;height:12px;display:block}
.sw.num{width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:9px;font-weight:700;display:grid;place-items:center}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 4px}
.gal button{border:0;padding:0;cursor:zoom-in;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.fig{margin:16px 0 4px}.fig button{border:0;padding:0;width:100%;cursor:zoom-in;display:block;background:var(--mist)}
.fig img{width:100%;display:block}
.fig figcaption{font-size:12px;color:var(--graphite);margin-top:6px}
.instr{list-style:none;padding:0;margin:16px 0}
.instr li{padding:12px 0;border-bottom:1px solid var(--line)}
.instr li:first-child{border-top:1px solid var(--line)}
.instr b{display:block;font-weight:600;margin-bottom:2px}
.cta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;cursor:pointer}
.btn.pri{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.nav{display:flex;gap:8px;padding:14px 40px 18px;border-top:1px solid var(--line);background:var(--paper)}
.nav .btn{flex:1}
.nav .btn:disabled{opacity:.35;cursor:default}
.seg{display:inline-flex;border:1px solid var(--line);margin:6px 6px 0 0}
.seg button{height:32px;padding:0 12px;border:0;background:var(--paper);cursor:pointer;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* overlays */
#tip{position:absolute;z-index:8;pointer-events:none;background:var(--co-bg);color:var(--co-fg);padding:6px 9px;font-size:12px;line-height:1.35;display:none;white-space:nowrap}
#tip b{font-family:var(--display);font-size:11px;font-weight:600;margin-right:6px}
#card{position:absolute;right:16px;top:64px;width:330px;max-width:calc(100% - 32px);max-height:calc(100% - 150px);overflow:auto;background:var(--paper);border:1px solid var(--ink);z-index:9;display:none;padding:20px 20px 18px}
#card.on{display:block}
#card .x{position:absolute;right:8px;top:8px;width:32px;height:32px;border:0;background:none;cursor:pointer;font-size:20px;line-height:1}
#card h4{font-family:var(--display);font-weight:700;font-size:26px;margin:0;line-height:1.1}
#card .sub{font-size:13px;color:var(--graphite);margin:4px 0 6px}
#card .facts{margin-top:10px}
#card .facts div{grid-template-columns:46% 1fr;padding:7px 0}
#lp,#sm{position:absolute;right:16px;top:60px;width:300px;max-height:calc(100% - 140px);overflow:auto;background:var(--paper);border:1px solid var(--ink);z-index:10;display:none;padding:14px 16px}
#lp.on,#sm.on{display:block}
#lp h5,#sm h5{font-family:var(--display);font-size:12px;font-weight:600;text-transform:uppercase;margin:4px 0 10px}
#lp label{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;cursor:pointer;border-bottom:1px solid var(--line)}
#lp input{accent-color:var(--teal);width:16px;height:16px}
#sm button{display:flex;gap:12px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:9px 0;cursor:pointer;font-size:14px}
#sm button span{color:var(--graphite);width:22px;font-variant-numeric:tabular-nums}
#sm button.on{color:var(--teal-ink);font-weight:600}
#lb{position:fixed;inset:0;background:rgba(10,10,9,.92);z-index:50;display:none;align-items:center;justify-content:center;padding:24px}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain}
#lb button{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top,0px));width:44px;height:44px;border:0;background:#fff;color:#1A1A18;font-size:22px;cursor:pointer}
.tb3{position:absolute;left:20px;bottom:56px;display:none;gap:6px;z-index:6;flex-wrap:wrap;max-width:calc(100% - 90px)}
.stage.is3d .tb3{display:flex}
.l3{position:absolute;left:0;top:0;pointer-events:none;background:var(--co-bg);color:var(--co-fg);font-family:var(--display);font-weight:600;font-size:11px;padding:4px 7px;text-transform:uppercase;white-space:nowrap}
#l3wrap{position:absolute;inset:0;pointer-events:none;display:none}
.stage.is3d #l3wrap{display:block}
.msg3{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:40px;color:var(--graphite)}
@media (max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:minmax(0,54%) minmax(0,46%)}
  .panel{border-left:0;border-top:1px solid var(--line)}
  .pscroll{padding:24px 22px 20px}
  h2.ttl::before{left:-22px;width:14px}
  .hero{font-size:24px}
  .nav{padding:10px 22px 12px}
  .brand{font-size:12px;left:14px;top:14px}
  .tools{right:10px;top:10px}
  .tbtn{height:34px;padding:0 10px}
  .zoom{right:10px;bottom:56px}
  .dots{left:14px;bottom:14px;right:60px}
  .dots .d{width:12px}.dots .d.on{width:22px}
  #card{top:auto;bottom:10px;right:10px;width:auto;left:10px;max-height:calc(100% - 70px)}
  #lp,#sm{right:10px;left:10px;width:auto;top:52px}
  .co{max-width:170px}
}
@media (max-width:1100px) and (min-width:761px){.app{grid-template-columns:minmax(0,1fr) 380px}.pscroll{padding:32px 30px 24px}h2.ttl::before{left:-30px;width:20px}.nav{padding:12px 30px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* карта Leaflet */
.leaflet-container{background:var(--mist);font-family:var(--text)}
.leaflet-control-attribution{font-size:10px;line-height:1.4}
.leaflet-bottom.leaflet-right{margin-right:62px}
.planov{pointer-events:auto}
.on-sat .base{fill-opacity:.9}
.stl span{position:absolute;white-space:nowrap;font:600 10.5px var(--display);text-transform:uppercase;letter-spacing:.03em;color:#fff;background:rgba(26,26,24,.84);padding:3px 7px;pointer-events:none}
.dst i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--teal);border:2px solid #fff;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.dst span{position:absolute;left:10px;top:-10px;white-space:nowrap;font:500 11.5px var(--text);color:#fff;background:rgba(26,26,24,.84);padding:2px 7px}
.stage.far .stl{display:none}
.stage:not(.far) .dst span{display:none}
.tools .seg{margin:0;background:var(--paper)}
.tools .seg button{height:36px;padding:0 12px}
.rng{display:block;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.rng input{display:block;width:100%;margin-top:6px;accent-color:var(--teal)}
#lp .btn{height:38px;margin-top:6px}
#calOut{width:100%;font:12px ui-monospace,Menlo,Consolas,monospace;margin-top:8px;border:1px solid var(--line);background:var(--mist);color:var(--ink);padding:6px;resize:vertical}
.stage.cal .planov{cursor:move}
@media (max-width:760px){.tools .seg button{height:32px;padding:0 9px;font-size:12px}}