.radar-volume-dialog {
  width: min(900px, 94vw);
  max-height: 92dvh;
  box-sizing: border-box;
  background: #091725;
  color: #fff;
  border: 1px solid #607180;
  border-radius: 8px;
  padding: 14px;
}
.radar-volume-dialog::backdrop { background: #000a; }
.radar-volume-dialog h2 { margin: 0; font-size: 18px; }
.radar-volume-dialog form { float: right; }
.radar-volume-dialog button {
  background: #172b3b;
  color: #fff;
  border: 1px solid #607180;
  border-radius: 5px;
  padding: 4px 8px;
}
.radar-volume-dialog canvas {
  display: block;
  width: 100%;
  height: min(55dvh, 520px);
  background: radial-gradient(ellipse at center, #102841, #050e19 75%);
  touch-action: none;
  cursor: grab;
}
.radar-volume-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 8px;
}
#explorer-radar-volume { white-space: nowrap; }
body:not([data-weather-mode="radar"]) #explorer-radar-volume,
body.radar-split-active #explorer-radar-volume { display: none; }

.radar-volume-stage { position: relative; }
.radar-volume-legend {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  border: 1px solid #607180;
  border-radius: 7px;
  background: #091725;
  font: 11px/1.25 system-ui, sans-serif;
  pointer-events: none;
}
.radar-volume-legend strong { display: block; margin-bottom: 4px; }
.radar-volume-legend div { display: flex; align-items: center; gap: 4px; }
.radar-volume-legend span { width: 12px; height: 14px; }

.radar-volume-dialog { width: min(1500px, 96vw); }
.radar-volume-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(235px, 310px); gap: 12px; }
.radar-volume-stage canvas { height: min(66dvh, 650px); }
.radar-volume-panel { padding: 12px; border: 1px solid #344c5f; border-radius: 10px; background: #111f2b; max-height: 74dvh; overflow: auto; }
.radar-volume-panel h3 { font-size: 15px; margin: 16px 0 7px; }
.radar-volume-panel label { display: block; }
.radar-volume-panel select { width: 100%; }
.radar-volume-panel canvas { height: auto; margin-block: 7px; border-radius: 8px; cursor: auto; }
.radar-volume-panel ul { list-style: none; padding: 0; }
.radar-volume-panel li { margin-block: 4px; }
.radar-volume-readings { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.radar-volume-readings dt { color: #bdcad4; font-size: 12px; }
.radar-volume-readings dd { margin: 4px 0 0; color: #9de3ba; font-weight: bold; }
@media (max-width: 740px) {
  .radar-volume-layout { grid-template-columns: minmax(0, 1fr); }
  .radar-volume-stage canvas { height: 45dvh; }
  .radar-volume-panel { max-height: none; }
}