:root {
    color-scheme: dark;
    font-family: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body, #map { width: 100%; height: 100%; margin: 0; }
body { background: #06101d; }

.panel {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    width: min(320px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(116, 190, 255, .25);
    border-radius: 14px;
    background: rgba(5, 17, 31, .92);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    backdrop-filter: blur(12px);
}

.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel-title { min-width: 0; }
.panel-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(116, 190, 255, .3);
    border-radius: 9px;
    background: #0a2034;
    color: #dcecff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.panel-toggle:hover { border-color: rgba(116, 190, 255, .6); }
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .subtitle { margin-bottom: 0; }

h1 { margin: 0; color: #81c7ff; font-size: 24px; }
.subtitle { margin: 2px 0 16px; color: #8da6bd; }
label { display: block; margin: 10px 0; color: #dcecff; }
.field { margin-top: 14px; color: #8da6bd; font-size: 13px; }
input[type="text"], select {
    width: 100%;
    margin-top: 5px;
    padding: 9px 10px;
    border: 1px solid #26445f;
    border-radius: 8px;
    color: #eef7ff;
    background: #0a2034;
}
.status { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
#statusDot { width: 9px; height: 9px; border-radius: 50%; background: #f0a33c; }
#statusDot.ok { background: #35d07f; box-shadow: 0 0 12px #35d07f; }
#baseMapStatus, #counts { margin-top: 7px; color: #8da6bd; font-size: 13px; }
.credit { margin: 16px 0 0; color: #68839b; font-size: 11px; line-height: 1.4; }
.maplibregl-popup-content {
    padding: 10px 12px;
    border: 1px solid rgba(116, 190, 255, .35);
    border-radius: 9px;
    color: #dcecff;
    background: rgba(5, 17, 31, .96);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.maplibregl-popup-tip { border-top-color: rgba(5, 17, 31, .96) !important; }
.map-tooltip { min-width: 220px; font-size: 12px; line-height: 1.5; }
.map-tooltip strong { display: block; margin-bottom: 4px; color: #81c7ff; font-size: 14px; }
.map-tooltip span { color: #8da6bd; }

@media (max-width: 640px) {
    .panel { top: 8px; left: 8px; width: calc(100vw - 16px); max-height: 48vh; overflow: auto; }
}