/* HyperTrade Web — la page Trading (v0.03) : en-tête du marché, watchlist, graphique, carnet, ticket, onglets du bas. */

.ht-trade { display: flex; flex-direction: column; gap: .9rem; }

/* ── en-tête du marché ─────────────────────────────────────────────────────────────────────── */
.ht-mkt { display: flex; flex-direction: row; align-items: center; gap: 1.6rem; padding: .7rem 1.1rem; flex-wrap: wrap; }
/* un avis à la place du marché (aucun compte, Alpaca en papier…) : de la hauteur de la barre, pas d'un bloc vide */
.ht-mkt > .ht-none { padding: .45rem 0; text-align: left; flex: 1; }
.ht-mkt .sym { display: flex; align-items: center; gap: .45rem; }
.ht-mkt .sym b { font-size: 1.15rem; color: var(--ht-heading-color); font-family: var(--ht-font-sans-serif); }
.ht-mkt .px { font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700;
  color: var(--ht-heading-color); transition: color .3s; min-width: 8.5rem; }
.ht-mkt .px.up { color: var(--ht-success); }
.ht-mkt .px.dn { color: var(--ht-danger); }
.ht-mkt .st { display: flex; flex-direction: column; line-height: 1.25; }
.ht-mkt .st span { font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ht-gray-500); }
.ht-mkt .st b { font-size: .82rem; font-weight: 600; color: var(--ht-gray-900); font-variant-numeric: tabular-nums; }

/* ── la grille du terminal : watchlist · graphique · carnet · ticket ───────────────────────── */
/* v0.57 : en flex (plus en grille) pour que chaque panneau se replie et laisse sa place au graphique */
.ht-term { display: flex; gap: .9rem; height: max(38rem, calc(100vh - var(--ht-top-h) - 9.5rem)); }
.ht-term > .card { min-height: 0; display: flex; flex-direction: column; }
.ht-term > .ht-wl { flex: 0 0 13.5rem; }
.ht-term > .ht-chartcard { flex: 1 1 0; min-width: 0; }
.ht-term > .ht-book { flex: 0 0 13rem; }
.ht-term > .ht-ticket { flex: 0 0 20rem; }
.ht-term.no-wl > .ht-wl, .ht-term.no-book > .ht-book, .ht-term.no-tk > .ht-ticket { display: none !important; }
.ht-panels { display: inline-flex; gap: 1px; padding: 2px; border-radius: .45rem; background: var(--ht-gray-100); margin-left: .4rem; vertical-align: middle; }
.ht-panels button { all: unset; cursor: pointer; font-size: .64rem; font-weight: 700; padding: .14rem .45rem; border-radius: .32rem; color: var(--ht-gray-500); }
.ht-panels button.on { background: var(--ht-card-bg); color: var(--ht-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.ht-panels button:hover { color: var(--ht-primary); }

/* watchlist */
.ht-wl-h { padding: .7rem .7rem .5rem; display: flex; flex-direction: column; gap: .5rem; border-bottom: 1px solid var(--ht-border-color); }
.ht-find { height: 1.9rem; border: 1px solid var(--ht-gray-300); border-radius: .6rem; background: var(--ht-gray-100); color: var(--ht-gray-900);
  font-size: .78rem; padding: .25rem .75rem; outline: none; width: 100%; }
.ht-find:focus { background: var(--ht-card-bg); border-color: rgba(var(--ht-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--ht-primary-rgb), .12); }
.ht-wl-list { overflow-y: auto; padding: .3rem; flex: 1; }
.ht-wl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .4rem; width: 100%;
  border: 0; background: none; text-align: left; padding: .4rem .55rem; border-radius: .55rem; color: var(--ht-gray-900); }
.ht-wl-row:hover { background: rgba(var(--ht-primary-rgb), .06); }
.ht-wl-row:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: -2px; }
.ht-wl-row.active { background: rgba(var(--ht-primary-rgb), .11); box-shadow: inset 3px 0 0 var(--ht-primary); }
.ht-wl-row .c { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .8rem; }
.ht-wl-row .c b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-wl-row .c small { font-size: .6rem; color: var(--ht-gray-500); font-weight: 600; }
.ht-wl-row .c .held { width: 6px; height: 6px; border-radius: 50%; background: var(--ht-primary); flex: none; }
/* v1.60 : sans position, la pastille garde sa place (invisible) : les noms restent alignés */
.ht-wl-row .c .held.off { visibility: hidden; }
.ht-wl-row .p { text-align: right; font-size: .78rem; font-weight: 600; }
.ht-wl-row .g { grid-column: 2; text-align: right; font-size: .68rem; font-weight: 600; }

/* graphique */
.ht-chartcard { padding: .6rem .6rem .4rem; }
/* la barre d'outils de dessin collée au bord gauche de la carte, à peine plus large que ses boutons (v1.84 : avant, la marge de la
   carte et une colonne plus large faisaient un vide à gauche des icônes) */
.ht-chartcard .ht-cemb .ht-ctools { width: 2.35rem; margin-left: -.6rem; }
.ht-chart-tools { display: flex; align-items: center; gap: .9rem; padding: 0 .3rem .5rem; }
.ht-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--ht-gray-700); cursor: pointer; user-select: none; margin: 0; }
.ht-check input { accent-color: var(--ht-primary); margin: 0; flex: none; }
.ht-chart-tools .ht-check .ht-lbl { margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.ht-ohlc { display: flex; gap: .7rem; font-size: .7rem; color: var(--ht-gray-500); font-family: var(--ht-font-monospace); }
.ht-ohlc b { color: var(--ht-gray-900); font-weight: 600; }
.ht-candles-wrap { flex: 1; min-height: 0; position: relative; display: flex; }
.ht-candles { flex: 1; min-height: 0; position: relative; cursor: crosshair; user-select: none; overscroll-behavior: contain; }
.ht-candles.dragging { cursor: grabbing; }
/* ── v2.07 : les onglets et le multi-graphique (chart/multi.js) ── */
.ht-mcbar { display: flex; align-items: center; gap: .6rem; min-height: 1.6rem; margin: -.2rem 0 .3rem; position: relative; }
/* v3.26 : Liste / Carnet / Trade au bout de la barre des onglets, à côté des dispositions (avant : dans la barre d’outils du graphique) */
.ht-mcrow { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 .3rem; }
.ht-mcrow > .ht-mcbar { flex: 1; min-width: 0; margin: 0; }
.ht-mcrow .ht-panels { margin-left: 0; }
.ht-mctabs { display: flex; align-items: center; gap: .2rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ht-mctab { display: inline-flex; align-items: center; flex: none; border-radius: .4rem; border: 1px solid transparent; }
.ht-mctab button { all: unset; box-sizing: border-box; cursor: pointer; padding: .1rem .5rem; font-size: .72rem; font-weight: 600; color: var(--ht-gray-600); white-space: nowrap; }
.ht-mctab button i { font-style: normal; font-size: .6rem; padding: 0 .3rem; margin-left: .15rem; border-radius: .6rem; background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); }
.ht-mctab:hover button { color: var(--ht-body-color); }
.ht-mctab.on { background: rgba(var(--ht-primary-rgb), .1); border-color: rgba(var(--ht-primary-rgb), .35); }
.ht-mctab.on button { color: var(--ht-primary); }
.ht-mctab button.x { padding: .1rem .4rem .1rem 0; font-size: .6rem; font-weight: 400; color: var(--ht-gray-500); }
.ht-mctab button.x:hover { color: var(--ht-danger); }
.ht-mcadd { all: unset; cursor: pointer; flex: none; padding: 0 .45rem; border-radius: .35rem; font-size: .9rem; line-height: 1.4; color: var(--ht-gray-600); }
.ht-mcadd:hover, .ht-mcadd:focus-visible { color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .08); }
.ht-mclay { display: flex; align-items: center; gap: .1rem; flex: none; position: relative; }
.ht-mclay > button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .3rem; border-radius: .3rem; color: var(--ht-gray-600); font-size: .7rem; }
.ht-mclay > button:hover, .ht-mclay > button:focus-visible { color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .07); }
.ht-mclay > button.on { color: var(--ht-primary); background: rgba(var(--ht-primary-rgb), .13); }
.ht-mcmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: 17rem; padding: .55rem .65rem; background: var(--ht-card-bg); border: 1px solid var(--ht-border-color);
  border-radius: .5rem; box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .25); font-size: .76rem; }
.ht-mcmenu .ttl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-gray-500); margin-bottom: .35rem; }
.ht-mcmenu .ck { display: flex; align-items: center; gap: .45rem; padding: .18rem 0; cursor: pointer; color: var(--ht-body-color); }
.ht-mcmenu .hint { font-size: .66rem; color: var(--ht-gray-600); margin-top: .45rem; line-height: 1.35; }
.ht-mgrid { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.ht-mgrid[data-grid="2v"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ht-mgrid[data-grid="2h"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ht-mgrid[data-grid="3"] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ht-mgrid[data-grid="3"] > .ht-mcv:first-child { grid-row: 1 / span 2; }
.ht-mgrid[data-grid="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ht-mcv { position: relative; min-width: 0; min-height: 0; display: flex; }
.ht-mcv.multi { border: 1px solid var(--ht-border-color); border-radius: .35rem; overflow: hidden; }
.ht-mcv.multi.on { border-color: var(--ht-primary); box-shadow: 0 0 0 1px rgba(var(--ht-primary-rgb), .35); }
.ht-mcv.multi:not(.on) { cursor: pointer; }
.ht-mcv.multi:not(.on):hover { border-color: rgba(var(--ht-primary-rgb), .5); }
.ht-mbody { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; }
.ht-mbody > * { flex: 1; min-width: 0; }
.ht-mlbl { position: absolute; top: 4px; left: 6px; z-index: 5; pointer-events: none; font-size: .7rem; color: var(--ht-gray-600); padding: .05rem .35rem; border-radius: .25rem;
  background: color-mix(in srgb, var(--ht-card-bg) 80%, transparent); }
.ht-mlbl b { color: var(--ht-body-color); }
.ht-mlbl:empty { display: none; }
#tr-zoom .btn { min-width: 1.8rem; font-weight: 700; }
.ht-live { position: absolute; right: 78px; bottom: 26px; border: 1px solid rgba(var(--ht-primary-rgb), .4); background: var(--ht-card-bg); color: var(--ht-primary);
  font-size: .7rem; font-weight: 700; border-radius: 1rem; padding: .15rem .6rem; box-shadow: var(--ht-box-shadow-sm); }
.ht-live:hover { background: rgba(var(--ht-primary-rgb), .1); }
.ht-live:focus-visible { outline: 2px solid var(--ht-primary); }
.ht-cs { display: block; font-family: var(--ht-font-monospace); }
.ht-cs .g { stroke: var(--ht-gray-200); stroke-width: 1; }
.ht-cs .ax { fill: var(--ht-gray-500); font-size: 10px; }
.ht-cs .cu, .ht-cs .wu { fill: var(--ht-success); stroke: var(--ht-success); }
.ht-cs .cd, .ht-cs .wd { fill: var(--ht-danger); stroke: var(--ht-danger); }
.ht-cs .vu { fill: rgba(var(--ht-success-rgb), .25); }
.ht-cs .vd { fill: rgba(var(--ht-danger-rgb), .25); }
.ht-cs .ln line { stroke-width: 1; stroke-dasharray: 5 4; stroke: var(--ln-c); }
/* les étiquettes suivent le thème : fond teinté de la couleur de la ligne, texte dans cette couleur (jamais blanc) */
.ht-cs .ln { --ln-c: var(--ht-gray-700); }
.ht-cs .ln .tag { fill: color-mix(in srgb, var(--ln-c) 16%, var(--ht-card-bg)); stroke: var(--ln-c); stroke-width: 1; }
.ht-cs .ln text { font-size: 10px; font-weight: 700; fill: var(--ln-c); }
.ht-cs .ln.entry { --ln-c: var(--ht-primary); }
.ht-cs .ln.entry.win { --ln-c: var(--ht-success); }
.ht-cs .ln.entry.lose { --ln-c: var(--ht-danger); }
.ht-cs .ln.entry line { stroke: var(--ht-primary); }
.ht-cs .ln.tp { --ln-c: var(--ht-success); }
.ht-cs .ln.sl { --ln-c: var(--ht-danger); }
.ht-cs .ln.ord { --ln-c: var(--ht-gray-700); }
.ht-cs .ln.draft { --ln-c: var(--ht-warning); } .ht-cs .ln.draft line { stroke-dasharray: 2 3; }
.ht-cs .ln.draft.tp { --ln-c: var(--ht-success); } .ht-cs .ln.draft.sl { --ln-c: var(--ht-danger); }
.ht-cs .ln.draft .tag { opacity: .85; }
.ht-cs .ln.last line { stroke-dasharray: 1 3; }
.ht-cs .ln.last.up { --ln-c: var(--ht-success); }
.ht-cs .ln.last.dn { --ln-c: var(--ht-danger); }
.ht-cs .xh line { stroke: var(--ht-gray-500); stroke-dasharray: 3 3; }
.ht-cs .xh .tag { fill: var(--ht-gray-800); }
.ht-cs .xh text { fill: var(--ht-card-bg); font-size: 10px; font-weight: 700; }

/* carnet */
.ht-book { padding: .6rem .5rem; font-size: .72rem; }
.ht-book-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 .3rem .4rem; font-weight: 600; color: var(--ht-heading-color); font-size: .82rem; }
.ht-book-cols, .ht-bk { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .2rem; padding: 0 .3rem; }
.ht-book-cols { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ht-gray-500); padding-bottom: .25rem; }
.ht-book-cols span + span, .ht-bk span + span { text-align: right; }
#tr-book { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; }
.ht-bk { position: relative; border: 0; width: 100%; background: none; font-family: var(--ht-font-monospace); font-variant-numeric: tabular-nums;
  padding-top: .12rem; padding-bottom: .12rem; color: var(--ht-gray-800); border-radius: .25rem; font-size: .7rem; }
.ht-bk::before { content: ""; position: absolute; right: 0; top: 1px; bottom: 1px; width: var(--w); border-radius: .2rem; }
.ht-bk span { position: relative; }
.ht-bk.ask span:first-child { color: var(--ht-danger); }
.ht-bk.bid span:first-child { color: var(--ht-success); }
.ht-bk.ask::before { background: rgba(var(--ht-danger-rgb), .1); }
.ht-bk.bid::before { background: rgba(var(--ht-success-rgb), .1); }
.ht-bk:hover { background: var(--ht-gray-100); }
.ht-spread { display: flex; justify-content: space-between; align-items: baseline; padding: .35rem .3rem; margin: .2rem 0;
  border-top: 1px solid var(--ht-border-color); border-bottom: 1px solid var(--ht-border-color); }
.ht-spread b { font-size: .9rem; }
.ht-spread span { font-size: .62rem; color: var(--ht-gray-500); }

/* ── ticket ────────────────────────────────────────────────────────────────────────────────── */
.ht-ticket { padding: .8rem .9rem .9rem; }
.ht-tk-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -.9rem; padding: 0 .9rem; }
.ht-tk-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.ht-tk-h h2 { font-size: .95rem; margin: 0; }
.ht-tklock { border: 1px solid rgba(var(--ht-success-rgb), .35); background: rgba(var(--ht-success-rgb), .1); color: var(--ht-success);
  font-size: .7rem; font-weight: 700; border-radius: 1rem; padding: .15rem .6rem; }
.ht-tklock.on { border-color: rgba(var(--ht-warning-rgb), .4); background: rgba(var(--ht-warning-rgb), .12); color: var(--ht-warning); }
.ht-tklock:focus-visible { outline: 2px solid var(--ht-primary); }
.ht-tk-sec { padding: .55rem 0; border-top: 1px solid var(--ht-border-color); }
.ht-lbl { display: block; font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ht-gray-600); margin-bottom: .3rem; }
.ht-accpick { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.ht-accchip { display: inline-flex; align-items: center; border: 1px solid var(--ht-border-color); background: var(--ht-card-bg); color: var(--ht-gray-700);
  font-size: .64rem; font-weight: 600; border-radius: 1rem; padding: .08rem .45rem; line-height: 1.35; }
.ht-accchip .acct-dot { margin-right: .25rem; opacity: .45; width: 6px; height: 6px; }
.ht-accchip.on { border-color: rgba(var(--ht-primary-rgb), .45); background: rgba(var(--ht-primary-rgb), .1); color: var(--ht-primary); }
.ht-accchip.on .acct-dot { opacity: 1; }
.ht-accchip:disabled { opacity: .5; cursor: not-allowed; }
.ht-accchip small { font-size: .6rem; color: var(--ht-warning); margin-left: .25rem; }
.ht-accchip:focus-visible { outline: 2px solid var(--ht-primary); }

/* interrupteur simple */
.ht-switch { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; color: var(--ht-gray-700); cursor: pointer; user-select: none; margin: 0; position: relative; }
/* v3.02 : la case cachée reste SUR l'interrupteur — ailleurs (le haut d'un panneau), un clic la mettait au point et faisait défiler le panneau */
.ht-switch input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ht-switch span { width: 1.9rem; height: 1.05rem; border-radius: 1rem; background: var(--ht-gray-300); position: relative; transition: background .15s; flex: none; }
.ht-switch span::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .75rem; height: .75rem; border-radius: 50%; background: #fff;
  transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ht-switch input:checked + span { background: var(--ht-primary); }
.ht-switch input:checked + span::after { transform: translateX(.85rem); }
.ht-switch input:focus-visible + span { outline: 2px solid var(--ht-primary); outline-offset: 2px; }

.ht-tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--ht-border-color); }
.ht-inp { display: flex; align-items: stretch; border: 1px solid var(--ht-gray-300); border-radius: .5rem; background: var(--ht-card-bg); overflow: hidden; }
.ht-inp:focus-within { border-color: rgba(var(--ht-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--ht-primary-rgb), .12); }
.ht-inp input { border: 0; outline: none; background: transparent; color: var(--ht-gray-900); min-width: 0; flex: 1; padding: .32rem .5rem;
  font-family: var(--ht-font-monospace); font-size: .8rem; width: 0; }
.ht-inp input::placeholder { color: var(--ht-gray-500); font-family: var(--ht-body-font-family); }
.ht-inp-btn { border: 0; border-left: 1px solid var(--ht-border-color); background: var(--ht-gray-100); color: var(--ht-gray-700); font-size: .64rem; font-weight: 600; padding: 0 .45rem; }
.ht-inp-btn:hover { color: var(--ht-primary); }
.ht-inp-pre { display: grid; place-items: center; padding: 0 .5rem; font-size: .64rem; font-weight: 800; min-width: 2.6rem; }
.ht-inp-pre.tp { background: rgba(var(--ht-success-rgb), .12); color: var(--ht-success); }
.ht-inp-pre.sl { background: rgba(var(--ht-danger-rgb), .12); color: var(--ht-danger); }
.ht-inp-suf { display: grid; place-items: center; padding: 0 .5rem; font-size: .66rem; color: var(--ht-gray-500); font-family: var(--ht-font-monospace); white-space: nowrap; }
.ht-unit { display: flex; border-left: 1px solid var(--ht-border-color); }
.ht-unit button { border: 0; background: var(--ht-gray-100); color: var(--ht-gray-600); font-size: .62rem; font-weight: 700; padding: 0 .4rem; }
.ht-unit button.active { background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); }
.ht-hint { font-size: .62rem; color: var(--ht-gray-500); margin-top: .2rem; }
.ht-quick { display: flex; gap: .2rem; margin-top: .3rem; }
.ht-quick button { flex: 1; border: 1px solid var(--ht-border-color); background: var(--ht-gray-100); color: var(--ht-gray-700); font-size: .6rem; font-weight: 600;
  border-radius: .3rem; padding: .05rem 0; }
.ht-quick button:hover { color: var(--ht-primary); border-color: rgba(var(--ht-primary-rgb), .4); }
.ht-otype { display: flex; gap: 2px; padding: 2px; margin-bottom: .3rem; border-radius: .45rem; background: var(--ht-gray-100); }
/* la colonne de droite (Quantité / Taille) : son étiquette a la hauteur de la bascule Marché / Limite, les deux champs s'alignent */
.ht-tk-grid > div > .ht-lbl:first-child { display: flex; align-items: center; height: calc(.68rem * 1.5 + .4rem + 4px); margin: 0 0 .3rem; }
.ht-otype button { all: unset; line-height: 1.5; cursor: pointer; flex: 1; text-align: center; font-size: .68rem; font-weight: 700; padding: .2rem .4rem; border-radius: .35rem; color: var(--ht-gray-600); }
.ht-otype button:hover { color: var(--ht-primary); }
.ht-otype button.on[data-ot="mkt"] { background: rgba(var(--ht-info-rgb), .16); color: var(--ht-info); }
.ht-otype button.on[data-ot="lim"] { background: rgba(var(--ht-warning-rgb), .18); color: var(--ht-warning); }
.ht-ordtype { font-size: .58rem; padding: .02rem .35rem; border-radius: .25rem; margin-left: .3rem; letter-spacing: .04em; }
.ht-ordtype.mkt { background: rgba(var(--ht-info-rgb), .15); color: var(--ht-info); }
.ht-ordtype.lim { background: rgba(var(--ht-warning-rgb), .18); color: var(--ht-warning); }
.ht-lev { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.ht-lev input { flex: 1; accent-color: var(--ht-primary); }
.ht-lev b { font-family: var(--ht-font-monospace); font-size: .85rem; min-width: 2.6rem; text-align: right; color: var(--ht-heading-color); }
.ht-switch.sm { font-size: .7rem; }
.ht-tprow { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem auto; gap: .3rem; align-items: center; }
.ht-tprow .ht-inp.pct input { text-align: right; padding-right: .1rem; }

/* résumé par compte */
.ht-tk-sum { padding: .55rem 0; border-top: 1px solid var(--ht-border-color); }
.ht-sumt { width: 100%; font-size: .7rem; border-collapse: collapse; }
.ht-sumt th { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ht-gray-500); font-weight: 700; padding: .1rem .2rem; }
.ht-sumt td { padding: .14rem .2rem; color: var(--ht-gray-800); white-space: nowrap; }
.ht-sumt .num { text-align: right; font-family: var(--ht-font-monospace); }
.ht-sumt tr.off td { opacity: .5; }
.ht-sumt tfoot td { border-top: 1px solid var(--ht-border-color); font-weight: 700; color: var(--ht-heading-color); }
.ht-sumt .acct-dot { margin-right: .25rem; }
.ht-sumkv { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin-top: .5rem; font-size: .7rem; color: var(--ht-gray-600); }
.ht-sumkv b { text-align: right; color: var(--ht-gray-900); font-weight: 600; }

/* les deux boutons d'envoi */
.ht-tk-go { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; padding-top: .6rem; border-top: 1px solid var(--ht-border-color); }
.ht-go { border: 1px solid transparent; border-radius: .55rem; padding: .55rem .4rem; display: flex; flex-direction: column; align-items: center; line-height: 1.2;
  transition: filter .12s, opacity .12s; }
.ht-go b { font-size: .82rem; }
.ht-go small { font-size: .62rem; opacity: .9; font-family: var(--ht-font-monospace); margin-top: .1rem; }
/* aux couleurs du thème : fond teinté, texte et bord de la couleur (plus de texte blanc) */
.ht-go.buy { background: rgba(var(--ht-success-rgb), .16); border-color: rgba(var(--ht-success-rgb), .55); color: var(--ht-success); }
.ht-go.sell { background: rgba(var(--ht-danger-rgb), .16); border-color: rgba(var(--ht-danger-rgb), .55); color: var(--ht-danger); }
.ht-go.buy:hover { background: rgba(var(--ht-success-rgb), .26); border-color: var(--ht-success); }
.ht-go.sell:hover { background: rgba(var(--ht-danger-rgb), .26); border-color: var(--ht-danger); }
.ht-go:focus-visible { outline: 2px solid var(--ht-heading-color); outline-offset: 2px; }
.ht-go.locked { opacity: .45; box-shadow: none; }
.ht-go.locked small { font-family: var(--ht-body-font-family); }

/* ── onglets du bas ────────────────────────────────────────────────────────────────────────── */
.ht-bottom { padding: .3rem 1.1rem .8rem; }
.ht-tabs { display: flex; align-items: center; gap: .2rem; border-bottom: 1px solid var(--ht-border-color); margin-bottom: .4rem; }
.ht-tabs > button { border: 0; background: none; padding: .6rem .8rem .5rem; font-size: .82rem; font-weight: 600; color: var(--ht-gray-600);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ht-tabs > button span { font-size: .66rem; padding: 0 .4rem; border-radius: 1rem; background: var(--ht-gray-200); color: var(--ht-gray-700); margin-left: .2rem; }
.ht-tabs > button.active { color: var(--ht-primary); border-bottom-color: var(--ht-primary); }
.ht-tabs > button.active span { background: rgba(var(--ht-primary-rgb), .12); color: var(--ht-primary); }
.ht-tabs > button:focus-visible { outline: 2px solid var(--ht-primary); outline-offset: -2px; }
.ht-bottom tr.is-orphan > td { background: rgba(var(--ht-warning-rgb), .07); }
.ht-coinlink { border: 0; background: none; padding: 0; font-weight: 700; color: var(--ht-heading-color); }
.ht-coinlink:hover { color: var(--ht-primary); text-decoration: underline; }
/* v1.53 : une position du tableau du bas — un clic ouvre son marché dans le graphique */
tr.ht-rowlink { cursor: pointer; }
tr.ht-rowlink:hover > td { background: rgba(var(--ht-primary-rgb), .06); }
tr.ht-rowlink:hover .ht-coinlink { color: var(--ht-primary); text-decoration: underline; }
.ht-none { padding: 1.2rem; text-align: center; color: var(--ht-gray-500); font-size: .8rem; }
.ms-0.ht-flag { margin-left: 0; }

/* Un écran plus étroit : le carnet se cache, le graphique garde la place. */
@media (max-width: 1499.98px) { .ht-term > .ht-wl { flex-basis: 12.5rem; } .ht-term > .ht-ticket { flex-basis: 19rem; } .ht-book { display: none !important; } }

/* La watchlist réelle (v0.21) : une ligne cliquable avec son étoile (ajouter / retirer de ma liste). */
.ht-wl-row { cursor: pointer; }
.ht-wl-row .ht-star { font-size: .78rem; padding: 0 .1rem 0 0; line-height: 1; }
.ht-wl-row .c small { white-space: nowrap; }

/* La confirmation d'un ordre (v0.25) : le sens en grand, à sa couleur. */
.ht-confirm { border-radius: .6rem; padding: .8rem 1rem; border: 1px solid var(--ht-border-color); }
.ht-confirm.buy { background: rgba(var(--ht-success-rgb), .08); border-color: rgba(var(--ht-success-rgb), .35); }
.ht-confirm.sell { background: rgba(var(--ht-danger-rgb), .07); border-color: rgba(var(--ht-danger-rgb), .35); }
.ht-confirm .big { font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.ht-confirm.buy .big { color: var(--ht-success); }
.ht-confirm.sell .big { color: var(--ht-danger); }
.ht-confirm .big b { color: var(--ht-heading-color); margin-left: .3rem; }

/* Une section du ticket indisponible (ex. TP / SL sur un marché xyz) : grisée et inerte. */
.ht-tk-sec.is-off > :not(:first-child) { opacity: .45; pointer-events: none; }

/* Les boutons d'action d'une ligne du graphique (v0.30) : fermer, levier, marge. */
.ht-cs .lbtn { cursor: pointer; }
.ht-cs .lbtn rect { fill: var(--ht-card-bg); stroke: var(--ht-gray-400); stroke-width: 1; }
.ht-cs .lbtn text { fill: var(--ht-gray-800); font-size: 10px; font-weight: 800; font-family: var(--ht-body-font-family); }
.ht-cs .lbtn:hover rect { fill: color-mix(in srgb, var(--ht-primary) 18%, var(--ht-card-bg)); stroke: var(--ht-primary); }
.ht-cs .lbtn:hover text { fill: var(--ht-primary); }
.ht-cs .lbtn.close:hover rect, .ht-cs .lbtn.closepos:hover rect { fill: color-mix(in srgb, var(--ht-danger) 18%, var(--ht-card-bg)); stroke: var(--ht-danger); }
.ht-cs .lbtn.close:hover text, .ht-cs .lbtn.closepos:hover text { fill: var(--ht-danger); }
.ht-cs .lbtn.none { opacity: .4; }
.ht-cs .lbtn.none:hover rect { fill: var(--ht-card-bg); stroke: var(--ht-gray-400); }
.ht-cs .lbtn.none:hover text { fill: var(--ht-gray-800); }

.ht-tk-confirm { justify-content: center; margin-top: .35rem; font-size: .68rem; color: var(--ht-gray-600); }

/* « CB » : le marché existe aussi chez Coinbase (v0.57) */
.ht-cbtag { font-size: .52rem; font-weight: 800; letter-spacing: .03em; padding: .02rem .25rem; border-radius: .22rem; margin-left: .15rem;
  color: var(--ht-info); background: rgba(var(--ht-info-rgb), .14); }

/* les menus du graphique dans la barre de Trading (v0.59) */
.ht-trmenus { display: inline-flex; gap: .3rem; align-items: center; margin-left: .4rem; }
.ht-trmenus .ht-cbtn { box-sizing: border-box; height: 1.6rem; font-size: .66rem; line-height: 1; padding: .18rem .45rem; }
.ht-trmenus .ht-cbtn > .ht-lbl { margin: 0; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.ht-trmenus .ht-cbtn .ht-count { margin-left: 0; padding: .05rem .3rem; font-size: .6rem; line-height: 1; }
.ht-cdrop.ht-fixed { position: fixed; z-index: 1060; }
.ht-chart-tools { flex-wrap: nowrap; row-gap: .35rem; }
/* v3.38 : la barre tient sur une ligne — chart/fitbar.js la resserre par paliers quand elle ne rentre plus (avant : les boutons
   passaient sur une deuxième ligne) ; fit-wrap : même resserrée, trop étroite → elle revient à la ligne */
.ht-chart-tools > :not(.ht-chint) { flex-shrink: 0; }
.ht-chart-tools .ht-seg { flex-wrap: nowrap; }
.ht-chart-tools.fit-wrap { flex-wrap: wrap; }
.ht-chart-tools.fit1 { gap: .5rem; }
.ht-chart-tools.fit1 .ht-chint { margin-left: -.5rem; }
.ht-chart-tools.fit1 .ht-chint > span { padding-left: .5rem; }
.ht-chart-tools.fit1 .ht-seg .btn { padding: .15rem .38rem; }
.ht-chart-tools.fit1 .ht-trmenus { gap: .2rem; margin-left: 0; }
.ht-chart-tools.fit1 .ht-trmenus .ht-cbtn { padding: .18rem .38rem; }
.ht-chart-tools.fit1 .ht-acctsel { margin-left: 0; max-width: 9rem; }
.ht-chart-tools.fit2 .ht-trmenus .ht-lbl { display: none; }
.ht-chart-tools.fit2 .ht-trmenus .ht-cbtn .ht-count { margin-left: 0; }
.ht-chart-tools.fit3 .ht-check .ht-lbl { display: none; }
.ht-chart-tools.fit3 .ht-acctsel { max-width: 6.5rem; }
.ht-chart-tools.fit3 .ht-seg .btn { padding: .15rem .3rem; }
/* l'aide du clic (« verrouillé : le clic ne place rien »…) : la place qui reste au bout de la barre, coupée (…) plutôt que d'ouvrir
   une ligne de plus sous les boutons (v1.93) — le texte entier au survol ; la marge négative annule l'écart (gap) devant elle */
.ht-chint { flex: 1 1 0; min-width: 0; margin-left: -.9rem; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-chint > span { padding-left: .9rem; }

/* replay en cours (v1.89) : le ticket trade le compte simulé du replay (avant : grisé, on tradait avec la barre du replay) —
   un liseré orange en haut, le badge « Replay · simulé » à la place du verrou, et la boîte du compte simulé */
.ht-ticket.is-replay { box-shadow: inset 0 3px 0 var(--ht-warning); }
.ht-tklock.rp { border-color: rgba(var(--ht-warning-rgb), .45); background: rgba(var(--ht-warning-rgb), .12); color: var(--ht-warning); cursor: default; }
.ht-rpacct { border: 1px dashed rgba(var(--ht-warning-rgb), .5); border-radius: .6rem; padding: .55rem .7rem; background: rgba(var(--ht-warning-rgb), .06); }
.ht-rpacct .rp-badge { font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: var(--ht-warning); background: rgba(var(--ht-warning-rgb), .14);
  border: 1px solid rgba(var(--ht-warning-rgb), .45); border-radius: .3rem; padding: .1rem .35rem; }

/* la source d'un marché dans la liste (v0.66) : HL (Hyperliquid, ou HL xyz), à côté de CB */
.ht-srcb { font-size: .52rem; font-weight: 800; letter-spacing: .03em; padding: .02rem .25rem; border-radius: .22rem; margin-left: .15rem; white-space: nowrap; }
.ht-srcb.hl { color: var(--ht-success); background: rgba(var(--ht-success-rgb), .14); }
.ht-wl-row .c b { flex-shrink: 0; }
.ht-wl-row .c small { min-width: 0; overflow: hidden; text-overflow: clip; }

/* page IBKR (v0.67) */
.ht-wl-sec { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ht-gray-500); padding: .5rem .55rem .2rem; }
.ht-srcb.ib { color: #d9433d; background: rgba(217, 67, 61, .14); }
:root[data-bs-theme=dark] .ht-srcb.ib { color: #ff7a70; background: rgba(255, 122, 112, .14); }
.ht-otype.ib-side button.on.buy { background: rgba(var(--ht-success-rgb), .16); color: var(--ht-success); }
.ht-otype.ib-side button.on.sell { background: rgba(var(--ht-danger-rgb), .16); color: var(--ht-danger); }
.ht-mkt-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ht-mkt-row .nm b { font-size: 1.1rem; color: var(--ht-heading-color); }
.ht-mkt-row .px { font-size: 1.25rem; font-weight: 700; color: var(--ht-heading-color); }
.ht-mkt-row .st { display: flex; flex-direction: column; line-height: 1.2; }
.ht-mkt-row .st small { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ht-gray-500); }
.ht-mkt-row .st b { font-size: .82rem; font-family: var(--ht-font-monospace); }

/* les comptes du ticket (v0.69) : coché = case ✓, fond et bord à la couleur du compte, nom en gras ; non coché = estompé */
.ht-accchip { gap: .3rem; padding: .28rem .55rem .28rem .35rem; border-radius: .5rem; font-size: .72rem; opacity: .7; }
.ht-accchip .ck { display: inline-grid; place-items: center; width: .95rem; height: .95rem; border-radius: .25rem; border: 1.5px solid var(--ht-gray-500);
  font-style: normal; font-size: .62rem; font-weight: 900; line-height: 1; }
.ht-accchip.on { opacity: 1; font-weight: 700; border: 1.5px solid var(--c, var(--ht-primary)); color: var(--ht-heading-color);
  background: color-mix(in srgb, var(--c, var(--ht-primary)) 16%, var(--ht-card-bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, var(--ht-primary)) 18%, transparent); }
.ht-accchip.on .ck { background: var(--c, var(--ht-primary)); border-color: var(--c, var(--ht-primary)); color: var(--ht-card-bg, #0b1727); }
.ht-accchip .role { font-style: normal; font-size: .6rem; font-weight: 800; padding: .02rem .3rem; border-radius: .25rem; background: rgba(var(--ht-primary-rgb), .16); color: var(--ht-primary); }
.ht-accchip .role.off { background: rgba(var(--ht-warning-rgb), .16); color: var(--ht-warning); }
.ht-accchip:hover:not(:disabled) { opacity: 1; }

/* le compte principal (v0.71) : une étoile dans un rond, l'étiquette MAÎTRE */
.ht-accchip .ck.rd { border-radius: 50%; }
.ht-accchip .role.mst { background: color-mix(in srgb, var(--c, var(--ht-primary)) 24%, transparent); color: var(--c, var(--ht-primary)); letter-spacing: .04em; }
.ht-accchip.master:not(.on) .ck { border-style: dashed; }
.ht-master { display: flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .55rem; border-radius: .55rem; margin-bottom: .2rem;
  border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 14%, var(--ht-card-bg)); }
.ht-master .star { color: var(--c); font-size: .95rem; line-height: 1; }
.ht-master select { flex: 1; min-width: 0; border: 0; background-color: transparent; font-weight: 700; color: var(--ht-heading-color); padding-left: .2rem; box-shadow: none; }
.ht-master .role { font-style: normal; font-size: .6rem; font-weight: 800; padding: .08rem .35rem; border-radius: .25rem; letter-spacing: .04em;
  background: color-mix(in srgb, var(--c) 24%, transparent); color: var(--c); }

/* v0.72 : le choix des comptes plus compact */
.ht-master { padding: .12rem .3rem .12rem .45rem; gap: .3rem; }
.ht-master .star { font-size: .75rem; }
.ht-master select { font-size: .74rem; padding-top: .15rem; padding-bottom: .15rem; min-height: 0; height: 1.6rem; }
.ht-master .role { font-size: .52rem; }
#tk-copymode .btn, #ib-copymode .btn { font-size: .64rem; padding: .12rem .45rem; white-space: nowrap; }   /* v1.67 : IBKR / TZ pareil que Hyperliquid */
.ht-tk-sec .ht-lbl { font-size: .6rem; }
.ht-accchip { font-size: .68rem; padding: .18rem .45rem .18rem .3rem; }
.ht-accchip .ck { width: .8rem; height: .8rem; font-size: .55rem; }
.ht-accchip .role { font-size: .55rem; }

/* ☆ non favori : estompé ; ★ favori : orange (v0.73) */
.ht-star:not(.on) { color: var(--ht-gray-500) !important; opacity: .7; }
.ht-star:not(.on):hover { color: var(--ht-warning) !important; opacity: 1; }

/* le sélecteur Hyperliquid | IBKR en haut de Trading (v0.79) */
.ht-venue { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.ht-venue-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: .6rem; background: var(--ht-gray-100); border: 1px solid var(--ht-border-color); }
.ht-venue-tabs a { display: flex; flex-direction: column; align-items: flex-start; padding: .3rem .9rem; border-radius: .45rem; text-decoration: none; line-height: 1.15; }
.ht-venue-tabs a b { font-size: .82rem; color: var(--ht-gray-700); }
.ht-venue-tabs a small { font-size: .6rem; color: var(--ht-gray-500); }
.ht-venue-tabs a.on { background: var(--ht-card-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ht-venue-tabs a.on b { color: var(--ht-primary); }
.ht-venue-tabs a:hover b { color: var(--ht-primary); }
.ht-venue-tabs a:not(.on) b { color: var(--ht-gray-500); }
.ht-venue-tabs a:not(.on) small { opacity: .7; }
.ht-venue-tabs a.on { background: rgba(var(--ht-primary-rgb), .16); box-shadow: inset 0 0 0 1.5px rgba(var(--ht-primary-rgb), .55); }
.ht-venue-tabs a.on b { color: var(--ht-primary); }

/* le choix du broker, compact, en haut de la liste des marchés (v0.84) */
.ht-venue-mini { display: flex; gap: 2px; padding: 2px; margin-bottom: .4rem; border-radius: .45rem; background: var(--ht-gray-100); border: 1px solid var(--ht-border-color); }
.ht-venue-mini a { flex: 1 1 auto; text-align: center; padding: .2rem .3rem; border-radius: .35rem; font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--ht-gray-600); white-space: nowrap; }
/* v3.21 : beaucoup d'onglets (Hyperliquid, IBKR, TZ, Coinbase, Alpaca, MT5) : ils passent sur deux lignes plutôt que de déborder de la liste */
.ht-venue-mini { flex-wrap: wrap; }
.ht-venue-mini:has(> a:nth-child(5)) a { font-size: .68rem; padding: .18rem .3rem; }
.ht-venue-mini a:hover { color: var(--ht-primary); }
.ht-venue-mini a.on { background: var(--ht-card-bg); color: var(--ht-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* le sélecteur de liste (★ Ma liste, Crypto, Scalp…) : watchlists.js */
.ht-wlpick { font-size: .75rem; padding-top: .2rem; padding-bottom: .2rem; min-width: 9rem; }
.ht-wl-secpick { padding: .35rem .5rem; }

/* watchlist plus serrée (v1.04) : une ligne par marché (★ nom levier · prix · 24 h), marges réduites */
.ht-wl-h { padding: .5rem .5rem .4rem; gap: .35rem; }
.ht-wl-list { padding: .2rem; }
.ht-wl-row { grid-template-columns: minmax(0, 1fr) auto 3.4rem; grid-template-rows: auto; align-items: center; column-gap: .35rem;
  padding: .17rem .4rem; border-radius: .4rem; }
.ht-wl-row .c { font-size: .74rem; gap: .22rem; }
.ht-wl-row .c small { font-size: .55rem; }
.ht-wl-row .ht-star { font-size: .7rem; }
.ht-wl-row .p { font-size: .72rem; }
.ht-wl-row .g { grid-column: 3; font-size: .64rem; }
.ht-wl-sec { padding: .35rem .45rem .12rem; }
/* un nom long (marchés xyz) ne déborde pas sur le prix : le levier se coupe d'abord, l'étiquette xyz est plus petite */
.ht-wl-row .c { overflow: hidden; }
.ht-wl-row .c .ht-srcb { flex: none; font-size: .5rem; padding: 0 .22rem; line-height: 1.35; }
.ht-wl-row .c small { flex: 0 1 auto; }


/* la liste commune (v1.06) : sections (séparateurs, repliables) et glisser-déposer */
.ht-wl-sep { display: flex; align-items: center; gap: .3rem; margin: .35rem .1rem .1rem; padding: .18rem .35rem; border-radius: .35rem; cursor: pointer;
  font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ht-primary); user-select: none;
  border-bottom: 1px solid rgba(var(--ht-primary-rgb), .25); }
.ht-wl-sep:first-child { margin-top: .05rem; }
.ht-wl-sep:hover { background: rgba(var(--ht-primary-rgb), .06); }
.ht-wl-sep .car { width: .7rem; color: var(--ht-gray-500); }
.ht-wl-sep b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-wl-sep small { color: var(--ht-gray-500); font-weight: 700; }
.ht-wl-sep .ed { margin-left: auto; border: 0; background: none; color: var(--ht-gray-500); font-size: .7rem; padding: 0 .15rem; opacity: 0; }
.ht-wl-sep .ed + .ed { margin-left: 0; }
.ht-wl-sep:hover .ed { opacity: 1; }
.ht-wl-sep .ed:hover { color: var(--ht-primary); }
.ht-wl-sep.folded { border-bottom-style: dashed; }
[draggable="true"].dragging { opacity: .4; }
.drop-before { box-shadow: inset 0 2px 0 var(--ht-primary) !important; }
.drop-after { box-shadow: inset 0 -2px 0 var(--ht-primary) !important; }
.ht-srcb.cb { color: var(--ht-info); background: rgba(var(--ht-info-rgb), .14); }
/* v1.63 : le type d'un contrat IBKR (STK, FUT, FX) en badge neutre, à la place du mot (Action, Future…) */
.ht-srcb.ty { color: var(--ht-gray-700); background: color-mix(in srgb, var(--ht-gray-600) 18%, transparent); }
/* l'onglet TZ : ses actions portent « TZ », à la teinte TradeZero (comme .ht-ibkr.ht-tz) */
.ht-srcb.tz { color: #0f8f8a; background: rgba(15, 143, 138, .14); }
:root[data-bs-theme=dark] .ht-srcb.tz { color: #4fd1c5; background: rgba(79, 209, 197, .14); }
/* v1.80 : Alpaca (actions US, prix gratuits) */
.ht-srcb.al { color: #b7791f; background: rgba(214, 158, 46, .16); }
:root[data-bs-theme=dark] .ht-srcb.al { color: #f6c453; background: rgba(246, 196, 83, .14); }
/* un symbole MT5 (v2.98) : la teinte des comptes MT5 (.ht-ibkr.ht-mt5) */
.ht-srcb.m5 { color: #6b5bd6; background: rgba(107, 91, 214, .13); }
:root[data-bs-theme=dark] .ht-srcb.m5 { color: #a99cff; background: rgba(169, 156, 255, .14); }

/* IBKR : la même ligne que Hyperliquid (v1.07) ; la variation du jour sans marge (chgOf) */
.ht-ibpage .ht-wl-row .g b { margin: 0 !important; font-weight: 600; }
.ht-ibpage .ht-wl-row .p small { font-size: .58rem; }
/* v1.58 : la liste un peu plus large (le levier de BTC était coupé) et la variation collée au prix — alignée à gauche de sa
   colonne : toujours à la même place d'une ligne à l'autre, juste après le prix */
.ht-term > .ht-wl { flex-basis: 15rem; }
@media (max-width: 1499.98px) { .ht-term > .ht-wl { flex-basis: 14rem; } }
.ht-wl-row { grid-template-columns: minmax(0, 1fr) auto 2.85rem; column-gap: .3rem; }
.ht-wl-row .g { text-align: left; white-space: nowrap; }


/* ticket : « Seul ce compte » / « Remettre les copies » (v1.18) */
.ht-solo { border: 1px solid var(--ht-border-color); background: transparent; color: var(--ht-gray-700); border-radius: .4rem; font-size: .64rem; font-weight: 700;
  padding: .05rem .45rem; text-transform: none; letter-spacing: 0; }
.ht-solo:hover { border-color: rgba(var(--ht-primary-rgb), .5); color: var(--ht-primary); }
.ht-solo.on { color: var(--ht-gray-600); }

/* v1.41 : la marge d'un compte en challenge, sous le résumé du ticket */
.ht-chroom { margin-top: .45rem; padding: .3rem .5rem; border-radius: .45rem; font-size: .7rem; color: var(--ht-gray-700); background: rgba(var(--ht-info-rgb), .08); }
.ht-chroom.warn { background: rgba(var(--ht-warning-rgb), .1); }
.ht-chroom.bad { background: rgba(var(--ht-danger-rgb), .12); color: var(--ht-gray-900); }

/* les petits boutons du ticket (v1.92 : « Changer » le levier, « Marge isolée » d'une position déjà ouverte) */
.ht-tk-sec .btn-xs { padding: .05rem .45rem; font-size: .7rem; line-height: 1.4; border-radius: .35rem; }

/* v3.13 : le solde du compte du ticket (Valeur · Dispo. · Latent), sous le titre du ticket */
.ht-tkbal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; padding: .1rem 0 .55rem; margin-bottom: .2rem; border-bottom: 1px solid var(--ht-border-color); font-size: .7rem; }
.ht-tkbal span { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.ht-tkbal i { font-style: normal; color: var(--ht-gray-600); }
.ht-tkbal b { font-weight: 600; color: var(--ht-body-color); }
.ht-tkbal b.pos { color: var(--ht-success); }
.ht-tkbal b.neg { color: var(--ht-danger); }