/* makeithappen Board (formerly Backstop): the app, rebuilt on pro.aave.com with the values of its own stylesheet (dark theme, October 2026).
   Aave's purple accent becomes our orange; the data colours stay theirs. Discovery and campaign pages follow
   Kickstarter's layout in the same tokens. */

/* moving between the site's pages cross-fades instead of flashing white */
@view-transition { navigation: auto; }

:root {
  --bg-1: #100f0f;
  --bg-2: #1a1919;
  --bg-3: #1f1e1e;
  --bg-4: #2a2828;
  --bg-5: #393737;
  --fg-1: #ffffff;
  --fg-2: #bcbbbb;
  --fg-3: #8f8e8e;
  --fg-4: #636161;
  --border-0: #ffffff0f;
  --border-1: #ffffff14;
  --border-2: #ffffff1f;
  --selected: #ffffff0f;
  --row-hover: #282727;
  --primary: #ff7a45;
  --primary-2: #ff6b2c;
  --data-green: #66c399;
  --data-orange: #e68662;
  --data-red: #ec5a5a;
  --data-amber: #e9b949;
  --card-shadow: 0 2px 4px 0 #00000026, 0 0 0 1px #ffffff14;
  --overlay-shadow: 0 0 0 1px #ffffff1a, 0 6px 32px 0 #00000059;
  --scrim: #100f0f 0%, #100f0fbc 19%, #100f0f8a 34%, #100f0f61 47%, #100f0f47 56.5%, #100f0f31 65%, #100f0f20 73%, #100f0f13 80.2%, #100f0f0b 86.1%, #100f0f05 91%, #100f0f02 95.2%, #100f0f01 98.2%, #100f0f00 100%;
  --ease-smooth: cubic-bezier(.19, 1, .22, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --side-w: 16.25rem;
  --side-w-closed: 3.625rem;
  --topbar-h: 4.5rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg-1); color: var(--fg-1); font-family: var(--font); font-size: 14px; line-height: 1.2; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; overflow-y: scroll; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
svg { display: block; }
::selection { color: #fff; background: var(--primary); }
* { scrollbar-width: thin; scrollbar-color: var(--fg-4) transparent; }

/* global loading bar */
.progress { position: fixed; z-index: 214748364; top: 0; left: 0; width: 100%; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.progress.run { opacity: 1; transform: scaleX(.75); transition: transform .45s var(--ease-smooth); }
.progress.done { transform: scaleX(1); opacity: 0; transition: transform .2s ease, opacity .25s ease .15s; }

/* ================================================================== layout */
.layout { --sd: 0s; position: relative; min-height: 100vh; padding-left: var(--side-w-closed); transition: padding-left var(--sd) ease-in-out; }
.layout[data-sidebar-ready=true] { --sd: .3s; }
.layout[data-sidebar-open=true] { padding-left: var(--side-w); }

/* sidebar */
.side { position: fixed; z-index: 9999; inset: 0 auto 0 0; display: flex; flex-direction: column; gap: 16px; width: var(--side-w-closed); overflow: hidden; background: var(--bg-1); transition: width var(--sd) ease-in-out; }
.layout[data-sidebar-open=true] .side { width: var(--side-w); }
.side::after { content: ""; position: absolute; z-index: 10; top: 0; bottom: 0; right: 0; width: 1px; background: var(--border-0); pointer-events: none; }
.side-top { display: flex; flex-direction: column; flex: auto; min-height: 0; overflow: hidden auto; scrollbar-width: none; }
.side-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 10px 12px 20px; background: var(--bg-1); transition: padding var(--sd) ease-in-out, gap var(--sd) ease-in-out; }
.side-logo { display: flex; align-items: center; gap: 4px; padding: 12px 0; min-width: 0; white-space: nowrap; transition: opacity var(--sd) ease-in-out; }
.side-logo img { width: 22px; height: 22px; }
.side-logo b { font-family: "Onest", var(--font); font-size: 19px; font-weight: 650; letter-spacing: -.06em; line-height: 1; }
.side-logo em { margin-left: 4px; padding: 1px 4px; border-radius: 5px; box-shadow: inset 0 0 0 1.2px var(--primary); color: var(--primary); font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: .04em; line-height: 12px; }
.collapse { position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 36px; border-radius: 8px; color: var(--fg-4); transition: color .1s; touch-action: manipulation; }
.collapse:hover { background: var(--selected); color: var(--fg-1); }
.collapse .collapse-icon, .collapse .small-logo { transition: opacity .12s; }
.collapse .small-logo { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.collapse[data-expanded=false] { transition-delay: .7s; }
.collapse[data-expanded=false] .collapse-icon { opacity: 0; }
.collapse[data-expanded=false] .small-logo { opacity: 1; }
.collapse[data-expanded=false]:hover { transition-delay: 0s; }
.collapse[data-expanded=false]:hover .collapse-icon { opacity: 1; }
.collapse[data-expanded=false]:hover .small-logo { opacity: 0; }
.layout[data-sidebar-open=false] .side-logo { opacity: 0; pointer-events: none; width: 0; overflow: hidden; }
.layout[data-sidebar-open=false] .side-head { gap: 0; padding-left: 10px; }
.side-nav { display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-label { position: relative; padding: 14px 10px 6px; color: var(--fg-3); font-size: 11px; font-weight: 500; line-height: 13.2px; text-transform: uppercase; white-space: nowrap; transition: color var(--sd) ease-in-out; }
.nav-label::after { content: ""; position: absolute; left: 10px; bottom: 12px; width: 18px; height: 1px; background: var(--border-1); opacity: 0; transition: opacity var(--sd) ease-in-out; }
.layout[data-sidebar-open=false] .nav-label { color: transparent; }
.layout[data-sidebar-open=false] .nav-label::after { opacity: 1; }
.nav-item { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--fg-2); font-size: 14px; line-height: 14px; font-variation-settings: "wght" 400, "opsz" 14; white-space: nowrap; transition: color .1s, background .1s, font-variation-settings .1s; }
.nav-item svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-3); transition: color .1s; }
.nav-item .ext { position: absolute; right: 8px; width: 18px; height: 18px; padding: 3px; color: var(--fg-4); }
.nav-item:hover, .nav-item.on { background: var(--selected); color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.nav-item:hover svg, .nav-item.on svg { color: var(--fg-1); }
.nav-item span, .nav-item .ext { transition: opacity var(--sd) ease-in-out; }
.layout[data-sidebar-open=false] .nav-item span, .layout[data-sidebar-open=false] .nav-item .ext { opacity: 0; }
.side-foot { width: var(--side-w); padding: 16px 20px; transition: opacity var(--sd) ease-in-out; }
.layout[data-sidebar-open=false] .side-foot { opacity: 0; pointer-events: none; position: absolute; bottom: 0; left: 0; }
.promo { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 220px; aspect-ratio: 13.75 / 9.1875; padding: 16px; overflow: hidden; border-radius: 14px; background: var(--bg-3); box-shadow: 0 1px 12px #00000026, inset 0 0 0 1px var(--border-0); transition: opacity .2s; animation: fade .2s ease-out both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.promo:hover { opacity: .8; }
.promo::before, .promo::after { content: ""; position: absolute; top: -42px; right: -62px; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); pointer-events: none; }
.promo::after { top: -12px; right: -26px; width: 130px; height: 130px; }
.promo-art { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--border-0); }
.promo-art img { width: 100%; height: 100%; object-fit: cover; }
.promo-x { position: absolute; top: 0; right: 0; z-index: 2; width: 36px; height: 36px; }
.promo-x::before { content: ""; position: absolute; top: 17px; left: 12px; width: 12px; height: 2px; border-radius: 2px; background: var(--fg-3); transition: background-color .15s; }
.promo-x:hover::before { background: var(--fg-1); }
.promo b { position: relative; font-size: 14px; font-weight: 500; line-height: 18px; }
.promo small { position: relative; font-size: 14px; line-height: 19px; color: var(--fg-3); }

/* top bar */
.topbar { position: fixed; z-index: 9999; top: 0; right: 0; left: var(--side-w-closed); height: var(--topbar-h); background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); transition: left var(--sd) ease-in-out; }
.topbar::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 2rem; background: linear-gradient(to bottom, var(--scrim)); pointer-events: none; }
.layout[data-sidebar-open=true] .topbar { left: var(--side-w); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1504px; height: 100%; margin: 0 auto; padding: 0 32px; }
.topbar .burger, .topbar .top-logo, .topbar .m-search, .topbar .m-back { display: none; }
.burger svg, .m-search svg, .m-back svg { color: var(--fg-1); }
.burger .x { display: none; }
.layout.nav-open .burger .x { display: block; }
.layout.nav-open .burger .bars { display: none; }
.search { position: relative; width: 100%; max-width: 31.25rem; }
.search-ico { position: absolute; left: 13px; top: 8.5px; width: 18px; height: 18px; color: var(--fg-4); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: color 70ms ease-out; pointer-events: none; }
.search input { width: 100%; height: 35px; padding: .56rem 5.75rem .56rem 2.3175rem; border: 0; border-radius: 99px; background: transparent; box-shadow: 0 0 0 1px var(--border-1); color: var(--fg-1); font-size: 14px; line-height: 14px; outline: none; transition: box-shadow 70ms ease-out, background-color 70ms ease-out; }
.search input::placeholder { color: var(--fg-4); }
.search input::-webkit-search-cancel-button { appearance: none; }
.search kbd { position: absolute; right: 12px; top: 7.5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--bg-2); box-shadow: 0 2px 4px #00000026, 0 0 0 1px var(--border-1); color: var(--fg-4); font: 14px/1 var(--font); transition: opacity 70ms ease-out; }
.search.open input { background: var(--bg-2); box-shadow: 0 0 0 1px var(--border-2); }
.search.open .search-ico { color: var(--fg-1); }
.search.open kbd { opacity: 0; }
.search-clear { position: absolute; right: 12px; top: 7.5px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--fg-3); font-size: 16px; line-height: 1; }
.search-clear:hover { color: var(--fg-2); }
.search-clear:active { transform: scale(.9); }
.search.has .search-clear { display: grid; }
.m-cancel { display: none; }
.results { position: absolute; top: calc(100% + 17px); left: 0; right: 0; max-height: calc(100vh - 10rem); overflow: hidden; display: flex; flex-direction: column; border-radius: 16px; background: var(--bg-3); box-shadow: var(--card-shadow); opacity: 0; transform: scale(.98); transform-origin: top center; pointer-events: none; transition: opacity .1s ease, transform .2s var(--ease-smooth); }
.search.open .results { opacity: 1; transform: none; pointer-events: auto; }
.rtabs { position: relative; flex: none; display: flex; margin: 10px 20px 2px; box-shadow: inset 0 -1px 0 0 var(--border-1); }
.rtabs button { position: relative; padding: 8px 8px 16px; color: var(--fg-4); font-size: 14px; line-height: 14px; font-variation-settings: "wght" 400, "opsz" 14; transition: color .2s; }
.rtabs button:first-child { padding-left: 0; }
.rtabs button.on { color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.rtabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 1px; background: #fff; }
.rtabs button:first-child.on::after { left: 0; }
.rscroll { overflow-y: auto; padding: 0 20px 12px; }
.rsec-label { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 16px 0 14px; background: var(--bg-3); color: var(--fg-3); font-size: 11px; font-weight: 600; line-height: 11px; text-transform: uppercase; }
.rsec-label .i { width: 16px; height: 16px; }
.ritem { position: relative; display: flex; align-items: center; gap: 12px; height: 64px; }
.ritem::before { content: ""; position: absolute; inset: 0 -10px; z-index: 0; border-radius: 8px; background: var(--row-hover); opacity: 0; transform: scale(.95); transition: opacity .1s, transform .1s; }
.ritem:hover::before, .ritem.kb::before { opacity: 1; transform: none; }
.ritem::after { content: ""; position: absolute; left: 56px; right: 0; bottom: 0; height: 1px; background: var(--row-hover); }
.ritem:last-child::after { display: none; }
.ritem > * { position: relative; z-index: 1; }
.ritem .clogo { width: 44px; height: 44px; }
.ritem .tile { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, var(--bg-4)); color: var(--c); font-size: 11px; }
.ritem .tile svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ritem .av { width: 44px !important; height: 44px !important; }
.ritem.small { height: 48px; }
.ritem.small::after { left: 0; }
.ritem b { display: block; font-size: 14px; font-weight: 500; line-height: 16.8px; }
.ritem small { display: block; margin-top: 8px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
.ritem em { margin-left: auto; font-style: normal; font-weight: 500; }
.rempty { padding: 48px 20px; text-align: center; }
.rempty b { font-weight: 500; }
.rempty p { margin-top: 6px; color: var(--fg-3); }
.top-right { display: flex; align-items: center; gap: 8px; flex: none; }
.net-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: default; }
.net-chip[hidden] { display: none; }
.net-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.net-chip.soon { background: rgba(255, 122, 69, .1); color: var(--primary); }
.net-chip.dev { background: rgba(233, 185, 73, .1); color: var(--data-amber); }
.net-chip.live { background: transparent; color: var(--fg-3); }
.net-chip.live i { background: var(--data-green); }

/* ================================================================== buttons */
.b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 160px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; user-select: none; overflow: hidden; transition: box-shadow .18s, background-color .18s, transform .18s; }
.b::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--veil); opacity: 0; transition: opacity .1s; }
.b:hover::before { opacity: 1; }
.b:active { transform: scale(.99); transition-duration: .1s; }
.b > * { position: relative; z-index: 2; }
.b > svg { width: 20px; height: 20px; color: var(--fg-3); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.b:hover > svg, .b.open > svg { color: var(--fg-1); }
.b.pre { padding-left: 12px; }
.b.suf { padding-right: 7px; }
.b.sq { width: 36px; padding: 0; }
.b-primary { background: #fff; color: #000; --veil: #00000029; }
.b-secondary { background: var(--bg-3); color: #fff; box-shadow: 0 2px 4px 0 #ffffff00, 0 0 0 1px #ffffff1a; --veil: #ffffff0a; }
.b-secondary.open { --veil: #ffffff0a; }
.b-secondary.open::before { opacity: 1; }
.b-tertiary { background: var(--bg-4); color: #fff; box-shadow: 0 0 0 1px #ffffff1a; --veil: #ffffff0f; }
.b[disabled] { opacity: .3; cursor: not-allowed; }
.b.wide { width: 100%; }
.b .sm { display: none; }
.nav-phone { display: none; }
.nav-net { display: flex; gap: 8px; margin: 6px 0 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 122, 69, .08); color: var(--fg-2); font-size: 13px; line-height: 1.4; }
.nav-net i { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--primary); }
button.nav-item { width: 100%; text-align: left; }
.nav-item em.soon { margin-left: auto; }
.modal:focus { outline: none; }
/* keyboard focus, in the accent, only for the keyboard */
.b:focus-visible, .nav-item:focus-visible, .opt:focus-visible, .mbtn:focus-visible, .ract:focus-visible, .wallet-row:focus-visible, .primary-wide:focus-visible, .ktabs a:focus-visible, .pcard a:focus-visible, .catc:focus-visible, .ropt:focus-visible, .preset:focus-visible, .pack:focus-visible, .help-row:focus-visible, .glink:focus-visible, .tc-x:focus-visible, .dsec-all:focus-visible, .backlink:focus-visible, a.trow:focus-visible { outline: 2px solid rgba(255, 122, 69, .7); outline-offset: 2px; }
.opt:has(input:focus-visible) { background: var(--selected); color: var(--fg-1); }
.help-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); text-align: left; transition: background-color .15s; }
.help-row:hover { background: #232222; }
.help-row b { display: block; font-size: 14px; font-weight: 500; }
.help-row small { display: block; margin-top: 3px; color: var(--fg-3); font-size: 13px; line-height: 1.35; }
.note-card > .b { flex: none; align-self: center; margin-left: auto; }
.b.wallet { padding-left: 9px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.av { flex: none; display: inline-block; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff1f; }
.sep10 { flex: none; width: 1px; height: 10px; border-radius: 2px; background: var(--border-1); }

/* ================================================================== page */
.main { width: 100%; max-width: calc(90rem + 64px); margin: 0 auto; padding: calc(var(--topbar-h) + 32px) 32px 128px; }
.page { display: flex; flex-direction: column; gap: 48px; }
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ptitle { font-size: 28px; font-weight: 500; line-height: 33.6px; }
.pdesc { margin-top: 8px; color: var(--fg-3); font-size: 14px; line-height: 18.9px; }
.pstats { display: flex; align-items: stretch; gap: 32px; }
.pstat { padding: 4px 0; white-space: nowrap; }
.phead > div:first-child { min-width: 0; }
.pstats { flex: none; }
.pstat p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; line-height: 18px; }
.pstat b { display: block; margin-top: 10px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.vsep { flex: none; width: 1px; background: var(--border-0); }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; color: var(--fg-4); cursor: help; }

/* filter toolbar (sticky under the top bar) */
.toolbar { position: sticky; z-index: 99; top: var(--topbar-h); margin: -32px -32px -16px; padding: 32px 32px 16px; background: var(--bg-1); }
.toolbar::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 2rem; background: linear-gradient(to bottom, var(--scrim)); pointer-events: none; }
.fbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chips, .fright { display: flex; align-items: center; gap: 8px; }
.chips > *, .fright > .b, .fright > .sep10 { flex-shrink: 0; }
.chip { padding: 0 16px 0 12px; }
.chip.chain { padding: 0 7px 0 12px; }
.chip.select { padding: 0 7px 0 14px; }
.chip.select .k { color: var(--fg-2); font-weight: 400; }
.cgrid { display: grid; grid-template-columns: 9.5px 9.5px; gap: 1px; width: 20px; height: 20px; }
.cgrid i { width: 9.5px; height: 9.5px; border-radius: 50%; background: var(--c, #ffffff0f); }
.fwrap { position: relative; display: inline-flex; flex: none; }
.fwrap .chip { transition: padding-right .18s, box-shadow .18s, background-color .18s, transform .18s; }
.fwrap.active .chip { padding-right: 40px; }
.fwrap.active .chip .n { font-variant-numeric: tabular-nums; }
.fclear { position: absolute; z-index: 3; top: 0; right: 0; display: grid; place-items: center; height: 36px; padding: 0 12px; color: var(--fg-3); opacity: 0; pointer-events: none; transition: opacity .18s, color .1s; }
.fclear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.fwrap.active .fclear { opacity: 1; pointer-events: auto; }
.fclear:hover { color: var(--fg-1); }
.filter { position: relative; display: flex; align-items: center; width: 251px; height: 36px; border-radius: 99px; box-shadow: 0 0 0 1px var(--border-1); transition: box-shadow 70ms, background-color 70ms; }
.filter:focus-within { box-shadow: 0 0 0 1px var(--border-2); background: var(--bg-2); }
.filter.wide { width: 100%; }
.filter svg { position: absolute; left: 15px; width: 20px; height: 20px; color: var(--fg-4); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.filter input { width: 100%; height: 100%; padding: 0 16px 0 40px; border: 0; background: none; outline: none; font-size: 14px; }
.filter input::placeholder { color: var(--fg-4); }

/* dropdown menus */
.pop { position: absolute; z-index: 2147483647; min-width: 248px; max-height: 70vh; overflow-y: auto; padding: 5px; border-radius: 12px; background: var(--bg-3); box-shadow: 0 2px 14px 0 #00000026, 0 0 0 1px var(--border-1); color: var(--fg-1); transform-origin: top left; animation: pop-in .1s ease both; }
.pop.end { transform-origin: top right; }
@keyframes pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.pop-h { display: flex; justify-content: space-between; padding: 6px 6px 4px; margin-bottom: 5px; color: var(--fg-4); font-size: 11px; font-weight: 600; line-height: 13.2px; text-transform: uppercase; font-feature-settings: "cv11"; }
.pop-h button { color: var(--fg-2); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.pop-h button:hover { color: var(--fg-1); }
.opt { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px; border-radius: 7px; color: var(--fg-2); font-size: 14px; line-height: 1.143; font-variation-settings: "wght" 400, "opsz" 14; text-align: left; cursor: pointer; transition: all 50ms; }
.opt:hover { background: var(--selected); color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg-4); }
.opt .box svg { width: 12px; height: 12px; opacity: 0; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.opt:has(input:checked) .box { background: var(--primary); box-shadow: none; }
.opt:has(input:checked) .box svg { opacity: 1; }
.opt:has(input:checked) { color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.opt .dotc { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, var(--bg-4)); color: var(--c); font-size: 9px; }
.opt .dotc svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.opt > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--fg-3); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.opt:hover > svg { stroke: var(--fg-1); }
a.opt.on .mark { opacity: 1; }
.opt .mark { margin-left: auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); opacity: 0; }
.opt .mark svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.opt.on { color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.opt.on .mark { opacity: 1; }
.opt .sw { margin-left: auto; position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: var(--fg-4); transition: background-color .1s; }
.opt .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fafafa; box-shadow: 0 2px 2px #00000026, 0 1px 4px #0000000a; transition: transform .1s; }
.opt:has(input:checked) .sw { background: var(--primary); }
.opt:has(input:checked) .sw::after { transform: translateX(85%); }
.pop hr { border: 0; height: 1px; margin: 5px 0; background: var(--border-1); }

/* ================================================================== groups and tables */
.groups { display: flex; flex-direction: column; }
.group + .group { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border-0); }
.ghead { padding-bottom: 32px; }
.gtitle { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.gico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; }
.gico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.grow { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 8px; }
.gdesc { color: var(--fg-3); font-size: 14px; line-height: 19.6px; }
.gmeta { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 14px; line-height: 18px; white-space: nowrap; }
.gmeta b { color: var(--fg-1); font-weight: 500; }
.gmeta .more { font-weight: 500; }
.stack { display: flex; }
.stack i { position: relative; display: grid; place-items: center; width: 20px; height: 20px; margin-right: -4px; overflow: hidden; border-radius: 50%; background: var(--c); color: #fff; font-size: 9px; font-style: normal; box-shadow: 0 0 0 1.5px var(--bg-1); }
.stack i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard { position: relative; padding: 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.tscroll { overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
.tscroll::-webkit-scrollbar { display: none; }
.trow { position: relative; display: grid; grid-template-columns: var(--cols); column-gap: 8px; align-items: center; min-width: var(--minw, 900px); min-height: 72px; padding: 14.4px 0; }
.tcard.back .trow { --cols: minmax(300px, 1.9fr) minmax(130px, 1fr) minmax(110px, .8fr) minmax(140px, 1fr) minmax(130px, .9fr) minmax(110px, .9fr) 72px; --minw: 1000px; }
.tcard.see { padding-bottom: 0; }
.seemore { display: flex; align-items: center; justify-content: space-between; width: calc(100% + 40px); height: 44px; margin: 0 -20px; padding: 12px 16px 12px 20px; border-radius: 0 0 10px 10px; background: var(--bg-2); box-shadow: inset 0 1px 0 var(--border-0); color: var(--fg-2); font-size: 14px; transition: background-color .1s; }
.seemore:hover { background: var(--bg-3); }
.seemore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.rank { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-4); color: var(--fg-2); font-size: 12px; font-weight: 500; }
.dash { color: var(--fg-4); }
.trow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border-0); }
.trow:last-child::after { display: none; }
.trow.thead { min-height: 0; padding: 0 0 16px; transform: translateY(-1px); }
.trow.thead::after { display: block; bottom: -2px; background: var(--row-hover); }
a.trow::before { content: ""; position: absolute; inset: 1.5px -8.5px; border-radius: 8px; background: var(--row-hover); opacity: 0; transition: opacity 30ms ease, inset 30ms ease; }
a.trow:hover::before { opacity: 1; inset: 0 -10px; }
a.trow:hover::after { opacity: 0; }
.trow > * { position: relative; z-index: 1; }
.th { display: flex; align-items: center; gap: 5.5px; color: var(--fg-3); font-size: 11px; font-weight: 500; line-height: 11px; text-transform: uppercase; user-select: none; white-space: nowrap; transition: color 70ms; }
.th.sortable { cursor: pointer; }
.th.sortable:hover, .th.sorted { color: var(--fg-1); }
.th .s { width: 7px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 70ms; }
.th.sortable:hover .s, .th.sorted .s { opacity: 1; }
.th .s path { opacity: .5; }
.th.sorted.desc .s .dn, .th.sorted.asc .s .up { opacity: 1; }
.cell { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, #0000); mask-image: linear-gradient(90deg, #000 85%, #0000); }
.cell b { font-size: 14px; font-weight: 500; line-height: 16.8px; white-space: nowrap; }
.cell small { color: var(--fg-3); font-size: 14px; line-height: 14px; white-space: nowrap; }
.cell.name { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding-right: 16px; -webkit-mask-image: none; mask-image: none; }
.cell.name > .txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.gtitle a { text-decoration: underline dotted 1.5px transparent; text-underline-offset: 5px; transition: text-decoration-color .1s; }
.gtitle a:hover { text-decoration-color: var(--fg-4); }
.lchart .mk { stroke: var(--primary); stroke-width: 1; stroke-dasharray: 2 3; }
.lchart .mk-t { fill: var(--primary); font-size: 11px; font-weight: 500; font-family: var(--font); }
.lchart .series path.dash { stroke-dasharray: 4 4; }
.cell.name b { overflow: hidden; text-overflow: ellipsis; }
.cell.cap { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
.cell.mono b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 500; }
.cell.acts { flex-direction: row; align-items: center; justify-content: flex-end; gap: 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ract { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; color: var(--fg-3); opacity: 0; transition: opacity .1s, color .18s, background .18s; }
.ract svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.ract.dots svg { fill: currentColor; stroke: none; }
.ract:hover { background: var(--selected); color: var(--fg-1); }
a.trow:hover .ract, .ract.always { opacity: 1; }
.clogo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, var(--bg-3)); box-shadow: inset 0 0 0 1px #ffffff14; color: var(--c); }
.clogo svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.clogo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ring { flex: none; }
.ring .rt { fill: none; stroke: #ffffff14; stroke-width: 2; }
.ring .rv { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; }
.tnav { position: absolute; z-index: 3; top: -10.4px; right: -10.4px; display: flex; padding-left: 2rem; background: linear-gradient(90deg, transparent, var(--bg-2) 2rem); border-radius: 0 10px 0 0; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tcard.overflow .tnav { opacity: 1; pointer-events: auto; }
.tnav button { display: grid; place-items: center; width: 24px; height: 32px; border-radius: 6px; color: var(--fg-3); }
.tnav button:disabled { opacity: .3; }
.tnav button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tnav button:hover:not(:disabled) { background: var(--selected); color: var(--fg-1); }
.empty { padding: 80px 0; text-align: center; color: var(--fg-3); }
.empty b { display: block; color: var(--fg-1); font-size: 14px; font-weight: 500; }
.empty p { margin-top: 6px; }
.emptycard { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; text-align: center; }
.emptycard b { font-size: 14px; font-weight: 500; }
.emptycard p { margin-top: 6px; color: var(--fg-3); max-width: 420px; line-height: 1.4; }
.emptycard .b { margin-top: 18px; }

/* ================================================================== detail page (aave reserve) */
.backlink { display: inline-flex; align-items: center; gap: 4px; width: max-content; margin-bottom: -24px; color: var(--fg-3); font-size: 14px; transition: color .2s var(--ease-std); }
.backlink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .1s; }
.backlink:hover { color: var(--fg-1); }
.backlink:hover svg { transform: translateX(-2px); }
.rhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rid { display: flex; align-items: center; gap: 16px; }
.rid .clogo { width: 56px; height: 56px; }
.rid h1 { font-size: 28px; font-weight: 500; line-height: 33.6px; }
.rid h1 span { color: var(--fg-3); }
.rid p { margin-top: 6px; color: var(--fg-2); font-size: 14px; line-height: 18px; }
.rid p a { color: var(--fg-1); font-weight: 500; text-decoration: underline dotted 1px; text-decoration-color: var(--fg-4); text-underline-offset: 3px; }
.sol { display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 2px 0 4px; border-radius: 50%; background: linear-gradient(135deg, #9945ff, #14f195); color: #fff; font-size: 8px; vertical-align: -3px; }
.ractions { display: flex; gap: 8px; }
.rstats { display: flex; align-items: stretch; gap: 32px; }
.rstats > div { padding-right: 32px; border-right: 1px solid var(--border-0); }
.rstats > div:last-child { border-right: 0; padding-right: 0; }
.rstats p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
.rstats b { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.rstats small { display: block; min-height: 24px; padding-top: 10px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
hr.rsep { border: 0; height: 1px; margin: 0; background: var(--border-0); }
.rsec h2 { font-size: 24px; font-weight: 500; line-height: 28.8px; }
.rsub { margin-top: 8px; color: var(--fg-3); font-size: 14px; line-height: 18.9px; }
.rsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.rsec > .tcard { margin-top: 32px; }
.aside { display: grid; grid-template-columns: 308px minmax(0, 768px); gap: 40px; min-height: 270px; margin-top: 32px; }
.sums { display: flex; flex-direction: column; }
.sum { padding: 0 0 20px; }
.sum + .sum { padding-top: 20px; box-shadow: inset 0 1px 0 var(--border-0); }
.sum p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
.sum b { display: block; margin-top: 10px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.sum small { display: block; margin-top: 8px; color: var(--fg-3); font-size: 14px; line-height: 1.35; }
.srows { display: flex; flex-direction: column; gap: 24px; padding: 20px 0 18px; box-shadow: inset 0 1px 0 var(--border-0); }
.srow { display: flex; justify-content: space-between; color: var(--fg-3); font-size: 14px; }
.srow b { color: var(--fg-1); font-weight: 500; }
.ccard { position: relative; display: flex; flex-direction: column; min-height: 359px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); overflow: hidden; }
.ranges { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 5.6px 0; }
.ranges button { padding: 4px 8px; border-radius: 99px; color: var(--fg-4); font-size: 12px; line-height: 16.2px; transition: color .2s var(--ease-std), background-color .2s var(--ease-std); }
.ranges button:hover { color: var(--fg-1); background: var(--bg-3); }
.ranges button:active { background: var(--bg-1); }
.ranges button.on { color: var(--fg-1); }
.clegend { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 5.6px; box-shadow: inset 0 1px 0 var(--border-0); }
.clegend button { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 6px; color: var(--c); font-size: 14px; transition: opacity .2s var(--ease-std), color .2s var(--ease-std); }
.clegend button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.clegend button:hover { opacity: .8; }
.clegend button.off { color: var(--fg-2); opacity: .4; }
.clegend button.off i { background: none; box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.lchart { position: relative; flex: 1; min-height: 220px; }
.lchart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lchart .gl { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.lchart .gt { fill: var(--fg-4); font-size: 12px; font-family: var(--font); }
.lchart .gx { fill: var(--fg-4); font-size: 12px; font-family: var(--font); opacity: 0; transition: opacity .2s var(--ease-std); }
.lchart.hover .gx { opacity: 1; }
.lchart .series path { stroke-width: 1.25; stroke-linecap: round; fill: none; }
.lchart .xh { stroke: var(--fg-2); stroke-width: 1.25; opacity: 0; }
.lchart .dot { opacity: 0; stroke: var(--bg-3); stroke-width: 2; }
.lchart.hover .xh, .lchart.hover .dot { opacity: 1; }
.ltip { position: fixed; z-index: 2147483647; min-width: 200px; padding: 6px 8px 4px; border-radius: 8px; background: var(--bg-3); box-shadow: 0 8px 24px #00000040, 0 0 0 1px #ffffff1a; font-size: 12px; line-height: 16.2px; pointer-events: none; opacity: 0; }
.ltip.on { opacity: 1; }
.ltip .th1 { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; margin: 0 -8px 2px; padding-inline: 8px; box-shadow: 0 1px 0 #ffffff08; }
.ltip .th1 span:last-child { color: var(--fg-2); }
.ltip .lr { display: flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--c); }
.ltip .lr i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ltip .lr b { margin-left: auto; padding-left: 16px; color: var(--fg-1); font-weight: 400; }
.params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px; margin-top: 32px; padding: 24px 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.param p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
.param b { display: block; margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 14px; }
.share { display: flex; align-items: center; gap: 10px; }
.share i { position: relative; flex: 0 1 10.25rem; height: 10px; border-radius: 100px; background: var(--bg-4); overflow: hidden; }
.share i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: max(10px, var(--p)); border-radius: 100px; background: var(--primary); }
.toggle { position: relative; display: inline-flex; height: 36px; padding: 3px; border-radius: 99px; background: var(--bg-2); box-shadow: 0 0 0 1px #ffffff1a; }
.toggle button { position: relative; z-index: 1; padding: 0 14px; font-size: 14px; opacity: .3; transition: opacity .1s ease-in-out; }
.toggle button:hover { opacity: .5; }
.toggle button.on { opacity: 1; font-weight: 500; }
.toggle .hl { position: absolute; top: 3px; bottom: 3px; border-radius: 99px; background: var(--bg-4); transition: left .2s var(--ease-smooth), width .2s var(--ease-smooth); }

/* insights */
.isec { display: flex; flex-direction: column; gap: 32px; }
.ihead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ihead h2 { font-size: 24px; font-weight: 500; line-height: 28.8px; }
.icards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.icard { display: flex; flex-direction: column; min-height: 303px; padding-top: 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); overflow: hidden; }
.icard .ih { padding: 0 20px 8px; }
.icard .ih p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; }
.icard .ih b { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.icard .ih em { color: var(--data-green); font-size: 14px; font-style: normal; font-weight: 500; }

/* ================================================================== modals */
.modal-root { position: fixed; z-index: 99999999; inset: 0; pointer-events: none; }
.scrim { position: absolute; inset: 0; background: rgba(23, 23, 23, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .15s ease; }
.modal { position: absolute; top: 50%; left: 50%; width: 360px; max-width: calc(100vw - 32px); max-height: 90vh; overflow: auto; border-radius: 16px; background: var(--bg-3); box-shadow: var(--overlay-shadow); opacity: 0; transform: translate(-50%, -50%) scale(.97); transition: opacity .15s ease, transform .15s ease; }
.modal-root.open { pointer-events: auto; }
.modal-root.open .scrim { opacity: 1; }
.modal-root.open .modal { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal.app { width: 480px; background: var(--bg-2); }
.mhead { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 18px 18px 0; }
.mhead p { text-align: center; font-size: 17px; font-weight: 600; line-height: 20px; }
.mbtn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #808080; transition: color .15s, background-color .15s; }
.mbtn:hover { color: var(--fg-1); background: var(--bg-4); }
.mbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mbody { display: flex; flex-direction: column; gap: 12px; padding: 29px 24px 24px; }
.primary-wide { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border-radius: 16px; background: var(--primary-2); color: #fff; font-size: 17px; font-weight: 600; transition: filter .15s, opacity .15s; }
.primary-wide:hover { filter: brightness(1.06); }
.primary-wide:disabled { opacity: .5; cursor: default; }
.primary-wide img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.or { margin: 4px 0; text-align: center; color: var(--fg-3); font-size: 15px; line-height: 21px; }
.wallet-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 64px; padding: 0 20px; border-radius: 16px; background: var(--bg-4); font-size: 17px; font-weight: 600; transition: background-color .15s; }
.wallet-row:hover { background: #333131; }
.wallet-row em { padding: 2px 7px; border-radius: 6px; background: rgba(102, 195, 153, .14); color: var(--data-green); font-size: 11px; font-style: normal; font-weight: 600; }
.wallet-row > i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 22.5%; color: #fff; font-style: normal; font-size: 15px; font-weight: 700; }
.minis { display: grid; grid-template-columns: 14px 14px; gap: 3px; margin-left: auto; }
.minis i { width: 14px; height: 14px; border-radius: 4px; }
.mfoot { padding: 15px 40px 18px; background: var(--bg-2); text-align: center; color: #858585; font-size: 13px; line-height: 19px; }
.mfoot a { color: #adadad; }
.addr { padding: 14px; border-radius: 12px; background: var(--bg-4); font: 13px ui-monospace, Menlo, monospace; word-break: break-all; color: var(--fg-2); }
.callout { padding: 12px 16px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); color: var(--fg-3); font-size: 14px; line-height: 1.35; }
.callout b { color: var(--fg-1); font-weight: 500; }
.amount { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); }
.amount > span { color: var(--fg-3); font-size: 13px; }
.amount div { display: flex; align-items: center; gap: 8px; }
.amount input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 36px; font-weight: 500; line-height: 1; }
.amount b { padding: 6px 10px; border-radius: 99px; background: var(--bg-4); font-size: 14px; font-weight: 500; }
.amount small { color: var(--fg-3); font-size: 13px; }
.summary { padding: 4px 16px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border-0); }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.summary div + div { box-shadow: inset 0 1px 0 var(--border-0); }
.summary span { color: var(--fg-3); }
.summary b { font-weight: 500; text-align: right; }
.fine { text-align: center; color: var(--fg-3); font-size: 12px; line-height: 16.2px; }

/* tooltip and help */
.tooltip { position: fixed; z-index: 2147483647; max-width: 250px; padding: 8px 12px; border-radius: 8px; background: #ffffff1a; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1px 12px 0 #0000004d, inset 0 0 0 1px #ffffff0f; color: var(--fg-1); font-size: 12px; line-height: 16.2px; text-align: center; text-wrap: pretty; pointer-events: none; opacity: 0; transform: scale(.96); transform-origin: bottom center; transition: opacity .1s ease, transform .1s ease; }
.tooltip.on { opacity: 1; transform: none; }
.help { position: fixed; z-index: 9000; right: 20px; bottom: 16px; }
.help > .b { color: var(--fg-3); font-size: 15px; font-weight: 500; }
.help > .b:hover { color: var(--fg-1); }

/* mobile asset cards (aave 6.7) */
.mcards { display: none; flex-direction: column; gap: 16px; }
.mcard { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.mcard-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mcard-h > a { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mcard-h b { display: block; overflow: hidden; font-weight: 500; line-height: 16.8px; text-overflow: ellipsis; white-space: nowrap; }
.mcard-h small { display: block; margin-top: 8px; color: var(--fg-3); line-height: 14px; }
.mcard-h > b { flex: none; }
.mcard hr { height: 1px; margin: 0; border: 0; background: var(--border-1); }
.mrows { display: flex; flex-direction: column; gap: 16px; }
.mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--fg-3); }
.mrow b { display: flex; align-items: center; gap: 6px; color: var(--fg-1); font-weight: 500; }
.mrow b small { color: var(--fg-3); font-weight: 400; }
.macts { display: flex; gap: 8px; }
.macts .b:first-child { flex: 1; }
.help-pop { position: absolute; bottom: calc(100% + 12px); right: 0; width: 237px; padding: 5px; border-radius: 12px; background: var(--bg-3); box-shadow: var(--overlay-shadow); opacity: 0; filter: blur(3px); pointer-events: none; transition: opacity .184s ease-out .05s, filter .184s ease-out .05s; }
.help-pop.open { opacity: 1; filter: none; pointer-events: auto; }
.help-pop a, .help-pop button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 6px; border-radius: 7px; color: var(--fg-2); font-size: 14px; line-height: 18px; text-align: left; transition: background-color .1s, color .1s; }
.help-pop a:hover, .help-pop button:hover { background: var(--row-hover); color: var(--fg-1); }
.help-pop span { margin-left: auto; color: var(--fg-4); }
.help-pop hr { border: 0; height: 1px; margin: 5px 0; background: #ffffff14; }


/* ================================================================== shared new pieces */
.g { color: var(--data-green) !important; }
.bad { color: var(--data-red) !important; }
.mute { color: var(--fg-4) !important; }
.ihelp { display: inline-flex; }
.spin { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pbar { display: block; height: 4px; border-radius: 99px; background: var(--bg-4); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.pbar.lg { height: 6px; }
.main.anim .pbar i { animation: grow 1s cubic-bezier(.65, 0, .35, 1) .1s both; }
@keyframes grow { from { width: 0; } }
.st { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.st-live { background: rgba(255, 122, 69, .12); color: var(--primary); }
.st-ok { background: rgba(102, 195, 153, .12); color: var(--data-green); }
.st-warn { background: rgba(233, 185, 73, .12); color: var(--data-amber); }
.st-bad { background: rgba(236, 90, 90, .12); color: var(--data-red); }
.st-mute { background: var(--bg-4); color: var(--fg-2); }
.btag { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px; background: rgba(16, 15, 15, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px #ffffff14; color: var(--primary); font-size: 12px; font-weight: 500; }
.btag svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
em.bt { color: var(--primary); font-style: normal; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--fg-3); font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: .02em; text-transform: uppercase; }
.eyebrow svg { width: 14px; height: 14px; fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow span { color: var(--fg-4); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.eyebrow span::before { content: "·"; margin-right: 6px; }
.ldot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.ldot.on { background: var(--data-green); }
.dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-4); }
.fine-l { display: flex; align-items: flex-start; gap: 8px; color: var(--fg-3); font-size: 13px; line-height: 18px; }
.fine-l svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--data-green); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.eico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--fg-2); }
.eico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.eacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.eacts .b { margin-top: 0; }
.emptycard { padding: 48px 24px; }
.linkbtn { color: var(--primary); font-size: 13px; font-weight: 500; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.tlink { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-1); font-weight: 500; }
.tlink:hover { color: var(--primary); }
.tlink .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.lico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--fg-2); }
.lico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
em.you { margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(255, 122, 69, .12); color: var(--primary); font-family: var(--font); font-size: 11px; font-style: normal; font-weight: 600; }
.cell .av { margin-right: -4px; }
.cell b .st { vertical-align: middle; }
.showall { align-self: center; margin-top: 16px; }
.cell.wrap { -webkit-mask-image: none; mask-image: none; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.mv .chips2 { justify-content: flex-end; }

/* skeletons while Solana answers */
.sk { display: block; flex: none; border-radius: 6px; background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%); background-size: 200% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skrows { display: flex; flex-direction: column; }
.skrow { display: grid; grid-template-columns: 44px minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 16px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--border-0); }
.skrow:last-child { box-shadow: none; }
.skrow > div { display: flex; flex-direction: column; gap: 8px; }
.sk-card .pcard-media .sk, .sk-potd .potd-media .sk, .khero-media > .sk { width: 100%; height: 100% !important; border-radius: inherit; }
.sk-card .pcard-body { gap: 12px; }

/* toasts */
.toasts { position: fixed; z-index: 2147483646; right: 20px; bottom: 64px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; width: 344px; max-width: calc(100vw - 32px); padding: 12px 10px 12px 14px; border-radius: 12px; background: var(--bg-3); box-shadow: var(--overlay-shadow); pointer-events: auto; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .3s var(--ease-smooth); }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(4px); }
.t-ico { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.t-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.t-ok .t-ico { color: var(--data-green); }
.t-err .t-ico { color: var(--data-red); }
.t-wait .t-ico { color: var(--fg-2); }
.t-txt { flex: 1; min-width: 0; padding-top: 1px; }
.t-txt b { display: block; font-size: 14px; font-weight: 500; line-height: 18px; }
.t-txt p { margin-top: 3px; color: var(--fg-3); font-size: 13px; line-height: 17px; overflow-wrap: anywhere; }
.t-txt a { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; color: var(--primary); font-size: 13px; font-weight: 500; }
.t-txt a .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.t-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--fg-4); }
.t-x:hover { background: var(--selected); color: var(--fg-1); }
.t-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ================================================================== covers and campaign cards (Kickstarter's, in aave's dress) */
.cv { position: relative; display: block; overflow: hidden; background: var(--bg-3); }
.cv-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(color-mix(in srgb, var(--c) 22%, transparent) 1px, transparent 1.4px) 0 0 / 16px 16px, radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--c) 15%, transparent), transparent 70%), var(--bg-2); color: var(--c); }
.cv-tile svg { width: clamp(30px, 8%, 64px); height: auto; aspect-ratio: 1; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.cv-tile small { color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.cv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard { display: flex; flex-direction: column; min-width: 0; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); overflow: hidden; transition: box-shadow .2s ease; }
.pcard:hover { box-shadow: 0 8px 24px #00000040, 0 0 0 1px #ffffff1f; }
.pcard-media { aspect-ratio: 16 / 9; }
.pcard-media .cv-img { transition: transform .6s var(--ease-smooth); }
.pcard:hover .pcard-media .cv-img { transform: scale(1.03); }
.pcard-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.pcard-title { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 20px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard-title:hover { text-decoration: underline; text-decoration-color: var(--fg-4); text-underline-offset: 3px; }
.pcard-by { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: 13px; }
.pcard-by .mono { font-size: 12px; }
.vtick { display: inline-flex; color: var(--data-green); }
.vtick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pcard-blurb { display: -webkit-box; min-height: 36px; overflow: hidden; color: var(--fg-2); font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard .pbar { margin-top: 6px; }
.pcard-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin-top: 2px; white-space: nowrap; }
.pcard-stats b { display: block; font-size: 14px; font-weight: 500; line-height: 17px; }
.pcard-stats span { display: block; margin-top: 2px; color: var(--fg-3); font-size: 12px; line-height: 15px; }
.pcard-stats > div:nth-child(2) { text-align: center; }
.pcard-stats > div:last-child { text-align: right; }
.mkline { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--data-green); font-weight: 500; }
.mkline svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.mkline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btag.ok { color: var(--data-green); }
.btag.ok svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 12px; }
.bonus { color: var(--data-green); font-weight: 500; }
.pcard-cat { color: var(--fg-3); transition: color .1s; }
.pcard-cat:hover { color: var(--fg-1); }

/* ================================================================== discover */
.potd { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 40px; align-items: center; }
.potd-media { aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: var(--card-shadow); }
.potd-media .cv-img { transition: transform .8s var(--ease-smooth); }
.potd-media:hover .cv-img { transform: scale(1.02); }
.potd-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.potd-title { font-size: 28px; font-weight: 500; line-height: 33.6px; letter-spacing: -.01em; text-wrap: balance; }
.potd-title a:hover { text-decoration: underline; text-decoration-color: var(--fg-4); text-underline-offset: 4px; }
.potd-blurb { color: var(--fg-2); font-size: 15px; line-height: 22px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--fg-3); font-size: 14px; }
.byline a { color: var(--fg-2); }
.byline a:hover { color: var(--fg-1); }
.byline .mono { color: var(--fg-2); }
.kfigs { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.kfig b { display: block; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.kfig b.o { color: var(--primary); }
.kfig > span { display: block; margin-top: 4px; color: var(--fg-3); font-size: 14px; line-height: 18px; }
.potd-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dsec { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dsec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dsec-h h2 { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 500; line-height: 28.8px; }
.dsec-r { display: flex; align-items: center; gap: 14px; }
.dsec-all { color: var(--fg-2); font-size: 14px; white-space: nowrap; transition: color .1s; }
.dsec-all:hover { color: var(--fg-1); }
.rnav { display: flex; gap: 4px; }
.rnav[hidden] { display: none; }
.rnav button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-3); box-shadow: 0 0 0 1px #ffffff1a; color: var(--fg-2); transition: color .1s, opacity .1s; }
.rnav button:hover:not(:disabled) { color: var(--fg-1); }
.rnav button:disabled { opacity: .3; cursor: default; }
.rnav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ctrack { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; margin: -6px; padding: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 6px; scrollbar-width: none; }
.ctrack::-webkit-scrollbar { display: none; }
.ctrack > * { scroll-snap-align: start; }
.catstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.catc { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); transition: background-color .15s; }
.catc:hover { background: var(--bg-3); }
.catc-i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.catc-i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.catc b { display: block; font-size: 14px; font-weight: 500; line-height: 17px; }
.catc small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 13px; line-height: 16px; white-space: nowrap; }
.catc:hover .catc-i svg { animation: ic-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
/* nothing to show yet: an honest hero */
.hero0 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px; border-radius: 16px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.hero0 h2 { margin-top: 18px; font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.hero0-sub { max-width: 500px; margin-top: 16px; color: var(--fg-2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.hero0-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hero0-acts .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.hero0-why { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero0-why li { display: flex; gap: 14px; padding: 18px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); }
.hero0-why b { font-size: 14px; font-weight: 500; line-height: 18px; }
.hero0-why p { margin-top: 4px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.wi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 122, 69, .1); color: var(--primary); }
.wi svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* category pages */
.catchips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: -2px; padding: 2px; }
.catchips::-webkit-scrollbar { display: none; }
.cchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--bg-3); box-shadow: 0 0 0 1px #ffffff1a; color: var(--fg-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .1s, background-color .1s; }
.cchip svg { width: 18px; height: 18px; fill: none; stroke: var(--c); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cchip:hover { color: var(--fg-1); }
.cchip.on { background: var(--bg-5); color: var(--fg-1); box-shadow: 0 0 0 1px #ffffff2e; }
.cdot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--c) 20%, var(--bg-4)); color: var(--c); }
.cdot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cgridx { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.page-category .toolbar .fbar { flex-wrap: nowrap; }
.page-category .fright { flex: none; }

/* ================================================================== campaign page */
.page-c { gap: 32px; }
.page-c .backlink { margin-bottom: -8px; }
.khead { max-width: 780px; margin: 0 auto; text-align: center; }
.khead .eyebrow { justify-content: center; margin-bottom: 12px; }
.khead h1 { font-size: 36px; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.khead p { margin-top: 12px; color: var(--fg-3); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.khead p:empty { display: none; }
.khero { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 40px; align-items: start; }
.khero-media { aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: var(--card-shadow); }
.kpanel { display: flex; flex-direction: column; gap: 22px; padding-top: 2px; }
.kstack { display: flex; flex-direction: column; gap: 22px; }
.kpanel .kfig b { font-size: 28px; line-height: 32px; }
.kpanel .kfig b.o { font-size: 32px; line-height: 36px; }
.kpanel .kfig b .st { height: 26px; padding: 0 10px; font-size: 14px; }
.kpanel .primary-wide { margin-top: 2px; }
.kpanel .primary-wide + .primary-wide, .kpanel .primary-wide + .b.wide { margin-top: -12px; }
.kacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: -10px; }
.kacts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.kacts .b { padding: 0 10px; }
.kacts .b > svg { width: 18px; height: 18px; }
.aon { color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.aon b { color: var(--fg-1); font-weight: 500; }
.knote { color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.kmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: -14px; color: var(--fg-2); font-size: 14px; }
.kby { display: inline-flex; align-items: center; gap: 8px; }
.kby a.mono { color: var(--fg-1); text-decoration: underline dotted 1px; text-decoration-color: var(--fg-4); text-underline-offset: 3px; }
.kmeta-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kmeta-i svg { width: 16px; height: 16px; fill: none; stroke: var(--fg-3); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
a.kmeta-i { transition: color .1s; }
a.kmeta-i:hover { color: var(--fg-1); }
.lvl { padding: 2px 6px; border-radius: 5px; background: var(--bg-4); color: var(--fg-2); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; cursor: help; }
.vtag { display: inline-flex; align-items: center; gap: 5px; color: var(--data-green); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: help; }
.vtag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.vtag.no { color: var(--data-amber); }
/* your pledge and the creator's tools */
.kcard { padding: 20px 24px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.kcard.mine { box-shadow: 0 2px 4px #00000026, 0 0 0 1px rgba(255, 122, 69, .38); }
.kcard-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.kcard-h h3 { margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 22px; }
.kcard-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kcard-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 20px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--border-0); }
.kcard-figs p { display: flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: 14px; line-height: 14px; }
.kcard-figs b { display: block; margin-top: 10px; font-size: 20px; font-weight: 500; line-height: 24px; }
.kcard-figs small { display: block; margin-top: 6px; color: var(--fg-3); font-size: 13px; line-height: 1.35; }
.kcard.mine .eyebrow svg { stroke: var(--primary); }
.tlist { margin-top: 8px; }
.titem { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; box-shadow: inset 0 1px 0 var(--border-0); }
.titem:first-child { box-shadow: none; }
.titem b { font-size: 14px; font-weight: 500; }
.titem p { max-width: 640px; margin-top: 4px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.titem .b { flex: none; }
/* tabs, like aave's search tabs, sticky under the top bar */
.kwrap { display: flex; flex-direction: column; }
.ktabs { position: sticky; z-index: 90; top: var(--topbar-h); display: flex; gap: 4px; margin: 0 -32px; padding: 0 32px; overflow-x: auto; background: var(--bg-1); box-shadow: inset 0 -1px 0 var(--border-1); scrollbar-width: none; }
.ktabs::-webkit-scrollbar { display: none; }
.ktabs a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 18px 12px 16px; color: var(--fg-3); font-size: 14px; line-height: 14px; font-variation-settings: "wght" 400, "opsz" 14; white-space: nowrap; transition: color .15s; }
.ktabs a:first-child { padding-left: 0; }
.ktabs a:hover { color: var(--fg-1); }
.ktabs a.on { color: var(--fg-1); font-variation-settings: "wght" 500, "opsz" 16; }
.ktabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }
.ktabs a:first-child.on::after { left: 0; }
.ktabs a span { padding: 2px 6px; border-radius: 99px; background: var(--bg-4); color: var(--fg-2); font-size: 11px; font-weight: 500; line-height: 13px; }
.kbody { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; }
.kbody > .rsep { margin: 16px 0; }
.kcols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.kmain { min-width: 0; }
.ksec { font-size: 20px; font-weight: 500; line-height: 24px; }
.kmain > .ksec { margin-bottom: 18px; }
.kmain > .ksec:not(:first-child) { margin-top: 48px; }
.kside .ksec { margin-bottom: 18px; }
.ksec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.kfine { color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.kfine a { color: var(--fg-2); }
.kfine a:hover { color: var(--fg-1); }
.kfine .ext { display: inline; width: 11px; height: 11px; margin-left: 3px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.rcards + .kfine { margin-top: 12px; }
.kempty { padding: 24px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.kempty b { font-size: 14px; font-weight: 500; }
.kempty p { margin-top: 6px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.story { max-width: 700px; color: var(--fg-2); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
.story > * + * { margin-top: 16px; }
.story h3 { margin-top: 32px; color: var(--fg-1); font-size: 19px; font-weight: 500; line-height: 1.3; }
.story ul { padding-left: 20px; }
.story li + li { margin-top: 6px; }
.story b { color: var(--fg-1); font-weight: 500; }
.story figure { margin: 24px 0; }
.story img { display: block; width: 100%; border-radius: 10px; }
.faqlabel { margin: 20px 0 10px; color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.faqlabel:first-of-type { margin-top: 0; }
.faq { border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.faq + .faq { margin-top: 8px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-size: 14px; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-smooth); }
.faq[open] .chev { transform: rotate(180deg); }
.faq p { padding: 0 20px 18px; color: var(--fg-3); font-size: 14px; line-height: 1.55; }
/* reward tiers */
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rcards.col { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rcard { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); transition: box-shadow .15s; }
.rcard:hover { box-shadow: 0 2px 4px #00000026, 0 0 0 1px #ffffff26; }
.rprice { color: var(--fg-3); font-size: 14px; }
.rprice b { color: var(--fg-1); font-size: 20px; font-weight: 500; }
.rcard h3 { font-size: 16px; font-weight: 500; line-height: 21px; }
.rdesc { color: var(--fg-2); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.rmeta { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--border-0); }
.rmeta div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.rmeta dt { color: var(--fg-3); }
.rmeta dd { margin: 0; font-weight: 500; text-align: right; }
.rcard > .b { margin-top: auto; }
.rcard.gone { opacity: .55; }
/* updates and numbers */
.ups { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.up { padding: 24px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.up-meta { display: flex; gap: 12px; color: var(--fg-3); font-size: 13px; }
.up h3 { margin: 10px 0 14px; font-size: 18px; font-weight: 500; }
.up .story { font-size: 15px; }
.lstats { padding: 4px 0; }
.page-c .rsec h2 { font-size: 22px; }

/* ================================================================== launch */
.snote { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 122, 69, .06); box-shadow: inset 0 0 0 1px rgba(255, 122, 69, .28); }
.snote > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--primary); stroke-width: 1.35; stroke-linejoin: round; }
.snote p { flex: 1; color: var(--fg-2); font-size: 14px; line-height: 1.45; }
.snote b { color: var(--fg-1); font-weight: 500; }
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.lform { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lsec { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.lsec-h h2 { font-size: 18px; font-weight: 500; line-height: 22px; }
.lsec-h p { margin-top: 6px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.lrow { display: flex; gap: 16px; }
.field { position: relative; display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.field.sm { flex: 0 0 150px; }
.field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; }
.field > span em { color: var(--fg-4); font-size: 13px; font-style: normal; font-weight: 400; }
.field > span em.cnt { margin-left: auto; font-variant-numeric: tabular-nums; }
.field input, .field select, .field textarea { width: 100%; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); color: var(--fg-1); font-size: 14px; outline: none; transition: box-shadow 70ms; }
.field textarea { height: auto; padding: 11px 14px; line-height: 1.5; resize: vertical; }
.field select { appearance: none; padding-right: 36px; background: var(--bg-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m7 8 3-3 3 3M7 12l3 3 3-3' fill='none' stroke='%238f8e8e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 1px var(--border-2), 0 0 0 4px #ffffff08; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-4); }
.field input:disabled, .field textarea:disabled, .field select:disabled { color: var(--fg-2); background: var(--bg-2); box-shadow: 0 0 0 1px var(--border-0); cursor: not-allowed; }
.field input[type=month] { color-scheme: dark; }
.field.bad input, .field.bad select, .field.bad textarea { box-shadow: 0 0 0 1px rgba(236, 90, 90, .65); }
.hint { color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.ferr { color: var(--data-red); font-size: 13px; line-height: 1.4; }
.ferr:empty { display: none; }
.suffix { position: relative; display: block; }
.suffix input { padding-right: 64px; }
.suffix b { position: absolute; top: 50%; right: 14px; color: var(--fg-3); font-size: 14px; font-weight: 500; transform: translateY(-50%); pointer-events: none; }
.drop { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--border-1); cursor: pointer; transition: box-shadow .15s, background-color .15s; }
.drop:hover, .drop:focus-visible { background: #141313; box-shadow: inset 0 0 0 1px var(--border-2); outline: none; }
.drop.over { box-shadow: inset 0 0 0 1.5px var(--primary); }
.drop:not(.has) { aspect-ratio: auto; height: 200px; }
.drop-in { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; color: var(--fg-3); text-align: center; }
.drop-in svg { width: 30px; height: 30px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.drop-in b { color: var(--fg-1); font-size: 14px; font-weight: 500; }
.drop-in small { font-size: 13px; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-acts { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.drop-acts .b { background: rgba(31, 30, 30, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.redit { display: flex; flex-direction: column; gap: 12px; }
.ritem-e { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 10px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--border-0); }
.ritem-e .field input, .ritem-e .field textarea { background: var(--bg-2); }
.ritem-h { display: flex; align-items: center; justify-content: space-between; }
.ritem-h b { color: var(--fg-3); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.ritem-h .mbtn { width: 28px; height: 28px; }
.ritem-h .mbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.addrow { align-self: flex-start; }
.lside { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.lsec.lgo { gap: 16px; }
.lsec.lgo .ul-row { padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--border-0); }
.lsec.lgo .ul-row .glink { display: inline-flex; margin-top: 8px; }
.mcta { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; margin: 0 -24px -24px; padding: 14px 24px 24px; background: linear-gradient(to bottom, transparent, var(--bg-2) 14px); }
.lcard { padding: 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); transition: opacity .15s; }
.lcard.busy { opacity: .6; }
.qt { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--fg-4); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.lcard .sum b { font-size: 22px; line-height: 26px; }
.lcard .srows { padding-bottom: 0; }
.srows.tight { gap: 14px; margin-top: 16px; padding-bottom: 0; }
.terms { max-height: 196px; margin: 0; padding: 12px; overflow: auto; border-radius: 8px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--border-0); color: var(--fg-2); font: 12px/1.55 ui-monospace, "SF Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.hash { margin-top: 10px; color: var(--fg-4); font-size: 12px; }
.hash .mono { color: var(--fg-3); font-size: 12px; }
.lerrs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(236, 90, 90, .08); list-style: none; color: #f08c8c; font-size: 13px; line-height: 1.4; }
.lerrs[hidden] { display: none; }
.lerrs li { display: flex; gap: 8px; }
.lerrs svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lside > .primary-wide { margin-top: 0; }
.qerr, .qnote { margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.qerr { background: rgba(236, 90, 90, .08); color: #f08c8c; }
.qerr a { color: inherit; text-decoration: underline; }
.qnote { background: var(--bg-3); color: var(--fg-3); }
.tcheck { display: flex; gap: 12px; padding: 14px; border-radius: 10px; background: var(--bg-3); }
.tcheck > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--fg-3); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.tcheck.ok > svg { stroke: var(--data-green); }
.tcheck.no > svg { stroke: var(--data-amber); }
.tcheck b { font-size: 14px; font-weight: 500; }
.tcheck p { margin-top: 4px; color: var(--fg-3); font-size: 13px; line-height: 1.45; }

/* ================================================================== dashboard, credits, $BACK, insights */
.ccredits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.cc-main > p { color: var(--fg-3); font-size: 14px; }
.cc-bal { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.cc-bal b { font-size: 32px; font-weight: 500; line-height: 36px; }
.cc-bal .spin { width: 22px; height: 22px; }
.cc-bal > span { color: var(--fg-3); font-size: 14px; }
.cc-bal .linkbtn { font-size: 14px; }
.cc-main small { display: block; margin-top: 8px; color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.cc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cc-acts .ext, .titem .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.cc-hist { display: flex; flex-direction: column; gap: 14px; padding-left: 32px; box-shadow: inset 1px 0 0 var(--border-0); }
.cc-hist .qt { margin-bottom: 2px; }
.cc-hist .srow span { display: flex; flex-direction: column; gap: 3px; }
.cc-hist .srow small { color: var(--fg-4); font-size: 12px; }
.cc-hist > p { color: var(--fg-3); font-size: 14px; line-height: 1.45; }
.note-card { display: flex; gap: 14px; padding: 20px; border-radius: 10px; background: rgba(255, 122, 69, .06); box-shadow: inset 0 0 0 1px rgba(255, 122, 69, .26); }
.note-card.ok { background: rgba(102, 195, 153, .06); box-shadow: inset 0 0 0 1px rgba(102, 195, 153, .26); }
.note-card > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--primary); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.note-card.ok > svg { stroke: var(--data-green); }
.note-card b { font-size: 15px; font-weight: 500; }
.note-card p { margin-top: 6px; color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.perk { padding: 20px; border-radius: 10px; background: var(--bg-2); box-shadow: var(--card-shadow); }
.perk .wi { margin-bottom: 16px; }
.perk b { font-size: 15px; font-weight: 500; line-height: 1.3; }
.perk p { margin-top: 6px; color: var(--fg-3); font-size: 14px; line-height: 1.5; }
.rsec-b { margin-top: 32px; }
.hbars { display: flex; flex-direction: column; gap: 16px; padding: 12px 20px 22px; }
.hbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px; align-items: center; gap: 14px; font-size: 14px; }
.hb-l { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-2); }
.hb-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-l svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--c); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.hb-t { height: 8px; overflow: hidden; border-radius: 99px; background: var(--bg-4); }
.hb-t i { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.main.anim .hb-t i { animation: grow 1s cubic-bezier(.65, 0, .35, 1) .1s both; }
.hbar > b { font-weight: 500; text-align: right; }
.icard { min-height: 0; }

/* dtable cells on phones */
.mrow .mv { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; text-align: right; }
.mrow .mv b { display: flex; align-items: center; gap: 6px; color: var(--fg-1); font-weight: 500; }
.mrow .mv small { color: var(--fg-3); font-size: 13px; }
.mcard-h .mh { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mcard-h .txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcard-h .txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-h .txt small { margin-top: 0; }
.mcard-h .rank { display: none; }
.macts .b { flex: 1; }

/* ================================================================== modal contents */
.modal.app .mbody { gap: 14px; }
.mlead { color: var(--fg-2); font-size: 14px; line-height: 1.5; }
.mlead b { color: var(--fg-1); font-weight: 500; }
.mlabel { margin: 2px 0 -4px; color: var(--fg-3); font-size: 13px; }
.merr { padding: 10px 12px; border-radius: 10px; background: rgba(236, 90, 90, .1); color: #f08c8c; font-size: 13px; line-height: 1.45; }
.merr[hidden] { display: none; }
.merr.soft { background: rgba(233, 185, 73, .1); color: var(--data-amber); }
.warnbox { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(233, 185, 73, .1); color: var(--data-amber); font-size: 13px; line-height: 1.45; }
.warnbox svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mcamp { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); }
.mcamp > div { min-width: 0; }
.mcamp b { display: block; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mcamp small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 13px; }
.balrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.balrow a { color: var(--primary); }
.balrow.big { padding: 12px 16px; border-radius: 12px; background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); color: var(--fg-3); font-size: 14px; }
.balrow.big b { color: var(--fg-1); font-size: 16px; font-weight: 500; }
.balrow.big .spin { width: 16px; height: 16px; }
.amount .balrow { flex-wrap: wrap; gap: 4px 12px; color: var(--fg-3); font-size: 13px; }
.amount .balrow > span { white-space: nowrap; }
.amount.custom[hidden] { display: none; }
.summary b.g, .summary b .g { color: var(--data-green); }
.summary span { display: flex; align-items: center; gap: 4px; }
.rpick { display: flex; flex-direction: column; gap: 6px; max-height: 248px; margin: 0 -4px; padding: 0 4px; overflow-y: auto; }
.ropt { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); text-align: left; transition: box-shadow .15s, background-color .15s; }
.ropt:hover:not(:disabled) { background: #232222; }
.ropt.on { box-shadow: inset 0 0 0 1.5px var(--primary); }
.ropt:disabled { opacity: .45; cursor: not-allowed; }
.rdot { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--fg-4); transition: box-shadow .15s; }
.ropt.on .rdot { box-shadow: inset 0 0 0 5px var(--primary); }
.rtxt { flex: 1; min-width: 0; }
.rtxt b { display: block; font-size: 14px; font-weight: 500; line-height: 18px; }
.rtxt small { display: -webkit-box; margin-top: 3px; overflow: hidden; color: var(--fg-3); font-size: 13px; line-height: 17px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ropt em { flex: none; color: var(--fg-1); font-size: 14px; font-style: normal; font-weight: 500; }
.presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.preset, .pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); transition: box-shadow .15s, background-color .15s; }
.preset:hover, .pack:hover { background: #232222; }
.preset.on, .pack.on { box-shadow: inset 0 0 0 1.5px var(--primary); }
.preset b { font-size: 16px; font-weight: 600; }
.preset small { color: var(--fg-3); font-size: 13px; }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pack { position: relative; padding: 16px 8px 14px; }
.pack b { font-size: 22px; font-weight: 600; line-height: 26px; }
.pack small { margin-top: -4px; color: var(--fg-3); font-size: 12px; }
.pack span { margin-top: 4px; color: var(--fg-1); font-size: 14px; font-weight: 500; }
.pack em { position: absolute; top: 8px; right: 8px; padding: 2px 6px; border-radius: 6px; background: rgba(102, 195, 153, .14); color: var(--data-green); font-size: 11px; font-style: normal; font-weight: 600; }
.succ { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 6px; text-align: center; }
.succ-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(102, 195, 153, .12); color: var(--data-green); animation: pop-in .3s var(--ease-smooth) both; }
.succ-i svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.succ h3 { font-size: 20px; font-weight: 600; line-height: 24px; }
.succ p { max-width: 360px; color: var(--fg-3); font-size: 14px; line-height: 1.5; }
.linkbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--bg-1); box-shadow: 0 0 0 1px var(--border-1); }
.linkbox .mono { flex: 1; min-width: 0; overflow: hidden; color: var(--fg-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.linkbox .mbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fine-link { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--fg-3); font-size: 13px; transition: color .1s; }
.fine-link:hover { color: var(--fg-1); }
.fine-link .ext { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
a.primary-wide { text-decoration: none; }
.primary-wide .spin { width: 20px; height: 20px; }
.primary-wide:disabled { cursor: not-allowed; }
.steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.step { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--border-0); transition: box-shadow .2s; }
.step.run { box-shadow: inset 0 0 0 1px rgba(255, 122, 69, .45); }
.step-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-5); color: var(--fg-1); font-size: 12px; font-weight: 600; }
.step.run .step-n { background: none; color: var(--primary); }
.step.run .step-n .spin { width: 22px; height: 22px; }
.step.done .step-n { background: var(--data-green); color: #0e2219; }
.step.done .step-n svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.step.err .step-n { background: var(--data-red); }
.step b { font-size: 14px; font-weight: 500; line-height: 18px; }
.step p { margin-top: 3px; color: var(--fg-3); font-size: 13px; line-height: 1.45; }
.step.done p { color: var(--fg-4); }
.modal .field input, .modal .field textarea { background: var(--bg-1); }
.wallet-row small { color: var(--fg-4); font-size: 13px; font-weight: 500; }
.wallet-row > img, .wallet-row > i { order: -1; width: 32px; height: 32px; margin-left: 0; border-radius: 22.5%; }
.wallet-row > i { background: #393737; }
.wallet-row em { margin-left: auto; }
/* Google and X, then every other wallet as a compact grid with its official logo */
.social-row { display: grid; gap: 8px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 12px; border-radius: 16px; background: #fff; color: #0f0f10; font-size: 15px; font-weight: 600; white-space: nowrap; transition: filter .15s; }
.social-btn:hover { filter: brightness(.94); }
.social-btn:disabled { opacity: .7; cursor: progress; }
.social-btn > img { width: 20px; height: 20px; }
.social-btn[data-social="twitter"] { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.social-btn[data-social="twitter"]:hover { filter: brightness(1.25); }
.social-btn .spin { width: 18px; height: 18px; }
.wgrid-h { margin: 6px 0 -2px; color: var(--fg-3); font-size: 13px; font-weight: 500; }
.wgrid-h:empty { display: none; }
.wallet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wallet-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 10px; border-radius: 16px; background: var(--bg-4); font-size: 13px; font-weight: 600; text-align: center; transition: background-color .15s; }
.wallet-tile:hover { background: #333131; }
.wallet-tile > img, .wallet-tile > i { width: 36px; height: 36px; border-radius: 22.5%; }
.wallet-tile > i { display: grid; place-items: center; background: #393737; color: #fff; font-style: normal; font-weight: 700; }
.wallet-tile > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-tile small { color: var(--fg-4); font-size: 11px; font-weight: 500; }
.wallet-tile:focus-visible, .social-btn:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
.wallet-row:disabled { opacity: .7; cursor: progress; }
.primary-wide > span { display: inline-flex; }

/* wallet menu (aave's account dropdown) */
.pop.wm { width: 300px; padding: 8px; }
.wm-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 10px 6px; }
.wm-head > div { flex: 1; min-width: 0; }
.wm-head b { display: block; font-size: 14px; font-weight: 500; }
.wm-head small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 12px; }
.wm-head .mbtn { width: 30px; height: 30px; }
.wm-head .mbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.wm-rows { padding: 2px 12px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--border-0); }
.wm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 14px; }
.wm-row + .wm-row { box-shadow: inset 0 1px 0 var(--border-0); }
.wm-row span { display: flex; align-items: center; gap: 8px; color: var(--fg-3); white-space: nowrap; }
.wm-row > b { white-space: nowrap; text-align: right; }
.wm-row svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.wm-row b { font-weight: 500; }
.wm-row b .spin { width: 16px; height: 16px; }
.wm-pend { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(233, 185, 73, .1); color: var(--data-amber); font-size: 13px; text-align: left; }
.wm-pend svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wm-acts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.pop.iconic .opt { gap: 10px; }


/* ================================================================== making it happen (funded campaigns at work) */
.kcard.making { box-shadow: 0 2px 4px #00000026, 0 0 0 1px rgba(102, 195, 153, .3); }
.kcard.making .eyebrow svg { stroke: var(--data-green); }
.mtrack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; }
.mtrack li { position: relative; padding: 18px 12px 0 0; }
.mtrack li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--bg-4); }
.mtrack li.on::before { background: var(--data-green); }
.mtrack li i { position: absolute; top: 0; left: 0; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-4); box-shadow: 0 0 0 3px var(--bg-2); }
.mtrack li.on i { background: var(--data-green); }
.mtrack li.next i { background: var(--bg-2); box-shadow: 0 0 0 3px var(--bg-2), inset 0 0 0 2px var(--data-green); }
.mtrack b { display: block; font-size: 14px; font-weight: 500; line-height: 18px; }
.mtrack small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 13px; line-height: 1.35; }
.mtrack li:not(.on):not(.next) b { color: var(--fg-2); }
.mfeed { display: flex; flex-direction: column; margin-top: 20px; padding-top: 6px; box-shadow: inset 0 1px 0 var(--border-0); }
.mitem { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.mitem + .mitem { box-shadow: inset 0 1px 0 var(--border-0); }
.mitem > div { flex: 1; min-width: 0; }
.mitem b { display: block; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mitem small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 13px; }
.mfeed > .kfine { padding: 14px 0 4px; }
.tbar { display: block; max-width: 280px; margin-top: 10px; }
.up-meta .st { gap: 5px; height: 20px; padding: 0 7px; font-size: 11px; }
.up-meta .st svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* what unlocks at 100% */
.lcard.unlock { box-shadow: 0 2px 4px #00000026, 0 0 0 1px rgba(102, 195, 153, .22); }
.ul-row { display: flex; gap: 14px; }
.ul-row .wi { background: rgba(102, 195, 153, .1); color: var(--data-green); }
.ul-row b { font-size: 14px; font-weight: 500; }
.ul-row p { margin-top: 4px; color: var(--fg-3); font-size: 13px; line-height: 1.5; }
.lcard.unlock .glink { margin-top: 12px; }
.lhow { display: flex; margin: -32px 0 -16px; }
.ccredits.locked { grid-template-columns: minmax(0, 1fr); }
.ccredits.locked .cc-bal b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-4); }
.ccredits.locked .cc-bal b svg { width: 18px; height: 18px; fill: none; stroke: var(--fg-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ccredits.locked .cc-bal > span { color: var(--fg-1); font-size: 16px; font-weight: 500; }
.creatorcta .cc-bal b { background: rgba(255, 122, 69, .1) !important; }
.creatorcta .cc-bal b svg { stroke: var(--primary) !important; }
.grow > .filter { flex: none; }
.ccredits.locked small { max-width: 620px; }
.cc-acts .glink { margin-left: 4px; }
.succ-i.lock { background: var(--bg-4); color: var(--fg-2); }

/* tutorials (js/guide.js opens them) */
.glink { display: inline-flex; align-items: center; gap: 6px; width: max-content; color: var(--fg-3); font-size: 13px; font-weight: 500; transition: color .1s; }
.glink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.glink:hover { color: var(--fg-1); }
.mbody > .glink { align-self: center; }
.hp-h { padding: 8px 6px 4px; color: var(--fg-4); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.help-pop span { font-size: 12px; }
em.soon { margin-left: auto; padding: 1px 6px; border-radius: 5px; background: var(--bg-4); color: var(--fg-3); font-size: 11px; font-style: normal; font-weight: 600; }
.help-pop { width: 252px; }
.tourbar { display: flex; align-items: center; gap: 12px; margin-bottom: -24px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--bg-2); box-shadow: var(--card-shadow); animation: fade .3s ease both; }
.tourbar img { flex: none; width: 28px; height: 28px; }
.tourbar p { flex: 1; min-width: 0; color: var(--fg-3); font-size: 14px; line-height: 1.35; }
.tourbar p b { color: var(--fg-1); font-weight: 500; }
.tourbar .b { flex: none; height: 32px; padding: 0 14px; }
.tc-x { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--fg-4); }
.tc-x:hover { background: var(--selected); color: var(--fg-1); }
.tc-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.promo.locked .promo-art::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='9' width='10' height='7' rx='1.6' fill='none' stroke='%23bcbbbb' stroke-width='1.6'/%3E%3Cpath d='M7.3 9V7.2a2.7 2.7 0 0 1 5.4 0V9' fill='none' stroke='%23bcbbbb' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / 10px; box-shadow: 0 0 0 1.5px var(--bg-3); }

/* ================================================================== responsive (aave breakpoints) */
@media (max-width: 1300px) { .fbar { flex-wrap: wrap; } .fright { flex: 1; justify-content: flex-end; } }
@media (max-width: 1140px) { .rstats { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 24px; } .rstats > div:nth-child(3n) { border-right: 0; } }
@media (max-width: 1100px) { .aside { grid-template-columns: 1fr; } .icards { grid-template-columns: 1fr; } .launch { grid-template-columns: 1fr; } .params { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1010px) { .toolbar { position: static; margin: 0; padding: 0; } .toolbar::after { display: none; } .fbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .chips { min-width: 0; } .chips { overflow-x: auto; scrollbar-width: none; margin: -2px -16px; padding: 2px 16px; } .chips::-webkit-scrollbar { display: none; } .chips:empty { display: none; } .fbar .fright { order: -1; justify-content: flex-start; } .fright .filter { flex: 1; width: auto; } .fright .filter input { font-size: 16px; } .fright .select, .fright .sep10 { display: none; } .phead, .rhead { flex-wrap: wrap; } }
@media (max-width: 859px) {
  :root { --topbar-h: 3.5rem; }
  .layout, .layout[data-sidebar-open=true] { padding-left: 0; }
  .side, .layout[data-sidebar-open=true] .side { top: 56px; width: 100%; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transition: opacity .1s cubic-bezier(0, .65, .55, 1); }
  .side::after { display: none; }
  .side .side-head, .side .side-foot { display: none; }
  .layout.nav-open .side { opacity: 1; pointer-events: auto; transition: opacity .3s cubic-bezier(.175, .885, .32, 1.1); }
  .side-nav { padding: 0; }
  .nav-item { height: 40px; gap: 10px; }
  .nav-label { padding: .3375rem .625rem; margin-top: 8px; }
  .layout[data-sidebar-open=false] .nav-label { color: var(--fg-3); }
  .layout[data-sidebar-open=false] .nav-label::after { opacity: 0; }
  .layout[data-sidebar-open=false] .nav-item span, .layout[data-sidebar-open=false] .nav-item .ext { opacity: 1; }
  .topbar, .layout[data-sidebar-open=true] .topbar { left: 0; }
  .topbar-in { padding: 0 16px; gap: 8px; }
  .topbar .top-logo { display: flex; align-items: center; gap: 4px; margin-right: auto; }
  .top-logo img { width: 20px; height: 20px; }
  .top-logo b { font-family: "Onest", var(--font); font-size: 17px; font-weight: 650; letter-spacing: -.06em; }
  .layout[data-detail=true] .topbar .top-logo { display: none; }
  .layout[data-detail=true] .topbar .m-back { display: inline-flex; margin-right: auto; }
  .topbar .m-search, .topbar .burger { display: inline-flex; }
  .search { display: none; }
  .search.open { display: block; position: fixed; inset: 0 0 auto; z-index: 214748364; height: 56px; max-width: none; padding: 10px 84px 10px 16px; background: var(--bg-1); }
  .search.open input { font-size: 16px; }
  .search.open .search-ico { left: 29px; top: 19px; }
  .search.open kbd { display: none; }
  .search.open .search-clear { right: 96px; top: 18px; }
  .search.open .m-cancel { display: block; position: absolute; right: 16px; top: 10px; height: 36px; color: var(--fg-2); font-size: 14px; font-weight: 500; }
  .search.open .results { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; max-height: none; border-radius: 0; background: var(--bg-1); box-shadow: none; transform: none; }
  .search.open .rtabs { margin-inline: 16px; }
  .search.open .rscroll { flex: 1; padding-inline: 16px; }
  .search.open .rsec-label { background: var(--bg-1); }
  .net-chip { display: none; }
  .b .lg { display: none; }
  .b .sm { display: inline; }
  .help { display: none; }
  .nav-phone { display: flex; }
  .pop { position: fixed !important; top: auto !important; left: 16px !important; right: 16px; bottom: 16px; min-width: 0; max-height: 70dvh; border-radius: 16px; transform-origin: bottom center; animation: sheet-in .3s ease both; }
  @keyframes sheet-in { from { transform: translateY(110%); } to { transform: none; } }
  .main { padding: calc(var(--topbar-h) + 20px) 16px 128px; }
  .page { gap: 28px; }
  .grow { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rstats { grid-template-columns: repeat(2, 1fr); }
  .rstats > div { border-right: 0; padding-right: 0; }
  .rhead { flex-direction: column; align-items: flex-start; }
  .ractions { width: 100%; }
  .ractions .b:not(.sq) { flex: 1; }
  .backlink { display: none; }
}
@media (max-width: 550px) {
  .ptitle, .rid h1 { font-size: 24px; }
  .gtitle, .rsec h2, .ihead h2 { font-size: 19px; }
  .pstats, .gmeta { display: none; }
  .tcard { padding: 8px 16px; }
  .tcard.back { display: none; }
  .mcards { display: flex; }
  .ghead { padding-bottom: 20px; }
  .group + .group { margin-top: 32px; padding-top: 32px; }
  .seemore { width: calc(100% + 32px); margin: 0 -16px; }
  .params { grid-template-columns: 1fr; }
  .modal, .modal.app { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; max-width: none; transform: translateY(110%); transition: transform .3s ease, opacity .2s; }
  .modal-root.open .modal { transform: none; }
}


/* new pages at aave's breakpoints */
@media (max-width: 1300px) { .ctrack { grid-auto-columns: calc((100% - 48px) / 3); } .catstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); } .catc { padding: 12px; gap: 10px; } .catc-i { width: 34px; height: 34px; } .page-category .toolbar .fbar { flex-wrap: wrap; } }
@media (max-width: 1100px) {
  .potd, .khero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kcols { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .launch { grid-template-columns: minmax(0, 1fr); }
  .lside { position: static; }
  .hero0 { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcard-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccredits { grid-template-columns: minmax(0, 1fr); }
  .cc-hist { padding: 24px 0 0; box-shadow: inset 0 1px 0 var(--border-0); }
}
@media (max-height: 760px) { .lside { position: static; } }
@media (max-width: 1100px) {
  .launch { display: flex; flex-direction: column; gap: 16px; }
  .lform { display: contents; }
  .lside { order: 1; }
  .lsec.lgo { order: 2; }
}
@media (max-width: 1010px) { .page-category .toolbar .fbar { flex-direction: column; align-items: stretch; } .page-category .fright { order: 0; justify-content: flex-start; } .page-category .fright .select { display: inline-flex; } }
@media (max-width: 859px) {
  .ctrack { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  .ktabs { margin: 0 -16px; padding: 0 16px; }
  .khead h1 { font-size: 28px; }
  .khead p { font-size: 15px; }
  .hero0 { padding: 28px 22px; }
  .hero0 h2 { font-size: 32px; }
  .toasts { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
  .toast { width: auto; }
  .titem { flex-direction: column; align-items: flex-start; gap: 12px; }
  .snote { flex-wrap: wrap; }
  .kmeta { margin-top: -8px; gap: 10px 16px; }
  .potd-title { font-size: 24px; line-height: 29px; }
}
@media (max-width: 550px) {
  .tcard.dt { display: none; }
  .ctrack { grid-auto-columns: 82%; }
  .catstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .catc { padding: 12px; }
  .catc small { white-space: normal; }
  .kfigs { gap: 14px 24px; }
  .kfig b { font-size: 20px; line-height: 24px; }
  .kpanel { gap: 18px; }
  .kpanel .kfig b { font-size: 24px; line-height: 28px; }
  .kpanel .kfig b.o { font-size: 28px; line-height: 32px; }
  .khead h1 { font-size: 26px; }
  .kcard { padding: 16px; }
  .kcard-figs { gap: 18px; }
  .kcard-acts { width: 100%; }
  .kcard-acts .b { flex: 1; }
  .lrow { flex-direction: column; }
  .field.sm { flex: 1; }
  .lsec { padding: 18px 16px; }
  .hero0 h2 { font-size: 28px; }
  .hero0-sub { font-size: 15px; }
  .hero0-acts { flex-direction: column; }
  .hero0-acts .b { width: 100%; }
  .perks { grid-template-columns: minmax(0, 1fr); }
  .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbar { grid-template-columns: 104px minmax(0, 1fr) 64px; gap: 10px; font-size: 13px; }
  .hbars { padding: 8px 16px 18px; }
  .rcards { grid-template-columns: minmax(0, 1fr); }
  .potd-acts .b { flex: 1; }
  .ccredits { padding: 18px 16px; }
  .note-card { flex-wrap: wrap; padding: 16px; }
  .note-card > div { flex: 1; min-width: 0; }
  .note-card > .b { flex-basis: 100%; margin-left: 0; }
  .pop.wm { width: auto; }
  .story { font-size: 15px; }
  .modal.app { max-height: calc(100dvh - 32px); }
}


@media (max-width: 859px) {
  .mtrack { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .tourbar { margin-bottom: -8px; padding: 8px 6px 8px 10px; }
  .tourbar p span { display: none; }
  body:has(.pop)::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; background: rgba(16, 15, 15, .62); animation: fade .2s ease both; }
  .kstack { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 12px; }
  .kstack .kfig b .st { height: 24px; font-size: 13px; }
  .lhow { margin: -16px 0 -8px; }
}

/* micro-motion: a short pop or nudge on the icon of whatever is hovered */
.nav-item:hover svg:not(.ext), .b:hover > svg, .wallet-row:hover > i, .ritem:hover .clogo, .mcard-h > a:hover .clogo { animation: ic-pop .55s cubic-bezier(.34, 1.56, .64, 1); }
.ract:hover svg { animation: nudge-d .5s ease; }
.ract.dots:hover svg { animation: none; }
.help > .b:hover { animation: wiggle .5s ease; }
.promo:hover .promo-art img { animation: ic-pop .6s cubic-bezier(.34, 1.56, .64, 1); }
.backlink:hover svg { animation: nudge-l .45s ease; }
/* on a route change (not while filtering): the page rises in and the funded rings fill */
.main.anim .page { animation: page-in .4s cubic-bezier(.19, 1, .22, 1) both; }
.main.anim .ring .rv { animation: ring-in 1s cubic-bezier(.65, 0, .35, 1) .15s both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ring-in { from { stroke-dasharray: 0 100; } }
@keyframes ic-pop { 0% { transform: none; } 40% { transform: scale(1.14) rotate(-8deg); } 70% { transform: scale(.96) rotate(3deg); } 100% { transform: none; } }
@keyframes nudge-d { 50% { transform: translateY(3px); } }
@keyframes nudge-l { 50% { transform: translateX(-3px); } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .nav-item svg, .b > svg, .wallet-row > i, .clogo, .ract svg, .help > .b, .promo-art img, .backlink svg { animation: none !important; } }