#map { height: calc(100vh - 56px); width: 100%; }
#panel {
    position: absolute; top: 0; left: 0; bottom: 0; width: 320px;
    background: white; z-index: 1000; overflow-y: auto;
    box-shadow: 2px 0 8px rgba(0,0,0,.2);
    font: 13px/1.6 system-ui, sans-serif;
    transition: transform .3s ease;
}
#panel.collapsed { transform: translateX(-100%); }
#panel-toggle {
    position: absolute; top: 10px; z-index: 1001;
    background: white; border: none; border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 4px rgba(0,0,0,.2); cursor: pointer;
    padding: 8px 6px; font-size: 16px; line-height: 1;
    transition: left .3s ease; left: 320px;
}
#panel.collapsed ~ #panel-toggle { left: 0; }
.panel-section { padding: 12px 16px; border-bottom: 1px solid #eee; }
.panel-section:last-child { border-bottom: none; }
.panel-section label { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: bold; }
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.leaflet-tile-container {
    filter: hue-rotate(180deg) invert(100%) saturate(80%) brightness(90%) contrast(120%);
}