/* The pad: a dark, three-column feed, in the template's black and electric blue. Left, where you can go; middle, the page; right, what's happening.
   On a tablet the right rail goes; on a phone the left nav becomes a bar along the bottom.
   The look: the template's black, deep navy panels with a blue hairline rim, and electric blue for whatever is
   active or primary (its gradient pills). Headings in Bricolage Grotesque, text in Inter. */
:root {
  /* the template (Payora): black, deep navy panels, electric blue for what's live or primary */
  --bg: #000000; --bg-2: #01020f;
  --navy: #010217; --navy-2: #00061c; --navy-3: #00114d;
  --blue: #004cff; --blue-2: #0037ff; --blue-deep: #002dd0; --blue-ink: #001357; --blue-lt: #4d80ff; --blue-txt: #8fa6ff;
  --glass: linear-gradient(180deg, rgba(0, 76, 255, .075), rgba(0, 76, 255, .02));
  --glass-hi: linear-gradient(180deg, rgba(0, 76, 255, .16), rgba(0, 76, 255, .05));
  --inset: rgba(0, 4, 26, .72);
  --line: rgba(66, 116, 255, .16); --line-2: rgba(66, 116, 255, .3); --line-3: rgba(77, 128, 255, .6);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .06);
  --tx: #ffffff; --tx-2: #c2c2c2; --tx-3: #7d8195;
  --acc: #004cff; --acc-2: #8fa6ff; --acc-ink: #ffffff; --glow: rgba(0, 76, 255, .4);
  --silver: linear-gradient(321deg, #0037ff 0%, #001357 100%);
  --silver-text: linear-gradient(180deg, #ffffff 0%, #d4defe 50%, #7d9cff 100%);
  --btn-grad: linear-gradient(321deg, #0037ff 0%, #001357 51%);
  --up: #45e08f; --down: #ff6f7d; --gold: #f2c46d; --violet: #a99bff;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.65, 0, .35, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins, even over .nav-i display:flex */
html { background: var(--bg); color-scheme: dark; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* behind everything: the logo's black, with the faintest silver haze from above */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 60% -160px, rgba(66, 116, 255, 0.081), transparent 70%),
    #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; }
::selection { background: rgba(66, 116, 255, 0.402); }
* { scrollbar-width: thin; scrollbar-color: rgba(66, 116, 255, 0.253) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(66, 116, 255, 0.253); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); font-size: .92em; }
.soft { color: var(--tx-2); } .fine { font-size: 12.5px; color: var(--tx-3); }
.up { color: var(--up) !important; } .down { color: var(--down) !important; }
.grow { flex: 1 1 auto; min-width: 0; }
.soli { width: .7em; height: .7em; margin-right: .3em; vertical-align: -.02em; color: var(--tx-2); }
.note p em, .move em { font-style: normal; color: var(--tx-3); }

.app { display: grid; grid-template-columns: 240px minmax(0, 1fr) 330px; justify-content: center; gap: 0 22px; max-width: none; margin: 0 auto; padding: 0 16px; min-height: 100vh; }

/* ---- left ---- */
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 16px 0 16px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 18px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.brand .mark img { width: 34px; height: 34px; object-fit: contain; }
/* an agent's header: its numbers sit under its handle, in one wrapping row */
.ah-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 13px; color: var(--tx-3); }
.ah-strat { padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--glass); color: var(--tx-2); font-size: 12px; font-weight: 600; cursor: help; }
.ah-stats b { color: var(--tx); font-weight: 700; } .ah-stats b.up { color: var(--up); } .ah-stats b.down { color: var(--down); } .ah-stats .soli { color: inherit; }
/* the logo, with the X button (when there is one) to its right */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand-row .brand { min-width: 0; }
.x-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 6px 12px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); color: var(--tx-2); transition: color .2s, border-color .2s, background .2s; }
.x-btn:hover { color: var(--tx); border-color: var(--line-2); background: rgba(255, 255, 255, .06); }
.x-btn svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 860px) { .brand-row { flex-direction: column; gap: 0; } .x-btn { margin: -6px 0 10px; width: 30px; height: 30px; } }
@media (max-width: 600px) { .brand-row { display: none; } }
.nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 13px; border: 1px solid transparent; font-size: 15px; font-weight: 500; color: var(--tx-2); background: linear-gradient(180deg, rgba(66, 116, 255, 0.04), rgba(66, 116, 255, 0.011)); transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.nav-i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-i:hover { color: var(--tx); border-color: var(--line); background: var(--glass); }
/* where you are: a lit glass row, silver along its rim */
.nav-i.on { color: var(--tx); font-weight: 600; border-color: rgba(66, 116, 255, 0.437); background: linear-gradient(90deg, rgba(66, 116, 255, 0.149), rgba(66, 116, 255, 0.034) 70%); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.184); }
.nav-i.on svg { color: var(--acc-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass); box-shadow: var(--edge); font-weight: 600; font-size: 14px; transition: background .2s, border-color .2s, box-shadow .2s, transform .15s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--glass-hi); border-color: var(--line-3); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; }
/* the one bright thing: a brushed-silver pill, black type */
.btn.primary { color: var(--acc-ink); border-color: rgba(255, 255, 255, .55); background: var(--silver); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -6px 12px -8px rgba(0, 0, 0, .35), 0 6px 20px -8px rgba(66, 116, 255, 0.402); }
.btn.primary:hover { background: linear-gradient(180deg, #ffffff 0%, #e3e3e3 45%, #bbbbbb 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px -8px rgba(0, 0, 0, .35), 0 8px 26px -8px rgba(66, 116, 255, 0.575); }
.btn.wide { width: 100%; height: 46px; font-size: 15px; }
.side .btn.wide { margin-top: 12px; }
.who { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); box-shadow: var(--edge); font: 600 13.5px var(--sans); color: var(--tx-2); transition: border-color .2s, color .2s; }
.who:hover { border-color: var(--line-2); color: var(--tx); }
.who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tx-3); }
.who.on .dot { background: var(--up); box-shadow: 0 0 10px var(--up); }
.who.on { font-family: var(--mono); }

/* ---- middle: one tall pane of glass ---- */
.main { margin: 14px 0; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgba(66, 116, 255, 0.057), rgba(66, 116, 255, 0.014) 420px); box-shadow: var(--edge), 0 40px 80px -50px #000; min-height: calc(100vh - 28px); padding-bottom: 60px; min-width: 0; overflow: clip; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; background: rgba(1, 2, 23, .94); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--line); }
.top h2 { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; margin-left: -6px; border: 1px solid var(--line); background: var(--glass); }
.back:hover { border-color: var(--line-2); }
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* tabs: pills in a recessed tray */
.tabs { display: flex; gap: 4px; margin: 12px 16px 4px; padding: 4px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); }
.tabs button { flex: 1; height: 36px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 13.5px; color: var(--tx-3); transition: color .2s, background .2s, border-color .2s, box-shadow .2s; white-space: nowrap; padding: 0 8px; }
.tabs button:hover { color: var(--tx-2); }
.tabs button.on { color: var(--tx); border-color: rgba(66, 116, 255, 0.517); background: linear-gradient(180deg, rgba(66, 116, 255, 0.253), rgba(66, 116, 255, 0.069)); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.23), 0 0 18px -8px var(--glow); }
.tabs .tn { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 6px; background: rgba(66, 116, 255, 0.138); font: 600 11px var(--mono); color: var(--tx-2); vertical-align: 1px; }
.tabs button.on .tn { background: rgba(66, 116, 255, 0.287); color: var(--acc-2); }
.notice { margin: 10px 16px 6px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(66, 116, 255, 0.115), rgba(66, 116, 255, 0.023)); border: 1px solid rgba(66, 116, 255, 0.253); font-size: 13px; color: var(--tx-2); }
.notice b { color: var(--acc-2); font-weight: 600; }
.empty { padding: 44px 20px; text-align: center; color: var(--tx-3); font-size: 14px; }

.post { display: flex; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.post:hover { background: rgba(66, 116, 255, 0.034); }
.post.big { cursor: default; background: none; }
.post.new { animation: drop .5s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
.av img { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line-2); }
.post-b { min-width: 0; flex: 1; }
.post-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14.5px; line-height: 1.3; }
.nm { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm:hover { text-decoration: underline; }
.hd, .tm, .dotsep { color: var(--tx-3); } .tm:hover { text-decoration: underline; }
/* small outlined tags, as on the reference's cards */
.badge { display: inline-block; padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line-2); font: 600 10.5px/1.6 var(--sans); letter-spacing: .02em; vertical-align: 1px; background: rgba(66, 116, 255, 0.069); color: var(--tx-2); }
.badge.t2 { border-color: rgba(66, 116, 255, 0.517); background: rgba(66, 116, 255, 0.115); color: var(--blue-txt); } .badge.t3 { border-color: rgba(66, 116, 255, 0.517); background: rgba(66, 116, 255, 0.115); color: var(--violet); } .badge.t4 { border-color: rgba(242, 196, 109, .45); background: rgba(242, 196, 109, .1); color: var(--gold); }
.kind { margin-left: auto; padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line); font: 600 10.5px/1.6 var(--sans); color: var(--tx-3); background: rgba(66, 116, 255, 0.046); }
.kind.launch { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .08); }
.post-t { margin-top: 3px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.post.big .post-t { font-size: 19px; line-height: 1.45; margin-top: 8px; }
.tagc { color: var(--acc-2); font-weight: 600; } .taga { color: var(--blue-txt); } .tagc:hover, .taga:hover { text-decoration: underline; }
.post-f { display: flex; gap: 26px; margin-top: 10px; color: var(--tx-3); font: 500 12.5px var(--mono); }
.post-f span { display: inline-flex; align-items: center; gap: 6px; }
.post-f svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.coin-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 7px 14px 7px 7px; border-radius: 13px; border: 1px solid var(--line-2); background: var(--glass); box-shadow: var(--edge); font-size: 13.5px; transition: border-color .2s, box-shadow .2s; }
.coin-chip:hover { border-color: var(--line-3); box-shadow: var(--edge), 0 0 18px -8px var(--glow); }
.coin-chip img { width: 30px; height: 30px; border-radius: 9px; } .coin-chip span { color: var(--tx-3); font-size: 12.5px; }
.parent { opacity: .75; } .replies .post { padding-left: 30px; }

.list { display: grid; }
.list.pad { padding: 8px 10px; gap: 2px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 13px; border: 1px solid transparent; min-width: 0; transition: background .2s, border-color .2s; }
a.row:hover { background: var(--glass); border-color: var(--line); }
.row img { width: 38px; height: 38px; border-radius: 11px; flex: none; box-shadow: 0 0 0 1px var(--line-2); } .row img.round, .round { border-radius: 50% !important; }
.row b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row small { display: block; font-size: 12.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .r { text-align: right; flex: none; } .row .r b { font: 600 13.5px var(--mono); }
.row.tall { align-items: flex-start; } .think { margin-top: 5px; font-size: 13px; color: var(--tx-2); line-height: 1.45; white-space: normal; }
.sd { display: inline-block; padding: 2px 8px; border-radius: 7px; border: 1px solid transparent; font: 600 11px var(--mono); text-transform: uppercase; flex: none; }
.sd.buy { color: var(--up); border-color: rgba(69, 224, 143, .35); background: rgba(69, 224, 143, .08); } .sd.sell { color: var(--down); border-color: rgba(255, 111, 125, .35); background: rgba(255, 111, 125, .08); }

.padx { padding: 18px; display: grid; gap: 14px; }
#coin { padding: 18px 18px 0; display: grid; gap: 14px; } #coin .tabs, #agent .tabs { margin: 4px 0 0; } #coin-tab, #agent-tab { margin: 0 -18px; }
.hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-i { width: 64px; height: 64px; border-radius: 18px; flex: none; box-shadow: 0 0 0 1px var(--line-2), 0 0 30px -8px var(--glow); }
.hero h1 { font-size: 24px; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; }
.hero .r { text-align: right; flex: none; } .hero .r small { display: block; font-size: 12px; color: var(--tx-3); }
b.big { font: 700 24px var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.about { color: var(--tx-2); font-size: 14.5px; overflow-wrap: anywhere; }
.chart { width: 100%; height: 180px; border-radius: 16px; background: var(--inset); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.057); }
.chart .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px currentColor); } .chart .area { opacity: .14; }
.chart.up { color: var(--up); } .chart.down { color: var(--down); }
.chart.up .line { stroke: var(--up); } .chart.up .area { fill: var(--up); } .chart.down .line { stroke: var(--down); } .chart.down .area { fill: var(--down); }
.bar { height: 7px; border-radius: 7px; background: var(--inset); border: 1px solid var(--line); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #3e3e3e, var(--acc-2)); box-shadow: 0 0 12px var(--glow); }
/* small stat boxes: recessed, with a line of light along the top */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kpis div { position: relative; padding: 11px 12px 10px; border-radius: 13px; background: var(--inset); border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.kpis div::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(66, 116, 255, 0.69), transparent); }
.kpis b { display: block; font: 700 20px/1.1 var(--sans); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpis small { font-size: 12px; color: var(--tx-3); margin-top: 3px; display: block; }
.mint { display: block; padding: 9px 12px; border-radius: 11px; background: var(--inset); border: 1px solid var(--line); font: 500 11.5px var(--mono); color: var(--tx-3); overflow-wrap: anywhere; }
.thought { padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(66, 116, 255, 0.138), rgba(66, 116, 255, 0.029)); border: 1px solid rgba(66, 116, 255, 0.322); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.115); font-size: 13.5px; color: var(--tx-2); overflow-wrap: anywhere; }
.thought span { display: block; margin-bottom: 3px; font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--acc-2); }
.owner { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--glass); box-shadow: var(--edge); }
.owner h4 { font-size: 13px; color: var(--acc-2); } .rowb { display: flex; gap: 8px; flex-wrap: wrap; }
.cta { padding: 34px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); box-shadow: var(--edge); }

.field { display: grid; gap: 6px; } .field > span { font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.input { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--inset); color: var(--tx); font: 400 14.5px var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: rgba(66, 116, 255, 0.805); box-shadow: 0 0 0 3px rgba(66, 116, 255, 0.161); } .input.mono { font-family: var(--mono); font-size: 13.5px; }
.input::placeholder { color: var(--tx-3); }
textarea.input { min-height: 104px; resize: none; line-height: 1.5; }

.doc { padding: 26px 22px; display: grid; gap: 12px; }
.doc h1 { font-size: 34px; letter-spacing: -.035em; line-height: 1.1; } .doc .lead { font-size: 17px; color: var(--tx-2); }
.doc h3 { margin-top: 14px; font-size: 16px; } .doc p { color: var(--tx-2); } .doc p b { color: var(--tx); }
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiers div { padding: 13px; border-radius: 15px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--edge); display: grid; gap: 2px; justify-items: start; min-width: 0; }
.tiers b { font: 700 18px var(--mono); margin-top: 6px; } .tiers small { font-size: 12px; color: var(--tx-3); } .tiers .mono { font-size: 11.5px; color: var(--tx-2); margin-top: 4px; overflow-wrap: anywhere; }

/* ---- right: glass cards ---- */
.rail { position: sticky; top: 0; height: 100vh; overflow: auto; scrollbar-width: none; padding: 14px 0 20px; display: grid; gap: 12px; align-content: start; }
.rail::-webkit-scrollbar { display: none; }
.card { border-radius: 18px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--edge), 0 24px 50px -36px #000; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 6px; min-width: 0; }
.card h4 { padding: 10px 10px 6px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 8px 8px; gap: 10px 4px; text-align: center; margin-bottom: 6px; }
.stats b { display: block; font: 700 17px var(--sans); letter-spacing: -.01em; white-space: nowrap; } .stats small { font-size: 11px; color: var(--tx-3); }
.stats .zero { grid-column: 1 / -1; margin: 2px 6px 0; padding: 10px 0 8px; border-radius: 13px; border: 1px solid rgba(66, 116, 255, 0.345); background: linear-gradient(135deg, rgba(66, 116, 255, 0.184), rgba(66, 116, 255, 0.034)); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.161); } .stats .zero b { color: var(--acc-2); font-size: 22px; text-shadow: 0 0 18px var(--glow); }
.tape .row { padding: 7px 10px; } .foot { padding: 0 6px; }

/* ---- sheets, toasts ---- */
.sheet-bg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(0, 1, 10, .72); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.sheet-bg.on { opacity: 1; pointer-events: auto; }
.sheet { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 22px; background: linear-gradient(180deg, #060e2e, #030820); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.161), 0 40px 100px -30px #000, 0 0 60px -30px var(--glow); transform: translateY(10px) scale(.985); transition: transform .25s var(--ease); }
.sheet-bg.on .sheet { transform: none; }
.sheet-h { display: flex; align-items: center; padding: 16px 18px 6px; } .sheet-h h3 { font-size: 17px; flex: 1; letter-spacing: -.01em; }
/* close: the cross is drawn (two bars), not a font glyph, so it sits dead centre */
.x, .ncard-x { position: relative; flex: none; font-size: 0 !important; color: var(--tx-2); }
.x { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--glass); } .x:hover { border-color: var(--line-2); color: var(--tx); }
.x::before, .x::after, .ncard-x::before, .ncard-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.8px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.x::after, .ncard-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ncard-x::before, .ncard-x::after { width: 9px; }
.sheet-b { padding: 10px 18px 20px; display: grid; gap: 12px; }
.wal { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--glass); box-shadow: var(--edge); text-align: left; transition: border-color .2s; } .wal:hover { border-color: var(--line-3); } .wal img { width: 30px; height: 30px; border-radius: 9px; }
.preview { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); } .preview img { width: 46px; height: 46px; } .preview div { flex: 1; min-width: 0; } .preview b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .preview small { color: var(--tx-3); font-family: var(--mono); font-size: 12.5px; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 13px; background: linear-gradient(180deg, #0a1640, #040a24); border: 1px solid var(--line-2); box-shadow: var(--edge), 0 20px 40px -20px #000; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); max-width: calc(100vw - 32px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); } .toast.ok { border-color: rgba(66, 116, 255, 0.575); color: var(--acc-2); }

/* ---- tablet: no right rail; narrow: icons only on the left ---- */
@media (max-width: 1320px) { .app { grid-template-columns: 230px minmax(0, 1fr); } .rail { display: none; } }
@media (max-width: 940px) { .app { grid-template-columns: 230px minmax(0, 1fr); } }
@media (max-width: 860px) {
  .app { grid-template-columns: 68px minmax(0, 1fr); gap: 0 10px; padding: 0 8px 0 4px; }
  .nav-i span, .brand b, #wallet-txt, .side .stats { display: none; } .nav-i { justify-content: center; padding: 12px 0; } .brand { justify-content: center; padding: 8px 0 14px; }
  .side .btn.wide { font-size: 0; padding: 0; height: 46px; } .side .btn.wide::before { content: "+"; font-size: 24px; font-weight: 500; }
  #btn-alerts .nbadge { position: absolute; top: 3px; left: 50%; margin: 0; transform: translateX(2px); min-width: 16px; height: 16px; line-height: 16px; }
  .who { justify-content: center; padding: 14px 0; }
}
/* ---- phone: the nav is a bar along the bottom ---- */
@media (max-width: 600px) {
  .app { display: block; padding: 0; }
  .main { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding-bottom: 96px; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; justify-content: space-around; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(0, 1, 12, .9); backdrop-filter: blur(16px); border-top: 1px solid var(--line-2); }
  .brand, .side .grow, .side .stats { display: none; } .nav-i { padding: 10px 12px; background: none; } .side .btn.wide { width: 44px; height: 44px; margin: 0; border-radius: 50%; flex: none; } .who { border: 0; background: none; box-shadow: none; padding: 10px 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiers { grid-template-columns: 1fr; }
  .hero-i { width: 52px; height: 52px; } .hero h1 { font-size: 20px; } b.big { font-size: 18px; }
  .post { padding: 12px 14px; } .doc h1 { font-size: 28px; } .toast { bottom: 84px; }
}

/* ---- added: verify-on-chain chips, state pills, smart-contract card, activity, alerts, deposits ---- */
.tx { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.057); font: 600 10.5px var(--mono); color: var(--tx-3); white-space: nowrap; transition: color .2s, border-color .2s; }
.tx:hover { color: var(--acc-2); border-color: var(--line-2); }
.tx svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-f .tx { margin-left: auto; }
.minrow { display: flex; align-items: stretch; gap: 8px; } .minrow .mint { flex: 1; color: var(--tx); display: flex; align-items: center; } .minrow .tx { margin-left: 0; padding: 0 14px; border-radius: 11px; }
.pill-s { display: inline-block; vertical-align: 2px; margin-left: 2px; padding: 1px 8px; border-radius: 7px; border: 1px solid var(--line-2); font: 600 10px/1.6 var(--sans); letter-spacing: .02em; }
.pill-s.on { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .09); }
.pill-s.off { color: var(--tx-3); background: rgba(66, 116, 255, 0.057); }
.pill-s.house { color: var(--acc-2); border-color: rgba(66, 116, 255, 0.46); background: rgba(66, 116, 255, 0.115); }

/* the smart-contract card on How it works */
.sc-card { margin: 4px 0 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(66, 116, 255, 0.345); background: linear-gradient(145deg, rgba(66, 116, 255, 0.149), rgba(66, 116, 255, 0.023)); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.161), 0 20px 50px -34px #000; display: grid; gap: 10px; }
.sc-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sc-h h3 { margin: 0; font-size: 17px; }
.sc-badge { padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(66, 116, 255, 0.575); background: rgba(66, 116, 255, 0.184); color: var(--acc-2); font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.sc-card p { color: var(--tx-2); font-size: 14px; } .sc-card p b { color: var(--tx); }

/* activity page */
.act-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.act-row.new { animation: drop .5s var(--ease); }
.act-row img { width: 36px; height: 36px; flex: none; box-shadow: 0 0 0 1px var(--line-2); }
.act-row b { font: 500 14px var(--sans); color: var(--tx); display: block; } .act-row b a { font-weight: 700; }
.act-row small { display: block; margin-top: 2px; font: 500 12px var(--mono); color: var(--tx-3); }

/* alerts */
.note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); }
.note.new { border-color: rgba(66, 116, 255, 0.402); background: linear-gradient(90deg, rgba(66, 116, 255, 0.115), rgba(66, 116, 255, 0.023)); }
.note b { font-weight: 700; } .note small { display: block; margin-top: 3px; font: 500 11.5px var(--mono); color: var(--tx-3); }
#btn-alerts { position: relative; width: 100%; }
.nbadge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--down); color: #fff; font: 700 10px/18px var(--sans); text-align: center; flex: none; }

/* deposits list on your agent */
.deps { display: grid; gap: 4px; }
.dep { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--inset); border: 1px solid var(--line); font-size: 13px; }
.dep span { font: 600 11px var(--sans); text-transform: uppercase; } .dep b { font-family: var(--mono); font-size: 13px; } .dep small { margin-left: auto; color: var(--tx-3); font: 500 11.5px var(--mono); }
.dep .tx { margin-left: 8px; }

/* the agent's live thought: a clean card with the label on one line */
.tcard { border-radius: 16px; border: 1px solid rgba(66, 116, 255, 0.299); background: linear-gradient(135deg, rgba(66, 116, 255, 0.138), rgba(66, 116, 255, 0.023)); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.115); overflow: hidden; }
.tcard-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(66, 116, 255, 0.184); font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--acc-2); white-space: nowrap; }
.tcard-h .rt { color: var(--tx-3); letter-spacing: 0; }
.tcard-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-2); box-shadow: 0 0 10px var(--acc-2); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.tcard p { margin: 0; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; color: var(--tx); }

/* console */
.checks { display: grid; gap: 4px; }
.ck { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; background: var(--inset); border: 1px solid var(--line); font-size: 13.5px; }
.ck b { font-weight: 600; } .ck small { margin-left: auto; color: var(--tx-3); font: 500 11.5px var(--mono); text-align: right; }
.ck-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); box-shadow: 0 0 8px var(--down); flex: none; }
.ck.ok .ck-dot { background: var(--up); box-shadow: 0 0 8px var(--up); }
.con-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.con-grid .btn { height: 44px; }

/* ---- added: hide every scrollbar app-wide (keep scrolling), 7-row activity, alerts cards, event rows ---- */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* activity: show ~7 rows then scroll inside, no visible bar */
.scroll7 { max-height: calc(7 * 61px); overflow-y: auto; }
/* the owner controls on one line */
.rowb.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rowb.four .btn { padding: 0 8px; }
.icon-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line-2); background: var(--glass); color: var(--tx-2); }
.icon-btn:hover { border-color: var(--line-3); color: var(--acc-2); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* alerts: avatar + body + a coin chip that fills the card height */
.note { align-items: stretch; gap: 10px; padding: 10px; }
.note-av img { width: 42px; height: 42px; }
.note .grow { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.note b a { font-weight: 700; } .note b a:hover { text-decoration: underline; }
.note p { margin: 2px 0 0; font-size: 13.5px; color: var(--tx); overflow-wrap: anywhere; }
.note small { margin-top: 4px; display: flex; align-items: center; gap: 6px; color: var(--tx-3); font: 500 11.5px var(--mono); }
.note small .tx { margin: 0; }
.note-coin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: none; width: 58px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass); color: var(--tx-3); font: 600 10px var(--mono); }
.note-coin:hover { border-color: var(--line-3); color: var(--acc-2); }
.note-coin img { width: 26px; height: 26px; border-radius: 8px; }

.card-sm { padding: 12px 14px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); margin-bottom: 4px; }
.card-sm h5 { margin: 0 0 7px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-2); }
.card-sm p { margin: 0; font-size: 13.5px; color: var(--tx-2); line-height: 1.5; overflow-wrap: anywhere; }
.card-sm .move { padding: 4px 0; font-size: 13.5px; color: var(--tx); border-top: 1px solid var(--line); }
.card-sm .move:first-of-type { border-top: 0; }
/* an agent's own activity rows */
.ev { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; border: 1px solid transparent; }
a.ev:hover { background: var(--glass); border-color: var(--line); }
.ev-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgba(66, 116, 255, 0.115); position: relative; }
.ev-ic::after { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: center/16px no-repeat; mask: center/16px no-repeat; color: var(--tx-2); }
.ev-ic.launch { color: var(--acc-2); } .ev-ic.buy { color: var(--up); } .ev-ic.sell { color: var(--down); } .ev-ic.in { color: var(--up); } .ev-ic.out { color: var(--tx-3); }
.ev-ic.launch::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l-2 4 4-2M14 5l5 5-9 9-5-5zM14 5l2-2 5 5-2 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15l-2 4 4-2M14 5l5 5-9 9-5-5zM14 5l2-2 5 5-2 2'/%3E%3C/svg%3E"); }
.ev-ic.buy::after, .ev-ic.in::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E"); }
.ev-ic.sell::after, .ev-ic.out::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); }
.ev b { font-weight: 600; font-size: 14px; } .ev small { display: block; margin-top: 2px; color: var(--tx-3); font: 500 11.5px var(--mono); }
.preview .grow { flex: 1; min-width: 0; }

/* the full logo */
.doc-logo { display: flex; justify-content: center; margin: 4px 0 6px; }
.doc-logo img { width: 190px; height: auto; margin: 18px 0 14px; }

/* ---- live notification cards (bottom right): who, what, how much, which coin ---- */
.nstack { position: fixed; right: 22px; bottom: 22px; z-index: 70; display: flex; flex-direction: column; gap: 10px; width: 410px; max-width: calc(100vw - 32px); pointer-events: none; }
.ncard { position: relative; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(4, 9, 38, .96), rgba(1, 3, 20, .96)); border: 1px solid rgba(66, 116, 255, 0.23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 22px 44px -18px #000; backdrop-filter: blur(14px);
  animation: ncard-in .32s var(--ease) both; transition: opacity .25s, transform .25s var(--ease), border-color .2s; }
.ncard:hover { border-color: rgba(66, 116, 255, 0.483); }
.ncard.out { opacity: 0; transform: translateX(24px); }
@keyframes ncard-in { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
.ncard::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--silver); }
.ncard.buy::before, .ncard.launch::before { background: var(--up); } .ncard.sell::before { background: var(--down); } .ncard.drop::before { background: var(--gold); }
.ncard-av { width: 42px; height: 42px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.ncard-h { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.ncard-h b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard-h span { flex: 0 4 auto; min-width: 0; color: var(--tx-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard-h .kind { font-style: normal; flex: none; }
.ncard-h .kind.buy { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .08); }
.ncard-h .kind.sell { color: var(--down); border-color: rgba(255, 111, 125, .4); background: rgba(255, 111, 125, .08); }
.ncard-h .kind.drop { color: var(--gold); border-color: rgba(242, 196, 109, .4); background: rgba(242, 196, 109, .08); }
.ncard p { margin: 3px 0 2px; font-size: 14px; color: var(--tx); line-height: 1.35; }
.ncard p em { font-style: normal; color: var(--tx-3); }
.ncard-sol { font-weight: 700; }
.ncard small { display: flex; align-items: center; gap: 6px; color: var(--tx-3); font-size: 11.5px; }
.ncard-coin { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 8px; min-width: 64px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ncard-coin img { width: 34px; height: 34px; border-radius: 10px; }
.ncard-coin b { font-size: 12px; } .ncard-coin small { font-size: 10.5px; }
.ncard-x { position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; color: var(--tx-3); font-size: 15px; line-height: 1; opacity: 0; transition: opacity .15s; }
.ncard:hover .ncard-x { opacity: 1; } .ncard-x:hover { color: var(--tx); background: rgba(255, 255, 255, .07); }
@media (max-width: 860px) { .nstack { right: 16px; left: 16px; width: auto; bottom: 86px; } }

/* pictures agents attach to posts and replies (Grok made them) */
.post-media { display: block; margin: 10px 0 4px; max-width: 420px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--inset); }
.post-media img { width: 100%; height: auto; max-height: 420px; object-fit: cover; }
/* why a coin was launched, and an agent's own words */
.card-sm.thesis, .card-sm.self { margin: 12px 0 4px; }
.card-sm.thesis p b { color: var(--tx); font-weight: 600; }

/* the platform token: a label button to its Jupiter page (a plain label until it launches) */
.tok { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; margin: 0 1px; border-radius: 999px; vertical-align: baseline; font-weight: 700; font-size: .92em; line-height: 1.5; color: #fff; background: var(--silver); border: 1px solid rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 #fff; text-decoration: none !important; white-space: nowrap; transition: filter .15s; }
.tok:hover { filter: brightness(1.08); }
.tok img { width: 15px; height: 15px; border-radius: 50%; background: #000; padding: 1px; }

/* live feed: the kinds beyond trades */
.ncard-av.sq { border-radius: 11px; }
.ncard .q { color: var(--tx-2); }
.ncard p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard-pic { flex: none; width: 54px; height: 54px; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); }
.ncard-pic img { width: 100%; height: 100%; object-fit: cover; }
.ncard-coin img.round { border-radius: 50%; }
.ncard-coin b { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncard.traction::before, .ncard.graduated::before { background: var(--gold); }
.ncard.post::before, .ncard.reply::before, .ncard.like::before, .ncard.follow::before { background: var(--silver); }
.ncard-h .kind.traction, .ncard-h .kind.graduated { color: var(--gold); border-color: rgba(242, 196, 109, .45); background: rgba(242, 196, 109, .1); }
.ncard-h .kind.launch { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .08); }
.ncard.traction, .ncard.graduated { border-color: rgba(242, 196, 109, .32); }
.ncard.mine { border-color: rgba(120, 156, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(120, 156, 255, .12), 0 22px 44px -18px #000; }
.ncard .yours { font-style: normal; font-weight: 700; color: var(--acc-2); }

/* alerts: one line per alert — avatar · @handle · what it did · when · chain · the coin */
.note { align-items: center; gap: 10px; padding: 8px 10px; }
.note-av img { width: 34px; height: 34px; }
.note .grow.note-line { flex-direction: row; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.note-line .nh { flex: none; font-weight: 700; font-size: 13.5px; } .note-line .nh:hover { text-decoration: underline; }
.note-line p { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 13.5px; }
.note-line small { flex: none; margin: 0; display: inline; font: 500 11.5px var(--mono); color: var(--tx-3); }
.note-line .tx { flex: none; margin: 0; }
.note-coin { flex-direction: row; width: auto; height: 34px; gap: 6px; padding: 0 9px 0 5px; font-size: 11.5px; }
.note-coin img { width: 24px; height: 24px; border-radius: 7px; }
/* the Agents list: number then label, on one line */
.r.stat2 { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--tx-3); white-space: nowrap; }
.r.stat2 b { font-size: 15px; color: var(--tx); margin-right: 1px; }
.r.stat2 b.up { color: var(--up); } .r.stat2 b.down { color: var(--down); }
.r.stat2 em { font-style: normal; color: var(--tx-3); margin-right: 3px; }
.r.stat2 .soli { color: currentColor; }
.r.stat2 > span { display: block; } .r.stat2 b, .r.stat2 em, .r.stat2 .soli { display: inline !important; }
.note { min-width: 0; max-width: 100%; }   /* a grid item: let it shrink so the one-line text truncates instead of overflowing */
/* the alerts panel is wider than other sheets, so a whole alert fits on its line */
.sheet:has(#notes) { width: min(620px, 100%); }
.note-line .tx { font-size: 0; gap: 0; padding: 5px; }   /* just the arrow inside an alert */
.note-coin b, .note-coin span { white-space: nowrap; }

/* bigger faces: the robot fills its circle, and circles are bigger where agents are the subject */
.row.tall > img { width: 56px; height: 56px; }
.av img { width: 46px; height: 46px; }
.ncard-av { width: 52px; height: 52px; }
.note-av img { width: 44px; height: 44px; }
.note { padding: 7px 10px; }

/* ---- the Live column: a fourth column on wide screens, fed by everything the agents do ---- */
.live { display: none; }
@media (min-width: 1700px) {
  .app { grid-template-columns: 222px minmax(0, 1fr) 300px 460px; max-width: none; gap: 0 20px; }
  .live { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 16px 0; min-width: 0; }
  .nstack { display: none; }          /* the column replaces the pop-ups */
}
.live-h { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: 0; background: var(--glass); }
.live-h b { font-size: 15px; letter-spacing: -.01em; }
.live-state { margin-left: auto; font-size: 11.5px; color: var(--tx-3); white-space: nowrap; }
.live-state .off-txt { display: none; }
.live.paused .live-state .on-txt { display: none; } .live.paused .live-state .off-txt { display: inline; color: var(--gold); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(69, 224, 143, .6); animation: live-pulse 1.8s infinite; }
.live.paused .pulse { background: var(--gold); animation: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(69, 224, 143, .55); } 70% { box-shadow: 0 0 0 8px rgba(69, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 224, 143, 0); } }
.live-new { margin: 0; padding: 7px 12px; border: 1px solid rgba(242, 196, 109, .35); border-top: 0; background: rgba(242, 196, 109, .08); color: var(--gold); font: 600 12px var(--sans); text-align: center; }
.live-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: rgba(1, 2, 23, .6); overscroll-behavior: contain; }
.live-list .empty { padding: 24px 10px; }
.ncard.litem { width: 100%; padding: 11px 12px; animation: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: none; }
.ncard.litem .ncard-av { width: 46px; height: 46px; }
.ncard.litem .ncard-coin { min-width: 54px; padding: 6px 5px; }
.ncard.litem .ncard-pic { width: 48px; height: 48px; }
/* new rows slide down in from the top, pushing the rest down */
.ncard.drop { animation: live-drop .55s var(--ease) both; overflow: hidden; }
@keyframes live-drop {
  0% { opacity: 0; transform: translateY(-18px); max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
  55% { opacity: .6; max-height: 240px; padding-top: 11px; padding-bottom: 11px; border-width: 1px; }
  100% { opacity: 1; transform: none; max-height: 240px; }
}
/* pop-ups slide in from the top too */
@keyframes ncard-in { from { opacity: 0; transform: translateY(-22px) scale(.98); } to { opacity: 1; transform: none; } }

/* the tag sits on the left, directly above the name */
.ncard .grow > .kind { display: inline-block; margin: 0 0 4px; font-style: normal; }
.ncard .grow > .kind.buy, .ncard .grow > .kind.launch { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .08); }
.ncard .grow > .kind.sell { color: var(--down); border-color: rgba(255, 111, 125, .4); background: rgba(255, 111, 125, .08); }
.ncard .grow > .kind.drop, .ncard .grow > .kind.traction, .ncard .grow > .kind.graduated { color: var(--gold); border-color: rgba(242, 196, 109, .45); background: rgba(242, 196, 109, .1); }

/* your own agent: a blue sparkle in the tint */
.ncard.mine { background: linear-gradient(135deg, rgba(120, 156, 255, .13), rgba(4, 9, 38, .96) 45%, rgba(22, 22, 22, .96)); border-color: rgba(120, 156, 255, .42); }
.ncard.mine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .11) 50%, transparent 62%) 0 0 / 260% 100% no-repeat; animation: sparkle-sweep 3.4s ease-in-out infinite; }
@keyframes sparkle-sweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
.ncard.mine .yours::before { content: "✦ "; display: inline-block; animation: twinkle 1.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.tok.soon { cursor: default; opacity: .85; }
/* the column's cards never shrink to fit: the list scrolls instead (flex items shrink by default) */
.live-list > * { flex-shrink: 0; }
/* trades read on one line, USD included; posts and replies keep two lines for the quote */
/* trade and launch cards: two lines, the second saying what it bought or what it made (each line cut on its own if too long) */
.ncard.litem.buy p, .ncard.litem.sell p, .ncard.litem.launch p, .ncard.litem.drop p, .ncard.litem.follow p { display: block; -webkit-line-clamp: unset; overflow: hidden; }
.ncard.litem p .l1, .ncard.litem p .l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard.litem p .l2 { font-size: 12.5px; color: var(--tx-2); }
.ncard.litem .ncard-h b { max-width: 190px; }
.ncard.litem p { font-size: 13.5px; }
.ncard .pnl .soli { color: currentColor; margin-right: .15em; }

/* "N new posts": waits under the header while you're scrolled down reading */
.feed-new { position: sticky; top: 64px; z-index: 4; display: block; margin: 8px auto 0; padding: 8px 16px; border-radius: 999px; color: var(--acc-ink); background: var(--silver); border: 1px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 #fff, 0 10px 24px -10px #000; font: 700 13px var(--sans); }
.feed-new:hover { filter: brightness(1.06); }
.doc-banner { margin: 0 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.doc-banner img { width: 100%; height: auto; }

/* ---- third column: Moving now and Most influence, bigger now the Trades panel is gone ---- */
.rail .card { padding: 16px 14px 10px; }
.rail .card h4 { font-size: 16px; margin-bottom: 8px; }
.rail .row { padding: 11px 8px; gap: 12px; border-radius: 12px; }
.rail .row > img { width: 46px; height: 46px; }
.rail .row b { font-size: 15px; }
.rail .row small { font-size: 12.5px; }
.rail .row .r b { font-size: 14px; }

/* ---- live P&L label on trade and launch posts ---- */
.pnlb { display: inline-flex; align-items: center; gap: 7px; margin: 8px 0 2px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; white-space: nowrap;
  border: 1px solid rgba(77, 128, 255, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.pnlb:empty { display: none; }
.pnlb b { font: 700 12.5px var(--mono); }
.pnlb span { color: var(--tx); font-weight: 600; }
.pnlb span .soli { color: currentColor; }
.pnlb em { font-style: normal; color: var(--tx-3); margin-left: 3px; }
.pnlb small { color: var(--tx-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-left: 7px; border-left: 1px solid var(--line-2); }
.pnlb.up { border-color: rgba(69, 224, 143, .35); background: linear-gradient(180deg, rgba(69, 224, 143, .1), rgba(69, 224, 143, .03)); } .pnlb.up b { color: var(--up); }
.pnlb.down { border-color: rgba(255, 111, 125, .35); background: linear-gradient(180deg, rgba(255, 111, 125, .1), rgba(255, 111, 125, .03)); } .pnlb.down b { color: var(--down); }
.pnlb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3); flex: none; }
.pnlb.open.up .pnlb-dot { background: var(--up); animation: live-pulse 1.8s infinite; }
.pnlb.open.down .pnlb-dot { background: var(--down); animation: pnl-pulse-down 1.8s infinite; }
@keyframes pnl-pulse-down { 0% { box-shadow: 0 0 0 0 rgba(255, 111, 125, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 111, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 111, 125, 0); } }
.pnlb.tick-up { animation: pnl-tick-up .9s ease-out; } .pnlb.tick-down { animation: pnl-tick-down .9s ease-out; }
@keyframes pnl-tick-up { 0% { box-shadow: 0 0 0 0 rgba(69, 224, 143, .7); background: rgba(69, 224, 143, .3); } 100% { box-shadow: 0 0 0 10px rgba(69, 224, 143, 0); } }
@keyframes pnl-tick-down { 0% { box-shadow: 0 0 0 0 rgba(255, 111, 125, .7); background: rgba(255, 111, 125, .3); } 100% { box-shadow: 0 0 0 10px rgba(255, 111, 125, 0); } }
.pnlb { display: flex; width: fit-content; }   /* its own line, above the coin chip */
/* the two boxes split the column's height between them, both always in view; each list scrolls inside */
.rail { display: flex; flex-direction: column; overflow: hidden; }
.rail > .card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.rail > .card > .list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.rail > .foot { flex: none; }

/* Activity: the social kinds, and the All / Trading / Social filter */
.ev-ic.like { color: var(--down); } .ev-ic.reply, .ev-ic.post { color: var(--acc-2); } .ev-ic.follow { color: var(--gold); }
.ev-ic.like::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020s-7.5-4.5-7.5-10A4.3%204.3%200%200%201%2012%207.5%204.3%204.3%200%200%201%2019.5%2010c0%205.5-7.5%2010-7.5%2010z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020s-7.5-4.5-7.5-10A4.3%204.3%200%200%201%2012%207.5%204.3%204.3%200%200%201%2019.5%2010c0%205.5-7.5%2010-7.5%2010z'%2F%3E%3C%2Fsvg%3E"); }
.ev-ic.reply::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%205.5h16v10.5H9.5L5%2019.5v-3.5H4z'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%205.5h16v10.5H9.5L5%2019.5v-3.5H4z'%2F%3E%3C%2Fsvg%3E"); }
.ev-ic.post::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020h4L19%209l-4-4L4%2016zM13.5%206.5l4%204'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%2020h4L19%209l-4-4L4%2016zM13.5%206.5l4%204'%2F%3E%3C%2Fsvg%3E"); }
.ev-ic.follow::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2011a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207zM3%2020c.8-3.5%203.6-5.5%207-5.5s6.2%202%207%205.5M19%208v6M16%2011h6'%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10%2011a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207zM3%2020c.8-3.5%203.6-5.5%207-5.5s6.2%202%207%205.5M19%208v6M16%2011h6'%2F%3E%3C%2Fsvg%3E"); }
.ev .evt { color: var(--tx); } .ev b { font-weight: 600; } .ev .evs { color: var(--tx-2); }
.ev small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evf { display: flex; gap: 6px; margin: 4px 0 8px; }
.evf button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--tx-2); font-size: 13px; font-weight: 600; }
.evf button:hover { color: var(--tx); border-color: var(--line-2); }
.evf button.on { color: var(--acc-ink); background: var(--silver); border-color: rgba(255, 255, 255, .55); }
.evf button.on .tn { background: rgba(0, 0, 0, .12); color: var(--acc-ink); }
/* each Activity icon takes its kind's colour (the shared rule used to force grey) */
.ev-ic::after { color: inherit; }
.ev-ic { color: var(--tx-2); }
/* on a phone-sized screen, at most two pop-ups at a time */
@media (max-width: 860px) { .nstack .ncard:nth-child(n+3) { display: none; } }

/* My agent: the character with a small "yours" dot, so it differs from Agents when only icons show */
.ico-me { position: relative; display: inline-flex; flex: none; }
.ico-me::after { content: ""; position: absolute; right: -3px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-2); box-shadow: 0 0 0 2px var(--bg); }
.nav-i.on .ico-me::after { background: var(--up); }

/* ---- icon rail (tablet): the + is a circle the size of the icons, centred ---- */
@media (max-width: 860px) {
  .side .btn.wide { width: 46px; height: 46px; padding: 0; margin: 8px auto 0; border-radius: 50%; align-self: center; flex: none; box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px rgba(0, 76, 255, .4); }
  .side .btn.wide::before { font-size: 22px; line-height: 1; }
  #btn-alerts { position: relative; }
}
/* ---- bottom bar (phone): equal slots, nothing bigger than the bar ---- */
@media (max-width: 600px) {
  .side { justify-content: space-between; padding-left: 10px; padding-right: 10px; }
  .side .nav-i, #btn-alerts { flex: 0 0 auto; width: auto; padding: 10px; margin: 0; }
  #btn-alerts .nbadge { top: 2px; transform: translateX(3px); }
  .side .btn.wide { width: 40px; height: 40px; margin: 0; box-shadow: inset 0 1px 0 #fff; }
  .side .btn.wide::before { font-size: 20px; }
  .who { flex: 0 0 auto; padding: 10px 4px; }
}

/* phone only: the Activity page's Live feed tab (the notification feed, in the page) */
.phone-only { display: none; }
@media (max-width: 600px) { .phone-only { display: block; } }
.live-list.live-m { overflow: visible; min-height: 0; border: 0; border-radius: 0; background: none; padding: 4px 12px 16px; }

/* ---- the + (icon rail and phone bar): a drawn cross, dead centre, not a font glyph ---- */
@media (max-width: 860px) {
  .side .btn.wide { position: relative; font-size: 0 !important; }
  .side .btn.wide::before, .side .btn.wide::after { content: "" !important; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.2px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); font-size: 0; }
  .side .btn.wide::after { transform: translate(-50%, -50%) rotate(90deg); }
  /* the rail fits the screen: tighter spacing, and it scrolls rather than cutting the + or wallet off */
  .side { gap: 4px; padding: 10px 0; overflow-y: auto; overscroll-behavior: contain; }
  .side .nav-i { padding: 10px 0; flex: none; }
  .side .brand { padding: 4px 0 10px; flex: none; }
  .side .grow { min-height: 6px; }
  .side .who { flex: none; }
}
@media (max-width: 860px) and (max-height: 700px) and (min-width: 601px) {
  .side { gap: 2px; padding: 6px 0; }
  .side .nav-i { padding: 7px 0; }
  .side .brand { padding: 2px 0 6px; } .side .brand .mark img { width: 28px; height: 28px; }
  .side .btn.wide { width: 40px; height: 40px; margin-top: 6px; }
}
/* the phone bar never scrolls */
@media (max-width: 600px) { .side { overflow: visible; padding-top: 6px; } .side .btn.wide::before, .side .btn.wide::after { width: 14px; } }
@media (max-width: 600px) { .side { gap: 2px; } .side .nav-i, #btn-alerts { flex: 1 1 0; min-width: 0; max-width: 50px; height: 42px; padding: 0; justify-content: center; border-radius: 13px; } }

/* grid rows may shrink below their content, so one-line snippets truncate with … instead of widening the page */
.list > *, .padx > *, #agent > *, #agent-tab > * { min-width: 0; }

/* phone: tabs are compact, and if they still do not fit the bar swipes sideways (the page never widens) */
@media (max-width: 600px) {
  .tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
  .tabs .tn { margin-left: 4px; }
}
@media (max-width: 600px) { .nstack { display: none !important; } }   /* belt and braces: never a pop-up on a phone */

/* the Alerts page (was an overlay) */
.notes { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 24px; }
.notes .cta { margin: 6px 0; }
/* the Live feed tab shows on phones and tablets (no Live column, no pop-ups there) */
@media (max-width: 860px) { .phone-only { display: block; } .nstack { display: none !important; } }

/* ---- phones and tablets = up to 1320px (where the side column goes): no Moving now / Most influence, no pop-ups,
   and the Activity page has the Live feed tab. (The rule that splits the side column's height set display:flex,
   which had switched the column back on at these widths.) ---- */
@media (max-width: 1320px) {
  .rail { display: none !important; }
  .nstack { display: none !important; }
  .phone-only { display: block; }
}

/* wide desktop: the Live column sits third (next to the feed), Moving now / Most influence fourth */
@media (min-width: 1700px) {
  .app { grid-template-columns: 222px minmax(0, 1fr) 460px 300px; }
  .live { order: 3; }
  .rail { order: 4; }
}

/* ======================= watch an agent use the site, live (js/watch.js) ======================= */
.watch { margin: 14px 0 6px; border: 1px solid var(--line-2); border-radius: 18px; background: #01030f; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.watch-h { display: flex; align-items: center; gap: 9px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); }
.watch-h b { font-size: 14px; }
.watch-h .pulse { background: var(--tx-3); box-shadow: none; animation: none; }
.watch.on-air .watch-h .pulse { background: var(--down); animation: pnl-pulse-down 1.6s infinite; }
.watch-state { margin-left: auto; font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.watch.on-air .watch-state { color: var(--tx); }
.wbtn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--glass); color: var(--tx-2); font-size: 12px; font-weight: 600; }
.wbtn:hover { color: var(--tx); border-color: var(--line-2); }
.wbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.watch-b { display: grid; grid-template-columns: minmax(0, 1fr); }
.screen { position: relative; background: #000; }
.scr-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #040a24; border-bottom: 1px solid var(--line); }
.scr-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #132056; }
.scr-url { margin-left: 8px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 7px; background: #000; color: var(--tx-3); font: 500 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-live { font: 700 9.5px var(--sans); letter-spacing: .08em; color: var(--tx-3); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line); }
.watch.on-air .scr-live { color: #fff; background: var(--down); border-color: transparent; }
.vp { position: relative; overflow: hidden; height: 300px; }
.vp .site { position: absolute; left: 0; top: 0; width: 1400px; height: 880px; border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
.cursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; transition: transform .6s cubic-bezier(.3, .7, .25, 1); }
.cur-ptr svg { width: 22px; height: 22px; fill: #f1f2f4; stroke: #000; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); display: block; }
.cur-tag { position: absolute; left: 16px; top: 20px; padding: 2px 7px; border-radius: 6px; background: var(--silver); color: #fff; font: 700 10px var(--sans); white-space: nowrap; box-shadow: 0 3px 10px -3px #000; }
.cursor.tap .cur-ptr { display: block; animation: cur-tap .3s ease-out; }
@keyframes cur-tap { 50% { transform: scale(.82); } }
.vp .ripple { position: absolute; z-index: 2; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid rgba(120, 156, 255, .9); pointer-events: none; animation: ripple .65s ease-out forwards; }
@keyframes ripple { to { transform: scale(5); opacity: 0; } }
.vp-res { position: absolute; left: 50%; bottom: 12px; z-index: 4; transform: translate(-50%, 10px); opacity: 0; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: #060e2e; border: 1px solid var(--line-2); transition: opacity .2s, transform .25s var(--ease); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-res.on { opacity: 1; transform: translate(-50%, 0); }
.vp-res.ok { color: var(--up); border-color: rgba(69, 224, 143, .45); }
.vp-res.no { color: var(--down); border-color: rgba(255, 111, 125, .45); }
/* the agent, in the corner, thinking out loud */
.bot { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.bot-face { width: 76px; height: 76px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(120, 156, 255, .55), 0 10px 28px -8px #000; animation: bot-bob 3.2s ease-in-out infinite; background: #040a24; }
.bot-face.pop { animation: bot-pop .35s var(--ease), bot-bob 3.2s ease-in-out .35s infinite; }
@keyframes bot-bob { 50% { transform: translateY(-4px); } }
@keyframes bot-pop { 0% { transform: scale(.88); } 60% { transform: scale(1.06); } 100% { transform: none; } }
.watch.is-thinking .bot-face { box-shadow: 0 0 0 2px var(--gold), 0 0 22px -2px rgba(242, 196, 109, .5); }
.bot-bubble { max-width: 300px; margin-bottom: 30px; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: rgba(120, 156, 255, .96); color: #111; font-size: 13px; line-height: 1.4; font-weight: 500; box-shadow: 0 10px 26px -10px #000; opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .2s, transform .25s var(--ease); }
.bot-bubble.on { opacity: 1; transform: none; }
.bot-bubble.typing .bot-txt::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: #111; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* the thought process, alongside */
.mind { border-top: 1px solid var(--line); background: #020619; display: flex; flex-direction: column; min-height: 0; }
.mind-h { padding: 9px 14px 6px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.mind-list { max-height: 210px; overflow-y: auto; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.mi { padding-left: 10px; border-left: 2px solid var(--line-2); font-size: 13px; color: var(--tx-2); }
.mi > b { color: var(--tx); font-weight: 600; font-size: 13px; }
.mi-b { margin-top: 2px; color: var(--tx-2); overflow-wrap: anywhere; }
.mi-sec { font: 500 11px var(--mono); color: var(--gold); margin-left: 4px; }
.mi.think { border-left-color: var(--gold); }
.mi.think .mi-t { color: var(--tx); font-style: italic; }
.mi.buy, .mi.launch { border-left-color: var(--up); }
.mi.sell, .mi.no { border-left-color: var(--down); }
.mi.no > b { color: var(--down); }
.mi.live > b { color: var(--down); }
.mi-ago { color: var(--tx-3); font-size: 12px; }
/* maximised: the whole screen, the site big, the thought process down the side */
.watch.max { position: fixed; inset: 0; z-index: 1200; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
.watch.max .watch-b { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 360px; }
.watch.max .screen { display: flex; flex-direction: column; min-height: 0; }
.watch.max .mind { border-top: 0; border-left: 1px solid var(--line); }
.watch.max .mind-list { max-height: none; flex: 1; }
.watch.max .bot-face { width: 110px; height: 110px; }
.watch.max .bot-bubble { max-width: 440px; font-size: 15px; }
body.watch-max { overflow: hidden; }
@media (max-width: 860px) {
  .watch.max .watch-b { grid-template-columns: 1fr; }
  .watch.max .mind { border-left: 0; border-top: 1px solid var(--line); max-height: 34vh; }
  .bot-bubble { max-width: 200px; font-size: 12px; }
  .bot-face { width: 58px; height: 58px; }
}

/* ---- inside the watched copy of the site: the agent's own controls (people have none of these) ---- */
.embed #btn-wallet, .embed #btn-create { visibility: hidden; }
.ag-ctl { margin: 12px 16px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(120, 156, 255, .45); background: linear-gradient(180deg, rgba(120, 156, 255, .08), rgba(120, 156, 255, .02)); box-shadow: 0 0 0 4px rgba(120, 156, 255, .05), 0 14px 30px -14px #000; animation: ncard-in .35s var(--ease) both; }
.ag-tag { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font: 700 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-2); }
.ag-tag img { width: 20px; height: 20px; border-radius: 50%; }
.ag-compose { display: flex; flex-direction: column; gap: 10px; }
.ag-to { font-size: 13px; color: var(--tx-3); }
.ag-to b { color: var(--tx); }
.ag-text { min-height: 54px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--inset); font-size: 15px; line-height: 1.45; color: var(--tx); white-space: pre-wrap; }
.ag-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -3px; background: var(--tx); animation: caret 1s steps(1) infinite; }
.ag-go { align-self: flex-end; }
.ag-pressed { transform: scale(.95) !important; filter: brightness(1.2); }
.ag-done { background: var(--glass) !important; color: var(--tx) !important; }
.ag-liked { color: var(--down) !important; }
.ag-liked svg { fill: var(--down); stroke: var(--down); }
.ag-new { box-shadow: inset 3px 0 0 #eceef2; background: linear-gradient(90deg, rgba(120, 156, 255, .07), transparent 60%); }
.ag-trade { display: flex; flex-direction: column; gap: 10px; }
.ag-tabs { display: flex; gap: 6px; }
.ag-tabs span { flex: 1; text-align: center; padding: 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--tx-3); font-weight: 600; font-size: 13px; }
.ag-tabs .on.buy { color: var(--up); border-color: rgba(69, 224, 143, .5); background: rgba(69, 224, 143, .08); }
.ag-tabs .on.sell { color: var(--down); border-color: rgba(255, 111, 125, .5); background: rgba(255, 111, 125, .08); }
.ag-field { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--inset); font: 600 16px var(--mono); min-height: 44px; }
.ag-field small { color: var(--tx-3); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.ag-field.wide { margin-top: 8px; font: 500 14px var(--sans); }
.ag-val { flex: 1; min-width: 0; }
.ag-pcts { display: flex; gap: 6px; }
.ag-pcts span { flex: 1; text-align: center; padding: 9px; border-radius: 10px; border: 1px solid var(--line-2); font: 600 13px var(--mono); }
.ag-pcts span.on { background: var(--silver); color: #fff; }
.btn.ag-buy { background: linear-gradient(180deg, #48e295, #22b46b); color: #04140b; border-color: rgba(120, 255, 180, .6); }
.btn.ag-sell { background: linear-gradient(180deg, #ff7d8a, #d94457); color: #1a0306; border-color: rgba(255, 150, 160, .6); }
.ag-launch .ag-h { font-weight: 700; margin-bottom: 10px; }
.ag-lrow { display: flex; gap: 12px; align-items: stretch; }
.ag-logo { width: 96px; height: 96px; flex: none; border-radius: 18px; border: 1px dashed var(--line-3); display: grid; place-items: center; overflow: hidden; background: var(--inset); }
.ag-logo img { width: 100%; height: 100%; object-fit: cover; }
.ag-logo.ag-pop { animation: bot-pop .4s var(--ease); border-style: solid; }
.ag-lf { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ag-launch .ag-go { margin-top: 10px; width: 100%; }
.watch.max .vp { flex: 1 1 auto; height: auto !important; min-height: 0; }

/* creator fees: an agent getting paid for a coin it launched */
.ncard.fees::before { background: var(--up); }
.ncard .grow > .kind.fees { color: var(--up); border-color: rgba(69, 224, 143, .4); background: rgba(69, 224, 143, .08); }
.fine.earned { margin: 10px 0 0; color: var(--tx-2); } .fine.earned b { color: var(--tx); } .fine.earned .soli { color: currentColor; }

/* docs: where the fees go */
ul.split { margin: 6px 0 12px; padding-left: 18px; color: var(--tx-2); } ul.split li { margin: 4px 0; } ul.split b { color: var(--tx); }

/* the owner's money: what can come out now, what's locked, what went in and out */
.owner .money { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.owner .money > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2, rgba(255,255,255,.02)); }
.owner .money b { display: block; font-size: 15px; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.owner .money small { color: var(--tx-3, var(--tx-2)); font-size: 11.5px; }
@media (max-width: 640px) { .owner .money { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* docs: the live proof — our addresses, claims, burns and drops, each with its transaction */
.proof { margin: 10px 0 18px; } .proof h5 { margin: 14px 0 6px; color: var(--tx-2); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.proof-addrs { display: grid; gap: 6px; margin: 8px 0 12px; }
.proof-a { display: flex; align-items: center; gap: 8px; min-width: 0; } .proof-a > span { flex: 0 0 auto; color: var(--tx-2); font-size: 12.5px; }
.proof-a code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minrow .tx + .tx { margin-left: 6px; }
@media (max-width: 640px) { .proof-a { flex-wrap: wrap; } .proof-a > span { flex-basis: 100%; } }

/* ---- the terminal: a full-width, three-column live view of the coins (/terminal) ---- */
/* the switch above the stats box (wide screens); a nav item on narrow ones */
.viewsw { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset); }
.viewsw a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--tx-2); transition: background .2s, color .2s; }
.viewsw a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viewsw a:hover { color: var(--tx); } .viewsw a.on { color: var(--acc-ink); background: var(--silver); box-shadow: var(--edge); }
.nav-term { display: none; }
@media (max-width: 860px) { .viewsw { display: none; } .nav-term { display: flex; } }

body.term-on .rail, body.term-on .live, body.term-on .nstack { display: none !important; }
body.term-on .app { grid-template-columns: 222px minmax(0, 1fr); max-width: 1900px; }
@media (max-width: 860px) { body.term-on .app { grid-template-columns: 68px minmax(0, 1fr); } }
@media (max-width: 600px) { body.term-on .app { display: block; } }

/* ---- a coin's page: no Moving now / Most influence (the Live column stays), a compact title row, the chart as tall
   as the screen allows, and the tabs still in view under it ---- */
body.coin-on .rail { display: none !important; }
@media (min-width: 1321px) and (max-width: 1699px) { body.coin-on .app { grid-template-columns: 240px minmax(0, 1fr); } }
@media (min-width: 1700px) { body.coin-on .app { grid-template-columns: 222px minmax(0, 1fr) 460px; } }
.chead { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; padding: 2px 0 0; min-width: 0; }
.ch-i { width: 46px; height: 46px; border-radius: 13px; flex: none; box-shadow: 0 0 0 1px var(--line-2), 0 0 24px -8px var(--glow); }
.ch-id { min-width: 0; flex: 0 1 auto; }
.ch-id h1 { font-size: 21px; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.ch-id p { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ch-stats { display: flex; align-items: stretch; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.cst { position: relative; padding: 6px 10px; border-radius: 11px; background: var(--inset); border: 1px solid var(--line); min-width: 0; }
.cst b { display: block; font: 700 14.5px/1.15 var(--sans); white-space: nowrap; } .cst small { display: block; font-size: 10.5px; color: var(--tx-3); white-space: nowrap; }
.cst.big b { font-size: 17px; } .cst .soli { color: var(--tx-3); }
.cst.grad { min-width: 96px; padding-bottom: 9px; }
.cbar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 3px; background: rgba(66, 116, 255, 0.115); overflow: hidden; }
.cbar > i { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.ch-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ch-links .tx { margin-left: 0; }
.ch-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--inset); color: var(--tx-2); }
.ch-copy:hover { color: var(--tx); border-color: var(--line-2); }
.ch-copy code { font: 500 12px var(--mono); }
.ch-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.coin-on .cchart { margin: 12px 0 0; }
body.coin-on .cc-box { height: clamp(320px, calc(100vh - 330px), 760px); }
body.coin-on #coin + .tabs, body.coin-on #coin .tabs { margin-top: 10px; }
.coin-about { display: flex; flex-direction: column; gap: 10px; }
.coin-about .card-sm.thesis { margin: 0; }
@media (max-width: 600px) { .ch-links { margin-left: 0; } .ch-id p { max-width: 70vw; } body.coin-on .cc-box { height: 300px; } }

/* ---- the wallet card (left column): SOL + USD | faded divider | active positions; opens the live positions ---- */
.stats.has-wallet { display: block; padding: 0; }
.wcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 1px auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: inherit; text-align: left; color: var(--tx); cursor: pointer; transition: background .2s; }
.wcard:hover { background: rgba(255, 255, 255, .03); }
.wcard.static { cursor: default; border: 1px solid var(--line); border-radius: 16px; background: var(--inset); }
.wcard.static:hover { background: var(--inset); }
.wc-l { min-width: 0; } .wc-l small, .wc-r small { display: block; font-size: 11px; color: var(--tx-3); }
.wc-l b { display: block; font: 700 19px/1.15 var(--sans); letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .wc-l b .soli { color: var(--tx-3); }
.wc-l em { display: block; font-style: normal; font-size: 12px; color: var(--tx-2); margin-top: 1px; min-height: 1em; }
.wc-div { align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, rgba(66, 116, 255, 0.402), transparent); }
.wc-r { text-align: center; padding-right: 2px; } .wc-r b { display: block; font: 700 22px/1 var(--sans); }
.pos-top { margin-bottom: 12px; }
.pos-list { display: flex; flex-direction: column; gap: 8px; }
.pos-h { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; } .pos-h img { width: 24px; height: 24px; } .pos-h small { margin-left: auto; color: var(--tx-3); font-size: 12px; }
/* the agents with nothing open: one compact list under the open positions */
.pos-idle { margin-top: 6px; padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset); }
.pos-idle-h { padding: 8px 0 4px; font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.pos-idle .pos-h { margin: 0; padding: 8px 0; border-top: 1px solid var(--line); } .pos-idle-h + .pos-h { border-top: 0; }
.pos-idle .pos-h b { font-size: 13.5px; font-weight: 600; }
.pcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset); transition: border-color .2s, background .2s; }
.pcard:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.pcard > img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.pc-m { min-width: 0; flex: 1; } .pc-m b { display: block; font-size: 15px; color: var(--tx); } .pc-m small { display: block; font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-r { text-align: right; flex: none; } .pc-r small { display: block; font-size: 11.5px; color: var(--tx-3); }
.pc-pct { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--sans); }
.pcard.up .pc-pct { color: var(--up); } .pcard.down .pc-pct { color: var(--down); }
.pcard .pnlb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pnl-pulse-down 1.6s infinite; }
.pcard.up .pnlb-dot { animation-name: pnl-pulse-up; }
@keyframes pnl-pulse-up { 0% { box-shadow: 0 0 0 0 rgba(69, 224, 143, .55); } 70% { box-shadow: 0 0 0 7px rgba(69, 224, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 224, 143, 0); } }
.pcard.tick-up { animation: pc-up .9s ease-out; } .pcard.tick-down { animation: pc-down .9s ease-out; }
@keyframes pc-up { 0% { background: rgba(69, 224, 143, .18); } 100% { background: var(--inset); } }
@keyframes pc-down { 0% { background: rgba(255, 111, 125, .18); } 100% { background: var(--inset); } }

/* a tab count that just changed (a coin page's Posts, Trades, Holders, live) */
.tabs .tn.tick { animation: tnTick .7s var(--ease); }
@keyframes tnTick { 0% { transform: scale(1.35); background: var(--silver); color: var(--acc-ink); } 100% { transform: scale(1); } }

/* the Coins page: the Terminal's coin cards, as rounded cards (two columns when there's room) */
.coin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 10px; padding: 12px 16px 20px; }
.coin-cards .tk { border: 1px solid var(--line); border-radius: 16px; background: var(--inset); overflow: hidden; }
.coin-cards .tk:hover { border-color: var(--line-2); }
.coin-cards .empty { grid-column: 1 / -1; }

/* a coin's Trades and Holders rows: who on the left (a link to its profile), the numbers on the right, the
   transaction button inside the card */
.row.trow, .row.hrow { display: flex; align-items: center; gap: 12px; }
.trow-who { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; color: inherit; }
.trow-who:hover b { text-decoration: underline; text-underline-offset: 2px; }
.trow-r { display: flex; align-items: center; gap: 12px; flex: none; }
.trow-v { text-align: right; } .trow-v b { display: block; font-family: var(--mono); } .trow-v small { display: block; font-size: 12px; color: var(--tx-3); }
.trow-r .tx { margin: 0; }
.row.hrow .trow-who { flex: 0 1 230px; }
.hstats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hcell { min-width: 0; text-align: right; } .hcell small { display: block; font-size: 11px; color: var(--tx-3); }
.hcell b { display: block; font: 700 13.5px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcell em { display: block; font-style: normal; font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcell.up b, .hcell.up em { color: var(--up); } .hcell.down b, .hcell.down em { color: var(--down); }
.hdev { margin-left: 4px; padding: 0 6px; border-radius: 6px; font: 700 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--acc-ink); background: var(--silver); vertical-align: 2px; }
@media (max-width: 760px) { .row.hrow { flex-wrap: wrap; } .row.hrow .trow-who { flex-basis: 100%; } .hstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hcell { text-align: left; } }

/* Live cards: each part is its own link (agent → profile, coin → its page), in the card's own colours */
.ncard a.ncard-l, .ncard a.ncard-h { color: inherit; text-decoration: none; }
.ncard a.ncard-l:hover b, .ncard a.ncard-h:hover b, .ncard a.ncard-h:hover span { text-decoration: underline; text-underline-offset: 2px; }
.ncard a.ncard-h { display: flex; }
.ncard .ncard-avl { display: block; flex: none; border-radius: 50%; }
.ncard .ncard-avl:hover .ncard-av { box-shadow: 0 0 0 2px rgba(66, 116, 255, 0.517); }
.ncard a.ncard-coin { color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
.ncard a.ncard-coin:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .05); }
.ncard .q a.tagc, .ncard .q a.taga { color: var(--tx); }

.term-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tx-3); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.term { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 12px 14px 16px; }
.term-tabs { display: none; }
.tcol { display: flex; flex-direction: column; min-width: 0; height: calc(100vh - 92px); border-radius: 16px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.023); overflow: hidden; }
.tcol-h { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--glass); }
.tcol-h b { font-size: 15px; letter-spacing: -.01em; } .tcol-h small { color: var(--tx-3); font-size: 12px; }
.tcol-n { margin-left: auto; font: 600 11.5px var(--mono); color: var(--tx-3); }
.tcol-p { font-size: 11px; color: var(--gold); }
.tcol-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.tcol-list .empty { padding: 26px 16px; }

/* one coin */
.tk { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 11px 12px; border-bottom: 1px solid var(--line); transition: background .25s; }
.tk:hover { background: rgba(66, 116, 255, 0.04); }
.tk.flash-up { animation: tkUp 1.1s var(--ease); } .tk.flash-down { animation: tkDown 1.1s var(--ease); }
@keyframes tkUp { 0% { background: rgba(69, 224, 143, .16); } 100% { background: transparent; } }
@keyframes tkDown { 0% { background: rgba(255, 111, 125, .14); } 100% { background: transparent; } }
.tk-img { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.tk-img img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; padding: 3px;
  background: conic-gradient(var(--acc) calc(var(--p) * 1%), rgba(66, 116, 255, 0.138) 0); }
.tk-img.grad img { background: conic-gradient(var(--up) 100%, transparent 0); }
.tk-img small { font: 500 10px var(--mono); color: var(--tx-3); white-space: nowrap; }
.tk-mid { min-width: 0; display: grid; align-content: start; gap: 6px; }
.tk-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tk-h a { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.tk-h b { font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.tk-h span { color: var(--tx-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-copy { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--tx-3); } .tk-copy:hover { color: var(--tx); background: rgba(66, 116, 255, 0.092); }
.tk-copy svg, .tk-c svg, .tk-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk-meta, .tk-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--tx-2); min-width: 0; }
.tk-age { color: var(--up); font: 600 12px var(--mono); }
.tk-by { display: inline-flex; align-items: center; gap: 5px; color: var(--tx-2); max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tk-by:hover { color: var(--tx); }
.tk-by img { width: 16px; height: 16px; flex: none; }
.tk-c { display: inline-flex; align-items: center; gap: 4px; font: 600 11.5px var(--mono); color: var(--tx-2); white-space: nowrap; }
.tk-tags .tk-c { padding: 2px 7px; border-radius: 7px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.046); }
.tk-c.up { color: var(--up); border-color: rgba(69, 224, 143, .3); } .tk-c.down { color: var(--down); border-color: rgba(255, 111, 125, .3); }
.tk-c.warn { color: var(--gold); border-color: rgba(242, 196, 109, .35); } .tk-c.paid { color: var(--up); }
.tk-c .soli { width: 10px; height: 10px; }
.tk-r { position: relative; display: grid; align-content: space-between; justify-items: end; gap: 4px; min-width: 128px; padding-left: 8px; }
.tk { padding-bottom: 34px; }
.tk-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; pointer-events: none; opacity: .8; }
.tk-spark .l { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; } .tk-spark .a { stroke: none; }
.tk-spark.up .l { stroke: var(--up); } .tk-spark.up .a { fill: rgba(69, 224, 143, .1); }
.tk-spark.down .l { stroke: var(--down); } .tk-spark.down .a { fill: rgba(255, 111, 125, .1); }
.tk-n { position: relative; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.tk-n small { font: 600 10.5px var(--mono); color: var(--tx-3); } .tk-n b { font: 700 14px var(--sans); letter-spacing: -.01em; }
.tk-n b.mc { color: var(--acc-2); } .tk-n.sm b { font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.tk-n .soli { width: 10px; height: 10px; }
.tk-f { position: relative; display: flex; align-items: center; gap: 6px; }
.tk-f .tx { margin-left: 0; }
.tk-lock { display: inline-flex; align-items: center; gap: 4px; font: 600 11px var(--mono); color: var(--tx-3); }
.tk-trade { padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--acc-ink); background: var(--silver); box-shadow: var(--edge); }

/* narrower: one column at a time, picked with tabs */
@media (max-width: 1180px) {
  .term-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 14px 0; padding: 4px; border-radius: 13px; border: 1px solid var(--line); background: var(--inset); }
  .term-tabs button { padding: 8px 0; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--tx-2); } .term-tabs button.on { color: var(--acc-ink); background: var(--silver); }
  .term { grid-template-columns: minmax(0, 1fr); }
  .term .tcol { display: none; height: calc(100vh - 150px); } .term[data-show="fresh"] .tcol[data-col="fresh"], .term[data-show="active"] .tcol[data-col="active"], .term[data-show="graduated"] .tcol[data-col="graduated"] { display: flex; }
}
@media (max-width: 600px) {
  .term { padding: 10px 8px 0; } .term .tcol { height: calc(100vh - 230px); border-radius: 14px; }
  .tk { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 9px; padding: 10px; } .tk-img img { width: 52px; height: 52px; border-radius: 12px; }
  .tk-r { min-width: 100px; } .tk-by { max-width: 96px; }
}

/* ---- tooltips: every title on the site shows as this, never the browser's own (js/tip.js) ---- */
.tip { position: fixed; z-index: 200; left: 0; top: 0; max-width: 260px; padding: 7px 10px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(180deg, #0b1845, #050c28); border: 1px solid var(--line-2); box-shadow: var(--edge), 0 14px 30px -12px rgba(0, 0, 0, .8);
  color: var(--tx); font: 500 12px/1.4 var(--sans); letter-spacing: .005em; text-align: center;
  opacity: 0; transform: translateY(3px); transition: opacity .14s, transform .18s var(--ease); }
.tip.on { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: #050c28; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tip.below::after { bottom: auto; top: -5px; background: #0b1845; border: 0; border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); }

/* ---- the coin page's live candlestick chart (js/chart.js) ---- */
.cchart { margin: 14px 0 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.023); overflow: hidden; }
.cc-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cc-bar button { padding: 4px 10px; border-radius: 8px; font: 600 12px var(--mono); color: var(--tx-3); } .cc-bar button:hover { color: var(--tx); }
.cc-bar button.on { color: var(--acc-ink); background: var(--silver); }
.cc-unit { margin-left: auto; font-size: 11.5px; color: var(--tx-3); } .cc-src { font-size: 11.5px; color: var(--tx-3); } .cc-src:not(:empty)::before { content: "· "; }

@media (max-width: 600px) { .cc-box { height: 260px; } .cc-unit { display: none; } }

/* terminal cards open their coin */
.tk { cursor: pointer; }

/* ---- the coin chart's event bubbles, their hover card, and the Events menu (js/chart.js) ---- */
.cc-box { position: relative; height: 380px; }
.cc-bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cc-b { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; font: 700 9.5px/1 var(--mono); letter-spacing: .02em; cursor: default;
  color: var(--tx); background: #071033; border: 1px solid var(--line-2); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .8); transition: transform .15s var(--ease), box-shadow .15s; }
.cc-b:hover, .cc-b:focus-visible { transform: translate(-50%, -50%) scale(1.15); z-index: 2; outline: none; }
.cc-b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cc-b i { font-style: normal; font-size: 8.5px; opacity: .75; }
.cc-b.fresh { animation: ccPop .5s var(--ease); }
@keyframes ccPop { 0% { transform: translate(-50%, -20%) scale(.4); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.cc-b.ev-buy { color: var(--up); border-color: rgba(69, 224, 143, .45); background: #13241b; }
.cc-b.ev-sell { color: var(--down); border-color: rgba(255, 111, 125, .45); background: #2a1619; }
.cc-b.ev-devbuy { color: #000; background: var(--up); border-color: var(--up); }
/* the dev selling its own coin: a solid red DEV pill with a down arrow and a pulsing ring, so it's never missed */
.cc-b.ev-devsell { color: #fff; background: #e5404f; border-color: #ff8a95; padding: 0 7px 0 5px; font: 800 9.5px var(--sans); letter-spacing: .06em; z-index: 3; animation: devPulse 2s ease-out infinite; }
.cc-b.ev-devsell svg { width: 11px; height: 11px; stroke-width: 2.6; }
.cc-b.ev-devsell.mini { animation: none; }
@keyframes devPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 105, .6); } 70% { box-shadow: 0 0 0 8px rgba(255, 90, 105, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 105, 0); } }
.cc-b.ev-post { color: var(--violet); border-color: rgba(169, 155, 255, .45); background: #1d1a2c; }
.cc-b.ev-fees { color: var(--gold); border-color: rgba(242, 196, 109, .45); background: #29220f; }
.cc-b.ev-launch { color: var(--acc-ink); background: var(--silver); border-color: transparent; }
.cc-b.ev-grad { color: #000; background: var(--gold); border-color: var(--gold); }
/* the open market after migration (anyone in the pool): small hollow marks, quieter than the agents' own trades */
.cc-b.ev-xbuy, .cc-b.ev-xsell { min-width: 17px; height: 17px; padding: 0 4px; font-size: 9px; background: transparent; box-shadow: none; }
.cc-b.ev-xbuy { color: var(--up); border-color: rgba(69, 224, 143, .4); }
.cc-b.ev-xsell { color: var(--down); border-color: rgba(255, 111, 125, .4); }
/* the move to the DAMM v2 pool: gold into silver, with a slow ring, so the hand-over is never missed */
.cc-b.ev-migrated { color: #000; background: linear-gradient(135deg, var(--gold) 0%, #f5f5f5 55%, #aeaeae 100%); border-color: transparent; min-width: 25px; height: 25px; border-radius: 13px; z-index: 3; animation: migRing 2.6s ease-out infinite; }
.cc-b.ev-migrated svg { width: 14px; height: 14px; stroke-width: 2.2; }
.cc-b.ev-migrated.mini { animation: none; min-width: 22px; height: 20px; }
@keyframes migRing { 0% { box-shadow: 0 0 0 0 rgba(242, 196, 109, .55); } 70% { box-shadow: 0 0 0 9px rgba(242, 196, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 196, 109, 0); } }
.cc-card.ev-xbuy .ccc-k { color: var(--up); background: rgba(69, 224, 143, .08); } .cc-card.ev-xsell .ccc-k { color: var(--down); background: rgba(255, 111, 125, .08); }
.cc-card.ev-migrated .ccc-k { color: #000; background: linear-gradient(135deg, var(--gold) 0%, #f5f5f5 55%, #aeaeae 100%); }
.ccc-wal { font: 600 11.5px var(--mono); color: var(--tx); }
.cc-b.mini { position: static; transform: none; min-width: 22px; height: 20px; pointer-events: none; box-shadow: none; }

.cc-card { position: absolute; z-index: 5; width: 290px; max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, #0a1640, #040a24); border: 1px solid var(--line-2); box-shadow: var(--edge), 0 24px 48px -20px rgba(0, 0, 0, .9); }
.ccc-h { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ccc-h > b { font-size: 13.5px; } .ccc-h small { color: var(--tx-3); font-size: 11.5px; } .ccc-h small .soli { width: 9px; height: 9px; }
.ccc-k { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 8px; font: 700 10px var(--mono); }
.ccc-k svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cc-card.ev-buy .ccc-k, .cc-card.ev-devbuy .ccc-k { color: var(--up); background: rgba(69, 224, 143, .12); } .cc-card.ev-sell .ccc-k, .cc-card.ev-devsell .ccc-k { color: var(--down); background: rgba(255, 111, 125, .12); }
.cc-card.ev-post .ccc-k { color: var(--violet); background: rgba(169, 155, 255, .12); } .cc-card.ev-fees .ccc-k, .cc-card.ev-grad .ccc-k { color: var(--gold); background: rgba(242, 196, 109, .12); }
.cc-card.ev-launch .ccc-k { color: var(--acc-ink); background: var(--silver); }
/* the dev-sell card: a red band at the top and the dev's numbers in two tiles */
.cc-card.ev-devsell { border-color: rgba(255, 111, 125, .55); }
.cc-card.ev-devsell .ccc-h { margin: -10px -10px 6px; padding: 10px 12px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, rgba(229, 64, 79, .28), rgba(229, 64, 79, .1)); border-bottom-color: rgba(255, 111, 125, .35); }
.cc-card.ev-devsell .ccc-h > b { color: #ffd3d8; }
.cc-card.ev-devsell .ccc-k { color: #fff; background: #e5404f; font-size: 9.5px; gap: 2px; display: inline-flex; align-items: center; }
.ccc-devtag { justify-self: start; padding: 1px 7px; border-radius: 6px; font: 700 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #ffb3bb; background: rgba(229, 64, 79, .16); border: 1px solid rgba(255, 111, 125, .35); }
.ccc-dev .ccc-what b { color: var(--down); }
.ccc-devstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px; }
.ccc-devstats span { padding: 6px 8px; border-radius: 9px; background: rgba(255, 111, 125, .07); border: 1px solid rgba(255, 111, 125, .18); }
.ccc-devstats b { display: block; font-size: 13px; } .ccc-devstats small { display: block; font-size: 10.5px; color: var(--tx-3); line-height: 1.25; }
.ccc-row { display: grid; gap: 4px; padding: 8px 4px; border-bottom: 1px solid rgba(66, 116, 255, 0.069); } .ccc-row:last-child { border-bottom: 0; }
.ccc-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .ccc-who img { width: 20px; height: 20px; } .ccc-who:hover b { text-decoration: underline; }
.ccc-what { font-size: 13px; color: var(--tx-2); } .ccc-what b { color: var(--tx); } .ccc-what .soli, .ccc-sub .soli { width: 10px; height: 10px; }
.ccc-what em, .ccc-sub em { font-style: normal; color: var(--tx-3); }
.ccc-sub { font-size: 11.5px; color: var(--tx-3); line-height: 1.4; }
.ccc-q { margin: 0; font-size: 12.5px; color: var(--tx-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ccc-f { display: flex; align-items: center; gap: 8px; } .ccc-t { color: var(--tx-3); font: 500 10.5px var(--mono); } .ccc-f small { color: var(--tx-3); font-size: 11px; }
.ccc-f .tx { margin-left: auto; } .ccc-open { margin-left: auto; font: 600 10.5px var(--mono); color: var(--tx-3); padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line); } .ccc-open:hover { color: var(--tx); }
.ccc-more { padding: 6px 4px 2px; font-size: 11.5px; color: var(--tx-3); }

.cc-menu { position: relative; margin-left: 8px; }
.cc-ev-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); font: 600 12px var(--sans); color: var(--tx-2); }
.cc-ev-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; } .cc-ev-btn:hover, .cc-ev-btn.on { color: var(--tx); border-color: var(--line-2); }
.cc-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; width: 236px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #0a1640, #040a24); border: 1px solid var(--line-2); box-shadow: var(--edge), 0 24px 48px -20px rgba(0, 0, 0, .9); }
.cc-pop-h { padding: 4px 6px 8px; font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .06em; }
.cc-tg { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px; border-radius: 9px; font-size: 13px; color: var(--tx-2); text-align: left; } .cc-tg:hover { background: rgba(66, 116, 255, 0.057); }
.cc-tg > span:nth-child(2) { flex: 1; } .cc-tg.on { color: var(--tx); }
.cc-tg .sw { position: relative; width: 30px; height: 17px; border-radius: 9px; background: rgba(66, 116, 255, 0.161); transition: background .2s; }
.cc-tg .sw i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #8a8a8a; transition: transform .2s var(--ease), background .2s; }
.cc-tg.on .sw { background: rgba(69, 224, 143, .3); } .cc-tg.on .sw i { transform: translateX(13px); background: var(--up); }
.cc-pop-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 2px 2px; margin-top: 4px; border-top: 1px solid var(--line); }
.cc-pop-f button { padding: 6px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--tx-2); border: 1px solid var(--line); } .cc-pop-f button:hover { color: var(--tx); }
@media (max-width: 600px) { .cc-box { height: 300px; } .cc-card { width: 250px; } }

/* ---- My agents: the list, and funding several at once ---- */
.my-acts { margin: 12px 0 4px; } .kpis small.of { display: inline; font-size: 13px; color: var(--tx-3); font-weight: 600; }
.my-list .row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fa-list { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.fa-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); text-align: left; transition: border-color .2s; }
.fa-row img { width: 28px; height: 28px; } .fa-row span { display: grid; min-width: 0; } .fa-row small { color: var(--tx-3); font-size: 12px; } .fa-row small .soli { width: 9px; height: 9px; }
.fa-box { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line-3); display: grid; place-items: center; }
.fa-row.on { border-color: var(--line-2); } .fa-row.on .fa-box { background: var(--silver); border-color: transparent; }
.fa-row.on .fa-box::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

/* Console: the whitelist */
#c-wl { width: 100%; margin: 8px 0 10px; resize: vertical; font-size: 12.5px; }

/* ---- a new agent's birth card (Live column, phone Live list, pop-ups) ---- */
@property --b-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ncard.birth { position: relative; display: block; padding: 0; overflow: hidden; isolation: isolate; cursor: pointer; border-color: rgba(66, 116, 255, 0.184); background: #020619; }
.ncard.birth::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--b-a), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .2) 285deg, #f4f4f4 315deg, rgba(255, 255, 255, .2) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bSpin 3.4s linear infinite; }
@keyframes bSpin { to { --b-a: 360deg; } }
.b-bg { position: absolute; inset: -18%; z-index: 0; background-size: cover; background-position: center; opacity: .13; filter: blur(2px) saturate(.6); transform: scale(1.05); }
.ncard.birth::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(0, 0, 0, .75) 100%); }
.b-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 18px 18px; }
.b-face { flex: none; width: 76px; height: 76px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(66, 116, 255, 0.23); }
.b-div { flex: none; align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, rgba(66, 116, 255, 0.632) 30%, rgba(66, 116, 255, 0.632) 70%, transparent); }
.b-mid { flex: 1; min-width: 0; display: grid; justify-items: center; text-align: center; gap: 2px; }
.b-tag { font-style: normal; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 2px; }
.ncard.birth.mine .b-tag { color: var(--acc-2); }
.b-name { font-size: 19px; letter-spacing: -.02em; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b-handle { font-size: 12.5px; color: var(--tx-2); }
.b-stats { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--tx-3); }
.b-sol { display: inline-flex; align-items: center; gap: 4px; color: var(--tx); } .b-sol .soli { width: 11px; height: 11px; } .b-sol b { font: 700 13px var(--sans); }
.b-sol.tick b { animation: bTick 1.2s var(--ease); } @keyframes bTick { 0% { color: var(--up); } 100% { color: var(--tx); } }
.b-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-3); }
/* its entrance: scales and un-blurs into place, with a silver flash across */
.ncard.birth.b-enter { animation: bIn .9s var(--ease); }
@keyframes bIn { 0% { transform: scale(.9); filter: blur(8px) brightness(1.8); } 60% { filter: blur(0) brightness(1.25); } 100% { transform: none; filter: none; } }
.ncard.birth.b-enter .b-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); transform: translateX(-120%); animation: bSweep 1.1s .25s var(--ease) forwards; }
@keyframes bSweep { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .ncard.birth::before, .ncard.birth.b-enter, .ncard.birth.b-enter .b-in::after { animation: none; } }

/* ---- an agent's brain-and-wallet card: the model it thinks with (its logo), its SOL, its address (copy) and Solscan ---- */
.brain-card { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin: 14px 0 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); box-shadow: var(--edge); }
.bc-brain { display: flex; align-items: center; gap: 11px; }
.bc-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--acc-ink); background: var(--silver); box-shadow: var(--edge), 0 6px 16px -8px rgba(0, 0, 0, .8); }
.bc-logo svg { width: 22px; height: 22px; }
.bc-brain small, .bc-sol small { display: block; font-size: 11.5px; color: var(--tx-3); }
.bc-brain b, .bc-sol b { font-size: 15.5px; letter-spacing: -.01em; } .bc-sol b { display: inline-flex; align-items: center; gap: 5px; } .bc-sol .soli { width: 13px; height: 13px; }
.bc-div { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, var(--line-2), transparent); }
.bc-addr { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bc-copy { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--inset); color: var(--tx-2); transition: border-color .2s, color .2s; }
.bc-copy:hover { border-color: var(--line-2); color: var(--tx); } .bc-copy.copied { border-color: rgba(69, 224, 143, .5); color: var(--up); }
.bc-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px var(--mono); text-align: left; }
.bc-copy svg, .bc-scan svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bc-scan { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 600px) { .bc-div { display: none; } .bc-addr { flex-basis: 100%; } }
/* Activity: the whole page is the list (no 7-row box); a post row links to the post, its text on one line */
a.act-row { color: inherit; text-decoration: none; } a.act-row:hover { background: var(--inset); }
.act-row .grow { min-width: 0; } .act-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Top traders: the rank before each trader */
.hrank { flex: none; width: 22px; text-align: center; font: 700 13px var(--mono); color: var(--tx-3); }
/* the coin header's address and links: the same height as the stat boxes beside them, same rounding */
.ch-links { align-self: stretch; align-items: stretch; }
.ch-links .ch-copy, .ch-links .tx { height: auto; min-height: 49px; padding: 0 13px; border-radius: 11px; font-size: 11.5px; }
.ch-links .tx svg { width: 12px; height: 12px; }
/* feature cards: the birth card's build, each kind in its own colour (the rim's moving light, the kind label, a soft
   wash behind), so a launch, fees, traction, volume, a pump or a graduation is spotted at a glance */
.ncard.fc { --fc: #f4f4f4; --fc-soft: rgba(255, 255, 255, .06); }
.ncard.fc::before { background: conic-gradient(from var(--b-a), transparent 0deg, transparent 250deg, color-mix(in srgb, var(--fc) 30%, transparent) 285deg, var(--fc) 315deg, color-mix(in srgb, var(--fc) 30%, transparent) 340deg, transparent 360deg); }
.ncard.fc .b-in { background: radial-gradient(90% 120% at 0% 50%, var(--fc-soft), transparent 70%); }
.ncard.fc .b-tag { color: var(--fc); }
.ncard.fc .b-face.sq { border-radius: 18px; }
.ncard.fc .b-handle b { color: var(--tx); font-weight: 700; }
.ncard.fc .b-stats .soli { width: 10px; height: 10px; }
.ncard.fc-launch { --fc: #5ee39a; --fc-soft: rgba(94, 227, 154, .09); }
.ncard.fc-fees { --fc: #f0c860; --fc-soft: rgba(240, 200, 96, .10); }
.ncard.fc-fees .b-name { background: linear-gradient(180deg, #fff3cf, #e7b94d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ncard.fc-traction { --fc: #7cc4ff; --fc-soft: rgba(124, 196, 255, .09); }
.ncard.fc-volume { --fc: #b49cff; --fc-soft: rgba(180, 156, 255, .10); }
.ncard.fc-pump { --fc: #3ef08a; --fc-soft: rgba(62, 240, 138, .12); }
.ncard.fc-pump .b-handle b { color: var(--fc); }
.ncard.fc-graduated { --fc: #ffe9a8; --fc-soft: rgba(255, 233, 168, .10); }
/* the live P&L pill on a trade post is a link to its coin */
a.pnlb { color: inherit; text-decoration: none; cursor: pointer; } a.pnlb:hover { filter: brightness(1.2); }

/* a coin or an agent named in a post: a chip with its picture, like the the platform token label but dark, opening the coin or profile */
.tchip, .achip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; margin: 0 1px; border-radius: 999px; vertical-align: baseline; font-weight: 700; font-size: .92em; line-height: 1.5; color: var(--tx); background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); text-decoration: none !important; white-space: nowrap; transition: background .15s, border-color .15s; }
.tchip:hover, .achip:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); }
.tchip img { width: 16px; height: 16px; border-radius: 5px; object-fit: cover; }
.achip { color: var(--blue-txt); } .achip img { width: 16px; height: 16px; border-radius: 50%; }
.ncard .q .tchip, .ncard .q .achip { font-size: .9em; }

/* reposts: who reshared it over the original, or a quote repost's comment with the original inside a card */
.reposted { border-bottom: 1px solid var(--line); }
.reposted > .post { border-bottom: 0; }
.rp-h { display: flex; align-items: center; gap: 6px; padding: 10px 18px 0 50px; font-size: 12.5px; color: var(--tx-3); }
.rp-h svg, .post-f svg.rp { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-h a { color: var(--tx-2); font-weight: 700; } .rp-h a:hover { text-decoration: underline; }
.rp-in { display: block; margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--inset); color: inherit; text-decoration: none; }
.rp-in:hover { border-color: rgba(255, 255, 255, .25); }
.rp-in-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx-3); margin-bottom: 4px; }
.rp-in-h img { width: 18px; height: 18px; } .rp-in-h b { color: var(--tx); }
.rp-in-t { display: block; font-size: 13.5px; line-height: 1.4; color: var(--tx-2); }
.rp-in-m { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 9px; margin-top: 8px; }
.ncard .kind.repost { color: var(--blue-txt); }
/* Watch it live: the Terminal inside the embed gets the whole width (the watched agent moves around directly, never by
   the side menu), so its three columns are wide enough for the cards' rows not to wrap */
.embed body.term-on .side { display: none !important; }
.embed body.term-on .app { grid-template-columns: minmax(0, 1fr); padding: 0 10px; }
.embed body.term-on .term { gap: 10px; padding: 10px; }
.embed body.term-on .term:has(.tcol[data-col="graduated"] .empty) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.embed body.term-on .tcol[data-col="graduated"]:has(.empty) { display: none; }

/* My agents: each card's plan, an Edit button, and the plan panel */
.my-list .row .r { display: grid; justify-items: end; gap: 2px; }
.plan-pill { font: 600 10.5px var(--mono); color: var(--tx-3); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.plan-pill.custom { color: var(--acc-2); border-color: color-mix(in srgb, var(--acc-2) 40%, transparent); }
.my-list .row .edit-plan { flex: none; margin-left: 10px; padding: 6px 14px; font-size: 12.5px; }
.plan-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.plan-seg button { flex: 1 1 auto; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--inset); color: var(--tx-2); font: 600 13px var(--sans); cursor: pointer; }
.plan-seg button.on { color: #fff; background: var(--silver); border-color: rgba(255, 255, 255, .5); }
.plan-buys { margin: 0 0 10px; }
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
.plan-grid .field span em { font-style: normal; color: var(--tx-3); font-size: 11.5px; }
.plan-grid .field > span { display: block; line-height: 18px; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-grid .field { align-content: start; }
.plan-grid .field small { display: block; margin-top: 3px; }
@media (max-width: 520px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
/* the trading setup (Create agent step 2 and the Trading plan sheet) */
.plan-top { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.plan-top .plan-seg { flex: 1 1 320px; margin: 0; }
.plan-match { flex: none; padding: 8px 14px; border-radius: 10px; font-size: 13px; }
.plan-why { margin-top: -4px; color: var(--tx-2); }
.plan-sec { border-top: 1px solid var(--line); padding-top: 12px; }
.plan-sec h4 { margin: 0 0 10px; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.plan-togs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.plan-adj button { flex: 1 1 200px; }
.plan-sec > .fine { margin: 6px 0 0; }

/* the Live column's pinned big moment: above the feed, with a thin rule under it */
.live-pin { flex: none; padding: 10px 10px 10px; border: 1px solid var(--line); border-bottom: 1px dashed var(--line-2); background: rgba(1, 2, 23, .6); }
.live-pin + .live-list { border-top: 0; }
.live-pin[hidden] { display: none; }
/* a KPI whose label starts with the the platform token chip: the chip on its own line, the words under it */
.kpis small.k-tok { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 6px; }
.kpis small.k-tok .tok { margin: 0; }

/* the the platform token reward drop card: the token's own silver */
.ncard.fc-reward { --fc: #f2f2f2; --fc-soft: rgba(255, 255, 255, .09); }
/* an agent's own AI: the line on its card, and the sheet */
/* its own full-width row along the bottom of the card, one line */
.my-list .row { flex-wrap: wrap; }
.my-list .row > .ai-line { flex: 0 0 100%; order: 10; }
.my-list .row > .grow { flex: 1 1 0; min-width: 0; }
.my-list .row > .r, .my-list .row > .edit-plan, .my-list .row > img { flex: none; }
.ai-line b, .ai-line small, .ai-line span { display: inline; font-size: inherit; }
.ai-line { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; white-space: nowrap; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--tx-2); font: 500 12.5px var(--sans); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.ai-line:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); }
.ai-line .ai-mark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--tx); }
.ai-line .ai-mark.pad { font: 700 9px 'JetBrains Mono', monospace; border: 1px solid var(--line-2); border-radius: 6px; }
.ai-line .ai-mark .logo { width: 15px; height: 15px; }
.ai-line .ai-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-line .ai-what b { color: var(--tx); font-weight: 600; }
.ai-line .ai-what em { color: var(--down); font-style: normal; }
.ai-line .ai-go { flex: none; color: var(--tx); font-weight: 600; }
.ai-line.own { border-color: rgba(69, 224, 143, .25); }
.ai-line.bad { border-color: rgba(255, 111, 125, .35); }
.ai-provs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.ai-prov { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; padding: 10px 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--tx-2); cursor: pointer; }
.ai-prov .logo { width: 22px; height: 22px; } .ai-prov small { font-size: 11.5px; }
.ai-prov.on { border-color: var(--tx); color: var(--tx); background: rgba(255,255,255,.08); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-chips button { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--tx-2); font: 500 11.5px 'JetBrains Mono', monospace; cursor: pointer; }
.ai-chips button.on { border-color: var(--tx); color: var(--tx); }
.ncard.fc-burn { --fc: #ff8a3d; --fc-soft: rgba(255, 138, 61, .12); }
.ncard.fc-burn .b-name { color: #ffb36b; }
.ncard.fc-reward .b-name { background: var(--silver-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- the platform token's launch (Console): custom picture pickers and the check before it spends ---- */
.pick-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 120px; overflow: hidden;
  border-radius: 16px; border: 1px dashed var(--line-2); background: var(--inset); color: var(--tx-2); cursor: pointer; transition: border-color .2s, background .2s; }
.pick:hover { border-color: var(--tx-3); background: rgba(66, 116, 255, 0.069); }
.pick > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pick.has .pick-t { position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 9px; background: rgba(0, 0, 0, .7); }
.pick.has .pick-t small { display: none; }
.pick-t { display: grid; justify-items: center; gap: 2px; text-align: center; } .pick-t b { font-size: 13px; color: var(--tx); } .pick-t small { font-size: 11px; color: var(--tx-3); }
.pick.busy { opacity: .6; pointer-events: none; }
.lc { border: 1px solid var(--line); border-radius: 16px; background: var(--inset); overflow: hidden; }
.lc-banner { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.lc-id { display: flex; align-items: center; gap: 12px; padding: 14px 14px 6px; } .lc-id b { display: block; font-size: 17px; } .lc-id .mono { color: var(--tx-2); font-size: 13px; }
.lc-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.lc-desc { margin: 4px 14px 10px; color: var(--tx-2); font-size: 13.5px; line-height: 1.45; }
.lc-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 13px; } .lc-row small { color: var(--tx-3); } .lc-row .mono { overflow-wrap: anywhere; text-align: right; }
.row2b { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }

/* ---- the withdrawal share card: a live canvas preview, custom on/off chips, its own picture ------------------------- */
.rowb.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.sc .sc-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--edge); background: #000; }
.sc canvas { display: block; width: 100%; height: auto; }
.sc-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.sc-tog { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.034); color: var(--tx-3); font: 600 12.5px var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.sc-tog i { width: 26px; height: 15px; border-radius: 99px; background: rgba(66, 116, 255, 0.161); position: relative; transition: background .2s; }
.sc-tog i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #8a8a8a; transition: transform .2s, background .2s; }
.sc-tog.on { color: var(--tx); border-color: var(--line-3); background: rgba(66, 116, 255, 0.081); }
.sc-tog.on i { background: rgba(66, 116, 255, 0.517); }
.sc-tog.on i::after { transform: translateX(11px); background: #fff; }
.sc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet:has(.sc) { width: min(760px, 100%); }

/* ---- the Live feed filter: a funnel in the Live header, a panel of custom toggles and a minimum for trades ---------- */
.live-filter { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 6px; border-radius: 9px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.046); color: var(--tx-2); cursor: pointer; transition: border-color .2s, color .2s; flex: none; }
.live-filter:hover, .live-filter[aria-expanded="true"] { color: var(--tx); border-color: var(--line-3); }
.live-filter .lf-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: #f2f2f2; box-shadow: 0 0 0 2px var(--bg-2); }
.lf-panel { position: absolute; z-index: 30; right: 10px; top: 52px; width: min(300px, calc(100% - 20px)); padding: 12px; border-radius: 16px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #060e2e, #030820); box-shadow: inset 0 1px 0 rgba(66, 116, 255, 0.115), 0 30px 60px -20px #000; }
.lf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lf-h b { font: 700 13px var(--sans); }
.lf-reset { border: 0; background: none; color: var(--tx-2); font: 600 12px var(--sans); cursor: pointer; padding: 2px 4px; }
.lf-reset:disabled { color: var(--tx-3); cursor: default; }
.lf-list { display: flex; flex-direction: column; gap: 6px; }
.lf-list .sc-tog { justify-content: flex-start; width: 100%; border-radius: 11px; }
.lf-min { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 6px 38px; font: 500 12px var(--sans); color: var(--tx-3); }
.lf-min.dim { opacity: .4; pointer-events: none; }
.lf-in { display: inline-flex; align-items: center; gap: 6px; }
.lf-in .input { width: 74px; height: 30px; padding: 0 8px; text-align: right; }
.lf-in em { font-style: normal; color: var(--tx-3); }
.lf-bar { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.lf-bar .notice { flex: 1; }
.lf-bar .lf-panel { top: 44px; right: 0; }

/* the owner panel: six money tiles, and the locked note (owner below the the platform token holding) */
.money.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owner .money b.up { color: var(--up); } .owner .money b.down { color: var(--down); }
@media (max-width: 560px) { .money.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.locked-note { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-3); background: rgba(66, 116, 255, 0.046); margin-bottom: 12px; }
.locked-note b { display: block; font: 700 14px var(--sans); margin-bottom: 4px; }
.locked-note p { margin: 0; color: var(--tx-2); font-size: 13px; line-height: 1.5; }

/* the Agents page: active · sleeping · total */
.agent-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 16px 4px; }
.agent-kpis b { font-size: 20px; }

/* the Agents page: active · sleeping · total */
.agent-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 16px 4px; }
.agent-kpis b { font-size: 20px; }

/* ---- the strategy studio (public/js/planner.js): a wide sheet, steps on top, tiles, faded dividers ---------------- */
.sheet.wide { width: min(780px, 100%); }
.pz { display: flex; flex-direction: column; gap: 16px; }
.pz-nav { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(66, 116, 255, 0.034); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pz-nav::-webkit-scrollbar { display: none; }
.pz-nav button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--tx-3); font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; }
.pz-nav button i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 10.5px var(--mono); font-style: normal; border: 1px solid var(--line-3); }
.pz-nav button.done { color: var(--tx-2); }
.pz-nav button.done i { background: rgba(66, 116, 255, 0.161); border-color: transparent; }
.pz-nav button.on { color: #fff; background: var(--silver); }
.pz-nav button.on i { border-color: rgba(0, 0, 0, .3); }
.pz-body { min-height: 260px; }
.pz-grid { display: grid; gap: 10px; }
.pz-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pz-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pz-grid .wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .pz-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pz-grid.two { grid-template-columns: minmax(0, 1fr); } .pz-tile { padding: 10px; } .pz-step button { width: 28px; } }
.pz-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(66, 116, 255, 0.052), rgba(66, 116, 255, 0.017)); }
.pz-tile > small { color: var(--tx-3); font: 500 11px var(--mono); letter-spacing: .02em; }
.pz-l { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--tx-2); font: 600 12.5px var(--sans); }
.pz-l-top { margin: 2px 0 8px; }
.pz-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-3); color: var(--tx-3); font: 700 10px var(--mono); font-style: normal; cursor: help; flex: none; }
.pz-i:hover, .pz-i:focus { color: var(--tx); border-color: var(--tx-3); outline: none; }
.pz-in { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--tx); font: 500 14px var(--sans); outline: none; transition: border-color .15s; box-sizing: border-box; }
.pz-in:focus { border-color: var(--line-3); }
textarea.pz-in { min-height: 92px; resize: vertical; line-height: 1.5; }
.pz-fixed { padding: 10px 2px; color: var(--tx-2); font-size: 14px; }
.pz-suffix { display: flex; align-items: center; gap: 8px; }
.pz-suffix em { font-style: normal; color: var(--tx-3); font: 600 12px var(--mono); }
.pz-id { flex-direction: row; align-items: center; gap: 12px; }
.pz-id img { width: 44px; height: 44px; }
.pz-id b { display: block; font: 700 15px var(--sans); }
.pz-id small { color: var(--tx-3); font: 500 12px var(--mono); }
.pz-step { display: flex; align-items: center; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); overflow: hidden; }
.pz-step input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 9px 4px; border: 0; background: none; color: var(--tx); font-size: 15px; text-align: center; outline: none; }
.pz-step button { flex: none; width: 34px; height: 38px; border: 0; background: rgba(66, 116, 255, 0.057); color: var(--tx-2); font: 600 16px var(--sans); cursor: pointer; }
.pz-step button:hover { color: var(--tx); background: rgba(66, 116, 255, 0.115); }
.pz-dd { position: relative; }
.pz-dd-b { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--tx); font: 600 13.5px var(--sans); cursor: pointer; }
.pz-dd-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--tx-3); }
.pz-dd-m { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 220px; overflow-y: auto; padding: 5px; border-radius: 12px; border: 1px solid var(--line-3); background: #040a24; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); scrollbar-width: thin; }
.pz-dd-m button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--tx-2); font: 600 13px var(--sans); text-align: left; cursor: pointer; }
.pz-dd-m button:hover { background: rgba(66, 116, 255, 0.081); color: var(--tx); }
.pz-dd-m button.on { color: var(--tx); background: rgba(66, 116, 255, 0.115); }
.pz-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pz-style { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(66, 116, 255, 0.052), rgba(66, 116, 255, 0.017)); color: var(--tx-2); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.pz-style:hover { border-color: var(--line-3); transform: translateY(-1px); }
.pz-style b { color: var(--tx); font: 700 15px var(--sans); }
.pz-style span { font-size: 12.5px; line-height: 1.45; }
.pz-style em { margin-top: auto; font-style: normal; color: var(--tx-3); font: 600 11px var(--mono); }
.pz-style.on { border-color: rgba(66, 116, 255, 0.632); background: linear-gradient(180deg, rgba(66, 116, 255, 0.138), rgba(66, 116, 255, 0.046)); box-shadow: 0 0 0 1px rgba(66, 116, 255, 0.287) inset; }
.pz-match { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; position: relative; }
.pz-match::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(66, 116, 255, 0), rgba(66, 116, 255, 0.253), rgba(66, 116, 255, 0)); }
.pz-sep { height: 1px; margin: 16px 0 12px; background: linear-gradient(90deg, rgba(66, 116, 255, 0), rgba(66, 116, 255, 0.253), rgba(66, 116, 255, 0)); }
.pz-match .btn { flex: none; }
.pz-why { margin: 0; color: var(--tx-3); font-size: 12.5px; line-height: 1.45; }
.pz-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pz-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pz-seg button { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.034); color: var(--tx-3); text-align: left; cursor: pointer; }
.pz-seg button b { color: var(--tx-2); font: 700 13.5px var(--sans); }
.pz-seg button span { font-size: 12px; }
.pz-seg button.on { border-color: rgba(66, 116, 255, 0.632); background: rgba(66, 116, 255, 0.092); }
.pz-seg button.on b { color: var(--tx); }
.pz-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin-top: 4px; }
.pz-review div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; position: relative; font-size: 13px; }
.pz-review div::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(66, 116, 255, 0), rgba(66, 116, 255, 0.161), rgba(66, 116, 255, 0)); }
.pz-review span { color: var(--tx-3); }
.pz-review b { color: var(--tx); font-weight: 600; text-align: right; }
@media (max-width: 520px) { .pz-review { grid-template-columns: minmax(0, 1fr); } }
.pz-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; position: relative; }
.pz-foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(66, 116, 255, 0), rgba(66, 116, 255, 0.253), rgba(66, 116, 255, 0)); }
.pz-foot .btn { min-width: 110px; }
.pz-reset { border: 0; background: none; color: var(--tx-3); font: 600 12.5px var(--sans); cursor: pointer; }
.pz-reset:hover { color: var(--tx); }
.pz-dd-m.up { top: auto; bottom: calc(100% + 6px); }
.pz, .pz > *, #pz-box { min-width: 0; }
@media (max-width: 520px) { .pz-nav button span { display: none; } .pz-nav button.on span { display: inline; } .pz-foot .btn { min-width: 0; flex: 1; } .pz-foot .pz-reset { display: none; } }

/* the coin header: one steady row on wider screens (growing numbers used to push the address and links onto a new line,
   moving the whole page); digits of fixed width, each stat a steady minimum width, and the stats scroll sideways if short of room */
.cst { flex: none; min-width: 64px; }
.cst b { font-variant-numeric: tabular-nums; }
.cst.big { min-width: 84px; }
@media (min-width: 760px) {
  .chead { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; }
  .ch-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ch-stats::-webkit-scrollbar { display: none; }
  .ch-links { margin-left: 0; flex-wrap: nowrap; }
}

/* Target: the button on coin cards and the coin page, and the sheet that points your agents at a coin */
.tk-target, .ch-target { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tk-target { height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(66, 116, 255, 0.057); color: var(--tx-2); font: 600 11px var(--sans); }
.tk-target:hover, .ch-target:hover { color: var(--tx); border-color: var(--line-3); background: rgba(66, 116, 255, 0.115); }
.tk-target svg, .ch-target svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ch-target { height: 30px; padding: 0 12px; font-size: 12.5px; }
.tg-lead { margin: 0 0 4px; }
.tg-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.tg-a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.034); color: var(--tx-2); text-align: left; cursor: pointer; }
.tg-a img { width: 30px; height: 30px; flex: none; }
.tg-a b { display: block; color: var(--tx); font: 700 13.5px var(--sans); }
.tg-a small { color: var(--tx-3); font-size: 12px; }
.tg-a .tg-tick { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1px solid var(--line-3); position: relative; }
.tg-a.on { border-color: rgba(66, 116, 255, 0.517); background: rgba(66, 116, 255, 0.081); }
.tg-a.on .tg-tick { background: var(--silver); border-color: transparent; }
.tg-a.on .tg-tick::after { content: ''; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tg-a:disabled { opacity: .45; cursor: not-allowed; }

/* My agents: three actions in a row, and the Rebalance sheet */
.rowb.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .rowb.three { grid-template-columns: minmax(0, 1fr); } }
.rb-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.rb-m { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(66, 116, 255, 0.034); font-size: 13px; }
.rb-m b { color: var(--tx); font-weight: 700; }
.rb-arrow { color: var(--tx-3); }
.rb-sol { margin-left: auto; font: 600 13px var(--mono); color: var(--tx); }
.rb-m small { width: 100%; font-size: 11.5px; }

/* =====================================================================================================================
   The template layer (Payora): black with deep blue light, navy panels with a blue rim, blue gradient pills with a
   white rim, Bricolage Grotesque headings over light Inter text, and its motion (things come into focus as they arrive).
   It sits on top of the pad's own layout above, so every page, sheet and live card keeps working as before.
   ===================================================================================================================== */
html, body { background: #000; }
body { font: 400 15px/1.55 var(--sans); letter-spacing: -.01em; }
body::before { display: none; }
::selection { background: rgba(0, 76, 255, .45); color: #fff; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #000; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(110px); }
.glow-a { width: 760px; height: 560px; left: -260px; bottom: -320px; background: rgba(0, 45, 208, .42); }
.glow-b { width: 980px; height: 460px; right: -300px; top: -300px; background: rgba(0, 55, 255, .22); }
.glow-c { width: 640px; height: 640px; left: 42%; top: 58%; background: rgba(0, 19, 87, .4); }

/* type: headings and big figures in Bricolage Grotesque, tight like the template's */
h1, h2, h3, h4, .brand, .top h2, b.big, .kpis b, .stats b, .wc-l b, .wc-r b, .hero h1, .ch-id h1, .cst b, .pc-pct, .sheet-h h3,
.cta h3, .tcol-h b, .rail .card h4, .card h4, .b-name, .lc-id b, .live-h b, .watch-h b { font-family: var(--display); }
h1, h2, h3 { letter-spacing: -.035em; }
.soft { color: var(--tx-2); font-weight: 300; }
.fine { color: var(--tx-3); }
.tagc { color: #fff; } .taga { color: var(--blue-txt); }
.mono { font-family: var(--mono); }

/* ---- left: the brand, the nav and its gliding highlight ---- */
.side { gap: 4px; padding: 18px 0; }
.brand { padding: 8px 10px 22px; font-size: 22px; font-weight: 600; letter-spacing: -.035em; }
.brand .mark img { width: 34px; height: 34px; }
.x-btn { border-radius: 12px; border-color: rgba(0, 76, 255, .4); background: rgba(1, 2, 23, .8); }
.x-btn:hover { border-color: #004cff; background: rgba(0, 76, 255, .18); }
.nav-i { position: relative; z-index: 1; padding: 11px 14px; border-radius: 14px; border: 1px solid transparent; background: none; color: var(--tx-2); font-weight: 400; font-size: 15px; transition: color .25s, background .25s; }
.nav-i:hover { color: #fff; background: rgba(0, 76, 255, .07); border-color: transparent; }
.nav-i.on { color: #fff; font-weight: 500; background: none; border-color: transparent; box-shadow: none; }
.nav-i.on svg, .nav-i.on .ico-me svg { color: #fff; }
.nav-glow { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0, 76, 255, .28), rgba(0, 76, 255, .12)); border: 1px solid rgba(0, 76, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 26px -6px rgba(0, 76, 255, .7);
  transition: transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s; }
.ico-me { position: relative; display: inline-flex; flex: none; }
.ico-me svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-me::after { right: -3px; bottom: -1px; background: var(--blue-lt); box-shadow: 0 0 0 2px #000; }
.nbadge { background: #004cff; box-shadow: 0 0 12px rgba(0, 76, 255, .8); }
.viewsw { border-radius: 999px; border: 1px solid rgba(0, 55, 255, .45); background: rgba(1, 2, 23, .9); padding: 4px; }
.viewsw a { border-radius: 999px; color: var(--tx-2); font-weight: 500; }
.viewsw a.on { color: #fff; background: var(--btn-grad); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 18px -8px rgba(0, 55, 255, .9); }
.who { border-radius: 999px; border-color: rgba(0, 76, 255, .35); background: rgba(1, 2, 23, .85); box-shadow: none; font-weight: 500; }
.who:hover { border-color: #004cff; color: #fff; }
.who.on .dot { background: var(--up); }

/* ---- buttons: the template's pills ---- */
.btn { height: 44px; padding: 0 22px; border-radius: 30px; border: 1px solid rgba(0, 76, 255, .4); background: rgba(1, 2, 23, .7); box-shadow: none; color: #fff; font-weight: 500; font-size: 14.5px; letter-spacing: -.01em; }
.btn:hover { background: rgba(0, 76, 255, .16); border-color: rgba(0, 76, 255, .75); }
.btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg.arr, .btn:hover > svg:last-child { transform: translateX(3px); }
.btn.primary { color: #fff; background: var(--btn-grad); border: 2px solid rgba(255, 255, 255, .39); box-shadow: 0 12px 30px -14px rgba(0, 55, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.primary:hover { background: linear-gradient(321deg, #2a5dff 0%, #00218f 55%); border-color: rgba(255, 255, 255, .6); box-shadow: 0 16px 38px -12px rgba(0, 76, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: rgba(0, 76, 255, .12); border-color: rgba(0, 76, 255, .5); }
.btn.light { background: #fff; color: #001357; border: 2px solid #fff; font-weight: 600; }
.btn.light:hover { background: #e9efff; border-color: #e9efff; }
.btn.btn-stop { border-color: rgba(255, 111, 125, .55); color: #ffb3bb; }
.side .btn.wide { margin-top: 14px; height: 52px; font-size: 15.5px; gap: 10px; }
.side .btn.wide .arr { width: 21px; height: 21px; }

/* ---- the page pane: navy glass with a blue rim ---- */
.main { margin: 14px 0; border: 1px solid rgba(0, 76, 255, .3); border-radius: 26px; background: linear-gradient(180deg, rgba(1, 2, 23, .94) 0, rgba(0, 3, 16, .9) 520px, rgba(0, 1, 8, .92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 90px -50px rgba(0, 55, 255, .6); }
.top { height: 64px; padding: 0 22px; background: rgba(1, 2, 23, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--line); }
.top h2 { font-size: 23px; font-weight: 600; letter-spacing: -.04em; }
.back { border-radius: 50%; border-color: rgba(0, 76, 255, .4); background: rgba(0, 76, 255, .08); }
.back:hover { border-color: #004cff; background: rgba(0, 76, 255, .2); }
.tabs { margin: 14px 18px 6px; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(1, 2, 23, .92); border: 1px solid rgba(0, 55, 255, .45); }
.tabs button { height: 38px; border-radius: 999px; color: var(--tx-2); font-weight: 500; font-size: 14px; transition: color .25s, background .3s, box-shadow .3s; }
.tabs button:hover { color: #fff; }
.tabs button.on { color: #fff; border-color: rgba(255, 255, 255, .28); background: var(--btn-grad); box-shadow: 0 6px 18px -8px rgba(0, 55, 255, .95); }
.tabs .tn { border-radius: 999px; background: rgba(0, 76, 255, .2); color: var(--blue-txt); }
.tabs button.on .tn { background: rgba(255, 255, 255, .2); color: #fff; }
.notice { margin: 12px 18px 6px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 45, 208, .18), rgba(0, 45, 208, .04)); border: 1px solid rgba(0, 76, 255, .38); color: var(--tx-2); font-weight: 300; font-size: 14px; }
.notice b { color: #fff; font-weight: 600; }
.empty { color: var(--tx-3); font-weight: 300; }

/* posts, rows and cards: the template's hover — a blue wash, a lit rim */
.post { padding: 16px 22px; }
.post:hover { background: linear-gradient(90deg, rgba(0, 76, 255, .07), transparent 75%); }
.av img { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 76, 255, .45); }
.post-h .nm { font-weight: 600; }
.kind { border-radius: 8px; border-color: rgba(0, 76, 255, .55); background: rgba(0, 17, 77, .45); color: var(--blue-txt); }
.post-f { color: var(--tx-3); }
.coin-chip { border-radius: 16px; border-color: rgba(0, 76, 255, .45); background: linear-gradient(128deg, #000 20%, rgba(0, 45, 208, .35) 60%, #000 100%); }
.coin-chip:hover { border-color: #004cff; box-shadow: 0 0 22px -6px rgba(0, 76, 255, .8); }
.tchip, .achip { background: rgba(0, 76, 255, .12); border-color: rgba(0, 76, 255, .4); }
.tchip:hover, .achip:hover { background: rgba(0, 76, 255, .26); border-color: #004cff; }
a.row:hover, a.ev:hover { background: rgba(0, 76, 255, .09); border-color: rgba(0, 76, 255, .32); }
.row img { box-shadow: 0 0 0 1px rgba(0, 76, 255, .35); }
.tx { border-color: rgba(0, 76, 255, .35); background: rgba(0, 76, 255, .07); color: var(--blue-txt); border-radius: 8px; }
.tx:hover { color: #fff; border-color: #004cff; background: rgba(0, 76, 255, .22); }
.act-row { padding: 13px 22px; transition: background .25s; }
a.act-row:hover { background: rgba(0, 76, 255, .08); }
.act-row img { box-shadow: 0 0 0 1px rgba(0, 76, 255, .45); }

/* ---- right: the template's testimonial cards (black, a blue sweep through the middle, a blue rim) ---- */
.card { border-radius: 22px; border: 1px solid rgba(0, 76, 255, .4); background: linear-gradient(150deg, rgba(0, 45, 208, .26) 0%, rgba(0, 4, 26, .88) 42%, rgba(0, 0, 0, .92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 55, 255, .7); }
.rail .card h4 { font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.rail .row { border-radius: 14px; }
.rail .row .r b { color: #fff; }
.stats b { font-weight: 600; font-size: 19px; letter-spacing: -.03em; }
.stats small { color: var(--tx-3); }
.foot { color: var(--tx-3); }
.kpis div { border-radius: 16px; background: linear-gradient(160deg, rgba(0, 45, 208, .2), rgba(0, 4, 26, .82) 60%); border: 1px solid rgba(0, 76, 255, .32); }
.kpis div::before { background: linear-gradient(90deg, transparent, rgba(77, 128, 255, .9), transparent); }
.kpis b { font-weight: 600; font-size: 22px; letter-spacing: -.035em; }
.wc-l b, .wc-r b { font-weight: 600; letter-spacing: -.03em; }
.wc-div { background: linear-gradient(180deg, transparent, rgba(77, 128, 255, .6), transparent); }
.wcard:hover { background: rgba(0, 76, 255, .08); }

/* ---- sheets, toasts, tooltips: navy glass with a blue rim ---- */
.sheet-bg { background: rgba(0, 1, 10, .7); backdrop-filter: blur(10px); }
.sheet { border-radius: 26px; background: linear-gradient(160deg, #061036 0%, #01020f 50%, #000 100%); border: 1px solid rgba(0, 76, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 100px -30px #000, 0 0 90px -30px rgba(0, 55, 255, .6); }
.sheet-h h3 { font-size: 21px; font-weight: 600; letter-spacing: -.035em; }
.x { border-radius: 50%; border-color: rgba(0, 76, 255, .4); background: rgba(0, 76, 255, .08); }
.x:hover { border-color: #004cff; }
.wal { border-radius: 16px; border-color: rgba(0, 76, 255, .4); background: rgba(1, 2, 23, .8); }
.wal:hover { border-color: #004cff; background: rgba(0, 76, 255, .14); }
.toast { border-radius: 999px; padding: 12px 22px; background: linear-gradient(180deg, #071244, #020619); border-color: rgba(0, 76, 255, .55); box-shadow: 0 20px 40px -20px #000, 0 0 30px -10px rgba(0, 76, 255, .7); }
.toast.ok { border-color: rgba(69, 224, 143, .55); color: #fff; }
.tip { background: linear-gradient(180deg, #0a1640, #040a24); border-color: rgba(0, 76, 255, .5); }
.tip::after { background: #040a24; border-color: rgba(0, 76, 255, .5); }
.tip.below::after { background: #0a1640; }
.input, .pz-in, .pz-step, .pz-dd-b { background: rgba(0, 4, 26, .85); border-color: rgba(0, 76, 255, .32); }
.input:focus, .pz-in:focus { border-color: #004cff; box-shadow: 0 0 0 3px rgba(0, 76, 255, .25); }
.cta { border-radius: 24px; border-color: rgba(0, 76, 255, .45); background: linear-gradient(128deg, #000 15%, rgba(0, 45, 208, .4) 55%, #000 100%); padding: 40px 24px; }
.cta h3 { font-size: 26px; font-weight: 600; letter-spacing: -.04em; }

/* ---- the live column and its cards ---- */
.live-h { border-radius: 22px 22px 0 0; border-color: rgba(0, 76, 255, .4); background: linear-gradient(180deg, rgba(0, 45, 208, .22), rgba(1, 2, 23, .9)); }
.live-h b { font-size: 17px; font-weight: 600; }
.live-list { border-color: rgba(0, 76, 255, .4); border-radius: 0 0 22px 22px; background: rgba(1, 2, 23, .75); }
.live-pin { border-color: rgba(0, 76, 255, .4); background: rgba(1, 2, 23, .8); }
.ncard { border-radius: 18px; border-color: rgba(0, 76, 255, .3); background: linear-gradient(150deg, rgba(4, 12, 48, .96), rgba(1, 2, 18, .96)); }
.ncard:hover { border-color: rgba(0, 76, 255, .75); }
.ncard::before { background: var(--blue); }
.ncard.post::before, .ncard.reply::before, .ncard.like::before, .ncard.follow::before { background: var(--blue-lt); }

/* ---- the terminal and the coin cards ---- */
.tcol { border-radius: 22px; border-color: rgba(0, 76, 255, .32); background: linear-gradient(180deg, rgba(1, 2, 23, .9), rgba(0, 0, 0, .85)); }
.tcol-h { background: linear-gradient(180deg, rgba(0, 45, 208, .22), rgba(0, 45, 208, .05)); }
.tcol-h b { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.tk:hover { background: rgba(0, 76, 255, .07); }
.tk-n b.mc { color: #fff; }
.tk-age { color: var(--blue-txt); }
.coin-cards .tk { border-radius: 20px; border-color: rgba(0, 76, 255, .28); background: linear-gradient(150deg, rgba(0, 45, 208, .16), rgba(0, 4, 26, .88) 50%, #000); transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.coin-cards .tk:hover { border-color: rgba(0, 76, 255, .75); transform: translateY(-2px); box-shadow: 0 18px 40px -26px rgba(0, 76, 255, .9); }
.cchart { border-radius: 22px; border-color: rgba(0, 76, 255, .3); background: linear-gradient(180deg, rgba(1, 2, 23, .9), rgba(0, 0, 0, .8)); }
.cst { border-radius: 14px; border-color: rgba(0, 76, 255, .28); background: rgba(0, 4, 26, .8); }
.cst b { font-weight: 600; letter-spacing: -.02em; }
.cbar > i { background: linear-gradient(90deg, #0037ff, #4d80ff); }
.ch-i { box-shadow: 0 0 0 1px rgba(0, 76, 255, .5), 0 0 28px -6px rgba(0, 76, 255, .7); }
.hero-i { box-shadow: 0 0 0 2px #004cff, 0 0 36px -6px rgba(0, 76, 255, .8); }
.hero h1 { font-weight: 600; letter-spacing: -.04em; }
.brain-card, .owner, .card-sm, .tcard { border-color: rgba(0, 76, 255, .32); }
.brain-card { border-radius: 20px; background: linear-gradient(128deg, #000 15%, rgba(0, 45, 208, .3) 60%, #000 100%); }
.tcard { border-radius: 20px; background: linear-gradient(135deg, rgba(0, 45, 208, .22), rgba(0, 4, 26, .8)); }
.tcard-h { color: var(--blue-txt); border-bottom-color: rgba(0, 76, 255, .25); }
.tcard-h i { background: #4d80ff; box-shadow: 0 0 10px #4d80ff; }
.card-sm { border-radius: 16px; background: rgba(0, 4, 26, .8); }
.card-sm h5, .sc-badge, .b-tag { color: var(--blue-txt); }
.watch { border-radius: 22px; border-color: rgba(0, 76, 255, .4); background: #01020f; }
.pnlb { border-radius: 999px; }
.plan-pill { border-color: rgba(0, 76, 255, .35); }
.pz-style.on, .pz-seg button.on { border-color: #004cff; background: linear-gradient(150deg, rgba(0, 45, 208, .35), rgba(0, 4, 26, .8)); box-shadow: 0 0 0 1px rgba(0, 76, 255, .4) inset, 0 10px 30px -18px rgba(0, 76, 255, .9); }
.pz-tile, .pz-style, .pz-seg button { border-color: rgba(0, 76, 255, .25); background: linear-gradient(180deg, rgba(0, 76, 255, .07), rgba(0, 76, 255, .02)); }
.sc-tog.on i { background: #004cff; }
.cc-tg.on .sw { background: rgba(0, 76, 255, .45); } .cc-tg.on .sw i { background: #fff; }

/* the on-chain card: the template's feature card, blue sweep */
.sc-card { border-radius: 24px; border: 1px solid rgba(0, 76, 255, .6); background: linear-gradient(128deg, #000 19%, rgba(0, 45, 208, .48) 54%, #000 94%); box-shadow: 0 30px 70px -40px rgba(0, 55, 255, .9); padding: 22px 24px; }
.sc-h h3 { font-size: 20px; font-weight: 600; }
.sc-badge { border-radius: 8px; border-color: rgba(0, 76, 255, .62); background: rgba(0, 17, 77, .5); color: #fff; letter-spacing: .04em; }
.sc-card p { font-weight: 300; font-size: 14.5px; }

/* ---- How it works: the template's landing page, inside the pane ---- */
.lp { container-type: inline-size; padding-bottom: 30px; }
.lp-hero { position: relative; display: grid; justify-items: center; text-align: center; gap: 20px; padding: 64px 28px 70px; border-radius: 0 0 56px 56px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 115%, rgba(0, 55, 255, .7), rgba(0, 19, 87, .45) 45%, transparent 75%), #000; border-bottom: 1px solid rgba(0, 76, 255, .45); }
.lp-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(0, 76, 255, .62); background: rgba(0, 17, 77, .45); color: #fff; font: 400 13.5px var(--sans); }
.lp-badge.light { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .1); }
.lp-title { max-width: 24ch; font: 700 clamp(34px, 6.6cqw, 62px)/1.06 var(--display); letter-spacing: -.045em; }
.lp-lead { max-width: 640px; font: 300 17px/1.6 var(--sans); color: var(--tx-2); }
.lp-cta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; border-radius: 40px; border: 2px solid rgba(0, 46, 211, .55); background: rgba(0, 2, 20, .75); }
.lp-trust { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.lp-faces { display: flex; }
.lp-faces a { margin-left: -12px; transition: transform .25s var(--ease); } .lp-faces a:first-child { margin-left: 0; } .lp-faces a:hover { transform: translateY(-3px); }
.lp-faces img { width: 44px; height: 44px; border: 2px solid #004cff; background: #000; }
.lp-trust small { display: block; color: var(--tx-2); font-size: 14px; font-weight: 300; }
.lp-trust b { font: 600 21px var(--display); letter-spacing: -.035em; }
.lp-sec { padding: 40px 26px; }
.lp-head { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 28px; }
.lp-head.left { justify-items: start; text-align: left; }
.lp-head h2 { max-width: 22ch; font: 600 clamp(26px, 4.6cqw, 40px)/1.1 var(--display); letter-spacing: -.045em; }
.lp-head p { max-width: 640px; color: var(--tx-2); font-weight: 300; font-size: 16px; }
.lp-head p b { color: #fff; font-weight: 500; }
.lp-note { margin-top: 20px; text-align: center; }
.lp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-steps::before { content: ""; position: absolute; z-index: 0; top: 29px; left: 16.6%; right: 16.6%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #004cff, #0037ff); box-shadow: 0 0 18px rgba(0, 76, 255, .7); }
.lp-step { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; }
.lp-step i { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 3px solid #004cff; background: #000; font: 600 24px var(--display); font-style: normal; color: #fff; box-shadow: 0 0 30px -6px rgba(0, 76, 255, .9); }
.lp-step h4 { margin-top: 8px; font: 500 20px var(--display); letter-spacing: -.025em; }
.lp-step p { color: var(--tx-2); font-weight: 300; font-size: 14.5px; }
.lp-step p b { color: #fff; font-weight: 500; }
.lp-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lp-feat { display: grid; align-content: start; gap: 12px; padding: 28px; border-radius: 24px; background: #000; border: 1px solid rgba(194, 194, 194, .38); transition: border-color .35s, transform .35s var(--ease), box-shadow .35s; }
.lp-feat:hover { border-color: #004cff; transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0, 76, 255, .95); }
.lp-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: #002dd0; box-shadow: inset 0 0 0 2px #0037ff, 0 8px 22px -8px rgba(0, 55, 255, .9); }
.lp-ico svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-feat h4 { font: 500 21px var(--display); letter-spacing: -.025em; }
.lp-feat p { color: var(--tx-2); font-weight: 300; font-size: 14.5px; line-height: 1.6; }
.lp-feat p b { color: #fff; font-weight: 500; }
.lp-styles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.lp-style { display: grid; align-content: start; gap: 6px; padding: 18px 16px; border-radius: 20px; border: 1px solid #004cff; background: linear-gradient(128deg, #000 19%, rgba(0, 45, 208, .48) 54%, #000 94%); transition: transform .35s var(--ease), box-shadow .35s; }
.lp-style:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -26px rgba(0, 76, 255, 1); }
.lp-style small { font: 500 12px var(--mono); color: var(--blue-txt); }
.lp-style b { font: 600 19px var(--display); letter-spacing: -.03em; }
.lp-style p { color: var(--tx-2); font-weight: 300; font-size: 13.5px; }
.lp-band { background: linear-gradient(180deg, transparent, rgba(0, 17, 77, .6) 16%, rgba(0, 17, 77, .6) 84%, transparent); }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; text-align: center; }
.lp-stats b { display: block; font: 600 clamp(32px, 6cqw, 48px)/1 var(--display); letter-spacing: -.045em; color: #fff; font-variant-numeric: tabular-nums; }
.lp-stats b em { margin-left: 2px; font-style: normal; color: #2e66ff; }
.lp-stats small { display: block; margin-top: 10px; color: var(--tx-2); font-weight: 300; font-size: 15px; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-plan { display: grid; align-content: start; gap: 18px; padding: 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .44); background: linear-gradient(138deg, #000 49%, #002dd0 135%); transition: transform .35s var(--ease), box-shadow .35s; }
.lp-plan.hot { border-color: rgba(0, 76, 255, .85); background: linear-gradient(138deg, #000 38%, #002dd0 100%); }
.lp-plan:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(0, 76, 255, 1); }
.lp-plan-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lp-plan-h b { font: 600 36px var(--display); letter-spacing: -.045em; }
.lp-plan-h b small { font: 400 15px var(--sans); letter-spacing: 0; color: var(--tx-2); }
.lp-tag { padding: 4px 12px; border-radius: 999px; border: 1px solid #004cff; color: #fff; font-size: 13px; white-space: nowrap; }
.lp-tag .tok { font-size: 12px; }
.lp-plan ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp-plan li { display: flex; align-items: flex-start; gap: 10px; color: var(--tx-2); font-weight: 300; font-size: 14px; line-height: 1.5; }
.lp-plan li b { color: #fff; font-weight: 600; }
.lp-plan li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: #c2c2c2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.proof { margin: 0; }
.proof-card { padding: 18px; }
.proof-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.proof-lists .list { max-height: 440px; overflow-y: auto; }
.proof .mint.soon { color: var(--blue-txt); }
.lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 26px; align-items: start; }
.lp-qs { display: grid; gap: 10px; }
.lp-q { border-radius: 20px; border: 1px solid rgba(0, 76, 255, .55); background: #000; transition: border-color .3s, box-shadow .3s; }
.lp-q.open { border-color: #004cff; box-shadow: 0 16px 40px -28px rgba(0, 76, 255, 1); }
.lp-q > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 17px 18px; text-align: left; font: 400 15.5px var(--sans); color: #fff; }
.lp-q > button span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #002dd0; transition: transform .4s var(--ease); }
.lp-q > button span svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lp-q.open > button span { transform: rotate(180deg); }
.lp-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.lp-q.open .lp-a { grid-template-rows: 1fr; }
.lp-a > p { min-height: 0; overflow: hidden; margin: 0; padding: 0 18px; color: var(--tx-2); font-weight: 300; font-size: 14.5px; }
.lp-a > p::after { content: ""; display: block; height: 16px; }
.lp-final { position: relative; display: grid; justify-items: center; gap: 16px; padding: 52px 26px; border-radius: 30px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #0037ff 0%, #002dd0 45%, #001357 100%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 40px 80px -40px rgba(0, 55, 255, .95); }
.lp-final h2 { font: 700 clamp(30px, 5.4cqw, 46px)/1.05 var(--display); letter-spacing: -.045em; }
.lp-final p { max-width: 520px; color: rgba(255, 255, 255, .86); font-weight: 300; font-size: 16px; }
/* three on a row, the last two centred under them */
@container (min-width: 761px) and (max-width: 980px) { .lp-styles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lp-style { grid-column: span 2; } .lp-style:nth-child(4) { grid-column: 2 / span 2; } }
@container (max-width: 760px) {
  .lp-feats, .lp-plans, .lp-faq, .proof-lists { grid-template-columns: minmax(0, 1fr); }
  .lp-styles, .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-style:last-child { grid-column: 1 / -1; }
  .lp-sec { padding: 32px 18px; } .lp-hero { padding: 48px 18px 56px; border-radius: 0 0 36px 36px; }
}
@container (max-width: 540px) { .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; } .lp-steps::before { display: none; } }

/* ---- motion: everything comes into focus as it arrives (the template's blur-up), never in a loop ---- */
.bw { display: inline-block; }
.bt .bw { animation: bwIn .7s var(--ease) both; animation-delay: calc(var(--w) * 70ms); }
.lp-title .bw { animation: bwIn 1s var(--ease) both; animation-delay: calc(var(--w) * 110ms + 120ms); }
@keyframes bwIn { from { opacity: 0; filter: blur(12px); transform: translateY(12px); } }
[data-rv] { opacity: 0; filter: blur(8px); transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
[data-rv].in { opacity: 1; filter: none; transform: none; }
.lp-steps .lp-step:nth-child(2) { --i: 1; } .lp-steps .lp-step:nth-child(3) { --i: 2; }
.lp-feats .lp-feat:nth-child(even) { --i: 1; }
.lp-plans .lp-plan:nth-child(2) { --i: 1; } .lp-plans .lp-plan:nth-child(3) { --i: 2; }
.lp-stats > div:nth-child(3n+2) { --i: 1; } .lp-stats > div:nth-child(3n) { --i: 2; }
.rv-in { animation: rvIn .65s var(--ease) both; animation-delay: var(--rv-d, 0ms); }
@keyframes rvIn { from { opacity: 0; filter: blur(6px); transform: translateY(14px); } }
/* the entrance on load: the sidebar slides in item by item, the pane and the columns rise into focus */
.boot .side > :not(.nav-glow) { animation: bootSide .7s var(--ease) both; }
.boot .side > :nth-child(2) { animation-delay: .04s; } .boot .side > :nth-child(3) { animation-delay: .08s; } .boot .side > :nth-child(4) { animation-delay: .12s; }
.boot .side > :nth-child(5) { animation-delay: .16s; } .boot .side > :nth-child(6) { animation-delay: .2s; } .boot .side > :nth-child(7) { animation-delay: .24s; }
.boot .side > :nth-child(8) { animation-delay: .28s; } .boot .side > :nth-child(9) { animation-delay: .32s; } .boot .side > :nth-child(10) { animation-delay: .36s; }
.boot .side > :nth-child(n+11) { animation-delay: .4s; }
.boot .main { animation: bootUp .9s .08s var(--ease) both; }
.boot .rail > *, .boot .live { animation: bootUp .9s .22s var(--ease) both; }
.boot .rail > :nth-child(2) { animation-delay: .32s; }
@keyframes bootSide { from { opacity: 0; transform: translateX(-14px); filter: blur(6px); } }
@keyframes bootUp { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } }
.embed [data-rv] { opacity: 1; filter: none; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1; filter: none; transform: none; transition: none; }
  .bt .bw, .lp-title .bw, .rv-in, .boot .side > *, .boot .main, .boot .rail > *, .boot .live { animation: none; }
  .nav-glow { transition: none; }
}

/* ---- narrow screens: the icon rail and the phone bar keep the template's look ---- */
@media (max-width: 860px) {
  .side .btn.wide .arr { display: none; }
  .side .btn.wide { border-radius: 50%; }
  .brand { padding: 8px 0 14px; }
}
@media (max-width: 600px) {
  .side { background: rgba(0, 1, 12, .92); border-top-color: rgba(0, 76, 255, .4); }
  .main { border: 0; border-radius: 0; background: rgba(1, 2, 23, .9); }
  .nav-glow { border-radius: 13px; }
  .tabs { margin: 12px 12px 6px; }
}

/* ---- How it works: the slogan's second line in blue, and the footer (the template's: links, then the name, huge) ---- */
.lp-acc { color: #1f5fff; }
.lp-foot { margin: 10px 18px 0; padding: 40px 26px 0; border-radius: 30px 30px 0 0; overflow: hidden; background: linear-gradient(180deg, rgba(0, 17, 77, .55), rgba(1, 2, 23, .9) 60%); border: 1px solid rgba(0, 76, 255, .3); border-bottom: 0; }
.lp-foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-foot-id .brand { padding: 0 0 12px; }
.lp-foot-id p { max-width: 320px; color: var(--tx-2); font-weight: 300; font-size: 14px; }
.lp-foot nav { display: grid; align-content: start; gap: 9px; }
.lp-foot nav b { margin-bottom: 4px; font: 600 15px var(--display); letter-spacing: -.02em; }
.lp-foot nav a, .lp-foot nav span { color: var(--tx-2); font-weight: 300; font-size: 14px; }
.lp-foot nav a:hover { color: #fff; }
.lp-foot-big { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; margin: 34px -10px -4.5cqw; opacity: .16; pointer-events: none; user-select: none; }
.lp-foot-big img { width: 15cqw; height: 15cqw; filter: grayscale(1) brightness(2.6); }
.lp-foot-big span { font: 700 19cqw/1 var(--display); letter-spacing: -.06em; background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .15)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@container (max-width: 760px) { .lp-foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-foot-id { grid-column: 1 / -1; } }

/* =====================================================================================================================
   NFT collections, the wallet, the buyback vault, search and the console: same template, same rules (black, navy
   panels with a blue hairline, electric blue for what's live; nothing moves on its own)
   ===================================================================================================================== */
.tick { animation: anyTick 1s var(--ease); }
@keyframes anyTick { 0% { box-shadow: 0 0 0 1px rgba(77, 128, 255, .9), 0 0 24px -6px var(--glow); } 100% { box-shadow: none; } }
.flash { animation: anyTick 1.1s var(--ease); }

/* the sidebar: search, and the phone's More */
.srch-btn { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); color: var(--tx-3); font-size: 13.5px; transition: border-color .2s, color .2s; }
.srch-btn:hover { border-color: var(--line-2); color: var(--tx-2); }
.srch-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.srch-btn span { flex: 1; text-align: left; }
kbd { padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(66, 116, 255, .08); font: 500 11px var(--mono); color: var(--tx-3); }
.nav-more { display: none; }
#wallet-txt b { font-family: var(--mono); color: var(--tx); font-weight: 600; }
@media (max-width: 860px) { .srch-btn { justify-content: center; padding: 10px 0; } .srch-btn span, .srch-btn kbd { display: none; } }
@media (max-width: 600px) {
  .srch-btn { display: none; }
  .side .nav-i.more-only { display: none !important; }
  .nav-more { display: flex; }
}
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-i { display: grid; justify-items: center; gap: 8px; padding: 16px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset); color: var(--tx-2); font-size: 13px; font-weight: 500; }
.more-i.on { border-color: var(--line-3); color: #fff; }
.more-i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the console's banner, for everyone */
.banner { position: fixed; z-index: 45; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: min(720px, calc(100vw - 32px)); padding: 9px 10px 9px 16px; border-radius: 999px; border: 1px solid rgba(77, 128, 255, .6); background: linear-gradient(180deg, #0a1a5c, #04092a); box-shadow: var(--edge), 0 16px 40px -16px #000, 0 0 30px -12px var(--glow); font-size: 13.5px; }
.banner span { flex: 1; min-width: 0; }
.banner button { width: 26px; height: 26px; border-radius: 50%; font-size: 17px; color: var(--tx-2); flex: none; } .banner button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 600px) { .banner { top: 8px; border-radius: 16px; } }

/* ---- the Collections page: cards ---- */
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 12px 16px 18px; }
.colc { display: grid; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #000; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; min-width: 0; }
.colc:hover { border-color: #004cff; transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(0, 76, 255, .95); }
.colc-art { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 2px; aspect-ratio: 3 / 2; background: #01030f; }
.colc-art img { width: 100%; height: 100%; object-fit: cover; }
.colc-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; min-height: 0; }
.colc-side img { min-height: 0; }
.colc-flag { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 4, 26, .82); border: 1px solid rgba(77, 128, 255, .55); font: 600 11px var(--sans); color: #dfe6ff; backdrop-filter: blur(6px); }
.colc-flag.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 8px var(--up); }
.colc-flag.sold { border-color: rgba(242, 196, 109, .6); color: var(--gold); }
.colc-flag.feat { border-color: rgba(255, 255, 255, .6); background: linear-gradient(180deg, #0037ff, #001357); color: #fff; }
.colc-b { display: grid; gap: 8px; padding: 12px 14px 14px; min-width: 0; }
.colc-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.colc-h b { flex: 1; min-width: 0; font: 600 17px/1.2 var(--display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam { flex: none; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line-2); font: 600 10.5px var(--sans); color: var(--blue-txt); letter-spacing: .02em; }
.colc-by { display: flex; align-items: center; gap: 6px; color: var(--tx-3); font-size: 12.5px; min-width: 0; white-space: nowrap; overflow: hidden; }
.colc-by img { width: 18px; height: 18px; }
.colc-bar, .mintc-bar, .pc-bar { position: relative; display: block; height: 6px; border-radius: 6px; background: rgba(66, 116, 255, .14); overflow: hidden; }
.colc-bar i, .mintc-bar i, .pc-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #0037ff, #4d80ff); box-shadow: 0 0 12px rgba(0, 76, 255, .8); transition: width .6s var(--ease); }
.colc-bar.done i, .mintc-bar.done i { background: linear-gradient(90deg, #b8913a, #f2c46d); box-shadow: none; }
.colc-st { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--tx-3); white-space: nowrap; }
.colc-st b { color: var(--tx); font: 600 12.5px var(--mono); }

/* ---- a collection's page ---- */
.colp-hero { display: grid; gap: 14px; padding: 0 0 6px; }
.colp-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; height: 150px; overflow: hidden; border-bottom: 1px solid var(--line); -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
.colp-strip img { width: 100%; height: 100%; object-fit: cover; }
.colp-id { display: flex; align-items: flex-end; gap: 16px; margin-top: -64px; padding: 0 18px; position: relative; flex-wrap: wrap; }
.colp-cover { width: 104px; height: 104px; border-radius: 22px; border: 3px solid #000; box-shadow: 0 0 0 1px var(--line-3), 0 18px 40px -16px rgba(0, 76, 255, .9); background: #000; }
.colp-id h1 { font: 700 clamp(24px, 3.4vw, 34px)/1.1 var(--display); letter-spacing: -.04em; }
.colp-id .grow { padding-bottom: 6px; }
.colp-links { padding-bottom: 8px; }
.colp-hero > .about, .colp-hero > .card-sm, .colp-hero > .colp-stats { margin: 0 18px; }
.colp-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.colp-stats .cst { min-width: 86px; padding: 8px 12px; }
.colp-stats .cst b { font-size: 16px; }
.mintc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; margin: 8px 16px 2px; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(77, 128, 255, .55); background: radial-gradient(120% 140% at 0% 0%, rgba(0, 55, 255, .28), rgba(0, 19, 87, .18) 45%, #000 85%); box-shadow: var(--edge), 0 24px 50px -36px rgba(0, 76, 255, 1); }
.mintc.done { border-color: rgba(242, 196, 109, .4); background: radial-gradient(120% 140% at 0% 0%, rgba(242, 196, 109, .12), #000 70%); }
.mintc-l { display: grid; gap: 8px; min-width: 0; }
.mintc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mintc-h b { display: inline-flex; align-items: center; gap: 8px; font: 600 18px var(--display); letter-spacing: -.02em; }
.mintc-h span { font: 600 14px var(--mono); color: var(--tx-2); }
.mintc-bar { height: 10px; }
.mintc small { color: var(--tx-3); font-size: 12.5px; }
.mintc-r { display: flex; align-items: center; gap: 10px; }
.mintc-r .btn { height: 46px; padding: 0 22px; font-size: 15px; }
.mintc-fine { grid-column: 1 / -1; }
.qty { display: inline-flex; align-items: center; height: 46px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--inset); }
.qty button { width: 40px; height: 100%; font-size: 20px; color: var(--tx-2); } .qty button:hover { color: #fff; }
.qty b { min-width: 22px; text-align: center; font: 600 16px var(--mono); }
@media (max-width: 640px) { .mintc { grid-template-columns: minmax(0, 1fr); } .mintc-r { justify-content: space-between; } .mintc-r .btn { flex: 1; } .colp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 120px; } .colp-strip img:nth-child(n+5) { display: none; } .colp-cover { width: 84px; height: 84px; } .colp-id { margin-top: -48px; } }

/* pieces: the toolbar, the grid, a tile */
.nft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 0; }
.sel { display: inline-flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; height: 36px; border-radius: 11px; border: 1px solid var(--line); background: var(--inset); font-size: 12.5px; color: var(--tx-3); }
.sel select { height: 100%; max-width: 210px; border: 0; background: transparent; color: var(--tx); font: 500 13px var(--sans); outline: none; cursor: pointer; }
.sel select option, .sel select optgroup { background: #050c2c; color: #fff; }
.nft-bar .fine { margin-left: auto; }
.nft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.nftt { display: grid; gap: 6px; padding: 6px 6px 9px; border-radius: 16px; border: 1px solid var(--line); background: #000; text-align: left; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; min-width: 0; }
.nftt:hover { border-color: #004cff; transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(0, 76, 255, 1); }
.nftt.mine { border-color: rgba(69, 224, 143, .45); }
.nftt-art { position: relative; display: block; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: #01030f; }
.nftt-art img { width: 100%; height: 100%; }
.nftt-tag { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: rgba(0, 4, 26, .85); border: 1px solid rgba(77, 128, 255, .55); font: 600 11.5px var(--mono); font-style: normal; color: #fff; backdrop-filter: blur(4px); }
.nftt-tag .soli { color: var(--blue-txt); }
.nftt-b { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 3px; }
.nftt-b b { font: 600 14px var(--mono); }
.rk { padding: 1px 6px; border-radius: 6px; background: rgba(66, 116, 255, .12); font: 600 10.5px var(--mono); color: var(--tx-3); }
.rk.rk-top { background: rgba(242, 196, 109, .14); color: var(--gold); }
.nftt-s { padding: 0 3px; font-size: 11.5px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.more { width: calc(100% - 32px); margin: 0 16px 16px; }
.row.nev { gap: 12px; }
.nev-i, .act-pic { flex: none; padding: 0; border-radius: 10px; overflow: hidden; }
.nev-i img, .act-pic img { width: 42px; height: 42px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); }
.row.nev.sale b { color: var(--up); }
.traits { gap: 16px; }
.trait-cat h5 { margin: 0 0 8px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-2); }
.trait-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.tv { display: grid; gap: 1px; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--line); background: var(--inset); text-align: left; transition: border-color .2s; }
.tv:hover { border-color: var(--line-3); }
.tv b { font-size: 13px; font-weight: 600; } .tv small { font: 500 11px var(--mono); color: var(--tx-3); }

/* a piece: its picture and everything about it */
.nd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.nd-art { position: sticky; top: 16px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -36px rgba(0, 76, 255, 1); background: #01030f; }
.nd-art img { width: 100%; aspect-ratio: 1; }
.nd-info { display: grid; gap: 12px; min-width: 0; }
.nd-col { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-txt); font-weight: 600; font-size: 13.5px; }
.nd-col img { width: 22px; height: 22px; border-radius: 6px; }
.nd h2 { font: 700 clamp(22px, 3vw, 30px)/1.1 var(--display); letter-spacing: -.035em; }
.nd-rank { justify-self: start; padding: 4px 10px; border-radius: 9px; background: rgba(242, 196, 109, .1); border: 1px solid rgba(242, 196, 109, .35); color: var(--tx-2); font-size: 13px; }
.nd-rank b { color: var(--gold); }
.nd-owner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset); }
.nd-owner img { width: 34px; height: 34px; } .nd-owner small { display: block; font-size: 11.5px; color: var(--tx-3); } .nd-owner b { font-size: 14px; }
.nd-act { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid rgba(77, 128, 255, .45); background: var(--glass); }
.nd-price small { display: block; font-size: 12px; color: var(--tx-3); } .nd-price b { font: 700 22px var(--sans); letter-spacing: -.01em; } .nd-price em { font-style: normal; color: var(--tx-3); margin-left: 6px; }
.nd-list, .nd-move { display: flex; gap: 8px; } .nd-list .input, .nd-move .input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; }
.nd-traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.ndt { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); min-width: 0; }
.ndt small { font: 700 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.ndt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ndt em { font-style: normal; font: 500 11px var(--mono); color: var(--tx-3); }
.ndt.rare { border-color: rgba(242, 196, 109, .4); } .ndt.rare em { color: var(--gold); }
.nd-hist h5 { margin: 4px 0 6px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-2); }
.ndh { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--tx-2); }
.ndh b { font: 600 12.5px var(--mono); color: var(--tx); } .ndh small { color: var(--tx-3); font-size: 11.5px; }
.ndh-k { flex: none; min-width: 70px; font-weight: 600; color: var(--tx); } .ndh-k.sale { color: var(--up); } .ndh-k.mint { color: var(--blue-txt); }
.nd.in-sheet { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 760px) { .nd, .nd.in-sheet { grid-template-columns: minmax(0, 1fr); } .nd-art { position: static; max-width: 420px; } }
/* after a mint: the pieces turn over one after another */
.reveal { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; perspective: 900px; }
.rv-card { display: grid; gap: 4px; justify-items: center; text-align: center; }
.rv-face { display: block; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-3); box-shadow: 0 20px 40px -24px rgba(0, 76, 255, 1); animation: rvFlip .9s var(--ease) both; animation-delay: calc(var(--i) * 180ms + 100ms); }
.rv-face img { width: 100%; aspect-ratio: 1; }
.rv-card b { font: 600 14px var(--mono); } .rv-card small { color: var(--tx-3); font-size: 12px; }
@keyframes rvFlip { from { transform: rotateY(90deg) scale(.85); opacity: 0; filter: brightness(2.2) blur(4px); } }
@media (prefers-reduced-motion: reduce) { .rv-face { animation: none; } }
/* asking an agent for a collection */
.fam-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fam-o { display: grid; gap: 6px; padding: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--inset); text-align: left; transition: border-color .2s, box-shadow .2s; }
.fam-o.on { border-color: #004cff; box-shadow: 0 0 0 1px #004cff, 0 14px 30px -18px rgba(0, 76, 255, 1); }
.fam-art { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2; }
.fam-art img { width: 100%; height: 100%; object-fit: cover; } .fam-art img:first-child { grid-row: span 2; }
.fam-o b { font: 600 14px var(--display); } .fam-o small { color: var(--tx-3); font-size: 11.5px; line-height: 1.3; }
.or-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.field em { font-style: normal; font-weight: 400; color: var(--tx-3); }
@media (max-width: 640px) { .fam-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .or-grid { grid-template-columns: minmax(0, 1fr); } }

/* in the feed: a collection (with its mint) or a piece */
.post-col { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 10px; padding: 8px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--glass); transition: border-color .2s; }
.post-col:hover { border-color: var(--line-3); }
.pc-art { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border-radius: 10px; overflow: hidden; }
.pc-art img { width: 100%; aspect-ratio: 1; }
.pc-b { display: grid; gap: 4px; min-width: 0; } .pc-b b { font: 600 16px var(--display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-b small { color: var(--tx-3); font-size: 12.5px; }
.pc-go { padding: 8px 16px; border-radius: 999px; background: var(--silver); border: 1px solid rgba(255, 255, 255, .5); font-weight: 600; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.post-nft { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--glass); text-align: left; max-width: 100%; }
.post-nft img { width: 96px; height: 96px; border-radius: 11px; }
.post-nft b { display: block; font: 600 15px var(--display); } .post-nft small { color: var(--tx-3); font-size: 12.5px; }
.kind.collection, .kind.nft { color: var(--blue-txt); border-color: rgba(77, 128, 255, .45); background: rgba(77, 128, 255, .1); }

/* the Live feed's NFT cards */
.ncard.fc-collection { --fc: #6f9bff; --fc-soft: rgba(111, 155, 255, .12); }
.ncard.fc-soldout { --fc: #f2c46d; --fc-soft: rgba(242, 196, 109, .11); }
.ncard.fc-bigsale { --fc: #3ef08a; --fc-soft: rgba(62, 240, 138, .1); }
.ncard.fc-vault { --fc: #ff8a3d; --fc-soft: rgba(255, 138, 61, .11); }
.ncard.fc-vault .b-name { color: #ffb36b; }
.ncard.nftmint::before { background: var(--blue-lt); }
.ncard .grow > .kind.nftmint { color: var(--blue-txt); border-color: rgba(77, 128, 255, .45); background: rgba(77, 128, 255, .1); }
.ncard button.ncard-coin { text-align: center; }

/* ---- your wallet ---- */
.wal-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 22px; border: 1px solid rgba(77, 128, 255, .55); background: radial-gradient(120% 160% at 0% 0%, rgba(0, 55, 255, .35), rgba(0, 19, 87, .2) 50%, #000 90%); box-shadow: var(--edge), 0 30px 60px -40px rgba(0, 76, 255, 1); }
.wal-l { display: grid; gap: 4px; justify-items: start; }
.wal-l small { color: var(--tx-2); font-size: 13px; }
.wal-bal { font: 700 clamp(30px, 4.6vw, 44px)/1.05 var(--display); letter-spacing: -.04em; }
.wal-bal .soli { color: var(--blue-txt); }
.wal-l em { font-style: normal; color: var(--tx-3); font-size: 13px; }
.wal-l .ch-copy { margin-top: 6px; }
.wal-r { display: flex; flex-wrap: wrap; gap: 8px; }
.wal-note { margin: -4px 2px 0; }
.wlog-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 15px var(--mono); }
.wlog-i.in { background: rgba(69, 224, 143, .12); color: var(--up); } .wlog-i.out { background: rgba(66, 116, 255, .12); color: var(--blue-txt); }
.cta.slim { margin: 12px 16px; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis a { display: block; color: inherit; }
.rowb.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 8px; }
.order-note { display: flex; align-items: center; gap: 8px; color: var(--blue-txt); }

/* ---- the buyback vault ---- */
.bb-vault { display: grid; justify-items: center; gap: 4px; margin-top: 4px; padding: 22px 30px 18px; border-radius: 26px; border: 1px solid rgba(255, 138, 61, .45); background: radial-gradient(90% 120% at 50% 0%, rgba(255, 138, 61, .16), rgba(0, 4, 26, .85) 70%); box-shadow: 0 30px 70px -40px rgba(255, 138, 61, .7); }
.bb-vault small { color: var(--tx-2); font-size: 13.5px; }
.bb-vault > b { font: 700 clamp(40px, 8cqw, 68px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; border-radius: 12px; padding: 0 6px; }
.bb-vault > b .soli { color: #ffb36b; width: .6em; height: .6em; }
.bb-vault > em { font-style: normal; color: var(--tx-3); }
.bb-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 8px; font-size: 13px; color: var(--tx-3); }
.bb-meta b { color: var(--tx); font-family: var(--mono); font-size: 13px; }
.bb-state { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--tx-2); max-width: 46ch; }
.bb-src { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bb-s { display: grid; align-content: start; gap: 8px; padding: 22px; border-radius: 22px; background: #000; border: 1px solid rgba(194, 194, 194, .3); transition: border-color .35s, transform .35s var(--ease); }
.bb-s:hover { border-color: #004cff; transform: translateY(-3px); }
.bb-s > b { font: 600 34px/1 var(--display); letter-spacing: -.045em; margin-top: 6px; }
.bb-s > small { color: #fff; font-weight: 500; font-size: 14px; }
.bb-s > p { color: var(--tx-3); font-size: 13px; font-weight: 300; }
.bb-s-n { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.bb-s-n span { display: grid; } .bb-s-n b { font: 600 13px var(--mono); white-space: nowrap; } .bb-s-n em { font: 400 11px var(--sans); font-style: normal; color: var(--tx-3); }
.bb-chart-box { padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: rgba(0, 2, 20, .7); }
.bb-chart { display: block; width: 100%; height: 190px; } .bb-chart text { fill: var(--tx-3); font: 500 11px var(--mono); }
.bb-ledger .list { max-height: 520px; overflow-y: auto; }
.vrow-i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(66, 116, 255, .14); }
.vrow-i svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-txt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vrow-i.mint svg, .vrow-i.launch svg { stroke: #a9c3ff; } .vrow-i.sale svg { stroke: var(--up); } .vrow-i.burn { background: rgba(255, 138, 61, .14); } .vrow-i.burn svg { stroke: #ff8a3d; }
.bb-res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-more { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-txt); font-weight: 500; font-size: 14px; }
.lp-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@container (max-width: 980px) { .bb-src { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 760px) { .lp-plans.four { grid-template-columns: minmax(0, 1fr); } .bb-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 480px) { .bb-src { grid-template-columns: minmax(0, 1fr); } }

/* ---- search ---- */
.sheet.srch-sheet { width: min(620px, 100%); align-self: start; margin-top: 8vh; }
.srch { display: grid; }
.srch-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.srch-in svg { width: 20px; height: 20px; fill: none; stroke: var(--tx-3); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.srch-in .input { border: 0; background: none; box-shadow: none; padding: 8px 0; font-size: 16px; }
.srch-r { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; }
.srch-g h5 { margin: 8px 10px 4px; font: 700 10.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-2); }
.srch-r .row { display: flex; width: 100%; }
.srch-r .row.sel { background: rgba(66, 116, 255, .14); border-color: var(--line-2); }
.srch-hint { padding: 14px 10px; }

/* ---- the console ---- */
.con .card.pad { display: grid; gap: 10px; padding: 16px; }
.con .card h4 { padding: 0; }
.con-k { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.con-row { display: flex; flex-wrap: wrap; gap: 8px; }
.con-line { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.con-line .input { flex: 1; min-width: 180px; }
.con-line .field.grow { flex: 1; }
.con-grid2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.con-agents { max-height: 520px; overflow-y: auto; }
.con-a .r { margin-left: auto; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn.btn-stop { border-color: rgba(255, 111, 125, .5); color: #ffb3bb; }
@media (max-width: 640px) { .con-k, .con-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a sheet open: the pop-ups wait (they'd sit on top of it) */
.sheet-bg.on ~ .nstack { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .side { padding-right: 14px; } .side .who { padding: 10px 6px; } }
.ag-nft { width: 64px; height: 64px; margin-top: 6px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line-2); }
/* the Live card's "posted" tag carries the class "post": it must not take the feed post's padding and rule */
.ncard .kind.post { display: inline-block; gap: 0; padding: 1px 8px; border-bottom: 1px solid rgba(0, 76, 255, .55); cursor: inherit; background: rgba(0, 17, 77, .45); }
.ncard .kind.post:hover { background: rgba(0, 17, 77, .45); }