/* Firstprint website styles
   Palette: ink navy surfaces; a five-step outcome scale from Crash (red) to Moon (gold).
   Type: Inter everywhere (variable, 400-700), the system font only as a fallback. */

/* Brand "The Ladder": night indigo surfaces, the five outcome colours as the palette
   (Moon gold, Up green, Flat grey, Down orange, Crash red), signal indigo for focus and
   active states, and Moon gold for the main call to action. */
:root {
  --bg: #09090b;
  --surface: #111114;
  --surface-2: #151519;
  --raised: #1d1d22;
  --line: #25252b;
  --line-strong: #35353e;
  --text: #f5f5f7;
  --muted: #a1a1aa;
  --label: #e4e4e7;
  --field: #0c0c0f;
  --field-line: #3a3a43;
  --focus: #4da3ff;
  --brand: #0a84ff;
  --brand-2: #ffd60a;
  /* Main buttons: white on dark, black on light. Blue is kept for links only. */
  --cta: #f5f5f7;
  --on-cta: #09090b;
  --gold: #ffd60a;
  --on-gold: #1d1d1f;
  --on-solid: #09090b;
  --glow: rgba(10, 132, 255, 0.08);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -20px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 56px -28px rgba(0, 0, 0, 0.95);

  --crash: #ff453a;
  --down: #ff9f0a;
  --flat: #8e8e93;
  --up: #30d158;
  --moon: #7dff3a;
  --warn: #ffd60a;

  /* SF Pro on Apple devices (Display for large sizes is picked automatically), Inter elsewhere. */
  --display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --page: 1200px;

  color-scheme: dark;
}

/* Light theme: chosen in the app (data-theme="light"), or the device setting when nothing is chosen. */
:root[data-theme='light'] {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fbfbfd;
    --raised: #ececf0;
    --line: #e3e3e8;
    --line-strong: #c9c9d1;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --label: #1d1d1f;
    --field: #ffffff;
    --field-line: #c7c7cc;
    --focus: #0071e3;
    --brand: #0071e3;
    --brand-2: #a2670a;
    --cta: #1d1d1f;
    --on-cta: #ffffff;
    --gold: #ffcc00;
    --on-gold: #1d1d1f;
    --on-solid: #ffffff;
    --glow: rgba(0, 113, 227, 0.06);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.05), 0 20px 48px -24px rgba(0, 0, 0, 0.22);
    --crash: #d70015;
    --down: #c93400;
    --flat: #6e6e73;
    --up: #248a3d;
    --moon: #3f9c00;
    --warn: #a2670a;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #fbfbfd;
    --raised: #ececf0;
    --line: #e3e3e8;
    --line-strong: #c9c9d1;
    --text: #1d1d1f;
    --muted: #6e6e73;
    --label: #1d1d1f;
    --field: #ffffff;
    --field-line: #c7c7cc;
    --focus: #0071e3;
    --brand: #0071e3;
    --brand-2: #a2670a;
    --cta: #1d1d1f;
    --on-cta: #ffffff;
    --gold: #ffcc00;
    --on-gold: #1d1d1f;
    --on-solid: #ffffff;
    --glow: rgba(0, 113, 227, 0.06);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.05), 0 20px 48px -24px rgba(0, 0, 0, 0.22);
    --crash: #d70015;
    --down: #c93400;
    --flat: #6e6e73;
    --up: #248a3d;
    --moon: #3f9c00;
    --warn: #a2670a;
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 50% -260px, var(--glow), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  font: 15px/1.55 var(--body);
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--r-sm);
  z-index: 100;
}
.skip:focus {
  left: 8px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--muted);
}

/* Outcome name, colored by its bucket */
.oc {
  color: var(--c);
  font-family: var(--display);
  font-weight: 600;
}

.loading {
  padding: 64px 0;
  text-align: center;
  color: var(--muted);
}

/* ---------------------------------------------------------------- Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.022em;
  text-decoration: none;
  white-space: nowrap;
}
/* The mark is the outcome ladder in miniature: Moon on top, Crash at the bottom. */
.wordmark .mark {
  display: inline-grid;
  gap: 2px;
  width: 16px;
  margin-right: 8px;
}
.wordmark .mark i {
  display: block;
  height: 3px;
  border-radius: 2px;
}
.wordmark .mark i:nth-child(1) { background: var(--moon); width: 100%; }
.wordmark .mark i:nth-child(2) { background: var(--up); width: 80%; }
.wordmark .mark i:nth-child(3) { background: var(--flat); width: 60%; }
.wordmark .mark i:nth-child(4) { background: var(--down); width: 80%; }
.wordmark .mark i:nth-child(5) { background: var(--crash); width: 100%; }

.wallet-chip {
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--raised);
  text-decoration: none;
  white-space: nowrap;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--up);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up);
  animation: pulse 1.6s ease-in-out 6;
}
@keyframes pulse {
  50% { opacity: 0.35; }
}

.wallet-options {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.wallet-option {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
  text-align: left;
  font-weight: 600;
}
.wallet-option:hover:not(:disabled) {
  border-color: var(--focus);
}
.wallet-option img {
  border-radius: 6px;
}
.wallet-option .muted {
  font-size: 13px;
  font-weight: 400;
}
.wallet-fallback {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--line);
  font-family: var(--display);
}
.no-wallet {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.no-wallet p {
  margin: 0 0 10px;
}
.wallet-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallet-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.wallet-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.wallet-list .addr {
  font-family: var(--display);
  font-weight: 600;
}

.radar td {
  vertical-align: top;
}
.radar-sym {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
}
.radar-title {
  display: block;
  font-size: 13px;
  color: var(--muted);
  max-width: 46ch;
}
.table td a.radar-title {
  font-family: var(--body);
  font-weight: 400;
}
a.radar-title:hover {
  color: var(--text);
}

.nav {
  display: flex;
  gap: 4px;
}
.nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.nav a:hover {
  color: var(--text);
}
.nav a[aria-current='page'] {
  color: var(--text);
  background: var(--raised);
}

.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.points {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

.btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover {
  background: var(--raised);
}
.btn-solid {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.btn-solid:hover {
  background: color-mix(in srgb, var(--text) 85%, var(--bg));
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --------------------------------------------------------------- Demo bar */

.demo-bar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--warn) 9%, var(--bg));
}
.demo-bar-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
}
.demo-bar p {
  margin: 0;
  flex: 1 1 280px;
}
.demo-bar .btn {
  padding: 4px 12px;
  font-size: 13px;
}

/* -------------------------------------------------------------- Page frame */

main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 28px 20px 96px;
  min-height: 70vh;
}
main:focus {
  outline: none;
}

.footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 24px 20px 40px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.footer p {
  margin: 0;
}

.page-title {
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.025em;
}
.page-lede {
  color: var(--muted);
  margin: 6px 0 24px;
  max-width: 62ch;
}

/* ---------------------------------------------------------- Featured market */

.featured {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 28px 0 36px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.featured h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.featured h1 .countdown {
  display: block;
  color: var(--warn);
}
.featured .lede {
  color: var(--muted);
  margin: 14px 0 20px;
  max-width: 46ch;
}
.featured .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mini-ladder {
  display: grid;
  gap: 6px;
}
.mini-rung {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  font-size: 14px;
}
.mini-rung::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share);
  background: color-mix(in srgb, var(--c) 22%, transparent);
}
.mini-rung > * {
  position: relative;
}
.mini-rung b {
  font-family: var(--display);
  color: var(--c);
  white-space: nowrap;
}
.mini-rung .pct {
  font-family: var(--display);
  font-weight: 600;
}

/* ----------------------------------------------------------------- Toolbar */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.tabs button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
}
.tabs button[aria-selected='true'] {
  background: var(--raised);
  color: var(--text);
}
.tabs .count {
  font-weight: 500;
  margin-left: 4px;
  opacity: 0.8;
}

.select {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.select select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}

/* -------------------------------------------------------------- Market grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 120ms;
}
.card:hover {
  border-color: color-mix(in srgb, var(--text) 30%, var(--line));
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.sym {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.exch {
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.card-name {
  color: var(--muted);
  font-size: 14px;
  margin-top: -6px;
}

.strip {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
  background: var(--raised);
}
.strip span {
  background: var(--c);
  min-width: 3px;
}
.strip.empty span {
  opacity: 0.25;
}

.card-lead {
  font-size: 14px;
  min-height: 21px;
}
.card-lead b {
  color: var(--c);
  font-family: var(--display);
}

.card-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: auto;
}
.card-foot .when {
  color: var(--text);
}

.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.empty .btn {
  margin-top: 12px;
}

/* ------------------------------------------------------------- Market page */

.market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}

.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 14px;
}
.back:hover {
  color: var(--text);
}

.m-head {
  margin-bottom: 20px;
}
.m-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.m-title .sym {
  font-size: clamp(28px, 3.6vw, 38px);
  letter-spacing: -0.022em;
}
.m-question {
  font-size: 18px;
  margin: 8px 0 6px;
  max-width: 60ch;
}
.m-status {
  color: var(--muted);
  margin: 0;
}
.m-status strong {
  color: var(--text);
  font-weight: 600;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 18px 0 22px;
  padding: 0;
}
.stats div {
  display: flex;
  flex-direction: column;
}
.stats dt {
  font-size: 13px;
  color: var(--muted);
}
.stats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
}

.chart {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px 14px 10px;
  margin-bottom: 22px;
}
.chart-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 8px;
}
.chart-head .now {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
}
.chart svg {
  display: block;
  width: 100%;
  height: 180px;
}
.chart-empty {
  height: 120px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  padding: 0 20px;
}

/* The outcome ladder: Moon at the top, Crash at the bottom. */

.ladder {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
}
.ladder-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px 96px;
  gap: 12px;
  padding: 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.ladder-head span:not(:first-child) {
  text-align: right;
}

.rung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px 96px;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.rung::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  transition: width 400ms ease;
}
.rung > * {
  position: relative;
}
.rung:not(:disabled):hover {
  border-color: var(--c);
}
.rung:disabled {
  cursor: default;
}
.rung[aria-pressed='true'] {
  border-color: var(--c);
  box-shadow: inset 3px 0 0 var(--c);
}

.rung-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rung-name b {
  font-family: var(--display);
  font-size: 19px;
  color: var(--c);
  line-height: 1.2;
}
.rung-name small {
  color: var(--muted);
  font-size: 13px;
}
.rung .num {
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
}
.rung .num small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 2px;
  font-family: var(--body);
}
.tag-you {
  background: var(--text);
  color: var(--bg);
}
.tag-now {
  background: var(--c);
  color: var(--bg);
}

.ladder.settled .rung:not(.won) {
  opacity: 0.5;
}
.rung.won {
  border-color: var(--c);
  border-width: 2px;
  padding: 13px 15px;
}

/* Sections under the ladder */

.section {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.section h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
.section p {
  margin: 0 0 10px;
  max-width: 68ch;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.facts dt {
  font-size: 13px;
  color: var(--muted);
}
.facts dd {
  margin: 0;
  font-weight: 600;
}

.rules {
  margin: 0;
  padding-left: 20px;
  max-width: 68ch;
}
.rules li {
  margin-bottom: 8px;
}

.activity {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.activity b {
  color: var(--c);
  font-family: var(--display);
}

/* ------------------------------------------------------------- Trade panel */

.trade {
  position: sticky;
  top: 76px;
}

.trade-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 18px;
}
.trade-card h2 {
  font-size: 20px;
  margin-bottom: 12px;
}

.picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.picker button {
  border: 1px solid var(--line);
  background: var(--raised);
  border-radius: var(--r-sm);
  padding: 8px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.picker button b {
  font-family: var(--display);
  font-size: 14px;
  color: var(--c);
}
.picker button small {
  font-size: 12px;
  color: var(--muted);
}
.picker button[aria-checked='true'] {
  background: var(--c);
  border-color: var(--c);
}
.picker button[aria-checked='true'] b,
.picker button[aria-checked='true'] small {
  color: var(--bg);
}

.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

.stake-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 0 14px;
}
.stake-input:focus-within {
  border-color: var(--focus);
}
.stake-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  padding: 8px 0;
  outline: none;
}
.stake-input span {
  color: var(--muted);
}

.chips {
  display: flex;
  gap: 6px;
  margin: 8px 0 16px;
}
.chips button {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
}
.chips button:hover {
  background: var(--raised);
}

.summary {
  margin: 0 0 16px;
  display: grid;
  gap: 6px;
}
.summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.summary dt {
  color: var(--muted);
}
.summary dd {
  margin: 0;
  font-weight: 600;
}
.summary .big dd {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--c);
}

.cta {
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  padding: 14px;
  font-weight: 600;
  font-size: 16px;
  background: var(--c, var(--text));
  color: var(--bg);
}
.cta:disabled {
  opacity: 0.55;
  cursor: default;
}

.fine {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}
.form-error {
  color: var(--crash);
  font-size: 14px;
  margin: 10px 0 0;
  min-height: 1em;
}

.position {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.position b {
  color: var(--c);
  font-family: var(--display);
}

.mobile-bar,
.sheet-close {
  display: none;
}

/* -------------------------------------------------------------- Tables */

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.table .right {
  text-align: right;
}
.table tr.me td {
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.rank {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  width: 48px;
}
.profit-pos {
  color: var(--up);
  font-weight: 600;
}
.profit-neg {
  color: var(--crash);
  font-weight: 600;
}
.table td a {
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
}
.table td b {
  color: var(--c);
  font-family: var(--display);
}

.balance {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 20px 0 28px;
}
.balance .amount {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 48px);
  letter-spacing: -0.022em;
  line-height: 1;
}

/* ------------------------------------------------------------------ Modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(5, 9, 16, 0.6);
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.modal h2 {
  font-size: 20px;
  margin-bottom: 4px;
}
.modal form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.modal input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.modal input:focus {
  border-color: var(--focus);
  outline: none;
}
.modal .switch {
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  color: var(--text);
}

/* ------------------------------------------------------------------ Toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  z-index: 60;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
  max-width: calc(100vw - 40px);
  text-align: center;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
#toast.error {
  background: var(--crash);
  color: #fff;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
  .featured {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 12px;
  }

  .market-layout {
    grid-template-columns: 1fr;
  }

  /* Trade panel becomes a bottom sheet */
  .trade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 40;
    transform: translateY(105%);
    transition: transform 220ms ease;
    max-height: 88vh;
    overflow: auto;
  }
  .trade.open {
    transform: none;
  }
  .trade-card {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    border-bottom: 0;
  }
  .sheet-close {
    display: block;
    float: right;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    padding: 4px 0;
  }
  .sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(5, 9, 16, 0.5);
  }

  .mobile-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 12px;
    align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .mobile-bar p {
    margin: 0;
    flex: 1;
    font-size: 14px;
    color: var(--muted);
  }
  .mobile-bar .cta {
    width: auto;
    padding: 12px 20px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }
  .topbar-inner {
    gap: 12px;
    padding: 8px 14px;
    flex-wrap: wrap;
  }
  .nav {
    order: 3;
    width: calc(100% + 20px);
    margin: 0 -10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav a {
    white-space: nowrap;
  }
  .wallet-chip {
    display: none;
  }
  main {
    padding: 18px 14px 110px;
  }
  .demo-bar-inner {
    padding: 8px 14px;
  }
  .ladder-head {
    display: none;
  }
  .rung {
    grid-template-columns: minmax(0, 1fr) 58px 64px;
    gap: 8px;
    padding: 12px;
  }
  .rung .pool-col {
    display: none;
  }
  .table .hide-sm {
    display: none;
  }
}

/* Reduced motion switches animation off everywhere, except the trending stack, which has its own gentle version. */
@media (prefers-reduced-motion: reduce) {
  *:not(.hero-slide),
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------ Live test & admin */

.tag-test {
  background: transparent;
  color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent);
  margin-left: 4px;
}
.m-venues {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.m-venues .tag-test {
  margin-left: 0;
}

.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.admin-form input:not([type='checkbox']),
.admin-form select,
.admin-detect input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 9px 10px;
}
.venues {
  grid-column: 1 / -1;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
}
.admin-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 14px;
}
.suggested .btn {
  padding: 4px 12px;
  font-size: 13px;
}
.admin-list {
  display: grid;
  gap: 10px;
}
.admin-detect {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.table-scroll {
  overflow-x: auto;
}
.checks td small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.checks td.pass {
  color: var(--up);
  font-weight: 600;
}
.checks td.fail {
  color: var(--crash);
  font-weight: 600;
}
.footer a {
  color: var(--muted);
}
code {
  background: var(--raised);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
@media (max-width: 640px) {
  .admin-detect {
    grid-template-columns: 1fr;
  }
}

/* Admin: manual markets */
.admin-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 9px 10px;
  font: inherit;
  resize: vertical;
}
.admin-result {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: end;
}
.admin-result .admin-list,
.admin-preview {
  grid-column: 1 / -1;
}
.admin-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.admin-preview p {
  margin: 0 0 6px;
}
.admin-row-actions {
  white-space: nowrap;
}
.admin-row-actions .btn {
  margin-left: 6px;
}
.m-note {
  color: var(--muted);
  margin: 0 0 10px;
  max-width: 62ch;
}
.admin-result > div:first-child {
  grid-column: 1 / -1;
}

/* Sign-in popup */
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 4px;
  color: var(--muted);
  font-size: 13px;
}
.or::before,
.or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.google-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
}
.code-input {
  font-size: 28px;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.dev-code {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
}
.modal .switch:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

/* Waking-up notice (free hosting sleeps when idle) */
.wake-bar {
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.wake-bar p {
  margin: 0;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
}

/* Hero for admin-run markets: short headline, countdown as a pill */
.closing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
}
.closing-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up);
  animation: pulse 1.6s ease-in-out 6;
}

/* Market timeline */
.timeline {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.timeline li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  opacity: 0.7;
}
.timeline li.done,
.timeline li.now {
  opacity: 1;
}
.timeline li.now {
  border-color: var(--up);
  box-shadow: 0 0 0 1px var(--up) inset;
}
.timeline .step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  margin-bottom: 6px;
}
.timeline .done .step-dot {
  background: var(--up);
}
.timeline .now .step-dot {
  background: var(--up);
  animation: pulse 1.6s ease-in-out 6;
}
.timeline .muted {
  font-size: 13px;
}
@media (max-width: 640px) {
  /* Stay on one row on phones so the outcome buttons aren't pushed off the screen. */
  .timeline {
    gap: 6px;
    margin: 14px 0 16px;
  }
  .timeline li {
    padding: 10px 9px 8px;
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word;
  }
  .timeline .muted {
    font-size: 12px;
  }
  .timeline .step-dot {
    margin-bottom: 4px;
  }
}
.share-btn {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 14px;
}

/* ------------------------------------------------------- Playful layer
   Outcome icons, the daily gift, friendlier steps, closing-soon cards,
   confetti and the phone tab bar. */

.oc-ico {
  display: inline-block;
  margin-right: 0.3em;
  font-size: 0.95em;
  line-height: 1;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}

/* Daily points: a small gift button next to the balance while today's points are unclaimed. */
.gift {
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn) 14%, var(--bg));
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  animation: wiggle 3.2s ease-in-out 6;
}
.gift:hover {
  background: color-mix(in srgb, var(--warn) 24%, var(--bg));
}
@keyframes wiggle {
  0%, 86%, 100% { transform: rotate(0); }
  89% { transform: rotate(-6deg); }
  92% { transform: rotate(6deg); }
  95% { transform: rotate(-3deg); }
}

/* Outcome picker: a big icon on each choice, and a little lift on the chosen one. */
.picker button {
  padding: 10px 2px 8px;
  transition: transform 120ms ease, background 120ms ease;
}
.picker button:hover {
  transform: translateY(-2px);
}
.pick-ico {
  font-size: 22px;
  line-height: 1.1;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.picker button[aria-checked='true'] {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 35%, transparent);
}

/* Three steps instead of a wall of text. */
.steps {
  list-style: none;
  padding: 0;
  margin: 14px 0 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  counter-increment: step;
}
.steps li::after {
  content: counter(step);
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--line);
}
.step-ico {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.steps b {
  font-family: var(--display);
  font-size: 18px;
}
.steps p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.full-rules summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  padding: 6px 0;
}
.full-rules summary:hover {
  color: var(--text);
}

/* Markets that close within 15 minutes get a glowing edge and a tag. */
.card {
  position: relative;
  transition: border-color 120ms, transform 120ms;
}
.card:hover {
  transform: translateY(-2px);
}
.card.soon {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--warn) 20%, transparent), 0 8px 26px color-mix(in srgb, var(--warn) 10%, transparent);
}
.soon-tag {
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--warn);
  color: #1a1300;
}

.empty-art {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 8px;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.empty strong {
  color: var(--text);
}

/* Confetti after a prediction or a daily claim. */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  overflow: hidden;
}
#confetti i {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: confetti 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d) forwards;
}
#confetti i:nth-child(3n) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  35% { opacity: 1; transform: translate(calc(var(--x) * 0.7), -26vh) rotate(calc(var(--r) * 0.5)); }
  100% { opacity: 0; transform: translate(var(--x), 48vh) rotate(var(--r)); }
}

/* The phone tab bar: hidden on wider screens, where the top nav has room. */
.tabbar {
  display: none;
}
.demo-bar .short {
  display: none;
}

/* Phones and tablets in portrait use the bottom tab bar; the top bar keeps the logo and account. */
@media (max-width: 900px) {
  .nav {
    display: none;
  }
  .topbar-inner {
    flex-wrap: nowrap;
  }
  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 32;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    /* Solid rather than blurred: at 94% the blur barely showed, and it re-blurred the page on every scroll frame. */
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 4px;
    border-radius: var(--r-sm);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  .tabbar svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tabbar a[aria-current='page'] {
    color: var(--text);
    background: var(--raised);
  }
  /* The "Make a prediction" bar sits just above the tab bar. */
  .mobile-bar {
    bottom: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: 10px;
  }
  main {
    padding-bottom: 170px;
  }
  #toast {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .demo-bar .long {
    display: none;
  }
  .demo-bar .short {
    display: inline;
  }
  .demo-bar-inner {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .demo-bar p {
    flex: 1 1 auto;
    font-size: 13px;
  }
  .demo-bar .btn {
    white-space: nowrap;
    padding: 4px 10px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .steps li {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    padding: 14px 16px;
  }
  .step-ico {
    grid-row: span 2;
    margin: 2px 0 0;
  }
  .steps p {
    grid-column: 2;
  }
  .gift {
    padding: 5px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift,
  .card:hover,
  .picker button:hover {
    animation: none;
    transform: none;
  }
}

/* ---------------------------------------------------------- Dashboard */

.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.count-inline {
  font-size: 0.7em;
  font-weight: 600;
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 0;
}
.stat-tile {
  position: relative;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.stat-tile dt {
  font-size: 13px;
  color: var(--muted);
}
.stat-tile dd {
  margin: 4px 0 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat-tile p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.stat-tile p a {
  color: var(--text);
}
.tile-btn {
  margin-top: 10px;
  padding: 5px 12px;
  font-size: 13px;
}
.meter {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--raised);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--up);
}

/* Points over time: one series, a zero line, a crosshair dot and tooltip on hover. */
.pchart {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.pchart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
.pchart-plot {
  position: relative;
  height: 160px;
  cursor: crosshair;
  touch-action: pan-y;
}
.pchart-plot svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pchart-zero {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.pchart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pchart-line.up { stroke: var(--up); }
.pchart-line.down { stroke: var(--crash); }
.pchart-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.pchart-tip {
  position: absolute;
  transform: translate(14px, -50%);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--raised);
  border: 1px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.pchart-tip.flip {
  transform: translate(calc(-100% - 14px), -50%);
}
.pchart-tip.low {
  transform: translate(14px, calc(-100% - 8px));
}
.pchart-tip.flip.low {
  transform: translate(calc(-100% - 14px), calc(-100% - 8px));
}

/* Record per outcome: a thin bar of the share of picks that won. */
.orec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.orec li {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.orec-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--raised);
  overflow: hidden;
}
.orec-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--c);
}
.orec-num {
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stat-tile dd {
    font-size: 22px;
  }
  .orec li {
    grid-template-columns: 82px 1fr auto;
    gap: 8px;
  }
}

/* ---------------------------------------------------------- Earn, onboarding, TestFPT */

.faucet-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
.faucet-btn:hover {
  border-color: color-mix(in srgb, var(--up) 50%, var(--line));
}

.howto,
.steplist {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: howto;
}
.howto li {
  position: relative;
  padding-left: 36px;
  counter-increment: howto;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.howto li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--raised);
}
.howto .muted,
.steplist .muted {
  font-size: 14px;
}
.steplist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
}
.steplist li > div {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.steplist li > div .btn {
  margin-top: 4px;
}
.step-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
}
.steplist li.done .step-check {
  background: var(--up);
  border-color: var(--up);
  color: var(--bg);
}
.steplist li.done b {
  text-decoration: line-through;
  color: var(--muted);
}
.copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}
.copy-row code {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--raised);
  overflow-wrap: anywhere;
}
.copy-row input {
  flex: 1 1 220px;
  min-width: 0;
}
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.start-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}
.start-card h2 {
  font-size: 19px;
  margin: 0 0 2px;
}
.start-card p {
  margin: 0;
}
.start-actions {
  display: flex;
  gap: 8px;
}

.claim-card {
  display: flex;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 12%, var(--surface)), var(--surface));
}
.claim-amount {
  display: grid;
}
.claim-amount b {
  font-family: var(--display);
  font-size: clamp(30px, 4.5vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.claim-amount small {
  font-size: 0.45em;
  color: var(--muted);
}
.claim-side {
  display: grid;
  gap: 8px;
  justify-items: start;
  flex: 1 1 280px;
  max-width: 420px;
}
.claim-side .cta {
  width: 100%;
}
.claim-side .fine {
  margin: 0;
}

.earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.earn-card {
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
}
.earn-card h2 {
  font-size: 18px;
  margin: 0;
}
.earn-card p {
  margin: 0;
}
.inline-form {
  display: flex;
  gap: 8px;
  width: 100%;
}
.inline-form input {
  flex: 1;
  min-width: 0;
}

.tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.task {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.task.is-done {
  opacity: 0.7;
}
.task-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--raised);
  font-size: 20px;
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.task-body {
  display: grid;
  min-width: 0;
}
.task-body small {
  color: var(--muted);
}
.todo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.task-body .task-hint {
  margin-top: 4px;
  color: var(--text-2, var(--muted));
}
.row-edit td {
  background: var(--surface-2, transparent);
}
.row-edit .task-form {
  margin: 4px 0;
}
.row-edit .span-all {
  grid-column: 1 / -1;
  margin: 0;
}
td .row-actions {
  justify-content: flex-end;
  margin-top: 0;
  flex-wrap: nowrap;
}
.task-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.task-done {
  color: var(--up);
  font-weight: 600;
}

.task-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .task {
    grid-template-columns: 36px 1fr;
  }
  .task-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .task-actions .btn {
    flex: 1;
    text-align: center;
  }
  .start-actions {
    width: 100%;
  }
  .start-actions .btn {
    flex: 1;
    text-align: center;
  }
  .faucet-btn {
    padding: 5px 9px;
  }
}
.earn-card .copy-row {
  width: 100%;
}
.save-keys {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}
.save-keys .secret {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* =====================================================================
   Premium layer: icons, surfaces, cards, dashboard, earn and admin.
   Later rules here refine the base components above.
   ===================================================================== */

/* ---------------------------------------------------------------- Icons */

.i {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.17em;
}
.i-fill {
  fill: currentColor;
  stroke: none;
}
.oc-ico,
.pick-ico,
.step-ico,
.task-ico,
.empty-art {
  font-family: inherit;
}
.oc .oc-ico {
  margin-right: 0.28em;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  stroke-width: 2.4;
}

/* -------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  padding: 8px 15px;
  font-size: 14px;
  line-height: 1.2;
  transition: background 120ms, border-color 120ms, transform 120ms, box-shadow 120ms;
}
.btn:hover {
  background: var(--raised);
  border-color: color-mix(in srgb, var(--text) 22%, var(--line-strong));
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn .i {
  width: 16px;
  height: 16px;
}
.btn-solid {
  background: var(--text);
  color: var(--on-solid);
  border-color: var(--text);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--text) 50%, transparent);
}
.btn-solid:hover {
  background: color-mix(in srgb, var(--text) 88%, var(--brand));
  border-color: transparent;
}
.btn-lg {
  padding: 12px 20px;
  font-size: 15px;
}
.btn-sm {
  padding: 5px 11px;
  font-size: 13px;
  gap: 5px;
}
.btn-sm .i {
  width: 14px;
  height: 14px;
}
.btn-danger {
  color: var(--crash);
  border-color: color-mix(in srgb, var(--crash) 35%, var(--line));
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--crash) 12%, transparent);
  border-color: color-mix(in srgb, var(--crash) 60%, var(--line));
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--c, var(--text)) 70%, transparent);
  transition: filter 120ms, transform 120ms;
}
.cta:hover:not(:disabled) {
  filter: brightness(1.06);
}

/* ---------------------------------------------------------------- Inputs */

main input:not([type='checkbox']):not([type='radio']),
main select,
main textarea,
.modal input,
.modal select {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  transition: border-color 120ms, box-shadow 120ms;
}
main input::placeholder,
main textarea::placeholder,
.modal input::placeholder {
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}
main input:not([type='checkbox']):not([type='radio']):focus,
main select:focus,
main textarea:focus,
.modal input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
main input[readonly] {
  color: var(--muted);
}
main .stake-input input:not([type='checkbox']):not([type='radio']),
main .stake-input input:not([type='checkbox']):not([type='radio']):focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 0;
  font-size: 26px;
}
.select select {
  width: auto;
  padding: 7px 10px;
  font-size: 14px;
}
.field-label {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
input[type='checkbox'] {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
}

.input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
main .input-wrap input:not([type='checkbox']) {
  padding-left: 28px;
}

/* --------------------------------------------------------------- Top bar */

.topbar {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: color-mix(in srgb, var(--line) 80%, transparent);
}
.topbar-inner {
  padding: 12px 20px;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: color 120ms, background 120ms;
}
.nav a .i {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}
.nav a[aria-current='page'] {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.nav a[aria-current='page'] .i {
  color: var(--brand);
  opacity: 1;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover {
  background: var(--raised);
}
.chip .i {
  width: 16px;
  height: 16px;
}
.chip-faucet .i {
  color: var(--brand);
}
.points .i {
  color: var(--warn);
}
.points .unit {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.gift {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--line));
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
}
.gift .i {
  color: var(--warn);
}
.wallet-chip {
  padding: 0 12px 0 4px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
}
.account {
  gap: 8px;
}
.account > .btn-solid {
  padding: 9px 16px;
}

/* -------------------------------------------------------------- Avatars */

.avatar {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, hsl(var(--h) 72% 60%), hsl(calc(var(--h) + 50) 68% 42%));
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(var(--size) * 0.44);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 4px 12px -6px hsl(var(--h) 70% 40%);
}
.avatar-img {
  background: var(--surface-2);
  overflow: hidden;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--line), 0 4px 12px -6px rgba(0, 0, 0, 0.5);
}
.avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-sm { --size: 26px; }
.avatar-md { --size: 42px; }
.avatar-lg { --size: 54px; }
.avatar-xl { --size: 68px; }

/* --------------------------------------------------------- Shared pieces */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .dot,
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
  animation: pulse 1.8s ease-in-out 6;
}
.eyebrow .dot {
  background: var(--up);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
  font-family: var(--body);
  vertical-align: middle;
  color: var(--muted);
  background: var(--raised);
}
.pill .i {
  width: 13px;
  height: 13px;
}
.pill-live { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pill-soon { color: var(--brand); background: color-mix(in srgb, var(--brand) 15%, transparent); }
.pill-wait { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.pill-hot { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); }
.pill-done { color: var(--text); background: var(--raised); }
.pill-off { color: var(--muted); background: var(--raised); }
.pill-pts { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); margin-left: auto; }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 3px;
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.section.panel {
  border-top: 1px solid var(--line);
  padding: 20px 22px;
}
.panel-flush {
  padding: 0;
  overflow: hidden;
}
.section.panel-flush {
  padding: 0;
}
.panel-flush > .section-head {
  padding: 18px 22px 14px;
  margin: 0;
}
.panel-flush .table th:first-child,
.panel-flush .table td:first-child {
  padding-left: 22px;
}
.panel-flush .table th:last-child,
.panel-flush .table td:last-child {
  padding-right: 22px;
}
.panel-flush .table tr:last-child td {
  border-bottom: 0;
}
.panel-flush .pad {
  padding: 0 22px 20px;
  margin: 0;
}
.panel-alert {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 7%, var(--surface-2)), var(--surface));
}

.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: 19px;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.section-head p {
  margin: 3px 0 0;
  font-size: 14px;
  max-width: 70ch;
}
.section-head .head-action {
  margin-left: auto;
}
.section-ico,
.page-ico,
.card-ico,
.tile-ico,
.todo-ico,
.start-ico,
.claim-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--c, var(--brand));
  background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--brand)) 22%, transparent);
}
.section-ico .i,
.card-ico .i,
.tile-ico .i,
.todo-ico .i {
  width: 18px;
  height: 18px;
}
.section-head-tight {
  margin: 34px 0 14px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 4px 0 22px;
}
.page-head .page-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.page-head .page-ico .i {
  width: 26px;
  height: 26px;
}
.page-head .page-lede {
  margin-bottom: 0;
}

.empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  border-radius: var(--r-lg);
  padding: 44px 20px;
}
.empty-art {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  margin-bottom: 12px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.empty-art .i {
  width: 26px;
  height: 26px;
}
.fine .switch,
.fine a {
  color: var(--text);
}
.fine .i {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------- Featured market */

.featured {
  position: relative;
  padding: 30px 32px;
  margin: 6px 0 8px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(600px 300px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(500px 280px at 100% 100%, color-mix(in srgb, var(--up) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.featured-main {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.hero-token {
  display: flex;
  align-items: center;
  gap: 16px;
}
.featured h1 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1;
}
.featured .h1-soft {
  color: var(--muted);
  font-weight: 600;
}
.hero-name {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.featured .lede {
  margin: 0;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.hero-facts > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.hero-facts .i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  color: var(--brand);
}
.hero-facts dt {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hero-facts dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
}
.featured .actions {
  margin-top: 4px;
}

.mini-ladder {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 45%, var(--surface));
  gap: 7px;
}
.mini-head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  padding: 0 4px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mini-rung {
  grid-template-columns: 100px 1fr auto;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.mini-rung::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 12%, transparent));
}
.mini-rung b {
  display: inline-flex;
  align-items: center;
}

/* -------------------------------------------------------- Toolbar & tabs */

.tabs {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.tabs button {
  padding: 7px 15px;
  transition: background 120ms, color 120ms;
}
.tabs button[aria-selected='true'] {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tabs .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 12px;
  margin-left: 6px;
}
.select .i {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------- Market cards */

.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-lg);
  border-color: var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms, box-shadow 160ms;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}
.card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.card-title {
  display: grid;
  min-width: 0;
}
.card .sym {
  font-size: 18px;
}
.card-name {
  margin: 2px 0 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-lead {
  font-size: 14px;
  min-height: 0;
}
.strip {
  height: 7px;
  gap: 3px;
}
.card-venues {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}
.card-venues .i,
.card-foot .i {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.card-foot {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  border-top-color: color-mix(in srgb, var(--line) 80%, transparent);
}
.card-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.card-foot .when {
  font-weight: 600;
}
.card-foot .pool {
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
}
.card-foot .pool .i {
  color: var(--warn);
}
.card.soon {
  border-color: color-mix(in srgb, var(--down) 45%, var(--line));
}

/* How it works */
.steps {
  gap: 16px;
}
.steps li {
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.steps li::after {
  font-size: 34px;
  color: color-mix(in srgb, var(--text) 8%, transparent);
}
.step-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  margin-bottom: 14px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.step-ico .i {
  width: 22px;
  height: 22px;
}
#how.section {
  border-top: 0;
}

/* ----------------------------------------------------------- Market page */

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.back .i {
  width: 16px;
  height: 16px;
}
.m-title {
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.m-title-text {
  min-width: 0;
  display: grid;
}
.m-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.m-title .sym {
  font-size: clamp(28px, 3.6vw, 38px);
}
.m-name {
  color: var(--muted);
  font-size: 15px;
}
.m-question {
  font-size: 19px;
  font-weight: 600;
  margin: 18px 0 6px;
}
.m-venues {
  display: flex;
  align-items: center;
  gap: 7px;
}
.m-venues .i {
  width: 15px;
  height: 15px;
}
.share-btn {
  margin-left: auto;
  align-self: flex-start;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stats > div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.stats > div > .i {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.stats dd {
  font-size: 18px;
}
.timeline li {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.timeline .step-dot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--bg);
}
.timeline .step-dot .i {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.timeline .now .step-dot {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 22%, transparent);
}
.rung {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: border-color 140ms, transform 140ms, box-shadow 140ms;
}
.rung::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
}
.rung:not(:disabled):hover {
  transform: translateX(2px);
}
.rung[aria-pressed='true'] {
  box-shadow: inset 4px 0 0 var(--c), 0 10px 28px -16px var(--c);
}
.rung-name b {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.ladder-head {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.market-layout .section {
  border-top: 0;
}
.section.panel h2 {
  margin-bottom: 0;
}
.feed li {
  align-items: center;
  padding: 10px 0;
}
.feed li:last-child {
  border-bottom: 0;
}
.feed-main {
  flex: 1;
  min-width: 0;
}
.feed .who {
  color: var(--text);
  font-family: var(--body);
  font-weight: 600;
}
.activity {
  font-size: 14px;
}

/* Trade panel */
.trade-card {
  border-radius: 22px;
  background:
    radial-gradient(360px 200px at 100% 0%, color-mix(in srgb, var(--c, var(--brand)) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.trade-card h2 {
  display: flex;
  align-items: center;
  gap: 9px;
}
.trade-card h2 .i {
  color: var(--c, var(--brand));
}
.picker button {
  border-radius: 12px;
  background: var(--surface);
  padding: 11px 2px 9px;
  gap: 4px;
}
.pick-ico {
  display: grid;
  place-items: center;
  color: var(--c);
}
.pick-ico .i {
  width: 22px;
  height: 22px;
  margin: 0;
}
.picker button[aria-checked='true'] .pick-ico {
  color: var(--bg);
}
.stake-input {
  border-radius: var(--r-md);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
}
.stake-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.chips button {
  padding: 6px 0;
  border-color: var(--line-strong);
}
.summary .big dt {
  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------ Leaderboard */

.podium {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.podium li {
  --c: var(--flat);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 22px 14px 18px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
  background:
    radial-gradient(240px 140px at 50% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 75%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  min-width: 0;
}
.podium .podium-1 {
  --c: var(--warn);
  order: 2;
  padding-top: 30px;
}
.podium .podium-2 {
  --c: #b9c4d8;
  order: 1;
}
.podium .podium-3 {
  --c: #d99a6c;
  order: 3;
}
.podium li.me {
  box-shadow: var(--shadow), 0 0 0 2px var(--brand);
}
.podium-medal {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--c);
}
.podium b {
  font-family: var(--display);
  font-size: 17px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-profit {
  font-family: var(--display);
  font-size: 20px;
}
.podium .muted {
  font-size: 13px;
}
.rank {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  background: var(--raised);
}
.rank.medal-1 { background: color-mix(in srgb, var(--warn) 25%, transparent); color: var(--warn); }
.rank.medal-2 { background: color-mix(in srgb, #b9c4d8 22%, transparent); color: #b9c4d8; }
.rank.medal-3 { background: color-mix(in srgb, #d99a6c 22%, transparent); color: #d99a6c; }
.who-cell,
.mkt-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mkt-cell small {
  display: block;
  font-size: 12px;
  font-family: var(--body);
  font-weight: 400;
}
.table th {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--raised) 45%, transparent);
}
.table td {
  padding: 13px 12px;
  border-bottom-color: color-mix(in srgb, var(--line) 85%, transparent);
}
.table tbody tr {
  transition: background 120ms;
}
.table tbody tr:hover td {
  background: color-mix(in srgb, var(--raised) 40%, transparent);
}
.table .num-cell {
  font-family: var(--display);
  font-weight: 600;
}
.table tr.row-off td {
  opacity: 0.6;
}

/* -------------------------------------------------------------- Dashboard */

.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 26px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(520px 240px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
}
.profile-main {
  flex: 1 1 240px;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.profile-main p {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-main .i {
  width: 13px;
  height: 13px;
}
.profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.stat-tiles {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.stat-tile {
  padding: 16px 18px;
  border-radius: var(--r-lg);
  border-color: var(--line);
  background:
    radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--c, var(--brand)) 10%, transparent), transparent 75%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.stat-tile .tile-ico {
  margin-bottom: 12px;
}
.stat-tile dt {
  font-weight: 600;
}
.stat-tile dd {
  font-size: 26px;
}
.tile-btn {
  margin-top: 12px;
}
.meter {
  height: 6px;
  margin-top: 12px;
}
.meter i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--up) 70%, var(--brand)), var(--up));
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 18px;
  align-items: start;
}
.pchart {
  padding: 0;
  border: 0;
  background: transparent;
}
.pchart-line {
  stroke-width: 2.5;
}
.orec li {
  grid-template-columns: minmax(64px, max-content) minmax(40px, 1fr) auto;
  gap: 10px;
  padding: 4px 0;
}
.orec-name .oc {
  display: inline-flex;
  align-items: center;
}
.wallet-list li {
  align-items: center;
}
.wallet-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.ledger li {
  padding: 9px 0;
}
.ledger li:last-child {
  border-bottom: 0;
}
.ledger a {
  text-decoration: none;
  font-weight: 600;
}
.ledger a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- Earn */

.earn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.earn-stats > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.earn-stats > div > .i {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
}
.earn-stats > div > .i-fill {
  padding: 9px;
  color: var(--text);
  background: var(--raised);
}
.earn-stats dt {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.earn-stats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.earn-grid {
  gap: 18px;
  margin-bottom: 18px;
}
.earn-card {
  padding: 20px 22px;
  gap: 12px;
  border-radius: var(--r-lg);
  border-color: var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.card-head h2 {
  font-size: 18px;
}
.card-ico .i-fill {
  width: 16px;
  height: 16px;
}
.earn-card .card-ico:has(.i-fill) {
  color: var(--text);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.linked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.linked .i {
  color: var(--up);
}
.ref-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.ref-stats span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--raised);
}
.ref-stats b {
  color: var(--text);
}
.tasks {
  gap: 10px;
}
.task {
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 140ms;
}
.task:hover {
  border-color: var(--line-strong);
}
.task-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.task-ico .i {
  width: 20px;
  height: 20px;
}
.task-ico-sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.task-ico-sm .i {
  width: 15px;
  height: 15px;
}
.task-body b {
  font-size: 15px;
}
.task-body .pts {
  color: var(--up);
  font-weight: 600;
}
.task-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.task.is-done .task-ico {
  color: var(--up);
  background: color-mix(in srgb, var(--up) 13%, transparent);
}
.start-card {
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  flex-wrap: nowrap;
}
.start-ico,
.claim-ico {
  --c: var(--warn);
  width: 46px;
  height: 46px;
  border-radius: 14px;
}
.start-ico .i,
.claim-ico .i {
  width: 22px;
  height: 22px;
}
.start-text {
  flex: 1;
  min-width: 0;
}
.claim-card {
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.claim-amount {
  display: flex;
  align-items: center;
  gap: 16px;
}
.claim-amount > div {
  display: grid;
}
.steplist .step-check .i {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}
.howto .btn .i {
  width: 15px;
  height: 15px;
}

/* ---------------------------------------------------------------- Modal */

.modal-backdrop {
  background: rgba(3, 6, 12, 0.66);
  backdrop-filter: blur(6px);
}
.modal {
  width: min(440px, 100%);
  border-radius: 24px;
  padding: 26px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 40px);
  overflow: auto;
}
.wallet-option {
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface);
}

/* ------------------------------------------------------------ Admin console */

.admin-login {
  max-width: 440px;
  margin: 40px auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lg);
}
.admin-login .page-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.admin-login .page-ico .i {
  width: 24px;
  height: 24px;
}
.admin-login form {
  width: 100%;
  text-align: left;
}
.admin-login p {
  margin: 0;
}

.admin-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.admin-side {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
}
.admin-brand .i {
  color: var(--brand);
  width: 20px;
  height: 20px;
}
.admin-nav {
  display: grid;
  gap: 2px;
}
.admin-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  transition: background 120ms, color 120ms;
}
.admin-nav button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--raised) 60%, transparent);
}
.admin-nav button[aria-current='page'] {
  color: var(--text);
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.admin-nav button[aria-current='page'] .i {
  color: var(--brand);
}
.admin-nav .i {
  width: 17px;
  height: 17px;
}
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--crash);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}
.admin-lock {
  width: 100%;
}
.admin-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-top .page-title {
  margin: 4px 0 2px;
}
.admin-top p {
  margin: 0;
}
.admin-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.status-chip .i {
  width: 14px;
  height: 14px;
}
.status-chip.ok {
  color: var(--up);
  border-color: color-mix(in srgb, var(--up) 35%, var(--line));
}
.status-chip.bad {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
}
.todo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.todo li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.todo li > div {
  display: grid;
  min-width: 0;
}
.todo .muted {
  font-size: 13px;
}
.all-good {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--up);
  font-weight: 600;
  margin: 0;
}
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-list li {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 0 0 16px;
  font-size: 14px;
}
.timeline-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.timeline-list li:last-child {
  padding-bottom: 0;
}
.timeline-list li:last-child::before {
  display: none;
}
.tl-dot {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--brand);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent);
}
.timeline-list .muted {
  font-size: 13px;
  white-space: nowrap;
}
.timeline-list div .muted {
  white-space: normal;
}
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle-ui {
  position: relative;
  width: 34px;
  height: 20px;
  flex: none;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 140ms;
}
.toggle-ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 140ms;
}
.toggle input:checked + .toggle-ui {
  background: var(--up);
}
.toggle input:checked + .toggle-ui::after {
  transform: translateX(14px);
}
.toggle input:focus-visible + .toggle-ui {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.backup-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
}
.backup-line.ok .i {
  color: var(--up);
}
.backup-line.bad {
  color: var(--crash);
}
.backup-now {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.backup-now p {
  margin: 0;
  flex: 1 1 220px;
}
.kv {
  display: grid;
  gap: 6px;
}
.progress-cell {
  display: grid;
  gap: 2px;
  min-width: 90px;
  font-weight: 600;
}
.progress-cell .meter {
  margin-top: 4px;
  height: 5px;
}
/* A tab that still has to load from the server: dimmed after a beat, so a quick switch never flickers. */
.admin-main.is-switching {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease 0.12s;
}
.admin-main .admin-form label:not(.check) {
  display: grid;
  gap: 0;
  min-width: 0;
}
.admin-main .admin-form input {
  min-width: 0;
}
.admin-form details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
}
.admin-form details > summary::before {
  content: '+';
  font-weight: 600;
}
.admin-form details[open] > summary::before {
  content: '−';
}
.admin-main .admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.task-form {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}
.venues {
  gap: 8px;
}
.venues .check {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
}
.venues .check:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.admin-form details summary {
  cursor: pointer;
}
.admin-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-row-actions .btn {
  margin-left: 0;
}
.admin-detect {
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 16px;
}
.admin-result + .admin-result {
  margin-top: 12px;
}
.save-keys {
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.save-keys b {
  display: flex;
  align-items: center;
  gap: 8px;
}
.save-keys b .i {
  color: var(--warn);
}
.admin-main .steplist li {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

/* ------------------------------------------------------------- Responsive */



@media (max-width: 900px) {
  .featured {
    padding: 22px 20px;
  }
  .admin-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .admin-side {
    position: static;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px;
  }
  .admin-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
  }
  .admin-nav button {
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
  }
  .admin-lock {
    width: auto;
  }
}

@media (max-width: 640px) {
  .hide-sm,
  .chip .hide-sm {
    display: none;
  }
  .chip {
    height: 34px;
    padding: 0 10px;
  }
  .chip-faucet {
    padding: 0 9px;
  }
  .wallet-chip {
    display: none;
  }
  .points .unit {
    display: none;
  }
  .featured {
    border-radius: 22px;
    padding: 20px 16px;
  }
  .hero-token {
    gap: 12px;
  }
  .hero-token .avatar-xl {
    --size: 52px;
  }
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .hero-facts > div {
    grid-template-columns: 1fr;
    padding: 8px 10px;
  }
  .hero-facts .i {
    grid-row: auto;
    margin-bottom: 4px;
  }
  .hero-facts dd {
    font-size: 15px;
  }
  .featured .actions {
    width: 100%;
  }
  .featured .actions .btn {
    flex: 1;
  }
  .mini-ladder {
    padding: 10px;
  }
  .mini-rung {
    grid-template-columns: 82px 1fr auto;
    padding: 8px 10px;
    font-size: 13px;
  }
  .tabs {
    width: 100%;
  }
  .tabs button {
    flex: 1;
    padding: 7px 6px;
    font-size: 13px;
  }
  .toolbar .select {
    margin-left: auto;
  }
  .panel,
  .section.panel {
    padding: 16px;
    border-radius: 18px;
  }
  .panel-flush,
  .section.panel-flush {
    padding: 0;
  }
  .panel-flush > .section-head {
    padding: 16px 16px 12px;
  }
  .panel-flush .table th:first-child,
  .panel-flush .table td:first-child {
    padding-left: 16px;
  }
  .panel-flush .table th:last-child,
  .panel-flush .table td:last-child {
    padding-right: 16px;
  }
  .panel-flush .pad {
    padding: 0 16px 16px;
  }
  .table td,
  .table th {
    padding-left: 8px;
    padding-right: 8px;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .stats > div {
    padding: 10px 12px;
    column-gap: 10px;
  }
  .stats > div > .i {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  .stats dd {
    font-size: 15px;
  }
  .m-title .avatar-lg {
    --size: 44px;
  }
  .profile-card {
    padding: 18px;
    gap: 14px;
  }
  .profile-card .avatar-xl {
    --size: 54px;
  }
  .profile-actions {
    width: 100%;
  }
  .profile-actions .btn {
    flex: 1;
  }
  .stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .stat-tile {
    padding: 14px;
  }
  .stat-tile .tile-ico {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .earn-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .earn-stats > div {
    padding: 10px 12px;
    column-gap: 10px;
  }
  .earn-stats > div > .i {
    width: 28px;
    height: 28px;
    padding: 6px;
  }
  .earn-stats dd {
    font-size: 15px;
  }
  .page-head .page-ico {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .page-head .page-ico .i {
    width: 21px;
    height: 21px;
  }
  .podium {
    gap: 8px;
  }
  .podium li {
    padding: 16px 8px 12px;
  }
  .podium .avatar-lg {
    --size: 40px;
  }
  .podium b {
    font-size: 14px;
  }
  .podium-profit {
    font-size: 15px;
  }
  .podium .muted {
    display: none;
  }
  .podium-medal {
    top: 8px;
    right: 8px;
  }
  .start-card {
    flex-wrap: wrap;
  }
  .start-ico {
    display: none;
  }
  .task {
    grid-template-columns: 40px 1fr;
  }
  .task-ico {
    width: 40px;
    height: 40px;
  }
  .todo li {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .todo li .btn {
    grid-column: 1 / -1;
  }
  .admin-row-actions {
    justify-content: flex-start;
  }
  .card-foot {
    gap: 10px;
  }
  .tabbar {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
  }
  .tabbar .i {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }
  .tabbar a[aria-current='page'] .i {
    color: var(--brand);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover,
  .rung:not(:disabled):hover {
    transform: none;
  }
}
.admin-main .stat-tiles {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* =====================================================================
   Polymarket-style additions: search and sort tabs, Yes/No markets,
   odds history, top predictors, public profiles, leaderboard periods.
   ===================================================================== */

.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
  display: flex;
  align-items: center;
}
.search > .i {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
}
main .search input:not([type='checkbox']) {
  padding-left: 40px;
  border-radius: 999px;
  background: var(--surface);
}
.tabs-scroll {
  display: flex;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 16px;
}
.tabs-scroll button,
.lb-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.tabs-scroll .i {
  width: 15px;
  height: 15px;
}
.tabs-scroll button[aria-selected='true'] .i {
  color: var(--brand);
}
.results-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.lb-tabs {
  display: inline-flex;
  margin: 0 0 18px;
}

.tag-yn {
  margin-left: 6px;
  vertical-align: 4px;
  font-size: 11px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.chance-row {
  display: flex;
  gap: 8px;
}
.chance {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  font-weight: 600;
  font-size: 13px;
}
.chance b {
  font-family: var(--display);
  font-size: 20px;
}

.ladder-yn {
  grid-template-columns: 1fr 1fr;
}
.ladder-yn .ladder-head {
  grid-column: 1 / -1;
}
.ladder-yn .fine {
  grid-column: 1 / -1;
}
.rung-yn {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 18px;
}
.rung-yn .pool-col {
  display: none;
}
.rung-yn .rung-name b {
  font-size: 24px;
}
.ladder-yn .ladder-head {
  display: none;
}
.picker-yn {
  grid-template-columns: 1fr 1fr;
}
.picker-yn button {
  padding: 14px 4px 12px;
}
.picker-yn button b {
  font-size: 17px;
}

/* Odds history */
.odds-big {
  margin: -4px 0 12px;
  color: var(--c);
  font-weight: 600;
}
.odds-big b {
  font-family: var(--display);
  font-size: 28px;
  margin-right: 4px;
}
.odds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: -4px 0 12px;
  font-size: 13.5px;
}
.odds-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}
.odds-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}
.odds-legend b {
  color: var(--text);
  font-family: var(--display);
}
.odds-plot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 190px;
  gap: 10px;
}
.odds-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
}
.odds-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
.odds-grid {
  stroke: var(--line);
  stroke-dasharray: 3 4;
}
.odds-line {
  fill: none;
  stroke-width: 2.25;
  stroke-linejoin: round;
}
.odds-time {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0 40px;
  font-size: 12px;
}

/* Top predictors and links to profiles */
.user-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.user-link:hover {
  color: var(--brand);
  text-decoration: underline;
}
.table td a.user-link {
  font-family: var(--body);
}
.picks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.picks .muted {
  font-size: 12px;
}
.holders .rank {
  width: 26px;
  height: 26px;
  font-size: 12.5px;
}
.podium b .user-link {
  font-family: var(--display);
}

/* Admin: market type */
.type-pick {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.type-pick legend {
  margin-bottom: 6px;
}
.type-card {
  position: relative;
  cursor: pointer;
}
.type-card input {
  position: absolute;
  opacity: 0;
}
.type-card > span {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 120ms, box-shadow 120ms;
}
.type-card .i {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--brand);
}
.type-card small {
  color: var(--muted);
  font-size: 13px;
}
.type-card input:checked + span {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.type-card input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.type-pick:disabled .type-card {
  cursor: default;
  opacity: 0.7;
}
#admin-market[data-outcomes='ladder'] .binary-only,
#admin-market[data-outcomes='binary'] .ladder-only {
  display: none;
}

@media (max-width: 640px) {
  .search {
    max-width: none;
    flex-basis: 100%;
  }
  .toolbar .select {
    margin-left: 0;
  }
  .tabs-scroll button {
    flex: none;
    padding: 7px 12px;
  }
  .ladder-yn {
    grid-template-columns: 1fr;
  }
  .odds-plot {
    grid-template-rows: 150px;
  }
  .lb-tabs {
    display: flex;
    width: 100%;
  }
  .lb-tabs button {
    flex: 1;
    justify-content: center;
    padding: 7px 4px;
  }
}

/* =====================================================================
   Every device: compact top bar, touch targets, no zoom on focus,
   notches, landscape phones and large screens.
   ===================================================================== */

html {
  -webkit-tap-highlight-color: transparent;
}
body {
  overflow-x: clip;
}
.topbar-inner,
main,
.footer,
.demo-bar-inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* Laptops and small desktops: drop secondary labels so the top bar fits on one line. */
@media (max-width: 1180px) {
  .topbar-inner {
    gap: 18px;
  }
  .nav a .i,
  .faucet-label,
  .points .unit,
  .wallet-chip > span:not(.avatar) {
    display: none;
  }
  .wallet-chip {
    padding: 0 4px;
  }
  .chip-faucet {
    padding: 0 10px;
  }
}

/* Tablets and phones: the bottom tab bar takes over navigation. */
@media (max-width: 900px) {
  .tabbar {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
  }
  .tabbar .i {
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }
  .tabbar a[aria-current='page'] .i {
    color: var(--brand);
  }
  .account {
    margin-left: auto;
  }
  /* iPhones zoom into inputs smaller than 16px; keep them at 16px. */
  main input:not([type='checkbox']):not([type='radio']):not(#stake):not(.code-input),
  main select,
  main .select select,
  main textarea,
  .modal input:not(.code-input),
  .modal select {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .topbar-inner,
  main,
  .footer,
  .demo-bar-inner {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

/* Small phones */
@media (max-width: 400px) {
  .topbar-inner {
    gap: 8px;
  }
  .wordmark {
    font-size: 20px;
  }
  .account {
    gap: 6px;
  }
  .gift .gift-n {
    display: none;
  }
  .gift {
    padding: 0 9px;
  }
}
@media (max-width: 350px) {
  .wordmark .word {
    display: none;
  }
  .wordmark .mark {
    width: 20px;
    margin-right: 0;
  }
  .wordmark .mark i {
    height: 4px;
  }
}

/* Touch screens: comfortable tap targets (about 40px). */
@media (pointer: coarse), (max-width: 900px) {
  .btn {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 36px;
  }
  .chip {
    min-height: 36px;
  }
  .back {
    padding: 8px 0;
  }
  .wordmark {
    min-height: 40px;
  }
  .tabs button,
  .chips button {
    min-height: 38px;
  }
  .tabbar a {
    min-height: 48px;
    justify-content: center;
  }
  .admin-nav button {
    min-height: 40px;
  }
  .toggle,
  .venues .check {
    min-height: 44px;
  }
  .card:hover,
  .rung:not(:disabled):hover,
  .picker button:hover {
    transform: none;
  }
}

/* Phones held sideways: very little height. */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    position: static;
  }
  .trade {
    max-height: 94vh;
  }
  .modal-backdrop {
    align-items: start;
    overflow-y: auto;
  }
  .modal {
    max-height: none;
  }
  .tabbar {
    padding-top: 2px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
  }
  .mobile-bar {
    bottom: calc(46px + env(safe-area-inset-bottom));
  }
  .featured {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Large monitors: use the extra width. */
@media (min-width: 1600px) {
  :root {
    --page: 1400px;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Market title: long symbols and the Share button share one row on small phones. */
.m-title-text {
  flex: 1;
}
.m-title .sym {
  overflow-wrap: anywhere;
}
.share-btn {
  flex: none;
}
@media (max-width: 400px) {
  .m-title {
    gap: 12px;
  }
  .m-title .sym {
    font-size: clamp(24px, 7vw, 30px);
  }
  .m-title-row {
    gap: 6px;
  }
}

@media (max-width: 900px) {
  .market-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 350px) {
  .wordmark {
    min-width: 40px;
    justify-content: center;
  }
}

/* Phones sideways: the screen is wide but short, so navigation moves back to the top bar. */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 641px) {
  .nav {
    display: flex;
  }
  .nav a {
    padding: 6px 10px;
  }
  .tabbar {
    display: none;
  }
  .mobile-bar {
    bottom: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    padding-top: 8px;
  }
  main {
    padding-bottom: 90px;
  }
  #toast {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }
  .wordmark .word {
    display: none;
  }
}

/* Very small phones: tighter featured-market facts. */
@media (max-width: 360px) {
  .hero-facts {
    gap: 6px;
  }
  .hero-facts > div {
    padding: 8px;
  }
  .hero-facts .i {
    display: none;
  }
  .hero-facts dt {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .hero-facts dd {
    font-size: 14px;
  }
  .featured h1 {
    font-size: 26px;
  }
  .hero-token .avatar-xl {
    --size: 44px;
  }
}

/* =====================================================================
   Brand: the ladder badge, gold call to action.
   ===================================================================== */

.wordmark {
  gap: 10px;
}
/* The mark is the five-bar ladder inside a rounded badge: Moon on top, Crash at the bottom. */
.wordmark .mark {
  width: 32px;
  height: 32px;
  margin-right: 0;
  border-radius: 9px;
  background: #111114;
  box-shadow: inset 0 0 0 1px #35353e;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5px;
  flex: none;
}
.wordmark .mark i {
  height: 3px;
  border-radius: 2px;
}
.wordmark .mark i:nth-child(1) { width: 20px; background: var(--moon); }
.wordmark .mark i:nth-child(2) { width: 15px; background: #30d158; }
.wordmark .mark i:nth-child(3) { width: 10px; background: #8e8e93; }
.wordmark .mark i:nth-child(4) { width: 15px; background: #ff9f0a; }
.wordmark .mark i:nth-child(5) { width: 20px; background: #ff453a; }
.wordmark .word {
  font-weight: 600;
  letter-spacing: -0.022em;
}
@media (max-width: 350px) {
  .wordmark .mark {
    width: 36px;
    height: 36px;
  }
  .wordmark .mark i {
    height: 3.5px;
  }
}

/* The one action that matters on a screen. */
.btn-gold,
.btn-gold:hover {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-cta);
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--cta) 80%, transparent);
}
.btn-gold:hover {
  filter: brightness(1.05);
}
.mobile-bar .cta {
  background: var(--cta);
  color: var(--on-cta);
}
.nav a[aria-current='page'] .i,
.tabbar a[aria-current='page'] .i {
  color: var(--brand);
}
h1,
h2,
.page-title {
  letter-spacing: -0.022em;
}

/* =====================================================================
   Results bell and inbox, win popup, first-time tour, price links,
   your pick on cards.
   ===================================================================== */

.bell {
  position: relative;
  padding: 0 10px;
}
.bell.has-new .i {
  color: var(--gold);
  animation: bellRing 3.6s ease-in-out 4;
  transform-origin: 50% 10%;
}
@keyframes bellRing {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(12deg); }
  88% { transform: rotate(-10deg); }
  92% { transform: rotate(6deg); }
}
.bell-n {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--crash);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--bg);
}

.inbox {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
}
.inbox li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
}
.inbox li.unread {
  border-color: color-mix(in srgb, var(--c) 45%, var(--line));
  background: color-mix(in srgb, var(--c) 7%, var(--surface));
}
.inbox-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, transparent);
}
.inbox a {
  display: grid;
  gap: 2px;
  text-decoration: none;
  min-width: 0;
}
.inbox a span {
  color: var(--muted);
  font-size: 14px;
}
.inbox a small {
  color: var(--muted);
  font-size: 12px;
}
.inbox-empty {
  margin-top: 16px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
}
.inbox-empty .i {
  width: 32px;
  height: 32px;
  color: var(--brand);
}

.win-modal,
.tour-modal {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 26px 22px;
}
.win-modal {
  background:
    radial-gradient(320px 180px at 50% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
}
.win-ico,
.tour-ico {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.win-ico .i,
.tour-ico .i {
  width: 30px;
  height: 30px;
}
.tour-ico {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}
.win-amount {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.022em;
}
.win-amount small {
  font-size: 0.4em;
  color: var(--muted);
}
.win-modal .muted,
.tour-body {
  margin: 0 0 6px;
  max-width: 34ch;
}
.tour-body {
  color: var(--muted);
  line-height: 1.55;
}
.win-actions,
.tour-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}
.tour-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.tour-dots i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
}
.tour-dots i.on {
  background: var(--gold);
}
.tour-modal .eyebrow {
  margin: 4px 0 0;
}
@media (max-width: 400px) {
  .win-actions {
    grid-template-columns: 1fr;
  }
}

.price-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.price-links > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.price-links .i {
  width: 15px;
  height: 15px;
}

.card-mine {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-size: 13px;
}
.card-mine > .i {
  width: 14px;
  height: 14px;
  color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .bell.has-new .i {
    animation: none;
  }
}
@media (max-width: 400px) {
  .account {
    gap: 4px;
  }
  .chip,
  .bell,
  .gift,
  .chip-faucet {
    padding: 0 8px;
  }
}
/* The faucet link is also on the Earn page and in the start steps; very small phones drop it here. */
@media (max-width: 370px) {
  .chip-faucet {
    display: none;
  }
}

/* Token logo field in the admin market form */
.logo-field { display: grid; gap: 8px; }
.logo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-preview {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  color: var(--muted, #8b93c9);
}
.logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.logo-preview svg { width: 22px; height: 22px; }
.logo-link { flex: 1 1 260px; min-width: 0; }
.logo-upload { cursor: pointer; }
.logo-field small { font-size: 0.8rem; }

/* ------------------------------------------------- Contrast and theme layer
   Clear steps between page, cards and fields; brighter labels; visible borders. */

body {
  background:
    radial-gradient(1200px 560px at 50% -280px, var(--glow), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.card,
.panel {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 70%);
}
.field-label,
legend.field-label,
summary.field-label {
  color: var(--label);
  font-size: 13px;
  font-weight: 600;
}
main input:not([type='checkbox']):not([type='radio']),
main select,
main textarea,
.modal input,
.modal select,
.admin-form input:not([type='checkbox']):not([type='radio']),
.admin-form select,
.admin-form textarea,
.admin-detect input {
  background: var(--field);
  border: 1px solid var(--field-line);
  color: var(--text);
  border-radius: var(--r-sm);
}
main input:not([type='checkbox']):not([type='radio']):hover,
main select:hover,
main textarea:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--field-line));
}
.admin-form input:not([type='checkbox']):not([type='radio']):focus,
.admin-form textarea:focus,
.admin-form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}
main input::placeholder,
main textarea::placeholder,
.modal input::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}
.muted,
.hero-name,
.section-head p {
  color: var(--muted);
}
.btn:not(.btn-solid):not(.btn-gold) {
  border-color: var(--line-strong);
}
.btn:not(.btn-solid):not(.btn-gold):hover {
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line-strong));
}
.chip {
  border-color: var(--line-strong);
}
.tabs button[aria-selected='true'],
.nav a[aria-current='page'],
.admin-nav button[aria-current='page'] {
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--text);
}
.tabs button[aria-selected='true'] .i,
.admin-nav button[aria-current='page'] .i {
  color: var(--brand);
}
.venues .check,
.check {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
.check:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}
.type-card:has(input:checked) > span,
.type-card input:checked + span {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}

/* Theme switch in the top bar */
.theme-toggle {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.theme-toggle .i {
  color: var(--warn);
}
.featured .h1-soft {
  color: color-mix(in srgb, var(--brand) 75%, var(--text));
}
@media (max-width: 900px) {
  .admin-nav {
    padding: 2px;
    scroll-padding-inline: 12px;
  }
}
.btn[hidden],
.chip[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ Dashboard
   One spacing scale (8 / 16 / 24 / 32), flat calm cards, accent colour only for the claim
   action, wins/losses and live status. */

.dash {
  --dash-gap: 24px;
  display: grid;
  gap: var(--dash-gap);
}
.dash > .start-card {
  margin: 0;
}
.dash-card,
.sum-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: none;
}

/* Header: identity left, quiet actions right. No banner. */
.dash-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.dash-id {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}
.dash-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dash-name {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-meta {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
}
.dash-meta .i {
  width: 13px;
  height: 13px;
}
.dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dash-actions .btn-sm {
  min-height: 36px;
  padding: 0 14px;
}
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-sm);
}
.link-quiet:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.link-quiet .i {
  width: 14px;
  height: 14px;
}

/* Summary: cards sized to what they hold. */
.dash-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.dash-summary.has-record {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
}
.sum-card {
  padding: 16px 24px 24px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.sum-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}
.sum-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.sum-label .i {
  width: 16px;
  height: 16px;
}
.sum-points .sum-label .i {
  color: var(--warn);
}
.sum-note {
  font-size: 12px;
  color: var(--muted);
}
.sum-value {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.sum-na {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  font-weight: 500;
}
.sum-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.sum-card .meter {
  margin: 4px 0 0;
}
.record-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.record-grid dt {
  font-size: 12px;
  color: var(--muted);
}
.record-grid dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
}
.record-grid p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.dash-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
}
.dash-insights > .panel {
  margin: 0;
  background: var(--surface);
  box-shadow: none;
}

/* Main column + sidebar. */
.dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: start;
}
.dash-side {
  display: grid;
  gap: 16px;
}
.dash-main {
  overflow: hidden;
}
.dash-tabs {
  display: flex;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.dash-tabs button:hover {
  color: var(--text);
}
.dash-tabs button[aria-selected='true'] {
  color: var(--text);
}
.dash-tabs button[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}
.dash .count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.dash-table {
  margin: 0;
}
.dash-table th:first-child,
.dash-table td:first-child {
  padding-left: 24px;
}
.dash-table th:last-child,
.dash-table td:last-child {
  padding-right: 24px;
}
.dash-table .mkt-cell small {
  display: block;
  font-size: 12px;
  font-weight: 400;
}
.dash-main .fine {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}

.dash-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px;
}
.dash-empty p {
  flex: 1 1 240px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.dash-empty-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
}
.dash-empty-ico .i {
  width: 18px;
  height: 18px;
}
.dash-empty .btn {
  min-height: 36px;
  padding: 0 14px;
}

/* Sidebar cards. */
.dash-side .dash-card {
  padding: 16px 16px 16px;
}
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dash-card-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.dash-card-head h2 .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.dash-card-text {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}
.dash-card-btn {
  width: 100%;
  justify-content: center;
  min-height: 40px;
}
.dash-wallets,
.dash-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-wallets {
  margin-bottom: 16px;
}
.dash-wallets li,
.dash-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.dash-wallets li:first-child,
.dash-ledger li:first-child {
  border-top: 0;
}
.dw-main,
.dl-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.dw-main .addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.dw-main .muted,
.dl-main small {
  font-size: 12px;
  color: var(--muted);
}
.dl-main a,
.dl-main {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.dl-main a:hover {
  text-decoration: underline;
}
.dash-ledger {
  max-height: 360px;
  overflow-y: auto;
  margin-right: -8px;
  padding-right: 8px;
}
.dash-ledger b {
  font-size: 13px;
  white-space: nowrap;
}
.dl-neg {
  color: var(--text);
}
.dw-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.dw-link:hover {
  color: var(--text);
}
.dw-link .i {
  width: 12px;
  height: 12px;
}

@media (max-width: 1080px) {
  .dash-summary.has-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-summary.has-record .sum-record {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .dash {
    --dash-gap: 16px;
  }
  .dash-layout,
  .dash-insights {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dash-head {
    flex-wrap: wrap;
    padding-bottom: 16px;
  }
  .dash-name {
    font-size: 20px;
  }
  .dash-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .dash-actions .btn-sm {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
  }
  .dash-actions .link-quiet {
    min-height: 44px;
  }
  .dash-summary,
  .dash-summary.has-record {
    grid-template-columns: minmax(0, 1fr);
  }
  .sum-card {
    padding: 16px;
  }
  .sum-value {
    font-size: 26px;
  }
  .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-tabs {
    padding: 0 16px;
    gap: 20px;
  }
  .dash-tabs button {
    min-height: 48px;
  }
  .dash-table th:first-child,
  .dash-table td:first-child {
    padding-left: 16px;
  }
  .dash-table th:last-child,
  .dash-table td:last-child {
    padding-right: 16px;
  }
  .dash-empty {
    padding: 16px;
  }
  .dash-empty .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}

/* Chart row on the dashboard: same heading scale and padding as the other cards. */
.dash-insights {
  align-items: start;
}
.dash-insights > .panel {
  padding: 16px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.dash-insights .section-head {
  margin: 0 0 8px;
  gap: 8px;
  align-items: center;
}
.dash-insights .section-head h2 {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.dash-insights .section-ico {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--muted);
}
.dash-insights .section-ico .i {
  width: 16px;
  height: 16px;
}
.dash-insights .pchart {
  padding: 8px 0 0;
  background: none;
  border: 0;
}
.dash-insights .pchart-plot {
  height: 140px;
}
.dash-insights .fine {
  margin: 8px 0 0;
}
.dash-insights .orec {
  margin: 8px 0 0;
}
@media (max-width: 640px) {
  .dash-insights > .panel {
    padding: 16px;
  }
}
@media (max-width: 640px) {
  .dash-summary,
  .dash-summary.has-record {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .dash-summary .sum-record {
    grid-column: 1 / -1;
  }
  /* Points on a phone: label, number, note, then a full-width claim button. */
  .sum-points .sum-top {
    display: contents;
  }
  .sum-points .sum-label {
    min-height: 32px;
  }
  .sum-points .sum-top .btn,
  .sum-points .sum-note {
    order: 3;
  }
  .sum-points .sum-top .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    margin-top: 4px;
  }
  .sum-value {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------- Typography
   Apple-style scale: Bold only for large titles, Semibold for headings, numbers and
   buttons, Medium for labels, Regular for reading text. Slightly tighter tracking on
   large sizes, as SF Pro Display does. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  font-feature-settings: 'cv11' 1;
}
h1,
.page-title,
.featured h1,
.m-title .sym,
.dash-name {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
h2,
h3,
.section-head h2,
.modal h2,
.card .sym,
.sym {
  font-weight: 600;
  letter-spacing: -0.012em;
}
.section-head h2 {
  font-size: 18px;
}
.featured .h1-soft,
.page-lede,
.hero-name {
  font-weight: 400;
}
.btn,
.chip,
.tabs button,
.dash-tabs button,
.pill {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.nav a,
.admin-nav button,
.field-label,
.sum-label,
.dash-card-head h2 {
  font-weight: 500;
}
.dash-card-head h2,
.sum-label {
  font-weight: 600;
}
.stat-tile dd,
.sum-value,
.record-grid dd,
.hero-facts dd,
.balance .amount,
.claim-amount b,
.odds-big b,
.win-amount,
.points,
.summary .big dd {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.eyebrow,
.dash-eyebrow,
.table th {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.wordmark .word {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.m-question {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.tabbar a {
  font-weight: 500;
}

/* Graphite palette: neutral surfaces carry the content; blue only marks the main action,
   focus and the current page; gold only marks points and rewards. */
.card-mine {
  background: var(--raised);
}
.card-mine > .i {
  color: var(--muted);
}
.featured .h1-soft {
  color: var(--muted);
}
.section-ico,
.page-ico {
  color: var(--text);
  background: var(--raised);
  border-color: var(--line);
}

/* =====================================================================
   Premium details: hairlines, spotlight, tickers, segmented tabs, glass
   top bar, skeletons, press feedback. Only transform and opacity move.
   ===================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hairline-hi: rgba(255, 255, 255, 0.06);
}
:root[data-theme='light'] {
  --hairline-hi: rgba(255, 255, 255, 0.8);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --hairline-hi: rgba(255, 255, 255, 0.8);
  }
}

/* 1. Hairline borders with a faint inner top highlight. */
.card,
.panel,
.dash-card,
.sum-card,
.featured,
.trade,
.trade-card,
.stat-tile,
.hero-facts > div {
  box-shadow: inset 0 1px 0 var(--hairline-hi), var(--shadow);
}
.dash-card,
.sum-card {
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}
.card:hover {
  border-color: color-mix(in srgb, var(--text) 16%, var(--line));
  box-shadow: inset 0 1px 0 var(--hairline-hi), var(--shadow-lg);
}

/* 2. Spotlight that follows the pointer on market cards. */
.card {
  position: relative;
  isolation: isolate;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 65%);
  transition: opacity 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::after {
    opacity: 1;
  }
}
.card:hover {
  transform: translateY(-2px);
}

/* 3. Numbers that count to new values, with a short green or red flash. */
.tick {
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  padding: 0 2px;
  margin: 0 -2px;
}
.tick-up {
  animation: tickUp 700ms var(--ease-out);
}
.tick-down {
  animation: tickDown 700ms var(--ease-out);
}
@keyframes tickUp {
  0% { background: color-mix(in srgb, var(--up) 22%, transparent); color: var(--up); }
  100% { background: transparent; }
}
@keyframes tickDown {
  0% { background: color-mix(in srgb, var(--crash) 22%, transparent); color: var(--crash); }
  100% { background: transparent; }
}

/* 4. Payout multiple next to the leading outcome on cards. */
.lead-pays {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* 5. Segmented tabs with a sliding highlight. */
.tabs,
.dash-tabs {
  position: relative;
}
.tabs.seg-on::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--seg-w, 0);
  transform: translateX(var(--seg-x, 0));
  border-radius: 999px;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 var(--hairline-hi);
  pointer-events: none;
}
.tabs.seg-ready::before {
  transition: transform 260ms var(--ease-out), width 260ms var(--ease-out);
}
.tabs.seg-on button {
  position: relative;
  z-index: 1;
}
.tabs.seg-on button[aria-selected='true'] {
  background: transparent;
  box-shadow: none;
}
.dash-tabs.seg-on::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: var(--seg-w, 0);
  transform: translateX(var(--seg-x, 0));
  border-radius: 2px;
  background: var(--brand);
  pointer-events: none;
}
.dash-tabs.seg-ready::before {
  transition: transform 260ms var(--ease-out), width 260ms var(--ease-out);
}
.dash-tabs.seg-on button[aria-selected='true']::after {
  display: none;
}

/* 6. Frosted glass top bar. Safari needs literal values in -webkit-backdrop-filter. */
.topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* 7. Skeletons shaped like the page that is loading. */
.skeleton {
  display: grid;
  gap: 16px;
  padding-top: 8px;
}
.sk {
  display: block;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  position: relative;
  overflow: hidden;
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  animation: skShimmer 1.4s ease-in-out infinite;
}
@keyframes skShimmer {
  to { transform: translateX(100%); }
}
.sk-line { height: 12px; width: 60%; }
.sk-title { height: 28px; width: 50%; border-radius: 10px; }
.sk-bar { height: 8px; width: 100%; border-radius: 999px; }
.sk-circle { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.sk-circle.lg { width: 54px; height: 54px; }
.w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w40 { width: 40%; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; }
.sk-hero {
  display: grid;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
}
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.sk-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sk-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.sk-card.tall { min-height: 140px; }
.sk-card.block { min-height: 280px; }
.sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sk-col {
  display: grid;
  gap: 8px;
  flex: 1;
}

/* 8. Buttons press in slightly; the main action brightens on hover. */
.btn,
.chip,
.tabs button,
.dash-tabs button,
.card {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity, filter;
  transition-duration: 160ms;
  transition-timing-function: var(--ease-out);
}
.btn:active:not(:disabled),
.chip:active,
.tabs button:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}
.btn-gold:hover:not(:disabled) {
  background: color-mix(in srgb, var(--cta) 88%, var(--bg));
  border-color: color-mix(in srgb, var(--cta) 88%, var(--bg));
  filter: none;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .sk-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sk-hero {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk::after,
  .tick-up,
  .tick-down {
    animation: none;
  }
  .card:hover {
    transform: none;
  }
  .tabs.seg-ready::before,
  .dash-tabs.seg-ready::before {
    transition: none;
  }
}

/* =====================================================================
   Trading-style home: search in the top bar, menu, page row, filter
   sidebar, market grid, right rail, cards with quick picks.
   ===================================================================== */

/* Top bar: logo, wide search, account, menu. */
.topbar-inner {
  max-width: 1360px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.top-search {
  flex: 1 1 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.top-search:focus-within {
  border-color: var(--brand);
  background: var(--surface);
}
.top-search .i {
  width: 16px;
  height: 16px;
  flex: none;
}
.top-search input,
main .top-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-shadow: none;
  padding: 0;
}
.top-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.top-search kbd {
  font: 500 11px/1 var(--body);
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.account {
  margin-left: auto;
}
.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0 6px;
}
.top-link:hover {
  color: var(--text);
}
.top-link .i {
  width: 15px;
  height: 15px;
}
.menu-btn {
  width: 36px;
  padding: 0;
  justify-content: center;
}
.menu-btn[aria-expanded='true'] {
  background: var(--raised);
}

/* Dropdown menu. */
.top-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 20px;
  z-index: 60;
  width: 260px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline-hi), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
  animation: menuIn 160ms var(--ease-out);
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.top-menu a,
.top-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
}
.top-menu a:hover,
.top-menu button:hover,
.top-menu a:focus-visible,
.top-menu button:focus-visible {
  background: var(--raised);
}
.top-menu .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.top-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px;
}
.top-menu .menu-quiet {
  color: var(--muted);
  min-height: 36px;
}
.menu-switch .switch-track {
  margin-left: auto;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  transition: background-color 200ms var(--ease-out);
}
.menu-switch .switch-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 200ms var(--ease-out);
}
.menu-switch[aria-checked='true'] .switch-track {
  background: var(--brand);
}
.menu-switch[aria-checked='true'] .switch-track i {
  transform: translateX(14px);
}

/* Page row under the top bar. */
.subnav {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.subnav a:hover {
  color: var(--text);
}
.subnav a .i {
  width: 16px;
  height: 16px;
}
.subnav a[aria-current='page'] {
  color: var(--text);
  font-weight: 600;
}
.subnav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}
.subnav a[aria-current='page'] .i {
  color: var(--brand);
}

/* Home: filters | markets | highlights. */
main:has(.home) {
  max-width: 1360px;
}
.home {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
}
.home-side,
.home-rail {
  position: sticky;
  top: 132px;
}
.home-side {
  display: grid;
  gap: 8px;
}
.side-group {
  display: grid;
  gap: 2px;
}
.side-label {
  margin: 16px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-side button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.home-side button span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-side button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.home-side button[aria-current='true'] {
  color: var(--text);
  background: var(--raised);
  font-weight: 600;
}
.home-side button .i {
  width: 17px;
  height: 17px;
}
.home-side button[aria-current='true'] .i {
  color: var(--brand);
}
.side-n {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ex-dot {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--raised);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.home-main {
  min-width: 0;
}
.home-main > .featured {
  margin-top: 0;
}
.home-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.home-head h2 {
  margin: 0;
  font-size: 20px;
}
.chip-sm {
  height: 28px;
  font-size: 12px;
  padding: 0 10px;
}
.chip-sm .i {
  width: 12px;
  height: 12px;
}
.home .grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Featured market: quick picks and the odds chart. */
.home .featured {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border-radius: 18px;
}
.home .featured .lede {
  display: none;
}
.home .featured .hero-facts {
  margin: 4px 0 0;
}
.feat-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.feat-open:hover {
  color: var(--text);
}
.feat-open .i {
  width: 14px;
  height: 14px;
}
.feat-chart {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.feat-chart .odds-plot {
  grid-template-rows: 170px;
}

/* Quick-pick buttons, tinted in the outcome colour. */
.qp-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.qp-row.qp-yn {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.qp {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 140ms var(--ease-out), transform 80ms var(--ease-out);
}
.qp b {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.qp:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c) 24%, transparent);
}
.qp:active:not(:disabled) {
  transform: scale(0.97);
}
.qp:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.qp-yn .qp {
  flex-direction: row;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
}
.qp-yn .qp b {
  font-size: 14px;
  color: inherit;
  opacity: 0.85;
}
.qp-sm {
  flex-direction: row;
  min-height: 32px;
  min-width: 64px;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}

/* Market cards: flat, dense, tradeable. */
.card.mcard {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 14px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
}
.card.mcard:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
}
.mcard .card-top {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.card-link {
  display: grid;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.card-link:focus-visible {
  outline: none;
}
.card-link:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.mcard .sym {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcard .card-name {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gauge {
  display: grid;
  justify-items: center;
  width: 56px;
  line-height: 1;
}
.gauge svg {
  width: 48px;
  height: 28px;
  overflow: visible;
}
.gauge path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.g-track {
  stroke: var(--line-strong);
}
.g-fill {
  stroke: var(--c);
}
.gauge b {
  margin-top: -14px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gauge small {
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.o-rows {
  display: grid;
  gap: 8px;
}
.o-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.o-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--c);
  font-size: 14px;
  font-weight: 600;
}
.o-name .i {
  width: 14px;
  height: 14px;
  align-self: center;
}
.o-name small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o-pct {
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.card-result {
  margin: 0;
  font-size: 14px;
}
.mcard .card-mine {
  position: relative;
  z-index: 2;
  font-size: 13px;
}
.mcard .card-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  min-width: 0;
}
.card-ex {
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard .card-foot .when {
  margin-left: auto;
  padding-left: 8px;
}
.dot-sep {
  opacity: 0.6;
}
.st {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.st i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 22%, transparent);
}
.st-live { color: var(--up); }
.st-hot { color: var(--down); }
.st-hot .i { width: 12px; height: 12px; }
.st-wait { color: var(--muted); }
.st-done { color: var(--text); }
.st-off { color: var(--muted); }

/* Right rail. */
.home-rail {
  display: grid;
  gap: 12px;
}
.rail-card {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}
.rail-card p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.rail-claim,
.rail-earn {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rail-claim > div,
.rail-earn > div {
  flex: 1;
  min-width: 0;
}
.rail-claim b,
.rail-earn b {
  font-size: 14px;
  font-weight: 600;
}
.rail-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
}
.rail-ico .i {
  width: 18px;
  height: 18px;
}
.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.rail-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.rail-head a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}
.rail-head a:hover {
  color: var(--text);
}
.rail-head a .i {
  width: 12px;
  height: 12px;
}
.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.rail-list li {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.rail-list li:first-child {
  border-top: 0;
}
.rail-list li > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.rail-rank {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rail-list b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rail-empty {
  font-size: 13px;
}

@media (max-width: 1240px) {
  .home {
    grid-template-columns: 188px minmax(0, 1fr);
  }
  .home-rail {
    position: static;
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
@media (max-width: 900px) {
  .subnav {
    display: none;
  }
  .home {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .home-side {
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px;
  }
  .home-side .side-group {
    display: flex;
    gap: 6px;
  }
  .home-side .side-label,
  .home-side .side-soon {
    display: none;
  }
  .home-side button {
    display: inline-flex;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    white-space: nowrap;
  }
  .home-rail {
    grid-column: auto;
  }
  .home .featured {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    gap: 10px;
  }
  .top-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    height: 40px;
  }
  .top-search kbd {
    display: none;
  }
  .top-menu {
    right: 12px;
    left: 12px;
    width: auto;
    top: 56px;
  }
  .home .featured {
    padding: 16px;
  }
  .qp-row:not(.qp-yn) {
    gap: 4px;
  }
  .qp {
    font-size: 12px;
  }
  .home .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Featured market facts as one quiet line. */
.home .featured .hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.home .featured .hero-facts > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.home .featured .hero-facts > div > .i {
  display: none;
}
.home .featured .hero-facts dt {
  order: 2;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.home .featured .hero-facts dd {
  order: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.home-rail {
  align-items: start;
}

/* =====================================================================
   Market page composition: compact header, one line of facts, slim
   timeline, outcomes as one calm list, folded rules. Empty markets show
   no zeros.
   ===================================================================== */

.mh {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.mh .m-title {
  align-items: center;
  gap: 14px;
}
.mh .m-title .sym {
  font-size: clamp(26px, 3vw, 32px);
}
.mh .m-name {
  font-size: 14px;
  color: var(--muted);
}
.mh .m-question {
  margin: 4px 0 0;
  max-width: 62ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}
.mh .m-status {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.m-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 4px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.m-facts > div {
  display: grid;
  gap: 2px;
  padding: 0 20px;
  border-left: 1px solid var(--line);
}
.m-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.m-facts dt {
  font-size: 12px;
  color: var(--muted);
}
.m-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.m-facts dd .muted {
  font-weight: 400;
}
.m-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.m-refs > .i {
  width: 14px;
  height: 14px;
}
.m-refs .price-links {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 0 4px;
}
.m-refs .price-links > .muted {
  display: none;
}
.m-refs .price-links .btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

/* Slim timeline: three points on one line. */
.market-layout .timeline {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 24px;
}
.market-layout .timeline li {
  padding: 18px 12px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-top: 2px solid var(--line);
  opacity: 1;
}
.market-layout .timeline li.done {
  border-top-color: var(--up);
}
.market-layout .timeline li.now {
  border-top-color: transparent;
  background: linear-gradient(90deg, var(--up), var(--line)) top / 100% 2px no-repeat;
  box-shadow: none;
}
.market-layout .timeline .step-dot {
  position: absolute;
  top: -6px;
  margin: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
  box-shadow: 0 0 0 3px var(--bg);
}
.market-layout .timeline li {
  position: relative;
}
.market-layout .timeline .done .step-dot {
  background: var(--up);
}
.market-layout .timeline .now .step-dot {
  background: var(--up);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px color-mix(in srgb, var(--up) 25%, transparent);
}
.market-layout .timeline b {
  font-size: 13px;
  font-weight: 600;
}
.market-layout .timeline .muted {
  font-size: 12px;
}

/* Outcomes: one list with hairline dividers. */
.market-layout .ladder {
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.market-layout .ladder-head {
  padding: 12px 16px;
  font-size: 11px;
  border-bottom: 1px solid var(--line);
}
.market-layout .rung {
  min-height: 60px;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.market-layout .ladder-head + .rung {
  border-top: 0;
}
.market-layout .rung::before {
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.market-layout .rung:not(:disabled):hover {
  transform: none;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.market-layout .rung[aria-pressed='true'] {
  background: color-mix(in srgb, var(--c) 8%, transparent);
  box-shadow: inset 3px 0 0 var(--c);
}
.market-layout .rung-name b {
  font-size: 15px;
  font-weight: 600;
}
.market-layout .rung .num {
  font-size: 15px;
  font-weight: 600;
}
.num-soft {
  color: var(--muted);
  font-size: 13px !important;
  font-weight: 500 !important;
}
.ladder-quiet .ladder-head,
.ladder-quiet .rung {
  grid-template-columns: minmax(0, 1fr) auto;
}
.rung-cta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}
.rung-cta .i {
  width: 14px;
  height: 14px;
}
.rung:hover .rung-cta,
.rung:focus-visible .rung-cta,
.rung[aria-pressed='true'] .rung-cta {
  opacity: 1;
  color: var(--c);
}
@media (hover: none) {
  .rung-cta {
    opacity: 1;
  }
}
.ladder-note {
  margin: 0 0 24px;
}

/* Rules folded away, calm. */
.m-rules {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.m-rules summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}
.m-rules summary::-webkit-details-marker {
  display: none;
}
.m-rules summary .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.m-rules summary .i:last-child {
  margin-left: auto;
  transition: transform 160ms var(--ease-out);
}
.m-rules[open] summary .i:last-child {
  transform: rotate(90deg);
}
.m-rules > :not(summary) {
  margin: 0 16px 16px;
}
.m-rules .m-note {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--raised);
  font-size: 14px;
}

/* Calmer panels on the market page. */
.market-layout .section.panel,
.market-layout .trade-card {
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
}

/* Cards and the featured market before anyone predicts. */
.card-new {
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}
.card-quiet {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.qp-row.qp-mini .qp {
  min-height: 34px;
  font-size: 12px;
}
.mini-ladder.quiet .mini-rung {
  grid-template-columns: minmax(0, 1fr) auto;
}
.mini-ladder.quiet .mini-rung > span:last-child {
  display: none;
}
.home-note {
  margin: 8px 0 0;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {
  .m-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 0;
  }
  .m-facts > div {
    padding: 0 12px;
  }
  .m-facts > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .mh .m-question {
    font-size: 16px;
  }
  .market-layout .timeline b {
    font-size: 12px;
  }
}
.trade {
  box-shadow: none;
  top: 124px;
}
.mh .m-refs {
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .trade {
    top: auto;
  }
}
@media (max-width: 640px) {
  .top-link {
    display: none;
  }
}
/* Featured facts read label first: "Start price $0.02028 · Closes in 10d 23h". */
.home .featured .hero-facts dt {
  order: 1;
}
.home .featured .hero-facts dd {
  order: 2;
}
.home .featured .hero-facts > div + div::before {
  content: '·';
  order: 0;
  margin-right: 10px;
  color: var(--muted);
}
.home .featured .hero-facts {
  gap: 4px 10px;
}
@media (max-width: 900px) {
  .home .featured .mini-ladder.quiet {
    display: none;
  }
}


/* =====================================================================
   Type system. One family (Inter), one scale, five roles:
   titles · outcome labels · numbers · descriptions · metadata.
   Weights: 400 reading, 500 labels and navigation, 600 titles, numbers
   and buttons, 650 only for page-level titles. Numbers use tabular
   figures so points, percentages and countdowns line up and don't jitter.
   ===================================================================== */
:root {
  --fs-meta: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
}
body {
  font-family: var(--body);
  font-optical-sizing: auto;
  letter-spacing: -0.006em;
}
b,
strong {
  font-weight: 600;
}

/* Page-level titles: page, featured market, market page, dashboard name. */
h1,
.page-title,
.featured h1,
.mh .m-title .sym,
.dash-name {
  font-weight: 650;
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
}
.page-title,
.mh .m-title .sym {
  font-size: var(--fs-2xl);
}
.featured h1 {
  font-size: clamp(26px, 2.6vw, 32px);
}
.dash-name {
  font-size: 24px;
}
.featured .h1-soft {
  font-weight: 400;
}

/* Section headings and card headings. */
h2,
.section-head h2,
.home-head h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
}
.rail-head h3,
.dash-card-head h2,
.trade-card h2,
.m-rules summary,
.modal h2 {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.trade-card h2 {
  font-size: var(--fs-lg);
}

/* Market titles on cards and lists. */
.mcard .sym,
.mkt-cell span,
.rail-list li > a,
.who-cell a {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.mkt-cell span,
.rail-list li > a,
.who-cell a {
  font-size: var(--fs-base);
}
.mcard .card-name,
.mh .m-name,
.hero-name {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--muted);
}
.hero-name {
  font-size: var(--fs-base);
}

/* Outcome labels: coloured, medium weight. */
.o-name,
.rung-name b,
.mini-rung b,
.qp span,
.qp-yn .qp,
.odds-legend span,
.orec-name {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.o-name,
.mini-rung b,
.qp span {
  font-size: var(--fs-base);
}
.qp span {
  font-size: var(--fs-sm);
}
.market-layout .rung-name b {
  font-size: var(--fs-md);
  font-weight: 500;
}
.o-name small,
.rung-name small,
.mini-rung .muted {
  font-size: var(--fs-meta);
  font-weight: 400;
}

/* Numbers: semibold, tabular, slightly tight. */
.tick,
.num,
.num-cell,
.o-pct,
.pct,
.gauge b,
.qp b,
.qp-sm,
.sum-value,
.record-grid dd,
.m-facts dd,
.hero-facts dd,
.stats dd,
.stat-tile dd,
.rail-list b,
.dash-ledger b,
.points,
.chance b,
.odds-legend b,
.odds-big b,
.orec-num,
.side-n,
.count,
.count-badge,
.rail-rank,
.table td.right,
.table th.right,
.stake-input input,
#stake,
.summary dd,
.when,
.card-foot,
.m-facts,
.hero-facts,
.mobile-bar,
.odds-axis,
.odds-time,
.pchart-axis,
.bell-n,
.gift-n {
  font-variant-numeric: tabular-nums;
}
.o-pct,
.market-layout .rung .num,
.gauge b,
.m-facts dd,
.hero-facts dd,
.rail-list b,
.dash-ledger b,
.record-grid dd,
.sum-value {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.qp b {
  font-weight: 500;
}
.sum-value {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
}
.record-grid dd {
  font-size: var(--fs-lg);
}

/* Descriptions: regular weight, comfortable line height. */
.mh .m-question {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}
.lede,
.page-lede,
.section-head p,
.card-quiet,
.card-result,
.rail-card p,
.dash-card-text,
.dash-empty p,
.empty p,
.home-note,
.m-note,
.rules li,
.howto li {
  font-weight: 400;
  line-height: var(--lh-body);
}
.section-head p,
.card-quiet,
.rail-card p,
.dash-card-text,
.dash-empty p,
.home-note {
  font-size: var(--fs-sm);
}
.fine,
.ladder-note {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--muted);
}

/* Metadata: small, regular, muted. Labels above values stay quiet. */
.mcard .card-foot,
.m-facts dt,
.m-refs,
.odds-time,
.dash-meta,
.feed .muted,
.dw-main .muted,
.dl-main small,
.mcard .card-mine,
.timeline .muted {
  font-size: var(--fs-meta);
  font-weight: 400;
}
.mcard .card-foot .st {
  font-weight: 500;
}
.mcard .card-foot .when {
  font-weight: 500;
  color: var(--text);
}
.sum-label,
.record-grid dt,
.hero-facts dt,
.field-label {
  font-weight: 500;
}
.eyebrow,
.dash-eyebrow,
.side-label,
.ladder-head,
.table th,
.mini-head,
.hero-facts dt.caps {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Navigation and controls. */
.subnav a {
  font-size: 14px;
  font-weight: 500;
}
.subnav a[aria-current='page'] {
  font-weight: 500;
}
.home-side button,
.top-menu a,
.top-menu button {
  font-size: 14px;
  font-weight: 400;
}
.home-side button[aria-current='true'] {
  font-weight: 500;
}
.top-menu .menu-quiet {
  font-size: var(--fs-sm);
}
.tabs button,
.dash-tabs button {
  font-size: 14px;
  font-weight: 500;
}
.tabbar a {
  font-size: 11px;
  font-weight: 500;
}
.chip {
  font-family: var(--body);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.chip.points {
  font-weight: 600;
}
.btn {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.btn-gold,
.btn-solid,
.btn-lg {
  font-weight: 600;
}
.st,
.pill,
.tag {
  font-weight: 500;
}
.wordmark .word {
  font-weight: 650;
}

@media (max-width: 640px) {
  .page-title,
  .mh .m-title .sym {
    font-size: 24px;
  }
  .mh .m-question {
    font-size: var(--fs-md);
  }
  .sum-value {
    font-size: 26px;
  }
}
/* Outcome names inside sentences and the prediction panel's outcome buttons. */
.oc,
.picker button b {
  font-weight: 500;
}
.picker button small {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
/* Featured facts: spacing instead of dots, so a wrapped line never starts with a stray "·". */
.home .featured .hero-facts > div + div::before {
  content: none;
}
.home .featured .hero-facts {
  gap: 6px 20px;
}

/* =====================================================================
   Featured market: one flat panel. Left: who, what, when, one action.
   Right: the outcomes as a single list where each row is the pick.
   No glows, no boxes inside boxes.
   ===================================================================== */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline-hi);
  overflow: hidden;
}
.feat-main {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
}
.feat-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.feat-id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.feat-id h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.feat-id p {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.feat-q {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
.feat-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: 0;
}
.feat-facts > div {
  padding: 0 20px;
  border-left: 1px solid var(--line);
}
.feat-facts > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.feat-facts dt {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.feat-facts dd {
  margin: 2px 0 0;
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.feat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 4px;
}
.feat-actions .btn {
  min-height: 40px;
  padding: 0 16px;
}
.feat-actions .btn .i {
  width: 15px;
  height: 15px;
}
.feat-hint {
  font-size: var(--fs-meta);
  color: var(--muted);
}

.feat-side {
  display: grid;
  align-content: start;
  padding: 12px 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 35%, var(--surface));
}
.feat-side-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fo-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: background-color 140ms var(--ease-out);
}
.fo-row:first-of-type {
  border-top: 0;
}
.fo-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--share);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  pointer-events: none;
}
.fo-row > * {
  position: relative;
}
.fo-row:hover:not(:disabled),
.fo-row:focus-visible {
  background: color-mix(in srgb, var(--c) 8%, transparent);
  outline: none;
}
.fo-row:focus-visible {
  box-shadow: inset 2px 0 0 var(--c);
}
.fo-row:disabled {
  cursor: default;
}
.fo-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--c);
}
.fo-name .i {
  width: 16px;
  height: 16px;
}
.fo-range {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fo-val {
  justify-self: end;
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fo-pick {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  opacity: 0;
  transition: opacity 140ms var(--ease-out), color 140ms var(--ease-out);
}
.fo-pick .i {
  width: 14px;
  height: 14px;
}
.fo-row:hover .fo-pick,
.fo-row:focus-visible .fo-pick {
  opacity: 1;
  color: var(--c);
}
@media (hover: none) {
  .fo-pick {
    opacity: 1;
  }
}

/* "Only market" note: plain text, no dashed box. */
.home-note {
  border: 0;
  padding: 8px 0 0;
  text-align: left;
  font-size: var(--fs-sm);
}

@media (max-width: 1240px) and (min-width: 901px) {
  .feat {
    grid-template-columns: minmax(0, 1fr);
  }
  .feat-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 900px) {
  .feat {
    grid-template-columns: minmax(0, 1fr);
  }
  .feat-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 640px) {
  .feat-main {
    padding: 20px;
    gap: 14px;
  }
  .feat-id h2 {
    font-size: 24px;
  }
  .feat-side-head,
  .fo-row {
    padding-left: 20px;
    padding-right: 20px;
  }
  .fo-row {
    grid-template-columns: minmax(0, 1fr) auto 52px;
    gap: 10px;
    min-height: 50px;
  }
  .fo-range {
    font-size: var(--fs-meta);
  }
}
.feat-sub {
  margin-left: 4px;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--muted);
}
/* Facts as a tidy grid: wraps cleanly, no dividers left hanging. */
.feat-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, max-content));
  gap: 12px 32px;
}
.feat-facts > div,
.feat-facts > div:first-child {
  padding: 0;
  border: 0;
}
.feat-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

/* ===== Type system: Geist for words, Geist Mono for labels and numbers =====
   Medium-weight headings with tight tracking, mono uppercase labels,
   light body copy, and every number in mono so columns line up. */
body {
  font-family: var(--body);
  font-weight: 400;
}
h1,
h2,
h3,
.page-title,
.dash-name,
.feat-id h2,
.m-title .sym {
  font-weight: 500;
  letter-spacing: -0.03em;
}
.section-head h2,
.dash-card-head h2,
.card-head h2,
.rail-head h3 {
  font-weight: 500;
  letter-spacing: -0.015em;
}
.soft {
  color: var(--muted);
}

.eyebrow,
.dash-eyebrow,
.side-label,
.ladder-head,
.table th,
.mini-head,
.feat-kicker,
.feat-side-head,
.sum-label,
.record-grid dt,
.m-facts dt,
.feat-facts dt,
.hero-facts dt.caps {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow,
.dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tick,
.num,
.points,
.count,
.count-badge,
.o-pct,
.fo-val,
.sum-value,
.m-facts dd,
.feat-facts dd,
.record-grid dd,
.gauge b,
.qp b,
.rail-list b,
.dash-ledger b,
.side-n,
.featured h1 .countdown,
.pill-pts {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

p,
.muted,
.feat-q,
.feat-hint,
.home-note {
  line-height: 1.6;
}
.muted {
  font-weight: 400;
}

.btn,
.card-title,
.o-name,
.fo-name {
  font-weight: 500;
}
.rung .pool-col {
  white-space: nowrap;
}
.rung .pool-col small {
  margin-left: 4px;
  font-family: var(--body);
  font-weight: 400;
}

/* ===== Home hero: one-line pitch, live numbers, the next market to close ===== */
.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  padding: 40px 40px 36px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 100%,
    var(--surface);
  background-blend-mode: normal;
}
.home-hero::before {
  /* Fade the grid so it sits behind the words, not on top of them. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 70%, transparent) 65%, color-mix(in srgb, var(--surface) 40%, transparent));
  pointer-events: none;
}
.hero-art {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 78%;
  color: var(--up);
  opacity: 0.55;
  pointer-events: none;
}
.hero-copy,
.hero-next {
  position: relative;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-badge svg {
  width: 14px;
  height: 14px;
}
.home-hero h1 {
  margin: 0;
  max-width: 15em;
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--text);
}
.hero-sub {
  margin: 18px 0 0;
  max-width: 36em;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--muted);
}
.hero-sub b {
  font-weight: 500;
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.hero-stats div {
  margin: 0;
}
.hero-stats dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-stats dd {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
}
/* Top payout: only the number moves. It uses the theme's green (dark on light, bright on dark), so it
   stays sharp in both themes, with a marker-pen highlight that swipes under it and a periodic pop. */
.hero-stats dd .hero-top {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0 0.12em;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1;
  color: var(--up);
  text-shadow: 0 0 14px color-mix(in srgb, var(--up) 40%, transparent);
  transform-origin: left bottom;
  /* Pops a few times when Home opens, then rests, so an idle Home costs no CPU. */
  animation: hero-top-pop 3.2s ease-in-out 3;
}
.hero-stats dd .hero-top::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0.02em;
  height: 0.5em;
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--up) 24%, transparent);
  transform-origin: left center;
  animation: hero-top-marker 3.2s ease-in-out 3;
}
@keyframes hero-top-pop {
  0%, 62%, 100% { transform: scale(1); }
  70% { transform: scale(1.12); }
  80% { transform: scale(0.98); }
  88% { transform: scale(1.03); }
}
@keyframes hero-top-marker {
  0% { transform: scaleX(0); }
  30%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}
/* In play: each changed digit rolls like a timer, the old one sliding out as the new one comes in
   from below (from above when the total drops). */
.odo {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}
.odo-d {
  position: relative;
  display: inline-block;
  width: 1ch;
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  text-align: center;
  vertical-align: bottom;
}
.odo-sep {
  line-height: 1.2em;
}
.odo-d.is-roll > span {
  position: absolute;
  inset: 0;
}
.odo-up .odo-out { animation: odo-out-up 0.32s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
.odo-down .odo-out { animation: odo-out-down 0.32s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
.odo-down .odo-in { animation: odo-in-down 0.32s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.odo-up .odo-in {
  color: var(--up);
  animation: odo-in-up 0.32s cubic-bezier(0.3, 0.7, 0.3, 1) both, odo-tint 0.9s ease forwards;
}
@keyframes odo-out-up { to { transform: translateY(-100%); opacity: 0; } }
@keyframes odo-in-up { from { transform: translateY(100%); opacity: 0; } }
@keyframes odo-out-down { to { transform: translateY(100%); opacity: 0; } }
@keyframes odo-in-down { from { transform: translateY(-100%); opacity: 0; } }
@keyframes odo-tint { to { color: inherit; } }
@media (prefers-reduced-motion: reduce) {
  .odo-d.is-roll > span { animation: none; }
  .odo-out { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stats dd .hero-top,
  .hero-stats dd .hero-top::before { animation: none; }
}
.hero-next {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.hero-next:hover {
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
  transform: translateY(-2px);
}
.hero-next-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-next-head .st {
  font-family: var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.hero-next-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-next-id b {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero-next-id small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.hero-next-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hero-next-facts small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-next-facts b {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hero-next .btn {
  justify-content: center;
}
.hero-next-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-next-head .i {
  width: 13px;
  height: 13px;
  color: var(--gold, #f5b544);
}
.hero-deck {
  position: relative;
  display: grid;
  gap: 12px;
  align-self: center;
}
/* A 3D stack: the front card, with the next markets as layers peeking out behind it.
   Each card's depth (--d: 0 front, 1, 2, 3 hidden at the back) sets where it sits. */
.hero-slides {
  --step: 18px;
  position: relative;
  display: grid;
  perspective: 1600px;
  perspective-origin: 50% 0%;
  isolation: isolate;
}
.hero-deck.has-many .hero-slides {
  padding-top: calc(var(--step) * 2);
}
.hero-deck.has-many:hover .hero-slides {
  --step: 24px;
}
.hero-slide {
  --d: 0;
  position: relative;
  grid-area: 1 / 1;
  z-index: calc(10 - var(--d));
  transform-origin: 50% 0%;
  transform: translateY(calc(var(--d) * var(--step) * -1)) translateZ(calc(var(--d) * -60px)) rotateX(calc(var(--d) * 2deg));
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.5s;
  will-change: transform;
}
.hero-slide:not(.is-on) {
  pointer-events: none;
}
/* Cards further back are dimmed by a black layer: animating its opacity is cheap, unlike a filter. */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 16px;
  background: #000;
  opacity: calc(var(--d) * 0.22);
  pointer-events: none;
  transition: opacity 0.7s;
}
.hero-slide.is-far {
  opacity: 0;
}
.hero-slide.is-out {
  animation: deck-to-back 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}
/* The front card drops forward and down, fades, then slips in at the back of the stack. */
@keyframes deck-to-back {
  0% {
    z-index: 30;
    opacity: 1;
    transform: none;
  }
  32% {
    z-index: 30;
    opacity: 0;
    transform: translateY(90px) translateZ(60px) rotateX(-18deg) scale(0.98);
  }
  46% {
    z-index: 0;
    opacity: 0;
    transform: translateY(calc(var(--step) * -3)) translateZ(-200px);
  }
}
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.hero-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width 0.25s, background 0.25s;
}
.hero-dots button[aria-current='true'] {
  width: 18px;
  background: var(--text);
}
/* Reduced motion: the layers still step forward, gently, without the 3D drop. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: transform 0.5s ease, opacity 0.4s;
  }
  .hero-slide.is-out {
    animation: deck-fade-back 0.6s ease;
  }
}
@keyframes deck-fade-back {
  0% {
    z-index: 30;
    opacity: 1;
    transform: none;
  }
  40% {
    z-index: 30;
    opacity: 0;
    transform: none;
  }
  41% {
    z-index: 0;
    opacity: 0;
  }
}
.side-soon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
  padding: 0 10px;
  min-height: 36px;
  color: var(--muted);
  font-size: 13px;
  opacity: 0.75;
}
.side-soon .i {
  width: 16px;
  height: 16px;
}
.side-soon .soon {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.home-head .home-sort {
  margin-left: auto;
}
@media (max-width: 1100px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) 280px;
    padding: 32px;
  }
}
@media (max-width: 860px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .home-hero::before {
    background: linear-gradient(180deg, var(--surface) 45%, color-mix(in srgb, var(--surface) 55%, transparent));
  }
  .hero-stats {
    gap: 12px 24px;
  }
  .hero-stats dd {
    font-size: 17px;
  }
}
@media (max-width: 640px) {
  .home-hero h1 {
    font-size: 28px;
  }
  .hero-sub {
    font-size: var(--fs-base);
  }
  .hero-badge {
    font-size: 10px;
    margin-bottom: 16px;
  }
}
@media (max-width: 640px) {
  .hero-art,
  .hero-next,
  .hero-badge-more {
    display: none;
  }

  .home-hero {
    background: var(--surface);
    padding: 24px 20px 20px;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
  }
  .hero-stats dt {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .hero-stats dd {
    font-size: 16px;
  }
}
.hero-badge {
  color: color-mix(in srgb, var(--gold) 62%, var(--text));
}

/* Featured market: details get the room, outcomes become a slim pick list. */
@media (min-width: 1241px) {
  .feat {
    grid-template-columns: minmax(0, 1fr) 232px;
  }
  .feat-main {
    padding: 32px 36px;
    gap: 18px;
  }
  .feat-q {
    max-width: 34em;
  }
  .feat-facts {
    flex-wrap: nowrap;
    gap: 12px 40px;
  }
  .feat-side .fo-range {
    display: none;
  }
  .feat-side .fo-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 20px;
  }
  .feat-side-head {
    padding-left: 20px;
    padding-right: 20px;
  }
  .feat-side .fo-val {
    min-width: 0;
  }
}

/* ===== Earn page: header, one claim bar, tasks beside a slim sidebar ===== */
.earn2 {
  max-width: 1120px;
  margin: 0 auto;
}
.earn2-head {
  display: grid;
  gap: 10px;
  margin-bottom: 28px;
}
.earn2-head .page-title {
  margin: 0;
  font-size: clamp(28px, 3vw, 36px);
}
.earn2-head .page-lede {
  margin: 0;
  max-width: 40em;
  color: var(--muted);
}
.earn2 .claim-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 24px;
  padding: 18px 22px;
  border-radius: 16px;
  box-shadow: none;
}
.earn2 .claim-card.is-empty {
  border-color: var(--line);
  background: var(--surface);
}
.earn2 .claim-amount {
  gap: 14px;
}
.earn2 .claim-amount > div {
  gap: 2px;
}
.earn2 .claim-amount b {
  font-family: var(--body);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.earn2 .claim-card.has-claim .claim-amount b {
  font-family: var(--mono);
  font-size: var(--fs-lg);
}
.earn2 .claim-amount .muted {
  font-size: var(--fs-sm);
}
.earn2 .claim-card.is-empty .claim-ico {
  opacity: 0.7;
}
.earn2 .claim-side {
  flex: 0 1 auto;
  max-width: 380px;
  justify-items: end;
  text-align: right;
}
.earn2 .claim-side .btn {
  min-width: 220px;
  justify-content: center;
}
.earn2 .claim-side .fine {
  font-size: var(--fs-meta);
}

.earn2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.earn2-main,
.earn2-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.earn2-main .panel {
  margin: 0;
}
.earn2-side .earn-card {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 20px;
}
.earn2-side .earn-card p {
  margin: 0;
}
.earn2-side .card-head h2 {
  font-size: var(--fs-md);
}
.earn2-side .copy-row input {
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.earn2-side .earn-card > .btn {
  justify-self: start;
}
.earn2-side .ref-stats {
  margin: 0;
}
.earn2-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
}
.earn2-empty p {
  margin: 0;
  line-height: 1.55;
}
.earn2-empty b {
  color: var(--text);
  font-weight: 500;
}
.earn2-empty .i {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (max-width: 960px) {
  .earn2-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .earn2 .claim-card {
    flex-direction: column;
    align-items: stretch;
  }
  .earn2 .claim-side {
    max-width: none;
    justify-items: stretch;
    text-align: left;
  }
  .earn2 .claim-side .btn {
    min-width: 0;
    width: 100%;
  }
}
.earn2 .claim-card.has-claim .claim-amount b {
  font-family: var(--body);
  font-size: var(--fs-lg);
}
.earn2 .claim-amount .num {
  font-size: 1.2em;
}
.earn2 .claim-side .fine {
  max-width: 340px;
  line-height: 1.6;
}
.earn2 .claim-side .switch {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.earn2-side .copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.earn2-side .copy-row input {
  min-width: 0;
  width: 100%;
}

/* ===== Testnet launch card, coin collecting, and smoother page changes ===== */
.dot-live {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
}
.dot-live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--up);
  opacity: 0;
  animation: live-ping 2.4s ease-out 6;
}
@keyframes live-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

a.hero-badge-live {
  border-color: color-mix(in srgb, var(--up) 40%, var(--line));
  background: color-mix(in srgb, var(--up) 9%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s;
}
a.hero-badge-live:hover {
  border-color: var(--up);
  background: color-mix(in srgb, var(--up) 15%, transparent);
}
a.hero-badge-live .i {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}
a.hero-badge-live:hover .i {
  transform: translateX(3px);
}

.testnet-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    'coins copy steps'
    'coins actions steps';
  align-items: center;
  gap: 14px 28px;
  margin-bottom: 24px;
  padding: 24px 28px 28px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 55%),
    var(--surface);
}
.tn-coins {
  grid-area: coins;
  position: relative;
  width: 64px;
  height: 64px;
}
.tn-coins i {
  position: absolute;
  left: 8px;
  width: 48px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe680, #d9a400);
  box-shadow: inset 0 -2px 0 rgba(120, 85, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: coin-bob 2.8s ease-in-out 6;
}
.tn-coins i:nth-child(1) { top: 40px; }
.tn-coins i:nth-child(2) { top: 28px; animation-delay: 0.15s; }
.tn-coins i:nth-child(3) { top: 16px; animation-delay: 0.3s; }
@keyframes coin-bob {
  50% { transform: translateY(-4px); }
}
.tn-copy {
  grid-area: copy;
  display: grid;
  gap: 8px;
}
.tn-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--up);
}
.testnet-card h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.tn-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.tn-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tn-steps {
  grid-area: steps;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tn-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  transition: border-color 0.25s, background-color 0.25s;
}
.tn-steps b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.tn-steps small {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted);
}
.tn-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.tn-n .i {
  width: 14px;
  height: 14px;
}
.tn-steps li.done {
  opacity: 0.75;
}
.tn-steps li.done .tn-n {
  border-color: var(--up);
  background: var(--up);
  color: #04130a;
}
.tn-steps li.next {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.tn-steps li.next .tn-n {
  border-color: var(--brand);
  color: var(--brand);
}
.tn-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--line);
}
.tn-progress i {
  display: block;
  height: 100%;
  width: calc(var(--done, 0) * 100%);
  background: linear-gradient(90deg, var(--up), var(--gold));
  transition: width 0.6s var(--ease-out);
}
.tn-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.tn-close:hover {
  background: var(--surface-2);
  color: var(--text);
}
.tn-close .i {
  width: 14px;
  height: 14px;
}

/* Coins that fly into the balance, and the balance's reaction. */
.coin-fly {
  position: fixed;
  top: -11px;
  left: -11px;
  z-index: 1000;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 50%, #ffe45c 0 46%, #e0a800 47% 52%, #ffd60a 53% 70%, #b58300 100%);
  box-shadow:
    inset 0 -2px 0 rgba(120, 80, 0, 0.45),
    0 0 10px rgba(255, 214, 10, 0.55),
    0 0 22px rgba(255, 190, 0, 0.25);
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: visible;
}
.coin-pop {
  position: fixed;
  z-index: 999;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 140, 0.95), rgba(255, 214, 10, 0.35) 50%, transparent 70%);
  pointer-events: none;
  animation: coin-pop 0.6s var(--ease-out) forwards;
}
@keyframes coin-pop {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(9); opacity: 0; }
}
.pts-tick {
  animation: pts-tick 0.18s var(--ease-out);
}
@keyframes pts-tick {
  50% { transform: scale(1.05); border-color: color-mix(in srgb, var(--gold) 60%, var(--line-strong)); }
}
.pts-hit {
  animation: pts-hit 0.7s var(--ease-out);
}
@keyframes pts-hit {
  25% {
    transform: scale(1.14);
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 16%, var(--surface));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent), 0 0 28px color-mix(in srgb, var(--gold) 45%, transparent);
  }
  60% { transform: scale(0.98); }
}
.pts-burst {
  position: fixed;
  z-index: 1001;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pts-burst i {
  position: absolute;
  border-radius: 50%;
}
.pb-ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--gold);
  animation: pb-ring 0.6s var(--ease-out) forwards;
}
@keyframes pb-ring {
  from { transform: scale(0.3); opacity: 0.9; }
  to { transform: scale(1.8); opacity: 0; border-width: 0.5px; }
}
.pb-spark {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: #ffe45c;
  box-shadow: 0 0 6px var(--gold);
  animation: pb-spark 0.7s var(--ease-out) forwards;
}
@keyframes pb-spark {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.pts-gain {
  position: fixed;
  z-index: 1001;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe45c, var(--gold));
  color: #1a1400;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px -6px rgba(255, 200, 0, 0.6);
  pointer-events: none;
  animation: pts-gain 1.4s var(--ease-out) forwards;
}
.pts-gain .i {
  width: 13px;
  height: 13px;
}
@keyframes pts-gain {
  0% { opacity: 0; transform: translate(-50%, -8px) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  30% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 8px); }
}

/* The reward toast: brand coin, the amount in gold, the streak line and the week's pips. */
#toast.reward {
  padding: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line-strong));
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 40px -12px color-mix(in srgb, var(--gold) 30%, transparent);
  text-align: left;
  font-weight: 500;
  overflow: hidden;
  transform: translate(-50%, 24px) scale(0.92);
  transition: opacity 200ms, transform 200ms;
}
#toast.reward.show {
  transform: translate(-50%, 0) scale(1);
  transition: opacity 260ms, transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
#toast.reward::before {
  /* A soft gold glow behind the coin, and a sheen that crosses once. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 80px at 34px 50%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%) no-repeat;
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 150% 0;
  pointer-events: none;
}
#toast.reward.show::before {
  animation: rt-sheen 1.1s 0.25s var(--ease-out) both;
}
@keyframes rt-sheen {
  to { background-position: 0 0, -60% 0; }
}
.rt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
}
.rt-coin {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--warn);
  background: color-mix(in srgb, var(--gold) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--gold) 55%, transparent);
}
.rt-coin .i {
  width: 24px;
  height: 24px;
}
#toast.reward.show .rt-coin {
  animation: rt-coin 0.7s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes rt-coin {
  from { transform: scale(0.4) rotate(-40deg); }
}
.rt-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.rt-amt {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.rt-amt small {
  margin-left: 6px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text);
}
.rt-sub,
.rt-note {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.rt-sub .i {
  width: 14px;
  height: 14px;
  color: #ff8a3d;
}
.rt-sub b {
  color: var(--text);
  font-weight: 600;
}
.rt-dot {
  opacity: 0.5;
  margin: 0 2px;
}
.rt-note {
  font-size: 12px;
}
.rt-week {
  display: flex;
  gap: 3px;
  margin-left: 4px;
  align-self: center;
}
.rt-week i {
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: var(--line-strong);
}
.rt-week i.on {
  background: var(--gold);
}
#toast.reward.show .rt-week i.now {
  animation: rt-pip 0.6s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow: 0 0 8px var(--gold);
}
@keyframes rt-pip {
  from { transform: scaleY(0.2); background: var(--line-strong); box-shadow: none; }
}
@media (max-width: 380px) {
  .rt-week {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #toast.reward,
  #toast.reward.show {
    transform: translate(-50%, 0);
    transition: opacity 160ms;
  }
  #toast.reward.show::before,
  #toast.reward.show .rt-coin,
  #toast.reward.show .rt-week i.now,
  .pts-hit,
  .pts-tick {
    animation: none;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Page changes: the fade and rise is run from app.js (enterView) with the Web Animations API. */

/* Touch and scrolling feel. */
html {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
.rung,
.fo-row,
.chip {
  touch-action: manipulation;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tn-coins i,
  .dot-live::after,
  .pts-hit,
  .pts-gain {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .testnet-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'coins copy'
      'steps steps'
      'actions actions';
  }
  .tn-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .testnet-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'copy' 'steps' 'actions';
    padding: 20px 18px 22px;
    border-radius: 16px;
  }
  .tn-coins {
    display: none;
  }
  .tn-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .tn-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
.testnet-card:has(.tn-close) {
  padding-right: 56px;
}
@media (max-width: 640px) {
  .testnet-card:has(.tn-close) {
    padding-right: 18px;
  }
  .testnet-card:has(.tn-close) .tn-copy {
    padding-right: 32px;
  }
}

/* Admin: start price with the "upcoming token" option underneath. */
.price-field {
  display: grid;
  gap: 8px;
  align-content: start;
}
.price-field .upcoming-check {
  font-size: var(--fs-sm);
}
.price-field small {
  font-size: var(--fs-meta);
  line-height: 1.5;
}
.price-field input:disabled {
  opacity: 0.6;
}
.price-field {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: end;
  column-gap: 14px;
}
.upcoming-opt {
  display: grid;
  gap: 6px;
  padding-bottom: 4px;
}
.upcoming-opt .upcoming-check {
  justify-self: start;
}
@media (max-width: 640px) {
  .price-field {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Upcoming tokens: not trading yet ===== */
.st-soon {
  color: var(--gold);
}
.card-upcoming {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--gold) 55%, var(--text));
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.card-upcoming .i,
.pill-soon .i {
  width: 12px;
  height: 12px;
}
.pill-soon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: color-mix(in srgb, var(--gold) 55%, var(--text));
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.card-soon {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.card-soon .i {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--gold);
}
.m-upcoming {
  display: flex;
  gap: 12px;
  margin: 4px 0 2px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.m-upcoming > .i {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--gold);
}
.m-upcoming b {
  font-weight: 500;
}
.m-upcoming p {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}
.st-soon {
  color: color-mix(in srgb, var(--gold) 55%, var(--text));
}
.st-soon i {
  background: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* Wallet choices with each wallet's own logo. */
a.wallet-option {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.wallet-option img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.wallet-option .muted {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.wallet-option .muted .i {
  width: 14px;
  height: 14px;
}
.no-wallet .wallet-options {
  margin-top: 0;
}
.wallet-logo {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line);
}
.dash-wallets .wallet-logo + .dw-main {
  flex: 1;
}

/* ===== Admin: live price checks, UTC hints, logo copy status ===== */
.checks-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.checks-note .i {
  width: 16px;
  height: 16px;
}
.checks-note.ok {
  color: var(--up);
}
.checks .section-head {
  margin-bottom: 12px;
}
.check-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.check-list.compact li {
  grid-template-columns: 10px minmax(0, 1fr);
  padding: 10px 12px;
}
.check-list p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.check-list p .btn {
  margin-left: 6px;
  vertical-align: middle;
}
.check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--flat);
}
.check-list .lvl-high {
  border-color: color-mix(in srgb, var(--crash) 45%, var(--line));
  background: color-mix(in srgb, var(--crash) 7%, var(--surface));
}
.check-list .lvl-high .check-dot {
  background: var(--crash);
}
.check-list .lvl-medium .check-dot {
  background: var(--down);
}
.check-list .lvl-ok .check-dot {
  background: var(--up);
}
.price-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.price-check > .muted {
  font-size: var(--fs-meta);
}
#price-check-out {
  flex-basis: 100%;
  display: grid;
  gap: 10px;
}
#price-check-out:empty {
  display: none;
}
.pc-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pc-chip {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--fs-meta);
}
.pc-chip b {
  font-family: var(--body);
  font-weight: 500;
  margin-right: 4px;
}
.pc-chip.off {
  color: var(--muted);
}
.utc-hint {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.logo-status {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.logo-status:empty {
  display: none;
}
.logo-status.ok {
  color: var(--up);
}
.logo-status.bad {
  color: var(--down);
}
@media (max-width: 640px) {
  .check-list li {
    grid-template-columns: 10px minmax(0, 1fr);
  }
  .check-list li > .btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* Admin: new listings queue, live price fill, Telegram setup */
.todo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.live-fill {
  margin-top: 6px;
  justify-self: start;
  width: fit-content;
}
.tg-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--text-2, var(--muted));
}
.tg-steps code,
.tg-code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  color: var(--text);
}
.tg-code {
  font-size: 15px;
  font-weight: 600;
  user-select: all;
}
@media (max-width: 640px) {
  .todo li .todo-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Telegram channel: market page button, dashboard card */
.m-head-actions {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  gap: 8px;
  flex: none;
}
.m-head-actions .share-btn {
  margin-left: 0;
}
.tg-join svg {
  color: #229ed9;
}
.tg-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
}
.tg-card b {
  display: block;
  margin-bottom: 2px;
}
.tg-card p {
  margin: 0;
  font-size: 13px;
}
.tg-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, #229ed9 16%, transparent);
  color: #229ed9;
}
.tg-logo svg {
  width: 22px;
  height: 22px;
}
/* The button sits under the text it belongs to, not under the logo. */
.tg-card .tg-join {
  grid-column: 2;
  justify-self: start;
}
.tg-channel-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
.tg-channel-form input {
  flex: 1 1 220px;
  max-width: 320px;
}

/* Daily streak: day tiles and the month calendar */
.streak-card {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
.st-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.st-flame {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--flat) 14%, transparent);
  color: var(--flat);
}
.st-flame.lit {
  background: color-mix(in srgb, var(--down) 18%, transparent);
  color: var(--down);
}
.st-flame svg {
  width: 24px;
  height: 24px;
}
.st-head > div {
  display: grid;
}
.st-count {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.st-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--up);
  font-weight: 600;
}
.st-note svg {
  width: 15px;
  height: 15px;
}
.st-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.st-day {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}
.st-day .st-n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}
.st-day b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.st-day .st-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.st-day .st-ico svg {
  width: 13px;
  height: 13px;
}
.st-day.next b {
  color: var(--muted);
}
.st-day.done {
  border-color: color-mix(in srgb, var(--up) 40%, var(--line));
  background: color-mix(in srgb, var(--up) 9%, var(--surface));
}
.st-day.done .st-ico {
  background: var(--up);
  color: #fff;
}
.st-day.today {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent);
}
.st-day.today b {
  color: var(--warn);
}
.st-day.today .st-ico {
  color: var(--warn);
}
.st-day:last-child b::after {
  content: '';
}
.st-rule {
  margin: 0;
  font-size: 13px;
}
.st-cal {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.st-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 14px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  max-width: 420px;
}
.cal-wd {
  text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}
.cal-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  border: 1px solid transparent;
}
.cal-cell.hit {
  background: color-mix(in srgb, var(--up) 18%, transparent);
  color: var(--up);
  font-weight: 650;
}
.cal-cell.is-today {
  border-color: var(--warn);
  color: var(--text);
}
.cal-cell.future {
  opacity: 0.45;
}
.cal-cell.blank {
  visibility: hidden;
}
.streak-card.compact .st-day {
  padding: 9px 2px 8px;
}
.streak-card.compact .st-day b {
  font-size: 14px;
}
.streak-card.compact .st-day .st-n {
  font-size: 10px;
}
@media (max-width: 560px) {
  .st-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .st-head > .btn,
  .st-head > .st-note {
    grid-column: 1 / -1;
  }
  .st-days {
    gap: 5px;
  }
  .st-day {
    padding: 9px 2px 8px;
    border-radius: 11px;
  }
  .st-day b {
    font-size: 14px;
  }
  .st-day .st-n {
    font-size: 9.5px;
    letter-spacing: 0;
  }
}

/* Analytics: tiles, charts and the partner page. Chart colours are validated for both themes. */
.viz-page {
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  display: grid;
  gap: 16px;
}
:root[data-theme='light'] .viz-page {
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .viz-page {
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
  }
}
.viz-page.shared {
  max-width: 1100px;
  margin: 0 auto;
}
.viz-head .page-lede {
  max-width: 640px;
}
.viz-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.viz-filters .muted {
  font-size: 13px;
}
.viz-filters .tabs {
  margin: 0;
}
.viz-filters .viz-export {
  margin-left: auto;
}
.viz-section-head {
  margin: 8px 0 -2px;
}
.viz-section-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 18px;
}
.viz-section-head h2 svg {
  width: 18px;
  height: 18px;
}
.viz-section-head p {
  margin: 0;
  font-size: 13px;
}
.viz-section-head a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hbar .flag {
  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.viz-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .viz-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.viz-tile {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.viz-tile-label {
  font-size: 13px;
  color: var(--muted);
}
.viz-tile-value {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.viz-tile-sub {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}
.viz-delta {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.viz-delta.up {
  color: var(--up);
}
.viz-delta.down {
  color: var(--crash);
}
.viz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.viz-card {
  display: grid;
  gap: 12px;
  align-content: start;
  margin: 0;
}
.viz-card.wide {
  grid-column: 1 / -1;
}
.viz-card-head h3 {
  margin: 0;
  font-size: 16px;
}
.viz-card-head p {
  margin: 2px 0 0;
  font-size: 13px;
}
svg.viz {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.viz-grid line.viz-grid,
.viz .viz-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.viz .viz-axis {
  fill: var(--muted);
  font-size: 11px;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.viz .viz-bar {
  fill: var(--viz-1);
}
.viz .viz-line {
  fill: none;
  stroke: var(--viz-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.viz .viz-area {
  fill: var(--viz-1);
  opacity: 0.1;
}
.viz .viz-end,
.viz .viz-pt {
  fill: var(--viz-1);
  stroke: var(--surface);
  stroke-width: 2;
}
.viz .viz-end-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.viz .viz-hit {
  fill: transparent;
}
.viz .viz-guide {
  stroke: var(--line-strong);
  stroke-width: 1;
  opacity: 0;
}
.viz .viz-pt {
  opacity: 0;
}
.viz-slot:hover .viz-guide,
.viz-slot:hover .viz-pt {
  opacity: 1;
}
.viz-slot:hover .viz-bar {
  opacity: 0.75;
}
.viz-stack {
  display: flex;
  gap: 2px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
}
.viz-stack i {
  display: block;
  min-width: 4px;
}
.viz-stack i:hover {
  opacity: 0.8;
}
.viz-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.viz-legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
}
.viz-legend li .muted {
  text-align: right;
  font-size: 13px;
}
.viz-key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.hbars {
  display: grid;
  gap: 10px;
}
.hbar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.hbar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hbar-label .muted {
  font-size: 12.5px;
}
.hbar-track {
  height: 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--viz-1) 10%, transparent);
  overflow: hidden;
}
.hbar-track i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--viz-1);
}
.hbar b {
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
}
.viz-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.viz-extra div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.viz-extra b {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.viz-extra span {
  font-size: 12.5px;
  color: var(--muted);
}
.viz-table summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.viz-table .table-wrap {
  margin-top: 10px;
  max-height: 360px;
  overflow: auto;
}
.viz-share {
  margin-bottom: 16px;
}
.viz-share input {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  max-width: none !important;
}
#viz-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  pointer-events: none;
  display: grid;
  gap: 1px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--raised, var(--surface));
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 12.5px;
  color: var(--muted);
}
#viz-tip b {
  color: var(--text);
  font-size: 14px;
}
#viz-tip[hidden] {
  display: none;
}
svg.viz.viz-narrow {
  display: none;
}
@media (max-width: 760px) {
  svg.viz.viz-wide {
    display: none;
  }
  svg.viz.viz-narrow {
    display: block;
  }
  .viz-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .viz-tile-value {
    font-size: 24px;
  }
  .hbar {
    grid-template-columns: minmax(0, 1fr) 90px auto;
  }
}

/* ===== Admin: exchange check (Settings) ===== */
.ex-check {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.ex-check li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-width: 0;
}
.ex-check small {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.ex-verdict {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.ex-verdict.pass {
  color: var(--up);
}
.ex-verdict.fail {
  color: var(--crash);
}

/* ===== Admin: Telegram banner preview on the market form ===== */
.banner-check {
  display: grid;
  gap: 8px;
}
.banner-check > .btn {
  justify-self: start;
}
.banner-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* ===== Shareable PnL card ===== */
.pnl-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #07080c;
  aspect-ratio: 1200 / 630;
}
.pnl-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.pnl-actions .btn {
  justify-content: center;
}
.my-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.pnl-mini {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 8px;
  vertical-align: middle;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pnl-mini:hover {
  color: var(--text);
  border-color: var(--text);
}
.pnl-mini .i {
  width: 15px;
  height: 15px;
}
.inbox li:has(.pnl-mini) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* ===== Admin: markets that open by themselves ===== */
.auto-open {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.auto-open[hidden],
.auto-open-at[hidden] {
  display: none;
}
.auto-open-at {
  display: grid;
  gap: 4px;
}
.auto-note {
  display: block;
  margin-top: 4px;
  max-width: 280px;
}

/* ===== Admin: Settings → Team ===== */
.team-list {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.team-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.team-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.team-who .i {
  width: 16px;
  height: 16px;
  flex: none;
}
.team-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}
@media (max-width: 560px) {
  .team-form {
    grid-template-columns: 1fr;
  }
}

/* ===== Dashboard: Firstprint wallet and on-chain activity ===== */
.fp-wallet {
  display: inline-grid;
  place-items: center;
  color: var(--accent, var(--up));
}
.fp-wallet .i {
  width: 18px;
  height: 18px;
}
.chain-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chain-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chain-list li > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.kpis-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.kpis-mini dt {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.kpis-mini dd {
  margin: 2px 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-wallets button.dw-link {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--muted);
  cursor: pointer;
}
.dash-wallets button.dw-link:hover {
  color: var(--text);
}

/* Card footer: status, pool and exchange on one line, the time on its own line, never spilling out. */
.mcard .card-foot {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
}
.mcard .card-foot .when {
  flex: 1 0 100%;
  margin-left: 0;
  padding-left: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard .card-foot .card-ex {
  min-width: 0;
  flex: 0 1 auto;
}

/* Featured facts: side by side, each only as wide as it needs; they wrap on narrow screens. */
.feat-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}
.feat-facts dd {
  white-space: nowrap;
}
.feat-facts .feat-sub {
  display: block;
  margin: 2px 0 0;
}
@media (max-width: 640px) {
  .feat-facts {
    gap: 12px 22px;
  }
}

/* Featured panel as a flipping deck of the trending markets. */
.feat-deck .hero-slide > .feat {
  height: 100%;
}
.feat-kicker .i {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  color: var(--gold);
}
/* Closing-next card: the close time gets a full row so the date never breaks. */
.hero-next-facts > span:first-child {
  grid-column: 1 / -1;
}
.hero-next-facts b {
  white-space: nowrap;
}

/* ===== Daily streak in the top bar: a flame chip and a small pop-over ===== */
.streak-chip {
  position: relative;
  gap: 4px;
  padding: 0 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.streak-chip .i {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.streak-chip.lit .i {
  color: #ff9f0a;
}
.streak-chip.can-claim {
  border-color: color-mix(in srgb, #ff9f0a 55%, transparent);
  background: color-mix(in srgb, #ff9f0a 12%, var(--surface));
}
.streak-chip.can-claim .i {
  color: #ff9f0a;
  /* A few flickers to catch the eye; the orange chip keeps saying "claim me" after that. */
  animation: flameFlicker 1.8s ease-in-out 3;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.12) rotate(-4deg); }
  70% { transform: scale(0.96) rotate(3deg); }
}
.streak-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 2px var(--surface);
}
.streak-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 20px;
  z-index: 60;
  width: 320px;
  padding: 16px;
  display: grid;
  gap: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline-hi), 0 24px 48px -16px rgba(0, 0, 0, 0.55);
  animation: menuIn 160ms var(--ease-out);
}
.sp-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-head b {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
}
.sp-head small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.sp-flame {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
}
.sp-flame.lit {
  background: color-mix(in srgb, #ff9f0a 16%, transparent);
  color: #ff9f0a;
}
.sp-flame .i {
  width: 18px;
  height: 18px;
}
.sp-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-day {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.sp-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  color: #fff;
}
.sp-dot .i {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
.sp-day.done .sp-dot {
  border-color: var(--up);
  background: var(--up);
}
.sp-day.today .sp-dot {
  border-color: #ff9f0a;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f0a 22%, transparent);
}
.sp-day b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sp-day.next b {
  color: var(--muted);
}
.sp-day small {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}
.sp-claim {
  width: 100%;
  justify-content: center;
}
.sp-rule {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .streak-pop {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ===== Dashboard, portfolio style: balance and P/L cards, a stat strip, positions ===== */
.pf-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--dash-gap);
}
.pf-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pf-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pf-label .i {
  width: 14px;
  height: 14px;
}
.pf-value {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pf-value .unit {
  margin-left: 6px;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}
.pf-sub {
  margin: -6px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.pf-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 70%, transparent);
  overflow: hidden;
}
.pf-bar i {
  display: block;
  height: 100%;
  background: var(--up);
  border-right: 2px solid var(--surface);
}
.pf-split {
  display: flex;
  gap: 28px;
  margin: 0;
}
.pf-split dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.pf-split dd {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.pf-key {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.pf-key.avail {
  background: var(--up);
}
.pf-key.play {
  background: var(--gold);
}
.pf-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.pnl-range {
  display: inline-flex;
  margin-left: auto;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pnl-range button {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.pnl-range button[aria-pressed='true'] {
  background: var(--surface-2);
  color: var(--text);
}
.pnl-chart {
  display: block;
  width: calc(100% + 44px);
  height: 92px;
  margin: 4px -22px -20px;
}
.pnl-zero {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.pnl-line {
  fill: none;
  stroke-width: 2;
}
.pnl-line.up {
  stroke: var(--up);
}
.pnl-line.crash {
  stroke: var(--crash);
}
.pnl-flat {
  height: 1px;
  margin: 46px 0 45px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 7px);
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.stat-strip > div {
  padding: 14px 18px;
  min-width: 0;
}
.stat-strip > div + div {
  border-left: 1px solid var(--line);
}
.stat-strip dt {
  font-size: 11.5px;
  color: var(--muted);
}
.stat-strip dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-strip dd small {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
.pos-table td small.muted {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}
.pos-table .mkt-cell > span {
  display: grid;
}
.pos-note {
  margin: 10px 16px 14px;
}
@media (max-width: 900px) {
  .pf-top {
    grid-template-columns: minmax(0, 1fr);
  }
  .stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stat-strip > div:nth-child(4) {
    border-left: 0;
  }
  .stat-strip > div:nth-child(n + 4) {
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 480px) {
  .pf-value {
    font-size: 28px;
  }
  .stat-strip > div {
    padding: 12px;
  }
}

/* ===== Market cards: clean, and visibly live =====
   Motion only ever reflects what is real: the pulse and sheen are decoration, numbers tick only
   when they actually change, and "+N" appears only when new players join. */
.mcard {
  position: relative;
}
.mcard .o-row {
  position: relative;
  isolation: isolate;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 9px;
  overflow: hidden;
}
/* The crowd's share as a bar behind each outcome, like depth in an order book. */
.mcard .o-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  /* Stops short of the pick button: the share fills only the name and percentage. */
  width: calc((100% - 92px) * var(--sf, 0));
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border-radius: inherit;
  transition: width 0.8s var(--ease-out, ease);
}
.mcard .card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.card-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.card-act .i {
  width: 13px;
  height: 13px;
}
.card-act .tick {
  color: var(--text);
  font-weight: 500;
}
.card-act.quiet {
  font-style: normal;
}
/* "+N" when new players join, floating up from the corner. */
.card-bump {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--up) 18%, var(--surface));
  color: var(--up);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  animation: bumpUp 2.4s ease-out forwards;
}
@keyframes bumpUp {
  0% { opacity: 0; transform: translateY(8px) scale(0.9); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  70% { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-22px); }
}
.mcard.has-new {
  animation: cardGlow 1.6s ease-out;
}
@keyframes cardGlow {
  0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 55%, transparent), 0 0 24px -6px color-mix(in srgb, var(--up) 45%, transparent); }
  100% { box-shadow: 0 0 0 1px transparent, 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard .o-row::after {
    display: none;
  }
}

.mcard .o-row .qp-sm {
  width: 76px;
  justify-content: center;
}
.foot-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.card-timer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card-timer .i {
  width: 12px;
  height: 12px;
}
.card-timer.today {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 12%, transparent);
}
.card-timer.urgent {
  color: var(--crash);
  background: color-mix(in srgb, var(--crash) 14%, transparent);
}

/* ===== Admin → Find tokens ===== */
.discover {
  display: grid;
  gap: 16px;
}
.discover .section-head {
  align-items: center;
}
.discover .section-head > .btn {
  margin-left: auto;
}
.disc-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.disc-ex-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.disc-ex-item .btn {
  border: 0;
}
.disc-ex-item.on {
  border-color: color-mix(in srgb, var(--brand, #0a84ff) 60%, transparent);
  background: color-mix(in srgb, var(--brand, #0a84ff) 10%, transparent);
}
.disc-ex-item .icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--muted);
}
.disc-ex-item .icon-btn .i {
  width: 14px;
  height: 14px;
}
.disc-table td {
  vertical-align: middle;
}
.disc-table td small {
  display: block;
  font-size: 12px;
}
.disc-tok {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.disc-tok img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.disc-chg {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 12px;
}
.disc-chg.up { color: var(--up); }
.disc-chg.down { color: var(--crash); }
.disc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =====================================================================
   Admin, clean pass: smaller headings, numbers first, long help folded
   into "How it works", grouped market form.
   ===================================================================== */

.admin-main .panel {
  padding: 18px 20px;
  margin-bottom: 14px;
}
.admin-main .panel-flush {
  padding: 0;
}
.admin-main .panel-flush > .section-head {
  padding: 14px 20px 10px;
}
.admin-main .section-head {
  gap: 10px;
  margin-bottom: 12px;
}
.admin-main .section-head h2 {
  font-size: 16px;
}
.admin-main .section-head p {
  margin-top: 1px;
  font-size: 13px;
}
.admin-main .section-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.admin-main .section-ico .i {
  width: 16px;
  height: 16px;
}
.admin-top {
  margin-bottom: 16px;
  align-items: center;
}
.admin-top .page-title {
  margin: 0 0 2px;
}
.admin-top p {
  font-size: 14px;
}

/* Headline numbers */
.adm-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
  overflow: hidden;
}
.adm-stat {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s;
}
.adm-stat:hover {
  background: var(--surface-2);
}
.adm-stat:focus-visible {
  outline: 2px solid var(--focus, var(--brand));
  outline-offset: -2px;
}
.adm-stat-l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.adm-stat-l::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}
.adm-stat b {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.adm-stat small {
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 900px) {
  .adm-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adm-stat:last-child {
    grid-column: 1 / -1;
  }
}

/* One panel, a few tabs */
.adm-tabs {
  display: flex;
  gap: 4px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--line);
}
.adm-tabs button {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.adm-tabs button[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--text);
}
.adm-tabs button:focus-visible {
  outline: 2px solid var(--focus, var(--brand));
  border-radius: 6px;
}
.admin-main .todo {
  gap: 8px;
}
.admin-main .todo li {
  padding: 10px 12px;
}
.admin-main .todo-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

/* Folded sections */
.adm-collapse {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.adm-collapse > summary,
.adm-row > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.adm-collapse > summary::-webkit-details-marker,
.adm-row > summary::-webkit-details-marker,
.adm-how > summary::-webkit-details-marker,
.mf-more > summary::-webkit-details-marker {
  display: none;
}
.adm-collapse > summary::after,
.adm-row > summary::after,
.mf-more > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}
.adm-collapse[open] > summary::after,
.adm-row[open] > summary::after,
.mf-more[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}
.adm-collapse > summary .i {
  width: 16px;
  height: 16px;
}
.adm-collapse > summary .muted {
  font-size: 13px;
}
.adm-collapse > :not(summary) {
  margin: 0 16px 14px;
}
.adm-collapse-foot {
  display: flex;
  justify-content: flex-end;
}
.adm-warn > summary .i {
  color: var(--warn);
}
.adm-warn.high {
  border-color: color-mix(in srgb, var(--crash) 35%, var(--line));
}
.adm-warn.high > summary .i {
  color: var(--crash);
}
.adm-warn .check-list {
  margin-top: 0;
}

/* Results waiting: one row each, the form opens below */
.adm-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.adm-row + .adm-row {
  margin-top: 8px;
}
.adm-row > summary {
  padding: 10px 12px;
}
.adm-row-cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--crash);
}
.adm-row > summary::after {
  margin-left: 6px;
}
.adm-row .admin-result {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* "How it works" */
.adm-how {
  margin-top: 10px;
  font-size: 13px;
}
.adm-how > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 500;
}
.adm-how > summary::before {
  content: '' !important;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.adm-how[open] > summary::before {
  transform: rotate(45deg);
}
.adm-how > summary:hover {
  color: var(--text);
}
.adm-how > p {
  margin: 8px 0 0;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.55;
}
.admin-main .section-head .toggle.head-action {
  padding: 0;
  border: 0;
  background: none;
}

/* Market form */
.admin-main .mf {
  display: grid;
  gap: 0;
}
.mf-type {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.mf-type label {
  display: block !important;
  cursor: pointer;
}
.mf-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.mf-type span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.mf-type .i {
  width: 15px;
  height: 15px;
}
.mf-type input:checked + span {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.mf-type input:focus-visible + span {
  outline: 2px solid var(--focus, var(--brand));
}
.mf-type:disabled {
  opacity: 0.6;
}
.mf-hint {
  margin: 8px 0 4px;
  font-size: 13px;
  color: var(--muted);
}
.mf-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  font-size: 13px;
}
.mf-group {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.mf-h {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mf-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mf-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .mf-cols,
  .mf-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mf .utc-hint {
  margin-top: 4px;
}
.mf-fine {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.mf .upcoming-opt {
  display: grid;
  gap: 0;
}
.mf .upcoming-opt .adm-how {
  margin-top: 6px;
}
.mf .auto-open {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.mf .auto-open[hidden] {
  display: none;
}
.mf .auto-open .adm-how {
  margin-top: 0;
}
.mf-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mf #price-check-out:empty,
.mf #banner-preview-out:empty {
  display: none;
}
.mf .banner-check {
  margin: 0;
}
.mf-more {
  border-bottom: 1px solid var(--line);
}
.mf-more > summary {
  display: flex !important;
  align-items: center;
  padding: 16px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.mf-more > summary::before {
  content: none !important;
}
.mf-more > summary:hover {
  color: var(--text);
}
.mf-more > .mf-cols {
  padding-bottom: 18px;
}
.mf-actions {
  padding-top: 18px;
}

/* Logo row: icon and text side by side on the Upload button */
.admin-main .admin-form label.logo-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.logo-row .logo-link {
  flex: 1 1 220px;
}
.admin-main .mf-cols > label {
  align-content: start;
}
.mf-type label {
  position: relative;
}

/* "⋯" menu on admin table rows */
.row-menu {
  position: relative;
}
.row-menu > summary {
  list-style: none;
  padding-inline: 8px;
}
.row-menu > summary::-webkit-details-marker {
  display: none;
}
.row-menu > summary .i {
  margin: 0;
}
.row-menu-list {
  position: fixed;
  z-index: 60;
  display: grid;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--raised, var(--surface-2));
  box-shadow: var(--shadow-lg);
}
.row-menu-item {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.row-menu-item .i {
  width: 15px;
  height: 15px;
}
.row-menu-item.danger {
  color: var(--crash);
}

@media (max-width: 640px) {
  .admin-main .todo li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .admin-main .todo-ico {
    display: none;
  }
  .admin-main .todo li > .btn {
    grid-column: auto;
  }
  .admin-main .todo li .todo-actions {
    grid-column: 1 / -1;
  }
  .adm-collapse > summary .muted {
    display: none;
  }
  .adm-collapse > summary .count-badge + .muted,
  .adm-collapse > summary b + .muted {
    display: none;
  }
}

/* Market form: "Close in" presets and the price check link */
.mf-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
}
.mf-presets .muted {
  margin-right: 4px;
}
.mf-presets .chip-btn {
  all: unset;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.mf-presets .chip-btn:hover {
  border-color: var(--line-strong);
}
.mf-presets .chip-btn.on {
  border-color: var(--text);
  background: var(--surface-2);
}
.mf-presets .chip-btn:focus-visible {
  outline: 2px solid var(--focus, var(--brand));
}
.mf-verify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.mf-verify > .i {
  width: 15px;
  height: 15px;
  color: var(--up);
}
.mf-verify a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.mf-verify a .i {
  width: 13px;
  height: 13px;
}
.mf .upcoming-opt[hidden] {
  display: none;
}

/* Find tokens: a token that already got a market in this visit */
.disc-made {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--up);
  white-space: nowrap;
}
.disc-made .i {
  width: 15px;
  height: 15px;
}
.head-action.row-gap {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* A wide table scrolls inside its panel; it never widens the page. */
.admin-main {
  min-width: 0;
}

/* Markets priced at the close: the note on the market page, the Countdown tab intro and the result timer. */
.m-upcoming.m-atclose {
  border-color: color-mix(in srgb, var(--up) 30%, var(--line));
  background: color-mix(in srgb, var(--up) 6%, transparent);
}
.m-upcoming.m-atclose > .i {
  color: var(--up);
}
.countdown-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.countdown-note .i {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
}
.card-timer.card-timer-result {
  color: var(--text);
}
.mf-presets .muted {
  min-width: 108px;
}
.mf .start-close-check {
  width: fit-content;
  max-width: 100%;
}

/* The selected tab is marked in the text colour, not brand blue: white in dark mode, black in light mode.
   Blue stays for actions (buttons, links). */
.nav a[aria-current='page'] .i,
.tabbar a[aria-current='page'] .i,
.subnav a[aria-current='page'] .i,
.home-side button[aria-current='true'] .i,
.admin-nav button[aria-current='page'] .i,
.tabs button[aria-selected='true'] .i,
.tabs-scroll button[aria-selected='true'] .i {
  color: var(--text);
}
.dash-tabs button[aria-selected='true']::after {
  background: var(--text);
}
.dash-tabs.seg-on::before {
  background: var(--text);
}

/* How it works: the same type as the market cards above (16px titles, 14px muted body), not a bigger, bolder block. */
.steps {
  gap: 14px;
}
.steps li {
  padding: 18px;
}
.steps li::after {
  top: 16px;
  right: 18px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  opacity: 0.6;
}
.steps .step-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  margin-bottom: 12px;
}
.steps .step-ico .i {
  width: 18px;
  height: 18px;
}
.steps li > b {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.steps p {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.steps p .oc {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  white-space: nowrap;
}
.steps p .oc .i {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  vertical-align: -2px;
}
/* Icon tiles without their own colour use the text colour, not blue. */
.card-ico,
.tile-ico,
.todo-ico,
.start-ico,
.claim-ico {
  color: var(--c, var(--text));
  background: color-mix(in srgb, var(--c, var(--text)) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--text)) 18%, transparent);
}
.task-ico {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}
/* Old markets: "Close now" is the destructive one, in red; the "all" buttons sit together. */
.btn.btn-close-now {
  color: #fff;
  background: var(--crash);
  border-color: var(--crash);
}
.btn.btn-close-now:hover {
  background: color-mix(in srgb, var(--crash) 85%, #000);
  border-color: color-mix(in srgb, var(--crash) 85%, #000);
}
.adm-fix-all {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
/* "All markets" under Trending on the home page. */
.home-head.home-subhead {
  margin-top: 32px;
  align-items: center;
  gap: 10px;
}
.home-subhead .side-n {
  font-size: 13px;
}
/* Price warnings: the actions beside each, and the switch-all bar at the top. */
.check-list li .check-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-warn-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 12px;
}
.adm-warn-all p {
  margin: 0;
  font-size: 13px;
}

/* Plain toasts: a quiet dark card instead of a bright white pill. */
#toast {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: var(--shadow-lg);
  max-width: min(360px, calc(100vw - 32px));
  transform: translate(-50%, 12px) scale(0.98);
  transition: opacity 180ms, transform 260ms var(--ease-out);
}
#toast.show {
  transform: translate(-50%, 0) scale(1);
}
#toast.error {
  border-color: transparent;
}

/* The prediction toast: token logo, the pick in its colour, the stake leaving in red. */
#toast.pick {
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  text-align: left;
  width: max-content;
}
.pt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt .pt-logo {
  width: 34px;
  height: 34px;
  flex: none;
  font-size: 13px;
}
.pt-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.pt-pick {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
}
.pt-pick .i {
  width: 15px;
  height: 15px;
}
.pt-pick small {
  margin-left: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.pt-win {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pt-amt {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--crash);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#toast.pick.show .pt-amt {
  animation: pt-amt 420ms 80ms var(--ease-out) both;
}
@keyframes pt-amt {
  from { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  #toast,
  #toast.show {
    transform: translate(-50%, 0);
    transition: opacity 160ms;
  }
  #toast.pick.show .pt-amt {
    animation: none;
  }
}
/* On a market page the phone's "Make a prediction" bar sits above the tab bar: keep toasts above both. */
@media (max-width: 900px) {
  body:has(.mobile-bar) #toast {
    bottom: calc(154px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 640px) {
  body:has(.mobile-bar) #toast {
    bottom: calc(142px + env(safe-area-inset-bottom));
  }
}

/* "You 100" on a rung: a soft chip in the outcome's colour instead of a bright white pill. */
.tag-you {
  background: color-mix(in srgb, var(--c, var(--text)) 16%, transparent);
  color: var(--c, var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--text)) 35%, transparent);
  font-weight: 600;
}

/* Card footer, right: participants, then when the result comes. */
.mcard .foot-r {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}
.card-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.card-result .i {
  width: 13px;
  height: 13px;
}
.card-result b {
  margin-left: 2px;
  color: var(--text);
  font-weight: 500;
}
@media (max-width: 360px) {
  .mcard .card-foot {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* An open market: a small green dot on the token logo says it's live. */
.av-live {
  position: relative;
  display: inline-flex;
  flex: none;
}
.av-live .live-dot {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 2.5px var(--surface);
}
.av-live .live-dot::after {
  /* A soft ring that breathes a few times, then rests: says "live" without costing idle CPU. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--up);
  animation: live-ring 2s ease-out 3;
}
@keyframes live-ring {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .av-live .live-dot::after {
    animation: none;
    opacity: 0;
  }
}

/* Where a token is listed: the exchange's mark in its brand colour, then its name. */
.mcard .card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.card-nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ex-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 2px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}
.ex-badge i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
}
.ex-badge small {
  font-size: 10px;
  opacity: 0.8;
}

/* Where to grab a logo by hand: the token's exchange pages, the announcement, an image search. */
.logo-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.logo-sources .muted {
  flex-basis: 100%;
  font-size: 12px;
}
.logo-sources:empty {
  display: none;
}

/* Admin → Overview: test points for the admin's own account. */
.adm-topup .topup-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.topup-custom {
  display: inline-flex;
  gap: 6px;
}
.topup-custom {
  align-items: center;
}
.topup-custom input {
  width: 110px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 14px;
}

/* Test points panel: title and balance in one row, quick amounts, then where the points are. */
.adm-topup {
  display: grid;
  gap: 14px;
}
.topup-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topup-head > div:not(.topup-bal) {
  flex: 1;
  min-width: 0;
}
.topup-head h2 {
  margin: 0;
  font-size: 16px;
}
.topup-head p {
  margin: 2px 0 0;
  font-size: 13px;
}
.topup-bal {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}
.topup-bal small {
  font-size: 11px;
  color: var(--muted);
}
.topup-bal b {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--warn);
  font-variant-numeric: tabular-nums;
}
.topup-chip {
  min-width: 76px;
  justify-content: center;
}
.topup-chip.is-busy {
  opacity: 1;
}
.topup-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  font-size: 13px;
}
.topup-status:empty {
  display: none;
}
.topup-pending,
.topup-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topup-pending {
  color: var(--text);
}
.topup-pending b {
  color: var(--warn);
}
.topup-done {
  color: var(--up);
}
.topup-status .i {
  width: 15px;
  height: 15px;
}
.topup-status .muted {
  font-size: 12px;
}
.spin {
  display: inline-block;
  flex: none;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.topup-pending .spin {
  margin-right: 0;
  color: var(--warn);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation-duration: 2.4s;
  }
}
.adm-topup .topup-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px;
}
.topup-chip {
  min-width: 0;
}
.topup-pending {
  display: block;
  line-height: 1.45;
}
.topup-pending .spin,
.topup-pending .i {
  vertical-align: -2px;
  margin-right: 6px;
}
.topup-pending b {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .adm-topup .topup-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .adm-topup .topup-custom {
    grid-column: 1 / -1;
  }
  .adm-topup .topup-custom input {
    flex: 1;
    width: auto;
  }
}

/* Prediction toast, v2: token on the left; the pick as a chip above the stake on the right. */
.pt-sym {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pt-side {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin-left: 18px;
}
.pt-side .pt-pick {
  gap: 4px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 18px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.pt-side .pt-pick .i {
  width: 13px;
  height: 13px;
}
.pt-side .pt-amt {
  margin-left: 0;
  font-size: 14px;
  line-height: 1;
}
/* The prediction toast stays readable above the celebration confetti. */
#toast.pick {
  z-index: 75;
}

/* Dashboard chart ranges: easy to tap on a phone (at least 32px tall). */
@media (pointer: coarse), (max-width: 900px) {
  .pnl-range button {
    min-width: 40px;
    min-height: 32px;
  }
}

/* Phones: a more solid top bar, so text scrolling under it doesn't show through, and the
   "Closes in" line on the market page stays on one line on the narrowest screens. */
@media (max-width: 640px) {
  .topbar {
    background: color-mix(in srgb, var(--bg) 97%, transparent);
  }
}
@media (max-width: 360px) {
  .mobile-bar p {
    font-size: 13px;
    white-space: nowrap;
  }
  .mobile-bar .cta {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Maintenance: a calm full-screen card for players while an update is deployed. */
#maint {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
html.in-maint body {
  overflow: hidden;
}
.maint-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 420px;
  text-align: center;
}
.maint-card h1 {
  margin: 6px 0 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.maint-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.maint-card .muted {
  font-size: 13px;
}
.maint-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}
.maint-ico .i {
  width: 26px;
  height: 26px;
}
.maint-dots {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
}
.maint-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: maint-dot 1.4s ease-in-out infinite;
}
.maint-dots i:nth-child(2) { animation-delay: 0.2s; }
.maint-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes maint-dot {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .maint-dots i { animation: none; opacity: 0.6; }
}

/* For admins while maintenance is on: a reminder pinned at the top. */
#maint-admin {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  z-index: 90;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--warn);
  color: #1a1200;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
}
#maint-admin .i {
  flex: none;
  width: 15px;
  height: 15px;
}

/* Admin → Settings: the maintenance switch. */
.adm-maint.is-on {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}
.pill-warn {
  color: #1a1200;
  background: var(--warn);
}
.maint-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.maint-form input {
  flex: 1 1 240px;
  min-width: 0;
}

/* Admin: Back to the previous tab, left of the page title. */
.admin-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.admin-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, transform 120ms;
}
.admin-back:hover {
  background: var(--surface-2);
}
.admin-back:active {
  transform: scale(0.95);
}
.admin-back .i {
  width: 18px;
  height: 18px;
}
.ex-badge .ex-logo {
  overflow: hidden;
  background: #fff;
}
.ex-badge .ex-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ex-badge .ex-logo {
  width: 16px;
  height: 16px;
}
.ex-badge .ex-logo img {
  object-fit: contain;
}

/* Loading: the Firstprint mark in the middle of the screen, its five bars rising and falling like a
   volume meter. It fades in only if loading takes longer than a moment, so quick pages never flash it. */
.fp-loader {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  animation: ld-in 200ms ease-out 180ms forwards;
}
.ld-mark {
  display: grid;
  gap: 5px;
  width: 44px;
  padding: 16px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.ld-mark i {
  display: block;
  height: 6px;
  border-radius: 3px;
  transform-origin: left center;
  animation: ld-bar 900ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ld-mark i:nth-child(1) { background: var(--moon); animation-delay: 0ms; }
.ld-mark i:nth-child(2) { background: var(--up); animation-delay: 120ms; }
.ld-mark i:nth-child(3) { background: var(--flat); animation-delay: 240ms; }
.ld-mark i:nth-child(4) { background: var(--down); animation-delay: 360ms; }
.ld-mark i:nth-child(5) { background: var(--crash); animation-delay: 480ms; }
@keyframes ld-bar {
  0%, 100% { transform: scaleX(0.3); }
  50% { transform: scaleX(1); }
}
@keyframes ld-in {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-mark i { animation-duration: 2.4s; }
}
.ld-mark {
  width: auto;
  grid-template-columns: 40px;
  padding: 18px 20px;
}
/* Just the five moving bars: no box around them. */
.ld-mark {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Loader in the logo's shape: long bars top and bottom, the middle one short, all centred.
   The bars breathe from the centre in a mirrored wave (outer pair, inner pair, middle), so the
   mark keeps its symmetric X-like shape while it moves. */
.ld-mark {
  grid-template-columns: 48px;
  justify-items: center;
  gap: 6px;
}
.ld-mark i {
  transform-origin: center;
  animation: ld-breathe 1100ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ld-mark i:nth-child(1),
.ld-mark i:nth-child(5) { width: 100%; animation-delay: 0ms; }
.ld-mark i:nth-child(2),
.ld-mark i:nth-child(4) { width: 80%; animation-delay: 140ms; }
.ld-mark i:nth-child(3) { width: 60%; animation-delay: 280ms; }
@keyframes ld-breathe {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.45); }
}
/* All bars move together; the closer to the middle, the deeper they shrink, so the middle bar is
   always the shortest and the mark keeps the logo's X shape as it breathes. */
.ld-mark i:nth-child(1),
.ld-mark i:nth-child(5) { animation: ld-outer 1100ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.ld-mark i:nth-child(2),
.ld-mark i:nth-child(4) { animation: ld-inner 1100ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.ld-mark i:nth-child(3) { animation: ld-middle 1100ms cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes ld-outer {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.9); }
}
@keyframes ld-inner {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.6); }
}
@keyframes ld-middle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-mark i:nth-child(n) { animation-duration: 3s; }
}

/* After a page of cards: "Show more" for players, an invitation to sign up for guests. */
.see-more {
  display: flex;
  justify-content: center;
  margin: 18px 0 6px;
}
.see-more .btn .muted {
  margin-left: 4px;
  font-weight: 400;
}
.see-more-guest {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  text-align: center;
}
.see-more-guest p {
  margin: 0;
  color: var(--muted);
}
.see-more-guest p b {
  color: var(--text);
}

/* Long pages: blocks far below the screen skip layout and paint until they scroll near it (they
   keep their last size, so the scrollbar doesn't jump). The margin keeps card shadows unclipped. */
.grid > .mcard:nth-child(n + 7) {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
  overflow-clip-margin: 24px;
}
#how {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
  overflow-clip-margin: 24px;
}
/* (Only skipped while off screen: on wide screens, where it sits beside the list, nothing changes.) */
.home-rail {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
  overflow-clip-margin: 24px;
}

/* Admin → TestFPT: the keys are already in the host's settings. */
.keys-saved {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
.keys-saved > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--up);
}

/* Earn → Your X account: the code to put in the X bio. */
.x-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}
.x-code code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 16px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(127, 127, 127, 0.3));
  background: var(--surface-2, rgba(127, 127, 127, 0.08));
  user-select: all;
}
.x-change {
  margin-top: 12px;
  font-size: 13px;
}
.x-change summary {
  cursor: pointer;
  color: var(--muted, inherit);
}
.x-change form {
  margin-top: 8px;
}
/* Admin → Tasks: whether tasks are checked on X, and the credit left. */
.x-check-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
}
.x-check-note > svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.x-check-note:not(.form-error) > svg {
  color: var(--up);
}
.x-usage h2 .pill {
  margin-left: 8px;
  vertical-align: 3px;
}
.x-usage .stat-tiles {
  margin: 4px 0 0;
}
.x-usage .section-head .muted {
  margin: 2px 0 0;
}

/* The Earn link's colour: gold on dark, a deeper amber on light so it stays readable. */
:root {
  --earn: var(--gold);
}
:root[data-theme='light'] {
  --earn: #b7791f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --earn: #b7791f;
  }
}
/* Earn, next to Markets, glows so the eye goes there next; a pulsing dot when there's something to collect. */
.subnav a.nav-earn,
#tabbar a.nav-earn {
  color: var(--earn);
}
.subnav a.nav-earn {
  text-shadow: 0 0 14px color-mix(in srgb, var(--earn) 55%, transparent);
}
.subnav a.nav-earn .i,
#tabbar a.nav-earn .i {
  color: var(--earn);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--earn) 70%, transparent));
}
.subnav a.nav-earn[aria-current='page']::after {
  background: var(--earn);
  box-shadow: 0 0 10px color-mix(in srgb, var(--earn) 70%, transparent);
}
.subnav a.nav-earn.has-more::before,
#tabbar a.nav-earn.has-more::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--earn);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--earn) 60%, transparent);
  /* A few pings, then it rests: an endless one repaints the tab bar on every frame of every page. */
  animation: earn-ping 1.8s ease-out 4;
}
.subnav a.nav-earn.has-more::before {
  top: 9px;
  right: -9px;
}
#tabbar a.nav-earn {
  position: relative;
}
#tabbar a.nav-earn.has-more::before {
  top: 6px;
  left: calc(50% + 9px);
}
@keyframes earn-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--earn) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .subnav a.nav-earn.has-more::before,
  #tabbar a.nav-earn.has-more::before {
    animation: none;
  }
}

/* The points toast: same shape as the prediction toast, with a small gold coin and the gain in green. */
.pt .pt-coin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: var(--earn, var(--gold));
  background: color-mix(in srgb, var(--earn, var(--gold)) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--earn, var(--gold)) 30%, transparent);
}
.pt .pt-coin .i {
  width: 17px;
  height: 17px;
}
.pt .pt-amt.pt-gain {
  margin-left: 18px;
  color: var(--up);
}

/* Earn: tasks first. A task that needs X opens the connect step inside its own row. */
.task-connect {
  grid-column: 1 / -1;
}
.tasks-card .task.is-full {
  opacity: 0.55;
}
.task-connect {
  margin-top: 2px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.x-connect {
  display: grid;
  gap: 10px;
}
.x-connect p {
  margin: 0;
  font-size: 13px;
}
.x-connect .x-code {
  margin: 0;
}
.x-connect-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover {
  color: var(--text);
}
.tasks-x {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tasks-x .i {
  width: 13px;
  height: 13px;
}
/* The daily streak, small in the side column; the month's calendar folds away. */
.earn2-side .streak-card {
  margin: 0;
  gap: 12px;
  padding: 18px;
}
.earn2-side .st-head {
  gap: 10px;
}
.earn2-side .st-flame {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.earn2-side .st-flame svg {
  width: 19px;
  height: 19px;
}
.earn2-side .st-count {
  font-size: 17px;
}
.earn2-side .st-days {
  gap: 4px;
}
.earn2-side .st-day {
  padding: 7px 0 6px;
  border-radius: 10px;
  gap: 2px;
}
.earn2-side .st-day .st-n {
  font-size: 9px;
  letter-spacing: 0;
}
.earn2-side .st-day b {
  font-size: 12px;
}
.earn2-side .st-day .st-ico {
  width: 14px;
  height: 14px;
}
.earn2-side .st-day .st-ico svg {
  width: 10px;
  height: 10px;
}
.earn2-side .st-rule {
  margin: 0;
  font-size: 12px;
}
.st-cal-more summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.st-cal-more summary::-webkit-details-marker {
  display: none;
}
.st-cal-more summary .i {
  width: 14px;
  height: 14px;
}
.st-cal-more summary .muted {
  margin-left: auto;
  font-size: 12px;
}
.st-cal-more[open] .cal-grid {
  margin-top: 10px;
}
.earn2-side .st-cal-more .cal-grid {
  gap: 2px;
  font-size: 11px;
}
/* In the narrow side column the claim button or "claimed" note sits on its own row. */
.earn2-side .st-head {
  grid-template-columns: auto minmax(0, 1fr);
}
.earn2-side .st-head > .st-note,
.earn2-side .st-head > .btn {
  grid-column: 1 / -1;
  justify-self: start;
}
.earn2-side .st-head > .btn {
  justify-self: stretch;
  justify-content: center;
}
/* Side streak, v2: quiet text, one circle per day. */
.earn2-side .streak-card .eyebrow {
  font-size: 10.5px;
}
.earn2-side .st-count {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}
.earn2-side .st-note {
  font-weight: 500;
  font-size: 12.5px;
}
.earn2-side .st-dots {
  gap: 2px;
  padding: 2px 0;
}
.earn2-side .st-dots .sp-dot {
  width: 24px;
  height: 24px;
}
.earn2-side .st-dots .sp-dot .i {
  width: 12px;
  height: 12px;
}
.earn2-side .st-dots .sp-day b {
  font-size: 10.5px;
  font-weight: 400;
}
.earn2-side .st-dots .sp-day small {
  font-size: 9.5px;
}
.earn2-side .st-head > .btn {
  font-weight: 500;
}
/* Task status labels: what happened, in one quiet line with its icon. */
.task-done,
.task-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.task-done .i,
.task-full .i {
  width: 15px;
  height: 15px;
}

/* Testnet: one slim line under the hero instead of a big card. */
.tn-strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 60%);
}
.tn-strip-coin {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--earn, var(--gold));
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.tn-strip-coin .i {
  width: 16px;
  height: 16px;
}
.tn-strip p {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 14px;
}
.tn-strip p b {
  font-weight: 600;
}
.tn-strip-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--up);
}
.tn-strip-sub {
  font-size: 13px;
}
.tn-strip .btn {
  flex: none;
}
.tn-strip .tn-close {
  position: static;
  flex: none;
  width: 28px;
  height: 28px;
}
@media (max-width: 640px) {
  .tn-strip {
    flex-wrap: wrap;
    padding: 12px;
  }
  .tn-strip p {
    flex-basis: calc(100% - 46px);
  }
  .tn-strip .btn {
    margin-left: 46px;
  }
  .tn-strip .tn-close {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  .tn-strip-sub {
    display: none;
  }
}

/* Page numbers under long lists (dashboard positions, history, on-chain activity, points). */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 12px 8px 4px;
}
.pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.pg-btn:hover:not(:disabled) {
  border-color: var(--text-3, var(--muted));
}
.pg-btn.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
}
.pg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.pg-btn svg {
  width: 16px;
  height: 16px;
}
.pg-gap {
  min-width: 18px;
  text-align: center;
  color: var(--muted);
}
[data-list-card].is-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Dashboard side column: the cards are spaced by the column's gap only (no panel margins). */
.dash-side > * {
  margin: 0;
}
.dash-side .tg-card {
  padding: 16px;
}
.show-sm {
  display: none;
}
@media (max-width: 640px) {
  .show-sm {
    display: inline;
  }
  /* Positions on a phone: tighter cells so market, pick, stake and payout fit without clipping. */
  .pos-table th,
  .pos-table td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .pos-table th:first-child,
  .pos-table td:first-child {
    padding-left: 14px;
  }
  .pos-table th:last-child,
  .pos-table td:last-child {
    padding-right: 14px;
  }
  .pos-table th {
    white-space: nowrap;
  }
}
/* "Closes in" stays small text; only the time after it is set bold. */
.pos-table .mkt-cell small .hide-sm {
  font: inherit;
  letter-spacing: inherit;
}

/* Featured card: "Open market" sits beside the token name, so the facts get the full width below. */
.feat-main,
.feat-id,
.feat-name {
  min-width: 0;
}
.feat-name {
  flex: 1 1 auto;
}
.feat-name h2,
.feat-name p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feat-open-btn {
  flex: 0 0 auto;
  align-self: center;
  min-height: 40px;
  padding: 0 16px;
}
.feat-open-btn .i {
  width: 15px;
  height: 15px;
}
.feat-main > .feat-hint {
  margin: 0;
}
@media (max-width: 640px) {
  .feat-id {
    gap: 12px;
  }
  .feat {
    grid-template-columns: minmax(0, 1fr);
  }
  .feat-id .feat-open-btn {
    min-height: 36px;
    padding: 0 12px;
    font-size: var(--fs-sm);
  }
  /* Two facts per row: roomy and evenly lined up. */
  .feat-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }
}
/* Narrow phones: a shorter button leaves the token name room. */
@media (max-width: 420px) {
  .feat-open-word {
    display: none;
  }
}

/* TestFPT waiting to be claimed: a small gold chip in the top bar. */
.chip.claim-chip {
  gap: 6px;
  padding: 0 6px 0 10px;
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  color: var(--text);
}
.chip.claim-chip.is-new {
  animation: claim-chip-in 380ms var(--ease-out) both;
}
.chip.claim-chip:hover {
  background: color-mix(in srgb, var(--gold) 20%, var(--surface));
}
.chip.claim-chip .i {
  color: var(--gold);
}
.claim-chip .claim-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.claim-chip .claim-word {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--gold);
  color: #14110a;
  font-size: 12px;
  font-weight: 650;
}
.claim-chip.is-busy {
  cursor: progress;
}
.claim-chip.is-busy .claim-word {
  background: color-mix(in srgb, var(--gold) 55%, transparent);
}
.claim-chip .spin {
  width: 14px;
  height: 14px;
}
@keyframes claim-chip-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Phones: just the token and the amount; a tap claims. */
@media (max-width: 640px) {
  .chip.claim-chip {
    padding: 0 10px;
  }
  .claim-chip .claim-word {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chip.claim-chip.is-new {
    animation: none;
  }
}

/* "Your claims": closed until opened, with pages when it grows. */
.claims-box > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.claims-box > summary::-webkit-details-marker {
  display: none;
}
.claims-box > summary h2 {
  flex: 1 1 auto;
}
.claims-chev {
  display: inline-flex;
  color: var(--muted);
  transition: transform 160ms var(--ease-out);
}
.claims-box[open] .claims-chev {
  transform: rotate(90deg);
}
.claims-box:not([open]) > summary {
  margin-bottom: 0;
}
.claims-box .pager {
  margin-top: 12px;
}
.claims-mint {
  margin: 12px 0 0;
}
.claims-box.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Verify, while the check runs: a spinner and how long it has taken. */
.btn.is-busy {
  gap: 8px;
  cursor: progress;
}
.btn.is-busy .spin {
  width: 14px;
  height: 14px;
}
.verify-s {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  opacity: 0.7;
}

/* Task forms (add and edit): even, quiet fields — same height, label on top, no browser spinners. */
.task-form {
  align-items: end;
  gap: 14px 12px;
}
.admin-main .task-form label:not(.check) {
  gap: 6px;
}
.task-form .field-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.task-form .field-label .muted {
  font-weight: 400;
  opacity: 0.75;
}
.admin-form.task-form input:not([type='checkbox']),
.admin-form.task-form select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  color: var(--text);
  font: inherit;
  font-size: 14px;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.admin-form.task-form input::placeholder {
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}
.admin-form.task-form input:hover,
.admin-form.task-form select:hover {
  border-color: var(--line-strong);
}
.admin-form.task-form input:focus,
.admin-form.task-form select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--text) 40%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 8%, transparent);
  background: var(--bg);
}
.admin-form.task-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8b95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.admin-form.task-form input[type='number'],
.x-reset-form input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
  font-variant-numeric: tabular-nums;
}
.admin-form.task-form input[type='number']::-webkit-inner-spin-button,
.admin-form.task-form input[type='number']::-webkit-outer-spin-button,
.x-reset-form input[type='number']::-webkit-inner-spin-button,
.x-reset-form input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.task-form > .btn {
  height: 42px;
  border-radius: 10px;
}

/* Connect X: one slim row — what it pays, and the reset. */
.panel.x-reset-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 18px;
}
.x-reset-text {
  display: grid;
  flex: 1 1 200px;
  min-width: 0;
}
.x-reset-text .muted {
  font-size: 13px;
}
.x-reset-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.pts-field {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px 0 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}
.pts-field:focus-within {
  border-color: color-mix(in srgb, var(--text) 40%, var(--line));
}
.pts-field input {
  width: 70px;
  height: 100%;
  padding: 0 4px 0 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: right;
  outline: none;
}
.pts-field span {
  font-size: 12px;
  color: var(--muted);
}
/* Wide screens: the add-task fields and the button sit on one line. */
@media (min-width: 1000px) {
  #admin-task.task-form {
    grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.4fr) minmax(150px, 1.3fr) minmax(90px, 0.7fr) minmax(100px, 0.8fr) auto;
  }
  #admin-task.task-form > .btn {
    padding: 0 18px;
  }
}
.x-reset-form .pts-field input[type='number'] {
  width: 64px;
  height: 100%;
  min-height: 0;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

/* Market page: a large live countdown, to the second. */
.big-cd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 4px 0 2px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 7%, var(--surface));
}
.big-cd.is-open {
  border-color: color-mix(in srgb, var(--up) 30%, var(--line));
  background: color-mix(in srgb, var(--up) 6%, var(--surface));
}
.cd-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cd-label .i {
  width: 15px;
  height: 15px;
  color: var(--gold);
}
.big-cd.is-open .cd-label .i {
  color: var(--up);
}
.cd-digits {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
.cd-unit {
  display: grid;
  justify-items: center;
  min-width: 52px;
}
.cd-unit b {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.cd-unit small {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cd-sep {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1.1;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.big-cd.is-last-hour .cd-unit b {
  color: var(--gold);
}
@media (max-width: 640px) {
  .big-cd {
    padding: 12px 14px;
  }
  .cd-digits {
    width: 100%;
    justify-content: space-between;
  }
  .cd-unit {
    min-width: 0;
    flex: 1;
  }
  .cd-unit b {
    font-size: 30px;
  }
  .cd-sep {
    font-size: 26px;
  }
}

/* Admin → Errors */
.err-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.err-stats {
  display: flex;
  gap: 32px;
}
.err-stats > div {
  display: grid;
}
.err-stats b {
  font-size: 26px;
  font-weight: 600;
}
.err-stats span {
  font-size: var(--fs-meta);
}
.err-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--raised);
}
.err-seg button {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.err-seg button[aria-selected='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.err-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.err-item {
  display: grid;
  gap: 8px;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
}
.err-item:first-child {
  border-top: 0;
}
.err-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.err-kind {
  color: var(--crash);
  background: color-mix(in srgb, var(--crash) 12%, transparent);
}
.err-count {
  color: var(--text);
  background: var(--raised);
}
.err-src {
  font-size: var(--fs-meta);
}
.err-when {
  margin-left: auto;
  font-size: var(--fs-meta);
}
.err-msg {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.err-where,
.err-help {
  margin: 0;
}
.err-help {
  display: flex;
  gap: 6px;
  color: var(--muted);
}
.err-help .i {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
.err-detail pre {
  max-height: 260px;
  margin: 8px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: 10px;
  background: var(--field);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.err-detail summary {
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--muted);
}

/* Admin → User activity */
.act-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-search input { flex: 1; min-width: 180px; max-width: 320px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface-2, var(--surface)); color: var(--text); font: inherit; }
.act-table td { vertical-align: top; }
.act-who { display: inline-flex; align-items: center; gap: 6px; }
.act-table .user-link { text-decoration: underline; text-underline-offset: 3px; }
.act-only { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.act-only:hover { background: var(--raised); color: var(--text); }
.act-only svg { width: 13px; height: 13px; }
.act-bal { display: block; font-size: 11px; }
.act-table tr.act-win td { background: color-mix(in srgb, var(--up) 6%, transparent); }
.act-foot:empty { display: none; }
.nowrap { white-space: nowrap; }
.adm-old-actions { margin: 4px 0 12px; }

/* ===== Taking a prediction back ===== */
.rung-faded {
  opacity: 0.5;
  transition: opacity 150ms ease;
}
.rung-faded:hover,
.rung-faded:focus-visible {
  opacity: 1;
}
.rung-mine {
  border-color: var(--c);
  box-shadow: inset 3px 0 0 var(--c);
}
.my-picks {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.my-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
  font-size: 14px;
}
.my-pick-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.my-pick-name b {
  color: var(--c);
  font-family: var(--display);
}
.my-pick-note {
  margin-left: auto;
  font-size: 13px;
  text-align: right;
}
.revert-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  vertical-align: middle;
}
.position .revert-btn {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}
.revert-btn:hover {
  border-color: var(--c, var(--text));
  color: var(--c, var(--text));
}
.revert-btn .i {
  width: 16px;
  height: 16px;
}
.card-bonus {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--up) 14%, transparent);
  color: var(--up);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.card-bonus .i {
  width: 12px;
  height: 12px;
}
.revert-sum {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.revert-sum > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.revert-sum dt {
  color: var(--muted);
}
.revert-sum dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}
.revert-sum .big dd {
  font-family: var(--display);
  font-size: 20px;
}
.revert-notes {
  margin: 12px 0 16px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.cta-danger {
  --c: var(--crash);
}
.input-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-unit span {
  color: var(--muted);
  font-size: 13px;
}
.m-rules .m-rules-more {
  margin-top: -4px;
  font-size: 14px;
}
.m-rules .m-rules-more a {
  color: var(--brand);
}

/* Result form: links to each exchange's candle at the exact result time */
.price-check {
  margin-top: 6px;
  font-size: 0.85em;
}
.price-check summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.price-check ul {
  margin: 6px 0 4px;
  padding-left: 18px;
}
.price-check li {
  margin: 2px 0;
}
.price-check p {
  margin: 0;
}
.admin-result [data-publish]:disabled {
  opacity: 0.5;
}

/* Result form: the two times and the start price first, everything else folded away */
.res-times {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
}
.res-times > div {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  background: var(--bg);
}
.res-times dt,
.res-facts dt {
  font-size: 12px;
  color: var(--muted);
}
.res-times dd {
  margin: 2px 0 0;
  font-weight: 600;
}
.res-times dd small {
  display: block;
  font-weight: 400;
  font-size: 12px;
}
.res-missing {
  color: var(--crash);
}
.res-wait {
  grid-column: 1 / -1;
  margin: 0;
}
.res-more > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.res-more[open] > summary {
  margin-bottom: 10px;
}
.res-more {
  display: grid;
  gap: 12px;
}
.res-more[open] {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.res-more > label {
  display: block;
  margin-top: 10px;
}
.res-more > .admin-actions {
  margin-top: 10px;
}
.res-facts {
  display: grid;
  gap: 6px;
  margin: 0;
}
.res-facts > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
}
.res-facts dd {
  margin: 0;
  font-size: 13px;
}
.adm-row > summary .mkt-cell small {
  display: block;
}
.adm-row > summary {
  flex-wrap: nowrap;
}
.adm-row > summary .mkt-cell {
  min-width: 0;
}

/* --------------------------------------------------------- Results under the leaderboard */

.res-section {
  margin-top: 34px;
}

/* Leaderboard before it opens: one centred "coming soon" card. */
.lb-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  text-align: center;
}
.lb-soon h2 {
  margin: 0;
  font-size: 22px;
}
.lb-soon p {
  max-width: 420px;
  margin: 0;
}
.lb-soon-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
}
.lb-soon-ico svg {
  width: 26px;
  height: 26px;
}
.lb-soon-meter {
  display: grid;
  gap: 6px;
  width: min(320px, 100%);
  margin: 4px 0 6px;
}
.rail-empty svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}
.res-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 20px;
}
.res-head p {
  margin: 0 0 14px;
  font-size: 14px;
}
.res-list {
  list-style: none;
  margin: 0 0 12px;
}
.res-item + .res-item {
  border-top: 1px solid var(--line);
}
.res-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.res-row:hover {
  background: var(--surface-2);
}
.res-tok {
  display: flex;
  flex-direction: column;
  min-width: 64px;
  line-height: 1.25;
}
.res-tok .muted {
  font-size: 12px;
}
.res-out {
  flex: 1;
  font-size: 13px;
  min-width: 0;
}
.res-win .oc {
  margin-left: 4px;
}
.res-void {
  color: var(--muted);
}
.res-faces {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.res-faces .avatar {
  --size: 22px;
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--surface);
}
.res-faces .avatar:first-child {
  margin-left: 0;
}
.res-plus {
  margin-left: 4px;
  font-size: 12px;
  color: var(--muted);
}
.res-count {
  font-size: 13px;
  white-space: nowrap;
}
.res-chev {
  display: inline-flex;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.res-item.open .res-chev {
  transform: rotate(90deg);
}
.res-body {
  padding: 0 0 8px;
  border-top: 1px dashed var(--line);
}
.res-out-sm {
  display: none;
  margin: 10px 18px 0;
  font-size: 13px;
}
.res-loading,
.res-empty {
  padding: 14px 18px;
  margin: 0;
}
.res-table {
  width: 100%;
}
.res-table td,
.res-table th {
  padding-left: 18px;
}
.res-table td:last-child,
.res-table th:last-child {
  padding-right: 18px;
}
.res-body .pager {
  margin: 8px 0 4px;
}
.tag-win {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--up) 18%, transparent);
  color: var(--up);
}
.tag-win .i {
  width: 12px;
  height: 12px;
}
@media (max-width: 640px) {
  .res-row {
    gap: 9px;
    padding: 11px 14px;
  }
  .res-faces {
    margin-left: auto;
  }
  .res-out-sm {
    display: block;
  }
  .res-table td,
  .res-table th {
    padding-left: 14px;
  }
}