:root {
  /* ---- Ink (chrome) ---- */
  --ink: #0c0d11;
  --ink-raise: #15171d;
  --ink-raise-2: #1c1f27;
  --ink-border: rgba(255, 255, 255, 0.07);
  --ink-border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Paper (the ledger, signature element) ---- */
  --paper: #f6f3ec;
  --paper-dim: #ece7db;
  --paper-line: rgba(13, 14, 18, 0.09);
  --paper-ink: #14151a;

  /* ---- Accents ---- */
  --gold: #e3ad55;
  --gold-hi: #f0c274;
  --gold-dim: #a97e35;
  --coral: #ff6f5e;
  --coral-hi: #ff8b7c;
  --mint: #74d3a3;
  --mint-dim: #2f8f65;

  /* ---- Text on ink ---- */
  --text: #edeff2;
  --text-dim: #9aa0ac;
  --text-dimmer: #5f6570;

  /* ---- Scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(
      ellipse 900px 500px at 12% -10%,
      rgba(227, 173, 85, 0.07) 0%,
      rgba(227, 173, 85, 0.035) 35%,
      rgba(227, 173, 85, 0.012) 55%,
      transparent 80%
    ),
    var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root {
  min-height: 100vh;
}

a {
  color: inherit;
  text-underline-offset: 2px;
}

button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: var(--gold);
  color: #241a08;
}

.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) 96px;
}

@media (max-width: 600px) {
  .shell {
    padding: var(--space-4) var(--space-4) 72px;
  }
}

/* ---------------------------------------------------------------- */
/* Header                                                             */
/* ---------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-5);
  margin: 0 0 var(--space-6) 0;
  background: linear-gradient(var(--ink) 62%, transparent);
  border-bottom: 1px solid var(--ink-border);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
}

.wordmark:hover .mark {
  color: var(--gold, #f2b544);
}

.wordmark:focus-visible {
  outline: 1px solid var(--ink-border-strong);
  outline-offset: 4px;
  border-radius: 4px;
}

.wordmark .mark {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0; /* brand name itself never truncates */
}

.wordmark .tag {
  /* Fixed-height flex box (rather than relying on line-height:1 at a tiny
     font-size) so the divider below has a deterministic, proportionate
     height. Previously the border-left's height came only from this
     element's own ~10.5px text line-box, while its sibling .mark is ~27px
     tall — align-items:center on .wordmark then centered that short
     divider in the middle of the row with no real relation to either
     piece of text's baseline. That offset also shifts slightly with
     font-metric/zoom/DPI rounding, which is why the divider reads as a
     mismatched, "pasted on" sliver instead of a clean rule sitting
     between the two labels. */
  display: flex;
  align-items: center;
  height: 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  border-left: 1px solid var(--ink-border-strong);
  padding-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* without this a flex item won't shrink below its
                   content's width, so overflow:hidden/ellipsis above
                   never actually engages — the text just spills out of
                   the wordmark box instead of truncating, and gets
                   visually covered by the header-right buttons next to
                   it on tighter mobile widths */
  flex-shrink: 1;
}

@media (max-width: 560px) {
  .wordmark .tag {
    display: none;
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chain-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--ink-border-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.chain-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(116, 211, 163, 0.18);
  animation: pulse-dot 2.4s var(--ease) infinite;
}

.chain-badge.wrong .dot {
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(255, 111, 94, 0.18);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}

.btn:hover {
  border-color: var(--gold-dim);
  background: rgba(227, 173, 85, 0.06);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.chain-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23edeff2' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.chain-select option {
  background: var(--ink);
  color: var(--text);
}

.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #241a08;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -8px rgba(227, 173, 85, 0.6);
}

.btn-primary:hover {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
}

.btn-sell {
  background: var(--coral);
  border-color: var(--coral);
  color: #2a0e0a;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 16px -8px rgba(255, 111, 94, 0.6);
}

.btn-sell:hover {
  background: var(--coral-hi);
  border-color: var(--coral-hi);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-dim);
  padding: 8px 4px;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: transparent;
  background: transparent;
}

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

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-heading h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.section-heading .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

.two-col {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.two-col > * {
  min-width: 0;
}

@media (max-width: 780px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- */
/* Panels                                                              */
/* ---------------------------------------------------------------- */

.panel {
  background: linear-gradient(180deg, var(--ink-raise), var(--ink-raise) 96%);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -32px rgba(0, 0, 0, 0.6);
}

.panel h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

.panel .sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 20px;
  line-height: 1.55;
}

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--ink-raise-2);
  border: 1px solid var(--ink-border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 52px;
  line-height: 1.5;
  font-family: var(--font-body);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-dimmer);
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: #20232c;
}

.optional-tag {
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dimmer);
  font-family: var(--font-body);
}

/* "Add social links" collapsible trigger: icon + label + chevron that
   rotates on expand. */
.social-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px 0 var(--space-4);
  margin: -4px 0 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.social-toggle svg {
  color: var(--text-dim);
  flex-shrink: 0;
}

.social-toggle .chevron {
  margin-left: auto;
  transition: transform 0.15s var(--ease);
}

.social-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.social-toggle:hover {
  color: var(--gold);
}

.social-toggle:hover svg {
  color: var(--gold);
}

.social-fields {
  margin-bottom: var(--space-4);
}

.social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (max-width: 480px) {
  .social-row {
    grid-template-columns: 1fr;
  }
}

.form-note {
  font-size: 11.5px;
  color: var(--text-dimmer);
  margin-top: var(--space-3);
  line-height: 1.55;
}

.status-line {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.status-line.error {
  color: var(--coral-hi);
}

.status-line.success {
  color: var(--mint);
}

.status-line a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.status-line a:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------- */
/* Launch cards grid                                                   */
/* ---------------------------------------------------------------- */

.launch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .launch-grid {
    grid-template-columns: 1fr;
  }
}

.launch-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.page-nav,
.page-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--ink-raise);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.page-nav:hover:not(:disabled),
.page-num:hover:not(.active) {
  border-color: var(--gold-dim);
  color: var(--text);
  background: var(--ink-raise-2);
}

.page-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-nums {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.page-num {
  min-width: 34px;
  text-align: center;
  padding: 7px 0;
}

.page-num.active {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}

.page-ellipsis {
  color: var(--text-dimmer);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.launch-card {
  background: var(--ink-raise);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  text-align: left;
  text-decoration: none; /* card is a real <a> now, not a div */
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0; /* let the grid item shrink to its track width instead of
                   growing to fit unbreakable content (e.g. a description
                   with no spaces) */
}

.launch-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.65);
  background: var(--ink-raise-2);
}

.launch-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}

.launch-card .symbol {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.launch-card .name {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.launch-card .pct {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
}

.launch-card .pct.migrated {
  color: var(--mint);
}

.launch-card .pct.stuck {
  color: var(--coral-hi);
}

.age-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dimmer);
  white-space: nowrap;
  flex-shrink: 0;
}

.age-badge svg {
  flex-shrink: 0;
}

.mini-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.mini-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.5s var(--ease);
}

.mini-bar .fill.migrated {
  background: linear-gradient(90deg, var(--mint-dim), var(--mint));
}

.mini-bar .fill.stuck {
  background: linear-gradient(90deg, var(--coral), var(--coral-hi));
}

.launch-card .addr {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dimmer);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0 0 0 -4px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.launch-card .addr:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  color: var(--text-dimmer);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.copy-btn:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.copy-btn.copied {
  color: var(--mint);
}

.card-description {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0;
  min-height: 2.9em; /* reserves space for 2 lines even when the
                        description is short/empty, so every card is the
                        same height regardless of content */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.card-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.card-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  color: var(--text-dimmer);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}

.card-social-icon:hover {
  color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.empty-state {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  border: 1px dashed var(--ink-border-strong);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  line-height: 1.65;
}

/* ---- Skeleton loaders ---- */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
}

.skeleton-card {
  height: 92px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-border);
  background: linear-gradient(100deg, var(--ink-raise) 30%, var(--ink-raise-2) 50%, var(--ink-raise) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

/* ---------------------------------------------------------------- */
/* Curve detail view                                                   */
/* ---------------------------------------------------------------- */

.back-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s var(--ease), gap 0.15s var(--ease);
}

.back-link:hover {
  color: var(--text);
  gap: 9px;
}

.detail-header {
  margin-bottom: var(--space-5);
}

.detail-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.detail-title {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.015em;
}

.detail-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 5px;
}

.detail-sub a {
  color: var(--gold);
  text-decoration: none;
}

.detail-sub a:hover {
  text-decoration: underline;
}

.detail-addr {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dimmer);
  margin-top: 4px;
}

.detail-description {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 14px 0 0;
}

.detail-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.detail-social-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold);
  text-decoration: none;
}

.detail-social-links a:hover {
  text-decoration: underline;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* .detail-left-col used to be its own flex column sitting next to
   #cv-trade-panel (the buy/sell swap panel) inside .detail-grid. That
   worked fine on desktop, where the two-column grid puts the swap panel
   in its own column regardless of where it falls in the DOM — but on
   mobile, once .detail-grid collapses to a single column, layout falls
   back to plain DOM order: chart -> curve stats -> trades/holders ->
   swap. That's why the swap box showed up last on phones even though
   desktop looked fine.
   Fix: unwrap .detail-left-col with `display: contents` so its children
   (chart-panel / curve-panel / trades-panel) become direct grid items
   of .detail-grid, sitting alongside #cv-trade-panel. That lets us place
   every panel explicitly by grid-column/grid-row per breakpoint instead
   of relying on source order, so we can put the swap panel wherever we
   want on mobile without touching the desktop layout at all. */
.detail-left-col {
  display: contents;
}

.chart-panel {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.curve-panel {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.trades-panel {
  grid-column: 1;
  grid-row: 3;
  min-width: 0;
}

#cv-trade-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-width: 0;
}

@media (max-width: 780px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }

  /* Single column on mobile: chart, curve stats, then the buy/sell swap
     panel right away (so people can trade without scrolling past the
     trades/holders table), and trades/holders last. */
  .chart-panel {
    grid-row: 1;
  }

  .curve-panel {
    grid-row: 2;
  }

  #cv-trade-panel {
    grid-column: 1;
    grid-row: 3;
  }

  .trades-panel {
    grid-row: 4;
  }
}

/* The market-cap chart card used to be styled as a light "paper ledger"
   card (like .curve-panel below it), but that reads flat/low-contrast next
   to a real candlestick chart — TradingView-style charts are dark, and
   candle colors (green/red) pop far more against ink than against cream
   paper. Reskinned to the same dark "ink" card treatment as every other
   panel in the app (.panel, .trades-panel, ...) instead of inventing a
   one-off palette. */
.chart-panel {
  position: relative;
  background: linear-gradient(180deg, var(--ink-raise), var(--ink-raise) 96%);
  border: 1px solid var(--ink-border);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 22px 22px 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -32px rgba(0, 0, 0, 0.6);
}

.chart-panel .curve-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  margin-bottom: 8px;
}

.chart-panel .curve-caption span:first-child {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text);
}

/* Interval dropdown — trigger button + a dark flyout list grouped into
   Seconds / Minutes / Hours / Days sections, matching the reference
   time-picker: uppercase section labels, rows that highlight on hover,
   and the active row picked out with a light fill. The trigger now sits
   on the dark chart card itself, so it uses the same light-on-dark
   treatment as the flyout menu below it instead of a separate paper-tuned
   palette. */
.interval-dropdown {
  position: relative;
  display: inline-block;
}

.interval-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ink-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.interval-trigger:hover {
  background: rgba(255, 255, 255, 0.09);
}

.interval-trigger svg {
  width: 9px;
  height: 9px;
  transition: transform 0.15s var(--ease);
}

.interval-dropdown.open .interval-trigger svg {
  transform: rotate(180deg);
}

.interval-menu {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: 168px;
  max-height: 340px;
  overflow-y: auto;
  background: var(--ink-raise);
  border: 1px solid var(--ink-border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
}

.interval-dropdown.open .interval-menu {
  display: block;
}

.interval-group + .interval-group {
  margin-top: 4px;
}

.interval-group-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dimmer);
  padding: 7px 8px 3px;
}

.interval-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}

.interval-option:hover {
  background: var(--ink-raise-2);
}

.interval-option.active {
  background: var(--ink-raise-2);
  color: var(--gold-hi);
  font-weight: 600;
}

/* Market-cap chart header — big figure + change, plus a small ATH
   reference bar so the current cap can be read against its high-water
   mark at a glance, on the dark chart card. */
.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.chart-mcap-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.chart-mcap-value {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.chart-mcap-change {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  margin-top: 3px;
}

.chart-mcap-change.is-up {
  color: var(--mint);
}

.chart-mcap-change.is-down {
  color: var(--coral-hi);
}

.chart-ath-block {
  min-width: 130px;
  text-align: right;
}

.chart-ath-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 5px;
}

.chart-ath-label span {
  color: var(--text);
  font-weight: 700;
}

.chart-ath-track {
  width: 130px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.chart-ath-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-dim), var(--mint));
  transition: width 0.4s var(--ease);
}

.mcap-chart {
  margin-top: 4px;
  height: 280px;
}

.mcap-chart svg {
  display: block;
}

.migration-progress {
  margin-top: var(--space-2);
}

.migration-progress-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(20, 21, 26, 0.6);
  margin-bottom: 6px;
}

.migration-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.migration-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.4s var(--ease);
}

.migration-curve {
  margin-top: 2px;
}

.migration-curve svg {
  display: block;
}

.trades-panel {
  padding: 18px 20px;
}

.trades-panel + .trades-panel {
  margin-top: var(--space-4, 16px);
}

.trades-panel-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trades-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.trades-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.trades-toggle-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.trades-toggle-btn:hover {
  color: var(--text);
}

.trades-toggle-btn.active {
  background: var(--mint);
  color: #0c1f16;
}

.trades-toggle-btn.active:hover {
  color: #0c1f16;
}

.holders-count {
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.holder-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink-raise);
  border: 1px solid var(--ink-border);
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.holder-pct {
  color: var(--text-dim);
}

.trades-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
}

.trades-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.trades-table th {
  position: sticky;
  top: 0;
  background: var(--ink-raise);
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--ink-border);
}

.trades-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--ink-border);
  color: var(--text);
  white-space: nowrap;
}

.trades-table td a {
  color: inherit;
}

.trades-table td a:hover {
  color: var(--gold);
}

.trade-type-buy {
  color: #3ecf8e;
  font-weight: 600;
}

.trade-type-sell {
  color: #ff6f5e;
  font-weight: 600;
}

/* The curve ledger — matched to the site's dark ink chrome (was a
   contrasting cream "paper" card; kept the ruled-ledger texture but in ink
   tones), with tighter vertical padding so the card sits shorter. */
.curve-panel {
  position: relative;
  background:
    repeating-linear-gradient(
      var(--ink-raise) 0px,
      var(--ink-raise) 27px,
      var(--ink-raise-2) 28px
    );
  border: 1px solid var(--ink-border);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 14px 22px 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -32px rgba(0, 0, 0, 0.6);
}

.curve-panel .curve-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.curve-panel .curve-sold-pct {
  color: var(--text-dim);
}

.curve-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--ink-border);
  padding-top: var(--space-3);
}

.curve-stat .label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.curve-stat .value {
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}

.migrated-banner {
  margin-top: var(--space-4);
  background: rgba(47, 143, 101, 0.12);
  border: 1px solid rgba(47, 143, 101, 0.35);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mint);
}

.migrated-banner.pending {
  background: rgba(255, 111, 94, 0.12);
  border-color: rgba(255, 111, 94, 0.35);
  color: var(--coral-hi);
}

.migrated-banner a {
  color: var(--gold-dim);
  font-weight: 600;
  text-decoration: none;
}

.migrated-banner a:hover {
  color: var(--gold-hi);
}

.link-accent {
  color: var(--gold-dim);
  font-weight: 600;
  text-decoration: none;
}

.link-accent:hover {
  color: var(--gold-hi);
}

.lp-fees-panel {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fee-block {
  background: var(--surface-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}

.fee-block-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.fee-input-row {
  display: flex;
  gap: 8px;
}

.fee-input-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
}

.fee-block .hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
}

.fees-table-wrap {
  overflow-x: auto;
}

.fees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fees-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fees-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
}

.fees-table a {
  color: var(--gold-dim);
}

/* Trade panel */
.trade-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-4);
  background: var(--ink-raise-2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--ink-border);
}

.trade-tab {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.trade-tab:hover:not(.active) {
  color: var(--text);
}

.trade-tab.active.buy {
  background: var(--gold);
  color: #241a08;
  font-weight: 600;
}

.trade-tab.active.sell {
  background: var(--coral);
  color: #2a0e0a;
  font-weight: 600;
}

.percent-row {
  display: flex;
  gap: var(--space-2);
  margin: -6px 0 var(--space-4);
}

.percent-btn {
  flex: 1;
  padding: 7px 0;
  border-radius: 999px;
  border: 1px solid var(--ink-border-strong);
  background: var(--ink-raise-2);
  color: var(--coral-hi);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.percent-btn:hover {
  background: rgba(255, 111, 94, 0.14);
  border-color: rgba(255, 111, 94, 0.35);
  color: var(--text);
}

.percent-btn:active {
  background: rgba(255, 111, 94, 0.22);
}

.amount-chip-row {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.amount-chip {
  flex: 1;
  padding: 9px 0;
  border-radius: 999px;
  border: 1px solid var(--ink-border-strong);
  background: var(--ink-raise-2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.amount-chip:hover {
  background: rgba(227, 173, 85, 0.14);
  border-color: rgba(227, 173, 85, 0.35);
  color: var(--text);
}

.amount-chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #241a08;
}

.initial-buy-panel {
  border: 1px solid var(--ink-border-strong);
  border-radius: 14px;
  padding: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
  background: var(--ink-raise);
}

.initial-buy-panel .quote-line {
  margin: var(--space-2) 0 0;
}

.logo-dropzone {
  border: 1.5px dashed var(--ink-border-strong);
  border-radius: 14px;
  background: var(--ink-raise-2);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
  position: relative;
  min-height: 88px;
}

.logo-dropzone:hover,
.logo-dropzone.dragover {
  border-color: var(--gold-dim);
  background: rgba(227, 173, 85, 0.06);
}

.logo-dropzone.has-error {
  border-color: rgba(255, 111, 94, 0.55);
}

.logo-dropzone svg {
  color: var(--text-dim);
}

.logo-dropzone .logo-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.logo-preview-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}

.logo-preview-wrap img {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--ink-border-strong);
}

.logo-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--coral);
  color: #2a0e0a;
  border: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Small badge overlaid on the logo preview while its background IPFS
   upload (kicked off as soon as the image is picked, not on submit — see
   startLogoUpload()) is still in flight, so the person can see it's
   happening without it blocking the rest of the form. */
.logo-upload-badge {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--ink-raise-2);
  border: 1px solid var(--ink-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-spinner {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1.6px solid rgba(227, 173, 85, 0.3);
  border-top-color: var(--gold-dim);
  animation: mini-spin 0.7s linear infinite;
}

@keyframes mini-spin {
  to { transform: rotate(360deg); }
}

.logo-upload-status {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo-hint-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dimmer);
  line-height: 1.6;
}

.logo-hint-list li::before {
  content: "\2022 ";
  color: var(--text-dim);
}

.logo-error-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--coral-hi);
  margin: var(--space-2) 0 0;
}

.card-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--ink-border-strong);
}

.card-avatar-fallback {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-dim), var(--coral));
  color: #1a1206;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.launch-card .top-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--ink-border-strong);
  flex-shrink: 0;
}

.detail-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-dim), var(--coral));
  color: #1a1206;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quote-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  margin: var(--space-3) 0 var(--space-4);
}

.quote-line .value {
  color: var(--text);
}

/* ---------------------------------------------------------------- */
/* Site footer                                                        */
/* ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--ink-border);
  margin-top: var(--space-6);
}

/* Three-column grid (left / center / right) instead of a plain flex row:
   a flex row with space-between + auto-margin centering only lands the
   center item on the true midpoint when the two side items happen to be
   the same width. With grid, the center column is centered against the
   row itself regardless of how wide "copyright" vs. the X icon are. */
.site-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.site-footer-copy {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dimmer);
  white-space: nowrap;
  justify-self: start;
}

.site-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dimmer);
  justify-self: center;
}

.site-footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer-links a:hover {
  color: var(--gold);
  text-decoration: underline;
}

.site-footer-sep {
  color: var(--ink-border-strong);
}

.site-footer-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--ink-border-strong);
  flex-shrink: 0;
  justify-self: end;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.site-footer-x:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 700px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: var(--space-4);
  }

  .site-footer-copy {
    justify-self: center;
    order: 3;
  }

  .site-footer-links {
    order: 1;
  }

  .site-footer-x {
    justify-self: center;
    order: 2;
  }
}