/* --- CSS STYLES --- */
        /* Startup loading bar — visible immediately, faded out by JS */
        #startup-loader {
            position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 99999;
            pointer-events: none;
        }
        #startup-loader .loader-bar {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, #0078d7, #60cdff);
            animation: loader-fill 1.8s ease-in-out forwards;
        }
        @keyframes loader-fill {
            0%   { width: 0%; }
            30%  { width: 35%; }
            60%  { width: 65%; }
            100% { width: 88%; }
        }
        body.app-ready #startup-loader {
            opacity: 0;
            transition: opacity 0.25s ease;
        }
        /* CSS custom properties for the entire app. Centralised here so themes only need to override this block. */
        :root {
            --bg-ribbon: #f5f6f7;
            --border-ribbon: #dadbdc;
            --win-blue: #0078d7;
            --app-text-color: #111111;
            --app-bg: #ffffff;
            --titlebar-bg: #ffffff;
            --titlebar-action-icon: #8a8f98;
            --titlebar-save-icon: #7b3ff2;
            --titlebar-save-pixel-primary: #9c75ca;
            --titlebar-save-pixel-shadow: #81679b;
            --titlebar-save-pixel-sheet: #e6eaec;
            --titlebar-save-pixel-sheet-shadow: #cccad5;
            --titlebar-save-pixel-white: #ffffff;
            --titlebar-save-pixel-accent: #835ac7;
            --titlebar-save-pixel-accent-soft: #a191b3;
            --titlebar-save-pixel-mid: #98999c;
            --titlebar-undo-redo-enabled: #1b6fe5;
            --titlebar-action-outline-hover: #9fc4ea;
            --titlebar-action-hover-bg: #e5e5e5;
            --titlebar-separator: #c8c8c8;
            --titlebar-filename: #111111;
            --titlebar-control-icon: #111111;
            --titlebar-control-close-hover: #e81123;
            --titlebar-control-close-hover-icon: #ffffff;
            --tab-row-bg: #ffffff;
            --tab-file-text: #ffffff;
            --section-divider: #e0e0e0;
            --section-title-color: #666666;
            --btn-hover-bg: #eaf4ff;
            --btn-hover-border: #9fc4ea;
            --btn-hover-shadow: rgba(0,120,215,0.15);
            --btn-active-bg: #cce8ff;
            --btn-active-border: #66a7e8;
            --btn-active-shadow: rgba(0,120,215,0.3);
            --dropdown-bg: #ffffff;
            --dropdown-border: #a0a0a0;
            --dropdown-shadow: rgba(0,0,0,0.2);
            --dropdown-item-hover-bg: #e8e8e8;
            --dropdown-arrow-color: #666666;
            --dropdown-separator: #e0e0e0;
            --btn-small-bg: #f9f9f9;
            --btn-small-border: #cccccc;
            --threshold-label-color: #666666;
            --threshold-values-color: #444444;
            --toggle-icon-color: #0078d7;
            --toggle-icon-color-dark: #ffffff;
            --toggle-status-color: #666666;
            --hotkeys-icon-color: #0078d7;
            --hotkeys-icon-color-dark: #ffffff;
            --anchor-toggle-icon-color: #0078d7;
            --anchor-toggle-icon-color-dark: #ffffff;
            --theme-mode-toggle-icon-color: #0078d7;
            --theme-mode-toggle-icon-color-dark: #ffffff;
            --select-menu-header-color: #5f5f5f;
            --select-menu-header-bg: #f2f2f2;
            --select-menu-icon-all-fill: #e6f0fa;
            --select-menu-icon-all-fill-disabled: #f0f0f0;
            --select-menu-icon-disabled-stroke: #a0a0a0;
            --select-menu-icon-delete-stroke: #c00000;
            --theme-colors-window-bg: #ffffff;
            --theme-colors-titlebar-bg-start: #fbfbfb;
            --theme-colors-titlebar-bg-end: #f1f1f1;
            --theme-colors-titlebar-border: #d8d8d8;
            --theme-colors-top-note-color: #5a5a5a;
            --theme-colors-result-count-color: #666666;
            --theme-colors-list-bg: #ffffff;
            --theme-colors-editor-panel-bg-start: #fcfcfc;
            --theme-colors-editor-panel-bg-end: #f5f5f5;
            --theme-colors-editor-panel-border: #d3d3d3;
            --theme-colors-editor-title-color: #444444;
            --theme-colors-editor-key-color: #333333;
            --theme-colors-editor-input-bg: #ffffff;
            --theme-colors-editor-input-border: #bdbdbd;
            --theme-colors-editor-swatch-border: #777777;
            --theme-colors-editor-hint-color: #666666;
            --theme-colors-mini-toggle-color: #444444;
            --palette-mini-swatch-border: #a0a0a0;
            --palette-mini-swatch-inner: #ffffff;
            --palette-mini-swatch-hover-border: #0078d7;
            --palette-mini-swatch-hover-inner: #bcdcff;
            --view-center-icon-color: #0078d7;
            --view-edgeclean-icon-color: #007bff;
            --view-theme-icon-color: #0078d7;
            --select-icon-free-color: #1a6aab;
            --select-icon-poly-main-color: #1a6aab;
            --select-icon-poly-accent-color: #4e8aba;
            --bg-hover: #cce8ff;
            --border-hover: #99d1ff;
            --bg-selected: #e1f0ff;
            --border-selected: #7da2ce;
            --bg-canvas: #cce3f3;
            --shape-icon-color: #000000;
            --zoom: 1;
            --zoom-inv: 1;
            --sel-rotate-icon-color: #ffffff;
        }

        /* Global box-model reset and font defaults. Disabling user-select everywhere prevents text highlighting during canvas drag operations. */
        * { box-sizing: border-box; user-select: none; }

        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: 'Segoe UI', sans-serif;
            font-size: 12px;
            overflow: hidden;
            background: var(--app-bg);
            color: var(--app-text-color);
        }

        input { user-select: auto !important; cursor: pointer; }
        input[type="checkbox"] { accent-color: var(--win-blue); }

        /* LAYOUT */
        /* Layout for the title bar, tab row, and ribbon. Heights are fixed so the canvas area can fill the remaining viewport precisely. */

        #title-bar { height: 21px; display: flex; align-items: center; padding: 0 10px 0 10px; background: var(--titlebar-bg); z-index: 101; }
        #title-bar .title-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
        #title-bar .app-icon { width: 16px; height: 16px; image-rendering: pixelated; }
        #title-bar .title-action {
            width: 28px;
            height: 24px;
            border: 0;
            background: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            cursor: pointer;
        }
        #title-bar .title-action svg {
            width: 13px;
            height: 13px;
            fill: var(--titlebar-action-icon);
            stroke: none;
        }
        #title-bar .title-action img {
            width: 13px;
            height: 13px;
            min-width: 13px;
            min-height: 13px;
            max-width: 13px;
            max-height: 13px;
            display: block;
            image-rendering: pixelated;
        }
        #title-bar .title-action.icon-undo img,
        #title-bar .title-action.icon-redo img {
            width: 16px;
            height: 16px;
            min-width: 16px;
            min-height: 16px;
            max-width: 16px;
            max-height: 16px;
        }
        #title-bar .title-action.icon-save svg {
            width: 14px;
            height: 14px;
            fill: var(--titlebar-save-icon);
            stroke: var(--titlebar-save-icon);
            stroke-width: 0;
        }
        #title-bar .title-action.icon-save svg rect,
        #title-bar .title-action.icon-save svg circle {
            fill: rgba(255,255,255,0.35);
        }
        #title-bar .title-action.icon-undo.is-enabled svg,
        #title-bar .title-action.icon-redo.is-enabled svg {
            fill: var(--titlebar-undo-redo-enabled);
        }
        #title-bar .title-action.icon-undo {
            margin-left: -9px;
            margin-right: -9px;
        }
        #title-bar .title-action.icon-save,
        #title-bar .title-action.icon-undo,
        #title-bar .title-action.icon-redo {
            border: 1px solid transparent;
            border-radius: 2px;
            box-sizing: border-box;
            position: relative;
        }
        #title-bar .title-action.icon-save::before,
        #title-bar .title-action.icon-undo::before,
        #title-bar .title-action.icon-redo::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid transparent;
            background: transparent;
            box-shadow: none;
            border-radius: 0;
            pointer-events: none;
        }
        #title-bar .title-action.icon-save:hover,
        #title-bar .title-action.icon-undo:hover,
        #title-bar .title-action.icon-redo:hover {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
        }
        #title-bar .title-action.icon-save:hover::before,
        #title-bar .title-action.icon-undo:hover::before,
        #title-bar .title-action.icon-redo:hover::before {
            background: transparent;
            border-color: var(--titlebar-action-outline-hover);
            box-shadow: none;
        }
        #title-bar .title-action.icon-undo:disabled:hover::before,
        #title-bar .title-action.icon-redo:disabled:hover::before {
            border-color: transparent;
            box-shadow: none;
            background: transparent;
        }
        #title-bar .title-action:disabled {
            opacity: 0.5;
            cursor: default;
        }
        /* Undo/Redo provide dedicated grey icons, so don't double-dim via opacity. */
        #title-bar .title-action.icon-undo:disabled,
        #title-bar .title-action.icon-redo:disabled {
            opacity: 1;
        }
        #title-bar .title-action:hover { background: var(--titlebar-action-hover-bg); }
        #title-bar .title-sep {
            width: 1px;
            height: 18px;
            background: var(--titlebar-separator);
            margin: 0 2px;
        }
        #title-bar .title-filename {
            font-weight: 600;
            color: var(--titlebar-filename);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 240px;
        }
        #title-bar .title-controls { display: flex; align-items: stretch; height: 100%; margin-right: -10px; }
        #title-bar .title-btn {
            width: 46px;
            border: 0;
            background: transparent;
            cursor: pointer;
            position: relative;
        }
        #title-bar .title-btn::before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            line-height: 1;
            color: var(--titlebar-control-icon);
            content: "";
        }
        #title-bar #title-minimize::before { content: "_"; top: 27%; }
        #title-bar #title-maximize {
            position: relative;
            overflow: visible;
        }
        #title-bar #title-maximize::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border: 1.5px solid var(--titlebar-control-icon);
            box-sizing: border-box;
        }
        #title-bar #title-maximize::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            box-sizing: border-box;
            pointer-events: none;
        }
        #title-bar #title-maximize.is-maximized::before {
            background: none;
            border: 0;
            width: 8px;
            height: 8px;
            transform: translate(calc(-50% + 3px), calc(-50% - 3px));
            border-top: 1.5px solid var(--titlebar-control-icon);
            border-right: 1.5px solid var(--titlebar-control-icon);
        }
        #title-bar #title-maximize.is-maximized::after {
            border: 1.5px solid var(--titlebar-control-icon);
            width: 8px;
            height: 8px;
        }
        #title-bar #title-close::before { content: "✕"; }
        #title-bar .title-btn:hover { background: var(--titlebar-action-hover-bg); }
        #title-bar .title-btn.close:hover { background: var(--titlebar-control-close-hover); }
        #title-bar .title-btn.close:hover::before { color: var(--titlebar-control-close-hover-icon); }
        .tab-row { display: flex; height: 24px; background: var(--tab-row-bg); border-bottom: 1px solid var(--border-ribbon); z-index: 101; }
        .tab { padding: 4px 20px; cursor: pointer; border: 1px solid transparent; margin: 0 2px; position: relative; top: 1px; }
        .tab:not(.file):not(.active):hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
        .tab.active { background: var(--bg-ribbon); border: 1px solid var(--border-ribbon); border-bottom: 1px solid var(--bg-ribbon); z-index: 102; }
        .tab.file { background: var(--win-blue); color: var(--tab-file-text); }


        .ribbon { height: 100px; min-height: 100px; max-height: 100px; background: var(--bg-ribbon); border-bottom: 1px solid var(--border-ribbon); display: flex; padding: 5px; gap: 5px; position: relative; z-index: 100; overflow: hidden; }



        .section { display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-right: 1px solid var(--section-divider); padding: 0 8px; height: 100%; min-width: max-content; flex-shrink: 0; }
        .colors-section { align-items: flex-start; }
        .ribbon-draggable { transition: transform 160ms ease; }
        .ribbon-drag-handle { cursor: grab; }
        .ribbon-dragging { opacity: 0.6; cursor: grabbing; }
        .section-title { color: var(--section-title-color); font-size: 11px; margin-bottom: 2px; text-align: center; width: 100%; }
        .section-title { -webkit-user-drag: element; }
        .section-hidden { display: none !important; }
        .tools-grid { display: grid; gap: 2px; }
        .shapes-grid { display: grid; gap: 2px; }
        .tool-grid-slot { width: 24px; height: 24px; display:flex; align-items:center; justify-content:center; }
        .tool-slot-empty { pointer-events: none; }
        /* Tool customizer */
        .customizer-tab { font-size:11px; cursor:pointer; }
        .customizer-tab.active { background:var(--btn-active-bg); border-color:var(--btn-active-border); font-weight:bold; }
        .tool-drawer { display:flex; flex-wrap:wrap; gap:2px; padding:4px; background:var(--bg-panel); border:1px solid var(--border-color); border-radius:3px; min-height:40px; align-content:flex-start; }
        .customizer-drawer-item { width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:grab; border:1px solid transparent; border-radius:2px; }
        .customizer-drawer-item:hover { background:var(--btn-hover-bg); border-color:var(--btn-hover-border); }
        .tool-grid-preview { display:grid; grid-template-columns:repeat(20,28px); gap:2px; padding:4px; background:var(--bg-panel); border:1px solid var(--border-color); border-radius:3px; min-height:94px; }
        .customizer-slot { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-color); border-radius:2px; cursor:grab; }
        .customizer-slot-empty { background:rgba(128,128,128,0.08); border-style:dashed !important; }
        .customizer-slot-filled { background:var(--bg-panel); }
        .customizer-slot-filled:hover { background:var(--btn-hover-bg); border-color:var(--btn-hover-border); }
        .customizer-over { border-color:var(--accent-color) !important; background:rgba(0,120,215,0.1) !important; }
        .customizer-dragging { opacity:0.4; }
        .customizer-tab-row { display:flex; gap:0; border-bottom:1px solid var(--border-color); }
        .customizer-tab-row .customizer-tab { flex:1; border-radius:0; padding:4px 8px; }
        .customizer-body { display:flex; gap:12px; }
        .customizer-drawer-col { width:130px; flex-shrink:0; }
        .customizer-grid-col { flex:1; min-width:0; }
        .customizer-label { font-size:11px; color:var(--section-title-color); margin-bottom:6px; }
        .customizer-hint { font-size:10px; color:var(--dim-text); margin-top:6px; }

        /* BUTTONS */
        .btn { border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn-text { justify-content: flex-start; gap: 4px; width: 72px; padding: 2px 4px; text-align: left; }
        .btn-text .btn-label { flex: 1; text-align: left; }
        .btn-text .btn-caret { margin-left: auto; }
        .btn:hover, .btn-large:hover, .split-btn-bottom:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); box-shadow: inset 0 0 2px var(--btn-hover-shadow); }
        /* Theme selection buttons: active state, no grey backdrop */
        .btn-large.theme-mode-btn { background: transparent; }
        .btn-large.theme-mode-btn.is-on {
            background: var(--btn-active-bg);
            border-color: var(--btn-active-border);
            box-shadow: inset 0 0 3px var(--btn-active-shadow);
        }
        .btn-large.theme-mode-btn:hover:not(.is-on) { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); box-shadow: inset 0 0 2px var(--btn-hover-shadow); }
        .btn-large.edit-colors-btn { position: relative; }
        .btn-large.edit-colors-btn { width: 48px; height: 66px; padding: 4px; }
        .btn-large.edit-colors-btn::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 10px;
            bottom: 1px;
            background: transparent;
            border-radius: 2px;
            pointer-events: none;
            z-index: -1;
        }
        .btn-large.edit-colors-btn { z-index: 0; }
        .btn-large.edit-colors-btn:hover::before {
            background: var(--btn-hover-bg);
            box-shadow: inset 0 0 2px var(--btn-hover-shadow);
        }

        .swap-colors-btn { position: relative; z-index: 1; pointer-events: auto; }

        .btn.active, .btn-large.active, .split-btn-container.active {
            background: var(--btn-active-bg);
            border-color: var(--btn-active-border);
            box-shadow: inset 0 0 3px var(--btn-active-shadow);
        }

        /* Resize and Skew modal (Win32 style) */
        /* Per-element position fine-tuning for the resize/skew modal. These are pixel nudges to align Win32-style form controls. */
        #modal-resize .window {
            background-color: #f0f0f0;
            width: 264px;
            height: 396px;
            box-shadow: 0 0 15px rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            border: 1px solid #999;
        }
        #modal-resize .title-bar {
            background-color: white;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 8px;
            font-size: 11px;
        }
        #modal-resize .close-btn {
            width: 40px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
            color: #111;
            margin-left: auto;
        }
        #modal-resize .close-btn:hover {
            background-color: #e81123;
            color: white;
        }
        #modal-resize .content { padding: 6px 8px 0px 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
        #modal-resize fieldset {
            border: 1px solid #dfdfdf;
            margin: 0;
            padding: 12px 8px 16px 8px;
            margin-bottom: 6px;
            border-radius: 2px;
            flex: 1;
        }
        #modal-resize legend {
            font-size: 11px;
            color: #000;
            padding: 0 4px;
            margin-left: -5px;
        }
        #modal-resize .row { display: flex; align-items: center; margin-bottom: 10px; }
        #modal-resize .row:last-child { margin-bottom: 0; }
        /* Skew uses manual nudge hacks in the floating window. */
        #modal-resize .sk-h-row { margin-top: -80px; }
        #modal-resize .sk-v-row { margin-top: 20px; }
        #modal-resize .sk-h-row,
        #modal-resize .sk-v-row { margin-left: 13px; }
        /* Resize fieldset: icon in column 1, fields in column 2. */
        #modal-resize .rz-fieldset {
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: 10px;
            row-gap: -6px;
            align-items: center;
            overflow: visible;
            flex: 0 0 auto;
            padding-bottom: 0;
        }
        #modal-resize .rz-fieldset > .rz-icon-row {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: center;
            justify-self: center;
        }
        #modal-resize .rz-fieldset > .row:not(.rz-icon-row),
        #modal-resize .rz-fieldset > .checkbox-row {
            grid-column: 2;
        }
        #modal-resize .rz-dual { display: flex; align-items: center; gap: 2px; }
        #modal-resize .rz-h-dual { transform: translateY(-9px); }
        #modal-resize .rz-h-dual { gap: 8px; }
        #modal-resize .rz-h-dual .rz-pair { display: flex; flex-direction: column; align-items: center; }
        #modal-resize .rz-h-dual .rz-unit { margin: 0 0 1px 0; }
        #modal-resize .rz-dual input.rz-num { width: 47px; }
        #modal-resize .rz-unit { font-size: 11px; color: #000; margin: 0 4px 0 1px; }
        /* Floating-window only: nudge the resize icon down. */
        #modal-resize .resize-icon-img { transform: translateY(26px); }
        #modal-resize .rz-h-row { transform: translateY(6px); }
        #modal-resize .rz-v-row { transform: translateY(-6px); }
        #modal-resize .rz-ratio-row { transform: translate(-80px, -20px); }
        #modal-resize #rz-v-px { transform: translateX(6px); }
        #modal-resize .col-icon { width: 48px; display: flex; justify-content: center; align-items: center; padding-top: 1px; }
        #modal-resize .col-icon svg { width: auto; height: auto; display: block; }
        #modal-resize .icon-stack-h { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        #modal-resize .icon-stack-v { display: flex; flex-direction: row; align-items: center; gap: 2px; }
        #modal-resize .resize-icon-img { width: auto; height: auto; display: block; image-rendering: pixelated; }
        #modal-resize .skew-icon-img { width: auto; height: auto; display: block; image-rendering: pixelated; }
        #modal-resize .rz-hidden { display: none; }
        #modal-resize .col-label { width: 62px; color: #000; font-size: 11px; }
        #modal-resize .col-input { flex-grow: 1; }
        #modal-resize .radio-container { display: flex; gap: 8px; }
        #modal-resize .radio-label { display: flex; align-items: center; gap: 4px; cursor: default; font-size: 11px; }
        #modal-resize input[type="radio"] { margin: 0; width: 14px; height: 14px; accent-color: var(--toggle-icon-color); transform: translateY(-1px); }
        #modal-resize input[type="text"] {
            width: 64px;
            height: 20px;
            box-sizing: border-box;
            padding: 0 6px;
            border: none;
            border-bottom: 1px solid #7a7a7a;
            background: #ffffff;
            font-family: inherit;
            font-size: 11px;
            outline: none;
            user-select: text;
        }
        #modal-resize input[type="text"]:hover { border-bottom-color: #3c3c3c; }
        #modal-resize input[type="text"]:focus { border-bottom-color: var(--toggle-icon-color); }
        #modal-resize .checkbox-row { margin-top: 14px; display: flex; align-items: center; }
        #modal-resize .checkbox-indent { margin-left: 30px; display: flex; align-items: center; gap: 6px; font-size: 11px; }
        #modal-resize input[type="checkbox"] { margin: 0; width: 12px; height: 12px; accent-color: var(--toggle-icon-color); border: 1px solid #777; }
        #modal-resize .footer {
            background-color: #f0f0f0;
            padding: 8px 10px 10px 10px;
            display: flex;
            justify-content: flex-end;
            gap: 6px;
        }
        #modal-resize .btn {
            width: 64px;
            height: 22px;
            background-color: #ffffff;
            border: 1px solid #adadad;
            font-family: inherit;
            font-size: 11px;
            cursor: pointer;
            border-radius: 2px;
            outline: none;
        }
        #modal-resize .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-resize .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-resize .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-resize .btn-ok { background-color: #ffffff; border: 2px solid #0078d7; }
        #modal-resize .btn-ok:hover { background-color: #e5f1fb; }
        #modal-resize .btn-ok:active { background-color: #cce4f7; border-color: #005499; }
        #modal-resize svg { overflow: visible; }
        #modal-resize .shape-stroke { fill: none; stroke: black; stroke-width: 1px; shape-rendering: crispEdges; }
        #modal-resize .red-arrow { fill: #ed1c24; }
        #modal-props .window {
            width: 620px;
            max-width: calc(100vw - 34px);
            max-height: calc(100vh - 48px);
            background-color: #f2f2f2;
            border: 1px solid #a8a8a8;
            box-shadow: 0 8px 22px rgba(0,0,0,0.22);
            position: absolute;
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 12px;
        }
        #modal-props .title-bar {
            height: 28px;
            background: #ffffff;
            border-bottom: 1px solid #d0d0d0;
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 12px;
            color: #111;
        }
        #modal-props .close-btn {
            margin-left: auto;
            width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #modal-props .close-btn:hover { background: #e81123; color: #fff; }
        #modal-props .content {
            padding: 10px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
        }
        #modal-props .props-edit-panel {
            background: #ffffff;
            border: 1px solid #d0d0d0;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #modal-props .props-edit-grid {
            display: grid;
            grid-template-columns: 100px 140px 100px 140px;
            gap: 8px;
            align-items: center;
        }
        #modal-props .props-edit-grid label { color: #333; font-size: 12px; }
        #modal-props .props-edit-grid input {
            height: 24px;
            border: 1px solid #bcbcbc;
            padding: 0 6px;
            font-size: 12px;
            background: #fff;
        }
        #modal-props .props-note { font-size: 11px; color: #616161; }
        #modal-props .props-info-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }
        #modal-props .props-card {
            background: #ffffff;
            border: 1px solid #d0d0d0;
            padding: 8px 10px;
            min-height: 0;
        }
        #modal-props .props-card h4 {
            margin: 0 0 6px 0;
            font-size: 12px;
            color: #2f2f2f;
            font-weight: 600;
        }
        #modal-props .props-kv {
            display: grid;
            grid-template-columns: 170px 1fr;
            gap: 4px 8px;
            align-items: baseline;
        }
        #modal-props .props-k { color: #5e5e5e; white-space: nowrap; }
        #modal-props .props-v {
            color: #1f1f1f;
            font-family: Consolas, "Courier New", monospace;
            overflow-wrap: anywhere;
        }
        #modal-props .footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 0 10px 10px 10px;
        }
        #modal-props .footer .btn {
            height: 24px;
            padding: 0 14px;
            border: 1px solid #adadad;
            background-color: #e1e1e1;
            font-family: inherit;
            font-size: 12px;
            cursor: pointer;
            border-radius: 2px;
        }
        #modal-props .footer .btn:hover { background-color: #e5f1fb; border-color: var(--toggle-icon-color); }
        #modal-props .footer .btn-ok { background: #fff; border: 1px solid #0078d7; box-shadow: inset 0 0 0 1px #0078d7; }
        .btn * { pointer-events: none; }

        .btn-large { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 4px; height: 100%; justify-content: center; border: 1px solid transparent; cursor: pointer; position: relative; background: transparent; }
        .btn-large .ribbon-icon { width: auto; height: auto; max-width: none; max-height: none; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
        .select-btn-wrap:hover { background: transparent; border-color: transparent; box-shadow: none; }

        .split-btn-container { display: flex; flex-direction: column; height: 100%; border: 1px solid transparent; }
        .split-btn-top { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }

        .split-btn-bottom { height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; gap: 2px; }
        .split-btn-container.select-split {
            border: 1px solid transparent;
            border-radius: 2px;
            overflow: hidden;
        }
        .split-btn-container.select-split.selection-highlight {
            border-color: #66a7e8;
        }
        .split-btn-container.select-split.selection-highlight .split-btn-top,
        .split-btn-container.select-split.selection-highlight .split-btn-bottom.select-dropdown {
            background: #cce8ff;
        }
        .split-btn-container.select-split .split-btn-bottom.select-dropdown {
            margin: 0;
            border: 0;
            border-top: 1px solid transparent;
            border-radius: 0;
            background: transparent;
            height: 24px;
            flex-direction: column;
            line-height: 1;
        }
        .split-btn-container.select-split .split-btn-bottom.select-dropdown.selection-highlight {
            border-top-color: #66a7e8;
        }
        .split-btn-container.select-split .split-btn-bottom.select-dropdown span:first-child {
            font-size: 11px;
        }
        .split-btn-container.select-split .split-btn-bottom.select-dropdown .caret {
            display: block;
            margin-top: -3px;
            line-height: 1;
        }
        .rotate-caret {
            display: inline-flex;
            margin-top: -1px;
        }
        .split-btn-container.select-split:hover {
            border-color: #9fc4ea;
            background: var(--btn-hover-bg);
            box-shadow: inset 0 0 2px var(--btn-hover-shadow);
        }
        .split-btn-container.select-split:hover .split-btn-bottom.select-dropdown {
            border-top-color: #9fc4ea;
            background: var(--btn-hover-bg);
            box-shadow: inset 0 0 2px var(--btn-hover-shadow);
        }
        .btn-icon { width: 24px; height: 24px; }
        .btn-icon img.toolbar-icon {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        /* Allow icons with non-24x24 native sizes (ex: Triangle 18x26) to render without clipping. */
        [data-tool="tri"] img.toolbar-icon,
        [data-tool-id="tri"] img.toolbar-icon {
            width: 24px;
            height: 26px;
            transform: translateY(0px);
        }
        [data-tool="gradient"] img.toolbar-icon,
        [data-tool-id="gradient"] img.toolbar-icon {
            width: 15px;
            height: 17px;
        }
        [data-tool="freehand"] img.toolbar-icon,
        [data-tool-id="freehand"] img.toolbar-icon {
            width: 20px;
            height: 14px;
        }
        [data-tool="paintbrush"] img.toolbar-icon,
        [data-tool-id="paintbrush"] img.toolbar-icon {
            width: 18px;
            height: 17px;
        }
        #anchor-rotate-toggle-btn img.toolbar-icon,
        [data-tool-id="anchor-toggle"] img.toolbar-icon,
        [data-tool-id="layers-toggle"] img.toolbar-icon,
        [data-tool-id="pokeproject"] img.toolbar-icon {
            width: auto;
            height: auto;
            max-width: 24px;
            max-height: 24px;
        }
        /* Per-icon pixel nudges for visual alignment. */
        [data-tool="eraser"] img.toolbar-icon,
        [data-tool-id="eraser"] img.toolbar-icon { transform: translateY(1px); }
        [data-tool="picker"] img.toolbar-icon,
        [data-tool-id="picker"] img.toolbar-icon { transform: translate(1px, 1px); }
        #wand-tool-btn .wand-icon-contig img.toolbar-icon,
        [data-tool-id="wand"] .wand-icon-contig img.toolbar-icon { transform: translateX(2px); }
        .btn-icon .pencil-icon {
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
        }
        .btn-icon .pencil-icon img.toolbar-icon {
            margin: 0;
        }
        .select-icon { display: none; }
        .select-icon.show { display: block; }
        img.select-icon {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }

        /* MENUS */

        .dropdown-menu { position: absolute; background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); box-shadow: 2px 2px 5px var(--dropdown-shadow); display: none; flex-direction: column; min-width: 150px; padding: 2px; z-index: 10001; }

        .dd-item { padding: 5px 5px 5px 5px; cursor: pointer; display: flex; align-items: center; gap: 8px; position: relative; }
        .dd-item:hover { background: var(--dropdown-item-hover-bg); }
        .pixel-perfect {
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            -ms-interpolation-mode: nearest-neighbor;
        }
        .dd-icon { margin-right: 3px; }
        .submenu { position: absolute; left: 100%; top: -1px; display: none; flex-direction: column; background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); box-shadow: 2px 2px 5px var(--dropdown-shadow); min-width: 150px; padding: 2px; z-index: 10002; }
        .dd-item:hover > .submenu { display: flex; }
        .dd-arrow { margin-left: auto; font-size: 10px; color: var(--dropdown-arrow-color); }
        .dd-sep { height: 1px; background: var(--dropdown-separator); margin: 2px 0; }
        .dd-check { width: 16px; visibility: hidden; }
        .checked .dd-check { visibility: visible; }

        /* File menu template (left actions + right recent files) */
        #file-menu.file-menu-template {
            position: absolute;
            width: 337px;
            min-width: 337px;
            padding: 0;
            border: 1px solid #b9c1d1;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
            overflow: visible;
            flex-direction: row;
        }
        #file-menu.file-menu-template.recent-collapsed {
            width: 216px;
            min-width: 216px;
        }
        #file-menu .file-menu-left {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e0e4ea;
            background: #ffffff;
        }
        #file-menu .file-menu-item {
            width: 100%;
            max-width: 100%;
            height: 44px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0 10px;
            cursor: pointer;
            color: #333333;
            border: 1px solid transparent;
        }
        #file-menu .file-menu-item:hover {
            background-color: #e5f3fb;
            border-color: #d8eaf9;
        }
        #file-menu .file-menu-icon {
            width: 32px;
            height: 32px;
            text-align: center;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transform: translateZ(0);
        }
        #file-menu .file-menu-icon img {
            width: 32px;
            height: 32px;
            display: block;
            image-rendering: -webkit-optimize-contrast;
        }
        #file-menu .file-menu-label {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #file-menu .file-menu-separator {
            height: 1px;
            background-color: #e0e4ea;
            margin: 2px 0;
        }
        #file-menu .file-menu-right {
            flex: 0 0 121px;
            width: 121px;
            margin-left: auto;
            background-color: #f5f6f7;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        #file-menu.file-menu-template.recent-collapsed .file-menu-right {
            display: none;
        }
        #file-menu.file-menu-template.recent-collapsed .file-menu-left {
            flex: 1 1 auto;
            width: auto;
            border-right: none;
        }
        #file-menu .file-menu-recent-toggle {
            position: absolute;
            right: -1px;
            top: -1px;
            bottom: auto;
            width: 14px;
            height: 16px;
            border: 1px solid #c3c9d1;
            border-right: none;
            border-radius: 1px 0 0 1px;
            background: #f4f5f7;
            color: #5b6168;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 9px;
            line-height: 1;
            z-index: 2;
        }
        #file-menu .file-menu-recent-toggle:hover {
            background: #eceff3;
            color: #39414a;
        }
        #file-menu.file-menu-template.recent-collapsed .file-menu-recent-toggle {
            right: -13px;
            top: -1px;
            border-right: 1px solid #c3c9d1;
            border-left: none;
            border-radius: 0 1px 1px 0;
        }
        #file-menu .file-menu-recent-header {
            padding: 8px 12px;
            border-bottom: 1px solid #e0e4ea;
            color: #555555;
            font-weight: 600;
        }
        #file-menu .file-menu-recent-list {
            list-style: none;
            margin: 0;
            padding: 0;
            overflow: auto;
            flex: 1;
            min-height: 0;
        }
        #file-menu .file-menu-recent-item {
            padding: 4px 12px;
            cursor: default;
            display: flex;
            gap: 8px;
            min-height: 24px;
            align-items: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #file-menu .file-menu-recent-item span:last-child {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #file-menu .file-menu-recent-item:hover {
            background-color: #e5f3fb;
        }
        #file-menu .file-menu-recent-item.is-empty {
            font-size: 11px;
            color: #6a6a6a;
        }
        #file-menu .file-menu-recent-number {
            text-decoration: underline;
            width: 12px;
            flex-shrink: 0;
            color: #2f2f2f;
        }
        body.dark-mode #file-menu.file-menu-template {
            border-color: #4c5666;
            box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
        }
        body.dark-mode #file-menu .file-menu-left {
            border-right-color: #465161;
            background: #1f2731;
        }
        body.dark-mode #file-menu .file-menu-item {
            color: #e6edf5;
        }
        body.dark-mode #file-menu .file-menu-item:hover {
            background-color: #2a3c52;
            border-color: #355474;
        }
        body.dark-mode #file-menu .file-menu-separator {
            background-color: #465161;
        }
        body.dark-mode #file-menu .file-menu-right {
            background-color: #25303b;
        }
        body.dark-mode #file-menu .file-menu-recent-toggle {
            background: #2a3037;
            border-color: #465161;
            border-right: none;
            color: #c9d2db;
        }
        body.dark-mode #file-menu .file-menu-recent-toggle:hover {
            background: #353d47;
            color: #eef4fb;
        }
        body.dark-mode #file-menu.file-menu-template.recent-collapsed .file-menu-recent-toggle {
            border-right: 1px solid #465161;
            border-left: none;
        }
        body.dark-mode #file-menu .file-menu-recent-header {
            color: #d7e1ea;
            border-bottom-color: #465161;
        }
        body.dark-mode #file-menu .file-menu-recent-item {
            color: #d7e1ea;
        }
        body.dark-mode #file-menu .file-menu-recent-item:hover {
            background-color: #2a3c52;
        }

        .btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 140px; max-height: 90px; overflow-y: auto; }

        .btn-small { border: 1px solid var(--btn-small-border); background: var(--btn-small-bg); padding: 2px 4px; font-size: 10px; text-align: center; cursor: pointer; }
        .btn-small.active { background: var(--bg-selected); border-color: var(--win-blue); font-weight: bold; }
        #btn-grid-modes { width: 100px; gap: 1px; max-height: none; overflow: visible; }
        #btn-grid-modes .btn-small { width: 48px; height: 20px; line-height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; }

        /* ══════════════════════════════════════════════════════════
           FREEHAND BRUSH + PAINT BRUSH SIDEBARS — Fluent-style flyout
           ══════════════════════════════════════════════════════════ */

        /* Shared panel: acrylic-tinted background, flat square edge,
           Windows 10-style flyout — no rounding, no drop shadow. */
        #freehand-sidebar, #paintbrush-sidebar, #gradient-sidebar {
            position: fixed; top: 145px; bottom: 24px; left: -296px;
            width: 280px; z-index: 9988;
            background: #f5f6f7;
            border-right: 1px solid var(--border-ribbon, #dadbdc);
            border-radius: 0;
            display: flex; flex-direction: column;
            transition: left .24s cubic-bezier(.16,1,.3,1);
            pointer-events: auto;
        }
        #freehand-sidebar *, #paintbrush-sidebar *, #gradient-sidebar * { pointer-events: auto; }
        #freehand-sidebar.open, #paintbrush-sidebar.open, #gradient-sidebar.open { left: 0; }

        #freehand-sidebar-header, #paintbrush-sidebar-header, #gradient-sidebar-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 6px 6px 6px 10px;
            font-size: 12px; font-weight: 600;
            color: var(--app-text-color);
            border-bottom: 1px solid color-mix(in srgb, var(--section-divider, #e0e0e0) 80%, transparent);
            flex-shrink: 0;
        }
        #freehand-sidebar-header > span, #paintbrush-sidebar-header > span, #gradient-sidebar-header > span { flex: 1; }
        #freehand-collapse-btn, #paintbrush-collapse-btn, #gradient-collapse-btn {
            background: none; border: none; cursor: pointer; font-size: 11px;
            color: var(--section-title-color); padding: 0; line-height: 1;
            width: 24px; height: 24px; border-radius: 2px;
            display: flex; align-items: center; justify-content: center;
            margin-left: auto;
            transition: transform .15s cubic-bezier(.16,1,.3,1), background .12s ease;
        }
        #freehand-collapse-btn:hover, #paintbrush-collapse-btn:hover, #gradient-collapse-btn:hover {
            background: color-mix(in srgb, var(--app-text-color, #111) 8%, transparent);
        }
        #freehand-collapse-btn:active, #paintbrush-collapse-btn:active, #gradient-collapse-btn:active {
            background: color-mix(in srgb, var(--app-text-color, #111) 14%, transparent);
        }
        #freehand-collapse-btn.collapsed, #paintbrush-collapse-btn.collapsed, #gradient-collapse-btn.collapsed { transform: rotate(-90deg); }

        #freehand-sidebar-body, #paintbrush-sidebar-body, #gradient-sidebar-body {
            flex: 1; overflow-y: auto; padding: 10px 12px 6px;
            min-height: 0;
            scrollbar-width: none;
        }
        #freehand-sidebar-body::-webkit-scrollbar, #paintbrush-sidebar-body::-webkit-scrollbar, #gradient-sidebar-body::-webkit-scrollbar { width: 0; display: none; }
        #gradient-options { padding-top: 8px; }

        .fh-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--threshold-label-color); padding: 0; margin-bottom: 2px; }
        .fh-row label { min-width: 80px; text-align: right; white-space: nowrap; }
        .fh-row input[type="range"] { flex: 1; height: 20px; min-width: 40px; margin: 0; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--win-blue) 0%, var(--win-blue) var(--pct, 0%), color-mix(in srgb, var(--app-text-color, #111) 14%, transparent) var(--pct, 0%), color-mix(in srgb, var(--app-text-color, #111) 14%, transparent) 100%); border-radius: 10px; cursor: pointer; outline: none; transition: box-shadow .12s ease; }
        .fh-row input[type="range"]:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--win-blue) 35%, transparent); }
        .fh-row input[type="range"]:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--win-blue) 55%, transparent); }
        .fh-row input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 20px; border: none; }
        .fh-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; opacity: 0; }
        .fh-row input[type="range"]::-moz-range-track { background: transparent; height: 20px; border: none; }
        .fh-row input[type="range"]::-moz-range-progress { background: transparent; height: 20px; }
        .fh-row input[type="range"]::-moz-range-thumb { width: 0; height: 0; opacity: 0; }
        .fh-row select {
            font-size: 10px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--btn-small-border, #ccc) 80%, transparent);
            border-radius: 2px; background: var(--dropdown-bg); color: var(--app-text-color);
            transition: border-color .12s ease, background .12s ease;
        }
        .fh-row select:hover { border-color: color-mix(in srgb, var(--win-blue) 50%, var(--btn-small-border, #ccc)); }
        .fh-row select:focus-visible { outline: 2px solid color-mix(in srgb, var(--win-blue) 55%, transparent); outline-offset: 1px; }
        .fh-row input[type="checkbox"] { cursor: pointer; margin-left: 4px; accent-color: var(--win-blue); }
        .fh-row input[type="color"] { width: 24px; height: 24px; border: none; border-radius: 2px; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-text-color, #111) 14%, transparent) inset; }
        .fh-color-wrap { display: flex; align-items: center; gap: 4px; flex: 1; }
        .fh-color-edit {
            width: 24px; height: 24px; font-size: 12px; background: var(--btn-small-bg);
            border: 1px solid color-mix(in srgb, var(--btn-small-border, #ccc) 80%, transparent);
            border-radius: 3px; cursor: pointer; color: var(--app-text-color);
            display: flex; align-items: center; justify-content: center; transition: background .12s ease, border-color .12s ease;
        }
        .fh-color-edit:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border); }
        .fh-separator { border-top: 1px solid color-mix(in srgb, var(--section-divider, #e0e0e0) 70%, transparent); margin: 8px 2px; }
        .fh-label {
            font-size: 10.5px; color: var(--section-title-color); text-align: left;
            font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
            padding: 2px 4px 6px;
        }
        .fh-section {
            background: color-mix(in srgb, var(--app-text-color, #111) 3%, transparent);
            border-radius: 3px; padding: 10px 10px 8px; margin: 0 0 8px;
            border: 1px solid color-mix(in srgb, var(--app-text-color, #111) 6%, transparent);
        }
        .fh-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0; margin-right: 4px; }
        .fh-swatch-label { font-size: 10px; color: var(--section-title-color); white-space: nowrap; }
        .fh-hidden { visibility: hidden; pointer-events: none; }
        #fh-capStart-row, #fh-easingStart-row, #fh-capEnd-row, #fh-easingEnd-row { min-height: 22px; }

        #freehand-reopen-btn, #pb-reopen-btn, #gradient-reopen-btn {
            position: fixed; left: 0; top: 145px;
            z-index: 10000; width: 24px; height: 24px; padding: 0;
            background: #f5f6f7;
            border: 1px solid var(--border-ribbon, #dadbdc);
            border-left: none; border-radius: 0 4px 4px 0;
            cursor: pointer; display: none; align-items: center; justify-content: center;
            font-size: 10px; color: var(--section-title-color);
            transition: color .12s ease;
        }
        #freehand-reopen-btn:hover, #pb-reopen-btn:hover, #gradient-reopen-btn:hover { color: var(--win-blue); }
        #freehand-reopen-btn.show, #pb-reopen-btn.show, #gradient-reopen-btn.show { display: flex; }

        .sb-close-x {
            width: 24px; height: 24px; border: none; background: transparent;
            cursor: pointer; color: #e81123; font-size: 13px; line-height: 1;
            border-radius: 2px; display: flex; align-items: center; justify-content: center;
            margin-left: 2px;
            transition: background .12s ease, color .12s ease;
        }
        .sb-close-x:hover { background: #e81123; color: #fff; }
        .sb-close-x:active { background: #c20b1c; color: #fff; }

        .fh-reset-row, .pb-reset-row { display: flex; justify-content: center; padding: 10px 4px 6px; }
        #fh-reset-btn, #pb-reset-btn {
            font-size: 11px; padding: 5px 16px; cursor: pointer;
            border: 1px solid color-mix(in srgb, var(--btn-small-border, #ccc) 75%, transparent);
            background: var(--btn-small-bg, #f9f9f9);
            border-radius: 3px; color: var(--app-text-color);
            transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
        }
        #fh-reset-btn:hover, #pb-reset-btn:hover {
            background: color-mix(in srgb, var(--win-blue) 10%, var(--btn-hover-bg, #eaf4ff));
            border-color: var(--win-blue);
        }
        #fh-reset-btn:active, #pb-reset-btn:active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--win-blue) 22%, transparent); }

        .pb-section {
            background: color-mix(in srgb, var(--app-text-color, #111) 3%, transparent);
            border-radius: 3px; padding: 6px 6px; margin: 0 0 8px;
            border: 1px solid color-mix(in srgb, var(--app-text-color, #111) 6%, transparent);
        }
        .pb-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--threshold-label-color); padding: 0; margin-bottom: 2px; }
        .pb-row label {
            min-width: 60px;
            text-align: right;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .pb-row > input[type="range"] { flex: 1; height: 14px; cursor: pointer; min-width: 40px; }
        .pb-row select {
            font-size: 10px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--btn-small-border, #ccc) 80%, transparent);
            border-radius: 2px; background: var(--dropdown-bg); color: var(--app-text-color);
            transition: border-color .12s ease;
        }
        .pb-row select:hover { border-color: color-mix(in srgb, var(--win-blue) 50%, var(--btn-small-border, #ccc)); }
        .pb-smode-btns { display: flex; gap: 2px; flex: 1; }
        .pb-smode-btn {
            flex: 1; font-size: 10px; padding: 3px 4px; cursor: pointer;
            border: 1px solid transparent; background: transparent; border-radius: 3px;
            color: var(--app-text-color); text-align: center; white-space: nowrap;
            transition: background .12s ease, color .12s ease, box-shadow .12s ease;
        }
        .pb-smode-btn.active { background: var(--win-blue, #0078d7); color: #fff; border-color: var(--win-blue, #0078d7); }
        .pb-smode-btn:hover { background: color-mix(in srgb, var(--win-blue) 14%, transparent); }
        .pb-smode-btn.active:hover { background: var(--accent, #005bb5); }
        body.dark-mode .pb-smode-btn:hover { background: color-mix(in srgb, var(--win-blue) 22%, transparent); }
        body.dark-mode .pb-smode-btn.active { background: var(--win-blue, #0078d7); }
        .pb-row.disabled { opacity: 0.4; pointer-events: none; }
        .pb-val { min-width: 24px; text-align: center; font-size: 10px; }
        .pb-slider-wrap { position: relative; flex: 1; height: 20px; min-width: 24px; font-size: 10px; }
        .pb-slider-wrap input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 20px; margin: 0; -webkit-appearance: none; appearance: none; background: linear-gradient(to right, var(--win-blue) 0%, var(--win-blue) var(--pct, 0%), color-mix(in srgb, var(--app-text-color, #111) 14%, transparent) var(--pct, 0%), color-mix(in srgb, var(--app-text-color, #111) 14%, transparent) 100%); border-radius: 10px; cursor: pointer; outline: none; z-index: 1; transition: box-shadow .12s ease; }
        .pb-slider-wrap input[type="range"]:focus-visible {  }
        .pb-slider-wrap input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 20px; border: none; }
        .pb-slider-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; opacity: 0; }
        .pb-slider-wrap input[type="range"]::-moz-range-track { background: transparent; height: 20px; border: none; }
        .pb-slider-wrap input[type="range"]::-moz-range-progress { background: transparent; height: 20px; }
        .pb-slider-wrap input[type="range"]::-moz-range-thumb { width: 0; height: 0; opacity: 0; }
        .pb-slider-wrap .pb-val { position: absolute; top: 0; left: 0; width: 100%; height: 20px; line-height: 20px; text-align: right; padding-right: 4px; font-size: 11px; font-weight: 700; pointer-events: none !important; min-width: auto; z-index: 2; box-sizing: border-box; background: linear-gradient(to right, #fff var(--pct, 0%), var(--win-blue, #0078d7) var(--pct, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .pb-slider-wrap .pb-label-inner { position: absolute; top: 0; left: 0; width: 100%; height: 20px; line-height: 20px; padding-left: 4px; font-size: 11px; font-weight: 700; pointer-events: none !important; white-space: nowrap; z-index: 2; text-align: left; box-sizing: border-box; background: linear-gradient(to right, #fff var(--pct, 0%), var(--win-blue, #0078d7) var(--pct, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
        body.dark-mode .pb-slider-wrap input[type="range"], body.dark-mode .fh-row input[type="range"] { background: linear-gradient(to right, var(--win-blue) 0%, var(--win-blue) var(--pct, 0%), color-mix(in srgb, #fff 16%, transparent) var(--pct, 0%), color-mix(in srgb, #fff 16%, transparent) 100%); }
        .pb-label {
            font-size: 10.5px; color: var(--section-title-color); text-align: left;
            font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
            padding: 2px 4px 6px;
        }
        #pb-brush-grid { display: grid; grid-template-columns: repeat(4, 66px); gap: 5px 3px; margin-bottom: 6px; margin-left: -9px; }
        .pb-brush-tile { position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 4px; cursor: pointer; overflow: hidden; background: #fff; transition: border-color .15s ease; }
        .pb-brush-tile:hover { border-color: var(--accent-light, #8ab4f8); }
        .pb-brush-tile.active { border-color: var(--accent, #1a73e8); }
        .pb-brush-tile canvas { width: 100%; height: 100%; display: block; }
        #pb-active-name { text-align: center; font-size: 11px; font-weight: 600; color: var(--app-text-color); padding: 2px 0 6px; }
        #pb-key-settings { margin-bottom: 4px; padding: 0; }
        #pb-more-settings.pb-more-collapsed #pb-more-body { display: none; }
        #pb-more-toggle {
            width: 100%; background: color-mix(in srgb, var(--app-text-color, #111) 4%, transparent);
            border: 1px solid color-mix(in srgb, var(--section-divider, #e0e0e0) 60%, transparent);
            border-radius: 2px; padding: 5px 6px; font-size: 10px; cursor: pointer;
            color: var(--section-title-color); text-align: center; margin: 4px 0;
            transition: background .12s ease, border-color .12s ease;
        }
        #pb-more-toggle:hover { background: color-mix(in srgb, var(--win-blue) 10%, transparent); border-color: color-mix(in srgb, var(--win-blue) 30%, transparent); }
        .pb-arrow { display: inline-block; vertical-align: middle; transition: transform .15s ease; }
        #pb-more-toggle[aria-expanded="true"] .pb-arrow { transform: rotate(180deg); }
        #pb-more-body { padding: 6px 2px 2px; }
        #paintbrush-sidebar-body > .pb-section { position: relative; }

        .wand-icon { display: none; line-height: 1; width: 22px; height: 22px; align-items: center; justify-content: center; transform: translateX(-1px) translateZ(0); }
        .wand-icon.show { display: inline-flex; }
        .wand-icon img {
            width: 22px;
            height: 22px;
            display: block;
        }
        .pencil-icon { display: none; line-height: 1; width: 22px; height: 22px; align-items: center; justify-content: center; transform: translateX(0px) translateZ(0); }
        .pencil-icon.show { display: inline-flex; }
        .pencil-icon img {
            width: 22px;
            height: 22px;
            display: block;
        }
        .pencil-icon-standard img {
            width: 17px;
            height: 19px;
        }
        .wand-menu-icon { width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; }
        .wand-menu-icon img {
            width: 20px;
            height: 20px;
            display: block;
        }
        .icon-wand-global {
            transform: translateX(1px);
        }
        .ribbon-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 0 4px; }
        .ribbon-toggle input { margin: 0; width: 14px; height: 14px; accent-color: var(--toggle-icon-color); }
        .toggle-btn {
            gap: 4px;
            background: transparent;
            border: 1px solid transparent;
        }
        .toggle-btn .toggle-icons {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--toggle-icon-color);
        }
        #anchor-toggle-btn .toggle-icons { color: var(--anchor-toggle-icon-color); }
        #theme-mode-btn .toggle-icons { color: var(--theme-mode-toggle-icon-color); }
        body.dark-mode .toggle-btn .toggle-icons { color: var(--toggle-icon-color-dark); }
        body.dark-mode #anchor-toggle-btn .toggle-icons { color: var(--anchor-toggle-icon-color-dark); }
        body.dark-mode #theme-mode-btn .toggle-icons { color: var(--theme-mode-toggle-icon-color-dark); }
        body.dark-mode svg [fill="#0078d7"] { fill: #ffffff; }
        body.dark-mode svg [stroke="#0078d7"] { stroke: #ffffff; }
        .toggle-btn .toggle-icons svg { width: 24px; height: 24px; display: none; }
        .toggle-btn .toggle-icons img { display: none; }
        .toggle-btn.is-on .icon-on { display: block; }
        .toggle-btn:not(.is-on) .icon-off { display: block; }
        .toggle-status {
            font-size: 11px;
            color: var(--toggle-status-color);
        }
        .hotkeys-icon { color: var(--hotkeys-icon-color); }
        body.dark-mode .hotkeys-icon { color: var(--hotkeys-icon-color-dark); }

        /* Selection dropdown (MS Paint style) */
        #select-menu {
            --bg-color: #ffffff;
            --border-outer: #8e8f8f;
            --header-text: #1e395b;
            --text-color: #1e1e1e;
            --disabled-text: #8c8c8c;
            --separator: #e0e0e0;
            --item-hover-bg: #eaf6fd;
            --item-hover-border: #a8d2f3;
            --item-select-bg: #e2f1ff;
            --item-select-border: #a4cef5;
            --icon-stroke: #1d59aa;
            background-color: var(--bg-color);
            border: 1px solid var(--border-outer);
            box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
            padding: 2px;
            width: 170px;
            height: 197px;
            overflow: hidden;
            flex-direction: column;
        }
        #select-menu .header {
            color: var(--select-menu-header-color);
            font-weight: 600;
            padding: 2px 0 4px 15px;
            letter-spacing: 0.2px;
            background-color: var(--select-menu-header-bg);
        }
        #select-menu .item {
            display: flex;
            align-items: center;
            height: 20px;
            margin: 0 1px 1px;
            border: 1px solid transparent;
            position: relative;
            color: var(--text-color);
        }
        #select-menu .item.active,
        #select-menu .item.checked,
        #select-menu .item.selection-highlight {
            background-color: var(--item-select-bg);
            border-color: var(--item-select-border);
        }
        #select-menu .item:not(.disabled):not(.active):not(.checked):hover {
            background-color: var(--item-hover-bg);
            border-color: var(--item-hover-border);
        }
        #select-menu .gutter {
            width: 28px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
        }
        #select-menu svg {
            width: 16px;
            height: 16px;
            min-width: 16px;
            min-height: 16px;
            max-width: 16px;
            max-height: 16px;
            shape-rendering: crispEdges;
            fill: none;
            stroke: var(--icon-stroke);
            stroke-width: 1;
        }
        #select-menu img { display: block; }
        #select-menu .icon-poly { image-rendering: pixelated; image-rendering: crisp-edges; }
        #select-menu .dashed { stroke-dasharray: 2 2; }
        #select-menu .icon-all rect { fill: var(--select-menu-icon-all-fill); stroke: var(--icon-stroke); stroke-dasharray: 2 2; }
        #select-menu .disabled svg { stroke: var(--select-menu-icon-disabled-stroke); }
        #select-menu .disabled .icon-all rect { fill: var(--select-menu-icon-all-fill-disabled); }
        #select-menu .icon-delete path { stroke: var(--select-menu-icon-delete-stroke); stroke-width: 2; shape-rendering: geometricPrecision; }
        #select-menu .disabled .icon-delete path { stroke: var(--select-menu-icon-disabled-stroke); }
        #select-menu .label { color: inherit; padding-left: 4px; white-space: nowrap; }
        #select-menu .shortcut { text-decoration: underline; }
        #select-menu .disabled { color: var(--disabled-text); pointer-events: none; }
        #select-menu .separator {
            height: 1px;
            background-color: var(--separator);
            margin: 4px 0 4px 30px;
            width: calc(100% - 34px);
        }

        #viewport { flex: 1; background: var(--bg-canvas); overflow: auto; position: relative; display: flex; padding: 10px; z-index: 0; transition: padding-left .24s cubic-bezier(.16,1,.3,1); }
        #viewport.free-canvas { padding: 0; }
        #viewport.sidebar-open { padding-left: 290px; }
        #viewport.no-pad-transition { transition: none !important; }

        #canvas-stage { position: relative; margin: 0; box-shadow: 3px 3px 5px rgba(0,0,0,0.2); background: white; cursor: crosshair; transform-origin: 0 0; flex-shrink: 0; image-rendering: pixelated; }
        #canvas-stage.drop-highlight {
            outline: 2px dashed #2a73d9;
            outline-offset: 4px;
            box-shadow: 0 0 0 4px rgba(42,115,217,0.18), 3px 3px 5px rgba(0,0,0,0.2);
        }

        /* Hide default cursor when eraser is active so we only see the ghost */
        #canvas-stage.eraser-active { cursor: none !important; }

        canvas { display: block; position: absolute; top: 0; left: 0; image-rendering: pixelated; }
        #grad-bar { position: static; }
        #layer-main { z-index: 10; }
        #layer-temp { z-index: 20; pointer-events: auto; }
        #layer-lasso { z-index: 30; pointer-events: none; }

        /* SVG SELECTION OVERLAY */
        #global-overlay-svg {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            z-index: 30;
            overflow: visible;
            mix-blend-mode: normal;
        }
        #global-overlay-svg.overlay-unscaled {
            transform: scale(var(--zoom-inv));
            transform-origin: 0 0;
        }
        #global-overlay-svg.svg-marquee-invert-mode {
            mix-blend-mode: difference;
        }

        .svg-marquee-rect {
            fill: none;
            stroke-width: 1px;
            stroke-dasharray: 4 4;
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
        }
        .svg-marquee-rect#svg-ghost-rect {
            stroke: #8a8a8a;
            stroke-dasharray: 2 2;
            opacity: 0.9;
        }
        .svg-marquee-rect.marquee-blue { stroke: #1b6fe5; }
        .svg-marquee-rect.marquee-white { stroke: #ffffff; }
        .svg-marquee-rect.svg-marquee-invert {
            stroke: white;
        }
        .svg-ants-path {
            fill: none;
            stroke: white;
            stroke-width: 1px;
            stroke-dasharray: 15 15;
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
            animation: ants-march 3.5s linear infinite;
        }
        .svg-ants-path-back {
            fill: none;
            stroke: #000;
            stroke-width: 1px;
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
        }
        @keyframes ants-march {
            to { stroke-dashoffset: -30; }
        }

        /* ERASER GHOST CURSOR */
        #eraser-ghost {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            display: none;
            outline: 1px solid black;
            border: none;
            background-color: white;
            transform: none;
        }
        #save-indicator {
            position: fixed;
            right: 16px;
            bottom: 16px;
            width: 16px;
            height: 16px;
            border: 2px solid #3a8dde;
            border-top-color: transparent;
            border-radius: 50%;
            animation: save-spin 0.7s linear infinite;
            display: none;
            z-index: 20000;
        }
        @keyframes save-spin {
            to { transform: rotate(360deg); }
        }
        #modal-wincolor {
            --win-bg: #f0f0f0;
            --win-text: #000000;
            --win-border-light: #ffffff;
            --win-border-dark: #a0a0a0;
            --win-border-darker: #696969;
            --win-btn-hover: #e0e0e0;
            --win-btn-active: #c0c0c0;
            --win-highlight: #0078d7;
            --input-border: #d9d9d9;
            --input-border-focus: #0078d7;
        }

        #modal-wincolor * { box-sizing: border-box; user-select: none; cursor: default !important; }
        #modal-wincolor input { user-select: auto !important; cursor: pointer; }

        #modal-depth {
            --win-bg: #f0f0f0;
            --win-text: #000000;
            --win-border-light: #ffffff;
            --win-border-dark: #a0a0a0;
            --win-highlight: #0078d7;
            --border-outer: #d9d9d9;
            --input-border: #7a7a7a;
            --input-focus: #0078d7;
            --btn-hover: #e5f1fb;
            --btn-border: #adadad;
        }
        #modal-depth * { box-sizing: border-box; user-select: none; cursor: default; }
        #modal-depth input { user-select: auto; cursor: pointer; }
        body.busy-cursor #modal-depth *,
        body.busy-cursor #modal-huesat *,
        body.busy-cursor #modal-wincolor *,
        body.busy-cursor .modal-window,
        body.busy-cursor .modal-mask {
            cursor: wait !important;
        }
        #modal-depth .window {
            width: 330px;
            background-color: var(--win-bg);
            border: 1px solid #999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
        }
        #modal-depth .title-bar {
            background-color: #fff;
            height: 28px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 8px;
            font-size: 12px;
            color: #000;
        }
        #modal-depth .close-btn {
            width: 40px;
            height: 28px;
            border: none;
            background: transparent;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }
        #modal-depth .close-btn:hover { background-color: #e81123; color: white; }
        #modal-depth .content {
            padding: 12px 12px 16px 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        #modal-depth .section-header {
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--win-text);
            display: block;
        }
        #modal-depth .vertical-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding-left: 4px;
        }
        #modal-depth .depth-group-label {
            display: block;
            margin: 0 0 4px 0;
            color: var(--win-text);
        }
        #modal-depth .depth-color-list {
            padding-left: 8px;
        }
        #modal-depth .depth-color-list .control-item {
            padding: 1px 0;
        }
        #modal-depth .depth-options-list {
            gap: 5px;
        }
        #modal-depth .control-item {
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        #modal-depth .depth-color-list input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 1px;
            height: 1px;
            pointer-events: none;
        }
        #modal-depth .depth-radio {
            width: 13px;
            height: 13px;
            flex: 0 0 13px;
            border: 1px solid #707070;
            border-radius: 50%;
            background: #ffffff;
            position: relative;
            display: grid;
            place-items: center;
            cursor: default;
        }
        #modal-depth .depth-color-list input[type="radio"]:checked + .depth-radio {
            border: 0;
            background: #0078D7;
        }
        #modal-depth .depth-color-list .control-item:hover input[type="radio"]:checked + .depth-radio {
            transform: none;
        }
        #modal-depth .depth-color-list input[type="radio"]:checked + .depth-radio::after {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #ffffff;
            position: static;
            transform-origin: center;
            animation: depth-radio-pop 120ms ease-out;
        }
        #modal-depth .depth-color-list .control-item:hover input[type="radio"]:checked + .depth-radio::after {
            width: 7px;
            height: 7px;
        }
        #modal-depth .depth-color-list input[type="radio"]:focus {
            outline: none;
        }
        #modal-depth #custom-depth-val {
            border: 0;
            border-bottom: 1px solid var(--input-border);
            background: #ffffff;
            text-align: center;
            appearance: textfield;
            -moz-appearance: textfield;
        }
        #modal-depth #custom-depth-val:focus {
            border: 0;
            border-bottom: 2px solid var(--input-focus);
            padding: 0 4px;
        }
        #modal-depth #custom-depth-val::-webkit-outer-spin-button,
        #modal-depth #custom-depth-val::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        @keyframes depth-radio-pop {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }
        #modal-depth .depth-hidden-legacy,
#unified-sidebar .window .depth-hidden-legacy {
            display: none !important;
        }
        #modal-depth input[type="text"],
        #modal-depth input[type="number"] {
            height: 22px;
            border: 1px solid var(--input-border);
            padding: 0 4px;
            font-family: inherit;
            font-size: 12px;
            outline: none;
        }
        #modal-depth input[type="text"]:focus,
        #modal-depth input[type="number"]:focus {
            border-color: var(--input-focus);
            border-width: 2px;
            padding: 0 3px;
        }
        #modal-depth .divider {
            height: 1px;
            background-color: #d9d9d9;
            width: 100%;
            margin: 4px 0;
        }
        #modal-depth .param-row {
            display: flex;
            align-items: center;
            height: 24px;
        }
        #modal-depth .param-icon {
            width: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 8px;
        }
        #modal-depth .param-label { width: 70px; }
        #modal-depth .param-input-group { flex: 1; display: flex; align-items: center; gap: 8px; }
        #modal-depth input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        #modal-depth input[type=range]:focus { outline: none; }
        #modal-depth input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 4px;
            cursor: pointer;
            background: #cdcdcd;
            border-radius: 2px;
            border: 1px solid #a6a6a6;
        }
        #modal-depth input[type=range]::-webkit-slider-thumb {
            height: 16px;
            width: 10px;
            border-radius: 2px;
            background: #0078d7;
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -7px;
        }
        #modal-depth input[type=range]:hover::-webkit-slider-thumb { background: #005a9e; }
        #modal-depth .footer {
            padding: 0 12px 12px 12px;
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        #modal-depth .btn {
            padding: 0 12px;
            height: 23px;
            font-family: inherit;
            font-size: 9pt;
            border: 1px solid #adadad;
            background-color: #ffffff;
            cursor: pointer;
            white-space: nowrap;
            border-radius: 3px;
            min-width: 72px;
            outline: none;
        }
        #modal-depth .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-depth .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-depth .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-depth .btn-primary { background-color: #ffffff; border: 2px solid #0078d7; }
        #modal-depth .btn-primary:hover { background-color: #e5f1fb; }
        #modal-depth .btn-primary:active { background-color: #cce4f7; border-color: #005499; }
        #modal-depth .sm-icon { width: 16px; height: 16px; }
        #modal-depth .stroke-black { stroke: #000; stroke-width: 1.5; fill: none; }
        #modal-depth .fill-red { fill: #d00000; stroke: none; }


        /* ── Stray Pixel Cleaner modal ─────────────────────────────────────────────── */
        #modal-gapstitch { --gs-win-bg: #f0f0f0; --gs-text: #000000; --gs-input-border: #7a7a7a; --gs-focus: #0078d7; --gs-btn-border: #adadad; --gs-btn-hover: #e5f1fb; }
        #modal-gapstitch * { box-sizing: border-box; user-select: none; cursor: default; }
        #modal-gapstitch input { user-select: auto; cursor: pointer; }
        #modal-gapstitch .window { width: 310px; background-color: var(--gs-win-bg); border: 1px solid #999; box-shadow: 0 4px 14px rgba(0,0,0,0.22); position: absolute; display: flex; flex-direction: column; font-family: "Segoe UI", "MS Sans Serif", sans-serif; font-size: 11px; }
        #modal-gapstitch .title-bar { height: 28px; background: #fff; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; padding: 0 0 0 8px; gap: 6px; }
        #modal-gapstitch .title-bar-icon { flex-shrink: 0; }
        #modal-gapstitch .title-bar-label { font-weight: 600; font-size: 11px; flex: 1; color: var(--gs-text); }
        #modal-gapstitch .close-btn { margin-left: auto; width: 32px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; }
        #modal-gapstitch .close-btn:hover { background-color: #e81123; color: white; }
        #modal-gapstitch .content { padding: 10px 12px 6px 12px; display: flex; flex-direction: column; gap: 0; }
        #modal-gapstitch .gs-section-hdr { font-weight: 600; color: var(--gs-text); display: block; font-size: 11px; border-bottom: 1px solid #d8d8d8; padding-bottom: 4px; margin-bottom: 8px; letter-spacing: 0.01em; }
        #modal-gapstitch .gs-rows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
        #modal-gapstitch .gs-row { display: grid; grid-template-columns: 108px 1fr 40px; gap: 6px; align-items: center; }
        #modal-gapstitch .gs-row-label-wrap { display: flex; align-items: center; gap: 4px; }
        #modal-gapstitch .gs-row label { color: #222; font-size: 11px; cursor: default; }
        #modal-gapstitch .gs-hint-icon { width: 13px; height: 13px; border-radius: 50%; background: #c8c8c8; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: default; flex-shrink: 0; line-height: 1; position: relative; }
        #modal-gapstitch .gs-hint-icon:hover .gs-tooltip { display: block; }
        #modal-gapstitch .gs-tooltip { display: none; position: absolute; left: 18px; top: -2px; background: #1a1a1a; color: #f5f5f5; font-size: 10px; font-weight: 400; padding: 5px 7px; border-radius: 3px; white-space: normal; width: 170px; line-height: 1.45; z-index: 9999; box-shadow: 0 2px 6px rgba(0,0,0,0.35); pointer-events: none; }
        #modal-gapstitch .gs-row input[type="number"] { width: 100%; padding: 2px 4px; border: 1px solid var(--gs-input-border); font-size: 11px; font-family: inherit; background: #fff; color: var(--gs-text); height: 22px; }
        #modal-gapstitch .gs-row input[type="number"]:focus { outline: none; border-color: var(--gs-focus); box-shadow: 0 0 0 1px var(--gs-focus); }
        #modal-gapstitch .gs-val { text-align: right; color: #666; font-size: 11px; min-width: 34px; }
        #modal-gapstitch .gs-desc { font-size: 10px; color: #888; line-height: 1.5; margin-bottom: 10px; padding: 5px 7px; background: #e8eef4; border-left: 2px solid #a0bcd8; }
        #modal-gapstitch .footer { padding: 7px 12px 10px 12px; display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid #ddd; }
        #modal-gapstitch .btn { padding: 0 8px; height: 22px; min-width: 70px; font-family: inherit; font-size: 9pt; border: 1px solid #adadad; background-color: #ffffff; cursor: pointer; white-space: nowrap; border-radius: 3px; outline: none; }
        #modal-gapstitch .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-gapstitch .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-gapstitch .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-gapstitch .btn-primary { background: #fff; border: 2px solid #0078d7; border-radius: 3px; }
        #modal-gapstitch .btn-primary:hover { background: #e5f1fb; }
        #modal-gapstitch .btn-primary:active { background: #cce4f7; border-color: #005499; }

        #modal-export {
            --win-bg: #f0f0f0;
            --win-text: #000000;
            --input-border: #7a7a7a;
            --input-focus: #0078d7;
            --btn-border: #adadad;
            --btn-hover: #e5f1fb;
        }
        #modal-export * { box-sizing: border-box; user-select: none; cursor: default; }
        #modal-export input { user-select: auto; cursor: pointer; }
        #modal-export .window {
            background-color: var(--win-bg);
            border: 1px solid #999;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            position: absolute;
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 11px;
        }
        #modal-export .title-bar {
            height: 28px;
            background: #fff;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding: 0 8px;
        }
        #modal-export .close-btn {
            margin-left: auto;
            width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #modal-export .close-btn:hover { background-color: #e81123; color: white; }
        #modal-export .content { padding: 8px 10px 10px 10px; }
        #modal-export fieldset {
            border: 1px solid #dfdfdf;
            margin: 0;
            padding: 10px 8px 12px 8px;
            border-radius: 2px;
        }
        #modal-export legend {
            font-size: 11px;
            color: #000;
        }
        #modal-export .divider {
            height: 1px;
            background: #dcdcdc;
            margin: 6px 0 8px 0;
        }
        #modal-export .checkbox-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 6px 0;
        }
        #modal-export .footer {
            background-color: var(--win-bg);
            padding: 8px 10px 10px 10px;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        #modal-export .btn {
            padding: 0 12px;
            height: 23px;
            font-family: inherit;
            font-size: 9pt;
            border: 1px solid #adadad;
            background-color: #ffffff;
            cursor: pointer;
            white-space: nowrap;
            border-radius: 3px;
            outline: none;
        }
        #modal-export .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-export .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-export .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-export .btn-primary { background: #ffffff; color: #000000; border: 2px solid #0078d7; }
        #modal-export .btn-primary:hover { background-color: #e5f1fb; }
        #modal-export .btn-primary:active { background-color: #cce4f7; border-color: #005499; }

        /* huesat floats over canvas — never dim the background so colors stay visible */
        #modal-huesat.modal-mask { background: transparent !important; }

        #modal-huesat {
            --win-bg: #f0f0f0;
            --win-text: #000000;
            --input-border: #7a7a7a;
            --input-focus: #0078d7;
            --btn-border: #adadad;
            --btn-hover: #e5f1fb;
        }
        #modal-huesat * { box-sizing: border-box; user-select: none; cursor: default; }
        #modal-huesat input { user-select: auto; cursor: pointer; }
        #modal-huesat .window {
            width: 320px;
            background-color: var(--win-bg);
            border: 1px solid #999;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            position: absolute;
            padding: 8px;
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 11px;
        }
        #modal-huesat .title-bar {
            height: 28px;
            background: white;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-left: 8px;
            margin: -8px -8px 8px -8px;
        }
        #modal-huesat .close-btn {
            margin-left: auto;
            width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #modal-huesat .close-btn:hover { background-color: #e81123; color: white; }
        #modal-huesat .content { padding: 4px 8px 8px 8px; }
        #modal-huesat .row {
            display: grid;
            grid-template-columns: 70px 1fr 52px;
            gap: 8px;
            align-items: center;
            margin-bottom: 8px;
        }
        #modal-huesat .channel-area {
            --hs-area-bg: #f8f8f8;
            border: 1px solid #e0e0e0;
            background: #f8f8f8;
            border-radius: 4px;
            padding: 10px 8px 8px 8px;
            margin: 4px 0 10px 0;
        }
        #modal-huesat .channel-label { font-size: 10px; color: #888; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }

        /* Hexagonal colour wheel — absolute positioned around master */
        #modal-huesat .channel-wheel {
            position: relative;
            width: 210px;
            height: 126px;
            margin: 0 auto 6px auto;
        }
        #modal-huesat .channel-wrap {
            width: 36px;
            height: 24px;
            position: absolute;
            cursor: pointer;
        }
        #modal-huesat .channel-btn {
            width: 36px;
            height: 24px;
            border-radius: 3px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            cursor: pointer;
            position: absolute;
            top: 0; left: 0;
            box-sizing: border-box;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
        }
        #modal-huesat .channel-wrap.active .channel-btn {
            border-color: #0078d7;
            box-shadow: 0 0 0 2px rgba(0,120,215,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
        }
        #modal-huesat .pos-r { top: 2px;  left: 87px; }
        #modal-huesat .pos-y { top: 30px; left: 22px; }
        #modal-huesat .pos-m { top: 30px; right: 22px; }
        #modal-huesat .pos-g { top: 72px; left: 22px; }
        #modal-huesat .pos-b { top: 72px; right: 22px; }
        #modal-huesat .pos-c { top: 100px; left: 87px; }
        #modal-huesat .pos-r .channel-btn { background: #ff0000; }
        #modal-huesat .pos-y .channel-btn { background: #ffff00; }
        #modal-huesat .pos-m .channel-btn { background: #ff00ff; }
        #modal-huesat .pos-g .channel-btn { background: #00ff00; }
        #modal-huesat .pos-b .channel-btn { background: #0000ff; }
        #modal-huesat .pos-c .channel-btn { background: #00ffff; }

        /* Master button in the centre */
        #modal-huesat .master-btn {
            position: absolute;
            top: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: #f0f0f0;
            color: #222;
            padding: 3px 12px;
            border-radius: 2px;
            cursor: pointer;
            font-size: 11px;
            font-family: 'Segoe UI', sans-serif;
            border: 1px solid #adadad;
            white-space: nowrap;
            transition: background 0.08s, border-color 0.08s, color 0.08s, outline 0.08s;
            outline: 1px solid transparent;
            outline-offset: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
        }
        #modal-huesat .master-btn:hover { background: #e8e8e8; border-color: #888; }
        #modal-huesat .master-btn.active { background: #f0f0f0; border-color: #0078d7; color: #222; font-weight: 600; outline: none; }

        /* Live preview strip */

        #modal-huesat .hs-live-preview,
        #modal-huesat #hs-prev-original,
        #modal-huesat #hs-prev-adjusted,
        #modal-huesat .hs-prev-divider { display: none; }

        #modal-huesat .sub-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 6px 0 4px 0;
        }
        #modal-huesat .sub-row label { font-size: 11px; color: #555; }
        #modal-huesat input[type="range"] {
            width: 100%;
            height: 7px;
            -webkit-appearance: none;
            appearance: none;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
        }
        #modal-huesat input[type="range"]::-webkit-slider-runnable-track {
            height: 7px;
            background: transparent;
            border-radius: 3px;
            border: none;
        }
        #modal-huesat input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px;
            height: 19px;
            border-radius: 2px;
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(0,0,0,0.28);
            margin-top: -6px;
            cursor: pointer;
        }
        #modal-huesat input[type="range"]::-moz-range-track {
            height: 7px;
            background: transparent;
            border-radius: 3px;
            border: none;
        }
        #modal-huesat input[type="range"]::-moz-range-progress {
            height: 7px;
            background: transparent;
            border-radius: 3px;
        }
        #modal-huesat input[type="range"]::-moz-range-thumb {
            width: 10px;
            height: 19px;
            border-radius: 2px;
            background: rgba(255,255,255,0.92);
            border: 1px solid rgba(0,0,0,0.28);
            cursor: pointer;
        }
        #modal-huesat #hs-hue { background: linear-gradient(to right, hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%), hsl(90,100%,50%), hsl(120,100%,50%), hsl(150,100%,50%), hsl(180,100%,50%), hsl(210,100%,50%), hsl(240,100%,50%), hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%), hsl(360,100%,50%)); border-radius: 3px; }
        #modal-huesat #hs-sat { background: linear-gradient(to right, #808080 0%, #ff0000 100%); border-radius: 3px; }
        #modal-huesat #hs-light { background: linear-gradient(to right, #000 0%, #888 50%, #fff 100%); border-radius: 3px; }
        #modal-huesat #hs-chroma { background: linear-gradient(to right, #888 0%, #e85e3a 100%); border-radius: 3px; }
        #modal-huesat #hs-overlap { background: linear-gradient(to right, #bbb 0%, #0078d7 100%); border-radius: 3px; }

        #modal-huesat input[type="number"] {
            height: 22px;
            border: 1px solid var(--input-border);
            padding: 0 4px;
            font-family: inherit;
            font-size: 11px;
            width: 52px;
        }
        #modal-huesat input[type="number"]:focus {
            outline: none;
            border-color: var(--input-focus);
            border-width: 2px;
            padding: 0 3px;
        }
        #modal-huesat .footer {
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            padding: 6px 8px 8px 8px;
            border-top: 1px solid #d9d9d9;
        }
        #modal-huesat .btn {
            height: 23px;
            padding: 0 12px;
            min-width: 64px;
            background-color: #ffffff;
            border: 1px solid #adadad;
            border-radius: 3px;
            cursor: pointer;
            font-family: inherit;
            font-size: 9pt;
            color: var(--win-text);
            white-space: nowrap;
            outline: none;
        }
        #modal-huesat .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-huesat .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-huesat .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-huesat .btn-primary { background-color: #ffffff; border: 2px solid #0078d7; }
        #modal-huesat .btn-primary:hover { background-color: #e5f1fb; }
        #modal-huesat .btn-primary:active { background-color: #cce4f7; border-color: #005499; }
        /* ── Hue/Sat sidebar mode ── */
        #modal-huesat.hs-sidebar-mode {
            position: fixed !important;
            top: 145px; left: 0; bottom: 0;
            width: 320px !important;
            z-index: 9000;
            background: transparent;
            display: flex !important;
            align-items: stretch;
            pointer-events: none;
        }
        #modal-huesat.hs-sidebar-mode .window {
            position: relative !important;
            width: 320px !important;
            height: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-top: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            overflow-y: auto;
            overflow-x: hidden;
            pointer-events: all;
            display: flex;
            flex-direction: column;
        }
        #modal-huesat.hs-sidebar-mode .content {
            flex: 1;
            overflow-y: auto;
        }
        /* Sidebar overlays the viewport — canvas does not shift */
        #modal-resize.utility-sidebar-mode,
        #modal-depth.utility-sidebar-mode {
            position: fixed !important;
            top: 145px; left: 0; bottom: 0;
            z-index: 9000;
            background: transparent;
            display: flex !important;
            align-items: stretch;
            pointer-events: none;
        }
        #modal-resize.utility-sidebar-mode { width: 264px !important; }
        #modal-depth.utility-sidebar-mode { width: 330px !important; }
        #modal-resize.utility-sidebar-mode .window,
        #modal-depth.utility-sidebar-mode .window {
            position: relative !important;
            height: 100% !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-top: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
            overflow-y: auto;
            overflow-x: hidden;
            pointer-events: all;
            display: flex;
            flex-direction: column;
        }
        #modal-resize.utility-sidebar-mode .window { width: 264px !important; }
        #modal-depth.utility-sidebar-mode .window { width: 330px !important; }
        #modal-resize.utility-sidebar-mode .content,
        #modal-depth.utility-sidebar-mode .content {
            flex: 1;
            overflow-y: auto;
        }
        body.huesat-sidebar-open #huesat-split-handle {
            left: 280px !important;
            top: 145px !important;
        }
        /* Sidebar dock/undock button */
        .hs-sidebar-toggle,
        .utility-sidebar-toggle {
            height: 100%;
            align-self: stretch;
            box-sizing: border-box;
            width: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            color: #666;
            font-size: 13px;
            border-right: 1px solid rgba(0,0,0,0.12);
            margin-right: 6px;
            transition: background .1s, color .1s;
            user-select: none;
        }
        .hs-sidebar-toggle:hover,
        .utility-sidebar-toggle:hover {
            background: #e8f0fe;
            color: #0078d7;
        }
        .hs-sidebar-toggle svg,
        .utility-sidebar-toggle svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }
        .hs-sidebar-toggle:hover,
        .utility-sidebar-toggle:hover {
            background: #e8f0fe;
            color: #0078d7;
        }
        .hs-sidebar-toggle svg,
        .utility-sidebar-toggle svg {
            width: 14px;
            height: 14px;
            fill: currentColor;
        }
        .util-dock-icon {
            width: 16px;
            height: 16px;
            flex: none;
            display: block;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        #unified-sidebar .sidebar-title-btn .util-dock-icon {
            width: 16px;
            height: 16px;
        }

        /* ── Unified Sidebar (shared empty container) ── */
        #unified-sidebar {
            position: fixed;
            left: -296px;
            top: 145px;
            bottom: 24px;
            width: 280px;
            max-width: 90vw;
            background: var(--bg-ribbon, #f5f6f7);
            border-right: 1px solid var(--border-ribbon, #dadbdc);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: left .24s cubic-bezier(.16,1,.3,1);
        }
        /* ── Unified sidebar CSS variables ── */
        #unified-sidebar {
          --s-bg:          #ffffff;
          --s-chrome:      #f3f3f3;
          --s-hover:       #e5e5e5;
          --s-pressed:     #d0d0d0;
          --s-sep:         #e0e0e0;
          --s-accent:      #0078d7;
          --s-accent-hov:  #106ebe;
          --s-accent-press:#005a9e;
          --s-title-bg:    #ffffff;
          --s-title-txt:   #000000;
          --s-title-hov:   rgba(255,255,255,.15);
          --s-close-hov:   #e81123;
          --s-font:        "Segoe UI", system-ui, sans-serif;
          --s-size:        9pt;
          --s-color:       #201f1e;
          --s-muted:       #605e5c;
        }
        #unified-sidebar.hidden { left: -296px; }
        #unified-sidebar:not(.hidden) { left: 0; }
        /* ── Title bar ── */
        #unified-sidebar .sidebar-title {
            height:          28px;
            min-height:      28px;
            background:      var(--s-title-bg);
            display:         flex;
            align-items:     center;
            justify-content: space-between;
            padding:         0 0 0 8px;
            user-select:     none;
            flex-shrink:     0;
        }
        #unified-sidebar .sidebar-title-text {
            font-family:   var(--s-font);
            font-size:     var(--s-size);
            font-weight:   600;
            color:         var(--s-title-txt);
            white-space:   nowrap;
            overflow:      hidden;
            text-overflow: ellipsis;
            letter-spacing: .01em;
        }
        #unified-sidebar .sidebar-title-buttons {
            display:     flex;
            align-items: stretch;
            height:      100%;
            flex-shrink: 0;
        }
        /* Float (⬈) and Close (✕) caption buttons */
        #unified-sidebar .sidebar-title-btn {
            width:           28px;
            height:          100%;
            border:          none;
            background:      transparent;
            font-size:       11px;
            font-family:     var(--s-font);
            color:           var(--s-title-txt);
            cursor:          default;
            display:         flex;
            align-items:     center;
            justify-content: center;
            padding:         0;
            flex-shrink:     0;
            border-radius:   0;
            outline:         none;
            transition:      background .1s;
        }
        #unified-sidebar .sidebar-title-btn:hover {
            background: var(--s-title-hov);
        }
        #unified-sidebar .sidebar-title-btn:active {
            background: rgba(255,255,255,.25);
        }
        #unified-sidebar #sidebar-close-btn:hover {
            background: var(--s-close-hov);
            color:      #ffffff;
        }
        /* ── Tab strip — Fluent-style underline tabs ── */
        #unified-sidebar .sidebar-modes {
            display:          flex;
            align-items:      stretch;
            background:       var(--s-chrome);
            border-bottom:    1px solid var(--s-sep);
            padding:          0;
            overflow-x:       auto;
            flex-shrink:      0;
        }
        #unified-sidebar .sidebar-modes button {
            position:       relative;
            height:         32px;
            padding:        0 14px;
            flex:           1;
            background:     transparent;
            border:         none;
            font-family:    var(--s-font);
            font-size:      var(--s-size);
            font-weight:    400;
            color:          var(--s-muted);
            cursor:         default;
            border-radius:  0;
            white-space:    nowrap;
            outline:        none;
            transition:     color .1s, background .1s;
        }
        #unified-sidebar .sidebar-modes button:hover {
            background: var(--s-hover);
            color:      var(--s-color);
        }
        #unified-sidebar .sidebar-modes button:active {
            background: var(--s-pressed);
        }
        /* Active tab: bold text + 2px blue underline bar */
        #unified-sidebar .sidebar-modes button.active {
            color:       var(--s-accent);
            font-weight: 600;
            background:  var(--s-bg);
        }
        #unified-sidebar .sidebar-modes button.active::after {
            content:    '';
            position:   absolute;
            bottom:     0;
            left:       14px;
            right:      14px;
            height:     2px;
            background: var(--s-accent);
            border-radius: 1px 1px 0 0;
        }
        #unified-sidebar .sidebar-content {
            flex: 1;
            overflow: auto;
            position: relative;
        }
        #unified-sidebar .window {
            position: static !important;
            width: 100% !important;
            height: 100% !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            background: var(--win-bg, #fff);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 8px;
        }
        #unified-sidebar .window .title-bar {
            display: none;
        }
        #unified-sidebar .window .content {
            flex: 1;
            overflow-y: auto;
        }
        #unified-sidebar .window .footer {
            flex-shrink: 0;
        }
        #unified-sidebar .modal-mask {
            position: static !important;
            display: flex !important;
            flex-direction: column;
            width: 100% !important;
            height: 100% !important;
            left: auto !important;
            top: auto !important;
            right: auto !important;
            bottom: auto !important;
            background: transparent !important;
            pointer-events: auto;
            z-index: auto;
            border: none;
            box-shadow: none;
            border-radius: 0;
            align-items: stretch;
            justify-content: flex-start;
        }
        /* ── Resize/Skew sidebar overrides (docked) ── */
        #unified-sidebar #modal-resize .window {
            background: #F0F0F0;
        }
        /* Each fieldset becomes a 2-column grid: icon on the left, fields stacked on the right. */
        #unified-sidebar #modal-resize .rz-fieldset {
            min-width: 0;
            overflow: visible;
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: 10px;
            row-gap: -6px;
            align-items: center;
            margin-bottom: 14px;
            padding-bottom: 0;
        }
        #unified-sidebar #modal-resize .rz-fieldset:last-of-type { margin-bottom: 0; }
        /* Neutralize the floating-window margin hacks for the sidebar. */
        #unified-sidebar #modal-resize .row,
        #unified-sidebar #modal-resize .rz-h-row,
        #unified-sidebar #modal-resize .rz-v-row,
        #unified-sidebar #modal-resize .sk-h-row,
        #unified-sidebar #modal-resize .sk-v-row,
        #unified-sidebar #modal-resize .rz-ratio-row,
        #unified-sidebar #modal-resize .checkbox-row { margin: 0; margin-left: 0; }
        /* Hide empty icon spacers so column-2 fields start flush left. */
        #unified-sidebar #modal-resize .col-icon:not(:has(img)) { display: none; }
        #unified-sidebar #modal-resize .col-icon { width: 32px; align-items: center; justify-content: center; }
        #unified-sidebar #modal-resize .col-label { width: 48px; }
        /* Icon rows span the full fieldset height, centered in column 1. */
        #unified-sidebar #modal-resize .rz-fieldset > .row:has(.resize-icon-img),
        #unified-sidebar #modal-resize .rz-fieldset > .row:has(.skew-icon-img) {
            grid-column: 1;
            grid-row: 1 / -1;
            align-self: center;
            justify-self: center;
        }
        /* Everything else (By / Horizontal / Vertical / aspect ratio) lives in column 2. */
        #unified-sidebar #modal-resize .rz-fieldset > .row:not(:has(img)),
        #unified-sidebar #modal-resize .rz-fieldset > .checkbox-row {
            grid-column: 2;
        }
        /* Constrain icon size so it never overflows the narrow column. */
        #unified-sidebar #modal-resize .resize-icon-img,
        #unified-sidebar #modal-resize .skew-icon-img {
            width: auto;
            max-width: none;
            height: auto;
            image-rendering: pixelated;
            transform: none;
        }
        #unified-sidebar #modal-resize .rz-h-row { transform: none; }
        #unified-sidebar #modal-resize .rz-v-row { transform: none; }
        #unified-sidebar #modal-resize .rz-ratio-row { transform: none; }
        #unified-sidebar #modal-resize #rz-v-px { transform: none; }
        #unified-sidebar #modal-resize .rz-h-dual { transform: none; }
        #unified-sidebar #modal-resize .checkbox-indent {
            margin-left: 0;
            padding-left: 0;
        }
        #unified-sidebar #modal-resize input[type="text"] {
            width: 64px;
            height: 20px;
            box-sizing: border-box;
            padding: 0 6px;
            border: none;
            border-bottom: 1px solid #7a7a7a;
            background: #ffffff;
            font-size: 11px;
            outline: none;
        }
        #unified-sidebar #modal-resize .rz-dual input.rz-num { width: 47px; }
        #unified-sidebar #modal-resize input[type="text"]:hover {
            border-bottom-color: #3c3c3c;
        }
        #unified-sidebar #modal-resize input[type="text"]:focus {
            border-bottom-color: var(--toggle-icon-color);
            box-shadow: none;
        }

        #huesat-split-handle {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 4px;
            background: rgba(255,255,255,0.8);
            display: none;
            cursor: col-resize;
            z-index: 20000;
        }
        #huesat-split-handle .hs-circle {
            width: 24px;
            height: 24px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #555;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #modal-wincolor .window {
            width: 447px;
            height: 360px;
            background-color: var(--win-bg);
            border: 1px solid #999;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            position: absolute;
            padding: 8px;
            color: var(--win-text);
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 9pt;
        }

        #modal-wincolor .title-bar {
            height: 30px;
            background: white;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-left: 10px;
            font-size: 12px;
            color: #000;
            margin: -8px -8px 8px -8px;
        }
        #modal-wincolor .close-btn {
            margin-left: auto;
            width: 32px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        #modal-wincolor .close-btn span { transform: translateX(1px); display: inline-block; }
        #modal-wincolor .close-btn:hover { background-color: #e81123; color: white; }

        #modal-wincolor .content-area { display: flex; gap: 8px; }
        #modal-wincolor .left-pane { width: 189px; flex-shrink: 0; }
        #modal-wincolor .right-pane { width: 230px; flex-grow: 1; display: flex; flex-direction: column; }

        #modal-wincolor .label { margin-bottom: 4px; display: block; }
        #modal-wincolor #wincolor-custom { margin-top: 6px; }

        #modal-wincolor .swatch-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            margin-bottom: 10px;
        }
        #modal-wincolor .swatch {
            width: 20px;
            height: 17px;
            border-top: 1px solid var(--win-border-dark);
            border-left: 1px solid var(--win-border-dark);
            border-bottom: 1px solid var(--win-border-light);
            border-right: 1px solid var(--win-border-light);
            background-color: #fff;
            position: relative;
        }
        #modal-wincolor .swatch.selected::after {
            content: '';
            position: absolute;
            top: -1px; left: -1px; right: -1px; bottom: -1px;
            border: 1px solid #000;
        }
        #modal-wincolor .swatch:hover { border-top: 1px solid var(--win-border-dark); border-left: 1px solid var(--win-border-dark); border-bottom: 1px solid var(--win-border-light); border-right: 1px solid var(--win-border-light); }

        #modal-wincolor button {
            height: 22px;
            padding: 0 8px;
            background: #e1e1e1;
            border: 1px solid #adadad;
            border-radius: 3px;
            font-family: inherit;
            font-size: 9pt;
            min-width: 70px;
        }
        #modal-wincolor button:hover:not(:disabled) {
            background-color: #e5f1fb;
            border-color: var(--toggle-icon-color);
        }
        #modal-wincolor button:active:not(:disabled) {
            background-color: #cce4f7;
            border-color: #005499;
        }
        #modal-wincolor button:disabled {
            color: #838383;
            background-color: #f0f0f0;
            border-color: #d0d0d0;
        }
        #modal-wincolor .btn-define { width: 100%; margin-bottom: 8px; text-align: center; }
        #modal-wincolor .bottom-actions { display: flex; gap: 8px; }
        #modal-wincolor .btn-ok { border: 2px solid var(--win-highlight); border-radius: 4px; }
        #modal-wincolor .wincolor-bottom-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            margin-top: 4px;
            padding-left: 4px;
        }
        #modal-wincolor .bottom-actions button { background: #fff; }

        #modal-wincolor .color-editor-top { display: flex; gap: 17px; margin-bottom: 8px; width: 230px; }
        #modal-wincolor .spectrum-box {
            width: 185px;
            height: 188px;
            border-top: 1px solid var(--win-border-dark);
            border-left: 1px solid var(--win-border-dark);
            border-right: 1px solid var(--win-border-light);
            border-bottom: 1px solid var(--win-border-light);
            position: relative;
            cursor: default;
            background: #fff;
            padding: 1px;
            box-sizing: border-box;
            margin: 0;
        }
        #modal-wincolor #wincolor-spectrum { display: block; cursor: default; }

        #modal-wincolor .crosshair {
            position: absolute;
            width: 19px;
            height: 19px;
            pointer-events: none;
        }
        #modal-wincolor .crosshair::before,
        #modal-wincolor .crosshair::after {
            content: '';
            position: absolute;
        }
        #modal-wincolor .crosshair::before {
            top: 8px;
            left: 0;
            width: 19px;
            height: 3px;
            background: linear-gradient(to right, #000 0 5px, transparent 5px 14px, #000 14px 19px);
        }
        #modal-wincolor .crosshair::after {
            top: 0;
            left: 8px;
            width: 3px;
            height: 19px;
            background: linear-gradient(to bottom, #000 0 5px, transparent 5px 14px, #000 14px 19px);
        }

        #modal-wincolor .lum-slider-container { position: relative; width: 24px; height: 188px; margin: 0; }
        #modal-wincolor .lum-strip {
            width: 12px;
            height: 188px;
            border-top: 1px solid var(--win-border-dark);
            border-left: 1px solid var(--win-border-dark);
            border-right: 1px solid var(--win-border-light);
            border-bottom: 1px solid var(--win-border-light);
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }
        #modal-wincolor .lum-arrow {
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-bottom: 7px solid transparent;
            border-right: 7px solid #000;
            position: absolute;
            left: 16px;
            top: 0;
            transform: translateY(-50%);
        }

        #modal-wincolor .color-editor-bottom { display: flex; gap: 8px; }
        #modal-wincolor .preview-box-container { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
        #modal-wincolor .preview-box {
            width: 58px;
            height: 40px;
            border-top: 1px solid var(--win-border-dark);
            border-left: 1px solid var(--win-border-dark);
            border-right: 1px solid var(--win-border-light);
            border-bottom: 1px solid var(--win-border-light);
            background-color: #000;
            margin-bottom: 4px;
        }
        #modal-wincolor .preview-label { font-size: 11px; color: #000; }
        #modal-wincolor .input-group {
            display: grid;
            grid-template-columns: 36px 30px 44px 30px;
            column-gap: 4px;
            row-gap: 4px;
            align-items: center;
            font-size: 9pt;
        }
        #modal-wincolor .input-label { text-align: right; }
        #modal-wincolor input[type="text"] {
            width: 100%;
            height: 18px;
            border: none;
            border-bottom: 1px solid #7a7a7a;
            padding: 0 3px;
            font-family: inherit;
            font-size: 9pt;
            background: #fff;
        }
        #modal-wincolor input[type="text"]:focus { outline: none; border-bottom-color: var(--toggle-icon-color); }
        #modal-wincolor .btn-add { width: 220px; margin-top: 0; margin-left: 31px; background: #fff; }
        #modal-wincolor .tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
        }
        #modal-wincolor .tab-btn {
            padding: 2px 8px;
            border: 1px solid #999;
            background: #e1e1e1;
            font-size: 11px;
            cursor: pointer;
            border-radius: 2px;
        }
        #modal-wincolor .tab-btn.active {
            background: #ffffff;
            border-color: var(--toggle-icon-color);
            box-shadow: inset 0 0 0 1px #0078d7;
        }
        #modal-wincolor .bpp-panel {
            display: none;
            padding: 6px;
            border: 1px solid #d0d0d0;
            background: #fff;
            margin-bottom: 6px;
        }
        #modal-wincolor .bpp-row {
            display: grid;
            grid-template-columns: 24px 1fr 44px;
            gap: 6px;
            align-items: center;
            margin-bottom: 6px;
            font-size: 11px;
        }
        #modal-wincolor .bpp-row input[type="range"] { width: 100%; }
        #modal-wincolor .bpp-preview {
            height: 40px;
            border: 1px solid #777;
            background: #000;
        }

        /* Hotkeys modal */
        #modal-hotkeys .window {
            width: 700px;
            height: 1600px;
            background-color: #f0f0f0;
            border: 1px solid #999;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            position: absolute;
            padding: 8px;
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 9pt;
        }
        #modal-hotkeys .title-bar {
            height: 30px;
            background: white;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-left: 10px;
            font-size: 12px;
            color: #000;
            margin: -8px -8px 8px -8px;
        }
        #modal-hotkeys .close-btn {
            margin-left: auto;
            width: 32px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        #modal-hotkeys .close-btn:hover { background-color: #e81123; color: white; }
        #modal-hotkeys .content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* Toolbar customization modal */
        #modal-toolbar .window {
            width: 430px;
            background-color: #f0f0f0;
            border: 1px solid #999;
            box-shadow: 0 0 15px rgba(0,0,0,0.35);
            display: flex;
            flex-direction: column;
        }
        #modal-toolbar .title-bar {
            height: 26px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            font-size: 11px;
            border-bottom: 1px solid #cfcfcf;
        }
        #modal-toolbar .close-btn {
            width: 36px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #111;
        }
        #modal-toolbar .close-btn:hover {
            background-color: #e81123;
            color: #fff;
        }
        #modal-toolbar .content {
            padding: 6px 8px 8px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #modal-toolbar .toolbar-subtitle {
            font-size: 11px;
            color: #555;
        }
        #modal-toolbar .toolbar-list {
            border: 1px solid #d0d0d0;
            background: #ffffff;
            padding: 6px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: 320px;
            overflow: auto;
        }
        #modal-toolbar .toolbar-row {
            display: grid;
            grid-template-columns: 1fr 90px 70px;
            gap: 8px;
            align-items: center;
            font-size: 11px;
            padding: 2px 0;
        }
        #modal-toolbar .toolbar-header {
            font-weight: 600;
            color: #444;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 4px;
        }
        #modal-toolbar select {
            height: 20px;
            font-size: 11px;
        }
        #modal-toolbar .toolbar-empty {
            color: #666;
            font-size: 11px;
            padding: 6px 2px;
        }
        #modal-toolbar .footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 8px 10px 10px;
            border-top: 1px solid #d9d9d9;
            background-color: #f0f0f0;
        }
        /* Tool customizer modal */
        #modal-tool-customizer .window {
            width: 780px;
            background-color: #f0f0f0;
            border: 1px solid #999;
            box-shadow: 0 0 15px rgba(0,0,0,0.35);
            display: flex;
            flex-direction: column;
        }
        #modal-tool-customizer .title-bar {
            height: 26px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            font-size: 11px;
            border-bottom: 1px solid #cfcfcf;
            cursor: move;
            user-select: none;
        }
        #modal-tool-customizer .close-btn {
            width: 36px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #111;
        }
        #modal-tool-customizer .close-btn:hover {
            background-color: #e81123;
            color: #fff;
        }
        #modal-tool-customizer .content {
            padding: 6px 8px 8px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #modal-tool-customizer .footer {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            padding: 8px 10px 10px;
            border-top: 1px solid #d9d9d9;
            background-color: #f0f0f0;
        }
        #modal-tool-customizer .footer .btn {
            height: 22px;
            padding: 0 12px;
            border: 1px solid #adadad;
            background: #fff;
            font-size: 11px;
            border-radius: 2px;
        }
        #modal-tool-customizer .footer .btn:hover {
            background-color: #e5f1fb;
            border-color: #0078d7;
        }
        #modal-tool-customizer .footer .btn.btn-primary {
            background: #fff;
            border: 2px solid #0078d7;
        }
        /* Updates modal */
        #modal-update .window {
            width: 520px;
            max-width: calc(100vw - 34px);
            max-height: calc(100vh - 48px);
            background-color: #f0f0f0;
            border: 1px solid #999;
            box-shadow: 0 0 15px rgba(0,0,0,0.35);
            display: flex;
            flex-direction: column;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            font-size: 11px;
        }
        #modal-update .title-bar {
            height: 26px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            font-size: 11px;
            border-bottom: 1px solid #cfcfcf;
            cursor: move;
            user-select: none;
        }
        #modal-update .close-btn {
            width: 36px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #111;
            position: relative;
        }
        #modal-update .close-btn:hover { background-color: #e81123; color: #fff; }
        #modal-update .close-btn .x {
            width: 12px;
            height: 12px;
            display: block;
            position: relative;
        }
        #modal-update .close-btn .x::before,
        #modal-update .close-btn .x::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 14px;
            height: 2px;
            background: currentColor;
            transform-origin: center;
            border-radius: 2px;
            transform: translate(-50%, -50%) rotate(45deg);
        }
        #modal-update .close-btn .x::after {
            transform: translate(-50%, -50%) rotate(-45deg);
        }
        #modal-update .content {
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-height: 0;
        }
        #modal-update .update-status {
            border: 1px solid #d0d0d0;
            background: #ffffff;
            padding: 8px 10px;
            border-radius: 3px;
            font-size: 12px;
            color: #1f1f1f;
            line-height: 1.25;
        }
        #modal-update .update-status.is-checking { background: #fffdf0; border-color: #e3d6a0; }
        #modal-update .update-status.is-available { background: #f1fbf2; border-color: #9fd2a4; }
        #modal-update .update-status.is-ok { background: #f2f7ff; border-color: #9abbe9; }
        #modal-update .update-status.is-warn { background: #fff8e6; border-color: #e6c37a; }
        #modal-update .update-status.is-error { background: #fff3f3; border-color: #e2a0a0; }
        #modal-update .update-progress {
            height: 3px;
            background: #e6e6e6;
            border-radius: 999px;
            overflow: hidden;
        }
        #modal-update .update-progress .bar {
            width: 35%;
            height: 100%;
            background: var(--toggle-icon-color);
            animation: update-indeterminate 1.1s ease-in-out infinite;
        }
        @keyframes update-indeterminate {
            0% { transform: translateX(-120%); }
            100% { transform: translateX(320%); }
        }
        #modal-update .update-meta {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        #modal-update .update-card {
            border: 1px solid #d0d0d0;
            background: #ffffff;
            padding: 8px 10px;
            border-radius: 3px;
            min-width: 0;
        }
        #modal-update .update-card-k { font-size: 11px; color: #666; }
        #modal-update .update-card-v {
            margin-top: 2px;
            font-size: 13px;
            font-weight: 700;
            color: #222;
            font-family: Consolas, "Courier New", monospace;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #modal-update .update-notes-wrap {
            border: 1px solid #d0d0d0;
            background: #ffffff;
            border-radius: 3px;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        #modal-update .update-notes-title {
            padding: 7px 10px 6px;
            border-bottom: 1px solid #e4e4e4;
            color: #555;
            font-size: 11px;
        }
        #modal-update .update-notes {
            padding: 8px 10px;
            height: 240px;
            overflow: auto;
            white-space: normal;
            font-size: 12px;
            line-height: 1.35;
            color: #222;
            overflow-wrap: anywhere;
        }
        #modal-update .update-notes .empty {
            color: #666;
        }
        #modal-update .update-notes h1,
        #modal-update .update-notes h2,
        #modal-update .update-notes h3,
        #modal-update .update-notes h4 {
            margin: 10px 0 6px 0;
            font-family: "Segoe UI", "MS Sans Serif", sans-serif;
            color: #111;
            line-height: 1.15;
        }
        #modal-update .update-notes h1 { font-size: 18px; }
        #modal-update .update-notes h2 { font-size: 16px; }
        #modal-update .update-notes h3 { font-size: 14px; }
        #modal-update .update-notes h4 { font-size: 13px; }
        #modal-update .update-notes p { margin: 6px 0; }
        #modal-update .update-notes ul,
        #modal-update .update-notes ol { margin: 6px 0 6px 18px; padding: 0; }
        #modal-update .update-notes li { margin: 2px 0; }
        #modal-update .update-notes a { color: #0b61c3; text-decoration: underline; }
        #modal-update .update-notes code {
            font-family: Consolas, "Courier New", monospace;
            background: #f1f1f1;
            border: 1px solid #e3e3e3;
            border-radius: 3px;
            padding: 0 4px;
            font-size: 11px;
        }
        #modal-update .update-notes pre {
            background: #f6f6f6;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 8px 10px;
            overflow: auto;
            margin: 8px 0;
            white-space: pre;
            line-height: 1.35;
        }
        #modal-update .update-notes pre code {
            background: transparent;
            border: 0;
            padding: 0;
            font-size: 11px;
        }
        #modal-update .footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
            padding: 8px 10px 10px;
            border-top: 1px solid #d9d9d9;
            background-color: #f0f0f0;
        }
        #modal-update .footer .spacer { flex: 1; }
        #modal-update .footer .btn {
            height: 24px;
            padding: 0 10px;
            border: 1px solid #adadad;
            background-color: #e1e1e1;
            font-family: inherit;
            font-size: 12px;
            cursor: pointer;
            border-radius: 2px;
        }
        #modal-update .footer .btn:hover { background-color: #e5f1fb; border-color: var(--toggle-icon-color); }
        #modal-update .footer .btn.btn-primary {
            background: #fff;
            border: 1px solid #0078d7;
            box-shadow: inset 0 0 0 1px #0078d7;
        }
        #modal-update .footer .btn.btn-primary:hover { background-color: #e5f1fb; border-color: #1084d9; }
        @media (max-width: 560px) {
            #modal-update .update-meta { grid-template-columns: 1fr; }
            #modal-update .update-notes { height: 200px; }
        }
        .hotkey-toolbar {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
        }
        .hotkey-toolbar .btn {
            height: 22px;
            padding: 0 8px;
            background: #e1e1e1;
            border: 1px solid #adadad;
            border-radius: 3px;
            font-family: inherit;
            font-size: 9pt;
        }
        .hotkey-list {
            flex: 1;
            overflow: auto;
            border: 1px solid #d0d0d0;
            background: white;
            padding: 4px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 4px;
        }
        body.dark-mode .hotkey-list {
            background: #0f1012;
            border-color: #1f2124;
        }
        body.dark-mode .hotkey-row {
            border-bottom-color: #1f2124;
        }
        .hotkey-row {
            display: grid;
            grid-template-columns: 1.2fr 1fr 1fr;
            gap: 6px;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px;
        }
        .hotkey-label { color: #222; }
        /* Clean, consistent sliders */
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 18px;
            background: transparent;
        }
        input[type="range"]:focus { outline: none; }
        input[type="range"]::-webkit-slider-runnable-track {
            height: 4px;
            background: #d6d6d6;
            border-radius: 2px;
            border: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 16px;
            border-radius: 2px;
            background: var(--win-blue);
            border: none;
            margin-top: -6px;
        }
        input[type="range"]::-moz-range-track {
            height: 4px;
            background: #d6d6d6;
            border-radius: 2px;
            border: none;
        }
        input[type="range"]::-moz-range-progress {
            height: 4px;
            background: #bcdcff;
            border-radius: 2px;
        }
        input[type="range"]::-moz-range-thumb {
            width: 12px;
            height: 16px;
            border-radius: 2px;
            background: var(--win-blue);
            border: none;
        }
        body.dark-mode input[type="range"]::-webkit-slider-runnable-track,
        body.dark-mode input[type="range"]::-moz-range-track {
            background: #2b2d31;
        }
        body.dark-mode input[type="range"]::-moz-range-progress {
            background: #2f5f8f;
        }
        /* ═══════════════════════════════════════════════════════════════
           TEST MODE — proper dark theme
           ═══════════════════════════════════════════════════════════════ */
        body.test-mode {
            /* core surface scale — darkest to lightest */
            --tm-s0:  #141414;   /* deepest bg */
            --tm-s1:  #1c1c1c;   /* app bg */
            --tm-s2:  #222222;   /* titlebar / tab row */
            --tm-s3:  #272727;   /* ribbon */
            --tm-s4:  #2e2e2e;   /* panels / section bg */
            --tm-s5:  #363636;   /* hover bg */
            --tm-s6:  #3e3e3e;   /* active / selected */
            --tm-s7:  #484848;   /* borders */
            --tm-s8:  #585858;   /* lighter borders */
            /* text */
            --tm-t1:  #e8e8e8;   /* primary text */
            --tm-t2:  #999999;   /* secondary / labels */
            --tm-t3:  #666666;   /* muted */
            /* accent — neutral warm silver */
            --tm-a1:  #a8a8a8;   /* icons, highlights */
            --tm-a2:  #505050;   /* primary-button bg */
            --tm-hover-bg: rgba(255,255,255,0.06);
            --tm-hover-border: rgba(255,255,255,0.18);
            --tm-selected-bg: rgba(255,255,255,0.09);
            --tm-selected-border: rgba(255,255,255,0.26);
        }

        /* ── root variable overrides ── */
        body.test-mode {
            --bg-ribbon: var(--tm-s3);
            --border-ribbon: var(--tm-s7);
            --app-text-color: var(--tm-t1);
            --app-bg: var(--tm-s1);
            --titlebar-bg: var(--tm-s2);
            --titlebar-action-icon: var(--tm-t2);
            --titlebar-action-hover-bg: var(--tm-s5);
            --titlebar-separator: var(--tm-s7);
            --titlebar-filename: var(--tm-t1);
            --titlebar-control-icon: var(--tm-t1);
            --tab-row-bg: var(--tm-s3);
            --section-divider: var(--tm-s7);
            --section-title-color: var(--tm-t2);
            --btn-hover-bg: var(--tm-hover-bg);
            --btn-hover-border: var(--tm-hover-border);
            --btn-hover-shadow: rgba(255,255,255,0.06);
            --btn-active-bg: var(--tm-selected-bg);
            --btn-active-border: var(--tm-selected-border);
            --btn-active-shadow: rgba(255,255,255,0.10);
            --dropdown-bg: var(--tm-s4);
            --dropdown-border: var(--tm-s8);
            --dropdown-shadow: rgba(0,0,0,0.5);
            --dropdown-item-hover-bg: var(--tm-s5);
            --dropdown-arrow-color: var(--tm-t2);
            --dropdown-separator: var(--tm-s7);
            --btn-small-bg: var(--tm-s4);
            --btn-small-border: var(--tm-s7);
            --threshold-label-color: var(--tm-t2);
            --threshold-values-color: var(--tm-t1);
            --toggle-icon-color: var(--tm-a1);
            --toggle-status-color: var(--tm-t2);
            --hotkeys-icon-color: var(--tm-a1);
            --anchor-toggle-icon-color: var(--tm-a1);
            --theme-mode-toggle-icon-color: var(--tm-a1);
            --select-menu-header-color: var(--tm-t2);
            --select-menu-header-bg: var(--tm-s4);
            --select-menu-icon-all-fill: rgba(255,255,255,0.10);
            --select-menu-icon-all-fill-disabled: var(--tm-s5);
            --select-menu-icon-disabled-stroke: var(--tm-t3);
            --theme-colors-window-bg: var(--tm-s3);
            --theme-colors-titlebar-bg-start: var(--tm-s4);
            --theme-colors-titlebar-bg-end: var(--tm-s3);
            --theme-colors-titlebar-border: var(--tm-s7);
            --theme-colors-top-note-color: var(--tm-t2);
            --theme-colors-result-count-color: var(--tm-t2);
            --theme-colors-list-bg: var(--tm-s3);
            --theme-colors-editor-panel-bg-start: var(--tm-s4);
            --theme-colors-editor-panel-bg-end: var(--tm-s3);
            --theme-colors-editor-panel-border: var(--tm-s7);
            --theme-colors-editor-title-color: var(--tm-t1);
            --theme-colors-editor-key-color: var(--tm-t1);
            --theme-colors-editor-input-bg: var(--tm-s5);
            --theme-colors-editor-input-border: var(--tm-s8);
            --theme-colors-editor-swatch-border: var(--tm-s8);
            --theme-colors-editor-hint-color: var(--tm-t3);
            --theme-colors-mini-toggle-color: var(--tm-t1);
            --palette-mini-swatch-border: #050505;
            --palette-mini-swatch-inner: #ffffff;
            --palette-mini-swatch-hover-border: var(--tm-a1);
            --palette-mini-swatch-hover-inner: rgba(255,255,255,0.12);
            --view-center-icon-color: var(--tm-a1);
            --view-edgeclean-icon-color: var(--tm-a1);
            --view-theme-icon-color: var(--tm-a1);
            --select-icon-free-color: var(--tm-a1);
            --select-icon-poly-main-color: var(--tm-a1);
            --select-icon-poly-accent-color: #c0c0c0;
            --bg-hover: var(--tm-hover-bg);
            --border-hover: var(--tm-hover-border);
            --bg-selected: var(--tm-selected-bg);
            --border-selected: var(--tm-selected-border);
            --bg-canvas: #3c3c3c;
            --win-blue: var(--tm-a1);
        }

        /* ── body + core layout ── */
        body.test-mode { background: var(--tm-s1); color: var(--tm-t1); }

        /* ── title bar ── */
        body.test-mode #title-bar { background: var(--tm-s2); border-bottom: none; }
        body.test-mode .tab-row { background: var(--tm-s3); border-bottom-color: var(--tm-s7); border-top: 1px solid var(--tm-s1); color: var(--tm-t1); }
        body.test-mode .tab { color: var(--tm-t2); border-color: transparent; }
        body.test-mode .tab:not(.file):not(.active):hover { color: var(--tm-t1); background: var(--tm-s5); border-color: var(--tm-s7); }
        body.test-mode .tab.active { background: var(--tm-s3); border-color: var(--tm-s7); border-bottom-color: var(--tm-s3); color: var(--tm-t1); }
        body.test-mode .tab-row .dd-arrow { color: var(--tm-t1); }
        body.test-mode .tab.file { background: var(--tm-s6); color: var(--tm-t1); border-color: var(--tm-s8); }
        body.test-mode .tab.file:hover { background: var(--tm-s7); }

        /* ── ribbon ── */
        body.test-mode .ribbon { background: var(--tm-s3); border-bottom: 1px solid var(--tm-s7); }
        body.test-mode .section { border-right-color: var(--tm-s7); }
        body.test-mode .section-title { color: var(--tm-t3); }
        body.test-mode .btn-large { color: var(--tm-t1); }
        body.test-mode .btn-large:hover { background: var(--tm-s5); border-color: var(--tm-s7); }
        body.test-mode .btn-large.active,
        body.test-mode .btn-large.is-on { background: var(--tm-selected-bg); border-color: var(--tm-selected-border); }
        body.test-mode .toggle-status { color: var(--tm-t2); }
        body.test-mode .toggle-btn .toggle-icons { color: var(--tm-a1); }
        body.test-mode #anchor-toggle-btn .toggle-icons { color: var(--tm-a1); }
        body.test-mode #theme-mode-btn .toggle-icons { color: var(--tm-a1); }
        body.test-mode #test-mode-btn .toggle-icons { color: var(--tm-a1); }
        body.test-mode svg [fill="#0078d7"] { fill: var(--tm-a1); }
        body.test-mode svg [stroke="#0078d7"] { stroke: var(--tm-a1); }

        /* ribbon card */
        body.test-mode .ribbon-card { background: var(--tm-s4); border-color: var(--tm-s7); color: var(--tm-t1); }
        body.test-mode .ribbon-card .card-label { color: var(--tm-t1); }
        body.test-mode .ribbon-card .mini-label { color: var(--tm-t2); }
        body.test-mode .compact-input { background: var(--tm-s4); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode .ribbon-card.tile-compact .compact-input { background: var(--tm-s4); border-bottom-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode .ribbon-card.tile-compact .compact-input:focus { border-bottom-color: var(--tm-a1); }
        body.test-mode .ribbon-card .compact-input:focus { border-bottom-color: var(--tm-a1); }
        body.test-mode #pen-size-input { background: var(--tm-s4); border-bottom-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #pen-size-input:focus { border-bottom-color: var(--tm-a1); }
        body.test-mode #size-control-wrap label { color: var(--tm-t2) !important; }

        /* ── dropdown menus ── */
        body.test-mode .dropdown-panel,
        body.test-mode .paint-dropdown { background: var(--tm-s4); border-color: var(--tm-s7); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
        body.test-mode .dropdown-item,
        body.test-mode .paint-dropdown-item { color: var(--tm-t1); }
        body.test-mode .dropdown-item:hover,
        body.test-mode .paint-dropdown-item:hover { background: var(--tm-s5); }
        body.test-mode .dropdown-separator { background: var(--tm-s7); }

        /* ── modals — shared window chrome ── */
        body.test-mode .modal-mask { background: rgba(0,0,0,0.55); }
        body.test-mode #modal-resize .window,
        body.test-mode #modal-depth .window,
        body.test-mode #modal-export .window,
        body.test-mode #modal-huesat .window,
        body.test-mode #modal-hotkeys .window,
        body.test-mode #modal-info .window,
        body.test-mode #modal-colors .window,
        body.test-mode #modal-confirm-reset .window,
        body.test-mode #modal-toolbar .window,
        body.test-mode #modal-wincolor .window,
        body.test-mode #modal-tool-customizer .window,
        body.test-mode .modal-window {
            background: var(--tm-s3);
            border-color: var(--tm-s7);
            color: var(--tm-t1);
            box-shadow: 0 12px 40px rgba(0,0,0,0.6);
        }

        /* modal title bars */
        body.test-mode #modal-resize .title-bar,
        body.test-mode #modal-depth .title-bar,
        body.test-mode #modal-export .title-bar,
        body.test-mode #modal-huesat .title-bar,
        body.test-mode #modal-hotkeys .title-bar,
        body.test-mode #modal-info .title-bar,
        body.test-mode #modal-colors .title-bar,
        body.test-mode #modal-confirm-reset .title-bar,
        body.test-mode #modal-toolbar .title-bar,
        body.test-mode #modal-wincolor .title-bar,
        body.test-mode #modal-tool-customizer .title-bar {
            background: var(--tm-s4);
            border-bottom-color: var(--tm-s7);
            color: var(--tm-t1);
        }
        body.test-mode .close-btn { color: var(--tm-t2); }
        body.test-mode .close-btn:hover { background: #c42b1c; color: #fff; }

        /* modal footers */
        body.test-mode #modal-resize .footer,
        body.test-mode #modal-depth .footer,
        body.test-mode #modal-export .footer,
        body.test-mode #modal-huesat .footer,
        body.test-mode #modal-hotkeys .footer,
        body.test-mode #modal-colors .footer,
        body.test-mode #modal-tool-customizer .footer {
            border-top-color: var(--tm-s7);
        }

        /* modal buttons */
        body.test-mode .modal-mask .btn,
        body.test-mode .modal-mask button.btn {
            background: var(--tm-s5);
            border-color: var(--tm-s8);
            color: var(--tm-t1);
        }
        body.test-mode .modal-mask .btn:hover { background: var(--tm-s6); border-color: var(--tm-s8); }
        body.test-mode .modal-mask .btn-primary { background: var(--tm-s6); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode .modal-mask .btn-primary:hover { background: var(--tm-s7); border-color: var(--tm-a1); }
        body.test-mode .modal-mask .btn-ok { background: var(--tm-s6); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode .modal-mask .btn-ok:hover { background: var(--tm-s7); border-color: var(--tm-a1); }

        /* modal inputs */
        body.test-mode .modal-mask input[type="text"],
        body.test-mode .modal-mask input[type="number"],
        body.test-mode .modal-mask select,
        body.test-mode .modal-mask textarea {
            background: var(--tm-s5);
            border-color: var(--tm-s8);
            color: var(--tm-t1);
        }
        body.test-mode .modal-mask input[type="text"]:focus,
        body.test-mode .modal-mask input[type="number"]:focus,
        body.test-mode .modal-mask select:focus { border-color: var(--tm-a1); outline: none; }
        body.test-mode .modal-mask label,
        body.test-mode .modal-mask .row label { color: var(--tm-t1); }
        body.test-mode .modal-mask fieldset { border-color: var(--tm-s7); }
        body.test-mode .modal-mask legend { color: var(--tm-t2); }
        body.test-mode .modal-mask .section-header { color: var(--tm-t2); border-bottom-color: var(--tm-s7); }

        /* ── modal-depth specific ── */
        body.test-mode #modal-depth { --win-bg: var(--tm-s3); --win-text: var(--tm-t1); --input-border: var(--tm-s8); --input-focus: var(--tm-a1); --btn-border: var(--tm-s8); --btn-hover: var(--tm-s5); }
        body.test-mode #modal-depth .btn { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-depth .btn:hover { background: var(--tm-s6); border-color: var(--tm-a1); }
        body.test-mode #modal-depth .btn-primary { background: var(--tm-s6); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-depth .btn-primary:hover { background: var(--tm-s7); border-color: var(--tm-a1); }
        body.test-mode #modal-depth .depth-radio { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-depth .depth-color-list input[type="radio"]:checked + .depth-radio { background: var(--tm-s6); border-color: var(--tm-a1); color: var(--tm-t1); }
        body.test-mode #modal-depth .depth-group-label { color: var(--tm-t2); }

        /* ── modal-huesat specific ── */
        body.test-mode #modal-huesat { --win-bg: var(--tm-s3); --win-text: var(--tm-t1); --input-border: var(--tm-s8); --input-focus: var(--tm-a1); --btn-border: var(--tm-s8); --btn-hover: var(--tm-s5); }
        body.test-mode #modal-huesat .channel-area { --hs-area-bg: var(--tm-s4); background: var(--tm-s4); border-color: var(--tm-s7); }
        body.test-mode #modal-huesat .channel-label { color: var(--tm-t2); }
        body.test-mode #modal-huesat .channel-btn { filter: brightness(0.9); }
        body.test-mode #modal-huesat .channel-wrap.active { background: transparent; }
        body.test-mode #modal-huesat .master-btn { background: var(--tm-s6); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-huesat .master-btn.active { background: var(--tm-t1); color: var(--tm-s1); border-color: var(--tm-t1); }
        body.test-mode #modal-huesat .preset-row { background: var(--tm-s4); border-color: var(--tm-s7); }
        body.test-mode #modal-huesat .preset-row label { color: var(--tm-t2); }

        /* ── modal-resize specific ── */
        body.test-mode #modal-resize { --win-bg: var(--tm-s3); --win-text: var(--tm-t1); }
        body.test-mode #modal-resize .col-label { color: var(--tm-t1); }


        /* ── modal-export specific ── */
        body.test-mode #modal-export { --win-bg: var(--tm-s3); --input-border: var(--tm-s8); --input-focus: var(--tm-a1); --btn-border: var(--tm-s8); --btn-hover: var(--tm-s5); }
        body.test-mode #modal-export .export-format-btn { background: var(--tm-s5); border-color: var(--tm-s7); color: var(--tm-t1); }
        body.test-mode #modal-export .export-format-btn.active { background: var(--tm-s6); border-color: var(--tm-a1); color: var(--tm-t1); }

        /* ── modal-colors (theme colors) specific ── */
        body.test-mode #modal-colors .window { border-color: var(--tm-s7); }
        body.test-mode #modal-colors .close-btn { color: var(--tm-t1); }
        body.test-mode #modal-colors .select-hint { color: var(--tm-t2); }
        body.test-mode #modal-colors .color-list { border-color: var(--tm-s7); }
        body.test-mode #modal-colors .color-item:hover { background: var(--tm-s5); border-color: var(--tm-s7); }
        body.test-mode #modal-colors .color-item.is-active { background: var(--tm-selected-bg); border-color: var(--tm-selected-border); }
        body.test-mode #modal-colors .color-label { color: var(--tm-t1); }
        body.test-mode #modal-colors .color-element-label { color: var(--tm-t2); }
        body.test-mode #modal-colors .color-input { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .color-input.invalid { border-color: #e81123; background: rgba(232,17,35,0.15); }
        body.test-mode #modal-colors .preset-select,
        body.test-mode #modal-colors .preset-input,
        body.test-mode #modal-colors .search-input { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .btn { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .btn:hover { background: var(--tm-s6); border-color: var(--tm-a1); color: var(--tm-t1); }
        body.test-mode #modal-colors .editor-grid label { color: var(--tm-t2); }
        body.test-mode #modal-colors .editor-grid input[type="number"] { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .color-item { border-bottom-color: var(--tm-s7); }
        body.test-mode #modal-colors .color-label { color: var(--tm-t1); }
        body.test-mode #modal-colors .color-element-label { color: var(--tm-t2); }
        body.test-mode #modal-colors .preset-row { background: var(--tm-s4); border-color: var(--tm-s7); }
        body.test-mode #modal-colors .preset-select { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .preset-input { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }

        /* ── modal-hotkeys ── */
        body.test-mode .hotkey-list { background: var(--tm-s4); border-color: var(--tm-s7); }
        body.test-mode .hotkey-row { border-bottom-color: var(--tm-s7); }
        body.test-mode .hotkey-label { color: var(--tm-t1); }
        body.test-mode .hotkeys-icon { color: var(--tm-a1); }

        /* ── modal-info ── */
        body.test-mode #modal-info .info-section { border-bottom-color: var(--tm-s7); }
        body.test-mode #modal-info .info-title { color: var(--tm-a1); }
        body.test-mode #modal-info li,
        body.test-mode #modal-info p { color: var(--tm-t1); }
        body.test-mode #modal-info .link-btn { color: var(--tm-a1); }

        /* ── file menu ── */
        body.test-mode #file-menu.file-menu-template { background: var(--tm-s3); border-color: var(--tm-s7); box-shadow: 2px 4px 16px rgba(0,0,0,0.5); }
        body.test-mode #file-menu .file-menu-left { background: var(--tm-s4); border-right-color: var(--tm-s7); }
        body.test-mode #file-menu .file-menu-item { color: var(--tm-t1); }
        body.test-mode #file-menu .file-menu-item:hover { background: var(--tm-s5); border-color: var(--tm-s7); }
        body.test-mode #file-menu .file-menu-separator { background: var(--tm-s7); }
        body.test-mode #file-menu .file-menu-right { background: var(--tm-s3); }
        body.test-mode #file-menu .file-menu-recent-toggle { background: var(--tm-s4); border-color: var(--tm-s7); color: var(--tm-t2); }
        body.test-mode #file-menu .file-menu-recent-toggle:hover { background: var(--tm-s5); color: var(--tm-t1); }
        body.test-mode #file-menu.file-menu-template.recent-collapsed .file-menu-recent-toggle { border-right: 1px solid var(--tm-s7); border-left: none; }
        body.test-mode #file-menu .file-menu-recent-header { color: var(--tm-t1); border-bottom-color: var(--tm-s7); }
        body.test-mode #file-menu .file-menu-recent-item { color: var(--tm-t2); }
        body.test-mode #file-menu .file-menu-recent-item:hover { background: var(--tm-s5); color: var(--tm-t1); }

        /* ── select menu ── */
        body.test-mode .select-menu { background: var(--tm-s4); border-color: var(--tm-s7); box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
        body.test-mode .select-menu-header { background: var(--tm-s4); color: var(--tm-t2); border-bottom-color: var(--tm-s7); }
        body.test-mode .select-menu-item { color: var(--tm-t1); }
        body.test-mode .select-menu-item:hover { background: var(--tm-s5); }

        /* ── sliders ── */
        body.test-mode input[type="range"]::-webkit-slider-runnable-track,
        body.test-mode input[type="range"]::-moz-range-track { background: var(--tm-s6); }
        body.test-mode input[type="range"]::-moz-range-progress { background: var(--tm-a2); }
        body.test-mode input[type="range"]::-webkit-slider-thumb { background: var(--tm-a1); }
        body.test-mode input[type="range"]::-moz-range-thumb { background: var(--tm-a1); }

        /* ── save reminder / hotkey panel ── */
        body.test-mode #save-reminder-modal .window,
        body.test-mode #close-confirm-modal .window { background: var(--tm-s3); border-color: var(--tm-s7); color: var(--tm-t1); }

        /* ── layer panel ── */
        body.test-mode #lsys-panel { background: var(--tm-s3); border-color: var(--tm-s7); }
        body.test-mode #lsys-list { background: var(--tm-s4); }
        body.test-mode .lsys-layer { background: var(--tm-s4); border-bottom-color: var(--tm-s7); color: var(--tm-t1); }
        body.test-mode .lsys-layer.active { background: var(--tm-s5); }
        body.test-mode .lsys-layer-name { color: var(--tm-t1); }
        body.test-mode #lsys-toolbar { background: var(--tm-s3); border-top-color: var(--tm-s7); }
        body.test-mode .lsys-btn { color: var(--tm-t1); }
        body.test-mode .lsys-btn:hover { background: var(--tm-s5); }

        /* ── status bar / bottom bar ── */
        body.test-mode #status-bar,
        body.test-mode .status-bar { background: var(--tm-s2); border-top-color: var(--tm-s7); color: var(--tm-t2); }

        /* ── palette area ── */
        body.test-mode .mini-swatch.empty { box-shadow: none; }
        body.test-mode #palette-bar,
        body.test-mode .palette-bar { background: var(--tm-s3); border-top-color: var(--tm-s7); }

        /* ── modal-wincolor ── */
        body.test-mode #modal-wincolor .window { background: var(--tm-s3); border-color: var(--tm-s7); }
        body.test-mode #modal-wincolor .tab-btn { background: var(--tm-s5); border-color: var(--tm-s7); color: var(--tm-t1); }
        body.test-mode #modal-wincolor .tab-btn.active { background: var(--tm-s6); border-color: var(--tm-a1); color: var(--tm-t1); }

        /* ── swap-colors button (inline styles override via specificity) ── */
        body.test-mode #swap-colors-btn { background: var(--tm-s4) !important; border-color: var(--tm-s7) !important; color: var(--tm-t1); }
        body.test-mode #swap-colors-btn:hover { background: var(--tm-s5) !important; border-color: var(--tm-s8) !important; }

        /* ════════════════════════════════════════════════════════════════
         * DARK REFINED MODE — lighter, purple-grey tinted dark theme
         * Ribbon: #43434A  |  Title bar: #1F1F22
         * ════════════════════════════════════════════════════════════════ */
        body.dark-refined-mode {
            /* core surface scale */
            --dr-s0:  #17171A;   /* deepest bg */
            --dr-s1:  #1A1A1E;   /* app bg */
            --dr-s2:  #1F1F22;   /* titlebar */
            --dr-s3:  #43434A;   /* ribbon / tab row */
            --dr-s4:  #4E4E56;   /* panels / section bg */
            --dr-s5:  #56565F;   /* hover bg */
            --dr-s6:  #5E5E68;   /* active / selected */
            --dr-s7:  #6A6A75;   /* borders */
            --dr-s8:  #7A7A86;   /* lighter borders */
            /* text */
            --dr-t1:  #EAEAEA;   /* primary text */
            --dr-t2:  #A0A0AE;   /* secondary / labels */
            --dr-t3:  #72727E;   /* muted */
            /* accent — softer blue */
            --dr-a1:  #6AADEE;   /* links, highlights */
            --dr-a2:  #2F68A4;   /* active borders */
            --dr-hover-bg: rgba(106,173,238,0.10);
            --dr-hover-border: rgba(106,173,238,0.30);
            --dr-selected-bg: rgba(106,173,238,0.15);
            --dr-selected-border: rgba(106,173,238,0.40);
        }

        /* ── root variable overrides ── */
        body.dark-refined-mode {
            --bg-ribbon: var(--dr-s3);
            --border-ribbon: var(--dr-s7);
            --app-text-color: var(--dr-t1);
            --app-bg: var(--dr-s1);
            --titlebar-bg: var(--dr-s2);
            --titlebar-action-icon: var(--dr-t2);
            --titlebar-action-hover-bg: var(--dr-s5);
            --titlebar-separator: var(--dr-s7);
            --titlebar-filename: var(--dr-t1);
            --titlebar-control-icon: var(--dr-t1);
            --tab-row-bg: var(--dr-s3);
            --section-divider: var(--dr-s7);
            --section-title-color: var(--dr-t2);
            --btn-hover-bg: var(--dr-hover-bg);
            --btn-hover-border: var(--dr-hover-border);
            --btn-hover-shadow: rgba(106,173,238,0.15);
            --btn-active-bg: var(--dr-selected-bg);
            --btn-active-border: var(--dr-selected-border);
            --btn-active-shadow: rgba(106,173,238,0.25);
            --dropdown-bg: var(--dr-s4);
            --dropdown-border: var(--dr-s8);
            --dropdown-shadow: rgba(0,0,0,0.45);
            --dropdown-item-hover-bg: var(--dr-s5);
            --dropdown-arrow-color: var(--dr-t2);
            --dropdown-separator: var(--dr-s7);
            --btn-small-bg: var(--dr-s4);
            --btn-small-border: var(--dr-s7);
            --threshold-label-color: var(--dr-t2);
            --threshold-values-color: var(--dr-t1);
            --toggle-icon-color: var(--dr-a1);
            --toggle-status-color: var(--dr-t2);
            --hotkeys-icon-color: var(--dr-a1);
            --anchor-toggle-icon-color: var(--dr-a1);
            --theme-mode-toggle-icon-color: var(--dr-a1);
            --select-menu-header-color: var(--dr-t2);
            --select-menu-header-bg: var(--dr-s4);
            --select-menu-icon-all-fill: rgba(106,173,238,0.18);
            --select-menu-icon-all-fill-disabled: var(--dr-s5);
            --select-menu-icon-disabled-stroke: var(--dr-t3);
            --theme-colors-window-bg: var(--dr-s3);
            --theme-colors-titlebar-bg-start: var(--dr-s4);
            --theme-colors-titlebar-bg-end: var(--dr-s3);
            --theme-colors-titlebar-border: var(--dr-s7);
            --theme-colors-top-note-color: var(--dr-t2);
            --theme-colors-result-count-color: var(--dr-t2);
            --theme-colors-list-bg: var(--dr-s3);
            --theme-colors-editor-panel-bg-start: var(--dr-s4);
            --theme-colors-editor-panel-bg-end: var(--dr-s3);
            --theme-colors-editor-panel-border: var(--dr-s7);
            --theme-colors-editor-title-color: var(--dr-t1);
            --theme-colors-editor-key-color: var(--dr-t1);
            --theme-colors-editor-input-bg: var(--dr-s5);
            --theme-colors-editor-input-border: var(--dr-s8);
            --theme-colors-editor-swatch-border: var(--dr-s8);
            --theme-colors-editor-hint-color: var(--dr-t3);
            --theme-colors-mini-toggle-color: var(--dr-t1);
            --palette-mini-swatch-border: #050507;
            --palette-mini-swatch-inner: #ffffff;
            --palette-mini-swatch-hover-border: var(--dr-a1);
            --palette-mini-swatch-hover-inner: rgba(106,173,238,0.2);
            --view-center-icon-color: var(--dr-a1);
            --view-edgeclean-icon-color: var(--dr-a1);
            --view-theme-icon-color: var(--dr-a1);
            --select-icon-free-color: var(--dr-a1);
            --select-icon-poly-main-color: var(--dr-a1);
            --select-icon-poly-accent-color: #80c0f4;
            --bg-hover: var(--dr-hover-bg);
            --border-hover: var(--dr-hover-border);
            --bg-selected: var(--dr-selected-bg);
            --border-selected: var(--dr-selected-border);
            --bg-canvas: #4a4a52;
            --win-blue: var(--dr-a1);
        }

        /* ── body + core layout ── */
        body.dark-refined-mode { background: var(--dr-s1); color: var(--dr-t1); }

        /* ── title bar ── */
        body.dark-refined-mode #title-bar { background: var(--dr-s2); border-bottom: none; }
        body.dark-refined-mode .tab-row { background: var(--dr-s3); border-bottom-color: var(--dr-s7); border-top: 1px solid var(--dr-s2); color: var(--dr-t1); }
        body.dark-refined-mode .tab { color: var(--dr-t2); border-color: transparent; }
        body.dark-refined-mode .tab:not(.file):not(.active):hover { color: var(--dr-t1); background: var(--dr-s5); border-color: var(--dr-s7); }
        body.dark-refined-mode .tab.active { background: var(--dr-s3); border-color: var(--dr-s7); border-bottom-color: var(--dr-s3); color: var(--dr-t1); }
        body.dark-refined-mode .tab-row .dd-arrow { color: var(--dr-t1); }

        /* ── ribbon ── */
        body.dark-refined-mode .ribbon { background: var(--dr-s3); border-bottom: 1px solid var(--dr-s7); }
        body.dark-refined-mode .section { border-right-color: var(--dr-s7); }
        body.dark-refined-mode .section-title { color: var(--dr-t3); }
        body.dark-refined-mode .btn-large { color: var(--dr-t1); }
        body.dark-refined-mode .btn-large:hover { background: var(--dr-s5); border-color: var(--dr-s7); }
        body.dark-refined-mode .btn-large.active,
        body.dark-refined-mode .btn-large.is-on { background: var(--dr-selected-bg); border-color: var(--dr-selected-border); }
        body.dark-refined-mode .toggle-status { color: var(--dr-t2); }
        body.dark-refined-mode .toggle-btn .toggle-icons { color: var(--dr-a1); }
        body.dark-refined-mode #anchor-toggle-btn .toggle-icons { color: var(--dr-a1); }
        body.dark-refined-mode #theme-mode-btn .toggle-icons { color: var(--dr-a1); }
        body.dark-refined-mode #test-mode-btn .toggle-icons { color: var(--dr-a1); }
        body.dark-refined-mode #dark-refined-btn .toggle-icons { color: var(--dr-a1); }
        body.dark-refined-mode svg [fill="#0078d7"] { fill: var(--dr-a1); }
        body.dark-refined-mode svg [stroke="#0078d7"] { stroke: var(--dr-a1); }

        /* ribbon card */
        body.dark-refined-mode .ribbon-card { background: var(--dr-s4); border-color: var(--dr-s7); color: var(--dr-t1); }
        body.dark-refined-mode .ribbon-card .card-label { color: var(--dr-t1); }
        body.dark-refined-mode .ribbon-card .mini-label { color: var(--dr-t2); }
        body.dark-refined-mode .compact-input { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }

        /* ── dropdown menus ── */
        body.dark-refined-mode .dropdown-panel,
        body.dark-refined-mode .paint-dropdown { background: var(--dr-s4); border-color: var(--dr-s7); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
        body.dark-refined-mode .dropdown-item,
        body.dark-refined-mode .paint-dropdown-item { color: var(--dr-t1); }
        body.dark-refined-mode .dropdown-item:hover,
        body.dark-refined-mode .paint-dropdown-item:hover { background: var(--dr-s5); }
        body.dark-refined-mode .dropdown-separator { background: var(--dr-s7); }

        /* ── modals — shared window chrome ── */
        body.dark-refined-mode .modal-mask { background: rgba(0,0,0,0.50); }
        body.dark-refined-mode #modal-resize .window,
        body.dark-refined-mode #modal-depth .window,
        body.dark-refined-mode #modal-export .window,
        body.dark-refined-mode #modal-huesat .window,
        body.dark-refined-mode #modal-hotkeys .window,
        body.dark-refined-mode #modal-info .window,
        body.dark-refined-mode #modal-colors .window,
        body.dark-refined-mode #modal-confirm-reset .window,
        body.dark-refined-mode #modal-toolbar .window,
        body.dark-refined-mode #modal-wincolor .window,
        body.dark-refined-mode #modal-tool-customizer .window,
        body.dark-refined-mode .modal-window {
            background: var(--dr-s3);
            border-color: var(--dr-s7);
            color: var(--dr-t1);
            box-shadow: 0 12px 40px rgba(0,0,0,0.5);
        }

        /* modal title bars */
        body.dark-refined-mode #modal-resize .title-bar,
        body.dark-refined-mode #modal-depth .title-bar,
        body.dark-refined-mode #modal-export .title-bar,
        body.dark-refined-mode #modal-huesat .title-bar,
        body.dark-refined-mode #modal-hotkeys .title-bar,
        body.dark-refined-mode #modal-info .title-bar,
        body.dark-refined-mode #modal-colors .title-bar,
        body.dark-refined-mode #modal-confirm-reset .title-bar,
        body.dark-refined-mode #modal-toolbar .title-bar,
        body.dark-refined-mode #modal-wincolor .title-bar,
        body.dark-refined-mode #modal-tool-customizer .title-bar {
            background: var(--dr-s4);
            border-bottom-color: var(--dr-s7);
            color: var(--dr-t1);
        }
        body.dark-refined-mode .close-btn { color: var(--dr-t2); }
        body.dark-refined-mode .close-btn:hover { background: #c42b1c; color: #fff; }

        /* modal footers */
        body.dark-refined-mode #modal-resize .footer,
        body.dark-refined-mode #modal-depth .footer,
        body.dark-refined-mode #modal-export .footer,
        body.dark-refined-mode #modal-huesat .footer,
        body.dark-refined-mode #modal-hotkeys .footer,
        body.dark-refined-mode #modal-colors .footer,
        body.dark-refined-mode #modal-tool-customizer .footer {
            border-top-color: var(--dr-s7);
        }

        /* modal buttons */
        body.dark-refined-mode .modal-mask .btn,
        body.dark-refined-mode .modal-mask button.btn {
            background: var(--dr-s5);
            border-color: var(--dr-s8);
            color: var(--dr-t1);
        }
        body.dark-refined-mode .modal-mask .btn:hover { background: var(--dr-s6); border-color: var(--dr-a2); }
        body.dark-refined-mode .modal-mask .btn-primary { background: var(--dr-a2); border-color: #1a5090; color: #fff; }
        body.dark-refined-mode .modal-mask .btn-primary:hover { background: #2070b8; }
        body.dark-refined-mode .modal-mask .btn-ok { background: var(--dr-a2); border-color: #1a5090; color: #fff; }
        body.dark-refined-mode .modal-mask .btn-ok:hover { background: #2070b8; }

        /* modal inputs */
        body.dark-refined-mode .modal-mask input[type="text"],
        body.dark-refined-mode .modal-mask input[type="number"],
        body.dark-refined-mode .modal-mask select,
        body.dark-refined-mode .modal-mask textarea {
            background: var(--dr-s5);
            border-color: var(--dr-s8);
            color: var(--dr-t1);
        }
        body.dark-refined-mode .modal-mask input[type="text"]:focus,
        body.dark-refined-mode .modal-mask input[type="number"]:focus,
        body.dark-refined-mode .modal-mask select:focus { border-color: var(--dr-a1); outline: none; }
        body.dark-refined-mode .modal-mask label,
        body.dark-refined-mode .modal-mask .row label { color: var(--dr-t1); }
        body.dark-refined-mode .modal-mask fieldset { border-color: var(--dr-s7); }
        body.dark-refined-mode .modal-mask legend { color: var(--dr-t2); }
        body.dark-refined-mode .modal-mask .section-header { color: var(--dr-t2); border-bottom-color: var(--dr-s7); }

        /* modal-depth */
        body.dark-refined-mode #modal-depth { --win-bg: var(--dr-s3); --win-text: var(--dr-t1); --input-border: var(--dr-s8); --input-focus: var(--dr-a1); --btn-border: var(--dr-s8); --btn-hover: var(--dr-s5); }
        body.dark-refined-mode #modal-depth .btn { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-depth .btn:hover { background: var(--dr-s6); border-color: var(--dr-a1); }
        body.dark-refined-mode #modal-depth .btn-primary { background: var(--dr-a2); border-color: #1a5090; color: #fff; }
        body.dark-refined-mode #modal-depth .btn-primary:hover { background: #2070b8; }
        body.dark-refined-mode #modal-depth .depth-radio { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-depth .depth-color-list input[type="radio"]:checked + .depth-radio { background: var(--dr-a2); border-color: var(--dr-a1); color: #fff; }
        body.dark-refined-mode #modal-depth .depth-group-label { color: var(--dr-t2); }

        /* modal-huesat */
        body.dark-refined-mode #modal-huesat { --win-bg: var(--dr-s3); --win-text: var(--dr-t1); --input-border: var(--dr-s8); --input-focus: var(--dr-a1); --btn-border: var(--dr-s8); --btn-hover: var(--dr-s5); }
        body.dark-refined-mode #modal-huesat .channel-area { --hs-area-bg: var(--dr-s4); background: var(--dr-s4); border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-huesat .channel-label { color: var(--dr-t2); }
        body.dark-refined-mode #modal-huesat .channel-btn { filter: brightness(0.9); }
        body.dark-refined-mode #modal-huesat .channel-wrap.active { background: transparent; }
        body.dark-refined-mode #modal-huesat .master-btn { background: var(--dr-s6); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-huesat .master-btn.active { background: var(--dr-t1); color: var(--dr-s1); border-color: var(--dr-t1); }
        body.dark-refined-mode #modal-huesat .preset-row { background: var(--dr-s4); border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-huesat .preset-row label { color: var(--dr-t2); }
        body.dark-refined-mode #modal-huesat .btn { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-huesat .btn:hover { background: var(--dr-s6); border-color: var(--dr-a1); }
        body.dark-refined-mode #modal-huesat .btn-primary { background: var(--dr-a2); border-color: #1a5090; color: #fff; }
        body.dark-refined-mode #modal-huesat .btn-primary:hover { background: #2070b8; }

        /* modal-resize */
        body.dark-refined-mode #modal-resize { --win-bg: var(--dr-s3); --win-text: var(--dr-t1); }
        body.dark-refined-mode #modal-resize .col-label { color: var(--dr-t1); }


        /* modal-export */
        body.dark-refined-mode #modal-export { --win-bg: var(--dr-s3); --input-border: var(--dr-s8); --input-focus: var(--dr-a1); --btn-border: var(--dr-s8); --btn-hover: var(--dr-s5); }
        body.dark-refined-mode #modal-export .export-format-btn { background: var(--dr-s5); border-color: var(--dr-s7); color: var(--dr-t1); }
        body.dark-refined-mode #modal-export .export-format-btn.active { background: var(--dr-a2); border-color: var(--dr-a1); color: #fff; }

        /* modal-colors */
        body.dark-refined-mode #modal-colors .window { border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-colors .close-btn { color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .select-hint { color: var(--dr-t2); }
        body.dark-refined-mode #modal-colors .color-list { border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-colors .color-item:hover { background: var(--dr-s5); border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-colors .color-item.is-active { background: var(--dr-selected-bg); border-color: var(--dr-selected-border); }
        body.dark-refined-mode #modal-colors .color-label { color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .color-element-label { color: var(--dr-t2); }
        body.dark-refined-mode #modal-colors .color-input { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .color-input.invalid { border-color: #e81123; background: rgba(232,17,35,0.15); }
        body.dark-refined-mode #modal-colors .preset-select,
        body.dark-refined-mode #modal-colors .preset-input,
        body.dark-refined-mode #modal-colors .search-input { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .btn { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .btn:hover { background: var(--dr-s6); border-color: var(--dr-a1); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .editor-grid label { color: var(--dr-t2); }
        body.dark-refined-mode #modal-colors .editor-grid input[type="number"] { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .color-item { border-bottom-color: var(--dr-s7); }
        body.dark-refined-mode #modal-colors .preset-row { background: var(--dr-s4); border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-colors .preset-select { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }
        body.dark-refined-mode #modal-colors .preset-input { background: var(--dr-s5); border-color: var(--dr-s8); color: var(--dr-t1); }

        /* modal-hotkeys */
        body.dark-refined-mode .hotkey-list { background: var(--dr-s4); border-color: var(--dr-s7); }
        body.dark-refined-mode .hotkey-row { border-bottom-color: var(--dr-s7); }
        body.dark-refined-mode .hotkey-label { color: var(--dr-t1); }
        body.dark-refined-mode .hotkeys-icon { color: var(--dr-a1); }

        /* modal-info */
        body.dark-refined-mode #modal-info .info-section { border-bottom-color: var(--dr-s7); }
        body.dark-refined-mode #modal-info .info-title { color: var(--dr-a1); }
        body.dark-refined-mode #modal-info li,
        body.dark-refined-mode #modal-info p { color: var(--dr-t1); }
        body.dark-refined-mode #modal-info .link-btn { color: var(--dr-a1); }

        /* file menu */
        body.dark-refined-mode #file-menu.file-menu-template { background: var(--dr-s3); border-color: var(--dr-s7); box-shadow: 2px 4px 16px rgba(0,0,0,0.45); }
        body.dark-refined-mode #file-menu .file-menu-left { background: var(--dr-s4); border-right-color: var(--dr-s7); }
        body.dark-refined-mode #file-menu .file-menu-item { color: var(--dr-t1); }
        body.dark-refined-mode #file-menu .file-menu-item:hover { background: var(--dr-s5); border-color: var(--dr-s7); }
        body.dark-refined-mode #file-menu .file-menu-separator { background: var(--dr-s7); }
        body.dark-refined-mode #file-menu .file-menu-right { background: var(--dr-s3); }
        body.dark-refined-mode #file-menu .file-menu-recent-toggle { background: var(--dr-s4); border-color: var(--dr-s7); color: var(--dr-t2); }
        body.dark-refined-mode #file-menu .file-menu-recent-toggle:hover { background: var(--dr-s5); color: var(--dr-t1); }
        body.dark-refined-mode #file-menu.file-menu-template.recent-collapsed .file-menu-recent-toggle { border-right: 1px solid var(--dr-s7); border-left: none; }
        body.dark-refined-mode #file-menu .file-menu-recent-header { color: var(--dr-t1); border-bottom-color: var(--dr-s7); }
        body.dark-refined-mode #file-menu .file-menu-recent-item { color: var(--dr-t2); }
        body.dark-refined-mode #file-menu .file-menu-recent-item:hover { background: var(--dr-s5); color: var(--dr-t1); }

        /* select menu */
        body.dark-refined-mode .select-menu { background: var(--dr-s4); border-color: var(--dr-s7); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
        body.dark-refined-mode .select-menu-header { background: var(--dr-s4); color: var(--dr-t2); border-bottom-color: var(--dr-s7); }
        body.dark-refined-mode .select-menu-item { color: var(--dr-t1); }
        body.dark-refined-mode .select-menu-item:hover { background: var(--dr-s5); }

        /* sliders */
        body.dark-refined-mode input[type="range"]::-webkit-slider-runnable-track,
        body.dark-refined-mode input[type="range"]::-moz-range-track { background: var(--dr-s6); }
        body.dark-refined-mode input[type="range"]::-moz-range-progress { background: var(--dr-a2); }
        body.dark-refined-mode input[type="range"]::-webkit-slider-thumb { background: var(--dr-a1); }
        body.dark-refined-mode input[type="range"]::-moz-range-thumb { background: var(--dr-a1); }

        /* save reminder / close confirm */
        body.dark-refined-mode #save-reminder-modal .window,
        body.dark-refined-mode #close-confirm-modal .window { background: var(--dr-s3); border-color: var(--dr-s7); color: var(--dr-t1); }

        /* layer panel */
        body.dark-refined-mode #lsys-panel { background: var(--dr-s3); border-color: var(--dr-s7); }
        body.dark-refined-mode #lsys-list { background: var(--dr-s4); }
        body.dark-refined-mode .lsys-layer { background: var(--dr-s4); border-bottom-color: var(--dr-s7); color: var(--dr-t1); }
        body.dark-refined-mode .lsys-layer.active { background: var(--dr-s5); }
        body.dark-refined-mode .lsys-layer-name { color: var(--dr-t1); }
        body.dark-refined-mode #lsys-toolbar { background: var(--dr-s3); border-top-color: var(--dr-s7); }
        body.dark-refined-mode .lsys-btn { color: var(--dr-t1); }
        body.dark-refined-mode .lsys-btn:hover { background: var(--dr-s5); }

        /* status bar */
        body.dark-refined-mode #status-bar,
        body.dark-refined-mode .status-bar { background: var(--dr-s2); border-top-color: var(--dr-s7); color: var(--dr-t2); }

        /* palette area */
        body.dark-refined-mode .mini-swatch.empty { box-shadow: none; }
        body.dark-refined-mode #palette-bar,
        body.dark-refined-mode .palette-bar { background: var(--dr-s3); border-top-color: var(--dr-s7); }

        /* modal-wincolor */
        body.dark-refined-mode #modal-wincolor .window { background: var(--dr-s3); border-color: var(--dr-s7); }
        body.dark-refined-mode #modal-wincolor .tab-btn { background: var(--dr-s5); border-color: var(--dr-s7); color: var(--dr-t1); }
        body.dark-refined-mode #modal-wincolor .tab-btn.active { background: var(--dr-a2); color: #fff; }

        /* swap-colors button */
        body.dark-refined-mode #swap-colors-btn { background: var(--dr-s4) !important; border-color: var(--dr-s7) !important; color: var(--dr-t1); }
        body.dark-refined-mode #swap-colors-btn:hover { background: var(--dr-s5) !important; border-color: var(--dr-s8) !important; }

        /* ── active color slot selection highlight ── */
        body.test-mode .active-color-col.selected { background: var(--tm-selected-bg); border-color: var(--tm-selected-border); }
        body.test-mode .active-color-col:not(.selected):hover { background: var(--tm-hover-bg); border-color: var(--tm-hover-border); box-shadow: none; }

        /* ── select tool split button selection highlight ── */
        body.test-mode .split-btn-container.select-split.selection-highlight { border-color: var(--tm-selected-border); }
        body.test-mode .split-btn-container.select-split.selection-highlight .split-btn-top,
        body.test-mode .split-btn-container.select-split.selection-highlight .split-btn-bottom.select-dropdown { background: var(--tm-selected-bg); }
        body.test-mode .split-btn-container.select-split .split-btn-bottom.select-dropdown.selection-highlight { border-top-color: var(--tm-selected-border); }
        body.test-mode .split-btn-container.select-split:hover { border-color: var(--tm-hover-border); background: var(--tm-hover-bg); box-shadow: none; }
        body.test-mode .split-btn-container.select-split:hover .split-btn-bottom.select-dropdown { border-top-color: var(--tm-hover-border); background: var(--tm-hover-bg); box-shadow: none; }

        /* ── select-menu dropdown (overrides its own local vars) ── */
        body.test-mode #select-menu .icon-free,
        body.test-mode #select-menu .icon-poly,
        body.test-mode #select-menu .icon-invert { filter: grayscale(1) brightness(1.4); }
        body.test-mode #select-menu { --bg-color: var(--tm-s4); --border-outer: var(--tm-s7); --header-text: var(--tm-t2); --text-color: var(--tm-t1); --disabled-text: var(--tm-t3); --separator: var(--tm-s7); --item-hover-bg: var(--tm-s5); --item-hover-border: var(--tm-s8); --item-select-bg: var(--tm-selected-bg); --item-select-border: var(--tm-selected-border); --icon-stroke: var(--tm-a1); --select-menu-icon-delete-stroke: #c06060; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); }

        /* ── depth reduction modal ── */
        body.test-mode #modal-depth .depth-radio { background: var(--tm-s5); border-color: var(--tm-s8); }
        body.test-mode #modal-depth #custom-depth-val { background: transparent; color: var(--tm-t1); }

        /* ── hue/sat modal buttons ── */
        body.test-mode #modal-huesat .btn { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-huesat .btn:hover { background: var(--tm-s6); border-color: var(--tm-a1); }
        body.test-mode #modal-huesat .btn-primary { background: var(--tm-s6); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-huesat .btn-primary:hover { background: var(--tm-s7); border-color: var(--tm-a1); }

        /* ── modal-colors small buttons ── */
        body.test-mode #modal-colors .btn-small { background: var(--tm-s5); border-color: var(--tm-s8); color: var(--tm-t1); }
        body.test-mode #modal-colors .btn-small:hover { background: var(--tm-s6); }
        body.test-mode #modal-colors .theme-select-btn.is-on { background: var(--tm-s6); border-color: var(--tm-a1); color: var(--tm-t1); }

        .hotkey-field {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .hotkey-input {
            width: 120px;
            height: 18px;
            border: 1px solid #7a7a7a;
            padding: 0 4px;
            background: #fff;
            font-family: inherit;
            font-size: 9pt;
        }
        .hotkey-input.capture {
            border-color: #7a7a7a;
            box-shadow: none;
        }
        .hotkey-input-wrap { position: relative; display: inline-block; --capture-progress: 1; }
        .hotkey-input-wrap.capture::after {
            content: "";
            position: absolute;
            inset: -1px;
            border: 1px solid #0078d7;
            transform-origin: right center;
            transform: scaleX(var(--capture-progress));
            pointer-events: none;
        }
        .hotkey-btn {
            height: 18px;
            padding: 0 4px;
            background: #ffffff;
            border: 1px solid #adadad;
            border-radius: 2px;
            font-size: 9pt;
            cursor: pointer;
        }
        .hotkey-btn.set:hover { background: #0078d7; border-color: var(--toggle-icon-color); color: #ffffff; }
        .hotkey-btn.clear:hover { background: #d83b01; border-color: #d83b01; color: #ffffff; }
        .hotkey-note {
            color: #666;
            font-size: 11px;
        }
        #modal-hotkeys.modal-mask {
            align-items: flex-start;
            overflow: auto;
            padding: 10px 0;
        }
        #modal-colors .window {
            position: relative;
            width: 860px;
            height: 600px;
            display: flex;
            flex-direction: column;
            background: var(--theme-colors-window-bg);
            border: 1px solid #999;
            box-shadow: 0 12px 30px rgba(0,0,0,0.22);
            pointer-events: auto;
        }
        #modal-colors.modal-mask {
            align-items: center;
            justify-content: center;
            overflow: auto;
            background: transparent;
            pointer-events: none;
        }
        #modal-colors .title-bar {
            background: linear-gradient(180deg, var(--theme-colors-titlebar-bg-start) 0%, var(--theme-colors-titlebar-bg-end) 100%);
            border-bottom: 1px solid var(--theme-colors-titlebar-border);
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 10px;
            font-size: 12px;
            font-weight: 600;
        }
        #modal-colors .close-btn {
            width: 40px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
            color: #111;
        }
        #modal-colors .close-btn:hover {
            background-color: #e81123;
            color: white;
        }
        #modal-colors .content {
            padding: 10px 12px 0 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
            overflow: hidden;
            min-height: 0;
        }
        #modal-colors .top-note {
            font-size: 11px;
            color: var(--theme-colors-top-note-color);
        }
        #modal-colors .search-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        #modal-colors .select-row {
            display: flex;
            align-items: center;
            gap: 6px;
            min-height: 22px;
        }
        #modal-colors .select-hint {
            font-size: 11px;
            color: #555;
            line-height: 1.2;
        }
        #modal-colors .preset-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        #modal-colors .actions-row {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            min-height: 24px;
        }
        #modal-colors .actions-row .spacer { flex: 1; }
        #modal-colors .main-layout {
            flex: 1;
            min-height: 0;
            display: grid;
            grid-template-columns: minmax(300px, 1fr) 270px;
            gap: 10px;
        }
        #modal-colors .preset-select {
            height: 22px;
            padding: 0 6px;
            border: 1px solid #bdbdbd;
            font-size: 11px;
            font-family: inherit;
            min-width: 200px;
        }
        #modal-colors .preset-input {
            height: 22px;
            padding: 0 6px;
            border: 1px solid #bdbdbd;
            font-size: 11px;
            font-family: inherit;
            width: 130px;
        }
        #modal-colors .search-input {
            flex: 1;
            height: 24px;
            padding: 0 6px;
            border: 1px solid #bdbdbd;
            font-size: 12px;
            font-family: inherit;
        }
        #modal-colors .result-count {
            font-size: 11px;
            color: var(--theme-colors-result-count-color);
            min-width: 56px;
            text-align: right;
        }
        #modal-colors .color-list {
            flex: 1;
            overflow: auto;
            border: 1px solid #d0d0d0;
            background: var(--theme-colors-list-bg);
            padding: 6px;
            min-height: 0;
        }
        #modal-colors .color-item {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 5px 4px;
            font-size: 11px;
            flex-wrap: wrap;
            border-radius: 4px;
            border: 1px solid transparent;
            transition: background-color 120ms ease, border-color 120ms ease;
        }
        #modal-colors .color-item:hover {
            background: #f7fbff;
            border-color: #d7e7fb;
        }
        #modal-colors .color-item.is-active {
            background: #e8f3ff;
            border-color: #93bce8;
        }
        #modal-colors .color-swatch {
            width: 16px;
            height: 16px;
            border: 1px solid #666;
            background: transparent;
            flex-shrink: 0;
        }
        #modal-colors .color-label {
            width: 86px;
            font-family: Consolas, 'Courier New', monospace;
            color: #333;
            flex-shrink: 0;
        }
        #modal-colors .color-element-label {
            flex: 1;
            color: #555;
            min-width: 110px;
        }
        #modal-colors .color-input {
            width: 120px;
            height: 20px;
            padding: 0 6px;
            border: 1px solid #bdbdbd;
            font-size: 11px;
            font-family: inherit;
            background: #f9f9f9;
        }
        #modal-colors .color-input.invalid {
            border-color: #e81123;
            background: #fff4f4;
        }
        #modal-colors .footer {
            padding: 8px 10px 10px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;
        }
        #modal-colors .btn {
            height: 22px;
            padding: 0 10px;
            background-color: #ffffff;
            border: 1px solid #adadad;
            font-family: inherit;
            font-size: 9pt;
            cursor: pointer;
            border-radius: 2px;
            outline: none;
        }
        #modal-colors .btn:hover { background-color: #e5f1fb; border-color: #0078d7; }
        #modal-colors .btn:active { background-color: #cce4f7; border-color: #005499; }
        #modal-colors .btn:focus-visible { box-shadow: 0 0 0 2px #0078d7; }
        #modal-colors .btn-small {
            height: 20px;
            padding: 0 6px;
            font-size: 10px;
        }
        #modal-colors .theme-select-btn.is-on {
            background-color: var(--toggle-icon-color);
            border-color: #005a9e;
            color: #fff;
        }
        #modal-colors .editor-panel {
            border: 1px solid var(--theme-colors-editor-panel-border);
            background: linear-gradient(180deg, var(--theme-colors-editor-panel-bg-start) 0%, var(--theme-colors-editor-panel-bg-end) 100%);
            padding: 8px;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        #modal-colors .editor-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: var(--theme-colors-editor-title-color);
        }
        #modal-colors .editor-preview {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        #modal-colors .editor-swatch {
            width: 38px;
            height: 38px;
            border: 1px solid var(--theme-colors-editor-swatch-border);
            background: #ffffff;
            box-shadow: inset 0 0 0 1px #ffffff;
            flex-shrink: 0;
        }
        #modal-colors .editor-key {
            font-size: 11px;
            color: var(--theme-colors-editor-key-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #modal-colors .editor-input {
            width: 100%;
            height: 24px;
            border: 1px solid var(--theme-colors-editor-input-border);
            padding: 0 6px;
            font-size: 12px;
            font-family: Consolas, 'Courier New', monospace;
            background: var(--theme-colors-editor-input-bg);
        }
        #modal-colors .editor-grid {
            display: grid;
            grid-template-columns: 22px 1fr 44px;
            gap: 4px;
            align-items: center;
        }
        #modal-colors .editor-grid label {
            font-size: 11px;
            color: #555;
            text-align: right;
        }
        #modal-colors .editor-grid input[type="range"] { width: 100%; margin: 0; }
        #modal-colors .editor-grid input[type="number"] {
            width: 44px;
            height: 20px;
            border: 1px solid #bdbdbd;
            font-size: 11px;
            padding: 0 2px;
            text-align: right;
            background: #fff;
        }
        #modal-colors .kbd-hint {
            font-size: 10px;
            color: var(--theme-colors-editor-hint-color);
            line-height: 1.35;
        }
        #modal-colors .mini-toggle {
            font-size: 11px;
            color: var(--theme-colors-mini-toggle-color);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        #modal-colors .color-item.is-picked {
            background: #eef6ff;
            border: 1px solid #9fc4ea;
            border-radius: 2px;
        }
        .color-preview-highlight {
            outline: 2px dashed #0078d7 !important;
            outline-offset: 2px;
        }
        body.theme-select-mode #title-bar,
        body.theme-select-mode .tab-row,
        body.theme-select-mode #ribbon,
        body.theme-select-mode #ribbon-view,
        body.theme-select-mode #ribbon-themes,
        body.theme-select-mode #ribbon-debug,
        body.theme-select-mode #canvas-stage {
            cursor: crosshair;
        }
        body.theme-select-mode .theme-select-candidate {
            outline: 2px dashed #0078d7 !important;
            outline-offset: 2px;
        }

        /* Handles Container */
        #selection-controls { position: absolute; z-index: 1000; pointer-events: none; display: none; }

        #sel-hit-area {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: transparent;
            pointer-events: auto;
            cursor: move;
            z-index: 999;
        }
        #sel-rot-border {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: none;
            z-index: 998;
            --rot-border-thickness: 1px;
            --rot-border-step: 4px;
            background-image:
                    repeating-linear-gradient(90deg, #ffffff 0, #ffffff calc(var(--rot-border-step) / 2), #1b6fe5 calc(var(--rot-border-step) / 2), #1b6fe5 var(--rot-border-step)),
                    repeating-linear-gradient(90deg, #ffffff 0, #ffffff calc(var(--rot-border-step) / 2), #1b6fe5 calc(var(--rot-border-step) / 2), #1b6fe5 var(--rot-border-step)),
                    repeating-linear-gradient(0deg, #ffffff 0, #ffffff calc(var(--rot-border-step) / 2), #1b6fe5 calc(var(--rot-border-step) / 2), #1b6fe5 var(--rot-border-step)),
                    repeating-linear-gradient(0deg, #ffffff 0, #ffffff calc(var(--rot-border-step) / 2), #1b6fe5 calc(var(--rot-border-step) / 2), #1b6fe5 var(--rot-border-step));
            background-repeat: no-repeat;
            background-size:
                    100% var(--rot-border-thickness),
                    100% var(--rot-border-thickness),
                    var(--rot-border-thickness) 100%,
                    var(--rot-border-thickness) 100%;
            background-position:
                    left top,
                    left calc(100% - var(--rot-border-thickness)),
                    left top,
                    calc(100% - var(--rot-border-thickness)) top;
        }
        #selection-controls.selection-rotated #sel-rot-border { display: block; }
        #sel-rot-center {
            position: absolute;
            left: 0;
            top: 0;
            width: 6px;
            height: 6px;
            background: #e81123;
            border: 1px solid #ffffff;
            border-radius: 50%;
            pointer-events: none;
            display: none;
            z-index: 1001;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
        }
        #selection-controls.selection-rotating #sel-rot-center { display: none; }
        #picker-hotspot {
            position: fixed;
            width: 1px;
            height: 1px;
            background: #ff0000;
            z-index: 10002;
            pointer-events: none;
            display: none;
        }


        .sel-handle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: transparent;
            border: none;
            pointer-events: auto;
            z-index: 1001;
            overflow: hidden;
        }
        .sel-handle img {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            -moz-image-rendering: crisp;
        }
        .sel-rotate-handle {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 0;
            pointer-events: auto;
            cursor: grab;
            z-index: 1002;
            overflow: visible;
            image-rendering: pixelated;
            -moz-image-rendering: crisp;
        }
        .sel-rotate-handle:active { cursor: grabbing; }
        .sel-rotate-handle.anchor-mode {
            background: rgba(232, 17, 35, 0.18);
            border-radius: 50%;
            outline: 2px solid #e81123;
            outline-offset: 1px;
            cursor: grab;
        }
        .sel-rotate-handle.anchor-mode:active { cursor: grabbing; }
        #selection-controls.sel-anchor-mode .sel-handle { pointer-events: none; opacity: 0.35; }
        #selection-controls.sel-anchor-mode #sel-hit-area { pointer-events: none; cursor: default; }
        .sel-rotate-handle img {
            width: auto;
            height: auto;
            display: block;
            pointer-events: none;
        }
        #selection-controls.no-handles .sel-handle,
        #selection-controls.no-handles .sel-rotate-handle { display: none; }
        #selection-controls.no-handles .path-handle { display: none; }
        #selection-controls.no-handles #sel-hit-area { pointer-events: none; }

        .h-nw { top: 0; left: 0; cursor: nwse-resize; } .h-n { top: 0; left: 50%; cursor: ns-resize; } .h-ne { top: 0; left: 100%; cursor: nesw-resize; }

        .h-w { top: 50%; left: 0; cursor: ew-resize; } .h-e { top: 50%; left: 100%; cursor: ew-resize; } .h-sw { top: 100%; left: 0; cursor: nesw-resize; }
        .h-s { top: 100%; left: 50%; cursor: ns-resize; } .h-se { top: 100%; left: 100%; cursor: nwse-resize; }

        .creating .sel-handle,
        .creating .sel-rotate-handle,
        .creating #sel-rot-border { display: none; }
        .creating .path-handle { display: none; }

        .path-handle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #3aa0ff;
            border: 1px solid #0b3d6d;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset;
            pointer-events: auto;
            z-index: 1002;
        }
        .path-handle.ctrl {
            background: #ffffff;
            border: 1px solid #3aa0ff;
            box-shadow: none;
        }
        #path-handles {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }


        #canvas-resize-handles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1002; }
        #canvas-resize-handles.smooth .resizer { transition: left .24s cubic-bezier(.16,1,.3,1), top .24s cubic-bezier(.16,1,.3,1); }
        .resizer { position: absolute; width: 6px; height: 6px; background: white; border: 1px solid black; z-index: 40; pointer-events: auto; }
        .r-right { cursor: ew-resize; }
        .r-left { cursor: ew-resize; }
        .r-top { cursor: ns-resize; }
        .r-bottom { cursor: ns-resize; }
        .r-corner { cursor: nwse-resize; }
        .r-tl { cursor: nwse-resize; }
        .r-tr { cursor: nesw-resize; }
        .r-bl { cursor: nesw-resize; }
        .resizer.free-only { display: none; }
        #viewport.free-canvas .resizer.free-only { display: block; }

        /* Common */
        .color-area { display: flex; gap: 6px; height: 60px; align-items: flex-start; }

        .active-color-col { display: flex; flex-direction: column; align-items: center; gap: 0px; cursor: pointer; padding: 4px; border: 1px solid transparent; border-radius: 2px; width: 48px; height: 72px; }

        .active-color-col.selected { background: #cce8ff; border: 1px solid #66a7e8; }
        .active-color-col:not(.selected):hover { background: #eaf4ff; border: 1px solid #9fc4ea; box-shadow: inset 0 0 2px rgba(0,120,215,0.15); }
        .selection-highlight { background: #cce8ff; border-color: #66a7e8; }
        .big-swatch {
            width: 30px;
            height: 30px;
            border: 1px solid #a0a0a0;
            box-shadow: inset 0 0 0 1px #ffffff;
            background: black;
        }
        .palette-container { display:flex; flex-direction: column; gap:2px; margin-left: 4px; }
        .palette-grid { display: grid; grid-template-columns: repeat(10, 16px); gap: 4px; }
        #palette-std { margin-top: 5px; }
        .mini-swatch {
            width: 16px !important;
            height: 16px !important;
            background: white;
            cursor: pointer;
            border: 1px solid var(--palette-mini-swatch-border);
            box-shadow: inset 0 0 0 1px var(--palette-mini-swatch-inner);
            box-sizing: content-box;
        }
        .mini-swatch:hover {
            border: 1px solid var(--palette-mini-swatch-hover-border);
            box-shadow: inset 0 0 0 1px var(--palette-mini-swatch-hover-inner);
        }
        .mini-swatch.empty {
            background: transparent;
            pointer-events: none;
        }
        .mini-swatch.empty:hover {
            border: 1px solid var(--palette-mini-swatch-border);
            box-shadow: inset 0 0 0 1px var(--palette-mini-swatch-inner);
        }

        #status-bar { height: 24px; background: #f0f0f0; border-top: 1px solid #ccc; display: flex; align-items: center; padding: 0 10px; gap: 15px; font-size: 11px; z-index: 9001; }
        #status-primary { display: flex; align-items: center; gap: 0; }
        .status-segment {
            width: 155px;
            min-width: 155px;
            max-width: 155px;
            height: 18px;
            padding: 0 6px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .status-segment + .status-segment { border-left: 1px solid #c8c8c8; }
        #status-right { display: flex; align-items: center; gap: 15px; }
        #status-reminder { color: #a40000; font-weight: 600; }
        #grid-overlay {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            display: none;
            z-index: 5;
        }
        #grid-overlay path {
            fill: none;
            stroke-width: 1px;
            stroke-opacity: 1;
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
        }
        #tile-overlay {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            display: none;
            z-index: 4;
        }
        .gridline-color-swatch {
            width: 12px;
            height: 12px;
            border: 1px solid #666;
            display: inline-block;
            vertical-align: middle;
            margin-left: 4px;
        }
        .gridline {
            fill: none;
            vector-effect: non-scaling-stroke;
            shape-rendering: crispEdges;
        }
        #save-reminder-toast {
            position: fixed;
            right: 12px;
            bottom: 36px;
            padding: 8px 12px;
            background: #fff3cd;
            border: 1px solid #d4b106;
            color: #5c4700;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
            z-index: 12000;
            display: none;
            pointer-events: none;
        }
        #save-reminder-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 12000;
            background: rgba(0,0,0,0.15);
        }
        #save-reminder-modal .window {
            width: 420px;
            background: #f2f2f2;
            border: 1px solid #b0b0b0;
            box-shadow: 0 6px 16px rgba(0,0,0,0.25);
            padding: 14px 16px 12px 16px;
            position: absolute;
        }
        #save-reminder-modal .title-bar {
            height: 28px;
            background: #ffffff;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-left: 8px;
            margin: -14px -16px 8px -16px;
            font-weight: normal;
            cursor: move;
        }
        #save-reminder-modal .close-btn {
            margin-left: auto;
            width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #save-reminder-modal .close-btn:hover {
            background: #e81123;
            color: #fff;
        }
        #save-reminder-modal .body-text { margin: 8px 0 6px 0; font-size: 15px; padding: 4px 0; color: #8b0000; }
        #save-reminder-modal .body-subtext { color: #777; font-size: 11px; }
        #save-reminder-modal .btn-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
        #save-reminder-modal .btn-row button {
            padding: 4px 12px;
            border: 1px solid #b0b0b0;
            background: #f5f5f5;
            cursor: pointer;
            border-radius: 4px;
            color: #000;
        }
        #save-reminder-modal .btn-row button:hover { background: #e6e6e6; }
        #save-reminder-modal .btn-primary { background: #0078d7; color: #fff; border: 1px solid #005a9e; }
        #save-reminder-modal .btn-primary:hover { background: #0063b1; }
        #save-reminder-modal .link-btn { color: #005a9e; text-decoration: underline; cursor: pointer; }

        #close-confirm-modal {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 13000;
            background: transparent;
        }
        #close-confirm-modal .window {
            width: 350px;
            background: #f2f2f2;
            border: 1px solid #b0b0b0;
            box-shadow: 0 6px 16px rgba(0,0,0,0.25);
            padding: 0;
            position: absolute;
        }
        #close-confirm-modal .title-bar {
            height: 30px;
            background: #eeeeee;
            display: flex;
            align-items: center;
            padding-left: 8px;
            font-weight: normal;
        }
        #close-confirm-modal .close-btn {
            margin-left: auto;
            width: 32px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #close-confirm-modal .close-btn:hover {
            background: #e81123;
            color: #fff;
        }
        #close-confirm-modal .message-area {
            height: 61px;
            background: #ffffff;
            display: flex;
            align-items: center;
            padding: 0 16px;
        }
        #close-confirm-modal .body-text {
            margin: 0;
            font-size: 16px;
            color: #0057d8;
            font-weight: normal;
        }
        #close-confirm-modal .separator {
            height: 1px;
            background: #c8c8c8;
        }
        #close-confirm-modal .button-area {
            background: #eeeeee;
            height: 40px;
            box-sizing: border-box;
            padding: 0 11px 0 12px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        #close-confirm-modal .btn-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 0; }
        #close-confirm-modal .btn-row button {
            height: 21px;
            padding: 0 18px;
            box-sizing: border-box;
            border: 1px solid #b0b0b0;
            background: #ffffff;
            cursor: pointer;
            border-radius: 4px;
            color: #000;
            font-size: 12px;
            font-family: "Segoe UI", Tahoma, sans-serif;
            white-space: nowrap;
        }
        #close-confirm-modal .btn-row button:nth-child(1) { width: 70px; min-width: 70px; max-width: 70px; }
        #close-confirm-modal .btn-row button:nth-child(2) { width: 90px; min-width: 90px; max-width: 90px; text-align: center; padding-left: 16px; padding-right: 20px; }
        #close-confirm-modal .btn-row button:nth-child(3) { width: 70px; min-width: 70px; max-width: 70px; }
        #close-confirm-modal .btn-row button:hover:not(:disabled) {
            background-color: #e5f1fb;
            border-color: var(--toggle-icon-color);
        }
        #close-confirm-modal .btn-row button:focus {
            outline: 1px solid #2b88d8;
            outline-offset: -1px;
        }

        #modal-info {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 12000;
            background: rgba(0,0,0,0.2);
        }
        #modal-info .window {
            width: 720px;
            max-width: calc(100vw - 40px);
            height: 520px;
            max-height: calc(100vh - 40px);
            background: #f2f2f2;
            border: 1px solid #b0b0b0;
            box-shadow: 0 8px 18px rgba(0,0,0,0.25);
            display: flex;
            flex-direction: column;
        }
        #modal-info .title-bar {
            height: 28px;
            background: #ffffff;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding-left: 10px;
            font-size: 12px;
            color: #000;
        }
        #modal-info .close-btn {
            margin-left: auto;
            width: 32px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        #modal-info .close-btn:hover { background: #e81123; color: white; }
        #modal-info .content {
            padding: 10px 12px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 12px;
            color: #222;
        }
        #modal-info .info-section {
            background: #ffffff;
            border: 1px solid #d0d0d0;
            padding: 8px 10px;
        }
        #modal-info .info-title {
            font-weight: 600;
            margin-bottom: 6px;
        }
        #modal-info .info-list {
            margin: 0;
            padding-left: 16px;
        }
        #modal-info .info-list li { margin-bottom: 4px; }


        .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 10000; display: none; align-items: center; justify-content: center; }
        body.theme-colors-open .modal-mask { pointer-events: none; }
        body.theme-colors-open .modal-mask .window,
        body.theme-colors-open .modal-mask .modal-window { pointer-events: auto; }

        .modal-window { background: white; border: 1px solid var(--win-blue); box-shadow: 0 0 20px rgba(0,0,0,0.3); width: 380px; padding: 15px; }
        .modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
        button { padding: 4px 15px; cursor: pointer; }

        .resize-options { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
        .radio-group-row { display: flex; gap: 15px; }
        .resize-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
        .resize-row { display: flex; align-items: center; gap: 10px; }

        .icon-box { width: 32px; height: 32px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; background: #f9f9f9; }
        .resize-row label { width: 70px; } .resize-row input { width: 60px; }
        .resize-footer { margin-top: 10px; padding-top: 5px; border-top: 1px solid #eee; }

        fieldset { border: 1px solid #ccc; margin: 0 0 10px 0; padding: 8px; border-radius: 2px; }
        legend { color: var(--win-blue); font-weight: bold; font-size: 11px; }
        .radio-group { display: flex; flex-direction: column; gap: 4px; }
        .radio-row { display: flex; align-items: center; gap: 6px; cursor: pointer; }

        .advanced-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; }
        .slider-container { display: flex; align-items: center; gap: 5px; flex: 1; }

        .seed-container { display: flex; align-items: center; gap: 4px; border-left: 1px solid #ccc; padding-left: 8px; margin-left: 8px; }
        .small-btn { min-width: 24px; padding: 0 4px; height: 22px; font-size: 11px; }
        .disabled { opacity: 0.5; pointer-events: none; }
        .form-group { margin-bottom: 10px; }
        .form-group label { display: block; font-weight: bold; margin-bottom: 4px; }
        .form-group select, .form-group input { width: 100%; padding: 4px; }
        .ribbon-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            padding: 4px 6px;
            min-width: 130px;
            border: 1px solid #d7d7d7;
            border-radius: 3px;
            background: #fafafa;
        }
        .ribbon-card.tile-compact {
            flex-direction: column;
            align-items: center;
            padding: 10px 6px;
            gap: 3px;
            min-width: 160px;
        }
        .ribbon-card.tile-compact .card-icon svg { width: 18px; height: 18px; }
        .ribbon-card.tile-compact .card-label { font-size: 9px; line-height: 1; white-space: nowrap; }
        .ribbon-card.tile-compact .card-controls { gap: 3px; }
        .ribbon-card.tile-compact .mini-label { font-size: 9px; }
        .ribbon-card.tile-compact .compact-input {
            width: 34px;
            height: 16px;
            padding: 0 3px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            border-bottom: 1px solid #b5b5b5;
            border-radius: 0;
        }
        .ribbon-card.tile-compact .compact-input:focus {
            outline: none;
            border-bottom-color: #1b6fe5;
        }
        .ribbon-card .card-icon svg {
            width: 22px;
            height: 22px;
            display: block;
        }
        .ribbon-card .card-label {
            font-weight: 600;
            color: #333;
            font-size: 10px;
        }
        .ribbon-card .card-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-wrap: nowrap;
        }
        .ribbon-card .card-controls + .card-controls {
            margin-top: 3px;
        }
        .ribbon-card .mini-label { font-size: 10px; color: #666; }
        .ribbon-card .compact-input {
            width: 36px;
            height: 18px;
            padding: 0 4px;
            border-left: 0;
            border-right: 0;
            border-top: 0;
            border-bottom: 1px solid #b5b5b5;
            border-radius: 0;
            text-align: center;
            -moz-appearance: textfield;
            -webkit-appearance: textfield;
            appearance: textfield;
        }
        .ribbon-card .compact-input:focus {
            outline: none;
            border-bottom-color: #1b6fe5;
        }
        .ribbon-card .compact-input[type="number"]::-webkit-inner-spin-button,
        .ribbon-card .compact-input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        #pen-size-input {
            border-left: 0;
            border-right: 0;
            border-top: 0;
            border-bottom: 1px solid #b5b5b5;
            border-radius: 0;
            text-align: center;
            -moz-appearance: textfield;
            -webkit-appearance: textfield;
            appearance: textfield;
        }
        #pen-size-input:focus {
            outline: none;
            border-bottom-color: #1b6fe5;
        }
        #pen-size-input::-webkit-inner-spin-button,
        #pen-size-input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        #line-width-menu.line-width-menu {
            width: 132px;
            height: 166px;
            box-sizing: border-box;
            border: 1px solid #d9d9d9;
            background-color: #ffffff;
            padding: 2px 1px;
            display: none;
            flex-direction: column;
            min-width: 132px;
            z-index: 10010;
        }
        #line-width-menu .line-width-item {
            width: 128px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }
        #line-width-menu .line-width-item.selected {
            background-color: #eef4fc;
            border-color: #a0c5f5;
        }
        #line-width-menu .line-width-item:hover {
            background-color: #cde3fa;
            border-color: #72a9ea;
        }
        #line-width-menu .line-width-preview {
            width: 108px;
            background-color: #324254;
            pointer-events: none;
        }
        #line-width-menu .line-width-1 { height: 1px; }
        #line-width-menu .line-width-2 { height: 2px; }
        #line-width-menu .line-width-3 { height: 3px; }
        #line-width-menu .line-width-4 { height: 4px; }
        .ribbon-card .compact-toggle { display: inline-flex; align-items: center; gap: 3px; font-weight: normal; }
        .ribbon-card .compact-btn { padding: 1px 5px; font-size: 10px; }
        svg { fill: none; }
        #freehand-reopen-btn svg path,
        #freehand-collapse-btn svg path,
        #paintbrush-collapse-btn svg path,
        #pb-reopen-btn svg path,
        #project-collapse svg path,
        #pb-more-toggle .pb-arrow path { fill: #000000; }

        /* Export Studio Styles */
        .export-palette-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 4px;
            margin-top: 4px;
            max-height: 180px;
            overflow-y: auto;
        }
        .export-swatch {
            aspect-ratio: 1;
            border: 1px solid #888;
            border-radius: 2px;
            cursor: grab;
            position: relative;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
        }
        .export-swatch:active { cursor: grabbing; }
        .export-swatch[data-index="0"] {
            border: 2px solid #ed1c24;
        }
        .export-swatch[data-index="0"]::after {
            content: "T";
            position: absolute;
            top: -2px; left: 1px;
            font-size: 9px;
            font-weight: 900;
            color: white;
            text-shadow: 0 1px 2px black;
            pointer-events: none;
        }
        .export-swatch .swatch-idx {
            position: absolute;
            bottom: 1px; right: 2px;
            font-size: 8px;
            color: rgba(0,0,0,0.5);
            pointer-events: none;
        }
        .export-swatch.dragging {
            opacity: 0.4;
            border: 2px dashed #333;
        }
        .export-swatch.drag-over {
            border: 2px solid #0078d7;
            transform: scale(1.1);
            z-index: 10;
        }

/* ════════════════════════════════════════════════════════════════
 * PRIMEVAL FOREST - deep mossy green-teal dark theme
 * ════════════════════════════════════════════════════════════════ */
body.primeval-forest-mode {
    --pf-s0:#090F0C;--pf-s1:#0D1610;--pf-s2:#0D1A14;--pf-s3:#1A2E22;--pf-s4:#1F3828;--pf-s5:#27452F;--pf-s6:#2E5238;--pf-s7:#3A6645;--pf-s8:#4A7A56;
    --pf-t1:#D6EDD9;--pf-t2:#7AAE84;--pf-t3:#4A7055;--pf-a1:#5EC47A;--pf-a2:#1F6B3A;
    --pf-hover-bg:rgba(94,196,122,0.10);--pf-hover-border:rgba(94,196,122,0.30);
    --pf-selected-bg:rgba(94,196,122,0.15);--pf-selected-border:rgba(94,196,122,0.40);
    --bg-ribbon:var(--pf-s3);--border-ribbon:var(--pf-s7);--app-text-color:var(--pf-t1);--app-bg:var(--pf-s1);
    --titlebar-bg:var(--pf-s2);--titlebar-action-icon:var(--pf-t2);--titlebar-action-hover-bg:var(--pf-s5);--titlebar-separator:var(--pf-s7);
    --titlebar-filename:var(--pf-t1);--titlebar-control-icon:var(--pf-t1);--tab-row-bg: var(--pf-s2);--section-divider:var(--pf-s7);--section-title-color:var(--pf-t2);
    --btn-hover-bg:var(--pf-hover-bg);--btn-hover-border:var(--pf-hover-border);--btn-hover-shadow:rgba(94,196,122,0.15);
    --btn-active-bg:var(--pf-selected-bg);--btn-active-border:var(--pf-selected-border);--btn-active-shadow:rgba(94,196,122,0.25);
    --dropdown-bg:var(--pf-s4);--dropdown-border:var(--pf-s8);--dropdown-shadow:rgba(0,0,0,0.55);--dropdown-item-hover-bg:var(--pf-s5);
    --dropdown-arrow-color:var(--pf-t2);--dropdown-separator:var(--pf-s7);--btn-small-bg:var(--pf-s4);--btn-small-border:var(--pf-s7);
    --threshold-label-color:var(--pf-t2);--threshold-values-color:var(--pf-t1);--toggle-icon-color:var(--pf-a1);--toggle-status-color:var(--pf-t2);
    --hotkeys-icon-color:var(--pf-a1);--anchor-toggle-icon-color:var(--pf-a1);--theme-mode-toggle-icon-color:var(--pf-a1);
    --select-menu-header-color:var(--pf-t2);--select-menu-header-bg:var(--pf-s4);--select-menu-icon-all-fill:rgba(94,196,122,0.18);
    --select-menu-icon-all-fill-disabled:var(--pf-s5);--select-menu-icon-disabled-stroke:var(--pf-t3);
    --theme-colors-window-bg:var(--pf-s3);--theme-colors-titlebar-bg-start:var(--pf-s4);--theme-colors-titlebar-bg-end:var(--pf-s3);
    --theme-colors-titlebar-border:var(--pf-s7);--theme-colors-top-note-color:var(--pf-t2);--theme-colors-result-count-color:var(--pf-t2);
    --theme-colors-list-bg:var(--pf-s3);--theme-colors-editor-panel-bg-start:var(--pf-s4);--theme-colors-editor-panel-bg-end:var(--pf-s3);
    --theme-colors-editor-panel-border:var(--pf-s7);--theme-colors-editor-title-color:var(--pf-t1);--theme-colors-editor-key-color:var(--pf-t1);
    --theme-colors-editor-input-bg:var(--pf-s5);--theme-colors-editor-input-border:var(--pf-s8);--theme-colors-editor-swatch-border:var(--pf-s8);
    --theme-colors-editor-hint-color:var(--pf-t3);--theme-colors-mini-toggle-color:var(--pf-t1);
    --palette-mini-swatch-border:#020604;--palette-mini-swatch-inner:#fff;
    --palette-mini-swatch-hover-border:var(--pf-a1);--palette-mini-swatch-hover-inner:rgba(94,196,122,0.2);
    --view-center-icon-color:var(--pf-a1);--view-edgeclean-icon-color:var(--pf-a1);--view-theme-icon-color:var(--pf-a1);
    --select-icon-free-color:var(--pf-a1);--select-icon-poly-main-color:var(--pf-a1);--select-icon-poly-accent-color:#80d898;
    --bg-hover:var(--pf-hover-bg);--border-hover:var(--pf-hover-border);--bg-selected:var(--pf-selected-bg);--border-selected:var(--pf-selected-border);
    --bg-canvas:#263D2C;--win-blue:var(--pf-a1);
}
body.primeval-forest-mode{background:var(--pf-s1);color:var(--pf-t1);}
body.primeval-forest-mode #title-bar{background:var(--pf-s2);border-bottom:none;}
body.primeval-forest-mode .tab-row{background:var(--pf-s2);border-bottom-color:var(--pf-s7);border-top:1px solid var(--pf-s2);color:var(--pf-t1);}
body.primeval-forest-mode .tab{color:var(--pf-t2);border-color:transparent;}
body.primeval-forest-mode .tab:not(.file):not(.active):hover{color:var(--pf-t1);background:var(--pf-s5);border-color:var(--pf-s7);}
body.primeval-forest-mode .tab.active{background:var(--pf-s3);border-color:var(--pf-s7);border-bottom-color:var(--pf-s3);color:var(--pf-t1);}
body.primeval-forest-mode .tab-row .dd-arrow{color:var(--pf-t1);}
body.primeval-forest-mode .ribbon{background:var(--pf-s3);border-bottom:1px solid var(--pf-s7);}
body.primeval-forest-mode .section{border-right-color:var(--pf-s7);}
body.primeval-forest-mode .section-title{color:var(--pf-t3);}
body.primeval-forest-mode .btn-large{color:var(--pf-t1);}
body.primeval-forest-mode .btn-large:hover{background:var(--pf-s5);border-color:var(--pf-s7);}
body.primeval-forest-mode .btn-large.active,body.primeval-forest-mode .btn-large.is-on{background:var(--pf-selected-bg);border-color:var(--pf-selected-border);}
body.primeval-forest-mode .toggle-status{color:var(--pf-t2);}
body.primeval-forest-mode .toggle-btn .toggle-icons,body.primeval-forest-mode #anchor-toggle-btn .toggle-icons,body.primeval-forest-mode #theme-mode-btn .toggle-icons{color:var(--pf-a1);}
body.primeval-forest-mode svg [fill="#0078d7"]{fill:var(--pf-a1);}body.primeval-forest-mode svg [stroke="#0078d7"]{stroke:var(--pf-a1);}
body.primeval-forest-mode .ribbon-card{background:var(--pf-s4);border-color:var(--pf-s7);color:var(--pf-t1);}
body.primeval-forest-mode .ribbon-card .card-label{color:var(--pf-t1);}body.primeval-forest-mode .ribbon-card .mini-label{color:var(--pf-t2);}
body.primeval-forest-mode .compact-input{background:var(--pf-s4);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode .ribbon-card.tile-compact .compact-input{background:var(--pf-s4);border-bottom-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode .ribbon-card.tile-compact .compact-input:focus{border-bottom-color:var(--pf-a1);}
body.primeval-forest-mode .ribbon-card .compact-input:focus{border-bottom-color:var(--pf-a1);}
body.primeval-forest-mode #pen-size-input{background:var(--pf-s4);border-bottom-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #pen-size-input:focus{border-bottom-color:var(--pf-a1);}
body.primeval-forest-mode #size-control-wrap label{color:var(--pf-t2) !important;}
/* ── C1/C2 active color slot — green highlight ── */
body.primeval-forest-mode .active-color-col.selected{background:var(--pf-selected-bg);border-color:var(--pf-selected-border);}
body.primeval-forest-mode .active-color-col:not(.selected):hover{background:var(--pf-hover-bg);border-color:var(--pf-hover-border);box-shadow:none;}
/* ── select tool split button — green highlight ── */
body.primeval-forest-mode .split-btn-container.select-split.selection-highlight{border-color:var(--pf-selected-border);}
body.primeval-forest-mode .split-btn-container.select-split.selection-highlight .split-btn-top,
body.primeval-forest-mode .split-btn-container.select-split.selection-highlight .split-btn-bottom.select-dropdown{background:var(--pf-selected-bg);}
body.primeval-forest-mode .split-btn-container.select-split .split-btn-bottom.select-dropdown.selection-highlight{border-top-color:var(--pf-selected-border);}
body.primeval-forest-mode .split-btn-container.select-split:hover{border-color:var(--pf-hover-border);background:var(--pf-hover-bg);box-shadow:none;}
body.primeval-forest-mode .split-btn-container.select-split:hover .split-btn-bottom.select-dropdown{border-top-color:var(--pf-hover-border);background:var(--pf-hover-bg);box-shadow:none;}
/* ── select-menu dropdown ── */
body.primeval-forest-mode #select-menu .icon-free,
body.primeval-forest-mode #select-menu .icon-poly,
body.primeval-forest-mode #select-menu .icon-invert{filter:grayscale(1) brightness(1.2) sepia(1) saturate(2.5) hue-rotate(95deg);}
body.primeval-forest-mode #select-menu{--bg-color:var(--pf-s4);--border-outer:var(--pf-s7);--header-text:var(--pf-t2);--text-color:var(--pf-t1);--disabled-text:var(--pf-t3);--separator:var(--pf-s7);--item-hover-bg:var(--pf-s5);--item-hover-border:var(--pf-s8);--item-select-bg:var(--pf-selected-bg);--item-select-border:var(--pf-selected-border);--icon-stroke:var(--pf-a1);box-shadow:2px 2px 8px rgba(0,0,0,0.55);}
/* ── color-preview-highlight and theme-select-candidate — green outline ── */
body.primeval-forest-mode .color-preview-highlight{outline-color:var(--pf-a1) !important;}
body.primeval-forest-mode .theme-select-candidate{outline-color:var(--pf-a1) !important;}
body.primeval-forest-mode .dropdown-panel,body.primeval-forest-mode .paint-dropdown{background:var(--pf-s4);border-color:var(--pf-s7);box-shadow:0 4px 16px rgba(0,0,0,0.55);}
body.primeval-forest-mode .dropdown-item,body.primeval-forest-mode .paint-dropdown-item{color:var(--pf-t1);}
body.primeval-forest-mode .dropdown-item:hover,body.primeval-forest-mode .paint-dropdown-item:hover{background:var(--pf-s5);}
body.primeval-forest-mode .dropdown-separator{background:var(--pf-s7);}
body.primeval-forest-mode .modal-mask{background:rgba(0,0,0,0.6);}
body.primeval-forest-mode #modal-resize .window,body.primeval-forest-mode #modal-depth .window,body.primeval-forest-mode #modal-export .window,body.primeval-forest-mode #modal-huesat .window,body.primeval-forest-mode #modal-hotkeys .window,body.primeval-forest-mode #modal-info .window,body.primeval-forest-mode #modal-colors .window,body.primeval-forest-mode #modal-confirm-reset .window,body.primeval-forest-mode #modal-toolbar .window,body.primeval-forest-mode #modal-wincolor .window,body.primeval-forest-mode #modal-tool-customizer .window,body.primeval-forest-mode .modal-window{background:var(--pf-s3);border-color:var(--pf-s7);color:var(--pf-t1);box-shadow:0 12px 40px rgba(0,0,0,0.65);}
body.primeval-forest-mode #modal-resize .title-bar,body.primeval-forest-mode #modal-depth .title-bar,body.primeval-forest-mode #modal-export .title-bar,body.primeval-forest-mode #modal-huesat .title-bar,body.primeval-forest-mode #modal-hotkeys .title-bar,body.primeval-forest-mode #modal-info .title-bar,body.primeval-forest-mode #modal-colors .title-bar,body.primeval-forest-mode #modal-confirm-reset .title-bar,body.primeval-forest-mode #modal-toolbar .title-bar,body.primeval-forest-mode #modal-wincolor .title-bar,body.primeval-forest-mode #modal-tool-customizer .title-bar{background:var(--pf-s4);border-bottom-color:var(--pf-s7);color:var(--pf-t1);}
body.primeval-forest-mode .close-btn{color:var(--pf-t2);}body.primeval-forest-mode .close-btn:hover{background:#c42b1c;color:#fff;}
body.primeval-forest-mode #modal-resize .footer,body.primeval-forest-mode #modal-depth .footer,body.primeval-forest-mode #modal-export .footer,body.primeval-forest-mode #modal-huesat .footer,body.primeval-forest-mode #modal-hotkeys .footer,body.primeval-forest-mode #modal-colors .footer{border-top-color:var(--pf-s7);}
body.primeval-forest-mode .modal-mask .btn,body.primeval-forest-mode .modal-mask button.btn{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode .modal-mask .btn:hover{background:var(--pf-s6);border-color:var(--pf-a2);}
body.primeval-forest-mode .modal-mask .btn-primary,body.primeval-forest-mode .modal-mask .btn-ok{background:var(--pf-a2);border-color:#145C2E;color:#fff;}
body.primeval-forest-mode .modal-mask .btn-primary:hover,body.primeval-forest-mode .modal-mask .btn-ok:hover{background:#227A3E;}
body.primeval-forest-mode .modal-mask input[type="text"],body.primeval-forest-mode .modal-mask input[type="number"],body.primeval-forest-mode .modal-mask select,body.primeval-forest-mode .modal-mask textarea{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode .modal-mask input[type="text"]:focus,body.primeval-forest-mode .modal-mask input[type="number"]:focus,body.primeval-forest-mode .modal-mask select:focus{border-color:var(--pf-a1);outline:none;}
body.primeval-forest-mode .modal-mask label,body.primeval-forest-mode .modal-mask .row label{color:var(--pf-t1);}
body.primeval-forest-mode .modal-mask fieldset{border-color:var(--pf-s7);}body.primeval-forest-mode .modal-mask legend{color:var(--pf-t2);}
body.primeval-forest-mode .modal-mask .section-header{color:var(--pf-t2);border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode .hotkey-list{background:var(--pf-s4);border-color:var(--pf-s7);}body.primeval-forest-mode .hotkey-row{border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode .hotkey-label{color:var(--pf-t1);}body.primeval-forest-mode .hotkeys-icon{color:var(--pf-a1);}
body.primeval-forest-mode #modal-info .info-section{border-bottom-color:var(--pf-s7);}body.primeval-forest-mode #modal-info .info-title{color:var(--pf-a1);}
body.primeval-forest-mode #modal-info li,body.primeval-forest-mode #modal-info p{color:var(--pf-t1);}body.primeval-forest-mode #modal-info .link-btn{color:var(--pf-a1);}
body.primeval-forest-mode #modal-colors .color-item{border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .color-item:hover{background:var(--pf-s5);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .color-item.is-active{background:var(--pf-selected-bg);border-color:var(--pf-selected-border);}
body.primeval-forest-mode #modal-colors .color-label,body.primeval-forest-mode #modal-colors .close-btn{color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .color-element-label,body.primeval-forest-mode #modal-colors .select-hint{color:var(--pf-t2);}
body.primeval-forest-mode #modal-colors .color-input,body.primeval-forest-mode #modal-colors .preset-select,body.primeval-forest-mode #modal-colors .preset-input,body.primeval-forest-mode #modal-colors .search-input{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .color-input.invalid{border-color:#e81123;background:rgba(232,17,35,0.15);}
body.primeval-forest-mode #modal-colors .btn{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .btn:hover{background:var(--pf-s6);border-color:var(--pf-a1);}
body.primeval-forest-mode #modal-colors .color-list{border-color:var(--pf-s7);}body.primeval-forest-mode #modal-colors .preset-row{background:var(--pf-s4);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .editor-grid label{color:var(--pf-t2);}body.primeval-forest-mode #modal-colors .editor-grid input[type="number"]{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #file-menu.file-menu-template{background:var(--pf-s3);border-color:var(--pf-s7);box-shadow:2px 4px 16px rgba(0,0,0,0.55);}
body.primeval-forest-mode #file-menu .file-menu-left{background:var(--pf-s4);border-right-color:var(--pf-s7);}
body.primeval-forest-mode #file-menu .file-menu-item{color:var(--pf-t1);}body.primeval-forest-mode #file-menu .file-menu-item:hover{background:var(--pf-s5);border-color:var(--pf-s7);}
body.primeval-forest-mode #file-menu .file-menu-separator{background:var(--pf-s7);}body.primeval-forest-mode #file-menu .file-menu-right{background:var(--pf-s3);}
body.primeval-forest-mode #file-menu .file-menu-recent-toggle{background:var(--pf-s4);border-color:var(--pf-s7);color:var(--pf-t2);}
body.primeval-forest-mode #file-menu .file-menu-recent-toggle:hover{background:var(--pf-s5);color:var(--pf-t1);}
body.primeval-forest-mode #file-menu .file-menu-recent-header{color:var(--pf-t1);border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode #file-menu .file-menu-recent-item{color:var(--pf-t2);}body.primeval-forest-mode #file-menu .file-menu-recent-item:hover{background:var(--pf-s5);color:var(--pf-t1);}
body.primeval-forest-mode .select-menu{background:var(--pf-s4);border-color:var(--pf-s7);box-shadow:0 4px 16px rgba(0,0,0,0.55);}
body.primeval-forest-mode .select-menu-header{background:var(--pf-s4);color:var(--pf-t2);border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode .select-menu-item{color:var(--pf-t1);}body.primeval-forest-mode .select-menu-item:hover{background:var(--pf-s5);}
body.primeval-forest-mode input[type="range"]::-webkit-slider-runnable-track,body.primeval-forest-mode input[type="range"]::-moz-range-track{background:var(--pf-s6);}
body.primeval-forest-mode input[type="range"]::-webkit-slider-thumb{background:var(--pf-a1);}body.primeval-forest-mode input[type="range"]::-moz-range-thumb{background:var(--pf-a1);}
body.primeval-forest-mode #save-reminder-modal .window,body.primeval-forest-mode #close-confirm-modal .window{background:var(--pf-s3);border-color:var(--pf-s7);color:var(--pf-t1);}
body.primeval-forest-mode #lsys-panel{background:var(--pf-s3);border-color:var(--pf-s7);}body.primeval-forest-mode #lsys-list{background:var(--pf-s4);}
body.primeval-forest-mode .lsys-layer{background:var(--pf-s4);border-bottom-color:var(--pf-s7);color:var(--pf-t1);}body.primeval-forest-mode .lsys-layer.active{background:var(--pf-s5);}
body.primeval-forest-mode .lsys-layer-name{color:var(--pf-t1);}body.primeval-forest-mode #lsys-toolbar{background:var(--pf-s3);border-top-color:var(--pf-s7);}
body.primeval-forest-mode .lsys-btn{color:var(--pf-t1);}body.primeval-forest-mode .lsys-btn:hover{background:var(--pf-s5);}
body.primeval-forest-mode #status-bar,body.primeval-forest-mode .status-bar{background:var(--pf-s2);border-top-color:var(--pf-s7);color:var(--pf-t2);}
body.primeval-forest-mode #palette-bar,body.primeval-forest-mode .palette-bar{background:var(--pf-s3);border-top-color:var(--pf-s7);}
body.primeval-forest-mode .mini-swatch.empty{box-shadow:none;}
body.primeval-forest-mode #modal-wincolor .tab-btn{background:var(--pf-s5);border-color:var(--pf-s7);color:var(--pf-t1);}body.primeval-forest-mode #modal-wincolor .tab-btn.active{background:var(--pf-a2);color:#fff;}
body.primeval-forest-mode #swap-colors-btn{background:var(--pf-s4) !important;border-color:var(--pf-s7) !important;color:var(--pf-t1);}
body.primeval-forest-mode #swap-colors-btn:hover{background:var(--pf-s5) !important;border-color:var(--pf-s8) !important;}

/* ── sliders (Firefox fill track) ── */
body.primeval-forest-mode input[type="range"]::-moz-range-progress{background:var(--pf-a2);}

/* ── extra toggle buttons ── */
body.primeval-forest-mode #test-mode-btn .toggle-icons{color:var(--pf-a1);}
body.primeval-forest-mode #dark-refined-btn .toggle-icons{color:var(--pf-a1);}

/* ── modal-depth specific ── */
body.primeval-forest-mode #modal-depth{--win-bg:var(--pf-s3);--win-text:var(--pf-t1);--input-border:var(--pf-s8);--input-focus:var(--pf-a1);--btn-border:var(--pf-s8);--btn-hover:var(--pf-s5);}
body.primeval-forest-mode #modal-depth .btn{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-depth .btn:hover{background:var(--pf-s6);border-color:var(--pf-a1);}
body.primeval-forest-mode #modal-depth .btn-primary{background:var(--pf-a2);border-color:#145C2E;color:#fff;}
body.primeval-forest-mode #modal-depth .btn-primary:hover{background:#227A3E;}
body.primeval-forest-mode #modal-depth .depth-radio{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-depth .depth-color-list input[type="radio"]:checked + .depth-radio{background:var(--pf-a2);border-color:var(--pf-a1);color:#fff;}
body.primeval-forest-mode #modal-depth .depth-group-label{color:var(--pf-t2);}

/* ── modal-huesat specific ── */
body.primeval-forest-mode #modal-huesat{--win-bg:var(--pf-s3);--win-text:var(--pf-t1);--input-border:var(--pf-s8);--input-focus:var(--pf-a1);--btn-border:var(--pf-s8);--btn-hover:var(--pf-s5);}
body.primeval-forest-mode #modal-huesat .channel-area{background:var(--pf-s4);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-huesat .channel-label{color:var(--pf-t2);}
body.primeval-forest-mode #modal-huesat .channel-btn{filter:brightness(0.88);}
body.primeval-forest-mode #modal-huesat .channel-wrap.active{background:transparent;}
body.primeval-forest-mode #modal-huesat .master-btn{background:var(--pf-s6);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-huesat .master-btn.active{background:var(--pf-t1);color:var(--pf-s1);border-color:var(--pf-t1);}
body.primeval-forest-mode #modal-huesat .preset-row{background:var(--pf-s4);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-huesat .preset-row label{color:var(--pf-t2);}

/* ── modal-resize specific ── */
body.primeval-forest-mode #modal-resize{--win-bg:var(--pf-s3);--win-text:var(--pf-t1);}
body.primeval-forest-mode #modal-resize .col-label{color:var(--pf-t1);}


/* ── modal-export specific ── */
body.primeval-forest-mode #modal-export{--win-bg:var(--pf-s3);--input-border:var(--pf-s8);--input-focus:var(--pf-a1);--btn-border:var(--pf-s8);--btn-hover:var(--pf-s5);}
body.primeval-forest-mode #modal-export .export-format-btn{background:var(--pf-s5);border-color:var(--pf-s7);color:var(--pf-t1);}
body.primeval-forest-mode #modal-export .export-format-btn.active{background:var(--pf-a2);border-color:var(--pf-a1);color:#fff;}

/* ── modal-colors (theme colors editor) extended ── */
body.primeval-forest-mode #modal-colors .window{border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .close-btn{color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .select-hint{color:var(--pf-t2);}
body.primeval-forest-mode #modal-colors .color-list{border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .color-item:hover{background:var(--pf-s5);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .color-item.is-active{background:var(--pf-selected-bg);border-color:var(--pf-selected-border);}
body.primeval-forest-mode #modal-colors .color-label{color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .color-element-label{color:var(--pf-t2);}
body.primeval-forest-mode #modal-colors .color-input{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .color-input.invalid{border-color:#e81123;background:rgba(232,17,35,0.15);}
body.primeval-forest-mode #modal-colors .preset-select,
body.primeval-forest-mode #modal-colors .preset-input,
body.primeval-forest-mode #modal-colors .search-input{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .btn{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .btn:hover{background:var(--pf-s6);border-color:var(--pf-a1);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .editor-grid label{color:var(--pf-t2);}
body.primeval-forest-mode #modal-colors .editor-grid input[type="number"]{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .color-item{border-bottom-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .preset-row{background:var(--pf-s4);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-colors .preset-select{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}
body.primeval-forest-mode #modal-colors .preset-input{background:var(--pf-s5);border-color:var(--pf-s8);color:var(--pf-t1);}

/* ── modal-wincolor extended ── */
body.primeval-forest-mode #modal-wincolor .window{background:var(--pf-s3);border-color:var(--pf-s7);}
body.primeval-forest-mode #modal-wincolor .tab-btn{background:var(--pf-s5);border-color:var(--pf-s7);color:var(--pf-t1);}
body.primeval-forest-mode #modal-wincolor .tab-btn.active{background:var(--pf-a2);color:#fff;}

/* ════════════════════════════════════════════════════════════════
 * ABYSSAL OCEAN - deep midnight navy dark theme
 * ════════════════════════════════════════════════════════════════ */
body.abyssal-ocean-mode {
    --ao-s0:#060810;--ao-s1:#090D1A;--ao-s2:#0A0F1E;--ao-s3:#0F1E3A;--ao-s4:#132448;--ao-s5:#192D58;--ao-s6:#1F3668;--ao-s7:#2B487E;--ao-s8:#3A5E96;
    --ao-t1:#C8D8F4;--ao-t2:#6888C0;--ao-t3:#3A5284;--ao-a1:#5AA8F0;--ao-a2:#1A4D8C;
    --ao-hover-bg:rgba(90,168,240,0.10);--ao-hover-border:rgba(90,168,240,0.30);
    --ao-selected-bg:rgba(90,168,240,0.15);--ao-selected-border:rgba(90,168,240,0.40);
    --bg-ribbon:var(--ao-s3);--border-ribbon:var(--ao-s7);--app-text-color:var(--ao-t1);--app-bg:var(--ao-s1);
    --titlebar-bg:var(--ao-s2);--titlebar-action-icon:var(--ao-t2);--titlebar-action-hover-bg:var(--ao-s5);--titlebar-separator:var(--ao-s7);
    --titlebar-filename:var(--ao-t1);--titlebar-control-icon:var(--ao-t1);--tab-row-bg:var(--ao-s2);--section-divider:var(--ao-s7);--section-title-color:var(--ao-t2);
    --btn-hover-bg:var(--ao-hover-bg);--btn-hover-border:var(--ao-hover-border);--btn-hover-shadow:rgba(90,168,240,0.15);
    --btn-active-bg:var(--ao-selected-bg);--btn-active-border:var(--ao-selected-border);--btn-active-shadow:rgba(90,168,240,0.25);
    --dropdown-bg:var(--ao-s4);--dropdown-border:var(--ao-s8);--dropdown-shadow:rgba(0,0,0,0.6);--dropdown-item-hover-bg:var(--ao-s5);
    --dropdown-arrow-color:var(--ao-t2);--dropdown-separator:var(--ao-s7);--btn-small-bg:var(--ao-s4);--btn-small-border:var(--ao-s7);
    --threshold-label-color:var(--ao-t2);--threshold-values-color:var(--ao-t1);--toggle-icon-color:var(--ao-a1);--toggle-status-color:var(--ao-t2);
    --hotkeys-icon-color:var(--ao-a1);--anchor-toggle-icon-color:var(--ao-a1);--theme-mode-toggle-icon-color:var(--ao-a1);
    --select-menu-header-color:var(--ao-t2);--select-menu-header-bg:var(--ao-s4);--select-menu-icon-all-fill:rgba(90,168,240,0.18);
    --select-menu-icon-all-fill-disabled:var(--ao-s5);--select-menu-icon-disabled-stroke:var(--ao-t3);
    --theme-colors-window-bg:var(--ao-s3);--theme-colors-titlebar-bg-start:var(--ao-s4);--theme-colors-titlebar-bg-end:var(--ao-s3);
    --theme-colors-titlebar-border:var(--ao-s7);--theme-colors-top-note-color:var(--ao-t2);--theme-colors-result-count-color:var(--ao-t2);
    --theme-colors-list-bg:var(--ao-s3);--theme-colors-editor-panel-bg-start:var(--ao-s4);--theme-colors-editor-panel-bg-end:var(--ao-s3);
    --theme-colors-editor-panel-border:var(--ao-s7);--theme-colors-editor-title-color:var(--ao-t1);--theme-colors-editor-key-color:var(--ao-t1);
    --theme-colors-editor-input-bg:var(--ao-s5);--theme-colors-editor-input-border:var(--ao-s8);--theme-colors-editor-swatch-border:var(--ao-s8);
    --theme-colors-editor-hint-color:var(--ao-t3);--theme-colors-mini-toggle-color:var(--ao-t1);
    --palette-mini-swatch-border:#02040A;--palette-mini-swatch-inner:#fff;
    --palette-mini-swatch-hover-border:var(--ao-a1);--palette-mini-swatch-hover-inner:rgba(90,168,240,0.2);
    --view-center-icon-color:var(--ao-a1);--view-edgeclean-icon-color:var(--ao-a1);--view-theme-icon-color:var(--ao-a1);
    --select-icon-free-color:var(--ao-a1);--select-icon-poly-main-color:var(--ao-a1);--select-icon-poly-accent-color:#7AC4FF;
    --bg-hover:var(--ao-hover-bg);--border-hover:var(--ao-hover-border);--bg-selected:var(--ao-selected-bg);--border-selected:var(--ao-selected-border);
    --bg-canvas:#192A4E;--win-blue:var(--ao-a1);
}
body.abyssal-ocean-mode{background:var(--ao-s1);color:var(--ao-t1);}
body.abyssal-ocean-mode #title-bar{background:var(--ao-s2);border-bottom:none;}
body.abyssal-ocean-mode .tab-row{background:var(--ao-s2);border-bottom-color:var(--ao-s7);border-top:1px solid var(--ao-s2);color:var(--ao-t1);}
body.abyssal-ocean-mode .tab{color:var(--ao-t2);border-color:transparent;}
body.abyssal-ocean-mode .tab:not(.file):not(.active):hover{color:var(--ao-t1);background:var(--ao-s5);border-color:var(--ao-s7);}
body.abyssal-ocean-mode .tab.active{background:var(--ao-s3);border-color:var(--ao-s7);border-bottom-color:var(--ao-s3);color:var(--ao-t1);}
body.abyssal-ocean-mode .tab-row .dd-arrow{color:var(--ao-t1);}
body.abyssal-ocean-mode .ribbon{background:var(--ao-s3);border-bottom:1px solid var(--ao-s7);}
body.abyssal-ocean-mode .section{border-right-color:var(--ao-s7);}body.abyssal-ocean-mode .section-title{color:var(--ao-t3);}
body.abyssal-ocean-mode .btn-large{color:var(--ao-t1);}body.abyssal-ocean-mode .btn-large:hover{background:var(--ao-s5);border-color:var(--ao-s7);}
body.abyssal-ocean-mode .btn-large.active,body.abyssal-ocean-mode .btn-large.is-on{background:var(--ao-selected-bg);border-color:var(--ao-selected-border);}
body.abyssal-ocean-mode .toggle-status{color:var(--ao-t2);}
body.abyssal-ocean-mode .toggle-btn .toggle-icons,body.abyssal-ocean-mode #anchor-toggle-btn .toggle-icons,body.abyssal-ocean-mode #theme-mode-btn .toggle-icons{color:var(--ao-a1);}
body.abyssal-ocean-mode svg [fill="#0078d7"]{fill:var(--ao-a1);}body.abyssal-ocean-mode svg [stroke="#0078d7"]{stroke:var(--ao-a1);}
body.abyssal-ocean-mode .ribbon-card{background:var(--ao-s4);border-color:var(--ao-s7);color:var(--ao-t1);}
body.abyssal-ocean-mode .ribbon-card .card-label{color:var(--ao-t1);}body.abyssal-ocean-mode .ribbon-card .mini-label{color:var(--ao-t2);}
body.abyssal-ocean-mode .compact-input{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode .dropdown-panel,body.abyssal-ocean-mode .paint-dropdown{background:var(--ao-s4);border-color:var(--ao-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.abyssal-ocean-mode .dropdown-item,body.abyssal-ocean-mode .paint-dropdown-item{color:var(--ao-t1);}
body.abyssal-ocean-mode .dropdown-item:hover,body.abyssal-ocean-mode .paint-dropdown-item:hover{background:var(--ao-s5);}
body.abyssal-ocean-mode .dropdown-separator{background:var(--ao-s7);}
body.abyssal-ocean-mode .modal-mask{background:rgba(0,0,0,0.65);}
body.abyssal-ocean-mode #modal-resize .window,body.abyssal-ocean-mode #modal-depth .window,body.abyssal-ocean-mode #modal-export .window,body.abyssal-ocean-mode #modal-huesat .window,body.abyssal-ocean-mode #modal-hotkeys .window,body.abyssal-ocean-mode #modal-info .window,body.abyssal-ocean-mode #modal-colors .window,body.abyssal-ocean-mode #modal-confirm-reset .window,body.abyssal-ocean-mode #modal-toolbar .window,body.abyssal-ocean-mode #modal-wincolor .window,body.abyssal-ocean-mode #modal-tool-customizer .window,body.abyssal-ocean-mode .modal-window{background:var(--ao-s3);border-color:var(--ao-s7);color:var(--ao-t1);box-shadow:0 12px 40px rgba(0,0,0,0.7);}
body.abyssal-ocean-mode #modal-resize .title-bar,body.abyssal-ocean-mode #modal-depth .title-bar,body.abyssal-ocean-mode #modal-export .title-bar,body.abyssal-ocean-mode #modal-huesat .title-bar,body.abyssal-ocean-mode #modal-hotkeys .title-bar,body.abyssal-ocean-mode #modal-info .title-bar,body.abyssal-ocean-mode #modal-colors .title-bar,body.abyssal-ocean-mode #modal-confirm-reset .title-bar,body.abyssal-ocean-mode #modal-toolbar .title-bar,body.abyssal-ocean-mode #modal-wincolor .title-bar,body.abyssal-ocean-mode #modal-tool-customizer .title-bar{background:var(--ao-s4);border-bottom-color:var(--ao-s7);color:var(--ao-t1);}
body.abyssal-ocean-mode .close-btn{color:var(--ao-t2);}body.abyssal-ocean-mode .close-btn:hover{background:#c42b1c;color:#fff;}
body.abyssal-ocean-mode #modal-resize .footer,body.abyssal-ocean-mode #modal-depth .footer,body.abyssal-ocean-mode #modal-export .footer,body.abyssal-ocean-mode #modal-huesat .footer,body.abyssal-ocean-mode #modal-hotkeys .footer,body.abyssal-ocean-mode #modal-colors .footer{border-top-color:var(--ao-s7);}
body.abyssal-ocean-mode .modal-mask .btn,body.abyssal-ocean-mode .modal-mask button.btn{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode .modal-mask .btn:hover{background:var(--ao-s6);border-color:var(--ao-a2);}
body.abyssal-ocean-mode .modal-mask .btn-primary,body.abyssal-ocean-mode .modal-mask .btn-ok{background:var(--ao-a2);border-color:#0E3870;color:#fff;}
body.abyssal-ocean-mode .modal-mask .btn-primary:hover,body.abyssal-ocean-mode .modal-mask .btn-ok:hover{background:#205898;}
body.abyssal-ocean-mode .modal-mask input[type="text"],body.abyssal-ocean-mode .modal-mask input[type="number"],body.abyssal-ocean-mode .modal-mask select,body.abyssal-ocean-mode .modal-mask textarea{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode .modal-mask input[type="text"]:focus,body.abyssal-ocean-mode .modal-mask input[type="number"]:focus,body.abyssal-ocean-mode .modal-mask select:focus{border-color:var(--ao-a1);outline:none;}
body.abyssal-ocean-mode .modal-mask label,body.abyssal-ocean-mode .modal-mask .row label{color:var(--ao-t1);}
body.abyssal-ocean-mode .modal-mask fieldset{border-color:var(--ao-s7);}body.abyssal-ocean-mode .modal-mask legend{color:var(--ao-t2);}
body.abyssal-ocean-mode .modal-mask .section-header{color:var(--ao-t2);border-bottom-color:var(--ao-s7);}
body.abyssal-ocean-mode .hotkey-list{background:var(--ao-s4);border-color:var(--ao-s7);}body.abyssal-ocean-mode .hotkey-row{border-bottom-color:var(--ao-s7);}
body.abyssal-ocean-mode .hotkey-label{color:var(--ao-t1);}body.abyssal-ocean-mode .hotkeys-icon{color:var(--ao-a1);}
body.abyssal-ocean-mode #modal-info .info-section{border-bottom-color:var(--ao-s7);}body.abyssal-ocean-mode #modal-info .info-title{color:var(--ao-a1);}
body.abyssal-ocean-mode #modal-info li,body.abyssal-ocean-mode #modal-info p{color:var(--ao-t1);}body.abyssal-ocean-mode #modal-info .link-btn{color:var(--ao-a1);}
body.abyssal-ocean-mode #modal-colors .color-item{border-bottom-color:var(--ao-s7);}
body.abyssal-ocean-mode #modal-colors .color-item:hover{background:var(--ao-s5);border-color:var(--ao-s7);}
body.abyssal-ocean-mode #modal-colors .color-item.is-active{background:var(--ao-selected-bg);border-color:var(--ao-selected-border);}
body.abyssal-ocean-mode #modal-colors .color-label,body.abyssal-ocean-mode #modal-colors .close-btn{color:var(--ao-t1);}
body.abyssal-ocean-mode #modal-colors .color-element-label,body.abyssal-ocean-mode #modal-colors .select-hint{color:var(--ao-t2);}
body.abyssal-ocean-mode #modal-colors .color-input,body.abyssal-ocean-mode .preset-select,body.abyssal-ocean-mode .preset-input,body.abyssal-ocean-mode .search-input{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode #modal-colors .color-input.invalid{border-color:#e81123;background:rgba(232,17,35,0.15);}
body.abyssal-ocean-mode #modal-colors .btn{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode #modal-colors .btn:hover{background:var(--ao-s6);border-color:var(--ao-a1);}
body.abyssal-ocean-mode #modal-colors .color-list{border-color:var(--ao-s7);}body.abyssal-ocean-mode #modal-colors .preset-row{background:var(--ao-s4);border-color:var(--ao-s7);}
body.abyssal-ocean-mode #modal-colors .editor-grid label{color:var(--ao-t2);}body.abyssal-ocean-mode #modal-colors .editor-grid input[type="number"]{background:var(--ao-s5);border-color:var(--ao-s8);color:var(--ao-t1);}
body.abyssal-ocean-mode #file-menu.file-menu-template{background:var(--ao-s3);border-color:var(--ao-s7);box-shadow:2px 4px 16px rgba(0,0,0,0.6);}
body.abyssal-ocean-mode #file-menu .file-menu-left{background:var(--ao-s4);border-right-color:var(--ao-s7);}
body.abyssal-ocean-mode #file-menu .file-menu-item{color:var(--ao-t1);}body.abyssal-ocean-mode #file-menu .file-menu-item:hover{background:var(--ao-s5);border-color:var(--ao-s7);}
body.abyssal-ocean-mode #file-menu .file-menu-separator{background:var(--ao-s7);}body.abyssal-ocean-mode #file-menu .file-menu-right{background:var(--ao-s3);}
body.abyssal-ocean-mode #file-menu .file-menu-recent-toggle{background:var(--ao-s4);border-color:var(--ao-s7);color:var(--ao-t2);}
body.abyssal-ocean-mode #file-menu .file-menu-recent-toggle:hover{background:var(--ao-s5);color:var(--ao-t1);}
body.abyssal-ocean-mode #file-menu .file-menu-recent-header{color:var(--ao-t1);border-bottom-color:var(--ao-s7);}
body.abyssal-ocean-mode #file-menu .file-menu-recent-item{color:var(--ao-t2);}body.abyssal-ocean-mode #file-menu .file-menu-recent-item:hover{background:var(--ao-s5);color:var(--ao-t1);}
body.abyssal-ocean-mode .select-menu{background:var(--ao-s4);border-color:var(--ao-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.abyssal-ocean-mode .select-menu-header{background:var(--ao-s4);color:var(--ao-t2);border-bottom-color:var(--ao-s7);}
body.abyssal-ocean-mode .select-menu-item{color:var(--ao-t1);}body.abyssal-ocean-mode .select-menu-item:hover{background:var(--ao-s5);}
body.abyssal-ocean-mode input[type="range"]::-webkit-slider-runnable-track,body.abyssal-ocean-mode input[type="range"]::-moz-range-track{background:var(--ao-s6);}
body.abyssal-ocean-mode input[type="range"]::-webkit-slider-thumb{background:var(--ao-a1);}body.abyssal-ocean-mode input[type="range"]::-moz-range-thumb{background:var(--ao-a1);}
body.abyssal-ocean-mode #save-reminder-modal .window,body.abyssal-ocean-mode #close-confirm-modal .window{background:var(--ao-s3);border-color:var(--ao-s7);color:var(--ao-t1);}
body.abyssal-ocean-mode #lsys-panel{background:var(--ao-s3);border-color:var(--ao-s7);}body.abyssal-ocean-mode #lsys-list{background:var(--ao-s4);}
body.abyssal-ocean-mode .lsys-layer{background:var(--ao-s4);border-bottom-color:var(--ao-s7);color:var(--ao-t1);}body.abyssal-ocean-mode .lsys-layer.active{background:var(--ao-s5);}
body.abyssal-ocean-mode .lsys-layer-name{color:var(--ao-t1);}body.abyssal-ocean-mode #lsys-toolbar{background:var(--ao-s3);border-top-color:var(--ao-s7);}
body.abyssal-ocean-mode .lsys-btn{color:var(--ao-t1);}body.abyssal-ocean-mode .lsys-btn:hover{background:var(--ao-s5);}
body.abyssal-ocean-mode #status-bar,body.abyssal-ocean-mode .status-bar{background:var(--ao-s2);border-top-color:var(--ao-s7);color:var(--ao-t2);}
body.abyssal-ocean-mode #palette-bar,body.abyssal-ocean-mode .palette-bar{background:var(--ao-s3);border-top-color:var(--ao-s7);}
body.abyssal-ocean-mode .mini-swatch.empty{box-shadow:none;}
body.abyssal-ocean-mode #modal-wincolor .tab-btn{background:var(--ao-s5);border-color:var(--ao-s7);color:var(--ao-t1);}body.abyssal-ocean-mode #modal-wincolor .tab-btn.active{background:var(--ao-a2);color:#fff;}
body.abyssal-ocean-mode #swap-colors-btn{background:var(--ao-s4) !important;border-color:var(--ao-s7) !important;color:var(--ao-t1);}
body.abyssal-ocean-mode #swap-colors-btn:hover{background:var(--ao-s5) !important;border-color:var(--ao-s8) !important;}

/* ════════════════════════════════════════════════════════════════
 * CRIMSON DUSK - dark warm burgundy with deep ember accents
 * ════════════════════════════════════════════════════════════════ */
body.crimson-dusk-mode {
    --cd-s0:#0F0707;--cd-s1:#180B0B;--cd-s2:#1E0E0E;--cd-s3:#321414;--cd-s4:#3D1818;--cd-s5:#4A1E1E;--cd-s6:#582424;--cd-s7:#6E3030;--cd-s8:#874040;
    --cd-t1:#F0D8D8;--cd-t2:#B07070;--cd-t3:#784848;--cd-a1:#F07070;--cd-a2:#8C1C1C;
    --cd-hover-bg:rgba(240,112,112,0.10);--cd-hover-border:rgba(240,112,112,0.30);
    --cd-selected-bg:rgba(240,112,112,0.15);--cd-selected-border:rgba(240,112,112,0.40);
    --bg-ribbon:var(--cd-s3);--border-ribbon:var(--cd-s7);--app-text-color:var(--cd-t1);--app-bg:var(--cd-s1);
    --titlebar-bg:var(--cd-s2);--titlebar-action-icon:var(--cd-t2);--titlebar-action-hover-bg:var(--cd-s5);--titlebar-separator:var(--cd-s7);
    --titlebar-filename:var(--cd-t1);--titlebar-control-icon:var(--cd-t1);--tab-row-bg:var(--cd-s2);--section-divider:var(--cd-s7);--section-title-color:var(--cd-t2);
    --btn-hover-bg:var(--cd-hover-bg);--btn-hover-border:var(--cd-hover-border);--btn-hover-shadow:rgba(240,112,112,0.15);
    --btn-active-bg:var(--cd-selected-bg);--btn-active-border:var(--cd-selected-border);--btn-active-shadow:rgba(240,112,112,0.25);
    --dropdown-bg:var(--cd-s4);--dropdown-border:var(--cd-s8);--dropdown-shadow:rgba(0,0,0,0.6);--dropdown-item-hover-bg:var(--cd-s5);
    --dropdown-arrow-color:var(--cd-t2);--dropdown-separator:var(--cd-s7);--btn-small-bg:var(--cd-s4);--btn-small-border:var(--cd-s7);
    --threshold-label-color:var(--cd-t2);--threshold-values-color:var(--cd-t1);--toggle-icon-color:var(--cd-a1);--toggle-status-color:var(--cd-t2);
    --hotkeys-icon-color:var(--cd-a1);--anchor-toggle-icon-color:var(--cd-a1);--theme-mode-toggle-icon-color:var(--cd-a1);
    --select-menu-header-color:var(--cd-t2);--select-menu-header-bg:var(--cd-s4);--select-menu-icon-all-fill:rgba(240,112,112,0.18);
    --select-menu-icon-all-fill-disabled:var(--cd-s5);--select-menu-icon-disabled-stroke:var(--cd-t3);
    --theme-colors-window-bg:var(--cd-s3);--theme-colors-titlebar-bg-start:var(--cd-s4);--theme-colors-titlebar-bg-end:var(--cd-s3);
    --theme-colors-titlebar-border:var(--cd-s7);--theme-colors-top-note-color:var(--cd-t2);--theme-colors-result-count-color:var(--cd-t2);
    --theme-colors-list-bg:var(--cd-s3);--theme-colors-editor-panel-bg-start:var(--cd-s4);--theme-colors-editor-panel-bg-end:var(--cd-s3);
    --theme-colors-editor-panel-border:var(--cd-s7);--theme-colors-editor-title-color:var(--cd-t1);--theme-colors-editor-key-color:var(--cd-t1);
    --theme-colors-editor-input-bg:var(--cd-s5);--theme-colors-editor-input-border:var(--cd-s8);--theme-colors-editor-swatch-border:var(--cd-s8);
    --theme-colors-editor-hint-color:var(--cd-t3);--theme-colors-mini-toggle-color:var(--cd-t1);
    --palette-mini-swatch-border:#0A0303;--palette-mini-swatch-inner:#fff;
    --palette-mini-swatch-hover-border:var(--cd-a1);--palette-mini-swatch-hover-inner:rgba(240,112,112,0.2);
    --view-center-icon-color:var(--cd-a1);--view-edgeclean-icon-color:var(--cd-a1);--view-theme-icon-color:var(--cd-a1);
    --select-icon-free-color:var(--cd-a1);--select-icon-poly-main-color:var(--cd-a1);--select-icon-poly-accent-color:#FF9090;
    --bg-hover:var(--cd-hover-bg);--border-hover:var(--cd-hover-border);--bg-selected:var(--cd-selected-bg);--border-selected:var(--cd-selected-border);
    --bg-canvas:#3E1E1E;--win-blue:var(--cd-a1);
}
body.crimson-dusk-mode{background:var(--cd-s1);color:var(--cd-t1);}
body.crimson-dusk-mode #title-bar{background:var(--cd-s2);border-bottom:none;}
body.crimson-dusk-mode .tab-row{background:var(--cd-s2);border-bottom-color:var(--cd-s7);border-top:1px solid var(--cd-s2);color:var(--cd-t1);}
body.crimson-dusk-mode .tab{color:var(--cd-t2);border-color:transparent;}
body.crimson-dusk-mode .tab:not(.file):not(.active):hover{color:var(--cd-t1);background:var(--cd-s5);border-color:var(--cd-s7);}
body.crimson-dusk-mode .tab.active{background:var(--cd-s3);border-color:var(--cd-s7);border-bottom-color:var(--cd-s3);color:var(--cd-t1);}
body.crimson-dusk-mode .tab-row .dd-arrow{color:var(--cd-t1);}
body.crimson-dusk-mode .ribbon{background:var(--cd-s3);border-bottom:1px solid var(--cd-s7);}
body.crimson-dusk-mode .section{border-right-color:var(--cd-s7);}body.crimson-dusk-mode .section-title{color:var(--cd-t3);}
body.crimson-dusk-mode .btn-large{color:var(--cd-t1);}body.crimson-dusk-mode .btn-large:hover{background:var(--cd-s5);border-color:var(--cd-s7);}
body.crimson-dusk-mode .btn-large.active,body.crimson-dusk-mode .btn-large.is-on{background:var(--cd-selected-bg);border-color:var(--cd-selected-border);}
body.crimson-dusk-mode .toggle-status{color:var(--cd-t2);}
body.crimson-dusk-mode .toggle-btn .toggle-icons,body.crimson-dusk-mode #anchor-toggle-btn .toggle-icons,body.crimson-dusk-mode #theme-mode-btn .toggle-icons{color:var(--cd-a1);}
body.crimson-dusk-mode svg [fill="#0078d7"]{fill:var(--cd-a1);}body.crimson-dusk-mode svg [stroke="#0078d7"]{stroke:var(--cd-a1);}
body.crimson-dusk-mode .ribbon-card{background:var(--cd-s4);border-color:var(--cd-s7);color:var(--cd-t1);}
body.crimson-dusk-mode .ribbon-card .card-label{color:var(--cd-t1);}body.crimson-dusk-mode .ribbon-card .mini-label{color:var(--cd-t2);}
body.crimson-dusk-mode .compact-input{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode .dropdown-panel,body.crimson-dusk-mode .paint-dropdown{background:var(--cd-s4);border-color:var(--cd-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.crimson-dusk-mode .dropdown-item,body.crimson-dusk-mode .paint-dropdown-item{color:var(--cd-t1);}
body.crimson-dusk-mode .dropdown-item:hover,body.crimson-dusk-mode .paint-dropdown-item:hover{background:var(--cd-s5);}
body.crimson-dusk-mode .dropdown-separator{background:var(--cd-s7);}
body.crimson-dusk-mode .modal-mask{background:rgba(0,0,0,0.65);}
body.crimson-dusk-mode #modal-resize .window,body.crimson-dusk-mode #modal-depth .window,body.crimson-dusk-mode #modal-export .window,body.crimson-dusk-mode #modal-huesat .window,body.crimson-dusk-mode #modal-hotkeys .window,body.crimson-dusk-mode #modal-info .window,body.crimson-dusk-mode #modal-colors .window,body.crimson-dusk-mode #modal-confirm-reset .window,body.crimson-dusk-mode #modal-toolbar .window,body.crimson-dusk-mode #modal-wincolor .window,body.crimson-dusk-mode #modal-tool-customizer .window,body.crimson-dusk-mode .modal-window{background:var(--cd-s3);border-color:var(--cd-s7);color:var(--cd-t1);box-shadow:0 12px 40px rgba(0,0,0,0.7);}
body.crimson-dusk-mode #modal-resize .title-bar,body.crimson-dusk-mode #modal-depth .title-bar,body.crimson-dusk-mode #modal-export .title-bar,body.crimson-dusk-mode #modal-huesat .title-bar,body.crimson-dusk-mode #modal-hotkeys .title-bar,body.crimson-dusk-mode #modal-info .title-bar,body.crimson-dusk-mode #modal-colors .title-bar,body.crimson-dusk-mode #modal-confirm-reset .title-bar,body.crimson-dusk-mode #modal-toolbar .title-bar,body.crimson-dusk-mode #modal-wincolor .title-bar,body.crimson-dusk-mode #modal-tool-customizer .title-bar{background:var(--cd-s4);border-bottom-color:var(--cd-s7);color:var(--cd-t1);}
body.crimson-dusk-mode .close-btn{color:var(--cd-t2);}body.crimson-dusk-mode .close-btn:hover{background:#c42b1c;color:#fff;}
body.crimson-dusk-mode #modal-resize .footer,body.crimson-dusk-mode #modal-depth .footer,body.crimson-dusk-mode #modal-export .footer,body.crimson-dusk-mode #modal-huesat .footer,body.crimson-dusk-mode #modal-hotkeys .footer,body.crimson-dusk-mode #modal-colors .footer{border-top-color:var(--cd-s7);}
body.crimson-dusk-mode .modal-mask .btn,body.crimson-dusk-mode .modal-mask button.btn{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode .modal-mask .btn:hover{background:var(--cd-s6);border-color:var(--cd-a2);}
body.crimson-dusk-mode .modal-mask .btn-primary,body.crimson-dusk-mode .modal-mask .btn-ok{background:var(--cd-a2);border-color:#6A1010;color:#fff;}
body.crimson-dusk-mode .modal-mask .btn-primary:hover,body.crimson-dusk-mode .modal-mask .btn-ok:hover{background:#A82020;}
body.crimson-dusk-mode .modal-mask input[type="text"],body.crimson-dusk-mode .modal-mask input[type="number"],body.crimson-dusk-mode .modal-mask select,body.crimson-dusk-mode .modal-mask textarea{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode .modal-mask input[type="text"]:focus,body.crimson-dusk-mode .modal-mask input[type="number"]:focus,body.crimson-dusk-mode .modal-mask select:focus{border-color:var(--cd-a1);outline:none;}
body.crimson-dusk-mode .modal-mask label,body.crimson-dusk-mode .modal-mask .row label{color:var(--cd-t1);}
body.crimson-dusk-mode .modal-mask fieldset{border-color:var(--cd-s7);}body.crimson-dusk-mode .modal-mask legend,body.crimson-dusk-mode .modal-mask .section-header{color:var(--cd-t2);}
body.crimson-dusk-mode .modal-mask .section-header{border-bottom-color:var(--cd-s7);}
body.crimson-dusk-mode .hotkey-list{background:var(--cd-s4);border-color:var(--cd-s7);}body.crimson-dusk-mode .hotkey-row{border-bottom-color:var(--cd-s7);}
body.crimson-dusk-mode .hotkey-label{color:var(--cd-t1);}body.crimson-dusk-mode .hotkeys-icon{color:var(--cd-a1);}
body.crimson-dusk-mode #modal-info .info-section{border-bottom-color:var(--cd-s7);}body.crimson-dusk-mode #modal-info .info-title{color:var(--cd-a1);}
body.crimson-dusk-mode #modal-info li,body.crimson-dusk-mode #modal-info p{color:var(--cd-t1);}body.crimson-dusk-mode #modal-info .link-btn{color:var(--cd-a1);}
body.crimson-dusk-mode #modal-colors .color-item{border-bottom-color:var(--cd-s7);}
body.crimson-dusk-mode #modal-colors .color-item:hover{background:var(--cd-s5);border-color:var(--cd-s7);}
body.crimson-dusk-mode #modal-colors .color-item.is-active{background:var(--cd-selected-bg);border-color:var(--cd-selected-border);}
body.crimson-dusk-mode #modal-colors .color-label,body.crimson-dusk-mode #modal-colors .close-btn{color:var(--cd-t1);}
body.crimson-dusk-mode #modal-colors .color-element-label,body.crimson-dusk-mode #modal-colors .select-hint{color:var(--cd-t2);}
body.crimson-dusk-mode #modal-colors .color-input,body.crimson-dusk-mode .preset-select,body.crimson-dusk-mode .preset-input,body.crimson-dusk-mode .search-input{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode #modal-colors .color-input.invalid{border-color:#ff6060;background:rgba(255,96,96,0.15);}
body.crimson-dusk-mode #modal-colors .btn{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode #modal-colors .btn:hover{background:var(--cd-s6);border-color:var(--cd-a1);}
body.crimson-dusk-mode #modal-colors .color-list{border-color:var(--cd-s7);}body.crimson-dusk-mode #modal-colors .preset-row{background:var(--cd-s4);border-color:var(--cd-s7);}
body.crimson-dusk-mode #modal-colors .editor-grid label{color:var(--cd-t2);}body.crimson-dusk-mode #modal-colors .editor-grid input[type="number"]{background:var(--cd-s5);border-color:var(--cd-s8);color:var(--cd-t1);}
body.crimson-dusk-mode #file-menu.file-menu-template{background:var(--cd-s3);border-color:var(--cd-s7);box-shadow:2px 4px 16px rgba(0,0,0,0.6);}
body.crimson-dusk-mode #file-menu .file-menu-left{background:var(--cd-s4);border-right-color:var(--cd-s7);}
body.crimson-dusk-mode #file-menu .file-menu-item{color:var(--cd-t1);}body.crimson-dusk-mode #file-menu .file-menu-item:hover{background:var(--cd-s5);border-color:var(--cd-s7);}
body.crimson-dusk-mode #file-menu .file-menu-separator{background:var(--cd-s7);}body.crimson-dusk-mode #file-menu .file-menu-right{background:var(--cd-s3);}
body.crimson-dusk-mode #file-menu .file-menu-recent-toggle{background:var(--cd-s4);border-color:var(--cd-s7);color:var(--cd-t2);}
body.crimson-dusk-mode #file-menu .file-menu-recent-toggle:hover{background:var(--cd-s5);color:var(--cd-t1);}
body.crimson-dusk-mode #file-menu .file-menu-recent-header{color:var(--cd-t1);border-bottom-color:var(--cd-s7);}
body.crimson-dusk-mode #file-menu .file-menu-recent-item{color:var(--cd-t2);}body.crimson-dusk-mode #file-menu .file-menu-recent-item:hover{background:var(--cd-s5);color:var(--cd-t1);}
body.crimson-dusk-mode .select-menu{background:var(--cd-s4);border-color:var(--cd-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.crimson-dusk-mode .select-menu-header{background:var(--cd-s4);color:var(--cd-t2);border-bottom-color:var(--cd-s7);}
body.crimson-dusk-mode .select-menu-item{color:var(--cd-t1);}body.crimson-dusk-mode .select-menu-item:hover{background:var(--cd-s5);}
body.crimson-dusk-mode input[type="range"]::-webkit-slider-runnable-track,body.crimson-dusk-mode input[type="range"]::-moz-range-track{background:var(--cd-s6);}
body.crimson-dusk-mode input[type="range"]::-webkit-slider-thumb{background:var(--cd-a1);}body.crimson-dusk-mode input[type="range"]::-moz-range-thumb{background:var(--cd-a1);}
body.crimson-dusk-mode #save-reminder-modal .window,body.crimson-dusk-mode #close-confirm-modal .window{background:var(--cd-s3);border-color:var(--cd-s7);color:var(--cd-t1);}
body.crimson-dusk-mode #lsys-panel{background:var(--cd-s3);border-color:var(--cd-s7);}body.crimson-dusk-mode #lsys-list{background:var(--cd-s4);}
body.crimson-dusk-mode .lsys-layer{background:var(--cd-s4);border-bottom-color:var(--cd-s7);color:var(--cd-t1);}body.crimson-dusk-mode .lsys-layer.active{background:var(--cd-s5);}
body.crimson-dusk-mode .lsys-layer-name{color:var(--cd-t1);}body.crimson-dusk-mode #lsys-toolbar{background:var(--cd-s3);border-top-color:var(--cd-s7);}
body.crimson-dusk-mode .lsys-btn{color:var(--cd-t1);}body.crimson-dusk-mode .lsys-btn:hover{background:var(--cd-s5);}
body.crimson-dusk-mode #status-bar,body.crimson-dusk-mode .status-bar{background:var(--cd-s2);border-top-color:var(--cd-s7);color:var(--cd-t2);}
body.crimson-dusk-mode #palette-bar,body.crimson-dusk-mode .palette-bar{background:var(--cd-s3);border-top-color:var(--cd-s7);}
body.crimson-dusk-mode .mini-swatch.empty{box-shadow:none;}
body.crimson-dusk-mode #modal-wincolor .tab-btn{background:var(--cd-s5);border-color:var(--cd-s7);color:var(--cd-t1);}body.crimson-dusk-mode #modal-wincolor .tab-btn.active{background:var(--cd-a2);color:#fff;}
body.crimson-dusk-mode #swap-colors-btn{background:var(--cd-s4) !important;border-color:var(--cd-s7) !important;color:var(--cd-t1);}
body.crimson-dusk-mode #swap-colors-btn:hover{background:var(--cd-s5) !important;border-color:var(--cd-s8) !important;}

/* ════════════════════════════════════════════════════════════════
 * GILDED OBSIDIAN - near-black with warm amber-gold accents
 * ════════════════════════════════════════════════════════════════ */
body.gilded-obsidian-mode {
    --go-s0:#0C0A06;--go-s1:#130F08;--go-s2:#1A140A;--go-s3:#26200F;--go-s4:#302813;--go-s5:#3C3018;--go-s6:#48391E;--go-s7:#5C4A28;--go-s8:#725E36;
    --go-t1:#F2E6C8;--go-t2:#A88A50;--go-t3:#705C30;--go-a1:#D4A845;--go-a2:#7A5C18;
    --go-hover-bg:rgba(212,168,69,0.10);--go-hover-border:rgba(212,168,69,0.30);
    --go-selected-bg:rgba(212,168,69,0.15);--go-selected-border:rgba(212,168,69,0.40);
    --bg-ribbon:var(--go-s3);--border-ribbon:var(--go-s7);--app-text-color:var(--go-t1);--app-bg:var(--go-s1);
    --titlebar-bg:var(--go-s2);--titlebar-action-icon:var(--go-t2);--titlebar-action-hover-bg:var(--go-s5);--titlebar-separator:var(--go-s7);
    --titlebar-filename:var(--go-t1);--titlebar-control-icon:var(--go-t1);--tab-row-bg:var(--go-s2);--section-divider:var(--go-s7);--section-title-color:var(--go-t2);
    --btn-hover-bg:var(--go-hover-bg);--btn-hover-border:var(--go-hover-border);--btn-hover-shadow:rgba(212,168,69,0.15);
    --btn-active-bg:var(--go-selected-bg);--btn-active-border:var(--go-selected-border);--btn-active-shadow:rgba(212,168,69,0.25);
    --dropdown-bg:var(--go-s4);--dropdown-border:var(--go-s8);--dropdown-shadow:rgba(0,0,0,0.6);--dropdown-item-hover-bg:var(--go-s5);
    --dropdown-arrow-color:var(--go-t2);--dropdown-separator:var(--go-s7);--btn-small-bg:var(--go-s4);--btn-small-border:var(--go-s7);
    --threshold-label-color:var(--go-t2);--threshold-values-color:var(--go-t1);--toggle-icon-color:var(--go-a1);--toggle-status-color:var(--go-t2);
    --hotkeys-icon-color:var(--go-a1);--anchor-toggle-icon-color:var(--go-a1);--theme-mode-toggle-icon-color:var(--go-a1);
    --select-menu-header-color:var(--go-t2);--select-menu-header-bg:var(--go-s4);--select-menu-icon-all-fill:rgba(212,168,69,0.18);
    --select-menu-icon-all-fill-disabled:var(--go-s5);--select-menu-icon-disabled-stroke:var(--go-t3);
    --theme-colors-window-bg:var(--go-s3);--theme-colors-titlebar-bg-start:var(--go-s4);--theme-colors-titlebar-bg-end:var(--go-s3);
    --theme-colors-titlebar-border:var(--go-s7);--theme-colors-top-note-color:var(--go-t2);--theme-colors-result-count-color:var(--go-t2);
    --theme-colors-list-bg:var(--go-s3);--theme-colors-editor-panel-bg-start:var(--go-s4);--theme-colors-editor-panel-bg-end:var(--go-s3);
    --theme-colors-editor-panel-border:var(--go-s7);--theme-colors-editor-title-color:var(--go-t1);--theme-colors-editor-key-color:var(--go-t1);
    --theme-colors-editor-input-bg:var(--go-s5);--theme-colors-editor-input-border:var(--go-s8);--theme-colors-editor-swatch-border:var(--go-s8);
    --theme-colors-editor-hint-color:var(--go-t3);--theme-colors-mini-toggle-color:var(--go-t1);
    --palette-mini-swatch-border:#080604;--palette-mini-swatch-inner:#fff;
    --palette-mini-swatch-hover-border:var(--go-a1);--palette-mini-swatch-hover-inner:rgba(212,168,69,0.2);
    --view-center-icon-color:var(--go-a1);--view-edgeclean-icon-color:var(--go-a1);--view-theme-icon-color:var(--go-a1);
    --select-icon-free-color:var(--go-a1);--select-icon-poly-main-color:var(--go-a1);--select-icon-poly-accent-color:#E8C870;
    --bg-hover:var(--go-hover-bg);--border-hover:var(--go-hover-border);--bg-selected:var(--go-selected-bg);--border-selected:var(--go-selected-border);
    --bg-canvas:#322A18;--win-blue:var(--go-a1);
}
body.gilded-obsidian-mode{background:var(--go-s1);color:var(--go-t1);}
body.gilded-obsidian-mode #title-bar{background:var(--go-s2);border-bottom:none;}
body.gilded-obsidian-mode .tab-row{background:var(--go-s2);border-bottom-color:var(--go-s7);border-top:1px solid var(--go-s2);color:var(--go-t1);}
body.gilded-obsidian-mode .tab{color:var(--go-t2);border-color:transparent;}
body.gilded-obsidian-mode .tab:not(.file):not(.active):hover{color:var(--go-t1);background:var(--go-s5);border-color:var(--go-s7);}
body.gilded-obsidian-mode .tab.active{background:var(--go-s3);border-color:var(--go-s7);border-bottom-color:var(--go-s3);color:var(--go-t1);}
body.gilded-obsidian-mode .tab-row .dd-arrow{color:var(--go-t1);}
body.gilded-obsidian-mode .ribbon{background:var(--go-s3);border-bottom:1px solid var(--go-s7);}
body.gilded-obsidian-mode .section{border-right-color:var(--go-s7);}body.gilded-obsidian-mode .section-title{color:var(--go-t3);}
body.gilded-obsidian-mode .btn-large{color:var(--go-t1);}body.gilded-obsidian-mode .btn-large:hover{background:var(--go-s5);border-color:var(--go-s7);}
body.gilded-obsidian-mode .btn-large.active,body.gilded-obsidian-mode .btn-large.is-on{background:var(--go-selected-bg);border-color:var(--go-selected-border);}
body.gilded-obsidian-mode .toggle-status{color:var(--go-t2);}
body.gilded-obsidian-mode .toggle-btn .toggle-icons,body.gilded-obsidian-mode #anchor-toggle-btn .toggle-icons,body.gilded-obsidian-mode #theme-mode-btn .toggle-icons{color:var(--go-a1);}
body.gilded-obsidian-mode svg [fill="#0078d7"]{fill:var(--go-a1);}body.gilded-obsidian-mode svg [stroke="#0078d7"]{stroke:var(--go-a1);}
body.gilded-obsidian-mode .ribbon-card{background:var(--go-s4);border-color:var(--go-s7);color:var(--go-t1);}
body.gilded-obsidian-mode .ribbon-card .card-label{color:var(--go-t1);}body.gilded-obsidian-mode .ribbon-card .mini-label{color:var(--go-t2);}
body.gilded-obsidian-mode .compact-input{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode .dropdown-panel,body.gilded-obsidian-mode .paint-dropdown{background:var(--go-s4);border-color:var(--go-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.gilded-obsidian-mode .dropdown-item,body.gilded-obsidian-mode .paint-dropdown-item{color:var(--go-t1);}
body.gilded-obsidian-mode .dropdown-item:hover,body.gilded-obsidian-mode .paint-dropdown-item:hover{background:var(--go-s5);}
body.gilded-obsidian-mode .dropdown-separator{background:var(--go-s7);}
body.gilded-obsidian-mode .modal-mask{background:rgba(0,0,0,0.65);}
body.gilded-obsidian-mode #modal-resize .window,body.gilded-obsidian-mode #modal-depth .window,body.gilded-obsidian-mode #modal-export .window,body.gilded-obsidian-mode #modal-huesat .window,body.gilded-obsidian-mode #modal-hotkeys .window,body.gilded-obsidian-mode #modal-info .window,body.gilded-obsidian-mode #modal-colors .window,body.gilded-obsidian-mode #modal-confirm-reset .window,body.gilded-obsidian-mode #modal-toolbar .window,body.gilded-obsidian-mode #modal-wincolor .window,body.gilded-obsidian-mode #modal-tool-customizer .window,body.gilded-obsidian-mode .modal-window{background:var(--go-s3);border-color:var(--go-s7);color:var(--go-t1);box-shadow:0 12px 40px rgba(0,0,0,0.7);}
body.gilded-obsidian-mode #modal-resize .title-bar,body.gilded-obsidian-mode #modal-depth .title-bar,body.gilded-obsidian-mode #modal-export .title-bar,body.gilded-obsidian-mode #modal-huesat .title-bar,body.gilded-obsidian-mode #modal-hotkeys .title-bar,body.gilded-obsidian-mode #modal-info .title-bar,body.gilded-obsidian-mode #modal-colors .title-bar,body.gilded-obsidian-mode #modal-confirm-reset .title-bar,body.gilded-obsidian-mode #modal-toolbar .title-bar,body.gilded-obsidian-mode #modal-wincolor .title-bar,body.gilded-obsidian-mode #modal-tool-customizer .title-bar{background:var(--go-s4);border-bottom-color:var(--go-s7);color:var(--go-t1);}
body.gilded-obsidian-mode .close-btn{color:var(--go-t2);}body.gilded-obsidian-mode .close-btn:hover{background:#c42b1c;color:#fff;}
body.gilded-obsidian-mode #modal-resize .footer,body.gilded-obsidian-mode #modal-depth .footer,body.gilded-obsidian-mode #modal-export .footer,body.gilded-obsidian-mode #modal-huesat .footer,body.gilded-obsidian-mode #modal-hotkeys .footer,body.gilded-obsidian-mode #modal-colors .footer{border-top-color:var(--go-s7);}
body.gilded-obsidian-mode .modal-mask .btn,body.gilded-obsidian-mode .modal-mask button.btn{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode .modal-mask .btn:hover{background:var(--go-s6);border-color:var(--go-a2);}
body.gilded-obsidian-mode .modal-mask .btn-primary,body.gilded-obsidian-mode .modal-mask .btn-ok{background:var(--go-a2);border-color:#5A4010;color:#fff;}
body.gilded-obsidian-mode .modal-mask .btn-primary:hover,body.gilded-obsidian-mode .modal-mask .btn-ok:hover{background:#9A7820;}
body.gilded-obsidian-mode .modal-mask input[type="text"],body.gilded-obsidian-mode .modal-mask input[type="number"],body.gilded-obsidian-mode .modal-mask select,body.gilded-obsidian-mode .modal-mask textarea{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode .modal-mask input[type="text"]:focus,body.gilded-obsidian-mode .modal-mask input[type="number"]:focus,body.gilded-obsidian-mode .modal-mask select:focus{border-color:var(--go-a1);outline:none;}
body.gilded-obsidian-mode .modal-mask label,body.gilded-obsidian-mode .modal-mask .row label{color:var(--go-t1);}
body.gilded-obsidian-mode .modal-mask fieldset{border-color:var(--go-s7);}body.gilded-obsidian-mode .modal-mask legend,body.gilded-obsidian-mode .modal-mask .section-header{color:var(--go-t2);}
body.gilded-obsidian-mode .modal-mask .section-header{border-bottom-color:var(--go-s7);}
body.gilded-obsidian-mode .hotkey-list{background:var(--go-s4);border-color:var(--go-s7);}body.gilded-obsidian-mode .hotkey-row{border-bottom-color:var(--go-s7);}
body.gilded-obsidian-mode .hotkey-label{color:var(--go-t1);}body.gilded-obsidian-mode .hotkeys-icon{color:var(--go-a1);}
body.gilded-obsidian-mode #modal-info .info-section{border-bottom-color:var(--go-s7);}body.gilded-obsidian-mode #modal-info .info-title{color:var(--go-a1);}
body.gilded-obsidian-mode #modal-info li,body.gilded-obsidian-mode #modal-info p{color:var(--go-t1);}body.gilded-obsidian-mode #modal-info .link-btn{color:var(--go-a1);}
body.gilded-obsidian-mode #modal-colors .color-item{border-bottom-color:var(--go-s7);}
body.gilded-obsidian-mode #modal-colors .color-item:hover{background:var(--go-s5);border-color:var(--go-s7);}
body.gilded-obsidian-mode #modal-colors .color-item.is-active{background:var(--go-selected-bg);border-color:var(--go-selected-border);}
body.gilded-obsidian-mode #modal-colors .color-label,body.gilded-obsidian-mode #modal-colors .close-btn{color:var(--go-t1);}
body.gilded-obsidian-mode #modal-colors .color-element-label,body.gilded-obsidian-mode #modal-colors .select-hint{color:var(--go-t2);}
body.gilded-obsidian-mode #modal-colors .color-input,body.gilded-obsidian-mode .preset-select,body.gilded-obsidian-mode .preset-input,body.gilded-obsidian-mode .search-input{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode #modal-colors .color-input.invalid{border-color:#e81123;background:rgba(232,17,35,0.15);}
body.gilded-obsidian-mode #modal-colors .btn{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode #modal-colors .btn:hover{background:var(--go-s6);border-color:var(--go-a1);}
body.gilded-obsidian-mode #modal-colors .color-list{border-color:var(--go-s7);}body.gilded-obsidian-mode #modal-colors .preset-row{background:var(--go-s4);border-color:var(--go-s7);}
body.gilded-obsidian-mode #modal-colors .editor-grid label{color:var(--go-t2);}body.gilded-obsidian-mode #modal-colors .editor-grid input[type="number"]{background:var(--go-s5);border-color:var(--go-s8);color:var(--go-t1);}
body.gilded-obsidian-mode #file-menu.file-menu-template{background:var(--go-s3);border-color:var(--go-s7);box-shadow:2px 4px 16px rgba(0,0,0,0.6);}
body.gilded-obsidian-mode #file-menu .file-menu-left{background:var(--go-s4);border-right-color:var(--go-s7);}
body.gilded-obsidian-mode #file-menu .file-menu-item{color:var(--go-t1);}body.gilded-obsidian-mode #file-menu .file-menu-item:hover{background:var(--go-s5);border-color:var(--go-s7);}
body.gilded-obsidian-mode #file-menu .file-menu-separator{background:var(--go-s7);}body.gilded-obsidian-mode #file-menu .file-menu-right{background:var(--go-s3);}
body.gilded-obsidian-mode #file-menu .file-menu-recent-toggle{background:var(--go-s4);border-color:var(--go-s7);color:var(--go-t2);}
body.gilded-obsidian-mode #file-menu .file-menu-recent-toggle:hover{background:var(--go-s5);color:var(--go-t1);}
body.gilded-obsidian-mode #file-menu .file-menu-recent-header{color:var(--go-t1);border-bottom-color:var(--go-s7);}
body.gilded-obsidian-mode #file-menu .file-menu-recent-item{color:var(--go-t2);}body.gilded-obsidian-mode #file-menu .file-menu-recent-item:hover{background:var(--go-s5);color:var(--go-t1);}
body.gilded-obsidian-mode .select-menu{background:var(--go-s4);border-color:var(--go-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.gilded-obsidian-mode .select-menu-header{background:var(--go-s4);color:var(--go-t2);border-bottom-color:var(--go-s7);}
body.gilded-obsidian-mode .select-menu-item{color:var(--go-t1);}body.gilded-obsidian-mode .select-menu-item:hover{background:var(--go-s5);}
body.gilded-obsidian-mode input[type="range"]::-webkit-slider-runnable-track,body.gilded-obsidian-mode input[type="range"]::-moz-range-track{background:var(--go-s6);}
body.gilded-obsidian-mode input[type="range"]::-webkit-slider-thumb{background:var(--go-a1);}body.gilded-obsidian-mode input[type="range"]::-moz-range-thumb{background:var(--go-a1);}
body.gilded-obsidian-mode #save-reminder-modal .window,body.gilded-obsidian-mode #close-confirm-modal .window{background:var(--go-s3);border-color:var(--go-s7);color:var(--go-t1);}
body.gilded-obsidian-mode #lsys-panel{background:var(--go-s3);border-color:var(--go-s7);}body.gilded-obsidian-mode #lsys-list{background:var(--go-s4);}
body.gilded-obsidian-mode .lsys-layer{background:var(--go-s4);border-bottom-color:var(--go-s7);color:var(--go-t1);}body.gilded-obsidian-mode .lsys-layer.active{background:var(--go-s5);}
body.gilded-obsidian-mode .lsys-layer-name{color:var(--go-t1);}body.gilded-obsidian-mode #lsys-toolbar{background:var(--go-s3);border-top-color:var(--go-s7);}
body.gilded-obsidian-mode .lsys-btn{color:var(--go-t1);}body.gilded-obsidian-mode .lsys-btn:hover{background:var(--go-s5);}
body.gilded-obsidian-mode #status-bar,body.gilded-obsidian-mode .status-bar{background:var(--go-s2);border-top-color:var(--go-s7);color:var(--go-t2);}
body.gilded-obsidian-mode #palette-bar,body.gilded-obsidian-mode .palette-bar{background:var(--go-s3);border-top-color:var(--go-s7);}
body.gilded-obsidian-mode .mini-swatch.empty{box-shadow:none;}
body.gilded-obsidian-mode #modal-wincolor .tab-btn{background:var(--go-s5);border-color:var(--go-s7);color:var(--go-t1);}body.gilded-obsidian-mode #modal-wincolor .tab-btn.active{background:var(--go-a2);color:#fff;}
body.gilded-obsidian-mode #swap-colors-btn{background:var(--go-s4) !important;border-color:var(--go-s7) !important;color:var(--go-t1);}
body.gilded-obsidian-mode #swap-colors-btn:hover{background:var(--go-s5) !important;border-color:var(--go-s8) !important;}

/* ════════════════════════════════════════════════════════════════
 * VIOLET HAZE - deep purple-indigo with soft violet accents
 * ════════════════════════════════════════════════════════════════ */
body.violet-haze-mode {
    --vh-s0:#0A0810;--vh-s1:#0E0B18;--vh-s2:#130E20;--vh-s3:#1E1635;--vh-s4:#251C42;--vh-s5:#2E2250;--vh-s6:#382860;--vh-s7:#4A3878;--vh-s8:#5E4C90;
    --vh-t1:#E0D8F8;--vh-t2:#8878C0;--vh-t3:#584880;--vh-a1:#A888F0;--vh-a2:#4C2A9C;
    --vh-hover-bg:rgba(168,136,240,0.10);--vh-hover-border:rgba(168,136,240,0.30);
    --vh-selected-bg:rgba(168,136,240,0.15);--vh-selected-border:rgba(168,136,240,0.40);
    --bg-ribbon:var(--vh-s3);--border-ribbon:var(--vh-s7);--app-text-color:var(--vh-t1);--app-bg:var(--vh-s1);
    --titlebar-bg:var(--vh-s2);--titlebar-action-icon:var(--vh-t2);--titlebar-action-hover-bg:var(--vh-s5);--titlebar-separator:var(--vh-s7);
    --titlebar-filename:var(--vh-t1);--titlebar-control-icon:var(--vh-t1);--tab-row-bg:var(--vh-s2);--section-divider:var(--vh-s7);--section-title-color:var(--vh-t2);
    --btn-hover-bg:var(--vh-hover-bg);--btn-hover-border:var(--vh-hover-border);--btn-hover-shadow:rgba(168,136,240,0.15);
    --btn-active-bg:var(--vh-selected-bg);--btn-active-border:var(--vh-selected-border);--btn-active-shadow:rgba(168,136,240,0.25);
    --dropdown-bg:var(--vh-s4);--dropdown-border:var(--vh-s8);--dropdown-shadow:rgba(0,0,0,0.6);--dropdown-item-hover-bg:var(--vh-s5);
    --dropdown-arrow-color:var(--vh-t2);--dropdown-separator:var(--vh-s7);--btn-small-bg:var(--vh-s4);--btn-small-border:var(--vh-s7);
    --threshold-label-color:var(--vh-t2);--threshold-values-color:var(--vh-t1);--toggle-icon-color:var(--vh-a1);--toggle-status-color:var(--vh-t2);
    --hotkeys-icon-color:var(--vh-a1);--anchor-toggle-icon-color:var(--vh-a1);--theme-mode-toggle-icon-color:var(--vh-a1);
    --select-menu-header-color:var(--vh-t2);--select-menu-header-bg:var(--vh-s4);--select-menu-icon-all-fill:rgba(168,136,240,0.18);
    --select-menu-icon-all-fill-disabled:var(--vh-s5);--select-menu-icon-disabled-stroke:var(--vh-t3);
    --theme-colors-window-bg:var(--vh-s3);--theme-colors-titlebar-bg-start:var(--vh-s4);--theme-colors-titlebar-bg-end:var(--vh-s3);
    --theme-colors-titlebar-border:var(--vh-s7);--theme-colors-top-note-color:var(--vh-t2);--theme-colors-result-count-color:var(--vh-t2);
    --theme-colors-list-bg:var(--vh-s3);--theme-colors-editor-panel-bg-start:var(--vh-s4);--theme-colors-editor-panel-bg-end:var(--vh-s3);
    --theme-colors-editor-panel-border:var(--vh-s7);--theme-colors-editor-title-color:var(--vh-t1);--theme-colors-editor-key-color:var(--vh-t1);
    --theme-colors-editor-input-bg:var(--vh-s5);--theme-colors-editor-input-border:var(--vh-s8);--theme-colors-editor-swatch-border:var(--vh-s8);
    --theme-colors-editor-hint-color:var(--vh-t3);--theme-colors-mini-toggle-color:var(--vh-t1);
    --palette-mini-swatch-border:#06040C;--palette-mini-swatch-inner:#fff;
    --palette-mini-swatch-hover-border:var(--vh-a1);--palette-mini-swatch-hover-inner:rgba(168,136,240,0.2);
    --view-center-icon-color:var(--vh-a1);--view-edgeclean-icon-color:var(--vh-a1);--view-theme-icon-color:var(--vh-a1);
    --select-icon-free-color:var(--vh-a1);--select-icon-poly-main-color:var(--vh-a1);--select-icon-poly-accent-color:#C4A8FF;
    --bg-hover:var(--vh-hover-bg);--border-hover:var(--vh-hover-border);--bg-selected:var(--vh-selected-bg);--border-selected:var(--vh-selected-border);
    --bg-canvas:#2A2047;--win-blue:var(--vh-a1);
}
body.violet-haze-mode{background:var(--vh-s1);color:var(--vh-t1);}
body.violet-haze-mode #title-bar{background:var(--vh-s2);border-bottom:none;}
body.violet-haze-mode .tab-row{background:var(--vh-s2);border-bottom-color:var(--vh-s7);border-top:1px solid var(--vh-s2);color:var(--vh-t1);}
body.violet-haze-mode .tab{color:var(--vh-t2);border-color:transparent;}
body.violet-haze-mode .tab:not(.file):not(.active):hover{color:var(--vh-t1);background:var(--vh-s5);border-color:var(--vh-s7);}
body.violet-haze-mode .tab.active{background:var(--vh-s3);border-color:var(--vh-s7);border-bottom-color:var(--vh-s3);color:var(--vh-t1);}
body.violet-haze-mode .tab-row .dd-arrow{color:var(--vh-t1);}
body.violet-haze-mode .ribbon{background:var(--vh-s3);border-bottom:1px solid var(--vh-s7);}
body.violet-haze-mode .section{border-right-color:var(--vh-s7);}body.violet-haze-mode .section-title{color:var(--vh-t3);}
body.violet-haze-mode .btn-large{color:var(--vh-t1);}body.violet-haze-mode .btn-large:hover{background:var(--vh-s5);border-color:var(--vh-s7);}
body.violet-haze-mode .btn-large.active,body.violet-haze-mode .btn-large.is-on{background:var(--vh-selected-bg);border-color:var(--vh-selected-border);}
body.violet-haze-mode .toggle-status{color:var(--vh-t2);}
body.violet-haze-mode .toggle-btn .toggle-icons,body.violet-haze-mode #anchor-toggle-btn .toggle-icons,body.violet-haze-mode #theme-mode-btn .toggle-icons{color:var(--vh-a1);}
body.violet-haze-mode svg [fill="#0078d7"]{fill:var(--vh-a1);}body.violet-haze-mode svg [stroke="#0078d7"]{stroke:var(--vh-a1);}
body.violet-haze-mode .ribbon-card{background:var(--vh-s4);border-color:var(--vh-s7);color:var(--vh-t1);}
body.violet-haze-mode .ribbon-card .card-label{color:var(--vh-t1);}body.violet-haze-mode .ribbon-card .mini-label{color:var(--vh-t2);}
body.violet-haze-mode .compact-input{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode .dropdown-panel,body.violet-haze-mode .paint-dropdown{background:var(--vh-s4);border-color:var(--vh-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.violet-haze-mode .dropdown-item,body.violet-haze-mode .paint-dropdown-item{color:var(--vh-t1);}
body.violet-haze-mode .dropdown-item:hover,body.violet-haze-mode .paint-dropdown-item:hover{background:var(--vh-s5);}
body.violet-haze-mode .dropdown-separator{background:var(--vh-s7);}
body.violet-haze-mode .modal-mask{background:rgba(0,0,0,0.65);}
body.violet-haze-mode #modal-resize .window,body.violet-haze-mode #modal-depth .window,body.violet-haze-mode #modal-export .window,body.violet-haze-mode #modal-huesat .window,body.violet-haze-mode #modal-hotkeys .window,body.violet-haze-mode #modal-info .window,body.violet-haze-mode #modal-colors .window,body.violet-haze-mode #modal-confirm-reset .window,body.violet-haze-mode #modal-toolbar .window,body.violet-haze-mode #modal-wincolor .window,body.violet-haze-mode #modal-tool-customizer .window,body.violet-haze-mode .modal-window{background:var(--vh-s3);border-color:var(--vh-s7);color:var(--vh-t1);box-shadow:0 12px 40px rgba(0,0,0,0.7);}
body.violet-haze-mode #modal-resize .title-bar,body.violet-haze-mode #modal-depth .title-bar,body.violet-haze-mode #modal-export .title-bar,body.violet-haze-mode #modal-huesat .title-bar,body.violet-haze-mode #modal-hotkeys .title-bar,body.violet-haze-mode #modal-info .title-bar,body.violet-haze-mode #modal-colors .title-bar,body.violet-haze-mode #modal-confirm-reset .title-bar,body.violet-haze-mode #modal-toolbar .title-bar,body.violet-haze-mode #modal-wincolor .title-bar,body.violet-haze-mode #modal-tool-customizer .title-bar{background:var(--vh-s4);border-bottom-color:var(--vh-s7);color:var(--vh-t1);}
body.violet-haze-mode .close-btn{color:var(--vh-t2);}body.violet-haze-mode .close-btn:hover{background:#c42b1c;color:#fff;}
body.violet-haze-mode #modal-resize .footer,body.violet-haze-mode #modal-depth .footer,body.violet-haze-mode #modal-export .footer,body.violet-haze-mode #modal-huesat .footer,body.violet-haze-mode #modal-hotkeys .footer,body.violet-haze-mode #modal-colors .footer{border-top-color:var(--vh-s7);}
body.violet-haze-mode .modal-mask .btn,body.violet-haze-mode .modal-mask button.btn{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode .modal-mask .btn:hover{background:var(--vh-s6);border-color:var(--vh-a2);}
body.violet-haze-mode .modal-mask .btn-primary,body.violet-haze-mode .modal-mask .btn-ok{background:var(--vh-a2);border-color:#361A78;color:#fff;}
body.violet-haze-mode .modal-mask .btn-primary:hover,body.violet-haze-mode .modal-mask .btn-ok:hover{background:#6038C0;}
body.violet-haze-mode .modal-mask input[type="text"],body.violet-haze-mode .modal-mask input[type="number"],body.violet-haze-mode .modal-mask select,body.violet-haze-mode .modal-mask textarea{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode .modal-mask input[type="text"]:focus,body.violet-haze-mode .modal-mask input[type="number"]:focus,body.violet-haze-mode .modal-mask select:focus{border-color:var(--vh-a1);outline:none;}
body.violet-haze-mode .modal-mask label,body.violet-haze-mode .modal-mask .row label{color:var(--vh-t1);}
body.violet-haze-mode .modal-mask fieldset{border-color:var(--vh-s7);}body.violet-haze-mode .modal-mask legend,body.violet-haze-mode .modal-mask .section-header{color:var(--vh-t2);}
body.violet-haze-mode .modal-mask .section-header{border-bottom-color:var(--vh-s7);}
body.violet-haze-mode .hotkey-list{background:var(--vh-s4);border-color:var(--vh-s7);}body.violet-haze-mode .hotkey-row{border-bottom-color:var(--vh-s7);}
body.violet-haze-mode .hotkey-label{color:var(--vh-t1);}body.violet-haze-mode .hotkeys-icon{color:var(--vh-a1);}
body.violet-haze-mode #modal-info .info-section{border-bottom-color:var(--vh-s7);}body.violet-haze-mode #modal-info .info-title{color:var(--vh-a1);}
body.violet-haze-mode #modal-info li,body.violet-haze-mode #modal-info p{color:var(--vh-t1);}body.violet-haze-mode #modal-info .link-btn{color:var(--vh-a1);}
body.violet-haze-mode #modal-colors .color-item{border-bottom-color:var(--vh-s7);}
body.violet-haze-mode #modal-colors .color-item:hover{background:var(--vh-s5);border-color:var(--vh-s7);}
body.violet-haze-mode #modal-colors .color-item.is-active{background:var(--vh-selected-bg);border-color:var(--vh-selected-border);}
body.violet-haze-mode #modal-colors .color-label,body.violet-haze-mode #modal-colors .close-btn{color:var(--vh-t1);}
body.violet-haze-mode #modal-colors .color-element-label,body.violet-haze-mode #modal-colors .select-hint{color:var(--vh-t2);}
body.violet-haze-mode #modal-colors .color-input,body.violet-haze-mode .preset-select,body.violet-haze-mode .preset-input,body.violet-haze-mode .search-input{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode #modal-colors .color-input.invalid{border-color:#e81123;background:rgba(232,17,35,0.15);}
body.violet-haze-mode #modal-colors .btn{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode #modal-colors .btn:hover{background:var(--vh-s6);border-color:var(--vh-a1);}
body.violet-haze-mode #modal-colors .color-list{border-color:var(--vh-s7);}body.violet-haze-mode #modal-colors .preset-row{background:var(--vh-s4);border-color:var(--vh-s7);}
body.violet-haze-mode #modal-colors .editor-grid label{color:var(--vh-t2);}body.violet-haze-mode #modal-colors .editor-grid input[type="number"]{background:var(--vh-s5);border-color:var(--vh-s8);color:var(--vh-t1);}
body.violet-haze-mode #file-menu.file-menu-template{background:var(--vh-s3);border-color:var(--vh-s7);box-shadow:2px 4px 16px rgba(0,0,0,0.6);}
body.violet-haze-mode #file-menu .file-menu-left{background:var(--vh-s4);border-right-color:var(--vh-s7);}
body.violet-haze-mode #file-menu .file-menu-item{color:var(--vh-t1);}body.violet-haze-mode #file-menu .file-menu-item:hover{background:var(--vh-s5);border-color:var(--vh-s7);}
body.violet-haze-mode #file-menu .file-menu-separator{background:var(--vh-s7);}body.violet-haze-mode #file-menu .file-menu-right{background:var(--vh-s3);}
body.violet-haze-mode #file-menu .file-menu-recent-toggle{background:var(--vh-s4);border-color:var(--vh-s7);color:var(--vh-t2);}
body.violet-haze-mode #file-menu .file-menu-recent-toggle:hover{background:var(--vh-s5);color:var(--vh-t1);}
body.violet-haze-mode #file-menu .file-menu-recent-header{color:var(--vh-t1);border-bottom-color:var(--vh-s7);}
body.violet-haze-mode #file-menu .file-menu-recent-item{color:var(--vh-t2);}body.violet-haze-mode #file-menu .file-menu-recent-item:hover{background:var(--vh-s5);color:var(--vh-t1);}
body.violet-haze-mode .select-menu{background:var(--vh-s4);border-color:var(--vh-s7);box-shadow:0 4px 16px rgba(0,0,0,0.6);}
body.violet-haze-mode .select-menu-header{background:var(--vh-s4);color:var(--vh-t2);border-bottom-color:var(--vh-s7);}
body.violet-haze-mode .select-menu-item{color:var(--vh-t1);}body.violet-haze-mode .select-menu-item:hover{background:var(--vh-s5);}
body.violet-haze-mode input[type="range"]::-webkit-slider-runnable-track,body.violet-haze-mode input[type="range"]::-moz-range-track{background:var(--vh-s6);}
body.violet-haze-mode input[type="range"]::-webkit-slider-thumb{background:var(--vh-a1);}body.violet-haze-mode input[type="range"]::-moz-range-thumb{background:var(--vh-a1);}
body.violet-haze-mode #save-reminder-modal .window,body.violet-haze-mode #close-confirm-modal .window{background:var(--vh-s3);border-color:var(--vh-s7);color:var(--vh-t1);}
body.violet-haze-mode #lsys-panel{background:var(--vh-s3);border-color:var(--vh-s7);}body.violet-haze-mode #lsys-list{background:var(--vh-s4);}
body.violet-haze-mode .lsys-layer{background:var(--vh-s4);border-bottom-color:var(--vh-s7);color:var(--vh-t1);}body.violet-haze-mode .lsys-layer.active{background:var(--vh-s5);}
body.violet-haze-mode .lsys-layer-name{color:var(--vh-t1);}body.violet-haze-mode #lsys-toolbar{background:var(--vh-s3);border-top-color:var(--vh-s7);}
body.violet-haze-mode .lsys-btn{color:var(--vh-t1);}body.violet-haze-mode .lsys-btn:hover{background:var(--vh-s5);}
body.violet-haze-mode #status-bar,body.violet-haze-mode .status-bar{background:var(--vh-s2);border-top-color:var(--vh-s7);color:var(--vh-t2);}
body.violet-haze-mode #palette-bar,body.violet-haze-mode .palette-bar{background:var(--vh-s3);border-top-color:var(--vh-s7);}
body.violet-haze-mode .mini-swatch.empty{box-shadow:none;}
body.violet-haze-mode #modal-wincolor .tab-btn{background:var(--vh-s5);border-color:var(--vh-s7);color:var(--vh-t1);}body.violet-haze-mode #modal-wincolor .tab-btn.active{background:var(--vh-a2);color:#fff;}
body.violet-haze-mode #swap-colors-btn{background:var(--vh-s4) !important;border-color:var(--vh-s7) !important;color:var(--vh-t1);}
body.violet-haze-mode #swap-colors-btn:hover{background:var(--vh-s5) !important;border-color:var(--vh-s8) !important;}

#toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast{padding:8px 16px;border-radius:4px;font-size:13px;font-weight:500;box-shadow:0 2px 8px rgba(0,0,0,0.2);animation:toast-in 0.2s ease-out;pointer-events:auto;max-width:420px;text-align:center;line-height:1.4;}
.toast--info{background:#e8f4fd;color:#1a5276;border:1px solid #aed6f1;}
.toast--error{background:#fdedec;color:#922b21;border:1px solid #f5b7b1;}
.toast--warning{background:#fef9e7;color:#7d6608;border:1px solid #f9e79f;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* pokeemerald project asset browser */
#project-panel{position:fixed;left:-336px;top:145px;bottom:24px;width:320px;z-index:9988;display:flex;flex-direction:column;background:#f5f6f7;color:var(--app-text-color);border-right:1px solid var(--border-ribbon,#dadbdc);border-radius:0;font-size:12px;overflow:hidden;transition:left .24s cubic-bezier(.16,1,.3,1);}
#project-panel:not(.project-collapsed){left:0;}
#project-panel.project-closed{display:none;}
#project-expand{position:fixed;left:0;top:145px;z-index:60;display:none;width:24px;height:24px;border:1px solid var(--border-ribbon,#dadbdc);border-left:none;background:#f5f6f7;color:var(--section-title-color);cursor:pointer;border-radius:0 4px 4px 0;padding:0;transition:background .1s,color .1s;align-items:center;justify-content:center;}
#project-expand:hover{background:var(--win-blue);color:#fff;}
body.project-panel-collapsed #project-expand{display:flex;}
#project-header{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 6px 10px;font-weight:600;color:var(--app-text-color);border-bottom:1px solid color-mix(in srgb,var(--section-divider,#e0e0e0) 80%, transparent);flex-shrink:0;}
#project-title{font-weight:600;letter-spacing:0.4px;font-size:12.5px;}
#project-actions{display:flex;gap:2px;align-items:center;}
#project-actions button{width:24px;height:24px;border:none;background:transparent;cursor:pointer;font-size:13px;line-height:1;border-radius:2px;display:flex;align-items:center;justify-content:center;margin-left:2px;transition:background .12s ease,color .12s ease;}
#project-collapse svg{width:11px;height:11px;flex:none;}
#project-collapse{width:24px;height:24px;margin-left:0;color:var(--section-title-color);}
#project-collapse:hover{background:color-mix(in srgb,var(--app-text-color,#111) 8%, transparent);color:var(--app-text-color);}
#project-close{color:#e81123;}
#project-close:hover{background:#e81123;color:#fff;}
#project-close:active{background:#c20b1c;color:#fff;}
.proj-actionbar{display:flex;gap:4px;padding:4px 6px;border-bottom:1px solid color-mix(in srgb,var(--section-divider,#e0e0e0) 80%, transparent);flex-shrink:0;}
.proj-actionbar button{font-size:10px;padding:2px 6px;border:1px solid var(--btn-small-border);background:var(--btn-small-bg);color:var(--app-text-color);border-radius:3px;cursor:pointer;line-height:1.4;transition:background .12s ease,border-color .12s ease;}
.proj-actionbar button:hover:not(:disabled){background:var(--btn-hover-bg);border-color:var(--btn-hover-border);}
.proj-actionbar button:disabled{opacity:.5;cursor:default;color:var(--section-title-color);}
#project-tree{flex:1;overflow-y:auto;padding:4px 2px;}
#project-tree::-webkit-scrollbar{width:9px;}
#project-tree::-webkit-scrollbar-thumb{background:var(--s6,#cfcfcf);border-radius:5px;border:2px solid var(--s3,#f3f3f3);}
#project-tree::-webkit-scrollbar-thumb:hover{background:var(--s7,#999);}
#project-status{padding:5px 8px;border-top:1px solid var(--s6,#cfcfcf);background:var(--s4,#e8e8e8);font-size:10.5px;word-break:break-all;color:var(--t2,#777);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.proj-empty{padding:10px 8px;color:var(--t2,#777);font-style:italic;}
.proj-dir-header{display:flex;align-items:center;gap:4px;padding:4px 4px;cursor:pointer;border-radius:4px;transition:background .1s;}
.proj-dir-header:hover{background:var(--s5,#dadada);}
.proj-dir-toggle{width:12px;text-align:center;color:var(--a1,#0078d7);flex:none;}
.proj-dir-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proj-dir.match > .proj-dir-header .proj-dir-name{color:var(--win-blue);font-weight:700;}
.proj-dir-children{padding-left:12px;}
.proj-row{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:4px;cursor:pointer;transition:background .1s;}
.proj-row + .proj-row{border-top:1px solid color-mix(in srgb,var(--section-divider,#e0e0e0) 60%, transparent);}
.proj-row:hover{background:var(--s5,#dadada);}
.proj-row-pal{font-style:italic;}
.proj-thumb-wrap{width:60px;height:60px;flex:none;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#fff 0% 25%,#ddd 0% 50%) 50%/12px 12px;overflow:hidden;border-radius:3px;border:1px solid var(--s6,#cfcfcf);}
.proj-thumb{max-width:60px;max-height:60px;width:60px;height:60px;object-fit:contain;image-rendering:pixelated;display:block;}
.proj-thumb-missing{opacity:0.25;}
.proj-pal-dot{width:12px;height:12px;border-radius:50%;background:var(--a1,#0078d7);flex:none;border:1px solid var(--s7,#999);}
.proj-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proj-pal-badges{display:flex;gap:3px;flex:none;}
.proj-pal-badge{font-size:10px;font-weight:700;padding:1px 5px;border:1px solid var(--s7,#999);background:var(--a1,#0078d7);color:#fff;border-radius:4px;cursor:pointer;line-height:1.4;transition:filter .1s;}
.proj-pal-badge:hover{filter:brightness(1.12);}
.proj-search{margin:6px 8px;border:1px solid var(--s6,#cfcfcf);background:var(--s5,#fff);color:var(--t1,#222);border-radius:5px;padding:5px 7px;font-size:12px;width:calc(100% - 16px);box-sizing:border-box;transition:border-color .1s,box-shadow .1s;}
.proj-search:focus{outline:none;border-color:var(--a1,#0078d7);box-shadow:0 0 0 2px rgba(0,120,215,0.15);}
.proj-overlay{position:absolute;top:105px;left:0;right:0;bottom:27px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb,var(--app-text-color,#111) 6%, transparent);z-index:5;animation:proj-pulse 1.2s ease-in-out infinite;pointer-events:none;}
.project-loading .proj-overlay{display:flex;}
.proj-overlay .proj-spinner{width:26px;height:26px;border:3px solid color-mix(in srgb,var(--win-blue) 30%, transparent);border-top-color:var(--win-blue);border-radius:50%;animation:save-spin .7s linear infinite;}
.proj-overlay .proj-loading-text{font-size:11px;color:var(--app-text-color);opacity:.8;}
@keyframes proj-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

#palette-panel{position:fixed;right:16px;top:150px;width:276px;max-height:80vh;z-index:70;display:flex;flex-direction:column;background:var(--s3,#f3f3f3);color:var(--t1,#222);border:1px solid var(--s6,#cfcfcf);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,0.22);font-size:12px;overflow:hidden;transition:opacity .15s ease;}
#palette-panel.project-collapsed{display:none;}
.pp-header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid var(--s6,#cfcfcf);background:var(--s4,#e8e8e8);cursor:move;user-select:none;}
.pp-title{font-weight:600;letter-spacing:0.3px;}
.pp-close{border:none;background:transparent;font-size:16px;line-height:1;cursor:pointer;color:var(--t1,#222);border-radius:4px;padding:2px 4px;transition:background .1s,color .1s;}
.pp-close:hover{background:#fdecea;color:#a33;}
.pp-add-palette{margin:6px 8px;border:1px dashed var(--s7,#999);background:transparent;color:var(--t1,#222);border-radius:4px;padding:4px;cursor:pointer;font-size:11px;}
.pp-add-palette:hover{background:var(--s4,#e8e8e8);}
.pp-list{flex:1;overflow-y:auto;padding:4px 8px 10px;}
.pp-list::-webkit-scrollbar{width:9px;}
.pp-list::-webkit-scrollbar-thumb{background:var(--s6,#cfcfcf);border-radius:5px;border:2px solid var(--s3,#f3f3f3);}
.pp-list::-webkit-scrollbar-thumb:hover{background:var(--s7,#999);}
.pp-card{border:1px solid var(--s6,#cfcfcf);border-radius:6px;padding:6px;margin-bottom:8px;background:var(--s5,#fff);}
.pp-card.pp-active{border-color:var(--a1,#0078d7);box-shadow:0 0 0 1px var(--a1,#0078d7);}
.pp-card.pp-previewing{border-color:#c77d00;box-shadow:0 0 0 1px #c77d00;}
.pp-actions{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.pp-actions .pp-btn{flex:1;min-width:44px;text-align:center;}
.pp-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pp-btn{font-size:10px;padding:2px 5px;border:1px solid var(--s6,#cfcfcf);background:var(--s5,#fff);color:var(--t1,#222);border-radius:3px;cursor:pointer;line-height:1.3;}
.pp-btn:hover{background:var(--s6,#dcdcdc);}
.pp-btn-danger{border-color:#d99;color:#a33;font-weight:700;}
.pp-swatches{display:grid;grid-template-columns:repeat(auto-fill,27px);gap:4px;padding:2px 0;}
.pp-swatches .mini-swatch{width:100% !important;height:auto !important;aspect-ratio:1/1;box-sizing:border-box;border-radius:4px;cursor:grab;}
.pp-swatches .mini-swatch:active{cursor:grabbing;}
#sprite-preview{position:fixed;left:50%;transform:translateX(-50%);bottom:34px;max-width:90vw;z-index:9990;display:flex;flex-direction:column;background:var(--s3,#f3f3f3);color:var(--t1,#222);border:1px solid var(--s6,#cfcfcf);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.22);font-size:12px;overflow:hidden;}
#sprite-preview.sp-collapsed{display:none;}
.sp-header{display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:move;background:var(--s5,#fff);border-bottom:1px solid var(--s6,#cfcfcf);}
.sp-header .sp-title{font-weight:600;}
.sp-header .sp-close{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:14px;}
.sp-row{display:flex;gap:10px;padding:8px;overflow-x:auto;}
.sp-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;}
.sp-name{font-size:10px;color:var(--t1,#444);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-canvas{position:relative;image-rendering:pixelated;background:#000;border:1px solid var(--s6,#cfcfcf);border-radius:4px;display:block;}
.pp-swatches .mini-swatch.empty{background:transparent;pointer-events:none;cursor:default;box-shadow:none;border:1px solid transparent;}
.pp-swatches .mini-swatch.empty:hover{box-shadow:none;border:1px solid transparent;}
.pp-swatches .mini-swatch.empty::after{content:'';display:block;width:55%;height:55%;margin:22.5% auto;box-sizing:border-box;border:2px dashed var(--palette-mini-swatch-border,#888);border-radius:50%;opacity:.4;}
.pp-color-input{position:fixed;left:-9999px;top:-9999px;}