/* ==========================================================================
   Ape Pad - launch.apeclub.lol

   Its own stylesheet. It rhymes with apeclub.lol on purpose -- same brand red,
   same dark frosted-glass surfaces -- but shares no file with it, so the pad can
   be restyled or redeployed without touching the main site.

   The one deliberate divergence: the pad is a dense, table-shaped application
   rather than a marketing page, so surfaces here are flatter, radii smaller and
   the type scale tighter than on the homepage.
   ========================================================================== */

:root {
  --red: #e50b1c;
  --red-lift: #ff2f3d;
  --red-deep: #a80716;
  --amc: #ffb020;

  --up: #2fd67d;
  --down: #ff3b46;

  --ink: #f5f5f7;
  --ink-2: rgba(235, 235, 245, 0.66);
  --ink-3: rgba(235, 235, 245, 0.42);
  --ink-4: rgba(235, 235, 245, 0.24);

  --bg: #08080a;
  --bg-2: #0d0d11;

  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.16);
  --blur: saturate(180%) blur(24px);

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

  --shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.85);
  --shadow-red: 0 14px 40px -16px rgba(229, 11, 28, 0.5);

  --page: 1180px;
  --font: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; }

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; letter-spacing: -0.025em; font-weight: 700; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); }

.k {
  color: var(--ink-3); font-size: 11px; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sub { color: var(--ink-3); font-size: 12.5px; }

/* A button that reads as a link. For an action offered inside a sentence --
   the wrap step on a WETH-quoted launch -- where a real button would break
   the line and overstate a one-line detour. */
.linkish {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--ink-2); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.linkish:hover { color: var(--ink); }
.linkish:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.up { color: var(--up); }
.down { color: var(--down); }
.amc-tint { color: var(--amc); }

/* ------------------------------------------------------------- background */

.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.42; }
.blob-a {
  width: 60vw; height: 60vw; top: -24vw; right: -16vw;
  background: radial-gradient(circle, rgba(229, 11, 28, 0.5), transparent 68%);
}
.blob-b {
  width: 44vw; height: 44vw; top: 52vh; left: -18vw;
  background: radial-gradient(circle, rgba(255, 176, 32, 0.18), transparent 66%);
}

/* ------------------------------------------------------------ glass + shell */

.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------------- nav */

.nav-wrap { position: sticky; top: 0; z-index: 50; padding: 14px 20px; }

.nav {
  max-width: var(--page); margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  /* Wraps at any width. Without this the row squeezes instead of breaking:
     "How it works" collapses into three stacked words, the brand splits across
     three lines and Connect runs off the edge -- which happens between the
     breakpoints as readily as below them, so it cannot be fixed by adding
     another one. */
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
}

.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  /* The logo is a transparent red glyph, so it needs no tile behind it -- the
     old gradient square existed only to give the emoji something to sit on.
     object-fit: contain keeps it undistorted if the asset is ever regenerated
     at a different aspect ratio. */
  width: 30px; height: 30px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}
.brand-text strong { display: block; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-text em { white-space: nowrap;
  display: block; font-style: normal; font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase;
}

/* The links row is a single flex item, so when the bar wraps it moves as a
   block rather than splitting apart. */
.nav-links { display: flex; gap: 4px; flex-wrap: nowrap; min-width: 0; }
.nav-links a { white-space: nowrap;
  padding: 7px 12px; border-radius: 9px; font-size: 13.5px;
  color: var(--ink-2); font-weight: 550;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--glass-2); color: var(--ink); }
.nav-links a.on { background: var(--glass-2); color: var(--ink); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--stroke-2); background: var(--glass-2);
  font-size: 13.5px; font-weight: 620; cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { background: rgba(255, 255, 255, 0.11); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(140deg, var(--red-lift), var(--red));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-red);
}
.btn-primary:hover { background: linear-gradient(140deg, #ff4552, var(--red-lift)); }

.btn-sell { background: rgba(255, 59, 70, 0.14); border-color: rgba(255, 59, 70, 0.3); }
.btn-buy { background: rgba(47, 214, 125, 0.14); border-color: rgba(47, 214, 125, 0.3); }
.btn-wide { width: 100%; padding: 12px 16px; font-size: 14.5px; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }

/* ----------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.03em;
  border: 1px solid var(--stroke-2); background: var(--glass-2); color: var(--ink-2);
}
.badge-live { color: var(--up); border-color: rgba(47, 214, 125, 0.32); background: rgba(47, 214, 125, 0.1); }
.badge-grad { color: var(--amc); border-color: rgba(255, 176, 32, 0.32); background: rgba(255, 176, 32, 0.1); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot-live { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ------------------------------------------------------------------- hero */

.hero { padding: 40px 0 26px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -0.035em; }
.hero h1 .amc-tint { background: none; }
.hero p { margin-top: 12px; color: var(--ink-2); max-width: 62ch; font-size: 15.5px; }
.hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.stat-strip {
  margin-top: 26px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { padding: 14px 16px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--stroke); }
.stat b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; }

/* ------------------------------------------------------------------ board */

.board-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 14px;
}
.board-head h2 { font-size: 19px; margin-right: auto; }

.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--glass); border: 1px solid var(--stroke); }
.tabs button {
  padding: 6px 12px; border-radius: 8px; border: 0; background: transparent;
  color: var(--ink-3); font-size: 12.5px; font-weight: 620; cursor: pointer;
}
.tabs button.on { background: var(--glass-2); color: var(--ink); }

.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

.card {
  display: block; padding: 14px; border-radius: var(--r);
  background: var(--glass); border: 1px solid var(--stroke);
  transition: transform 0.14s, border-color 0.14s, background 0.14s;
}
.card:hover { transform: translateY(-2px); border-color: var(--stroke-2); background: var(--glass-2); }

.card-top { display: flex; gap: 11px; align-items: flex-start; }
.card-img {
  width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: none;
  background: var(--bg-2); border: 1px solid var(--stroke);
}
.card-id { min-width: 0; flex: 1; }
.card-id strong { display: block; font-size: 14.5px; letter-spacing: -0.015em; }
.card-id .ticker { color: var(--red-lift); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; }
.card-desc {
  margin-top: 10px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-foot {
  margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 12px;
}
/* "1.1x from open" broke across two lines the moment anything crowded it,
   which is what made the row look accidental. Neither label is long enough to
   need wrapping; the market cap gives way first if a card is ever narrower. */
.card > .card-foot .sub { white-space: nowrap; }

/* Dollars first, AMC underneath. The two never fitted on one line beside the
   multiple, and dropping either would lose something: AMC is the unit the pool
   is actually denominated in, dollars are the unit a launch gets sized in. */
.card-mcap {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; line-height: 1.3; text-align: right; min-width: 0;
}
.card-mcap b {
  font-weight: 620; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.card-mcap i {
  font-style: normal; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* The lottery tier, on its own row between the bar and the numbers. */
.card-tier { margin-top: 10px; display: flex; }

/* progress */
.bar { margin-top: 10px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--amc));
  transition: width 0.4s ease;
}
.bar-full > i { background: linear-gradient(90deg, var(--amc), var(--up)); }

/* ------------------------------------------------------------- token page */

.token-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 336px; align-items: start; }
@media (max-width: 900px) { .token-grid { grid-template-columns: 1fr; } }

.panel { padding: 18px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--stroke); }
.panel + .panel { margin-top: 14px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h3 { font-size: 15px; margin-right: auto; }

.token-hero { display: flex; gap: 15px; align-items: flex-start; }
.token-hero img {
  width: 68px; height: 68px; border-radius: 15px; object-fit: cover; flex: none;
  background: var(--bg-2); border: 1px solid var(--stroke);
}
.token-hero h1 { font-size: 25px; }
.token-hero .ticker { color: var(--red-lift); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }

.links { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.links a {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--stroke); background: var(--glass-2); color: var(--ink-2);
}
.links a:hover { color: var(--ink); border-color: var(--stroke-2); }

.kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; font-size: 13px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12.5px; }

/* trade widget */
.side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.side-toggle button {
  padding: 9px; border-radius: 10px; border: 1px solid var(--stroke);
  background: var(--glass); color: var(--ink-3); font-weight: 650; font-size: 13.5px; cursor: pointer;
}
.side-toggle button.on.buy { background: rgba(47, 214, 125, 0.14); border-color: rgba(47, 214, 125, 0.35); color: var(--up); }
.side-toggle button.on.sell { background: rgba(255, 59, 70, 0.14); border-color: rgba(255, 59, 70, 0.35); color: var(--down); }

.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 6px; }
.field .hint { color: var(--ink-3); font-size: 11.5px; margin-top: 5px; }

/* Over the on-chain limit. Shown while typing, because the metadata is
   emitted in the creation event and cannot be edited afterwards -- a URL that
   is too long has to be caught before the transaction, not after. */
.hint .over { color: var(--down); font-weight: 650; }
.field .err { color: var(--down); font-size: 11.5px; margin-top: 5px; }

.input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--stroke);
  color: var(--ink); font-size: 14px; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.input:focus { border-color: rgba(229, 11, 28, 0.55); background: rgba(0, 0, 0, 0.4); }
.input::placeholder { color: var(--ink-4); }
textarea.input { resize: vertical; min-height: 82px; line-height: 1.55; }
.input-suffix { position: relative; }
.input-suffix .suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 12.5px; font-weight: 650; pointer-events: none;
}
.input-suffix .input { padding-right: 54px; }

.chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chips button {
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--stroke); background: var(--glass); color: var(--ink-2); cursor: pointer;
}
.chips button:hover { background: var(--glass-2); color: var(--ink); }

.quote-box {
  margin: 12px 0; padding: 11px 13px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.24); border: 1px solid var(--stroke);
  font-size: 12.5px;
}
.quote-row { display: flex; justify-content: space-between; gap: 12px; }
.quote-row + .quote-row { margin-top: 6px; }
.quote-row span:first-child { color: var(--ink-3); }
.quote-row span:last-child { font-family: var(--mono); }
.quote-row.total { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--stroke); font-weight: 650; }

/* trade tape */
.tape { max-height: 320px; overflow-y: auto; margin: -4px -6px; }
.tape table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tape th {
  position: sticky; top: 0; z-index: 1; text-align: left; padding: 6px;
  background: rgba(13, 13, 17, 0.94); color: var(--ink-3);
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
.tape td { padding: 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 12px; }
.tape td:last-child, .tape th:last-child { text-align: right; }

/* ------------------------------------------------------------------ forms */

.form-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }

.preview-card { position: sticky; top: 90px; }

/* ------------------------------------------------------------------ notes */

.note {
  padding: 14px 16px; border-radius: var(--r);
  background: rgba(255, 176, 32, 0.08); border: 1px solid rgba(255, 176, 32, 0.26);
  color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.note strong { color: var(--amc); }
.note code {
  background: rgba(0, 0, 0, 0.34); padding: 1px 5px; border-radius: 5px;
  font-size: 12px; color: var(--ink);
}
.note-err { background: rgba(255, 59, 70, 0.08); border-color: rgba(255, 59, 70, 0.28); }
.note-err strong { color: var(--down); }

.empty { padding: 52px 20px; text-align: center; color: var(--ink-3); }
.empty h3 { color: var(--ink-2); font-size: 16px; margin-bottom: 8px; }

.skeleton {
  border-radius: var(--r); background: var(--glass);
  border: 1px solid var(--stroke); height: 148px;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }

/* ------------------------------------------------------------------ toast */

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; max-width: 360px; }
.toast {
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(18, 18, 23, 0.96); border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow); font-size: 13px; line-height: 1.5;
  animation: rise 0.22s ease;
}
.toast.ok { border-color: rgba(47, 214, 125, 0.4); }
.toast.bad { border-color: rgba(255, 59, 70, 0.4); }
.toast a { color: var(--red-lift); text-decoration: underline; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

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

.foot {
  margin: 56px 0 30px; padding-top: 22px;
  border-top: 1px solid var(--stroke);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  color: var(--ink-3); font-size: 12.5px;
}
.foot .spacer { margin-left: auto; }

.addr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
/* An address you can actually take away with you. Monospace so the visible
   half is readable, and the icon only carries meaning on hover -- the address
   itself is the affordance, not the glyph. */
.copy {
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--ink);
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
  font: inherit;
  font-family: var(--mono);
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.copy:hover { background: var(--glass-2); }
.copy:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 1px; }
.copy .copy-icon { color: var(--ink-3); flex: 0 0 auto; transition: color 0.12s ease; }
.copy:hover .copy-icon { color: var(--ink); }

/* Confirmation has to be visible without moving anything: the label swaps in
   place and the row must not reflow, or the panel jumps under the cursor. */
.copy .copy-text { display: inline-block; min-width: 11ch; }
.copy.copied { color: var(--up); }
.copy.copied .copy-icon { color: var(--up); }

.hide { display: none !important; }

/* ---------------------------------------------------------- image upload */

.upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.btn-upload {
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.btn-upload:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The upload's running commentary — resizing, uploading, the size it landed
   at, or why it failed. Shares the muted colour of a hint until it errors. */
.upload-row .sub {
  min-width: 0;
  font-size: 12.5px;
}

.upload-row .sub.err {
  color: var(--down, #ff6b6b);
}

/* ------------------------------------------------------------ claiming fees */

.claim-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One row per currency, because the hook holds the balances per currency and
   each one is its own transaction. */
.claim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.claim-what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.claim-what strong {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.claim-row .btn { white-space: nowrap; }

@media (max-width: 520px) {
  .claim-row { flex-direction: column; align-items: stretch; }
  .claim-row .btn { width: 100%; }
}

/* ------------------------------------------------------- verified + chart */

/* Gold, and only gold here — nothing else on the pad uses it, so the badge
   cannot be confused with a status the chain reports about itself. */
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f5c542;
  background: rgba(245, 197, 66, 0.12);
  border: 1px solid rgba(245, 197, 66, 0.35);
}

.badge-verified svg { flex: none; }

/* The embed is a fixed-aspect box so the panel does not jump as it loads. */
.chart-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 320px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.chart-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .chart-frame { aspect-ratio: 4 / 5; min-height: 380px; }
}

/* ==========================================================================
   Mobile

   The pad shipped with four media queries, two of which only collapsed a grid.
   Everything else was laid out for a desktop and merely squeezed on a phone:
   the nav ran brand + four links + Connect on one row until they touched, the
   trade tape overflowed its panel, and long addresses pushed the stat rows
   wider than the screen.

   Breakpoints are chosen where a specific layout actually breaks rather than
   at device names -- 900 is where the token page cannot hold two columns, 760
   is where the nav stops fitting on one line, 560 is a phone held upright.
   ========================================================================== */

@media (max-width: 900px) {
  /* The chart, tape and trade box stop sitting beside each other. */
  .token-grid { grid-template-columns: minmax(0, 1fr); }

  /* The trade box is why someone opened the page -- it should not be below
     the chart, the stats and the whole tape.

     Scoped to the token page: the create form uses the same grid, and there
     the last child is the live preview, which belongs under the form it is
     previewing rather than above it. */
  .token-detail > div:last-child { order: -1; }
}

@media (max-width: 1000px) {
  /* Brand and Connect on the first row, links on their own beneath. Measured
     rather than guessed: brand (~150px) + four links (~330px) + Connect
     (~90px) + gaps needs roughly 620px of bar, and the bar is the viewport
     less 24px of page padding -- so it stops fitting comfortably well before
     a tablet, not at a phone width. */
  .nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .nav-wrap { padding: 10px 12px; }

  .nav { gap: 10px; padding: 10px 12px; }

  .hero { padding: 26px 0 20px; }
  .hero p { font-size: 14.5px; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }

  .panel { padding: 15px; }
  .board-head { margin: 20px 0 12px; }
}

@media (max-width: 560px) {
  /* One card per row. The auto-fill minimum was 268px, which fits a 360px
     screen but leaves a card pressed against both edges. */
  .grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 12px 13px; }
  .stat b { font-size: 17px; }

  /* The tabs row is wider than a phone once it says "Biggest movers" and
     "Highest FDV", so it scrolls with the board head rather than forcing the
     whole page sideways. */
  .board-head { gap: 8px; }
  .board-head h2 { font-size: 17px; }
  .tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex: none; }

  /* The token header: a 25px title beside a 64px image and a badge does not
     fit, so the image goes above the text. */
  .token-hero { flex-direction: column; gap: 12px; }
  .token-hero h1 { font-size: 21px; }

  /* A monospace address in a right-aligned column is the thing that pushed
     these rows past the viewport. Let the value wrap under its label. */
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dt { color: var(--ink-3); margin-top: 8px; }
  .kv dd { text-align: left; word-break: break-all; }
  .kv dt:first-child { margin-top: 0; }

  /* Tables do not reflow. Scroll it inside its own panel rather than letting
     it widen the page. */
  .tape { overflow-x: auto; margin: -4px 0; }
  .tape table { min-width: 420px; }

  .card { padding: 12px; }
  .card-desc { font-size: 12.5px; }

  .brand-text em { display: none; }
  .brand-text strong { font-size: 13.5px; }

  .foot { margin: 40px 0 24px; gap: 8px; font-size: 12px; }
  .foot .spacer { margin-left: 0; width: 100%; height: 0; }

  .hero-actions { gap: 8px; }
}

/* Below this the layout is not "small", it is a specific phone in portrait. */
@media (max-width: 380px) {
  .wrap { padding: 0 11px; }
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .nav-links a { padding: 6px 9px; font-size: 12.5px; }
}

/* A tap target below about 40px is a miss on a phone, whatever the design
   says. Applied by pointer type rather than width so it also covers a tablet. */
@media (pointer: coarse) {
  .btn, .tabs button, .nav-links a { min-height: 38px; display: inline-flex; align-items: center; }
  .btn { justify-content: center; }
}

/* A launch's text is whatever its creator typed, and a 200-character URL with
   no spaces in it has no wrap opportunity at all -- left alone it widens its
   container and takes the page with it. Applied everywhere that renders
   untrusted text rather than only where it has bitten so far. */
.card-desc,
.token-hero p,
.panel p.sub,
.links a,
.kv dd,
.foot {
  overflow-wrap: anywhere;
}

/* Cards and panels must never be the reason the page scrolls sideways. */
.card, .panel, .stat { min-width: 0; }
.grid, .token-grid, .stat-strip { min-width: 0; }

/* ---------------------------------------------------------------- lottery */

/* The toggle is a commitment a creator cannot undo, so it is given room and a
   border rather than being a checkbox lost among the text fields. */
.switch {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--glass);
  cursor: pointer;
}

.switch:hover { border-color: var(--stroke-2); }
.switch input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--red); }
.switch-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.switch-body strong { font-size: 13.5px; }
.switch-body .sub { font-size: 12px; line-height: 1.55; }

/* Gold, and the one place gold is not verification -- so it leans on the
   lit dot and the raised edge to read as a tier marker rather than a tick.
   It never sits beside .badge-verified: that one lives in .badge-stack at the
   top of the card, this one on its own row under the bar. */
.badge-lottery {
  color: #ffce7a;
  background:
    linear-gradient(180deg, rgba(255, 176, 32, 0.20), rgba(255, 176, 32, 0.09));
  border: 1px solid rgba(255, 176, 32, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 140, 0.22),
    0 2px 10px rgba(255, 176, 32, 0.10);
  padding: 4px 10px;
  letter-spacing: 0.02em;
  /* The percentage is the point of the badge; keep it from shifting width as
     the tier changes. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.badge-lottery .dot {
  width: 5px; height: 5px; flex: none;
  background: #ffb020;
  box-shadow: 0 0 6px rgba(255, 176, 32, 0.9);
}

.lottery-pot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 176, 32, 0.06);
  border: 1px solid rgba(255, 176, 32, 0.18);
}

.lottery-pot .k { color: var(--ink-3); font-size: 11.5px; }
.lottery-pot b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.lottery-pot .sub { font-size: 12px; }
.lottery-clock { text-align: right; }
.lottery-clock b { color: var(--amc, #ffb020); }

@media (max-width: 560px) {
  .lottery-clock { text-align: left; }
}

/* The balance strip above the trade input. Both assets, always: the chips
   spend one and gas is paid in the other, so a trade can fail for want of
   something the box never showed you. */
.bal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.bal-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.bal-strip .sub { font-size: 11.5px; }

/* Rows are now a read-out, with one button underneath for all of them. */
.claim-row-static { background: transparent; }

/* Launch style: two options side by side rather than one checkbox.

   The old UI was a single "give the fees away" toggle, which framed the
   lottery as an opt-out from a default. It is not -- the two tiers charge
   different taxes (2% against 5%) and send the money to different places, and
   a creator picking one is choosing between two launch styles rather than
   ticking a box. Showing them together is the only way the trade is legible
   before it is made, and it cannot be changed afterwards. */
.mode-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mode {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--glass);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.mode:hover { border-color: var(--stroke-2); }
.mode.on { border-color: var(--red); background: color-mix(in srgb, var(--red) 7%, transparent); }
.mode input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--red); }
.mode-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mode-body strong { font-size: 13.5px; }
.mode-body .sub { font-size: 12px; line-height: 1.55; }
.mode-body .sub b { color: var(--fg); font-weight: 650; }

/* Stacked on a phone: two columns of dense text side by side is unreadable at
   that width, and this is the one choice on the form that has to be read. */
@media (max-width: 760px) {
  .mode-pick { grid-template-columns: 1fr; }
}

/* The two fee tiers, side by side on the explainer page. Same reasoning as
   .mode-pick: they are alternatives, and a reader comparing them should not
   have to hold one in their head while scrolling to the other. */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.tier {
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--glass);
}

.tier > strong { display: block; font-size: 13.5px; margin-bottom: 8px; }
.tier .kv { margin: 0 0 10px; }
.tier .sub { font-size: 12px; line-height: 1.6; margin: 0; }

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

/* Badges stacked rather than in a row: the accolade is subordinate to the
   check above it, and side by side would read as two equal claims. Right
   aligned so the stack stays flush with the card edge whatever the widths. */
.badge-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex: none;
}

/* Blue, and deliberately not gold. Gold is reserved for verification — a
   second gold badge would read as a second endorsement, where this is only a
   fact about the order tokens launched in. */
.badge-first {
  color: #5aa9ff;
  background: rgba(90, 169, 255, 0.12);
  border-color: rgba(90, 169, 255, 0.35);
}

/* Opt-out controls: a ticked box that hides a field until you untick it.
   Styled as a row rather than a card -- it is one decision inside a form, not
   a section of its own, and giving it a border would make it compete with the
   launch-style picker directly above. */
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  cursor: pointer;
  flex: none;
}

.check span { line-height: 1.4; }

.check input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}