.bar-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 30px; padding: 13px 28px; border-bottom: 1px solid var(--line); background: var(--bg); }
.views { display: flex; gap: 4px; margin-right: auto; }
.views a { text-decoration: none; color: var(--mute); padding: 8px 13px; border-radius: 6px; font-size: 15px; transition: color .15s; }
.views a:hover { color: var(--text); }
.views a.on { background: var(--s2); color: var(--text); }
.notice { padding: 10px 28px; background: var(--s2); border-bottom: 1px solid var(--line); font-size: 14px; color: #d3d7dc; }
main { min-height: calc(100vh - 66px); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 36px 28px 70px; }
.face { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--s2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mute); flex: none; }
.pair { display: inline-flex; flex: none; }
.pair .face + .face { margin-left: -10px; box-shadow: 0 0 0 2px var(--bg); }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.pagehead h1 { font-size: 38px; line-height: 1.1; letter-spacing: -.03em; }
.pagehead p { color: var(--mute); margin-top: 6px; }
.totals { display: flex; flex-wrap: wrap; gap: 34px; }
.totals span { display: block; color: var(--mute); font-size: 13px; }
.totals b { font: 500 22px/1.3 var(--mono); letter-spacing: -.02em; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.chip { border: 0; background: none; color: var(--mute); padding: 8px 13px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--s2); color: var(--text); }
.tools input { margin-left: auto; width: 280px; max-width: 100%; }
input.text { background: var(--s1); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 14px; outline: none; }
input.text:focus { border-color: #4a5059; }

/* the pools table */
.table { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(230px, 2fr) 130px 1fr 1fr 1fr 1fr 110px; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); text-decoration: none; transition: background .12s; }
.row:first-child { border-top: 0; }
a.row:hover { background: var(--s1); }
.row.head { background: var(--s1); color: var(--mute); font-size: 13px; padding: 11px 18px; }
.c-pool { display: flex; align-items: center; gap: 12px; min-width: 0; }
.c-pool b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-pool small { color: var(--mute); font-size: 13px; }
.c-n { text-align: right; min-width: 0; }
.c-n b { font: 500 15px var(--mono); }
.apr { color: var(--up); }
.spark { display: block; }
.rowempty { padding: 40px 18px; text-align: center; color: var(--mute); }
.rowempty b { display: block; color: var(--text); font-weight: 500; font-size: 20px; margin-bottom: 4px; }
.sub-h { font-size: 22px; letter-spacing: -.02em; margin-top: 44px; }
.sub-h + p { color: var(--mute); margin-top: 4px; }
.coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 14px; }
.coin { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; text-decoration: none; min-width: 0; transition: background .12s; }
.coin:hover { background: var(--s1); }
.coin b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin em { font-style: normal; color: var(--road); font-size: 13px; white-space: nowrap; }

/* swap */
.swapgrid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 400px); justify-content: center; gap: 22px; align-items: start; padding-top: 22px; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--s1); }
.box { background: var(--bg); border-radius: 10px; padding: 16px; }
.box label { display: flex; justify-content: space-between; color: var(--mute); font-size: 14px; }
.box label button { border: 0; background: none; color: var(--mute); padding: 0; cursor: pointer; font: inherit; }
.box label button:hover { color: var(--text); }
.box .in { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.box input { flex: 1; min-width: 0; width: 100%; background: none; border: 0; outline: none; font: 500 34px/1.15 var(--mono); letter-spacing: -.03em; padding: 0; }
.box small { display: block; color: var(--mute); font-size: 13px; margin-top: 6px; min-height: 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--s2); border-radius: 99px; padding: 6px 12px 6px 6px; font-weight: 500; cursor: pointer; white-space: nowrap; flex: none; }
button.pill:hover { background: #242930; }
.pill .face { width: 26px; height: 26px; font-size: 10px; }
.pill i { font-style: normal; color: var(--mute); font-size: 11px; }
.flip { display: flex; margin: -12px auto; position: relative; z-index: 1; width: 38px; height: 38px; align-items: center; justify-content: center; border: 4px solid var(--s1); background: var(--s2); border-radius: 10px; cursor: pointer; color: var(--text); font-size: 15px; }
.flip:hover { background: #242930; }
.go { width: 100%; margin-top: 12px; padding: 17px; font-size: 16px; border-radius: 8px; }
.rate { display: flex; justify-content: space-between; color: var(--mute); font-size: 13px; padding: 12px 4px 0; gap: 12px; }
.tlist h3 { font-size: 17px; padding: 2px 4px 10px; }
.tl { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.tl b { font-weight: 500; display: block; }
.tl small { color: var(--mute); font-size: 13px; }
.tl em { font: 400 13px var(--mono); font-style: normal; text-align: right; }
.up { color: var(--up); } .down { color: var(--down); }

/* one pool */
.crumb { color: var(--mute); font-size: 14px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--text); }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.phead .pair .face { width: 46px; height: 46px; }
.phead h1 { font-size: 30px; letter-spacing: -.03em; }
.tag { display: inline-block; background: var(--s2); color: #c3c8ce; border-radius: 4px; padding: 2px 7px; font: 400 12px var(--mono); margin-right: 6px; }
.tag.addr { text-decoration: none; }
.phead .acts2 { margin-left: auto; display: flex; gap: 8px; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; margin-top: 24px; align-items: start; }
.chart-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-top b { display: block; font: 500 30px/1.1 var(--mono); letter-spacing: -.03em; }
.chart-top span { color: var(--mute); font-size: 13px; }
.seg { display: flex; gap: 2px; }
.seg button { border: 0; background: none; color: var(--mute); padding: 6px 10px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.seg button.on { background: var(--s2); color: var(--text); }
.chart { width: 100%; height: 300px; margin-top: 14px; display: block; }
.nochart { height: 300px; margin-top: 14px; display: flex; align-items: center; justify-content: center; color: var(--mute); border: 1px dashed var(--line); border-radius: 8px; }
.trades { margin-top: 30px; }
.trades h3 { font-size: 19px; margin-bottom: 10px; }
.trow { display: grid; grid-template-columns: 80px 70px 1fr 1fr 120px; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 14px; align-items: center; }
.trow.h { color: var(--mute); font-size: 13px; }
.trow .num { font-size: 13px; }
.stack { display: grid; gap: 12px; }
.stat h3 { font-size: 17px; margin-bottom: 12px; }
.balbar { display: flex; height: 6px; gap: 2px; margin: 8px 0 4px; }
.balbar i { display: block; height: 100%; }
.bal { display: flex; justify-content: space-between; font: 400 13px var(--mono); gap: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.kv:first-of-type { border-top: 0; }
.kv span { color: var(--mute); }
.kv b { font: 500 14px var(--mono); text-align: right; overflow-wrap: anywhere; }
.bigday { font: 500 42px/1 var(--mono); letter-spacing: -.04em; color: var(--road); }
.bigday small { font: 400 15px var(--sans); color: var(--mute); letter-spacing: 0; margin-left: 6px; }
.road { position: relative; height: 4px; margin: 14px 0 12px; background: repeating-linear-gradient(90deg, #3a4048 0 14px, transparent 14px 24px); }
.road i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--road) 0 14px, transparent 14px 24px); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.pct { display: flex; gap: 4px; margin-top: 12px; }
.pct button { flex: 1; border: 1px solid var(--line); background: none; padding: 7px 0; border-radius: 5px; cursor: pointer; font: 400 13px var(--mono); color: var(--mute); }
.pct button.on { color: var(--text); border-color: #8e96a0; }
.full { width: 100%; margin-top: 10px; }

/* add liquidity: steps, like every other pool page */
.addgrid { display: grid; grid-template-columns: 280px minmax(0, 620px); justify-content: center; gap: 22px; align-items: start; margin-top: 22px; }
.steps { border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step + .step { margin-top: 22px; }
.step i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--s2); color: var(--mute); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.step.on i { background: var(--text); color: var(--bg); }
.step b { display: block; font-weight: 500; font-size: 14px; }
.step small { color: var(--mute); font-size: 13px; }
.addgrid .panel h2 { font-size: 18px; margin-bottom: 4px; }
.addgrid .panel > p { color: var(--mute); font-size: 14px; margin-bottom: 12px; }
.pickbig { display: flex; width: 100%; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 12px; cursor: pointer; font-weight: 500; margin-bottom: 18px; }
.pickbig:hover { border-color: #4a5059; }
.box + .box { margin-top: 6px; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.ladder div { background: var(--bg); border-radius: 8px; padding: 11px 12px; }
.ladder span { display: block; color: var(--mute); font-size: 12px; }
.ladder b { font: 500 18px var(--mono); }
.hint { color: var(--mute); font-size: 13px; margin-top: 10px; }

.cards2 { display: grid; gap: 10px; margin-top: 22px; }
.poscard { display: grid; grid-template-columns: minmax(200px, 1.4fr) 1fr 90px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; text-decoration: none; transition: background .12s; }
.poscard:hover { background: var(--s1); }
.poscard .road { margin: 8px 0 6px; }
.poscard span { display: block; color: var(--mute); font-size: 13px; }
.poscard b { font-weight: 500; }
.poscard .num { font: 500 15px var(--mono); }
.stays { display: grid; grid-template-columns: 34px 1.2fr 1fr 90px 90px 110px; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.stays:first-child { border-top: 0; }
.stays.h { background: var(--s1); color: var(--mute); font-size: 13px; }
.stays .num { font: 400 13px var(--mono); }
.stays .rank { color: var(--mute); font: 400 13px var(--mono); }
.app-foot { margin-top: 0; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal.shown { display: flex; }
.sheet { background: var(--s1); border: 1px solid var(--line); border-radius: 12px; padding: 20px; width: 400px; max-width: 100%; display: grid; gap: 12px; }
.sheet h3 { font-size: 19px; }
#wlist { display: grid; gap: 6px; }
#wlist button { display: flex; gap: 10px; align-items: center; border: 0; border-radius: 8px; background: var(--s2); padding: 12px; font-weight: 500; cursor: pointer; text-align: left; }
#wlist img { width: 24px; height: 24px; }
.pick-top { display: flex; justify-content: space-between; align-items: center; }
.x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--mute); }
#psearch { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; outline: none; font-size: 14px; }
#plist { max-height: 56vh; overflow: auto; }
.pgrp { color: var(--mute); font-size: 13px; padding: 10px 4px 4px; }
.prow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 8px 4px; border-radius: 6px; cursor: pointer; text-align: left; }
.prow:hover { background: var(--s2); }
.prow b { display: block; font-weight: 500; }
.prow small { color: var(--mute); font-size: 12px; }
.prow em { font: 400 12px var(--mono); font-style: normal; color: var(--mute); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 90px); background: var(--text); color: #0b0c0e; border-radius: 6px; padding: 12px 16px; font-size: 14px; max-width: min(92vw, 620px); opacity: 0; pointer-events: none; transition: transform .25s, opacity .25s; z-index: 60; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.bad { background: var(--down); }

@media (max-width: 1040px) {
  .pgrid { grid-template-columns: 1fr; }
  .swapgrid { grid-template-columns: minmax(0, 520px); }
  .addgrid { grid-template-columns: minmax(0, 620px); }
  .steps { display: none; }
  .poscard { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bar-top { padding: 11px 16px; gap: 10px; flex-wrap: wrap; }
  .brand { margin-right: auto; }
  .views { order: 3; width: 100%; margin: 0; }
  .views a { flex: 1; text-align: center; padding: 8px 2px; font-size: 13px; }
  .wrap { padding: 22px 16px 50px; }
  .pagehead h1 { font-size: 30px; }
  .totals { gap: 20px; }
  .tools input { width: 100%; margin: 0; }
  .row { grid-template-columns: minmax(0, 1.5fr) 1fr 72px; padding: 13px 12px; }
  .row .c-trend, .row .hide-s, .row > .c-n:nth-child(4) { display: none; }
  .phead .acts2 { margin: 0; width: 100%; }
  .phead .acts2 .btn { flex: 1; }
  .trow { grid-template-columns: 60px 50px 1fr 1fr; }
  .trow > :last-child { display: none; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .stays { grid-template-columns: 26px 1fr 60px 60px; padding: 11px 12px; }
  .stays > :nth-child(3), .stays > :nth-child(6) { display: none; }
}

/* no rules between things: space and quiet surfaces do the separating */
.bar-top { border-bottom: 0; }
.notice { border-bottom: 0; }
.table { border: 0; border-radius: 0; overflow: visible; display: grid; gap: 2px; }
.row { border-top: 0; border-radius: 8px; padding: 13px 16px; }
.row.head { background: none; padding: 6px 16px; }
input.text { border: 0; }
.coin { border: 0; background: var(--s1); }
.coin:hover { background: var(--s2); }
.panel { border: 0; }
.steps { border: 0; background: var(--s1); }
.tl { border-top: 0; padding: 8px 4px; border-radius: 6px; }
.tl:hover { background: var(--s2); }
.trow { border-top: 0; padding: 7px 2px; }
.kv { border-top: 0 !important; padding: 7px 0; }
.pct button { border: 0; background: var(--bg); }
.pct button.on { border: 0; background: var(--s2); color: var(--text); }
.pickbig { border: 0; }
.poscard { border: 0; background: var(--s1); }
.poscard:hover { background: var(--s2); }
.stays { border-top: 0; border-radius: 8px; padding: 9px 16px; }
.stays.h { background: none; }
.stays:not(.h):hover { background: var(--s1); }
.nochart { border: 0; background: var(--s1); }
.sheet { border: 0; }
#psearch { border: 0; }
.flip { border-color: var(--s1); }

/* the fuller swap panel */
.sw-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 12px; }
.sw-top b { font-weight: 500; font-size: 18px; }
.sw-tools { display: flex; align-items: center; gap: 8px; }
.sw-slip { color: var(--mute); font-size: 13px; }
.gear { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: var(--s2); color: var(--mute); cursor: pointer; }
.gear:hover, .gear.on { color: var(--text); }
.settings { background: var(--bg); border-radius: 10px; padding: 14px; margin-bottom: 8px; display: grid; gap: 12px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.set-row label { color: var(--mute); font-size: 14px; }
.set-btns { display: flex; align-items: center; gap: 4px; }
.set-btns button { border: 0; background: var(--s1); color: var(--mute); border-radius: 6px; padding: 7px 10px; cursor: pointer; font: 400 13px var(--mono); }
.set-btns button.on { background: var(--text); color: var(--bg); }
.set-in { display: inline-flex; align-items: center; gap: 3px; background: var(--s1); border-radius: 6px; padding: 0 9px; font: 400 13px var(--mono); color: var(--mute); }
.set-in input { width: 58px; background: none; border: 0; outline: none; padding: 7px 0; font: 400 13px var(--mono); text-align: right; }
.set-unit { color: var(--mute); font-size: 13px; margin-left: 4px; }
.set-note { color: var(--down); font-size: 13px; }
.set-note:empty { display: none; }
.box label span { color: var(--mute); }
.box-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.box-foot small { margin: 0; }
.quick { display: flex; gap: 3px; }
.quick button { border: 0; background: var(--s2); color: var(--mute); border-radius: 5px; padding: 4px 8px; cursor: pointer; font: 400 12px var(--mono); }
.quick button:hover { color: var(--text); }
.details { padding: 12px 4px 0; }
.details .kv { padding: 5px 0; font-size: 13px; }
.details .kv b { font-size: 13px; font-weight: 400; }
.details b.down { color: var(--down); }
.warn { background: rgba(240, 114, 109, .12); color: #ffb3af; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 10px; }

/* Bide: navigation down the left, rounder and quieter surfaces */
body:not(.land) { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.bar-top { grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; flex-direction: column; align-items: stretch; gap: 26px; padding: 24px 16px; background: var(--s1); }
.bar-top .brand { padding: 0 8px; }
.views { flex-direction: column; gap: 2px; margin: 0 0 auto; }
.views a { padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.views a.on { background: var(--s2); }
.bar-top #wallet { width: 100%; }
.notice, main, .foot { grid-column: 2; }
.notice { padding: 10px 28px; }
main { min-height: 100vh; }
.pagehead h1, .phead h1 { font-weight: 500; letter-spacing: -.045em; }
.chip, .seg button { border-radius: 99px; }
.row { border-radius: 14px; background: var(--s1); padding: 15px 18px; }
.row.head { background: none; }
a.row:hover { background: var(--s2); }
.table { gap: 5px; }
.coin { border-radius: 14px; }
.panel { border-radius: 20px; }
.box { border-radius: 14px; }
.go { border-radius: 99px; }
.poscard, .steps { border-radius: 16px; }
.stays { background: var(--s1); border-radius: 12px; }
.stays.h { background: none; }
.stays:not(.h):hover { background: var(--s2); }
.road { height: 3px; background: var(--s2); border-radius: 3px; overflow: hidden; }
.road i { background: var(--road); border-radius: 3px; }
.bigday { color: var(--text); }
.foot { margin-top: 0; }
.tag { border-radius: 99px; padding: 2px 9px; }
.toast { border-radius: 12px; }
@media (max-width: 900px) {
  body:not(.land) { display: flex; flex-direction: column; }
  .bar-top { position: sticky; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 16px; }
  .bar-top .brand { margin-right: auto; padding: 0; }
  .bar-top #wallet { width: auto; }
  .views { order: 3; width: 100%; flex-direction: row; margin: 0; }
  .views a { flex: 1; text-align: center; padding: 8px 2px; font-size: 13px; }
  main { min-height: 0; }
}