/* Remove colored fill/progress in Firefox, keep everything else default */
input[type="range"]::-moz-range-progress {
    background-color: #222;
}

/* Minimal robust Chromium/Safari/Edge handle: empty rectangle, 1px cyan border, no fill */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    height: 24px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    margin-top: -4px;
    cursor: pointer;
    box-shadow: none;
    position: relative;
    z-index: 10;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: #222;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    height: 2px;
    background: #222;
}

/* IE/Edge */
input[type="range"]::-ms-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
    background: #222;
}

/* Minimal empty rectangle handle, 1px cyan border, no fill, cross-browser */

/* Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    margin-top: -4px;
    cursor: pointer;
    box-shadow: none;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}

/* IE/Edge */
input[type="range"]::-ms-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}

/* Thin, empty rectangular handle with 1px cyan outline (cross-browser) */

/* Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff; /* Less bright cyan */
    margin-top: -4px; /* Center on track */
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.2s;
}
input[type="range"]:focus::-webkit-slider-thumb {
    border-color: #66f0ff; /* Slightly brighter on focus */
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}
input[type="range"]:focus::-moz-range-thumb {
    border-color: #66f0ff;
}

/* IE/Edge */
input[type="range"]::-ms-thumb {
    width: 18px;
    height: 8px;
    border-radius: 0;
    background: transparent;
    border: 1px solid #33e0ff;
    cursor: pointer;
}
input[type="range"]:focus::-ms-thumb {
    border-color: #66f0ff;
}