/* ============================================================
   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; }
/* ... and its drawing tools (mobile.js): the strip lives in #chart-container. */
#m-draw-layer, #m-draw-text { display: none; }

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

  /* ---------- THE SCREEN: VIEWPORT + SAFE AREAS ----------
     The page is laid out edge to edge (viewport-fit=cover, index.html), so
     the phone reports the parts of the glass it keeps for itself - the
     status bar / notch / Dynamic Island, the home indicator or gesture bar,
     the notch at a side when the phone is on its side, a home-screen app's
     status bar - as env(safe-area-inset-*). They are read once, here, and
     everything below pads with these. constant(): iOS 11.0 - 11.1. */
  :root {
    --m-safe-top: env(safe-area-inset-top, 0px);
    --m-safe-right: env(safe-area-inset-right, 0px);
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-safe-left: env(safe-area-inset-left, 0px);
  }
  @supports (padding: constant(safe-area-inset-top)) and (not (padding: env(safe-area-inset-top, 0px))) {
    :root {
      --m-safe-top: constant(safe-area-inset-top);
      --m-safe-right: constant(safe-area-inset-right);
      --m-safe-bottom: constant(safe-area-inset-bottom);
      --m-safe-left: constant(safe-area-inset-left);
    }
  }
  /* The height the app gets: what is on screen now. On a phone 100vh is
     not that - it is the height with the browser's bars collapsed (Safari's
     address bar, Chrome's and Samsung Internet's toolbars), so an app 100vh
     tall ran under them: the bottom menu behind the toolbar on Android, and
     on the iPhone a page that had to scroll to reach it, which slid the
     header up under the clock. 100dvh follows the bars. --m-vh is the
     visible height js/mobile.js measures (fitViewport): the height for a
     browser without dvh, and a cap for one whose dvh counts a bar that is
     showing. */
  :root { --m-h: var(--m-vh, 100vh); }
  @supports (height: 100dvh) {
    :root { --m-h: min(100dvh, var(--m-vh, 100dvh)); }
  }

  /* The page itself never scrolls - the lists in it do - nor rubber-bands
     or pulls-to-refresh the trading screen away. */
  html, body { overflow: hidden; overscroll-behavior: none; }

  /* ---------- 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 4px var(--m-safe-bottom);
    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); }

  /* Under the status bar, not behind it: edge to edge, the page starts at
     the top of the glass (a home-screen app, Safari's newer layouts). */
  #top-bar {
    padding: var(--m-safe-top) 8px 0 !important;
    height: calc(48px + var(--m-safe-top)) !important; flex-shrink: 0;
  }
  .topbar-metrics, .topbar-time-block, .topbar-divider,
  #market-status, .topbar-user-wrap, #topbar-deposit-btn {
    display: none !important;
  }

  /* The visible height (--m-h above), less a demo banner over the app
     (--m-app-top, js/mobile.js). min-height: style.css gives the phone
     layout a 100vh minimum - the large viewport again - which on its own
     kept the bottom menu below the screen. On its side the phone's notch
     takes a strip at the left or right: the app keeps out of it, in the
     page colour (as Safari does for a page that is not edge to edge). The
     bars inside therefore pad only for themselves. */
  #app {
    display: flex !important; flex-direction: column !important;
    height: calc(var(--m-h) - var(--m-app-top, 0px)) !important;
    min-height: 0 !important; overflow: hidden !important;
    border-left: var(--m-safe-left) solid var(--bg-primary);
    border-right: var(--m-safe-right) solid var(--bg-primary);
  }

  /* 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); }
  /* AI Packages beside the search (index.html #m-ai-btn). A row: the search
     takes what the button leaves, and the whole row when the button is
     hidden (no AI Packages, or a demo account). The button stretches to the
     search box's height. Right of the search, left of it in Arabic (the row
     follows the page's direction).
     "AI" on a gold pill (the brokers' call, 2026-09-29): the same gold in
     both themes and whatever the broker's colour - it no longer takes the
     accent. Dark text and icon on it (8:1 and more), a darker gold edge
     that also holds it apart from the light theme's white bar (3.8:1), a
     deeper gold while pressed (5:1). */
  .m-asset-search { display: flex; align-items: stretch; gap: 8px; }
  .m-asset-search input { flex: 1 1 0%; min-width: 0; text-overflow: ellipsis; font-family: inherit; }
  .m-ai-btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; min-width: 44px; margin: 0; padding-block: 0;
    padding-inline: 5px 14px;
    border: 0; border-radius: 999px;
    background-color: #d4af37;
    background-image: linear-gradient(180deg, #f5d06f 0%, #d4af37 100%);
    color: #2a1e00; font-family: inherit; font-size: 14px; font-weight: 700;
    line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
    box-shadow: inset 0 0 0 1px #a67c1a, 0 1px 3px rgba(0,0,0,0.28);
    cursor: pointer; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background-color .15s, filter .15s, transform .08s ease-out;
  }
  @media (hover: hover) { .m-ai-btn:hover { filter: brightness(1.06); } }
  .m-ai-btn:active {
    background-color: #b08a22;
    background-image: linear-gradient(180deg, #dcb54c 0%, #b08a22 100%);
    transform: scale(0.96);
  }
  .m-ai-btn:focus { outline: none; }
  .m-ai-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .m-ai-ico {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(42,30,0,0.12);
  }
  .m-ai-ico svg { display: block; }
  /* Where even "AI" would leave the search too narrow (js/mobile.js
     AI_SEARCH_MIN): the icon steps aside, "AI" stays. */
  .m-asset-search.m-ai-compact .m-ai-btn { padding-inline: 12px; }
  .m-asset-search.m-ai-compact .m-ai-ico { display: none; }
  @media (prefers-reduced-motion: reduce) { .m-ai-btn { transition: none; } .m-ai-btn:active { transform: none; } }
  .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 8px;
    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; }
  /* ---------- CHART GESTURES + DRAWING TOOLS (chart screen) ----------
     The chart takes every touch on it (pinch, pan, double tap to reset the
     zoom - js/chart.js PHONE ZOOM): without this iOS Safari zoomed the page
     on a double tap. */
  body[data-mobile-screen="chart"] #chart-container { touch-action: none; }

  /* The pencil beside Indicators (js/mobile.js), its dot while the symbol
     has drawings. */
  .m-draw-open {
    position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 30px; padding: 0; border-radius: 15px;
    border: 1px solid var(--border-primary); background: var(--bg-tertiary);
    color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-draw-open:active { background: var(--hover-surface); }
  .m-draw-open[aria-pressed="true"] { border-color: var(--accent-fill); background: var(--accent-fill); color: #fff; }
  .m-draw-dot {
    position: absolute; top: 3px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--bg-tertiary); display: none;
  }
  .m-draw-open.has-drawings .m-draw-dot { display: block; }
  .m-draw-open[aria-pressed="true"] .m-draw-dot { background: #fff; box-shadow: 0 0 0 2px var(--accent-fill); }
  body.m-landscape .m-draw-open { height: 26px; }

  /* The strip floats over the bottom of the chart, above its time axis,
     centred; the line of help above it. */
  body[data-mobile-screen="chart"] #m-draw-layer:not([hidden]) { display: flex; }
  /* z-index 60: over lightweight-charts' pane separators (z-index 50, a
     9px band at each indicator pane's top edge), which took the taps of
     the buttons they crossed. */
  #m-draw-layer {
    position: absolute; left: 0; right: 0; bottom: 34px; z-index: 60;
    flex-direction: column; align-items: center; gap: 6px;
    padding: 0 6px; pointer-events: none;
  }
  .m-draw-strip {
    pointer-events: auto; display: flex; align-items: center; gap: 2px;
    max-width: 100%; overflow-x: auto; overscroll-behavior: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 4px; border-radius: 14px;
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.38);
  }
  .m-draw-strip::-webkit-scrollbar { display: none; }
  .m-draw-strip button {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 38px; height: 40px; padding: 0 9px; margin: 0;
    border: 0; border-radius: 10px; background: none; color: var(--text-secondary);
    font-family: inherit; font-size: 12px; font-weight: 600; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background-color .12s, color .12s;
  }
  .m-draw-strip button svg { width: 20px; height: 20px; flex-shrink: 0; }
  .m-draw-strip button:active { background: var(--hover-surface-strong, var(--hover-surface)); }
  .m-draw-strip button:focus { outline: none; }
  .m-draw-strip button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .m-draw-strip .m-draw-tool[aria-pressed="true"] { background: var(--accent-fill); color: #fff; }
  .m-draw-strip button:disabled { opacity: 0.35; cursor: default; }
  .m-draw-strip [data-act="delete"]:not(:disabled) { color: var(--red); }
  .m-draw-sep { flex: 0 0 1px; align-self: stretch; margin: 7px 3px; background: var(--border-primary); }
  .m-draw-confirm { display: none; }
  /* A fill white reads on (4.8:1), as the Sell button's; --red is a text
     colour, too light behind white. */
  .m-draw-strip [data-act="clear"].confirm { background: #dc2626; color: #fff; padding-inline-end: 12px; }
  html[data-contrast="high"] .m-draw-strip [data-act="clear"].confirm { background: #9b1c1c; }
  .m-draw-strip [data-act="clear"].confirm .m-draw-confirm { display: inline; }
  .m-draw-strip.confirming .m-draw-tool, .m-draw-strip.confirming .m-draw-sep,
  .m-draw-strip.confirming [data-act="delete"] { display: none; }
  .m-draw-hint {
    max-width: 100%; padding: 6px 12px; border-radius: 999px;
    background: var(--bg-secondary); border: 1px solid var(--border-primary);
    color: var(--text-primary); font-size: 12px; font-weight: 500; line-height: 1.3;
    text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  }
  .m-draw-hint[hidden] { display: none; }
  /* The narrowest phones (360px): the strip still fits without scrolling. */
  @media (max-width: 374px) {
    .m-draw-strip { gap: 1px; padding: 3px; }
    .m-draw-strip button { min-width: 34px; padding: 0 7px; }
  }
  body.m-landscape #m-draw-layer { bottom: 30px; }
  /* On its side the chart is too short for a line of help over it. */
  body.m-landscape .m-draw-hint { display: none; }
  body.m-landscape .m-draw-strip button { height: 36px; }

  /* A text label's sheet: a real input (16px, so iOS does not zoom in). */
  #m-draw-text:not([hidden]) {
    position: fixed; inset: 0; z-index: 1400;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  #m-draw-text .m-sheet-backdrop { background: rgba(0,0,0,0.35); }
  #m-draw-text.open .m-sheet-backdrop { opacity: 1; }
  .m-draw-text-panel {
    position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0;
    /* --m-dt-cut: what the keyboard or a browser bar covers below the
       sheet (js/mobile.js fitDrawText) - the home bar under it needs no room. */
    padding: 10px 16px calc(max(0px, var(--m-safe-bottom) - var(--m-dt-cut, 0px)) + 16px);
    padding-inline-start: max(16px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(16px, env(safe-area-inset-right, 0px));
    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-draw-text.open .m-draw-text-panel { transform: translateY(0); }
  .m-draw-text-panel .m-sheet-handle { margin-bottom: 0; }
  .m-draw-text-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
  .m-draw-text-input {
    width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px;
    background: var(--bg-deepest, rgba(0,0,0,.25)); color: var(--text-primary);
    border: 1px solid var(--border-primary); border-radius: 10px;
    font-family: inherit; font-size: 16px; outline: none;
    -webkit-appearance: none; appearance: none;
  }
  .m-draw-text-input:focus { border-color: var(--accent); }
  .m-draw-text-btns { display: flex; gap: 10px; }
  .m-draw-text-btns button {
    flex: 1 1 0; height: 44px; border-radius: 10px; font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .m-draw-text-cancel { background: none; border: 1px solid var(--border-primary); color: var(--text-secondary); }
  .m-draw-text-ok { background: var(--accent-fill); border: 1px solid var(--accent-fill); color: #fff; }
  .m-draw-text-ok:active { background: var(--accent-fill-hover); }
  /* (end CHART GESTURES + DRAWING TOOLS) */
  /* iOS < 15.4 has no :has(): the same accent from a class (js/mobile.js
     renderIndicatorBar sets .m-ind-any while any indicator is on). */
  body.m-landscape #m-ind-bar.m-ind-any .m-ind-open { border-color: var(--accent); background: var(--accent-glow); }

  /* ---------- CHART FULL SCREEN (html.m-chart-fs, js/mobile.js) ----------
     The same on every phone and browser - Safari and every other iPhone
     browser included, which have no Fullscreen API for a page: the chart
     over one row of tools (the full-screen button pinned at its start),
     SELL / BUY under it upright and down the side when the phone is on its
     side. The top bar, the indicators row and the bottom menu go; a margin
     call stays. #app keeps its visible-viewport height (--m-h, which also
     covers iOS 14 - 15.3 without dvh) and borders itself clear of the
     notch, the Dynamic Island and the home indicator, in the bars' colour. */
  html.m-chart-fs body { overscroll-behavior: none; }
  html.m-chart-fs #app {
    border-top: var(--m-safe-top, 0px) solid var(--bg-secondary);
    border-bottom: var(--m-safe-bottom, 0px) solid var(--bg-secondary);
    border-left-color: var(--bg-secondary); border-right-color: var(--bg-secondary);
  }
  html.m-chart-fs #top-bar,
  html.m-chart-fs #mobile-nav,
  html.m-chart-fs #demo-banner,
  html.m-chart-fs #m-conn-bar,
  html.m-chart-fs .m-chart-back-btn,
  html.m-chart-fs .m-ind-on { display: none !important; }
  html.m-chart-fs body[data-mobile-screen="chart"] #center-area {
    display: grid !important;
    grid-template: "chart chart" minmax(0, 1fr) "tools ind" auto / minmax(0, 1fr) auto;
  }
  html.m-chart-fs body[data-mobile-screen="chart"] #chart-container { grid-area: chart; }
  html.m-chart-fs body[data-mobile-screen="chart"] #chart-toolbar {
    grid-area: tools; height: 44px; border-top: 1px solid var(--border-primary);
  }
  html.m-chart-fs #m-ind-bar {
    grid-area: ind; height: 44px; padding-inline-start: 4px; border-top: 1px solid var(--border-primary);
  }
  html.m-chart-fs #m-ind-bar.m-ind-any .m-ind-open { border-color: var(--accent); background: var(--accent-glow); }
  /* The way out: pinned to the start of the scrolling toolbar, a full
     44px target, in the accent so it reads as "on". */
  html.m-chart-fs .m-chart-fullscreen-btn {
    position: sticky; left: 0; z-index: 3;
    width: 44px; height: 44px;
    background: var(--bg-secondary); color: var(--accent);
  }
  /* style.css pins the symbol at the start too (sticky, left 0): in full
     screen it pins just after the button instead of sliding under it. */
  html.m-chart-fs #chart-symbol-label { left: 44px; }
  html.m-chart-fs[dir="rtl"] #chart-symbol-label { left: auto; right: 44px; }
  html.m-chart-fs[dir="rtl"] .m-chart-fullscreen-btn { left: auto; right: 0; }
  /* SELL / BUY: one line, upright. */
  html.m-chart-fs #mobile-fab { padding-top: 6px; padding-bottom: 6px; }
  html.m-chart-fs .m-fab-btn { flex-direction: row; gap: 8px; min-height: 44px; padding: 4px 8px; }
  /* On its side: the chart beside a column of SELL over BUY at the edge -
     where the thumbs are when a phone is held that way (the left edge in
     Arabic: the grid follows the page's direction). */
  html.m-chart-fs body.m-landscape #app {
    display: grid !important;
    grid-template: "banner banner" auto "center fab" minmax(0, 1fr) / minmax(0, 1fr) auto;
    row-gap: 0;
  }
  html.m-chart-fs body.m-landscape #margin-call-banner { grid-area: banner; }
  html.m-chart-fs body.m-landscape #center-area { grid-area: center; min-width: 0; }
  html.m-chart-fs body.m-landscape #mobile-fab {
    grid-area: fab; width: 120px; flex-direction: column; justify-content: center; gap: 10px;
    padding: 8px; border-top: 0; border-inline-start: 1px solid var(--border-primary);
  }
  html.m-chart-fs body.m-landscape .m-fab-btn { flex: 0 0 auto; flex-direction: column; gap: 2px; min-height: 64px; }
  html.m-chart-fs body.m-landscape .m-fab-px { font-size: 13px; }
  /* Toasts: over the SELL / BUY bar, or beside its column on the side. */
  html.m-chart-fs body[data-mobile-screen="chart"] #toast-container { bottom: calc(72px + var(--m-safe-bottom, 0px)) !important; }
  html.m-chart-fs body.m-landscape[data-mobile-screen="chart"] #toast-container { bottom: calc(56px + var(--m-safe-bottom, 0px)) !important; right: calc(132px + var(--m-safe-right, 0px)) !important; }
  html.m-chart-fs[dir="rtl"] body.m-landscape[data-mobile-screen="chart"] #toast-container { right: auto !important; left: calc(132px + var(--m-safe-left, 0px)) !important; }
  /* "Turn your phone": over the top of the chart, not in a finger's way. */
  .m-fs-hint {
    position: absolute; z-index: 12; top: 10px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; max-width: calc(100% - 90px);
    padding: 8px 14px; border-radius: 18px; pointer-events: none;
    background: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-primary); box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .2s;
  }
  .m-fs-hint.show { opacity: 1; }
  .m-fs-hint[hidden] { display: none; }
  @media (prefers-reduced-motion: reduce) { .m-fs-hint { transition: none; } }

  /* In full screen the Indicators button is its "fx" alone - the row is
     the toolbar's too; the word stays its name for screen readers. */
  html.m-chart-fs .m-ind-open { padding: 0 12px; }
  html.m-chart-fs .m-ind-open > span:not(.m-ind-fx) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* ---------- 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); }
  /* The size (positions-shared.js _bpSize): the trader's unit over the other
     one, the VOL label on the first line's baseline; the tag a finger's
     width. In Arabic the label stays on the right and the lines hug it. */
  #bottom-area .bp-table .bp-size-alt { font-size: 10.5px; }
  #bottom-area .bp-table .bp-size-tag { font-size: 9px; line-height: 14px; padding: 0 4px; }
  #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. Above them, when the
     trade paid a commission, COMM and NET (the P&L less it) on a line of
     their own - hidden, like the open card's COMM, when there was none. */
  #bottom-area #bp-closed-tbody .bpm-comm { order: 12; flex: 1 1 40%; }
  #bottom-area #bp-closed-tbody .bpm-net { order: 13; flex: 1 1 50%; font-weight: 700; }
  #bottom-area #bp-closed-tbody .bpm-net-same { display: none; }
  #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; margin-inline-start: 0; }
  /* The sentence is one flex item: it wraps as a whole, "?" included. */
  #bottom-area .bp-table .bp-confirm-text { flex: 1 1 100%; }

  /* 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 10px;
    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 var(--m-safe-right) calc(var(--m-safe-bottom) + 16px) var(--m-safe-left);
    max-height: calc((var(--m-h) - var(--m-safe-top)) * 0.85); 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: var(--m-h) !important; max-height: none !important;
    border-radius: 0 !important;
    display: flex; flex-direction: column;
    padding-left: var(--m-safe-left) !important; padding-right: var(--m-safe-right) !important;
  }
  .tm-header {
    padding: 12px 16px !important; flex-shrink: 0;
    padding-top: calc(var(--m-safe-top) + 12px) !important;
  }
  .tm-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--m-safe-bottom) + 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. */
  /* From under the status bar down to the menu; clear of a side notch. */
  #cw-panel {
    width: 100vw !important; max-width: none !important;
    height: calc(var(--m-h) - var(--m-safe-top) - 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;
    padding-left: var(--m-safe-left) !important; padding-right: var(--m-safe-right) !important;
  }
  body.m-landscape #cw-panel {
    height: calc(var(--m-h) - var(--m-safe-top) - 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 8px;
    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;
  }
  /* What the trader can see (js/mobile.js fitOrderSheet): the visual
     viewport - above the keyboard, above iOS Safari's floating bar. The
     layout viewport until the script has measured it. The panel is centred
     and kept to a ticket's width on a phone turned sideways. */
  #m-order-sheet {
    top: var(--m-ovv-top, 0px); bottom: auto;
    height: var(--m-ovv-h, 100%);
    justify-content: center;
  }
  #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-width: 640px;
    /* The chart stays in sight above it (a tap there closes the sheet),
       never less than the status bar / island leaves. */
    max-height: calc(var(--m-ovv-h, 100dvh) - max(64px, var(--m-safe-top, env(safe-area-inset-top, 0px)) + 16px));
    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;
    /* Room for the home indicator - less what a browser bar already
       covers below the sheet (--m-ovv-cut, fitOrderSheet). */
    padding-bottom: calc(max(0px, var(--m-safe-bottom) - var(--m-ovv-cut, 0px)) + 8px);
  }
  #m-order-sheet.open .m-order-panel { transform: translateY(0); }
  /* The keyboard is up (fitOrderSheet): it covers the home indicator, and
     the few lines left above it all go to the ticket. */
  #m-order-sheet.m-kb-open .m-order-panel {
    max-height: calc(var(--m-ovv-h, 100dvh) - max(8px, var(--m-safe-top, env(safe-area-inset-top, 0px))));
    padding-bottom: 4px;
  }
  #m-order-sheet.m-kb-open .m-sheet-handle { display: none; }
  .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; overscroll-behavior: contain; min-height: 0; }
  /* 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 menu under the list pads for the home indicator; the list does not
     again - it ends where the menu starts - it only leaves a little air
     under its last row. */
  body[data-mobile-screen="assets"] #mobile-asset-list-screen .m-asset-list {
    padding-bottom: 12px;
  }

  /* ---------- EVERYTHING ELSE AT THE EDGES OF THE SCREEN ----------
     Toasts: above the bottom menu - and above the SELL | BUY bar on the
     chart (69px, 53px on its side) - clear of a side notch. index.html's
     own #toast-container block comes after this file, hence !important. */
  #toast-container {
    bottom: calc(56px + var(--m-safe-bottom) + 12px) !important;
    right: max(12px, var(--m-safe-right)) !important;
    max-width: calc(100vw - 24px - var(--m-safe-left) - var(--m-safe-right));
  }
  body[data-mobile-screen="chart"] #toast-container { bottom: calc(56px + var(--m-safe-bottom) + 84px) !important; }
  body.m-landscape #toast-container { bottom: calc(44px + var(--m-safe-bottom) + 12px) !important; }
  body.m-landscape[data-mobile-screen="chart"] #toast-container { bottom: calc(44px + var(--m-safe-bottom) + 68px) !important; }
  html[dir="rtl"] #toast-container { right: auto !important; left: max(12px, var(--m-safe-left)) !important; }

  /* The demo-account banner sits above the app (index.html): it takes the
     status bar's inset, and the header under it then needs none
     (body.m-banner-above, js/mobile.js). Its x clear of a side notch. */
  #demo-banner {
    padding-top: calc(6px + var(--m-safe-top)) !important;
    padding-left: calc(36px + var(--m-safe-left)) !important;
    padding-right: calc(36px + var(--m-safe-right)) !important;
  }
  #demo-banner > [data-dismiss] { top: calc(50% + var(--m-safe-top) / 2) !important; }
  html:not([dir="rtl"]) #demo-banner > [data-dismiss] { right: calc(12px + var(--m-safe-right)) !important; }
  html[dir="rtl"] #demo-banner > [data-dismiss] { left: calc(12px + var(--m-safe-left)) !important; }
  body.m-banner-above #top-bar { padding-top: 0 !important; height: 48px !important; }

  /* A contact request from the broker drops in over the top of the screen. */
  .contact-request-banner {
    padding-top: calc(14px + var(--m-safe-top)) !important;
    padding-left: max(20px, var(--m-safe-left)) !important;
    padding-right: max(20px, var(--m-safe-right)) !important;
  }

  /* The indicators sheet: its chips clear of a side notch. So are the
     other layers laid over the app - the KYC wizard, an indicator's
     settings sheet. */
  .m-ind-panel { padding-left: var(--m-safe-left); padding-right: var(--m-safe-right); }
  .kyc-screen, .ip-dlg-wrap .ip-dlg { padding-left: var(--m-safe-left); padding-right: var(--m-safe-right); }

  /* Sign-in: the visible height as well, and it scrolls when the card is
     taller than the screen (a phone on its side) instead of centring it off
     both edges where nothing could reach the Sign In button. */
  #login-screen {
    height: var(--m-h); overflow-y: auto; -webkit-overflow-scrolling: touch;
    align-items: flex-start;
    padding: calc(12px + var(--m-safe-top)) calc(12px + var(--m-safe-right)) calc(12px + var(--m-safe-bottom)) calc(12px + var(--m-safe-left));
  }
  #login-screen > .login-box { margin: auto; }

}

/* ---------- The logo: back to the markets (every width) ----------
   A button now (index.html, js/mobile.js goToMarkets), dressed as the logo
   it was: no button face, the broker's image as it is, a focus ring for the
   keyboard. On a phone a finger-sized target around it. No padding on the
   desktop: the top bar's items stay where they were. */
#top-bar .topbar-logo {
  background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit;
  min-height: 32px; border-radius: 6px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#top-bar .topbar-logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#top-bar .topbar-logo:active { opacity: 0.75; }
@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #top-bar .topbar-logo { min-height: 44px; min-width: 44px; padding: 0 6px; justify-content: center; }
}

/* 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-ai-btn { background-image: none; box-shadow: inset 0 0 0 2px var(--text-bright); }
html[data-contrast="high"] .m-ai-btn:focus-visible { outline-width: 3px; }
html[data-contrast="high"] .m-ind-chip.on { box-shadow: inset 0 0 0 2px var(--text-bright); }