/* Stoa v2 — layout + look over the existing Kalos 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)}
/* the app's own loading screen draws the old three-panel skeleton: replace it with a quiet breathing Stoa mark */
#market-loading .sk-page,#market-loading>*{visibility:hidden!important}
html:has(style#v2-boot) body::after{content:"";position:fixed;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--ink,#eee);-webkit-mask:url(/assets/kalos-mark.svg) center/contain no-repeat;mask:url(/assets/kalos-mark.svg) center/contain no-repeat;opacity:.18;animation:v2breathe 1.6s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes v2breathe{50%{opacity:.4;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){html:has(style#v2-boot) body::after{animation:none}}
/* 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 Kalos/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, art footer, header search/faucet/notice ---------- */
:root body .testnet-banner,:root body .network-badge,:root body .side-rail,:root body .rail-scrim,
:root body .world-footer,: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}
.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: Kalos 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;gap:32px;white-space:nowrap;width:max-content;animation:v2marq 60s linear infinite;font-variant-numeric:tabular-nums}
.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{position:fixed;right:28px;bottom:52px;z-index:29;display:flex;gap:16px;font-size:12px}
.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}
body[data-v2=swap] .dx-mini-price .dx-spark{position:absolute;right:12px;bottom:14px;width:46%!important;height:40px!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: Kalos 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,.v2-legal{display:none!important}
  :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 (Kalos): 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}}