/* BP-UI9 AURORA TITANIUM (9 Oct 2026, owner: "Billion Profit 2.0 - complete creative reinvention"). One design system,
 * two coordinated modes, loaded LAST on every page so it out-cascades every older layer:
 *   Pearl Light  (html[data-bptheme="light"], the default)  warm pearl white, frosted panels, lavender accents, titanium text
 *   Aurora Dark  (html[data-bptheme="dark"])                midnight indigo, frosted lavender glass, cyan illumination
 * Palette: indigo #101326, aubergine #211B39, electric lavender #A78BFA, arctic cyan #79E4F2, champagne gold #E8C994,
 * frosted pearl #F5F3FA, soft white #F7F7FC, mist grey #A9AEC5, mint #43D9A3 (profit), coral #FF7185 (loss) - used with
 * restraint; on light surfaces each gets a darker, readable twin. The mode comes from the bptheme cookie (dark / light /
 * auto = the device), set before first paint by the head script in views.js.
 * IMPORTANT: this file is hand-written for both modes - never run ops/lightify_css.js over it. */

/* ---------- BP-UI10 REALISTIC (9 Oct 2026, owner: "make the website fully realistic and change the colour"): the art
   palette gives way to a production fintech look - flat white surfaces, near-black text, hairline borders, one professional
   blue accent, standard market green/red for P&L; the dark mode is neutral charcoal, not indigo. Same two-mode switch. */
/* ---------- tokens: Light (default) ---------- */
html { --a-bg: #ffffff; --a-bg2: #f5faf7; --a-s1: #ffffff; --a-s2: #ECFDF3; --a-s3: #d9f3e5;
  --a-line: rgba(6, 78, 59, .14); --a-line2: rgba(6, 78, 59, .26);
  --a-tx: #0e1f17; --a-tx2: #3d564a; --a-tx3: #64786d;
  --a-head: #064E3B;
  --a-acc: #079455; --a-acc-soft: #ECFDF3; --a-acc-line: rgba(7, 148, 85, .45); --a-acc-ink: #ffffff;
  --a-cyan: #0e7490; --a-cyan-soft: rgba(14, 116, 144, .12); --a-gold: #b45309; --a-gold-soft: rgba(180, 83, 9, .12); --a-gold-line: rgba(180, 83, 9, .45);
  --a-up: #089981; --a-up-soft: rgba(8, 153, 129, .12); --a-dn: #e13443; --a-dn-soft: rgba(225, 52, 67, .1);
  --a-glass: rgba(255, 255, 255, .92); --a-glass-line: rgba(255, 255, 255, .95); --a-scrim: rgba(15, 18, 20, .4);
  --a-glow1: transparent; --a-glow2: transparent;
  --a-sh: 0 1px 2px rgba(15, 18, 20, .06), 0 2px 8px -4px rgba(15, 18, 20, .1); }
/* ---------- tokens: Dark (neutral charcoal) ---------- */
html[data-bptheme="dark"] { --a-head: #f1f5f7; --a-bg: #0f1214; --a-bg2: #0b0e10; --a-s1: #171b1e; --a-s2: #1e2328; --a-s3: #262c31;
  --a-line: rgba(226, 232, 240, .12); --a-line2: rgba(226, 232, 240, .22);
  --a-tx: #f1f5f7; --a-tx2: #aab6bf; --a-tx3: #7d8a94;
  --a-acc: #12c784; --a-acc-soft: rgba(18, 199, 132, .14); --a-acc-line: rgba(18, 199, 132, .45); --a-acc-ink: #06130c;
  --a-cyan: #22b8cf; --a-cyan-soft: rgba(34, 184, 207, .12); --a-gold: #e3a008; --a-gold-soft: rgba(227, 160, 8, .12); --a-gold-line: rgba(227, 160, 8, .45);
  --a-up: #0ecb81; --a-up-soft: rgba(14, 203, 129, .12); --a-dn: #f6465d; --a-dn-soft: rgba(246, 70, 93, .12);
  --a-glass: rgba(23, 27, 30, .92); --a-glass-line: rgba(226, 232, 240, .08); --a-scrim: rgba(0, 0, 0, .55);
  --a-glow1: transparent; --a-glow2: transparent;
  --a-sh: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -8px rgba(0, 0, 0, .5); }
/* every token the older layers read now follows the mode */
html.bpx, html.bpx body, html.bpx body.ui3, html[data-skin="term"], html[data-skin="term"] body {
  --ui-bg: var(--a-bg); --ui-s1: var(--a-s1); --ui-s2: var(--a-s2); --ui-s3: var(--a-s3); --ui-line: var(--a-line); --ui-line2: var(--a-line2);
  --ui-tx: var(--a-tx); --ui-tx2: var(--a-tx2); --ui-tx3: var(--a-tx3); --ui-ok: var(--a-up); --ui-bad: var(--a-dn); --ui-warn: var(--a-gold); --ui-live: var(--a-gold);
  --acc: var(--a-acc); --accent: var(--a-acc); --accent-2: var(--a-acc); --acc2: var(--a-cyan); --acc3: var(--a-acc); --acc-ink: var(--a-acc-ink); --accent-ink: var(--a-acc-ink); --acc-soft: var(--a-acc-soft); --accent-soft: var(--a-acc-soft); --accent-line: var(--a-acc-line);
  --mint: var(--a-acc-soft); --glass: var(--a-glass); --glass-line: var(--a-glass-line);
  --bg: var(--a-bg); --bg-top: var(--a-bg); --bg2: var(--a-bg2); --surface: var(--a-s1); --surface-2: var(--a-s2); --surface-3: var(--a-s3); --panel: var(--a-s1); --panel2: var(--a-s2); --panel3: var(--a-s3);
  --line: var(--a-line); --line-2: var(--a-line2); --line2: var(--a-line2); --bpline: var(--a-line); --bp-line: var(--a-line);
  --text: var(--a-tx); --text-2: var(--a-tx2); --txt: var(--a-tx); --ink: var(--a-tx); --ink2: var(--a-tx2); --ink3: var(--a-tx3); --muted: var(--a-tx3); --mut: var(--a-tx2); --faint: var(--a-tx3); --bpmut: var(--a-tx2); --bp-text: var(--a-tx); --bp-muted: var(--a-tx2);
  --bp-bg: var(--a-bg); --bp-surface: var(--a-s1); --bp-surface-2: var(--a-s2); --bp-accent: var(--a-acc); --bp-accent-ink: var(--a-acc-ink); --bpa: var(--a-acc); --bpg: var(--a-up); --blue: var(--a-cyan);
  --good: var(--a-up); --good-soft: var(--a-up-soft); --bad: var(--a-dn); --bad-soft: var(--a-dn-soft); --red: var(--a-dn); --red2: var(--a-dn); --bpr: var(--a-dn); --bpb: var(--a-dn); --warn: var(--a-gold); --warn-soft: var(--a-gold-soft); --amb: var(--a-gold); --amber: var(--a-gold);
  --test: var(--a-tx2); --test-soft: var(--a-acc-soft); --glow: 0 0 0 3px var(--a-acc-soft); --sh: var(--a-sh); --sh-1: var(--a-sh); --sh-2: var(--a-sh); --sh-3: var(--a-sh);
  --at-up: var(--a-up); --at-down: var(--a-dn); --at-ink: var(--a-acc-ink); --at-line2: var(--a-line2); --at-soft: var(--a-acc-soft);
  --n-bg: var(--a-bg); --n-bg2: var(--a-bg2); --n-panel: var(--a-s1); --n-panel2: var(--a-s2); --n-glass: var(--a-glass); --n-glass2: var(--a-glass);
  --n-line: var(--a-line); --n-line2: var(--a-line2); --n-text: var(--a-tx); --n-muted: var(--a-tx2); --n-faint: var(--a-tx3);
  --n-cyan: var(--a-acc); --n-cyan2: var(--a-acc); --n-cyan-ink: var(--a-acc-ink); --n-cyan-soft: var(--a-acc-soft); --n-cyan-line: var(--a-acc-line);
  --n-orange: var(--a-gold); --n-orange2: var(--a-gold); --n-up: var(--a-up); --n-down: var(--a-dn); --n-warn: var(--a-gold); --n-info: var(--a-cyan); }
html { color-scheme: light; } html[data-bptheme="dark"] { color-scheme: dark; }

/* ---------- the stage: soft aurora lighting behind everything ---------- */
html.bpx body.bpx.ui3, html[data-skin="term"] body, body.auth {
  background-color: var(--a-bg) !important;
  background-image: radial-gradient(1000px 520px at 10% -8%, var(--a-glow1), transparent 62%), radial-gradient(820px 460px at 102% 2%, var(--a-glow2), transparent 60%), radial-gradient(900px 600px at 50% 115%, var(--a-glow1), transparent 55%) !important;
  background-attachment: fixed !important; color: var(--a-tx) !important; }
html.bpx body.ui3 ::selection { background: var(--a-acc-soft); color: var(--a-tx); }
html.bpx body.ui3 :focus-visible { outline: 2px solid var(--a-acc) !important; outline-offset: 2px !important; }
html.bpx body.ui3 * { scrollbar-color: var(--a-line2) transparent; }

/* ---------- type and colour meaning ---------- */
html.bpx body.ui3 main, html.bpx body.ui3 main p, html.bpx body.ui3 main td, html.bpx body.ui3 main li { color: var(--a-tx); }
html.bpx body.ui3 main h1, html.bpx body.ui3 main h2, html.bpx body.ui3 main h3, html.bpx body.ui3 main h4 { color: var(--a-head) !important; }
html.bpx body.ui3 main b, html.bpx body.ui3 main strong, html.bpx body.ui3 main .hv { color: var(--a-tx) !important; }
html.bpx body.ui3 main h1 { letter-spacing: -.025em !important; }
html.bpx body.ui3 main .muted, html.bpx body.ui3 main .sub, html.bpx body.ui3 main small, html.bpx body.ui3 main .note, html.bpx body.ui3 main .tiny, html.bpx body.ui3 main .pssub, html.bpx body.ui3 main th, html.bpx body.ui3 main label { color: var(--a-tx2) !important; }
html.bpx body.ui3 main .rail .rl, html.bpx body.ui3 main .hero .hgrid span, html.bpx body.ui3 main .hero .hsub, html.bpx body.ui3 main .hero .hk, html.bpx body.ui3 #bpps .sum span, html.bpx body.ui3 #bpps .note, html.bpx body.ui3 #bpps .prow .l2, html.bpx body.ui3 #bpps .prow .pl small, html.bpx body.ui3 #bpcx .sub { color: var(--a-tx3) !important; }
html.bpx body.ui3 main .good, html.bpx body.ui3 main .pos, html.bpx body.ui3 main .up, html.bpx body.ui3 .rv.good, html.bpx body.ui3 main .ok, html.bpx body.ui3 main .hero .hv.good, html.bpx body.ui3 main .hero .hgrid b.good, html.bpx body.ui3 #bpcx .ok { color: var(--a-up) !important; }
html.bpx body.ui3 main .bad, html.bpx body.ui3 main .neg, html.bpx body.ui3 main .down, html.bpx body.ui3 .rv.bad, html.bpx body.ui3 main .hero .hv.bad, html.bpx body.ui3 main .hero .hgrid b.bad, html.bpx body.ui3 #bpcx .bad { color: var(--a-dn) !important; }
html.bpx body.ui3 main .warn, html.bpx body.ui3 .rv.warn, html.bpx body.ui3 main .fee, html.bpx body.ui3 main .stale, html.bpx body.ui3 #bpcx .warn { color: var(--a-gold) !important; }
html.bpx body.ui3 main a:not(.btn):not(.qt):not(.rc):not(.hp):not(.prow) { color: var(--a-acc); }
html[data-bptheme="dark"] body a { color: var(--a-cyan); }

/* ---------- titanium glass: navigation, header, drawer, sheets ---------- */
@media (min-width: 901px) {
  html.bpx[data-mkt] body.ui3 .bpside, html.bpx[data-mkt] body.ui3 > header { background: var(--a-glass) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-color: var(--a-line) !important; box-shadow: inset 0 1px 0 var(--a-glass-line); }
  html.bpx body.ui3 .bpside .sbrand { color: var(--a-tx); border-bottom: 1px solid var(--a-line); }
  html.bpx body.ui3 .bpside .nsec { color: var(--a-tx3) !important; }
  html.bpx body.ui3 .bpside a { color: var(--a-tx2) !important; }
  html.bpx body.ui3 .bpside a:hover { color: var(--a-tx) !important; background: var(--a-acc-soft) !important; }
  html.bpx body.ui3 .bpside a.on { color: var(--a-acc) !important; background: var(--a-acc-soft) !important; box-shadow: inset 0 0 0 1px var(--a-acc-line), inset 0 1px 0 var(--a-glass-line) !important; }
  html.bpx body.ui3 .bpside a.on svg { color: var(--a-acc) !important; }
  html.bpx body.ui3 .bpside .scol { color: var(--a-tx3) !important; } html.bpx body.ui3 .bpside .scol:hover { color: var(--a-tx) !important; background: var(--a-acc-soft) !important; }
  html.bpx body.ui3 .bpside .sfoot { border-top: 1px solid var(--a-line); }
  html.bpx body.ui3 .bpside .sfoot a.lo:hover { color: var(--a-dn) !important; background: var(--a-dn-soft) !important; }
  html.bpx body.ui3 header .crumb b { color: var(--a-tx); }
}
@media (max-width: 900px) {
  html.bpx[data-mkt] body.ui3 > header { background: var(--a-glass) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid var(--a-line) !important; }
  html.bpx body.ui3 header .sbtn, html.bpx body.ui3 header .qsearch { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; }
  html.bpx body.ui3 header .crumb b { color: var(--a-tx); }
  html.bpx[data-mkt] body.ui3.sideopen .bpside { background: var(--a-glass) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-right: 1px solid var(--a-line) !important; box-shadow: 24px 0 70px var(--a-scrim); }
  html.bpx body.ui3.sideopen .sidescrim { background: var(--a-scrim); }
  html.bpx body.ui3.sideopen .bpside .sbrand { color: var(--a-tx); border-bottom: 1px solid var(--a-line); }
  html.bpx body.ui3.sideopen .bpside .nsec { color: var(--a-tx3); }
  html.bpx body.ui3.sideopen .bpside a { color: var(--a-tx2) !important; }
  html.bpx body.ui3.sideopen .bpside a.on { color: var(--a-acc) !important; background: var(--a-acc-soft); box-shadow: inset 0 0 0 1px var(--a-acc-line); }
  html.bpx body.ui3.sideopen .bpside a.on svg { color: var(--a-acc); }
  html.bpx body.ui3.sideopen .bpside .sfoot { border-top: 1px solid var(--a-line); }
}
html.bpx body.ui3 .bpside .sbrand span, html[data-skin="term"] .tt-brand b, body.auth .auth-brand span { color: var(--a-acc) !important; -webkit-text-fill-color: currentColor; background: none !important; }
html.bpx body.ui3 header .qsearch { background: var(--a-s1) !important; border-color: var(--a-line2) !important; color: var(--a-tx3) !important; }
html.bpx body.ui3 header .qsearch kbd { background: var(--a-s2); border-color: var(--a-line); color: var(--a-tx3); }
html.bpx body.ui3 header .hp { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx2) !important; }
html.bpx body.ui3 header .hp b { color: var(--a-tx) !important; }
html.bpx body.ui3 header .hp.ok b { color: var(--a-up) !important; } html.bpx body.ui3 header .hp.ok i { background: var(--a-up) !important; }
html.bpx body.ui3 header .hp.bad b { color: var(--a-dn) !important; } html.bpx body.ui3 header .hp.bad i { background: var(--a-dn) !important; }
html.bpx body.ui3 header .hp.live { border-color: var(--a-gold-line) !important; } html.bpx body.ui3 header .hp.live b { color: var(--a-gold) !important; } html.bpx body.ui3 header .hp.live i { background: var(--a-gold) !important; box-shadow: 0 0 0 3px var(--a-gold-soft); }
html.bpx body.ui3 header .hp.test i { background: var(--a-tx3) !important; } html.bpx body.ui3 header .hp.test b { color: var(--a-tx2) !important; }
html.bpx header .tokchip { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx2) !important; }
/* the market switch: liquid glass, lavender halo */
html.bpx header .mktsw { background: var(--a-s1) !important; border: 1px solid var(--a-acc-line) !important; color: var(--a-tx) !important; box-shadow: inset 0 1px 0 var(--a-glass-line), 0 2px 10px -4px var(--a-acc-soft); transition: box-shadow .2s, border-color .2s, background .2s; }
html.bpx header .mktsw:hover { background: var(--a-acc-soft) !important; border-color: var(--a-acc) !important; box-shadow: 0 0 0 4px var(--a-acc-soft); }
html.bpx header .mktsw .mk { color: var(--a-tx) !important; }
html.bpx header .mktsw .mk i { background: var(--a-acc) !important; color: var(--a-acc-ink) !important; }
html.bpx header .mktsw em { color: var(--a-tx3) !important; }

/* ---------- surfaces: frosted titanium cards ---------- */
html.bpx body.ui3 main .card, html.bpx body.ui3 #bpcx .cbox { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; box-shadow: var(--a-sh) !important; transition: border-color .2s, transform .2s, box-shadow .2s; }
html.bpx body.ui3 main .card:hover, html.bpx body.ui3 #bpcx .cbox:hover { border-color: var(--a-acc-line) !important; }
html.bpx body.ui3 main .card .card, html.bpx body.ui3 #bpcx .cbox .cbox, html.bpx body.ui3 main .card > .card, html.bpx body.ui3 main .enginebay .gauge, html.bpx body.ui3 .botnotes ul.bnl li, html.bpx body.ui3 main .heartcard .hnums span, html.bpx body.ui3 main table.stk tr, html.bpx body.ui3 main .flash { background: var(--a-s2) !important; border: 1px solid var(--a-line) !important; box-shadow: none !important; color: var(--a-tx); }
html.bpx body.ui3 #bpcx .csum div, html.bpx body.ui3 #bpcx .kv div, html.bpx body.ui3 main .stat, html.bpx body.ui3 #bpcx .bpos, html.bpx body.ui3 #bpcx .hl div, html.bpx body.ui3 main .rail .rc, html.bpx body.ui3 #bpps .sum .k, html.bpx body.ui3 main .hero .hgrid div, html.bpx body.ui3 #bpcx .mcard { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; color: var(--a-tx); }
html.bpx body.ui3 main .enginebay { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; }
html.bpx body.ui3 main .flash.err, html.bpx body.ui3 main .flash.warn { background: var(--a-dn-soft) !important; border-color: var(--a-dn) !important; }
html.bpx body.ui3 main .card > .head, html.bpx body.ui3 #bpcx .cbox > .chead { border-bottom-color: var(--a-line) !important; }
html.bpx body.ui3 main .botnotes ul.bnl li b { color: var(--a-tx); } html.bpx body.ui3 .botnotes ul.bnl li p { color: var(--a-tx2); } html.bpx body.ui3 .botnotes ul.bnl li.bad p { color: var(--a-dn); }
/* the hero: a lit sheet of glass */
html.bpx body.ui3 main .hero { background: var(--a-s1) !important; position: relative; overflow: hidden; }
html.bpx body.ui3 main .hero::before { content: none; }
html.bpx body.ui3 main .hero .hv { font-weight: 800; }
html.bpx body.ui3 main .hero .hgrid b { color: var(--a-tx); } html.bpx body.ui3 main .hero .hgrid b.fee { color: var(--a-gold) !important; }

/* ---------- controls ---------- */
html.bpx body.ui3 main .btn, html.bpx body.ui3 main button, html.bpx body.ui3 main a.btn, html.bpx body.ui3 main input[type=submit], html.bpx body.ui3 #bpcx .btnx { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important; transition: transform .12s, border-color .15s, background .15s, box-shadow .2s; }
html.bpx body.ui3 main .btn:hover, html.bpx body.ui3 main button:hover, html.bpx body.ui3 main a.btn:hover, html.bpx body.ui3 #bpcx .btnx:hover { background: var(--a-s2) !important; border-color: var(--a-acc-line) !important; }
html.bpx body.ui3 main .btn:active, html.bpx body.ui3 main button:active { transform: scale(.98); }
html.bpx body.ui3 main .btn.primary, html.bpx body.ui3 main button.primary, html.bpx body.ui3 main a.primary, html.bpx body.ui3 main .btn-primary, html.bpx body.ui3 main button.go, html.bpx body.ui3 #bpcx button.go, html.bpx body.ui3 main .ignite { background: var(--a-acc) !important; border: 1px solid transparent !important; color: var(--a-acc-ink) !important; box-shadow: 0 8px 22px -10px var(--a-acc) !important; }
html.bpx body.ui3 main .btn.primary:hover, html.bpx body.ui3 main button.go:hover { filter: brightness(1.06); }
html.bpx body.ui3 main .btn.danger, html.bpx body.ui3 main button.danger, html.bpx body.ui3 #bpcx button.danger, html.bpx body.ui3 main .btn.red, html.bpx body.ui3 main #psexit, html.bpx body.ui3 main .bex, html.bpx body.ui3 #bpps .abar .ex { background: var(--a-s1) !important; border-color: var(--a-dn) !important; color: var(--a-dn) !important; }
html.bpx body.ui3 main .btn.danger:hover, html.bpx body.ui3 main button.danger:hover { background: var(--a-dn-soft) !important; }
html.bpx body.ui3 #bpcx .seg button.on, html.bpx body.ui3 main .bpx-subnav a.on, html.bpx body.ui3 #bpps .seg button.on, html.bpx body.ui3 #bpps .tabs button.on { background: var(--a-acc-soft) !important; border-color: var(--a-acc-line) !important; color: var(--a-acc) !important; }
html.bpx body.ui3 #bpps .tabs button.on { border-bottom-color: var(--a-acc) !important; background: transparent !important; }
html.bpx body.ui3 #bpps .seg { background: var(--a-s3); } html.bpx body.ui3 #bpps .seg button.on { background: var(--a-s1) !important; }
html.bpx body.ui3 #bpps .seg button.on.lv { color: var(--a-gold) !important; }
html.bpx body.ui3 #bpcx .st3 button.lv { background: var(--a-gold-soft) !important; border-color: var(--a-gold-line) !important; color: var(--a-gold) !important; }
html.bpx body.ui3 main input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), html.bpx body.ui3 main select, html.bpx body.ui3 main textarea { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; }
html.bpx body.ui3 main input:focus, html.bpx body.ui3 main select:focus, html.bpx body.ui3 main textarea:focus { border-color: var(--a-acc) !important; box-shadow: 0 0 0 3px var(--a-acc-soft) !important; }
html.bpx body.ui3 main input[type=checkbox], html.bpx body.ui3 main input[type=radio] { accent-color: var(--a-acc); }
html.bpx body.ui3 main table th { color: var(--a-tx3) !important; border-bottom: 1px solid var(--a-line) !important; }
html.bpx body.ui3 main table td { border-bottom: 1px solid var(--a-line) !important; color: var(--a-tx); }
html.bpx body.ui3 main table tr:hover td { background: var(--a-acc-soft) !important; }
html.bpx body.ui3 .bpx-subnav { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; }
html.bpx body.ui3 > footer { color: var(--a-tx3) !important; border-top: 1px solid var(--a-line) !important; background: transparent !important; }

/* ---------- chips: text labels with meaning; LIVE = champagne gold, never italic, never faded ---------- */
html.bpx body.ui3 main .chip, html.bpx body.ui3 main .badge, html.bpx body.ui3 main em.chip, html.bpx body.ui3 #bpcx .chip { font-style: normal !important; font-weight: 650 !important; color: var(--a-tx2); border: 1px solid var(--a-line2); background: var(--a-s2); border-radius: 999px !important; }
html.bpx body.ui3 main .chip.live, html.bpx body.ui3 main .badge.live, html.bpx body.ui3 main .badge.active, html.bpx body.ui3 main em.chip.live, html.bpx body.ui3 #bpps .chip.live { background: var(--a-gold-soft) !important; color: var(--a-gold) !important; border: 1px solid var(--a-gold-line) !important; letter-spacing: .04em; }
html.bpx body.ui3 main .hero .hk .chip { padding: 2px 10px; font-size: 11px; line-height: 1.5; vertical-align: 1px; }
html.bpx body.ui3 #bpps .chip.done { color: var(--a-up) !important; border-color: var(--a-up) !important; background: var(--a-up-soft) !important; }
html.bpx body.ui3 #bpps .chip.fail { color: var(--a-dn) !important; border-color: var(--a-dn) !important; background: var(--a-dn-soft) !important; }
html.bpx body.ui3 #bpps .chip.pend { color: var(--a-gold) !important; border-color: var(--a-gold-line) !important; background: var(--a-gold-soft) !important; }

/* ---------- positions and miner surfaces ---------- */
html.bpx body.ui3 #bpps .prow { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; color: var(--a-tx) !important; transition: border-color .15s, transform .15s, box-shadow .2s; }
html.bpx body.ui3 #bpps .prow:hover { border-color: var(--a-acc-line) !important; box-shadow: 0 6px 18px -12px var(--a-acc) !important; }
html.bpx body.ui3 #bpps .prow.sel { background: var(--a-acc-soft) !important; border-color: var(--a-acc-line) !important; }
html.bpx body.ui3 #bpps .prow .ck { border-color: var(--a-line2); } html.bpx body.ui3 #bpps .prow.sel .ck { background: var(--a-acc); border-color: var(--a-acc); color: var(--a-acc-ink); }
html.bpx body.ui3 #bpps .bs { background: var(--a-up); color: #08231a; } html.bpx body.ui3 #bpps .bs.s { background: var(--a-dn); color: #2a0b10; }
html.bpx body.ui3 #bpps .abar { background: var(--a-glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--a-line2) !important; box-shadow: 0 16px 50px var(--a-scrim) !important; color: var(--a-tx); }
html.bpx body.ui3 #bpps .sheet { background: var(--a-glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--a-line) !important; box-shadow: 0 -24px 70px var(--a-scrim) !important; color: var(--a-tx); }
html.bpx body.ui3 #bpps .sheet-scrim { background: var(--a-scrim); }
html.bpx body.ui3 #bpps .sheet h3, html.bpx body.ui3 #bpps .sheet dd { color: var(--a-tx); } html.bpx body.ui3 #bpps .sheet dt, html.bpx body.ui3 #bpps .sheet .sub2, html.bpx body.ui3 #bpps .sheet h4 { color: var(--a-tx2); }
html.bpx body.ui3 #bpps .empty { color: var(--a-tx2); border: 1px dashed var(--a-line2); }
html.bpx body.ui3 #bpcx .mcard.on { border-color: var(--a-acc-line) !important; box-shadow: inset 0 0 0 1px var(--a-acc-line) !important; }
html.bpx body.ui3 #bpcx .mcard .mk, html.bpx body.ui3 #bpcx .mnum i { color: var(--a-tx3) !important; } html.bpx body.ui3 #bpcx .mnum em { color: var(--a-tx); }
html.bpx body.ui3 #bpcx tr.hl td { background: var(--a-acc-soft) !important; }

/* ---------- popups ---------- */
html.bpx .bpx-modal, html.bpx .palette { background: var(--a-scrim) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.bpx .bpx-dlg, html.bpx body.ui3 .palette .palbox { background: var(--a-glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--a-line) !important; box-shadow: 0 30px 90px var(--a-scrim) !important; color: var(--a-tx) !important; }
html.bpx .bpx-dlg h3 { color: var(--a-tx) !important; } html.bpx .bpx-dlg p { color: var(--a-tx2) !important; }
html.bpx .bpx-dlg .bpx-acts button { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; }
html.bpx .bpx-dlg .bpx-acts button.go { background: var(--a-acc) !important; border-color: transparent !important; color: var(--a-acc-ink) !important; }
html.bpx .bpx-dlg .bpx-acts button.go.danger { background: var(--a-dn) !important; border-color: var(--a-dn) !important; color: #fff !important; }
html.bpx body.ui3 .palette .palbox input { background: var(--a-s1) !important; color: var(--a-tx) !important; border-color: var(--a-line2) !important; }
html.bpx body.ui3 .palette .on, html.bpx body.ui3 .palette .sel, html.bpx body.ui3 .palette a:hover { background: var(--a-acc-soft) !important; color: var(--a-tx) !important; }

/* ---------- the appearance control in the menu foot ---------- */
html.bpx body.ui3 .bpside .athm { display: flex; gap: 4px; margin: 6px 0 2px; padding: 3px; border-radius: 12px; background: var(--a-s3); }
html.bpx body.ui3 .bpside .athm button { flex: 1; min-height: 30px; padding: 4px 6px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; color: var(--a-tx3) !important; font: 600 11.5px/1.2 Inter, system-ui, sans-serif !important; cursor: pointer; }
html.bpx body.ui3 .bpside .athm button.on { background: var(--a-s1) !important; color: var(--a-acc) !important; box-shadow: 0 1px 3px var(--a-scrim) !important; }
html.bpx.smini body.ui3 .bpside .athm { flex-direction: column; }

/* ---------- member zone + auth pages follow the mode (their own CSS reads the --n- tokens above) ---------- */
html[data-skin="term"] body, html[data-skin="term"] [class*=card], html[data-skin="term"] [class*=panel], html[data-skin="term"] table { background-color: var(--a-s1); border-color: var(--a-line); color: var(--a-tx); }
html[data-skin="term"] body .term-top { background: var(--a-glass) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--a-line) !important; }
html[data-skin="term"] input, html[data-skin="term"] select, html[data-skin="term"] textarea { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; }
html[data-skin="term"] .aipill { background: var(--a-glass) !important; border-color: var(--a-line2) !important; }
html[data-skin="term"] .cmsg .bubble, html[data-skin="term"] .cmsg > div:not(.avatar):not(.cav), html[data-skin="term"] .cbub { background: var(--a-s2) !important; color: var(--a-tx) !important; border-color: var(--a-line) !important; }
body.auth .auth-card { background: var(--a-s1) !important; border: 1px solid var(--a-line) !important; box-shadow: var(--a-sh) !important; color: var(--a-tx); }
body.auth, body.auth h1 { color: var(--a-tx); } body.auth .sub, body.auth .auth-foot, body.auth label { color: var(--a-tx2); }
body.auth input { background: var(--a-s1) !important; border: 1px solid var(--a-line2) !important; color: var(--a-tx) !important; }
body.auth .btn, body.auth button[type=submit] { background: var(--a-acc) !important; color: var(--a-acc-ink) !important; border: 0 !important; }
body.auth a { color: var(--a-acc); }

/* ---------- motion: calm, meaningful, honoured off ---------- */
html.bpx body.ui3 main .card, html.bpx body.ui3 #bpps .prow, html.bpx body.ui3 #bpcx .cbox { will-change: auto; }
@media (prefers-reduced-motion: reduce) { html * , html *::before, html *::after { animation: none !important; transition: none !important; } }

/* ---------- fixes for rules the older layer wrote with higher specificity ---------- */
html.bpx body.ui3 main .card > .head h2, html.bpx body.ui3 main .card > .head h3, html.bpx body.ui3 #bpcx .cbox > .chead h3, html.bpx body.ui3 main .rail .rv, html.bpx body.ui3 main .heartcard .hnums b { color: var(--a-tx) !important; }
html.bpx body.ui3 main .pacts .btn:not(.primary) { background: var(--a-s1) !important; }
html.bpx body.ui3 main .sess { color: var(--a-tx2) !important; }
html.bpx body.ui3 main .sess.live { color: var(--a-up) !important; }
html.bpx body.ui3 main .sess.soon { color: var(--a-gold) !important; }
html.bpx body.ui3 main .sess.off { color: var(--a-tx2) !important; }
html.bpx body.ui3 main .hero .hk .chip { color: var(--a-tx2) !important; background: var(--a-s2) !important; border-color: var(--a-line2) !important; }
html.bpx body.ui3 main .hero .hk .chip.live { color: var(--a-gold) !important; background: var(--a-gold-soft) !important; border-color: var(--a-gold-line) !important; }

/* BP-UI10b (owner: "change the colour to green, including the bot number"): the bot number everywhere is the accent green */
html.bpx body.ui3 main .bno, html.bpx body.ui3 #bpps .gh a, html.bpx body.ui3 main .pbh .nm a, html.bpx body.ui3 main .card h2 a, html.bpx body.ui3 main td a:not(.btn) { color: var(--a-acc) !important; }

/* ---------- BP-RAIL (10 Oct 2026, owner: "redesign with RailOne's simplicity - white, profit green #079455, deep green
   headings #064E3B, pale mint #ECFDF3 cards, realistic imagery, subtle glass; mobile-first, no bottom bar"). The tokens
   above carry the palette to every page; this block adds the RailOne touches. */
html.bpx body h1, html.bpx body h2, html.bpx body h3, html.bpx body .card > .head h2 { color: var(--a-head); }
html.bpx .phd h1, html.bpx .phead h1 { letter-spacing: -.02em; }
@media (max-width: 760px) {
  html.bpx input, html.bpx select, html.bpx textarea { font-size: 16px; }   /* no iPhone zoom-on-focus */
  html.bpx .pacts .btn, html.bpx button.go, html.bpx .btn.primary { min-height: 44px; }
  html.bpx body { padding-bottom: env(safe-area-inset-bottom); }
}
/* the home workspace (shared by / and /crypto) */
.rgreet { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.rgreet h1 { margin: 0; font-size: 27px; color: var(--a-head); }
.rgreet .racct { font-size: 12.5px; color: var(--a-tx3); }
.rws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.rwcard { display: block; border: 1px solid var(--a-line); border-radius: 18px; overflow: hidden; background: var(--a-s1); text-decoration: none; color: var(--a-tx); box-shadow: var(--a-sh); transition: transform .15s ease, box-shadow .15s ease; }
.rwcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(6, 78, 59, .14); }
.rwcard img { display: block; width: 100%; height: 128px; object-fit: cover; background: var(--a-s2); }
.rwcard .rwt { padding: 12px 14px 13px; }
.rwcard .rwt b { display: block; font-size: 15.5px; color: var(--a-head); }
.rwcard .rwt span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--a-tx2); line-height: 1.45; }
.rtools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 10px 0 16px; }
.rtool { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 6px 12px; min-height: 44px; border: 1px solid var(--a-line); border-radius: 14px; background: var(--a-s1); color: var(--a-tx2); text-decoration: none; font-size: 12px; font-weight: 600; text-align: center; }
.rtool:hover { border-color: var(--a-acc-line); color: var(--a-head); }
.rtool svg { width: 44px; height: 44px; padding: 11px; box-sizing: border-box; border-radius: 13px; background: var(--a-acc-soft); stroke: var(--a-acc); }
.rtool:nth-child(2) svg { background: var(--a-cyan-soft); stroke: var(--a-cyan); }
.rtool:nth-child(3) svg { background: var(--a-gold-soft); stroke: var(--a-gold); }
.rtool:nth-child(5) svg { background: var(--a-cyan-soft); stroke: var(--a-cyan); }
.rtool:nth-child(6) svg { background: var(--a-gold-soft); stroke: var(--a-gold); }
.rsec { margin: 18px 0 8px; font-size: 16px; color: var(--a-head); }
@media (max-width: 860px) { .rws { grid-template-columns: 1fr; } .rwcard img { height: 110px; } .rtools { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the guided tour */
.btour-scrim { position: fixed; inset: 0; z-index: 90; background: var(--a-scrim); }
.btour-ring { position: fixed; z-index: 91; border: 2px solid var(--a-acc); border-radius: 14px; box-shadow: 0 0 0 6px var(--a-acc-soft), 0 0 0 4000px rgba(6, 78, 59, .35); pointer-events: none; transition: all .25s ease; }
.btour-tip { position: fixed; z-index: 92; width: min(320px, calc(100vw - 28px)); background: var(--a-s1); color: var(--a-tx); border: 1px solid var(--a-line2); border-radius: 14px; padding: 14px; box-shadow: 0 18px 50px rgba(6, 78, 59, .25); }
.btour-tip b { display: block; color: var(--a-head); margin-bottom: 4px; }
.btour-tip p { margin: 0 0 10px; font-size: 13px; color: var(--a-tx2); line-height: 1.5; }
.btour-tip .bt-row { display: flex; align-items: center; gap: 8px; }
.btour-tip button { min-height: 36px; padding: 6px 14px; border-radius: 9px; border: 1px solid var(--a-line2); background: var(--a-s2); color: var(--a-tx); cursor: pointer; font-size: 13px; }
.btour-tip button.bt-next { background: var(--a-acc); border-color: var(--a-acc); color: var(--a-acc-ink); font-weight: 700; }
.btour-tip .bt-dots { margin-left: auto; font-size: 11.5px; color: var(--a-tx3); }

/* ---------- BP-RAIL2 (10 Oct 2026): style.css keeps an old force-light block (html body [class*=card] / table / th /
   inputs ... !important) that whitened dark-mode surfaces the moment a class contained "card" (.botcard, .rwcard).
   The theme tokens win again - white in light, charcoal in dark, in BOTH modes by the same rule. */
html.bpx body [class*=card], html.bpx body [class*=panel] { background: var(--a-s1) !important; border-color: var(--a-line) !important; }
html.bpx body #bpm2 .botcard, html.bpx body .botcard { background: var(--a-s2) !important; }
html.bpx body .rwcard { background: var(--a-s1) !important; }
html.bpx body table { background: transparent !important; }
html.bpx body th { background: var(--a-s1) !important; color: var(--a-tx3) !important; }
html.bpx body td { border-color: var(--a-line) !important; }
html.bpx body input, html.bpx body select, html.bpx body textarea { background: var(--a-s1) !important; border-color: var(--a-line2) !important; color: var(--a-tx) !important; }
html.bpx body input:focus, html.bpx body select:focus, html.bpx body textarea:focus { border-color: var(--a-acc) !important; box-shadow: 0 0 0 3px var(--a-acc-soft) !important; }

/* ---------- BP-RAIL3 (10 Oct 2026, owner: "when tapped some things got hidden / the bot colour goes white in Aurora,
   Auto or Pearl; make the glider in each section"): dark-mode form fields were white with light text (a lightified rule
   outranked BP-RAIL2 - countered here at higher specificity), and every section's selected chip / tab / segment now
   GLIDES: colours ease over, a gentle press on touch, a soft ring on the active pill. */
html.bpx body.ui3 main input, html.bpx body.ui3 main select, html.bpx body.ui3 main textarea,
html.bpx body.ui3 input, html.bpx body.ui3 select, html.bpx body.ui3 textarea { background: var(--a-s1) !important; color: var(--a-tx) !important; border-color: var(--a-line2) !important; }
html.bpx body.ui3 main input:focus, html.bpx body.ui3 main select:focus, html.bpx body.ui3 main textarea:focus,
html.bpx body.ui3 input:focus, html.bpx body.ui3 select:focus, html.bpx body.ui3 textarea:focus { border-color: var(--a-acc) !important; box-shadow: 0 0 0 3px var(--a-acc-soft) !important; outline: none !important; }
html.bpx body.ui3 input::placeholder, html.bpx body.ui3 textarea::placeholder { color: var(--a-tx3) !important; }
/* bpui/bpxo carry even heavier lightified selectors (html.bpx[data-bp] main input:not(..)x4 { #fff !important }) - out-specified here */
html.bpx[data-bp][data-mkt] body.ui3 main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="file"]),
html.bpx[data-bp][data-mkt] body.ui3 main select, html.bpx[data-bp][data-mkt] body.ui3 main textarea,
html.bpx[data-bp][data-mkt] body.ui3 #bpcx input, html.bpx[data-bp][data-mkt] body.ui3 #bpcx select { background: var(--a-s1) !important; color: var(--a-tx) !important; border-color: var(--a-line2) !important; }
/* the glider */
html.bpx .seg button, html.bpx .m2tabs button, html.bpx #botfilt button, html.bpx .bpx-subnav a, html.bpx .rtool, html.bpx .rwcard, html.bpx .btn, html.bpx button, html.bpx .chip
  { transition: background-color .22s ease, color .18s ease, border-color .22s ease, transform .12s ease, box-shadow .22s ease; }
html.bpx .seg button:active, html.bpx .m2tabs button:active, html.bpx #botfilt button:active, html.bpx .btn:active, html.bpx button:active, html.bpx .rtool:active, html.bpx .rwcard:active { transform: scale(.965); }
html.bpx .seg button.on, html.bpx .m2tabs button.on, html.bpx #botfilt button.on, html.bpx .bpx-subnav a.on { box-shadow: 0 2px 12px var(--a-acc-soft), inset 0 0 0 1px var(--a-acc-line); }
@media (prefers-reduced-motion: reduce) { html.bpx * { transition-duration: .01s !important; } }

/* ---------- BP-RAIL4 (11 Oct 2026, owner: "rename Strategy Engine to Bots with every deployed bot numbered; rules and
   delete inside each card; one-line scrolling rows in activity and positions; redesign the bot cards"). */
/* the bot number chip */
html.bpx .bno2 { display: inline-flex; align-items: center; border-radius: 9px; padding: 2px 9px; margin-right: 6px; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--a-acc); color: var(--a-acc-ink); }
/* redesigned bot cards: roomier, calmer, state-tinted edge */
html.bpx body.ui3 #bpcx .cbox.botcard { border-radius: 18px !important; padding: 16px 16px 14px !important; margin: 14px 0 !important; box-shadow: var(--a-sh) !important; }
html.bpx body.ui3 #bpcx .cbox.botcard > .chead h3 { font-size: 16.5px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html.bpx body.ui3 #bpcx .botcard .rules { margin: 6px 0 8px; line-height: 1.5; white-space: normal; }
html.bpx body.ui3 #bpcx .botcard.dep[data-state="live"] { box-shadow: inset 3px 0 0 var(--a-gold), var(--a-sh) !important; }
html.bpx body.ui3 #bpcx .botcard.dep[data-state="test"] { box-shadow: inset 3px 0 0 var(--a-cyan), var(--a-sh) !important; }
html.bpx body.ui3 #bpcx .botcard.dep[data-state="off"] { opacity: .82; }
/* one-line rows that scroll sideways (logs, alerts, open positions) - never a tall stacked card */
html.bpx .lglist { max-width: 100%; }
html.bpx .lgrow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--a-line); white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: 12.5px; }
html.bpx .lgrow::-webkit-scrollbar { display: none; }
html.bpx .lgrow > * { flex: 0 0 auto !important; }   /* nothing in a one-line row shrinks - the row scrolls instead */
html.bpx .lgrow .t { color: var(--a-tx3); font-variant-numeric: tabular-nums; }
html.bpx .lgrow .m { flex: 0 0 auto; color: var(--a-tx); }
html.bpx .lgrow .m.bad, html.bpx .lgrow .bad { color: var(--a-dn); }
/* home "Recent activity": each note is ONE line that scrolls sideways */
html.bpx .bnl li > div { display: flex !important; align-items: baseline; gap: 10px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
html.bpx .bnl li > div::-webkit-scrollbar { display: none; }
html.bpx .bnl li > div b, html.bpx .bnl li > div span, html.bpx .bnl li > div p { flex: 0 0 auto; margin: 0 !important; display: inline !important; }
/* chips readable in every theme (owner: "many of the text gets hidden") */
html.bpx .chip.paper { color: var(--a-cyan) !important; border-color: var(--a-cyan) !important; background: var(--a-cyan-soft) !important; }
html.bpx .chip.live { color: var(--a-gold) !important; border-color: var(--a-gold-line) !important; background: var(--a-gold-soft) !important; font-style: normal !important; }
html.bpx body.ui3 main .sub, html.bpx body.ui3 main .muted { color: var(--a-tx3) !important; }
html.bpx body.ui3 main p, html.bpx body.ui3 main li, html.bpx body.ui3 main td, html.bpx body.ui3 main label, html.bpx body.ui3 main summary { color: var(--a-tx2); }
/* selected segments and filter chips: SOLID accent pill with ink text - never a faint tint that hides the label */
html.bpx body.ui3 .seg button.on, html.bpx body.ui3 #botfilt button.on, html.bpx body.ui3 #hmode button.on, html.bpx body.ui3 #lgf button.on { background: var(--a-acc) !important; color: var(--a-acc-ink) !important; border-color: var(--a-acc) !important; }
html.bpx body.ui3 .seg button.on.short { background: var(--a-dn) !important; border-color: var(--a-dn) !important; color: #ffffff !important; }
html.bpx body.ui3 .seg.st3 button.on.lv, html.bpx body.ui3 .seg button.on[data-st="live"], html.bpx body.ui3 .dseg button.on.lv { background: var(--a-gold) !important; border-color: var(--a-gold) !important; color: #ffffff !important; }
/* always-visible Delete in a deployed bot's header */
html.bpx .hctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.bpx .hdrdel { padding: 5px 12px !important; font-size: 12px !important; color: var(--a-dn) !important; border: 1px solid var(--a-dn) !important; background: var(--a-dn-soft) !important; border-radius: 10px !important; }

/* ---------- BP-RAIL5 (11 Oct 2026, owner: "words are hidden in many parts of the website - fix"): legacy chips and
   labels that kept their old dark-theme colors and turned invisible on the light surfaces. Token colors, so they
   read in Pearl Light and Aurora Dark alike. Found by a contrast sweep of every page. */
html { --a-warn2: #B54708; --a-warn2-soft: #FFFAEB; }
html[data-bptheme="dark"] { --a-warn2: #f7c66b; --a-warn2-soft: rgba(247, 198, 107, .14); }
html.bpx body.ui3 main .bpk-ch.ok { background: var(--a-s2) !important; color: var(--a-acc) !important; border-color: var(--a-s3) !important; }
html.bpx body.ui3 main .pykey-no { background: var(--a-s2) !important; color: var(--a-tx3) !important; }
html.bpx body.ui3 main b.zero { color: var(--a-tx3) !important; }
html.bpx body.ui3 main .lvl.warn { background: var(--a-warn2-soft) !important; color: var(--a-warn2) !important; }
html.bpx body.ui3 main .badge.active { background: var(--a-s2) !important; color: var(--a-acc) !important; border-color: var(--a-s3) !important; }
html.bpx body.ui3 main em.chip.paper, html.bpx body.ui3 main .chip.paper { background: var(--a-s3) !important; color: var(--a-tx2) !important; }
html.bpx body.ui3 main .tag.L { background: var(--a-s2) !important; color: var(--a-acc) !important; }
html.bpx body.ui3 main .tag.S { background: var(--a-dn-soft) !important; color: var(--a-dn) !important; }
html.bpx body.ui3 main a:not([class]):not([style*="background"]) { color: var(--a-acc) !important; }   /* BP-UIFIX3: a link drawn as a coloured button keeps its own text colour */
/* the positions/P&L block (#bppv) carried its own hard-coded dark card colors - retold in tokens */
html.bpx body.ui3 #bppv .bot, html.bpx body.ui3 #bppv .tot div, html.bpx body.ui3 #bppv .bsum div { background: var(--a-s2) !important; border-color: var(--a-s3) !important; }
html.bpx body.ui3 #bppv .pvfilt button { background: var(--a-s2) !important; border-color: var(--a-s3) !important; color: var(--a-tx2) !important; }
html.bpx body.ui3 #bppv .pvfilt button.on { background: var(--a-acc) !important; border-color: var(--a-acc) !important; color: #ffffff !important; }
html.bpx body.ui3 #bppv .zero, html.bpx body.ui3 #bppv .pvsub, html.bpx body.ui3 #bppv .note { color: var(--a-tx3) !important; }
html.bpx body.ui3 #bppv .chip { color: var(--a-tx3) !important; border-color: var(--a-s3) !important; }
html.bpx body.ui3 #bppv .chip.live { color: #b4780a !important; border-color: #b4780a !important; }
html.bpx body.ui3 #bppv .chip.run { color: var(--a-acc) !important; border-color: var(--a-acc) !important; }
html.bpx body.ui3 #bppv .bno { color: var(--a-acc) !important; }
html.bpx body.ui3 #bppv .neg { color: var(--a-dn) !important; }   /* losses stay red, never green */
html[data-bptheme="dark"] body.ui3 #bppv .chip.live { color: #d8a23a !important; border-color: #d8a23a !important; }
/* the broker feed strip (#bpfeed) kept a hard-coded dark panel inside the light card */
html.bpx body.ui3 main #bpfeed div { background: var(--a-s2) !important; border-color: var(--a-s3) !important; color: var(--a-tx) !important; }
html.bpx body.ui3 main #bpfeed b { color: var(--a-tx) !important; }

/* ---------- BP-RAIL6 (12 Oct 2026, owner: "white colour / hidden text in bots and all over the website"): the DARK
   theme sweep. Lightified components kept hard light-theme colors (dark text, white buttons) that disappear on the
   dark surfaces. Every rule below only runs in Aurora Dark and restates the colour in tokens. */
html[data-bptheme="dark"] body.ui3 main .stat { background: var(--a-s2) !important; border-color: var(--a-s3) !important; }
html[data-bptheme="dark"] body.ui3 main .stat .v { color: var(--a-tx) !important; }
html[data-bptheme="dark"] body.ui3 main .stat .k { color: var(--a-tx3) !important; }
html[data-bptheme="dark"] body.ui3 main .flash.err { background: var(--a-dn-soft) !important; border-color: rgba(246, 70, 93, .35) !important; color: #f97066 !important; }
html[data-bptheme="dark"] body.ui3 main .flash.warn { background: rgba(247, 198, 107, .12) !important; border-color: rgba(247, 198, 107, .35) !important; color: #f7c66b !important; }
html[data-bptheme="dark"] body.ui3 main .bk-bad { color: var(--a-dn) !important; }
html[data-bptheme="dark"] body.ui3 main .bk-ok { color: var(--a-up) !important; }
html[data-bptheme="dark"] body.ui3 main .bk-m { color: var(--a-tx3) !important; }
html[data-bptheme="dark"] body.ui3 main .bpk-ch.no { color: var(--a-dn) !important; background: var(--a-dn-soft) !important; border-color: transparent !important; }
html[data-bptheme="dark"] body.ui3 main .bpseg-b.bpseg-off, html[data-bptheme="dark"] body.ui3 main .bpseg-off.is-on { background: var(--a-s3) !important; color: var(--a-tx) !important; border-color: var(--a-s3) !important; }
html[data-bptheme="dark"] body.ui3 main .tag.P { background: var(--a-s3) !important; color: var(--a-tx2) !important; }
html[data-bptheme="dark"] body.ui3 main span[style*="#f0646f"] { color: var(--a-dn) !important; }
html[data-bptheme="dark"] body.ui3 main span[style*="#2fbf84"] { color: var(--a-up) !important; }
/* light-dark() colours from lightify.js pick their side from the element's color-scheme */
html[data-bptheme="light"], html:not([data-bptheme]) { color-scheme: light; }
html[data-bptheme="dark"] { color-scheme: dark; }
html[data-bptheme="dark"] body.ui3 main .statgrid .v, html[data-bptheme="dark"] body.ui3 main .statgrid .stat .v { color: var(--a-tx) !important; }

/* ---------- BP-RAIL7 (12 Oct 2026, owner: "fix the white marks, redesign the workspace, one compact row per record
   on mobile with easy side-scrolling"). */
/* 7a. DARK: the lightified static sheet still paints white gradients and panels over cards - flattened to charcoal */
html[data-bptheme="dark"] body [class*="card"], html[data-bptheme="dark"] body.ui3 main .card,
html[data-bptheme="dark"] body.ui3 main .bpgrid > .card, html[data-bptheme="dark"] body.ui3 main .card.bplite.bpk {
  background: var(--a-s1) !important; background-image: none !important; border-color: var(--a-s3) !important;
}
html[data-bptheme="dark"] body [class*="card"]::before, html[data-bptheme="dark"] body [class*="card"]::after { background: none !important; }
html[data-bptheme="dark"] body.ui3 main .bpseg { background: var(--a-s2) !important; border-color: var(--a-s3) !important; }
html[data-bptheme="dark"] body.ui3 main .bpseg button, html[data-bptheme="dark"] body.ui3 main .bpseg-b { color: var(--a-tx2) !important; }
/* 7b. compact shortcut chips replace the illustrated workspace cards */
html.bpx .rws2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.bpx .rwc { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--a-s2); border: 1px solid var(--a-line); text-decoration: none; color: var(--a-tx); min-height: 44px; justify-content: center; }
html.bpx .rwc b { font-size: 14px; color: var(--a-head); }
html.bpx .rwc span { font-size: 12px; color: var(--a-tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  html.bpx .rws2 { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  html.bpx .rws2::-webkit-scrollbar { display: none; }
  html.bpx .rwc { flex: 0 0 72%; }
  html.bpx .rtools { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html.bpx .rtools::-webkit-scrollbar { display: none; }
  html.bpx .rtools > a { flex: 0 0 auto; }
  html.bpx .rgreet h1 { font-size: 24px !important; }
  html.bpx h2.rsec { font-size: 15px; margin: 14px 2px 8px; }
}
/* 7c. one compact row per record on mobile: tables keep their rows and swipe sideways */
html.bpx .tscroll, html.bpx .tw { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; position: relative; }
html.bpx .canswipe { background-image: linear-gradient(270deg, var(--a-s3), transparent 26px); background-repeat: no-repeat; background-position: right center; background-attachment: local; }
html.bpx .swiphint { position: sticky; left: 60%; bottom: 4px; display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--a-head); color: var(--a-bg); font-size: 11.5px; font-weight: 700; opacity: .92; transition: opacity .4s; pointer-events: none; }
html.bpx .swiphint.off { opacity: 0; }
@media (max-width: 760px) {
  html.bpx main table { font-size: 12.5px; }
  html.bpx main table th, html.bpx main table td { padding: 8px 8px; white-space: nowrap; }
  html.bpx main table th:first-child, html.bpx main table td:first-child { position: sticky; left: 0; background: var(--a-s1); z-index: 1; }
  html.bpx main table tr { min-height: 40px; }
}
/* 7d. market accents: green stays the Indian accent; crypto gets a subtle gold on its section headings and market chip */
html.bpx[data-mkt="crypto"] body.ui3 main h2.rsec { color: #b4871f; }
html.bpx[data-mkt="crypto"][data-bptheme="dark"] body.ui3 main h2.rsec { color: #d8a23a; }
html[data-bptheme="dark"] #bpToast { background: var(--a-s2) !important; color: var(--a-tx) !important; border-color: var(--a-s3) !important; }

/* BP-UIFIX1 (14 Oct 2026, owner: "many parts show white on white - fix fully"): bpui.css gives html.bpx AND body
   color-scheme: light, so inside <body> every light-dark() colour from lightify.js kept its LIGHT side in the dark theme
   (white backgrounds) while the dark theme turned the text white. In the dark theme the whole page is dark. */
html.bpx[data-bptheme="dark"], html.bpx[data-bptheme="dark"] body, html.bpx[data-bptheme="dark"] body.ui3,
html[data-bptheme="dark"] body { color-scheme: dark; }
html.bpx[data-bptheme="light"], html.bpx[data-bptheme="light"] body, html.bpx:not([data-bptheme]) body { color-scheme: light; }

/* BP-UIFIX3 (14 Oct 2026): components written for one theme only, made readable in both. Found by a 390 px phone audit of
   every page in Pearl Light and Aurora Dark (text below 3:1 against its real background). */
html[data-bptheme="light"] .bpk-st.live, html:not([data-bptheme]) .bpk-st.live { color: #0b7a52 !important; }
html[data-bptheme="dark"] .bpk-st.paper { color: #9db8ff !important; }
html[data-bptheme="dark"] .ur-filterchip.active, html[data-bptheme="dark"] a.navhere, html[data-bptheme="dark"] a.navhere span { color: #e8f5ef !important; }
html[data-bptheme="dark"] .pill.off { color: #ff8a98 !important; }
html[data-bptheme="light"] .lnk, html:not([data-bptheme]) .lnk, html[data-bptheme="light"] #btload, html:not([data-bptheme]) #btload { color: #0b7a52 !important; }
html[data-bptheme="dark"] #bpps .seg button, html[data-bptheme="dark"] #bpps .tabs button, html[data-bptheme="dark"] #bpps .chip { color: #b9c4bf !important; }
html[data-bptheme="dark"] #bpps .seg button.on { background: #2a3238 !important; color: #f1f5f7 !important; }
html[data-bptheme="dark"] #bpps .tabs button.on { color: #f1f5f7 !important; }
html.bpx[data-bptheme="dark"] body.ui3 #bppv .pvfilt button.on, html[data-bptheme="dark"] #bppv .pvfilt button.on { color: #0f1a14 !important; }
html[data-bptheme="dark"] #bppv .pvhalt { color: #fdba74 !important; border-color: rgba(253, 186, 116, .4) !important; background: rgba(253, 186, 116, .08) !important; }
html[data-bptheme="light"] .bk-ok, html:not([data-bptheme]) .bk-ok, html[data-bptheme="light"] .fp-ok, html:not([data-bptheme]) .fp-ok { color: #13796f; }