/* =========================================================
   Trading Evolution — Backtester (backtest.js). Bandeau sombre dans les deux thèmes (même famille que l'Economic
   Calendar, COT data et le Fed Rate Monitor) ; l'outil suit le thème du site dans un cadre à bordure lumineuse :
   panneau de réglages à gauche (collant sur ordinateur), résultats à droite, graphiques en canvas dont les couleurs
   sont lues dans les variables --bt-* ci-dessous.
   ========================================================= */

/* ---------- Bandeau ---------- */
.bt-hero {
  position: relative; isolation: isolate; overflow: hidden; margin-bottom: var(--s-12);
  border-radius: var(--r-xl); border: 1px solid rgba(96, 165, 250, .18);
  background: radial-gradient(120% 100% at 72% 40%, #0d1b3f 0%, #060a18 58%, #04060f 100%);
  box-shadow: 0 30px 80px -30px rgba(2, 8, 30, .7);
  color-scheme: dark; --ink: #eef2fa; --ink-2: #b9c3d9; --muted: #8a95ae; --line: rgba(255, 255, 255, .09);
}
.bt-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.bt-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 7, 18, .92) 0%, rgba(4, 7, 18, .62) 44%, rgba(4, 7, 18, .2) 78%, rgba(4, 7, 18, .4) 100%), linear-gradient(0deg, rgba(4, 7, 18, .72), transparent 40%); }
[dir="rtl"] .bt-hero::after { background: linear-gradient(270deg, rgba(4, 7, 18, .92) 0%, rgba(4, 7, 18, .62) 44%, rgba(4, 7, 18, .2) 78%, rgba(4, 7, 18, .4) 100%), linear-gradient(0deg, rgba(4, 7, 18, .72), transparent 40%); }
.bt-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-10); align-items: center; padding: clamp(1.5rem, .8rem + 3.4vw, 3.75rem); min-height: 480px; }
.bt-hero h1 { font-family: var(--f-disp); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.15rem); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: #fff; margin-bottom: var(--s-5); text-wrap: balance; text-shadow: 0 2px 24px rgba(4, 7, 18, .8); }
.bt-hero .lead { color: var(--ink-2); margin-bottom: var(--s-6); max-width: 38rem; text-shadow: 0 2px 18px rgba(4, 7, 18, .85); }
.bt-hero .eyebrow { color: #cfe0ff; background: rgba(59, 130, 246, .12); border-color: rgba(96, 165, 250, .3); box-shadow: none; }
.bt-hero .eyebrow .dot { background: #22c55e; }
.bt-hero .cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.bt-hero .cta-row .btn { min-width: 0; max-width: 100%; }
.bt-hero .cta-row .btn-g { color: #eef2fa; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.bt-hero .cta-row .btn-g:hover { background: rgba(255, 255, 255, .12); }
.bt-card {
  display: grid; gap: .1rem; margin: 0; padding: clamp(1rem, .8rem + 1vw, 1.5rem); list-style: none;
  background: rgba(8, 13, 28, .72); border: 1px solid rgba(96, 165, 250, .24); border-radius: var(--r-xl);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.bt-card li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .7rem 0; }
.bt-card li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.bt-card b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(59, 130, 246, .14); border: 1px solid rgba(96, 165, 250, .3); color: #8fb4ff; font-family: var(--f-mono); font-size: .95rem; }
.bt-card span { display: grid; gap: .1rem; color: #b9c3d9; font-size: var(--t-sm); line-height: 1.4; }
.bt-card strong { color: #fff; font-size: var(--t-base); }
@media (max-width: 900px) { .bt-hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; } }

/* ---------- Cadre de l'outil ---------- */
.bt .bt-tool-sec { max-width: none; }
.bt-frame {
  position: relative; border-radius: var(--r-xl); padding: 1px; margin-top: var(--s-5);
  background: linear-gradient(135deg, rgba(59, 130, 246, .55), rgba(34, 211, 238, .25) 40%, rgba(255, 74, 18, .3) 100%);
  box-shadow: 0 30px 70px -36px rgba(2, 8, 30, .6);
}
.bt-app {
  --bt-text: #0a1628; --bt-muted: #5d6b82; --bt-grid: rgba(10, 22, 40, .07); --bt-axis: rgba(10, 22, 40, .16); --bt-field: #fff; --bt-soft: #f4f7fc;
  --bt-up: #16a34a; --bt-dn: #e11d48; --bt-line: #2563eb; --bt-fill: rgba(37, 99, 235, .2); --bt-cross: rgba(10, 22, 40, .42);
  --bt-long: #2563eb; --bt-short: #ea580c; --bt-win: #16a34a; --bt-loss: #e11d48; --bt-pos: #2563eb;
  --bt-eq: #2563eb; --bt-bh: #94a3b8; --bt-dd: #e11d48; --bt-chip: #e8eef8;
  --bt-o1: #d97706; --bt-o2: #7c3aed; --bt-o3: #0891b2; --bt-o4: #db2777; --bt-o5: #059669;
  position: relative; min-height: 760px; padding: clamp(.75rem, .45rem + 1vw, 1.25rem); border-radius: calc(var(--r-xl) - 1px);
  background: var(--panel); color: var(--ink); font-size: var(--t-sm);
}
html[data-theme="dark"] .bt-app {
  --bt-text: #eef2fa; --bt-muted: #8a95ae; --bt-grid: rgba(255, 255, 255, .055); --bt-axis: rgba(255, 255, 255, .14); --bt-field: rgba(255, 255, 255, .04); --bt-soft: rgba(255, 255, 255, .03);
  --bt-up: #22c55e; --bt-dn: #f43f5e; --bt-line: #60a5fa; --bt-fill: rgba(96, 165, 250, .24); --bt-cross: rgba(255, 255, 255, .42);
  --bt-long: #60a5fa; --bt-short: #fb923c; --bt-win: #22c55e; --bt-loss: #f43f5e; --bt-pos: #60a5fa;
  --bt-eq: #60a5fa; --bt-bh: #64748b; --bt-dd: #f43f5e; --bt-chip: #1b2438;
  --bt-o1: #fbbf24; --bt-o2: #a78bfa; --bt-o3: #22d3ee; --bt-o4: #f472b6; --bt-o5: #34d399;
}
.bt-app:not(.is-ready) { display: grid; place-content: center; text-align: center; color: var(--muted); }
.bt-loading { display: grid; justify-items: center; gap: .8rem; }
.bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.bt-acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.bt-act { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .35rem .8rem; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bt-field); color: var(--ink-2); font: 600 var(--t-xs) var(--f-body); cursor: pointer; transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.bt-act:hover:not(:disabled) { border-color: var(--blue-200); color: var(--ink); }
.bt-act:disabled { opacity: .45; cursor: default; }
.bt-act-q { color: var(--muted); }
.bt-pop-w { position: relative; }
.bt-pop { position: absolute; z-index: 20; top: calc(100% + .4rem); inset-inline-end: 0; width: min(340px, 86vw); max-height: 360px; overflow: auto; padding: .4rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--pop); box-shadow: 0 24px 60px -24px rgba(2, 8, 30, .5); }
.bt-pop ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.bt-pop li { display: flex; align-items: center; gap: .3rem; }
.bt-pop-load { flex: 1; min-width: 0; display: grid; gap: .1rem; padding: .5rem .6rem; border: 0; border-radius: var(--r-md); background: none; color: var(--ink); text-align: start; cursor: pointer; font: inherit; }
.bt-pop-load:hover { background: var(--bt-soft); }
.bt-pop-load strong { font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pop-load span { color: var(--muted); font-size: var(--t-xs); }
.bt-pop .bt-note { padding: .6rem; margin: 0; }

/* contrôle segmenté */
.bt-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bt-soft); max-width: 100%; }
.bt-seg-b { min-height: 30px; padding: .3rem .85rem; border: 0; border-radius: var(--r-full); background: none; color: var(--ink-2); font: 600 var(--t-xs) var(--f-body); cursor: pointer; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.bt-seg-b:hover { color: var(--ink); }
.bt-seg-b[aria-checked="true"] { background: var(--blue); color: #fff; box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .8); }
.bt-mode .bt-seg-b { min-height: 36px; padding: .4rem 1.1rem; font-size: var(--t-sm); }
.bt-seg-b:focus-visible, .bt-act:focus-visible, .bt-tab:focus-visible, .bt-tool:focus-visible, .bt-add:focus-visible, .bt-del:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 2px; }

/* ---------- Grille ---------- */
.bt-grid { display: grid; grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: clamp(.9rem, .5rem + 1vw, 1.4rem); align-items: start; margin-top: 1rem; }
.bt-side { position: sticky; top: 84px; display: grid; gap: .6rem; max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; padding-inline-end: .2rem; scrollbar-width: thin; }
.bt-main { position: relative; min-width: 0; display: grid; gap: .9rem; align-content: start; }
@media (max-width: 1060px) {
  .bt-grid { grid-template-columns: minmax(0, 1fr); }
  .bt-side { position: static; max-height: none; overflow: visible; padding: 0; }
}

/* sections du panneau */
.bt-sec { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bt-soft); }
.bt-sec > summary { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); font-size: var(--t-sm); letter-spacing: .01em; }
.bt-sec > summary::-webkit-details-marker { display: none; }
.bt-sec > summary::after { content: ''; margin-inline-start: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--d-fast) var(--ease); }
.bt-sec[open] > summary::after { transform: rotate(225deg); }
.bt-sec-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--blue-50); color: var(--blue-300); font: 700 11px var(--f-mono); }
.bt-sec-b { display: grid; gap: .75rem; padding: 0 .9rem .9rem; }
.bt-f { display: grid; gap: .3rem; min-width: 0; }
.bt-f-l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bt-in { width: 100%; min-width: 0; height: 36px; padding: 0 .65rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bt-field); color: var(--ink); font: 500 var(--t-sm) var(--f-body); font-variant-numeric: tabular-nums; }
.bt-in:focus { outline: 2px solid var(--blue-200); outline-offset: 1px; border-color: var(--blue-200); }
select.bt-in { padding-inline-end: 1.6rem; }
.bt-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bt-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bt-pair { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: .45rem; }
.bt-check { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; line-height: 1.4; }
.bt-check input { width: 17px; height: 17px; margin-top: .1rem; accent-color: var(--blue); flex: none; }
.bt-check[hidden] { display: none; }
.bt-note { margin: 0; color: var(--muted); font-size: var(--t-xs); line-height: 1.5; }
.bt-note a { color: var(--blue-300); }
.bt-note-q { padding: .55rem .7rem; border-radius: var(--r-md); background: var(--blue-50); color: var(--ink-2); }
.bt-sess[hidden] { display: none; }

/* données */
.bt-drop { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 1.1rem .8rem; border-radius: var(--r-lg); border: 1.5px dashed var(--blue-200); background: var(--blue-50); color: var(--ink-2); text-align: center; cursor: pointer; transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.bt-drop:hover, .bt-drop.is-over { background: var(--blue-100); border-color: var(--blue); }
.bt-drop:focus-within { outline: 2px solid var(--blue-200); outline-offset: 2px; }
.bt-drop strong { color: var(--ink); font-size: var(--t-sm); }
.bt-drop span { font-size: var(--t-xs); color: var(--muted); }
.bt-drop-ico { color: var(--blue-300); }
.bt-fileinfo { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.bt-fileinfo p { margin: 0; }
.bt-fileinfo ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); }

/* règles */
.bt-rules { display: grid; gap: .65rem; }
.bt-grp { display: grid; gap: .5rem; padding: .7rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bt-field); }
.bt-grp-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.bt-grp-t { font-weight: 700; font-size: var(--t-xs); color: var(--ink); }
.bt-grp-longEntry .bt-grp-t, .bt-grp-longExit .bt-grp-t { color: var(--bt-long); }
.bt-grp-shortEntry .bt-grp-t, .bt-grp-shortExit .bt-grp-t { color: var(--bt-short); }
.bt-grp .bt-seg-b { min-height: 24px; padding: .15rem .6rem; font-size: 11px; }
.bt-rl { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.bt-rule { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: .55rem .55rem .55rem 1.9rem; border-radius: var(--r-md); background: var(--bt-soft); border: 1px solid var(--line-2); counter-increment: r; }
.bt-rule::before { content: counter(r); position: absolute; inset-inline-start: .55rem; top: .7rem; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-50); color: var(--blue-300); font: 700 10px var(--f-mono); }
[dir="rtl"] .bt-rule { padding: .55rem 1.9rem .55rem .55rem; }
.bt-rule-empty { color: var(--muted); font-size: var(--t-xs); padding: .2rem 0; }
.bt-opd { display: flex; gap: .3rem; min-width: 0; }
.bt-opd .bt-in-k { flex: 1 1 auto; }
.bt-pin { flex: 0 0 auto; width: 56px; height: 32px; padding: 0 .4rem; text-align: center; }
.bt-pin-v { width: 96px; flex: 1 1 96px; }
.bt-in-op { height: 32px; color: var(--blue-300); font-weight: 700; }
.bt-rule .bt-in-k { height: 32px; }
.bt-del { position: absolute; top: .45rem; inset-inline-end: .45rem; width: 24px; height: 24px; display: none; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.bt-rule .bt-del { display: grid; }
.bt-rule .bt-opd:first-child { padding-inline-end: 1.6rem; }
.bt-del:hover { background: rgba(225, 29, 72, .12); color: var(--bt-loss); }
.bt-pop .bt-del { position: static; display: grid; flex: none; }
.bt-add { justify-self: start; min-height: 30px; padding: .25rem .7rem; border-radius: var(--r-full); border: 1px dashed var(--blue-200); background: none; color: var(--blue-300); font: 600 var(--t-xs) var(--f-body); cursor: pointer; }
.bt-add:hover { background: var(--blue-50); }

/* lancement */
.bt-runbar { position: sticky; bottom: 0; z-index: 2; display: grid; gap: .3rem; justify-items: center; padding: .6rem 0 .2rem; background: linear-gradient(0deg, var(--panel) 75%, transparent); }
.bt-run { width: 100%; justify-content: center; gap: .55rem; min-height: 48px; font-size: var(--t-base); }
.bt-run.is-dirty { animation: bt-pulse 1.8s var(--ease) infinite; }
@keyframes bt-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45); } 70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }
.bt-kbd { color: var(--muted); font-size: 11px; }
.bt-runbar[hidden] { display: none; }

/* ---------- Résultats ---------- */
.bt-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bt-title h3 { margin: 0; font-family: var(--f-disp); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.02em; color: var(--ink); }
.bt-chip { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: var(--r-full); background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-300); font: 700 var(--t-xs) var(--f-body); }
.bt-chip-q { background: var(--bt-soft); border-color: var(--line); color: var(--ink-2); }
.bt-meta { margin: -.4rem 0 0; color: var(--muted); font-size: var(--t-xs); }
.bt-warn { padding: .65rem .85rem; border-radius: var(--r-md); border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); color: var(--ink-2); font-size: var(--t-xs); }
.bt-warn ul { margin: 0; padding-inline-start: 1.05rem; display: grid; gap: .2rem; }
.bt-warn[hidden] { display: none; }
.bt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.bt-rp-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bt-kpis[hidden] { display: none; }
.bt-kpi { display: grid; gap: .15rem; align-content: start; min-width: 0; padding: .75rem .8rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.bt-kpi-l { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-kpi-v { font-family: var(--f-mono); font-size: clamp(1.05rem, .9rem + .55vw, 1.4rem); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.bt-kpi-s { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-app .is-up { color: var(--bt-win); }
.bt-app .is-down { color: var(--bt-loss); }
@media (max-width: 760px) { .bt-kpis, .bt-rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bt-tabs { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.bt-tabs::-webkit-scrollbar { display: none; }
.bt-tabs[hidden] { display: none; }
.bt-tab { flex: none; position: relative; min-height: 40px; padding: .5rem .9rem; border: 0; background: none; color: var(--muted); font: 600 var(--t-sm) var(--f-body); cursor: pointer; white-space: nowrap; }
.bt-tab:hover { color: var(--ink); }
.bt-tab[aria-selected="true"] { color: var(--ink); }
.bt-tab[aria-selected="true"]::after { content: ''; position: absolute; inset-inline: .7rem; bottom: -1px; height: 2px; border-radius: 2px; background: var(--blue); }
.bt-pane { min-width: 0; display: grid; gap: .6rem; }
.bt-pane[hidden] { display: none; }

.bt-chart-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.bt-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--muted); font-size: var(--t-xs); }
.bt-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bt-lg { display: inline-block; width: 10px; height: 10px; }
.bt-lg-long { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--bt-long); }
.bt-lg-short { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--bt-short); }
.bt-lg-win { border-radius: 50%; background: var(--bt-win); }
.bt-lg-loss { border-radius: 50%; background: var(--bt-loss); }
.bt-tools { display: flex; gap: .3rem; }
.bt-tool { min-width: 32px; height: 32px; padding: 0 .6rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bt-field); color: var(--ink-2); font: 700 var(--t-sm) var(--f-body); cursor: pointer; }
.bt-tool:hover { color: var(--ink); border-color: var(--blue-200); }
.bt-tool-w { font-size: var(--t-xs); }
.bt-cv { position: relative; height: clamp(360px, 58vh, 580px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bt-field); overflow: hidden; }
.bt-cv-eq { height: clamp(320px, 50vh, 480px); }
.bt-canvas { display: block; touch-action: pan-y; cursor: crosshair; outline: none; }
.bt-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-200); }
.bt-readout { position: absolute; top: 8px; inset-inline-start: 10px; inset-inline-end: 80px; display: flex; flex-wrap: wrap; gap: .1rem .75rem; pointer-events: none; font: 500 11px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bt-readout b { color: var(--ink); font-weight: 700; }
.bt-readout span { display: inline-flex; align-items: center; gap: .3rem; }
.bt-readout i { display: inline-block; width: 8px; height: 3px; border-radius: 2px; }
.bt-chart-hint { text-align: end; }

/* tableaux */
.bt-table-w { max-width: 100%; overflow: auto; max-height: 560px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.bt-table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.bt-table th, .bt-table td { padding: .5rem .65rem; text-align: end; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.bt-table th:first-child, .bt-table td:first-child { text-align: start; }
.bt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--pop); color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bt-table thead th button { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.bt-table tbody tr:hover { background: var(--bt-soft); }
.bt-table tbody tr[tabindex] { cursor: pointer; }
.bt-table td { font-family: var(--f-mono); color: var(--ink-2); }
.bt-table .bt-long { color: var(--bt-long); font-weight: 700; font-family: var(--f-body); }
.bt-table .bt-short { color: var(--bt-short); font-weight: 700; font-family: var(--f-body); }
.bt-tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.bt-pager { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--t-xs); }
.bt-empty { padding: 1.6rem 1rem; margin: 0; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.bt-heat td { text-align: center; color: var(--ink); }
.bt-heat .bt-hm.is-up { background: rgba(22, 163, 74, var(--a)); color: var(--ink); }
.bt-heat .bt-hm.is-down { background: rgba(225, 29, 72, var(--a)); color: var(--ink); }
.bt-heat .bt-hm-t { font-weight: 700; }
.bt-heat .bt-hm-na { background: none; }
.bt-heat tbody th { text-align: start; color: var(--ink); font-family: var(--f-mono); }
.bt-st tbody th { text-align: start; font-weight: 500; color: var(--ink-2); font-family: var(--f-body); font-size: var(--t-xs); text-transform: none; letter-spacing: 0; }
.bt-st .bt-st-h th { padding-top: .9rem; background: var(--bt-soft); color: var(--blue-300); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bt-st td { color: var(--ink); }

/* attente, message, rejeu */
.bt-busy { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: .7rem; border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--ink-2); font-weight: 600; }
.bt-busy[hidden] { display: none; }
.bt-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--blue-100); border-top-color: var(--blue); animation: bt-spin .8s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt-toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: .65rem 1.1rem; border-radius: var(--r-full); background: #0b1224; color: #fff; font-size: var(--t-sm); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); max-width: calc(100vw - 32px); }
.bt-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.bt-rp-ctl, .bt-rp-trade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.bt-rp-ctl .btn, .bt-rp-trade .btn { min-width: 0; justify-content: center; padding-inline: .5rem; min-height: 40px; font-size: var(--t-sm); }
.bt-buy { background: var(--bt-win); border-color: var(--bt-win); color: #fff; }
.bt-sell { background: var(--bt-loss); border-color: var(--bt-loss); color: #fff; }
.bt-buy:hover, .bt-sell:hover { filter: brightness(1.08); }
.bt-rp-trades { display: grid; gap: .6rem; }
.bt-sec[hidden] { display: none; }

@media (max-width: 520px) {
  .bt-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-app { min-height: 0; }
  .bt-cv { height: 380px; }
  .bt-readout { inset-inline-end: 12px; font-size: 10px; }
  .bt-chart-hint { text-align: start; }
}
@media (prefers-reduced-motion: reduce) { .bt-run.is-dirty, .bt-spin { animation: none; } }

/* ---------- Guide ---------- */
.bt-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: s; }
.bt-steps-grid li { position: relative; padding: var(--s-5) var(--s-5) var(--s-5) 3.6rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); counter-increment: s; color: var(--ink-2); }
.bt-steps-grid li::before { content: counter(s); position: absolute; inset-inline-start: var(--s-5); top: var(--s-5); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--blue); color: #fff; font: 700 13px var(--f-mono); }
[dir="rtl"] .bt-steps-grid li { padding: var(--s-5) 3.6rem var(--s-5) var(--s-5); }
.bt-steps-grid strong { display: block; color: var(--ink); margin-bottom: .25rem; }
.bt-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.bt-metric { padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); }
.bt-metric h3 { margin: 0 0 .35rem; font-size: var(--t-base); color: var(--ink); }
.bt-metric p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.bt-metric code { font-family: var(--f-mono); font-size: .85em; color: var(--blue-300); }
.bt-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: clamp(1.2rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); border: 1px solid rgba(96, 165, 250, .25); background: radial-gradient(120% 140% at 85% 0%, #10224d 0%, #070b19 62%); color: #eef2fa; color-scheme: dark; }
.bt-cta h2 { margin: 0 0 .4rem; color: #fff; }
.bt-cta p { margin: 0; color: #b9c3d9; }
.bt-cta .btn { white-space: normal; text-align: center; }
@media (max-width: 720px) { .bt-cta { grid-template-columns: minmax(0, 1fr); } }