#bathymetry-menu-btn {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--dc-control-border);
  border-radius: 3px;
  color: var(--dc-body);
  background: var(--dc-panel-secondary);
  font-family: var(--dc-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
#bathymetry-menu-btn:hover,
#bathymetry-menu-btn.active {
  color: var(--dc-cyan);
  border-color: var(--dc-cyan);
  background: var(--dc-cyan-tint-3);
}

#bathymetry-panel {
  position: absolute;
  top: 60px; /* below the new 56px-tall #dc-header (design-tokens.css --dc-header-h), was 44px under the old 36px #status-bar - see settings-panels.css's #render-settings-panel for the same migration */
  right: 12px;
  z-index: 45;
  width: 330px;
  max-height: calc(100vh - 58px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(0, 180, 255, .28);
  border-radius: 4px;
  color: rgba(190, 225, 245, .9);
  background: rgba(2, 8, 20, .94);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .44);
  backdrop-filter: blur(18px);
  font: 10px/1.4 "Courier New", monospace;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 180, 255, .3) transparent;
}
#bathymetry-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
#bathymetry-panel::-webkit-scrollbar { width: 4px; }
#bathymetry-panel::-webkit-scrollbar-thumb { background: rgba(0, 180, 255, .3); }

.bathy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bathy-kicker { color: #00d4ff; font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; }
.bathy-title { margin-top: 2px; color: #e2f7ff; font: 600 15px/1.2 "Segoe UI", sans-serif; }
.bathy-status { color: #42dc9c; font-size: 8px; letter-spacing: .8px; }

.bathy-section {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 160, 230, .15);
}
.bathy-section-title {
  margin-bottom: 9px;
  color: rgba(70, 190, 255, .72);
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.bathy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bathy-btn, .bathy-select {
  min-height: 28px;
  border: 1px solid rgba(0, 160, 230, .2);
  border-radius: 2px;
  color: rgba(180, 220, 245, .8);
  background: rgba(0, 70, 120, .14);
  font: 9px "Courier New", monospace;
}
.bathy-btn { cursor: pointer; }
.bathy-btn:hover, .bathy-btn.active {
  color: #d7f7ff;
  border-color: rgba(0, 212, 255, .5);
  background: rgba(0, 120, 180, .26);
}
.bathy-select { width: 100%; padding: 0 7px; }
.bathy-wide { grid-column: 1 / -1; }

.bathy-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  color: rgba(175, 215, 238, .78);
}
.bathy-toggle input { accent-color: #00bde7; }
.bathy-control { margin-top: 8px; }
.bathy-control label { display: flex; justify-content: space-between; margin-bottom: 5px; }
.bathy-control output { color: #8ce8ff; }
.bathy-control input[type="range"] { width: 100%; accent-color: #00bde7; }
.bathy-control input[type="color"] {
  width: 38px; height: 20px; padding: 0; border: 0; background: none;
}

#bathymetry-inspector {
  position: absolute;
  z-index: 44;
  min-width: 190px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 212, 255, .35);
  border-radius: 3px;
  color: #d8f5ff;
  background: rgba(1, 8, 18, .9);
  pointer-events: none;
  font: 9px/1.55 "Courier New", monospace;
}
#bathymetry-inspector[hidden] { display: none; }
#bathymetry-inspector strong { color: #62e3ff; }

.bathy-note {
  margin-top: 10px;
  color: rgba(120, 160, 185, .55);
  font-size: 8px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  #bathymetry-panel { left: 8px; right: 8px; width: auto; }
  #status-bar .tag { display: none; }
}