/* ==========================================================================
   GLOSS PANELS — DARK MODE
   Apple-style gloss-black treatment for every "gloss workspace" panel
   (builders, libraries, modals, music studio, etc.) when dark mode is on.
   Scoped to html:not(.light-mode) so light mode is untouched. Deliberately
   does NOT touch: sidebar, profile settings, app settings, theme/wallpaper
   pickers — those already have their own dark-mode treatment.
   ========================================================================== */

/* Shared semantic surface contract. Web Architect is the dark reference;
   component styles consume these names instead of carrying their own navy,
   white-card or near-black palettes. Light values intentionally match the
   existing light UI and are only here so shared components can stay tokenised. */
html:not(.light-mode) {
    --surface-base: #18181b;
    --surface-panel: #202023;
    --surface-raised: #28282c;
    --surface-card: #2b2b2f;
    --surface-input: #2c2c30;
    --surface-hover: #343439;
    --surface-selected: color-mix(in srgb, var(--theme-panel-color, var(--panel-accent, #4a90e2)) 16%, #28282c);
    --border-subtle: rgba(255,255,255,.10);
    --border-default: rgba(255,255,255,.16);
    --border-strong: rgba(255,255,255,.25);
    --text-primary: #f7f7f8;
    --text-secondary: #b7b7c0;
    --text-muted: #96969f;
    --text-disabled: #73737c;
    --accent: var(--theme-panel-color, var(--panel-accent, #4a90e2));
    --accent-hover: color-mix(in srgb, var(--accent) 84%, white);
    --accent-selected: color-mix(in srgb, var(--accent) 24%, var(--surface-raised));
    --text-on-accent: #ffffff;
    --button-primary-bg: var(--accent);
    --button-primary-text: var(--text-on-accent);
    --button-secondary-bg: var(--surface-raised);
    --button-secondary-text: var(--text-primary);

    /* One neutral graphite platform beneath every dark accent theme. Legacy
       application chrome still consumes these older variable names, so map
       them onto the same Studio palette used by Code Lab and Video Studio.
       Accent presets may decorate controls, but no longer recolour surfaces. */
    --background-color: var(--surface-base);
    --wallpaper-fallback-bg: var(--surface-base);
    --sidebar-bg: var(--surface-panel);
    --header-bg: var(--surface-panel);
    --input-area-bg: var(--surface-panel);
    --settings-modal-bg: var(--surface-panel);
    --ai-message-bg: var(--surface-card);
    --input-bg: var(--surface-input);
    --border-color: var(--border-default);
    --text-color: var(--text-primary);
    --background-color-transparent: rgba(32,32,35,.82);
    --border-color-transparent: var(--border-subtle);
    --theme-wallpaper-overlay: linear-gradient(rgba(24,24,27,.22),rgba(24,24,27,.22));

    /* Role tokens for control chrome. Every dark preset defaults to its own
       accent; the two black presets override these (Serenity to monochrome). */
    --control-icon-ink: var(--accent);
    --control-accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
    --dgp-ink: var(--text-primary);
    --dgp-ink-strong: var(--text-primary);
    --dgp-muted: var(--text-secondary);
    --dgp-line: var(--border-default);
    /* Single accent for every dark-mode panel, derived from the active theme
       preset instead of an individual tool's decorative colour. */
    --dgp-accent: var(--accent);
    /* Text on selected/tinted controls must stay readable even when a custom
       accent is very dark (notably Absolute Serenity). */
    --dgp-accent-text: var(--text-primary);
    /* Soft charcoal grey, not pure black — pure #000 panels read as harsh,
       eye-straining slabs with no depth. Shared by suite picker, Notepad
       TTS, modals and independent tools. */
    --dgp-surface: var(--surface-panel);
    --dgp-shadow: 0 30px 80px rgba(0,0,0,.7), 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
    /* Cards bumped from near-invisible (.05/.09) to clearly legible against
       a black backdrop — this is what made the model dropdown read as flat,
       uncarded text instead of distinct rows. */
    --dgp-card: var(--surface-card);
    --dgp-card-hover: var(--surface-hover);
    --dgp-input: var(--surface-input);
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) {
    --surface-base: #f4f5f7;
    --surface-panel: #ffffff;
    --surface-raised: #f7f7f8;
    --surface-card: #ffffff;
    --surface-input: #ffffff;
    --surface-hover: #eceef1;
    --surface-selected: #eee9fb;
    --border-subtle: #e2e4e8;
    --border-default: #d8dadd;
    --border-strong: #c9ccd1;
    --text-primary: #090909;
    --text-secondary: #555a61;
    --text-muted: #6b6f75;
    --text-disabled: #999da3;
    --accent: #6022c8;
    --accent-hover: #4e1ba7;
    --accent-selected: #eee9fb;
    --text-on-accent: #ffffff;
    --button-primary-bg: var(--accent);
    --button-primary-text: #ffffff;
    --button-secondary-bg: #ffffff;
    --button-secondary-text: #090909;
}

/* Two presets own their surfaces; every other dark preset keeps the graphite
   palette above and owns its accent only.

   Absolute Serenity and Default Dark are both true black and share this block,
   so they can never drift apart. They differ purely in accent, set below:
   Serenity stays monochrome — nothing but the user's own media carries colour —
   while Default Dark puts the AskSary purple on the same black. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) {
    --surface-base: #000000;
    --surface-panel: #000000;
    --surface-raised: #0b0b0b;
    --surface-card: #151515;
    --surface-input: #111111;
    --surface-hover: #1b1b1b;
    --border-subtle: #292929;
    --border-default: #3a3a3a;
    --border-strong: #4a4a4a;
    --text-primary: #f5f5f5;
    --text-secondary: #b0b0b8;
    --text-muted: #92929b;
    --text-disabled: #686870;
    --background-color: #000000;
    --wallpaper-fallback-bg: #000000;
    --sidebar-bg: #000000;
    --header-bg: #000000;
    --input-area-bg: #000000;
    --settings-modal-bg: #000000;
    --ai-message-bg: #111111;
    --input-bg: #111111;
    --border-color: #292929;
    --text-color: #f5f5f5;
    --background-color-transparent: rgba(0,0,0,.88);
    --dgp-surface: var(--surface-panel);
    --dgp-card: var(--surface-card);
    --dgp-card-hover: var(--surface-hover);
    --dgp-input: var(--surface-input);
    --dgp-line: var(--border-default);
    --dgp-accent: var(--accent);
    --dgp-accent-text: var(--text-primary);
}

/* Absolute Serenity keeps monochrome interface chrome. Wallpaper colour is a
   separate user preference, so the selected background remains full-colour
   unless `html.wallpaper-monochrome` is explicitly enabled. */
html.theme-stealth:not(.light-mode) {
    --accent: #707078;
    --accent-hover: #85858d;
    --accent-selected: #202024;
    --surface-selected: #1b1b1b;
    /* Control icons stay bright white rather than dropping to the grey accent —
       monochrome, but still legible. Decorative edges lose their tint entirely. */
    --control-icon-ink: #f5f5f5;
    --control-accent-line: var(--border-default);
    --theme-wallpaper-overlay: linear-gradient(rgba(0,0,0,.48),rgba(0,0,0,.48));
}

/* Default Dark: same black panels, AskSary purple accent. The accent flows from
   THEME_PANEL_COLORS['default-black'] like every other preset, so changing the
   preset colour in script.js is enough to move it. */
html.theme-accent-default-black:not(.light-mode) {
    --accent: var(--theme-panel-color, #7c3aed);
    /* The same two roles carry the purple here, so one set of component rules
       serves both black presets without either being hard-coded. */
    --control-icon-ink: var(--accent);
    --control-accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-hover: color-mix(in srgb, var(--accent) 84%, white);
    --accent-selected: color-mix(in srgb, var(--accent) 24%, #000000);
    --surface-selected: color-mix(in srgb, var(--accent) 18%, #000000);
}

/* Surfaces defined outside the semantic contract that carry a navy tint. The
   tint reads as neutral over the graphite themes but leaves a blue cast on the
   two black ones, so it is re-mixed to black here rather than edited at each
   source (the same declarations still serve every other dark preset).

   The --ui-icon-* overrides are the high-leverage half: every icon button in
   the app draws its surface from them, so one override blacks out close
   buttons, toolbar icons and pill controls everywhere at once. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) {
    --ui-icon-surface: rgba(0,0,0,.82);
    --ui-icon-surface-hover: rgba(27,27,27,.96);
    --ui-icon-border: var(--border-default);
    --ui-icon-border-hover: var(--border-strong);
}

/* Workspace controls take the themed icon ink. icon-system.css paints every
   icon button with `color: var(--ui-icon-ink)` at a specificity these rules
   cannot beat, so the variable is redefined on the controls themselves instead
   of fighting the cascade — the same trick as the surface override above.
   Scoped to the workspace controls on purpose: close and utility icons stay
   neutral white rather than every X in the app turning purple. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) :is(
    .hamburger,
    .header-right .header-icon-btn,
    #open-tools-btn,
    #workspace-toolbar-customise,
    #workspace-suite-switch-wrap,
    .workspace-tool
) {
    --ui-icon-ink: var(--control-icon-ink);
    --ui-icon-ink-muted: var(--control-icon-ink);
}

/* Tool pickers paint each tool's identity colour inline (style="color:#b026ff"),
   which is why the Command Centre still showed orange, green and sky icons in
   an otherwise monochrome Serenity. In the two black presets the theme owns
   every accent, so those hues are replaced: white in Serenity, purple in
   the active preset's accent. Beating an inline style needs !important. These lists are
   chrome — no user media renders inside them — so nothing here touches the
   colour of an actual image, thumbnail or generated asset. */
html:not(.light-mode) :is(
    #cmd-overlay, #suite-panel-overlay
) i {
    color: var(--control-icon-ink) !important;
}
/* …except where the glyph sits on a chip already filled with the accent. Those
   need the on-accent ink or the icon disappears into its own background — which
   is exactly what happened to the tool tiles in Default Dark. */
html:not(.light-mode) :is(
    #cmd-overlay, #suite-panel-overlay
) :is(.sp-tool-icon, .sp-suite-btn-ico, .cmd-tool-icon) i {
    color: var(--text-on-accent, #ffffff) !important;
}

/* Glass panels: keep the blur, drop the blue. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) :is(
    .sidebar,
    .universal-sheet,
    #folder-manager-overlay .folder-modal,
    #notepad-overlay .notepad-modal
) {
    background: rgba(0,0,0,.78) !important;
    border-color: var(--border-subtle) !important;
}

/* Independent tools keep their individual colour identities in light mode.
   In dark mode the active theme owns all decorative panel accents. */
html:not(.light-mode) body > [id^="ind-tool-"][id$="-overlay"] {
  --tool-a:var(--accent)!important;
  --tool-b:var(--accent-hover)!important;
}

/* Connected-source pickers are constructed with inline legacy navy colours.
   Keep their light-mode rendering untouched and normalize only dark chrome. */
html:not(.light-mode) :is(#gd-modal-box,#notion-modal-box) {
  background:var(--surface-panel)!important;
  border-color:var(--border-default)!important;
  color:var(--text-primary)!important;
}
html:not(.light-mode) :is(#gd-modal-box,#notion-modal-box) > div {
  border-color:var(--border-default)!important;
}
html:not(.light-mode) :is(#gd-search-input,#notion-search-input) {
  background:var(--surface-input)!important;
  border-color:var(--border-default)!important;
  color:var(--text-primary)!important;
  -webkit-text-fill-color:var(--text-primary)!important;
  caret-color:var(--text-primary)!important;
}
html:not(.light-mode) :is(#gd-action-panel,#notion-action-panel,#gd-loading-overlay,#notion-loading-overlay) {
  background:color-mix(in srgb,var(--surface-base) 88%,transparent)!important;
}
html:not(.light-mode) :is(#gd-action-panel,#notion-action-panel) > div {
  background:var(--surface-raised)!important;
  border-color:var(--border-default)!important;
  color:var(--text-primary)!important;
}
html:not(.light-mode) :is(#gd-modal-box,#notion-modal-box) :is(h3,[style*="color:#e0e0e0"],[style*="color: #e0e0e0"]) {
  color:var(--text-primary)!important;
}
html:not(.light-mode) :is(#gd-modal-box,#notion-modal-box) :is([style*="color:#555"],[style*="color:#666"],[style*="color:#777"],[style*="color:#888"]) {
  color:var(--text-secondary)!important;
}

/* ---- Backdrop scrim behind every panel — soft light grey/white, not black.
   Breaks up the screen so the grey panel itself has contrast to read
   against, instead of a dark panel disappearing into a dark backdrop.
   Covers the generic confirm/alert modal, the legacy CV-builder wizard
   (both ride #global-modal-overlay), Notepad TTS, and related panels. ---- */
html:not(.light-mode) #global-modal-overlay { background: rgba(0,0,0,.05) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
html:not(.light-mode) #notepad-tts-overlay { background: rgba(0,0,0,.05) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }

/* ---- Core modal shell (custom-modal / img-flow / cmd-card / all gloss-workspace panels) ---- */
html:not(.light-mode) :is(
    .custom-modal, #img-flow-box, .cmd-card,
    .prompt-modal, .folder-modal, .speech-modal, .universal-sheet,
    .tracker-modal, .dg-modal, .visual-modal, .modeler-modal,
    .podcast-card, .voice-card, .notepad-modal, #notepad-tts-card,
    .ntts-translate-box, .org-modal, #ob-modal, #tw-modal,
    .confirm-modal, .agent-modal, .voice-overlay-content, .geek-panel
),
html:not(.light-mode) #agents-overlay > div {
    color: var(--dgp-ink) !important;
    background: var(--dgp-surface) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: var(--dgp-shadow) !important;
}

html:not(.light-mode) :is(
    .custom-modal, #img-flow-box, .cmd-card,
    .prompt-modal, .folder-modal, .speech-modal, .universal-sheet,
    .tracker-modal, .dg-modal, .visual-modal, .modeler-modal,
    .podcast-card, .voice-card, .notepad-modal, #notepad-tts-card,
    .ntts-translate-box, .org-modal, #ob-modal, #tw-modal,
    .confirm-modal, .agent-modal, .voice-overlay-content, .geek-panel
) :is(h1,h2,h3,h4,h5,strong,.title,#modal-title,.modal-title) {
    color: var(--dgp-ink-strong) !important;
}

html:not(.light-mode) :is(
    .custom-modal, #img-flow-box, .cmd-card,
    .prompt-modal, .folder-modal, .speech-modal, .universal-sheet,
    .tracker-modal, .dg-modal, .visual-modal, .modeler-modal,
    .podcast-card, .voice-card, .notepad-modal, #notepad-tts-card,
    .ntts-translate-box, .org-modal, #ob-modal, #tw-modal,
    .confirm-modal, .agent-modal, .voice-overlay-content, .geek-panel
) :is(p,small,label,.subtitle,.description,.meta,#modal-message) {
    color: var(--dgp-muted) !important;
}

/* ---- Icon wrapper on the generic confirm/alert modal ---- */
html:not(.light-mode) #global-modal-overlay .modal-icon-wrapper {
    color: var(--dgp-accent) !important;
    background: linear-gradient(145deg, rgba(var(--panel-accent-rgb),.18), rgba(255,255,255,.04)) !important;
    border: 1px solid rgba(var(--panel-accent-rgb),.28) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ---- Headers / toolbars ---- */
html:not(.light-mode) :is(
    .prompt-header, .folder-header, .speech-header, .us-header,
    .visual-header, .modeler-header, .dg-header, .org-modal-header,
    .notepad-header, #ntts-header, .cmd-header, .cmd-tabs,
    .visual-tabs, .dg-toolbar, .dg-filter-bar, .org-tabs
) {
    background: rgba(255,255,255,.04) !important;
    border-color: var(--dgp-line) !important;
}

html:not(.light-mode) :is(.prompt-header, .folder-header, .speech-header, .us-header, .visual-header, .modeler-header, .dg-header, .org-modal-header, .notepad-header, #ntts-header) h2,
html:not(.light-mode) :is(.cmd-header h3, .ntts-translate-box h4) {
    color: var(--dgp-ink-strong) !important;
}

/* ---- Sidebars / content floors inside panels ---- */
html:not(.light-mode) :is(
    .prompt-sidebar, .folder-sidebar, .prompt-grid-container,
    .folder-content-area, .visual-grid, .us-content, .us-footer
) {
    background: rgba(255,255,255,.03) !important;
    border-color: var(--dgp-line) !important;
}

/* ---- Close buttons ---- */
html:not(.light-mode) :is(
    .prompt-close-btn, .speech-close-btn, .us-close-btn, .dg-close,
    .visual-close, .modeler-close, .notepad-close-btn, .org-modal-close,
    #close-tracker, #close-agents-btn, #img-flow-close, #notepad-tts-close, #close-cmd-btn
) {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) :is(
    .prompt-close-btn, .speech-close-btn, .us-close-btn, .dg-close,
    .visual-close, .modeler-close, .notepad-close-btn, .org-modal-close,
    #close-tracker, #close-agents-btn, #img-flow-close
):hover {
    color: var(--dgp-ink-strong) !important;
    background: rgba(255,255,255,.12) !important;
}

/* ---- Cards / chips / list rows (the "playdoh" risk area — kept flat & bordered, no glow blobs) ---- */
html:not(.light-mode) :is(
    .ifh-opt, .ifh-style, .ifh-chip, .cmd-item, .prompt-card,
    .folder-chat-card, .speech-lang-btn, .us-category, .us-btn, .us-persona,
    .agent-card, .voice-option, .dg-card, .eq-card, .ntts-voice-pill,
    .ntts-lang-btn, .org-member-row, .visual-item.doc-item, .music-lyrics-card,
    .us-grid, .music-studio-card
) {
    color: var(--dgp-ink) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: none !important;
}

html:not(.light-mode) :is(
    .ifh-opt, .ifh-style, .ifh-chip, .cmd-item, .prompt-card,
    .folder-chat-card, .speech-lang-btn, .us-btn, .us-persona,
    .agent-card, .voice-option, .dg-card, .ntts-voice-pill, .ntts-lang-btn,
    .org-member-row, .music-lyrics-card
):hover {
    background: var(--dgp-card-hover) !important;
    border-color: rgba(255,255,255,.18) !important;
}

html:not(.light-mode) :is(
    .ifh-style, .ifh-chip, .category-btn, .folder-btn, .us-btn,
    .us-persona, .ntts-voice-pill, .dg-chip, .folder-pill
).active,
html:not(.light-mode) :is(.us-category summary) {
    color: var(--dgp-accent-text) !important;
    background: rgba(var(--panel-accent-rgb),.14) !important;
    border-color: rgba(var(--panel-accent-rgb),.45) !important;
}

html:not(.light-mode) :is(.category-btn, .folder-btn):hover {
    color: var(--dgp-accent-text) !important;
    background: rgba(255,255,255,.06) !important;
}

/* ---- Model Selector (#universal-model-overlay) — punch up the contrast.
   .us-btn rows were rendering as near-flat text against the black backdrop;
   give every row a clearly visible card, and a crisp accent border + glow
   when selected, instead of a barely-there tint. ---- */
html:not(.light-mode) #universal-model-overlay .us-btn {
    border-radius: 14px !important;
    font-weight: 600 !important;
}
html:not(.light-mode) #universal-model-overlay .us-btn.active {
    background: rgba(var(--panel-accent-rgb),.20) !important;
    border-color: rgba(var(--panel-accent-rgb),.75) !important;
    box-shadow: 0 0 0 1px rgba(var(--panel-accent-rgb),.35), 0 10px 24px rgba(var(--panel-accent-rgb),.20) !important;
}
html:not(.light-mode) #universal-model-overlay .us-category summary {
    border-radius: 12px !important;
    font-weight: 700 !important;
}

/* Default dark themes can also carry the `theme-default` class, which is
   included in the light palette selectors in style.css. Restore readable
   model-picker text without overriding the coloured tier labels. */
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) #universal-model-overlay :is(.us-btn, .us-persona, .us-category summary),
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) #universal-model-overlay .us-title-group p,
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) #universal-model-overlay .us-persona-label {
    color: #ffffff !important;
}

html:not(.light-mode) :is(.dg-card-name, .prompt-card h4, .folder-chat-card .chat-card-title, .org-member-name, .pod-status, .pod-setup-title, .voice-card h3, .agent-name) {
    color: var(--dgp-ink-strong) !important;
    text-shadow: none !important;
}
html:not(.light-mode) :is(.dg-card-meta, .prompt-card p, .folder-chat-card .chat-card-date, .org-member-email, .pod-voice-label, .notepad-status, .voice-card p, .ntts-label, .visual-item.doc-item .doc-name) {
    color: var(--dgp-muted) !important;
}

/* ---- Inputs ---- */
html:not(.light-mode) :is(
    .modal-input, .ifh-input, .dg-search, .dg-sort, .org-input,
    .modeler-input, #notepad-textarea, #notepad-tts-textarea,
    #agents-overlay input, #agents-overlay textarea, .pod-voice-select,
    #lib-search-input, #lib-date-sort, .music-studio-prompt,
    .music-studio-lyrics-input, .music-studio-duration-input
), html:not(.light-mode) #global-modal-overlay :is(input:not([type="range"]), textarea, select) {
    color: var(--dgp-ink) !important;
    background: var(--dgp-input) !important;
    border: 1px solid var(--dgp-line) !important;
}

/* ---- Buttons: secondary stays glassy-dark, primary keeps its accent gradient ---- */
html:not(.light-mode) :is(
    .modal-btn.secondary, .gloss-button.secondary, .org-btn-ghost,
    .ntts-translate-cancel, .ob-btn-ghost, .tw-btn-ghost, .music-studio-btn-secondary,
    .music-studio-assist-chip, .music-studio-duration-preset, .music-studio-footer-pill,
    .music-lyrics-card-lock
) {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) :is(.modal-btn.primary, .gloss-button.primary, .ifh-gen-btn, .org-btn-primary, .ob-btn-next, .tw-btn-next, #notepad-tts-generate, .music-studio-btn-primary) {
    border-color: rgba(var(--panel-accent-rgb),.55) !important;
}

/* ---- img-flow specific surfaces ---- */
html:not(.light-mode) #img-flow-backdrop {
    background: radial-gradient(circle at 20% 8%, rgba(var(--panel-accent-rgb),.10), transparent 30%), rgba(0,0,0,.05) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}
html:not(.light-mode) #img-flow-box .ifh-hero {
    background:
        radial-gradient(circle at top right, rgba(var(--panel-accent-rgb),.16), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 28px rgba(0,0,0,.35) !important;
}
html:not(.light-mode) #img-flow-box .ifh-hero-icon,
html:not(.light-mode) #img-flow-box .ifh-opt .ifh-icon {
    background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #img-flow-box :is(.ifh-note, .ifh-panel) {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html:not(.light-mode) #img-flow-box .ifh-badge {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-muted) !important;
}
html:not(.light-mode) #img-flow-box :is(.ifh-eyebrow, .ifh-provider-title, .ifh-section-meta, .ifh-section-label) {
    color: var(--dgp-muted) !important;
}
html:not(.light-mode) #img-flow-box :is(.ifh-title, .ifh-section-label) { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) #img-flow-box :is(.ifh-subtitle, .ifh-back, .ifh-info small, .ifh-arrow) { color: var(--dgp-muted) !important; }
html:not(.light-mode) #img-flow-box .ifh-back:hover { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) :is(.ifh-dot, .ob-dot, .tw-dot) { background: rgba(255,255,255,.18) !important; }
html:not(.light-mode) #img-flow-box .ifh-gen-btn:disabled {
    color: rgba(255,255,255,.35) !important;
    background: rgba(255,255,255,.06) !important;
    border-color: var(--dgp-line) !important;
}

/* ---- Command center (legacy) ---- */
/* Backdrop behind the panel is now a soft light scrim, not black-on-black —
   it breaks up the screen so the (grey) panel itself has contrast to pop
   against, instead of disappearing into a dark wallpaper. */
html:not(.light-mode) #cmd-overlay { background: rgba(0,0,0,.05) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
html:not(.light-mode) #cmd-overlay .cmd-tab { color: var(--dgp-muted) !important; }
html:not(.light-mode) #cmd-overlay .cmd-tab.active {
    color: var(--dgp-accent-text) !important;
    background: rgba(var(--panel-accent-rgb),.12) !important;
}
html:not(.light-mode) #cmd-overlay .cmd-category-title {
    color: var(--dgp-muted) !important;
    border-bottom-color: var(--dgp-line) !important;
}
html:not(.light-mode) #cmd-overlay .cmd-item span { color: var(--dgp-ink) !important; }
/* One icon colour for the whole grid — overrides each tool's inline
   style="color:#xxx" (and the .icon-* helper classes) so every tool reads the
   same way instead of a different decorative hue each. It resolves through the
   shared role token, so this is the preset's accent everywhere and monochrome
   white in Absolute Serenity, matching every other icon on the site. */
html:not(.light-mode) #cmd-overlay .cmd-item i {
    color: var(--control-icon-ink) !important;
}
html:not(.light-mode) #cmd-overlay .cmd-item:hover i {
    color: var(--dgp-accent-text) !important;
}
html:not(.light-mode) #cmd-overlay .cmd-item:hover {
    border-color: rgba(var(--panel-accent-rgb),.45) !important;
}
/* The favourite star was the last fixed hue in the grid. It stays distinct from
   an unfavourited star by ink weight rather than by being the one gold thing in
   a monochrome or single-accent workspace. */
html:not(.light-mode) #cmd-overlay .cmd-fav-btn.is-fav { color: var(--control-icon-ink) !important; }

/* ---- Notepad / TTS ---- */
html:not(.light-mode) .notepad-tabs-container { background: rgba(255,255,255,.04) !important; border-color: var(--dgp-line) !important; }
html:not(.light-mode) .note-tab { color: var(--dgp-muted) !important; background: rgba(255,255,255,.03) !important; }
html:not(.light-mode) .note-tab:hover { color: var(--dgp-accent-text) !important; background: rgba(255,255,255,.07) !important; }
html:not(.light-mode) .note-tab.active {
    color: var(--dgp-ink-strong) !important;
    background: rgba(255,255,255,.10) !important;
    border-color: var(--dgp-line) !important;
}
html:not(.light-mode) #notepad-tts-counter { color: var(--dgp-muted) !important; background: rgba(255,255,255,.04) !important; }
html:not(.light-mode) #notepad-tts-player { background: rgba(var(--panel-accent-rgb),.08) !important; border-color: rgba(var(--panel-accent-rgb),.20) !important; }

/* ---- Org / onboarding ---- */
html:not(.light-mode) .org-tab { color: var(--dgp-muted) !important; }
html:not(.light-mode) .org-tab:hover,
html:not(.light-mode) .org-tab.active { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) .org-section { border-color: var(--dgp-line) !important; }
html:not(.light-mode) .org-section-title { color: var(--dgp-muted) !important; }
html:not(.light-mode) .org-member-row:hover { background: rgba(255,255,255,.05) !important; }
html:not(.light-mode) .org-avatar { background: rgba(var(--panel-accent-rgb),.18) !important; color: var(--dgp-accent-text) !important; }
html:not(.light-mode) .org-invite-link { background: rgba(255,255,255,.04) !important; border: 1px solid var(--dgp-line) !important; }
html:not(.light-mode) .org-invite-link span { color: var(--dgp-muted) !important; }
html:not(.light-mode) .folder-count { color: var(--dgp-muted) !important; background: rgba(255,255,255,.06) !important; }
html:not(.light-mode) :is(#ob-body, #tw-body) { color: var(--dgp-muted) !important; }
html:not(.light-mode) :is(#ob-body, #tw-body) strong,
html:not(.light-mode) :is(#ob-modal h2, #tw-modal h2) { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) :is(.ob-info-box, .ob-upgrade-box, #tw-body > div[style*="background"]) {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) :is(#ob-progress, #tw-progress) { color: var(--dgp-muted) !important; }

/* ---- Visual library / document gallery ---- */
html:not(.light-mode) .visual-badge {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .dg-dropzone {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(var(--panel-accent-rgb),.25) !important;
}

/* ---- 3D modeler dock + tracker progress ---- */
html:not(.light-mode) .modeler-controls {
    color: var(--dgp-ink) !important;
    background: rgba(28,28,30,.92) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html:not(.light-mode) :is(.tracker-progress-bg, .pod-audio-progress) {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .pod-bar { background: rgba(255,255,255,.14) !important; }
html:not(.light-mode) .pod-voice-select option { color: var(--dgp-ink) !important; background: #1c1c1e !important; }

/* ---- Geek stats panel ---- */
html:not(.light-mode) .geek-panel {
    background: rgba(24,24,27,.94) !important;
    border-color: var(--dgp-line) !important;
    border-left: 3px solid var(--dgp-accent) !important;
    box-shadow: -18px 12px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html:not(.light-mode) .stat-group { border-color: rgba(var(--panel-accent-rgb),.20) !important; }
html:not(.light-mode) .stat-group label { color: var(--dgp-muted) !important; }
html:not(.light-mode) :is(.geek-close, .stat-group span) { color: var(--dgp-ink) !important; }

/* ---- Music Studio: ported off raw light hex values entirely ---- */
html:not(.light-mode) #global-modal-overlay[data-variant="music-studio"] .custom-modal {
    background: var(--dgp-surface) !important;
    border-color: var(--dgp-line) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="music-studio"] #modal-message { color: var(--dgp-muted) !important; }
html:not(.light-mode) :is(.music-studio-header-copy h3, .music-studio-section-head h4, .music-studio-budget-copy strong, .music-lyrics-card strong) { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) :is(.music-studio-header-copy p, .music-studio-section-copy, .music-studio-budget-copy span, .music-studio-range-label, .music-studio-counter, .music-studio-budget-meta, .music-lyrics-card p) { color: var(--dgp-muted) !important; }
html:not(.light-mode) :is(.music-studio-prompt, .music-studio-lyrics-input, .music-studio-duration-input) { color: var(--dgp-ink) !important; background: var(--dgp-input) !important; border-color: var(--dgp-line) !important; }
html:not(.light-mode) .music-studio-slider { background: linear-gradient(90deg, var(--dgp-accent), var(--dgp-accent)) 0/var(--music-slider-fill, 0%) 100% no-repeat, rgba(255,255,255,.12) !important; }
html:not(.light-mode) :is(.music-studio-slider::-webkit-slider-thumb, .music-studio-slider::-moz-range-thumb) { border-color: var(--dgp-accent) !important; background: #1c1c1e !important; }
html:not(.light-mode) .music-studio-custom-head > span:first-child { color: var(--dgp-ink) !important; }
html:not(.light-mode) .music-lyrics-card-icon,
html:not(.light-mode) .music-studio-assist-chip i,
html:not(.light-mode) .music-studio-upgrade-note i { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) .music-lyrics-card-radio { border-color: var(--dgp-line) !important; background: rgba(255,255,255,.04) !important; }
html:not(.light-mode) .music-lyrics-card.active {
    border-color: var(--dgp-accent) !important;
    background: rgba(var(--panel-accent-rgb),.08) !important;
}
html:not(.light-mode) .music-studio-upgrade-note { background: rgba(var(--panel-accent-rgb),.10) !important; color: var(--dgp-muted) !important; }
html:not(.light-mode) .music-studio-btn-primary { box-shadow: 0 10px 24px rgba(var(--panel-accent-rgb),.30) !important; }

/* ==========================================================================
   MUSIC STUDIO v2 — the live, currently-shipped panel (id="music-v2-overlay",
   classes "mv2-*"). Its styles are injected at runtime via a <style> tag
   built in public/script.js (setupMusicStudioV2), hard-coded to a white
   theme. These overrides are written more specific than the plain class
   selectors in that injected block so they win regardless of insertion
   order, without touching script.js.
   ========================================================================== */
html:not(.light-mode) #music-v2-overlay { background: rgba(0,0,0,.05) !important; backdrop-filter: blur(2px) !important; -webkit-backdrop-filter: blur(2px) !important; }
html:not(.light-mode) .mv2-card {
    background: var(--dgp-surface) !important;
    color: var(--dgp-ink) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) .mv2-title { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .mv2-title .mv2-spark { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) .mv2-subtitle { color: var(--dgp-muted) !important; }

html:not(.light-mode) .mv2-icon-btn {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-muted) !important;
}
html:not(.light-mode) .mv2-icon-btn:hover { background: rgba(255,255,255,.12) !important; }

html:not(.light-mode) .mv2-section {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .mv2-section-title { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .mv2-section-title i,
html:not(.light-mode) .mv2-mini-btn i,
html:not(.light-mode) .mv2-chip i,
html:not(.light-mode) .mv2-lyric-icon { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) .mv2-section-help { color: var(--dgp-muted) !important; }

html:not(.light-mode) :is(.mv2-textarea, .mv2-lyric-wrap, .mv2-duration-num) {
    background: var(--dgp-input) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-ink) !important;
}
html:not(.light-mode) .mv2-textarea:focus { border-color: rgba(var(--panel-accent-rgb),.55) !important; background: rgba(255,255,255,.08) !important; }
html:not(.light-mode) .mv2-lyric-wrap textarea { color: var(--dgp-ink) !important; }
html:not(.light-mode) .mv2-lyric-toolbar input { color: var(--dgp-muted) !important; }
html:not(.light-mode) .mv2-count { color: var(--dgp-muted) !important; }
html:not(.light-mode) .mv2-duration-num input { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .mv2-duration-num span { color: var(--dgp-muted) !important; }
html:not(.light-mode) .mv2-duration-scale { color: var(--dgp-muted) !important; }

html:not(.light-mode) :is(.mv2-chip, .mv2-mini-btn, .mv2-preset, .mv2-lyric-card, .mv2-btn-secondary) {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-muted) !important;
}
html:not(.light-mode) :is(.mv2-chip:hover, .mv2-mini-btn:hover, .mv2-preset:hover, .mv2-lyric-card:hover, .mv2-btn-secondary:hover) {
    background: rgba(255,255,255,.09) !important;
}
html:not(.light-mode) .mv2-preset.active {
    background: rgba(var(--panel-accent-rgb),.14) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
    color: var(--dgp-accent-text) !important;
}
html:not(.light-mode) .mv2-lyric-card.active {
    background: rgba(var(--panel-accent-rgb),.10) !important;
    border-color: var(--dgp-accent) !important;
    box-shadow: 0 0 0 1px var(--dgp-accent) inset !important;
}
html:not(.light-mode) .mv2-lyric-radio {
    border-color: var(--dgp-line) !important;
    background: rgba(255,255,255,.04) !important;
}
html:not(.light-mode) .mv2-lyric-card.active .mv2-lyric-radio {
    border-color: var(--dgp-accent) !important;
    background: var(--dgp-accent) !important;
    box-shadow: inset 0 0 0 3px #1c1c1e !important;
}
html:not(.light-mode) .mv2-lyric-name { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .mv2-lyric-desc { color: var(--dgp-muted) !important; }

html:not(.light-mode) .mv2-slider { background: rgba(255,255,255,.14) !important; }
html:not(.light-mode) :is(.mv2-slider::-webkit-slider-thumb, .mv2-slider::-moz-range-thumb) { background: var(--dgp-accent) !important; }

html:not(.light-mode) .mv2-footer {
    background: linear-gradient(180deg, rgba(20,20,22,0) 0%, #18181a 30%) !important;
}
html:not(.light-mode) .mv2-footer-inner {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .mv2-summary-top { color: var(--dgp-ink) !important; }
html:not(.light-mode) .mv2-summary-bot { color: var(--dgp-muted) !important; }
html:not(.light-mode) .mv2-btn-primary { box-shadow: 0 4px 16px rgba(var(--panel-accent-rgb),.40) !important; }

/* ---- Notepad toolbar buttons (.tool-btn has no base styling at all, so it
   was falling back to the browser's default light button) ---- */
html:not(.light-mode) .tool-btn {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
    border-radius: 10px !important;
}
html:not(.light-mode) .tool-btn:hover { background: rgba(255,255,255,.11) !important; }
html:not(.light-mode) .tool-btn.primary {
    color: var(--dgp-ink-strong) !important;
    background: linear-gradient(135deg, rgba(var(--panel-accent-rgb),.30), rgba(112,70,217,.30)) !important;
    border-color: rgba(var(--panel-accent-rgb),.45) !important;
}

/* ==========================================================================
   WEB ARCHITECT — the live "Pro build" wizard (data-variant="web-architect").
   Its CSS is injected at runtime from public/script.js (initWebArchitectModule)
   and is hard-coded to a white wizard theme (.wa-builder*, .wa-progress,
   .wa-choice, .wa-summary, etc.), all with !important. Selectors below are
   written with one extra level of specificity (html:not(.light-mode) prefix +
   the original #id[attr] base) so they win regardless of injection order.
   ========================================================================== */
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .custom-modal {
    background: var(--dgp-surface) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] #modal-message {
    color: var(--dgp-ink) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-builder {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--panel-accent-rgb),.08), transparent 24%),
        #19191c !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-builder-header {
    background: rgba(255,255,255,.04) !important;
    border-bottom: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-builder-header strong { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-builder-header span { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-model-badge {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
}

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress div { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress div span {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.08) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress div.active { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress div.active span {
    color: var(--text-primary) !important;
    background: var(--accent-selected) !important;
    border-color: var(--accent) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-progress i { background: var(--dgp-line) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-build-section { border-bottom: 1px solid var(--dgp-line) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-section-heading > span {
    color: var(--dgp-accent-text) !important;
    background: rgba(var(--panel-accent-rgb),.16) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-section-heading h4 { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-section-heading p { color: var(--dgp-muted) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] textarea,
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] input {
    color: var(--dgp-ink) !important;
    background: var(--dgp-input) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] textarea::placeholder,
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] input::placeholder { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] #wa-char-count { color: var(--dgp-muted) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-choice {
    color: var(--dgp-muted) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-choice i {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.08) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-choice:hover,
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-choice.active {
    color: var(--dgp-accent-text) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
    background: rgba(var(--panel-accent-rgb),.14) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-choice:hover,.wa-choice.active) i {
    color: var(--text-primary) !important;
    background: var(--accent-selected) !important;
}

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-feature {
    color: var(--dgp-muted) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-feature.active {
    color: var(--dgp-accent-text) !important;
    background: rgba(var(--panel-accent-rgb),.14) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-custom-feature-row button {
    color: var(--dgp-accent-text) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-style-card {
    color: var(--dgp-ink) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-style-card small { color: var(--dgp-muted) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-direction-row label,
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-two-fields label { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-swatch { border-color: #19191c !important; outline-color: var(--dgp-line) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-device {
    color: var(--dgp-muted) !important;
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-device.active {
    color: var(--dgp-accent-text) !important;
    background: rgba(var(--panel-accent-rgb),.14) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
}

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary {
    background: rgba(255,255,255,.02) !important;
    border-left: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-heading { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary > div > p { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-list {
    border: 1px solid var(--dgp-line) !important;
    background: rgba(255,255,255,.03) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-list > div { border-bottom: 1px solid var(--dgp-line) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-list i { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-list span { color: var(--dgp-muted) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-summary-list strong { color: var(--dgp-ink-strong) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-understanding {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-understanding > span { color: var(--dgp-accent-text) !important; }
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-understanding p { color: var(--dgp-muted) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-output-list span { color: var(--dgp-muted) !important; }

html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .modal-actions {
    background: rgba(255,255,255,.03) !important;
    border-top: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .modal-btn.secondary {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
}

/* The true-black variation of the builder, shared by both black presets.
   Every edge and fill routes through --accent / --control-* rather than a fixed
   violet, so Absolute Serenity renders it monochrome while Default Dark renders
   the same geometry in purple. The style-card previews and the palette swatches
   are deliberately left alone: those are the user's own colour choices, not
   chrome, and must stay true even in Serenity. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.custom-modal,.wa-builder,.wa-builder-header,.wa-progress,.wa-summary,.modal-actions) {
    background:#000 !important;
    border-color:var(--border-subtle) !important;
    box-shadow:none !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-choice,.wa-feature,.wa-style-card,.wa-device,.wa-summary-list,.wa-understanding,.wa-model-badge,textarea,input) {
    background:var(--surface-raised) !important;
    border-color:var(--control-accent-line) !important;
    box-shadow:none !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-choice:hover,.wa-choice.active,.wa-feature.active,.wa-style-card.active,.wa-device.active) {
    background:var(--accent-selected) !important;
    border-color:var(--accent) !important;
    color:var(--text-primary) !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-brand-mark,.wa-progress div.active span) {
    background:var(--accent) !important;
    box-shadow:none !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-model-badge i,.wa-section-heading > span,.wa-progress div.active,.wa-understanding > span) {
    color:var(--control-icon-ink) !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-section-heading > span {
    background:var(--accent-selected) !important;
    border:1px solid var(--control-accent-line) !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .modal-btn.primary {
    background:var(--accent) !important;
    border-color:var(--accent) !important;
    color:#fff !important;
    box-shadow:none !important;
}

/* Three surfaces carry their own hard-coded colour and so slipped past the
   block above, leaving them as the only non-black slabs in an otherwise
   monochrome wizard: the close button (navy #111318), the selected choice's
   icon chip (charcoal #202024) and the "Ready to build?" card (a blue
   gradient). They follow the same card treatment as every other panel here. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-close-builder,.wa-ready-card) {
    background:var(--surface-raised) !important;
    border:1px solid var(--control-accent-line) !important;
    box-shadow:none !important;
}
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] :is(.wa-choice.active i,.wa-ready-card > i) {
    background:color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
/* The swatch ring is the panel colour showing through, so it has to be the
   Serenity black rather than the shared graphite. */
html:is(.theme-stealth, .theme-accent-default-black):not(.light-mode) #global-modal-overlay[data-variant="web-architect"] .wa-swatch {
    border-color:#000 !important;
}

/* Interaction-state contract shared by legacy and dynamically mounted dark
   workspaces. Disabled controls remain identifiable; keyboard focus never
   relies on a low-contrast background change alone. */
html:not(.light-mode) :is(
    #global-modal-overlay, #suite-panel-overlay, #universal-model-overlay,
    #cmd-overlay, #notepad-overlay, #folder-manager-overlay, #img-flow-wrap,
    [id^="ind-tool-"][id$="-overlay"], #asksary-video-editor,
    #gallery-video-stitcher, .cl-overlay
) :is(button,[role="button"],input,textarea,select):focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
html:not(.light-mode) :is(
    #global-modal-overlay, #suite-panel-overlay, #universal-model-overlay,
    #cmd-overlay, #notepad-overlay, #folder-manager-overlay, #img-flow-wrap,
    [id^="ind-tool-"][id$="-overlay"], #asksary-video-editor,
    #gallery-video-stitcher, .cl-overlay
) :is(button,[role="button"],input,textarea,select):disabled {
    color: var(--text-disabled) !important;
    border-color: var(--border-subtle) !important;
    opacity: .58 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   SUITE PANEL — the "Welcome to AskSary" / workspace picker overlay
   (#suite-panel-overlay, classes "sp-*"). Same situation as Web Architect
   and Music Studio: styles injected at runtime from public/script.js,
   hard-coded to a white theme. This is the panel that shows the workspace
   sidebar (Creativity / Chat / Developer Suite / Favourites) and the tool
   grid (Popular Tools, More Tools, Quick Start).
   ========================================================================== */
/* Light, near-opaque scrim instead of black-on-black — breaks up the screen
   behind the (grey) panel so it has real contrast to pop against. */
html:not(.light-mode) #suite-panel-overlay { background: rgba(0,0,0,.05) !important; backdrop-filter: blur(2px) saturate(110%) !important; -webkit-backdrop-filter: blur(2px) saturate(110%) !important; }
/* Was missing a border — every other panel (Command Center, Model Selector,
   independent tool panels) already had one. With both the panel and the backdrop now
   true black, the shadow alone wasn't enough to tell where the panel even
   is; the border is what actually defines the edge. */
html:not(.light-mode) .sp-shell {
    background: var(--dgp-surface) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) .sp-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(var(--panel-accent-rgb),.04) 100%) !important;
    border-right: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .sp-sidebar-heading { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-suite-btn { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-suite-btn:hover { background: rgba(255,255,255,.06) !important; color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sp-suite-btn.active {
    background: rgba(var(--panel-accent-rgb),.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(var(--panel-accent-rgb),.85) !important;
    box-shadow: 0 0 0 1px rgba(var(--panel-accent-rgb),.25), 0 0 18px rgba(var(--panel-accent-rgb),.45) !important;
}
html:not(.light-mode) .sp-suite-btn-ico {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid var(--dgp-line) !important;
}
/* Solid glowing fill — matches the reference render's icon badges exactly,
   not a faint translucent wash. */
html:not(.light-mode) .sp-suite-btn.active .sp-suite-btn-ico {
    background: var(--panel-accent, #4a90e2) !important;
    border-color: rgba(var(--panel-accent-rgb),.9) !important;
    box-shadow: 0 0 14px rgba(var(--panel-accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html:not(.light-mode) .sp-sidebar-foot { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-sidebar-foot:hover { background: rgba(255,255,255,.06) !important; color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sp-skip-toggle {
    color: var(--dgp-muted) !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--dgp-line) !important;
}

html:not(.light-mode) .sp-main { background: var(--dgp-surface) !important; }
html:not(.light-mode) .sp-suite-name { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sp-suite-sub { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-tier-tabs { background: rgba(255,255,255,.06) !important; }
html:not(.light-mode) .sp-tier-tab { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-tier-tab.active {
    background: rgba(255,255,255,.10) !important;
    color: var(--dgp-accent-text) !important;
}
html:not(.light-mode) .sp-wallet-btn {
    background: rgba(6,182,212,.12) !important;
    border: 1px solid rgba(6,182,212,.30) !important;
    color: #67e8f9 !important;
}
html:not(.light-mode) .sp-wallet-btn .sp-wallet-amt { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sp-close {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-muted) !important;
}
html:not(.light-mode) .sp-close:hover { background: rgba(255,255,255,.13) !important; }

html:not(.light-mode) .sp-section-title { color: var(--dgp-ink-strong) !important; }

html:not(.light-mode) .sp-tool-card {
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .sp-tool-card:hover {
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.4) !important;
}
/* Solid glowing fill, matching the reference render pixel-for-pixel — a
   translucent wash (.16/.24) read as a faint gray ghost against true black.
   Overrides the per-tool inline background/color (tool.bg / tool.color) so
   every tool reads the same way instead of keeping its own decorative hue. */
html:not(.light-mode) .sp-tool-icon {
    background: var(--panel-accent, #4a90e2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(var(--panel-accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html:not(.light-mode) .sp-tool-name { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sp-tool-desc { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sp-tool-fav {
    background: rgba(0,0,0,.4) !important;
    color: var(--dgp-muted) !important;
}

html:not(.light-mode) .sp-more-card {
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) .sp-more-card:hover {
    background: rgba(var(--panel-accent-rgb),.10) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
}
html:not(.light-mode) .sp-more-icon {
    background: var(--panel-accent, #4a90e2) !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(var(--panel-accent-rgb),.45), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html:not(.light-mode) .sp-more-name { color: var(--dgp-ink) !important; }
html:not(.light-mode) .sp-empty { color: var(--dgp-muted) !important; }

html:not(.light-mode) .sp-quick-card {
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-ink-strong) !important;
}
html:not(.light-mode) .sp-quick-card:hover {
    background: rgba(var(--panel-accent-rgb),.10) !important;
    border-color: rgba(var(--panel-accent-rgb),.5) !important;
}
html:not(.light-mode) .sp-quick-intro { color: var(--dgp-muted) !important; }

@media (max-width: 960px) {
    html:not(.light-mode) .sp-sidebar {
        background: var(--dgp-surface) !important;
        border-bottom: 1px solid var(--dgp-line) !important;
    }
    html:not(.light-mode) .sp-suite-btn {
        background: rgba(255,255,255,.06) !important;
        color: var(--dgp-muted) !important;
    }
    html:not(.light-mode) .sp-suite-btn.active {
        background: rgba(var(--panel-accent-rgb),.16) !important;
        color: var(--dgp-accent-text) !important;
    }
}

/* ==========================================================================
   SUITE WELCOME — the very first "Welcome to AskSary" splash
   (#suite-welcome-overlay, classes "sw-*"). Same injected-at-runtime pattern,
   hard-coded to a pastel-light theme with no dark awareness at all.
   ========================================================================== */
html:not(.light-mode) #suite-welcome-overlay {
    background:
        radial-gradient(1200px 600px at 10% 0%, rgba(var(--panel-accent-rgb),.14), transparent 60%),
        radial-gradient(1000px 500px at 90% 100%, rgba(252,211,77,.06), transparent 60%),
        radial-gradient(800px 400px at 80% 10%, rgba(var(--panel-accent-rgb),.10), transparent 60%),
        linear-gradient(180deg, #0c0c10 0%, #0a0a0d 50%, #0e0c12 100%) !important;
}
html:not(.light-mode) .sw-pill {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-ink) !important;
    box-shadow: none !important;
}
html:not(.light-mode) .sw-brand-name { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) .sw-tagline { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sw-card {
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) .sw-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.5) !important; }
html:not(.light-mode) .sw-card-desc { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sw-remember { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sw-trust { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sw-badges { color: var(--dgp-muted) !important; }
html:not(.light-mode) .sw-close {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-muted) !important;
}

/* ==========================================================================
   PROFILE SETTINGS — #universal-settings-modal (the gear-icon Settings &
   Help modal: Profile / Visuals / System / Help / Legal tabs). Previously
   excluded from this stylesheet and left on the old per-wallpaper-theme
   look; now unified onto the same true-black + --panel-accent treatment as
   the Suite Panel and independent tool panels.
   ========================================================================== */
html:not(.light-mode) #universal-settings-modal {
    background: var(--dgp-surface) !important;
    border: 1px solid var(--dgp-line) !important;
    box-shadow: var(--dgp-shadow) !important;
}
html:not(.light-mode) #universal-settings-modal .settings-header {
    background: rgba(255,255,255,.04) !important;
    border-bottom: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #universal-settings-modal #settings-title { color: var(--dgp-ink-strong) !important; }
html:not(.light-mode) #universal-settings-modal #close-settings-btn { color: var(--dgp-muted) !important; }
html:not(.light-mode) #universal-settings-modal #close-settings-btn:hover { color: var(--dgp-ink-strong) !important; }

html:not(.light-mode) #universal-settings-modal .settings-tabs { border-bottom-color: var(--dgp-line) !important; }
html:not(.light-mode) #universal-settings-modal .tab-btn { color: var(--dgp-muted) !important; }
html:not(.light-mode) #universal-settings-modal .tab-btn.active {
    color: var(--dgp-ink-strong) !important;
    border-bottom-color: var(--panel-accent, #4a90e2) !important;
}

html:not(.light-mode) #universal-settings-modal :is(h1,h2,h3,h4,strong,.section-label,label) { color: var(--dgp-ink) !important; }
html:not(.light-mode) #universal-settings-modal :is(p,small,.section-desc,.description,.info-text .label) { color: var(--dgp-muted) !important; }
html:not(.light-mode) #universal-settings-modal .divider { border-top-color: var(--dgp-line) !important; }

html:not(.light-mode) #universal-settings-modal :is(input, textarea, select) {
    background: var(--dgp-input) !important;
    border: 1px solid var(--dgp-line) !important;
    color: var(--dgp-ink-strong) !important;
}
html:not(.light-mode) #universal-settings-modal :is(input, textarea, select):focus {
    border-color: rgba(var(--panel-accent-rgb),.6) !important;
    box-shadow: 0 0 0 3px rgba(var(--panel-accent-rgb),.18) !important;
}

html:not(.light-mode) #universal-settings-modal .info-row,
html:not(.light-mode) #universal-settings-modal #memory-chip-container,
html:not(.light-mode) #universal-settings-modal .hidden-form {
    background: var(--dgp-card) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #universal-settings-modal .info-text .value { color: var(--dgp-ink-strong) !important; }

html:not(.light-mode) #profile-avatar-preview {
    border-color: rgba(var(--panel-accent-rgb),.6) !important;
    box-shadow: 0 0 16px rgba(var(--panel-accent-rgb),.35) !important;
}

html:not(.light-mode) #universal-settings-modal .btn-primary {
    background: var(--panel-accent, #4a90e2) !important;
    color: #ffffff !important;
}
html:not(.light-mode) #universal-settings-modal .btn-secondary {
    background: var(--dgp-card-hover) !important;
    color: var(--dgp-ink) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #universal-settings-modal .btn-outline {
    background: transparent !important;
    color: var(--dgp-ink) !important;
    border: 1px solid var(--dgp-line) !important;
}
html:not(.light-mode) #universal-settings-modal .btn-outline:hover,
html:not(.light-mode) #universal-settings-modal .btn-secondary:hover {
    background: rgba(255,255,255,.12) !important;
}
html:not(.light-mode) #universal-settings-modal .feature-slider { background: rgba(255,255,255,.16) !important; }
html:not(.light-mode) #universal-settings-modal input:checked + .feature-slider { background: var(--panel-accent, #4a90e2) !important; }

html:not(.light-mode) #universal-settings-modal .settings-content-container::-webkit-scrollbar-track { background: rgba(255,255,255,.06) !important; }
html:not(.light-mode) #universal-settings-modal .settings-content-container::-webkit-scrollbar-thumb { background-color: var(--panel-accent, #4a90e2) !important; border-color: rgba(255,255,255,.06) !important; }

/* Model picker inverse palette: dark surfaces always receive light copy. */
html:not(.light-mode):not(.light-surface-active) #universal-model-overlay .universal-sheet {
    background: rgba(13, 16, 22, 0.98) !important;
}
html:not(.light-mode):not(.light-surface-active) #universal-model-overlay :is(.us-title-group h3, .us-category summary, .us-btn, .us-persona) {
    color: #f8fafc !important;
    text-shadow: none !important;
}
html:not(.light-mode):not(.light-surface-active) #universal-model-overlay :is(.us-title-group p, .us-persona-label) {
    color: #aeb8c7 !important;
}
html:not(.light-mode):not(.light-surface-active) #universal-model-overlay :is(.us-btn, .us-persona) {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.14) !important;
}
html:not(.light-mode):not(.light-surface-active) #universal-model-overlay :is(.us-btn, .us-persona).active {
    color: #ffffff !important;
    background: rgba(var(--panel-accent-rgb),.28) !important;
}

/* Render the whole workspace/suite panel at 80% (desktop) for a roomier layout —
   matches the browser-zoom-80% look. Scales the panel and its contents together. */
@media (min-width: 769px) {
    #suite-panel-overlay .sp-shell { zoom: 0.85; }
}

/* Universal close (×) button shape across every panel — one consistent
   rounded-square, same size, instead of a mix of circles and squares. */
.sp-close,
#universal-model-overlay .us-close-btn,
#cmd-overlay #close-cmd-btn,
#notepad-tts-close,
.dg-close,
.tracker-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
}