/* 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;
  /* Revision 2 (G: "make the background red and green more"): revision 1 set
     these at .11/.13, which on a #0a0a0b base is below the perceptual floor —
     measurably present, visually absent. Roughly tripled so the wash actually
     reads as red and green at arm's length, while the dark base still carries
     the page. */
  --wash-red: rgba(234, 100, 112, .30);
  --wash-green: rgba(79, 209, 119, .34);
  /* Stronger still for the two full-bleed surfaces (page shell, deck backdrop)
     where the gradient has room to fall off gradually. */
  --wash-red-deep: rgba(234, 100, 112, .42);
  --wash-green-deep: rgba(79, 209, 119, .46);
  --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(125% 60% at 8% -4%, var(--wash-red-deep), transparent 62%),
    radial-gradient(125% 65% at 92% 104%, var(--wash-green-deep), transparent 62%),
    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 } }
/* Pinned control at the end of a horizontal scroller. It must never be squeezed
   out of the row (flex:none) and the chips must never appear to run into it —
   hence the fade backdrop, which lets a chip pass under it at any scroll offset
   instead of hard-clipping against its edge. */
.strip a {
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
  flex: none; position: relative; z-index: 1;
  padding: 9px 0 9px 14px;
}

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);
  /* A flex item defaults to min-width:auto, which refuses to shrink below its
     content — so this scroller overran its row and the last tier chip collided
     with the Pool link instead of scrolling under it. overflow-x is only honored
     once the item is allowed to be narrower than its contents. `flex: 1 1 0`
     rather than min-width alone: an auto basis still measured against content
     and left a 6px overhang, a zero basis takes exactly the room that is left. */
  flex: 1 1 0;
  min-width: 0;
  /* Fade the chips out before they reach the Pool link. A horizontal scroller
     butted against a fixed control always collides at some scroll offset —
     padding cannot fix it, because the chips move. The fade both prevents the
     collision at every offset and signals that the row scrolls. */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent 100%);
          mask-repeat: no-repeat;
          mask-size: 100% 100%;
}
.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. Revision 1 gave the link a solid
   --bg backdrop to hide the collision, but --bg is flat black and the strip
   behind it is washed red-to-green — so the backdrop read as a black box cut
   out of the tape. The scroller now fades itself out before this point (see
   .tierstrip's mask), which solves the collision without painting anything, so
   the link stays transparent and the wash runs unbroken across the row. */
.strip { position: relative; }
.strip #link-pool {
  flex: none; padding: 9px 0 9px 16px;
  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)}