:root{--bg:#0a0e17;--sf:#111827;--bd:#1f2937;--tx:#e5e7eb;--mt:#9ca3af;--ac:#3b82f6;--gn:#10b981;--rd:#ef4444;--yl:#f59e0b;--or:#f97316}
:root.light{--bg:#ffffff;--sf:#f8fafc;--bd:#e2e8f0;--tx:#1e293b;--mt:#64748b;--ac:#2563eb;--gn:#059669;--rd:#dc2626;--yl:#d97706;--or:#ea580c}
*{margin:0;padding:0;box-sizing:border-box}
/* Lock the viewport so the page itself never scrolls. Individual
   panels (.left-panel / .right-panel / .portfolio-page) are the
   scroll containers, which is what lets the place-order tab move
   independently from the market list. */
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--tx);font-size:13px}
a{color:var(--ac);text-decoration:none}
::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}

/* Layout */
/* appContainer is a flex column inside the locked viewport — header
   and impersonation banner take their natural height, and the
   currently-shown page (mainView / portfolioPage / livePage) gets
   the remaining space with min-height:0 so its own children can
   scroll instead of pushing the whole page. */
#appContainer{display:flex;flex-direction:column;height:100vh}
#stickyTop{flex:0 0 auto;z-index:50}
#impersonationBanner{flex:0 0 auto}
.main,.portfolio-page{flex:1 1 auto;min-height:0}
header{background:var(--sf);border-bottom:1px solid var(--bd);padding:8px 16px;display:flex;align-items:center;gap:16px}
header h1{font-size:16px;font-weight:700;white-space:nowrap;cursor:pointer} header h1 span{color:var(--ac)}
#searchBox{flex:1;max-width:280px;min-width:180px;position:relative}
#searchBox input{width:100%;padding:7px 12px 7px 32px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-size:13px;outline:none}
#searchBox input:focus{border-color:var(--ac)}
#searchBox .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mt);font-size:14px;pointer-events:none}
.hdr-r{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:12px}

/* Privacy mode — hides dollar amounts (cash, portfolio, P&L) so the
   user can screen-share or have someone looking over their shoulder
   without leaking account size. Toggled via the 👁 button in the
   header; persists in localStorage as `kHidePriv` so it survives
   reloads and applies on first paint via a tiny inline script in
   index.html (avoids a flash of unblurred numbers).
   Hover briefly reveals so the user can spot-check without toggling. */
.priv-num{transition:filter .15s ease, color .15s ease}
html.priv-on .priv-num,
body.priv-on .priv-num{
  filter:blur(7px);
  user-select:none;
  cursor:help;
}
html.priv-on .priv-num:hover,
body.priv-on .priv-num:hover{filter:blur(0)}
/* The eye-toggle button itself: ghost button styling that mirrors the
   other header utility buttons. Active state slightly emphasised so
   the user can see at a glance whether privacy is on. */
.btn-priv{padding:5px 9px;font-size:14px;line-height:1}
.btn-priv.on{background:rgba(168,85,247,.18);border-color:var(--ac);color:var(--ac)}

.ws-status-wrap{position:relative;display:inline-flex;align-items:center}
.ws-status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;cursor:help;box-shadow:0 0 6px rgba(255,255,255,.15)}
.ws-status-tip{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:8px 11px;width:260px;font-size:11px;line-height:1.45;text-align:left;box-shadow:0 12px 32px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;z-index:300;white-space:normal}
.ws-status-tip strong{color:var(--tx);font-weight:700}
.ws-status-tip::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--sf);border-left:1px solid var(--bd);border-top:1px solid var(--bd)}
.ws-status-wrap:hover .ws-status-tip,.ws-status-wrap:focus-within .ws-status-tip{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.portfolio-link{border:0;background:transparent;color:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 6px;cursor:pointer;line-height:1.1;font-family:inherit}
.portfolio-link:hover #bal{filter:brightness(1.15)}
.hdr-cash{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 6px;line-height:1.1}
.hdr-cash #cashAmt,#bal{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.hdr-cash #cashAmt{color:var(--tx)}
#bal{color:var(--gn)}
.hdr-cash-lbl,.portfolio-label{font-size:11px;font-weight:600;letter-spacing:.2px;text-transform:none}
.hdr-cash-lbl{color:var(--mt)}
.portfolio-label{color:var(--gn);opacity:.85}
/* Header account cluster: a small column for the username pill and
   📈 Performance button, with the 🛡 Admin pill (when visible) sitting
   to the right and vertically centred. When Admin is .hidden the row
   collapses to just the column, exactly like the old layout. */
.hdr-account{display:flex;flex-direction:row;align-items:center;gap:8px}
.hdr-account-stack{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0}
/* Pills in this stack stretch to match the Performance button's width
 * (align-items:stretch). Center their text so a short username like
 * "theresnoedge" doesn't sit flush-left in a wider pill. */
.hdr-account-stack .pill{text-align:center}

/* Terminal/hacker-styled Admin pill. Mono font, neon green, subtle
   inner gradient, scan-line overlay, and a blinking cursor. Sits in a
   thin pill that visually reads as "this is operator-only". */
.hdr-admin-btn{
  display:inline-flex;align-items:center;gap:1px;
  padding:6px 10px;
  background:#06120a;
  border:1px solid #16a34a;
  border-radius:4px;
  color:#4ade80;
  font-family:'JetBrains Mono','SF Mono','Fira Code',Monaco,Consolas,monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-shadow:0 0 6px rgba(74,222,128,.55);
  box-shadow:inset 0 0 12px rgba(34,197,94,.18),0 0 6px rgba(34,197,94,.18);
  cursor:pointer;
  transition:all .12s ease;
  position:relative;
  overflow:hidden;
  line-height:1;
}
.hdr-admin-btn:hover{
  background:#0a1f0f;
  border-color:#22c55e;
  box-shadow:inset 0 0 14px rgba(34,197,94,.28),0 0 14px rgba(34,197,94,.55);
  transform:translateY(-1px);
}
.hdr-admin-btn:active{transform:translateY(0)}
/* Faint horizontal scan-line band that shimmers across — pure flair. */
.hdr-admin-btn::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;
  background:repeating-linear-gradient(
    180deg,
    rgba(74,222,128,.07) 0,
    rgba(74,222,128,.07) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events:none;
}
.hdr-admin-bracket{color:#22c55e;opacity:.85}
.hdr-admin-label{color:#86efac}
.hdr-admin-label::after{
  content:'_';
  margin-left:2px;
  color:#4ade80;
  animation:hdrAdminBlink 1.1s steps(2) infinite;
}
@keyframes hdrAdminBlink{50%{opacity:0}}
.hdr-r .pill{padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600}
.hdr-home-btn{padding:4px 9px;font-size:11px;color:var(--tx)}
/* Two independent stacked buttons: "Home" (navigates in same tab) and
   "New Tab" (opens home in a new tab). Each is a fully self-contained
   pill with all four borders so hovering one only lights up that box.
   A 2px gap between them visually separates the two click targets. */
.hdr-home-stack{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.hdr-home-stack .hdr-home-btn{border-radius:6px;margin:0}
.hdr-home-newtab{background:transparent;border:1px solid var(--bd);border-radius:6px;color:var(--mt);font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;cursor:pointer;text-align:center;line-height:1;transition:background .12s,color .12s,border-color .12s,transform .08s}
.hdr-home-newtab:hover{color:var(--tx);background:rgba(255,255,255,.06);border-color:var(--mt)}
.hdr-home-newtab:active{transform:translateY(1px)}
.hdr-perf-btn{padding:2px 6px;font-size:9px;white-space:nowrap;font-weight:700;border-radius:5px}

/* "View on Kalshi" pill that appears on each event header. Dark
   surface, subtle border, the Kalshi "K" mark on the left, bold
   green label, faint ↗ external-link glyph on the right. Hover
   lifts and tints the border green. */
.kalshi-link-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  margin-left:8px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:8px;
  color:var(--gn);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  vertical-align:middle;
  line-height:1;
  transition:transform .1s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.kalshi-link-pill:hover{
  background:rgba(16,185,129,.08);
  border-color:var(--gn);
  transform:translateY(-1px);
  box-shadow:0 2px 10px rgba(16,185,129,.18);
}
.kalshi-link-pill .klp-label{white-space:nowrap}
.kalshi-link-pill .klp-ext{
  font-size:10px;
  color:var(--gn);
  opacity:.55;
  margin-left:-2px;
}
.kalshi-link-pill:hover .klp-ext{opacity:.95}

/* "← Main game" pill rendered on sub-event pages (totals, spreads,
   props, halves). Mirrors `.kalshi-link-pill` visually but in the
   blue accent so it doesn't compete with the green Kalshi link. */
.main-game-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  margin-left:8px;
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:8px;
  color:var(--ac);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  vertical-align:middle;
  line-height:1;
  cursor:pointer;
  transition:transform .1s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.main-game-pill:hover{
  background:rgba(59,130,246,.10);
  border-color:var(--ac);
  transform:translateY(-1px);
  box-shadow:0 2px 10px rgba(59,130,246,.18);
}
.main-game-pill .mgp-arrow{font-size:12px;opacity:.7;line-height:1}
.main-game-pill:hover .mgp-arrow{opacity:1}
.main-game-pill .mgp-label{white-space:nowrap}

/* "My Volume" mini stat card in the event header.
   Horizontal two-column layout (Game · Today) with a subtle vertical
   divider and a small chart glyph. Surface-tinted gradient + ring so
   it reads as a single unit beside the live-score block, and a hover
   lift gives it a touch of interactivity. */
.my-vol-card{
  display:inline-flex;flex-direction:column;align-items:stretch;gap:4px;
  padding:5px 12px 6px;
  border:1px solid var(--bd);border-radius:10px;
  background:linear-gradient(180deg,rgba(59,130,246,.05),rgba(59,130,246,0));
  box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.02);
  line-height:1;cursor:default;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;
}
.my-vol-card:hover{
  transform:translateY(-1px);border-color:rgba(96,165,250,.35);
  background:linear-gradient(180deg,rgba(59,130,246,.10),rgba(59,130,246,.02));
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(96,165,250,.18) inset;
}
/* Card title across the top. Subtle small-caps so it reads as a label
   for the stats row below, not as competing content. */
.my-vol-header{
  font-size:10px;font-weight:700;letter-spacing:.8px;color:var(--mt);
  text-transform:uppercase;text-align:center;line-height:1;
}
.my-vol-row{display:flex;align-items:center;gap:12px}
.my-vol-col{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:62px}
.my-vol-key{
  font-size:9px;font-weight:700;letter-spacing:.7px;color:var(--mt);
  text-transform:uppercase;line-height:1;
}
.my-vol-val{
  font-size:13px;font-weight:800;color:var(--tx);
  font-variant-numeric:tabular-nums;line-height:1;
}
.my-vol-sep{
  width:1px;align-self:stretch;margin:2px 0;
  background:linear-gradient(180deg,transparent,var(--bd),transparent);
}

.badge{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600;display:inline-block;text-transform:uppercase}
.bg-gn{background:rgba(16,185,129,.15);color:var(--gn)} .bg-rd{background:rgba(239,68,68,.15);color:var(--rd)} .bg-yl{background:rgba(245,158,11,.15);color:var(--yl)} .bg-ac{background:rgba(59,130,246,.15);color:var(--ac)} .bg-mt{background:rgba(156,163,175,.18);color:var(--mt)}

/* Search dropdown */
.sdrop{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--sf);border:1px solid var(--bd);border-radius:10px;max-height:70vh;overflow-y:auto;z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.6)}
.sdrop .si{padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;transition:background .08s}
.sdrop .si:hover,.sdrop .si.hl{background:var(--bg)}
.sdrop .si:last-child{border-bottom:none}
.sdrop .si .left{flex:1}
.sdrop .si .tm{font-weight:600;margin-bottom:1px}
.sdrop .si .meta{font-size:11px;color:var(--mt)}
.sdrop .si .prices{text-align:right;font-size:12px}
.hidden{display:none!important}

/* Main grid */
/* Height comes from the flex parent (#appContainer); overflow:hidden
   keeps the grid from growing past the viewport so the panels become
   the actual scroll containers. min-height:0 is required for nested
   flex/grid children to be allowed to shrink. */
.main{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;min-height:0}
@media(max-width:900px){.main{grid-template-columns:1fr}}

/* Left panel — its own scroll container so the games list / market
   view scrolls independently from the place-order panel on the right. */
.left-panel{border-right:1px solid var(--bd);overflow-y:auto;padding:0;height:100%;min-height:0}

/* Welcome / search state */
.gl-league{padding:0 0 8px}
.gl-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px 8px;flex-wrap:wrap}
.gl-title{font-size:18px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:10px}
.gl-date{font-size:12px;font-weight:400;color:var(--mt)}
.gl-league-header{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:13px;font-weight:700;color:var(--ac);border-bottom:1px solid var(--bd);background:var(--sf);position:sticky;top:0;z-index:2;cursor:pointer}
.gl-league-header:hover{background:rgba(255,255,255,.04)}
.gl-league-header .gl-count{font-size:11px;color:var(--mt);font-weight:400}
.gl-game{display:grid;grid-template-columns:1fr auto auto;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;transition:background .08s;gap:8px}
.gl-game:hover{background:rgba(255,255,255,.06)}
.gl-game.gl-live{background:rgba(239,68,68,.06)}
.gl-game.gl-live:hover{background:rgba(239,68,68,.12)}
.gl-teams{display:flex;flex-direction:column;gap:2px;min-width:0}
.gl-team{font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-state{font-size:11px;color:var(--mt);text-align:right;white-space:nowrap}
.gl-state.live{color:var(--gn);font-weight:600}
.gl-vol{font-size:11px;color:var(--mt);text-align:right;min-width:50px}

/* Market view */
.market-header{padding:16px;border-bottom:1px solid var(--bd)}
.market-header .title{font-size:20px;font-weight:700;margin-bottom:4px}
.market-header .subtitle{color:var(--mt);font-size:12px}
.market-header .countdown{color:var(--yl);font-weight:600;margin-left:8px}

/* Outcome row — the core trading strip */
.outcomes{padding:0}
/* Volume now sits inline next to the history button in `.name`, so the
   trailing 70px Vol column was removed from the grid (matches the
   slider-prop / spread / total rows below). */
.outcome{display:grid;grid-template-columns:1fr 70px 140px 140px;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .08s}
.outcome:hover{background:rgba(255,255,255,.02)}
.outcome .name{font-weight:600;font-size:14px}
/* Probability percentage stays neutral (white) regardless of value
   — coloring it red/green made low-vs-high probability look like
   up/down PnL, which it isn't. */
.outcome .mid{font-size:18px;font-weight:700;text-align:center;color:var(--tx)}
.outcome .bbo{text-align:center}
.outcome .bbo-btn{padding:8px 12px;border:1px solid var(--bd);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:all .12s;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.outcome .bbo-btn:hover{filter:brightness(1.15)}
.outcome .bbo-btn.yes{border-color:rgba(16,185,129,.3);color:var(--gn)} .outcome .bbo-btn.yes:hover{background:rgba(16,185,129,.1)}
.outcome .bbo-btn.no{border-color:rgba(239,68,68,.3);color:var(--rd)} .outcome .bbo-btn.no:hover{background:rgba(239,68,68,.1)}
.outcome .bbo-btn .bbo-lbl{font-weight:400;opacity:.7}
/* Inline "vol N" badge that lives next to the history button inside
   `.outcome .name` (keeps moneyline rows visually consistent with
   spread/total slider rows). */
.outcome .name .vol-inline{color:var(--mt);font-size:10px;font-weight:400;margin-left:6px}
.outcome .quick{display:flex;gap:4px;justify-content:flex-end}

.out-head{display:grid;grid-template-columns:1fr 70px 140px 140px;padding:6px 16px;font-size:11px;color:var(--mt);border-bottom:1px solid var(--bd);text-transform:uppercase;letter-spacing:.5px;background:var(--sf);position:sticky;top:0}
.out-head span:nth-child(2){text-align:center}
.out-head span:nth-child(3),.out-head span:nth-child(4){text-align:center}

/* Sub panels (the only remaining one is the hidden #tab-orderbook) */
.subpanel{padding:12px 16px}

/* Orderbook compact */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.ob-half{scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.ob-half::-webkit-scrollbar{width:4px}.ob-half::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.ob-row{display:flex;align-items:center;font-size:12px;height:22px;position:relative;padding:0 6px;border-radius:2px;cursor:pointer}
.ob-row:hover{background:rgba(255,255,255,.04)}
.ob-row .p{width:36px;font-weight:600;text-align:right;z-index:1} .ob-row .odds{width:42px;font-size:10px;opacity:.5;text-align:left;padding-left:3px;z-index:1} .ob-row .q{width:55px;text-align:right;z-index:1;color:var(--mt)} .ob-row .my{flex:1;text-align:center;z-index:1} .ob-row .cum{width:50px;text-align:right;z-index:1;color:var(--mt);font-size:10px}
.ob-row .bar{position:absolute;right:0;top:0;bottom:0;border-radius:2px;opacity:.1}
/* Color by contract-direction of each level, so the same liquidity
   gets the same color whether you're looking at the YES or NO book:
     YES bid  (= NO ask)  → GREEN  (someone buying YES / selling NO)
     YES ask  (= NO bid)  → RED    (someone buying NO  / selling YES)
   YES book lays this out naturally with .bid=green, .ask=red. The NO
   book is the mirror — its asks ARE YES bids (green) and its bids ARE
   YES asks (red) — so we invert the .ask/.bid colors on .ob-side-no. */
.ob-row.bid .bar{background:var(--gn)} .ob-row.ask .bar{background:var(--rd)}
.ob-row.bid .p{color:var(--gn)} .ob-row.ask .p{color:var(--rd)}
.ob-side-no .ob-row.ask .bar{background:var(--gn)}
.ob-side-no .ob-row.ask .p{color:var(--gn)}
.ob-side-no .ob-row.bid .bar{background:var(--rd)}
.ob-side-no .ob-row.bid .p{color:var(--rd)}
/* "You are here" cue — the orderbook row whose price matches the order
 * form's price input. Quiet, static accent — left edge bar + faint tint.
 * No animation, since the orderbook re-renders constantly on WS depth
 * updates and any animation would re-trigger on every patch. */
.ob-row.ob-row-current{position:relative;background:rgba(96,165,250,.07);box-shadow:inset 2px 0 0 var(--ac)}
.ob-row.ob-row-current .p{color:var(--ac)}
/* When the row also has a resting order on it (the yellow .my-badge),
 * JS sets a yellow border-left + yellow background inline. Inline styles
 * win, so our left-edge blue stripe + tint get hidden and the cues clash
 * at the left edge. Switch the current-price cue to a thin full-row
 * outline + a faint blue glow that reads as "active level" without
 * fighting the yellow my-order stripe. Also keep the price text in its
 * natural bid/ask color so the two cues stay visually independent. */
.ob-row.ob-row-current:has(.my-badge){box-shadow:inset 0 0 0 1px var(--ac), 0 0 0 1px rgba(96,165,250,.18);background:transparent}
.ob-row.ob-row-current:has(.my-badge).bid .p{color:var(--gn)}
.ob-row.ob-row-current:has(.my-badge).ask .p{color:var(--rd)}
.ob-side-no .ob-row.ob-row-current:has(.my-badge).ask .p{color:var(--gn)}
.ob-side-no .ob-row.ob-row-current:has(.my-badge).bid .p{color:var(--rd)}
.my-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:700;line-height:1.4}
.my-cancel{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;font-size:14px;font-weight:600;color:var(--mt);cursor:pointer;transition:background .12s,color .12s;font-family:Arial,sans-serif;padding:0;line-height:0}
.my-cancel:hover{background:rgba(239,68,68,.25);color:var(--rd)}
/* Multi-pin: every pinned market's inline orderbook lives in a slot
   wrapped in `.inline-ob`. The slot bound to the order form gets
   `.ob-active`, which adds a blue ring so the user can never confuse
   "the book I'm looking at" with "the book my next order will land
   in". `position:relative` is required so the absolutely-positioned
   close button (.ob-close) lands inside this slot, not on the page
   root. We use `outline` for the ring so the layout doesn't shift
   when activation moves between books. */
.inline-ob{position:relative;transition:outline-color .12s ease, box-shadow .12s ease}
.inline-ob.ob-active{
  outline:2px solid var(--ac);
  outline-offset:-1px;
  box-shadow:0 0 0 1px rgba(96,165,250,.18), 0 0 16px -2px rgba(96,165,250,.35);
  border-radius:4px;
}
/* Per-book close (×). Sits flush in the top-right of each inline OB,
   small enough not to compete with the book content but easy enough to
   land a click on. Hover ramps to red for the "this destroys the
   pinned book" affordance — same intent as the × on a chrome tab. */
.ob-close{
  position:absolute;top:4px;right:6px;z-index:5;
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:4px;
  color:var(--mt);font-size:16px;font-weight:600;line-height:1;
  cursor:pointer;padding:0;
  transition:background .1s ease, color .1s ease;
  font-family:Arial,sans-serif;
}
.ob-close:hover{background:rgba(239,68,68,.18);color:var(--rd)}

/* The spread bar uses flex centering rather than text-align:center so we
   can perfectly align the "Trade Yes · Last 49¢" text with the column
   data above and below it. `.ob-half` reserves a 4px scrollbar gutter
   on the right (see `--ob-sb-width` below), so the spread bar mirrors
   that gutter via `padding-right` — without it, the centered text sits
   ~2px right of the halves' content center and reads as off-center. */
.ob-spread{
  display:flex;
  align-items:center;
  /* Match .ob-row's `padding:0 6px` so the inner column cells line up
     edge-to-edge with the data rows, then add the scrollbar gutter on
     the right so the centered text doesn't drift when the books
     scroll. */
  padding:1px 6px;
  padding-right:calc(6px + var(--ob-sb-width,4px));
  font-size:10px;color:var(--mt);
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
  margin:0;
  line-height:1.15;
}
/* The left pad now also absorbs the .q (Qty) column so the centered
   text-cell sits over just the .my (Mine) column — that lands "Trade
   Yes · Last 49¢" directly under the Mine header (and visually
   between Qty and Depth) instead of centered across Qty+Mine. */
.ob-spread-padL{width:133px;flex-shrink:0}    /* .p (36) + .odds (42) + .q (55) */
.ob-spread-text{flex:1;text-align:center;min-width:0}
.ob-spread-padR{width:50px;flex-shrink:0}     /* .cum (50) */
/* Side-tinted spread bar. The hue tells the user "you're trading
   YES" (green) or "you're trading NO" (red) at a glance, without
   drowning out the white "Last 49¢" text. Alphas were dialed back
   from .12/.06 → .055/.025 (mid/edges) and the borders from .25 →
   .14 to keep the band readable as a separator strip rather than a
   full-bleed colored slab. */
.ob-spread-no{background:linear-gradient(180deg,rgba(239,68,68,.025),rgba(239,68,68,.055),rgba(239,68,68,.025));border-top-color:rgba(239,68,68,.14);border-bottom-color:rgba(239,68,68,.14)}
.ob-spread-yes{background:linear-gradient(180deg,rgba(34,197,94,.025),rgba(34,197,94,.055),rgba(34,197,94,.025));border-top-color:rgba(34,197,94,.14);border-bottom-color:rgba(34,197,94,.14)}
/* Reserve scrollbar gutter so the rows' content area is the same width
   as the spread bar's. Without this, the scrollbar steals a few px on
   the right of the rows but not the spread bar, so the centered "Last"
   text drifts visibly off-center from the columns above/below. The
   `--ob-sb-width` variable is the source of truth for "how wide is the
   gutter that .ob-half reserves on the right" — keep this in sync with
   the webkit scrollbar width on line ~330. */
:root{--ob-sb-width:4px}
.ob-half{scrollbar-gutter:stable}
.ov-filter{padding:4px 12px;border-radius:20px;border:1px solid var(--bd);background:transparent;color:var(--mt);font-size:12px;cursor:pointer}
.ov-filter.on{background:var(--gn);color:#000;border-color:var(--gn);font-weight:600}
.ov-row{display:grid;grid-template-columns:1fr 80px 100px 100px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.ov-row:hover{background:rgba(255,255,255,.03)}

/* Right panel — order + portfolio */
/* The place-order / portfolio / fills panel. Its own scroll container,
   so scrolling the market list on the left doesn't move the order
   form (and vice-versa). Height is inherited from the flex parent. */
.right-panel{overflow-y:auto;background:var(--sf);height:100%;min-height:0;padding-bottom:80px}
.rp-section{padding:12px 16px;border-bottom:1px solid var(--bd)}
/* Flash applied to #orderFormSection when the user double-clicks an
   orderbook row. Quick blue-tinted halo so the eye lands on the form
   after the panel scrolls back to the top. */
.order-form-flash{animation:orderFormFlash .7s ease-out}
@keyframes orderFormFlash{
  0%   {box-shadow:inset 0 0 0 2px rgba(59,130,246,.0);background:transparent}
  20%  {box-shadow:inset 0 0 0 2px rgba(59,130,246,.55);background:rgba(59,130,246,.08)}
  100% {box-shadow:inset 0 0 0 2px rgba(59,130,246,0);  background:transparent}
}
@media(max-width:700px){.rp-section{padding:8px 10px}}
.rp-section h3{font-size:11px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-weight:500;display:flex;justify-content:space-between;align-items:center}

/* Portfolio page */
.portfolio-page{height:100%;min-height:0;background:var(--bg);padding:24px 32px 60px;overflow-y:auto}
.portfolio-shell{max-width:1280px;margin:0 auto;background:var(--sf);border:1px solid var(--bd);border-radius:14px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.4)}
.portfolio-page-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--bd);background:linear-gradient(180deg,rgba(59,130,246,.06),transparent)}
.portfolio-page-head h2{margin:0;font-size:20px;letter-spacing:.2px}
.pf-sub{font-size:12px;color:var(--mt);margin-top:2px}
.pf-head-actions{display:flex;gap:8px;align-items:center}
.pf-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:18px 22px;background:var(--bg);border-bottom:1px solid var(--bd)}
@media(max-width:980px){.pf-stats{grid-template-columns:repeat(2,1fr)}}
.pf-card{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pf-card-label{font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.pf-card-value{font-size:20px;font-weight:800;color:var(--tx);line-height:1.1}
.pf-card-value.pos{color:var(--gn)} .pf-card-value.neg{color:var(--rd)}
.pf-card-sub{font-size:11px;color:var(--mt)}
.pf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.pf-tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:4px}
.pf-tab{background:transparent;border:0;color:var(--mt);font-size:12px;font-weight:700;padding:6px 14px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .12s}
.pf-tab:hover{color:var(--tx)}
.pf-tab.on{background:var(--sf);color:var(--tx);box-shadow:0 0 0 1px var(--ac) inset}
.pf-tab-count{background:rgba(255,255,255,.06);color:var(--mt);padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;min-width:14px;text-align:center}
.pf-tab.on .pf-tab-count{background:rgba(59,130,246,.25);color:var(--ac)}
.pf-toolbar-right{display:flex;gap:8px;align-items:center}
.pf-search{background:var(--bg);border:1px solid var(--bd);color:var(--tx);font-size:12px;padding:6px 10px;border-radius:7px;width:220px;outline:none}
.pf-search:focus{border-color:var(--ac)}
.pf-select{background:var(--bg);border:1px solid var(--bd);color:var(--tx);font-size:12px;padding:6px 8px;border-radius:7px;outline:none}
.portfolio-body{padding:6px 22px 22px}
.pf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.pf-table thead th{position:sticky;top:0;background:var(--sf);text-align:left;color:var(--mt);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:10px 10px;border-bottom:1px solid var(--bd);white-space:nowrap}
.pf-table thead th.num{text-align:right}
.pf-table tbody td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.pf-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.pf-row{cursor:pointer;transition:background .1s}
.pf-row:hover{background:rgba(255,255,255,.03)}
.pf-event-row td{background:rgba(59,130,246,.10);color:var(--tx);font-weight:700;font-size:12px;letter-spacing:.2px;padding:10px 12px;cursor:pointer;text-transform:none}
.pf-event-row td:hover{background:rgba(59,130,246,.16)}
.pf-league-pill{display:inline-block;background:rgba(59,130,246,.18);color:var(--ac);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:6px;margin-right:8px;vertical-align:middle}
.pf-caret{display:inline-block;width:14px;color:var(--mt);font-size:10px;margin-right:4px}
.pf-ev-title{color:var(--tx);font-weight:800}
.pf-ev-meta{color:var(--mt);font-weight:500;font-size:11px;margin-left:6px}
.pf-ev-link{color:var(--ac);font-weight:700;font-size:11px;margin-left:10px;cursor:pointer;text-decoration:none}
.pf-ev-link:hover{color:var(--tx);text-decoration:underline}
.pf-cat-row td{background:rgba(255,255,255,.03);color:var(--mt);font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;padding:6px 12px 6px 28px;border-bottom:1px solid rgba(255,255,255,.04)}
.pf-cat-label{color:var(--mt)}
/* Matchup aside in subsection headers (e.g. "SPREAD (PHI @ NYK)") so
   the user can identify which game a row belongs to without scrolling
   back up to the parent event row. Quieter than the label itself. */
.pf-cat-matchup{color:var(--mt);opacity:.7;font-weight:600;letter-spacing:.4px;margin-left:6px}
.pf-card-value.pos{color:var(--gn)}
.pf-card-value.neg{color:var(--rd)}
.pf-card-sub .pos{color:var(--gn);font-weight:700}
.pf-card-sub .neg{color:var(--rd);font-weight:700}
.pf-cancel-all{color:var(--rd);border-color:rgba(239,68,68,.4)}
.pf-cancel-all:hover{background:rgba(239,68,68,.1);border-color:var(--rd)}
.pf-collapse-btn{font-size:11px;padding:5px 10px}
.pf-cancel-all-big{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;border:1px solid #b91c1c;padding:8px 16px;border-radius:8px;font-weight:800;font-size:12px;letter-spacing:.3px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;box-shadow:0 2px 6px rgba(239,68,68,.35),inset 0 1px 0 rgba(255,255,255,.15);transition:transform .08s,box-shadow .12s}
.pf-cancel-all-big:hover{background:linear-gradient(180deg,#f87171,#ef4444);box-shadow:0 4px 12px rgba(239,68,68,.55),inset 0 1px 0 rgba(255,255,255,.2);transform:translateY(-1px)}
.pf-cancel-all-big:active{transform:translateY(0)}
.pf-cancel-all-big:disabled{opacity:.6;cursor:wait}
.pf-cancel-all-big #pfCancelAllCount{background:rgba(255,255,255,.22);color:#fff;padding:1px 7px;border-radius:99px;font-size:10px;font-weight:900}
.pf-side-yes{color:var(--gn);font-weight:700}
.pf-side-no{color:var(--rd);font-weight:700}
.pf-mkt-link{color:var(--tx);text-decoration:none}
.pf-mkt-link:hover{color:var(--ac)}
.pf-empty{padding:48px 20px;text-align:center;color:var(--mt);font-size:13px}
.pf-empty-icon{font-size:36px;opacity:.4;margin-bottom:10px}
.live-minvol{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;padding:3px 8px;font-size:11px;color:var(--mt)}
.live-minvol-label{font-weight:600;text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.live-minvol input{width:80px;background:transparent;border:0;color:var(--tx);font-size:12px;font-weight:700;outline:none;padding:2px 0;text-align:right;font-variant-numeric:tabular-nums}
.live-minvol input::-webkit-outer-spin-button,.live-minvol input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.live-minvol input[type=number]{-moz-appearance:textfield}
.live-minvol:focus-within{border-color:var(--ac)}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.live-card{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;gap:6px}
.live-card:hover{border-color:var(--ac);background:rgba(59,130,246,.05)}
.live-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.live-card-league{font-size:10px;font-weight:800;color:var(--ac);text-transform:uppercase;letter-spacing:.5px}
.live-card-vol{font-size:10px;color:var(--mt)}
.live-card-title{font-size:13px;font-weight:700;color:var(--tx);line-height:1.25}
.live-card-prices{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.live-card-price{flex:1;min-width:90px;background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:6px;padding:4px 8px;display:flex;justify-content:space-between;font-size:11px}
.live-card-price .name{color:var(--mt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:6px}
.live-card-price .px{font-weight:700;color:var(--tx)}
.live-section{margin-bottom:18px}
.live-section-head{font-size:11px;color:var(--mt);text-transform:uppercase;letter-spacing:.6px;font-weight:800;padding:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.live-section-count{background:rgba(255,255,255,.06);color:var(--mt);padding:2px 8px;border-radius:999px;font-weight:700}
.pf-cancel-btn{background:transparent;border:1px solid rgba(239,68,68,.4);color:var(--rd);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;cursor:pointer;transition:all .1s}
.pf-cancel-btn:hover{background:rgba(239,68,68,.15)}
.pf-cancel-btn:disabled{opacity:.5;cursor:not-allowed}

/* Order form compact */
.side-tabs{display:flex;gap:2px;margin-bottom:8px}
.side-tab{flex:1;padding:7px;border:none;border-radius:6px;font-size:12px;font-weight:700;cursor:pointer;transition:all .1s}
.side-tab.buy{background:var(--bd);color:var(--mt)} .side-tab.buy.on{background:rgba(16,185,129,.2);color:var(--gn)}
.side-tab.sell{background:var(--bd);color:var(--mt)} .side-tab.sell.on{background:rgba(239,68,68,.2);color:var(--rd)}
.f{margin-bottom:6px}
.f label{display:block;font-size:11px;color:var(--mt);margin-bottom:2px}
.f input,.f select{width:100%;padding:7px 8px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-size:13px;outline:none}
.f input:focus{border-color:var(--ac)}
.f-row{display:flex;gap:6px}
.f-row .f{flex:1}
.exp-duration-row{display:flex;align-items:center;gap:4px}
.exp-duration-row input{width:0;flex:1 1 0;text-align:center;padding:7px 4px;font-variant-numeric:tabular-nums}
.exp-duration-row input:focus{z-index:1}
.exp-d-unit{flex:0 0 auto;font-size:11px;color:var(--mt);font-weight:600;padding:0 2px 0 0;letter-spacing:.5px}
input[type="datetime-local"]{font-family:inherit}
.cost-line{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;color:var(--mt)}
.cost-line.total{color:var(--tx);font-weight:600}
.submit-btn{width:100%;padding:9px;border:none;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;transition:all .1s;margin-top:6px}
.submit-btn:hover{filter:brightness(1.1)} .submit-btn:disabled{opacity:.4;cursor:not-allowed}
.submit-btn.buy{background:var(--gn);color:#fff} .submit-btn.sell{background:var(--rd);color:#fff}

/* Toggle compact */
.tog{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--mt);margin-bottom:6px}
.tgl{position:relative;width:30px;height:16px;cursor:pointer;display:inline-block}
.tgl input{display:none}
.tgl .sl{position:absolute;inset:0;background:var(--bd);border-radius:8px;transition:.2s}
.tgl input:checked+.sl{background:var(--gn)}
.tgl .sl:before{content:'';position:absolute;width:12px;height:12px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.2s}
.tgl input:checked+.sl:before{transform:translateX(14px)}
.cfg-toggle-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;cursor:pointer;font-size:12px;line-height:1.35}
.cfg-toggle-row>span:first-child{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.cfg-toggle-title{font-weight:600;color:var(--tx)}
.cfg-toggle-sub{font-size:11px;color:var(--mt);font-weight:400}
.cfg-toggle-row .tgl{flex:0 0 auto;margin-top:2px}

/* Positions */
.pos-sort{display:flex;gap:4px;margin-left:auto}
.pos-sort button{border:1px solid var(--bd);background:transparent;color:var(--mt);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700;cursor:pointer}
.pos-sort button.on{background:rgba(59,130,246,.18);border-color:var(--ac);color:var(--tx)}
.pos-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pos-item:last-child{border-bottom:none}
.pos-section{font-size:10px;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:8px 0 2px;border-bottom:1px solid rgba(255,255,255,.08)}
.pos-section:first-child{padding-top:0}
.pos-item .nm{font-weight:600;font-size:12px} .pos-item .det{font-size:11px;color:var(--mt)}
.pos-item .pnl{font-size:12px;font-weight:600;text-align:right}
.line-token{color:var(--ac);font-weight:800}

/* Orders */
.ord-item{display:flex;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.ord-item:last-child{border-bottom:none}
/* The order text shrinks first; if the panel is narrow it truncates
   with an ellipsis so the expiry pill + cancel button stay on the same
   line. Without min-width:0 the flex item refuses to shrink below its
   intrinsic content width and pushes the pill onto a new row. */
.ord-item .ord-text{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xbtn{background:none;border:1px solid var(--bd);color:var(--mt);border-radius:4px;padding:2px 6px;cursor:pointer;font-size:10px;flex:0 0 auto}
.xbtn:hover{border-color:var(--rd);color:var(--rd)}
/* Expiry badge on rows in OPEN ORDERS — only rendered when the
   order has expiration_time / expiration_ts (GTC orders skip it).
   Hover reveals the full local-time expiry via the native title. */
.ord-expiry{display:inline-flex;align-items:center;gap:2px;font-size:10px;color:var(--yl);padding:1px 6px;border:1px solid rgba(245,158,11,.35);border-radius:8px;background:rgba(245,158,11,.08);cursor:help;white-space:nowrap;vertical-align:middle;flex:0 0 auto}
.ord-expiry:hover{border-color:rgba(245,158,11,.6);color:#fbbf24}

/* Settled markets section */
.settled-section{border-top:1px solid var(--bd);margin-top:4px}
.settled-header{transition:background-color 0.2s}
.settled-header:hover{background:var(--bg)!important}
.settled-section .si{border-left:3px solid var(--mt)}

/* Btn */
.btn{padding:5px 10px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .1s}
.btn:hover{filter:brightness(1.1)} .btn:disabled{opacity:.4}
.btn-gn{background:var(--gn);color:#fff} .btn-rd{background:var(--rd);color:#fff} .btn-ac{background:var(--ac);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--mt)} .btn-ghost:hover{border-color:var(--mt)}

/* Trades list */
.trd{display:flex;justify-content:space-between;font-size:11px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.trd:last-child{border-bottom:none}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:20px;width:400px;max-width:95vw;max-height:90vh;overflow-y:auto}
.modal h2{font-size:16px;margin-bottom:4px}
.modal p{font-size:12px;color:var(--mt);margin-bottom:12px}
.modal textarea{width:100%;padding:8px;background:var(--bg);border:1px solid var(--bd);border-radius:6px;color:var(--tx);font-size:11px;font-family:monospace;resize:vertical;min-height:100px;outline:none}
.market-history-modal{width:min(980px,95vw);padding:18px 22px}

/* ── Feature request button + modal ───────────────────────────────────── */
.feature-req-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;color:var(--tx);background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.35)}
.feature-req-btn:hover{background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.55)}
.feature-req-btn .fr-ico{font-size:14px}
.feature-req-btn .fr-lbl{font-size:12px;font-weight:600}

.feature-req-modal{width:min(620px,95vw);padding:22px}
.feature-req-modal h2{font-size:18px;margin:0 0 4px}
.feature-req-modal textarea{font-family:inherit;font-size:13px;min-height:110px;line-height:1.5}
.fr-type-row{display:flex;gap:10px;margin-bottom:14px}
.fr-type-opt{flex:1;cursor:pointer;display:block}
.fr-type-opt input{position:absolute;opacity:0;width:0;height:0}
.fr-type-pill{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--bd);border-radius:8px;font-size:13px;font-weight:600;color:var(--mt);background:var(--bg);transition:border-color .12s,color .12s,background .12s}
.fr-type-opt input:checked + .fr-type-feature{border-color:rgba(99,102,241,.7);color:#a5b4fc;background:rgba(99,102,241,.08)}
.fr-type-opt input:checked + .fr-type-bug{border-color:rgba(239,68,68,.7);color:#fca5a5;background:rgba(239,68,68,.08)}
.fr-paste-hint{margin-top:10px;padding:14px;border:1px dashed var(--bd);border-radius:8px;text-align:center;font-size:12px;color:var(--mt);background:rgba(0,0,0,.15)}
.fr-paste-hint.dragover{border-color:var(--ac);color:var(--tx);background:rgba(99,102,241,.1)}
.fr-attachments{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}
.fr-attachments:empty{display:none}
.fr-thumb{position:relative;border:1px solid var(--bd);border-radius:6px;overflow:hidden;background:var(--bg);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.fr-thumb img{max-width:100%;max-height:100%;display:block}
.fr-thumb-rm{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:50%;width:22px;height:22px;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.fr-thumb-rm:hover{background:var(--rd)}
.fr-error{margin-top:10px;padding:8px 12px;border-radius:6px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.4);color:#fca5a5;font-size:12px}
.fr-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.fr-history{max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.fr-history-item{padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
.fr-history-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.fr-history-item-desc{font-size:12px;color:var(--tx);white-space:pre-wrap;word-break:break-word;line-height:1.4}
.fr-history-item-meta{font-size:10px;color:var(--mt);margin-top:4px}
.fr-history-item.fr-status-deleted .fr-history-item-desc{text-decoration:line-through;opacity:.6}
.fr-status-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.fr-status-pending{background:rgba(245,158,11,.18);color:#fbbf24;border:1px solid rgba(245,158,11,.4)}
.fr-status-implemented{background:rgba(16,185,129,.18);color:#34d399;border:1px solid rgba(16,185,129,.4)}
.fr-status-fixed{background:rgba(59,130,246,.18);color:#60a5fa;border:1px solid rgba(59,130,246,.4)}
.fr-status-deleted{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.35)}
.fr-type-tag{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
.fr-type-tag.feature{background:rgba(99,102,241,.18);color:#a5b4fc}
.fr-type-tag.bug{background:rgba(239,68,68,.15);color:#fca5a5}
.mh-head{position:relative;text-align:center;margin-bottom:18px}
.mh-head h2{font-size:14px;margin:0;color:var(--tx)}
.mh-close{position:absolute;left:0;top:-5px;background:none;border:none;color:var(--tx);font-size:24px;line-height:1;cursor:pointer}
.mh-market{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mh-icon{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#38bdf8,#2563eb);flex-shrink:0}
.mh-event{font-size:12px;color:var(--mt);margin-bottom:4px}
.mh-title{font-size:14px;font-weight:800;color:var(--tx)}
.mh-table{width:100%;border-collapse:collapse;font-size:13px}
.mh-table th{color:var(--mt);font-weight:500;text-align:left;padding:10px 12px;border-bottom:1px solid var(--bd);white-space:nowrap}
.mh-table td{padding:12px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.mh-table .num{text-align:right}
.mh-table .yes{color:var(--gn);font-weight:700}
.mh-table .no{color:var(--rd);font-weight:700}
.mh-trigger{margin-left:8px;padding:1px 6px;border:1px solid var(--bd);border-radius:999px;background:rgba(255,255,255,.04);color:var(--mt);font-size:10px;font-weight:800;cursor:pointer;vertical-align:middle}
.mh-trigger:hover{color:var(--tx);border-color:var(--mt)}
.mh-row:hover{background:rgba(255,255,255,.04)}
.mh-caret{display:inline-block;width:10px;color:var(--mt);font-size:10px}
.mh-subrow td{background:rgba(0,0,0,.25);padding:6px 12px;font-size:12px;color:var(--mt);border-bottom:1px solid rgba(255,255,255,.04)}
.mh-subrow .mh-fill-label{padding-left:28px}
.msg{padding:8px;border-radius:6px;font-size:12px;margin-bottom:8px}
.msg-err{background:rgba(239,68,68,.1);color:var(--rd)} .msg-ok{background:rgba(16,185,129,.1);color:var(--gn)}
.empty{color:var(--mt);font-size:12px;padding:8px 0}

.toast{position:fixed;bottom:16px;left:16px;max-width:300px;padding:8px 12px;border-radius:7px;font-size:12px;font-weight:600;line-height:1.3;z-index:200;animation:fi .15s;box-shadow:0 6px 18px rgba(0,0,0,.55);border:1px solid var(--bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.msg-ok{background:#0f5132;color:#fff;border-color:#10b981}
.toast.msg-err{background:#5b1a1a;color:#fff;border-color:#ef4444}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fill-notif{position:fixed;bottom:60px;left:50%;--fill-scale:1;--fill-scale-start:.5;--fill-scale-peak:1.15;transform:translateX(-50%) scale(var(--fill-scale));z-index:10000;pointer-events:none;transition:bottom .18s ease-out;animation:fillPop .4s cubic-bezier(.2,1,.3,1) forwards, fillFade .6s ease-in 2.5s forwards}
.fill-notif-inner{font-size:28px;font-weight:900;letter-spacing:1px;text-shadow:0 0 20px currentColor,0 0 40px currentColor,0 2px 8px rgba(0,0,0,.8);white-space:nowrap}
.fill-notif .fill-sub{font-size:13px;font-weight:600;opacity:.8;margin-top:2px;text-align:center;letter-spacing:.5px}
.fill-notif.late-fill{background:rgba(15,23,42,.92);border:1px dashed rgba(245,158,11,.5);border-radius:14px;padding:8px 16px;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:fillPop .35s cubic-bezier(.2,1,.3,1) forwards, fillFade .6s ease-in 5s forwards}
.fill-notif.late-fill .fill-notif-inner{text-shadow:none;font-weight:800;letter-spacing:.5px}
.fill-notif.late-fill .fill-sub{opacity:.95}
.cancel-notif{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:400;pointer-events:none;animation:cancelSlam .5s cubic-bezier(.1,1.2,.3,1) forwards, cancelGlow 1s ease-in-out .3s 2, fillFade .6s ease-in 3s forwards}
.cancel-notif-inner{font-size:42px;font-weight:900;color:#ef4444;letter-spacing:3px;text-transform:uppercase;text-shadow:0 0 30px #ef4444,0 0 60px #ef4444,0 0 100px rgba(239,68,68,.4),0 4px 12px rgba(0,0,0,.9);white-space:nowrap}
.cancel-notif .cancel-sub{font-size:16px;font-weight:700;color:#ef4444;opacity:.7;margin-top:6px;text-align:center;letter-spacing:2px;text-shadow:0 0 15px #ef4444}
@keyframes cancelSlam{0%{transform:translate(-50%,-50%) scale(3);opacity:0}60%{transform:translate(-50%,-50%) scale(.9);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes cancelGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
@keyframes fillPop{0%{opacity:0;transform:translateX(-50%) scale(var(--fill-scale-start)) translateY(30px)}60%{opacity:1;transform:translateX(-50%) scale(var(--fill-scale-peak)) translateY(-5px)}100%{opacity:1;transform:translateX(-50%) scale(var(--fill-scale)) translateY(0)}}
@keyframes fillFade{to{opacity:0;transform:translateX(-50%) scale(var(--fill-scale)) translateY(-20px)}}

/* Fills table */
.fills-tbl{width:100%;font-size:11px;border-collapse:collapse}
.fills-tbl th{text-align:left;color:var(--mt);font-weight:500;padding:4px;border-bottom:1px solid var(--bd)}
.fills-tbl td{padding:4px;border-bottom:1px solid rgba(255,255,255,.03)}

/* Hotkey hints */
.hk{display:inline-block;background:var(--bd);padding:1px 5px;border-radius:3px;font-size:10px;color:var(--mt);margin-left:4px;font-family:monospace}

/* Login screen */
.login-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:999}
.login-box{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:32px;width:420px;max-width:95vw;text-align:center}
.login-box h1{font-size:24px;font-weight:700;margin-bottom:4px} .login-box h1 span{color:var(--ac)}
.login-box .sub{color:var(--mt);font-size:13px;margin-bottom:24px}
.login-box .f{text-align:left}
.login-box .login-btn{margin-top:12px}
.login-box .login-err{margin-top:8px}
/* Prop cards */
.pcard{background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:10px;cursor:pointer;transition:all .12s;display:flex;justify-content:space-between;align-items:center}
.pcard:hover{border-color:var(--ac)}
.pcard.sel{border-color:var(--gn);background:rgba(16,185,129,.04)}
.pcard .pname{font-size:12px;font-weight:600;margin-bottom:2px}
.pcard .pmeta{font-size:10px;color:var(--mt)}
.pcard .pprice{font-size:18px;font-weight:700;text-align:right}
.pcard .pprice.gn{color:var(--gn)} .pcard .pprice.rd{color:var(--rd)}
.pcard .pside{display:flex;gap:4px;margin-top:4px}
.pcard .pbtn{padding:3px 8px;border:none;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer}
.pcard .pbtn.buy{background:rgba(16,185,129,.15);color:var(--gn)} .pcard .pbtn.sell{background:rgba(239,68,68,.15);color:var(--rd)}

/* Slider props (spread/total) */
.slider-prop{padding:10px 14px;border-bottom:1px solid var(--bd)}
.slider-prop .sp-title{font-size:13px;color:var(--tx);margin-bottom:6px;font-weight:400}
.slider-prop .sp-title strong{color:var(--ac);font-weight:700}
.slider-row{display:flex;align-items:center;gap:10px}
.slider-wrap{position:relative;overflow:hidden;border:1px solid var(--bd);border-radius:8px;background:var(--bg);flex:1;min-width:0;display:flex;align-items:center}
.sl-arrow{flex-shrink:0;width:22px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--mt);cursor:pointer;font-size:11px;user-select:none;opacity:.6}
.sl-arrow:hover{opacity:1;color:var(--tx)}
.slider-track-wrap{position:relative;overflow:hidden;flex:1}
.slider-track-wrap{--fade-opacity:1}
.slider-track-wrap::before,.slider-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:20px;z-index:2;pointer-events:none;opacity:var(--fade-opacity);transition:opacity .2s}
.slider-track-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.slider-track-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.slider-track{display:flex;align-items:center;gap:0;overflow-x:auto;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;cursor:grab;padding:0;-webkit-overflow-scrolling:touch}
.slider-track::-webkit-scrollbar{display:none}
.slider-track:active{cursor:grabbing}
.slider-track .sl-val{position:relative;padding:6px 8px 14px;font-size:11px;color:var(--mt);cursor:grab;white-space:nowrap;user-select:none;flex-shrink:0;transition:color .15s,font-weight .15s}
.slider-track .sl-val.has-pos-yes::before{content:'';position:absolute;left:12px;right:12px;top:3px;height:1px;background:var(--gn);border-radius:1px}
.slider-track .sl-val.has-pos-no::after{content:'';position:absolute;left:12px;right:12px;bottom:11px;height:1px;background:var(--rd);border-radius:1px}
.slider-track .sl-val .sl-dot{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--yl);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.slider-track .sl-val:hover{color:var(--tx)}
.slider-track .sl-val.on{color:var(--tx);font-weight:800;font-size:13px}
.sl-team-label{display:none}
.sp-mid{font-size:16px;font-weight:700;min-width:50px;text-align:center;white-space:nowrap}
.sp-mid .sp-chg{font-size:10px;font-weight:600;margin-left:3px}
.sp-buttons{display:flex;gap:6px}
.sp-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--bd);background:none;color:var(--tx);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.sp-btn:hover{background:rgba(255,255,255,.06)}
.sp-btn .sp-lbl{color:var(--mt);font-weight:400;margin-right:3px}
.sp-btn.yes .sp-price{color:var(--gn)} .sp-btn.no .sp-price{color:var(--rd)}
.sp-pos{font-size:11px;margin-top:4px;font-weight:600}
.lock-icon{font-size:40px;margin-bottom:12px}
.cmodal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center}
.cmodal{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:16px 20px;min-width:260px;max-width:400px;text-align:center}
.cmodal-msg{font-size:13px;margin-bottom:14px;color:var(--tx)}
.cmodal-btns{display:flex;gap:8px;justify-content:center}
.cmodal-btns button{padding:6px 20px;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}
.cmodal-ok{background:var(--rd);color:#fff}
.cmodal-cancel{background:var(--bd);color:var(--tx)}
.cmodal-btns button:disabled{opacity:.5;cursor:not-allowed}
.cmodal-shake{animation:cmodalShake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes cmodalShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}
  40%,60%{transform:translateX(5px)}
}