:root { --bg: #0c0c0f; --s1: #111115; --s2: #18181d; --s3: #222228; --line: rgba(255, 255, 255, .08); --line2: rgba(255, 255, 255, .16); --text: #f2f2f5; --muted: rgba(236, 236, 242, .56); --acc: #a596ff; --on-acc: #0c0a1f; --accbg: rgba(165, 150, 255, .14); --accdim: #5d52a8; --focus: rgba(165, 150, 255, .55); --inbg: #0c0c0f; --up: #3ce3ab; --down: #f23674; --aave: #8fd4c6;
  --head: "Geist", Arial, sans-serif; --font: "Geist", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --r: 14px; --rb: 999px; --ri: 12px; --h1w: 400; --barbg: rgba(12, 12, 15, .92); --appw: 1200px }
.lay { max-width: 1200px; margin: 0 auto; padding: 28px 20px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start }
.sticky { position: sticky; top: 80px }
.vaults { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.vcard { text-align: left; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; transition: border-color .15s } .vcard:hover { border-color: var(--line2) } .vcard.on { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset }
.vcard .vh { display: flex; align-items: center; gap: 10px; font: 500 17px var(--font) } .vcard .vh img { width: 30px; height: 30px } .vcard .vh .tag { margin-left: auto }
.vcard .apy { margin-top: 22px; font: 300 46px/1 var(--mono); letter-spacing: -.05em } .vcard .apy small { display: block; margin-top: 10px; font: 13px var(--font); color: var(--muted); letter-spacing: 0 }
.vcard .kv { margin-top: 18px; font-size: 13px }
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.mk { margin-top: 16px; display: grid; gap: 10px }
.mrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 90px 120px; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--ri) } .mrow.on { border-color: rgba(165, 150, 255, .5); background: rgba(165, 150, 255, .05) }
.mrow b { font-weight: 500 } .mrow .r { font: 300 24px var(--mono); letter-spacing: -.04em; text-align: right } .mrow .s { font: 12px var(--mono); color: var(--muted); text-align: right }
.meter { height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden } .meter i { display: block; height: 100%; background: var(--acc) } .mrow.aave .meter i { background: var(--aave) }
.move { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--ri); background: var(--s2); font-size: 13px; color: var(--muted) }
.pos { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line) } .pos h3 { font: 500 13px var(--font); color: var(--muted) } .pos .val { margin-top: 8px; font: 300 38px/1 var(--mono); letter-spacing: -.05em }
.pos .kv { margin-top: 14px }
@media (max-width: 920px) { .lay { grid-template-columns: minmax(0, 1fr) } .sticky { position: static } .mrow { grid-template-columns: 90px minmax(0, 1fr) 80px } .mrow .s { display: none } }
@media (max-width: 560px) { .vaults { grid-template-columns: 1fr } }