:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232c; --line:#2a323d;
  --fg:#e6edf3; --fg2:#9aa7b4; --accent:#2f81f7; --ok:#3fb950; --warn:#d29922;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--fg)}
#map{position:absolute;inset:0}
#panel{
  position:absolute;top:0;left:0;bottom:0;width:330px;z-index:5;
  background:linear-gradient(180deg,rgba(22,27,34,.97),rgba(22,27,34,.93));
  border-right:1px solid var(--line);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;overflow:hidden;
}
#panel header{padding:14px 14px 8px}
#panel h1{margin:0;font-size:16px;letter-spacing:.5px}
.sub{margin:4px 0 0;font-size:11px;color:var(--fg2)}
.row{padding:6px 14px}
.toolbar{display:flex;gap:6px}
.mini{
  flex:1;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:5px 0;font-size:12px;cursor:pointer
}
.mini:hover{border-color:var(--accent);color:var(--accent)}
select,input[type=text]{
  width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;font-size:12px;outline:none
}
#layers{flex:1;overflow-y:auto;padding:4px 8px 10px}
#layers::-webkit-scrollbar{width:8px}
#layers::-webkit-scrollbar-thumb{background:#2f3a46;border-radius:4px}
.group{margin:8px 6px 4px;font-size:11px;color:var(--fg2);text-transform:uppercase;letter-spacing:1px}
.item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}
.item:hover{background:var(--panel2)}
.item input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.item .sw{width:12px;height:12px;border-radius:3px;flex:0 0 auto;border:1px solid rgba(255,255,255,.25)}
.item .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .ct{flex:0 0 auto;font-size:11px;color:var(--fg2);font-variant-numeric:tabular-nums}
.item.loading .ct{color:var(--warn)}
.item .hvy{
  font-style:normal;font-size:10px;line-height:1;padding:1px 4px;margin-left:5px;
  border:1px solid var(--warn);color:var(--warn);border-radius:3px;vertical-align:middle
}
.item .skp{
  font-style:normal;font-size:10px;line-height:1;padding:1px 4px;margin-left:5px;
  border:1px solid #4b5563;color:#8b98a5;border-radius:3px;vertical-align:middle
}
.item.off{opacity:.55;cursor:default}
.item.off:hover{background:transparent}
footer{border-top:1px solid var(--line);padding:8px 14px 12px;max-height:34%;overflow-y:auto}
#legend{font-size:11px;color:var(--fg2);line-height:1.7}
#legend .lg{display:flex;align-items:center;gap:6px}
#legend .dot{width:10px;height:10px;border-radius:50%}
.status{margin-top:6px;font-size:11px;color:var(--ok)}
.status.err{color:#f85149}
.pill{
  position:absolute;bottom:14px;left:346px;z-index:4;background:rgba(22,27,34,.92);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--fg2)
}
.maplibregl-popup-content{
  background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;font-size:12px;max-width:340px;max-height:320px;overflow:auto
}
.maplibregl-popup-content h4{margin:0 0 6px;font-size:13px;color:#fff}
.maplibregl-popup-content table{border-collapse:collapse;font-size:12px}
.maplibregl-popup-content td{padding:2px 6px 2px 0;vertical-align:top;border-bottom:1px solid #222a33}
.maplibregl-popup-content td.k{color:var(--fg2);white-space:nowrap}
.maplibregl-popup-close-button{color:var(--fg2);font-size:16px;padding:2px 6px}
@media (max-width:760px){
  #panel{width:100%;height:52%;top:auto;bottom:0;border-right:none;border-top:1px solid var(--line)}
  .pill{left:14px;bottom:calc(52% + 10px)}
}