:root {
    --wsx-bg-page: var(--theme-page, var(--theme-bg-page, #eef5fb));
    --wsx-bg-panel: color-mix(in srgb, var(--theme-surface-inset, var(--theme-surface-soft, #e9f1f8)) 88%, #ffffff 12%);
    --wsx-bg-panel-2: color-mix(in srgb, var(--theme-surface-base, var(--theme-surface, #fbfdff)) 88%, #ffffff 12%);
    --wsx-border: var(--theme-border-base, var(--theme-border, #8ca8bd));
    --wsx-border-strong: var(--theme-border-emphasis, var(--theme-border-strong, #4f7fa5));
    --wsx-text: var(--theme-text-primary, var(--theme-text, #102538));
    --wsx-text-soft: var(--theme-text-secondary, var(--theme-text-soft, #263f55));
    --wsx-muted: var(--theme-text-muted, var(--theme-muted, #405a70));
    --wsx-muted-strong: color-mix(in srgb, var(--wsx-muted) 82%, var(--wsx-text) 18%);
    --wsx-accent: var(--theme-accent-primary, var(--theme-accent, #0b6fae));
    --wsx-shadow: var(--theme-shadow-card, 0 10px 30px rgba(30, 53, 83, 0.12));
    --wsx-radius: 10px;
    --wsx-motion-fast: 120ms;
    --wsx-motion-base: 180ms;
    --wsx-motion-slow: 220ms;
}

body {
    color: var(--wsx-text) !important;
    background:
        radial-gradient(1100px 520px at 88% -15%, color-mix(in srgb, var(--wsx-accent) 16%, transparent), transparent 60%),
        radial-gradient(900px 500px at 0% 0%, color-mix(in srgb, var(--wsx-accent) 10%, transparent), transparent 64%),
        linear-gradient(155deg, var(--wsx-bg-page), color-mix(in srgb, var(--wsx-bg-page) 70%, var(--theme-bg-page-2, #dceaf8) 30%) 58%, var(--theme-bg-page-2, #dceaf8));
}

.navbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%), var(--wsx-bg-panel)) !important;
    border-bottom: 1px solid var(--wsx-border) !important;
    box-shadow: 0 8px 18px rgba(30, 53, 83, 0.1) !important;
    position: relative !important;
    z-index: 1030 !important;
    overflow: visible !important;
}

.navbar .btn,
.navbar .dropdown-menu {
    border-color: var(--wsx-border) !important;
}

.navbar .btn-group,
.navbar .dropdown {
    position: relative;
    overflow: visible !important;
}

.navbar .dropdown-menu {
    z-index: 3400 !important;
    margin-top: 4px !important;
}

.nav-explorer-group {
    z-index: 3450;
}

.nav-explorer-group .dropdown-menu {
    z-index: 3460 !important;
}

.ws-nav-btn {
    min-height: 27px !important;
    padding-top: 0.16rem !important;
    padding-bottom: 0.16rem !important;
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
    font-size: 12px !important;
    line-height: 1.08 !important;
}

.ws-nav-split-btn {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

.ws-fast-run-btn {
    padding-left: 0.92rem !important;
    padding-right: 0.92rem !important;
    border: 0 !important;
    color: #212529 !important;
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%) !important;
    box-shadow: 0 2px 8px rgba(180, 102, 4, 0.34) !important;
    font-weight: 700 !important;
    transition: transform var(--motion-fast, 120ms) var(--motion-ease-out, ease), box-shadow var(--motion-fast, 120ms) ease !important;
}

.ws-fast-run-btn:hover,
.ws-fast-run-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(180, 102, 4, 0.42) !important;
}

.ws-fast-run-btn:active {
    transform: translateY(0) scale(.98);
}

.ws-mobile-toolbar-toggle {
    display: none;
}

@media (max-width: 1240px) {
    .navbar {
        padding-inline: 8px !important;
        overflow: visible !important;
    }

    .ws-mobile-toolbar-toggle {
        min-height: 30px;
        max-width: calc(100vw - 16px);
        padding: 4px 10px;
        border: 1px solid var(--wsx-border) !important;
        border-radius: 8px;
        color: var(--wsx-text);
        background: var(--wsx-bg-panel-2);
        font-size: 12px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #ws-navbar-content {
        position: fixed;
        z-index: 3550;
        top: 47px;
        right: 8px;
        width: min(380px, calc(100vw - 16px));
        max-height: calc(100dvh - 102px);
        margin: 0 !important;
        padding: 12px;
        border: 1px solid var(--wsx-border);
        border-radius: 14px;
        overflow: auto;
        overscroll-behavior: contain;
        color: var(--wsx-text);
        background: color-mix(in srgb, var(--wsx-bg-panel-2) 97%, transparent);
        box-shadow: 0 22px 60px rgba(14, 44, 68, .28) !important;
        display: none !important;
        align-items: stretch !important;
        flex-direction: column;
        gap: 10px;
    }

    body.ws-workspace-nav-open #ws-navbar-content {
        display: flex !important;
    }

    #ws-navbar-content > .navbar-brand {
        margin: 0 !important;
        padding: 0 2px 8px;
        border-bottom: 1px solid var(--wsx-border);
        font-size: 12px;
        white-space: normal;
    }

    #ws-navbar-content > .btn-group {
        width: 100%;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 5px;
    }

    #ws-navbar-content > .btn-group > .btn {
        width: 100%;
        min-width: 0;
        border-radius: 8px !important;
    }

    #ws-navbar-content > .d-flex {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch !important;
        gap: 7px;
    }

    #ws-navbar-content > .d-flex > .btn,
    #ws-navbar-content > .d-flex > .btn-group,
    #ws-navbar-content > .d-flex > .ws-theme-inline {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    #ws-navbar-content > .d-flex > .btn {
        justify-content: center;
    }

    #ws-navbar-content .nav-collab-group,
    #ws-navbar-content .nav-explorer-group,
    #ws-navbar-content .nav-ai-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    #ws-navbar-content .nav-collab-group > .btn:first-child,
    #ws-navbar-content .nav-explorer-group > .btn:first-child,
    #ws-navbar-content .nav-ai-group > .btn:first-child {
        min-width: 0;
        justify-content: center;
        overflow: hidden;
    }

    #ws-navbar-content .dropdown-menu.show {
        position: static !important;
        inset: auto !important;
        grid-column: 1 / -1;
        width: 100%;
        max-height: 250px;
        margin-top: 5px !important;
        overflow: auto;
        transform: none !important;
    }

    #ws-navbar-content .ws-theme-inline {
        padding: 6px 8px;
        border: 1px solid var(--wsx-border);
        border-radius: 8px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    #ws-theme-select-workspace,
    #ws-locale-select-workspace {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

}

@media (max-width: 900px) {
    .sidebar:not(.collapsed) {
        width: min(210px, 42vw);
        min-width: 132px;
    }
}

@media (max-width: 460px) {
    #ws-navbar-content > .d-flex {
        grid-template-columns: 1fr;
    }

    .sidebar:not(.collapsed) {
        width: min(140px, 36vw);
        min-width: 112px;
    }

    .ws-mobile-toolbar-toggle {
        min-height: 40px;
    }

    .sidebar .task-search-input,
    .sidebar select {
        min-height: 32px;
    }

    .sidebar .task-tool-btn,
    .sidebar-header button {
        min-width: 32px;
        min-height: 32px;
    }

    .task-item,
    .task-folder-header {
        min-height: 36px;
    }
}

.main-container,
.editor-area,
.sidebar,
#terminal-panel,
.status-bar,
#task-stats-panel,
#term-col-left,
#term-col-center,
#term-col-right {
    border-color: var(--wsx-border) !important;
}

.sidebar,
.editor-area,
#terminal-panel {
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
}

.sidebar-header,
.task-toolbar,
.terminal-header,
.status-bar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%), var(--wsx-bg-panel-2)) !important;
}

.file-tree,
.grid-container,
#task-list-container,
#task-view-container,
#task-output-preview {
    background: color-mix(in srgb, var(--wsx-bg-panel) 92%, #ffffff 8%) !important;
}

.dashboard-watermark,
.text-muted {
    color: var(--wsx-muted-strong) !important;
}

.task-item,
.task-folder-header,
.grid-item,
.file-item,
.ctx-item {
    transition:
        background var(--wsx-motion-base) ease,
        border-color var(--wsx-motion-base) ease,
        color var(--wsx-motion-base) ease,
        transform var(--wsx-motion-fast) ease;
}

.task-item:hover,
.task-folder-header:hover,
.ctx-item:hover {
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-panel-2) 86%) !important;
}

.task-item.active {
    background: color-mix(in srgb, var(--wsx-accent) 22%, var(--wsx-bg-panel-2) 78%) !important;
    border-left-color: var(--wsx-accent) !important;
}

.task-search-input,
.form-control,
.form-select,
textarea,
input[type="text"],
input[type="number"],
select {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%) !important;
    color: var(--wsx-text) !important;
    border: 1px solid var(--wsx-border) !important;
    border-radius: 8px !important;
}

.task-search-input:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus {
    border-color: var(--wsx-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wsx-accent) 28%, transparent) !important;
}

.btn-dark,
.btn-outline-secondary,
.task-tool-btn {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%) !important;
    color: var(--wsx-text) !important;
    border: 1px solid var(--wsx-border) !important;
}

.btn-dark:hover,
.btn-outline-secondary:hover,
.task-tool-btn:hover {
    border-color: var(--wsx-border-strong) !important;
    background: color-mix(in srgb, var(--wsx-accent) 12%, var(--wsx-bg-panel-2) 88%) !important;
}

.nav-tabs-dark .nav-link {
    color: var(--wsx-muted) !important;
    border-color: transparent !important;
}

.nav-tabs-dark .nav-link.active {
    color: var(--wsx-text) !important;
    border-color: var(--wsx-border) !important;
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-panel) 86%) !important;
}

.ctx-menu {
    border: 1px solid var(--wsx-border) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel) 95%, #ffffff 5%) !important;
    box-shadow: var(--wsx-shadow) !important;
    border-radius: var(--wsx-radius) !important;
    overflow: hidden;
}

.ctx-item {
    color: var(--wsx-text) !important;
}

.ctx-divider {
    border-top: 1px solid var(--wsx-border) !important;
}

.status-bar {
    color: var(--wsx-text) !important;
    border-top: 1px solid var(--wsx-border) !important;
}

.status-divider {
    border-left: 1px solid var(--wsx-border) !important;
}

/* Workspace editor pane + tabs (cover legacy dark hardcodes) */
.content-body,
.editor-pane,
.editor-pane .pane-content {
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
}

.editor-pane {
    border-right: 1px solid var(--wsx-border) !important;
}

.editor-pane.active-pane {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 93%, #ffffff 7%) !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wsx-accent) 65%, #ffffff 35%) !important;
}

.editor-pane.active-pane .pane-header-tabs {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 95%, #ffffff 5%), var(--wsx-bg-panel)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--wsx-accent) 48%, var(--wsx-border) 52%) !important;
}

.editor-pane:not(.active-pane) .pane-header-tabs {
    opacity: 1 !important;
    background: color-mix(in srgb, var(--wsx-bg-panel) 95%, #ffffff 5%) !important;
    border-bottom: 1px solid var(--wsx-border) !important;
}

.pane-header-tabs {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%), var(--wsx-bg-panel-2)) !important;
    border-bottom: 1px solid var(--wsx-border) !important;
}

.tabs-header {
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%), var(--wsx-bg-panel-2)) !important;
    border-bottom: 1px solid var(--wsx-border) !important;
}

.tab-item {
    color: var(--wsx-text-soft) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel) 93%, #ffffff 7%) !important;
    border-right: 1px solid var(--wsx-border) !important;
}

.tab-item.active {
    color: var(--wsx-text) !important;
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-panel-2) 86%) !important;
    border-top-color: var(--wsx-accent) !important;
}

.editor-tab {
    color: var(--wsx-text-soft) !important;
    border-right: 1px solid color-mix(in srgb, var(--wsx-border) 78%, var(--wsx-bg-panel-2) 22%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wsx-bg-panel-2) 88%, #ffffff 12%),
        color-mix(in srgb, var(--wsx-bg-panel) 90%, #ffffff 10%)
    ) !important;
}

.editor-tab.active {
    color: var(--wsx-text) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wsx-accent) 18%, var(--wsx-bg-panel-2) 82%),
        color-mix(in srgb, var(--wsx-accent) 9%, var(--wsx-bg-panel) 91%)
    ) !important;
    border-top-color: var(--wsx-accent) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wsx-accent) 38%, #ffffff 62%) !important;
}

.editor-tab:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wsx-accent) 12%, var(--wsx-bg-panel-2) 88%),
        color-mix(in srgb, var(--wsx-accent) 8%, var(--wsx-bg-panel) 92%)
    ) !important;
    color: var(--wsx-text) !important;
}

.editor-tab .tab-close {
    color: var(--wsx-muted-strong) !important;
}

.editor-tab .tab-close:hover {
    background: color-mix(in srgb, var(--wsx-accent) 20%, transparent) !important;
    color: var(--wsx-text) !important;
}

.editor-tab .tab-title {
    color: var(--wsx-text) !important;
    font-weight: 600 !important;
}

.tab-hover-panel {
    background: color-mix(in srgb, var(--wsx-bg-panel) 96%, #ffffff 4%) !important;
    border: 1px solid var(--wsx-border) !important;
    box-shadow: var(--wsx-shadow) !important;
}

.tab-hover-panel .tab-hover-name {
    color: var(--wsx-text) !important;
    font-weight: 600 !important;
}

/* Sidebar + tree readability */
.tree-item {
    color: var(--wsx-text-soft) !important;
}

.tree-item:hover {
    color: var(--wsx-text) !important;
    background: color-mix(in srgb, var(--wsx-accent) 13%, var(--wsx-bg-panel-2) 87%) !important;
}

.tree-item.active,
.tree-item.selected {
    color: var(--wsx-text) !important;
    background: color-mix(in srgb, var(--wsx-accent) 22%, var(--wsx-bg-panel-2) 78%) !important;
    border-left-color: var(--wsx-accent) !important;
}

/* Inline black style overrides in template */
#ai-dock-container,
#collab-dock-container,
#collab-dock-frame,
#preview-container-0,
#preview-container-1,
#dashboard-view .breadcrumb-nav,
#dashboard-view-1 .breadcrumb-nav,
#system-log-view,
#term-col-right {
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
    color: var(--wsx-text-soft) !important;
}

#preview-container-0,
#preview-container-1,
#dashboard-view,
#dashboard-view-1,
#file-grid,
#file-grid-1 {
    color: var(--wsx-text-soft) !important;
}

/* Terminal/task center contrast pass */
#terminal-panel {
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
    border-top: 1px solid var(--wsx-border) !important;
}

.terminal-header {
    color: var(--wsx-text) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%), var(--wsx-bg-panel-2)) !important;
}

.terminal-header:hover {
    background: color-mix(in srgb, var(--wsx-accent) 10%, var(--wsx-bg-panel-2) 90%) !important;
}

#term-col-left,
#term-col-center,
#term-col-right {
    background: color-mix(in srgb, var(--wsx-bg-panel) 93%, #ffffff 7%) !important;
    border-right: 1px solid var(--wsx-border) !important;
}

#term-col-left .bg-dark,
#term-col-center .bg-dark,
#term-col-right .bg-dark {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 94%, #ffffff 6%) !important;
}

#term-col-left .border-secondary,
#term-col-center .border-secondary,
#term-col-right .border-secondary {
    border-color: var(--wsx-border) !important;
}

#task-list-container {
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
}

.task-item {
    color: var(--wsx-text-soft) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--wsx-border) 72%, transparent) !important;
}

.task-item:hover {
    color: var(--wsx-text) !important;
}

.task-item.active {
    color: var(--wsx-text) !important;
}

.task-folder-header {
    color: var(--wsx-muted-strong) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 95%, #ffffff 5%) !important;
    border-bottom: 1px solid var(--wsx-border) !important;
}

.task-folder-header:hover {
    color: var(--wsx-text) !important;
}

.btn-icon {
    color: var(--wsx-muted-strong) !important;
}

.btn-icon:hover,
.btn-icon.active {
    color: var(--wsx-text) !important;
    background: color-mix(in srgb, var(--wsx-accent) 14%, transparent) !important;
}

#task-stats-panel {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 95%, #ffffff 5%) !important;
    border-color: var(--wsx-border) !important;
}

#selected-task-info {
    color: var(--wsx-text-soft) !important;
    border-bottom-color: var(--wsx-border) !important;
}

#system-log-view .text-success {
    color: color-mix(in srgb, var(--theme-success, #3f9d68) 78%, #1f6e45 22%) !important;
}

#task-stats-panel span[style*="color:#aaa"],
#task-stats-panel span[style*="color: #aaa"],
#terminal-panel span[style*="color:#aaa"],
#terminal-panel span[style*="color: #aaa"],
#terminal-panel div[style*="color:#ccc"],
#terminal-panel div[style*="color: #ccc"] {
    color: var(--wsx-muted-strong) !important;
}

/* Text contrast tuning in light mode and mixed utility classes */
.small.text-muted,
.form-text,
.dropdown-item-text.text-muted,
.status-bar .text-white-50,
#terminal-panel .text-white-50 {
    color: var(--wsx-muted-strong) !important;
}

.text-light,
.text-white,
.status-bar b,
#terminal-panel b,
.task-item b {
    color: var(--wsx-text) !important;
}

.dropdown-menu-dark {
    background: color-mix(in srgb, var(--wsx-bg-panel) 95%, #ffffff 5%) !important;
    border: 1px solid var(--wsx-border) !important;
}

.dropdown-menu-dark .dropdown-item {
    color: var(--wsx-text-soft) !important;
}

.nav-explorer-group .dropdown-item,
.nav-explorer-group .dropdown-item-text {
    color: var(--wsx-text) !important;
}

.dropdown-menu-dark .dropdown-item:hover,
.dropdown-menu-dark .dropdown-item:focus,
.dropdown-menu-dark .dropdown-item.active {
    color: var(--wsx-text) !important;
    background: color-mix(in srgb, var(--wsx-accent) 17%, var(--wsx-bg-panel-2) 83%) !important;
}

.dropdown-menu-dark .dropdown-divider {
    border-color: var(--wsx-border) !important;
}

#drop-zone-overlay {
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-page) 86%) !important;
    color: var(--wsx-text) !important;
}

.badge.bg-secondary {
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 80%, var(--wsx-accent) 20%) !important;
    color: var(--wsx-text) !important;
}

.badge.bg-warning {
    background: color-mix(in srgb, var(--theme-warning, #b27b2f) 30%, #fef4dc 70%) !important;
    color: #6e4607 !important;
}

.badge.bg-danger {
    background: color-mix(in srgb, var(--theme-danger, #bb4d4d) 26%, #ffe7e7 74%) !important;
    color: #7d2c2c !important;
}

.badge.bg-success {
    background: color-mix(in srgb, var(--theme-success, #3f9d68) 25%, #e6faef 75%) !important;
    color: #1f6e45 !important;
}

/* Legacy workspace theme surfaces. Keep foreground/background paired;
   the shared theme remains responsible for palette and cross-module settings. */
body[data-theme] .modal :is(.modal-content, .tab-content, .nav-tabs-dark,
    [style*="background: #252526"], [style*="background:#252526"],
    [style*="background:#1f1f1f"], [style*="background:#111"]) {
    background: var(--theme-surface-base) !important;
    color: var(--theme-text-primary) !important;
}

body[data-theme] .modal :is(.text-muted, .text-white-50, .form-text) {
    color: var(--theme-text-secondary) !important;
}

body[data-theme] .modal :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--theme-surface-base) !important;
    color: var(--theme-text-primary) !important;
    border-color: var(--theme-border-emphasis) !important;
}

body[data-theme] .modal :is(input, textarea)::placeholder {
    color: var(--theme-text-muted) !important;
    opacity: 1;
}

body[data-theme] .modal .form-check-input {
    border-color: var(--theme-border-emphasis) !important;
    background-image: var(--bs-form-check-bg-image, none) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

body[data-theme] .modal .form-switch .form-check-input {
    background-image: var(--bs-form-switch-bg) !important;
    background-position: left center !important;
}

body[data-theme] .modal .form-switch .form-check-input:checked {
    background-position: right center !important;
}

body[data-theme] #modal-docker .form-select:not([multiple]),
body[data-theme] .modal .form-select:not([multiple]) {
    background-image: var(--bs-form-select-bg-img) !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
}

body[data-theme] .modal .form-check-input:checked {
    background-color: var(--theme-accent-primary) !important;
    border-color: var(--theme-accent-primary) !important;
}

body[data-theme] .modal .nav-tabs-dark .nav-link {
    color: var(--theme-text-secondary) !important;
}

body[data-theme] .modal .nav-tabs-dark .nav-link.active,
body[data-theme] .modal .btn-check:checked + .btn {
    color: #fff !important;
    background: var(--theme-accent-primary) !important;
    border-color: var(--theme-accent-primary) !important;
}

body[data-theme] .modal .btn-close {
    filter: none !important;
    opacity: 1;
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat !important;
}

body[data-theme] #modal-docker #docker-preview,
body[data-theme] #modal-docker #docker-reqs-content,
body[data-theme] #modal-docker #docker-ignore-content,
body[data-theme] #modal-docker #docker-env-vars {
    background: var(--theme-code-bg) !important;
    color: var(--theme-code-text) !important;
    caret-color: var(--theme-code-text);
}

body[data-theme] .modal :is(input, select, textarea, button, a):focus-visible {
    outline: 2px solid var(--theme-accent-primary);
    outline-offset: 2px;
}

body[data-theme] #status-msg [style*="#74ff61"] {
    color: var(--theme-success-strong) !important;
}

body[data-theme] #status-msg [style*="#e8bdff"] {
    color: var(--theme-text-secondary) !important;
}

@media (max-width: 767px) {
    body:not(.docker-builder-page) #modal-docker .modal-body {
        overflow: auto;
        max-height: calc(100dvh - 140px);
    }

    body:not(.docker-builder-page) #modal-docker .modal-body > .d-flex {
        flex-direction: column;
        height: auto !important;
    }

    body:not(.docker-builder-page) #modal-docker .modal-body > .d-flex > [class*="col-md-"] {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    body:not(.docker-builder-page) #modal-docker #docker-preview {
        min-height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}