/* 合流 MergePad · page styles: #/launch (spec §4.2) — 4-step stepper + sticky summary card; phone: step counter,
   no step footers (the sticky bottom CTA bar replaces them). Tokens and shared components live elsewhere. */

.ls-page .page-h, .ls-grid { max-width: 1032px; margin-inline: auto; }
.ls-grid { display: grid; grid-template-columns: minmax(0, 640px) 360px; gap: var(--s-8); justify-content: center; align-items: start; }
.ls-main { display: flex; flex-direction: column; gap: var(--gap-panel); min-width: 0; }
.ls-side { position: sticky; top: calc(var(--topbar-h) + var(--s-6)); min-width: 0; }

/* rail ---------------------------------------------------------------------- */
.ls-railbox { margin-bottom: var(--s-2); }
.ls-railm { display: none; }
.ls-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); }
.ls-rail button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding-top: var(--s-2); border-top: 2px dashed var(--line-2);
  font-size: var(--t-12); line-height: var(--lh-12); font-weight: var(--w-5); color: var(--fg-3); text-align: left; transition: color var(--t-1) var(--ease-out), border-color var(--t-2) var(--ease-out); }
.ls-rail button .k { font: var(--w-5) var(--t-11)/1 var(--font-mono); color: var(--fg-3); }
.ls-rail button:not(:disabled):hover { color: var(--fg-1); }
.ls-rail button:disabled { cursor: default; }
.ls-rail li[data-state="done"] button { border-top-style: solid; border-top-color: var(--fg-3); color: var(--fg-2); }
.ls-rail li[data-state="cur"] button { border-top-style: solid; border-top-color: var(--accent); color: var(--fg-1); font-weight: var(--w-6); }
.ls-rail li[data-state="cur"] .k { color: var(--accent); }

/* step panels ---------------------------------------------------------------- */
.ls-step { transition: border-color var(--t-2) var(--ease-out); }
.ls-step[data-state="todo"] { background: transparent; border-style: dashed; }
.ls-step[data-state="todo"] .ls-h { opacity: .56; }
.ls-h { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-4); min-width: 0; }
.ls-step[data-state="cur"] .ls-h { border-bottom: 1px solid var(--line-1); }
.ls-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--r-2); background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg-2); }
.ls-n .k { font: var(--w-6) var(--t-12)/1 var(--font-mono); }
.ls-n .i { display: none; }
.ls-step[data-state="cur"] .ls-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ls-step[data-state="done"] .ls-n { background: transparent; border-color: var(--line-3); color: var(--up); }
.ls-step[data-state="done"] .ls-n .k { display: none; }
.ls-step[data-state="done"] .ls-n .i { display: block; }
.ls-t { flex: none; font-size: var(--t-14); line-height: var(--lh-14); font-weight: var(--w-6); }
.ls-step[data-state="done"] .ls-t { color: var(--fg-2); font-weight: var(--w-5); }
.ls-sumline { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--t-13); line-height: var(--lh-13); color: var(--fg-2); }
.ls-sumline > * { flex: none; }
.ls-sumline .trunc { flex: 0 1 auto; }
.ls-sumline .num { font-size: var(--t-12); }
.ls-edit { margin-left: auto; flex: none; }
.ls-b { padding: var(--s-5) var(--s-4); }
.ls-f { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-1); }
.ls-why { margin-right: auto; font-size: var(--t-12); line-height: var(--lh-12); color: var(--fg-3); }
.ls-next { min-width: 120px; }

/* a post that already has a pool (or is too old) ends the flow at step 1 */
.ls-main.is-stop .ls-step:not([data-step="1"]), .ls-main.is-stop .ls-f, .ls-main.is-stop .ls-railbox { display: none; }

/* step 1 · tweet ------------------------------------------------------------ */
.ls-tfield input { font-size: var(--t-14); }
.ls-tin .field-err .i { flex: none; }
.ls-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); font-size: var(--t-12); line-height: 20px; color: var(--fg-2); }
.ls-meta .num { font-size: var(--t-12); color: var(--fg-1); }
.ls-left { margin-left: auto; font-family: var(--font-sans); }
.ls-left .num, .ls-left span { font-variant-numeric: tabular-nums; }
.ls-look:empty, .ls-twbox:empty { display: none; }
.ls-look { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.ls-status { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-13); line-height: 20px; }
.ls-status > .i, .ls-status > .spin { margin-top: 3px; flex: none; color: var(--fg-3); }
.ls-status .t { color: var(--fg-1); font-weight: var(--w-5); }
.ls-status .p { display: block; font-size: var(--t-12); line-height: 18px; color: var(--fg-3); }
.ls-status.ok > .i { color: var(--up); }
.ls-status.wait > .spin { color: var(--accent); }
.ls-callout { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-3); border-radius: var(--r-3); background: var(--bg-0); }
.ls-callout > .i { margin-top: 2px; flex: none; color: var(--accent); }
.ls-callout b { display: block; font-size: var(--t-13); line-height: 20px; font-weight: var(--w-6); color: var(--fg-1); }
.ls-callout p { margin-top: 2px; font-size: var(--t-12); line-height: 20px; color: var(--fg-2); }
.ls-callout .btn { margin-top: var(--s-3); }
.ls-callout.down { border-color: var(--down-a24); background: var(--down-a12); }
.ls-callout.down > .i { color: var(--down); }
.ls-callout-a { margin-top: var(--s-2); }
.ls-exists { border: 1px solid var(--line-3); border-radius: var(--r-3); background: var(--bg-0); overflow: hidden; }
.ls-ex-h { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); }
.ls-ex-h > .i { margin-top: 2px; flex: none; color: var(--accent); }
.ls-ex-h b { display: block; font-size: var(--t-14); line-height: 20px; font-weight: var(--w-6); }
.ls-ex-h p { margin-top: 2px; font-size: var(--t-12); line-height: 20px; color: var(--fg-2); }
.ls-ex-pool .mrow { border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); background: var(--bg-1); padding: var(--s-3) var(--s-4); }
.ls-ex-pool .mrow:hover { background: var(--bg-2); }
.ls-ex-coin { margin: var(--s-3) var(--s-4) 0; }
.ls-ex-a { display: flex; justify-content: flex-end; padding: var(--s-3) var(--s-4); }
.ls-twbox { margin-top: var(--s-3); }
.ls-tw { padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--bg-0); }
.ls-tw-h { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ls-tw-h .who { flex: 1 1 auto; min-width: 0; }
.ls-tw-h .who b { display: block; font-size: var(--t-13); line-height: 20px; font-weight: var(--w-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-tw-h .who span { display: block; font-size: var(--t-12); line-height: var(--lh-12); color: var(--fg-3); }
.ls-tw-h .when { flex: none; font-size: var(--t-12); color: var(--fg-3); }
.ls-tw-x { margin-top: var(--s-3); font-size: var(--t-14); line-height: 24px; color: var(--fg-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.ls-tw-x mark { background: var(--accent-a16); color: var(--fg-1); border-radius: 2px; padding: 0 2px; box-shadow: inset 0 -1px 0 var(--accent-a32); }
.ls-tw-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-1); font-size: var(--t-12); color: var(--fg-2); min-width: 0; }
.ls-tw-f .num { font-size: var(--t-12); color: var(--fg-2); }
.ls-tw.is-skel .ls-tw-h > div { display: flex; flex-direction: column; gap: 6px; }
.ls-tw.is-skel .skel + .skel { margin-top: 0; }
.ls-hint { margin-top: var(--s-2); font-size: var(--t-12); line-height: 20px; color: var(--fg-3); }

.ls-sub { margin-top: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--bg-0); transition: border-color var(--t-1) var(--ease-out); }
.ls-sub.is-bad { border-color: var(--down-a24); }
.ls-subt { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-3); font-size: var(--t-12); line-height: var(--lh-12); color: var(--fg-2); text-align: left; }
.ls-subt:hover { background: var(--bg-2); }
.ls-subt > .i:first-child { color: var(--accent); }
.ls-subt .l { flex: none; color: var(--fg-1); font-weight: var(--w-5); }
.ls-subt .pv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-3); }
.ls-subt .cnt { flex: none; font-size: var(--t-11); color: var(--fg-3); }
.ls-subt > .i:last-child { flex: none; color: var(--fg-3); transition: transform var(--t-2) var(--ease-out); }
.ls-sub.is-open .ls-subt > .i:last-child { transform: rotate(180deg); }
.ls-sub.is-bad .ls-subt .cnt { color: var(--down); }
.ls-subb { padding: 0 var(--s-3) var(--s-3); }
.ls-subfield { --h: auto; align-items: stretch; padding: var(--s-2) var(--s-3); background: var(--bg-1); }
.ls-subfield textarea { flex: 1 1 auto; min-height: 44px; resize: vertical; font-size: var(--t-14); line-height: 20px; }
.ls-subb .field-help .up { color: var(--up); }
.ls-subb .field-help .down { color: var(--down); }

/* step 2 · version ---------------------------------------------------------- */
.ls-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); }
.ls-fld { min-width: 0; }
.ls-grid2 + .ls-fld { margin-top: var(--s-4); }
.ls-fld .field-label { min-height: 20px; }
.ls-fld .field-label .opt { margin-left: 6px; color: var(--fg-3); }
.ls-fld .field-label .num.down { color: var(--down); }
.ls-fld .field input { font-size: var(--t-14); }
.ls-fld.sym .field .pre { font-size: var(--t-14); }
.ls-fld.sym .field input { text-transform: uppercase; font-family: var(--font-mono); letter-spacing: .02em; }
.ls-fld.sym .field input::placeholder { text-transform: none; font-family: var(--font-sans); letter-spacing: 0; }
.ls-fld.img .field { padding-right: var(--s-2); }
.ls-fld.img .cav { flex: none; }
.ls-media { cursor: pointer; font-family: var(--font-sans); font-size: var(--t-12); }
.ls-media:hover { border-color: var(--line-3); color: var(--fg-1); }
.ls-media.acc:hover { color: var(--accent-hi); }
.ls-check { margin-top: var(--s-4); }
.ls-crow { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; padding: var(--s-3); border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--bg-0); font-size: var(--t-13); line-height: 20px; }
.ls-crow > .i, .ls-crow > .spin { flex: none; margin-top: 2px; color: var(--fg-3); }
.ls-crow > div { flex: 1 1 auto; min-width: 0; }
.ls-crow .t { color: var(--fg-1); font-weight: var(--w-5); }
.ls-crow .p { display: block; margin-top: 2px; font-size: var(--t-12); line-height: 18px; color: var(--fg-3); }
.ls-crow .link { margin-top: var(--s-1); font-size: var(--t-12); }
.ls-crow.idle .t { color: var(--fg-3); font-weight: var(--w-4); }
.ls-crow.wait > .spin { color: var(--accent); }
.ls-crow.ok > .i { color: var(--up); }
.ls-crow.info > .i { color: var(--fg-2); }
.ls-crow.acc { border-color: var(--accent-a32); background: var(--accent-a08); }
.ls-crow.acc > .i { color: var(--accent); }
.ls-crow.down { border-color: var(--down-a24); background: var(--down-a12); }
.ls-crow.down > .i { color: var(--down); }
.ls-local { flex: none; align-self: center; }

/* step 3 · amount ----------------------------------------------------------- */
.ls-bal { font-size: var(--t-12); color: var(--fg-3); border-radius: var(--r-1); transition: color var(--t-1) var(--ease-out); }
.ls-bal:hover { color: var(--fg-1); }
.ls-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1); margin-top: var(--s-2); }
.ls-presets button { position: relative; height: var(--ctl); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-1);
  font: var(--w-5) var(--t-12)/1 var(--font-mono); color: var(--fg-2); text-align: center; transition: background-color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.ls-presets button:hover { background: var(--bg-2); border-color: var(--line-3); color: var(--fg-1); }
.ls-presets button:active { transform: translateY(1px); }
.ls-presets button[aria-pressed="true"] { background: var(--up-a12); border-color: var(--up-a24); color: var(--up); }
.ls-b .field-help { margin-top: var(--s-2); }
.ls-quote { margin-top: var(--s-4); padding: var(--s-2) var(--s-3); }
.ls-quote .kv { min-height: 28px; align-items: center; }
.ls-quote .kv > :last-child { font-size: var(--t-12); }
.ls-quote .kv > :last-child:not(.num) { color: var(--fg-2); }
.ls-quote .ls-tot > :last-child { font-size: var(--t-13); font-weight: var(--w-6); }
.ls-quote .num { transition: opacity var(--t-2) var(--ease-out); }
.ls-quote.is-quoting .num { opacity: .5; }

/* step 4 · confirm ---------------------------------------------------------- */
.ls-wallet { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--bg-0); }
.ls-wallet .ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--r-2); background: var(--bg-2); color: var(--fg-2); }
.ls-wallet b { display: block; font-size: var(--t-13); line-height: 20px; font-weight: var(--w-6); }
.ls-wallet p { margin-top: 2px; font-size: var(--t-12); line-height: 20px; color: var(--fg-3); }
.ls-gowhy { margin-top: var(--s-2); font-size: var(--t-12); line-height: var(--lh-12); color: var(--fg-3); text-align: center; }
.ls-prog { margin-top: var(--s-4); border: 1px solid var(--line-1); border-radius: var(--r-3); overflow: hidden; }
.ls-prog li { display: flex; align-items: center; gap: var(--s-3); height: 36px; padding: 0 var(--s-3); border-bottom: 1px solid var(--line-1); font-size: var(--t-13); color: var(--fg-3); transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out); }
.ls-prog li:last-child { border-bottom: 0; }
.ls-prog .st { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.ls-prog .st > i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); }
.ls-prog li[data-s="cur"] { background: var(--bg-2); color: var(--fg-1); }
.ls-prog li[data-s="cur"] .spin { color: var(--accent); }
.ls-prog li[data-s="done"] { color: var(--fg-2); }
.ls-prog li[data-s="done"] .i { color: var(--up); }
.ls-prog li[data-s="fail"] { color: var(--down); background: var(--down-a12); }
.ls-prog li[data-s="fail"] .i { color: var(--down); }
.ls-fail { margin-top: var(--s-3); }
.ls-fail:empty { display: none; }
.ls-safe { margin-top: var(--s-4); }

/* summary card -------------------------------------------------------------- */
.ls-sum .panel-b { display: flex; flex-direction: column; gap: var(--s-4); }
.ls-stw { padding: var(--s-2) var(--s-3); border-left: 2px solid var(--line-3); font-size: var(--t-12); line-height: 20px; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ls-stw b { color: var(--fg-1); font-weight: var(--w-5); }
.ls-stw.is-ph { color: var(--fg-3); border-left-color: var(--line-2); }
.ls-sver { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--bg-0); min-width: 0; }
.ls-sver .who { min-width: 0; flex: 1 1 auto; }
.ls-sver .nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--t-14); line-height: 20px; font-weight: var(--w-6); }
.ls-sver .nm .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ls-sver .tags { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.ls-sver .tags .num { font-size: var(--t-11); }
.ls-sver .sy { display: block; margin-top: 2px; font: var(--w-4) var(--t-12)/var(--lh-12) var(--font-mono); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-skv .kv { min-height: 32px; align-items: center; border-bottom: 1px solid var(--line-1); }
.ls-skv .kv:last-child { border-bottom: 0; }
.ls-skv .ls-tot > :last-child { font-size: var(--t-13); font-weight: var(--w-6); }
.ls-skv .kv > .is-pre, .ls-quote .kv > .is-pre, .ls-skv .kv > .is-na, .ls-quote .kv > .is-na { color: var(--fg-3); font-weight: var(--w-4); font-size: var(--t-12); }
.ls-snotes { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-1); }
.ls-snotes li { display: flex; gap: var(--s-2); font-size: var(--t-12); line-height: 20px; color: var(--fg-3); }
.ls-snotes .i { width: 14px; height: 14px; margin-top: 3px; flex: none; color: var(--fg-3); }

/* phone sticky CTA bar */
.ls-bbar { flex: 1 1 auto; min-width: 0; }
.ls-bbar .btn { width: 100%; }

/* responsive ---------------------------------------------------------------- */
@media (max-width: 1279px) {
  .ls-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-6); }
}
@media (max-width: 1024px) {
  .ls-page .page-h, .ls-grid { max-width: 680px; }
  .ls-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .ls-side { position: static; }
}
@media (max-width: 760px) {
  .ls-railm { display: block; margin-bottom: var(--s-2); font-size: var(--t-13); line-height: var(--lh-13); font-weight: var(--w-6); color: var(--fg-1); }
  .ls-rail button { padding-top: 0; min-height: 0; font-size: 0; gap: 0; }
  .ls-rail button > * { display: none; }
  .ls-f { display: none; }
  .ls-h { padding: 0 var(--s-3); gap: var(--s-2); }
  .ls-b { padding: var(--s-4) var(--s-3); }
  .ls-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ls-tfield input, .ls-fld .field input, .ls-subfield textarea { font-size: 16px; }
  .ls-left { margin-left: 0; }
  .ls-sumline .ls-sid { display: none; }
  .ls-b > [data-testid="launch-submit"] { display: none; } /* the sticky bottom bar carries the CTA on phones */
  .ls-gowhy { margin-top: 0; }
  .ls-tw-f { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
}

/* tweet card: real avatar + attached photos (1–4, X-style grid) */
.ls-tw-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line-2); background: var(--bg-2); }
.ls-tw-media { display: grid; gap: 4px; margin-top: 12px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); }
.ls-tw-media.n1 { grid-template-columns: 1fr; }
.ls-tw-media.n2, .ls-tw-media.n4 { grid-template-columns: 1fr 1fr; }
.ls-tw-media.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.ls-tw-media.n3 .ls-tw-m:first-child { grid-row: 1 / 3; }
.ls-tw-m { position: relative; display: block; background: var(--bg-2); min-height: 120px; }
.ls-tw-media.n1 .ls-tw-m { aspect-ratio: 16 / 10; max-height: 420px; }
.ls-tw-media:not(.n1) .ls-tw-m { aspect-ratio: 1 / 1; }
.ls-tw-m img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .24s ease-out, transform .4s ease-out; }
.ls-tw-m.is-loaded img { opacity: 1; }
.ls-tw-m:hover img { transform: scale(1.02); }
.ls-tw-m.is-broken { display: none; }
@media (prefers-reduced-motion: reduce) { .ls-tw-m img { transition: none; } .ls-tw-m:hover img { transform: none; } }