/* ===========================================================================
   APP — structure and components. Reads tokens from theme.css and never
   declares a colour of its own, so rebranding never touches this file.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.num, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- topbar ---- */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 0 18px; height: 54px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.brand .mark { width: 28px; height: 28px; display: block; flex: none; }
/* W and EDGE carry the weight so the wedge reads through the word; "ax" steps
   back without disappearing. */
#brandName { font-size: 16px; letter-spacing: -.035em; }
#brandName .wm-em { font-weight: 800; color: var(--ink); }
#brandName .wm-soft { font-weight: 600; color: var(--muted); }
nav.tabs { display: flex; gap: 2px; margin-left: 8px; }
nav.tabs button {
  background: none; border: 0; cursor: pointer; padding: 7px 13px;
  border-radius: var(--r); color: var(--muted); font-size: 13.5px; font-weight: 500;
}
nav.tabs button:hover { color: var(--ink); background: var(--surface-2); }
nav.tabs button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.top .spacer { flex: 1; }
.top .waxprice {
  font-family: var(--font-data); font-size: 12.5px; color: var(--ink-2);
  padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  white-space: nowrap;
}
.top .waxprice b { color: var(--ink); font-weight: 600; }
.iconbtn {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center;
  color: var(--ink-2); font-size: 14px;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }

/* --------------------------------------------------------------- shell --- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 20px 18px 80px; }
.view { display: none; }
.view.active { display: block; }

h2.vt { font-size: 19px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 3px; }
p.vs { color: var(--muted); font-size: 13px; margin: 0 0 18px; max-width: 74ch; }

/* --------------------------------------------------------------- stats --- */
/* Flex, not grid. A grid of equal columns leaves the last row short whenever the
   tile count does not divide into it — seven stats in an eight-column grid drew
   an empty bordered box, which reads as a value that failed to load. Flex items
   grow to fill whatever row they land on, at any count and any width. */
.stats { display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.stat { flex: 1 1 150px; min-width: 0; background: var(--surface); padding: 13px 15px; }
.stat .v { font-family: var(--font-data); font-size: 21px; font-weight: 600; letter-spacing: -.02em; display: block; line-height: 1.2; }
.stat .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 5px; display: block; }
.stat .sub { font-size: 11px; color: var(--muted); font-family: var(--font-data); margin-top: 2px; display: block; }

/* -------------------------------------------------------------- toolbar -- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.search {
  flex: 1 1 220px; min-width: 180px; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 11px; color: var(--ink); font-family: var(--font-data); font-size: 13px;
}
.search::placeholder { color: var(--muted); }
.chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--line-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------------------------------------------------------------- table -- */
.tablewrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: auto; max-height: 74vh; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--muted);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
  text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--ink); }
thead th .dir { color: var(--accent); }
tbody td { padding: 9px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: var(--surface-2); }
td.r, th.r { text-align: right; }
.pair { font-weight: 600; color: var(--ink); }
.sub { color: var(--muted); font-size: 11.5px; }

.badge {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 6px; border-radius: var(--r-sm); text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--muted);
}
.badge.alcor { color: var(--info); border-color: var(--info); }
.badge.taco  { color: var(--c4);  border-color: var(--c4); }
.badge.good  { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.badge.bad   { color: var(--bad);  border-color: var(--bad);  background: var(--bad-soft); }
.badge.warn  { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

.dim { color: var(--muted); }
.pos { color: var(--good); }
.neg { color: var(--bad); }
.ok  { color: var(--good); }

/* ------------------------------------------------------------ range bar -- */
/* The signature element: a position's tick band with the market price on it. */
.rangebar { position: relative; height: 22px; min-width: 150px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rangebar .band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--c3) 16%, transparent); border-left: 2px solid var(--c3); border-right: 2px solid var(--c3); }
.rangebar .band.out { background: var(--surface-3); border-color: var(--line-2); }
.rangebar .px { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.rangebar .px.out { background: var(--bad); }

/* ---------------------------------------------------------------- cards -- */
.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; }
.card h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: -.005em; }
.card h3 .dim { font-weight: 400; }

/* ----------------------------------------------------------- positions --- */
/* A position card is a small dashboard, not a paragraph. Value and P&L sit top
   right where the eye lands, state is a row of pills, and the two numbers that
   need comparing (the pair's split) are drawn as one bar instead of printed as
   two figures. */
.poscard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px 14px; display: flex; flex-direction: column; gap: 11px; }
.poscard.out { border-color: var(--bad); }

.pc-head { display: flex; align-items: flex-start; gap: 11px; }
.pc-mark { flex: 0 0 auto; display: flex; align-items: center; }
.pc-id { min-width: 0; flex: 1; }
/* Wraps, because it has to share the row with the value beside it and a WAX
   figure is four times as wide as the dollar one: "171,891.77 WAX" ran straight
   over the pair name and swallowed the venue badge. */
.pc-pair { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 650;
  letter-spacing: -.012em; line-height: 1.25; flex-wrap: wrap; min-width: 0; }
.pc-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-family: var(--font-data); }
.pc-val { text-align: right; flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.pc-val .v { font-family: var(--font-data); font-size: 19px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; }
.pc-val .d { font-family: var(--font-data); font-size: 12px; margin-top: 1px; white-space: nowrap; }

.pc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 10.5px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted);
  white-space: nowrap; }
.pill.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-soft); }
.pill.warn { color: var(--c4); border-color: color-mix(in srgb, var(--c4) 45%, transparent); background: transparent; }
.pill.accent { color: var(--ink-2); border-color: var(--line-2); background: var(--surface-2); }

/* The pair's composition. One bar, because 52/48 is a shape. */
.pc-split { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--line); }
.pc-split .seg.a { background: var(--c1); }
.pc-split .seg.b { background: var(--c3); }
.pc-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--muted);
  font-family: var(--font-data); margin-top: -5px; }
.pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-legend i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.pc-legend i.a { background: var(--c1); }
.pc-legend i.b { background: var(--c3); }

.pc-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pc-figs .fig { background: var(--surface); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pc-figs .k { font-size: 10.5px; color: var(--muted); letter-spacing: .01em; }
.pc-figs .v { font-family: var(--font-data); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.pc-figs .v.accent { color: var(--accent); }
.pc-figs .v.dim { color: var(--muted); font-weight: 400; }

/* The farm you are not in. Loud on purpose: it is yield already being paid to
   everyone else in the same pool. */
.pc-farm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft); font-size: 12.5px; }
.pc-farm > div { flex: 1; min-width: 170px; }
.pc-farm .sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.pc-farm .btn { flex: 0 0 auto; }

.pc-act { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.pc-act .btn { flex: 1; text-align: center; }
/* A link off the site is not an action, and drawing it as loudly as the one
   action this card exists for is how Compound stopped being the obvious thing. */
.pc-act .plink { flex: 0 0 auto; font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.pc-act .plink:hover { color: var(--accent); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; margin-top: 10px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--font-data); text-align: right; }

@media (max-width: 720px) { .pc-figs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .pc-figs { grid-template-columns: repeat(2, 1fr); }
  .pc-act { flex-wrap: wrap; }
}

/* ----------------------------------------------------------------- misc -- */
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; padding: 30px 4px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.err { border: 1px solid var(--bad); background: var(--bad-soft); color: var(--ink); padding: 11px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 14px; }

.walletbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.walletbar input {
  flex: 1 1 240px; max-width: 340px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 12px; color: var(--ink); font-family: var(--font-data); font-size: 13.5px;
}
.btn {
  background: var(--accent); color: var(--on-accent); border: 0; border-radius: var(--r);
  padding: 9px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.btn.ghost:hover { color: var(--ink); border-color: var(--line-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

footer.foot { border-top: 1px solid var(--line); margin-top: 30px; padding: 14px 18px 40px;
  color: var(--muted); font-size: 11.5px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; }
footer.foot code { font-family: var(--font-data); }

@media (max-width: 720px) {
  .top { gap: 10px; padding: 0 12px; }
  .top .waxprice { display: none; }
  nav.tabs button { padding: 7px 9px; font-size: 12.5px; }
  .wrap { padding: 14px 10px 60px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===========================================================================
   CHARTS
   =========================================================================== */
.charttip {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 7px 10px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.45;
  display: flex; flex-direction: column; gap: 1px; max-width: 260px;
}
.charttip b { font-weight: 600; font-family: var(--font-data); }
.charttip span { color: var(--muted); font-size: 11px; }

.chart { width: 100%; }
.chart-empty { padding: 26px 8px; text-align: center; color: var(--muted); font-size: 12.5px; }

.donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut .legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 170px; font-size: 12px; }
.donut .legend > div { display: flex; align-items: center; gap: 8px; }
.donut .legend .sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.donut .legend .lb { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.donut .legend .vl { color: var(--muted); font-size: 11.5px; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bars .bar { display: grid; grid-template-columns: minmax(74px, 1.1fr) 2.2fr auto; gap: 10px; align-items: center; font-size: 12px; }
.bars .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bars .tr { height: 9px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bars .fill { display: block; height: 100%; border-radius: 99px; }
.bars .vl { color: var(--muted); font-size: 11.5px; }

/* ===========================================================================
   LAYOUT POLISH — the tables were legible but flat; this gives the page a
   hierarchy so the eye lands on the summary before the detail.
   =========================================================================== */
.wrap { max-width: 1460px; padding: 26px 22px 90px; }
h2.vt { font-size: 24px; letter-spacing: -.022em; margin-bottom: 5px; }
p.vs { font-size: 13.5px; line-height: 1.6; margin-bottom: 22px; color: var(--muted); }

.stats { margin-bottom: 22px; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.stat { padding: 15px 17px; }
.stat .v { font-size: 24px; letter-spacing: -.025em; }
.stat .k { font-size: 10px; letter-spacing: .09em; margin-top: 6px; }

.card { padding: 17px 18px; box-shadow: var(--shadow); }
.card h3 {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 13px;
  display: flex; align-items: baseline; gap: 8px;
}
.card h3 .dim { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11.5px; }
.card h3 .hero {
  margin-left: auto; font-family: var(--font-data); font-size: 15px;
  color: var(--ink); font-weight: 600; letter-spacing: -.01em;
}

.section { margin-bottom: 22px; }
.section > h3 {
  font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; margin: 0 0 11px; display: flex; align-items: center; gap: 10px;
}
.section > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.g3c { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tablewrap { box-shadow: var(--shadow); }
thead th { padding: 10px 14px; }
tbody td { padding: 10px 14px; }

/* Hero number: one figure that carries a whole card. */
.hero-num {
  font-family: var(--font-data); font-size: 30px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1; display: block;
}
.hero-sub { font-size: 12px; color: var(--muted); margin-top: 4px; display: block; }

/* Wallet chip in the top bar */
/* A class that sets `display` outranks the UA sheet's [hidden] rule, so an
   element hidden this way stays visible. Restore the attribute's meaning. */
.acct[hidden], .filters[hidden] { display: none !important; }
.acct {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 5px 10px; font-family: var(--font-data); font-size: 12.5px; white-space: nowrap;
}
.acct .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }

/* Filter panel */
.filters {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px 15px; margin-bottom: 14px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.filters label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.filters input, .filters select {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 9px; color: var(--ink); font-family: var(--font-data); font-size: 12.5px;
}
.filters .pairin { display: flex; gap: 6px; align-items: center; }
.filters .pairin input { width: 100%; min-width: 0; }
.filters .pairin span { color: var(--muted); font-size: 11px; }

.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: start;
  padding: 13px 15px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.step.done { border-color: var(--good); }
.step.active { border-color: var(--accent); }
.step .n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 700;
  font-family: var(--font-data);
}
.step.done .n { background: var(--good); color: var(--on-accent); }
.step.active .n { background: var(--accent); color: var(--on-accent); }
.step h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; }
.step p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; max-width: 72ch; }

/* A framed aside for the one thing a reader must understand before trusting a
   number on the page. Used sparingly — a page of these reads as noise. */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 13px 16px; border-radius: 0 var(--r) var(--r) 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 96ch;
}
.note b { color: var(--ink); font-weight: 600; }
.note code { font-size: 12px; }

/* Face value shown beside the real one: recessive, never competing. */
.nominal { color: var(--muted); font-size: 11px; display: block; margin-top: 1px; }
.unreal { color: var(--muted); font-style: italic; }

/* The top bar carries a lot now. Keep the wallet control compact so it reads as
   a control, not a call to action competing with the navigation. */
.top .btn { padding: 6px 12px; font-size: 12.5px; }
.top .waxprice { padding: 5px 9px; }
@media (max-width: 980px) { .top .waxprice { display: none; } }

/* Token identity marks. A real logo where the registry has one, a generated
   mark otherwise — the point is that a row never renders without one. */
.tokmark {
  border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  vertical-align: middle; object-fit: cover; background: var(--surface-3);
}
.tokmark.gen { font-weight: 700; letter-spacing: -.02em; font-family: var(--font-ui); }
.pairmark { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 7px; }
.pairmark .tokmark:last-child { box-shadow: 0 0 0 2px var(--surface); }
tbody tr:hover .pairmark .tokmark:last-child { box-shadow: 0 0 0 2px var(--surface-2); }

/* Alcor's own verdict, shown beside ours. */
.trust { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); }
.trust.ok { color: var(--good); border-color: var(--good); }
.trust.bad { color: var(--bad); border-color: var(--bad); }
.rew {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px;
  padding: 2px 8px 2px 3px; margin-right: 3px; font-family: var(--font-data); white-space: nowrap;
}
.rew .tokmark { width: 14px; height: 14px; font-size: 7px; }

/* Freshness bar: says what you are looking at without shouting about it. */
.freshbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 9px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px;
}
.freshbar .btn { margin-left: auto; }
.badge.defibox { color: var(--c4); border-color: var(--c4); }
.badge.adex    { color: var(--c7); border-color: var(--c7); }

/* One number, with a quiet mark when it rests on liquidity that cannot be sold.
   Two numbers side by side made every row an argument with itself. */
i.soft {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: middle; opacity: .75;
}
/* One colour for every rate on the site — farm APR, fee APR, observed rate.
   Two colours for the same kind of number is a distinction the reader has to
   invent a meaning for. */
.apr { font-family: var(--font-data); font-weight: 600; color: var(--good); font-variant-numeric: tabular-nums; }
.stat .v.apr { font-size: inherit; font-family: inherit; }
.apr.small { opacity: .8; font-weight: 500; }

/* Farms table: the APR is what people came for, so it gets the weight. */
td.rank { color: var(--muted); font-family: var(--font-data); font-size: 11px; width: 34px; text-align: right; padding-right: 0; }
.pairbig { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; }
.venue {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  margin-left: 7px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line);
}
.venue.alcor { color: var(--info); border-color: color-mix(in oklch, var(--info) 45%, transparent); }
.venue.taco  { color: var(--c4);  border-color: color-mix(in oklch, var(--c4) 45%, transparent); }
.venue.defibox { color: var(--c5); border-color: color-mix(in oklch, var(--c5) 45%, transparent); }
.venue.adex  { color: var(--c6);  border-color: color-mix(in oklch, var(--c6) 45%, transparent); }
#farmTable .apr { font-size: 15px; }
.rew.more { padding: 2px 8px; color: var(--muted); }
.rew b { font-weight: 600; color: var(--ink); }
.sizesel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.sizesel .chip { padding: 4px 9px; font-size: 11.5px; }
tbody tr.faded td { opacity: .5; }
tbody tr.faded:hover td { opacity: .85; }

/* ===========================================================================
   NARROW SCREENS
   A data table does not become usable by shrinking it. Below the breakpoint the
   secondary columns step aside so the ones people came for — what it pays, what
   it is worth — stay on screen, and the rest scrolls.
   =========================================================================== */
@media (max-width: 860px) {
  .top { height: auto; min-height: 52px; padding: 8px 12px; flex-wrap: wrap; gap: 8px; }
  .brand { font-size: 14px; }
  .brand span:last-child { white-space: nowrap; }
  nav.tabs {
    order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  nav.tabs::-webkit-scrollbar { display: none; }
  nav.tabs button { flex: none; }
  .top .spacer { flex: 1; }

  .wrap { padding: 14px 10px 70px; }
  h2.vt { font-size: 20px; }
  p.vs { font-size: 12.5px; }
  .stat { padding: 11px 12px; }
  .stat .v { font-size: 19px; }

  .toolbar { gap: 6px; }
  .search { flex: 1 1 100%; max-width: none; }
  .sizesel { flex: 1 1 100%; }


  table { min-width: 0; font-size: 12.5px; }
  thead th, tbody td { padding: 9px 10px; }
  .pairbig { font-size: 12.5px; }
  .venue { display: none; }
  .grid.g2, .grid.g3, .grid.g3c { grid-template-columns: 1fr; }
  .donut { justify-content: center; }
  .freshbar { font-size: 12px; }
  .freshbar .btn { margin-left: 0; width: 100%; }
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .stat { flex-basis: 42%; }
  .filters { grid-template-columns: 1fr; }
}
.sizesel .amt {
  display: inline-flex; align-items: center; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 8px;
}
.sizesel .amt:focus-within { border-color: var(--accent); }
.sizesel .cur { color: var(--muted); font-family: var(--font-data); font-size: 12px; }
.sizesel input {
  width: 74px; background: none; border: 0; color: var(--ink); padding: 6px 2px;
  font-family: var(--font-data); font-size: 13px; -moz-appearance: textfield;
}
.sizesel input::-webkit-outer-spin-button, .sizesel input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sizesel input:focus { outline: none; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
a.btn:hover { text-decoration: none; }
.warnish { color: var(--accent-ink); }
.tokhead .tokmark { width: 34px; height: 34px; font-size: 14px; }
.aprmove { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; }
.aprmove .was { color: var(--muted); font-family: var(--font-data); font-size: 12px; text-decoration: line-through; text-decoration-color: var(--line-2); }
.aprmove .arrow { color: var(--muted); font-size: 11px; }
dl.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 7px 20px;
  margin: 0; font-size: 13px; align-items: baseline;
}
dl.facts dt { color: var(--muted); font-size: 11.5px; }
dl.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 620px) { dl.facts { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 7px 12px; } dl.facts dd { margin-bottom: 0; } }

/* A route is a sequence, not a pair: it has to wrap on a phone and still read
   left to right, and the arrows must not break away from the symbols. */
.route {
  font-weight: 600; line-height: 1.6; word-break: break-word;
}
.route .dim { font-weight: 400; }

/* An export button sits in a toolbar of chips, so it must not shout. */
.btn.csv { font-size: 12px; padding: 5px 10px; }

/* A ranked row you can open. Without this the only sign a bar is clickable is
   that it happens to react, which nobody discovers. */
.bars .bar.clickable { cursor: pointer; border-radius: 6px; margin: -3px -6px; padding: 3px 6px; }
.bars .bar.clickable:hover { background: var(--surface-2); }
.bars .bar.clickable:hover .lb { color: var(--ink); }

/* Follow control. Small and quiet until it is on — a row of bright stars would
   compete with the numbers, which are the point of the table. */
.star {
  background: none; border: 0; cursor: pointer; padding: 0 0 0 5px;
  font-size: 13px; line-height: 1; color: var(--muted);
}
.star:hover { color: var(--ink-2); }
.star[aria-pressed="true"] { color: var(--accent-ink, var(--c3)); }
.toolbar .star { font-size: 17px; padding: 0 4px; }

/* A bar's label can carry a second line — what the rate is standing on, which
   must not eat the name it belongs to. */
.bars .lb { display: block; white-space: normal; }
.bars .lbsub { display: block; color: var(--muted); font-size: 10.5px; font-family: var(--font-data); margin-top: 1px; }

/* Two stacked TradingView panes: the series and what it traded, sharing a card
   so the eye reads them against the same dates. */
.tvpair { display: flex; flex-direction: column; gap: 6px; }

/* An account name you can open. Underlined on hover only — a table full of
   permanently-underlined wallets is noise, and every one of them is a link. */
.acct-link { cursor: pointer; border-bottom: 1px dotted var(--line-2); }
.acct-link:hover { color: var(--accent-ink, var(--ink)); border-bottom-color: currentColor; }

/* The holder map is dragged and clicked, so it must not be selectable or
   scroll the page under a finger. */
.bubblemap { user-select: none; -webkit-user-select: none; }
.bubblemap g { transition: opacity .12s ease; }

/* A reward you can leave behind. The checkbox sits with its badge so the whole
   thing is one target on a phone. */
.pick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; margin: 0 8px 6px 0; }
.pick input { margin: 0; cursor: pointer; }
.pick .sub { font-size: 10.5px; }
.pick:has(input:not(:checked)) .badge,
.pick:has(input:not(:checked)) .sub { opacity: .4; }

/* ===========================================================================
   SCALING — one layout that works from a 320px phone to an ultrawide.
   The breakpoints below were written for a narrower app than this became: the
   grid columns were fixed pixel minimums, so a 1400px screen and a 2560px one
   showed the same two columns with the rest as margin, and a 340px phone got
   horizontal scroll from tables that could not shrink further.
   =========================================================================== */

/* The shell grows with the screen instead of stopping at 1460. */
.wrap { max-width: min(1900px, 96vw); }

/* Cards stop being a fixed two-up. On a wide screen a g2 becomes three or four
   across, because two 900px-wide cards is wasted space, not breathing room. */
@media (min-width: 1500px) {
  .grid.g2 { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
  .grid.g3, .grid.g3c { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

/* Type scales gently with the viewport rather than jumping at a breakpoint. */
h2.vt { font-size: clamp(18px, 1.1vw + 14px, 26px); }
.stat .v { font-size: clamp(17px, .8vw + 12px, 25px); }
.card h3 { font-size: clamp(12px, .3vw + 11px, 14px); }

/* Very narrow phones. Below about 380px the toolbars were wrapping into a
   column of single buttons and tables were overflowing the viewport. */
@media (max-width: 400px) {
  .wrap { padding: 10px 7px 64px; }
  .stat { flex-basis: 100%; }
  .toolbar { gap: 5px; }
  .chip { padding: 5px 8px; font-size: 11.5px; }
  .btn { padding: 6px 10px; font-size: 12px; }
  thead th, tbody td { padding: 7px 6px; font-size: 11.5px; }
  .card { padding: 12px 11px; }
  h2.vt { font-size: 18px; }
  .filters { grid-template-columns: 1fr; }
  .walletbar { flex-wrap: wrap; }
  .walletbar input { flex: 1 1 100%; }
}

/* A table is the one thing that cannot reflow, so it scrolls inside its own
   box rather than pushing the page sideways. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body { overflow-x: hidden; }

/* The map fills whatever card it lands in rather than sitting at a fixed 430. */
.bubblemap svg { max-width: 100% !important; width: 100%; }

/* A resource meter. The number alone ("232,008 µs available") means nothing to
   anyone; a bar that fills says the one thing that matters, which is how close
   you are to not being able to transact. */
.meter { margin-bottom: 14px; }
.meter:last-of-type { margin-bottom: 0; }
.meterhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 5px; }
.metertrack { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.meterfill { display: block; height: 100%; background: var(--good); border-radius: 99px; transition: width .3s ease; }
.meterfill.warm { background: var(--accent); }
.meterfill.hot { background: var(--bad); }
.meter .sub { margin-top: 4px; }

/* An order book: a depth bar behind each level, so the wall is visible rather
   than something you infer by reading a column of numbers. */
.obhead { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 6px; }
.obrow .obbar { position: relative; width: 34%; padding: 0; }
.obrow .obbar span { display: block; height: 14px; border-radius: 2px; opacity: .28; }
.obbid { background: var(--good); }
.obask { background: var(--bad); }

/* Sub-tabs within a view. One page had grown seven sections and asked you to
   scroll past resources to reach a balance; three panes is a shorter answer
   than a longer page. */
.subtabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.subtabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 8px 14px; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500;
}
.subtabs button:hover { color: var(--ink-2); }
.subtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 400px) { .subtabs button { padding: 7px 10px; font-size: 12px; } }

/* A switch, not a chip that happens to be pressed. A lone word with a highlight
   state reads as a label on the list beneath it — "risky" looked like it was
   describing what you were already looking at, rather than offering to add it. */
.switchwrap { display: inline-flex; align-items: center; gap: 7px; }
.switchlabel { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.switch {
  position: relative; width: 34px; height: 19px; padding: 0; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 99px;
  transition: background .15s ease, border-color .15s ease;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--muted); transition: transform .15s ease, background .15s ease;
}
.switch[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(15px); background: var(--accent); }
.switch:hover { border-color: var(--accent); }

/* A call to action that is not a button hiding at the bottom of a card. Used
   where there is money already earned and sitting idle — never as decoration,
   or it stops meaning anything. */
.cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-lg); padding: 13px 16px; margin-bottom: 14px;
}
.cta > div { flex: 1 1 260px; font-size: 13.5px; }
.cta .sub { display: block; margin-top: 3px; }
.cta .btn { flex: 0 0 auto; }
.cta.warn { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: var(--bad-soft); }

/* A reward and what to do with it, as one unit. */
.pick { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 8px 0; }
.pick .pickmode {
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--ink-2); font: inherit; font-size: 11px; padding: 2px 4px; cursor: pointer;
}
.pick .pickmode:focus { outline: none; border-color: var(--accent); }

.pc-farm.done { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: var(--good-soft); }

/* The band's edges, as prices. A range bar with no numbers on it tells you that
   you are inside and nothing about where the edges are. */
.pc-band { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-data);
  font-size: 10.5px; color: var(--muted); margin-top: -6px; }
.pc-band .now { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------- compound plan --- */
/* This was three nested cards and a four-tile stat grid inside a card that is
   itself half of a two-column grid — every box drawing its own border, nothing
   with room to breathe. A plan is a short sequence, so it reads as one. */
.cplan .plan { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px; }

.planhead { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-family: var(--font-data); }
.planhead .from { font-size: 15px; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.planhead .arrow { color: var(--muted); }
.planhead .to { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.planhead .note { font-family: var(--font); font-size: 11.5px; color: var(--muted); flex: 1 1 100%; }

/* One row per reward: symbol, amount, value, where it came from, what to do
   with it. The select is the point of the row, so it ends there. */
.prows { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prow { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "s a u sel" "w w w sel";
  align-items: center; gap: 1px 10px; background: var(--surface); padding: 7px 10px; font-size: 12.5px; }
.prow .s { grid-area: s; font-weight: 650; }
.prow .a { grid-area: a; font-family: var(--font-data); color: var(--ink-2); }
.prow .u { grid-area: u; font-family: var(--font-data); }
.prow .w { grid-area: w; font-size: 10.5px; color: var(--muted); }
.prow select { grid-area: sel; }

.planline { display: grid; grid-template-columns: 74px 1fr; gap: 10px; font-size: 12px; align-items: baseline; }
.planline .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.planline .mono { font-size: 11px; }

.cplan .plan > .btn { width: 100%; margin-top: 2px; }
.cplan .runbox:empty { display: none; }

/* A switch inside the plan, where the consequence of flipping it is visible in
   the numbers directly above and below. */
.swapsw { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft, transparent); cursor: pointer; }
.swapsw input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.swapsw .sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* Leaderboards: the rank is the anchor, so it stays fixed-width and quiet. */
#ldOut .rank { color: var(--muted); font-family: var(--font-data); font-size: 12px; text-align: right; }
#ldOut tr.clickable:hover .pairbig { color: var(--accent); }

/* Two named modes rather than a checkbox: the choice decides where the money
   lands, so both outcomes are spelled out and neither is the small print. */
.modeblock { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px; background: var(--surface-2); }
.modeblock > .lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); margin-bottom: 7px; }
.modesel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* A tinted box does not read as "pick one" — a radio does. The dot is the only
   accent here; the selected card is a raised neutral surface, so the eye finds
   the choice without the whole panel turning yellow. */
.modesel .mode { text-align: left; padding: 9px 11px 9px 30px; position: relative;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; display: block; }
.modesel .mode::before { content: ''; position: absolute; left: 10px; top: 11px;
  width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--ground); }
.modesel .mode.on::before { border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--surface); }
.modesel .mode b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.modesel .mode span { display: block; font-size: 11px; color: var(--muted); line-height: 1.45; }
.modesel .mode:hover { border-color: var(--line-2); }
.modesel .mode.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 560px) { .modesel { grid-template-columns: 1fr; } }

/* Where the harvest actually lands, in the amounts the holder is looking for.
   Switching mode changes these numbers, which is the only explanation the
   choice needs. */
.dests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dest { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.dest .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.dest .amt { font-family: var(--font-data); font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.dest .det { font-family: var(--font-data); font-size: 11px; color: var(--muted); line-height: 1.4; }
/* Informational, not an action: a neutral raised surface. The pool box is
   marked by a rule down its edge rather than a fill, so the two destinations
   read as a pair instead of one shouting. */
.dest.in { border-left: 3px solid var(--c3); background: var(--surface-2); }
.dest.out { border-left: 3px solid var(--line-2); background: var(--surface-2); }
.dest.out.empty .amt, .dest.out.empty .det { color: var(--muted); font-weight: 400; }
@media (max-width: 560px) { .dests { grid-template-columns: 1fr; } }

/* The page-level twin of .modesel: two chips, exactly one lit. */
.modechips { display: inline-flex; gap: 0; }
.modechips .chip { border-radius: 0; }
.modechips .chip:first-child { border-radius: var(--r) 0 0 var(--r); }
.modechips .chip:last-child { border-radius: 0 var(--r) var(--r) 0; margin-left: -1px; }
.modechips .chip[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; z-index: 1; }

/* ------------------------------------------------- fees vs farm rewards --- */
/* Two kinds of income that behave differently: a fee accrues from trades
   crossing your band whether or not you did anything, a farm reward is paid by
   an incentive you had to stake into. They were the same grey footnote. One
   colour each, used identically everywhere they appear. */
.src { display: inline-block; font-size: 10px; font-weight: 650; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.src.fee  { color: var(--c1); background: color-mix(in srgb, var(--c1) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 35%, transparent); }
.src.farm { color: var(--c3); background: color-mix(in srgb, var(--c3) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c3) 35%, transparent); }
.srcstat { border-left: 3px solid var(--line-2); padding-left: 10px; }
.srcstat.fee  { border-left-color: var(--c1); }
.srcstat.farm { border-left-color: var(--c3); }

/* A fact about the position, not a refusal. */
.note.warn { border-left: 3px solid var(--c4); background: var(--surface-2); }

/* ------------------------------------------------------ accruing rewards --- */
/* A number going up is the only honest picture of farming, so the type is big
   enough to watch and tabular enough not to jitter as digits change. */
.accrual .acc-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.acc-total { font-family: var(--font-data); font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--c3); }
.acc-rate { font-size: 12.5px; color: var(--muted); }
.acc-rows { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.acc-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 9px;
  background: var(--surface); padding: 7px 11px; font-size: 12.5px; }
.acc-row .sym { font-weight: 650; }
.acc-row .amt, .acc-row .usd { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; }
.acc-row .amt { color: var(--ink); }
.acc-row .usd { color: var(--muted); min-width: 74px; }
/* What is coming in, next to what is waiting. */
.acc-row .rate { font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--c3); text-align: right; white-space: nowrap; }
.acc-row .src:not(.farm) { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 560px) {
  .acc-row { grid-template-columns: auto auto 1fr; }
  .acc-row .rate, .acc-row .usd, .acc-row .src { grid-column: 2 / -1; text-align: left; }
}

/* A row the mode has already decided. It still says where the reward goes —
   just not as a control that pretends the answer is open. */
.prow.fixed { background: var(--surface-2); }
.dest-fixed { grid-area: sel; font-size: 11.5px; color: var(--muted); white-space: nowrap;
  font-family: var(--font-data); }

/* Anything that leads somewhere else looks the same wherever it appears. */
.xlink { cursor: pointer; border-bottom: 1px dotted var(--line-2); }
.xlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------ order book --- */
/* Three stat tiles and two full tables for what is usually six resting orders.
   One block, both sides on a shared ladder, the spread where it belongs. */
.obook { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 11.5px; }
.obook table { width: 100%; border-collapse: collapse; }
.obook td { padding: 2px 8px; border: 0; line-height: 1.6; }
.obook .obbar { width: 34%; position: relative; padding: 2px 6px; }
.obook .obbar span { display: block; height: 12px; border-radius: 2px; opacity: .3; }
.obook .obbar .obbid { background: var(--good); }
.obook .obbar .obask { background: var(--bad); }
.obook .obwho { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obook .obnone { text-align: center; padding: 8px; }
.obmid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 5px 8px; background: var(--surface-2); border-block: 1px solid var(--line); font-size: 11px; }
.obspread { font-family: var(--font-data); font-weight: 650; }
@media (max-width: 560px) { .obook .obwho { display: none; } }

/* The farm page's "if I add" answer, on one line inside its toolbar. It used to
   be two boxes and a table in a half-width card, which is a lot of furniture
   for a rate and a daily figure. */
.earnline { font-size: 12.5px; margin-left: auto; text-align: right; }
.earnline b { font-variant-numeric: tabular-nums; }

/* A wide table is fine. Losing track of which row you are on is not.
   "meer kolommen is niet erg zolang ik maar duidelijk kan zien over welke pool
   het gaat als ik heen en weer scroll" — so the rank and the pair stay put
   while everything to the right of them moves. Both need an opaque background
   or the scrolling columns show through them, and a fixed width on the rank
   column so the second one knows where to stop. */
.tablewrap table th:first-child,
.tablewrap table td:first-child { position: sticky; left: 0; z-index: 3; width: 46px; min-width: 46px; background: var(--surface); }
/* A sticky cell has to be opaque AND bounded. Without a width the pair column
   grows to whatever its longest row needs and then sits on top of the columns
   scrolling underneath it, which is worse than not freezing it at all. */
.tablewrap table th:nth-child(2),
.tablewrap table td:nth-child(2) {
  position: sticky; left: 46px; z-index: 3; background: var(--surface);
  width: 148px; min-width: 148px; max-width: 148px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The header sits above the body where they overlap in the corner. */
.tablewrap table thead th:first-child,
.tablewrap table thead th:nth-child(2) { z-index: 4; }
/* A hairline so the frozen pair reads as a column and not as part of the next. */
.tablewrap table th:nth-child(2)::after,
.tablewrap table td:nth-child(2)::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--line);
}
@media (max-width: 700px) {
  table th, table td { padding: 7px 6px; font-size: 12px; }
  .tablewrap table th:first-child,
  .tablewrap table td:first-child { width: 34px; min-width: 34px; }
  /* On a phone the two frozen columns must not own the viewport: 34 + 104 of a
     390-point screen leaves room for three real columns, where 46 + 210 left
     one and pushed the farm rate off the right edge entirely. */
  .tablewrap table th:nth-child(2),
  .tablewrap table td:nth-child(2) { left: 34px; width: 104px; min-width: 104px; max-width: 104px; }
}

/* What a figure is made of, under the figure. Trading fees and farm rewards are
   different money from different sources — one stops when the incentive ends,
   the other does not — so a card that adds them has to say which is which. */
.fig .figsub { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

/* --------------------------------------------------------- sticky tables ---
   A frozen column only works if the cells scrolling underneath actually pass
   underneath. With border-collapse:collapse the borders belong to the table
   rather than to the cells, and several browsers then paint scrolled content
   straight through a sticky cell — which is why columns you had already
   scrolled past reappeared to the left of the frozen pair. Separate borders,
   owned by the cells, and the frozen columns stay opaque. */
.tablewrap table { border-collapse: separate; border-spacing: 0; }
.tablewrap tbody td { border-bottom: 1px solid var(--line); }
.tablewrap thead th { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------ stat strip ---
   One long value used to widen its own tile and squeeze every other tile flat,
   because each is `flex: 1 1 150px` and a 24px figure like "10.33M WAX" sets a
   wide basis. Below a laptop they share the row equally instead, and the figure
   steps down rather than pushing the tile out of the screen. */
@media (max-width: 900px) {
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 11px 12px; min-width: 0; }
  .stat .v { font-size: 17px; overflow-wrap: anywhere; }
  .stat .k { font-size: 10px; }
  .stat .sub { font-size: 10.5px; overflow-wrap: anywhere; }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .stat .v { font-size: 19px; }
}

/* The three deliberately-large figures. On a laptop 30px reads as a headline;
   on a phone beside 12px body text it reads as a mistake, and in WAX a figure
   like "10.33M WAX" is long enough to push its own container out of the screen
   at that size. */
@media (max-width: 900px) {
  .acc-total { font-size: 22px; }
  .hero-num  { font-size: 22px; }
  .earnline  { margin-left: 0; text-align: left; }
}

/* ------------------------------------------------------------- overflow ----
   A grid item defaults to min-width:auto, which means "never narrower than my
   content". A table with a route column like WAX -> CHEESE -> HOLE -> WAX and
   nowrap cells therefore widens its own grid column instead of scrolling
   inside it, and the column beside it collapses to make room. That is what
   made "Trades" and "Who trades it" mega-wide and the rest of the page thin.
   Grid and flex children get an explicit zero minimum so the scroll container
   inside them does its job. */
.grid > *, .stats > *, .toolbar > * { min-width: 0; }
/* min-width alone is what stops a card being widened by its own table. Adding
   overflow:hidden would also clip anything positioned out of it, sticky headers
   included, so it is not worth the risk. */
.card { min-width: 0; }
.card > .tablewrap { max-width: 100%; }

/* A route is worth a glance, not a column of its own width. It truncates and
   keeps the whole thing in the tooltip. */
td.route-cell, td.pools-cell {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 700px) { td.route-cell, td.pools-cell { max-width: 110px; } }

/* ------------------------------------------------------ narrow screens -----
   Every remaining fixed minimum, relaxed. Each of these is a sensible floor on
   a laptop and a horizontal scrollbar on a phone: a 180px search box plus two
   chips, a 190px filter column doubled, a 170px legend beside a donut. They are
   all "never smaller than this" rules written on a screen where that was never
   going to be tested. */
@media (max-width: 700px) {
  .search { flex: 1 1 100%; min-width: 0; max-width: none; }
  .filters { grid-template-columns: 1fr; }
  .donut { gap: 12px; }
  .donut .legend { min-width: 0; flex-basis: 100%; }
  .pc-farm > div { min-width: 0; flex-basis: 100%; }
  .rangebar { min-width: 0; }
  .pc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 12px 12px; }
  .wrap { padding-left: 10px; padding-right: 10px; }
  /* A route, a memo or an account name must be allowed to end rather than push
     the page sideways. */
  .route, .mono, .pairbig { overflow-wrap: anywhere; }
}

/* Nothing may make the document itself scroll sideways. Where something wide is
   genuinely needed — a twelve-column table, a chart — it scrolls inside its own
   box, which is what .tablewrap and .chart are for. */
/* clip, not hidden. overflow:hidden makes the element a scroll container, and
   a sticky header inside one sticks to THAT instead of to the viewport — the
   top bar would come unstuck the moment this was added. clip does the same job
   without creating one. */
html, body { max-width: 100%; overflow-x: clip; }
.wrap { max-width: 100%; }
.section, .card, .stats, .grid { max-width: 100%; }

/* ------------------------------------------------- rows, boxes and tables ---
   The remaining fixed layouts. Each is a row of five or six columns that fits
   a laptop and cannot fit a phone, so on a narrow screen they wrap into two
   lines instead of running off the side.

   "niet enkel de grafieken, ook alle tabellen en andere vakken moeten goed
   schalen." */
@media (max-width: 700px) {
  /* Six columns of reward: mark, symbol, amount, rate, worth, source. Two rows
     of three, with the numbers still right-aligned against each other. */
  .acc-row { grid-template-columns: auto 1fr auto; row-gap: 2px; padding: 8px 10px; }
  .acc-row .rate { grid-column: 2 / -1; text-align: left; font-size: 10.5px; }
  .acc-row .src  { grid-column: 1 / -1; justify-self: start; }
  .acc-row .usd  { min-width: 0; }

  /* Four figures across a position card is 90px each on a phone. */
  .pc-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A bar's label column has a 74px floor that leaves the bar itself no room
     once the value is a WAX figure. */
  .bars .bar { grid-template-columns: minmax(0, 1.4fr) 1.6fr auto; gap: 7px; }

  /* Every table cell is nowrap so numbers line up, which is right — the table
     scrolls. But it should not be able to scroll further than it has to. */
  .tablewrap { max-height: 68vh; }
  .tablewrap table { font-size: 11.5px; }

  /* .planline is a grid of a 74px label beside its value, not a flex row — so
     it needs a column count, not flex-wrap. The label goes above on a phone,
     where 74px of it is a quarter of the screen. */
  .planline { grid-template-columns: 1fr; gap: 1px; margin-bottom: 6px; }
  .planline .k { font-size: 10px; }
  /* These are flex rows and only need permission to wrap. */
  .obmid, .walletbar { flex-wrap: wrap; }
  /* Four tabs across a phone: let them scroll rather than stack. */
  .subtabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subtabs button { white-space: nowrap; }
}

/* Below a phone in portrait, two figures per card is still one too many. */
@media (max-width: 400px) {
  .pc-figs { grid-template-columns: 1fr; }
  .stat .v { font-size: 17px; }
}

/* --------------------------------------------------------------- live tape --
   A trade tape reads at a glance or not at all: the side is a coloured word,
   the newest row flashes once as it arrives, and a dot says the feed is alive. */
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px;
  background: var(--good); box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent);
  animation: livepulse 1.8s ease-out infinite; vertical-align: middle; }
.livedot.down { background: var(--muted); animation: none; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.side { display: inline-block; min-width: 38px; text-align: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.side.buy  { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.side.sell { color: var(--bad);  background: color-mix(in srgb, var(--bad) 14%, transparent); }
.livetape tr.flash td { animation: tapeflash 1.6s ease-out; }
@keyframes tapeflash { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
.livetape td.acct-cell { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The live tape is the one table where the first two columns are not a name,
   so it opts out of the frozen-pair treatment the market tables use. */
.livetape table th:first-child, .livetape table td:first-child,
.livetape table th:nth-child(2), .livetape table td:nth-child(2) {
  position: static; width: auto; min-width: 0; max-width: none; }
.livetape table th:nth-child(2)::after, .livetape table td:nth-child(2)::after { display: none; }
@media (prefers-reduced-motion: reduce) { .livedot, .livetape tr.flash td { animation: none; } }

/* ===========================================================================
   PRO — the final layer. Everything above grew one fix at a time, and it
   showed: five sizes of label, three row heights, shadows under some boxes and
   not others, an amber pill on every pressed control. This sets density, type
   and chrome once, so every page reads as the same product — flat surfaces
   split by hairlines, one row height, one label style, tabular figures, and
   the accent kept for the one thing on a screen you are meant to press.
   =========================================================================== */
body { font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; letter-spacing: -.003em; }
.num, .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
code, .code, .tx { font-family: var(--font-code); }
.wrap { padding: 18px 20px 64px; }
h2.vt { font-size: 18px; font-weight: 650; letter-spacing: -.015em; margin: 2px 0 12px; }
p.vs { font-size: 12.5px; margin-bottom: 12px; }

/* --- top bar ----------------------------------------------------------- */
.top { height: 52px; gap: 12px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
.brand { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.brand .mark { width: 26px; height: 26px; }
nav.tabs { gap: 2px; margin-left: 6px; }
nav.tabs button { padding: 6px 11px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--muted); }
nav.tabs button:hover { color: var(--ink); background: transparent; }
nav.tabs button[aria-selected="true"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }
.top .spacer { flex: 1 1 0; min-width: 0; }
.top .waxprice { background: transparent; border: 0; padding: 0 2px; font-size: 12.5px; color: var(--muted); font-family: var(--font-data); }
.top .waxprice b { color: var(--ink); }
.top .btn { padding: 6px 12px; font-size: 12.5px; }
.top .chip { padding: 4px 9px; }
.iconbtn { width: 30px; height: 30px; background: transparent; border-color: var(--line); border-radius: var(--r); }

.datapill { display: inline-flex; align-items: center; gap: 6px; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 11.5px;
  color: var(--muted); white-space: nowrap; }
.datapill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.datapill.old .dot { background: var(--accent); }
.datapill:hover { color: var(--ink); border-color: var(--line-2); }
.datapill:disabled { cursor: progress; }
.datapill[hidden] { display: none; }

/* --- global search ----------------------------------------------------- */
.gsearch { position: relative; flex: 0 1 340px; min-width: 150px; margin-left: 4px; }
.gsearch svg { position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; }
.gsearch input { width: 100%; height: 32px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 0 30px 0 31px; color: var(--ink); font: inherit; font-size: 13px; }
.gsearch input::placeholder { color: var(--muted); }
.gsearch input:focus { outline: none; border-color: var(--line-2); background: var(--surface-2); }
.gsearch input::-webkit-search-cancel-button { display: none; }
.gsearch kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 500 11px var(--font-ui); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 0 5px; line-height: 16px; }
.gsearch input:focus ~ kbd { display: none; }
.gresults { position: absolute; top: calc(100% + 6px); left: 0; width: max(100%, 380px); max-width: calc(100vw - 20px);
  max-height: min(70vh, 560px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: 0 18px 50px -14px rgba(0,0,0,.65); padding: 5px; z-index: 80; }
.gresults .grp { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; padding: 8px 9px 4px; }
.gresults .it { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r); cursor: pointer; min-width: 0; }
.gresults .it.on { background: var(--surface-2); }
.gresults .it .nm { font-weight: 600; white-space: nowrap; }
.gresults .it .ct { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gresults .it .meta { margin-left: auto; display: inline-flex; gap: 8px; align-items: baseline; font-size: 12px;
  color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gresults .it .meta b { color: var(--ink); font-weight: 600; }
.gresults .acctmark { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-3); color: var(--muted);
  display: inline-grid; place-items: center; font-size: 11px; flex: none; }
.gresults .none { padding: 14px 10px; color: var(--muted); font-size: 12.5px; }

/* --- controls ---------------------------------------------------------- */
.btn { border-radius: var(--r); padding: 7px 14px; font-size: 13px; font-weight: 600; }
.btn.ghost { background: transparent; }
.chip { border-radius: var(--r); padding: 5px 10px; font-size: 12px; background: transparent; color: var(--ink-2); }
.chip:hover { background: var(--surface-2); }
.chip[aria-pressed="true"] { background: var(--surface-3); border-color: var(--line-2); color: var(--ink); font-weight: 600; }
.search { background: var(--surface); border-radius: var(--r); font-family: var(--font-ui); font-size: 13px; padding: 6px 11px; }
.toolbar { gap: 6px; margin-bottom: 10px; }
.toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
#farmBack, #poolBack, #tokBack { background: none; border: 0; padding: 2px 0; margin-bottom: 10px;
  color: var(--muted); font-weight: 500; font-size: 12.5px; }
#farmBack:hover, #poolBack:hover, #tokBack:hover { color: var(--ink); }
.subtabs { margin-bottom: 12px; gap: 2px; }
.subtabs .chip { border: 0; border-radius: var(--r); }

/* --- summary strip ----------------------------------------------------- */
.stats { margin-bottom: 14px; border-radius: var(--r-lg); box-shadow: none; }
.stat { padding: 11px 14px; }
.stat .v { font-size: clamp(16px, .45vw + 12px, 20px); font-weight: 600; letter-spacing: -.015em; }
.stat .k { font-size: 11px; font-weight: 500; letter-spacing: .01em; text-transform: none; margin-top: 2px; color: var(--ink-2); }
.stat .sub { font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 1px; }

/* --- cards and sections ------------------------------------------------ */
.card { box-shadow: none; border-radius: var(--r-lg); padding: 14px 16px; }
.card h3 { font-size: 13px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ink); margin-bottom: 10px; }
.card h3 .dim { font-size: 12px; font-weight: 400; color: var(--muted); }
.card h3 .hero { font-size: 14px; }
.section { margin-bottom: 18px; }
.section > h3 { font-size: 11px; letter-spacing: .08em; margin-bottom: 9px; }
.grid { gap: 10px; }

/* --- tables ------------------------------------------------------------ */
.tablewrap { box-shadow: none; border-radius: var(--r-lg); }
.tablewrap.flow { max-height: none; }
table { font-size: 12.5px; }
.tablewrap thead th { background: var(--surface); color: var(--muted); font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; padding: 9px 12px; }
.tablewrap tbody td { padding: 0 12px; height: 40px; }
.tablewrap tbody tr:hover td { background: var(--surface-2); }
.tablewrap.flow thead th { transform: translateY(var(--stick, 0px)); }
.tablewrap.flow thead.stuck th { box-shadow: inset 0 -1px 0 var(--line-2); }
/* A table row is one line. Face value, the second figure under a pool's real
   value, doubled every row's height for a number that is in the tooltip. */
.tablewrap .nominal { display: none; }
.tablewrap .xlink { border-bottom-color: transparent; }
.tablewrap .xlink:hover { border-bottom-color: var(--accent); }
.pairbig { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
td.rank { font-size: 11px; }
#farmTable .apr { font-size: 13px; }
.apr { font-weight: 600; }
.rew { font-family: var(--font-data); font-size: 11.5px; padding: 1px 7px 1px 3px; }
/* Alcor's score is on the token page. In a table cell the only verdicts worth
   the width are the bad ones. */
.tablewrap td .trust:not(.bad) { display: none; }
.tablewrap td .sub { font-size: 11px; margin-left: 4px; }

/* The frozen name column is sized for the name on a desktop — 148px cut
   "WAXUSDC/LEEF" to "WAXUSDC…" on a 1440px screen with room to spare. */
@media (min-width: 701px) {
  .tablewrap table th:nth-child(2), .tablewrap table td:nth-child(2) { width: 208px; min-width: 208px; max-width: 208px; }
}
@media (max-width: 700px) {
  /* On a phone the rank is the column to lose: the name is what says which
     row you are on, and 34px of numbers beside it pushed it into "WAX/L…". */
  .tablewrap.flow table th:first-child, .tablewrap.flow table td:first-child { display: none; }
  .tablewrap.flow table th:nth-child(2), .tablewrap.flow table td:nth-child(2) {
    left: 0; width: 138px; min-width: 138px; max-width: 138px; }
  .tablewrap tbody td { height: 38px; padding: 0 8px; }
  .tablewrap thead th { padding: 8px 8px; }
  .pairbig { font-size: 12px; }
  .tablewrap .pairmark { margin-right: 5px; }
}

/* --- phone chrome ------------------------------------------------------ */
@media (max-width: 860px) {
  .top { flex-wrap: wrap; height: auto; padding: 8px 10px 0; gap: 8px; }
  .top > * { order: 2; }
  .brand { order: 0; }
  .brand #brandName { display: none; }
  .gsearch { order: 1; flex: 1 1 120px; min-width: 0; margin: 0; }
  .gsearch kbd { display: none; }
  .gresults { width: calc(100vw - 20px); left: 0; }
  .top .spacer, #dataAge, #themeBtn, .top .waxprice { display: none; }
  nav.tabs { order: 9; width: calc(100% + 20px); margin: 0 -10px; padding: 0 4px; border-top: 1px solid var(--line); gap: 0; }
  nav.tabs button { padding: 9px 11px; border-radius: 0; background: none; border-bottom: 2px solid transparent; }
  nav.tabs button[aria-selected="true"] { background: none; border-bottom-color: var(--accent); }
  .wrap { padding: 12px 10px 56px; }
  h2.vt { font-size: 16px; margin-bottom: 10px; }
}
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 9px 11px; }
  .stat .v { font-size: 16px; }
}
@media (max-width: 400px) {
  .stat { flex-basis: auto; }
}

/* Fee tier beside a pair, and the compact trust mark in a token cell. */
.tier { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 500; color: var(--muted);
  padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; line-height: 15px; vertical-align: 1px; }
.flag { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: var(--bad); background: var(--bad-soft); vertical-align: 1px; cursor: help; }
.flag.soft { color: var(--accent-ink); background: var(--accent-soft); }
/* Reward chips: an icon, an amount and a symbol need no box around them. */
.tablewrap .rew { background: transparent; border: 0; padding: 0; margin-right: 10px; gap: 4px; }
.tablewrap .rew.more { color: var(--muted); }
@media (max-width: 700px) {
  /* The pair may take two lines on a phone rather than lose its second half. */
  .tablewrap.flow td:nth-child(2) .pairbig { display: inline-block; vertical-align: middle; white-space: normal;
    line-height: 1.2; max-width: calc(100% - 42px); }
  .tablewrap.flow td:nth-child(2) .sub, .tablewrap.flow td:nth-child(2) .tier { display: none; }
  /* Each name an atomic box, so the line can break after the slash and nowhere
     inside a symbol. (A <wbr> did this, and Chrome honoured it even in the
     nowrap desktop cell, splitting "PXJ/WPIXAL" across two lines there.) */
  .tablewrap.flow td:nth-child(2) .pairbig .xlink { display: inline-block; }
}

/* --- market page header ------------------------------------------------ */
.ph { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.ph h2.vt { margin: 0; font-size: 20px; }
.ph .ph-meta { font-size: 12px; }
.ph .ph-act { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ph .badge { margin-left: 2px; }
.stat .chg { font-size: 12px; font-weight: 600; margin-left: 4px; letter-spacing: 0; }
@media (max-width: 700px) {
  .ph h2.vt { font-size: 17px; }
  .ph .ph-act { margin-left: 0; width: 100%; }
  .ph .ph-act .btn { flex: 1 1 auto; text-align: center; justify-content: center; padding: 7px 8px; font-size: 12px; }
}
/* An odd number of tiles in a two-column strip leaves a hole that reads as a
   figure that failed to load. The last one takes the row. */
@media (max-width: 900px) {
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Token facts in three column pairs on a desktop: fourteen short facts in one
   narrow column beside a nearly empty card left half the section blank. */
@media (min-width: 900px) {
  dl.facts.cols { grid-template-columns: repeat(3, max-content minmax(0, 1fr)); gap: 8px 18px; }
}
#tokTax:not([hidden]) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* A rate that stands on very little: shown, never ranked as if it were solid. */
/* A rate that cannot be trusted is marked, not recoloured: every APR on the
   site is one colour, and the dotted underline says "hover me" without
   inventing a second meaning for a second colour. */
.apr.thin { opacity: .78; font-weight: 500; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; cursor: help; }
tbody tr.faded td { opacity: 1; }
tbody tr.faded .pairbig, tbody tr.faded .apr { opacity: .8; }

/* --- overview: a wall of ranked tables --------------------------------- */
.ovgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
.ovgrid > .card { min-width: 0; }
.minitab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.minitab th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  font-weight: 500; padding: 0 0 6px; background: none; position: static; border: 0; white-space: nowrap; }
.minitab th.r, .minitab td.r { text-align: right; }
.minitab td { padding: 0 0; height: 34px; border-bottom: 0; border-top: 1px solid var(--line); white-space: nowrap; }
.minitab td:first-child { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.minitab tbody tr:hover td { background: var(--surface-2); }
.minitab .pairbig { font-size: 12.5px; }
.minitab .pairmark { margin-right: 6px; }
.card h3 .more { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--accent-ink); cursor: pointer; white-space: nowrap; }
.card h3 .more:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .ovgrid { grid-template-columns: 1fr; }
  .minitab { font-size: 12px; }
  .minitab td:first-child { max-width: 130px; }
}

/* --- staking ------------------------------------------------------------ */
.stakeimg { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; margin-right: 8px;
  vertical-align: middle; background: var(--surface-3); flex: none; display: inline-block; }
.stakeimg.gen { display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--muted); }
.ph .stakeimg { width: 30px; height: 30px; border-radius: 7px; margin-right: 2px; }
#stakeTable td:first-child { max-width: none; }
.filterbar { margin: 0 0 10px; }
.filterbar .search { flex: 1 1 220px; }
/* Seven tabs and a search box: the brand may not wrap to make room for them. */
.brand { flex: none; white-space: nowrap; }
.brand span { white-space: nowrap; }
@media (max-width: 1240px) { .top { gap: 8px; } nav.tabs button { padding: 6px 8px; font-size: 12.5px; } .gsearch { flex-basis: 220px; } }
@media (max-width: 1100px) { .brand #brandName { display: none; } }
nav.tabs button { white-space: nowrap; }
.ph .stakeimg.gen { font-size: 12px; }

/* A position's band inside a table row: bar first, edges under it. */
.rangewrap { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.rangebar.mini { height: 8px; min-width: 110px; }
.rangetxt { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
td.rangecell { padding-top: 4px; padding-bottom: 4px; }

/* --- ratings ------------------------------------------------------------ */
/* Four verdicts, each a payment. The bar under a button is that verdict's
   share of today's votes, so the shape reads before the numbers do. */
.ratebar { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ratebtn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
  padding: 3px 10px 3px 8px; font: inherit; font-size: 12px; color: var(--ink-2); }
.ratebtn::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--share, 0%);
  background: var(--accent); opacity: .75; }
.ratebtn:hover { border-color: var(--line-2); color: var(--ink); }
.ratebtn.mine { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.ratebtn .em { font-size: 13px; line-height: 1; }
.ratebtn .n { font-variant-numeric: tabular-nums; }
.ratenote { font-size: 11px; margin-left: 4px; }
.ratebar.compact .ratebtn { padding: 2px 8px 2px 6px; font-size: 11.5px; }
.ratebar.compact .ratenote { display: none; }
@media (max-width: 700px) { .ratebar { width: 100%; } }
.ratebtn .em { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif; }
/* The card that carries the most columns takes the width to match. */
.ovgrid > .card.wide { grid-column: 1 / -1; }
.minitab td.strong { font-weight: 600; color: var(--ink); }

/* --- the shared CheeseHub banner slot ----------------------------------- */
.bannerwrap { max-width: min(1900px, 96vw); margin: 18px auto 0; padding: 0 20px; }
@media (max-width: 700px) { .bannerwrap { padding: 0 10px; } }

/* --- open a position ---------------------------------------------------- */
.npband { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.npprice { display: flex; flex-direction: column; gap: 3px; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }
.npprice input { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 9px; color: var(--ink); font-family: var(--font-data); font-size: 13px; width: 100%; }
.npprice input:disabled { opacity: .45; }
.npprice .unit { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 10.5px; }
.npcard .rb-slot { margin-top: 10px; }
.npamts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.npamt { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.npamt .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.npamt .in { display: flex; gap: 6px; align-items: center; }
.npamt input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 9px; color: var(--ink); font-family: var(--font-data); font-size: 13px; }
#npFigs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .npband, .npamts { grid-template-columns: 1fr; } #npFigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.subtabs.inline { display: inline-flex; border: 0; margin: 0; gap: 2px; vertical-align: middle; }
.subtabs.inline .chip { font-size: 11.5px; padding: 3px 9px; }

/* The bubble map's selection readout — the only way to inspect on a phone. */
.bubblepick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: 12.5px; }
.bubblepick b { font-family: var(--font-data); }
.bubblepick .dim { flex: 1 1 200px; font-size: 11.5px; }
.bubblepick .btn { padding: 4px 10px; font-size: 12px; }
.bubblemap svg text { user-select: none; }
@media (max-width: 700px) {
  /* A 9.5px label inside a 430-wide box is 8px on a phone. */
  .bubblemap svg text { font-size: 12px; }
}
/* A ranked table with eight columns does not fit a phone, and truncating the
   name is the worst of the options: it scrolls sideways inside its card. */
.minitabwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.minitabwrap .minitab { min-width: max-content; }
@media (max-width: 700px) {
  .minitab td:first-child { max-width: none; }
  .ovgrid > .card.wide .minitab td:first-child { max-width: none; }
  /* Connect belongs on the same row as the search box, not below it. */
  .top .btn { padding: 6px 10px; font-size: 12px; }
  .gsearch { flex: 1 1 90px; }
}

/* --- the pool's pulse: four windows, and how each one splits ------------- */
.pulsecard { padding: 0; overflow: hidden; margin-bottom: 12px; }
.pulsetabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.pulsetab { background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer;
  padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; }
.pulsetab:last-child { border-right: 0; }
.pulsetab .k { font-size: 10.5px; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.pulsetab .v { font-size: 14px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pulsetab:hover { background: var(--surface-2); }
.pulsetab.on { background: var(--surface-2); }
.pulsetab.on .k { color: var(--ink-2); }
.pulsebody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.pulserow { display: flex; gap: 14px; padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
.pulserow:last-child { border-right: 0; }
.pulserow .pleft { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; min-width: 74px; }
.pulserow .pleft .k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pulserow .pleft .v { font-size: 17px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.psplit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.phead { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.pnums { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.pbar { display: flex; height: 5px; gap: 3px; border-radius: 99px; overflow: hidden; margin-top: 1px; }
.pbar i { display: block; height: 100%; border-radius: 99px; }
.pbar i.buy { background: var(--good); }
.pbar i.sell { background: var(--bad); }
.pulsenote { margin: 0; padding: 0 14px 11px; font-size: 11px; }
@media (max-width: 860px) {
  .pulsebody { grid-template-columns: 1fr; }
  .pulserow { border-right: 0; border-bottom: 1px solid var(--line); }
  .pulserow:last-child { border-bottom: 0; }
}

/* Net flow: the one line the movement panel exists to produce. */
.moveflow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 0 0; }
.moveflow .k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.moveflow .v { font-size: 18px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.moveflow .sub { font-size: 11.5px; }
.moveflow .sub:last-child { flex: 1 1 100%; }
#tokMoves .pulsebody { margin: 0 -16px; }
#tokMoves .pulserow { padding: 12px 16px; }
#tokMoves .acct-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- token header ------------------------------------------------------- */
/* Same shape as a market page: mark, name, what it is, then the things you
   can do with it — rather than a name, a contract, a row of pills and a row
   of buttons each floating on a line of their own. */
.tokhead .vt { font-size: 22px; }
.tokhead .trust { align-self: center; }
.tokhead #tokStar { display: inline-flex; align-items: center; }
.ph-act .ratebar { margin-right: 4px; }
.ratebtn { padding: 4px 10px 4px 7px; gap: 6px; }
.ratebtn .em { font-size: 14px; }
.ratebtn .n { font-size: 12px; color: var(--ink-2); }
.ratebtn.mine .n { color: var(--accent-ink); }
.ratenote { align-self: center; }
@media (max-width: 700px) {
  .tokhead .vt { font-size: 19px; }
  .tokhead .ph-meta { flex: 1 1 100%; margin-top: -4px; }
  /* Ratings take their own line, the two buttons share the next one. */
  .ph-act .ratebar { flex: 1 1 100%; margin: 0 0 2px; }
  .ph-act .btn { flex: 1 1 0; }
  .ratebtn { flex: 1 1 auto; justify-content: center; }
}
/* What a farm pays: the money first, then which tokens it is paid in. */
td.paycell { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
td.paycell .payday { margin-right: 8px; font-variant-numeric: tabular-nums; }
td.paycell .rew { padding: 0; margin-right: 7px; background: none; border: 0; }
@media (max-width: 700px) { td.paycell { max-width: 150px; } }
/* With the Age column back and the rewards column slimmed, the name column can
   take the room it needs: WAXUSDC/PARAUSD is a pool, "WAXUSDC/PARAUSD…" is a
   guess. */
@media (min-width: 1200px) {
  .tablewrap table th:nth-child(2), .tablewrap table td:nth-child(2) { width: 246px; min-width: 246px; max-width: 246px; }
}
/* A tape with eight columns wants the width; in a half-width card the maker
   falls off the end, which is the column that makes it a tape. */
#tokTape .tablewrap { max-height: 420px; }
.card h3 .more[data-poolkey] { cursor: pointer; }

/* --- staking, as cards -------------------------------------------------- */
/* Fifty farms differ by what they are, not by a column of measurements: the
   picture, the name and what it pays a day carry the row. */
.stakegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 10px; }
.stakecard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; min-width: 0; }
.stakecard:hover { border-color: var(--line-2); background: var(--surface-2); }
.stakecard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stakecard.over { opacity: .62; }
.stakecard.over:hover { opacity: 1; }
.stakecard > header { display: flex; align-items: center; gap: 9px; min-width: 0; }
.stakecard .stakeimg { width: 34px; height: 34px; border-radius: 8px; margin: 0; font-size: 12px; }
.stakecard .sname { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.stakecard .sname b { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stakecard .sname .sub { font-size: 11px; }
.saprchip { flex: none; font-size: 12px; font-weight: 650; color: var(--good);
  background: var(--good-soft); border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.stakecard .spays { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 9px; }
.stakecard .spays .amount { font-size: 19px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stakecard .spays .per { font-size: 11.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.stakecard .spays .rewards { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.stakecard .rew { background: transparent; border: 0; padding: 0; margin: 0; font-size: 11.5px; color: var(--ink-2); }
.stakecard .stakes { font-size: 11.5px; color: var(--muted); }
.stakecard .stakes b { color: var(--ink-2); font-weight: 600; }
.stakecard > footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: auto; }
.stakecard .sfig { background: var(--surface); padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stakecard:hover .sfig { background: var(--surface-2); }
.stakecard .sfig .k { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stakecard .sfig .v { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stakeSort { margin: 0 0 10px; }
@media (max-width: 460px) { .stakegrid { grid-template-columns: 1fr; } }

/* --- wide screens: rows the eye can follow ------------------------------ */
/* On a 1440px-plus screen a four-column table stretched to full width puts
   the token name and its amount a hand's width apart, and with ten farms the
   eye loses which number belongs to which row. So the few-column tables of
   the wallet pack their columns against their content instead of the
   screen, every table gets a faint alternate row, and the page itself stops
   growing past a width a line can still be read across. */
.wrap { max-width: min(1680px, 96vw); }
.tablewrap tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.tablewrap tbody tr:hover td { background: var(--surface-3); }
.tablewrap table th:nth-child(2), .tablewrap table td:nth-child(2) { background-clip: padding-box; }

/* Accrual rows: token, then its figures right beside it, filler last. */
.acc-row { grid-template-columns: 22px minmax(70px, 150px) minmax(120px, max-content) minmax(130px, max-content) minmax(70px, max-content) max-content 1fr; column-gap: 18px; }
.acc-row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.acc-row:hover { background: var(--surface-3); }

/* Wallet tables with a handful of columns hug their content. */
#view-wallet .wpane .tablewrap table { width: auto; min-width: min(100%, 760px); }
#view-wallet .wpane .tablewrap table td, #view-wallet .wpane .tablewrap table th { padding-right: 22px; }
@media (max-width: 700px) {
  .acc-row { grid-template-columns: auto 1fr auto; column-gap: 9px; }
  #view-wallet .wpane .tablewrap table { width: 100%; min-width: 0; }
}

/* --- overview: one grid, so every card edge sits on the same lines ------- */
/* Three grids stacked (a full-width table, then three columns, then two) put
   the card edges somewhere different on every row. One grid: the payouts lead
   across it, the charts share its columns, nothing is left on a row alone. */
.ovgrid { grid-template-columns: minmax(0, 1fr); }
.ovgrid > .card.ovpay { grid-column: 1 / -1; }
.ovapr tbody tr:nth-child(n+11) { display: none; }
@media (min-width: 1000px) {
  .ovgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovgrid > .card.ovwax { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {
  .ovgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ovgrid > .card.ovpay { grid-column: span 2; }
  .ovgrid > .card.ovwax { grid-column: span 2; }
  .ovapr tbody tr:nth-child(n+11) { display: table-row; }
}
.minitab th + th, .minitab td + td { padding-left: 14px; }
.bannerwrap { max-width: min(1680px, 96vw); }
.minitab td > [data-pm] > .tokmark { margin-right: 6px; }
@media (max-width: 700px) { .minitab th + th, .minitab td + td { padding-left: 10px; } }

/* --- the CheeseHub slot: whole artwork, in the flow, labelled ------------- */
.ovgrid { grid-auto-flow: row dense; }
.ovgrid > .ovbanner { grid-column: 1 / -1; }
/* One banner a page: where the page has its own spot, the one above the
   footer stays out of it. */
body:has(.view.active:not(#view-wallet) .inview-banner) #cheeseBanner,
body:has(#view-wallet.active [data-wpane="all"]:not([hidden]) .inview-banner) #cheeseBanner { display: none; }
.inview-banner:not(.ovbanner) { margin: 0 0 16px; }
#walletAll .inview-banner { margin: 12px 0 0; }
.bannerslot { padding: 10px 14px 14px; }
.bannerhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; min-width: 0; }
.bannerhead .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bannerhead .sponsored { flex: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 99px; padding: 1px 7px; }
.bannerhead .more { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 500; color: var(--accent-ink); text-decoration: none; }
.bannerhead .more:hover { text-decoration: underline; }
.bannertiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bannertile { flex: 1 1 380px; max-width: 580px; aspect-ratio: 580 / 150; display: block; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.bannertile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bannertile:hover { border-color: var(--line-2); }

/* --- filter blocks: one labelled choice per question ---------------------- */
.filterblocks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.fblock { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 9px 9px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.fblock .fl { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.seg { display: inline-flex; gap: 2px; padding: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.seg::-webkit-scrollbar { display: none; }
.seg button { font: inherit; font-size: 12.5px; line-height: 1.2; color: var(--ink-2); background: none; border: 0;
  border-radius: calc(var(--r) - 2px); padding: 6px 9px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); background: var(--surface-3); }
.seg button[aria-checked="true"] { color: var(--ink); font-weight: 600; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg button .dir { color: var(--muted); font-weight: 400; }
.mineblock { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mineblock button[data-v="mine"][aria-checked="true"] { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 700px) {
  .fblock { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; }
  .fblock .fl { flex: none; }
  .seg button { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 700px) {
  .sortblock { flex-direction: column; align-items: stretch; }
  .sortblock .seg { width: 100%; justify-content: space-between; }
  .sortblock .seg button { padding: 6px 6px; }
}

/* --- wallet: the account as one number ----------------------------------- */
.acctval { padding: 16px 18px; }
.avhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.avhead .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.avhead .big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.avbar { display: flex; gap: 2px; height: 10px; margin: 12px 0 14px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.avbar span { flex-basis: 0; min-width: 3px; }
.avbar span.empty { flex: 1; background: none; }
.avparts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.avpart { display: grid; grid-template-columns: 10px 1fr auto; grid-template-areas: "sw lb sh" "vl vl vl" "nt nt nt";
  align-items: center; column-gap: 7px; row-gap: 3px; text-align: left; font: inherit; color: inherit; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; cursor: pointer; min-width: 0; }
.avpart:hover { border-color: var(--line-2); text-decoration: none; }
.avpart .sw { grid-area: sw; width: 10px; height: 10px; border-radius: 3px; }
.avpart .lb { grid-area: lb; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.avpart .sh { grid-area: sh; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.avpart .vl { grid-area: vl; font-size: 17px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.avpart .vl .spinner { width: 14px; height: 14px; }
.avpart .nt { grid-area: nt; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wherechip { display: inline-block; font-size: 10.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 0 7px; margin-right: 4px; line-height: 17px; }
#acctTop .minitab td:first-child { max-width: none; }
@media (max-width: 1000px) { .avparts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .avparts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avhead .big { font-size: 26px; }
}

/* --- value over time --------------------------------------------------------- */
.histstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.histstats .hs { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.histstats .k { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.histstats .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.histstats .c { font-size: 11.5px; font-variant-numeric: tabular-nums; }
#acctRange .chip { padding: 2px 9px; }
.capmark { color: var(--warn, #c98500); margin-left: 1px; cursor: help; }

/* --- wallet trades, rewards waiting --------------------------------------- */
.side.cycle { color: var(--ink-2); background: var(--surface-3); }
.wtrades td.mkt { white-space: nowrap; }
.wtrades td.mkt .dim { font-weight: 400; }
.wtrades td.route-cell { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtrades table { font-size: 12.5px; }
.rwhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.rwhead .big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
#walRewards .minitab td:first-child { max-width: none; }
.ratedtab th .em { font-size: 13px; letter-spacing: 0; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* --- wallet: all tab ------------------------------------------------------ */
.avhero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr); gap: 22px; padding: 16px 18px; }
.avnum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.avnum .k, .avchart .k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.avnum .big { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.15; }
.avchg { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.chgchip { font-size: 12px; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); }
.avnum .avbar { margin: 10px 0 8px; }
.avlegend { display: flex; flex-direction: column; gap: 2px; }
.avleg { display: grid; grid-template-columns: 10px 1fr auto 38px; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; color: var(--ink-2);
  background: none; border: 0; padding: 4px 6px; margin: 0 -6px; border-radius: var(--r); cursor: pointer; text-align: left; text-decoration: none; }
.avleg:hover { background: var(--surface-2); text-decoration: none; }
.avleg .sw { width: 10px; height: 10px; border-radius: 3px; }
.avleg b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.avleg .dim { text-align: right; font-variant-numeric: tabular-nums; }
.avchart { min-width: 0; }
.avchart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.avrow { margin-top: 12px; }
.todolist { display: flex; flex-direction: column; gap: 6px; }
.todo { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  font: inherit; font-family: var(--font-ui); font-size: 13.5px; line-height: 1.35; text-align: left; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 10px 10px 13px; cursor: pointer; }
.todo .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.todo.good .dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
.todo.warn .dot { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.todo.static { cursor: default; }
.todo.static .dot { background: var(--muted); box-shadow: none; }
.todo:not(.static):hover { border-color: var(--line-2); background: var(--surface-3); }
.todo b { color: var(--ink); font-weight: 600; }
.todo .go { flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink); background: transparent; border-radius: 99px;
  padding: 5px 12px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2); }
.todo.good .go { color: #0b1f16; background: var(--good); box-shadow: none; }
.todo .btn { padding: 5px 12px; font-size: 12.5px; }
.earnrows { display: flex; flex-direction: column; }
.earnrow { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.earnrow:first-child { border-top: 0; }
.earnrow b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.earntotal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 13px; }
.earntotal b { font-size: 20px; font-variant-numeric: tabular-nums; }
.holdtab td:first-child { max-width: none; }
@media (max-width: 900px) { .avhero { grid-template-columns: 1fr; } }

/* --- wallet: farm cards ------------------------------------------------------ */
.fhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; }
.fhead b { font-size: 17px; font-variant-numeric: tabular-nums; }
.fhead .sub { display: block; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.fcard { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; }
.fcard.over { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.fcard header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fcard header .stakeimg { width: 34px; height: 34px; border-radius: 8px; margin: 0; }
.fcard .fname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fcard .fname .xlink { font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcard .fname .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.ffigs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ffigs > div { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 7px 9px; min-width: 0; }
.ffigs .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ffigs .v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ffigs .s { font-size: 11px; color: var(--muted); }
.fcard footer { display: flex; gap: 8px; }
.fcard footer .btn { flex: 1; justify-content: center; }

/* A position card on a phone: the value goes under the pair instead of
   squeezing the name and its details into a column a few letters wide. */
@media (max-width: 700px) {
  .pc-head { flex-wrap: wrap; }
  .pc-id { flex-basis: calc(100% - 50px); }
  .pc-val { flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 10px; text-align: left; padding-left: 49px; }
}

/* More table to the right: fade the edge it continues past. */
.tablewrap.more-right, .minitabwrap.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* --- phone readability ----------------------------------------------------- */
.bubblepick[hidden] { display: none; }
.bubblecap { text-align: center; margin: 4px 0 0; font-size: 11px; }
@media (max-width: 700px) {
  /* A heading with a subtitle and controls: title and controls on one line,
     the subtitle under them — not all three squeezed into columns. */
  .card h3 { flex-wrap: wrap; row-gap: 3px; }
  .card h3 > .dim { order: 2; flex: 1 1 100%; }
  .section > h3 { flex-wrap: wrap; row-gap: 2px; }
  .section > h3 > .dim { order: 2; flex: 1 1 100%; }
  .section > h3:has(> .dim)::after { display: none; }
  dl.facts.cols { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 7px 12px; }
}
.bannerslot.empty { padding: 8px 14px; }
.bannerslot.empty .bannerhead { margin: 0; }
@media (max-width: 700px) {
  /* One banner on a phone: two stacked is a screenful of advertising. */
  .bannertile + .bannertile { display: none; }
  .bannerslot { padding: 8px 10px 10px; }
  .bannerhead { font-size: 11px; margin-bottom: 7px; }
}
/* The card as wide as its banner, not the page: an ad framed by a
   screen-wide empty box reads bigger than it is. */
[data-banner-host] .bannerslot { width: fit-content; max-width: 100%; margin-inline: auto; }
[data-banner-host] .bannerslot .bannertiles { min-width: min(580px, 100%); }
[data-banner-host] .bannertile { flex-basis: 580px; }

/* --- advertise -------------------------------------------------------------- */
.adsfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.adsfacts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adsfacts .k { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.adsfacts b { font-size: 16px; font-variant-numeric: tabular-nums; }
.adsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.adsday { display: flex; flex-direction: column; gap: 5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.adsdate { font-size: 12.5px; }
.adsslot { display: grid; grid-template-columns: 18px 1fr; grid-template-areas: "pos st" "pos pr"; align-items: center; column-gap: 6px;
  text-align: left; font: inherit; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--r) - 2px); padding: 5px 7px; cursor: pointer; }
.adsslot .pos { grid-area: pos; font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.adsslot .st { grid-area: st; }
.adsslot .pr { grid-area: pr; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.adsslot.free .st, .adsslot.join .st { color: var(--good); font-weight: 600; }
.adsslot:disabled { cursor: default; opacity: .55; }
.adsslot.mine { opacity: 1; border-color: var(--accent); }
.adsslot.mine .st { color: var(--accent-ink); font-weight: 600; }
.adsslot:not(:disabled):hover { border-color: var(--line-2); }
.adsslot.picked { border-color: var(--accent); background: var(--accent-soft); }
.adsslot.picked .st { color: var(--accent-ink); }
.adsbar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 0 2px; background: var(--surface); border-top: 1px solid var(--line); font-size: 13px; }
.adsmine { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.adsmineRow { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.adsform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.adspreview { margin-top: 10px; max-width: 580px; aspect-ratio: 580 / 150; border: 1px dashed var(--line-2); border-radius: var(--r); overflow: hidden; display: grid; place-items: center; }
.adspreview img { width: 100%; height: 100%; object-fit: contain; }
#adsMode button { font-size: 12px; }
@media (max-width: 700px) {
  .adsfacts { grid-template-columns: 1fr 1fr; }
  .adsform { grid-template-columns: 1fr; }
  .adsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- amount fields ----------------------------------------------------------- */
.amtrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.amtrow input { width: 140px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 7px 9px; color: var(--ink); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.amtrow input:focus { outline: none; border-color: var(--accent); }
.amtrow .cur { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.pwtop { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.pwtop input { margin-top: 2px; }

/* --- resources ---------------------------------------------------------------- */
.pwtop[hidden] { display: none; }
.stakebox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
.stakebox .sb-col { padding: 14px 16px; min-width: 0; }
.stakebox .sb-col + .sb-col { border-left: 1px solid var(--line); }
.stakebox h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.stakebox h4 .dim { font-weight: 400; font-size: 12px; }
.stakebox .stats { grid-template-columns: 1fr; }
.flashcard { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; }
@media (max-width: 900px) {
  .stakebox { grid-template-columns: 1fr; }
  .stakebox .sb-col + .sb-col { border-left: 0; border-top: 1px solid var(--line); }
}

.proxypick { display: flex; gap: 8px; align-items: center; }
.proxypick select { flex: 1; min-width: 0; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 9px; font: inherit; font-size: 13px; }
.proxypick select:focus { outline: none; border-color: var(--accent); }

/* --- resources, with some life in it ------------------------------------------ */
.restiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.restile { --tone: var(--good); position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px;
  padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 55%), var(--surface); }
.restile.warm { --tone: var(--accent); }
.restile.hot { --tone: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.ring { position: relative; width: 76px; height: 76px; }
.ring svg { width: 100%; height: 100%; }
.ring .track { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.ring .fill { fill: none; stroke: var(--tone); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ring-pct small { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: 1px; }
.rt-body { min-width: 0; }
.rt-name { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .09em; font-weight: 700; color: var(--muted); }
.rt-icon { display: inline-grid; width: 16px; height: 16px; color: var(--tone); }
.rt-icon svg { width: 16px; height: 16px; }
.rt-big { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.rt-act { grid-column: 1 / -1; justify-self: start; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
  background: none; border: 0; padding: 0; cursor: pointer; }
.rt-act:hover { text-decoration: underline; }

.buycard { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 40%); }
.buyhead { display: flex; align-items: center; gap: 12px; }
.buyicon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  color: #111; background: linear-gradient(135deg, #f7c65a, var(--accent)); box-shadow: 0 6px 18px -8px var(--accent); }
.buyicon.ram { color: #fff; background: linear-gradient(135deg, #6aa8ff, var(--c1)); box-shadow: 0 6px 18px -8px var(--c1); }
.buyicon svg { width: 22px; height: 22px; }
.buytitle { font-size: 16px; font-weight: 700; color: var(--ink); }
.buyinput { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 6px 6px 14px; }
.buyinput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.buyinput input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit;
  font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 0; }
.buyinput .unit { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 0 10px; }
.buyinput .seg { flex: none; }
.buymeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: -4px; }
.buymeta b { color: var(--ink-2); }
.buymeta .quick { display: flex; gap: 4px; }
.linkbtn { font: inherit; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border: 0; border-radius: 99px; padding: 3px 10px; cursor: pointer; }
.linkbtn:hover { filter: brightness(1.15); }
.splitbox { display: flex; flex-direction: column; gap: 6px; }
.splitlabels { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.splitlabels b { color: var(--ink); font-variant-numeric: tabular-nums; }
.splitlabels i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 6px; vertical-align: middle; }
.splitlabels i.cpu { background: var(--accent); margin-left: 0; }
.splitlabels i.net { background: var(--c1); margin-right: 0; }
#pwSplit { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) calc(var(--v, 100) * 1%), var(--c1) calc(var(--v, 100) * 1%), var(--c1) 100%); }
#pwSplit::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--bg); box-shadow: 0 1px 6px rgba(0,0,0,.5); }
#pwSplit::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--bg); }
.buyresult { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--line-2); }
.buyresult .k { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.buyresult b { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.btn.big { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; border-radius: 12px; }
.unrows { display: flex; flex-direction: column; gap: 8px; }
.unrows label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.unrows input { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--ink); font: inherit; font-size: 14px; }
.unrows input:focus { outline: none; border-color: var(--accent); }
.stakebox { border-radius: 14px; }
@media (max-width: 900px) { .restiles { grid-template-columns: 1fr; } }
.chiprow { display: contents; }

/* The two sides of a deposit: what the position holds, what the wallet holds. */
.lpsides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lpsides > div { display: flex; flex-direction: column; gap: 1px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 10px; min-width: 0; }
.lpsides .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lpsides b { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lpsides .s { font-size: 11px; color: var(--muted); }

/* --- old projects ------------------------------------------------------------- */
.fungrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.funcard { display: flex; flex-direction: column; gap: 10px; align-self: start; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px 14px; min-width: 0; }
.funcard header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.funimg { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--surface-3); flex: none; }
.funimg.gen { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.funcard .fnname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.funcard .fnname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funcard .fnname .sub { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.funfigs > div { display: flex; flex-direction: column; gap: 1px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 9px; min-width: 0; }
.funfigs .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.funfigs .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fundesc { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.funfigs .s { font-size: 11px; color: var(--muted); }

/* ---- leaderboard --------------------------------------------------------- */
.ldsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 12px; }
.ldpie .donut { margin-top: 6px; }
.ldfacts .ftrows { margin-top: 4px; }
@media (max-width: 860px) { .ldsplit { grid-template-columns: minmax(0, 1fr); } }
.ldconc { margin: 0 0 10px; }
.ldbar { display: inline-block; position: relative; padding: 1px 7px; border-radius: 5px; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--accent-soft) var(--w), transparent var(--w)); }

/* ---- deviation area ------------------------------------------------------ */
.devchart { margin: 6px 0 2px; }
.devsvg { display: block; overflow: visible; }
.devgrid { stroke: var(--line); stroke-width: 1; }
.devzero { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .85; }
.devlabel { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.devlabel.now { font-weight: 700; }
.devlabel.now.up { fill: var(--good); }
.devlabel.now.down { fill: var(--bad); }
.devfill.up { fill: var(--good); opacity: .16; }
.devfill.down { fill: var(--bad); opacity: .16; }
.devline { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.devline.up { stroke: var(--good); }
.devline.down { stroke: var(--bad); }
.devdot.up { fill: var(--good); }
.devdot.down { fill: var(--bad); }
.devcross { stroke: var(--line-2, var(--line)); stroke-width: 1; }
.devhoverdot { fill: var(--ink); }

/* ---- promoted cards ------------------------------------------------------ */
/* Eight of these can be live at once, so they are one line of figures tall. */
.promogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 8px; }
.promocard { display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--accent); border-radius: var(--r); padding: 8px 10px; }
.promocard:hover { background: var(--accent-soft); }
.promocard header { display: flex; align-items: center; gap: 6px; min-width: 0; }
.promocard header b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promocard .pmark { display: inline-flex; align-items: center; flex: none; }
.promocard .badge { flex: none; font-size: 8.5px; padding: 0 4px; }
.promoleft { margin-left: auto; font-size: 10px; color: var(--muted); white-space: nowrap; }
.promoline { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promoline .sep { color: var(--line); margin: 0 5px; }
.promoline .dim { font-size: 10.5px; }
.promoline .pos { color: var(--good); }
.promoline .neg { color: var(--bad); }

/* ---- ticker -------------------------------------------------------------- */
/* The one strip that is on every page, which is what makes a paid slot in it
   worth paying for. Promoted entries sit in front and are marked as paid. */
/* Sticky under the header, which is 54px and sticky itself — a second
   sticky element at top 0 would sit on top of it. z-index one below, so the
   header's own search results still cover the strip. */
.tickerbar { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 54px; z-index: 39; }
/* display:flex on a class beats the browser's own [hidden] rule, which is how
   an empty strip stayed on screen with nothing in it. */
.tickerbar[hidden] { display: none; }
@media (max-width: 720px) { .tickerbar { position: static; } }
.tklabel { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted);
  border-right: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.tkviewport { flex: 1; min-width: 0; overflow: hidden; }
.tktrack { display: flex; width: max-content; animation: tkroll var(--tkdur, 40s) linear infinite; }
.tickerbar:hover .tktrack, .tickerbar:focus-within .tktrack { animation-play-state: paused; }
.tkrun { display: flex; }
@keyframes tkroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tkitem { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: none; border: 0;
  border-right: 1px solid var(--line); color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tkitem:hover { background: var(--surface-2); color: var(--ink); }
.tkrank { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 12px; text-align: right; }
.tkname { font-weight: 650; }
.tkval { font-variant-numeric: tabular-nums; }
.tkval.dim { color: var(--muted); }
.tkval.pos { color: var(--good); }
.tkval.neg { color: var(--bad); }
.tkval.apr { color: var(--accent); }
.tkitem.invite { color: var(--muted); }
.tkitem.invite .tkname { font-weight: 600; color: var(--ink-2); }
.tkitem.invite .tkpaid { color: var(--muted); border-color: var(--line); }
.tkempty { width: 100%; }
.tkitem.paid { background: var(--accent-soft); }
.tkitem.paid:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.tkpaid { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px; }
@media (prefers-reduced-motion: reduce) {
  .tktrack { animation: none; }
  .tkviewport { overflow-x: auto; }
  .tkrun + .tkrun { display: none; }
}
@media (max-width: 720px) {
  .tklabel { padding: 0 8px; font-size: 9px; }
  .tkitem { padding: 6px 10px; font-size: 11.5px; }
}

.promoshow { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.promoprev { position: static; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.promoprev .tkitem { pointer-events: none; }

/* ---- price band chart --------------------------------------------------- */
.bandchart { margin: 10px 0 2px; }
.bandsvg { display: block; overflow: visible; touch-action: none; }
.bcgrid { stroke: var(--line); stroke-width: 1; }
.bclabel { font-size: 10px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.bclabel.now { fill: var(--ink-2); font-weight: 600; }
.bclabel.edge { fill: var(--accent); font-weight: 600; }
.bcband { fill: var(--accent-soft); stroke: var(--accent); stroke-opacity: .35; stroke-width: 1; }
.bcline { fill: none; stroke: var(--c1); stroke-width: 1.8; stroke-linejoin: round; }
.bcline.out { stroke: var(--muted); stroke-dasharray: 3 3; }
.bcnow { fill: var(--c1); }
.bcnowline { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.bchandle { cursor: ns-resize; }
.bchandle:focus { outline: none; }
.bchline { stroke: var(--accent); stroke-width: 1.5; }
.bchgrip { fill: var(--accent); opacity: .18; }
.bchandle:hover .bchgrip, .bchandle:focus .bchgrip { opacity: .38; }
.bchit { fill: transparent; }

.stat.lead { background: var(--accent-soft); border-color: var(--accent); }
.stat.lead .v { color: var(--ink); }
.stat.lead .k { color: var(--accent); }

/* ---- WaxFusion ---------------------------------------------------------- */
/* The protocol as a strip: what you bring, what you hold, what you get back. */
.fuflow { display: flex; align-items: stretch; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.fustep { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.fustep.on { border-color: var(--good); background: var(--good-soft); }
.fustep.alt { border-color: var(--accent); background: var(--accent-soft); }
.fustep .k { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fustep b { font-size: 17px; letter-spacing: -.01em; }
.fustep .s { font-size: 11px; color: var(--ink-2); }
.fuarrow { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; color: var(--muted); text-align: center; }
.fuarrow i { display: block; width: 100%; height: 0; border-top: 1.5px dashed var(--line); position: relative; }
.fuarrow i::after { content: ''; position: absolute; right: 0; top: -3.5px; border: 3.5px solid transparent; border-left-color: var(--line); }
.fuarrow .back { color: var(--muted); opacity: .75; }
.fuarrow.two i::before { content: ''; position: absolute; left: 0; top: -3.5px; border: 3.5px solid transparent; border-right-color: var(--line); }
@media (max-width: 720px) {
  /* flex-basis 130px means 130px TALL once the strip turns vertical, which
     made four steps eight hundred pixels of mostly empty box. */
  .fuflow { flex-direction: column; gap: 2px; }
  .fustep { flex: 0 0 auto; padding: 8px 11px; }
  .fustep b { font-size: 15px; }
  .fuarrow { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 1px 0 1px 12px; justify-content: flex-start; }
  .fuarrow i { width: 34px; }
  .fusplit { flex-wrap: wrap; }
  .fubar { flex: 1 1 100px; }
  /* The open period's pill is wider than the block it belongs to on a phone,
     so it sits under the rail as a line rather than hanging off the edge. */
  .furail { height: 78px; }
  .fuperiodlab.full { left: 0 !important; transform: none; top: 48px; }
}

/* Revenue, as the split it is. */
.fusplit { display: flex; gap: 4px; align-items: stretch; }
.fubar { position: relative; min-width: 0; border-radius: var(--r); padding: 10px 12px;
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fubarv { display: block; font-size: 17px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.fubark { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-2); }

/* The redemption calendar as a rail. */
.fuwindow { margin-bottom: 12px; }
.furail { position: relative; height: 62px; margin: 16px 0 6px; }
.furailbg { position: absolute; left: 0; right: 0; top: 22px; height: 6px; border-radius: 99px; background: var(--surface-3); }
.fuperiod { position: absolute; top: 16px; height: 18px; border-radius: 5px; background: var(--accent-soft); border: 1px solid var(--accent); }
.fuperiod.open { background: var(--good-soft); border-color: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.fuperiod.past { background: var(--surface-3); border-color: var(--line); }
.fuperiodlab { position: absolute; top: 38px; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.fuperiodlab.full { font-size: 10.5px; font-weight: 650; color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; top: 36px; }
.fuperiodlab.full.open { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.fuperiodlab.open { color: var(--good); font-weight: 700; }
.fuperiodlab.past { opacity: .5; }
.funow { position: absolute; top: 8px; width: 2px; height: 34px; background: var(--ink); transform: translateX(-1px); }
.funowlab { position: absolute; top: 0; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--ink); }
.fulegend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.fulegend i.d { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px;
  background: var(--accent-soft); border: 1px solid var(--accent); vertical-align: -1px; }
.fulegend i.d.open { background: var(--good-soft); border-color: var(--good); }
.fulegend i.d.past { background: var(--surface-3); border-color: var(--line); }

.keepergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; margin-top: 10px; }
.keeper { display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px; }
.keeper > div { display: flex; flex-direction: column; gap: 3px; }
.keeper b { font-size: 13px; }
.keeper .sub { margin: 0; font-size: 11.5px; }
.keepwhen { font-size: 11px; color: var(--muted); margin-top: 2px; }
.keepwhen b { font-weight: 700; }
.keeper .btn { width: 100%; justify-content: center; }
#fusionDesk .seg { width: 100%; }
#fusionDesk .seg button { flex: 1; }
#fusionDesk .btn { width: 100%; justify-content: center; }
#fusionDesk .pwtop { align-items: center; gap: 8px; }
.furedeemcap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.furedeemcap b { color: var(--ink); font-variant-numeric: tabular-nums; }
.furedeemcap.over { border-color: var(--warn, var(--accent)); }

/* ---- blends ------------------------------------------------------------- */
.blendflow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.blendflow > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.blendflow .k { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.blendflow .v { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blendflow .arrow { color: var(--accent); font-size: 16px; align-items: center; }
.blendneed { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; }
.blendpick { border-top: 1px dashed var(--line); padding-top: 6px; }
.assetrow { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: thin; }
.assetchip { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 5px; cursor: pointer; color: var(--ink-2); }
.assetchip img, .assetchip .ph { width: 64px; height: 64px; border-radius: 7px; object-fit: cover; background: var(--surface-3); }
.assetchip .ph { display: inline-grid; place-items: center; font-size: 10px; color: var(--muted); }
.assetchip .an { font-size: 9.5px; line-height: 1.15; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.assetchip .am { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
.assetchip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.assetchip:hover { border-color: var(--accent); }

/* ---- locking tokens away ----------------------------------------------- */
.lockmake { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.lockmake summary { cursor: pointer; font-weight: 650; font-size: 13px; color: var(--ink-2); }
.lockmake summary:hover { color: var(--ink); }
.lockmake > p { margin: 8px 0 0; }
.lockgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 10px 0; }
.lockgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; min-width: 0; }
.lockgrid input, .lockgrid select { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 10px; color: var(--ink); font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; min-width: 0; }
.lockgrid input:focus, .lockgrid select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lockmake .btn { width: 100%; justify-content: center; }
.dropprice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: -2px; }
.dropprice b { font-size: 16px; font-variant-numeric: tabular-nums; }
.dropprice .sub { font-size: 11.5px; }
.funfigs.three { grid-template-columns: repeat(3, 1fr); }
.funfigs.three .v { font-size: 12px; }
.dropneeds { margin: -2px 0 0; }
.funcard footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.funcard footer .btn { flex: 1; justify-content: center; }
.funtrade { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.funtrade .btn { width: 100%; justify-content: center; }
.funtrade .pwtop { align-items: center; }
.funbar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.funbar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--good)); }
.funbarnote { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ink-2); margin-top: -4px; }

/* ---- wax.fun token page ------------------------------------------------ */
/* Two columns: the desk you trade at, and everything you would want to know
   before you do. One column on a phone, with the desk first. */
.funpage { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.funcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.funpage > .funcol:first-child { position: sticky; top: 64px; }
.fundesk { display: flex; flex-direction: column; gap: 9px; }
.fundesk .seg { width: 100%; }
.fundesk .seg button { flex: 1; }
.fundesk .btn { width: 100%; justify-content: center; }
.fundesk .pwtop { align-items: center; }
.fundesk .sub { margin: 0; }
.ftrows { display: flex; flex-direction: column; gap: 0; margin: 0; }
.ftrows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ftrows > div:last-child { border-bottom: 0; }
.ftrows dt { color: var(--muted); margin: 0; }
.ftrows dd { margin: 0; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.ftrows.wide dd { font-weight: 500; }
.memoline { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 10px; font-size: 11px; min-width: 0; }
.memoline code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace); color: var(--ink-2); }
/* The curve itself. Stretched to the card's width on purpose — the shape is
   the point, not the aspect ratio. */
.fcurve { width: 100%; height: 168px; display: block; overflow: visible; }
.fcline { fill: none; stroke: var(--accent); stroke-width: 2; }
.fcarea { fill: var(--accent-soft); stroke: none; }
.fcaxis { stroke: var(--line); stroke-width: 1; }
.fcmark { stroke-width: 1.5; stroke-dasharray: 3 3; }
.fcmark.now { stroke: var(--good); stroke-dasharray: none; }
.fcmark.koth { stroke: var(--muted); }
.fcmark.goal { stroke: var(--c4, var(--muted)); }
.fcmark.after { stroke: var(--warn, var(--c2)); }
.fclabel { font-size: 10px; fill: var(--muted); font-weight: 600; }
.fclabel.now { fill: var(--good); }
.fclabel.after { fill: var(--warn, var(--c2)); }
.fcfoot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.sharebar { display: inline-block; position: relative; padding: 1px 6px; border-radius: 5px;
  font-variant-numeric: tabular-nums; background: linear-gradient(90deg, var(--accent-soft) var(--w), transparent var(--w)); }
.fundesc.full { max-height: none; display: block; -webkit-line-clamp: none; line-clamp: none; }
.tokhead .funimg { width: 34px; height: 34px; }
@media (max-width: 860px) {
  .funpage { grid-template-columns: minmax(0, 1fr); }
  .funpage > .funcol:first-child { position: static; }
}
.funbarnote .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A toolbar is display:flex, which beats [hidden]; the Unlocking tab hides the
   token search it has nothing to search. */
.toolbar[hidden] { display: none; }

/* The mascot on an empty screen: small, above the sentence, never louder than it. */
.empty.withmascot { padding-top: 26px; }
.emptymascot { display: block; margin: 0 auto 12px; width: 96px; height: auto; opacity: .95; }