.range-control{padding:18px 20px;margin:18px 0 24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(8,67,124,.88),rgba(4,50,96,.92));min-width:0}
.range-control-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.range-control-head>label:first-child{font:900 18px var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--paper)}
.range-control .range-preset{display:flex;align-items:center;gap:10px;font:500 11px var(--body);color:var(--muted)}
.range-preset select{width:auto;min-width:120px;background:var(--blue-deep);color:var(--paper);border:1px solid var(--line);border-radius:2px;padding:7px 10px;font:600 11px var(--body)}
.range-slider-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.range-control input[type=range]{flex:1 1 220px;width:auto;min-width:0;max-width:520px;height:26px;margin:0;padding:0;accent-color:var(--required);cursor:pointer;border:0;background:transparent;box-shadow:none}
.range-control output{font:600 11px var(--mono);color:var(--paper);min-width:225px}
.range-control>p{font-size:11px;color:var(--muted);margin:10px 0 0}
@media(max-width:600px){.range-control{padding:15px}.range-slider-row{gap:8px}.range-control input[type=range]{flex-basis:100%;max-width:none}.range-control output{min-width:0;font-size:10px}.range-control-head{gap:10px}.range-control-head>label{font-size:16px}}