/* Splits app pages (/board/, /coin/, /launch/): the template's header and footer, our insides.
   Black, split orange as the only accent, warm white type. Archivo wide for headings, Plex Mono for every number.
   Square corners, hairlines, no shadows. */
.sp-app { --ink: #0a0a0a; --or: #ff7a1a; --paper: #f4f1ec; --panel: #120f0c; --well: #17130f; --line: rgba(244, 241, 236, 0.12); --line-2: rgba(244, 241, 236, 0.22);
  --soft: rgba(244, 241, 236, 0.72); --faint: rgba(244, 241, 236, 0.5); --up: #3fd98a; --down: #ff4f4f;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; --sans: "Archivo", system-ui, sans-serif;
  color: var(--paper); font: 400 15px/1.5 var(--sans); background: var(--ink); min-height: 100vh; }
.sp-app :where(button, input, textarea) { font: inherit; color: inherit; }
.sp-app a { color: inherit; }
.sp-app [hidden] { display: none !important; }
body:has(.sp-app)::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 84px; background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid var(--line); z-index: 19; pointer-events: none; }
@media (max-width: 767px) { body:has(.sp-app)::before { height: 64px; } }
body:has(.sp-app) header[x-data="header"] .header-nav a:not(.sp-launch) { color: var(--paper) !important; }
body:has(.sp-app) header .link-logo { color: var(--paper) !important; }

.ap-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 34px; box-sizing: border-box; }
.ap-kicker { margin: 0 0 16px; font: 500 13px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-kicker a { color: var(--or); text-decoration: none; }
.ap-dot { width: 8px; height: 8px; background: var(--or); display: inline-block; animation: ap-blink 1.6s steps(2) infinite; }
@keyframes ap-blink { 50% { opacity: 0.2; } }
.ap-label { font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.ap-h { margin: 0; font: 900 clamp(44px, 7vw, 108px)/0.92 var(--sans); font-stretch: 118%; letter-spacing: -0.035em; }
.ap-slash { display: inline-block; background: rgba(244, 241, 236, 0.16); color: var(--paper); padding: 0 0.06em; margin-right: 0.08em; font-stretch: 100%; }
.ap-sub { margin: 18px 0 0; max-width: 40em; font-size: 17px; line-height: 1.5; color: var(--soft); }
.ap-sub a { color: var(--or); }
.ap-wait { color: var(--faint); font: 500 14px/1.5 var(--mono); padding: 18px 0; list-style: none; }
.ap-empty { color: var(--soft); padding: 22px 0; list-style: none; font-size: 15px; }
.ap-empty a { color: var(--or); }
.ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; background: var(--or); color: var(--ink) !important; border: 0; cursor: pointer; font: 800 16px/1 var(--sans); font-stretch: 110%; letter-spacing: -0.005em; text-decoration: none; transition: background 0.18s, transform 0.18s; }
.ap-btn:hover { background: var(--paper); }
.ap-btn:active { transform: translateY(1px); }
.ap-btn:disabled { opacity: 0.6; cursor: progress; }
.ap-btn--full { width: 100%; }
.ap-link { color: var(--paper); font: 600 15px/1 var(--sans); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 0.3em; }
.ap-more { display: block; width: 100%; margin-top: 10px; padding: 12px; background: none; border: 1px solid var(--line-2); color: var(--paper); cursor: pointer; font: 500 13px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ap-more:hover { border-color: var(--or); color: var(--or); }
.ap-more--inline { width: auto; display: inline-block; padding: 9px 12px; }
.ap-mono-btn { background: none; border: 1px solid var(--line-2); padding: 5px 9px; cursor: pointer; font: 500 13px/1 var(--mono); color: var(--paper); }

/* ---- top band */
.ap-top { padding: 132px 0 34px; border-bottom: 1px solid var(--line); }
.ap-top .ap-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.ap-stats { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; min-width: 420px; }
.ap-stats div { background: var(--ink); padding: 14px 16px; }
.ap-stats dt { font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.ap-stats dd { margin: 8px 0 0; font: 500 28px/1.1 var(--mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; min-height: 31px; }
.ap-stats dd small { font-size: 15px; color: var(--or); letter-spacing: 0; }

/* ---- the LED board: a framed exchange board, its own block (not a strip under the header) */
.ap-boardled { padding-top: 26px; }
.led-frame { border: 1px solid var(--line-2); background: #070605; padding: 0 0 12px; }
.led-frame__bar { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font: 500 12px/1.2 var(--mono); letter-spacing: 0.16em; color: var(--or); }
.led-frame__bar span:last-child { color: var(--soft); letter-spacing: 0.06em; }
.led-panel { display: block; width: 100%; height: 72px; }
.led-strip { display: block; width: 100%; height: 56px; border-top: 1px solid #1a1410; }
.led-rule { margin: 10px 0 0; font: 500 13px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.led-mini { border: 1px solid var(--line-2); background: #070605; margin-bottom: 18px; }
.led-panel--mini { height: 86px; }

/* ---- filters */
.ap-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 28px; padding-bottom: 6px; }
.ap-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; background: none; border: 1px solid var(--line-2); cursor: pointer; font: 500 14px/1 var(--mono); color: var(--paper); transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ap-chip:hover { border-color: var(--or); }
.ap-chip.is-on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ap-chip img { border-radius: 50%; }
.ap-find { margin-left: auto; }
.ap-find input { width: 300px; height: 38px; padding: 0 12px; background: var(--ink); border: 1px solid var(--line-2); font: 500 14px/1 var(--mono); outline: none; }
.ap-find input:focus { border-color: var(--or); }

/* ---- blocks */
.ap-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 34px; padding-top: 22px; }
.ap-block { padding-top: 22px; padding-bottom: 8px; }
.ap-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.ap-block__head h3 { margin: 0; font: 850 26px/1.1 var(--sans); font-stretch: 112%; letter-spacing: -0.02em; }
.ap-block__head h3 span { font: 500 14px/1 var(--mono); color: var(--or); vertical-align: 0.35em; margin-right: 8px; letter-spacing: 0; }
.ap-block__head p { margin: 0; color: var(--soft); font-size: 14px; max-width: 34em; }

.noimg { display: inline-block; width: 36px; height: 36px; background: var(--well); border: 1px solid var(--line); flex: none; }
.sb { display: inline-block; padding: 3px 5px; border: 1px solid var(--line-2); font: 600 12px/1 var(--mono); color: var(--faint); font-style: normal; letter-spacing: -0.02em; }
.sb.on { background: var(--or); border-color: var(--or); color: var(--ink); }
.sb.big { font-size: 15px; padding: 6px 8px; }

/* feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-row { display: grid; grid-template-columns: 66px minmax(0, 1.3fr) auto minmax(0, 1.2fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); animation: ap-in 0.4s ease both; }
@keyframes ap-in { from { opacity: 0; transform: translateY(4px); } }
.fr-time { font: 500 13px/1.2 var(--mono); color: var(--soft); }
.fr-coin, .lt-coin { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.fr-coin img, .lt-coin img { width: 36px; height: 36px; object-fit: cover; flex: none; background: var(--well); }
.fr-coin span, .lt-coin span { min-width: 0; display: flex; flex-direction: column; }
.fr-coin b, .lt-coin b { font: 750 16px/1.15 var(--sans); font-stretch: 106%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-coin small, .lt-coin small { font: 400 13px/1.3 var(--sans); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-coin:hover b, .lt-row:hover b, .deck-row:hover b { color: var(--or); }
.fr-meta { font: 400 13px/1.35 var(--mono); color: var(--soft); }
.fr-tx { font: 500 13px/1 var(--mono); color: var(--or); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* leaderboard */
.lt-row { display: grid; grid-template-columns: 30px minmax(0, 1.5fr) auto 92px 76px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; animation: ap-in 0.4s ease both; }
.lt-head { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 12px 0 10px; animation: none; }
.lt-rank { font: 500 14px/1 var(--mono); color: var(--faint); }
.lt-badges { display: flex; gap: 4px; }
.lt-x { font: 600 17px/1 var(--mono); text-align: right; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lt-x.is-split { color: var(--or); }
.lt-x.is-under { color: var(--down); }
.lt-mc { font: 500 14px/1 var(--mono); color: var(--soft); text-align: right; }
.lt-head span:nth-child(4), .lt-head span:nth-child(5) { text-align: right; }

/* on deck */
.ap-deck { padding-top: 40px; }
.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }
.deck-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 150px; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.deck-bar { height: 10px; background: var(--well); border: 1px solid var(--line); position: relative; }
.deck-bar i { position: absolute; inset: 0 auto 0 0; background: var(--or); transition: width 0.6s ease; }
.deck-x { font: 600 16px/1.1 var(--mono); text-align: right; }
.deck-x small { display: block; font: 400 12px/1.3 var(--mono); color: var(--soft); margin-top: 3px; }
.ap-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; padding-top: 44px; padding-bottom: 90px; }

/* ---- coin page */
.ap-top--coin .ap-wrap { align-items: end; }
.c-ident { display: flex; align-items: center; gap: 20px; min-width: 0; }
.c-ident img { width: 84px; height: 84px; object-fit: cover; background: var(--well); border: 1px solid var(--line-2); flex: none; }
.ap-h--coin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ca { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font: 500 14px/1 var(--mono); }
.c-ca a { color: var(--or); }
.c-now { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 8px; }
.c-mult { font: 600 clamp(54px, 7vw, 104px)/0.9 var(--mono); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.c-mult.is-split { color: var(--or); }
.c-mult.is-under { color: var(--down); }
.c-mc { font: 500 15px/1.3 var(--mono); color: var(--soft); }
.c-split { font: 500 15px/1.3 var(--mono); }
.c-split b { color: var(--or); font-weight: 600; }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr); gap: 40px; padding-top: 18px; }
.ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.rung { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: center; padding: 16px 0 16px 18px; border-bottom: 1px solid var(--line); position: relative; }
.rung::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--well); }
.rung.is-done::before { background: var(--or); }
.rung-x { font: 600 24px/1 var(--mono); letter-spacing: -0.04em; color: var(--faint); }
.rung.is-done .rung-x { color: var(--paper); }
.rung-n b { display: block; font: 750 17px/1.2 var(--sans); font-stretch: 106%; }
.rung-n b .sb { margin-right: 4px; vertical-align: 1px; }
.rung-n small { display: block; margin-top: 4px; font: 400 13px/1.35 var(--mono); color: var(--soft); }
.rung-s { font: 400 13px/1.45 var(--mono); color: var(--soft); text-align: right; }
.rung-s a { color: var(--or); }
.rung--grad .rung-x { font-size: 20px; }
.rung-now { display: none; }
.c-ticket { position: sticky; top: 96px; align-self: start; }
.tk-side { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); margin-bottom: 14px; }
.tk-side button { min-height: 44px; background: none; border: 0; cursor: pointer; font: 750 15px/1 var(--sans); font-stretch: 108%; color: var(--soft); }
.tk-side button.is-on { background: var(--paper); color: var(--ink); }
.tk-amt { display: flex; align-items: center; border: 1px solid var(--line-2); background: var(--ink); }
.tk-amt:focus-within { border-color: var(--or); }
.tk-amt span { padding: 0 12px; font: 500 14px/1 var(--mono); color: var(--soft); border-right: 1px solid var(--line); min-width: 54px; }
.tk-amt input { flex: 1; min-width: 0; height: 54px; padding: 0 14px; background: none; border: 0; outline: none; font: 500 22px/1 var(--mono); }
.tk-quick { display: flex; gap: 6px; margin: 10px 0 0; }
.tk-quick button { flex: 1; min-height: 36px; background: none; border: 1px solid var(--line); cursor: pointer; font: 500 13px/1 var(--mono); color: var(--paper); }
.tk-quick button:hover { border-color: var(--or); }
.tk-out { margin: 16px 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tk-out div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; background: var(--ink); }
.tk-out dt { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.tk-out dd { margin: 0; font: 500 14px/1.3 var(--mono); text-align: right; }
.tk-msg { min-height: 22px; margin: 12px 0 0; font: 500 14px/1.45 var(--mono); color: var(--soft); }
.tk-msg.is-bad { color: var(--down); }
.tk-msg.is-ok { color: var(--up); }
.tk-msg a { color: var(--or); }
.tk-off p { color: var(--soft); margin: 0 0 14px; }
.c-chart { padding-top: 40px; }
.c-chart__box { height: 320px; border: 1px solid var(--line); margin-top: 12px; }
.c-chart__box canvas { display: block; width: 100%; height: 100%; }
.c-trades { padding-top: 40px; padding-bottom: 80px; }
.tr-row { display: grid; grid-template-columns: 80px 56px 1fr 1fr 76px 110px 80px; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.3 var(--mono); }
.tr-head { font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 12px 0 10px; }
.tr-side.buy { color: var(--up); }
.tr-side.sell { color: var(--down); }
.tr-row a { color: var(--or); }

/* ---- launch page */
.l-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 44px; padding-top: 18px; padding-bottom: 90px; }
.l-form { display: flex; flex-direction: column; gap: 18px; }
.l-row--img { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; }
.l-drop { position: relative; display: grid; place-items: center; height: 148px; border: 1px dashed var(--line-2); cursor: pointer; text-align: center; font: 600 15px/1.3 var(--sans); color: var(--soft); overflow: hidden; }
.l-drop small { font: 400 12px/1.3 var(--mono); }
.l-drop:hover { border-color: var(--or); }
.l-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.l-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.l-drop.has img { display: block; }
.l-drop.has span { display: none; }
.l-names { display: flex; flex-direction: column; gap: 14px; }
.l-field { display: flex; flex-direction: column; gap: 8px; }
.l-field > span { font: 500 12px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.l-field > span i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--faint); }
.l-field input, .l-field textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; background: var(--ink); border: 1px solid var(--line-2); outline: none; font: 500 16px/1.3 var(--sans); resize: vertical; }
.l-field input:focus, .l-field textarea:focus { border-color: var(--or); }
#l-sym, #l-first { font-family: var(--mono); }
.l-quotes { display: flex; flex-wrap: wrap; gap: 6px; }
.l-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.l-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: st; }
.l-steps li { background: var(--ink); padding: 10px 12px; font: 500 14px/1.2 var(--mono); color: var(--faint); counter-increment: st; }
.l-steps li::before { content: counter(st) '  '; color: var(--faint); }
.l-steps li.is-on { color: var(--paper); }
.l-steps li.is-on::before { color: var(--or); }
.l-steps li.is-done { color: var(--soft); }
.l-steps li.is-done::after { content: '  done'; color: var(--up); }
.l-steps li.is-bad { color: var(--down); }
.l-side { position: sticky; top: 96px; align-self: start; }
.ladder--plan .rung { grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1.1fr); }
.l-facts { margin: 18px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.l-facts div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; background: var(--ink); }
.l-facts dt { font: 500 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); flex: none; }
.l-facts dd { margin: 0; font: 500 14px/1.35 var(--mono); text-align: right; }
.l-facts a { color: var(--or); }

/* ---- footer inside the app pages keeps the template's look */
.sp-app footer { margin-top: 0; }

@media (max-width: 1100px) {
  .ap-top .ap-wrap, .ap-grid, .c-grid, .l-grid { grid-template-columns: 1fr; }
  .ap-stats { min-width: 0; }
  .c-now { align-items: flex-start; text-align: left; }
  .c-ticket, .l-side { position: static; }
  .deck { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sp-app { font-size: 15px; }
  .ap-wrap { padding: 0 16px; }
  .ap-top { padding: 104px 0 26px; }
  .ap-h { font-size: clamp(40px, 12vw, 60px); }
  .ap-sub { font-size: 15px; }
  .ap-stats dd { font-size: 22px; }
  .ap-find { margin-left: 0; width: 100%; }
  .ap-find input { width: 100%; }
  .led-panel { height: 60px; }
  .led-strip { height: 46px; }
  .feed-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .fr-time { grid-column: 1; grid-row: 1; }
  .fr-coin { grid-column: 1; grid-row: 2; }
  .fr-split { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .fr-meta { grid-column: 1 / 3; }
  .fr-tx { grid-column: 1 / 3; }
  .lt-row { grid-template-columns: 22px minmax(0, 1fr) 76px; }
  .lt-badges, .lt-mc { display: none; }
  .lt-head span:nth-child(3), .lt-head span:nth-child(5) { display: none; }
  .deck-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .deck-bar { grid-column: 1 / 3; grid-row: 2; }
  .c-ident img { width: 56px; height: 56px; }
  .rung { grid-template-columns: 70px minmax(0, 1fr); padding-left: 14px; }
  .rung-s { grid-column: 1 / 3; text-align: left; }
  .rung-x { font-size: 19px; }
  .c-chart__box { height: 240px; }
  .tr-row { grid-template-columns: 64px 44px 1fr 1fr 60px; font-size: 13px; gap: 8px; }
  .tr-row > :nth-child(6), .tr-row > :nth-child(7) { display: none; }
  .l-row--img { grid-template-columns: 1fr; }
  .l-drop { height: 120px; }
  .l-socials { grid-template-columns: 1fr; }
  .ladder--plan .rung { grid-template-columns: 64px minmax(0, 1fr); }
  .ap-cta { padding-bottom: 60px; }
}