/* Pumped.
   Palette borrows pump.fun's surfaces so a Pumped coin feels like it lives where
   it trades. Everything else deliberately does not: mono micro-labels instead of
   headings, hairline rules instead of card walls, green as data rather than as
   decoration. See docs/DESIGN.md. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --bg:          #0b0b0e;
  --bg-2:        #131316;
  --bg-3:        #1b1b1f;
  --bg-4:        #242429;

  --line:        #1a1a1f;
  --line-2:      #232327;
  --line-3:      #303036;

  --txt:         #e4e4e7;
  --txt-2:       #d4d4d8;
  --txt-3:       #a1a1aa;
  --txt-4:       #71717a;
  --txt-5:       #4a4a52;
  --txt-hero:    #fafafa;

  --accent:      #86efac;
  --accent-line: #22c55e;
  --accent-deep: #052e16;
  --sprout-400:  #82e28d;
  --sprout-500:  #5ddf6c;

  --ok:   #4ade80;
  --warn: #eab308;
  --err:  #f87171;

  --r-xs: 4px;
  --r-sm: 6px;
  --r:    8px;
  --r-lg: 14px;

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --ease-2: cubic-bezier(.34, 1.56, .44, 1);
  --t:      .5s  var(--ease);
  --t-fast: .26s var(--ease);

  --shell: 1220px;
  --bar-h: 56px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 400 14.5px/1.55 Geist, system-ui, -apple-system, sans-serif;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono, .num {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; font-weight: 600; color: var(--txt-hero); }
h1 { font-size: 27px; letter-spacing: -.045em; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }

.shell { width: min(var(--shell), calc(100vw - 40px)); margin: 0 auto; }
.dim  { color: var(--txt-4); }
.mid  { color: var(--txt-3); }
.spacer { flex: 1; }

/* ------------------------------------------------- the signature: micro-label
   Mono, uppercase, wide tracking. This is what stops the page reading as a
   generic dark memecoin site. Used instead of headings almost everywhere. */

.ml {
  font: 500 10px/1 'Geist Mono', monospace;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--txt-5);
}

/* a labelled hairline, which replaces most card borders */
.rule {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 15px;
}
.rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.rule .ml { flex: 0 0 auto; }

/* ---------------------------------------------------------------- chrome */

.bar {
  position: sticky; top: 0; z-index: 60; height: var(--bar-h);
  display: flex; align-items: center;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  background: rgba(11, 11, 14, .78);
  border-bottom: 1px solid var(--line);
}
.bar .shell { display: flex; align-items: center; gap: 22px; }

.wordmark {
  font: 600 15.5px Geist, sans-serif; letter-spacing: -.05em;
  color: var(--txt-hero); display: inline-flex; align-items: center; gap: 7px;
}
.wordmark .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(134, 239, 172, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(134, 239, 172, 0); }
  100% { box-shadow: 0 0 0 0   rgba(134, 239, 172, 0); }
}

.nav { display: flex; gap: 1px; }
.nav a {
  padding: 6px 10px; border-radius: var(--r-xs);
  font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-5); transition: color var(--t-fast), background var(--t-fast);
}
.nav a:hover { color: var(--txt-3); }
.nav a.on { color: var(--accent); }

/* --------------------------------------------------------------- buttons */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-sm);
  font: 600 13px/1 Geist, sans-serif; letter-spacing: -.012em;
  border: 1px solid var(--line-3); background: var(--bg-3); color: var(--txt);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform .18s var(--ease), color var(--t-fast);
}
.btn:hover  { background: var(--bg-4); border-color: #3a3a42; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.btn-key { background: var(--accent); border-color: var(--accent); color: var(--accent-deep); font-weight: 650; }
.btn-key:hover { background: var(--sprout-400); border-color: var(--sprout-400);
                 box-shadow: 0 8px 26px -10px rgba(134, 239, 172, .5); }

.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--txt-3); }
.btn-ghost:hover { background: var(--bg-2); color: var(--txt); border-color: var(--line-3); }

.btn-sm { padding: 6px 11px; font-size: 12px; }

.ripple {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: currentColor; opacity: .24; pointer-events: none;
  animation: ripple .62s var(--ease) forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }

/* ----------------------------------------------------------------- bits */

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: var(--r-xs);
  font: 500 10px/1.6 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  background: var(--bg-3); color: var(--txt-4); border: 1px solid var(--line-2);
}
.tag-accent { background: rgba(134, 239, 172, .09); color: var(--accent); border-color: rgba(134, 239, 172, .2); }
.tag-warn   { background: rgba(234, 179, 8, .09);  color: var(--warn);   border-color: rgba(234, 179, 8, .2); }

.pane.on { animation: panein .46s var(--ease); }
@keyframes panein { from { opacity: 0; transform: translateY(14px); } }

::selection { background: rgba(134, 239, 172, .25); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #26262c; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #33333a; }

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

/* ---------------------------------------------------- cross-highlighting
   Shared by the home demo and the launch allocator. Hover a segment and its
   readout row lights up, hover a row and its segment does, everything else
   recedes. Opacity and filter only, so hovering never costs a layout. */

.seg.dimmed { filter: brightness(.62) saturate(.75); }
.seg.lit    { filter: brightness(1.14); }

.cq.lit, .lg.lit { background: var(--bg-3); }
.lg.lit { border-color: var(--line-3); }
.cq.lit .cq-name, .lg.lit .lg-name { color: var(--txt-hero); }

.seg-tip {
  position: absolute; left: 0; bottom: 9px; z-index: 8;
  padding: 4px 9px; border-radius: var(--r-xs);
  background: rgba(8, 8, 10, .93); border: 1px solid var(--line-3);
  font: 500 11px 'Geist Mono', monospace; letter-spacing: -.01em;
  color: var(--txt-hero); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .16s var(--ease);
  backdrop-filter: blur(6px);
}
.seg-tip.on { opacity: 1; }

/* ------------------------------------------------------------ hover polish */

.st { transition: background var(--t-fast), transform .22s var(--ease); }
.st:hover { transform: translateY(-2px); }
.st:hover b { color: var(--accent); }

.fnode { transition: border-color var(--t-fast), transform .22s var(--ease); }
.fnode:hover { border-color: var(--line-3); transform: translateY(-2px); }

.empty { transition: border-color var(--t-fast); }
.empty:hover { border-color: var(--line-3); }

.dots i { cursor: pointer; }
.dots i:hover { background: var(--txt-4); }
.dots i.on:hover { background: var(--accent); }

.sh { transition: color var(--t-fast); }
.sh:hover .sh-addr { color: var(--txt-3); }

.wordmark { transition: opacity var(--t-fast); }
.wordmark:hover { opacity: .8; }