/* ════════════════════════════════════════════════════════════════════════
   BLACK THEME — project shell + concept designer
   Matches the think4ever Flutter app dark palette (lib/core/theme/app_theme.dart):
     bg #0A1018 · surface #111A26 · surface-high #1D2C3E · nav #0D141E
     outline #2A3B50 · text #E6ECF4 · muted #8A97A8 · primary #6FC0FF · brand #1A8FE3
   Loaded LAST in project.html, so the html[data-theme="black"] prefix wins by
   specificity. Light mode is untouched (absence of the attribute).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Variable remaps (covers everything that goes through CSS vars) ── */
html[data-theme="black"] {
    /* project.css sidebar + primary */
    --sidebar-bg: #0d141e;
    --sidebar-border: #2a3b50;
    --sidebar-text: #e6ecf4;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #6fc0ff;
    --sidebar-active-bg: #0f4a75;
    --sidebar-active-border: #6fc0ff;
    --sidebar-group-text: #6b7a8d;
    --sidebar-hover-bg: #16202e;
    --primary: #6fc0ff;
    --primary-light: #8fd0ff;

    /* concept.css palette */
    --primary-color: #6fc0ff;
    --primary-dark: #1a8fe3;
    --primary-light: #8fd0ff;
    --primary-bg: rgba(111, 192, 255, 0.12);
    --secondary-color: #67e8f9;
    --success-color: #34d399;
    --success-dark: #10b981;
    --success-light: #6ee7b7;
    --success-bg: rgba(52, 211, 153, 0.12);
    --danger-color: #f87171;
    --danger-dark: #ef4444;
    --danger-light: #fca5a5;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --warning-color: #fbbf24;
    --warning-dark: #f59e0b;
    --warning-light: #fcd34d;
    --warning-bg: rgba(251, 191, 36, 0.12);

    --gray-50: #0a1018;
    --gray-100: #111a26;
    --gray-200: #1d2c3e;
    --gray-300: #2a3b50;
    --gray-400: #6b7a8d;
    --gray-500: #8a97a8;
    --gray-600: #a4b0c0;
    --gray-700: #c3ccd9;
    --gray-800: #d2dae6;
    --gray-900: #e6ecf4;

    --bg-primary: #111a26;
    --bg-secondary: #0a1018;
    --bg-tertiary: #1d2c3e;

    --text-primary: #e6ecf4;
    --text-secondary: #c3ccd9;
    --text-tertiary: #8a97a8;

    --border-color: #2a3b50;
    --border-dark: #3a4d66;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* ── Base ── */
html[data-theme="black"] body { background: #0a1018; color: #e6ecf4; }
html[data-theme="black"] .main-content { background: #0a1018; }
html[data-theme="black"] .page-container { background: #0a1018; color: #e6ecf4; }

/* Scrollbars */
html[data-theme="black"] ::-webkit-scrollbar-track { background: #0d141e; }
html[data-theme="black"] ::-webkit-scrollbar-thumb { background-color: #2a3b50; border-radius: 4px; }
html[data-theme="black"] ::-webkit-scrollbar-thumb:hover { background-color: #3a4d66; }

/* ════════════════ PROJECT SHELL (project.css) ════════════════ */

/* Top bar / chrome bands */
html[data-theme="black"] .topbar,
html[data-theme="black"] .chat-header,
html[data-theme="black"] .user-profile-header,
html[data-theme="black"] .help-popup-header,
html[data-theme="black"] .design-popup-header,
html[data-theme="black"] .pw-keymodal-footer,
html[data-theme="black"] .user-profile-tabs,
html[data-theme="black"] .suggested-tasks-header,
html[data-theme="black"] .modal-footer {
    background: #0d141e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .topbar-breadcrumb span,
html[data-theme="black"] .topbar-breadcrumb a { color: #c3ccd9; }

/* Cards / panels / modals / dropdowns / popovers → surface */
html[data-theme="black"] .chat-modal,
html[data-theme="black"] .chat-area,
html[data-theme="black"] .messages-container,
html[data-theme="black"] .message-text,
html[data-theme="black"] .message.assistant .message-text,
html[data-theme="black"] .message-references-section,
html[data-theme="black"] .reference-item,
html[data-theme="black"] .input-area,
html[data-theme="black"] .sessions-sidebar,
html[data-theme="black"] .modal-dialog,
html[data-theme="black"] .design-popup,
html[data-theme="black"] .design-popup-body,
html[data-theme="black"] .help-popup,
html[data-theme="black"] .help-popup-body,
html[data-theme="black"] .user-profile-modal,
html[data-theme="black"] .pw-keymodal,
html[data-theme="black"] .pw-account-card,
html[data-theme="black"] .document-card,
html[data-theme="black"] .prompt-card,
html[data-theme="black"] .context-menu,
html[data-theme="black"] .user-dropdown-menu,
html[data-theme="black"] .project-selector-dropdown,
html[data-theme="black"] .project-selector-current,
html[data-theme="black"] .popup-credit-pill,
html[data-theme="black"] .topbar-credit-pill,
html[data-theme="black"] .concept-designs-section,
html[data-theme="black"] .suggested-tasks-section {
    background: #111a26;
    border-color: #2a3b50;
    color: #e6ecf4;
}

/* "Attach Files" modal — its dropzone and Cancel button hardcode light colours
   via inline styles, so restate them for dark theme (inline → needs !important). */
html[data-theme="black"] #attach-files-dropzone {
    background: #0f1722 !important;
    border-color: #324a64 !important;
}
html[data-theme="black"] #attach-files-dropzone div { color: #c3ccd9 !important; }
html[data-theme="black"] #attach-files-modal .modal-body p { color: #8a97a8 !important; }
html[data-theme="black"] #attach-files-modal .modal-footer { border-top-color: #2a3b50 !important; }
html[data-theme="black"] #attach-files-modal .modal-footer button:first-child {
    background: #16202e !important;
    color: #c3ccd9 !important;
}

/* Sidekick intro tiles — drop the per-tile colourful chips and use the dark
   theme's single accent (#6fc0ff) so the icons stay consistent with the rest
   of the UI. (Chip backgrounds are inline, so they need !important.) */
html[data-theme="black"] .sidekick-intro-tile-icon {
    background: rgba(111, 192, 255, 0.14) !important;
    color: #6fc0ff !important;
}

/* Secondary / elevated surfaces & hovers */
html[data-theme="black"] .document-card-footer,
html[data-theme="black"] .ui-design-tile,
html[data-theme="black"] .ui-design-tile .tile-icon,
html[data-theme="black"] .tech-flow-tile,
html[data-theme="black"] .up-info-item,
html[data-theme="black"] .up-group-badge,
html[data-theme="black"] .task-agent-type,
html[data-theme="black"] .pw-acc-stat,
html[data-theme="black"] .pw-acc-code,
html[data-theme="black"] .pw-prompt-btn-secondary,
html[data-theme="black"] .btn-secondary,
html[data-theme="black"] .show-sidebar-btn,
html[data-theme="black"] .req-item,
html[data-theme="black"] .req-empty {
    background: #1d2c3e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .project-list li:hover,
html[data-theme="black"] .dropdown-item:hover,
html[data-theme="black"] .footer-link:hover,
html[data-theme="black"] .user-info:hover,
html[data-theme="black"] .user-dropdown-btn:hover,
html[data-theme="black"] .btn-topbar:hover,
html[data-theme="black"] .btn-secondary:hover,
html[data-theme="black"] .context-menu-item:hover,
html[data-theme="black"] .project-selector-current:hover,
html[data-theme="black"] .pw-acc-table tbody tr:hover,
html[data-theme="black"] .pw-keymodal-close:hover,
html[data-theme="black"] .pw-keymodal-btn--ghost:hover,
html[data-theme="black"] .chat-header-actions button:hover,
html[data-theme="black"] .req-btn:hover,
html[data-theme="black"] .ui-design-tile:hover,
html[data-theme="black"] .tech-flow-tile:hover {
    background: #1d2c3e;
    color: #e6ecf4;
}
html[data-theme="black"] .dropdown-divider { background: #2a3b50; }
html[data-theme="black"] .btn-topbar { background: #16202e; border-color: #2a3b50; color: #c3ccd9; }

/* UI-build explainer (pre-generation) */
html[data-theme="black"] .ui-build-intro { background: #0f1722; border-color: #2a3b50; }
html[data-theme="black"] .ui-build-intro-icon { background: #0f4a75; color: #6fc0ff; }
html[data-theme="black"] .ui-build-intro-title { color: #e6ecf4; }
html[data-theme="black"] .ui-build-intro-text { color: #9fb0c3; }
html[data-theme="black"] .ui-build-intro-text strong { color: #d6deea; }
html[data-theme="black"] .ui-build-screens-head { color: #9fb0c3; }
html[data-theme="black"] .ui-build-chip { background: #16202e; border-color: #2a3b50; color: #cdd8e6; }
html[data-theme="black"] .ui-build-chip i { color: #6b7d92; }
html[data-theme="black"] .ui-build-chip.is-building { background: #0f3350; border-color: #2f6da8; color: #bfe0ff; }
html[data-theme="black"] .ui-build-chip.is-building i { color: #6fc0ff; }
html[data-theme="black"] .ui-build-running-note { color: #6fc0ff; }

/* Sidekick inline status icons (dark). The system bubble itself inherits the
   bot-message surface via .ai-message-bot .ai-message-content above. */
html[data-theme="black"] .sk-ico-build  { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-done   { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-ui     { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-ask    { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-info   { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-warn   { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-accent { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-err    { color: #6fc0ff; }
html[data-theme="black"] .sk-ico-muted  { color: #6fc0ff; }

/* Inputs */
html[data-theme="black"] .up-input,
html[data-theme="black"] .up-input:disabled,
html[data-theme="black"] .pw-keymodal-input,
html[data-theme="black"] .pw-acc-select,
html[data-theme="black"] .project-search input,
html[data-theme="black"] .pw-selector-search input,
html[data-theme="black"] .pw-prompt-input,
html[data-theme="black"] .form-group textarea,
html[data-theme="black"] .message-input-wrapper,
html[data-theme="black"] .pw-create-modal-body .form-group textarea {
    background: #16202e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .message-input-wrapper:focus-within,
html[data-theme="black"] .pw-selector-search input:focus,
html[data-theme="black"] .pw-create-modal-body .form-group textarea:focus,
html[data-theme="black"] .pw-selector-create-form .form-group textarea:focus {
    background: #1a2636;
    border-color: #6fc0ff;
}
html[data-theme="black"] input::placeholder,
html[data-theme="black"] textarea::placeholder { color: #6b7a8d; }

/* Tables */
html[data-theme="black"] .pw-acc-table th { background: #0d141e; color: #c3ccd9; }

/* Close buttons */
html[data-theme="black"] .user-profile-close,
html[data-theme="black"] .design-popup-close { background: #1d2c3e; color: #c3ccd9; }

/* Dark-on-light text → light */
html[data-theme="black"] .chat-title,
html[data-theme="black"] .concept-design-title,
html[data-theme="black"] .context-menu-item,
html[data-theme="black"] .design-popup-title,
html[data-theme="black"] .document-card-title,
html[data-theme="black"] .empty-chat-title,
html[data-theme="black"] .help-popup-title,
html[data-theme="black"] .message-sender,
html[data-theme="black"] .modal-header h3,
html[data-theme="black"] .prompt-card-title,
html[data-theme="black"] .pw-acc-card-head,
html[data-theme="black"] .pw-acc-stat-val,
html[data-theme="black"] .pw-create-modal-header h4,
html[data-theme="black"] .pw-create-modal-body .form-group label,
html[data-theme="black"] .pw-keymodal-label,
html[data-theme="black"] .pw-keymodal-title,
html[data-theme="black"] .pw-project-action-item,
html[data-theme="black"] .pw-prompt-warning-text,
html[data-theme="black"] .pw-selector-form-header h4,
html[data-theme="black"] .pw-selector-header h3,
html[data-theme="black"] .pw-selector-item-name,
html[data-theme="black"] .reference-name,
html[data-theme="black"] .req-details h4,
html[data-theme="black"] .task-description,
html[data-theme="black"] .tech-flow-tile .tile-name,
html[data-theme="black"] .ui-design-tile .tile-name,
html[data-theme="black"] .up-display-name,
html[data-theme="black"] .up-form-section h4,
html[data-theme="black"] .up-info-value,
html[data-theme="black"] .user-name,
html[data-theme="black"] .user-profile-header h3 { color: #e6ecf4; }

/* ════════════════ PROJECT SELECTOR OVERLAY (the /project landing) ════════════════ */
/* Light mode keeps its animated glass look; dark mode goes solid + app-like:
   the .pw-selector-blob elements are decorative animations bleeding colour
   through the white-glass surfaces, so we hide them and make surfaces solid. */
html[data-theme="black"] .pw-selector-blob { display: none !important; }
html[data-theme="black"] .pw-selector-overlay { background: #0a1018; }
html[data-theme="black"] .pw-selector-overlay::before { display: none; }
html[data-theme="black"] .pw-selector-header,
html[data-theme="black"] .pw-popup-tabs,
html[data-theme="black"] .pw-selector-footer {
    background: #0d141e;
    border-color: #2a3b50;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme="black"] .pw-selector-header { border-bottom: 1px solid #2a3b50; }
html[data-theme="black"] .pw-selector-body { background: #0a1018; }
html[data-theme="black"] .pw-selector-search {
    background: #0a1018;
    border-bottom: 1px solid #2a3b50;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-theme="black"] .pw-selector-header h3 { color: #e6ecf4; }
html[data-theme="black"] .pw-selector-header-subtitle { color: #8a97a8; }
html[data-theme="black"] .pw-selector-logo td div {
    background: #0f4a75 !important;
    color: #d2eaff !important;
}
html[data-theme="black"] .pw-selector-search input {
    background: #16202e; border-color: #2a3b50; color: #e6ecf4;
}
html[data-theme="black"] .pw-selector-search input::placeholder { color: #6b7a8d; }
html[data-theme="black"] .pw-selector-search i { color: #6b7a8d; }
html[data-theme="black"] .pw-selector-item {
    background: #111a26;
    border-color: #2a3b50;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
html[data-theme="black"] .pw-selector-item:hover {
    background: #1d2c3e;
    border-color: rgba(111, 192, 255, 0.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
html[data-theme="black"] .pw-selector-item-name { color: #e6ecf4; }
html[data-theme="black"] .pw-selector-item-desc { color: #8a97a8; }
html[data-theme="black"] .pw-selector-item-arrow { color: #6b7a8d; }
html[data-theme="black"] .pw-popup-tab { color: #8a97a8; }
html[data-theme="black"] .pw-popup-tab:hover { color: #6fc0ff; background: #16202e; }
html[data-theme="black"] .pw-popup-tab.is-active { color: #6fc0ff; border-bottom-color: #6fc0ff; }
html[data-theme="black"] .pw-selector-create-btn { background: #16202e; border-color: #2a3b50; color: #6fc0ff; }
html[data-theme="black"] .pw-selector-create-btn:hover { background: #1d2c3e; border-color: #6fc0ff; }
/* Unify the three top-right action buttons (Credits / Create New Project /
   Logout) into one consistent pill — same style, same colors, brand accent. */
html[data-theme="black"] #popup-credit-pill,
html[data-theme="black"] .pw-selector-create-btn-top,
html[data-theme="black"] #pw-popup-logout-btn {
    background: #1d2c3e !important;
    border: 1px solid #2a3b50 !important;
    color: #e6ecf4 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    height: 49px;
    display: inline-flex;
    align-items: center;
}
html[data-theme="black"] #popup-credit-pill:hover,
html[data-theme="black"] .pw-selector-create-btn-top:hover,
html[data-theme="black"] #pw-popup-logout-btn:hover {
    background: #25374d !important;
    border-color: #3a4d66 !important;
}
html[data-theme="black"] #popup-credit-pill i,
html[data-theme="black"] .pw-selector-create-btn-top i,
html[data-theme="black"] #pw-popup-logout-btn i,
html[data-theme="black"] #popup-credit-pill .popup-credit-label,
html[data-theme="black"] #popup-credit-pill .popup-credit-amount { color: #6fc0ff !important; }
html[data-theme="black"] .pw-selector-project-count { color: #8a97a8; }

/* Project icons: dark, brand-tinted background with our main blue letter
   (overrides the per-project pastel inline styles). */
html[data-theme="black"] .pw-selector-item-icon {
    background: rgba(111, 192, 255, 0.12) !important;
    color: #6fc0ff !important;
}

/* ════════════════ CONCEPT DESIGNER (concept.css) ════════════════ */
/* Most concept surfaces use var(--bg-*) / var(--text-*) and are already
   handled by the remaps above. These have literal light hex values. */
html[data-theme="black"] #controls,
html[data-theme="black"] #controls .btn-group-toggle,
html[data-theme="black"] #controls .btn-group-dropdown button,
html[data-theme="black"] #controls .change-history-btn,
html[data-theme="black"] #controls select,
html[data-theme="black"] .layer-toolbar,
html[data-theme="black"] .layer-toolbar-btn,
html[data-theme="black"] .layer-view-btn,
html[data-theme="black"] .multiselect-container,
html[data-theme="black"] .object-search-dropdown,
html[data-theme="black"] .ch-item,
html[data-theme="black"] .ch-item-explanation,
html[data-theme="black"] .ch-revert-btn,
html[data-theme="black"] .change-history-modal-body,
html[data-theme="black"] .cb-offer-dialog,
html[data-theme="black"] .req-add-item-dialog,
html[data-theme="black"] .req-analyzer-current-req,
html[data-theme="black"] .req-analyzer-final-req,
html[data-theme="black"] .req-block,
html[data-theme="black"] .req-block-head,
html[data-theme="black"] .option-tile,
html[data-theme="black"] .question-item,
html[data-theme="black"] .ig-screen,
html[data-theme="black"] .import-preview-stat-card,
html[data-theme="black"] .import-preview-footer,
html[data-theme="black"] .layer-side-childcount,
html[data-theme="black"] .layer-side-child-sub {
    background: #111a26;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .ig-node,
html[data-theme="black"] .floating-chat-button,
html[data-theme="black"] #select-theme-btn:hover,
html[data-theme="black"] .multiselect-option:hover,
html[data-theme="black"] .req-item:hover,
html[data-theme="black"] .req-tile-toolbar button,
html[data-theme="black"] .ai-decide-checkbox,
html[data-theme="black"] .cb-offer-skip {
    background: #1d2c3e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .object-search-input,
html[data-theme="black"] .question-item select,
html[data-theme="black"] .question-item textarea,
html[data-theme="black"] .layer-side-list-search input,
html[data-theme="black"] .connection-entry input,
html[data-theme="black"] .modal-field textarea,
html[data-theme="black"] .node-form input,
html[data-theme="black"] .node-form textarea,
html[data-theme="black"] #json-output,
html[data-theme="black"] #build-ui-design-modal textarea {
    background: #16202e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .layer-side-list-search input:focus {
    background: #1a2636;
    border-color: #6fc0ff;
}
/* Concept canvas + node cards — elevated #1D2C3E so cards float on the deep canvas.
   Concept / Roles / Business Rules share .cy-node-html-label; Data Objects use .cy-data-node;
   Business Flows (.cy-flow-node) and Integration Maps (.ig-node) are elevated elsewhere. */
html[data-theme="black"] #cy { background: #0a1018; }
html[data-theme="black"] .cy-node-html-label,
html[data-theme="black"] .cy-data-node { background: #1d2c3e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .cy-node-html-label:hover,
html[data-theme="black"] .cy-data-node:hover { border-color: #6fc0ff !important; }

/* Concept Summary (System Architecture) cards — keep the per-type coloured
   border/header (set inline), only darken the card body & chips. */
html[data-theme="black"] #cy-architecture { background: #0a1018; }
html[data-theme="black"] .cy-arch-node { background: #1d2c3e !important; }
html[data-theme="black"] .arch-node-desc { color: #9fb3c8 !important; }
html[data-theme="black"] .arch-tech-badge,
html[data-theme="black"] .arch-ref-chip { background: #243549 !important; color: #9fb3c8 !important; }
html[data-theme="black"] .arch-ref-chip:hover { background: #1a8fe3 !important; color: #fff !important; }

/* ════════════════ concept.html inline-styled surfaces ════════════════ */
html[data-theme="black"] #conceptMain { background: #0a1018; }
html[data-theme="black"] .node-preview-popup,
html[data-theme="black"] .node-preview-header,
html[data-theme="black"] .node-preview-iframe-container { background: #111a26; border-color: #2a3b50; color: #e6ecf4; }
html[data-theme="black"] .node-preview-close-btn { background: #1d2c3e; color: #c3ccd9; }
html[data-theme="black"] .node-preview-close-btn:hover { background: #2a3b50; }
html[data-theme="black"] #documents-btn:hover { background: #1d2c3e; }

/* ════════════════════════════════════════════════════════════════════════
   CONCEPT — comprehensive dark cleanup
   Goal: no white backgrounds, no white/inconsistent borders. Every surface
   maps to the app palette and every border to the single outline #2A3B50.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Panels / dialogs / dropdowns / popovers → surface #111A26 ── */
html[data-theme="black"] #voice-transcript,
html[data-theme="black"] .change-history-modal-body,
html[data-theme="black"] .change-history-modal-dialog,
html[data-theme="black"] .req-analyzer-modal-dialog,
html[data-theme="black"] .req-analyzer-modal-footer,
html[data-theme="black"] .quickstart-modal-dialog,
html[data-theme="black"] .quickstart-modal-header,
html[data-theme="black"] .quickstart-modal-footer,
html[data-theme="black"] .quickstart-tile,
html[data-theme="black"] .import-preview-warning,
html[data-theme="black"] .import-preview-file,
html[data-theme="black"] .ai-chat-window,
html[data-theme="black"] .ai-chat-messages,
html[data-theme="black"] .ai-chat-input-container,
html[data-theme="black"] .ai-chat-attached-file,
html[data-theme="black"] .ai-chat-layer-context-label,
html[data-theme="black"] .ai-message-bot .ai-message-content,
html[data-theme="black"] .cb-offer-features span,
html[data-theme="black"] .layer-side-list,
html[data-theme="black"] .layer-detail-panel,
html[data-theme="black"] .layer-empty-overlay,
html[data-theme="black"] .layer-scroll-content,
html[data-theme="black"] .node-form,
html[data-theme="black"] .node-comment,
html[data-theme="black"] .detail-panel-header,
html[data-theme="black"] .detail-step-item,
html[data-theme="black"] .role-card,
html[data-theme="black"] .role-selector-container,
html[data-theme="black"] .rule-card,
html[data-theme="black"] .integ-card,
html[data-theme="black"] .integ-cap,
html[data-theme="black"] .sidekick-intro-tile,
html[data-theme="black"] .voice-processing-content,
html[data-theme="black"] .build-loading-content,
html[data-theme="black"] .item-list,
html[data-theme="black"] .item-entry,
html[data-theme="black"] .layer-container,
html[data-theme="black"] .question-item textarea,
html[data-theme="black"] .req-analyzer-current-req,
html[data-theme="black"] .req-analyzer-final-req {
    background: #111a26;
    border-color: #2a3b50;
    color: #e6ecf4;
}

/* ── Secondary / elevated chips, tiles, hovers → #1D2C3E ── */
html[data-theme="black"] .ch-item:hover,
html[data-theme="black"] .cb-offer-skip:hover,
html[data-theme="black"] .layer-side-item-icon,
html[data-theme="black"] .layer-side-childcount,
html[data-theme="black"] .layer-side-child-sub,
html[data-theme="black"] .layer-side-list-count,
html[data-theme="black"] .layer-side-twisty:hover,
html[data-theme="black"] .layer-toolbar-btn:hover,
html[data-theme="black"] .req-block-count,
html[data-theme="black"] .integ-cap-method,
html[data-theme="black"] .import-preview-btn-cancel,
html[data-theme="black"] .req-tile-toolbar button,
html[data-theme="black"] .data-field-row,
html[data-theme="black"] .node-role-item {
    background: #1d2c3e;
    border-color: #2a3b50;
    color: #e6ecf4;
}

/* ── Inputs → #16202E ── */
html[data-theme="black"] .req-item-text,
html[data-theme="black"] .req-analyzer-textarea,
html[data-theme="black"] .requirements-textarea,
html[data-theme="black"] .ai-chat-input,
html[data-theme="black"] .layer-toolbar-right select,
html[data-theme="black"] .btn-group-item-row select,
html[data-theme="black"] .question-item select {
    background: #16202e;
    border-color: #2a3b50;
    color: #e6ecf4;
}
html[data-theme="black"] .req-item-text:focus,
html[data-theme="black"] .object-search-input:focus,
html[data-theme="black"] .ai-chat-input:focus { border-color: #6fc0ff; }

/* ── Close / icon buttons ── */
html[data-theme="black"] .change-history-close-btn,
html[data-theme="black"] .req-analyzer-close-btn,
html[data-theme="black"] .cross-ref-toast-close,
html[data-theme="black"] .ai-chat-close,
html[data-theme="black"] .quickstart-skip-btn,
html[data-theme="black"] #select-theme-btn,
html[data-theme="black"] #success-details-modal .modal-close-btn,
html[data-theme="black"] #documents-modal .modal-close-btn { background: #1d2c3e; color: #c3ccd9; border-color: #2a3b50; }
html[data-theme="black"] .change-history-close-btn:hover,
html[data-theme="black"] .req-analyzer-close-btn:hover,
html[data-theme="black"] .cross-ref-toast-close:hover,
html[data-theme="black"] .ai-chat-close:hover,
html[data-theme="black"] .quickstart-skip-btn:hover,
html[data-theme="black"] #select-theme-btn:hover,
html[data-theme="black"] #success-details-modal .modal-close-btn:hover,
html[data-theme="black"] #documents-modal .modal-close-btn:hover { background: #2a3b50; color: #e6ecf4; }

/* ── Semantic / status chips: keep their accent text, dark the background ── */
html[data-theme="black"] .access-badge.access-read_only,
html[data-theme="black"] .matrix-cell.matrix-read_only,
html[data-theme="black"] .node-role-item.role-readonly,
html[data-theme="black"] .ch-item-type-badge.manual,
html[data-theme="black"] .rule-sev-info,
html[data-theme="black"] .layer-tab.active .layer-tab-count,
html[data-theme="black"] [class*="object-search-item-icon"],
html[data-theme="black"] [class*="object-search-item-type-badge"],
html[data-theme="black"] .import-preview-badge,
html[data-theme="black"] .import-preview-chip {
    background: #1d2c3e !important;
    border-color: #2a3b50 !important;
}
/* Import-preview text — concept.css hardcodes these dark, so they stay invisible
   on the dark cards/chips. Restate them light. */
html[data-theme="black"] .import-preview-file-name,
html[data-theme="black"] .import-preview-stat-num { color: #e6ecf4 !important; }
html[data-theme="black"] .import-preview-file-meta,
html[data-theme="black"] .import-preview-stat-label,
html[data-theme="black"] .import-preview-section-title { color: #8a97a8 !important; }
html[data-theme="black"] .import-preview-chip { color: #c3ccd9 !important; }
html[data-theme="black"] .import-preview-chip.skip { color: #8a97a8 !important; }
html[data-theme="black"] .import-preview-badge.new { color: #6ee7b7 !important; }
html[data-theme="black"] .import-preview-badge.skip { color: #8a97a8 !important; }
html[data-theme="black"] .layer-side-item.active { background: #0f4a75 !important; border-color: #6fc0ff !important; }
/* Hover highlights (not catchable by static audit) → dark, never white */
html[data-theme="black"] .layer-side-item:hover { background: #1d2c3e !important; }
html[data-theme="black"] .layer-side-child:hover { background: #1d2c3e !important; }
html[data-theme="black"] .layer-side-twisty:hover { background: #2a3b50 !important; color: #c3ccd9 !important; }

/* ════════════════ ALL HOVER HIGHLIGHTS → dark (never white) ════════════════ */
html[data-theme="black"] .issues-tab:hover,
html[data-theme="black"] .jira-tab:hover,
html[data-theme="black"] .kb-tab:hover { background: #16202e !important; color: #6fc0ff !important; }
html[data-theme="black"] .cw-btn:hover,
html[data-theme="black"] .req-btn.edit:hover,
html[data-theme="black"] .req-item:hover,
html[data-theme="black"] .cb-offer-skip:hover,
html[data-theme="black"] .kb-editor-action-btn:hover,
html[data-theme="black"] .kb-editor-back-btn:hover,
html[data-theme="black"] .kb-editor-tag:hover,
html[data-theme="black"] .kb-history-item:hover,
html[data-theme="black"] .kb-history-restore-btn:hover,
html[data-theme="black"] .kb-icon-btn:hover,
html[data-theme="black"] .kb-more-dropdown a:hover,
html[data-theme="black"] .kb-tree-item:hover,
html[data-theme="black"] .kb-tree-workspace-header:hover,
html[data-theme="black"] .task-action-btn.edit:hover,
html[data-theme="black"] .task-action-btn.restart:hover,
html[data-theme="black"] .testcase-group-header:hover { background: #1d2c3e !important; }
html[data-theme="black"] .object-search-item { border-color: #2a3b50 !important; }
html[data-theme="black"] .object-search-item:hover { background: #1d2c3e !important; }

/* ── Off-brand blue (#4A90E2) headers/buttons → our brand #0D6FC0 ── */
html[data-theme="black"] [style*="#4A90E2"],
html[data-theme="black"] [style*="#4a90e2"] {
    background: #0d6fc0 !important;
    border-color: #0d6fc0 !important;
}

/* ── Border normalisation: any concept border that was light → outline ── */
html[data-theme="black"] #controls .btn-group-toggle,
html[data-theme="black"] #controls .btn-group-dropdown button,
html[data-theme="black"] #controls .change-history-btn,
html[data-theme="black"] .layer-side-list-search input,
html[data-theme="black"] .ch-item,
html[data-theme="black"] .req-block,
html[data-theme="black"] .data-field-row,
html[data-theme="black"] .node-role-item,
html[data-theme="black"] .object-search-dropdown,
html[data-theme="black"] .object-search-input,
html[data-theme="black"] #voice-transcript,
html[data-theme="black"] #node-summary-overlay #node-summary-content table,
html[data-theme="black"] #node-summary-overlay #node-summary-content th,
html[data-theme="black"] #node-summary-overlay #node-summary-content td,
html[data-theme="black"] #node-summary-overlay #node-summary-content li li { border-color: #2a3b50 !important; }

/* Scrollbars inside concept panels */
html[data-theme="black"] #voice-transcript::-webkit-scrollbar-track { background: #0d141e; }
html[data-theme="black"] #voice-transcript::-webkit-scrollbar-thumb { background: #2a3b50; }
html[data-theme="black"] #voice-transcript::-webkit-scrollbar-thumb:hover { background: #3a4d66; }

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTONS — every action button shares one identical style:
   same radius, same background, same border, same text/icon colour.
   !important because several buttons carry inline background styles.
   (Placed last so it wins over the per-button rules above.)
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="black"] .btn-group-toggle,
html[data-theme="black"] .change-history-btn,
html[data-theme="black"] #change-history-btn,
html[data-theme="black"] #create-ui-screens-btn,
html[data-theme="black"] .layer-toolbar-btn,
html[data-theme="black"] .layer-toolbar-btn.btn-add,
html[data-theme="black"] .layer-view-btn,
html[data-theme="black"] .btn-topbar,
html[data-theme="black"] .btn-topbar.btn-topbar--labeled,
html[data-theme="black"] #topbar-credit-pill,
html[data-theme="black"] .topbar-credit-pill {
    background: #1d2c3e !important;
    border: 1px solid #2a3b50 !important;
    color: #e6ecf4 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
html[data-theme="black"] .btn-group-toggle:hover,
html[data-theme="black"] .change-history-btn:hover,
html[data-theme="black"] #change-history-btn:hover,
html[data-theme="black"] #create-ui-screens-btn:hover,
html[data-theme="black"] .layer-toolbar-btn:hover,
html[data-theme="black"] .layer-view-btn:hover,
html[data-theme="black"] .btn-topbar:hover,
html[data-theme="black"] #topbar-credit-pill:hover,
html[data-theme="black"] .topbar-credit-pill:hover {
    background: #25374d !important;
    border-color: #3a4d66 !important;
    color: #ffffff !important;
}
/* Icons + credit label/amount use the brand accent across all buttons */
html[data-theme="black"] .btn-group-toggle i,
html[data-theme="black"] .change-history-btn i,
html[data-theme="black"] #create-ui-screens-btn i,
html[data-theme="black"] .layer-toolbar-btn i,
html[data-theme="black"] .layer-view-btn i,
html[data-theme="black"] .btn-topbar i,
html[data-theme="black"] .topbar-credit-pill i,
html[data-theme="black"] #topbar-credit-pill i,
html[data-theme="black"] .topbar-credit-label,
html[data-theme="black"] .topbar-credit-amount { color: #6fc0ff !important; }
/* Active toggles stay in the same palette, marked by a brand border + text */
html[data-theme="black"] .btn-group-toggle.active,
html[data-theme="black"] .layer-view-btn.active {
    border-color: #6fc0ff !important;
    color: #6fc0ff !important;
}
/* Roles filter dropdown (bottom bar "All Roles") matches the button family */
html[data-theme="black"] .roles-filter-select,
html[data-theme="black"] #roles-filter,
html[data-theme="black"] .role-selector-container,
html[data-theme="black"] .layer-toolbar-right select {
    background: #1d2c3e !important;
    border: 1px solid #2a3b50 !important;
    color: #e6ecf4 !important;
    border-radius: 8px !important;
}
/* Role filter: select sits INSIDE the bordered container → only one border */
html[data-theme="black"] .role-selector-container select,
html[data-theme="black"] #role-select {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #e6ecf4 !important;
    outline: none !important;
}
/* Native dropdown option list (was white) → dark */
html[data-theme="black"] #role-select option,
html[data-theme="black"] .role-selector-container select option {
    background-color: #16202e !important;
    color: #e6ecf4 !important;
}

/* ── View & Export dropdown menu items (source sets these #fff !important) ── */
html[data-theme="black"] .btn-group-dropdown { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] #controls .btn-group-dropdown button,
html[data-theme="black"] .btn-group-dropdown button {
    background: #16202e !important;
    color: #e6ecf4 !important;
    border: 0.5px solid #2a3b50 !important;
}
html[data-theme="black"] #controls .btn-group-dropdown button:hover,
html[data-theme="black"] .btn-group-dropdown button:hover {
    background: #1d2c3e !important;
    color: #6fc0ff !important;
    border-color: #6fc0ff !important;
}
html[data-theme="black"] #controls .btn-group-dropdown button i,
html[data-theme="black"] .btn-group-dropdown button i { color: #6fc0ff !important; }
html[data-theme="black"] .btn-group-divider { background: #2a3b50 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .btn-group-section-label { color: #8a97a8 !important; }
html[data-theme="black"] .btn-group-item-row select { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }

/* ── "Processing…" usage widget (#pw-ai-status, inline white styles in project.js) ── */
html[data-theme="black"] #pw-ai-status {
    background: #111a26 !important;
    color: #e6ecf4 !important;
    border-color: #2a3b50 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="black"] #pw-ai-status > div:first-child {
    background: #0d141e !important;
    border-bottom-color: #2a3b50 !important;
}
html[data-theme="black"] #pw-ai-status > div > div { border-bottom-color: #2a3b50 !important; }

/* ════════════════ SIDEBAR NAV (project menu) ════════════════ */
html[data-theme="black"] .nav-link:hover { background: #16202e; color: #6fc0ff; }
html[data-theme="black"] .nav-link.active {
    background: #0f4a75;
    color: #d2eaff;
    border-left-color: #6fc0ff;
}
html[data-theme="black"] .nav-link.active .nav-icon { color: #d2eaff; }
html[data-theme="black"] .nav-count { background: #1d2c3e; color: #6fc0ff; }
html[data-theme="black"] .nav-link.active .nav-count { background: #6fc0ff; color: #08111c; }

/* ════════════════ MCP DOCS pages (#mcp-*) ════════════════ */
html[data-theme="black"] .mcpdoc-root { color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-sub { color: #8a97a8; }
html[data-theme="black"] .mcpdoc-card { background: #111a26; border-color: #2a3b50; }
html[data-theme="black"] .mcpdoc-card h2,
html[data-theme="black"] .mcpdoc-card h3 { color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-card p { color: #c3ccd9; }
html[data-theme="black"] .mcpdoc-num { background: #0f4a75; color: #d2eaff; }
html[data-theme="black"] .mcpdoc-pill { background: #16202e; border-color: #2a3b50; color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-pill b { color: #6fc0ff; }
html[data-theme="black"] .mcpdoc-inline { background: #16202e; color: #e6ecf4; }
html[data-theme="black"] pre.mcpdoc-pre { background: #0d141e; color: #e6ecf4; border: 1px solid #2a3b50; }
html[data-theme="black"] .mcpdoc-copy { background: #1d2c3e; color: #c3ccd9; border-color: #2a3b50; }
html[data-theme="black"] .mcpdoc-copy:hover { background: #2a3b50; color: #fff; }
html[data-theme="black"] .mcpdoc-btn.secondary { background: #1d2c3e; color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-btn.secondary:hover { background: #2a3b50; }
html[data-theme="black"] .mcpdoc-input { background: #16202e; border-color: #2a3b50; color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-note { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; }
html[data-theme="black"] .mcpdoc-tokenbar { background: rgba(111, 192, 255, 0.10); border-color: #2a3b50; }
html[data-theme="black"] .mcpdoc-tokenbar .lbl { color: #6fc0ff; }
html[data-theme="black"] .mcpdoc-state { color: #8a97a8; }
html[data-theme="black"] .mcpdoc-tag { background: #16202e; color: #6fc0ff; }
html[data-theme="black"] .mcpdoc-uc { background: #1d2c3e; border-color: #2a3b50; }
html[data-theme="black"] .mcpdoc-uc h4 { color: #e6ecf4; }
html[data-theme="black"] .mcpdoc-uc p { color: #c3ccd9; }
html[data-theme="black"] .mcpdoc-uc .say { background: rgba(111, 192, 255, 0.10); border-left-color: #6fc0ff; color: #c3ccd9; }
html[data-theme="black"] .mcpdoc-uc .say b { color: #6fc0ff; }

/* ════════════════ Concept stragglers (from live DOM audit) ════════════════ */
html[data-theme="black"] #conceptMain,
html[data-theme="black"] #conceptMain.has-side-list { border-color: #2a3b50 !important; }
html[data-theme="black"] .node-preview-iframe-container { background: #111a26 !important; }
html[data-theme="black"] .node-preview-close-btn { border-color: #2a3b50 !important; }

/* ════════════════════════════════════════════════════════════════════════
   WORKSPACE SUB-PAGES (requirements-docs, roles, business-rules, databases,
   source-code, tasks, issues, version-control, api-keys, project-settings,
   company-profile, users-management, kb, jira, api-docs, …)
   Found via live-DOM audit. Grouped into the standard palette.
   ════════════════════════════════════════════════════════════════════════ */

/* A — Cards / containers / empty states → surface */
html[data-theme="black"] .apidoc-card,
html[data-theme="black"] .card,
html[data-theme="black"] .card.mb-4,
html[data-theme="black"] .tasks-container,
html[data-theme="black"] .issues-list-container,
html[data-theme="black"] #issues-filters-bar,
html[data-theme="black"] .issues-filters-bar,
html[data-theme="black"] .issues-search,
html[data-theme="black"] .files-browser-section,
html[data-theme="black"] .files-list-header,
html[data-theme="black"] .database-list-container,
html[data-theme="black"] .kb-search,
html[data-theme="black"] .tech-tile,
html[data-theme="black"] .tech-tile.tech-tile-none,
html[data-theme="black"] .jira-empty-state,
html[data-theme="black"] .empty-state {
    background: #111a26 !important;
    border-color: #2a3b50 !important;
    color: #e6ecf4;
}

/* B — Sub-headers / filter bars / sub-panels / pills / code chips → elevated */
html[data-theme="black"] .card-header,
html[data-theme="black"] .apidoc-pill,
html[data-theme="black"] .dash-chart-container,
html[data-theme="black"] .dash-summary-card,
html[data-theme="black"] .database-list-header,
html[data-theme="black"] .database-schema,
html[data-theme="black"] .files-header,
html[data-theme="black"] .tasks-filter-bar,
html[data-theme="black"] .tech-show-more-btn,
html[data-theme="black"] .key-mode-rate,
html[data-theme="black"] .rule-violation,
html[data-theme="black"] .doc-status-badge.doc-status-missing {
    background: #1d2c3e !important;
    border-color: #2a3b50 !important;
    color: #e6ecf4;
}
html[data-theme="black"] .apidoc-inline,
html[data-theme="black"] .rule-expression { background: #16202e !important; color: #e6ecf4 !important; }

/* C — Inputs / selects → input fill */
html[data-theme="black"] .form-input,
html[data-theme="black"] .form-control,
html[data-theme="black"] .tech-search-input,
html[data-theme="black"] .folder-selector,
html[data-theme="black"] #filter-assignee,
html[data-theme="black"] #filter-priority,
html[data-theme="black"] #filter-status,
html[data-theme="black"] #filter-tracker {
    background: #16202e !important;
    border-color: #2a3b50 !important;
    color: #e6ecf4 !important;
}

/* D — Outline / tab / filter buttons → dark, unified */
html[data-theme="black"] .btn.btn-outline,
html[data-theme="black"] .filter-btn,
html[data-theme="black"] .btn-clear-filters,
html[data-theme="black"] .settings-action-btn,
html[data-theme="black"] .um-action-btn,
html[data-theme="black"] .issues-tab.active,
html[data-theme="black"] .jira-tab.active,
html[data-theme="black"] .kb-tab.active,
html[data-theme="black"] .apidoc-tab.active {
    background: #1d2c3e !important;
    border-color: #2a3b50 !important;
    color: #e6ecf4 !important;
}
html[data-theme="black"] #btn-save-all-settings.btn-save-settings-top { background: #0d6fc0 !important; color: #fff !important; }
html[data-theme="black"] .issues-tabs,
html[data-theme="black"] .jira-tabs,
html[data-theme="black"] .kb-tabs { border-color: #2a3b50 !important; }

/* E — Light-blue icon circles → brand container */
html[data-theme="black"] .dash-summary-icon,
html[data-theme="black"] .document-card-icon,
html[data-theme="black"] .um-group-badge { background: #0f4a75 !important; color: #d2eaff !important; }

/* F — Tables */
html[data-theme="black"] th { background: #0d141e !important; border-color: #2a3b50 !important; color: #c3ccd9; }
html[data-theme="black"] td { border-color: #2a3b50 !important; }

/* G — Semantic status badges → dark tints, hue kept in text */
html[data-theme="black"] .access-badge.access-full,
html[data-theme="black"] .settings-status.settings-status-active,
html[data-theme="black"] .um-status.active { background: rgba(52, 211, 153, 0.15) !important; color: #34d399 !important; border-color: rgba(52, 211, 153, 0.35) !important; }
html[data-theme="black"] .access-badge.access-hidden,
html[data-theme="black"] .integ-status-badge.integ-status-required,
html[data-theme="black"] .rule-sev-badge.rule-sev-error,
html[data-theme="black"] .settings-status.settings-status-inactive { background: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.35) !important; }
html[data-theme="black"] .perm-badge,
html[data-theme="black"] .role-system-badge,
html[data-theme="black"] .integ-status-badge.integ-status-optional,
html[data-theme="black"] .rule-sev-badge.rule-sev-warning,
html[data-theme="black"] .key-mode-badge.mode-system { background: rgba(251, 191, 36, 0.14) !important; color: #fbbf24 !important; border-color: rgba(251, 191, 36, 0.4) !important; }
html[data-theme="black"] .flow-actor-badge { background: rgba(167, 139, 250, 0.16) !important; color: #c4b5fd !important; }
html[data-theme="black"] .access-badge.access-read_only,
html[data-theme="black"] .rule-sev-badge.rule-sev-info { background: rgba(111, 192, 255, 0.14) !important; color: #6fc0ff !important; border-color: rgba(111, 192, 255, 0.35) !important; }
html[data-theme="black"] .matrix-cell.matrix-read_only { color: #6fc0ff !important; }
html[data-theme="black"] .tech-tile-label { color: #67e8f9 !important; }
html[data-theme="black"] .nav-group-label { color: #6fc0ff !important; }

/* H — Misc */
html[data-theme="black"] .tech-tile.selected { background: #0f4a75 !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .concept-design-title,
html[data-theme="black"] .card-footer { border-color: #2a3b50 !important; }
html[data-theme="black"] .empty-icon { background: #1d2c3e !important; }
html[data-theme="black"] li.database-item { border-color: #2a3b50 !important; }

/* ── Text colour normalisation (dark-on-dark from live audit) ── */
/* Primary headings / values → light */
html[data-theme="black"] .page-container h1,
html[data-theme="black"] .page-container h2,
html[data-theme="black"] .page-container h3,
html[data-theme="black"] .page-container h4,
html[data-theme="black"] .page-container h5,
html[data-theme="black"] .dash-summary-value,
html[data-theme="black"] .database-name,
html[data-theme="black"] .file-name,
html[data-theme="black"] .layer-side-item-name,
html[data-theme="black"] #node-summary-title,
html[data-theme="black"] .lbl { color: #e6ecf4 !important; }
/* Body text → readable light (no !important so accent chips/links keep colour) */
html[data-theme="black"] .page-container p,
html[data-theme="black"] .page-container td,
html[data-theme="black"] .page-container li,
html[data-theme="black"] .page-container strong,
html[data-theme="black"] .page-container b { color: #c3ccd9; }
/* Muted / secondary text → consistent muted */
html[data-theme="black"] .apidoc-tab,
html[data-theme="black"] .issues-tab,
html[data-theme="black"] .jira-tab,
html[data-theme="black"] .kb-tab,
html[data-theme="black"] .page-container label,
html[data-theme="black"] .page-container small,
html[data-theme="black"] #txn-page-info,
html[data-theme="black"] .database-dbname,
html[data-theme="black"] .database-host,
html[data-theme="black"] .database-type,
html[data-theme="black"] .data-node-table,
html[data-theme="black"] .document-card-desc,
html[data-theme="black"] .file-modified,
html[data-theme="black"] .file-size,
html[data-theme="black"] .file-type,
html[data-theme="black"] .flow-node-desc,
html[data-theme="black"] .card-subtitle,
html[data-theme="black"] .page-subtitle,
html[data-theme="black"] .apidoc-sub,
html[data-theme="black"] .integ-card-desc,
html[data-theme="black"] .role-card-desc,
html[data-theme="black"] .rule-card-desc,
html[data-theme="black"] .filter-label,
html[data-theme="black"] .integ-provider,
html[data-theme="black"] .role-level,
html[data-theme="black"] .api-key-masked,
html[data-theme="black"] .breadcrumb-item.clickable,
html[data-theme="black"] .form-text,
html[data-theme="black"] .text-muted,
html[data-theme="black"] #key-mode-description,
html[data-theme="black"] .tech-section-label { color: #8a97a8 !important; }

/* Last stragglers from DOM finder */
html[data-theme="black"] #pw-ai-status span { color: #c3ccd9 !important; }
html[data-theme="black"] .main-content p,
html[data-theme="black"] .page-container p { color: #c3ccd9 !important; }
html[data-theme="black"] .um-tab-content > div,
html[data-theme="black"] .concept-designs-section > div { background: #111a26 !important; border-color: #2a3b50 !important; color: #e6ecf4; }
html[data-theme="black"] .um-tab-content div { border-color: #2a3b50 !important; }
html[data-theme="black"] #key-mode-card span:not(.key-mode-badge):not(.key-mode-rate) { color: #c3ccd9 !important; }

/* ════════════════════════════════════════════════════════════════════════
   GLOBAL CONSISTENCY — applies to every workspace window
   ════════════════════════════════════════════════════════════════════════ */
/* Scrollbars everywhere → one dark style */
html[data-theme="black"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="black"] ::-webkit-scrollbar-track { background: #0d141e; }
html[data-theme="black"] ::-webkit-scrollbar-thumb { background: #2a3b50; border-radius: 6px; }
html[data-theme="black"] ::-webkit-scrollbar-thumb:hover { background: #3a4d66; }
html[data-theme="black"] ::-webkit-scrollbar-corner { background: #0d141e; }
html[data-theme="black"] * { scrollbar-color: #2a3b50 #0d141e; scrollbar-width: thin; }

/* Primary buttons everywhere → one brand fill */
html[data-theme="black"] .btn-primary,
html[data-theme="black"] .btn.btn-primary,
html[data-theme="black"] .import-preview-btn-confirm,
html[data-theme="black"] .mcpdoc-btn:not(.secondary) {
    background: #0d6fc0 !important;
    border-color: #0d6fc0 !important;
    color: #ffffff !important;
}
html[data-theme="black"] .btn-primary:hover,
html[data-theme="black"] .btn.btn-primary:hover,
html[data-theme="black"] .import-preview-btn-confirm:hover,
html[data-theme="black"] .mcpdoc-btn:not(.secondary):hover {
    background: #1a8fe3 !important;
    border-color: #1a8fe3 !important;
}

/* ════════════════ CREDITS pill — white text, brand-blue icon (matches other buttons) ════════════════ */
html[data-theme="black"] #topbar-credit-pill,
html[data-theme="black"] #topbar-credit-pill .topbar-credit-label,
html[data-theme="black"] #topbar-credit-pill .topbar-credit-amount,
html[data-theme="black"] #topbar-credit-amount,
html[data-theme="black"] .topbar-credit-pill .topbar-credit-label,
html[data-theme="black"] .topbar-credit-pill .topbar-credit-amount,
html[data-theme="black"] #popup-credit-pill .popup-credit-label,
html[data-theme="black"] #popup-credit-pill .popup-credit-amount,
html[data-theme="black"] #popup-credit-amount { color: #ffffff !important; }
/* Coin icon → same brand blue as every other button icon */
html[data-theme="black"] #topbar-credit-pill i,
html[data-theme="black"] .topbar-credit-pill i,
html[data-theme="black"] #popup-credit-pill i,
html[data-theme="black"] .popup-credit-pill i { color: #6fc0ff !important; }

/* ════════════════ CREDIT BALANCE POPUP (#credit-balance-popup, inline styles) ════════════════ */
html[data-theme="black"] #credit-balance-popup > div { background: #111a26 !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6) !important; }
html[data-theme="black"] #credit-balance-popup [style*="f1f5f9"] { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] #cbp-title,
html[data-theme="black"] #cbp-available { color: #e6ecf4 !important; }
html[data-theme="black"] #cbp-message { color: #c3ccd9 !important; }
html[data-theme="black"] #cbp-icon { background: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; }
html[data-theme="black"] #credit-balance-popup [style*="f8fafc"] { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] #cbp-required-box { background: rgba(248, 113, 113, 0.12) !important; border-color: rgba(248, 113, 113, 0.4) !important; }
html[data-theme="black"] #cbp-surcharge-box { background: rgba(251, 191, 36, 0.12) !important; border-color: rgba(251, 191, 36, 0.4) !important; color: #fcd34d !important; }
html[data-theme="black"] #cbp-close { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }

/* ════════════════ NEW PROJECT / build-mode modal (pw-mode-*, pw-gate-*, pw-cpe-*) ════════════════ */
html[data-theme="black"] .pw-mode-card { background: #111a26 !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6) !important; }
html[data-theme="black"] .pw-mode-title { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-mode-sub { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-mode-eyebrow { color: #6fc0ff !important; }
html[data-theme="black"] .pw-gate-input,
html[data-theme="black"] .pw-gate-textarea,
html[data-theme="black"] .pw-cpe-textarea { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .pw-gate-btn-secondary { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .pw-gate-btn-secondary:hover:not(:disabled) { background: #2a3b50 !important; border-color: #3a4d66 !important; }
html[data-theme="black"] .pw-cpe-attach { background: #16202e !important; border-color: #2a3b50 !important; color: #6fc0ff !important; }
html[data-theme="black"] .pw-cpe-attach:hover { background: #1d2c3e !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .pw-cpe-hint { color: #8a97a8 !important; }
html[data-theme="black"] .pw-create-attached-file { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
/* Project-create credit confirmation (pw-cc-*): the base styles use dark slate
   text (#334155) and force the icon to #000, both invisible on the dark card. */
html[data-theme="black"] .pw-cc-body { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-cc-body strong { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-cc-card .pw-gate-icon { color: #6fc0ff !important; }
html[data-theme="black"] #cbp-mode-chip { background: #1d2c3e !important; border: 1px solid #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] #credit-balance-popup [style*="64748b"] { color: #8a97a8 !important; }

/* ════════════════ PROJECT SELECTOR — action menu, panes, open-project modal ════════════════ */
/* ⋮ action menu (web11) */
html[data-theme="black"] .pw-project-action-menu { background: #111a26 !important; border-color: #2a3b50 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.55) !important; }
html[data-theme="black"] .pw-project-action-item { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-project-action-item i { color: #8a97a8 !important; }
html[data-theme="black"] .pw-project-action-item:hover { background: #1d2c3e !important; }
html[data-theme="black"] .pw-project-action-item.is-danger,
html[data-theme="black"] .pw-project-action-item.is-danger i { color: #f87171 !important; }
html[data-theme="black"] .pw-project-action-item.is-danger:hover { background: rgba(248,113,113,0.12) !important; }

/* API Keys / Users panes had a light scroll background (web13/web14) */
html[data-theme="black"] .pw-account-scroll,
html[data-theme="black"] .pw-users-mgmt-scroll { background: #0a1018 !important; }

/* Open-project / build-mode chooser inner sections (web12, pw-cs-*) */
html[data-theme="black"] .pw-cs-section { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-cs-section-head { background: #0d141e !important; border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .pw-cs-section-icon { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .pw-cs-section-status { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
html[data-theme="black"] .pw-cs-segmented { background: #16202e !important; }
html[data-theme="black"] .pw-cs-seg:hover { background: #1d2c3e !important; color: #6fc0ff !important; }
html[data-theme="black"] .pw-cs-seg:not(.is-active) .pw-cs-recommend { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
html[data-theme="black"] .pw-cs-mode-tile { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-cs-mode-tile:hover { background: #1d2c3e !important; border-color: #3a4d66 !important; }
html[data-theme="black"] .pw-cs-mode-tile.is-active { background: #0f4a75 !important; border-color: #6fc0ff !important; }

/* Account / Users panes inside the selector popup (pw-acc-*, web13/web14) */
html[data-theme="black"] .pw-acc-credit-big { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-acc-credit-label { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-acc-credit-sub,
html[data-theme="black"] .pw-acc-stat-lbl { color: #8a97a8 !important; }
html[data-theme="black"] .pw-acc-mode-label,
html[data-theme="black"] .pw-acc-mode-desc,
html[data-theme="black"] .pw-account-scroll strong { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-acc-mode-badge.mode-system { background: rgba(251,191,36,0.14) !important; border-color: rgba(251,191,36,0.4) !important; color: #fbbf24 !important; }
html[data-theme="black"] .pw-acc-mode-rate { background: #1d2c3e !important; color: #c3ccd9 !important; }
html[data-theme="black"] .pw-acc-status.is-active { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
html[data-theme="black"] .pw-acc-status.is-inactive { background: rgba(248,113,113,0.15) !important; color: #f87171 !important; }
html[data-theme="black"] .pw-acc-icon-btn { border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-users-mgmt-scroll h2,
html[data-theme="black"] .pw-users-mgmt-scroll h3 { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-users-mgmt-scroll p { color: #c3ccd9 !important; }

/* ════════════════ Rename / prompt modal (web18, pw-prompt-*) ════════════════ */
html[data-theme="black"] .pw-prompt-modal-dialog { background: #111a26 !important; border-color: #2a3b50 !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6) !important; }
html[data-theme="black"] .pw-prompt-modal-body,
html[data-theme="black"] .pw-prompt-modal-footer { background: #111a26 !important; }
html[data-theme="black"] .pw-prompt-label { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-prompt-input { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .pw-prompt-warning-text { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-prompt-btn-secondary { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .pw-prompt-btn-secondary:hover:not(:disabled) { background: #2a3b50 !important; }

/* ════════════════ Open-project modal pw-cs text (web20) ════════════════ */
html[data-theme="black"] .pw-cs-section-title,
html[data-theme="black"] .pw-cs-mode-tile-name { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-cs-seg { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-cs-subhead { color: #8a97a8 !important; }

/* ════════════════ Users table + Add/Edit User modal (web21-23, um-*) ════════════════ */
/* Row hover (web21) */
html[data-theme="black"] .um-table tbody tr:hover { background-color: #1d2c3e !important; }
html[data-theme="black"] .um-table th { background-color: #0d141e !important; }
html[data-theme="black"] .um-table td { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .um-tabs { border-bottom-color: #2a3b50 !important; }
/* Modal inputs */
html[data-theme="black"] .um-modal-split input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="black"] .um-modal-split textarea,
html[data-theme="black"] .um-modal-split select { background: #16202e !important; border: 1px solid #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .um-modal-section-title { border-bottom-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .um-modal-right { border-left-color: #2a3b50 !important; border-top-color: #2a3b50 !important; }
/* Permission + role + project panels */
html[data-theme="black"] .um-permission-card,
html[data-theme="black"] .um-permission-module-header,
html[data-theme="black"] .um-project-picker,
html[data-theme="black"] .um-role-picker { background-color: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .um-permission-item,
html[data-theme="black"] .um-project-row,
html[data-theme="black"] .um-role-card { background: #1d2c3e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .um-project-row.implicit { background: #161f2c !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .um-project-tag.none,
html[data-theme="black"] .um-role-count { background: #1d2c3e !important; color: #c3ccd9 !important; }
html[data-theme="black"] .um-role-module-name { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .um-checkbox-item:hover { background-color: #1d2c3e !important; }
html[data-theme="black"] #group-permissions-container { border-color: #2a3b50 !important; }

/* User modal + open-modal text/border stragglers */
html[data-theme="black"] .modal-header { border-color: #2a3b50 !important; }
html[data-theme="black"] .um-modal-col label,
html[data-theme="black"] .um-modal-col small,
html[data-theme="black"] .um-modal-split label,
html[data-theme="black"] .um-modal-split small { color: #c3ccd9 !important; }
html[data-theme="black"] .um-role-name,
html[data-theme="black"] .um-perm-name,
html[data-theme="black"] .um-project-name { color: #e6ecf4 !important; }
html[data-theme="black"] .um-role-description,
html[data-theme="black"] .um-perm-desc { color: #8a97a8 !important; }
html[data-theme="black"] .um-role-module-name { color: #6fc0ff !important; }
html[data-theme="black"] .um-project-tag.granted { background: rgba(111,192,255,0.2) !important; color: #d2eaff !important; }
html[data-theme="black"] .pw-cs-section-sub,
html[data-theme="black"] .pw-cs-mode-tile-desc { color: #8a97a8 !important; }
html[data-theme="black"] .pw-consolidated-footer { border-color: #2a3b50 !important; }

html[data-theme="black"] .um-modal-split span { color: #c3ccd9; }

/* ════════════════ web25-31: modals, containers, jira ════════════════ */
/* web25 Build UI Design — dashed picker buttons (inline styled) */
html[data-theme="black"] .modal-field button[style*="dashed"] { background: #16202e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
/* web26 New Task modal */
html[data-theme="black"] .selection-tile.agent-tile { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .selection-tile.agent-tile.selected { background: #0f4a75 !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .selection-tile.folder-tile.selected { background: rgba(52,211,153,0.16) !important; border-color: #34d399 !important; }
html[data-theme="black"] #file-tree-container,
html[data-theme="black"] .file-tree-container { background: #16202e !important; border-color: #2a3b50 !important; }
/* web27 New Issue attachment dropzone */
html[data-theme="black"] #issue-attachment-dropzone,
html[data-theme="black"] .issue-attachments-upload-area { background: #16202e !important; border-color: #2a3b50 !important; }
/* web28 Containers tech-stack bar + tabs */
html[data-theme="black"] #ct-stack-bar,
html[data-theme="black"] .ct-stack-bar { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .ct-tabs { border-color: #2a3b50 !important; }
/* web29/30/31 Jira integration */
html[data-theme="black"] .jira-connection-card,
html[data-theme="black"] .jira-mappings-grid { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] #jira-sync-direction,
html[data-theme="black"] #jira-issues-search,
html[data-theme="black"] #jira-issues-status-filter,
html[data-theme="black"] #jira-mapping-direction { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .jira-sync-stats > div { background: #16202e !important; border: 1px solid #2a3b50 !important; }

/* web25-31 text stragglers */
html[data-theme="black"] .selection-tile span { color: #e6ecf4 !important; }
html[data-theme="black"] .selection-tile div { color: #c3ccd9 !important; }
html[data-theme="black"] .issue-attachments-upload-area span { color: #8a97a8 !important; }
html[data-theme="black"] #jira-last-sync-time { color: #e6ecf4 !important; }
html[data-theme="black"] #jira-stat-total { color: #34d399 !important; }
html[data-theme="black"] #jira-stat-synced { color: #6fc0ff !important; }
html[data-theme="black"] #jira-stat-failed { color: #f87171 !important; }
html[data-theme="black"] .jira-sync-stats div[style*="166534"] { color: #34d399 !important; }
html[data-theme="black"] .jira-sync-stats div[style*="1e40af"] { color: #6fc0ff !important; }
html[data-theme="black"] .jira-sync-stats div[style*="991b1b"] { color: #f87171 !important; }
html[data-theme="black"] .form-helper { color: #8a97a8 !important; }
html[data-theme="black"] #jira-sync-status-container div[style*="background:#fff"],
html[data-theme="black"] #jira-sync-status-container div[style*="background: #fff"] { background: #111a26 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] #jira-sync-status-container label { color: #c3ccd9 !important; }

html[data-theme="black"] #file-tree-container, html[data-theme="black"] #file-tree-container div, html[data-theme="black"] .file-tree-container div { color: #c3ccd9 !important; }

/* ════════════════ Solution Designs Library (web32, .ct-* glass overlay) ════════════════ */
html[data-theme="black"] .ct-backdrop { background: #0a1018 !important; }
html[data-theme="black"] .ct-blob { display: none !important; }
html[data-theme="black"] .ct-header,
html[data-theme="black"] .ct-main-head,
html[data-theme="black"] .ct-preview-header,
html[data-theme="black"] .ct-preview-footer { background: #0d141e !important; border-color: #2a3b50 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-sidebar { background: #0d141e !important; border-right-color: #2a3b50 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-header h2,
html[data-theme="black"] .ct-card-name,
html[data-theme="black"] .ct-preview-title,
html[data-theme="black"] .ct-main-head strong,
html[data-theme="black"] .ct-preview-stat-num,
html[data-theme="black"] .ct-preview-item-name { color: #e6ecf4 !important; text-shadow: none !important; }
html[data-theme="black"] .ct-header p,
html[data-theme="black"] .ct-card-summary,
html[data-theme="black"] .ct-preview-summary,
html[data-theme="black"] .ct-main-head,
html[data-theme="black"] .ct-empty,
html[data-theme="black"] .ct-loading,
html[data-theme="black"] .ct-preview-requirements,
html[data-theme="black"] .ct-preview-item,
html[data-theme="black"] .ct-preview-loading { color: #c3ccd9 !important; }
html[data-theme="black"] .ct-cat-row,
html[data-theme="black"] .ct-sub-row,
html[data-theme="black"] .ct-cat-count,
html[data-theme="black"] .ct-tags-title,
html[data-theme="black"] .ct-preview-stat-label,
html[data-theme="black"] .ct-preview-more,
html[data-theme="black"] .ct-search-icon { color: #8a97a8 !important; }
html[data-theme="black"] .ct-close,
html[data-theme="black"] .ct-preview-close { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-search { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-search::placeholder { color: #6b7a8d !important; }
html[data-theme="black"] .ct-cat-row:hover,
html[data-theme="black"] .ct-sub-row:hover { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-cat-row.is-active { background: #0f4a75 !important; border-color: #6fc0ff !important; color: #d2eaff !important; }
html[data-theme="black"] .ct-cat-row.is-active .ct-cat-count { background: rgba(111,192,255,0.2) !important; color: #d2eaff !important; }
html[data-theme="black"] .ct-sub-row.is-active { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; }
html[data-theme="black"] .ct-cat-count { background: #1d2c3e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .ct-card { background: #111a26 !important; border-color: #2a3b50 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.5) !important; }
html[data-theme="black"] .ct-card:hover { border-color: #6fc0ff !important; }
html[data-theme="black"] .ct-card-tag,
html[data-theme="black"] .ct-preview-tag { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; border-color: rgba(111,192,255,0.35) !important; }
html[data-theme="black"] .ct-tag-chip { background: #1d2c3e !important; color: #c3ccd9 !important; border-color: #2a3b50 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-tags-section { border-top-color: #2a3b50 !important; }
html[data-theme="black"] .ct-preview-stat,
html[data-theme="black"] .ct-preview-item,
html[data-theme="black"] .ct-preview-requirements { background: #16202e !important; border-color: #2a3b50 !important; box-shadow: none !important; }
html[data-theme="black"] .ct-preview-stat-icon { background: #0f4a75 !important; color: #6fc0ff !important; box-shadow: none !important; }
html[data-theme="black"] .ct-preview-btn-secondary { background: #1d2c3e !important; color: #e6ecf4 !important; border-color: #2a3b50 !important; box-shadow: none !important; }
/* Primary "Import Solution Design" → flat dark button matching the others (no 3D gradient/shadow) */
html[data-theme="black"] .ct-preview-btn-primary { background: #1d2c3e !important; color: #e6ecf4 !important; border-color: #6fc0ff !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html[data-theme="black"] .ct-preview-btn-primary:hover:not(:disabled) { background: #233347 !important; box-shadow: none !important; transform: none !important; }
html[data-theme="black"] .ct-preview-btn-primary i { color: #e6ecf4 !important; }
html[data-theme="black"] .ct-preview-more { border-color: #2a3b50 !important; }
html[data-theme="black"] .ct-preview-backdrop { background: rgba(0,0,0,0.55) !important; }

/* Kill the white frosted-glass gradient on the panel + preview modal slabs */
html[data-theme="black"] .ct-panel { background: #0b121b !important; border-color: #2a3b50 !important; box-shadow: 10px 0 48px rgba(0,0,0,0.5) !important; color: #c3ccd9 !important; }
html[data-theme="black"] .ct-preview-modal { background: #0e1620 !important; border-color: #2a3b50 !important; box-shadow: 0 40px 90px rgba(0,0,0,0.6) !important; color: #e6ecf4 !important; }

/* Sidekick / AI chat header → dark with white text */
html[data-theme="black"] .ai-chat-header { background: #0d141e !important; color: #ffffff !important; border-bottom: 1px solid #2a3b50 !important; }
html[data-theme="black"] .ai-chat-header h3 { color: #ffffff !important; }
html[data-theme="black"] .ai-chat-header .ai-chat-close { color: #ffffff !important; }
html[data-theme="black"] .ai-chat-header::before { display: none !important; }

/* Concept canvas watermark logo → white in dark mode (src is JS-set, so use a filter) */
html[data-theme="black"] #branding-logo,
html[data-theme="black"] .branding-logo { filter: brightness(0) invert(1); }

/* ════════════════ Connect & Tools modal (web35, .mcpc-*) ════════════════ */
html[data-theme="black"] .mcpc-modal { background: #111a26 !important; color: #c3ccd9 !important; box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important; }
html[data-theme="black"] .mcpc-head,
html[data-theme="black"] .mcpc-foot { background: #0d141e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .mcpc-head .mcpc-x { color: #c3ccd9 !important; }
html[data-theme="black"] .mcpc-side { background: #0d141e !important; border-right-color: #2a3b50 !important; }
html[data-theme="black"] .mcpc-prov { color: #c3ccd9 !important; }
html[data-theme="black"] .mcpc-prov.active { background: #0f4a75 !important; color: #d2eaff !important; }
html[data-theme="black"] .mcpc-prov .dot { background: #2a3b50 !important; }
html[data-theme="black"] .mcpc-title { color: #e6ecf4 !important; }
html[data-theme="black"] .mcpc-desc { color: #8a97a8 !important; }
html[data-theme="black"] .mcpc-btn.ghost { background: #1d2c3e !important; color: #e6ecf4 !important; }
html[data-theme="black"] .mcpc-btn.danger { background: rgba(248,113,113,0.14) !important; color: #f87171 !important; }
html[data-theme="black"] .mcpc-err { background: rgba(248,113,113,0.12) !important; border-color: rgba(248,113,113,0.4) !important; color: #f87171 !important; }
html[data-theme="black"] .mcpc-ok,
html[data-theme="black"] .mcpc-aibar { background: rgba(52,211,153,0.12) !important; border-color: rgba(52,211,153,0.4) !important; color: #34d399 !important; }
html[data-theme="black"] .mcpc-mode { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .mcpc-mode .mi { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .mcpc-mode.on { background: rgba(52,211,153,0.12) !important; border-color: #34d399 !important; }
html[data-theme="black"] .mcpc-item .ii { background: #1d2c3e !important; color: #c3ccd9 !important; }
html[data-theme="black"] .mcpc-toolcall { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #8a97a8 !important; }

html[data-theme="black"] .mcpc-modal h3, html[data-theme="black"] .mcpc-head h3 { color: #e6ecf4 !important; }

/* ════════════════ AI suggestion / build-mode chooser (web39, pw-bmc-*) ════════════════ */
html[data-theme="black"] .pw-mode-close { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-mode-close:hover { background: #1d2c3e !important; color: #e6ecf4 !important; }
html[data-theme="black"] .pw-bmc-detected { background: rgba(111,192,255,0.10) !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-bmc-detected-reason { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-bmc-detected-hint { color: #8a97a8 !important; }
html[data-theme="black"] .pw-bmc-tile { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-bmc-tile:hover { border-color: #3a4d66 !important; }
html[data-theme="black"] .pw-bmc-tile.is-selected { background: #0f4a75 !important; border-color: #6fc0ff !important; box-shadow: 0 0 0 3px rgba(111,192,255,.25) !important; }
html[data-theme="black"] .pw-bmc-tile-icon { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .pw-bmc-tile.is-selected .pw-bmc-tile-icon { background: #6fc0ff !important; color: #08111c !important; }
html[data-theme="black"] .pw-bmc-tile-name { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-bmc-tile-desc { color: #c3ccd9 !important; }
html[data-theme="black"] .pw-bmc-tile-check { color: #2a3b50 !important; }
html[data-theme="black"] .pw-bmc-tile.is-selected .pw-bmc-tile-check { color: #6fc0ff !important; }
html[data-theme="black"] .pw-bmc-recommend { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }

/* ════════════════ web40: loaders use brand blue (not green) ════════════════ */
html[data-theme="black"] .build-loading-spinner { border-top-color: #6fc0ff !important; }

/* ════════════════ web41: Requirements Analyzer — full dark ════════════════ */
html[data-theme="black"] .req-analyzer-modal-header { background: #0d141e !important; border-bottom: 1px solid #2a3b50 !important; }
html[data-theme="black"] .req-analyzer-header-icon { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .req-analyzer-modal-title { color: #ffffff !important; }
html[data-theme="black"] .req-analyzer-modal-subtitle { color: #c3ccd9 !important; }
html[data-theme="black"] .req-analyzer-text { color: #c3ccd9 !important; }
html[data-theme="black"] .req-analyzer-subtitle,
html[data-theme="black"] .req-analyzer-field label,
html[data-theme="black"] .question-item h5 { color: #e6ecf4 !important; }
html[data-theme="black"] .req-analyzer-info-text,
html[data-theme="black"] .req-analyzer-subtitle-hint { color: #8a97a8 !important; }
html[data-theme="black"] .req-analyzer-info-footer { background: #16202e !important; border-color: #2a3b50 !important; }
/* select-mode badges */
html[data-theme="black"] .req-select-mode-badge.single { background: rgba(111,192,255,0.16) !important; color: #6fc0ff !important; }
html[data-theme="black"] .req-select-mode-badge.multi { background: rgba(52,211,153,0.15) !important; color: #34d399 !important; }
/* option tiles */
html[data-theme="black"] .option-tile { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .option-tile:hover { background: #1d2c3e !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .option-tile-icon { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .option-tile-label { color: #e6ecf4 !important; }
html[data-theme="black"] .option-tile-check { color: #6fc0ff !important; }
html[data-theme="black"] .option-tile.selected { background: #0f4a75 !important; border-color: #6fc0ff !important; }
html[data-theme="black"] .option-tile.selected .option-tile-icon { background: #6fc0ff !important; color: #08111c !important; }
/* add-new-item button (source uses !important) */
html[data-theme="black"] .req-tile-add-btn { background: #1d2c3e !important; border-color: #6fc0ff !important; color: #6fc0ff !important; }
html[data-theme="black"] .req-tile-add-btn:hover { background: #2a3b50 !important; }
/* free-text question input */
html[data-theme="black"] .question-input { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
/* finalization (Approve & Build) section */
html[data-theme="black"] .req-analyzer-success-icon { background: rgba(52,211,153,0.16) !important; color: #34d399 !important; }
html[data-theme="black"] .req-analyzer-success-title { color: #e6ecf4 !important; }
html[data-theme="black"] .req-analyzer-success-subtitle { color: #c3ccd9 !important; }

/* ════════════════ web42: "Add new item" dialog (req-add-item-*) ════════════════ */
html[data-theme="black"] .req-add-item-dialog { background: #111a26 !important; border: 1px solid #2a3b50 !important; box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important; }
html[data-theme="black"] .req-add-item-icon { background: #0f4a75 !important; color: #6fc0ff !important; }
html[data-theme="black"] .req-add-item-head h4 { color: #e6ecf4 !important; }
html[data-theme="black"] .req-add-item-sub { color: #8a97a8 !important; }
html[data-theme="black"] .req-add-item-input { background: #16202e !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }
html[data-theme="black"] .req-add-item-input:focus { border-color: #6fc0ff !important; }
html[data-theme="black"] .req-add-item-input::placeholder { color: #6b7a8d !important; }
html[data-theme="black"] .req-add-item-cancel { background: #1d2c3e !important; color: #e6ecf4 !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .req-add-item-cancel:hover { background: #2a3b50 !important; }
html[data-theme="black"] .req-add-item-confirm { background: #0d6fc0 !important; color: #ffffff !important; }
html[data-theme="black"] .req-add-item-confirm:hover { background: #1a8fe3 !important; }

/* ════════════════ web43: analyzer review — green → our standard blue ════════════════ */
html[data-theme="black"] .req-analyzer-btn-success { background: #0d6fc0 !important; color: #ffffff !important; }
html[data-theme="black"] .req-analyzer-btn-success:hover { background: #1a8fe3 !important; }
/* checkboxes (block master + per-item + ai-decide) → brand accent */
html[data-theme="black"] #requirements-analyzer-modal input[type="checkbox"] { accent-color: #0d6fc0 !important; }
/* accent "lines" (left borders) → removed */
html[data-theme="black"] .req-analyzer-final-req,
html[data-theme="black"] .req-analyzer-current-req { border-left: none !important; }
/* success check icon → brand (not green) */
html[data-theme="black"] .req-analyzer-success-icon { background: #0f4a75 !important; color: #6fc0ff !important; }

/* ════════════════ web44: "Open project" mode-chooser tiles (pw-mode-option) ════════════════ */
html[data-theme="black"] .pw-mode-option { background: #16202e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .pw-mode-name { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-mode-desc { color: #8a97a8 !important; }
html[data-theme="black"] .pw-mode-recent { border-color: #6fc0ff !important; }
html[data-theme="black"] .pw-mode-recent::after { background: #1d2c3e !important; color: #8a97a8 !important; }
html[data-theme="black"] .pw-mode-footer { color: #8a97a8 !important; border-top-color: #2a3b50 !important; }

/* ════════════════ Build-tool chooser (pw-btc-*) ════════════════ */
html[data-theme="black"] .pw-btc-pill { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }
html[data-theme="black"] .pw-btc-pill:hover { border-color: #6fc0ff !important; color: #6fc0ff !important; background: #16202e !important; }
html[data-theme="black"] .pw-btc-more { color: #8a97a8 !important; }
html[data-theme="black"] .pw-btc-back { color: #6fc0ff !important; }
html[data-theme="black"] .pw-btc-step-body b { color: #e6ecf4 !important; }
html[data-theme="black"] .pw-btc-step-body p { color: #8a97a8 !important; }
html[data-theme="black"] .pw-btc-num { background: #1d2c3e !important; color: #6fc0ff !important; }
html[data-theme="black"] .pw-btc-skip { color: #8a97a8 !important; }
html[data-theme="black"] .pw-btc-brief { background: #0d1520 !important; border-color: #2a3b50 !important; color: #e6ecf4 !important; }

/* Dark-theme sidebar logo sizing (white logo) */
html[data-theme="black"] .sidebar-header .logo img {
    height: 26px !important;
    margin-left: 12px !important;
    margin-top: 3px !important;
    margin-bottom: 2px !important;
}

/* ════════════════ Technical Diagrams grid tiles (Screenshot_3) ════════════════ */
html[data-theme="black"] .tech-flow-tile .tile-icon { background: rgba(111,192,255,0.14) !important; color: #6fc0ff !important; }
html[data-theme="black"] .req-status.active { background: rgba(52,211,153,0.16) !important; color: #34d399 !important; border-color: rgba(52,211,153,0.35) !important; }
html[data-theme="black"] .req-status.inactive { background: rgba(248,113,113,0.14) !important; color: #f87171 !important; border-color: rgba(248,113,113,0.35) !important; }
html[data-theme="black"] .req-btn { background: #1d2c3e !important; border-color: #2a3b50 !important; color: #c3ccd9 !important; }

/* ════════════════ Business Flows canvas node cards — elevated so they stand out on the deep canvas (Screenshot_6) ════════════════ */
html[data-theme="black"] .cy-flow-node { background: #1d2c3e !important; border-color: #2a3b50 !important; }
html[data-theme="black"] .cy-flow-node:hover { border-color: #6fc0ff !important; }

/* Layer side-panel child labels (#475569 → light) */
html[data-theme="black"] .layer-side-child-label { color: #e6ecf4 !important; }

/* Concept-design card title lightbulb (inline #f59e0b yellow) → dark-mode accent */
html[data-theme="black"] .concept-design-title .fa-lightbulb { color: #6fc0ff !important; }

/* "Create new pages" button (inline light blue) → dark surface + accent */
html[data-theme="black"] button[onclick^="openMissingPagesModal"] {
    background: #16202e !important;
    color: #6fc0ff !important;
    border: 1px solid #2a3b50 !important;
}
html[data-theme="black"] button[onclick^="openMissingPagesModal"]:hover {
    background: #1d2c3e !important;
    border-color: #6fc0ff !important;
}
html[data-theme="black"] button[onclick^="openMissingPagesModal"] span {
    background: #0d6fc0 !important;
    color: #fff !important;
}

/* ════════════════ "Create New Pages" modal (#missing-pages-modal, Screenshot_4) ════════════════ */
/* Rows are JS-generated with light inline styles; dialog is themed but the page
   titles render dark-on-dark and the slug pills / select-all bar stay light. */
html[data-theme="black"] #missing-pages-modal #missing-pages-modal-intro { color: #c3ccd9 !important; }
/* Select-all bar + monospace slug pills (inline #f1f5f9) → dark surface */
html[data-theme="black"] #missing-pages-modal [style*="#f1f5f9"] { background: #16202e !important; }
html[data-theme="black"] #missing-pages-modal [style*="#f1f5f9"] label,
html[data-theme="black"] #missing-pages-modal #missing-pages-counter { color: #c3ccd9 !important; }
html[data-theme="black"] #missing-pages-list { border-color: #2a3b50 !important; }
html[data-theme="black"] #missing-pages-list label:hover { background: #1d2c3e !important; }
html[data-theme="black"] #missing-pages-list label > div > div:first-child { color: #e6ecf4 !important; }
html[data-theme="black"] #missing-pages-list label > div > div:nth-child(2) { color: #8a97a8 !important; }
html[data-theme="black"] #missing-pages-list span[style*="monospace"] { color: #c3ccd9 !important; }
/* Optional-instructions label + textarea */
html[data-theme="black"] #missing-pages-modal .modal-field label { color: #c3ccd9 !important; }
html[data-theme="black"] #missing-pages-instructions {
    background: #16202e !important;
    border-color: #2a3b50 !important;
    color: #e6ecf4 !important;
}

/* ════════════════ UI design preview device switcher (PC / Tablet / Mobile) ════════════════ */
/* Light track + white active pill don't fit the dark popup; re-skin to surfaces. */
html[data-theme="black"] .design-popup-device-switcher {
    background: #16202e !important;
    border: 1px solid #2a3b50 !important;
}
html[data-theme="black"] .design-popup-device-switcher .device-btn {
    background: transparent !important;
    color: #8a97a8 !important;
}
html[data-theme="black"] .design-popup-device-switcher .device-btn:hover {
    background: #1d2c3e !important;
    color: #e6ecf4 !important;
}
html[data-theme="black"] .design-popup-device-switcher .device-btn.active {
    background: #0f4a75 !important;
    color: #6fc0ff !important;
    box-shadow: none !important;
}

/* ════════════════ "Code imported" offer card — accents → theme #6fc0ff (Screenshot_2) ════════════════ */
/* The icon, feature-chip icons and the "Analyze my codebase" button hardcode an
   indigo→blue gradient (#6366f1 / #2563eb). Recolour to the dark-theme accent. */
html[data-theme="black"] .cb-offer-icon {
    background: #6fc0ff !important;
    color: #08111c !important;
}
html[data-theme="black"] .cb-offer-features i { color: #6fc0ff !important; }
html[data-theme="black"] .cb-offer-go {
    background: #6fc0ff !important;
    color: #08111c !important;
}
html[data-theme="black"] .cb-offer-go:hover { filter: brightness(1.07) !important; }

/* ════════════════ .modal-content modals (Source Code "Upload Zip", Version Control) ════════════════ */
/* These pages define .modal-content with a hardcoded white background in
   version-control.css; theme-black never re-skinned it, so the whole dialog
   rendered white in dark theme. Re-skin the container + its light bits. */
html[data-theme="black"] .modal-content {
    background-color: #111a26 !important;
    border: 1px solid #2a3b50 !important;
    color: #e6ecf4 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
html[data-theme="black"] .modal-content .modal-header { border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .modal-content .modal-footer { background: #0d141e !important; border-top-color: #2a3b50 !important; }
html[data-theme="black"] .modal-content .modal-title { color: #e6ecf4 !important; }
html[data-theme="black"] .modal-content .modal-close { color: #8a97a8 !important; }
html[data-theme="black"] .modal-content .modal-close:hover { color: #e6ecf4 !important; }
html[data-theme="black"] .modal-content .form-label { color: #c3ccd9 !important; }
html[data-theme="black"] .modal-content .form-helper { color: #8a97a8 !important; }
html[data-theme="black"] .modal-content .modal-body p { color: #c3ccd9 !important; }
html[data-theme="black"] .modal-content .modal-body strong { color: #e6ecf4 !important; }

/* Upload Zip dropzone + its inline-styled text (Screenshot_3) */
html[data-theme="black"] #zip-upload-dropzone {
    background: #0f1722 !important;
    border-color: #324a64 !important;
}
html[data-theme="black"] #zip-upload-text,
html[data-theme="black"] #zip-upload-text strong,
html[data-theme="black"] #zip-file-name { color: #e6ecf4 !important; }
html[data-theme="black"] #zip-upload-icon { color: #6b7a8d !important; }
html[data-theme="black"] #zip-file-size { color: #8a97a8 !important; }

/* Commit-history / detail tables + result panes inside .modal-content */
html[data-theme="black"] .modal-content #history-detail-info { background: #0d141e !important; border-bottom-color: #2a3b50 !important; }
html[data-theme="black"] .modal-content .vcs-result-summary { color: #e6ecf4 !important; }