.controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:20px 0 12px}
.controls label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.controls select{font:inherit;font-size:15px;color:var(--ink);padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;max-width:100%;min-width:180px}
.seg{display:flex;border:1px solid var(--ink);border-radius:4px;overflow:hidden}
.seg button{font:inherit;font-size:14px;padding:8px 12px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button:disabled{opacity:.4;cursor:not-allowed}

.maparea{position:relative;height:min(68vh,620px);min-height:360px;border:1px solid var(--line)}
#map{position:absolute;inset:0;background:#fff}
.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);background:rgba(255,255,255,.85);font-size:15px}
.overlay[hidden]{display:none}
.overlay p{max-width:46ch;margin:0 auto 8px}

.panels{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px}
.panels section{min-width:0}
@media (max-width:700px){.panels{grid-template-columns:1fr}}

table.res{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.res th,table.res td{padding:6px 4px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
table.res th:first-child,table.res td:first-child{text-align:left}
table.res th{font-weight:600;color:var(--muted);font-size:12.5px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:baseline}
.bar{height:4px;background:var(--line);margin-top:4px}
.bar i{display:block;height:100%}
.small{font-size:13px;margin-top:16px}
.demo-banner{background:#fff6d6;border:1px solid #e8d48a;padding:8px 12px;font-size:14px;max-width:none}
.maplibregl-popup-content{font-family:var(--font);font-size:13px;padding:6px 10px}
table.key{border-collapse:collapse;font-size:12.5px;margin-top:16px;width:100%}
table.key caption{text-align:left;color:var(--muted);font-size:12.5px;padding-bottom:6px}
table.key th{font-weight:500;color:var(--muted);text-align:center;padding:2px 3px;white-space:nowrap}
table.key td{padding:3px;text-align:center}
table.key td:first-child{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chip{display:inline-block;width:100%;min-width:22px;height:14px;border-radius:2px}
.compare{border:1px solid var(--line);background:var(--soft);padding:12px 14px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.compare p{margin:0;font-size:14px}
.cmp-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.cmp-row label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);min-width:0;flex:1 1 180px}
.cmp-row select{font:inherit;font-size:14px;color:var(--ink);padding:6px 7px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%;min-width:0}
.cmp-tag{font-weight:700;width:22px;height:22px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:3px;font-size:13px;margin-bottom:6px}
.cmp-result{margin:10px 0 0;font-size:15px}
.compare[hidden]{display:none}