/* THE DESK — BOTS V2. A conversion page: one screen, one decision, one button.
   Tokens come from app.css (NLYRA brand guide). Nothing here touches bots.css. */

body { background: var(--s0); }
#b2 { min-height: 100dvh; display: flex; flex-direction: column; }

/* ── chrome ─────────────────────────────────────────────────────────────── */
.b2-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; padding-top: var(--safe-t);
  height: calc(var(--top) + var(--safe-t));
  background: rgba(11, 16, 34, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.b2-top .brand { display: flex; align-items: center; gap: 9px; font: 600 15px var(--display); letter-spacing: .02em; color: var(--ink0); white-space: nowrap; }
.b2-top .brand svg { width: 30px; height: 20px; flex: 0 0 auto; }
.b2-top .brand .the { color: var(--ink2); font-weight: 500; margin-right: -4px; }
.b2-top .sp { flex: 1; }
.b2-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  border-radius: var(--pill); border: 1px solid var(--line-hot); background: var(--s2);
  font: 600 11.5px var(--mono); color: var(--ink1); letter-spacing: .02em; white-space: nowrap;
  transition: border-color var(--t1), background var(--t1);
}
.b2-chip:hover { border-color: var(--acc-line); background: var(--s3); }
.b2-chip.on { border-color: var(--acc-line); color: var(--ink0); }
.b2-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); flex: 0 0 auto; }

/* ── page ───────────────────────────────────────────────────────────────── */
.b2-wrap { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 14px 120px; }

.b2-hero { margin: 4px 0 18px; }
.b2-hero h1 {
  font: 600 26px/1.12 var(--display); letter-spacing: -.01em; color: var(--ink0);
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block;
}
.b2-hero p { margin-top: 8px; color: var(--ink2); font-size: 13.5px; max-width: 56ch; }
.b2-hero p b { color: var(--ink1); font-weight: 600; }

/* segmented controls — quote rail, then mode */
.b2-seg {
  display: flex; gap: 3px; padding: 3px; border-radius: var(--pill);
  background: var(--s1); border: 1px solid var(--line); width: fit-content; max-width: 100%;
}
.b2-seg button {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 15px; border-radius: var(--pill);
  font: 700 10.5px var(--sans); letter-spacing: .1em; color: var(--ink3);
  transition: color var(--t1), background var(--t1);
  white-space: nowrap;
}
.b2-seg button[aria-pressed="true"] { background: var(--s3); color: var(--ink0); box-shadow: var(--sh2); }
.b2-seg button:disabled { color: var(--ink4); cursor: not-allowed; }
.b2-seg button .soon {
  font: 700 8px var(--sans); letter-spacing: .08em; padding: 2px 5px; border-radius: 4px;
  background: var(--gold-bg); color: var(--gold);
}
.b2-rail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.b2-rail .note { font: 500 11.5px var(--sans); color: var(--ink3); }

/* ── bot type selector ──────────────────────────────────────────────────── */
.b2-types { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
.b2-type {
  position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r2);
  background: var(--s1); border: 1px solid var(--line);
  transition: border-color var(--t1), background var(--t1);
}
.b2-type:hover { border-color: var(--line-hot); background: var(--s2); }
.b2-type[aria-pressed="true"] { border-color: var(--acc-line); background: var(--acc-bg); }
.b2-type .gl { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; margin-top: 4px; background: var(--ink3); }
.b2-type[data-t="spotgrid"] .gl { background: var(--lyra, #E84FE0); }
.b2-type[data-t="infinity"] .gl { background: var(--neron, #8B7CF6); }
.b2-type[data-t="dca"] .gl { background: var(--ink3); }
.b2-type .tx { min-width: 0; flex: 1; }
.b2-type .tx b { display: block; font: 600 13.5px var(--display); color: var(--ink0); letter-spacing: .01em; }
.b2-type .tx span { display: block; margin-top: 3px; font: 400 11.5px/1.4 var(--sans); color: var(--ink3); }
.b2-type .tag {
  font: 700 8.5px var(--sans); letter-spacing: .1em; padding: 3px 6px; border-radius: 5px;
  background: var(--s3); color: var(--ink3); flex: 0 0 auto; white-space: nowrap;
}
.b2-type.adv .tag { background: var(--gold-bg); color: var(--gold); }
.b2-type.adv { opacity: .72; }
.b2-type.adv:hover { opacity: 1; }
.b2-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.b2-more span { font: 500 11.5px var(--sans); color: var(--ink3); }
.b2-more a { font: 500 11px var(--mono); color: var(--ink3); text-decoration: none; border-bottom: 1px dotted var(--line-hot); }
.b2-more a:hover { color: var(--ink1); }
@media (min-width: 720px) { .b2-types { grid-template-columns: repeat(3, 1fr); gap: 10px; } }

/* ── steps ──────────────────────────────────────────────────────────────── */
.b2-step { margin-top: 26px; }
.b2-step > h2 {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
  font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
}
.b2-step > h2 i {
  font-style: normal; display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; background: var(--acc-bg); color: var(--acc-t);
  font: 700 10.5px var(--mono); border: 1px solid var(--acc-line); flex: 0 0 auto;
}
.b2-step > h2 span { color: var(--ink3); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ── pair cards ─────────────────────────────────────────────────────────── */
.b2-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.b2-card {
  position: relative; display: block; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--r3);
  background: var(--s1); border: 1px solid var(--line);
  transition: border-color var(--t1), background var(--t1), transform var(--t1);
}
.b2-card:hover { border-color: var(--line-hot); background: var(--s2); }
.b2-card:active { transform: scale(.994); }
.b2-card[aria-pressed="true"] { border-color: var(--acc-line); background: var(--acc-bg); }
.b2-card[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--r3);
  border: 1px solid var(--acc-line); pointer-events: none;
  box-shadow: 0 0 0 3px rgba(139, 124, 246, .10);
}
.b2-card.soon { opacity: .62; }
.b2-card.soon:hover { border-color: var(--line); background: var(--s1); }

.b2-card .hd { display: flex; align-items: center; gap: 10px; }
.b2-card .ic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--s3); display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--mono); color: var(--ink2); border: 1px solid var(--line);
}
.b2-card .ic img { width: 100%; height: 100%; object-fit: cover; }
.b2-card .nm { min-width: 0; flex: 1; }
.b2-card .nm b { display: block; font: 600 15px var(--display); color: var(--ink0); letter-spacing: .01em; }
.b2-card .nm b em { font-style: normal; color: var(--ink3); font-weight: 500; }
.b2-card .nm span { display: block; font: 500 11px var(--mono); color: var(--ink3); margin-top: 2px; }
.b2-card .ch { font: 600 12px var(--mono); text-align: right; }
.b2-card .why { margin-top: 10px; color: var(--ink1); font-size: 12.5px; line-height: 1.45; }
.b2-card .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.b2-fact {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--r1);
  background: var(--s0); border: 1px solid var(--line-soft);
  font: 600 10.5px var(--mono); color: var(--ink2); letter-spacing: .01em;
}
.b2-fact b { color: var(--ink0); font-weight: 700; }
.b2-fact.good b { color: var(--up); }
.b2-fact.acc b { color: var(--acc-t); }
.b2-card .from {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 500 11.5px var(--sans); color: var(--ink3);
}
.b2-card .from b { font: 700 13px var(--mono); color: var(--ink0); }
.b2-badge {
  position: absolute; top: 12px; right: 12px;
  font: 700 8.5px var(--sans); letter-spacing: .1em; padding: 3px 7px; border-radius: 5px;
  background: var(--gold-bg); color: var(--gold);
}
.b2-badge.house { background: var(--acc-bg); color: var(--acc-t); border: 1px solid var(--acc-line); }
.b2-card.hasb .hd { padding-right: 96px; }
@media (max-width: 460px) {
  .b2-top { gap: 7px; padding: 0 10px; }
  .b2-top .b2-chip { padding: 0 9px; font-size: 10.5px; }
  /* the type rail and the infinity Auto/Manual switch must never push the page sideways */
  .b2-seg { flex-wrap: wrap; }
  .b2-seg button { padding: 0 11px; }
  .b2-type { padding: 11px 12px; }
  .b2-more a { font-size: 10.5px; }
}

/* ── amount ─────────────────────────────────────────────────────────────── */
.b2-panel { padding: 16px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); }
.b2-amt { display: flex; align-items: flex-end; gap: 10px; }
.b2-amt .fld2 { flex: 1; min-width: 0; max-width: 460px; }
.b2-amt label { display: block; font: 600 10.5px var(--sans); letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; margin-bottom: 7px; }
.b2-amt .box {
  display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 14px;
  border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line);
  transition: border-color var(--t1);
}
.b2-amt .box:focus-within { border-color: var(--acc-line); }
.b2-amt .box .cur { font: 600 22px var(--display); color: var(--ink3); }
.b2-amt input {
  flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: 0;
  font: 600 26px var(--display); color: var(--ink0); letter-spacing: -.01em;
}
.b2-amt .eth { font: 500 11.5px var(--mono); color: var(--ink3); white-space: nowrap; }

.b2-range { margin-top: 16px; }
.b2-range input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; cursor: pointer;
}
.b2-range input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--track, var(--s3)); }
.b2-range input[type=range]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--s3); }
.b2-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8.5px;
  border-radius: 50%; background: var(--ink0); border: 4px solid var(--acc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.b2-range input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink0); border: 4px solid var(--acc); }
.b2-range .ends { display: flex; justify-content: space-between; font: 500 10.5px var(--mono); color: var(--ink3); margin-top: -2px; }

.b2-quick { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.b2-quick button {
  height: 32px; padding: 0 13px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--s2);
  font: 600 11.5px var(--mono); color: var(--ink1);
  transition: border-color var(--t1), color var(--t1);
}
.b2-quick button:hover { border-color: var(--acc-line); color: var(--ink0); }
.b2-quick button[aria-pressed="true"] { border-color: var(--acc-line); background: var(--acc-bg); color: var(--acc-t); }

/* the one number that governs everything */
.b2-per {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 13px;
  border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line); flex-wrap: wrap;
}
.b2-per .txt { flex: 1; min-width: 0; font: 400 12.5px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); }
.b2-per .txt b { color: var(--ink0); font-weight: 700; }
.b2-per .st { font: 700 10.5px var(--sans); letter-spacing: .08em; padding: 4px 8px; border-radius: var(--pill); white-space: nowrap; }
.b2-per.ok { border-color: rgba(74, 222, 128, .28); }
.b2-per.ok .st { background: var(--up-bg); color: var(--up); }
.b2-per.bad { border-color: rgba(248, 113, 113, .3); }
.b2-per.bad .st { background: var(--down-bg); color: var(--down); }

.b2-plain { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink2); }
.b2-plain b { color: var(--ink1); font-weight: 600; }
.b2-plain .r { color: var(--ink3); display: block; margin-top: 7px; font-size: 12px; }

.b2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
/* visual-review 2026-09: the descendant selector also hit the .v/.k divs INSIDE
   each tile, so every tile drew a second box around its own numbers. Edited
   here rather than overridden at the end — an override can restyle the child,
   it cannot stop the rule from matching it. */
.b2-stats > div { padding: 10px 11px; border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line-soft); }
.b2-stats .v { font: 700 15px var(--mono); color: var(--ink0); }
.b2-stats .k { font: 500 10px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); margin-top: 3px; }

/* ── advanced ───────────────────────────────────────────────────────────── */
.b2-grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.b2-fld label { display: block; font: 600 10.5px var(--sans); letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; margin-bottom: 7px; }
.b2-fld .in {
  display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 12px;
  border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line);
}
.b2-fld .in:focus-within { border-color: var(--acc-line); }
.b2-fld .in input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: 0; font: 600 15px var(--mono); color: var(--ink0); }
.b2-fld .in .u { font: 500 11px var(--mono); color: var(--ink3); white-space: nowrap; }
.b2-fld .hint, .b2-fld.hint { margin-top: 6px; font: 500 11px var(--sans); color: var(--ink3); }
.b2-fld.hint b { color: var(--ink1); font-weight: 600; }
.b2-fact.dim { color: var(--ink3); border-style: dashed; }
.b2-fact.dim b { color: var(--ink2); }
.b2-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 12px;
  border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line); text-align: left;
}
.b2-pick:hover { border-color: var(--line-hot); }
.b2-pick .nm { flex: 1; min-width: 0; }
.b2-pick .nm b { display: block; font: 600 14px var(--display); color: var(--ink0); }
.b2-pick .nm span { display: block; font: 500 11px var(--mono); color: var(--ink3); }
.b2-steppers { display: flex; align-items: center; gap: 8px; max-width: 220px; }
.b2-steppers button {
  width: 40px; height: 40px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--s2);
  font: 600 18px var(--mono); color: var(--ink1); display: flex; align-items: center; justify-content: center;
}
.b2-steppers button:hover { border-color: var(--acc-line); color: var(--ink0); }
.b2-steppers .n { flex: 1; text-align: center; font: 700 20px var(--mono); color: var(--ink0); }

.b2-msg { margin-top: 12px; padding: 12px 13px; border-radius: var(--r2); font-size: 12.5px; line-height: 1.5; }
.b2-msg b { display: block; font: 600 12px var(--sans); letter-spacing: .04em; margin-bottom: 4px; }
.b2-msg.warn { background: var(--v-caution-bg); border: 1px solid rgba(251, 191, 36, .28); color: var(--ink1); }
.b2-msg.warn b { color: var(--v-caution); }
.b2-msg.bad { background: var(--down-bg); border: 1px solid rgba(248, 113, 113, .28); color: var(--ink1); }
.b2-msg.bad b { color: var(--down); }
.b2-msg.ok { background: var(--up-bg); border: 1px solid rgba(74, 222, 128, .24); color: var(--ink1); }
.b2-msg.ok b { color: var(--up); }
.b2-fixes { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.b2-fixes button {
  height: 30px; padding: 0 11px; border-radius: var(--pill); border: 1px solid var(--acc-line);
  background: var(--acc-bg); color: var(--acc-t); font: 600 11.5px var(--sans);
}
.b2-fixes button:hover { background: rgba(139, 124, 246, .2); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.b2-cta {
  position: sticky; bottom: 0; z-index: 30; margin: 22px -14px 0;
  padding: 12px 14px calc(12px + var(--safe-b));
  background: linear-gradient(180deg, rgba(7, 11, 24, 0), var(--s0) 26%);
}
.b2-go {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 54px; border-radius: var(--r3);
  background: var(--brand-grad); color: #fff;
  font: 700 14px var(--sans); letter-spacing: .07em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px -10px rgba(139, 124, 246, .6);
  transition: filter var(--t1), transform var(--t1);
}
.b2-go:hover { filter: brightness(1.07); }
.b2-go:active { transform: scale(.99); }
.b2-go:disabled { background: var(--s3); color: var(--ink3); box-shadow: none; cursor: not-allowed; filter: none; }
.b2-foot { margin-top: 9px; text-align: center; font: 500 11px var(--mono); color: var(--ink3); }

/* ── the two-transaction strip (USDG) ───────────────────────────────────────
   A USDG escrow is funded by transferFrom, so it takes an approval first. That
   is not a footnote: it is shown as two numbered steps before the button, and
   the button itself says which one it is about to ask for. */
.b2-2tx { display: flex; gap: 8px; margin: 0 0 10px; }
.b2-2tx .s {
  flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px; border-radius: var(--r2); border: 1px solid var(--s3); background: var(--s1);
}
.b2-2tx .s .n {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font: 700 10px var(--mono);
  background: var(--s3); color: var(--ink3);
}
.b2-2tx .s .t { min-width: 0; font: 500 11.5px var(--sans); line-height: 1.35; color: var(--ink2); }
.b2-2tx .s .t b { display: block; font: 600 11.5px var(--sans); color: var(--ink1); }
.b2-2tx .s.now { border-color: var(--acc); background: var(--acc-bg, var(--s1)); }
.b2-2tx .s.now .n { background: var(--acc); color: #0b0f1c; }
.b2-2tx .s.done { opacity: .6; }
.b2-2tx .s.done .n { background: var(--up); color: #06210f; }
/* the CTA is a sticky bar on a phone: the strip stays one short line there, or it
   eats a third of the screen and pushes the price it is describing out of view */
@media (max-width: 560px) {
  .b2-2tx { gap: 6px; margin-bottom: 8px; }
  .b2-2tx .s { align-items: center; padding: 7px 9px; }
  .b2-2tx .s .n { margin-top: 0; }
  .b2-2tx .s .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b2-2tx .s .t b { font-size: 11px; }
  .b2-2tx .s .t .d { display: none; }
}

/* ── sheet (token picker) ───────────────────────────────────────────────── */
.b2-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.b2-sheet .bg { position: absolute; inset: 0; background: rgba(3, 6, 14, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.b2-sheet .pn {
  position: relative; width: 100%; max-width: 560px; max-height: 82dvh; display: flex; flex-direction: column;
  background: var(--s1); border: 1px solid var(--line-hot); border-radius: var(--r3) var(--r3) 0 0;
  padding: 16px 14px calc(14px + var(--safe-b)); box-shadow: var(--sh3);
  animation: b2up 220ms var(--ease1);
}
@keyframes b2up { from { transform: translateY(20px); opacity: .4; } }
.b2-sheet h3 { font: 600 17px var(--display); color: var(--ink0); margin-bottom: 12px; }
.b2-sheet .srch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: var(--r2); background: var(--s0); border: 1px solid var(--line); }
.b2-sheet .srch input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 16px; color: var(--ink0); }
.b2-sheet .rows { margin-top: 10px; overflow: auto; -webkit-overflow-scrolling: touch; }
.b2-sheet .rw { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border-radius: var(--r2); text-align: left; }
.b2-sheet .rw:hover { background: var(--s2); }
.b2-sheet .rw .nm { flex: 1; min-width: 0; }
.b2-sheet .rw .nm b { display: block; font: 600 13.5px var(--sans); color: var(--ink0); }
.b2-sheet .rw .nm span { display: block; font: 500 11px var(--mono); color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2-sheet .rw .px { font: 600 12px var(--mono); color: var(--ink1); text-align: right; }

/* ── misc ───────────────────────────────────────────────────────────────── */
.b2-skel { height: 116px; border-radius: var(--r3); background: linear-gradient(90deg, var(--s1), var(--s2), var(--s1)); background-size: 200% 100%; animation: b2sk 1.4s linear infinite; }
@keyframes b2sk { to { background-position: -200% 0; } }
.b2-empty { padding: 28px 16px; text-align: center; color: var(--ink3); font-size: 13px; }
.b2-toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--safe-b)); z-index: 120; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 24px)); }
.b2-toast { padding: 12px 14px; border-radius: var(--r2); background: var(--s3); border: 1px solid var(--line-hot); color: var(--ink0); font-size: 12.5px; box-shadow: var(--sh3); animation: b2up 200ms var(--ease1); }
.b2-toast.ok { border-color: rgba(74, 222, 128, .4); }
.b2-toast.err { border-color: rgba(248, 113, 113, .45); }
.b2-toast a { display: block; margin-top: 5px; font: 500 11px var(--mono); }
[hidden] { display: none !important; }

@media (min-width: 720px) {
  .b2-wrap { padding: 26px 20px 140px; }
  .b2-hero h1 { font-size: 34px; }
  .b2-cards { grid-template-columns: 1fr 1fr; gap: 12px; }
  .b2-grid2 { grid-template-columns: 1fr 1fr; }
  .b2-cta { position: static; margin: 26px 0 0; padding: 0; background: none; }
  .b2-go { max-width: 420px; margin: 0 auto; }
}
@media (min-width: 1000px) {
  .b2-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .b2-skel, .b2-sheet .pn, .b2-toast { animation: none; }
  .b2-card, .b2-go { transition: none; }
}

/* public / leaderboard toggle */
.b2-pub{display:flex;gap:10px;align-items:flex-start;margin:14px 0 10px;cursor:pointer;user-select:none}
.b2-pub input{width:17px;height:17px;margin-top:2px;accent-color:#8B7CF6;cursor:pointer;flex:none}
.b2-pub span{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.b2-pub b{font-size:13px;font-weight:600}
.b2-pub small{font-size:11.5px;opacity:.62}

/* ══ LEADERBOARD + COPY ═══════════════════════════════════════════════════
   Ported from the v1 board (bots.js) so both pages read the same: medals for
   the top three, tabular numbers, one COPY per row. Nothing here touches
   bots.css — v2 owns its own paint. */

/* the CREATE / LEADERBOARD rail */
.b2-vrail { margin-bottom: 18px; }
.b2-vrail .b2-seg button { min-width: 104px; justify-content: center; }

.b2-lbhead { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.b2-lbhead .tt { flex: 1; min-width: 220px; }
.b2-lbhead h2 { font: 600 19px var(--display); color: var(--ink0); letter-spacing: -.01em; }
.b2-lbhead p { margin-top: 7px; color: var(--ink2); font-size: 12.5px; line-height: 1.5; max-width: 60ch; }
.b2-lbhead p b { color: var(--ink1); font-weight: 600; }
.b2-lbwin { flex: 0 0 auto; }
.b2-lbwin button { min-width: 58px; justify-content: center; }

.b2-lb { border: 1px solid var(--line); border-radius: var(--r3); background: var(--s1); overflow: hidden; }
.b2-lb .rowl {
  display: flex; align-items: center; gap: 10px; min-height: 58px;
  padding: 10px 12px; border-top: 1px solid var(--line); transition: background var(--t1);
}
.b2-lb .rowl:first-child { border-top: 0; }
.b2-lb .rowl:hover { background: var(--s2); }
.b2-lb .rk { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; font: 700 11px/1 var(--display); color: var(--ink4); }
.b2-lb .rowl.top .rk { border-radius: 50%; color: #0B0F20; font-size: 10px; }
.b2-lb .rowl.t1 .rk { background: var(--gold, #FBBF24); }
.b2-lb .rowl.t2 .rk { background: #C6CEDE; }
.b2-lb .rowl.t3 .rk { background: #C08457; }
.b2-lb .rowl.t1 { background: linear-gradient(90deg, rgba(251, 191, 36, .09), transparent 58%); }
.b2-lb .rowl.t1:hover { background: linear-gradient(90deg, rgba(251, 191, 36, .14), var(--s2) 58%); }
.b2-lb .ic {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line);
  font: 700 9.5px var(--mono); color: var(--ink2);
}
.b2-lb .ic img { width: 100%; height: 100%; object-fit: cover; }
.b2-lb .who { flex: 1; min-width: 0; }
.b2-lb .who b { display: block; font: 600 13px/1.2 var(--display); color: var(--ink0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-lb .who span { display: block; margin-top: 2px; font: 500 11px var(--mono); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-lb .apr {
  flex: 0 0 auto; text-align: right; color: var(--ink0);
  font: 600 14px var(--mono); letter-spacing: -.015em; font-variant-numeric: tabular-nums slashed-zero;
}
.b2-lb .apr span { display: block; margin-top: 2px; font: 600 9.5px var(--display); letter-spacing: .08em; color: var(--ink4); }
.b2-up { color: var(--up); }
.b2-dn { color: var(--down); }
.b2-copybtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; min-width: 58px; padding: 0 11px; border-radius: var(--pill);
  border: 1px solid rgba(232, 79, 224, .55); background: none; color: var(--lyra, #E84FE0);
  font: 700 10px var(--display); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; transition: background var(--t1), border-color var(--t1);
}
.b2-copybtn:hover { background: var(--acc2-bg, rgba(232, 79, 224, .12)); }
.b2-copybtn.ghost { border-color: var(--line-hot); color: var(--ink3); }
.b2-copybtn.ghost:hover { background: var(--s3); color: var(--ink1); }
.b2-lb .sk { height: 16px; border-radius: 6px; }

.b2-lbempty { padding: 34px 18px; text-align: center; border: 1px dashed var(--line-hot); border-radius: var(--r3); background: var(--s1); }
.b2-lbempty h3 { font: 600 15px var(--display); color: var(--ink0); }
.b2-lbempty p { margin: 8px auto 0; max-width: 54ch; color: var(--ink3); font-size: 12.5px; line-height: 1.55; }
.b2-lbempty p b { color: var(--ink1); font-weight: 600; }
.b2-lbnote { margin-top: 12px; font: 500 11.5px/1.5 var(--mono); color: var(--ink3); }

/* ── the copy sheet ─────────────────────────────────────────────────────── */
.b2-sheet.b2-copy .pn { max-height: 92dvh; overflow: auto; -webkit-overflow-scrolling: touch; }
.b2-sheet.b2-copy .b2-amt .box { height: 52px; }
.b2-sheet.b2-copy .b2-amt input { font-size: 23px; }
.b2-sheet.b2-copy .b2-go { margin-top: 16px; }
.b2-copycard { border: 1px solid var(--line); border-radius: var(--r2); background: var(--s0); padding: 11px 12px; }
.b2-copycard .hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.b2-copycard .hd .tag {
  font: 700 9.5px/1 var(--mono); letter-spacing: .1em; color: var(--lyra, #E84FE0);
  border: 1px solid rgba(232, 79, 224, .55); border-radius: 5px; padding: 4px 6px;
}
.b2-copycard .hd b { font: 600 13.5px var(--display); color: var(--ink0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2-copycard .hd .by { margin-left: auto; font: 500 11.5px var(--mono); color: var(--ink2); }
.b2-copycard .st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.b2-copycard .st > div { border: 1px solid var(--line-soft); border-radius: var(--r1); padding: 7px 9px; min-width: 0; }
.b2-copycard .st .v { font: 700 14px var(--mono); color: var(--ink0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums slashed-zero; }
.b2-copycard .st .k { margin-top: 3px; font: 500 9.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink4); }
.b2-copycard .note { margin-top: 10px; font: 500 11.5px/1.45 var(--mono); color: var(--ink2); }
.b2-copycard .note b { color: var(--ink0); font-weight: 600; }

@media (max-width: 460px) {
  .b2-lb .rowl { gap: 8px; padding: 10px 10px; }
  .b2-lb .apr { font-size: 13px; }
  .b2-copybtn { min-width: 50px; padding: 0 9px; letter-spacing: .06em; }
  .b2-lbhead h2 { font-size: 17px; }
  .b2-lbhead p { font-size: 12px; }
  /* on a phone the row's meta is the interesting half — let it wrap to two
     lines instead of ellipsing the PnL and the copy count away */
  .b2-lb .who span {
    white-space: normal; line-height: 1.35; font-size: 10.5px; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* the copy sheet spells out WHY a split that looks fine was still refused */
.b2-per .txt .r { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--ink3); }

/* ── visual-review 2026-09 · bots2 ─────────────────────────────────────────
   · the three stat tiles wrapped their labels: "NET / GRID" broke over two
     lines and pushed the tiles to different heights. The label is one token,
     it never wraps.
   · the CTA carried a 30px violet drop-shadow — the only glow left on a page
     that otherwise has none. The inset highlight stays: it is what makes the
     gradient read as a raised surface, not a sticker. */
.b2-stats .k { white-space: nowrap; }
.b2-go { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
/* ── /visual-review bots2 ─────────────────────────────────────────────────── */

/* ── visual-review 2026-09 · r2 · bottom nav ─────────────────────────────── */
/* WHY: on a phone this page was a dead end — the only way out was the tiny back
   chevron. It now carries the same bottom nav as the SPA (markup copied from
   index.html). app.css already hides #nav at ≥861px; here it is fixed because this
   page is a plain document, not the #app grid. core.js is not loaded, so the
   active cue is the static rail (app.css turns it off in favour of the travelling
   one it animates) — switched back on for this page. */
#b2 #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; }
#b2 #nav a[aria-current="page"]::before { display: block; }
@media (max-width: 860px) {
  .b2-wrap { padding-bottom: calc(48px + var(--nav) + var(--safe-b)); }   /* the CTA is in flow (sticky); only the nav needs clearing */
  .b2-cta { bottom: calc(var(--nav) + var(--safe-b)); padding-bottom: 12px; }
  .b2-toasts { bottom: calc(var(--nav) + var(--safe-b) + 12px); }
}

/* ── visual-review 2026-09 · r2 · one segmented control, one chip (item 30) ── */
/* WHY: .b2-seg was a third recipe for the same control (s1 ground, shadow on the
   active pill, 34px). It now reads as app.css .seg: s0 ground, flat active pill,
   40px touch. Should collapse into .seg in app.css when that file is next touched. */
.b2-seg { background: var(--s0); }
.b2-seg button { height: 40px; font: 590 12px var(--sans); letter-spacing: .04em; }
.b2-seg button[aria-pressed="true"] { box-shadow: none; }
@media (max-width: 719px) { .b2-seg button { height: 38px; } }
/* .b2-quick chips → the .chip-pick recipe (pill, 38px on touch, halo hit area) — the
   same one trade.css gives the panel chips; belongs in app.css as .chip-pick. */
.b2-quick button {
  position: relative; height: 38px; padding: 0 14px;
  font: 600 12px var(--mono);
  transition: border-color var(--t1), color var(--t1), background var(--t1);
}
.b2-quick button::before { content: ''; position: absolute; inset: -3px 0; }
.b2-quick button[aria-pressed="true"] { border-color: var(--neron); }
@media (min-width: 720px) {
  .b2-quick button { height: 34px; }
  .b2-quick button::before { inset: 0; }
}

/* ── visual-review 2026-09 · r2 · price notation (item 29) ────────────────── */
/* WHY: sub-cent prices now come from the shared fmt.price ($0.0<sub>4</sub>6638);
   the <sub> needs a size and no baseline shift or the row jumps. Same rule as the
   trade panel — a global `sub` rule belongs in app.css. */
#b2 sub { font-size: .62em; vertical-align: baseline; position: relative; top: .18em; opacity: .8; }
/* ── /visual-review r2 bots2 ─────────────────────────────────────────────── */


/* patch-gridchart (2026-09-05): the levels of the preview, drawn over the week */
.b2-chart { margin-top: 14px; padding: 12px 12px 10px; border-radius: var(--r3); background: var(--s1); border: 1px solid var(--line); }
.b2-panel .b2-chart { background: var(--s0); }
.b2-chart .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.b2-chart .hd b { font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink1); }
.b2-chart .hd span { font: 400 11px var(--mono); color: var(--ink3); }
.b2-chart canvas { display: block; width: 100%; }
.b2-chart .lg { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font: 400 10.5px var(--mono); color: var(--ink3); letter-spacing: .03em; }
.b2-chart .lg span { display: inline-flex; align-items: center; gap: 6px; }
.b2-chart .lg i { width: 14px; height: 0; border-top: 2px dashed var(--up); }
.b2-chart .lg i.s { border-color: var(--lyra); }
.b2-chart .lg i.e { border-top-style: solid; border-color: var(--ink0); }
.b2-chart .lg i.n { border-top-style: dotted; border-color: var(--ink0); }