@import "foundations.css";
@import "core-components.css";
@import "music-player-poc.css";
@import "account-onboarding.css";
@import "shots-position-sheet.css";

/* Legends v22b page composition. .legends-row/.legends-rank/.legends-metric
   are built against the fetched Card/Legend node (Figma 179:809) — see
   docs/design-system/README.md's component map. Kept page-scoped rather than
   promoted into core-components.css since the card is Legends-only. */
.content.legends-page {
  width: 100%;
  max-width: var(--mid);
  margin-inline: auto;
  padding: 0 var(--space-22) var(--space-32);
  gap: 0;
  overflow: visible;
}

.legends-heading {
  padding-block: var(--space-24) var(--space-12);
}

.legends-heading h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-heading-page);
  font-weight: var(--text-heading-page--weight);
  line-height: var(--text-heading-page--line-height);
  letter-spacing: var(--text-heading-page--letter-spacing);
}

.legends-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.legends-tabs {
  display: flex;
  gap: var(--space-6);
}

/* Phone controls share one row without changing their typography. */
@media (max-width: 560px) {
  .legends-heading {
    display: none;
  }

  .content.legends-page {
    padding-inline: var(--space-16);
  }

  .legends-controls {
    flex-wrap: nowrap;
    gap: var(--space-4);
  }

  .legends-tabs,
  .legends-controls .legends-sort {
    gap: var(--space-4);
  }

  .legends-controls .mx-tab {
    padding-inline: var(--space-4);
    gap: var(--space-4);
  }
}

@media (max-width: 360px) {
  .legends-tabs svg {
    display: none;
  }
}

/* The app rail becomes an overlay below 1040px, but Legends retains the
   reference layout from 561px up: its own 28px heading and all four controls
   remain visible. Keep the audio and Settings affordances without the mobile
   bar title taking a row above the page. */
@media (min-width: 561px) and (max-width: 1039px) {
  .app-shell:has(.legends-page) .main-area {
    padding-top: 0;
  }

  .app-shell:has(.legends-page) .mobile-bar {
    top: var(--space-22);
    height: var(--size-icon-md);
    padding: 0 var(--space-16);
    background: transparent;
    border: 0;
    backdrop-filter: none;
    pointer-events: none;
  }

  .app-shell:has(.legends-page) .mobile-bar-title {
    display: none;
  }

  .app-shell:has(.legends-page) .music-player-header-button {
    margin-left: auto;
    pointer-events: auto;
  }

  .app-shell:has(.legends-page) .mobile-account-menu {
    margin-left: 0;
    pointer-events: auto;
  }
}

.legends-tabs svg {
  width: var(--size-icon-glyph-15);
  height: var(--size-icon-glyph-15);
  stroke: currentColor;
  stroke-width: 1.6;
  /* v19 icon container stroke */
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legends-tabs button:disabled {
  cursor: not-allowed;
}

.legends-refresh-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-16) 0 var(--space-12);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.legends-refresh-countdown-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moonx-blue-high);
  box-shadow: 0 0 10px rgba(127, 182, 255, 0.8);
  animation: legends-refresh-pulse 1.8s ease-in-out infinite;
}

.legends-refresh-countdown b {
  color: var(--color-foreground);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

@keyframes legends-refresh-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .legends-refresh-countdown-dot {
    animation: none;
  }
}

.legends-sort {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
  margin-left: auto;
}

/* Toggle (Figma node 183:110) moved to core-components.css as `.mx-toggle`
   now that a second instance (Feed's All/Moonshots) exists — this page uses
   that shared component, not a page-local class. */

.legends-list {
  display: grid;
  gap: var(--space-8);
}

/* Friends' empty state — v19b's `.zero` (same recipe as the Shots page's
   own build, `.shots-page .shots-zero*`): a dashed frame, a tinted icon
   well, then a two-tier CTA row instead of the plain bordered-box
   `.empty-state` (which the leaderboard's own not-yet-ranked state
   keeps, unchanged — this is Friends-only). */
.legends-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-12);
  padding: var(--space-32) var(--space-20) 36px;
  border: 1px dashed var(--moonx-line-strong);
  border-radius: var(--radius-20);
  text-align: center;
}

.legends-zero-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--border-hairline) solid rgba(45, 123, 255, 0.3);
  border-radius: var(--radius-16);
  background: rgba(45, 123, 255, 0.1);
  color: var(--moonx-blue-high);
}

.legends-zero-icon svg {
  width: var(--size-icon-glyph-26);
  height: var(--size-icon-glyph-26);
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.legends-zero b {
  margin-top: var(--space-16);
  font-size: var(--text-heading-sub);
  font-weight: var(--text-heading-sub--weight);
  letter-spacing: -0.02em;
}

.legends-zero p {
  max-width: 40ch;
  margin: var(--space-8) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-default);
  line-height: var(--text-body-default--line-height);
}

.legends-zero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.legends-own {
  margin-top: var(--space-14);
}

.legends-own>h2 {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-label-wide);
  font-weight: var(--text-label-wide--weight);
  letter-spacing: var(--text-label-wide--letter-spacing);
  text-transform: uppercase;
}

.legends-row {
  display: grid;
  /* Direct v22b `.lb`: rank / 44px avatar / identity / metric. */
  grid-template-columns: var(--space-22) 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-16);
  background: var(--color-surface);
  margin-bottom: var(--space-8);
}

.legends-row--button {
  width: 100%;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.legends-row--button:hover {
  border-color: var(--moonx-line-strong);
  background: var(--color-surface-raised);
}

.legends-row--button.legends-row--own:hover {
  background: var(--legend-own-background-hover);
}

/* "You are a tint, not a highlight" — Card/Legend rank=You (Figma 179:72):
   the same row washed in primary 20% -> 6%, primary edge, never a flat mix. */
.legends-row--own {
  background: var(--legend-own-background);
  border-color: var(--legend-own-border);
}

/* Rank is a colour, not a decoration (Card/Legend, Figma 179:809): first is
   amber, second is link blue, third is slate-300 — three metals, then every
   other rank (and unranked/You) falls back to text/secondary. */
.legends-rank {
  width: var(--space-22);
  text-align: center;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.3px;
}

.legends-rank--1 {
  color: var(--moonx-amber);
}

.legends-rank--2 {
  color: var(--moonx-blue-high);
}

.legends-rank--3 {
  color: var(--slate-300);
}

/* Avatar — Figma node 177:17 (Card/Legend's own instance, 179:*). MD size,
   38/radius-12. An uploaded picture fills the box with no background; a
   fund without one shows a fallback emoji on a gradient tone
   (FundAvatarHelper). Tones below are the fetched Figma gradients, not the flat
   solid `.feed-page .av.v1..v5` a later cascade layer drifted onto (see
   docs/design-system/README.md's Avatar entry). */
.legends-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-lg);
  font-size: 18px;
}

.legends-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.legends-avatar--friend {
  box-shadow: 0 0 0 var(--border-focus) var(--moonx-green);
}

.legends-avatar--v1 {
  background: var(--legend-avatar-v1);
}

.legends-avatar--v2 {
  background: var(--legend-avatar-v2);
}

.legends-avatar--v3 {
  background: var(--legend-avatar-v3);
}

.legends-avatar--v4 {
  background: var(--legend-avatar-v4);
}

.legends-avatar--v5 {
  background: var(--legend-avatar-v5);
}

.legends-identity {
  min-width: 0;
}

.legends-identity h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.legends-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
}

/* v22b fundRow: the role and metric labels stay muted, while the CEO's
   identity and the opposite ranked value are blue, bold emphasis. */
.legends-row-meta__label {
  color: var(--moonx-text-secondary);
}

.legends-row-meta__accent {
  color: var(--moonx-blue-high);
  font-weight: 800;
}

.legends-row-tag {
  flex: none;
  padding: var(--space-4) var(--space-8);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
}

.legends-row-tag--you {
  color: var(--moonx-blue-high);
  border-color: var(--legend-info-tag-border);
  background: var(--legend-info-background);
}

.legends-row-tag--friend,
.legends-row-tag--invited {
  color: var(--moonx-green);
  border-color: var(--legend-win-tag-border);
  background: var(--legend-win-background);
}

/* Multiple, Card/Legend's own pastille (Figma 178:2/178:4) — tinted, never
   filled: a solid gradient means pressable, a tint means it's a number.
   Empty (unranked/not-yet-ranked) drops the tint for card-2 grey. */
.legends-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  border: var(--border-hairline) solid var(--legend-info-border);
  background: var(--legend-info-background);
  color: var(--moonx-blue-high);
  font-family: var(--font-display);
  font-size: var(--text-multiple-inline);
  font-weight: 800;
  line-height: var(--text-multiple-inline--line-height);
  letter-spacing: var(--text-multiple-inline--letter-spacing);
  white-space: nowrap;
}

.legends-metric--empty {
  border-color: transparent;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
}

/* v22b's final `.lb .mult.m` rule: an achieved Best moon is value won,
   not an action, so it uses mint. Winnings stays blue and an absent value
   remains neutral. The colour expresses the metric's meaning, never its
   numeric magnitude (a 2x and a 340x are both achieved moons). */
.legends-metric--moon:not(.legends-metric--empty) {
  border-color: var(--legend-win-border);
  background: var(--legend-win-background);
  color: var(--moonx-green);
}

.legends-fund-sheet {
  align-items: stretch;
  gap: var(--space-12);
  max-width: 520px;
  background: var(--legend-modal-background);
  border-color: var(--legend-modal-border);
}

.legends-fund-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--space-14);
}

.legends-fund-sheet__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: var(--radius-20);
  background: var(--color-surface-raised);
}

.legends-fund-sheet__avatar {
  font-size: 28px;
}

/* An uploaded fund picture fills the whole box; the fallback is an emoji. */
.legends-fund-sheet__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legends-fund-sheet__identity {
  flex: 1;
  min-width: 0;
}

.legends-fund-sheet__identity>b {
  display: block;
  font-family: var(--font-body);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.legends-fund-sheet__byline {
  display: block;
  margin-top: var(--space-4);
  color: var(--moonx-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.legends-fund-sheet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.legends-fund-sheet__follow-form {
  width: 100%;
}

.legends-fund-sheet__follow,
.legends-fund-sheet__close {
  width: 100%;
  padding: var(--space-16);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-16);
  background: transparent;
  color: var(--moonx-text);
  font-size: var(--text-body-strong);
  font-weight: var(--text-body-strong--weight);
  text-align: center;
}

.legends-fund-sheet__follow:hover,
.legends-fund-sheet__close:hover {
  border-color: var(--moonx-text-secondary);
  background: var(--color-surface-raised);
}

.legends-fund-sheet__chase {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: var(--border-hairline) solid var(--legend-info-strong-border);
  border-radius: var(--radius-16);
  background: linear-gradient(115deg, var(--legend-info-background), transparent 72%);
}

.legends-fund-sheet__chase span {
  flex: 1;
  min-width: 0;
}

.legends-fund-sheet__chase em,
.legends-fund-sheet__chase small {
  color: var(--color-text-secondary);
  font-size: var(--text-label-micro);
  font-style: normal;
  font-weight: var(--text-label-micro--weight);
  letter-spacing: var(--text-label-micro--letter-spacing);
  line-height: var(--text-label-micro--line-height);
  text-transform: uppercase;
}

.legends-fund-sheet__chase b {
  display: block;
  margin-top: var(--space-8);
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: var(--text-number-xl);
  font-weight: var(--text-number-xl--weight);
  line-height: var(--text-number-xl--line-height);
}

.legends-fund-sheet__chase small {
  max-width: 38%;
  text-align: right;
}

.legends-fund-sheet__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
}

.legends-fund-sheet__stats div {
  min-width: 0;
  padding: var(--space-12);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-16);
  background: var(--color-surface);
  text-align: center;
}

.legends-fund-sheet__stats dd {
  margin: 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.legends-fund-sheet__stats dt {
  margin-top: var(--space-8);
  color: var(--moonx-text-secondary);
  font-size: var(--text-label-micro);
  font-weight: var(--text-label-micro--weight);
  letter-spacing: var(--text-label-micro--letter-spacing);
  text-transform: uppercase;
}

.legends-fund-sheet__stats div:last-child dd {
  color: var(--moonx-green);
}

.legends-fund-sheet__shots h3 {
  margin: var(--space-6) 0 var(--space-12);
  color: var(--moonx-text-secondary);
  font-size: var(--text-label-micro);
  font-weight: var(--text-label-micro--weight);
  letter-spacing: var(--text-label-micro--letter-spacing);
  text-transform: uppercase;
}

.legends-fund-sheet__shot-list {
  display: grid;
  gap: var(--space-12);
}

.legends-fund-sheet__shot {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-16);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-16);
  background: var(--color-surface);
}

.legends-fund-sheet__shot>div {
  min-width: 0;
}

.legends-fund-sheet__shot b,
.legends-fund-sheet__shot span {
  display: block;
}

.legends-fund-sheet__shot b {
  overflow-wrap: anywhere;
  font-size: var(--text-body-small);
  font-weight: var(--text-body-strong--weight);
}

.legends-fund-sheet__shot div>span,
.legends-fund-sheet__fine {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-small);
  line-height: var(--text-body-small--line-height);
}

.legends-fund-sheet__shot-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
}

.legends-fund-sheet__shot-avatar {
  font-size: 20px;
}

.legends-fund-sheet__shot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.legends-fund-sheet__outcome {
  display: inline-flex !important;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--legend-info-background);
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
}

.legends-fund-sheet__multiple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-12);
  border: var(--border-hairline) solid var(--legend-win-shot-border);
  border-radius: var(--radius-full);
  background: var(--legend-win-background);
  color: var(--moonx-green);
  font-family: var(--font-display);
  font-size: var(--text-multiple-inline);
  line-height: var(--text-multiple-inline--line-height);
  letter-spacing: var(--text-multiple-inline--letter-spacing);
  white-space: nowrap;
}



.hosted-runtime-maintenance-banner {
  padding: 0.75rem 1rem;
  color: var(--yw);
  background: color-mix(in srgb, var(--yw) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--yw) 35%, transparent);
  text-align: center;
  font-size: 0.875rem;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 319px) {
  dialog.mx-modal {
    min-width: 320px;
    margin-inline: 0;
  }
}

input,
button,
textarea,
select {
  -webkit-font-smoothing: inherit;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--color-background);
  color: var(--color-foreground);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  font-weight: 300;
}

a,
button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ── brand ────────────────────────────────────────────────────── */
.brand {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-foreground);
  gap: 6px;
}

.moonx-wordmark {
  display: block;
  width: auto;
  height: 1.25em;
  overflow: visible;
  fill: currentColor;
}

.moonx-wordmark text {
  font-family: var(--font-brand);
  font-size: 26px;
  letter-spacing: 0.06em;
}

/* ── step shell ───────────────────────────────────────────────── */
.step-shell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 75px 1fr;
  background: var(--color-background);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-6) var(--page-padding-mobile);
}

@media (min-width: 768px) {
  .topbar {
    padding-inline: var(--page-padding-desktop);
  }
}

/* ── progress ─────────────────────────────────────────────────── */
.progress {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 120px;
  height: 2px;
}

.progress-segment {
  height: 2px;
  width: 18px;
  border-radius: var(--radius-full);
  background: var(--color-foreground-500);
  opacity: 0.9;
  transition: width .2s, background-color .2s;
}

.progress-segment.is-active {
  width: 32px;
  background: var(--color-primary);
  opacity: 1;
}

@media (max-width: 720px) {
  .progress {
    width: auto;
  }
}

/* ── step area + card ─────────────────────────────────────────── */
.step-area {
  display: flex;
  justify-content: center;
  padding: 3.5rem var(--page-padding-mobile) 5rem;
}

@media (min-width: 768px) {
  .step-area {
    padding-inline: var(--page-padding-desktop);
  }
}

.step-area.pt-12 {
  padding-top: var(--spacing-12);
}

.card {
  width: min(620px, 100%);
  animation: fade-up .4s cubic-bezier(.4, 0, .2, 1);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .card {
    width: 100%;
  }
}

@media (max-width: 820px) {
  .step-shell {
    grid-template-rows: 70px 1fr;
  }

  .step-area {
    padding: 3rem clamp(1.25rem, 4vw, 2rem) 5rem;
  }

  .step-area.pt-12 {
    padding-top: 3rem;
  }

  .card {
    width: min(100%, 704px);
  }
}

/* ── step kicker + headings ───────────────────────────────────── */
.step-kicker {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.375rem;
}

.step-number {
  color: var(--color-primary);
}

.hero-title {
  max-width: 620px;
  margin: var(--spacing-2) 0 0;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 11vw, var(--text-hero));
  font-style: normal;
  font-weight: 500;
  letter-spacing: var(--text-hero--letter-spacing);
  line-height: 0.98;
}

.lead {
  max-width: 620px;
  margin: var(--spacing-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.is-accent {
  color: var(--color-primary);
}

/* ── actions / buttons ────────────────────────────────────────── */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 48px;
  margin-top: var(--spacing-8);
}

.actions.justify-end {
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-width: 91px;
  min-height: 40px;
  border-radius: var(--radius-md);
  padding: 0.6875rem 1.125rem;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

.btn:disabled:hover,
.btn.disabled:hover {
  transform: none;
}

/* .btn-primary and .btn-secondary retired — every call site now uses
   .mx-btn--solid / .mx-btn--ghost (core-components.css). .btn itself stays:
   still used by a few unmigrated one-offs (.hosted-provider-danger,
   .hosted-wallet-lock-button, the mobile wizard back icon's .btn-ghost
   below, funds/edit.html.erb's .btn-gh/.btn-pr). */

.hosted-wizard .btn-ghost {
  padding: 12px 24px;
  width: min(156px, 100%);
  background: var(--color-bg-500);
  color: var(--color-primary);
}

.hosted-wizard .btn-ghost:hover {
  background: #17191f;
}

.btn.min-w-48 {
  min-width: 12rem;
}

@media (max-width: 720px) {
  .actions {
    align-items: stretch;
  }

  /* Scoped to .actions — this was accidentally a bare `.btn` rule before
     migration, which happened to be harmless only because `.btn` had no
     other users at this breakpoint. `.mx-btn` is used far more widely now
     (Money, Markets, Tabs, auth), so leaving it unscoped would stretch
     buttons well outside this button-row context. */
  .actions .mx-btn {
    flex: 1 1 auto;
  }
}

/* ── auth screens · onboarding v2 ────────────────────────────── */
.auth-shell {
  display: block;
  min-height: 100dvh;
}

.auth-shell .topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 64px;
  padding: 0 26px;
  background: rgb(3 5 12 / 0.86);
  border-bottom: 1px solid rgb(150 195 255 / 0.10);
  backdrop-filter: blur(14px);
}

.auth-shell .brand .moonx-wordmark {
  width: 92px;
  height: auto;
}

@media (min-width: 768px) {
  .auth-shell .brand .moonx-wordmark {
    width: 184px;
  }
}

.auth-area {
  min-height: 100dvh;
  align-items: center;
  padding: 64px 26px 104px;
}

.auth-card {
  width: min(100%, 620px);
}

.auth-builder-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-16);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: rgb(10 14 26 / 0.85);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.auth-builder-badge svg {
  width: var(--size-icon-glyph-20);
  height: var(--size-icon-glyph-20);
  fill: currentcolor;
}

.auth-builder-badge strong {
  color: var(--moonx-text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0;
}

.auth-builder-badge+.step-kicker {
  margin-top: var(--space-24);
}

.auth-title {
  width: 100%;
  margin-top: 12px;
  color: var(--moonx-text);
  font-family: var(--font-body);
  font-size: clamp(30px, 3.4vw, 40px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.auth-shell:has(#signin-title) .auth-card {
  width: min(100%, 620px);
}

.auth-shell:has(#signin-title) .auth-title {
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.04;
}

.auth-title-accent {
  color: var(--moonx-green);
}

.auth-lead {
  max-width: 44ch;
  margin-top: 13px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.62;
}

.auth-form {
  display: grid;
  gap: 0;
  width: min(100%, 620px);
  margin-top: 22px;
}

.auth-fields {
  display: grid;
  gap: 0;
}

.auth-field {
  display: block;
  width: 100%;
  margin-top: 22px;
}

.auth-field:first-child {
  margin-top: 0;
}

.auth-field .mx-input--md {
  background: var(--moonx-card);
}

.auth-terms {
  align-items: flex-start;
  gap: 11px;
  margin-top: 22px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

.auth-terms .checkbox {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-color: var(--moonx-line-strong);
  border-radius: 5px;
  background: var(--moonx-card);
}

.auth-terms a {
  color: var(--moonx-blue-high);
  font-weight: 700;
  text-underline-offset: 2px;
}

.auth-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  margin-top: 22px;
}

.auth-cta.mx-btn {
  height: auto;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgb(45 123 255 / 0.55);
  border-radius: 12px;
  background: var(--moonx-raised);
  box-shadow: none;
  color: var(--moonx-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.auth-cta.mx-btn:hover:not(:disabled) {
  border-color: rgb(45 123 255 / 0.78);
  background: rgb(45 123 255 / 0.28);
  box-shadow: none;
}

.auth-cta.mx-btn.mx-btn--ghost {
  border-color: var(--moonx-line-strong);
  background: var(--moonx-card);
}

.auth-cta.mx-btn.mx-btn--ghost:hover:not(:disabled) {
  border-color: rgb(150 195 255 / 0.44);
  background: var(--moonx-raised);
}

/* The welcome screen sits directly on the starfield, so its secondary
   action needs the same opaque surface as the auth actions. */
.welcome-back.mx-btn--ghost {
  background: var(--moonx-card);
}

.auth-cta.mx-btn:disabled {
  border-color: var(--moonx-line);
  background: var(--moonx-card);
  color: var(--moonx-text-secondary);
  box-shadow: none;
}

.auth-passkey {
  display: contents;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 13px 0;
}

.auth-divider span {
  height: 1px;
  flex: 1 1 0;
  background: var(--moonx-line);
}

.auth-divider em {
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

.auth-modal-backdrop {
  z-index: 90;
  background: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(1.5px);
}

.auth-dialog {
  position: relative;
  width: min(460px, 100%);
  border: 1px solid #2a2d34;
  border-radius: 12px;
  background: #0e0f11;
  font-family: var(--font-body);
  overflow: hidden;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.38);
}

.auth-dialog-content {
  display: grid;
  justify-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
  text-align: center;
}

.auth-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #1f2126;
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  font-size: 24px;
  line-height: 1;
  z-index: 1;
}

.auth-dialog-close:hover {
  background: #1a1b1f;
}

.auth-dialog-icon {
  display: inline-flex;
  width: 96px;
  height: 96px;
  color: var(--color-primary);
}

.auth-dialog-icon svg {
  width: 100%;
  height: 100%;
}

.auth-dialog-copy {
  display: grid;
  gap: var(--spacing-2);
  width: 100%;
}

.auth-dialog-title {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-heading-page);
  font-style: normal;
  font-weight: var(--text-heading-page--weight);
  line-height: var(--text-heading-page--line-height);
  letter-spacing: var(--text-heading-page--letter-spacing);
}

.auth-dialog-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-default);
  font-weight: var(--text-body-default--weight);
  line-height: var(--text-body-default--line-height);
}

.auth-dialog-description strong {
  color: var(--color-foreground);
  font-weight: 600;
}

.auth-dialog-button {
  min-height: 40px;
}

@media (max-width: 860px) {
  .auth-area {
    padding: 64px 20px 108px;
  }

  .auth-shell .topbar {
    padding-inline: 18px;
  }

  .auth-shell .auth-title,
  .auth-shell:has(#signin-title) .auth-title {
    font-size: 29px;
    line-height: 1.06;
  }
}

/* ── banner ───────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 28px;
  margin-top: var(--spacing-8);
  border-radius: var(--radius-sm);
  padding: 0.4375rem 0.625rem;
  background: rgb(110 231 183 / 0.1);
  color: var(--color-sentiment-up);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

.polymarket-wallet-success {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-5);
  border: 1px solid color-mix(in srgb, var(--gn) 55%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--gn) 14%, transparent);
  color: var(--gn);
}

.icon-btn {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

/* ── field (bordered box around label + input) ────────────────── */
.field {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3) 0.875rem;
  background: var(--color-surface-raised);
}

.field:focus-within {
  border-color: var(--color-primary);
}

.field-label,
.section-label,
.tiny-step {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 0.875rem;
  text-transform: uppercase;
}

.section-label.is-accent {
  color: var(--color-primary);
}

.field-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.field-input:focus,
.field-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.field-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.hosted-wallet-fields {
  display: grid;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
}

.hosted-wallet-address-value {
  overflow-wrap: anywhere;
}

.hosted-wallet-address-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.hosted-wallet-address-row .field-input {
  flex: 1;
}

.hosted-wallet-password-hint,
.hosted-wallet-password-error {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.hosted-wallet-password-hint {
  color: var(--color-text-muted);
}

.hosted-wallet-password-error {
  color: var(--color-danger-300);
}

.hosted-wallet-password-error--center {
  margin-top: 6px;
  text-align: center;
}

.field:has(.field-input[aria-invalid="true"]) {
  border-color: var(--color-danger-300);
}

.hosted-wallet-complete {
  color: var(--color-text-muted);
}

.hosted-wallet-verified {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  color: var(--color-foreground);
  font-weight: 600;
}

.hosted-wallet-verified span {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

/* Stands in for the wallet card between the PIN being set and the next page
   painting, so the step never shows an empty surface. */
.hosted-wallet-handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-6) 0;
}

/* Same spinner as the Polymarket step this hands off to, so the wait reads as
   one continuous load rather than two different ones. */
.hosted-wallet-handoff-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgb(139 157 255 / 25%);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: hosted-runtime-progress-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hosted-wallet-handoff-spinner {
    animation-duration: 2.4s;
  }
}

.hosted-wallet-handoff-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.hosted-wallet-completion-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -12px 0 -8px;
}

.hosted-wallet-completion-graphic .opf-hop {
  margin: 0;
}

.hosted-wallet-success-card {
  box-sizing: border-box;
  width: min(580px, 100%);
  margin: 8px auto 0;
  padding: 36px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 18px 48px rgb(0 0 0 / .22);
  text-align: center;
}

.hosted-wallet-success-card .hosted-wizard-title {
  margin: 0 0 8px;
}

.hosted-wallet-success-card .hosted-wizard-subtitle {
  max-width: 420px;
  margin: 0 auto;
}

.hosted-wallet-success-list {
  display: grid;
  width: fit-content;
  gap: 10px;
  margin: 28px auto 0;
  text-align: left;
}

/* ── hosted onboarding · wallet backup ───────────────────────── */
.hosted-wallet-address {
  margin: 34px 0 30px;
  padding: 16px 18px;
  border: 1px solid #1b1e25;
  border-radius: 10px;
  background: #101216;
}

.hosted-wallet-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: #aeb8dd;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hosted-wallet-security-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-primary);
}

.hosted-wallet-surface {
  margin-top: 30px;
  padding: 26px;
  border: 1px solid #252a35;
  border-radius: 16px;
  background: linear-gradient(145deg, #12151b, #0e1014);
  box-shadow: 0 18px 45px rgb(0 0 0 / .18);
}

.hosted-wallet-surface .hosted-wallet-address {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid #252a35;
  border-radius: 0;
  background: transparent;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) {
  padding-block: 20px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-address {
  margin-bottom: 18px;
  padding-bottom: 16px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-password-confirmation {
  margin-top: 12px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-download {
  margin-top: 18px;
}

.hosted-wallet-surface:has([data-hosted-wallet-target="confirmation"]:not([hidden])) .hosted-wallet-download-note {
  margin-top: 5px;
}

/* Use the exact signing-dialog width once wallet setup switches to PIN entry. */
.hosted-wallet-surface:has([data-hosted-wallet-target="pinFields"]:not([hidden])) {
  width: min(420px, 100%);
  margin-inline: auto;
  padding: 24px;
}


/* PIN Sheet's field + keypad (Figma 367:195, PIN Dots 303:154, Keypad
   365:172) — the shared innards every PIN dialog renders via
   `shared/_pin_entry`. The sheet shell (`.mx-modal`, `.mx-pin-sheet`) lives
   in core-components.css; this is only the field/keypad component itself,
   kept here because it predates the shell split.

   Two well shapes, not one: Empty reuses the plain Input/MD shape (node
   204:57) since there's nothing yet to make room for; once a digit lands
   the well widens to the PIN shell (gap-6/px-18/py-16/radius-16) to fit
   the PIN Dots row and trailing Micro Button (node 299:16). `:has()`
   switches between them off the display's own `:empty` state, so no JS
   needs to toggle a class for it. */
.mx-pin-well {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  min-height: 54px;
  padding: var(--space-16) var(--space-18);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-16);
  background: var(--moonx-well);
  box-sizing: border-box;
  transition: border-color var(--t-fast) var(--ease);
}

.mx-pin-well:has(.mx-pin-display:empty) {
  gap: var(--space-10);
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-14);
}

.mx-pin-well:has(.mx-pin-display:not(:empty)) {
  border-color: var(--border-interactive);
}

/* Micro Button (node 299:16) — outline and a dim label, never a fill. */
.mx-pin-reveal {
  flex: none;
  margin-left: auto;
  padding: var(--space-6) var(--space-10);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: none;
  font-family: var(--font-mono);
  font-size: var(--text-label-mono-wide, 9px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--moonx-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.mx-pin-reveal:hover {
  color: var(--moonx-text);
  border-color: var(--moonx-text-secondary);
}

.mx-pin-hint,
.mx-pin-error {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--moonx-text-secondary);
}

.mx-pin-error {
  color: var(--moonx-red);
  line-height: 1.4;
}

.mx-pin-field:has(.mx-pin-error:not([hidden])) .mx-pin-hint {
  display: none;
}

.mx-pin-field:has(.mx-pin-error:not([hidden])) .mx-pin-well {
  border-color: var(--moonx-red);
  animation: mx-pin-shake 320ms var(--ease);
}

@keyframes mx-pin-shake {

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.mx-pin-key--word {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.mx-pin-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}

/* Number/MD (18px) — the digit/dot read-out; Empty falls back to the
   placeholder below in Body/Field (15px). */
.mx-pin-display {
  display: flex;
  align-items: center;
  flex: 1 0 0%;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: var(--text-number-md--weight);
  font-size: var(--text-number-md);
  line-height: var(--text-number-md--line-height);
  letter-spacing: var(--text-number-md--letter-spacing);
  color: var(--moonx-text);
  word-break: break-all;
}

.mx-pin-display:empty::before {
  content: "Tap the keys below";
  font-family: var(--font-body);
  font-weight: var(--text-body-field--weight);
  font-size: var(--text-body-field);
  letter-spacing: normal;
  color: var(--moonx-text-secondary);
}

/* PIN Dots (node 303:154) — a filled dot per digit entered, then a hollow
   ring for every digit still owed before the 6-digit minimum; past six
   it's dots only, no new ring ever appears. */
.mx-pin-display--dots {
  gap: 10px;
  letter-spacing: normal;
}

/* Show reveals the grouped digits (Number/Reveal — wider tracking, larger
   clusters) instead of Number/MD's plain run. */
.mx-pin-display--revealed {
  font-size: 22px;
  letter-spacing: 0.22em;
  word-spacing: -0.1em;
}

.mx-pin-dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--moonx-text);
}

.mx-pin-dot--ring {
  box-sizing: border-box;
  background: none;
  border: 1.5px solid var(--moonx-line-strong);
}

/* Keypad (node 365:172) — always 330px wide, centred under the field. The
   pad is rendered by simple-keyboard. Its own stylesheet is not loaded:
   Propshaft does not rewrite import paths inside JavaScript, so a CSS
   import from the bundle would 404 in production. The `.hg-*` structure
   it emits is styled here instead. `--mx-pin-key-height` lets the mobile
   short-viewport override in core-components.css shrink the keys without
   duplicating this whole block. */
.mx-pin-pad {
  --mx-pin-key-height: 54px;
  width: 330px;
  max-width: 100%;
}

.mx-pin-pad .hg-rows {
  display: grid;
  gap: var(--space-8);
}

.mx-pin-pad .hg-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.mx-pin-pad .hg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mx-pin-key-height);
  padding: 0;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-16);
  background: var(--moonx-well);
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 60ms ease;
}

.mx-pin-pad .hg-button:hover {
  border-color: var(--moonx-line-strong);
}

.mx-pin-pad .hg-button:active,
.mx-pin-pad .hg-button.hg-activeButton {
  transform: scale(0.97);
  border-color: var(--moonx-line-strong);
}

.mx-pin-pad .hg-button:focus-visible {
  outline: var(--border-focus) solid var(--border-interactive);
  outline-offset: 2px;
}

/* `.mx-pin-key--word` alone loses to `.hg-button`'s own font-size
   (both one class, but `.hg-button` sits in the more specific two-class
   `.mx-pin-pad .hg-button` rule above) — compound the selector so
   the Clear key's smaller size actually wins the cascade. */
.mx-pin-pad .hg-button.mx-pin-key--word {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.mx-pin-pad .hg-button svg {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .mx-pin-pad .hg-button {
    transition: none;
  }

  .mx-pin-pad .hg-button:active,
  .mx-pin-pad .hg-button.hg-activeButton {
    transform: none;
  }

  .mx-pin-field:has(.mx-pin-error:not([hidden])) .mx-pin-well {
    animation: none;
  }
}

.hosted-wallet-address-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hosted-wallet-address-label {
  color: #7a8090;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hosted-wallet-address-badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hosted-wallet-address-value {
  display: block;
  color: #c9cdd6;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.hosted-wallet-success-card .hosted-wallet-fields {
  margin-top: 28px;
}

.hosted-wallet-success-card .hosted-wallet-address {
  margin: 0;
  text-align: left;
}

.hosted-wallet-success-card .hosted-wallet-address-head {
  margin-bottom: 10px;
}

.hosted-wallet-success-card .hosted-wizard-footer {
  width: 100%;
  margin-top: 28px;
  padding-top: 24px;
}

.hosted-wallet-success-card .hosted-wizard-footer-actions,
.hosted-wallet-success-card .mx-btn--solid {
  width: 100%;
}

@media (max-width: 600px) {
  .hosted-wallet-success-card {
    padding: 28px 20px;
  }
}

.hosted-wallet-password-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0;
}

.hosted-wallet-character-count {
  flex: none;
  color: var(--color-primary);
  font: inherit;
}

.hosted-wallet-password-heading-actions {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}

.hosted-wallet-generate-button {
  padding: 4px 9px;
  border: 1px solid #343a48;
  border-radius: 5px;
  background: #171a20;
  color: var(--color-primary);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.hosted-wallet-generate-button:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: rgb(139 157 255 / .12);
}

.hosted-wallet-generate-button:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: .5;
}

.hosted-wallet-copy-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-primary);
  cursor: pointer;
}

.hosted-wallet-copy-button[hidden] {
  display: none;
}

.hosted-wallet-copy-button:hover {
  background: rgb(139 157 255 / .1);
}

.hosted-wallet-copy-button svg {
  width: 17px;
  height: 17px;
}

.hosted-wallet-copy-check {
  display: none;
}

.hosted-wallet-copy-button.is-copied {
  color: var(--color-sentiment-up);
}

.hosted-wallet-copy-button.is-copied .hosted-wallet-copy-icon {
  display: none;
}

.hosted-wallet-copy-button.is-copied .hosted-wallet-copy-check {
  display: block;
}

.hosted-wallet-visibility-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.hosted-wallet-visibility-button:hover {
  background: rgb(139 157 255 / .1);
  color: var(--color-foreground);
}

.hosted-wallet-visibility-button svg {
  width: 18px;
  height: 18px;
}

.hosted-wallet-visibility-hide {
  display: none;
}

.hosted-wallet-visibility-button.is-visible {
  color: var(--color-primary);
}

.hosted-wallet-visibility-button.is-visible .hosted-wallet-visibility-show {
  display: none;
}

.hosted-wallet-visibility-button.is-visible .hosted-wallet-visibility-hide {
  display: block;
}

.hosted-wallet-strength {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

.hosted-wallet-strength-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.hosted-wallet-strength-bars i {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.hosted-wallet-strength[data-score="1"] .hosted-wallet-strength-bars i:nth-child(-n+1),
.hosted-wallet-strength[data-score="2"] .hosted-wallet-strength-bars i:nth-child(-n+2) {
  background: var(--color-danger-300);
}

.hosted-wallet-strength[data-score="3"] .hosted-wallet-strength-bars i:nth-child(-n+3) {
  background: var(--moonx-blue-high);
}

.hosted-wallet-strength[data-score="4"] .hosted-wallet-strength-bars i {
  background: var(--color-sentiment-up);
}

.hosted-wallet-strength[data-score="1"] .hosted-wallet-strength-label,
.hosted-wallet-strength[data-score="2"] .hosted-wallet-strength-label {
  color: var(--color-danger-300);
}

.hosted-wallet-strength[data-score="3"] .hosted-wallet-strength-label {
  color: var(--moonx-blue-high);
}

.hosted-wallet-strength[data-score="4"] .hosted-wallet-strength-label {
  color: var(--color-sentiment-up);
}

.hosted-wallet-strength-label {
  color: var(--color-foreground);
}

.hosted-wallet-strength-feedback {
  grid-column: 1 / -1;
}

.hosted-wallet-generated-status {
  display: block;
  min-height: 1em;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

@media (max-width: 560px) {
  .hosted-wallet-strength {
    grid-template-columns: 1fr auto;
  }

  .hosted-wallet-strength-bars {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.hosted-wallet-password {
  display: block;
}

/* Extra breathing room below the upload field before the next field starts —
   the grid `gap` alone reads as too tight next to the dashed box. */
[data-hosted-wallet-target="backupFileFields"] {
  margin-bottom: 8px;
}

/* Same shell as the design system's Upload component (core-components.css
   `.mx-upload`) — empty is dashed and unfilled, matching its own doc. Kept
   under the `.hosted-wallet-file*` names (shared by onboarding, settings,
   and the unlock controls) rather than renamed to `.mx-upload*`, so all
   three callers pick this up with no markup changes. */
.hosted-wallet-file {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 64px;
  padding: var(--space-12);
  border: var(--border-hairline) dashed var(--moonx-line-strong);
  border-radius: var(--radius-lg);
  background: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hosted-wallet-file:hover {
  border-color: var(--moonx-text-secondary);
}

.hosted-wallet-file:focus-within {
  border-color: var(--border-interactive);
  box-shadow: 0 0 0 3px rgb(45 123 255 / .18);
}

.hosted-wallet-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hosted-wallet-file-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--moonx-raised);
  color: var(--moonx-text);
}

.hosted-wallet-file-icon svg {
  width: 18px;
  height: 18px;
}

.hosted-wallet-file-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  flex: 1;
}

.hosted-wallet-file-name,
.hosted-wallet-file-hint {
  display: block;
}

.hosted-wallet-file-name {
  overflow: hidden;
  color: var(--moonx-text);
  font-size: var(--text-body-strong);
  font-weight: var(--text-body-strong--weight);
  line-height: var(--text-body-strong--line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hosted-wallet-file-hint {
  color: var(--moonx-text-secondary);
  font-size: var(--text-body-small);
  font-weight: var(--text-body-small--weight);
  line-height: var(--text-body-small--line-height);
}

.hosted-wallet-file-action {
  flex: none;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  border: var(--border-hairline) solid var(--moonx-line);
  background: var(--moonx-raised);
  color: var(--moonx-text);
  font-family: var(--font-body);
  font-size: var(--text-body-compact);
  font-weight: var(--text-body-compact--weight);
  line-height: var(--text-body-compact--line-height);
}

@media (max-width: 480px) {
  .hosted-wallet-file {
    align-items: flex-start;
  }

  .hosted-wallet-file-action {
    display: none;
  }
}

.hosted-wallet-password-confirmation {
  margin-top: 18px;
}

.hosted-wallet-password-intro {
  margin: -2px 0 10px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hosted-wallet-password-match {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.hosted-wallet-password-match[hidden] {
  display: none;
}

.hosted-wallet-password-match.is-valid {
  color: var(--color-sentiment-up);
}

.hosted-wallet-password-match.is-invalid {
  color: var(--color-danger-300);
}

.hosted-wallet-password-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #1a1a1a;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.hosted-wallet-password-row.is-valid {
  border-color: var(--color-sentiment-up);
  box-shadow: none;
}

.hosted-wallet-password-row.is-invalid {
  border-color: var(--color-danger-300);
}

.hosted-wallet-password-row input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-foreground);
  font-size: 14px;
  line-height: 20px;
}

.hosted-wallet-password-row input:focus {
  outline: none;
}

/* Cancels the global `input:focus-visible{box-shadow:var(--shadow-focus)}`
   reset (see this file's top-level rule) — the row's own border-color
   change is the focus indicator here, so the global glow just stacks a
   second one on top. Same pattern as `.take-shot-amount input:focus-visible`
   above. */
.hosted-wallet-password-row input:focus-visible {
  box-shadow: none;
}

/* opufunds-icons/check — sits at the right edge of the field once the rule is met */
.hosted-wallet-password-valid {
  flex: none;
  display: inline-flex;
  color: var(--color-sentiment-up);
}

.hosted-wallet-password-valid[hidden] {
  display: none;
}

.hosted-wallet-password-valid svg {
  width: 16px;
  height: 16px;
}

/* Rules on the left, remaining-character countdown on the right — both below the field */
.hosted-wallet-password-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hosted-wallet-password-counter {
  flex: none;
  margin-top: 8px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 19px;
  white-space: nowrap;
}

/* Narrow screens stack the countdown above the rules, still right-aligned */
@media (max-width: 560px) {
  .hosted-wallet-password-meta {
    flex-direction: column;
    gap: 0;
  }

  .hosted-wallet-password-counter {
    order: -1;
    align-self: flex-end;
  }
}

.hosted-wallet-password-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  cursor: pointer;
}

.hosted-wallet-password-toggle:hover {
  color: #a8b5ff;
}

.hosted-wallet-rules {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-rules li {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.hosted-wallet-rules li::before {
  content: "•";
  color: var(--color-text-muted);
}

.hosted-wallet-download {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.hosted-wallet-download-primary {
  width: 100%;
}

.hosted-wallet-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #121318;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.hosted-wallet-download-button:hover:not(:disabled) {
  border-color: #aebaff;
  background: #aebaff;
}

.hosted-wallet-download-button:disabled {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-primary);
  opacity: .35;
  cursor: not-allowed;
}

.hosted-wallet-download-note {
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

/* Shared "enter your PIN to sign" modal. The read-out, pad and action row
   reuse the onboarding .hosted-wallet-pin-* rules so both PIN screens look
   like one thing. */
/* Shell, title and field/keypad spacing now come from `.mx-modal`/
   `.mx-pin-sheet` (core-components.css) and `.mx-pin-body`/`.mx-pin-field`
   (above) — this class only carries what's specific to the sign dialog. */
.pin-signature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
}

.pin-signature-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-8) 0;
}

.pin-signature-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--moonx-line);
  border-top-color: var(--moonx-blue);
  border-radius: var(--radius-full);
  animation: pin-signature-loading-spin .8s linear infinite;
}

@keyframes pin-signature-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

.pin-signature-passkey-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  width: 100%;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}

.pin-signature-passkey-option::before,
.pin-signature-passkey-option::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--color-border);
}

.pin-signature-passkey {
  min-width: 0;
}

.hosted-wallet-restart-dialog {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 24px;
  border: 1px solid #343a48;
  border-radius: 16px;
  background: #15181e;
  box-shadow: 0 24px 80px rgb(0 0 0 / .58);
  color: var(--color-foreground);
}

.hosted-wallet-restart-dialog::backdrop {
  background: rgb(0 0 0 / .72);
}

.hosted-wallet-restart-dialog-copy {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hosted-wallet-restart-dialog-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: rgb(139 157 255 / .12);
  color: var(--color-primary);
  font-size: 1.25rem;
}

.hosted-wallet-restart-dialog-eyebrow {
  margin: 0 0 5px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hosted-wallet-restart-dialog h2 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.hosted-wallet-restart-dialog p:last-child {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.hosted-wallet-restart-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 480px) {
  .hosted-wallet-restart-dialog {
    padding: 20px;
  }

  .hosted-wallet-restart-dialog-actions {
    flex-direction: column-reverse;
  }

  .hosted-wallet-restart-dialog-actions .mx-btn {
    width: 100%;
  }
}

.hosted-wallet-download-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* Validation feedback beside the download button: icon + label, gap 4px */
.hosted-wallet-download-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  color: #4a4a4a;
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-download-status.is-done {
  color: var(--color-sentiment-up);
}

/* opufunds-icons/check, tinted by currentColor through the mask */
.hosted-wallet-download-status.is-done::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hosted-wallet-download-status.is-stale {
  color: var(--color-sentiment-hold);
}

/* opufunds-icons/mark — solid dot in a 16px box */
.hosted-wallet-download-status.is-stale::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: var(--radius-full);
  background: currentColor;
  transform: scale(0.375);
}

.hosted-wallet-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 48px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

/* Checkbox — 20px hit area around an 18px box */
.hosted-wallet-confirm input[type="checkbox"] {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 1px;
  border: 1.5px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  cursor: inherit;
  transition: background .15s ease, border-color .15s ease;
}

.hosted-wallet-confirm input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.28 6.31 11.17 12.5 4.83'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.hosted-wallet-confirm input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.hosted-wallet-confirm:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed;
}

.hosted-wizard-footer-actions {
  display: flex;
  width: 100%;
  justify-content: right;
  align-items: center;
  gap: 16px;
}

.hosted-wallet-footer-hint {
  color: #6f7688;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ==========================================================================
   opusfund animated mark
   Geometry matches opusfund.svg exactly. The one substitution: the body ring
   is a stroked rounded rect on the original ring's centreline instead of the
   original filled path, so it can be drawn on with stroke-dashoffset.
   Centreline: x 6.5443 y 14.1770 w 21.8113 h 19.6301 r 3.2713, stroke 1.87.
   Perimeter = 77.27 -> dasharray 78.

   Phase A  0 - 2.4s   the mark assembles itself
   Phase B  2.4s on    the mark idles alive
   ========================================================================== */

.opf-mark {
  --opf-ink: var(--moonx-text);
  --opf-up: var(--moonx-green);
  --opf-dn: var(--moonx-red);
  --opf-scan: var(--moonx-blue-high);

  --opf-blink-rate: 3.4s;
  --opf-tick-rate: 1.5s;
  --opf-swing-rate: 1.5s;
  /* half a period: the centre-to-right entry covers half the distance in
     half the time, so it enters at the loop's own average speed */
  --opf-swing-half: calc(var(--opf-swing-rate) / 2);

  display: block;
  width: auto;
  height: 156px;
}

.opf-mark .opf-eyes {
  fill: var(--opf-ink)
}

.opf-mark .opf-body {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.87
}

.opf-mark .opf-seed {
  fill: var(--opf-ink)
}

.opf-mark .opf-scan {
  fill: var(--opf-scan)
}

.opf-mark .opf-up {
  fill: var(--opf-up)
}

.opf-mark .opf-dn {
  fill: var(--opf-dn)
}

/* transforms on SVG children need an explicit box and origin */
.opf-mark .opf-eyes,
.opf-mark .opf-eyes circle,
.opf-mark .opf-body,
.opf-mark .opf-seed,
.opf-mark .opf-scan,
.opf-mark .opf-up,
.opf-mark .opf-dn {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- phase A: assembly ---------- */

@keyframes opf-draw {
  from {
    stroke-dashoffset: 78
  }

  to {
    stroke-dashoffset: 0
  }
}

@keyframes opf-seed-in {
  from {
    opacity: 0;
    transform: scale(.4)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes opf-fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes opf-up-in {
  from {
    opacity: 0;
    transform: translateY(-5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes opf-dn-in {
  from {
    opacity: 0;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ---------- phase B: vitals ---------- */

@keyframes opf-blink {

  0%,
  88%,
  96%,
  100% {
    transform: scaleY(1)
  }

  92% {
    transform: scaleY(.08)
  }
}

/* Travel is +/- 6 from a bar centred at x 17.45, leaving 1.47 clearance on
   both inner walls of the body.

   The bar fades in at rest in the centre, so the loop cannot simply start at
   the left extreme — that snaps. Instead it leaves the centre rightward over
   half a period (opf-swing-in), then hands off to the alternating loop, which
   begins at +6 exactly where the entry ended. Both curves have zero velocity
   at the extremes, so the join is invisible. */
@keyframes opf-swing-in {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(6px)
  }
}

@keyframes opf-swing {
  from {
    transform: translateX(6px)
  }

  to {
    transform: translateX(-6px)
  }
}

@keyframes opf-tick-a {

  0%,
  49.9% {
    opacity: .18
  }

  50%,
  100% {
    opacity: 1
  }
}

@keyframes opf-tick-b {

  0%,
  49.9% {
    opacity: 1
  }

  50%,
  100% {
    opacity: .18
  }
}

/* ---------- composition ---------- */

.opf-mark .opf-body {
  stroke-dasharray: 78;
  animation: opf-draw .9s cubic-bezier(.4, 0, .2, 1) both;
}

.opf-mark .opf-seed {
  animation: opf-seed-in .4s cubic-bezier(.2, 1.5, .4, 1) .75s both;
}

.opf-mark .opf-eyes {
  animation: opf-fade .3s ease-out 1.1s both;
}

.opf-mark .opf-eyes circle {
  animation: opf-blink var(--opf-blink-rate) ease-in-out 2.4s infinite;
}

.opf-mark .opf-up {
  animation:
    opf-up-in .32s cubic-bezier(.2, 1.6, .4, 1) 1.5s both,
    opf-tick-a var(--opf-tick-rate) steps(1) 2.4s infinite;
}

.opf-mark .opf-dn {
  animation:
    opf-dn-in .32s cubic-bezier(.2, 1.6, .4, 1) 1.78s both,
    opf-tick-b var(--opf-tick-rate) steps(1) 2.4s infinite;
}

.opf-mark .opf-scan {
  animation:
    opf-fade .35s ease-out 2.1s both,
    opf-swing-in var(--opf-swing-half) cubic-bezier(.45, 0, .55, 1) 2.4s both,
    opf-swing var(--opf-swing-rate) cubic-bezier(.45, 0, .55, 1) calc(2.4s + var(--opf-swing-half)) infinite alternate;
}

/* ---------- modifiers ---------- */

/* long wait: the mark slows down rather than speeding up */
.opf-mark--calm {
  --opf-blink-rate: 5.2s;
  --opf-tick-rate: 2.6s;
  --opf-swing-rate: 2.4s;
}

/* resting logo: no motion, no scan line */
.opf-mark--static * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  stroke-dashoffset: 0 !important;
}

.opf-mark--static .opf-scan {
  display: none;
}

/* skip assembly and land straight in the idle loop */
.opf-mark--idle .opf-body,
.opf-mark--idle .opf-seed,
.opf-mark--idle .opf-eyes {
  animation-delay: 0s;
  animation-duration: 0s;
}

.opf-mark--idle .opf-eyes circle,
.opf-mark--idle .opf-up,
.opf-mark--idle .opf-dn {
  animation-delay: 0s;
}

/* the scan runs three animations, so its delays must be listed per-animation
   or the loop would start on top of the entry */
.opf-mark--idle .opf-scan {
  animation-delay: 0s, 0s, var(--opf-swing-half);
}

@media (prefers-reduced-motion: reduce) {
  .opf-mark * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .opf-mark .opf-scan {
    opacity: .5 !important;
  }
}

/* ── hosted onboarding wizard ────────────────────────────────── */
.hosted-wizard {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, min(25%, 500px)) minmax(0, 1fr);
  background: #08090a;
}

/* Mobile chrome — hidden until the wizard drops to one column, where it takes
   the place of the sidebar (see the tablet/mobile block further down). */
.hosted-wizard-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.hosted-wizard-topbar-brand {
  display: inline-flex;
  align-items: center;
  width: 89px;
  height: 32px;
}

.hosted-wizard-topbar-brand img {
  display: block;
  width: 89px;
  height: 32px;
}

.hosted-wizard-topbar-brand .moonx-wordmark {
  width: 89px;
  height: auto;
}

.hosted-wizard-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hosted-wizard-dots li {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: #4a4a4a;
  transition: width .2s ease, background .2s ease;
}

.hosted-wizard-dots li.is-complete {
  background: var(--color-primary);
}

.hosted-wizard-dots li.is-current {
  width: 18px;
  background: var(--color-primary);
}

/* Footer back / sign-out: label on desktop, icon-only on mobile */
.hosted-wizard-back-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.hosted-wizard-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 46px 40px 44px;
  overflow: hidden;
  border-right: 1px solid #14161b;
  background: url("/assets/opusfund/opusfund-gradient-0a28a1e4.png") center / cover no-repeat;
}

/* soft blurred bloom behind the headline, matching the comp */
.hosted-wizard-sidebar::before {
  content: "";
  position: absolute;
  top: -14%;
  right: -26%;
  width: 78%;
  height: 46%;
  border-radius: 50%;
  background: rgb(126 140 200 / .28);
  filter: blur(70px);
  pointer-events: none;
}

.hosted-wizard-sidebar>* {
  position: relative;
}

.hosted-wizard-brand {
  display: inline-flex;
}

.hosted-wizard-brand img,
.hosted-wizard-brand .moonx-wordmark {
  width: 154px;
  height: auto;
}

.hosted-wizard-pitch {
  margin-top: 58px;
}

.hosted-wizard-eyebrow,
.hosted-wizard-label,
.hosted-provider-label {
  margin: 0 0 16px;
  color: #7d859c;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hosted-wizard-label,
.hosted-provider-label {
  margin: 34px 0 14px;
}

.hosted-wizard-headline {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
  color: #f4f5f8;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: normal;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.hosted-wizard-body {
  margin: 0;
  /* max-width: 30ch; */
  color: #a9b0c2;
  font-size: var(--text-body-sm);
  line-height: 1.7;
}

.hosted-wizard-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: rgba(252, 211, 77, 0.15);
  color: var(--color-sentiment-hold);
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

/* opufunds-icons/info */
.hosted-wizard-callout-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.hosted-wizard-footnote {
  margin: 16px 0 0;
  color: #6e7488;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}

.hosted-wizard-steps {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.hosted-wizard-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgb(255 255 255 / .05);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.55;
}

.hosted-wizard-steps li.is-current {
  border-color: rgb(255 255 255 / .09);
  background: var(--bg3);
  color: #f4f5f8;
  font-weight: 600;
  opacity: 100%;
}

.hosted-wizard-steps li.is-complete {
  color: #98a0b4;
}

.hosted-wizard-step-number {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: var(--color-surface);
  color: #868da1;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.is-current .hosted-wizard-step-number {
  background: var(--color-primary);
  color: var(--color-background);
  border: none;
  font-weight: 700;
}

/* completed steps swap the digit for a stroked tick that fills the box; the glyph
   would otherwise render at the 10px step-number size and read as a speck */
.is-complete .hosted-wizard-step-number {
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c9d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.hosted-wizard-main {
  display: flex;
  min-width: 0;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  padding: 44px 56px 40px;
}

/* steps that wrap their content and footer in one form carry the measure on the form,
   so the two cannot size independently; every step is on the same measure */
.hosted-wizard-flow {
  display: flex;
  width: min(700px, 100%);
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

/* opt-in wider measure; no step uses it today, add it to the form to widen one */
.hosted-wizard-flow.is-wide {
  width: min(900px, 100%);
}

.hosted-wizard-content {
  width: min(700px, 100%);
  flex: 1;
}

@media (min-width: 1040px) {

  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-content,
  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-footer {
    width: min(920px, 100%);
  }
}

.hosted-field {
  margin-bottom: 32px;
}

.hosted-field:first-of-type {
  margin-top: 30px;
}

.hosted-field-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 0;
  color: #6f7688;
  font-size: 0.8125rem;
}

.hosted-field-count {
  flex: none;
  color: #5c616c;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hosted-wizard-crumb {
  margin: 0 0 20px;
  color: #5c616c;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hosted-wizard-crumb span {
  color: #9ea3ad;
}

.hosted-wizard-title {
  margin: 0 0 12px;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hosted-wizard-subtitle {
  margin: 0 0 48px;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
}

.hosted-wizard-box {
  border: 1px solid #1c1e24;
  border-radius: 12px;
  padding: 24px;
  background: #0c0d10;
}

.hosted-wizard-box .field {
  margin-bottom: 18px;
}

.hosted-wizard-box .field:last-child {
  margin-bottom: 0;
}

.hosted-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hosted-runtime-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 70px 0 0;
  text-align: center;
}

.hosted-runtime-graphic {
  height: 316px;
  display: flex;
  align-items: center;
}

.hosted-runtime-eyebrow {
  margin: 0;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hosted-runtime-stage .opf-mark,
.hosted-runtime-stage .opf-hop {
  margin: 14px 0 6px;
}

.hosted-runtime-status {
  margin: 0;
  color: #f7f8f8;
}

.hosted-runtime-note {
  max-width: 460px;
  margin: 0;
  color: #6f7688;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.hosted-runtime-progress {
  width: min(100%, 360px);
  margin: 12px 0 0;
  padding: 18px 20px;
  border: 1px solid #1c1e24;
  border-radius: 12px;
  background: #0c0d10;
  list-style: none;
  text-align: left;
}

.hosted-runtime-progress-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  color: #555b6a;
  font-size: 0.75rem;
}

.hosted-runtime-progress-step:not(:last-child)::after {
  position: absolute;
  top: 29px;
  bottom: -9px;
  left: 10px;
  width: 1px;
  background: #242732;
  content: "";
}

.hosted-runtime-progress-marker {
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #303441;
  border-radius: 50%;
  background: #111318;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.hosted-runtime-progress-step--complete {
  color: #a4a9b5;
}

.hosted-runtime-progress-step--complete .hosted-runtime-progress-marker {
  border-color: color-mix(in srgb, var(--gn) 55%, #303441);
  color: var(--gn);
}

.hosted-runtime-progress-step--current {
  color: #f7f8f8;
  font-weight: 600;
}

.hosted-runtime-progress-step--current .hosted-runtime-progress-marker {
  border-color: var(--pr);
  color: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 12%, transparent);
}

.hosted-runtime-progress-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid color-mix(in srgb, var(--pr) 28%, transparent);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: hosted-runtime-progress-spin 0.8s linear infinite;
}

@keyframes hosted-runtime-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

.hosted-runtime-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #6f7688;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.hosted-runtime-activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pr);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 12%, transparent);
  animation: hosted-runtime-activity-pulse 1.8s ease-in-out infinite;
}

.hosted-runtime-activity--complete .hosted-runtime-activity-dot {
  background: var(--gn);
  box-shadow: none;
  animation: none;
}

@keyframes hosted-runtime-activity-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hosted-runtime-activity-dot {
    animation: none;
  }

  .hosted-runtime-progress-spinner {
    animation: none;
  }
}

/* ── Account onboarding · Polymarket wallet ───────────────────────────── */

.polymarket-wallet-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(64px, 12vh, 112px);
  text-align: center;
}

.polymarket-wallet-connection {
  display: grid;
  width: min(100%, 540px);
  grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr);
  align-items: center;
  margin-bottom: 32px;
}

.polymarket-wallet-brand {
  position: relative;
  display: flex;
  min-width: 0;
  height: 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid #252936;
  border-radius: 18px;
  background: linear-gradient(145deg, #141720, #0c0e13);
  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
}

.polymarket-wallet-brand::before {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgb(139 157 255 / 18%);
  filter: blur(32px);
  content: "";
}

.polymarket-wallet-brand>* {
  position: relative;
}

.polymarket-wallet-brand>span {
  color: #7d859c;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.polymarket-wallet-brand--polymarket {
  overflow: visible;
  border-color: rgb(77 138 255 / 34%);
  animation: polymarket-wallet-arrive 2.4s ease-in-out infinite;
}

.polymarket-wallet-brand--polymarket::before {
  background: rgb(77 138 255 / 24%);
}

.polymarket-wallet-moonx-logo {
  width: 116px;
  height: auto;
  color: #f7f8f8;
}

.polymarket-wallet-polymarket-logo {
  display: block;
  width: 148px;
  max-width: 78%;
  height: auto;
}

.polymarket-wallet-signal {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, #252936, #4d8aff 50%, #252936);
}

.polymarket-wallet-signal span {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8b9dff;
  box-shadow: 0 0 14px 3px rgb(139 157 255 / 65%);
  animation: polymarket-wallet-transfer 1.8s ease-in-out infinite;
}

.polymarket-wallet-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  border: 1px solid #252936;
  border-radius: var(--radius-full);
  padding: 8px 13px;
  background: #101218;
  color: #aeb5c8;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

.polymarket-wallet-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgb(139 157 255 / 25%);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: hosted-runtime-progress-spin 0.8s linear infinite;
}

.polymarket-wallet-stage .hosted-wizard-title {
  margin-bottom: 12px;
}

.polymarket-approval-fallback {
  width: min(100%, 440px);
  border: 1px solid #252936;
  border-radius: 18px;
  padding: 32px;
  background: linear-gradient(145deg, #141720, #0c0e13);
  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
}

.polymarket-approval-logo {
  display: block;
  width: 148px;
  max-width: 78%;
  height: auto;
  margin: 0 auto 28px;
}

.polymarket-approval-title {
  margin: 0 0 10px;
  color: var(--app-fg);
  font-size: 28px;
  line-height: 34px;
}

.polymarket-approval-copy,
.polymarket-approval-status {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 22px;
}

.polymarket-approval-status {
  margin-top: 12px;
}

.polymarket-approval-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-top: 22px;
  border: 3px solid rgb(139 157 255 / 22%);
  border-top-color: var(--pr);
  border-radius: 50%;
  animation: hosted-runtime-progress-spin 0.8s linear infinite;
}

.polymarket-approval-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.polymarket-wallet-note {
  max-width: 460px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.polymarket-wallet-security-note {
  display: flex;
  max-width: 500px;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  color: #77819a;
  font-size: 0.75rem;
  line-height: 1.5;
}

.polymarket-wallet-security-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--pr);
}

@keyframes polymarket-wallet-transfer {
  0% {
    transform: translate(-2px, -50%);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    transform: translate(106px, -50%);
    opacity: 0;
  }
}

@keyframes polymarket-wallet-arrive {
  50% {
    border-color: rgb(77 138 255 / 62%);
    box-shadow: 0 18px 44px rgb(0 0 0 / 28%), 0 0 24px rgb(77 138 255 / 10%);
  }
}

@media (max-width: 520px) {
  .polymarket-wallet-stage {
    padding-top: 44px;
  }

  .polymarket-wallet-connection {
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  }

  .polymarket-wallet-brand {
    height: 100px;
    gap: 13px;
    border-radius: 14px;
  }

  .polymarket-wallet-moonx-logo {
    width: 88px;
  }

  .polymarket-wallet-polymarket-logo {
    width: 110px;
  }

  @keyframes polymarket-wallet-transfer {
    0% {
      transform: translate(-2px, -50%);
      opacity: 0;
    }

    18% {
      opacity: 1;
    }

    82% {
      opacity: 1;
    }

    100% {
      transform: translate(50px, -50%);
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {

  .polymarket-wallet-brand--polymarket,
  .polymarket-wallet-signal span,
  .polymarket-wallet-spinner {
    animation: none;
  }
}

/* ── Local development runtime configuration (dev-only disclosure) ───── */

.hosted-runtime-config {
  width: 100%;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.hosted-runtime-config-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.hosted-runtime-config-summary::-webkit-details-marker {
  display: none;
}

.hosted-runtime-config-summary::before {
  content: "\25BC";
  flex: none;
  width: 14px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.hosted-runtime-config[open]>.hosted-runtime-config-summary::before {
  transform: rotate(0deg);
}

.hosted-runtime-config-summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.hosted-runtime-config-title {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-foreground);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.hosted-runtime-config-badge {
  flex: none;
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(252, 211, 77, 0.15);
  color: var(--color-sentiment-hold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.hosted-runtime-config-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
}

.hosted-runtime-config-note {
  width: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-runtime-config-note code {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.hosted-runtime-config-body .btn {
  min-width: 0;
  min-height: 36px;
  border-radius: var(--radius-sm);
  padding: 0 12px;
  background: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-foreground);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-runtime-config-body .btn:hover {
  background: #1a1a1a;
}

.hosted-runtime-config-json {
  width: 100%;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  background: #1a1a1a;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.hosted-wizard-footer-note {
  color: #6f7688;
  font-size: 0.8125rem;
}

.hosted-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid #1c1e24;
  width: min(700px, 100%);
}

.hosted-wizard-footer--end {
  justify-content: flex-end;
}

/* .mx-btn--solid is a fixed 156px, which clips the longest wizard CTA
   ("Continue to cockpit →"); here the width is a floor, not a size. */
.hosted-wizard-footer .mx-btn--solid {
  flex: none;
  width: auto;
  min-width: min(156px, 100%);
}

.agent-chat-setup {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-setup:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
}

.agent-chat-mobile-setup {
  position: fixed;
  z-index: 51;
  top: 8px;
  right: 12px;
  /* AI setup is reachable from the model chip in the composer. */
  display: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--app-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.agent-chat-mobile-setup:hover {
  background: var(--panel-head);
}

@media (max-width: 1039px) {
  .app-shell .sidebar {
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(280px, 90vw);
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell .sidebar nav {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .app-shell .sidebar-head,
  .app-shell .sidebar-footer {
    flex-shrink: 0;
  }

  .app-shell .sidebar-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .app-shell .footer-menu {
    position: absolute;
    bottom: 100%;
    left: auto;
    right: 8px;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .app-shell:has(.sidebar.is-open)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .app-shell .sidebar-head .brand {
    display: inline-flex;
  }

  .app-shell .sidebar-head .brand-wordmark {
    display: block;
    height: 26px;
  }

  .app-shell .sidebar-head .sidebar-collapse-button {
    display: none;
  }

  .app-shell .sidebar-head .sidebar-head-close {
    display: inline-grid;
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--app-fg);
  }
}

/* Shared surface for the AI setup panel, used both as a modal (agent chat)
   and inline (hosted onboarding providers step). */
.agent-provider-surface {
  padding: 0 16px 16px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  background: #141414;
  color: var(--color-text);
}

/* ── AI provider setup (from feature/td-2dd3ef-chat-redesign-ui) ────────────
   The panel's internals are shared with the hosted onboarding providers step
   through .agent-provider-surface; .agent-provider-dialog adds only what is
   specific to the modal (positioning, backdrop, mobile full-screen).

   Centring is left to the dialog's own `inset: 0; margin: auto` — a transform
   measured against 100vh overshoots the visible viewport on iOS Safari and
   pushes the top edge, header included, off screen. */
.agent-provider-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(847px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow: hidden;
  box-shadow: 0 24px 90px rgb(0 0 0 / 0.58);
}

/* Scoped to [open] so it layers on top of the UA's `display: none` for a closed
   dialog instead of replacing it. */
.agent-provider-dialog[open] {
  display: flex;
  flex-direction: column;
}

.agent-provider-dialog::backdrop {
  background: rgb(0 0 0 / 0.72);
}

/* The picker is the only part that scrolls. min-height: 0 is what lets a flex
   item shrink below its content and scroll instead of stretching the dialog. */
.agent-provider-surface .hosted-provider-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
}

.agent-provider-surface-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  color: #FFFFFF;
  padding-top: 16px;
  padding-bottom: 12px;
  background: #141414;
}

.agent-provider-surface-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.agent-provider-dialog-subtitle {
  margin: 10px 0 0;
  max-width: 58ch;
  color: #C4C4C4;
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
}

.agent-provider-dialog-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #2a2d36;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.agent-provider-dialog-close:hover {
  border-color: #3a3e47;
  color: var(--color-text);
}

/* The dialog stages one provider at a time: cards on top, the chosen
   provider's action centred in the panel below. */
.agent-provider-surface .hosted-provider-credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  margin-top: 16px;
  padding: 28px;
  border-radius: 12px;
  background: #0A0A0A;
  text-align: center;
}

/* The rule above sets `display`, which beats the UA's `[hidden] { display: none }`
   whatever the specificity — author origin wins — so it has to be restated or
   the inactive provider's panel renders alongside the active one. */
.agent-provider-surface .hosted-provider-credential[hidden] {
  display: none;
}

.agent-provider-surface .hosted-provider-credential>.hosted-provider-label {
  display: none;
}

/* Disconnect is the destructive action in the setup flow, in the onboarding
   wizard and the chat dialog alike. */
[data-agent-provider-target="disconnectOpenai"],
[data-agent-provider-target="disconnectOllama"] {
  color: var(--coral-down);
}

/* Every step past the bare CTA reads left-to-right: the device code, the API
   key form, the model picker, and the disconnect confirmation. */
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
  align-items: stretch;
  text-align: left;
  padding: 48px;
}

.agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden]))>[data-agent-provider-target="openai"] {
  display: none;
}

/* Stretching the panel must not stretch its buttons. OpenAI's single sign-in
   button sits centred; Ollama's follows its left-aligned key form. */
.agent-provider-surface [data-agent-provider-target="openaiPanel"]>.mx-btn {
  align-self: center;
}

.agent-provider-surface [data-agent-provider-target="ollamaPanel"]>.mx-btn {
  align-self: flex-start;
}

/* Both credential CTAs are lone children of a 300px-tall panel, so every
   stretching default — flex, grid, and align-self alike — has to be refused or
   the button grows to the full panel height. Alignment stays with the
   panel-scoped rules above, which out-specify this one. */
[data-agent-provider-target="openai"],
[data-agent-provider-target="ollama"] {
  flex: none;
  align-self: center;
  justify-self: center;
  height: 42px;
  min-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Inside the dialog the values read as prose, not as codes: Inter for the
   inputs, and the Model/Effort labels keep their sentence case. */
.agent-provider-surface .field-input {
  font-family: var(--font-body);
}

#ollama-api-key {
  font-size: 14px;
  line-height: 20px;
}

.agent-provider-surface .hosted-provider-model-fields .field-label {
  text-transform: none;
  font-size: 10px;
  line-height: 14px;
}

.agent-provider-surface .hosted-provider-credential .field,
.agent-provider-surface .hosted-provider-model-picker {
  width: 100%;
  text-align: left;
}

/* The provider picker is shared with the cockpit. Keep its existing dialog
   frame and layout intact; the new surface rules above apply to onboarding. */
.agent-provider-dialog {
  padding: 0 16px 16px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  background: #141414;
  color: var(--color-text);
}

.agent-provider-dialog .hosted-provider-picker {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
}

.agent-provider-dialog-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-top: 16px;
  padding-bottom: 12px;
  background: #141414;
  color: var(--color-foreground-200);
}

.agent-provider-dialog-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.agent-provider-dialog .hosted-provider-credential {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  margin-top: 16px;
  padding: 28px;
  border-radius: 12px;
  background: #0A0A0A;
  text-align: center;
}

.agent-provider-dialog .hosted-provider-credential[hidden] {
  display: none;
}

.agent-provider-dialog .hosted-provider-credential>.hosted-provider-label {
  display: none;
}

.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
  align-items: stretch;
  padding: 48px;
  text-align: left;
}

.agent-provider-dialog .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden]))>[data-agent-provider-target="openai"] {
  display: none;
}

.agent-provider-dialog [data-agent-provider-target="openaiPanel"]>.mx-btn {
  align-self: center;
}

.agent-provider-dialog [data-agent-provider-target="ollamaPanel"]>.mx-btn {
  align-self: flex-start;
}

.agent-provider-dialog .field-input {
  font-family: var(--font-body);
}

/* Solid never appears in a modal. The provider picker partial is shared with
   the onboarding page, where Solid is right, and the device-code "Open"
   button is built in JS — so the dialog re-skins them to Tinted here, the
   same enforcement `.mx-modal-actions .mx-btn--solid` does in
   core-components.css. */
.agent-provider-dialog .mx-btn--solid {
  background: rgba(45, 123, 255, 0.18);
  box-shadow: inset 0 0 22px rgba(45, 123, 255, 0.3);
  border: var(--border-hairline) solid rgba(45, 123, 255, 0.55);
}

.agent-provider-dialog .mx-btn--solid:hover:not(:disabled) {
  background: rgba(45, 123, 255, 0.28);
  border-color: rgba(45, 123, 255, 0.78);
}

.agent-provider-dialog .hosted-provider-model-fields .field-label {
  text-transform: none;
  font-size: 10px;
  line-height: 14px;
}

.hosted-wallet-unlock-dialog {
  width: min(680px, calc(100vw - 32px));
}

.hosted-wallet-unlock-body {
  display: grid;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 20px;
}

.hosted-wallet-unlock-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hosted-wallet-unlock-options .hosted-wallet-confirm {
  margin: 0;
}

.hosted-wallet-unlock-forget {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.hosted-wallet-unlock-forget:hover {
  color: var(--color-foreground);
}

.hosted-wallet-unlock-status {
  min-height: 19px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 19px;
}

.hosted-wallet-unlock-status[data-state="error"] {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--rd) 45%, var(--color-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--rd) 9%, transparent);
  color: var(--rd);
  font-weight: 600;
}

.hosted-wallet-unlock-status[data-state="error"]::before {
  margin-right: 8px;
  content: "!";
}

.hosted-wallet-unlock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px 4px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-unlock-footer .mx-btn {
  width: auto;
  min-width: 156px;
}

.hosted-wallet-status-dialog {
  width: min(560px, calc(100vw - 32px));
}

.hosted-wallet-status-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hosted-wallet-status-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--gn) 45%, var(--color-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn) 10%, transparent);
  color: var(--gn);
}

.hosted-wallet-status-icon svg {
  width: 22px;
  height: 22px;
}

.hosted-wallet-status-body {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-border);
}

.hosted-wallet-status-detail {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-surface);
}

.hosted-wallet-status-detail>span {
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-status-detail strong,
.hosted-wallet-status-detail code {
  min-width: 0;
  color: var(--color-foreground);
  font-size: 13px;
}

.hosted-wallet-status-detail code {
  overflow-wrap: anywhere;
}

.hosted-wallet-status-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 14px 16px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
}

.hosted-wallet-status-note>span {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--yw);
}

.hosted-wallet-status-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.hosted-wallet-status-footer .btn {
  min-width: 140px;
}

.btn.hosted-wallet-lock-button {
  border-color: var(--rd);
  background: var(--rd);
  color: var(--color-background);
}

.btn.hosted-wallet-lock-button:hover {
  background: #ffb5b5;
  color: var(--color-background);
}

@media (max-width: 520px) {
  .hosted-wallet-unlock-dialog {
    width: 100vw;
    max-height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
  }

  .hosted-wallet-unlock-body {
    padding-inline: 0;
  }

  .hosted-wallet-unlock-options,
  .hosted-wallet-unlock-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hosted-wallet-unlock-footer .mx-btn {
    width: 100%;
  }

  .hosted-wallet-status-dialog {
    width: calc(100vw - 24px);
  }

  .hosted-wallet-status-detail {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .hosted-wallet-status-footer .btn {
    width: 100%;
  }
}

.agent-provider-dialog .hosted-provider-credential .field,
.agent-provider-dialog .hosted-provider-model-picker {
  width: 100%;
  text-align: left;
}

.hosted-provider-label {
  margin: 0 0 8px;
}

.hosted-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}

.hosted-provider-picker--rail .hosted-provider-rail {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
}

.hosted-provider-picker--rail .hosted-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.hosted-provider-picker--rail .hosted-provider-grid::-webkit-scrollbar {
  display: none;
}

.hosted-provider-picker--rail .hosted-provider-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 8px;
}

.hosted-provider-picker--rail .hosted-provider-card-logo {
  width: 32px;
  height: 32px;
}

.hosted-provider-picker--rail .hosted-provider-card-body>span:last-child {
  display: none;
}

.hosted-provider-picker--rail .hosted-provider-card-top {
  gap: 5px;
  font-size: 13px;
  line-height: 18px;
}

.hosted-provider-picker--rail .hosted-provider-tag {
  padding: 2px 5px;
  font-size: 0.5625rem;
  line-height: 12px;
}

.hosted-provider-rail-control {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}

.hosted-provider-rail-control:hover {
  border-color: var(--color-primary);
  background: rgb(139 157 255 / .1);
}

@media (min-width: 562px) {
  .hosted-provider-picker--rail .hosted-provider-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .hosted-provider-rail-control {
    display: none;
  }
}

.hosted-provider-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 19px;
  text-align: left;
}

/* Provider marks ship as 40px PNGs on a white plate, so the tile only has to
   round them. */
.hosted-provider-card-logo {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.hosted-provider-card-body {
  display: grid;
  gap: 0;
  min-width: 0;
  align-content: center;
}

.hosted-provider-card:hover {
  border-color: #3a3e47;
}

.hosted-provider-card.is-selected {
  border-color: var(--color-primary);
  background: rgba(139, 157, 255, 0.15);
}

.hosted-provider-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #EDEDED;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-card-tags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hosted-provider-tag {
  border: 0;
  border-radius: 4px;
  padding: 2px 8px;
  background: #8B9DFF26;
  color: #8B9DFF;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
  white-space: pre;
}

/* Once a provider is connected its status pill is the only tag worth reading,
   so the marketing tag steps aside. */
.hosted-provider-card-tags:has(.hosted-provider-card-connection:not([hidden])) .hosted-provider-tag {
  display: none;
}

.hosted-provider-card-connection {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 4px;
  padding: 3px 8px;
  background: #6EE7B726;
  color: #6EE7B7;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0;
}

.hosted-provider-credential {
  margin-top: 22px;
}

/* Onboarding-only provider layout. Scoped to the wizard column (and, for the
   width, to the step that actually renders the picker) so the chat page's
   .agent-provider-surface keeps its own sizing and spacing. */
.hosted-wizard-content:has(.hosted-provider-picker) {
  width: min(700px, 100%);
}

/* ── Connect your AI · onboarding step 5 ──────────────────────────────────
   The chat page renders this same picker inside a bordered .agent-provider-
   surface card. On the wizard there is no outer card: the header sits on the
   page and the credential panel below is the only surface. */
.hosted-wizard-content .agent-provider-surface {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hosted-wizard-content .agent-provider-surface-header {
  display: block;
  margin-bottom: 32px;
  padding: 0;
  background: transparent;
}

.hosted-wizard-content .agent-provider-surface-header .hosted-wizard-subtitle {
  margin-bottom: 0;
}

.hosted-wizard-content .hosted-provider-picker {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* The dialog scrolls its picker inside a fixed-height modal; the wizard step
     scrolls with the page. This has to be unset rather than left alone: a box
     with `overflow-y: auto` computes `overflow-x: visible` to `auto`, so the
     full-bleed children below would turn the whole picker into a horizontal
     scroller and drag the panel and note along with the card strip. */
  overflow: visible;
}

.hosted-provider-picker--no-disconnect [data-agent-provider-target="disconnectOpenai"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="disconnectOllama"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="openaiDisconnectConfirm"],
.hosted-provider-picker--no-disconnect [data-agent-provider-target="ollamaDisconnectConfirm"] {
  display: none !important;
}

/* The credential panel is a surface in its own right, with whichever step the
   provider is on centred inside it. min-height rather than height: the model
   picker and device-code states are taller than the bare sign-in button. */
.hosted-wizard-content .hosted-provider-credential {
  display: flex;
  min-height: 356px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.hosted-wizard-content .hosted-provider-credential>* {
  margin-top: 0;
}

.hosted-wizard-content .hosted-provider-credential>.hosted-provider-device-code,
.hosted-wizard-content .hosted-provider-credential>.hosted-provider-model-picker,
.hosted-wizard-content .hosted-provider-credential>.hosted-provider-disconnect-confirm {
  width: 100%;
}

/* Form-shaped content keeps a readable measure inside the wide panel */
.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.field,
.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.hosted-provider-notice {
  width: 100%;
  max-width: 420px;
}

.hosted-wizard-content [data-agent-provider-target="ollamaPanel"]>.mx-btn {
  width: fit-content;
}

/* A 14-inch laptop has enough width for the desktop wizard but substantially
   less height. Compact the provider step so its single forward action remains
   visible; credential states that need more room can still grow naturally. */
@media (min-width: 1040px) and (max-height: 900px) {
  .hosted-wizard-main:has(.hosted-provider-picker) {
    padding-block: 20px;
  }

  .hosted-wizard-content .agent-provider-surface-header {
    margin-bottom: 16px;
  }

  .hosted-wizard-content .hosted-provider-picker {
    gap: 12px;
  }

  .hosted-wizard-content .hosted-provider-credential {
    min-height: 240px;
    padding: 24px 32px;
  }

  .hosted-wizard-main:has(.hosted-provider-picker) .hosted-wizard-footer {
    margin-top: 12px;
    padding-top: 12px;
  }
}

/* Closing note: mint dot, then one line of secondary text */
.hosted-provider-credentials-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: #1a1a1a;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 19px;
}

.hosted-provider-credentials-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-sentiment-up);
}

.hosted-provider-help,
.hosted-provider-status,
.hosted-provider-device-code {
  margin: 7px 0 0;
  color: #868b95;
  font-size: 0.75rem;
  line-height: 1.5;
}

.hosted-provider-status {
  color: #9ea3ad;
}

.hosted-provider-status--success {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--gn) 28%, transparent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: color-mix(in srgb, var(--gn) 9%, transparent);
  color: var(--color-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
}

.hosted-provider-status--success::before {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gn) 14%, transparent);
  color: var(--gn);
  content: "✓";
}

/* The one-time code owns the panel: plain copy on top, the code in its own
   surface, then the single primary action. */
.hosted-provider-device-code {
  display: grid;
  gap: 6px;
  margin-top: 0;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
}

.hosted-provider-device-code-title,
.hosted-provider-device-code-instruction {
  margin: 0;
}

.hosted-provider-device-code-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-device-code-instruction {
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 400;
}

.hosted-provider-device-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0;
  padding: 28px 32px;
  border-radius: 12px;
  background: #131417;
}

.hosted-provider-device-code code {
  color: #f7f8f8;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 20px;
  line-height: 100%;
  white-space: nowrap;
}

.hosted-provider-device-code-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.hosted-provider-device-code-action {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b9dff;
  cursor: pointer;
}

.hosted-provider-device-code-action svg {
  width: 24px;
  height: 24px;
}

.hosted-provider-device-code-action:hover,
.hosted-provider-device-code-action:focus-visible {
  background: rgb(139 157 255 / .12);
}

.hosted-provider-device-code-action.is-copied {
  color: #FFFFFF;
}

.hosted-provider-device-code>.mx-btn {
  justify-self: start;
  margin-top: 4px;
}

.hosted-provider-model-picker {
  position: relative;
  display: grid;
  gap: 24px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 8px;
}

.hosted-provider-model-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  background: rgb(12 13 16 / .88);
  color: #c4c4c4;
  font-size: .8125rem;
  font-weight: 600;
}

.hosted-provider-model-loading span {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(139 157 255 / .3);
  border-top-color: #8b9dff;
  border-radius: 50%;
  animation: hosted-provider-spin .7s linear infinite;
}

@keyframes hosted-provider-spin {
  to {
    transform: rotate(1turn);
  }
}

.hosted-provider-model-picker-title,
.hosted-provider-model-picker-help {
  margin: 0;
}

.hosted-provider-model-picker-title {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.hosted-provider-model-picker-help {
  margin-top: 4px;
  color: #C4C4C4;
  font-size: 14px;
  line-height: 20px;
}

.hosted-provider-model-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hosted-provider-model-fields .field {
  margin: 0;
  background: #1a1a1a;
  padding: 12px 16px;
  border: unset;
}

.hosted-provider-model-fields .field-input {
  min-height: 20px;
  background: #1a1a1a;
  color: #f7f8f8;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.hosted-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* API key row: label over input, with Paste parked on the right. */
.hosted-provider-key-field {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label paste"
    "input paste";
  align-items: center;
  column-gap: 12px;
  background: #1a1a1a;
  border: unset;
}

.hosted-provider-key-field .field-label {
  grid-area: label;
}

.hosted-provider-key-field .field-input {
  grid-area: input;
}

.hosted-provider-key-paste {
  grid-area: paste;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: #141414;
  color: var(--color-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}

.hosted-provider-key-paste:hover {
  background: #2c2c2c;
}

.hosted-provider-disconnect-confirm {
  display: grid;
  gap: 4px;
}

/* The destructive answer gets its own breathing room under the question, and
   both answers carry the same weight, so they share one column width. */
.hosted-provider-disconnect-confirm .hosted-provider-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 174px));
  padding-top: 20px;
}

.btn .btn-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.btn.hosted-provider-danger {
  background: var(--coral-down);
  border-color: var(--coral-down);
  color: var(--color-background);
}

.btn.hosted-provider-danger:hover {
  background: #fdb9b9;
}

.hosted-provider-notice {
  padding: 11px 14px;
  border-radius: 6px;
  background: #FCD34D1A;
  color: #EDEDED;
  font-size: 11px;
  font-weight: 500;
  line-height: 15px;
}

.hosted-provider-notice strong {
  color: var(--color-warning-400);
  font-weight: 500;
}

.hosted-provider-developer-settings {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  border-top: 1px solid #252833;
  padding-top: 20px;
  padding-bottom: 14px;
}

.hosted-provider-developer-settings h3 {
  margin: 2px 0 4px;
  color: var(--color-text);
  font-size: 16px;
}

.hosted-provider-developer-settings p:not(.hosted-provider-label) {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.hosted-provider-developer-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #282b35;
  border-radius: 8px;
  padding: 12px 14px;
  background: #101116;
}

.hosted-provider-developer-setting>div {
  display: grid;
  gap: 3px;
}

.hosted-provider-developer-setting strong {
  color: var(--color-text);
  font-size: 13px;
}

.hosted-provider-developer-setting span {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* ── hosted onboarding · tablet + mobile ──────────────────────────────────
   Past this width the two-column wizard stops being comfortable: the pitch
   panel and the 700px measure cannot both hold their size. The panel is
   dropped for a top bar carrying the logo and the step as dots, and the
   footer collapses its leading action to an icon — the [Mobile] frames. */
@media (max-width: 1039px) {
  .hosted-wizard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hosted-wizard-sidebar {
    display: none;
  }

  .hosted-wizard-topbar {
    display: flex;
  }

  .hosted-wizard-main {
    min-height: 0;
    padding: 16px;
  }

  .hosted-wizard-title {
    margin-bottom: 8px;
  }

  .hosted-wizard-subtitle {
    margin-bottom: 32px;
  }

  /* The hairline runs edge to edge while the actions stay on the 16px gutter */
  .hosted-wizard-footer {
    width: auto;
    align-self: stretch;
    align-items: flex-end;
    gap: 16px;
    margin: 16px -16px 0;
    padding: 16px 16px 0;
  }

  /* Square icon button. `.btn`/`.btn-ghost` size themselves for a text label
     (91px min-width, 156px width, 12px/24px padding) — every one of those has
     to be unwound, and flex-none keeps the footer row from shrinking it. */
  .hosted-wizard-footer .hosted-wizard-back {
    position: relative;
    flex: none;
    box-sizing: border-box;
    width: 44px;
    min-width: 0;
    height: 44px;
    min-height: 0;
    padding: 0;
    gap: 0;
    aspect-ratio: 1 / 1;
  }

  .hosted-wizard-back-icon {
    display: block;
  }

  .hosted-wizard-back-label {
    /* Kept in the accessibility tree — the icon alone carries no name */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hosted-wizard-footer-actions {
    flex: 1;
    width: auto;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .hosted-wizard-footer-actions .mx-btn--solid {
    width: 100%;
  }

  /* Runtime has no primary action while it waits; its note holds the right edge */
  .hosted-wizard-footer-note {
    margin: auto 0 auto auto;
  }

  .hosted-runtime-stage {
    padding-top: 40px;
  }

  /* Wallet: the download button keeps its size and the status moves beneath it */
  .hosted-wallet-download {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* The one-time code stops sharing its row well before the wizard reflows: past
   this width the code and its actions collide. */
@media (max-width: 781px) {
  .hosted-provider-device-code-row {
    flex-direction: column;
  }
}

/* Narrow screens swipe through the providers instead of stacking them: the
   cards keep their width and the row scrolls, snapping onto each card.

   The switch happens here rather than at the dialog's own breakpoint because
   two columns stop fitting first: below this the card body is narrower than
   `name + tag`, and the tag — `white-space: pre`, in a flex row whose items
   cannot shrink past their content — spills out of the card. */
@media (max-width: 561.98px) {
  .hosted-provider-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 82%);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .hosted-provider-grid::-webkit-scrollbar {
    display: none;
  }

  .hosted-provider-card {
    scroll-snap-align: start;
    align-items: self-start;
  }
}


@media (max-width: 520px) {

  /* Full-bleed inside the dialog: the dialog hands its horizontal padding to
     each block, and the strip is the one that carries it inside itself. It can
     then run edge to edge with the first card still in line, so the next card
     is cut by the dialog edge instead of by padding.

     At this width the dialog also stops floating and takes the whole screen,
     so the frame lines up with the viewport it is measured against. */
  /* Full-screen sizing belongs to the modal alone; the inline onboarding panel
     keeps flowing with the page. */
  .agent-provider-dialog {
    height: 100dvh;
  }

  .agent-provider-surface {
    padding-inline: 0;
    padding-bottom: 0;
  }

  .agent-provider-surface-header,
  .agent-provider-surface .hosted-provider-picker> :not(.hosted-provider-grid, .hosted-provider-notice) {
    padding-inline: 16px;
  }

  /* The notice is a filled pill, so it takes the inset as margin and keeps its
     own padding — otherwise its background runs to the screen edge. */
  .agent-provider-surface .hosted-provider-picker>.hosted-provider-notice {
    margin-inline: 16px;
  }

  .agent-provider-surface-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }

  .agent-provider-surface .hosted-provider-picker {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .agent-provider-surface .hosted-provider-grid {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .hosted-provider-model-fields {
    grid-template-columns: 1fr;
  }

  /* Once the cards swipe, the panel keeps its vertical breathing room but gives
     the horizontal padding back to the content. Every staged variant is listed
     so none of them out-specifies this. */
  .agent-provider-surface .hosted-provider-credential,
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-device-code:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-key-field:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-model-picker:not([hidden])),
  .agent-provider-surface .hosted-provider-credential:has(.hosted-provider-disconnect-confirm:not([hidden])) {
    padding: 48px 16px;
    margin: 16px;
  }

  /* Confirm and Disconnect stop sharing a row — each gets its own. The
     disconnect confirmation keeps Cancel beside its answer. */
  .hosted-provider-model-picker .hosted-provider-actions {
    display: grid;
    /* Own row each, but the buttons keep a fixed width instead of stretching. */
    grid-template-columns: minmax(0, 174px);
    justify-content: center;
  }

  /* One column of controls: the provider CTAs read better centred under them. */
  .hosted-provider-device-code>.mx-btn {
    justify-self: center;
  }

  .hosted-provider-device-code-row {
    padding: 20px 16px;
  }

  .hosted-provider-device-code code {
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
    width: 100%;
    /* letter-spacing trails the last glyph; this keeps the row optically centred. */
    text-indent: 8px;
  }

  /* Same treatment for the key form: Paste sits under the field. */
  .hosted-provider-key-field {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "input"
      "paste";
    row-gap: 4px;
  }

  .agent-provider-surface [data-agent-provider-target="ollamaPanel"]>.mx-btn {
    align-self: center;
  }

  .hosted-wizard-title {
    font-size: 2rem;
  }
}

/* Onboarding's Connect your AI on phones. Two blocks leave the 16px gutter and
   run to the viewport edge: the card strip, so the next card is cut by the
   screen rather than by padding, and the credential panel, which becomes a flat
   band with its own inner gutter instead of a rounded surface. The closing note
   stays on the gutter.

   Deliberately placed after the dialog's 520px block even though it opens at a
   wider width: that block hands the panel `padding: 48px 16px; margin: 16px`
   across every staged variant and the wizard needs the opposite, and a media
   query's position in the file — not its breakpoint — decides the cascade. The
   four classes clear the `:has()` variants on specificity; .hosted-wizard-content
   keeps the chat dialog out of it. */
@media (max-width: 561.98px) {

  /* Both of these come from the dialog's full-screen mode, where the surface is
     the viewport. On the wizard .hosted-wizard-main already owns the gutter. */
  .hosted-wizard-content .agent-provider-surface-header {
    margin-bottom: 24px;
    padding-top: 0;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker {
    padding-bottom: 0;
  }

  .hosted-wizard-content .hosted-provider-grid,
  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential {
    width: auto;
    margin: 0 -16px;
  }

  .hosted-wizard-content .hosted-provider-grid {
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential {
    min-height: 0;
    gap: 16px;
    padding: 24px 16px;
    border-radius: 0;
  }

  /* The panel absorbs whatever height is left between the card strip and the
     closing note, so the note sits on the footer rather than floating under a
     fixed-height box. Every ancestor down to it has to pass the height along:
     a percentage-free `flex: 1` only resolves if its parent has a definite
     height, which the wizard's `1fr` grid row gives .hosted-wizard-main. */
  .hosted-wizard-content:has(.hosted-provider-picker),
  .hosted-wizard-content .agent-provider-surface {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker {
    flex: 1;
    min-height: 0;
  }

  .hosted-wizard-content .agent-provider-surface .hosted-provider-picker .hosted-provider-credential:not([hidden]) {
    flex: 1;
  }
}

.banner-feedback {
  margin-top: 10px;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-foreground);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.banner-feedback.ok {
  background: var(--color-success-bg-opacity);
  color: var(--color-success-400);
}

.banner-feedback.info {
  background: var(--color-info-bg-opacity);
  color: var(--color-primary);
}

.banner-feedback.error {
  background: var(--color-danger-bg-opacity);
  color: var(--color-danger-300);
}

.banner-feedback.warn {
  background: var(--color-warning-bg-opacity);
  color: var(--color-warning-400);
}

/* ── terms ────────────────────────────────────────────────────── */
.terms {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--spacing-4);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  cursor: pointer;
}

.terms a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface-raised);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 120ms, border-color 120ms;
}

.checkbox:hover {
  border-color: var(--color-primary);
}

.checkbox:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}

.recaptcha-slot {
  width: 256px;
  min-height: 60px;
  margin-top: var(--spacing-4);
}

.recaptcha-slot .grecaptcha-badge {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── grids ────────────────────────────────────────────────────── */
.team-grid,
.market-grid,
.size-grid,
.download-grid,
.install-steps {
  display: grid;
  gap: var(--spacing-2);
}

.team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--spacing-4);
}

.market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-3);
}

.size-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-3);
}

.install-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--spacing-4);
}

@media (max-width: 720px) {

  .team-grid,
  .market-grid,
  .size-grid,
  .download-grid,
  .install-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {

  .market-grid,
  .size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
  }

  .download-grid,
  .install-steps {
    grid-template-columns: 1fr;
  }
}

/* ── agent card ───────────────────────────────────────────────── */
.agent-card {
  min-height: 238px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.125rem;
  background: var(--color-surface-raised);
}

.agent-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--spacing-3);
}

.avatar {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-style: normal;
  line-height: 2rem;
}

.avatar-cooper {
  background: linear-gradient(135deg, #8b1e3f 0%, #d2415c 100%);
}

.avatar-sage {
  background: linear-gradient(135deg, #1e3a8b 0%, #4f6fc8 100%);
}

.agent-name {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem;
  letter-spacing: var(--text-hero--letter-spacing);
}

.agent-role,
.agent-copy,
.file-name {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

.agent-copy {
  margin-top: var(--spacing-4);
}

.agent-card .field {
  margin-top: var(--spacing-8);
}

/* ── choice cards (markets) ───────────────────────────────────── */
.choice-card {
  min-height: 107px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem var(--spacing-4);
  background: var(--color-background);
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.choice-card:hover,
.choice-card[aria-pressed="true"],
.size-card:hover,
.size-card[aria-pressed="true"] {
  border-color: var(--color-primary);
}

.choice-card[aria-pressed="true"],
.size-card[aria-pressed="true"] {
  background: rgb(139 157 255 / 0.25);
  color: #fff;
}

.choice-card[aria-pressed="true"] *,
.size-card[aria-pressed="true"] * {
  color: #fff;
}

.choice-code {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

.choice-title {
  display: block;
  margin-top: 4px;
  color: var(--color-foreground);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: -0.01em;
}

.size-value {
  display: block;
  margin-top: 4px;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.04em;
}

.choice-desc,
.size-desc {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: var(--text-micro--line-height);
}

/* ── size card ────────────────────────────────────────────────── */
.size-card {
  min-height: 102px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.625rem var(--spacing-4);
  background: var(--color-background);
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

@media (max-width: 820px) {
  .choice-card {
    min-height: 132px;
    padding: 1.25rem 1.375rem;
  }

  .size-card {
    min-height: 132px;
    padding: 2rem var(--spacing-4);
  }

  .choice-title {
    margin-top: 0.625rem;
    font-size: 1.75rem;
    line-height: 2rem;
  }

  .choice-desc,
  .size-desc {
    margin-top: 0.625rem;
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
  }

  .size-value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

/* ── download block ───────────────────────────────────────────── */
.download-block {
  margin-top: var(--spacing-8);
}

.download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-top: var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.download-col {
  display: grid;
  align-content: start;
  min-height: 290px;
  padding: var(--spacing-4) 1.125rem;
}

.download-col+.download-col {
  border-left: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .download-col+.download-col {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .download-col {
    min-height: auto;
  }
}

.download-index {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
}

.download-copy {
  margin-top: var(--spacing-6);
}

.download-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.625rem;
}

.file-name {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.download-col .btn {
  width: 100%;
  margin-top: 1.75rem;
}

.link-list {
  margin-top: var(--spacing-6);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.link-list a {
  color: var(--color-primary);
  text-decoration: underline;
}

.link-list ul.list-disc {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  list-style: disc;
}

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

  .download-col {
    min-height: auto;
    padding: 2rem;
  }

  .download-col+.download-col {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .download-index {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .download-title {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .file-name {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .download-col .btn {
    margin-top: 2rem;
  }

  .link-list {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.warning {
  margin-top: var(--spacing-6);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: var(--text-micro--line-height);
}

/* ── before install card ──────────────────────────────────────── */
.before-card {
  margin-top: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.375rem;
  background: var(--color-surface-raised);
}

.before-title {
  margin: 0;
  color: var(--color-foreground);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: var(--text-body-sm--line-height);
}

.before-copy {
  margin: 0;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.install-step {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: var(--spacing-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  line-height: var(--text-micro--line-height);
  list-style: none;
}

.install-step strong {
  display: grid;
  width: 20px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  font-size: 0.625rem;
}

.install-steps {
  list-style: none;
  padding: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-8 {
  margin-top: var(--spacing-8);
}

.normal-case {
  text-transform: none;
  letter-spacing: 0;
}

/* ── toast (centralized notifications) ────────────────────────── */
.toast {
  position: fixed;
  top: 13px;
  right: auto;
  left: 50%;
  min-width: 0;
  max-width: calc(100% - 26px);
  padding: 16px;
  gap: 12px;
  background-color: var(--moonx-raised);
  background-image: linear-gradient(140deg, rgba(166, 255, 61, .12), transparent 62%);
  border: 1px solid rgba(166, 255, 61, .42);
  border-radius: var(--radius-16);
  color: var(--color-foreground);
  font-size: 13px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55);
  z-index: 300;
  transform: translateX(-50%) translateY(-160%);
  opacity: 0;
  transition: all .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.toast .toast-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: rgba(166, 255, 61, .14);
  color: var(--moonx-green);
}

.toast .ic {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}

.toast-copy {
  min-width: 0;
}

.toast:has(#toast-link:not([hidden])) .toast-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.toast:has(#toast-link:not([hidden])) #toast-title,
.toast:has(#toast-link:not([hidden])) #toast-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#toast-link {
  flex-shrink: 0;
  gap: var(--space-2);
  text-decoration: none;
}

#toast-link[hidden] {
  display: none;
}

#toast-title,
#toast-detail {
  display: block;
}

#toast-detail[hidden] {
  display: none;
}

.toast #toast-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.toast #toast-detail {
  margin-top: 2px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast.info {
  border-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 62%);
}

.toast.info .toast-icon {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

.toast.error {
  border-color: color-mix(in srgb, var(--color-sentiment-down) 42%, transparent);
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--color-sentiment-down) 12%, transparent), transparent 62%);
}

.toast.error .toast-icon {
  background: color-mix(in srgb, var(--color-sentiment-down) 14%, transparent);
  color: var(--color-sentiment-down);
}

.toast.warn {
  border-color: color-mix(in srgb, var(--color-sentiment-hold) 42%, transparent);
  background-image: linear-gradient(140deg, color-mix(in srgb, var(--color-sentiment-hold) 12%, transparent), transparent 62%);
}

.toast.warn .toast-icon {
  background: color-mix(in srgb, var(--color-sentiment-hold) 14%, transparent);
  color: var(--color-sentiment-hold);
}

.ic {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── turbo progress bar ───────────────────────────────────────── */
.turbo-progress-bar {
  height: 2px;
  background: var(--color-primary);
}

/* ── legacy short tokens (kept so funds/* views still work) ───── */
:root {
  --bg: var(--color-background);
  --bg1: var(--color-surface);
  --bg2: var(--color-surface-raised);
  --bg3: var(--moonx-raised);
  --bg4: var(--moonx-raised);
  --ln: var(--moonx-line);
  --ln2: var(--color-border);
  --ln3: var(--moonx-line-strong);
  --fg: var(--color-foreground);
  --fg2: var(--color-text-secondary);
  --fg3: var(--moonx-text-secondary);
  --mu: var(--color-text-muted);
  --mu2: var(--moonx-text-secondary);
  --mu3: var(--moonx-text-secondary);
  --pr: var(--color-primary);
  --pr-h: var(--moonx-blue-high);
  --pr-d: var(--moonx-blue-low);
  --prs: color-mix(in srgb, var(--moonx-blue) 12%, transparent);
  --prl: color-mix(in srgb, var(--moonx-blue) 30%, transparent);
  --gn: var(--color-sentiment-up);
  --gns: color-mix(in srgb, var(--moonx-green) 12%, transparent);
  --rd: var(--color-sentiment-down);
  --yw: var(--color-sentiment-hold);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-mono);
  --r: 8px;
  --rs: 6px;
  --rl: 12px;

  /* cockpit tokens */
  --app-bg: var(--moonx-page);
  --nav-bg: var(--moonx-page);
  --panel-bg: var(--moonx-card);
  --panel-head: var(--moonx-raised);
  --app-line: var(--moonx-line);
  --app-line-strong: var(--moonx-line-strong);
  --app-muted: var(--moonx-text-secondary);
  --app-dim: var(--moonx-text-secondary);
  --app-fg: var(--moonx-text);
  --color-surface-hover: var(--moonx-raised);
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-state: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════
   cockpit shell (funds#index)
   ════════════════════════════════════════════════════════════════ */

.app-shell {
  min-height: 100vh;
  background: var(--app-bg);
}

.sidebar {
  position: fixed;
  inset: 52px auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: min(280px, 86vw);
  overflow-y: auto;
  /* Figma Sidebar/Desktop (node 73:69): bg/page, not bg/card. */
  background: var(--moonx-page);
  border-right: 1px solid var(--app-line);
  transform: translateX(-100%);
  transition: transform var(--motion-state);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* <nav> is the whole rail per Figma's Sidebar/Desktop node: 20px/12px
   padding, 4px gap, wordmark/wallet/items/log-out as direct flex children —
   no separate head or footer chrome (removed; see
   docs/design-system/HANDOFF.md). */
.sidebar nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
  padding: 20px 12px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px;
}

/* Mobile-only close button; shown in the mobile block, hidden everywhere else.
   Needs .sidebar-head to outrank .icon-button's display:inline-grid. */
.sidebar-head .sidebar-head-close {
  display: none;
}

/* logo + wordmark stay left; the collapse button is pushed to the right. */
.sidebar-head .sidebar-collapse-button {
  margin-left: auto;
}

.sidebar-collapse {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
  color: var(--app-dim);
}

.sidebar-collapse:hover {
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

/* Rail nav items (.nav-rail-item, .nav-rail-icon, etc.) moved to
   core-components.css — rebuilt against Figma's Nav Item / Rail. */

/* Add funds — filled accent button */
.nav-add-funds {
  min-height: 32px;
  margin: 0 8px 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-background);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background var(--motion-fast);
}

.nav-add-funds:hover {
  background: #6b77e0;
}

/* Disabled / coming-soon rows: styled like nav-link but inert */
.nav-link.is-disabled {
  color: var(--app-dim);
  opacity: 0.55;
  cursor: default;
}

.nav-link.is-disabled:hover {
  background: transparent;
  color: var(--app-dim);
}

.nav-soon-badge {
  font-family: var(--font-mono);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 12%;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: var(--color-foreground-bg-subtle);
  color: var(--color-neutral-300);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

/* Footer: user identity + live status, pinned to the bottom */
.sidebar-footer {
  position: relative;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--app-line);
  transition: background var(--motion-fast);
}

/* The whole footer strip takes the hover wash, and holds it while its menu
   is open. */
.sidebar-footer:hover,
.sidebar-footer:has(.sidebar-footer-trigger[aria-expanded="true"]) {
  background: var(--color-foreground-bg-subtle);
}

.sidebar-footer-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* Rows run edge to edge, so the menu pads vertically only and clips them to
   its radius. */
.footer-menu {
  position: fixed;
  bottom: 64px;
  left: 196px;
  z-index: 200;
  width: 220px;
  padding: 4px 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow:
    0 0 0 1px rgb(16 24 40 / 0.03),
    0 6px 12px rgb(16 24 40 / 0.11),
    0 14px 32px rgb(16 24 40 / 0.06);
}

.footer-menu-header {
  padding: 8px 12px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--color-border);
}

.footer-menu .nav-link {
  min-height: 36px;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 0;
  color: var(--color-foreground);
  line-height: 20px;
}

.footer-menu .nav-link:hover {
  background: var(--color-surface-hover);
}

/* Icons take the row's ivory text color, per the design. */
.footer-menu .nav-link svg {
  display: block;
  flex: 0 0 auto;
}

.sidebar-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sidebar-footer-name {
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer-status {
  display: inline-flex;
  font-family: var(--font-mono);
  align-items: center;
  gap: 5px;
  color: var(--app-dim);
  font-size: 10px;
  line-height: 14px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sentiment-up, #4ade80);
}

.sidebar-footer-settings {
  width: 28px;
  height: 28px;
  align-content: center;
  justify-items: center;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--app-dim);
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar .brand,
.mobile-bar .brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--app-fg);
}

.mobile-bar .brand-logo {
  height: 26px;
}

/* The mobile bar names the page it's on instead of the app — see
   _cockpit_sidebar's mobile_title. Truncates instead of wrapping so a long
   CEO name ("Chat with <name>") never grows the fixed 52px bar. */
.mobile-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar .brand {
  display: none;
}

.brand-dot {
  color: #5e6ad2;
}

.brand-logo {
  display: block;
  width: auto;
  height: 44px;
}

.brand-wordmark {
  display: block;
  width: auto;
  height: auto;
}

.nav-icon-lg {
  width: 20px;
  height: 20px;
}

.nav-icon-xl {
  width: 24px;
  height: 24px;
}

.nav-icon-sm {
  width: 16px;
  height: 16px;
}

.nav-group-label {
  margin-top: 12px;
  padding: 12px;
  color: var(--app-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 13px;
  text-transform: uppercase;
}

.nav-group-label.spaced {
  padding-top: 12px;
}

.nav-link,
.sub-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: #b4b8c0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.nav-link:hover,
.sub-link:hover,
.nav-link[aria-current="page"],
.sub-link[aria-current="page"] {
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.nav-count-badge {
  font-family: var(--font-mono);
  padding: 6px 8px;
  font-size: 10px;
  letter-spacing: 12%;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg-subtle);
  color: var(--amber-hold);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

.nav-icon {
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.86;
}

.sub-link {
  min-height: 30px;
  padding: 6px 12px 6px 24px;
  color: var(--app-dim);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.avatar-mini {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: white;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.avatar-pablo {
  background: linear-gradient(135deg, #5b21b6 0%, #a78bfa 70.721%);
}

.mobile-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  /* A fixed height, not min-height — .mobile-sticky-tabs is pinned at a
     hardcoded top:52px right below this bar (application.css), so this
     can never grow past 52px and open a gap, e.g. from the display
     webfont swapping in after first paint and changing the title's
     line-height. */
  height: 52px;
  padding: 0 16px;
  background: rgb(8 9 10 / 0.94);
  border-bottom: 1px solid var(--app-line);
  backdrop-filter: blur(16px);
}

/* The sticky tabs line (.mobile-sticky-tabs) carries its own border-bottom
   directly beneath the bar — keeping this one too doubled the rule. */
body:has(.mobile-sticky-tabs) .mobile-bar {
  border-bottom: none;
}

.icon-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--nav-bg);
  color: var(--app-fg);
}

.sidebar-collapse-button {
  width: 40px;
  height: 40px;
  border: none;
}

/* Expanded: always show the collapse glyph; the mini logo is collapsed-only. */
.sidebar-collapse-button .collapse-icon-default {
  display: none;
  width: 32px !important;
  height: 44px !important;
  opacity: 1;
}

.sidebar-collapse-button .collapse-icon-hover {
  display: block;
}

.icon-button .nav-icon {
  width: 24px;
  height: 24px;
}

/* Mobile close glyph is 20px in the design. Same specificity as the rule above,
   so source order wins. */
.sidebar-head-close .nav-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.mobile-menu-button {
  height: 32px;
  width: 32px;
}

.mobile-menu-button .close-icon,
.mobile-menu-button[aria-expanded="true"] .menu-icon {
  display: none;
}

.mobile-menu-button[aria-expanded="true"] {
  background: var(--panel-head);
}

.mobile-menu-button[aria-expanded="true"] .close-icon {
  display: block;
}

.main-area {
  min-width: 0;
  padding-top: 52px;
  max-width: 1440px;
}

.app-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 28px;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-line);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  font-weight: 300;
}

.breadcrumb-separator {
  color: #3e424b;
}

.breadcrumb-current {
  color: var(--app-fg);
  font-weight: 500;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-refresh-button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}

.dashboard-refresh-button svg {
  width: 18px;
  height: 18px;
}

.dashboard-refresh-button:hover {
  border-color: var(--color-primary);
  background: var(--color-foreground-bg-subtle);
  color: var(--color-primary);
}

.dashboard-refresh-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dashboard-refresh-button:active {
  transform: rotate(45deg);
}

.dashboard-mobile-refresh-form {
  position: fixed;
  z-index: 51;
  top: 10px;
  right: 12px;
}

.dashboard-refresh-button--mobile {
  width: 32px;
  height: 32px;
  background: var(--nav-bg);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  border: 0;
  border-radius: var(--radius-md);
  padding: 5px 18px;
  background: var(--color-primary);
  color: var(--color-background);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  transition: filter var(--motion-fast), transform var(--motion-fast);
}

.button:hover {
  filter: brightness(1.06);
}

.button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35) brightness(0.72);
  opacity: 0.62;
}

.button:active {
  transform: translateY(1px);
}

.button-icon {
  width: 14px;
  height: 14px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-background);
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-sentiment-up);
}

.live-pill-paper {
  color: #cfd4de;
}

.live-pill-off {
  color: #d7c2c2;
}

.status-dot-paper {
  background: var(--color-warning-400);
}

.status-dot-off {
  background: var(--color-sentiment-down);
}

/* Copied from moonx-human-v19b.html: Opportunities. */
.content.markets-page {
  width: 100%;
  overflow-x: clip;
  /* Markets has six live data columns; it needs a wider reading column than
     narrative pages so Market, Price, and 24h all remain legible. */
  max-width: 900px;
  margin: auto;
  padding: 0 22px 32px;
  gap: 0;
  background: var(--bg);
  color: var(--txt)
}

.markets-hd {
  padding: 24px 0 12px
}

/* Below the sidebar breakpoint the title moved into the sticky mobile bar
   (_cockpit_sidebar's mobile_title) — this heading would just repeat it. */
@media (max-width: 1039px) {
  .markets-hd {
    display: none;
  }

  /* Replaces the vertical space .markets-hd (24px 0 12px) used to hold,
     now that it's gone — otherwise the search field lands flush against
     the mobile bar. */
  .content.markets-page {
    padding-top: 20px;
  }
}

.markets-hd h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.035em
}

.oppsearch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line-2);
  margin-bottom: 14px
}

.oppsearch>span {
  display: flex;
  color: var(--dim)
}

.oppsearch svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9
}

.oppsearch input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--txt);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600
}

.oppsearch input::placeholder {
  color: var(--dim);
  font-weight: 500
}

.opppills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px
}

.opprefresh {
  flex: none;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1px solid rgba(150, 195, 255, .18);
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .075), rgba(150, 195, 255, .015));
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap
}

.opphead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  background: var(--moonx-page);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim)
}

.opphead b {
  color: var(--txt)
}

.opphead .srt {
  padding-left: 11px
}

.opphead .fresh {
  margin-left: auto
}

.opprefresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none
}

.opprefresh svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9
}

.oppempty {
  text-align: center;
  padding: 40px 20px
}

.oppempty b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 19px
}

.oppempty span,
.content.markets-page .fine {
  display: block;
  font-size: 12px;
  color: var(--dim);
  font-weight: 600;
  margin-top: 7px
}

.content.markets-page .fine {
  text-align: center;
  margin-top: 18px
}

.content.markets-page .markets-hd h1 {
  font-family: var(--disp);
  font-weight: 800;
  color: var(--txt)
}

.content.markets-page .ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.13em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.oppsearch>span {
  flex: none;
  display: flex;
  color: var(--dim)
}

.oppsearch-clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none
}

.oppsearch-clear:hover {
  color: var(--txt)
}

.oppsearch svg {
  width: 17px;
  height: 17px
}

.oppsearch input::-webkit-search-cancel-button {
  display: none
}

.oppsearch:focus-within {
  border-color: rgba(45, 123, 255, .55)
}

.opppills {
  scrollbar-width: none
}

.opppills::-webkit-scrollbar {
  display: none
}

/* Item visuals now come from the .mx-tab Tab/Segmented component
   (core-components.css, `--wash`) — see app/views/markets/index.html.erb.
   .opprefresh (above) is deliberately NOT migrated — v19's own source
   comment says it "does not become a main button," it's a distinct refresh
   chip, not a tab. */
.opphead b {
  color: var(--txt);
  font-weight: 700
}

.opphead .srt {
  position: relative;
  padding-left: 11px
}

.opphead .srt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  transform: translateY(-50%)
}

.opprefresh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid rgba(150, 195, 255, .18);
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .075), rgba(150, 195, 255, .015));
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim)
}

.opprefresh:hover {
  color: var(--txt);
  border-color: rgba(150, 195, 255, .34)
}

.opprefresh svg {
  width: 13px;
  height: 13px
}

/* Visuals now come from the .mx-btn Tinted Button component
   (core-components.css) — see app/views/markets/_market_row.html.erb. Values
   already matched moonx-human-v19b.html exactly, so `.mx-btn--tinted` was
   built from these. */
.oppempty b {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em
}

.content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 32px);
  padding: 28px 16px 72px;
  overflow: hidden;
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.page-header-with-action {
  align-items: flex-start;
  gap: 14px;
}

.page-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 34px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 41px;
}

.page-subtitle {
  margin: 0;
  color: var(--app-muted);
  font-size: 14px;
  line-height: 17px;
}

.dashboard-title-block {
  display: grid;
  gap: 5px;
}

.dashboard-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dashboard-polymarket-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .page-header-with-action {
    flex-direction: row;
    justify-content: space-between;
  }
}

.app-shell .card,
.memo,
.data-table,
.position-table {
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  width: auto;
  animation: none;
}

.memo {
  display: flex;
}

.memo::before {
  content: "";
  width: 4px;
  flex: 0 0 4px;
  background: var(--color-primary);
}

.memo-body {
  padding: 16px 20px;
}

.memo-copy {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

.memo-author {
  margin: 6px 0 0;
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  line-height: 13px;
  text-transform: uppercase;
}

.chart-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.eyebrow {
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.66px;
  line-height: 13px;
  text-transform: uppercase;
}

.metric-large {
  margin: 4px 0;
  color: var(--color-sentiment-up);
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
}

.microcopy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: flex-end;
}

/* Item visuals now come from the .mx-tab Tab/Segmented component
   (core-components.css) — see app/views/funds/_pnl_card.html.erb. No v19
   equivalent exists for this range selector (it's an opusfund-only
   dashboard feature), so it was pointed at the same neutral card-pill style
   already used for #ptabs/#wtabs rather than left on its own drifted,
   pre-v19 rectangular style. */

.chart-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
}

.chart-wrap--empty {
  display: grid;
  min-height: 120px;
  place-items: center;
}

turbo-frame#pnl_card {
  display: block;
}

/* Turbo marks the frame [busy] while a range tab is fetching. The only loading
   state is the chart skeleton, brought back over the outgoing canvas — the
   headline and tabs stay untouched. */
turbo-frame#pnl_card[busy] .chart-skeleton--settled {
  opacity: 1;
  visibility: visible;
}

/* Placeholder held over the chart until Chart.js paints, and shown again while
   another range is fetched. chart_skeleton_controller marks it --settled once
   the chart exists; it stays in the DOM so it can be revived. */
.chart-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-items: end;
  padding: 0 0 28px;
  border-radius: var(--radius-md);
  background: var(--panel-head);
  pointer-events: none;
}

.chart-skeleton--settled {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fast), visibility var(--motion-fast);
}

/* Stand-in for the plotted line: a flat rule that sweeps left to right. */
.chart-skeleton__line {
  height: 2px;
  background: linear-gradient(90deg,
      var(--app-line) 0%,
      var(--app-line-strong) 35%,
      var(--app-muted) 50%,
      var(--app-line-strong) 65%,
      var(--app-line) 100%);
  background-size: 220% 100%;
  animation: chart-skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes chart-skeleton-sweep {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-skeleton__line {
    background: var(--app-line-strong);
    animation: none;
  }
}

/* A section rendered by shared/_lazy_frame. The wrapper stays out of the
   layout so the section's children space themselves as they would inline. The
   frame keeps a box of its own: a lazy frame only loads once that box is on
   screen, so `display: contents` there would leave it waiting forever. */
.lazy-frame {
  display: contents;
  gap: inherit;
}

.lazy-frame>turbo-frame {
  display: flex;
  flex-direction: column;
  gap: inherit;
  min-width: 0;
}

.lazy-skeleton {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.lazy-skeleton__bar {
  height: 88px;
  border-radius: 16px;
  background: linear-gradient(90deg,
      var(--moonx-card) 0%,
      var(--moonx-raised) 50%,
      var(--moonx-card) 100%);
  background-size: 220% 100%;
  animation: chart-skeleton-sweep 1.4s ease-in-out infinite;
}

.lazy-skeleton__bar--short {
  width: 60%;
  height: 40px;
}

/* One figure still on its way, sized to the text it stands in for. */
.lazy-text-skeleton {
  display: inline-block;
  width: 4.5em;
  height: .8em;
  border-radius: 6px;
  vertical-align: middle;
  /* It sits on a card, not the page, so it needs more lift than the section
     skeleton to read against --moonx-card. */
  background: linear-gradient(90deg,
      var(--moonx-raised) 0%,
      var(--moonx-line) 50%,
      var(--moonx-raised) 100%);
  background-size: 220% 100%;
  animation: chart-skeleton-sweep 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .lazy-text-skeleton,
  .lazy-skeleton__bar {
    background: var(--moonx-raised);
    animation: none;
  }
}

.lazy-frame-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px;
  padding: 14px 16px;
  border: 1px solid var(--moonx-line);
  border-radius: 16px;
  color: var(--moonx-text-secondary);
  font-size: 13px;
}

.pnl-chart {
  width: min(930px, 100%);
  min-width: 680px;
  height: 200px;
}

.axis-label,
.tick-label {
  fill: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.grid-line {
  stroke: var(--app-line);
  stroke-width: 1;
}

.area-fill {
  fill: url("#chartGradient");
}

.line-stroke {
  fill: none;
  stroke: var(--color-sentiment-up);
  stroke-width: 2;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.stat-card {
  min-height: 95px;
  padding: 14px 16px;
}

.stat-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
}

.stat-value {
  margin: 5px 0;
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 29px;
}

.app-shell .stat-card--aave {
  overflow: visible;
}

.aave-yield {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}

.aave-yield-info {
  min-width: 24px;
  min-height: 24px;
  border: 0;
  padding: 4px;
  background: none;
  color: var(--app-muted);
  cursor: pointer;
}

.aave-yield-info:focus-visible {
  outline: 2px solid var(--pr);
  border-radius: 4px;
}

.aave-yield-help {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-bg);
  color: var(--app-fg);
  font-size: 12px;
  line-height: 1.5;
}

.stat-note {
  margin: 0;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 13px;
}

@media (max-width: 719px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card--total {
    grid-column: 1 / -1;
  }

  .stat-card--total {
    order: 1;
  }

  .stat-card--available {
    order: 2;
  }

  .stat-card--wallet {
    order: 3;
  }

  .stat-card--open-bets {
    order: 4;
  }

  .stat-card--claimable {
    order: 5;
  }

  .stat-card--awaiting-resolution {
    order: 6;
  }

  .stat-card--aave {
    order: 7;
  }

  .stat-card--total {
    min-height: 112px;
    padding: 18px 16px;
  }

  .stat-card--available {
    border-color: var(--app-line-strong);
  }
}

.positive {
  color: var(--color-sentiment-up);
}

.negative {
  color: var(--color-sentiment-down);
}

.app-shell .warning {
  color: var(--color-sentiment-hold);
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  margin-top: 0;
}

/* modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgb(0 0 0 / 0.62);
}

.modal-backdrop.is-open {
  display: grid;
}

.modal {
  width: min(460px, 100%);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.42);
  overflow: hidden;
}

.modal-header,
.modal-body,
.modal-actions {
  padding: 18px 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--app-line);
  background: #101113;
}

.modal-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
}

.modal-subtitle {
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 13px;
  line-height: 16px;
}

.app-shell .modal .field {
  display: grid;
  gap: 8px;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
  background: transparent;
}

.app-shell .modal .field label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}

.app-shell .modal .field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 0 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
}

.modal-select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 0 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
  font-size: 13px;
  line-height: 18px;
}

/* A `<form>` wrapping a modal's body and its button row would otherwise
   collapse into ONE flex item, swallowing `.mx-modal`'s own column gap and
   leaving the copy block, the fields and the buttons flush against each
   other. `display: contents` lets the form's children join the modal's
   column directly; the form still submits, and it carries no accessible
   name, so it was never a form landmark there was anything to lose.

   Lives here, not in `core-components.css`: that file takes only rules
   actually checked against a Figma node, and this is markup plumbing for the
   HTML this app writes — Figma's modal frames are flat, with no form wrapper
   of their own. The `mx-` prefix is kept only because six call sites already
   use it. */
.mx-modal-form {
  display: contents;
}

/* The field stack inside the money sheets' `<form class="mx-modal-form">`.
   The form is `display: contents`, so this is what actually sits in the
   modal's column — and `.mx-modal` centres its children below the
   breakpoint, hence the explicit width. */
.modal-amount-body {
  display: grid;
  /* The container's own column gap, not a new spacing decision: this stack
     is a peer of `.mx-modal-copy` and `.mx-modal-actions`, so it sits on the
     same rhythm `.mx-modal` already sets (16 below the breakpoint, 20 above).
     An earlier pass used `--space-12` here, which matched no Figma value and
     no rule in this file. */
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
}

@media (min-width: 920px) {
  .modal-amount-body {
    gap: var(--space-20);
  }
}

/* The product type system distinguishes prose from compact metadata: labels
   and numeric values use the data face even when legacy component rules
   previously inherited Inter. Keep this list at the entrypoint so it wins
   over the older page/component layers imported above. */
.legends-fund-sheet__chase em,
.legends-fund-sheet__chase small,
.legends-fund-sheet__stats dt,
.legends-fund-sheet__shots h3,
.mx-pin-key--word,
.nav-group-label,
.eyebrow,
.agent-kicker,
.ticket-modal-label,
.mandate-summary-label,
.field-label-upper,
.agent-schedule-day,
.agent-chat-conversation-current,
.agent-chat-scheduled-run-heading strong,
.shots-page .lbl,
.shots-page .sw2 em,
.shots-page .stat>span,
.shots-page .stat-link>span,
.feed-page .lbl,
.mx-tag,
.mx-inline-table th {
  font-family: var(--font-mono);
}

.modal-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--app-muted) 50%), linear-gradient(135deg, var(--app-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px;
  padding-right: 34px;
}

.modal-select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.modal-error-message {
  margin: 0 0 14px;
  color: var(--rd);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: var(--text-body-sm--line-height);
}

.add-analyst-header {
  min-height: 76px;
  padding: 18px 22px 14px;
}

.add-analyst-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.add-analyst-copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.add-analyst-actions {
  padding: 12px 22px;
}

.helper-text {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 18px;
}

/* fill-main-wallet-modal's balance pill — v19's `.wpills`/`.wpill.m`
   (moonx-human-v19.html), not part of Figma's Modal node itself (110:3 has
   no pill). Mint border/value is v19's "main wallet" tone (`.wpill.m`);
   this modal only ever shows the main wallet, so the row wrapper and the
   other tones (`.wpill.v` etc) weren't ported, just the one variant.

   CORRECTED: `.wpill b`'s font-family was read from its first declaration
   (`--disp`, Inter) and missed v19's own later cascade layer — a block
   literally headed "MONO - every numeric readout leaves the display tier"
   (moonx-human-v19b.html ~line 1797) that reassigns `.wpill b`
   (and `.calc .v`, see `.take-shot-calc-value` below) to `--mono`
   (JetBrains Mono), weight 700, letter-spacing -.02em, tabular-nums —
   later in source order than the 800-weight/Inter declaration, so it wins.
   Same design-system rule as the token map's own Number group: "every
   figure that isn't prose is mono." Font-size/colour/layout are untouched
   by that block, so those stay as originally ported. */
.fill-wallet-pill {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 4px;
  min-width: 150px;
  padding: var(--space-12);
  background: var(--moonx-card);
  border: var(--border-hairline) solid rgba(166, 255, 61, 0.3);
  border-radius: var(--radius-lg);
}

.fill-wallet-pill em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
}

.fill-wallet-pill b {
  font-family: var(--font-mono);
  font-size: var(--text-number-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--moonx-green);
}

/* fill-main-wallet-modal step a2 — v19's `.sizes`/`.calc` (moonx-human-v19.html
   ~line 5303), the card route's preset-amount picker. `.fill-wallet-sizes`
   is a 4-up grid rather than `.take-shot-quick`'s flex row: v19 sizes it
   `grid-template-columns:repeat(4,1fr)`. Like the take-shot quick row these
   ARE shortcuts into a free-text field now (`.fill-wallet-custom` below),
   but they keep the take-shot quick row's own `.mx-btn--wash`/`aria-pressed`
   Tier-3 treatment — see its own comment in take-shot's CSS block above
   for why Wash, not Ghost/Tinted. `.fill-wallet-calc*` mirrors `.take-shot-calc*` 1:1 (same
   MONO/tabular-nums correction applies to `.fill-wallet-calc-value`), sized
   down from that row's `clamp(26px,8vw,36px)` since v19's own `#add-get` is
   a fixed 20px, not the fluid shot-payout figure. */
.fill-wallet-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  width: 100%;
}

.fill-wallet-sizes .mx-btn {
  width: 100%;
  padding-inline: var(--space-8);
}

/* Selected chip reuses `.mx-btn--tinted`'s own fill/glow/border numbers
   (core-components.css) rather than a solid blue fill — a highlighted Wash
   chip, not a Tinted button, but the same rgba(45,123,255,…) recipe. */
.fill-wallet-sizes .mx-btn--wash[aria-pressed="true"] {
  background: rgba(45, 123, 255, 0.18);
  box-shadow: inset 0 0 22px rgba(45, 123, 255, 0.3);
  border-color: rgba(45, 123, 255, 0.55);
  color: var(--moonx-text);
}

/* Free-entry alternative to the presets above -- a single source of truth
   (fill_wallet_controller.js#customAmountChanged/selectAmount): picking a
   preset fills this box, typing in it directly deselects every preset. 3:1
   matches the amount field being the primary input and the currency picker
   a secondary modifier on it. The <select> keeps its native appearance
   (no custom-drawn arrow, unlike .modal-select) -- just themed to match. */
.fill-wallet-custom {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-8);
  width: 100%;
}

.fill-wallet-custom-amount,
.fill-wallet-custom-currency {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--moonx-line);
  border-radius: var(--radius-sm);
  background: var(--moonx-well);
  padding: 0 var(--space-12);
  color: var(--moonx-text);
  font: inherit;
  font-size: 13px;
}

/* The native dropdown arrow sits flush in the padding-box's right edge --
   a wider right pad here (amount's own padding is untouched) pulls it in
   off the box's corner instead. */
.fill-wallet-custom-currency {
  padding-right: var(--space-24);
}

.fill-wallet-custom-amount::placeholder {
  color: var(--moonx-text-secondary);
  opacity: 1;
}

/* type="number"'s native spin buttons don't match this design system's
   plain themed fields (see the currency <select> above, kept native but
   restyled) -- number-ness stays for the mobile keypad + min/max/step
   semantics, the spinner itself goes. */
.fill-wallet-custom-amount::-webkit-outer-spin-button,
.fill-wallet-custom-amount::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fill-wallet-custom-amount {
  -moz-appearance: textfield;
}

.fill-wallet-custom-amount:focus,
.fill-wallet-custom-currency:focus {
  outline: none;
  border-color: var(--moonx-blue);
}

/* Min/max come back from Calm's listPaymentMethods per currency
   (fill_wallet_controller.js#updateLimits) -- empty until that first
   response lands, red once the typed amount falls outside the frame. */
.fill-wallet-limit-hint {
  min-height: 15px;
  margin-top: calc(-1 * var(--space-8) + 4px);
  font-size: 12px;
  color: var(--moonx-text-secondary);
}

.fill-wallet-limit-hint.is-invalid {
  color: var(--moonx-red);
}

.fill-wallet-calc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--moonx-raised);
}

.fill-wallet-calc-copy {
  min-width: 0;
}

.fill-wallet-calc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--moonx-text-secondary);
}

.fill-wallet-calc-label b {
  color: var(--moonx-text);
}

.fill-wallet-calc-sublabel {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
}

/* The live Calm quote sits in this line now (the calc row's right half is
   the amount input since v22), so its figure gets the same lift out of
   secondary grey that .fill-wallet-calc-label's own number gets. */
.fill-wallet-calc-sublabel b {
  color: var(--moonx-text);
}

.fill-wallet-calc-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--moonx-green);
  line-height: 1;
}

/* The typed figure, still styled as the same bold mono/green text — just
   editable now. `flex: 1` (rather than the old content-sized `ch` width)
   lets it fill the rest of `.fill-wallet-calc-value`'s row, so the whole
   remaining width of the card is one tap target and there's no leftover
   gap between the digits and the "USDC" suffix beside it. */
.fill-wallet-value-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  text-align: right;
  font: inherit;
  color: inherit;
}

.fill-wallet-value-input:focus,
.fill-wallet-value-input:focus-visible {
  outline: 0;
  box-shadow: none;
  text-decoration: none;
}

/* Currency picker replacing the plain "USDC" suffix — same inline mono/
   bold/green text as before, just with a trigger and caret appended.
   `position: relative` anchors the dropdown list below it. */
.fill-wallet-currency {
  position: relative;
  flex: none;
}

.fill-wallet-currency-trigger {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.fill-wallet-currency-caret {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--moonx-text-secondary);
  transition: transform var(--motion-fast);
}

.fill-wallet-currency-trigger[aria-expanded="true"] .fill-wallet-currency-caret {
  transform: rotate(180deg);
}

/* Opens downward, right-aligned to the trigger so it stays inside the
   card instead of overflowing past `.mx-modal`'s edge. */
.fill-wallet-currency-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 104px;
  padding: 4px;
  list-style: none;
  border-radius: var(--radius-14);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  background: var(--moonx-card);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.45);
}

.fill-wallet-currency-option {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-10);
  border: 0;
  border-radius: var(--radius-10);
  background: none;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--moonx-text-secondary);
  cursor: pointer;
}

.fill-wallet-currency-option:hover {
  background: var(--moonx-raised);
}

.fill-wallet-currency-option[aria-selected="true"] {
  color: var(--moonx-green);
}

/* A zero amount reads as unset, not a real $0 to pay — both the number and
   its "USDC" suffix fade to the sheet's placeholder grey. */
.fill-wallet-calc-value.is-empty {
  color: var(--moonx-text-secondary);
}

.fill-wallet-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--moonx-text-secondary);
}

.fill-wallet-hint b {
  color: var(--moonx-text);
}

/* Step wrappers (`[data-fill-wallet-target="step1"]`/`"step2"`) are the
   direct flex children of `.mx-modal` now, not its copy/pill/button/actions
   grandchildren — so each needs `.mx-modal`'s own flex-column + gap to keep
   spacing those pieces the same way once they're nested one level deeper. */
.fill-wallet-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
}

@media (min-width: 920px) {
  .fill-wallet-step {
    align-items: stretch;
    gap: var(--space-20);
  }
}

/* take-shot-modal — v19's `.wpills`/`.wpill.v`/`.sizes`/`.mvamt`/`.calc`
   (moonx-reference-mockup-v20/moonx-human-v19b.html), page-specific like
   `.fill-wallet-pill` above rather than a core-components.css addition —
   Figma's Modal node (110:3) has no amount-entry recipe of its own. Two
   pill tones only: mint (`--wallet`, same tone as `.fill-wallet-pill`) and
   blue (`--moons`, v19's `.wpill.v`) — the other v19 tones (`.wpill.k`/
   `.wpill.p`) have no call site here, not ported.

   `.take-shot-pill b`/`.take-shot-calc-value` carry the same MONO
   correction as `.fill-wallet-pill b` above — see that rule's own comment.
   `--text-number-lg` (22px/700/-.02em) is Figma's Number/lg token and
   matches `.wpill b`'s corrected computed value exactly; `.calc .v`'s own
   size is a fluid `clamp()` with no matching fixed token, so it keeps its
   literal value, only font-family/weight/letter-spacing corrected. */
.take-shot-pills {
  display: flex;
  gap: var(--space-8);
  width: 100%;
}

.take-shot-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-16) 18px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-16);
  background: var(--moonx-well);
}

.take-shot-banner-line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.take-shot-banner-market {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--moonx-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.take-shot-banner-side {
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: var(--moonx-blue);
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.take-shot-banner b {
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.take-shot-banner-arrow {
  color: var(--moonx-text-secondary);
  font-size: 15px;
}

.take-shot-banner-multiple {
  color: var(--moonx-green);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.take-shot-banner-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 11px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--moonx-text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.take-shot-banner-live:hover {
  color: var(--moonx-text);
}

.take-shot-banner-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moonx-green);
}

.take-shot-banner-live svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.take-shot-banner-economics {
  display: none;
}

.take-shot-banner-economics div {
  min-width: 0;
}

.take-shot-banner-economics dt {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.take-shot-banner-economics dd {
  margin: 3px 0 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.take-shot-banner-meta {
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.take-shot-status {
  width: 100%;
  margin: 0;
  color: var(--moonx-text-secondary);
  font-size: 12px;
}

.take-shot-status.is-error {
  color: var(--moonx-red);
}

.take-shot-status .spinner {
  margin-right: var(--space-8);
  vertical-align: -2px;
}

.take-shot-retry {
  align-self: flex-end;
}

.take-shot-closed {
  width: 100%;
}

.account-setup-progress {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-setup-progress li {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-12);
  align-items: center;
  color: var(--moonx-text);
}

.account-setup-progress li>span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--border-hairline) solid var(--moonx-blue);
  border-radius: var(--radius-full);
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: var(--text-number-xs);
}

.account-setup-progress b {
  font-family: var(--font-body);
  font-size: var(--text-body-default);
  font-weight: var(--text-body-strong--weight);
}

.account-setup-progress--complete {
  color: var(--color-success-400);
}

.account-setup-progress--next {
  color: var(--color-primary);
}

.account-setup-progress small {
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--moonx-raised);
  color: var(--color-text-muted);
  font-size: var(--text-body-fine);
  font-weight: 600;
}

.account-setup-kicker {
  margin: 0 0 var(--space-8);
  color: var(--moonx-blue);
  font-family: var(--font-mono);
  font-size: var(--text-label-wide);
  font-weight: var(--text-label-wide--weight);
  letter-spacing: var(--text-label-wide--letter-spacing);
}

.account-setup-invitation {
  display: grid;
  gap: var(--space-12);
  width: 100%;
}

.account-setup-capacity {
  margin: 0;
  color: var(--moonx-text-secondary);
  font-size: var(--text-body-fine);
  line-height: var(--text-body-fine--line-height);
}

.account-setup-actions {
  display: grid;
  gap: var(--space-12);
}

.account-setup-actions .mx-btn {
  width: 100%;
}

.account-setup-access {
  display: grid;
  gap: var(--space-16);
  margin-top: 14px;
}

.account-setup-access-divider {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-setup-access-divider::before,
.account-setup-access-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--moonx-line);
}

.account-setup-access-divider span {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.account-setup-access-card {
  padding: var(--space-20);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: 18px;
  background: var(--moonx-well);
}

.account-setup-access-title,
.account-setup-access-copy,
.account-setup-access-fine {
  margin: 0;
}

.account-setup-access-title {
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.account-setup-access-copy {
  margin-top: var(--space-8);
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.62;
}

.account-setup-access-actions {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-16);
}

.account-setup-access-action {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  padding: var(--space-16);
  text-decoration: none;
}

.account-setup-access-action.mx-btn--ghost {
  flex: 0 0 auto;
  padding-inline: 22px;
}

.account-setup-access-action svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: var(--space-2);
  fill: currentColor;
}

.account-setup-access-fine {
  margin-top: var(--space-12);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .account-setup-access-actions {
    flex-direction: column;
  }

  .account-setup-access-action {
    flex: 1 1 auto;
    width: 100%;
  }
}

.take-shot-closed p {
  margin: 0 0 var(--space-16);
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-default);
  font-weight: var(--text-body-default--weight);
  line-height: var(--text-body-default--line-height);
}

.take-shot-pill {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-12);
  background: var(--moonx-card);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-lg);
}

.take-shot-pill em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
}

.take-shot-pill b {
  font-family: var(--font-mono);
  font-size: var(--text-number-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.take-shot-pill--wallet {
  border-color: rgba(166, 255, 61, 0.3);
}

.take-shot-pill--wallet b {
  color: var(--moonx-green);
}

.take-shot-pill--moons {
  border-color: rgba(45, 123, 255, 0.34);
}

.take-shot-pill--moons b {
  color: var(--moonx-blue-high);
}

#shot-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  min-width: 0;
}

/* Grouped so the label/amount/quick-row trio is one `#shot-form` child.
   The form supplies its shared outer rhythm; this group keeps
   v19's own tighter internal spacing (`.mvamt` 10px, `.sizes` 12px) between
   the label/input/quick-row themselves. */
.take-shot-amount-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.take-shot-message-group {
  display: grid;
  gap: var(--space-8);
}

.take-shot-message-input {
  position: relative;
}

.take-shot-message-input select {
  position: absolute;
  top: 50%;
  right: var(--space-12);
  width: 30px;
  height: 30px;
  translate: 0 -50%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--moonx-text);
  text-align: center;
  outline: none;
  cursor: pointer;
}

.take-shot-message-input select:focus-visible {
  filter: drop-shadow(0 0 3px var(--moonx-blue-high));
}

.take-shot-message-input:focus-within .mx-input {
  border-color: var(--border-interactive);
}

.take-shot-message-input .mx-input {
  padding-right: 52px;
}

.take-shot-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
}

/* Amount field — same box v19's PIN entry and this sheet share: well
   background, line-2 border, mono type. */
.take-shot-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-10);
  padding: var(--space-16) 18px;
  border-radius: var(--radius-16);
  background: var(--moonx-well);
  border: var(--border-hairline) solid var(--moonx-line-strong);
}

.take-shot-amount.is-over {
  border-color: rgba(255, 59, 107, 0.55);
}

.take-shot-amount:focus-within {
  border-color: rgba(45, 123, 255, 0.55);
}

.take-shot-amount .cur {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--moonx-text-secondary);
}

.take-shot-amount input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* The global `input:focus-visible{box-shadow:var(--shadow-focus)}` rule
   (see this file's top-level reset) draws its own ring on the bare
   `<input>`, on top of `.take-shot-amount:focus-within`'s own border-colour
   change above — two competing indicators. v19's `.mvamt input` carries no
   focus ring of its own; the wrapper's border colour IS the focus state
   (`.mvamt:focus-within{border-color:rgba(45,123,255,.55)}`), so cancel the
   global one here rather than let it stack. */
.take-shot-amount input:focus-visible {
  box-shadow: none;
}

.take-shot-amount input::placeholder {
  color: var(--moonx-text-secondary);
  font-weight: 500;
}

/* Quick-amount row — Tier 3 Wash per the Modal CTA rule (core-components.css):
   these neither advance nor refuse the shot, they're a shortcut into the
   amount field, so they get the utility skin, not Ghost/Tinted. The
   `aria-pressed` sync (take_shot_controller.js) needed its own colour since
   `.mx-btn--wash` has no persisted-selected state of its own — v19's own
   quick-amount active state (`.sizes button[aria-pressed=true]`) is a flat
   `--violet` fill, reused here as the same token. */
.take-shot-quick {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.take-shot-quick .mx-btn {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 12px 4px 8px;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-lg);
  background: var(--moonx-raised);
  color: var(--moonx-text);
}

.take-shot-quick .mx-btn b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.take-shot-quick .mx-btn--wash[aria-pressed="true"],
.take-shot-quick .mx-btn--wash[aria-pressed="true"]:hover,
.take-shot-quick .mx-btn--wash[aria-pressed="true"]:active {
  background: rgba(45, 123, 255, 0.18);
  border-color: rgba(45, 123, 255, 0.55);
  color: var(--moonx-text);
}

/* Summary row — v19's `.calc`. Turns red (`.is-over`) when the typed amount
   exceeds the trading wallet balance. */
.take-shot-calc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--moonx-raised);
}

.take-shot-calc-copy {
  min-width: 0;
}

.take-shot-calc-label {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  color: var(--moonx-text-secondary);
}

.take-shot-calc-label:not(:disabled) {
  cursor: pointer;
}

.take-shot-calc-label:focus-visible {
  outline: var(--border-focus) solid var(--moonx-blue-high);
  outline-offset: 2px;
}

.take-shot-calc-label b {
  color: var(--moonx-text);
}

.take-shot-calc-sublabel {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moonx-text-secondary);
}

.take-shot-calc-value {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(26px, 8vw, 36px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--moonx-blue-high);
  line-height: 1;
}

.take-shot-calc.is-over .take-shot-calc-value,
.take-shot-calc.is-over .take-shot-calc-label b {
  color: var(--moonx-red);
}

.add-funds-body {
  display: grid;
  gap: var(--space-12);
  width: 100%;
}

/* Shared with app/views/money/_withdraw_modal.html.erb's legacy
   .modal-header close button -- not add-funds-modal-specific despite the
   name. */
.deposit-card {
  min-width: 0;
}

.deposit-qr {
  width: 120px;
  height: 120px;
  margin: 2px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--moonx-text);
}

.deposit-qr svg {
  display: block;
  width: 104px;
  height: 104px;
  margin: 8px;
}

.deposit-address {
  width: 100%;
  margin: 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Visuals now come from the .mx-btn Ghost Button component
   (core-components.css) — see app/views/shared/_add_funds_modal.html.erb.
   The 32px title-size override this used to carry is gone — .mx-modal-title
   is Figma's Heading/Page (28px), not a page-specific size. */

.deposit-address-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  background: var(--moonx-raised);
}

.deposit-address-row .deposit-address {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  color: var(--moonx-text);
}

.deposit-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid rgba(255, 59, 107, 0.34);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 59, 107, 0.10);
  color: var(--moonx-text);
  font-size: 11px;
  line-height: 16px;
  text-align: left;
}

.deposit-warning-icon {
  flex: none;
  font-size: 15px;
}

.deposit-warning p {
  margin: 0;
}

.deposit-warning b {
  font-weight: 900;
}

.add-funds-warning {
  display: block;
  margin: 0;
  border: var(--border-hairline) solid rgba(255, 201, 60, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  background: rgb(252 211 77 / 0.13);
  color: var(--moonx-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

.deposit-warning.add-funds-warning strong {
  color: inherit;
}

.deposit-warning strong {
  color: var(--moonx-red);
  font-weight: 700;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--app-line);
  background: #101113;
}

/* Field stack only. Padding is gone: `.mx-modal` owns the container's
   inset now, same as the add-funds migration dropping its own
   `.modal-actions` override. */
.add-wallet-body {
  display: grid;
  gap: 14px;
  /* `.mx-modal` centres its children below the breakpoint, so a grid with no
     width of its own shrink-wraps to its widest field instead of filling the
     sheet — the same `width: 100%` `.mx-modal-copy` and `.mx-modal-actions`
     carry for that reason. */
  width: 100%;
  min-width: 0;
}

.chain-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  border: 1px solid rgb(94 106 210 / 0.3);
  border-radius: 4px;
  padding: 2px 8px;
  background: rgb(94 106 210 / 0.12);
  color: #5e6ad2;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
}

.chain-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5e6ad2;
}

.add-wallet-warning {
  min-height: 50px;
  border: 1px solid rgb(252 211 77 / 0.2);
  padding: 10px 14px;
  color: #b9b1a0;
}

/* `#settings_trusted_wallets` is a turbo-stream target, so it sits between
   `.mx-modal` and the sheet's content and would otherwise collapse all five
   states into a single flex item. It carries the modal's own column instead
   of `display: contents`, because the four un-migrated states below need a
   full-width block to sit in — `.mx-modal` centres its children below the
   breakpoint, and contents-children would shrink-wrap.
   `#email_change_modal_body` is the same kind of target (the Account page's
   change-email sheet swaps each step into it), so it shares the column. */
#settings_trusted_wallets,
#email_change_modal_body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
}

@media (min-width: 920px) {

  #settings_trusted_wallets,
  #email_change_modal_body {
    gap: var(--space-20);
  }
}

/* The Add form, OTP entry and wallet-submitted states sit on the `.mx-modal`
   shell. The other two this container serves — limit reached and session
   timeout (both `.container`) — still carry their own padding and card
   chrome, so the container's inset, column gap and grab handle step aside
   for them rather than double up. Delete this rule when those two are
   migrated, not before; see settings/wallets/show.html.erb's own comment. */
.mx-modal.add-wallet-modal:has(.container) {
  gap: 0;
  padding: 0;
}

.mx-modal.add-wallet-modal:has(.container) .mx-modal-grab {
  display: none;
}

.dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dialog-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.dialog-title {
  margin: 0;
  color: #ededed;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
}

.dialog-description {
  margin: 0;
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.dialog-actions {
  display: grid;
  width: 100%;
  padding-top: 8px;
}

.dialog-button {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.confirm-modal-form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
}

.confirm-modal-form .mx-btn {
  width: 100%;
}

.confirm-modal-form .mx-btn--tinted {
  border-color: var(--color-sentiment-down);
  background: var(--color-sentiment-down);
  box-shadow: none;
  color: var(--color-background);
}

.confirm-modal-form .mx-btn--tinted:hover:not(:disabled) {
  border-color: var(--color-sentiment-down);
  background: var(--color-sentiment-down);
}

.button-secondary {
  border: 1px solid var(--app-line);
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.button-ghost {
  border: 0;
  background: transparent;
  color: var(--app-muted);
}

/* responsive */
@media (min-width: 720px) {
  .content {
    padding: 28px 36px 80px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .app-shell {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    width: 228px;
    height: 100vh;
    transform: none;
  }

  .mobile-bar {
    display: none;
  }

  .sidebar .brand {
    display: inline-flex;
  }

  /* .app-shell .topbar removed from every view (see
     docs/design-system/HANDOFF.md) — the dashboard refresh button that used
     to live in its desktop copy now uses the fixed corner button below at
     every width, so .dashboard-mobile-refresh-form is no longer hidden
     here. */

  .main-area {
    padding-top: 0;
  }

  .stat-grid {
    grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  }

  /* Collapsed sidebar: icon rail. The grid column drives the width so the
     main area reflows automatically. */
  .app-shell {
    transition: grid-template-columns var(--motion-state);
  }

  .app-shell.is-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .app-shell.is-collapsed .brand-wordmark,
  .app-shell.is-collapsed .sidebar-head .brand,
  .app-shell.is-collapsed .nav-group-label,
  .app-shell.is-collapsed .nav-rail-label,
  .app-shell.is-collapsed .nav-rail-badge,
  .app-shell.is-collapsed .nav-count-badge,
  .app-shell.is-collapsed .nav-soon-badge,
  .app-shell.is-collapsed .nav-add-funds,
  .app-shell.is-collapsed .sidebar-footer-meta {
    display: none;
  }

  .app-shell.is-collapsed .sidebar {
    width: 64px;
    gap: 36px;
  }

  .app-shell.is-collapsed .sidebar-head {
    justify-content: center;
  }

  .app-shell.is-collapsed .sidebar-head .sidebar-collapse-button {
    margin-left: 0;
  }

  .app-shell.is-collapsed .nav-rail-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }

  .app-shell.is-collapsed .nav-rail-item.is-sub {
    padding-left: 0;
  }

  .app-shell.is-collapsed .nav-rail-thread {
    display: none;
  }

  /* Footer collapses to just the avatar, centered. */
  .app-shell.is-collapsed .sidebar-footer-trigger {
    justify-content: center;
    gap: 0;
  }

  .app-shell.is-collapsed .sidebar-footer-settings {
    display: none;
  }

  /* The base menu anchors at left: 196px (tuned for the 280px sidebar). When
     collapsed to 64px it detaches; re-anchor it to the collapsed rail's edge. */
  .app-shell.is-collapsed .footer-menu {
    left: 8px;
  }

  /* Collapsed: mini logo by default, swap to the collapse glyph on hover/focus. */
  .app-shell.is-collapsed .sidebar-collapse-button .collapse-icon-default {
    display: block;
  }

  .app-shell.is-collapsed .sidebar-collapse-button .collapse-icon-hover {
    display: none;
  }

  .app-shell.is-collapsed .sidebar-collapse-button:hover .collapse-icon-default,
  .app-shell.is-collapsed .sidebar-collapse-button:focus-visible .collapse-icon-default {
    display: none;
  }

  .app-shell.is-collapsed .sidebar-collapse-button:hover .collapse-icon-hover,
  .app-shell.is-collapsed .sidebar-collapse-button:focus-visible .collapse-icon-hover {
    display: block;
  }
}

/* Collapsed-rail tooltip. Rendered on <body> by nav_tooltip_controller so the
   sidebar's overflow/transform can't clip it; the controller sets top/left. */
.nav-tooltip {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-hover);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast);
}

.nav-tooltip[hidden] {
  display: none;
}

.nav-tooltip.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav-tooltip {
    transition: none;
  }
}

/* ── position tables ─────────────────────────────────────────── */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
}

/* ── agent detail ── */
.agent-detail-header {
  display: flex;
  flex-direction: row;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--app-line);
  align-items: end;
  justify-content: space-between;
}

.agent-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.avatar-profile {
  display: inline-grid;
  width: 72px;
  height: 72px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.agent-kicker {
  margin: 0 0 4px;
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .66px;
  line-height: 13px;
  text-transform: uppercase;
}

.agent-detail-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 48px;
}

.agent-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-edit-button {
  flex: 0 0 auto;
  margin-top: 4px;
}

.agent-rename-form {
  display: grid;
  gap: 10px;
}

.agent-rename-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-rename-input {
  min-width: min(320px, 100%);
}

.agent-rename-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-rename-help,
.agent-rename-error {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.agent-rename-help {
  color: var(--app-muted);
}

.agent-rename-error {
  color: var(--color-sentiment-down);
}

.agent-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.agent-status-text {
  color: var(--color-success-400);
  font-weight: 600;
}

/* instruction box */
.instruction-box {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.instruction-box::before {
  content: "";
  width: 4px;
  flex: 0 0 4px;
  background: var(--instruction-accent, var(--color-primary));
}

.instruction-box.crypto {
  --instruction-accent: var(--moonx-blue);
}

.instruction-body {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 16px;
}

.instruction-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-small {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
}

.instruction-title {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.instruction-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.instruction-textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--color-surface-raised);
  color: var(--app-fg);
  line-height: 20px;
}

.instruction-textarea::placeholder {
  color: var(--app-dim);
}

.instruction-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

/* decisions */
.decision-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.decision-row {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--app-line);
}

.decision-row:last-child {
  border-bottom: 0;
}

.decision-row-clickable {
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast);
}

.decision-row-clickable:hover,
.decision-row-clickable:focus-visible {
  background: var(--color-surface-hover);
  outline: none;
}

.decision-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.decision-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 18px;
}

.decision-meta {
  margin: 0;
  color: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 13px;
}

.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision-research-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  line-height: 18px;
  cursor: pointer;
}

.decision-research-link:hover,
.decision-research-link:focus-visible {
  color: #bec7ff;
  text-decoration: underline;
  outline: none;
}

/* Container width, the header band and its padding are gone — `.mx-modal`
   owns all three. A market question can be long enough to need breaking, so
   that one rule moves onto the component's own title. */
.mx-modal.ticket-history-modal .mx-modal-title {
  overflow-wrap: anywhere;
}

.ticket-history-body {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.ticket-modal-section {
  display: grid;
  gap: 8px;
}

.ticket-modal-label {
  margin: 0;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .66px;
  line-height: 12px;
  text-transform: uppercase;
}

.ticket-research-box {
  border: 1px solid var(--app-line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: #141518;
}

.ticket-research-box p {
  margin: 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 20px;
}

.ticket-history-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.ticket-history-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ticket-history-dot {
  width: 9px;
  height: 9px;
  margin: 4px 0 0 1.5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(139 157 255 / 0.12);
}

.ticket-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.ticket-history-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
}

.ticket-history-copy {
  margin: 3px 0 0;
  color: #d9dbde;
  font-size: 13px;
  line-height: 16px;
}


/* tickets */
.ticket-table table {
  min-width: 860px;
}

.ticket-cell {
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.ticket-market {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #d9dbde;
}

.inline-badge {
  display: inline-flex;
  min-height: 16px;
  align-items: center;
  border-radius: 4px;
  padding: 2px 6px;
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
}

.stage-cell {
  color: var(--app-muted);
  font-size: 11px;
  white-space: nowrap;
}

.stage-live {
  color: var(--color-sentiment-up);
}

.stage-waiting,
.stage-researching {
  color: var(--color-sentiment-hold);
}

/* info banner */
.info-banner {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: rgb(139 157 255 / 0.1);
  color: var(--color-primary);
  font-size: 13px;
  line-height: 16px;
}

.info-banner strong {
  color: #fff;
  font-weight: 700;
}

/* module tabs */
.module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.module-tab {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  background: var(--panel-bg);
  color: #b4b8c0;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.module-tab[aria-current="page"] {
  border-color: #3a3e47;
  background: var(--color-surface-hover);
  color: var(--app-fg);
}

.module-tab-add {
  border-style: dashed;
}

.select-pill {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  background: var(--color-surface-hover);
  color: #e6e7e8;
  font-size: 12px;
  line-height: 15px;
}

.mono-field {
  max-width: 360px;
  background: var(--color-background);
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

/* rules */
.rules-card {
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.rules-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-line);
  background: var(--panel-head);
}

.rules-title {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
}

.api-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
}

.rule-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--app-line);
}

.rule-row:last-child {
  border-bottom: 0;
}

.rule-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rule-name {
  margin: 0;
  color: var(--app-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
}

.rule-description {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.rule-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-input {
  width: 86px;
  min-height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  background: var(--color-background);
  color: var(--app-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
}

.rule-unit {
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.toggle {
  display: inline-flex;
  width: 32px;
  height: 18px;
  align-items: center;
  border: 0;
  border-radius: var(--radius-full);
  padding: 2px;
  background: #30343c;
  transition: background var(--motion-fast);
}

.toggle::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e6e7e8;
  transition: transform var(--motion-fast);
}

.toggle[aria-pressed="true"] {
  background: var(--color-primary);
}

.toggle[aria-pressed="true"]::before {
  transform: translateX(14px);
}

.save-bar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  min-height: 68px;
  border-top: 1px solid var(--app-line);
  padding: 14px 18px;
  background: var(--panel-bg);
}

.save-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Visuals now come from the .mx-btn Solid/Ghost Button component
   (core-components.css) — see app/views/rules/show.html.erb and
   app/views/fund_approvals/show.html.erb. */

/* fund approval review */
.approval-row .rule-control {
  justify-content: flex-start;
}

.approval-page-title {
  max-width: 28ch;
  overflow-wrap: anywhere;
}

.approval-stat-card {
  min-height: 112px;
}

.approval-stat-value {
  font-size: 18px;
  line-height: 24px;
  word-break: break-word;
}

.approval-stat-value-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 19px;
}

.approval-value {
  min-width: 0;
  color: var(--app-fg);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
  text-align: right;
}

.approval-value-mono {
  font-family: var(--font-mono);
  font-size: 12px;
}

.approval-status-badge {
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  border: 1px solid var(--app-line-strong);
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--color-surface-hover);
  color: #b4b8c0;
  font-size: 11px;
  line-height: 13px;
  white-space: nowrap;
}

.approval-status-badge-awaiting {
  border-color: rgba(252, 211, 77, .35);
  background: rgba(252, 211, 77, .10);
  color: var(--yw);
}

.approval-status-badge-approved,
.approval-status-badge-executed {
  border-color: rgba(110, 231, 135, .35);
  background: var(--gns);
  color: var(--gn);
}

.approval-status-badge-rejected,
.approval-status-badge-failed {
  border-color: rgba(248, 113, 113, .35);
  background: rgba(248, 113, 113, .10);
  color: var(--rd);
}

.approval-status-badge-expired {
  color: var(--app-muted);
}

.approval-action-bar {
  gap: 16px;
  justify-content: space-between;
}

.approval-reject-form form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.approval-reject-input {
  width: min(320px, 42vw);
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--color-background);
  color: var(--app-fg);
  font-size: 12px;
  line-height: 18px;
}

.approval-readonly-copy {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.approval-flash {
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--panel-bg);
  color: var(--app-muted);
  font-size: 13px;
  line-height: 18px;
}

.approval-flash-success {
  border-color: rgba(110, 231, 135, .28);
  color: var(--gn);
}

.approval-flash-alert {
  border-color: rgba(248, 113, 113, .28);
  color: var(--rd);
}

.approval-rationale-row {
  gap: 8px;
  align-items: start;
}

.approval-rationale-copy {
  color: var(--app-fg);
  font-size: 13px;
  line-height: 20px;
  max-width: 72ch;
}

@media (max-width: 720px) {

  .approval-action-bar,
  .approval-reject-form form,
  .approval-action-bar .save-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .approval-reject-input {
    width: 100%;
  }
}

.amount {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.pill.warning {
  background: rgb(252 211 77 / 0.12);
  color: var(--color-sentiment-hold);
}

/* responsive */
@media (min-width:720px) {
  .instruction-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .decision-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .rule-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}

.position-table table {
  min-width: 800px;
}

/* Sections rendering the shared position table share one column geometry, so
   the four of them stacked down the page align with each other. Only tables
   carrying the matching <colgroup> opt in — the pending, collected and activity
   tables have their own column sets and size themselves. */
.position-table table.position-columns {
  /* Pinned columns sum to 728px; the floor leaves Market ~170px before the
     surrounding .table-scroll starts scrolling horizontally. */
  min-width: 900px;
  table-layout: fixed;
}

.position-columns .col-outcome {
  width: 76px;
}

.position-columns .col-shares {
  width: 84px;
}

.position-columns .col-price {
  width: 92px;
}

.position-columns .col-price-wide {
  width: 108px;
}

.position-columns .col-value {
  width: 96px;
}

.position-columns .col-payout {
  width: 104px;
}

.position-columns .col-pnl {
  width: 168px;
}

.position-columns .col-start-value {
  width: 110px;
}

/* The resolved-loss table carries five columns rather than eight, so it does
   not need the eight-column floor — Market simply takes the slack. */
.position-table table.lost-columns {
  min-width: 560px;
}

/* Long market titles wrap rather than stretch the pinned columns. */
.position-columns td:first-child {
  overflow-wrap: anywhere;
}

/* P&L carries a figure and a percentage. A fixed column cannot grow for a
   large fund, so let the pair wrap onto a second line instead of spilling
   over the cell — .numeric would otherwise hold it on one line. Matched on a
   class, not a position, so reordering the columns cannot detach it. */
.position-columns .pnl-cell {
  white-space: normal;
}

/* Potential return is the decision-making figure in an open position, so it
   gets a distinct reward accent without changing the column geometry. */
.position-columns .payout-heading,
.position-columns .payout-cell {
  color: var(--gold-payout);
}

.position-columns .payout-cell {
  font-size: 13px;
  font-weight: 700;
}

th {
  background: var(--panel-head);
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  text-align: left;
}

td {
  color: #b4b8c0;
  font-size: 12px;
  line-height: 15px;
}

th,
td {
  border-bottom: 1px solid var(--app-line);
  padding: 11px 16px;
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: 0;
}

.position-table thead {
  background: var(--panel-bg);
}

.position-table th {
  box-sizing: border-box;
  height: 28px;
  /* Horizontal padding has to match the data cells' 16px, or every header
     sits offset from the column it labels — left-aligned ones 16px too far
     left, right-aligned numbers 8px too far right. Only the vertical padding
     differs, to keep the header row shorter than a data row. */
  padding: 8px 16px;
  background: var(--panel-bg);
  color: #5c616c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 12px;
}

.position-table th:first-child {
  padding-left: 14px;
}

.position-table th:last-child {
  padding-right: 14px;
}

.position-table td:first-child {
  padding-left: 14px;
}

.position-table td:last-child {
  padding-right: 14px;
}

.mono {
  font-family: var(--font-mono);
}

.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgb(139 157 255 / 0.12);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  white-space: nowrap;
}

.pill-yes {
  background: rgb(110 231 183 / 0.15);
  color: var(--color-sentiment-up);
}

.pill-no {
  background: rgb(252 165 165 / 0.15);
  color: var(--color-sentiment-down);
}

.pill-neutral {
  background: var(--color-surface-hover);
  color: var(--app-muted);
}

.position-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.position-section .position-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.position-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 16px;
  height: 35px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--app-line);
  background: var(--panel-head);
}

.position-bar-title {
  margin: 0;
  color: #b4b8c0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.66px;
  line-height: 13px;
}

.position-meta {
  margin: 0;
  color: #8a8f99;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 15px;
  white-space: nowrap;
}

.position-meta-live {
  color: #6ee7b7;
}

.market-title {
  display: block;
  color: var(--app-fg);
  line-height: 15px;
}

.market-title-link {
  text-decoration: underline;
  text-decoration-color: rgb(180 184 192 / 0.35);
  text-underline-offset: 3px;
}

.market-title-link:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.td-issue-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--app-muted);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(180 184 192 / 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.td-issue-button:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.td-rationale-modal {
  width: min(560px, 100%);
}

.td-rationale-copy {
  margin: 0;
  color: var(--app-fg);
  font-size: 14px;
  line-height: 21px;
  white-space: pre-wrap;
}

.market-id {
  display: block;
  margin-top: 2px;
  color: var(--app-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.status-text {
  color: var(--app-muted);
  font-size: 11px;
  white-space: nowrap;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title {
  margin: 0;
  color: #e6e7e8;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
}

.section-count {
  color: var(--app-muted);
  font-size: 13px;
  line-height: 16px;
  font-weight: 300;
}

/* ── agent grid ──────────────────────────────────────────────── */

.agent-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

.agent-card {
  display: flex;
  min-height: 136px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
  text-align: center;
  width: auto;
  animation: none;
}

.agent-card-add {
  border-color: #3a3e47;
  border-style: dashed;
  background: transparent;
}

.avatar-large {
  display: inline-grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-family: var(--font-display);
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.avatar-add {
  background: var(--color-surface-hover);
  color: var(--app-muted);
  font-family: var(--font-body);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
}

.agent-name {
  margin: 0;
  color: var(--app-fg);
  font-family: var(--font-display);
  font-size: 21px;
  font-style: normal;
  font-weight: 500;
  line-height: 25px;
}

.agent-role,
.agent-description {
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 15px;
}

.agent-description {
  color: #b4b8c0;
}

.agent-action {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
}

@media (min-width: 720px) {
  .agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.analyst-row {
  display: grid;
  gap: 10px;
  width: 100%;
}

.button-danger {
  background: var(--color-sentiment-down);
  color: var(--color-background);
}

/* ──────────────────────────────────────────────────────────────────
   OTP / secure-action modal
   Used by shared/otp/_template_form.html.erb and friends.
   ────────────────────────────────────────────────────────────────── */

.otp-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  min-width: min(420px, 90vw);
}

.otp-shell-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.otp-shell-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-foreground-200);
}

.otp-shell-sub {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-foreground-500);
  margin: 0;
  padding: 0 0.5rem;
}

.otp-shell-resend {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-foreground-500);
}

.otp-shell-resend-line {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.otp-resend-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-foreground-200);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.otp-resend-button:disabled {
  color: var(--color-neutral-300);
  cursor: not-allowed;
  text-decoration: none;
}

.otp-input-wrapper {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--color-bg-500);
  border-radius: 12px;
  border: 1px solid var(--color-border, #2a2a2a);
}

.otp-input-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.otp-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
  margin-bottom: 0.75rem;
}

.otp-input-row.with-error .otp-digit {
  border-color: var(--color-sentiment-down);
  color: var(--color-sentiment-down);
}

.otp-digit {
  width: 2.75rem;
  height: 3rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono);
  background: var(--color-background);
  color: var(--color-foreground-200);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 8px;
  outline: none;
}

.otp-digit:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--shadow-focus);
}

.otp-paste-link {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
  color: var(--color-primary-500);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.otp-paste-button {
  min-width: 140px;
}

.otp-paste-progress {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

.otp-submit-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 1rem;
}

.otp-submit-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Add-wallet OTP step. Layout unchanged — header (eyebrow + title, close on
   the right), wallet summary, the six digits with Paste below, then resend
   on the left and the commit on the right — only the values moved onto the
   `.mx-modal` shell and Foundations tokens: no header/footer bands, the
   summary is an Input MD surface, the digits are Input fields. */
.trusted-wallet-otp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
}

.trusted-wallet-otp-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

/* Same role and values as `.mx-field-label`. */
.trusted-wallet-otp-eyebrow {
  margin: 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-label-mono-wide);
  font-weight: var(--text-label-mono-wide--weight);
  line-height: var(--text-label-mono-wide--line-height);
  letter-spacing: var(--text-label-mono-wide--letter-spacing);
  text-transform: uppercase;
}

.trusted-wallet-otp-modal,
.trusted-wallet-otp-modal turbo-frame,
.trusted-wallet-otp-modal form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  min-width: 0;
}

/* Input MD's surface (`.mx-input--md`), read-only. */
.trusted-wallet-otp-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-14) var(--space-16);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-14);
  background: var(--moonx-well);
}

.trusted-wallet-otp-summary-title,
.trusted-wallet-otp-summary-address {
  margin: 0;
}

.trusted-wallet-otp-summary-title {
  color: var(--moonx-text);
  font-size: var(--text-body-field);
  font-weight: var(--text-body-field--weight);
  line-height: var(--text-body-field--line-height);
}

.trusted-wallet-otp-summary-address {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-body-compact);
  line-height: var(--text-body-compact--line-height);
  overflow-wrap: anywhere;
}

.trusted-wallet-otp-code {
  display: flex;
  justify-content: center;
  padding-block: var(--space-8);
}

.trusted-wallet-otp-code .otp-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
}

.trusted-wallet-otp-code .otp-input-row {
  order: 1;
  gap: var(--space-10);
  margin-top: 0;
}

.trusted-wallet-otp-code .otp-toolbar {
  order: 2;
  justify-content: center;
  min-height: 0;
  margin: var(--space-16) 0 0;
}

/* Each digit is an Input field: well ground, hairline, focus moves the
   border only (Input's own rule — no tint, no ring), error keeps its colour. */
.trusted-wallet-otp-code .otp-digit {
  width: 50px;
  height: 56px;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-14);
  background: var(--moonx-well);
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: var(--text-number-xl);
  font-weight: var(--text-number-xl--weight);
  line-height: var(--text-number-xl--line-height);
}

.trusted-wallet-otp-code .otp-digit:focus {
  border-color: var(--border-interactive);
  box-shadow: none;
}

.trusted-wallet-otp-code .otp-input-row.with-error .otp-digit {
  border-color: var(--border-danger);
  color: var(--moonx-red);
}

.trusted-wallet-otp-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
}

.trusted-wallet-otp-resend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--moonx-text-secondary);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.trusted-wallet-otp-resend-action {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}

.trusted-wallet-otp-resend-action strong {
  color: var(--moonx-text);
}

.trusted-wallet-otp-actions .otp-resend-button,
.trusted-wallet-otp-actions .otp-resend-button:disabled {
  color: var(--moonx-blue-high);
  text-decoration: underline;
}

.trusted-wallet-otp-actions .otp-resend-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

@media (max-width: 719px) {
  .otp-submit-row .otp-submit-button {
    width: 100%;
  }

  .trusted-wallet-otp-code .otp-input-row {
    gap: var(--space-6);
  }

  .trusted-wallet-otp-code .otp-digit {
    width: 42px;
    height: 52px;
  }

  .trusted-wallet-otp-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .trusted-wallet-otp-submit {
    width: 100%;
  }
}

/* Wallet submitted. Close sits in the corner as before; the check is Win. */
.trusted-wallet-submitted {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  text-align: center;
}

.trusted-wallet-submitted-close {
  position: absolute;
  top: 0;
  right: 0;
}

.trusted-wallet-submitted-icon {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  color: var(--moonx-green);
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border, #2a2a2a);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: otp-spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes otp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (min-width:720px) {
  .analyst-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ── Pagy pagination nav ─────────────────────────────────────── */
nav.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

nav.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--app-line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
  cursor: pointer;
}

nav.pagy.series-nav a:not([aria-disabled="true"]):hover {
  background: var(--color-surface-hover);
  color: var(--app-fg);
  border-color: var(--app-line-strong);
}

nav.pagy.series-nav a[aria-current="page"] {
  background: var(--color-primary);
  color: var(--color-background);
  border-color: var(--color-primary);
  font-weight: 700;
  cursor: default;
}

nav.pagy.series-nav a[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

nav.pagy.series-nav a[role="separator"] {
  border: 0;
  background: transparent;
  color: var(--app-dim);
  pointer-events: none;
  min-width: 20px;
}

/* ── Markets mandate summary ─────────────────────────────────── */
.mandate-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 20px;
}

.mandate-summary-card {
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  min-width: 160px;
}

.mandate-summary-card--wide {
  flex: 1;
  min-width: 240px;
}

.mandate-summary-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--app-dim);
  text-transform: uppercase;
}

.mandate-summary-value {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--app-fg);
}

.mandate-summary-body {
  margin: 0;
  font-size: 13px;
  color: var(--app-muted);
  line-height: 18px;
}

/* ── Shared empty states ─────────────────────────────────────── */
.empty-note {
  padding: 20px 16px;
  color: var(--app-dim);
  font-size: 13px;
}

.empty-state {
  padding: var(--space-32) var(--space-20);
  text-align: center;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-16);
  background: var(--color-surface);
}

.empty-state-title {
  margin: 0;
  font-size: var(--text-heading-sub);
  font-weight: var(--text-heading-sub--weight);
}

.empty-state-body {
  margin: var(--space-10) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-default);
  line-height: var(--text-body-default--line-height);
}

.empty-state-action {
  margin-top: var(--space-16);
}

/* ── Dev warning banner ──────────────────────────────────────── */
.dev-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 20px;
  background: rgb(252 211 77 / 0.08);
  border-bottom: 1px solid rgb(252 211 77 / 0.25);
  color: var(--color-sentiment-hold);
  font-size: 13px;
  line-height: 18px;
}

.dev-banner-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.dev-tag {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgb(252 211 77 / 0.15);
  color: var(--color-sentiment-hold);
  line-height: 1.4;
}

/* ── Table utilities ─────────────────────────────────────────── */
.market-id-cell {
  font-size: 11px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-actions-cell {
  display: flex;
  gap: 6px;
}

.td-empty {
  text-align: center;
  color: var(--app-muted);
}

/* ── Text utilities ──────────────────────────────────────────── */
.text-dim {
  opacity: 0.5;
}

.text-negative {
  color: var(--color-sentiment-down);
}

.heading-negative {
  color: var(--color-sentiment-down);
}

/* ── Pagy nav wrapper ────────────────────────────────────────── */
.pagy-nav-wrapper {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  overflow-x: auto;
  padding: 14px 16px 16px;
}

.pagy-nav-wrapper>nav {
  flex: none;
  margin-inline: auto;
}

@media (max-width: 660px) {
  .pagy-nav-wrapper {
    padding-inline: 0;
  }
}

/* ── Position meta modifier ──────────────────────────────────── */
.position-meta--negative {
  color: var(--color-sentiment-down);
}

/* ── Agent / article states ──────────────────────────────────── */
.article--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Tag list ────────────────────────────────────────────────── */
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Form layout ─────────────────────────────────────────────── */
.form-group {
  margin-bottom: 24px;
}

.form-group--lg {
  margin-bottom: 32px;
}

.form-row {
  margin-bottom: 10px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.field-label-upper {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.66px;
  color: var(--app-muted);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.field-hint {
  font-size: 11px;
  color: var(--app-muted);
  margin-bottom: 6px;
}

.field-hint--inline {
  margin-bottom: 0;
  margin-left: 6px;
}

/* Wizard fund-naming field: label above, bordered input, hints + counter below.
   Standalone from .field (which is a bordered container reused across 6 pages). */
.wizard-field {
  display: grid;
  gap: 10px;
  width: 100%;
}

.wizard-field-input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
}

.wizard-field-input::placeholder {
  color: var(--app-dim);
}

.wizard-field-input:focus {
  outline: 0;
  border-color: var(--color-primary);
}

.wizard-field-hints {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.wizard-field-hints .field-hint {
  margin-bottom: 0;
}

.sr-hidden {
  display: none;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

/* ── Hosted agent chat ───────────────────────────────────────── */
.agent-runtime-status {
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-runtime-status--online {
  color: var(--gn);
}

.agent-runtime-status--offline {
  color: var(--rd);
}

.agent-chat-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 982px;
  min-height: 560px;
  max-height: calc(100vh - 210px);
  margin: auto;
  width: 100%;
}

/* Empty conversation: centre the hero above the composer, like the entry screen. */
.agent-chat-panel:not(:has(.agent-chat-messages > :not(.agent-chat-message--loading))) {
  justify-content: center;
}

/* Session header: only an open conversation is a named room. */
.agent-chat-session {
  /* Positioned only to pin the stacking order: the Playbook menu, which can grow
     past the top of the chat surface, has to clear this band. */
  position: relative;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 21px 32px;
  border-bottom: 1px solid var(--color-border);
}

.main-area:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-session {
  /* flex: none — the chat surface takes every spare pixel, the band keeps its own. */
  display: flex;
  flex: none;
}

.agent-chat-conversations-breadcrumb:not([hidden]) {
  display: flex;
  flex: none;
}

.agent-chat-booting .agent-chat-session {
  visibility: hidden;
}

/* The mark draws its own frame, so it needs no border or padding here. */
.agent-chat-session-mark {
  flex: none;
  width: 24px;
  height: 24px;
}

.agent-chat-session-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0px;
  white-space: nowrap;
}

.agent-chat-session-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.agent-chat-session-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gn);
}

/* No provider yet, or a runtime we cannot reach: only the dot changes. */
.agent-chat-session-live--offline .agent-chat-session-live-dot {
  background: var(--rd);
}

.agent-wallet-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  margin-left: 0;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: default;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

.agent-wallet-status[data-state="unavailable"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status-icon {
  width: 15px;
  height: 15px;
  flex: none;
}

.agent-wallet-status-icon--unlocked,
.agent-wallet-status[data-state="unlocked"] .agent-wallet-status-icon--locked {
  display: none;
}

.agent-wallet-status[data-state="unlocked"] .agent-wallet-status-icon--unlocked {
  display: block;
}

.agent-wallet-status:not(:disabled) {
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.agent-wallet-status:not(:disabled):hover {
  border-color: var(--color-primary);
  background: var(--color-foreground-bg-subtle);
}

.agent-wallet-status:not(:disabled):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-wallet-status[data-state="unlocked"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status[data-state="locked"],
.agent-wallet-status[data-state="unlocking"] {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.agent-wallet-status[data-state="locked"] .agent-wallet-status-icon,
.agent-wallet-status[data-state="unlocking"] .agent-wallet-status-icon {
  color: color-mix(in srgb, var(--yw) 72%, var(--color-text-secondary));
}

.agent-wallet-status[data-state="unavailable"] .agent-wallet-status-icon {
  color: var(--rd);
}

.agent-chat-session-new-session {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-foreground-200);
  font-weight: 600;
  white-space: nowrap;
}

.agent-chat-session-schedule {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.agent-chat-session-schedule svg {
  width: 20px;
  height: 20px;
}

.agent-chat-session-schedule:hover,
.agent-chat-session-new-session:hover {
  border-color: var(--color-primary);
  background: var(--color-foreground-bg-subtle);
}

.agent-chat-session-schedule:focus-visible,
.agent-chat-session-new-session:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.agent-schedule-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  padding: 0;
  border: 1px solid #34363d;
  border-radius: 18px;
  background: var(--color-surface-raised);
  color: var(--color-foreground);
  box-shadow: 0 28px 90px rgb(0 0 0 / 70%), 0 0 0 1px rgb(139 157 255 / 8%);
}

.agent-schedule-dialog::backdrop {
  background: rgb(3 5 12 / 76%);
}

.agent-schedule-header,
.agent-schedule-dialog footer {
  padding: 20px 24px;
}

.agent-schedule-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--color-border);
}

.agent-schedule-header h2 {
  margin: 0;
}

.agent-schedule-header p,
.agent-schedule-dialog footer {
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.agent-schedule-actions {
  display: flex;
  gap: 8px;
}

.agent-schedule-actions button {
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.agent-schedule-actions .agent-schedule-refresh {
  display: grid;
  width: 36px;
  padding: 0;
  place-items: center;
}

.agent-schedule-refresh svg {
  width: 18px;
  height: 18px;
}

.agent-schedule-state {
  display: grid;
  min-height: 124px;
  margin: 0;
  padding: 32px 24px;
  place-items: center;
  color: var(--color-text-secondary);
  text-align: center;
}

.agent-schedule-list {
  max-height: 560px;
  padding: 8px 24px 24px;
  overflow-y: auto;
}

.agent-schedule-day {
  margin: 18px 0 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.agent-schedule-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.agent-schedule-card time {
  font-weight: 700;
}

.agent-schedule-card h4,
.agent-schedule-card p {
  margin: 0;
  overflow-wrap: anywhere;
}

.agent-schedule-card h4 {
  font-size: 14px;
}

.agent-schedule-card p {
  margin-top: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-schedule-card .agent-schedule-overlap {
  color: var(--yw);
  font-weight: 700;
}

.agent-schedule-dialog footer {
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .agent-schedule-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  .agent-schedule-list {
    max-height: calc(100dvh - 180px);
  }
}

.agent-chat-mobile-actions {
  display: none;
}

.agent-chat-mobile-live,
.agent-chat-mobile-new-session {
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
}

.agent-chat-mobile-live .agent-chat-session-live-dot {
  width: 8px;
  height: 8px;
}

.agent-wallet-status--mobile {
  width: 38px;
  min-width: 38px;
  height: 38px;
  margin: 0;
  justify-content: center;
  padding: 0;
}

.agent-chat-session-title {
  margin: 0;
  color: var(--color-foreground-200);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-session-conversations {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.agent-chat-session-conversations:hover,
.agent-chat-session-conversations:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-foreground);
}

.agent-chat-session-conversations svg {
  width: 18px;
  height: 18px;
}

.agent-chat-recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 28px;
  padding: 0 clamp(18px, 2.5vw, 36px);
}

.agent-chat-recent[hidden] {
  display: none;
}

.agent-chat-panel:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-recent {
  display: none;
}

.agent-chat-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-chat-recent-head p,
.agent-chat-recent-head button,
.agent-chat-conversations-head p {
  margin: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
}

.agent-chat-recent-head button,
.agent-chat-conversations-head button,
.agent-chat-see-all {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.agent-chat-recent-head button:hover,
.agent-chat-see-all:hover {
  color: var(--color-foreground);
}

.agent-chat-recent-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-chat-recent-search svg {
  width: 14px;
  height: 14px;
}

.agent-chat-recent-search kbd,
.agent-chat-search-footer kbd {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.agent-chat-recent-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.agent-chat-recent-item,
.agent-chat-allchats-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
}

.agent-chat-recent-item:hover:not(:disabled),
.agent-chat-allchats-row:hover:not(:disabled),
.agent-chat-recent-item.is-active,
.agent-chat-allchats-row.is-active {
  background: var(--color-surface-hover);
}

.agent-chat-recent-item.is-active,
.agent-chat-allchats-row.is-active,
.agent-chat-search-item.is-active {
  border-left-color: var(--color-primary);
}

.agent-chat-recent-item-title,
.agent-chat-allchats-row-title,
.agent-chat-conversation-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-recent-item-meta,
.agent-chat-allchats-row-meta,
.agent-chat-conversation-meta {
  flex: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.agent-chat-conversation-current {
  flex: none;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.agent-chat-conversations {
  display: none;
}

@media (min-width: 1040px) {
  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)):has(.agent-chat-conversations:not([hidden]):not(.is-closed)) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    gap: 16px;
    padding-right: 16px;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)):has(.agent-chat-conversations:not([hidden]):not(.is-closed)) .agent-chat-panel {
    max-width: 752px;
    margin-block: 0;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-conversations:not([hidden]):not(.is-closed) {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 6px;
    min-width: 0;
    max-width: 300px;
    max-height: calc(100% - 32px);
    margin-top: 32px;
    padding: 16px 8px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-bg-500);
  }
}

.agent-chat-conversations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 4px;
}

.agent-chat-conversations-head button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}

.agent-chat-conversations-head svg {
  width: 16px;
  height: 16px;
}

.agent-chat-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.agent-chat-conversation-skeleton,
.agent-chat-allchats-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
}

.agent-chat-conversation-skeleton-bar {
  height: 11px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--color-border) 50%, var(--color-surface-raised) 75%);
  background-size: 200% 100%;
  animation: agent-chat-conversations-shimmer 1.4s ease-in-out infinite;
}

.agent-chat-conversation-skeleton-bar--title {
  flex: 1;
}

.agent-chat-conversation-skeleton-bar--meta {
  width: 40px;
}

@keyframes agent-chat-conversations-shimmer {
  to {
    background-position: -200% 0;
  }
}

.agent-chat-conversations-empty,
.agent-chat-conversations-error {
  padding: 20px 12px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

.agent-chat-conversations-error {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.agent-chat-conversations-error p {
  margin: 0;
}

.agent-chat-conversation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
}

.agent-chat-conversation:hover:not(:disabled),
.agent-chat-conversation.is-active {
  background: var(--color-surface-hover);
}

.agent-chat-see-all {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-conversations-breadcrumb {
  justify-content: flex-start;
  gap: 12px;
}

.agent-chat-conversations-breadcrumb button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-secondary);
}

.agent-chat-conversations-breadcrumb svg {
  width: 18px;
  height: 18px;
}

.agent-chat-conversations-breadcrumb p {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.agent-chat-conversations-breadcrumb strong {
  color: var(--color-foreground);
}

.agent-chat-allchats-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 32px auto 0;
  width: min(100%, 1040px);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-raised);
}

.agent-chat-allchats-panel[hidden],
.agent-chat-allchats-pagination-bar[hidden],
.agent-chat-session[hidden],
.agent-chat-panel[hidden],
.agent-chat-conversations[hidden] {
  display: none !important;
}

.agent-chat.content:has(.agent-chat-allchats-panel:not([hidden])) {
  display: flex;
  padding: 0 24px 32px;
}

.agent-chat-allchats-header,
.agent-chat-allchats-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.agent-chat-allchats-header {
  border-bottom: 1px solid var(--color-border);
}

.agent-chat-allchats-pagination-bar {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
}

.agent-chat-allchats-header h1,
.agent-chat-allchats-pagination-bar p {
  margin: 0;
}

.agent-chat-allchats-pagination-bar p {
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-allchats-actions,
.agent-chat-allchats-pagination,
.agent-chat-allchats-pagination>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-chat-allchats-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.agent-chat-allchats-search-box svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
}

.agent-chat-allchats-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

.agent-chat-allchats-search-box input:focus {
  outline: 0;
}

.agent-chat-allchats-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px;
}

.agent-chat-allchats-pagination button {
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.agent-chat-allchats-pagination button[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-surface-selected);
}

.agent-chat-allchats-pagination svg {
  width: 16px;
  height: 16px;
}

.agent-chat-allchats-empty {
  padding: 32px 8px;
  color: var(--color-text-muted);
  text-align: center;
}

.agent-chat-search-dialog {
  margin: auto;
  width: min(680px, calc(100vw - 32px));
  max-height: min(620px, calc(100dvh - 64px));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-raised);
  color: var(--color-foreground);
}

.agent-chat-search-dialog[open] {
  display: flex;
  flex-direction: column;
}

.agent-chat-search-dialog::backdrop {
  background: rgb(0 0 0 / 0.65);
}

.agent-chat-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
}

.agent-chat-search-field>svg {
  width: 18px;
  height: 18px;
}

.agent-chat-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  outline: 0;
}

.agent-chat-search-results {
  min-height: 120px;
  overflow-y: auto;
  padding: 8px;
}

.agent-chat-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
}

.agent-chat-search-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--pr) 15%, transparent);
  outline: 1px solid var(--pr);
  outline-offset: -1px;
}

.agent-chat-search-footer {
  display: flex;
  gap: 18px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .agent-chat-recent-search {
    display: none;
  }

  .agent-chat.content:has(.agent-chat-allchats-panel:not([hidden])) {
    padding: 0;
  }

  .agent-chat-allchats-panel {
    margin: 0;
    border-width: 0;
    border-radius: 0;
  }

  .agent-chat-allchats-header,
  .agent-chat-allchats-pagination-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-chat-allchats-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .agent-chat-search-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

.agent-chat-hero {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 clamp(18px, 2.5vw, 36px) 32px;
  text-align: center;
}

.agent-chat-panel:not(:has(.agent-chat-messages > :not(.agent-chat-message--loading))) .agent-chat-hero {
  display: flex;
}

/* Nothing said yet: the hero owns the space, the transcript stays out of flow. */
.agent-chat-panel:not(:has(.agent-chat-messages > :not(.agent-chat-message--loading))) .agent-chat-messages {
  display: none;
}

/* Once the transcript exists the composer is pinned to the bottom of the panel
   and drops the entry-screen glow for a plain ivory-15% hairline. */
.agent-chat-panel:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-composer {
  margin-top: auto;
  border-color: rgb(237 237 237 / 0.15);
  background: var(--color-bg-500);
  box-shadow: none;
}

/* On a wide screen an open conversation fills the viewport, so the composer
   ends up at the bottom edge and only the transcript scrolls. */
@media (min-width: 1040px) {

  /* The session band takes its own height off the top, so the surface below it
     is what fills the rest of the viewport. */
  .agent-chat-shell .main-area:has(.agent-chat-messages > :not(.agent-chat-message--loading)) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    padding: 0 0 32px 0;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 32px;
  }
}

.agent-chat-booting .agent-chat-hero,
.agent-chat-booting .agent-chat-suggestions {
  visibility: hidden;
}

.agent-chat-suggestions {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.agent-chat-panel:not(:has(.agent-chat-messages > :not(.agent-chat-message--loading))) .agent-chat-suggestions {
  display: flex;
}

.agent-chat-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg-500);
  color: var(--color-foreground-200);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 14px;
  transition: border-color var(--motion-fast), background var(--motion-fast);
  font-weight: 600;
}

.agent-chat-suggestion svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.agent-chat-suggestion:hover,
.agent-chat-suggestion:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
}

.agent-chat-hero-logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.agent-chat-hero-title {
  margin: 0;
  color: var(--color-foreground-200);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: normal;
  font-weight: 500;
  line-height: 56px;
  letter-spacing: normal;
}

@media (max-width: 700px) {
  .agent-chat-hero-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.agent-chat-messages {
  --agent-chat-message-gap: 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: none;
  /* Without this the transcript refuses to shrink and slides under the composer. */
  min-height: 0;
  gap: var(--agent-chat-message-gap);
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 16px max(clamp(18px, 2.5vw, 36px), calc((100% - 762px) / 2));
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}

.agent-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.agent-chat-messages::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border);
}

.agent-chat-panel--offline-empty .agent-chat-messages {
  align-items: center;
  justify-content: center;
}

.agent-chat-offline-state {
  max-width: 440px;
  text-align: center;
}

.agent-chat-offline-state h2 {
  margin: 0;
  font-size: 20px;
}

.agent-chat-offline-state p {
  margin: 10px 0 20px;
  color: var(--color-text-muted);
}

.agent-chat-offline-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.agent-chat-load-older {
  align-self: center;
  margin: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.agent-chat-load-older:hover {
  color: var(--color-text);
}

/* Floats over the faded tail of the transcript; the fade itself is a mask on
   the scroller, right below. */
.agent-chat-jump-latest {
  position: relative;
  z-index: 1;
  align-self: center;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  /* Sits on an almost-black scrim, so the pill needs its own lift: a brighter
     rim and a real drop shadow (--shadow-sm was never defined). */
  border: 1px solid #3A3A3A;
  border-radius: 10px;
  background: #1A1A1A;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
  cursor: pointer;
  margin: -48px 0 8px;
  padding: 0;
}

/* The tail of the transcript dissolves into the page while the jump button is
   up, so the button reads as floating over it. Masking the scroller itself
   avoids an overlay: a negative z-index pseudo paints above its own element's
   background, which swallowed the pill. */
.agent-chat-panel:has(.agent-chat-jump-latest:not([hidden])) .agent-chat-messages {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 72px), rgb(0 0 0 / 0) 100%);
}

.agent-chat-jump-latest svg {
  width: 24px;
  height: 24px;
}

.agent-chat-activity {
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-message--queued {
  opacity: 0.72;
}

.agent-chat-message--queued::after {
  display: block;
  margin-top: 4px;
  content: "Queued after current response";
  font-size: 11px;
}

/* Reconnect is transport recovery, not a failed send. Keep that distinction
   visible after porting the redesign's message chrome. */
.agent-chat-message--reconnecting {
  opacity: 0.72;
}

.agent-chat-message--reconnecting::after {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  content: "Reconnecting; message will retry automatically";
  font-size: 11px;
}

.agent-chat-working-elapsed {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.agent-chat-queue-status {
  display: block;
  min-height: 18px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.agent-chat-model {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  /* No border to add, so the padding carries the chip to the same 30px as the
     bordered chips beside it. */
  padding: 5.5px 10px;
  font-weight: 400;
  line-height: 19px;
}

.agent-chat-model-provider {
  color: var(--color-foreground-200);
}

.agent-chat-model-name {
  color: var(--color-text-muted);
}

.agent-chat-model-chevron,
.agent-chat-model-icon {
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
}

/* No provider yet: the chip becomes the call to action and the bubble above
   explains why the composer will not answer. */
/* The slot deliberately stays unpositioned: the bubble measures itself against
   the whole actions row, so it can never spill past the composer edge. */
.agent-chat-model-slot {
  display: inline-flex;
}

/* New session sits alone on the left of the composer's action row. */
.agent-chat-icon-button.agent-chat-new-session {
  margin-right: auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

/* The glyph is drawn inset in its own 32px box, so the icon fills the button. */
.agent-chat-icon-button.agent-chat-new-session .button-icon {
  width: 32px;
  height: 32px;
}

.agent-chat-icon-button.agent-chat-new-session:hover:not(:disabled),
.agent-chat-icon-button.agent-chat-new-session:focus-visible:not(:disabled) {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.agent-chat-icon-button.agent-chat-new-session:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.agent-chat-model--disconnected,
.agent-chat-model--disconnected .agent-chat-model-name {
  color: var(--amber-hold);
}

.agent-chat-model-retry {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  font: inherit;
}

/* Anchored to the chip's right edge so the bubble grows inwards and stays
   inside the composer instead of spilling past it. */
/* Right edge stops with the send button; the tail drops onto the middle of the
   "Connect agent" chip. */
.agent-chat-model-tip {
  /* send button (32px) + gap (8px) + half the chip, less half the tail */
  --agent-chat-tip-tail: 92px;
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 2;
  margin: 0;
  width: max-content;
  max-width: 204px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #2E3A61;
  color: #8B9DFF;
  font-size: 14px;
  line-height: 140%;
  text-align: center;
}

.agent-chat-model-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: var(--agent-chat-tip-tail);
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: #2E3A61;
}

/* The glyphs inherit currentColor, so hover has to lift them with the label. */
.agent-chat-model:hover .agent-chat-model-name,
.agent-chat-model:hover .agent-chat-model-icon,
.agent-chat-model:hover .agent-chat-model-chevron {
  color: var(--color-foreground-200);
}

.agent-chat-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.agent-chat-message--user {
  align-self: flex-end;
  max-width: min(620px, 60%);
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--color-bg-500);
  color: var(--color-foreground-200);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.agent-chat-message--pending {
  opacity: 0.65;
}

.agent-chat-message--failed {
  outline: 1px solid var(--rd);
}

.agent-chat-message--failed::after {
  display: block;
  margin-top: 4px;
  color: var(--rd);
  content: attr(data-failure-label);
  font-size: 11px;
}

.agent-chat-scheduled-run {
  align-self: stretch;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--pr);
  border-radius: 10px;
  background: var(--color-background);
}

.agent-chat-scheduled-run-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.agent-chat-scheduled-run-heading strong {
  color: var(--pr);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-chat-scheduled-run-heading span {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-scheduled-run-timing,
.agent-chat-scheduled-run-status,
.agent-chat-scheduled-run details {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

.agent-chat-scheduled-run-status {
  flex: 0 0 auto;
  margin-left: auto;
}

.agent-chat-scheduled-run-prompt {
  margin: 8px 0 0;
  color: var(--color-text);
  white-space: pre-wrap;
}

.agent-chat-scheduled-run details p {
  margin: 6px 0 0;
}

.agent-chat-scheduled-run summary {
  cursor: pointer;
}

.agent-chat-scheduled-run-copy {
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.agent-chat-scheduled-run[data-state="completed"] .agent-chat-scheduled-run-status {
  color: var(--gn);
}

.agent-chat-scheduled-run[data-state="failed"] {
  border-left-color: var(--rd);
}

.agent-chat-scheduled-run[data-state="failed"] .agent-chat-scheduled-run-status {
  color: var(--rd);
}

.agent-chat-message--assistant {
  align-self: flex-start;
  width: 100%;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  white-space: normal;
}

.agent-chat-streaming-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-chat-message--assistant+.agent-chat-message--assistant {
  margin-top: -6px;
}

.agent-chat-message--assistant+.agent-chat-message--user {
  margin-top: 10px;
}

.agent-chat-message--loading {
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--color-background) 25%, var(--color-surface-muted, #eef0f5) 50%, var(--color-background) 75%);
  background-size: 200% 100%;
  animation: agent-chat-history-loading 1.4s ease-in-out infinite;
}

.agent-chat-message--loading-user {
  align-self: flex-end;
  width: min(280px, 45%);
}

.agent-chat-message--loading-assistant {
  width: min(460px, 78%);
}

.agent-chat-working-cue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.agent-chat-working-spinner {
  --spinner-duration: 0.8s;
  --spinner-dim: 0.12;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* Every spoke runs the same fade, offset by an eighth of the cycle, so a bright
   head chases clockwise with a trailing tail. One keyframe, eight delays — no
   rotation, no repaint churn. */
.agent-chat-working-spinner line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  animation: agent-chat-working-flutter var(--spinner-duration) linear infinite;
}

/* Negative delays start every spoke mid-cycle, so the cascade is already
   running on the first painted frame — no dark flash on mount. */
.agent-chat-working-spinner line:nth-child(1) {
  animation-delay: calc(var(--spinner-duration) * -1);
}

.agent-chat-working-spinner line:nth-child(2) {
  animation-delay: calc(var(--spinner-duration) * -0.875);
}

.agent-chat-working-spinner line:nth-child(3) {
  animation-delay: calc(var(--spinner-duration) * -0.75);
}

.agent-chat-working-spinner line:nth-child(4) {
  animation-delay: calc(var(--spinner-duration) * -0.625);
}

.agent-chat-working-spinner line:nth-child(5) {
  animation-delay: calc(var(--spinner-duration) * -0.5);
}

.agent-chat-working-spinner line:nth-child(6) {
  animation-delay: calc(var(--spinner-duration) * -0.375);
}

.agent-chat-working-spinner line:nth-child(7) {
  animation-delay: calc(var(--spinner-duration) * -0.25);
}

.agent-chat-working-spinner line:nth-child(8) {
  animation-delay: calc(var(--spinner-duration) * -0.125);
}

.agent-chat-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--color-primary);
  vertical-align: -0.12em;
  animation: agent-chat-cursor 0.8s steps(1) infinite;
}

@keyframes agent-chat-working-flutter {
  from {
    opacity: 1;
  }

  to {
    opacity: var(--spinner-dim);
  }
}

@keyframes agent-chat-cursor {

  0%,
  45% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes agent-chat-history-loading {
  to {
    background-position: -200% 0;
  }
}

@keyframes agent-chat-working-breathe {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .agent-chat-streaming-cursor,
  .agent-chat-message--loading {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* The chase is directional movement, so drop it. A slow whole-mark breathe
     still signals the agent is alive. */
  .agent-chat-working-spinner line {
    animation: none;
    opacity: 0.45;
  }

  .agent-chat-working-spinner {
    animation: agent-chat-working-breathe 2.4s ease-in-out infinite;
  }
}

.agent-chat-message--assistant> :first-child {
  margin-top: 0;
}

.agent-chat-message--assistant> :last-child {
  margin-bottom: 0;
}

.agent-chat-message--assistant h1,
.agent-chat-message--assistant h2,
.agent-chat-message--assistant h3,
.agent-chat-message--assistant h4 {
  margin: 1em 0 0.45em;
  line-height: 26px;
  font-size: 18px;
  font-weight: 600;
}

.agent-chat-message--assistant ul,
.agent-chat-message--assistant ol {
  margin: 0.65em 0;
  padding-left: 1.5em;
}

.agent-chat-message--assistant p,
.agent-chat-message--assistant blockquote,
.agent-chat-message--assistant pre {
  margin: 8px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.agent-chat-message--assistant blockquote {
  padding-left: 0.9em;
  border-left: 3px solid var(--color-border);
  color: var(--color-text-muted);
}

.agent-chat-message--assistant code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.agent-chat-message--assistant :not(pre)>code {
  padding: 0.1em 0.32em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  white-space: break-spaces;
}

.agent-chat-message--assistant a {
  color: var(--color-primary);
  text-underline-offset: 2px;
}

.agent-chat-message--assistant pre {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  padding: 1em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  white-space: pre;
}

.agent-chat-message--assistant table {
  width: 100%;
  margin: 0.8em 0;
  border-collapse: collapse;
  font-size: 0.95em;
}

.agent-chat-message--assistant th,
.agent-chat-message--assistant td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.agent-chat-message--assistant th {
  color: var(--color-text-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.agent-chat-answer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

/* Copy / Ask again stay out of the way until the answer is hovered. Pointer
   devices only, so touch keeps them permanently reachable. */
@media (hover: hover) {
  .agent-chat-answer-actions {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .agent-chat-message--assistant:hover .agent-chat-answer-actions,
  .agent-chat-answer-actions:focus-within {
    opacity: 1;
  }

  /* Same treatment for the whole sent-message row: timestamp and copy come out
     together on hover. */
  .agent-chat-user-actions .agent-chat-icon-action,
  .agent-chat-user-actions .agent-chat-timestamp {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .agent-chat-message--user:hover+.agent-chat-user-actions .agent-chat-icon-action,
  .agent-chat-message--user:hover+.agent-chat-user-actions .agent-chat-timestamp,
  .agent-chat-user-actions:hover .agent-chat-icon-action,
  .agent-chat-user-actions:hover .agent-chat-timestamp,
  .agent-chat-user-actions .agent-chat-icon-action:focus-visible,
  .agent-chat-user-actions:focus-within .agent-chat-timestamp {
    opacity: 1;
  }
}

/* Sent-message row: timestamp then copy, aligned under the user bubble. The
   negative margin cancels the transcript gap so the row hugs its message. */
.agent-chat-user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 28px;
}

.agent-chat-user-actions .agent-chat-timestamp {
  margin-right: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
}

.agent-chat-message--pending+.agent-chat-user-actions,
.agent-chat-message--queued+.agent-chat-user-actions {
  visibility: hidden;
}

.agent-chat-copy,
.agent-chat-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.agent-chat-icon-action svg,
.agent-chat-copy svg {
  width: 28px;
  height: 28px;
}

.agent-chat-icon-action:hover,
.agent-chat-icon-action:focus-visible {
  background: var(--color-surface-raised);
}

.agent-chat-icon-action.is-copied svg {
  opacity: 0.4;
}

.agent-chat-icon-action:disabled {
  cursor: default;
}

.agent-chat-icon-action:disabled:hover {
  background: transparent;
}

.agent-chat-copy:hover,
.agent-chat-copy:focus-visible {
  background: var(--color-background);
  color: var(--color-text);
}


.agent-chat-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgb(139 157 255 / 0.5);
  border-radius: 16px;
  background: var(--color-bg-500);
  box-shadow: 0 6px 75px 0 rgb(139 157 255 / 0.3);
  padding: 12px;
  margin-left: auto;
  margin-right: auto;
  max-width: 752px;
  width: 100%;
}

.agent-chat-composer textarea {
  width: 100%;
  min-height: 54px;
  /* resizeComposer() reads this back, so the cap lives here and nowhere else. */
  max-height: 156px;
  resize: none;
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: var(--color-foreground-200);
  padding: 8px;
  font: inherit;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
}

.agent-chat-composer textarea:focus {
  outline: none;
}

.agent-chat-composer textarea::placeholder {
  color: var(--color-text-muted);
}

.agent-chat-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

/* Left end of the action row; the model chip and send button stay right. */
.agent-chat-actions-start {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.agent-chat-suggest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

.agent-chat-suggest-icon,
.agent-chat-suggest-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* The chevron points at the composer while the menu is shut and flips up once it
   is open, so the button reads the same way in both states. */
.agent-chat-suggest-caret {
  transition: transform var(--motion-fast);
}

.agent-chat-suggest.is-open .agent-chat-suggest-caret {
  transform: rotate(180deg);
}

/* One-click twins for the two prompts asked for most; the rest live in the
   Playbook. They stay text-only so the sparkle keeps marking the menu. */
.agent-chat-quick-prompt {
  display: inline-flex;
  align-items: center;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
  transition: border-color var(--motion-fast), color var(--motion-fast), background-color var(--motion-fast);
}

/* Hover only warms the fill; the border and label hold until the button is
   actually pressed. */
.agent-chat-quick-prompt:hover,
.agent-chat-quick-prompt:focus-visible {
  background: #EDEDED0D;
}

.agent-chat-quick-prompt:active {
  border-color: #EDEDED26;
  background: #141414;
  color: #EDEDED;
}

.agent-chat-suggest:hover,
.agent-chat-suggest:focus-visible {
  background: #EDEDED0D;
}

/* The open menu and the press share one look, so the button reads as active
   the whole time the Playbook is up. */
.agent-chat-suggest:active,
.agent-chat-suggest.is-open {
  border-color: #8B9DFF;
  background: #8B9DFF26;
  color: #EDEDED;
}

.agent-chat-suggest:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Anchored to the composer, so it clears the whole box — message field included
   — rather than sitting on top of it. */
.agent-chat-shortcuts-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  /* Anchored to both edges of the composer, so the menu is exactly its width. */
  left: 0;
  right: 0;
  z-index: 60;
  border: 1px solid #2A2A2A;
  border-radius: 12px;
  padding: 16px 16px 0;
  background: #141414;

  /* Column layout so the prompt list is the only part that ever scrolls. */
  display: flex;
  flex-direction: column;
  max-height: min(70dvh, 560px);
}

.agent-chat-playbook-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.agent-chat-playbook-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #EDEDED;
}

.agent-chat-playbook-title {
  margin: 0;
  color: #EDEDED;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* Monospaced so the count can tick with the search without shifting the row. */
.agent-chat-playbook-count {
  margin-left: auto;
  color: #888888;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
}

.agent-chat-playbook-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  background: #1A1A1A;
  color: #888888;
  transition: border-color var(--motion-fast);
}

.agent-chat-playbook-search:focus-within {
  border-color: #8B9DFF;
}

.agent-chat-playbook-search svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.agent-chat-playbook-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #EDEDED;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
}

/* The wrapper carries the focus ring, so the field itself drops the global one
   instead of drawing a second border inside it. */
.agent-chat-playbook-search input:focus,
.agent-chat-playbook-search input:focus-visible {
  outline: none;
  box-shadow: none;
}

.agent-chat-playbook-search input::placeholder {
  color: #6B6B6B;
}

.agent-chat-playbook-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-chat-playbook-group+.agent-chat-playbook-group {
  margin-top: 16px;
}

.agent-chat-shortcuts-label {
  margin: 0 0 10px;
  color: #888888;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 15px;
}

.agent-chat-playbook-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pills rather than rows: the prompt text now lives only in the composer, so the
   title carries the whole affordance. */
.agent-chat-shortcut {
  display: flex;
  align-items: center;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 4.5px 12px;
  background: transparent;
  color: #C4C4C4;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}

.agent-chat-shortcut:hover,
.agent-chat-shortcut:focus-visible {
  background: #EDEDED0D;
}

.agent-chat-shortcut:active {
  border-color: #EDEDED26;
  background: #141414;
  color: #EDEDED;
}

/* Colour rides on the button so it matches the composer's quick prompts. */
.agent-chat-shortcut-title {
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
}

.agent-chat-playbook-empty {
  margin: 0;
  color: #888888;
  font-size: 14px;
  line-height: 20px;
}

/* Negative inline margin pulls the rule out to the panel edge; the padding puts
   the text back on the panel's 16px line. */
.agent-chat-playbook-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin: 16px -16px 0;
  border-top: 1px solid #2A2A2A;
  padding: 16px;
  color: #888888;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
}

.agent-chat-playbook-footer kbd {
  border: 1px solid #2A2A2A;
  border-radius: 4px;
  padding: 1px 6px;
  background: #1A1A1A;
  color: #888888;
  font: inherit;
}

.agent-chat-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.agent-chat-icon-button .button-icon {
  width: 18px;
  height: 18px;
}

.agent-chat-send {
  border: 0;
  border-radius: 10px;
  background: var(--color-primary);
  cursor: pointer;
}

.agent-chat-send:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.agent-chat-send .button-icon {
  width: 20px;
  height: 20px;
}

/* Stop joins Send while a turn is active: one controls the current turn and
   the other queues the next one. */
.agent-chat-abort {
  display: none;
}

.agent-chat--awaiting .agent-chat-abort {
  display: inline-flex;
}

@media (min-width: 1440px) {
  .agent-chat-panel {
    max-width: 1180px;
  }

  .agent-chat-messages {
    padding-inline: max(clamp(18px, 2.5vw, 36px), calc((100% - 900px) / 2));
  }

  .agent-chat-composer {
    max-width: 900px;
  }
}

@media (max-width: 1039px) {

  html.agent-chat-page,
  body.agent-chat-page {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.agent-chat-page {
    position: fixed;
    inset: 0;
    width: 100%;
  }

  .agent-chat-shell {
    position: fixed;
    top: var(--agent-chat-viewport-top, 0px);
    right: 0;
    left: 0;
    height: var(--agent-chat-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .agent-chat-shell .main-area {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
  }

  .agent-chat-shell .mobile-bar,
  .agent-chat-shell .agent-chat-mobile-setup,
  .agent-chat-shell .agent-chat-mobile-actions {
    position: absolute;
  }

  .agent-chat.content {
    flex: 1 1 auto;
    min-height: 0;
    max-width: 100%;
    gap: 0;
    padding: 16px;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .agent-chat-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) {
    padding: 0;
  }

  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-panel {
    gap: 12px;
  }

  /* The mobile bar already names the screen; a second header would eat the
     transcript's space. */
  .main-area:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-session:not(.agent-chat-conversations-breadcrumb) {
    display: none;
  }

  .main-area:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-mobile-actions {
    z-index: 51;
    top: 8px;
    right: 12px;
    display: flex;
    gap: 8px;
  }

  .agent-chat-mobile-new-session {
    display: inline-flex;
    min-height: 38px;
  }

  .agent-chat-messages {
    --agent-chat-message-gap: 4px;
    width: 100%;
    min-height: 0;
    padding: 16px;
    overscroll-behavior: contain;
  }

  .agent-chat-message--user {
    max-width: 92%;
  }

  /* The transcript runs the full panel width here, so the 752px desktop cap
     would leave the composer visibly narrower than the messages above it. */
  .agent-chat-composer {
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  /* The transcript view drops the screen padding, so the composer carries the
     16px inset itself instead of sitting flush against the edges. */
  .agent-chat.content:has(.agent-chat-messages > :not(.agent-chat-message--loading)) .agent-chat-composer {
    width: auto;
    margin: 0 16px max(16px, env(safe-area-inset-bottom));
    padding: 10px 12px;
  }

  .agent-chat-composer textarea {
    min-height: 44px;
    max-height: 120px;
    padding: 6px 4px;
  }

  .agent-chat-actions {
    gap: 6px;
  }

  .agent-chat-suggest,
  .agent-chat-model {
    min-height: 28px;
    padding-inline: 10px;
  }

  /* The action row is already tight on a phone; the Playbook still holds these. */
  .agent-chat-quick-prompt {
    display: none;
  }

  .agent-chat-model-slot {
    flex: 0 1 150px;
    min-width: 0;
  }

  .agent-chat-model {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
  }

  .agent-chat-model-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .agent-chat-icon-button {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  /* The composer spans the screen here, so centring in it centres on screen.
     There is no room above it either, so the menu sits over the message field
     instead, resting on the action row: row height + gap + bottom padding. */
  .agent-chat-shortcuts-menu {
    left: 50%;
    right: auto;
    width: min(560px, calc(96vw - 32px));
    transform: translateX(-50%);
    bottom: calc(40px + max(10px, env(safe-area-inset-bottom)));
    max-height: 60dvh;
    padding-bottom: 16px;
  }

  /* No physical ESC key on a phone; an outside tap closes the menu instead. */
  .agent-chat-playbook-footer {
    display: none;
  }

  .agent-chat-suggestions {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
    margin-top: 24px;
    overflow: hidden;
  }

  .agent-chat-suggestion {
    flex: 0 0 auto;
    padding: 6px clamp(5px, 1.4vw, 9px);
    border-radius: 8px;
    font-size: clamp(9px, 2.4vw, 12px);
    line-height: 16px;
    white-space: nowrap;
  }

  .agent-chat-message--assistant table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ==========================================================================
   opusfund character — continuous hop with confetti

   The two loops are locked together rather than running independently:
     hop      1.4s
     confetti 2.8s, in two waves offset by exactly one hop

   So a fresh burst launches on every landing, and each piece survives two
   hops — the air stays populated instead of emptying between jumps.

   The hop carries squash and stretch (anticipation before takeoff, stretch
   in flight, compression on landing, one rebound). The ground shadow shrinks
   as the character rises, which is what actually makes it read as leaving
   the floor rather than floating.
   ========================================================================== */

.opf-hop {
  --opf-ink: var(--moonx-text);
  --opf-up: var(--moonx-green);
  --opf-dn: var(--moonx-red);
  --opf-accent: var(--moonx-blue);

  --opf-hop-dur: 1.4s;
  --opf-life: 2.8s;

  display: block;
  width: 200px;
  height: 240px;
}

.opf-hop .opf-eyes {
  fill: var(--opf-ink)
}

.opf-hop .opf-body {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.87
}

.opf-hop .opf-seed {
  fill: var(--opf-ink)
}

.opf-hop .opf-flat {
  fill: var(--opf-ink)
}

.opf-hop .opf-smile {
  fill: none;
  stroke: var(--opf-ink);
  stroke-width: 1.25;
  stroke-linecap: round
}

.opf-hop .opf-up {
  fill: var(--opf-up)
}

.opf-hop .opf-dn {
  fill: var(--opf-dn)
}

.opf-hop .opf-ground {
  fill: var(--opf-accent)
}

/* excited by default: the pill mouth gives way to a shallow arc */
.opf-hop .opf-flat {
  opacity: 0
}

.opf-hop--flat .opf-flat {
  opacity: 1
}

.opf-hop--flat .opf-smile {
  opacity: 0
}

.opf-hop .opf-cx,
.opf-hop .opf-cy,
.opf-hop .opf-piece,
.opf-hop .opf-eyes circle,
.opf-hop .opf-ground {
  transform-box: fill-box;
  transform-origin: center;
}

/* the hopper pivots on its feet, not its centre */
.opf-hop .opf-hopper {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ---------- the hop ---------- */

@keyframes opf-hop-cycle {
  0% {
    transform: translateY(0) scale(1, 1);
    animation-timing-function: cubic-bezier(.4, 0, .7, .4);
  }

  11% {
    transform: translateY(1.7px) scale(1.09, .89);
    animation-timing-function: cubic-bezier(.1, .8, .3, 1);
  }

  27% {
    transform: translateY(-5.2px) scale(.94, 1.1);
    animation-timing-function: cubic-bezier(.25, .5, .4, 1);
  }

  44% {
    transform: translateY(-9.6px) scale(1, 1);
    animation-timing-function: cubic-bezier(.5, 0, .8, .5);
  }

  63% {
    transform: translateY(-4px) scale(.96, 1.07);
    animation-timing-function: cubic-bezier(.6, 0, .9, .5);
  }

  75% {
    transform: translateY(0) scale(1.11, .87);
    animation-timing-function: cubic-bezier(.2, 1.4, .4, 1);
  }

  88% {
    transform: translateY(0) scale(.98, 1.03)
  }

  100% {
    transform: translateY(0) scale(1, 1)
  }
}

/* inverse of the hop — small and faint at the apex */
@keyframes opf-hop-ground {

  0%,
  11% {
    transform: scale(1, 1);
    opacity: .22
  }

  44% {
    transform: scale(.6, 1);
    opacity: .07
  }

  75%,
  100% {
    transform: scale(1, 1);
    opacity: .22
  }
}

.opf-hop .opf-hopper {
  animation: opf-hop-cycle var(--opf-hop-dur) infinite;
}

.opf-hop .opf-ground {
  animation: opf-hop-ground var(--opf-hop-dur) infinite;
}

/* blink is deliberately off the hop rhythm so the two never lock up */
@keyframes opf-hop-blink {

  0%,
  91%,
  95%,
  100% {
    transform: scaleY(1)
  }

  93% {
    transform: scaleY(.08)
  }
}

.opf-hop .opf-eyes circle {
  animation: opf-hop-blink 4.7s ease-in-out infinite;
}

/* ---------- confetti ---------- */

@keyframes opf-cf-x {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(var(--dx))
  }
}

/* easing declared at a keyframe governs the interval starting there, so the
   piece decelerates on the way up and accelerates on the way down */
@keyframes opf-cf-y {
  0% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(.12, .72, .4, 1);
  }

  42% {
    transform: translateY(var(--peak));
    animation-timing-function: cubic-bezier(.5, 0, .85, .55);
  }

  100% {
    transform: translateY(var(--fall))
  }
}

@keyframes opf-cf-r {
  0% {
    transform: rotate(0);
    opacity: 0
  }

  6% {
    opacity: 1
  }

  70% {
    opacity: 1
  }

  100% {
    transform: rotate(var(--spin));
    opacity: 0
  }
}

.opf-hop .opf-cx {
  animation: opf-cf-x var(--opf-life) linear var(--d) infinite
}

.opf-hop .opf-cy {
  animation: opf-cf-y var(--opf-life) var(--d) infinite
}

.opf-hop .opf-piece {
  animation: opf-cf-r var(--opf-life) linear var(--d) infinite
}

/* ---------- modifiers ---------- */

/* calmer bounce for a persistent screen rather than a one-off moment */
.opf-hop--gentle {
  --opf-hop-dur: 1.9s;
  --opf-life: 3.8s
}

/* hop with no celebration behind it */
.opf-hop--bare .opf-cx,
.opf-hop--bare .opf-cy,
.opf-hop--bare .opf-piece {
  animation: none;
  opacity: 0
}

.opf-hop--sm {
  width: 140px;
  height: 168px
}

.opf-hop--lg {
  width: 260px;
  height: 312px
}

/* Direct port: MoonX reference Fund / Shots. */
.shots-page {
  width: 100%;
  /* Shot cards carry gauges and live amounts, so share Markets' wider data
     column instead of the narrower narrative-page measure. */
  max-width: 900px;
  margin-inline: auto;
  /* The page supplies the outer reading width.  Its inner sections already
     carry v22's 22px gutter, so inherited `.content` padding would make every
     Shots card 72px too narrow on desktop. */
  padding-inline: 0;
  gap: 0;
  overflow: visible;
}

.shots-heading {
  padding: 0 22px 12px;
}

.shots-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.shots-heading h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.shots-heading form.is-refreshing svg {
  animation: hosted-runtime-progress-spin .8s linear infinite;
}


.shots-page .fundseg {
  display: flex;
  gap: 6px;
  padding: 0 22px 12px;
  overflow-x: auto;
}

/* Below the sidebar breakpoint the title moved into the sticky mobile bar
   (_cockpit_sidebar's mobile_title) — Shots'/Hall of Fame's/Money's own
   heading would just repeat it, and .fundseg becomes the second sticky
   line under it instead (same recipe as Feed's tabs — see the note by
   .mobile-bar's border-bottom reset for why fixed, not sticky). Hall of
   Fame and Money both carry the shared `.shots-page` class alongside their
   own, so one rule reaches all three fund pages. */
@media (max-width: 1039px) {

  .shots-heading,
  .fund-heading {
    display: none;
  }

  .shots-page .fundseg.mobile-sticky-tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: auto;
    align-items: center;
    margin: 0;
    padding: 52px var(--space-16) var(--space-16) var(--space-16);
    background: var(--bg);
    border-bottom: var(--border-hairline) solid var(--line);
  }

  .content.shots-page {
    padding-top: 60px;
  }
}

/* Item visuals now come from the .mx-tab Tab/Segmented component
   (core-components.css, `--wash --accent`) — see
   app/views/shared/_fundseg.html.erb. This rule only owns the nav's own
   layout. A disabled item (`.mx-tab[aria-disabled="true"]`) is covered
   there too, even though nothing currently renders one. */

.shots-page .mcock {
  display: block;
  padding-top: 10px;
  padding-inline: 20px;
}

.shots-page .mcock>* {
  margin: 0;
}

.shots-page .mcock>*+* {
  margin-top: 8px;
}

.shots-page .mc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: none;
  border: 0;
  padding: 2px 0 34px;
}

.shots-page .mc-hero .bxtop {
  text-align: left;
}

.shots-page .lbl,
.shots-page .sw2 em,
.shots-page .stat>span,
.shots-page .stat-link>span {
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shots-page .sw2 em {
  font-weight: 700;
  letter-spacing: .09em;
}

.shots-page .mc-hero .lbl {
  margin: 0;
}

/* "Chasing right now" already says what the figure is; v19 drops the
   caption under it as redundant in the Shots cockpit specifically. */
.shots-page .mc-cap {
  display: none;
}

.shots-page .sidehero {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: clamp(28px, 7.9vw, 36px);
  font-weight: 700;
  text-shadow: 0 0 26px currentColor;
}

.shots-page .sidehero s {
  color: var(--moonx-text-secondary);
  font-size: .45em;
  text-decoration: none;
  vertical-align: .5em;
  margin-right: 1px;
}

/* The planet curvature under the hero figure: a huge circle, border-radius
   50%, clipped by .mc-hero's overflow:hidden so only the top arc peeks
   through — masked to fade out before it reaches the edges. */
.shots-page .sidehero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -40%;
  right: -40%;
  top: calc(100% + 6px);
  height: 110px;
  border-radius: 50%;
  border-top: 1.5px solid rgba(45, 123, 255, .5);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 68%);
  mask-image: linear-gradient(180deg, #000, transparent 68%);
}

.shots-page .mc-wal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.shots-page .sw2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 2px 10px;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}

.shots-page .sw2+.sw2 {
  border-left: 1px solid var(--moonx-line);
}

.shots-page .sw2 b {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: clamp(15px, 4.3vw, 19px);
  color: var(--moonx-green);
}

.shots-page .sw2 b.z,
.shots-page .sw2.c b.z {
  color: var(--moonx-text-secondary);
}

.shots-page .sw2.t b {
  color: var(--moonx-blue-high);
}

.shots-page .sw2.c b {
  color: var(--moonx-green);
}

.shots-page .collectable-amount-link {
  color: inherit;
  text-decoration: none;
}

.shots-page .stats {
  display: flex;
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
}

.shots-page .stat {
  display: flex;
  flex: 1;
  flex-direction: column-reverse;
  align-items: center;
  padding: 0;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
}

.shots-page .stat-link {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.shots-page .stat-link:hover,
.shots-page .stat-link:focus-visible {
  color: var(--moonx-blue-high);
}

.shots-page .stat+.stat {
  border-left: 1px solid var(--moonx-line);
}

.shots-page .stat b,
.shots-page .stat-link b {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.shots-page .stat>span,
.shots-page .stat-link>span {
  margin-top: 2px;
  font-size: 8px;
}

.shots-page .stat:not(.m, .v) b {
  text-shadow: 0 0 26px currentColor;
}


.shots-page .stat.v b {
  color: var(--moonx-green);
}

.shots-page .stat.v b.z {
  color: var(--moonx-text-secondary);
  text-shadow: none;
}

.shots-page .shots-warning,
.shots-page .shots-stale,
.shots-page .shots-empty {
  margin: 14px 22px 0;
  padding: 14px 16px;
  border: 1px solid var(--moonx-line);
  border-radius: 13px;
  background: var(--moonx-card);
  color: var(--moonx-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.shots-page .shots-warning {
  border-color: rgb(255 59 107 / .36);
  color: var(--moonx-text);
}

.shots-page #ptabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 28px;
  margin-bottom: var(--space-16);
  padding: 0 22px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shots-page #ptabs::-webkit-scrollbar {
  display: none;
}

/* Item visuals now come from the .mx-tab Tab/Segmented component
   (core-components.css) — see app/views/shots/index.html.erb. */
.shots-page #ptabs em {
  margin-left: 3px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  opacity: .55;
}

.shots-page #poslist {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 0 22px;
}

.shots-page turbo-frame#settled_shots {
  display: block;
}

/* #poslist supplies the 22px column, so its children drop their own inset
   rather than sitting 44px in. Same reason as #ledshort on the Money page. */
.shots-page #poslist .nudge,
.shots-page #poslist .shots-empty {
  margin-inline: 0;
}

/* Nothing riding yet — v19b's `#poslist .zero`. The one empty state on this
   page that carries a button; the filtered-empty case stays a plain line. */
.shots-page .shots-zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  padding: 34px 20px 36px;
  border: 1px dashed var(--moonx-line-strong);
  border-radius: 20px;
  text-align: center;
}

.shots-page .shots-zero-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(45, 123, 255, .3);
  border-radius: 16px;
  background: rgba(45, 123, 255, .1);
  color: var(--moonx-blue-high);
}

.shots-page .shots-zero-icon svg {
  width: 24px;
  height: 24px;
}

.shots-page .shots-zero b {
  margin-top: 16px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.shots-page .shots-zero p {
  max-width: 40ch;
  margin: 8px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
}

.shots-page .shots-zero-cta {
  min-width: 190px;
  margin-top: 18px;
}

.shots-page .mkrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--moonx-line-strong);
  border-radius: 16px;
  background: var(--moonx-card);
}

.shots-page button.mkrow {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shots-page .mkrow .t {
  min-width: 0;
}

.shots-page .mkrow .t b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.shots-page .mkrow .t b a {
  color: inherit;
  text-decoration: none;
}

.shots-page .mkrow .t b a:hover {
  text-decoration: underline;
}

.shots-page .mkrow .t>span {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.shots-page .mkrow .dir {
  display: inline-flex;
  margin-right: 7px;
  padding: 4px;
  border-radius: var(--radius-full);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
}

.shots-page .mkrow .dir.y {
  background: rgba(45, 123, 255, .16);
  color: var(--moonx-blue-high);
}

.shots-page .mkrow .px {
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.shots-page .mkrow .collend {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
}

.shots-page .mkrow .collx {
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
}

/* To collect: a won shot keeps its current one-button redemption behavior,
   while taking the mockup's landed-card treatment. */
.shots-page .mkrow.coll {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-top: 10px;
  border-color: rgb(166 255 61 / .45);
  background: radial-gradient(120% 130% at 0 0, rgb(166 255 61 / .16), var(--moonx-card) 58%);
  box-shadow: 0 12px 40px rgb(166 255 61 / .08);
}

.shots-page .mkrow.coll:hover {
  border-color: rgb(166 255 61 / .72);
  background: radial-gradient(120% 130% at 0 0, rgb(166 255 61 / .24), var(--moonx-card) 62%);
  box-shadow: 0 14px 46px rgb(166 255 61 / .14);
}

.shots-page .mkrow.coll::after {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(166 255 61 / .20), rgb(166 255 61 / 0) 62%);
  content: "";
  pointer-events: none;
  animation: collectable-shot-glow 3.2s ease-in-out infinite;
}

.shots-page .mkrow.coll .t,
.shots-page .mkrow.coll .collend {
  position: relative;
  z-index: 1;
}

/* `.t` carries three stacked lines (badge, title, outcome) and is usually
   the taller grid column, but a short title can leave it shorter than
   `.collend`'s big multiple — the row's `align-items: center` would then
   float the Landed badge away from the card's top edge. Pin it to the top
   regardless of which column ends up taller. */
.shots-page .mkrow.coll .t {
  align-self: start;
}

.shots-page .mkrow.coll .landed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--moonx-green);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shots-page .mkrow.coll .landed i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moonx-green);
  box-shadow: 0 0 10px var(--moonx-green);
  animation: collectable-shot-pulse 1.8s ease-in-out infinite;
}

.shots-page .mkrow.coll .t>b {
  font-size: 14px;
}

.shots-page .mkrow.coll .collend {
  align-items: flex-end;
  gap: var(--space-12);
}

.shots-page .mkrow.coll .collx {
  color: var(--moonx-green);
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 0 0 26px rgb(166 255 61 / .55);
}

.shots-page .mkrow.coll .collgo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgb(166 255 61 / .45);
  border-radius: var(--radius-full);
  background: rgb(166 255 61 / .10);
  color: var(--moonx-green);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
}

.shots-page .mkrow.coll:hover .collgo {
  border-color: rgb(166 255 61 / .72);
  background: rgb(166 255 61 / .18);
}

@keyframes collectable-shot-glow {

  0%,
  100% {
    opacity: .55;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes collectable-shot-pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .45;
    transform: scale(.7);
  }
}

@media (max-width: 560px) {
  .shots-page .mkrow.coll .collx {
    font-size: 28px;
  }

  .shots-page .mkrow.coll .collgo {
    padding: 5px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .shots-page .mkrow.coll::after,
  .shots-page .mkrow.coll .landed i {
    animation: none;
  }
}

.shots-page .posrow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: var(--moonx-card);
  border: 1px solid var(--moonx-line-strong);
  border-radius: 16px;
  transition: .16s;
}

.shots-page .posrow:hover {
  background: var(--moonx-raised);
  border-color: var(--moonx-line-strong);
  transform: translateY(-1px);
}

.shots-page .posrow--interactive {
  cursor: pointer;
}

.shots-page .posrow--interactive:focus-visible {
  outline: var(--border-focus) solid var(--color-primary);
  outline-offset: var(--space-2);
}

.shots-page .posrow .t,
.shots-page .settled .t {
  min-width: 0;
}

.shots-page .posrow .t>b {
  display: block;
  padding-right: 84px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.shots-page .settled a:hover {
  text-decoration: underline;
}

.shots-page .pmeta {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
}

.shots-page .tb {
  display: table;
  margin: 2px 0 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgb(45 123 255 / .14);
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.shots-page .shot-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-2) 0 var(--space-6);
}

.shots-page .shot-badges .tb {
  margin: 0;
}

.shots-page .shot-outcome-badge {
  flex: none;
}

.shots-page .tb.pending {
  background: rgb(255 255 255 / .08);
  color: var(--moonx-text-secondary);
}

/* A cancelled shot is an ended request, not a miss: keep v22's blue status
   badge and the quiet, neutral trailing marker. The released-cash line stays
   in `.pwhen`, shared with the standard shot card's ledger detail. */
.shots-page .posrow--cancelled .tb {
  background: color-mix(in srgb, var(--moonx-blue) 16%, transparent);
  color: var(--moonx-blue-high);
}

.shots-page .posrow--cancelled .delta {
  color: var(--moonx-text-secondary);
}

.shots-page .posrow .t .px2 {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.shots-page .pwhen {
  display: block;
  margin-top: 5px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shots-page .pwhen.soon {
  color: var(--moonx-amber);
}

.shots-page .delta {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.shots-page .delta em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 11px;
  line-height: 1.6;
}

.shots-page .delta b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.shots-page .delta.up {
  background: rgb(166 255 61 / .14);
  color: var(--moonx-green);
}

.shots-page .delta.dn {
  background: rgb(45 123 255 / .16);
  color: var(--moonx-blue-high);
}

.shots-page .delta.flat {
  background: rgb(255 255 255 / .08);
  color: var(--moonx-text-secondary);
}

.shots-page .gz3 {
  position: relative;
  display: block;
  margin-top: 26px;
  padding-bottom: 12px;
}

.shots-page .tr3 {
  position: relative;
  display: block;
  width: 100%;
  height: 26px;
}

.shots-page .rail3 {
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 8px;
  border-radius: 99px;
  background: var(--moonx-well);
  border: 1px solid var(--moonx-line);
}

.shots-page .gloss {
  position: absolute;
  left: 0;
  top: 7px;
  height: 8px;
  border-radius: 99px 0 0 99px;
  background: rgb(255 59 107 / .13);
  border: 1px solid rgb(255 59 107 / .22);
  border-right: 0;
}

.shots-page .glt {
  position: absolute;
  top: 6px;
  width: 1px;
  height: 10px;
  background: rgb(255 59 107 / .42);
}

.shots-page .ggt {
  position: absolute;
  top: 15px;
  width: 1px;
  height: 6px;
  background: var(--moonx-line-strong);
}

.shots-page .glab {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  opacity: .75;
}

.shots-page .gband {
  position: absolute;
  top: 7px;
  height: 8px;
  min-width: 2px;
  z-index: 2;
  border-radius: 99px;
}

.shots-page .gband.up {
  background: var(--moonx-green);
}

.shots-page .gband.dn {
  background: var(--moonx-red);
}

.shots-page .gzero {
  position: absolute;
  top: 3px;
  width: 2px;
  height: 16px;
  background: var(--moonx-text);
  opacity: .55;
  transform: translateX(-50%);
  z-index: 3;
}

.shots-page .gzlab {
  position: absolute;
  top: 22px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
}

.shots-page .ship3 {
  position: absolute;
  top: -9px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 4;
  padding: 2px 6px;
  border: 1px solid var(--moonx-line-strong);
  border-radius: 7px;
  background: var(--moonx-raised);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
}

.shots-page .ship3.up {
  color: var(--moonx-green);
  border-color: rgb(166 255 61 / .42);
}

.shots-page .ship3.dn {
  color: var(--moonx-red);
  border-color: rgb(255 59 107 / .42);
}

.shots-page .ship3.e0 {
  transform: translateX(0);
}

.shots-page .ship3.e1 {
  transform: translateX(-100%);
}

.shots-page .gsum {
  position: absolute;
  right: 0;
  top: 20px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  opacity: .75;
  white-space: nowrap;
}

.shots-page .gcap {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}

.shots-page .gcap b {
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .02em;
}

.shots-page .shot-values-unavailable {
  display: block;
  margin-top: 24px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
}

.shots-page .posfoot {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  min-height: 24px;
  margin-top: var(--space-12);
}

.shots-page .posfoot .shot-footer {
  margin-top: 0;
}

.shots-page .shot-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.shots-page .shot-footer form {
  margin: 0;
}

.shots-page .shot-reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-md);
  background: var(--moonx-raised);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.shots-page .shot-reaction em {
  font-size: 13px;
  font-style: normal;
  line-height: 1;
}

.shots-page .shot-reaction span {
  color: var(--moonx-text);
}

.shots-page .shot-reaction--miss,
.shots-page .shot-reaction.is-reacted {
  border-color: var(--color-primary);
  color: var(--moonx-blue-high);
}

.shots-page .shot-reaction--miss span,
.shots-page .shot-reaction.is-reacted span {
  color: var(--moonx-blue-high);
}

.shots-page .shots-pagination {
  display: flex;
  justify-content: center;
  margin: 16px 22px 0;
}

.shots-page .settled {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--moonx-card);
  border: 1px solid var(--moonx-line-strong);
  border-radius: 16px;
}

.shots-page .settled .t>b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.shots-page .settled-summary {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 400;
}

.shots-page .settled .m {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.shots-page .settled.won {
  border-color: rgb(166 255 61 / .28);
}

.shots-page .settled.won .m {
  color: var(--moonx-green);
}

.shots-page .settled.lost .m {
  color: var(--moonx-blue-high);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 920px) {
  .shots-page .mcock {
    display: block;
    margin: 20px 22px 0;
    padding: 20px 22px 22px;
    border: 1px solid var(--moonx-line-strong);
    border-radius: 16px;
    background: var(--moonx-card);
  }

  .shots-page .mcock .mc-hero {
    padding: 0 !important;
    margin-bottom: 16px !important;
    text-align: left;
    overflow: visible;
  }

  .shots-page .mcock .mc-hero .lbl {
    font-size: 9px;
    letter-spacing: .14em;
  }

  /* v19's hero figure. Left in the desktop block because that is the width
     the mockup was measured at; the narrow layout keeps its own size. */
  .shots-page .mcock .sidehero {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
  }

  /* The planet curvature is a mobile-only flourish — v19 drops it once the
     hero has room to breathe on its own. */
  .shots-page .mcock .sidehero::after {
    display: none;
  }

  .shots-page .mcock .mc-wal {
    gap: 12px;
    min-width: 0;
    margin-top: 0;
  }

  /* Wallet tiles default to a neutral border/strong edge; Trading wallet
     carries the blue edge (still in flight) and To collect carries the
     mint edge + gradient wash (realized, ready to claim). */
  .shots-page .mcock .sw2 {
    align-items: flex-start;
    padding: 11px 14px;
    text-align: left;
    border: 1px solid var(--moonx-line-strong);
    border-radius: 12px;
    background: var(--moonx-card);
  }

  .shots-page .mcock .sw2.t {
    border-color: rgba(45, 123, 255, .34);
  }

  .shots-page .mcock .sw2.c {
    border-color: rgba(166, 255, 61, .28);
    background-image: linear-gradient(140deg, rgba(166, 255, 61, .12), transparent 62%);
  }

  /* Nothing to collect yet: the tile reads as any other neutral tile
     rather than promising money that isn't there. */
  .shots-page .mcock .sw2.c.z {
    border-color: var(--moonx-line-strong);
    background-image: none;
  }

  .shots-page .mcock .sw2 b {
    margin-top: 3px;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.02em;
  }

  .shots-page .mcock[data-cock="you"] .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 0;
    padding-top: 12px;
  }

  .shots-page .mcock[data-cock="you"] .stat {
    align-items: flex-start;
    justify-content: center;
    padding: 11px 14px;
    text-align: left;
    border: 1px solid var(--moonx-line-strong);
    border-radius: 12px;
    background: var(--moonx-card);
  }

  .shots-page .mcock[data-cock="you"] .stat+.stat {
    border-left: 1px solid var(--moonx-line-strong);
  }

  .shots-page .mcock[data-cock="you"] .stat>span,
  .shots-page .mcock[data-cock="you"] .stat-link>span {
    margin: 0 0 3px;
    font-size: 8.5px;
  }

  .shots-page .mcock[data-cock="you"] .stat b {
    font-size: 17px;
  }
}

@media (max-width: 560px) {
  .shots-page {
    padding-inline: 0;
  }

  .shots-page .fundseg {
    padding: 0 16px 10px;
  }

  .shots-page .shots-heading {
    padding-inline: 16px;
  }

  .shots-page #ptabs {
    padding-inline: 16px;
  }

  .shots-page #poslist {
    padding-inline: 16px;
  }

  .shots-page .glab {
    display: none;
  }

  .shots-page .posrow {
    padding: 14px;
  }

  .shots-page .posrow .t>b {
    padding-right: 78px;
  }

  .shots-page .settled {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

/* ---------- reduced motion ---------- */
/* no jumping, no thrown objects — the character stands and breathes */
@media (prefers-reduced-motion: reduce) {

  .opf-hop .opf-cx,
  .opf-hop .opf-cy,
  .opf-hop .opf-piece,
  .opf-hop .opf-ground,
  .opf-hop .opf-eyes circle {
    animation: none
  }

  .opf-hop .opf-piece {
    opacity: .35
  }

  .opf-hop .opf-ground {
    opacity: .22
  }

  .opf-hop .opf-hopper {
    animation: opf-hop-breathe 4.4s ease-in-out infinite;
  }

  @keyframes opf-hop-breathe {

    0%,
    100% {
      transform: scale(1, 1)
    }

    50% {
      transform: scale(1.012, 1.012)
    }
  }
}

/* Direct port: MoonX reference Fund / Money + Hall of Fame.
   Values are the reference's own literals rather than the cockpit tokens: its
   ground is neutral (#0E0E0E) where --moonx-card is blue-black, so routing
   these through the tokens would have shifted every surface on the page.
   Icons and inline SVG are deliberately not ported. */
.fund-page {
  width: 100%;
  /* Fund, Shots, Money, and Hall of Fame share live data cards, so keep the
     same wider reading column as Markets. */
  max-width: 900px;
  margin-inline: auto;
  gap: 0;
  overflow: visible;
}

.fund-heading {
  padding: 0 22px 12px;
}

.fund-heading h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.fund-page .fund-section-title {
  margin: 0;
  padding: 24px 22px 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.035em;
}

.fund-page .money-wallets-heading {
  padding: 24px 22px 12px;
}

.fund-page .money-wallets-heading .fund-section-title {
  padding: 0;
}

/* A blank list is not a list, it is a page that looks broken. */
/* `display: flex` below outranks the `hidden` attribute's UA `display: none`,
   so the Money ledger's empty state stayed visible under real rows (both from
   the server and after ledger_filter_controller toggled it). Restore it. */
.fund-page .fund-empty[hidden] {
  display: none;
}

.fund-page .fund-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 12px 22px 0;
  padding: 34px 20px 36px;
  border: 1px dashed var(--moonx-line);
  border-radius: 20px;
  color: var(--moonx-text-secondary);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}

/* Three wallets read as three, side by side. They stack only when a column
   would be too narrow to hold a balance on one line. */
.money-page .wal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
  align-items: stretch;
}

.money-page .wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.money-page .wcard {
  padding: 16px;
  border: 1px solid var(--moonx-line);
  border-radius: 16px;
  background: var(--moonx-card);
}

.money-page .wcard.main {
  border-color: rgb(166 255 61 / .3);
}

.money-page .wcard.desk {
  border-color: rgb(45 123 255 / .3);
}

.money-page .wcard.yield {
  border-color: rgb(166 255 61 / .22);
  background: linear-gradient(140deg, rgb(166 255 61 / .1), rgb(45 123 255 / .04)), var(--moonx-card);
}

.money-page .wcard .wh {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.money-page .wcard .av {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--moonx-raised);
}

.money-page .wcard .av.v1 {
  background: var(--moonx-blue-high);
}

.money-page .wcard .av.v2 {
  background: var(--moonx-blue);
}

.money-page .wcard .av.v3 {
  background: #3c74c4;
}

.money-page .wcard .av svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
}

.money-page .wcard .wt {
  flex: 1;
  min-width: 0;
}

.money-page .wcard .wt b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.money-page .wcard .wsub {
  display: block;
  margin-top: 8px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.money-page .wcard .bal {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.money-page .wcard.main .bal {
  color: var(--moonx-green);
}

.money-page .wcard.desk .bal {
  color: var(--moonx-blue-high);
}

.money-page .wcard .bal.z {
  color: var(--moonx-text-secondary);
}

.money-page .wcard .bal s {
  margin-right: 2px;
  font-size: .5em;
  text-decoration: none;
  vertical-align: .42em;
}

.money-page .apy {
  position: absolute;
  top: 18px;
  right: -26px;
  z-index: 1;
  width: 132px;
  padding: 6px 0;
  transform: rotate(45deg);
  background: #836ef9;
  box-shadow: 0 2px 14px rgb(131 110 249 / .35);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.money-page .wcard .btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}

/* Button visuals now come from the .mx-btn Icon Button/Button component
   (core-components.css) — see app/views/money/_wallet_card.html.erb. This
   rule only owns the layout (full-width, stacked) that wraps it. */
.money-page .wcard .btns .mx-btn {
  width: 100%;
}

.fund-page .nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline: 22px;
  padding: 15px 17px;
  border: 1px solid rgb(45 123 255 / .34);
  border-radius: 18px;
}

.fund-page .nudge .k {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(45 123 255 / .16);
}

.fund-page .nudge .t {
  flex: 1;
  min-width: 0;
}

.fund-page .nudge .t b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.fund-page .nudge .t span {
  display: block;
  margin-top: 3px;
  color: #8A8A8A;
  font-size: 11.5px;
  font-weight: 600;
}

.fund-page .nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline: 22px;
  padding: 15px 17px;
  border: 1px solid rgb(45 123 255 / .34);
  border-radius: 18px;
}

.fund-page .nudge .k {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgb(45 123 255 / .16);
  color: var(--moonx-blue-high);
}

.fund-page .nudge .k svg {
  width: 20px;
  height: 20px;
}

.fund-page .nudge .t {
  flex: 1;
  min-width: 0;
}

.fund-page .nudge .t b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}

.fund-page .nudge .t span {
  display: block;
  margin-top: 3px;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

/* Visuals now come from the .mx-btn Solid Button component
   (core-components.css) — see app/views/money/show.html.erb. This rule only
   owns the nudge row's own layout. */
.fund-page .nudge-cta {
  flex: none;
}

/* In the zero-main-wallet + incoming-funds state, the deposit nudge and the
   sync action are consecutive states of the same wallet column. Keep both on
   the column gutter and leave the reference's 14px breathing room between
   them. */
.fund-page .syncbar {
  margin-top: 14px;
  margin-inline: 22px;
}

/* Stacked variant: the empty state owns the whole column, so the prompt reads
   top-to-bottom and the border goes dashed to say "nothing here yet". */
.fund-page .nudge-stacked {
  flex-direction: column;
  gap: 10px;
  padding: 34px 20px 36px;
  border-style: dashed;
  border-color: var(--moonx-line);
  text-align: center;
}

.fund-page .nudge-stacked .k {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.fund-page .nudge-stacked .t {
  flex: none;
}

.fund-page .nudge-stacked .t b {
  font-size: 19px;
}

.fund-page .nudge-stacked .t span {
  max-width: 34ch;
  margin: 6px auto 0;
  font-size: 12.5px;
}

.fund-page .nudge-stacked .nudge-cta {
  margin-top: 8px;
  padding: 14px 28px;
}

@media (max-width: 620px) {
  .fund-page .nudge {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .fund-page .nudge-cta {
    width: 100%;
  }
}

.money-page #wtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Item visuals now come from the .mx-tab Tab/Segmented component
   (core-components.css) — see app/views/money/show.html.erb. */
.money-page #wtabs em {
  margin-left: 2px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .7;
}

.money-page #wtabs .ledsel {
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--moonx-line);
  border-radius: 99px;
  background: var(--moonx-card);
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.money-page #wtabs .ledsel:hover {
  border-color: var(--moonx-text);
  color: var(--moonx-text);
}

/* #ledshort already supplies the 22px column, so the empty state drops its own
   inset here rather than sitting 44px in. Hall of Fame keeps it: there the same
   element is a sibling of .hof-list, not nested inside it. */
.money-page #ledshort .fund-empty {
  margin-inline: 0;
}

.money-page .led {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--moonx-line);
  border-radius: 16px;
  background: var(--moonx-card);
}

.money-page .led .ic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--moonx-raised);
}

.money-page .led .ic.in {
  background: rgb(166 255 61 / .14);
}

.money-page .led .ic.out {
  background: rgb(255 255 255 / .06);
}

.money-page .led .ic.shot {
  background: rgb(45 123 255 / .14);
}

.money-page .led .ic.failed {
  background: var(--color-danger-bg-opacity);
}

.money-page .led .d {
  min-width: 0;
}

.money-page .led .d>b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.money-page .led .d>b a {
  color: inherit;
  text-decoration: none;
}

.money-page .led .d>span {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 500;
}

.money-page .led .a {
  flex: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.money-page .led .a.plus {
  color: var(--moonx-green);
}

.money-page .led .a.z {
  color: var(--moonx-text-secondary);
}

/* ══ Hall of Fame card ═══════════════════════════════════════════════════
   v19's `.rec`: a 5/7 collectible card whose picture (a guilloche weave and a
   round sky medallion) is generated by record_card_controller.js. Values were
   read with getComputedStyle on moonx-human-v19.html's rendered cards, since
   its stylesheet re-declares `.rec` in five layers and the first declaration
   is not what renders (e.g. the multiple is Blanka, not the display face).
   Near-miss mockup literals were snapped to the nearest --moonx-* token: the
   card ground (#0e1a2e to #0a0a12) to raised/card, the inner frame and the
   medallion ring to --moonx-line.

   Only the sky may stretch: the card keeps 5/7 at every width, so the
   medallion is centred on the CARD (its wrapper stays static and just
   reserves height), the same point the weave is centred on. */
.hof-page .hof-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-18);
  padding: 0 22px;
}

/* v24b's empty Hall: the first card is a real, non-interactive specimen,
   rendered by the same artwork controller as a settled card. */
.hof-page .hof-empty-state {
  display: grid;
  grid-template-columns: minmax(240px, 274px) minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  max-width: 660px;
  margin: 30px auto 0;
  padding: 0 22px;
}

.hof-page .hofcard--specimen {
  pointer-events: none;
}

.hof-page .hofcard-serial {
  position: relative;
  z-index: 1;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-number-serial);
  font-weight: var(--text-number-serial--weight);
  letter-spacing: .16em;
}

.hof-page .hofcard-type {
  position: relative;
  z-index: 1;
  margin-top: 9px;
}

.hof-page .hof-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hof-page .hof-empty-copy>span {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-label-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hof-page .hof-empty-copy h2 {
  margin: 10px 0 0;
  color: var(--moonx-text);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.hof-page .hof-empty-copy p {
  max-width: 38ch;
  margin: 12px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.62;
}

.hof-page .hof-empty-copy .hof-empty-next {
  margin-top: 10px;
  color: var(--moonx-text);
  font-weight: 600;
}

.hof-page .hof-empty-copy .mx-btn {
  min-width: 180px;
  margin-top: 20px;
}

@media (max-width: 620px) {
  .hof-page .hof-empty-state {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 320px;
    padding: 0;
  }

  .hof-page .hof-empty-copy .mx-btn {
    width: 100%;
  }
}

.hof-page .hofcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 5 / 7;
  padding: var(--space-16);
  overflow: hidden;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-16);
  background: radial-gradient(120% 90% at 50% 0%, var(--moonx-raised), var(--moonx-card) 70%);
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

/* The halo takes the outcome's colour and sits UNDER the card, lifting it off
   the page instead of adding one more line. */
.hof-page .hofcard.is-landed {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--moonx-green) 10%, transparent),
    0 14px 34px -18px color-mix(in srgb, var(--moonx-green) 42%, transparent);
}

.hof-page .hofcard.is-missed {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--moonx-blue-high) 10%, transparent),
    0 14px 34px -18px color-mix(in srgb, var(--moonx-blue) 42%, transparent);
}

/* The inner frame: a card reads as a printed document, not a tile. */
.hof-page .hofcard::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* A diagonal glint crossing on hover, like a laminated card tilted. */
.hof-page .hofcard::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 2;
  background: linear-gradient(72deg, transparent 42%, rgb(255 255 255 / .10) 50%, transparent 58%);
  opacity: 0;
  transform: translateX(-62%);
  transition: transform .62s var(--ease);
  pointer-events: none;
}

.hof-page .hofcard:not(.hofcard--specimen) {
  cursor: pointer;
}

.hof-page .hofcard:hover {
  transform: translateY(-3px);
}

.hof-page .hofcard:hover::before {
  opacity: 1;
  transform: translateX(62%);
}

.hof-page .hofcard.is-landed:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--moonx-green) 20%, transparent),
    0 22px 46px -18px color-mix(in srgb, var(--moonx-green) 58%, transparent);
}

.hof-page .hofcard.is-missed:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--moonx-blue-high) 20%, transparent),
    0 22px 46px -18px color-mix(in srgb, var(--moonx-blue) 58%, transparent);
}

.hof-page .hofcard> :not(.hofcard-weave, .hofcard-sky) {
  position: relative;
  z-index: 1;
}

/* The weave works AT REST: pale enough never to fight the multiple, under the
   sky, which stays the centrepiece. */
.hof-page .hofcard-weave .gu {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  transition: opacity .22s var(--ease);
  pointer-events: none;
}

.hof-page .hofcard:hover .hofcard-weave .gu {
  opacity: .26;
}

.hof-page .hofcard.is-landed .hofcard-weave .gu {
  filter: hue-rotate(-42deg) saturate(1.3);
}

.hof-page .hofcard-title {
  display: -webkit-box;
  margin-top: 13px;
  padding: 0 var(--space-4);
  overflow: hidden;
  color: var(--moonx-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hof-page .hofcard-title a {
  color: inherit;
  text-decoration: none;
}

.hof-page .hofcard-title a:hover {
  text-decoration: underline;
}

.hof-page .hofcard-sky {
  flex: 1 1 0;
  width: 100%;
  min-height: 60px;
}

.hof-page .hofcard-sky .sky {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 48%;
  height: auto;
  aspect-ratio: 1;
  overflow: hidden;
  object-fit: cover;
  border-radius: 50%;
  background: var(--moonx-page);
  box-shadow: 0 0 0 1px var(--moonx-line), 0 0 0 6px color-mix(in srgb, var(--moonx-page) 55%, transparent);
  transform: translate(-50%, -50%);
}

.hof-page .mult {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-multiple-tier-2);
  line-height: var(--text-multiple-tier-2--line-height);
  letter-spacing: var(--text-multiple-tier-2--letter-spacing);
}

.hof-page .hofcard.is-landed .mult {
  color: var(--moonx-green);
}

.hof-page .hofcard.is-missed .mult {
  color: var(--moonx-text-secondary);
}

.hof-page .hofcard-stamp {
  margin-top: var(--space-9);
  transform: rotate(-2.5deg);
}

.hof-page .hofcard-date {
  display: block;
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-number-serial);
  font-weight: var(--text-number-serial--weight);
  line-height: var(--text-number-serial--line-height);
  letter-spacing: var(--text-number-serial--letter-spacing);
}

/* The chain seal: a phrase to understand, a hash to verify. */
.hof-page .hofcard-chain {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-9);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-full);
  background: var(--moonx-well);
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-label-micro);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.hof-page .hofcard-chain:hover {
  border-color: var(--moonx-line-strong);
}

.hof-page .hofcard-chain i {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--moonx-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--moonx-green) 12%, transparent);
}

.hof-page .hofcard-chain b {
  color: var(--moonx-text);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {

  .hof-page .hofcard,
  .hof-page .hofcard::before,
  .hof-page .hofcard-weave .gu {
    transition: none;
  }

  .hof-page .hofcard:hover {
    transform: none;
  }
}

/* The scene's own motion (v19 carries these for both the card and the
   certificate). transform-box: fill-box is required on each: without it the
   transform origin is the SVG's corner and everything flies off askew. The
   classes are emitted by lib/record_artwork.js, so they are unscoped —
   keyframes cannot be scoped anyway — and prefixed `sk-` as in v19. */
.sk-on {
  opacity: 0;
  animation: skOn .42s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

.sk-burst,
.sk-core,
.sk-wave,
.sk-spark,
.sk-smoke,
.sk-flash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-delay: var(--d, 0ms);
  animation-fill-mode: forwards;
}

.sk-burst {
  animation-name: skBurst;
  animation-duration: 1.1s;
  animation-timing-function: var(--ease);
}

.sk-core {
  animation-name: skCore;
  animation-duration: 1.2s;
  animation-timing-function: var(--ease);
}

.sk-wave {
  animation-name: skWave;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(.12, .72, .26, 1);
}

.sk-spark {
  animation-name: skSpark;
  animation-duration: 2.4s;
  animation-timing-function: var(--ease);
}

.sk-smoke {
  animation-name: skSmoke;
  animation-duration: 2.6s;
  animation-timing-function: var(--ease);
}

.sk-flash {
  animation-name: skFlash;
  animation-duration: .75s;
  animation-timing-function: var(--ease);
  transform-box: view-box;
  mix-blend-mode: screen;
}

/* the flag plants itself: it drops and bounces once */
.sk-flag {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: skFlag .7s var(--spring) forwards;
  animation-delay: var(--d, 0ms);
}

/* on impact the tether snaps: kept taut across the blast, nothing seemed to
   have happened */
.sk-cut {
  animation: skOn .42s var(--ease) forwards, skCut .5s var(--ease) forwards;
  animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + 100ms);
}

.sk-shake {
  animation: skShake .5s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

@keyframes skOn {
  to {
    opacity: 1;
  }
}

@keyframes skCut {
  to {
    opacity: 0;
  }
}

@keyframes skBurst {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  22% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: .68;
    transform: scale(1);
  }
}

@keyframes skCore {
  0% {
    opacity: 0;
    transform: scale(.08);
  }

  18% {
    opacity: 1;
    transform: scale(2.1);
  }

  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}

@keyframes skWave {
  0% {
    opacity: 0;
    transform: scale(.05);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes skSpark {
  0% {
    opacity: 0;
    transform: scale(.2);
  }

  14% {
    opacity: 1;
    transform: scale(1.4);
  }

  60% {
    opacity: .92;
    transform: scale(1);
  }

  100% {
    opacity: .62;
    transform: scale(.96);
  }
}

@keyframes skSmoke {
  0% {
    opacity: 0;
    transform: scale(.4) translateY(6px);
  }

  30% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scale(1.8) translateY(-14px);
  }
}

@keyframes skFlash {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes skFlag {
  0% {
    opacity: 0;
    transform: translateY(-14px) scaleY(.4);
  }

  55% {
    opacity: 1;
    transform: translateY(0) scaleY(1.12);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes skShake {

  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-7px, 4px);
  }

  22% {
    transform: translate(6px, -5px);
  }

  36% {
    transform: translate(-5px, -3px);
  }

  52% {
    transform: translate(4px, 3px);
  }

  70% {
    transform: translate(-2px, 1px);
  }

  86% {
    transform: translate(1px, -1px);
  }
}

/* Reduced motion shows the final scene, without the flight or the burst. */
@media (prefers-reduced-motion: reduce) {

  .sk-on,
  .sk-burst,
  .sk-spark,
  .sk-fly {
    opacity: 1;
    animation: none;
  }

  .sk-core,
  .sk-wave,
  .sk-smoke,
  .sk-flash,
  .sk-shake {
    animation: none;
  }

  .sk-flag {
    opacity: 1;
    animation: none;
  }

  .sk-core,
  .sk-wave,
  .sk-smoke,
  .sk-flash {
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .money-page .wal {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {

  .fund-page .fund-heading,
  .fund-page .fund-section-title {
    padding-inline: 16px;
  }

  .fund-page .money-wallets-heading {
    padding-inline: 16px;
  }

  .fund-page .nudge {
    margin-inline: 16px;
  }

  .fund-page .syncbar {
    margin-inline: 16px;
  }

  .money-page .wal,
  .money-page #wtabs,
  .money-page #ledshort,
  .hof-page .hof-list {
    padding-inline: 16px;
  }
}


/* ══ Feed share sheet ════════════════════════════════════════════════════
   Chrome for the card a post is shared as. The prototype carries these in its
   base layer, above the v18 rules that tune them, so they sit here — ahead of
   the block below, which still gets to override.

   Scoped .feed-page like everything else the feed owns. Keyframes cannot be
   scoped, so they are named for the page rather than the prototype's `fi`/`up`,
   which would collide with the first sheet any other page grows. */
.feed-page .veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(5px);
}

.feed-page .veil.on {
  display: flex;
  animation: feed-veil-in .2s
}

@keyframes feed-veil-in {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.feed-page .sheet {
  width: 100%;
  max-width: 440px;
  max-height: 90dvh;
  padding: 16px;
  padding-top: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  animation: feed-sheet-up .3s cubic-bezier(.2, .9, .3, 1);
}

@keyframes feed-sheet-up {
  from {
    transform: translateY(100%)
  }

  to {
    transform: none
  }
}

.feed-page .grab {
  width: 38px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 99px;
  background: var(--line-2);
}

/* The eyebrow above a sheet's heading. Six later rules restyle .lbl on this
   page — body face, not mono — but none of them sets a size or a case, so the
   base has to, and sits ahead of them to be overridden rather than to win. */
.feed-page .lbl {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim);
}

.feed-page .sheet h3 {
  margin-top: 9px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -.035em;
  line-height: 1.14;
}

/* The card is drawn 560 wide whatever the screen, and only the scale factor
   changes — so a share from a phone and one from a desktop are the same image
   to the pixel. The height is fixed with it, which is what makes the saved file
   a predictable shape rather than one that grows with the question. */
.feed-page .sharefit {
  --sh: 448;
  width: 100%;
  max-width: 560px;
  margin: 12px auto 0;
  height: calc(var(--sh) * 1px * var(--sk, 1));
  overflow: hidden;
}

.feed-page .sharefit>.sharewrap {
  width: 560px;
  height: calc(var(--sh) * 1px);
  margin-top: 0;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  transform: scale(var(--sk, 1));
}

.feed-page .sharefit>.sharewrap>[data-feed-share-target="card"] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.feed-page .sharefit>.sharewrap>.refband {
  flex: none
}

.feed-page .sharefit .scard {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feed-page .sharefit .scard>* {
  flex: none
}

/* A question of three lines drops a size rather than being cut. */
.feed-page .sharefit.tightq .scard .sq {
  font-size: 21px;
  line-height: 1.22
}

/* The sentence under a sheet's title. The multiple inside it is the figure the
   reader is being asked about, so it takes the colour the feed gives a win. */
/* Two buttons fit side by side. v20 builds this row with a script that walks
   each sheet on load; the sheets here are written in ERB, which already knows
   what it put in them, so the row is authored rather than assembled — same
   result, nothing to run. Its ordering rule is worth keeping in mind when
   adding one: the way out goes left, the commitment right. */
.feed-page .btnrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.feed-page .btnrow .mx-btn {
  margin-top: 0
}

/* Inside a sheet it wraps instead, so a button that keeps its own line can. */
.feed-page .veil .sheet .btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.feed-page .sheet .sb {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--dim);
}

.feed-page .sheet .sb b {
  color: var(--green)
}

.feed-page .sharewrap {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 20px;
}

/* The band is the invitation: the wordmark, and the code that makes whoever
   opens a fund from this card yours. */
.feed-page .refband {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(120deg, var(--violet), #2D7BFF);
}

.feed-page .refband .mark {
  flex: none;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.04em;
  color: #fff;
}

.feed-page .refband .off {
  flex: 1;
  min-width: 0;
  text-align: right
}

.feed-page .refband .off em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
}

.feed-page .refband .off b {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

.feed-page .sharenote {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--well);
}

.feed-page .sharenote .k {
  flex: none;
  font-size: 13px
}

.feed-page .sharenote p {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--dim);
}

.feed-page .sharenote p b {
  color: var(--txt);
  font-weight: 700
}

.feed-page .subacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.feed-page .subacts button {
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--dim);
  transition: .16s;
}

.feed-page .subacts button:hover {
  color: var(--txt);
  border-color: var(--line-2)
}

/* ── the card itself ─────────────────────────────────────────────────── */
.feed-page .scard {
  padding: 26px
}

.feed-page .scard .stop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.feed-page .scard .swho {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1
}

.feed-page .scard .swho b {
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap
}

.feed-page .scard .swho em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The multiple is the loudest thing on the card, because it is the reason
   anybody stops scrolling. A miss keeps the figure and loses the glow. */
.feed-page .scard .smx {
  flex: none;
  margin-top: 11px;
  margin-right: 8px;
  font-family: var(--font-brand);
  font-size: clamp(64px, 17vw, 96px);
  line-height: .68;
  letter-spacing: 0;
  color: var(--mint);
  text-shadow: 0 0 32px rgba(166, 255, 61, .58), 0 0 88px rgba(166, 255, 61, .30);
}

.feed-page .scard .smx.miss {
  color: var(--dim);
  text-shadow: none
}

.feed-page .scard .skick {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--dim)
}

.feed-page .scard .skick b {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--txt);
}

.feed-page .scard .sq {
  margin-top: 18px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -.02em;
}

.feed-page .scard .sladder {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px
}

.feed-page .scard .sladder .rung {
  width: 26px;
  height: 6px;
  border-radius: 99px;
  background: var(--line-2);
}

.feed-page .scard .sladder .rung.on {
  width: 44px;
  background: var(--mint)
}

.feed-page .scard .sladder em {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.feed-page .scard .sline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--dim);
}

.feed-page .scard .sline .win {
  color: var(--mint);
  font-weight: 700
}

.feed-page .scard .sline i {
  font-style: normal;
  color: var(--line-2)
}

.feed-page .scard .sline em {
  font-style: normal
}

/* The side badge: one colour for Yes, No, or any named outcome. */
.feed-page .scard .sline .sside {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(45, 123, 255, .16);
  color: var(--violet-2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1
}

/* The share control holds the card it shares; the card must never draw. */
.feed-page .ofoot .chip.ico template {
  display: none
}

/* ══ MoonX feed components ═══════════════════════════════════════════════
   Was app/assets/stylesheets/moonx/*.css, loaded per-page from
   feed/index.html.erb. Folded in here so the pipeline is the three files
   this sheet already imports. Every rule below is scoped .feed-page, so
   it reaches the feed and nothing else — keep it that way when editing.
   File order is the cascade the page used to load: base sets the scoped
   tokens, atoms and chips come before the cards that override them. */

/* ── moonx/base.css ─────────────────────────────────────────────── */
.feed-page {
  /* Only what the feed reads differently from :root — everything else it used
     to restate now inherits. Each of these is scoped on purpose: :root answers
     for the rest of the app, and no page but this one reads these names the
     way this page does.

     --hot: :root's blue-high is reserved for the markets table, while Feed's
     red hot tier is a real page-specific distinction.

     --far-2 / --far-bg: the "far" tier is blue here by design — a rare shot is
     still in flight — while the markets table keeps :root's paler pair for its
     "No" chip. This one is a real fork, and both sides are in use.

     --fs-*: the feed's type sizes. They were --t-*, beside the --t-* durations
     in :root, where one prefix meant both a size and a time. */
  --hot: var(--moonx-red);

  --far-2: var(--moonx-blue-high);
  --far-bg: rgba(45, 123, 255, .16);

  --fs-micro: 9.5px;
  --fs-body: 13px;
  --fs-title: 19px;
}

.feed-page .settled .t>span .venue.mark,
.feed-page .mkrow .t>span .venue.mark,

/* ── page scaffolding ─────────────────────────────────────────────────────
   The app's .content is a flex column with its own gutter; the prototype's
   .pad carries the gutter itself and spaces its children with one rule. We
   keep .content for the shell and hand the rhythm to .pad, so the two do not
   both claim it. */
.feed-page.content {
  display: block;
  padding: 0 0 72px;
  overflow: visible;
}

/* v24b's Feed-only setup strip: it is a shortcut to the same gated setup
   modal, not another onboarding flow. */
.account-setup-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--mid);
  margin: 0 auto;
  padding: 10px 14px;
  border: 1px solid rgba(45, 123, 255, .3);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: rgba(45, 123, 255, .1);
}

/* `display: flex` above would otherwise override the hidden attribute. */
.account-setup-banner[hidden] {
  display: none;
}

.account-setup-banner-copy {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--moonx-text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-setup-banner .mx-btn {
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 14px;
  border-radius: 10px;
  flex: none;
  font-size: 12px;
}

@media (max-width: 919px) {
  .account-setup-banner {
    border-radius: 0;
  }
}

.feed-page .pad {
  padding: 0 var(--space-16) var(--space-32);
}

.feed-page .pad>*+* {
  margin-top: 16px;
}

.feed-page .pad>.hcount+* {
  margin-top: 0;
}

/* v22 stacks title, tabs and the first post with no gap between them: the
   heading's and the tab row's own bottom padding already make the space. */
.feed-page .pad>.hd+.tabs,
.feed-page .pad>.tabs+* {
  margin-top: 0;
}

.feed-page .pad>*+.hd {
  margin-top: 0;
}

.feed-page .hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 24px 0 12px;
  flex: none;
}

.feed-page .pad>.hd:first-child {
  padding-top: 20px;
}

/* Below the sidebar breakpoint the title moved into the sticky mobile bar
   (_cockpit_sidebar's mobile_title) — this heading would just repeat it. */
@media (max-width: 1039px) {
  .feed-page .hd {
    display: none;
  }
}

.feed-page .hd h2 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 28px;
  line-height: var(--text-heading-page--line-height);
  letter-spacing: -.035em;
  color: var(--txt);
}

/* The row bleeds to the screen edges and keeps its own inner margin, so a
   scrolled tab is never cut mid-word. */
.feed-page .tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex: none;
  scrollbar-width: none;
  margin-inline: -16px;
  padding: 0 16px 12px;
  /* The app's own .tabs pushes its children right and wraps them. This row
     reads left to right and scrolls instead, so both have to be said back. */
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/* Second line under the mobile bar's title (see mobile_title in
   _cockpit_sidebar), pinned directly beneath it. `position:fixed`, not
   `sticky` — `body{overflow-x:hidden}` (application.css) forces a computed
   `overflow-y:auto` per spec, which makes body a scroll container even
   though it never actually scrolls (html does), and a sticky descendant
   measured against a container that both "can" but never does scroll just
   clamps near the top instead of holding at `top`. Fixed sidesteps that by
   anchoring to the viewport directly, like .mobile-bar itself already does.
   `.feed-page .pad`'s compensating padding-top (below) reserves the space
   this removes from flow. */
@media (max-width: 1039px) {

  /* `.feed-page .tabs.mobile-sticky-tabs` (3 classes) rather than the bare
     class — `.feed-page .tabs`'s own `margin-inline` (2 classes, further
     down, for the ≥920px reading column) would otherwise outrank a plain
     `.mobile-sticky-tabs` and reintroduce the bleed this rule resets. */
  .feed-page .tabs.mobile-sticky-tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: auto;
    align-items: center;
    margin: 0;
    padding: 52px var(--space-16) var(--space-16) var(--space-16);
    background: var(--bg);
    border-bottom: var(--border-hairline) solid var(--line);
  }

  .feed-page .pad {
    padding-top: 60px;
  }
}

.feed-page .tabs::-webkit-scrollbar {
  display: none;
}

.feed-page .tabs>* {
  flex: 0 0 auto;
}

.feed-page .tabs::after {
  content: "";
  flex: 0 0 8px;
}

/* `:not(.mx-toggle *)` excludes the All/Moonshots Toggle now sharing this
   row — it's a separate Figma component (node 183:110, `.mx-toggle` in
   core-components.css) with its own skin, not an un-migrated fallback. */
.feed-page .tabs a:not(.mx-tab):not(.mx-toggle *),
.feed-page .tabs button:not(.mx-tab):not(.mx-toggle *),
.feed-page .tabs span:not(.mx-tab):not(.mx-toggle *) {
  flex: none;
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--line-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
  transition: .16s;
  text-decoration: none;
}

.feed-page .tabs a:not(.mx-tab):not(.mx-toggle *):hover {
  color: var(--txt);
}

/* The selected tab is white, not acid. The prototype declares this three
   times over its layers — mint in the middle one — and the last word, the one
   that actually renders, is --ink. Green is rationed there to mean money
   really won; a tab is not that. */
.feed-page .tabs :not(.mx-tab):not(.mx-toggle *)[aria-current="page"],
.feed-page .tabs :not(.mx-tab):not(.mx-toggle *)[aria-pressed="true"] {
  background: var(--ink);
  color: #05070E;
  border-color: var(--ink);
}

.feed-page .tabs :not(.mx-tab):not(.mx-toggle *)[aria-disabled="true"] {
  opacity: .62;
}

.feed-page .hcount {
  font-size: var(--fs-body);
  color: var(--ink-2);
  font-weight: 600;
  margin: 16px 0;
}

.feed-page .hcount b {
  color: var(--txt);
  font-weight: 800;
  letter-spacing: .01em;
}

.feed-page .hcount:empty {
  display: none;
  margin: 0;
}

/* ── the reading column ───────────────────────────────────────────────────
   Feed and Markets use the same desktop outer width and 22px gutter. */
@media (min-width: 920px) {
  .feed-page .pad {
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
  }
}

/* button_to wraps each control in a form; the footer is a flex row, so the
   form has to stop being a block or every chip lands on its own line. */
.feed-page .ofoot-form {
  display: contents;
}

/* ── responsive ──────────────────────────────────────────────────────────
   The prototype's media queries, carried over. Without them the row keeps
   its desktop metrics on a phone. */

@media (min-width:920px) {

  .feed-page .pad,
  .feed-page .tabs {
    padding-left: 22px;
    padding-right: 22px
  }

  .feed-page .tabs {
    margin-inline: calc(-1 * var(--space-22));
  }

  /* .pad already carries the 22px gutter; the heading must not add its own. */
  .feed-page .pad>.hd:first-child {
    padding: var(--space-24) 0 var(--space-12)
  }

  .feed-page

  /* ══ LARGEUR DE LECTURE ══
       La colonne centrale reste la plus large des trois,
  .feed-page mais son CONTENU
       est borne : au dela,
  .feed-page une carte de feed devient une bande illisible.
       Le reste de la colonne devient de la marge,
  .feed-page pas de la card. */
  .stage .hd,
  .feed-page .stage .tabs,
  .feed-page .stage .pad,
  .feed-page .stage .stream,
  .feed-page .stage .comp {
    width: 100%;
    max-width: var(--mid);
    margin-left: auto;
    margin-right: auto
  }

  .feed-page

  /* le feed se termine au-dessus de la barre,
  .feed-page pas dessous */
  .stage .pad {
    padding-bottom: 96px
  }
}

@media (max-width:919px) {
  .feed-page

  /* Add funds vit desormais dans le cockpit : le + de l'entete faisait double */
  #v-feed .hd .ib {
    display: none
  }

  .feed-page .pad>.settled+.settled,
  .feed-page .pad>.lb+.lb,
  .feed-page .pad>.memo+.memo,
  .feed-page .pad>.posrow+.posrow {
    margin-top: 16px
  }
}

@media (max-width:560px) {

  .feed-page .posrow,
  .feed-page .pad>.posrow {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 0
  }

  .feed-page .posrow+.posrow,
  .feed-page .pad>.posrow+.posrow {
    padding-top: 14px;
    margin-top: 12px
  }
}

/* ── moonx/atoms.css ─────────────────────────────────────────────── */
/* ════ MULT BADGE ════ */
.feed-page .mult {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.02em;
  padding: 4px 12px;
  border-radius: 99px;
  flex: none;
  line-height: 1.15;
  background: linear-gradient(120deg, var(--violet), #1E4FCC);
  color: #fff;
}

.feed-page .mult.v {
  background: linear-gradient(120deg, #5A9BFF, #1E4FCC)
}

.feed-page .mult.m {
  background: linear-gradient(120deg, #A8CBF2, #2A5FCC);
  color: #04142E
}

.feed-page .mult.a {
  background: linear-gradient(120deg, #BFD9FF, #5A9BFF);
  color: #04142E
}

.feed-page .mult.big {
  font-size: 22px;
  padding: 8px 12px
}

.feed-page .mult.p {
  background: linear-gradient(120deg, var(--amber), #8A5300);
  color: #221200
}

.feed-page .dir {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 4px 4px;
  border-radius: 8px;
  margin-right: 7px
}

.feed-page .dir.y {
  background: rgba(166, 255, 61, .16);
  color: var(--mint)
}

.feed-page .dir.n {
  background: var(--far-bg);
  color: var(--far-2)
}

.feed-page .px {
  color: var(--txt);
  font-weight: 700
}

.feed-page .posrow .t .px2 .px {
  color: var(--txt);
  font-weight: 700
}

.feed-page .act.fresh {
  background: linear-gradient(120deg, rgba(45, 123, 255, .09), transparent 60%)
}

.feed-page .fine {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  line-height: 1.7;
  margin-top: 16px
}

.feed-page .venue,
.feed-page .tb,
.feed-page .dir,
.feed-page .risk,
.feed-page .rx,
.feed-page .pledge,
.feed-page .chainchip,
.feed-page .act-tag,
.feed-page .delta,
.feed-page .mult,
.feed-page .tkchip,
.feed-page .stamp {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  align-items: center;
  vertical-align: middle;
  flex: 0 0 auto;
  white-space: nowrap
}

.feed-page .px,
.feed-page .num {
  display: inline !important
}

.feed-page .sidep .mult {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.02em;
  padding: 5px 9px;
  border-radius: 99px;
  white-space: nowrap
}

.feed-page #v-set .fine {
  margin-top: 16px
}

.feed-page .sortrow .hcount {
  flex: 1;
  min-width: 0
}

.feed-page .hcount {
  font-size: 13px;
  color: var(--dim);
  font-weight: 600;
  margin: 16px 0
}

.feed-page .hcount b {
  color: var(--txt);
  font-weight: 800
}

.feed-page .hcount:empty {
  display: none;
  margin: 0
}

.feed-page .hcount+#flist,
.feed-page .hcount+#poslist,
.feed-page .hcount+#loglist,
.feed-page .hcount+#slist,
.feed-page .hcount+#mlist {
  margin-top: 0
}

.feed-page .pad>.hcount+* {
  margin-top: 0
}

.feed-page .mult.m {
  background: rgba(45, 123, 255, .16);
  color: var(--violet-2);
  border: 1px solid rgba(45, 123, 255, .28)
}

.feed-page .dir.y {
  background: rgba(166, 255, 61, .16);
  color: var(--mint)
}

.feed-page .hcount {
  font-size: var(--fs-body)
}

.feed-page .tag,
.feed-page .dir,
.feed-page .venue,
.feed-page .qmore {
  font-size: var(--fs-micro)
}

.feed-page .hcount b {
  letter-spacing: .01em
}

.feed-page .dir.y,
.feed-page .dir.n {
  background: rgba(45, 123, 255, .16);
  color: var(--violet-2)
}

.feed-page .mult,
.feed-page .mult.v {
  background-color: var(--blue);
  color: #fff
}

.feed-page .mult.m {
  background-color: var(--blue-bg);
  color: var(--blue-hi);
  border: 1px solid var(--blue-line)
}

.feed-page .mult.a {
  background-color: var(--blue-hi);
  color: #04142E
}

.feed-page .mult,
.feed-page .tag,
.feed-page .dir,
.feed-page .venue,
.feed-page .btype,
.feed-page .stamp {
  border-radius: 99px
}

.feed-page .tb,
.feed-page .dir,
.feed-page .risk,
.feed-page .tag,
.feed-page .act-tag,
.feed-page .pledge,
.feed-page .rec .stamp {
  font-weight: 800
}

.feed-page .fine,
.feed-page .hint,
.feed-page .fillhint {
  font-size: 11px;
  letter-spacing: 0
}

.feed-page .ch .mult,
.feed-page .mkrow .mult.v {
  background-color: rgba(45, 123, 255, .14);
  background-image: none;
  color: #7FB6FF;
  border: 1px solid rgba(45, 123, 255, .34);
}

.feed-page .mult.m,
.feed-page .mult.m.big {
  background-color: rgba(45, 123, 255, .14)
}

.feed-page #v-money #ledctl .hcount {
  margin: 0;
  text-align: center
}

.feed-page #v-set .mult.edit {
  cursor: text;
  min-width: 66px;
  text-align: center;
  outline: 0
}

.feed-page #v-set .mult.edit:hover {
  box-shadow: inset 0 0 0 1px rgba(150, 195, 255, .45)
}

.feed-page #v-set .mult.edit:focus {
  box-shadow: inset 0 0 0 2px var(--blue);
  background: var(--card-2);
  color: var(--txt)
}

.feed-page #v-set .mult.edit.saved {
  box-shadow: inset 0 0 0 2px var(--green)
}

.feed-page #v-set input.mult.edit {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  font: inherit;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 6px 8px
}

.feed-page .scard .sline .px {
  color: var(--txt);
  font-weight: 700
}

.feed-page .mkrow .mult,
.feed-page .mkrow .mult.v,
.feed-page .mkrow .mult.m,
.feed-page .mkrow .mult.a {
  background-color: rgba(166, 255, 61, .11);
  background-image: none;
  color: var(--mint);
  border: 1px solid rgba(166, 255, 61, .26);
}

.feed-page .veil .sheet .hint,
.feed-page .veil .sheet .fine {
  margin-top: 16px;
  line-height: 1.7
}

/* nothing there: say so quietly and stand down */
.feed-page .syncbar.empty .st span {
  color: var(--dim)
}

/* ── responsive ──────────────────────────────────────────────────────────
   The prototype's media queries, carried over. Without them the row keeps
   its desktop metrics on a phone. */

@media (max-width:620px) {
  .feed-page #v-money #ledctl .hcount {
    order: 3;
    flex-basis: 100%;
    text-align: left
  }
}

/* ── moonx/chip.css ─────────────────────────────────────────────── */
.feed-page .cta .ic {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.9;
  vertical-align: 0
}

.feed-page .cta>[data-ic] {
  display: flex;
  align-items: center;
  flex: none
}

.feed-page .chip.rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700
}

.feed-page .chip.rx-btn em {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  transition: transform .22s var(--spring)
}

.feed-page .chip.rx-btn span {
  color: var(--txt)
}

.feed-page .chip.rx-btn:hover em {
  transform: scale(1.18)
}

.feed-page .chip.rx-btn.on {
  border-color: var(--violet);
  background: rgba(45, 123, 255, .14)
}

.feed-page .chip.rx-btn.on em {
  transform: scale(1.22)
}

.feed-page .chip.rx-btn.on span {
  color: var(--violet-2)
}

.feed-page .collect .cta {
  background: linear-gradient(120deg, var(--mint), #3D8A0E);
  color: #04241A
}

.feed-page .chip {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--dim);
  transition: .16s;
}

.feed-page .chip:hover {
  color: var(--txt);
  border-color: var(--line-2)
}

.feed-page .chip.go {
  background: linear-gradient(120deg, var(--violet), #2D7BFF);
  color: #fff;
  border-color: transparent
}

.feed-page .chip.go:hover {
  filter: brightness(1.12);
  color: #fff
}

/* ════ BIG BUTTON ════ */
.feed-page .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(120deg, var(--violet), #2D7BFF);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  transition: .16s;
  margin-top: 8px;
}

.feed-page .cta:hover {
  filter: brightness(1.12)
}

.feed-page .cta.ghost {
  background: var(--card);
  border: 1px solid var(--line-2);
  color: var(--txt)
}

.feed-page .cta.ghost:hover {
  filter: none;
  background: var(--card-2)
}

.feed-page .cta.hot {
  background: linear-gradient(120deg, var(--hot), #1E4FCC)
}

.feed-page button,
.feed-page .chip,
.feed-page .pill,
.feed-page .posrow,
.feed-page .mkrow,
.feed-page .lb,
.feed-page .rec,
.feed-page .memo,
.feed-page .settled,
.feed-page [data-sheet],
.feed-page [data-go] {
  transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease), color var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.feed-page .cta:active {
  transform: scale(.985)
}

.feed-page #v-set .cta {
  width: 100%;
  margin-top: 12px;
  border-radius: 16px;
  padding: 16px
}

.feed-page .side .bx>.cta {
  margin-top: 16px
}

.feed-page .cta,
.feed-page .cta.hot,
.feed-page .bx-add,
.feed-page .nav .mid button {
  background-image: none;
  background-color: var(--violet)
}

.feed-page .cta.ghost {
  background-color: transparent
}

.feed-page .collect .cta {
  background: var(--card-2);
  color: var(--mint);
  border: 1px solid rgba(166, 255, 61, .30)
}

.feed-page .chip.rx-btn.on {
  border-color: #2D7BFF;
  background: rgba(45, 123, 255, .14)
}

.feed-page .collect .cta {
  background: var(--card-2);
  color: #A6FF3D;
  border: 1px solid rgba(166, 255, 61, .34)
}

.feed-page .rail .cta:hover {
  background: #2D7BFF
}

.feed-page .cta.hot {
  background: #2D7BFF
}

/* follow was a filled gradient - flattened to an outline chip */
.feed-page .chip.go {
  background: transparent;
  background-image: none;
  border-color: rgba(45, 123, 255, .45);
  color: #7FB6FF
}

.feed-page .chip.go:hover {
  background: rgba(45, 123, 255, .10);
  border-color: rgba(45, 123, 255, .70);
  color: #7FB6FF;
  filter: none
}

.feed-page .cta,
.feed-page .chip.go,
.feed-page .bx-add,
.feed-page .agent-launch {
  box-shadow: 0 8px 30px rgba(45, 123, 255, .34)
}

.feed-page .cta.won,
.feed-page .cta.ghost {
  box-shadow: none
}

.feed-page .collect .cta {
  box-shadow: 0 8px 30px rgba(166, 255, 61, .28)
}

.feed-page .cta,
.feed-page .chip.go,
.feed-page .bx-add,
.feed-page .snd,
.feed-page .mult,
.feed-page .mult.v,
.feed-page .mult.m,
.feed-page .mult.a,
.feed-page .nav .mid button,
.feed-page .agent-launch,
.feed-page .av .k,
.feed-page .sidememo .k,
.feed-page .badge {
  background-image: none
}

.feed-page .cta,
.feed-page .chip.go,
.feed-page .bx-add,
.feed-page .snd,
.feed-page .nav .mid button {
  background-color: var(--blue);
  color: #fff
}

.feed-page .cta:hover,
.feed-page .chip.go:hover,
.feed-page .bx-add:hover,
.feed-page .snd:hover {
  background-color: #4A8CFF;
  filter: none
}

.feed-page .collect .cta {
  background-color: var(--green);
  color: #06170A
}

.feed-page .cta.won {
  background-color: transparent;
  border: 1px solid var(--green);
  color: var(--green)
}

.feed-page .cta,
.feed-page .chip,
.feed-page .bx-add,
.feed-page .agent-launch,
.feed-page .snd {
  border-radius: 12px
}

.feed-page .rail .cta {
  margin-top: 8px
}

.feed-page .cta,
.feed-page .chip.go,
.feed-page .bx-add,
.feed-page .snd,
.feed-page .nav .mid button {
  background-image: linear-gradient(180deg, #4C8BFF, #2D7BFF);
}

.feed-page .cta:hover,
.feed-page .chip.go:hover,
.feed-page .bx-add:hover,
.feed-page .snd:hover,
.feed-page .nav .mid button:hover {
  background-image: linear-gradient(180deg, #6BA0FF, #3E86FF);
}

.feed-page .cta:active,
.feed-page .chip.go:active,
.feed-page .bx-add:active,
.feed-page .snd:active {
  background-image: linear-gradient(180deg, #2D7BFF, #1E4FCC);
}

.feed-page .rail .cta:hover {
  background: linear-gradient(180deg, #6BA0FF, #3E86FF)
}

.feed-page .rail .cta:active {
  background: linear-gradient(180deg, #2D7BFF, #1E4FCC)
}

.feed-page .btnrow .cta {
  margin-top: 0
}

.feed-page #v-money #ledshort+.cta {
  margin-top: 18px
}

.feed-page #v-squad .gift .cta {
  margin-top: 18px
}

.feed-page .rail>.cta {
  display: none
}

.feed-page .veil .sheet .cta:not(.ghost):not(.hot):not(.won) {
  background-color: rgba(45, 123, 255, .18);
  background-image: none;
  border: 1px solid rgba(45, 123, 255, .55);
  color: #fff
}

.feed-page .veil .sheet .cta:not(.ghost):not(.hot):not(.won):hover {
  background-color: rgba(45, 123, 255, .28);
  background-image: none;
  border-color: rgba(45, 123, 255, .78)
}

.feed-page .veil .sheet .btnrow .mx-btn {
  flex: 1 1 calc(50% - 5px);
  width: auto;
  min-width: 0;
  margin: 0
}

.feed-page .veil .sheet .btnrow .mx-btn--block {
  flex: 1 1 100%
}

.feed-page .veil .sheet .cta {
  box-shadow: inset 0 0 22px rgba(45, 123, 255, .30)
}

.feed-page .veil .sheet .cta.ghost {
  box-shadow: none
}

.feed-page .veil .sheet>.cta,
.feed-page .veil .sheet .step>.cta {
  margin-top: 20px
}

.feed-page .veil .sheet .btnrow .cta {
  flex-basis: calc(50% - 5px)
}

.feed-page .lockveil .cta {
  margin-top: 6px;
  width: auto;
  padding: 14px 22px
}

.feed-page #v-ceo .cta:not(.ghost):not(.hot):not(.won),
.feed-page .tier .cta:not(.ghost):not(.hot):not(.won),
.feed-page .lockveil .cta {
  background-color: rgba(45, 123, 255, .18);
  background-image: none;
  border: 1px solid rgba(45, 123, 255, .55);
  color: #fff
}

.feed-page #v-ceo .cta:not(.ghost):not(.hot):not(.won):hover,
.feed-page .tier .cta:not(.ghost):not(.hot):not(.won):hover,
.feed-page .lockveil .cta:hover {
  background-color: rgba(45, 123, 255, .28);
  background-image: none;
  border-color: rgba(45, 123, 255, .78);
  filter: none
}

.feed-page #v-ceo .cta,
.feed-page .tier .cta,
.feed-page .lockveil .cta {
  box-shadow: inset 0 0 22px rgba(45, 123, 255, .30)
}

.feed-page #v-ceo .cta.ghost,
.feed-page .tier .cta.ghost {
  box-shadow: none
}

.feed-page .veil .sheet .cta[disabled] {
  opacity: .4;
  pointer-events: none
}

.feed-page .veil .sheet .cta.hot {
  background-color: rgba(45, 123, 255, .18);
  background-image: none;
  border: 1px solid rgba(45, 123, 255, .55);
  color: #fff;
  box-shadow: inset 0 0 22px rgba(45, 123, 255, .30)
}

.feed-page .veil .sheet .cta.hot:hover {
  background-color: rgba(45, 123, 255, .28);
  background-image: none;
  border-color: rgba(45, 123, 255, .78);
  filter: none
}

.feed-page .syncbar .cta {
  width: auto;
  flex: none;
  margin: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  background-image: none;
  background-color: rgba(45, 123, 255, .18);
  border: 1px solid rgba(45, 123, 255, .55);
  box-shadow: inset 0 0 22px rgba(45, 123, 255, .30);
  color: var(--txt);
}

.feed-page .spec-say .cta {
  width: auto;
  min-width: 180px;
  margin-top: 20px
}

/* ── responsive ──────────────────────────────────────────────────────────
   The prototype's media queries, carried over. Without them the row keeps
   its desktop metrics on a phone. */

@media (min-width:920px) {
  .feed-page .rail .cta {
    margin-top: 12px;
    color: #fff;
    justify-content: center;
    text-align: center;
    gap: 0;
    font-size: 13px;
    font-weight: 800
  }

  .feed-page .rail .cta:hover {
    color: #fff;
    background: linear-gradient(120deg, var(--violet), #2D7BFF)
  }
}

@media (max-width:919px) {

  .feed-page .cta,
  .feed-page .bx-add,
  .feed-page .nav .mid button {
    box-shadow: none
  }
}

@media (min-width:720px) {
  .feed-page #v-squad .giftsplit .gift .cta {
    margin-top: auto
  }

  .feed-page #v-squad .giftsplit .gift .cta {
    margin-top: auto
  }
}

@media (max-width:560px) {
  .feed-page .syncbar .cta {
    width: 100%;
    margin-top: 4px
  }
}

@media (max-width:620px) {
  .feed-page .spec-say .cta {
    width: 100%
  }
}

/* ── moonx/avatar.css ─────────────────────────────────────────────── */
/* ════ AVATARS ════ */
.feed-page .av {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
  background: var(--card-2)
}

.feed-page .av.sm {
  width: 29px;
  height: 29px;
  border-radius: 8px;
  font-size: 13px
}

.feed-page .av.lg {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  font-size: 28px
}

.feed-page .av.ring {
  box-shadow: 0 0 0 2px var(--violet)
}

.feed-page .av.fr {
  box-shadow: 0 0 0 2px var(--mint)
}

.feed-page .av.photo {
  background-size: cover;
  background-position: center;
  font-size: 0
}

/* An uploaded fund picture (FundAvatarHelper) fills the avatar box. */
.feed-page .av>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit
}

.feed-page .av.v1 {
  background: linear-gradient(150deg, #7FB6FF, #1E4FCC)
}

.feed-page .av.v2 {
  background: linear-gradient(150deg, #2D7BFF, #123A73)
}

.feed-page .av.v3 {
  background: linear-gradient(150deg, #6E7BFF, #123A73)
}

.feed-page .av.v4 {
  background: linear-gradient(150deg, #A8CBF2, #2A5FCC)
}

.feed-page .av.v5 {
  background: linear-gradient(150deg, #2E5C9E, #0E2A52)
}

.feed-page .av {
  filter: saturate(.9)
}

/* avatars: flat, inside the primary family - no gradients */
.feed-page .av.v1 {
  background: #7FB6FF
}

.feed-page .av.v2 {
  background: #2D7BFF
}

.feed-page .av.v3 {
  background: #3C74C4
}

.feed-page .av.v4 {
  background: #A8CBF2
}

.feed-page .av.v5 {
  background: #2E5C9E
}

.feed-page .av.ring {
  box-shadow: 0 0 0 2px var(--blue)
}

.feed-page .av.fr {
  box-shadow: 0 0 0 2px var(--green)
}

.feed-page .av.ring.photo,
.feed-page .av.photo {
  box-shadow: none;
  background-color: transparent;
  filter: none
}

.feed-page #v-you .posrow>.av,
.feed-page #v-you .settled>.av,
.feed-page #v-you .mkrow>.av {
  display: none
}

.feed-page .av.seat {
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--dim)
}

.feed-page .av.seat svg {
  width: 20px;
  height: 20px
}

.feed-page .cando .av {
  color: #fff
}

.feed-page .cando .av svg {
  width: 19px;
  height: 19px
}

.feed-page .scard .swho .av.sm {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
  flex: none
}

/* ── moonx/nudge.css ─────────────────────────────────────────────── */
.feed-page .led .a.zero {
  color: var(--dim)
}

.feed-page .zero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px 36px;
  border: 1px dashed var(--line-2);
  border-radius: 20px;
  margin-top: 12px
}

.feed-page .zero .zi {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(45, 123, 255, .10);
  border: 1px solid rgba(45, 123, 255, .30);
  color: var(--violet-2);
  font-size: 24px
}

.feed-page .zero b {
  display: block;
  margin-top: 16px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em
}

.feed-page .zero p {
  margin-top: 8px;
  max-width: 40ch;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--dim);
  line-height: 1.6
}

.feed-page .zero .cta {
  width: auto;
  min-width: 190px;
  margin-top: 18px
}

.feed-page .nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 15px 17px;
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(45, 123, 255, .16), rgba(45, 123, 255, .05));
  border: 1px solid rgba(45, 123, 255, .34)
}

.feed-page .nudge .k {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(45, 123, 255, .16);
  color: var(--violet-2);
  font-size: 20px
}

.feed-page .nudge .t {
  flex: 1;
  min-width: 0
}

.feed-page .nudge .t b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: normal
}

.feed-page .nudge .t span {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim);
  margin-top: 3px;
  line-height: normal
}

/* Visuals come from the .mx-btn Tinted Button component, MD size
   (core-components.css) — v22b draws this CTA tinted, as Shots' empty state
   does. See app/views/feed/_nudge.html.erb. This rule only owns the nudge
   row's own layout. */
.feed-page .nudge-cta {
  flex: none;
}

/* ── responsive ──────────────────────────────────────────────────────────
   The prototype's media queries, carried over. Without them the row keeps
   its desktop metrics on a phone. */

@media (max-width:620px) {
  .feed-page .nudge {
    flex-wrap: wrap;
    row-gap: 12px
  }

  .feed-page .nudge-cta {
    width: 100%
  }
}

/* ── moonx/card.css ─────────────────────────────────────────────── */
.feed-page .settled .t>span .venue.mark,
.feed-page .mkrow .t>span .venue.mark,
.feed-page .ocard .otop .venue.mark,
.feed-page .mkt .venue.mark {
  font-size: 11px
}

.feed-page .ocard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px
}

.feed-page .ocard.live {
  border-color: rgba(45, 123, 255, .3)
}

.feed-page .ocard.won {
  border-color: rgba(166, 255, 61, .32)
}

.feed-page .ocard.miss {
  border-color: var(--line)
}

.feed-page .ocard .otop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap
}

.feed-page .ocard .otop .w {
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.45;
  overflow-wrap: anywhere
}

.feed-page .ocard .otop .w b {
  display: block
}

.feed-page .ocard .otop .w .l2 {
  display: block;
  margin-top: 0px
}

.feed-page .ocard .otop .w b {
  color: var(--txt);
  font-weight: 800
}

.feed-page .ocard .otop .w i {
  font-style: normal
}

.feed-page .ofoot {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px
}

.feed-page .ofoot .chip {
  flex: 1
}

.feed-page .ocard h3 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.34;
  letter-spacing: -.015em
}

.feed-page .orow {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 12px
}

.feed-page .omult {
  border-radius: 12px;
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 104px;
  text-align: center;
  border: 1px solid rgba(45, 123, 255, .4);
  background: rgba(45, 123, 255, .1)
}

.feed-page .omult b {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.045em;
  color: var(--violet-2);
  line-height: 1
}

.feed-page .omult.won {
  border-color: rgba(166, 255, 61, .42);
  background: rgba(166, 255, 61, .1)
}

.feed-page .omult.won b {
  color: var(--mint);
  font-size: 18px
}

.feed-page .omult.miss {
  border-color: var(--line-2);
  background: var(--card-2)
}

.feed-page .omult.miss b {
  color: var(--dim);
  font-size: 18px
}

.feed-page .omult.perp {
  border-color: rgba(255, 201, 60, .42);
  background: rgba(255, 201, 60, .1)
}

.feed-page .omult.perp b {
  color: var(--amber)
}

.feed-page .ofacts {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.feed-page .ofacts div {
  padding: 12px 0 12px 12px;
  border-left: 1px solid var(--line);
  min-width: 0
}

.feed-page .ofacts div:first-child {
  border-left: 0;
  padding-left: 2px
}

.feed-page .ofacts dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  line-height: 1.3
}

.feed-page .ofacts dd {
  font-family: var(--disp);
  font-size: clamp(15px, 4.4vw, 19px);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-top: 8px;
  line-height: 1.08;
  overflow-wrap: anywhere
}

.feed-page .ofacts .v dd {
  color: var(--violet-2)
}

.feed-page .ofacts .g dd {
  color: var(--mint)
}

.feed-page .ofacts .a dd {
  color: var(--amber)
}

.feed-page .shot-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--space-12) 2px;
  border-bottom: 1px solid var(--moonx-line);
  color: var(--color-text-secondary);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.feed-page .shot-message svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.feed-page .ocard .cta {
  margin-top: 8px
}

.feed-page .ocard .cta.won {
  background: none;
  border: 1px solid rgba(166, 255, 61, .45);
  color: var(--mint)
}

.feed-page .ocard .cta.won:hover {
  background: rgba(166, 255, 61, .08);
  filter: none
}

.feed-page .foot>*,
.feed-page .acts>*,
.feed-page .ofoot>*:not(.mx-btn) {
  width: 100%;
  justify-content: center
}

/* H3 = card title. The build leaves .ocard h3 with no family, so it would
   otherwise inherit the voice tier. */
.feed-page .ocard h3 {
  font-family: var(--disp);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
  line-height: 1.36
}

/* Space Grotesk stops at 700 - pin it so nothing renders faux-bold */
.feed-page .hd h2,
.feed-page .sheet h3,
.feed-page .gift h3,
.feed-page .memo h4,
.feed-page .apwin .h,
.feed-page .shout,
.feed-page .rail .lg,
.feed-page .dream b,
.feed-page .omult b,
.feed-page .ofacts dd,
.feed-page .otop .w b,
.feed-page .sidememo .t b {
  font-weight: 700
}

/* MONO - every numeric readout leaves the display tier */
.feed-page .omult b,
.feed-page .ofacts dd,
.feed-page .sidehero,
.feed-page .stat b,
.feed-page .sw2 b,
.feed-page .collect .amt,
.feed-page .strip dd,
.feed-page .gauge .pin b,
.feed-page .liq .t b,
.feed-page .spost .big b,
.feed-page .rec .mm,
.feed-page .recfull .rows dd,
.feed-page .posgrid dd,
.feed-page .fcard .fh .t>b,
.feed-page .fcard .fs dd,
.feed-page .refband .mark,
.feed-page .settled .m,
.feed-page .wcard .bal,
.feed-page .wpill b,
.feed-page .result .num,
.feed-page .lb .rk,
.feed-page .crow em,
.feed-page .crow input,
.feed-page .calc .v,
.feed-page .dream b {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

/* MONO - labels, tags, badges: small caps, wide tracking */
.feed-page .ofacts dt,
.feed-page .lbl,
.feed-page .btype,
.feed-page .tb,
.feed-page .sw2 em,
.feed-page .stat span {
  font-family: var(--mono);
  letter-spacing: .12em
}

/* Hits and misses share one treatment. The build shrinks won/miss to 18px
   against a 28px live figure; both are normalised. */
.feed-page .omult.won b,
.feed-page .omult.miss b {
  font-size: 22px
}

/* ── CARD STATE - "wash only" (card lab, variant C) ────────────────
   Borders stay neutral in every state. State is a faint corner wash
   that deepens through hover into press: colour marks an outcome, not
   a default, and an open shot is simply the feed at rest. */
.feed-page .ocard {
  cursor: pointer;
  transition: border-color .24s var(--ease), transform .24s var(--ease),
    box-shadow .24s var(--ease), background .24s var(--ease)
}

.feed-page .ocard:active {
  transition-duration: .09s
}

.feed-page .ocard:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px
}

.feed-page .ocard.live,
.feed-page .ocard.won,
.feed-page .ocard.miss {
  border-color: var(--line)
}

.feed-page .ocard.live {
  background: radial-gradient(120% 130% at 0% 0%, rgba(45, 123, 255, .07), var(--card) 58%)
}

.feed-page .ocard.won {
  background: radial-gradient(120% 130% at 0% 0%, rgba(166, 255, 61, .13), var(--card) 58%)
}

.feed-page .ocard.miss {
  opacity: .66
}

.feed-page .ocard.live:hover {
  background: radial-gradient(120% 130% at 0% 0%, rgba(45, 123, 255, .15), var(--card) 62%)
}

.feed-page .ocard.won:hover {
  background: radial-gradient(120% 130% at 0% 0%, rgba(166, 255, 61, .22), var(--card) 62%)
}

.feed-page .ocard.miss:hover {
  opacity: .88
}

.feed-page .ocard:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: 0 16px 44px #0007
}

.feed-page .ocard.live:active {
  background: radial-gradient(120% 130% at 0% 0%, rgba(45, 123, 255, .22), #0A0D12 62%)
}

.feed-page .ocard.won:active {
  background: radial-gradient(120% 130% at 0% 0%, rgba(166, 255, 61, .30), #0A0D12 62%)
}

.feed-page .ocard:active {
  transform: translateY(0) scale(.995);
  box-shadow: inset 0 1px 10px #0009
}

.feed-page .omult {
  border-color: rgba(45, 123, 255, .42);
  background: rgba(45, 123, 255, .10)
}

.feed-page .omult.won {
  border-color: rgba(166, 255, 61, .52);
  background: rgba(166, 255, 61, .12)
}

.feed-page .omult.won b {
  color: #A6FF3D
}

.feed-page .omult.miss {
  border-color: rgba(255, 59, 107, .45);
  background: rgba(255, 59, 107, .10)
}

.feed-page .omult.miss b {
  color: #FF3B6B
}

.feed-page .omult.perp {
  border-color: rgba(45, 123, 255, .42);
  background: rgba(45, 123, 255, .10)
}

.feed-page .ocard .cta.won {
  background: none;
  border-color: rgba(166, 255, 61, .45);
  color: #A6FF3D
}

.feed-page .ocard .cta.won:hover {
  background: rgba(166, 255, 61, .08)
}

/* ── FOOTER ROW - reactions left, action right ─────────────────────
   The action was a full-width filled bar under the chips, which made it
   the loudest object on the card and competed with the multiplier. It is
   now an inline outline pill sharing the footer row. */
.feed-page .ofoot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap
}

/* One height for every control in the row. The build gives .chip 8px padding
   at 11px type and .cta 16px padding at 13px, so they can never line up by
   padding alone - the row sets the height and each control centres inside it. */
.feed-page .ofoot>.chip,
.feed-page .ocard .ofoot .cta {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}

.feed-page .ofoot>.chip {
  flex: 0 0 auto;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 12px
}

.feed-page .ocard .ofoot .cta {
  margin: 0 0 0 auto;
  width: auto;
  padding-left: 22px;
  padding-right: 22px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: none;
  transition: border-color .18s var(--ease), background .18s var(--ease),
    transform .09s var(--ease)
}

.feed-page .ocard .ofoot .cta:hover {
  border-color: #3A4655;
  background: rgba(255, 255, 255, .04);
  filter: none
}

.feed-page .ocard .ofoot .cta:active {
  transform: scale(.98)
}

.feed-page .ocard .cta.won {
  background: transparent;
  border-color: rgba(166, 255, 61, .45);
  color: #A6FF3D
}

.feed-page .ocard .cta.won:hover {
  border-color: rgba(166, 255, 61, .72);
  background: rgba(166, 255, 61, .08);
  filter: none
}

.feed-page .ocard .cta.ghost {
  background: transparent;
  color: var(--dim)
}

/* SPECIFICITY: the build styles these as `.ocard .otop .w b` - three classes
   plus an element. A two-class override never lands, which is what kept the
   name a block and pushed the chip onto its own line. Match it exactly. */
.feed-page .ocard .otop .w b {
  display: inline
}

.feed-page .ocard .otop .w .l2 {
  display: block;
  margin-top: 2px
}

/* The chip lives inside .w, after the name, so it is inline content on the
   name's own line - not a flex sibling that can wrap away from it. */
.feed-page .ocard .otop .chip.fol {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 9px;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.5
}

.feed-page .ocard .otop .venue {
  margin-left: auto;
  align-self: flex-start
}

/* share joins the reaction in the footer row */
.feed-page .ofoot .chip.ico {
  width: 44px;
  padding-left: 0;
  padding-right: 0
}

.feed-page .ofoot .chip.ico svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.feed-page .omult b,
.feed-page .big b,
.feed-page .bigm,
.feed-page .sidehero,
.feed-page .collect .amt,
.feed-page .stat b,
.feed-page .mm {
  text-shadow: 0 0 26px currentColor
}

.feed-page .omult b,
.feed-page .bigm,
.feed-page .mm {
  filter: saturate(1.12)
}

.feed-page .ocard,
.feed-page .card,
.feed-page .rec,
.feed-page .stat,
.feed-page .sw2,
.feed-page .sidep,
.feed-page .memo,
.feed-page .settled,
.feed-page .mkrow,
.feed-page .posrow {
  border-color: var(--line-2)
}

.feed-page .ofacts div {
  border-left-color: var(--line)
}

.feed-page .omult.won {
  border-color: rgba(166, 255, 61, .55);
  background: rgba(166, 255, 61, .10)
}

.feed-page .ometa,
.feed-page .ocard .otop .w,
.feed-page .hcount,
.feed-page .sidecap,
.feed-page .fine {
  color: #A6BEDC
}

.feed-page .ometa b,
.feed-page .hcount b,
.feed-page .ocard .otop .w b {
  color: var(--txt)
}

.feed-page .lbl,
.feed-page .ofacts dt,
.feed-page .sw2 em,
.feed-page .stat>span {
  color: #93AECF
}

.feed-page .ocard h3 {
  font-size: var(--fs-title);
  line-height: 1.28;
  letter-spacing: -.02em
}

.feed-page .ocard .otop .w {
  font-size: 12px;
  line-height: 1.4
}

.feed-page .ocard .otop .w b {
  font-size: var(--fs-body)
}

.feed-page .ofacts dt {
  font-size: var(--fs-micro)
}

.feed-page .ofacts dd {
  font-size: var(--fs-body);
  margin-top: 5px
}

.feed-page .ocard .chip,
.feed-page .ocard .cta {
  font-size: 12px
}

.feed-page .ometa,
.feed-page .ocard .otop .w,
.feed-page .hcount,
.feed-page .sidecap,
.feed-page .fine,
.feed-page .ofacts dt,
.feed-page .lbl,
.feed-page .sw2 em,
.feed-page .stat>span,
.feed-page .sidep .n span,
.feed-page .qmore {
  color: var(--ink-2)
}

.feed-page .ocard h3,
.feed-page .ometa b,
.feed-page .hcount b,
.feed-page .ocard .otop .w b,
.feed-page .ofacts dd {
  color: var(--ink)
}

.feed-page .lbl,
.feed-page .tag,
.feed-page .qmore,
.feed-page .hcount,
.feed-page .ofacts dt,
.feed-page .sw2 em,
.feed-page .stat>span,
.feed-page .rar,
.feed-page .sn,
.feed-page .ocard .otop .w,
.feed-page .chip,
.feed-page .chip.rx-btn,
.feed-page .venue,
.feed-page .agent-head .agent-title span {
  font-family: var(--body);
  letter-spacing: .10em;
  font-weight: 700
}

.feed-page .ocard .otop .w,
.feed-page .hcount,
.feed-page .chip,
.feed-page .qmore {
  letter-spacing: .01em;
  text-transform: none
}

.feed-page .ofacts dd,
.feed-page .omult b,
.feed-page .sidehero,
.feed-page .sw2 b,
.feed-page .stat b,
.feed-page .px,
.feed-page .num,
.feed-page .mm,
.feed-page .bigm,
.feed-page .collect .amt,
.feed-page .sidep .mult,
.feed-page .tn-cd,
.feed-page .dir {
  font-family: var(--mono)
}

.feed-page .ocard .omult b {
  transition: font-size .2s var(--ease)
}

.feed-page .ocard[data-tier="1"] .omult {
  min-width: 92px
}

.feed-page .ocard[data-tier="1"] .omult b {
  font-size: 21px;
  text-shadow: none
}

.feed-page .ocard[data-tier="2"] .omult b {
  font-size: 26px;
  text-shadow: 0 0 14px currentColor
}

.feed-page .ocard[data-tier="3"] .omult {
  min-width: 118px
}

.feed-page .ocard[data-tier="3"] .omult b {
  font-size: 33px;
  text-shadow: 0 0 24px currentColor
}

.feed-page .ocard[data-tier="4"] .omult {
  min-width: 136px;
  padding: 16px 14px
}

.feed-page .ocard[data-tier="4"] .omult b {
  font-size: 42px;
  letter-spacing: -.05em;
  text-shadow: 0 0 38px currentColor
}

.feed-page .ocard[data-tier="4"] {
  box-shadow: 0 16px 46px rgba(45, 123, 255, .14)
}

.feed-page .ocard[data-tier="4"].won {
  box-shadow: 0 16px 46px rgba(166, 255, 61, .16)
}

.feed-page .ocard[data-tier="4"] h3 {
  font-size: 21px
}

.feed-page .collect .amt,
.feed-page .omult.won b,
.feed-page .sw2.c b,
.feed-page .cta.won,
.feed-page .rec.landed .mm {
  color: var(--mint)
}

.feed-page .btype,
.feed-page .ocard .btype {
  font-size: var(--fs-micro)
}

.feed-page .ocard .cta,
.feed-page .ocard .cta.won,
.feed-page .ocard .cta.ghost {
  font-size: var(--fs-body)
}

.feed-page .ocard .chip.rx-btn em {
  font-size: var(--fs-body)
}

.feed-page .ocard .chip,
.feed-page .ocard .chip span {
  font-size: 12px
}

.feed-page .ocard .ofoot .cta {
  font-size: var(--fs-body)
}

.feed-page .omult,
.feed-page .btype.perp,
.feed-page .btype.combo,
.feed-page .tb.combo {
  border-color: var(--blue-line)
}

.feed-page .omult.perp {
  border-color: var(--blue-line);
  background: rgba(45, 123, 255, .10)
}

.feed-page .omult.perp b {
  color: var(--blue-hi)
}

.feed-page .omult.won {
  border-color: rgba(166, 255, 61, .55);
  background: rgba(166, 255, 61, .10)
}

.feed-page .omult.won b {
  color: var(--green)
}

.feed-page .omult.miss {
  border-color: rgba(255, 59, 107, .42);
  background: rgba(255, 59, 107, .08)
}

.feed-page .omult.miss b {
  color: var(--red)
}

.feed-page .rail .lg,
.feed-page .omult b,
.feed-page .bigm {
  font-family: var(--font-mono);
  font-weight: 800
}

.feed-page .omult b {
  letter-spacing: -.02em
}

.feed-page .ocard[data-tier="4"] .omult b {
  font-size: 34px
}

.feed-page .ocard[data-tier="3"] .omult b {
  font-size: 27px
}

.feed-page .ocard[data-tier="2"] .omult b {
  font-size: 22px
}

.feed-page .ocard[data-tier="1"] .omult b {
  font-size: 18px
}

.feed-page .ocard[data-tier="4"] .omult {
  min-width: 150px
}

.feed-page .rail .lg,
.feed-page .omult b,
.feed-page .bigm {
  font-family: var(--font-mono)
}

.feed-page .omult b {
  -webkit-text-stroke: .55px currentColor;
  letter-spacing: .01em
}

.feed-page .ocard[data-tier="4"] .omult b {
  font-size: 40px;
  -webkit-text-stroke: .7px currentColor
}

.feed-page .ocard[data-tier="3"] .omult b {
  font-size: 32px
}

.feed-page .ocard[data-tier="2"] .omult b {
  font-size: 26px;
  -webkit-text-stroke: .45px currentColor
}

.feed-page .ocard[data-tier="1"] .omult b {
  font-size: 21px;
  -webkit-text-stroke: .35px currentColor
}

.feed-page .ocard[data-tier="4"] .omult {
  min-width: 140px
}

.feed-page .rail .lg,
.feed-page .omult b,
.feed-page .bigm {
  font-family: var(--font-mono)
}

.feed-page .omult b,
.feed-page .ocard[data-tier="1"] .omult b,
.feed-page .ocard[data-tier="2"] .omult b,
.feed-page .ocard[data-tier="3"] .omult b,
.feed-page .ocard[data-tier="4"] .omult b {
  -webkit-text-stroke: 0;
  letter-spacing: .02em
}

.feed-page .lbl,
.feed-page .btype,
.feed-page .strip dt,
.feed-page .ofacts dt,
.feed-page .tbl th,
.feed-page .tb,
.feed-page .risk,
.feed-page .dir,
.feed-page .tag,
.feed-page .act-tag,
.feed-page .pledge,
.feed-page .rec .stamp,
.feed-page .recfull .rows dt,
.feed-page .prov .pk,
.feed-page .posgrid dt,
.feed-page .fcard .fs dt,
.feed-page .fcard .fhero em,
.feed-page .msbox .h em,
.feed-page .collect .ch em,
.feed-page .inout em,
.feed-page .verb em,
.feed-page .wflow span,
.feed-page .wpill em,
.feed-page .ceo span,
.feed-page .stat>span,
.feed-page .orbar span,
.feed-page .gauge .lb2 em,
.feed-page .gauge .pin em,
.feed-page .liq .t em,
.feed-page .daymark,
.feed-page .rf-brand,
.feed-page .cbar .cg,
.feed-page .track .pin::after,
.feed-page .cleg>i,
.feed-page .cleg>em,
.feed-page .ocard .otop .chip.fol,
.feed-page

/* --- mots,
.feed-page phrases,
.feed-page prose --------------------------------------- */
.fine,
.feed-page .hint,
.feed-page .fillhint,
.feed-page .pwhen,
.feed-page .calc .kk .k2,
.feed-page .ceostate,
.feed-page .cbar .ct,
.feed-page .qmore,
.feed-page .everynote em,
.feed-page .fuchase em,
.feed-page .posgrid small,
.feed-page .more span,
.feed-page .sortseg button,
.feed-page .sizes button i,
.feed-page .sw2 em,
.feed-page .sw2 span,
.feed-page .sidep .n span,
.feed-page .bd .bn span,
.feed-page .bd .bm span,
.feed-page .bd .bv span,
.feed-page .gz .cap i,
.feed-page .crate b,
.feed-page .spost .facts,
.feed-page .spost blockquote em {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
}

.feed-page .lbl,
.feed-page .btype,
.feed-page .strip dt,
.feed-page .ofacts dt,
.feed-page .tbl th,
.feed-page .recfull .rows dt,
.feed-page .prov .pk,
.feed-page .posgrid dt,
.feed-page .fcard .fs dt,
.feed-page .gauge .lb2 em,
.feed-page .gauge .pin em,
.feed-page .inout em,
.feed-page .verb em,
.feed-page .wflow span,
.feed-page .wpill em,
.feed-page .ceo span,
.feed-page .stat>span,
.feed-page .orbar span,
.feed-page .collect .ch em,
.feed-page .msbox .h em,
.feed-page .daymark,
.feed-page .track .pin::after {
  font-weight: 600;
}

.feed-page .ofoot .chip.fol {
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap
}

.feed-page .ocard .ometa[data-quote] {
  position: relative;
  padding-right: 24px
}

.feed-page .ocard .ometa[data-quote] .qmore {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 4px;
  color: var(--dim)
}

.feed-page .ocard .ometa[data-quote]:hover .qmore {
  color: var(--txt)
}

.feed-page .ocard .ofoot>*:not(.mx-btn) {
  min-height: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(150, 195, 255, .18);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .075), rgba(150, 195, 255, .015));
  color: var(--dim);
}

.feed-page .ocard .ofoot>*:not(.mx-btn):hover {
  border-color: rgba(150, 195, 255, .34);
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .13), rgba(150, 195, 255, .04));
  color: var(--txt);
}

.feed-page .ocard .ofoot .cta {
  color: var(--txt);
  border-color: rgba(45, 123, 255, .42);
  background-image: linear-gradient(180deg, rgba(45, 123, 255, .20), rgba(45, 123, 255, .06));
}

.feed-page .ocard .ofoot .cta:hover {
  border-color: rgba(45, 123, 255, .7);
  background-image: linear-gradient(180deg, rgba(45, 123, 255, .32), rgba(45, 123, 255, .12));
}

.feed-page .ocard .ofoot .chip.fol.go {
  color: var(--txt);
  border-color: rgba(150, 195, 255, .3)
}

.feed-page .ocard .ofoot .cta,
.feed-page .ocard .ofoot .chip.fol {
  height: 38px;
  min-height: 38px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 0;
}

.feed-page .ofacts dt {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none
}

.feed-page .ocard .ofoot .chip.fol.go {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .075), rgba(150, 195, 255, .015));
  border-color: rgba(150, 195, 255, .34);
  color: var(--txt)
}

.feed-page .ocard .ofoot .chip.fol.go:hover {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .13), rgba(150, 195, 255, .04));
  border-color: rgba(150, 195, 255, .5);
  color: var(--txt)
}

.feed-page .ocard .ofoot .cta:not(.won):not(.ghost) {
  background-color: var(--blue);
  background-image: none;
  border-color: transparent;
  color: #fff
}

.feed-page .ocard .ofoot .cta:not(.won):not(.ghost):hover {
  background-color: #4A8CFF;
  background-image: none;
  border-color: transparent
}

.feed-page .ocard .ofoot .cta.try1:not(.won):not(.ghost) {
  background-color: rgba(45, 123, 255, .18);
  background-image: none;
  border-color: rgba(45, 123, 255, .55);
  color: #fff
}

.feed-page .ocard .ofoot .cta.try1:not(.won):not(.ghost):hover {
  background-color: rgba(45, 123, 255, .28);
  border-color: rgba(45, 123, 255, .78)
}

.feed-page .ocard .ofoot .cta.try2:not(.won):not(.ghost) {
  background-color: #1E4FCC;
  background-image: none;
  border-color: transparent;
  color: #fff
}

.feed-page .ocard .ofoot .cta.try2:not(.won):not(.ghost):hover {
  background-color: #2A5EE0
}

.feed-page .ocard .ofoot .cta:not(.won):not(.ghost) {
  background-color: rgba(45, 123, 255, .18);
  background-image: none;
  border-color: rgba(45, 123, 255, .55);
  color: #fff
}

.feed-page .ocard .ofoot .cta:not(.won):not(.ghost):hover {
  background-color: rgba(45, 123, 255, .28);
  background-image: none;
  border-color: rgba(45, 123, 255, .78)
}

/* button_to puts each control inside its own form, so every `.ofoot > x` rule
   above misses: a selector reads the DOM tree, and the chip's parent there is
   the form. `display: contents` flattens the boxes, not the tree. These repeat
   the direct-child rules one level deeper; without them the chips fall back to
   `.ofoot .chip{flex:1}` and stretch to equal widths. */
.feed-page .ofoot .ofoot-form>* {
  width: 100%;
  justify-content: center
}

so they can never line up by padding alone - the row sets the height and each control centres inside it. */ .feed-page .ofoot .ofoot-form>.chip {
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1
}

.feed-page .ofoot .ofoot-form>.chip {
  flex: 0 0 auto;
  width: auto;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 12px
}

.feed-page .ocard .ofoot .ofoot-form>* {
  min-height: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(150, 195, 255, .18);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .075), rgba(150, 195, 255, .015));
  color: var(--dim);
}

.feed-page .ocard .ofoot .ofoot-form>*:hover {
  border-color: rgba(150, 195, 255, .34);
  background-image: linear-gradient(180deg, rgba(150, 195, 255, .13), rgba(150, 195, 255, .04));
  color: var(--txt);
}

/* ── responsive ──────────────────────────────────────────────────────────
   The prototype's media queries, carried over. Without them the row keeps
   its desktop metrics on a phone. */

@media (max-width:919px) {

  .feed-page .post,
  .feed-page .ocard {
    border-color: transparent;
    background: var(--card)
  }

  .feed-page .ocard.live,
  .feed-page .ocard.won,
  .feed-page .ocard.miss {
    border-color: transparent
  }

  .feed-page .ocard.live,
  .feed-page .ocard.won,
  .feed-page .ocard.miss {
    border-color: transparent
  }

  .feed-page .ocard:hover {
    border-color: transparent;
    transform: none;
    box-shadow: none
  }
}

@media (max-width:560px) {
  .feed-page .ocard .orow {
    display: block
  }

  .feed-page .ocard .orow .omult {
    width: 100%;
    margin-bottom: 12px
  }

  .feed-page .ocard .orow .ofacts {
    width: 100%
  }

  .feed-page .ofacts div:first-child {
    padding-left: 12px
  }

  .feed-page .ocard .ofoot {
    flex-wrap: nowrap;
    gap: 6px
  }

  .feed-page .ocard .ofoot>.chip,
  .feed-page .ocard .ofoot .ofoot-form>.chip {
    flex: 0 0 auto;
    padding-left: 11px;
    padding-right: 11px
  }

  .feed-page .ocard .ofoot .chip.ico {
    width: 40px;
    padding-left: 0;
    padding-right: 0
  }

  .feed-page .ocard .ofoot .cta {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap
  }
}


/* ── moonx/result.css ────────────────────────────────────────────── */
/* A settled shot is drawn by the card rules above: the prototype's settled
   branch returns the same `.ocard` as a live one, with `.won` / `.miss`
   swapping the colours, so there is no second card to style. What is left
   here is the one rule the frame itself needs. */

/* `turbo-frame` is unknown to CSS and lays out inline, which collapses the
   list's spacing around every card it wraps. */
.feed-page turbo-frame {
  display: block;
}

.feed-page .fund-empty {
  font-family: var(--font-body);
}

/* ══ Feed share sheet — the later layers ═════════════════════════════════
   The block near the top of the feed section carries the prototype's base
   sheet rules. These are the ones its later versions put over them, and they
   are what the sheet actually looks like: wider, roomier, sprung rather than
   keyframed, and without the eyebrow above its own title. Kept apart from the
   base for the same reason the prototype keeps them apart — so the two can be
   read against each other. */

/* A sheet that rises from the bottom and one that settles in the middle are
   different objects. This one settles: .feed-page .veil already carries
   align-items:center from the v18 layer, and the sheet answers to it. */
/* The sheets rise on a spring. Without this the rule below is a jump cut: it
   describes the closed state and nothing carries the sheet out of it. */
.feed-page .veil .sheet {
  transition: transform var(--t-base) var(--spring), opacity var(--t-base) var(--ease);
}

.feed-page .veil:not(.on) .sheet {
  transform: translateY(26px) scale(.985);
  opacity: 0;
}

.feed-page .veil .sheet {
  max-width: 560px;
  padding: 20px
}

/* The label above a sheet's own title says what the title already says. The
   ones deeper in — naming a control — stay. */
.feed-page .veil .sheet>.grab+.lbl,
.feed-page .veil .sheet .step>.lbl:first-child {
  display: none
}

/* A hidden eyebrow must not leave its gap behind. */
.feed-page .veil .sheet .lbl+h3 {
  margin-top: 0 !important
}

/* One label, one gap, wherever it sits — except above a title, which keeps its
   own rhythm. */
.feed-page .veil .sheet .lbl+ :not(h3) {
  margin-top: 10px
}

/* Read-after-the-fact copy and the venue pill are precision a sheet does not
   need; the sheet is already the answer to a press. */
.feed-page .veil .sheet .hint,
.feed-page .veil .sheet .venuesolo,
.feed-page .veil .sheet .venue {
  display: none
}

/* ══ Feed share sheet — the frame's later layers ══════════════════════════
   Same story as the sheet above: the base rules draw one thing and the
   versions after them draw another. These are the ones that hold. */

/* The frame is what "Save image" rasterises, so it carries its own solid
   ground; without one the saved PNG comes out transparent. */
.feed-page .sharewrap {
  background: var(--card);
}

/* The referral band stopped being a blue plate. It is the card's own ground
   with a rule drawn above it, so the frame reads as one surface rather than a
   card with a label stuck to the bottom — which is also why the wordmark and
   the code had to stop being white-on-blue. */
.feed-page .sharewrap .refband {
  padding: 18px 26px;
  background: none;
  border-top: 1px solid var(--line);
}

/* The wordmark is drawn, not typed: a <text> in an SVG box scales with the
   band instead of depending on a face being loaded at the moment of capture —
   which matters when the card is rasterised. */
.feed-page .refband .mark.logo {
  display: flex;
  align-items: center;
  width: 140px;
  flex: none;
}

.feed-page .refband .mark.logo .wm {
  display: block;
  width: 100%;
  height: auto
}

.feed-page .refband .mark.logo .wmt {
  fill: var(--txt)
}

.feed-page .wm .wmt {
  font-family: var(--font-brand);
  font-size: 26px;
  letter-spacing: .06em;
  stroke: none;
}

/* Multipliers are a MoonX signature, not ordinary numeric readouts. The
   number and its x stay in one face so a value never looks split apart. */
.mx-chip-multi,
.mx-multiple,
.legends-metric--moon,
.legends-fund-sheet__multiple,
.take-shot-banner-multiple,
.shots-page .mkrow .collx,
.shots-page .settled.won .m,
.shots-page .delta b,
.shots-page .glab,
.shots-page .gcap b,
.hof-page .mult {
  font-family: var(--font-brand);
}

.feed-page .omult b.mx-multiple {
  font-family: var(--font-brand);
}

.feed-page .omult .mx-verdict,
.feed-page .scard .sline .mx-verdict {
  font-family: var(--font-brand);
}

/* On a transparent band the offer is page copy, not a caption on a plate. */
.feed-page .refband .off em {
  font-size: 14px;
  color: var(--dim)
}

.feed-page .refband .off b {
  margin-top: 5px;
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--violet-2);
}

/* The grab handle belonged to a sheet that rose from the bottom edge. This one
   settles in the middle, and there is nothing to grab. It stays in the markup
   because the rule that hides the sheet's own eyebrow is anchored to it. */
.feed-page .grab {
  display: none
}

/* ══ Feed — Button component placement ═══════════════════════════════════
   The feed's buttons are Button instances now (README's component map), so
   their box comes from `.mx-btn` and only where they sit is said here. This
   follows HANDOFF's ninth follow-up: a scoped override with a real layout job
   gets retargeted, not deleted.

   Every `.feed-page .cta` rule above is dead — nothing in app/views carries
   that class any more. They are left rather than stripped because most sit in
   selector lists shared with `.chip.go`, `.bx-add` and friends, which are very
   much alive; removing the `.cta` half of each list is its own careful pass. */
/* The nudge is one row: icon, copy, action. The button holds its own width
   beside the copy rather than taking it — `flex: none` so it neither grows
   into the message nor shrinks under it.

   Only on a narrow screen does it drop to its own full-width row, which is
   where v20 puts `flex-wrap` on the container and 100% on the button. */
.feed-page .nudge .mx-btn {
  width: auto;
  flex: none;
  margin: 0;
}

@media (max-width: 620px) {
  .feed-page .nudge .mx-btn {
    width: 100%
  }
}

.feed-page .ocard .ofoot .mx-btn {
  width: auto;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}

/* Copied from moonx-human-v19b.html: Settings (`#v-set`), its "Your backup"
   section only — the row (`.mkrow`), the amber note (`.warn`), the calm note
   (`.calm`) and the sheet (`.veil > .sheet`). Values follow the Your CEO block
   above: read against the served mockup, page-level rules here rather than in
   core-components.css, since none of these has a rebuilt Figma component yet.
   The sheets are native <dialog> elements — v19's `.veil` is a hand-rolled
   overlay, and ::backdrop gives the same wash for free. Their internals (PIN
   pad, file row, password row) reuse the `hosted-wallet-*` rules the wallet
   onboarding step already owns. */
.settings-page {
  width: 100%;
  max-width: var(--mid);
  margin-inline: auto;
  gap: 0;
  overflow: visible;
  padding-inline: 22px;
}

.settings-page .settings-ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-heading {
  padding: 0 0 12px;
}

.settings-heading h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.035em;
}

/* v22 keeps Settings sections in one horizontal segment. These are ordinary
   links because each section remains an existing server-rendered page. */
.settings-tabs {
  display: flex;
  gap: var(--space-8);
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2) var(--space-12);
  overflow-x: auto;
  scrollbar-width: none;
}

/* Below the sidebar breakpoint the title moved into the sticky mobile bar
   (_cockpit_sidebar's mobile_title) — every Settings sub-page's own
   .settings-heading would just repeat it, and .settings-tabs becomes the
   second sticky line under it instead (same recipe as Feed's tabs). All
   eight Settings destinations share `.content.settings-page`, so one rule
   reaches all of them. */
@media (max-width: 1039px) {
  .settings-heading {
    display: none;
  }

  .settings-tabs.mobile-sticky-tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: auto;
    align-items: center;
    margin: 0;
    padding: 52px var(--space-16) var(--space-16) var(--space-16);
    background: var(--bg);
    border-bottom: var(--border-hairline) solid var(--line);
  }

  .content.settings-page {
    padding-top: 60px;
  }
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tabs .mx-tab {
  flex: none;
  text-decoration: none;
}

/* v22 Plan: a single upgrade card under the current-plan heading. */
.settings-plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-22);
}

.settings-plan-page .settings-heading h1 {
  font-weight: 800;
}

.settings-plan-heading h2 {
  margin: 0;
  color: var(--moonx-text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.035em;
}

.settings-plan-heading p {
  margin: 4px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
}

.settings-plan-heading>span {
  border: var(--border-hairline) solid rgba(45, 123, 255, .55);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  background: rgba(45, 123, 255, .18);
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.settings-plan-card {
  margin-top: var(--space-12);
  position: relative;
  overflow: hidden;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-16);
  padding: 22px 20px;
  background: var(--moonx-card);
}

.settings-plan-card::before {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(45, 123, 255, .16), transparent);
  content: "";
  pointer-events: none;
}

.settings-plan-card h3 {
  position: relative;
  margin: 8px 0 0;
  color: var(--moonx-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.14;
}

.settings-plan-card-eyebrow {
  position: relative;
  display: block;
  margin: 0;
  color: var(--moonx-blue-high);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.settings-plan-card-copy {
  position: relative;
  max-width: 52ch;
  margin: 10px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.settings-plan-features {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.settings-plan-features li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 12px 14px;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-lg);
  background: var(--moonx-raised);
}

.settings-plan-feature-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: rgba(45, 123, 255, .45);
}

.settings-plan-features strong {
  flex: 1;
  min-width: 0;
  color: var(--moonx-text);
  font-size: 13px;
  font-weight: 700;
}

.settings-plan-features .mx-tag {
  flex: none;
}

/* v22 Friends invitation sheet. The moonshot alternative is deliberately
   absent: this sheet only copies the invitation link. */
/* The base modal has a 20px desktop flex gap. This sheet supplies v22's
   explicit intervals on each child, so the shared gap must not add a second
   one. The dialog selector deliberately outranks the base mobile/desktop
   rules even when stylesheet load order changes. */
dialog.mx-modal.referral-door-modal {
  max-width: 560px;
  gap: 0;
}

.referral-door-modal .mx-modal-grab {
  margin: 0 auto 16px;
}

.referral-door-modal .mx-modal-title {
  font-weight: 800;
}

/* The link row is a plain display box, not a form control — nothing here
   is typable, so it deliberately skips `.mx-input` (which renders as an
   editable-looking field with a focus ring). A URL has no break points,
   so let it wrap instead of pushing Copy out of the box. */
.referral-door-linkbox {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  margin-top: var(--space-12);
  padding: var(--space-12);
  border-radius: var(--radius-14);
  background: var(--moonx-well);
}

.referral-door-linkbox-field {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--moonx-text);
  font-family: var(--font-mono);
  font-size: var(--text-number-ledger);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.referral-door-pill {
  flex: none;
  padding: var(--space-8) var(--space-16);
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-full);
  background: var(--moonx-card);
  color: var(--moonx-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.referral-door-pill:hover {
  border-color: var(--moonx-blue-high);
  color: var(--moonx-blue-high);
}

.referral-door-label {
  width: 100%;
  margin: 18px 0 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.referral-door-steps {
  width: 100%;
  margin-top: 10px;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-20);
  background: var(--moonx-card);
}

.referral-door-steps ol {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-16);
  list-style: none;
}

.referral-door-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.referral-door-steps b {
  display: grid;
  flex: none;
  width: 24px;
  height: 24px;
  place-items: center;
  border: var(--border-hairline) solid rgba(45, 123, 255, .34);
  border-radius: 8px;
  background: rgba(45, 123, 255, .14);
  color: var(--moonx-blue-high);
  font-size: 11px;
  font-weight: 800;
}

.referral-door-steps p {
  margin: 0;
  color: var(--moonx-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.referral-door-steps p span {
  color: var(--moonx-text-secondary);
}

.referral-door-note {
  width: 100%;
  margin: 16px 0 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.7;
}

.referral-door-modal .mx-modal-actions {
  width: 100%;
  margin-top: 20px;
}

.referral-door-copy {
  gap: var(--space-8);
}

.referral-door-copy-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  vertical-align: 0;
}

/* v24b's sky is one canvas behind the application. The controller removes its
   animation loop when Settings turns it off. */
#mxsky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#mxsky[hidden] {
  display: none;
}

body.starfield-enabled .app-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* The sky canvas is a positioned z-index:0 layer. Public auth and welcome
   screens are otherwise normal-flow content, which places them below it;
   elevate their shells so the moon remains behind every field and action. */
body.starfield-enabled .auth-shell,
body.starfield-enabled .step-shell {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Let the sky show through the page while keeping readable component fills. */
body.starfield-enabled .content.markets-page {
  background: transparent;
}

.settings-starfield {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-self: stretch;
  width: 100%;
  max-width: none;
  color: inherit;
  text-align: left;
}

.settings-starfield[aria-checked="true"] .settings-swi {
  background: rgba(45, 123, 255, .28);
  border-color: rgba(45, 123, 255, .52);
}

.settings-starfield[aria-checked="true"] .settings-swi::after {
  left: 14px;
  background: var(--moonx-blue-high);
}

.settings-starfield:focus-visible {
  outline: var(--border-focus) solid var(--moonx-blue-high);
  outline-offset: 2px;
}

.settings-section-title {
  margin: 24px 0 12px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.038em;
}

.settings-section-heading {
  padding: var(--space-12) 0 0;
}

.settings-section-heading .settings-section-title {
  margin-top: 0;
}

/* v19's amber note and its calm twin: same inset, same radius, same type —
   only the ground and the border say which one is a warning. */
.settings-warn {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 201, 60, .3);
  border-radius: 12px;
  background: rgba(255, 201, 60, .11);
}

/* Irreversible-account-risk warnings are red in v22. */
.settings-warn--danger {
  border-color: rgba(255, 59, 107, .34);
  background: rgba(255, 59, 107, .10);
}

.settings-warn--danger>span:empty {
  display: none;
}

.settings-warn>span {
  flex: none;
  font-size: 15px;
}

.settings-warn p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}

.settings-warn p b {
  font-weight: 900;
}

.settings-warn p em {
  font-style: normal;
  color: var(--moonx-amber);
}

.settings-calm {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--moonx-line-strong);
  border-radius: 12px;
  background: var(--moonx-well);
  color: var(--moonx-text-secondary);
}

.settings-calm>span {
  flex: none;
  display: flex;
}

.settings-calm .settings-ic {
  width: 18px;
  height: 18px;
}

.settings-calm p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
}

.settings-calm p b {
  color: var(--moonx-text);
  font-weight: 900;
}

/* The outcome line for the whole section: one place for "code changed",
   "nothing matched", "wallet is back". Empty until something happens. */
.settings-status {
  margin: 12px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

.settings-status:empty {
  display: none;
}

.settings-status[data-state="ok"] {
  color: var(--moonx-green);
}

.settings-status[data-state="bad"] {
  color: var(--moonx-red);
}

/* v19's `.mkrow`: icon tile, two lines of copy, and the word that says the
   row opens something. */
.settings-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--moonx-line);
  border-radius: 16px;
  background: var(--moonx-card);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s;
}

.settings-row:hover {
  border-color: var(--moonx-line-strong);
  background: var(--moonx-raised);
  transform: translateY(-1px);
}

.settings-row-copy {
  min-width: 0;
}

.settings-row-copy b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.settings-row-copy>span {
  display: block;
  margin-top: 4px;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.settings-row-open,
.settings-lbl,
.settings-field-label {
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.settings-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--moonx-text);
}

.settings-av .settings-ic {
  width: 19px;
  height: 19px;
}

.settings-av--v1 {
  background: var(--moonx-blue-high);
}

.settings-av--v2 {
  background: var(--moonx-blue);
}

.settings-av--v3 {
  background: #3c74c4;
}

.settings-av--v4 {
  background: #a8cbf2;
}

/* The sheet. Deliberately NOT `.mx-modal`: this is the wallet-backup family
   (set/confirm PIN, download backup, import from backup), three sheets that
   share one `<dialog>` shape and one controller, and they read as their own
   thing rather than as the product's Modal/Bottom Sheet. What IS reconciled
   here is the drift — every value below now resolves through a Foundations
   token instead of a literal, so the family sits on the same colour, type
   and radius scale as `.mx-modal` without pretending to be it.

   Corrected against the token map: max-width 440 -> `--size-modal-max-desktop`
   (560), the h2's weight 800 -> `--text-heading-page--weight` (700), the
   breakpoint 560 -> 920 (`--modal-breakpoint`, where the product switches
   between bottom sheet and centred modal), the scrim's blur 5px -> 2.5px and
   its literal black -> `--moonx-overlay`, and the mobile top-right corner
   20 -> 26px. Sizes that were already right (28px title, 13px sub) are
   tokenized in place, not changed.

   Still open: no grab handle, which every bottom-anchored sheet in the
   system carries. That is markup, not style — flagged, not invented here. */
.settings-sheet {
  width: 100%;
  max-width: var(--size-modal-max-desktop);
  max-height: var(--size-modal-max-height);
  margin: auto;
  overflow-y: auto;
  padding: var(--space-20);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-20);
  background: var(--moonx-card);
  color: var(--moonx-text);
}

.settings-sheet::backdrop {
  background: var(--moonx-overlay);
  backdrop-filter: blur(2.5px);
}

.settings-sheet h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-heading-page);
  font-weight: var(--text-heading-page--weight);
  line-height: var(--text-heading-page--line-height);
  letter-spacing: var(--text-heading-page--letter-spacing);
}

.settings-sheet-sub {
  margin: var(--space-8) 0 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body-default);
  font-weight: var(--text-body-default--weight);
  line-height: var(--text-body-default--line-height);
}

.settings-sheet-status {
  margin: 12px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

.settings-sheet-status:empty {
  display: none;
}

.settings-sheet-status[data-state="bad"] {
  color: var(--moonx-red);
}

.settings-sheet-actions {
  display: flex;
  gap: var(--space-10);
  margin-top: var(--space-16);
}

.settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.settings-sheet-actions .mx-btn,
.settings-actions .mx-btn {
  flex: 1 1 50%;
}

.settings-sheet .mx-field {
  margin-top: 16px;
}

/* `.mx-upload` has no focus state of its own; the file input inside is
   visually hidden, so show keyboard focus on the dropzone the way
   `.mx-input` does — border only. */
.settings-sheet .mx-upload:focus-within,
.settings-avatar-upload:focus-within {
  border-color: var(--border-interactive);
}

/* Your fund's picture row: the pick area is a label for the hidden file
   input, and Remove sits beside it rather than inside it, or a tap on
   Remove would open the file picker too. */
.settings-avatar-pick {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
  cursor: pointer;
}

.settings-avatar-thumb {
  overflow: hidden;
  font-size: 18px;
}

.settings-avatar-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* The pages the Settings menu opens: Account, Fund setup, Payout wallets,
   Polymarket, Rules. v19 has no screen for any of them — in v19b each is a
   row or a sheet inside `#v-set` — so they are built only from parts `#v-set`
   and its sheets already draw, read against moonx-human-v19b.html's resolved
   cascade:
     .settings-back / .settings-lbl / .settings-field-label  ← `.lbl`
     .settings-sub                                           ← `.hd .sub`
     .settings-item                                          ← `.wl` (the whitelist row)
     .settings-crow / --amount                               ← `.crow` (sh-edit, sh-wl, sh-move)
     .settings-hint                                          ← `.fldhint`
.settings-avatar-upload {
  margin-top: 8px;
}

/* Adjust dialog: the canvas shows the whole photo with the saved square
   lit in the middle and the rest dimmed; the stage only scales it down on
   narrow screens (the controller reads the ratio). */
.avatar-crop-stage {
  width: min(100%, 480px);
  margin-inline: auto;
  aspect-ratio: 480 / 400;
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--moonx-line-strong);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.avatar-crop-stage:active {
  cursor: grabbing;
}

.avatar-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Zoom slider. The design system has no slider yet, so this is built only from
   its tokens: a well track with the hairline border, the blue fill up to the
   thumb (`--fill`, set by the controller), a blue thumb ringed in the card
   colour, and the interactive border on focus. */
.avatar-crop-zoom {
  --fill: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: min(100%, 480px);
  height: 20px;
  margin: 0 auto;
  background: transparent;
  cursor: pointer;
}

.avatar-crop-zoom::-webkit-slider-runnable-track {
  height: 6px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--moonx-blue) var(--fill), var(--moonx-well) var(--fill));
}

.avatar-crop-zoom::-moz-range-track {
  height: 6px;
  border: var(--border-hairline) solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--moonx-blue) var(--fill), var(--moonx-well) var(--fill));
}

.avatar-crop-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 3px solid var(--moonx-card);
  border-radius: var(--radius-full);
  background: var(--moonx-blue-high);
  box-shadow: 0 0 0 1px var(--moonx-blue);
}

.avatar-crop-zoom::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid var(--moonx-card);
  border-radius: var(--radius-full);
  background: var(--moonx-blue-high);
  box-shadow: 0 0 0 1px var(--moonx-blue);
}

.avatar-crop-zoom:focus-visible {
  outline: none;
}

.avatar-crop-zoom:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--border-interactive);
}

.avatar-crop-zoom:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--border-interactive);
}

.settings-swi ← the Starfield row's `.swi`
 v19's --card-2 / --line-2 / --dim / --violet / --violet-2 are
 --moonx-raised / --moonx-line-strong / --moonx-text-secondary / --moonx-blue / --moonx-blue-high here,
the same mapping the rows above use. Buttons,
icon buttons,
tags and tabs are the core components,
not copies. */ .settings-back {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}

.settings-back:hover {
  color: var(--moonx-blue-high);
}

.settings-sub {
  margin: 4px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.settings-section-title+.settings-sub {
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-12);
}

/* A section title with the `.lbl` v19 hangs off its right end ("3 saved"). */
.settings-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
}

.settings-section-head .settings-section-title {
  margin: 0;
}

/* A section-head subtitle follows its title in normal v22 rhythm. The older
   standalone-title rule above pulls a subtitle upward, which makes these two
   lines collide when a section carries a right-side label. */
.settings-section-head .settings-section-title+.settings-sub {
  margin: 5px 0 0;
}

/* v22 gives Polymarket's first section 12px after its tabs, then a full
   36px between a wallet row and the following section heading. */
.settings-page--polymarket section:first-of-type .settings-section-title {
  margin-top: 12px;
}

.settings-page--polymarket section+section .settings-section-title {
  margin-top: 36px;
}

/* v19's `.wl`: the `.mkrow` shape without the press — tone tile, copy, then
   whatever the row carries (a tag, icon buttons, a switch). */
.settings-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--moonx-line);
  border-radius: 16px;
  background: var(--moonx-card);
}

.settings-item--tagged {
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
}

.settings-item--bare {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-item--stacked .settings-item-actions {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.settings-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* v24b sheets are 440px on desktop; the setup gate uses that same compact
   sheet proportion without affecting the shared modal family. */
@media (min-width: 920px) {
  .account-setup-modal {
    max-width: 440px;
  }
}

.settings-row-copy>.settings-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.settings-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--moonx-blue-high);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.settings-link:hover {
  text-decoration: underline;
}

.settings-add {
  margin-top: 12px;
  background: var(--moonx-card);
}

/* v24 logout confirmation. The mockup's desktop sheet resolves to the
   shared 560px modal; only its copy, status rows and warning are specific. */
.logout-confirmation-modal {
  gap: var(--space-16);
}

.logout-confirmation-copy {
  width: 100%;
}

.logout-confirmation-copy h2 {
  margin: 0;
  color: var(--moonx-text);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.035em;
}

.logout-confirmation-copy p {
  margin: var(--space-8) 0 0;
  color: var(--moonx-text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.logout-confirmation-statuses {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: var(--border-hairline) solid var(--moonx-line);
  border-radius: var(--radius-16);
}

.logout-confirmation-statuses div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 12px 14px;
  border-bottom: var(--border-hairline) solid var(--moonx-line);
}

.logout-confirmation-statuses div:last-child {
  border-bottom: 0;
}

.logout-confirmation-statuses dt {
  color: var(--moonx-text);
  font-size: 12px;
  font-weight: 600;
}

.logout-confirmation-statuses dd {
  margin: 0;
  color: var(--moonx-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}

.logout-confirmation-statuses .is-safe {
  color: var(--moonx-green);
}

.logout-confirmation-actions {
  margin-top: var(--space-4);
}

.logout-confirmation-actions .mx-btn--ghost {
  background: var(--moonx-card);
}

.logout-confirmation-actions .mx-btn--ghost:hover {
  background: var(--moonx-raised);
}

.logout-confirmation-form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
}

.logout-confirmation-form .mx-btn {
  width: 100%;
}

/* The pinned logout row has no trailing affordance, so its label must not
   consume the rail's remaining width. Keep the standard 12px icon gap. */
.nav-rail-logout .nav-rail-label {
  flex: 0 1 auto;
}

/* A sheet field laid on the page: `.lbl`, then the `.crow` well, then the
   `.fldhint` under it. The well's border only turns blue while it is being
   typed in — v19's own resting `.crow` is blue, and every sheet overrides it
   back to --line-2. */
.settings-field {
  margin-top: 18px;
}

.settings-section-title+.settings-field,
.settings-section-head+.settings-field {
  margin-top: 0;
}

.settings-field-label {
  display: block;
}

.settings-crow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 4px 4px 16px;
  border: 1px solid var(--moonx-line-strong);
  border-radius: 12px;
  background: var(--moonx-raised);
  transition: border-color .16s;
}

.settings-crow:focus-within {
  border-color: var(--moonx-blue);
}

.settings-crow input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--moonx-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
}

/* Amounts read the resolved cascade, not `.crow`'s first declaration: v19's
   later "MONO — every numeric readout" layer moves `.crow em`/`.crow input`
   to JetBrains Mono 700, which is Figma's Number/LG exactly. */
.settings-crow em,
.settings-crow--amount input {
  font-family: var(--font-mono);
  font-size: var(--text-number-lg);
  font-weight: var(--text-number-lg--weight);
  letter-spacing: var(--text-number-lg--letter-spacing);
  font-variant-numeric: tabular-nums;
}

.settings-crow em {
  flex: none;
  color: var(--moonx-text-secondary);
  font-style: normal;
}

.settings-crow input::-webkit-outer-spin-button,
.settings-crow input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings-crow input[type="number"] {
  -moz-appearance: textfield;
}

.settings-hint {
  margin: 9px 0 0;
  color: var(--moonx-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}

.settings-actions {
  margin-top: 24px;
}

/* The Starfield switch. rules-form flips aria-pressed; the look follows it. */
.settings-swi {
  position: relative;
  display: block;
  flex: none;
  width: 28px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--moonx-line-strong);
  border-radius: var(--radius-full);
  background: var(--moonx-well);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.settings-swi::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--moonx-text-secondary);
  transition: left .18s, background .18s;
}

.settings-swi[aria-pressed="true"] {
  background: rgba(45, 123, 255, .28);
  border-color: rgba(45, 123, 255, .52);
}

.settings-swi[aria-pressed="true"]::after {
  left: 14px;
  background: var(--moonx-blue-high);
}

.settings-swi:focus-visible {
  outline: var(--border-focus) solid var(--moonx-blue-high);
  outline-offset: 2px;
}

.settings-choice {
  display: flex;
  gap: 8px;
}

.settings-choice .mx-tab {
  position: relative;
}

.settings-choice-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.settings-choice .mx-tab:has(.settings-choice-input:checked) {
  background: var(--moonx-text);
  border-color: var(--moonx-text);
  color: var(--moonx-page);
}

.settings-choice .mx-tab:has(.settings-choice-input:focus-visible) {
  outline: var(--border-focus) solid var(--moonx-blue-high);
  outline-offset: 2px;
}

/* `.approval-status-badge`, `.api-badge` and `.rules-title` stay in the
   Polymarket markup only as hooks its tests read; the Tag, `.lbl` or section
   title is what draws, so the legacy looks are switched off here. */
.settings-page .approval-status-badge,
.settings-page .api-badge {
  display: contents;
}

.settings-page .rules-title {
  color: inherit;
  font-family: inherit;
  font-style: normal;
  line-height: inherit;
}

@media (max-width: 560px) {
  .settings-page {
    padding-inline: 16px;
  }
}

/* Bottom-anchored below `--modal-breakpoint`, matching `.mx-modal`'s own
   switch. The 26px top-right corner is Figma's deliberate off-ladder value
   for a bottom sheet, carried here so the two families agree on shape. */
@media (max-width: 919px) {
  .settings-sheet {
    max-width: none;
    margin: auto auto 0;
    padding: var(--space-16);
    border-radius: var(--radius-20) 26px 0 0;
  }
}

.pending-shot-cancel {
  display: contents;
}

/* The dashboard reads from the navigation rail outward: desktop reading
   columns share `--mid`, but begin at the main area's left edge instead of
   floating in its centre. Each page keeps its own existing 22px content
   gutter, so this changes placement only. */
@media (min-width: 920px) {

  .content.legends-page,
  .content.markets-page,
  .shots-page,
  .fund-page,
  .feed-page .pad,
  .settings-page {
    margin-left: auto;
    margin-right: auto;
  }
}