CSS to move YT seekbar to the bottom doesn't work because of another stlye even though I marked it as important. What's going on?

[mzso]

Hi!
I enabled this style to make the new youtube player less obnoxious: https://userstyles.world/api/style/24783.user.css

I also wanted to move the seekbar to the bottom in full screen. Claude gave me some code that actually works, but only when the above mentioned style is disabled. I marked it as important, so it would be applied last, but it still won't get applied. Not sure what's going on.

Here's the code:

/* Target the fullscreen player controls container */
.html5-video-player.ytp-fullscreen .ytp-chrome-bottom {
    bottom: 0 !important;
    padding-bottom: 10px !important;
}

/* Adjust the progress bar container */
.html5-video-player.ytp-fullscreen .ytp-progress-bar-container {
    bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Keep the gradient overlay at bottom */
.html5-video-player.ytp-fullscreen .ytp-gradient-bottom {
    bottom: 0 !important;
    height: 100px !important;
}

/* Adjust control bar padding */
.html5-video-player.ytp-fullscreen .ytp-chrome-controls {
    padding-bottom: 5px !important;
}

/* Optional: Make seekbar slightly larger for easier clicking */
.html5-video-player.ytp-fullscreen .ytp-progress-bar {
    height: 5px !important;
}

.html5-video-player.ytp-fullscreen .ytp-play-progress {
    height: 100% !important;
}

[tophf]

The style's selectors must have a higher CSS specificity.
You can artificially raise yours by adding :not(#\0) to each selector:

.html5-video-player.ytp-fullscreen .ytp-chrome-bottom:not(#\0) {

Additionally, that style may have altered other aspects of the element(s), which you would have to "undo" by explicitly styling them yourself (you can copy the original element's style from devtools element inspector).

[mzso]

Thanks for the advice! It worked.