:root { --ink:#202124; --mute:#5f6368; --line:#e8eaed; --blue:#1a73e8; --shadow:0 2px 6px rgba(0,0,0,.3); }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font:14px/1.45 Roboto, "Segoe UI", Arial, sans-serif; color:var(--ink); }
#map { position:fixed; inset:0; background:#18324c; }
.leaflet-container { background:#18324c; font:inherit; }
.leaflet-tile { image-rendering:auto; }
button { font:inherit; color:inherit; }

#dmap { position:fixed; inset:0; z-index:700; }
#dmap.leaflet-container { background:#0e121a; }
#dback { display:none; order:-1; }
#dung, #copy { max-width:200px; }
.in-dung #dback { display:inline-flex; }
.in-dung .chip.go:not(#dback), .in-dung #scale, .in-dung .sep { display:none; }

#top { position:fixed; z-index:1000; left:12px; top:12px; width:392px; max-width:calc(100vw - 24px); display:flex; flex-direction:column; max-height:calc(100vh - 24px); pointer-events:none; }
#top > * { pointer-events:auto; }
#searchbox { display:flex; align-items:center; height:48px; background:#fff; border-radius:24px; box-shadow:var(--shadow); padding:0 6px; flex:none; }
#q { flex:1; min-width:0; border:0; outline:0; font-size:16px; background:none; padding:0 4px; color:var(--ink); }
#q::-webkit-search-cancel-button { display:none; }
.icon { width:38px; height:38px; flex:none; border:0; background:none; border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--mute); }
.icon:hover { background:#f1f3f4; }
.icon svg { width:22px; height:22px; fill:currentColor; }

#results { list-style:none; margin:8px 0 0; padding:6px 0; background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:auto; }
#results li { display:flex; gap:10px; align-items:center; padding:8px 14px; cursor:pointer; }
#results li:hover, #results li.on { background:#f1f3f4; }
.dot { width:12px; height:12px; border-radius:50%; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.2); }
.r-name { font-weight:500; }
.r-sub { color:var(--mute); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r-txt { min-width:0; }

#panel { margin-top:8px; background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:auto; position:relative; }
#panel .head { padding:16px 44px 12px 18px; }
#panel h1 { font-size:22px; font-weight:400; margin:0 0 2px; word-break:break-word; }
#panel .sub { color:var(--mute); }
#panel .cls { font-weight:500; }
#panel .close { position:absolute; right:4px; top:6px; }
#panel .badge { display:inline-block; margin-top:8px; padding:2px 10px; border-radius:12px; color:#fff; font-size:12.5px; }
#panel dl { margin:0; padding:6px 0; border-top:1px solid var(--line); }
#panel dl div { display:flex; gap:14px; padding:7px 18px; }
#panel dt { color:var(--mute); width:112px; flex:none; }
#panel dd { margin:0; min-width:0; word-break:break-word; }
#panel a { color:var(--blue); text-decoration:none; cursor:pointer; }
#panel a:hover { text-decoration:underline; }
#panel .note { margin:0; padding:10px 18px; border-top:1px solid var(--line); color:var(--mute); font-size:13px; }
#panel .act { display:flex; gap:8px; padding:10px 18px 14px; border-top:1px solid var(--line); }
#panel .act button, #panel .act a { border:1px solid #dadce0; background:#fff; color:var(--blue); border-radius:18px; padding:6px 14px; cursor:pointer; font-weight:500; }
#panel .act button:hover, #panel .act a:hover { background:#f6fafe; text-decoration:none; }
#panel ul { list-style:none; margin:0; padding:0 0 6px; border-top:1px solid var(--line); }
#panel ul li { display:flex; gap:10px; align-items:center; padding:7px 18px; cursor:pointer; }
#panel ul li:hover { background:#f1f3f4; }

#chips { position:fixed; z-index:900; left:416px; right:12px; top:18px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px; }
#chips::-webkit-scrollbar { display:none; }
.chip { flex:none; height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 14px; background:#fff; border:0; border-radius:17px; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; white-space:nowrap; font-size:13.5px; }
.chip:hover { background:#f1f3f4; }
.chip i { width:10px; height:10px; border-radius:50%; }
.chip.on { background:#d2e3fc; color:#174ea6; }
.chip.sel { padding:0 6px 0 8px; }
.chip select { border:0; outline:0; background:none; font:inherit; cursor:pointer; color:inherit; }
.chip.go { background:#26415c; color:#fff; }
.chip.go:hover { background:#34587c; }
.sep { width:1px; flex:none; background:rgba(255,255,255,.3); margin:4px 2px; }

#hover { position:fixed; z-index:950; left:0; top:0; width:250px; padding:4px 0; background:#fff; border-radius:10px; box-shadow:var(--shadow); }
.h-row { display:flex; gap:9px; align-items:center; padding:6px 12px; }
.h-row .r-txt { flex:1; }
.h-row .r-name { cursor:pointer; }
.h-row .r-name:hover { color:var(--blue); }
.h-row a, #panel .act a { color:var(--blue); text-decoration:none; font-weight:500; }
.h-row a { flex:none; font-size:12.5px; }
.h-row a:hover { text-decoration:underline; }
.h-more { padding:3px 12px 6px; color:var(--mute); font-size:12px; }
#count { position:fixed; z-index:800; left:50%; transform:translateX(-50%); bottom:10px; padding:3px 12px; background:rgba(255,255,255,.88); border-radius:12px; font-size:12px; color:var(--ink); white-space:nowrap; }
#zoom { position:fixed; z-index:900; right:12px; bottom:58px; width:40px; background:#fff; border-radius:8px; box-shadow:var(--shadow); overflow:hidden; }
#zoom button { display:block; width:100%; height:40px; border:0; background:#fff; font-size:24px; line-height:1; color:var(--mute); cursor:pointer; }
#zoom button:hover { background:#f1f3f4; color:var(--ink); }
#zoom button + button { border-top:1px solid var(--line); }
#scale { position:fixed; z-index:800; right:12px; bottom:14px; color:#fff; font-size:11px; text-align:center; text-shadow:0 1px 2px #000; }
#scale i { display:block; height:5px; margin-top:1px; border:2px solid #fff; border-top:0; }

.cl { display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:500; box-shadow:0 1px 5px rgba(0,0,0,.55); cursor:pointer; }
.cl b { display:grid; place-items:center; width:calc(100% - 8px); height:calc(100% - 8px); border-radius:50%; background:rgba(22,30,42,.86); font-weight:500; font-size:12px; }

.lbl { color:#fff; font-size:12px; white-space:nowrap; text-shadow:0 0 3px #000, 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); pointer-events:none; transform:translate(-50%,-50%); width:max-content; }
.lbl.city { font-weight:700; font-size:13px; }
.lbl.cont { font-size:18px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; font-weight:300; }
.pin svg { display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

#about { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:16px; }
[hidden] { display:none !important; }
#about .box { position:relative; background:#fff; border-radius:14px; padding:22px 26px; width:520px; max-width:100%; max-height:100%; overflow:auto; }
#about h2 { margin:0 0 8px; font-weight:400; font-size:22px; }
#about .close { position:absolute; right:8px; top:8px; }
#about .fine { color:var(--mute); font-size:12.5px; }
#about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
#about-stats div { background:#f1f3f4; border-radius:10px; padding:10px; text-align:center; font-size:12.5px; color:var(--mute); }
#about-stats b { display:block; font-size:21px; font-weight:400; color:var(--ink); }

@media (max-width:760px) {
  #chips { left:12px; top:68px; }
  #panel { max-height:46vh; }
  #top { max-height:calc(100vh - 24px); }
  #panel, #results { margin-top:52px; }
  #scale { display:none; }
}