/* Shared loading/admin crop controls, using TakePlayer's bars and two-grip language. */
.clip-range { display: grid; gap: 8px; min-width: 0; margin: 8px 0 14px; color: var(--uk-text); font: 14px/1.4 var(--uk-font-body); }
.clip-range .clip-range-wave { position: relative; height: 72px; min-width: 0; background: var(--uk-ground); }
.clip-range canvas { display: block; width: 100%; height: 72px; }
.clip-range .vra-cut, #loading-editor .clip-range .vra-cut { appearance: none; position: absolute; left: -6px; width: calc(100% + 12px); height: 36px; min-height: 0; margin: 0; padding: 0; border: 0; background: none; pointer-events: none; }
.clip-range .vra-start, #loading-editor .clip-range .vra-start { top: 0; }
.clip-range .vra-end, #loading-editor .clip-range .vra-end { top: 36px; }
.clip-range .vra-cut::-webkit-slider-runnable-track, #loading-editor .clip-range .vra-cut::-webkit-slider-runnable-track { height: 36px; background: none; }
.clip-range .vra-cut::-webkit-slider-thumb, #loading-editor .clip-range .vra-cut::-webkit-slider-thumb { appearance: none; pointer-events: auto; width: 12px; height: 36px; margin: 0; border: 0; border-radius: 0; cursor: ew-resize; background: linear-gradient(var(--uk-primary-top),var(--uk-primary-top)) center / 2px 100% no-repeat; }
.clip-range .vra-cut::-moz-range-track { background: none; }
.clip-range .vra-cut::-moz-range-thumb { pointer-events: auto; width: 12px; height: 36px; border: 0; border-radius: 0; background: var(--uk-primary); cursor: ew-resize; }
.clip-range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clip-range-fields label, #loading-editor .clip-range-fields label { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; background: none; padding: 0; }
.clip-range input[type=number] { width: 100%; min-width: 0; box-sizing: border-box; height: 36px; padding: 4px 6px; background: var(--uk-ground); border: 1px solid var(--uk-primary-dim); border-radius: 0; color: var(--uk-text); font: 13px/1 var(--uk-font-mono); }
.clip-range-fields input[type=checkbox] { appearance: none; width: 20px; height: 20px; margin: 6px 0; border: 1px solid var(--uk-primary); background: var(--uk-ground); border-radius: 0; cursor: pointer; }
.clip-range-fields input[type=checkbox]:checked { background: var(--uk-primary); box-shadow: inset 0 0 0 4px var(--uk-ground); }
.clip-range-fields input[type=range], #loading-editor .clip-range-fields input[type=range] { width: 100%; height: 36px; min-height: 0; accent-color: var(--uk-primary); }
.clip-range input:focus-visible { outline: 2px solid var(--uk-ice); outline-offset: 2px; }
.clip-range small { color: var(--uk-muted); font: 12px/1.4 var(--uk-font-mono); }