html, body { margin: 0; height: 100%; background: #0b0e14; }
#map { position: absolute; inset: 0; }

#panel {
  position: fixed;
  top: 0; left: 0;
  z-index: 10;
  height: 100vh;
  box-sizing: border-box;
  background: rgba(16, 20, 28, 0.92);
  color: #cdd6e3;
  border-right: 1px solid #232a36;
  padding: 12px 14px;
  font: 13px/1.4 system-ui, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 28px rgba(0,0,0,0.45);
  transition: transform 0.2s ease;
}
#panel.collapsed { transform: translateX(-100%); }

#panel-head {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0;
  background: rgba(16, 20, 28, 0.95);
  margin: -12px -14px 8px; padding: 12px 14px 8px;
  z-index: 1;
}
#panel-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #7fd7ff;
}
#panel-toggle, #panel-open {
  background: #1c2330; color: #cdd6e3; border: 1px solid #2b3446;
  border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 3px 8px;
}
#panel-toggle:hover, #panel-open:hover { color: #7fd7ff; }
#panel-open {
  position: fixed; top: 12px; left: 12px; z-index: 11;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.layer-box { padding: 4px 0; border-top: 1px solid #1c2330; }
.layer-box:first-child { border-top: none; }
.layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}
.layer-name { font-weight: 600; cursor: pointer; user-select: none; flex: 1; }
.caret {
  cursor: pointer; user-select: none;
  color: #6b7686; font-size: 10px; width: 12px;
  transition: transform 0.15s;
}
.layer-box.collapsed .caret { transform: rotate(-90deg); }
.layer-box.collapsed .layer-body { display: none; }
.layer-row input, .cat-row input { accent-color: #7fd7ff; }
.layer-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }

.cat-tools { display: flex; gap: 10px; padding: 2px 0 4px 22px; }
.cat-tools a { color: #6b7686; font-size: 11px; text-decoration: none; }
.cat-tools a:hover { color: #7fd7ff; }
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 10px;
  padding-left: 22px;
}
.cat-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  font-size: 12px;
}
.raster-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 2px 22px; font-size: 12px;
}
.raster-ctrl input[type=range] { flex: 1; accent-color: #7fd7ff; }
.attribution { padding: 0 0 4px 22px; font-size: 10px; color: #6b7686; }

.time-ctrl { padding: 4px 0 6px 22px; }
.time-row { display: flex; align-items: center; gap: 6px; }
.time-row input[type=range] { flex: 1; accent-color: #7fd7ff; }
.tbtn {
  background: #1c2330; color: #cdd6e3; border: 1px solid #2b3446;
  border-radius: 4px; cursor: pointer; font-size: 10px; line-height: 1;
  padding: 2px 5px;
}
.tbtn:hover { color: #7fd7ff; }
.time-label { font-size: 11px; color: #7fd7ff; min-width: 96px; text-align: right; white-space: nowrap; }
#status { margin-top: 10px; font-size: 11px; color: #6b7686; }

.maplibregl-popup-content {
  background: #10141c;
  color: #cdd6e3;
  border: 1px solid #232a36;
  border-radius: 8px;
  font: 12px/1.4 system-ui, sans-serif;
}
.maplibregl-popup-tip { border-top-color: #10141c !important; }