/* v2 tokens the app does not define (were falling back to dark values in light mode) */
:root{--canvas:#171717;--hover:#2a2a2a;--line-strong:#363636;--faint:#6b6b6b}
:root[data-theme=light]{--canvas:#f7f7f7;--hover:#ececeb;--line-strong:#d6d6d6;--faint:#8a8a8a}
/* Stoa v2 — layout + look over the existing Stoa screens. Values are the approved mockup shell
/* first load: the page area stays hidden while the app draws its loading skeletons, then fades in (stoa-v2.js bootReady) */
main#app{transition:opacity .25s cubic-bezier(.4,0,.2,1)}
/* ---------- Stoa loader: the mark fills left to right like a progress bar, then fades and starts again ----------
   One look everywhere something loads: the boot screen (body::after while style#v2-boot exists) and every app spinner
   (.stoa-loading-mark — loading.min.js turns each .spinner/.ksd-spin into one; its poster/video are hidden). The mark is a
   mask; the fill is a two-tone background (ink | 18% ink) whose split slides 0 -> 100% across the bars. */
:root{--v2-load-ink:var(--ink,#eee)}
.v2-loader,html:has(style#v2-boot) body::after,:root body .stoa-loading-mark{
  background:linear-gradient(90deg,var(--v2-load-ink) 0 50%,color-mix(in srgb,var(--v2-load-ink) 18%,transparent) 50% 100%) 100% 0/200% 100% no-repeat;
  -webkit-mask:url(/assets/stoa-mark.svg) center/contain no-repeat;mask:url(/assets/stoa-mark.svg) center/contain no-repeat;
  animation:v2fill 1.5s cubic-bezier(.4,0,.2,1) infinite}
@keyframes v2fill{0%{background-position:100% 0;opacity:1}72%{background-position:0 0;opacity:1}88%{background-position:0 0;opacity:1}100%{background-position:0 0;opacity:0}}
#market-loading .sk-page,#market-loading>*{visibility:hidden!important}
html:has(style#v2-boot) body::after{content:"";position:fixed;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;pointer-events:none;z-index:1}
:root body .stoa-loading-mark>img,:root body .stoa-loading-mark>video{display:none!important}
:root body .stoa-loading-mark{border:0!important;border-radius:0!important;box-shadow:none!important}
@media (prefers-reduced-motion:reduce){.v2-loader,html:has(style#v2-boot) body::after,:root body .stoa-loading-mark{animation:none;background-position:50% 0}}
/* sparkline status ("Loading chart" / "Chart unavailable") spills under the price tiles while charts load: keep it for screen readers only */
.dx-mini-price .dx-mini-state{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
   (mockups/v2/shell.css, measured from Stoa/prjx/Uniswap/Robinhood). Black & white; green/red only for price
   direction and status. Route-specific rules hang off body[data-v2] which stoa-v2.js keeps in sync with the URL.
   Selectors are prefixed with :root body so they beat the lazily-loaded page stylesheets. */

:root{
  --v2-press:cubic-bezier(.17,.67,.45,1);--v2-std:cubic-bezier(.4,0,.2,1);
  --rail-w:0px;--header-offset:84px;--header-row-height:44px;
}

/* ---------- gone: testnet banner + badge, left rail, header search/faucet/notice ---------- */
:root body .testnet-banner,:root body .network-badge,:root body .side-rail,:root body .rail-scrim,
:root body #header-search,:root body .header-faucet,:root body #notice-button,
:root body #rewards-pill,:root body .header-brand-group{display:none!important}
:root body{padding-left:0!important}

/* ---------- prjx top bar ---------- */
:root body header.topbar{position:fixed;inset:0 0 auto 0;left:0!important;width:auto;z-index:40;height:84px;padding:20px;background:linear-gradient(var(--canvas,#171717) 60%,transparent);border:0;box-shadow:none}
:root body header.topbar .header-primary-row{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0;margin:0;gap:12px;max-width:none}
/* approved bar: Connect + menu only (profile is in the menu and the Portfolio tab) */
:root body #account-button{display:none!important}
.v2-nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:18px;background:var(--surface,#222);border:1px solid var(--line-strong,#363636)}
.v2-nav .v2-logo{display:grid;place-items:center;width:40px;height:40px}
.v2-nav .v2-logo img{width:22px;height:22px}
:root[data-theme=dark] .v2-nav .v2-logo img,:root:not([data-theme]) .v2-nav .v2-logo img{filter:invert(1)}
.v2-nav a:not(.v2-logo){padding:8px 10px;border-radius:14px;color:var(--muted,#ababab);font-size:16px;font-weight:500;text-decoration:none;transition:background .2s var(--v2-std),color .2s var(--v2-std)}
.v2-nav a:not(.v2-logo):hover{background:var(--hover,#2a2a2a);color:var(--ink,#eee)}
.v2-nav a.on{color:var(--ink,#eee)!important;font-weight:600}
:root body .account-area{gap:8px;margin-left:auto}
:root body #connect-wallet-button{height:44px;padding:0 20px;border-radius:999px;font-size:16px;font-weight:600}
:root body #connect-wallet-button .connect-wallet-word{display:inline}
/* highlight pills beside Connect wallet: foil gradients with a slow sheen; the gold crystal leans out of the Rewards pill */
.v2-hl{display:flex;gap:8px;align-items:center}
.v2-hl a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:#151209;overflow:visible;isolation:isolate;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.v2-hl a::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background-size:220% 100%;animation:v2-foil 6s linear infinite}
.v2-hl a:hover{transform:translateY(-1px) scale(1.03)}
.v2-hl a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v2-hl a.on{box-shadow:0 0 0 2px var(--canvas,#171717),0 0 0 3.5px currentColor}
.v2-hl-rw{padding-right:52px!important}
.v2-hl-rw::before{background-image:linear-gradient(100deg,#b8862e 0%,#f6d77e 18%,#fff3c4 30%,#d9a441 46%,#f3cf6c 62%,#fff1bd 76%,#b8862e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(90,60,10,.35)}
.v2-hl-rw img{position:absolute;right:4px;bottom:-4px;height:54px;transform:rotate(14deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));pointer-events:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.v2-hl-rw:hover img{transform:rotate(4deg) translateY(-3px)}
.v2-hl-fd{gap:8px;color:#16181b!important}
.v2-hl-fd::before{background-image:linear-gradient(100deg,#9aa0a6 0%,#e9edf1 18%,#ffffff 30%,#b9bfc6 46%,#e3e7eb 62%,#ffffff 76%,#9aa0a6 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(40,44,50,.3)}
.v2-hl-fd .v2-dot{background:#16181b;margin-left:0}
@keyframes v2-foil{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.v2-hl a::before{animation:none}}
@media (max-width:640px){.v2-hl{display:none}}
.v2-menu-btn{width:44px;height:44px;border-radius:14px;background:var(--surface,#222);border:1px solid var(--line-strong,#363636);display:grid;place-items:center;color:var(--ink,#eee);cursor:pointer}
.v2-menu{position:fixed;top:74px;right:20px;z-index:60;width:240px;padding:8px;border-radius:16px;background:var(--surface,#222);border:1px solid var(--line-strong,#363636);box-shadow:0 18px 40px -20px rgba(0,0,0,.7);display:none}
.v2-menu.open{display:block;animation:v2up .15s var(--v2-press)}
.v2-menu a{display:block;padding:10px 12px;border-radius:10px;font-weight:500;font-size:15px;color:var(--ink,#eee);text-decoration:none}
.v2-menu a:hover{background:var(--hover,#2a2a2a)}
.v2-menu a.s{color:var(--muted,#ababab)}
@keyframes v2up{from{transform:translateY(12px);opacity:0}}

/* ---------- footer: Stoa status bar, full width, ticker in the middle, legal links above ---------- */
:root body .market-statusbar{left:0!important;height:44px;gap:24px;padding:0 28px;z-index:30}
:root body .market-network a{font-size:13px}
.v2-tick{flex:1;min-width:0;overflow:hidden;font-size:13px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.v2-tick .rail{display:flex;white-space:nowrap;width:max-content;animation:v2marq 60s linear infinite;font-variant-numeric:tabular-nums}
/* spacing as a margin on every item (not flex gap) so -50% lands exactly on the start of the second half — no jump */
.v2-tick .rail>span{margin-right:32px}
.v2-tick:hover .rail{animation-play-state:paused}
.v2-tick b{font-weight:600;color:var(--ink,#eee)}.v2-tick .g{color:var(--muted,#ababab)}
.v2-tick .u{color:var(--positive,#3ecf6b)}.v2-tick .d{color:var(--negative,#ff5c33)}
@keyframes v2marq{to{transform:translateX(-50%)}}
.v2-legal{display:flex;gap:16px;font-size:12px;position:relative;z-index:1}
#world-footer .world-footer-content{flex-wrap:wrap}
/* footer edges on the header's gutter (header.topbar: 20px, 16px under 900px), not the app's --gutter (28/24px) */
#world-footer .world-footer-content{padding-inline:20px}
#world-footer .v2-legal{flex-basis:100%;justify-content:flex-end;margin-top:-14px}
.v2-legal a{color:var(--faint,#6b6b6b);text-decoration:none}.v2-legal a:hover{color:var(--ink,#eee)}
:root body main#app{padding-top:88px;padding-bottom:64px}

/* ---------- swap page: one centred column (approved swap.html) ---------- */
body[data-v2=swap] .dxa-root{display:flex!important;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 84px - 96px)}
body[data-v2=swap] .dxa-root>.dxa-pane:not(:has(.dx-swap)){display:none!important}
body[data-v2=swap] .dxa-root>.dxa-drop{display:none}
body[data-v2=swap] .dxa-pane:has(.dx-swap){position:static!important;transform:none!important;width:480px!important;max-width:100%;left:auto!important;top:auto!important;height:auto!important}
/* the arranger sizes panes inline and positions panels absolutely; on this page the card sizes to its content */
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-surface{overflow:visible;flex:none;height:auto}
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-body{flex:none;height:auto!important}
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-panel{position:static!important;height:auto!important;overflow:visible}
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-head{height:48px}
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-title{font-size:15px;font-weight:600}
body[data-v2=swap] .dxa-pane:has(.dx-swap) .dxa-mark{display:none}
body[data-v2=swap] .dx-field-top label{font-size:12px;letter-spacing:.6px}
body[data-v2=swap] .dx-amount{font-size:36px!important;line-height:46px!important}
body[data-v2=swap] .dx-token-button{font-size:16px;height:44px}
body[data-v2=swap] .dx-field-foot{font-size:13px}
body[data-v2=swap] .dx-swap-quote-row,body[data-v2=swap] .dx-swap-utilities{font-size:14px}
body[data-v2=swap] .dx-cta{height:54px!important;font-size:16px!important}
/* quote rows stay hidden until there's an amount (prjx/Uniswap) */
body[data-v2=swap] .dx-swap-quote.is-idle .dx-quote-body,body[data-v2=swap] .dx-swap-quote.is-idle .dx-swap-utilities{display:none}
body[data-v2=swap] .dx-swap-quote.is-idle{min-height:0;height:auto}
/* 104px price tiles */
body[data-v2=swap] .dxa-foot{width:480px!important;max-width:100%;height:auto!important}
body[data-v2=swap] .dx-mini-price{height:auto!important;min-height:104px;padding:14px 15px 10px}
body[data-v2=swap] .dx-mini-price strong{flex:none;height:auto;overflow:visible}
/* approved tile: text left, sparkline to the right (104px tall instead of 142) */
body[data-v2=swap] .dx-mini-price{position:relative;height:104px!important;min-height:0}
/* live prices carry 7 digits ("$0.0206896"), wider than the mockup's: the line sits level with the short change row, below the price */
body[data-v2=swap] .dx-mini-price .dx-spark{position:absolute;right:14px;bottom:13px;width:44%!important;height:20px!important;margin:0}
@media (max-width:900px){
  body[data-v2=swap] .dx-mini-price{height:118px!important}
  body[data-v2=swap] .dx-mini-price .dx-spark{left:0;right:0;width:100%!important;bottom:6px;height:22px!important}
}
body[data-v2=swap] .dx-mini-name{font-size:14px}
body[data-v2=swap] .dx-mini-price strong{font-size:22px;line-height:30px}
body[data-v2=swap] .dx-mini-change{font-size:13px}
/* recent swaps: one expandable row */
.v2-recent{width:480px;max-width:100%;margin-top:14px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);border-radius:16px;overflow:hidden}
.v2-recent .rbtn{width:100%;display:flex;align-items:center;gap:10px;height:54px;padding:0 16px;font-weight:600;font-size:15px;color:var(--ink,#eee);background:none;border:0;cursor:pointer}
.v2-recent .rbtn .meta{margin-left:auto;color:var(--faint,#6b6b6b);font-weight:400;font-size:13px}
.v2-recent .rbtn svg{color:var(--muted,#ababab);transition:transform .25s var(--v2-std)}
.v2-recent.open .rbtn svg{transform:rotate(180deg)}
.v2-recent .rlist{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--v2-std)}
.v2-recent.open .rlist{grid-template-rows:1fr}
.v2-recent .rlist>div{overflow:hidden}
.v2-recent .ri{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line,#2e2e2e);font-size:14px;line-height:20px;color:var(--muted,#ababab);font-variant-numeric:tabular-nums}
.v2-recent .ri b{color:var(--ink,#eee);font-weight:600}
.v2-recent .ri .t{color:var(--faint,#6b6b6b);font-size:13px}
.v2-recent .none{padding:14px 16px;border-top:1px solid var(--line,#2e2e2e);font-size:14px;color:var(--muted,#ababab)}

/* ---------- mobile: Stoa mobile chrome ---------- */
@media (max-width:900px){
  :root body header.topbar{height:58px;padding:10px 16px;background:var(--canvas,#171717);display:block}
  :root body header.topbar .header-primary-row{height:38px!important;min-height:0}
  :root body #search-toggle,:root body #account-button{display:none!important}
  :root body main#app{padding-top:66px}
  .v2-nav a:not(.v2-logo){display:none}
  .v2-nav{background:none;border:0;padding:0}
  .v2-nav .v2-logo{width:auto;gap:8px;display:flex;font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--ink,#eee);text-decoration:none}
  .v2-nav .v2-logo::after{content:"stoa"}
  .v2-menu-btn{display:none}
  :root body #connect-wallet-button{height:38px;padding:0 16px;font-size:14px}
  :root body .market-statusbar{position:fixed!important;bottom:calc(68px + env(safe-area-inset-bottom))!important;height:30px;padding:0;gap:0;font-size:12px}
  :root body .market-statusbar .market-network,:root body .market-statusbar .market-utilities{display:none!important}
  #world-footer .v2-legal{justify-content:flex-start;margin-top:4px}
  #world-footer .world-footer-content{padding-inline:16px}
  :root body nav.mobile-nav{padding-bottom:env(safe-area-inset-bottom)}
  :root body main#app{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  body[data-v2=swap] .dxa-root{min-height:0;justify-content:flex-start}
  body[data-v2=swap] .dx-amount{font-size:32px!important}
  .v2-menu{left:12px;right:12px;top:auto;bottom:calc(110px + env(safe-area-inset-bottom));width:auto}
}

/* ---- Liquidity (/swap/pools) — approved mockups/v2/liquidity.html: prjx stat tiles, search + All pools/My positions,
   every pool a rounded row. Restyles the app's own table; sorting, search, links and values stay the app's. ---- */
body[data-v2=pools] .dx-lp.is-pools{max-width:1040px!important;margin:-24px auto 0!important;padding:0 24px 40px!important}
body[data-v2=pools] .directory-overview{margin:0!important;padding:0!important}
body[data-v2=pools] .dx-lp .page-head{display:none}
body[data-v2=pools] .stats-strip{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px;max-width:none!important;width:100%;margin:0!important;border:0;padding:0}
body[data-v2=pools] .stats-item{position:relative;height:150px;margin:0;padding:18px 20px 0!important;border:1px solid var(--line,#2e2e2e)!important;border-radius:20px;background:var(--surface,#222);overflow:hidden}
body[data-v2=pools] .stats-item::before,body[data-v2=pools] .stats-item::after{display:none!important}
body[data-v2=pools] .stats-item dt{font-size:14px;color:var(--muted,#ababab);text-transform:none;letter-spacing:0}
body[data-v2=pools] .stats-item dd,body[data-v2=pools] .stats-item .stat-value{margin:4px 0 0;font-size:30px!important;line-height:38px;font-weight:600;letter-spacing:-.5px}
body[data-v2=pools] .stats-item dd small{font-size:15px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=pools] .v2-bars{position:absolute;left:0;right:0;bottom:0;width:100%;height:48px;color:var(--ink,#eee)}
body[data-v2=pools] .grid-controls{display:flex;gap:8px;align-items:center;margin:24px 0 8px;padding:0;border:0}
body[data-v2=pools] .grid-controls .search{flex:1;min-width:0}
body[data-v2=pools] .grid-controls .search{width:100%;max-width:none;height:48px;border-radius:15px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);padding:0 16px}
body[data-v2=pools] .grid-controls .search input{font-size:16px}
body[data-v2=pools] .v2-seg{display:flex;gap:2px;padding:4px;border-radius:15px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e)}
body[data-v2=pools] .v2-seg a{height:38px;display:grid;place-items:center;padding:0 14px;border-radius:11px;font-size:15px;font-weight:600;color:var(--muted,#ababab);text-decoration:none;transition:background .15s var(--v2-std),color .15s var(--v2-std)}
body[data-v2=pools] .v2-seg a.on,body[data-v2=pools] .v2-seg a:hover{background:var(--hover,#2a2a2a);color:var(--ink,#eee)}
/* table → rows of cards */
body[data-v2=pools] .dx-pools-table{border-collapse:separate!important;border-spacing:0 8px;width:100%;margin-top:-8px}
body[data-v2=pools] .dx-pools-table .dx-col-lg{display:none}
body[data-v2=pools] .dx-pools-table thead th{padding:12px 20px 0;border:0!important;background:none!important;font-size:14px;font-weight:500;color:var(--muted,#ababab);text-transform:none;letter-spacing:0}
body[data-v2=pools] .dx-pools-table thead th small{display:none}
body[data-v2=pools] .dx-pools-table tbody tr{cursor:pointer}
body[data-v2=pools] .dx-pools-table tbody td{height:72px;padding:0 20px;font-size:16px;background:var(--surface,#222);border-top:1px solid var(--line,#2e2e2e)!important;border-bottom:1px solid var(--line,#2e2e2e)!important;transition:background .15s var(--v2-std),border-color .15s var(--v2-std)}
body[data-v2=pools] .dx-pools-table tbody td:first-child{border-left:1px solid var(--line,#2e2e2e)!important;border-radius:15px 0 0 15px}
body[data-v2=pools] .dx-pools-table tbody td:nth-last-child(2){border-right:1px solid var(--line,#2e2e2e)!important;border-radius:0 15px 15px 0}
body[data-v2=pools] .dx-pools-table tbody tr:hover td{background:var(--hover,#2a2a2a);border-color:var(--line-strong,#363636)!important}
body[data-v2=pools] .dx-pools-table .dx-cell-token a{font-size:16px;font-weight:600}
body[data-v2=pools] .dx-pools-table .dx-apr{color:var(--ink,#eee)!important;font-weight:600}
@media (max-width:900px){
  body[data-v2=pools] .dx-lp.is-pools{margin-top:-8px!important;padding:0 12px 24px!important}
  body[data-v2=pools] .stats-strip{grid-template-columns:1fr 1fr!important;gap:8px}
  body[data-v2=pools] .stats-item{height:112px;padding:12px 14px 0!important;border-radius:16px}
  body[data-v2=pools] .stats-item:first-child{grid-column:1/-1}
  body[data-v2=pools] .stats-item dd,body[data-v2=pools] .stats-item .stat-value{font-size:22px!important;line-height:30px}
  body[data-v2=pools] .grid-controls{flex-wrap:wrap!important;flex-direction:row!important}
  body[data-v2=pools] .grid-controls .search{flex-basis:100%;order:-1}
  body[data-v2=pools] .v2-seg{flex:1}body[data-v2=pools] .v2-seg a{flex:1}
  body[data-v2=pools] .dx-pools-table tbody td{height:66px;padding:0 14px}
  body[data-v2=pools] .dx-pools-table thead th{padding:10px 14px 0}
  /* phones show only pool + liquidity; the liquidity cell closes the card */
  body[data-v2=pools] .dx-pools-table tbody td:nth-child(2){border-right:1px solid var(--line,#2e2e2e)!important;border-radius:0 15px 15px 0}
  body[data-v2=pools] .stats-item{height:auto;min-height:96px;padding-bottom:12px!important}
}

/* ---- Pool (/swap/pools/0x…) — approved mockups/v2/pool.html: prjx /deposit. Header card (back, pair, chips, Advanced),
   range chart + Min/Max/APR tiles left, deposit card right. Black and white; the app's range, inputs and CTA untouched.
   Advanced (body.v2-adv): Meteora-style stats column on the left, price chart in the middle. ---- */
body[data-v2=pool] .dx-lp.is-pool{max-width:1032px!important;margin:-24px auto 0!important;padding:0 0 40px!important}
body[data-v2=pool].v2-adv .dx-lp.is-pool{max-width:1352px!important}
body[data-v2=pool] .dx-lp .dx-section-actions,body[data-v2=pool] .lp-editor-back{display:none!important}
body[data-v2=pool] .lp-head{min-height:82px;margin:0 0 16px;padding:16px 16px 16px 16px;border-radius:20px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);gap:12px}
body[data-v2=pool] .v2-back{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--hover,#2a2a2a);color:var(--ink,#eee)}
body[data-v2=pool] .lp-head .dx-pool-title{gap:12px}
body[data-v2=pool] .lp-head h1{font-size:18px!important;font-weight:600}
body[data-v2=pool] .lp-head .lp-fee{padding:2px 8px;border-radius:6px;background:var(--hover,#2a2a2a);color:var(--ink,#eee);font-size:12px;font-weight:600}
body[data-v2=pool] .lp-figures>div{height:38px;padding:0 14px;border-radius:12px;background:var(--canvas,#171717);border:1px solid var(--line,#2e2e2e);display:flex;align-items:center;gap:8px}
body[data-v2=pool] .lp-figures dt{font-size:14px;color:var(--muted,#ababab)}
body[data-v2=pool] .lp-figures dd{font-size:14px;font-weight:600;color:var(--ink,#eee)}
body[data-v2=pool] .dx-apr{color:var(--ink,#eee)!important}
body[data-v2=pool] .v2-adv-btn{height:38px;flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;background:var(--canvas,#171717);border:1px solid var(--line,#2e2e2e);color:var(--muted,#ababab);font-size:14px;font-weight:600;cursor:pointer}
body[data-v2=pool] .v2-adv-btn i{width:30px;height:18px;border-radius:9px;background:var(--line-strong,#363636);position:relative;transition:background .2s var(--v2-std)}
body[data-v2=pool] .v2-adv-btn i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink,#eee);transition:transform .25s var(--v2-press)}
body[data-v2=pool].v2-adv .v2-adv-btn{color:var(--ink,#eee)}
body[data-v2=pool].v2-adv .v2-adv-btn i{background:var(--muted,#ababab)}
body[data-v2=pool].v2-adv .v2-adv-btn i::after{transform:translateX(12px);background:var(--canvas,#171717)}
/* cards */
body[data-v2=pool] .dx-pool-layout{gap:16px}
body[data-v2=pool] .lp-range,body[data-v2=pool] .lp-deposit{border-radius:20px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e)}
body[data-v2=pool] .lp-range h2,body[data-v2=pool] .lp-deposit h2{font-size:17px;font-weight:600}
/* chart: white on the card */
body[data-v2=pool] .lp-depth,body[data-v2=pool] .lp-depth svg,body[data-v2=pool] .lp-depth-in{color:var(--ink,#eee)!important}
body[data-v2=pool] .lp-depth-in{fill-opacity:.9}
body[data-v2=pool] .lp-depth-out{fill:var(--line-strong,#363636)!important;opacity:.8}
body[data-v2=pool] .lp-depth-edge{stroke:var(--ink,#eee)!important}
body[data-v2=pool] .lp-depth-now{border-color:var(--muted,#ababab)!important}
body[data-v2=pool] .lp-bounds .dx-pool-bound{border-radius:16px;background:var(--canvas,#171717);border:1px solid var(--line,#2e2e2e)}
body[data-v2=pool] .lp-bound-value input{font-size:22px!important;font-weight:600}
/* deposit: token on the left, amount on the right (prjx) */
body[data-v2=pool] .lp-deposit .dx-field{border-radius:16px}
body[data-v2=pool] .lp-deposit .dx-field-top{visibility:hidden}
body[data-v2=pool] .lp-deposit .dx-field{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:none!important;align-items:center}
body[data-v2=pool] .lp-deposit .dx-field-top{grid-column:1/-1;grid-row:1}
body[data-v2=pool] .lp-deposit .dx-token-tag{grid-column:1;grid-row:2;align-self:center}
body[data-v2=pool] .lp-deposit .dx-amount-value{grid-column:2;grid-row:2;min-width:0}
body[data-v2=pool] .lp-deposit .dx-field-foot{grid-column:1/-1;grid-row:3}
body[data-v2=pool] .lp-deposit .dx-token-tag{background:none!important;border:0!important;padding:0!important;font-size:20px;gap:10px}
body[data-v2=pool] .lp-deposit .dx-token-tag strong{font-size:20px;font-weight:600}
body[data-v2=pool] .lp-deposit .dx-amount-value{text-align:right}
body[data-v2=pool] .lp-deposit input.dx-amount{text-align:right}
body[data-v2=pool] .lp-deposit .dx-field-foot{justify-content:flex-end;text-align:right}
body[data-v2=pool] .lp-split-bar span:first-child{background:var(--ink,#eee)!important}
body[data-v2=pool] .lp-split-bar span:last-child{background:var(--line-strong,#363636)!important}
body[data-v2=pool] .lp-split b{color:var(--ink,#eee)}
/* Advanced */
body[data-v2=pool] .v2-adv-panel{display:none}
body[data-v2=pool].v2-adv .dx-pool-layout{display:grid!important;grid-template-columns:280px minmax(0,1fr) 380px}
body[data-v2=pool].v2-adv .dx-pool-main{grid-column:2;grid-row:1}
body[data-v2=pool].v2-adv .dx-pool-side{grid-column:3;grid-row:1}
body[data-v2=pool].v2-adv .v2-adv-panel{display:block;grid-column:1;grid-row:1;padding:18px 16px;border-radius:20px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);font-size:14px}
body[data-v2=pool] .v2-adv-panel h3{margin:18px 0 8px;font-size:14px;font-weight:600;color:var(--muted,#ababab)}
body[data-v2=pool] .v2-adv-panel h3:first-child{margin-top:0}
body[data-v2=pool] .v2-adv-panel .big{font-size:22px;font-weight:600}
body[data-v2=pool] .v2-adv-panel .big small{font-size:13px;font-weight:400;color:var(--muted,#ababab)}
body[data-v2=pool] .v2-adv-panel .kv{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line,#2e2e2e)}
body[data-v2=pool] .v2-adv-panel .kv:last-child{border:0}
body[data-v2=pool] .v2-adv-panel .kv span{color:var(--muted,#ababab);display:flex;align-items:center;gap:8px}
body[data-v2=pool] .v2-adv-panel .kv b{font-weight:600;text-align:right}
body[data-v2=pool] .v2-adv-panel .kv img{width:18px;height:18px;border-radius:50%}
body[data-v2=pool] .v2-adv-panel a{color:var(--ink,#eee);text-decoration:none}
body[data-v2=pool] .v2-adv-panel a:hover{text-decoration:underline}
body[data-v2=pool] .v2-hist{margin-top:16px;padding:16px;border-radius:20px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);display:none}
body[data-v2=pool].v2-adv .v2-hist{display:block}
body[data-v2=pool] .v2-hist h3{margin:0 0 8px;font-size:15px;font-weight:600}
body[data-v2=pool] .v2-hist .ri{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line,#2e2e2e);font-size:14px}
body[data-v2=pool] .v2-hist .ri a{color:var(--muted,#ababab);text-decoration:none}
body[data-v2=pool] .v2-hist .none{color:var(--muted,#ababab);padding:12px 0}
@media (max-width:1200px){body[data-v2=pool].v2-adv .dx-pool-layout{grid-template-columns:minmax(0,1fr) 360px}body[data-v2=pool].v2-adv .dx-pool-main{grid-column:1}body[data-v2=pool].v2-adv .dx-pool-side{grid-column:2}body[data-v2=pool].v2-adv .v2-adv-panel{grid-row:2;grid-column:1/-1}}
@media (max-width:900px){
  body[data-v2=pool] .dx-lp.is-pool{margin-top:-8px!important;padding:0 0 24px!important}
  body[data-v2=pool] .lp-head{flex-wrap:wrap;padding:12px}
  body[data-v2=pool].v2-adv .dx-pool-layout{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:901px){
  body[data-v2=pool] .lp-head{flex-wrap:nowrap!important;align-items:center}
  body[data-v2=pool] .dx-pool-layout{align-items:stretch}
  body[data-v2=pool] .lp-head .dx-pool-title{flex-wrap:nowrap;flex:none}
  body[data-v2=pool] .lp-head .lp-figures{margin-left:auto;flex-wrap:nowrap!important;width:auto!important;gap:8px}
  body[data-v2=pool] .lp-head .lp-figures>div{white-space:nowrap}
}
body[data-v2=pool] .lp-figures>.v2-hide{display:none!important}
/* the deposit card sizes to its content (the app stretches it to the row and pushes the split/total to the bottom) */
@media (min-width:901px){body[data-v2=pool] .dx-pool-side{align-self:stretch!important;display:flex;flex-direction:column}body[data-v2=pool] .lp-deposit{flex:1 1 auto!important;display:flex!important;flex-direction:column}body[data-v2=pool] .lp-deposit .dx-deposit-card{flex:1 1 auto!important;display:flex!important;flex-direction:column}body[data-v2=pool] .lp-deposit .lp-deposit-foot{margin-top:auto!important;padding-top:16px}}
/* Liquidity on phones — prjx mobile (measured 2026-10-27 at 390px): three small stat tiles in one row right under the
   header, search + All/Mine on one row, then Pool | Liquidity | APR rows ~62px high, 16px gutters */
@media (max-width:640px){
  body[data-v2=pools] main#app{padding-left:16px!important;padding-right:16px!important}
  body[data-v2=pools] .dx-lp.is-pools{margin-top:-40px!important;padding:0 0 24px!important}
  body[data-v2=pools] .stats-strip{grid-template-columns:repeat(3,1fr)!important;gap:6px}
  body[data-v2=pools] .dx-pools-table{table-layout:auto!important}
  body[data-v2=pools] .dx-pools-table col{width:auto!important}
  body[data-v2=pools] .stats-item,body[data-v2=pools] .stats-item:first-child{grid-column:auto;height:auto;min-height:0;padding:10px 12px 12px!important;border-radius:14px}
  body[data-v2=pools] .stats-item dt{font-size:12px}
  body[data-v2=pools] .stats-item dd,body[data-v2=pools] .stats-item .stat-value{margin-top:2px;font-size:15px!important;line-height:20px}
  body[data-v2=pools] .v2-bars{height:22px}
  body[data-v2=pools] .stats-item:nth-child(2){padding-bottom:28px!important}
  body[data-v2=pools] .grid-controls{flex-wrap:nowrap!important;margin:14px 0 6px;gap:6px}
  body[data-v2=pools] .grid-controls .search{flex:1 1 auto!important;order:0!important;height:44px;padding:0 12px}
  body[data-v2=pools] .v2-seg{flex:none!important;padding:3px}
  body[data-v2=pools] .v2-seg a{flex:none!important;height:36px;padding:0 10px;font-size:14px}
  body[data-v2=pools] .v2-seg a .long{display:none}
  /* columns: Pool | Liquidity | APR (the app hides APR on phones and tucks it under liquidity) */
  body[data-v2=pools] .dx-pools-table th:nth-child(5),body[data-v2=pools] .dx-pools-table td:nth-child(5){display:table-cell!important;text-align:right}
  body[data-v2=pools] .dx-pools-table td .dx-phone-only{display:none!important}
  body[data-v2=pools] .dx-pools-table thead th{padding:8px 12px 0;font-size:13px}
  body[data-v2=pools] .dx-pools-table tbody td{height:62px;padding:0 12px;font-size:15px;font-weight:600}
  body[data-v2=pools] .dx-pools-table tbody td:nth-child(2){border-right:0!important;border-radius:0}
  body[data-v2=pools] .dx-pools-table tbody td:nth-child(5){border-right:1px solid var(--line,#2e2e2e)!important;border-radius:0 15px 15px 0;width:1%;white-space:nowrap}
  body[data-v2=pools] .dx-pools-table .dx-cell-token a{font-size:14px}
  body[data-v2=pools] .dx-pools-table .dx-cell-token small,body[data-v2=pools] .dx-pools-table .dx-cell-token .dx-sub{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:500}
}
@media (max-width:640px){
  body[data-v2=pools] .dx-pools-table thead .dx-unit{display:none}
  body[data-v2=pools] .dx-pools-table thead th{white-space:nowrap}
  body[data-v2=pools] .dx-pools-table td:first-child{width:100%;max-width:0}
  body[data-v2=pools] .dx-pools-table .dx-cell-token a{min-width:0;gap:10px}
  body[data-v2=pools] .dx-pools-table .lp-pool-name{min-width:0;overflow:hidden}
  body[data-v2=pools] .dx-pools-table .lp-pool-name strong,body[data-v2=pools] .dx-pools-table .lp-pool-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body[data-v2=pools] .dx-pools-table td:nth-child(2){white-space:nowrap;padding-right:8px}
}
@media (max-width:640px){
  body[data-v2=pools] .dx-pools-table thead .dx-unit,body[data-v2=pools] .dx-pools-table thead .dx-unit *{display:none!important}
  body[data-v2=pools] .dx-pools-table .dx-pair .dx-mark{width:26px!important;height:26px!important}
  body[data-v2=pools] .dx-pools-table .dx-pair .dx-mark img{width:22px!important;height:22px!important}
  body[data-v2=pools] .dx-pools-table .lp-pool-name strong{font-size:13px}
  body[data-v2=pools] .dx-pools-table .lp-pool-name small{font-size:11px}
  body[data-v2=pools] .dx-pools-table tbody td{font-size:14px}
  body[data-v2=pools] .dx-pools-table tbody td:first-child{padding-right:6px}
}
/* phones: the tab bar (68px) + price ticker (30px) are fixed at the bottom; the page must scroll clear of both */
@media (max-width:900px){main#app{padding-bottom:calc(118px + env(safe-area-inset-bottom))!important}}

/* My positions (/swap/positions): same frame as Liquidity — no page title, All/My switch on the left, a plain card */
body[data-v2=positions] .dx-lp.is-positions{max-width:1040px!important;margin:-24px auto 0!important;padding:0 24px 40px!important}
body[data-v2=positions] .dx-lp .page-head{display:none}
body[data-v2=positions] .directory-overview{margin:0!important;padding:0!important}
body[data-v2=positions] .v2-pos-controls{display:flex;margin:0 0 12px;padding:0;border:0}
body[data-v2=positions] .v2-seg{display:flex;gap:2px;padding:4px;border-radius:15px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e)}
body[data-v2=positions] .v2-seg a{height:38px;display:grid;place-items:center;padding:0 14px;border-radius:11px;font-size:15px;font-weight:600;color:var(--muted,#ababab);text-decoration:none;transition:background .15s var(--v2-std),color .15s var(--v2-std)}
body[data-v2=positions] .v2-seg a.on,body[data-v2=positions] .v2-seg a:hover{background:var(--hover,#2a2a2a);color:var(--ink,#eee)}
body[data-v2=positions] .lp-empty{min-height:300px;border:1px solid var(--line,#2e2e2e)!important;border-radius:20px;background:var(--surface,#222)}
body[data-v2=positions] .lp-empty-icon{background:var(--hover,#2a2a2a)!important;color:var(--ink,#eee)}
body[data-v2=positions] .lp-empty h2{font-size:20px;font-weight:600}
body[data-v2=positions] .lp-empty p{color:var(--muted,#ababab)}
@media (max-width:900px){body[data-v2=positions] .dx-lp.is-positions{margin-top:-40px!important;padding:0 0 24px!important}body[data-v2=positions] .lp-empty{min-height:260px}}
@media (min-width:641px){body[data-v2=positions] .v2-seg a .long{display:inline}}
@media (max-width:640px){body[data-v2=positions] .v2-seg a .long{display:none}}
.v2-seg a{white-space:nowrap}
body[data-v2=positions] .v2-pos-controls{justify-content:flex-start!important}
body[data-v2=positions] .v2-pos-controls .grid-controls-start{display:none}
.v2-seg a{display:flex!important;align-items:center;justify-content:center}
/* pool: equal-height columns; the selected-range band in white, not the app's green; Min/Max values fit between the
   − / + steppers that appear in Custom range (shrink, then ellipsis) */
body[data-v2=pool] .lp-depth-band{background:color-mix(in srgb,var(--ink,#eee) 7%,transparent)!important;border-color:color-mix(in srgb,var(--ink,#eee) 25%,transparent)!important}
/* the − / + steppers sit in the tile's top corners so the value gets the full width */
body[data-v2=pool] .lp-bounds .dx-pool-bound{position:relative}
body[data-v2=pool] .lp-bound-value{display:block!important;min-width:0;width:100%;position:static!important}
body[data-v2=pool] .lp-bound-value .lp-step{position:absolute!important;top:8px;width:26px!important;height:26px!important;padding:0!important;display:grid;place-items:center;font-size:15px;border-radius:8px!important}
body[data-v2=pool] .lp-bound-value .lp-step:first-child{left:8px}
body[data-v2=pool] .lp-bound-value .lp-step:last-child{right:8px}
body[data-v2=pool] .lp-bound-value input{width:100%!important;min-width:0;font-size:20px!important;text-overflow:ellipsis;text-align:center}
/* pool header on phones: back + pair + Advanced on one row, the three figures side by side below */
@media (max-width:640px){
  body[data-v2=pool] .lp-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px}
  body[data-v2=pool] .lp-head .dx-pool-title{grid-column:1;grid-row:1;min-width:0;gap:8px;flex-wrap:nowrap}
  body[data-v2=pool] .lp-head .dx-icon-link{display:none}
  body[data-v2=pool] .lp-head h1{font-size:16px!important;white-space:nowrap}
  body[data-v2=pool] .lp-head .v2-back{width:30px;height:30px}
  body[data-v2=pool] .v2-adv-btn{grid-column:2;grid-row:1;height:34px;padding:0 10px;gap:8px;font-size:13px}
  body[data-v2=pool] .v2-adv-btn i{width:26px;height:16px}
  body[data-v2=pool] .v2-adv-btn i::after{width:12px;height:12px}
  body[data-v2=pool].v2-adv .v2-adv-btn i::after{transform:translateX(10px)}
  body[data-v2=pool] .lp-head .lp-figures{grid-column:1/-1;grid-row:2;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px;margin:0;width:100%!important}
  body[data-v2=pool] .lp-head .lp-figures>div{height:auto;padding:8px 10px;flex-direction:column;align-items:flex-start;gap:2px;border-radius:12px}
  body[data-v2=pool] .lp-head .lp-figures dt{font-size:12px}
  body[data-v2=pool] .lp-head .lp-figures dd{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}
/* Price view (Stoa): price on the left, a compact 1D / 1W / 1M pill on the right of the same row */
body[data-v2=pool] .lp-range .dx-market-head{display:flex!important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
body[data-v2=pool] .lp-range .lp-spans{display:inline-flex!important;width:auto!important;gap:2px;padding:3px;border-radius:12px;margin-left:auto}
body[data-v2=pool] .lp-range .lp-spans button{min-width:44px;height:32px;padding:0 12px;border-radius:9px}
/* phone pool header: the fee chip moves out of the title row so the full pair name fits beside Advanced */
@media (max-width:640px){
  body[data-v2=pool] .lp-head .lp-fee{display:none}
  body[data-v2=pool] .lp-head .dx-pair .dx-mark{width:26px!important;height:26px!important}
  body[data-v2=pool] .lp-head .dx-pair .dx-mark img{width:22px!important;height:22px!important}
  body[data-v2=pool] .lp-head h1{overflow:visible}
}
@media (max-width:640px){body[data-v2=pool] .lp-head h1{flex:none!important;max-width:none!important;min-width:max-content}}
/* ---- pool page on phones: Robinhood (approved mockups/v2/pool.html phone view) ---- */
.v2-back .t,.v2-m-hero,.v2-m-stats,.v2-m-pos,.v2-m-about,.v2-m-addhead{display:none}
@media (max-width:640px){
  body[data-v2=pool] .dx-lp.is-pool{margin-top:-30px!important}
  /* header: "← Pools", then the pair big, then the price big */
  body[data-v2=pool] .lp-head{display:block!important;padding:0!important;margin:0 0 4px;background:none!important;border:0!important;min-height:0}
  body[data-v2=pool] .lp-head .dx-pool-title{flex-wrap:wrap!important;gap:10px;row-gap:12px}
  body[data-v2=pool] .lp-head .v2-back{flex-basis:100%;width:auto!important;height:auto!important;justify-content:flex-start;display:flex!important;gap:6px;background:none!important;padding:0;color:var(--muted,#ababab);font-size:15px;font-weight:500}
  body[data-v2=pool] .lp-head .v2-back .t{display:inline}
  body[data-v2=pool] .lp-head .dx-pair .dx-mark{width:34px!important;height:34px!important}
  body[data-v2=pool] .lp-head .dx-pair .dx-mark img{width:30px!important;height:30px!important}
  body[data-v2=pool] .lp-head h1{font-size:26px!important;font-weight:600}
  body[data-v2=pool] .lp-head .lp-fee{display:inline-block!important;font-size:12px}
  body[data-v2=pool] .lp-head .lp-figures,body[data-v2=pool] .lp-head .v2-adv-btn,body[data-v2=pool] .v2-adv-panel,body[data-v2=pool] .v2-hist{display:none!important}
  body[data-v2=pool] .v2-m-hero{display:block;margin-top:10px}
  body[data-v2=pool] .v2-m-hero .px b{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.5px}
  body[data-v2=pool] .v2-m-hero .px .u{font-size:17px;color:var(--muted,#ababab)}
  body[data-v2=pool] .v2-m-hero .ch{min-height:20px;font-size:14px;color:#00C853}
  body[data-v2=pool] .v2-m-hero .ch.down{color:#FF1744}
  /* the flattened pool view, in Robinhood's order */
  body[data-v2=pool] .dx-pool-layout{display:flex!important;flex-direction:column;gap:0!important}
  body[data-v2=pool] .lp-range>.lp-depth,body[data-v2=pool] .lp-range>.dx-market{order:1!important;margin:0 -16px;border:0!important;border-radius:0!important;background:none!important;padding:0 16px!important}
  body[data-v2=pool] .lp-range>.dx-market .dx-market-head .dx-pool-current,body[data-v2=pool] .lp-range>.dx-market .dx-market-head>:first-child:not(.dx-chart-tools){display:none!important}
  body[data-v2=pool] .lp-range>.lp-chart-head{order:2!important;margin:10px 0 0;padding-bottom:20px;border-bottom:1px solid var(--line,#2e2e2e)}
  body[data-v2=pool] .lp-range>.lp-chart-head .dx-pool-current{display:none!important}
  body[data-v2=pool] .v2-m-stats{order:3!important}
  body[data-v2=pool] .v2-m-pos{order:4!important}
  body[data-v2=pool] .v2-m-about{order:5!important}
  body[data-v2=pool] .v2-m-addhead{order:6!important}
  body[data-v2=pool] .lp-range>header{order:7!important}
  body[data-v2=pool] .lp-range>.lp-bounds{order:8!important}
  body[data-v2=pool] .lp-range>.dx-range-note{order:9!important}
  body[data-v2=pool] .dx-pool-side{order:10!important}
  /* Robinhood sections: big title over a hairline, roomy rows */
  body[data-v2=pool] .v2-m-stats,body[data-v2=pool] .v2-m-pos,body[data-v2=pool] .v2-m-about{display:block;padding:26px 0 6px}
  body[data-v2=pool] .v2-m-stats h2,body[data-v2=pool] .v2-m-pos h2,body[data-v2=pool] .v2-m-about h2{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line,#2e2e2e);font-size:22px;font-weight:700}
  body[data-v2=pool] .v2-m-stats .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
  body[data-v2=pool] .v2-m-stats .st span{display:block;font-size:14px;font-weight:600;color:var(--ink,#eee)}
  body[data-v2=pool] .v2-m-stats .st b{display:block;margin-top:2px;font-size:15px;font-weight:500;color:var(--muted,#ababab)}
  body[data-v2=pool] .v2-m-stats .st i{font-style:normal}
  body[data-v2=pool] .v2-m-pos .row{display:flex;align-items:center;justify-content:space-between;gap:14px}
  body[data-v2=pool] .v2-m-pos p,body[data-v2=pool] .v2-m-about p{margin:0;font-size:15px;line-height:23px;color:var(--ink,#eee)}
  body[data-v2=pool] .v2-m-pos .btn{flex:none;height:40px;padding:0 16px;display:grid;place-items:center;border-radius:20px;border:1px solid var(--line-strong,#363636);color:var(--ink,#eee);font-weight:600;font-size:14px;text-decoration:none}
  body[data-v2=pool] .v2-m-about .ln{display:inline-block;margin-top:10px;font-size:14px;color:var(--muted,#ababab);text-decoration:none}
  /* one Add liquidity card: title, range presets, Min/Max, deposit form */
  body[data-v2=pool] .v2-m-addhead,body[data-v2=pool] .lp-range>header,body[data-v2=pool] .lp-range>.lp-bounds,body[data-v2=pool] .lp-range>.dx-range-note,body[data-v2=pool] .dx-pool-side{background:var(--surface,#222);border-left:1px solid var(--line,#2e2e2e);border-right:1px solid var(--line,#2e2e2e);padding-left:14px!important;padding-right:14px!important}
  body[data-v2=pool] .v2-m-addhead{display:block;margin-top:28px;padding-top:16px;border-top:1px solid var(--line,#2e2e2e);border-radius:20px 20px 0 0}
  body[data-v2=pool] .v2-m-addhead h2{margin:0;font-size:18px;font-weight:600}
  body[data-v2=pool] .lp-range>header{padding-top:12px;padding-bottom:10px;margin:0!important;flex-wrap:wrap;gap:10px}
  body[data-v2=pool] .lp-range>header h2{font-size:14px!important;font-weight:500;color:var(--muted,#ababab)}
  body[data-v2=pool] .lp-range>header .dx-range-presets{width:100%}
  body[data-v2=pool] .lp-range>.lp-bounds{margin:0!important;padding-bottom:10px}
  body[data-v2=pool] .dx-pool-side{padding-bottom:16px!important;border-bottom:1px solid var(--line,#2e2e2e);border-radius:0 0 20px 20px;margin-bottom:8px}
  body[data-v2=pool] .dx-pool-side .lp-deposit{background:none!important;border:0!important;padding:0!important}
  body[data-v2=pool] .dx-pool-side .lp-deposit>.dx-card-head{display:none}
}
@media (max-width:640px){body[data-v2=pool] .lp-head{box-shadow:none!important}}
/* swap: the quote-refresh ring round the flip button (Stoa) is drawn in --brand, which is near-black here — draw it in ink */
.dx-flip-ring rect{stroke:var(--ink,#eee)!important;opacity:.85}
/* swap: the app locks the page (its full-screen terminal mode); our centred swap is a normal page and must scroll
   when the window is short, or the price tiles and Recent swaps are cut off */
html body[data-v2=swap]{overflow-y:auto!important;height:auto!important}
body[data-v2=swap] .dxa-root{height:auto!important;min-height:calc(100vh - 152px)}
body[data-v2=swap] main#app,body[data-v2=swap] #stoa-dex,body[data-v2=swap] .dx-view{height:auto!important;max-height:none!important}

/* ---- My positions (/swap/positions) — approved mockups/v2/positions.html (prjx /portfolio; Meteora-style quiet range line).
   Overview tiles + "My Positions" head are ours (stoa-v2.js mountPositions); the cards are the app's own, rearranged. */
:root{--v2-ok:#65df9e}
:root[data-theme=light]{--v2-ok:#14a44d}
body[data-v2=positions] .dx-lp.is-positions{max-width:1248px!important}
body[data-v2=positions] .v2-pos-controls,body[data-v2=positions] .dx-lp .stats-strip,body[data-v2=positions] .dx-lp .lp-section-head{display:none!important}
body[data-v2=positions] .v2-ov h2,body[data-v2=positions] .v2-mp h2{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;line-height:24px;font-weight:600;letter-spacing:-.011em}
body[data-v2=positions] .v2-ov{display:flex;flex-direction:column;gap:20px;margin:0 0 40px}
body[data-v2=positions] .v2-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body[data-v2=positions] .v2-tile{position:relative;height:250px;padding:20px;border-radius:20px;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}
body[data-v2=positions] .v2-tile::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line,#2e2e2e) 1px,transparent 1px),linear-gradient(90deg,var(--line,#2e2e2e) 1px,transparent 1px);background-size:40px 40px;transform:perspective(500px) rotateX(55deg) scale(2);transform-origin:top;opacity:.45;-webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
body[data-v2=positions] .v2-tile>*{position:relative}
body[data-v2=positions] .v2-tile>.v2-mk{position:absolute;left:20px;top:24px;width:18px;opacity:.55}
:root[data-theme=dark] body[data-v2=positions] .v2-mk,:root:not([data-theme]) body[data-v2=positions] .v2-mk{filter:invert(1)}
body[data-v2=positions] .v2-tile small{font-size:14px;line-height:20px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .v2-tile b{display:block;font-size:48px;line-height:48px;font-weight:700;letter-spacing:-.011em;margin-top:6px;color:var(--ink,#eee)}
body[data-v2=positions] .v2-tile em{font-style:normal;font-size:12px;line-height:16px;color:var(--muted,#ababab);margin-top:10px}
body[data-v2=positions] .v2-tile em a{color:var(--ink,#eee)}
body[data-v2=positions] .v2-btn{display:grid;place-items:center;height:48px;padding:0 22px;border-radius:15px;border:0;background:var(--ink,#eee);color:var(--surface,#111);font-size:15px;font-weight:600;letter-spacing:.04em;text-decoration:none;cursor:pointer}
body[data-v2=positions] .v2-tile .v2-btn{width:100%;margin-top:20px;letter-spacing:0;font-size:16px}
body[data-v2=positions] .v2-btn:disabled,body[data-v2=positions] .v2-btn.is-off{background:var(--hover,#2a2a2a);color:var(--muted,#7a7a7a);cursor:default;pointer-events:none}
body[data-v2=positions] .v2-mp{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}
body[data-v2=positions] .v2-eye{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;background:var(--surface,#222);border:1px solid var(--line,#2e2e2e);color:var(--muted,#ababab);cursor:pointer}
body[data-v2=positions] .v2-eye:hover{color:var(--ink,#eee)}
body[data-v2=positions] .v2-pend{display:flex;align-items:center;gap:12px}
body[data-v2=positions] .v2-pend span{font-size:14px;font-weight:500;color:var(--muted,#ababab);white-space:nowrap}
body[data-v2=positions] .v2-pend span b{color:var(--ink,#eee);font-weight:600;margin-left:6px}
body[data-v2=positions] .v2-pend .v2-btn{height:40px;border-radius:12px;font-size:14px}
/* amounts hidden (eye) */
body.v2-mask[data-v2=positions] .v2-m{color:transparent!important;position:relative}
body.v2-mask[data-v2=positions] .v2-m::after{content:"****";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ink,#eee);font-size:inherit}
body.v2-mask[data-v2=positions] .v2-m *{visibility:hidden}

/* cards: grid 3 / 2 / 1; a raw app card stays invisible until it is rebuilt (no flash of the old layout) */
body[data-v2=positions] .dx-lp > .dx-position-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
body[data-v2=positions] .dx-position:not(.is-closed):not([data-v2c]){visibility:hidden}
body[data-v2=positions] .dx-position[data-v2c]{display:flex!important;flex-direction:column;gap:20px;padding:20px!important;border-radius:20px!important;background:var(--surface,#222)!important;border:1px solid var(--line,#2e2e2e)!important;box-shadow:none!important}
body[data-v2=positions] .dx-position[data-v2c] > :not(.dx-position-head):not(.v2c-uy):not(.v2c-in){display:none!important}
body[data-v2=positions] .dx-position[data-v2c] .dx-position-head{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:0!important}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-identity{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-identity h3{margin:0;font-size:16px;font-weight:600;white-space:nowrap}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-identity h3 a{color:var(--ink,#eee);text-decoration:none}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-badges{display:flex;gap:6px;margin:0}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-badges .lp-status,body[data-v2=positions] .dx-position[data-v2c] .lp-position-badges .lp-position-id{display:none!important}
body[data-v2=positions] .dx-position[data-v2c] .lp-fee{font-size:12px;font-weight:600;color:var(--muted,#ababab);padding:1px 7px;border-radius:6px;background:var(--hover,#2a2a2a);border:0}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr{margin:0 0 0 auto;text-align:right;display:block}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr dt{font-size:12px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr dd{margin:0;font-size:14px;font-weight:700;color:var(--ink,#eee)}
body[data-v2=positions] .v2c-uy{text-align:center}
body[data-v2=positions] .v2c-uy small{font-size:12px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .v2c-uy>b{display:block;margin-top:6px;font-size:30px;line-height:1;font-weight:700;color:var(--ink,#eee)}
body[data-v2=positions] .v2c-uy>b details summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
body[data-v2=positions] .v2c-uy>b details summary::-webkit-details-marker{display:none}
body[data-v2=positions] .v2c-uy>b .price-stack{font-size:30px!important;font-weight:700}
body[data-v2=positions] .v2c-uy>b details summary svg{width:14px;height:14px;color:var(--muted,#ababab)}
body[data-v2=positions] .v2c-uy>b .lp-position-popover{font-size:14px;font-weight:400;text-align:left}
body[data-v2=positions] .v2c-cl{display:flex;margin-top:20px}
body[data-v2=positions] .v2c-cl .lp-position-claim{flex:1;height:48px!important;border-radius:15px!important;font-size:15px!important;font-weight:600;letter-spacing:.04em;margin:0!important}
body[data-v2=positions] .v2c-in{border-radius:12px;overflow:hidden;border:1px solid var(--line,#2e2e2e)}
body[data-v2=positions] .v2c-ib{background:var(--recessed,#1b1b1b);padding:16px;display:flex;flex-direction:column;gap:12px}
body[data-v2=positions] .v2c-pr{display:flex;align-items:center;justify-content:space-between}
body[data-v2=positions] .v2c-pr>span:first-child{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .v2c-pr b{color:var(--ink,#eee);font-weight:600}
body[data-v2=positions] .v2c-pm{display:flex;gap:4px}
body[data-v2=positions] .v2c-round{width:24px!important;height:24px!important;min-height:0!important;min-width:0!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;font-size:14px!important;line-height:1;background:var(--surface,#222)!important;border:1px solid var(--line,#2e2e2e)!important;color:var(--muted,#ababab)!important;transition:border-color .3s,color .3s}
body[data-v2=positions] .v2c-round:hover{border-color:var(--v2-ok)!important;color:var(--ink,#eee)!important}
body[data-v2=positions] .v2c-tk{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:var(--ink,#eee)}
body[data-v2=positions] .v2c-tk>span{display:flex;align-items:center;gap:6px}
body[data-v2=positions] .v2c-tk .dx-mark{width:20px!important;height:20px!important;margin:0!important}
body[data-v2=positions] .v2c-pb{display:flex;height:6px;gap:2px;border-radius:3px;overflow:hidden;background:var(--line,#2e2e2e)}
body[data-v2=positions] .v2c-pb i{display:block;height:100%;background:var(--ink,#eee)}
body[data-v2=positions] .v2c-pb i.t1{background:var(--muted,#7a7a7a)}
body[data-v2=positions] .v2c-st{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .v2c-st b{color:var(--ink,#eee);font-weight:600}
body[data-v2=positions] .v2c-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;background:var(--recessed,#1b1b1b);border-top:1px solid var(--line,#2e2e2e)}
body[data-v2=positions] .v2c-rs{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--muted,#ababab)}
body[data-v2=positions] .v2c-rs i{width:6px;height:6px;border-radius:50%;background:var(--v2-ok);animation:v2pulse 2s cubic-bezier(.4,0,.6,1) infinite}
body[data-v2=positions] .v2c-rs.out i{background:#ff7b00}
@keyframes v2pulse{50%{opacity:.4}}
body[data-v2=positions] .v2c-rg{font-size:13px;font-weight:500;color:var(--muted,#7a7a7a);opacity:.8;white-space:nowrap;cursor:help}
/* closed positions: one quiet line under the grid */
body[data-v2=positions] .dx-closed{margin-top:28px}
body[data-v2=positions] .dx-closed > summary{font-size:15px;font-weight:600;color:var(--muted,#ababab);cursor:pointer}
@media (max-width:1100px){body[data-v2=positions] .dx-lp > .dx-position-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  body[data-v2=positions] .v2-ov{gap:14px;margin-bottom:28px}
  body[data-v2=positions] .v2-ov h2,body[data-v2=positions] .v2-mp h2{font-size:20px;line-height:20px}
  body[data-v2=positions] .v2-tiles{grid-template-columns:1fr 1fr;gap:10px}
  body[data-v2=positions] .v2-tile:first-child{grid-column:1/-1}
  body[data-v2=positions] .v2-tile{height:150px;border-radius:16px;padding:14px}
  body[data-v2=positions] .v2-tile:not(:first-child)>.v2-mk{display:none}
  body[data-v2=positions] .v2-tile b{font-size:32px;line-height:34px}
  body[data-v2=positions] .v2-tile .v2-btn{height:38px;margin-top:12px;font-size:14px;border-radius:12px}
  body[data-v2=positions] .v2-tile em{display:none}
  body[data-v2=positions] .v2-mp{flex-direction:column;align-items:stretch;margin-bottom:14px}
  body[data-v2=positions] .v2-pend{justify-content:space-between}
  body[data-v2=positions] .dx-lp > .dx-position-list{grid-template-columns:1fr}
}
/* positions: USD only in the card figures (prjx), centred yield, quiet APR, darker disabled claim */
body[data-v2=positions] .v2c-uy .price-stack>span:first-child,body[data-v2=positions] .v2c-pr .price-stack>span:first-child{display:none!important}
body[data-v2=positions] .v2c-uy>b details{display:inline-block}
body[data-v2=positions] .v2c-uy>b .price-stack,body[data-v2=positions] .v2c-uy>b .price-display{font-size:30px!important;line-height:1!important;font-weight:700!important;color:var(--ink,#eee)!important}
body[data-v2=positions] .v2c-pr .price-display{font-size:14px!important;font-weight:600!important}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr dd,body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr dt{font-family:inherit!important;color:var(--ink,#eee)!important;letter-spacing:0!important}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-apr dt{color:var(--muted,#ababab)!important;text-transform:none!important}
body[data-v2=positions] .dx-position[data-v2c] .lp-position-identity h3,body[data-v2=positions] .dx-position[data-v2c] .lp-position-identity h3 a{font-size:16px!important}
body[data-v2=positions] .dx-position[data-v2c] .dx-position-head .dx-pair .dx-mark{width:28px!important;height:28px!important}
body[data-v2=positions] .v2c-cl .lp-position-claim:disabled{background:var(--hover,#2a2a2a)!important;color:var(--muted,#7a7a7a)!important;border-color:transparent!important;opacity:1!important}
body[data-v2=positions] .dx-position[data-v2c]{gap:20px!important}body[data-v2=positions] .dx-position[data-v2c] .v2c-in{margin:0!important}

/* site footer banner = the X header art (agora, assets/elysium-coast.webp via brand/x/footer-art.mjs), shown the way
   Stoa shows its footer (measured on stoa.fun 2026-10-28): the app's own .world-footer styles untouched — 230px desktop /
   256px phone, art a faint watermark (opacity .28 light / .34 dark, saturate .7) fading in from the top, wordmark 42px
   left, 13px/550 links right. Only additions: show it, and keep it clear of our fixed status bar + legal links. */
:root body .world-footer{display:block!important;margin-bottom:36px}
@media (max-width:900px){:root body .world-footer{margin-bottom:calc(104px + env(safe-area-inset-bottom))}}
/* no testnet labels anywhere (approved chrome): the Rewards title badge too */
:root body .rp-season-badge{display:none!important}
/* light mode: the STOA / stSTOA coins are cream on white — a hairline ring keeps them visible */
:root[data-theme=light] .dx-mark.is-stoa,:root[data-theme=light] .dx-mark.is-staked,:root[data-theme=light] img[src*="stoa-badge"],:root[data-theme=light] img[src*="ststoa"]{box-shadow:0 0 0 1px rgba(0,0,0,.16);border-radius:50%}

/* ---- Liquidity heading = the Pools / Stake switch (Aerodrome's title tabs): big type, the other view dimmed.
   All pools / My positions stays beside the search. ---- */
:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav{display:flex!important;gap:28px;margin:0 0 20px 4px}
:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav a{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.6px;color:var(--faint,#6b6b6b);text-decoration:none;transition:color .15s var(--v2-std)}
:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav a:hover{color:var(--muted,#ababab)}
:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav a.on{color:var(--ink,#eee)}
@media (max-width:900px){:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav{gap:20px;margin:0 0 14px 2px}:is(body[data-v2=pools],body[data-v2=positions],body[data-v2=stake]) .v2-lnav a{font-size:26px;line-height:34px}}

/* ---- Stake view: Stoa's composition (info card left, stake card right) in the Liquidity frame and our cards ---- */
body[data-v2=stake] .dx-lp.is-stake{max-width:1040px!important;margin:-24px auto 0!important;padding:0 24px 40px!important}
body[data-v2=stake] .dx-lp .page-head{display:none}
body[data-v2=stake] .directory-overview{margin:0!important;padding:0!important}
body[data-v2=stake] .dx-stake-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:16px!important;align-items:start}
body[data-v2=stake] .dx-stake-info{padding:20px!important;border-radius:20px!important;background:var(--surface,#222)!important;border:1px solid var(--line,#2e2e2e)!important;box-shadow:none!important}
body[data-v2=stake] .dx-stake-title{display:flex;align-items:center;gap:14px}
body[data-v2=stake] .dx-stake-title h2{font-size:20px!important;line-height:28px;font-weight:600!important;margin:0}
body[data-v2=stake] .dx-stake-title span{font-size:14px;color:var(--muted,#ababab)}
/* figures = the Liquidity tiles, smaller */
body[data-v2=stake] .dx-stake-info .stats-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;gap:12px!important;margin:20px 0 0!important;padding:0!important;border:0!important;max-width:none!important}
body[data-v2=stake] .dx-stake-info .stats-item{margin:0!important;padding:16px 18px!important;border:1px solid var(--line,#2e2e2e)!important;border-radius:16px!important;background:var(--canvas,#171717)!important}
body[data-v2=stake] .dx-stake-info .stats-item::before,body[data-v2=stake] .dx-stake-info .stats-item::after{display:none!important}
body[data-v2=stake] .dx-stake-info .stats-item dt{font-size:14px!important;color:var(--muted,#ababab)!important;text-transform:none!important;letter-spacing:0!important}
body[data-v2=stake] .dx-stake-info .stats-item dd{margin:6px 0 0!important;display:flex;align-items:baseline;gap:6px}
body[data-v2=stake] .dx-stake-info .stat-value{font-size:28px!important;line-height:36px!important;font-weight:600!important;letter-spacing:-.5px}
body[data-v2=stake] .dx-stake-info .stat-unit{font-size:14px!important;font-weight:600;color:var(--muted,#ababab)!important}
/* Pools with stSTOA = the Liquidity list's row cards */
body[data-v2=stake] .lp-top{margin:24px 0 0!important;padding:0!important;border:0!important}
body[data-v2=stake] .lp-top h2{font-size:16px!important;font-weight:600!important;margin:0 0 10px!important;color:var(--ink,#eee)}
body[data-v2=stake] .lp-top-list{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:0;padding:0;list-style:none}
body[data-v2=stake] .lp-top-list a{display:flex!important;align-items:center;gap:12px;min-height:72px;padding:0 20px!important;border-radius:15px!important;background:var(--canvas,#171717)!important;border:1px solid var(--line,#2e2e2e)!important;text-decoration:none;transition:background .15s var(--v2-std),border-color .15s var(--v2-std)}
body[data-v2=stake] .lp-top-list a:hover{background:var(--hover,#2a2a2a)!important;border-color:var(--line-strong,#363636)!important}
body[data-v2=stake] .lp-top-list .lp-pool-name{flex:1;min-width:0}
body[data-v2=stake] .lp-top-list .lp-pool-name strong{font-size:16px;font-weight:600}
body[data-v2=stake] .lp-top-list .lp-pool-name small{color:var(--muted,#ababab)}
body[data-v2=stake] .lp-top-list .lp-top-figures{display:flex!important;flex-direction:row-reverse;align-items:baseline;gap:24px;text-align:right}
body[data-v2=stake] .lp-top-list .lp-top-figures small{font-size:15px;color:var(--ink,#eee)}
body[data-v2=stake] .lp-top-list .dx-apr{color:var(--ink,#eee)!important;font-size:16px;font-weight:600;min-width:64px}
body[data-v2=stake] .dx-stake-card .dx-card{border-radius:20px!important;border:1px solid var(--line,#2e2e2e)!important;background:var(--surface,#222)!important;box-shadow:none!important}
body[data-v2=stake] .dx-stake-card .dx-cta{height:54px!important;font-size:16px!important}
@media (max-width:900px){
  body[data-v2=stake] .dx-lp.is-stake{margin-top:-40px!important;padding:0 0 24px!important}
  body[data-v2=stake] .dx-stake-layout{grid-template-columns:1fr!important}
  body[data-v2=stake] .dx-stake-side{order:-1}
  body[data-v2=stake] .dx-stake-info{display:block!important}
  body[data-v2=stake] .dx-stake-info{padding:16px!important}
  body[data-v2=stake] .dx-stake-info .stats-item{padding:12px 14px!important}
  body[data-v2=stake] .dx-stake-info .stats-item dd,body[data-v2=stake] .lp-top-list strong,body[data-v2=stake] .lp-top-list .lp-top-figures small{white-space:nowrap}
  body[data-v2=stake] .lp-top-list .lp-top-figures{flex-direction:column;align-items:flex-end;gap:2px}
  body[data-v2=stake] .lp-top-list .lp-top-figures small{font-size:13px;color:var(--muted,#ababab)}
  body[data-v2=stake] .dx-stake-info .stat-value{font-size:22px!important;line-height:30px!important}
  body[data-v2=stake] .lp-top-list a{padding:0 14px!important;min-height:66px}
}

/* review dialogs: the eyebrow ("STAKE STOA") was Stoa gold — ink, like every other label */
:root body .modal-eyebrow{color:var(--muted,#ababab)!important}

/* My positions keeps the All pools / My positions switch (same as Pools) under the heading */
body[data-v2=positions] .dx-lp .v2-pos-controls{display:flex!important;margin:0 0 28px!important}
body[data-v2=positions] .v2-pos-controls .grid-controls-start{display:none}
/* stake: both columns end level (as the pool page) — the stake card stretches to the info card, its button at the foot */
@media (min-width:901px){
  body[data-v2=stake] .dx-stake-layout{align-items:stretch!important}
  body[data-v2=stake] .dx-stake-side,body[data-v2=stake] .dx-stake-card{display:flex!important;flex-direction:column;height:100%}
  body[data-v2=stake] .dx-stake-card>.dx-card{flex:1;display:flex!important;flex-direction:column}
  body[data-v2=stake] .dx-stake-card .dx-cta{margin-top:auto!important}
}
@media (min-width:901px){
  body[data-v2=stake] .dx-stake-info{display:flex!important;flex-direction:column}
  body[data-v2=stake] .dx-stake-info .lp-top{margin-top:auto!important;padding-top:24px!important}
}

/* Genesis: nav link + menu item carry a quiet live dot until the drop */
.v2-nav a[data-k="genesis"]::after,.v2-dot{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;vertical-align:2px;border-radius:50%;background:var(--ink,#eee);animation:v2-breathe 4s ease-in-out infinite}
@keyframes v2-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.v2-nav a[data-k="genesis"]::after,.v2-dot{animation:none;opacity:.7}}

/* footer: the "Connected" status only shows when something is wrong (reconnecting, stale) — healthy is the default, not news */
#market-sync-status[data-state="synced"],#market-sync-status[data-state="connected"],#market-sync-status[data-state="live"]{display:none!important}
/* collection banners: never stretched past their natural width (was 1.6x, so small banners went soft); the blurred
   copy fills whatever the sharp image doesn't cover, with the same soft edge at any width */
:root body .kb--banner .kb-img{width:min(100%,330cqh,calc(var(--kb-src-w,2400) * 1px))}
:root body .kb--banner .kb-fill{display:block}
:root body .kb--banner .kb-img{-webkit-mask:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent);mask:linear-gradient(90deg,transparent,#000 3.5%,#000 96.5%,transparent)}
/* default avatars (patches/avatars.mjs, stoa-avatar.js): a Stoa portrait <img> fills whatever avatar box holds it */
.stoa-av{overflow:hidden;background:var(--quiet-surface,#262626)}
.stoa-av>.stoa-av-img,img.stoa-av-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* the profile editor's picture section (approved picker: upload / NFT, then the five portraits) */
.social-profile-editor .stoa-av-field .stoa-av-acts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.social-profile-editor .stoa-av-field .stoa-av-acts>.ks-upload{margin-top:0}
.social-profile-editor .stoa-av-field .stoa-av-acts>.ks-upload,.social-profile-editor .stoa-av-field .social-nft-picker>summary{min-height:44px;padding:0 18px;border:0;border-radius:999px;background:color-mix(in srgb,var(--ink,#eee) 9%,transparent);font-size:14px;font-weight:600;transition:background .15s cubic-bezier(.4,0,.2,1)}
.social-profile-editor .stoa-av-field .stoa-av-acts>.ks-upload:hover,.social-profile-editor .stoa-av-field .social-nft-picker>summary:hover{background:color-mix(in srgb,var(--ink,#eee) 15%,transparent)}
.social-profile-editor .stoa-av-field .stoa-av-acts>.social-nft-picker:not([open]){border:0;padding:0;margin:0;background:none}
.social-profile-editor .stoa-av-field .stoa-av-acts>.social-nft-picker{flex:1 1 100%}
.social-profile-editor .stoa-av-field .stoa-av-acts>.social-nft-picker:not([open]){flex:0 1 auto}
.social-profile-editor .stoa-av-field .social-nft-picker>summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none}
.social-profile-editor .stoa-av-field .social-nft-picker>summary::-webkit-details-marker{display:none}
.social-profile-editor .stoa-av-eyebrow{margin:20px 0 10px;font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.social-profile-editor .stoa-av-field .social-avatar-options{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.social-profile-editor .stoa-av-field .social-avatar-options label{display:block;min-width:0;min-height:0}
.social-profile-editor .stoa-av-field .social-avatar-options .stoa-av.avatar{width:64px;height:64px;border-radius:18px;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.34,1.56,.64,1)}
.social-profile-editor .stoa-av-field .social-avatar-options label:hover .stoa-av.avatar{transform:translateY(-2px)}
.social-profile-editor .stoa-av-field .social-avatar-options input:checked+.stoa-av.avatar{box-shadow:0 0 0 3px var(--surface,#1f1f1f),0 0 0 5px var(--ink,#eee)}
.social-profile-editor .stoa-av-field .social-avatar-options input:focus-visible+.stoa-av.avatar{outline:2px solid var(--focus,#eee);outline-offset:5px}
.social-profile-editor .stoa-av-note{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:700px){.social-profile-editor .stoa-av-field .social-avatar-options{gap:10px}.social-profile-editor .stoa-av-field .social-avatar-options .stoa-av.avatar{width:56px;height:56px;border-radius:16px}}
@media (prefers-reduced-motion:reduce){.social-profile-editor .stoa-av-field .social-avatar-options .stoa-av.avatar{transition:none}}