.range-showcase { align-items: start; }
.range-showcase .panel { height: 100%; }
.range-showcase .panel-heading { padding: 22px 24px 16px; }
.range-showcase .card-body { padding: 8px 24px 24px; }
.range-kicker { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; margin-bottom: 8px; }
.range-showcase .panel-heading p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.range-control { margin: 16px 0 22px; }
.range-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.range-label label { font-weight: 600; font-size: 13px; }
.range-label output { border-radius: 8px; padding: 5px 10px; min-width: 58px; text-align: center; background: color-mix(in srgb,var(--accent) 10%,var(--surface)); color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.range-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 8px; }
.range-help { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
.range-summary { background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 8px 0 22px; }
.range-summary span,.range-summary small { display: block; color: var(--muted); font-size: 12px; }
.range-summary strong { display: block; font-size: 24px; letter-spacing: -.03em; margin: 4px 0; font-variant-numeric: tabular-nums; }
.range-showcase .form-range { appearance: none; width: 100%; height: 24px; padding: 0; background: transparent; cursor: pointer; --range-direction: to right; --range-track: color-mix(in srgb,var(--muted) 38%,var(--surface)); }
[dir='rtl'] .range-showcase .form-range { --range-direction: to left; }
.range-showcase .form-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(var(--range-direction),var(--accent) 0 var(--range-fill,0%),var(--range-track) var(--range-fill,0%) 100%); }
.range-showcase .form-range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(var(--range-direction),var(--accent) 0 var(--range-fill,0%),var(--range-track) var(--range-fill,0%) 100%); }
.range-showcase .form-range::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px #0003; }
.range-showcase .form-range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px #0003; }
.range-showcase .form-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.range-showcase .form-range:disabled { opacity: .5; cursor: not-allowed; }
@media(max-width: 600px) { .range-showcase .panel-heading { padding: 18px 18px 12px; } .range-showcase .card-body { padding: 6px 18px 20px; } }