@layer mobile-dark-surfaces {
 @media (max-width:760px) {
  html body nav.navbar.banymay-header {
    background: rgba(6,23,32,.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
  }
  html[data-appearance="light"] body nav.navbar.banymay-header {
    background: rgba(248,252,255,.82) !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section :is(.settings-card,.settings-form-section,.billing-hero,.billing-detail-card,.billing-expired-features,.billing-expired-security,.download-data-hero,.download-export-options,.download-data-security,.contact-form,.chart-history-table-wrap,.fi-formula-hero,.fi-formula-card,.fi-formula-coverage-card,.fi-formula-glossary,.settings-mobile-account-switcher,.settings-mobile-account-switcher > summary,.settings-mobile-switcher-options) {
    border: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(135deg,#153443 0%,#0b1d2b 90%) !important;
    border-radius: 12px !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section :is(.settings-card,.settings-main-panel,.settings-content,.billing-panel,.settings-account-layout,.settings-platform-layout) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section :is(.billing-price-block,.billing-plan-copy,.billing-hero-main,.billing-price-column,.billing-feature-grid article,.fi-formula-equation,.fi-formula-note) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
 }
}
/* Extend the Dashboard mobile blue card gradient across every dark page. */
@layer mobile-dark-surfaces {
@media (max-width: 760px) {

  /* Settings subpages: cover their named interior surfaces as well as generic cards. */
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section.active :is(
    .settings-form-section, .billing-hero, .billing-detail-card,
    .billing-expired-features, .billing-expired-security,
    .download-data-hero, .download-export-options, .download-data-security,
    .contact-form, .chart-history-table-wrap, .fi-formula-hero,
    .fi-formula-card, .fi-formula-coverage-card, .fi-formula-glossary,
    .settings-mobile-account-switcher > summary, .settings-mobile-switcher-options
  ) {
    background: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    border-color: rgba(142,191,207,.18) !important;
    color: #e5edf1 !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section.active :is(
    .settings-page, .settings-main-panel, .settings-side-panel,
    .settings-card-stack, .settings-card, .settings-content,
    .settings-platform-layout, .settings-account-layout, .billing-panel,
    .download-data-page, .chart-history-panel, .fi-formula-library
  ) {
    background: transparent !important;
    background-image: none !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section.active :is(
    .settings-field > input, .settings-field > select, .account-input-wrap,
    .settings-input-shell, .contact-input-wrap, .download-date-fields,
    .chart-history-search, .chart-history-id-range, .chart-history-date-range
  ) {
    background: #092330 !important;
    border-color: #294958 !important;
    color: #dce8f0 !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section.active .chart-history-table :is(tbody, tr, td) {
    background: transparent !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section.active .chart-history-table thead th {
    background: #0b2534 !important;
    color: #a8bfce !important;
  }
}
}
@layer mobile-dark-surfaces {
@media (max-width: 760px) {
  html body #stocks-section .stocks-mobile-summary {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Mobile Stocks summary only shows the live holdings count, in either theme. */
  html body #stocks-section .stocks-mobile-summary .stocks-mobile-total {
    display: none !important;
  }
  html body #stocks-section .stocks-mobile-summary .stocks-mobile-title > span {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  html:not([data-appearance="light"]) body {
    --app-mobile-panel-surface: #0b2534;
    background: radial-gradient(ellipse at top left, #08333e 0%, #061720 55%) fixed !important;
  }
  html:not([data-appearance="light"]) body :is(.container, .container > .section, .banymay-header, .profile-page, .settings-layout, .settings-content) {
    background: transparent !important;
    background-image: none !important;
  }
  html:not([data-appearance="light"]) body #stocks-section#stocks-section#stocks-section#stocks-section #add-row-btn#add-row-btn {
    background: #23dee6 !important;
    background-color: #23dee6 !important;
    background-image: none !important;
    border-color: #23dee6 !important;
    color: #082b33 !important;
    -webkit-text-fill-color: #082b33 !important;
    opacity: 1 !important;
  }

  html:not([data-appearance="light"]) body :is(
    #dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section#dashboard-section,
    #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section,
    #sectors-section#sectors-section#sectors-section#sectors-section#sectors-section#sectors-section,
    #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section,
    #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section,
    #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section,
    #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section,
    #taxes-section#taxes-section#taxes-section#taxes-section#taxes-section#taxes-section,
    #profile-section#profile-section#profile-section#profile-section#profile-section#profile-section,
    #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section,
    #leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section#leaderboard-section,
    #admin-section#admin-section#admin-section#admin-section#admin-section#admin-section
  ).active :is(
    .panel, .card, .portfolio-summary-item, .deposits-stat-band,
    .deposits-invested-band, .withdrawals-mobile-overview,
    .withdrawals-summary-panel, .stocks-mobile-panel, .allocation-item,
    .allocation-account-panel, .my-plan-sidebar, .my-plan-nav,
    .my-plan-projection-tabs, .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, .taxes-mobile-country,
    .capital-gains-calculation, .taxes-mobile-metric,
    [class$="-panel"], [class*="-panel "], [class$="-card"],
    [class*="-card "], [class*="-card--"]
  ):not(.settings-card-stack):not(.taxes-panels):not(.dashboard-summary) {
    background: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    background-image: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    border-radius: 12px !important;
    border-color: transparent !important;
  }

  html:not([data-appearance="light"]) body :is(
    #stocks-section#stocks-section#stocks-section#stocks-section#stocks-section#stocks-section.active .stocks-mobile-holding,
    #deposits-section#deposits-section#deposits-section#deposits-section#deposits-section#deposits-section.active #deposits-tbody tr,
    #withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section#withdrawals-section.active #withdrawals-table-body tr,
    #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section.active #dividends-monthly-table tbody tr,
    #dividends-section#dividends-section#dividends-section#dividends-section#dividends-section#dividends-section.active #dividends-annual-table tbody tr,
    #stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section#stocks-gains-section.active #stocks-gains-table-body tr
  ) {
    background: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    background-image: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    border-radius: 12px !important;
    border: 0 !important;
    margin-bottom: 7px !important;
  }

  html:not([data-appearance="light"]) body :is(.mobile-deposit-editor-card,.withdrawals-mobile-edit-form,.action-menu-panel,.deposits-action-menu-panel) {
    background: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
    background-image: linear-gradient(135deg, #153443 0%, #0b1d2b 90%) !important;
  }
  html:not([data-appearance="light"]) body :is(.stocks-mobile-summary,.deposits-invested-band,.deposits-stat-band,.allocation-account-panel) {
    background: linear-gradient(120deg,#10505a,#102c3c 55%,#0b1c2c) !important;
    border-radius: 12px !important;
    border: 0 !important;
  }
  html:not([data-appearance="light"]) body :is(.stocks-mobile-list,.stocks-mobile-row,#deposits-table-view,.deposits-history-card,.deposits-table-scroll,.allocation-accounts-card) {
    background: transparent !important;
    background-image: none !important;
  }
  html:not([data-appearance="light"]) body #stocks-section .stocks-mobile-summary {
    padding: 20px !important;
    margin-bottom: 12px !important;
  }
  html:not([data-appearance="light"]) body #stocks-section .stocks-mobile-total {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html:not([data-appearance="light"]) body #stocks-section .stocks-mobile-total strong {
    font-size: 32px !important;
    color: #69eff7 !important;
  }
  html:not([data-appearance="light"]) body #stocks-section .stocks-mobile-row {
    padding: 12px 14px !important;
    min-height: 72px !important;
  }
  html:not([data-appearance="light"]) body #deposits-section #deposits-tbody tr:not(.editing) {
    padding: 6.75px 14px !important;
    min-height: 58.5px !important;
    height: auto !important;
  }
}
}
/* Named mobile Settings surfaces, including dynamically rendered picker and rows. */
@layer mobile-dark-surfaces {
 @media(max-width:760px) {
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section {
    --settings-ref-border: transparent;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section :is(.settings-category-picker,.settings-category-menu,
    .billing-overview-grid,.billing-hero,.billing-detail-card,
    .download-section-heading,.download-format-group,.download-date-group,
    .chart-history-controls,.chart-history-filter-menu,
    .chart-history-table tbody tr) {
    background: linear-gradient(135deg,#153443 0%,#0b1d2b 90%) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section :is(.billing-overview-grid,.billing-hero-main,.billing-plan-copy,
    .billing-price-column,.billing-price-block,.download-export-options,
    .download-export-controls,.chart-history-table,.chart-history-table tbody,
    .chart-history-table-wrap,.chart-history-panel) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section .chart-history-table tbody td {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section .download-section-heading {
    border-radius: 12px 12px 0 0 !important;
  }
  html:not([data-appearance="light"]) body #settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section#settings-section .download-format-group {
    border-radius: 0 0 12px 12px !important;
  }
 }
}
@layer mobile-dark-surfaces {
 @media(max-width:760px) {
  html body #dashboard-section .dashboard-risk:not(.is-line) {
    height: auto !important; min-height: 0 !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: start !important;
    padding-top: 4px !important; padding-bottom: 4px !important;
    row-gap: 0 !important;
  }
  html body #dashboard-section .dashboard-risk > .balance-risk-info-strip {
    position: static !important; transform: none !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    min-height: 0 !important; margin: 3px 0 !important; padding: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    color: #fff !important; text-align: center !important;
    display: none !important; pointer-events: none !important;
  }
  html body #dashboard-section .dashboard-risk:not(.is-line) > .balance-risk-info-strip.is-visible {
    display: block !important; opacity: 1 !important; visibility: visible !important;
  }
  html body #dashboard-section .dashboard-risk > .balance-risk-info-strip .balance-risk-info-text {
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0 6px !important;
    color: #fff !important;
  }
 }
}