/* ==========================================================================
   Canvix Editor — Dark Mode
   Toggled via the "pg-dark-mode" class on <html>, controlled from the
   Profile menu dropdown (#pgDarkModeToggle in editor.php).

   NOTE: editor.php has several embedded <style> blocks further down the
   page (after this stylesheet's <link> tag) that set colors with
   !important at equal specificity to a plain ".pg-dark-mode .foo" rule.
   In a specificity tie the later rule in source order wins, which is
   those embedded blocks — so every selector below is prefixed with
   "body.pg-editor-body" to guarantee we always win outright rather than
   relying on load order.
   ========================================================================== */

/* --- Profile menu toggle switch (always available, both themes) --- */
.pg-darkmode-toggle {
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	grid-gap: 10px;
	font-weight: 500;
	width: 100%;
	color: var(--canvix-title-color);
	cursor: pointer;
	margin: 0;
}
.pg-darkmode-toggle:hover {
	background: rgba(56, 182, 255, .08);
}
.pg-darkmode-toggle-label {
	flex: 1 1 auto;
}
.pg-darkmode-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	flex: 0 0 36px;
}
.pg-darkmode-checkbox {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.pg-darkmode-slider {
	position: absolute;
	inset: 0;
	background: #d5dbe3;
	border-radius: 999px;
	transition: background .2s ease;
}
.pg-darkmode-slider:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pg-darkmode-checkbox:checked + .pg-darkmode-slider {
	background: var(--canvix-primary);
}
.pg-darkmode-checkbox:checked + .pg-darkmode-slider:before {
	transform: translateX(16px);
}
.pg-darkmode-checkbox:focus-visible + .pg-darkmode-slider {
	outline: 2px solid var(--canvix-primary);
	outline-offset: 2px;
}

/* --- Core theme: remap the site's own color variables ---
   Most panels/cards/menus already read from these vars, so this alone
   re-themes the bulk of the editor chrome (sidebars, dropdowns, property
   panels, etc). Components below with hardcoded colors get explicit rules. */
html.pg-dark-mode {
	--canvix-white-color: #24272f;
	--canvix-body-bg: #101216;
	--canvix-title-color: #f2f4f7;
	--canvix-global-color: #c2c8d2;
	--canvix-border-color: #3a3f4c;
}

html.pg-dark-mode body.pg-editor-body {
	background: var(--canvix-body-bg) !important;
}

/* --- Top header bar (hardcoded bright blue, body.pg-editor-body .pg-editor-header{background:#2fb4ec!important} in editor.php) --- */
html.pg-dark-mode body.pg-editor-body .pg-editor-header {
	background: #14181f !important;
}

/* --- Left icon rail (hardcoded #fff / #676767 in style3.css) --- */
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul {
	background: var(--canvix-white-color) !important;
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul {
	box-shadow: none !important;
}
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a {
	color: #d5dae2 !important;
}
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a.active,
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a:hover {
	color: var(--canvix-primary) !important;
}

/* --- Profile dropdown menu (hardcoded #ffffff block in editor.php's own <head> <style>, not the var-based one in style3.css) --- */
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links {
	background: var(--canvix-white-color) !important;
	border-color: var(--canvix-border-color) !important;
	box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links a {
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links a:hover {
	background: rgba(56,182,255,.12) !important;
	color: var(--canvix-primary) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links .pg-nav-icon {
	background: rgba(56,182,255,.16) !important;
	color: var(--canvix-primary) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links ul li a {
	color: var(--canvix-title-color) !important;
}

/* --- Sliding side panel / scrollbar surfaces (border hardcoded) --- */
html.pg-dark-mode body.pg-editor-body .pg-custom-scrollbar {
	border-color: var(--canvix-border-color) !important;
}

/* --- Canvas zoom/fit toolbar above the canvas (hardcoded light colors) --- */
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap {
	background-color: var(--canvix-white-color) !important;
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a {
	color: #c2c8d2 !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a:hover {
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > p {
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-fit-canvas-toolbar-btn {
	color: #c2c8d2 !important;
	border-left-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-fit-canvas-toolbar-btn:hover {
	color: var(--canvix-primary) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.object-tools .pg-object-size-toolbar {
	border-left-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.object-tools .pg-object-size-toolbar input {
	background: #1a1c22 !important;
	color: var(--canvix-title-color) !important;
	border-color: rgba(255,255,255,.15) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.object-tools .pg-object-size-toolbar .pg-object-size-sep {
	color: #9aa1ad !important;
}

/* --- Accordion panels (e.g. the Vectors tab's shape categories, loaded via AJAX
   into .pg-element-shape-loads) — .panel-heading has a hardcoded light background
   while .panel-title a already reads var(--canvix-title-color), so once that var
   goes light the header text was rendering light-on-light and vanishing. --- */
html.pg-dark-mode body.pg-editor-body .panel-heading {
	background: #262a33 !important;
	border-color: var(--canvix-border-color) !important;
}

/* --- Scattered tool-panel titles/chips hardcoded to #0f172a (dark navy),
   which only worked against their original white panel backgrounds. --- */
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit .pg-ai-edit-heading,
html.pg-dark-mode body.pg-editor-body .pg-filter-panel .pg-filter-heading,
html.pg-dark-mode body.pg-editor-body .pg-filter-section-title {
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card .pg_range_slider_val {
	background: #2a2d36 !important;
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit .pg-selected-cartoon-style.active {
	background: rgba(56,182,255,.20) !important;
	color: #ffffff !important;
}

/* --- Text / element preset cards ---
   Generic rule (covers any card) plus the two more specific selectors
   that style3.css itself uses for these exact cards
   (.pg-title-elements ul li > a.canvix-text-style and the
   .canvix-add-plain-text "Add a text box" row), so nothing can be missed
   regardless of which selector wins the match. */
html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a,
html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a.canvix-text-style {
	background: #2a2d36 !important;
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a.canvix-text-style:before {
	background: radial-gradient(circle at 15% 20%, rgba(56,182,255,.14), transparent 32%), linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
}
html.pg-dark-mode body.pg-editor-body .pg_element_text.canvix-text-presets .canvix-add-plain-text {
	background: #202329 !important;
	border-color: rgba(56,182,255,.35) !important;
	color: #6fc4ff !important;
}
html.pg-dark-mode body.pg-editor-body .pg_element_text.canvix-text-presets .canvix-add-plain-text:hover {
	background: #262b34 !important;
	border-color: var(--canvix-primary) !important;
	color: #8fd3ff !important;
}

/* --- Sub-tabs, e.g. Elements / Mockups / YouTube / Screenshot (hardcoded #F6F8FA) --- */
html.pg-dark-mode body.pg-editor-body .nav-tabs {
	background: #1a1c22 !important;
}
/* Active sub-tab text used var(--canvix-white-color) meaning literal white-on-blue;
   since that var is now a dark surface color in dark mode, force real white here
   so the active tab doesn't render as unreadable dark-on-blue text. */
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-item.show .nav-link,
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-link.active {
	color: #ffffff !important;
	background: var(--canvix-primary) !important;
}

/* --- Scattered labels/headings using the title color hex directly instead of the var --- */
html.pg-dark-mode body.pg-editor-body .pg-user-info h5,
html.pg-dark-mode body.pg-editor-body .pg-selected-category-title,
html.pg-dark-mode body.pg-editor-body .pg_template_name,
html.pg-dark-mode body.pg-editor-body .pg-from-wrapper h2,
html.pg-dark-mode body.pg-editor-body .pg_element_draw .pg-draw-panel,
html.pg-dark-mode body.pg-editor-body .canvix-mockup-card,
html.pg-dark-mode body.pg-editor-body .canvix-mockup-edit-panel h4,
html.pg-dark-mode body.pg-editor-body .canvix-mockup-adjust,
html.pg-dark-mode body.pg-editor-body .canvix-mockup-reset-image {
	color: var(--canvix-title-color) !important;
}

/* --- Form controls (Bootstrap defaults, no var usage) --- */
html.pg-dark-mode body.pg-editor-body .form-control,
html.pg-dark-mode body.pg-editor-body .form-select,
html.pg-dark-mode body.pg-editor-body textarea,
html.pg-dark-mode body.pg-editor-body select,
html.pg-dark-mode body.pg-editor-body input[type="text"],
html.pg-dark-mode body.pg-editor-body input[type="number"],
html.pg-dark-mode body.pg-editor-body input[type="search"],
html.pg-dark-mode body.pg-editor-body input[type="email"],
html.pg-dark-mode body.pg-editor-body input[type="password"] {
	background-color: #262a33 !important;
	border-color: var(--canvix-border-color) !important;
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .form-control::placeholder,
html.pg-dark-mode body.pg-editor-body textarea::placeholder,
html.pg-dark-mode body.pg-editor-body input::placeholder {
	color: #6b7280 !important;
}
html.pg-dark-mode body.pg-editor-body .form-control:focus,
html.pg-dark-mode body.pg-editor-body .form-select:focus {
	background-color: #262a33 !important;
	color: var(--canvix-title-color) !important;
	border-color: var(--canvix-primary) !important;
	box-shadow: 0 0 0 .15rem rgba(56,182,255,.25) !important;
}

/* --- Modals (Bootstrap defaults) --- */
html.pg-dark-mode body.pg-editor-body .modal-content {
	background-color: var(--canvix-white-color) !important;
	color: var(--canvix-title-color) !important;
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .modal-header,
html.pg-dark-mode body.pg-editor-body .modal-footer {
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .modal-title {
	color: var(--canvix-title-color) !important;
}
html.pg-dark-mode body.pg-editor-body .btn-close {
	filter: invert(1) grayscale(1) brightness(1.8);
}

/* --- Generic Bootstrap dropdowns (color pickers, export menus, etc) --- */
html.pg-dark-mode body.pg-editor-body .dropdown-menu {
	background-color: var(--canvix-white-color) !important;
	color: var(--canvix-title-color) !important;
	border-color: var(--canvix-border-color) !important;
}
html.pg-dark-mode body.pg-editor-body .dropdown-menu > li > a {
	color: var(--canvix-title-color) !important;
}

/* --- Scrollbars --- */
html.pg-dark-mode body.pg-editor-body ::-webkit-scrollbar-track {
	background: #1a1c22;
}
html.pg-dark-mode body.pg-editor-body ::-webkit-scrollbar-thumb {
	background: #3a3f4c;
}
html.pg-dark-mode body.pg-editor-body ::-webkit-scrollbar-thumb:hover {
	background: #4a5063;
}


/* ==========================================================================
   Canvix Editor — Comprehensive Dark Mode Coverage Patch

   The original stylesheet supplied by the site owner is retained above.
   The rules below extend that original theme to the remaining editor UI,
   including inline-styled components and modal-specific controls. They are
   intentionally placed last and use editor-scoped specificity so that the
   later embedded styles in editor.php cannot make labels or controls
   unreadable in dark mode.
   ========================================================================== */

/* ============================================================
   1. Theme tokens and native controls
============================================================ */
html.pg-dark-mode {
    color-scheme: dark;

    --cvx-dark-page: #0d1117;
    --cvx-dark-header: #12171f;
    --cvx-dark-sidebar: #151a22;
    --cvx-dark-panel: #222831;
    --cvx-dark-panel-2: #282f39;
    --cvx-dark-control: #1b222c;
    --cvx-dark-control-hover: #25303d;
    --cvx-dark-border: #3a4553;
    --cvx-dark-border-soft: #303946;
    --cvx-dark-text: #e6edf3;
    --cvx-dark-text-soft: #c2ccd8;
    --cvx-dark-muted: #93a4b7;
    --cvx-dark-faint: #748397;
    --cvx-dark-accent: #38b6ff;
    --cvx-dark-accent-soft: rgba(56, 182, 255, .15);
    --cvx-dark-danger: #ff6b7a;
    --cvx-dark-success: #57d59b;
    --cvx-dark-warning: #f6c761;

    --canvix-body-bg: var(--cvx-dark-page);
    --canvix-global-color: var(--cvx-dark-text-soft);
    --canvix-title-color: var(--cvx-dark-text);
    --canvix-border-color: var(--cvx-dark-border);
}

html.pg-dark-mode body.pg-editor-body {
    background: var(--cvx-dark-page) !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body ::selection {
    background: rgba(56, 182, 255, .34);
    color: #ffffff;
}

html.pg-dark-mode body.pg-editor-body input,
html.pg-dark-mode body.pg-editor-body textarea,
html.pg-dark-mode body.pg-editor-body select,
html.pg-dark-mode body.pg-editor-body button {
    color-scheme: dark;
}

html.pg-dark-mode body.pg-editor-body option,
html.pg-dark-mode body.pg-editor-body optgroup {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
}

/* ============================================================
   2. Main editor shell
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg-main-wrapper,
html.pg-dark-mode body.pg-editor-body .pg-page-content,
html.pg-dark-mode body.pg-editor-body .pg-screen-container,
html.pg-dark-mode body.pg-editor-body .pg-canvas-wrapper,
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder {
    background-color: var(--cvx-dark-page) !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-page-content {
    background-image: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-wrap {
    background: rgba(13, 17, 23, .98) !important;
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-copy,
html.pg-dark-mode body.pg-editor-body .pg-preloader-copy * {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-progress {
    background: var(--cvx-dark-control) !important;
    border-color: var(--cvx-dark-border) !important;
}

/* Header */
html.pg-dark-mode body.pg-editor-body .pg-editor-header,
html.pg-dark-mode body.pg-editor-body .pg-header-wrapper.pg-editor-header {
    background: var(--cvx-dark-header) !important;
    border-bottom-color: #29313d !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-header .pgcs-btn-primary2,
html.pg-dark-mode body.pg-editor-body .pg-editor-header .canvix-header-btn,
html.pg-dark-mode body.pg-editor-body .pg-editor-header .canvix-header-help {
    border-color: #627084 !important;
    background: rgba(255, 255, 255, .035) !important;
    color: #f4f7fb !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-header .pgcs-btn-primary2:hover,
html.pg-dark-mode body.pg-editor-body .pg-editor-header .canvix-header-btn:hover,
html.pg-dark-mode body.pg-editor-body .pg-editor-header .canvix-header-help:hover {
    border-color: #9babbf !important;
    background: rgba(255, 255, 255, .095) !important;
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-header .pg-user-info::after {
    color: var(--cvx-dark-text-soft) !important;
}

/* Profile dropdown and dark-mode toggle */
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links {
    background: #1b212a !important;
    border: 1px solid var(--cvx-dark-border) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .42) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-user-useful-links ul {
    background: transparent !important;
}

html.pg-dark-mode body.pg-editor-body .pg-user-useful-links li,
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links li a,
html.pg-dark-mode body.pg-editor-body .pg-darkmode-toggle {
    color: var(--cvx-dark-text-soft) !important;
    background: transparent !important;
}

html.pg-dark-mode body.pg-editor-body .pg-user-useful-links li a:hover,
html.pg-dark-mode body.pg-editor-body .pg-darkmode-toggle:hover {
    background: #252d38 !important;
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .pg-user-useful-links .pg-nav-icon,
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links .pg-nav-icon i,
html.pg-dark-mode body.pg-editor-body .pg-user-useful-links .pg-nav-icon svg {
    color: var(--cvx-dark-muted) !important;
    fill: currentColor !important;
}

html.pg-dark-mode body.pg-editor-body .pg-darkmode-toggle-label {
    color: inherit !important;
}

html.pg-dark-mode body.pg-editor-body .pg-darkmode-slider {
    background: #394657 !important;
    border-color: #4b5a6e !important;
}

html.pg-dark-mode body.pg-editor-body .pg-darkmode-checkbox:checked + .pg-darkmode-slider {
    background: var(--cvx-dark-accent) !important;
    border-color: var(--cvx-dark-accent) !important;
}

/* ============================================================
   3. Sidebar navigation and content panels
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg-sidebar-wrapper.pg-editor-sidebar,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-tab-conttainer {
    background: transparent !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul {
    background: var(--cvx-dark-sidebar) !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a {
    color: #c5cfdb !important;
    background: transparent !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a:hover {
    color: #7bd0ff !important;
    background: rgba(56, 182, 255, .055) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a.active {
    color: var(--cvx-dark-accent) !important;
    background: rgba(56, 182, 255, .085) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a i,
html.pg-dark-mode body.pg-editor-body .pg-editor-aside-nav ul li a svg {
    color: inherit !important;
    fill: currentColor !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap.pg-custom-scrollbar,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap .mCustomScrollBox,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap .mCSB_container {
    background: var(--cvx-dark-panel) !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap {
    border: 1px solid var(--cvx-dark-border) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22) !important;
}

html.pg-dark-mode body.pg-editor-body .mCSB_scrollTools .mCSB_draggerRail {
    background: #171c23 !important;
}

html.pg-dark-mode body.pg-editor-body .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
html.pg-dark-mode body.pg-editor-body .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
html.pg-dark-mode body.pg-editor-body .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background: var(--cvx-dark-accent) !important;
}

/* General sidebar typography */
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h1,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h2,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h3,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h4,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h5,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap h6,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-heading,
html.pg-dark-mode body.pg-editor-body .pg-property-widget .pg-sidebar-heading {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap p,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap label,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap small,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap .small {
    color: var(--cvx-dark-text-soft);
}

html.pg-dark-mode body.pg-editor-body .text-muted,
html.pg-dark-mode body.pg-editor-body .pg-editor-sidebar-content-wrap .text-muted {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body .text-dark {
    color: var(--cvx-dark-text) !important;
}

/* Property blocks and accordions */
html.pg-dark-mode body.pg-editor-body .pg-property-widget,
html.pg-dark-mode body.pg-editor-body .ed_property_body,
html.pg-dark-mode body.pg-editor-body .pg-property-body,
html.pg-dark-mode body.pg-editor-body .panel,
html.pg-dark-mode body.pg-editor-body .panel-body,
html.pg-dark-mode body.pg-editor-body .panel-collapse {
    background-color: transparent !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-property-widget {
    border-top-color: var(--cvx-dark-border-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .panel-heading,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-accordion .panel-heading {
    background: var(--cvx-dark-control) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .panel .panel-title a {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .panel .panel-title a:hover,
html.pg-dark-mode body.pg-editor-body .panel .panel-title a[aria-expanded="true"] {
    color: var(--cvx-dark-accent) !important;
}

html.pg-dark-mode body.pg-editor-body .panel .panel-title a::after {
    border-color: var(--cvx-dark-muted) !important;
}

/* ============================================================
   4. Tabs, buttons and common interactive elements
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg-editor-tab ul,
html.pg-dark-mode body.pg-editor-body .nav-tabs,
html.pg-dark-mode body.pg-editor-body .pg-modern-tabs {
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab ul a,
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-link,
html.pg-dark-mode body.pg-editor-body .pg-modern-tabs .nav-link {
    color: var(--cvx-dark-muted) !important;
    background: transparent !important;
    border-color: transparent !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab ul a:hover,
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .pg-modern-tabs .nav-link:hover {
    color: #dce9f6 !important;
    background: rgba(255, 255, 255, .035) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab ul li.active a,
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-link.active,
html.pg-dark-mode body.pg-editor-body .pg-modern-tabs .nav-link.active,
html.pg-dark-mode body.pg-editor-body .nav-tabs .nav-item.show .nav-link {
    color: #ffffff !important;
    background: var(--cvx-dark-accent) !important;
    border-color: var(--cvx-dark-accent) !important;
}

html.pg-dark-mode body.pg-editor-body .btn-light,
html.pg-dark-mode body.pg-editor-body .btn-outline-dark,
html.pg-dark-mode body.pg-editor-body .btn-outline-secondary,
html.pg-dark-mode body.pg-editor-body .pg-btn-secondary,
html.pg-dark-mode body.pg-editor-body .pgcs-btn-secondary {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .btn-light:hover,
html.pg-dark-mode body.pg-editor-body .btn-outline-dark:hover,
html.pg-dark-mode body.pg-editor-body .btn-outline-secondary:hover,
html.pg-dark-mode body.pg-editor-body .pg-btn-secondary:hover,
html.pg-dark-mode body.pg-editor-body .pgcs-btn-secondary:hover {
    background: var(--cvx-dark-control-hover) !important;
    color: #ffffff !important;
    border-color: #566578 !important;
}

html.pg-dark-mode body.pg-editor-body .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8) !important;
}

html.pg-dark-mode body.pg-editor-body hr {
    border-color: var(--cvx-dark-border) !important;
    opacity: 1 !important;
}

/* ============================================================
   5. Forms, Select2 and colour pickers
============================================================ */
html.pg-dark-mode body.pg-editor-body .form-control,
html.pg-dark-mode body.pg-editor-body .form-select,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input input,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input textarea,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input select,
html.pg-dark-mode body.pg-editor-body input[type="text"],
html.pg-dark-mode body.pg-editor-body input[type="number"],
html.pg-dark-mode body.pg-editor-body input[type="url"],
html.pg-dark-mode body.pg-editor-body input[type="email"],
html.pg-dark-mode body.pg-editor-body input[type="search"],
html.pg-dark-mode body.pg-editor-body input[type="file"],
html.pg-dark-mode body.pg-editor-body textarea,
html.pg-dark-mode body.pg-editor-body select {
    background-color: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .form-control:hover,
html.pg-dark-mode body.pg-editor-body .form-select:hover,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input input:hover,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input textarea:hover,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input select:hover {
    border-color: #566578 !important;
}

html.pg-dark-mode body.pg-editor-body .form-control:focus,
html.pg-dark-mode body.pg-editor-body .form-select:focus,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input input:focus,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input textarea:focus,
html.pg-dark-mode body.pg-editor-body .pg-sidebar-input select:focus {
    background-color: #1c2530 !important;
    color: #ffffff !important;
    border-color: var(--cvx-dark-accent) !important;
    box-shadow: 0 0 0 3px rgba(56, 182, 255, .15) !important;
}

html.pg-dark-mode body.pg-editor-body .form-control::placeholder,
html.pg-dark-mode body.pg-editor-body textarea::placeholder,
html.pg-dark-mode body.pg-editor-body input::placeholder {
    color: #78889b !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .form-control:disabled,
html.pg-dark-mode body.pg-editor-body .form-select:disabled,
html.pg-dark-mode body.pg-editor-body input:disabled,
html.pg-dark-mode body.pg-editor-body textarea:disabled,
html.pg-dark-mode body.pg-editor-body select:disabled {
    background: #171c23 !important;
    color: #69788a !important;
    border-color: #2d3540 !important;
    opacity: .72 !important;
}

html.pg-dark-mode body.pg-editor-body input[type="file"]::file-selector-button {
    background: #2b3542 !important;
    color: var(--cvx-dark-text) !important;
    border: 0 !important;
    border-right: 1px solid var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body input[type="checkbox"],
html.pg-dark-mode body.pg-editor-body input[type="radio"] {
    accent-color: var(--cvx-dark-accent);
}

html.pg-dark-mode body.pg-editor-body .input-group-text,
html.pg-dark-mode body.pg-editor-body .input-group-addon {
    background: #28313d !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

/* Select2 (menus may be appended directly under body) */
html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-selection--single,
html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-selection--multiple {
    background: var(--cvx-dark-control) !important;
    border-color: var(--cvx-dark-border) !important;
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-selection--single .select2-selection__rendered,
html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .select2-dropdown,
html.pg-dark-mode body.pg-editor-body .select2-results,
html.pg-dark-mode body.pg-editor-body .select2-search__field {
    background: #1b222c !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-results__option {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-results__option--highlighted[aria-selected],
html.pg-dark-mode body.pg-editor-body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #2b3542 !important;
    color: #ffffff !important;
}

/* Coloris popup */
html.pg-dark-mode body.pg-editor-body .clr-picker,
html.pg-dark-mode body.pg-editor-body .clr-picker * {
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .clr-picker {
    background: #1b222c !important;
    /* Do not force the root color here. Coloris uses currentColor as the
       live hue for its saturation/brightness square. Overriding it makes
       the picker render as greyscale in dark mode. */
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45) !important;
}

html.pg-dark-mode body.pg-editor-body .clr-field input,
html.pg-dark-mode body.pg-editor-body .clr-color {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
}

/* ============================================================
   6. Canvas toolbar and selected-object quick controls
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap,
html.pg-dark-mode body.pg-editor-body .canvix-object-quickbar,
html.pg-dark-mode body.pg-editor-body .canvix-qb-more-menu {
    background: #202630 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: #465363 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .26) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > p,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a > i,
html.pg-dark-mode body.pg-editor-body .canvix-qb-btn,
html.pg-dark-mode body.pg-editor-body .canvix-qb-more-toggle {
    color: #c7d1de !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a svg,
html.pg-dark-mode body.pg-editor-body .canvix-qb-btn svg {
    fill: #c7d1de !important;
    stroke: #c7d1de !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a:hover,
html.pg-dark-mode body.pg-editor-body .canvix-qb-btn:hover,
html.pg-dark-mode body.pg-editor-body .canvix-qb-more-toggle:hover {
    background: #2c3948 !important;
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a:hover i,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap > a:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.text-tools .pg-text-toolbar-size,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.text-tools .pg-text-toolbar-select {
    background: #171d25 !important;
    color: var(--cvx-dark-text) !important;
    border-color: #465363 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-qb-divider,
html.pg-dark-mode body.pg-editor-body p.ed_zoom_number::before,
html.pg-dark-mode body.pg-editor-body p.ed_zoom_number::after {
    background: #465363 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-qb-danger {
    color: #ff8793 !important;
}

/* ============================================================
   7. Text preset library
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg_element_text.canvix-text-presets .canvix-add-plain-text {
    background: #1c2934 !important;
    color: #74cbff !important;
    border-color: #3e718f !important;
}

html.pg-dark-mode body.pg-editor-body .pg_element_text.canvix-text-presets .canvix-add-plain-text:hover {
    background: #223545 !important;
    color: #a7e0ff !important;
    border-color: var(--cvx-dark-accent) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a.canvix-text-style {
    background: #2a303a !important;
    border-color: #3d4856 !important;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a.canvix-text-style::before {
    background:
        radial-gradient(circle at 15% 20%, rgba(56, 182, 255, .11), transparent 36%),
        linear-gradient(135deg, rgba(48, 56, 68, .96), rgba(39, 46, 56, .98)) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-title-elements ul li > a.canvix-text-style:hover {
    background: #303844 !important;
    border-color: #5f91af !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .27) !important;
}

/* Presets whose original preview colour is almost black */
html.pg-dark-mode body.pg-editor-body .canvix-text-style--plain-heading .canvix-text-style-preview,
html.pg-dark-mode body.pg-editor-body .canvix-text-style--premium .canvix-text-style-preview,
html.pg-dark-mode body.pg-editor-body .canvix-text-style--minimal .canvix-text-style-preview,
html.pg-dark-mode body.pg-editor-body .canvix-text-style--luxury .canvix-text-style-preview,
html.pg-dark-mode body.pg-editor-body .canvix-text-style--marker .canvix-text-style-preview {
    color: #f0f5fb !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-text-style--coffee .canvix-text-style-preview {
    color: #e7a682 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-text-style--quote .canvix-text-style-preview {
    color: #c2b6ff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-text-style--tech .canvix-text-style-preview {
    -webkit-text-stroke-color: #07131c !important;
}

/* ============================================================
   8. AI sidebar tabs and controls
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-ai-title,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-ai-head h4 {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-ai-sub,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-credit-muted,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-ai-reference-limit,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .pg-credit-dot {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body .pg_element_ai_image #ai_images_bg.form-control,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image #pg_openai_image_bg_size.form-select,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .form-control,
html.pg-dark-mode body.pg-editor-body .pg_element_ai_image .form-select {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-ai-source-toggle,
html.pg-dark-mode body.pg-editor-body .pg-ai-source-toggle label,
html.pg-dark-mode body.pg-editor-body .pg-ai-source-toggle span {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-ai-reference-add {
    background: #202b36 !important;
    color: #8ed8ff !important;
    border-color: #3c647c !important;
}

html.pg-dark-mode body.pg-editor-body .pg-ai-reference-add:hover {
    background: #263846 !important;
    border-color: var(--cvx-dark-accent) !important;
    color: #c2ebff !important;
}

html.pg-dark-mode body.pg-editor-body .pg-ai-reference-list > *,
html.pg-dark-mode body.pg-editor-body .pg-ai-reference-item {
    background: var(--cvx-dark-control) !important;
    border-color: var(--cvx-dark-border) !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg_element_ai_image #ai-image-credit-hint .pg-credit-badge,
html.pg-dark-mode body.pg-editor-body .pg-credit-badge {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body #ai_tab_cartoon_styles .btn-outline-dark {
    background: #1b222c !important;
    color: #cbd5e1 !important;
    border-color: #465363 !important;
}

html.pg-dark-mode body.pg-editor-body #ai_tab_cartoon_styles .btn-outline-dark:hover,
html.pg-dark-mode body.pg-editor-body #ai_tab_cartoon_styles .btn-outline-dark.active {
    background: var(--cvx-dark-accent) !important;
    color: #ffffff !important;
    border-color: var(--cvx-dark-accent) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-ai-demo-badge {
    background: rgba(22, 28, 36, .94) !important;
    color: var(--cvx-dark-text) !important;
}

/* ============================================================
   9. Draw tools
============================================================ */
html.pg-dark-mode body.pg-editor-body .pg_element_draw .pg-draw-panel {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-section,
html.pg-dark-mode body.pg-editor-body .pg-draw-style-card,
html.pg-dark-mode body.pg-editor-body .pg-draw-effects {
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-section-title,
html.pg-dark-mode body.pg-editor-body .pg-draw-range-row strong {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-color-row,
html.pg-dark-mode body.pg-editor-body .pg-draw-toggle-row,
html.pg-dark-mode body.pg-editor-body .pg-draw-range-row,
html.pg-dark-mode body.pg-editor-body .pg-draw-number-row,
html.pg-dark-mode body.pg-editor-body .pg-draw-select-row {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-tool-card,
html.pg-dark-mode body.pg-editor-body .pg-draw-brush-preset {
    background: linear-gradient(180deg, #26303b 0%, #202832 100%) !important;
    color: #c6d0dc !important;
    border-color: #3d4957 !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-tool-card:hover,
html.pg-dark-mode body.pg-editor-body .pg-draw-brush-preset:hover {
    background: linear-gradient(180deg, #2b3947 0%, #26313d 100%) !important;
    color: #ffffff !important;
    border-color: #5685a1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-tool-card.active,
html.pg-dark-mode body.pg-editor-body .pg-draw-brush-main.active,
html.pg-dark-mode body.pg-editor-body .pg-draw-brush-preset.active {
    background: linear-gradient(180deg, #123c55 0%, #153247 100%) !important;
    color: #bce9ff !important;
    border-color: var(--cvx-dark-accent) !important;
    box-shadow: 0 0 0 3px rgba(56, 182, 255, .13), 0 10px 24px rgba(0, 0, 0, .22) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-brush-presets {
    background: #1a212a !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-number-row input,
html.pg-dark-mode body.pg-editor-body .pg-draw-select-row select,
html.pg-dark-mode body.pg-editor-body .pg-draw-color-row input[type="color"] {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-fill-row.is-disabled,
html.pg-dark-mode body.pg-editor-body .pg-draw-shadow-controls.is-disabled,
html.pg-dark-mode body.pg-editor-body .pg-draw-gradient-controls.is-disabled,
html.pg-dark-mode body.pg-editor-body .pg-draw-gradient-options.is-disabled {
    opacity: .52 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-draw-tip {
    color: #d6a84d !important;
}

/* ============================================================
   10. Selected-object controls, filters, remove BG and mockups
============================================================ */
html.pg-dark-mode body.pg-editor-body .canvix-image-tools-nav,
html.pg-dark-mode body.pg-editor-body .canvix-image-tool-card-active,
html.pg-dark-mode body.pg-editor-body .pg-selected-image-ai,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-panel,
html.pg-dark-mode body.pg-editor-body .pg-filter-panel,
html.pg-dark-mode body.pg-editor-body .canvix-object-effect-widget,
html.pg-dark-mode body.pg-editor-body .canvix-object-shadow-widget,
html.pg-dark-mode body.pg-editor-body .canvix-object-stroke-widget,
html.pg-dark-mode body.pg-editor-body .canvix-mockup-widget {
    background: transparent !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-object-toggle-row,
html.pg-dark-mode body.pg-editor-body .canvix-object-color-row,
html.pg-dark-mode body.pg-editor-body .canvix-object-number-row,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-label,
html.pg-dark-mode body.pg-editor-body .pg-filter-subtitle,
html.pg-dark-mode body.pg-editor-body .pg-filter-name,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-sub,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-muted {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-heading,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-head,
html.pg-dark-mode body.pg-editor-body .canvix-object-effect-widget .pg-sidebar-heading {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-object-effect-controls,
html.pg-dark-mode body.pg-editor-body .pg-filter-panel-head,
html.pg-dark-mode body.pg-editor-body .pg-filter-section-title,
html.pg-dark-mode body.pg-editor-body .pg-filter-original-actions {
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-object-number-row input,
html.pg-dark-mode body.pg-editor-body .canvix-object-color-row input,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-textarea,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-select {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card,
html.pg-dark-mode body.pg-editor-body .pg-filter-tile,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-preview-shell,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-quality-menu {
    background: #1c232c !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-tile:hover,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-quality-option:hover {
    background: #27313d !important;
    border-color: #526276 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-rmbg-quality-toggle,
html.pg-dark-mode body.pg-editor-body .pg-rmbg-quality-option,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-btn {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-rmbg-quality-option.is-active,
html.pg-dark-mode body.pg-editor-body .pg-selected-ai-btn.primary {
    background: var(--cvx-dark-accent) !important;
    color: #ffffff !important;
    border-color: var(--cvx-dark-accent) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-mockup-card {
    background: #1d252f !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-mockup-card:hover {
    background: #27313d !important;
    border-color: #5685a1 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-mockup-card strong {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-mockup-card small {
    color: var(--cvx-dark-muted) !important;
}

/* Curve text inline component */
html.pg-dark-mode body.pg-editor-body .pg-curve-toggle,
html.pg-dark-mode body.pg-editor-body .pg-curve-toggle-title,
html.pg-dark-mode body.pg-editor-body .pg-curve-row label,
html.pg-dark-mode body.pg-editor-body .pg-curve-flip {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-curve-value,
html.pg-dark-mode body.pg-editor-body .pg-curve-help {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-curve-chip,
html.pg-dark-mode body.pg-editor-body .pg-curve-flip {
    background: var(--cvx-dark-control) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-curve-chip:hover,
html.pg-dark-mode body.pg-editor-body .pg-curve-chip.is-active {
    background: #17364a !important;
    border-color: var(--cvx-dark-accent) !important;
    color: #a8e2ff !important;
}

/* Image and element thumbnail cards */
html.pg-dark-mode body.pg-editor-body .pg-imglist-item,
html.pg-dark-mode body.pg-editor-body .pg-element-svg,
html.pg-dark-mode body.pg-editor-body .pg_element_shape .panel-body ul .pg-element-svg {
    background: #1b222b !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-imglist-item img {
    background: #151a21 !important;
}

/* ============================================================
   11. Template Options modal
============================================================ */
html.pg-dark-mode body.pg-editor-body #pgcs_modal.pgcs-modal {
    background: rgba(2, 6, 12, .76) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .canvix-template-options-modal,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-modal-content {
    background: #171d25 !important;
    border-color: #3f4d5d !important;
    box-shadow: 0 30px 95px rgba(0, 0, 0, .62) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-modal-head {
    background: linear-gradient(135deg, #202832 0%, #19212a 100%) !important;
    border-bottom-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-modal-title,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-preview-head strong,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-lock-card strong {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-icon-close,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-left,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-right,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-preview-text,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-btn-secondary {
    background: #202832 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-right {
    background: linear-gradient(180deg, #202832 0%, #1a212a 100%) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-field label,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-preview-head span,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-lock-card small,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-current {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-presets,
html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-input-unit input {
    background: #151b22 !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-lock-card {
    background: #1b2630 !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-btn-soft {
    background: #17364a !important;
    color: #a8e2ff !important;
    border-color: #315d76 !important;
}

html.pg-dark-mode body.pg-editor-body #pgcs_modal .pgcs-preview-canvas {
    background-color: #11161d !important;
    border-color: #3f6d87 !important;
    background-image:
        linear-gradient(45deg, rgba(56, 182, 255, .045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(56, 182, 255, .045) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(56, 182, 255, .045) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(56, 182, 255, .045) 75%) !important;
}

/* ============================================================
   12. Bootstrap modals - common dark foundation
============================================================ */
html.pg-dark-mode body.pg-editor-body .modal-content {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: 0 28px 88px rgba(0, 0, 0, .58) !important;
}

html.pg-dark-mode body.pg-editor-body .modal-header,
html.pg-dark-mode body.pg-editor-body .modal-footer {
    background: #1b222b !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .modal-body {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .modal-title,
html.pg-dark-mode body.pg-editor-body .modal-header h1,
html.pg-dark-mode body.pg-editor-body .modal-header h2,
html.pg-dark-mode body.pg-editor-body .modal-header h3,
html.pg-dark-mode body.pg-editor-body .modal-header h4,
html.pg-dark-mode body.pg-editor-body .modal-header h5,
html.pg-dark-mode body.pg-editor-body .modal-header h6 {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .modal-backdrop.show {
    opacity: .72 !important;
}

/* ============================================================
   13. Download / Share / Publish modal
============================================================ */
html.pg-dark-mode body.pg-editor-body #downloadModal .modal-content,
html.pg-dark-mode body.pg-editor-body #downloadModal .modal-header,
html.pg-dark-mode body.pg-editor-body #downloadModal .modal-body {
    background: #171d25 !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .modal-footer {
    background: #141a21 !important;
    border-top-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .modal-title,
html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-card h6,
html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-png-panel-head h6 {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-card {
    background: #202832 !important;
    border-color: #3b4858 !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .20) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-card:hover {
    background: #27313d !important;
    border-color: #5d8ba7 !important;
    box-shadow: 0 17px 36px rgba(0, 0, 0, .31) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-card p,
html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-png-panel-head span,
html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-share-title {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-card .js-export-guest-label {
    color: #c2ccd8 !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-export-icon {
    background: #1a3445 !important;
    border-color: #315d76 !important;
    color: #7bd0ff !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-png-panel,
html.pg-dark-mode body.pg-editor-body #downloadModal #pg_share_result,
html.pg-dark-mode body.pg-editor-body #downloadModal #pg_public_template_result {
    background: #1c242e !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-png-back {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #downloadModal .canvix-share-section {
    border-top-color: var(--cvx-dark-border) !important;
}

/* Admin export nested modal */
html.pg-dark-mode body.pg-editor-body #pgAdminExportTemplateModal .modal-content,
html.pg-dark-mode body.pg-editor-body #pgAdminExportTemplateModal .modal-header,
html.pg-dark-mode body.pg-editor-body #pgAdminExportTemplateModal .modal-body,
html.pg-dark-mode body.pg-editor-body #pgAdminExportTemplateModal .modal-footer {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #pgAdminExportTemplateModal .modal-title {
    color: var(--cvx-dark-text) !important;
}

/* ============================================================
   14. AI Video modal
============================================================ */
html.pg-dark-mode body.pg-editor-body .canvix-video-modal-content {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-head {
    background: linear-gradient(180deg, #202832 0%, #1a222c 100%) !important;
    border-bottom-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-head .modal-title,
html.pg-dark-mode body.pg-editor-body .canvix-video-section-title span,
html.pg-dark-mode body.pg-editor-body .canvix-video-field label {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-eyebrow {
    color: #76ceff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-back {
    background: #19232d !important;
    color: #b8e8ff !important;
    border-color: #3c6076 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-back:hover {
    background: #223543 !important;
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-body {
    background: #171d25 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-preview-card,
html.pg-dark-mode body.pg-editor-body .canvix-video-settings-card,
html.pg-dark-mode body.pg-editor-body .canvix-video-result {
    background: #202832 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-section-title small {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-preview-frame {
    background-color: #11161d !important;
    border-color: #3f657c !important;
    background-image:
        linear-gradient(45deg, rgba(56, 182, 255, .045) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(56, 182, 255, .045) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(56, 182, 255, .045) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(56, 182, 255, .045) 75%) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-field .form-control,
html.pg-dark-mode body.pg-editor-body .canvix-video-field .form-select {
    background: #171e27 !important;
    color: var(--cvx-dark-text) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-switch {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-switch span {
    background: #465363 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-cost-pill {
    background: #362d15 !important;
    color: #ffd978 !important;
    border-color: #675528 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-progress {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-result-btn {
    background: var(--cvx-dark-control) !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-video-result-btn.primary {
    background: var(--cvx-dark-accent) !important;
    color: #ffffff !important;
    border-color: var(--cvx-dark-accent) !important;
}

/* ============================================================
   15. Authentication, billing and welcome modals
============================================================ */
html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__content {
    background: #171d25 !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__body {
    background: #171d25 !important;
}

html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__title {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__message,
html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__footnote {
    color: var(--cvx-dark-muted) !important;
}

html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-benefits span,
html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-email,
html.pg-dark-mode body.pg-editor-body #canvixLoginRequiredModal .canvix-auth-modal__continue {
    background: #202832 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body #billingModal .modal-content,
html.pg-dark-mode body.pg-editor-body #billingModal .modal-body,
html.pg-dark-mode body.pg-editor-body #billingModal .modal-header,
html.pg-dark-mode body.pg-editor-body #billingModal .modal-footer {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

/* Welcome bonus */
html.pg-dark-mode body.pg-editor-body .canvix-welcome-shell,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-body {
    background: #171d25 !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-welcome-top {
    background: linear-gradient(135deg, #202c37 0%, #171d25 58%, #1b2630 100%) !important;
    border-bottom-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-welcome-title,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-credit-value,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-free-plan strong {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-welcome-copy,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-free-plan span {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-welcome-close,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-credit-card,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-mini,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-free-plan,
html.pg-dark-mode body.pg-editor-body .canvix-welcome-btn-ghost {
    background: #202832 !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-welcome-mini {
    color: #dbeafe !important;
}

/* ============================================================
   16. Miscellaneous editor popups, status blocks and tooltips
============================================================ */
html.pg-dark-mode body.pg-editor-body .dropdown-menu,
html.pg-dark-mode body.pg-editor-body .popover,
html.pg-dark-mode body.pg-editor-body .tooltip-inner,
html.pg-dark-mode body.pg-editor-body .mfp-content,
html.pg-dark-mode body.pg-editor-body .pg-modal-wrapper,
html.pg-dark-mode body.pg-editor-body .pg-modal-body {
    background: #1b222c !important;
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .dropdown-item {
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .dropdown-item:hover,
html.pg-dark-mode body.pg-editor-body .dropdown-item:focus {
    background: #28323e !important;
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body .alert-info {
    background: #17364a !important;
    color: #bde9ff !important;
    border-color: #315d76 !important;
}

html.pg-dark-mode body.pg-editor-body .alert-warning {
    background: #3a3018 !important;
    color: #ffe29a !important;
    border-color: #68572a !important;
}

html.pg-dark-mode body.pg-editor-body .alert-danger {
    background: #442229 !important;
    color: #ffb5bd !important;
    border-color: #743944 !important;
}

html.pg-dark-mode body.pg-editor-body .alert-success {
    background: #173629 !important;
    color: #a9efcd !important;
    border-color: #2f604b !important;
}

html.pg-dark-mode body.pg-editor-body .badge.bg-light,
html.pg-dark-mode body.pg-editor-body .badge.text-dark {
    background: #2a3440 !important;
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .table,
html.pg-dark-mode body.pg-editor-body .table td,
html.pg-dark-mode body.pg-editor-body .table th {
    color: var(--cvx-dark-text-soft) !important;
    border-color: var(--cvx-dark-border) !important;
}

html.pg-dark-mode body.pg-editor-body .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: rgba(255, 255, 255, .025) !important;
}

/* Keep the actual design canvas, uploaded images and media previews untouched. */
html.pg-dark-mode body.pg-editor-body .lower-canvas,
html.pg-dark-mode body.pg-editor-body .upper-canvas,
html.pg-dark-mode body.pg-editor-body #pg_canvas,
html.pg-dark-mode body.pg-editor-body .canvix-video-preview-frame img,
html.pg-dark-mode body.pg-editor-body .pg-imglist-item img,
html.pg-dark-mode body.pg-editor-body .pg-ai-demo img {
    filter: none !important;
}

/* ============================================================
   17. Dark-mode refinement v2
   Fixes reported after live testing:
   - keep zoom SVGs as outlined magnifying-glass icons
   - remove dark blocks around image-adjustment slider rows
   - improve filter label/value contrast
   - fully theme the object right-click context menu
============================================================ */

/* The generic toolbar SVG rule must not fill the zoom paths. Filling them
   turns each magnifying glass into a solid circular blob in dark mode. */
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_in svg,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_out svg,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_in svg path,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_out svg path {
    fill: none !important;
    stroke: #d7e1ec !important;
}

html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_in:hover svg,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_out:hover svg,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_in:hover svg path,
html.pg-dark-mode body.pg-editor-body .pg-canvas-control-wrap.canvas-tools > a.ed_zoom_out:hover svg path {
    fill: none !important;
    stroke: #ffffff !important;
}

/* Image adjustment sliders: preserve the clean, flat layout used in light
   mode rather than drawing a separate dark card behind every slider. */
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg-filter-slider-card,
html.pg-dark-mode body.pg-editor-body .pg-filter-panel .pg-filter-slider-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--cvx-dark-text-soft) !important;
}

html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg-filter-slider-card:not(:last-of-type),
html.pg-dark-mode body.pg-editor-body .pg-filter-panel .pg-filter-slider-card:not(:last-of-type) {
    border-bottom: 1px solid rgba(115, 132, 151, .16) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card::before {
    display: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-slider-top span:first-child {
    color: #c9d4e1 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-section-title {
    color: #f0f4f8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-panel .pg-filter-subtitle {
    color: #9eacbc !important;
    text-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card .pg_range_slider_val {
    background: #2a3440 !important;
    color: #f3f7fb !important;
    border: 1px solid rgba(132, 151, 171, .18) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Keep the unfilled range track visible without looking bright or washed out. */
html.pg-dark-mode body.pg-editor-body .pg-filter-range.pg_range_slider input[type="range"] {
    background: linear-gradient(
        to right,
        #38b6ff 0%,
        #38b6ff var(--pg-range-fill),
        #526170 var(--pg-range-fill),
        #526170 100%
    ) !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-range.pg_range_slider input[type="range"]::-moz-range-track {
    background: #526170 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-range.pg_range_slider input[type="range"]::-ms-fill-upper {
    background: #526170 !important;
}

/* Object right-click menu. It is injected dynamically and its original
   colours are hardcoded for a white card, so it needs a complete dark skin. */
html.pg-dark-mode body.pg-editor-body .canvix-object-context-menu {
    color: #e5edf5 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card {
    background: rgba(31, 39, 49, .985) !important;
    border-color: #465363 !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .52), 0 3px 10px rgba(0, 0, 0, .30) !important;
    backdrop-filter: blur(16px) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button {
    background: transparent !important;
    color: #d7e1ec !important;
    text-shadow: none !important;
    opacity: 1;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button i {
    color: #aebdcd !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:focus-visible {
    background: #2c3947 !important;
    color: #ffffff !important;
    outline: none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:hover i,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:focus-visible i {
    color: #74ceff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button kbd {
    background: #121820 !important;
    color: #c9d4e1 !important;
    border: 1px solid #3d4a59 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:hover kbd,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button:focus-visible kbd {
    background: #18222d !important;
    color: #ffffff !important;
    border-color: #587084 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.danger {
    color: #ff7e89 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.danger i {
    color: #ff6f7d !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.danger:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.danger:focus-visible {
    background: rgba(239, 68, 68, .14) !important;
    color: #ff9aa3 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.is-disabled {
    color: #758395 !important;
    opacity: .58 !important;
    cursor: not-allowed !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.is-disabled i {
    color: #687688 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card button.is-disabled:hover {
    background: transparent !important;
    color: #758395 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-context-sep {
    background: #465363 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu-wrap.is-open > button,
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu-wrap > button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu-wrap > button:focus-visible {
    background: #2c3947 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu-caret {
    color: #9eb0c3 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu {
    background: rgba(31, 39, 49, .99) !important;
    border-color: #465363 !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .52), 0 3px 10px rgba(0,0,0,.30) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-submenu::-webkit-scrollbar-thumb {
    background: rgba(148,163,184,.42) !important;
    background-clip: padding-box !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card .canvix-context-toolpicker-tab {
    background: #18222d !important;
    border-color: #3d4a59 !important;
    color: #b7c4d3 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card .canvix-context-toolpicker-tab:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card .canvix-context-toolpicker-tab:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-context-menu-card .canvix-context-toolpicker-tab.is-active {
    background: #2c3947 !important;
    border-color: #38b6ff !important;
    color: #74ceff !important;
}


/* ============================================================
   18. Final dark-mode polish v3
   - remove readout boxes around opacity/filter values
   - keep modern sidebar tabs flat with a subtle underline only
   - replace the bright-blue image upload drop area with a dark surface
============================================================ */

/* Slider/readout values are labels, not form fields. Keep them visually flat
   in dark mode so values such as "100%" do not look like dark input boxes. */
html.pg-dark-mode body.pg-editor-body .ed_need_object .edp_opacity .pg_range_slider label,
html.pg-dark-mode body.pg-editor-body .ed_need_object .edp_opacity .pg_range_slider_val,
html.pg-dark-mode body.pg-editor-body .ed_need_object #ed_object_opacity,
html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card .pg_range_slider_val {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #eef4fa !important;
    text-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .ed_need_object .edp_opacity .pg_range_slider_val,
html.pg-dark-mode body.pg-editor-body .ed_need_object #ed_object_opacity {
    width: 54px !important;
    min-width: 54px !important;
    height: auto !important;
    padding: 0 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

html.pg-dark-mode body.pg-editor-body .pg-filter-slider-card .pg_range_slider_val {
    padding: 0 !important;
    font-weight: 600 !important;
    text-align: right !important;
}

/* Modern sidebar tabs: no dark container block, no blue pill and no blue
   hover block. The active state is communicated by one restrained underline. */
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs::after {
    background: rgba(142, 160, 180, .18) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus-visible,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link.active,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-item.show .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link {
    color: #aebbc9 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus-visible {
    color: #e5edf5 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link.active,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-item.show .nav-link {
    color: #f5f8fb !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link::after,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:hover::after,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus::after,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link:focus-visible::after {
    height: 2px !important;
    opacity: 0 !important;
    transform: scaleX(.55) !important;
    background: #38b6ff !important;
    border-radius: 999px !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-link.active::after,
html.pg-dark-mode body.pg-editor-body .pg-editor-tab .nav.nav-tabs.pg-modern-tabs.pg-image-tabs .nav-item.show .nav-link::after {
    height: 2px !important;
    opacity: 1 !important;
    transform: scaleX(.82) !important;
    background: #38b6ff !important;
}

/* Upload drop area: retain a clear target without introducing a large bright
   blue block in the otherwise dark Images panel. */
html.pg-dark-mode body.pg-editor-body .pg_upload_image {
    background-color: #1b2530 !important;
    border-color: #526273 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018) !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg_upload_image:hover,
html.pg-dark-mode body.pg-editor-body .pg_upload_image:focus-within {
    background-color: #202c38 !important;
    border-color: #6b7d8f !important;
    opacity: 1 !important;
}

/* ============================================================
   19. Final dark-mode refinement v4
   - dark, readable initial/canvas loaders
   - readable Image URL permission note
   - quickbar More (...) menu matches the object context menu
   - all modern editor tabs use a flat underline-only active state
============================================================ */

/* Prevent the editor's themed browser scrollbars from appearing across the
   bottom of the screen while the full-page startup loader is visible. */
html.pg-dark-mode body.pg-editor-body:not(.pg-site-loaded) {
    overflow: hidden !important;
}

@supports selector(html:has(body)) {
    html.pg-dark-mode:has(body.pg-editor-body:not(.pg-site-loaded)) {
        overflow: hidden !important;
    }
}

/* Full-page editor startup loader. The logo used by the editor is designed
   for dark surfaces, so the loader card must not remain white in dark mode. */
html.pg-dark-mode body.pg-editor-body .pg-preloader-wrap {
    background: rgba(8, 12, 18, .985) !important;
    color: #f4f7fb !important;
    overflow: hidden !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader {
    background: #1f2732 !important;
    color: #f4f7fb !important;
    border: 1px solid #445161 !important;
    box-shadow: 0 26px 78px rgba(0, 0, 0, .52), 0 4px 14px rgba(0, 0, 0, .28) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader img {
    opacity: 1 !important;
    filter: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-copy,
html.pg-dark-mode body.pg-editor-body .pg-preloader-copy strong {
    color: #f4f7fb !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-copy span {
    color: #aebaca !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-progress,
html.pg-dark-mode body.pg-editor-body .pg_canvas_progress {
    background: #111820 !important;
    border: 1px solid #394655 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .42) !important;
}

html.pg-dark-mode body.pg-editor-body .pg-preloader-progress span,
html.pg-dark-mode body.pg-editor-body .pg_canvas_progress span {
    background: linear-gradient(90deg, #38b6ff, #3976ff) !important;
    box-shadow: 0 0 12px rgba(56, 182, 255, .30) !important;
}

/* Canvas-local loader shown while a template/page is being hydrated. */
html.pg-dark-mode body.pg-editor-body .pg_canvas_preloader {
    background: rgba(8, 12, 18, .76) !important;
    backdrop-filter: blur(3px) !important;
}

html.pg-dark-mode body.pg-editor-body .pg_canvas_preloader_card {
    background: rgba(31, 39, 50, .98) !important;
    color: #f4f7fb !important;
    border-color: #445161 !important;
    box-shadow: 0 20px 58px rgba(0, 0, 0, .48) !important;
}

html.pg-dark-mode body.pg-editor-body .pg_canvas_preloader_message {
    color: #f4f7fb !important;
}

html.pg-dark-mode body.pg-editor-body .pg_canvas_preloader_detail {
    color: #aebaca !important;
}

/* The permission note has an inline color:#333 in editor.php. */
html.pg-dark-mode body.pg-editor-body #elements_search_tab_main #pg_image_url_input + p,
html.pg-dark-mode body.pg-editor-body #elements_search_tab_main #pg_image_url_input ~ p {
    color: #aebaca !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Apply the flat underline-only tab treatment to every modern tab group,
   including AI Generate, selected-image AI tools and Background tabs that
   are not all nested under .pg-editor-tab. */
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs::after {
    background: rgba(142, 160, 180, .20) !important;
    height: 1px !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus-visible,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link.active,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item.show > .nav-link {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link {
    color: #aebbc9 !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus-visible,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link:hover,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link:focus,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link:focus-visible {
    color: #e5edf5 !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link.active,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item.show > .nav-link,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link.active {
    color: #f7f9fc !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:hover::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link:focus-visible::after {
    height: 2px !important;
    border-radius: 999px !important;
    background: #38b6ff !important;
    opacity: 0 !important;
    transform: scaleX(.55) !important;
}

html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-link.active::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item.show > .nav-link::after,
html.pg-dark-mode body.pg-editor-body .nav.nav-tabs.pg-modern-tabs.pg-image-tabs > .nav-item > .nav-link.active::after {
    height: 2px !important;
    background: #38b6ff !important;
    opacity: 1 !important;
    transform: scaleX(.82) !important;
}

/* Floating quickbar More (...) menu. This is a separate component from the
   right-click menu, so give it the same complete dark palette explicitly. */
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu {
    background: rgba(31, 39, 49, .985) !important;
    color: #e5edf5 !important;
    border: 1px solid #465363 !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .52), 0 3px 10px rgba(0, 0, 0, .30) !important;
    backdrop-filter: blur(16px) !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button span {
    background: transparent !important;
    color: #d7e1ec !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button i.material-icons {
    color: #aebdcd !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible {
    background: #2c3947 !important;
    color: #ffffff !important;
    outline: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible span {
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible i.material-icons {
    color: #74ceff !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button kbd {
    background: #121820 !important;
    color: #c9d4e1 !important;
    border: 1px solid #3d4a59 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover kbd,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible kbd {
    background: #18222d !important;
    color: #ffffff !important;
    border-color: #587084 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-sep {
    background: #465363 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-danger,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-danger span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-danger i.material-icons {
    color: #ff7e89 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-danger:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-danger:focus-visible {
    background: rgba(239, 68, 68, .14) !important;
    color: #ff9aa3 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-disabled,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:disabled {
    color: #7f8da0 !important;
    opacity: .62 !important;
    cursor: not-allowed !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-disabled span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:disabled span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-disabled i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:disabled i.material-icons {
    color: #7f8da0 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.canvix-qb-more-disabled:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:disabled:hover {
    background: transparent !important;
    color: #7f8da0 !important;
}

/* ============================================================
   20. Sidebar controls final pass v5
   - selected-image AI prompt fields use the dark control palette
   - text-format, alignment, layer and clipping controls no longer stay white
   - disabled effect controls remain readable without looking active
============================================================ */

/* Selected-image AI prompt/select controls. These selectors intentionally
   match the more-specific light-theme declarations in style3.css. */
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit .pg-ai-prompt-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit #pg_ai_edit_prompt.pg-selected-ai-textarea,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea#pg_ai_edit_prompt,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea.pg-selected-ai-textarea,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit select.pg-selected-ai-select {
    background: #1b222c !important;
    background-color: #1b222c !important;
    color: #f2f6fb !important;
    border-color: #465363 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    caret-color: #f2f6fb !important;
    -webkit-text-fill-color: #f2f6fb !important;
}

html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit #pg_ai_edit_prompt.pg-selected-ai-textarea::placeholder,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea#pg_ai_edit_prompt::placeholder,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea.pg-selected-ai-textarea::placeholder {
    color: #aab7c6 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #aab7c6 !important;
}

html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit #pg_ai_edit_prompt.pg-selected-ai-textarea:focus,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea#pg_ai_edit_prompt:focus,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit textarea.pg-selected-ai-textarea:focus,
html.pg-dark-mode body.pg-editor-body .ed_image_ai_edit select.pg-selected-ai-select:focus {
    background: #1d2631 !important;
    color: #ffffff !important;
    border-color: #38b6ff !important;
    box-shadow: 0 0 0 3px rgba(56, 182, 255, .16) !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Text formatting controls in the left sidebar (Bold, Italic, Underline,
   alignment, decoration). */
html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a {
    background: #1b222c !important;
    background-color: #1b222c !important;
    color: #d8e2ed !important;
    border-color: #465363 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a svg,
html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a svg path {
    fill: currentColor !important;
    stroke: currentColor;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a:hover,
html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a:focus-visible {
    background: #27313d !important;
    color: #ffffff !important;
    border-color: #5d7084 !important;
    outline: 0 !important;
}

html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a.active,
html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a.pg-active,
html.pg-dark-mode body.pg-editor-body .pg-editor-text-option > ul > li > a[aria-pressed="true"] {
    background: rgba(56, 182, 255, .16) !important;
    color: #8fd9ff !important;
    border-color: #38b6ff !important;
}

/* Alignment and layer action buttons. Cover both the general sidebar and the
   selected-image Arrange tab, whose light rules have higher specificity. */
html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg_editor_layer_option_btn ul li a {
    background: #1b222c !important;
    background-color: #1b222c !important;
    color: #d8e2ed !important;
    border-color: #465363 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a svg,
html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a svg path,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg_editor_layer_option_btn ul li a svg,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg_editor_layer_option_btn ul li a svg path {
    fill: currentColor !important;
    stroke: currentColor;
}

html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a:hover,
html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a:focus-visible,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg_editor_layer_option_btn ul li a:hover,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg_editor_layer_option_btn ul li a:focus-visible {
    background: #27313d !important;
    color: #ffffff !important;
    border-color: #5d7084 !important;
    transform: none !important;
    outline: 0 !important;
}

html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a.active,
html.pg-dark-mode body.pg-editor-body .pg_editor_layer_option_btn ul li a[aria-pressed="true"] {
    background: rgba(56, 182, 255, .16) !important;
    color: #8fd9ff !important;
    border-color: #38b6ff !important;
}

/* Clipping shape pills. */
html.pg-dark-mode body.pg-editor-body .ed_clip_image .pg-property-body a,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .ed_clip_image .pg-property-body a {
    background: #1b222c !important;
    background-color: #1b222c !important;
    color: #d8e2ed !important;
    border-color: #465363 !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .ed_clip_image .pg-property-body a:hover,
html.pg-dark-mode body.pg-editor-body .ed_clip_image .pg-property-body a:focus-visible,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .ed_clip_image .pg-property-body a:hover,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .ed_clip_image .pg-property-body a:focus-visible {
    background: #27313d !important;
    color: #ffffff !important;
    border-color: #5d7084 !important;
    outline: 0 !important;
}

html.pg-dark-mode body.pg-editor-body .ed_clip_image .pg-property-body a.active,
html.pg-dark-mode body.pg-editor-body .ed_clip_image .pg-property-body a[aria-pressed="true"],
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .ed_clip_image .pg-property-body a.active {
    background: rgba(56, 182, 255, .16) !important;
    color: #8fd9ff !important;
    border-color: #38b6ff !important;
}

/* Shadow/stroke fields use a more specific light-theme block in image-tools
   mode. Force those controls and their labels back onto the dark palette. */
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-toggle-row {
    background: transparent !important;
    color: #d5dfeb !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-number-row,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-color-row,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-number-row > span,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-color-row > span {
    color: #c6d1de !important;
}

html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-number-row input,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-color-row input,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .pg-sidebar-input input {
    background: #1b222c !important;
    background-color: #1b222c !important;
    color: #edf3f9 !important;
    border-color: #465363 !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #edf3f9 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-object-effect-controls.is-disabled,
html.pg-dark-mode body.pg-editor-body .ed_need_object.canvix-image-tools-mode .canvix-object-effect-controls.is-disabled {
    opacity: .66 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-object-effect-controls.is-disabled input,
html.pg-dark-mode body.pg-editor-body .canvix-object-effect-controls.is-disabled span {
    color: #9cabbc !important;
    -webkit-text-fill-color: #9cabbc !important;
}

/* ============================================================
   21. Final quickbar Group/Ungroup + More button dark-mode pass v6
   The light stylesheet uses ID-based !important selectors for the
   Group/Ungroup control, so these equally specific dark-mode rules
   must explicitly override its normal, hover and focus states.
============================================================ */

/* Group / Ungroup: readable in the resting state, with a restrained
   dark hover instead of the light-theme white pill. */
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-btn.canvix-qb-group-toggle,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle {
    background: transparent !important;
    color: #d7e1ec !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle i.material-icons {
    color: #aebdcd !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle span {
    color: #d7e1ec !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-btn.canvix-qb-group-toggle:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-btn.canvix-qb-group-toggle:focus,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-btn.canvix-qb-group-toggle:focus-visible,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus-visible {
    background: #2c3948 !important;
    color: #74ceff !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(116, 206, 255, .12) !important;
    outline: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:hover i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:hover i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:hover span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus-visible i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus-visible i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-group-toggle:focus-visible span {
    color: #74ceff !important;
}

/* Three-dot button: keep every interactive/open state dark. This also
   overrides the light aria-expanded pill that otherwise turns white. */
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle {
    background: transparent !important;
    color: #c7d1de !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle i.material-icons {
    color: #c7d1de !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus-visible,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more[aria-expanded="true"],
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle:focus,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle:focus-visible,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-toggle[aria-expanded="true"],
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar.more-open #canvix_qb_more {
    background: #2c3948 !important;
    color: #74ceff !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(116, 206, 255, .12) !important;
    outline: none !important;
    transform: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:hover i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:hover i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus-visible i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more:focus-visible i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more[aria-expanded="true"] i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar #canvix_qb_more[aria-expanded="true"] i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar.more-open #canvix_qb_more i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar.more-open #canvix_qb_more i.material-icons {
    color: #74ceff !important;
}

/* Menu rows must never fall back to a white/light hover, including active
   and keyboard-focus states introduced by browser or framework defaults. */
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:active,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.active {
    background: #2c3948 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:active span,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.active span {
    color: #ffffff !important;
}

html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:hover i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:focus-visible i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:active i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button:active i.material-icons,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.active i,
html.pg-dark-mode body.pg-editor-body #canvix_object_quickbar .canvix-qb-more-menu button.active i.material-icons {
    color: #74ceff !important;
}

/* ============================================================
   Canvas navigation controls — dark mode
============================================================ */
html.pg-dark-mode body.pg-editor-body .canvix-editor-bottom-dock{
    background:rgba(31,37,46,.96) !important;
    color:#e6edf5 !important;
    border-color:#465160 !important;
    box-shadow:0 14px 34px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.24) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn{
    background:#243746 !important;
    color:#76ceff !important;
    border-color:#3e6178 !important;
    box-shadow:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn i,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn span{
    color:#76ceff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:hover,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:focus-visible{
    background:#2c4558 !important;
    color:#a6e0ff !important;
    border-color:#5b91b3 !important;
    outline:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:hover i,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:hover span,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:focus-visible i,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-unlock-btn:focus-visible span{
    color:#a6e0ff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-dock-divider{
    background:#465160 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-icon-btn,
html.pg-dark-mode body.pg-editor-body .canvix-zoom-percent{
    background:transparent !important;
    color:#d7e0eb !important;
    border-color:transparent !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-icon-btn:hover,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-icon-btn:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-zoom-percent:hover,
html.pg-dark-mode body.pg-editor-body .canvix-zoom-percent:focus-visible{
    background:#2b3745 !important;
    color:#65c7ff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-bottom-icon-btn.pg-disabled,
html.pg-dark-mode body.pg-editor-body .canvix-bottom-icon-btn:disabled{
    color:#6f7d8d !important;
    background:transparent !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider::-webkit-slider-runnable-track{
    background:linear-gradient(to right, #38b6ff 0, #38b6ff var(--canvix-zoom-progress), #4a5563 var(--canvix-zoom-progress), #4a5563 100%) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider::-webkit-slider-thumb{
    border-color:#1f252e !important;
    background:#59c2ff !important;
    box-shadow:0 1px 6px rgba(0,0,0,.55) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider::-moz-range-track{
    background:#4a5563 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider::-moz-range-progress{
    background:#38b6ff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-zoom-slider::-moz-range-thumb{
    border-color:#1f252e !important;
    background:#59c2ff !important;
    box-shadow:0 1px 6px rgba(0,0,0,.55) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-canvas-toolbar-divider{
    background:#465160 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-toolbar-fit-btn{
    background:transparent !important;
    color:#d7e0eb !important;
    border-color:transparent !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-toolbar-fit-btn:hover,
html.pg-dark-mode body.pg-editor-body .canvix-toolbar-fit-btn:focus-visible{
    background:#2b3745 !important;
    color:#65c7ff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-header-inner{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-header-label,
html.pg-dark-mode body.pg-editor-body .canvix-page-mobile-label{
    color:#d7e0eb !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-pill,
html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-icon{
    background:#272e38 !important;
    border-color:#465160 !important;
    color:#d0dae5 !important;
    box-shadow:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-pill:hover,
html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-icon:hover,
html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-pill:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-icon:focus-visible{
    background:#2b3b49 !important;
    border-color:#4dbcf9 !important;
    color:#73ceff !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-pill.active{
    background:#38b6ff !important;
    border-color:#38b6ff !important;
    color:#07131d !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-delete{
    color:#ff7f8e !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-add.disabled,
html.pg-dark-mode body.pg-editor-body .canvix-page-strip-toolbar .canvix-page-add:disabled{
    background:#272e38 !important;
    border-color:#465160 !important;
    color:#6f7d8d !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-select{
    background:#272e38 !important;
    border-color:#465160 !important;
    color:#e6edf5 !important;
    box-shadow:none !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-select:focus{
    border-color:#4dbcf9 !important;
    box-shadow:0 0 0 2px rgba(56,182,255,.2) !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-select option{
    background:#272e38 !important;
    color:#e6edf5 !important;
}

html.pg-dark-mode body.pg-editor-body .canvix-page-select-wrap > i{
    color:#9fb0c3 !important;
}

/* ============================================================
   Pages + Layers final dark-mode pass
============================================================ */
html.pg-dark-mode body.pg-editor-body .canvix-page-compact-select{
    background:#272e38 !important;
    border-color:#465160 !important;
    color:#dce6f1 !important;
    box-shadow:none !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-page-compact-select:hover,
html.pg-dark-mode body.pg-editor-body .canvix-page-compact-select:focus-within{
    background:#2b3745 !important;
    border-color:#4dbcf9 !important;
    color:#70ceff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-page-compact-select:focus-within{
    box-shadow:0 0 0 2px rgba(56,182,255,.18) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-page-mobile-icon,
html.pg-dark-mode body.pg-editor-body .canvix-page-mobile-count,
html.pg-dark-mode body.pg-editor-body .canvix-page-compact-select > i{
    color:inherit !important;
}

/* Layers drawer shell */
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper,
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper.pxl-layers-style{
    background:#20262f !important;
    border-color:#3f4b5a !important;
    color:#e5edf6 !important;
    box-shadow:0 18px 46px rgba(0,0,0,.42) !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper > .px-layers-heading{
    color:#f0f5fa !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper > .px-layers-heading > .px-layers-close{
    background:#26303b !important;
    box-shadow:0 0 0 1px #4dbcf9 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper > .px-layers-heading > .px-layers-close:hover{
    background:#2c4050 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper > .px-layers-heading > .px-layers-close svg,
html.pg-dark-mode body.pg-editor-body .px-layers-wrapper > .px-layers-heading > .px-layers-close svg path{
    fill:#63c8ff !important;
    stroke:#63c8ff !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-list{
    background:transparent !important;
    scrollbar-color:#566575 #20262f;
}

/* Layer rows */
html.pg-dark-mode body.pg-editor-body .px-layers-item{
    background:#282f39 !important;
    border-color:#3e4a58 !important;
    color:#d7e1ec !important;
    box-shadow:none !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item::before{
    background:transparent !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item:hover{
    background:#303a46 !important;
    border-color:#536477 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item.active{
    background:#173f57 !important;
    border-color:#38b6ff !important;
    box-shadow:inset 3px 0 0 #38b6ff, 0 0 0 1px rgba(56,182,255,.12) !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item.ui-sortable-placeholder{
    background:rgba(56,182,255,.10) !important;
    border-color:rgba(56,182,255,.55) !important;
    box-shadow:none !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item.ui-sortable-helper{
    background:#303a46 !important;
    border-color:#5b6c80 !important;
    box-shadow:0 12px 28px rgba(0,0,0,.38) !important;
}

/* Layer names, separators, drag handles and inline rename field */
html.pg-dark-mode body.pg-editor-body .px-layers-name > p{
    color:#dce5ef !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item:hover .px-layers-name > p,
html.pg-dark-mode body.pg-editor-body .px-layers-item.active .px-layers-name > p{
    color:#ffffff !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-name > p::before{
    background:#536171 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item:hover .px-layers-name > p::before,
html.pg-dark-mode body.pg-editor-body .px-layers-item.active .px-layers-name > p::before{
    background:rgba(255,255,255,.55) !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-name > input{
    background:#171d25 !important;
    border-color:#536171 !important;
    color:#f2f6fa !important;
    caret-color:#6fd0ff !important;
    box-shadow:0 0 0 2px rgba(56,182,255,.14) !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-dragger,
html.pg-dark-mode body.pg-editor-body .px-layers-dragger svg{
    color:#91a1b3 !important;
    fill:#91a1b3 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item:hover .px-layers-dragger svg,
html.pg-dark-mode body.pg-editor-body .px-layers-item.active .px-layers-dragger svg{
    fill:#dff4ff !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-item.layer_hide .px-layers-name > p{
    color:#8996a5 !important;
    opacity:.72 !important;
}

/* Layer action icons */
html.pg-dark-mode body.pg-editor-body .px-layers-action > .px-layers-action-btn{
    background:transparent !important;
    color:#a9b7c6 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-action > .px-layers-action-btn:hover,
html.pg-dark-mode body.pg-editor-body .px-layers-action > .px-layers-action-btn:focus-visible,
html.pg-dark-mode body.pg-editor-body .px-layers-action > .px-layers-action-btn.active{
    background:rgba(255,255,255,.10) !important;
    color:#ffffff !important;
}
html.pg-dark-mode body.pg-editor-body .px-layers-action > .px-layers-action-btn svg,
html.pg-dark-mode body.pg-editor-body .px-layers-item:hover .px-layers-action > .px-layers-action-btn svg,
html.pg-dark-mode body.pg-editor-body .px-layers-item.active .px-layers-action > .px-layers-action-btn svg{
    fill:currentColor !important;
}

/* Drawer tab/handle */
html.pg-dark-mode body.pg-editor-body .px-layer-drawer{
    background:#20262f !important;
    border-color:#3f4b5a !important;
}
html.pg-dark-mode body.pg-editor-body .px-layer-drawer span::before,
html.pg-dark-mode body.pg-editor-body .px-layer-drawer span::after{
    border-color:#63c8ff !important;
}


/* ============================================================
   Final dark-mode visibility fix for the layers drawer chevron
============================================================ */
html.pg-dark-mode body.pg-editor-body .px-layer-drawer span{
    border-left-color:#e7f3fc !important;
    border-top-color:#e7f3fc !important;
    opacity:1 !important;
}
html.pg-dark-mode body.pg-editor-body .px-layer-drawer:hover span,
html.pg-dark-mode body.pg-editor-body .px-layer-drawer:focus-visible span{
    border-left-color:#ffffff !important;
    border-top-color:#ffffff !important;
}


/* ============================================================
   Coloris dark-mode hue preservation
   Keep text/control surfaces readable without overriding the picker root's
   dynamic currentColor value, which powers the full-colour gradient.
============================================================ */
html.pg-dark-mode body.pg-editor-body .clr-picker input.clr-color,
html.pg-dark-mode body.pg-editor-body .clr-picker .clr-clear,
html.pg-dark-mode body.pg-editor-body .clr-picker .clr-close,
html.pg-dark-mode body.pg-editor-body .clr-picker .clr-format label {
    color: var(--cvx-dark-text) !important;
}

html.pg-dark-mode body.pg-editor-body .clr-picker .clr-gradient {
    filter: none !important;
}

/* Perspective Warp toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-perspective-warp-hud {
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-hud-title {
    color: #f4f7fb !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-hud-help {
    color: #aeb8c7 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-hud-divider {
    background: #465166 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-perspective-warp-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}

/* Mesh Warp toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-mesh-warp-hud {
  background: rgba(22, 29, 40, 0.98);
  border-color: rgba(104, 136, 184, 0.3);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(140, 170, 214, 0.26);
  color: #f5f8ff;
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(173, 198, 235, 0.4);
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary:focus-visible {
  background: #38b6ff;
  border-color: #38b6ff;
  color: #fff;
}

/* Mesh Warp toolbar placement/dark-mode parity with Perspective Warp */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-mesh-warp-hud {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: rgba(31,39,52,.98) !important;
    border-color: #475569 !important;
    color: #eef4ff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.30) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button {
    background: #273142 !important;
    border-color: #4b5b72 !important;
    color: #edf3fb !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button:focus-visible {
    background: #324158 !important;
    border-color: #38b6ff !important;
    color: #62c5ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-mesh-warp-hud button.is-primary:focus-visible {
    background: #38b6ff !important;
    border-color: #38b6ff !important;
    color: #fff !important;
}


/* Liquify Brush toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-liquify-warp-hud {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button.is-active {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-warp-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-mode-select,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-dropdown-toggle,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-dropdown-panel {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-mode-select select,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-dropdown-toggle strong,
html.pg-dark-mode body.pg-editor-body .canvix-liquify-panel-slider strong {
    color: #f8fbff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-liquify-panel-slider {
    color: #e7edf6 !important;
}

/* Vector / Polygon Edit Points toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-vector-edit-hud {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button:disabled,
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button[aria-disabled="true"] {
    border-color: #3d4657 !important;
    background: #242b37 !important;
    color: #717d90 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-vector-edit-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}

/* Contextual selected-object toolbar */
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-btn {
    background: #1b2431;
    border-color: #3a485c;
    color: #e7edf7;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-btn:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-btn:focus-visible {
    background: rgba(56,182,255,.13);
    border-color: #38b6ff;
    color: #6dcbff;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-btn.is-disabled,
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-btn:disabled {
    background: #18202b;
    border-color: #2c3747;
    color: #637085;
    opacity: .58;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-divider {
    background: #3a4658;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-menu {
    background: rgba(31, 39, 49, .985) !important;
    border-color: #465363 !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .48), 0 3px 10px rgba(0,0,0,.28) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-object-toolbar-caret {
    color: #9eb0c3 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-tool-picker-tab {
    background: #18202b !important;
    border-color: #2c3747 !important;
    color: #a6b4c5 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-tool-picker-tab:hover,
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-tool-picker-tab:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-context-object-tools .canvix-tool-picker-tab.is-active {
    background: rgba(56,182,255,.16) !important;
    border-color: #38b6ff !important;
    color: #74ceff !important;
}



/* Bend / Curve toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-bend-warp-hud {
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button,
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud .canvix-bend-mode-select {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud .canvix-bend-mode-select select {
    color: #f8fbff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-bend-warp-hud .canvix-liquify-dropdown-panel {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}

/* Cut & Move toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-cutmove-hud {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud .canvix-liquify-dropdown-toggle,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud .canvix-liquify-dropdown-panel {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud .canvix-liquify-panel-slider,
html.pg-dark-mode body.pg-editor-body .canvix-cutmove-hud .canvix-liquify-panel-slider strong {
    color: #eef4ff !important;
}


/* Marquee Cut toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-marquee-hud {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    border-color:#455065 !important;
    background:rgba(31,37,48,.99) !important;
    color:#edf2f7 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button {
    border-color:#48546a !important;
    background:#293140 !important;
    color:#e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button:focus-visible {
    border-color:var(--canvix-primary) !important;
    background:#334056 !important;
    color:#8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-primary:focus-visible {
    border-color:var(--canvix-primary) !important;
    background:var(--canvix-primary) !important;
    color:#fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-danger { color:#ffb4b4 !important; }
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-danger:hover,
html.pg-dark-mode body.pg-editor-body .canvix-marquee-hud button.is-danger:focus-visible {
    border-color:#ef4444 !important;
    background:#4a2830 !important;
    color:#ffd2d2 !important;
}

/* Puppet Warp toolbar */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-puppet-hud {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    border-color: #455065 !important;
    background: rgba(31,37,48,.99) !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud .canvix-puppet-pin-count,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud .canvix-liquify-dropdown-toggle,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud .canvix-liquify-dropdown-panel {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud .canvix-liquify-panel-slider,
html.pg-dark-mode body.pg-editor-body .canvix-puppet-hud .canvix-liquify-panel-slider strong {
    color: #eef4ff !important;
}


/* === Dark mode: Texture Wrap === */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-texture-hud {
    background: rgba(31, 39, 49, .98) !important;
    border-color: #465363 !important;
    color: #e8eef6 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.42) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud button,
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud .canvix-texture-mode-select {
    background: #26313d !important;
    border-color: #465363 !important;
    color: #e8eef6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud .canvix-texture-mode-select select,
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud .canvix-liquify-panel-select select {
    color: #e8eef6 !important;
    background-color: #26313d !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud button:focus-visible {
    background: #30475c !important;
    border-color: #38b6ff !important;
    color: #7dcfff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud button.is-primary {
    background: #38b6ff !important;
    border-color: #38b6ff !important;
    color: #ffffff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-texture-hud .canvix-liquify-dropdown-panel {
    background: #1f2731 !important;
    border-color: #465363 !important;
    color: #e8eef6 !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.48) !important;
}

/* === Dark mode: Image Eraser v59 === */
html.pg-dark-mode body.pg-editor-body .pg-canvas-holder > .canvix-eraser-hud {
    background: rgba(31,37,48,.99) !important;
    border-color: #455065 !important;
    color: #edf2f7 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud .canvix-liquify-dropdown-toggle,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud .canvix-liquify-dropdown-panel {
    border-color: #48546a !important;
    background: #293140 !important;
    color: #e7edf6 !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button:hover,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button:focus-visible,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button.is-active {
    border-color: var(--canvix-primary) !important;
    background: #334056 !important;
    color: #8ed6ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button.is-primary,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button.is-primary:hover,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud button.is-primary:focus-visible {
    border-color: var(--canvix-primary) !important;
    background: var(--canvix-primary) !important;
    color: #fff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud .canvix-liquify-panel-slider,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-hud .canvix-liquify-panel-slider strong,
html.pg-dark-mode body.pg-editor-body .canvix-eraser-shape-row {
    color: #eef4ff !important;
}
html.pg-dark-mode body.pg-editor-body .canvix-magic-wand-hud .canvix-liquify-panel-switch,
html.pg-dark-mode body.pg-editor-body .canvix-magic-wand-hud .canvix-liquify-panel-action {
    color: #e2e8f0;
}
html.pg-dark-mode body.pg-editor-body .canvix-magic-wand-hud .canvix-liquify-panel-action {
    background: rgba(15,23,42,.92);
    border-color: rgba(148,163,184,.32);
}
