/* RHook — additive components. Everything below reuses the design tokens
   already defined by the base stylesheet, so light/dark flip automatically. */

.rh-eyebrow {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: 11px;
  margin: 0;
}

/* ---------------- pitch ---------------- */

.rh-pitch {
  display: grid;
  gap: 26px;
  padding: 30px 28px;
  border-radius: 28px;
  background: var(--bg-white);
  border: 1px solid #ffffff94;
}
html[data-theme=dark] .rh-pitch { border-color: #ffffff1f; }

.rh-pitch-main { display: grid; gap: 12px; max-width: 720px; }
.rh-pitch h1 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 2px 0 0;
  font-weight: 400;
}
.rh-pitch h1 em { font-style: italic; color: var(--chart-line); }
.rh-pitch-copy { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0; max-width: 66ch; }
.rh-pitch-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rh-pitch-actions .ui-btn { padding: 0 18px; height: 42px; border-radius: 999px; text-decoration: none; font-size: 14px; }
.rh-btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--divider);
}
.rh-btn-ghost:hover { background: #11111108; }
html[data-theme=dark] .rh-btn-ghost:hover { background: #ffffff0f; }

.rh-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rh;
}
.rh-flow li {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: #11111106;
  border: 1px solid var(--divider);
}
html[data-theme=dark] .rh-flow li { background: #ffffff08; }
.rh-flow-n {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px; font-weight: 600;
}
.rh-flow strong { font-size: 14px; }
.rh-flow span:last-child { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }

.rh-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--divider);
}
.rh-stat-row dt { color: var(--text-muted); font-size: 11.5px; margin-bottom: 4px; }
.rh-stat-row dd { margin: 0; font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* ---------------- hook chip ---------------- */

.rh-hook-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  background: #111111e0;
  color: #fff;
  white-space: nowrap;
}
.rh-hook-chip svg { width: 11px; height: 11px; }
.rh-hook-chip[data-cat=equity] { background: var(--accent); color: var(--accent-contrast); }
.rh-hook-chip[data-cat=yield] { background: #2f9e6b; color: #fff; }
.rh-hook-chip[data-cat=token] { background: #e0632f; color: #fff; }
.rh-hook-chip[data-cat=split] { background: #5b8def; color: #fff; }
.rh-hook-chip[data-cat=custom] { background: #8d6ce0; color: #fff; }
.rh-hook-chip.is-large { height: 26px; padding: 0 12px; font-size: 12px; }

/* ---------------- card additions ---------------- */

.rh-card-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.rh-card-route-dest {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rh-card-route-amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.launch-card-badges { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------------- generic page ---------------- */

.rh-page { display: grid; gap: 20px; }
.rh-page-head { display: grid; gap: 10px; max-width: 760px; padding: 8px 4px 0; }
.rh-page-head h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.06;
  margin: 0;
}
.rh-page-copy { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0; }

.rh-note {
  padding: 26px 26px 28px;
  border-radius: 26px;
  background: var(--bg-white);
  border: 1px solid #ffffff94;
  display: grid;
  gap: 12px;
}
html[data-theme=dark] .rh-note { border-color: #ffffff1f; }
.rh-note h2 { font-size: 18px; margin: 0; letter-spacing: -.01em; }
.rh-note h3 { font-size: 13px; margin: 0 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
.rh-note p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.rh-note p strong, .rh-note li strong { color: var(--text-primary); }
.rh-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 6px;
  background: #11111110;
}
html[data-theme=dark] .rh-note code { background: #ffffff14; }

.rh-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rh-note-grid ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.rh-note-grid li, .rh-numbered li { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.rh-numbered { margin: 0; padding-left: 20px; display: grid; gap: 10px; }

.rh-code {
  border-radius: 14px;
  background: #11111108;
  border: 1px solid var(--divider);
  padding: 14px 16px;
  overflow-x: auto;
}
html[data-theme=dark] .rh-code { background: #ffffff08; }
.rh-code pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.6; color: var(--text-primary); }

.rh-faq { display: grid; gap: 8px; }
.rh-faq details {
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 12px 16px;
  background: #11111106;
}
html[data-theme=dark] .rh-faq details { background: #ffffff08; }
.rh-faq summary { cursor: pointer; font-size: 14px; }
.rh-faq p { margin-top: 8px; }

/* ---------------- hooks catalog ---------------- */

.rh-hook-filters { padding: 0 4px; }
.rh-hook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.rh-hook-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px 22px 24px;
  border-radius: 24px;
  background: var(--bg-white);
  border: 1px solid #ffffff94;
}
html[data-theme=dark] .rh-hook-card { border-color: #ffffff1f; }
.rh-hook-card[hidden] { display: none; }
.rh-hook-card header { display: flex; align-items: center; gap: 10px; }
.rh-hook-n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-subtle); }
.rh-hook-glyph {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #11111108;
  border: 1px solid var(--divider);
  color: var(--text-primary);
}
html[data-theme=dark] .rh-hook-glyph { background: #ffffff0d; }
.rh-hook-glyph svg { width: 18px; height: 18px; }
.rh-hook-card header .rh-hook-chip { margin-left: auto; }
.rh-hook-card h2 { font-size: 19px; margin: 2px 0 0; letter-spacing: -.01em; }
.rh-hook-blurb { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.rh-hook-detail { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.rh-hook-spec { display: grid; gap: 6px; margin: 8px 0 4px; padding-top: 12px; border-top: 1px solid var(--divider); }
.rh-hook-spec > div { display: flex; gap: 12px; justify-content: space-between; font-size: 12.5px; }
.rh-hook-spec dt { color: var(--text-muted); }
.rh-hook-spec dd { margin: 0; text-align: right; }
.rh-hook-cta { justify-self: start; height: 38px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 13px; }

/* ---------------- create: hook picker ---------------- */

.rh-note-top { margin-bottom: 8px; }
.rh-hook-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding: 2px;
}
.rh-pick {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "glyph text" "chip chip";
  gap: 8px 10px;
  align-items: start;
  text-align: left;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid var(--divider);
  background: #11111106;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
html[data-theme=dark] .rh-pick { background: #ffffff08; }
.rh-pick:hover { border-color: #11111133; }
html[data-theme=dark] .rh-pick:hover { border-color: #ffffff33; }
.rh-pick.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.rh-pick-glyph { grid-area: glyph; width: 26px; height: 26px; display: grid; place-items: center; }
.rh-pick-glyph svg { width: 18px; height: 18px; }
.rh-pick-text { grid-area: text; display: grid; gap: 3px; }
.rh-pick-text strong { font-size: 13.5px; }
.rh-pick-text small { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.rh-pick .rh-hook-chip { grid-area: chip; justify-self: start; }

/* ---------------- create: hook config ---------------- */

.rh-hook-config { display: grid; gap: 14px; padding: 18px; border-radius: 18px; background: #11111106; border: 1px solid var(--divider); }
html[data-theme=dark] .rh-hook-config { background: #ffffff08; }
.rh-cfg-head { display: grid; gap: 4px; }
.rh-cfg-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.rh-val { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.rh-select { appearance: none; background-image: none; padding-right: 34px; cursor: pointer; }

.rh-range { width: 100%; accent-color: var(--accent); height: 26px; }

.rh-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #1111110d; border: 1px solid var(--divider); width: fit-content; }
html[data-theme=dark] .rh-seg { background: #ffffff0d; }
.rh-seg-btn {
  border: 0; background: transparent; font: inherit; font-size: 12.5px;
  color: var(--text-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer;
  text-transform: capitalize;
}
.rh-seg-btn.is-active { background: var(--bg-white); color: var(--text-primary); box-shadow: var(--shadow-soft); }

.rh-basket { display: grid; gap: 8px; }
.rh-basket-row { display: grid; grid-template-columns: 1fr 108px; gap: 8px; }
.rh-weight { min-height: 46px; }
.launchpad-field-note.is-bad { color: var(--danger); }

/* ---------------- create: routing preview ---------------- */

.rh-route-preview { padding: 18px 18px 20px; display: grid; gap: 12px; margin-top: 14px; }
.rh-route-title, .rh-aside-title { margin: 0; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; }
.rh-route-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-route-src, .rh-route-hook {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--divider); background: #11111108;
}
html[data-theme=dark] .rh-route-src, html[data-theme=dark] .rh-route-hook { background: #ffffff0d; }
.rh-route-hook { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.rh-route-arrow { width: 22px; height: 1px; background: var(--text-subtle); position: relative; }
.rh-route-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--text-subtle); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.rh-route-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rh-route-legs li { display: grid; grid-template-columns: minmax(90px, 1fr) 1fr 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.rh-route-leg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-route-leg-bar { height: 6px; border-radius: 999px; background: #11111114; overflow: hidden; }
html[data-theme=dark] .rh-route-leg-bar { background: #ffffff1a; }
.rh-route-leg-bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.rh-route-leg-w { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rh-route-foot { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.rh-meta-preview { margin-top: 12px; padding: 14px 16px; }
.rh-meta-preview summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 10px; }
.rh-meta-actions { margin-left: auto; display: flex; gap: 6px; }
.rh-mini-btn {
  font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--divider); background: transparent; color: var(--text-primary); cursor: pointer;
}
.rh-mini-btn:hover { background: #11111110; }
html[data-theme=dark] .rh-mini-btn:hover { background: #ffffff14; }
.rh-meta-preview pre {
  margin: 12px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.55; max-height: 320px; overflow: auto; color: var(--text-muted);
}

.rh-coin { width: 17px; height: 17px; display: inline-block; flex: none; }

/* ---------------- success ---------------- */

.rh-success { margin-top: 18px; padding: 28px; border-radius: 26px; background: var(--bg-white); border: 1px solid #ffffff94; }
html[data-theme=dark] .rh-success { border-color: #ffffff1f; }
.rh-success h2 { margin: 12px 0 0; font-size: 22px; }
.launchpad-success { display: grid; gap: 10px; justify-items: start; }
.launchpad-success-image { width: 68px; height: 68px; border-radius: 18px; overflow: hidden; background: #11111110; }
.launchpad-success-image img { width: 100%; height: 100%; object-fit: cover; }
.launchpad-success-copy { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.rh-success-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; width: 100%; }
.rh-success-spec dt { font-size: 11.5px; color: var(--text-muted); }
.rh-success-spec dd { margin: 3px 0 0; font-size: 14px; }
.launchpad-success-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.launchpad-success-actions .ui-btn { height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: 13.5px; cursor: pointer; }
.rh-success-note { margin: 6px 0 0; font-size: 12px; color: var(--text-subtle); line-height: 1.5; max-width: 70ch; }

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

.rh-token-page { display: grid; gap: 16px; }
.rh-token-shell { grid-template-columns: 1fr; }
@media (min-width: 900px) { .rh-token-shell { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } }
.rh-token-main { display: grid; gap: 22px; align-content: start; padding: 28px; }
.rh-token-head { display: flex; align-items: center; gap: 14px; }
.rh-token-logo { width: 58px; height: 58px; border-radius: 16px; overflow: hidden; background: #11111110; flex: none; }
.rh-token-logo img { width: 100%; height: 100%; object-fit: cover; }
.rh-token-id h1 { margin: 0; font-size: 26px; letter-spacing: -.015em; }
.rh-token-id p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.rh-token-head .rh-hook-chip { margin-left: auto; }
.rh-token-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; padding: 16px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.rh-token-stats dt { font-size: 11.5px; color: var(--text-muted); }
.rh-token-stats dd { margin: 4px 0 0; font-size: 19px; font-variant-numeric: tabular-nums; }
.rh-token-state { margin: 0; font-size: 13px; color: var(--text-muted); }
.rh-token-state.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--live-dot); margin-right: 8px; }
.rh-token-curve { display: grid; gap: 8px; }
.rh-token-curve-head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); }
.rh-token-section { display: grid; gap: 12px; }
.rh-token-section h2 { font-size: 16px; margin: 0; }
.rh-token-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.rh-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rh-table th { text-align: left; font-weight: 400; color: var(--text-muted); padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 11.5px; }
.rh-table td { padding: 9px 0; border-bottom: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.rh-table tr:last-child td { border-bottom: 0; }
.rh-token-aside { display: grid; gap: 14px; align-content: start; padding: 24px; }
.rh-token-aside .launchpad-token-preview { display: grid; gap: 12px; padding: 20px; }
.rh-trade { padding: 20px; display: grid; gap: 12px; }
.rh-trade-btn { height: 44px; border-radius: 14px; cursor: pointer; }

/* ---------------- search modal ---------------- */

/* [hidden] must always win: a display rule on a fixed overlay would otherwise
   leave an invisible sheet swallowing every click on the page. */
[hidden] { display: none !important; }

.rh-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: 12vh; opacity: 0; transition: opacity .16s var(--ease-out); pointer-events: none; }
.rh-modal.is-on { pointer-events: auto; }
.rh-modal.is-on { opacity: 1; }
.rh-modal-backdrop { position: absolute; inset: 0; background: #0000004d; backdrop-filter: blur(3px); }
.rh-modal-panel { position: relative; width: min(560px, calc(100vw - 32px)); border-radius: 22px; overflow: hidden; background: var(--bg-white); border: 1px solid var(--divider); }
.rh-modal-field { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.rh-modal-field input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text-primary); outline: none; }
.rh-modal-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.rh-modal-heading { margin: 8px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); }
.rh-modal-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 13px; text-decoration: none; color: var(--text-primary); }
.rh-modal-row:hover { background: #11111110; }
html[data-theme=dark] .rh-modal-row:hover { background: #ffffff12; }
.rh-modal-row img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; flex: none; }
.rh-modal-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-size: 11px; flex: none; }
.rh-modal-text { display: grid; gap: 2px; min-width: 0; }
.rh-modal-text strong { font-size: 13.5px; }
.rh-modal-text small { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-modal-mc { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rh-modal-empty { margin: 14px 10px; font-size: 13px; color: var(--text-muted); }

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

.rh-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 300; padding: 12px 18px; border-radius: 999px; font-size: 13px;
  background: var(--bg-white); border: 1px solid var(--divider);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  max-width: min(520px, calc(100vw - 32px)); text-align: center;
}
.rh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.nav-connect.is-connected { background: transparent; color: var(--text-primary); border: 1px solid var(--divider); }

/* ---------------- responsive ---------------- */

@media (max-width: 860px) {
  .rh-flow, .rh-stat-row, .rh-note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rh-hook-grid { grid-template-columns: 1fr; }
  .rh-token-main, .rh-token-aside { padding: 20px; }
}
@media (max-width: 560px) {
  .rh-flow, .rh-stat-row, .rh-note-grid { grid-template-columns: 1fr; }
  .rh-pitch { padding: 24px 18px; }
  .rh-hook-picker { grid-template-columns: 1fr; max-height: 300px; }
  .rh-basket-row { grid-template-columns: 1fr 92px; }
}

/* ---------------- brand mark ---------------- */

.rh-mark { width: 30px; height: 30px; color: var(--text-primary); flex: none; }
.rh-wordmark {
  font-family: var(--font-serif);
  font-size: 21px;
  letter-spacing: -.01em;
  line-height: 1;
  margin-left: -2px;
  color: var(--text-primary);
}
.rh-pitch-actions .ui-btn,
.launchpad-success-actions .ui-btn,
.rh-hook-cta { width: auto; min-width: 0; min-height: 0; flex: 0 0 auto; font-size: 14px; }

/* ---------------- mobile overflow guards ----------------
   The filter pills are wider than a phone viewport and, as a grid item with
   min-width:auto, they were widening the whole shell. Let each pill row scroll
   on its own instead. */

.bridge-shell, .launchpad-explore-shell, .launch-explore, .launch-explore-toolbar,
.launch-explore-section-head, .launch-explore-head-main, .rh-page, .rh-note { min-width: 0; }

.launch-explore-filters { min-width: 0; max-width: 100%; }
.launch-explore-filter-group { min-width: 0; max-width: 100%; }
.launch-explore-filter-group.tabs-pill .tabs-list {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.launch-explore-filter-group.tabs-pill .tabs-list::-webkit-scrollbar { display: none; }
.launch-explore-filter-group.tabs-pill .tabs-tab { flex: none; }

/* ---------------- transaction steps ---------------- */

.rh-steps-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rh-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.rh-step-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--text-subtle); flex: none; }
.rh-step.is-run .rh-step-dot { background: var(--accent); animation: rh-pulse 1.1s ease-in-out infinite; }
.rh-step.is-done { color: var(--text-primary); }
.rh-step.is-done .rh-step-dot { background: var(--success); }
.rh-step.is-fail { color: var(--danger); }
.rh-step.is-fail .rh-step-dot { background: var(--danger); }
@keyframes rh-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

.rh-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* ---------------- routing console ---------------- */

.rh-route-shell { grid-template-columns: 1fr; }
@media (min-width: 900px) { .rh-route-shell { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); } }
.rh-route-main { display: grid; gap: 22px; align-content: start; padding: 28px; }
.rh-route-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rh-route-list { display: grid; gap: 8px; }
.rh-route-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 15px; cursor: pointer; font: inherit; text-align: left;
  border: 1px solid var(--divider); background: #11111106; color: var(--text-primary);
}
html[data-theme=dark] .rh-route-item { background: #ffffff08; }
.rh-route-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.rh-route-item-logo { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: #11111112; flex: none; }
.rh-route-item-logo img { width: 100%; height: 100%; object-fit: cover; }
.rh-route-item-text { display: grid; gap: 2px; min-width: 0; }
.rh-route-item-text strong { font-size: 13.5px; }
.rh-route-item-text small { font-size: 11.5px; color: var(--text-muted); }
.rh-route-item .rh-hook-chip { margin-left: auto; }
.rh-route-form { display: grid; gap: 12px; }
@media (min-width: 620px) { .rh-route-form { grid-template-columns: 1fr 1fr; } }
.rh-quote { padding: 16px 18px; display: grid; gap: 12px; }
.rh-quote-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.rh-quote-spec dt { font-size: 11.5px; color: var(--text-muted); }
.rh-quote-spec dd { margin: 3px 0 0; font-size: 13.5px; }
.rh-table td.is-up { color: var(--success); text-align: right; }
.rh-table td.is-down { color: var(--danger); text-align: right; }
.rh-fixed-basket { display: flex; gap: 6px; flex-wrap: wrap; }
.rh-fixed-leg {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px;
  border-radius: 999px; border: 1px solid var(--divider); font-size: 12px;
}
.rh-fixed-leg small { color: var(--text-muted); }

/* ---------------- live market cards + chart ---------------- */

.rh-dex-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 999px; font-size: 10.5px; text-transform: capitalize;
  background: #111111d1; color: #fff;
}
.rh-card-route-dest.is-up, .rh-table td.is-up, .rh-token-stats dd.is-up { color: var(--success); }
.rh-card-route-dest.is-down, .rh-table td.is-down, .rh-token-stats dd.is-down { color: var(--danger); }
.rh-empty {
  grid-column: 1 / -1; display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: 30px 20px; border: 1px dashed var(--divider); border-radius: 20px; color: var(--text-muted); font-size: 13.5px;
}
.rh-empty p { margin: 0; }
.launch-explore-grid.is-empty { grid-template-columns: 1fr; }

.rh-token-shell-wide { display: grid; gap: 14px; }
.rh-token-shell-wide .rh-token-head {
  padding: 20px 24px; border-radius: 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-white); border: 1px solid var(--divider);
}
.rh-token-stats-inline {
  display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; border: 0; flex-wrap: wrap;
}
.rh-token-stats-inline dd { font-size: 16px; }
.rh-copy {
  font: inherit; font-size: 12.5px; color: var(--text-muted); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline dotted;
}
.rh-chart-card { padding: 18px 20px 20px; border-radius: 24px; display: grid; gap: 14px; background: var(--bg-white); border: 1px solid var(--divider); }
.rh-chart-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rh-chart-head h2 { margin: 0; font-size: 16px; }
.rh-chart-head .rh-seg { margin-left: auto; }
.rh-chart-frame { position: relative; width: 100%; height: 560px; border-radius: 16px; overflow: hidden; background: #0b0b0b; }
.rh-chart-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rh-token-cols { display: grid; gap: 14px; }
@media (min-width: 900px) { .rh-token-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .rh-chart-frame { height: 420px; }
  .rh-token-stats-inline { gap: 14px; margin-left: 0; }
}

/* ---------------- home ---------------- */

.rh-home { display: grid; gap: 16px; }

.rh-hero {
  display: grid; gap: 28px; padding: 40px 34px; border-radius: 30px;
  background: var(--bg-white); border: 1px solid var(--divider);
}
@media (min-width: 940px) { .rh-hero { padding: 56px 40px 52px; } }
.rh-hero-main { display: grid; gap: 14px; }
.rh-hero h1 {
  font-family: var(--font-serif); font-weight: 400; margin: 2px 0 0;
  font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -.02em;
}
.rh-hero h1 em { font-style: italic; color: var(--accent); }
.rh-hero-copy { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.5; max-width: 46ch; }
.rh-hero-panel { padding: 22px; display: grid; gap: 14px; }

.rh-section-head { display: grid; gap: 4px; margin-bottom: 4px; }
.rh-section-head h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.rh-section-head p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

.rh-flow-section, .rh-assets, .rh-hooks-preview, .rh-cta {
  padding: 28px 30px 30px; border-radius: 28px;
  background: var(--bg-white); border: 1px solid var(--divider);
  display: grid; gap: 18px;
}
.rh-cta { justify-items: start; gap: 10px; padding: 34px 30px 36px; }
.rh-cta h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); }
.rh-cta p { margin: 0; color: var(--text-muted); font-size: 14.5px; max-width: 60ch; }

/* market tables */
.rh-market { display: grid; gap: 8px 40px; align-items: start; }
@media (min-width: 780px) { .rh-market { grid-template-columns: 1fr 1fr; } }
.rh-mkt { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rh-mkt col.rh-col-asset { width: auto; }
.rh-mkt th {
  text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-subtle); padding: 0 0 8px;
  border-bottom: 1px solid var(--divider);
}
.rh-mkt th:nth-child(2), .rh-mkt th:nth-child(3) { text-align: right; }
.rh-mkt td { padding: 11px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.rh-mkt tr:last-child td { border-bottom: 0; }
.rh-mkt tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.rh-mkt-asset { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-mkt-asset b { font-weight: 500; }
.rh-mkt-asset span { font-size: 11.5px; color: var(--text-subtle); margin-left: 8px; }
.rh-mkt-price, .rh-mkt-move { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-mkt th:nth-child(2), .rh-mkt td:nth-child(2) { width: 96px; }
.rh-mkt th:nth-child(3), .rh-mkt td:nth-child(3) { width: 74px; }
.rh-mkt-price { color: var(--text-primary); }
.rh-mkt-move { font-size: 12px; width: 72px; }
.rh-mkt-move.is-up { color: var(--success); }
.rh-mkt-move.is-down { color: var(--danger); }
.rh-mkt-move:empty::after, .rh-mkt-move.is-none { color: var(--text-subtle); }

/* hook index */
.rh-hook-index {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0 32px;
}
@media (min-width: 720px) { .rh-hook-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rh-hook-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rh-hook-index li { border-top: 1px solid var(--divider); }
.rh-hook-index a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 14px 0;
  text-decoration: none;
  color: var(--text-primary);
}
.rh-hi-n { grid-row: span 2; font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; padding-top: 2px; }
.rh-hi-name { font-size: 14.5px; font-weight: 500; }
.rh-hi-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.rh-hook-index a:hover .rh-hi-name { color: var(--accent); }
.rh-hook-index a:hover .rh-hi-n { color: var(--accent); }

@media (max-width: 640px) {
  .rh-hero { padding: 28px 20px; }
  .rh-flow-section, .rh-assets, .rh-hooks-preview, .rh-cta { padding: 22px 18px 24px; }
}

/* ---------------- page backdrop ---------------- */
/* The glass plate sits behind the whole top of the site — nav included —
   and fades into the page background before the content sections start. */

.bridge-page { position: relative; }
.bridge-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 920px;
  z-index: 0;
  pointer-events: none;
  /* the plate itself, edge to edge. Nudged up so its own frame edge sits
     above the viewport instead of cutting a hard line under the nav. */
  background: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -110px;
  -webkit-mask-image: linear-gradient(#000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 68%, transparent 100%);
}
.bridge-page::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 920px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #05080e33 0%, #05080e1f 26%, #05080e70 62%, #05080ee6 85%, var(--bg-page) 100%);
}
html[data-theme=light] .bridge-page::after {
  background: linear-gradient(180deg, #ffffff4d 0%, #ffffff3d 26%, #ffffff8f 62%, #fffffff0 85%, var(--bg-page) 100%);
}
.top-chrome, .page-transition, .footer-reveal { position: relative; z-index: 1; }

/* hero card turns into glass so the plate behind it reads through */

.rh-hero {
  background: #0a1220a1;
  border-color: #ffffff1f;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
html[data-theme=light] .rh-hero { background: #ffffff9e; border-color: #ffffffd9; }
.rh-hero h1 { color: var(--text-primary); }
.rh-hero-panel { background: #0a121fa6; border-color: #ffffff1f; }
html[data-theme=light] .rh-hero-panel { background: #ffffffcc; border-color: #ffffffe6; }

@media (max-width: 720px) {
  .bridge-page::before, .bridge-page::after { height: 640px; }
}

/* ---------------- nav: floating pill over the plate ----------------
   The inherited nav is a full-width glass band with a baked SVG
   displacement filter. Over a photograph that smears into a grey stripe,
   so it becomes a plain floating pill instead. */

.nav { height: auto; padding: 14px 0 0; }
.nav-glass,
.nav-glass.liquid-glass {
  width: min(1100px, calc(100% - 32px)) !important;
  margin: 0 auto;
  border-radius: 999px !important;
  background: #0a1119a6 !important;
  border: 1px solid #ffffff24 !important;
  box-shadow: 0 10px 34px #05080e59 !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  overflow: hidden;
}
html[data-theme=light] .nav-glass,
html[data-theme=light] .nav-glass.liquid-glass {
  background: #ffffffb8 !important;
  border-color: #ffffffe6 !important;
  box-shadow: 0 10px 30px #1111111a !important;
}
.nav-glass .liquid-glass-svg { display: none; }
.nav-glass.liquid-glass::after { background: linear-gradient(#ffffff14 0%, transparent 60%) !important; }
.nav-inner { height: 58px; max-width: none; padding: 0 12px 0 16px; }
.nav-product-link { color: #d7e3f2; }
html[data-theme=light] .nav-product-link { color: var(--text-muted); }
.nav-product-link.is-active { color: #fff; }
html[data-theme=light] .nav-product-link.is-active { color: var(--text-primary); }
.nav-product-indicator { background: #ffffff26; }
html[data-theme=light] .nav-product-indicator { background: #11111114; }
.rh-wordmark { color: #fff; }
html[data-theme=light] .rh-wordmark { color: var(--text-primary); }
.nav-theme { color: #e6eefb; border-color: #ffffff2e; }
html[data-theme=light] .nav-theme { color: var(--text-primary); }

/* ---------------- X link in the nav ---------------- */

.rh-nav-x {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #dfe9f7;
  border: 1px solid #ffffff26;
  background: #ffffff0f;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.rh-nav-x:hover { background: #ffffff26; color: #fff; }