.revcap-field { margin: 12px 0; }
.revcap-field label { display:block; font-weight:600; margin-bottom:6px; }
.revcap-field input[type="text"] { padding:8px 10px; border:1px solid #c3c4c7; border-radius:4px; }
.revcap-image-img { display:block; margin-bottom:6px; border:1px solid #ddd; border-radius:4px; }
.revcap-image-refresh { font-size:12px; }
.revcap-error { color:#a61b00; }

.revcap-slider { user-select:none; }
.revcap-slider-track {
    position:relative; width:100%; max-width:340px; height:42px;
    background:#f1f1f3; border:1px solid #c3c4c7; border-radius:4px; overflow:hidden;
}
.revcap-slider-fill {
    position:absolute; top:0; left:0; bottom:0; width:0;
    background:linear-gradient(90deg,#2271b1,#72aee6); transition:width .05s linear;
}
.revcap-slider-handle {
    position:absolute; top:0; left:0; width:42px; height:42px;
    background:#fff; border:1px solid #c3c4c7; border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    cursor:grab; font-weight:bold; font-size:20px; color:#2271b1;
    z-index:2;
}
.revcap-slider-handle:active { cursor:grabbing; }
.revcap-slider-text {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#646970; font-size:14px; pointer-events:none; z-index:1;
}
.revcap-slider.is-solved .revcap-slider-handle { background:#e6f4ea; border-color:#156c2e; color:#156c2e; }
.revcap-slider.is-solved .revcap-slider-text { color:#156c2e; }