/* LP Backtester (/yields) — ported 1:1 from the design reference
   .claude/skills/frontend-design/backtester_mockup.html. Scoped under .bt so
   mockup class names survive verbatim next to the rest of the app's CSS.
   The --t* text scale is the mockup's lifted one (WCAG AA on #181A20);
   the global design_system scale stays untouched for now. */

.bt {
  --bg: #0D0E12; --bg-secondary: #181A20; --bg-elevated: #23262F;
  --bg-surface: #13151A; --bg-tertiary: #2A2D36;
  --accent: #10B981; --accent-2: #14F195;
  --pos: #10B981; --neg: #EF4444; --warn: #F59E0B;
  --t1: #FAFAFA; --t2: #D4D4D8; --t3: #A1A1AA; --t4: #8A8A93;
  --border: rgba(255, 255, 255, 0.08); --border-h: rgba(255, 255, 255, 0.16);
  --border-a: rgba(16, 185, 129, 0.35);

  max-width: 1400px; margin: 0 auto; padding: 32px 32px 64px;
  color: var(--t1); font-size: 15px; line-height: 1.6; letter-spacing: -0.01em;
}
.bt .num { font-variant-numeric: tabular-nums; }

.bt .page-head { margin-bottom: 24px; animation: bt-rise .5s ease both; }
.bt .page-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.bt .page-title { font-size: 26px; font-weight: 700; line-height: 1.2; }
.bt .page-sub { color: var(--t2); font-size: 14px; margin-top: 4px; }
.bt .page-sub b { color: var(--t1); font-weight: 600; }
.bt .page-poolinfo { color: var(--t2); font-size: 12.5px; margin-top: 5px; }
.bt .pairname a { color: inherit; text-decoration: none; }
.bt .hiw { position: relative; color: var(--t2); border-bottom: 1px dashed var(--t4); cursor: help; }
.bt .hiw-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 340px;
  background: var(--bg-elevated); border: 1px solid var(--border-h); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); padding: 12px 14px;
  font-size: 12.5px; color: var(--t2); line-height: 1.55; font-weight: 400; letter-spacing: normal; text-transform: none;
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: all .15s ease;
}
.bt .hiw:hover .hiw-pop { opacity: 1; transform: none; pointer-events: auto; }
/* Подсказка подзаголовка кренится к САМОЙ ШАПКЕ, а не к слову «не оценка»:
   привязанная к слову, она уезжала за правый край и читалась наполовину
   (жалоба Антона 22.08). Шире 340px — текст там длинный, в узкой колонке
   он растягивался на десяток строк. */
.bt .page-head { position: relative; }
.bt .page-sub .hiw { position: static; }
.bt .page-sub .hiw-pop { left: 0; right: auto; width: min(560px, 100%); }
.bt .hiw-pop b { color: var(--t1); }

.bt .cols { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
/* Grid items default to min-width:auto — a nowrap table would stretch its
   column past the track instead of fitting it. */
.bt .cols > * { min-width: 0; }
@keyframes bt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bt .explorer { min-width: 0; animation: bt-rise .5s .05s ease both; }

.bt .toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bt .search {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 8px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; transition: border-color .15s ease;
}
.bt .search:focus-within { border-color: var(--border-a); }
/* Панель подсказок поиска: чипы печатают запрос в ту же строку — это
   клавиатура фильтра, не отдельное состояние. */
.bt .search { position: relative; }
.bt .sugg {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--bg-elevated); border: 1px solid var(--border-h); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.bt .sugg[hidden] { display: none; }
.bt .sugg-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bt .sugg-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t3); margin-right: 4px; white-space: nowrap;
}
.bt .sugg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--t1);
  background: none; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; cursor: pointer;
}
.bt .sugg-chip:hover { border-color: var(--border-h); background: rgba(255, 255, 255, 0.03); }
.bt .search-clear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; color: var(--t3); background: none; border: none;
  border-radius: 6px; cursor: pointer; padding: 0;
}
.bt .search-clear:hover { color: var(--t1); background: rgba(255, 255, 255, 0.06); }
.bt .search-clear[hidden] { display: none; }
.bt .search svg { flex: none; color: var(--t3); }
.bt .search input { width: 100%; background: none; border: none; outline: none; color: var(--t1); font: inherit; font-size: 14px; }
.bt .search input::placeholder { color: var(--t4); }
/* Networks live in a dropdown, Uniswap-style: chains will only multiply and a
   chip per chain stops scaling. Toolbar controls share one geometry — 10px
   radius, 38px height, flex-centered content. */
.bt .search { height: 38px; padding-top: 0; padding-bottom: 0; }
.bt .chaindd { position: relative; flex: none; }
.bt .chaindd-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--t1);
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .15s ease; user-select: none;
}
.bt .chaindd-btn:hover { border-color: var(--border-h); }
.bt .cdd-ic { display: inline-flex; flex: none; width: 18px; height: 18px; }
.bt .cdd-ic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bt .cdd-ic.cdd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; }
.bt .cdd-ic.cdd-grid img { border-radius: 3px; }
.bt .cdd-chev { flex: none; color: var(--t3); transition: transform .15s ease; }
.bt .chaindd.open .cdd-chev { transform: rotate(180deg); }
.bt .chaindd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px;
  background: var(--bg-elevated); border: 1px solid var(--border-h); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); padding: 6px; display: none;
}
.bt .chaindd.open .chaindd-menu { display: block; }
.bt .cdd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--t1); text-align: left;
  background: none; border: none; border-radius: 8px; padding: 9px 10px; cursor: pointer;
}
.bt .cdd-item:hover { background: rgba(255, 255, 255, 0.05); }
.bt .cdd-item .cdd-check { flex: none; margin-left: auto; color: var(--accent); opacity: 0; }
.bt .cdd-item.on .cdd-check { opacity: 1; }

/* padding/box-shadow: none — design_system's global .card bleeds in otherwise */
.bt .card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; padding: 0; box-shadow: none; }
.bt table { width: 100%; border-collapse: collapse; }
.bt thead th {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t3); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: top;
}
.bt thead th small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--t4); margin-top: 1px; }
.bt thead th.r, .bt td.r { text-align: right; }
.bt thead th.sortable { cursor: pointer; user-select: none; }
.bt thead th.sortable:hover { color: var(--t1); }
.bt thead th.sortable::after { content: '▾'; margin-left: 4px; opacity: 0; }
.bt thead th.sortable.on::after { opacity: 1; color: var(--accent); }
.bt thead th.sortable.on.asc::after { content: '▴'; }
/* Column hints, the way big-table products do it (vfat, Uniswap explore):
   the header itself is clean text; hovering it reveals a compact hint pinned
   under the column's right edge — always inside the clipping card, no jump,
   just a fade. */
.bt thead th { position: relative; }
.bt thead th .hiw-pop {
  left: auto; right: 10px; top: calc(100% - 4px); width: max-content; max-width: 240px;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45;
  color: var(--t1); font-weight: 400; letter-spacing: normal; text-transform: none;
  white-space: normal; text-align: left; transform: none;
}
.bt thead th.sortable:hover .hiw-pop { opacity: 1; pointer-events: none; transition-delay: .15s; }
/* Bridge chip: the result column carries a live digest of the calc params;
   clicking it scrolls to (and pulses) the params card. */
.bt thead th.col-result { white-space: normal; }
.bt .colsub-chip {
  display: inline-flex; align-items: center; margin-top: 3px; max-width: 100%;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--accent); background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--border-a); border-radius: 999px; padding: 1px 7px; cursor: pointer;
  transition: background .15s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bt .colsub-chip:hover { background: rgba(16, 185, 129, 0.16); }
.bt thead th.col-result.flash { animation: bt-colflash .7s ease; }
@keyframes bt-colflash { 0% { background: rgba(16, 185, 129, 0.14); } 100% { background: transparent; } }
.bt tbody td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }

.bt tr.pair-row { cursor: pointer; transition: background .15s ease; }
.bt tr.pair-row:hover { background: rgba(255, 255, 255, 0.02); }
.bt tr.pair-row.open { background: var(--bg-surface); }
.bt .paircell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bt .ticons { display: flex; flex: none; }
.bt .ticon { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #0D0E12; }
.bt img.ticon { object-fit: cover; background: var(--bg-elevated); }
.bt .ticon + .ticon { margin-left: -8px; }
.bt .pairname { font-weight: 600; white-space: nowrap; line-height: 1.3; }
.bt .pairprice { font-size: 12.5px; color: var(--t2); font-weight: 500; }
.bt .pairsub { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); line-height: 1.3; }
.bt .pairsub .cdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.bt .bench b { display: block; font-weight: 600; font-size: 14px; }
.bt .bench span { font-size: 12px; color: var(--pos); }
.bt .bench small { display: block; font-size: 10.5px; color: var(--t4); }
.bt .hist { font-size: 12.5px; color: var(--t2); white-space: nowrap; }
.bt .chev { color: var(--t3); transition: transform .2s ease; display: inline-block; }
.bt tr.pair-row.open .chev { transform: rotate(180deg); }

.bt tr.bt-pool-row td { padding: 0; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.bt .pool-in {
  display: grid; grid-template-columns: 20px minmax(96px, 1fr) 62px 76px 62px 82px 56px; align-items: center; gap: 10px;
  padding: 9px 16px 9px 20px; cursor: pointer; border-left: 2px solid transparent; transition: all .12s ease;
}
.bt .pool-in:hover { background: rgba(255, 255, 255, 0.02); }
.bt .pool-in.sel { border-left-color: var(--accent); background: rgba(16, 185, 129, 0.05); }
.bt .pool-in.dim { opacity: .55; }
.bt .pool-id { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; overflow: hidden; }
.bt .badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--bg-elevated); color: var(--t2); border: 1px solid var(--border); text-transform: none; }
.bt .badge.v4 { color: #C4B5FD; }
.bt .feechip { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--t1); }
.bt .myposb {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  color: var(--accent-2); background: rgba(20, 241, 149, 0.09); border: 1px solid rgba(20, 241, 149, 0.25);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
/* Live screener cells: labels live once in the block header, rows stay
   clean; Net is the only bold colored number (fees neutral, APR t2). */
.bt tr.pool-head td { padding: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.bt .pool-head-in {
  display: grid; grid-template-columns: 20px minmax(96px, 1fr) 62px 76px 62px 82px 56px; gap: 10px;
  padding: 6px 16px 5px 20px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t4);
}
.bt .pool-head-in .r, .bt .pool-in .r { text-align: right; }
/* Net↔APR rank toggle in the pool block header, same affordance language as
   the sortable pair-table thead: clean text, active one marked with ▾. */
/* Сортируемые заголовки списка пулов — в обоих видах (в теле пары и в плоском
   «Пулы»). Стрелка видна у КАЖДОЙ сортируемой колонки, бледная: иначе понять,
   что заголовок кликается, можно было только случайно (жалоба тестера 21.08).
   У активной она акцентная и разворачивается вверх при сортировке по
   возрастанию. */
/* nowrap обязателен: «ИСТОРИЯ» и «КОМИССИИ» со стрелкой не влезали в свою
   grid-колонку, и стрелка уезжала на вторую строку под заголовком (22.08). */
.bt .pool-head-in .psort, .bt .pool-flat-head .psort {
  cursor: pointer; user-select: none; white-space: nowrap; letter-spacing: .04em;
}
.bt .pool-head-in .psort:hover, .bt .pool-flat-head .psort:hover { color: var(--t1); }
.bt .pool-head-in .psort::after, .bt .pool-flat-head .psort::after {
  content: '▾'; margin-left: 2px; opacity: .35; display: inline-block; font-size: .9em;
}
.bt .pool-head-in .psort:hover::after, .bt .pool-flat-head .psort:hover::after { opacity: .7; }
.bt .pool-head-in .psort.on, .bt .pool-flat-head .psort.on { color: var(--t1); }
.bt .pool-head-in .psort.on::after, .bt .pool-flat-head .psort.on::after { opacity: 1; color: var(--accent); }
/* Направление — сменой символа, а не поворотом: transform на ::after внутри
   grid-ячейки заголовка не применялся (проверено в браузере 22.08). */
.bt .pool-head-in .psort.asc::after, .bt .pool-flat-head .psort.asc::after { content: '▴'; }
.bt .pcell { font-size: 12.5px; color: var(--t2); white-space: nowrap; }
.bt .pcell.nodata { color: var(--t4); font-size: 12px; }
.bt .pfees { font-size: 13px; font-weight: 500; color: var(--t1); white-space: nowrap; }
/* Доля времени в границах: объясняет комиссии соседней колонки, поэтому
   тем же кеглем, что и они, а ниже 90% — предупреждающим цветом. */
.bt .pinr { font-size: 12.5px; color: var(--t2); white-space: nowrap; }
.bt .pinr .warn { color: var(--warn); }
.bt .papr { font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; }
/* One line: the number, then the chips that qualify it. The stacked "% in
   range" line under every Net cost 17px on every row — nine visible rows where
   thirteen fit. */
/* Row marks — "my position", the single warn chip, BEST when it isn't implied
   by the sort. They ride the identity cell, which is the flexible one, so a
   chip can never push a number or get clipped by a fixed track. */
.bt .rmarks { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: none; }
.bt .myposb.icon { padding: 2px; border-radius: 5px; }
.bt .rmarks:empty { display: none; }
.bt .pool-id .rmarks { flex: 0 1 auto; overflow: hidden; }
.bt .bench b.pos { color: var(--pos); }
.bt .bench b.neg { color: var(--neg); }
.bt .warnb {
  display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600;
  color: var(--warn); background: rgba(245, 158, 11, 0.1); border-radius: 4px; padding: 1px 6px;
  margin-left: 4px; white-space: nowrap;
}
.bt .pcell .warnb { margin-left: 0; }

/* View switch (Pairs | Pools) + the flat pools ranking. The flat view is the
   cross-chain answer to a search like "eth": every pool of every visible pair
   in one Net/APR-ranked table. Data comes from the same screen batch. */
/* The switch shares the toolbar geometry: 10px radius, 38px height, centered
   labels. (.seg.viewseg beats the generic .seg rule declared later.) */
.bt .seg.viewseg {
  flex: none; height: 38px; box-sizing: border-box; align-items: center;
  border-radius: 10px; padding: 3px; gap: 3px;
  background: var(--bg-secondary); border-color: var(--border);
}
.bt .seg.viewseg button {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 7px; padding: 0 14px; font-size: 13px;
}
.bt .ticons { position: relative; }
.bt .cbadge {
  position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px;
  border-radius: 50%; border: 2px solid var(--bg-secondary); object-fit: cover;
}
.bt.poolsview thead { display: none; }
.bt .pool-flat-head {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px 76px 62px 82px 56px; gap: 10px;
  padding: 10px 16px 8px 20px; align-items: start;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t4);
}
.bt .pool-flat-head .colsub-chip { display: flex; margin-top: 3px; }
.bt .pool-flat-in {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px 76px 62px 82px 56px; align-items: center; gap: 10px;
  padding: 9px 16px 9px 20px; cursor: pointer; border-left: 2px solid transparent; transition: all .12s ease;
}
.bt .pool-flat-in:hover { background: rgba(255, 255, 255, 0.02); }
.bt .pool-flat-in.sel { border-left-color: var(--accent); background: rgba(16, 185, 129, 0.05); }
.bt .pool-flat-in.dim { opacity: .55; }
.bt .pool-flat-in > .pool-id { overflow: hidden; }
.bt .fpair { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; }
.bt .fpname { font-weight: 600; font-size: 13px; }
/* Имя пары в плоском списке — второй жест строки (фильтр парой), и без
   собственного аффорданса он сливался бы с переходом на страницу пула. */
.bt.poolsview .fpname { cursor: pointer; padding: 2px 6px; margin: -2px -6px; border-radius: 7px; }
.bt.poolsview .fpname:hover,
.bt.poolsview .fpname.on { text-decoration: underline; text-underline-offset: 3px; }
/* Свой ховер-фон у имени: под курсором отдельная цель, клик уйдёт в неё,
   а не в строку. Паддинг компенсирован маржином — геометрия не едет. */
.bt.poolsview .fpname:hover { background: rgba(255, 255, 255, 0.06); }
/* Воронка — язык фильтра, отличимый от навигации; слот зарезервирован
   постоянно (opacity), чтобы имя не дёргалось. У активного фильтра горит. */
.bt .fpfun { opacity: 0; margin-left: 5px; vertical-align: -1px; transition: opacity .12s ease; }
.bt.poolsview .fpname:hover .fpfun { opacity: .7; }
.bt.poolsview .fpname.on .fpfun { opacity: 1; color: var(--accent); }
/* Ховер-действие строки: «Открыть пул →» у правого края, только на ховере
   и без участия в раскладке (absolute + pointer-events: none). */
.bt .pool-in, .bt .pool-flat-in { position: relative; }
.bt .rowgo {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--t1);
  background: var(--bg-elevated); border: 1px solid var(--border-h);
  border-radius: 999px; padding: 4px 11px;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.bt .pool-in:hover .rowgo, .bt .pool-flat-in:hover .rowgo { opacity: 1; }
@media (hover: none), (max-width: 640px) { .bt .rowgo { display: none; } }
.bt .ticon-s { width: 16px; height: 16px; font-size: 8px; border-width: 1.5px; }
.bt .ticon-s + .ticon-s { margin-left: -5px; }
/* Guest teaser above the pair table: the my-position feature exists — say so. */
.bt .bt-teaser {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 9px 14px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12.5px; color: var(--t2); text-decoration: none; transition: border-color .12s ease;
}
.bt .bt-teaser svg { flex-shrink: 0; color: var(--accent-2); }
.bt .bt-teaser b { margin-left: auto; font-weight: 600; color: var(--accent-2); white-space: nowrap; }
.bt .bt-teaser:hover { border-color: rgba(20, 241, 149, 0.35); }
.bt .bestb {
  display: inline-flex; align-items: center; font-size: 8.5px; font-weight: 700; letter-spacing: .06em;
  color: #0D0E12; background: var(--accent); border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}
.bt .pmeta { display: none; }
.bt .skel {
  display: inline-block; height: 12px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, #343845 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%; animation: bt-skel 1.1s linear infinite;
}
@keyframes bt-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.bt .freshline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); padding: 12px 4px 0; }
/* В тулбаре она стоит в общей строке — без верхнего отступа и мельче. */
.bt .toolbar .freshline { padding: 0; margin-left: auto; font-size: 11px; color: var(--t4); white-space: nowrap; }
.bt .freshline i, .bt .panel-foot .live i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: var(--accent); animation: bt-pulse 2s infinite; }
@keyframes bt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.bt .emptystate { display: none; padding: 44px 20px; text-align: center; }
.bt .emptystate.show { display: block; }
.bt .emptystate p { color: var(--t3); font-size: 14px; }

/* Right rail = two cards: sticky "calc params" (input, always on screen)
   above a scrolling "selected pool" card (output). */
.bt .panelcol { min-width: 0; align-self: stretch; animation: bt-rise .5s .12s ease both; }
.bt .pcard { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; }
.bt .params-card { position: sticky; top: 16px; z-index: 10; }
.bt .pool-card { margin-top: 12px; }
.bt .params-card.pulse { animation: bt-panelpulse 1s ease; }
@keyframes bt-panelpulse {
  0%, 60% { border-color: var(--border-a); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10); }
  100% { border-color: var(--border); box-shadow: none; }
}
.bt .sec-label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.bt .sec-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.bt .sec-label.mute { color: var(--t3); }
.bt .panel-head { margin-bottom: 16px; }
.bt .ph-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bt .panel-pair { font-size: 19px; font-weight: 700; }
.bt .chainb { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--t2); background: var(--bg-elevated); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.bt .chainb i { width: 7px; height: 7px; border-radius: 50%; }
.bt .ph-sub { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--t2); margin-top: 5px; flex-wrap: wrap; }
.bt .ph-sub b { color: var(--t1); font-weight: 600; }
.bt .ph-addr { color: var(--t3); cursor: pointer; }
.bt .ph-addr:hover { color: var(--t1); }
.bt .ph-uni { color: var(--t2); text-decoration: none; white-space: nowrap; }
.bt .ph-uni:hover { color: var(--accent); }

.bt .bt-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0; padding: 11px 14px; border-radius: 10px; text-decoration: none;
  border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.06);
  color: var(--t1); font-size: 13px; transition: border-color .15s ease, background .15s ease;
}
.bt .bt-cta b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.bt .bt-cta:hover { border-color: var(--accent); background: rgba(16, 185, 129, 0.12); }

.bt .inputs { display: grid; gap: 14px; margin-bottom: 16px; }
.bt .field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; }
.bt .amount { display: flex; align-items: center; gap: 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; transition: border-color .15s ease; }
.bt .amount:focus-within { border-color: var(--border-a); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12); }
.bt .amount span { color: var(--t3); font-weight: 500; }
.bt .amount input { width: 100%; background: none; border: none; outline: none; color: var(--t1); font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt .dilution { display: none; font-size: 11.5px; color: var(--warn); margin-top: 5px; }
.bt .dilution.show { display: block; }

.bt .seg { display: flex; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.bt .seg button { flex: 1; font: inherit; font-size: 13px; font-weight: 500; color: var(--t2); background: none; border: none; border-radius: 8px; padding: 6px 0; cursor: pointer; transition: all .15s ease; }
.bt .seg button:hover:not(:disabled) { color: var(--t1); }
.bt .seg button.on { background: var(--bg-tertiary); color: var(--t1); }
.bt .seg button:disabled { color: var(--t4); cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; }
/* Seven periods with a long "Вся история" among them don't survive as equal
   columns in the 471px rail — every button gets 64px and the long label wraps,
   doubling the control's height. Sized to content they fit one row with room
   to spare, and wrap tidily on a phone. */
.bt .params-card .seg { flex-wrap: wrap; }
.bt .params-card .seg button { flex: 0 1 auto; padding: 6px 9px; white-space: nowrap; }
.bt .periodnote { font-size: 11px; color: var(--t3); margin-top: 5px; display: none; }
.bt .periodnote.show { display: block; }
.bt .customdates { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.bt .customdates.show { display: grid; }
.bt .customdates input { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; color: var(--t2); font: inherit; font-size: 13px; padding: 7px 10px; outline: none; color-scheme: dark; }

.bt .rangegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt .stepper { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; transition: border-color .15s ease; }
.bt .stepper:focus-within { border-color: var(--border-a); }
.bt .stepper-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.bt .stepper input { width: 78px; background: none; border: none; outline: none; color: var(--t1); font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bt .stepbtns { display: flex; gap: 4px; }
.bt .stepbtns button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-tertiary); color: var(--t2); font-size: 14px; line-height: 1; cursor: pointer; transition: all .15s ease; }
.bt .stepbtns button:hover { color: var(--t1); border-color: var(--border-h); }
.bt .pct { font-size: 11px; color: var(--t3); margin-top: 3px; }
.bt .pct .sw { border-bottom: 1px dashed var(--t4); cursor: pointer; }
.bt .pct .sw:hover { color: var(--t2); }
.bt .ticknote { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
.bt .presets { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bt .presets .chip { padding: 5px 11px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }

.bt .chart-wrap { margin: 6px 0 16px; position: relative; }
.bt .chart-svg { display: block; width: 100%; height: auto; }

/* Тулбар графика — строка над полотном в жанре TradingView: вид, слои,
   масштаб, полный экран. aspect-ratio полотна повторяет пропорции
   SVG-viewBox своей раскладки. */
.bt .chart-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 6px; }
.bt .chart-toolbar .ct-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bt .chart-mode, .bt .tv-seg, .bt .tv-zoom { display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.bt .chart-mode button, .bt .tv-seg button, .bt .tv-zoom button { border: 0; background: transparent; color: var(--t4); font: inherit; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; cursor: pointer; }
.bt .chart-mode button.on, .bt .tv-seg button.on { background: var(--bg-tertiary); color: var(--t1); }
.bt .chart-mode button:hover, .bt .tv-seg button:hover, .bt .tv-zoom button:hover { color: var(--t1); }
.bt .tv-zoom button { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px; font-size: 13px; line-height: 1; }
.bt .tv-bar { display: flex; align-items: center; gap: 6px; }
/* display: flex у класса перебивает [hidden] браузера — линейному виду
   слои свечей и масштаб не нужны, гасим их явно. */
.bt .tv-bar[hidden], .bt .tv-zoom[hidden], .bt .tv-hint[hidden], .bt .tv-note[hidden] { display: none; }
.bt .ct-full { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--t4); border-radius: 8px; cursor: pointer; }
.bt .ct-full:hover, .bt .ct-full.on { color: var(--t1); border-color: var(--border-h); }
.bt .tv-chart { width: 100%; aspect-ratio: 2 / 1; position: relative; }
/* Lightweight Charts верстает своё полотно ТАБЛИЦЕЙ, а она стоит внутри
   таблицы скринера — и правила ячеек протекали внутрь: зелёная полоса
   .chart-row td рисовалась у каждой внутренней ячейки двумя вертикальными
   линиями по краям полотна (жалоба Антона 22.08), а padding .bt tbody td
   сдвигал сам график. Сбрасываем ячейкам библиотеки всё табличное. */
.bt .tv-chart table, .bt .tv-chart tr, .bt .tv-chart td {
  padding: 0; border: 0; background: transparent; box-shadow: none;
  font-size: inherit; vertical-align: top;
}
.bt-inline .tv-chart { aspect-ratio: 9 / 5; }
/* Легенда поверх свечей: пара, интервал, OHLC и объём — первое, что читает
   глаз, привыкший к TradingView. Кликам не мешает. */
.bt .tv-legend {
  position: absolute; top: 6px; left: 10px; z-index: 3; pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  font-size: 11px; line-height: 1.5; color: var(--t3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-shadow: 0 1px 3px rgba(13, 14, 18, 0.85);
}
.bt .tv-legend .tvl-title { color: var(--t1); font-weight: 600; }
.bt .tv-legend .tvl-ohlc { display: inline-flex; gap: 9px; }
.bt .tv-legend .tvl-ohlc.pos b, .bt .tv-legend .tvl-chg.pos { color: var(--pos); }
.bt .tv-legend .tvl-ohlc.neg b, .bt .tv-legend .tvl-chg.neg { color: var(--neg); }
.bt .tv-legend b { font-weight: 600; color: var(--t1); }
.bt .tv-legend .tvl-vol { flex-basis: 100%; color: var(--t4); }
.bt .tv-legend .tvl-vol b { color: var(--t2); }
/* Колесо принадлежит списку — подсказка появляется ровно в тот момент, когда
   его крутят над графиком. */
.bt .tv-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  pointer-events: none; background: rgba(19, 21, 26, 0.94); border: 1px solid var(--border-h);
  border-radius: 10px; padding: 7px 12px; font-size: 12px; color: var(--t2); white-space: nowrap;
}
.bt .tv-note { font-size: 10.5px; color: var(--t4); margin-top: 4px; }
.bt .tv-depth { border: 1px solid var(--border); background: var(--bg-surface); color: var(--t4); font: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 8px; cursor: pointer; }
.bt .tv-depth:hover { color: var(--t1); }
.bt .tv-depth.on { color: var(--t1); border-color: var(--border-h); }
/* Полный экран: там колесо зумит без модификатора, а диапазон тянется мышью
   в полный рост. Закрывается кнопкой или Esc. */
.bt .chart-wrap.is-full {
  position: fixed; inset: 12px; z-index: 200; margin: 0; display: flex; flex-direction: column;
  background: var(--bg-secondary); border: 1px solid var(--border-h); border-radius: 14px;
  padding: 10px 12px 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.bt .chart-wrap.is-full::before { content: ""; position: fixed; inset: 0; background: rgba(6, 7, 10, 0.72); z-index: -1; }
/* Колонки въезжают анимацией bt-rise с fill: both — конечный transform висит
   на них навсегда и делает колонку системой координат для position: fixed.
   На время полного экрана его надо снять, иначе график разворачивается в
   границах своей колонки, а не экрана. */
.bt.is-chart-full .explorer, .bt.is-chart-full .panelcol { animation: none; transform: none; }
.bt .chart-wrap.is-full .tv-chart { flex: 1; aspect-ratio: auto; min-height: 0; }
.bt .chart-wrap.is-full .chart-svg { flex: 1; height: 100%; min-height: 0; }
body.bt-noscroll { overflow: hidden; }
@media (max-width: 640px) { .bt .chart-wrap.is-full { inset: 6px; padding: 8px; } }
/* На узком экране тулбар переносился в три строки и съедал высоту самого
   графика: кнопки масштаба там лишние — пинчем удобнее, а полный экран
   остаётся. */
@media (max-width: 640px) { .bt .chart-toolbar .tv-zoom { display: none; } }
.bt .tip {
  position: absolute; z-index: 5; pointer-events: none; display: none;
  background: rgba(19, 21, 26, 0.95); border: 1px solid var(--border-h); border-radius: 8px;
  padding: 4px 8px; font-size: 11px; color: var(--t2); white-space: nowrap;
}
.bt .tip b { color: var(--t1); font-weight: 600; }

/* Вход двумя карточками — референс: блок Deposit в Metrix Simulate (скрин
   Антона 20.08). Количество токена — главное (им входишь), доллары мелким,
   доля бейджем у тикера. */
.bt .deposit:empty { display: none; }
.bt .deposit .dep-k {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 6px;
}
.bt .dep-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt .dcard { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; min-width: 0; }
.bt .dcard .dh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t2); }
.bt .dcard .dh .pc { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--t3); }
.bt .dcard .dv { font-size: 16px; font-weight: 700; margin-top: 3px; color: var(--t1); }
.bt .dcard .ds { font-size: 11.5px; color: var(--t4); }
.bt .deposit { margin: 2px 0 12px; }

.bt .hero-res { margin-bottom: 6px; }
.bt .hero-res .k {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 4px; display: flex; align-items: center; gap: 5px;
}
.bt .hero-res > b { display: block; font-size: 30px; font-weight: 700; color: var(--pos); letter-spacing: -0.02em; line-height: 1.15; }
.bt .hero-tok { font-size: 14px; font-weight: 500; color: var(--t1); margin-top: 3px; }
.bt .hero-vol { font-size: 12px; color: var(--t3); margin-top: 2px; }
.bt .hero-vol:empty { display: none; }
.bt .hero-spark { display: none; width: 100%; height: 30px; margin-top: 8px; }
.bt .hero-spark.show { display: block; }
.bt .hero-spark rect { fill: var(--pos); opacity: .45; transition: opacity .1s ease; }
.bt .hero-spark rect:hover { opacity: 1; }
.bt .formula { font-size: 13px; color: var(--t3); margin-bottom: 14px; }
.bt .formula b { color: var(--t1); font-weight: 600; }

/* Вердикт устойчивости лидерства (бэклог #14). Заметен настолько, чтобы его
   прочли раньше плиток, но не красный: это не ошибка расчёта, а оговорка о
   том, чего число не значит. Паттерн GrowthBook — «inconclusive» отдельным
   цветом от победы и поражения; «пулы равны» уходит в нейтральный серый,
   потому что там предупреждать не о чем, только сообщить. */
.bt .verdict {
  display: flex; gap: 9px; align-items: flex-start;
  margin: -4px 0 14px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--t2);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28); border-radius: 8px;
}
.bt .verdict svg { flex: none; margin-top: 1px; color: var(--warn); }
.bt .verdict b { display: block; color: var(--t1); font-weight: 650; }
.bt .verdict.tie { background: rgba(255, 255, 255, 0.04); border-color: var(--border-h); }
.bt .verdict.tie svg { color: var(--t3); }
.bt .verdict[hidden] { display: none; }
.bt .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.bt .tile { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.bt .tile-net { border-color: var(--border-a); box-shadow: 0 0 24px rgba(16, 185, 129, 0.08); }
.bt .tile-net .v { color: var(--pos); }
.bt .tile-net .v.neg { color: var(--neg); }
.bt .tile .k { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.bt .tile .v { font-size: 17px; font-weight: 600; }
.bt .tile .s { font-size: 12px; color: var(--t2); margin-top: 2px; }
.bt .tile .v.red { color: var(--neg); }
.bt .meter { height: 4px; border-radius: 4px; background: var(--bg-tertiary); margin-top: 8px; overflow: hidden; }
.bt .meter i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s ease; }
.bt .qi { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--t4); color: var(--t4); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.bt .qi .hiw-pop { width: 250px; left: auto; right: -10px; }
/* Панель прокручивается (overflow-y: auto ⇒ и по горизонтали клип), поэтому
   тултип, уходящий влево от иконки, срезался её краем. Якорь — СТРОКА
   ЗАГОЛОВКА, под которой он и должен появляться: раньше якорем был весь
   блок, и подсказка открывалась под ним — далеко от знака вопроса, к
   которому относится (жалоба Антона 22.08). */
.bt .pool-rail .k,
.bt .pool-rail .sec-label,
.bt .pool-rail .sim-k { position: relative; }
.bt .pool-rail .qi { position: static; }
.bt .pool-rail .qi .hiw-pop { left: 0; right: auto; width: 300px; }
/* Правая колонка плиток: попап растёт влево, иначе выходит за край панели. */
.bt .pool-rail .tiles > *:nth-child(even) .qi .hiw-pop { left: auto; right: 0; }
.bt .qi:hover .hiw-pop { opacity: 1; transform: none; pointer-events: auto; }

/* Вкладки панели (решение Антона 21.08): «Результат» — факт бэктеста,
   «Симуляция» — блок Simulate performance. Вкладки вместо ещё пяти блоков
   в перегруженной колонке. */
.bt .rail-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.bt .rail-tabs button { border: 0; background: transparent; color: var(--t3); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 0; border-radius: 7px; cursor: pointer; }
.bt .rail-tabs button.on { background: var(--bg-tertiary); color: var(--t1); }
.bt .rail-pane[hidden] { display: none; }

/* Симуляция: карточки Strategy A/B (жанр Poolfish/Metrix), строки IL/PnL,
   поле цены-гипотезы, days-to-cover. */
/* База сравнения над карточками: от неё считаются все ±% блока. */
.bt .sim-in { font-size: 11.5px; color: var(--t4); margin-bottom: 8px; }
.bt .sim-in:empty { display: none; }
.bt .scard { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; margin-bottom: 10px; }
.bt .scard .sc-note { font-size: 11px; color: var(--t4); margin-top: 4px; }
.bt .scard .sc-note:empty { display: none; }
.bt .scard .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt .scard .sc-k { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); display: inline-flex; align-items: center; gap: 5px; }
.bt .scard .sc-tag { font-size: 11px; color: var(--t4); }
.bt .sc-scen { background: var(--bg-tertiary); color: var(--t2); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 11.5px; padding: 3px 6px; max-width: 55%; }
.bt .scard .sc-line { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.bt .scard .sc-val { font-size: 20px; font-weight: 700; color: var(--t1); }
/* Вход вплотную к итогу: «$4,000 → $5,094.60» читается как переход, а не
   как два несвязанных числа. */
.bt .sc-from { font-size: 13px; font-weight: 600; color: var(--t4); }
.bt .sc-pct { font-size: 12px; font-weight: 600; }
.bt .sc-pct.pos { color: var(--pos); }
.bt .sc-pct.neg { color: var(--neg); }
/* Состав строками-таблицей (референс Metrix): лого · тикер · доля ·
   количество · $, числа вправо — колонку глаз сканирует, текст читает. */
.bt .scard .sc-comp { margin-top: 5px; }
.bt .scard .scr { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 7px; padding: 3px 0; font-size: 12.5px; }
.bt .scr-sym { color: var(--t2); font-weight: 600; }
.bt .scr-sym i { font-style: normal; color: var(--t4); font-weight: 500; margin-left: 5px; }
.bt .scr-amt { color: var(--t1); text-align: right; }
.bt .scr-usd { color: var(--t4); text-align: right; min-width: 62px; }
/* Нулевая нога (цена вне диапазона) видима, но приглушена. */
.bt .scard .scr.zero { opacity: .45; }
/* Доход — такая же строка карточки, как токены: метка слева, сумма в том
   же правом столбце, что доллары ног (референс Poolfish, «LP Yield»). */
.bt .scard .sc-yield { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12.5px; }
.bt .scy-k { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); font-weight: 600; }
.bt .scy-v { color: var(--pos); font-weight: 600; text-align: right; }
/* Горизонт комиссий — любое число дней: равное окну = факт, иное = прогноз.
   Стрелки спиннера убраны: число набирается, а не докручивается. */
.bt .sc-days { width: 52px; background: var(--bg-tertiary); color: var(--t1); border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 6px; text-align: right; -moz-appearance: textfield; }
.bt .sc-days::-webkit-outer-spin-button, .bt .sc-days::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bt .sc-days:focus { outline: none; border-color: var(--border-h); }
.bt .sc-days:disabled { opacity: .4; }
.bt .scy-d { color: var(--t4); font-weight: 500; margin-left: -2px; }
/* Доллары и проценты — своими колонками (референс Poolfish): взгляд идёт
   по столбцу, а не разбирает «$7.98 · 0.7%». Правый столбец шире $-колонки
   состава ровно настолько, чтобы «−100.0%» не ломал сетку. */
.bt .sim-rows { margin: 12px 0; }
.bt .sim-rows .srow { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--t2); }
.bt .sim-rows .srow b { font-weight: 600; text-align: right; }
.bt .sim-rows .srow .p { font-weight: 600; text-align: right; min-width: 52px; }
.bt .sim-rows .srow b.pos, .bt .sim-rows .srow .p.pos, .bt .sp-delta.pos { color: var(--pos); }
.bt .sim-rows .srow b.neg, .bt .sim-rows .srow .p.neg, .bt .sp-delta.neg { color: var(--neg); }
.bt .sim-price { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.bt .sp-field label { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 4px; }
.bt .sp-in { position: relative; }
.bt .sp-in input { width: 100%; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; color: var(--t1); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 64px 8px 12px; }
.bt .sp-in input:focus { outline: none; border-color: var(--border-h); }
/* Введено не число — панель показывает факт, и поле обязано это признать. */
.bt .sp-in input.bad { border-color: var(--neg); color: var(--neg); }
.bt .sp-delta { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 600; }
.bt .sp-base { font-size: 11px; color: var(--t4); margin-top: 3px; }
.bt .sp-base:empty { display: none; }
/* Стейбл-нога: цена названа, ручки нет. */
.bt .sp-stable { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--t3); }
.bt .sp-stable[hidden] { display: none; }
.bt .sp-reset { align-self: flex-start; border: 0; background: none; color: var(--t3); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.bt .sp-reset:hover { color: var(--t1); }
.bt .sim-rows .srow[hidden] { display: none; }
.bt .sim-empty { font-size: 12.5px; color: var(--t3); padding: 12px 0; }

/* Гистограмма текущей ликвидности (волна 1 п.5) — референс: Liquidity
   Distribution в Metrix Simulate. Бары в диапазоне подсвечены, ползунки
   Min/Max таскаются прямо по гистограмме. */
.bt .liqmap { margin-bottom: 16px; }
.bt .liqmap .k { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.bt .liq-svg { display: block; width: 100%; height: 110px; touch-action: none; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); }
.bt .liq-svg .lbar { fill: var(--t4); opacity: .35; }
.bt .liq-svg .lbar.in { fill: var(--accent); opacity: .75; }
.bt .liq-svg .lzone { fill: var(--accent); opacity: .07; }
.bt .liq-svg .lcur { stroke: var(--t1); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.bt .liq-svg .lhandle { cursor: ew-resize; }
.bt .liq-svg .lhandle .lhit { fill: transparent; }
.bt .liq-svg .lhandle line { stroke: var(--accent); stroke-width: 1.5; }
.bt .liq-svg .lhandle .lgrip { fill: var(--accent); }
.bt .liq-note { font-size: 11px; color: var(--t4); margin-top: 4px; min-height: 14px; }
.bt .liq-note:empty { display: none; }

.bt .actions { display: flex; gap: 10px; margin-bottom: 14px; }
.bt .btn-sec {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--t1);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px; padding: 10px 0; cursor: pointer; transition: all .15s ease;
  text-decoration: none; /* «Открыть позицию» — <a> в той же одёжке */
}
.bt .btn-sec:hover { border-color: var(--border-h); background: var(--bg-tertiary); }

.bt .panel-foot { border-top: 1px solid var(--border); padding-top: 12px; font-size: 12px; color: var(--t3); display: grid; gap: 4px; }

@media (max-width: 1100px) {
  .bt .cols { grid-template-columns: 1fr; }
  /* Деньги раньше выбора пула. В одну колонку блоки ложатся в порядке DOM, и
     таблица пулов высотой ~2300px отодвигала результат с комиссиями и кнопку
     на 91-93% высоты страницы — пять экранов прокрутки на телефоне. Замер
     18.08: 72 расчёта дали 3 клика, причём один с этой кнопки.
     Человек приходит по ссылке из поста считать свой диапазон; таблица нужна
     ему потом, когда он захочет сравнить другой пул. */
  .bt .panelcol { order: -1; }
  .bt .params-card { position: static; }
}
@media (max-width: 640px) {
  .bt { padding: 20px 14px 48px; }
  .bt thead th:nth-child(2), .bt tbody td.c-tvl { display: none; }
  .bt thead th:nth-child(3), .bt tbody td.c-fees { display: none; }
  /* Pool rows fold into cards: identity + Net on top, the rest as a meta
     line below (the block header disappears with the columns). */
  .bt tr.pool-head { display: none; }
  .bt .pool-in {
    grid-template-columns: 1fr auto; grid-template-areas: "id apr" "meta meta";
    row-gap: 3px; padding: 10px 12px 10px 16px;
  }
  .bt .pool-in > .pool-id { grid-area: id; }
  .bt .pool-in > .papr { grid-area: apr; }
  .bt .pool-in > .pcell, .bt .pool-in > .pfees, .bt .pool-in > .pinr { display: none; }
  .bt .pool-flat-in {
    grid-template-columns: 1fr auto; grid-template-areas: "pair apr" "id id" "meta meta";
    row-gap: 3px; padding: 10px 12px 10px 16px;
  }
  .bt .pool-flat-in > .fpair { grid-area: pair; }
  .bt .pool-flat-in > .pool-id { grid-area: id; }
  .bt .pool-flat-in > .papr { grid-area: apr; }
  .bt .pool-flat-in > .pcell, .bt .pool-flat-in > .pfees, .bt .pool-flat-in > .pinr { display: none; }
  .bt .pool-flat-head { grid-template-columns: 1fr auto; }
  .bt .pool-flat-head > span:not(:first-child):not(:last-child) { display: none; }
  .bt .pmeta { display: block; grid-area: meta; min-width: 0; font-size: 11.5px; color: var(--t3); line-height: 1.5; }
  .bt .pmeta b { color: var(--t2); font-weight: 500; }
  /* The chip names the scope of the comparison ("each in its own range"), and
     a clipped rule reads as a different rule — "каждый в своё…". Narrow
     screens wrap it instead of cutting it. */
  .bt .colsub-chip { max-width: 34vw; white-space: normal; text-overflow: clip; }
  .bt thead th, .bt tbody td { padding-left: 10px; padding-right: 10px; }
  /* The chevron is decoration — the whole row is the tap target. */
  .bt thead th:last-child, .bt tr.pair-row td:last-child { display: none; }
  /* A hidden hover-pop is still an absolute box: anchored left it pushed
     body's scroll width past the viewport on phones. */
  .bt .hiw-pop { left: auto; right: 0; width: min(340px, 86vw); }
}

/* ==========================================================================
   FIXED WORK AREA (?layout=fixed) — opt-in preview, 2026-08-14.

   The default page is one long document scroll, so the taller right rail
   (params 426px + selected pool 990px against an 880px viewport) slides up
   under the sticky params card exactly when you scroll down to reach the
   pools at the bottom of the list. Referenced solution (vfat, DefiLlama,
   PatternFly primary-detail): the work area owns the viewport and each
   column scrolls inside itself, so list and result never move.
   ========================================================================== */
/* The body class comes from the server (content_for :body_class), not from
   :has() — Safari applies :has()-driven overflow on the root inconsistently,
   and this rule has to hold in every browser or the page keeps scrolling. */
html:has(body.yields-fixed) { height: 100%; overflow: hidden; }
body.yields-fixed { height: 100%; overflow: hidden; }
/* Both shells: the authenticated sidebar layout and the public one. */
body.yields-fixed .app-layout { min-height: 0; height: 100vh; }
body.yields-fixed .main-content { min-height: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* Шапка занимает своё место, рабочая область — ВСЁ остальное. Раньше и шапка,
   и область были по 100vh: страница вылезала за экран на высоту шапки, а
   нижние 60px срезались. Внешние отступы это прятали — с переходом на вёрстку
   от края до края (22.08) срез стало видно. */
body.yields-fixed { display: flex; flex-direction: column; }
body.yields-fixed .public-nav { flex: 0 0 auto; }
/* 61px шапки сайта — тоже рабочая область: в оболочке на весь экран она
   живёт компактнее. */
@media (min-width: 1101px) {
  body.yields-fixed .public-nav-container { height: 48px; max-width: none; padding: 0 16px; }
}
body.yields-fixed .public-content {
  min-height: 0; overflow: hidden;
  flex: 1 1 auto; height: auto; display: flex; flex-direction: column;
}

.bt-fixed {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding-top: 18px; padding-bottom: 16px;
  box-sizing: border-box;
}

/* The marketing header costs 91px of permanent work area — dropped here. */
.bt-fixed .page-head { display: none; }
/* Слаг-страница пула — исключение: пришедшему из выдачи нужен контекст
   (какой пул предвыбран), краулеру — видимый h1. Компактнее маркетинговой
   шапки: без label, заголовок мельче. */
.bt-fixed.bt-poolpage .page-head { flex: 0 0 auto; margin-bottom: 10px; }
.bt-fixed.bt-poolpage .page-label { display: none; }
.bt-fixed.bt-poolpage .page-title { font-size: 20px; }
.bt-fixed .bt-teaser { padding-top: 8px; padding-bottom: 8px; }

.bt-fixed .cols { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.bt-fixed .cols > * { min-height: 0; }

/* Left: toolbar and teaser hold their place, only the table scrolls. */
.bt-fixed .explorer { display: flex; flex-direction: column; min-height: 0; }
.bt-fixed .explorer > .card {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.bt-fixed .explorer > .freshline { flex: 0 0 auto; }
.bt-fixed .explorer > .card thead th,
.bt-fixed .explorer > .card .pool-flat-head {
  position: sticky; top: 0; z-index: 6;
  background: var(--bg-secondary); box-shadow: 0 1px 0 var(--border);
}

/* ==========================================================================
   Экран сравнения: от края до края (решение Антона 22.08)
   ==========================================================================
   Внешние поля складывались трижды — padding страницы (40) + карточки (32) по
   бокам и ~98px по вертикали, — а колонки стояли долями 7fr/5fr, из-за чего на
   широком мониторе отчёт раздувался и обкрадывал таблицу. Панель получает
   фиксированную ширину: она показывает одно и то же число символов на любом
   экране, а весь избыток ширины принадлежит списку. Так живут скринеры с
   плотными метриками (DefiLlama, TradingView, CoinMarketCap). */
@media (min-width: 1101px) {
  /* Ширина: не только max-width и padding, но и `margin: 0 auto` из общего
     .public-content — в колонке-флексе авто-поля центрируют элемент по его
     содержимому, и на 2000px оболочка стояла узкой полосой с 255px пустоты
     по бокам (замечание Антона 22.08). */
  body.yields-fixed .public-content { padding: 0; max-width: none; margin: 0; width: 100%; }
  .bt-fixed { padding: 8px 12px 10px; margin: 0; width: 100%; }
  /* Плотность строки: 44 → 38px. Каждые 6px — это ещё один пул на экране. */
  .bt-fixed thead th { padding: 8px 12px; }
  .bt-fixed tbody td { padding: 8px 12px; font-size: 13.5px; }
  .bt-fixed .pool-flat-in { padding: 6px 12px 6px 14px; }
  .bt-fixed .pool-in { padding: 6px 12px 6px 14px; }
  /* Числа расходятся по ширине, а не жмутся к правому краю: с уходом графика
     список получил ~300px, и фиксированные колонки оставляли их пустотой
     между парой и TVL. Доли — как в таблицах DefiLlama/CoinMarketCap. */
  .bt-fixed .pool-flat-head,
  .bt-fixed .pool-flat-in {
    grid-template-columns: 104px minmax(190px, 2.1fr) repeat(5, minmax(72px, 1fr));
  }
  .bt-fixed .pool-flat-head { padding: 8px 12px 6px 14px; }
  .bt-fixed .pcard { padding: 12px 14px; }
  .bt-fixed .toolbar { margin-bottom: 10px; }
}

/* ==========================================================================
   Страница пула (/yields/:chain/:slug) — работа «задать диапазон и решиться»
   ==========================================================================
   Тот же документ, другая раскладка: список уходит совсем (сравнение живёт на
   /yields), график занимает левую колонку во всю высоту, отчёт — правую.
   Обёртки pool-card/pool-body уже есть — они раскрываются в грид через
   display: contents, поэтому ни один узел не переезжает и ни один таргет
   Stimulus не теряется. */
@media (min-width: 1101px) {
  .bt-fixed.bt-poolpage .cols { grid-template-columns: minmax(0, 1fr) 360px; }
  .bt-fixed.bt-poolpage .panelcol,
  .bt-fixed.bt-poolpage .pool-card,
  .bt-fixed.bt-poolpage .pool-body { display: contents; }
  .bt-fixed.bt-poolpage .pool-card > .sec-label { display: none; }
  .bt-fixed.bt-poolpage .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Идентичность пула называется на странице ОДИН раз. До 22.08 её повторяли
     трижды: h1, шапка панели и подпись графика — а высота уходила у самого
     графика. Остаются h1 (он же посадочный заголовок для поиска) и строка
     метрик; маркетинговый подзаголовок и инфо-строка на этой странице лишние —
     их содержимое переехало в метрики. */
  .bt-fixed.bt-poolpage .pool-stage {
    grid-column: 1; min-height: 0; display: flex; flex-direction: column;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px;
    padding: 10px 12px 12px;
  }
  .bt-fixed.bt-poolpage .pool-rail {
    /* position: relative обязателен: подсказки панели позиционируются
       абсолютом от ближайшего позиционированного предка, и без него они
       уезжали на всю ширину страницы (1440px вместо 360). */
    grid-column: 2; min-height: 0; position: relative;
    display: flex; flex-direction: column;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px;
    padding: 12px 14px;
  }
  /* График забирает всю оставшуюся высоту сцены — ради этого страница и есть. */
  .bt-fixed.bt-poolpage .chart-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
  .bt-fixed.bt-poolpage .tv-chart { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .bt-fixed.bt-poolpage .chart-svg { flex: 1 1 auto; min-height: 0; height: 100%; }
  /* Шапка страницы здесь — посадочная для поиска, но одной строкой. */
  .bt-fixed.bt-poolpage .page-head { margin-bottom: 8px; }
  .bt-fixed.bt-poolpage .page-title { font-size: 17px; line-height: 1.35; }
  .bt-fixed.bt-poolpage .page-sub, .bt-fixed.bt-poolpage .page-poolinfo { font-size: 12px; margin-top: 2px; }
}
.bt .stage-back {
  display: inline-flex; align-items: center; gap: 4px; align-self: center;
  padding: 3px 9px 3px 6px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--t3); text-decoration: none;
  border: 1px solid var(--border); background: var(--bg-surface); transition: color .15s ease;
}
.bt .stage-back:hover { color: var(--t1); border-color: var(--border-h); }
/* Пара в лицо: иконки токенов перед заголовком — так пул узнаётся раньше,
   чем прочитан (референс Metrix). */
.bt .ph-icons { display: inline-flex; align-items: center; }
.bt .ph-icons img { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); }
.bt .ph-icons img + img { margin-left: -7px; }
/* Чипы пулов пары: A/B тиров без возврата в список. Выбранный — акцентом,
   лучший по Net — зелёным числом; у пары с одним пулом блок не рисуется. */
.bt .poolchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bt .poolchips:empty { display: none; }
.bt .poolchips .pc-k { display: flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t4); margin-right: 2px; }
.bt .poolchips button {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--border); background: var(--bg-surface); border-radius: 9px;
  font: inherit; font-size: 12px; color: var(--t2); cursor: pointer; transition: all .12s ease;
}
.bt .poolchips button:hover { border-color: var(--border-h); color: var(--t1); }
.bt .poolchips button.on { border-color: var(--border-a); background: rgba(16, 185, 129, 0.08); color: var(--t1); }
.bt .poolchips button.best b { color: var(--accent); }
.bt .poolchips button b.mute { color: var(--t4); }
.bt .poolchips button b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bt .poolchips button b.pos { color: var(--pos); }
.bt .poolchips button b.neg { color: var(--neg); }
.bt .poolchips .pc-fee { font-weight: 600; }
/* Чипы других сетей идут второй группой: логотип сети вместо ставки. */
.bt .poolchips .pc-chain { width: 14px; height: 14px; border-radius: 50%; }
.bt .poolchips .pc-k + button { margin-left: 0; }

/* Список на странице пула не нужен ни на каком экране: страница про один пул,
   сравнение живёт на /yields. Правило вне медиа-запроса — на телефоне работа
   ровно та же. */
.bt-fixed.bt-poolpage .explorer { display: none; }
/* Идентичность пула называется ОДИН раз на любом экране: заголовок с иконками
   пары и строка метрик под ним (образец — шапка Metrix). Маркетинговый
   подзаголовок, SEO-инфо-строка и бейджи комиссии/сети — повтор заголовка. */
.bt-poolpage .page-sub,
.bt-poolpage .page-poolinfo,
.bt-poolpage .panel-head .panel-pair,
.bt-poolpage .panel-head .feechip,
.bt-poolpage .panel-head .chainb { display: none; }
/* Специфичность равна правилу SEO-слоя (.bt-fixed.bt-poolpage), которое
   держало шапку блоком, — иначе ссылка-возврат и заголовок вставали двумя
   строками, и вертикали не совпадали (замечание Антона 23.08). */
.bt.bt-poolpage .page-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 2px;
}
.bt.bt-poolpage .page-head > * { align-self: center; }
.bt .ph-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bt-poolpage .page-title { font-size: 19px; line-height: 1.3; margin: 0; }
.bt-poolpage .panel-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px;
}
.bt-poolpage .ph-sub { margin-top: 0; }
/* На узком экране график получает пропорцию поближе к квадрату: 9/5 при
   ширине телефона давало полоску в 160px. */
@media (max-width: 1100px) {
  .bt-fixed.bt-poolpage .tv-chart { aspect-ratio: 4 / 3; }
  .bt-fixed.bt-poolpage .page-title { font-size: 18px; }
}

/* Экран сравнения живёт без правой панели (решение Антона 23.08). Проверка,
   которая это решила: из восьми блоков панели ОДИН добавлял знание, которого
   нет в строке (спарклайн), три повторяли колонки (комиссии, APR, в диапазоне),
   три одинаковы у всех пулов пары (состав входа, итог позиции, vs HODL) —
   то есть панель не помогала сравнивать. Разметка остаётся: её таргеты питают
   шапку, бар параметров и страницу пула, а вглубь уводит клик по строке. */
.bt-fixed:not(.bt-poolpage) .panelcol { display: none; }
@media (min-width: 1101px) {
  .bt-fixed:not(.bt-poolpage) .cols { grid-template-columns: minmax(0, 1fr); }
  .bt-parambar.bt-fixed:not(.bt-poolpage) .cols { grid-template-columns: minmax(0, 1fr); }
}

/* Панель на экране сравнения — карточка выбранного пула, а не полный отчёт:
   симуляция, состав входа и гистограмма ликвидности относятся к уже
   выбранному пулу и живут на его странице (слаг-роут). */
.bt-fixed:not(.bt-poolpage) .rail-tabs,
.bt-fixed:not(.bt-poolpage) .deposit,
.bt-fixed:not(.bt-poolpage) .liqmap { display: none; }

/* Right: the rail scrolls as one, so nothing can hide behind the params. */
.bt-fixed .panelcol { overflow-y: auto; overscroll-behavior: contain; }

/* Тёмная схема документа: без неё браузер рисует СВЕТЛЫЙ системный ползунок
   (скрин Антона 22.08) — webkit-правила ниже работают не во всех движках и
   не для overlay-скроллбаров. scrollbar-color закрывает Firefox и новые
   Chromium, где псевдоэлементы игнорируются. */
.bt { color-scheme: dark; }
.bt-fixed .explorer > .card,
.bt-fixed .panelcol { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.bt-fixed .params-card { position: static; }

.bt-fixed .explorer > .card::-webkit-scrollbar,
.bt-fixed .panelcol::-webkit-scrollbar { width: 8px; }
.bt-fixed .explorer > .card::-webkit-scrollbar-thumb,
.bt-fixed .panelcol::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .13); border-radius: 8px; }
.bt-fixed .explorer > .card::-webkit-scrollbar-thumb:hover,
.bt-fixed .panelcol::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }
.bt-fixed .explorer > .card::-webkit-scrollbar-track,
.bt-fixed .panelcol::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   CALC PARAMS BAR (?layout=bar) — opt-in preview, 2026-08-15.

   The params drive the "your result" column of every pool in the list, not
   just the selected one, so they belong above both columns as the conditions
   of the experiment. Measured reason for moving them out of the rail: at
   1440x900 the rail gives 802px, the params card ate 438 of it, and the
   headline number of the whole tool ("fees earned", 365px into the pool card)
   started below the fold.

   Built as one toolbar of four segments — a shared container, 1px dividers,
   every segment on the same label / control / note grid. Three rules:

     1. all four controls are exactly 41px tall, and "period" and "preset" are
        the same control because they are the same kind of choice. The percent
        readouts left the steppers for the note row to keep that one height;
     2. the leftover width goes to the range segment, so the strip ends flush
        at the right edge instead of being left-packed against a void;
     3. the control row never wraps — the controller measures it and drops to
        a narrower tier instead (see fitBar). Widths here are not a function of
        the viewport: the authenticated shell is a 260px sidebar and a 1200px
        cap narrower than the public one — 876px of content at 1280 viewport.
   ========================================================================== */
/* Высота бара — рабочая область списка: каждые 6px здесь стоят строки пула.
   Диета 22.08: 109 → ~88px без потери элементов. */
.bt .pbar {
  position: relative; flex: 0 0 auto; min-width: 0; margin-bottom: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px;
  padding: 7px 16px 5px;
}
.bt .pbar.pulse { animation: bt-panelpulse 1s ease; }
.bt .pb-groups { display: flex; flex-wrap: nowrap; align-items: stretch; }

/* A segment: label / control / note, with the divider as its left border. The
   note is out of flow — nowrap live text would otherwise hand its full width
   to the bar's min-content and push the work area past its shell. */
.bt .pb-g {
  position: relative; flex: 0 0 auto;
  display: flex; flex-direction: column;
  /* Bottom padding reserves the note row, which is out of flow below. */
  padding: 0 16px 22px; border-left: 1px solid var(--border);
}
.bt .pb-g:first-child { border-left: none; padding-left: 0; }
.bt .pb-g:last-child { padding-right: 0; }
/* Slack is shared out in proportion instead of landing on one segment: the
   strip ends flush at the right edge on a 2560px monitor without two absurdly
   long price inputs next to a cramped period. Nothing shrinks — a deficit is
   the tier ladder's job, not flexbox's. */
.bt .pb-amt { flex: 0.6 0 auto; }
.bt .pb-per { flex: 1 0 auto; }
.bt .pb-rng { flex: 1.4 0 auto; min-width: 300px; }
.bt .pb-pre { flex: 1 0 auto; }
/* Экран сравнения: числового диапазона в баре нет — числа принадлежат активу
   и живут на странице пула. Правило показывает сегмент «Диапазон» (бывший
   «Пресет»). Группа скрыта, а не вырезана из DOM: paintRange и таргеты
   min/max продолжают работать без сторожей по всему контроллеру. */
.bt.bt-parambar:not(.bt-poolpage) .pb-rng { display: none; }
.bt .pb-g > label {
  display: flex; align-items: center; gap: 5px; height: 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 4px; white-space: nowrap;
}
.bt .pb-ctl { display: flex; align-items: center; height: 38px; }
/* Anchored to the control above it, not to the segment's bottom edge: the
   segments stretch to a common height, so bottom-anchoring made the gap under
   a control depend on how tall its neighbours' notes were — the quick-amount
   pills ended up glued to the field while the text notes floated. Top offset =
   label (14 + 6) + control (41) + 7px of air. */
.bt .pb-note {
  position: absolute; left: 16px; right: 16px; top: 62px;
  display: flex; align-items: center; gap: 12px; height: 16px; overflow: hidden;
  font-size: 11px; line-height: 16px; color: var(--t3);
}
.bt .pb-g:first-child .pb-note { left: 0; }
.bt .pb-g:last-child .pb-note { right: 0; }
.bt .pb-note > * { min-width: 0; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt .pb-note .dilution.show, .bt .pb-note .periodnote.show { display: block; }
.bt .pb-note .ticknote { font-size: 11px; }
.bt .pb-note .ticknote:empty, .bt .pb-note .pct:empty { display: none; }
/* The hint box hangs off the segment label, so it needs the label's edge. */
.bt .pb-g > label .qi .hiw-pop { width: 260px; left: 0; right: auto; }

/* A warning that costs the user a control is a bad trade: the dilution badge
   sits in the label row so the quick amounts stay reachable while the sum is
   being moved around — which is exactly when the warning appears. */
.bt .pb-amt > label .dilution {
  display: none; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--warn); background: rgba(245, 158, 11, 0.12);
  border-radius: 4px; padding: 1px 6px; cursor: help; white-space: nowrap;
}
.bt .pb-amt > label .dilution.show { display: inline-flex; }
.bt .pb-amt > label .dilution::before { content: '⚠'; }
/* The badge must not widen its segment: an appearing warning would otherwise
   push the whole strip into a narrower tier and collapse the presets. The
   label row is free space next to a 132px-wide field, and the badge is sized
   to live inside it. */
.bt .pb-amt > label { overflow: hidden; }

/* Quick amounts live in the note slot of their own segment. */
/* Buttons are taller than a line of note text; they keep the same top offset,
   so the air under the field matches the air under every other control. */
.bt .pb-amt .pb-note { height: 20px; }
.bt .amt-quick { display: flex; gap: 4px; overflow: visible; }
.bt .amt-quick button {
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1;
  color: var(--t3); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px;
  cursor: pointer; transition: all .12s ease;
}
.bt .amt-quick button:hover { color: var(--t1); border-color: var(--border-h); }
.bt .amt-quick button.on {
  color: var(--accent-2); background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
}

/* Controls fill their segment, so no segment ends in dead space. */
/* Same trap as the stepper: width:100% inside an auto-width segment falls back
   to the input's ~200px intrinsic width, which pushed this segment to 235px
   and cost the bar a whole tier. */
.bt .pbar .amount { width: auto; min-width: 132px; height: 38px; box-sizing: border-box; padding: 0 12px; }
.bt .pbar .amount input { flex: 1 1 60px; width: 60px; min-width: 0; font-size: 15px; }
.bt .pbar .seg, .bt .pbar .presets {
  height: 38px; box-sizing: border-box; padding: 3px; gap: 3px; margin-top: 0;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
}
.bt .pbar .seg button { flex: 1 0 auto; padding: 0 10px; border-radius: 7px; }
/* The chosen option carried a 6% luminance step over the unchosen ones, which
   is not a state anyone can read at a glance. It now gets the accent — the
   same green the recomputed numbers speak in, so the bar says "these are the
   conditions those figures came from". */
.bt .pbar .seg button.on, .bt .pbar .presets .chip.on {
  background: rgba(16, 185, 129, 0.13); color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3);
}
/* The others pick a value; this one opens a picker. */
.bt .pbar .seg button.segsep { position: relative; margin-left: 5px; }
.bt .pbar .seg button.segsep::before {
  content: ''; position: absolute; left: -4px; top: 6px; bottom: 6px;
  border-left: 1px solid var(--border);
}
.bt .pbar .rangegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.bt .pbar .stepper {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  height: 38px; box-sizing: border-box; padding: 0 8px 0 12px;
}
/* An explicit basis, not width:100%: a bare input carries a ~250px intrinsic
   width, which the grid honours and which blew this segment up to 588px. The
   basis is what the tier ladder measures; the input still grows with the
   segment when there is slack. */
.bt .pbar .stepper input { flex: 1 1 72px; width: 72px; min-width: 0; }
.bt .pbar .pct { color: var(--t3); }
.bt .pbar .pct .sw { border-bottom: 1px dashed var(--t4); cursor: pointer; }
/* Dates open over the list instead of pushing the row taller. */
.bt .pbar .customdates {
  position: absolute; top: calc(100% - 14px); left: 20px; z-index: 30; width: 300px;
  margin-top: 0; padding: 8px; background: var(--bg-elevated);
  border: 1px solid var(--border-h); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
}

/* Presets are a one-of-a-set choice exactly like the period, so they wear the
   same control instead of a row of floating chips at their own height. */
.bt .pbar .presets { display: flex; flex-wrap: nowrap; align-items: stretch; }
.bt .pbar .presets .chip {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 9px; border: none; border-radius: 7px; background: none;
  font-size: 13px; font-weight: 500; color: var(--t2); white-space: nowrap;
  cursor: pointer; transition: all .15s ease;
}
.bt .pbar .presets .chip:hover { color: var(--t1); }
.bt .pbar .presets .chip.on { background: var(--bg-tertiary); color: var(--t1); }

/* Tier 1 (widest): every preset visible, no trigger needed. */
.bt .pbar .pre-btn { display: none; }
.bt .pre-btn {
  align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--t1);
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; white-space: nowrap; transition: border-color .15s ease;
}
.bt .pre-btn:hover { border-color: var(--border-h); }
.bt .pb-pre.open .pre-btn .cdd-chev { transform: rotate(180deg); }

/* Tiers 2-3: the same chips become the trigger's menu — one renderer, two
   presentations (the network dropdown next door works the same way). */
.bt .pbar.pb-t2 .pre-btn, .bt .pbar.pb-t3 .pre-btn { display: inline-flex; }
.bt .pbar.pb-t2 .pb-pre .pb-ctl, .bt .pbar.pb-t3 .pb-pre .pb-ctl { min-width: 150px; }
.bt .pbar.pb-t2 .presets, .bt .pbar.pb-t3 .presets {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  display: none; flex-direction: column; align-items: stretch; gap: 2px;
  height: auto; min-width: 190px; padding: 6px;
  border-color: var(--border-h); box-shadow: 0 8px 32px rgba(0, 0, 0, .6);
}
.bt .pbar.pb-t2 .pb-pre.open .presets, .bt .pbar.pb-t3 .pb-pre.open .presets { display: flex; }
.bt .pbar.pb-t2 .presets .chip, .bt .pbar.pb-t3 .presets .chip { justify-content: flex-start; height: 32px; }

/* Tier 3: same controls, tighter geometry — nothing gets hidden. */
.bt .pbar.pb-t3 .pb-g { padding-left: 12px; padding-right: 12px; }
.bt .pbar.pb-t3 .pb-note { left: 12px; right: 12px; }
.bt .pbar.pb-t3 .seg button { padding: 0 8px; }
.bt .pbar.pb-t3 .amount { width: 116px; padding: 0 10px; }
.bt .pbar.pb-t3 .stepper { padding: 0 6px 0 10px; }
.bt .pbar.pb-t3 .stepbtns button { width: 22px; }

/* Last resort (a signed-in user around 1150px: 260px of sidebar leaves ~800px
   of work area): wrap instead of clipping a control off the screen. Costs a
   row of height, but no control is ever unreachable. */
.bt .pbar.pb-wrap .pb-groups { flex-wrap: wrap; gap: 12px 0; }
.bt .pbar.pb-wrap .pb-g { border-left: none; padding-left: 0; }

/* The rail now holds one card, so its section label is redundant — and 35px
   of the rail is 35px of the result. */
.bt-parambar .pool-card { margin-top: 0; }
.bt-parambar .pool-card > .sec-label { display: none; }
/* Every pixel here is a pixel of the Net tile at 900px-tall laptops. */
.bt-parambar .chart-wrap { margin: 4px 0 10px; }

/* Wide screens. Two caps used to bind long before the monitor did: .bt at
   1400px and, for signed-in users, `.main-content > *` at 1200px — a 2560px
   monitor ran the tool in 1136px. Lifting them is only half the answer: the
   chart is width-driven (height = 0.46 x rail), so a rail that grows with the
   window makes the pool card taller and gives the win straight back. So the
   surplus goes to the list and the rail is capped where the chart stops
   costing more than it shows.
   Both shell caps come off from the server-rendered body class, not :has() —
   Safari applies :has() on ancestors inconsistently and this decides geometry. */
body.yields-bar .main-content > .bt,
body.yields-bar .public-content { max-width: none; }
/* Ограничение ширины снято 22.08: экран сравнения работает от края до края,
   а лишнюю ширину забирает таблица, не отчёт (панель фиксирована ниже). */
.bt-parambar.bt-fixed { max-width: none; }
/* Guarded by the same breakpoint as the fixed area: this selector outranks the
   single-column rule in the narrow media block, so an unguarded version would
   keep two columns on a phone. */
@media (min-width: 1101px) {
  /* Панель — фиксированные 340px: доля ширины раздувала отчёт на широком
     мониторе и обкрадывала список, ради которого сюда и приходят. */
  .bt-parambar .cols { grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
}

/* Below the fixed-mode threshold the bar becomes an ordinary block: segments
   stack, dividers give way to spacing, notes rejoin their segment. */
@media (max-width: 1100px) {
  .bt .pb-groups { flex-wrap: wrap; gap: 14px 0; }
  .bt .pb-g { flex: 1 1 280px; border-left: none; padding: 0 0 4px; }
  /* Segments stack and controls are free to grow, so the note rejoins the
     flow — left out of flow it would land on top of the control below it. */
  .bt .pb-ctl { height: auto; min-height: 41px; }
  .bt .pb-note {
    position: static; height: auto; margin-top: 6px;
    flex-wrap: wrap; white-space: normal; overflow: visible;
  }
  .bt .pb-note > * { white-space: normal; }
  .bt .pbar .pre-btn { display: none !important; }
  .bt .pbar .presets { position: static; display: flex; flex-direction: row; min-width: 0; }
  .bt .pbar .customdates { left: 0; }
}
@media (max-width: 640px) {
  .bt .pb-g { flex: 1 1 100%; }
  .bt .pbar .amount { width: 100%; }
  /* Side by side, each price box keeps ~85px for the number — enough to clip
     a four-digit price against its stepper buttons. */
  .bt .pbar .rangegrid { grid-template-columns: 1fr; gap: 8px; }
  /* Long labels ("Вся история") wrap the row instead of squeezing a button. */
  .bt .pbar .seg, .bt .pbar .presets { height: auto; min-height: 41px; flex-wrap: wrap; }
  .bt .pbar .seg button, .bt .pbar .presets .chip { flex: 1 0 auto; min-height: 33px; padding: 0 8px; }
  .bt .pbar .customdates { width: auto; left: 0; right: 0; }
}

/* Вердикт-чип строки (волна 1, п.3): жёлтый — лидерству строки верить рано
   (thin/short_window), серый — пулы пары вровень. Устойчивый лидер чипа не
   получает: чип — предупреждение, а не украшение. Полный текст — в title. */
.bt .vchip {
  display: inline-block; font-size: 10px; font-weight: 600; line-height: 1.5;
  padding: 1px 7px; border-radius: 99px; margin-left: 7px; vertical-align: 2px;
  white-space: nowrap; cursor: help;
}
.bt .vchip.warn { color: var(--warn); background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .3); }
.bt .vchip.tie { color: var(--t3); background: var(--bg-elevated); border: 1px solid var(--border-h); }

/* ===== Сцена (?layout=scene): вариант A из scene_mockup.html =====
   Сцена пула на всю ширину бара (график слева ~7/12, метрики справа ~5/12 —
   прежняя пропорция колонок), скринер во всю ширину под ней. Страница снова
   скроллится документом. Обёртки stage/rail в колоночных раскладках
   схлопнуты display: contents, поэтому там DOM ведёт себя как раньше. */
.bt .pool-body, .bt .pool-stage, .bt .pool-rail { display: contents; }

/* stretch, не start из грид-правила .cols: скринер обязан занять всю ширину. */
.bt-scene .cols { display: flex; flex-direction: column; align-items: stretch; }
.bt-scene .panelcol { order: -1; }
/* Как и в bar-раскладке, странице инструмента заголовок-лендинг не нужен. */
.bt-scene .page-head { display: none; }
/* График и метрики — ДВЕ отдельные карточки (решение Антона 20.08, «как
   список и панель»): контейнер пула становится прозрачным, карточные фон и
   рамку получают stage и rail. Шапка пула — в карточке графика (Metrix). */
.bt-scene .pool-card { margin-top: 0; background: none; border: none; padding: 0; }
.bt-scene .pool-card > .sec-label { display: none; }
.bt-scene .pool-body {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px; align-items: start;
}
.bt-scene .pool-stage,
.bt-scene .pool-rail {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 20px;
}
/* График — рабочая область: прижат к шапке, вердикт встаёт под ним. */
.bt-scene .pool-stage .chart-wrap { margin-top: 0; }
.bt-scene .pool-stage .verdict { margin-top: 0; }

@media (max-width: 1100px) {
  /* Складывание сцены повторяет мобильный порядок прода: график, метрики,
     скринер — одной колонкой. */
  .bt-scene .pool-body { display: flex; flex-direction: column; }
}

/* Narrow screens keep the ordinary document flow: stacked columns inside a
   viewport-tall box would leave the panel unreachable. */
@media (max-width: 1100px) {
  html:has(body.yields-fixed), body.yields-fixed { height: auto; overflow: visible; }
  body.yields-fixed .app-layout,
  body.yields-fixed .main-content { height: auto; overflow: visible; }
  body.yields-fixed .public-content { height: auto; display: block; overflow: visible; }
  .bt-fixed { display: block; }
  .bt-fixed .page-head { display: block; }
  .bt-fixed .explorer > .card, .bt-fixed .panelcol { overflow: visible; }
}