:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#283142;
  --ink:#e6edf3; --dim:#8b97a7; --acc:#ffcb47; --acc2:#ff8a3d;
  --good:#3fb950; --bad:#f85149; --chip:#222b38;
  --radius:14px; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:10;background:rgba(14,17,22,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{max-width:1340px;margin:0 auto;display:flex;align-items:center;gap:16px;
  padding:12px 16px}
.logo{font-weight:800;font-size:18px;letter-spacing:.3px}
.logo .em{filter:saturate(1.3)}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{padding:6px 11px;border-radius:999px;color:var(--dim);font-weight:600;font-size:14px}
nav a.active{background:var(--chip);color:var(--ink)}
.spacer{flex:1}
.wallet{font:600 13px/1 var(--mono);color:var(--acc);white-space:nowrap;
  display:inline-block;transform-origin:right center}
/* Pulse the wallet on a trade so the new balance registers at a glance. */
.wallet.bump{animation:walletbump .45s ease-out}
@keyframes walletbump{0%{transform:scale(1)}28%{transform:scale(1.16)}100%{transform:scale(1)}}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);padding:7px 13px;border-radius:10px;font-weight:600;font-size:14px}
.btn.acc{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a1205;border:0}
/* Secondary trade button: dark w/ orange text+border, fills solid on hover.
   Quieter than 20 solid-orange buttons stacked down the grid. */
.btn.trade{background:rgba(255,138,61,.1);border:1px solid var(--acc2);color:var(--acc);text-align:center;
  transition:background .15s,color .15s,border-color .15s}
.btn.trade:hover{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a1205;border-color:transparent}
.btn.buy{background:#10331a;border:1px solid #1d5a2e;color:var(--good)}
.btn.buy:hover{background:#164022}
.btn.sell{background:#3a1414;border:1px solid #6e2222;color:var(--bad)}
.btn.sell:hover{background:#4a1a1a}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* profile button: never let a long handle blow out the header width (any viewport) */
#authslot{min-width:0;display:flex}
#authslot .btn{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* sort bar under "Today's coop" */
.sortbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.sortbar button{cursor:pointer;background:var(--panel2);border:1px solid var(--line);
  color:var(--dim);padding:6px 12px;border-radius:999px;font:600 13px/1 system-ui;white-space:nowrap}
.sortbar button:hover{color:var(--ink)}
.sortbar button.on{background:var(--chip);color:var(--acc);border-color:#3a465a}
main{max-width:1340px;margin:0 auto;padding:18px 16px 80px}
/* non-market views (detail, tables, forms) read better capped narrower than the
   full wide market container — keep their content centered at a sane width. */
.page{max-width:920px;margin:0 auto}
.page.wide{max-width:1160px}
/* contender detail: chart+post (left) and a sticky trade ticket (right) on desktop */
.dwrap{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.dwrap .leftcol{min-width:0;display:flex;flex-direction:column;gap:16px}
@media(min-width:900px){
  .dwrap{grid-template-columns:minmax(0,1fr) 372px}
  .dwrap .ticketcol{position:sticky;top:74px}
}
.hdr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 16px}
h1{font-size:22px;margin:0}
.muted{color:var(--dim);font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--chip);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--dim)}
/* market card grid: 1 col mobile, 2 cols once the cards have room, 3 cols on
   wide desktop where the widened market-main area is roomy enough that a third
   column still leaves each card wide enough to stop its internal rows
   (handle+price, likes/age/velocity, trade button) from wrapping/staggering. */
/* minmax(0,…) on the phone single-column so a card can NEVER force the track
   wider than the viewport (without it, 1fr=minmax(auto,1fr) lets a wide child
   bleed the card — and its trade buttons — off the right edge). */
.grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.grid{grid-template-columns:1fr 1fr 1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;transition:border-color .15s,transform .1s;cursor:pointer}
/* Instant trade feedback: a brief green (buy) / red (sell) wash, painted by a
   pointer-transparent overlay so it never disturbs the card's own background,
   owned tint, or click target. Fades out over ~0.7s; the reconciling poll lands
   meanwhile. */
.card.flash-buy::after,.card.flash-sell::after{content:"";position:absolute;inset:0;
  border-radius:var(--radius);pointer-events:none}
.card.flash-buy::after{animation:flashbuy .7s ease-out}
.card.flash-sell::after{animation:flashsell .7s ease-out}
@keyframes flashbuy{0%{background:rgba(63,185,80,.26)}100%{background:transparent}}
@keyframes flashsell{0%{background:rgba(248,81,73,.26)}100%{background:transparent}}
.card:hover{border-color:var(--acc2)}
.card:active{transform:scale(.995)}
/* cards you hold shares in: a gold left-edge accent + faint tint so your own
   positions stand out where they're sorted to the top of the grid. */
.card.owned{background:linear-gradient(180deg,rgba(255,203,71,.07),transparent 55%),var(--panel);
  box-shadow:inset 3px 0 0 var(--acc)}
/* "you hold" strip on an owned card: qty + avg cost (left) and live unrealized
   P/L (right). data-f="holding" lets the live poll re-mark the P/L in place. */
.holding{display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,203,71,.08);border:1px solid #3a465a;border-radius:8px;
  padding:6px 10px;flex:0 0 auto}
.holding .hq{font:700 11.5px/1.3 var(--mono);color:var(--acc);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holding .hpl{font:800 13px/1 var(--mono);white-space:nowrap}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.whoid{min-width:0}
.av{width:34px;height:34px;border-radius:50%;background:var(--panel2);object-fit:cover;flex:0 0 auto}
.handle{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* min-height keeps the row height identical when the name line is empty
   (bad-handle cards), so every card's header is the same height → uniform grid. */
.name{color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:16px}
/* Post text in a bounded quote box, separated from the trading data. Bright ink
   + 3-line clamp with a real ellipsis. Long unbroken handles/urls wrap. Integer
   20px line boxes make 3 lines an exact 60px multiple → clean clamp boundary. */
/* FIXED height (3 lines × 20px + 9px×2 padding + 1px×2 border = 80px) so every
   market card reserves the same quote space regardless of post length — short,
   long, or empty all occupy 80px and the rows below stay aligned across the grid. */
.quote{background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid #3a465a;border-radius:8px;padding:9px 11px;height:80px;flex:0 0 auto;
  color:#eef2f7;font-size:13.5px;line-height:20px;overflow:hidden;overflow-wrap:anywhere}
/* inner clamp: -webkit-line-clamp governs truncation to exactly 3 lines with no
   explicit height of its own (an explicit height fights the clamp and leaks a 4th
   line); the fixed-height .quote box around it gives every card the same footprint. */
.quote .clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
/* the detail/embed copy is the full post — let it grow, no clamp. */
.quote.full{display:block;height:auto;overflow:visible}
/* labeled stat group: current likes elevated + velocity beneath it */
.stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.stat .likes{font:800 19px/1.1 var(--mono);color:var(--ink)}
.stat .agev{font:800 17px/1.1 var(--mono);color:var(--acc2);display:inline-flex;align-items:center;gap:4px}
.stat .lbl{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.vel{font:700 12px/1 var(--mono);color:var(--acc2)}
.vel.flat{color:var(--dim)}
/* PRICE block: the share price in cents is the card's primary number (replaces
   the old payout/odds), with a 24h change tag beneath it. */
.price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.price .p{font:800 23px/1 var(--mono);color:var(--ink)}
.price .lbl{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.chg{font:700 12px/1.2 var(--mono);white-space:nowrap;display:inline-flex;align-items:center;gap:3px;margin-top:3px}
/* brighter than the fill green/red so the small 24h-change text stays legible */
.chg.up{color:#56d364} .chg.dn{color:#ff7b72} .chg.flat{color:var(--dim)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row.stats{align-items:flex-end;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}
.likes{font:700 14px/1 var(--mono)}
svg.spark{display:block;width:100%;height:44px}
/* ── trade row (its OWN row at the card foot) + fast-trade controls ──────── */
.traderow{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:10px;
  border-top:1px solid var(--line)}
.qrow{display:flex;align-items:center;gap:8px;min-width:0}
.qrow .qlbl{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
/* quick-amount selector (1 / 10 / 100) — sets N for one-click buy/sell */
.qsel{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qsel button{cursor:pointer;background:var(--panel2);border:0;border-left:1px solid var(--line);
  color:var(--dim);padding:5px 10px;font:700 12px/1 var(--mono)}
.qsel button:first-child{border-left:0}
.qsel button.on{background:var(--chip);color:var(--acc)}
.qrow .tradelink{margin-left:auto;color:var(--acc);font:600 13px/1 system-ui;
  padding:5px 9px;border:1px solid var(--line);border-radius:8px;white-space:nowrap}
.qrow .tradelink:hover{border-color:var(--acc2)}
.bsrow{display:flex;gap:8px}
/* min-width:0 lets the equal-width buttons shrink to share the card width
   instead of holding their content width and pushing the row past the edge. */
.bsrow .btn{flex:1;min-width:0;padding:9px;text-align:center;white-space:nowrap}
/* secondary "Buy Max / Sell Max" row under the quick buy/sell — same colours,
   a touch smaller so the 1/10/100 fast-trade stays the primary action. */
.bsrow.maxrow{margin-top:-2px}
.bsrow.maxrow .btn{padding:6px;font-size:12.5px;font-weight:700}
/* "Max" button inside the detail ticket's quick row */
.qrow .maxbtn{margin-left:auto;padding:6px 13px;font-size:12.5px;white-space:nowrap}
/* one-click trade feedback toast (bottom-center) */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;
  padding:11px 16px;font:600 14px/1.3 system-ui;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.ok{border-color:#1d5a2e} #toast.bad{border-color:#6e2222}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);font-size:14px}
th{color:#a9b4c2;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
td.num,th.num{text-align:right;font-family:var(--mono)}
.pos{color:#56d364} .neg{color:#ff7b72}
/* trade ticket */
.slip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:12px;max-width:440px}
.slip input{width:100%;background:var(--bg);border:1px solid #3a465a;color:var(--ink);
  border-radius:10px;padding:11px;font:600 16px/1 var(--mono)}
.slip input:focus{outline:none;border-color:var(--acc2)}
.tabs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tabs button{flex:1;padding:10px;background:var(--panel2);color:var(--ink);border:0;
  font:700 14px/1 system-ui;cursor:pointer;transition:background .12s,color .12s}
.tabs button:not(.on){color:var(--dim)}
.tabs button.on.b{background:#15522a;color:#6fe08a}
.tabs button.on.s{background:#5a1d1d;color:#ff8a82}
.kv{display:flex;justify-content:space-between;font-size:14px;gap:10px}
.kv b{font-family:var(--mono)}
.kv.big{font-size:15px;align-items:baseline;margin-top:2px;padding-top:8px;border-top:1px solid var(--line)}
.kv.big b{font-size:24px;color:var(--acc)}
/* position summary card inside the ticket */
.posn{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px}
.posn .ph{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--dim);font-weight:700}
.err{color:var(--bad);font-size:13px;min-height:1em}
.ok{color:var(--good);font-size:13px;min-height:1em}
/* portfolio summary header tiles */
/* 6 P&L tiles in a clean 3×2 grid on desktop (2-col tablet, 1-col mobile) —
   wide enough that the net-worth number never wraps. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 22px}
@media(min-width:680px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.tile .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:5px}
.tile .v{font:800 22px/1.1 var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.hero{border-color:#3a465a;background:linear-gradient(160deg,#1b222c,var(--panel))}
.tile.hero .v{font-size:26px;color:var(--acc)}
.foot{color:var(--dim);font-size:12px;text-align:center;margin-top:28px;line-height:1.7}
.back{color:var(--ink);font-size:14px;font-weight:600;margin-bottom:12px;display:inline-block;
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel2)}
.back:hover{border-color:var(--acc2)}
.empty{color:var(--dim);padding:40px 0;text-align:center}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700}
.b-open{background:#10331a;color:var(--good)} .b-won{background:#10331a;color:var(--good)}
.b-lost{background:#3a1414;color:var(--bad)} .b-void{background:#2a2330;color:#c09bd8}
.b-settled{background:#10331a;color:var(--good)} .b-locked{background:#2a2618;color:var(--acc)}
.b-admin{background:#3a1414;color:var(--bad)}
.b-buy{background:#10331a;color:var(--good)} .b-sell{background:#3a1414;color:var(--bad)}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;max-width:360px}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-h{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
/* market layout: cards (left) + live/rules SIDEBAR (right). Two-track grid so
   the columns can NEVER overlap; market-main has overflow:hidden so a wide card
   can physically never bleed under the sidebar. Mobile: single column. */
.mwrap{display:grid;grid-template-columns:1fr;gap:22px}
.sidebar{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
@media(min-width:900px){
  .mwrap{grid-template-columns:minmax(0,1fr) 304px;align-items:start}
  .mwrap .market-main{order:1;min-width:0;overflow:hidden}
  .mwrap .sidebar{order:2;position:sticky;top:74px;margin-bottom:0}
}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  font-weight:700;font-size:13px;letter-spacing:.3px}
.panel-b{padding:2px 14px 12px}
.panel>summary{cursor:pointer;list-style:none;user-select:none}
.panel>summary::-webkit-details-marker{display:none}
.panel>summary::after{content:"▾";margin-left:auto;color:var(--dim);font-size:11px;transition:transform .15s}
.panel:not([open])>summary::after{transform:rotate(-90deg)}
.panel:not([open])>summary{border-bottom:0}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:0 0 auto;
  animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,185,80,.5)}
  70%{box-shadow:0 0 0 7px rgba(63,185,80,0)}100%{box-shadow:0 0 0 0 rgba(63,185,80,0)}}
.lstat{padding:10px 0;border-bottom:1px solid var(--line);min-width:0}
.lstat:last-child{border-bottom:0}
.lstat .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:3px}
.lstat .v{font:800 17px/1.15 var(--mono);color:var(--ink);display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;min-width:0}
.lstat .v .u{font:600 12px/1 system-ui;color:var(--dim)}
.lstat .v.big{font-size:25px;color:var(--acc)}
.lstat .v .lead-h{color:var(--acc);font-size:15px;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.lstat .sub{color:var(--dim);font-size:12px;margin-top:3px}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rules li{display:flex;gap:9px;font-size:13px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.rules li .ic{flex:0 0 auto;width:18px;text-align:center}
.rules li>span:last-child{min-width:0}
.rules li b{color:var(--acc);font-weight:700}
.rules-foot{color:var(--dim);font-size:11.5px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);line-height:1.5}
.bsky-embed{width:100%;border:0;min-height:240px;background:transparent;color-scheme:light dark}
/* horizontal-scroll wrapper for wide data tables (keeps the page from overflowing) */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* compact live-countdown chip shown in the market header on phones only */
.cd-pill{display:none}
.cd-pill .live-dot{width:7px;height:7px}

/* ── mobile / phone layout pass (≤640px) ────────────────────────────────── */
@media(max-width:640px){
  /* HEADER: logo + wallet + profile share row 1; nav drops to its own
     horizontally-scrollable row 2 instead of stacking/wrapping awkwardly. */
  .bar{flex-wrap:wrap;gap:6px 8px;padding:10px 12px}
  .logo{font-size:16px;white-space:nowrap}
  nav{order:1;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}
  .wallet{font-size:12px}
  /* keep logo + wallet + profile together on row 1; profile truncates to fit */
  #authslot{flex:0 1 auto}
  #authslot .btn{max-width:34vw;padding:7px 10px}
  main{padding:14px 12px 72px}

  /* MARKET: the trading cards come first; the live-stats + rules sidebar moves
     below them (and is compacted) so it no longer buries the cards. */
  .mwrap{gap:16px}
  .mwrap .market-main{order:1}
  .mwrap .sidebar{order:2;gap:12px}
  /* live panel → compact 2-col summary instead of a tall stack */
  .panel.live .panel-b{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;padding:2px 12px 10px}
  .panel.live .lstat{padding:8px 0}
  .lstat .v.big{font-size:21px}
  /* the key countdown stays above the fold as a header chip */
  .cd-pill{display:inline-flex!important}

  /* TABLES: scroll horizontally inside a bordered box rather than clipping
     the right-hand columns off-screen. */
  .tscroll{border:1px solid var(--line);border-radius:10px}
  .tscroll table{min-width:560px}
  .tscroll th,.tscroll td{white-space:nowrap}

  /* TAP TARGETS: roomier quick-amount, sort and buy/sell controls. */
  .qsel button{padding:7px 12px}
  .sortbar button{padding:8px 13px}
  /* QTY row: let "Qty + 1/10/100 + Trade →" wrap cleanly on a tight phone
     instead of shoving the Trade link off the right edge. The link keeps its
     margin-left:auto, so when it wraps it drops to its own right-aligned line. */
  .qrow{flex-wrap:wrap;row-gap:8px}
  .bsrow .btn{padding:11px}
  .bsrow.maxrow .btn{padding:9px}
  .qrow .maxbtn{padding:8px 13px}
  .hdr{gap:8px 10px}
}