/* ---------------------------------------------------------------------------
   stonkpad.css — the whole visual system, in one file.

   Dark only, on purpose. This is a trading surface: the numbers are the
   content, and a light ground makes red and green fight the page for
   attention. What changes here is the language, not the theme.

   The accent is electric cyan. Gold was out before it was considered: BNB is
   gold, so every launchpad on this chain is gold, and a gold memecoin site here
   is invisible. Lime was the first answer and also wrong — it is what LATCH
   already uses on this same chain, and two of our own launchpads should not
   look like one product.

   Cyan is the ticker tape: it belongs to terminals and printed prices, it is
   the only cool hue in the whole portfolio, and it is unmistakable against the
   gold of everything else on BNB. It sits nearer the up-green than gold did,
   which is why the rule below is absolute — cyan never touches a number and
   green never touches chrome.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;

  /* Ground */
  --bg: 0 0 0;
  --bg2: 8 9 10;
  --panel: 14 16 17;
  --panel2: 22 24 26;
  --edge: 29 32 35;
  --edge2: 43 48 52;

  /* Type */
  --ink: 236 239 238;
  --muted: 139 146 152;

  /* Brand */
  --accent: 34 211 238;
  --accent-ink: 0 20 26;

  /* Direction. Only ever numbers, never chrome. */
  --up: 22 199 132;
  --down: 246 70 93;

  --font-display: 'Sora', 'Noto Sans SC', system-ui, sans-serif;
  --font-sans: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;

  --shell: 1720px;
  --header-h: 57px;
}

/* Chinese needs a touch more line height than Latin at the same size, and the
   display face has no CJK coverage, so Noto carries it in every stack above. */
html[lang='zh'] body { line-height: 1.6; }
html[lang='zh'] .font-display { letter-spacing: 0; }

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

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--bg));
  /* A single cold wash at the top, so the header has something to sit on. */
  background-image: radial-gradient(900px 420px at 50% -12%, rgb(var(--accent) / 0.055), transparent);
  background-repeat: no-repeat;
  color: rgb(var(--ink));
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }

/* ---------------------------------------------------------------------------
   Type helpers
   --------------------------------------------------------------------------- */

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: rgb(var(--muted)); }
.ink { color: rgb(var(--ink)); }
.accent { color: rgb(var(--accent)); }
.up { color: rgb(var(--up)); }
.down { color: rgb(var(--down)); }

.label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--muted));
}
html[lang='zh'] .label { letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------------- */

.card {
  position: relative;
  background: rgb(var(--panel));
  border: 1px solid rgb(var(--edge));
  border-radius: var(--r-lg);
  padding: 0.75rem;
}

/* The signature: a hairline of cyan along the top edge of the primary card,
   like the leader tape on a ticker roll. Used once per screen, never twice. */
.card-tape::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgb(var(--accent) / 0.15) 12%,
    rgb(var(--accent)) 50%,
    rgb(var(--accent) / 0.15) 88%,
    transparent 100%
  );
}

.card-lift {
  border-color: color-mix(in srgb, rgb(var(--edge)) 55%, rgb(var(--accent)));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 3px 6px -2px rgb(0 0 0 / 0.55),
    0 14px 28px -12px rgb(0 0 0 / 0.8),
    0 30px 64px -24px rgb(0 0 0 / 0.9),
    0 18px 48px -20px rgb(var(--accent) / 0.3);
}

.card-glow { box-shadow: 0 0 26px -12px rgb(var(--accent) / 0.45); }

.inset {
  background: rgb(var(--bg2) / 0.85);
  border: 1px solid rgb(255 255 255 / 0.05);
  border-radius: var(--r);
}

/* ---------------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------------- */

.field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 14px;
  color: rgb(var(--ink));
  background: rgb(var(--bg2));
  border: 1px solid rgb(var(--edge));
  border-radius: var(--r);
  outline: none;
  transition: border-color 0.15s;
}
.field::placeholder { color: rgb(var(--muted) / 0.75); }
.field:focus { border-color: rgb(var(--accent) / 0.6); }
textarea.field { resize: none; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  transition: background-color 0.15s, filter 0.15s, transform 80ms, border-color 0.15s;
}
.btn:not(:disabled):hover { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-ghost { border-color: rgb(var(--edge)); color: rgb(var(--muted)); }
.btn-ghost:hover { color: rgb(var(--ink)); border-color: rgb(var(--edge2)); }

.btn-primary { background: rgb(var(--accent)); color: rgb(var(--accent-ink)); }

/* The one raised element on the page. Everything else is flat, so the thing
   that opens a market is unmistakably the thing that opens a market. */
.btn-key {
  color: rgb(var(--accent-ink));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, rgb(var(--accent)) 76%, white) 0%,
    rgb(var(--accent)) 46%,
    color-mix(in srgb, rgb(var(--accent)) 84%, black) 100%
  );
  border-color: color-mix(in srgb, rgb(var(--accent)) 66%, black);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    0 3px 0 color-mix(in srgb, rgb(var(--accent)) 42%, black),
    0 6px 16px rgb(var(--accent) / 0.28);
}
.btn-key:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42),
    0 1px 0 color-mix(in srgb, rgb(var(--accent)) 42%, black),
    0 3px 9px rgb(var(--accent) / 0.2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgb(var(--accent) / 0.15);
  color: rgb(var(--accent));
}
.pill-solid { background: rgb(var(--accent)); color: rgb(var(--accent-ink)); text-transform: none; letter-spacing: 0; }

.tabs { display: flex; gap: 4px; padding: 4px; }
.tab {
  flex: none;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--muted));
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.tab:hover { color: rgb(var(--ink)); }
.tab[aria-selected='true'] { background: rgb(var(--panel2)); color: rgb(var(--ink)); }

.chip {
  min-width: 44px;
  padding: 5px 8px;
  border: 1px solid rgb(var(--edge));
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.chip:hover { color: rgb(var(--ink)); }
.chip[aria-pressed='true'] {
  border-color: rgb(var(--accent));
  background: rgb(var(--accent) / 0.1);
  color: rgb(var(--ink));
}

.toggle {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(var(--edge2));
  cursor: pointer;
  transition: background-color 0.15s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgb(var(--bg));
  transition: left 0.15s;
}
.toggle[aria-pressed='true'] { background: rgb(var(--accent)); }
.toggle[aria-pressed='true']::after { left: 19px; }

/* ---------------------------------------------------------------------------
   The graduation meter.

   Segmented rather than smooth: a launch either has the stock in the pool or
   it does not, and twenty discrete blocks read as a count rather than a
   promise. It also survives being 3px wide on a phone.
   --------------------------------------------------------------------------- */

.meter {
  --fill: 0;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgb(var(--edge2)) 0 calc(5% - 2px), transparent calc(5% - 2px) 5%);
}
.meter > i {
  display: block;
  height: 100%;
  width: calc(var(--fill) * 1%);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgb(var(--accent)) 0 calc(5% - 2px), transparent calc(5% - 2px) 5%);
  background-size: calc(10000% / max(var(--fill), 1)) 100%;
  box-shadow: 0 0 10px rgb(var(--accent) / 0.55);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgb(var(--edge));
  background: rgb(var(--bg) / 0.85);
  backdrop-filter: blur(12px);
}
.site-header .shell {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.wordmark svg { display: block; }

.nav { display: none; flex: 1; align-items: center; gap: 2px; }
.nav a {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--muted));
  transition: color 0.15s;
}
.nav a:hover { color: rgb(var(--ink)); }
.nav a[aria-current='page'] { color: rgb(var(--ink)); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* The language switch. Two fixed-width halves so the control does not resize
   when the label inside it changes script. */
.lang {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  border: 1px solid rgb(var(--edge));
  border-radius: var(--r-sm);
  overflow: hidden;
}
.lang button {
  width: 36px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: rgb(var(--muted));
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.lang button:hover { color: rgb(var(--ink)); }
.lang button[aria-pressed='true'] { background: rgb(var(--panel2)); color: rgb(var(--accent)); }

main { flex: 1; display: flex; flex-direction: column; width: 100%; overflow-x: clip; }
main > .shell { flex: 1; display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 88px; }

.site-footer {
  display: none;
  border-top: 1px solid rgb(var(--edge));
  background: rgb(var(--bg) / 0.8);
  font-size: 11px;
  color: rgb(var(--muted));
}
.site-footer .shell { display: flex; align-items: center; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.site-footer a:hover { color: rgb(var(--ink)); }

/* Mobile tab bar, five across, matching the desktop nav order. */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 58px;
  border-top: 1px solid rgb(var(--edge));
  background: rgb(var(--bg) / 0.9);
  backdrop-filter: blur(12px);
}
.tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: rgb(var(--muted));
}
.tabbar a[aria-current='page'] { color: rgb(var(--accent)); }
.tabbar svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   Home
   --------------------------------------------------------------------------- */

.home-grid { display: grid; gap: 16px; }
.home-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Below the three-column breakpoint the create box comes first. The stock rails
   are context; the box is the product, and nobody should have to scroll past
   twenty tickers on a phone to reach the thing they came to use. The rails then
   get their own bounded scroll instead of running the length of the page. */
@media (max-width: 1279px) {
  .home-main { order: -1; }
  .rail .rail-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
}
.rail { display: flex; flex-direction: column; gap: 8px; }
.rail-scroll { display: flex; flex-direction: column; gap: 8px; }

.quote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
.quote-row:hover { border-color: rgb(var(--edge2)); }
.quote-row .avatar { width: 32px; height: 32px; }
.quote-row .body { flex: 1; min-width: 0; }
.quote-row .name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.quote-row .name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-row .sym { font-family: var(--font-mono); font-size: 11px; color: rgb(var(--muted)); }
.quote-row .num { flex-shrink: 0; text-align: right; }
.quote-row .px { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.quote-row .chg { font-family: var(--font-mono); font-size: 10px; }

.avatar {
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgb(var(--edge2));
  background: rgb(var(--bg2));
  object-fit: cover;
  overflow: hidden;
}

.hero { display: flex; flex-direction: column; gap: 8px; }
.hero .eyebrow {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--muted));
}
.hero h1 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pair-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid rgb(255 255 255 / 0.05);
  background: rgb(var(--bg2) / 0.85);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s;
}
.pair-btn:hover { border-color: rgb(var(--edge2)); }

/* ---------------------------------------------------------------------------
   Token cards
   --------------------------------------------------------------------------- */

.token-grid { display: grid; gap: 8px; }

.token-card { display: block; overflow: hidden; transition: border-color 0.15s; }
.token-card:hover { border-color: rgb(var(--edge2)); }
.token-card .head { display: flex; align-items: flex-start; gap: 12px; }
.token-card .title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.token-card .title h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.token-card .ticker { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: rgb(var(--muted)); }

.pair-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
}
.pair-chip img { width: 18px; height: 18px; }
.pair-chip .slash { color: rgb(var(--edge2)); }

.stat-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { padding: 6px 8px; }
.stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--muted)); }
.stat .v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

.spark { height: 40px; width: 100%; display: block; }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.data { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
table.data th {
  padding: 6px 4px;
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--muted));
}
table.data td { padding: 7px 4px; border-top: 1px solid rgb(var(--edge)); font-family: var(--font-mono); }
table.data .num { text-align: right; }

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 10px; }
.pager button {
  padding: 4px 10px;
  border: 1px solid rgb(var(--edge));
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-display);
  font-size: 12px;
  color: rgb(var(--muted));
  cursor: pointer;
}
.pager button:hover:not(:disabled) { color: rgb(var(--ink)); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .at { padding: 0 8px; font-family: var(--font-mono); font-size: 11px; color: rgb(var(--muted)); }

/* ---------------------------------------------------------------------------
   States
   --------------------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: rgb(var(--muted));
}

.skeleton {
  background: linear-gradient(90deg, rgb(var(--panel2)) 25%, rgb(var(--edge)) 50%, rgb(var(--panel2)) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.rise { animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgb(var(--accent) / 0.28);
  background: rgb(var(--accent) / 0.07);
  border-radius: var(--r);
  font-size: 12px;
  color: rgb(var(--ink));
}

/* ---------------------------------------------------------------------------
   Docs
   --------------------------------------------------------------------------- */

.prose h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.prose h2 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.prose p { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: rgb(var(--muted)); }
.prose section + section { margin-top: 12px; }
.prose code { font-family: var(--font-mono); font-size: 12px; color: rgb(var(--ink)); }
.prose dl { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.prose dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--muted)); }
.prose dd { margin: 2px 0 0; font-family: var(--font-mono); font-size: 12px; word-break: break-all; }

/* ---------------------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .site-footer { display: block; }
  .tabbar { display: none; }
  main > .shell { padding-bottom: 56px; }
  .hero h1 { font-size: 32px; }
  .token-grid { grid-template-columns: repeat(2, 1fr); }
  .prose dl { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .nav { display: flex; }
}

@media (min-width: 1180px) {
  .token-grid { grid-template-columns: repeat(3, 1fr); }
  .prose dl { grid-template-columns: repeat(4, 1fr); }
  .token-page { display: grid; grid-template-columns: 7fr 3fr; gap: 12px; align-items: start; }
  .token-page .rail-right { position: sticky; top: calc(var(--header-h) + 12px); }
}

@media (min-width: 1280px) {
  /* The reference layout: two stock rails flanking the create box. The rails
     are absolutely positioned inside a fixed-height column so they scroll
     independently and the page height stays put as prices tick. */
  .home-grid { grid-template-columns: 25fr 50fr 25fr; }
  .rail { height: 100%; }
  .rail-frame { position: relative; flex: 1; min-height: 0; }
  .rail-scroll { position: absolute; inset: 0; overflow: hidden; }
}

/* The launch page: form on the left, the rules of the thing on the right. */
@media (min-width: 1024px) {
  .launch-grid { grid-template-columns: 1fr 320px; align-items: start; }
}

/* Four stats across on the token page once there is room for them. */
@media (min-width: 640px) {
  .stat-4 { grid-template-columns: repeat(4, 1fr) !important; }
}