/**
 * WordPress core media modal — dark mode (wizard + Studio Hub admin)
 *
 * @package YOOAdmin
 */

html.yoo-wizard-html-dark,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme),
html[data-yooadmin-studio-color-mode-effective="dark"],
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] {
    --yoo-wp-media-bg: var(--yoo-wizard-card, #1a1d23);
    --yoo-wp-media-surface: var(--yoo-wizard-panel, #141820);
    --yoo-wp-media-elevated: #22262e;
    --yoo-wp-media-border: var(--yoo-wizard-border, rgba(255, 255, 255, 0.1));
    --yoo-wp-media-text: var(--yoo-wizard-text, #cfd6e0);
    --yoo-wp-media-heading: var(--yoo-wizard-heading, #e8edf5);
    --yoo-wp-media-muted: var(--yoo-wizard-muted, #9aa5b1);
    --yoo-wp-media-brand: var(--yoo-brand-accent, var(--yoo-wizard-brand, var(--yooadmin-primary, #eda934)));
    --yoo-wp-media-scroll-thumb: rgba(255, 255, 255, 0.2);
    --yoo-wp-media-scroll-thumb-hover: rgba(255, 255, 255, 0.32);
    --wp-admin-theme-color: var(--yoo-wp-media-brand);
    --wp-admin-theme-color--rgb: var(--yoo-wp-media-brand-rgb, 237, 169, 52);
    --wp-admin-theme-color-darker-10: color-mix(in srgb, var(--yoo-wp-media-brand) 88%, #000 12%);
    --wp-admin-theme-color-darker-20: color-mix(in srgb, var(--yoo-wp-media-brand) 76%, #000 24%);
    --wp-admin-border-width-focus: 1px;
    --wp-components-color-accent: var(--yoo-wp-media-brand);
    --wp-components-color-accent-darker-10: var(--wp-admin-theme-color-darker-10);
    --wp-components-color-accent-darker-20: var(--wp-admin-theme-color-darker-20);
}

html.yoo-wizard-html-dark .media-modal,
html.yoo-wizard-html-dark .media-modal-content,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-content,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-content {
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-frame,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame {
    background: var(--yoo-wp-media-bg);
    color: var(--yoo-wp-media-text);
    border-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-frame-title,
html.yoo-wizard-html-dark .media-frame-title h1,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-title,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-title h1,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-title,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-title h1 {
    background: var(--yoo-wp-media-bg);
    border-bottom-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-frame-menu-heading,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu-heading,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu-heading {
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-modal-close,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close {
    color: var(--yoo-wp-media-muted);
}

html.yoo-wizard-html-dark .media-modal-close:hover,
html.yoo-wizard-html-dark .media-modal-close:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close:focus,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-modal-close:focus {
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-frame-router,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-router,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-router {
    background: var(--yoo-wp-media-surface);
    border-bottom-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-router .media-menu-item,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item {
    color: var(--yoo-wp-media-muted) !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

html.yoo-wizard-html-dark .media-router .media-menu-item:hover,
html.yoo-wizard-html-dark .media-router .media-menu-item:active,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:active {
    color: var(--yoo-wp-media-heading) !important;
    background: transparent !important;
}

html.yoo-wizard-html-dark .media-router .media-menu-item.active,
html.yoo-wizard-html-dark .media-router .media-menu-item.active:last-child,
html.yoo-wizard-html-dark .media-router .active,
html.yoo-wizard-html-dark .media-router .active:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item.active,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item.active:last-child,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .active,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .active:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item.active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item.active:last-child,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .active:hover {
    color: var(--yoo-wp-media-heading) !important;
    background: var(--yoo-wp-media-bg) !important;
    border: none !important;
    border-bottom: 2px solid var(--yoo-wp-media-brand) !important;
    margin: 0 !important;
    box-shadow: none !important;
}

html.yoo-wizard-html-dark .media-router .media-menu-item:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:focus,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-router .media-menu-item:focus {
    color: var(--yoo-wp-media-heading) !important;
    box-shadow: none !important;
    outline: 2px solid var(--yoo-wp-media-brand) !important;
    outline-offset: -2px;
}

html.yoo-wizard-html-dark .media-frame-content,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content {
    background: var(--yoo-wp-media-bg);
}

html.yoo-wizard-html-dark .attachments-browser,
html.yoo-wizard-html-dark .attachments-browser .attachments,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments {
    background: var(--yoo-wp-media-bg);
    border-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-toolbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar {
    background: var(--yoo-wp-media-surface);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-toolbar-secondary,
html.yoo-wizard-html-dark .media-toolbar-primary,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar-secondary,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar-primary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar-secondary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar-primary {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit;
}

html.yoo-wizard-html-dark .media-toolbar .view-switch .view-list,
html.yoo-wizard-html-dark .media-toolbar .view-switch .view-grid,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .view-list,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .view-grid,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .view-list,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .view-grid {
    color: var(--yoo-wp-media-muted);
}

html.yoo-wizard-html-dark .media-toolbar .view-switch .current,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .current,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-toolbar .view-switch .current {
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-frame .search,
html.yoo-wizard-html-dark .media-frame input[type="search"],
html.yoo-wizard-html-dark .media-frame select,
html.yoo-wizard-html-dark .media-frame .attachment-filters,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .search,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame input[type="search"],
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame select,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .attachment-filters,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .search,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame input[type="search"],
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame select,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .attachment-filters {
    background: var(--yoo-wp-media-elevated);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-frame input[type="search"]::placeholder,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame input[type="search"]::placeholder,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame input[type="search"]::placeholder {
    color: var(--yoo-wp-media-muted);
}

html.yoo-wizard-html-dark .media-frame select option,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame select option,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame select option {
    background: var(--yoo-wp-media-elevated);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-sidebar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar {
    background: var(--yoo-wp-media-surface);
    border-left-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-sidebar .attachment-details,
html.yoo-wizard-html-dark .media-sidebar .setting,
html.yoo-wizard-html-dark .media-sidebar label,
html.yoo-wizard-html-dark .media-sidebar .name,
html.yoo-wizard-html-dark .media-sidebar .description,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .attachment-details,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .setting,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar label,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .name,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .description,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .attachment-details,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .setting,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar label,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .name,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .description {
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-sidebar .attachment-info .filename,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .attachment-info .filename,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar .attachment-info .filename {
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .attachment,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachment,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachment {
    background: var(--yoo-wp-media-elevated);
    box-shadow: inset 0 0 0 1px var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .attachment.selected,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachment.selected,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachment.selected {
    box-shadow: inset 0 0 0 3px var(--yoo-wp-media-brand);
}

html.yoo-wizard-html-dark .attachment .check,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachment .check,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachment .check {
    background: var(--yoo-wp-media-brand);
    box-shadow: 0 0 0 1px var(--yoo-wp-media-brand);
}

html.yoo-wizard-html-dark .media-frame-toolbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-toolbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-toolbar {
    background: var(--yoo-wp-media-surface);
    border-top-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button,
html.yoo-wizard-html-dark .media-frame .media-toolbar-secondary .button,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-secondary .button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-secondary .button {
    background: var(--yoo-wp-media-elevated);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button:hover,
html.yoo-wizard-html-dark .media-frame .media-toolbar-secondary .button:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-secondary .button:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-secondary .button:hover {
    background: color-mix(in srgb, var(--yoo-wp-media-elevated) 88%, #fff 12%);
    border-color: color-mix(in srgb, var(--yoo-wp-media-border) 70%, #fff 30%);
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button.media-button-select,
html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button-primary,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button-primary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button-primary {
    background: var(--yoo-wp-media-brand);
    border-color: var(--yoo-wp-media-brand);
    color: #fff;
}

html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button.media-button-select.disabled,
html.yoo-wizard-html-dark .media-frame .media-toolbar-primary .button.media-button-select:disabled,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select.disabled,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select:disabled,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select.disabled,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar-primary .button.media-button-select:disabled {
    background: color-mix(in srgb, var(--yoo-wp-media-elevated) 82%, #fff 18%);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-muted);
    opacity: 0.72;
}

html.yoo-wizard-html-dark .uploader-inline,
html.yoo-wizard-html-dark .uploader-inline-content,
html.yoo-wizard-html-dark .upload-ui,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline-content,
html[data-yooadmin-studio-color-mode-effective="dark"] .upload-ui,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline-content,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .upload-ui {
    background: var(--yoo-wp-media-bg);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .uploader-inline h2,
html.yoo-wizard-html-dark .uploader-inline .upload-ui h2,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline h2,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .upload-ui h2,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline h2,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .upload-ui h2 {
    color: var(--yoo-wp-media-heading) !important;
}

html.yoo-wizard-html-dark .uploader-inline .has-upload-message .upload-instructions,
html.yoo-wizard-html-dark .uploader-inline .post-upload-ui,
html.yoo-wizard-html-dark .uploader-inline .upload-ui .max-upload-size,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .has-upload-message .upload-instructions,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .post-upload-ui,
html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .upload-ui .max-upload-size,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .has-upload-message .upload-instructions,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .post-upload-ui,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .uploader-inline .upload-ui .max-upload-size {
    color: var(--yoo-wp-media-text) !important;
}

html.yoo-wizard-html-dark .media-frame .uploader-inline .browser.button,
html.yoo-wizard-html-dark .media-frame .uploader-inline .button.browser,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .button.browser,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .button.browser {
    background: var(--yoo-wp-media-brand) !important;
    border-color: var(--yoo-wp-media-brand) !important;
    color: #fff !important;
    box-shadow: none !important;
}

html.yoo-wizard-html-dark .media-frame .uploader-inline .browser.button:hover,
html.yoo-wizard-html-dark .media-frame .uploader-inline .browser.button:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button:focus,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .uploader-inline .browser.button:focus {
    background: color-mix(in srgb, var(--yoo-wp-media-brand) 88%, #fff 12%) !important;
    border-color: color-mix(in srgb, var(--yoo-wp-media-brand) 88%, #fff 12%) !important;
    color: #fff !important;
}

html.yoo-wizard-html-dark .media-frame .button-primary,
html.yoo-wizard-html-dark .media-frame .button.button-primary,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .button-primary,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .button.button-primary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .button-primary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .button.button-primary {
    background: var(--yoo-wp-media-brand) !important;
    border-color: var(--yoo-wp-media-brand) !important;
    color: #fff !important;
}

html.yoo-wizard-html-dark .media-selection .button-link,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link {
    color: var(--yoo-wp-media-brand) !important;
    border-right-color: var(--yoo-wp-media-border) !important;
}

html.yoo-wizard-html-dark .media-selection .button-link:hover,
html.yoo-wizard-html-dark .media-selection .button-link:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link:focus,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .button-link:focus {
    color: color-mix(in srgb, var(--yoo-wp-media-brand) 88%, #fff 12%) !important;
}

html.yoo-wizard-html-dark .media-frame .dropzone,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .dropzone,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .dropzone {
    border-color: var(--yoo-wp-media-border);
    background: var(--yoo-wp-media-surface);
}

html.yoo-wizard-html-dark .media-frame .spinner,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .spinner,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .spinner {
    background: var(--yoo-wp-media-elevated);
}

html.yoo-wizard-html-dark .media-frame .spinner.is-active,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .spinner.is-active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .spinner.is-active {
    visibility: visible;
}

html.yoo-wizard-html-dark .media-frame .media-toolbar .instructions,
html.yoo-wizard-html-dark .media-selection,
html.yoo-wizard-html-dark .selection-info,
html.yoo-wizard-html-dark .attachments-browser .no-media,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar .instructions,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection,
html[data-yooadmin-studio-color-mode-effective="dark"] .selection-info,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .no-media,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .media-toolbar .instructions,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .selection-info,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .no-media {
    color: var(--yoo-wp-media-muted);
}

html.yoo-wizard-html-dark .media-frame a,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame a,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame a {
    color: var(--yoo-wp-media-brand);
}

html.yoo-wizard-html-dark .media-frame .delete-attachment,
html.yoo-wizard-html-dark .media-frame .delete-attachment:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .delete-attachment,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .delete-attachment:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .delete-attachment,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .delete-attachment:hover {
    color: #f87171;
}

/* upload.php — toolbar controls live outside .media-frame */
html.yoo-wizard-html-dark .attachments-browser .media-toolbar input[type="search"],
html.yoo-wizard-html-dark .attachments-browser .media-toolbar select.attachment-filters,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar input[type="search"],
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar select.attachment-filters,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar input[type="search"],
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar select.attachment-filters {
    background: var(--yoo-wp-media-elevated);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .attachments-browser .media-toolbar select.attachment-filters option,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar select.attachment-filters option,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar select.attachment-filters option {
    background: var(--yoo-wp-media-elevated);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .attachments-browser .media-toolbar .button,
html.yoo-wizard-html-dark .attachments-browser .media-toolbar .select-mode-toggle-button,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .select-mode-toggle-button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .select-mode-toggle-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .attachments-browser .media-toolbar .button:hover,
html.yoo-wizard-html-dark .attachments-browser .media-toolbar .select-mode-toggle-button:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .select-mode-toggle-button:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .select-mode-toggle-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .attachments-browser .media-toolbar .button-primary,
html.yoo-wizard-html-dark .attachments-browser .media-toolbar .delete-selected-button,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button-primary,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .delete-selected-button,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .button-primary,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar .delete-selected-button {
    background: var(--yoo-wp-media-brand, #e8aa60);
    border-color: var(--yoo-wp-media-brand, #e8aa60);
    color: #1a1d23;
}

html.yoo-wizard-html-dark .attachments-browser .media-toolbar label,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .media-toolbar label,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar label,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .media-toolbar label {
    color: var(--yoo-wp-media-muted);
}

/* -------------------------------------------------------------------------
 * Left menu (Create gallery / Media Library modes) — was missing (white sidebar)
 * ------------------------------------------------------------------------- */
html.yoo-wizard-html-dark .media-frame-menu,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-menu,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu {
    background: var(--yoo-wp-media-surface);
    border-right-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-menu,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu {
    background: var(--yoo-wp-media-surface);
    border-right-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-menu .media-menu-item,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .media-menu-item,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item {
    color: var(--yoo-wp-media-muted);
    background: transparent;
}

html.yoo-wizard-html-dark .media-menu .media-menu-item:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .media-menu-item:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--yoo-wp-media-heading);
}

html.yoo-wizard-html-dark .media-menu .active,
html.yoo-wizard-html-dark .media-menu .active:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .active,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .active:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .active,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .active:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .active,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .active:hover {
    color: var(--yoo-wp-media-heading);
    background: rgba(255, 255, 255, 0.08);
}

html.yoo-wizard-html-dark .media-menu .media-menu-item:focus,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .media-menu-item:focus,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item:focus,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .media-menu-item:focus {
    color: var(--yoo-wp-media-brand);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--yoo-wp-media-brand) 45%, transparent);
}

html.yoo-wizard-html-dark .media-menu .separator,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu .separator,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .separator,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu .separator {
    border-top-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-frame-menu-heading,
html.yoo-wizard-html-dark .media-attachments-filter-heading,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-menu-heading,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-attachments-filter-heading,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu-heading,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-attachments-filter-heading,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-menu-heading,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-attachments-filter-heading {
    color: var(--yoo-wp-media-muted);
}

/* Attachment filename strip (grid captions) */
html.yoo-wizard-html-dark .wp-core-ui .attachment .filename,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .wp-core-ui .attachment .filename,
html[data-yooadmin-studio-color-mode-effective="dark"] .wp-core-ui .attachment .filename,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .wp-core-ui .attachment .filename {
    background: rgba(20, 24, 32, 0.88);
    color: var(--yoo-wp-media-text);
    box-shadow: inset 0 0 0 1px var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-selection .attachment .filename,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-selection .attachment .filename,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .attachment .filename,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-selection .attachment .filename {
    background: rgba(20, 24, 32, 0.92);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-frame-content,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content {
    border-top-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-frame .load-more-wrapper,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame .load-more-wrapper,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more-wrapper,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more-wrapper {
    background: var(--yoo-wp-media-bg);
    border-color: var(--yoo-wp-media-border);
}

html.yoo-wizard-html-dark .media-frame .load-more,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame .load-more,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more {
    background: var(--yoo-wp-media-elevated);
    border-color: var(--yoo-wp-media-border);
    color: var(--yoo-wp-media-text);
}

html.yoo-wizard-html-dark .media-frame .load-more:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame .load-more:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame .load-more:hover {
    background: color-mix(in srgb, var(--yoo-wp-media-elevated) 88%, #fff 12%);
    color: var(--yoo-wp-media-heading);
}

/* Scrollbars — match Studio Hub sidebar (dark-friendly) */
html.yoo-wizard-html-dark .media-frame-content,
html.yoo-wizard-html-dark .attachments-browser,
html.yoo-wizard-html-dark .attachments-browser .attachments,
html.yoo-wizard-html-dark .attachments-browser .attachments-wrapper,
html.yoo-wizard-html-dark .media-sidebar,
html.yoo-wizard-html-dark .media-menu,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments-wrapper,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-sidebar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--yoo-wp-media-scroll-thumb) transparent;
}

html.yoo-wizard-html-dark .media-frame-content::-webkit-scrollbar,
html.yoo-wizard-html-dark .attachments-browser::-webkit-scrollbar,
html.yoo-wizard-html-dark .attachments-browser .attachments::-webkit-scrollbar,
html.yoo-wizard-html-dark .attachments-browser .attachments-wrapper::-webkit-scrollbar,
html.yoo-wizard-html-dark .media-sidebar::-webkit-scrollbar,
html.yoo-wizard-html-dark .media-menu::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments-wrapper::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-sidebar::-webkit-scrollbar,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.yoo-wizard-html-dark .media-frame-content::-webkit-scrollbar-track,
html.yoo-wizard-html-dark .attachments-browser::-webkit-scrollbar-track,
html.yoo-wizard-html-dark .attachments-browser .attachments::-webkit-scrollbar-track,
html.yoo-wizard-html-dark .attachments-browser .attachments-wrapper::-webkit-scrollbar-track,
html.yoo-wizard-html-dark .media-sidebar::-webkit-scrollbar-track,
html.yoo-wizard-html-dark .media-menu::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments-wrapper::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-sidebar::-webkit-scrollbar-track,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-track,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-track,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-track {
    background: transparent;
}

html.yoo-wizard-html-dark .media-frame-content::-webkit-scrollbar-thumb,
html.yoo-wizard-html-dark .attachments-browser::-webkit-scrollbar-thumb,
html.yoo-wizard-html-dark .attachments-browser .attachments::-webkit-scrollbar-thumb,
html.yoo-wizard-html-dark .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb,
html.yoo-wizard-html-dark .media-sidebar::-webkit-scrollbar-thumb,
html.yoo-wizard-html-dark .media-menu::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-sidebar::-webkit-scrollbar-thumb,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-thumb,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-thumb,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-thumb {
    background-color: var(--yoo-wp-media-scroll-thumb);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

html.yoo-wizard-html-dark .media-frame-content::-webkit-scrollbar-thumb:hover,
html.yoo-wizard-html-dark .attachments-browser::-webkit-scrollbar-thumb:hover,
html.yoo-wizard-html-dark .attachments-browser .attachments::-webkit-scrollbar-thumb:hover,
html.yoo-wizard-html-dark .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb:hover,
html.yoo-wizard-html-dark .media-sidebar::-webkit-scrollbar-thumb:hover,
html.yoo-wizard-html-dark .media-menu::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-frame-content::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-sidebar::-webkit-scrollbar-thumb:hover,
html:is([data-yooadmin-studio-color-mode-effective="dark"], .is-dark-theme) .media-menu::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-thumb:hover,
html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-frame-content::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .attachments-browser .attachments-wrapper::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-sidebar::-webkit-scrollbar-thumb:hover,
html.yooadmin-studio-hub-html[data-yooadmin-studio-color-mode-effective="dark"] .media-menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--yoo-wp-media-scroll-thumb-hover);
}