/* ==========================================================================
   ZELENCIO — LAUNCH HUB
   --------------------------------------------------------------------------
   Two layouts, not one layout stretched.

   PHONE   a single column that reads like the app: cover, avatar, one row of
           stats, a scrolling tab strip, and full-width coin rows you can hit
           with a thumb. Nothing is squeezed in beside anything else.

   DESKTOP the same information, opened out. The profile moves into a fixed
           left rail so it stays visible while you work, the coin list becomes
           a real table with the columns a phone has no room for, and the
           application wizard gets a labelled step rail instead of dots.

   The chamfered corner from the wordmark is used throughout, matching the
   rest of the site. Nothing here overlaps and nothing is stacked on top of
   anything else — every surface has its own space.

   On speed: no blur filters in any scrolling list, no shadow on a repeated
   row, and every animation runs on transform or opacity only, so the browser
   never has to lay the page out again mid-scroll.
   ========================================================================== */

.lh {
  --lh-gap:      14px;
  --lh-radius:   14px;
  --lh-cut:      10px;                       /* the 45° corner slice */
  --lh-rail:     300px;
  --lh-row:      68px;
  --lh-cover-h:  170px;
}

/* ==========================================================================
   SHELL
   ========================================================================== */

.lh-page { max-width: 1320px; margin: 0 auto; padding: 0 0 72px; }

.lh-wrap { padding: 0 16px; }

/* Desktop opens into two columns. The rail is sticky so the identity of the
   creator stays on screen while the list scrolls. */
.lh-layout { display: block; }

@media (min-width: 1000px) {
  .lh { --lh-cover-h: 280px; }
  .lh-wrap   { padding: 0 28px; }
  .lh-layout {
    display: grid;
    grid-template-columns: var(--lh-rail) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .lh-rail { position: sticky; top: 88px; }
}

/* ==========================================================================
   COVER + IDENTITY
   ========================================================================== */

.lh-cover {
  position: relative;
  height: var(--lh-cover-h);
  background: linear-gradient(135deg, var(--bg-inset), var(--bg-sunk));
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.lh-cover::after {
  /* Keeps white text legible on any uploaded image without a blur filter. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
}
.lh-cover__empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase;
}

.lh-cover__tools {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  display: flex; gap: 8px;
}

.lh-id { position: relative; padding: 0 16px 4px; margin-top: -42px; }

.lh-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  background: var(--bg-inset);
  display: block;
}
.lh-avatar--lg { width: 104px; height: 104px; }

.lh-id__name {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 2px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.15;
  color: var(--ink);
  word-break: break-word;
}
.lh-id__handle { color: var(--ink-3); font-size: 14px; }
.lh-id__bio {
  margin-top: 8px; color: var(--ink-2);
  font-size: 14px; line-height: 1.55; max-width: 60ch;
}

/* Verified-style tick, drawn rather than loaded as an image. */
.lh-tick {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  background: var(--brand);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 700;
}

/* ── Stats row ─────────────────────────────────────────────────────────── */

.lh-stats {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 16px; padding: 0 16px;
}
.lh-stat {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-3);
  display: flex; align-items: baseline; gap: 6px;
  transition: color .15s ease;
}
.lh-stat:hover { color: var(--ink); }
.lh-stat b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.lh-stat span { font-size: 14px; }

@media (min-width: 1000px) {
  /* In the rail the stats stack, because a rail is tall and narrow. */
  .lh-rail .lh-stats { flex-direction: column; gap: 10px; padding: 0; }
  .lh-rail .lh-id    { padding: 0; margin-top: -52px; }
  .lh-rail .lh-id__name { font-size: 24px; }
}

/* ==========================================================================
   TABS
   ========================================================================== */

.lh-tabs {
  display: flex; gap: 4px;
  margin-top: 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lh-tabs::-webkit-scrollbar { display: none; }

.lh-tab {
  position: relative;
  flex: none;
  padding: 12px 12px 13px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.lh-tab:hover { color: var(--ink-2); }
.lh-tab.is-on { color: var(--ink); }
.lh-tab.is-on::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
}
.lh-tab__n {
  display: inline-block;
  min-width: 18px; margin-left: 6px; padding: 1px 5px;
  border-radius: 9px;
  background: var(--bg-inset);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--ink-3); text-align: center;
}
.lh-tab.is-on .lh-tab__n { background: var(--brand-wash); color: var(--brand-deep); }

@media (min-width: 1000px) {
  .lh-tabs { padding: 0; margin-top: 0; }
  .lh-tab  { padding: 14px 16px 15px; font-size: 15px; }
}

/* Asset-type filter chips. */
.lh-chips { display: flex; gap: 8px; padding: 14px 16px 0; overflow-x: auto; scrollbar-width: none; }
.lh-chips::-webkit-scrollbar { display: none; }
.lh-chip {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink-3);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.lh-chip:hover  { border-color: var(--ink-faint); color: var(--ink-2); }
.lh-chip.is-on  { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-wash); }
@media (min-width: 1000px) { .lh-chips { padding: 16px 0 0; } }

/* ==========================================================================
   COIN LIST — rows on a phone, a real table on a desktop
   ========================================================================== */

.lh-list { margin-top: 6px; }

.lh-coin {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--lh-row);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit; text-decoration: none;
  transition: background-color .12s ease;
}
.lh-coin:hover { background: var(--bg-sunk); }

.lh-coin__logo {
  width: 48px; height: 48px;
  border-radius: var(--lh-cut);
  object-fit: cover;
  background: var(--bg-inset);
  display: block;
}
.lh-coin__main  { min-width: 0; }
.lh-coin__name  {
  font-weight: 600; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lh-coin__sub   {
  display: flex; align-items: center; gap: 8px;
  margin-top: 3px; font-size: 13px; color: var(--ink-3);
}
.lh-coin__sym   { font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; }
.lh-coin__side  { text-align: right; display: grid; gap: 3px; justify-items: end; }
.lh-coin__cap   { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--ink); }
.lh-coin__pnl   { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.lh-coin__pnl.up   { color: var(--up); }
.lh-coin__pnl.down { color: var(--down); }
.lh-coin__pnl.flat { color: var(--ink-faint); }

/* Columns a phone has no room for appear from tablet width up. */
.lh-coin__type, .lh-coin__when, .lh-coin__net { display: none; }

@media (min-width: 700px) {
  .lh-coin {
    grid-template-columns: 52px minmax(0, 2.2fr) 110px 130px auto;
    padding: 14px 16px;
  }
  .lh-coin__type, .lh-coin__when {
    display: block; font-size: 13px; color: var(--ink-3);
  }
}
@media (min-width: 1000px) {
  .lh-coin {
    grid-template-columns: 52px minmax(0, 2.2fr) 120px 120px 150px auto;
    padding: 14px 12px;
    border-radius: var(--lh-cut);
    border-bottom: 1px solid var(--line-soft);
  }
  .lh-coin__net { display: block; font-size: 13px; color: var(--ink-3); }
}

/* Column headings only exist where there are columns. */
.lh-thead { display: none; }
@media (min-width: 700px) {
  .lh-thead {
    display: grid;
    grid-template-columns: 52px minmax(0, 2.2fr) 110px 130px auto;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .lh-thead > :last-child { text-align: right; }
}
@media (min-width: 1000px) {
  .lh-thead { grid-template-columns: 52px minmax(0, 2.2fr) 120px 120px 150px auto; padding: 10px 12px; }
}

/* ── Status pill ───────────────────────────────────────────────────────── */

.lh-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.lh-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.lh-pill--live     { background: rgba(0,168,107,.12);  color: var(--up); }
.lh-pill--pending  { background: rgba(217,119,6,.12);  color: var(--warn); }
.lh-pill--review   { background: var(--brand-wash);    color: var(--brand-deep); }
.lh-pill--rejected { background: rgba(229,56,79,.12);  color: var(--down); }
.lh-pill--draft    { background: var(--bg-inset);      color: var(--ink-3); }

/* ==========================================================================
   PANELS, EMPTY STATES, NOTES
   ========================================================================== */

.lh-panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--lh-radius);
  padding: 18px 16px;
  margin: 16px;
}
@media (min-width: 1000px) { .lh-panel { margin: 20px 0; padding: 24px; } }

.lh-panel__title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 4px;
}
.lh-panel__sub { font-size: 13px; color: var(--ink-3); margin: 0 0 16px; }

.lh-empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--ink-3);
}
.lh-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: var(--lh-cut);
  background: var(--bg-inset);
  display: grid; place-items: center;
  font-size: 24px;
}
.lh-empty__title { font-weight: 600; color: var(--ink-2); font-size: 15px; }
.lh-empty__text  { margin-top: 6px; font-size: 13.5px; max-width: 34ch; margin-inline: auto; line-height: 1.6; }

.lh-note {
  display: flex; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--lh-cut);
  background: var(--bg-inset);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.lh-note--warn { background: rgba(217,119,6,.10); color: var(--warn); }
.lh-note--bad  { background: rgba(229,56,79,.10); color: var(--down); }
.lh-note--ok   { background: rgba(0,168,107,.10); color: var(--up); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.lh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--lh-cut);
  background: var(--brand);
  color: #fff;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.lh-btn:hover  { filter: brightness(1.06); }
.lh-btn:active { transform: translateY(1px); }
.lh-btn[disabled], .lh-btn.is-busy { opacity: .55; pointer-events: none; }

.lh-btn--ghost {
  background: var(--bg-raised);
  border-color: var(--line);
  color: var(--ink-2);
}
.lh-btn--ghost:hover { border-color: var(--ink-faint); color: var(--ink); filter: none; }
.lh-btn--danger { background: var(--down); }
.lh-btn--sm  { padding: 8px 14px; font-size: 13px; }
.lh-btn--wide{ width: 100%; }

/* The floating Create button: a pill on a phone, a normal button on desktop
   where there is room for it in the header. */
.lh-fab {
  position: fixed; z-index: 40;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  padding: 14px 26px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  font-size: 15px;
}
@media (min-width: 1000px) { .lh-fab { display: none; } }
.lh-createbar { display: none; }
@media (min-width: 1000px) { .lh-createbar { display: flex; gap: 10px; } }

/* ==========================================================================
   LAUNCH TYPE CHOICE
   ========================================================================== */

.lh-choices { display: grid; gap: 12px; padding: 16px; }
@media (min-width: 760px) {
  .lh-choices { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 24px 0; }
}

.lh-choice {
  position: relative;
  display: block;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--lh-radius);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.lh-choice:hover { border-color: var(--brand); transform: translateY(-2px); }
.lh-choice--soon { opacity: .72; }
.lh-choice--soon:hover { transform: none; border-color: var(--line); }

.lh-choice__icon {
  width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: var(--lh-cut);
  background: var(--brand-wash);
  display: grid; place-items: center;
  font-size: 21px;
}
.lh-choice__name { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.lh-choice__desc { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.lh-choice__tag  {
  position: absolute; top: 16px; right: 16px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.lh-form { padding: 16px; }
@media (min-width: 1000px) { .lh-form { padding: 0; } }

.lh-field { margin-bottom: 18px; }
.lh-label {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.lh-label small { color: var(--ink-faint); font-weight: 500; }
.lh-req { color: var(--down); }

.lh-input, .lh-select, .lh-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.4 'Inter', system-ui, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
  /* 16px on phones stops iOS zooming the whole page on focus. */
}
@media (max-width: 700px) { .lh-input, .lh-select, .lh-textarea { font-size: 16px; } }

.lh-input:focus, .lh-select:focus, .lh-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.lh-input.is-bad { border-color: var(--down); }
.lh-input.is-good { border-color: var(--up); }
.lh-textarea { min-height: 110px; resize: vertical; }

.lh-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.lh-hint.is-bad  { color: var(--down); }
.lh-hint.is-good { color: var(--up); }

.lh-grid2 { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .lh-grid2 { grid-template-columns: 1fr 1fr; } }
.lh-grid3 { display: grid; gap: 0 16px; }
@media (min-width: 900px) { .lh-grid3 { grid-template-columns: repeat(3, 1fr); } }

/* ── Image picker ──────────────────────────────────────────────────────── */

.lh-img {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.lh-img__preview {
  width: 84px; height: 84px;
  border-radius: var(--lh-cut);
  border: 1px dashed var(--line);
  background: var(--bg-inset) center/cover no-repeat;
  display: grid; place-items: center;
  color: var(--ink-faint); font-size: 11px; text-align: center;
}
.lh-img__preview.is-set { border-style: solid; }
.lh-img__side { display: grid; gap: 8px; }
.lh-img__or { font-size: 12px; color: var(--ink-faint); text-align: center; }

/* ── Repeatable rows: socials, team, investors, listings ───────────────── */

.lh-rows { display: grid; gap: 10px; }
.lh-row {
  display: grid; gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-sunk);
}
@media (min-width: 700px) {
  .lh-row--2 { grid-template-columns: 170px minmax(0, 1fr) 40px; align-items: center; }
  .lh-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; align-items: center; }
}
.lh-row__x {
  width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--lh-cut);
  background: var(--bg-raised); color: var(--ink-3);
  cursor: pointer; font-size: 16px; line-height: 1;
  transition: color .15s ease, border-color .15s ease;
}
.lh-row__x:hover { color: var(--down); border-color: var(--down); }

.lh-add {
  justify-self: start;
  padding: 9px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--lh-cut);
  background: none; color: var(--brand-deep);
  font: 600 13px 'Inter', sans-serif; cursor: pointer;
  transition: border-color .15s ease;
}
.lh-add:hover { border-color: var(--brand); }

/* ── Toggle ────────────────────────────────────────────────────────────── */

.lh-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-raised);
  cursor: pointer;
}
.lh-toggle__t { font-weight: 600; font-size: 14px; color: var(--ink); }
.lh-toggle__d { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.lh-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.lh-track {
  flex: none; width: 46px; height: 26px;
  border-radius: 999px; background: var(--bg-inset);
  border: 1px solid var(--line);
  position: relative; transition: background-color .18s ease;
}
.lh-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-raised); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .18s ease;
}
.lh-toggle input:checked + .lh-track { background: var(--brand); border-color: var(--brand); }
.lh-toggle input:checked + .lh-track::after { transform: translateX(20px); }

/* ==========================================================================
   WIZARD
   ========================================================================== */

/* Phone: a slim progress bar with a step counter. Desktop: a labelled rail. */
.lh-steps { padding: 14px 16px 0; }
.lh-steps__bar { height: 4px; border-radius: 2px; background: var(--bg-inset); overflow: hidden; }
.lh-steps__fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transition: width .3s ease;
}
.lh-steps__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 9px; font-size: 13px; color: var(--ink-3);
}
.lh-steps__meta b { color: var(--ink); font-size: 14px; }

.lh-steprail { display: none; }
@media (min-width: 1000px) {
  .lh-steps    { display: none; }
  .lh-steprail { display: grid; gap: 2px; }
  .lh-steprail__i {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--lh-cut);
    color: var(--ink-3); font-size: 14px; text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
  }
  .lh-steprail__i:hover { background: var(--bg-sunk); color: var(--ink-2); }
  .lh-steprail__i.is-on { background: var(--brand-wash); color: var(--brand-deep); font-weight: 600; }
  .lh-steprail__i.is-done { color: var(--ink-2); }
  .lh-steprail__n {
    width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-inset);
    font: 600 12px 'JetBrains Mono', monospace;
  }
  .lh-steprail__i.is-on   .lh-steprail__n { background: var(--brand); color: #fff; }
  .lh-steprail__i.is-done .lh-steprail__n { background: var(--up); color: #fff; }
}

/* Sticky footer for the wizard so Next is always reachable on a phone. */
.lh-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.lh-actions .lh-btn { flex: 1; }
@media (min-width: 1000px) {
  .lh-actions { position: static; padding: 20px 0 0; border-top: 0; background: none; }
  .lh-actions .lh-btn { flex: none; min-width: 150px; }
  .lh-actions__spacer { flex: 1; }
}

/* ==========================================================================
   MARKETS + FEES
   ========================================================================== */

.lh-markets { display: grid; gap: 10px; }
@media (min-width: 800px) { .lh-markets { grid-template-columns: 1fr 1fr; } }

.lh-market {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color .15s ease;
}
.lh-market:hover { border-color: var(--ink-faint); }
.lh-market input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.lh-market.is-on { border-color: var(--brand); background: var(--brand-wash); }
.lh-market--fixed { cursor: default; opacity: .95; }
.lh-market__n { font-weight: 600; font-size: 14px; color: var(--ink); }
.lh-market__d { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.lh-market__f { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.lh-market__f.is-free { color: var(--up); }

.lh-total {
  margin-top: 16px; padding: 16px;
  border-radius: var(--lh-cut);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
}
.lh-total__line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 6px 0; font-size: 13.5px; color: var(--ink-2);
}
.lh-total__line span:last-child { font-family: 'JetBrains Mono', monospace; }
.lh-total__sum {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-weight: 700; font-size: 16px; color: var(--ink);
}
.lh-total__sum span:last-child { font-family: 'JetBrains Mono', monospace; }

/* ==========================================================================
   REVIEW PAGE
   ========================================================================== */

.lh-review { display: grid; gap: 14px; }
.lh-rsec {
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-raised);
  overflow: hidden;
}
.lh-rsec__h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-sunk);
}
.lh-rsec__t { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.lh-rsec__b { padding: 6px 16px 14px; }
.lh-kv {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.lh-kv:last-child { border-bottom: 0; }
.lh-kv__k { font-size: 12px; color: var(--ink-3); }
.lh-kv__v { color: var(--ink); word-break: break-word; }
@media (min-width: 700px) {
  .lh-kv { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .lh-kv__k { font-size: 13px; }
}

/* ==========================================================================
   ACTIVITY FEED
   ========================================================================== */

.lh-post {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lh-post__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg-inset); }
.lh-post__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.lh-post__name { font-weight: 600; color: var(--ink); }
.lh-post__time { color: var(--ink-faint); }
.lh-post__body { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
.lh-post__img  { margin-top: 10px; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--lh-cut); display: block; }

.lh-composer {
  display: grid; gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   NOTIFICATIONS
   ========================================================================== */

.lh-notif {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.lh-notif__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.lh-notif.is-new .lh-notif__dot { background: var(--brand); }
.lh-notif__t { font-weight: 600; font-size: 14px; color: var(--ink); }
.lh-notif__b { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lh-notif__m { margin-top: 6px; font-size: 12px; color: var(--ink-faint); }

/* ==========================================================================
   COMING SOON
   ========================================================================== */

.lh-soon { padding: 72px 24px; text-align: center; }
.lh-soon__mark {
  width: 76px; height: 76px; margin: 0 auto 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: grid; place-items: center;
  font-size: 32px; color: #fff;
}
.lh-soon__t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-deep);
}
.lh-soon__h { margin: 10px 0 12px; font-size: 30px; font-weight: 700; color: var(--ink); }
.lh-soon__p { max-width: 46ch; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--ink-3); }
@media (min-width: 1000px) { .lh-soon { padding: 110px 24px; } .lh-soon__h { font-size: 38px; } }

/* ==========================================================================
   LANDING
   ========================================================================== */

.lh-hero { padding: 40px 16px 28px; text-align: center; }
.lh-hero__h {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--ink);
  margin: 0 0 12px;
}
.lh-hero__p { max-width: 52ch; margin: 0 auto 22px; font-size: 15px; line-height: 1.65; color: var(--ink-3); }
.lh-hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (min-width: 1000px) {
  .lh-hero { padding: 72px 24px 40px; }
  .lh-hero__h { font-size: 46px; }
  .lh-hero__p { font-size: 17px; }
}

.lh-mini { display: grid; gap: 12px; padding: 16px; }
@media (min-width: 760px) { .lh-mini { grid-template-columns: repeat(3, 1fr); padding: 24px 0; gap: 18px; } }
.lh-mini__c {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--lh-radius);
  background: var(--bg-raised);
}
.lh-mini__n { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.lh-mini__d { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

/* ==========================================================================
   MISC
   ========================================================================== */

.lh-sheet { display: grid; gap: 12px; }
.lh-people { display: grid; gap: 2px; }
.lh-person {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px;
  align-items: center; padding: 10px 16px;
  color: inherit; text-decoration: none;
  border-radius: var(--lh-cut);
}
.lh-person:hover { background: var(--bg-sunk); }
.lh-person__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg-inset); }
.lh-person__n  { font-weight: 600; font-size: 14px; color: var(--ink); }
.lh-person__u  { font-size: 13px; color: var(--ink-3); }

.lh-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lh-spin .7s linear infinite;
}
@keyframes lh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lh-choice, .lh-btn, .lh-steps__fill, .lh-track, .lh-track::after { transition: none; }
  .lh-spin { animation-duration: 2s; }
}

/* Long lists tell the browser it may skip work for rows that are off screen.
   On a creator with a hundred projects this is the difference between a list
   that scrolls and one that stutters. */
.lh-list .lh-coin,
.lh-post,
.lh-notif { content-visibility: auto; contain-intrinsic-size: auto 68px; }

/* ==========================================================================
   VERIFICATION BADGES
   ========================================================================== */

.lh-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  color: #fff; font-size: 11px; font-weight: 700;
}
.lh-badge--personal { background: var(--ink-3); }
.lh-badge--project  { background: var(--brand); }
.lh-badge--premium  { background: linear-gradient(135deg, #d4a017, #f5c542); color: #3a2c00; }

.lh-tier {
  display: grid; gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--lh-radius);
  background: var(--bg-raised);
}
.lh-tier.is-locked { opacity: .6; }
.lh-tier.is-held   { border-color: var(--up); }
.lh-tier__top  { display: flex; align-items: center; gap: 10px; }
.lh-tier__name { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); }
.lh-tier__fee  { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--ink); }
.lh-tier__desc { font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }
.lh-tiers { display: grid; gap: 14px; }
@media (min-width: 900px) { .lh-tiers { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   MULTI-SELECT NETWORK PICKER
   ========================================================================== */

.lh-nets { display: grid; gap: 10px; }
@media (min-width: 760px) { .lh-nets { grid-template-columns: 1fr 1fr; } }

.lh-net {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color .15s ease;
}
.lh-net:hover  { border-color: var(--ink-faint); }
.lh-net.is-on  { border-color: var(--brand); background: var(--brand-wash); }
.lh-net input  { width: 18px; height: 18px; accent-color: var(--brand); }
.lh-net__n     { font-weight: 600; font-size: 14px; color: var(--ink); }
.lh-net__f     { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ink); }
.lh-net__f.is-free { color: var(--up); }

/* ==========================================================================
   WIZARD — REBUILT
   --------------------------------------------------------------------------
   The old version leaned on .lh-market for radio choices, which is a pricing
   row: three grid columns with a fee on the right. Used for a question it
   left an empty third column, so the required asterisk floated in a box of
   its own and the option text wrapped underneath the title instead of beside
   it. That is what looked wrong on the phone.

   This is built for questions instead. A numbered question block, real
   option cards with the radio on the left and the description on its own
   line, and one clear rhythm down the page.
   ========================================================================== */

/* ── Question block ───────────────────────────────────────────────────── */

.lhq { margin-bottom: 28px; }
.lhq + .lhq { padding-top: 24px; border-top: 1px solid var(--line-soft); }

.lhq__head { margin-bottom: 14px; }

.lhq__q {
  display: block;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  color: var(--ink);
}
.lhq__q .req { color: var(--down); font-weight: 700; margin-left: 2px; }
.lhq__q .opt {
  margin-left: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; color: var(--ink-faint);
  letter-spacing: .02em;
}
.lhq__note { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-3); }

/* ── Option cards ─────────────────────────────────────────────────────── */

.lhq__opts { display: grid; gap: 10px; }

.lhopt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-raised);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.lhopt:hover  { border-color: var(--ink-faint); }
.lhopt.is-on  { border-color: var(--brand); background: var(--brand-wash); }

.lhopt input {
  width: 20px; height: 20px;
  margin: 1px 0 0;
  accent-color: var(--brand);
}
.lhopt__t {
  display: block;
  font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--ink);
}
.lhopt.is-on .lhopt__t { color: var(--brand-deep); }
.lhopt__d {
  display: block;
  margin-top: 4px;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-3);
}

@media (min-width: 760px) {
  .lhq__opts--2 { grid-template-columns: 1fr 1fr; }
}

/* ── Section heading inside a step ────────────────────────────────────── */

.lhsec {
  margin: 30px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.lhsec:first-child { margin-top: 0; }
.lhsec__t {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
}
.lhsec__d { margin-top: 6px; font-size: 13px; line-height: 1.55; color: var(--ink-faint); }

/* ── Action bar ───────────────────────────────────────────────────────── */
/* The save state used to sit between Cancel and Continue, which read as a
   third button. It belongs above the bar, out of the way of the thumb. */

.lhbar {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: 28px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px 0 calc(12px + env(safe-area-inset-bottom));
}
.lhbar__state {
  display: block;
  padding: 0 2px 8px;
  font-size: 12px; color: var(--ink-faint);
  min-height: 16px;
}
.lhbar__state.is-saved  { color: var(--up); }
.lhbar__state.is-failed { color: var(--down); }

.lhbar__row { display: flex; gap: 10px; align-items: center; }
.lhbar__row .lh-btn { flex: 1; }
.lhbar__row .lh-btn--ghost { flex: 0 0 auto; min-width: 96px; }

@media (min-width: 1000px) {
  .lhbar { position: static; border-top: 0; padding: 24px 0 0; }
  .lhbar__row .lh-btn { flex: 0 0 auto; min-width: 160px; }
  .lhbar__row .lh-btn--ghost { min-width: 120px; }
  .lhbar__sp { flex: 1; }
}

/* ── Compact rows for coin data ───────────────────────────────────────── */

.lhpair { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .lhpair { grid-template-columns: 1fr 1fr; } }

.lhtrio { display: grid; gap: 0 16px; }
@media (min-width: 860px) { .lhtrio { grid-template-columns: repeat(3, 1fr); } }

/* Network rows stack on a phone and line up on a desktop. */
.lhnet-row {
  display: grid; gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut);
  background: var(--bg-sunk);
}
@media (min-width: 900px) {
  .lhnet-row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr) 40px; align-items: start; }
}
.lhnet-row__x {
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--lh-cut);
  background: var(--bg-raised); color: var(--ink-3);
  cursor: pointer; font-size: 17px; line-height: 1;
  justify-self: start;
}
.lhnet-row__x:hover { color: var(--down); border-color: var(--down); }

/* Reach figures on the profile header. Not buttons — there is no list of
   views to open, and a button that does nothing is worse than plain text. */
.lh-stat--flat { cursor: default; }
.lh-stat--flat:hover b { color: inherit; }

/* The state count on a Coins chip. */
.lh-chip__n {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg-inset);
  font-size: 10.5px; font-weight: 700;
}