/* ==========================================================================
   Presto player skin
   One clean base (YouTube-style "minimal" look) + 5 distinct skin variants
   (now / zen / slate / spaced / sleek / vidstack / live) driven by the .theme-* root classes.

   All colors come from CSS variables set in player.js renderPlayer():
     --player-brand            accent
     --player-progress-color   seek/volume fill
     --player-control-bg       control bar background base
     --player-control-color    icon/text color
     --player-bg               stage background
     --play-button-radius      center play button radius
     --play-button-width       center play button width
     --play-button-height      center play button height
     --play-button-icon-size   center play icon size
     --control-bar-height      bottom control bar height
     --control-icon-size       bottom control icon size
   Runtime variables updated by JS:
     --nf-progress             seek fill %        (.nf-progress-range)
     --nf-volume               volume fill %      (.nf-volume-range)
     --nf-preview-left         seek preview x     (.nf-seek-preview)
   ========================================================================== */

:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    display: grid;
    overflow: hidden;
    place-items: center;
    background: #000;
    font: 14px/1.4 Inter, "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
    font: inherit;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.saas-player {
    --player-brand: #6d0bea;
    --player-progress-color: var(--player-brand);
    --player-control-bg: #000;
    --player-control-color: #fff;
    --player-bg: #000;
    --play-button-radius: 12px;
    --play-button-width: 100px;
    --play-button-height: 100px;
    --play-button-icon-size: 56px;
    --control-bar-height: 52px;
    --control-icon-size: 27px;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    background: #000;
    color: var(--player-control-color);
}

.mc-player {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
    background: #000;
    user-select: none;
}

.mc-player:fullscreen {
    border-radius: 0;
}

.mc-media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
}

/* Crop the YouTube chrome out of the frame when reduced-UI is on. */
.is-killer-crop .mc-media {
    height: 200%;
    transform: translateY(-25%);
}

.is-killer-crop.has-captions-visible .mc-media {
    height: 100%;
    transform: none;
}

.mc-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #000;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: opacity .18s ease, visibility .18s ease;
}

.has-started .mc-poster {
    visibility: hidden;
    opacity: 0;
}

.mc-click-surface {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.is-playing.is-ui-idle .mc-click-surface {
    cursor: none;
}

/* --------------------------------------------------------------------------
   Loading spinner + status toast
   -------------------------------------------------------------------------- */

.mc-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255, 255, 255, .18);
    border-top-color: var(--player-progress-color);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: mc-spin .8s linear infinite;
    transition: opacity .16s ease;
}

.is-waiting-play .mc-loading-spinner,
.saas-player:not(.is-ready) .mc-loading-spinner {
    opacity: 1;
}

.is-ready:not(.is-waiting-play) .mc-loading-spinner {
    opacity: 0;
}

@keyframes mc-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.mc-status {
    position: absolute;
    right: 50%;
    bottom: 80px;
    z-index: 9;
    max-width: calc(100% - 32px);
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(12, 12, 15, .88);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    transform: translateX(50%);
    backdrop-filter: blur(10px);
}

.mc-status[hidden] {
    display: none;
}

.mc-subtitles {
    position: absolute;
    right: 8%;
    bottom: calc(var(--control-bar-height, 52px) + 22px);
    left: 8%;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-size: clamp(16px, 2.7vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .82);
    pointer-events: none;
}

.mc-subtitles span {
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .68);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.mc-subtitles[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Timed lead-capture gate
   -------------------------------------------------------------------------- */

.lead-capture-overlay {
    position: absolute;
    top: clamp(12px, 5%, 34px);
    right: clamp(18px, 13%, 110px);
    bottom: calc(var(--control-bar-height, 52px) + 10px);
    left: clamp(18px, 13%, 110px);
    z-index: 12;
    display: grid;
    place-items: center;
    padding: clamp(12px, 3vw, 28px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: clamp(10px, 2vw, 18px);
    background: linear-gradient(145deg, rgba(15,13,28,.9), rgba(13,12,23,.82));
    box-shadow: 0 18px 60px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04);
    color: #fff;
    font-family: Inter, system-ui, sans-serif;
    text-align: center;
    user-select: text;
    backdrop-filter: blur(12px);
}

.lead-capture-overlay[hidden] { display: none; }
.lead-capture-panel { width: min(100%, 360px); }
.lead-capture-lock {
    display: grid;
    width: clamp(32px, 6vw, 46px);
    height: clamp(32px, 6vw, 46px);
    place-items: center;
    margin: 0 auto clamp(8px, 1.8vw, 14px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--player-brand) 19%, transparent);
    color: var(--player-brand);
}
.lead-capture-lock svg { width: 48%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lead-capture-panel h2 { margin: 0; color: #fff; font-size: clamp(15px, 2.5vw, 24px); line-height: 1.15; }
.lead-capture-panel > p { margin: 7px 0 clamp(10px, 2vw, 17px); color: rgba(255,255,255,.62); font-size: clamp(10px, 1.45vw, 13px); line-height: 1.4; }
.lead-capture-form { display: grid; gap: 8px; }
.lead-capture-field {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    background: rgba(5,5,10,.48);
    color: rgba(255,255,255,.55);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.lead-capture-field:focus-within { border-color: var(--player-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--player-brand) 18%, transparent); }
.lead-capture-field__icon { width: 14px; flex: 0 0 14px; font-size: 11px; }
.lead-capture-field input {
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 500 clamp(11px, 1.5vw, 13px) Inter, system-ui, sans-serif;
}
.lead-capture-field input::placeholder { color: rgba(255,255,255,.44); }
.lead-capture-submit {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--player-brand);
    color: #fff;
    font: 700 clamp(11px, 1.5vw, 13px) Inter, system-ui, sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--player-brand) 28%, transparent);
}
.lead-capture-submit:hover { filter: brightness(1.1); }
.lead-capture-submit:disabled { opacity: .7; cursor: wait; }
.lead-capture-submit.is-loading span:first-child::after { content: '...'; }
.lead-capture-skip {
    justify-self: center;
    padding: 2px 7px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.5);
    font: 500 clamp(9px, 1.3vw, 11px) Inter, system-ui, sans-serif;
    text-decoration: underline;
    cursor: pointer;
}
.lead-capture-skip:hover { color: #fff; }
.lead-capture-error { color: #ff9ca8; font-size: 11px; line-height: 1.3; }
.lead-capture-error[hidden] { display: none; }
.has-lead-capture .mc-click-surface { pointer-events: none; }
.has-lead-capture .nf-center-controls { visibility: hidden; opacity: 0; }
.has-lead-capture .nf-bottom { visibility: visible; opacity: .62; transform: translateY(0); pointer-events: none; }

@media (max-width: 520px) {
    .lead-capture-overlay {
        top: 8px;
        right: 10px;
        bottom: calc(var(--control-bar-height, 52px) + 6px);
        left: 10px;
        padding: 9px 12px;
        border-radius: 10px;
    }
    .lead-capture-lock { margin-bottom: 5px; }
    .lead-capture-panel > p { margin: 4px 0 8px; }
    .lead-capture-form { gap: 6px; }
    .lead-capture-field, .lead-capture-submit { min-height: 32px; }
    .lead-capture-field input { padding: 6px 0; }
}

/* --------------------------------------------------------------------------
   Skin wrapper + show / hide behavior
   The whole control layer fades out while playing once the pointer is idle,
   and back in on hover / focus / scrub / seek / buffering.
   -------------------------------------------------------------------------- */

.nf-skin {
    position: absolute;
    inset: 0;
    z-index: 6;
    color: var(--player-control-color);
    font-family: Inter, "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: none;
}

/* Bottom scrim for control legibility over bright video. Tinted by the
   Control bar colour so the "now" skin honours that setting too. */
.nf-skin::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 38%;
    background: linear-gradient(0deg,
        color-mix(in srgb, var(--player-control-bg) 72%, transparent),
        color-mix(in srgb, var(--player-control-bg) 26%, transparent) 54%,
        transparent);
    opacity: 0;
    content: "";
    pointer-events: none;
    transition: opacity .2s ease;
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .nf-skin::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .22) 54%, rgba(0, 0, 0, 0));
    }

    .theme-sleek .nf-bottom {
        background: var(--player-control-bg);
    }
}

.has-started .nf-skin::after {
    opacity: 1;
}

.is-playing.is-ui-idle .nf-skin::after {
    opacity: 0;
}

/* Hide the custom skin entirely for iframe (Dailymotion) providers. */
.is-iframe-provider .mc-media {
    pointer-events: auto;
}

.is-iframe-provider .mc-click-surface,
.is-iframe-provider .nf-skin,
.is-iframe-provider .mc-loading-spinner,
.is-iframe-provider .mc-poster {
    display: none;
}

/* --------------------------------------------------------------------------
   Center play button
   -------------------------------------------------------------------------- */

.nf-center-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.nf-center-play {
    display: inline-grid;
    width: min(var(--play-button-width, 100px), 38vw);
    height: min(var(--play-button-height, 100px), 38vw);
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--play-button-radius, 12px);
    background: var(--player-bg, #000);
    color: #fff;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .32);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .15s ease, filter .15s ease;
}

.nf-center-play:hover,
.nf-center-play:focus-visible {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.nf-center-play .nf-svg-play-shape,
.nf-center-play .nf-svg-pause {
    width: min(var(--play-button-icon-size, 56px), 72%);
    height: min(var(--play-button-icon-size, 56px), 72%);
}

/* Hide the center button only while actually playing; it returns for
   paused and ended states so it doubles as a replay affordance. */
.is-playing .nf-center-controls {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
    pointer-events: none;
}

.is-autoplay-enabled.is-playing:not(.has-autoplay-sound) .nf-center-controls {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.is-autoplay-enabled.is-playing:not(.has-autoplay-sound) .nf-center-play .nf-svg-play {
    display: block;
}

.is-autoplay-enabled.is-playing:not(.has-autoplay-sound) .nf-center-play .nf-svg-pause {
    display: none;
}

/* --------------------------------------------------------------------------
   Bottom control bar — shared structure
   -------------------------------------------------------------------------- */

.nf-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.2vw, 12px);
    height: var(--control-bar-height, 52px);
    padding: 0 clamp(8px, 1.6vw, 16px);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.has-started .mc-player:hover .nf-bottom,
.has-started .mc-player:focus-within .nf-bottom,
.is-scrubbing .nf-bottom,
.is-seeking .nf-bottom,
.is-waiting-play .nf-bottom {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.is-playing.is-ui-idle .nf-bottom {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
}

.is-control-bar-disabled .nf-bottom {
    display: none;
}

/* Flatten the wrapper boxes so every control becomes a direct flex item of
   .nf-bottom, laid out in one row. This lets each skin position controls
   independently with `order`. The progress row keeps a real box (needed for
   the seek-preview hit-testing in player.js). */

.nf-actions,
.nf-left-controls,
.nf-right-controls {
    display: contents;
}

.nf-progress-row {
    position: relative;
    order: 3;
    display: flex;
    flex: 1 1 auto;
    min-width: 40px;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

/* Default single-row order — the minimal "now" layout (screenshot: minimal):
   play · time · [progress · duration] · cc · settings · volume · fullscreen */
.nf-control-play {
    order: 1;
}

.nf-time-pair {
    order: 2;
}

.mc-cc-button {
    order: 4;
}

.nf-captions {
    position: relative;
    order: 4;
    display: inline-flex;
}

.nf-audio-track {
    position: relative;
    order: 5;
    display: none;
}

.has-custom-audio-tracks .nf-audio-track {
    display: inline-flex;
}

.nf-audio-track-button {
    width: auto;
    min-width: calc(var(--control-icon-size, 27px) + 14px);
    padding: 0 7px;
    gap: 5px;
}

.nf-audio-label {
    max-width: 72px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-audio-track-button.is-active {
    color: var(--player-progress-color);
    background: rgba(255, 255, 255, .14);
}

.nf-settings {
    order: 5;
}

.nf-grid {
    order: 5;
}

.nf-volume {
    order: 6;
}

.nf-fullscreen {
    order: 7;
}

/* Speed sits next to settings, picture-in-picture next to fullscreen.
   Equal order values tie-break by DOM position (speed/pip precede them). */
.nf-speed {
    order: 5;
}

.nf-pip {
    order: 7;
}

/* --------------------------------------------------------------------------
   Range inputs (seek + volume)
   -------------------------------------------------------------------------- */

.nf-progress-range,
.nf-volume-range {
    appearance: none;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.nf-progress-range {
    width: 100%;
    height: 18px;
}

.nf-progress-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--player-progress-color) 0 var(--nf-progress, 0%), rgba(255, 255, 255, .32) var(--nf-progress, 0%) 100%);
}

.nf-progress-range::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
}

.nf-progress-range::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--player-progress-color);
}

.nf-progress-range::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -4.5px;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--player-progress-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .14s ease;
}

.nf-progress-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 999px;
    background: var(--player-progress-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .14s ease;
}

.nf-progress-range:hover::-webkit-slider-thumb,
.nf-progress-range:focus-visible::-webkit-slider-thumb,
.is-scrubbing .nf-progress-range::-webkit-slider-thumb {
    opacity: 1;
}

.nf-progress-range:hover::-moz-range-thumb,
.nf-progress-range:focus-visible::-moz-range-thumb,
.is-scrubbing .nf-progress-range::-moz-range-thumb {
    opacity: 1;
}

.nf-volume-range {
    width: 78px;
    height: 18px;
}

.nf-volume-range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--player-progress-color) 0 var(--nf-volume, 100%), rgba(255, 255, 255, .3) var(--nf-volume, 100%) 100%);
}

.nf-volume-range::-moz-range-track {
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .3);
}

.nf-volume-range::-moz-range-progress {
    height: 3px;
    border-radius: 999px;
    background: var(--player-progress-color);
}

.nf-volume-range::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    margin-top: -4px;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #fff;
}

.nf-volume-range::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border: 0;
    border-radius: 999px;
    background: #fff;
}

/* --------------------------------------------------------------------------
   Icon buttons + SVGs
   -------------------------------------------------------------------------- */

.nf-icon-button {
    position: relative;
    display: grid;
    width: calc(var(--control-icon-size, 27px) + 14px);
    height: calc(var(--control-icon-size, 27px) + 14px);
    min-width: calc(var(--control-icon-size, 27px) + 14px);
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--player-control-color);
    cursor: pointer;
    opacity: .94;
    pointer-events: auto;
    transition: background .15s ease, opacity .15s ease, color .15s ease;
}

.nf-icon-button:hover,
.nf-icon-button:focus-visible,
.nf-icon-button[aria-expanded="true"],
.mc-cc-button.is-active {
    background: rgba(255, 255, 255, .14);
    opacity: 1;
}

.mc-cc-button.is-active {
    color: var(--player-progress-color);
}

.nf-svg {
    display: block;
    width: var(--control-icon-size, 27px);
    height: var(--control-icon-size, 27px);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.nf-control-play .nf-svg-play-shape {
    width: calc(var(--control-icon-size, 27px) + 3px);
    height: calc(var(--control-icon-size, 27px) + 3px);
}

/* Play / pause + volume / muted icon swap. */
.nf-play-toggle.is-paused .nf-svg-pause,
.nf-play-toggle.is-playing .nf-svg-play,
.nf-volume-button .nf-svg-muted,
.nf-volume-button.is-muted .nf-svg-volume {
    display: none;
}

.nf-volume-button.is-muted .nf-svg-muted {
    display: block;
}

/* --------------------------------------------------------------------------
   Volume cluster + time read-outs
   -------------------------------------------------------------------------- */

/* Volume: speaker only at rest, slider expands on hover/focus (KillerPlayer
   behaviour seen in the reference skins). */
.nf-volume {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nf-volume-range {
    width: 0;
    opacity: 0;
    transition: width .18s ease, opacity .18s ease;
}

.nf-volume:hover .nf-volume-range,
.nf-volume:focus-within .nf-volume-range {
    width: 70px;
    opacity: 1;
}

.nf-time,
.nf-time-pair,
.nf-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--player-control-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.nf-time-divider {
    opacity: .6;
}

/* Default layout shows current time on the left (time-pair) and total time on
   the right (duration). Skins that want a combined "0:00 / 0:25" re-enable the
   divider + total. */
.nf-duration {
    display: inline-flex;
}

.nf-time-divider,
.nf-total-time,
.nf-share,
.nf-rewind-control,
.nf-forward-control {
    display: none;
}

.nf-icon-button[hidden],
.nf-chapters-panel[hidden],
.nf-chapter-marker[hidden] {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Settings / quality menu
   -------------------------------------------------------------------------- */

.nf-settings {
    position: relative;
}

.mc-quality-button {
    width: auto;
    min-width: calc(var(--control-icon-size, 27px) + 14px);
    padding: 0 6px;
    gap: 4px;
}

.mc-quality-button.is-active {
    color: var(--player-progress-color);
    background: rgba(255, 255, 255, .14);
}

.nf-quality-label {
    font-size: 11px;
    font-weight: 800;
}

.mc-quality-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 14;
    width: 168px;
    max-height: min(300px, calc(100vh - 96px));
    overflow: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(14, 14, 18, .96);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .4);
    backdrop-filter: blur(14px);
    pointer-events: auto;
}

.mc-quality-menu[hidden] {
    display: none;
}

.nf-settings-popover {
    width: 218px;
}

.nf-menu-section + .nf-menu-section {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.nf-menu-section[hidden] {
    display: none;
}

.nf-menu-heading {
    padding: 8px 10px 4px;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mc-quality-options button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.mc-quality-options button:hover,
.mc-quality-options button:focus-visible {
    background: rgba(255, 255, 255, .12);
}

.mc-quality-options button.is-active {
    border-left-color: var(--player-progress-color);
    background: rgba(255, 255, 255, .1);
}

.mc-quality-options button:disabled {
    color: rgba(255, 255, 255, .45);
    cursor: default;
}

.nf-subtitle-language {
    float: right;
    margin-left: 10px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    text-transform: uppercase;
}

/* Playback-speed control (reuses the quality menu styles). */
.nf-speed {
    position: relative;
}

.nf-speed-button {
    display: inline-flex;
    width: auto;
    min-width: calc(var(--control-icon-size, 27px) + 14px);
    height: calc(var(--control-icon-size, 27px) + 14px);
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    gap: 5px;
}

.nf-speed-label {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.nf-pip.is-active {
    color: var(--player-progress-color);
    background: rgba(255, 255, 255, .14);
}

/* --------------------------------------------------------------------------
   Chapters menu
   -------------------------------------------------------------------------- */

.nf-chapters-panel {
    position: absolute;
    right: 12px;
    bottom: calc(var(--control-bar-height, 52px) + 14px);
    z-index: 16;
    width: min(448px, calc(100% - 24px));
    max-height: min(430px, calc(100% - 76px));
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: #1f2933;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    pointer-events: auto;
}

.nf-chapters-list {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.nf-chapter-item {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.nf-chapter-item:last-child {
    border-bottom: 0;
}

.nf-chapter-item:hover,
.nf-chapter-item:focus-visible,
.nf-chapter-item.is-active {
    background: rgba(0, 0, 0, .1);
    outline: 0;
}

.nf-chapter-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.nf-chapter-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #202124;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-chapter-time {
    padding: 4px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .72);
    color: #60656d;
    font-size: 13px;
    line-height: 1;
}

.nf-chapter-duration {
    color: #60656d;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
}

.nf-chapter-markers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.nf-chapter-marker {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.nf-chapter-marker-dot {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(0, 0, 0, .1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.nf-chapter-marker:hover .nf-chapter-marker-dot,
.nf-chapter-marker:focus-visible .nf-chapter-marker-dot,
.nf-chapter-marker.is-active .nf-chapter-marker-dot {
    border-color: #fff;
    background: #fff;
    transform: scale(1.14);
}

.nf-chapter-marker::before,
.nf-chapter-marker::after {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

.nf-chapter-marker::before {
    bottom: 24px;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .96);
    content: "";
    transform: translate(-50%, 6px) rotate(45deg);
}

.nf-chapter-marker::after {
    bottom: 28px;
    max-width: min(220px, 52vw);
    overflow: hidden;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .96);
    color: #4b5563;
    content: attr(data-chapter-title);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
    transform: translate(-50%, 6px);
}

.nf-chapter-marker:hover::before,
.nf-chapter-marker:hover::after,
.nf-chapter-marker:focus-visible::before,
.nf-chapter-marker:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
}

.nf-chapter-marker:hover::after,
.nf-chapter-marker:focus-visible::after {
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Seek preview thumbnail
   -------------------------------------------------------------------------- */

.nf-seek-preview {
    position: absolute;
    bottom: calc(100% + 14px);
    left: var(--nf-preview-left, 50%);
    z-index: 12;
    width: clamp(140px, 20vw, 220px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
}

.has-seek-preview .nf-seek-preview {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.nf-seek-preview-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 10px;
    background-color: rgba(16, 16, 18, .94);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}

.nf-seek-preview-time {
    margin-top: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------------------
   Watermark
   -------------------------------------------------------------------------- */

.watermark {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 7;
    max-width: 120px;
    max-height: 44px;
    object-fit: contain;
    opacity: .8;
    pointer-events: none;
}

.player-overlay-image {
    position: absolute;
    left: var(--overlay-x, 50%);
    top: var(--overlay-y, 12%);
    z-index: 7;
    width: var(--overlay-width, 180px);
    max-width: 96%;
    max-height: 96%;
    object-fit: contain;
    opacity: var(--overlay-opacity, .85);
    pointer-events: none;
    transform: translate(var(--overlay-offset-x, -50%), var(--overlay-offset-y, -12%));
}

.has-overlay-dismissed .player-overlay-image {
    display: none;
}

/* --------------------------------------------------------------------------
   Error / loading fallbacks
   -------------------------------------------------------------------------- */

.player-error,
.player-loading {
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 24px;
    background: #000;
    color: #fff;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Fullscreen
   -------------------------------------------------------------------------- */

.mc-player:fullscreen {
    width: 100vw;
    height: 100vh;
}

.mc-player:fullscreen .nf-bottom {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* ==========================================================================
   SKIN VARIANTS
   Base layout above is the "now" / minimal look. Each theme tweaks the bar
   chrome and progress treatment so the dashboard skin picker is meaningful.
   ========================================================================== */

/* ---- now : YouTube-style, full-bleed thin progress, transparent row ------ */
.theme-now .nf-progress-range {
    height: 16px;
}

.theme-now .nf-progress-range::-webkit-slider-runnable-track {
    height: 3px;
}

.theme-now .nf-progress-range::-moz-range-track,
.theme-now .nf-progress-range::-moz-range-progress {
    height: 3px;
}

/* The four named skins below reproduce the KillerPlayer reference looks
   (the screenshots) on this player's single-row control bar. Accent colors
   come from the dashboard color settings via the CSS variables. */

/* ---- zen : dark translucent docked bar, brand-filled square play button ---
   (KillerPlayer "green" reference). */
.theme-zen .nf-bottom {
    height: var(--control-bar-height, 52px);
    background: color-mix(in srgb, var(--player-control-bg) 78%, transparent);
}

.theme-zen .nf-skin::after {
    display: none;
}

.theme-zen .nf-control-play {
    width: calc(var(--control-icon-size, 27px) + 16px);
    height: calc(var(--control-icon-size, 27px) + 12px);
    border-radius: 8px;
    background: var(--player-brand);
    color: #fff;
    opacity: 1;
}

.theme-zen .nf-control-play:hover,
.theme-zen .nf-control-play:focus-visible {
    background: var(--player-brand);
    filter: brightness(1.1);
}

/* Right cluster order: volume · cc · settings · fullscreen. */
.theme-zen .nf-volume {
    order: 4;
}

.theme-zen .nf-captions {
    order: 5;
}

.theme-zen .nf-audio-track {
    order: 5;
}

.theme-zen .nf-settings {
    order: 6;
}

.theme-zen .nf-speed {
    order: 6;
}

.theme-zen .nf-fullscreen {
    order: 7;
}

.theme-zen .nf-pip {
    order: 7;
}

/* ---- slate : solid colored docked bar, full controls, brand rounded-rect --
   center play (KillerPlayer "purple" reference). */
.theme-slate .nf-bottom {
    height: var(--control-bar-height, 52px);
    background: var(--player-control-bg);
}

.theme-slate .nf-skin::after {
    display: none;
}

.theme-slate .nf-center-play {
    border: 0;
    border-radius: var(--play-button-radius, 12px);
    background: var(--player-bg, #000);
    color: #fff;
}

/* play · volume · current-time · [progress · duration] · cc · settings · fs */
.theme-slate .nf-volume {
    order: 2;
}

.theme-slate .nf-time-pair {
    order: 3;
}

.theme-slate .nf-progress-row {
    order: 4;
}

.theme-slate .nf-captions {
    order: 5;
}

.theme-slate .nf-audio-track {
    order: 5;
}

.theme-slate .nf-settings {
    order: 6;
}

.theme-slate .nf-speed {
    order: 6;
}

.theme-slate .nf-fullscreen {
    order: 7;
}

.theme-slate .nf-pip {
    order: 7;
}

/* ---- spaced : solid colored docked bar, minimal controls, thin progress ---
   strip on top, circular center play (KillerPlayer "red" reference). */
.theme-spaced .nf-bottom {
    height: var(--control-bar-height, 52px);
    background: var(--player-control-bg);
}

.theme-spaced .nf-skin::after {
    display: none;
}

.theme-spaced .nf-center-play {
    border: 0;
    border-radius: var(--play-button-radius, 12px);
    background: var(--player-bg, #000);
    color: #fff;
}

/* No play button in the bar; seek lives as a thin strip on top of the bar. */
.theme-spaced .nf-control-play {
    display: none;
}

.theme-spaced .nf-progress-row {
    position: absolute;
    right: 0;
    bottom: var(--control-bar-height, 52px);
    left: 0;
    height: 6px;
    padding: 0;
}

.theme-spaced .nf-progress-range {
    height: 6px;
}

.theme-spaced .nf-progress-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 0;
}

.theme-spaced .nf-progress-range::-moz-range-track,
.theme-spaced .nf-progress-range::-moz-range-progress {
    height: 6px;
    border-radius: 0;
}

/* Combined "0:00 / 0:25" read-out, pushed left so the icons sit at the edges. */
.theme-spaced .nf-time-divider,
.theme-spaced .nf-total-time {
    display: inline-flex;
}

.theme-spaced .nf-duration {
    display: none;
}

.theme-spaced .nf-volume {
    order: 1;
}

.theme-spaced .nf-time-pair {
    order: 2;
    margin-right: auto;
}

.theme-spaced .nf-captions {
    order: 3;
}

.theme-spaced .nf-audio-track {
    order: 3;
}

.theme-spaced .nf-settings {
    order: 4;
}

.theme-spaced .nf-speed {
    order: 4;
}

.theme-spaced .nf-fullscreen {
    order: 5;
}

.theme-spaced .nf-pip {
    order: 5;
}

/* ---- sleek : floating rounded slate-blue pill, controls inside ------------ */
.theme-sleek .nf-bottom {
    right: auto;
    left: 50%;
    bottom: 12px;
    width: 95%;
    height: var(--control-bar-height, 52px);
    padding: 0 16px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--player-control-bg) 90%, transparent);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .34);
    transform: translateX(-50%) translateY(8px);
}

.theme-sleek .nf-skin::after {
    display: none;
}

.theme-sleek.has-started .mc-player:hover .nf-bottom,
.theme-sleek.has-started .mc-player:focus-within .nf-bottom,
.theme-sleek.is-scrubbing .nf-bottom,
.theme-sleek.is-seeking .nf-bottom,
.theme-sleek.is-waiting-play .nf-bottom {
    transform: translateX(-50%) translateY(0);
}

.theme-sleek.is-playing.is-ui-idle .nf-bottom {
    transform: translateX(-50%) translateY(8px);
}

/* ---- vidstack : default Vidstack-inspired video controls -----------------
   The source reference lives in player-main/packages/vidstack/styles/player.
   This maps its gradient overlay, two-row controls, rounded buttons and slider
   treatment onto this app's existing player DOM. */
.theme-vidstack .nf-skin::after {
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .6),
        rgba(0, 0, 0, 0) 52%,
        rgba(0, 0, 0, .3) 100%
    );
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--player-control-bg) 72%, transparent),
        transparent 52%,
        color-mix(in srgb, var(--player-control-bg) 32%, transparent) 100%
    );
}

.theme-vidstack .nf-bottom {
    height: auto;
    min-height: calc(var(--control-bar-height, 52px) + 45px);
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: center;
    padding: 0 12px 6px;
    gap: 0 2px;
    background: transparent;
    transform: translateY(8px);
}

.theme-vidstack.has-started .mc-player:hover .nf-bottom,
.theme-vidstack.has-started .mc-player:focus-within .nf-bottom,
.theme-vidstack.is-scrubbing .nf-bottom,
.theme-vidstack.is-seeking .nf-bottom,
.theme-vidstack.is-waiting-play .nf-bottom {
    transform: translateY(0);
}

.theme-vidstack.is-playing.is-ui-idle .nf-bottom {
    transform: translateY(8px);
}

.theme-vidstack .nf-progress-row {
    order: 1;
    width: 100%;
    flex: 1 0 100%;
    height: 45px;
    padding: 0 6px;
    margin-bottom: -14px;
    gap: 0;
}

.theme-vidstack .nf-progress-range {
    height: 45px;
}

.theme-vidstack .nf-progress-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--player-progress-color) 0 var(--nf-progress, 0%), rgba(255, 255, 255, .3) var(--nf-progress, 0%) 100%);
}

.theme-vidstack .nf-progress-range::-moz-range-track,
.theme-vidstack .nf-progress-range::-moz-range-progress {
    height: 5px;
    border-radius: 2px;
}

.theme-vidstack .nf-progress-range::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    margin-top: -5px;
    border: 1px solid #cacaca;
    background: #fff;
}

.theme-vidstack .nf-progress-range::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 1px solid #cacaca;
    background: #fff;
}

.theme-vidstack .nf-center-play {
    border-radius: var(--play-button-radius, 999px);
    border-color: rgba(255, 255, 255, .14);
    background: color-mix(in srgb, var(--player-bg, #000) 76%, transparent);
    color: var(--player-control-color);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .36);
    backdrop-filter: blur(10px);
}

.theme-vidstack .nf-icon-button {
    width: calc(var(--control-icon-size, 27px) + 11px);
    height: calc(var(--control-icon-size, 27px) + 11px);
    min-width: calc(var(--control-icon-size, 27px) + 11px);
    border-radius: 999px;
    color: var(--player-control-color);
    opacity: 1;
    transition: transform .2s ease-out, background-color .2s ease-out;
}

.theme-vidstack .nf-icon-button:hover,
.theme-vidstack .nf-icon-button:focus-visible,
.theme-vidstack .nf-icon-button[aria-expanded="true"] {
    background: rgba(255, 255, 255, .2);
    transform: scale(1.05);
}

.theme-vidstack .nf-svg {
    width: min(var(--control-icon-size, 27px), 70%);
    height: min(var(--control-icon-size, 27px), 70%);
}

.theme-vidstack .nf-control-play {
    order: 2;
}

.theme-vidstack .nf-time-pair {
    order: 3;
    margin-right: auto;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.theme-vidstack .nf-time-divider,
.theme-vidstack .nf-total-time {
    display: inline-flex;
}

.theme-vidstack .nf-duration {
    display: none;
}

.theme-vidstack .nf-volume {
    order: 4;
    gap: 0;
}

.theme-vidstack .nf-volume-range {
    height: 38px;
    margin-left: 0;
}

.theme-vidstack .nf-volume:hover .nf-volume-range,
.theme-vidstack .nf-volume:focus-within .nf-volume-range {
    width: 72px;
    margin-left: 10px;
}

.theme-vidstack .nf-volume-range::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 2px;
}

.theme-vidstack .nf-volume-range::-moz-range-track,
.theme-vidstack .nf-volume-range::-moz-range-progress {
    height: 5px;
    border-radius: 2px;
}

.theme-vidstack .nf-volume-range::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -4px;
    border: 1px solid #cacaca;
}

.theme-vidstack .nf-volume-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 1px solid #cacaca;
}

.theme-vidstack .nf-speed {
    order: 5;
}

.theme-vidstack .nf-fullscreen {
    order: 7;
}

.theme-vidstack .nf-speed-button {
    height: calc(var(--control-icon-size, 27px) + 11px);
}

.theme-vidstack .nf-speed-label {
    font-size: 12px;
    font-weight: 700;
}

/* ---- live : broadcast-style skin for HLS/live streams -------------------- */
.theme-live .nf-skin::after {
    height: 58%;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--player-control-bg) 86%, transparent),
        color-mix(in srgb, var(--player-control-bg) 36%, transparent) 54%,
        transparent
    );
}

.theme-live .nf-bottom {
    height: var(--control-bar-height, 52px);
    padding: 0 14px;
    gap: 10px;
    background: color-mix(in srgb, var(--player-control-bg) 82%, transparent);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .32);
}

.theme-live .nf-bottom::before {
    order: 2;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px 0 8px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    content: "LIVE";
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: 1;
    text-shadow: none;
}

.theme-live .nf-bottom::after {
    order: 3;
    width: 7px;
    height: 7px;
    margin-left: -18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .65);
    content: "";
    animation: live-pulse 1.4s ease-out infinite;
}

@keyframes live-pulse {
    70% {
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.theme-live .nf-control-play {
    order: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}

.theme-live .nf-time-pair {
    order: 4;
    margin-right: auto;
    font-size: 13px;
    font-weight: 800;
}

.theme-live .nf-volume {
    order: 5;
}

.theme-live .nf-grid,
.theme-live .nf-audio-track,
.theme-live .nf-speed {
    order: 6;
}

.theme-live .nf-fullscreen {
    order: 7;
}

.theme-live .nf-progress-row {
    order: 8;
    flex: 0 1 240px;
    max-width: min(32vw, 260px);
    margin-left: 4px;
}

.theme-live .nf-progress-range {
    height: 14px;
}

.theme-live .nf-progress-range::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(90deg, #e11d48 0 var(--nf-progress, 0%), rgba(255, 255, 255, .26) var(--nf-progress, 0%) 100%);
}

.theme-live .nf-progress-range::-moz-range-track,
.theme-live .nf-progress-range::-moz-range-progress {
    height: 4px;
}

.theme-live .nf-progress-range::-webkit-slider-thumb {
    background: #fff;
}

.theme-live .nf-progress-range::-moz-range-thumb {
    background: #fff;
}

.theme-live.provider-hls .nf-progress-row,
.theme-live.provider-hls .nf-duration,
.theme-live.provider-hls .nf-total-time,
.theme-live.provider-hls .nf-time-divider {
    display: none;
}

.theme-live.provider-hls .nf-time-pair {
    margin-right: auto;
}

.theme-live.provider-hls .nf-current-time {
    display: none;
}

.theme-live.provider-hls .nf-time-pair::before {
    content: "Live now";
}

.theme-live .nf-center-play {
    border: 0;
    border-radius: var(--play-button-radius, 40px);
    background: #e11d48;
    color: #fff;
    box-shadow: 0 18px 52px rgba(225, 29, 72, .35);
}

.theme-live .nf-icon-button {
    border-radius: 999px;
}

.theme-live .nf-icon-button:hover,
.theme-live .nf-icon-button:focus-visible,
.theme-live .nf-icon-button[aria-expanded="true"] {
    background: rgba(225, 29, 72, .26);
}

/* Fallback for browsers without color-mix(): use the raw control bg. */
@supports not (background: color-mix(in srgb, #000 50%, transparent)) {
    .theme-zen .nf-bottom {
        background: var(--player-control-bg);
    }

    .theme-vidstack .nf-center-play {
        background: rgba(0, 0, 0, .62);
    }

    .theme-live .nf-bottom {
        background: rgba(0, 0, 0, .82);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
    .nf-icon-button {
        width: min(calc(var(--control-icon-size, 27px) + 14px), 40px);
        height: min(calc(var(--control-icon-size, 27px) + 14px), 40px);
        min-width: min(calc(var(--control-icon-size, 27px) + 14px), 40px);
    }

    .nf-svg {
        width: min(var(--control-icon-size, 27px), 26px);
        height: min(var(--control-icon-size, 27px), 26px);
    }

    .nf-volume-range,
    .nf-time-pair {
        display: none;
    }

    .nf-bottom {
        gap: 6px;
    }

    .theme-sleek .nf-bottom {
        width: auto;
        right: 8px;
        left: 8px;
        transform: none;
    }

    .theme-sleek.has-started .mc-player:hover .nf-bottom,
    .theme-sleek.has-started .mc-player:focus-within .nf-bottom,
    .theme-sleek.is-scrubbing .nf-bottom,
    .theme-sleek.is-seeking .nf-bottom,
    .theme-sleek.is-waiting-play .nf-bottom {
        transform: none;
    }

    .theme-sleek.is-playing.is-ui-idle .nf-bottom {
        transform: translateY(8px);
    }

    .theme-vidstack .nf-bottom {
        min-height: calc(var(--control-bar-height, 52px) + 36px);
        padding: 0 8px 6px;
    }

    .theme-vidstack .nf-progress-row {
        height: 36px;
        margin-bottom: -10px;
        padding: 0 2px;
    }

    .theme-vidstack .nf-progress-range {
        height: 36px;
    }

    .theme-live .nf-bottom {
        gap: 6px;
        padding: 0 8px;
    }

    .theme-live .nf-progress-row {
        flex-basis: 120px;
        max-width: 30vw;
    }

    .theme-live.provider-hls .nf-time-pair {
        display: inline-flex;
        font-size: 12px;
    }

    .nf-chapters-panel {
        right: 8px;
        bottom: calc(var(--control-bar-height, 52px) + 10px);
        width: calc(100% - 16px);
        max-height: min(360px, calc(100% - 68px));
    }

    .nf-chapters-list {
        padding: 10px;
    }

    .nf-chapter-item {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
    }

    .nf-chapter-title {
        font-size: 17px;
    }

    .nf-chapter-time,
    .nf-chapter-duration {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .nf-rewind-control,
    .nf-forward-control {
        display: none;
    }
}

/* ==========================================================================
   The skin uses one Settings gear. Legacy separate caption/audio buttons stay
   hidden so subtitle and audio-track choices live in that single menu.
   ========================================================================== */
.saas-player .nf-captions,
.saas-player .nf-audio-track,
.saas-player .mc-cc-button,
.saas-player .nf-pip {
    display: none !important;
}

/* In fullscreen, idle must win over hover/focus so the bar and cursor clear
   even when the mouse is resting over the player. */
.saas-player.is-fullscreen-idle .mc-player,
.saas-player.is-fullscreen-idle .mc-player *,
.saas-player.is-ui-idle .mc-player:fullscreen,
.saas-player.is-ui-idle .mc-player:fullscreen *,
.saas-player.is-ui-idle .mc-player:-webkit-full-screen,
.saas-player.is-ui-idle .mc-player:-webkit-full-screen * {
    cursor: none !important;
}

.saas-player.is-fullscreen-idle .nf-bottom,
.saas-player.is-ui-idle .mc-player:fullscreen .nf-bottom,
.saas-player.is-ui-idle .mc-player:-webkit-full-screen .nf-bottom {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
}

/* ==========================================================================
   Sleek skin (last skin): uses standard inline SVGs styled with theme sizing.
   ========================================================================== */

/* Bigger control icons across the Sleek skin. */
.theme-sleek .nf-icon-button {
    width: calc(var(--control-icon-size, 27px) + 14px);
    height: calc(var(--control-icon-size, 27px) + 14px);
    min-width: calc(var(--control-icon-size, 27px) + 14px);
}

.theme-sleek .nf-svg {
    width: var(--control-icon-size, 27px);
    height: var(--control-icon-size, 27px);
}

.theme-sleek .nf-control-play .nf-svg-play-shape {
    width: calc(var(--control-icon-size, 27px) + 3px);
    height: calc(var(--control-icon-size, 27px) + 3px);
}

.theme-sleek .nf-speed-button {
    height: calc(var(--control-icon-size, 27px) + 14px);
    gap: 6px;
}

.theme-sleek .nf-speed-button .nf-svg {
    width: var(--control-icon-size, 27px);
    height: var(--control-icon-size, 27px);
}

.theme-sleek .nf-speed-label {
    font-size: 14px;
}

/* Volume: vertical slider popup above the speaker (like the reference). */
.theme-sleek .nf-volume {
    position: relative;
}

/* The panel sits flush on top of the speaker (no gap) so moving the cursor
   from the button into the slider never leaves the hover zone. */
.theme-sleek .nf-volume::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 40px;
    height: 124px;
    border-radius: 10px;
    background: rgba(8, 8, 10, .74);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .4);
    backdrop-filter: blur(6px);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 13;
    transition: opacity .15s ease, visibility .15s ease;
}

.theme-sleek .nf-volume-range {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 47px);
    width: 104px;
    height: 30px;
    margin: 0;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 14;
    transition: opacity .15s ease, visibility .15s ease;
}

.theme-sleek .nf-volume:hover::after,
.theme-sleek .nf-volume:focus-within::after,
.theme-sleek .nf-volume:hover .nf-volume-range,
.theme-sleek .nf-volume:focus-within .nf-volume-range {
    opacity: 1;
    visibility: visible;
}

/* Keep both the panel and the slider interactive while open, so the cursor
   stays inside the volume element the whole way up. */
.theme-sleek .nf-volume:hover::after,
.theme-sleek .nf-volume:focus-within::after {
    pointer-events: auto;
}

.theme-sleek .nf-volume:hover .nf-volume-range,
.theme-sleek .nf-volume:focus-within .nf-volume-range {
    width: 104px;
    pointer-events: auto;
}

/* ==========================================================================
   Now skin (first skin): bigger icons + custom icons from /public/icons/now.
   The volume keeps its default horizontal expand behaviour.
   ========================================================================== */
.theme-now .nf-icon-button {
    width: calc(var(--control-icon-size, 27px) + 14px);
    height: calc(var(--control-icon-size, 27px) + 14px);
    min-width: calc(var(--control-icon-size, 27px) + 14px);
}

.theme-now .nf-svg {
    width: var(--control-icon-size, 27px);
    height: var(--control-icon-size, 27px);
}

.theme-now .nf-control-play .nf-svg-play-shape {
    width: calc(var(--control-icon-size, 27px) + 3px);
    height: calc(var(--control-icon-size, 27px) + 3px);
}

.theme-now .nf-speed-button {
    height: calc(var(--control-icon-size, 27px) + 14px);
    gap: 6px;
}

.theme-now .nf-speed-button .nf-svg {
    width: var(--control-icon-size, 27px);
    height: var(--control-icon-size, 27px);
}

.theme-now .nf-speed-label {
    font-size: 14px;
}

/* Standard inline SVGs used for Now skin volume and fullscreen controls. */