/* Silo pages — Analytics + Stake, following Slate's inner-page recipe
   (app/pages.css .anx idiom): a normally-flowing page on the plain ground,
   outline-only transparent panels (no filled cards), stat bands with
   internal hairline dividers, 28px/550 titles. Owned by js/silo-pages.js;
   keep other passes off .sp-*. */

/* the More dropdown opens to the right of its trigger now */
.clone-overlay.clone-more-menu { transform-origin: top left !important; }

/* the Discover pink background art stays on Discover only */
body:not([data-silo-view="discover"])[data-silo-view]::before { display: none !important; }

/* ---------- custom scrollbars, everywhere ---------- */
* {
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: rgba(23, 24, 26, 0.22) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(23, 24, 26, 0.18);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(23, 24, 26, 0.34);
  border-width: 2px;
  background-clip: padding-box;
}

/* ---------- page: normal flow on the plain ground ---------- */
.silo-page {
  /* the card fill every panel on these pages uses — Discover's table paper */
  --sp-card: #fcfcfb;
  --sp-line: rgba(0, 0, 0, 0.10);
  --sp-hairline: rgba(0, 0, 0, 0.055);
  --sp-ink: #17181a;
  --sp-muted: #6e737b;
  --sp-faint: #9aa1a9;
  --sp-accent: #e0447c;
  --sp-good: #12996a;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
}
.silo-page[hidden] { display: none !important; }

/* The arc backdrop, the same one Discover carries. It lives on body::before
   there, which sits behind #__next — so on these pages the content paints over
   it and it never shows. Analytics and Points draw their own copy instead,
   pinned to the viewport bottom underneath the page's own content. Portfolio
   and Stake stay on the plain ground. */
.silo-page[data-page="analytics"]::before,
.silo-page[data-page="points"]::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: clamp(240px, 34vh, 340px);
  z-index: 0;
  pointer-events: none;
  background: url("../assets/images/discover-pink-background.svg") center bottom / max(100%, 900px) auto no-repeat;
  opacity: 0.46;
  filter: saturate(0.92);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 100%);
}
/* the arc is a light-mode flourish, exactly as on Discover */
html[data-silo-theme="dark"] .silo-page::before { display: none; }
/* content rides above it */
.silo-page[data-page="analytics"] > *,
.silo-page[data-page="points"] > * { position: relative; z-index: 1; }

.sp-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 6px 2px 56px;
}

.sp-headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.sp-title {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 550;
  letter-spacing: -0.03em;
  color: var(--sp-ink);
}
.sp-sub {
  margin: 4px 0 0;
  max-width: 560px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-muted);
}

/* ---------- filled panels ---------- */
/* Fills, not outlines — the same paper as the stake card, the points tiles and
   Discover's own table sheet. A transparent box with a hairline around it read
   as an empty frame, especially over the arc backdrop. */
.sp-panel {
  border: 0;
  border-radius: 18px;
  background: var(--sp-card);
  overflow: hidden;
}
.sp-paneltop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 18px 18px;
}
.sp-label {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-muted);
}
.sp-big {
  margin: 4px 0 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 550;
  letter-spacing: -0.03em;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.sp-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sp-good);
}
.sp-tag {
  display: inline-flex;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sp-faint);
}
/* the Volume panel heads a stat band rather than the page, so its total sits
   a step below the hero scale */
.sp-paneltop-tight { padding-bottom: 14px; }
.sp-paneltop-tight .sp-big {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.02em;
}
.sp-paneltop-tight .sp-tag { font-size: 11px; }
.sp-note {
  margin: 0 0 6px;
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sp-muted);
  text-align: right;
}

/* stat band: bordered strip, cells split by hairlines (slate .anxStats) */
.sp-statband {
  display: grid;
  border-top: 1px solid var(--sp-hairline);
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-statband > .sp-stat { padding: 12px 18px 13px; }
.sp-statband > .sp-stat + .sp-stat { border-left: 1px solid var(--sp-hairline); }
.sp-cols-6 { grid-template-columns: repeat(6, 1fr); }
.sp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.sp-val {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}

/* chart block (slate .anxChartWrap) */
.sp-chartwrap { padding: 14px 18px 16px; }
.sp-chartwrap .sp-label { margin-bottom: 10px; }
.sp-chart {
  display: block;
  width: 100%;
  height: 216px;
}
.sp-xlabels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--sp-faint);
  font-variant-numeric: tabular-nums;
}

/* timeframe pills in the header row, same family as the markets toolbar */
.sp-pills {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: #ededec;
  border-radius: 999px;
}
.sp-pill {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #55606e;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sp-pill:hover { color: #17181a; }
.sp-pill[aria-pressed="true"] {
  background: #fff;
  color: var(--sp-accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

/* ---------- stake: panels side by side ---------- */
.sp-duo {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* form (inside its outline panel) */
.sp-formbody { padding: 4px 18px 20px; }
.sp-field { margin-top: 14px; }
.sp-select,
.sp-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  margin-top: 6px;
  border-radius: 12px;
  background: #efefed;
}
.sp-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0 40px 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sp-ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.2 8 10l4-3.8' fill='none' stroke='%237c8694' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.sp-input-wrap { padding: 0 8px 0 14px; gap: 8px; }
.sp-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 560;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
  outline: none;
}
.sp-input::placeholder { color: #b3bac2; }
.sp-max {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: #e2e2e0;
  color: #55606e;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sp-max:hover { background: #d8d8d5; color: var(--sp-ink); }
.sp-hint {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11px;
  color: var(--sp-faint);
  font-variant-numeric: tabular-nums;
}

.sp-lines { margin-top: 16px; border-top: 1px solid var(--sp-hairline); padding-top: 12px; }
.sp-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--sp-muted);
}
.sp-line strong {
  font-weight: 560;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.sp-line strong.sp-goodtxt { color: var(--sp-good); }

.sp-btn {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: #ff80ab;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.sp-btn:hover { background: #f06d9c; }
.sp-btn:active { transform: scale(0.985); }
.sp-btn-slim { width: auto; padding: 0 22px; height: 38px; margin: 12px auto 0; }

/* pool rows: full-bleed hairline rows inside the outline (markets idiom) */
.sp-pool-list { border-top: 1px solid var(--sp-hairline); }
.sp-pool-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--sp-hairline);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.sp-pool-row:last-child { border-bottom: 0; }
.sp-pool-row:hover { background: rgba(0, 0, 0, 0.025); }
.sp-pool-icons { display: flex; flex: none; }
.sp-pool-icons img:not(.sm-robinhood-badge),
.sp-pool-icons .sm-coin,
.sp-pool-icons .sm-market-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.sp-pool-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-pool-name strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-pool-name small {
  font-size: 11px;
  color: var(--sp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-apr {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e3f4ec;
  color: var(--sp-good);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-go {
  flex: none;
  width: 15px;
  height: 15px;
  color: #c9cfd6;
  transition: color 0.15s ease, transform 0.18s ease;
}
.sp-pool-row:hover .sp-go { color: var(--sp-muted); transform: translateX(2px); }

/* empty state */
.sp-empty { padding: 8px 18px 22px; text-align: center; }
.sp-empty strong {
  display: block;
  font-size: 13.5px;
  font-weight: 640;
  color: var(--sp-ink);
  margin-bottom: 4px;
}
.sp-empty p {
  margin: 0;
  font-size: 12px;
  color: var(--sp-muted);
}
.sp-quiet { margin: 10px 18px 16px; font-size: 12px; color: var(--sp-muted); }

/* ---------- analytics: hero grid + 24h rail + top pools ---------- */
.sp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: stretch;
}
.sp-rail { display: flex; flex-direction: column; }
.sp-rail-item { padding: 14px 18px 16px; }
.sp-rail-item + .sp-rail-item { border-top: 1px solid var(--sp-hairline); }
.sp-rail-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
}
.sp-val-lg {
  margin: 3px 0 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.sp-chart-mini { height: 62px; margin-top: 12px; }
.sp-splitbar {
  height: 6px;
  margin-top: 14px;
  border-radius: 999px;
  background: #e9e9e7;
  overflow: hidden;
}
.sp-splitbar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff80ab, #e0447c);
}
.sp-splitcap {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11px;
  color: var(--sp-muted);
}
.sp-rank {
  flex: none;
  width: 18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-faint);
  font-variant-numeric: tabular-nums;
}
.sp-pool-tvl {
  flex: none;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 960px) {
  .sp-hero { grid-template-columns: 1fr; }
}

/* the movers ticker belongs to Discover only */
body[data-silo-view]:not([data-silo-view="discover"]) .sc-block { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .sp-cols-6 { grid-template-columns: repeat(3, 1fr); }
  .sp-cols-6 > .sp-stat:nth-child(4) { border-left: 0; }
  .sp-cols-6 > .sp-stat:nth-child(n + 4) { border-top: 1px solid var(--sp-hairline); }
}
@media (max-width: 960px) {
  .sp-duo { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sp-cols-4 { grid-template-columns: 1fr 1fr; }
  .sp-cols-4 > .sp-stat:nth-child(3) { border-left: 0; }
  .sp-cols-4 > .sp-stat:nth-child(n + 3) { border-top: 1px solid var(--sp-hairline); }
  .sp-cols-6 { grid-template-columns: 1fr 1fr; }
  .sp-cols-6 > .sp-stat:nth-child(odd) { border-left: 0; }
  .sp-cols-6 > .sp-stat:nth-child(n + 3) { border-top: 1px solid var(--sp-hairline); }
  .sp-paneltop { flex-direction: column; align-items: stretch; }
  .sp-note { text-align: left; }
  .sp-big { font-size: 24px; line-height: 30px; }
}

/* ======================================================================
   PORTFOLIO
   Position rows carry their numbers in labelled cells rather than a table
   header, so the row still reads on its own once the grid collapses.
   ====================================================================== */

.silo-page { --sp-bad: #c0453f; }

.sp-good-txt { color: var(--sp-good); }
.sp-bad-txt { color: var(--sp-bad); }

/* ---------- position rows ---------- */
.sp-pos-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1.4fr) repeat(3, minmax(76px, 0.9fr)) auto auto 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--sp-hairline);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}
.sp-pos-row:last-child { border-bottom: 0; }
.sp-pos-row:hover { background: rgba(0, 0, 0, 0.025); }
.sp-pos-row:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: -2px;
}
.sp-pos-row:hover .sp-go { color: var(--sp-muted); transform: translateX(2px); }

.sp-pos-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-pos-cell em {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-faint);
}
.sp-pos-cell b {
  font-size: 13px;
  font-weight: 650;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}

.sp-range {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.sp-range.is-in { background: rgba(18, 153, 106, 0.12); color: var(--sp-good); }
.sp-range.is-out { background: rgba(192, 69, 63, 0.11); color: var(--sp-bad); }

/* ---------- claimable fees ---------- */
.sp-claim-list { border-top: 1px solid var(--sp-hairline); }
.sp-claim-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-claim-row:last-child { border-bottom: 0; }
.sp-claim-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-claim-amt {
  flex: none;
  font-size: 13px;
  font-weight: 650;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- activity ---------- */
.sp-act-list { border-top: 1px solid var(--sp-hairline); }
.sp-act-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--sp-hairline);
}
.sp-act-row:last-child { border-bottom: 0; }
.sp-act-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.045);
  color: var(--sp-muted);
}
.sp-act-icon svg { width: 14px; height: 14px; }
.sp-act-icon.is-add { background: rgba(18, 153, 106, 0.12); color: var(--sp-good); }
.sp-act-icon.is-out { background: rgba(192, 69, 63, 0.11); color: var(--sp-bad); }
.sp-act-icon.is-fee { background: rgba(224, 68, 124, 0.11); color: var(--sp-accent); }
.sp-act-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-act-body strong {
  font-size: 13px;
  font-weight: 620;
  color: var(--sp-ink);
}
.sp-act-body small {
  font-size: 11.5px;
  color: var(--sp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-act-amt {
  font-size: 13px;
  font-weight: 650;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.sp-act-when {
  min-width: 62px;
  font-size: 11.5px;
  color: var(--sp-faint);
  text-align: right;
  white-space: nowrap;
}

/* ---------- nothing to show ----------
   One centred statement filling the page rather than a set of panels holding
   em dashes. Both nothings — no wallet, and a wallet that has not deposited —
   use it; only the copy and the button differ. */
.sp-wrap.is-blank {
  box-sizing: border-box;
  min-height: 100%;
}
.sp-blank {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 40px 24px 56px;
  text-align: center;
}
.sp-blank-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.045);
  color: var(--sp-faint);
}
.sp-blank-mark svg { width: 22px; height: 22px; }
.sp-blank h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--sp-ink);
}
.sp-blank p {
  margin: 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--sp-muted);
}
.sp-blank .sp-btn-slim { margin-top: 18px; }

/* ---------- narrow: shed the numeric cells, keep the identity ---------- */
@media (max-width: 900px) {
  .sp-pos-row { grid-template-columns: auto minmax(0, 1fr) minmax(76px, auto) auto 16px; }
  .sp-pos-row .sp-pos-cell:nth-of-type(2),
  .sp-pos-row .sp-pos-cell:nth-of-type(3),
  .sp-pos-row .sp-range { display: none; }
}
@media (max-width: 560px) {
  .sp-pos-row { gap: 10px; padding: 12px 14px; }
  .sp-act-row { padding: 10px 14px; }
  .sp-act-when { display: none; }
  .sp-claim-row { padding: 10px 14px; }
}

/* ======================================================================
   POINTS
   ====================================================================== */

.sp-season {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(224, 68, 124, 0.1);
  color: var(--sp-accent);
  font-size: 12px;
  font-weight: 650;
}

.sp-lb { border-top: 1px solid var(--sp-hairline); }
.sp-lb-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--sp-hairline);
  font-size: 13px;
}
.sp-lb-row:last-child { border-bottom: 0; }
.sp-lb-row.is-mine { background: rgba(224, 68, 124, 0.06); }
.sp-lb-rank {
  font-weight: 650;
  color: var(--sp-faint);
  font-variant-numeric: tabular-nums;
}
.sp-lb-rank.is-top { color: var(--sp-accent); }
.sp-lb-wallet { font-weight: 600; color: var(--sp-muted); }
.sp-lb-wallet em {
  font-style: normal;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(224, 68, 124, 0.12);
  color: var(--sp-accent);
  font-weight: 650;
}
.sp-lb-pts {
  font-weight: 650;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- stake: swap-style card ---------- */
/* The stake card sits alone, so it holds the middle of the page — the wrap
   fills the view and centers its column, biased slightly above true center
   the way a swap card sits. */
.sp-wrap-narrow {
  max-width: 460px;
  box-sizing: border-box;
  min-height: 100%;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 96px;
}
.sp-headrow-center { justify-content: center; margin-bottom: 0; }
.sp-stakecard { background: #fcfcfb; padding: 16px 18px; }

/* ---- portfolio position rows ---- */
.spf-list { border-top: 1px solid var(--sp-hairline); }
.spf-row {
  display: grid;
  grid-template-columns: auto minmax(140px, 1.4fr) minmax(90px, auto) minmax(90px, auto) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sp-hairline);
}
.spf-row:last-child { border-bottom: 0; }
.spf-name { min-width: 0; display: grid; gap: 2px; }
.spf-name strong { font-size: 13.5px; font-weight: 650; }
.spf-name small {
  font-size: 11.5px;
  color: var(--sp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spf-cell { display: grid; gap: 1px; }
.spf-cell em {
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-faint);
}
.spf-cell b { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.spf-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(224, 68, 124, 0.09);
  color: var(--sp-accent);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.spf-acts { display: flex; gap: 6px; }
.spf-act {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--sp-hairline);
  border-radius: 999px;
  background: none;
  color: var(--sp-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 640;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.spf-act:hover:not(:disabled) { background: rgba(0, 0, 0, 0.045); color: var(--sp-ink); }
/* nothing to claim yet — say so by feel rather than by toast on a dead click */
.spf-act:disabled,
.sp-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .spf-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .spf-row .spf-cell:nth-of-type(2), .spf-chip { display: none; }
}


.sp-sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--sp-muted);
  font-variant-numeric: tabular-nums;
}
.sp-sc-bal { display: inline-flex; align-items: center; gap: 8px; }
/* the balance is a real holding once a wallet is connected and has one, so it
   reads as a value rather than as part of the label */
.sp-sc-bal b { font-weight: 500; color: var(--sp-muted); cursor: help; }
.sp-sc-bal b.sp-bal-live { font-weight: 600; color: var(--sp-ink); }
/* typing past the balance marks the field; the submit path explains it */
.sp-sc-amount.sp-over { color: #d24b4b; }
.sp-sc-input { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.sp-sc-amount {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 32px;
  font-weight: 550;
  letter-spacing: -0.03em;
  color: var(--sp-ink);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.sp-sc-amount::placeholder { color: #c9cfd6; }
.sp-token {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
  background: #efefed;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sp-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}
.sp-token:hover { background: #e6e6e3; }
.sp-token > svg { width: 12px; height: 12px; color: #7c848d; transition: transform 0.18s ease; }
.sp-token[aria-expanded="true"] > svg { transform: rotate(180deg); }
.sp-token-icons { display: flex; }
.sp-token-icons img:not(.sm-robinhood-badge),
.sp-token-icons .sm-coin,
.sp-token-icons .sm-market-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 9px;
}
.sp-token-icons .sm-coin + .sm-coin,
.sp-token-icons .sm-market-icon + .sm-coin,
.sp-token-icons img + img { margin-left: -6px; }
.sp-sc-under { margin-bottom: 2px; }
.sp-sc-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sp-hairline);
  font-size: 12px;
  color: var(--sp-muted);
}
.sp-sc-meta strong {
  margin-left: 4px;
  font-weight: 560;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}
.sp-sc-meta strong.sp-goodtxt { color: var(--sp-good); }
.sp-stakecard .sp-btn { margin-top: 14px; }
.sp-sc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 0 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.sp-sc-more:hover { color: var(--sp-ink); }
.sp-sc-more svg { width: 12px; height: 12px; transition: transform 0.18s ease; }
.sp-sc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.sp-pooldrop:not([hidden]) { animation: sp-drop 0.22s cubic-bezier(0.3, 1.1, 0.4, 1); }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- points ---------- */
.sp-earnlist { border-top: 1px solid var(--sp-hairline); }
.sp-earn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sp-hairline);
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-ink);
}
.sp-earn-row:last-child { border-bottom: 0; }
.sp-earn-row small { margin-left: auto; color: var(--sp-muted); font-size: 12px; font-weight: 500; }
.sp-earn-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff80ab; flex: none; }
.sp-lb-pts {
  flex: none;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--sp-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- navbar CA chip (search-bar family) ---------- */
.silo-ca-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex: none;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  margin-right: 8px;
  border: 0;
  border-radius: 12px;
  background: #ededec;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.silo-ca-chip:hover { background: #e2e2e0; }
.silo-ca-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: #7c848c; }
.silo-ca-addr {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  letter-spacing: 0.015em;
  font-variant-numeric: slashed-zero tabular-nums;
  font-variant-ligatures: none;
}
.silo-ca-copy { width: 13px; height: 13px; color: #9aa1a9; }
.silo-ca-chip.is-copied { background: #e3f4ec; }
.silo-ca-chip.is-copied .silo-ca-addr,
.silo-ca-chip.is-copied .silo-ca-copy { color: #12996a; }
@media (max-width: 1180px) { .silo-ca-chip { display: none; } }

/* ---------- pool picker modal ---------- */
.silo-pool-picker {
  width: min(430px, calc(100vw - 32px)) !important;
  padding: 14px 0 8px !important;
}
.silo-pool-picker .clone-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 18px 10px;
  font-size: 15px;
  font-weight: 700;
}
.spp-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  margin: 0 14px 10px;
  padding: 0 12px;
  border-radius: 12px;
  background: #efefed;
}
.spp-search svg { width: 14px; height: 14px; color: #9aa1a9; flex: none; }
.spp-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: inherit;
  outline: none;
}
.spp-search input::placeholder { color: #b3bac2; }
.spp-list {
  max-height: 54vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 6px;
}
.spp-row {
  border-bottom: 0;
  border-radius: 12px;
  padding: 10px 12px;
}
.spp-row:hover { background: #f5f5f3; }
.spp-row.is-active { background: rgba(255, 128, 171, 0.12); }
.spp-row.is-active:hover { background: rgba(255, 128, 171, 0.18); }

/* ---------- the APY overview dialog ----------
   Not the picker: no search, every pool ranked by rate, a meter per row
   scaled against the best rate on the board. */
.silo-apy-modal {
  /* the overlay hangs off <body>, outside .silo-page — the sp tokens it
     leans on have to ride along */
  --sp-hairline: rgba(0, 0, 0, 0.055);
  --sp-accent: #e0447c;
  --sp-good: #12996a;
  --sp-faint: #9aa1a9;
  --sp-muted: #6e737b;
  width: min(470px, calc(100vw - 32px)) !important;
  padding: 14px 0 8px !important;
}
.silo-apy-modal .clone-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 18px 10px;
  font-size: 15px;
  font-weight: 700;
}
.spa-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2px 18px 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sp-hairline);
}
.spa-stats > div { text-align: center; }
.spa-stats span {
  display: block;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sp-faint);
}
.spa-stats b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.spa-stats > div:first-child b { color: var(--sp-accent); }
.spa-list {
  max-height: min(50vh, 430px);
  overflow-y: auto;
  padding: 0 6px 6px;
}
.spa-row {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  corner-shape: squircle;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s ease;
}
.spa-row:hover { background: #f5f5f3; }
.spa-rank {
  font-size: 12px;
  font-weight: 650;
  color: var(--sp-faint);
  font-variant-numeric: tabular-nums;
}
.spa-rank.is-top { color: var(--sp-accent); }
.spa-name { min-width: 0; display: grid; gap: 1px; }
.spa-name strong {
  font-size: 13px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spa-name small { font-size: 11px; color: var(--sp-muted); }
.spa-apr {
  font-size: 13px;
  font-weight: 680;
  color: var(--sp-good);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* the promo card floats above the page but must stay UNDER the overlay
   stack: backdrops/search sit at 10000, modals 10001, tooltips 10002 —
   silo-promo.css pins it at 10100, which put it over the modal blur and
   over its own dismiss tooltip */
.silo-promo { z-index: 9500 !important; }

/* no chart watermark in the card background */
.silo-promo .silo-promo-art { display: none !important; }

/* silo-promo.css's `> :not(.silo-promo-art) { position: relative }` rule
   out-specifies the close button's `position: absolute` and drops the ×
   into the layout flow — pin it back to the corner */
.silo-promo .silo-promo-close {
  position: absolute !important;
  top: 12px;
  right: 12px;
}


/* ---------- tooltips top everything ----------
   Codex's overlay ladder: wallet modal 10050/10051, market modals
   10200/10400, toasts 10500. Tooltips (and the rest of the interaction
   layer they live in) go above the whole ladder so nothing ever clips
   a hover hint again. */
#clone-layer { z-index: 10600 !important; }
.clone-tooltip { z-index: 10602 !important; }
.hero-tooltip,
.sc-tip,
.pts-tip { z-index: 10600 !important; }

/* referral modal: connected link row */
.silo-referral-linkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 4px;
  padding: 6px 6px 6px 12px;
  border-radius: 12px;
  background: #f1f1ef;
}
.silo-referral-linkrow code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #374151;
}
.silo-referral-copy {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #ff80ab;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.silo-referral-copy:hover { background: #f06d9c; }

/* ---------- analytics chart hover tip ----------
   Owned by bindChartHover() in js/silo-pages.js; visually the hero-tooltip
   recipe (white surface, layered shadow) pinned above the chart cursor. */
.sp-chartwrap { position: relative; }
.sp-charttip {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 6;
  padding: 4px 10px;
  border-radius: 10px;
  background: #ffffff;
  color: #17181a;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 14px rgba(18, 18, 16, 0.1),
    0 12px 34px -8px rgba(18, 18, 16, 0.16);
  pointer-events: none;
}

/* ======================================================================
   MOBILE
   Two breakpoints, applied on top of everything above: 768px covers phones
   and small tablets, 520px the narrow phones. Every rule here is scoped to a
   max-width, so the desktop layout is untouched by all of it.
   ====================================================================== */

@media (max-width: 768px) {
  /* The wrap carried 2px of side padding. On desktop that is invisible — the
     page is centred at 1140 inside a much wider shell — but on a phone it put
     the cards 2px from the edge of the glass. */
  .sp-wrap {
    gap: 12px;
    padding: 4px 14px 40px;
  }
  .sp-title { font-size: 24px; line-height: 30px; }
  .sp-sub { font-size: 13px; }
  .sp-headrow { gap: 10px; margin-bottom: 4px; }

  /* a panel's inner padding comes down with the gutter so the content does
     not end up in a narrow column between two thick margins */
  .sp-paneltop { padding: 14px 14px 15px; }
  .sp-stat { padding: 12px 14px; }
  .sp-big { font-size: 23px; line-height: 29px; }

  /* thumbs, not cursors: anything tappable clears 40px */
  .sp-btn { height: 46px; }
  .spf-act,
  .sp-act,
  .sp-chip-btn {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 768px) {
  /* The stake card is centred in the viewport on desktop, the way a swap card
     sits. On a phone that pushes it most of a screen down before anything is
     visible, so it rides near the top instead. */
  .sp-wrap-narrow {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 40px;
  }
  .sp-headrow-center { margin-bottom: 10px; }
}

@media (max-width: 520px) {
  .sp-wrap { padding-left: 12px; padding-right: 12px; }
  .sp-title { font-size: 22px; line-height: 28px; }
  .sp-paneltop { padding: 13px 13px 14px; }
  .sp-stat { padding: 11px 13px; }
  .sp-big { font-size: 21px; line-height: 27px; }

  /* four vitals in a 2x2 already; keep the labels from wrapping mid-word */
  .sp-label { font-size: 11px; }
  .sp-val { font-size: 15px; }
}