/* THE PIT — visual system copied from fwa.fun's mobile app.
   Near-black canvas, one pink accent, maroon-tinted secondaries, monospace for
   anything that is a number. Mobile-first: the phone layout IS the layout, and
   desktop just centres it in a device-width column the way FWA does.

   REVISION (contrast + trading-floor red/green): --dimmer measured at
   3.4-3.75:1 against bg/panel/panel-2 — under the 4.5:1 AA floor for the
   small print it's used for (finetext, meta, table headers, footers).
   Brightened it to clear 4.5:1+ everywhere it appears. Also added --red as a
   proper "down" signal distinct from the --pink brand/CTA color, so ticker
   red and brand pink stop doing double duty, and leaned the background
   washes toward the red/green of a trading floor rather than flat black. */

:root {
  --bg: #0a0a0b;
  --panel: #121213;
  --panel-2: #17171a;
  --line: #232326;
  --line-2: #2c2c31;
  --text: #f4f4f5;
  --dim: #9a9aa2;
  --dimmer: #86868d;
  --pink: #f5a3b7;
  --pink-ink: #1a0d12;
  --maroon: #3d222b;
  --maroon-line: #56313d;
  --amber: #e0a355;
  --green: #4fd177;
  --red: #ea6470;
  --red-line: #5c2b34;
  --wash-red: rgba(234, 100, 112, .11);
  --wash-green: rgba(79, 209, 119, .13);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --shell: 430px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #000; }
body {
  font-family: var(--sans);
  color: var(--text);
  min-height: 100dvh;
  display: flex; justify-content: center;
  overscroll-behavior-y: none;
}

/* the phone-width column */
/* Trading-floor ambient wash: a whisper of red top-left, green bottom-right.
   Not `background-attachment: fixed` — that's broken on iOS Safari, which
   matters here since this is a mobile-first layout. Both stops fade to
   nothing well before the opposite corner — the dark base stays the
   dominant surface, this is atmosphere, not a background image. */
#shell {
  width: 100%; max-width: var(--shell);
  background:
    radial-gradient(120% 55% at 10% 0%, var(--wash-red), transparent 60%),
    radial-gradient(120% 60% at 90% 100%, var(--wash-green), transparent 60%),
    var(--bg);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
@media (min-width: 460px) {
  #shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ------------------------------- header -------------------------------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px;
  position: sticky; top: 0; z-index: 30;
  background:
    linear-gradient(100deg, var(--wash-red) 0%, transparent 45%, transparent 55%, var(--wash-green) 100%),
    linear-gradient(#0a0a0bF2, #0a0a0bE0);
  backdrop-filter: blur(10px);
}
.brand {
  font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
  color: var(--pink);
  text-shadow: 0 2px 0 #b9758a, 0 0 22px rgba(245,163,183,.35);
  cursor: pointer; user-select: none;
}
.hactions { display: flex; align-items: center; gap: 6px; }
.iconbtn {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--dim); cursor: pointer; border-radius: 10px;
}
.iconbtn:active { background: var(--panel-2); }
.iconbtn svg { width: 21px; height: 21px; }

/* the block ticker strip — a whisper of the same red/green the strip's own
   numbers will eventually carry, so the bar reads as tape before it's read */
.strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--wash-red) 0%, transparent 35%, transparent 65%, var(--wash-green) 100%);
  font-family: var(--mono); font-size: 11.5px; color: var(--dimmer);
}
.strip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
  display: inline-block; margin-right: 8px; vertical-align: 1px;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.strip a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

main { flex: 1; display: flex; flex-direction: column; }

/* ------------------------------ the deck ------------------------------- */
/* A fan of face-down cards that shuffles on a loop. This is the whole hero on
   FWA and it does a lot of work: it says "gacha" before a word is read. */
.deck {
  position: relative; height: 300px; margin: 8px 0 4px;
  display: grid; place-items: center; perspective: 1200px;
}
.deck-card {
  position: absolute; width: 172px; height: 240px; border-radius: 14px;
  /* graph-paper hairlines, tinted red horizontal / green vertical instead of
     flat white — same grid, now reading as a chart before it's a card */
  background:
    linear-gradient(150deg, #17171a, #0e0e10 60%),
    repeating-linear-gradient(0deg, rgba(234,100,112,.045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(79,209,119,.045) 0 1px, transparent 1px 9px);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  box-shadow: 0 18px 40px #000a;
  transition: transform .9s cubic-bezier(.22,.9,.28,1), opacity .5s;
  will-change: transform;
}
.deck-card.hot { border-color: #7a6033; box-shadow: 0 18px 40px #000a, 0 0 0 1px #6d5731 inset; }
.deck-card .q {
  font-size: 128px; font-weight: 900; color: #f2f2f4; line-height: 1;
  font-family: var(--sans); user-select: none;
}

/* ---------------------------- the buy panel ---------------------------- */
.buy { margin: 4px 12px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 13px 13px 11px; }
.qrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qrow .lbl { font-size: 13px; color: var(--dim); }
.qrow .right { display: flex; align-items: center; gap: 9px; }
.qrow .num { font-family: var(--mono); font-size: 16px; }

.qslider { position: relative; background: var(--panel-2); border-radius: 11px; height: 42px; display: flex; align-items: center; padding: 0 16px; margin-bottom: 11px; }
.qslider .track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.qslider .pip { width: 7px; height: 7px; border-radius: 50%; background: #313136; cursor: pointer; transition: background .18s, transform .18s; }
.qslider .pip.on { background: var(--pink); transform: scale(1.25); }
.qslider .pip.filled { background: #6d4c57; }

.cta {
  width: 100%; border: 0; border-radius: 11px; padding: 15px 12px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .02em;
  cursor: pointer; transition: filter .15s, opacity .15s;
}
.cta.primary { background: var(--pink); color: var(--pink-ink); font-weight: 700; box-shadow: 0 8px 26px rgba(245,163,183,.22); }
.cta.working { background: var(--maroon); color: #c98fa1; cursor: progress; }
.cta:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.cta:active:not(:disabled) { filter: brightness(.93); }
.finetext { text-align: center; font-size: 11.5px; color: var(--dimmer); margin-top: 9px; }
.finetext a { color: var(--dim); }

/* ------------------------------ overlays ------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  background: #000000d9; backdrop-filter: blur(2px);
  display: flex; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet {
  width: 100%; max-width: var(--shell);
  background:
    radial-gradient(120% 45% at 15% 0%, var(--wash-red), transparent 55%),
    radial-gradient(120% 50% at 85% 100%, var(--wash-green), transparent 55%),
    var(--bg);
  min-height: 100dvh; padding: 14px 16px 40px; position: relative;
}
.sheet-grab { width: 62px; height: 4px; border-radius: 2px; background: #34343a; margin: 2px auto 16px; }
.closex {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--dim);
  font-size: 16px; cursor: pointer; display: grid; place-items: center;
}

/* menu sheet */
.menu-h { display: flex; align-items: center; gap: 11px; margin: 4px 0 26px; }
.menu-h .logo { width: 40px; height: 40px; border-radius: 9px; background: var(--pink); color: var(--pink-ink); display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.menu-h .t { font-size: 18px; font-weight: 700; }
.menu-item {
  display: block; width: 100%; text-align: left;
  padding: 16px 17px; margin-bottom: 11px;
  background: transparent; border: 1px solid var(--line-2); border-radius: 12px;
  color: var(--text); font-size: 16px; cursor: pointer; font-family: var(--sans);
}
.menu-item.primary { background: var(--pink); color: var(--pink-ink); border-color: var(--pink); font-weight: 600; box-shadow: 0 8px 26px rgba(245,163,183,.2); }
.menu-foot { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 20px; }
.addr-chip { display: inline-block; font-family: var(--mono); font-size: 13px; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 11px; color: var(--dim); }

/* ---------------------------- reveal carousel -------------------------- */
.reveal-wrap { position: relative; display: grid; place-items: center; min-height: 330px; margin-top: 6px; }
.arrow {
  position: absolute; top: 145px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--dim);
  display: grid; place-items: center; cursor: pointer; z-index: 4; font-size: 15px;
}
.arrow.l { left: 0; } .arrow.r { right: 0; }
.arrow:disabled { opacity: .25; cursor: default; }

/* the revealed card: a share certificate, which is the stock-token analogue of
   FWA's generative NFT art */
.card {
  width: 208px; height: 292px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: #0d0d0f;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 50px #000c;
  transform-style: preserve-3d;
}
.card.flip { animation: flipin 900ms cubic-bezier(.2,.85,.25,1) both; }
@keyframes flipin {
  0% { transform: rotateY(88deg) scale(.86); opacity: .2 }
  60% { transform: rotateY(-9deg) scale(1.03); opacity: 1 }
  100% { transform: rotateY(0) scale(1) }
}
.card-face { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; }
.card-face .rings { position: absolute; inset: -18%; opacity: .55; }
.card-face .tick { position: relative; font-weight: 900; font-size: 40px; letter-spacing: -.03em; }
.card-face .co { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--dimmer); letter-spacing: .08em; text-transform: uppercase; }
.card-foot {
  border-top: 1px solid var(--line); background: #0a0a0b;
  padding: 7px 9px 8px;
}
.card-foot .nm { font-size: 11px; margin-bottom: 3px; }
.card-foot .kv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--dimmer); }

/* confetti */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 7px; height: 11px; border-radius: 1px; animation: fall 1.5s ease-out forwards; }
@keyframes fall { 0% { transform: translateY(-40px) rotate(0); opacity: 1 } 100% { transform: translateY(340px) rotate(540deg); opacity: 0 } }

/* the "Purchase Successful" rainbow wordmark, per-letter like FWA */
.success { font-size: 30px; font-weight: 900; letter-spacing: -.02em; margin: 22px 0 6px; line-height: 1.1; }
.success span { display: inline-block; }
.rtitle { font-size: 23px; font-weight: 700; margin: 0 0 5px; }
.raddr { font-family: var(--mono); font-size: 11px; color: var(--dimmer); word-break: break-all; margin-bottom: 16px; }

.kvrow { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kvrow .k { color: var(--dim); }
.kvrow .v { font-family: var(--mono); }

/* the settlement stack */
.act { margin-top: 18px; }
.act .lead { font-size: 14.5px; color: var(--dim); line-height: 1.5; margin: 0 0 11px; }
.act.hero { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 15px; }
.btn {
  width: 100%; padding: 15px; border-radius: 11px; font-size: 15px; cursor: pointer;
  font-family: var(--sans); transition: filter .15s;
}
.btn.pink { background: var(--pink); color: var(--pink-ink); border: 0; font-weight: 600; box-shadow: 0 8px 26px rgba(245,163,183,.2); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.maroon { background: var(--maroon); color: var(--pink); border: 1px solid var(--maroon-line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { filter: brightness(.9); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.field { display: flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 0 14px; margin-bottom: 10px; }
.field input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--text);
  font-family: var(--mono); font-size: 16px; padding: 15px 0; min-width: 0;
}
.field .unit { font-family: var(--mono); font-size: 12px; color: var(--dimmer); padding-left: 10px; }
.field select { flex: 1; background: none; border: 0; outline: 0; color: var(--text); font-size: 16px; padding: 15px 0; font-family: var(--sans); }
.field select option { background: var(--panel); }

.pill { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: var(--dim); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; }

.waiting { text-align: center; padding: 90px 20px; }
.waiting h2 { font-size: 30px; margin: 18px 0 12px; }
.waiting p { color: var(--dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #1c1c20; border: 1px solid var(--line-2); color: var(--text);
  padding: 12px 17px; border-radius: 11px; font-size: 13.5px; z-index: 200;
  max-width: 88vw; box-shadow: 0 14px 40px #000b;
}
.toast.bad { border-color: #6b3340; color: #ffc7d3; }

.empty { text-align: center; color: var(--dimmer); font-size: 14px; padding: 40px 10px; }
.sect-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); margin: 26px 0 12px; }

.list-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px; margin-bottom: 10px; }
.list-item .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.list-item .sym { font-weight: 700; font-size: 15px; }
.list-item .meta { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); }

.verify-row { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; }
.verify-row .mark { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px; flex: none; }
.mark.ok { background: #16301c; color: var(--green); }
.mark.no { background: #351a20; color: #ff9db0; }

/* ---------------------- tier strip + face-up deck ----------------------- */
/* FWA's home is not a pile of "?" cards at rest — that is only the in-flight
   state. At rest the deck IS the pool, face up, with each card's real backing
   and odds on it. The tier chips above filter it and publish the aggregate
   odds of hitting each band. */
.tierstrip {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tierstrip::-webkit-scrollbar { display: none; }
.tchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  background: var(--panel-2); border: 1px solid transparent; border-radius: 999px;
  padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.tchip.on { border-color: var(--line-2); color: var(--text); background: #202024; }
.tchip .d { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tchip .n { color: var(--dimmer); }

/* a live card in the deck — real ticker, real floor, real odds */
.pcard {
  position: absolute; width: 172px; height: 240px; border-radius: 14px;
  border: 1px solid var(--line-2); background: #0d0d0f; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 18px 40px #000a;
  transition: transform .55s cubic-bezier(.22,.9,.28,1), opacity .35s;
  will-change: transform; cursor: pointer;
}
.pcard.crown { border-color: #7a6033; box-shadow: 0 18px 40px #000a, 0 0 24px #6d573155; }
.pcard .crownpip {
  position: absolute; top: -1px; left: 50%; transform: translate(-50%, -55%);
  width: 22px; height: 22px; border-radius: 50%; background: #17130c;
  border: 1px solid #7a6033; display: grid; place-items: center; font-size: 11px; z-index: 3;
}
.pcard .face { flex: 1; position: relative; display: grid; place-items: center; }
.pcard .face .tk { font-weight: 900; font-size: 30px; letter-spacing: -.03em; }
.pcard .rankbadge {
  position: absolute; top: 8px; right: 9px; font-family: var(--mono);
  font-size: 9.5px; color: var(--dimmer);
}
.pcard .tiertag {
  position: absolute; bottom: 30px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
}
.pcard .pfoot { border-top: 1px solid var(--line); background: #0a0a0b; padding: 6px 8px 7px; }
.pcard .pfoot .nm { font-size: 10px; margin-bottom: 2px; }
.pcard .pfoot .kv { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; color: var(--dimmer); }

/* settlement-drift popover, anchored under the gear */
.pop {
  position: absolute; z-index: 40; right: 10px; top: 44px; width: 268px;
  background: radial-gradient(140% 100% at 100% 0%, var(--wash-green), transparent 60%), #131316;
  border: 1px solid var(--line-2); border-radius: 13px;
  padding: 14px; box-shadow: 0 22px 50px #000c;
}
.pop h4 { margin: 0 0 5px; font-size: 14.5px; }
.pop p { margin: 0 0 13px; font-size: 12px; color: var(--dim); line-height: 1.45; }
.pop .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; }
.pop .row b { font-family: var(--mono); }
.pop input[type=range] { width: 100%; accent-color: var(--pink); }
.pop .ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--dimmer); margin-top: 3px; }

/* Explore Pool: grid + list */
.poolhead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.poolhead .kv { font-size: 13px; color: var(--dim); }
.poolhead .kv b { display: block; font-family: var(--mono); font-size: 15px; color: var(--text); margin-top: 2px; }
.segbar { display: flex; gap: 6px; margin: 4px 0 14px; }
.seg {
  flex: 1; text-align: center; padding: 9px 6px; font-size: 12.5px;
  background: var(--panel-2); border: 1px solid transparent; border-radius: 9px;
  color: var(--dim); cursor: pointer;
}
.seg.on { background: #24242a; color: var(--text); border-color: var(--line-2); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gcell { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; position: relative; }
.gcell .art { height: 108px; display: grid; place-items: center; font-weight: 900; font-size: 25px; }
.gcell .gfoot { padding: 7px 9px 9px; border-top: 1px solid var(--line); }
.gcell .gfoot .a { font-size: 11.5px; font-weight: 600; }
.gcell .gfoot .b { font-family: var(--mono); font-size: 9.5px; color: var(--dimmer); margin-top: 2px; display: flex; justify-content: space-between; }

.trow { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.trow .sq { width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 12px; }
.trow .mid { flex: 1; min-width: 0; }
.trow .mid .a { font-size: 14px; }
.trow .mid .b { font-size: 11.5px; color: var(--dimmer); }
.trow .val { font-family: var(--mono); font-size: 13.5px; text-align: right; }
.trow .val small { display: block; color: var(--dimmer); font-size: 10.5px; }

/* stat grid on the listing detail */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.stat .k { font-size: 11.5px; color: var(--dimmer); margin-bottom: 5px; }
.stat .v { font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.stat .v.pos { color: var(--green); }
.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.chip.inpool { border-color: #2c5c37; color: var(--green); }
.chip.rank { border-color: #6d5731; color: var(--amber); }

/* The tier strip scrolls under the Pool link, so the link needs its own
   backdrop and a left fade — otherwise the last chip reads as overlapping it. */
.strip { position: relative; }
.strip #link-pool {
  flex: none; padding: 9px 0 9px 18px; margin-left: -6px;
  background: linear-gradient(90deg, transparent, var(--bg) 18%);
  position: relative; z-index: 2;
}

/* unread badge on the history icon */
.badge {
  position: absolute; top: 4px; right: 3px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 999px; background: var(--pink); color: var(--pink-ink);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; pointer-events: none;
}

/* --------------------------- swap modal -------------------------------- */
.swaprow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--dim); margin: 12px 0 7px; }
.swaprow .bal { font-family: var(--mono); font-size: 12px; color: var(--dimmer); }
.field.focus { border-color: var(--pink); box-shadow: 0 0 0 1px rgba(245,163,183,.18); }
.maxchip {
  background: transparent; border: 1px solid var(--maroon-line); color: var(--pink);
  border-radius: 8px; padding: 5px 11px; font-size: 12px; cursor: pointer; margin-left: 8px;
}
.slipchip {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  border-radius: 999px; padding: 5px 13px; font-family: var(--mono); font-size: 12px; cursor: pointer;
}
.seg.on.pink { background: var(--pink); color: var(--pink-ink); border-color: var(--pink); font-weight: 600; }

/* official company logo, pulled from Robinhood's CDN by contract address and
   served locally. Sits behind the ticker so the card still reads at a glance. */
.colog {
  position: absolute; width: 86px; height: 86px; object-fit: contain;
  top: 34%; left: 50%; transform: translate(-50%, -50%);
  opacity: .92; border-radius: 12px; background: #ffffff08; padding: 6px;
}
.card-face .tick { margin-top: 46px; }
.colog.sm { width: 54px; height: 54px; top: 33%; padding: 4px; border-radius: 10px; }
.pcard .face .tk { margin-top: 40px; }
.colog.xs { position: static; transform: none; width: 30px; height: 30px; padding: 3px; border-radius: 7px; }
.gcell .art { flex-direction: column; gap: 4px; font-size: 17px; }

/* Footer links out of the app menu to the docs surfaces. */
.menu-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px}
.menu-links a{color:var(--dim);text-decoration:none}
.menu-links a:hover{color:var(--text);text-decoration:underline}

/* Buy gate on the $RWA sheet — closed at launch, cash-out is the only way in. */
.seg.locked{opacity:.55}
.gatebox{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  border-radius:11px;padding:14px 16px;margin:0 0 16px;color:var(--dim);font-size:14px;line-height:1.55}
.gatebox b{color:var(--text)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--maroon)}