.chart-wrap {
  overflow-y: hidden;
}

.range-panel {
  margin: 12px 0 6px;
  padding: 0 10px;
}

.range-brush {
  --range-left: 0%;
  --range-right: 0%;
  --range-start-center: 0%;
  --range-end-center: 100%;
  --thumb-half: 8px;
  position: relative;
  height: 42px;
  border-radius: 12px;
}

.range-brush::before,
.range-brush::after {
  content: "";
  position: absolute;
  top: 17px;
  height: 8px;
  border-radius: 999px;
}

.range-brush::before {
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #edf2f7 0%, #d9e2ec 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.10);
}

.range-brush::after {
  left: calc(var(--range-left) + var(--thumb-half));
  right: calc(var(--range-right) + var(--thumb-half));
  background: linear-gradient(90deg, #7ab8ff 0%, #2f7df6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 8px rgba(37, 99, 235, 0.22);
}

.range-slider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 42px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.range-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border: 0;
}

.range-slider::-moz-range-track {
  height: 8px;
  background: transparent;
  border: 0;
}

.range-slider::-webkit-slider-thumb {
  width: 16px;
  height: 28px;
  margin-top: -10px;
  appearance: none;
  border: 1px solid #8aa0b8;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 5px, #c7d2e1 5px 6px, transparent 6px 10px, #c7d2e1 10px 11px, transparent 11px),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 6px 14px rgba(15, 23, 42, 0.16);
  cursor: ew-resize;
  pointer-events: auto;
}

.range-slider::-moz-range-thumb {
  width: 16px;
  height: 28px;
  border: 1px solid #8aa0b8;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 5px, #c7d2e1 5px 6px, transparent 6px 10px, #c7d2e1 10px 11px, transparent 11px),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14), 0 6px 14px rgba(15, 23, 42, 0.16);
  cursor: ew-resize;
  pointer-events: auto;
}

.range-slider:focus-visible::-webkit-slider-thumb {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 6px 14px rgba(15, 23, 42, 0.16);
}

.range-slider:focus-visible::-moz-range-thumb {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18), 0 6px 14px rgba(15, 23, 42, 0.16);
}

.range-handle-tip {
  position: absolute;
  top: 3px;
  z-index: 4;
  width: max-content;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.13);
  color: var(--ink, #001b3f);
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

.range-handle-tip-start {
  left: var(--range-start-center);
  transform: translateX(calc(-100% - 10px));
}

.range-handle-tip-end {
  left: var(--range-end-center);
  transform: translateX(10px);
}

.range-brush[data-start-edge="left"] .range-handle-tip-start {
  transform: translateX(10px);
}

.range-brush[data-end-edge="right"] .range-handle-tip-end {
  transform: translateX(calc(-100% - 10px));
}

.range-brush[data-active-handle="start"] .range-handle-tip-start,
.range-brush[data-active-handle="end"] .range-handle-tip-end {
  opacity: 1;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted, #596579);
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chart-toolbar {
  margin-top: 8px;
}

.range-panel.is-preview {
  margin-top: 14px;
  padding: 0;
}

.range-panel.is-preview .range-brush {
  height: 44px;
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 1px 2px rgba(15, 23, 42, 0.06);
  overflow: visible;
}

.range-panel.is-preview .range-brush::before,
.range-panel.is-preview .range-brush::after {
  display: none;
}

.range-preview-frame,
.range-preview,
.range-preview-dim,
.range-preview-window {
  position: absolute;
  inset: 0;
}

.range-preview-frame {
  overflow: hidden;
  border-radius: 6px;
}

.range-preview {
  width: 100%;
  height: 100%;
}

.range-preview-area {
  fill: rgba(37, 99, 235, 0.10);
}

.range-preview-line {
  fill: none;
  stroke: rgba(37, 99, 235, 0.58);
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.range-preview-dim {
  background: rgba(248, 250, 252, 0.76);
  pointer-events: none;
}

.range-preview-dim-left {
  right: calc(100% - var(--range-left));
}

.range-preview-dim-right {
  left: calc(100% - var(--range-right));
}

.range-preview-window {
  left: var(--range-left);
  right: var(--range-right);
  border: 1px solid rgba(37, 99, 235, 0.44);
  border-top-color: rgba(96, 165, 250, 0.58);
  background: rgba(96, 165, 250, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.range-panel.is-preview .range-slider {
  height: 44px;
}

.range-panel.is-preview .range-slider::-webkit-slider-runnable-track {
  height: 44px;
}

.range-panel.is-preview .range-slider::-moz-range-track {
  height: 44px;
}

.range-panel.is-preview .range-slider::-webkit-slider-thumb {
  width: 10px;
  height: 30px;
  margin-top: 7px;
  border: 1px solid #8aa0b8;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 4px, #b8c4d3 4px 5px, transparent 5px),
    linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 5px 12px rgba(15, 23, 42, 0.16);
}

.range-panel.is-preview .range-slider::-moz-range-thumb {
  width: 10px;
  height: 30px;
  border: 1px solid #8aa0b8;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 4px, #b8c4d3 4px 5px, transparent 5px),
    linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 5px 12px rgba(15, 23, 42, 0.16);
}

.range-panel.is-preview .range-labels {
  margin-top: 8px;
  padding: 0 2px;
}