/* ══════════════════════════════════════════════════════════════════════
   Evie — home, connected: Evie Scout.

   Evie's own language throughout, flat like the rest of the site (solid
   colours, 1px lines, no gradients): Settings and Session as on Eviematic Ai,
   the trades as Analysis's Transactions, the balance as the header's figure
   and REAL badge. One screen at every size — the page never scrolls, only
   the trade list inside itself (scan/panel.js sets the page a little smaller
   where the layout alone cannot fit it).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Analysis's trade colours, so a trade reads the same on both pages. */
  --up:    #15a34a;
  --down:  #dc2626;
  --even:  #2563eb;
  --odd:   #e11d74;
  --sh-gap: 12px;
}
:root[data-theme="dark"] {
  --up:    #22c55e;
  --down:  #ef4444;
  --even:  #3b82f6;
  --odd:   #ff3d87;
}

.sh-page [hidden] { display: none !important; }

/* ── the frame: the window, exactly ─────────────────────────────────── */

html:has(body.sh-page) { overflow: hidden; height: 100%; scroll-padding-top: 0; }
body.sh-page { height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
.sh-page .nav { z-index: 90; border-bottom-color: var(--line); }
.sh { position: relative; padding-top: 68px; }
.sh-fit {
  display: flex; flex-direction: column; gap: var(--sh-gap);
  padding: 10px 0 8px; overflow: hidden; min-height: 0;
}

.sh-flash { position: fixed; top: 78px; left: 50%; z-index: 96; transform: translate(-50%, -6px); margin: 0; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.35); }
.sh-flash.is-in { transform: translate(-50%, 0); }

/* ── the balance: the header's figure and badge, now the account switch ── */

.sh-acct { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.tbal-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; height: 34px; padding: 0 10px 0 12px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background .18s ease;
}
.tbal-chip:hover { border-color: var(--blue); }
.tbal-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tbal-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.tbal.is-live .tbal-live { background: var(--ok); animation: sh-beat 2.4s ease-in-out infinite; }
.tbal.is-wait .tbal-live { background: var(--amber); }
@keyframes sh-beat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 0%, transparent); } }
.tbal-amt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.tbal.is-real .tbal-amt { color: var(--real); }
.tbal-kind {
  flex: none; padding: 2px 9px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue);
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4;
}
.tbal.is-demo .tbal-kind { border-color: var(--amber); color: var(--amber); }
.tbal-caret { flex: none; color: var(--ink-faint); transition: transform .18s ease; }
.tbal-chip[aria-expanded="true"] .tbal-caret { transform: rotate(180deg); }

/* One line under the figure: why it may look short, and the way to fix it. */
.tbal-hint {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding-right: 4px;
  font-size: 10.5px; line-height: 1.2; color: var(--ink-faint); white-space: nowrap;
}
.tbal-hint b { font-weight: 650; color: var(--blue); }
.tbal-hint svg { flex: none; color: var(--blue); }
.tbal-hint:hover b { color: var(--blue-hi); text-decoration: underline; text-underline-offset: 2px; }

.tbal-menu {
  position: absolute; right: 0; top: 40px; z-index: 100; width: min(330px, calc(100vw - 24px));
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.35); transform-origin: top right; animation: sh-pop .2s cubic-bezier(.2, .9, .3, 1.15);
}
.tbal-menu-k { margin: 4px 8px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.tbal-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.tbal-row:hover, .tbal-row:focus-visible { background: var(--surface-2); outline: none; }
.tbal-row[disabled] { cursor: default; opacity: .55; }
.tbal-row-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tbal-row-k { font-size: 13px; font-weight: 650; }
.tbal-row-id { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tbal-row-v { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbal-row.is-real .tbal-row-v { color: var(--real); }
.tbal-row.is-demo .tbal-row-k { color: var(--amber); }
.tbal-row-on { width: 15px; height: 15px; flex: none; color: var(--blue); visibility: hidden; }
.tbal-row[aria-checked="true"] .tbal-row-on { visibility: visible; }
.tbal-foot { display: grid; gap: 9px; margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--line); }
.tbal-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); }
.tbal-note strong { color: var(--ink); font-weight: 650; }
.tbal-transfer {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; padding: 6px 12px;
  border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 12px; font-weight: 650;
}
.tbal-transfer:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.tbal-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* No real account on this login: the figure gives way to a red way to open one. */
.tbal-open-real {
  display: none; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px;
  background: #d92b36; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(217, 43, 54, 0.28); transition: filter .15s ease;
}
.tbal-open-real:hover { filter: brightness(1.07); }
.tbal.is-noreal .tbal-chip, .tbal.is-noreal .tbal-hint, .tbal.is-noreal .tbal-menu { display: none !important; }
.tbal.is-noreal .tbal-open-real { display: inline-flex; }

@keyframes sh-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* ── under the header: the page's name, the tools, the prices' dot ──── */

.sh-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 30px; }
.sh-title { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; display: flex; align-items: center; }
.sh-title .door-key { font-size: 16px; }
.sh-pills { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.sh-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sh-pill:hover { border-color: var(--blue); color: var(--blue); }
.sh-pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* MT5 Bots: the full MetaTrader 5 mark, small, where the words were (ink on light, pale on dark). */
.sh-mt5 { display: block; flex: none; height: 11px; width: auto; }
.sh-mt5--pale { display: none; }
:root[data-theme="dark"] .sh-mt5--ink { display: none; }
:root[data-theme="dark"] .sh-mt5--pale { display: block; }
.sh-pill .tag-bot {
  padding: 1px 5px; border-radius: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, transparent); border: 0;
}

/* The prices: one green dot. A click floats the list over the page, out of the dot; nothing
   under it moves. */
.mk-wrap { position: relative; margin-left: auto; flex: none; }
.mk-dot {
  position: relative; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line-hi); border-radius: 50%; background: var(--surface); cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.mk-dot:hover, .mk-dot[aria-expanded="true"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.mk-dot:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }
.mk-dot .mk-live { width: 9px; height: 9px; animation: sh-beat 2s ease-in-out infinite; }
.mk-pop {
  position: absolute; right: -6px; top: calc(100% + 10px); z-index: 95;
  width: min(390px, calc(100vw - 24px)); max-height: min(600px, calc(100dvh - 140px));
  box-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.4);
  transform-origin: calc(100% - 20px) -10px; opacity: 0; transform: translateY(-8px) scale(.9);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, .9, .3, 1.2);
}
.mk-pop.is-in { opacity: 1; transform: none; }
.mk-pop .mk-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.mk-pop .mk-head { padding: 12px 16px; }

/* ── before the balances ───────────────────────────────────────────── */

.tstate { flex: 1; display: grid; place-items: center; text-align: center; }
.tstate-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink-muted); font-size: 14px; }
.tspin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line-hi); border-top-color: var(--blue); animation: sh-spin .8s linear infinite; }
@keyframes sh-spin { to { transform: rotate(360deg); } }
.tnote { max-width: 520px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }

/* ── the grid: Settings | Session (its figures, then its transactions) ── */

.sh-grid {
  flex: 1 1 auto; min-height: 0; display: grid; gap: var(--sh-gap);
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "set ses";
}
.sh-set { grid-area: set; }
.sh-ses { grid-area: ses; }
.bot-engine { display: none !important; }

.sh-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Nothing in a card gives way: what does not fit is measured, and the page set smaller (panel.js). */
.sh-card > * { flex-shrink: 0; }
.sh-card > .sh-txn { flex-shrink: 1; }

/* ── Settings ──────────────────────────────────────────────────────── */

.sh-set-h { margin-bottom: 12px; }
.sh-name { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
.sh-name::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--pink); flex: none; }
.sh-risk { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); }

/* The trade type: Analysis's symbol chips — blue when on. */
.sh-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sh-type {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 34px; padding: 6px 4px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 650; line-height: 1.15; text-align: center; white-space: nowrap; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease; touch-action: manipulation;
}
.sh-type:hover:not(:disabled) { border-color: var(--blue); }
.sh-type.is-on { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.sh-type:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sh-type:disabled { opacity: .45; cursor: not-allowed; }
.bot-types.is-locked .sh-type.is-on { opacity: 1; cursor: default; }

/* The watch on each type: three signal bars at the chip's top right — three green, two amber,
   one red (blinking), a soft wave while it is still reading. */
.bot-watch { position: absolute; top: 4px; right: 9px; display: inline-flex; align-items: flex-end; gap: 1.5px; height: 7px; opacity: 0; transition: opacity .3s ease; }
.bot-watch b { display: block; width: 2.5px; border-radius: 1px; background: color-mix(in srgb, var(--ink-faint) 45%, transparent); }
.bot-watch b:nth-child(1) { height: 3px; }
.bot-watch b:nth-child(2) { height: 5px; }
.bot-watch b:nth-child(3) { height: 7px; }
.bot-type[data-watch="green"] .bot-watch, .bot-type[data-watch="yellow"] .bot-watch, .bot-type[data-watch="red"] .bot-watch, .bot-type[data-watch="warm"] .bot-watch { opacity: 1; }
.bot-type[data-watch="green"] .bot-watch b { background: #22c55e; }
.bot-type[data-watch="yellow"] .bot-watch b:nth-child(-n+2) { background: #f5a524; }
.bot-type[data-watch="red"] .bot-watch b:nth-child(1) { background: #ef4444; animation: sh-blink 1.2s ease-in-out infinite; }
.bot-type[data-watch="warm"] .bot-watch b { animation: sh-wave 1.2s ease-in-out infinite; }
.bot-type[data-watch="warm"] .bot-watch b:nth-child(2) { animation-delay: .15s; }
.bot-type[data-watch="warm"] .bot-watch b:nth-child(3) { animation-delay: .3s; }
.sh-type.is-on .bot-watch b { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5); }
@keyframes sh-blink { 50% { opacity: .35; } }
@keyframes sh-wave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.sh-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; align-items: end; }
/* Two to a row when the stop loss is a fourth figure or the risk guide's words need the room. */
.sh-set:has(#botSlOn:checked) .sh-fields, .sh-set:has(#botGuide:checked) .sh-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-fld { min-width: 0; }
.sh-fld--wide { grid-column: 1 / -1; }
.sh-fld .fld-k { margin-bottom: 5px; font-size: 10.5px; }
.sh-k { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.sh-k label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-fld .fld-i { padding: 9px 12px; font-size: 14px; }
.sh-select { position: relative; }
.sh-select select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; font-weight: 600; }
.sh-select svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
/* Differs and Over/Under 0–3: the Martingale is worked out for each loss — a word, not a figure. */
.sh-fld.is-dynamic .fld-i, .input-group.is-dynamic input { color: var(--blue); font-weight: 700; }

/* Safe / High / Too high beside a figure's label, and the line on why: green, amber, red. */
.bot-risk {
  --rc: var(--ok);
  display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 1px 7px 1px 6px;
  border: 1px solid color-mix(in srgb, var(--rc) 35%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--rc) 12%, transparent); color: var(--rc);
  font-size: 9px; font-weight: 700; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.bot-risk::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bot-risk[data-risk="high"], .bot-risk-line[data-risk="high"] { --rc: var(--amber); }
.bot-risk[data-risk="over"], .bot-risk-line[data-risk="over"] { --rc: var(--danger); }
.bot-risk-note { display: grid; gap: 6px; margin-top: 10px; }
.bot-risk-line {
  --rc: var(--ok);
  margin: 0; padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--rc) 28%, transparent);
  border-left: 3px solid var(--rc); border-radius: 9px; background: color-mix(in srgb, var(--rc) 8%, transparent);
  font-size: 11.5px; line-height: 1.45; color: var(--ink-muted);
}
.bot-risk-line b { color: var(--rc); font-weight: 700; }
.bot-risk-use {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 1px; padding: 1px 8px 1px 6px; vertical-align: 1px;
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok);
  font: inherit; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.5; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.bot-risk-use:hover { background: color-mix(in srgb, var(--ok) 22%, transparent); border-color: var(--ok); }
.bot-risk-use:active { transform: translateY(1px); }
.bot-risk-use:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* The switches: Evie's own (.tog), on a checkbox. */
.sh-togs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.sh-tog { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }
.sh-tog input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sh-tog i { position: relative; flex: none; width: 34px; height: 18px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-hi); transition: background .18s ease, border-color .18s ease; }
.sh-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-faint); transition: transform .18s ease, background .18s ease; }
.sh-tog input:checked + i { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: var(--ok); }
.sh-tog input:checked + i::after { transform: translateX(16px); background: var(--ok); }
.sh-tog input:checked ~ span, .sh-tog:hover span { color: var(--ink); }
.sh-tog input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
.sh-tog input:disabled + i { opacity: .5; }

.sh-go { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; }
.sh-go .btn { flex: 1 1 0; padding: 12px 18px; font-size: 15px; }
.sh-go .btn:disabled { opacity: .45; cursor: not-allowed; }
.bs-stopping, .is-stopping .bs-stop { display: none; }
.is-stopping .bs-stopping { display: inline; }
.sh-min { margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }

.bot-msg { margin-top: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.bot-msg--bad { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.bot-msg--info { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); background: color-mix(in srgb, var(--ok) 7%, transparent); }

/* ── Session ───────────────────────────────────────────────────────── */

.sh-ses-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-ses-h .grp-t { margin: 0; }
.bot-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 3px 11px 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); font-size: 11.5px; color: var(--ink-muted); }
.bot-state strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--ink); }
.bot-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.bot-state--run i, .bot-state--won i { background: var(--ok); animation: sh-beat 1.8s ease-in-out infinite; }
.bot-state--run strong, .bot-state--won strong { color: var(--ok); }
.bot-state--wait i { background: var(--amber); }
.bot-state--wait strong { color: var(--amber); }
.bot-state--bad i { background: var(--danger); }
.bot-state--bad strong { color: var(--danger); }

/* Live scan: in Settings, just above Start and Stop — the side the run is on, big, and the
   market, the share and the last ten ticks under it; at rest a quiet line on when it starts. */
.sh-scan { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.bot-now, .sh-scan-idle { display: grid; align-items: center; gap: 6px 10px; padding: 10px 12px; }
.bot-now {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k s" "m p" "d d";
  border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--surface-2)); animation: sh-rise .35s ease-out;
}
.sh-scan-idle { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "m" "d"; }
.bot-now:not([hidden]) + .sh-scan-idle { display: none; }
.bot-now-k { grid-area: k; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); white-space: nowrap; }
.bot-now-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: sh-beat 1.6s ease-in-out infinite; }
.sh-scan-idle .bot-now-k { color: var(--ink-faint); }
.sh-scan-idle .bot-now-k i { background: var(--ink-faint); animation: none; }
.bot-now-m { grid-area: m; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; color: var(--ink-muted); }
.bot-now-side { grid-area: s; justify-self: end; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.bot-now-side--a { color: var(--even); }
.bot-now-side--b { color: var(--odd); }
.bot-now-p { grid-area: p; justify-self: end; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.bot-now-p b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.bot-now-p span { font-size: 10.5px; color: var(--ink-faint); }
.sh-scan-say { grid-area: m; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--ink-faint); }
.bot-dots { grid-area: d; display: flex; justify-content: space-between; gap: 4px; }
.bot-dots i { display: grid; place-items: center; flex: 0 1 26px; height: 24px; border-radius: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bm-dots i { flex: none; width: 24px; }
.bot-dots i.e, .bot-dots i.w.t-a { color: var(--even); background: color-mix(in srgb, var(--even) 14%, transparent); }
.bot-dots i.o, .bot-dots i.w.t-b { color: var(--odd); background: color-mix(in srgb, var(--odd) 14%, transparent); }
.bot-dots i.x { color: var(--ink-faint); background: color-mix(in srgb, var(--ink-faint) 12%, transparent); }
.sh-dots-idle i { background: color-mix(in srgb, var(--ink-faint) 10%, transparent); }
.sh-dots-idle i:nth-child(odd) { animation: sh-wave 2.4s ease-in-out infinite; }
.sh-dots-idle i:nth-child(even) { animation: sh-wave 2.4s 1.2s ease-in-out infinite; }
@keyframes sh-rise { from { opacity: 0; transform: translateY(4px); } }

.sh-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.sh-stats dd { font-size: clamp(0.98rem, 1.3vw, 1.15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-pl-v.is-up, .stat--rate.is-up { color: var(--ok); }
.bot-pl-v.is-down, .stat--rate.is-down { color: var(--pink); }

/* ── Transactions: Analysis's own, the session's trade list ────────── */

.sh-txn {
  --tx-cols: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1.05fr);
  position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
  margin-top: 14px; border-top: 1px solid var(--line); background: var(--surface);
}
.txn-handle { display: none; }
.txn-body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 12px 0 0; }
.txn-top { display: flex; align-items: baseline; gap: 10px; min-height: 26px; margin-bottom: 6px; padding-right: 96px; }
.txn-top .grp-t { margin: 0; }
.txn-n { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.txn-head {
  display: grid; grid-template-columns: var(--tx-cols); gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint);
}
.txn-head-r { text-align: right; }
.txn-rows {
  flex: 1; min-height: 40px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; overscroll-behavior: contain;
}
.txn-rows::-webkit-scrollbar { width: 8px; }
.txn-rows::-webkit-scrollbar-track { background: transparent; }
.txn-rows::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 999px; border: 2px solid var(--surface); }
.tx { display: grid; grid-template-columns: var(--tx-cols); gap: 10px; align-items: start; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 12px; }
.tx:last-child { border-bottom: 0; }
@keyframes tx-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
.tx--in { animation: tx-in 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.tx-none { padding: 22px 0; font-size: 12.5px; color: var(--ink-faint); text-align: center; }
.bot-wait:not([hidden]) ~ .txn-rows .tx-none { display: none; }
.tx-type { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; min-width: 0; }
.tx-dot { width: 8px; height: 8px; border-radius: 50%; grid-row: span 2; }
.tx-dot--win { background: var(--up); }
.tx-dot--loss { background: var(--down); }
.tx-type-t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-type-s { grid-column: 2; font-size: 10.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-spot { display: grid; gap: 2px; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-spot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-in { color: var(--ink-muted); }
.tx-out { color: var(--ink-faint); }
.tx-money { display: grid; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.tx-money span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-buy { color: var(--ink-muted); }
.tx-pl { font-weight: 650; }
.tx-pl.is-up, .sum-v.is-up { color: var(--up); }
.tx-pl.is-down, .sum-v.is-down { color: var(--down); }

.sum { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; margin-top: 8px; padding: 10px 10px; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sum-c { display: grid; gap: 3px; text-align: center; min-width: 0; }
.sum-k { font-size: 9.5px; font-weight: 600; color: var(--ink-faint); line-height: 1.3; }
.sum-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.txn-reset { position: absolute; top: 9px; right: 0; margin: 0; padding: 4px 16px; font-size: 12px; }

/* A wait the run is in (bot.js waitOf): Deriv's rate limit, a payout, the prices, the line, a
   check, Safe's pause. At the top of the trades, flat and moving: bars that keep time and a
   line that sweeps the card until it trades again. */
.bot-wait {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; padding: 11px 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface)); animation: sh-rise .35s ease-out both;
}
.bot-wait::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 2px; border-radius: 2px; background: var(--blue);
  animation: sh-sweep 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
.bot-wait-eq { flex: none; display: flex; align-items: center; gap: 3px; width: 30px; height: 26px; }
.bot-wait-eq i { flex: 1; height: 100%; border-radius: 3px; background: var(--blue); transform-origin: 50% 50%; animation: sh-eq 1.1s ease-in-out infinite; }
.bot-wait-eq i:nth-child(even) { background: var(--pink); }
.bot-wait-eq i:nth-child(2) { animation-delay: -.9s; }
.bot-wait-eq i:nth-child(3) { animation-delay: -.6s; }
.bot-wait-eq i:nth-child(4) { animation-delay: -.3s; }
.bot-wait-eq i:nth-child(5) { animation-delay: -.75s; }
.bot-wait-t { display: grid; gap: 2px; min-width: 0; text-align: left; }
.bot-wait-t strong { font-size: 12.5px; line-height: 1.35; font-weight: 700; color: var(--ink); }
.bot-wait-t span { font-size: 11px; line-height: 1.4; color: var(--ink-muted); }
@keyframes sh-eq { 0%, 100% { transform: scaleY(.25); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes sh-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* Run / Stop: under the bar on a narrow screen (Analysis's). A wide screen has Start and Stop in
   Settings beside it, so the card shows none. */
.txn-run { flex: none; padding: 0 12px 10px; }
.txn-run-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; padding: 0 16px;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: #fff;
  background: #3aa9a5; border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px -10px rgba(58, 169, 165, 0.9);
  transition: background-color .15s ease, transform .1s ease, filter .15s ease; touch-action: manipulation;
}
.txn-run-btn:hover { filter: brightness(1.06); }
.txn-run-btn:active { transform: translateY(1px); }
.txn-run-btn:disabled { opacity: .55; cursor: not-allowed; }
.txn-run-btn:focus-visible { outline: 2px solid #3aa9a5; outline-offset: 2px; }
.txn-run-btn.is-running { background: #e5484d; box-shadow: 0 6px 16px -10px rgba(229, 72, 77, 0.9); }
.txn-run-stop, .txn-run-btn.is-running .txn-run-go { display: none; }
.txn-run-btn.is-running .txn-run-stop { display: block; }
.txn-run.is-in { padding: 0; margin-top: 10px; }
.txn-run.is-in .txn-run-btn { height: 38px; font-size: 14px; border-radius: 999px; box-shadow: none; }
.txn-run.is-in .txn-run-btn svg { width: 15px; height: 15px; }
.txn-pl { display: none; }

/* The small print, and the chat button at the foot's right end, over the empty corner of the
   transactions beside Reset; its panel opens above it. */
.sh-page .dash-foot { flex: none; margin: 0; padding: 7px 64px 0 0; }
.sh-page .disclaimer { font-size: 11px; line-height: 1.45; }
@media (min-width: 860px) {
  .sh-page .sup-btn, .sh-page .sup-btn.sup-left { left: auto; right: calc(var(--gutter) - 6px); bottom: 10px; width: 46px; height: 46px; }
  .sh-page .sup, .sh-page .sup.sup-left { left: auto; right: var(--gutter); bottom: 66px; }
}

/* ── wide: Settings | Session over Transactions ─────────────────────── */

@media (min-width: 860px) {
  .sh-txn .txn-run { display: none; }
}
@media (min-width: 860px) and (max-width: 1199px) {
  .sh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .sh-grid { grid-template-columns: 420px minmax(0, 1fr); }
}

/* ── narrow: one column ─────────────────────────────────────────────── */

@media (max-width: 859px) {
  :root { --sh-gap: 8px; }
  .sh-fit { padding: 8px 0 6px; }
  .sh-grid { display: flex; flex-direction: column; gap: 8px; }
  .sh-card { padding: 10px 12px; overflow: visible; }
  .sh-set { flex: none; }
  .sh-ses { flex: none; }
  .sh-set-h { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .sh-name { font-size: 1rem; }
  .sh-risk { margin: 0; font-size: 11px; }
  /* Three figures in a row; two when the stop loss or the risk guide's words need the room. */
  .sh-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; gap: 8px; }
  .sh-fld .fld-k { margin-bottom: 4px; font-size: 10px; letter-spacing: 0.07em; }
  .sh-fld .fld-i { padding: 7px 10px; font-size: 16px; border-radius: 9px; }   /* 16px: no zoom on an iPhone */
  .bot-risk-note { margin-top: 8px; }
  .sh-togs { margin-top: 8px; gap: 6px 14px; }
  .sh-tog i { width: 30px; height: 16px; }
  .sh-tog i::after { width: 10px; height: 10px; }
  .sh-tog input:checked + i::after { transform: translateX(14px); }
  .sh-ses-h .grp-t { font-size: 10px; }
  .bot-state { padding: 2px 9px 2px 8px; font-size: 11px; }
  .sh-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin-top: 8px; }
  .sh-stats dt { font-size: 9.5px; }
  .sh-stats dd { margin-top: 1px; font-size: 0.95rem; }
  .sh-scan { margin-top: 8px; }
  .bot-now { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "k m p s" "d d d d"; padding: 7px 10px; gap: 5px 10px; }
  .sh-scan-idle { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k m" "d d"; padding: 7px 10px; gap: 5px 10px; }
  .sh-scan-say { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bot-now-side { font-size: 17px; }
  .sh-page .dash-foot { padding-right: 0; }
}

/* A tall tablet: the transactions take the rest of the column, Start and Stop stay in Settings. */
@media (min-width: 600px) and (max-width: 859px) and (min-height: 760px) {
  .sh-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "set" "ses"; }
  .sh-ses { flex: 1 1 auto; overflow: hidden; }
  .sh-txn .txn-run { display: none; }
  .sh-go { margin-top: 12px; padding-top: 0; }
  .sh-go .btn { padding: 10px 18px; font-size: 14px; }
  .sh-min { display: none; }
  .sh-page .dash-foot { padding-right: 64px; }
  .sh-page .sup-btn, .sh-page .sup-btn.sup-left { left: auto; right: calc(var(--gutter) - 6px); bottom: 10px; width: 46px; height: 46px; }
  .sh-page .sup, .sh-page .sup.sup-left { left: auto; right: var(--gutter); bottom: 66px; }
}

/* A phone (or any short narrow window): the trades are a sheet parked at the bottom, Run / Stop
   under its bar — Analysis's own. */
@media (max-width: 599px), (max-width: 859px) and (max-height: 759px) {
  :root { --txn-run-h: 48px; }
  .sh-go, .sh-min { display: none; }

  .sh-txn {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80;
    border: 0; border-top: 1px solid var(--line-hi); border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 34px -22px rgba(0, 0, 0, 0.45);
    max-height: min(84dvh, 660px); min-height: 0;
    transform: translateY(calc(100% - 46px - var(--txn-run-h)));
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sh-txn.is-open { transform: translateY(0); }
  .txn-handle {
    display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; flex: none;
    width: 100%; height: 46px; padding: 0 16px; font: inherit; font-size: 13px; font-weight: 650;
    color: var(--ink); background: transparent; border: 0; cursor: pointer;
  }
  .txn-grip { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; background: var(--line-hi); border-radius: 999px; }
  .txn-chev { color: var(--ink-faint); transition: transform 0.28s ease; }
  .sh-txn.is-open .txn-chev { transform: rotate(180deg); }
  .txn-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--blue); border-radius: 999px; }
  .txn-count:empty { display: none; }
  .txn-run:not(.is-in) { height: var(--txn-run-h); padding: 0 12px 8px; }
  .txn-run:not(.is-in) .txn-run-btn { height: 40px; }
  .txn-top { display: none; }
  .sh-ses .sh-txn { margin: 0; border-top: 1px solid var(--line-hi); }
  .txn-body { padding: 0 16px 14px; overflow-y: auto; }
  .txn-reset { position: static; width: 100%; margin-top: 8px; padding: 9px 16px; font-size: 13.5px; }
  /* More than half the screen for the trades when the sheet is up, empty or not. */
  .txn-rows { flex: 1 1 auto; min-height: 34dvh; max-height: 52dvh; }
  .sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The run's P/L on the parked bar, at its right end: the bar keeps its size. */
  .txn-pl {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--ink-muted); background: var(--surface-2);
  }
  .txn-pl.is-up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
  .txn-pl.is-down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }

  /* Parked: the chat button sits on the free left end of the Transactions bar; raised, at its foot. */
  html:not(.txn-open) .sh-page .sup-btn, html:not(.txn-open) body.sh-page .sup-btn { bottom: calc(var(--txn-run-h) + 3px); left: 12px; right: auto; width: 46px; height: 46px; }
  html:not(.txn-open) body.sh-page .sup { bottom: calc(var(--txn-run-h) + 60px); }
  html.txn-open body.sh-page .sup-btn { bottom: 12px; left: 12px; right: auto; width: 46px; height: 46px; }
}

/* A short window — a phone on its side, a laptop zoomed right in: the figures three to a row,
   Start and Stop a size smaller. */
@media (max-height: 600px) {
  .sh-fields { gap: 8px; }
  .sh-card { padding: 12px 14px; }
  .sh-set-h { margin-bottom: 8px; }
  .sh-go { padding-top: 10px; }
  .sh-go .btn { padding: 9px 14px; font-size: 14px; }
  .sh-togs { margin-top: 10px; }
}
@media (min-width: 860px) and (max-height: 600px) {
  .sh-page .nav-inner { height: 56px; }
  .sh { padding-top: 56px; }
  .tbal-menu { top: 38px; }
  .sh-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 10px; }
  .sh-stats dt { white-space: normal; line-height: 1.25; }
  .sum { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 8px; margin-top: 8px; }
  .sh-scan { margin-top: 10px; }
  .txn-body { padding: 10px 14px; }
}
/* A phone on its side (or a laptop zoomed right in): Settings across the width in two columns —
   the type, the figures and the switches on the left; Live scan with Start and Stop under it on
   the right — and the six figures in one row below. The sheet parks as its bar alone. Sized to
   what is in it, nothing squeezed: the page is set smaller to fit it instead. */
@media (min-width: 600px) and (max-width: 859px) and (max-height: 759px) {
  :root { --txn-run-h: 0px; }
  .sh-page .nav-inner { height: 46px; }
  .sh { padding-top: 46px; }
  .sh-grid { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "set" "ses"; align-content: start; }
  .sh-grid > .sh-card { min-height: auto; }
  .sh-set {
    display: grid; column-gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: "h h" "t s" "f s" "r s" "g o" "m m";
  }
  .sh-set-h { grid-area: h; }
  .sh-set .sh-types { grid-area: t; }
  .sh-set .sh-fields { grid-area: f; }
  .sh-set .bot-risk-note { grid-area: r; }
  .sh-set .sh-togs { grid-area: g; }
  .sh-set .sh-scan { grid-area: s; margin-top: 0; }
  .sh-set .sh-go { grid-area: o; display: flex; margin: 8px 0 0; padding: 0; }
  .sh-set .bot-msg { grid-area: m; }
  .sh-go .btn { padding: 8px 12px; font-size: 13.5px; }
  .sh-risk, .sh-scan-idle .bot-dots { display: none; }
  .sh-scan-say { white-space: normal; }
  /* The session on one line: the six figures, its state at the end. */
  .sh-ses { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st hd"; align-items: center; column-gap: 14px; }
  .sh-ses-h { grid-area: hd; }
  .sh-ses-h .grp-t { display: none; }
  .sh-ses .sh-stats { grid-area: st; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 0; }
  .txn-run:not(.is-in) { display: none; }
  .txn-rows { min-height: 0; }
}

/* ── the header on a small screen ───────────────────────────────────── */

@media (max-width: 640px) {
  .sh-page .nav-inner { height: 52px; }
  .sh { padding-top: 52px; }
  .sh-flash { top: 60px; }
  .tbal-chip { height: 30px; gap: 6px; padding: 0 8px 0 10px; }
  .tbal-amt { font-size: 13px; }
  .tbal-kind { padding: 1px 6px; font-size: 8.5px; letter-spacing: 0.06em; }
  .tbal-hint { font-size: 9.5px; }
  .tbal-menu { top: 36px; }
  .sh-title { font-size: 1.12rem; }
  .sh-bar { gap: 8px; }
  .sh-pills { gap: 5px; flex-wrap: nowrap; }
  .sh-pill { height: 26px; padding: 0 9px; font-size: 11.5px; }
  .sh-pill .tag-bot { display: none; }
  .sh-mt5 { height: 10px; }
  .mk-dot { width: 28px; height: 28px; }
  .sh-type { font-size: 11px; min-height: 32px; padding: 4px 3px; }
  .bot-watch { top: 3px; right: 50%; transform: translateX(50%); gap: 1px; }
  .bot-watch b { width: 2px; }
  .sh-type.bot-type { padding-top: 9px; }
  .bot-dots i { width: 20px; height: 20px; font-size: 10.5px; border-radius: 5px; }
  .sh-page .disclaimer { font-size: 9.5px; line-height: 1.4; }
  .sh-page .dash-foot { padding-top: 5px; }
}
@media (max-width: 430px) { .sh-page .brand-name { display: none; } }   /* the mark carries the name */
@media (max-width: 360px) { .sh-page { --gutter: 14px; } }
@media (max-width: 340px) {
  .tbal-hint-q { display: none; }
}
@media (max-width: 400px) {
  /* The balance in full: the carets go (the figure is still the switch), the row sits closer. */
  .tbal-caret, .sh-page .lang-caret { display: none; }
  .sh-page .lang-btn { gap: 0; padding: 0 7px; }
  .sh-page .perch { gap: 5px; }
  .tbal-chip { gap: 5px; padding: 0 9px; }
  .sh-title { font-size: 1.05rem; }
  .sh-bar { gap: 6px; }
  .sh-pills { gap: 4px; }
  .sh-mt5 { height: 9px; }
  .sh-pill { padding: 0 7px; font-size: 11px; }
  .sh-tog { font-size: 10px; letter-spacing: 0.06em; gap: 6px; }
  .sh-togs { gap: 6px 12px; }
  .bot-dots { gap: 3px; }
  .bot-dots i { width: 18px; height: 18px; font-size: 10px; }
}

/* ══ the popups: Evie's own card, flat ═════════════════════════════════ */

.bm-root { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.bm-back { position: absolute; inset: 0; background: rgba(8, 8, 12, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: bm-fade .2s ease-out; }
.bm {
  position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  color: var(--ink); text-align: center; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
  animation: bm-pop .32s cubic-bezier(.2, .9, .3, 1.15); scrollbar-width: none;
}
.bm::-webkit-scrollbar { display: none; }
.bm-x { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-2); color: var(--ink-muted); cursor: pointer; }
.bm-x:hover { color: var(--ink); }
.bm-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bm h2 { margin: 16px 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.bm-step { margin: 0 auto; max-width: 330px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); min-height: 20px; }
.bm-actions { display: flex; gap: 10px; margin-top: 18px; }
.bm-btn {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--line-hi); background: transparent; color: var(--ink);
  text-decoration: none; text-align: center; padding: 11px 12px; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.bm-btn:hover { background: var(--surface-2); }
.bm-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bm .bm-btn--go { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.bm .bm-btn--go:hover { background: var(--blue-hi); }
.bm .bm-btn--fund { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
@keyframes bm-fade { from { opacity: 0; } }
@keyframes bm-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } }

.bm-radar { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.bm-radar i { position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: 50%; opacity: 0; animation: bm-ping 2.1s cubic-bezier(.2, .6, .4, 1) infinite; }
.bm-radar i:nth-child(2) { animation-delay: .7s; border-color: var(--pink); }
.bm-radar i:nth-child(3) { animation-delay: 1.4s; }
.bm-radar svg { position: relative; animation: bm-look 2.4s ease-in-out infinite; }
@keyframes bm-ping { 0% { transform: scale(.45); opacity: .75; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes bm-look { 0%, 100% { transform: translate(-3px, -2px) rotate(-8deg); } 50% { transform: translate(3px, 2px) rotate(8deg); } }
.bm-bar { position: relative; height: 10px; margin: 20px 4px 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bm-bar i { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; overflow: hidden; background: var(--blue); }
.bm-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: rgba(255, 255, 255, 0.35); animation: sh-sweep 1.3s ease-in-out infinite; }
.bm-pct { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.bm-tick { display: block; width: 76px; height: 76px; margin: 0 auto; overflow: visible; animation: bm-tickpop .5s .75s cubic-bezier(.2, .9, .3, 1.4) both; }
.bm-tick circle { fill: color-mix(in srgb, var(--ok) 12%, transparent); stroke: var(--ok); stroke-width: 2.6; stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-origin: center; animation: bm-draw .6s cubic-bezier(.65, 0, .45, 1) forwards; }
.bm-tick path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: bm-draw .35s .55s cubic-bezier(.65, 0, .45, 1) forwards; }
@keyframes bm-draw { to { stroke-dashoffset: 0; } }
@keyframes bm-tickpop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

.bm-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 14px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.bm-pick-m { font-size: 14.5px; font-weight: 650; color: var(--ink-muted); }
.bm-pick-side { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.bm-pick-side--a { color: var(--even); }
.bm-pick-side--b { color: var(--odd); }
.bm-pick-s { font-size: 12.5px; color: var(--ink-faint); }
.bm-dots { justify-content: center; margin-top: 8px; }
.bm-live { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); font-size: 13px; font-weight: 700; }
.bm-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: sh-beat 1.6s ease-in-out infinite; }
.bm-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 0; }
.bm-sum > div { min-width: 0; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.bm-sum dt { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-sum dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bm-erricon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; font-size: 32px; font-weight: 800; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); animation: bm-shake .45s ease-in-out; }
@keyframes bm-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Take profit, stop loss and Safe's pause: the card in its colour, the icon in its ring, the
   details, one way out. */
.bm:has(> .bm-result:not([hidden])) {
  width: min(460px, 100%); padding: 30px 34px; border: 2px solid var(--r-line);
  background: color-mix(in srgb, var(--r-ink) 7%, var(--surface));
  animation: bm-in .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bm:has(> #bmWin:not([hidden])) { --r-ink: var(--ok); --r-line: color-mix(in srgb, var(--ok) 45%, transparent); }
.bm:has(> #bmLoss:not([hidden])) { --r-ink: var(--danger); --r-line: color-mix(in srgb, var(--danger) 45%, transparent); }
.bm:has(> .bm-result:not([hidden])) > .bm-x { display: none; }
@keyframes bm-in { from { opacity: 0; transform: scale(0.9) translateY(-20px); } }
.bm-result { position: relative; }
.bm-ricon {
  display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin: 0 auto 18px;
  border-radius: 50%; border: 2px solid var(--r-line); color: var(--r-ink); background: color-mix(in srgb, var(--r-ink) 16%, transparent);
  animation: bm-badge .55s .1s cubic-bezier(.2, .9, .3, 1.3) both;
}
.bm-result--win .bm-ricon-tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: bm-draw .4s .5s cubic-bezier(.65, 0, .45, 1) forwards; }
.bm-result--loss .bm-ricon svg { animation: bm-shake .45s .55s ease-in-out both; }
.bm-result h2 { margin: 0 0 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.bm-msg { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.bm-details { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; padding: 14px 16px; text-align: left; background: var(--surface); border-radius: 12px; border: 1px solid var(--line); }
.bm-drow { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.bm-drow > span { color: var(--ink-faint); }
.bm-dv { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-dv--pl { color: var(--ok); animation: sh-rise .5s .35s ease-out both; }
.bm-dv--pl.is-down { color: var(--danger); }
.bm-dv--n { color: var(--blue); }
.bm-dv--wl { color: var(--violet); }
.bm-dv--time { color: var(--teal); }
.bm .bm-rclose {
  width: 100%; padding: 13px 24px; border-radius: 999px; border: 1px solid var(--r-ink); background: var(--r-ink); color: var(--on-accent);
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; transition: filter .15s ease, transform .15s ease;
}
.bm .bm-rclose:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bm-confetti { position: absolute; inset: -30px -34px; overflow: hidden; pointer-events: none; border-radius: 18px; }
.bm-confetti i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; opacity: 0; background: var(--c); animation: bm-fall var(--t, 2.6s) cubic-bezier(.25, .6, .45, 1) var(--d) 2 both; }
.bm-confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.bm-confetti i:nth-child(1)  { --x: 6%;  --c: #22c55e; --d: 0s;   --r: 380deg; }
.bm-confetti i:nth-child(2)  { --x: 13%; --c: #ff3d87; --d: .3s;  --r: -300deg; --t: 2.9s; }
.bm-confetti i:nth-child(3)  { --x: 19%; --c: #38c6ff; --d: .9s;  --r: 260deg; }
.bm-confetti i:nth-child(4)  { --x: 25%; --c: #f5a524; --d: .15s; --r: -420deg; --t: 2.4s; }
.bm-confetti i:nth-child(5)  { --x: 31%; --c: #b794ff; --d: .6s;  --r: 340deg; }
.bm-confetti i:nth-child(6)  { --x: 37%; --c: #22c55e; --d: 1.1s; --r: -280deg; --t: 3s; }
.bm-confetti i:nth-child(7)  { --x: 43%; --c: #ff3d87; --d: .45s; --r: 400deg; }
.bm-confetti i:nth-child(8)  { --x: 49%; --c: #38c6ff; --d: 0.05s; --r: -360deg; --t: 2.7s; }
.bm-confetti i:nth-child(9)  { --x: 55%; --c: #f5a524; --d: .75s; --r: 300deg; }
.bm-confetti i:nth-child(10) { --x: 61%; --c: #b794ff; --d: .25s; --r: -390deg; --t: 2.5s; }
.bm-confetti i:nth-child(11) { --x: 67%; --c: #22c55e; --d: 1s;   --r: 320deg; }
.bm-confetti i:nth-child(12) { --x: 73%; --c: #ff3d87; --d: .5s;  --r: -260deg; --t: 2.8s; }
.bm-confetti i:nth-child(13) { --x: 79%; --c: #38c6ff; --d: .1s;  --r: 410deg; }
.bm-confetti i:nth-child(14) { --x: 85%; --c: #f5a524; --d: .85s; --r: -330deg; --t: 3.1s; }
.bm-confetti i:nth-child(15) { --x: 91%; --c: #b794ff; --d: .35s; --r: 290deg; }
.bm-confetti i:nth-child(16) { --x: 96%; --c: #22c55e; --d: .65s; --r: -400deg; --t: 2.6s; }
.bm-confetti i:nth-child(17) { --x: 3%;  --c: #38c6ff; --d: 1.25s; --r: 350deg; }
.bm-confetti i:nth-child(18) { --x: 52%; --c: #ff3d87; --d: 1.4s; --r: -310deg; --t: 2.9s; }
@keyframes bm-fall { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate3d(18px, 460px, 0) rotate(var(--r)); } }
.bm-badge { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto; border-radius: 50%; animation: bm-badge .55s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes bm-badge { from { transform: scale(.4); opacity: 0; } }
.bm-badge--fund { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 5%, transparent); }
.bm-badge--real { color: #e5484d; background: rgba(229, 72, 77, 0.13); box-shadow: 0 0 0 10px rgba(229, 72, 77, 0.05); }
.bm-real-why { margin: 0 auto 6px; max-width: 330px; font-size: 13.5px; line-height: 1.45; font-weight: 650; color: var(--ink); }
.bm-real-steps { display: grid; gap: 7px; max-width: 330px; margin: 14px auto 0; padding: 0; list-style: none; counter-reset: step; text-align: left; }
.bm-real-steps li { display: flex; align-items: center; gap: 9px; counter-increment: step; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bm-real-steps li::before { content: counter(step); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(229, 72, 77, 0.14); color: #e5484d; font-size: 11px; font-weight: 800; }
.bm-actions--real { flex-direction: column; }
.bm .bm-btn--real { background: #d92b36; border-color: #d92b36; color: #fff; }
.bm .bm-btn--real:hover { filter: brightness(1.07); background: #d92b36; }
.bm-fund-note { margin: 12px auto 0; max-width: 330px; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--amber); }

/* The watch's reading in a popup: ten cells lit to the figure, in the reading's colour. */
.bm-watch { --wc: var(--ink-faint); display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--wc) 35%, transparent); background: var(--surface); }
#bmDone .bm-watch { margin: 14px 0 0; }
.bm-watch[data-watch="off"] { display: none; }
.bm-watch[data-watch="green"] { --wc: #22c55e; }
.bm-watch[data-watch="yellow"] { --wc: #f5a524; }
.bm-watch[data-watch="red"] { --wc: #ef4444; }
.bm-watch-bar { position: relative; flex: 1; height: 10px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink-faint) 22%, transparent) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.bm-watch-bar i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--wc) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
  clip-path: inset(0 calc(100% - var(--watch, 0) * 100%) 0 0); transition: clip-path .9s cubic-bezier(.2, .8, .2, 1); animation: sh-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.bm-watch[data-watch="red"] .bm-watch-bar i { animation: sh-grow 1s cubic-bezier(.2, .8, .2, 1) both, sh-blink 1.4s 1s ease-in-out infinite; }
.bm-watch[data-watch="warm"] .bm-watch-bar i { clip-path: inset(0 70% 0 0); animation: sh-blink 1.1s ease-in-out infinite; }
.bm-watch-pct { min-width: 44px; font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; color: var(--wc); }
@keyframes sh-grow { from { clip-path: inset(0 100% 0 0); } }

/* What went wrong (bot.js mistakes): the points in full, then the note as a green tip; the rest
   of the card goes compact while they show, so all of it is on screen at once. */
.bm-why { margin: 0 0 10px; display: grid; gap: 8px; text-align: left; }
.bm-why-box { padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); background: var(--surface); }
.bm-why-h { margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--danger); }
.bm-why ul { margin: 0; padding: 0 0 0 14px; display: grid; gap: 4px; list-style: disc; }
.bm-why li { font-size: 12px; line-height: 1.38; color: var(--ink); overflow-wrap: anywhere; }
.bm-why li::marker { color: var(--danger); }
.bm-why-tip { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ok) 38%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.bm-why-tip-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.bm-why-tip p { margin: 0; font-size: 11.5px; line-height: 1.42; font-weight: 600; color: var(--ink); }
.bm-why-tip b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); }
.bm:has(> .bm-result.has-why:not([hidden])) { padding-top: 20px; padding-bottom: 20px; }
.bm-result.has-why .bm-ricon { width: 40px; height: 40px; margin-bottom: 8px; }
.bm-result.has-why .bm-ricon svg { width: 20px; height: 20px; }
.bm-result.has-why h2 { margin-bottom: 2px; font-size: 18px; }
.bm-result.has-why .bm-msg { margin-bottom: 8px; font-size: 12.5px; line-height: 1.4; }
.bm-result.has-why .bm-details { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin-bottom: 10px; padding: 8px 12px; }
.bm-result.has-why .bm-drow { font-size: 12px; gap: 6px; }
.bm-result.has-why .bm-rclose { padding: 10px 20px; }
#bmFund.has-why { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; column-gap: 10px; }
#bmFund.has-why > * { grid-column: 1 / -1; }
#bmFund.has-why > .bm-badge { grid-column: 2; width: 34px; height: 34px; margin: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 5%, transparent); }
#bmFund.has-why > h2 { grid-column: 3; margin: 0; font-size: 17px; text-align: left; }
#bmFund.has-why .bm-badge svg { width: 18px; height: 18px; }
#bmFund.has-why .bm-step { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
#bmFund.has-why .bm-why { margin: 8px 0 0; }
#bmFund.has-why .bm-fund-note { margin-top: 6px; font-size: 11.5px; line-height: 1.4; }
#bmFund.has-why .bm-actions { margin-top: 10px; }
#bmFund.has-why .bm-btn { padding: 10px; }

@media (max-width: 480px) {
  .bm:has(> .bm-result:not([hidden])) { padding: 20px 18px; }
  .bm-result h2 { font-size: 18px; }
  .bm-msg { font-size: 13px; margin-bottom: 14px; }
  .bm-ricon { width: 48px; height: 48px; margin-bottom: 14px; }
  .bm-ricon svg { width: 24px; height: 24px; }
  .bm-details { padding: 12px 14px; margin-bottom: 14px; }
  .bm-drow { font-size: 13px; }
  .bm-confetti { inset: -20px; }
  .bm-why-box, .bm-why-tip { padding: 8px 10px; }
  .bm-why li { font-size: 11.5px; }
  .bm-why-tip p { font-size: 11px; }
  .bm-result.has-why h2 { font-size: 16.5px; }
  .bm-result.has-why .bm-details { padding: 7px 10px; gap: 2px 10px; }
  .bm-result.has-why .bm-drow { font-size: 11px; }
}
@media (max-width: 420px) {
  .bm { padding: 24px 16px 16px; }
  .bm-sum { grid-template-columns: repeat(2, 1fr); }
  .bm-pick-side { font-size: 27px; }
  .bm-btn { padding: 11px 8px; font-size: 13px; }
}
@media (max-height: 680px) {
  .bm:has(> .bm-result.has-why:not([hidden])) { padding-top: 16px; padding-bottom: 14px; }
  .bm-why { gap: 6px; margin-bottom: 8px; }
  .bm-why-box, .bm-why-tip { padding: 7px 10px; }
  .bm-why-tip-i { width: 22px; height: 22px; }
  .bm-result.has-why .bm-ricon { width: 34px; height: 34px; margin-bottom: 6px; }
  .bm-result.has-why .bm-details { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tbal.is-live .tbal-live, .mk-dot .mk-live, .bot-now, .bot-now-k i, .bot-state i, .sh-dots-idle i, .tx--in, .bot-wait, .bot-wait::after, .bot-wait-eq i,
  .bm, .bm-back, .bm-radar i, .bm-radar svg, .bm-bar i::after, .bm-erricon, .bm-badge, .bm-tick, .bm-live i, .bm-ricon, .bm-ricon svg, .bm-dv--pl, .bot-watch b, .bm-watch-bar i, .mk-pop, .tbal-menu { animation: none; transition: none; }
  .bm-result--win .bm-ricon-tick { animation: none; stroke-dashoffset: 0; }
  .bm-tick circle, .bm-tick path { animation: none; stroke-dashoffset: 0; }
  .bm-confetti { display: none; }
}

/* Deriv's cashier just below the header, on every screen (owner, Oct 18): only with a connected
   account, not on the way to a real one. Under the balance on big screens, a row on phones. */
.money-row { display: none; gap: 6px; margin: 0 0 10px; }
body:has(#acct:not([hidden]):not(.is-noreal)) .money-row { display: flex; }
.money-row .fund-link { padding: 5px 12px; font-size: 12.5px; }
@media (min-width: 900px) { .money-row { justify-content: flex-end; } }

/* Big screens (900px and up): Deposit and Withdraw beside the tools in the bar under the header,
   the same height as the tool buttons, and the row of their own goes (owner, Oct 18). Phones and
   tablets keep that row just below the header. */
.money-row--bar { margin: 0; flex: none; }
.money-row--bar .fund-link { height: 28px; padding: 0 12px; }
@media (min-width: 900px) { body:has(#acct:not([hidden]):not(.is-noreal)) .money-row:not(.money-row--bar) { display: none; } }
@media (max-width: 899px) { body:has(#acct:not([hidden]):not(.is-noreal)) .money-row--bar { display: none; } }