/*
 * MAGIC BOTS LAB — the dashboard.
 *
 * Magic Bots Lab's own design throughout: the dashboard's topbar, balance
 * card and footer buttons as they always were, and the bot in the bots page's
 * panel (trading-dashboard.html) — Configuration, Live Performance, Recent
 * Trades, the tinted glass buttons with their glow, the stat rows in their own
 * colours, the history items that slide in with a win or loss glow. What the
 * Smart Scan bot adds — the trade types, the prediction, the live scan, the
 * popups — is drawn in the same language.
 */

:root {
  color-scheme: dark;
  --bg: #101216;
  --dot: rgba(255, 255, 255, 0.07);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f3f6fb;
  --muted: #99a2b6;
  --blue: #61a5ff;
  --green: #24d970;
  --violet: #b794f4;

  /* The bots page's own. */
  --panel: #171b24;
  --panel-strong: #1f2531;
  --panel-soft: rgba(23, 27, 36, 0.9);
  --accent: #00d2ff;
  --accent-2: #ff7a18;
  --success: #24d970;
  --danger: #ff5f6d;
  --warning: #fcd34d;

  /* The support bubble borrows these. */
  --faint: #6b7b91;
  --panel-2: #1a1e26;
  --red: #ff5f6d;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "tnum" 1;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}
button, input, select { font-family: inherit; }

.wrap {
  width: 100%;
  margin: 0;
  padding: clamp(14px, 2.4vw, 28px) clamp(16px, 4vw, 64px) 96px;   /* the support bubble clears the footer */
}

/* ── the topbar ────────────────────────────────────────────────────── */

.topbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.brand-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.brand-kicker { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.brand-title { margin: 0; font-family: "Inter", "Plus Jakarta Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; color: #9fc4ff; }
/* The "o" of Magic Bots Lab (smart/door.js). It looks like every other letter on
   purpose; its target is a little wider than the letter so three taps land on a
   phone. The field the first visit asks for opens under the word in the page's
   own input colours, so nothing in the header moves; the only announcement is a
   second of colour on the word. */
.brand-kicker { touch-action: manipulation; }
.brand-kicker .door { position: relative; }
.brand-kicker .door::before { content: ""; position: absolute; inset: -10px -5px; }
.door-box { position: absolute; z-index: 500; margin: 0; }
.door-box[hidden] { display: none; }
/* 16px: anything smaller and an iPhone zooms the page in when the field opens. */
.door-key {
  display: block; width: 7.5em;
  padding: 5px 9px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 16px;
  -webkit-text-security: disc;
}
.door-key:focus { outline: none; }
@keyframes door-lit { 0% { color: var(--muted); } 22%, 70% { color: var(--accent); } 100% { color: var(--muted); } }
.brand-kicker.lit { animation: door-lit 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .brand-kicker.lit { animation-duration: 1ms; color: var(--accent); } }
.topbar-lang { display: flex; align-items: center; flex: none; }
.topbar-lang:empty { display: none; }
.topbar-actions { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

.btn {
  appearance: none; border-radius: 10px; border: 1px solid var(--border);
  font-family: inherit; cursor: pointer; text-decoration: none;
  font-weight: 700; font-size: 12.5px; padding: 9px 13px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
  white-space: nowrap; color: var(--text); -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
/* A tap shows the moment the finger lands, whatever the page is busy with: pressed in, a touch brighter. */
.btn { touch-action: manipulation; }
.btn:not(:disabled):active { transform: scale(0.97); filter: brightness(1.12); transition-duration: 0s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--mt5 { background: linear-gradient(135deg, rgba(62, 157, 203, 0.22), rgba(0, 83, 131, 0.1)); color: #d9edf9; border-color: rgba(62, 157, 203, 0.4); }
.btn .btn-logo { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
/* The channels' logos sit in the line of their small text: a pixel under the MT5 one, so the buttons keep their height. */
.social-btn .btn-logo { width: 14px; height: 14px; margin: -1px 0; }
.social-btn--whatsapp .btn-logo { border-radius: 4px; }
.btn--ghost { background: var(--surface-2); color: #e4ebf7; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); }
.btn--ghost:disabled { opacity: .55; cursor: default; transform: none; }

/* ── the balance: one slim card ──────────────────────────────────── */

.hero {
  position: relative; border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 10px 28px rgba(4, 6, 10, 0.35);
  padding: 12px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 10px 22px; margin-bottom: 14px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 100% 0%, rgba(97, 165, 255, 0.12), transparent 55%);
}
.hero > * { position: relative; }
.hero-balance { display: flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center; }
.balance-label { color: var(--muted); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; }

.tbal { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.bal-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tbal-chip {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tbal-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.balance-value {
  font-size: clamp(21px, 2.3vw, 26px); font-weight: 800; letter-spacing: -0.03em; color: #f4f8ff; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tbal.is-real .balance-value { color: var(--green); }
.account-type {
  flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface-2);
}
.tbal.is-real .account-type { color: #24d970; border-color: rgba(36, 217, 112, 0.32); background: rgba(36, 217, 112, 0.1); }
.tbal.is-demo .account-type { color: #fbd38d; border-color: rgba(251, 211, 141, 0.32); background: rgba(246, 173, 85, 0.1); }
.tbal-caret { flex: none; color: var(--muted); transition: transform .15s ease; }
.tbal-chip[aria-expanded="true"] .tbal-caret { transform: rotate(180deg); }
.tbal-chip:hover .tbal-caret { color: var(--text); }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  padding: 1px 8px; font-size: 10px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.tbal-live { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #6b7b91; }
.lp { display: none; }
.tbal:not(.is-live):not(.is-wait) .lp--idle, .tbal.is-wait .lp--wait, .tbal.is-live .lp--on { display: inline; }
.tbal.is-live .live-pill { border-color: rgba(36, 217, 112, 0.32); background: rgba(36, 217, 112, 0.1); color: #24d970; }
.tbal.is-live .tbal-live { background: var(--green); box-shadow: 0 0 0 2px rgba(36, 217, 112, 0.25); animation: tbal-beat 2.4s ease-in-out infinite; }
.tbal.is-wait .live-pill { border-color: rgba(252, 211, 77, 0.32); background: rgba(252, 211, 77, 0.08); color: var(--warning); }
.tbal.is-wait .tbal-live { background: var(--warning); }
@keyframes tbal-beat { 0%, 100% { box-shadow: 0 0 0 2px rgba(36, 217, 112, 0.25); } 50% { box-shadow: 0 0 0 5px rgba(36, 217, 112, 0); } }

/* No real account yet (smart/deriv.js): the balance gives way to a red way to open one, in a
   deep Deriv red that keeps its white words readable (4.8:1); the popup says why (bot.js). */
.tbal-open-real {
  display: none; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: #d92b36; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: 0 6px 18px rgba(217, 43, 54, 0.3); touch-action: manipulation; transition: filter .15s;
}
.tbal-open-real:hover { filter: brightness(1.07); }
.tbal-open-real:active { transform: scale(0.97); }
.tbal-open-real:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tbal-open-real svg { flex: none; }
.tbal.is-noreal .bal-top, .tbal.is-noreal .tbal-chip, .tbal.is-noreal .tbal-menu { display: none; }
.tbal.is-noreal .tbal-open-real { display: inline-flex; }

/* The accounts: the bots page's own Account card look. */
.tbal-menu {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 290px; padding: 6px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.tbal-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text); 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: 3px; min-width: 0; }
.tbal-row-k { font-size: 13px; font-weight: 700; }
.tbal-row-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tbal-row-v { margin-left: auto; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbal-row.is-real .tbal-row-v { color: var(--green); }
.tbal-row-on { width: 16px; height: 16px; flex: none; color: var(--accent); visibility: hidden; }
.tbal-row[aria-checked="true"] .tbal-row-on { visibility: visible; }

.balance-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.fund-actions { display: inline-flex; gap: 6px; }
.hero .btn { height: 34px; }
.fund-btn { font-size: 11px; letter-spacing: 0.03em; padding: 0 13px; justify-content: center; }
.fund-btn--deposit { background: linear-gradient(135deg, rgba(36, 217, 112, 0.2), rgba(36, 217, 112, 0.08)); color: #24d970; border-color: rgba(36, 217, 112, 0.35); }
.fund-btn--withdraw { background: linear-gradient(135deg, rgba(255, 95, 109, 0.2), rgba(255, 95, 109, 0.08)); color: #ff5f6d; border-color: rgba(255, 95, 109, 0.35); }
.start-trading-btn {
  justify-content: center; padding: 0 6px 0 12px; font-size: 11.5px; letter-spacing: 0.03em; gap: 8px;
  color: #eef6ff; background: linear-gradient(135deg, #3568b8, #2a7dc4);
  border-color: rgba(97, 165, 255, 0.45); box-shadow: 0 6px 16px rgba(27, 55, 97, 0.3);
}
.start-trading-btn .badges { display: inline-flex; gap: 5px; }
.chip--logo { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 7px; background: rgba(4, 18, 40, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); }
.chip--logo img { height: 14px; width: auto; display: block; }
.balance-hint { font-size: 10.5px; color: #9aa4ba; line-height: 1.35; text-align: right; }
/* Straight to the Deriv portfolio, where the move to Options is made: the bots page's blue. */
.balance-transfer {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 9px; vertical-align: 1px;
  border: 1px solid rgba(97, 165, 255, 0.45); border-radius: 999px; background: rgba(97, 165, 255, 0.12);
  color: #9fc4ff; font-size: 10.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.balance-transfer:hover { background: rgba(97, 165, 255, 0.2); border-color: #61a5ff; }
.balance-transfer:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.tstate { width: 100%; max-width: 520px; margin: 28px auto; text-align: center; }
.tstate-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.tstate-busy p { margin: 0; }
.tspin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--border-strong); border-top-color: var(--accent); animation: tspin .8s linear infinite; }
@keyframes tspin { to { transform: rotate(360deg); } }
.tnote { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: #b3bcd1; font-size: 13px; line-height: 1.5; }
.tnote p { margin: 0; }

/* ══ the bot: the bots page's panel ════════════════════════════════════ */

.bot-detail-panel {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--panel-soft); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px; display: flex; flex-direction: column; gap: 20px;
  --even: #00d2ff;
  --odd: #ff7a18;
}

.bot-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.bot-panel-id { min-width: 0; flex: 1 1 320px; }
.bot-panel-name { font-size: 16px; font-weight: 700; }
.bot-panel-desc { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* The risk line under the bot's name (owner). */
.bot-panel-risk { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

/* The trade type: the bots page's mode toggle, the bots page's cyan when on. */
.mode-toggle { display: inline-flex; flex: none; max-width: 100%; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; overflow: hidden; }
.mode-btn {
  border: 0; border-left: 1px solid rgba(148, 163, 184, 0.16); background: transparent; color: #cbd5e1;
  font-size: 12px; font-weight: 700; padding: 9px 13px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease; touch-action: manipulation;
}
.mode-btn:first-child { border-left: 0; }
.mode-btn:hover:not(:disabled) { color: #ffffff; background: rgba(255, 255, 255, 0.04); }
.mode-btn.is-on { background: linear-gradient(135deg, rgba(0, 210, 255, 0.3), rgba(0, 210, 255, 0.12)); color: #00d2ff; }
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.bot-types.is-locked .mode-btn.is-on { opacity: 1; cursor: default; }

/* The watch, on each type: three signal bars in the tab's corner — all three lit green,
   two amber, one red (blinking), a soft wave while it is still reading, nothing with no
   markets. bot.js sets data-watch on the tab; the percentage is the bars' title. */
.mode-btn.bot-type { position: relative; }
.bot-watch { position: absolute; top: 2px; right: 3px; 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: rgba(148, 163, 184, 0.28); transition: background-color .35s ease, box-shadow .35s ease; }
.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: var(--green); box-shadow: 0 0 4px rgba(36, 217, 112, 0.55); }
.bot-type[data-watch="yellow"] .bot-watch b:nth-child(-n+2) { background: var(--warning); box-shadow: 0 0 4px rgba(252, 211, 77, 0.5); }
.bot-type[data-watch="red"] .bot-watch b:nth-child(1) { background: var(--red); box-shadow: 0 0 5px rgba(255, 95, 109, 0.65); animation: mbl-watch-blink 1.2s ease-in-out infinite; }
.bot-type[data-watch="warm"] .bot-watch b { animation: mbl-watch-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; }
/* Phones: the tabs' words reach the corner, so the bars sit above them, a touch smaller. */
@media (max-width: 480px) {
  .mode-btn.bot-type { padding-top: 11px; }
  .bot-watch { top: 3px; gap: 1px; }
  .bot-watch b { width: 2px; }
}
@keyframes mbl-watch-blink { 50% { opacity: .35; } }
@keyframes mbl-watch-wave { 0%, 100% { background: rgba(148, 163, 184, 0.22); } 50% { background: rgba(148, 163, 184, 0.7); } }

.bot-panel-grid { display: grid; gap: 20px; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bot-column { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bot-history-column { display: flex; flex-direction: column; }

.bot-config, .bot-stats, .bot-now {
  background: rgba(15, 17, 23, 0.6); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 20px;
}
.bot-config h4, .bot-stats h4, .history-card h4 { margin: 0; font-size: 18px; font-weight: 600; }

.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }   /* a label on two lines keeps its box in line */
.config-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: -6px; }
/* The figures' risk on this balance (bot.js paintRisk): a tag beside Initial Stake and Take
   Profit — green Safe, amber High, red Too high — and, when one is not safe, a note on why
   with the safe figure, in the stake coach's own box. */
.input-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; }
.bot-risk {
  --rc: 36, 217, 112;
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(var(--rc), 0.35); background: rgba(var(--rc), 0.1); color: rgb(var(--rc));
  font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.bot-risk::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px rgba(var(--rc), 0.6); }
.bot-risk[data-risk="high"], .bot-risk-line[data-risk="high"] { --rc: 252, 211, 77; }
.bot-risk[data-risk="over"], .bot-risk-line[data-risk="over"] { --rc: 255, 95, 109; }
.bot-risk-note { display: flex; flex-direction: column; gap: 6px; margin-top: -8px; }
.bot-risk-line {
  --rc: 36, 217, 112;
  margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--rc), 0.25); background: rgba(var(--rc), 0.07);
  font-size: 11.5px; line-height: 1.45; color: rgba(229, 233, 242, 0.85);
}
.bot-risk-line b { color: rgb(var(--rc)); font-weight: 700; }
/* The safe figure, a button: one click puts it in its field. Green — the safe choice. */
.bot-risk-use {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 1px; padding: 1px 9px 1px 7px; vertical-align: 1px;
  border: 1px solid rgba(36, 217, 112, 0.45); border-radius: 999px; background: rgba(36, 217, 112, 0.12); color: var(--green);
  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, box-shadow .15s ease, transform .1s ease;
}
.bot-risk-use:hover { background: rgba(36, 217, 112, 0.2); border-color: var(--green); box-shadow: 0 0 10px rgba(36, 217, 112, 0.25); }
.bot-risk-use:active { transform: translateY(1px); }
.bot-risk-use:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.config-note small { color: rgba(152, 162, 189, 0.75); font-size: 12px; line-height: 1.4; }
.bot-toggles { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 16px; margin-left: auto; }
.input-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.input-group--wide { grid-column: 1 / -1; }
.input-group label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.input-group input, .select-wrap select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 17, 23, 0.8); color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.input-group input:focus, .select-wrap select:focus { border-color: rgba(0, 210, 255, 0.6); box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.12); }
.input-group input:disabled, .select-wrap select:disabled { opacity: .6; cursor: not-allowed; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; font-weight: 600; }
.select-wrap select option { background: var(--panel); color: var(--text); }
.select-wrap svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-group small { color: rgba(152, 162, 189, 0.75); font-size: 12px; line-height: 1.4; }
/* Differs and Over/Under 0–3: the Martingale is worked out for each loss, a word not a figure. */
.input-group.is-dynamic input { color: #00d2ff; font-weight: 700; cursor: default; background: linear-gradient(135deg, rgba(0, 210, 255, 0.1), rgba(0, 210, 255, 0.03)); }

/* "Save settings": a small switch. */
.bot-keep { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; -webkit-user-select: none; }
.bot-keep input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bot-keep i { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background .18s ease; }
.bot-keep i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .18s ease; }
.bot-keep input:checked + i { background: rgba(0, 210, 255, 0.75); }
.bot-keep input:checked + i::after { transform: translateX(13px); }
.bot-keep input:checked ~ span, .bot-keep:hover span { color: var(--text); }
.bot-keep input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.bot-safe input:checked + i { background: rgba(36, 217, 112, 0.8); }

.config-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* The bots page's buttons, exactly. */
.primary-btn, .secondary-btn {
  padding: 12px 20px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease; font-family: inherit; position: relative;
}
.primary-btn { background: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(0, 210, 255, 0.15)); border: 1px solid rgba(0, 210, 255, 0.6); color: #00d2ff; }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.secondary-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); }
.secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.primary-btn:focus-visible, .secondary-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes btn-liquid-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes btn-glow-pulse-start {
  0%, 100% { box-shadow: 0 0 14px rgba(0, 212, 255, 0.4), 0 0 28px rgba(0, 212, 255, 0.15); border-color: rgba(0, 212, 255, 0.55); }
  50% { box-shadow: 0 0 22px rgba(0, 212, 255, 0.6), 0 0 40px rgba(0, 212, 255, 0.25); border-color: rgba(0, 212, 255, 0.75); }
}
@keyframes btn-glow-pulse-stop {
  0%, 100% { box-shadow: 0 0 14px rgba(251, 146, 60, 0.35), 0 0 28px rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.5); }
  50% { box-shadow: 0 0 22px rgba(251, 146, 60, 0.55), 0 0 40px rgba(251, 146, 60, 0.2); border-color: rgba(251, 146, 60, 0.7); }
}
.primary-btn.btn-liquid-glow, .secondary-btn.btn-liquid-glow { position: relative; overflow: hidden; }
.primary-btn.btn-liquid-glow { animation: btn-glow-pulse-start 2.2s ease-in-out infinite; border-color: rgba(0, 212, 255, 0.6); }
.secondary-btn.btn-liquid-glow { animation: btn-glow-pulse-stop 2.2s ease-in-out infinite; border-color: rgba(251, 146, 60, 0.55); color: rgba(251, 180, 120, 0.95); }
.primary-btn.btn-liquid-glow::before, .secondary-btn.btn-liquid-glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background-size: 200% 100%; animation: btn-liquid-flow 2.5s ease-in-out infinite;
}
.primary-btn.btn-liquid-glow::before { background-image: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(0, 212, 255, 0.28) 50%, transparent 65%, transparent 100%); }
.secondary-btn.btn-liquid-glow::before { background-image: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(251, 146, 60, 0.25) 50%, transparent 65%, transparent 100%); }
.primary-btn.btn-liquid-glow > *, .secondary-btn.btn-liquid-glow > * { position: relative; z-index: 1; }
.secondary-btn .bs-stopping, .secondary-btn.is-stopping .bs-stop { display: none; }
.secondary-btn.is-stopping .bs-stopping { display: inline; }

.bot-stat, .bot-state { font-size: 12px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.bot-stat strong, .bot-state strong { color: #e2e8f0; }
.bot-state--run strong { color: #24d970; }
.bot-state--wait strong { color: var(--warning); }
.bot-state--won strong { color: #24d970; }
.bot-state--bad strong { color: #ff5f6d; }
.config-actions .bot-state { flex: 1 1 140px; min-width: 0; }

.bot-msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.bot-msg--bad { color: #ffb3ba; border: 1px solid rgba(255, 95, 109, 0.3); background: rgba(255, 95, 109, 0.08); }
.bot-msg--info { color: rgba(187, 247, 208, 0.92); border: 1px solid rgba(36, 217, 112, 0.22); background: rgba(36, 217, 112, 0.06); }

.stake-coach { margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(36, 217, 112, 0.22); background: rgba(36, 217, 112, 0.06); display: flex; flex-direction: column; gap: 8px; }
.stake-coach--compact { padding: 8px 10px; gap: 6px; }
.stake-coach__tip { margin: 0; font-size: 11px; line-height: 1.4; color: rgba(187, 247, 208, 0.92); }

/* ── the live scan ─────────────────────────────────────────────────── */

.bot-now { gap: 12px; border-color: rgba(0, 210, 255, 0.22); background: linear-gradient(135deg, rgba(0, 210, 255, 0.07), rgba(15, 17, 23, 0.6) 55%); animation: bot-rise .35s ease-out; }
.bot-now-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bot-now-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #24d970; }
.bot-now-k i { width: 8px; height: 8px; border-radius: 50%; background: #24d970; animation: bot-beat 1.6s ease-in-out infinite; }
.bot-now-note { font-size: 12px; color: rgba(152, 162, 189, 0.8); text-align: right; }
.bot-now-b { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bot-now-t { min-width: 0; }
.bot-now-m { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-now-side { margin-top: 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.bot-now-side--a { color: var(--even); }
.bot-now-side--b { color: var(--odd); }
.bot-now-p { flex: none; text-align: right; }
.bot-now-p b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bot-now-p span { font-size: 11.5px; color: var(--muted); }
@keyframes bot-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bot-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(36, 217, 112, 0.35); } 50% { box-shadow: 0 0 0 5px rgba(36, 217, 112, 0); } }

.bot-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.bot-dots i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bot-dots i.e, .bot-dots i.w.t-a { color: var(--even); background: rgba(0, 210, 255, 0.14); }
.bot-dots i.o, .bot-dots i.w.t-b { color: var(--odd); background: rgba(255, 122, 24, 0.15); }
.bot-dots i.x { color: #5f6984; background: rgba(255, 255, 255, 0.05); }

/* ── Live Performance: the bots page's stat rows and colours ──────── */

.stats-grid { display: flex; flex-direction: column; gap: 12px; }
.stat-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.stat-card:last-child { border-bottom: none; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(152, 162, 189, 0.7); font-weight: 500; }
.stat-value { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#pBalance { color: #00d2ff; }
/* The colour rides on the classes bot.js gives the figure (is-up / is-down) every time it paints
   it: a second set added afterwards was wiped at each repaint, and the figure blinked white. */
#botPl.is-up { color: #24d970; }
#botPl.is-down { color: #ff5f6d; }
#botPl { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
#botN { color: #ff7a18; }
#pRate { color: #a855f7; }
#botNext { color: #00d2ff; }
#botStreak { color: #ff5f6d; }
#pMarket { color: #fcd34d; }
#pTime { color: #00d2ff; }

/* ── Recent Trades: the bots page's history, its slide-in and glow ── */

.history-card {
  background: rgba(15, 17, 23, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px;
  padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden;
}
.history-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.history-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.history-list { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; scroll-behavior: smooth; overscroll-behavior: contain; }
.history-items { display: flex; flex-direction: column; gap: 10px; }
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.3); border-radius: 3px; }
.history-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 255, 0.5); }
@supports not selector(::-webkit-scrollbar) { .history-list { scrollbar-width: thin; scrollbar-color: rgba(0, 210, 255, 0.3) rgba(255, 255, 255, 0.05); } }
/* A finger on Recent Trades must still move the page: `contain` kept every swipe that began on
   the list inside it, so with few trades, or the list at its end, nothing moved and the page
   could only be scrolled from above or below the card. On phones, tablets and any touch screen
   the list hands the swipe to the page at its ends; with a mouse on a wide screen it keeps it. */
@media (max-width: 1023px), (pointer: coarse) { .history-list { overscroll-behavior: auto; } }

.history-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; transform: translateX(0); flex: none;
}
.history-item--enter { animation: history-slide-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.history-item--enter.win { animation: history-slide-in-win 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.history-item--enter.loss { animation: history-slide-in-loss 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes history-slide-in {
  0% { opacity: 0; transform: translateX(-36px); box-shadow: 0 0 20px rgba(0, 210, 255, 0.5), 0 0 40px rgba(0, 210, 255, 0.2); }
  25% { opacity: 1; transform: translateX(4px); box-shadow: 0 0 24px rgba(0, 210, 255, 0.45), 0 0 48px rgba(0, 210, 255, 0.18); }
  50% { transform: translateX(-2px); box-shadow: 0 0 16px rgba(0, 210, 255, 0.3), 0 0 32px rgba(0, 210, 255, 0.1); }
  75% { transform: translateX(1px); box-shadow: 0 0 8px rgba(0, 210, 255, 0.15); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; }
}
@keyframes history-slide-in-win {
  0% { opacity: 0; transform: translateX(-36px); box-shadow: 0 0 22px rgba(36, 217, 112, 0.55), 0 0 44px rgba(36, 217, 112, 0.25); }
  25% { opacity: 1; transform: translateX(4px); box-shadow: 0 0 26px rgba(36, 217, 112, 0.5), 0 0 52px rgba(36, 217, 112, 0.2); }
  50% { transform: translateX(-2px); box-shadow: 0 0 18px rgba(36, 217, 112, 0.35), 0 0 36px rgba(36, 217, 112, 0.12); }
  75% { transform: translateX(1px); box-shadow: 0 0 10px rgba(36, 217, 112, 0.18); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; }
}
@keyframes history-slide-in-loss {
  0% { opacity: 0; transform: translateX(-36px); box-shadow: 0 0 22px rgba(255, 95, 109, 0.5), 0 0 44px rgba(255, 95, 109, 0.22); }
  25% { opacity: 1; transform: translateX(4px); box-shadow: 0 0 26px rgba(255, 95, 109, 0.45), 0 0 52px rgba(255, 95, 109, 0.18); }
  50% { transform: translateX(-2px); box-shadow: 0 0 18px rgba(255, 95, 109, 0.3), 0 0 36px rgba(255, 95, 109, 0.1); }
  75% { transform: translateX(1px); box-shadow: 0 0 10px rgba(255, 95, 109, 0.15); }
  100% { opacity: 1; transform: translateX(0); box-shadow: none; }
}
.history-item.win { border-color: rgba(36, 217, 112, 0.3); }
.history-item.loss { border-color: rgba(255, 68, 79, 0.3); }
.history-meta { display: flex; flex-direction: column; gap: 4px; color: var(--muted); min-width: 0; }
.history-meta strong { color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.history-profit { font-weight: 600; flex: none; white-space: nowrap; }
.history-profit.win { color: var(--success); }
.history-profit.loss { color: var(--danger); }

/* ── the footer ────────────────────────────────────────────────────── */

.dash-footer { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The account's buttons at the foot: only on phones and tablets (below). */
.dash-more { display: none; }
/* Their logos' room comes out of the side padding and the gap: each button is as wide as it was without one. */
.social-btn { justify-content: center; padding: 9px 5px; gap: 4px; font-size: 11px; }
.social-btn--whatsapp { background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(22, 163, 74, 0.06)); color: #d3ffe6; border-color: rgba(74, 222, 128, 0.35); }
.social-btn--telegram { background: linear-gradient(135deg, rgba(97, 165, 255, 0.2), rgba(37, 99, 235, 0.06)); color: #dbe9ff; border-color: rgba(97, 165, 255, 0.35); }

/* ── wide: three columns, as on the bots page ──────────────────────── */

@media (min-width: 1024px) {
  .bot-panel-grid { grid-template-columns: 1.05fr 0.9fr 1fr; align-items: stretch; }
  /* The trades never set the panel's height: they fill the column beside the
     other two and scroll inside it. */
  .bot-history-column { position: relative; min-height: 460px; }
  .history-card { position: absolute; inset: 0; }
}

/* ── one column ────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .bot-panel-grid { grid-template-columns: 1fr; }
  .history-card { min-height: 400px; max-height: min(70vh, 640px); }
}
@media (max-width: 860px) {
  .bot-panel-header { align-items: stretch; }
  .mode-toggle { width: 100%; }
  .mode-btn { flex: 1 1 0; padding: 9px 6px; white-space: normal; line-height: 1.2; }
}
/* The card stacks only where its one row will not fit. */
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .hero-balance { min-height: 0; }
  .hero-actions { align-items: stretch; }
  .balance-actions { justify-content: flex-start; }
  .balance-hint { text-align: left; }
}
@media (max-width: 768px) {
  .bot-detail-panel { padding: 16px; border-radius: 16px; gap: 16px; }
  .bot-config, .bot-stats, .bot-now, .history-card { padding: 14px; gap: 14px; border-radius: 12px; }
  .bot-config h4, .bot-stats h4, .history-card h4 { font-size: 16px; }
  .config-grid { gap: 12px; }
  .input-group { gap: 6px; }
  .input-group label { font-size: 11px; }
  .input-group input, .select-wrap select { padding: 10px 12px; font-size: 16px; border-radius: 8px; }   /* 16px: no zoom on iPhone */
  .config-actions { gap: 10px; }
  .config-actions .primary-btn, .config-actions .secondary-btn { flex: 1 1 0; padding: 11px 14px; font-size: 13px; }
  .config-actions .bot-state { flex-basis: 100%; }
  .config-note { margin-top: -4px; }
  .stats-grid { gap: 6px; }
  .bot-now-side { font-size: 21px; }
  .bot-now-p b { font-size: 22px; }
}
@media (max-width: 620px) {
  .wrap { padding: 12px 12px 92px; }
  .brand-title { font-size: 14px; }
  .btn { padding: 8px 11px; font-size: 11.5px; }
  /* Deposit and Withdraw side by side; the bots below them. */
  .fund-actions { flex: 1 1 100%; }
  .fund-actions .btn { flex: 1 1 0; }
  .start-trading-btn { flex: 1 1 100%; }
  .hero .btn { height: 32px; }
  .hero .fund-actions .btn { flex: 0 0 auto; height: 28px; padding: 0 14px; font-size: 11px; }   /* Deposit and Withdraw small, under the header (owner, Oct 18) */
  /* Two rows: the name and the language; then the two buttons side by side. */
  .topbar { gap: 10px; }
  .topbar-actions { flex: 1 1 100%; justify-content: stretch; flex-wrap: nowrap; }
  .topbar-actions .btn { flex: 1 1 0; justify-content: center; }
  .dash-footer .btn { flex: 1 1 0; }
  .tbal-menu { min-width: 0; width: min(330px, calc(100vw - 56px)); }
}
@media (max-width: 400px) {
  /* The bots button keeps its two logos, smaller; on the narrowest screens they go under the words. */
  .hero .start-trading-btn { height: auto; min-height: 32px; padding: 4px 6px 4px 10px; flex-wrap: wrap; row-gap: 4px; }
  .chip--logo { padding: 2px 6px; }
  .chip--logo img { height: 12px; }
}
@media (max-width: 420px) {
  .config-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .input-group label { font-size: 10.5px; letter-spacing: 0.03em; }
  .bot-dots { flex-wrap: nowrap; gap: 4px; }
  .bot-dots i { width: 22px; height: 22px; border-radius: 6px; font-size: 11.5px; }
  .stat-label { font-size: 11px; letter-spacing: 0.04em; }
  .stat-value { font-size: 14px; }
  .mode-btn { font-size: 11.5px; padding: 8px 4px; }
}
/* Phones and tablets: Create MT5 account, Disconnect and Open AI bots wait at the foot
   (.dash-more), so the balance and the bot come first; the cards sit closer together. */
@media (max-width: 1023px) {
  .topbar > .topbar-actions, .balance-actions > .start-trading-btn { display: none; }
  .topbar { margin-bottom: 10px; }
  .hero { margin-bottom: 10px; }
  .bot-detail-panel { gap: 12px; }
  .bot-panel-header { gap: 10px; }
  .bot-panel-grid, .bot-column { gap: 10px; }
  .dash-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .dash-more .btn { flex: 1 1 0; justify-content: center; min-height: 36px; }
  .dash-more .start-trading-btn { flex-basis: 100%; }
  .dash-footer { margin-top: 8px; gap: 8px; }
  /* Recent Trades takes more than half the screen, empty or not (owner). */
  .history-card { min-height: 56vh; min-height: 56dvh; }
}
@media (max-width: 768px) {
  .bot-detail-panel { gap: 10px; }
}
@media (max-width: 360px) {
  .wrap { padding-left: 10px; padding-right: 10px; }
  .bot-detail-panel { padding: 12px; }
  .bot-config, .bot-stats, .bot-now, .history-card { padding: 12px; }
  .config-grid { grid-template-columns: 1fr; }
  .fund-actions { flex-basis: 100%; }
  .start-trading-btn { flex-basis: 100%; }
  .bot-dots { gap: 3px; }
  .bot-dots i { width: 20px; height: 20px; font-size: 11px; }
}

/* ══ the popups, in the bots page's popup style ═══════════════════════ */

.bm-root {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --even: #00d2ff;
  --odd: #ff7a18;
}
.bm-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: bm-fade .2s ease-out; }
.bm {
  position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 28px 22px 22px; border: 1px solid var(--border); border-radius: 16px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(0, 210, 255, 0.07), transparent 60%), var(--panel);
  color: var(--text); text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  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(--border); border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.bm-x:hover { color: var(--text); }
.bm-x:focus-visible { outline: 2px solid var(--accent); 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(--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;
  border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(148, 163, 184, 0.08);
  color: var(--text); text-decoration: none; text-align: center; padding: 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.bm-btn:hover { border-color: rgba(148, 163, 184, 0.5); }
.bm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-btn--go { background: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(0, 210, 255, 0.15)); border-color: rgba(0, 210, 255, 0.6); color: #00d2ff; }
.bm-btn--fund { background: linear-gradient(135deg, rgba(36, 217, 112, 0.2), rgba(36, 217, 112, 0.1)); border-color: rgba(36, 217, 112, 0.45); color: #24d970; }
@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: #00d2ff; background: radial-gradient(circle, rgba(0, 210, 255, 0.16) 0 55%, transparent 56%); }
.bm-radar i { position: absolute; inset: 0; border: 2px solid #00d2ff; 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; }
.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: rgba(255, 255, 255, 0.06); overflow: hidden; }
.bm-bar i { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, #00d2ff, #6ee7ff 70%, #ff7a18); box-shadow: 0 0 14px rgba(0, 210, 255, 0.55); }
.bm-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%); transform: translateX(-100%); animation: bm-shine 1.3s ease-in-out infinite; }
@keyframes bm-shine { to { transform: translateX(100%); } }
.bm-pct { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--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: rgba(36, 217, 112, 0.12); stroke: #24d970; 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: #24d970; 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 rgba(255, 255, 255, 0.05); border-radius: 14px; background: rgba(15, 17, 23, 0.6); }
.bm-pick-m { font-size: 14.5px; font-weight: 700; }
.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(--muted); }
.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 rgba(36, 217, 112, 0.32); background: rgba(36, 217, 112, 0.1); color: #24d970; font-size: 13px; font-weight: 700; }
.bm-live i { width: 8px; height: 8px; border-radius: 50%; background: #24d970; animation: bot-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: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); }
.bm-sum dt { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(152, 162, 189, 0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-sum dd { margin: 3px 0 0; font-size: 13.5px; font-weight: 700; color: #00d2ff; 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: #ff5f6d; background: rgba(255, 95, 109, 0.12); 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 and stop loss: the bots page's own result popups
   (popup-notifications.js) — the card tinted green or red, the icon in its
   ring, the details in their own colours, one Close button — with this bot's
   animations: confetti and a drawn tick for a win, a shaken warning for a loss. */
.bm:has(> .bm-result:not([hidden])) {
  width: min(480px, 100%); padding: 32px 40px; border-radius: 20px; text-align: center;
  border: 2px solid var(--r-line);
  background: linear-gradient(135deg, var(--r-tint) 0%, var(--r-tint-2) 100%), rgba(20, 23, 31, 0.78);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: popupSlideIn .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bm:has(> #bmWin:not([hidden])) { --r-line: rgba(36, 217, 112, 0.4); --r-tint: rgba(36, 217, 112, 0.15); --r-tint-2: rgba(36, 217, 112, 0.08); --r-ink: #24d970; }
.bm:has(> #bmLoss:not([hidden])) { --r-line: rgba(255, 95, 109, 0.4); --r-tint: rgba(255, 95, 109, 0.15); --r-tint-2: rgba(255, 95, 109, 0.08); --r-ink: #ff5f6d; }
.bm:has(> .bm-result:not([hidden])) > .bm-x { display: none; }
.bm-root:has(.bm-result:not([hidden])) .bm-back { background: rgba(4, 6, 10, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes popupSlideIn { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.bm-result { position: relative; }

/* The watch's reading in a popup: ten cells lit to the figure, in the reading's colour, the
   figure beside them; grown from nothing as the popup opens, the last cell blinking red. */
.bm-watch { --wc: 148, 163, 184; display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(var(--wc), 0.3); background: rgba(15, 17, 23, 0.4); transition: border-color .4s ease; }
#bmDone .bm-watch { margin: 14px 0 0; }
.bm-watch[data-watch="off"] { display: none; }
.bm-watch[data-watch="green"] { --wc: 36, 217, 112; }
.bm-watch[data-watch="yellow"] { --wc: 252, 211, 77; }
.bm-watch[data-watch="red"] { --wc: 255, 95, 109; }
.bm-watch-bar { position: relative; flex: 1; height: 10px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); }
.bm-watch-bar i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(var(--wc)) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); filter: drop-shadow(0 0 4px rgba(var(--wc), 0.55));
  clip-path: inset(0 calc(100% - var(--watch, 0) * 100%) 0 0); transition: clip-path .9s cubic-bezier(.2, .8, .2, 1); animation: mbl-gauge-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
.bm-watch[data-watch="red"] .bm-watch-bar i { animation: mbl-gauge-grow 1s cubic-bezier(.2, .8, .2, 1) both, mbl-watch-blink 1.4s 1s ease-in-out infinite; }
.bm-watch[data-watch="warm"] .bm-watch-bar i { clip-path: inset(0 70% 0 0); background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.6) 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); filter: none; animation: mbl-watch-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: rgb(var(--wc)); transition: color .4s ease; }
@keyframes mbl-gauge-grow { from { clip-path: inset(0 100% 0 0); } }

.bm-ricon {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%; border: 2px solid var(--r-line); color: var(--r-ink);
  background: color-mix(in srgb, var(--r-ink) 20%, 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 12px; font-size: 24px; font-weight: 700; color: #f5f7ff; letter-spacing: -0.02em; line-height: 1.25; }
.bm-msg { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: rgba(152, 162, 189, 0.9); }
.bm-details {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 16px; text-align: left;
  background: rgba(15, 17, 23, 0.4); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08);
}
.bm-drow { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.bm-drow > span { color: rgba(152, 162, 189, 0.8); }
.bm-dv { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bm-dv--pl { color: #24d970; animation: bot-rise .5s .35s ease-out both; }
.bm-dv--pl.is-down { color: #ff5f6d; }
.bm-dv--n { color: #ff7a18; }
.bm-dv--wl { color: #a855f7; }
.bm-dv--time { color: #00d2ff; }
.bm-rclose {
  width: 100%; padding: 14px 24px; border-radius: 12px; border: 1px solid var(--r-line);
  background: color-mix(in srgb, var(--r-ink) 15%, transparent); color: var(--r-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.bm-rclose:hover { background: color-mix(in srgb, var(--r-ink) 25%, transparent); transform: translateY(-2px); }
.bm-rclose:focus-visible { outline: 2px solid var(--r-ink); outline-offset: 2px; }
.bm-confetti { position: absolute; inset: -32px -40px; overflow: hidden; pointer-events: none; border-radius: 20px; }
.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: #24d970; --d: 0s;   --r: 380deg; }
.bm-confetti i:nth-child(2)  { --x: 13%; --c: #fcd34d; --d: .3s;  --r: -300deg; --t: 2.9s; }
.bm-confetti i:nth-child(3)  { --x: 19%; --c: #00d2ff; --d: .9s;  --r: 260deg; }
.bm-confetti i:nth-child(4)  { --x: 25%; --c: #ff7a18; --d: .15s; --r: -420deg; --t: 2.4s; }
.bm-confetti i:nth-child(5)  { --x: 31%; --c: #a855f7; --d: .6s;  --r: 340deg; }
.bm-confetti i:nth-child(6)  { --x: 37%; --c: #24d970; --d: 1.1s; --r: -280deg; --t: 3s; }
.bm-confetti i:nth-child(7)  { --x: 43%; --c: #fcd34d; --d: .45s; --r: 400deg; }
.bm-confetti i:nth-child(8)  { --x: 49%; --c: #00d2ff; --d: 0.05s; --r: -360deg; --t: 2.7s; }
.bm-confetti i:nth-child(9)  { --x: 55%; --c: #ff7a18; --d: .75s; --r: 300deg; }
.bm-confetti i:nth-child(10) { --x: 61%; --c: #a855f7; --d: .25s; --r: -390deg; --t: 2.5s; }
.bm-confetti i:nth-child(11) { --x: 67%; --c: #24d970; --d: 1s;   --r: 320deg; }
.bm-confetti i:nth-child(12) { --x: 73%; --c: #fcd34d; --d: .5s;  --r: -260deg; --t: 2.8s; }
.bm-confetti i:nth-child(13) { --x: 79%; --c: #00d2ff; --d: .1s;  --r: 410deg; }
.bm-confetti i:nth-child(14) { --x: 85%; --c: #ff7a18; --d: .85s; --r: -330deg; --t: 3.1s; }
.bm-confetti i:nth-child(15) { --x: 91%; --c: #a855f7; --d: .35s; --r: 290deg; }
.bm-confetti i:nth-child(16) { --x: 96%; --c: #24d970; --d: .65s; --r: -400deg; --t: 2.6s; }
.bm-confetti i:nth-child(17) { --x: 3%;  --c: #00d2ff; --d: 1.25s; --r: 350deg; }
.bm-confetti i:nth-child(18) { --x: 52%; --c: #fcd34d; --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: 76px; height: 76px; 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: #24d970; background: rgba(36, 217, 112, 0.12); box-shadow: 0 0 0 10px rgba(36, 217, 112, 0.05); }
/* Opening a real account: the deposit popup's shape, in Deriv's red, with the three steps. */
.bm-badge--real { color: #ff6b74; background: rgba(255, 68, 79, 0.14); box-shadow: 0 0 0 10px rgba(255, 68, 79, 0.05); }
.bm-real-why { margin: 0 auto 6px; max-width: 330px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--text); }
.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(--text); }
.bm-real-steps li::before {
  content: counter(step); display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 68, 79, 0.16); color: #ff6b74; font-size: 11px; font-weight: 800;
}
.bm-actions--real { flex-direction: column; }
.bm-btn--real { gap: 8px; background: #d92b36; border-color: #d92b36; color: #fff; }
.bm-btn--real:hover { border-color: #d92b36; filter: brightness(1.07); }
.bm-fund-note { margin: 12px auto 0; max-width: 330px; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: #fcd34d; }

@media (max-width: 768px) {
  .bm:has(> .bm-result:not([hidden])) { padding: 24px 28px; }
  .bm-result h2 { font-size: 20px; }
  .bm-msg { font-size: 14px; }
  .bm-ricon { width: 56px; height: 56px; }
  .bm-confetti { inset: -24px -28px; }
}
@media (max-width: 480px) {
  .bm:has(> .bm-result:not([hidden])) { padding: 20px 20px; }
  .bm-result h2 { font-size: 18px; }
  .bm-msg { font-size: 13px; margin-bottom: 16px; }
  .bm-ricon { width: 48px; height: 48px; margin-bottom: 16px; }
  .bm-ricon svg { width: 24px; height: 24px; }
  .bm-details { padding: 12px 14px; margin-bottom: 16px; }
  .bm-drow { font-size: 13px; }
  .bm-rclose { padding: 12px 20px; font-size: 14px; }
  .bm-confetti { inset: -20px; }
}
@media (max-width: 420px) {
  .bm { padding: 26px 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 (prefers-reduced-motion: reduce) {
  .primary-btn.btn-liquid-glow, .secondary-btn.btn-liquid-glow, .primary-btn.btn-liquid-glow::before, .secondary-btn.btn-liquid-glow::before,
  .tbal.is-live .tbal-live, .bot-now, .bot-now-k i, .history-item--enter, .history-item--enter.win, .history-item--enter.loss,
  .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 { animation: 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; }
}

/* What went wrong (bot.js mistakes): the run's figures past the risk guide, as points, inside
   the stop-loss and top-up popups, shown in full (the popup grows to hold them, nothing scrolls
   inside it), then the note as a green tip. While they show, the rest of the card goes compact
   (smaller icon and title, the details two by two). */
.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 rgba(255, 95, 109, 0.32); background: rgba(15, 17, 23, 0.5); }
.bm-why-h { margin: 0 0 5px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ff5f6d; }
.bm-why ul { margin: 0; padding: 0 0 0 14px; display: grid; gap: 4px; }
.bm-why li { font-size: 12px; line-height: 1.38; color: #e8ecf8; overflow-wrap: anywhere; }
.bm-why li::marker { color: #ff5f6d; }
.bm-why-tip { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(36, 217, 112, 0.34); background: rgba(36, 217, 112, 0.08); }
.bm-why-tip-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(36, 217, 112, 0.16); color: var(--green); }
.bm-why-tip p { margin: 0; font-size: 11.5px; line-height: 1.42; font-weight: 600; color: #e8ecf8; }
.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(--green); }
.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; }
/* The top-up popup is a small one: its badge goes beside the title while the points show. */
#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 rgba(36, 217, 112, 0.05); }
#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; }
#bmFund.has-why .bm-step { 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-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; }
}
/* A short screen: the popups with points set closer still, so all of each shows at once. */
@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; }
}

/* 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 Recent Trades: equalizer bars keep moving and a light runs
   round the card's edge until it trades again. */
.bot-wait[hidden] { display: none; }
.bot-wait {
  position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 14px 16px; border-radius: 12px; isolation: isolate;
  background: linear-gradient(135deg, rgba(0, 210, 255, 0.08), rgba(168, 85, 247, 0.07)), rgba(15, 17, 23, 0.6);
  animation: bot-wait-in .35s ease-out both;
}
.bot-wait::before {
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 210, 255, 0.15), rgba(0, 210, 255, 0.85), rgba(168, 85, 247, 0.85), rgba(0, 210, 255, 0.15)) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bot-wait-edge 2.6s linear infinite;
}
.bot-wait-eq { flex: none; display: flex; align-items: center; gap: 3px; width: 34px; height: 30px; }
.bot-wait-eq i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #00d2ff, #a855f7); transform-origin: 50% 50%; animation: bot-wait-eq 1.1s ease-in-out infinite; }
.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: 3px; min-width: 0; text-align: left; }
.bot-wait-t strong { font-size: 13px; line-height: 1.35; font-weight: 700; color: #e8ecf8; }
.bot-wait-t span { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
@keyframes bot-wait-eq { 0%, 100% { transform: scaleY(.25); opacity: .7; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes bot-wait-edge { to { background-position: 300% 0; } }
@keyframes bot-wait-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bot-wait-eq i, .bot-wait::before { animation-duration: 4s; } }