/* Live bets page only. Green is the green in the FlipTradeX logo. Green means money won, a YES, a buy or a long, and the side to take
   against the losers. Red means money lost, a NO, a sale or a short. Chips use dark text so both colors stay readable.
   Every shadow, radius, border and hover here is copied from the site's own cards and buttons in fliptradex.webflow.css. */
.live-page { --won: #47b479; --lost: #ef4d5a; --ease: cubic-bezier(.22, 1, .36, 1); }
.live-page .card { border: 1px solid #ffffff17; }
/* The page uses the full window width with the same side gutters as the menu, and adds columns as the window widens. */
.live-wrap, .live-body .header .container-default, .live-body .footer .container-default { padding: 0 clamp(16px, 4vw, 64px); }
.live-body .header .container-default, .live-body .footer .container-default { max-width: none; }
.live-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; } .live-stat { padding: 20px 22px; }
.live-num { color: var(--neutral-100); font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.live-label, .lt-sub, .lm-ago, .lm-more, .lm-who small { color: var(--neutral-400); font-size: 14px; line-height: 1.4; }
.loss, .lm-who .down { color: var(--lost); } .live-num.gain, .gain, .lm-who .up { color: var(--won); }
/* The fade wins lead the page: twice as wide, a green edge, the deep shadow of the site's About page numbers, the biggest number on it,
   and a bar of winning fades (green) against the fades that lost (red) above the net line. */
.live-page .live-win { grid-column: span 2; border-color: var(--won); box-shadow: 0 14px 74px #00000073; padding: 26px 26px 22px; }
.live-win .live-num { font-size: 56px; } .live-win .lm-split { background: var(--lost); margin: 16px 0 10px; }
/* The ticker: the newest winning fades as pills (the site's blog category pill), newest on the left, fading out at the right edge. */
.live-ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px 14px 22px; margin-bottom: 28px; }
#ticker { display: flex; flex: 1 1 260px; gap: 12px; min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, #000 85%, transparent); }
#ticker:empty::before { content: 'The next winning fade shows up here the moment it settles.'; color: var(--neutral-400); font-size: 14px; }
.live-tick { flex: none; display: flex; align-items: center; gap: 8px; max-width: 320px; padding: 10px 22px; border-radius: 1000000px; background: var(--neutral-800); color: var(--neutral-100); font-size: 14px; font-weight: 600; white-space: nowrap; }
.live-tick span { overflow: hidden; text-overflow: ellipsis; } .live-tick b { color: var(--won); } .live-tick .lm-side { margin: 0; background: var(--neutral-700); }
/* Each market card leads with two numbers: what the losers lost there, and what betting against them made. */
.lm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.lm-stats > div { padding: 14px 16px; border-radius: 16px; background: var(--neutral-800); }
.lm-stats span { display: block; color: var(--neutral-400); font-size: 14px; line-height: 1.3; margin-top: 4px; }
.lm-big { display: block; color: var(--neutral-300); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lm-big.loss { color: var(--lost); } .lm-big.gain { color: var(--won); }
.lm-who > span { font-weight: 700; } .live-follow { display: block; margin-top: 16px; text-align: center; text-decoration: none; }
.live-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.live-filters .input { flex: 1 1 320px; max-width: 520px; margin: 0; }
.live-filters .integration-tabs-menu { margin-bottom: 0; } .live-filters .integration-tab-link { margin: 0 10px 0 0; }
.live-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .live-opts > .live-label { margin-left: 8px; }
/* Hover and press, from the site's own pill buttons: a pill grows 4% on hover and settles back while pressed. */
.live-opt { cursor: pointer; text-decoration: none; margin-right: 6px; transform: scale3d(1, 1, 1.01); transition: transform .3s, background-color .3s, color .3s; }
.live-opt:hover { background: var(--secondary-5); transform: scale3d(1.04, 1.04, 1.01); } .live-opt.on { background: var(--neutral-100); color: var(--neutral-800); }
.live-page :is(.button-secondary, .button-primary-gradient, .live-opt):active { transform: scale3d(1, 1, 1.01); }
.live-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; margin: 48px 0 20px; } .live-head h2 { margin: 0; }
.live-status { display: flex; align-items: center; gap: 10px; color: var(--neutral-300); font-size: 14px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--won); } .live-dot.off { background: var(--lost); }
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 24px; }
/* Cards sit above the page on the site's large card shadow, and lift with a deeper one on hover, like its plan and career cards. */
.live-market { display: flex; flex-direction: column; }
.live-market, .live-trader { padding: 26px 26px 18px; box-shadow: 0 10px 34px 0 var(--shadow-card-large); transition: box-shadow .3s, transform .3s; }
@media (hover: hover) { .live-market:hover, .live-trader:hover { transform: translate(0, -4px); box-shadow: 0 14px 74px 0 var(--shadow-card-large); } }
/* Before the feed connects, grey blocks in the shape of a card hold each card's place and breathe (live.js). */
.live-skel i { display: block; height: 32px; border-radius: 16px; background: var(--neutral-800); margin-bottom: 16px; }
.live-skel i:first-child { width: 30%; height: 24px; border-radius: 1000px; } .live-skel i:nth-child(2) { width: 80%; } .live-skel i:nth-child(3) { height: 96px; } .live-skel i:nth-child(4) { height: 56px; }
/* An empty section says what will show up there, in a card the width of the grid. */
.live-grid:empty::before { content: attr(data-empty); grid-column: 1 / -1; padding: 40px 32px; border-radius: 22px; border: 1px solid #ffffff17; background: var(--secondary-5); color: var(--neutral-300); font-size: 18px; text-align: center; }
.lm-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.lm-title { display: flex; align-items: center; gap: 12px; color: var(--neutral-100); font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; overflow-wrap: break-word; }
.lm-title a { text-decoration: none; transition: color .3s; } .lm-title a:hover { color: var(--neutral-300); }
/* Logos saved from Kalshi, Polymarket and Hyperliquid: the market's on its card, a team's beside the side to take. */
.lm-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--neutral-800); }
.lm-side { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: -4px; margin-right: 6px; }
.chip { display: inline-block; white-space: nowrap; border-radius: 1000px; padding: 5px 11px; font-size: 12px; font-weight: 700; line-height: 1.2; background: var(--neutral-700); color: var(--neutral-100); }
.chip.up, .chip.won { background: var(--won); color: var(--neutral-800); } .chip.down, .chip.lost { background: var(--lost); color: var(--neutral-800); }
.chip.open { background: transparent; border: 1px solid var(--neutral-600); color: var(--neutral-300); }
.lm-split { height: 8px; border-radius: 1000px; background: var(--neutral-700); overflow: hidden; }
.lm-split b { display: block; height: 100%; border-radius: inherit; background: var(--won); transform-origin: left; transform: scaleX(var(--w)); transition: transform .5s var(--ease); }
.lm-split b.down { background: var(--lost); } .lm-split-label { display: flex; justify-content: space-between; margin: 8px 0 16px; color: var(--neutral-300); font-size: 14px; }
/* The side to take is the loudest line on a card: white words on the dark tile, edged like the site's Most Popular pill. */
.lm-fade { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px solid #ffffff12; background: var(--neutral-800); color: var(--neutral-100); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.lm-fade b { background: var(--won); color: var(--neutral-800); border-radius: 1000px; padding: 6px 14px; font-size: 14px; white-space: nowrap; } .lm-fade b.down { background: var(--lost); }
.lm-rows { list-style: none; padding: 0; margin: 0; } .lm-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #5e5b7180; } .lm-row:last-child { border-bottom: 0; }
.lm-who { min-width: 0; color: var(--neutral-100); font-size: 16px; line-height: 1.3; }
.lm-who small { display: block; }
.lm-amt { color: var(--neutral-100); font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lm-row.new { animation: live-row-in .5s var(--ease) backwards; } .lm-row.new .lm-who { animation: live-row-tint 2.4s var(--ease) backwards; }
@keyframes live-row-in { from { opacity: 0; transform: translateY(-14px) scale(.98); } } @keyframes live-row-tint { from { color: var(--won); } }
.lm-more { padding-top: 10px; margin-top: auto; } .lt-pnl { font-size: 32px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lt-rate { margin: 16px 0 6px; } .lt-rate span { display: block; margin-top: 8px; color: var(--neutral-300); font-size: 14px; }
.live-more { display: flex; justify-content: center; margin-top: 28px; } /* Locked cards show the market and its counts, with the bets blurred until the visitor signs up. The button sits on the blur by grid,
   not by transform, so the button's own hover growth never knocks it off center. */
.lm-lock { display: grid; } .lm-lock > * { grid-area: 1 / 1; } .lm-lock .lm-rows { filter: blur(6px); opacity: .6; pointer-events: none; user-select: none; } .lm-lock > a { place-self: center; white-space: nowrap; }
.lm-row-more { display: block; padding: 12px 0 2px; font-size: 14px; color: var(--won); } .live-gate { padding: 32px; margin-top: 28px; }
.live-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.live-tier { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; background: var(--neutral-800); border: 1px solid #ffffff17; }
.live-tier.main { border-color: var(--won); } .live-tier .lm-top, .live-tier .lm-title { margin: 0; }
.live-tier .lt-sub { flex: 1; margin: 0; } .live-price { color: var(--neutral-100); font-weight: 700; white-space: nowrap; }
.live-how { padding: 28px; margin-top: 24px; } .live-how p { color: var(--neutral-300); font-size: 16px; margin-bottom: 12px; }
@media screen and (max-width: 479px) {
  .live-stats { grid-template-columns: 1fr 1fr; gap: 12px; } .live-stat { padding: 18px 16px; } .live-num { font-size: 28px; }
  .live-win .live-num { font-size: 40px; } .live-page .live-win { padding: 20px 18px 18px; } .live-ticker { padding: 14px 16px; }
  .live-market, .live-trader { padding: 20px 18px 12px; } .lm-big { font-size: 22px; }
  .live-filters .integration-tab-link { margin: 0 6px 8px 0; padding: 10px 14px; } .live-gate { padding: 22px 18px; }
}
/* The Live API page: readable text, code blocks and a field table. */
.live-doc { max-width: 1000px; margin: 0 auto; } .live-doc .live-how { margin-bottom: 24px; } .live-doc p a { color: var(--won); }
.live-code { background: var(--neutral-800); color: var(--neutral-200); border-radius: 16px; padding: 18px 20px; margin: 0 0 18px; font-size: 14px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.live-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; color: var(--neutral-300); }
.live-table th, .live-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #5e5b7180; vertical-align: top; }
.live-table td:first-child { color: var(--neutral-100); font-weight: 700; white-space: nowrap; }
/* The live feed works like a chat window: a button at the bottom right opens its card above it, and the same button closes it. */
.live-feed { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .live-feed.min > .card { display: none; } .live-feed > .card { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; box-shadow: 0 14px 74px 0 var(--shadow-card-large); } .live-feed .lm-top { margin: 0; } .live-feed .lm-row { display: block; } .live-feed .lm-amt { display: flex; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .live-page * { animation: none !important; transition: none !important; } }
/* The hero gets the menu's 1246px width (.container-default) so the title and its line under it each fit on one line on a desktop, and wrap into even lines on smaller screens.
   Behind it sit the same blurred color circles as the home and about pages, kept behind the words. */
.live-page > .container-small-590px.pricing { max-width: 1246px; position: relative; z-index: 0; } .live-page .bg-gradient-blur-wrapper { z-index: -1; } .live-page > .container-small-590px.pricing > * { text-wrap: balance; }