/* Eleval terminal, two skins over one layout. Every colour traces back to the logo:
   emerald #0B3F2B, dark green #083021 and mint #A8F5D3, plus a warm coral for sells.
   grove: soft hairlines, rounded panels.
   medal: sharp corners, solid mint slabs, serif names. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root { --forest: #062a1c; --mint: #a8f5d3; --serif: 'Fraunces', Georgia, serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, monospace; }
body.grove { --bg: #0a3a29; --panel: #082f20; --raise: #0f4732; --line: rgba(168, 245, 211, 0.13); --line-2: rgba(168, 245, 211, 0.28); --ink: #f2fff9; --dim: #a6d4bf; --mute: #7bae97; --up: #a8f5d3; --down: #ff9a85; --accent: #a8f5d3; --on-accent: #062a1c; --on-down: #2a0d07; --hover: rgba(168, 245, 211, 0.07); --r: 14px; --r-sm: 9px; }
body.medal { --bg: #0b3f2b; --panel: #083021; --raise: #0f4732; --line: rgba(168, 245, 211, 0.15); --line-2: rgba(168, 245, 211, 0.32); --ink: #f2fff9; --dim: #a6d4bf; --mute: #7bae97; --up: #a8f5d3; --down: #ff9a85; --accent: #a8f5d3; --on-accent: #062a1c; --on-down: #2a0d07; --hover: rgba(168, 245, 211, 0.07); --r: 3px; --r-sm: 2px; }
.solid, .medal .row.sel { --panel: #a8f5d3; --raise: #c9feee; --line: rgba(6, 42, 28, 0.16); --line-2: rgba(6, 42, 28, 0.42); --ink: #062a1c; --dim: #12503a; --mute: #1c5f45; --up: #062a1c; --down: #a52f1a; --accent: #062a1c; --on-accent: #a8f5d3; --on-down: #fff3ef; --hover: rgba(6, 42, 28, 0.06); background: linear-gradient(105deg, #6fd3a4, #a8f5d3 55%, #c9feee); color: var(--ink); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--ink); font: 400 14px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
body.grove { background: radial-gradient(900px 460px at 0% -12%, rgba(168, 245, 211, 0.1), transparent 70%), var(--bg); background-attachment: fixed; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
a { color: inherit; text-decoration: none; cursor: pointer; }
svg { display: block; }
i, em { font-style: normal; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--up); }
.down { color: var(--down); }
.empty { margin: 0; padding: 22px 16px; color: var(--mute); font-size: 13px; }
.live { display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); color: var(--dim); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: beat 1.6s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(168, 245, 211, 0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(168, 245, 211, 0); } }

/* top bar */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.medal .top { border-bottom: 1.5px solid var(--mint); }
.coin { display: block; flex: none; border-radius: 22%; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--mint); }
.brand .coin { width: 34px; height: 34px; }
.brand span { font: 700 21px var(--serif); letter-spacing: 0.03em; }
.brand.flip .coin { animation: flip 1s cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes flip { to { transform: perspective(160px) rotateY(360deg); } }
.views { display: flex; align-self: stretch; }
.views a { position: relative; display: flex; align-items: center; padding: 0 13px; color: var(--dim); font-weight: 500; }
.views a:hover { color: var(--ink); }
.views a.on { color: var(--ink); }
.views a.on::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: var(--mint); }
.medal .views a.on { background: var(--mint); color: var(--forest); }
.medal .views a.on::after { display: none; }
.field { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--mute); }
.field:focus-within { border-color: var(--line-2); }
.field input { min-width: 0; border: 0; background: none; outline: none; color: var(--ink); }
.field input::placeholder { color: var(--mute); }
.search { flex: 1; max-width: 400px; }
.search input { flex: 1; }
.quick { gap: 6px; }
.quick svg { color: var(--mint); }
.quick input { width: 38px; text-align: right; font-family: var(--mono); }
.quick span { font: 500 11px var(--mono); color: var(--dim); }
.acct { position: relative; margin-left: auto; }
.me { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px 0 5px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); }
.medal .me { border-radius: var(--r-sm); }
.me:hover { background: var(--hover); }
.me .stack { display: flex; }
.me .stack i { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -5px; border-radius: 50%; background: var(--forest); border: 1.5px solid var(--mint); color: var(--mint); font: 600 9.5px var(--mono); }
.me .stack i:first-child { margin-left: 0; }
.me b { font: 500 13px var(--mono); color: var(--ink); }
.tg { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-sm); background: var(--mint); color: var(--forest); font-weight: 600; }
.menu { position: absolute; right: 0; top: 46px; z-index: 5; width: 280px; padding: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.menu[hidden] { display: none; }
.menu h4 { margin: 6px 8px 8px; font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.wrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 6px; text-align: left; }
.wrow:hover { background: var(--hover); }
.wrow span { flex: 1; }
.wrow small { color: var(--mute); }
.box { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--line-2); }
.wrow:not(.on) .box svg { opacity: 0; }
.wrow.on .box { background: var(--mint); border-color: var(--mint); color: var(--forest); }
.mfoot { display: flex; justify-content: space-between; margin-top: 6px; padding: 10px 8px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.mfoot button { color: var(--down); }

/* views */
.view { display: none; gap: 16px; align-items: start; padding: 16px 20px 40px; }
.view.on { display: grid; }
.discover, .token, .portfolio { grid-template-columns: minmax(0, 1fr) 360px; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.medal .panel { border-color: var(--line-2); }
.grove .ring::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--line); border-radius: calc(var(--r) - 4px); pointer-events: none; }
.side { position: sticky; top: 80px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.p-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.p-head.bare { padding: 0 0 10px; }
.p-head h3, .pos h3 { margin: 0; font: 700 17px var(--serif); }

/* discover board */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.toolbar .live { margin-left: auto; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); }
.seg a { padding: 5px 10px; border-radius: calc(var(--r-sm) - 3px); color: var(--dim); font-size: 13px; font-weight: 500; white-space: nowrap; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--raise); color: var(--ink); }
.medal .seg a.on { background: var(--mint); color: var(--forest); }
.cols { display: grid; grid-template-columns: minmax(180px, 1.7fr) 100px 92px 88px 118px 66px 78px 84px; align-items: center; gap: 12px; padding: 0 16px; }
.thead { height: 36px; border-bottom: 1px solid var(--line); font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.thead > :nth-child(n + 3), .row > :nth-child(n + 3) { text-align: right; }
.row { position: relative; height: 66px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.2s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--hover); box-shadow: inset 2px 0 0 var(--mint); }
.medal .row.sel { box-shadow: none; }
.row.flash-up::after, .row.flash-down::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: sweep 0.9s ease-out forwards; }
.row.flash-up::after { background: linear-gradient(90deg, rgba(168, 245, 211, 0.2), transparent 65%); }
.row.flash-down::after { background: linear-gradient(90deg, rgba(255, 143, 122, 0.18), transparent 65%); }
@keyframes sweep { from { opacity: 1; transform: translateX(-25%); } to { opacity: 0; transform: none; } }
.tok { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tk-text { min-width: 0; }
.tk-text b { display: block; font: 600 15px var(--sans); }
.medal .tk-text b { font: 700 17px var(--serif); letter-spacing: 0.01em; }
.tk-text small { display: block; overflow: hidden; color: var(--mute); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.c-spark { display: flex; justify-content: center; }
.spk polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.spk.u polyline { stroke: var(--up); }
.spk.d polyline { stroke: var(--down); }
.c-mc, .c-vol { font-size: 13px; }
.c-age { font-size: 13px; color: var(--dim); }
.c-chg { font-size: 13px; font-weight: 500; }
.c-mc .liq { display: block; margin-top: 2px; color: var(--mute); font-size: 11px; }
.wins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.wins span { display: grid; gap: 2px; padding: 8px 10px; text-align: center; }
.wins span + span { border-left: 1px solid var(--line); }
.wins small { color: var(--mute); font-size: 11px; }
.wins b { font-size: 13px; font-weight: 500; }
.tx { display: grid; gap: 6px; justify-items: end; font-size: 12px; }
.tx .bar { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: var(--down); }
.tx .bar s { display: block; height: 100%; background: var(--up); }
.qb { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--accent); font: 500 12px var(--mono); transition: background 0.15s, color 0.15s; }
.qb:hover { background: var(--accent); color: var(--on-accent); }

/* laurel wreath avatars */
.wreath { flex: none; width: 44px; height: 44px; }
.wreath.lg { width: 56px; height: 56px; }
.wreath.xl { width: 74px; height: 74px; }
.wreath svg { width: 100%; height: 100%; }
.leaf { fill: var(--line-2); transition: fill 0.35s; }
.leaf.on { fill: var(--accent); }
.pre .leaf.on { fill: var(--line-2); }
.ltr { font: 700 21px var(--serif); fill: #a8f5d3; }

/* selected token card */
.card { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 12px; }
.ch-t { flex: 1; min-width: 0; }
.ch-t h2 { margin: 0; font: 700 25px/1.1 var(--serif); }
.ch-t small { color: var(--mute); font-size: 12px; }
.open { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 12px; font-weight: 500; }
.open:hover { background: var(--hover); }
.px { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 4px; }
.px b { font: 500 28px var(--mono); letter-spacing: -0.03em; }
.px span { font: 500 14px var(--mono); }
.mini { height: 118px; margin: 0 -4px; }
.mini.u { color: var(--up); }
.mini.d { color: var(--down); }
.mini .ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.mini .dot { fill: currentColor; }
.mini .ping { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: ping 1.6s ease-out infinite; }
@keyframes ping { from { opacity: 0.5; transform: scale(0.5); } to { opacity: 0; transform: scale(2.2); } }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.kv dt { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute); }
.kv dd { margin: 3px 0 0; font: 500 14px var(--mono); }
.tape { display: grid; margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.tp { display: grid; grid-template-columns: 34px 38px 1fr 1fr 84px; gap: 8px; align-items: center; height: 28px; font: 400 12px var(--mono); color: var(--dim); animation: tpin 0.5s ease-out; }
.tp.still { animation: none; }
.tp.head { height: 26px; font: 500 10.5px var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute); animation: none; }
.tp b { font: 600 12px var(--sans); }
.tp.u b { color: var(--up); }
.tp.d b { color: var(--down); }
.tp .who { text-align: right; color: var(--mute); }
.tp.me .who { color: var(--mint); font-weight: 500; }
@keyframes tpin { from { opacity: 0; transform: translateY(-6px); background: var(--hover); } }

/* trade ticket */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
.bs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--bg); }
.solid .bs { background: rgba(6, 42, 28, 0.1); }
.bs button { height: 36px; border-radius: calc(var(--r-sm) - 2px); color: var(--dim); font-weight: 600; }
.bs button.on { background: var(--up); color: var(--on-accent); }
.bs button.on.sell { background: var(--down); color: var(--on-down); }
.wl { display: flex; flex-wrap: wrap; gap: 6px; }
.wl .lbl { display: flex; justify-content: space-between; width: 100%; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.w { min-width: 38px; height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); font: 500 12px var(--mono); }
.medal .w { border-radius: var(--r-sm); }
.w:hover { color: var(--ink); }
.w.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.amt { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); }
.solid .amt { background: rgba(255, 255, 255, 0.4); }
.amt input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: 500 24px var(--mono); }
.amt span { color: var(--dim); font: 500 12px var(--mono); white-space: nowrap; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.presets button { height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--dim); font: 500 13px var(--mono); }
.presets button:hover { border-color: var(--line-2); color: var(--ink); }
.presets button.on { border-color: var(--accent); background: var(--hover); color: var(--ink); }
.go { position: relative; width: 100%; height: 52px; overflow: hidden; border-radius: var(--r-sm); background: var(--up); color: var(--on-accent); font: 600 16px var(--sans); }
.go.sell { background: var(--down); color: var(--on-down); }
.go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); }
.go:not(:disabled):hover::after { transform: translateX(100%); transition: transform 0.7s; }
.fine { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 2px 0 0; font-size: 12px; }
.fine div { display: flex; justify-content: space-between; gap: 6px; }
.fine dt { color: var(--mute); }
.fine dd { margin: 0; color: var(--dim); text-align: right; }

/* token page */
.tk-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.back { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.back:hover { background: var(--hover); }
.tk-title h1 { margin: 0; font: 700 34px/1 var(--serif); }
.tk-title small { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--mute); font-size: 12px; }
.copy { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font: 400 12px var(--mono); }
.copy:hover { color: var(--ink); }
.tk-px { display: grid; margin-left: 10px; }
.tk-px b { font: 500 30px var(--mono); letter-spacing: -0.03em; }
.tk-px span { font: 500 14px var(--mono); }
.kv.wide { grid-template-columns: repeat(5, auto); gap: 4px 28px; margin: 0 0 0 auto; padding: 0; border: 0; }
.tk-main { display: grid; gap: 16px; min-width: 0; }
.chart-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ohlc { color: var(--mute); font-size: 12px; }
.ohlc b { color: var(--ink); font-weight: 500; margin-right: 6px; }
.ohlc b.up { color: var(--up); }
.ohlc b.down { color: var(--down); }
.chart { position: relative; height: 440px; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.chart.dragging { cursor: grabbing; }
.chart-latest { position: absolute; top: 10px; left: 10px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 500 11px var(--mono); cursor: pointer; }
.chart-latest:hover { border-color: var(--mint); }
.chart .g { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .ax { fill: var(--mute); font: 400 11px var(--mono); }
.chart .wk { stroke-width: 1; }
.chart .wk.u { stroke: var(--up); }
.chart .wk.d { stroke: var(--down); }
.chart .cb.u { fill: var(--up); }
.chart .cb.d { fill: var(--down); }
.grove .chart .cs { filter: drop-shadow(0 0 4px rgba(168, 245, 211, 0.35)); }
.chart .vb { opacity: 0.22; }
.chart .vb.u { fill: var(--up); }
.chart .vb.d { fill: var(--down); }
.chart .lastl { stroke: var(--mint); stroke-dasharray: 3 3; opacity: 0.55; }
.chart .tag.u { fill: var(--up); }
.chart .tag.d { fill: var(--down); }
.chart .tagt { fill: var(--forest); font: 500 11px var(--mono); }
.chart .cross line { stroke: var(--dim); stroke-dasharray: 3 3; }
.trades .tp { grid-template-columns: 54px 50px 1fr 1fr 1fr 110px; height: 34px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.trades .tp.head { height: 32px; }
.pos { padding: 16px; overflow: hidden; }
.pos-v { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.pos-v b { font: 500 24px var(--mono); }
.pos .empty { padding: 10px 0 0; }

/* pulse */
.pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcol { overflow: hidden; }
.pcol-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pcol-head h3 { margin: 0; font: 700 19px var(--serif); }
.pcol-head small { flex: 1; color: var(--mute); font-size: 12px; }
.pcol-head .n { color: var(--dim); font-size: 12px; }
.pcard { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pcard:last-child { border-bottom: 0; }
.pcard:hover { background: var(--hover); }
.pcard.new { animation: drop 0.8s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes drop { from { opacity: 0; transform: translateY(-18px); background: rgba(168, 245, 211, 0.2); } }
.pcard .wreath { width: 52px; height: 52px; }
.pc-t { min-width: 0; }
.pc-t b { font: 600 15px var(--sans); }
.medal .pc-t b { font: 700 16px var(--serif); }
.pc-t small { margin-left: 6px; color: var(--mute); font-size: 12px; }
.pc-m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: var(--mute); font-size: 12px; }
.pc-m em { color: var(--ink); }

/* portfolio */
.pf-main { display: grid; gap: 16px; min-width: 0; }
.pf-sum { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.7fr; margin: 0; }
.pf-sum > div { padding: 18px; border-right: 1px solid var(--line); }
.pf-sum > div:last-child { border-right: 0; }
.pf-sum dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.pf-sum dd { margin: 6px 0 0; font: 500 22px var(--mono); }
.pf-sum .big dd { font: 700 34px/1 var(--serif); }
.pf-sum dd small { margin-left: 4px; color: var(--dim); font: 400 12px var(--mono); }
.hold { display: grid; grid-template-columns: minmax(170px, 1.6fr) 120px 110px 80px 80px 170px; gap: 12px; align-items: center; min-height: 66px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.hold:last-child { border-bottom: 0; }
.hold.head { min-height: 34px; font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.hold .tok { cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips i { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); font: 500 10px var(--mono); }
.acts { display: flex; justify-content: flex-end; gap: 6px; }
.acts button { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: 500 12px var(--mono); }
.acts button:hover { background: var(--hover); }
.acts button.all { border-color: var(--down); color: var(--down); }
.wallets { display: grid; gap: 2px; padding: 16px; }
.wlrow { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.coinw { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--mint); border-radius: 50%; color: var(--mint); font: 600 11px var(--mono); }
.wl-t { display: flex; align-items: baseline; gap: 8px; }
.wl-t b { font-size: 13px; font-weight: 500; }
.wl-t small { color: var(--mute); font-size: 11px; }
.meter { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--line); }
.meter s { display: block; height: 100%; border-radius: 2px; background: var(--mint); }
.pickw { height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--mute); font-size: 11px; font-weight: 500; }
.pickw.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wbtns button { height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-weight: 500; }
.wbtns button:hover { background: var(--hover); }

/* dock, toasts, login */
.dock { display: none; }
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 10px; width: 340px; }
.toast { position: relative; overflow: hidden; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--raise); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); animation: tin 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); transition: opacity 0.3s, transform 0.3s; }
.toast.out { opacity: 0; transform: translateY(8px); }
.toast .tt { display: flex; align-items: center; gap: 10px; }
.toast b { font-weight: 600; }
.toast small { display: block; margin-top: 4px; color: var(--dim); font: 400 12px var(--mono); }
.spin { flex: none; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--mint); border-radius: 50%; animation: rot 0.8s linear infinite; }
.toast.done .spin, .ok { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--mint); color: var(--forest); animation: none; }
.prog { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--mint); transform-origin: left; animation: prog linear forwards; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes tin { from { opacity: 0; transform: translateY(12px); } }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(4, 18, 13, 0.72); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.sheet { display: grid; justify-items: center; gap: 14px; width: 100%; max-width: 380px; padding: 30px 26px 22px; text-align: center; }
.sheet .coin { width: 84px; height: 84px; animation: flip 1.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
.sheet h2 { margin: 0; font: 700 26px var(--serif); }
.sheet p { margin: 0; color: var(--dim); }
.sheet .go { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; }
.ghost { color: var(--dim); font-size: 13px; }
.ghost:hover { color: var(--ink); }

/* The board loses columns as the page narrows: holders, then the sparkline, then volume. */
@media (max-width: 1360px) {
  .c-age { display: none; }
  .cols { grid-template-columns: minmax(160px, 1.7fr) 100px 92px 88px 118px 78px 84px; }
  .kv.wide { grid-template-columns: repeat(3, auto); }
}
@media (max-width: 1240px) {
  .c-spark, .h-chips { display: none; }
  .cols { grid-template-columns: minmax(150px, 1fr) 92px 88px 118px 78px 84px; }
  .hold { grid-template-columns: minmax(150px, 1fr) 100px 70px 76px 160px; }
}
@media (max-width: 1120px) {
  .discover, .token, .portfolio { grid-template-columns: minmax(0, 1fr) 330px; }
  .c-vol, .h-cost { display: none; }
  .cols { grid-template-columns: minmax(140px, 1fr) 90px 112px 74px 80px; }
  .hold { grid-template-columns: minmax(140px, 1fr) 100px 76px 160px; }
  .top { gap: 12px; }
  .quick { display: none; }
}
@media (max-width: 980px) {
  .discover, .token, .portfolio { grid-template-columns: 1fr; }
  .discover .side { display: none; }
  .side { position: static; }
  .pulse { grid-template-columns: 1fr; }
  .search { max-width: none; }
  .c-spark { display: flex; }
  .h-cost { display: block; }
  .cols { grid-template-columns: minmax(0, 1fr) 100px 90px 112px 74px 80px; }
  .hold { grid-template-columns: minmax(150px, 1fr) 100px 80px 76px 160px; }
  .kv.wide { width: 100%; margin: 0; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .top { gap: 10px; height: 56px; padding: 0 12px; }
  .brand span, .views, .quick { display: none; }
  .search input::placeholder { font-size: 13px; }
  .me { gap: 6px; padding-right: 8px; }
  .me .stack i:nth-child(n + 2) { display: none; }
  .view { padding: 12px 12px 100px; gap: 12px; }
  .toolbar { gap: 8px; padding: 10px 12px; }
  .toolbar .live { display: none; }
  .thead { font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
  .seg a { padding: 5px 8px; font-size: 12px; }
  .cols { grid-template-columns: minmax(0, 1fr) 70px 62px 58px; gap: 8px; padding: 0 12px; }
  .c-spark, .c-tx { display: none; }
  .row { height: 62px; }
  .wreath { width: 40px; height: 40px; }
  .qb { padding: 0 8px; }
  .tk-head { gap: 12px; }
  .tk-title h1 { font-size: 28px; }
  .tk-px { margin-left: auto; text-align: right; }
  .tk-px b { font-size: 22px; }
  .wreath.xl { width: 58px; height: 58px; }
  .chart { height: 300px; }
  .trades .tp { grid-template-columns: 40px 40px 1fr 1fr 78px; padding: 0 12px; }
  .trades .c-px { display: none; }
  .pf-sum { grid-template-columns: 1fr 1fr; }
  .pf-sum > div { border-bottom: 1px solid var(--line); }
  .pf-sum > div:nth-child(2n) { border-right: 0; }
  .pf-sum .big dd { font-size: 26px; }
  .hold { grid-template-columns: minmax(0, 1fr) 96px 62px; padding: 10px 12px; }
  .hold .h-chips, .hold .h-cost { display: none; }
  .hold .h-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .hold.head .h-acts { display: none; }
  .dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 4px; height: 62px; padding: 6px; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
  .medal .dock { border-radius: var(--r); }
  .dock a { flex: 1; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 11px; color: var(--dim); font-size: 11px; }
  .medal .dock a { border-radius: var(--r-sm); }
  .dock a.on { background: var(--mint); color: var(--forest); }
  .toasts { left: 12px; right: 12px; bottom: 86px; width: auto; }
}
@media (max-width: 420px) {
  .tg span { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr) 66px 56px; }
  .c-chg { display: none; }
}

/* ---- live app additions ------------------------------------------------------- */
.c-age { font-size: 13px; color: var(--dim); }
.muted { color: var(--mute); }
.skel { position: relative; overflow: hidden; background: var(--hover); border-radius: var(--r-sm); }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(168, 245, 211, 0.07), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.row.skel-row { pointer-events: none; }
.row.skel-row .skel { height: 14px; }
.chart-empty { display: grid; place-items: center; height: 100%; color: var(--mute); font-size: 13px; text-align: center; padding: 16px; }
.live.off i { background: var(--down); animation: none; }
.signin { display: grid; gap: 10px; padding: 4px 0; text-align: center; }
.signin p { margin: 0; color: var(--dim); font-size: 13px; }
.code { font: 600 34px var(--mono); letter-spacing: 0.3em; color: var(--mint); padding: 6px 0 6px 0.3em; border: 1px dashed var(--line-2); border-radius: var(--r-sm); width: 100%; }
.sheet .open-bot { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; border-radius: var(--r-sm); background: var(--mint); color: var(--forest); font-weight: 600; }
.sheet .wait { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-size: 13px; }
.sheet .err { color: var(--down); font-size: 13px; }
.skin { display: flex; gap: 4px; margin: 8px 8px 0; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.skin button { flex: 1; height: 28px; border-radius: calc(var(--r-sm) - 2px); color: var(--dim); font-size: 12px; font-weight: 500; }
.skin button.on { background: var(--mint); color: var(--forest); }
.menu .mlink { display: block; padding: 8px; color: var(--dim); font-size: 12px; }
.menu .mlink:hover { color: var(--ink); }
.ticket .note { margin: 0; color: var(--mute); font-size: 12px; text-align: center; }
.not-found { grid-column: 1 / -1; padding: 60px 16px; text-align: center; color: var(--dim); }
.not-found h2 { margin: 0 0 8px; font: 700 24px var(--serif); color: var(--ink); }
.pf-login { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; padding: 70px 16px; text-align: center; }
.pf-login .coin { width: 72px; height: 72px; }
.pf-login h2 { margin: 0; font: 700 26px var(--serif); }
.pf-login p { margin: 0; color: var(--dim); max-width: 380px; }
.pf-login .tg { height: 46px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.solid .tg { background: var(--forest); color: var(--mint); }
/* On one column the ticket sits between the chart and the trade list, not under the list. */
@media (max-width: 980px) {
  .tk-main { display: contents; }
  .token .chart-panel { order: 1; }
  .token .side { order: 2; }
  .token .trades { order: 4; }
}
.about p { margin: 0; padding: 12px 16px 16px; color: var(--dim); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.about .links { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-link { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); font-size: 12px; }
.medal .chip-link { border-radius: var(--r-sm); }
.chip-link:hover { color: var(--ink); background: var(--hover); }
.wreath image { transition: opacity 0.3s; }
@media (max-width: 980px) {
  .token .about { order: 3; }
  .token .trades { order: 4; }
}
/* Login choices and the connected-wallet ticket */
.choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); text-align: left; }
.choice:hover { border-color: var(--mint); background: var(--hover); }
.choice .ci { display: grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden; border: 1.5px solid var(--mint); border-radius: 50%; background: var(--forest); color: var(--mint); }
.choice .ci img { width: 26px; height: 26px; }
.choice b { display: block; font-size: 15px; }
.choice small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.wl .addr { color: var(--ink); font-size: 13px; }
.menu p.mlink { margin: 0; }
.me .stack i svg { width: 14px; height: 14px; }
.coinw svg { width: 16px; height: 16px; }

/* ======================================================================================
   Richer pass: texture, live ticker, Discover header, trade river, live feed, footer.
   ====================================================================================== */
body.grove, body.medal {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.95 0 0 0 0 0.8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(37deg, transparent 58%, rgba(147, 231, 193, 0.2) 71%, transparent 84%),
    linear-gradient(37deg, transparent 8%, rgba(147, 231, 193, 0.13) 20%, transparent 33%);
  background-attachment: fixed;
}
main, .foot { position: relative; z-index: 1; }
.watermark { position: fixed; right: -120px; bottom: -120px; z-index: 0; width: 560px; height: 560px; opacity: 0.16; pointer-events: none; mix-blend-mode: soft-light; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent); mask-image: radial-gradient(closest-side, #000 62%, transparent); }
.watermark .coin { width: 100%; height: 100%; border-radius: 0; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 245, 211, 0.7) 30%, transparent 75%); }
.panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
.eyebrow { font: 600 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.title { margin: 4px 0 0; font: 700 30px/1.1 var(--serif); }

/* ticker */
.ticker { position: sticky; top: 64px; z-index: 25; height: 34px; overflow: hidden; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tk-track { display: flex; align-items: center; gap: 28px; height: 100%; padding-left: 20px; white-space: nowrap; will-change: transform; }
.ti { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--dim); font: 500 12px var(--sans); }
.ti::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.ti.u::before { background: var(--up); box-shadow: 0 0 8px var(--up); }
.ti.d::before { background: var(--down); box-shadow: 0 0 8px var(--down); }
.ti b { color: var(--ink); font-weight: 600; }
.ti i { font-style: normal; }
.ti.u i { color: var(--up); }
.ti.d i { color: var(--down); }
.ti:hover b { text-decoration: underline; }
.side { top: 114px; }

/* Discover header */
.hero { grid-column: 1 / -1; padding: 18px 20px 16px; overflow: hidden; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.12); }
.stat { position: relative; min-width: 0; padding: 14px 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat dt { color: var(--mute); font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.stat .big { margin: 6px 0 2px; color: var(--ink); font: 700 30px/1.05 var(--serif); letter-spacing: -0.01em; white-space: nowrap; }
.stat .big small { color: var(--dim); font: 500 13px var(--mono); }
.stat small { color: var(--dim); font-size: 12px; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 10px; }
.bars i { flex: 1; border-radius: 1px 1px 0 0; background: var(--mint); opacity: 0.5; transform-origin: bottom; animation: grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bars i:hover { opacity: 1; }
@keyframes grow { from { transform: scaleY(0); } }
.split { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: var(--down); }
.split s { display: block; height: 100%; background: var(--up); transition: width 0.6s; }
.river-wrap { margin-top: 16px; }
.river-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
canvas.river { display: block; width: 100%; height: 150px; border: 1px solid var(--line); border-radius: var(--r-sm); background: linear-gradient(180deg, rgba(168, 245, 211, 0.06), transparent 45%, transparent 55%, rgba(255, 143, 122, 0.06)); }
canvas.river.tall { height: 240px; }

/* market rows */
.thead { background: rgba(0, 0, 0, 0.12); }
.wreath { width: 46px; height: 46px; transition: transform 0.25s, filter 0.25s; }
.wreath.sm { width: 34px; height: 34px; }
.row { transition: background 0.2s, transform 0.2s; }
.row:hover { transform: translateX(2px); }
.row:hover .wreath, .pcard:hover .wreath { transform: scale(1.06) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(168, 245, 211, 0.35)); }
.c-vol { position: relative; }
.c-vol em { position: relative; font-style: normal; }
.vbar { position: absolute; top: 50%; right: -6px; height: 24px; border-radius: 5px; background: linear-gradient(90deg, transparent, rgba(168, 245, 211, 0.18)); transform: translateY(-50%); }
.chip { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-style: normal; font-weight: 600; }
.chip.up { background: rgba(168, 245, 211, 0.12); color: var(--up); }
.chip.down { background: rgba(255, 143, 122, 0.12); color: var(--down); }
.medal .row.sel .chip.up { background: rgba(6, 42, 28, 0.12); }
.medal .row.sel .chip.down { background: rgba(178, 59, 37, 0.12); }
.qb { transition: background 0.15s, color 0.15s, box-shadow 0.2s, transform 0.1s; }
.qb:hover { box-shadow: 0 0 18px rgba(168, 245, 211, 0.35); }
.qb:active, .go:active { transform: scale(0.96); }

/* token page header with the token's own picture, blurred, behind it */
.tk-head { position: relative; overflow: hidden; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.tk-head > :not(.tk-bg) { position: relative; }
.tk-bg { position: absolute; inset: -60px; background-position: center; background-size: cover; filter: blur(44px) saturate(1.5); opacity: 0.35; pointer-events: none; }
.tk-head .wreath.xl { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45)); }
.tk-title h1 { font-size: 40px; }
.tk-px b { font: 700 34px var(--serif); letter-spacing: -0.01em; }

/* Pulse: buy pressure under each card */
.meter2 { display: block; height: 3px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: rgba(255, 143, 122, 0.35); }
.meter2 s { display: block; height: 100%; background: var(--up); }
.pcard { transition: background 0.2s; }

/* Live page */
.live-view { grid-template-columns: minmax(0, 1fr); }
.live-head { padding: 18px 20px; }
.live-head .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; }
.lf { display: grid; grid-template-columns: 52px minmax(170px, 1.3fr) 70px 0.6fr 0.6fr 0.7fr 0.9fr 74px; gap: 12px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.2s; }
.lf:last-child { border-bottom: 0; }
.lf:hover { background: var(--hover); }
.lf.head { padding: 10px 16px; background: rgba(0, 0, 0, 0.12); color: var(--mute); cursor: default; font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.lf > :nth-child(n + 4) { text-align: right; }
.lf .tok { gap: 10px; }
.lf.u { box-shadow: inset 2px 0 0 rgba(168, 245, 211, 0.55); }
.lf.d { box-shadow: inset 2px 0 0 rgba(255, 143, 122, 0.55); }
.lf.fresh { animation: drop 0.8s cubic-bezier(0.2, 0.9, 0.2, 1); }
.side-tag { justify-self: start; padding: 3px 8px; border-radius: 6px; font: 600 12px var(--sans); }
.lf.u .side-tag { background: rgba(168, 245, 211, 0.12); color: var(--up); }
.lf.d .side-tag { background: rgba(255, 143, 122, 0.12); color: var(--down); }
.l-act { justify-self: end; }

/* footer */
.foot { margin-top: 24px; padding: 14px 20px 16px; overflow: hidden; border-top: 1px solid var(--line); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; color: var(--dim); font-size: 13px; }
.foot-row > span { display: flex; align-items: center; gap: 8px; }
.foot-row .coin { width: 22px; height: 22px; }
.foot-row b { color: var(--ink); font-family: var(--serif); }
.foot-row nav { display: flex; gap: 18px; }
.foot-row a:hover { color: var(--ink); }
.foot-note { margin: 6px 0 0; color: var(--mute); font-size: 11.5px; }

@media (max-width: 1120px) {
  .lf { grid-template-columns: 48px minmax(130px, 1fr) 60px 72px 84px 100px 70px; }
  .lf .l-mc { display: none; }
}
@media (max-width: 980px) {
  .side { top: auto; }
}
@media (max-width: 760px) {
  .ticker { top: 56px; height: 30px; }
  .hero { padding: 14px; }
  .stats, .live-head .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 12px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat .big { font-size: 24px; }
  canvas.river { height: 120px; }
  canvas.river.tall { height: 180px; }
  .wreath { width: 40px; height: 40px; }
  .lf { grid-template-columns: 34px minmax(0, 1fr) 46px 58px 64px; gap: 8px; padding: 8px 12px; }
  .lf .l-usd, .lf .l-mc, .lf .l-who { display: none; }
  .tk-title h1 { font-size: 30px; }
  .tk-px b { font-size: 24px; }
  .foot { padding-bottom: 110px; }
  .foot-row nav { gap: 12px; }
}
@media (max-width: 420px) {
  .lf .l-act { display: none; }
  .lf { grid-template-columns: 34px minmax(0, 1fr) 46px 58px; }
}
sub { font-size: 0.58em; vertical-align: -0.28em; line-height: 0; }

/* Two-line cells (USD over HYPE or percent) and wallet chips that show their balance */
.two small { display: block; margin-top: 2px; color: var(--mute); font-size: 11px; font-weight: 400; }
.two.up small, .two.down small { color: inherit; opacity: 0.75; }
.pf-sum dd small { margin-left: 2px; }
.w.bal { display: inline-grid; justify-items: center; height: auto; min-width: 52px; padding: 5px 8px; border-radius: var(--r-sm); line-height: 1.15; }
.w.bal small { font-size: 10px; opacity: 0.75; }

/* Token socials */
.socs { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.soc { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--hover); color: var(--dim); transition: color 0.15s, border-color 0.15s; }
.soc:hover { border-color: var(--mint); color: var(--mint); }
.socs.lg { margin-left: 12px; }
.socs.lg .soc { width: 28px; height: 28px; border-radius: 8px; }
.socs.lg .soc svg { width: 15px; height: 15px; }
.medal .row.sel .soc { border-color: var(--line-2); color: var(--ink); }
.tk-text b { display: flex; align-items: center; }
.pcard { cursor: pointer; }

/* Launch page */
.launch-view { grid-template-columns: minmax(0, 1fr) 380px; }
.launch-form { display: grid; gap: 14px; padding: 22px; }
.launch-form .muted { margin: -4px 0 0; font-size: 13px; }
.pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pad-card { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); text-align: left; transition: border-color 0.15s, background 0.15s; }
.pad-card b { font: 700 17px var(--serif); }
.pad-card small { color: var(--dim); font-size: 12px; line-height: 1.35; }
.pad-card:hover { border-color: var(--mint); }
.pad-card.on { border-color: var(--mint); background: rgba(168, 245, 211, 0.1); box-shadow: inset 0 0 0 1px var(--mint); }
.medal .pad-card.on { background: var(--mint); color: var(--forest); }
.medal .pad-card.on small { color: var(--forest); opacity: 0.75; }
.drop { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.12); cursor: pointer; transition: border-color 0.15s; }
.drop:hover { border-color: var(--mint); }
.drop img, .drop-ic { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.drop-ic { display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--mint); }
.drop b { display: block; font-size: 14px; }
.drop small { display: block; margin-top: 2px; color: var(--dim); font-size: 12px; }
.lfld { display: grid; gap: 6px; }
.lfld > span:first-child { color: var(--mute); font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.lfld input, .lfld textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); outline: none; background: var(--bg); color: var(--ink); font: 400 14px var(--sans); resize: vertical; }
.lfld input:focus, .lfld textarea:focus { border-color: var(--mint); }
.lfld .amt input { padding: 0; border: 0; background: none; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lf-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-card { display: grid; gap: 12px; padding: 18px; }
.lp-head { display: flex; align-items: center; gap: 12px; }
.lp-head h2 { display: flex; align-items: center; margin: 0; font: 700 28px/1.1 var(--serif); }
.lp-head small { color: var(--mute); font-size: 12px; }
.lp-desc { margin: 0; color: var(--dim); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.preview-card .kv { margin-top: 0; }
.steps { padding: 16px 18px; }
.steps ol { margin: 10px 0 0; padding-left: 18px; color: var(--dim); font-size: 13px; line-height: 1.55; }
.steps li + li { margin-top: 6px; }
@media (max-width: 980px) {
  .launch-view { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pads, .lf-row.three { grid-template-columns: 1fr; }
  .launch-form { padding: 16px; }
}
/* Origin tags: the launchpad's initial on its own colour, wherever a token is listed */
.og { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 6px 0 2px; margin-right: 2px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); font: 500 10px/1 var(--mono); vertical-align: 1px; white-space: nowrap; }
.medal .og { border-radius: var(--r-sm); }
.og i { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--og); color: #062a1c; font: 700 8px/1 var(--sans); font-style: normal; }
.medal .og i { border-radius: 2px; }
.og em { font-style: normal; color: var(--mute); }
.og s, .og-eleval s { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint) 25%, transparent); }
.solid .og s { background: var(--forest); }
.og-boxa { --og: #f0b75e; }
.og-kleos { --og: #c3b0ff; }
.og-elyspump { --og: #84d0f5; }
.og-eleval { --og: var(--mint); }
.curve { display: grid; gap: 10px; padding: 14px 16px; margin-bottom: 14px; }
.curve-top { display: flex; align-items: center; justify-content: space-between; }
.curve-top b { font-size: 15px; }
.curve-bar { height: 8px; border-radius: 999px; background: var(--raise); overflow: hidden; }
.curve-bar s { display: block; height: 100%; border-radius: inherit; background: var(--mint); text-decoration: none; }
.curve p { margin: 0; }
.og-petals { --og: #f5a7c0; }
.og-stockium { --og: #6fd0f2; }
.og-unlisted { --og: #ffc56e; }
.risk { padding: 12px 16px; margin-bottom: 14px; border-color: rgba(255, 197, 110, 0.5); background: rgba(255, 197, 110, 0.08); }
.risk-danger { border-color: color-mix(in srgb, var(--down) 70%, transparent); background: color-mix(in srgb, var(--down) 14%, transparent); }
.risk p { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.risk small { color: var(--dim); font-size: 12px; }
.og-none { --og: var(--mute); }
.tk-title small .og, .og-list .og { height: 20px; font-size: 11px; }
.tk-title small .og i, .og-list .og i { width: 14px; height: 14px; font-size: 9px; }
.chips .og { margin: 0; }

/* Token page: where it came from, and where each trade's fees go */
.og-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
.og-list { margin: 0; padding: 4px 16px 12px; }
.og-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.og-list div:last-child { border-bottom: 0; }
.og-list dt { flex: none; color: var(--mute); font-size: 12px; }
.og-list dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 2px 8px; min-width: 0; margin: 0; color: var(--ink); font: 500 12.5px var(--mono); text-align: right; }
.og-list dd small { color: var(--mute); font: 400 11px var(--sans); }
.scan { display: inline-flex; align-items: center; gap: 3px; color: inherit; font: 500 12px var(--mono); }
.scan svg { opacity: 0.5; }
.scan:hover { color: var(--mint); }
.scan:hover svg { opacity: 1; }
.og-eleval { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--mint) 40%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--mint) 8%, transparent); color: var(--mint); font-size: 12px; font-weight: 600; }
.fee-src { color: var(--mute); font: 500 10.5px var(--mono); letter-spacing: 0.02em; text-transform: uppercase; }
.fee-top { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 14px 16px 2px; }
.fee-top dt { color: var(--mute); font-size: 11px; }
.fee-top dd { margin: 2px 0 0; color: var(--ink); font: 600 20px var(--mono); }
.fee-top dd:not(.num) { font: 500 13px/1.9 var(--sans); color: var(--dim); }
.fee-bar { display: flex; gap: 2px; height: 12px; margin: 14px 16px 12px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.medal .fee-bar { border-radius: var(--r-sm); }
.fee-bar s { flex: var(--w) 1 0; min-width: 4px; border-radius: 999px; background: var(--c); transform-origin: left center; animation: fee-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 90ms); }
.medal .fee-bar s { border-radius: 1px; }
@keyframes fee-grow { from { transform: scaleX(0); opacity: 0; } }
.fee-legend { display: grid; gap: 7px; margin: 0; padding: 0 16px 8px; list-style: none; }
.fee-legend li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--dim); font-size: 12.5px; }
.fee-legend li i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.fee-legend li .scan { color: var(--mute); font-size: 11px; }
.fee-legend li b { margin-left: auto; color: var(--ink); font: 600 12.5px var(--mono); }
.fee-note { margin: 0; padding: 4px 16px 10px; color: var(--mute); font-size: 12px; line-height: 1.5; }
.fee-el { display: flex; align-items: flex-start; gap: 8px; margin: 4px 16px 16px; padding: 9px 11px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); color: var(--dim); font-size: 12px; line-height: 1.45; }
.fee-el i { flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--mint); }
@media (max-width: 1240px) {
  .og-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .token .og-grid { order: 3; }
}
/* Launch form: tax and where it goes */
.tax-box { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.tax-head .muted { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; }
.tax-box .lfld span em { color: var(--mute); font-style: normal; font-weight: 400; }
.tax-box .amt { height: 46px; }
.tax-box .amt input { font-size: 18px; }
.tax-presets button { height: 34px; padding: 0 6px; font: 600 12px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tax-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.tax-check input { width: 16px; height: 16px; accent-color: var(--mint); }
.tax-check span { display: grid; gap: 1px; }
.tax-check b { font-size: 13px; }
.tax-check small { color: var(--mute); font-size: 11.5px; }
#tax-live .fee-bar { margin: 2px 0 10px; }
#tax-live .fee-legend, #tax-live .fee-note { padding-left: 0; padding-right: 0; }
.fee-bar.still s { animation: none; transition: flex-grow 0.25s ease; }
.fee-note.bad { color: var(--down); }
@media (max-width: 760px) {
  .tax-presets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .tax-box .lf-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tax-box .lf-row.three .lfld > span:first-child { min-height: 2.6em; }
}
.tax-hint { margin-top: -6px; padding: 0; }
/* Portfolio: creator fees and holder rewards waiting on the launchpads */
.claims .cl-total { color: var(--mint); font: 600 13px var(--mono); }
.claims .cl-total small { margin-left: 4px; color: var(--mute); font-weight: 400; }
.cl-list { display: grid; }
.cl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.cl-row > .tk-text { min-width: 0; }
.cl-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--mint); }
.medal .cl-ic { border-radius: var(--r-sm); }
.cl-row .tk-text small { display: flex; align-items: center; gap: 4px; }
.cl-w { color: var(--dim); font: 600 10.5px var(--mono); }
.cl-row .two { text-align: right; }
.cl-go, .cl-all { height: 32px; padding: 0 14px; border-radius: var(--r-sm); background: var(--mint); color: var(--forest); font: 600 12.5px var(--sans); }
.cl-go:disabled, .cl-all:disabled { opacity: 0.45; cursor: progress; }
.cl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 11px 16px 13px; color: var(--mute); font-size: 12px; }
.cl-all { background: none; border: 1px solid var(--mint); color: var(--mint); }
@media (max-width: 760px) {
  .cl-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cl-row .two { grid-column: 2; grid-row: 2; text-align: left; }
  .cl-row .cl-go { grid-column: 3; grid-row: 1 / span 2; }
}
/* Add Elysium RPC */
.foot-row nav button { color: inherit; font: inherit; }
.foot-row nav button:hover { color: var(--ink); }
.menu .mrpc { display: block; width: 100%; color: var(--mint); text-align: left; }
.rpc-list { display: grid; width: 100%; margin: 0; text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); }
.rpc-list div { display: grid; grid-template-columns: 62px minmax(0, 1fr) 26px; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); }
.rpc-list div:last-child { border-bottom: 0; }
.rpc-list dt { color: var(--mute); font-size: 11.5px; }
.rpc-list dd { margin: 0; color: var(--ink); font: 500 12px var(--mono); overflow-wrap: anywhere; }
.rpc-list button { display: grid; place-items: center; width: 26px; height: 26px; color: var(--dim); }
.rpc-list button:hover { color: var(--mint); }
.sheet .rpc-note { color: var(--mute); font-size: 12px; line-height: 1.45; text-align: left; }
/* Portfolio moving live */
.pf-sum .big { position: relative; min-width: 0; }
.pf-sum .big dt { display: flex; align-items: center; gap: 10px; }
.pf-sum .big dt .live { font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
.pf-spark { position: relative; height: 62px; margin-top: 10px; padding-bottom: 16px; --line-c: var(--up); }
.pf-spark.down { --line-c: var(--down); }
.pf-spark svg { display: block; width: 100%; height: 46px; overflow: visible; }
.pf-spark polyline { fill: none; stroke: var(--line-c); stroke-width: 1.6; }
.pf-spark polygon { fill: color-mix(in srgb, var(--line-c) 14%, transparent); stroke: none; }
.pf-spark i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--line-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--line-c) 25%, transparent); transition: top 0.4s, left 0.4s; animation: beat 1.6s infinite; }
.pf-spark small { position: absolute; left: 0; bottom: 0; color: var(--mute); font: 400 11px var(--mono); white-space: nowrap; }
.pf-spark.up small { color: var(--dim); }
.hold { position: relative; }
.hold.flash-up::after, .hold.flash-down::after, .pos.flash-up::after, .pos.flash-down::after { content: ''; position: absolute; inset: 0; pointer-events: none; animation: sweep 0.9s ease-out both; }
.hold.flash-up::after, .pos.flash-up::after { background: linear-gradient(90deg, rgba(168, 245, 211, 0.2), transparent 65%); }
.hold.flash-down::after, .pos.flash-down::after { background: linear-gradient(90deg, rgba(255, 143, 122, 0.18), transparent 65%); }
@media (max-width: 760px) {
  .pf-sum .big { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
}
/* Bundle check */
.bdl { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; margin-right: 2px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--dim); font: 600 10px/1 var(--mono); vertical-align: 1px; white-space: nowrap; }
.medal .bdl { border-radius: var(--r-sm); }
.bdl-low { color: var(--dim); }
.bdl-none { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); }
.bdl-mid { color: #ffc56e; border-color: rgba(255, 197, 110, 0.5); }
.bdl-high { color: var(--down); border-color: color-mix(in srgb, var(--down) 60%, transparent); background: color-mix(in srgb, var(--down) 12%, transparent); }
.solid .bdl-mid { color: #8a5a00; border-color: rgba(138, 90, 0, 0.5); }
.og-grid .bundle { grid-column: 1 / -1; }
.bundle .fee-top dd { font-size: 17px; }
.bundle .p-head .bdl { height: 22px; padding: 0 9px; font-size: 11px; }
.bdl-bar { position: relative; height: 8px; margin: 14px 16px 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.medal .bdl-bar { border-radius: var(--r-sm); }
.bdl-bar i, .bdl-bar s { position: absolute; inset: 0 auto 0 0; transition: width 0.5s; }
.bdl-bar i { background: rgba(255, 178, 122, 0.35); }
.bdl-bar s { background: #ffb27a; }
.bdl-group { margin: 0 16px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bdl-group summary { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 10px 12px; cursor: pointer; font-size: 12.5px; color: var(--dim); }
.bdl-group summary b { margin-right: auto; color: var(--ink); }
.bdl-group ul { display: grid; gap: 7px; margin: 0; padding: 0 12px 12px; list-style: none; }
.bdl-group li { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px 92px; gap: 8px; align-items: center; font-size: 12px; color: var(--dim); }
.bdl-group li > :nth-child(n + 3) { text-align: right; white-space: nowrap; }
.bdl-group .fee-note { padding: 0 12px 8px; }
@media (max-width: 760px) {
  .bdl-group li { grid-template-columns: minmax(0, 1fr) 56px 92px; }
  .bdl-group li > :nth-child(2) { display: none; }
  .bundle .fee-top { gap: 10px 20px; }
}