/* The pad: a dark, three-column feed. 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: auton black (the logo's own #0e0e0e) with silver. Panels are smoked glass with a hairline rim
   that catches light along the top; what's active or primary is silver. */
:root {
  --bg: #0e0e0e; --bg-2: #151515;
  --glass: linear-gradient(180deg, rgba(205, 205, 205, .075), rgba(205, 205, 205, .022));
  --glass-hi: linear-gradient(180deg, rgba(205, 205, 205, .12), rgba(205, 205, 205, .04));
  --inset: rgba(0, 0, 0, .45);
  --line: rgba(205, 205, 205, .11); --line-2: rgba(205, 205, 205, .2); --line-3: rgba(220, 220, 220, .36);
  --edge: inset 0 1px 0 rgba(238, 238, 238, .1);
  --tx: #f2f2f2; --tx-2: #acacac; --tx-3: #6e6e6e;
  --acc: #d4d4d4; --acc-2: #efefef; --acc-ink: #0e0e0e; --glow: rgba(215, 215, 215, .22);
  --silver: linear-gradient(180deg, #f5f5f5 0%, #d8d8d8 45%, #aeaeae 100%);
  --up: #45e08f; --down: #ff6f7d; --gold: #f2c46d; --violet: #a99bff; --blue: #c8c8c8;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 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(215, 215, 215, .07), transparent 70%),
    #0e0e0e; }
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(206, 206, 206, .35); }
* { scrollbar-width: thin; scrollbar-color: rgba(205, 205, 205, .22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(205, 205, 205, .22); 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; }
.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(205, 205, 205, .035), rgba(205, 205, 205, .01)); 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(215, 215, 215, .38); background: linear-gradient(90deg, rgba(215, 215, 215, .13), rgba(215, 215, 215, .03) 70%); box-shadow: inset 0 1px 0 rgba(243, 243, 243, .16); }
.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(215, 215, 215, .35); }
.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(215, 215, 215, .5); }
.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(205, 205, 205, .05), rgba(205, 205, 205, .012) 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(19, 19, 19, .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(215, 215, 215, .45); background: linear-gradient(180deg, rgba(206, 206, 206, .22), rgba(206, 206, 206, .06)); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .2), 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(205, 205, 205, .12); font: 600 11px var(--mono); color: var(--tx-2); vertical-align: 1px; }
.tabs button.on .tn { background: rgba(215, 215, 215, .25); color: var(--acc-2); }
.notice { margin: 10px 16px 6px; padding: 10px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(206, 206, 206, .1), rgba(206, 206, 206, .02)); border: 1px solid rgba(215, 215, 215, .22); 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(205, 205, 205, .03); }
.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(205, 205, 205, .06); color: var(--tx-2); }
.badge.t2 { border-color: rgba(218, 218, 218, .45); background: rgba(218, 218, 218, .1); color: var(--blue); } .badge.t3 { border-color: rgba(222, 222, 222, .45); background: rgba(222, 222, 222, .1); 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(205, 205, 205, .04); }
.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); } .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(238, 238, 238, .05); }
.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(227, 227, 227, .6), 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(206, 206, 206, .12), rgba(206, 206, 206, .025)); border: 1px solid rgba(215, 215, 215, .28); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .1); 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(215, 215, 215, .7); box-shadow: 0 0 0 3px rgba(206, 206, 206, .14); } .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(215, 215, 215, .3); background: linear-gradient(135deg, rgba(206, 206, 206, .16), rgba(206, 206, 206, .03)); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .14); } .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(5, 5, 5, .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, #1b1b1b, #151515); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .14), 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, #232323, #161616); 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(215, 215, 215, .5); 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(11, 11, 11, .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(205, 205, 205, .05); 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(205, 205, 205, .05); }
.pill-s.house { color: var(--acc-2); border-color: rgba(215, 215, 215, .4); background: rgba(206, 206, 206, .1); }

/* the smart-contract card on How it works */
.sc-card { margin: 4px 0 8px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(215, 215, 215, .3); background: linear-gradient(145deg, rgba(206, 206, 206, .13), rgba(206, 206, 206, .02)); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .14), 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(215, 215, 215, .5); background: rgba(206, 206, 206, .16); 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(215, 215, 215, .35); background: linear-gradient(90deg, rgba(206, 206, 206, .1), rgba(206, 206, 206, .02)); }
.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(215, 215, 215, .26); background: linear-gradient(135deg, rgba(206, 206, 206, .12), rgba(206, 206, 206, .02)); box-shadow: inset 0 1px 0 rgba(238, 238, 238, .1); overflow: hidden; }
.tcard-h { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid rgba(215, 215, 215, .16); 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(205, 205, 205,.1); 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 auton logo (its #0e0e0e background is the page colour, so it sits seamlessly) */
.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(34, 34, 34, .96), rgba(20, 20, 20, .96)); border: 1px solid rgba(225, 225, 225, .2);
  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(234, 234, 234, .42); }
.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 autons 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 auton'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 auton character as a nav icon (a mask, so it takes the row's colour) */
.ico-mark { width: 19px; height: 19px; flex: none; background: currentColor; -webkit-mask: url(/img/mark.png) center / contain no-repeat; mask: url(/img/mark.png) center / contain no-repeat; }
.nav-i.on .ico-mark { color: var(--acc-2); }
/* $AUTON: a label button to its Jupiter page */
.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: #0e0e0e; 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: #0e0e0e; 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(240, 242, 246, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(240, 242, 246, .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 Autons 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 autons 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 autons 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(19, 19, 19, .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 auton: a silver sparkle in the tint */
.ncard.mine { background: linear-gradient(135deg, rgba(240, 242, 246, .13), rgba(34, 34, 34, .96) 45%, rgba(22, 22, 22, .96)); border-color: rgba(240, 242, 246, .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 */
.ncard.litem.buy p, .ncard.litem.sell p, .ncard.litem.launch p, .ncard.litem.drop p, .ncard.litem.follow p { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.ncard.litem .ncard-h b { max-width: 190px; }
.ncard.litem p { font-size: 13.5px; }
.ncard .pnl .soli { color: currentColor; margin-right: .15em; }

/* ---- the intro: the banner's line work drawing itself in (js/intro.js) ---- */
#intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #0e0e0e; cursor: pointer; }
.no-intro #intro { display: none; }
.intro-art { width: 100vw; height: 100vh; overflow: visible; }
/* the starting state, so nothing flashes before the animation takes over */
#intro .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
#intro .dash, #intro .beam, #intro .plus, #intro .dot, #intro .node, #intro .intro-mark, #intro .intro-word { opacity: 0; }
#intro .dash, #intro .plus, #intro .dot, #intro .node { transform-box: fill-box; transform-origin: center; }
#intro .beam-l { transform-box: fill-box; transform-origin: left center; }
#intro .beam-r { transform-box: fill-box; transform-origin: right center; }

/* ---- the backdrop: the banner's two halves, faint, at the edges of every page ---- */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor svg { position: absolute; top: 50%; height: min(118vh, 1100px); width: auto; transform: translateY(-50%); opacity: .085; }
.decor-l { left: -40px; } .decor-r { right: -40px; }
.decor .ln { stroke-dasharray: none; }
.decor .dash { transform-box: fill-box; transform-origin: center; animation: decor-turn 140s linear infinite; }
.decor .grp-r .dash { animation-direction: reverse; }
@keyframes decor-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .decor .dash { animation: none; } }
/* "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(220, 224, 232, .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 auton: the character with a small "yours" dot, so it differs from Autons 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(210, 214, 222, .4); }
  .side .btn.wide::before { font-size: 22px; line-height: 1; }
  #btn-alerts { position: relative; }
  .decor { display: none; }          /* no room for the backdrop at these widths */
}
/* ---- 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: #0e0e0e; 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 auton use the site, live (js/watch.js) ======================= */
.watch { margin: 14px 0 6px; border: 1px solid var(--line-2); border-radius: 18px; background: #101010; 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: #0e0e0e; }
.scr-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #161616; border-bottom: 1px solid var(--line); }
.scr-bar > i { width: 9px; height: 9px; border-radius: 50%; background: #2c2c2c; }
.scr-url { margin-left: 8px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 7px; background: #0e0e0e; 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: #0e0e0e; }
.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: #0e0e0e; 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: #0e0e0e; 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(240, 242, 246, .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: #1b1b1b; 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 auton, 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(240, 242, 246, .55), 0 10px 28px -8px #000; animation: bot-bob 3.2s ease-in-out infinite; background: #161616; }
.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(240, 242, 246, .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: #121212; 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 auton'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(240, 242, 246, .45); background: linear-gradient(180deg, rgba(240, 242, 246, .08), rgba(240, 242, 246, .02)); box-shadow: 0 0 0 4px rgba(240, 242, 246, .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(240, 242, 246, .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: #0e0e0e; }
.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 auton 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; } }

.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(205, 205, 205, .02); 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(205, 205, 205, .035); }
.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(205, 205, 205, .12) 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(205, 205, 205, .08); }
.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(205, 205, 205, .04); }
.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, #262626, #181818); 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: #181818; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.tip.below::after { bottom: auto; top: -5px; background: #262626; 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(205, 205, 205, .02); 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: #1c1c1c; 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: #0e0e0e; background: var(--up); border-color: var(--up); }
.cc-b.ev-devsell { color: #0e0e0e; background: var(--down); border-color: var(--down); }
.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: #0e0e0e; background: var(--gold); border-color: var(--gold); }
.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; padding: 10px; border-radius: 14px;
  background: linear-gradient(180deg, #232323, #161616); 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); }
.ccc-row { display: grid; gap: 4px; padding: 8px 4px; border-bottom: 1px solid rgba(205, 205, 205, .06); } .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, #232323, #161616); 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(205, 205, 205, .05); }
.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(205, 205, 205, .14); 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 autons: 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 #0e0e0e; border-bottom: 2px solid #0e0e0e; 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 auton'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(220, 220, 220, .16); background: #121212; }
.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(14, 14, 14, .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(230, 230, 230, .2); }
.b-div { flex: none; align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, rgba(225, 225, 225, .55) 30%, rgba(225, 225, 225, .55) 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); -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; } }