/* Unics app pages. Light pages (docs, admin, 404) use the site tokens; the
   terminal pages (body.term: coins, coin, launch, wallet, feed, fees, status)
   flip the same tokens to graphite at the end of this file, so every component
   below works in both. Sans everywhere except page titles. */

:root { --panel: #fff; --raised: #fff; --solid: var(--ink); --on-solid: #fff; --on-accent: #0d1a2b; }

[hidden] { display: none !important; }
.app main { padding-top: calc(var(--nav-h) + 56px); min-height: 70vh; }
.ph .eyebrow { justify-self: start; }
.filters-wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
.title em { font-style: italic; color: var(--em); letter-spacing: -0.02em; }
.ph { display: grid; gap: 18px; margin-bottom: 40px; }
.ph .lede { max-width: 38em; }
.ph-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kicker { font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.small { font-size: 13px; color: var(--ink-3); }
.row { display: flex; align-items: center; gap: 10px; }
.wrapx { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wrapx::-webkit-scrollbar { display: none; }
.box { background: var(--panel); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-1); padding: 24px; }
.box-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.box-h h2, .box-h h3 { margin: 0; font: 600 16px/1.2 var(--sans); letter-spacing: -0.01em; }
.box-h p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 14px; overflow: hidden; background: var(--accent-wash); color: var(--accent); display: grid; place-items: center; font: 600 17px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hair); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink); background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.icon-btn:hover { background: var(--mist); color: var(--accent); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 17px; height: 17px; }
.addr { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.addr a:hover { color: var(--accent); }
.retry { margin-top: 16px; }

/* ------------------------------------------------------------ launch */
.l-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 40px; align-items: start; }
.l-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.l-steps li { position: relative; }
.l-steps button { width: 100%; display: grid; gap: 8px; text-align: left; padding: 0 0 2px; cursor: default; }
.l-steps button[data-reach] { cursor: pointer; }
.l-steps i { display: block; height: 3px; border-radius: 3px; background: var(--mist-2); overflow: hidden; position: relative; }
.l-steps i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.l-steps span { display: flex; gap: 6px; align-items: baseline; font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); transition: color .3s var(--ease); }
.l-steps span b { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.l-steps li.is-done i::after, .l-steps li.is-on i::after { transform: none; }
.l-steps li.is-on span, .l-steps li.is-done span { color: var(--ink); }
.l-steps li.is-on span b { color: var(--accent); }
.l-steps li.is-done button[data-reach]:hover span { color: var(--accent); }

.l-step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.l-step.is-on { display: block; animation: stepIn .7s var(--ease-out); }
.l-step legend { padding: 0; margin: 0 0 6px; font: 400 clamp(30px, 3.2vw, 42px)/1.04 var(--serif); letter-spacing: -0.025em; color: var(--ink); }
.l-step legend em { font-style: italic; color: var(--em); }
.l-sub { margin: 0 0 28px; color: var(--ink-2); max-width: 40em; }
.l-fields { display: grid; gap: 20px; }
.l-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.l-coin { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; align-items: start; }
.drop { position: relative; width: 148px; aspect-ratio: 1; border-radius: 26px; background: var(--mist); box-shadow: inset 0 0 0 1.5px var(--hair-2); display: grid; place-items: center; text-align: center; overflow: hidden; cursor: pointer; transition: box-shadow .3s var(--ease), background-color .3s var(--ease); }
.drop:hover, .drop.is-over { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--accent); }
.drop.is-bad { box-shadow: inset 0 0 0 1.5px var(--down); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .face { display: grid; gap: 8px; justify-items: center; padding: 12px; font: 600 12.5px/1.3 var(--sans); color: var(--ink-2); pointer-events: none; }
.drop .face svg { width: 24px; height: 24px; color: var(--accent); }
.drop .face small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.drop .clear { position: absolute; z-index: 2; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(12, 15, 26, 0.72); color: #fff; display: grid; place-items: center; }
.drop .clear svg { width: 14px; height: 14px; }
.logo-url { margin-top: 10px; display: grid; gap: 6px; width: 148px; }
.logo-url button { font: 600 12.5px/1 var(--sans); color: var(--accent); text-align: left; }
.pre { position: relative; }
.pre > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font: 500 15px/1 var(--sans); pointer-events: none; display: flex; align-items: center; }
.pre > span svg { width: 16px; height: 16px; }
.pre .input { padding-left: 40px; }
.count { font: 500 11.5px/1 var(--mono); color: var(--ink-3); }

/* curves */
.l-group { margin-bottom: 26px; }
.l-group h4 { margin: 0 0 12px; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.curves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.curves.chains { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opt { position: relative; display: grid; gap: 10px; align-content: start; text-align: left; padding: 16px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); transition: box-shadow .35s var(--ease), background-color .35s var(--ease), transform .45s var(--ease); min-width: 0; }
.opt:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--accent-3), var(--shadow-1); }
.opt:active:not([disabled]) { transform: scale(0.985); }
.opt[aria-pressed="true"] { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--accent); }
.opt[disabled] { cursor: not-allowed; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); }
.opt[disabled] > :not(.tag):not(.chk) { opacity: 0.55; }
.opt .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag.k { color: var(--ink-2); background: var(--mist); }
.opt[aria-pressed="true"] .tag.k { background: var(--panel); }
.opt .mk { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--solid); color: var(--on-solid); font: 600 13px/1 var(--sans); letter-spacing: -0.02em; flex: none; }
.opt .mk.l { background: var(--accent); }
.opt b { font: 600 15px/1.2 var(--sans); letter-spacing: -0.01em; }
.opt p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.opt .chk { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; opacity: 0; transform: scale(0.6); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.opt .chk svg { width: 13px; height: 13px; }
.opt[aria-pressed="true"] .chk { opacity: 1; transform: none; }
.opt[aria-pressed="true"] .tag { opacity: 0; }
.chains .opt { padding: 14px; }
.chains .opt p { display: none; }
.spread { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; padding: 16px 18px; border-radius: 20px; background: var(--mist); }
.spread p { margin: 0; font-size: 13.5px; color: var(--ink-2); flex: 1 1 240px; }
.seg button[disabled] { opacity: 0.45; cursor: not-allowed; }
.seg button .tag { height: 18px; margin-left: 6px; padding: 0 6px; font-size: 9.5px; }

/* routes */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.routes .opt { padding: 16px 16px 18px; }
.routes .opt .ri { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: none; transition: background-color .35s var(--ease), color .35s var(--ease); }
.routes .opt .ri svg { width: 20px; height: 20px; }
.routes .opt[aria-pressed="true"] .ri { background: var(--accent); color: var(--on-accent); }
.cfg { margin-top: 18px; padding: 22px; border-radius: 24px; background: var(--mist); display: grid; gap: 18px; animation: stepIn .6s var(--ease-out); }
.cfg-h { display: flex; align-items: flex-start; gap: 14px; }
.cfg-h .ri { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); flex: none; }
.cfg-h .ri svg { width: 22px; height: 22px; }
.cfg-h b { display: block; font: 600 16px/1.25 var(--sans); }
.cfg-h p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); max-width: 40em; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fact { padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.fact span { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.fact b { font: 600 15px/1.25 var(--sans); color: var(--ink); }
.cfg .input, .cfg .select { background: var(--panel); }
.team { display: grid; gap: 10px; }
.trow { display: grid; grid-template-columns: 22px minmax(0, 1fr) 104px 40px; gap: 10px; align-items: center; }
.trow .n { font: 500 12px/1 var(--mono); color: var(--ink-3); text-align: right; }
.pct { position: relative; }
.pct .input { padding-right: 34px; text-align: right; font-family: var(--mono); }
.pct::after { content: "%"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font: 500 14px/1 var(--mono); }
.cfg-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sum { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); color: var(--ink-2); }
.sum b { font: 500 13px/1 var(--mono); }
.sum.ok b { color: var(--accent); }
.sum.bad b { color: var(--down); }
.mini { height: 36px; padding: 0 14px; border-radius: 999px; font: 600 13px/1 var(--sans); background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); display: inline-flex; align-items: center; gap: 6px; transition: background-color .3s var(--ease), color .3s var(--ease); }
.mini:hover { color: var(--accent); }
.mini svg { width: 15px; height: 15px; }
.mini[disabled] { opacity: 0.4; pointer-events: none; }
.slices { display: grid; gap: 10px; }
.slice { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.slice-top { display: grid; grid-template-columns: 12px minmax(0, 1fr) 96px 36px; gap: 12px; align-items: center; }
.slice-top .dot { width: 12px; height: 12px; border-radius: 4px; }
.select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b91a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
.slider::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) 0 var(--v, 50%), var(--mist-2) var(--v, 50%) 100%); }
.slider::-moz-range-track { height: 6px; border-radius: 6px; background: var(--mist-2); }
.slider::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1); transition: transform .3s var(--ease); }
.slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-1); }
.slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.bar { display: flex; height: 12px; border-radius: 12px; overflow: hidden; background: var(--mist-2); gap: 2px; }
.bar i { display: block; height: 100%; transition: flex-basis .5s var(--ease); }

/* first buy */
.buy-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.amt { position: relative; }
.amt .input { height: 64px; font: 500 26px/1 var(--mono); padding-right: 70px; letter-spacing: -0.02em; }
.amt > span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; font: 600 14px/1 var(--sans); color: var(--ink-2); }
.amt > span svg { width: 16px; height: 16px; color: var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets button { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); font: 500 13px/1 var(--mono); color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.presets button:hover { color: var(--ink); }
.presets button.is-on { background: var(--solid); color: var(--on-solid); box-shadow: none; }
.est { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.est > div { padding: 14px 16px; border-radius: 16px; background: var(--mist); }
.est span { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.est b { font: 500 17px/1.2 var(--mono); }

/* review */
.rv { display: grid; gap: 16px; }
.rv-list { display: grid; border-radius: 20px; background: var(--mist); padding: 6px 18px; }
.rv-list > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.rv-list > div:first-child { border-top: 0; }
.rv-list span { color: var(--ink-2); }
.rv-list b { font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rv-list .mono { font-weight: 500; }
.who { display: grid; gap: 8px; }
.who-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.who-row .dot { width: 12px; height: 12px; border-radius: 4px; }
.who-row b { display: block; font: 600 14px/1.2 var(--sans); }
.who-row small { display: block; margin-top: 3px; font: 500 12px/1.2 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-row em { font: 500 15px/1 var(--mono); font-style: normal; }
.lock { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: var(--accent-wash); color: var(--deep); font-size: 14px; line-height: 1.5; }
.lock svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
.consent { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.consent input { position: absolute; opacity: 0; pointer-events: none; }
.consent .box-c { width: 22px; height: 22px; border-radius: 7px; flex: none; margin-top: 1px; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--hair-2); display: grid; place-items: center; color: var(--on-accent); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.consent .box-c svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.consent input:checked + .box-c { background: var(--accent); box-shadow: none; }
.consent input:checked + .box-c svg { opacity: 1; transform: none; }
.consent input:focus-visible + .box-c { outline: 2px solid var(--accent); outline-offset: 2px; }
.prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.prog li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; font-size: 14px; color: var(--ink-3); }
.prog li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--hair-2); }
.prog li i svg { width: 13px; height: 13px; opacity: 0; }
.prog li[data-s="active"] { color: var(--ink); }
.prog li[data-s="active"] i { box-shadow: inset 0 0 0 1.5px var(--accent); border-top-color: transparent; animation: spin 1s linear infinite; background: conic-gradient(var(--accent) 0 25%, transparent 25%); -webkit-mask: radial-gradient(circle, transparent 8px, #000 8.5px); mask: radial-gradient(circle, transparent 8px, #000 8.5px); }
.prog li[data-s="done"] { color: var(--ink); }
.prog li[data-s="done"] i { background: var(--accent); box-shadow: none; color: var(--on-accent); }
.prog li[data-s="done"] i svg { opacity: 1; }
.prog li[data-s="error"] { color: var(--down); }
.prog li[data-s="error"] i { background: var(--down); box-shadow: none; color: #fff; }
.done-card { display: grid; gap: 16px; padding: 28px; border-radius: 26px; background: var(--accent); color: var(--on-accent); animation: stepIn .7s var(--ease-out); }
.done-card .title { color: var(--on-accent); font-size: clamp(34px, 4vw, 52px); }
.done-card p { margin: 0; color: rgba(13, 26, 43, 0.78); }
.done-card .row { flex-wrap: wrap; }

.l-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hair); }
.l-nav .kbd { font: 500 12px/1 var(--sans); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.l-nav .kbd kbd { font: 500 11px/1 var(--mono); padding: 5px 7px; border-radius: 7px; background: var(--mist); box-shadow: inset 0 -1px 0 var(--hair-2), inset 0 0 0 1px var(--hair); color: var(--ink-2); }
.l-nav .end { display: flex; align-items: center; gap: 14px; }

/* preview column */
.l-side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 14px; }
.pv { padding: 22px; display: grid; gap: 20px; }
.pv-coin { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; }
.pv-coin .av { width: 56px; height: 56px; border-radius: 17px; font-size: 19px; }
.pv-coin b { display: block; font: 600 18px/1.15 var(--sans); letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-coin small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tags .chip { height: 30px; font-size: 13px; box-shadow: inset 0 0 0 1px var(--hair); padding: 0 12px 0 9px; }
.pv-tags .chip svg { width: 15px; height: 15px; }
.donut-wrap { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; }
.donut { position: relative; width: 148px; height: 148px; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 15; transition: stroke-dasharray .6s var(--ease), stroke-dashoffset .6s var(--ease); }
.donut .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.donut .mid b { font: 500 26px/1 var(--mono); letter-spacing: -0.03em; }
.donut .mid small { font: 600 10px/1.25 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); max-width: 84px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.legend li i { width: 10px; height: 10px; border-radius: 3px; }
.legend li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.legend li b { font: 500 12.5px/1 var(--mono); }
.pv-lock { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.pv-lock svg { width: 15px; height: 15px; color: var(--accent); }
.pv-cost { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 13px; }
.pv-cost > div { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.pv-cost > div b { font: 500 13px/1 var(--mono); color: var(--ink); }
.pv-cost > div.tot { padding-top: 8px; border-top: 1px dashed var(--hair-2); color: var(--ink); font-weight: 600; }
.wallet-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 18px; border-radius: 20px; background: var(--mist); font-size: 13.5px; }
.wallet-box .w-l { display: grid; gap: 3px; min-width: 0; }
.wallet-box .w-l b { font: 600 13.5px/1.2 var(--sans); }
.wallet-box .w-l span { font: 500 12px/1.2 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ coins */
.toolbar { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 26px; }
.search { position: relative; }
.search svg { position: absolute; left: 15px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search .input { padding-left: 42px; height: 46px; border-radius: 999px; }
.filters { display: flex; gap: 8px; }
.filters button { height: 38px; padding: 0 14px 0 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair-2); font: 600 13px/1 var(--sans); color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.filters button svg { width: 15px; height: 15px; color: var(--accent); }
.filters button:hover { color: var(--ink); }
.filters button.is-on { background: var(--solid); color: var(--on-solid); box-shadow: none; }
.filters button.is-on svg { color: var(--on-solid); }
.filters button.all { padding: 0 14px; }
.cstats { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--ink-2); }
.cstats b { font: 500 15px/1 var(--mono); color: var(--ink); margin-right: 6px; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.cc { position: relative; display: grid; gap: 16px; padding: 18px; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-1); transition: transform .5s var(--ease), box-shadow .5s var(--ease); min-width: 0; }
.cc:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--accent-soft), var(--shadow-2); }
.cc-top { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cc-top b { display: block; font: 600 16px/1.15 var(--sans); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-top small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-age { font: 500 11.5px/1 var(--mono); color: var(--ink-3); align-self: start; padding-top: 4px; }
.cc-route { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.cc-route .chip { height: 28px; font-size: 12.5px; padding: 0 11px 0 8px; box-shadow: inset 0 0 0 1px var(--hair); background: var(--accent-wash); color: var(--deep); max-width: 100%; overflow: hidden; }
.cc-route .chip svg { width: 14px; height: 14px; }
.cc-route .chip span { overflow: hidden; text-overflow: ellipsis; }
.cc-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.cc-nums span { display: block; font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.cc-nums b { font: 500 16px/1 var(--mono); letter-spacing: -0.01em; }
.cc-prog { height: 4px; border-radius: 4px; background: var(--mist-2); overflow: hidden; }
.cc-prog i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.cc-prog.grad i { background: var(--deep); }
.cc.skel-card { pointer-events: none; }
.cc.skel-card .s { height: 14px; }
.cempty { grid-column: 1 / -1; padding: 64px 24px; border-radius: 28px; background: var(--mist); text-align: center; display: grid; gap: 14px; justify-items: center; }
.cempty .h3 { max-width: 16em; }
.cempty p { margin: 0; color: var(--ink-2); max-width: 32em; }
.more { display: flex; justify-content: center; margin-top: 28px; }

/* ------------------------------------------------------------ coin */
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 22px; }
.crumb a { color: var(--ink-2); font-weight: 500; }
.crumb a:hover { color: var(--accent); }
.crumb svg { width: 14px; height: 14px; }
.c-head { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 22px; align-items: center; margin-bottom: 28px; }
.c-head .av { width: 88px; height: 88px; border-radius: 26px; font-size: 28px; }
.c-name { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.c-tags { min-width: 0; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-name .title { font-size: clamp(36px, 4.4vw, 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-tags .chip { height: 30px; font-size: 13px; max-width: 100%; overflow: hidden; }
.c-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.c-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 22px; }
.c-stats > div { background: var(--panel); padding: 16px 18px; min-width: 0; }
.c-stats span { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.c-stats b { font: 500 18px/1.1 var(--mono); letter-spacing: -0.02em; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.c-main, .c-side { display: grid; gap: 22px; min-width: 0; }
.c-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.chart-box { padding: 20px 20px 14px; }
.chart-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.chart-h .hv { font: 500 12.5px/1 var(--mono); color: var(--ink-3); }
.chart-area { position: relative; height: 340px; }
.chart-area canvas { width: 100%; height: 100%; touch-action: pan-y; }
.chart-wait { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; color: var(--ink-2); font-size: 14px; padding: 20px; }
.chart-wait .link { justify-self: center; }
.route-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; align-items: center; }
.route-grid .donut { width: 170px; height: 170px; }
.shares { margin-top: 18px; }
.shares .table td:last-child, .shares .table th:last-child { text-align: right; }
.shares .table td { padding: 12px; }
.hubstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.hubstats > div { padding: 14px 16px; border-radius: 16px; background: var(--mist); min-width: 0; }
.hubstats span { display: block; font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.hubstats b { font: 500 17px/1.1 var(--mono); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubstats .blue b { color: var(--accent); }
.feed { display: grid; }
.feed > div { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.feed > div:first-child { border-top: 0; }
.feed .k { font: 600 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.feed .k.sell { color: var(--down); }
.feed .k.n { color: var(--ink-3); }
.feed .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.feed .t b { color: var(--ink); font-weight: 600; }
.feed .w { font: 500 12px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.feed .w:hover { color: var(--accent); }
.feed-empty { padding: 18px 0 6px; font-size: 14px; color: var(--ink-3); }
.trade { padding: 20px; display: grid; gap: 16px; }
.trade .seg { width: 100%; }
.trade .seg button { flex: 1; height: 38px; }
.trade .seg button.buy.is-on { background: var(--accent); color: var(--on-accent); }
.trade .seg button.sell.is-on { background: var(--solid); color: var(--on-solid); }
.trade .amt .input { height: 58px; font-size: 22px; }
.bal { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.bal b { font: 500 12.5px/1 var(--mono); color: var(--ink-2); }
.slip { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); }
.slip .seg button { height: 30px; padding: 0 10px; font-size: 12px; flex: none; }
.trade .btn { width: 100%; }
.trade-msg { font-size: 13px; color: var(--ink-2); min-height: 18px; }
.trade-msg a { color: var(--accent); font-weight: 600; }
.info { display: grid; }
.info > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 13.5px; min-width: 0; }
.info > div:first-child { border-top: 0; padding-top: 0; }
.info span { color: var(--ink-3); flex: none; }
.info b, .info a { font: 500 13px/1.2 var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.info a:hover { color: var(--accent); }
.desc { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.next { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--accent); color: var(--on-accent); }
.next svg { width: 22px; height: 22px; flex: none; }
.next b { font: 500 22px/1 var(--mono); letter-spacing: -0.02em; }
.next span { font-size: 13px; color: rgba(13, 26, 43, 0.72); display: block; margin-top: 4px; }
.not-ours { padding: 18px; border-radius: 18px; background: var(--mist); font-size: 14px; color: var(--ink-2); }
.not-ours b { display: block; color: var(--ink); margin-bottom: 4px; }

/* ------------------------------------------------------------ docs */
.d-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 30px); display: grid; gap: 2px; }
.toc a { display: block; padding: 8px 12px; border-radius: 10px; font: 500 14px/1.25 var(--sans); color: var(--ink-3); transition: color .3s var(--ease), background-color .3s var(--ease); }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--accent); background: var(--accent-wash); }
.doc { max-width: 760px; min-width: 0; }
.doc section { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--hair); scroll-margin-top: calc(var(--nav-h) + 30px); }
.doc section:last-child { border-bottom: 0; }
.doc h2 { margin: 0 0 18px; font: 400 clamp(32px, 3.4vw, 44px)/1.04 var(--serif); letter-spacing: -0.025em; }
.doc h2 em { font-style: italic; color: var(--em); }
.doc h3 { margin: 30px 0 10px; font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.doc h3 svg { width: 20px; height: 20px; color: var(--accent); }
.doc p, .doc li { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc code { font: 500 13.5px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--mist); color: var(--ink); }
.doc .table { margin: 8px 0 18px; font-size: 14px; }
.doc .table td { color: var(--ink-2); }
.doc .table td:first-child { color: var(--ink); font-weight: 600; }
.doc .tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.note { display: flex; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--accent-wash); color: var(--deep); font-size: 14.5px; line-height: 1.55; margin: 6px 0 18px; }
.note svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.note.soon { background: var(--mist); color: var(--ink-2); }
.note.soon svg { color: var(--ink-3); }
.rt { display: grid; gap: 10px; margin: 6px 0 18px; }
.rt > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--hair); }
.rt .ri { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); }
.rt .ri svg { width: 20px; height: 20px; }
.rt b { display: flex; align-items: center; gap: 8px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.rt p { margin: 4px 0 0; font-size: 14.5px; }
.cando { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 18px; }
.cando > div { padding: 18px 20px; border-radius: 20px; background: var(--mist); }
.cando > div.no { background: var(--ink); }
.cando > div.no h4, .cando > div.no li { color: rgba(255, 255, 255, 0.82); }
.cando > div.no h4 { color: #fff; }
.cando h4 { margin: 0 0 10px; font: 600 14px/1.2 var(--sans); }
.cando ul { margin: 0; padding-left: 18px; }
.cando li { font-size: 14px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 16px/1.35 var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--mist); transition: transform .45s var(--ease), background-color .3s var(--ease); }
.faq summary i svg { width: 15px; height: 15px; }
.faq details[open] summary i { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.faq details p { padding-right: 46px; }

/* ------------------------------------------------------------ admin, 404 */
.narrow { max-width: 560px; margin: 0 auto; }
.adm { padding: 30px; display: grid; gap: 20px; }
.adm .now { padding: 16px 18px; border-radius: 18px; background: var(--mist); display: grid; gap: 6px; }
.adm .now b { font: 500 14px/1.4 var(--mono); word-break: break-all; }
.adm .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.nf { min-height: 72vh; display: grid; place-content: center; text-align: center; gap: 22px; justify-items: center; padding: 120px 0 60px; }
.nf .code { font: 500 13px/1 var(--mono); letter-spacing: 0.2em; color: var(--accent); }
.nf .title { font-size: clamp(56px, 9vw, 128px); }
.nf p { margin: 0; color: var(--ink-2); max-width: 30em; }
.nf .mark { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 18px 34px -14px rgba(30, 90, 160, 0.45); animation: nfFloat 3.2s ease-in-out infinite alternate; }
@keyframes nfFloat { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

/* ------------------------------------------------------------ wallet sheet (dapp.js) in Unics colours */
html body .nw { font-family: var(--sans); }
html body .nw .nw__bd { background: rgba(12, 15, 26, 0.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html body .nw .nw__box { background: var(--panel); border: 0; box-shadow: inset 0 0 0 1px var(--hair), 0 40px 90px -30px rgba(12, 20, 70, 0.45); color: var(--ink); border-radius: 26px; padding: 22px; }
html body .nw .nw__head { font: 400 26px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; }
html body .nw .nw__hint { color: var(--ink-2); font-family: var(--sans); }
html body .nw .nw__tile, html body .nw .nw__btn { background: var(--mist); border: 0; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font-family: var(--sans); font-weight: 600; border-radius: 18px; }
html body .nw .nw__tile:hover, html body .nw .nw__btn:hover { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--accent); }
html body .nw .nw__note { font-family: var(--mono); color: var(--ink-3); }
html body .nw .nw__note[data-on] { color: var(--accent); }
html body .nw .nw__addr { font-family: var(--mono); color: var(--ink-2); }
html body .nw .nw__cancel { border: 0; background: transparent; color: var(--ink-3); font-family: var(--sans); font-weight: 600; }
html body .nw .nw__cancel:hover { color: var(--ink); }

@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1120px) {
  .l-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .curves.chains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .l-grid { grid-template-columns: 1fr; }
  .l-side { position: static; order: -1; }
  .l-side .pv-cost, .l-side .pv-lock { display: none; }
  .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar { grid-template-columns: 1fr auto; }
  .toolbar .filters-wrap { grid-column: 1 / -1; grid-row: 2; }
  .c-grid { grid-template-columns: 1fr; }
  .c-side { position: static; }
  .c-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-grid { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; display: flex; gap: 6px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 4px; scrollbar-width: none; }
  .toc::-webkit-scrollbar { display: none; }
  .toc a { white-space: nowrap; background: var(--mist); }
}
@media (max-width: 720px) {
  .app main { padding-top: calc(var(--nav-h) + 34px); }
  .l-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .l-steps span { font-size: 0; gap: 0; }
  .l-steps span b { font-size: 11px; }
  .l-steps li.is-on span { font-size: 12px; gap: 4px; white-space: nowrap; }
  .l-two { grid-template-columns: 1fr; }
  .l-coin { grid-template-columns: 1fr; }
  .curves, .curves.chains { grid-template-columns: 1fr 1fr; }
  .routes { grid-template-columns: 1fr; }
  .routes .opt { grid-template-columns: 38px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 4px; padding: 14px; }
  .routes .opt .top { display: contents; }
  .routes .opt .top .ri { grid-row: 1 / span 2; }
  .routes .opt .top .tag { position: absolute; top: 12px; right: 12px; }
  .routes .opt b { grid-column: 2; padding-right: 64px; }
  .routes .opt p { grid-column: 2; }
  .facts, .est { grid-template-columns: 1fr; }
  .trow { grid-template-columns: minmax(0, 1fr) 92px 40px; }
  .trow .n { display: none; }
  .slice-top { grid-template-columns: 12px minmax(0, 1fr) 86px 36px; gap: 8px; }
  .donut-wrap { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .donut-wrap .donut { width: 112px; height: 112px; }
  .donut .mid b { font-size: 20px; }
  .l-nav .kbd { display: none; }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar .filters-wrap { grid-row: auto; }
  .c-head { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .c-head .av { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
  .c-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .c-stats { grid-template-columns: 1fr 1fr; }
  .c-stats > div:last-child { grid-column: 1 / -1; }
  .chart-area { height: 260px; }
  .route-grid { grid-template-columns: 1fr; justify-items: center; }
  .route-grid .legend { width: 100%; }
  .hubstats { grid-template-columns: 1fr 1fr; }
  .shares .table td, .shares .table th { padding-left: 6px; padding-right: 6px; }
  .cando { grid-template-columns: 1fr; }
  .box { padding: 18px; }
  .faq details p { padding-right: 0; }
}
@media (max-width: 400px) {
  .curves, .curves.chains { grid-template-columns: 1fr; }
  .cgrid { grid-template-columns: 1fr; }
}

/* ============================================================ TERMINAL (body.term)
   Light liquid glass over a moving sky (css/termbg.css draws the sky, the
   blobs, the trinkets and the snow behind everything). Every panel is frosted
   glass: a white-to-clear fill, a bright rim on the top and left, a soft glow
   inside the top, a faint sky tint at the bottom and a blue-tinted shadow.
   Rows and lines are never blurred one by one, only their panel is. */
body.term {
  --paper: transparent;
  --panel: rgba(255, 255, 255, 0.5);
  --raised: rgba(255, 255, 255, 0.66);
  --raised-2: rgba(255, 255, 255, 0.86);
  --mist: rgba(255, 255, 255, 0.42);
  --mist-2: rgba(13, 26, 43, 0.06);
  --hair: rgba(13, 26, 43, 0.085);
  --hair-2: rgba(13, 26, 43, 0.15);
  --ink: #0d1a2b;
  --ink-2: #4a5a70;
  --ink-3: #5d6d83;
  --accent: #3cb6fa;
  --accent-2: #22a8f4;
  --accent-3: #8fd6ff;
  --accent-wash: rgba(60, 182, 250, 0.15);
  --accent-soft: rgba(60, 182, 250, 0.3);
  --deep: #0b74b5;
  --em: #1592dd;
  --on-accent: #0d1a2b;
  --solid: #0d1a2b;
  --on-solid: #ffffff;
  --up: #0f9a4c;
  --down: #df3f4b;
  --amber: #c27c0e;
  --rim: inset 1px 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --glass: linear-gradient(135deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.3) 100%);
  --glass-in: linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 100%);
  --sheen: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.22) 72%, rgba(255, 255, 255, 0) 86%);
  --frost: blur(24px) saturate(185%);
  --glass-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 22px 34px -26px rgba(255, 255, 255, 0.95), inset 0 -18px 28px -24px rgba(60, 182, 250, 0.32), 0 22px 56px -26px rgba(26, 92, 160, 0.38), 0 2px 8px -4px rgba(26, 92, 160, 0.16);
  --shadow-1: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px -18px rgba(26, 92, 160, 0.4);
  --shadow-2: 0 34px 80px -30px rgba(26, 92, 160, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.6);
  --side-w: 236px;
  --top-h: 64px;
  background: transparent;
  color: var(--ink);
  color-scheme: light;
}
body.term ::selection { background: var(--accent); color: var(--on-accent); }
body.term .skip { background: var(--ink); color: #fff; }
body.term :focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

/* the spoke.css components on glass */
body.term .btn { --b-bg: var(--solid); --b-fg: var(--on-solid); --b-i: rgba(255, 255, 255, 0.16); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -14px rgba(13, 26, 43, 0.55); }
body.term .btn.ink:hover { --b-bg: #1c2d44; }
body.term .btn.blue { --b-bg: linear-gradient(135deg, rgba(92, 198, 255, 0.98), rgba(60, 182, 250, 0.86)); --b-fg: var(--on-accent); --b-i: rgba(255, 255, 255, 0.5); background: var(--b-bg); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), inset 0 -10px 18px -12px rgba(11, 116, 181, 0.45), 0 12px 28px -14px rgba(26, 140, 210, 0.7); }
body.term .btn.blue:hover { filter: brightness(1.04) saturate(1.08); }
body.term .btn.ghost { --b-bg: rgba(255, 255, 255, 0.46); --b-fg: var(--ink); --b-i: rgba(255, 255, 255, 0.8); box-shadow: var(--rim), 0 8px 22px -16px rgba(26, 92, 160, 0.45); }
body.term .btn.ghost:hover { --b-bg: rgba(255, 255, 255, 0.72); }
body.term .btn.white { --b-bg: var(--solid); --b-fg: #fff; --b-i: rgba(255, 255, 255, 0.16); }
body.term .chip { background: rgba(255, 255, 255, 0.6); box-shadow: var(--rim); color: var(--ink); }
body.term .chip.blue { background: var(--accent); color: var(--on-accent); }
body.term .chip.blue svg { color: var(--on-accent); }
body.term .tag.live { color: var(--deep); background: rgba(60, 182, 250, 0.16); }
body.term .tag.ink { color: #fff; background: var(--solid); }
body.term .tag.soon { color: var(--ink-3); background: rgba(255, 255, 255, 0.6); box-shadow: var(--rim); }
body.term .ca { background: rgba(255, 255, 255, 0.55); box-shadow: var(--rim); color: var(--ink-2); }
body.term .ca b { color: var(--ink-3); }
body.term .ca button { background: var(--solid); color: #fff; }
body.term .input, body.term .textarea, body.term .select { background: rgba(255, 255, 255, 0.55); box-shadow: var(--rim), inset 0 0 0 1px rgba(13, 26, 43, 0.06); color: var(--ink); }
body.term .input::placeholder, body.term .textarea::placeholder { color: #7c8ba0; }
body.term .input:hover, body.term .textarea:hover { background: rgba(255, 255, 255, 0.68); }
body.term .input:focus, body.term .textarea:focus, body.term .select:focus { background: rgba(255, 255, 255, 0.88); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(60, 182, 250, 0.22); }
body.term .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235d6d83' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.term .seg { background: rgba(255, 255, 255, 0.36); box-shadow: var(--rim), inset 0 0 0 1px rgba(13, 26, 43, 0.05); }
body.term .seg button { color: var(--ink-2); }
body.term .seg button.is-on { background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: inset 1px 1px 0 #fff, 0 4px 12px -6px rgba(26, 92, 160, 0.45); }
body.term .toggle { background: rgba(13, 26, 43, 0.12); }
body.term .bezel { background: rgba(255, 255, 255, 0.22); box-shadow: var(--rim); }
body.term .toast { background: rgba(13, 26, 43, 0.86); color: #fff; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--shadow-2); }
body.term .toast svg { color: var(--accent); }
body.term .toast.bad svg { color: #ff8a94; }
body.term .skel { background: linear-gradient(90deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.38) 90%); background-size: 220% 100%; }
body.term .table th { color: var(--ink-3); }
body.term .up { color: var(--up); }
body.term .down { color: var(--down); }
body.term .av { background: rgba(255, 255, 255, 0.72); color: var(--deep); box-shadow: var(--rim), 0 4px 12px -8px rgba(26, 92, 160, 0.5); }
body.term .icon-btn { background: rgba(255, 255, 255, 0.55); color: var(--ink); box-shadow: var(--rim); }
body.term .icon-btn:hover { background: rgba(255, 255, 255, 0.85); color: var(--deep); }
body.term .drop .clear { background: rgba(13, 26, 43, 0.6); }
body.term .lock { background: rgba(60, 182, 250, 0.14); color: var(--ink-2); box-shadow: var(--rim); }
body.term .l-steps i { background: rgba(13, 26, 43, 0.1); }
body.term .donut svg circle[data-track] { stroke: rgba(13, 26, 43, 0.08); }
body.term .l-nav { border-top-color: var(--hair); }
body.term .l-nav .kbd kbd { background: rgba(255, 255, 255, 0.6); }
body.term .title { color: var(--ink); }
body.term .title em, body.term .t-head h1 em { color: var(--em); }

/* glass surfaces: the big ones carry the frost; what sits inside them is a lighter pane */
body.term .t-side, body.term .t-top, body.term .tbox, body.term .t-kpis, body.term .ct-stats,
body.term .bezel > .core, body.term .card, body.term .box, body.term .t-results, body.term .t-pop,
body.term .t-sheet > div, body.term .nw .nw__box {
  background: var(--sheen), var(--glass);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
  box-shadow: var(--glass-shadow);
}
body.term .opt, body.term .cfg, body.term .fact, body.term .slice, body.term .who-row, body.term .rv-list, body.term .est > div,
body.term .hubstats > div, body.term .wallet-box, body.term .not-ours, body.term .spread, body.term .ccard {
  background: var(--glass-in);
  box-shadow: var(--rim), 0 6px 18px -14px rgba(26, 92, 160, 0.5);
}
body.term .opt:hover:not([disabled]) { background: rgba(255, 255, 255, 0.82); box-shadow: var(--rim), inset 0 0 0 1px rgba(60, 182, 250, 0.45), 0 10px 24px -14px rgba(26, 92, 160, 0.5); }
body.term .opt[aria-pressed="true"] { background: linear-gradient(135deg, rgba(226, 244, 255, 0.95), rgba(196, 232, 255, 0.7)); box-shadow: inset 0 0 0 1.5px var(--accent), inset 1px 1px 0 #fff, 0 12px 26px -14px rgba(26, 140, 210, 0.55); }
body.term .opt[disabled] { background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
body.term .opt .mk { background: var(--solid); color: #fff; }
body.term .tag.k { color: var(--ink-2); background: rgba(255, 255, 255, 0.6); }
body.term .presets button { background: rgba(255, 255, 255, 0.5); box-shadow: var(--rim); }
body.term .presets button.is-on { background: var(--solid); color: #fff; }

/* the wallet sheet dapp.js draws */
body.term .nw .nw__bd { background: rgba(13, 26, 43, 0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.term .nw .nw__box { color: var(--ink); border-radius: 28px; }
body.term .nw .nw__head { color: var(--ink); }
body.term .nw .nw__tile, body.term .nw .nw__btn { background: rgba(255, 255, 255, 0.6); color: var(--ink); box-shadow: var(--rim); }
body.term .nw .nw__tile:hover, body.term .nw .nw__btn:hover { background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* ------------------------------------------------------------ shell */
.t-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.t-side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 16px; border-right: 1px solid var(--hair); background: linear-gradient(180deg, #0c1521 0%, #0a121d 100%); overflow-y: auto; scrollbar-width: none; }
.t-side::-webkit-scrollbar { display: none; }
.t-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--ink); }
.t-brand .t-mark { width: 34px; height: 34px; flex: none; }
.t-brand b { font: 500 24px/1 var(--serif); letter-spacing: -0.03em; }
.t-brand small { margin-left: auto; font: 600 9.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 4px 7px; border-radius: 999px; }
.t-nav { display: grid; gap: 2px; }
.t-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; font: 600 14px/1 var(--sans); color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease); }
.t-nav a svg { width: 18px; height: 18px; flex: none; }
.t-nav a:hover { background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.t-nav a.is-on { background: var(--accent-wash); color: var(--ink); }
.t-nav a.is-on svg { color: var(--accent); }
.t-nav a.is-on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.t-nav a .badge { margin-left: auto; font: 600 10px/1 var(--mono); color: var(--on-accent); background: var(--accent); padding: 4px 6px; border-radius: 6px; }
.t-sep { height: 1px; background: var(--hair); margin: 10px 6px; }
.t-side-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; }
.t-side-foot .ca { height: 38px; font-size: 12px; width: 100%; justify-content: space-between; }
.t-side-foot .row { justify-content: space-between; padding: 0 4px; font-size: 12.5px; color: var(--ink-3); }
.t-side-foot a:hover { color: var(--ink); }
.t-side-foot .x { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--ink); }
.t-side-foot .x svg { width: 14px; height: 14px; }

.t-body { min-width: 0; display: flex; flex-direction: column; }
.t-top { position: sticky; top: 0; z-index: 30; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 22px; background: rgba(10, 18, 29, 0.84); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--hair); }
.t-top .t-mbrand { display: none; color: var(--accent); }
.t-top .t-mbrand .t-mark { width: 32px; height: 32px; border-radius: 9px; }
.t-search { position: relative; flex: 1 1 auto; max-width: 520px; }
.t-search > svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.t-search input { width: 100%; height: 40px; border: 0; outline: 0; border-radius: 12px; padding: 0 64px 0 40px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); font: 500 14px/1 var(--sans); transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.t-search input::placeholder { color: var(--ink-3); }
.t-search input:focus { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-wash); }
.t-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--mono); color: var(--ink-3); padding: 4px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair-2); pointer-events: none; }
.t-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(70vh, 460px); overflow-y: auto; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--hair-2); padding: 6px; display: grid; gap: 2px; z-index: 40; }
.t-results a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--ink); }
.t-results a.is-on, .t-results a:hover { background: var(--raised); }
.t-results .av { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.t-results b { display: block; font: 600 13.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-results small { display: block; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-results em { font: 500 12px/1 var(--mono); font-style: normal; color: var(--ink-2); }
.t-results .t-none { padding: 14px 12px; font-size: 13px; color: var(--ink-3); }
.t-top-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.t-net { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); font: 500 12px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.t-net i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.t-net[data-s="ok"] i { background: var(--up); box-shadow: 0 0 0 0 rgba(47, 212, 122, 0.5); animation: netPing 2.6s var(--ease) infinite; }
.t-net[data-s="slow"] i { background: var(--amber); }
.t-net[data-s="down"] i { background: var(--down); }
@keyframes netPing { 0% { box-shadow: 0 0 0 0 rgba(47, 212, 122, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47, 212, 122, 0); } }
.t-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease); flex: none; }
.t-icon:hover, .t-icon[aria-expanded="true"] { background: var(--raised); color: var(--ink); }
.t-icon svg { width: 18px; height: 18px; }
.t-wallet { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 700 13.5px/1 var(--sans); white-space: nowrap; transition: background-color .25s var(--ease), transform .4s var(--ease); }
.t-wallet:hover { background: var(--accent-2); }
.t-wallet:active { transform: scale(0.97); }
.t-wallet svg { width: 17px; height: 17px; }
.t-wallet.is-on { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); font-weight: 600; }
.t-wallet.is-on .bal { font: 500 12.5px/1 var(--mono); color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--hair-2); }
.t-wallet.is-on .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.t-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; background: var(--panel); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--hair-2); display: grid; gap: 14px; z-index: 40; animation: popIn .35s var(--ease-out); }
.t-pop h4 { margin: 0; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.t-pop .field { gap: 6px; }
.t-pop .input { height: 42px; font-family: var(--mono); }
.t-pop .seg { width: 100%; }
.t-pop .seg button { flex: 1; height: 32px; }
.t-pop .hint { margin: 0; }
.t-pop .menu-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; font: 600 13.5px/1 var(--sans); color: var(--ink); width: 100%; text-align: left; }
.t-pop .menu-row:hover { background: var(--raised); }
.t-pop .menu-row svg { width: 16px; height: 16px; color: var(--ink-3); }
.t-pop .who { display: grid; gap: 4px; padding: 4px 6px 10px; border-bottom: 1px solid var(--hair); }
.t-pop .who b { font: 500 13px/1.3 var(--mono); word-break: break-all; }
.t-pop .who span { font-size: 12.5px; color: var(--ink-3); }
.t-anchor { position: relative; }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.t-main { padding: 26px 28px 72px; min-width: 0; flex: 1; width: 100%; max-width: 1480px; }
.t-tabs { display: none; }
.t-sheet { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; background: rgba(3, 7, 12, 0.6); animation: fade .25s var(--ease); }
.t-sheet > div { background: var(--panel); border-radius: 24px 24px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--hair-2); display: grid; gap: 4px; animation: sheetUp .45s var(--ease-out); }
.t-sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--hair-2); margin: 4px auto 10px; }
.t-sheet a { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 12px; border-radius: 12px; font: 600 15px/1 var(--sans); color: var(--ink); }
.t-sheet a:hover { background: var(--raised); }
.t-sheet a svg { width: 19px; height: 19px; color: var(--ink-3); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------ page heads, boxes, tabs */
.t-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.t-head h1 { margin: 0; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--serif); letter-spacing: -0.03em; }
.t-head h1 em { font-style: italic; color: var(--em); }
.t-head p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 44em; }
.t-head .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.t-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 18px; }
.t-kpis > div { background: var(--panel); padding: 14px 16px; min-width: 0; }
.t-kpis > div > span { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
.t-kpis b { display: block; font: 500 19px/1.1 var(--mono); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-kpis b small { font-size: 12px; color: var(--ink-3); margin-left: 4px; font-weight: 500; }
.tbox { background: var(--panel); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.tbox-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.tbox-h h2, .tbox-h h3 { margin: 0; font: 600 14.5px/1.2 var(--sans); letter-spacing: -0.005em; }
.tbox-h p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); }
.tbox-b { padding: 16px; }
.ttabs { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ttabs::-webkit-scrollbar { display: none; }
.ttabs button { height: 32px; padding: 0 14px; border-radius: 9px; font: 600 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.ttabs button:hover { color: var(--ink); }
.ttabs button.is-on { background: var(--raised-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.ttabs button .n { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.ttabs button.is-on .n { color: var(--accent); }
.ttabs button svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ coins */
.cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cbar .ttabs { flex: none; }
.cbar .grow { flex: 1 1 auto; }
.cbar .t-search { max-width: 280px; flex: 1 1 220px; }
.cbar .select { height: 40px; border-radius: 12px; width: auto; font-size: 13px; padding-left: 14px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; margin-bottom: 4px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { height: 32px; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); font: 600 12.5px/1 var(--sans); color: var(--ink-2); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.chips button svg { width: 14px; height: 14px; color: var(--accent); }
.chips button:hover { color: var(--ink); }
.chips button.is-on { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.chips button.is-on svg { color: var(--on-accent); }
.chips button .c { font: 500 11px/1 var(--mono); opacity: 0.7; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ctable th { position: sticky; top: var(--top-h); z-index: 2; background: var(--panel); text-align: right; font: 600 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 12px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ctable th:first-child, .ctable td:first-child { text-align: left; padding-left: 16px; }
.ctable th:last-child, .ctable td:last-child { padding-right: 16px; }
.ctable th.l, .ctable td.l { text-align: left; }
.ctable th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.ctable th button:hover, .ctable th button.is-on { color: var(--ink); }
.ctable td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.ctable tbody tr { cursor: pointer; transition: background-color .2s var(--ease); }
.ctable tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.ctable tbody tr.is-new td { animation: rowFlash 1.6s var(--ease); }
.ctable tbody tr:last-child td { border-bottom: 0; }
@keyframes rowFlash { 0% { background: var(--accent-wash); } 100% { background: transparent; } }
.cc-coin { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 340px; font-family: var(--sans); }
.cc-coin .av { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.cc-coin .nm { min-width: 0; display: grid; gap: 4px; }
.cc-coin .nm b { font: 600 14px/1.15 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-coin .nm b small { font: 500 12px/1 var(--mono); color: var(--ink-3); margin-left: 6px; }
.cc-coin .nm span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cbadge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.02em; color: var(--ink-2); background: var(--raised); white-space: nowrap; }
.cbadge svg { width: 12px; height: 12px; }
.cbadge.route { color: var(--on-accent); background: var(--accent); }
.cbadge.spk { color: var(--accent); background: var(--accent-wash); }
.cprog { display: inline-grid; grid-template-columns: 64px auto; gap: 8px; align-items: center; }
.cprog i { display: block; height: 4px; border-radius: 4px; background: var(--raised-2); overflow: hidden; position: relative; }
.cprog i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--accent); border-radius: 4px; }
.cprog.done i::after { background: var(--up); width: 100%; }
.cprog span { font-size: 12px; color: var(--ink-2); min-width: 38px; text-align: right; }
.qbuy { height: 30px; padding: 0 11px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent-soft); transition: background-color .2s var(--ease), color .2s var(--ease), transform .3s var(--ease); white-space: nowrap; }
.qbuy:hover { background: var(--accent); color: var(--on-accent); }
.qbuy:active { transform: scale(0.96); }
.qbuy svg { width: 13px; height: 13px; }
.qbuy.is-arm { background: var(--accent); color: var(--on-accent); }
.qbuy.is-busy { pointer-events: none; opacity: 0.7; }
.qbuy.is-busy svg { animation: spin 0.9s linear infinite; }
.ccards { display: none; }
.cempty2 { padding: 56px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; color: var(--ink-2); }
.cempty2 h3 { margin: 0; font: 400 28px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.cempty2 p { margin: 0; max-width: 34em; font-size: 14px; }
.cerr { padding: 40px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; color: var(--ink-2); font-size: 14px; }
.cerr b { color: var(--ink); font-size: 15px; }
.cmeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--hair); }
.cmeta .live { display: inline-flex; align-items: center; gap: 6px; }
.cmeta .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }

/* ------------------------------------------------------------ coin page (terminal) */
.ct-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 16px; }
.ct-head .av { width: 64px; height: 64px; border-radius: 18px; font-size: 22px; }
.ct-name { min-width: 0; display: grid; gap: 8px; }
.ct-name h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; font: 400 clamp(28px, 2.8vw, 38px)/1.05 var(--serif); letter-spacing: -0.025em; }
.ct-name h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ct-name h1 small { font: 500 15px/1 var(--mono); color: var(--ink-3); letter-spacing: 0; flex: none; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.ct-acts .ca { height: 40px; }
.ct-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); margin-bottom: 14px; }
.ct-stats > div { background: var(--panel); padding: 12px 14px; min-width: 0; }
.ct-stats span { display: block; font: 600 10px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ct-stats b { display: block; font: 500 16px/1.1 var(--mono); letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 14px; align-items: start; }
.ct-main, .ct-side { display: grid; gap: 14px; min-width: 0; }
.ct-side { position: sticky; top: calc(var(--top-h) + 14px); }
.ct-chart .chart-area { height: 380px; }
.ct-chart .tbox-h { border-bottom: 0; padding-bottom: 4px; }
.ct-chart .tbox-b { padding: 4px 10px 10px; }
.ct-chart .hv { font: 500 12px/1 var(--mono); color: var(--ink-3); }
.ct-chart .seg button { height: 28px; padding: 0 10px; font-size: 12px; }
.ct-tabs-body { padding: 4px 0 0; }
.ct-tabs-body .tbox-b { padding: 14px 16px 16px; }
.ttable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttable th { text-align: right; font: 600 10px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ttable th:first-child, .ttable td:first-child { text-align: left; padding-left: 16px; }
.ttable th:last-child, .ttable td:last-child { padding-right: 16px; }
.ttable td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--hair); font: 500 12.5px/1.2 var(--mono); white-space: nowrap; color: var(--ink); }
.ttable td.l, .ttable th.l { text-align: left; }
.ttable tr:last-child td { border-bottom: 0; }
.ttable a:hover { color: var(--accent); }
.ttable .side-b { color: var(--up); font-family: var(--sans); font-weight: 700; font-size: 12px; }
.ttable .side-s { color: var(--down); font-family: var(--sans); font-weight: 700; font-size: 12px; }
.ttable tr.is-new td { animation: rowFlash 1.6s var(--ease); }
.ttag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font: 700 10px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: var(--accent); background: var(--accent-wash); }
.ttag.pool { color: var(--ink-2); background: var(--raised); }
.ttag.warn { color: var(--amber); background: rgba(245, 181, 68, 0.12); }
.ttag.hub { color: var(--on-accent); background: var(--accent); }
.hbar { display: inline-block; width: 70px; height: 4px; border-radius: 4px; background: var(--raised-2); vertical-align: middle; margin-left: 10px; overflow: hidden; position: relative; }
.hbar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; }
.risk { display: grid; gap: 0; }
.risk > div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.risk > div:first-child { border-top: 0; }
.risk i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.risk i.g { background: var(--up); }
.risk i.a { background: var(--amber); }
.risk i.r { background: var(--down); }
.risk span { color: var(--ink-2); }
.risk b { font: 500 13px/1 var(--mono); }
.hold-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; }
.hold-grid > div:last-child { border-left: 1px solid var(--hair); padding: 14px 16px; }
.ct-note { padding: 16px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.ct-note b { color: var(--ink); }
.ct-trade { padding: 16px; display: grid; gap: 14px; }
.ct-trade .seg { width: 100%; }
.ct-trade .seg button { flex: 1; height: 36px; }
.ct-trade .seg button.buy.is-on { background: var(--up); color: #062312; box-shadow: none; }
.ct-trade .seg button.sell.is-on { background: var(--down); color: #2a0609; box-shadow: none; }
.ct-trade .amt .input { height: 56px; font-size: 22px; }
.ct-trade .btn { width: 100%; }
.ct-trade .btn.buy { --b-bg: var(--up); --b-fg: #062312; --b-i: rgba(255, 255, 255, 0.25); }
.ct-trade .btn.sell { --b-bg: var(--down); --b-fg: #2a0609; --b-i: rgba(255, 255, 255, 0.25); }
.ct-trade .presets button.is-on { background: var(--accent); color: var(--on-accent); }
.ct-route-mini { padding: 14px 16px; display: grid; gap: 12px; }
.ct-route-mini .donut-wrap { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.ct-route-mini .donut { width: 96px; height: 96px; }
.ct-route-mini .donut .mid b { font-size: 16px; }
.ct-route-mini .donut .mid small { font-size: 8.5px; }
.feedx { display: grid; }
.feedx > div { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--hair); font-size: 13.5px; }
.feedx > div:first-child { border-top: 0; }
.feedx .fi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--raised); color: var(--accent); }
.feedx .fi svg { width: 15px; height: 15px; }
.feedx .fi.burn { color: #ff9a5c; background: rgba(255, 154, 92, 0.1); }
.feedx .fi.bad { color: var(--down); background: rgba(255, 92, 102, 0.1); }
.feedx .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.feedx .t b { color: var(--ink); font-weight: 600; }
.feedx .w { font: 500 11.5px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.feedx .w:hover { color: var(--accent); }
.feedx .is-new { animation: slideIn .6s var(--ease-out); }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ wallet, feed, fees, status */
.wl-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; margin-bottom: 14px; }
.wl-hero .addr { font-size: 14px; word-break: break-all; }
.wl-hero .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.connect-card { padding: 56px 24px; text-align: center; display: grid; gap: 16px; justify-items: center; }
.connect-card svg.big { width: 54px; height: 54px; color: var(--accent); }
.connect-card h2 { margin: 0; font: 400 34px/1.05 var(--serif); letter-spacing: -0.025em; }
.connect-card p { margin: 0; color: var(--ink-2); max-width: 30em; font-size: 14.5px; }
.connect-card form { display: flex; gap: 8px; width: min(100%, 460px); }
.connect-card form .input { height: 44px; font-family: var(--mono); font-size: 13px; }
.sell-row { display: inline-flex; gap: 4px; }
.sell-row button { height: 26px; padding: 0 8px; border-radius: 7px; font: 600 11.5px/1 var(--mono); color: var(--down); background: rgba(255, 92, 102, 0.1); }
.sell-row button:hover { background: var(--down); color: #2a0609; }
.sell-row button.is-busy { opacity: 0.6; pointer-events: none; }
.ffilters { margin-bottom: 14px; }
.fees-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rbars { display: grid; gap: 14px; padding: 16px; }
.rbar { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.rbar .fi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--raised); color: var(--accent); }
.rbar .fi svg { width: 15px; height: 15px; }
.rbar .lab { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; color: var(--ink-2); }
.rbar .lab b { color: var(--ink); font-weight: 600; }
.rbar .tr { height: 6px; border-radius: 6px; background: var(--raised-2); overflow: hidden; }
.rbar .tr i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-3), var(--accent)); transform-origin: left; animation: barGrow 1.1s var(--ease-out) both; }
.rbar em { font: 500 13px/1 var(--mono); font-style: normal; min-width: 92px; text-align: right; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: none; } }
.sys { display: grid; }
.sys > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border-top: 1px solid var(--hair); }
.sys > div:first-child { border-top: 0; }
.sys i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-3); }
.sys i.g { background: var(--up); box-shadow: 0 0 0 4px rgba(47, 212, 122, 0.12); }
.sys i.a { background: var(--amber); box-shadow: 0 0 0 4px rgba(245, 181, 68, 0.12); }
.sys i.r { background: var(--down); box-shadow: 0 0 0 4px rgba(255, 92, 102, 0.12); }
.sys b { display: block; font: 600 14.5px/1.2 var(--sans); }
.sys small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.sys em { font: 500 13px/1 var(--mono); font-style: normal; color: var(--ink-2); text-align: right; white-space: nowrap; }
.status-hero { padding: 22px 18px; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.status-hero .big { width: 18px; height: 18px; border-radius: 50%; background: var(--ink-3); flex: none; }
.status-hero .big.g { background: var(--up); box-shadow: 0 0 0 7px rgba(47, 212, 122, 0.14); }
.status-hero .big.a { background: var(--amber); box-shadow: 0 0 0 7px rgba(245, 181, 68, 0.14); }
.status-hero .big.r { background: var(--down); box-shadow: 0 0 0 7px rgba(255, 92, 102, 0.14); }
.status-hero b { display: block; font: 400 26px/1.1 var(--serif); letter-spacing: -0.02em; }
.status-hero span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-3); }

/* the launch page inside the shell */
body.term .l-side { top: calc(var(--top-h) + 18px); }
body.term .ph { margin-bottom: 26px; }
body.term .done-card .btn.ghost { --b-fg: var(--on-accent); box-shadow: inset 0 0 0 1px rgba(13, 26, 43, 0.3); }
.l-seq { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-wash); font-size: 13.5px; color: var(--ink); }
.l-seq b { font: 500 13px/1 var(--mono); color: var(--accent); }
.l-seq .btn { margin-left: auto; }

/* ------------------------------------------------------------ terminal responsive */
@media (max-width: 1240px) {
  .ct-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hold-grid { grid-template-columns: 1fr; }
  .hold-grid > div:last-child { border-left: 0; border-top: 1px solid var(--hair); }
}
@media (max-width: 1100px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) 316px; }
  .fees-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .t-shell { grid-template-columns: 1fr; }
  .t-side { display: none; }
  .t-top { padding: 0 12px; gap: 8px; }
  .t-top .t-mbrand { display: grid; }
  .t-top .t-search { display: none; }
  .t-top .t-search.is-open { display: block; position: fixed; left: 10px; right: 10px; top: 10px; max-width: none; z-index: 50; }
  .t-top .t-search.is-open input { height: 46px; box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow-2); }
  .t-top .t-search.is-open kbd { display: none; }
  .t-top .t-sbtn { display: grid; }
  .t-net b { display: none; }
  .t-net { padding: 0 11px; }
  .t-main { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
  .t-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(10, 18, 29, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--hair); }
  .t-tabs a, .t-tabs button { display: grid; justify-items: center; align-content: center; gap: 5px; font: 600 10.5px/1 var(--sans); color: var(--ink-3); }
  .t-tabs svg { width: 21px; height: 21px; }
  .t-tabs .is-on { color: var(--accent); }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-side { position: static; }
  .ct-head { grid-template-columns: 52px minmax(0, 1fr); }
  .ct-head .av { width: 52px; height: 52px; border-radius: 15px; font-size: 19px; }
  .ct-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .t-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .t-sbtn { display: none !important; } }
@media (max-width: 860px) {
  .ctable-wrap { display: none; }
  .ccards { display: grid; gap: 8px; padding: 10px; }
  .ccard { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); }
  .ccard.is-new { animation: rowFlash 1.6s var(--ease); }
  .ccard .av { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; }
  .ccard .nm { min-width: 0; display: grid; gap: 4px; }
  .ccard .nm b { font: 600 14px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ccard .nm b small { font: 500 11.5px/1 var(--mono); color: var(--ink-3); margin-left: 4px; }
  .ccard .nm span { display: flex; gap: 5px; flex-wrap: wrap; }
  .ccard .px { text-align: right; display: grid; gap: 4px; font: 500 13px/1 var(--mono); }
  .ccard .px small { font-size: 11.5px; }
  .ccard .bot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--hair); font: 500 11.5px/1 var(--mono); color: var(--ink-3); }
  .cbar .t-search { max-width: none; flex-basis: 100%; order: 3; }
  .ttable .hide-s { display: none; }
  .ct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-chart .chart-area { height: 280px; }
  .wl-hero { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .t-net { display: none; }
  .t-wallet.is-on .bal { display: none; }
  .t-head h1 { font-size: 32px; }
  .t-pop { position: fixed; left: 10px; right: 10px; top: calc(var(--top-h) + 6px); width: auto; }
  .ttable th, .ttable td { padding-left: 6px; padding-right: 6px; }
  .ttable th:first-child, .ttable td:first-child { padding-left: 12px; }
  .ttable th:last-child, .ttable td:last-child { padding-right: 12px; }
  .connect-card form { flex-direction: column; }
}
.t-results .av svg { width: 15px; height: 15px; color: var(--accent); }
.connect-card .ico.big { width: 54px; height: 54px; color: var(--accent); }
body.term .info b, body.term .info a, body.term .info .addr { color: var(--ink); }
body.term .hubstats .blue b { color: var(--accent); }
body.term .link { color: var(--ink); }
body.term .link:hover { color: var(--accent); }
body.term .t-head .cmeta .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; }
/* the terminal's own spacing: the site nav's offset doesn't apply here */
body.term main.t-main { padding-top: 26px; min-height: 0; }
body.term .select { background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.feedx > .cempty2, .feedx > .cerr, .feedx > .ct-note { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 0; }
.feedx > .ct-note { display: block; padding: 16px; }
@media (max-width: 1023px) { body.term main.t-main { padding-top: 18px; } }
@media (max-width: 1023px) {
  /* on a phone the trade panel follows the chart, the tabs come after it */
  .ct-grid { display: flex; flex-direction: column; }
  .ct-main { display: contents; }
  .ct-chart { order: 1; }
  .ct-side { order: 2; }
  .ct-tabs-box { order: 3; }
}

/* ============================================================ light glass: shell and terminal parts */
/* the sidebar, the top bar and the phone tabs float on the sky as panes */
body.term .t-side { top: 12px; height: calc(100dvh - 24px); margin: 12px 0 12px 12px; border-right: 0; border-radius: 26px; padding: 18px 12px 16px; }
body.term .t-top { top: 12px; margin: 12px 14px 0; border-bottom: 0; border-radius: 20px; padding: 0 14px 0 18px; }
body.term .t-main { padding-top: 22px; }
body.term .t-brand { color: var(--ink); }
.t-mark { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), 0 6px 14px -6px rgba(30, 90, 160, 0.45); }
body.term .t-nav a { color: var(--ink-2); }
body.term .t-nav a:hover { background: rgba(255, 255, 255, 0.55); color: var(--ink); }
body.term .t-nav a.is-on { background: rgba(255, 255, 255, 0.82); color: var(--ink); box-shadow: inset 1px 1px 0 #fff, 0 6px 16px -10px rgba(26, 92, 160, 0.5); }
body.term .t-nav a.is-on svg { color: var(--em); }
body.term .t-nav a.is-on::before { left: -12px; background: var(--accent); }
body.term .t-sep { background: var(--hair); }
body.term .t-side-foot .row { color: var(--ink-3); }
body.term .t-side-foot .x { background: rgba(255, 255, 255, 0.6); color: var(--ink); box-shadow: var(--rim); }
body.term .t-search input { background: rgba(255, 255, 255, 0.5); box-shadow: var(--rim), inset 0 0 0 1px rgba(13, 26, 43, 0.06); }
body.term .t-search input:focus { background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(60, 182, 250, 0.22); }
body.term .t-search kbd { box-shadow: inset 0 0 0 1px var(--hair-2); background: rgba(255, 255, 255, 0.6); }
body.term .t-net, body.term .t-icon { background: rgba(255, 255, 255, 0.5); box-shadow: var(--rim); color: var(--ink-2); }
body.term .t-icon:hover, body.term .t-icon[aria-expanded="true"] { background: rgba(255, 255, 255, 0.86); color: var(--ink); }
body.term .t-wallet { background: linear-gradient(135deg, #5cc6ff, #3cb6fa); color: var(--on-accent); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px -12px rgba(26, 140, 210, 0.7); }
body.term .t-wallet:hover { filter: brightness(1.05); background: linear-gradient(135deg, #5cc6ff, #3cb6fa); }
body.term .t-wallet.is-on { background: rgba(255, 255, 255, 0.62); color: var(--ink); box-shadow: var(--rim), 0 8px 20px -14px rgba(26, 92, 160, 0.5); }
body.term .t-wallet.is-on .bal { color: var(--ink-2); border-left-color: var(--hair-2); }
body.term .t-results { border-radius: 18px; }
body.term .t-results a.is-on, body.term .t-results a:hover { background: rgba(255, 255, 255, 0.78); }
body.term .t-pop { border-radius: 22px; }
body.term .t-pop .who { border-bottom-color: var(--hair); }
body.term .t-pop .menu-row:hover { background: rgba(255, 255, 255, 0.7); }
body.term .t-sheet { background: rgba(13, 26, 43, 0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.term .t-sheet > div { border-radius: 26px 26px 0 0; }
body.term .t-sheet a:hover { background: rgba(255, 255, 255, 0.7); }
body.term .t-sheet .grab { background: rgba(13, 26, 43, 0.18); }

/* panels */
body.term .tbox { border-radius: 24px; }
body.term .tbox-h { border-bottom-color: var(--hair); }
body.term .ttabs { background: rgba(255, 255, 255, 0.36); box-shadow: var(--rim), inset 0 0 0 1px rgba(13, 26, 43, 0.05); }
body.term .ttabs button { color: var(--ink-3); }
body.term .ttabs button:hover { color: var(--ink); }
body.term .ttabs button.is-on { background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: inset 1px 1px 0 #fff, 0 4px 12px -6px rgba(26, 92, 160, 0.45); }
body.term .ttabs button.is-on .n { color: var(--deep); }
/* kpi strips: one pane, cells split by hairlines */
body.term .t-kpis, body.term .ct-stats { gap: 0; overflow: hidden; border-radius: 22px; }
body.term .t-kpis > div, body.term .ct-stats > div { background: transparent; box-shadow: inset 1px 0 0 var(--hair), inset 0 1px 0 var(--hair); margin: -1px 0 0 -1px; }
body.term .t-kpis > div > span, body.term .ct-stats > div > span { color: var(--ink-3); }

/* the coin list */
body.term .ctable th { top: calc(var(--top-h) + 12px); background: rgba(244, 250, 255, 0.92); color: var(--ink-3); border-bottom-color: var(--hair); }
body.term .ctable th:first-child { border-top-left-radius: 24px; }
body.term .ctable th:last-child { border-top-right-radius: 24px; }
body.term .ctable td { border-bottom-color: var(--hair); }
body.term .ctable tbody tr:hover td { background: rgba(60, 182, 250, 0.07); }
body.term .cbadge { background: rgba(255, 255, 255, 0.7); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(13, 26, 43, 0.06); }
body.term .cbadge.route { background: var(--accent); color: var(--on-accent); box-shadow: none; }
body.term .cbadge.spk { background: rgba(60, 182, 250, 0.16); color: var(--deep); }
body.term .cprog i { background: rgba(13, 26, 43, 0.09); }
body.term .cprog.done i::after { background: var(--up); }
body.term .qbuy { color: var(--deep); background: rgba(255, 255, 255, 0.55); box-shadow: var(--rim), inset 0 0 0 1px rgba(60, 182, 250, 0.35); }
body.term .qbuy:hover, body.term .qbuy.is-arm { background: var(--accent); color: var(--on-accent); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6); }
body.term .chips button { background: rgba(255, 255, 255, 0.46); box-shadow: var(--rim); color: var(--ink-2); }
body.term .chips button svg { color: var(--deep); }
body.term .chips button:hover { background: rgba(255, 255, 255, 0.8); color: var(--ink); }
body.term .chips button.is-on { background: var(--accent); color: var(--on-accent); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px -10px rgba(26, 140, 210, 0.7); }
body.term .chips button.is-on svg { color: var(--on-accent); }
body.term .cmeta { border-top-color: var(--hair); color: var(--ink-3); }
body.term .cmeta .live i { background: var(--up); }

/* the coin page */
body.term .ct-side { top: calc(var(--top-h) + 26px); }
body.term .l-side { top: calc(var(--top-h) + 30px); }
body.term .ct-chart .tbox-h { border-bottom: 0; }
body.term .ttable th { color: var(--ink-3); border-bottom-color: var(--hair); }
body.term .ttable td { border-bottom-color: var(--hair); }
body.term .ttable tr:hover td { background: rgba(60, 182, 250, 0.06); }
body.term .ttable .side-b { color: var(--up); }
body.term .ttable .side-s { color: var(--down); }
body.term .ttag { color: var(--deep); background: rgba(60, 182, 250, 0.15); }
body.term .ttag.pool { color: var(--ink-2); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(13, 26, 43, 0.06); }
body.term .ttag.warn { color: #9a5d06; background: rgba(245, 181, 68, 0.2); }
body.term .ttag.hub { color: var(--on-accent); background: var(--accent); }
body.term .hbar { background: rgba(13, 26, 43, 0.09); }
body.term .hold-grid > div:last-child { border-left-color: var(--hair); border-top-color: var(--hair); }
body.term .risk > div { border-top-color: var(--hair); }
body.term .risk i.a, body.term .sys i.a, body.term .status-hero .big.a { background: #e3a028; }
/* buy and sell keep the chart's own green and red */
body.term .ct-trade .seg button.buy.is-on { background: #2fd47a; color: #052713; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55); }
body.term .ct-trade .seg button.sell.is-on { background: #ff5c66; color: #2e0508; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5); }
body.term .ct-trade .btn.buy { --b-bg: #2fd47a; --b-fg: #052713; --b-i: rgba(255, 255, 255, 0.35); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6), 0 12px 26px -14px rgba(20, 150, 80, 0.7); }
body.term .ct-trade .btn.sell { --b-bg: #ff5c66; --b-fg: #2e0508; --b-i: rgba(255, 255, 255, 0.35); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55), 0 12px 26px -14px rgba(210, 50, 60, 0.7); }
body.term .ct-trade .presets button.is-on { background: var(--accent); color: var(--on-accent); }
body.term .bal b { color: var(--ink-2); }
body.term .feedx > div { border-top-color: var(--hair); }
body.term .feedx .fi, body.term .rbar .fi { background: rgba(255, 255, 255, 0.72); color: var(--deep); box-shadow: var(--rim); }
body.term .feedx .fi.burn { color: #d9620f; background: rgba(255, 170, 110, 0.22); }
body.term .feedx .fi.bad { color: var(--down); background: rgba(223, 63, 75, 0.12); }
body.term .feedx .w { color: var(--ink-3); }
body.term .feedx .w:hover, body.term .ttable a:hover, body.term .info a:hover { color: var(--deep); }
body.term .rbar .tr { background: rgba(13, 26, 43, 0.08); }
body.term .rbar .tr i { background: linear-gradient(90deg, #8fd6ff, var(--accent)); }
body.term .sell-row button { color: var(--down); background: rgba(223, 63, 75, 0.1); }
body.term .sell-row button:hover { background: var(--down); color: #fff; }
body.term .sys > div { border-top-color: var(--hair); }
body.term .connect-card .ico.big { color: var(--em); }
body.term .l-seq { background: rgba(60, 182, 250, 0.16); box-shadow: var(--rim); }
body.term .hubstats .blue b { color: var(--deep); }
body.term .next { background: linear-gradient(135deg, #5cc6ff, #3cb6fa); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px -14px rgba(26, 140, 210, 0.7); }
body.term .info b, body.term .info a, body.term .info .addr { color: var(--ink); }
body.term .info > div { border-top-color: var(--hair); }
body.term .link { color: var(--ink); border-bottom-color: var(--hair-2); }
body.term .link:hover { color: var(--deep); border-bottom-color: var(--deep); }
body.term .cempty2 h3, body.term .connect-card h2, body.term .status-hero b { color: var(--ink); }
body.term .legend li span { color: var(--ink-2); }

@media (max-width: 1023px) {
  body.term .t-top { top: 8px; margin: 8px 8px 0; border-radius: 18px; padding: 0 8px 0 10px; }
  body.term .t-tabs { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: 64px; padding-bottom: 0; border-top: 0; border-radius: 22px; background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-shadow); }
  body.term .t-tabs a, body.term .t-tabs button { color: var(--ink-3); }
  body.term .t-tabs .is-on { color: var(--deep); }
  body.term .t-main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  body.term .ctable th { top: calc(var(--top-h) + 8px); }
  body.term .ct-side { top: auto; }
}
/* text that sits straight on the sky (page heads, hints) gets a soft white halo so a passing trinket never eats it */
body.term .t-head h1, body.term .t-head p { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.9); }
body.term .hint, body.term p.hint { color: var(--ink-2); }
body.term .t-head p { color: #3f4f65; }
body.term .t-head .cmeta { color: #3f4f65; text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 5px rgba(255, 255, 255, 0.9); }
/* page heads are panes too: a trinket drifting behind a title gets frosted instead of cutting through it */
body.term .t-head, body.term .ph, body.term .ct-head {
  padding: 18px 22px; border-radius: 24px;
  background: var(--sheen), var(--glass);
  -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost);
  box-shadow: var(--glass-shadow);
}
body.term .ph { margin-bottom: 18px; gap: 12px; }
body.term .t-head h1, body.term .t-head p, body.term .t-head .cmeta { text-shadow: none; }
body.term .t-head p, body.term .t-head .cmeta { color: var(--ink-2); }
@media (max-width: 1023px) {
  body.term .t-head, body.term .ph, body.term .ct-head { padding: 16px; border-radius: 22px; }
}

/* ============================================================ social: people, posts, boards, the card composer */
.uav { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; font: 700 13px/1 var(--sans); color: #fff; background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.55), transparent 52%), var(--tint, #3cb6fa); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 6px 14px -8px rgba(26, 92, 160, 0.6); }
.uav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uav.md { width: 56px; height: 56px; font-size: 20px; }
.uav.lg { width: 76px; height: 76px; font-size: 28px; }
.uav.xl { width: 112px; height: 112px; font-size: 40px; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 18px 40px -18px rgba(26, 92, 160, 0.7); }

/* post cards */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 14px; }
.pcard { border-radius: 20px; overflow: hidden; display: grid; align-content: start; background: var(--glass-in, #fff); box-shadow: var(--rim), 0 12px 28px -18px rgba(26, 92, 160, 0.55); }
.pcard-img { display: block; aspect-ratio: 1200 / 675; overflow: hidden; background: rgba(255, 255, 255, 0.4); }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.pcard:hover .pcard-img img { transform: scale(1.025); }
.pcard-b { padding: 12px 14px 14px; display: grid; gap: 10px; }
.pcard-who { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.pcard-who > span:last-child { min-width: 0; }
.pcard-who b { display: block; font: 600 14px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-who small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.pcard-cap { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pcard-f { display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--mono); }
.pcard-link { margin-left: auto; font: 600 12.5px/1 var(--sans); color: var(--deep); }
.pcard-link:hover { text-decoration: underline; }

/* leaderboard */
.lb-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr) minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 14px; }
.pod { position: relative; padding: 24px 16px 18px; border-radius: 26px; text-align: center; display: grid; justify-items: center; gap: 8px; color: var(--ink); min-width: 0; transition: transform 0.5s var(--ease); background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-shadow); }
.pod:hover { transform: translateY(-4px); }
.pod.r1 { padding: 32px 18px 26px; }
.pod .rk { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--mono); color: #2a1801; background: linear-gradient(135deg, #fff1bd, #f2c14e 55%, #c98a12); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), 0 6px 14px -6px rgba(160, 110, 10, 0.6); }
.pod.r2 .rk { color: #1d2533; background: linear-gradient(135deg, #ffffff, #c9d1dc 55%, #8f9aaa); box-shadow: inset 1px 1px 0 #fff, 0 6px 14px -6px rgba(60, 70, 90, 0.5); }
.pod.r3 .rk { color: #2b1405; background: linear-gradient(135deg, #ffe3c7, #e09a5c 55%, #a8602a); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 0 6px 14px -6px rgba(140, 70, 20, 0.5); }
.pod .uav { width: 64px; height: 64px; font-size: 24px; }
.pod.r1 .uav { width: 88px; height: 88px; font-size: 32px; box-shadow: inset 0 0 0 3px rgba(255, 241, 189, 0.95), 0 0 0 4px rgba(242, 193, 78, 0.45), 0 16px 34px -14px rgba(160, 110, 10, 0.6); }
.pod .nm { font: 600 15.5px/1.2 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .val { font: 500 24px/1 var(--mono); letter-spacing: -0.03em; }
.pod.r1 .val { font-size: 30px; }
.pod small { font-size: 12.5px; color: var(--ink-3); }
.lb-table .who { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--sans); }
.lb-table .who b { font: 600 13.5px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-table .who small { display: block; font: 500 11.5px/1.2 var(--mono); color: var(--ink-3); }
.lb-table tbody tr { cursor: pointer; }
.lb-table tr.is-me td { background: rgba(60, 182, 250, 0.1); }

/* profile */
.pf-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px; margin-bottom: 14px; border-radius: 26px; }
.pf-head h1 { margin: 0; font: 400 clamp(30px, 3vw, 44px)/1 var(--serif); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.pf-meta a { color: var(--deep); font-weight: 600; }
.pf-meta .addr { font-size: 12.5px; color: var(--ink-2); }
.pf-bio { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); max-width: 46em; overflow-wrap: anywhere; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.t-kpis.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.share-btn { height: 28px; padding: 0 10px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--sans); color: var(--deep); background: rgba(255, 255, 255, 0.6); box-shadow: var(--rim), inset 0 0 0 1px rgba(60, 182, 250, 0.35); white-space: nowrap; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.share-btn:hover { background: var(--accent); color: var(--on-accent); }
.share-btn svg { width: 14px; height: 14px; }

/* the composer and the edit sheet: one glass modal */
html.pc-open { overflow: hidden; }
.pc-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(13, 26, 43, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 0.25s var(--ease); }
.pc-wrap.is-out { opacity: 0; transition: opacity 0.25s var(--ease); }
.pc { width: min(1180px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; border-radius: 28px; padding: 18px 20px 20px; color: var(--ink); background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); box-shadow: var(--glass-shadow); animation: popIn 0.45s var(--ease-out); }
.pc.narrow { width: min(560px, 100%); }
.pc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pc-h h2 { margin: 0; font: 400 32px/1 var(--serif); letter-spacing: -0.025em; }
.pc-h h2 em { font-style: italic; color: var(--em); }
.pc-h p { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.pc-preview { aspect-ratio: 1200 / 675; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.45); box-shadow: 0 26px 60px -26px rgba(26, 92, 160, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.75); }
.pc-preview svg { width: 100%; height: 100%; display: block; }
.pc-wait { height: 100%; }
.pc-err { height: 100%; display: grid; place-content: center; text-align: center; gap: 8px; padding: 24px; font-size: 14px; color: var(--ink-2); }
.pc-err b { font: 400 24px/1.15 var(--serif); color: var(--ink); }
.pc-note { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 12.5px; color: var(--ink-3); }
.pc-note svg { width: 15px; height: 15px; color: var(--deep); flex: none; }
.pc-ctl { display: grid; gap: 14px; min-width: 0; }
.pc-sec { display: grid; gap: 8px; min-width: 0; }
.pc-two { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.pc-two .seg { width: 100%; }
.pc-two .seg button { flex: 1; }
.pc-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pc-themes button { display: grid; gap: 6px; padding: 5px 5px 8px; border-radius: 14px; background: rgba(255, 255, 255, 0.45); box-shadow: var(--rim); font: 600 12px/1 var(--sans); color: var(--ink-2); transition: box-shadow 0.25s var(--ease), transform 0.35s var(--ease), background-color 0.25s var(--ease); }
.pc-themes button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.7); }
.pc-themes button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent), var(--rim); }
.pc-mini { display: block; aspect-ratio: 1200 / 675; border-radius: 9px; overflow: hidden; background: rgba(255, 255, 255, 0.4); }
.pc-mini svg { width: 100%; height: 100%; display: block; }
.pc-trk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pc-trk button { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; padding: 6px; background: rgba(255, 255, 255, 0.45); box-shadow: var(--rim); font: 600 11.5px/1 var(--sans); color: var(--ink-3); transition: box-shadow 0.25s var(--ease), transform 0.35s var(--ease), background-color 0.25s var(--ease); }
.pc-trk button:hover { transform: translateY(-2px) rotate(-2deg); background: rgba(255, 255, 255, 0.75); }
.pc-trk img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(20, 70, 140, 0.25)); }
.pc-trk button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 2px var(--accent), var(--rim); }
.pc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-acts .btn { flex: 1 1 auto; }
.pc-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 14px; background: rgba(60, 182, 250, 0.14); box-shadow: var(--rim); font-size: 13.5px; color: var(--ink); }
.pc-done svg { width: 16px; height: 16px; color: var(--up); }
.crop { position: relative; width: 200px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; touch-action: none; cursor: grab; margin: 0 auto; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 16px 34px -16px rgba(26, 92, 160, 0.6); }
.crop:active { cursor: grabbing; }
.crop canvas { width: 100%; height: 100%; display: block; }
.crop-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); pointer-events: none; }
.crop-empty svg { width: 26px; height: 26px; color: var(--deep); }
.crop-ctl { display: flex; align-items: center; gap: 10px; }
.crop-ctl input[type="range"] { flex: 1; accent-color: var(--accent); }
.pe-grid { display: grid; gap: 14px; }

/* feed posts */
.fpost { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-top: 1px solid var(--hair); align-items: center; }
.feedx > .fpost:first-child { border-top: 0; }
.fpost .pcard-img { border-radius: 14px; box-shadow: var(--rim), 0 12px 26px -18px rgba(26, 92, 160, 0.6); }
.fpost-b { display: grid; gap: 9px; min-width: 0; }
.fpost .k { font: 700 10.5px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--deep); }
.fpost.is-new { animation: slideIn 0.6s var(--ease-out); }

/* the post page */
.pp { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.pp-img { border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, 0.45); box-shadow: var(--glass-shadow); }
.pp-img img { width: 100%; display: block; aspect-ratio: 1200 / 675; object-fit: cover; }
.pp-side { display: grid; gap: 14px; min-width: 0; }
.pp-cap { margin: 0; font: 400 22px/1.3 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pp-coin { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pp-coin .av { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
.pp-coin b { display: block; font: 600 15px/1.2 var(--sans); }
.pp-coin small { display: block; font: 500 12.5px/1.2 var(--mono); color: var(--ink-3); }
.pp-share { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-share .btn { flex: 1 1 auto; }

@media (max-width: 1100px) {
  .t-kpis.k7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-grid { grid-template-columns: 1fr; }
  .pp { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .podium { grid-template-columns: 1fr; }
  .podium .pod.r1 { order: -1; }
  .pod { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; text-align: left; padding: 14px 16px 14px 56px; gap: 4px 12px; align-items: center; }
  .pod.r1 { padding: 16px 16px 16px 56px; }
  .pod .rk { top: 50%; transform: translateY(-50%); }
  .pod .uav, .pod.r1 .uav { width: 48px; height: 48px; font-size: 18px; grid-row: 1 / span 2; }
  .pod .nm { grid-column: 2; }
  .pod small { grid-column: 2; }
  .pod .val, .pod.r1 .val { grid-column: 3; grid-row: 1 / span 2; font-size: 19px; }
  .pf-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; }
  .pf-head .uav.xl { width: 72px; height: 72px; font-size: 26px; }
  .pf-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .t-kpis.k7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fpost { grid-template-columns: 1fr; }
  .pc-wrap { padding: 0; place-items: end stretch; }
  .pc { width: 100%; max-height: 94dvh; border-radius: 26px 26px 0 0; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); }
  .pc.narrow { width: 100%; }
  .pc-h h2 { font-size: 26px; }
  .pgrid { grid-template-columns: 1fr; padding: 10px; }
}
/* a post in the feed list: the card on the left, not the 30px icon column of an event row */
.feedx > .fpost { grid-template-columns: 340px minmax(0, 1fr); gap: 16px; padding: 14px 16px; align-items: center; }
@media (max-width: 860px) { .feedx > .fpost { grid-template-columns: minmax(0, 1fr); } }
.podium.n1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.podium.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .podium.n1, .podium.n2 { grid-template-columns: 1fr; max-width: none; } }