/* =====================================================================
   StonkFun — glass surface design system
   Palette straight off the brand sheet. Everything is built out of three
   ideas: a dark teal ground, frosted panels that sit above it, and light
   that moves across those panels when something is worth looking at.
   ===================================================================== */

:root{
  /* brand */
  --ground:   #000000;
  --deep:     #0A1013;
  --surface:  #141C20;
  --accent:   #69AAC1;
  --accent-2: #A4C5CF;
  --text:     #F3F8F8;
  --text-2:   #7C8A8F;

  /* derived — panels are lifted off black with neutral light, not tint */
  --glass:      rgba(255, 255, 255, .045);
  --glass-hi:   rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .14);
  --line:       rgba(255, 255, 255, .09);
  --line-hard:  rgba(255, 255, 255, .18);
  --pos:        #58D2A0;
  --neg:        #F0736C;
  --warn:       #E8C36A;

  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 34px;

  --tab-h: 76px;   /* the floating bar, plus the gap under it */
  --top-h: 66px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --shadow:    0 18px 50px -18px rgba(0, 0, 0, 1);
  --shadow-lg: 0 34px 90px -28px rgba(0, 0, 0, 1);
  --glow:      0 0 0 1px rgba(105, 170, 193, .30), 0 12px 44px -12px rgba(105, 170, 193, .42);

  --ease: cubic-bezier(.22, .8, .28, 1);
  --spring: cubic-bezier(.34, 1.4, .48, 1);

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

/* A class that sets display beats the UA stylesheet's [hidden] rule, which
   silently defeats every hidden = true in the app. This wins over both. */
[hidden]{ display: none !important; }

html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/1.5 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

/* The ground is never flat. Two slow teal blooms drift behind everything,
   which is what stops a dark app reading as a black rectangle. */
body::before{
  content: '';
  position: fixed;
  inset: -30vh -20vw;
  z-index: -2;
  background:
    radial-gradient(46vw 40vh at 18% 8%,  rgba(105, 170, 193, .10), transparent 62%),
    radial-gradient(52vw 46vh at 88% 26%, rgba(255, 255, 255, .045), transparent 66%),
    radial-gradient(60vw 50vh at 50% 108%, rgba(105, 170, 193, .07), transparent 68%);
  animation: drift 26s var(--ease) infinite alternate;
  pointer-events: none;
}
body::after{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
@keyframes drift{
  from{ transform: translate3d(0, 0, 0) scale(1); }
  to  { transform: translate3d(2.5%, -3%, 0) scale(1.1); }
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }
input, textarea{ -webkit-user-select: text; user-select: text; }

h1, h2, h3{
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0;
}
h1{ font-size: 32px; line-height: 1.1; }
h2{ font-size: 22px; line-height: 1.2; }
h3{ font-size: 19px; line-height: 1.25; }

::-webkit-scrollbar{ width: 0; height: 0; }
.scroll-x{
  display: flex; gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.scroll-x > *{ flex: 0 0 auto; }

.muted{ color: var(--text-2); }
.pos{ color: var(--pos); }
.neg{ color: var(--neg); }
.mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.nowrap{ white-space: nowrap; }
.trunc{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spacer{ margin-left: auto; }
.center{ text-align: center; }

/* =====================================================================
   Shell
   ===================================================================== */
/* The splash. Bright accent ground, white mark, held for two seconds — it
   swells, then collapses to nothing as the colour fades off. */
#splash{
  position: fixed; inset: 0;
  z-index: 999;
  display: grid; place-items: center;
  background: var(--accent);
  transition: opacity .68s var(--ease), background .68s var(--ease);
}
#splashMark{
  width: 116px; height: 116px;
  fill: #fff;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .28));
  animation: splashIn .95s var(--spring) both;
  transform-origin: 50% 50%;
}
@keyframes splashIn{
  from{ transform: scale(.55); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  to  { transform: scale(1); opacity: 1; }
}
#splash.gone{
  opacity: 0;
  background: var(--ground);
  pointer-events: none;
}
#splash.gone #splashMark{ animation: splashOut .6s var(--ease) forwards; }
@keyframes splashOut{
  30% { transform: scale(1.22); }
  to  { transform: scale(0); opacity: 0; }
}

.topbar{
  position: sticky; top: 0; z-index: 60;
  height: calc(var(--top-h) + var(--safe-t));
  padding: var(--safe-t) 16px 0;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .74) 70%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
/* ---------------- mini profile box ----------------
   Rank, picture, balance — the three numbers worth carrying on every page. */
.mini{
  display: flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 4px 5px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .24s var(--spring);
}
.mini:active{ transform: scale(.95); }
.mini[hidden]{ display: none; }

.mini-rank{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 26px; padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: #04141A;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mini-pfp{
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px var(--glass-line);
  color: var(--text-2);
}
.mini-pfp img{ width: 100%; height: 100%; object-fit: cover; }
.mini-pfp svg{ width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.mini-usd{
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini-create{
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(150deg, #8FC4D6, var(--accent) 46%, #4E8DA4);
  color: #041014;
  font-size: 15px; font-weight: 750; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px -10px rgba(105, 170, 193, .8);
  transition: transform .24s var(--spring);
}
.mini-create svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; }
.mini-create:active{ transform: scale(.95); }
.mini-create[hidden]{ display: none; }

.view{
  min-height: calc(100dvh - var(--tab-h));
  padding: 14px 16px calc(var(--tab-h) + var(--safe-b) + 30px);
  max-width: 780px;
  margin: 0 auto;
  animation: viewIn .34s var(--ease) both;
}
@keyframes viewIn{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}

/* ---------------- tab bar ----------------
   A floating glass oval that stops short of the screen edges, with a single
   highlight that slides between the buttons rather than jumping. */
.tabbar{
  position: fixed; z-index: 70;
  left: 14px; right: 14px;
  bottom: calc(12px + var(--safe-b));
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(34px) saturate(150%);
  -webkit-backdrop-filter: blur(34px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 18px 44px -14px rgba(0, 0, 0, 1);
}

/* The travelling highlight. One slot wide, so translateX(100%) is exactly
   one button along and the index alone places it. */
.tab-pill{
  position: absolute;
  left: 7px; top: 7px; bottom: 7px;
  width: calc((100% - 14px) / 5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transform: translateX(calc(var(--tab-i, 0) * 100%));
  transition: transform .42s var(--spring);
  pointer-events: none;
}
.tab-pill[hidden]{ display: none; }

.tab{
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 50px;
  border-radius: 999px;
  color: #8A9297;                 /* neutral grey, no tint */
  transition: color .28s var(--ease), transform .3s var(--spring);
}
.tab svg{
  width: 26px; height: 26px;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The mark is a solid shape, not a stroked line. */
.tab svg.glyph{ fill: currentColor; stroke: none; width: 25px; height: 25px; }
.tab.on{ color: var(--accent); }
.tab.on svg{ stroke: var(--accent); }
.tab.on svg.glyph{ fill: var(--accent); stroke: none; }
.tab:active{ transform: scale(.88); }

.tab .pfp-tab{
  width: 27px; height: 27px; border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--glass-line);
}
.tab.on .pfp-tab{ box-shadow: 0 0 0 2px var(--accent); }
.tab .dot{
  position: absolute; top: 2px; right: 50%; margin-right: -19px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  background: var(--accent); color: var(--ground);
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}

/* =====================================================================
   Glass surfaces
   ===================================================================== */
.card{
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: hidden;
}
/* A hairline that is brightest at the top left, the way a real edge catches
   light. A plain 1px border reads flat next to this. */
.card::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-flat{ padding: 0; }
.card-hd{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.card-hd h2, .card-hd h3{ flex: 1; min-width: 0; }
.card-hd .act{ display: flex; gap: 8px; align-items: center; }

.stack{ display: flex; flex-direction: column; gap: 14px; }
.row{ display: flex; align-items: center; gap: 10px; }
.grid{ display: grid; gap: 12px; }
.g2{ grid-template-columns: repeat(2, 1fr); }
.g3{ grid-template-columns: repeat(3, 1fr); }

/* A slow band of light crossing the panel. It runs once when something
   lands and on demand after that — never on a loop, which would be noise. */
.shine{ position: relative; overflow: hidden; }
.shine::after{
  content: '';
  position: absolute; top: -120%; left: -60%;
  width: 45%; height: 340%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: rotate(18deg);
  animation: sweep 5.5s var(--ease) 1.2s;
  pointer-events: none;
}
@keyframes sweep{
  0%  { left: -60%; }
  55% { left: 130%; }
  100%{ left: 130%; }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--text);
  font-size: 16px; font-weight: 650; letter-spacing: -.01em;
  overflow: hidden;
  transition: transform .24s var(--spring), background .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-user-select: none; user-select: none;
}
.btn svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:active{ transform: scale(.965); }
.btn:disabled{ opacity: .45; pointer-events: none; }

.btn-primary{
  background: linear-gradient(150deg, #8FC4D6, var(--accent) 46%, #4E8DA4);
  color: #041014;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -12px rgba(105, 170, 193, .8);
}
/* The gloss that makes the pill read like glass rather than paint. */
.btn-primary::before{
  content: '';
  position: absolute; inset: 1px 1px 45%;
  border-radius: 14px 14px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
  pointer-events: none;
}
.btn-primary::after{
  content: '';
  position: absolute; top: -50%; left: -40%;
  width: 34%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: rotate(20deg);
  animation: sweep 6s var(--ease) infinite;
  pointer-events: none;
}
.btn-ghost{ background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn-line{ background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line-hard); }
.btn-buy { background: linear-gradient(150deg, #7BE3B8, #3FBB8B); color: #04140E; font-weight: 750;
           box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px -14px rgba(88, 210, 160, .8); }
.btn-sell{ background: linear-gradient(150deg, #FF9E97, #DC5A52); color: #1A0605; font-weight: 750;
           box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -14px rgba(240, 115, 108, .7); }
.btn-block{ width: 100%; }
.btn-lg{ min-height: 58px; font-size: 17px; border-radius: 18px; }
.btn-sm{ min-height: 42px; padding: 0 15px; font-size: 15px; border-radius: 13px; }

.icon-btn{
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  color: var(--text);
  transition: transform .24s var(--spring), background .2s var(--ease);
}
.icon-btn svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active{ transform: scale(.9); background: rgba(255, 255, 255, .12); }
.icon-btn.on{ color: var(--accent); box-shadow: inset 0 0 0 1px rgba(105, 170, 193, .5); }

/* ---------------- pills and segments ---------------- */
.chips{ display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar{ display: none; }
.chip{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: all .24s var(--ease);
}
.chip img{ width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.chip.on{
  color: #05171C;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px -12px rgba(105, 170, 193, .9);
}
.chip:active{ transform: scale(.95); }

.seg{
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button{
  flex: 1;
  min-height: 42px;
  border-radius: 12px;
  color: var(--text-2);
  font-size: 15px; font-weight: 650;
  transition: all .26s var(--ease);
}
.seg button.on{
  color: var(--text);
  background: linear-gradient(180deg, rgba(105, 170, 193, .28), rgba(105, 170, 193, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* =====================================================================
   Fields
   ===================================================================== */
.field{ display: flex; flex-direction: column; gap: 8px; }
.field > label{ font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: -.01em; }
.input, .textarea, select.input{
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 0;
  border-radius: 15px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: box-shadow .22s var(--ease), background .22s var(--ease);
}
.input::placeholder, .textarea::placeholder{ color: var(--text-2); }
.input:focus, .textarea:focus{
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(105, 170, 193, .6), 0 0 0 4px rgba(105, 170, 193, .1);
}
.textarea{ min-height: 108px; resize: vertical; line-height: 1.5; }
.amount-input{ font-size: 30px; font-weight: 700; letter-spacing: -.03em; min-height: 66px; font-family: 'Inter Tight', sans-serif; }

.search-bar{ position: relative; }
.search-bar svg{
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 21px; height: 21px;
  stroke: var(--text-2); fill: none; stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}
.search-bar .input{ padding-left: 46px; }

/* =====================================================================
   Token rows
   One line each: mark, name, volume, market cap. Short on purpose, so a
   screen holds as many as it can.
   ===================================================================== */
.tk{
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
  overflow: visible;
  transition: transform .3s var(--spring);
  animation: cardIn .42s var(--ease) both;
}
.tk::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .03) 44%, rgba(255, 255, 255, .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.tk:active{ transform: scale(.982); }
@keyframes cardIn{
  from{ opacity: 0; transform: translateY(12px) scale(.985); }
  to  { opacity: 1; transform: none; }
}

/* The mark, with the pair notched onto its bottom-right corner. */
.tk-mark{ position: relative; flex: 0 0 auto; display: block; }
.tk-logo{
  display: block;
  width: 46px; height: 46px;
  border-radius: 15px;
  object-fit: cover;
  background: linear-gradient(150deg, var(--surface), var(--deep));
  box-shadow: 0 0 0 1px var(--glass-line), 0 8px 20px -10px rgba(0, 0, 0, 1);
}
.tk-pair{
  position: absolute; right: -6px; bottom: -6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  /* the ring is the ground colour, so it reads as sitting on top */
  box-shadow: 0 0 0 2.5px #000, 0 0 0 3.5px rgba(255, 255, 255, .16);
}

.tk-id{ flex: 1 1 auto; min-width: 0; display: block; }
.tk-sym{
  display: flex; align-items: center; gap: 6px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px; font-weight: 750; letter-spacing: -.025em;
}
.tk-gift{ display: inline-flex; flex: 0 0 auto; color: var(--text); }
.tk-gift svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.tk-name{ display: block; font-size: 14px; color: var(--text-2); margin-top: 1px; }

/* Volume in the middle, between the name and the cap. */
/* One line, set on the same baseline as the market cap beside it. */
.tk-vol{
  flex: 0 0 auto;
  display: none;
  align-items: baseline;
  gap: 5px;
  padding: 0 4px;
  white-space: nowrap;
}
.tk-vol .k{ font-size: 14px; font-weight: 650; color: var(--text-2); }
.tk-vol .v{
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
/* It is the first thing to go when the row gets tight. */
@media (min-width: 380px){ .tk-vol{ display: flex; } }

.tk-price{ flex: 0 0 auto; text-align: right; display: block; }
.tk-mc{
  display: block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 17px; font-weight: 750; letter-spacing: -.02em;
}
.tk-ch{ display: block; font-size: 14px; font-weight: 650; margin-top: 1px; }

.tag{
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .09);
  color: var(--accent-2);
}
.tag.grn{ background: rgba(88, 210, 160, .16); color: var(--pos); }
.tag.gold{ background: rgba(232, 195, 106, .16); color: var(--warn); }

.pair{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; color: var(--accent-2);
}
.pair img{ width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--surface); }

/* Graduation progress. A bar, not a spinner — it means something. */
.prog{
  position: relative;
  height: 7px;
  margin-top: 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.prog i{
  position: absolute; inset: 0 auto 0 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px rgba(105, 170, 193, .7);
  transition: width .9s var(--ease);
}
.prog.done i{ background: linear-gradient(90deg, #3FBB8B, #7BE3B8); box-shadow: 0 0 16px rgba(88, 210, 160, .7); }

/* =====================================================================
   Hero
   ===================================================================== */
.hero{
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, rgba(105, 170, 193, .18), rgba(255, 255, 255, .03) 55%),
    var(--deep);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .18);
  overflow: hidden;
}
.hero::before{
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, rgba(164, 197, 207, .5), transparent 50%, rgba(105, 170, 193, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero h1{ position: relative; max-width: 15ch; }
.hero .hero-line{
  background: linear-gradient(100deg, var(--text) 20%, var(--accent-2) 50%, var(--text) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gleam 7s linear infinite;
}
@keyframes gleam{ to{ background-position: -220% 0; } }
.hero .btn{ position: relative; margin-top: 20px; }
.hero-art{
  position: absolute; right: -18px; bottom: -26px;
  width: 190px; opacity: .16;
  animation: bob 9s var(--ease) infinite alternate;
  pointer-events: none;
}
@keyframes bob{ from{ transform: translateY(0) rotate(-6deg); } to{ transform: translateY(-16px) rotate(6deg); } }

.stat{
  padding: 14px 15px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.stat .k{ font-size: 14px; color: var(--text-2); font-weight: 600; }
.stat .v{
  font-family: 'Inter Tight', sans-serif;
  font-size: 21px; font-weight: 750; letter-spacing: -.03em;
  margin-top: 4px;
}

/* =====================================================================
   Social
   ===================================================================== */
.pfp{
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(150deg, var(--surface), var(--deep));
  box-shadow: 0 0 0 1px var(--glass-line);
}
.pfp-sm{ width: 36px; height: 36px; }
.pfp-lg{ width: 88px; height: 88px; box-shadow: 0 0 0 3px #000, 0 0 0 4px var(--accent); }

.post{
  display: flex; gap: 13px;
  padding: 17px 16px;
  border-bottom: 1px solid var(--line);
  animation: cardIn .4s var(--ease) both;
}
.post:last-child{ border-bottom: 0; }
.post-main{ flex: 1; min-width: 0; }
.post-hd{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-hd .n{ font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.post-hd .u{ font-size: 15px; color: var(--text-2); }
.post-hd .t{ font-size: 14px; color: var(--text-2); margin-left: auto; }
.post-body{
  margin-top: 6px;
  font-size: 17px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.post-img{
  margin-top: 12px;
  border-radius: var(--r-sm);
  max-height: 440px; width: 100%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.post-subject{
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
}
.post-subject img{ width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }
.post-subject .n{ font-size: 16px; font-weight: 700; }
.post-subject .u{ font-size: 14px; color: var(--text-2); }

.post-acts{ display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.act-btn{
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 12px;
  border-radius: 12px;
  color: var(--text-2);
  font-size: 15px; font-weight: 600;
  transition: all .22s var(--ease);
}
.act-btn svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.act-btn:active{ transform: scale(.92); background: rgba(255, 255, 255, .09); }
.act-btn.on{ color: var(--accent); }
.act-btn.on svg{ fill: var(--accent); stroke: var(--accent); }
.act-btn.tip.on{ color: var(--warn); }

.tip-row{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.tip-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(232, 195, 106, .22), rgba(232, 195, 106, .08));
  box-shadow: inset 0 0 0 1px rgba(232, 195, 106, .3);
  color: var(--warn);
  font-size: 14px; font-weight: 700;
}
.cashtag{ color: var(--accent); font-weight: 700; }

.comment-wrap{ margin-top: 12px; }
.comment{
  display: flex; gap: 11px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.comment .b{ font-size: 16px; line-height: 1.45; word-break: break-word; }
.reply-box{ display: flex; align-items: center; gap: 9px; padding-top: 12px; }

/* composer pinned to the bottom, above the tab bar */
.composer{
  position: fixed; left: 14px; right: 14px;
  bottom: calc(var(--tab-h) + var(--safe-b) + 4px);
  z-index: 65;
  padding: 9px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-line),
              inset 0 1px 0 rgba(255, 255, 255, .2),
              0 16px 40px -14px rgba(0, 0, 0, .9);
}
.composer-row{ display: flex; align-items: flex-end; gap: 9px; max-width: 780px; margin: 0 auto; }
.composer textarea{
  flex: 1;
  min-height: 46px; max-height: 132px;
  padding: 12px 16px;
  border: 0; border-radius: 23px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 16px; line-height: 1.4;
  resize: none; outline: none;
}
.composer textarea:focus{ box-shadow: inset 0 0 0 1px rgba(105, 170, 193, .6); }
.send-btn{
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: #04141A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px -10px rgba(105, 170, 193, .9);
  transition: transform .26s var(--spring), opacity .2s;
}
.send-btn svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.send-btn:active{ transform: scale(.88); }
.send-btn:disabled{ opacity: .32; background: rgba(255, 255, 255, .12); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); }
.composer-thumb{ position: relative; width: 70px; margin: 0 auto 9px; max-width: 780px; }
.composer-thumb img{ width: 70px; height: 70px; border-radius: 13px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.composer-thumb button{
  position: absolute; top: -7px; right: -7px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-hard);
}
.composer-thumb svg{ width: 15px; height: 15px; stroke: var(--text); fill: none; stroke-width: 2.4; stroke-linecap: round; }
body.has-composer .view{ padding-bottom: calc(var(--tab-h) + var(--safe-b) + 100px); }

/* =====================================================================
   Rankings
   ===================================================================== */
.rank-row{
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  animation: cardIn .4s var(--ease) both;
}
.rank-row:last-child{ border-bottom: 0; }
.rank-n{
  width: 38px; flex: 0 0 auto;
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px; font-weight: 750; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.rank-row.top .rank-n{ color: var(--accent); }
.rank-row.gold{
  background: linear-gradient(100deg, rgba(232, 195, 106, .11), transparent 62%);
}
.rank-row.gold .rank-n{ color: var(--warn); }
.rank-id{ flex: 1; min-width: 0; }
.rank-id .n{ font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.rank-id .u{ font-size: 15px; color: var(--text-2); margin-top: 1px; }
.rank-v{
  text-align: right; flex: 0 0 auto;
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px; font-weight: 750; letter-spacing: -.02em;
}
.rank-v small{ display: block; font-size: 14px; font-weight: 600; color: var(--text-2); letter-spacing: 0; }

/* podium */
.podium{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.pod{
  padding: 16px 10px 14px;
  border-radius: var(--r);
  text-align: center;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  animation: podRise .55s var(--spring) both;
}
.pod:nth-child(1){ animation-delay: .1s; }
.pod:nth-child(2){ animation-delay: 0s; }
.pod:nth-child(3){ animation-delay: .2s; }
.pod.first{
  padding-top: 24px;
  background: linear-gradient(170deg, rgba(232, 195, 106, .2), var(--glass) 60%);
  box-shadow: inset 0 0 0 1px rgba(232, 195, 106, .35), 0 18px 50px -18px rgba(232, 195, 106, .35);
}
.pod .pfp{ margin: 0 auto 9px; }
.pod .n{ font-size: 15px; font-weight: 700; }
.pod .v{ font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 750; margin-top: 3px; }
.pod .p{ font-size: 15px; font-weight: 800; color: var(--text-2); margin-bottom: 6px; }
.pod.first .p{ color: var(--warn); }
@keyframes podRise{
  from{ opacity: 0; transform: translateY(24px) scale(.94); }
  to  { opacity: 1; transform: none; }
}

/* =====================================================================
   Profile
   ===================================================================== */
.pf-head{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.pf-body{ padding: 16px; }

/* No banner. Avatar, name and the money block share one line. */
.pf-top{ display: flex; align-items: center; gap: 13px; }
.pf-avatar{
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  transition: transform .24s var(--spring);
}
.pf-avatar:not(:disabled){ cursor: pointer; }
.pf-avatar:not(:disabled):active{ transform: scale(.93); }
.pf-avatar:disabled{ pointer-events: none; }
.pf-top .pfp-lg{ width: 72px; height: 72px; }

.pf-who{ flex: 1; min-width: 0; }
/* Names wrap rather than truncate — a name is not a detail to elide. */
.pf-name-row{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-name{
  font-family: 'Inter Tight', sans-serif;
  font-size: 21px; font-weight: 750; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.pf-handle{ font-size: 15px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }

/* The pencil sits with the name, which is what it edits. */
.pf-edit{
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--accent);
  transition: transform .24s var(--spring), background .2s var(--ease);
}
.pf-edit svg{ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-edit:active{ transform: scale(.86); background: rgba(255, 255, 255, .14); }

.pf-money{ flex: 0 0 auto; text-align: right; padding-bottom: 2px; }
/* Balance and its percentage share a line; the dollar move sits under them. */
.pf-total-row{ display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.pf-total{
  font-family: 'Inter Tight', sans-serif;
  font-size: 22px; font-weight: 750; letter-spacing: -.03em;
  line-height: 1.1;
}
.pf-pct{ font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-delta{
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  margin-top: 4px;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* The rank badge sits with the move it is calculated from. */
.pf-rank{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 7px;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: #04141A;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 800;
}

.pf-bio{ font-size: 16px; line-height: 1.5; margin-top: 12px; }

/* Follower counts on the left, the address on the right, one line. */
/* Counts and address hold one line together, even on a narrow phone. */
.pf-foot{
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  flex-wrap: nowrap;
}
.pf-counts{ display: flex; gap: 14px; flex: 0 1 auto; min-width: 0; }
.pf-counts button{
  display: flex; align-items: baseline; gap: 5px;
  color: inherit;
}
.pf-counts b{ font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 750; }
.pf-counts span{ font-size: 15px; color: var(--text-2); }

.pf-addr{
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 3px 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; color: var(--text-2);
}
.pf-addr-btn{
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--accent);
  transition: transform .24s var(--spring), background .2s var(--ease);
}
.pf-addr-btn svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-addr-btn:active{ transform: scale(.86); background: rgba(255, 255, 255, .1); }

.addr-box{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  word-break: break-all;
}

.hold-row{
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.hold-row:last-child{ border-bottom: 0; }
.hold-row img{ width: 42px; height: 42px; border-radius: 13px; object-fit: cover; background: var(--surface); }

/* =====================================================================
   Modals and sheets
   ===================================================================== */
.scrim{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 8, 10, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade .26s var(--ease);
  display: flex; align-items: flex-end; justify-content: center;
}
@keyframes fade{ from{ opacity: 0; } to{ opacity: 1; } }
.sheet{
  width: 100%; max-width: 560px;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  padding: 8px 20px calc(24px + var(--safe-b));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(180deg, rgba(26, 28, 30, .97), rgba(8, 9, 10, .99));
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
  animation: sheetUp .42s var(--spring);
}
@keyframes sheetUp{ from{ transform: translateY(100%); } to{ transform: none; } }
.sheet.closing{ animation: sheetDown .28s var(--ease) forwards; }
@keyframes sheetDown{ to{ transform: translateY(100%); } }
.grabber{
  width: 44px; height: 5px;
  margin: 4px auto 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .28);
  flex: 0 0 auto;
}
.sheet h2{ margin-bottom: 16px; }
.sheet-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; margin: 0 -20px; padding: 0 20px 4px; }
.sheet-foot{ display: flex; gap: 10px; padding-top: 16px; flex: 0 0 auto; }
.sheet-foot .btn{ flex: 1; }

@media (min-width: 620px){
  .scrim{ align-items: center; }
  .sheet{ border-radius: var(--r-xl); padding-bottom: 24px; animation: sheetPop .38s var(--spring); }
  @keyframes sheetPop{ from{ transform: scale(.92); opacity: 0; } to{ transform: none; opacity: 1; } }
  .sheet.closing{ animation: fadeOut .22s var(--ease) forwards; }
  @keyframes fadeOut{ to{ opacity: 0; transform: scale(.96); } }
}

/* =====================================================================
   Toasts, empties, skeletons
   ===================================================================== */
.toasts{
  position: fixed; left: 0; right: 0;
  top: calc(var(--safe-t) + 12px);
  z-index: 400;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  pointer-events: none;
  padding: 0 16px;
}
.toast{
  max-width: 480px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(22, 22, 24, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-line);
  font-size: 16px; font-weight: 600;
  animation: toastIn .38s var(--spring);
}
.toast.ok { box-shadow: var(--shadow), inset 0 0 0 1px rgba(88, 210, 160, .45); color: var(--pos); }
.toast.err{ box-shadow: var(--shadow), inset 0 0 0 1px rgba(240, 115, 108, .45); color: var(--neg); }
.toast.gone{ animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from{ opacity: 0; transform: translateY(-18px) scale(.94); } to{ opacity: 1; transform: none; } }
@keyframes toastOut{ to{ opacity: 0; transform: translateY(-14px) scale(.96); } }

.empty{
  padding: 44px 22px;
  text-align: center;
  color: var(--text-2);
  font-size: 17px;
}
.empty img{ width: 68px; margin: 0 auto 16px; opacity: .35; }

.skel{
  border-radius: var(--r);
  background: linear-gradient(100deg, rgba(255, 255, 255, .045) 30%, rgba(164, 197, 207, .13) 50%, rgba(255, 255, 255, .045) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer{ to{ background-position: -220% 0; } }
.skel-tk{ height: 70px; }
.skel-row{ height: 68px; border-radius: var(--r-sm); }

.spin{
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .14);
  border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.busy{ position: relative; color: transparent !important; pointer-events: none; }
.busy::after{
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid rgba(4, 16, 20, .3);
  border-top-color: #04141A;
  animation: spin .7s linear infinite;
}
.btn-ghost.busy::after, .btn-line.busy::after, .icon-btn.busy::after{
  border-color: rgba(255, 255, 255, .2); border-top-color: var(--accent);
}

/* =====================================================================
   Trade panel
   ===================================================================== */
.trade-tabs{ display: flex; gap: 9px; margin-bottom: 15px; }
.trade-tabs .btn{ flex: 1; }
.quote-line{
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  font-size: 16px;
  border-top: 1px solid var(--line);
}
.quote-line:first-child{ border-top: 0; }
.quote-line .k{ color: var(--text-2); }
.quote-line .v{ font-weight: 650; }
.quote-out{
  padding: 16px;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, rgba(105, 170, 193, .16), rgba(255, 255, 255, .035));
  box-shadow: inset 0 0 0 1px var(--line);
  margin: 14px 0;
}
.quote-out .k{ font-size: 15px; color: var(--text-2); }
.quote-out .v{
  font-family: 'Inter Tight', sans-serif;
  font-size: 27px; font-weight: 750; letter-spacing: -.03em;
  margin-top: 4px;
  word-break: break-all;
}

/* price chart */
.chartbox{ position: relative; height: 190px; margin: 4px -4px 0; }
.chartbox svg{ width: 100%; height: 100%; overflow: visible; }
.chart-line{
  fill: none; stroke: var(--accent-2); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(105, 170, 193, .55));
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw 1.5s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }

/* =====================================================================
   Misc
   ===================================================================== */
.divider{ height: 1px; background: var(--line); margin: 4px 0; }
.list > *{ animation-delay: calc(var(--i, 0) * 34ms); }

.copy-hit{ animation: hit .4s var(--spring); }
@keyframes hit{ 50%{ transform: scale(1.14); } }

.section-title{
  display: flex; align-items: center; gap: 10px;
  margin: 4px 2px 0;
  font-family: 'Inter Tight', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -.03em;
}
.section-title .spacer + a, .section-title .spacer + button{
  font-size: 15px; font-weight: 650; color: var(--accent);
}

.ticker{
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-run{
  display: flex; gap: 10px; width: max-content;
  animation: roll var(--roll, 30s) linear infinite;
}
@keyframes roll{ to{ transform: translateX(-50%); } }
.tick{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; font-weight: 650;
  white-space: nowrap;
}
.tick img:not(.tick-pfp){ width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}



/* =====================================================================
   Dropdown filters
   ===================================================================== */
.drop{
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 16px; font-weight: 600;
  transition: all .24s var(--ease);
}
.drop > span{ flex: 1; text-align: left; min-width: 0; }
.drop svg{
  width: 20px; height: 20px; flex: 0 0 auto;
  stroke: var(--text-2); fill: none; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.drop:active{ transform: scale(.97); }
/* A filter that is doing something says so, rather than looking idle. */
.drop.set{
  color: var(--ground);
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px -12px rgba(105, 170, 193, .9);
}
.drop.set svg{ stroke: rgba(0, 0, 0, .55); }
.drop-face{ display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.drop-face img{
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 50%; object-fit: cover; background: var(--surface);
}

/* ---------------- option lists ---------------- */
.opts{ display: flex; flex-direction: column; }
.opt{
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 17px; font-weight: 600;
  text-align: left;
  transition: background .18s var(--ease);
}
.opt:last-child{ border-bottom: 0; }
.opt:active{ background: rgba(255, 255, 255, .055); }
.opt > span:first-of-type{ flex: 1; min-width: 0; }
.opt img, .opt-blank{
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 13px; object-fit: cover;
  background: linear-gradient(150deg, var(--surface), var(--deep));
}
.opt-id{ flex: 1; min-width: 0; display: block; }
.opt-id .n{ display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.opt-id .u{ display: block; font-size: 15px; font-weight: 500; color: var(--text-2); margin-top: 1px; }
.opt svg{
  width: 22px; height: 22px; flex: 0 0 auto;
  stroke: var(--accent); fill: none; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.opt.on{ color: var(--accent); }

.cat{ margin-bottom: 18px; }
.cat-hd{
  display: flex; align-items: center; gap: 9px;
  padding: 6px 2px 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
.cat-n{
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: var(--text-2);
  font-size: 14px; font-weight: 650;
}
.cat-all{
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--accent);
  font-size: 15px; font-weight: 650;
}
.cat-all.on{
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--ground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.cat-more{
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: var(--accent);
  font-size: 15px; font-weight: 650;
}

/* =====================================================================
   Docked search bar
   ===================================================================== */
.searchdock{
  position: fixed; left: 14px; right: 14px;
  bottom: calc(var(--tab-h) + var(--safe-b) + 4px);
  z-index: 65;
  padding: 8px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 0 0 1px var(--glass-line),
              inset 0 1px 0 rgba(255, 255, 255, .2),
              0 16px 40px -14px rgba(0, 0, 0, .9);
}
.searchdock .search-bar{ max-width: 780px; margin: 0 auto; }
.searchdock .input{ min-height: 52px; padding-right: 50px; border-radius: 26px; background: rgba(255, 255, 255, .035); }
.search-clear{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.search-clear svg{
  position: static; transform: none;
  width: 18px; height: 18px;
  stroke: var(--text); stroke-width: 2.4;
}
body.has-searchdock .view{ padding-bottom: calc(var(--tab-h) + var(--safe-b) + 104px); }

/* =====================================================================
   Videos
   ===================================================================== */
body.video-mode .topbar{ display: none; }
body.video-mode .view{ padding: 0; max-width: none; min-height: 0; animation: none; }
body.video-mode{ overflow: hidden; }

.vwrap{
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
}

.vtop{
  position: absolute; top: 0; left: 0; right: 0; z-index: 12;
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-t) + 12px) 14px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
}
.vtop > *{ pointer-events: auto; }

.vtabs{ display: flex; gap: 4px; margin: 0 auto; }
.vtabs button{
  position: relative;
  padding: 8px 14px;
  color: rgba(255, 255, 255, .62);
  font-size: 17px; font-weight: 650; letter-spacing: -.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transition: color .22s var(--ease);
}
.vtabs button.on{ color: #fff; }
.vtabs button.on::after{
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 3px; border-radius: 2px;
  background: #fff;
  animation: tabPop .3s var(--spring) both;
}

.vsound, .vpost{
  display: grid; place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: transform .26s var(--spring);
}
.vsound{
  width: 42px; height: 42px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.vsound svg{ width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vsound:active, .vpost:active{ transform: scale(.88); }

/* The post button: a plus in a blue circle, and nothing else. */
.vpost{
  width: 46px; height: 46px;
  background: linear-gradient(150deg, #4FA8F5, #1F6FE0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px -8px rgba(47, 130, 234, .9);
}
.vpost svg{ width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; }

.vfeed{
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.vfeed::-webkit-scrollbar{ display: none; }

.vslide{
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  overflow: hidden;
  background: #000;
}
.vslide video{
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.vgrad{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 22%),
    linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, transparent 46%);
}

.vmsg{
  position: absolute; inset: auto 0 50% 0;
  z-index: 5;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: 17px;
}

/* the heart a double tap throws up */
.vheart{
  position: absolute; inset: 0; margin: auto;
  width: 128px; height: 128px;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
}
.vheart svg{ width: 128px; height: 128px; fill: #fff; stroke: none; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5)); }
.vheart.pop{ animation: heartPop .9s var(--ease) forwards; }
@keyframes heartPop{
  0%  { opacity: 0; transform: scale(.3) rotate(-14deg); }
  22% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  40% { transform: scale(.98) rotate(-3deg); }
  70% { opacity: 1; transform: scale(1.02); }
  100%{ opacity: 0; transform: scale(1.3) translateY(-30px); }
}

.vpaused{
  position: absolute; inset: 0; margin: auto;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  animation: fade .2s var(--ease);
}
.vpaused svg{ width: 40px; height: 40px; fill: rgba(255, 255, 255, .92); margin-left: 5px; }

/* ---------------- the text down the left ---------------- */
.vmeta{
  position: absolute; left: 16px; right: 86px;
  bottom: calc(var(--tab-h) + var(--safe-b) + 14px);
  z-index: 6;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.vwho{
  display: inline-block;
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px; font-weight: 750; letter-spacing: -.02em;
}
.vcap{
  margin-top: 7px;
  font-size: 16px; line-height: 1.42;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcap .cashtag{ color: #9BD2E6; }
.vtoken, .vtipped{
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 11px; margin-right: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-size: 15px; font-weight: 650;
}
.vtoken svg, .vtipped svg{ width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.vtipped{ color: var(--warn); box-shadow: inset 0 0 0 1px rgba(232, 195, 106, .35); }

/* ---------------- the rail down the right ---------------- */
.vrail{
  position: absolute; right: 12px;
  bottom: calc(var(--tab-h) + var(--safe-b) + 14px);
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.vrail-pfp .pfp{
  width: 50px; height: 50px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 6px 20px -6px rgba(0, 0, 0, .8);
}
.vact{
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
  transition: transform .26s var(--spring);
}
.vact svg{
  width: 33px; height: 33px;
  stroke: #fff; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}
.vact b{ font-size: 14px; font-weight: 700; }
.vact:active{ transform: scale(.85); }
.vact.on svg{ fill: #FF4D6D; stroke: #FF4D6D; }
.vact.tip svg{ stroke: var(--warn); }

.vbar{
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--tab-h) + var(--safe-b) - 4px);
  height: 3px;
  background: rgba(255, 255, 255, .14);
  z-index: 7;
}
.vbar i{
  display: block; height: 100%; width: 0;
  background: #fff;
  border-radius: 0 2px 2px 0;
}

.vempty{
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 30px;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: 18px;
}
.vempty img{ width: 76px; opacity: .4; margin-bottom: 10px; }

/* ---------------- upload ---------------- */
.vpick{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  min-height: 132px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1.5px var(--line-hard);
  color: var(--text);
  transition: transform .24s var(--spring);
}
.vpick svg{
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: linear-gradient(150deg, #4FA8F5, #1F6FE0);
  stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round;
  box-shadow: 0 8px 22px -8px rgba(47, 130, 234, .9);
}
.vpick span{ font-size: 17px; font-weight: 650; margin-top: 4px; }
.vpick small{ font-size: 15px; color: var(--text-2); }
.vpick:active{ transform: scale(.98); }
.vpick:disabled{ opacity: .5; pointer-events: none; }

/* ---------------- a profile's clips ---------------- */
.vgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.vtile{
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px var(--line);
}
.vtile img, .vtile video{
  width: 100%; height: 100%;
  object-fit: cover;
}
.vtile-n{
  position: absolute; left: 7px; bottom: 6px;
  display: flex; align-items: center; gap: 4px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
.vtile-n svg{ width: 15px; height: 15px; fill: #fff; stroke: none; }

@media (min-width: 720px){
  .view{ padding-left: 24px; padding-right: 24px; }
  .tabbar{ left: 50%; right: auto; transform: translateX(-50%); width: min(420px, calc(100% - 28px)); }
  .composer, .searchdock{ left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); }
  h1{ font-size: 40px; }
  /* A phone-shaped feed, centred, rather than a video stretched to a desk. */
  .vwrap{ left: 50%; transform: translateX(-50%); width: min(100%, 480px); }
}

/* =====================================================================
   Token podium — the leaders of whatever filter is running
   ===================================================================== */
.tpod{
  display: grid;
  grid-template-columns: 1fr 1.24fr 1fr;
  gap: 9px;
  align-items: end;
}
.tpod-c{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 30px 8px 14px;
  border-radius: var(--r);
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  animation: podRise .5s var(--spring) both;
  transition: transform .3s var(--spring);
}
.tpod-c:nth-child(1){ animation-delay: .08s; }
.tpod-c:nth-child(2){ animation-delay: 0s; }
.tpod-c:nth-child(3){ animation-delay: .16s; }
.tpod-c:active{ transform: scale(.97); }

/* First sits taller and catches the light. */
.tpod-c.first{
  padding-top: 34px; padding-bottom: 18px;
  background: linear-gradient(170deg, rgba(105, 170, 193, .26), var(--glass) 62%);
  box-shadow: inset 0 0 0 1px rgba(105, 170, 193, .42),
              inset 0 1px 0 rgba(255, 255, 255, .26),
              0 20px 52px -18px rgba(105, 170, 193, .5);
}

.tpod-p{
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  min-width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line-hard);
  color: var(--text-2);
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 750; line-height: 24px;
}
.tpod-c.first .tpod-p{
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  color: var(--ground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.tpod-logo{
  width: 46px; height: 46px;
  border-radius: 15px;
  object-fit: cover;
  background: linear-gradient(150deg, var(--surface), var(--deep));
  box-shadow: 0 0 0 1px var(--glass-line), 0 8px 20px -10px rgba(0, 0, 0, .9);
}
.tpod-c.first .tpod-logo{
  width: 58px; height: 58px; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(164, 197, 207, .4), 0 10px 26px -10px rgba(105, 170, 193, .8);
}

.tpod-sym{
  display: block; max-width: 100%;
  margin-top: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 750; letter-spacing: -.025em;
}
.tpod-c.first .tpod-sym{ font-size: 19px; margin-top: 11px; }
.tpod-mc{
  display: block;
  margin-top: 3px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.tpod-c.first .tpod-mc{ font-size: 19px; }
.tpod-ch{ display: block; margin-top: 2px; font-size: 14px; font-weight: 650; }
.tpod-c.first .tpod-ch{ font-size: 15px; }

/* ---------------- trader ticker ---------------- */
.tick-r{
  min-width: 21px; height: 21px;
  border-radius: 999px;
  background: rgba(105, 170, 193, .18);
  color: var(--accent-2);
  font-size: 13px; font-weight: 750; line-height: 21px; text-align: center;
}
.tick-pfp{
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(150deg, var(--surface), var(--deep));
  box-shadow: 0 0 0 1px var(--glass-line);
}

/* =====================================================================
   Trade celebration
   ===================================================================== */
.sheet-won{ position: relative; overflow: hidden; }

.won{
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 6px;
  text-align: center;
}
.won-amount{
  margin-top: 26px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 34px; font-weight: 750; letter-spacing: -.04em;
  line-height: 1.1;
  word-break: break-word;
}
.won-amount span{ color: var(--accent); }
.won-side{
  margin-top: 6px;
  font-size: 17px; font-weight: 600;
  color: var(--text-2);
}

/* ---------------- the coin ----------------
   A chunky cylinder: two round faces and a rim of plates turned to face
   outward. Nothing here is a picture of a coin; it is built from the
   token's own logo. */
.coin-stage{
  perspective: 1000px;
  width: 120px;
  display: flex; flex-direction: column; align-items: center;
}
.coin3d{
  position: relative;
  transform-style: preserve-3d;
  animation: coinSpin 4s linear infinite;
}
@keyframes coinSpin{
  from{ transform: rotateX(-14deg) rotateY(0deg); }
  to  { transform: rotateX(-14deg) rotateY(360deg); }
}

.coin-face{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 34% 28%, #F2F8FA, #C3DAE3 52%, #7FA6B6);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55),
              inset 0 -10px 22px rgba(0, 0, 0, .25);
  backface-visibility: hidden;
}
.coin-face img{ width: 74%; height: 74%; object-fit: cover; border-radius: 50%; }
.coin-sym{
  font-family: 'Inter Tight', sans-serif;
  font-size: 24px; font-weight: 800; color: #0B1A20;
}

.coin-rim{ position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-rim i{
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  transform-origin: 50% 50%;
}

.coin-shadow{
  width: 78px; height: 11px;
  margin-top: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%);
  animation: coinShadow 4s ease-in-out infinite;
}
@keyframes coinShadow{
  0%, 100%{ transform: scaleX(1); opacity: .5; }
  50%     { transform: scaleX(.36); opacity: .26; }
}

/* ---------------- confetti ---------------- */
.confetti{
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.confetti i{
  position: absolute;
  top: -22px;
  animation-name: fall;
  animation-timing-function: cubic-bezier(.3, .6, .5, 1);
  animation-fill-mode: forwards;
}
@keyframes fall{
  from{ transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 1; }
  to  { transform: translate3d(var(--drift, 0), 108vh, 0) rotate(var(--spin, 540deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .coin3d{ animation: none; transform: rotateX(-14deg) rotateY(-24deg); }
  .coin-shadow{ animation: none; }
  .confetti{ display: none; }
}

/* ---------------- profile tabs ----------------
   Icons across a row, each holding its own count. */
.pf-tabs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.pf-tab{
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px;
  border-radius: 14px;
  color: var(--text-2);
  transition: all .26s var(--ease), transform .3s var(--spring);
}
.pf-tab svg{
  width: 23px; height: 23px;
  stroke: currentColor; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf-tab .pf-tab-n{
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.pf-tab:active{ transform: scale(.93); }
.pf-tab.on{
  color: var(--accent);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* =====================================================================
   Home: the ticker row and the filter button
   ===================================================================== */
.tickrow{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.tickrow-ranks{ flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; }
.tickrow-ranks svg{ width: 21px; height: 21px; }
.tickrow .ticker{ flex: 1; min-width: 0; }

.sortrow{ display: flex; align-items: center; gap: 10px; }
.sortrow .seg{ flex: 1; min-width: 0; }

.filter-btn{
  position: relative;
  display: grid; place-items: center;
  width: 50px; height: 50px; flex: 0 0 auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  transition: all .24s var(--ease), transform .3s var(--spring);
}
.filter-btn svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; }
.filter-btn:active{ transform: scale(.92); }
.filter-btn.set{
  color: #04141A;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* A quiet mark that something is filtering, not a blinking light. */
.filter-dot{
  position: absolute; top: 9px; right: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px #000;
}
.filter-btn.set .filter-dot{ background: #04141A; box-shadow: none; }

/* ---------------- signed-out profile ---------------- */
.signin-gate{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  min-height: 58dvh;
}
.signin-gate img{ width: 86px; opacity: .9; }
.signin-gate .btn{ min-width: 220px; }

/* ---------------- SOL in the wallet list ---------------- */
.hold-sol{
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 13px;
  background: linear-gradient(150deg, #9945FF, #14F195);
  color: #08121A;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 800;
}