:root { --panel-bg: #fff; --fg: #1d2733; --muted: #5d6b7a; --line: #d5dbe2; }
@media (prefers-color-scheme: dark) {
  :root { --panel-bg: #1b222b; --fg: #e4e9ee; --muted: #9aa7b4; --line: #35404c; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 13px/1.4 system-ui, sans-serif; color: var(--fg); }
#map { position: absolute; inset: 0; }
#panel {
  position: absolute; top: 10px; left: 10px; width: 290px; max-height: calc(100% - 20px);
  overflow-y: auto; padding: 10px 12px; background: var(--panel-bg); border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
}
h1 { font-size: 16px; margin: 0 0 6px; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
section { padding: 8px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }
select, button { font: inherit; }
label.layer { display: block; }
.buttons { display: flex; gap: 6px; margin-top: 6px; }
#legend { list-style: none; margin: 0; padding: 0; }
#legend li { display: flex; align-items: center; gap: 6px; }
#legend i { width: 18px; height: 12px; border: 1px solid rgba(0,0,0,.25); flex: none; }
#inspector { font-size: 12px; word-break: break-word; }
#inspector dl { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; }
#inspector dt { color: var(--muted); }
#inspector dd { margin: 0; }
#attribution { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
@media (max-width: 600px) { #panel { width: calc(100% - 20px); max-height: 45%; top: auto; bottom: 10px; } }