:root {
    --wsx-bg-page: var(--theme-bg-page, #e8f2fb);
    --wsx-bg-panel: color-mix(in srgb, var(--theme-surface-soft, #e6f1fe) 88%, #ffffff 12%);
    --wsx-bg-panel-2: color-mix(in srgb, var(--theme-surface, #f4f9ff) 88%, #ffffff 12%);
    --wsx-border: var(--theme-border, #a9c5de);
    --wsx-border-strong: var(--theme-border-strong, #86b0d3);
    --wsx-text: var(--theme-text, #1c3045);
    --wsx-text-soft: var(--theme-text-soft, #2a435f);
    --wsx-muted: var(--theme-muted, #4f6985);
    --wsx-muted-strong: color-mix(in srgb, var(--wsx-muted) 82%, var(--wsx-text) 18%);
    --wsx-accent: var(--theme-accent, #2f90da);
    --wsx-shadow: 0 10px 30px rgba(30, 53, 83, 0.12);
    --wsx-radius: 10px;
    --wsx-motion-fast: 120ms;
    --wsx-motion-base: 180ms;
    --wsx-motion-slow: 220ms;
}

:root[data-theme="glasswave"] {
    --wsx-text: #162b40;
    --wsx-text-soft: #23415e;
    --wsx-muted: #45607c;
    --wsx-muted-strong: #3c546d;
}

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: 3200 !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;
}

.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;
}

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