/* 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; }
.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 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 62px 76px 50px 82px; 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 62px 76px 50px 82px; 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 ▾. */
.bt .pool-head-in .psort { cursor: pointer; user-select: none; }
.bt .pool-head-in .psort:hover { color: var(--t1); }
.bt .pool-head-in .psort::after { content: '▾'; margin-left: 3px; opacity: 0; }
.bt .pool-head-in .psort.on { color: var(--t1); }
.bt .pool-head-in .psort.on::after { opacity: 1; color: var(--accent); }
.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; }
.bt .papr { font-size: 12.5px; font-weight: 500; color: var(--t2); 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. */
/* A number and only a number: badges inline here shifted the figure left and
   broke the column's alignment, which is the whole point of a numeric column. */
.bt .pnet { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* 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 .pnet.pos, .bt .bench b.pos { color: var(--pos); }
.bt .pnet.neg, .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 62px 76px 50px 82px; 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 62px 76px 50px 82px; 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 .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 .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-mode { position: absolute; top: 2px; right: 62px; z-index: 4; display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.bt .chart-mode 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 { background: var(--bg-tertiary); color: var(--t1); }
.bt .tv-chart { width: 100%; aspect-ratio: 2 / 1; }
.bt-inline .tv-chart { aspect-ratio: 9 / 5; }
.bt .tv-note { font-size: 10.5px; color: var(--t4); margin-top: 4px; }
.bt .tv-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.bt .tv-seg { display: flex; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.bt .tv-seg 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 .tv-seg button.on { background: var(--bg-tertiary); color: var(--t1); }
.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.on { color: var(--t1); border-color: var(--border-h); }
.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; }
.bt .qi:hover .hiw-pop { opacity: 1; transform: none; pointer-events: auto; }

/* Три сценария HODL (п.4 волны 1) — таблица по подаче Metrix Track: тот же
   вход и одноногие альтернативы против LP-итога. */
.bt .hodl { margin-bottom: 16px; }
.bt .hodl .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 .hodl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bt .hodl th { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t4); text-align: right; padding: 0 0 5px; }
.bt .hodl th:first-child { text-align: left; }
.bt .hodl td { padding: 5px 0; border-top: 1px solid var(--border); color: var(--t2); }
.bt .hodl td:nth-child(2), .bt .hodl td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.bt .hodl td.pos { color: var(--pos); font-weight: 600; }
.bt .hodl td.neg { color: var(--neg); font-weight: 600; }

/* Гистограмма текущей ликвидности (волна 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 net" "meta meta";
    row-gap: 3px; padding: 10px 12px 10px 16px;
  }
  .bt .pool-in > .pool-id { grid-area: id; }
  .bt .pool-in > .pnet { grid-area: net; }
  .bt .pool-in > .pcell, .bt .pool-in > .pfees, .bt .pool-in > .papr { display: none; }
  .bt .pool-flat-in {
    grid-template-columns: 1fr auto; grid-template-areas: "pair net" "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 > .pnet { grid-area: net; }
  .bt .pool-flat-in > .pcell, .bt .pool-flat-in > .pfees, .bt .pool-flat-in > .papr { 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; }
body.yields-fixed .public-content {
  min-height: 0; overflow: hidden;
  height: 100vh; 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 { display: block; 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);
}

/* Right: the rail scrolls as one, so nothing can hide behind the params. */
.bt-fixed .panelcol { overflow-y: auto; overscroll-behavior: contain; }
.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.
   ========================================================================== */
.bt .pbar {
  position: relative; flex: 0 0 auto; min-width: 0; margin-bottom: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 18px 8px;
}
.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 28px; 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; }
.bt .pb-g > label {
  display: flex; align-items: center; gap: 5px; height: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--t3); margin-bottom: 6px; white-space: nowrap;
}
.bt .pb-ctl { display: flex; align-items: center; height: 41px; }
/* 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: 68px;
  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: 41px; 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: 41px; 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: 41px; 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: 41px; 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; }
.bt-parambar.bt-fixed { max-width: 1760px; }
/* 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) {
  .bt-parambar .cols { grid-template-columns: minmax(0, 1fr) clamp(400px, 42%, 580px); }
}

/* 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=inline): график в левой колонке =====
   База — дефолтная двухколонка; узел графика перемещается JS-ом в слот
   таблицы (тело раскрытой пары / под строкой выбранного пула), правая
   панель остаётся отчётом позиции без графика. */
.bt-inline .chart-row td {
  padding: 6px 16px 14px; border-bottom: 1px solid var(--border); background: var(--bg-surface);
  /* Продолжение выбранной строки: тот же зелёный маркер, что у .pool-in.sel. */
  box-shadow: inset 3px 0 0 var(--accent);
  transition: padding .35s ease;
}
/* Шторка: grid-rows 1fr↔0fr анимирует произвольную высоту без магических
   max-height; повторный клик по выбранному пулу вешает .closed на строку. */
.bt-inline .chart-anim { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.bt-inline .chart-anim > div { overflow: hidden; min-height: 0; }
.bt-inline .chart-row.closed td { padding-top: 0; padding-bottom: 0; }
.bt-inline .chart-row.closed .chart-anim { grid-template-rows: 0fr; }
.bt-inline .chart-cap {
  display: flex; align-items: center; gap: 6px; padding: 4px 0 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--t3);
}
.bt-inline .chart-cap .badge, .bt-inline .chart-cap .feechip { letter-spacing: normal; text-transform: none; }
.bt-inline .chart-slot .chart-wrap { margin: 0; }
/* Пока слот не существует (пара свёрнута, фильтр увёл пул) — график живёт
   в панели, как в колоночной раскладке; отдельного правила ему не нужно. */

/* ===== Сцена (?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; }
}