.range_container {
  --loop-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Crect x='12' y='6' width='20' height='36' rx='7' fill='%23fff3ef' stroke='%23ff5d4f' stroke-width='3'/%3E%3C/svg%3E");
  --loop-grip-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='48' viewBox='0 0 44 48'%3E%3Crect x='12' y='6' width='20' height='36' rx='7' fill='%23ff5d4f' stroke='%23ffffff' stroke-width='3'/%3E%3C/svg%3E");
}
.time_sliders_control { margin: 102px 0 72px; touch-action: none; }
.time_sliders_control #fromSlider, .time_sliders_control #toSlider {
  position: absolute; top: 0 !important; height: 9px; margin: 0;
  pointer-events: none; touch-action: none;
}
#fromSlider::-webkit-slider-thumb, #toSlider::-webkit-slider-thumb {
  width: 44px !important; height: 48px !important; margin-top: -19.5px !important;
  pointer-events: none !important; border: 0 !important;
  border-radius: 0 !important; background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important;
  box-sizing: border-box; transition: none !important; transform: none !important;
  cursor: grab !important;
}
#fromSlider::-moz-range-thumb, #toSlider::-moz-range-thumb {
  width: 44px !important; height: 48px !important;
  pointer-events: none !important; border: 0 !important;
  border-radius: 0 !important; background: var(--loop-grip) center / 44px 48px no-repeat !important;
  box-shadow: none !important;
  box-sizing: border-box; transition: none !important; transform: none !important;
  cursor: grab !important;
}
/* A shared touch surface prevents native ranges underneath stealing a drag. */
.time_sliders_control::before {
  content: ""; position: absolute; left: 0; right: 0; top: -19.5px;
  height: 48px; z-index: 50; cursor: grab;
}
.time_sliders_control #loopStartLabel { bottom: 52px; }
.time_sliders_control #loopEndLabel { top: auto; bottom: 52px; }
.time_sliders_control #loopStartLabel, .time_sliders_control #loopEndLabel {
  pointer-events: auto; touch-action: none; cursor: grab; z-index: 60;
  min-width: 44px; min-height: 44px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
}
.time_sliders_control #loopStartLabel::after, .time_sliders_control #loopEndLabel::after {
  left: var(--loop-arrow-x, 50%); top: auto; bottom: -6px; border-top: 6px solid #ff5d4f; border-bottom: 0;
}
.time_sliders_control #currentTimeLabel { top: 36px; bottom: auto; }
.time_sliders_control #currentTimeLabel::after {
  top: -6px; border-top: 0; border-bottom: 6px solid #ff5d4f;
}
.time_sliders_control .bubble { transition: none; }
.time_sliders_control input:focus, .time_sliders_control input:focus-visible { outline: none !important; }
.time_sliders_control input:focus-visible::-webkit-slider-thumb { background-image: var(--loop-grip-focus) !important; }
.time_sliders_control input:focus-visible::-moz-range-thumb { background-image: var(--loop-grip-focus) !important; }
.time_sliders_control.dragging { cursor: grabbing; }

.loop-heading h2 { padding-right: 96px; }
#loopZoomButton, #notes-icon {
  position: absolute; top: 0; right: 0; z-index: 10;
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--accent); cursor: pointer;
}
#loopZoomButton { right: 48px; }
#loopZoomButton svg { width: 22px; height: 22px; }
#loopZoomButton:disabled { opacity: .4; cursor: default; }
#loopZoomButton:hover, #notes-icon:hover { background: var(--bg-glass-hover); }
#loopZoomButton:focus-visible, #notes-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The visible track ends at the handle centres, matching the drag geometry. */
.time_sliders_control #toSlider {
  background-size: calc(100% - 44px) 9px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.time_sliders_control #toSlider::-moz-range-track { background: transparent; }
.range_container .loop-heading { margin-bottom: 0 !important; }
.time_sliders_control { margin-top: 96px; margin-bottom: 48px; }
.speed-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; }
.speed-row > label { margin: 0; font-size: 13px; color: var(--text-secondary); }
.speed-stepper { display: flex; align-items: center; gap: 6px; }
.speed-stepper button, .speed-value-wrap {
  height: 44px; border: 1px solid var(--border-primary); border-radius: var(--radius-sm);
  background: var(--bg-tertiary); color: var(--text-primary);
}
.speed-stepper button { width: 44px; padding: 0; font-size: 18px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.speed-stepper button:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-glass-hover); }
.speed-stepper button:disabled { opacity: .35; cursor: default; }
.speed-value-wrap { display: flex; align-items: center; width: 76px; padding-right: 9px; }
#speedValue { width: 100%; min-width: 0; background: transparent; color: inherit; border: 0; outline: none; text-align: center; padding: 0 0 0 6px; font-size: 16px; font-variant-numeric: tabular-nums; }
.speed-value-wrap > span { color: var(--text-secondary); }
.speed-stepper button:focus-visible, .speed-value-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ad-space-preview { margin: 16px auto; width: min(320px, 100%); height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--border-primary); border-radius: 8px; color: var(--text-secondary); font-size: 12px; }
@media (max-width: 768px) {
  .speed-row { flex-wrap: wrap; gap: 8px; }
  .speed-row > label { flex-basis: 100%; text-align: right; font-size: 12px; }
  .time_sliders_control { margin-bottom: 58px; }
}

.ad-space-preview[hidden] { display: none; }
@media (max-width: 360px) {
  .speed-stepper { gap: 4px; }
  .speed-value-wrap { width: 60px; }
}
/* Use less empty space around the tool on phones, keeping the dock reachable. */
@media (max-width: 768px) {
  .main { padding-top: 16px; }
  .main .url-input { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 12px; }
  .main .youtube-ifram, .main .range_container { margin-bottom: 16px; }
}

.speed-stepper .control-icon { width: 20px; height: 20px; }