/* ==========================================================================
   PANEL BACKDROP TRANSPARENCY
   When any modal / builder / library panel is open, the surrounding scrim
   should be almost fully transparent (~5%) so the user's wallpaper shows
   through, in BOTH light and dark mode. Each of these overlays wraps an
   opaque inner panel/card, so the panel content itself stays readable —
   only the surround goes see-through.
   Loaded LAST so the !important here wins over the per-overlay scrim colours
   defined in style.css (and matches the dark-gloss edits for dark mode).
   NOTE: #voice-mode-overlay is intentionally excluded (full-screen immersive
   voice experience, not a floating panel).
   ========================================================================== */

#global-modal-overlay,
#settings-overlay,
#profile-settings-overlay,
#premium-offer-overlay,
#premium-credentials-overlay,
#theme-confirm-overlay,
#limit-reached-overlay,
#custom-confirm-overlay,
#cmd-overlay,
#notepad-overlay,
#notepad-tts-overlay,
#prompt-library-overlay,
#folder-manager-overlay,
#dg-overlay,
#document-gallery-overlay,
#visual-lib-overlay,
#modeler-overlay,
#tracker-overlay,
#token-tracker-overlay,
#org-overlay,
#org-modal-overlay,
#agents-overlay,
#podcast-overlay,
#speech-overlay,
#speech-onboarding-overlay,
#notes-overlay,
#universal-model-overlay,
#ob-overlay,
#tw-overlay,
#music-v2-overlay,
#voice-overlay,
#suite-panel-overlay,
#suite-welcome-overlay,
#img-flow-backdrop,
.overlay,
.custom-modal-overlay {
    background: rgba(0, 0, 0, 0.05) !important;
    background-image: none !important;
    backdrop-filter: blur(2px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(108%) !important;
}

/* The generic sidebar/menu dim layer keeps its fade-in behaviour; just make
   the tint barely-there so wallpaper reads through while a drawer is open. */
.overlay { background: rgba(0, 0, 0, 0.05) !important; }

/* ==========================================================================
   SIDEBAR-MATCHED PANEL GLASS
   These are the four high-traffic surfaces that previously remained solid
   even though their surrounding scrims were transparent. Match the sidebar's
   dark glass recipe so the wallpaper remains visible through the panel itself.
   Keep perf-lite out of this rule: that mode intentionally disables expensive
   backdrop compositing on lower-powered Android devices.
   ========================================================================== */
html:not(.light-mode):not(.perf-lite) {
    /* Surface colour is universal. Themes now contribute only the accent,
       preventing yellow, green or purple selections from washing the whole
       catalogue and every tool card in that hue. */
    --panel-glass-bg: rgba(24,24,27,.72);
    --studio-panel-glass-bg: rgba(32,32,35,.94);
    --mobile-actions-glass-bg: rgba(32,32,35,.94);
    --panel-glass-subtle: rgba(40,40,44,.64);
    --panel-glass-card: rgba(43,43,47,.92);
    --panel-glass-border: rgba(255,255,255,.16);
    --panel-glass-blur: blur(20px) saturate(180%);
}

/* Composer + menu (paperclip / video / image / microphone / tools). */
html:not(.light-mode):not(.perf-lite) .action-button-grid {
    background: var(--mobile-actions-glass-bg) !important;
    border-color: var(--panel-glass-border) !important;
    backdrop-filter: var(--panel-glass-blur) !important;
    -webkit-backdrop-filter: var(--panel-glass-blur) !important;
}

html:not(.light-mode):not(.perf-lite) .action-button-grid .action-btn {
    background: var(--panel-glass-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Workspace / tool catalogue. The shell owns the blur; its two columns must
   stay transparent or they would cover the frosted wallpaper again. */
html:not(.light-mode):not(.perf-lite) #suite-panel-overlay .sp-shell {
    background: var(--studio-panel-glass-bg) !important;
    border-color: var(--panel-glass-border) !important;
    backdrop-filter: var(--panel-glass-blur) !important;
    -webkit-backdrop-filter: var(--panel-glass-blur) !important;
}

html:not(.light-mode):not(.perf-lite) #suite-panel-overlay :is(.sp-main, .sp-sidebar) {
    background: var(--panel-glass-subtle) !important;
}

html:not(.light-mode):not(.perf-lite) #suite-panel-overlay :is(.sp-tool-card, .sp-more-card, .sp-quick-card) {
    background: var(--panel-glass-card) !important;
}

/* Independent tool workspaces all mount the same .it-card shell. Keep them on
   the exact Studio glass level instead of letting each tool's injected solid
   #202127 background cover the wallpaper. The image/video prompt builder uses
   the same treatment so the transition from Studio to a tool feels coherent. */
html:not(.light-mode):not(.perf-lite) :is(
    [id^="ind-tool-"][id$="-overlay"] .it-card,
    #img-flow-box
) {
    background: var(--studio-panel-glass-bg) !important;
    border-color: var(--panel-glass-border) !important;
    backdrop-filter: var(--panel-glass-blur) !important;
    -webkit-backdrop-filter: var(--panel-glass-blur) !important;
}

html:not(.light-mode):not(.perf-lite) [id^="ind-tool-"][id$="-overlay"] :is(.it-head, .it-main, .it-foot) {
    background: transparent !important;
}

html:not(.light-mode):not(.perf-lite) [id^="ind-tool-"][id$="-overlay"] .it-aside {
    background: var(--panel-glass-subtle) !important;
}

/* Settings & Help. Internal sections remain lightly tinted for hierarchy. */
html:not(.light-mode):not(.perf-lite) #universal-settings-modal {
    background: var(--panel-glass-bg) !important;
    border-color: var(--panel-glass-border) !important;
    backdrop-filter: var(--panel-glass-blur) !important;
    -webkit-backdrop-filter: var(--panel-glass-blur) !important;
}

html:not(.light-mode):not(.perf-lite) #universal-settings-modal :is(.settings-header, .settings-tabs, .settings-content-container, .tab-panel, .settings-content) {
    background-color: transparent !important;
}

html:not(.light-mode):not(.perf-lite) #universal-settings-modal :is(.avatar-section, .info-row, #memory-chip-container, .hidden-form) {
    background: var(--panel-glass-card) !important;
}

/* Notes and Organization are legacy workspaces with their own injected solid
   charcoal surfaces. Give their outer shells a restrained dark glass finish,
   then keep the internal regions transparent enough to reveal that finish. */
html:not(.light-mode):not(.perf-lite) :is(
    #folder-manager-overlay .folder-modal,
    #notepad-overlay .notepad-modal
) {
    background: rgba(18, 20, 26, 0.88) !important;
    border-color: var(--panel-glass-border) !important;
    backdrop-filter: var(--panel-glass-blur) !important;
    -webkit-backdrop-filter: var(--panel-glass-blur) !important;
}

html:not(.light-mode):not(.perf-lite) #folder-manager-overlay :is(
    .folder-header,
    .folder-sidebar,
    .folder-content-area
),
html:not(.light-mode):not(.perf-lite) #notepad-overlay :is(
    .notepad-header,
    .notepad-tabs-container,
    #notepad-textarea
) {
    background: rgba(255, 255, 255, 0.025) !important;
}

html:not(.light-mode):not(.perf-lite) :is(
    #folder-manager-overlay .folder-chat-card,
    #notepad-overlay .note-tab
) {
    background: var(--panel-glass-card) !important;
}

/* Light themes use the sidebar's white-glass counterpart. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass):not(.perf-lite) :is(
    .action-button-grid,
    #universal-settings-modal
) {
    background: #f7f8fb !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Light mode is intentionally solid. Interactive surfaces use a quiet raised
   edge instead of translucency: a pale upper-left highlight, soft lower-right
   shadow and a shallow inset press state. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar {
    background: #f5f7fa !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset -1px 0 0 #d9dee7 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open :is(
    .history-item,
    #new-chat-btn,
    .sidebar-footer .sidebar-btn,
    .sidebar-footer button
) {
    background: linear-gradient(145deg, #ffffff, #edf0f5) !important;
    border: 1px solid #d6dbe4 !important;
    box-shadow:
        4px 5px 10px rgba(30, 41, 59, 0.10),
        -3px -3px 8px rgba(255, 255, 255, 0.96),
        inset 0 1px 0 #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open :is(
    .history-item,
    #new-chat-btn,
    .sidebar-footer .sidebar-btn,
    .sidebar-footer button
):hover {
    background: linear-gradient(145deg, #ffffff, #e8edf4) !important;
    border-color: #c4ccd8 !important;
    box-shadow:
        5px 7px 13px rgba(30, 41, 59, 0.13),
        -3px -3px 8px #ffffff,
        inset 0 1px 0 #ffffff !important;
    transform: translateY(-1px) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open :is(
    .history-item,
    #new-chat-btn,
    .sidebar-footer .sidebar-btn,
    .sidebar-footer button
):active {
    transform: translateY(1px) !important;
    box-shadow:
        inset 3px 3px 7px rgba(30, 41, 59, 0.13),
        inset -3px -3px 7px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn {
    border: 1px solid #dbe0e8 !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #ffffff, #edf0f5) !important;
    box-shadow: 2px 3px 7px rgba(30, 41, 59, 0.09), -2px -2px 6px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open .sidebar-utilities-grid .sidebar-btn:active {
    transform: translateY(1px) !important;
    box-shadow: inset 2px 2px 5px rgba(30, 41, 59, 0.12), inset -2px -2px 5px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #sidebar.sidebar.open .sidebar-search-container input {
    background: #f3f5f8 !important;
    border-color: #d5dae3 !important;
    box-shadow: inset 2px 2px 5px rgba(30, 41, 59, 0.08), inset -2px -2px 5px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .action-button-grid {
    border: 1px solid #e0e4eb !important;
    box-shadow: 12px 16px 30px rgba(30, 41, 59, 0.16), -6px -6px 18px rgba(255, 255, 255, 0.96), inset 0 1px 0 #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .action-button-grid .action-btn {
    background: linear-gradient(145deg, #ffffff, #eceff4) !important;
    border: 1px solid #dfe3ea !important;
    border-radius: 13px !important;
    box-shadow: 3px 4px 9px rgba(30, 41, 59, 0.11), -3px -3px 7px #ffffff, inset 0 1px 0 #ffffff !important;
    transform: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .action-button-grid .action-btn:hover {
    background: linear-gradient(145deg, #ffffff, #e7ebf1) !important;
    border-color: #cbd2dc !important;
    box-shadow: 4px 6px 11px rgba(30, 41, 59, 0.14), -3px -3px 7px #ffffff !important;
    transform: translateY(-1px) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .action-button-grid :is(
    .action-btn:hover,
    .action-btn:focus-visible,
    .action-btn.active,
    .action-btn.image-btn-active
) :is(i, svg) {
    color: #111827 !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .action-button-grid .action-btn:active {
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 7px rgba(30, 41, 59, 0.13), inset -3px -3px 7px #ffffff !important;
}

/* Extend the same tactile language to the app header controls. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    #model-toggle-button,
    .header-icon-btn,
    #quick-actions-toggle.main-trigger-btn
) {
    background: linear-gradient(145deg, #ffffff, #e9edf3) !important;
    border: 1px solid #d8dde6 !important;
    box-shadow: 3px 4px 9px rgba(30, 41, 59, 0.10), -2px -2px 6px #ffffff, inset 0 1px 0 #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    #model-toggle-button,
    .header-icon-btn,
    #quick-actions-toggle.main-trigger-btn
):active {
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 7px rgba(30, 41, 59, 0.12), inset -3px -3px 7px #ffffff !important;
}

/* Studio: panels and controls share one solid, softly embossed system. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-settings-card,
    .sp-toolbar-row,
    .sp-credit-plan
) {
    background: linear-gradient(145deg, #ffffff, #edf0f5) !important;
    border: 1px solid #dce1e9 !important;
    box-shadow: 5px 7px 14px rgba(30, 41, 59, 0.10), -4px -4px 10px #ffffff, inset 0 1px 0 #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-settings-card
):hover {
    background: linear-gradient(145deg, #ffffff, #e8edf4) !important;
    border-color: color-mix(in srgb, var(--sp-accent, #7c3aed) 38%, #d6dbe4) !important;
    box-shadow: 7px 10px 18px rgba(30, 41, 59, 0.13), -4px -4px 10px #ffffff, inset 0 1px 0 #ffffff !important;
    transform: translateY(-2px) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-settings-card
):active {
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 8px rgba(30, 41, 59, 0.13), inset -3px -3px 8px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-suite-btn,
    .sp-tier-tab,
    .sp-wallet-btn,
    .sp-close,
    .sp-sidebar-foot,
    .sp-toolbar-actions button,
    .sp-picker-back,
    .sp-trial-more-toggle,
    .sp-credit-wallet-link,
    .sp-delete-workspace,
    .sp-workspace-remove,
    .sp-tool-fav
) {
    background: linear-gradient(145deg, #ffffff, #e9edf3) !important;
    border: 1px solid #d9dee7 !important;
    box-shadow: 3px 4px 9px rgba(30, 41, 59, 0.09), -2px -2px 6px #ffffff, inset 0 1px 0 #ffffff !important;
}

/* The catalogue's active trial state normally uses white text on cyan. The
   raised light-theme rule above replaces that cyan fill, so restore a readable
   dark-teal foreground (including the gift icon) on the pale button. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-wallet-btn.sp-trial-active {
    background: linear-gradient(145deg, #f0fdff, #dff7fa) !important;
    border-color: #9bdde5 !important;
    color: #075985 !important;
}

/* The raised light surface also replaces the balance button's teal fill.
   Keep its foreground dark enough to remain readable on that pale surface. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-credit-wallet-link {
    color: #075985 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-credit-wallet-link i {
    color: inherit !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-suite-btn,
    .sp-tier-tab,
    .sp-wallet-btn,
    .sp-close,
    .sp-sidebar-foot,
    .sp-toolbar-actions button,
    .sp-picker-back,
    .sp-trial-more-toggle,
    .sp-credit-wallet-link,
    .sp-delete-workspace,
    .sp-workspace-remove,
    .sp-tool-fav
):active,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(.sp-suite-btn, .sp-tier-tab).active {
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 7px rgba(30, 41, 59, 0.12), inset -3px -3px 7px #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-tool-search input,
    .sp-profile-language-select,
    .sp-toolbar-row input,
    .sp-toolbar-row select,
    .sp-toolbar-options-row select
) {
    background: #f2f4f8 !important;
    border-color: #d6dbe4 !important;
    box-shadow: inset 2px 2px 6px rgba(30, 41, 59, 0.08), inset -2px -2px 6px #ffffff !important;
}

/* Model selector: solid light shell, raised categories/options and pressed
   active choices. These selectors outrank the late dark-first picker sheet. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay .universal-sheet {
    color: #172033 !important;
    background: #f5f7fa !important;
    border-color: #d8dee8 !important;
    box-shadow: 14px 20px 42px rgba(30, 41, 59, 0.18), -6px -6px 16px #ffffff, inset 0 1px 0 #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(.us-header, .us-content, .us-footer) {
    background: #f5f7fa !important;
    border-color: #dce1e9 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(
    .us-title-group h3,
    .us-category summary,
    .us-btn,
    .us-persona
) {
    color: #273142 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(
    .us-category,
    .us-btn,
    .us-persona,
    .us-close-btn
) {
    background: linear-gradient(145deg, #ffffff, #e9edf3) !important;
    border: 1px solid #d9dee7 !important;
    box-shadow: 3px 4px 9px rgba(30, 41, 59, 0.10), -2px -2px 6px #ffffff, inset 0 1px 0 #ffffff !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(.us-btn, .us-persona, .us-close-btn):hover {
    background: linear-gradient(145deg, #ffffff, #e5eaf1) !important;
    border-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.42) !important;
    box-shadow: 5px 7px 12px rgba(30, 41, 59, 0.13), -2px -2px 6px #ffffff !important;
    transform: translateY(-1px) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(.us-btn, .us-persona):active,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay :is(.us-btn, .us-persona).active {
    color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.10) !important;
    border-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.52) !important;
    transform: translateY(1px) !important;
    box-shadow: inset 3px 3px 7px rgba(30, 41, 59, 0.13), inset -3px -3px 7px #ffffff !important;
}

/* Tool workspaces looked cleaner in their original solid-white light mode.
   Keep translucency exclusive to dark themes while retaining the compact
   image/video layout and all other panel refinements. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass):not(.perf-lite) :is(
    #suite-panel-overlay .sp-shell,
    [id^="ind-tool-"][id$="-overlay"] .it-card,
    #img-flow-box
) {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass):not(.perf-lite) #suite-panel-overlay :is(.sp-main, .sp-sidebar) {
    background: #ffffff !important;
}

/* style.css deliberately forces folder-card copy white for its original dark
   modal. Restore explicit light-theme ink now that the light workspace uses
   white cards. This selector is intentionally more specific than that legacy
   rule so custom text colours cannot create white-on-white cards again. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) #folder-manager-overlay :is(
    .folder-header h2,
    #active-folder-title,
    .chat-card-title
) {
    color: #172033 !important;
    opacity: 1 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) #folder-manager-overlay :is(
    .chat-card-date,
    .folder-btn:not(.active)
) {
    color: #64748b !important;
}

/* ==========================================================================
   GEEK STATS (#geek-overlay, which is itself the .geek-panel) — always dark
   with white text, every theme/device. The #id selector here outranks the
   white-background rules in style.css / gloss-workspaces.css and the dark
   surface in dark-gloss-panels.css, so the panel reads consistently dark.
   NOTE: this panel is deliberately NOT in the backdrop-transparency list
   above — it is a floating panel, not a scrim.
   ========================================================================== */
#geek-overlay.geek-panel {
    background: rgba(12, 12, 14, 0.94) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    border-left: 3px solid #635bff !important;
    box-shadow: -18px 12px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
#geek-overlay h3 { color: #ffffff !important; }
#geek-overlay .stat-group { border-color: rgba(255, 255, 255, 0.12) !important; }
#geek-overlay .stat-group span { color: #ffffff !important; }
#geek-overlay .stat-group label { color: rgba(255, 255, 255, 0.6) !important; }
#geek-overlay .geek-close { color: rgba(255, 255, 255, 0.6) !important; }

/* ==========================================================================
   LIGHT PANEL SYSTEM
   Keep the clean white / black language while allowing the chosen theme to
   leave a restrained tint on every panel and boundary.
   Loaded last so legacy per-tool pastel and accent rules cannot leak through.
   ========================================================================== */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) {
    --panel-mono-bg: color-mix(in srgb, var(--theme-panel-color, #7c3aed) 3.5%, #ffffff);
    --panel-mono-soft: color-mix(in srgb, var(--theme-panel-color, #7c3aed) 7%, #f4f4f5);
    --panel-mono-hover: color-mix(in srgb, var(--theme-panel-color, #7c3aed) 9%, #ededee);
    --panel-mono-pressed: color-mix(in srgb, var(--theme-panel-color, #7c3aed) 11%, #dedfe1);
    --panel-mono-ink: #090909;
    --panel-mono-muted: #555a61;
    --panel-mono-line: color-mix(in srgb, var(--theme-panel-color, #7c3aed) 18%, #d8dadd);
    /* Every formerly-purple panel accent follows the user's selected accent.
       Keep a shared RGB companion so focus rings and soft icon bases swap too. */
    --panel-purple: var(--panel-accent, var(--theme-primary, #4a90e2));
    --panel-purple-rgb: var(--panel-accent-rgb, 74, 144, 226);
    --panel-purple-soft: rgba(var(--panel-purple-rgb), 0.10);
    --gw-ink: var(--panel-mono-ink);
    --gw-strong: var(--panel-mono-ink);
    --gw-muted: var(--panel-mono-muted);
    --gw-line: var(--panel-mono-line);
    --gw-accent: #111111;
    --gw-surface: var(--panel-mono-bg);
    --gw-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 1px 0 #ffffff inset;
}

/* Default Light is the pristine reference surface (owner-directed,
   2026-08-25). It deliberately carries no purple/pink wash: colour belongs
   to icons, selection and hover feedback, never the panel canvas itself. */
html.light-mode.theme-accent-default {
    --surface-base: #ffffff;
    --surface-panel: #ffffff;
    --surface-raised: #ffffff;
    --surface-card: #ffffff;
    --surface-input: #ffffff;
    --surface-hover: #f4efff;
    --surface-selected: #ede4ff;
    --background-color: #ffffff;
    --wallpaper-fallback-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --input-area-bg: #ffffff;
    --settings-modal-bg: #ffffff;
    --ai-message-bg: #ffffff;
    --input-bg: #ffffff;
    --background-color-transparent: rgba(255,255,255,.98);
    --panel-mono-bg: #ffffff;
    --panel-mono-soft: #f2ebff;
    --panel-mono-hover: #eadfff;
    --panel-mono-pressed: #dfceff;
    --panel-mono-line: #dedde4;
    --panel-purple: #6022c8;
    --panel-purple-rgb: 96, 34, 200;
    --panel-purple-soft: rgba(96,34,200,.11);
    --gw-surface: #ffffff;
}

/* gloss-workspaces.css intentionally gives light inputs a black high-contrast
   treatment. Default Light is the explicit exception: every text/search
   surface is white with black ink, using the same selector contract plus the
   preset class so it wins without affecting any other theme. */
html.light-mode.theme-accent-default body:not(#asksary-input-theme) :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea,
    select
) {
    color: #111116 !important;
    -webkit-text-fill-color: #111116 !important;
    caret-color: #6022c8 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #d7d6de !important;
    box-shadow: none !important;
}

html.light-mode.theme-accent-default body:not(#asksary-input-theme) :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea
)::placeholder {
    color: #73737b !important;
    -webkit-text-fill-color: #73737b !important;
}

html.light-mode.theme-accent-default body:not(#asksary-input-theme) :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea,
    select
):focus {
    border-color: #6022c8 !important;
    box-shadow: 0 0 0 3px rgba(96,34,200,.11) !important;
}

html.light-mode.theme-accent-default body,
html.light-mode.theme-accent-default body :is(
    #sidebar.sidebar,
    #suite-panel-overlay .sp-shell,
    #suite-panel-overlay .sp-main,
    #suite-panel-overlay .sp-sidebar,
    #universal-model-overlay .universal-sheet,
    #universal-model-overlay .us-header,
    #universal-model-overlay .us-content,
    #universal-model-overlay .us-footer
) {
    background: #ffffff !important;
    background-image: none !important;
}

html.light-mode.theme-accent-default body #suite-panel-overlay .sp-main::before {
    display: none !important;
    background: none !important;
}

html.light-mode.theme-accent-default body #suite-panel-overlay :is(
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-settings-card,
    .sp-suite-btn,
    .sp-sidebar-foot,
    .sp-tool-search input,
    .sp-close
),
html.light-mode.theme-accent-default body #universal-model-overlay :is(
    .us-category,
    .us-category summary,
    .us-btn,
    .us-persona,
    .us-close-btn
) {
    color: #111116 !important;
    -webkit-text-fill-color: #111116 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dedde4 !important;
    box-shadow: none !important;
}

/* The card ink rule above deliberately owns text contrast, but
   -webkit-text-fill-color is inherited by Font Awesome glyphs in Chromium.
   Reassert both colour channels so Default Light keeps its purple icon system
   instead of visually painting those glyphs black. */
html.light-mode.theme-accent-default body #suite-panel-overlay :is(
    .sp-tool-icon,
    .sp-tool-icon i,
    .sp-suite-btn-ico,
    .sp-suite-btn-ico i,
    .sp-settings-icon,
    .sp-settings-icon i
) {
    color: #6022c8 !important;
    -webkit-text-fill-color: #6022c8 !important;
}

html.light-mode.theme-accent-default body #suite-panel-overlay .sp-suite-btn.active :is(
    .sp-suite-btn-ico,
    .sp-suite-btn-ico i
) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html.light-mode.theme-accent-default body #suite-panel-overlay :is(
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-settings-card,
    .sp-suite-btn,
    .sp-sidebar-foot
):hover,
html.light-mode.theme-accent-default body #universal-model-overlay :is(
    .us-category summary,
    .us-btn,
    .us-persona
):hover {
    color: #35106f !important;
    -webkit-text-fill-color: #35106f !important;
    background: #eadfff !important;
    border-color: #6022c8 !important;
    box-shadow: 0 0 0 1px rgba(96,34,200,.10) !important;
}

html.light-mode.theme-accent-default body #suite-panel-overlay :is(.sp-suite-btn,.sp-tier-tab).active,
html.light-mode.theme-accent-default body #universal-model-overlay :is(.us-btn,.us-persona).active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #6022c8 !important;
    border-color: #6022c8 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    #sidebar.sidebar,
    .action-button-grid,
    #universal-settings-modal,
    #suite-panel-overlay .sp-shell,
    #suite-panel-overlay .sp-main,
    #suite-panel-overlay .sp-sidebar,
    [id^="ind-tool-"][id$="-overlay"] .it-card,
    .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,
    #agents-overlay > div
) {
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .prompt-header,
    .folder-header,
    .speech-header,
    .us-header,
    .us-content,
    .us-footer,
    .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,
    .prompt-sidebar,
    .folder-sidebar,
    .prompt-grid-container,
    .folder-content-area,
    .visual-grid,
    .notepad-tabs-container,
    [id^="ind-tool-"][id$="-overlay"] .it-head,
    [id^="ind-tool-"][id$="-overlay"] .it-main,
    [id^="ind-tool-"][id$="-overlay"] .it-foot
) {
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .action-button-grid .action-btn,
    #suite-panel-overlay .sp-tool-card,
    #suite-panel-overlay .sp-more-card,
    #suite-panel-overlay .sp-quick-card,
    #suite-panel-overlay .sp-settings-card,
    #suite-panel-overlay .sp-toolbar-row,
    #suite-panel-overlay .sp-credit-plan,
    #suite-panel-overlay .sp-suite-btn,
    #suite-panel-overlay .sp-tier-tab,
    #suite-panel-overlay .sp-wallet-btn,
    #suite-panel-overlay .sp-close,
    #suite-panel-overlay .sp-sidebar-foot,
    #suite-panel-overlay .sp-toolbar-actions button,
    #suite-panel-overlay .sp-picker-back,
    #suite-panel-overlay .sp-trial-more-toggle,
    #suite-panel-overlay .sp-credit-wallet-link,
    #suite-panel-overlay .sp-delete-workspace,
    #suite-panel-overlay .sp-workspace-remove,
    #suite-panel-overlay .sp-tool-fav,
    #universal-model-overlay .us-category,
    #universal-model-overlay .us-btn,
    #universal-model-overlay .us-persona,
    #universal-model-overlay .us-close-btn,
    .ifh-opt,
    .ifh-style,
    .ifh-chip,
    .cmd-item,
    .prompt-card,
    .folder-chat-card,
    .speech-lang-btn,
    .agent-card,
    .voice-option,
    .dg-card,
    .eq-card,
    .ntts-voice-pill,
    .ntts-lang-btn,
    .org-member-row,
    .modal-btn.secondary,
    .org-btn-ghost,
    .ntts-translate-cancel
) {
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .action-button-grid .action-btn,
    #suite-panel-overlay .sp-tool-card,
    #suite-panel-overlay .sp-more-card,
    #suite-panel-overlay .sp-quick-card,
    #suite-panel-overlay .sp-settings-card,
    #suite-panel-overlay .sp-suite-btn,
    #suite-panel-overlay .sp-tier-tab,
    #suite-panel-overlay .sp-wallet-btn,
    #suite-panel-overlay .sp-close,
    #suite-panel-overlay .sp-credit-wallet-link,
    #universal-model-overlay .us-btn,
    #universal-model-overlay .us-persona,
    #universal-model-overlay .us-close-btn,
    .ifh-opt,
    .ifh-style,
    .ifh-chip,
    .cmd-item,
    .prompt-card,
    .folder-chat-card,
    .speech-lang-btn,
    .agent-card,
    .voice-option,
    .dg-card,
    .ntts-voice-pill,
    .ntts-lang-btn
):hover {
    color: #000000 !important;
    background: var(--panel-mono-soft) !important;
    border-color: #999da3 !important;
    box-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    #suite-panel-overlay .sp-suite-btn.active,
    #suite-panel-overlay .sp-tier-tab.active,
    #suite-panel-overlay .sp-wallet-btn.sp-trial-active,
    #universal-model-overlay .us-btn.active,
    #universal-model-overlay .us-persona.active,
    .ifh-style.active,
    .ifh-chip.active,
    .category-btn.active,
    .folder-btn.active,
    .dg-chip.active,
    .note-tab.active
) {
    color: #ffffff !important;
    background: var(--panel-purple) !important;
    border-color: var(--panel-purple) !important;
    box-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .modal-btn.primary,
    .ifh-gen-btn,
    .org-btn-primary,
    .ob-btn-next,
    .tw-btn-next,
    #notepad-tts-generate
) {
    color: #ffffff !important;
    background: var(--panel-purple) !important;
    border-color: var(--panel-purple) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .modal-btn.primary,
    .ifh-gen-btn,
    .org-btn-primary,
    .ob-btn-next,
    .tw-btn-next,
    #notepad-tts-generate
):hover {
    background: color-mix(in srgb, var(--panel-purple) 82%, #000000) !important;
    border-color: color-mix(in srgb, var(--panel-purple) 82%, #000000) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :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,
    #suite-panel-overlay .sp-tool-search input,
    #suite-panel-overlay .sp-profile-language-select,
    #suite-panel-overlay .sp-toolbar-row input,
    #suite-panel-overlay .sp-toolbar-row select,
    #suite-panel-overlay .sp-toolbar-options-row select
) {
    color: var(--panel-mono-ink) !important;
    -webkit-text-fill-color: var(--panel-mono-ink) !important;
    caret-color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: #c9ccd1 !important;
    box-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :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
):focus {
    border-color: var(--panel-purple) !important;
    box-shadow: 0 0 0 2px rgba(var(--panel-purple-rgb), 0.14) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #img-flow-box :is(
    .ifh-hero,
    .ifh-hero-icon,
    .ifh-badge,
    .ifh-note,
    .ifh-panel,
    .ifh-opt .ifh-icon
) {
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
    box-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    .ifh-dot.active,
    .ob-dot.active,
    .tw-dot.active
) {
    background: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-shell {
    /* Keep the catalogue's original rich royal-purple identity. The global
       accent can be deliberately quieter elsewhere, but flattening this panel
       to that colour made its selected workspace and tool glyphs look washed
       out compared with the established Studio design. */
    --panel-purple: #6022c8 !important;
    --panel-purple-rgb: 96, 34, 200 !important;
    --panel-purple-soft: rgba(96, 34, 200, 0.10) !important;
    --sp-accent: var(--panel-purple) !important;
    --sp-accent-bg: var(--panel-purple-soft) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-suite-btn-ico,
    .sp-suite-icon,
    .sp-tool-icon,
    .sp-settings-icon
) {
    color: var(--panel-purple) !important;
    background: var(--panel-purple-soft) !important;
    border-color: var(--panel-mono-line) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-section-title::before,
    .sp-settings-switch input:checked + .sp-settings-slider
) {
    background: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-quick-card i,
    .sp-trial-more-toggle i
) {
    color: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-mode-card.active {
    color: var(--panel-purple) !important;
    background: var(--panel-purple-soft) !important;
    border-color: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #universal-model-overlay {
    --bubble-accent-color: var(--panel-purple) !important;
    --bubble-accent-color-rgb: var(--panel-purple-rgb) !important;
}

/* All full-screen independent tools (Game Engine, Writer, SQL, Slides, and
   their siblings) share these variables and structural classes. This removes
   the per-tool rainbow/gradient drift while keeping selected choices obvious. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] {
    --tool-a: var(--panel-purple) !important;
    --tool-b: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-card,
    .it-head,
    .it-main,
    .it-aside,
    .it-foot,
    .it-row,
    .it-outs span
) {
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-mark,
    .it-badge,
    .it-submit
) {
    color: #ffffff !important;
    background: var(--panel-purple) !important;
    border-color: var(--panel-purple) !important;
    box-shadow: none !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-section,
    .it-row i
) {
    color: var(--panel-purple) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-input,
    .it-textarea,
    input,
    textarea,
    select
) {
    color: var(--panel-mono-ink) !important;
    -webkit-text-fill-color: var(--panel-mono-ink) !important;
    caret-color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: #c9ccd1 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-input,
    .it-textarea,
    input,
    textarea,
    select
):focus {
    border-color: var(--panel-purple) !important;
    box-shadow: 0 0 0 3px rgba(var(--panel-purple-rgb), 0.14) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-chip,
    .it-choice,
    .it-toggle
) {
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    border-color: var(--panel-mono-line) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-chip.active,
    .it-choice.active,
    .it-toggle.active
) {
    color: var(--panel-purple) !important;
    background: var(--panel-purple-soft) !important;
    border-color: var(--panel-purple) !important;
}

/* Close controls use one compact square silhouette across every light panel.
   Require an explicit icon-only/accessibility contract: :has() alone cannot
   distinguish an icon-only button from an X icon followed by visible text. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    button.icon-only:has(> .fa-xmark),
    button.icon-only:has(> .fa-times),
    button.icon[aria-label]:has(> .fa-xmark),
    button.icon[aria-label]:has(> .fa-times),
    button[data-close][aria-label]:has(> .fa-xmark),
    button[data-close][aria-label]:has(> .fa-times),
    button[aria-label][title]:has(> .fa-xmark),
    button[aria-label][title]:has(> .fa-times),
    .sp-close,
    .cl-close,
    .dg-close,
    .org-modal-close,
    .flux-close,
    .preview-close,
    .ver-close,
    .gvs-icon-btn[data-close],
    .geek-close
) {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
    border: 1px solid var(--panel-mono-line) !important;
    border-radius: 7px !important;
    color: var(--panel-mono-ink) !important;
    background: var(--panel-mono-bg) !important;
    box-shadow: none !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body :is(
    button.icon-only:has(> .fa-xmark),
    button.icon-only:has(> .fa-times),
    button.icon[aria-label]:has(> .fa-xmark),
    button.icon[aria-label]:has(> .fa-times),
    button[data-close][aria-label]:has(> .fa-xmark),
    button[data-close][aria-label]:has(> .fa-times),
    button[aria-label][title]:has(> .fa-xmark),
    button[aria-label][title]:has(> .fa-times),
    .sp-close,
    .cl-close,
    .dg-close,
    .org-modal-close,
    .flux-close,
    .preview-close,
    .ver-close,
    .gvs-icon-btn[data-close],
    .geek-close
):hover {
    color: #ffffff !important;
    background: var(--panel-purple) !important;
    border-color: var(--panel-purple) !important;
}
#geek-overlay .geek-close:hover { color: #ffffff !important; }

/* Absolute Serenity is intentionally different from the other presets: no
   wallpaper glass, no coloured card wash, and no bright control chrome. The
   faint graphite rules keep the all-black hierarchy navigable. */
html.theme-stealth:not(.light-mode) {
    --panel-glass-bg: var(--surface-panel, #000000);
    --studio-panel-glass-bg: var(--surface-panel, #000000);
    --mobile-actions-glass-bg: var(--surface-panel, #000000);
    --panel-glass-subtle: var(--surface-raised, #0b0b0b);
    --panel-glass-card: var(--surface-card, #151515);
    --panel-glass-border: var(--border-default, #3a3a3a);
    --panel-glass-blur: none;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-shell,
    .sp-main,
    .sp-sidebar
) {
    background: #000000 !important;
    border-color: #2a2a2a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-card,
    .sp-tool-card,
    .sp-more-card,
    .sp-quick-card,
    .sp-toolbar-row,
    .sp-credit-plan,
    .sp-credit-group,
    .sp-tier-tabs,
    .sp-tier-tab,
    .sp-mode-card
) {
    background: #070707 !important;
    border-color: #292929 !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-card:hover,
    .sp-tool-card:hover,
    .sp-more-card:hover,
    .sp-quick-card:hover,
    .sp-tier-tab.active,
    .sp-mode-card.active
) {
    background: #0b0b0b !important;
    border-color: #3a3a3a !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-icon,
    .sp-suite-icon,
    .sp-suite-btn-ico,
    .sp-tool-icon,
    .sp-more-icon
) {
    color: var(--text-primary, #f5f5f5) !important;
    background: #1b1b1b !important;
    border: 1px solid #303030 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay .sp-section-title::before {
    background: #080808 !important;
    box-shadow: 0 0 0 1px #353535 !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-wallet-btn,
    .sp-wallet-btn.sp-trial-active,
    .sp-close,
    .sp-picker-back
) {
    color: #f5f5f5 !important;
    background: #050505 !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body :is(.hamburger,.header-icon-btn) {
    color: var(--text-primary, #f5f5f5) !important;
    background: #1b1b1b !important;
    border: 1px solid #303030 !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body :is(.hamburger,.header-icon-btn) i {
    color: var(--text-primary, #f5f5f5) !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-slider,
    .sp-settings-switch input:checked + .sp-settings-slider
) {
    background: #050505 !important;
    border-color: #3a3a3a !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay .sp-settings-slider::after {
    background: #151515 !important;
    border: 1px solid #4a4a4a !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-label,
    .sp-tool-name,
    .sp-more-name,
    .sp-section-title,
    .sp-suite-name,
    .sp-picker-title
) {
    color: #f5f5f5 !important;
}

html.theme-stealth:not(.light-mode) body #suite-panel-overlay :is(
    .sp-settings-value,
    .sp-tool-desc,
    .sp-picker-sub,
    .sp-suite-subtitle
) {
    color: #9a9a9a !important;
}

/* The greeting is navigation chrome, not conversation content. Keep it
   readable when a user-selected text colour (such as black) is active on any
   dark preset. */
html:not(.light-mode) body #sidebar #sidebar-greeting {
    color: #f5f7fb !important;
    -webkit-text-fill-color: #f5f7fb !important;
}

/* Shared panel action colour -------------------------------------------------
   The workspace gallery established violet as the product accent. Keep all
   panel actions, selected controls, and icon badges on that same palette
   instead of letting individual tools fall back to legacy blue/green tokens. */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] {
    --panel-accent: #6d28d9 !important;
    --panel-accent-rgb: 109, 40, 217 !important;
    --sp-accent: #6d28d9 !important;
    --sp-accent-bg: #6d28d9 !important;
    --tool-a: #6d28d9 !important;
    --tool-b: #8b5cf6 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-suite-btn.active,
    .sp-tier-tab.active,
    .sp-wallet-btn.sp-trial-active,
    .sp-mode-card.active
) {
    color: #ffffff !important;
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay :is(
    .sp-suite-btn-ico,
    .sp-settings-icon,
    .sp-suite-icon,
    .sp-tool-icon,
    .sp-more-icon
) {
    color: #6d28d9 !important;
    border-color: rgba(109, 40, 217, 0.24) !important;
    background: rgba(109, 40, 217, 0.10) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-suite-btn.active .sp-suite-btn-ico,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #suite-panel-overlay .sp-suite-btn.active .sp-suite-btn-ico :is(i, svg) {
    color: #ffffff !important;
    background: transparent !important;
    border-color: transparent !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-mark,
    .it-badge,
    .it-submit
) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body [id^="ind-tool-"][id$="-overlay"] :is(
    .it-section,
    .it-row i,
    .it-chip.active,
    .it-choice.active,
    .it-toggle.active
) {
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #global-modal-overlay .modal-icon-wrapper,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #global-modal-overlay .modal-btn.primary:not(.danger) {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    border-color: #6d28d9 !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) body #global-modal-overlay .modal-icon-wrapper {
    color: #6d28d9 !important;
    background: rgba(109, 40, 217, 0.10) !important;
}

/* Absolute Serenity: black utility surfaces and white icon detail. Violet is
   deliberately reserved for the Unleashed identity rather than action chrome. */
html.theme-stealth:not(.light-mode) body :is(
    .modal-btn.primary:not(.danger),
    .ifh-gen-btn,
    .org-btn-primary,
    .ob-btn-next,
    .tw-btn-next,
    #notepad-tts-generate,
    #add-folder-btn,
    .folder-pill.selected
) {
    color: #f5f5f5 !important;
    background: #050505 !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body :is(
    .custom-modal,
    .folder-modal,
    .prompt-modal,
    .speech-modal,
    .universal-sheet,
    .cmd-card,
    [id^="ind-tool-"][id$="-overlay"] .it-card
) {
    background: #000000 !important;
    border-color: #2a2a2a !important;
}

html.theme-stealth:not(.light-mode) body :is(
    .modal-icon-wrapper,
    .folder-modal .folder-header i,
    .folder-modal .folder-pill.selected i,
    .folder-modal #add-folder-btn i
) {
    color: #f5f5f5 !important;
    background: #050505 !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}

html.theme-stealth:not(.light-mode) body [id^="ind-tool-"][id$="-overlay"] {
    --tool-a: #050505 !important;
    --tool-b: #151515 !important;
}

html.theme-stealth:not(.light-mode) body [id^="ind-tool-"][id$="-overlay"] :is(.it-mark,.it-badge,.it-submit) {
    color: #f5f5f5 !important;
    background: #050505 !important;
    border: 1px solid #303030 !important;
    box-shadow: none !important;
}