:root {
  --rf-canvas: var(--paper, #f5f3f0);
  --rf-page: #efedea;
  --rf-surface: #fff;
  --rf-ink: var(--ink, #17140f);
  --rf-muted: #8a827a;
  --rf-muted-strong: #6e665f;
  --rf-line: rgba(23, 20, 15, .08);
  --rf-soft: #f1eeea;
  --rf-soft-2: #e6e3df;
  --rf-accent: var(--accent, #e8380d);
  --rf-yes: var(--yes, #0e7a4e);
  --rf-yes-soft: #eaf4ee;
  --rf-no: var(--no, #b92b09);
  --rf-no-soft: #fbeeea;
  --rf-shadow: 0 8px 22px -14px rgba(23, 20, 15, .28), 0 0 0 1px rgba(23, 20, 15, .08);
  --rf-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--rf-page); color: var(--rf-ink); }
body { margin: 0; background: var(--rf-page); color: var(--rf-ink); font-family: var(--rf-font)!important; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; background: var(--rf-canvas); }
.skip-link { z-index: 100; }

/* The bar's inner edges track the 1280px container's 32px gutter, so the mark
   sits on the same vertical as the page content at every width. */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; height: 68px; align-items: center;
  gap: 14px 20px; padding: 0 max(32px, calc((100% - 1216px) / 2)); border-bottom: 1px solid var(--rf-line);
  background: color-mix(in srgb, var(--rf-canvas) 94%, transparent); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--rf-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.meridian-symbol { width: 28px; height: 28px; border-radius: 9px; background-color: var(--rf-accent); }
.desktop-market-search { display:flex; flex:1 1 180px; min-width:0; max-width:420px; height:40px; align-items:center; gap:10px; padding:0 14px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px rgba(23,20,15,.07); }
.desktop-market-search svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--rf-muted); stroke-width:1.8; }
.desktop-market-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--rf-ink); font-size:14px; }
.primary-nav { display: flex; gap: 22px; }
/* Desktop-only accent action; the compact bar carries the balance pill alone. */
.topbar-add-money { display: none; }
.primary-nav a { padding: 10px 0; color: var(--rf-muted); text-align: center; font-size: 12px; font-weight: 700; text-decoration: none; }
.primary-nav a.active { background:transparent!important; color: var(--rf-ink)!important; box-shadow:inset 0 -2px var(--rf-accent)!important; }
.account-cluster { display: flex; margin-left: auto; align-items: center; gap: 10px; }
.wallet-pill { border: 0; background: transparent; text-align: right; }
.wallet-pill span { color: var(--rf-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wallet-pill strong { display: block; color: var(--rf-ink); font-size: 14px; }
.avatar { min-width: 32px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--rf-ink); color: #fff; font-size: 11px; font-weight: 700; }

/* 1280px container with a 32px gutter, as the design specifies: content runs
   1216px wide and shares its edges with the sticky bar above. */
main { width: min(1280px, 100%); margin: 0 auto; padding: 0 32px; }
.workspace-grid { display: block; }
.market-section { padding: 30px 0 72px; }
.section-heading { display: block!important; margin: 0 0 24px; }
.section-heading > div { width: 100%; }
.section-heading .section-kicker { display: none; }
.heading-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-heading h1, .section-heading h2 { max-width:none!important; margin: 0; font-family: var(--rf-font)!important; font-size: clamp(36px, 5vw, 58px); font-weight: 500; line-height: 1.04; letter-spacing: -.04em; }
.section-intro { max-width: 560px; margin: 10px 0 0; color: var(--rf-muted); font-size: 13px; line-height: 1.5; }
.result-count { color: var(--rf-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }

.discovery-toolbar { display: flex; height: 38px; align-items: center; gap: 8px; margin-bottom: 24px; }
.category-scroller { min-width: 0; flex: 1; margin: 0; overflow: hidden; }
.category-row { display: flex; gap: 6px; margin: 0; padding: 1px; overflow-x: auto; scrollbar-width: none; }
.category-row button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); color: var(--rf-muted-strong); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.category-row button.active { background: var(--rf-ink); box-shadow: none; color: #fff; }
.category-scroll-hint { display: none!important; }
.discovery-icon-button, .discovery-filter-button { flex: none; height: 36px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }
.discovery-icon-button { display: grid; width: 36px; place-items: center; padding: 0; }
.discovery-icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.discovery-filter-button { display: flex; align-items: center; gap: 7px; padding: 0 12px; }
.discovery-filter-button > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.discovery-filter-button i { display: block; height: 1.5px; border-radius: 2px; background: currentColor; }
.discovery-filter-button i:nth-child(1) { width: 13px; }.discovery-filter-button i:nth-child(2) { width: 9px; }.discovery-filter-button i:nth-child(3) { width: 5px; }
.discovery-filter-button b { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.discovery-filter-button.active { background: var(--rf-ink); color: #fff; }
.discovery-search { display: flex; width: min(520px, 100%); height: 38px; align-items: center; gap: 9px; margin: -62px 0 24px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1.5px var(--rf-ink); }
.discovery-search[hidden] { display: none; }
.discovery-toolbar.searching .category-scroller { visibility: hidden; }
.discovery-search svg { width: 15px; height: 15px; fill: none; stroke: var(--rf-muted); stroke-width: 1.8; }
.discovery-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--rf-ink); font-size: 13.5px; }
.discovery-search button { border: 0; background: transparent; color: var(--rf-muted); }

.group-discovery { margin: 0 0 22px; }
.desktop-discovery-layout { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(310px,1fr); grid-template-areas:"featured groups" "featured movers"; gap:14px 18px; align-items:start; margin:0 0 30px; }
.desktop-discovery-layout[hidden] { display:none; }
.desktop-discovery-layout .market-highlights { grid-area:featured; }
.desktop-discovery-layout .group-discovery { grid-area:groups; margin:0; }
.desktop-discovery-layout .market-movers { grid-area:movers; }
.desktop-discovery-layout .group-discovery > .all-markets-heading { margin-top:0; }
.desktop-discovery-layout .group-card-grid { grid-template-columns:1fr; }
.desktop-discovery-layout .group-card-grid > :nth-child(n+2) { display:none; }
.all-markets-heading, .highlight-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 0 10px; }
.all-markets-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.all-markets-heading .section-kicker, .highlight-heading h2 { margin: 0; color: var(--rf-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.all-markets-heading > span, .highlight-heading span { color: var(--rf-muted); font-size: 11px; }
.group-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.group-card { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 18px 18px 15px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--rf-shadow); overflow: hidden; }
.group-card-hit { position: absolute; z-index: 1; inset: 0; border: 0; background: transparent; cursor: pointer; }
.group-card-image, .group-card-monogram { grid-column:1; grid-row:1; display:grid; width: 34px; height: 34px; place-items:center; margin-top: 0; padding: 3px; border-radius: 10px; background: var(--rf-soft); object-fit: contain; box-shadow: inset 0 0 0 1px var(--rf-line); color:var(--rf-muted-strong); font-size:13px; font-weight:800; }
.group-card-copy { display:contents; }
.group-card-topline { grid-column:2; grid-row:1; display: flex; align-items: center; align-self:center; gap: 8px; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.group-card-topline span:last-child { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: var(--rf-no-soft); color: var(--rf-accent); }
.group-card h3 { display:-webkit-box; grid-column:1/-1; grid-row:2; margin: 1px 0 4px; overflow:hidden; color: var(--rf-ink); font-family: var(--rf-font)!important; font-size: 19px; font-weight: 650; line-height: 1.24; letter-spacing: -.02em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.group-card-leaders { grid-column:1/-1; grid-row:3; display: grid; gap: 14px; }
/* Fixture rows and the footer are buttons so a tap can reach the member market
   and the group; the resets keep them looking like the plain rows they were. */
.group-card-leaders > .group-leader { display: grid; width:100%; padding:0; gap:7px; min-width:0; border:0; background:transparent; color:inherit; font: inherit; text-align:left; cursor:pointer; }
.group-leader-line { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-width:0; overflow:hidden; }
.group-card-leaders b { display:block; min-width:0; overflow: hidden; color: var(--rf-ink); font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.group-card-leaders small { color:#aaa29a; font-size:13px; font-weight:700; text-decoration:line-through; }
.group-card-leaders strong { min-width: 58px; padding: 6px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--leader-color, var(--rf-yes)); color: var(--rf-ink); font-size: 14px; text-align: center; }
.group-leader > i { display:block; height:3px; overflow:hidden; border-radius:999px; background:#e7e3de; }
.group-leader > i > em { display:block; width:var(--leader-probability); height:100%; border-radius:inherit; background:var(--leader-color, var(--rf-yes)); }
.group-card-footer { grid-column: 1/-1; grid-row:4; display: flex; width:100%; align-items:center; justify-content: space-between; gap:12px; margin: 2px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--rf-line); background:transparent; color: var(--rf-muted); font-family: inherit; font-size: 11px; font-weight: 600; cursor:pointer; }
.group-card-footer strong { color: var(--rf-accent); }
.market-load-more { width: 100%; min-height: 50px; margin-top: 10px; border: 0; border-radius: 15px; background: #fff; color: var(--rf-ink); box-shadow: 0 0 0 1px var(--rf-line); font: 700 13.5px/1 var(--rf-font); }

.market-highlight-rail, .market-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.desktop-featured-market { position:relative; min-height:520px; padding:28px 28px 22px; overflow:hidden; border-radius:26px; background:#fff; box-shadow:var(--rf-shadow); }
.featured-market-hit { position:absolute; z-index:1; inset:0 0 132px; border:0; background:transparent; cursor:pointer; }
.featured-market-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--rf-accent); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.featured-market-topline small { color:var(--rf-muted); font-size:10px; }
.featured-market-title { display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:start; margin-top:26px; }
.featured-market-image { width:56px; height:56px; padding:5px; border-radius:16px; background:var(--rf-soft); box-shadow:inset 0 0 0 1px var(--rf-line); object-fit:contain; }
.featured-market-title .market-image-pair { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.featured-market-title .market-image-pair img { width:100%; height:100%; object-fit:contain; }
.featured-market-title h2 { max-width:680px; margin:0; font-size:clamp(27px,2.7vw,40px); font-weight:550; line-height:1.08; letter-spacing:-.035em; }
.featured-market-probability { display:flex; align-items:baseline; gap:10px; margin-top:26px; }
.featured-market-probability strong { font-size:44px; letter-spacing:-.05em; }
.featured-market-probability span { color:var(--rf-muted); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.featured-market-probability small { color:var(--rf-yes); font-size:12px; font-weight:700; }.featured-market-probability small.negative { color:var(--rf-no); }
.featured-market-chart { height:142px; margin:4px -6px 2px; }.featured-market-chart svg { display:block; width:100%; height:100%; overflow:visible; }.featured-chart-area { fill:color-mix(in srgb,var(--rf-accent) 9%,transparent); }.featured-chart-line { fill:none; stroke:var(--rf-accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.featured-market-actions { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:10px; }.featured-market-actions button { display:flex; min-height:54px; align-items:center; justify-content:space-between; padding:0 17px; border:0; border-radius:15px; font-weight:750; cursor:pointer; }.featured-market-actions button:first-child { background:var(--rf-yes); color:#fff; }.featured-market-actions button:last-child { background:var(--rf-ink); color:#fff; }.featured-market-actions button:disabled { opacity:.45; }
.featured-market-stats { display:flex; align-items:center; gap:16px; margin-top:17px; padding-top:14px; border-top:1px solid var(--rf-line); color:var(--rf-muted); font-size:11px; font-weight:600; }.featured-market-stats strong { margin-left:auto; color:var(--rf-ink); }
.market-movers { padding:18px; border-radius:22px; background:#fff; box-shadow:var(--rf-shadow); }.movers-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }.movers-heading h2 { margin:0; font-size:17px; font-weight:650; }.movers-heading span { color:var(--rf-muted); font-size:10px; font-weight:700; text-transform:uppercase; }.market-mover-row { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto 44px; gap:10px; align-items:center; min-height:48px; padding:8px 0; border:0; border-top:1px solid var(--rf-line); background:transparent; text-align:left; cursor:pointer; }.market-mover-row span { overflow:hidden; font-size:12.5px; font-weight:600; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.market-mover-row strong { font-size:13px; }.market-mover-row small { color:var(--rf-yes); font-size:11px; font-weight:700; text-align:right; }.market-mover-row small.negative { color:var(--rf-no); }

@media (max-width: 1050px) and (min-width: 701px) {
  .topbar { gap:14px; padding-right:24px; padding-left:24px; }
  .desktop-market-search { max-width:300px; }
  .primary-nav { gap:4px; }
  main { width:min(100%,1280px); padding:0 24px; }
  .desktop-discovery-layout { grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); }
  .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.market-card { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) 52px; grid-template-rows: auto auto auto; gap: 0 11px; align-items: start; min-height: 0; padding: 13px 14px 11px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(23,20,15,.04), 0 0 0 1px rgba(23,20,15,.06); overflow: hidden; }
.market-card:hover { transform: translateY(-1px); box-shadow: var(--rf-shadow); }
.card-hit { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 104px; border: 0; background: transparent; cursor: pointer; }
.market-thumb { grid-column: 1; grid-row: 1; width: 34px; height: 34px; padding: 3px; border: 0; border-radius: 11px; background: var(--rf-soft); object-fit: contain; box-shadow: inset 0 0 0 1px var(--rf-line); }
.market-monogram.market-thumb { display: flex; padding: 0; align-items: center; justify-content: center; color: var(--rf-muted-strong); font-size: 12.5px; font-weight: 700; letter-spacing: -.02em; }
.market-image-pair.market-thumb { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.market-image-pair.market-thumb img { width: 100%; height: 100%; object-fit: contain; }
.market-row-main { grid-column: 2; grid-row: 1; min-width: 0; }
.card-topline { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.card-topline .category { color: var(--rf-accent); }
.card-topline .closing { color: var(--rf-muted); }
.card-topline .live-status { color:var(--rf-yes); letter-spacing:0; text-transform:uppercase; }
.market-card h3 { display: -webkit-box; margin: 0; overflow: hidden; color: var(--rf-ink); font-family: var(--rf-font)!important; font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-meta, .market-row-meter { display: none; }
.probability-block { position: relative; grid-column: 3; grid-row: 1; display: flex; width: 52px; height: 52px; align-items: center; justify-content: center; padding: 5px; border-radius: 50%; background: conic-gradient(var(--rf-ink) 0 var(--market-probability,50%), #e7e3de var(--market-probability,50%) 100%); }
.probability-block::before { content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; }
.probability, .probability-block span { position: relative; z-index: 1; }
.probability { color: var(--rf-ink); font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.probability-block span { position: absolute; top: 55px; color: #9a928a; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.probability-block span::after { content: "Chance"; }.probability-block span { font-size: 0; }.probability-block span::after { font-size: 9px; }
.market-card-actions { position: relative; z-index: 2; grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.market-card-actions button { display: flex; min-height: 42px; align-items: baseline; justify-content: space-between; gap: 6px; padding: 12px; border: 0; border-radius: 13px; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.market-card-actions button:first-child { background: var(--rf-yes-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rf-yes) 16%,transparent); color: var(--rf-yes); }
.market-card-actions button:last-child { background: var(--rf-no-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rf-no) 14%,transparent); color: var(--rf-no); }
.market-card-actions strong { color: var(--rf-ink); font-size: 13.5px; }
.market-card-stats { grid-column: 1/-1; grid-row: 3; display: flex; align-items: center; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(23,20,15,.06); color: var(--rf-muted); font-size: 11px; font-weight: 600; }
.market-change { color: var(--rf-yes); }.market-change.negative { color: var(--rf-no); }.market-change.flat { color: #9a928a; }
.market-time-left { margin-left:auto; color:var(--rf-ink); }
.market-risk-note { color: var(--rf-muted); font-size: 11px; text-align: center; }
/* Run headers inside the catalogue grid; compact layout only. */
.market-section-header { display: none; }
.market-section-label { color: var(--rf-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.market-section-count { color: var(--rf-muted); font-size: 11px; }
.ajewa-pagination { border: 0; color: var(--rf-muted); }.ajewa-pagination button { border: 0; border-radius: 13px; box-shadow: 0 0 0 1px var(--rf-line); }

.group-detail { max-width: 760px; margin: 0 auto; padding: 24px 0 52px; }
.group-back { margin-bottom: 16px; border: 0; background: transparent; color: var(--rf-muted); font-size: 12.5px; font-weight: 600; }
.group-detail-header { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 13px; align-items: start; padding-bottom: 0; border: 0; }
.group-detail-header img { width: 56px; height: 56px; padding: 5px; border-radius: 16px; background: #e7e3de; object-fit: contain; box-shadow: inset 0 0 0 1px var(--rf-line); }
.group-detail-monogram { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: #e7e3de; box-shadow: inset 0 0 0 1px var(--rf-line); color: var(--rf-muted-strong); font-size: 17px; font-weight: 700; }
.group-detail-header .section-kicker { margin: 0 0 6px; color: var(--rf-accent); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.group-detail-header h1 { margin: 0; font-family: var(--rf-font)!important; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.group-detail-header p:not(.section-kicker) { margin: 10px 0 0; color: var(--rf-muted-strong); font-size: 13px; line-height: 1.5; }
.group-detail-meta { display: flex; gap: 14px; margin-top: 12px; color: var(--rf-muted); font-size: 12px; font-weight: 600; }
.group-resolution-note { margin: 16px 0 22px; padding: 13px 15px; border: 0; border-radius: 16px; background: var(--rf-no-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rf-accent) 14%,transparent); }
.group-resolution-note strong, .group-resolution-note span { display: block; }.group-resolution-note strong { font-size: 12.5px; }.group-resolution-note span { margin-top: 4px; color: var(--rf-muted-strong); font-size: 12px; line-height: 1.5; }
.group-member-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 0 10px; }
.group-member-heading .section-kicker { margin: 0; color: var(--rf-accent); font-size: 10px; letter-spacing: .12em; }.group-member-heading h2 { display: none; }
.group-mode-switch { display: none; }
.group-member-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.group-member-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 13px 14px 12px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(23,20,15,.04), 0 0 0 1px var(--rf-line); }
.group-member-rank, .group-member-row > img { display: none; }
.group-member-copy strong { font-size: 15px; font-weight: 600; line-height: 1.3; }.group-member-copy span { display: none; }
.group-member-probability { align-self: start; font-size: 15px; letter-spacing: -.02em; }
.group-member-actions { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.group-member-actions button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; padding: 0 12px; border: 0; border-radius: 12px; font-size: 12.5px; font-weight: 700; }
.group-member-actions button:first-child { background: var(--rf-yes-soft); color: var(--rf-yes); }.group-member-actions button:last-child { background: var(--rf-no-soft); color: var(--rf-no); }.group-member-actions strong { color: var(--rf-ink); }
.group-rules { margin-top: 18px; padding: 15px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }.group-rules p { color: var(--rf-muted-strong); font-size: 12px; line-height: 1.5; }

/* Keep the routed market page on the same full desktop shell as discovery.
   The trade ticket owns its grid column; constraining the whole page to 720px
   made that column overlap and crush the market title and chart. */
.market-detail-route main { width: min(1280px, 100%); }
.market-detail-route .workspace-grid { display: block; }
.trade-drawer, .market-detail-route .trade-drawer { position: relative; width: 100%; min-height: 0; max-height: none; margin: 24px auto 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.trade-drawer.open { display: block; }
.market-detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,380px); grid-template-areas: "hero ticket" "secondary ticket"; gap: 18px 28px; align-items: start; }
.market-detail-layout.detail-only { display: block; max-width: 760px; margin: 0 auto; padding-bottom: 100px; }
.market-inline-back { display: inline-flex; align-items: center; margin: 0 0 16px; padding: 4px 0; border: 0; background: transparent; color: var(--rf-muted-strong); font: 600 12.5px/1 var(--rf-font); cursor: pointer; }
.market-hero { grid-area: hero; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 13px; align-items: start; margin-bottom: 18px; }
.market-visual { position: relative; width: 56px; height: 56px; }
.drawer-market-image, .drawer-market-image.market-image-pair { width: 56px; height: 56px; margin: 0; padding: 5px; border-radius: 16px; background: #e7e3de; object-fit: contain; box-shadow: inset 0 0 0 1px var(--rf-line); overflow: hidden; }
.drawer-market-image.market-image-pair { display: grid; grid-template-columns: 1fr 1fr; }.drawer-market-image.market-image-pair img { width: 100%; height: 100%; object-fit: contain; }
.market-live-dot { position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%; background: #17b26a; box-shadow: 0 0 0 2px var(--rf-canvas); }
.market-detail-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }.market-detail-eyebrow span { color: var(--rf-accent); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.market-detail-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: #c9c2ba; }.market-detail-eyebrow small { color: var(--rf-muted); font-size: 11px; }
.market-copy { min-width: 0; padding: 0; }.market-copy h1 { margin: 0; font-family: var(--rf-font)!important; font-size: clamp(28px,4vw,38px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.market-detail-secondary { grid-area: secondary; }
.price-chart-panel { padding: 16px 16px 10px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }
.price-chart-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.market-live-price span { display: block; margin-bottom: 4px; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.market-live-price strong { font-size: 38px; line-height: 1; letter-spacing: -.035em; }
.chart-ranges { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--rf-soft); }.chart-ranges button { padding: 6px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--rf-muted); font-size: 10.5px; font-weight: 700; }.chart-ranges button.active { background: var(--rf-ink); color: #fff; }
.price-chart { min-height: 180px; margin-top: 10px; }.chart-summary { display: none; }.chart-grid line { stroke: var(--rf-line); }.chart-grid text, .chart-axis text { fill: var(--rf-muted); }.chart-line { stroke: var(--rf-accent); }.chart-area { fill: color-mix(in srgb,var(--rf-accent) 8%,transparent); }.chart-last { fill: var(--rf-accent); }
.market-statline { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 12px 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--rf-line); }
.market-statline > div { min-height: 62px; padding: 12px 13px; background: var(--rf-canvas); }.market-statline span { color: var(--rf-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.market-statline strong { display: block; margin-top: 4px; font-size: 15px; }.market-statline small { display: none; }
.resolution { margin: 0; padding: 14px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }.resolution summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }.resolution summary::-webkit-details-marker { display: none; }.resolution summary strong { font-size: 13.5px; }.resolution summary span { color: var(--rf-muted); font-size: 12px; font-weight: 600; }.resolution p { margin: 10px 0; color: var(--rf-muted-strong); font-size: 13px; line-height: 1.55; }.resolution small { color: var(--rf-muted); font-size: 11.5px; }
.market-detail-actions { position: sticky; z-index: 6; bottom: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 20px; background: color-mix(in srgb,var(--rf-canvas) 90%,transparent); backdrop-filter: blur(18px); }
.market-detail-actions button { display: flex; min-height: 60px; align-items: center; justify-content: space-between; padding: 13px 16px; border: 0; border-radius: 16px; color: #fff; text-align: left; }.market-detail-actions button:first-child { background: var(--rf-yes); }.market-detail-actions button:last-child { background: var(--rf-ink); }.market-detail-actions span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }.market-detail-actions strong { font-size: 18px; }
.drawer-close { position: absolute; z-index: 10; top: -2px; right: 0; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); font-size: 0; }.drawer-close::after { content: "←"; font-size: 18px; }
.market-detail-route .trade-drawer > .drawer-close { display: none!important; }

.trade-ticket { grid-area: ticket; position: sticky; top: 84px; padding: 18px; border: 0; border-radius: 22px; background: var(--rf-canvas); box-shadow: var(--rf-shadow); }
.sheet-handle { display: none; width: 38px; height: 4px; margin: -5px auto 13px; border-radius: 999px; background: #d8d3cd; }
.trade-sheet-close { position: absolute; top: 14px; right: 14px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 10px; background: var(--rf-soft-2); font-size: 15px; }
.ticket-heading { padding-right: 42px; }.ticket-heading .drawer-category { margin: 0 0 5px; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.ticket-heading strong { display: block; max-width: 280px; font-family: var(--rf-font)!important; font-size: 17px; font-weight: 600; line-height: 1.25; }
.trade-mode-tabs { display: none; }
.outcome-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }.outcome-switch button { display: grid; grid-template-columns: 1fr auto; min-height: 74px; padding: 13px 14px; border: 0; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 1px var(--rf-line); text-align: left; }.outcome-switch button.active:first-child { background: var(--rf-yes-soft); box-shadow: inset 0 0 0 2px var(--rf-yes); }.outcome-switch button.active:last-child { background: var(--rf-no-soft); box-shadow: inset 0 0 0 2px var(--rf-no); }.outcome-switch span { color: var(--rf-muted-strong); font-size: 13.5px; font-weight: 700; }.outcome-switch button:first-child span { color: var(--rf-yes); }.outcome-switch button:last-child span { color: var(--rf-no); }.outcome-switch strong { font-size: 15px; }.outcome-switch small { grid-column: 1/-1; margin-top: 5px; color: var(--rf-muted-strong); font-size: 10.5px; }.outcome-image { display: none; }
.amount-card { margin-top: 16px; padding: 15px 16px 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }
.amount-field { display: block; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }.amount-field > span:first-child { display: flex; justify-content: space-between; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.amount-field > span small { color: var(--rf-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }.money-input { display: flex; align-items: center; gap: 6px; margin-top: 6px; }.money-input b { color: var(--rf-muted); font-size: 25px; }.money-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--rf-ink); font-size: 29px; font-weight: 700; letter-spacing: -.03em; }
.quantity-presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 12px 0 0; padding-top: 0; }.quantity-presets button { min-height: 38px; border: 0; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(23,20,15,.09); color: var(--rf-muted-strong); font-size: 12.5px; font-weight: 700; }.quantity-presets button.active { background: var(--rf-ink); box-shadow: none; color: #fff; }
/* 24h probability move; compact detail only. */
.market-price-delta { display: none; font-size: 12.5px; font-weight: 700; }
.quote-box { margin: 0; padding: 15px 16px; border: 0; border-radius: 18px; background: var(--rf-yes-soft); box-shadow: 0 0 0 1px color-mix(in srgb,var(--rf-yes) 14%,transparent); }.quote-box.quote-empty { background: var(--rf-soft); box-shadow: none; }.quote-box dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; }.quote-box dt { color: #4c5a52; font-size: 13.5px; }.quote-box dd { margin: 0; font-size: 13.5px; font-weight: 700; }.quote-status { display: flex; justify-content: space-between; gap: 12px; }.quote-status strong { color: #4c5a52; font-size: 13px; }.quote-status span { color: var(--rf-yes); font-size: 11px; font-weight: 700; }.quote-warning { margin: 11px 0 0; color: var(--rf-muted-strong); font-size: 11.5px; }
.trade-actions { margin-top: 12px; }.trade-actions button { width: 100%; min-height: 54px; border: 0; border-radius: 16px; background: var(--rf-accent); color: #fff; font-size: 16px; font-weight: 700; }.trade-actions button:disabled { opacity: .48; }
.trade-receipt { width: min(520px,100%); margin: 38px auto; padding: 26px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--rf-shadow); }.receipt-check { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 20px; border-radius: 18px; background: var(--rf-yes); color: #fff; font-size: 26px; }.trade-receipt .drawer-category { color: var(--rf-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }.trade-receipt h2 { margin: 5px 0 8px; font-size: 28px; font-weight: 600; }.receipt-summary { margin:0 0 22px; color:var(--rf-muted-strong); font-size:14px; line-height:1.5; }.trade-receipt dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; margin: 0; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }.trade-receipt dt { color: var(--rf-muted-strong); font-size: 13px; }.trade-receipt dd { max-width: 230px; margin: 0; overflow: hidden; font-size: 13px; font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.receipt-actions { display: grid; gap: 9px; margin-top: 20px; }.receipt-actions button { min-height: 50px; border: 0; border-radius: 15px; font-size: 15px; font-weight: 700; }.receipt-actions .buy-button { background: var(--rf-ink); color: #fff; }.receipt-actions .preview-button { background: transparent; color: var(--rf-muted-strong); }

.portfolio-section, .history-section, .funds-page { max-width: 760px; margin: 0 auto; padding: 42px 0 56px; }
.portfolio-heading, .history-heading { margin-bottom: 16px; }.portfolio-heading .section-kicker, .history-heading .section-kicker { display: none; }.portfolio-heading h2, .history-heading h2 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }.portfolio-market-link { display: none; }
.portfolio-summary { display: block; margin: 0 0 12px; overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }.portfolio-summary > div { min-height: 0; padding: 16px 17px 15px; background: #fff; }.portfolio-summary .portfolio-value-card { color: var(--rf-ink); }.portfolio-summary span { color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.portfolio-value-card > div { display:flex; align-items:baseline; gap:9px; margin:5px 0 3px; }.portfolio-summary .portfolio-value-card strong { margin:0; font-size:29px; letter-spacing:-.03em; }.portfolio-value-card b { font-size:13px; }.portfolio-value-card small { color:var(--rf-muted); font-size:11.5px; }.portfolio-legacy-stat { display:none!important; }
.portfolio-tabs { display:flex; gap:4px; margin-bottom:18px; padding:4px; border-radius:14px; background:var(--rf-soft-2); }.portfolio-tabs button { flex:1; min-height:0; padding:10px 0; border:0; border-radius:11px; background:transparent; color:var(--rf-muted); font:700 12.5px/1 var(--rf-font); }.portfolio-tabs button.active { background:#fff; color:var(--rf-ink); box-shadow:0 1px 2px rgba(23,20,15,.12); }
.valuation-note { color: var(--rf-muted); font-size: 11.5px; }.position-section-heading { margin: 18px 0 10px; }.position-section-heading .section-kicker { color: var(--rf-accent); font-size: 10px; letter-spacing: .12em; }.position-section-heading h3 { display: none; }
.position-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.position-card { padding: 14px 15px 13px; border: 0!important; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(23,20,15,.04), 0 0 0 1px var(--rf-line); }.position-card-heading img { display: none; }.position-card-heading { margin-bottom: 8px; }.position-card-heading > div { display: flex; align-items: center; gap: 8px; }.position-outcome { padding: 4px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; }.position-outcome.yes { background: var(--rf-yes-soft); color: var(--rf-yes); }.position-outcome.no { background: var(--rf-no-soft); color: var(--rf-no); }.position-live { display: block; color: var(--rf-muted); font-size: 11px; font-weight: 600; }.position-live i { display: none; }.position-card .position-market { margin: 0 0 12px; letter-spacing: -.01em; font-family: var(--rf-font)!important; font-size: 15.5px; font-weight: 600; line-height: 1.3; }.position-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; border-radius: 14px; background: var(--rf-line); }.position-numbers > div { padding: 10px 11px; background: #fbfaf9; }.position-numbers > div:nth-child(3) { grid-column: auto; }.position-numbers span { color: var(--rf-muted); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.position-numbers strong { display: block; margin-top: 3px; font-size: 13.5px; }.position-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }.position-actions button { min-height: 40px; padding: 12px 0; border: 0; border-radius: 12px; font-size: 13px; font-weight: 700; }.position-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--rf-muted); font-size: 11.5px; font-weight: 600; }.position-footer .pnl-positive { color: var(--rf-yes); }.position-footer .pnl-negative { color: var(--rf-no); }.portfolio-cta { width: 100%; min-height: 46px; margin-top: 16px; border: 0; border-radius: 15px; background: var(--rf-soft-2); color: var(--rf-ink); font-size: 14.5px; font-weight: 700; cursor: pointer; }.position-sell { background: var(--rf-ink); color: #fff; }.position-trade { background: var(--rf-soft); color: var(--rf-ink); box-shadow: inset 0 0 0 1px rgba(23,20,15,.07); }
.wallet-overview { margin: 0 0 12px; padding: 17px 17px 15px; border-radius: 20px; background: var(--rf-ink); color: var(--rf-canvas); }.wallet-overview > span { color: rgba(245,243,240,.55); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.wallet-overview > strong { display: block; margin: 5px 0 3px; font-size: 30px; letter-spacing: -.03em; }.wallet-open-positions { display: block; color: rgba(245,243,240,.55); font-size: 11.5px; }.wallet-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }.wallet-page-actions a { display: grid; min-height: 44px; place-items: center; border-radius: 12px; background: rgba(245,243,240,.14); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; }.wallet-page-actions a:first-child { background: var(--rf-accent); }
.history-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-bottom: 12px; overflow: hidden; border: 0; border-radius: 16px; background: var(--rf-line); }.history-summary > div { min-height: 0; padding: 13px 12px; background: #fff!important; color: var(--rf-ink)!important; }.history-summary span { color: var(--rf-muted); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.history-summary strong { display: block; margin-top: 4px; font-size: 15px; }.history-toolbar { display: grid; gap: 10px; margin: 0 0 14px; }.history-search { display: none; }.history-filters { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }.history-filters button { min-height: 38px; border: 0; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(23,20,15,.09); color: var(--rf-muted-strong); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }.history-filters button.active { background: var(--rf-ink); box-shadow: none; color: #fff; }.activity-panel { margin-top: 10px; padding: 0; border: 0; background: transparent; box-shadow: none; }.activity-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }.activity-heading .section-kicker { color: var(--rf-accent); font-size: 10px; letter-spacing: .12em; }.activity-heading h3 { display: none; }.activity-heading > span { color: var(--rf-muted); font-size: 11.5px; font-weight: 600; }.activity-heading .section-kicker { font-weight: 700; }.activity-list { display: grid; gap: 10px; }.activity-row { padding: 13px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(23,20,15,.06); }
/* Compact-only wallet furniture: the tag chip replaces the row thumbnail, the
   day headers group the list, and the settings card only exists on mobile. */
.wallet-open-positions[hidden] { display: none; }
.wallet-settings, .history-tag-chip, .history-day { display: none; }
/* The first stat cell is a white card here, not the base sheet's dark banner,
   so its type has to drop the white colour that came with that banner. */
.history-summary > div:first-child span { color: var(--rf-muted); }
.history-summary > div:first-child strong { color: inherit; }

.funds-page-heading .funds-back { color: var(--rf-muted); font-size: 12px; }.funds-page-heading .section-kicker { color: var(--rf-accent); font-size: 10px; letter-spacing: .12em; }.funds-page-heading h1 { margin-top: 4px; font-size: 34px; font-weight: 600; letter-spacing: -.03em; }.funds-page-content > section, .funds-page-content > div { border-radius: 20px; }

.portfolio-summary .portfolio-value-card { display:block!important; padding:16px 17px 15px!important; background:#fff!important; color:var(--rf-ink)!important; }
.portfolio-summary .portfolio-value-card > span,
.portfolio-summary .portfolio-value-card > strong,
.portfolio-summary .portfolio-value-card > small { color:var(--rf-muted)!important; }
.portfolio-summary .portfolio-value-card > div { min-height:0!important; height:auto!important; padding:0!important; justify-content:flex-start!important; flex-direction:row!important; background:transparent!important; }
.portfolio-summary .portfolio-value-card > div > strong { color:var(--rf-ink)!important; }
.valuation-note, .position-section-heading { display:none!important; }
/* Wide-layout scaffolding that must never reach the compact sheet: the extra
   stat cells, the position table wrapper and its column header. The wrapper is
   `display:contents` here so the compact sheet keeps the block flow it was
   signed off with. */
.portfolio-stat, .position-table-head { display: none; }
.position-table, .wallet-side { display: contents; }
.activity-panel { padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.activity-heading { padding:0!important; border:0!important; background:transparent!important; }

.account-backdrop { background: rgba(23,20,15,.32); backdrop-filter: blur(3px); }.account-modal { width: min(760px,calc(100vw - 28px)); max-height: min(820px,calc(100vh - 28px)); border: 0; border-radius: 26px; background: var(--rf-canvas); box-shadow: 0 28px 80px rgba(23,20,15,.22); }.account-modal > .drawer-close { position: fixed; top: 16px; right: 16px; }.account-modal > .drawer-close::after { content: "×"; }.account-header, .account-view { border-color: var(--rf-line); }.account-nav { padding: 4px; border-radius: 14px; background: var(--rf-soft-2); }.account-nav button { border: 0; border-radius: 11px; }.account-nav button.active { background: #fff; box-shadow: 0 1px 2px rgba(23,20,15,.12); }.account-modal [class*="card"], .account-modal form, .account-panel { border-radius: 18px; }

.filter-backdrop { position: fixed; z-index: 49; inset: 0; background: rgba(23,20,15,.32); animation: rf-fade .2s ease both; }.filter-sheet { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; width: min(520px,100%); max-height: calc(100dvh - 20px); margin: auto; overflow: auto; border-radius: 26px 26px 0 0; background: var(--rf-canvas); box-shadow: 0 -14px 40px -12px rgba(23,20,15,.3); animation: rf-sheet .28s cubic-bezier(.2,.8,.2,1) both; }.filter-sheet .sheet-handle { display: block; margin: 12px auto 0; }.filter-sheet header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; }.filter-sheet h2 { margin: 0; font-size: 21px; font-weight: 600; }.filter-sheet header button { border: 0; background: transparent; color: var(--rf-accent); font-size: 12.5px; font-weight: 700; }.filter-sheet-body { display: grid; gap: 18px; padding: 0 20px 14px; }.filter-sheet fieldset { margin: 0; padding: 0; border: 0; }.filter-sheet legend { margin-bottom: 9px; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.filter-choice-row { display: flex; flex-wrap: wrap; gap: 7px; }.filter-choice-row button { padding: 10px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); font-size: 12px; font-weight: 600; }.filter-choice-row button.active { background: var(--rf-ink); color: #fff; }.filter-sort-list { display: grid; gap: 1px; overflow: hidden; border-radius: 14px; background: var(--rf-line); }.filter-sort-list button { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 15px; border: 0; background: #fff; font-size: 13.5px; text-align: left; }.filter-sort-list button.active { font-weight: 700; }.filter-sort-list span { color: var(--rf-accent); }.live-filter { display: flex; align-items: center; justify-content: space-between; padding: 14px 15px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); }.live-filter span strong, .live-filter span small { display: block; }.live-filter strong { font-size: 13.5px; }.live-filter small { margin-top: 2px; color: var(--rf-muted); font-size: 11.5px; }.live-filter input { position: absolute; opacity: 0; }.live-filter > i { position: relative; width: 46px; height: 27px; border-radius: 999px; background: #dcd7d1; }.live-filter > i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,20,15,.3); transition: .18s; }.live-filter input:checked + i { background: var(--rf-yes); }.live-filter input:checked + i::after { transform: translateX(19px); }.filter-sheet footer { padding: 12px 20px 22px; box-shadow: 0 -1px 0 var(--rf-line); }.filter-sheet footer button { width: 100%; min-height: 50px; border: 0; border-radius: 16px; background: var(--rf-ink); color: #fff; font-size: 15.5px; font-weight: 700; }

footer { border-top-color: var(--rf-line); color: var(--rf-muted); }.mobile-nav { background: var(--rf-canvas); border-top: 0; box-shadow: 0 -1px 0 rgba(23,20,15,.07); backdrop-filter: none; }.mobile-nav a, .mobile-nav button { color: #b4ada5; }.mobile-nav .active, .mobile-nav [aria-current="page"] { color: var(--rf-accent); }.toast { border: 0; border-radius: 13px; background: var(--rf-ink); color: #fff; box-shadow: 0 12px 30px rgba(23,20,15,.22); }

@media (max-width: 700px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); background: var(--rf-canvas); }
  .app-shell { min-height: 100dvh; }
  .topbar { height: 52px; padding: 0 20px; gap: 9px; border-bottom: 0; background: var(--rf-canvas); backdrop-filter: none; }
  .primary-nav, .desktop-market-search { display: none; }
  .brand { gap: 9px; font-size: 17px; letter-spacing: -.02em; }.meridian-symbol { width: 26px; min-width: 26px; height: 26px; border-radius: 8px; }
  .account-cluster { margin-left: auto; gap: 8px; }
  .wallet-pill { min-height: 0; width: auto; align-items: flex-end; padding: 4px 2px; line-height: 1.15; }
  .wallet-pill span { display: block; color: var(--rf-muted); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .wallet-pill strong { display: block; color: var(--rf-ink); font-size: 14px; font-weight: 700; }
  .avatar { width: 30px; min-width: 30px; height: 30px; padding: 0; border-radius: 10px; font-size: 12px; font-weight: 700; }.avatar.signed-out { width: auto; min-width: 62px; padding: 0 11px; }
  main { width: 100%; padding: 0; }
  .market-section { max-width:100%; padding: 4px 20px 24px; overflow-x:clip; }
  .discovery-toolbar { margin-bottom: 22px; }
  .discovery-search { width: calc(100% - 40px); margin: -60px 20px 22px 0; }
  .section-heading { margin-bottom: 22px; }.heading-line { display: block; }.section-heading h1 { margin: 4px 0 0; font-size: 34px; line-height: 1.06; letter-spacing: -.02em; }.result-count { display: none; }.section-intro { display: none; }
  /* Desktop discovery panels are not part of the compact design. */
  .market-highlights, .market-movers, #all-markets-heading { display: none!important; }
  .market-grid { gap: 10px; }
  .market-section-header { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
  .market-section-header + .market-card { margin-top: 0; }
  .market-card + .market-section-header { margin-top: 4px; }
  /* The heading above already carries 22px, so the event card needs no top
     margin of its own; its 22px bottom margin is the gap to TRENDING. */
  .group-discovery { margin: 0 0 22px; }
  .desktop-discovery-layout { display:flex; width:100%; min-width:0; max-width:100%; flex-direction:column; gap:0; margin-bottom:0; }
  .desktop-discovery-layout .group-discovery { order:1; width:100%; min-width:0; max-width:100%; margin:0 0 22px; }
  .desktop-discovery-layout .market-highlights { order:2; width:100%; min-width:0; max-width:100%; margin-top:20px; }
  .desktop-discovery-layout .market-movers { display:none; }
  .desktop-discovery-layout .group-card-grid > :nth-child(n+2) { display:grid; }
  .group-discovery > .all-markets-heading { display:none; }
  .group-card-grid, .market-highlight-rail, .market-grid, .group-member-list, .position-grid { grid-template-columns: 1fr; }
  .group-card,.desktop-featured-market,.market-card { width:100%; min-width:0; max-width:100%; }
  .desktop-featured-market { min-height:0; padding:15px 15px 12px; border-radius:20px; }
  .featured-market-hit { bottom:122px; }
  .featured-market-topline { font-size:9.5px; }.featured-market-topline small { font-size:9px; }
  .featured-market-title { grid-template-columns:42px minmax(0,1fr) 58px; gap:11px; margin-top:12px; }.featured-market-image { width:42px; height:42px; padding:4px; border-radius:12px; }.featured-market-title h2 { display:-webkit-box; overflow:hidden; font-size:16px; font-weight:550; line-height:1.28; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
  .featured-market-probability { position:absolute; top:48px; right:15px; display:flex; width:58px; height:58px; align-items:center; justify-content:center; margin:0; border-radius:50%; background:conic-gradient(var(--rf-ink) 0 var(--market-probability,50%),#e7e3de var(--market-probability,50%) 100%); }.featured-market-probability::before { content:""; position:absolute; width:47px; height:47px; border-radius:50%; background:#fff; }.featured-market-probability strong { position:relative; z-index:1; font-size:16.5px; }.featured-market-probability span,.featured-market-probability small { display:none; }
  .featured-market-chart { display:none; }.featured-market-actions { margin-top:18px; }.featured-market-actions button { min-height:42px; padding:0 12px; border-radius:13px; font-size:13px; }.featured-market-actions button:first-child { background:var(--rf-yes-soft); color:var(--rf-yes); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rf-yes) 16%,transparent); }.featured-market-actions button:last-child { background:var(--rf-no-soft); color:var(--rf-no); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rf-no) 14%,transparent); }.featured-market-actions strong { color:var(--rf-ink); }
  .featured-market-stats { margin-top:12px; padding-top:10px; }
  .market-highlight-rail .market-thumb { width: 42px!important; height: 42px!important; padding: 4px!important; border-radius: 12px!important; }
  .market-highlight-rail .probability-block { width: 58px!important; height: 58px!important; }
  .market-highlight-rail .market-card-stats { grid-column: 1/-1!important; }
  /* Compact featured event card. Sizes are the design's inline values; row
     spacing is carried on the cells because the grid runs at row-gap 0. */
  /* !important only to beat meridian-app.css's own compact override. */
  .group-card { grid-template-columns: 28px minmax(0,1fr)!important; column-gap: 9px; row-gap: 0; min-height: 0; padding: 15px 16px 13px; }
  .group-card-image, .group-card-monogram { width: 28px; height: 28px; margin: 0 0 11px; padding: 2px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(23,20,15,.06); font-size: 11px; font-weight: 700; }
  .group-card-topline { margin-bottom: 11px; min-height: 28px; gap: 9px; font-size: 9.5px; letter-spacing: .14em; }
  .group-card-topline span:last-child { padding: 4px 8px; font-size: 9px; letter-spacing: .1em; }
  .group-card h3 { margin: 0 0 14px; font-size: 19px; font-weight: 600; line-height: 1.25; }
  .group-card-leaders { margin: 0; gap: 12px; }
  .group-card-leaders > .group-leader { gap: 8px; }
  .group-leader-line { gap: 12px; }
  .group-card-leaders b { font-size: 14.5px; font-weight: 500; }
  .group-card-leaders small { color: #a8a099; font-size: 12.5px; font-weight: 600; text-decoration: none; }
  .group-card-leaders strong { min-width: 58px; padding: 6px 0; font-size: 13.5px; font-weight: 700; }
  .group-leader > i { height: 2.5px; background: #edeae6; }
  .group-card-footer { margin: 13px 0 0; padding-top: 11px; border-top-color: rgba(23,20,15,.07); font-size: 11.5px; }
  /* The full-card hit sits under the rows and the footer so those keep their
     own destinations; everything else on the card still opens the group. */
  .group-card-leaders > .group-leader, .group-card-footer { position: relative; z-index: 2; }
  .all-markets-heading { margin-top: 20px; }
  .market-card { grid-template-columns: 42px minmax(0,1fr) 58px; }
  .card-topline .closing { display:none; }
  .market-risk-note { padding-bottom: 4px; }
  .ajewa-pagination { align-items: stretch; flex-direction: column; margin-top: 14px; padding-top: 12px; }.ajewa-pagination > div { justify-content: space-between; }.ajewa-pagination button { flex: 1; }
  .group-detail { padding: 4px 20px 28px; }
  .group-back { padding: 4px 0 16px; color: #776f67; }
  /* Hatched 56px tile, matching the market detail treatment. */
  .group-detail-header img, .group-detail-monogram { background-color: #e7e3de; background-image: repeating-linear-gradient(135deg, rgba(23,20,15,.05) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px rgba(23,20,15,.07); }
  /* `display:contents` on the copy wrapper lets the meta line escape the title
     column and run the full width, as it does in the design. */
  /* Row 3 is a flexible spacer: the 56px badge spans rows 1-3, so the slack
     between it and the shorter eyebrow + title lands there instead of being
     split across the text rows. */
  .group-detail-header { grid-template-columns: 56px minmax(0,1fr); grid-template-rows: auto auto 1fr auto; column-gap: 13px; row-gap: 0; margin-bottom: 0; }
  .group-detail-header > div { display: contents; }
  .group-detail-header img, .group-detail-monogram { grid-column: 1; grid-row: 1/4; align-self: start; }
  .group-detail-header .section-kicker { grid-column: 2; grid-row: 1; }
  .group-detail-header h1 { grid-column: 2; grid-row: 2; font-size: 22px; }
  .group-detail-header p:not(.section-kicker) { display: none; }
  .group-detail-meta { grid-column: 1/-1; grid-row: 4; flex-wrap: wrap; margin: 14px 0 16px; }
  .group-resolution-note { margin: 0 0 22px; }
  .group-member-heading { margin-bottom: 10px; }
  .group-member-heading .section-kicker { font-weight: 700; }
  /* Question and percentage share the first line, priced buttons the second. */
  .group-member-row { grid-template-columns: minmax(0,1fr) auto; gap: 11px; padding: 13px 14px 12px; border-radius: 18px; }
  .group-member-copy strong { display: none; }
  .group-member-copy span { display: block; color: var(--rf-ink); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
  .group-member-actions button { min-height: 0; align-items: baseline; padding: 11px 12px; }
  .group-member-actions button:first-child { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rf-yes) 16%,transparent); }
  .group-member-actions button:last-child { box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rf-no) 14%,transparent); }
  .group-member-actions strong { font-size: 13px; font-weight: 700; }
  .market-detail-route main { width: 100%; }
  .market-detail-route .workspace-grid { padding: 0 20px; }
  .trade-drawer, .market-detail-route .trade-drawer { margin-top: 0; padding-top: 0; }
  .market-detail-layout { display: flex; flex-direction: column; gap: 0; }
  .market-detail-layout.detail-only { padding: 0 0 118px; }
  .market-inline-back { margin: 0 0 16px; padding: 4px 0; color: #776f67; }
  .market-hero { padding-top: 0!important; gap: 13px; margin-bottom: 18px; }
  /* Hatched tile behind the artwork, matching the compact card monogram. */
  .market-detail-layout .drawer-market-image, .market-detail-layout .drawer-market-image.market-image-pair { width: 56px; height: 56px; border-radius: 16px; background-color: #e7e3de; background-image: repeating-linear-gradient(135deg, rgba(23,20,15,.05) 0 4px, transparent 4px 8px); }
  .market-copy { padding-right: 0; }
  .market-detail-layout .market-copy h1 { font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
  .drawer-close { top: 0; right: 0; }
  .price-chart-panel, .market-detail-secondary .price-chart-panel { margin: 2px 0 0; padding: 16px 16px 10px; }
  .price-chart-heading { flex-wrap: wrap; gap: 10px; padding: 0; border-bottom: 0; }
  .market-detail-layout .market-live-price { display: block; flex: 0 1 auto; white-space: nowrap; }
  .market-detail-layout .market-live-price span { display: block; margin-bottom: 4px; font-size: 9.5px; }
  .market-detail-layout .market-live-price strong { display: inline; font-size: 38px; color: var(--rf-ink); line-height: 1; letter-spacing: -.035em; }
  .market-price-delta { display: inline; margin-left: 8px; color: #9a928a; }
  .market-price-delta.up { color: var(--rf-yes); }
  .market-price-delta.down { color: var(--rf-accent); }
  .chart-ranges { width: auto; flex: none; }
  .chart-ranges button { min-height: 0; }
  .price-chart { min-height: 0; margin-top: 14px; padding: 0; }
  .price-chart .chart-state { min-height: 76px; }
  .price-chart .chart-sparkline { display: block; width: 100%; height: 76px; overflow: visible; }
  .chart-sparkline .chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .chart-sparkline.up .chart-line { stroke: var(--rf-yes); }
  .chart-sparkline.up .chart-area { fill: var(--rf-yes); fill-opacity: .08; }
  .chart-sparkline.up .chart-last { fill: var(--rf-yes); }
  .chart-sparkline.down .chart-line { stroke: var(--rf-accent); }
  .chart-sparkline.down .chart-area { fill: var(--rf-accent); fill-opacity: .08; }
  .chart-sparkline.down .chart-last { fill: var(--rf-accent); }
  .chart-axis-labels { display: flex; justify-content: space-between; margin-top: 8px; color: #9a928a; font-size: 10px; font-weight: 600; letter-spacing: .04em; }
  .market-statline, .market-detail-secondary .market-statline { grid-template-columns: repeat(3,1fr)!important; margin: 12px 0 0; }
  .market-statline > div { min-height: 0; padding: 12px 13px; }.market-statline > div:last-child { grid-column: auto!important; }.market-statline strong { font-size: 15px; }
  .resolution { margin-top: 12px; }
  .resolution summary span { font-size: 12px; text-transform: none; }
  /* Keep the settlement source visible while the rules stay collapsed. */
  .resolution::details-content { block-size: auto; content-visibility: visible; overflow: visible; }
  .resolution:not([open]) > p { display: none; }
  .resolution > p { margin: 10px 0 0; }
  .resolution > small { display: block; margin-top: 10px; color: var(--rf-muted); font-size: 11.5px; }
  .market-detail-actions { position: fixed; right: 0; bottom: calc(84px + env(safe-area-inset-bottom)); left: 0; z-index: 12; margin: 0; padding: 14px 20px 18px; border-radius: 0; background: linear-gradient(to top,var(--rf-canvas) 62%,color-mix(in srgb,var(--rf-canvas) 0%,transparent)); backdrop-filter: none; }
  .market-detail-actions button { min-height: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 15px 16px; }
  .market-detail-actions button:last-child span { opacity: .7; }
  .trade-entry-open .drawer-close { visibility: hidden; }
  .trade-entry-open .trade-drawer::before { content: ""; position: fixed; z-index: 30; inset: 0; background: rgba(23,20,15,.32); animation: rf-fade .2s ease both; }
  .trade-entry-open .trade-ticket, .trade-entry-open .market-detail-layout > .trade-ticket { position: fixed; z-index: 31; top: auto; right: 0; bottom: 0; left: 0; display: flex; max-height: calc(100dvh - 20px); flex-direction: column; overflow-y: auto; padding: 12px 20px 0; border-radius: 26px 26px 0 0; background: var(--rf-canvas); box-shadow: 0 -14px 40px -12px rgba(23,20,15,.3); animation: rf-sheet .28s cubic-bezier(.2,.8,.2,1) both; }
  .trade-entry-open .mobile-nav { display:none!important; }
  body.trade-entry-open { padding-bottom:0; }
  .trade-entry-open .trade-ticket .sheet-handle { display: block; margin: 0 auto; }
  .trade-entry-open .trade-receipt { position: fixed; z-index: 31; inset: 0; display: flex; width: 100%; height: 100dvh; flex-direction: column; justify-content: center; margin: 0; padding: 24px 26px 30px; overflow-y: auto; border-radius: 0; background: var(--rf-canvas); box-shadow: none; }
  .trade-ticket .ticket-heading { padding: 14px 42px 12px 0; }
  .ticket-heading strong { max-width: 250px; }
  .trade-sheet-close { top: 30px; right: 20px; }
  .trade-ticket .outcome-switch { margin-top: 0; }
  .market-detail-route .market-detail-layout .outcome-switch button { min-height: 0; padding: 13px 14px; row-gap: 0; }
  .market-detail-layout .money-input { margin: 6px 0 2px; gap: 6px; }
  .market-detail-layout .money-input input { padding: 0; }
  .market-detail-layout .outcome-switch small { display: block; color: #776f67; font-size: 10.5px; }
  /* The sheet's type sits on its own metrics, not the app's 1.6 body rhythm. */
  .market-detail-layout .outcome-switch span, .market-detail-layout .outcome-switch strong, .market-detail-layout .outcome-switch small, .market-detail-layout .money-input b, .market-detail-layout .money-input input { line-height: normal; }
  .market-detail-layout .outcome-switch button strong { font-size: 15px; }
  .market-detail-layout .field.amount-field { margin: 0; }
  .market-detail-layout .money-input b { display: inline; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--rf-muted); font-size: 25px; }
  .market-detail-layout .field input { font-size: 29px; }
  .market-detail-layout .quantity-presets { gap: 7px; margin: 12px 0 0; }
  .market-detail-layout .quantity-presets button { min-height: 0; padding: 10px 0; font-size: 12.5px; }
  .market-detail-layout .quote-box { margin-top: 12px; padding: 15px 16px; }
  .market-detail-layout .quote-status strong { font-size: 13px; }
  .market-detail-layout .quote-buy .quote-status { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .market-detail-layout .quote-buy .quote-warning { margin: 11px 0 0; padding-top: 0; border-top: 0; }
  .market-detail-layout .quote-buy dl { grid-template-columns: 1fr auto; gap: 7px 0; margin-top: 10px; }
  .market-detail-layout .quote-buy dt { padding-right: 12px; }
  .market-detail-layout .quote-buy dd { font-size: 15px; text-align: right; }
  .market-detail-layout .quote-buy dt:nth-of-type(2), .market-detail-layout .quote-buy dd:nth-of-type(2) { margin-top: 4px; padding-top: 11px; border-top: 1px solid rgba(14,122,78,.14); }
  .market-detail-route .market-detail-layout .trade-actions { position: sticky; right: auto; bottom: 0; left: auto; margin: 12px 0 0; padding: 12px 0 22px; border: 0; border-radius: 0; background: var(--rf-canvas); box-shadow: 0 -1px 0 rgba(23,20,15,.06); }
  .market-detail-route .market-detail-layout .trade-actions button { min-height: 0; padding: 17px 0; letter-spacing: -.01em; }
  .trade-receipt .receipt-check { flex: none; }
  .trade-receipt h2 { margin: 0 0 8px; font-family: var(--rf-font)!important; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
  .trade-receipt .receipt-actions .buy-button { background: var(--rf-ink)!important; box-shadow: none; }
  .market-detail-route .market-detail-layout .trade-actions button { box-shadow: none; }
  .trade-receipt .receipt-summary { margin: 0 0 22px; color: #776f67; font-size: 14px; line-height: 1.5; }
  .trade-receipt dl { gap: 0 18px; padding: 16px; }
  .trade-receipt dt, .trade-receipt dd { padding: 5px 0; font-size: 13.5px; }
  .trade-receipt dt { color: #776f67; }
  .trade-receipt .receipt-reference, .trade-receipt .receipt-reference-label { display: none; }
  .receipt-actions { gap: 9px; margin-top: 20px; }
  .receipt-actions button { min-height: 0; padding: 15px 0; border-radius: 15px; font-size: 15px; }
  .receipt-actions .preview-button { font-weight: 600; }
  .portfolio-section, .history-section, .funds-page { padding: 4px 20px 28px; }
  .portfolio-heading, .history-heading { margin-bottom: 16px; }.portfolio-heading h2, .history-heading h2 { font-size: 30px!important; }
  .portfolio-summary { grid-template-columns: repeat(3,1fr); }.portfolio-summary .portfolio-value-card { grid-column: 1/-1; }.portfolio-summary > div { min-height: 62px; padding: 12px 10px; }
  .position-grid { grid-template-columns: 1fr; }
  /* Compact cards carry value and P&L in the numbers grid and the footer line,
     so the desktop primary block and the fourth stat are hidden HERE ONLY.
     Hiding them globally left the desktop card with no value and no P&L. */
  .position-primary { display: none; }
  .position-numbers > div:nth-child(4) { display: none; }
  /* Wallet stat row: three equal cells. The base sheet promotes the first cell
     to a full-width dark banner with white type, which the design does not
     have, so both are unwound here — and the P/L tint has to out-specify that
     white rule without touching the `!important` guard on the cell itself. */
  .history-summary { grid-template-columns: repeat(3,1fr); margin-top: 0; }
  .history-summary > div { gap: 0; }
  .history-summary > div:first-child { grid-column: auto; }
  .history-summary > div:first-child span, .history-summary > div:nth-child(2) span, .history-summary > div:last-child span { color: var(--rf-muted); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; }
  .history-summary > div:first-child strong, .history-summary > div:nth-child(2) strong, .history-summary > div:last-child strong { color: var(--rf-ink); font-size: 15px; font-weight: 700; letter-spacing: normal; }
  .history-summary > div:first-child strong.pnl-positive, .history-summary > div strong.pnl-positive { color: var(--rf-yes); }
  .history-summary > div:first-child strong.pnl-negative, .history-summary > div strong.pnl-negative { color: var(--rf-no); }

  /* Wallet settings card: hairline-separated rows, chevron on the right. The
     account sheet's grouped rows and Money's "move money" links share it. */
  .wallet-settings, .account-rows, .money-flow-links { display: flex; flex-direction: column; gap: 1px; margin: 0 0 24px; overflow: hidden; border-radius: 16px; background: var(--rf-line); }
  .wallet-settings button, .account-rows button { display: flex; min-height: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border: 0; border-radius: 0; background: #fff; color: var(--rf-ink); font-size: 13.5px; font-weight: 600; text-align: left; }
  .wallet-settings button > span:last-child, .account-rows button > span:last-child { display: flex; align-items: center; gap: 8px; font-weight: 400; }
  .wallet-settings button > span:last-child > span, .account-rows button > span:last-child > span { color: var(--rf-muted); font-size: 12px; }
  .wallet-settings i, .account-rows i { color: #c1bab2; font-size: 13px; font-style: normal; }

  /* Transaction heading and filter chips. The chips take the design's 33px
     height rather than a 44px tap target — an explicit product decision. */
  /* The panel is transparent here, so its inherited rounded clip would only
     shave the ends off the heading text sitting on its top edge. */
  .activity-panel { overflow: visible; border-radius: 0; }
  .activity-heading > span { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--rf-muted); font-size: 11.5px; font-weight: 600; }
  /* The base sheet leaves the toolbar as a `space-between` track, which stops
     the filter row from stretching to the full column. */
  .history-toolbar { grid-template-columns: minmax(0,1fr); justify-content: stretch; }
  .history-filters { width: auto; margin: 0; padding: 0; overflow-x: visible; }
  .history-filters button { min-height: 0; flex: 1; padding: 10px 0; line-height: normal; }

  /* Day groups above the rows they head. */
  .history-day { display: block; margin: 10px 0 2px; color: var(--rf-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .history-day:first-child { margin-top: 0; }

  /* Transaction row: 34px tag chip, market plus detail, amount plus time. */
  .activity-row { grid-template-columns: 34px minmax(0,1fr) auto; }
  .history-entry { grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; }
  .history-entry .history-market-image, .history-entry .history-entry-label, .history-entry .reference-copy { display: none; }
  .history-tag-chip { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: var(--rf-soft); color: var(--rf-muted-strong); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
  .history-tag-chip.won { background: var(--rf-yes-soft); color: var(--rf-yes); }
  .history-tag-chip.lost { background: var(--rf-no-soft); color: var(--rf-no); }
  .history-entry .activity-market { gap: 3px; }
  .history-entry .history-market-link, .history-entry .activity-market > strong { min-height: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .history-entry .activity-market > span { color: var(--rf-muted); font-size: 11.5px; line-height: 1.35; }
  .history-entry .history-group-context { color: var(--rf-muted-strong); font-size: 11px; font-weight: 600; }
  .history-entry .activity-market > small { display: none; }
  .history-entry .activity-amount { grid-column: 3; justify-items: end; gap: 3px; padding-top: 0; border-top: 0; text-align: right; }
  .history-entry .activity-amount strong { font-size: 13.5px; font-weight: 700; }
  .history-entry .activity-amount > span { font-size: 11px; }
  .history-entry .history-mobile-time { color: #a8a099; font-size: 11px; }
  footer { display: none; }
  /* ── Account sheet ───────────────────────────────────────────────────────
     Restyling only. The tab strip stays because it is the sole route to the
     KYC form and document upload, the payout destination and notification
     controls, and the responsible-gaming trading break. Every value shown
     comes from a field the API returns; nothing is a placeholder. */
  .account-modal { inset: 0; width: 100%; height: 100dvh; max-height: none; padding: 54px 20px calc(30px + env(safe-area-inset-bottom)); border-radius: 0; background: var(--rf-canvas); }.account-modal > .drawer-close { position: fixed; top: 14px; right: 14px; }
  /* The sheet title is redundant beside the profile row but still names the
     dialog through aria-labelledby, so it stays in the accessibility tree. */
  .account-header { display: block; padding: 0; }
  .account-header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Profile row: avatar tile, display name, real KYC status pill. There is no
     phone number in the session, so that line of the design is dropped and the
     account email — which the session does carry — sits in its place. */
  .account-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .account-summary .avatar { width: 52px; min-width: 52px; height: 52px; padding: 0; border-radius: 17px; background: var(--rf-accent); box-shadow: none; color: #fff; font-size: 20px; font-weight: 700; }
  .account-summary > div { min-width: 0; flex: 1; gap: 0; }
  .account-summary strong { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
  .account-summary > div > span { display: block; margin-top: 3px; overflow: hidden; color: var(--rf-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .account-summary .status-chip { display: flex; flex: none; align-items: center; gap: 5px; width: max-content; padding: 6px 10px; border-radius: 999px; background: var(--rf-soft); color: var(--rf-muted-strong); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
  .account-summary .status-chip::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
  .account-summary .status-chip.verified { background: var(--rf-yes-soft); color: var(--rf-yes); }
  .account-summary .status-chip.verified::before { background: #17b26a; }
  .account-summary .status-chip.submitted, .account-summary .status-chip.under_review { background: #f8efcf; color: #7b5d16; }
  .account-summary .status-chip.rejected { background: var(--rf-no-soft); color: var(--rf-no); }

  /* Tab strip as a segmented chip track. 33px chips, below the 44px target by
     explicit product decision, matching the wallet filter chips. */
  .account-nav { position: static; gap: 4px; margin: 0 0 18px; padding: 3px; border: 0; border-radius: 13px; background: var(--rf-soft); backdrop-filter: none; }
  .account-nav button { min-width: 0; flex: 1; min-height: 0; padding: 9px 0; border: 0; border-radius: 10px; background: transparent; color: var(--rf-muted-strong); font-size: 12px; font-weight: 700; letter-spacing: 0; text-align: center; }
  .account-nav button.active { background: #fff; color: var(--rf-ink); box-shadow: 0 1px 2px rgba(23,20,15,.07); }
  .account-view { padding-top: 0; }
  .account-view .view-heading { margin-bottom: 13px; }
  .account-view .view-heading .section-kicker { display: none; }
  .account-view .view-heading h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

  /* Verification card: segmented progress, one row per real step. */
  /* `.account-modal [class*="card"]` rounds every card to 18px, so the design's
     20px needs the same specificity to land. */
  .account-modal .verify-card { margin-bottom: 12px; padding: 15px 16px 14px; border-radius: 20px; background: var(--rf-surface); box-shadow: 0 0 0 1px rgba(23,20,15,.07); }
  .verify-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .verify-kicker { margin: 0 0 4px; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .verify-card-heading strong { font-size: 15.5px; font-weight: 700; }
  .verify-next { flex: none; color: var(--rf-accent); font-size: 11.5px; font-weight: 700; }
  .verify-next.done { color: var(--rf-yes); }
  .verify-bars { display: flex; gap: 4px; margin: 12px 0 13px; }
  .verify-bars span { flex: 1; height: 4px; border-radius: 999px; background: #e3dfda; }
  .verify-bars span.done { background: var(--rf-yes); }
  .verify-steps { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
  .verify-steps li { display: flex; align-items: center; gap: 9px; }
  .verify-steps li > span { display: grid; width: 17px; height: 17px; flex: none; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cfc8c0; color: #fff; font-size: 9px; font-weight: 700; }
  .verify-steps li.done > span { background: var(--rf-yes); box-shadow: none; }
  .verify-steps b { min-width: 0; flex: 1; color: var(--rf-muted-strong); font-size: 13px; font-weight: 600; }
  .verify-steps li.done b { color: var(--rf-ink); }
  .verify-steps em { flex: none; color: var(--rf-muted); font-size: 11px; font-style: normal; font-weight: 600; }
  .verify-note { margin: 13px 0 12px; color: var(--rf-muted-strong); font-size: 11.5px; line-height: 1.5; }
  .verify-cta { display: block; width: 100%; min-height: 0; padding: 13px 0; border: 0; border-radius: 13px; background: var(--rf-ink); color: #fff; font-size: 13.5px; font-weight: 700; }

  /* Grouped rows. `.account-rows` and `.money-flow-links` join the wallet's
     hairline-separated card treatment declared above. */
  .account-group-label { margin: 0 0 9px; color: var(--rf-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .account-rows { margin-bottom: 20px; }
  .money-flow-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border: 0; border-radius: 0; background: #fff; color: var(--rf-ink); font-size: 13.5px; font-weight: 600; }
  .money-flow-links a > span:first-child, .money-flow-links a > span:last-child { display: none; }
  .money-flow-links a::after { content: "›"; color: #c1bab2; font-size: 13px; }
  .money-flow-links strong { font-size: 13.5px; font-weight: 600; }
  .account-modal .account-panel { margin-bottom: 12px; padding: 15px 16px 14px; border-radius: 20px; background: var(--rf-surface); box-shadow: 0 0 0 1px rgba(23,20,15,.07); }
  .account-panel h3 { font-size: 15.5px; letter-spacing: -.01em; }
  .account-panel .panel-heading p, .account-panel > div > p { font-size: 11.5px; line-height: 1.5; }
  .account-panel .panel-kicker { margin: 0 0 3px; color: var(--rf-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  /* Inside a white panel the hairline-gap trick has nothing to show against,
     so the rows carry the separator themselves. */
  .account-panel .money-flow-links { margin: 0; gap: 0; border-radius: 0; background: transparent; }
  .account-panel .money-flow-links a { padding: 14px 0; }
  .account-panel .money-flow-links a + a { border-top: 1px solid var(--rf-line); }
  /* Three equal cells. The base grid packs the label and the value into one
     row here, which overlaps them at this width. */
  .money-overview { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .money-overview > div { display: flex; min-height: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; padding: 12px 10px; border-radius: 16px; background: var(--rf-surface); }
  .money-overview div:first-child { background: var(--rf-surface); }
  .money-overview div:first-child span, .money-overview div:first-child strong, .money-overview div:first-child small { color: inherit; }
  .money-overview span { color: var(--rf-muted); font-size: 8.5px; font-weight: 700; letter-spacing: .09em; }
  .money-overview strong { font-size: 14px; overflow-wrap: anywhere; letter-spacing: normal; }
  .money-layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  /* Money activity and notification receipts keep the wallet row rhythm. */
  .payment-activity > li { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 13px 0; }
  .payment-activity .payment-kind { width: 34px; height: 34px; border-radius: 11px; }
  .payment-activity .payment-detail strong { font-size: 13.5px; font-weight: 600; }
  .payment-activity .payment-detail small { color: var(--rf-muted); font-size: 11.5px; }
  .payment-activity > li > b { grid-column: 3; grid-row: 1; justify-items: end; gap: 3px; font-size: 13.5px; text-align: right; }
  .payment-notifications > li { padding: 13px 0; }
  .payment-notifications strong { font-size: 13.5px; font-weight: 600; }
  .payment-notifications small { color: var(--rf-muted); font-size: 11.5px; }

  /* The sticky KYC submit bar is cut to the sheet's own 20px gutter. */
  .kyc-form > .primary-action { bottom: calc(-30px - env(safe-area-inset-bottom)); margin-inline: -20px; }

  /* Log out in the design's soft destructive treatment. No build version is
     served to the client, so the design's version line is omitted. */
  .account-actions { display: block; margin-top: 4px; padding-top: 0; border-top: 0; text-align: center; }
  .account-actions .text-button { display: block; width: 100%; min-height: 0; padding: 15px 0; border: 0; border-radius: 15px; background: var(--rf-soft); color: var(--rf-no); font-size: 13.5px; font-weight: 700; box-shadow: 0 0 0 1px rgba(23,20,15,.06); }
  .account-actions > span { display: block; margin-top: 14px; color: #a8a099; font-size: 11px; letter-spacing: 0; text-transform: none; }
  .auth-layout.auth-register { display:flex; min-height:100dvh; flex-direction:column; }
  .auth-layout.auth-register .auth-assurance { display:block; margin:0; padding:22px 20px 18px; border-radius:0 0 22px 22px; }
  .auth-layout.auth-register .auth-assurance .drawer-category { margin:0 0 5px; font-size:9px; }
  .auth-layout.auth-register .auth-assurance h2 { margin:0; font-family:var(--rf-font)!important; font-size:23px; line-height:1.1; }
  .auth-layout.auth-register .auth-assurance ul { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 0; }
  .auth-layout.auth-register .auth-assurance li { display:grid; align-content:start; gap:6px; font-size:10.5px; line-height:1.3; }
  .auth-layout.auth-register .auth-assurance li span { width:24px; height:24px; }
  .auth-layout.auth-register .auth-assurance small { display:none; }
  .auth-layout.auth-register .auth-entry { padding-top:22px; }
  .mobile-nav { position: fixed; z-index: 18; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); height: auto; min-height: 0; padding: 10px 8px calc(20px + env(safe-area-inset-bottom)); }.mobile-nav a, .mobile-nav button { display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-decoration: none; }.mobile-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
}

@keyframes rf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rf-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; } }

/* ---------------------------------------------------------------------------
   Desktop (wide) refinements. Everything here is scoped to min-width 701px so
   the signed-off compact layout in the max-width:700px block above is never
   reached by it. Numbers come from the desktop design source.
   --------------------------------------------------------------------------- */
@media (min-width: 701px) {
  /* Sticky translucent bar: blur 12px over a hairline, with no border of its
     own, so the 68px height is exactly 14px + the 40px search field + 14px. */
  .topbar { border-bottom: 0; background: color-mix(in srgb, var(--rf-canvas) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(23, 20, 15, .08); }
  .topbar-add-money { display: inline-flex; flex: none; align-items: center; padding: 10px 15px; border-radius: 11px; background: var(--rf-accent); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: none; }
  .topbar-add-money:hover { background: #c82e09; color: #fff; }
  .primary-nav { gap: 4px; padding: 0; border: 0; }
  .primary-nav a { padding: 9px 14px; border-radius: 10px; color: var(--rf-muted-strong); font-size: 14px; font-weight: 600; }
  .primary-nav a.active { background: var(--rf-soft-2)!important; box-shadow: none!important; color: var(--rf-ink)!important; }
  .primary-nav a.active::after { display: none; }

  /* The wide design runs the filter row straight into the content: the
     headline, intro and open-market count belong to the compact screen. */
  .markets-page .section-heading { display: none!important; }
  .discovery-toolbar { margin-bottom: 22px; }

  .desktop-discovery-layout { gap: 16px 20px; margin-bottom: 40px; }
  /* The rail's event card carries its own FEATURED chip and category, so the
     design gives it no heading above — the compact layout hides this too. */
  .desktop-discovery-layout .group-discovery > .all-markets-heading { display: none; }
  /* Two fixtures in the rail slot, as the design shows; the footer still links
     through to every market in the event. */
  .desktop-discovery-layout .group-card-leaders > .group-leader:nth-child(n+3) { display: none; }
  /* The hero spans both rail rows, so it stretches to their height and the
     chart takes up the slack instead of leaving a hole beside the movers. */
  .desktop-discovery-layout .market-highlights { align-self: stretch; margin: 0; }
  .desktop-featured-market { height: 100%; }
  .all-markets-heading#all-markets-heading { margin: 0 0 14px; }
  #all-markets-heading .section-kicker { color: var(--rf-ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-transform: none; }
  #all-markets-heading > span { font-size: 12.5px; font-weight: 600; }

  /* Featured market. `display:contents` on the title wrapper lets the badge,
     the eyebrow and the question share one grid, so the badge spans the two
     copy rows and the chart column runs the full height of the lower block. */
  .desktop-featured-market {
    display: grid;
    grid-template-columns: 60px minmax(0, 154px) minmax(0, 1fr);
    grid-template-areas:
      "art     topline topline"
      "art     title   title"
      "prob    prob    chart"
      "actions actions chart"
      "stats   stats   chart";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    column-gap: 16px;
    min-height: 0;
    padding: 24px 26px 22px;
    border-radius: 24px;
    box-shadow: 0 10px 30px -22px rgba(23, 20, 15, .4), 0 0 0 1px rgba(23, 20, 15, .07);
  }
  .featured-market-hit { inset: 0; }
  .featured-market-title { display: contents; }
  .featured-market-art { grid-area: art; }
  .featured-market-image { width: 60px; height: 60px; padding: 6px; border-radius: 18px; background-color: #e7e3de; background-image: repeating-linear-gradient(135deg, rgba(23, 20, 15, .05) 0 4px, transparent 4px 8px); }
  .featured-market-topline { grid-area: topline; justify-content: flex-start; gap: 9px; margin-bottom: 7px; font-size: 10px; letter-spacing: .12em; }
  .featured-market-topline small { display: flex; align-items: center; gap: 9px; color: var(--rf-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .featured-market-topline small::before { content: ""; width: 3px; height: 3px; flex: none; border-radius: 50%; background: #c9c2ba; }
  .desktop-featured-market h2 { grid-area: title; max-width: 560px; margin: 0; font-size: 27px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
  .featured-market-probability { grid-area: prob; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 9px; margin-top: 22px; }
  .featured-market-probability strong { grid-column: 1; grid-row: 1; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
  .featured-market-probability small { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; }
  .featured-market-probability span { grid-column: 1/-1; grid-row: 2; margin-top: 5px; letter-spacing: .12em; }
  .featured-market-actions { grid-area: actions; gap: 9px; margin-top: 18px; }
  .featured-market-actions button { display: block; min-height: 0; padding: 14px 15px; border-radius: 14px; text-align: left; }
  .featured-market-actions button:first-child { background: var(--rf-yes-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rf-yes) 18%, transparent); color: var(--rf-yes); }
  .featured-market-actions button:last-child { background: var(--rf-no-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rf-no) 16%, transparent); color: var(--rf-no); }
  .featured-market-actions span { display: block; font-size: 12.5px; font-weight: 700; }
  .featured-market-actions strong { display: block; margin-top: 3px; color: var(--rf-ink); font-size: 17px; font-weight: 700; }
  .featured-market-stats { grid-area: stats; gap: 16px; margin-top: 16px; padding-top: 0; border-top: 0; font-size: 12px; }
  /* Time left already reads in the eyebrow beside the category. */
  .featured-market-stats strong { display: none; }
  .featured-market-chart { grid-area: chart; display: flex; flex-direction: column; align-self: stretch; height: auto; margin: 22px 0 0 10px; }
  /* The design's 190px panel; any slack from the rail sits below the axis
     rather than stretching a short series over the whole card. */
  .featured-market-chart svg { flex: none; height: 190px; }
  .featured-chart-line { stroke-width: 2; }
  .featured-market-chart svg.up .featured-chart-line { stroke: var(--rf-yes); }
  .featured-market-chart svg.up .featured-chart-area { fill: color-mix(in srgb, var(--rf-yes) 9%, transparent); }
  .featured-market-chart svg.down .featured-chart-line { stroke: var(--rf-no); }
  .featured-market-chart svg.down .featured-chart-area { fill: color-mix(in srgb, var(--rf-no) 9%, transparent); }
  .featured-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: #9a928a; font-size: 11px; font-weight: 600; letter-spacing: .04em; }

  /* Moving today: a ranked 1-5 list under a kicker. */
  .market-movers { padding: 18px 19px 14px; border-radius: 22px; }
  .movers-heading { margin-bottom: 13px; }
  .movers-heading h2 { color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
  .movers-heading > span { display: none; }
  #market-movers-list { display: flex; flex-direction: column; gap: 1px; }
  .market-mover-row { grid-template-columns: 22px minmax(0, 1fr) auto 52px; gap: 12px; min-height: 0; padding: 11px 0; border-top: 0; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .06); }
  .mover-rank { color: #c1bab2; font-size: 12px; font-weight: 700; }
  .market-mover-row span { font-size: 13.5px; line-height: 1.3; }
  .market-mover-row strong { font-size: 13.5px; }
  .market-mover-row small { font-size: 12px; }

  /* Catalogue cards. */
  .market-grid { gap: 16px; }
  .market-card { grid-template-columns: 36px minmax(0, 1fr) 48px; gap: 0 12px; padding: 16px 17px 14px; }
  /* Bounded so the priced buttons and the stat line stay clear of the overlay. */
  .card-hit { bottom: 100px; height: auto; }
  .market-thumb { width: 36px; height: 36px; border-radius: 12px; }
  .market-card h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
  .card-topline .closing { color: #a8a099; font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .probability-block { width: 48px; height: 48px; }
  .probability-block::before { width: 39px; height: 39px; }
  .probability { font-size: 14px; }
  .probability-block span { top: 51px; }
  .probability-block span::after { font-size: 8.5px; letter-spacing: .08em; }
  .market-card-actions { gap: 8px; margin-top: 14px; }
  .market-card-actions button { min-height: 0; padding: 11px 12px; border-radius: 12px; font-size: 12.5px; }
  .market-card-actions strong { font-size: 13px; }
  .market-card-stats { gap: 12px; margin-top: 11px; padding-top: 10px; }
  /* The topline carries time left on wide screens, so the stat line drops it. */
  .market-time-left { display: none; }
  .market-change { margin-left: auto; }

  /* ── Portfolio ─────────────────────────────────────────────────────────────
     The page runs the full 1216px column: a four-cell stat grid separated by a
     1px hairline, the open/settled switch, then the position table. Sizes are
     the desktop design's inline values. */
  .portfolio-section, .history-section { max-width: none; padding: 30px 0 72px; }
  /* meridian-app.css reaches these with `.portfolio-section .section-heading h2`,
     so the design's 30px needs the same specificity to land. */
  .portfolio-section .section-heading h2, .history-section .section-heading h2 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
  .portfolio-section .section-heading, .history-section .section-heading { margin-bottom: 20px; }

  .portfolio-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0 0 24px; background: var(--rf-line); box-shadow: none; }
  .portfolio-summary > div { padding: 18px 20px; background: #fff; }
  .portfolio-summary .portfolio-value-card { padding: 18px 20px!important; }
  .portfolio-summary span { letter-spacing: .11em; }
  .portfolio-stat { display: block; }
  .portfolio-stat strong { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
  .portfolio-summary .portfolio-value-card > div { margin: 6px 0 0; }
  .portfolio-summary .portfolio-value-card strong { font-size: 24px; }
  /* The compact card folds unrealised P/L and the invested note into cell one;
     the wide grid gives each its own cell, so both are dropped from cell one. */
  .portfolio-summary #portfolio-unrealized, .portfolio-summary #portfolio-cost { display: none; }
  .portfolio-summary .pnl-positive { color: var(--rf-yes); }
  .portfolio-summary .pnl-negative { color: var(--rf-no); }
  .portfolio-tabs { width: 260px; }
  .portfolio-tabs button { font-size: 13px; }

  .position-table { display: block; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); overflow: hidden; }
  .position-table-head, .position-row { display: grid; grid-template-columns: minmax(0, 2.4fr) 90px 90px 110px 110px 200px; gap: 16px; }
  .position-table-head { padding: 13px 22px; background: #fbfaf9; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .07); color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
  .position-grid { display: block; gap: 0; }
  .position-row { align-items: center; padding: 16px 22px; border-radius: 0; background: #fff; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .06); }
  .position-row:hover { transform: none; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .06); }
  .position-grid > .position-row:last-child { box-shadow: none; }
  .position-row .position-open { display: block; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
  .position-row button.position-open { cursor: pointer; }
  .position-question { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
  .position-status { display: block; margin-top: 4px; color: var(--rf-muted); font-size: 11.5px; font-weight: 600; }
  .position-row .position-outcome { align-self: center; justify-self: start; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
  .position-row .position-cell { font-size: 13.5px; font-weight: 600; }
  .position-row .position-value b { display: block; font-size: 14px; font-weight: 700; }
  .position-row .position-value em { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; font-weight: 700; }
  .position-row .position-value .pnl-positive { color: var(--rf-yes); }
  .position-row .position-value .pnl-negative { color: var(--rf-no); }
  .position-row .position-actions { display: flex; gap: 8px; justify-self: end; margin: 0; }
  .position-row .position-actions button { min-height: 0; padding: 10px 15px; border-radius: 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
  .position-row .position-sell { background: var(--rf-ink); color: #fff; }
  .position-row .position-sell:hover { background: #2b2620; }
  .position-row .position-trade { background: var(--rf-soft); color: var(--rf-ink); box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .07); }
  .position-row .position-trade:hover { background: #ede8e3; }
  .position-grid > .portfolio-empty, .position-grid > .portfolio-empty-state { margin: 0; padding: 44px 22px; text-align: center; }
  .position-grid > .portfolio-empty-state { display: grid; min-height: 0; justify-items: center; gap: 0; border: 0; background: transparent; }
  .position-grid > .portfolio-empty-state .empty-orbit { display: none; }
  .position-grid > .portfolio-empty-state h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
  .position-grid > .portfolio-empty-state p { margin: 0; color: var(--rf-muted-strong); font-size: 13px; }
  .position-grid > .portfolio-empty-state button { min-height: 0; margin-top: 14px; padding: 13px 20px; border: 0; border-radius: 13px; background: var(--rf-ink); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .portfolio-cta { width: auto; min-height: 0; padding: 14px 24px; border-radius: 14px; background: var(--rf-soft); box-shadow: 0 0 0 1px rgba(23, 20, 15, .06); font-size: 13.5px; }
  .portfolio-cta:hover { background: #ede8e3; }

  /* ── Wallet ────────────────────────────────────────────────────────────────
     Transactions against a 380px balance rail. The rail is one grid item
     spanning every content row, so its height never pushes the list down. */
  .history-section {
    display: grid;
    /* Four explicit rows — heading, list header, trades, settled — so the rail
       can span the content rows by line number. `align-content: start` keeps the
       page's min-height from inflating the tracks. */
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto auto auto auto;
    column-gap: 24px;
    align-content: start;
    align-items: start;
  }
  .history-heading { grid-column: 1 / -1; grid-row: 1; }
  .wallet-side { display: block; grid-column: 2; grid-row: 2 / 5; }
  /* Record counts have no cell in the wide design; the list heading already
     carries its own count. */
  .history-summary { display: none!important; }
  .wallet-overview { margin: 0 0 16px; padding: 22px 22px 20px; border-radius: 22px; }
  .wallet-overview > strong { margin: 6px 0 4px; font-size: 32px; }
  .wallet-open-positions { font-size: 12px; }
  .wallet-page-actions { gap: 9px; margin-top: 18px; }
  .wallet-page-actions a { min-height: 0; padding: 13px 0; border-radius: 13px; font-size: 13.5px; }
  .wallet-page-actions a:first-child:hover { background: #c82e09; }
  /* Settings rows exist on both layouts now; the base sheet hides them because
     the wide wallet had no home for them before this column. */
  .wallet-settings { display: block; margin: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); overflow: hidden; }
  .wallet-settings[hidden] { display: none; }
  .wallet-settings button, .account-rows button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .06); color: var(--rf-ink); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
  .wallet-settings button:hover, .account-rows button:hover { background: #fbfaf9; }
  .wallet-settings button:last-child, .account-rows button:last-child { box-shadow: none; }
  .wallet-settings button > span:last-child, .account-rows button > span:last-child { display: flex; align-items: center; gap: 9px; font-weight: 400; }
  .wallet-settings button > span:last-child > span, .account-rows button > span:last-child > span { color: var(--rf-muted); font-size: 12.5px; }
  .wallet-settings i, .account-rows i { color: #c1bab2; font-size: 13px; font-style: normal; }

  /* `display:contents` lifts the trades panel's kicker into the header row so
     the label and the filter chips share one line, as the design has them. */
  #activity { display: contents; }
  #activity > .activity-heading { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; gap: 10px; margin: 0 0 14px; }
  #activity > .activity-list { grid-column: 1; grid-row: 3; }
  #settlements { grid-column: 1; grid-row: 4; margin-top: 20px; }
  .history-toolbar { grid-column: 1; grid-row: 2; align-self: center; justify-self: end; grid-template-columns: auto; margin: 0 0 14px; }
  .history-filters { display: flex; gap: 6px; }
  .history-filters button { min-height: 0; padding: 9px 14px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--rf-line); color: var(--rf-muted-strong); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
  .history-filters button.active { background: var(--rf-ink); box-shadow: none; color: #fff; }
  .activity-heading .section-kicker { color: var(--rf-accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .activity-heading > span { color: var(--rf-muted); font-size: 11.5px; font-weight: 600; }
  .activity-list { display: block; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); overflow: hidden; }
  .history-entry { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 15px 20px; border-radius: 0; background: #fff; box-shadow: inset 0 -1px 0 rgba(23, 20, 15, .06); }
  .activity-list > .history-entry:last-child { box-shadow: none; }
  /* The date moves under the amount, so the middle date column is dropped and
     the tag chip replaces the row thumbnail — as the compact list already does. */
  .history-entry .history-market-image, .history-entry .activity-time, .history-entry .history-entry-label { display: none; }
  .history-tag-chip { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: var(--rf-soft); color: var(--rf-muted-strong); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
  .history-tag-chip.won { background: var(--rf-yes-soft); color: var(--rf-yes); }
  .history-tag-chip.lost { background: var(--rf-no-soft); color: var(--rf-no); }
  .history-entry .activity-market { min-width: 0; gap: 3px; }
  .history-entry .history-market-link, .history-entry .activity-market > strong { min-height: 0; padding: 0; font-size: 14px; font-weight: 600; text-align: left; }
  .history-entry .activity-market > span { color: var(--rf-muted); font-size: 12px; }
  .history-entry .reference-copy { color: var(--rf-muted); font-size: 11px; }
  .history-entry .activity-amount { justify-items: end; gap: 3px; padding-top: 0; border-top: 0; text-align: right; }
  .history-entry .activity-amount > strong { font-size: 14px; font-weight: 700; }
  .history-entry .history-mobile-time { display: block; color: #a8a099; font-size: 11.5px; }

  /* ── Account sheet ─────────────────────────────────────────────────────────
     Restyling only. The tab strip stays because it is the sole route to the KYC
     form and document upload, the payout destination controls, the notification
     read receipts and the responsible-gaming trading break. The design's tier,
     BVN and phone rows have no source on this backend and are left out. */
  .account-modal { width: min(1000px, calc(100vw - 48px)); }
  /* The profile row names the sheet, so the redundant title stays in the
     accessibility tree only — the same treatment the compact sheet uses. */
  .account-header { display: block; padding: 0; }
  .account-header > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .account-summary { display: flex; align-items: center; gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .account-summary .avatar { width: 58px; min-width: 58px; height: 58px; padding: 0; border-radius: 18px; background: var(--rf-accent); color: #fff; font-size: 22px; font-weight: 700; }
  .account-summary > div { min-width: 0; flex: 1; gap: 0; }
  .account-summary strong { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
  /* There is no phone number on the session, so the design's phone line is
     dropped and the account email — which the session carries — takes its place. */
  .account-summary > div > span { display: block; margin-top: 3px; overflow: hidden; color: var(--rf-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .account-summary .status-chip { display: flex; flex: none; align-items: center; gap: 6px; width: max-content; padding: 7px 12px; border-radius: 999px; background: var(--rf-soft); color: var(--rf-muted-strong); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
  .account-summary .status-chip::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
  .account-summary .status-chip.verified { background: var(--rf-yes-soft); color: var(--rf-yes); }
  .account-summary .status-chip.verified::before { background: #17b26a; }
  .account-summary .status-chip.submitted, .account-summary .status-chip.under_review { background: #f8efcf; color: #7b5d16; }
  .account-summary .status-chip.rejected { background: var(--rf-no-soft); color: var(--rf-no); }

  .account-nav { width: 400px; gap: 4px; margin: 24px 0 0; padding: 4px; border: 0; border-radius: 14px; background: var(--rf-soft-2); }
  .account-nav button { min-width: 0; flex: 1; min-height: 0; padding: 10px 0; border: 0; border-radius: 11px; background: transparent; color: var(--rf-muted); font-size: 13px; font-weight: 700; letter-spacing: 0; text-align: center; }
  .account-nav button.active { border-color: transparent; background: #fff; box-shadow: 0 1px 2px rgba(23, 20, 15, .12); color: var(--rf-ink); }
  .account-view { min-height: 0; padding: 20px 0 0; }
  .account-overview-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
  .account-overview-secondary { display: flex; flex-direction: column; gap: 20px; }

  .account-modal .verify-card { margin: 0; padding: 20px 22px 18px; border-radius: 22px; background: var(--rf-surface); box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); }
  .verify-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .verify-kicker { margin: 0; color: var(--rf-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .verify-card-heading strong { font-size: 17px; font-weight: 700; }
  .verify-next { flex: none; color: var(--rf-accent); font-size: 11.5px; font-weight: 700; }
  .verify-next.done { color: var(--rf-yes); }
  .verify-bars { display: flex; gap: 5px; margin: 14px 0 15px; }
  .verify-bars span { flex: 1; height: 4px; border-radius: 999px; background: #e3dfda; }
  .verify-bars span.done { background: var(--rf-yes); }
  .verify-steps { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; }
  .verify-steps li { display: flex; align-items: center; gap: 10px; }
  .verify-steps li > span { display: grid; width: 18px; height: 18px; flex: none; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cfc8c0; color: #fff; font-size: 9.5px; font-weight: 700; }
  .verify-steps li.done > span { background: var(--rf-yes); box-shadow: none; }
  .verify-steps b { min-width: 0; flex: 1; color: var(--rf-muted-strong); font-size: 13.5px; font-weight: 600; }
  .verify-steps li.done b { color: var(--rf-ink); }
  .verify-steps em { flex: none; color: var(--rf-muted); font-size: 11.5px; font-style: normal; font-weight: 600; }
  .verify-note { margin: 15px 0 14px; color: var(--rf-muted-strong); font-size: 12px; line-height: 1.5; }
  .verify-cta { display: block; width: 100%; min-height: 0; padding: 14px 0; border: 0; border-radius: 13px; background: var(--rf-ink); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .verify-cta:hover { background: #2b2620; }
  .account-group-label { margin: 0 0 10px; color: var(--rf-muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .account-rows { display: block; margin: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); overflow: hidden; }
  .account-modal .account-panel { margin: 0; padding: 18px 20px; border-radius: 20px; background: var(--rf-surface); box-shadow: 0 0 0 1px rgba(23, 20, 15, .07); }
  /* Log out in the design's soft destructive treatment. No build version is
     served to the client, so the design's version line is omitted. */
  .account-actions { justify-content: flex-start; gap: 18px; margin-top: 24px; padding-top: 0; border-top: 0; }
  .account-actions .text-button { padding: 14px 24px; border-radius: 14px; background: var(--rf-soft); box-shadow: 0 0 0 1px rgba(23, 20, 15, .06); color: #b92b09; font-size: 13.5px; font-weight: 700; }
  .account-actions .text-button:hover { background: #ede8e3; }
}