:root{--bg:#0a0e17;--sf:#111827;--bd:#1f2937;--tx:#e5e7eb;--mt:#9ca3af;--ac:#3b82f6;--ac-rgb:59,130,246;--gn:#10b981;--rd:#ef4444;--yl:#f59e0b;--or:#f97316}
:root.light{--bg:#ffffff;--sf:#f8fafc;--bd:#e2e8f0;--tx:#1e293b;--mt:#64748b;--ac:#2563eb;--ac-rgb:37,99,235;--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 — masks 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 eye 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 real numbers). */
.priv-num{transition:color .15s ease;position:relative;display:inline-block}
html.priv-on .priv-num,
body.priv-on .priv-num{
  color:transparent!important;
  user-select:none;
  cursor:default;
}
html.priv-on .priv-num::after,
body.priv-on .priv-num::after{
  content:"––––";
  color:var(--tx);
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:.14em;
  opacity:.62;
}
html.priv-obf-on:not(.priv-on) .priv-num,
body.priv-obf-on:not(.priv-on) .priv-num,
html.priv-obf-on:not(.priv-on) .obf-num,
body.priv-obf-on:not(.priv-on) .obf-num{
  color:transparent!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:-.02em;
}
html.priv-obf-on:not(.priv-on) .priv-num::after,
body.priv-obf-on:not(.priv-on) .priv-num::after,
html.priv-obf-on:not(.priv-on) .obf-num::after,
body.priv-obf-on:not(.priv-on) .obf-num::after{
  content:attr(data-obf);
  color:var(--priv-obf-fg,var(--tx));
  position:absolute;
  inset:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  font-family:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
html.priv-on .venue-bal .priv-num,
html.priv-obf-on .venue-bal .priv-num,
body.priv-on .venue-bal .priv-num,
body.priv-obf-on .venue-bal .priv-num{
  color:inherit!important;
  font-family:inherit;
  letter-spacing:inherit;
  user-select:none;
  cursor:default;
}
html.priv-on .venue-bal .priv-num::after,
html.priv-obf-on .venue-bal .priv-num::after,
body.priv-on .venue-bal .priv-num::after,
body.priv-obf-on .venue-bal .priv-num::after{
  content:none!important;
}
html.priv-obf-on:not(.priv-on) .priv-num.pos::after,
html.priv-obf-on:not(.priv-on) .priv-num.positive::after,
body.priv-obf-on:not(.priv-on) .priv-num.pos::after,
body.priv-obf-on:not(.priv-on) .priv-num.positive::after{
  color:var(--gn);
}
html.priv-obf-on:not(.priv-on) .priv-num.neg::after,
html.priv-obf-on:not(.priv-on) .priv-num.negative::after,
body.priv-obf-on:not(.priv-on) .priv-num.neg::after,
body.priv-obf-on:not(.priv-on) .priv-num.negative::after{
  color:var(--rd);
}
/* 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)}
.btn-obf{padding:5px 9px;font-size:13px;line-height:1}
.btn-obf.on{background:rgba(88,166,255,.16);border-color:rgba(88,166,255,.7);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}
.hdr-tool-btns{display:flex;gap:4px}
.hdr-tool-btns .hdr-perf-btn{flex:1;justify-content: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}
/* Sub-part label inside a merged quarter/half period section
   (Moneyline / Spread / Total). */
.period-part-lbl{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  font-size:10px;font-weight:800;color:var(--mt);
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--bd);background:rgba(255,255,255,.015);
  cursor:pointer;user-select:none;
}
.period-part-lbl:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.period-part-caret{font-size:9px;opacity:.75}
.period-part-body{border-bottom:1px solid var(--bd)}

/* 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}
.event-header-layout{display:flex;align-items:center;justify-content:space-between;gap:18px}
.event-header-main{flex:1;min-width:0}
.event-league-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.event-league{
  color:var(--mt);font-size:10px;font-weight:800;letter-spacing:1px;
  line-height:1;text-transform:uppercase;
}
.event-league-row .kalshi-link-pill{
  margin-left:0;padding:3px 8px;font-size:10px;border-radius:6px;gap:4px;
}
.event-league-row .kalshi-link-pill .klp-ext{font-size:9px}
.event-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.market-header .event-title-line .title{margin:0;line-height:1.15}
.event-header-meta{
  display:flex;align-items:center;gap:8px;margin-top:7px;
  color:var(--mt);font-size:11px;font-weight:400;
}
.event-start-meta{font-variant-numeric:tabular-nums}
.event-start-meta::after{content:'·';margin-left:8px;color:var(--bd)}
.event-header-volume{white-space:nowrap}
.event-header-right{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  flex-wrap:wrap;flex-shrink:0;
}
.vol-filter{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;color:var(--mt);cursor:default;user-select:none;
}
.vol-filter-label{font-weight:600;font-size:11px;color:var(--mt);white-space:nowrap}
.vol-filter-field{
  display:inline-flex;align-items:center;gap:1px;
  background:var(--bg);border:1px solid var(--bd);border-radius:6px;
  padding:2px 6px 2px 7px;
}
.vol-filter:focus-within .vol-filter-field{border-color:var(--ac)}
.vol-filter-prefix{font-size:11px;font-weight:700;color:var(--mt);line-height:1}
.vol-filter input{
  width:52px;background:transparent;border:0;color:var(--tx);
  font-size:12px;font-weight:700;outline:none;padding:1px 0;
  text-align:right;font-variant-numeric:tabular-nums;
}
.vol-filter input::-webkit-outer-spin-button,
.vol-filter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vol-filter input[type=number]{-moz-appearance:textfield}
.vol-filter input::placeholder{color:var(--mt);opacity:.55}
@media(max-width:900px){
  .event-header-layout{align-items:flex-start;flex-direction:column}
  .event-header-right{width:100%;justify-content:flex-end}
}

/* 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.yes.active{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.65);box-shadow:inset 0 0 0 1px rgba(16,185,129,.35)}
.outcome .bbo-btn.no.active{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.65);box-shadow:inset 0 0 0 1px rgba(239,68,68,.35)}
.outcome .bbo-btn .bbo-lbl{font-weight:400;opacity:.7}
.outcome .bbo-btn.active .bbo-lbl{opacity:1}
/* Inline "vol N" badge that lives next to the history button inside
   `.outcome .name` (keeps moneyline rows visually consistent with
   spread/total slider rows). */
.vol-inline,.outcome .name .vol-inline{color:var(--mt);font-size:10px;font-weight:400;margin-left:6px}
.taker-flow-inline{
  margin-left:0;padding:1px 6px;border:1px solid transparent;border-radius:999px;
  font-size:10px;font-weight:800;line-height:1.35;
  font-variant-numeric:tabular-nums;vertical-align:middle;white-space:nowrap;
}
.taker-flow-inline.tf-yes{color:var(--gn);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.1)}
.taker-flow-inline.tf-no{color:var(--rd);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.1)}
.taker-flow-host{
  display:inline-flex;align-items:center;margin-left:6px;
  cursor:pointer;vertical-align:middle;user-select:none;
}
.taker-flow-toggle{
  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;line-height:1.35;letter-spacing:.2px;
}
.taker-flow-host:hover .taker-flow-toggle{color:var(--tx);border-color:var(--mt)}
.taker-flow-toggle.on{
  color:var(--tx);border-color:var(--mt);background:rgba(255,255,255,.08);
}
.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;min-width:0;text-align:center;z-index:1} .ob-row .cum{width:88px;min-width:88px;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;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-empty .q,
.ob-row.ob-empty .cum,
.ob-row.ob-empty .odds{opacity:.35}
.ob-row.ob-empty .bar{display:none}
.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;white-space:nowrap}
.my-badge-stack{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;max-width:100%}
.ob-row:has(.my-badge-stack){height:auto;min-height:22px;padding-top:2px;padding-bottom:2px}
.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)}
.ob-cxl-level{display:inline-flex;align-items:center;justify-content:center;padding:0 5px;height:14px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#fff;background:var(--rd);cursor:pointer;line-height:1;flex:0 0 auto}
.ob-cxl-level:hover{filter:brightness(1.15)}
/* 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;margin:8px 8px 10px;border-radius:4px}
.inline-ob.ob-active{
  outline:2px solid var(--ac);
  outline-offset:0;
}
/* Only the ACTIVE book accepts user scrolling. Non-active pinned books sit
   pinned to the spread (scrollTop 0 on both halves — asks are column-reverse)
   and ignore wheel/touch entirely; JS snaps them back to 0 on deactivation
   (_refreshOBActiveClass) and skips scroll-restore for them on rebuilds.
   !important beats the inline `overflow-y:auto` stamped by buildOBHtml. */
.inline-ob:not(.ob-active) .ob-half{overflow-y:hidden!important}
/* 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)}

/* Row-window expander footer at the bottom of every open book. Small and
   dim by default so it never competes with the depth data; the two step
   buttons update the persisted kObDepth / polyPrefs.obDepth setting (same
   value the settings modal edits) in ±4-row steps. `.off` marks a step
   that can't go further (clamped 1–15). Shared by both clients. */
.ob-depth-ctl{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:1px 6px 2px;font-size:9px;color:var(--mt);
  user-select:none;-webkit-user-select:none;
}
.ob-depth-btn{
  cursor:pointer;padding:1px 6px;border-radius:4px;
  color:var(--mt);opacity:.75;letter-spacing:.02em;
  transition:background .1s ease,color .1s ease,opacity .1s ease;
}
.ob-depth-btn:hover{background:rgba(96,165,250,.14);color:var(--tx);opacity:1}
.ob-depth-btn.off{opacity:.25;cursor:default;pointer-events:none}
.ob-depth-lbl{font-weight:700;color:var(--mt);min-width:14px;text-align:center}

/* 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:88px;flex-shrink:0}     /* .cum (88) */
/* 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}
/* Drag handle for resizing the right panel (created by _initRpResize on both
   legs; overlaid on the panel's left edge inside the .main grid container). */
.rp-resize{position:absolute;top:0;bottom:0;width:7px;cursor:col-resize;z-index:30;background:transparent;touch-action:none}
.rp-resize:hover,.rp-resize.dragging{background:rgba(96,165,250,.28)}
.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}
.scen-pnl-head{gap:8px}
.scen-pnl-tools{display:flex;align-items:center;gap:8px;min-width:0}
.scen-mode-sel{background:var(--bg);border:1px solid var(--bd);color:var(--tx);font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;padding:2px 6px;border-radius:4px;outline:none;max-width:46vw}
.scen-mode-sel:focus{border-color:var(--ac)}
#gameRealizedPnl{font-size:11px;font-weight:600;white-space:nowrap}

/* Portfolio overlay — Pro Terminal palette, scoped so home stays as-is */
.portfolio-page{
  --pf-bg:#070b12;--pf-sf:#0d131e;--pf-sf2:#111a28;--pf-bd:#263244;
  --pf-tx:#edf2f7;--pf-mt:#8c99aa;--pf-mu:#5c6b7d;
  height:100%;min-height:0;background:var(--pf-bg);padding:18px 22px 48px;overflow-y:auto;color:var(--pf-tx)
}
.portfolio-shell{max-width:1280px;margin:0 auto;background:var(--pf-sf);border:1px solid var(--pf-bd);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.portfolio-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--pf-bd);background:#0b1422}
.pf-kicker{font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--pf-mu);margin-bottom:4px}
.portfolio-page-head h2{margin:0;font-size:20px;letter-spacing:.2px;color:var(--pf-tx)}
.pf-sub{font-size:12px;color:var(--pf-mt);margin-top:4px}
.pf-head-actions{display:flex;gap:8px;align-items:center}
.pf-venue-bals{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.portfolio-page .venue-bal{min-width:92px;padding:6px 10px 7px;background:#09101a;border:1px solid var(--pf-bd);border-radius:8px}
.portfolio-page .venue-bal .venue-bal-name{display:block;font-size:8px;font-weight:900;letter-spacing:.65px;text-transform:uppercase;color:var(--pf-mu);line-height:1}
.portfolio-page .venue-bal.kalshi .venue-bal-name{color:var(--kalshi-soft)}
.portfolio-page .venue-bal.novig .venue-bal-name{color:var(--novig-soft)}
.portfolio-page .venue-bal.polymarket .venue-bal-name{color:var(--poly-soft)}
.portfolio-page .venue-bal strong{display:block;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--pf-tx);margin-top:4px}
.portfolio-page .venue-bal.kalshi{box-shadow:inset 2px 0 0 var(--kalshi)}
.portfolio-page .venue-bal.novig{box-shadow:inset 2px 0 0 var(--novig)}
.portfolio-page .venue-bal.polymarket{box-shadow:inset 2px 0 0 var(--poly)}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 20px;background:var(--pf-bg);border-bottom:1px solid var(--pf-bd)}
@media(max-width:1100px){.pf-stats{grid-template-columns:repeat(2,1fr)}}
.pf-card{background:var(--pf-sf);border:1px solid var(--pf-bd);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.pf-card-label{font-size:10px;color:var(--pf-mt);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.pf-card-value{font-size:20px;font-weight:800;color:var(--pf-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(--pf-mt)}
.pf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--pf-bd);flex-wrap:wrap}
.pf-tabs{display:flex;gap:4px;background:var(--pf-bg);border:1px solid var(--pf-bd);border-radius:10px;padding:4px}
.pf-tab{background:transparent;border:0;color:var(--pf-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(--pf-tx)}
.pf-tab.on{background:var(--pf-sf2);color:var(--pf-tx);box-shadow:0 0 0 1px var(--pf-bd) inset}
.pf-tab-count{background:rgba(255,255,255,.06);color:var(--pf-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(255,255,255,.1);color:var(--pf-tx)}
.pf-toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pf-search{background:var(--pf-bg);border:1px solid var(--pf-bd);color:var(--pf-tx);font-size:12px;padding:6px 10px;border-radius:7px;width:220px;outline:none}
.pf-search:focus{border-color:var(--focus,#8fb6ff)}
.pf-select{background:var(--pf-bg);border:1px solid var(--pf-bd);color:var(--pf-tx);font-size:12px;padding:6px 8px;border-radius:7px;outline:none}
.pf-fill-min{display:inline-flex;align-items:center;gap:6px;background:var(--pf-bg);border:1px solid var(--pf-bd);border-radius:7px;padding:4px 8px;color:var(--pf-mt);font-size:11px;font-weight:700}
.pf-fill-min span{text-transform:uppercase;letter-spacing:.4px;font-size:10px}
.pf-fill-min input{width:64px;background:transparent;border:0;color:var(--pf-tx);font-size:12px;font-weight:700;outline:none;text-align:right;font-variant-numeric:tabular-nums}
.pf-fill-min input::-webkit-outer-spin-button,.pf-fill-min input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pf-fill-min input[type=number]{-moz-appearance:textfield}
.pf-fill-hidden{color:var(--pf-mt);font-size:11px;font-weight:600;padding:8px 10px}
.pf-fill-logo{width:14px;height:14px;border-radius:3px;object-fit:contain;vertical-align:-2px;margin-right:6px}
.pf-fill-child td{color:var(--pf-mt);background:rgba(255,255,255,.015)}
.pf-fill-child td:first-child{padding-left:22px}
.pf-fill-child .pf-mkt-link{color:var(--pf-mt)}
.portfolio-body{padding:6px 20px 22px}
.pf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.pf-table thead th{position:sticky;top:0;background:var(--pf-sf);text-align:left;color:var(--pf-mt);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:10px 10px;border-bottom:1px solid var(--pf-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-row.pf-row-static{cursor:default}
.pf-event-row td{background:var(--pf-sf2);color:var(--pf-tx);font-weight:700;font-size:12px;letter-spacing:.2px;padding:10px 12px;cursor:pointer;text-transform:none}
.pf-event-row td:hover{filter:brightness(1.08)}
.portfolio-page .venue-tag.venue-kalshi{color:#8aa99a;border-color:rgba(138,169,154,.38);background:rgba(138,169,154,.08)}
.pf-venue-row td{background:rgba(255,255,255,.03);color:var(--pf-mt);font-size:11px;font-weight:700;padding:7px 12px 7px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.pf-venues-inline{color:var(--mt);font-weight:600;font-size:10px;margin-left:8px;letter-spacing:.3px}
.pf-market-toggle{cursor:pointer}
.pf-leg-row td{padding-left:18px;background:rgba(255,255,255,.02)}
.pf-league-pill{display:inline-block;background:rgba(255,255,255,.06);color:var(--pf-mt);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-table .pos, .pf-ev-meta .pos{color:var(--gn);font-weight:700}
.pf-table .neg, .pf-ev-meta .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-side-flat{color:var(--mt);font-weight:700}
.pf-hedge{color:var(--mt);font-weight:600;font-size:10px;margin-left:8px;letter-spacing:.2px}
.pf-hedge .pos,.pf-hedge .neg{font-weight:700}
.pf-net-money{color:var(--tx);font-weight:700;white-space:nowrap}
.pf-avg-odds{color:var(--mt);font-weight:400;margin-left:4px}
.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}
.pos-item.pos-mixed{align-items:flex-start}
.pos-drop-btn{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;min-width:20px;height:18px;padding:0 6px;border:1px solid var(--bd);border-radius:4px;background:var(--sf);color:var(--mt);font-size:10px;line-height:1;cursor:pointer;vertical-align:middle}
.pos-drop-btn:hover{color:var(--tx);border-color:var(--ac)}
.pos-item.pos-mixed.open .pos-drop-btn{color:var(--tx)}
.pos-venue-drop{display:none;margin-top:6px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.pos-item.pos-mixed.open .pos-venue-drop{display:block}
.pos-venue-hd{font-size:9px;font-weight:700;letter-spacing:.45px;text-transform:uppercase;color:var(--mt);padding:6px 0 2px}
.pos-venue-hd:first-child{padding-top:0}
.pos-venue-net{margin:0 0 2px;padding:0 0 6px;border-bottom:1px solid rgba(255,255,255,.1)}
.pos-venue-net-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:11px;line-height:1.35;font-weight:600}
.pos-venue-leg{display:flex;justify-content:space-between;align-items:flex-start;width:100%;box-sizing:border-box;gap:10px;margin:0;padding:5px 0;border:0;border-bottom:1px solid rgba(255,255,255,.05);background:transparent;color:inherit;font:inherit;font-size:11px;line-height:1.35;cursor:default;text-align:left;appearance:none}
.pos-venue-leg:last-child{border-bottom:none}
.pos-venue-leg[data-ticker]{cursor:pointer}
.pos-venue-leg[data-ticker]:hover{color:var(--tx)}
.pos-venue-leg-main{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0;text-align:right}
.pos-venue-book{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--mt)}
.pos-venue-avg{font-weight:600}
.pos-venue-am{color:var(--mt);font-weight:400}
.pos-venue-money{color:var(--mt);font-weight:500;white-space:nowrap}
.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;position:relative}
.ord-item:last-child{border-bottom:none}
.ord-item[data-qtip]{cursor:help}
.ord-item[data-qtip]::after{
  content:attr(data-qtip);
  position:absolute;
  left:0;
  top:calc(100% + 2px);
  z-index:30;
  padding:4px 8px;
  border-radius:6px;
  background:rgba(15,18,28,.96);
  border:1px solid var(--bd);
  color:var(--tx);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:opacity .12s;
}
.ord-item[data-qtip]:hover::after{opacity:1}
/* 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)}

/* Settings: compact "connected" view for Kalshi / Poly credentials */
.cfg-api-connected{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.cfg-api-connected-label{font-size:12px;color:var(--gn);font-weight:650}

/* 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}

/* Basic settings — same two-column chrome as Pro Terminal */
#cfgModal{
  --panel-deep:var(--sf);
  --line:var(--bd);
  --line-strong:color-mix(in srgb,var(--bd) 70%,var(--tx));
  --line-hover:color-mix(in srgb,var(--bd) 45%,var(--tx));
  --text:var(--tx);
  --muted:var(--mt);
  --field:var(--bg);
  --accent-soft:color-mix(in srgb,var(--ac) 72%,#fff);
  --accent-bright:color-mix(in srgb,var(--ac) 28%,#fff);
  --blue:var(--ac);
  --blue-rgb:var(--ac-rgb);
  --green:var(--gn);
  --red:var(--rd);
  --focus:var(--ac);
  padding:20px;
}
#cfgModal .settings-modal{
  width:min(860px,96vw);height:min(720px,88dvh);display:flex;flex-direction:column;min-height:0;
  background:var(--panel-deep);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 22px 70px rgba(0,0,0,.72);overflow:hidden;
}
#cfgModal .settings-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid var(--line)}
#cfgModal .settings-modal-head h2{margin:2px 0 0;font-size:22px}
#cfgModal .settings-kicker{color:var(--accent-soft);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
#cfgModal .settings-modal-head>button{width:34px;height:34px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
#cfgModal .settings-modal-head>button:hover{color:var(--text);border-color:var(--line-hover)}
#cfgModal .settings-modal-layout{display:grid;grid-template-columns:200px minmax(0,1fr);flex:1;min-height:0}
#cfgModal .settings-nav{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--sf) 70%,transparent)}
#cfgModal .settings-nav button{width:100%;border:0;border-radius:8px;background:transparent;color:var(--muted);padding:10px 12px;font-size:13px;font-weight:750;text-align:left;cursor:pointer}
#cfgModal .settings-nav button:hover{color:var(--text);background:rgba(var(--blue-rgb),.08)}
#cfgModal .settings-nav button.on{color:var(--accent-bright);background:rgba(var(--blue-rgb),.14)}
:root.light #cfgModal{--accent-soft:var(--ac);--accent-bright:var(--ac);--line-strong:var(--bd)}
#cfgModal .settings-pages{min-height:0;overflow-y:scroll;overscroll-behavior:contain;padding:22px 26px 28px;scrollbar-width:thin}
#cfgModal .settings-panel{display:flex;flex-direction:column;min-height:min-content}
#cfgModal .settings-panel>*{flex-shrink:0}
#cfgModal .settings-page h3{margin:0 0 6px;font-size:18px;color:var(--text)}
#cfgModal .settings-page>p{margin:0 0 22px;color:var(--muted);font-size:12px;line-height:1.45}
#cfgModal .settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);color:var(--text);font-size:13px;cursor:pointer}
#cfgModal .settings-toggle span{display:flex;flex-direction:column;gap:4px}
#cfgModal .settings-toggle small{color:var(--muted);font-size:11px;font-weight:400;line-height:1.4}
#cfgModal .settings-toggle input{width:auto;height:auto;padding:0;accent-color:var(--blue);flex-shrink:0}
#cfgModal .settings-page .settings-toggle:first-of-type{border-top:0;padding-top:0}
#cfgModal .settings-field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
#cfgModal .settings-field>span{font-size:12px;font-weight:750;color:var(--text)}
#cfgModal .settings-field>small{color:var(--muted);font-size:11px;line-height:1.4}
#cfgModal .settings-field select,
#cfgModal .settings-field input[type=text],
#cfgModal .settings-field input[type=password],
#cfgModal .settings-field input[type=number]{
  width:100%;max-width:360px;height:36px;font-size:13px;
  background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 9px;outline:none
}
#cfgModal .settings-field input[type=range]{
  width:100%;max-width:420px;height:18px;padding:0;margin:4px 0 0;
  background:transparent;border:0;accent-color:var(--ac)
}
#cfgModal .settings-field>span em{font-style:normal;font-weight:700;color:var(--muted)}
#cfgModal .settings-sound-channel{
  margin:0 0 14px;padding:14px;
  border:1px solid var(--line);border-radius:11px;
  background:color-mix(in srgb,var(--sf) 88%,transparent)
}
#cfgModal .settings-sound-title{display:block;margin:0 0 4px;font-size:12px;font-weight:750;color:var(--text)}
#cfgModal .settings-sound-channel>small{display:block;margin:0 0 10px;color:var(--muted);font-size:11px;line-height:1.4}
#cfgModal .settings-sound-types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
#cfgModal .settings-sound-types .btn{flex:1;min-width:72px;padding:6px 8px;font-size:11px}
#cfgModal .settings-sound-custom{margin-bottom:8px}
#cfgModal .settings-sound-custom input[type=file]{width:100%;font-size:11px}
#cfgModal .settings-sound-custom-name{margin-top:4px;color:var(--muted);font-size:11px}
#cfgModal .settings-sound-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#cfgModal .settings-sound-meta-end{justify-content:flex-end}
#cfgModal .settings-sound-meta label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}
#cfgModal .settings-sound-meta input[type=number]{
  width:80px;max-width:80px;height:32px;padding:4px 8px;font-size:12px;
  background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:7px
}
#cfgModal .settings-sound-meta-unit{color:var(--muted);font-size:11px}
#cfgModal .settings-sound-meta .settings-manage-button{margin-left:auto;padding:6px 10px}
#cfgModal .settings-field textarea{
  width:100%;max-width:none;min-height:120px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px 9px;outline:none;resize:vertical
}
#cfgModal .settings-field select:focus,
#cfgModal .settings-field input:focus,
#cfgModal .settings-field textarea:focus{border-color:var(--focus)}
#cfgModal #cfgQtyPresets{max-width:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
#cfgModal .settings-field-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
#cfgModal .settings-field-foot>span{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#cfgModal .settings-manage-button{width:auto;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--text);padding:8px 12px;font-size:12px;font-weight:750;cursor:pointer}
#cfgModal .settings-manage-button:hover{border-color:rgba(var(--blue-rgb),.55);color:var(--accent-soft)}
#cfgModal .settings-account-user{margin:-8px 0 16px;color:var(--muted);font-size:12px}
#cfgModal .settings-account-user:empty{display:none}
#cfgModal .settings-hotkey-map{display:flex;flex-direction:column;gap:0;max-width:420px;margin-top:4px}
#cfgModal .settings-hotkey-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;color:var(--text)}
#cfgModal .settings-hotkey-row:first-child{border-top:0;padding-top:0}
#cfgModal .settings-hotkey-row .hk-bind{min-width:86px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;border:1px solid var(--line);border-radius:8px;background:var(--field);color:var(--text);padding:6px 10px;cursor:pointer}
#cfgModal .settings-hotkey-row .hk-bind:hover,
#cfgModal .settings-hotkey-row .hk-bind.listening{border-color:rgba(var(--blue-rgb),.55);color:var(--accent-soft)}
#cfgModal .platform-badge{display:inline-flex;align-items:center;padding:2px 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.45px;text-transform:uppercase}
#cfgModal .platform-badge.kalshi{border-color:rgba(var(--kalshi-rgb),.48);color:var(--kalshi-soft);background:rgba(var(--kalshi-rgb),.1)}
#cfgModal .platform-badge.polymarket{border-color:rgba(var(--poly-rgb),.48);color:var(--poly-soft);background:rgba(var(--poly-rgb),.1)}
#cfgModal .settings-cred-card{margin:0 0 18px;padding:14px;border:1px solid rgba(var(--ac-rgb),.22);border-radius:11px;background:color-mix(in srgb,var(--sf) 88%,transparent)}
#cfgModal .kalshi-settings-card{border-color:rgba(var(--kalshi-rgb),.34);background:linear-gradient(135deg,rgba(var(--kalshi-rgb),.1),rgba(var(--blue-rgb),.025))}
#cfgModal .poly-settings-card{border-color:rgba(var(--poly-rgb),.34);background:linear-gradient(135deg,rgba(var(--poly-rgb),.08),rgba(var(--blue-rgb),.025))}
#cfgModal .settings-cred-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
#cfgModal .settings-cred-head>span:first-child{display:flex;flex-direction:column;gap:3px}
#cfgModal .settings-cred-head strong{font-size:13px;color:var(--text)}
#cfgModal .settings-cred-head small{color:var(--muted);font-size:10px}
#cfgModal .settings-cred-head small.on{color:var(--green)}
#cfgModal .settings-cred-card>p{margin:0 0 12px;color:var(--muted);font-size:11px;line-height:1.45}
#cfgModal .settings-cred-form{margin:0}
#cfgModal .settings-cred-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
#cfgModal .settings-cred-grid label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:9px;font-weight:800}
#cfgModal .settings-cred-grid input,
#cfgModal .settings-cred-grid textarea{
  width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 9px;outline:none;font-size:13px
}
#cfgModal .settings-cred-grid input{height:34px}
#cfgModal .settings-cred-grid textarea{min-height:110px;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical}
#cfgModal .settings-cred-grid input:focus,
#cfgModal .settings-cred-grid textarea:focus{border-color:var(--focus)}
#cfgModal .settings-cred-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
#cfgModal .button{border:1px solid var(--line);border-radius:8px;background:var(--sf);padding:8px 12px;cursor:pointer;font-size:12px;font-weight:700;color:var(--text)}
#cfgModal .button.primary{background:var(--ac);border-color:var(--ac);color:#fff}
#cfgModal .button.danger{border-color:rgba(239,68,68,.55);color:var(--rd);background:transparent}
#cfgModal .button:disabled{opacity:.4;cursor:not-allowed}
#cfgModal .msg{margin:0 0 10px;border-radius:8px;padding:8px 10px;font-size:12px}
@media(max-width:780px){
  #cfgModal{padding:8px}
  #cfgModal .settings-modal{width:96vw;height:min(780px,92dvh)}
  #cfgModal .settings-modal-layout{grid-template-columns:1fr}
  #cfgModal .settings-nav{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:10px}
  #cfgModal .settings-nav button{width:auto;padding:8px 10px;font-size:12px}
  #cfgModal .settings-pages{padding:16px 16px 22px}
  #cfgModal .settings-field select,
  #cfgModal .settings-field input[type=text],
  #cfgModal .settings-field input[type=password],
  #cfgModal .settings-field input[type=number]{max-width:none}
}
.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(1040px,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}

/* Header "More" dropdown — consolidates Sounds, Admin, Mobile, Feedback,
   Quick Guide and Logout into one top-right menu so the header stays tidy.
   The panel is anchored below the trigger and floats above page content.
   Rows that app.js hides via `.hidden` (#hdrAdminBtn, #featureReqBtn)
   are removed from the flex flow by the global
   `.hidden{display:none!important}` rule, so no empty gap shows. */
.hdr-menu{position:relative;display:inline-flex}
.hdr-menu-trigger{font-size:14px;line-height:1}
.hdr-menu-panel{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:210px;
  background:var(--sf);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:6px;
  z-index:95;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px;
}
.hdr-menu-item{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:9px 12px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--tx);
  font-size:13px;font-weight:500;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
}
.hdr-menu-item:hover{background:rgba(255,255,255,.06)}
.hdr-menu-item .hdr-menu-ico{font-size:15px;width:20px;text-align:center;flex:0 0 auto}
.hdr-menu-item.hdr-menu-item-danger{color:var(--rd)}
.hdr-menu-item.hdr-menu-item-danger:hover{background:rgba(239,68,68,.12)}

.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-trigger.fees-toggle{margin-left:4px}
.mh-trigger.fees-toggle .ft-state{font-weight:800;margin-left:3px}
.mh-trigger.fees-toggle.on .ft-state{color:var(--gn)}
.mh-trigger.fees-toggle.off .ft-state{color:var(--rd)}
.mh-trigger.fees-toggle.unknown .ft-state{color:var(--mt)}
.mh-trigger.fees-toggle.auto{cursor:help}
.mh-trigger.fees-toggle.auto:hover{color:var(--mt);border-color:var(--bd)}
.mh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.mh-stat{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:rgba(255,255,255,.03)}
.mh-stat-label{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--mt);margin-bottom:4px}
.mh-stat-value{font-size:18px;font-weight:800;line-height:1.15}
.mh-stat-value.yes{color:var(--gn)}
.mh-stat-value.no{color:var(--rd)}
.mh-stat-sub{font-size:11px;color:var(--mt);margin-top:3px}
.mh-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mh-chips{display:flex;gap:6px;flex-wrap:wrap}
.mh-chip{padding:4px 9px;border:1px solid var(--bd);border-radius:999px;background:rgba(255,255,255,.04);color:var(--mt);font-size:11px;font-weight:750;cursor:pointer}
.mh-chip:hover{color:var(--tx);border-color:var(--mt)}
.mh-chip.on{color:var(--tx);border-color:var(--tx);background:rgba(255,255,255,.08)}
.mh-sort{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}
.mh-sort.on{color:var(--tx);font-weight:750}
.mh-note{font-size:11px;color:var(--mt);margin:0 0 10px}
.mh-empty{color:var(--mt);text-align:center;padding:24px}
.mh-block,.mh-prints{color:var(--mt);font-weight:500;font-size:10px}
.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 gate — split desk panel, no card / glow / emoji */
.login-overlay{position:fixed;inset:0;z-index:999;display:flex;background:#080a0f;color:#e6edf3;overflow:auto}
/* Token already in localStorage: never paint the login form on a reload. */
html.has-session #loginOverlay{display:none!important}
html.light .login-overlay{background:#f7f8fa;color:var(--tx)}
.login-shell{display:grid;grid-template-columns:minmax(280px,36%) minmax(0,1fr);width:100%;min-height:100%}
.login-brand{display:flex;flex-direction:column;justify-content:center;padding:64px 72px;background:#0d121c;border-right:1px solid rgba(230,237,243,.1)}
html.light .login-brand{background:#fff;border-right-color:var(--bd)}
.login-mark{display:flex;margin:0}
.login-mark img{width:44px;height:44px;display:block}
.login-brand h1{font-size:32px;font-weight:560;letter-spacing:-.05em;margin:20px 0 0;line-height:1;padding-bottom:18px;border-bottom:1px solid rgba(230,237,243,.12);width:max-content}
.login-brand h1 span{color:#4f8cff}
.login-box{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:360px;margin:0 auto;padding:56px 40px;background:transparent;border:0;border-radius:0;box-shadow:none;text-align:left}
.login-box .sub{color:#8b95a5;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 28px}
html.light .login-box .sub{color:var(--mt)}
.login-box .sub code{color:#4f8cff;font-size:12px;letter-spacing:0;text-transform:none}
.login-box .f{margin:0 0 14px}
.login-box .f label{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#8b95a5;margin-bottom:6px}
.login-box .f input{padding:11px 12px;border-radius:2px;font-size:14px;background:#0c111a;border-color:rgba(230,237,243,.2)}
.login-box .f input:focus{border-color:#4f8cff}
html.light .login-box .f input{background:#fff;border-color:var(--bd)}
.login-box .login-btn{width:100%;margin-top:8px;padding:12px 14px;border-radius:2px;font-size:13px;font-weight:650;letter-spacing:.02em;background:#2E5CFF}
.login-box .login-btn:hover{filter:brightness(1.08)}
.login-box .login-err{margin-top:8px}
.login-copy{margin:0 0 22px;font-size:13px;line-height:1.55;color:#8b95a5}
.login-copy code{color:#4f8cff}
.login-switch{margin-top:22px;font-size:12px;color:#8b95a5}
.login-switch a{color:#e6edf3;font-weight:600;margin-left:6px}
html.light .login-switch a{color:var(--ac)}
.login-signout{color:#f87171!important}
.login-pending-msg{margin-top:12px;font-size:11px;color:#8b95a5}
@media(max-width:720px){
  .login-shell{grid-template-columns:1fr;align-content:center;padding:36px 22px 28px}
  .login-brand{padding:0 0 28px;border-right:0;border-bottom:1px solid rgba(230,237,243,.08);background:transparent}
  html.light .login-brand{border-bottom-color:var(--bd)}
  .login-brand h1{font-size:26px;margin-top:16px}
  .login-box{padding:28px 0 0;max-width:none;margin:0}
}
/* 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;border:1px solid transparent}
.pcard .pbtn.buy{background:rgba(16,185,129,.15);color:var(--gn)} .pcard .pbtn.sell{background:rgba(239,68,68,.15);color:var(--rd)}
.pcard .pbtn.buy.active{background:rgba(16,185,129,.32);border-color:rgba(16,185,129,.7);box-shadow:inset 0 0 0 1px rgba(16,185,129,.4)}
.pcard .pbtn.sell.active{background:rgba(239,68,68,.32);border-color:rgba(239,68,68,.7);box-shadow:inset 0 0 0 1px rgba(239,68,68,.4)}

/* Slider props (spread/total) */
.slider-prop{padding:8px 12px;border-bottom:1px solid var(--bd)}
.slider-prop .sp-title{font-size:13px;color:var(--tx);margin-bottom:5px;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 1 auto;min-width:0;display:flex;align-items:center}
.sl-arrow{flex-shrink:0;width:18px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--mt);cursor:pointer;font-size:10px;user-select:none;opacity:.6}
.sl-arrow:hover{opacity:1;color:var(--tx)}
.slider-track-wrap{position:relative;overflow:hidden;flex:1;min-width:0}
.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:5px 4px;font-size:10px;color:var(--mt);cursor:grab;white-space:nowrap;user-select:none;flex-shrink:0;transition:color .15s,font-weight .15s}
/* Numbers center by default; a marker (position underline or resting-order dot)
   shifts that one number a tad to free room for the marker. */
.slider-track .sl-val.has-pos-no,.slider-track .sl-val.has-ord{padding-top:3px;padding-bottom:11px}
.slider-track .sl-val.has-pos-yes{padding-top:11px;padding-bottom:3px}
.slider-track .sl-val.has-pos-yes.has-ord{padding-top:11px;padding-bottom:11px}
.slider-track .sl-val.has-pos-yes::before{content:'';position:absolute;left:3px;right:3px;top:9px;height:2px;background:var(--gn);border-radius:2px}
.slider-track .sl-val.has-pos-no::after{content:'';position:absolute;left:3px;right:3px;bottom:9px;height:2px;background:var(--rd);border-radius:2px}
.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:12px;transition:none}
.sl-team-label{display:none}
.sp-mid{font-size:16px;font-weight:700;min-width:50px;text-align:center;white-space:nowrap;flex-shrink:0}
.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-btn.yes.active{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.65);box-shadow:inset 0 0 0 1px rgba(16,185,129,.35)}
.sp-btn.no.active{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.65);box-shadow:inset 0 0 0 1px rgba(239,68,68,.35)}
.sp-btn.active .sp-lbl{color:var(--tx);opacity:1}
.sp-pos{font-size:11px;margin-top:4px;font-weight:600}

/* Short player ladders (TD 1+/2+) use Kalshi-style bubbles instead of
   the long drag slider. Selected pill is a white ring; a yellow dot
   marks a resting order. */
.sp-pills{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.sp-pill{position:relative;padding:5px 12px;border-radius:999px;border:1px solid var(--bd);background:none;color:var(--mt);font-size:12px;font-weight:600;cursor:pointer;user-select:none;white-space:nowrap;line-height:1.2}
.sp-pill:hover{color:var(--tx);border-color:var(--mt)}
.sp-pill.on{color:var(--tx);border-color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.sp-pill.has-pos-yes{box-shadow:inset 0 2px 0 var(--gn)}
.sp-pill.has-pos-no{box-shadow:inset 0 -2px 0 var(--rd)}
.sp-pill.on.has-pos-yes{box-shadow:inset 0 0 0 1px var(--tx),inset 0 2px 0 var(--gn)}
.sp-pill.on.has-pos-no{box-shadow:inset 0 0 0 1px var(--tx),inset 0 -2px 0 var(--rd)}
.sp-pill .sl-dot{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--yl);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.slider-prop.has-pills .sp-title{margin-bottom:6px}

/* Feature A — compact PLAYER-PROP rows only. `.outcome` / `.slider-prop` are
   SHARED with the main game markets (moneyline / spread / total), so the
   tighter spacing is scoped under #playerPropsContainer (the group that wraps
   only player-prop categories — see groupHtml('togglePlayerProps', …) in
   app.js). Main game markets, which render outside this container, keep their
   original sizing. Target: ~30–40% less row height while staying legible. */
#playerPropsContainer .outcome{padding:5px 16px}
#playerPropsContainer .outcome .name{font-size:13px}
#playerPropsContainer .outcome .mid{font-size:15px}
#playerPropsContainer .outcome .bbo-btn{padding:5px 12px;font-size:12px}
#playerPropsContainer .out-head{padding:4px 16px}
#playerPropsContainer .slider-prop{padding:6px 14px}
#playerPropsContainer .slider-prop .sp-title{margin-bottom:3px;font-size:12px}
#playerPropsContainer .slider-prop.has-pills .sp-title{margin-bottom:5px}
#playerPropsContainer .sp-pill{padding:4px 11px;font-size:11px}

/* Pin a market type or one player line to the top of the event page.
   Triggered by right-click on a group header or market/player row. */
.layout-pin-banner{padding:8px 12px 2px;font-size:11px;color:var(--mt);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.layout-pin-menu{position:fixed;z-index:10000;min-width:220px;background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.45);user-select:none}
.layout-pin-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--tx);font-size:13px;padding:10px 14px;border-radius:4px;cursor:pointer}
.layout-pin-menu-item:hover,.layout-pin-menu-item:focus{background:var(--bd);color:var(--yl);outline:none}
.layout-pin-menu-sep{height:1px;background:var(--bd);margin:4px 8px}

.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)}
}

/* ─── External bet tracking (Phase 1, desktop) ─────────────────────────── */
/* "+ Bet" trigger in the Positions header — inherits .pos-sort button pill. */
.eb-add-btn{color:#a5b4fc!important;border-color:rgba(99,102,241,.5)!important}
.eb-add-btn:hover{background:rgba(99,102,241,.15)!important;color:#c7d2fe!important}

/* External-bet rows in the Positions tab. */
.ext-bet-item .ext-bet-actions{display:flex;gap:3px;flex:0 0 auto;margin-left:6px}
.ext-bet-item .ext-bet-actions button{background:transparent;border:1px solid var(--bd);color:var(--mt);border-radius:5px;width:22px;height:22px;font-size:11px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.ext-bet-item .ext-bet-actions button:hover{border-color:var(--mt);color:var(--tx)}
.ext-book-badge{display:inline-block;background:rgba(99,102,241,.18);color:#a5b4fc;border:1px solid rgba(99,102,241,.4);border-radius:4px;font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 4px;vertical-align:middle;text-transform:uppercase}
.ext-net{color:#a5b4fc;font-weight:600}

/* Entry modal. */
.ext-bet-modal{width:min(560px,95vw);padding:22px}
.ext-bet-modal h2{font-size:18px;margin:0 0 4px}
.eb-field{margin-bottom:10px;display:flex;flex-direction:column}
.eb-field>label{font-size:11px;color:var(--mt);margin-bottom:4px;font-weight:600}
.eb-field input,.eb-field 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;box-sizing:border-box}
.eb-field input:focus,.eb-field select:focus{border-color:var(--ac)}
.eb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.eb-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.eb-link-name{color:#a5b4fc;font-weight:600}
/* Outcome picker — searchable, grouped list of the open event's Kalshi markets. */
.eb-outcome-list{max-height:230px;overflow-y:auto;border:1px solid var(--bd);border-radius:8px;background:var(--bg);margin-top:4px}
.eb-outcome-list:empty{display:none}
.eb-outcome-cat{position:sticky;top:0;background:var(--sf);color:var(--mt);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:5px 10px;border-bottom:1px solid var(--bd)}
.eb-outcome-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;font-size:12.5px;color:var(--tx);cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)}
.eb-outcome-row:hover{background:rgba(99,102,241,.12)}
.eb-oc-side{flex:0 0 auto;font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
.eb-oc-yes{background:rgba(16,185,129,.16);color:#6ee7b7;border:1px solid rgba(16,185,129,.4)}
.eb-oc-no{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.eb-outcome-empty{padding:10px;color:var(--mt);font-size:12px}
.eb-outcome-more{padding:7px 10px;color:var(--mt);font-size:11px;font-style:italic}
/* Selected-outcome chip shown once the operator picks one. */
.eb-selected{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:8px 10px;border:1px solid rgba(99,102,241,.45);background:rgba(99,102,241,.1);border-radius:8px}
.eb-sel-main{font-size:13px;color:var(--tx);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.eb-sel-sub{font-size:11px;color:var(--mt);font-weight:400;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eb-sel-clear{flex:0 0 auto;background:transparent;border:1px solid var(--bd);color:var(--mt);border-radius:5px;font-size:11px;padding:3px 8px;cursor:pointer}
.eb-sel-clear:hover{border-color:var(--rd);color:#fca5a5}
.eb-preview{margin-top:6px;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:rgba(0,0,0,.18)}
.eb-prev-row{display:flex;justify-content:space-between;font-size:12px;padding:2px 0;color:var(--mt)}
.eb-prev-row b{color:var(--tx)}
.eb-list-item .eb-list-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.eb-list-item .eb-list-actions button{background:transparent;border:1px solid var(--bd);color:var(--mt);border-radius:5px;font-size:10px;font-weight:600;padding:3px 8px;cursor:pointer}
.eb-list-item .eb-list-actions button:hover{border-color:var(--mt);color:var(--tx)}
.eb-list-item .eb-list-actions .eb-del:hover{border-color:var(--rd);color:#fca5a5}
.eb-list-item.eb-st-settled,.eb-list-item.eb-st-void{opacity:.72}
.eb-list-item.eb-st-void .fr-history-item-head b{text-decoration:line-through}