/*
 * dark-mode.css  v2
 * ----------------------------------------------------------
 * Component overrides for [data-theme="dark"].
 * All values reference tokens from themes.css — never hardcode.
 *
 * Adding a new theme (sepia, high-contrast, etc.):
 *   1. Define token overrides in themes.css.
 *   2. Duplicate the [data-theme="dark"] selectors here with
 *      your theme's data-theme value.  Token names stay identical.
 * ----------------------------------------------------------
 */


/* ══════════════════════════════════════════════════════════════
   1. PAGE CHROME
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] body {
    background: var(--t-page-bg);
    color: var(--t-page-fg);
}

/* Default border-color fallback — targets elements that rely on the
   global * { border-color: #e2e8f0 } set in header.css */
[data-theme="dark"] *:not(svg):not(path):not(g):not(circle):not(line):not(text) {
    border-color: var(--t-page-border);
}


/* ══════════════════════════════════════════════════════════════
   2. NAVBAR
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .chameleon-navbar {
    background-color: var(--t-nav-bg);
    border-bottom-color: var(--t-nav-border);
    color: var(--t-nav-fg);
}

[data-theme="dark"] .chameleon-navbar__tool-row {
    background: var(--t-nav-tool-bg);
    border-top-color: var(--t-nav-tool-border);
}

[data-theme="dark"] .chameleon-navbar__brand {
    color: var(--t-nav-brand-fg);
}

[data-theme="dark"] .chameleon-navbar__site-link,
[data-theme="dark"] .chameleon-navbar__tool-button,
[data-theme="dark"] .chameleon-navbar__icon-button {
    background: var(--t-nav-btn-bg);
    border-color: var(--t-nav-btn-border);
    color: var(--t-nav-link-fg);
}

[data-theme="dark"] .chameleon-navbar__tool-button:hover,
[data-theme="dark"] .chameleon-navbar__icon-button:hover {
    background: var(--t-nav-btn-hover-bg);
    border-color: var(--t-nav-btn-hover-border);
}

[data-theme="dark"] .chameleon-navbar__site-link:hover,
[data-theme="dark"] .chameleon-navbar__site-link--active {
    background: #1a2240;
    border-color: var(--t-nav-btn-border);
    color: #d8e4f8;
}

/* Invert nav icons so they read on dark backgrounds */
[data-theme="dark"] .chameleon-navbar__icon-button img {
    filter: invert(0.85);
}


/* ══════════════════════════════════════════════════════════════
   3. SIDE PANELS
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .side-panel__rail {
    background: var(--t-panel-rail-bg);
    border-color: var(--t-panel-rail-border);
    color: var(--t-panel-rail-fg);
}

[data-theme="dark"] .side-panel__body {
    background: var(--t-panel-bg);
    border-color: var(--t-panel-border);
    color: var(--t-panel-fg);
}

[data-theme="dark"] .side-panel__header {
    background: var(--t-panel-header-bg);
    border-bottom-color: var(--t-panel-header-border);
}

[data-theme="dark"] .side-panel__title {
    color: var(--t-panel-title-fg);
}

[data-theme="dark"] .side-panel__close {
    color: var(--t-panel-rail-fg);
}

[data-theme="dark"] .side-panel__close:hover {
    background: rgba(255,255,255,0.07);
    color: var(--t-panel-fg);
}


/* ══════════════════════════════════════════════════════════════
   4. LIBRARY: SUMMARY STRIP, TOOLBAR, FILTERS
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .library-summary-strip {
    background: var(--t-lib-strip-bg);
    border-bottom-color: var(--t-lib-strip-border);
}

[data-theme="dark"] .lib-stat-plain {
    color: var(--t-lib-stat-fg);
}

[data-theme="dark"] .lib-stat-sep {
    color: #3a4258;
}

[data-theme="dark"] .lib-stat-chip {
    background: var(--t-lib-stat-chip-bg);
    border-color: var(--t-lib-stat-chip-border);
    color: var(--t-lib-stat-chip-fg);
}

[data-theme="dark"] .lib-stat-chip:hover {
    background: #1e2848;
    border-color: #3a5080;
    color: #a0c0e0;
}

[data-theme="dark"] .lib-stat-chip.is-active {
    background: #2a4870;
    border-color: #2a4870;
    color: #d8eaff;
}

[data-theme="dark"] .library-summary-strip__quota-track {
    background: #1e2338;
}

[data-theme="dark"] .library-summary-strip__quota-nums,
[data-theme="dark"] .library-summary-strip__quota-label {
    color: var(--t-lib-stat-fg);
}

[data-theme="dark"] .library-explore-row {
    border-bottom-color: var(--t-lib-toolbar-border);
}

[data-theme="dark"] .library-explore-btn {
    border-color: var(--t-lib-explore-border);
    color: var(--t-lib-btn-fg);
}

[data-theme="dark"] .library-explore-btn:hover {
    background: var(--t-lib-btn-hover-bg);
    color: #8ab4cc;
    border-color: #3a5068;
}

[data-theme="dark"] .library-explore-btn.is-active {
    background: #2a5068;
    color: #d8f0ff;
    border-color: #2a5068;
}

[data-theme="dark"] .library-source-filter {
    background: var(--t-lib-filter-bg);
    border-bottom-color: var(--t-lib-toolbar-border);
}

[data-theme="dark"] .library-source-btn {
    color: var(--t-lib-btn-fg);
}

[data-theme="dark"] .library-source-btn:hover {
    background: var(--t-lib-btn-hover-bg);
    color: #9ab8cc;
}

[data-theme="dark"] .library-source-btn.is-active {
    background: #1a3a58;
    border-color: #1a3a58;
    color: #d8f0ff;
}

[data-theme="dark"] .library-toolbar {
    background: var(--t-lib-toolbar-bg);
    border-bottom-color: var(--t-lib-toolbar-border);
}

[data-theme="dark"] .library-toolbar .library-group-chips:not([hidden]) {
    border-bottom-color: var(--t-lib-toolbar-border);
}

[data-theme="dark"] .library-sort-btn {
    color: var(--t-lib-btn-fg);
}

[data-theme="dark"] .library-sort-btn:hover {
    background: var(--t-lib-btn-hover-bg);
    color: #9ab8cc;
}

[data-theme="dark"] .library-sort-btn.is-active {
    background: #1a2a40;
    border-color: #2a3e58;
    color: #a0c0e0;
}

[data-theme="dark"] .library-filter-row {
    border-bottom-color: var(--t-lib-toolbar-border);
}

[data-theme="dark"] .library-filter-chip {
    background: var(--t-lib-filter-chip-bg);
    border-color: var(--t-lib-filter-chip-border);
    color: var(--t-lib-filter-chip-fg);
}

[data-theme="dark"] .library-filter-chip:hover {
    background: #1a2840;
    border-color: #3a6888;
}

[data-theme="dark"] .library-filter-chip.is-active {
    background: #2a6080;
    border-color: #2a6080;
    color: #d8f4ff;
}


/* ══════════════════════════════════════════════════════════════
   5. LIBRARY: EXAMPLES DROPDOWN (file list)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .examples-dropdown {
    background: var(--t-lib-bg);
    border-color: var(--t-lib-border);
    color: var(--t-lib-fg);
}

[data-theme="dark"] .examples-dropdown__search-item {
    background: var(--t-lib-bg);
}

[data-theme="dark"] .examples-dropdown__search {
    background: var(--t-lib-search-bg);
    border-color: var(--t-lib-search-border);
    color: var(--t-lib-search-fg);
}

[data-theme="dark"] .examples-dropdown__search:focus {
    border-color: var(--t-input-focus-border);
    outline-color: rgba(58, 122, 146, 0.25);
}

[data-theme="dark"] .examples-dropdown__button {
    color: var(--t-lib-fg);
}

[data-theme="dark"] .examples-dropdown__button:hover {
    background: var(--t-lib-hover-bg);
}

[data-theme="dark"] .examples-dropdown__title {
    color: var(--t-lib-title-fg);
}

[data-theme="dark"] .examples-dropdown__meta {
    color: var(--t-lib-meta-fg);
}

[data-theme="dark"] .examples-dropdown__status {
    color: var(--t-lib-status-fg);
}

[data-theme="dark"] .examples-dropdown__byline {
    color: var(--t-lib-byline-fg);
}

[data-theme="dark"] .examples-dropdown__scope-badge {
    background: var(--t-lib-badge-bg);
    border-color: var(--t-lib-badge-border);
    color: var(--t-lib-badge-fg);
}

[data-theme="dark"] .examples-dropdown__tag {
    background: var(--t-lib-tag-bg);
    color: var(--t-lib-tag-fg);
}

[data-theme="dark"] .examples-dropdown__rename-input {
    background: var(--t-lib-search-bg);
    border-color: var(--t-input-focus-border);
    color: var(--t-lib-search-fg);
}

[data-theme="dark"] .examples-dropdown__action-btn {
    background: var(--t-lib-action-bg);
    border-color: var(--t-lib-action-border);
    color: var(--t-lib-fg);
}

[data-theme="dark"] .examples-dropdown__action-btn--label:hover {
    background: #162840;
    border-color: #3a6888;
}

[data-theme="dark"] .examples-dropdown__action-btn--preview:hover {
    background: #162840;
    border-color: #3a6888;
}

[data-theme="dark"] .examples-dropdown__action-btn--preview.is-playing {
    background: #2a6080;
    border-color: #2a6080;
    color: #d8f4ff;
}

[data-theme="dark"] .examples-dropdown__action-btn--star {
    color: #a08040;
    border-color: transparent;
    background: transparent;
}

[data-theme="dark"] .examples-dropdown__action-btn--star:hover {
    background: #201800;
    border-color: #6a5000;
}

[data-theme="dark"] .examples-dropdown__action-btn--star.is-starred {
    color: #d8a830;
}

[data-theme="dark"] .examples-dropdown__action-btn--delete {
    color: #9a7070;
}

[data-theme="dark"] .examples-dropdown__action-btn--delete:hover {
    background: #2a1010;
    border-color: #8a3020;
    color: #e06050;
}

[data-theme="dark"] .examples-dropdown__action-btn--delete.is-confirming {
    background: #8a3020;
    border-color: #8a3020;
    color: #ffe8e8;
}

[data-theme="dark"] .examples-dropdown__action-btn--publish {
    color: #3a8868;
    border-color: #2a5048;
}

[data-theme="dark"] .examples-dropdown__action-btn--publish:hover {
    background: #112820;
    border-color: #3a8868;
    color: #80d0a8;
}

[data-theme="dark"] .examples-dropdown__action-btn--publish.is-shared {
    background: #2a6050;
    border-color: #2a6050;
    color: #d0ffe8;
}

[data-theme="dark"] .examples-dropdown__action-btn--group {
    color: #4a8fa8;
}

[data-theme="dark"] .examples-dropdown__action-btn--group:hover {
    background: #162840;
    border-color: #3a6888;
}

/* Scope indicator border */
[data-theme="dark"] .examples-dropdown li[data-scope="private"] {
    border-left-color: #2a5a78;
}


/* ══════════════════════════════════════════════════════════════
   6. LIBRARY: GROUP CHIPS, GROUPS PANEL, GROUP POPOVER
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .library-group-chip {
    background: var(--t-lib-chip-bg);
}

[data-theme="dark"] .library-groups-manage-btn {
    background: var(--t-lib-chip-bg);
    border-color: var(--t-lib-action-border);
    color: var(--t-lib-btn-fg);
}

[data-theme="dark"] .library-groups-manage-btn:hover {
    background: var(--t-lib-btn-hover-bg);
}

[data-theme="dark"] .library-groups-panel {
    background: var(--t-lib-groups-panel-bg);
    border-color: var(--t-lib-border);
}

[data-theme="dark"] .lib-groups-item__name {
    color: var(--t-lib-groups-item-fg);
}

[data-theme="dark"] .lib-groups-item__del {
    color: #4a5a70;
}

[data-theme="dark"] .lib-groups-item__del:hover {
    background: #2a1010;
    color: #e06050;
}

[data-theme="dark"] .lib-groups-create__name {
    background: var(--t-lib-groups-input-bg);
    border-color: var(--t-lib-action-border);
    color: var(--t-lib-groups-input-fg);
}

[data-theme="dark"] .lib-groups-create__name:focus {
    border-color: var(--t-input-focus-border);
}

[data-theme="dark"] .lib-groups-create__color {
    border-color: var(--t-lib-action-border);
}

[data-theme="dark"] .lib-group-popover {
    background: var(--t-lib-popover-bg);
    border-color: var(--t-lib-popover-border);
}

[data-theme="dark"] .lib-group-popover__item {
    color: var(--t-lib-popover-item-fg);
}

[data-theme="dark"] .lib-group-popover__item:hover {
    background: var(--t-lib-popover-hover-bg);
}

[data-theme="dark"] .lib-group-popover__item.is-member {
    background: var(--t-lib-popover-active-bg);
}


/* ══════════════════════════════════════════════════════════════
   7. LIBRARY: IMPORT OVERLAY & QUEUE
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .lib-import-overlay {
    background: var(--t-import-overlay-bg);
    border-top-color: var(--t-import-overlay-border);
}

[data-theme="dark"] .lib-import-overlay__header {
    border-bottom-color: var(--t-import-overlay-border);
}

[data-theme="dark"] .lib-import-overlay__title {
    color: var(--t-lib-btn-fg);
}

[data-theme="dark"] .lib-import-overlay__close {
    color: var(--t-lib-stat-fg);
}

[data-theme="dark"] .lib-import-overlay__close:hover {
    background: var(--t-import-close-hover);
    color: var(--t-panel-fg);
}

[data-theme="dark"] .lib-import-btn {
    background: var(--t-import-btn-bg);
    border-color: var(--t-import-btn-border);
    color: var(--t-import-btn-fg);
}

[data-theme="dark"] .lib-import-btn:hover {
    background: #1a2a40;
    border-color: #3a6888;
    color: #90c0d8;
}

[data-theme="dark"] .lib-import-btn--header {
    background: var(--t-import-btn-bg);
    border-color: var(--t-import-btn-border);
    color: var(--t-import-btn-fg);
}

[data-theme="dark"] .lib-import-btn--header:hover {
    background: #1a2a40;
    border-color: #3a6888;
    color: #90c0d8;
}

[data-theme="dark"] .lib-import-group-select {
    background: var(--t-import-select-bg);
    border-color: var(--t-import-select-border);
    color: var(--t-import-select-fg);
}

[data-theme="dark"] .lib-import-item {
    background: var(--t-import-item-bg);
    border-color: var(--t-import-item-border);
}

[data-theme="dark"] .lib-import-item__name {
    color: var(--t-import-item-fg);
}

[data-theme="dark"] .lib-import-item__status {
    color: #4a7090;
}

[data-theme="dark"] .lib-import-item[data-state="done"] .lib-import-item__status {
    color: #3a9868;
}

[data-theme="dark"] .lib-import-item__message {
    color: #ff9c8a;
}

[data-theme="dark"] .lib-import-item[data-state="error"] .lib-import-item__status {
    color: #c04030;
}

[data-theme="dark"] .lib-import-item__bar {
    background: var(--t-import-bar-bg);
}

[data-theme="dark"] .lib-import-item__reimport {
    background: #1e1600;
    border-color: #6a5000;
    color: #c0a030;
}

[data-theme="dark"] .lib-import-item__reimport:hover {
    background: #2a1e00;
}


/* ══════════════════════════════════════════════════════════════
   8. SVG CANVAS
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #svgWrapper {
    background: var(--t-canvas-bg);
}

/* Axis ticks — CSS overrides SVG presentation attributes
   (lower specificity), so no !important needed */
[data-theme="dark"] .y-axis-scale line {
    stroke: var(--t-axis-stroke) !important;
}

[data-theme="dark"] .y-axis-scale text {
    fill: var(--t-axis-fill) !important;
}

[data-theme="dark"] .x-axis-scale line {
    stroke: var(--t-axis-stroke) !important;
}

[data-theme="dark"] .x-axis-scale text {
    fill: var(--t-axis-fill) !important;
}


/* ══════════════════════════════════════════════════════════════
   9. SKETCH PANELS / MODALS (popover variables + direct styles)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .sketch-modal,
[data-theme="dark"] .sketch-popover,
[data-theme="dark"] .sketch-panel {
    /* Re-map --sm-* vars to dark theme tokens */
    --sm-bg:         var(--t-sketch-bg);
    --sm-bg-alt:     var(--t-sketch-bg-alt);
    --sm-text:       var(--t-sketch-fg);
    --sm-muted:      var(--t-sketch-muted);
    --sm-steel:      var(--t-sketch-muted);
    --sm-border:     var(--t-sketch-border);
    --sm-toggle-off: var(--t-sketch-toggle-off);
    --sm-navy:       var(--t-sketch-navy);
    --sm-teal-bg:    var(--t-sketch-teal-bg);

    background: var(--t-sketch-bg);
    color: var(--t-sketch-fg);
    border-color: var(--t-sketch-border);
}

/* Modal header header rows */
[data-theme="dark"] .sketch-modal__header,
[data-theme="dark"] .sketch-popover__header,
[data-theme="dark"] .sketch-panel__header {
    background: var(--t-sketch-bg-alt);
    border-bottom-color: var(--t-sketch-border);
    color: var(--t-sketch-fg);
}

[data-theme="dark"] .sketch-modal__title,
[data-theme="dark"] .sketch-popover__title,
[data-theme="dark"] .sketch-panel__title {
    color: var(--t-sketch-fg);
}

[data-theme="dark"] .sketch-modal__close,
[data-theme="dark"] .sketch-popover__close {
    color: var(--t-sketch-muted);
}

[data-theme="dark"] .sketch-modal__close:hover,
[data-theme="dark"] .sketch-popover__close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--t-sketch-fg);
}

/* Body area inherits the --sm-* vars and text color set above */
[data-theme="dark"] .sketch-modal__body,
[data-theme="dark"] .sketch-popover__body,
[data-theme="dark"] .sketch-panel__body {
    background: var(--t-sketch-bg);
    color: var(--t-sketch-fg);
}

/* Hover on sketch modal buttons inside dark body */
[data-theme="dark"] .sketch-modal__body .global-settings__button:hover {
    background: #1e2f48;
    border-color: #3a5878;
    color: #a8cce0;
}


/* ══════════════════════════════════════════════════════════════
   10. CANVAS SETTINGS PANEL (global-settings)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .global-settings__container {
    color: var(--t-settings-fg);
}

[data-theme="dark"] .global-settings__content {
    color: var(--t-settings-fg);
}

[data-theme="dark"] .settings-group__header {
    color: var(--t-settings-group-fg);
    border-color: var(--t-settings-group-border);
}

[data-theme="dark"] .global-settings__label {
    color: var(--t-settings-fg);
}

[data-theme="dark"] .global-settings__header {
    color: var(--t-settings-fg);
    border-bottom-color: var(--t-settings-group-border);
}

[data-theme="dark"] .global-settings__select {
    background: var(--t-settings-select-bg);
    color: var(--t-settings-select-fg);
    border-color: var(--t-settings-select-border);
}

/* Generic buttons outside sketch modal body */
[data-theme="dark"] .global-settings__button:not(.sketch-modal__body *) {
    background-color: #1e3050;
    border-color: #2a4268;
    color: #a8cce0;
}

[data-theme="dark"] .global-settings__button:not(.sketch-modal__body *):hover {
    background-color: #263a60;
}

/* Settings group sections */
[data-theme="dark"] .settings-group {
    border-color: var(--t-settings-group-border);
}


/* ══════════════════════════════════════════════════════════════
   11. FEATURE PROGRESS & SPINNER OVERLAY
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .feature-progress-status {
    background: var(--t-overlay-bg);
    border-color: var(--t-overlay-border);
    color: var(--t-overlay-fg);
}


/* ══════════════════════════════════════════════════════════════
   12. TOOLTIP (SVG feature data hover)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #tooltip,
[data-theme="dark"] .tooltip {
    background: var(--t-tooltip-bg) !important;
    color: var(--t-tooltip-fg) !important;
    border: 1px solid var(--t-tooltip-border);
}


/* ══════════════════════════════════════════════════════════════
   13. MISC MODALS (tutorial, generic modal-content)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .modal-content,
[data-theme="dark"] .tutorial-modal-content {
    background: var(--t-tutorial-bg);
    border-color: var(--t-tutorial-border);
    color: var(--t-page-fg);
}

[data-theme="dark"] .tutorial-sidebar {
    border-right-color: var(--t-tutorial-border);
}

[data-theme="dark"] .tutorial-sidebar a {
    color: var(--t-panel-fg);
}

[data-theme="dark"] #tutorialSearchInput {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-fg);
}


/* ══════════════════════════════════════════════════════════════
   14. GLOBAL INPUTS & SELECTS
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--t-input-bg);
    color: var(--t-input-fg);
    border-color: var(--t-input-border);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="search"]:focus,
[data-theme="dark"] input[type="number"]:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--t-input-focus-border);
    outline-color: rgba(58, 122, 146, 0.25);
}


/* ══════════════════════════════════════════════════════════════
   15. SCROLLBARS
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0e0f14;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2a2f42;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3a4058;
}


/* ══════════════════════════════════════════════════════════════
   16. LOGO SWAP
   ══════════════════════════════════════════════════════════════ */

/* Hide dark logo by default; hide light logo in dark mode */
.logo--for-dark {
    display: none;
}

[data-theme="dark"] .logo--for-light {
    display: none;
}

[data-theme="dark"] .logo--for-dark {
    display: block;
}

/* Mixer icon: light/dark variants */
.mixer-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 5px;
}

.mixer-icon--for-dark {
    display: none;
}

[data-theme="dark"] .mixer-icon--for-light {
    display: none;
}

[data-theme="dark"] .mixer-icon--for-dark {
    display: inline;
}


/* ══════════════════════════════════════════════════════════════
   17. SKETCH TOOLBAR (bottom bar)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .sketch-toolbar {
    background: var(--t-toolbar-bg);
    border-top-color: var(--t-toolbar-border);
}

[data-theme="dark"] .sketch-toolbar__mode-btn {
    background: var(--t-toolbar-btn-bg);
    border-color: var(--t-toolbar-btn-border);
    color: var(--t-toolbar-btn-fg);
}

[data-theme="dark"] .sketch-toolbar__mode-btn:hover {
    background: var(--t-toolbar-btn-hover-bg);
    border-color: #3a6888;
    color: #a0cce0;
}

[data-theme="dark"] .sketch-toolbar__mode-btn[aria-pressed="true"] {
    background: #2a5a78;
    border-color: #2a5a78;
    color: #d8f0ff;
}

[data-theme="dark"] .sketch-toolbar__btn {
    background: var(--t-toolbar-btn-bg);
    border-color: var(--t-toolbar-btn-border);
    color: var(--t-toolbar-panel-fg);
}

[data-theme="dark"] .sketch-toolbar__btn:hover {
    background: var(--t-toolbar-btn-hover-bg);
    border-color: #3a6888;
}

[data-theme="dark"] .sketch-toolbar__btn.is-active {
    background: #1a3a58;
    border-color: #2a5070;
    color: #d8f0ff;
}


/* ══════════════════════════════════════════════════════════════
   18. MIXER STRIP
   ══════════════════════════════════════════════════════════════ */

/* Outer strip (fixed panel below navbar) */
[data-theme="dark"] .mixer-strip {
    background: var(--t-mixer-bg);
    border-color: var(--t-mixer-border);
}

[data-theme="dark"] .mixer-strip__header {
    background: #181d28;
    border-color: var(--t-mixer-border);
}

[data-theme="dark"] .mixer-strip__title {
    color: #c8d8e8;
}

[data-theme="dark"] .panel-close-btn {
    background: #1c2230;
    border-color: #2a3a50;
    color: #a0b4c8;
}

[data-theme="dark"] .panel-close-btn:hover {
    background: #222a3a;
}

/* Also cover the legacy .mixer-container if ever rendered */
[data-theme="dark"] .mixer-container {
    background-color: var(--t-mixer-bg);
    border-color: var(--t-mixer-border);
}

/* mixer-subcontainer — no bg of its own, but explicit reset avoids white flash */
[data-theme="dark"] .mixer-subcontainer {
    background: transparent;
}

/* Individual mixer channel items */
[data-theme="dark"] .mixer-item label {
    color: var(--t-mixer-fg);
}

/* Volume fader */
[data-theme="dark"] .mixer-item input[type="range"].volume-slider,
[data-theme="dark"] #mixer input[type="range"] {
    background: linear-gradient(to top, #2a5a78, #3a8fa8);
}

[data-theme="dark"] .mixer-item input[type="range"]::-webkit-slider-thumb {
    background: #2a7a92;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[data-theme="dark"] .mixer-item input[type="range"]::-moz-range-thumb {
    background: #2a7a92;
}

/* Play button in mixer strip */
[data-theme="dark"] .mixer-strip__play {
    background: #141824;
    border-color: #2a3a50;
}

[data-theme="dark"] .mixer-strip__play:hover {
    background: #1a2840;
    border-color: #3a6888;
}

/* Eye toggle icons — invert so they read on dark */
[data-theme="dark"] .toggle-button img {
    filter: invert(0.8);
}

/* Colour picker popup */
[data-theme="dark"] .popup {
    background: var(--t-mixer-popup-bg);
    border-color: var(--t-mixer-popup-border);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

[data-theme="dark"] .popup input[type="range"]::-webkit-slider-thumb {
    border-color: rgba(255,255,255,0.6);
}

[data-theme="dark"] .popup input[type="range"]::-moz-range-thumb {
    border-color: rgba(255,255,255,0.6);
}


/* ══════════════════════════════════════════════════════════════
   19. F0-SC SETTINGS BLOCK (inside Mapping panel)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .f0sc-settings-block {
    background: var(--t-f0sc-bg);
    border-color: var(--t-f0sc-border);
}

[data-theme="dark"] .f0sc-settings-item .global-settings__label {
    color: var(--t-f0sc-fg);
}

[data-theme="dark"] .f0sc-settings-btn {
    background: var(--t-f0sc-btn-bg);
    border-color: var(--t-f0sc-btn-border);
    color: var(--t-f0sc-fg);
}

[data-theme="dark"] .f0sc-settings-btn:hover {
    background: #1e2a40;
}

[data-theme="dark"] .f0sc-settings-btn.is-active {
    background: #1a3a58;
    border-color: #2a5070;
    color: #d8f0ff;
}


/* ══════════════════════════════════════════════════════════════
   21. SONIFICATORS — ACCORDION HOVER + WAVEFORM INTERNALS
   ══════════════════════════════════════════════════════════════ */

/* Override hardcoded #e8eef7 hover background on accordion headers */
[data-theme="dark"] .sketch-modal__body .accordion-header:hover {
    background: #232a3e;
    color: var(--t-sketch-fg);
}

/* Waveform container drop-zone text */
[data-theme="dark"] .sketch-modal__body #waveform-text {
    color: var(--t-sketch-muted);
}

/* Sample status line below waveform */
[data-theme="dark"] .sketch-modal__body .granular-sample-status {
    color: var(--t-sketch-muted);
}

[data-theme="dark"] .sketch-modal__body .granular-sample-status.is-loaded {
    color: #3a9868;
}

[data-theme="dark"] .sketch-modal__body .granular-sample-status.is-error {
    color: #c04040;
}

/* Legacy modal-heading inside sonificator popup */
[data-theme="dark"] .sketch-modal__body .modal-heading {
    color: var(--t-sketch-fg);
}

[data-theme="dark"] .sketch-modal__body .modal-description {
    color: var(--t-sketch-muted);
}


/* ══════════════════════════════════════════════════════════════
   22. LEGACY CLOSE BUTTONS (.close-button spans)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .close-button {
    color: #6a7a92;
}

[data-theme="dark"] .close-button:hover,
[data-theme="dark"] .close-button:focus {
    color: #d8e4f8;
    text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════
   23. DROP AREA LOADING STATE & UPLOAD BUTTON
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #drop_area {
    border-color: #2a3a52;
    color: #8aa0bc;
}

[data-theme="dark"] #drop_area[data-state="loading"] {
    border-color: #243044;
}

[data-theme="dark"] .drop-area__spinner {
    border-color: #2a3a52;
    border-top-color: #5b8db8;
}

[data-theme="dark"] .drop-area__label {
    color: #8ab0d0;
}

[data-theme="dark"] .drop-area__hint {
    color: #4a6080;
}

[data-theme="dark"] .sketch-toolbar__btn--icon {
    color: #7090aa;
}

[data-theme="dark"] .sketch-toolbar__btn--icon:hover {
    color: #c0d8f0;
}


/* ══════════════════════════════════════════════════════════════
   24. MIX CHANNEL STRIPS  (.mix-ch, #mixer)
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] #mixer {
    background: #141520;
    border-color: #2d3048;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .mix-ch {
    background: #1c1e2a;
    border-color: #2b2e40;
}

[data-theme="dark"] .mix-ch__engine {
    background: #252838;
    border-color: #363a52;
    color: #a9b6cc;
}
[data-theme="dark"] .mix-ch__engine.is-own {
    background: #3a8fab;
    border-color: #3a8fab;
    color: #ffffff;
}

[data-theme="dark"] .mix-ch + .mix-ch {
    border-left-color: #252736;
}

[data-theme="dark"] .mix-ch__name {
    color: #9aa3c0;
}

[data-theme="dark"] .mix-ch__color-swatch {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .mix-ch__color-swatch:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .mix-ch__vu-col {
    background: #0d0f18;
}

[data-theme="dark"] .mix-ch__fader {
    background: #1a1d28;
}

[data-theme="dark"] .mix-ch__fader::-webkit-slider-runnable-track {
    background: #1a1d28;
}

[data-theme="dark"] .mix-ch__fader::-moz-range-track {
    background: #1a1d28;
}

[data-theme="dark"] .mix-ch__fader::-webkit-slider-thumb {
    background: #d0d4e8;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .mix-ch__fader::-webkit-slider-thumb:hover {
    background: #ffffff;
}

[data-theme="dark"] .mix-ch__fader::-moz-range-thumb {
    background: #d0d4e8;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .mix-ch__db-label {
    color: #6b7494;
}

[data-theme="dark"] .mix-ch__btn {
    border-color: #3a3e52;
    background: #252836;
    color: #6b7494;
}

[data-theme="dark"] .mix-ch__btn:hover {
    background: #2f3347;
    color: #9aa3c0;
}

[data-theme="dark"] .mix-ch__vis img {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}

[data-theme="dark"] .mix-ch__vis.is-inactive img {
    opacity: 0.22;
}

[data-theme="dark"] .mix-ch__pan {
    background: linear-gradient(to right, #252836, #3a3e52 50%, #252836);
}

[data-theme="dark"] .mix-ch__pan::-webkit-slider-thumb {
    background: #c8ccda;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mix-ch__pan::-webkit-slider-thumb:hover {
    background: #ffffff;
}

[data-theme="dark"] .mix-ch__pan::-moz-range-thumb {
    background: #c8ccda;
}

[data-theme="dark"] .mix-ch__pan-label {
    color: #6b7494;
}

[data-theme="dark"] .mix-ch__color-popup {
    background: #1c1e2a;
    border-color: #2d3048;
}


/* ══════════════════════════════════════════════════════════════
   25. TOUR BOXES & LINE-STYLE POPUP
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .tour-tooltip {
    background: #1e2732;
    color: #d8e6f0;
    border-color: rgba(74, 143, 168, 0.35);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .tour-tooltip[data-arrow="top"]::before {
    border-bottom-color: #1e2732;
}

[data-theme="dark"] .tour-tooltip[data-arrow="bottom"]::before {
    border-top-color: #1e2732;
}

[data-theme="dark"] .tour-close {
    color: rgba(216, 230, 240, 0.45);
}

[data-theme="dark"] .tour-close:hover {
    color: #d8e6f0;
}

[data-theme="dark"] .tour-tooltip__title {
    color: #ffffff;
}

[data-theme="dark"] .tour-tooltip__body {
    color: #adc4d8;
}

[data-theme="dark"] .tour-counter {
    color: rgba(173, 196, 216, 0.55);
}

[data-theme="dark"] .tour-btn {
    border-color: rgba(74, 143, 168, 0.5);
    color: #7bbdd8;
}

[data-theme="dark"] .tour-btn:hover {
    background: rgba(74, 143, 168, 0.2);
    color: #d8e6f0;
}

[data-theme="dark"] .tour-btn--next {
    background: rgba(74, 143, 168, 0.18);
}

[data-theme="dark"] .tour-toast {
    background: #1e2732;
    color: #adc4d8;
    border-color: rgba(74, 143, 168, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tour-toast__close {
    color: rgba(173, 196, 216, 0.45);
}

[data-theme="dark"] .tour-toast__action {
    border-color: rgba(90, 176, 202, 0.45);
    background: rgba(90, 176, 202, 0.14);
    color: #9fd6e6;
}

[data-theme="dark"] .ss-note__title { color: #e3edf5; }
[data-theme="dark"] .ss-note--info { border-left-color: #5ab0ca; }
[data-theme="dark"] .ss-note--success { border-left-color: #5cc185; }
[data-theme="dark"] .ss-note--warning { border-left-color: #e8b04a; }
[data-theme="dark"] .ss-note--error { border-left-color: #e0604f; }
[data-theme="dark"] .tour-toast__action.ss-note__primary {
    background: #3a8fab;
    border-color: #3a8fab;
    color: #ffffff;
}

[data-theme="dark"] .tour-toast__close:hover {
    color: #d8e6f0;
}

[data-theme="dark"] .eraser-size-popup {
    background: #1e2329;
    color: #d8e6f0;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .esp-label {
    color: rgba(216, 230, 240, 0.65);
}

[data-theme="dark"] .brush-popup__actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .brush-popup__btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d8e6f0;
}

[data-theme="dark"] .brush-popup__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .brush-popup__pick.is-active {
    border-color: #5ab0ca;
    background: rgba(90, 176, 202, 0.2);
    color: #9fd6e6;
}

[data-theme="dark"] .line-style-popup {
    background: #1e2329;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .line-style-popup__item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .image-import-backdrop {
    background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .image-import {
    background: #1e2329;
    color: #d8e6f0;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .image-import__preview {
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .image-import__meta,
[data-theme="dark"] .image-import__label {
    color: rgba(216, 230, 240, 0.65);
}

[data-theme="dark"] .image-import__segmented,
[data-theme="dark"] .image-import__seg + .image-import__seg {
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .image-import__seg,
[data-theme="dark"] .image-import__btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d8e6f0;
}

[data-theme="dark"] .image-import__btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .image-import__seg.is-active {
    background: rgba(90, 176, 202, 0.22);
    color: #9fd6e6;
}

[data-theme="dark"] .image-import__btn--primary {
    border-color: #5ab0ca;
    background: #3f8ba3;
    color: #ffffff;
}

[data-theme="dark"] .image-import__btn--primary:hover {
    background: #4a9bb4;
}

[data-theme="dark"] .image-import__actions {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .shape-palette__preview {
    border-color: rgba(255, 255, 255, 0.14);
    background: #12161b;
}

[data-theme="dark"] .shape-palette__hint,
[data-theme="dark"] .shape-palette__label {
    color: rgba(216, 230, 240, 0.65);
}

[data-theme="dark"] .shape-palette__chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d8e6f0;
}

[data-theme="dark"] .shape-palette__chip:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .shape-palette__chip.is-active {
    border-color: #5ab0ca;
    background: rgba(90, 176, 202, 0.22);
    color: #9fd6e6;
}

[data-theme="dark"] .shape-rubber {
    fill: rgba(90, 176, 202, 0.1);
    stroke: #5ab0ca;
}

[data-theme="dark"] .shape-palette__snap {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .shape-palette__snap kbd {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(216, 230, 240, 0.65);
}

[data-theme="dark"] .shape-readout {
    background: rgba(216, 230, 240, 0.92);
    color: #12161b;
}

[data-theme="dark"] .shape-cursor {
    fill: #5ab0ca;
    stroke: #12161b;
}

[data-theme="dark"] .shape-selection__box {
    stroke: #5ab0ca;
}

[data-theme="dark"] .shape-selection__handle {
    fill: #12161b;
    stroke: #5ab0ca;
}

[data-theme="dark"] .shape-palette__engine-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d8e6f0;
}

[data-theme="dark"] .export-engine-menu .is-armed {
    border-color: #5ab0ca;
}

[data-theme="dark"] .shortcuts__section-title {
    color: rgba(216, 230, 240, 0.65);
}

[data-theme="dark"] .shortcuts__keys kbd {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #d8e6f0;
}

[data-theme="dark"] .export-engine-menu__options {
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sk-menu__title { border-color: rgba(255, 255, 255, 0.16); }
[data-theme="dark"] .sk-menu__status,
[data-theme="dark"] .sk-menu__hint,
[data-theme="dark"] .sk-lib__usage,
[data-theme="dark"] .sk-lib__empty,
[data-theme="dark"] .sk-card__meta { color: rgba(216, 230, 240, 0.65); }
[data-theme="dark"] .sk-menu__status.is-dirty { color: #f2c27a; }
[data-theme="dark"] .sk-card { background: #232a32; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .sk-card__thumb { background: #1a1f25; border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .sk-card__delete { color: #f08a8a !important; }
[data-theme="dark"] .sk-card__rename { background: #1a1f25; color: #d8e6f0; }

[data-theme="dark"] .listen-source {
    background: #1e2732;
    border-color: #363a52;
    color: #d8e6f0;
}

[data-theme="dark"] .engine-help { background: rgba(90, 176, 202, 0.08); border-color: rgba(90, 176, 202, 0.3); }
[data-theme="dark"] .engine-help__picture { background: #151d2e; border-color: #2b3550; }
[data-theme="dark"] .engine-help__captions { color: #8fa3b8; }
[data-theme="dark"] .engine-help__example { background: #1e2732; color: #9fd6e6; border-color: rgba(90, 176, 202, 0.45); }
[data-theme="dark"] .engine-help__example.is-playing { background: #3a8fab; color: #ffffff; }