/* ============================================================
   MOBILE REDESIGN (Feature #14)
   Sits on top of style.css. Activates at <= 767px, and on a phone turned
   on its side (see LANDSCAPE PHONES below). The same query is MOBILE_MQ
   in js/mobile.js - change one, change both.
   Driven by `body[data-mobile-screen="assets|chart|positions"]`.
   ============================================================ */

/* #mob-symbol-bar and .mob-back-btn are live markup that specific screens
   switch on; they stay hidden by default. #mobile-shell and
   #mobile-user-dropdown used to be listed here too and have been deleted.

   #mobile-nav is NOT listed: it was, with !important, which switched the
   bottom menu off at every width. style.css hides it on desktop and shows
   it at <=767px, and the @media block below shows it for phones in
   landscape too; a display:none for it out here (this file loads after
   style.css) would override both and hide it again. */
#mob-symbol-bar, .mob-back-btn { display: none !important; }

/* New mobile layer elements are display:none on desktop and only
   un-hidden by the @media query below. Without these defaults the
   Sell/Buy bar + asset-list screen + bottom-sheet leak into the desktop
   layout (showed up as a stray "BUY SELL" text chip at the top-left of
   the chart toolbar). */
#mobile-hamburger-btn,
#mobile-fab,
#mobile-asset-list-screen,
#mobile-menu-sheet { display: none; }

/* mobile.js adds Back and Fullscreen to the chart toolbar the first time the
   window is phone-sized. Widen the window again and they stayed, as two
   unstyled buttons in the desktop toolbar. */
.m-chart-back-btn, .m-chart-fullscreen-btn { display: none; }
/* The same for the chart screen's indicators bar and sheet (mobile.js). */
#m-ind-bar, #m-ind-sheet { display: none; }

@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {

  :root { --m-safe-bottom: env(safe-area-inset-bottom, 0px); }

  body { overflow: hidden; }

  /* ---------- LANDSCAPE PHONES ----------
     A phone on its side is wider than 767px (a Pro Max is 932px), so it
     got the desktop grid: no bottom menu, a sidebar and a chart squeezed
     into 430px of height. The query above also takes a touch screen in
     landscape no taller than 500px - a phone, not a tablet.

     style.css's own phone rules stop at 767px, so the ones this layout
     relies on are repeated here. Below 767px they are the values
     style.css already applies. */
  #market-status-bar { display: none !important; }
  .topbar-left { gap: 4px; }
  .topbar-right { margin-left: auto; }
  #chart-zoom-group, .draw-btn, #indicators-btn { display: none !important; }
  #chart-timeframes { gap: 1px; }
  .tf-btn { padding: 4px 8px; font-size: 10px; }
  #chart-toolbar { order: 3; }
  #bp-drag-handle { display: none; }
  #indicator-panel { left: 0; right: 0; }
  .mc-separator, #margin-call-banner span:last-child { display: none; }
  #login-screen { z-index: 2000; }

  /* The screens stack in this order whatever the width. style.css numbers
     them only at <=767px; without numbers here a landscape phone falls
     back to source order, and the Sell/Buy bar (which comes after the
     screens in the markup, but must sit under the chart) needs one. */
  #top-bar { order: 0; }
  #mobile-asset-list-screen, #center-area, #bottom-area { order: 2; }
  #mobile-fab { order: 8; }
  #mobile-nav { order: 9; }

  /* Bottom menu - the same look style.css gives it at <=767px. */
  #mobile-nav {
    display: flex;
    flex-shrink: 0;
    height: calc(56px + var(--m-safe-bottom));
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--m-safe-bottom) max(4px, env(safe-area-inset-left, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    align-items: center;
    justify-content: space-around;
  }
  .mob-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; color: var(--text-muted);
    font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
    padding: 6px 12px; flex: 1; min-height: 44px; border-radius: 6px;
    transition: all 0.15s;
  }
  .mob-nav-btn.active, .mob-nav-btn.active svg { color: var(--accent); }
  .mob-nav-btn svg { color: var(--text-muted); transition: color 0.15s; }
  /* On its side the phone has ~400px of height to share; the menu gives
     some back by putting its icons beside the labels. */
  body.m-landscape #mobile-nav { height: calc(44px + var(--m-safe-bottom)); }
  body.m-landscape .mob-nav-btn { flex-direction: row; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 12px; }

  #mobile-hamburger-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; background: transparent; border: 0;
    color: var(--text-primary); cursor: pointer; padding: 0;
    margin-right: 4px; border-radius: 6px;
  }
  #mobile-hamburger-btn:hover { background: var(--hover-surface); }

  #top-bar { padding: 0 8px !important; height: 48px !important; flex-shrink: 0; }
  .topbar-metrics, .topbar-time-block, .topbar-divider,
  #market-status, .topbar-user-wrap, #topbar-deposit-btn {
    display: none !important;
  }

  #app {
    display: flex !important; flex-direction: column !important;
    height: 100dvh !important; overflow: hidden !important;
  }

  /* Hide desktop structural blocks; re-show per screen below. */
  #left-sidebar, #lp-drag-handle, #bottom-area,
  #center-area, #cal-movers-panel { display: none !important; }

  /* ---------- ASSETS SCREEN (home) ---------- */
  body[data-mobile-screen="assets"] #mobile-asset-list-screen { display: flex; }
  #mobile-asset-list-screen {
    display: none; flex-direction: column; flex: 1;
    min-height: 0; background: var(--bg-primary);
  }
  .m-asset-search {
    flex-shrink: 0; padding: 8px 12px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
  }

  /* Category tabs row — All / FX / Crypto / Stocks / Indices / Commodities */
  .m-asset-tabs {
    flex-shrink: 0; display: flex; gap: 4px;
    padding: 6px 8px 8px; background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    overflow-x: auto; scrollbar-width: none;
  }
  .m-asset-tabs::-webkit-scrollbar { display: none; }
  .m-asset-tab {
    flex-shrink: 0; padding: 6px 12px; border: 0;
    background: transparent; color: var(--text-secondary);
    font-size: 12px; font-weight: 500; cursor: pointer; border-radius: 14px;
    white-space: nowrap; transition: background .12s, color .12s;
  }
  .m-asset-tab:hover { color: var(--text-primary); }
  /* The active tab takes style.css's tab tokens, so light and high contrast
     reach it: its fixed #c8bdf3 was 1.4:1 on the light theme's lavender
     tint. Now 6.1:1 dark, 4.9 light, 10.7 / 7.6 high contrast. */
  .m-asset-tab.active {
    background: rgba(108, 92, 231, 0.18);
    color: var(--tab-active);
    border: 1px solid rgba(108, 92, 231, 0.4);
    padding: 5px 11px;        /* compensate for the 1px border */
  }
  /* The tint and edge follow the theme's tab fill where color-mix() exists.
     They sit behind @supports, not as a second declaration after the rgba
     ones: a declaration holding var() always parses, so a browser without
     color-mix() (iOS Safari before 16.2, Chrome / WebView before 111) would
     still let it replace the rgba line, then drop it at paint time, leaving
     no tint and a border in the text colour. There the rgba values above
     (the dark theme's) are what gets drawn. The high-contrast edge at the
     end of this file still wins on specificity. */
  @supports (background: color-mix(in srgb, red 50%, transparent)) {
    .m-asset-tab.active {
      background: color-mix(in srgb, var(--tab-active-fill) 18%, transparent);
      border-color: color-mix(in srgb, var(--tab-active-fill) 40%, transparent);
    }
  }
  .ar-change.muted { color: var(--text-muted) !important; }
  /* 16px on every phone input: iOS Safari zooms the page in on focus of
     anything smaller and stays zoomed after, which leaves the whole screen
     scrolling sideways. */
  .m-asset-search input {
    width: 100%; box-sizing: border-box; padding: 8px 12px;
    background: var(--bg-deepest, rgba(0,0,0,.25)); color: var(--text-primary);
    border: 1px solid var(--border-primary); border-radius: 8px;
    font-size: 16px; outline: none;
    -webkit-appearance: none; appearance: none;
  }
  .m-asset-search input:focus { border-color: var(--accent); }
  .m-asset-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .m-asset-row {
    display: grid; grid-template-columns: 1fr auto; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--border-primary);
    cursor: pointer; align-items: center;
  }
  .m-asset-row:active { background: var(--hover-surface); }
  .m-asset-row .ar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .m-asset-row .ar-meta { min-width: 0; }
  .m-asset-row .ar-sym { font-weight: 700; font-size: 15px; color: var(--text-primary); }
  .m-asset-row .ar-class { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  /* Per-asset-class icon badge. 24x24 circle, glyph centered. */
  .m-asset-row .ar-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    font-size: 11px; font-weight: 700; line-height: 1;
    color: #fff; font-family: Inter, sans-serif;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .m-asset-row .ar-icon-forex     { background: #2962FF; }
  .m-asset-row .ar-icon-crypto    { background: #f7931a; font-size: 14px; }
  .m-asset-row .ar-icon-commodity { background: #b8860b; }
  .m-asset-row .ar-icon-index     { background: #6a5acd; font-size: 13px; }
  .m-asset-row .ar-icon-stock     { background: #26a69a; font-size: 10px; }
  .m-asset-row .ar-icon-other     { background: #555; }
  .m-asset-row .ar-prices {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 2px; font-family: 'JetBrains Mono', monospace;
  }
  .m-asset-row .ar-bidask { font-size: 13px; display: flex; gap: 8px; }
  .m-asset-row .ar-bid.up   { color: var(--green, #26a69a); }
  .m-asset-row .ar-bid.down { color: var(--red,   #ef5350); }
  .m-asset-row .ar-ask      { color: var(--text-secondary); }
  .m-asset-row .ar-change   { font-size: 11px; font-weight: 600; }
  .m-asset-row .ar-change.up   { color: var(--green, #26a69a); }
  .m-asset-row .ar-change.down { color: var(--red,   #ef5350); }
  .m-asset-empty {
    padding: 30px 16px; text-align: center;
    color: var(--text-muted); font-size: 13px;
  }

  /* ---------- CHART SCREEN ---------- */
  body[data-mobile-screen="chart"] #center-area {
    display: flex !important; flex-direction: column !important;
    flex: 1; min-height: 0; position: relative;
    height: auto !important; width: 100% !important;
  }
  body[data-mobile-screen="chart"] #chart-toolbar {
    padding: 0 8px; gap: 4px; height: 36px; flex-shrink: 0; overflow-x: auto;
  }
  body[data-mobile-screen="chart"] #chart-tools-group,
  body[data-mobile-screen="chart"] #chart-style { display: none !important; }
  body[data-mobile-screen="chart"] .tf-btn[data-tf="M30"],
  body[data-mobile-screen="chart"] .tf-btn[data-tf="H4"],
  body[data-mobile-screen="chart"] .tf-btn[data-tf="W1"],
  body[data-mobile-screen="chart"] .tf-btn[data-tf="MN"] { display: none !important; }
  body[data-mobile-screen="chart"] #chart-container {
    flex: 1 !important; height: auto !important;
    min-height: 0 !important; width: 100% !important; position: relative;
  }
  .m-chart-back-btn, .m-chart-fullscreen-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; background: transparent; border: 0;
    color: var(--text-primary); cursor: pointer; flex-shrink: 0;
  }
  .m-chart-back-btn:active, .m-chart-fullscreen-btn:active { background: var(--hover-surface); border-radius: 6px; }

  /* ---------- INDICATORS BAR + SHEET (chart screen) ----------
     Between the chart and its toolbar: the Indicators button, then the
     indicators that are on - name, settings, x - scrolling sideways when
     they do not fit. The sheet lists every indicator as a chip to switch on
     or off; an active chip is filled and ticked (js/mobile.js). */
  body[data-mobile-screen="chart"] #m-ind-bar { display: flex; }
  #m-ind-bar {
    order: 2; flex-shrink: 0; align-items: center; gap: 6px; height: 40px;
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    background: var(--bg-secondary); border-top: 1px solid var(--border-primary);
  }
  .m-ind-open {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border-radius: 15px;
    border: 1px solid var(--border-primary); background: var(--bg-tertiary);
    color: var(--text-primary); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-ind-fx {
    font-family: Georgia, 'Times New Roman', serif; font-size: 14px;
    font-style: italic; font-weight: 700; color: var(--accent);
  }
  .m-ind-on {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-ind-on::-webkit-scrollbar { display: none; }
  .m-ind-pill {
    flex-shrink: 0; display: inline-flex; align-items: center; height: 30px;
    border: 1px solid var(--accent); border-radius: 15px;
    background: var(--accent-glow); color: var(--text-primary);
  }
  .m-ind-pill-name {
    display: inline-flex; align-items: center; gap: 5px; height: 100%;
    padding: 0; padding-inline-start: 11px; background: none; border: 0;
    color: inherit; font-family: inherit; font-size: 12px; font-weight: 600;
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* "12, 26, 9" reads left to right on the Arabic page too. */
  .m-ind-pill-p {
    direction: ltr; unicode-bidi: isolate;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
  }
  .m-ind-pill-x {
    width: 30px; height: 100%; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--text-muted); font-size: 18px; line-height: 1;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-ind-open:active, .m-ind-pill-x:active { background: var(--hover-surface); }

  #m-ind-sheet:not([hidden]) {
    position: fixed; inset: 0; z-index: 1300;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  /* Lighter than the menu's, so the chart shows through above the sheet. */
  #m-ind-sheet .m-sheet-backdrop { background: rgba(0,0,0,0.35); }
  #m-ind-sheet.open .m-sheet-backdrop { opacity: 1; }
  .m-ind-panel {
    position: relative; display: flex; flex-direction: column;
    max-height: 62dvh; padding: 10px 0 calc(var(--m-safe-bottom) + 10px);
    background: var(--bg-secondary); border-top: 1px solid var(--border-primary);
    border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
    transform: translateY(100%); transition: transform 0.22s ease-out;
  }
  #m-ind-sheet.open .m-ind-panel { transform: translateY(0); }
  .m-ind-head {
    flex-shrink: 0; display: flex; align-items: center; gap: 8px;
    padding: 0 8px 8px; padding-inline-start: 16px;
    border-bottom: 1px solid var(--border-primary);
  }
  .m-ind-title { margin-inline-end: auto; font-size: 15px; font-weight: 700; color: var(--text-primary); }
  .m-ind-clear {
    height: 30px; padding: 0 12px; border-radius: 15px;
    border: 1px solid var(--border-primary); background: none;
    color: var(--text-secondary); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
  }
  .m-ind-clear:disabled { opacity: 0.45; cursor: default; }
  .m-ind-close {
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--text-muted); font-size: 26px; line-height: 1; cursor: pointer;
  }
  .m-ind-list {
    flex: 1 1 auto; min-height: 0; padding: 0 12px 6px;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .m-ind-sec {
    padding: 14px 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--text-muted);
  }
  .m-ind-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .m-ind-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
    border: 1px solid var(--border-primary); border-radius: 18px; background: var(--bg-tertiary);
    color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* "+" off, a tick on, in a slot of one width: a chip keeps its size when
     switched, so the chips after it do not jump under the finger. White on
     the accent fill: 5.2:1, 8.7:1 in high contrast. */
  .m-ind-chip::before { content: '+'; display: inline-block; width: 12px; text-align: center; font-size: 14px; color: var(--text-muted); }
  .m-ind-chip.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
  .m-ind-chip.on::before { content: '\2713'; font-size: 12px; color: inherit; }
  /* On its side the phone has ~360px of height, and a row of its own for
     this bar cost the chart a fifth of it. There the bar is just its
     Indicators button, at the end of the toolbar's row: the chart screen
     becomes a grid of the chart over one row that the toolbar (still
     scrolling sideways when it must) and the button share. The indicators
     that are on are ticked in the sheet the button opens, and the button
     wears the accent while any is on. The sheet gets more of the height. */
  body.m-landscape[data-mobile-screen="chart"] #center-area {
    display: grid !important;
    grid-template: "chart chart" minmax(0, 1fr) "tools ind" auto / minmax(0, 1fr) auto;
  }
  body.m-landscape[data-mobile-screen="chart"] #chart-container { grid-area: chart; }
  body.m-landscape[data-mobile-screen="chart"] #chart-toolbar { grid-area: tools; }
  body.m-landscape #m-ind-bar {
    grid-area: ind; height: 36px; padding-inline-start: 4px;
    border-top: 0; border-bottom: 1px solid var(--border-primary);
  }
  body.m-landscape .m-ind-on { display: none; }
  body.m-landscape .m-ind-open { height: 26px; }
  body.m-landscape #m-ind-bar:has(.m-ind-pill) .m-ind-open { border-color: var(--accent); background: var(--accent-glow); }
  body.m-landscape .m-ind-panel { max-height: 86dvh; }
  /* ---------- POSITIONS SCREEN ---------- */
  /* The desktop bottom panel - Open / Pending / Finance / Closed / Loans
     / AI Packages - as a screen of its own. There was no way to reach it
     on a phone: a trader could open a position from the chart and never
     see it again, nor its P&L, nor close it. flex 1 1 auto beats the
     flex-shrink:0 style.css gives it. */
  body[data-mobile-screen="positions"] #bottom-area {
    display: flex !important; flex-direction: column !important;
    flex: 1 1 auto; min-height: 0; height: auto !important; width: 100% !important;
  }
  /* The tabs wrap onto a second row instead of running off the right edge
     ("CLOSED POS..." was cut in half and had to be scrolled to). */
  body[data-mobile-screen="positions"] .panel-header-tabs {
    height: auto; min-height: 0; flex-wrap: wrap; flex-shrink: 0; overflow: visible;
  }
  body[data-mobile-screen="positions"] .bp-tab {
    flex: 1 1 auto; justify-content: center; height: 40px; padding: 0 10px;
  }
  body[data-mobile-screen="positions"] .bp-table-wrap {
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0;
  }

  /* ---- Each row a card ----
     The desktop table is 1140px wide; on a phone it was that table scrolled
     sideways, with the P&L and the close button off screen. The same rows -
     same cells, same live price and P&L updates, same tap-to-edit SL/TP and
     close confirmation - are laid out as cards instead:

       Gold  BUY  VOL 5                        +12.34
       4300.00 -> 4308.88                         [x]
       SL 4200.00              TP 4400.00
       2026-09-23 05:26               #p1790166131896

     Each <tr> is a wrapping flex row; `order` puts the cells where they go
     and the row's ::before / ::after are the two forced line breaks. The
     renderers (positions-*.js) mark the cells (bpm-*) and give the bare
     numbers a translated data-label. Nothing here reaches the desktop. */
  #bottom-area .bp-table { display: block; width: 100%; min-width: 0; table-layout: auto; }
  #bottom-area .bp-table thead { display: none; }
  #bottom-area .bp-table tbody,
  #bottom-area .bp-table tfoot { display: block; }
  #bottom-area .bp-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px;
    margin: 8px 10px 0; padding: 9px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary); border-radius: 10px;
  }
  #bottom-area .bp-table tbody tr:last-child { margin-bottom: 10px; }
  #bottom-area .bp-table tbody tr::before,
  #bottom-area .bp-table tbody tr::after { content: ''; flex-basis: 100%; height: 0; }
  #bottom-area .bp-table tbody tr::before { order: 5; }
  #bottom-area .bp-table tbody tr::after  { order: 9; }
  #bottom-area .bp-table td {
    display: block; min-width: 0; padding: 2px 0; border: 0;
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* A labelled value - VOL 5, SL 4200.00, BALANCE AFTER 1,000.00. The label
     is the cell's ::before and, with the cell a flex row, a flex item of its
     own, so label and number are laid out apart instead of as one line of
     mixed-direction text. */
  #bottom-area .bp-table td[data-label] { display: flex; align-items: baseline; gap: 5px; }
  #bottom-area .bp-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto;
    font-family: Inter, sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted);
  }
  /* Arabic (dir=rtl): the label stays on the right and the number reads left
     to right. As right-to-left text, -1.25 displayed as "1.25-" and +44.40
     as "44.40+", and the label ran into its number ("VOL5"). The signed
     figures get the same treatment; their auto margin is swapped to the
     other side because it now resolves left-to-right. */
  html[dir="rtl"] #bottom-area .bp-table td[data-label] { direction: ltr; flex-direction: row-reverse; }
  html[dir="rtl"] #bottom-area .bp-table .bp-pnl,
  html[dir="rtl"] #bottom-area .bp-table .bpm-pnl,
  html[dir="rtl"] #bottom-area .bp-table .bpm-amt,
  html[dir="rtl"] #bottom-area .bp-table .bp-id {
    direction: ltr; unicode-bidi: isolate; margin-inline-start: 0; margin-inline-end: auto;
  }
  html[dir="rtl"] #bottom-area .bp-table tfoot .bp-total-pnl { direction: ltr; unicode-bidi: isolate; }

  /* Line 1: instrument, side, volume ... the figure that matters. */
  #bottom-area .bp-table .bp-sym { order: 1; flex: 0 1 auto; font-size: 14px; font-weight: 700; }
  #bottom-area .bp-table .bpm-side { order: 2; flex: 0 0 auto; }
  #bottom-area .bp-table .bpm-vol { order: 3; flex: 0 0 auto; color: var(--text-secondary); }
  #bottom-area .bp-table .bp-pnl,
  #bottom-area .bp-table .bpm-pnl,
  #bottom-area .bp-table .bpm-amt {
    order: 4; flex: 0 0 auto; margin-inline-start: auto;
    font-size: 16px; font-weight: 700;
  }
  /* Line 2: where it opened -> where it is now (or where it closed). */
  #bottom-area .bp-table .bpm-open { order: 6; flex: 0 1 auto; }
  #bottom-area .bp-table .bp-cur-price,
  #bottom-area .bp-table .bpm-close { order: 7; flex: 0 1 auto; font-weight: 600; }
  #bottom-area .bp-table .bp-cur-price::before,
  #bottom-area .bp-table .bpm-close::before { content: '\2192'; margin-inline-end: 6px; color: var(--text-muted); }
  html[dir="rtl"] #bottom-area .bp-table .bp-cur-price::before,
  html[dir="rtl"] #bottom-area .bp-table .bpm-close::before { content: '\2190'; }
  #bottom-area .bp-table .bp-act,
  #bottom-area .bp-table .bpm-reason { order: 8; flex: 0 0 auto; margin-inline-start: auto; overflow: visible; }
  /* Line 3: stop and target, two to a line. Swap and commission only when
     there is one - they are zero on most positions. */
  #bottom-area .bp-table [data-field="stopLoss"]   { order: 10; flex: 1 1 40%; }
  #bottom-area .bp-table [data-field="takeProfit"] { order: 11; flex: 1 1 40%; }
  #bottom-area .bp-table .bpm-swap { order: 12; flex: 1 1 40%; }
  #bottom-area .bp-table .bpm-comm { order: 13; flex: 1 1 40%; }
  #bottom-area .bp-table .bpm-swap.bp-muted,
  #bottom-area .bp-table .bpm-comm.bp-muted { display: none; }
  /* SL / TP are still tap-to-edit; give the finger something to hit. */
  #bottom-area .bp-table .bp-editable { min-height: 28px; line-height: 24px; }
  /* 16px, or iOS zooms in on it (see .m-asset-search input). */
  #bottom-area .bp-table .bp-inline-input { width: calc(100% - 28px); font-size: 16px; }
  /* Last line: when, and the id - small. */
  #bottom-area .bp-table .bp-time { order: 14; flex: 1 1 55%; font-size: 11px; color: var(--text-muted); }
  #bottom-area .bp-table .bp-id { order: 15; flex: 0 1 auto; margin-inline-start: auto; font-size: 10px; text-align: end; }
  /* Close / cancel: a real touch target, not the 22px desktop square. */
  #bottom-area .bp-table .bp-close-btn,
  #bottom-area .bp-table .bp-cancel-btn { width: 36px; height: 32px; font-size: 20px; border-radius: 8px; }

  /* Pending: no P&L, so cancel moves up to the first line, and the
     order's price gets a line of its own above its stop and target. */
  #bottom-area #bp-pending-tbody .bp-act { order: 4; }
  #bottom-area #bp-pending-tbody .bpm-open { order: 10; flex: 1 1 100%; }
  #bottom-area #bp-pending-tbody [data-field="stopLoss"]   { order: 11; }
  #bottom-area #bp-pending-tbody [data-field="takeProfit"] { order: 12; }

  /* Closed: opened -> closed times on the last line. */
  #bottom-area #bp-closed-tbody .bp-time { flex: 0 1 auto; }
  #bottom-area #bp-closed-tbody .bpm-closed::before { content: '\2192'; margin-inline-end: 6px; }
  html[dir="rtl"] #bottom-area #bp-closed-tbody .bpm-closed::before { content: '\2190'; }

  /* Finance: type and status, amount; the note in full; then the
     instrument (trades only) and the balance it led to. */
  #bottom-area #bp-finance-tbody .bpm-type { order: 1; flex: 0 1 auto; }
  #bottom-area #bp-finance-tbody .bp-note {
    order: 6; flex: 1 1 100%; max-width: none;
    white-space: normal; overflow: visible; color: var(--text-secondary);
  }
  #bottom-area #bp-finance-tbody .bp-sym { order: 10; font-size: 12px; font-weight: 600; }
  #bottom-area #bp-finance-tbody .bp-sym.bpm-nosym { display: none; }
  #bottom-area #bp-finance-tbody .bpm-bal { order: 11; flex: 1 1 50%; }

  /* Close confirmation, inserted as a row of its own under the card. */
  #bottom-area .bp-table tbody tr.bp-confirm-row { margin-top: 4px; padding: 0; }
  #bottom-area .bp-table td.bp-confirm-cell {
    display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: 10px 12px !important; white-space: normal; border: 0; border-radius: 10px;
  }
  #bottom-area .bp-table .bp-confirm-yes,
  #bottom-area .bp-table .bp-confirm-no { padding: 8px 16px; font-size: 12px; }

  /* Total P&L: a bar pinned under the cards. */
  #bottom-area .bp-table tfoot {
    position: sticky; bottom: 0; z-index: 1;
    background: var(--bg-tertiary); border-top: 1px solid var(--border-primary);
  }
  #bottom-area .bp-table tfoot tr {
    display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  }
  #bottom-area .bp-table tfoot td { position: static; padding: 0; border: 0; background: none; }
  #bottom-area .bp-table tfoot td:empty { display: none; }
  #bottom-area .bp-table tfoot .bp-total-pnl { font-size: 15px; }

  /* ---- Loans: each application a card ----
     loans.js draws an eight-column table - date, amount, term, interest,
     repayment, due, status, note - which ran off the right edge of a phone.
     The same card treatment as the positions:

       $1,000.00                                    Approved
       TERM 30 d    INTEREST 5%    REPAY $1,050.00
       Sep 1, 2026 12:00                 DUE Oct 1, 2026
       Reason for loan ...

     By column position, because loans.js gives most cells no class; the
     labels are the column headers, copied onto the cells by js/mobile.js. */
  #bottom-area #loans-table { display: block; width: 100%; }
  #bottom-area #loans-table thead { display: none; }
  #bottom-area #loans-table tbody { display: block; }
  #bottom-area #loans-table tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
    margin: 0 0 8px; padding: 9px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary); border-radius: 10px;
  }
  #bottom-area #loans-table tbody tr::before,
  #bottom-area #loans-table tbody tr::after { content: ''; flex-basis: 100%; height: 0; }
  #bottom-area #loans-table tbody tr::before { order: 3; }
  #bottom-area #loans-table tbody tr::after  { order: 7; }
  #bottom-area #loans-table td { display: block; min-width: 0; padding: 2px 0; border: 0; font-size: 12px; }
  #bottom-area #loans-table td:nth-child(2) { order: 1; font-size: 15px; }
  #bottom-area #loans-table td:nth-child(7) { order: 2; margin-inline-start: auto; }
  #bottom-area #loans-table td:nth-child(3) { order: 4; }
  #bottom-area #loans-table td:nth-child(4) { order: 5; }
  #bottom-area #loans-table td:nth-child(5) { order: 6; }
  #bottom-area #loans-table td:nth-child(1) { order: 8; font-size: 11px; color: var(--text-muted); }
  #bottom-area #loans-table td:nth-child(6) { order: 9; margin-inline-start: auto; }
  #bottom-area #loans-table td.loan-note {
    order: 10; flex: 1 1 100%; max-width: none;
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
  #bottom-area #loans-table td.loan-note.m-empty { display: none; }
  #bottom-area #loans-table td.loan-empty { flex: 1 1 100%; text-align: center; font-size: 12px; }
  #bottom-area #loans-table td:nth-child(n+3):nth-child(-n+6)[data-label] {
    display: flex; align-items: baseline; gap: 5px;
  }
  #bottom-area #loans-table td:nth-child(n+3):nth-child(-n+6)[data-label]::before {
    content: attr(data-label); flex: 0 0 auto;
    font-family: Inter, sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted);
  }
  /* The application form above it: 16px fields (iOS focus zoom). It
     already wraps onto a second line on a phone. */
  #bottom-area #loans-panel .loan-field input,
  #bottom-area #loans-panel .loan-field select,
  #bottom-area #loans-panel .loan-field textarea { font-size: 16px; }

  /* AI packages are cards already, but an investment card had a 320px
     minimum - wider than a 320px phone once the panel padding is taken off -
     and a package card a fixed 220px. */
  #bottom-area #ai-packages-panel .aip-mycard { min-width: 0; max-width: none; flex: 1 1 100%; }
  #bottom-area #ai-packages-panel .aip-card { width: auto; min-width: 0; flex: 1 1 200px; }

  /* ---------- SELL | BUY BAR ----------
     Two floating circles used to sit on the chart, over the candles and the
     price scale. They are now a bar docked between the chart and the bottom
     menu, the way the order ticket shows them: SELL at the bid on the left,
     BUY at the ask on the right, both live. It is in the page flow, not
     floating, so the chart ends where the bar begins and nothing is hidden
     behind it. Tapping one opens the ticket with that side chosen
     (js/mobile.js). Colours carry white text at 4.7:1 and 5.0:1. */
  #mobile-fab {
    display: none; flex-shrink: 0; gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
  }
  body[data-mobile-screen="chart"] #mobile-fab { display: flex; }
  .m-fab-btn {
    flex: 1 1 0; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 6px 8px; border: 0; border-radius: 10px;
    font-family: Inter, sans-serif; color: #fff; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, filter 0.1s;
  }
  .m-fab-btn:active { transform: scale(0.97); filter: brightness(1.1); }
  .m-fab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .m-fab-sell { background: #e11d48; }
  .m-fab-buy  { background: #15803d; }
  .m-fab-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
  .m-fab-px {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* On its side: one line per button, so the chart keeps its height. */
  body.m-landscape .m-fab-btn { flex-direction: row; gap: 8px; min-height: 40px; padding: 4px 8px; }
  body.m-landscape #mobile-fab { padding-top: 6px; padding-bottom: 6px; }

  /* ---------- BOTTOM-SHEET MENU ---------- */
  #mobile-menu-sheet[hidden] { display: none !important; }
  #mobile-menu-sheet {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .m-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    opacity: 0; transition: opacity 0.22s;
  }
  #mobile-menu-sheet.open .m-sheet-backdrop { opacity: 1; }
  .m-sheet-panel {
    position: relative; background: var(--bg-secondary);
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
    max-height: 80vh; overflow-y: auto;
    transform: translateY(100%); transition: transform 0.25s ease-out;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  }
  #mobile-menu-sheet.open .m-sheet-panel { transform: translateY(0); }
  .m-sheet-handle {
    width: 36px; height: 4px; background: var(--text-muted);
    opacity: 0.4; border-radius: 2px; margin: 0 auto 8px;
  }
  .m-sheet-header {
    padding: 6px 18px 12px; border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary); font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
  }
  .m-sheet-userblock { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .m-sheet-plan-badge {
    align-self: flex-start; display: inline-block;
    padding: 2px 8px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; line-height: 1.4;
    background: #2d3748; color: #fff; border: 1px solid #2d3748;
  }
  .m-sheet-acct-type {
    align-self: flex-start; display: inline-block;
    padding: 1px 7px; border-radius: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase; line-height: 1.4;
  }
  /* Theme green / amber: the fixed #26a69a and #fbbf24 were 3.0 and 1.7:1
     on the light theme's white sheet; now 4.7:1 or more in every theme. */
  .m-sheet-acct-type.live { background: var(--green-bg); color: var(--green); }
  .m-sheet-acct-type.demo { background: var(--orange-bg); color: var(--orange); }
  .m-sheet-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; background: none; border: 0; width: 100%;
    text-align: start; color: var(--text-primary);
    font-family: inherit; font-size: 14px; cursor: pointer;
  }
  .m-sheet-item:active { background: var(--hover-surface); }
  .m-sheet-item .ico { font-size: 18px; width: 22px; text-align: center; }
  .m-sheet-divider { height: 1px; background: var(--border-primary); margin: 6px 0; }
  .m-sheet-item.logout { color: var(--red, #ef5350); }
  .m-sheet-sub {
    padding: 4px 18px 8px 52px; display: flex; flex-wrap: wrap; gap: 6px;
  }
  .m-sheet-sub button {
    padding: 6px 12px; background: var(--hover-surface);
    border: 1px solid var(--border-primary); border-radius: 14px;
    color: var(--text-primary); font-size: 12px; cursor: pointer;
  }
  .m-sheet-sub button.active {
    background: var(--accent-fill); color: #fff; border-color: var(--accent-fill);
  }

  /* ---------- Full-screen modals (deposit/withdraw/etc.) ----------
     openTerminalModal() builds .tm-overlay > .tm-panel; we override
     the centered-dialog look with a full-screen sheet on mobile. */
  .tm-overlay { align-items: stretch !important; padding: 0 !important; }
  .tm-panel {
    width: 100vw !important; max-width: none !important;
    height: 100dvh !important; max-height: none !important;
    border-radius: 0 !important;
    display: flex; flex-direction: column;
  }
  .tm-header {
    padding: 12px 16px !important; flex-shrink: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  }
  .tm-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* The support chat opens full width above the bottom menu. (There is no
     bubble to drag or minimise to any more - it is opened from the menu
     sheet, js/mobile.js.) */
  /* It sits on the bottom menu: 56px plus the home-indicator inset, or 44px
     on a phone on its side - a fixed 60px left a strip of chart showing
     between the two there, out of ~430px of height. */
  #cw-panel {
    width: 100vw !important; max-width: none !important;
    height: calc(100dvh - 56px - var(--m-safe-bottom)) !important; max-height: none !important;
    right: 0 !important; left: 0 !important; bottom: calc(56px + var(--m-safe-bottom)) !important;
    border-radius: 0 !important;
  }
  body.m-landscape #cw-panel {
    height: calc(100dvh - 44px - var(--m-safe-bottom)) !important;
    bottom: calc(44px + var(--m-safe-bottom)) !important;
  }

  /* =========================================================
     BOTTOM OF THE SCREEN
     =========================================================
     Everything anchored to the bottom used to sit flush against the viewport
     edge. On any phone with a home indicator or a gesture bar that strip is
     not reachable — the toolbar was under the system bar, so the symbol,
     the price and the timeframes were all cut off. Every bottom-anchored
     element now clears env(safe-area-inset-bottom).

     The chart toolbar also overflowed horizontally (462px of content in a
     375px viewport) with nothing to say so, which is why the timeframes ran
     off the right edge with no hint they were there. */
  /* The toolbar used to be the last thing on the screen and carried the
     safe-area padding itself. The Sell/Buy bar and the bottom menu are
     under it now, and the menu clears the home indicator. */
  body[data-mobile-screen="chart"] #chart-toolbar {
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    height: 36px;
    /* Scrolls, but tells you it does: no scrollbar, and the row keeps its
       items from being squashed into each other. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  body[data-mobile-screen="chart"] #chart-toolbar::-webkit-scrollbar { display: none; }
  body[data-mobile-screen="chart"] #chart-toolbar > * { scroll-snap-align: start; }

  /* The chat's unread count, on the hamburger and on the menu sheet's
     Support Chat row. (There is no chat bubble: chat.js keeps #cw-btn
     hidden at every width, so this file no longer hides it too.) */
  .m-menu-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
  }
  /* The button's id is mobile-hamburger-btn; this named an id that does not
     exist, so the badge was positioned against the top bar instead of the
     button it counts for. */
  #mobile-hamburger-btn { position: relative; }

  .m-sheet-item .m-sheet-count {
    margin-inline-start: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
  }
  /* ---- Mobile order sheet ----
     Hosts the real #order-widget. The ticket brings its own styling; this is
     only the container that slides it up from the bottom. */
  #m-order-sheet {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: flex-end;
  }
  #m-order-sheet[hidden] { display: none; }
  #m-order-sheet .m-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    opacity: 0; transition: opacity 0.18s ease;
  }
  #m-order-sheet.open .m-sheet-backdrop { opacity: 1; }
  .m-order-panel {
    position: relative; width: 100%;
    max-height: calc(100dvh - 64px);
    display: flex; flex-direction: column;
    background: var(--bg-secondary, #12141c);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--border-primary, #232635);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 0.2s ease;
    padding-bottom: calc(var(--m-safe-bottom) + 8px);
  }
  #m-order-sheet.open .m-order-panel { transform: translateY(0); }
  .m-order-head {
    display: flex; align-items: center; gap: 8px;
    padding: 2px 14px 10px;
    border-bottom: 1px solid var(--border-primary, #232635);
  }
  .m-order-dir {
    font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
    padding: 3px 9px; border-radius: 6px;
  }
  /* Theme green / red, as the ticket's own direction colours: the fixed
     #10b981 / #ef4444 were 2.5 and 3.8:1 on the light theme; now 5:1 or
     more in every theme. */
  .m-order-dir.is-buy  { background: var(--green-bg); color: var(--green); }
  .m-order-dir.is-sell { background: var(--red-bg);   color: var(--red); }
  .m-order-sym { font-size: 13px; font-weight: 600; color: var(--text-primary); }
  .m-order-px  { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
  .m-order-close {
    margin-inline-start: auto; background: none; border: 0;
    color: var(--text-muted); font-size: 24px; line-height: 1;
    padding: 0 4px; cursor: pointer;
  }
  .m-order-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* The ticket is display:none until inlined under a symbol row; in the sheet
     it is the whole point, so it shows. */
  #order-widget-wrap.ow-sheet { display: block !important; position: static !important; }
  #order-widget-wrap.ow-sheet #order-widget { border-top: 0; padding: 12px 14px; }
  /* Bigger touch targets than the desktop ticket uses. */
  #order-widget-wrap.ow-sheet .ow-btn { min-height: 52px; }
  #order-widget-wrap.ow-sheet .ow-step-btn { width: 44px; height: 44px; }
  #order-widget-wrap.ow-sheet #ow-volume { font-size: 20px; }
  #order-widget-wrap.ow-sheet .ow-chip { padding: 8px 2px; }
  #order-widget-wrap.ow-sheet .ow-unit-btn { font-size: 11px; padding: 4px 12px; }
  #order-widget-wrap.ow-sheet .ow-field input,
  #order-widget-wrap.ow-sheet .ow-field select { min-height: 40px; font-size: 16px; }
  #order-widget-wrap.ow-sheet .ow-nav-btn { min-height: 44px; }
  #order-widget-wrap.ow-sheet .ow-confirm-btn { min-height: 50px; font-size: 14px; }


  /* The asset list and the menu sheet get the same treatment — the last row
     of the list was unreachable for the same reason. */
  body[data-mobile-screen="assets"] #mobile-asset-list-screen .m-asset-list {
    padding-bottom: calc(var(--m-safe-bottom) + 12px);
  }

}

/* Light-theme tweaks (mobile-only classes that don't inherit). */
html[data-theme="light"] .m-sheet-backdrop { background: rgba(0,0,0,0.35); }
html[data-theme="light"] .m-asset-search input { background: #fff; }

/* ---------- Finance row status (every width) ----------
   positions-finance.js marks each deposit / withdrawal Pending, Approved or
   Rejected. They are here, beside the phone cards that also show them,
   rather than in style.css. A rejected row's amount is struck through: it
   is what was asked for, and it never reached the balance. Text is >= 4.5:1
   on the badge in both themes. */
.bp-badge.bp-status { margin-inline-start: 4px; }
.bp-status-pending  { background: rgba(245,158,11,0.15); color: #fbbf24; }
.bp-status-approved { background: rgba(16,185,129,0.15); color: #34d399; }
.bp-status-rejected { background: rgba(239,68,68,0.15);  color: #f87171; }
html[data-theme="light"] .bp-status-pending  { color: #92400e; }
html[data-theme="light"] .bp-status-approved { color: #047857; }
html[data-theme="light"] .bp-status-rejected { color: #b91c1c; }
.bpm-void { text-decoration: line-through; }

/* ---------- High contrast (data-contrast="high", js/theme.js) ----------
   The phone-only colours above are fixed values, not theme tokens, so they
   get their own high-contrast set: 7:1 or better for text, and an edge on
   the Sell/Buy buttons and the cards. The Sell/Buy fills are the ones
   style.css gives the ticket's own buttons (white label 8.2 and 9.0:1). */
html[data-contrast="high"] .bp-badge.bp-status { background: transparent; border: 1px solid currentColor; }
html[data-contrast="high"] .bp-status-pending  { color: #fcd34d; }
html[data-contrast="high"] .bp-status-approved { color: #6ee7b7; }
html[data-contrast="high"] .bp-status-rejected { color: #fca5a5; }
html[data-contrast="high"][data-theme="light"] .bp-status-pending  { color: #78350f; }
html[data-contrast="high"][data-theme="light"] .bp-status-approved { color: #065f46; }
html[data-contrast="high"][data-theme="light"] .bp-status-rejected { color: #991b1b; }
html[data-contrast="high"] .m-fab-sell { background: #9b1c1c; }
html[data-contrast="high"] .m-fab-buy  { background: #03543f; }
html[data-contrast="high"] .m-fab-btn { box-shadow: inset 0 0 0 2px var(--text-bright); }
html[data-contrast="high"] .m-fab-btn:focus-visible { outline-width: 3px; }
html[data-contrast="high"] #bottom-area .bp-table tbody tr,
html[data-contrast="high"] #bottom-area #loans-table tbody tr { border-color: var(--border-secondary); }
html[data-contrast="high"] .m-asset-tab.active { border-color: var(--tab-active); }
html[data-contrast="high"] .m-ind-chip.on { box-shadow: inset 0 0 0 2px var(--text-bright); }