/* The account menu offers three explicit, keyboard-accessible theme choices. */
html[data-appearance] body.theme-blue .banymay-header #settings-menu {
  background: linear-gradient(145deg, #063441, #061d2c) !important;
  background-image: linear-gradient(145deg, #063441, #061d2c) !important;
  border: 1px solid #285263 !important;
  border-radius: 14px !important;
}

/* Desktop account menu follows the selected Light or Black appearance. */
@layer dashboard-mobile-reference {
  @media (min-width: 1101px) {
    html[data-appearance="light"]:not([data-theme="warm-oak"]) body.theme-blue .banymay-header #settings-menu {
      --account-menu-bg:#ffffff; --account-menu-sub:#f2f7fb; --account-menu-text:#223f61;
      --account-menu-muted:#637f9a; --account-menu-line:#d9e6ee; --account-menu-hover:#edf6fb;
      --account-menu-accent:#008f89; --account-menu-active:#e7f7f5;
    }
    html[data-appearance="black"] body.theme-blue .banymay-header #settings-menu {
      --account-menu-bg:#191919; --account-menu-sub:#252525; --account-menu-text:#e9e9e9;
      --account-menu-muted:#b9b9b9; --account-menu-line:#414141; --account-menu-hover:#303030;
      --account-menu-accent:#60d8cd; --account-menu-active:#17433f;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu {
      background:var(--account-menu-bg) !important; background-image:none !important;
      border:1px solid var(--account-menu-line) !important; color:var(--account-menu-text) !important;
      box-shadow:0 14px 36px rgba(0,0,0,.18) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-menu-item,.settings-menu-row,.settings-logout-btn) {
      background:transparent !important; background-image:none !important; color:var(--account-menu-text) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-menu-copy,.settings-label,.settings-logout-btn,.settings-menu-item) {
      color:var(--account-menu-text) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-menu-item,.settings-logout-btn):is(:hover,:focus-visible) {
      background:var(--account-menu-hover) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-menu-icon,.settings-logout-icon) {
      background:var(--account-menu-sub) !important; background-image:none !important;
      border-color:var(--account-menu-line) !important; color:var(--account-menu-muted) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-language-trigger,.settings-language-menu,.settings-chip-row,#appearance-switch) {
      background:var(--account-menu-sub) !important; background-image:none !important;
      border-color:var(--account-menu-line) !important; color:var(--account-menu-text) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-language-current-name,.settings-language-option,.settings-chip,#appearance-switch .appearance-choice) {
      color:var(--account-menu-text) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-language-current-code,.settings-language-chevron,.settings-language-option-code) {
      background:var(--account-menu-bg) !important; color:var(--account-menu-accent) !important;
      border-color:var(--account-menu-line) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu .settings-language-option {
      background:var(--account-menu-bg) !important; border-color:transparent !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu .settings-language-option:is(:hover,[aria-selected="true"]) {
      background:var(--account-menu-hover) !important; color:var(--account-menu-accent) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-chip,#appearance-switch .appearance-choice) {
      background:transparent !important; border-color:var(--account-menu-line) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu :is(.settings-chip.active,#appearance-switch .appearance-choice[aria-pressed="true"]) {
      background:var(--account-menu-active) !important; border-color:var(--account-menu-accent) !important;
      color:var(--account-menu-accent) !important; box-shadow:inset 0 0 0 1px var(--account-menu-accent) !important;
    }
    :is(html[data-appearance="light"]:not([data-theme="warm-oak"]),html[data-appearance="black"]) body.theme-blue .banymay-header #settings-menu .settings-logout-btn {
      border-top:1px solid var(--account-menu-line) !important;
    }
  }
}

/* Final mobile Black-theme pass. These rules intentionally stay unlayered so
   they win over the shared Midnight/mobile-blue cascade loaded before this file. */
@media (max-width: 760px) {
  html[data-appearance="black"] body {
    --black-mobile-page: #090909;
    --black-mobile-surface: #181818;
    --black-mobile-surface-raised: #1c1c1c;
    --black-mobile-surface-soft: #222222;
    --black-mobile-border: #3c3c3c;
    --black-mobile-separator: #404040;
    --app-mobile-panel-surface: var(--black-mobile-surface);
    --banymay-app-page-bg: var(--black-mobile-page);
    background: var(--black-mobile-page) !important;
    background-image: none !important;
  }

  html[data-appearance="black"] body :is(
    .container,
    .container > .section,
    #dashboard-section,
    #sectors-section,
    #dividends-section,
    #stocks-gains-section,
    #taxes-section,
    #profile-section,
    #leaderboard-section,
    .profile-page.banymay-my-plan
  ) {
    background: var(--black-mobile-page) !important;
    background-image: none !important;
  }

  /* Dashboard */
  html[data-appearance="black"] body #dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section :is(
    .dashboard-panel,
    .dashboard-cash-flow,
    .dashboard-mobile-metric-group,
    .dashboard-summary-item,
    .dashboard-summary-rankscore
  ) {
    background: linear-gradient(135deg, var(--black-mobile-surface-raised), #141414) !important;
    background-image: linear-gradient(135deg, var(--black-mobile-surface-raised), #141414) !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section :is(
    .dashboard-cash-flow-list > .metric-row,
    .dashboard-cash-flow-list > .dashboard-insight-card,
    .dashboard-mobile-metric-rows > .dashboard-insight-card,
    .dashboard-advanced-metric-card
  ) {
    background: transparent !important;
    background-image: none !important;
    border-bottom-color: var(--black-mobile-separator) !important;
  }

  /* Allocation */
  html[data-appearance="black"] body #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section {
    --allocation-surface: var(--black-mobile-surface) !important;
    --allocation-border: var(--black-mobile-border) !important;
    --allocation-selected: var(--black-mobile-surface-soft) !important;
  }
  html[data-appearance="black"] body #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section :is(
    .allocation-switch-wrapper,
    .allocation-card,
    .allocation-stats,
    .allocation-account-panel,
    .allocation-accounts-card
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section :is(.allocation-table-head, .allocation-item, .allocation-country-item) {
    border-color: var(--black-mobile-separator) !important;
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section .allocation-option {
    border-right-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section .allocation-option.active {
    background: var(--black-mobile-surface-soft) !important;
  }

  /* Dividends */
  html[data-appearance="black"] body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section :is(
    #dividends-monthly-table tbody tr,
    #dividends-annual-table tbody tr,
    .dividends-table-pagination,
    .table-pagination,
    .pagination-controls
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section #dividends-monthly-table tbody tr::after {
    border-top-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section #dividends-monthly-table tbody td {
    border-color: var(--black-mobile-separator) !important;
  }

  /* Realized P&L. Column and row separators are deliberately neutral gray. */
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section {
    --pr-page: var(--black-mobile-page) !important;
    --pr-panel: var(--black-mobile-surface) !important;
    --pr-line: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section :is(
    #realized-pl-summary .realized-pl-card,
    #stocks-gains-table-body > tr
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section #stocks-gains-table-body td[data-field="symbol"],
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section .realized-mobile-meta > span {
    border-left: 1px solid var(--black-mobile-separator) !important;
    border-right-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section #stocks-gains-table-body td.realized-mobile-meta {
    border-top: 1px solid var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section .realized-mobile-meta > span:first-child {
    border-left: 0 !important;
  }

  /* Taxes mobile cards use their own theme tokens and explicit grid dividers. */
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section {
    --tx-page: var(--black-mobile-page) !important;
    --tx-panel: var(--black-mobile-surface) !important;
    --tx-line: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section :is(
    .taxes-mobile-yearbar,
    .capital-gains-calculation,
    .taxes-mobile-country,
    .taxes-mobile-metrics,
    .taxes-mobile-metric
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section .taxes-mobile-metric {
    border-right-color: var(--black-mobile-separator) !important;
    border-top-color: var(--black-mobile-separator) !important;
  }

  /* Keep dashboard panels and their internal separators neutral in Black. */
  html[data-appearance="black"] body #dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section {
    --dashboard-page: var(--black-mobile-page) !important;
    --dashboard-panel-bg: var(--black-mobile-surface) !important;
    --dashboard-panel-alt: var(--black-mobile-surface) !important;
    --dashboard-border: var(--black-mobile-border) !important;
    --dashboard-grid: var(--black-mobile-separator) !important;
    --dashboard-divider: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section :is(
    .dashboard-panel,
    .dashboard-performance,
    .dashboard-risk,
    .dashboard-breakdown-table,
    .dashboard-cash-flow,
    .dashboard-advanced-metric-card
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }

  /* Taxes */
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section :is(
    .taxes-card,
    .capital-gains-calculation,
    .taxes-mobile-country,
    .taxes-mobile-metric,
    .taxes-mobile-toggle
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section :is(.taxes-mobile-metrics, .taxes-mobile-metric, .capital-gains-option) {
    border-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section .capital-gains-option input[type="radio"] {
    background: #111111 !important;
    border-color: #777777 !important;
  }
  html[data-appearance="black"] body #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section .capital-gains-option input[type="radio"]:checked {
    background: #36ddbb !important;
    border-color: #36ddbb !important;
    box-shadow: inset 0 0 0 4px #111111 !important;
  }

  /* My Plan */
  html[data-appearance="black"] body #profile-section#profile-section#profile-section#profile-section#profile-section#profile-section#profile-section .profile-page.banymay-my-plan {
    --plan-bg: var(--black-mobile-page) !important;
    --plan-surface: var(--black-mobile-surface) !important;
    --plan-border: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #profile-section#profile-section#profile-section#profile-section#profile-section#profile-section#profile-section :is(
    .my-plan-sidebar,
    .my-plan-nav,
    .my-plan-kpis,
    .my-plan-kpi-card,
    .my-plan-panel,
    .my-plan-projection-assumption,
    .my-plan-projection-result,
    .my-plan-lifestyle-item,
    .my-plan-indicator-item,
    .rr-kpi,
    .rr-panel,
    .rr-summary,
    .rr-assumptions
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #profile-section#profile-section#profile-section#profile-section#profile-section#profile-section#profile-section .my-plan-nav-item.is-active {
    background: var(--black-mobile-surface-soft) !important;
    border-color: #606060 !important;
  }
  html[data-appearance="black"] body #profile-section#profile-section#profile-section#profile-section#profile-section#profile-section#profile-section :is(
    .my-plan-kpi-card,
    .my-plan-retirement-row,
    .my-plan-fi-stat,
    .my-plan-indicator-item
  ) {
    border-color: var(--black-mobile-separator) !important;
  }

  /* Leaderboard */
  html[data-appearance="black"] body #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section {
    --lb-panel: var(--black-mobile-surface) !important;
    --lb-soft: var(--black-mobile-surface-soft) !important;
    --lb-border: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section :is(
    .leaderboard-summary-grid,
    .leaderboard-top-cards,
    .leaderboard-table-card,
    .leaderboard-table,
    #leaderboard-popular,
    .leaderboard-filters,
    .leaderboard-filters > *,
    .leaderboard-mobile-investor-card,
    .leaderboard-mobile-risk-values
  ) {
    background: var(--black-mobile-surface) !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
  html[data-appearance="black"] body #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section :is(
    .leaderboard-top-cards .leaderboard-card,
    .leaderboard-table thead th,
    .leaderboard-table tbody td,
    .leaderboard-mobile-stats,
    .leaderboard-mobile-stats > div,
    .leaderboard-mobile-risk-value
  ) {
    border-color: var(--black-mobile-separator) !important;
  }
  html[data-appearance="black"] body #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section :is(input, select) {
    background: #101010 !important;
    background-image: none !important;
    border-color: var(--black-mobile-border) !important;
  }
}
html[data-appearance] body.theme-blue .banymay-header #settings-menu :is(.settings-menu-item, .settings-menu-copy, .settings-label, .settings-chip, .settings-logout-btn) {
  color: #edf5fb !important;
}
html[data-appearance] body.theme-blue .banymay-header #settings-menu :is(.settings-menu-icon, .settings-logout-icon) { color: #b4c4d4 !important; }
html[data-appearance] body.theme-blue .banymay-header #settings-menu .settings-logout-btn {
  border-top: 1px solid #285263 !important; border-radius: 0 !important; margin-top: 8px !important;
}
html body .banymay-header #settings-menu .settings-menu-row-appearance {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important;
}
html body .banymay-header #settings-menu #appearance-switch {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  box-sizing: border-box !important; width: 100% !important; height: auto !important;
  flex: none !important; padding: 3px !important; border: 1px solid #285263 !important;
  border-radius: 10px !important; background: #061f2d !important; gap: 2px !important;
}
html body .banymay-header #settings-menu #appearance-switch::before { display: none !important; }
html body .banymay-header #settings-menu #appearance-switch .appearance-choice {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; min-height: 68px !important; padding: 6px 2px !important; gap: 5px !important;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important;
  color: #edf5fb !important; font: 600 12px/1.2 Inter, system-ui, sans-serif !important;
  pointer-events: auto !important; cursor: pointer !important;
}
html body .banymay-header #settings-menu #appearance-switch .appearance-choice[aria-pressed="true"] {
  background: #10495a !important; border-color: #19d2e2 !important; box-shadow: inset 0 0 0 1px #19d2e2 !important;
}
html body .banymay-header #settings-menu #appearance-switch .appearance-choice:focus-visible { outline: 2px solid #71ecf2 !important; outline-offset: 1px !important; }
html body .banymay-header #settings-menu .appearance-swatch { display: block; box-sizing: border-box; width: 23px; height: 23px; border: 1px solid #8094a3; border-radius: 50%; }
html body .banymay-header #settings-menu .appearance-swatch-light { background: #f4f4f4; border-color: #f4f4f4; }
html body .banymay-header #settings-menu .appearance-swatch-dark { background: radial-gradient(circle at 30% 25%, #425676, #041539 70%); }
html body .banymay-header #settings-menu .appearance-swatch-black { background: #000; }
html body .banymay-header #settings-menu .appearance-swatch-warm-oak {
  background: linear-gradient(135deg, #e7cba5 0%, #f7f1e7 52%, #b88c5c 100%) !important;
  border-color: #b88c5c !important;
}

/* Black surfaces are isolated in the first important cascade layer, so the
   existing page-specific dark rules cannot paint blue over them. */
@layer dashboard-mobile-reference {
  html[data-appearance="black"] body {
    --app-mobile-panel-surface: #181818;
    --banymay-app-page-bg: #090909;
    background: #090909 !important;
    background-image: none !important;
    color-scheme: dark;
  }
  html[data-appearance="black"] body > .container,
  html[data-appearance="black"] body .container > .section,
  html[data-appearance="black"] body :is(.profile-page, .settings-layout, .settings-page, .settings-main-panel, .settings-content, .settings-card-stack, .settings-account-layout, .settings-platform-layout) {
    background: #090909 !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body nav.navbar.banymay-header { background: #090909 !important; }
  html[data-appearance="black"] body nav.navbar.banymay-header .banymay-header__inner,
  html[data-appearance="black"] body .app-footer {
    background: #090909 !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body nav.navbar.banymay-header::before,
  html[data-appearance="black"] body nav.navbar.banymay-header::after {
    background: transparent !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body .container > .section :is(
    .panel, .card, [class$="-panel"], [class*="-panel "],
    [class$="-card"], [class*="-card "], [class*="-card--"],
    .chart-container, .performance-chart-container, .portfolio-summary-strip,
    .portfolio-summary-item, .stocks-toolbar, .stocks-action-row, .stocks-table-scroll,
    .deposits-invested-band, .deposits-stat-band, .deposits-history-toolbar,
    .deposits-table-pagination, .deposits-history-footer, .withdrawals-mobile-overview,
    .withdrawals-table-scroll, .wd-desktop-toolbar, .wd-desktop-footer, .wd-total-row,
    .dv-desktop-filters, .dividends-page-action-row, .allocation-switch-wrapper,
    .settings-form-section, .settings-category-picker, .settings-category-menu,
    .billing-overview-grid, .download-section-heading, .download-format-group,
    .download-date-group, .chart-history-controls, .chart-history-filter-menu,
    .my-plan-projection-assumption, .my-plan-lifestyle-item, .my-plan-indicator-item,
    .rr-kpi, .rr-summary, .rr-assumptions, .taxes-mobile-country, .capital-gains-calculation
  ):not(.settings-card-stack):not(.settings-main-panel):not(.settings-side-panel):not(.taxes-panels):not(.dashboard-summary) {
    background: linear-gradient(135deg, #1c1c1c, #141414) !important;
    background-image: linear-gradient(135deg, #1c1c1c, #141414) !important;
  }
  /* Settings includes independent layouts whose surfaces are not generic cards. */
  html[data-appearance="black"] body #settings-section :is(
    .account-actions--editor, .billing-hero, .billing-expired-features,
    .billing-expired-security, .billing-detail-card, .download-data-hero,
    .download-export-options, .download-data-security, .contact-form--reference,
    .chart-history-panel, .chart-history-controls, .chart-history-filter-menu,
    .fi-formula-hero, .fi-formula-coverage-card, .fi-formula-card,
    .settings-mobile-account-switcher, .settings-mobile-switcher-options
  ) {
    background: linear-gradient(135deg, #1c1c1c, #141414) !important;
    background-image: linear-gradient(135deg, #1c1c1c, #141414) !important;
  }
  html[data-appearance="black"] body #settings-section :is(
    .billing-hero-glow, .download-section-heading, .download-format-group,
    .download-date-group, .download-export-controls
  ) {
    background: transparent !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body #settings-section :is(
    .contact-input-wrap, .download-date-fields, .chart-history-search,
    .chart-history-id-range, .chart-history-date-range
  ) {
    background: #111111 !important;
    background-image: none !important;
    border-color: #3c3c3c !important;
  }
  /* Desktop summary bars, navigation and table toolbars are separately styled
     by the Midnight theme and need their own Black surfaces. */
  html[data-appearance="black"] body .container > .section :is(
    .dashboard-summary, .settings-side-panel, .stocks-toolbar, .stocks-action-row,
    .stocks-search-control, .stocks-action-btn:not(.stocks-action-btn--primary),
    .leaderboard-table-toolbar, .leaderboard-filters, .leaderboard-search, .leaderboard-filter,
    .deposits-history-toolbar, .wd-desktop-toolbar, .dv-desktop-filters,
    .realized-pl-desktop-filters, .realized-pl-table-scroll, .settings-input-shell, .account-input-wrap,
    .allocation-stats, .allocation-switch, .my-plan-kpis, .admin-sidebar, .admin-main,
    .desktop-table-shell, .desktop-table-toolbar
  ) {
    background: linear-gradient(135deg, #1c1c1c, #141414) !important;
    background-image: linear-gradient(135deg, #1c1c1c, #141414) !important;
  }
  html[data-appearance="black"] body .container > .section :is(
    .dashboard-summary-item, .dashboard-summary-rankscore
  ) {
    background: transparent !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body #dashboard-section :is(
    .dashboard-risk-legend-item, .dashboard-advanced-metrics-grid, .dashboard-insight-card
  ) {
    border-color: #3c3c3c !important;
  }
  html[data-appearance="black"] body :is(.mobile-deposit-editor-card, .withdrawals-mobile-edit-form, .action-menu-panel, .deposits-action-menu-panel, .account-crop-dialog) {
    background: linear-gradient(135deg, #1c1c1c, #141414) !important;
    background-image: linear-gradient(135deg, #1c1c1c, #141414) !important;
  }
  html[data-appearance="black"] body .container > .section :is(table, thead, tbody, tr, th, td) {
    background-color: #181818 !important;
    background-image: none !important;
  }
  html[data-appearance="black"] body .container > .section :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    background-color: #090909 !important;
    color: #eef4f6 !important;
    border-color: #3c3c3c !important;
  }
  @media (max-width: 760px) {
    html[data-appearance="black"] body .container > .section :is(
      .stocks-mobile-holding, #deposits-tbody tr, #withdrawals-table-body tr,
      #dividends-monthly-table tbody tr, #dividends-annual-table tbody tr,
      #stocks-gains-table-body tr, .chart-history-table tbody tr
    ) {
      background: linear-gradient(135deg, #1c1c1c, #141414) !important;
      background-image: linear-gradient(135deg, #1c1c1c, #141414) !important;
    }
  }
}