.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
.leaflet-tile::selection {
	background: transparent;
}
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}
.leaflet-container img.leaflet-tile {
	mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }
.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}
.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}
.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; 
	pointer-events: auto;
	}
.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}
.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}
.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}
.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}
.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}
.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;
	margin: -10px auto 0;
	pointer-events: auto;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}
.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}
.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}
.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}
.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
:root{
  --board:#0B1013; --panel:rgba(18,24,28,.82); --panel-solid:#161E22; --line:rgba(233,239,238,.14);
  --text:#E9EFEE; --muted:#9AAEB3; --accent:#E8B54B;
  --c-build:#E0A03C; --c-nature:#63B06D; --c-infra:#78A8C9; --c-leisure:#C77FAE;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--board); color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased}
.app{position:fixed; inset:0}
#map{position:absolute; inset:0; background:var(--board); outline:none}
.leaflet-container{font-family:"Manrope",sans-serif; background:var(--board)}

/* ——— заголовок и фильтры поверх карты ——— */
.scrim{position:absolute; z-index:900; pointer-events:none}
.scrim.tl{left:0; top:0; width:min(72vw,660px); height:250px;
  background:radial-gradient(115% 95% at 0% 0%, rgba(6,10,12,.74) 0%, rgba(6,10,12,.34) 45%, rgba(6,10,12,0) 76%)}
.scrim.bl{left:0; bottom:0; width:min(50vw,420px); height:120px;
  background:radial-gradient(110% 100% at 0% 100%, rgba(6,10,12,.66) 0%, rgba(6,10,12,0) 72%)}
.scrim.tr{right:0; top:0; width:180px; height:280px;
  background:radial-gradient(100% 90% at 100% 0%, rgba(6,10,12,.5) 0%, rgba(6,10,12,0) 74%)}
.hud{position:absolute; left:20px; top:18px; z-index:1000; max-width:min(52vw,520px)}
.kicker{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color:#C3D2D5; margin:0 0 5px; text-shadow:0 1px 8px rgba(0,0,0,.9)}
.hud h1{font-family:"EB Garamond",Georgia,serif; font-weight:600; font-size:clamp(22px,2.6vw,32px);
  line-height:1; margin:0 0 11px; text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:500 12px/1 "Manrope",sans-serif;
  color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:7px 11px 7px 9px; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  transition:color .14s, border-color .14s, background .14s}
.chip:hover{color:var(--text); border-color:rgba(233,239,238,.3)}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--cc); opacity:.35; flex:0 0 auto; transition:opacity .14s}
.chip .n{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:#7E9298; font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{color:var(--text); background:rgba(18,24,28,.92); border-color:color-mix(in srgb, var(--cc) 55%, transparent)}
.chip[aria-pressed="true"] .dot{opacity:1}
.chip[aria-pressed="true"] .n{color:var(--muted)}

/* ——— метки ——— */
.pin{width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50% 50% 50% 3px; transform:rotate(-45deg);
  display:grid; place-items:center; background:var(--cc); border:1.5px solid rgba(8,14,16,.6);
  box-shadow:0 2px 7px rgba(0,0,0,.5); cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.5), box-shadow .16s}
.pin svg{transform:rotate(45deg); width:12px; height:12px; color:#141A1C}
.pin:hover,.pin.on{transform:rotate(-45deg) scale(1.25); box-shadow:0 5px 14px rgba(0,0,0,.6)}
.pin.on{outline:2px solid #fff; outline-offset:1px}
.pin:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.leaflet-tooltip.tip{background:#0C1214; color:var(--text); border:1px solid rgba(233,239,238,.16); border-radius:3px;
  box-shadow:0 8px 22px -10px #000; padding:6px 9px; font-size:12px; white-space:nowrap}
.leaflet-tooltip.tip::before{display:none}
.tip b{display:block; font-weight:600; font-size:12.5px}
.tip i{font-style:normal; color:var(--muted); font-size:10.5px; font-family:"IBM Plex Mono",monospace; letter-spacing:.1em; text-transform:uppercase}

/* ——— карточка объекта ——— */
/* попап достопримечательности: облачные края */
.cta{position:absolute; right:16px; top:16px; z-index:1000; display:flex; align-items:center; gap:10px}
.ctab{display:flex; align-items:center; gap:9px; padding:11px 18px; border:1px solid var(--line);
  border-radius:999px; background:rgba(16,22,25,.86); backdrop-filter:blur(8px); color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.32);
  cursor:pointer; transition:color .18s,border-color .18s,background .18s}
/* правило выше ставит display:flex и без этого перебивало бы атрибут hidden */
.ctab[hidden]{display:none}
.ctab:hover{color:var(--text); border-color:rgba(233,239,238,.38)}
.ctab.pri{color:var(--text)}
.ctab.pri:hover{background:#1B2429; border-color:rgba(232,181,75,.55)}
.ctab .d{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(232,181,75,.18)}
@media (max-width:720px){
  .cta{gap:7px; right:12px; top:12px}
  .ctab{padding:9px 13px; font-size:11px; letter-spacing:.1em}
}
/* модалка «Стать жителем» — пергаментный лист поверх карты */
.jw{position:fixed; inset:0; z-index:2100; display:flex; align-items:center; justify-content:center;
  padding:28px; background:rgba(8,9,7,.62); backdrop-filter:blur(6px); animation:mwIn .18s ease-out}
.jw[hidden]{display:none}
.jwin{width:100%; max-width:580px; max-height:92vh; overflow:auto; background:#f4ecdd; color:#33291b;
  border:1px solid rgba(74,58,34,.16); border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-family:Spectral,Georgia,serif; animation:mwUp .22s cubic-bezier(.2,.8,.3,1)}
.jwhead{display:flex; align-items:flex-start; gap:16px; padding:26px 26px 0}
.jwhead-t{flex:1; min-width:0}
.jwstep{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:#9d6a17}
.jwin h2{margin:9px 0 0; font-size:31px; line-height:1.1; font-weight:500; color:#241c11}
.jwsub{margin:10px 0 0; font-size:15.5px; line-height:1.5; color:#6d6350}
/* нумерованная дорожка «Дом · Оплата · Номер» над шагом выбора дома */
.jwsteps{display:flex; align-items:center; gap:8px; margin-top:18px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase}
.jwsteps[hidden]{display:none}
.jwstepi{display:flex; align-items:center; gap:7px; color:#a2967d; white-space:nowrap}
.jwstepi b{width:19px; height:19px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(74,58,34,.25); font-size:10.5px; font-weight:500; font-style:normal}
.jwstepi.on{color:#33291b}
.jwstepi.on b{border-color:transparent; background:#c98a22; color:#22190a}
.jwstepline{flex:1; height:1px; background:rgba(74,58,34,.18)}
.jwx{flex:none; width:30px; height:30px; border:1px solid rgba(74,58,34,.2); border-radius:50%;
  background:none; color:#6d6350; font-size:13px; line-height:1; cursor:pointer;
  transition:color .15s,border-color .15s}
.jwx:hover{color:#33291b; border-color:rgba(74,58,34,.4)}
/* пилюля-статус в шапке (карточка жителя) — заменяет крестик на этом шаге */
.jwpill{flex:none; padding:7px 14px; border-radius:999px; font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.jwpill[hidden]{display:none}
.jwpill.ok{background:rgba(77,122,63,.14); color:#3f6a33}
.jwpill.no{background:rgba(180,85,63,.14); color:#9c4a35}
.jwbody{padding:22px 26px 26px}
.jwintro{margin:0 0 20px; font-size:17.5px; line-height:1.55; color:#6d6350}
.jwswitch{margin:16px 0 0; text-align:center; font-size:15.5px; color:#8a7c62}
.jwswitch a{color:#9d6a17; text-decoration:none}
.jwswitch a:hover{color:#f0bd6b}
.jwlab{display:block; margin:14px 0 8px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#6d6350}
.jwlab2{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#6d6350}
.jwrow{display:flex; gap:10px; align-items:stretch}
.jwrow input{flex:1; min-width:0; padding:13px 14px; border:1px solid rgba(74,58,34,.22);
  border-radius:4px; background:#fbf6ea; color:#33291b; font-family:"IBM Plex Mono",monospace;
  font-size:17px; letter-spacing:.09em}
.jwrow input:focus{outline:none; border-color:rgba(157,106,23,.7)}
.jwbtn{flex:none; padding:0 20px; border:1px solid rgba(74,58,34,.26); border-radius:4px;
  background:rgba(74,58,34,.06); color:#33291b; font-family:"IBM Plex Mono",monospace;
  font-size:13.5px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  transition:background .15s}
.jwbtn:hover{background:rgba(74,58,34,.12)}
.jwerr{margin-top:9px; font-size:14px; color:#b4553f}
.jwdiv{display:flex; align-items:center; gap:12px; margin:22px 0 4px}
.jwdiv span{flex:1; height:1px; background:rgba(74,58,34,.13)}
.jwdiv i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:#6d6350}
.jwhouses{display:flex; flex-direction:column; gap:8px}
.jwhouse{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px;
  border:1px solid rgba(74,58,34,.16); border-radius:5px; background:#fbf6ea; cursor:pointer;
  font-family:Spectral,Georgia,serif; text-align:left; transition:border-color .16s,background .16s}
.jwhouse.on{border-color:rgba(157,106,23,.65); background:rgba(157,106,23,.09)}
.jwhouse .t{flex:1; min-width:0}
.jwhouse .n{display:block; font-size:17px; color:#33291b}
.jwhouse .s{display:block; margin-top:3px; font-size:13.5px; color:#6d6350}
.jwhouse .p{display:flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace;
  font-size:15px; color:#8a5c10}
.jwmark{flex:none; width:14px; height:14px; border-radius:50%; border:1px solid rgba(74,58,34,.3)}
.jwhouse.on .jwmark{border-color:#9d6a17; box-shadow:inset 0 0 0 3.5px #f6f0e4, inset 0 0 0 14px #9d6a17}
/* «срок пребывания» — сводка перед кнопкой оплаты, зависит от выбранного дома */
.jwterm{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px;
  padding:14px 0; border-top:1px solid rgba(74,58,34,.13); border-bottom:1px solid rgba(74,58,34,.13)}
.jwval2{font-size:16.5px; color:#33291b}
.jwgo{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px;
  padding:15px; border:none; border-radius:4px; background:#c98a22; color:#22190a;
  font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; transition:background .16s}
.jwgo:hover{background:#b0741a}
.jwghost{width:100%; margin-top:20px; padding:15px; border:1px solid rgba(74,58,34,.26);
  border-radius:4px; background:rgba(74,58,34,.06); color:#33291b;
  font-family:"IBM Plex Mono",monospace; font-size:15px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer}
.jwghost:hover{background:rgba(74,58,34,.12)}
.jwcard{margin-top:22px; border:1px solid rgba(74,58,34,.16); border-radius:5px; background:#fbf6ea;
  overflow:hidden}
.jwcard-top{display:flex; align-items:center; gap:16px; padding:18px 20px}
/* .sm — размер иконки в списке домов; раньше шёл атрибутом style. */
.jwicon.sm{width:38px; height:38px}
.jwicon{flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:4px;
  background:rgba(157,106,23,.14)}
.jwname{font-size:19px; color:#33291b}
.jwmono{font-family:"IBM Plex Mono",monospace; font-size:14px; letter-spacing:.09em; color:#6d6350}
.jwgrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(74,58,34,.13)}
.jwgrid > div{padding:16px 20px; background:#fbf6ea}
.jwval{margin-top:6px; font-size:18px}
.jwval.ok{color:#4d7a3f}
.jwval.no{color:#b4553f}
.jwdash{margin-top:20px; padding:22px; border:1px dashed rgba(157,106,23,.45); border-radius:5px;
  background:rgba(157,106,23,.07); text-align:center}
.jwdash.jwleft{text-align:left}
/* .jwgrid обычно живёт внутри .jwcard (та даёт рамку); здесь — отдельно, после .jwdash */
#jsDone .jwgrid{margin-top:18px; border:1px solid rgba(74,58,34,.16); border-radius:5px; overflow:hidden}
.jwcode{margin-top:10px; font-family:"IBM Plex Mono",monospace; font-size:27px; letter-spacing:.12em;
  color:#241c11}
/* пилюля с ID жителя (реальным секретом) под номером разрешения; сама и есть кнопка копирования */
.jwidpill{display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:6px 14px;
  border:1px solid rgba(74,58,34,.2); border-radius:999px; background:#fbf6ea; color:#6d6350;
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.06em; cursor:pointer;
  max-width:100%; transition:background .15s}
.jwidpill:hover{background:rgba(74,58,34,.08)}
.jwidpill-l{flex:none; letter-spacing:.16em; text-transform:uppercase; color:#8a7c62}
.jwidpill .jwmono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jwmuted{margin-top:7px; font-size:15px; color:#6d6350}
.jwnote{margin:16px 0 0; font-size:14.5px; line-height:1.5; color:#6d6350}
/* карточка жителя: слева портрет, справа краткие сведения */
.jwme{display:flex; gap:18px; align-items:flex-start; margin-top:22px}
.jwphoto{flex:none; width:112px; height:140px; border-radius:4px; overflow:hidden;
  border:1px solid rgba(74,58,34,.22); background:#efe3cd;
  box-shadow:0 6px 18px -10px rgba(40,28,10,.55)}
.jwphoto svg{display:block; width:100%; height:100%}
.jwmed{min-width:0; padding-top:2px}
.jwmename{font-family:"EB Garamond",Georgia,serif; font-weight:600; font-size:25px;
  line-height:1.1; color:#33291b}
.jwmerole{margin-top:5px; font-size:14.5px; color:#6d6350}
.jwmelist{display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:16px 0 0}
.jwmelist dt{align-self:center; font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:#8a7d64}
.jwmelist dd{margin:0; min-width:0; font-size:14.5px; color:#33291b; overflow-wrap:anywhere}
.jwmelist dd.jwmono{margin-top:0; font-size:14px}
.jwmenote{margin-top:3px; font-size:13.5px}
/* строки ID жителя / номера разрешения на карточке жителя */
.jwfacts{margin-top:14px; border-top:1px solid rgba(74,58,34,.13)}
.jwfact{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(74,58,34,.13)}
.jwfact .jwmono{font-size:14px; letter-spacing:.06em; overflow-wrap:anywhere; text-align:right}
.jwfactcopy{border:none; background:none; padding:0; cursor:pointer; color:#33291b}
.jwfactcopy:hover .jwmono{color:#9d6a17}
/* кнопки «Продлить» / «На карту» рядом */
.jwbtnrow{display:flex; gap:10px; margin-top:20px}
.jwbtnrow .jwgo,.jwbtnrow .jwghost{margin-top:0; flex:1}
/* полоска «осталось дней» на карточке «Обо мне», от даты выдачи до истечения */
.jwbarwrap{margin-top:18px}
.jwbarrow{display:flex; align-items:baseline; justify-content:space-between; gap:16px}
.jwbar{height:7px; margin-top:11px; border-radius:999px; background:rgba(74,58,34,.12); overflow:hidden}
.jwbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#c98a22,#e8b45a);
  font-style:normal}
.jwbarends{display:flex; justify-content:space-between; margin-top:8px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:#a2967d}
@media (max-width:560px){
  .jwme{gap:14px}
  .jwphoto{width:88px; height:110px}
  .jwmename{font-size:21px}
  .jwmelist{gap:7px 10px}
}
.jwrow-url{margin-top:10px; align-items:center}
@media (max-width:520px){
  .jw{padding:14px}
  .jwhead{padding:20px 18px 0}
  .jwbody{padding:18px}
  .jwin h2{font-size:26px}
}
.mw{position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:18px;
  background:rgba(6,10,11,.66); backdrop-filter:blur(7px); animation:mwIn .18s ease-out}
.mw[hidden]{display:none}
@keyframes mwIn{from{opacity:0}to{opacity:1}}
@keyframes mwUp{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
.mwin{position:relative; width:min(1400px,96vw); max-height:92vh; animation:mwUp .24s cubic-bezier(.2,.9,.3,1)}
.mwcloud{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55))}
.mwcloud path{fill:var(--panel-solid); stroke:rgba(233,239,238,.16); stroke-width:1.5}
.mwgrid{position:relative; padding:var(--pad,44px); display:grid; gap:32px; max-height:92vh;
  box-sizing:border-box; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr); align-items:center}
.mwpic{position:relative; margin:0; align-self:center; width:100%; aspect-ratio:4/3;
  max-height:calc(92vh - 130px); justify-self:center; border-radius:10px; overflow:hidden;
  background:#0E1417 no-repeat center/cover; border:1px solid rgba(233,239,238,.12)}
.mwpic{cursor:grab; touch-action:none}
.mwpic.dragging{cursor:grabbing}
.mwpic img{position:absolute; left:0; top:0; display:block; width:auto; height:auto; max-width:none;
  transform-origin:0 0; user-select:none; -webkit-user-drag:none}
.mwz{position:absolute; right:10px; bottom:10px; z-index:2; display:flex; gap:6px}
.mwzb{width:31px; height:31px; padding:0; border:1px solid rgba(233,239,238,.2); border-radius:7px;
  background:rgba(8,12,14,.62); color:#DCE6E7; font-size:15px; line-height:1; cursor:pointer;
  backdrop-filter:blur(6px); transition:background .15s}
.mwzb:hover{background:rgba(8,12,14,.92)}
.mwtxt{min-height:0; max-height:calc(92vh - 130px); overflow:auto; padding-right:10px;
  align-self:center; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(233,239,238,.22) transparent}
.mwtxt::-webkit-scrollbar{width:6px}
.mwtxt::-webkit-scrollbar-track{background:transparent}
.mwtxt::-webkit-scrollbar-thumb{background:rgba(233,239,238,.22); border-radius:3px}
.mwtxt h2{font-family:"EB Garamond",Georgia,serif; font-weight:600; font-size:clamp(28px,2.6vw,40px);
  line-height:1.06; margin:0}
.mwtxt .lead{margin:12px 0 0; font-size:17px; line-height:1.55; color:#C9D5D5}
.mwtxt .body{margin:18px 0 0}
.mwtxt .body p{margin:0 0 11px; font-size:15.5px; line-height:1.62; color:#A9B9BC; text-wrap:pretty}
.mwtxt .body p:last-child{margin-bottom:0}
.mwtxt .body p.q{margin:14px 0; font-family:"EB Garamond",Georgia,serif; font-size:19px;
  line-height:1.45; font-style:italic; color:#DCE4E3}
.mwtxt .leg p{margin:0; font-family:"EB Garamond",Georgia,serif; font-size:19px; line-height:1.5;
  padding-left:14px; border-left:2px solid rgba(232,181,75,.5)}
.mwtxt dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:18px 0 0; padding-top:15px;
  border-top:1px solid rgba(233,239,238,.12); font-family:"IBM Plex Mono",monospace; font-size:13px}
.mwtxt dt{color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; align-self:center}
.mwtxt dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.mwx{position:absolute; z-index:3; top:calc(var(--pad,44px) - 16px); right:calc(var(--pad,44px) - 16px);
  width:34px; height:34px; border:1px solid rgba(233,239,238,.18); border-radius:50%;
  background:rgba(8,12,14,.6); color:#DCE6E7; font-size:14px; line-height:1; cursor:pointer;
  transition:background .15s,color .15s}
.mwx:hover{background:rgba(8,12,14,.9); color:#fff}
@media (max-width:860px){
  .mwgrid{grid-template-columns:1fr; grid-template-rows:minmax(120px,38%) minmax(0,1fr); gap:16px}
  .mwtxt h2{font-size:26px}
}
.card:not(.full) .leg,.card:not(.full) #cp{display:none}
.card{position:absolute; right:20px; bottom:20px; width:min(480px,42vw); z-index:1000; margin:0;
  display:flex; flex-direction:column; background:var(--panel-solid);
  border:1px solid rgba(233,239,238,.14); border-radius:6px;
  box-shadow:0 28px 64px -24px #000; overflow:hidden; max-height:calc(100vh - 40px);
  transform:translateY(6px); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease}
.card.show{opacity:1; transform:none; pointer-events:auto}
.prev{position:relative; flex:0 0 auto; height:clamp(160px,26vh,250px); background:#0E1417 no-repeat;
  background-size:cover; border-bottom:1px solid rgba(233,239,238,.12)}
.prev .frame{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,15,17,.42) 0%, rgba(10,15,17,0) 34%, rgba(10,15,17,0) 62%, rgba(22,30,34,.9) 100%),
             radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 52%, rgba(8,12,14,.42) 100%)}
.cbody{padding:18px 22px 20px; overflow:auto; min-height:0}
.card .ct{display:flex; align-items:center; gap:7px; margin-bottom:6px}
.card .dot{width:9px; height:9px; border-radius:2px; background:var(--cc)}
.card .ck{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.card h2{font-family:"EB Garamond",Georgia,serif; font-weight:600; font-size:clamp(26px,2.1vw,33px); line-height:1.08; margin:0; padding-right:22px}
.card .lead{margin:10px 0 0; font-size:16px; line-height:1.55; color:#C9D5D5}
.leg{margin:17px 0 0; padding:15px 0 0; border-top:1px solid rgba(233,239,238,.12)}
.lgl{display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); opacity:.9; margin-bottom:9px}
.leg p{margin:0; padding-left:15px; font-family:"EB Garamond",Georgia,serif; font-size:19px; line-height:1.52;
  color:#DCE4E2; border-left:2px solid color-mix(in srgb, var(--cc) 65%, transparent)}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; margin:17px 0 0; padding-top:15px;
  border-top:1px solid rgba(233,239,238,.12); font-family:"IBM Plex Mono",monospace; font-size:13.5px}
.card dt{color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; align-self:center}
.card dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.card .x{position:absolute; z-index:2; top:10px; right:10px; width:30px; height:30px; border:0; border-radius:4px;
  background:rgba(8,12,14,.55); color:#DCE6E6; cursor:pointer; font-size:16px; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.card .x:hover{background:rgba(8,12,14,.85); color:#fff}

/* ——— кнопки управления ——— */
.zoom{position:absolute; right:16px; top:16px; z-index:1000; display:flex; flex-direction:column; gap:5px}
.zbtn{width:34px; height:34px; display:grid; place-items:center; cursor:pointer; background:var(--panel);
  color:var(--text); border:1px solid var(--line); border-radius:3px; font-size:16px; line-height:1;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); transition:background .14s, color .14s}
.zbtn:hover{background:rgba(30,40,45,.92)}
.zbtn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.zbtn svg{width:15px; height:15px}
.zbtn.tg{color:var(--muted)}
.zbtn.tg[aria-pressed="true"]{color:#141A1C; background:var(--accent); border-color:var(--accent)}
.zgap{height:9px}


@media (max-width:720px){
  .hud{left:13px; top:12px; max-width:calc(100vw - 76px)}
  .scrim.tl{height:190px}
  .hud h1{font-size:19px; margin-bottom:8px}
  .chip{font-size:11px; padding:6px 9px 6px 8px}
  .chip .n{display:none}
  .card{left:12px; right:12px; width:auto; bottom:12px; max-height:72vh}
  .prev{height:clamp(120px,20vh,170px)}
  .cbody{padding:14px 16px 16px}
  .card h2{font-size:24px}
  .card .lead{font-size:14.5px}
  .leg p{font-size:16.5px; padding-left:12px}
  .card dl{font-size:12.5px; gap:6px 14px}
  .card dt{font-size:10px}
  .zoom{right:12px; top:12px}
  }
@media (prefers-reduced-motion:reduce){ .pin,.card,.chip{transition:none} }
/* Карточка при наведении — только подсказка. Курсор она не перехватывает:
   иначе метка под ней перекрывалась бы, ловила mouseout, карточка пряталась,
   метка снова попадала под курсор — и так по кругу (мигание), а клик уходил
   в карточку вместо метки. По той же причине шапка прозрачна для мыши,
   кликаются только фишки категорий. */
.card, .card.show{pointer-events:none}
.card .x{display:none}
.hud{pointer-events:none}
.hud .chip{pointer-events:auto}
/* слева внизу стоит кнопка правки — приподнимаем над ней карточку,
   а в режиме правки ещё и над раскрытой панелью */
.card.left{left:20px; right:auto; bottom:66px}
.app:has(.hbe.on) .card.left{bottom:238px}

/* ——— страница 404 ———
   Отдельного стилевого файла нет намеренно: у публичной поверхности один
   таблиц стилей на все страницы, иначе набор ресурсов у ошибки и у карты
   различался бы и был бы отличим активной пробой. */
.err{position:fixed; inset:0; display:grid; place-items:center; padding:24px; overflow:auto}
.err-in{max-width:520px; text-align:center}
.err-code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted)}
.err h1{margin:.5em 0 .35em; font-family:"EB Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(28px,6vw,42px); line-height:1.1}
.err p{margin:0 0 1.6em; color:var(--muted); font-size:15px; line-height:1.65}
.err a{display:inline-block; padding:10px 18px; border-radius:8px; text-decoration:none;
  color:var(--board); background:var(--accent); font-weight:600; font-size:14px}
.err a:hover{filter:brightness(1.08)}
.err a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ——— панель ручной расстановки меток ———
   Раньше эти правила скрипт вставлял отдельным <style>. Публичная
   поверхность отдаётся без 'unsafe-inline', такой тег молча отбрасывался
   бы вместе со всей панелью, поэтому правила лежат здесь. */
.hbe{position:absolute;left:20px;bottom:20px;z-index:1200;font-family:"IBM Plex Mono",monospace;font-size:11px;color:#DCE6E7;letter-spacing:.04em}
.hbe button{font:inherit;color:inherit;background:rgba(18,26,28,.86);border:1px solid rgba(233,239,238,.18);border-radius:5px;padding:6px 10px;cursor:pointer;backdrop-filter:blur(6px)}
.hbe button:hover{border-color:rgba(233,239,238,.44)}
.hbe .box{display:none;margin-top:6px;padding:10px 12px;width:252px;background:rgba(18,26,28,.92);border:1px solid rgba(233,239,238,.18);border-radius:6px;line-height:1.75;backdrop-filter:blur(6px)}
.hbe.on .box{display:block}
.hbe.on .t{border-color:#E0A03C;color:#E0A03C}
.hbe .row{display:flex;gap:6px;margin-top:9px}
.hbe b{color:#F2F6F5;font-weight:600}
.hbe .k{color:#8FA6AA}
.hbe-drag .pin{cursor:grab}
.hbe-drag .pin:active{cursor:grabbing}

/* ——— панель разрешений (#admin, только для владельца) ——— */
.adm{position:fixed; inset:0; z-index:2200; display:flex; align-items:center; justify-content:center;
  padding:28px; background:rgba(8,9,7,.62); backdrop-filter:blur(6px); animation:mwIn .18s ease-out}
.adm[hidden]{display:none}
.admin{width:100%; max-width:760px; max-height:88vh; display:flex; flex-direction:column;
  background:#f4ecdd; color:#33291b; border:1px solid rgba(74,58,34,.16); border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); font-family:Spectral,Georgia,serif;
  animation:mwUp .22s cubic-bezier(.2,.8,.3,1)}
.admhead{display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none;
  padding:22px 26px; border-bottom:1px solid rgba(74,58,34,.13)}
.admhead h2{margin:0; font-size:24px; font-weight:500}
.admbody{padding:6px 26px 22px; overflow:auto}
/* выдача тестовых разрешений в обход суточного лимита — панель, только для владельца */
.admissue{display:flex; gap:10px; padding-bottom:16px; border-bottom:1px solid rgba(74,58,34,.13)}
.admissue select{flex:1; min-width:0; padding:12px 14px; border:1px solid rgba(74,58,34,.22);
  border-radius:4px; background:#fbf6ea; color:#33291b; font-family:Spectral,Georgia,serif; font-size:15px}
.admissued{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding-bottom:16px;
  border-bottom:1px solid rgba(74,58,34,.13)}
.admissued[hidden]{display:none}
.admlist{display:flex; flex-direction:column}
.admrow{display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid rgba(74,58,34,.13)}
.admrow:last-child{border-bottom:none}
.admrow-main{flex:1; min-width:0}
.admrow-permit{font-family:"IBM Plex Mono",monospace; font-size:15px; letter-spacing:.06em}
.admrow-house{margin-top:3px; font-size:14px; color:#6d6350}
.admrow-dates{flex:none; text-align:right; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:#8a7c62; line-height:1.6}
.admrevoke{flex:none; padding:8px 14px; border:1px solid rgba(180,85,63,.4); border-radius:4px;
  background:rgba(180,85,63,.08); color:#9c4a35; font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .15s}
.admrevoke:hover{background:rgba(180,85,63,.16)}
.admrevoke:disabled{opacity:.5; cursor:default}
.admmsg{padding:26px 0; text-align:center; color:#8a7c62; font-size:15px}
.jwpill.off{background:rgba(74,58,34,.08); color:#8a7c62}

/* ——— жители в долине ———
   Человечек — divIcon в своей панели под метками: объекты остаются
   кликабельными, а сам он мышь не ловит. Ноги стоят в точке маркера. */
.leaflet-walkers-pane{z-index:590; pointer-events:none}
.walker{position:absolute; left:-12px; top:-37px; width:24px; height:39px; pointer-events:none;
  transform-origin:50% 100%; animation:wkIn .7s cubic-bezier(.2,.8,.3,1.35) both}
/* светлый контур отделяет фигурку от пёстрой подложки, тень сажает на землю */
.walker svg{position:relative; display:block; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 0 .8px rgba(255,248,232,.95)) drop-shadow(0 0 .8px rgba(255,248,232,.95))
    drop-shadow(0 2px 3px rgba(0,0,0,.55))}
/* пятно цвета пальто под ногами — видно, чей это житель, и на мелком зуме */
.walker::before{content:""; position:absolute; left:50%; bottom:0; width:22px; height:8px; margin-left:-11px;
  border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--coat) 75%, transparent), transparent)}
.walker.l svg{transform:scaleX(-1)}
.walker.gone{animation:wkOut .7s ease-in forwards}
/* круг на земле в момент появления */
.walker::after{content:""; position:absolute; left:50%; bottom:-2px; width:36px; height:12px; margin-left:-18px;
  border-radius:50%; border:1.5px solid var(--coat); opacity:0; animation:wkRing 1.2s ease-out .2s}
.wk-shadow{fill:rgba(0,0,0,.34)}
.wk-leg{fill:none; stroke:#2B2724; stroke-width:2.3; stroke-linecap:round;
  transform-box:view-box; transform-origin:10px 19.5px}
.wk-arm{fill:none; stroke:color-mix(in srgb, var(--coat) 68%, #000); stroke-width:1.9; stroke-linecap:round;
  transform-box:view-box; transform-origin:10px 12.6px}
.wk-coat{fill:var(--coat)}
.wk-head{fill:var(--skin)}
.wk-hat{fill:#3A302A; stroke:#3A302A; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round}
.wk-bob{transform-box:view-box}
.walker.go .wk-leg.wk-f,.walker.go .wk-arm.wk-b{animation:wkSwing var(--pace) ease-in-out infinite alternate}
.walker.go .wk-leg.wk-b,.walker.go .wk-arm.wk-f{animation:wkSwing var(--pace) ease-in-out infinite alternate-reverse}
.walker.go .wk-arm{animation-name:wkArm}
.walker.go .wk-bob{animation:wkBob var(--pace) ease-in-out infinite}
@keyframes wkSwing{from{transform:rotate(27deg)}to{transform:rotate(-27deg)}}
@keyframes wkArm{from{transform:rotate(24deg)}to{transform:rotate(-24deg)}}
@keyframes wkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9px)}}
@keyframes wkIn{0%{opacity:0; transform:translateY(-12px) scale(.3)}55%{opacity:1}100%{opacity:1; transform:none}}
@keyframes wkOut{0%{opacity:1; transform:none}100%{opacity:0; transform:translateY(-8px) scale(.45)}}
@keyframes wkRing{0%{opacity:.9; transform:scale(.25)}100%{opacity:0; transform:scale(1.7)}}

/* счётчик — стеклянная плашка под кнопками справа, цифры прокручиваются барабаном.
   По центру сверху он наезжал на кнопки уже на ноутбучной ширине */
.live{position:absolute; top:72px; right:16px; z-index:1000; display:flex; align-items:center; gap:12px;
  padding:9px 20px 9px 15px; border:1px solid var(--line); border-radius:999px;
  background:rgba(16,22,25,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.32); pointer-events:none;
  transform-origin:100% 0; animation:liveIn .55s cubic-bezier(.2,.8,.3,1.25) both}
.live[hidden]{display:none}
.live-dot{position:relative; width:9px; height:9px; border-radius:50%; background:#63B06D; flex:0 0 auto;
  box-shadow:0 0 10px rgba(99,176,109,.7); transition:background .4s, box-shadow .4s}
.live-dot::after{content:""; position:absolute; inset:0; border-radius:50%; border:1.5px solid #63B06D;
  animation:livePing 2.2s cubic-bezier(.2,.6,.3,1) infinite}
.live.empty .live-dot{background:#5A6A6F; box-shadow:none}
.live.empty .live-dot::after{animation:none; opacity:0}
.live-n{display:flex; font:500 26px/1 "IBM Plex Mono",ui-monospace,monospace; color:var(--text);
  font-variant-numeric:tabular-nums; transition:color .5s, text-shadow .5s}
.live-n .col{display:block; height:1em; overflow:hidden}
.live-n .strip{display:flex; flex-direction:column; transform:translateY(calc(var(--d,0) * -1em));
  transition:transform .75s cubic-bezier(.2,.9,.25,1.12)}
.live-n i{display:block; height:1em; font-style:normal}
.live.empty .live-n{color:var(--muted)}
.live.up .live-n{animation:liveUp 1.2s ease-out}
.live.down .live-n{animation:liveDown 1.2s ease-out}
.live-t{display:flex; flex-direction:column; gap:3px}
.live-t b{font:600 12.5px/1 "Manrope",sans-serif; color:var(--text)}
.live-t em{font:400 9px/1 "IBM Plex Mono",monospace; font-style:normal; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted)}
.live-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
@keyframes liveIn{from{opacity:0; transform:translateY(-10px) scale(.94)}to{opacity:1; transform:none}}
@keyframes livePing{0%{opacity:.85; transform:scale(1)}80%,100%{opacity:0; transform:scale(2.8)}}
@keyframes liveUp{0%{color:#8FD99A; text-shadow:0 0 14px rgba(99,176,109,.8)}100%{color:var(--text); text-shadow:none}}
@keyframes liveDown{0%{color:var(--accent); text-shadow:0 0 14px rgba(232,181,75,.6)}100%{text-shadow:none}}
/* на узком экране под кнопками уже шапка — счётчик уходит в нижний правый угол */
@media (max-width:860px){
  .live{top:auto; bottom:16px; right:12px; padding:7px 16px 7px 12px; gap:10px}
  .live-n{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .walker::after,.live-dot::after{animation:none; opacity:0}
  .live-n .strip{transition:none}
  .live.up .live-n,.live.down .live-n{animation:none}
}

/* ——— разметка дорог и областей (только владелец) ———
   Пока открыта разметка, метки объектов и их круги мышь не ловят: иначе
   клик по кругу подсветки съедался бы им и точку дороги там не поставить. */
.leaflet-pathsEdit-pane{z-index:640}
.pe-on .leaflet-overlay-pane .leaflet-interactive,
.pe-on .leaflet-marker-pane .pin{pointer-events:none}
.pe-on .leaflet-tooltip-pane{display:none}
.app.pe-draw #map.leaflet-container{cursor:crosshair}
.ctab[aria-pressed="true"]{color:var(--text); border-color:rgba(242,193,78,.6); background:#1B2429}

.pe{position:absolute; left:50%; bottom:18px; z-index:1100; transform:translateX(-50%);
  width:max-content; max-width:calc(100vw - 32px); padding:8px 8px 9px; border:1px solid var(--line); border-radius:14px;
  background:rgba(14,19,22,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.45); animation:peIn .28s cubic-bezier(.2,.8,.3,1.2) both}
.pe[hidden]{display:none}
.pe-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.pe-tools{display:flex; gap:2px; padding:2px; border-radius:10px; background:rgba(255,255,255,.05)}
.pe button{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border:0; border-radius:8px;
  background:transparent; color:var(--muted); font:500 12.5px/1 "Manrope",sans-serif; cursor:pointer;
  transition:background .15s, color .15s}
.pe button:hover:not(:disabled){color:var(--text); background:rgba(255,255,255,.07)}
.pe button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pe button:disabled{opacity:.38; cursor:default}
.pe-tools button[aria-pressed="true"]{color:#15110D; background:#F2C14E}
.pe .pe-save{color:#15110D; background:var(--accent); font-weight:600}
.pe .pe-save:hover:not(:disabled){color:#15110D; background:#F2C865}
.pe .pe-x{width:32px; padding:0; justify-content:center}
.pe-sep{width:1px; height:20px; margin:0 3px; background:var(--line)}
.pe-ic{display:block; width:14px; height:14px; flex:0 0 auto}
.pe-ic.road{border-bottom:3px solid currentColor; border-radius:0 0 8px 8px; transform:rotate(-20deg) translateY(-3px)}
.pe-ic.area{border:1.8px dashed currentColor; border-radius:4px}
.pe-ic.edit{border:2px solid currentColor; border-radius:50%; width:10px; height:10px; box-shadow:5px 5px 0 -2px currentColor}
.pe-info{display:flex; justify-content:space-between; gap:18px; margin:7px 6px 0; max-width:720px;
  font:400 11.5px/1.45 "Manrope",sans-serif; color:var(--muted)}
.pe-info #peHint.msg{color:#8FD99A}
.pe-info #peHint.bad{color:#F08A7A}
.pe-stat{flex:0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.04em; white-space:nowrap}
.pe-stat.warn{color:var(--accent)}
/* ручки вершин: полные — вершины, полупрозрачные — середины отрезков */
.pe-h{border-radius:50%; background:#fff; border:2px solid #15110D; box-shadow:0 1px 4px rgba(0,0,0,.5); cursor:move}
.pe-h:hover{background:#F2C14E}
.pe-h.mid{background:rgba(255,255,255,.45); border-width:1.5px; cursor:copy}
@keyframes peIn{from{opacity:0; transform:translate(-50%,12px)}to{opacity:1; transform:translateX(-50%)}}
@media (max-width:720px){ .pe-info{flex-direction:column; gap:4px} }