/* xomopay ui v3 (UI Designer, Nov 11 2026) · spec: SPEC.md
   Tokens read from fomo's signed-in web app (fomo.family, Nov 11): bg, surfaces, text greys, green/red, radii 6/8/12/16,
   12/14/16px type, 700 buttons, 150ms cubic-bezier(.4,0,.2,1). Periwinkle is #606AF7 (brief). X post cards use #2F3336 hairlines.
   Geist stands in for Aeonik. Lowercase voice. Flat: no drop shadows; glow is periwinkle only and only on the spotlight. */
@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #060510; --bg2: #12111A; --bg3: rgba(203, 208, 235, .10); --bg3s: #161522;
  --line: rgba(203, 208, 235, .10); --xline: #2F3336;
  --text: #F7F7F7; --head: #EAEDFF; --text2: #9899A3; --text3: #6A6E7A;
  --peri: #606AF7; --peri-hi: #6F85FF; --peri-t: rgba(96, 106, 247, .16);
  --green: #21C95E; --green-t: rgba(33, 201, 94, .2); --red: #FF622E; --red-t: rgba(255, 98, 46, .2); --warn: #FFC74F;
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gx: 16px; color-scheme: dark;
}
@media (min-width: 1100px) { :root { --gx: 24px; } }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 16px/24px var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2 { color: var(--head); font-weight: 500; letter-spacing: -.04em; }
h2 { font-size: 24px; line-height: 28px; letter-spacing: -.03em; }
h3 { font-size: 16px; line-height: 24px; font-weight: 500; }
.mono { font-family: var(--mono); font-size: .92em; }
.mute { color: var(--text2); } .dim { color: var(--text3); }
.green { color: var(--green); } .red { color: var(--red); }
.cash { color: var(--peri-hi); font-weight: 700; }                 /* a cashtag anywhere */
:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; border-radius: var(--r-xs); }
svg { display: block; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--peri); color: var(--text); font: 700 16px/24px var(--sans); cursor: pointer; white-space: nowrap; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 80ms var(--ease), opacity 150ms var(--ease); }
.btn:hover { background: color-mix(in oklab, var(--peri) 90%, transparent); }
.btn:active { transform: translateY(1px); background: color-mix(in oklab, var(--peri) 80%, transparent); }
.btn--dark { background: var(--bg2); border-color: rgba(203, 208, 235, .06); color: var(--text); }
.btn--dark:hover { background: var(--bg3s); border-color: var(--line); } .btn--dark:active { background: var(--bg3s); }
.btn--buy { background: var(--green-t); color: var(--green); } .btn--buy:hover { background: rgba(33, 201, 94, .28); }
.btn--sm { height: 32px; padding: 0 12px; border-radius: var(--r-sm); font-size: 14px; line-height: 20px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--bg2); border-color: rgba(203, 208, 235, .06); color: var(--text2); cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* small outline action (fomo's "Follow" look): gradient hairline */
.mini { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-xs); color: var(--text2); font: 700 12px/12px var(--sans); cursor: pointer;
  background: linear-gradient(var(--bg3s), var(--bg3s)) padding-box, linear-gradient(180deg, rgba(203, 208, 235, .24) 0%, rgba(203, 208, 235, .04) 100%) border-box; transition: color 150ms var(--ease); }
.mini:hover { color: var(--text); } .mini.is-done { color: var(--green); }
.mini[aria-disabled="true"] { color: var(--text3); cursor: default; } .mini[aria-disabled="true"]:hover { color: var(--text3); }

/* ---------- pill tabs, badges, chips ---------- */
.tabs { display: inline-flex; gap: 4px; }
.tab { height: 28px; padding: 0 10px; border: 1px solid var(--bg3s); border-radius: var(--r-xs); background: transparent; color: var(--text2); font: 700 12px/12px var(--sans); cursor: pointer; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.tab:hover { background: var(--bg3s); color: var(--text); } .tab[aria-selected="true"] { background: var(--bg3s); color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/16px var(--sans); white-space: nowrap; }
.badge--green { background: var(--green-t); color: var(--green); } .badge--grey { background: var(--bg3); color: var(--text2); } .badge--warn { background: rgba(255, 199, 79, .12); color: var(--warn); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); color: var(--text); font: 500 12px/16px var(--sans); cursor: pointer; transition: opacity 150ms var(--ease); }
.chip:hover { opacity: .8; }
.dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: currentColor; opacity: .35; animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: .45; } to { transform: scale(1); opacity: 0; } }

/* ---------- surfaces ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; background: var(--bg); }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card__h h3 { display: flex; align-items: center; gap: 8px; }
.tile { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--bg2); min-width: 0; }
.tile span { color: var(--text2); font: 500 12px/16px var(--sans); } .tile b { font: 500 20px/28px var(--sans); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tile small { color: var(--text2); font: 500 12px/16px var(--sans); }
.av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg3s); color: var(--head); font: 700 14px/1 var(--sans); overflow: hidden; }
.av--lg { width: 56px; height: 56px; font-size: 20px; } .av--sm { width: 24px; height: 24px; font-size: 10px; }
.av svg { width: 100%; height: 100%; }
/* fomo-style list row (traders, payouts): 8px radius, hover scrim */
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--r-sm); transition: background-color 150ms var(--ease); }
a.row:hover, .row--hover:hover { background: var(--bg2); }
.row__n { width: 18px; color: var(--text2); font: 500 12px/16px var(--sans); text-align: right; }
.row__t { min-width: 0; display: grid; } .row__t b { font: 500 14px/20px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row__t small { color: var(--text2); font: 500 12px/16px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__v { text-align: right; display: grid; } .row__v b { font: 500 14px/20px var(--sans); color: var(--green); } .row__v small { color: var(--text2); font: 500 12px/16px var(--sans); }
.row.is-new { animation: rowin 220ms var(--ease-out), rowflash 600ms linear 220ms; }
@keyframes rowin { from { transform: translateY(-8px); opacity: 0; } } @keyframes rowflash { from { background: var(--green-t); } to { background: transparent; } }
.skel { display: block; height: 12px; border-radius: 4px; background: var(--bg3s); }
/* inputs */
.field { display: grid; gap: 6px; font: 500 14px/20px var(--sans); } .field small { color: var(--text2); font-weight: 500; font-size: 12px; }
.in { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg2); color: var(--text); font: 500 16px/24px var(--sans); transition: border-color 150ms var(--ease); }
.in::placeholder { color: var(--text3); } .in:hover { border-color: rgba(203, 208, 235, .2); } .in:focus { outline: 0; border-color: var(--peri); }
textarea.in { height: auto; padding: 10px 12px; } .in[aria-invalid="true"] { border-color: var(--red); }

/* ---------- shell ---------- */
.rail { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px var(--gx); background: var(--bg); border-bottom: 1px solid var(--line); }
.rail__logo { display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--sans); letter-spacing: -.04em; color: var(--head); } .rail__logo svg { width: 34px; height: 22px; }
.rail nav { display: none; }
.rail__sp { flex: 1; }
.net { height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: var(--bg3); color: var(--text2); font: 700 10px/20px var(--sans); }
.subnav { display: flex; gap: 4px; min-width: 0; padding: 8px var(--gx); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; height: 28px; padding: 0 10px; border-radius: var(--r-xs); color: var(--text2); font: 700 12px/28px var(--sans); } .subnav a[aria-current] { background: var(--bg3s); color: var(--text); }
.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 16px var(--gx) 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; align-content: start; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px var(--gx) 24px; border-top: 1px solid var(--line); color: var(--text2); font: 500 12px/16px var(--sans); }
.foot a { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 1100px) {
  body { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
  .rail { grid-row: 1 / 3; align-self: start; height: 100vh; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 16px; border-bottom: 0; border-right: 1px solid var(--line); }
  .rail nav { display: grid; gap: 2px; } .rail nav a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--r-sm); color: var(--text2); font: 500 16px/24px var(--sans); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
  .rail nav a:hover { background: var(--bg2); color: var(--text); } .rail nav a[aria-current] { background: var(--bg3s); color: var(--text); }
  .rail nav svg { width: 18px; height: 18px; } .rail__sp { flex: 1; } .rail .net { align-self: flex-start; }
  .subnav { display: none; } .wrap { padding: 24px var(--gx) 64px; gap: 40px; }
}

/* ---------- home: spotlight ---------- */
.spot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(520px 360px at 88% 8%, rgba(96, 106, 247, .26), transparent 70%), radial-gradient(420px 300px at 0% 100%, rgba(96, 106, 247, .10), transparent 70%), var(--bg); }
.spot__copy { display: grid; gap: 16px; align-content: center; }
.spot h1 { font-size: clamp(44px, 12vw, 88px); line-height: .94; letter-spacing: -.05em; } .spot h1 em { font-style: normal; color: var(--peri-hi); }
.spot__lede { max-width: 30em; color: var(--text2); font: 500 16px/24px var(--sans); }
.spot__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.spot__mini { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--text2); font: 500 12px/16px var(--sans); } .spot__mini b { color: var(--text); font-weight: 700; }
@media (min-width: 900px) { .spot { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; padding: 32px; } }
/* the platform token card */
.tok { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: color-mix(in srgb, var(--bg2) 82%, transparent); backdrop-filter: blur(6px); }
.tok__sky { position: relative; display: grid; place-items: center; height: 132px; border-radius: var(--r-md); background: radial-gradient(240px 130px at 50% 60%, rgba(96, 106, 247, .38), transparent 72%), var(--bg); overflow: hidden; }
.tok__sky .eyes { width: 190px; height: auto; } .tok__sky .badge { position: absolute; left: 10px; top: 10px; } .tok__sky .mini { position: absolute; right: 10px; top: 10px; }
.tok__id { display: flex; align-items: center; gap: 10px; min-width: 0; } .tok__id b { font: 500 20px/24px var(--sans); letter-spacing: -.02em; } .tok__id small { display: block; color: var(--text2); font: 500 12px/16px var(--sans); }
.tok__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tok__grid .tile--w { grid-column: 1 / -1; }
.tok__ca { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-sm); background: var(--bg2); min-width: 0; } .tok__ca span { color: var(--text2); font: 700 10px/12px var(--sans); } .tok__ca code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/16px var(--mono); }
.tok__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tok__note { color: var(--text2); font: 500 12px/16px var(--sans); }
/* the eyes follow the pointer (js sets --px/--py in svg units, max 16) */
.eyes .pupil { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)); transition: transform 120ms var(--ease-out); }
.eyes { transform-origin: 50% 50%; animation: blink 7s var(--ease) infinite; }
@keyframes blink { 0%, 96.5%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.08); } }

/* ---------- home: the loop ---------- */
.sec__h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; } .sec__h p { color: var(--text2); font: 500 14px/20px var(--sans); }
.loop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.loop__step { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); animation: stepon 9s var(--ease) infinite; }
.loop__step:nth-of-type(2) { animation-delay: 3s; } .loop__step:nth-of-type(3) { animation-delay: 6s; }
@keyframes stepon { 0%, 30% { border-color: rgba(96, 106, 247, .7); } 36%, 100% { border-color: var(--line); } }
.loop__k { display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--sans); } .loop__k i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/1 var(--sans); font-style: normal; } .loop__k small { color: var(--text2); font-size: 12px; margin-left: auto; }
.loop__link { position: relative; height: 28px; justify-self: center; width: 2px; background: repeating-linear-gradient(180deg, var(--xline) 0 4px, transparent 4px 8px); }
.loop__link::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--peri-hi); animation: travely 1.6s linear infinite; }
@keyframes travely { from { transform: translateY(-4px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
@media (min-width: 900px) {
  .loop { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; }
  .loop__link { align-self: center; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--xline) 0 4px, transparent 4px 8px); }
  .loop__link::after { left: 0; top: -3px; animation-name: travelx; }
}
@keyframes travelx { from { transform: translateX(-4px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateX(36px); opacity: 0; } }
/* X-style post (also the coin card) */
.post { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; padding: 12px 16px; border: 1px solid var(--xline); border-radius: var(--r-lg); background: var(--bg); color: var(--text); transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
a.post:hover { border-color: rgba(96, 106, 247, .6); background: rgba(203, 208, 235, .03); }
.post .av { width: 40px; height: 40px; }
.post__h { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font: 500 15px/20px var(--sans); min-width: 0; } .post__h b { font-weight: 700; } .post__h span { color: var(--text2); } .post__h .badge { margin-left: auto; }
.post__t { margin-top: 2px; font: 400 15px/20px var(--sans); overflow-wrap: anywhere; } .post__t .mono { color: var(--text2); }
.post__m { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--xline); }
.post__m span { display: grid; color: var(--text2); font: 500 12px/16px var(--sans); } .post__m b { color: var(--text); font: 500 14px/20px var(--sans); } .post__m .is-paid b { color: var(--green); }
.post__a { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post--ghost { border-style: dashed; } .post--ghost .skel { margin: 6px 0; }
.post__x { grid-column: 2; display: flex; gap: 28px; margin-top: 10px; color: var(--text3); } .post__x svg { width: 16px; height: 16px; }
/* the link card under a post (what x shows for the coin link) */
.post__card { grid-column: 2; display: grid; gap: 2px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--xline); border-radius: var(--r-md); font: 500 13px/18px var(--sans); } .post__card small { color: var(--text2); font: 500 12px/16px var(--sans); }
/* fomo trade sheet (illustration, not interactive) */
.sheet { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.sheet__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sheet__seg span { display: grid; place-items: center; height: 36px; border-radius: var(--r-sm); background: var(--bg2); color: var(--text2); font: 700 14px/20px var(--sans); } .sheet__seg .on { background: var(--green-t); color: var(--green); }
.sheet__amt { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px; border-radius: var(--r-sm); background: var(--bg2); color: var(--text3); font: 500 14px/20px var(--sans); } .sheet__amt b { color: var(--text); font: 500 28px/1 var(--sans); letter-spacing: -.03em; }
.sheet__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sheet__chips span { display: grid; place-items: center; height: 28px; border-radius: var(--r-sm); background: var(--bg2); font: 700 12px/16px var(--sans); }
.sheet__tok { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font: 500 14px/20px var(--sans); } .sheet__tok small { margin-left: auto; color: var(--text2); font-size: 12px; }
/* payout split */
.split { display: grid; gap: 6px; } .split__bar { display: grid; grid-template-columns: 9fr 1fr; gap: 3px; height: 8px; } .split__bar i { border-radius: 4px; background: var(--green); } .split__bar i + i { background: var(--peri); }
.split__k { display: flex; justify-content: space-between; gap: 8px; color: var(--text2); font: 500 12px/16px var(--sans); } .split__k b { color: var(--text); font-weight: 700; }

/* ---------- home: stats, feed, rail, wall ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stats .tile { padding: 12px 16px; } .stats .tile b { font-size: 28px; line-height: 32px; letter-spacing: -.03em; } .stats .is-paid b { color: var(--green); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cols { display: grid; gap: 24px; } .feed { display: grid; gap: 12px; align-content: start; min-width: 0; } .side { display: grid; gap: 12px; align-content: start; min-width: 0; }
@media (min-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr) 340px; } .side { position: sticky; top: 24px; } }
.empty { display: grid; justify-items: start; gap: 10px; }
.empty__t { font: 500 20px/24px var(--sans); letter-spacing: -.02em; color: var(--head); } .empty p { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 34em; }
.wall { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(420px 260px at 0% 0%, rgba(96, 106, 247, .14), transparent 70%), var(--bg); }
.wall__n { display: grid; gap: 8px; align-content: start; } .wall__n b { font: 500 clamp(56px, 9vw, 96px)/.9 var(--sans); letter-spacing: -.05em; color: var(--head); } .wall__n p { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 22em; }
.wall__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .wall__grid::-webkit-scrollbar { display: none; } .wall__grid > * { scroll-snap-align: start; }
.wall .post { padding: 10px 12px; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; border-radius: var(--r-md); } .wall .post .av { width: 28px; height: 28px; font-size: 11px; } .wall .post__h, .wall .post__t { font-size: 13px; line-height: 18px; }
.slot { display: grid; place-items: center; min-height: 86px; border: 1px dashed var(--xline); border-radius: var(--r-md); color: var(--text3); font: 500 12px/16px var(--sans); text-align: center; }
@media (min-width: 900px) { .wall { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 24px; } .wall__grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } }

/* ---------- coin page ---------- */
.chead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.chead__img { width: 64px; height: 64px; border-radius: var(--r-md); background: var(--bg3s); display: grid; place-items: center; font: 700 22px/1 var(--sans); color: var(--head); }
.chead h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1; } .chead h1 .cash { font-size: .5em; letter-spacing: 0; margin-left: 6px; }
.chead__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chead__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .chead { grid-template-columns: auto minmax(0, 1fr) auto; } .chead__act { grid-column: auto; } }
.money { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.money__trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .money__trio .tile b { font-size: clamp(18px, 4.6vw, 28px); line-height: 1.15; } .money__trio .is-paid b { color: var(--green); }
.flow { display: grid; gap: 6px; } .flow__bar { position: relative; height: 10px; border-radius: 5px; background: var(--bg3s); overflow: hidden; } .flow__bar i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: 5px; background: var(--green); transition: width 400ms var(--ease); }
.flow__k { display: flex; justify-content: space-between; gap: 8px; color: var(--text2); font: 500 12px/16px var(--sans); }
.list { display: grid; } .list .row { grid-template-columns: minmax(0, 1fr) auto auto; border-radius: 0; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); gap: 12px; } .list .row:first-child { border-top: 0; }
.list time { color: var(--text2); font: 500 12px/16px var(--sans); } .list a { color: var(--peri-hi); font: 500 12px/16px var(--mono); }
.who { display: grid; gap: 12px; } .who__top { display: flex; align-items: center; gap: 12px; } .who__top b { display: block; font: 500 20px/24px var(--sans); letter-spacing: -.02em; }
.proof summary { cursor: pointer; color: var(--text2); font: 500 14px/20px var(--sans); list-style: none; display: flex; justify-content: space-between; } .proof summary::after { content: "+"; } .proof[open] summary::after { content: "–"; }
.dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 12px 0 0; font: 500 12px/16px var(--sans); } .dl dt { color: var(--text2); } .dl dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.ccols { display: grid; gap: 16px; } @media (min-width: 1100px) { .ccols { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } }
.stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.dock { position: sticky; bottom: 0; z-index: 15; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; min-width: 0; padding: 10px var(--gx) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.dock .btn { min-width: 0; padding: 0 12px; font-size: 14px; }
@media (max-width: 899px) { main.wrap:has(+ .dock) { padding-bottom: 96px; } }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- launch (no separate mock: lift these classes onto site/launch.html) ---------- */
.launch { display: grid; gap: 20px; width: 100%; }
.launch > h1 { font-size: clamp(40px, 8vw, 56px); line-height: .95; letter-spacing: -.05em; }
.lede { max-width: 36em; color: var(--text2); font: 500 16px/24px var(--sans); }
.launch__grid { display: grid; gap: 16px; }
.step { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.step__h { display: flex; align-items: center; gap: 10px; } .step__h h2 { font-size: 20px; line-height: 24px; }
.step__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/1 var(--sans); }
.step label, .field { display: grid; gap: 6px; }
.at { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg2); }
.at:focus-within { border-color: var(--peri); } .at b { font: 700 18px/1 var(--sans); color: var(--head); }
.at input { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--text); font: 500 16px/24px var(--sans); } .at input:focus { outline: 0; }
.launch__preview { display: grid; gap: 12px; align-content: start; }
@media (min-width: 1100px) {
  .launch__grid { grid-template-columns: minmax(0, 560px) minmax(280px, 360px); gap: 32px; align-items: start; }
  .launch__preview { position: sticky; top: 24px; }
}

/* aliases so the live site's class names pick up this look without a receipt */
.btn--peri { background: var(--peri); color: var(--text); } .btn--peri:hover { background: color-mix(in oklab, var(--peri) 90%, transparent); }
.btn--ghost { background: var(--bg2); border-color: rgba(203, 208, 235, .06); color: var(--text); } .btn--ghost:hover { background: var(--bg3s); }
.muted, .mute { color: var(--text2); }
.rcpt { background: transparent; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .loop__link::after { opacity: 1; } .dot::after { display: none; }
}

/* xomopay ui additions v1 (UI Designer, Nov 11 2026) · spec: SPEC-2.md
   Load AFTER xomo-ui.css. It adds components for /docs, /payouts, /burns and the launch confirm step.
   It restyles nothing. The only rules that change old behaviour are the two marked FIX. Same tokens, no new colors. */

/* ---------- FIX 1: coin page at 390 had a blank band above the footer ----------
   .dock is position: sticky, so it already keeps its own height in the page. The extra 96px is not needed. */
@media (max-width: 899px) { main.wrap:has(+ .dock) { padding-bottom: 16px; } }
/* FIX 1b: on phones the dock already carries post / trade / copy. the same two buttons under the title were a duplicate, and at 375 they wrapped onto two rows */
@media (max-width: 899px) { main:has(+ .dock) .chead__act { display: none; } }
/* FIX 1c: at 360 to 400 wide the three money tiles cut their values ("3.20 S…"). stack them as rows: label left, value right */
@media (max-width: 419px) { .money__trio { grid-template-columns: minmax(0, 1fr); } .money__trio .tile { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; } .money__trio .tile b { font-size: 20px; line-height: 28px; } .money__trio .tile small { grid-column: 1 / -1; } }

/* hardening: a long address inside a card must never widen its column */
.side, .feed, .stack { grid-template-columns: minmax(0, 1fr); }

/* ---------- page head (docs, payouts, burns) ---------- */
.phead { display: grid; gap: 12px; }
.phead h1 { font-size: clamp(40px, 8vw, 56px); line-height: .95; letter-spacing: -.05em; }
.phead__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.phead__side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--text2); font: 500 12px/16px var(--sans); }
.live .dot { color: var(--green); }
section[id], div[id] { scroll-margin-top: 112px; }
.only-wide { display: none; } @media (min-width: 1000px) { .only-wide { display: grid; } }
.phead__card { width: 340px; gap: 10px; align-content: start; }

/* "on this page" chips. sticky under the top bar on phones, at the top from 1100px */
.toc { position: sticky; top: var(--toc-top, 53px); z-index: 12; display: flex; gap: 4px; margin: 0 calc(var(--gx) * -1); padding: 8px var(--gx); overflow-x: auto; background: var(--bg); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--bg3s); border-radius: var(--r-xs); color: var(--text2); font: 700 12px/26px var(--sans); transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.toc a:hover, .toc a[aria-current="true"] { background: var(--bg3s); color: var(--text); }
@media (min-width: 1100px) { :root { --toc-top: 0px; } }

/* ---------- docs: the loop in five steps ---------- */
.journey { container-type: inline-size; }
.journey__g { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.jstep { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 12px; padding-bottom: 20px; }
.jstep::before { content: ""; position: absolute; left: 9px; top: 26px; bottom: 2px; width: 2px; background: repeating-linear-gradient(180deg, var(--xline) 0 4px, transparent 4px 8px); }
.jstep:last-child { padding-bottom: 0; } .jstep:last-child::before { display: none; }
.jstep__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/1 var(--sans); animation: jnum 10s var(--ease) infinite; }
.jstep__b { display: grid; gap: 8px; min-width: 0; }
.jstep__t { color: var(--head); font: 500 16px/20px var(--sans); letter-spacing: -.01em; } .jstep__t small { display: block; color: var(--text2); font: 500 12px/16px var(--sans); letter-spacing: 0; }
.jstep__art { display: grid; align-content: center; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); animation: jon 10s var(--ease) infinite; }
.jstep__c { color: var(--text2); font: 500 13px/18px var(--sans); min-height: 36px; }      /* slot: 1 to 2 short lines */
.jstep:nth-child(2) :is(.jstep__n, .jstep__art) { animation-delay: 2s; } .jstep:nth-child(3) :is(.jstep__n, .jstep__art) { animation-delay: 4s; }
.jstep:nth-child(4) :is(.jstep__n, .jstep__art) { animation-delay: 6s; } .jstep:nth-child(5) :is(.jstep__n, .jstep__art) { animation-delay: 8s; }
@keyframes jon { 0%, 17% { border-color: rgba(96, 106, 247, .7); } 22%, 100% { border-color: var(--line); } }
@keyframes jnum { 0%, 17% { background: var(--peri); color: var(--text); } 22%, 100% { background: var(--peri-t); color: var(--peri-hi); } }
.journey.is-off :is(.jstep__n, .jstep__art, .tap__tag::after) { animation-play-state: paused; }
@container (min-width: 640px) {
  .journey__g { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 24px; }
  .jstep { grid-column: span 2; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 8px; padding: 0; }
  .jstep:nth-child(5) { grid-column: span 4; }
  .jstep::before { display: none; }
  .jstep__b { display: contents; } .jstep__art, .jstep__c { grid-column: 1 / -1; }
  /* the arrow that sits in the gap after a step */
  .jstep:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--text3); border-right: 2px solid var(--text3); transform: rotate(45deg); }
  .jstep:nth-child(3)::after { display: none; }
}
@container (min-width: 1000px) {
  .journey__g { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); }
  .jstep, .jstep:nth-child(5) { grid-column: auto; } .jstep:nth-child(3)::after { display: block; }
}
/* art 1: a small x post */
.post--mini { padding: 10px 12px; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; border-radius: var(--r-md); } .post--mini .av { width: 28px; height: 28px; font-size: 11px; } .post--mini .post__h, .post--mini .post__t { font-size: 13px; line-height: 18px; } .post--mini .post__x { gap: 20px; margin-top: 8px; } .post--mini .post__x svg { width: 14px; height: 14px; }
/* art 2: the cashtag being tapped */
.tap { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 92px; }
.tap__tag { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-md); background: var(--peri-t); color: var(--peri-hi); font: 700 20px/1 var(--sans); letter-spacing: -.02em; }
.tap__tag::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--peri); border-radius: 16px; opacity: 0; animation: tapring 2s var(--ease-out) infinite; }
.tap__tag svg { position: absolute; right: -10px; bottom: -14px; width: 22px; height: 22px; color: var(--text); }
@keyframes tapring { 0% { transform: scale(.96); opacity: .9; } 70%, 100% { transform: scale(1.14); opacity: 0; } }
.tap small { color: var(--text3); font: 500 12px/16px var(--sans); text-align: center; }
/* art 3: the trade sheet, compact */
.sheet--mini { padding: 0; border: 0; } .sheet--mini .sheet__seg span { height: 30px; font-size: 13px; } .sheet--mini .sheet__amt { height: 44px; } .sheet--mini .sheet__amt b { font-size: 22px; } .sheet--mini .sheet__chips span { height: 24px; font-size: 11px; }
/* art 4: a slice of the trade becomes the creator fee */
.feeart { display: grid; gap: 8px; }
.feeart__bar { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 3px; height: 8px; } .feeart__bar i { border-radius: 4px; background: var(--bg3s); } .feeart__bar i + i { background: var(--peri-hi); }
.feeart__k { display: flex; justify-content: space-between; gap: 8px; color: var(--text2); font: 500 12px/16px var(--sans); } .feeart__k b { color: var(--peri-hi); font-weight: 700; }
.feeart__drop { justify-self: end; margin-right: 7px; width: 2px; height: 14px; background: repeating-linear-gradient(180deg, var(--peri-hi) 0 3px, transparent 3px 6px); }
.kv { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg2); font: 500 13px/18px var(--sans); min-width: 0; } .kv svg { width: 16px; height: 16px; flex: none; color: var(--text2); } .kv small { margin-left: auto; color: var(--text2); font: 500 12px/16px var(--sans); white-space: nowrap; }
/* art 5: who gets what */
.outs { display: grid; gap: 10px; } .outs .row { margin: 0; padding: 0; }

/* ---------- docs: the money-flow diagram ---------- */
.mf { container-type: inline-size; margin-top: 20px; }
.mf > .mf__gap { padding: 0 13px; }
.mf__zone { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 22px 12px 12px; border: 1px dashed rgba(96, 106, 247, .45); border-radius: var(--r-lg); }
.mf__zone--hand { border-color: var(--xline); }
.mf__tag { position: absolute; top: -11px; left: 12px; display: inline-flex; padding: 0 4px; background: var(--bg); }
.mf__row { display: grid; grid-template-columns: minmax(0, 1fr); }
.mf__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.mf__n { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 10px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.mf__n:hover, .mf__n:focus-within { border-color: rgba(96, 106, 247, .6); background: rgba(203, 208, 235, .03); }
.mf__i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--bg3s); color: var(--text); } .mf__i svg { width: 16px; height: 16px; }
.mf__n--pay .mf__i { background: var(--green-t); color: var(--green); } .mf__n--burn .mf__i { background: var(--peri-t); color: var(--peri-hi); }
.mf__t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--head); font: 500 14px/20px var(--sans); }
.mf__s { color: var(--text2); font: 500 12px/16px var(--sans); }
.mf__s code, .mf__proof code { font: 500 12px/16px var(--mono); color: var(--text); }
.mf__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--text2); font: 500 12px/16px var(--sans); }
.mf__proof a { color: var(--peri-hi); font-family: var(--mono); white-space: nowrap; } .mf__proof a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mf__n .split { margin-top: 6px; }
/* connectors: dashed, with the same travelling dot as the home loop */
.mf__v { position: relative; justify-self: center; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, var(--xline) 0 4px, transparent 4px 8px); }
.mf__v::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--peri-hi); animation: travely 1.6s linear infinite; }
.mf__v--pay::after { background: var(--green); }
.mf__v--label { height: 52px; } .mf__v--label b { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); white-space: nowrap; background: var(--bg3s); box-shadow: 0 0 0 4px var(--bg); }
.mf__gap { height: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.mf.is-off :is(.mf__v, .mf__h)::after { animation-play-state: paused; }
.mf__h { position: relative; justify-self: center; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, var(--xline) 0 4px, transparent 4px 8px); }
.mf__h::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--peri-hi); animation: travely 1.6s linear infinite; }
@container (min-width: 560px) {
  .mf__zone { padding: 26px 16px 16px; } .mf__tag { left: 16px; }
  .mf__n { grid-template-columns: 32px minmax(0, 1fr); padding: 12px; } .mf__i { width: 32px; height: 32px; grid-row: span 2; align-self: start; }
  .mf__proof, .mf__n .split { grid-column: 1 / -1; }
  .mf__row--2, .mf__gap { gap: 0 16px; } .mf > .mf__gap { padding: 0 17px; }
  .mf__row--stem { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; }
  .mf__h { align-self: center; width: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--xline) 0 4px, transparent 4px 8px); } .mf__h::after { left: 0; top: -3px; animation-name: travelx; }
}
.mf__legend { display: grid; gap: 8px; margin-top: 12px; } @media (min-width: 760px) { .mf__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mf__legend .tile { padding: 12px 16px; gap: 4px; } .mf__legend .tile b { font: 500 14px/20px var(--sans); letter-spacing: 0; white-space: normal; color: var(--head); } .mf__legend .tile p { color: var(--text2); font: 500 13px/18px var(--sans); }
/* a plain note. the icon says "read this", the yellow says "check it yourself" */
.note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg2); color: var(--text2); font: 500 13px/18px var(--sans); } .note svg { width: 16px; height: 16px; margin-top: 1px; } .note b { color: var(--text); font-weight: 700; }
.note--warn { background: rgba(255, 199, 79, .08); } .note--warn svg { color: var(--warn); }
.note--bad { background: var(--red-t); color: var(--text); } .note--bad svg { color: var(--red); }

/* ---------- docs: expandable detail + faq ---------- */
.dcols { display: grid; gap: 32px; align-items: start; } @media (min-width: 1000px) { .dcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.acc { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.acc details + details { border-top: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; color: var(--text); font: 500 16px/24px var(--sans); transition: background-color 150ms var(--ease); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--bg2); } .acc summary:focus-visible { outline-offset: -2px; border-radius: 0; }
.acc summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--text2), var(--text2)) center / 12px 2px no-repeat, linear-gradient(var(--text2), var(--text2)) center / 2px 12px no-repeat; transition: transform 150ms var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__b { display: grid; gap: 10px; padding: 0 16px 16px; color: var(--text2); font: 500 14px/22px var(--sans); max-width: 62ch; animation: fadein 150ms var(--ease-out); }
.acc__b b { color: var(--text); font-weight: 500; } .acc__b a { color: var(--peri-hi); } .acc__b ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; } .acc__b code { font: 500 12px/16px var(--mono); color: var(--text); overflow-wrap: anywhere; }
@keyframes fadein { from { opacity: 0; transform: translateY(-2px); } }
/* open and close with height where the browser can do it. elsewhere it just opens */
@supports (interpolate-size: allow-keywords) { .acc details { interpolate-size: allow-keywords; } .acc details::details-content { block-size: 0; overflow: hidden; transition: block-size 200ms var(--ease), content-visibility 200ms allow-discrete; } .acc details[open]::details-content { block-size: auto; } }
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(420px 200px at 0% 0%, rgba(96, 106, 247, .14), transparent 70%), var(--bg); }
.band p { color: var(--head); font: 500 20px/24px var(--sans); letter-spacing: -.02em; } .band div { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- payouts + burns: the ledger ---------- */
.addr { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r-sm); background: var(--bg2); min-width: 0; }
.addr > span { flex: none; color: var(--text2); font: 500 12px/16px var(--sans); } .addr code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/16px var(--mono); }
/* on a phone the full address wraps onto its own lines. an address you are asked to check is never cut short */
@media (max-width: 639px) { .addr { flex-wrap: wrap; padding: 8px 8px 10px 12px; } .addr > span:first-child { flex: 1; } .addr code { order: 3; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; } .who2 .addr > span { width: auto; } }
.verify { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.verify__k { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: var(--text2); font: 500 12px/16px var(--sans); } .verify__k b { color: var(--text); font: 500 14px/20px var(--sans); }
@media (min-width: 900px) { .verify--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .verify--2 .verify__k { grid-column: 1 / -1; } }
/* owed = paid + still owed. the one equation a skeptic checks first */
.recon { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.recon__eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.recon__eq > i { color: var(--text3); font: 500 20px/1 var(--sans); font-style: normal; } .recon__eq .tile b { font-size: clamp(16px, 4.4vw, 28px); line-height: 1.15; } .recon__eq .is-paid b { color: var(--green); }
@media (max-width: 559px) { .recon__eq { grid-template-columns: minmax(0, 1fr); } .recon__eq > i { display: none; } .recon__eq .tile { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; } .recon__eq .tile b { font-size: 20px; line-height: 28px; }
  .recon__eq .tile:nth-of-type(2) span::before { content: "= "; color: var(--text3); } .recon__eq .tile:nth-of-type(3) span::before { content: "+ "; color: var(--text3); } }
.recon__side { display: grid; grid-template-rows: auto 1fr; gap: 8px; } .recon__side .bars { height: auto; min-height: 64px; } .recon__side > span { display: flex; justify-content: space-between; gap: 8px; color: var(--text2); font: 500 12px/16px var(--sans); }
@media (min-width: 1000px) { .recon { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; } .recon__eq { gap: 10px; } }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 64px; }
.bars i { display: block; min-height: 2px; height: calc(var(--v, 0) * 1%); border-radius: 2px; background: var(--green); transform-origin: 50% 100%; animation: grow 400ms var(--ease-out) backwards; } .bars i[style*="--v:0"] { background: var(--bg3s); }
.bars--peri i { background: var(--peri); }
@keyframes grow { from { transform: scaleY(0); } }

.lg { container-type: inline-size; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.lg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.lg__bar .sp { flex: 1; }
.find { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; max-width: 320px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); transition: border-color 150ms var(--ease); }
.find:hover { border-color: rgba(203, 208, 235, .2); } .find:focus-within { border-color: var(--peri); } .find svg { width: 14px; height: 14px; color: var(--text3); flex: none; }
.find input { flex: 1; min-width: 0; height: 30px; border: 0; background: transparent; color: var(--text); font: 500 14px/20px var(--sans); } .find input::placeholder { color: var(--text3); } .find input:focus { outline: 0; }
.lg__head, .lg__row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who amt" "time tx"; gap: 2px 12px; align-items: center; padding: 10px 12px; }
.lg__head { display: none; }
.lg__row { border-top: 1px solid var(--line); } .lg__body > .lg__row:first-child { border-top: 0; }
.lg__row > summary { list-style: none; cursor: pointer; transition: background-color 150ms var(--ease); } .lg__row > summary::-webkit-details-marker { display: none; }
.lg__row > summary:hover, .lg__row[open] > summary { background: var(--bg2); } .lg__row > summary:focus-visible { outline-offset: -2px; border-radius: 0; }
.c-time { grid-area: time; color: var(--text2); font: 500 12px/16px var(--sans); white-space: nowrap; }
.c-who { grid-area: who; display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 14px/20px var(--sans); } .c-who b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-coins { grid-area: coins; display: none; gap: 4px; min-width: 0; overflow: hidden; }
.c-amt { grid-area: amt; text-align: right; font: 500 14px/20px var(--sans); white-space: nowrap; } .c-amt.is-paid { color: var(--green); } .c-amt small { display: block; color: var(--text2); font: 500 12px/16px var(--sans); }
.c-tx { grid-area: tx; justify-self: end; color: var(--peri-hi); font: 500 12px/16px var(--mono); white-space: nowrap; } a.c-tx:hover, .c-tx a:hover { text-decoration: underline; text-underline-offset: 2px; } .c-tx a { color: inherit; }
.c-owe { grid-area: tx; justify-self: end; color: var(--text2); font: 500 12px/16px var(--sans); white-space: nowrap; } .c-owe b { color: var(--text); font-weight: 500; }
.c-x { display: none; grid-area: x; width: 8px; height: 8px; border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: rotate(45deg); transition: transform 150ms var(--ease); justify-self: center; margin-top: -4px; } .lg__row[open] .c-x { transform: rotate(-135deg); margin-top: 4px; }
.lg__more { padding: 4px 12px 14px; background: var(--bg2); animation: fadein 150ms var(--ease-out); } .lg__more .dl { margin-top: 4px; grid-template-columns: 96px minmax(0, 1fr); }
.lg__more .dl dd { font-family: var(--sans); } .lg__more .dl dd a, .lg__more .dl dd code { font-family: var(--mono); } .lg__more .dl dd a { color: var(--peri-hi); }
.lg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--text2); font: 500 12px/16px var(--sans); }
.lg__row.is-new > summary { animation: rowin 220ms var(--ease-out), rowflash 600ms linear 220ms; }
@container (min-width: 720px) {
  .lg__bar { padding: 12px 16px; } .lg__foot { padding: 10px 16px; }
  .lg__head, .lg__row > summary { grid-template-columns: var(--lg-cols, 132px minmax(0, 1.1fr) minmax(0, 1fr) 150px 132px 16px); grid-template-areas: "time who coins amt tx x"; gap: 12px; padding: 0 16px; }
  .lg__head { display: grid; height: 36px; color: var(--text2); font: 500 12px/16px var(--sans); border-bottom: 1px solid var(--line); } .lg__head .c-amt, .lg__head .c-tx { font: inherit; color: inherit; }
  .lg__row > summary { min-height: 52px; } .c-coins { display: flex; } .c-x { display: block; }
  .lg__more { padding: 4px 16px 16px; } .lg__more .dl { grid-template-columns: 132px minmax(0, 1fr); }
}
.lg--burns { --lg-cols: 132px minmax(0, 1.1fr) minmax(0, 1fr) 132px 132px 16px; }
.lg--who { --lg-cols: 28px minmax(0, 1.2fr) 80px minmax(0, 1fr) minmax(0, 1fr) 16px; }
/* skeleton rows: only between the request and the answer */
.lg__skel { display: grid; grid-template-columns: 96px minmax(0, 1fr) 72px; gap: 12px; align-items: center; height: 52px; padding: 0 16px; border-top: 1px solid var(--line); } .lg__skel:first-child { border-top: 0; }
.skel--pulse, .lg__skel .skel { animation: skel 1.2s var(--ease) infinite alternate; } @keyframes skel { from { opacity: .45; } to { opacity: 1; } }
/* empty and no-match states: words, a real address, an action. never grey bars */
.zero { display: grid; gap: 12px; justify-items: start; padding: 24px 16px; } .zero__t { color: var(--head); font: 500 20px/24px var(--sans); letter-spacing: -.02em; } .zero > p { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 40em; }
.zero__l { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; width: 100%; } @media (min-width: 760px) { .zero__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zero__l li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg2); color: var(--text2); font: 500 12px/16px var(--sans); } .zero__l b { color: var(--text); font: 500 14px/20px var(--sans); }
/* three steps on one line (burns head, home empty feed) */
.mini3 { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 760px) { .mini3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini3 li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); } .mini3 i { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/1 var(--sans); font-style: normal; } .mini3 b { font: 500 14px/20px var(--sans); } .mini3 span { color: var(--text2); font: 500 12px/16px var(--sans); }

/* ---------- FIX 2: home, empty state. real content where the skeleton rows were ---------- */
.next { display: grid; gap: 0; } .next .card__h { margin-bottom: 4px; }
.next__r { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.next__r i { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--peri-t); color: var(--peri-hi); font: 700 12px/1 var(--sans); font-style: normal; } .next__r b { font: 500 14px/20px var(--sans); } .next__r span { grid-column: 2; color: var(--text2); font: 500 12px/16px var(--sans); }
.next__r a { grid-row: 1 / span 2; grid-column: 3; align-self: center; color: var(--peri-hi); font: 500 12px/16px var(--sans); white-space: nowrap; }
.row--open .row__t b, .row--open .row__v b { color: var(--text3); }

/* ---------- launch: progress, the handle check, the confirm step ---------- */
.prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.prog li { display: grid; gap: 6px; color: var(--text3); font: 700 12px/16px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prog li::before { content: ""; height: 4px; border-radius: 2px; background: var(--bg3s); transition: background-color 150ms var(--ease); }
.prog .is-done { color: var(--text2); } .prog .is-done::before { background: var(--green); } .prog .is-on { color: var(--text); } .prog .is-on::before { background: var(--peri); }
.step--done { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 16px; } .step--done .step__n { background: var(--green-t); color: var(--green); } .step--done .step__n svg { width: 12px; height: 12px; }
.step--done .step__h h2 { font-size: 16px; line-height: 24px; letter-spacing: -.01em; white-space: nowrap; } .step--done p { color: var(--text2); font: 500 14px/20px var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); animation: fadein 150ms var(--ease-out); }
.hc__top { display: flex; align-items: center; gap: 10px; min-width: 0; } .hc__top b { font: 500 16px/20px var(--sans); } .hc__top small { display: block; color: var(--text2); font: 500 12px/16px var(--sans); } .hc__top .mini { margin-left: auto; flex: none; }
.at[aria-invalid="true"] { border-color: var(--red); } .bad { color: var(--red); font: 500 12px/16px var(--sans); }
.confirm { display: grid; gap: 16px; padding: 16px; border: 1px solid rgba(96, 106, 247, .5); border-radius: var(--r-lg); background: var(--bg); }
.confirm__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .confirm__h h2 { font-size: 24px; line-height: 28px; }
.confirm h3 { color: var(--text2); font: 700 12px/16px var(--sans); }
.sum { display: grid; gap: 8px; } @media (min-width: 640px) { .sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sum .tile b { font-size: 16px; line-height: 24px; }
/* what the wallet signs: one approval, a short timeline of transactions */
.txs { display: grid; margin: 0; padding: 0; list-style: none; }
.tx { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; padding-bottom: 16px; } .tx:last-child { padding-bottom: 0; }
.tx::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--bg3s); } .tx:last-child::before { display: none; }
.tx.is-ok::before { background: var(--green); transition: background-color 300ms var(--ease); }
.tx__n { grid-row: span 3; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg3s); color: var(--text); font: 700 12px/1 var(--sans); } .tx__n svg { width: 14px; height: 14px; }
.tx.is-ok .tx__n { border-color: transparent; background: var(--green-t); color: var(--green); } .tx.is-bad .tx__n { border-color: transparent; background: var(--red-t); color: var(--red); } .tx.is-wait { opacity: .55; }
.tx.is-on .tx__n { border-color: transparent; background: var(--peri-t); color: var(--peri-hi); } .tx.is-on .tx__n::after { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border: 2px solid transparent; border-top-color: var(--peri); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tx__t { color: var(--head); font: 500 16px/24px var(--sans); padding-top: 2px; } .tx__d { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 56ch; } .tx__d b { color: var(--text); font-weight: 500; }
.tx__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .tx__m .badge { font-weight: 500; } .tx__m a { color: var(--peri-hi); font: 500 12px/20px var(--mono); }
.who2 { display: grid; gap: 10px; } .who2 .addr > span { width: 132px; }
.addrw { display: grid; gap: 4px; } .addrw small { padding-left: 12px; color: var(--text2); font: 500 12px/16px var(--sans); }
.confirm__lede { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 62ch; }
.hc__top small:first-child { color: var(--text2); } .hc__top > div { flex: 1; min-width: 0; } .hc__top small { overflow-wrap: anywhere; }
.chk { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg2); font: 500 14px/20px var(--sans); cursor: pointer; transition: border-color 150ms var(--ease); }
.chk:hover { border-color: rgba(203, 208, 235, .2); } .chk:has(:checked) { border-color: rgba(33, 201, 94, .5); } .chk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--peri); }
.confirm__go { display: grid; gap: 8px; } @media (min-width: 640px) { .confirm__go { grid-template-columns: minmax(0, 1fr) auto; } }
.done { display: grid; gap: 12px; justify-items: start; padding: 20px; border: 1px solid rgba(33, 201, 94, .4); border-radius: var(--r-lg); background: radial-gradient(420px 220px at 0% 0%, rgba(33, 201, 94, .10), transparent 70%), var(--bg); }
.done h2 { font-size: clamp(28px, 6vw, 40px); line-height: 1; } .done p { color: var(--text2); font: 500 14px/20px var(--sans); max-width: 40em; } .done__a { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- small things ---------- */
[data-odo] { font-variant-numeric: tabular-nums; }
.mini .ok, .chip .ok { display: none; } .is-done .ok { display: block; animation: pop 120ms var(--ease-out); } .is-done .no { display: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* coin page: the line every coin page must carry, straight under the title */
.chead__by { margin-top: 6px; color: var(--text2); font: 500 14px/20px var(--sans); } .chead__by b { color: var(--text); font-weight: 500; }
/* home loop: one caption line under each card */
.loop__step { grid-template-rows: auto 1fr auto; } .loop__c { color: var(--text2); font: 500 13px/18px var(--sans); min-height: 36px; }
/* cashtag wall: what the number counts, said right under it */
.wall__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .wall__add { max-width: 320px; }
@media (min-width: 900px) { .wall__grid { align-items: center; } .wall__grid .slot { height: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .mf__v::after, .mf__h::after { opacity: 1; } .tap__tag::after { opacity: .5; transform: none; }
  .tx.is-on .tx__n::after { border-color: var(--peri); }      /* a full ring instead of a spinner */
  .skel--pulse, .lg__skel .skel { opacity: .7; }
}

/* ===== xomopay product layer (Web Developer). Appended after the UI Designer's ui/xomo-ui.css + ui/xomo-ui-2.css by
   scripts/build_css.py. Only what the product needs beyond the mocks: the shell wrapper, dialogs, admin, the momentum bits. ===== */
[hidden] { display: none !important; }
.mainwrap { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
@media (min-width: 1100px) { .mainwrap { grid-row: 1 / 3; grid-column: 2; } }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a.btn { text-decoration: none; } button { font: inherit; } img { max-width: 100%; }
.chead__img { object-fit: cover; } img.av { object-fit: cover; }
.usd { color: var(--text2); font: 500 12px/16px var(--sans); }
.status { color: var(--text2); font: 500 12px/16px var(--sans); min-height: 16px; overflow-wrap: anywhere; } .status a, .lnk { color: var(--peri-hi); }
.status.bad { color: var(--red); } .err { color: var(--red); font: 500 13px/18px var(--sans); min-height: 18px; }
.warn { padding: 10px 12px; border-radius: var(--r-sm); background: rgba(255, 199, 79, .08); color: var(--warn); font: 500 13px/18px var(--sans); }
.brk { overflow-wrap: anywhere; word-break: break-all; }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 16, .72); backdrop-filter: blur(4px); }
.modal__box { display: grid; gap: 10px; width: min(360px, 100%); padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); } .modal__box .btn img { border-radius: 4px; }
input[type=file].in { height: auto; padding: 9px 12px; font-size: 14px; } input[type=file]::file-selector-button { margin-right: 10px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); background: var(--bg3s); color: var(--text); font: 700 12px/12px var(--sans); cursor: pointer; }
/* momentum: the counter line and the repost / post pair. numbers are real or zero */
.mo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text2); font: 500 13px/18px var(--sans); } .mo b { color: var(--text); font-weight: 700; } .mo .sep { color: var(--text3); }
.wall__n .mo { margin-top: -2px; } .wall__msg { font: 500 12px/16px var(--sans); min-height: 16px; } .wall__msg.is-ok { color: var(--green); } .wall__msg.is-bad { color: var(--red); }
.wall .post { align-content: start; } .wall a.post:hover { border-color: rgba(96, 106, 247, .6); } .wall .post__t { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wall--coin .wall__n > b { font-size: clamp(44px, 8vw, 64px); }
.post__t { overflow-wrap: anywhere; } a.post { display: grid; }
.note b { color: var(--text); }
/* admin: dense and private */
.adm { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px; font: 500 14px/20px var(--sans); } .adm a, .qrow a { color: var(--peri-hi); } .adm .mono, .qrow .mono { overflow-wrap: anywhere; }
.adm details summary { cursor: pointer; color: var(--text2); } .adm details .mono { display: block; margin-top: 8px; font-size: 12px; line-height: 1.6; } .adm .dl dd { font-family: var(--sans); }
.qrow { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 12px; font: 500 14px/20px var(--sans); } .qrow__amt b { font-size: 18px; } .qrow__nums { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text2); }
.qrow .sig, .tests input, .adm input { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); color: var(--text); font: 500 13px/18px var(--mono); min-width: 0; max-width: 100%; } .qrow .sig { width: min(420px, 100%); margin: 0 8px; }
.tests, .pins { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; } .tests label, .pins label { display: grid; gap: 4px; color: var(--text2); font: 500 12px/16px var(--sans); min-width: 0; }
.admlogin { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; max-width: 420px; } .admlogin label { display: grid; gap: 6px; flex: 1; min-width: 200px; font: 500 14px/20px var(--sans); }
/* a coin card is a post whose title is the link; its controls sit above the stretched link */
.post--link { position: relative; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); } .post--link:hover { border-color: rgba(96, 106, 247, .6); background: rgba(203, 208, 235, .03); }
.post__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .post--link .post__a, .post--link [data-copy] { position: relative; z-index: 1; }
.tok__ca .mini { flex: none; } .tok__act .btn { min-width: 0; }
.tok__act .btn { font-size: 14px; padding: 0 10px; }
.money .usd { font: inherit; }
.wall__n .mo b { font: 700 13px/18px var(--sans); letter-spacing: 0; color: var(--text); }
.wall--coin { grid-template-columns: minmax(0, 1fr) !important; } @media (min-width: 900px) { .wall--coin { grid-template-columns: 240px minmax(0, 1fr) !important; } .wall--coin .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.launch [hidden], .confirm [hidden] { display: none !important; } .step .btn { justify-self: start; }
@container (min-width: 720px) { .lg--burns .lg__head, .lg--burns .lg__row > summary { grid-template-areas: "time who tx x"; } }
.acc__b code, .mf__s code { font: 500 12px/16px var(--mono); overflow-wrap: anywhere; } .acc__b a, .mf__proof a { color: var(--peri-hi); }
@media (max-width: 480px) { .tok__act { grid-template-columns: minmax(0, 1fr); } }
.usdsep:has(+ .usd:empty) { display: none; } .wall--coin .mo .dim { display: none; }