/* ================================================================
 * Theme tone tokens
 * Applies --ui-* variables produced by app/theme.js to high-level
 * surfaces and common Tailwind utility aliases.
 * ================================================================ */

:root {
    --ui-chrome-surface: color-mix(in srgb, var(--ui-panel-elevated-bg) 88%, var(--ui-surface-3) 12%);
    --ui-chrome-surface-muted: color-mix(in srgb, var(--ui-panel-bg) 82%, var(--ui-bg) 18%);
    --ui-chrome-surface-soft: color-mix(in srgb, var(--ui-chrome-surface) 80%, var(--ui-bg) 20%);
    --ui-chrome-border-base: color-mix(in srgb, var(--ui-border) 68%, var(--ui-border-strong) 32%);
    --ui-chrome-border: color-mix(in srgb, var(--ui-chrome-border-base) 60%, transparent);
    --ui-chrome-border-soft: color-mix(in srgb, var(--ui-chrome-border) 70%, transparent);
    --ui-chrome-divider: color-mix(in srgb, var(--ui-border) 46%, transparent);
    --ui-panel-divider: color-mix(in srgb, var(--ui-border) 38%, transparent);
    --ui-tree-line: color-mix(in srgb, var(--ui-border) 34%, transparent);
    --ui-control-track: color-mix(in srgb, var(--ui-border-strong) 48%, var(--ui-surface-3) 52%);
    --ui-control-thumb-ring: color-mix(in srgb, var(--ui-text-1) 72%, var(--ui-chrome-surface) 28%);
}

html,
body {
    background-color: var(--ui-bg);
    color: var(--ui-text-1);
}

body,
#main-area,
.dock-layout,
.bg-darkbg,
.bg-\[\#0a0a0a\],
.bg-\[\#0a0a0c\] {
    background-color: var(--ui-bg) !important;
    color: var(--ui-text-1);
}

.app-rail,
.bg-panelbg,
.bg-panelbg\/90,
.top-chip,
#userBar,
.project-picker-shell,
.rail-popup,
.app-rail__user-popup {
    background-color: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-1);
}

html.dark .app-rail,
html.light .app-rail {
    background-color: var(--ui-chrome-surface-muted) !important;
}

#composerPanel {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ui-chrome-surface) 94%, white 4%) 0%,
            color-mix(in srgb, var(--ui-chrome-surface) 86%, var(--ui-bg) 14%) 100%) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow), 0 0 0 1px var(--ui-chrome-border-soft) !important;
}

html.light #composerPanel {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ui-chrome-surface) 94%, white 7%) 0%,
            color-mix(in srgb, var(--ui-chrome-surface) 90%, black 3%) 100%) !important;
}

.accordion-sidebar {
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-1);
}

.accordion-tabbar {
    --accordion-tabbar-bg: var(--ui-panel-rail-bg);
    background-color: var(--ui-panel-rail-bg) !important;
    border-color: var(--ui-chrome-border) !important;
}

.accordion-content {
    background-color: var(--ui-panel-bg) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-1);
}

.accordion-sidebar.dock-left .accordion-tabbar,
.accordion-sidebar.dock-left .accordion-content,
.accordion-sidebar.dock-right .accordion-tabbar,
.accordion-sidebar.dock-right .accordion-content {
    border-color: var(--ui-chrome-border) !important;
}

.accordion-section-body {
    background: transparent;
}

.accordion-sidebar.accordion-floating {
    box-shadow: var(--ui-shadow), 0 0 0 1px var(--ui-chrome-border) !important;
}

.accordion-dock-picker {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

.bg-dropdownbg,
.project-picker-menu,
.bg-\[\#1a1a1f\],
.bg-\[\#1c1c1f\],
.bg-\[\#1f1f22\],
.bg-\[\#101115\] {
    background-color: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
}

.bg-\[\#0d0d0f\],
.bg-\[\#0b0c0f\],
.bg-\[\#2b2b30\],
.hover\:bg-\[\#2b2b30\]:hover {
    background-color: var(--ui-surface-3) !important;
}

.text-white,
.text-gray-200,
.rail-popup__name,
.project-picker-value {
    color: var(--ui-text-1) !important;
}

.text-gray-300,
.text-gray-400,
.project-picker-label,
.project-picker-toggle,
.rail-popup__item,
.rail-popup__theme-btn,
.rail-popup__tone-row {
    color: var(--ui-text-2) !important;
}

.text-gray-500,
.text-gray-600,
.rail-popup__section-label {
    color: var(--ui-text-3) !important;
}

.border,
.border-gray-600,
.border-gray-600\/50,
.border-gray-700,
.border-gray-700\/50,
.border-gray-800,
.border-gray-800\/50,
#bottomControls .border,
#bottomControls .bg-panelbg {
    border-color: var(--ui-chrome-border) !important;
}

html.dark .app-rail__divider,
html.light .app-rail__divider,
html.dark .app-rail__company-separator,
html.light .app-rail__company-separator,
html.dark .rail-popup__divider,
html.light .rail-popup__divider,
html.dark .rail-popup__section-divider,
html.light .rail-popup__section-divider,
html.dark .project-picker-company-divider,
html.light .project-picker-company-divider {
    background: var(--ui-chrome-divider) !important;
}

html.dark .project-picker-company,
html.light .project-picker-company {
    border-top-color: var(--ui-chrome-divider) !important;
}

.app-rail__btn:hover,
.rail-popup__item:hover,
.rail-popup__theme-btn:hover,
.project-picker-toggle:hover,
#pager-container button:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .app-rail__layout,
html.light .app-rail__layout {
    background: var(--ui-chrome-surface-soft) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark .app-rail__layout:hover,
html.light .app-rail__layout:hover {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark #railLayoutPopup,
html.light #railLayoutPopup {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-1) !important;
}

html.dark #railLayoutPopup .rail-popup__layout-title,
html.light #railLayoutPopup .rail-popup__layout-title {
    color: var(--ui-text-1) !important;
}

html.dark #railLayoutPopup .rail-popup__section-label,
html.light #railLayoutPopup .rail-popup__section-label,
html.dark #railLayoutPopup .rail-popup__empty,
html.light #railLayoutPopup .rail-popup__empty {
    color: var(--ui-text-3) !important;
}

html.dark #railLayoutPopup .rail-popup__divider,
html.light #railLayoutPopup .rail-popup__divider {
    background: var(--ui-chrome-divider) !important;
}

html.dark #railLayoutPopup .rail-popup__item,
html.light #railLayoutPopup .rail-popup__item {
    color: var(--ui-text-2) !important;
}

html.dark #railLayoutPopup .rail-popup__item:hover,
html.light #railLayoutPopup .rail-popup__item:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark #railLayoutPopup .rail-popup__item.is-active,
html.light #railLayoutPopup .rail-popup__item.is-active {
    background: var(--ui-active) !important;
    color: var(--accent) !important;
}

html.dark #railLayoutPopup .rail-popup__item.is-active > i,
html.light #railLayoutPopup .rail-popup__item.is-active > i,
html.dark #railLayoutPopup .rail-popup__item.is-active > svg,
html.light #railLayoutPopup .rail-popup__item.is-active > svg {
    color: var(--accent) !important;
}

html.dark #railLayoutPopup .rail-popup__item-actions button,
html.light #railLayoutPopup .rail-popup__item-actions button {
    background: transparent !important;
    color: var(--ui-text-3) !important;
}

html.dark #railLayoutPopup .rail-popup__item-actions button:hover,
html.light #railLayoutPopup .rail-popup__item-actions button:hover {
    background: var(--ui-hover) !important;
    color: var(--accent) !important;
}

html.dark #railLayoutPopup .rail-popup__item-actions button.is-danger:hover,
html.light #railLayoutPopup .rail-popup__item-actions button.is-danger:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

html.dark .accordion-tabbar,
html.light .accordion-tabbar {
    background: var(--ui-panel-rail-bg) !important;
    border-color: var(--ui-chrome-border) !important;
}

html.dark #foldersSidebar.accordion-sidebar .accordion-tabbar,
html.light #foldersSidebar.accordion-sidebar .accordion-tabbar,
html.dark #foldersSidebar.accordion-sidebar .accordion-content,
html.light #foldersSidebar.accordion-sidebar .accordion-content,
html.dark #foldersSidebar.accordion-sidebar.accordion-snapped .accordion-tabbar,
html.light #foldersSidebar.accordion-sidebar.accordion-snapped .accordion-tabbar,
html.dark #foldersSidebar.accordion-sidebar.accordion-snapped .accordion-content,
html.light #foldersSidebar.accordion-sidebar.accordion-snapped .accordion-content {
    border-color: var(--ui-chrome-border) !important;
    border-left-color: var(--ui-chrome-border) !important;
    border-right-color: var(--ui-chrome-border) !important;
}

html.dark #foldersSidebar.accordion-sidebar.dock-left .accordion-tabbar,
html.light #foldersSidebar.accordion-sidebar.dock-left .accordion-tabbar,
html.dark #foldersSidebar.accordion-sidebar.dock-left .accordion-content,
html.light #foldersSidebar.accordion-sidebar.dock-left .accordion-content {
    border-right-color: var(--ui-chrome-border) !important;
}

html.dark #foldersSidebar.accordion-sidebar.dock-right .accordion-tabbar,
html.light #foldersSidebar.accordion-sidebar.dock-right .accordion-tabbar,
html.dark #foldersSidebar.accordion-sidebar.dock-right .accordion-content,
html.light #foldersSidebar.accordion-sidebar.dock-right .accordion-content {
    border-left-color: var(--ui-chrome-border) !important;
}

html.dark .accordion-tab-btn,
html.light .accordion-tab-btn {
    color: var(--ui-text-2) !important;
}

html.dark .accordion-tab-btn .accordion-tab-label,
html.light .accordion-tab-btn .accordion-tab-label,
html.dark .accordion-tab-btn > i,
html.light .accordion-tab-btn > i,
html.dark .accordion-tab-btn > svg,
html.light .accordion-tab-btn > svg,
html.dark .accordion-tab-btn .lucide,
html.light .accordion-tab-btn .lucide {
    color: inherit !important;
    stroke: currentColor !important;
}

html.dark .accordion-tab-btn:hover,
html.light .accordion-tab-btn:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .accordion-tab-btn.is-active,
html.light .accordion-tab-btn.is-active {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark .accordion-tab-btn:disabled,
html.light .accordion-tab-btn:disabled,
html.dark .accordion-tab-btn.is-disabled,
html.light .accordion-tab-btn.is-disabled {
    color: var(--ui-text-3) !important;
    opacity: 1 !important;
}

input,
textarea,
select {
    background-color: var(--ui-input-bg);
    color: var(--ui-text-1);
    border-color: var(--ui-border);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ui-focus-ring) !important;
    outline-color: var(--ui-focus-ring);
}

html.dark .rail-popup__key-btn,
html.light .rail-popup__key-btn,
html.dark .rail-popup__lang-btn,
html.light .rail-popup__lang-btn,
html.dark .rail-popup__privacy-btn,
html.light .rail-popup__privacy-btn,
html.dark .rail-popup__ai-key-card,
html.light .rail-popup__ai-key-card,
html.dark .rail-popup__ai-key-form,
html.light .rail-popup__ai-key-form,
html.dark .rail-popup__ai-key-input,
html.light .rail-popup__ai-key-input,
html.dark .rail-popup__ai-key-add,
html.light .rail-popup__ai-key-add {
    background-color: var(--ui-chrome-surface-soft) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark .rail-popup__key-btn:hover,
html.light .rail-popup__key-btn:hover,
html.dark .rail-popup__lang-btn:hover,
html.light .rail-popup__lang-btn:hover,
html.dark .rail-popup__privacy-btn:hover,
html.light .rail-popup__privacy-btn:hover,
html.dark .rail-popup__ai-key-card:hover,
html.light .rail-popup__ai-key-card:hover,
html.dark .rail-popup__ai-key-action:hover,
html.light .rail-popup__ai-key-action:hover,
html.dark .rail-popup__ai-key-add:hover,
html.light .rail-popup__ai-key-add:hover {
    background: var(--ui-hover) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-1) !important;
}

html.dark .rail-popup__key-btn.is-active,
html.light .rail-popup__key-btn.is-active {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

html.dark .rail-popup__lang-btn.is-active,
html.light .rail-popup__lang-btn.is-active,
html.dark .rail-popup__ai-key-card.is-default,
html.light .rail-popup__ai-key-card.is-default {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark .rail-popup__tone-row,
html.light .rail-popup__tone-row {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 14px 7px;
}

html.dark .rail-popup__tone-row--with-reset,
html.light .rail-popup__tone-row--with-reset {
    grid-template-columns: 18px minmax(0, 1fr) 22px;
}

html.dark .rail-popup__tone-icon,
html.light .rail-popup__tone-icon,
html.dark .rail-popup__hue-icon,
html.light .rail-popup__hue-icon,
html.dark .rail-popup__lang-icon,
html.light .rail-popup__lang-icon {
    color: var(--ui-text-3) !important;
}

html.dark .rail-popup__tone-slider,
html.light .rail-popup__tone-slider,
html.dark .rail-popup__hue-slider,
html.light .rail-popup__hue-slider {
    min-width: 0;
    width: calc(100% - 4px);
    margin-inline: 2px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--ui-chrome-border);
    box-shadow: inset 0 0 0 1px var(--ui-chrome-border-soft);
}

html.dark .rail-popup__tone-slider,
html.light .rail-popup__tone-slider {
    background: linear-gradient(90deg,
        var(--ui-surface-3) 0%,
        color-mix(in srgb, var(--ui-text-3) 58%, var(--ui-surface-3) 42%) 52%,
        var(--ui-text-1) 100%) !important;
}

html.dark .rail-popup__tone-slider::-webkit-slider-runnable-track,
html.light .rail-popup__tone-slider::-webkit-slider-runnable-track,
html.dark .rail-popup__hue-slider::-webkit-slider-runnable-track,
html.light .rail-popup__hue-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: transparent;
}

html.dark .rail-popup__tone-slider::-moz-range-track,
html.light .rail-popup__tone-slider::-moz-range-track,
html.dark .rail-popup__hue-slider::-moz-range-track,
html.light .rail-popup__hue-slider::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: transparent;
}

html.dark .rail-popup__tone-slider::-webkit-slider-thumb,
html.light .rail-popup__tone-slider::-webkit-slider-thumb,
html.dark .rail-popup__hue-slider::-webkit-slider-thumb,
html.light .rail-popup__hue-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 2px solid var(--ui-control-thumb-ring);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ui-chrome-surface) 78%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.44);
}

html.dark .rail-popup__tone-slider::-moz-range-thumb,
html.light .rail-popup__tone-slider::-moz-range-thumb,
html.dark .rail-popup__hue-slider::-moz-range-thumb,
html.light .rail-popup__hue-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ui-control-thumb-ring);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ui-chrome-surface) 78%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.44);
}

html.dark .rail-popup__hue-reset,
html.light .rail-popup__hue-reset,
html.dark #themeToneReset,
html.light #themeToneReset {
    background: transparent !important;
    color: var(--ui-text-3) !important;
}

html.dark .rail-popup__hue-reset:hover,
html.light .rail-popup__hue-reset:hover,
html.dark #themeToneReset:hover,
html.light #themeToneReset:hover {
    background: var(--ui-active) !important;
    color: var(--accent) !important;
}

html.dark .gallery-control-icon-btn,
html.light .gallery-control-icon-btn {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-2) !important;
}

html.dark .filters-popup-btn:hover,
html.light .filters-popup-btn:hover,
html.dark #dateModeToggle:hover,
html.light #dateModeToggle:hover,
html.dark #dateModeToggle:focus-visible,
html.light #dateModeToggle:focus-visible,
html.dark .filters-popup-btn--open,
html.light .filters-popup-btn--open {
    background: var(--ui-hover) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-btn--active,
html.light .filters-popup-btn--active {
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark .filters-popup-btn .filters-popup-badge,
html.light .filters-popup-btn .filters-popup-badge {
    background: var(--accent) !important;
    color: #101318 !important;
    box-shadow: 0 0 0 2px var(--ui-panel-elevated-bg) !important;
}

html.dark .filters-popup,
html.light .filters-popup {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-header,
html.light .filters-popup-header {
    background: var(--ui-surface-2) !important;
    border-bottom-color: var(--ui-border) !important;
}

html.dark .filters-popup-title,
html.light .filters-popup-title {
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-section-title,
html.light .filters-popup-section-title,
html.dark .filters-popup-loading,
html.light .filters-popup-loading {
    color: var(--ui-text-3) !important;
}

html.dark .filters-popup-empty,
html.light .filters-popup-empty,
html.dark .filters-popup-count,
html.light .filters-popup-count {
    color: var(--ui-text-3) !important;
}

html.dark .filters-popup-radio,
html.light .filters-popup-radio,
html.dark .filters-popup-checkbox,
html.light .filters-popup-checkbox {
    color: var(--ui-text-2) !important;
}

html.dark .filters-popup-radio {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}

html.light .filters-popup-radio {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-border) !important;
}

html.dark .filters-popup-radio:hover,
html.light .filters-popup-radio:hover,
html.dark .filters-popup-checkbox:hover,
html.light .filters-popup-checkbox:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-radio:has(input:checked),
html.light .filters-popup-radio:has(input:checked) {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-checkbox:has(input:checked),
html.light .filters-popup-checkbox:has(input:checked) {
    color: var(--ui-text-1) !important;
}

html.dark .filters-popup-radio:has(input:checked) .filters-popup-count,
html.light .filters-popup-radio:has(input:checked) .filters-popup-count,
html.dark .filters-popup-checkbox:has(input:checked) .filters-popup-count,
html.light .filters-popup-checkbox:has(input:checked) .filters-popup-count,
html.dark .filters-popup-result-count,
html.light .filters-popup-result-count,
html.dark .filters-popup-reset,
html.light .filters-popup-reset {
    color: var(--accent) !important;
}

html.dark .filters-popup-reset:hover,
html.light .filters-popup-reset:hover {
    background: var(--ui-active) !important;
}

html.dark .filters-popup-radio--zero,
html.light .filters-popup-radio--zero,
html.dark .filters-popup-checkbox--zero,
html.light .filters-popup-checkbox--zero {
    opacity: 1 !important;
    color: var(--ui-text-3) !important;
}

html.dark .filters-popup-radio--zero:hover,
html.light .filters-popup-radio--zero:hover,
html.dark .filters-popup-checkbox--zero:hover,
html.light .filters-popup-checkbox--zero:hover {
    background: transparent !important;
    color: var(--ui-text-3) !important;
}

html.dark .gallery-display-controls,
html.light .gallery-display-controls,
html.dark .gallery-layout-switcher,
html.light .gallery-layout-switcher,
html.dark #pager-container > div,
html.light #pager-container > div,
html.dark #dateModeToggle,
html.light #dateModeToggle {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-2) !important;
}

html.dark .gallery-display-controls .generation-control-separator,
html.light .gallery-display-controls .generation-control-separator,
html.dark #pager-container .w-px,
html.light #pager-container .w-px {
    background: var(--ui-chrome-divider) !important;
}

html.dark .gallery-layout-switcher .gls-btn,
html.light .gallery-layout-switcher .gls-btn,
html.dark .gallery-display-controls #lodToggle,
html.light .gallery-display-controls #lodToggle,
html.dark .gallery-display-controls #generationFullscreenToggle,
html.light .gallery-display-controls #generationFullscreenToggle,
html.dark #dateModeToggle,
html.light #dateModeToggle,
html.dark #pager-container #pagerPrev,
html.light #pager-container #pagerPrev,
html.dark #pager-container #pagerNext,
html.light #pager-container #pagerNext,
html.dark #pager-container #pagerPages button,
html.light #pager-container #pagerPages button,
html.dark #pager-container .date-navigator button,
html.light #pager-container .date-navigator button {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ui-text-2) !important;
}

html.dark #dateModeToggle.gallery-control-icon-btn,
html.light #dateModeToggle.gallery-control-icon-btn {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark .gallery-layout-switcher .gls-btn > i,
html.light .gallery-layout-switcher .gls-btn > i,
html.dark .gallery-layout-switcher .gls-btn > svg,
html.light .gallery-layout-switcher .gls-btn > svg,
html.dark .gallery-display-controls button > i,
html.light .gallery-display-controls button > i,
html.dark .gallery-display-controls button > svg,
html.light .gallery-display-controls button > svg,
html.dark .gallery-display-controls > i,
html.light .gallery-display-controls > i,
html.dark .gallery-display-controls > svg,
html.light .gallery-display-controls > svg,
html.dark #pager-container button > i,
html.light #pager-container button > i,
html.dark #pager-container button > svg,
html.light #pager-container button > svg {
    color: inherit !important;
    stroke: currentColor !important;
}

html.dark .gallery-layout-switcher .gls-btn:hover,
html.light .gallery-layout-switcher .gls-btn:hover,
html.dark .gallery-display-controls #lodToggle:hover,
html.light .gallery-display-controls #lodToggle:hover,
html.dark .gallery-display-controls #generationFullscreenToggle:hover,
html.light .gallery-display-controls #generationFullscreenToggle:hover,
html.dark #dateModeToggle:hover,
html.light #dateModeToggle:hover,
html.dark #pager-container #pagerPrev:hover:not(:disabled),
html.light #pager-container #pagerPrev:hover:not(:disabled),
html.dark #pager-container #pagerNext:hover:not(:disabled),
html.light #pager-container #pagerNext:hover:not(:disabled),
html.dark #pager-container #pagerPages button:hover,
html.light #pager-container #pagerPages button:hover,
html.dark #pager-container .date-navigator button:hover:not(:disabled),
html.light #pager-container .date-navigator button:hover:not(:disabled) {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .gallery-display-controls:hover > i,
html.light .gallery-display-controls:hover > i,
html.dark .gallery-display-controls:hover > svg,
html.light .gallery-display-controls:hover > svg {
    color: var(--ui-text-1) !important;
}

html.dark .gallery-layout-switcher .gls-btn.is-active,
html.light .gallery-layout-switcher .gls-btn.is-active,
html.dark .gallery-display-controls #lodToggle.is-active,
html.light .gallery-display-controls #lodToggle.is-active,
html.dark .gallery-display-controls #generationFullscreenToggle.is-active,
html.light .gallery-display-controls #generationFullscreenToggle.is-active,
html.dark #pager-container #pagerPages button.bg-banana,
html.light #pager-container #pagerPages button.bg-banana,
html.dark #pager-container .date-navigator button.bg-banana,
html.light #pager-container .date-navigator button.bg-banana {
    background: var(--accent) !important;
    border-color: var(--accent-border-strong) !important;
    color: #101318 !important;
}

html.dark #pager-container select,
html.light #pager-container select,
html.dark #pageSizeSelect,
html.light #pageSizeSelect {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-chrome-border) !important;
    color: var(--ui-text-1) !important;
}

html.dark #pager-container select,
html.dark #pageSizeSelect {
    color-scheme: dark;
}

html.light #pager-container select,
html.light #pageSizeSelect {
    color-scheme: light;
}

html.dark #pager-container select option,
html.light #pager-container select option {
    background: var(--ui-panel-elevated-bg) !important;
    color: var(--ui-text-1) !important;
}

html.dark #pager-container #pagerPages span,
html.light #pager-container #pagerPages span,
html.dark #pager-container .date-navigator__days span,
html.light #pager-container .date-navigator__days span,
html.dark #pager-container .date-navigator .text-gray-500,
html.light #pager-container .date-navigator .text-gray-500,
html.dark #pager-container .date-navigator .text-gray-600,
html.light #pager-container .date-navigator .text-gray-600 {
    color: var(--ui-text-3) !important;
}

html.dark #pager-container button:disabled,
html.light #pager-container button:disabled,
html.dark #pager-container .date-navigator button:disabled,
html.light #pager-container .date-navigator button:disabled {
    background: transparent !important;
    color: var(--ui-text-3) !important;
    opacity: 1 !important;
}

html.dark #pager-container .date-navigator__month-slot,
html.light #pager-container .date-navigator__month-slot,
html.dark #pager-container .date-navigator__month-label:not(.bg-banana),
html.light #pager-container .date-navigator__month-label:not(.bg-banana) {
    color: var(--ui-text-2) !important;
}

html.dark .gallery-display-controls #sizeSlider::-webkit-slider-runnable-track,
html.light .gallery-display-controls #sizeSlider::-webkit-slider-runnable-track {
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--ui-control-track) !important;
    box-shadow: inset 0 0 0 1px var(--ui-chrome-border-soft) !important;
}

html.dark .gallery-display-controls #sizeSlider::-moz-range-track,
html.light .gallery-display-controls #sizeSlider::-moz-range-track {
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--ui-control-track) !important;
    box-shadow: inset 0 0 0 1px var(--ui-chrome-border-soft) !important;
}

html.dark .gallery-display-controls #sizeSlider::-webkit-slider-thumb,
html.light .gallery-display-controls #sizeSlider::-webkit-slider-thumb {
    box-sizing: border-box !important;
    margin-top: -1px !important;
    border: 2px solid var(--ui-control-thumb-ring) !important;
    box-shadow: none !important;
}

html.dark .gallery-display-controls #sizeSlider::-moz-range-thumb,
html.light .gallery-display-controls #sizeSlider::-moz-range-thumb {
    box-sizing: border-box !important;
    border: 2px solid var(--ui-control-thumb-ring) !important;
    box-shadow: none !important;
}

#gallery-grid > div {
    background-color: var(--ui-surface-1) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

#gallery-grid .bg-black\/40,
#gallery-grid .bg-black\/60,
#gallery-grid .bg-black\/80 {
    background-color: var(--ui-surface-2) !important;
}

html.dark .main-view-switcher,
html.light .main-view-switcher {
    background: var(--ui-chrome-surface) !important;
    border-color: var(--ui-chrome-border) !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark .main-view-switcher .mvs-btn,
html.light .main-view-switcher .mvs-btn {
    color: var(--ui-text-2) !important;
}

html.dark .main-view-switcher .mvs-btn:hover,
html.light .main-view-switcher .mvs-btn:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .main-view-switcher .mvs-btn.is-active,
html.light .main-view-switcher .mvs-btn.is-active,
html.dark .main-view-switcher .mvs-btn.is-active:hover,
html.light .main-view-switcher .mvs-btn.is-active:hover {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

html.dark .main-view-switcher .mvs-count,
html.light .main-view-switcher .mvs-count {
    background: var(--ui-hover) !important;
    color: var(--ui-text-3) !important;
}

html.dark .main-view-switcher .mvs-btn.is-active .mvs-count,
html.light .main-view-switcher .mvs-btn.is-active .mvs-count {
    background: rgba(0, 0, 0, 0.18) !important;
    color: var(--accent-contrast) !important;
}

html.dark .folder-count-lod-menu,
html.light .folder-count-lod-menu {
    background: var(--ui-panel-elevated-bg) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-1);
    padding: 6px;
}

html.dark .folder-count-lod-menu__item,
html.light .folder-count-lod-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text-2);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html.dark .folder-count-lod-menu__item:hover,
html.light .folder-count-lod-menu__item:hover {
    background: var(--ui-hover);
    color: var(--ui-text-1);
}

html.dark .folder-count-lod-menu__item.is-active,
html.light .folder-count-lod-menu__item.is-active {
    background: var(--ui-active);
    color: var(--accent);
}

html.dark .folder-count-lod-menu__item .lucide,
html.light .folder-count-lod-menu__item .lucide {
    flex: 0 0 auto;
    opacity: 0.35;
}

html.dark .folder-count-lod-menu__item.is-active .lucide,
html.light .folder-count-lod-menu__item.is-active .lucide {
    opacity: 1;
}

html.dark .folder-count-lod-menu__divider,
html.light .folder-count-lod-menu__divider {
    height: 1px;
    margin: 6px 4px;
    background: var(--ui-border);
}

html.dark .folder-count-lod-menu__label,
html.light .folder-count-lod-menu__label {
    padding: 2px 8px 4px;
    color: var(--ui-text-3);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html.dark .pinfo-card,
html.light .pinfo-card,
html.dark .finfo-card,
html.light .finfo-card {
    color: var(--ui-text-1);
}

html.dark .pinfo-loading,
html.light .pinfo-loading {
    color: var(--ui-text-3);
}

html.dark .pinfo-cover-drop--empty,
html.light .pinfo-cover-drop--empty {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border-strong) !important;
}

html.dark .pinfo-cover-drop--empty:hover,
html.light .pinfo-cover-drop--empty:hover {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
}

html.dark .pinfo-cover-hint,
html.light .pinfo-cover-hint {
    color: var(--ui-text-3) !important;
}

html.dark .pinfo-name,
html.light .pinfo-name {
    color: var(--ui-text-1) !important;
}

html.dark .pinfo-desc,
html.light .pinfo-desc,
html.dark .pinfo-stat,
html.light .pinfo-stat,
html.dark .finfo-screenshh-row,
html.light .finfo-screenshh-row {
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-slug,
html.light .pinfo-slug,
html.dark .pinfo-stat i,
html.light .pinfo-stat i,
html.dark .pinfo-section-label,
html.light .pinfo-section-label {
    color: var(--ui-text-3) !important;
}

html.dark .finfo-bg-input,
html.light .finfo-bg-input {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-border) !important;
}

html.dark .finfo-bg-text,
html.light .finfo-bg-text {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-1) !important;
}

html.dark .finfo-bg-text::placeholder,
html.light .finfo-bg-text::placeholder {
    color: var(--ui-text-3) !important;
}

html.dark .finfo-bg-text:focus,
html.light .finfo-bg-text:focus {
    border-color: var(--ui-focus-ring) !important;
    box-shadow: 0 0 0 2px var(--ui-active);
}

html.dark .finfo-bg-clear,
html.light .finfo-bg-clear {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-3) !important;
}

html.dark .finfo-bg-clear:hover:not(:disabled),
html.light .finfo-bg-clear:hover:not(:disabled) {
    background: var(--ui-hover) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #ef4444 !important;
}

html.dark .finfo-screenshh-row input[type="checkbox"],
html.light .finfo-screenshh-row input[type="checkbox"] {
    accent-color: var(--accent);
}

html.dark .finfo-screenshh-row:has(input:disabled),
html.light .finfo-screenshh-row:has(input:disabled),
html.dark .finfo-bg-input:disabled,
html.light .finfo-bg-input:disabled,
html.dark .finfo-bg-text:disabled,
html.light .finfo-bg-text:disabled,
html.dark .finfo-bg-clear:disabled,
html.light .finfo-bg-clear:disabled {
    opacity: 0.58;
}

html.dark .pinfo-key-widget,
html.light .pinfo-key-widget,
html.dark .pinfo-users-widget,
html.light .pinfo-users-widget {
    border-color: var(--ui-border) !important;
    color: var(--ui-text-2);
}

html.dark .pinfo-key-label,
html.light .pinfo-key-label,
html.dark .pinfo-users-label,
html.light .pinfo-users-label,
html.dark .pinfo-key-bal__name,
html.light .pinfo-key-bal__name {
    color: var(--ui-text-3) !important;
}

html.dark .pinfo-key-privacy,
html.light .pinfo-key-privacy {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-key-privacy:hover,
html.light .pinfo-key-privacy:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .pinfo-key-indicator,
html.light .pinfo-key-indicator {
    background: transparent !important;
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-key-indicator:hover,
html.light .pinfo-key-indicator:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .pinfo-key-indicator[aria-pressed="true"],
html.light .pinfo-key-indicator[aria-pressed="true"] {
    background: var(--accent) !important;
    color: var(--accent-contrast) !important;
}

html.dark .pinfo-key-current,
html.light .pinfo-key-current {
    color: inherit;
}

html.dark .pinfo-key-bal,
html.light .pinfo-key-bal {
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-key-bal__val,
html.light .pinfo-key-bal__val {
    color: var(--ui-text-1) !important;
}

html.dark .pinfo-key-bal__val--loading,
html.light .pinfo-key-bal__val--loading {
    color: var(--ui-text-3) !important;
}

html.dark .pinfo-key-bal__val--err,
html.light .pinfo-key-bal__val--err {
    color: #ef4444 !important;
}

html.dark .pinfo-users-list .text-gray-500,
html.light .pinfo-users-list .text-gray-500 {
    color: var(--ui-text-3) !important;
}

html.dark .pinfo-users-row,
html.light .pinfo-users-row {
    color: var(--ui-text-2) !important;
    background: transparent !important;
}

html.dark .pinfo-users-row:hover,
html.light .pinfo-users-row:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-text-1) !important;
}

html.dark .pinfo-users-row--active,
html.light .pinfo-users-row--active,
html.dark .pinfo-users-row--active:hover,
html.light .pinfo-users-row--active:hover {
    background: var(--ui-active) !important;
    color: var(--accent) !important;
}

html.dark .pinfo-users-count,
html.light .pinfo-users-count {
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-users-dm,
html.light .pinfo-users-dm {
    color: var(--ui-text-3) !important;
}

html.dark .pinfo-users-dm:hover,
html.light .pinfo-users-dm:hover {
    background: var(--ui-hover) !important;
    color: var(--accent) !important;
}

html.dark .pinfo-company-project,
html.light .pinfo-company-project {
    color: var(--ui-text-2) !important;
}

html.dark .pinfo-company-project:hover,
html.light .pinfo-company-project:hover {
    background: var(--ui-active) !important;
    color: var(--accent) !important;
}

/* Explorer: contrast has its own text scale so low contrast can be genuinely muted. */
html.dark .wsexplorer,
html.light .wsexplorer,
html.dark .ftree,
html.light .ftree {
    color: var(--ui-explorer-text);
}

html.dark .wsexplorer-company-title,
html.light .wsexplorer-company-title,
html.dark .wsexplorer-card-title,
html.light .wsexplorer-card-title {
    color: var(--ui-explorer-title) !important;
}

html.dark .wsexplorer-card-subtitle,
html.light .wsexplorer-card-subtitle,
html.dark .wsexplorer-card-copy::after,
html.light .wsexplorer-card-copy::after {
    color: var(--ui-explorer-muted) !important;
}

html.dark .wsexplorer-card,
html.light .wsexplorer-card,
html.dark .wsexplorer-card-panel,
html.light .wsexplorer-card-panel {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-explorer-text);
}

html.dark .wsexplorer-card:hover,
html.light .wsexplorer-card:hover {
    background: var(--ui-card-hover-bg) !important;
    border-color: var(--ui-border-strong) !important;
}

html.dark .wsexplorer-card:hover .wsexplorer-card-panel,
html.light .wsexplorer-card:hover .wsexplorer-card-panel {
    background: var(--ui-card-hover-bg) !important;
}

html.dark .wsexplorer-company-cover,
html.light .wsexplorer-company-cover,
html.dark .wsexplorer-cover,
html.light .wsexplorer-cover {
    background: var(--ui-card-media-bg) !important;
    border-color: var(--ui-border) !important;
}

html.dark .wsexplorer-drill,
html.light .wsexplorer-drill,
html.dark .wsexplorer-toggle,
html.light .wsexplorer-toggle {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-explorer-muted) !important;
}

html.dark .wsexplorer-drill:hover,
html.light .wsexplorer-drill:hover,
html.dark .wsexplorer-toggle:hover,
html.light .wsexplorer-toggle:hover {
    background: var(--ui-hover) !important;
    color: var(--ui-explorer-title) !important;
}

html.dark .ftree-section-header,
html.light .ftree-section-header,
html.dark .ftree-section-empty,
html.light .ftree-section-empty,
html.dark .ftree-empty,
html.light .ftree-empty,
html.dark .ftree-loading,
html.light .ftree-loading {
    color: var(--ui-explorer-muted) !important;
}

html.dark .ftree-section-header::after,
html.light .ftree-section-header::after,
html.dark .ftree-children::before,
html.light .ftree-children::before {
    background: var(--ui-tree-line) !important;
}

html.dark .ftree-row,
html.light .ftree-row {
    color: var(--ui-explorer-text);
}

html.dark .ftree-row:hover,
html.light .ftree-row:hover {
    background: var(--ui-hover) !important;
    outline-color: var(--ui-border-strong) !important;
}

html.dark .ftree-name,
html.light .ftree-name {
    color: var(--ui-explorer-text) !important;
}

html.dark .ftree-name:hover,
html.light .ftree-name:hover {
    color: var(--ui-explorer-title) !important;
}

html.dark .ftree-toggle,
html.light .ftree-toggle,
html.dark .ftree-section-header .ftree-section-collapse,
html.light .ftree-section-header .ftree-section-collapse,
html.dark .ftree-action-btn,
html.light .ftree-action-btn {
    color: var(--ui-explorer-muted) !important;
}

html.dark .ftree-toggle:hover,
html.light .ftree-toggle:hover,
html.dark .ftree-section-header .ftree-section-collapse:hover,
html.light .ftree-section-header .ftree-section-collapse:hover,
html.dark .ftree-action-btn:hover,
html.light .ftree-action-btn:hover {
    color: var(--ui-explorer-title) !important;
    background: var(--ui-hover) !important;
}

html.dark .ftree-count,
html.light .ftree-count,
html.dark .ftree-count-gen,
html.light .ftree-count-gen {
    color: var(--ui-explorer-muted) !important;
    background: var(--ui-panel-elevated-bg) !important;
}

html.dark .ftree-count-sep,
html.light .ftree-count-sep {
    color: var(--ui-explorer-muted) !important;
    opacity: 1 !important;
}

html.dark .ftree-actions,
html.light .ftree-actions {
    background: linear-gradient(
        to left,
        var(--ui-panel-bg) 42%,
        var(--ui-panel-bg) 68%,
        transparent 100%
    ) !important;
}

html.dark .ftree-node--active > .ftree-row,
html.light .ftree-node--active > .ftree-row {
    background: var(--ui-active) !important;
    outline-color: var(--accent-border-strong) !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark .ftree-node--active > .ftree-row .ftree-name,
html.light .ftree-node--active > .ftree-row .ftree-name {
    color: var(--ui-explorer-text) !important;
}

html.dark .ftree-node--active > .ftree-row .ftree-icon,
html.light .ftree-node--active > .ftree-row .ftree-icon {
    color: var(--accent) !important;
}

html.dark .ftree-node--active > .ftree-row .ftree-count,
html.light .ftree-node--active > .ftree-row .ftree-count {
    color: var(--accent-contrast) !important;
    background: var(--accent) !important;
}

html.dark .ftree-node--entity-index.ftree-node--active .ftree-row,
html.light .ftree-node--entity-index.ftree-node--active .ftree-row {
    background: var(--ui-active) !important;
}

html.dark .ftree-node--trash.ftree-node--active > .ftree-row .ftree-name,
html.light .ftree-node--trash.ftree-node--active > .ftree-row .ftree-name,
html.dark .ftree-node--trash.ftree-node--active > .ftree-row .ftree-icon,
html.light .ftree-node--trash.ftree-node--active > .ftree-row .ftree-icon {
    color: #ef4444 !important;
}

html.dark .ftree-row.drop-highlight,
html.light .ftree-row.drop-highlight {
    background: var(--ui-active) !important;
    outline-color: var(--accent) !important;
}

/* Presets: list and editor surfaces must follow lightness/contrast tone. */
html.dark .presets-panel-root,
html.light .presets-panel-root,
html.dark .presets-list-view,
html.light .presets-list-view,
html.dark .presets-editor-view,
html.light .presets-editor-view,
html.dark .presets-list-body,
html.light .presets-list-body,
html.dark .presets-editor-body,
html.light .presets-editor-body {
    background: transparent !important;
    color: var(--ui-text-1) !important;
}

html.dark .presets-chip,
html.light .presets-chip {
    background: var(--ui-card-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-1) !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark .presets-chip:hover,
html.light .presets-chip:hover {
    background: var(--ui-card-hover-bg) !important;
    border-color: var(--ui-border-strong) !important;
}

html.dark .presets-chip.is-selected,
html.light .presets-chip.is-selected {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
}

html.dark .presets-chip-name,
html.light .presets-chip-name,
html.dark .presets-chip.is-selected .presets-chip-name,
html.light .presets-chip.is-selected .presets-chip-name,
html.dark .presets-chip:hover .presets-chip-name,
html.light .presets-chip:hover .presets-chip-name,
html.dark .presets-editor-title,
html.light .presets-editor-title {
    color: var(--ui-text-1) !important;
}

html.dark .presets-chip-cover,
html.light .presets-chip-cover,
html.dark .presets-chip-ref,
html.light .presets-chip-ref,
html.dark .presets-ref-preview,
html.light .presets-ref-preview,
html.dark .presets-editor-cover,
html.light .presets-editor-cover {
    background: var(--ui-card-media-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-3) !important;
}

html.dark .presets-chip-cover--empty,
html.light .presets-chip-cover--empty,
html.dark .presets-editor-cover--empty,
html.light .presets-editor-cover--empty,
html.dark .presets-refs-add,
html.light .presets-refs-add {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text-3) !important;
}

html.dark .presets-refs-add:hover,
html.light .presets-refs-add:hover,
html.dark .presets-chip-cover.cover-drag-over,
html.light .presets-chip-cover.cover-drag-over,
html.dark .presets-editor-cover.cover-drag-over,
html.light .presets-editor-cover.cover-drag-over {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark .presets-chip-actions,
html.light .presets-chip-actions {
    background: linear-gradient(
        to left,
        var(--ui-card-bg) 45%,
        var(--ui-card-bg) 74%,
        transparent 100%
    ) !important;
}

html.dark .presets-chip:hover .presets-chip-actions,
html.light .presets-chip:hover .presets-chip-actions {
    background: linear-gradient(
        to left,
        var(--ui-card-hover-bg) 45%,
        var(--ui-card-hover-bg) 74%,
        transparent 100%
    ) !important;
}

html.dark .presets-chip-actions button,
html.light .presets-chip-actions button,
html.dark .presets-editor-back,
html.light .presets-editor-back,
html.dark .presets-header-action--from-prompt,
html.light .presets-header-action--from-prompt,
html.dark .presets-filter-tag,
html.light .presets-filter-tag,
html.dark .presets-tag-suggestion,
html.light .presets-tag-suggestion {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark .presets-chip-actions button:hover,
html.light .presets-chip-actions button:hover,
html.dark .presets-editor-back:hover,
html.light .presets-editor-back:hover,
html.dark .presets-header-action--from-prompt:hover,
html.light .presets-header-action--from-prompt:hover,
html.dark .presets-filter-tag:hover,
html.light .presets-filter-tag:hover,
html.dark .presets-tag-suggestion:hover,
html.light .presets-tag-suggestion:hover {
    background: var(--ui-hover) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark .presets-editor-header,
html.light .presets-editor-header,
html.dark .presets-filters,
html.light .presets-filters,
html.dark .presets-tags-row,
html.light .presets-tags-row {
    border-color: var(--ui-border) !important;
}

html.dark .presets-name-input,
html.light .presets-name-input,
html.dark .presets-prompt-input,
html.light .presets-prompt-input,
html.dark .presets-level-select,
html.light .presets-level-select,
html.dark .presets-media-select,
html.light .presets-media-select,
html.dark .presets-folder-select,
html.light .presets-folder-select,
html.dark .presets-tags-editor,
html.light .presets-tags-editor,
html.dark .presets-tag-input,
html.light .presets-tag-input {
    background: var(--ui-input-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-1) !important;
}

html.dark .presets-name-input::placeholder,
html.light .presets-name-input::placeholder,
html.dark .presets-prompt-input::placeholder,
html.light .presets-prompt-input::placeholder,
html.dark .presets-tag-input::placeholder,
html.light .presets-tag-input::placeholder {
    color: var(--ui-text-3) !important;
}

html.dark .presets-name-input:focus,
html.light .presets-name-input:focus,
html.dark .presets-prompt-input:focus,
html.light .presets-prompt-input:focus,
html.dark .presets-level-select:focus,
html.light .presets-level-select:focus,
html.dark .presets-media-select:focus,
html.light .presets-media-select:focus,
html.dark .presets-folder-select:focus,
html.light .presets-folder-select:focus,
html.dark .presets-tags-editor:focus-within,
html.light .presets-tags-editor:focus-within {
    border-color: var(--ui-focus-ring) !important;
    box-shadow: 0 0 0 2px var(--ui-active) !important;
}

html.dark .presets-scope-trigger,
html.light .presets-scope-trigger,
html.dark .presets-media-slider,
html.light .presets-media-slider,
html.dark .presets-scope-menu,
html.light .presets-scope-menu,
html.dark .presets-media-chip,
html.light .presets-media-chip,
html.dark .presets-scope-option,
html.light .presets-scope-option,
html.dark .presets-scope-checkbox,
html.light .presets-scope-checkbox {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark .presets-scope-trigger:hover,
html.light .presets-scope-trigger:hover,
html.dark .presets-scope-dropdown.is-open .presets-scope-trigger,
html.light .presets-scope-dropdown.is-open .presets-scope-trigger,
html.dark .presets-media-chip:hover,
html.light .presets-media-chip:hover,
html.dark .presets-scope-option:hover,
html.light .presets-scope-option:hover {
    background: var(--ui-hover) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark .presets-scope-option.is-active,
html.light .presets-scope-option.is-active,
html.dark .presets-media-chip.is-active,
html.light .presets-media-chip.is-active,
html.dark .presets-filter-tag.is-active,
html.light .presets-filter-tag.is-active {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

html.dark .presets-scope-trigger-icon,
html.light .presets-scope-trigger-icon,
html.dark .presets-scope-trigger-chevron,
html.light .presets-scope-trigger-chevron,
html.dark .presets-scope-option-icon,
html.light .presets-scope-option-icon,
html.dark .presets-editor-label,
html.light .presets-editor-label,
html.dark .presets-editor-scope-hint,
html.light .presets-editor-scope-hint,
html.dark .presets-editor-cover-hint,
html.light .presets-editor-cover-hint,
html.dark .presets-empty,
html.light .presets-empty,
html.dark .presets-chip-ref-more,
html.light .presets-chip-ref-more,
html.dark .presets-chip-usage,
html.light .presets-chip-usage,
html.dark .presets-chip-tag,
html.light .presets-chip-tag,
html.dark .presets-chip-tag-more,
html.light .presets-chip-tag-more {
    color: var(--ui-text-3) !important;
}

html.dark .presets-chip-usage,
html.light .presets-chip-usage,
html.dark .presets-chip.is-selected .presets-chip-usage,
html.light .presets-chip.is-selected .presets-chip-usage,
html.dark .presets-chip-tag,
html.light .presets-chip-tag {
    background: var(--ui-surface-2) !important;
}

html.dark .presets-tag-chip,
html.light .presets-tag-chip,
html.dark .presets-scope-trigger-count,
html.light .presets-scope-trigger-count {
    background: var(--ui-active) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--accent) !important;
}

/* Moodboard canvas: keep the grid background on the same tone scale. */
html.dark .moodboard-body .moodboard-canvas-wrap,
html.light .moodboard-body .moodboard-canvas-wrap {
    --moodboard-bg: var(--ui-bg);
    --moodboard-dot: var(--ui-border-strong);
    background: var(--moodboard-bg) !important;
    color: var(--ui-text-1);
}

html.dark .moodboard-body .moodboard-canvas--bg,
html.light .moodboard-body .moodboard-canvas--bg {
    background: var(--moodboard-bg) !important;
}

html.dark .moodboard-body .moodboard-empty-state,
html.light .moodboard-body .moodboard-empty-state {
    background: transparent !important;
}

html.dark .moodboard-body .moodboard-empty-state__inner,
html.light .moodboard-body .moodboard-empty-state__inner {
    color: var(--ui-text-1) !important;
}

html.dark .moodboard-body .moodboard-empty-state__text,
html.light .moodboard-body .moodboard-empty-state__text {
    color: var(--ui-text-2) !important;
}

/* Image/file viewer: make the fullscreen surface follow the tone sliders. */
html.dark #imageViewer,
html.light #imageViewer {
    background-color: var(--ui-bg) !important;
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer #imageContainer,
html.light #imageViewer #imageContainer,
html.dark #imageViewer #imageStage,
html.light #imageViewer #imageStage,
html.dark #imageViewer .image-viewer-stage,
html.light #imageViewer .image-viewer-stage {
    background: var(--ui-bg) !important;
}

html.dark #imageViewer #closeViewer,
html.light #imageViewer #closeViewer,
html.dark #imageViewer #prevImage,
html.light #imageViewer #prevImage,
html.dark #imageViewer #nextImage,
html.light #imageViewer #nextImage,
html.dark #imageViewer .image-viewer-counter,
html.light #imageViewer .image-viewer-counter,
html.dark #imageViewer .image-viewer-zoom-hud,
html.light #imageViewer .image-viewer-zoom-hud,
html.dark #imageViewer .image-viewer-mode-btn,
html.light #imageViewer .image-viewer-mode-btn,
html.dark #imageViewer .image-viewer-actual-exit,
html.light #imageViewer .image-viewer-actual-exit,
html.dark #imageViewer .image-viewer-selection-toolbar,
html.light #imageViewer .image-viewer-selection-toolbar,
html.dark #imageViewer .image-viewer-draw-btn,
html.light #imageViewer .image-viewer-draw-btn,
html.dark #imageViewer .image-viewer-ref-overlay-toggle,
html.light #imageViewer .image-viewer-ref-overlay-toggle {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer #closeViewer:hover,
html.light #imageViewer #closeViewer:hover,
html.dark #imageViewer #prevImage:hover,
html.light #imageViewer #prevImage:hover,
html.dark #imageViewer #nextImage:hover,
html.light #imageViewer #nextImage:hover,
html.dark #imageViewer .image-viewer-zoom-hud__btn:hover:not(:disabled),
html.light #imageViewer .image-viewer-zoom-hud__btn:hover:not(:disabled),
html.dark #imageViewer .image-viewer-mode-btn:hover,
html.light #imageViewer .image-viewer-mode-btn:hover,
html.dark #imageViewer .image-viewer-actual-exit:hover,
html.light #imageViewer .image-viewer-actual-exit:hover,
html.dark #imageViewer .image-viewer-selection-step:hover:not(:disabled),
html.light #imageViewer .image-viewer-selection-step:hover:not(:disabled),
html.dark #imageViewer .image-viewer-selection-clear:hover:not(:disabled),
html.light #imageViewer .image-viewer-selection-clear:hover:not(:disabled),
html.dark #imageViewer .image-viewer-draw-btn:hover,
html.light #imageViewer .image-viewer-draw-btn:hover,
html.dark #imageViewer .image-viewer-draw-btn.is-active,
html.light #imageViewer .image-viewer-draw-btn.is-active,
html.dark #imageViewer .image-viewer-ref-overlay-toggle:hover,
html.light #imageViewer .image-viewer-ref-overlay-toggle:hover,
html.dark #imageViewer .image-viewer-ref-overlay-toggle.is-active,
html.light #imageViewer .image-viewer-ref-overlay-toggle.is-active {
    background: var(--ui-hover) !important;
    border-color: var(--accent-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer #closeViewer i,
html.light #imageViewer #closeViewer i,
html.dark #imageViewer #prevImage i,
html.light #imageViewer #prevImage i,
html.dark #imageViewer #nextImage i,
html.light #imageViewer #nextImage i {
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer .image-viewer-zoom-hud__btn,
html.light #imageViewer .image-viewer-zoom-hud__btn,
html.dark #imageViewer .image-viewer-selection-step,
html.light #imageViewer .image-viewer-selection-step,
html.dark #imageViewer .image-viewer-selection-clear,
html.light #imageViewer .image-viewer-selection-clear,
html.dark #imageViewer .image-viewer-draw-popover__clear,
html.light #imageViewer .image-viewer-draw-popover__clear,
html.dark #imageViewer .image-viewer-file-btn,
html.light #imageViewer .image-viewer-file-btn,
html.dark #imageViewer .image-viewer-ref-overlay-blend,
html.light #imageViewer .image-viewer-ref-overlay-blend,
html.dark #imageViewer .viewer-card-panel__close,
html.light #imageViewer .viewer-card-panel__close,
html.dark #imageViewer .viewer-card-panel__copy,
html.light #imageViewer .viewer-card-panel__copy,
html.dark #imageViewer .viewer-card-panel__btn--secondary,
html.light #imageViewer .viewer-card-panel__btn--secondary {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer .image-viewer-file-btn:hover,
html.light #imageViewer .image-viewer-file-btn:hover,
html.dark #imageViewer .image-viewer-draw-popover__clear:hover,
html.light #imageViewer .image-viewer-draw-popover__clear:hover,
html.dark #imageViewer .viewer-card-panel__close:hover,
html.light #imageViewer .viewer-card-panel__close:hover,
html.dark #imageViewer .viewer-card-panel__copy:hover,
html.light #imageViewer .viewer-card-panel__copy:hover,
html.dark #imageViewer .viewer-card-panel__btn--secondary:hover:not(:disabled),
html.light #imageViewer .viewer-card-panel__btn--secondary:hover:not(:disabled) {
    background: var(--ui-hover) !important;
    border-color: var(--accent-border-strong) !important;
}

html.dark #imageViewer .viewer-info-panel,
html.light #imageViewer .viewer-info-panel,
html.dark #imageViewer .viewer-card-panel,
html.light #imageViewer .viewer-card-panel,
html.dark #imageViewer .image-viewer-text-panel__card,
html.light #imageViewer .image-viewer-text-panel__card,
html.dark #imageViewer .image-viewer-draw-popover,
html.light #imageViewer .image-viewer-draw-popover,
html.dark #imageViewer .image-viewer-ref-overlay-popover,
html.light #imageViewer .image-viewer-ref-overlay-popover {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer .viewer-card-panel__actions,
html.light #imageViewer .viewer-card-panel__actions {
    background: var(--ui-panel-bg) !important;
    border-color: var(--ui-border) !important;
}

html.dark #imageViewer .viewer-card-panel__header,
html.light #imageViewer .viewer-card-panel__header,
html.dark #imageViewer .viewer-card-panel__row,
html.light #imageViewer .viewer-card-panel__row,
html.dark #imageViewer .viewer-card-panel__prompt,
html.light #imageViewer .viewer-card-panel__prompt,
html.dark #imageViewer .viewer-card-panel__source,
html.light #imageViewer .viewer-card-panel__source,
html.dark #imageViewer .viewer-card-panel__ai-description,
html.light #imageViewer .viewer-card-panel__ai-description,
html.dark #imageViewer .viewer-card-panel__meta-value,
html.light #imageViewer .viewer-card-panel__meta-value {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
}

html.dark #imageViewer .viewer-card-panel__author-login,
html.light #imageViewer .viewer-card-panel__author-login,
html.dark #imageViewer .viewer-card-panel__path-link,
html.light #imageViewer .viewer-card-panel__path-link,
html.dark #imageViewer .viewer-card-panel__row-value,
html.light #imageViewer .viewer-card-panel__row-value,
html.dark #imageViewer .viewer-card-panel__prompt-text,
html.light #imageViewer .viewer-card-panel__prompt-text,
html.dark #imageViewer .viewer-card-panel__ai-body,
html.light #imageViewer .viewer-card-panel__ai-body,
html.dark #imageViewer .viewer-card-panel__ai-lead,
html.light #imageViewer .viewer-card-panel__ai-lead,
html.dark #imageViewer .image-viewer-text-panel__title,
html.light #imageViewer .image-viewer-text-panel__title,
html.dark #imageViewer .image-viewer-text-panel__body,
html.light #imageViewer .image-viewer-text-panel__body,
html.dark #imageViewer .viewer-info-panel__value,
html.light #imageViewer .viewer-info-panel__value,
html.dark #imageViewer .file-placeholder--viewer .file-placeholder__name,
html.light #imageViewer .file-placeholder--viewer .file-placeholder__name,
html.dark #imageViewer .file-placeholder--viewer .file-placeholder__ext,
html.light #imageViewer .file-placeholder--viewer .file-placeholder__ext {
    color: var(--ui-text-1) !important;
}

html.dark #imageViewer .viewer-card-panel__section-title,
html.light #imageViewer .viewer-card-panel__section-title,
html.dark #imageViewer .viewer-card-panel__section-title--sub,
html.light #imageViewer .viewer-card-panel__section-title--sub,
html.dark #imageViewer .viewer-card-panel__row-label,
html.light #imageViewer .viewer-card-panel__row-label,
html.dark #imageViewer .viewer-card-panel__meta-label,
html.light #imageViewer .viewer-card-panel__meta-label,
html.dark #imageViewer .viewer-card-panel__ai-muted,
html.light #imageViewer .viewer-card-panel__ai-muted,
html.dark #imageViewer .viewer-info-panel__label,
html.light #imageViewer .viewer-info-panel__label,
html.dark #imageViewer .viewer-info-panel__sep,
html.light #imageViewer .viewer-info-panel__sep,
html.dark #imageViewer .image-viewer-draw-popover__field,
html.light #imageViewer .image-viewer-draw-popover__field,
html.dark #imageViewer .image-viewer-draw-popover__range span,
html.light #imageViewer .image-viewer-draw-popover__range span,
html.dark #imageViewer .image-viewer-draw-popover__color span,
html.light #imageViewer .image-viewer-draw-popover__color span,
html.dark #imageViewer .image-viewer-ref-overlay-label,
html.light #imageViewer .image-viewer-ref-overlay-label,
html.dark #imageViewer .image-viewer-ref-overlay-value,
html.light #imageViewer .image-viewer-ref-overlay-value {
    color: var(--ui-text-2) !important;
}

html.dark #imageViewer .viewer-info-panel__badge,
html.light #imageViewer .viewer-info-panel__badge,
html.dark #imageViewer .viewer-card-panel__space-badge,
html.light #imageViewer .viewer-card-panel__space-badge,
html.dark #imageViewer .viewer-card-panel__ai-chips span,
html.light #imageViewer .viewer-card-panel__ai-chips span {
    background: var(--ui-active) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text-2) !important;
}

html.dark #imageViewer .viewer-card-panel__prompt:not(.is-expanded)::after,
html.light #imageViewer .viewer-card-panel__prompt:not(.is-expanded)::after {
    background: linear-gradient(to bottom, transparent, var(--ui-surface-2)) !important;
}

html.dark #imageViewer .image-viewer-loader,
html.light #imageViewer .image-viewer-loader {
    background: var(--ui-panel-elevated-bg) !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark #imageViewer .image-viewer-loader__spinner,
html.light #imageViewer .image-viewer-loader__spinner {
    border-color: var(--ui-border-strong) !important;
    border-top-color: var(--accent) !important;
    border-right-color: var(--accent) !important;
}

html.dark .feed-filter-bar,
html.light .feed-filter-bar {
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text-2) !important;
}

html.dark body.is-feed-mode .feed-filter-bar--inline,
html.light body.is-feed-mode .feed-filter-bar--inline,
html.dark body.is-project-feed .feed-filter-bar--inline,
html.light body.is-project-feed .feed-filter-bar--inline {
    padding: 3px 8px !important;
    background: var(--ui-panel-elevated-bg) !important;
    border-color: var(--ui-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow) !important;
}

html.dark .feed-filter-bar__title,
html.light .feed-filter-bar__title,
html.dark .feed-filter-bar__title-project,
html.light .feed-filter-bar__title-project {
    color: var(--ui-text-1) !important;
}

html.dark .feed-filter-bar__title-project,
html.light .feed-filter-bar__title-project {
    background: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-border) !important;
}

html.dark .feed-filter-bar__field,
html.light .feed-filter-bar__field,
html.dark .feed-filter-bar__hint,
html.light .feed-filter-bar__hint {
    color: var(--ui-text-2) !important;
}

html.dark .feed-filter-bar__separator,
html.light .feed-filter-bar__separator {
    background: var(--ui-border-strong) !important;
}

html.dark .feed-filter-bar__select,
html.light .feed-filter-bar__select {
    background-color: var(--ui-input-bg) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text-1) !important;
}

html.dark .feed-filter-bar__select {
    color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23d7dce8' d='M0 0l5 6 5-6z'/></svg>") !important;
}

html.light .feed-filter-bar__select {
    color-scheme: light;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23545b6b' d='M0 0l5 6 5-6z'/></svg>") !important;
}

html.dark .feed-filter-bar__select:hover,
html.light .feed-filter-bar__select:hover,
html.dark .feed-filter-bar__select:focus,
html.light .feed-filter-bar__select:focus {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--accent-border-strong) !important;
    box-shadow: 0 0 0 2px var(--ui-focus-ring) !important;
}

html.dark .feed-filter-bar__select option,
html.light .feed-filter-bar__select option {
    background: var(--ui-panel-elevated-bg) !important;
    color: var(--ui-text-1) !important;
}

html.dark .feed-filter-bar__select option:checked,
html.light .feed-filter-bar__select option:checked,
html.dark .feed-filter-bar__select option:hover,
html.light .feed-filter-bar__select option:hover {
    background: var(--ui-active) !important;
    color: var(--ui-text-1) !important;
}

html.dark body.is-feed-mode .feed-filter-bar__hint,
html.light body.is-feed-mode .feed-filter-bar__hint,
html.dark body.is-project-feed .feed-filter-bar__hint,
html.light body.is-project-feed .feed-filter-bar__hint {
    background: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-border) !important;
}

html.no-borders .app-rail,
html.no-borders .accordion-sidebar,
html.no-borders .rail-popup,
html.no-borders .bg-panelbg,
html.no-borders .modal,
html.no-borders .modal-content,
html.no-borders #gallery-grid > div,
html.no-borders .viewer-info-panel,
html.no-borders .feed-filter-bar {
    background-image: var(--soft-panel-gradient);
}