/* GTO UI - dark GTO-Wizard-like theme. Vanilla CSS, no external resources. */
:root {
  --bg: #0a0b0d; --panel: #111215; --panel2: #17181c; --panel3: #1e2025; --border: #2f323a; --text: #ffffff; --muted: #c4c8cf;
  --accent: #56c27d; --accent2: #2f8a55; --warn: #e0a030; --err: #e5534b; --cell: #24262b; --cell0: #1a1b1f; --sel: #ffd54a;
  --hdr-h: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 13px/1.35 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button, input, select { font: inherit; color: inherit; }
h2 { font-size: 14px; margin: 0; font-weight: 600; letter-spacing: .2px; }
h3 { font-size: 12.5px; margin: 14px 0 6px; font-weight: 600; color: #c3c7cf; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mt { margin-top: 10px; }
.msg { color: var(--muted); }
.msg.err { color: var(--err); }
.msg.ok { color: var(--accent); }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #34373e; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- header ---------- */
#hdr { display: flex; align-items: center; gap: 18px; height: var(--hdr-h); padding: 0 14px; background: #0b0c0e; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 58; }  /* above the popups (they open below it): the user badge menu stays visible */
.brand { font-weight: 800; font-size: 16px; letter-spacing: .4px; display: flex; align-items: center; gap: 7px; }
.brand .mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: #0b0c0e; font-size: 13px; }
.brand span:last-child:not(.mark) { color: var(--accent); font-weight: 600; margin-left: -5px; }
.appnav { display: flex; gap: 2px; }  /* app sections: Study (/) | Trainer (/train.html) */
.appnav a { color: var(--muted); text-decoration: none; padding: 4px 11px; border-radius: 6px; font-weight: 600; }
.appnav a:hover { color: var(--text); background: var(--panel2); }
.appnav a.on { color: #fff; background: var(--panel3); }
.tabs { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.tab { background: transparent; border: 0; padding: 4px 14px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 500; }
.tab.active { background: var(--panel3); color: #fff; }
.tab:disabled { opacity: .4; cursor: default; }
.gpubox { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 3px 5px 3px 10px; border-radius: 16px; font-size: 12px; }
.gpubox .dot { width: 9px; height: 9px; border-radius: 50%; background: #666; flex: none; }
.dot.off { background: #666; } .dot.launching, .dot.booting { background: var(--warn); animation: pulse 1s infinite alternate; }
.dot.ready { background: var(--accent); } .dot.stopping { background: var(--err); }
@keyframes pulse { from { opacity: 1; } to { opacity: .35; } }
.errbar { display: flex; align-items: center; gap: 10px; background: #4a1c1c; border-bottom: 1px solid #7a2c2c; color: #ffd4d0; padding: 6px 14px; }
.errbar span { flex: 1; white-space: pre-wrap; }

/* ---------- buttons / inputs ---------- */
.btn { background: var(--panel3); border: 1px solid #34373e; border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: #4b4f58; background: #30333a; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.small { padding: 2px 9px; font-size: 12px; }
.btn.big { padding: 8px 22px; font-size: 14px; font-weight: 600; }
.btn.primary { background: var(--accent2); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #36a062; }
.btn.danger { border-color: #7a3030; color: #ffb4ae; }
.btn.danger:hover:not(:disabled) { background: #5a2020; }
input[type=text], input[type=number], select { background: #0e0f12; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; }
input[type=text]:focus, input[type=number]:focus, select:focus { outline: none; border-color: var(--accent2); }
input:disabled { opacity: .6; }
input[type=number] { width: 120px; }
input[type=range] { accent-color: var(--accent); }
.form { display: flex; gap: 14px; flex-wrap: wrap; }
.form label { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 12px; }
.form input[type=text] { width: 130px; }
.inl { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.note { color: var(--muted); font-size: 12px; margin-top: 6px; }
.seg { display: inline-flex; background: var(--panel2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
.seg button { background: transparent; border: 0; border-radius: 5px; padding: 3px 11px; cursor: pointer; color: var(--muted); font-weight: 500; }
.seg button:hover { color: var(--text); }
.seg button.on { background: #3a3d45; color: #fff; }
.seg button:disabled, .seg button:disabled:hover { opacity: .35; color: var(--muted); cursor: default; }   /* cycle 51 NL: e.g. Hands on a turn node */
/* toggle switch (GTOW "apply same settings") on a real checkbox */
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); font-size: 12.5px; user-select: none; }
.toggle input { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; border-radius: 9px; background: #3a3d45; position: relative; cursor: pointer; margin: 0; flex: none; }
.toggle input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #cfd3da; }
.toggle input:checked { background: var(--accent2); }
.toggle input:focus { outline: none; }
.toggle input:focus-visible { box-shadow: 0 0 0 2px #56c27d66; }
.toggle input:checked::after { left: 16px; background: #fff; }

/* ---------- layout ---------- */
main { padding: 10px 14px 16px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
/* the range popup (user 17:51Z): below the strip (placeRangePop sets top / left / --rg), no backdrop; two square-cell grids of
   side --rg + a side column (the per-combo view, import / export scroll inside it; Cancel / Apply at its bottom) */
.rangepop { position: fixed; z-index: 45; }
.rbody { display: grid; grid-template-columns: auto 330px; gap: 14px; }
.range-cols { display: grid; grid-template-columns: var(--rg, 420px) var(--rg, 420px); gap: 12px; }
.range-cols > div { container-type: inline-size; min-width: 0; }
.range-cols .cell .lbl { font-size: 10px; }
.range-cols .cell .val { font-size: 9px; }
@container (max-width: 330px) { .range-cols .cell .val { display: none; } }
.rside { position: relative; min-height: 260px; }
.rside-in { position: absolute; inset: 0; display: flex; flex-direction: column; }
.rside-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.rfoot { margin-top: 8px; }
.rhover { min-height: 58px; color: var(--muted); }
.rtitle { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the per-combo view, text import / export (user 2026-09-28 ~00:35Z) */
.rdh { margin-bottom: 4px; color: var(--text); }
.rdh .muted { font-size: 11.5px; }
.rcombos { display: flex; flex-wrap: wrap; gap: 4px; }
.rcombo { position: relative; display: inline-flex; align-items: center; padding: 2px 7px 2px 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--cell); cursor: pointer; overflow: hidden; font-variant-numeric: tabular-nums; user-select: none; }
.rcombo i { position: absolute; left: 0; right: 0; bottom: 0; background: #c9a03a66; pointer-events: none; }
.rcombo .card { position: relative; font-size: 12px; }
.rcombo b { position: relative; margin-left: 5px; color: #fff; font-weight: 600; font-size: 12px; min-width: 2.2em; }
.rcombo.zero b { color: var(--muted); font-weight: 500; }
.rcombo:hover { border-color: #6a7080; }
.rio { margin-top: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.rio-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rio code, .rimprep code { background: #0e0f12; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 11.5px; }
.rio-main { display: flex; flex-direction: column; gap: 8px; }
.rio textarea { width: 100%; min-height: 72px; resize: vertical; background: #0e0f12; border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; font: 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); word-break: break-all; }
.rio textarea:focus { outline: none; border-color: var(--accent2); }
.rio-ctl { display: flex; flex-direction: column; gap: 6px; }
.rio-l { min-width: 66px; }
.rimprep:empty { display: none; }
.rimprep > div { margin: 7px 0 0; }
.rimprep > div > div { margin-top: 3px; }
.rimprep .rrej { color: #efd08c; }
.rimprep .rrej code { color: #ffc2bc; }

/* ---------- preflop ---------- */
.seats { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.seat { background: var(--panel2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 12px; }
.seat.actor { border-color: var(--accent); color: #fff; }
.seat.folded { opacity: .6; text-decoration: line-through; }
.warnbox { background: #33291a; border: 1px solid #5f4a1f; color: #efd08c; padding: 6px 9px; border-radius: 7px; margin: 6px 0; }
.errbox { background: #3d1b1b; border: 1px solid #7a2c2c; color: #ffc2bc; padding: 6px 9px; border-radius: 7px; margin: 6px 0; }
.okbox { background: #16301f; border: 1px solid #2a6b44; color: #b8ecd0; padding: 6px 9px; border-radius: 7px; margin: 6px 0; }

/* ---------- sizes (OOP / IP) ---------- */
.sizes { display: inline-grid; gap: 5px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.szrow { display: grid; grid-template-columns: 110px 150px 120px; gap: 8px; align-items: center; }
.szrow input[type=text] { width: 100%; }
.sizes.rr .szrow { grid-template-columns: 110px 150px 120px 100px; }
.sizes:not(.rr) .rrcol { display: none; }
.szhead span { color: var(--muted); font-size: 11.5px; }
.szname { font-weight: 600; }
.szname small { color: var(--muted); font-weight: 400; }
.sizes .toggle { margin-top: 3px; }

/* ---------- 13x13 grid ---------- */
.grid13 { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; background: #0c0d0f; border: 2px solid #0c0d0f; border-radius: 4px; user-select: none; }
.grid13 .cell { position: relative; aspect-ratio: 1.2 / 1; background: var(--cell); overflow: hidden; cursor: pointer; border-radius: 2px; }
.grid13.sq .cell { aspect-ratio: 1 / 1; }
.cell .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }
.cell .lbl { position: absolute; left: 4px; top: 2px; font-size: 11px; font-weight: 600; color: #f2f3f5; text-shadow: 0 0 3px rgba(0,0,0,.8); pointer-events: none; }
.cell .val { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }
.cell.dim { background: var(--cell0); }
.cell.dim .lbl { color: #8a8f98; text-shadow: none; }
.cell.hl { outline: 2px solid #fff; outline-offset: -2px; z-index: 1; }
.cell.sel::before, .cell.psel::before { content: ""; position: absolute; inset: 0; z-index: 2; border: 3px solid var(--sel); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.8); pointer-events: none; }  /* nodelock selection: a frame ON TOP of the strategy bars */
.cell.psel::before { border-style: dashed; }
.cell.sel .lbl, .cell.psel .lbl { z-index: 3; left: 6px; top: 3px; }
.cell.edited::after { content: ""; position: absolute; right: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--sel); box-shadow: 0 0 2px #000; }
.cell.sel.edited::after, .cell.psel.edited::after { right: 6px; top: 6px; z-index: 3; }
#bGrid .cell { aspect-ratio: 1.3 / 1; }
#bGrid .cell .lbl { font-size: clamp(11px, 1.05vw, 17px); font-weight: 500; }
#bGrid .cell .val { font-size: clamp(9px, .72vw, 12px); }
#bGrid .cell:hover:not(.dim) { outline: 1px solid #ffffffaa; outline-offset: -1px; }

/* ---------- cards ---------- */
.card { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75em; padding: 0 3px; border-radius: 3px; font-weight: 700; color: #fff; margin-right: 1px; line-height: 1.35; }
.s-s { background: #50545e; } .s-h { background: #c4302a; } .s-d { background: #2a64c8; } .s-c { background: #2a8f45; }
.card.big { font-size: 20px; width: 38px; height: 48px; border-radius: 6px; margin-right: 4px; }
.card.board { flex-direction: column; font-size: 22px; width: 34px; height: 46px; border-radius: 6px; margin-right: 3px; line-height: 1; gap: 1px; box-shadow: inset 0 -12px 18px rgba(0,0,0,.15); }
.card.board i { font-style: normal; font-size: 11px; opacity: .85; }
.cardpick { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; max-width: 560px; }
.cardpick button { border: 2px solid transparent; border-radius: 5px; color: #fff; font-weight: 700; padding: 5px 0; cursor: pointer; font-size: 13px; }
.cardpick button.on { border-color: #fff; box-shadow: 0 0 0 2px var(--sel); }
.cardpick button:disabled { opacity: .18; cursor: default; }
.cardpick button:hover:not(:disabled) { filter: brightness(1.2); }

/* ---------- browser: top strip of node cards (GTOW) ---------- */
#pageBrowser { --strip-h: 156px; position: relative; }   /* user 17:49Z: 7 actions per decision card, also with the strip's scrollbar */
.strip { display: flex; gap: 6px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; height: var(--strip-h); }
.ncard { --nw: 95px; --np: 4px; --nap: 3px; --nhg: 4px; --nlw: 20px; --nlm: 3px; flex: none; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px var(--np); width: var(--nw); min-width: var(--nw); max-width: var(--nw); display: flex; flex-direction: column; cursor: pointer; }   /* cycle 66 NW: ONE fixed width per card type (--nw; see the end of the file); cycle 85 AW: the postflop decision card 136 -> 95 (its paddings / gaps = the --n* variables) */
.ncard:hover { border-color: #444851; }
.ncard.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; cursor: default; }
.ncard .nh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nhg); font-weight: 700; font-size: 12.5px; margin-bottom: 3px; white-space: nowrap; }
.ncard .nh .pos { color: #cfd2d8; }
.ncard.cur .nh .pos, .ncard.cur .nh .stk { color: var(--accent); }
.ncard .nh .stk { color: #aeb2ba; font-weight: 600; }
.ncard .nl { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.ncard .na { display: flex; justify-content: space-between; gap: 8px; padding: 0 var(--nap); border-radius: 4px; font-size: 12.5px; line-height: 16px; color: #8f939b; white-space: nowrap; cursor: pointer; }
.ncard .na:hover { color: #fff; background: #2a2c32; }
.ncard.cur .na { color: #e8eaee; }
.ncard .na.on { background: #34373e; color: #fff; font-weight: 600; }
.ncard .na .amt { color: #aeb3bb; font-size: 11px; }
.ncard .na.on .amt, .ncard.cur .na .amt { color: #a9adb5; }
.ncard .nclk { margin: -3px 0 -3px var(--nlm); width: var(--nlw); height: 20px; padding: 0; border: 1px solid #5b5f69; border-radius: 5px; background: #2a2c32; color: #d5d8de; cursor: pointer; vertical-align: middle; display: inline-grid; place-items: center; }
.ncard .nclk svg { width: 12px; height: 12px; }
.ncard .nclk:hover { color: var(--sel); border-color: var(--sel); }
.ncard .nclk.on { background: var(--sel); border-color: var(--sel); color: #1d1d1d; }
.ncard .nclk.on:hover { background: #ffe07a; border-color: #ffe07a; color: #1d1d1d; }
.ncard .nlks { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 21px; margin: 4px 0; padding: 0 8px 0 6px; border: 1px solid var(--sel); border-radius: 5px; background: var(--sel); color: #1d1d1d; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.ncard .nlks svg { width: 12px; height: 12px; }
.ncard .nlks:hover { background: #ffe07a; border-color: #ffe07a; }
.nlkpop { position: fixed; z-index: 49; min-width: 180px; max-width: 420px; max-height: 60vh; overflow-y: auto; background: #1d1f24; border: 1px solid #45484f; border-radius: 8px; padding: 4px; box-shadow: 0 10px 34px rgba(0,0,0,.65); }
.nlkrow { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 5px; font-size: 12.5px; color: #d5d8de; white-space: nowrap; cursor: pointer; }
.nlkrow svg { width: 12px; height: 12px; flex: none; color: var(--sel); }
.nlkrow:hover { background: #2a2c32; color: #fff; }
.nlkrow.cur { color: var(--accent); }
.ncard.spot { cursor: default; }
.ncard.spot .nt { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.ncard.street { --nw: 112px; }
.ncard.street .nh { color: #cfd2d8; }
.ncard.street .bc { display: flex; align-items: center; flex: 1; }
.ncard.ghost { --nw: 100px; border-style: dashed; color: var(--muted); justify-content: center; align-items: center; cursor: default; font-size: 12px; text-align: center; overflow: hidden; }

/* ---------- browser: main ---------- */
.bmain { display: grid; grid-template-columns: auto minmax(380px, 1fr); gap: 12px; align-items: start; }
.bleft { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 8px; }
.gtools { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.bleft #bGrid { width: max(440px, min(calc((100vh - var(--hdr-h) - var(--strip-h) - 124px) * 1.3), 57vw)); }   /* cycle 57: -18 px for the "Looks wrong?" row under the grid */
#bGridNote { min-height: 0; margin-top: 4px; }
.bright { display: flex; flex-direction: column; gap: 8px; min-width: 0; height: calc(100vh - var(--hdr-h) - var(--strip-h) - 36px); min-height: 480px; }
.metarow { display: flex; align-items: flex-start; gap: 10px; }
.binfo { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 12px; color: #b9bdc5; min-width: 0; }
.binfo b { color: #fff; font-weight: 600; }
.binfo .street { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); background: #1c3527; border-radius: 5px; padding: 1px 7px; }
.rpanel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px 10px; }
.rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.rh { font-weight: 700; font-size: 13px; }
.bactor { color: #b9bdc5; font-size: 12px; }
.bactor b { color: #fff; }
.aboxes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 5px; }
.abox { position: relative; border-radius: 7px; padding: 6px 9px 5px; color: #fff; cursor: pointer; min-height: 66px; border: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 -20px 30px rgba(0,0,0,.12); }
.abox:hover:not(.end) { border-color: rgba(255,255,255,.75); }
.abox.end { cursor: default; }
.abox .at { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.abox .al { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abox .al small { font-weight: 500; font-size: 11.5px; opacity: .85; margin-left: 2px; }
.abox .an { font-size: 10.5px; opacity: .8; white-space: nowrap; }
.abox .ab { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.abox .ap { font-size: 24px; font-weight: 600; line-height: 1.05; letter-spacing: -.3px; }
.abox .alk { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -3px 0 -3px 8px; vertical-align: -1px; border-radius: 6px; background: rgba(0,0,0,.45); color: var(--sel); }
.abox .alk svg { width: 20px; height: 20px; }
.abox .ac { font-size: 12px; text-align: right; line-height: 1.1; opacity: .92; }
.abox .ac small { display: block; font-size: 9.5px; opacity: .8; }
.mixbar { height: 8px; border-radius: 3px; background: #2e3036; margin-top: 7px; }
.mixbar.big { height: 12px; border-radius: 3px; }
.mixbar.mini { height: 9px; width: 80px; margin: 0; }
.endbox { padding: 16px; text-align: center; color: var(--muted); grid-column: 1 / -1; }

.hdhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hdsum { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 5px; font-size: 12px; color: #b9bdc5; }
.hdsum b { color: #fff; }
table.hd { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
table.hd th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 500; text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.hd th.sort { cursor: pointer; }
table.hd th.sort:hover { color: #fff; }
table.hd th.sorted { color: #fff; }
table.hd td { padding: 3px 6px; text-align: right; border-bottom: 1px solid #222428; white-space: nowrap; }
table.hd td:first-child, table.hd th:first-child, table.hd th.l { text-align: left; }
table.hd tr.zero td { opacity: .6; }
table.hd tbody tr:hover td { background: #1f2126; }

/* summary tab */

/* ---------- locks ---------- */

/* ---------- job panel ---------- */
.jobpanel { position: fixed; right: 14px; bottom: 14px; width: 380px; background: #1d1f24; border: 1px solid #3a3d45; border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.55); z-index: 40; }
.jobpanel .jt { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.jobpanel .st { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #3a3d45; text-transform: uppercase; }
.st.queued { background: #5a4a1e; } .st.running { background: #1f4a7a; } .st.done { background: #1f5a3e; } .st.error { background: #7a2c2c; }
.jobpanel .jl { color: #c5c9d1; font-size: 12px; margin: 2px 0; }
.jobpanel .jerr { color: #ffb4ae; white-space: pre-wrap; margin-top: 4px; }
.pbar { height: 6px; background: #2c2f36; border-radius: 3px; overflow: hidden; margin: 6px 0 2px; }
.pbar > div { height: 100%; background: var(--accent); transition: width .4s; }
.pbar.indet > div { width: 30% !important; animation: indet 1.2s infinite linear; background: var(--warn); }
@keyframes indet { from { margin-left: -30%; } to { margin-left: 100%; } }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-top: 36px; overflow: auto; }
.modal-box { background: #1a1b1f; border: 1px solid #33363d; border-radius: 12px; padding: 12px 16px 16px; min-width: 520px; max-width: 96vw; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.mhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.mhead h2 { font-size: 15px; }
.lg { display: inline-block; margin-right: 12px; white-space: nowrap; }
.lg .sw, .slrow .sw, .frow .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* lock dialog (GTOW "Set Frequencies": sidebar + current strategy grid) */
.lkbody { display: grid; grid-template-columns: 350px minmax(460px, 640px); gap: 16px; align-items: start; }
.lkside { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.lkside h3:first-child { margin-top: 0; }
.lkside .seg { width: 100%; }
.lkside .seg button { flex: 1; }
.lkright .lkgh { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-weight: 600; }
.lkright .mixbar { margin: 0 0 6px; height: 7px; }
.slrow { display: grid; grid-template-columns: 96px 1fr 58px 14px; align-items: center; gap: 7px; margin: 5px 0; font-size: 12px; }
.slrow input[type=range] { width: 100%; }
.slrow input[type=number] { width: 58px; }
.frow { display: grid; grid-template-columns: 100px 1fr 62px 12px 26px; align-items: center; gap: 6px; margin: 6px 0; font-size: 12.5px; }
.frow .fl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow input[type=range] { width: 100%; }
.frow input[type=number] { width: 62px; }
.frow.free input[type=range] { opacity: .35; }
.frow.free .fl { color: var(--muted); }
.frow input[type=number]::placeholder { color: #9aa0a8; font-style: italic; }
.pin { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: #aeb3bb; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pin svg { width: 13px; height: 13px; }
.pin:hover { color: #fff; border-color: #4b4f58; }
.pin.on { color: #222; background: var(--sel); border-color: var(--sel); }
.finfo { font-size: 12px; margin: 8px 0 4px; min-height: 18px; }
.finfo:empty { min-height: 0; margin: 4px 0; }
.combolist { max-height: 170px; overflow: auto; border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px; margin-top: 4px; background: #16171a; }
.combolist label { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.combolist .ed { color: var(--sel); font-size: 11px; }
.radios label { display: block; margin: 3px 0; font-size: 12px; }
.lkmsg { margin-top: 8px; min-height: 18px; }
.sizes.dlg .szrow { grid-template-columns: 90px 130px 110px; }
.sizes .szriver { margin-top: 4px; }

/* ---------- grades ---------- */
details.grades > summary { cursor: pointer; }
table.gr { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 6px; }
table.gr th, table.gr td { padding: 4px 6px; border-bottom: 1px solid #26282d; text-align: left; vertical-align: top; }
table.gr th { color: var(--muted); font-weight: 500; }
table.gr tr.cur td { background: #1b2a21; }
table.gr .st { font-size: 10.5px; padding: 0 6px; border-radius: 8px; background: #3a3d45; text-transform: uppercase; }
table.gr .pbar { margin: 4px 0 0; max-width: 220px; }
.gerr { color: var(--err); }
.gtow { color: #9fe3c0; }
#bActions2 .btn { white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel3); border: 1px solid #3a3d45; border-radius: 12px; padding: 1px 8px; font-size: 12px; }

/* ---------- (cycle 54: the "Practice this spot" popup (play.js) is gone -- "Play this spot" opens the trainer; kept: shared rules) ---------- */
.pend { font-size: 14px; padding: 6px 12px; border-radius: 8px; }
.pend.win { background: #1f4d30; } .pend.lose { background: #4d1f1f; }
.pbar { display: inline-block; height: 8px; background: var(--accent); border-radius: 2px; vertical-align: middle; }
.grade { padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; margin: 0 4px; }
.g-best { background: #2f8a55; } .g-good { background: #4d7a2f; } .g-ok { background: #4d7a2f; } .g-inaccuracy { background: #8a7a2f; }
.g-mistake { background: #a0522d; } .g-blunder { background: #a02d2d; }

/* ---------- cycle 14 UI round (user 2026-09-27 ~22:55Z): one study screen + popups, board editing, nodelock editor ---------- */
.jobpanel { z-index: 40; }  /* under the popups: every popup that starts a job closes itself */
.ovl { z-index: 45; }
.modal.ovl { top: var(--hdr-h); }  /* cycle 14: popups open below the header (Study / Trainer / GPU / Log out stay usable, as GTOW) */
#modal { z-index: 55; top: var(--hdr-h); }
.rangebox { min-width: 0; max-width: calc(100vw - 16px); overflow-y: auto; }
.gradesbox { width: min(860px, 94vw); }
.detailpanel { flex: 1; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }
.detailpanel .handdetail { flex: 1; min-height: 0; overflow: auto; }
.toolrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ncard .nbtns { display: flex; gap: 4px; margin-top: auto; }
.card.board.edit { cursor: pointer; transition: transform .08s; }
.card.board.edit:hover { outline: 2px solid var(--sel); outline-offset: 1px; transform: translateY(-1px); }
/* the deck popup (user UI directive 2): below the strip, the flop slots / turn / river card */
.boardpop { position: fixed; z-index: 48; width: 580px; background: #1d1f24; border: 1px solid #45484f; border-radius: 10px; padding: 10px 12px 12px; box-shadow: 0 10px 34px rgba(0,0,0,.65); overflow-y: auto; }
#bpSlots { display: flex; gap: 6px; }
.boardpop .sizes { display: grid; }
.bpslots { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.bpslot { display: inline-flex; border-radius: 7px; padding: 2px; border: 2px solid transparent; cursor: pointer; }
.bpslot .card.big { margin-right: 0; }
.bpslot.ph { width: 44px; height: 54px; border: 2px dashed #4a4e58; }
.bpslot.on { border-color: var(--sel); border-style: solid; }
.boardpop .cardpick { max-width: none; }
/* cycle 57 FP (USER_NOTES "flop-selection popup" item 2): the flop popup's button (Calculate flop / Solve new flop) at its bottom
   right, its messages to its left */
.bpfoot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.bpfoot .calcbox { flex: 1; min-width: 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; cursor: default; }
.bpfoot .calcbox #solveBtn { flex: none; }
.bpfoot .calcbox .msg:empty, .bpfoot .calcbox #spotWarn:empty, .bpfoot .calcbox #treeEst:empty { display: none; }
.bpfoot .calcbox .msg, .bpfoot .calcbox .errbox, .bpfoot .calcbox .warnbox { font-size: 12px; line-height: 1.3; margin: 0; text-align: right; }
/* nodelock editor */
.modal-box.lockdlg { width: min(1240px, 97vw); }
.modal-box.plolock { width: min(520px, 97vw); } .plolock .plk .mixbar { margin: 4px 0 8px; }   /* cycle 79 PN: the PLO nodelock (totals only) */
.plo-col .plo-colhead .big .plo-lkm { color: var(--sel); margin: 0 auto 0 6px; font-size: 0; align-self: center; } .plo-colhead .plo-lkm svg { width: 12px; height: 12px; }
/* cycle 44 (USER_NOTES 14:57Z, GTOW Set Frequencies): painting sliders | vertical hand-class list | grid */
.lockdlg .lkbody { grid-template-columns: 310px 262px minmax(420px, 1fr); gap: 14px; }
.lockdlg .frow { grid-template-columns: 92px 1fr 58px 12px 26px; }
.lockdlg .frow input[type=number] { width: 58px; }
details#lkAdv { margin-top: 10px; }
details#lkAdv summary { cursor: pointer; }
.leash { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 7px; align-items: center; margin: 7px 0 3px; }
.leash input[type=range] { width: 100%; }
.leash b { font-size: 12px; white-space: nowrap; }
.lkright .lktg { margin-top: 2px; }
.lkfoot { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.lkscope label { display: block; margin: 3px 0; font-size: 12.5px; cursor: pointer; }
.lkscope input { margin-right: 6px; }
.lkfoot .lkmsg { margin-top: 0; max-width: 360px; }
.lockdlg #lkGrid { width: min(100%, calc((100vh - 290px) * 1.2)); min-width: 380px; }   /* editor + scope / Apply fit one screen */
.lockdlg { margin-bottom: 20px; }

/* ---------- cycle 21 (user 2026-09-28 ~15:15Z): the preflop line + the Flop step in the study page's strip ---------- */
.ncard.spot select { font-weight: 700; padding: 1px 4px; }
.ncard.pf { --nw: 100px; }
.ncard.seat { border-style: dashed; color: var(--muted); }
.ncard.seat .nh .pos { color: var(--muted); }
.ncard.seat:hover { border-color: #6a7080; }
.ncard.seat:hover .nh .pos { color: var(--text); }
.ncard.flopstep .card.board.ph { background: transparent; border: 1px dashed #4a4e58; box-shadow: none; }
.setright { overflow-y: auto; }
/* cycle 22 (user UI directive 2): the Flop step's page = the spot line + Calculate; the settings are a popup (FLOP card's Settings) */
.setright { height: auto; min-height: 0; width: min(560px, 100%); }
.setcalc #spotWarn:empty, .setcalc #treeEst:empty { display: none; }
.setcalc .errbox, .setcalc .warnbox { margin: 8px 0 0; }
#setModal { position: fixed; z-index: 45; }   /* below the strip (placeSetPop sets top / left), no backdrop: the strip stays undimmed */
.setbox { min-width: 0; width: min(540px, 96vw); overflow-y: auto; }
.setgrid { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 6px 8px; align-items: center; }
.setgrid input[type=text] { width: 100%; }
/* cycle 82 SZ: a size field that breaks a rule shown at the field (no bet below 1 bb): Settings, the turn popup, PLO Settings */
#bInfo .xnote { color: var(--warn); font-size: 12px; }
input.szbad, input.szbad:focus { border-color: var(--err); outline: 1px solid var(--err); outline-offset: -1px; }
.setrow { margin-top: 10px; gap: 14px; }
.setrow input[type=number] { width: 80px; }
/* cycle 76 PS: the Presets row at the top of the flop Settings (Hold'em + PLO; presets.js): fixed height, the select takes the width
   left (its options never resize it) -> no layout change while the list loads or a preset loads / saves */
.psrow { display: flex; gap: 6px; align-items: center; height: 28px; margin: 0 0 10px; }
.psrow .pssel { flex: 1 1 0; width: 0; min-width: 0; height: 26px; padding: 2px 6px; }
.psrow .btn { flex: none; height: 26px; }
#setMsg { flex: 1; min-width: 0; }
/* cycle 75 helper AM: the turn / river menu of the flop solve (two radios, each menu in words) */
.avmrow { margin-top: 12px; }
.avmrow[hidden] { display: none; }
.avmopt { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; font-size: 13px; line-height: 1.35; cursor: pointer; }
.avmopt input { flex: none; margin: 2px 0 0; }
/* cycle 26: Tournament / ICM (the FLOP card's Tournament button, its popup, the ICM mark, the ICM | chip EV switch + equity line) */
/* cycle 39: the Tournament (ICM) section of the Settings popup (off = the checkbox only) */
.toursec { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.toursec .tourgrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; margin-top: 8px; color: var(--muted); }
.toursec .tourgrid span { padding-top: 5px; }
.tourpayc { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#tourPreset { align-self: flex-start; max-width: 100%; background: #0e0f12; color: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; font: inherit; }
#tourPay { width: 100%; min-height: 32px; resize: vertical; background: #0e0f12; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font: inherit; color: inherit; }
.tourrow { margin-top: 8px; gap: 14px; }
.tourseats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin-top: 8px; }
.tseat { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tseat .tsl { width: 66px; flex: none; color: var(--muted); white-space: nowrap; }
.tseat .num { width: 76px; flex: none; }
.tseat.thd span.num { font-size: 11.5px; color: var(--muted); padding-left: 2px; }
.tseat.touroth { grid-column: 1 / -1; }
.tseat.touroth input { flex: 1; width: auto; min-width: 0; }
.toursec:not(.bty) .tb, .toursec:not(.bty) .tseat.thd { display: none; }   /* the Stack / Bounty header only with bounties */
.toursec.field .oth { display: none; }
.toursec:not(.bty) .tpko { display: none; }   /* cycle 42 helper I: KO type + bounty pool only with bounties */
.tpko select { background: #0e0f12; color: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 2px 4px; font: inherit; }
.tpkonote { margin-top: 6px; font-size: 12px; color: var(--muted); opacity: .8; }
.binfo .icmeq .icmf { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.binfo .icmeq .icmf b { color: inherit; font-weight: 700; }
.tmk { font-style: normal; font-size: 10px; font-weight: 800; color: #1d1d1d; background: var(--sel); border-radius: 4px; padding: 0 4px; }
.tourfield { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.tourfield input { width: 76px; }
.ncard .icmmk { font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #1d1d1d; background: var(--sel); border-radius: 4px; padding: 0 4px; margin-left: 6px; line-height: 15px; }
.binfo .icmsw button { padding: 1px 8px; font-size: 11px; }
.binfo .icmsw button:disabled { opacity: .45; cursor: default; }
.binfo .icmeq { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.binfo .icmeq i { font-style: normal; color: var(--muted); }
.binfo .icmeq .icmt { color: var(--sel); font-weight: 700; }
button:disabled[title] { pointer-events: auto; }
.jobpanel .jicm.sep { border-top: 1px solid #3a3d45; margin-top: 8px; padding-top: 8px; }
.ncard.flopstep, .ncard.street[data-li="0"] { --nw: 132px; --np: 4px; }   /* Settings / Ranges in one row (cycle 66 NW: one fixed width; cycle 85 AW: 152 -> 132 = the smallest for 3 board cards (122 px) + the two buttons) */

/* ---------- cycle 39 (USER_NOTES 09:46Z TREE SELECTOR): the leftmost card, vertically: 6-max | HU, the stack dropdown (NL stacks +
   "FL 100bb"), the FL rake below it (FL only); replaces the NL | FL toggle. One fixed width: the strip does not move on a switch */
.ncard.spot.treecard { --nw: 168px; gap: 4px; }
/* USER_NOTES 10:12Z: 6-max | HU = ONE row, two segments side by side (the rest of the card stays vertical) */
.treecard .vseg { display: flex; flex-direction: row; flex: none; gap: 2px; }
.treecard .vseg button { flex: 1 1 0; padding: 1px 6px; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; }
.ncard.spot.treecard select { width: 100%; flex: none; height: 22px; padding: 0 4px; font-size: 12.5px; }
.treecard .rkc, .treecard .rkc input[type=number] { height: 20px; }
.binfo .flmk { font-weight: 800; font-size: 11px; letter-spacing: .6px; color: #1d1d1d; background: var(--sel); border-radius: 4px; padding: 0 5px; }
/* cycle 39: the FL rake select (+ Custom's rake % / cap bb) in the tree card; the rake in the FL result header */
.treecard .rkc { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: #aeb2ba; white-space: nowrap; }
.treecard .rkc input[type=number] { width: 46px; padding: 1px 4px; font-weight: 700; }
.treecard .rkc input.bad { border-color: #d0453d; }
.treecard .rkpf { font-size: 11px; font-weight: 600; color: #8f939b; white-space: nowrap; }
/* cycle 67 SB: the effective stack below the stack select when it differs from the line's ("100bb" / "eff 20bb"; the card's
   fixed width: ellipsis, never wider) */
.treecard .stkeff { flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 15px; font-weight: 700; color: var(--sel); padding-left: 4px; }
.binfo .flrk { font-size: 12px; font-weight: 600; color: #cfd2d8; }

/* cycle 39: the non-admin GPU pill = "GPU warming up" + a small progress bar */
.pbar.gpuwarm { display: inline-block; width: 80px; height: 6px; margin: 0 0 0 8px; background: #2c2f36; border-radius: 3px; overflow: hidden; vertical-align: middle; }
.pbar.gpuwarm > span { display: block; height: 100%; background: var(--accent); transition: width .4s; }

/* cycle 39: the footer "Privacy" link (the usage log note, /privacy.html) */
.privlink { position: fixed; left: 8px; bottom: 3px; z-index: 5; font-size: 11px; color: #aeb3bb; text-decoration: none; }
.privlink:hover { color: #aaa; text-decoration: underline; }

/* ---------- cycle 43 (USER_NOTES 11:18Z): multi-flop reports (reports.js): the report view (#pageReport: the strip with MULTI-FLOPS
   + the flop table), the launcher popup, the reports list (#pageReports) ---------- */
#pageReport { --strip-h: 156px; }
.ncard.pf.ro, .ncard.pf.ro .na, .ncard .na.end { cursor: default; }
.ncard.pf.ro .na:not(.on):hover, .ncard .na.end:not(.on):hover { background: transparent; color: #8f939b; }
.ncard.rtk { cursor: default; --nw: 168px; }
.ncard.rtk .rtks { font-weight: 700; font-size: 12.5px; }
.ncard.rmf { --nw: 132px; --np: 4px; }
.ncard.rmf .bc { justify-content: center; }
.mflops { font-weight: 800; font-size: 15px; letter-spacing: 1px; color: var(--accent); }
.rbar { height: 6px; background: #2c2f36; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.rbar > div { height: 100%; background: var(--accent); transition: width .4s; }
.rhead2 { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; min-height: 22px; }
.rhead2 .rname { font-size: 14px; }
.rhead2 .rpbar { width: 180px; margin: 0; }
.rtwrap { width: fit-content; max-width: 100%; overflow: auto; max-height: calc(100vh - var(--hdr-h) - var(--strip-h) - 64px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
table.rtab { border-collapse: separate; border-spacing: 0; width: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.rtab th { position: sticky; top: 0; z-index: 2; height: 32px; background: var(--panel2); color: #c3c7cf; font-weight: 600; text-align: right; padding: 5px 14px; border-bottom: 3px solid #3a3d45; white-space: nowrap; }
table.rtab th.sort { cursor: pointer; user-select: none; }
table.rtab th.sort:hover, table.rtab th.sorted { color: #fff; }
table.rtab .l { text-align: left; }
table.rtab td { padding: 4px 14px; text-align: right; border-bottom: 1px solid #222428; white-space: nowrap; }
table.rtab tr.ragg td { position: sticky; top: 32px; z-index: 1; background: #1d2620; font-weight: 700; border-bottom: 1px solid #36453b; }
table.rtab tbody tr.rok { cursor: pointer; }
table.rtab tbody tr.rok:hover td { background: #23262c; }
table.rtab td.ra { position: relative; min-width: 64px; }
table.rtab td.ra i { position: absolute; right: 14px; bottom: 2px; height: 3px; max-width: calc(100% - 28px); border-radius: 2px; }
table.rtab td.rmix, table.rtab td.rb { min-width: 0; }
table.rtab td.rmix div { width: 120px; height: 10px; border-radius: 3px; }
table.rtab th.rmixh { cursor: default; }
table.rtab td.rb .card { font-size: 12.5px; }
/* cycle 43 RR: the multi-river report (rivers.js) */
.boardpop .rvlaunch { align-items: center; gap: 10px; }
.rvhand { display: inline-flex; align-items: center; gap: 6px; }
.rvhand input { width: 64px; text-transform: none; letter-spacing: .5px; }
.rvhand input.bad { border-color: #e05a5a; box-shadow: 0 0 0 1px #e05a5a inset; }   /* cycle 54: not a hand filter */
table.rtab tr.rout td, table.rtab tr.rst td { color: #9aa0a8; }
.rvmsg { padding: 14px 18px; }
.modal-box.rlbox { min-width: 0; width: 420px; }
.rlbox #rlName { width: 100%; }
.rlbox .rlest { font-weight: 600; }
.rlbox #rlMsg { margin-top: 6px; }
.rlprog .rlname { font-weight: 600; }
.rpage { max-width: 1500px; }
.rsec { margin-bottom: 18px; }
.rsec h3 { font-size: 13px; margin: 4px 0 8px; color: var(--text); }
table.rlist { border-collapse: collapse; width: 100%; font-size: 12.5px; background: var(--panel); border: 1px solid var(--border); }
table.rlist th { color: var(--muted); font-weight: 500; text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.rlist td { padding: 5px 8px; border-bottom: 1px solid #222428; }
table.rlist td.n { text-align: right; }
table.rlist tbody tr[data-id] { cursor: pointer; }
table.rlist tbody tr[data-id]:hover td { background: #1f2126; }
table.rlist td.rn { font-weight: 600; }
table.rlist tr.none td { color: var(--muted); }
table.rlist .rbtns { white-space: nowrap; text-align: right; }
table.rlist .rbtns .btn { margin-left: 4px; }
table.rlist .rs { white-space: nowrap; }
table.rlist .lpbar { display: inline-block; width: 90px; margin: 0 6px 0 0; vertical-align: middle; }
/* the board popup's "Multi-flop report" mode (cycle 57 FP: "Calculate flop" is never in the FLOP card: .bpfoot) */
.linkbtn { background: none; border: 0; padding: 0; color: #6fb3ff; cursor: pointer; font: inherit; font-size: 13px; }
.linkbtn:hover { text-decoration: underline; }
.rlpop { width: 100%; }
.rlpop .rlhead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rlpop .rlmenu { margin-top: 8px; font-size: 12px; }
.rlpop .rlest { font-weight: 600; }
.rlpop #rlMsg { margin-top: 6px; }
/* user 12:19Z: while a preflop line loads, the previous strip / action boxes stay on screen (no blank card) but take no clicks */
body.pfload #bStrip .ncard.pf, body.pfload #bStrip .ncard.street, body.pfload #aBoxes { pointer-events: none; }
/* cycle 43 helper K / cycle 44: the nodelock hand classes, one row each (GTOW "Hand Classes") */
.lkmid { background: var(--panel2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 8px; }
.lkmid .seg { width: 100%; margin-bottom: 6px; }
.lkmid .seg button { flex: 1; }
.lkcats { display: flex; flex-direction: column; }
.lkgrp { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 3px; }
.lkgrp:first-child { margin-top: 2px; }
.lkcat { display: grid; grid-template-columns: 1fr 12px 54px 42px; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.lkcat:hover { background: var(--panel3); }
.lockdlg.nohands .lkcat { cursor: default; } .lockdlg.nohands .lkcat:hover { background: none; } .lockdlg.nohands #lkGrid .cell { cursor: default; }   /* cycle 51 NL: turn node: no hand picks */
.lkcat.on { background: rgba(255, 204, 0, .16); box-shadow: inset 3px 0 0 var(--sel); }
.lkcat .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkcat .lk { color: var(--sel); display: grid; place-items: center; }
.lkcat .lk svg, .combolist .ed svg { width: 11px; height: 11px; }
.lkcat .mixbar.mini { width: 54px; height: 8px; margin: 0; }
.lkcat .pc { text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.lkcap { font-size: 12px; font-weight: 600; margin: 10px 0 0; }
#lkPaintBar { margin: 4px 0 4px; height: 7px; }
.lkmid .combolist { max-height: none; border: 0; padding: 0; margin: 0; background: transparent; }
/* user 14:04Z item 1: the next street's card, empty until its card is picked (the deck popup opens at it) */
.ncard.street.pend .card.board.ph { background: transparent; border: 1px dashed #4a4e58; box-shadow: none; }
/* cycle 44 RL: the river aggregate lock in the river report (rivers.js): the action boxes beside the table, the lock popup */
.rvbody { display: flex; gap: 12px; align-items: flex-start; }
.rvbody > .rtwrap { flex: 0 1 auto; min-width: 0; }
.rvside { flex: 0 1 540px; min-width: 340px; }
.rvab .ab { flex-wrap: nowrap; }
.rvab .ap { white-space: nowrap; }
.rvab .ac { flex: none; }
.rvside:empty { display: none; }
.rtwrap.rvbusy { opacity: .6; }
.abox .rvlk { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -3px 0 -3px 6px; padding: 0; vertical-align: -1px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.3); color: #fff; cursor: pointer; }
.abox .rvlk svg { width: 16px; height: 16px; }
.abox .rvlk:hover:not(:disabled) { border-color: var(--sel); color: var(--sel); }
.abox .rvlk.on { border-color: transparent; background: rgba(0,0,0,.45); color: var(--sel); }
.abox .rvlk.on svg { width: 20px; height: 20px; }
.abox .rvlk:disabled { opacity: .6; cursor: default; }
.rlkpop { position: fixed; z-index: 49; width: 320px; background: #1d1f24; border: 1px solid #45484f; border-radius: 8px; padding: 10px 12px; box-shadow: 0 10px 34px rgba(0,0,0,.65); }
.rlkrow { display: grid; grid-template-columns: 10px 1fr 70px auto; gap: 8px; align-items: center; margin: 5px 0; }
.rlkrow i { width: 10px; height: 10px; border-radius: 2px; }
.rlkrow small { color: #aeb3bb; }
.rlkrow input { width: 70px; text-align: right; }
.rlkpop .rlkbtns { justify-content: flex-end; gap: 6px; margin-top: 8px; }
.rlkpop #rlkMsg:empty { display: none; }
table.rtab td.rlkc span svg { width: 11px; height: 11px; color: var(--sel); vertical-align: -1px; margin-right: 4px; }
table.rtab td.rlkc small { font-weight: 500; color: #d0d4da; }
/* cycle 44 (user 15:43Z item 3): "Play a hand" = a primary button in the top bar, always visible */
#hdr .playhand { margin-right: 12px; padding: 6px 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* cycle 44 (user 16:02Z): the acting range's EV / equity below the action buttons; the hand table's class-total top row */
.astats { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.astats b { color: var(--text); }
table.hd tr.hdtot td { font-weight: 700; border-bottom: 1px solid var(--border); background: var(--panel2); }
table.hd tr.hdtot .mixbar.mini { width: 100%; min-width: 80px; height: 10px; }
/* cycle 51 (user 16:13Z): a TURN / RIVER card whose solve runs: a thin progress bar at its foot (sliding while the progress is
   unknown; red after an error = click the card for the message + Retry); the action boxes of the street before it ignore clicks
   meanwhile (they are not the new street's) */
.ncard.street.run { position: relative; }
.ncard .nprog { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 2px; background: #2f323a; overflow: hidden; }
.ncard .nprog > div { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.ncard .nprog.indet > div { animation: nprogSlide 1.1s ease-in-out infinite; }
.ncard .nprog.err > div { background: #e5534b; width: 100%; animation: none; }
@keyframes nprogSlide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
body.nsload #aBoxes { pointer-events: none; opacity: .55; }
.ncard.street.pend { padding: 6px 8px; font-size: inherit; }   /* not the trainer's result-banner .pend (it made the slot 8 px wider than the card it becomes) */
/* cycle 51 (user 18:51Z): the river report's ALL RIVERS card lock (yellow while an average lock is active) + the chain option */
.ncard.rvall .nclk { margin-left: 4px; }
.rlkpop .rlkchain { margin: 6px 0 2px; font-size: 12px; }
.rlkpop { width: 390px; }   /* cycle 54: slider + number + pin per action (makeFreqPins), no leash */
.rlkpop .frow { grid-template-columns: 112px 1fr 56px 12px 26px; }
.rlkpop .frow input[type=number] { width: 56px; }
.rlkwarn { margin-top: 6px; font-size: 12px; color: #f0c05a; }
/* cycle 54 (USER_NOTES 23:1xZ item 3): a calculation requested / running -> the strategy area greyed out under a big spinner
   (app.js syncCalcOvl); absolute over #bMain (no layout change), in the flow below the strip on the Flop step (#bMain hidden) */
body.calcbusy #bMain { filter: grayscale(1) brightness(.55); opacity: .5; pointer-events: none; user-select: none; }
.calcovl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; align-items: flex-start; background: rgba(12,13,15,.35); cursor: progress; }
.calcovl[hidden] { display: none; }
.calcovl.inflow { position: relative; height: 62vh; min-height: 320px; top: auto !important; background: transparent; }
.calcspin { position: sticky; top: calc(var(--hdr-h, 48px) + 22vh); margin-top: min(170px, 18vh); width: 176px; height: 176px; border-radius: 50%; border: 16px solid rgba(255,255,255,.13); border-top-color: var(--accent); animation: calcspin .85s linear infinite; }
@keyframes calcspin { to { transform: rotate(360deg); } }
/* cycle 54 (USER_NOTES 23:1xZ item 6): the later history steps after the current strip card (clickable) */
.ncard.fut { opacity: .5; border-style: dashed; }
.ncard.fut:hover { opacity: .85; }
.ncard.fut.lazy .bc .card { filter: grayscale(.6); }
/* cycle 57 (USER_NOTES "(session, 2026-09-30) -- USER: river report fixes" item 1): no layout shift while the river report loads:
   the total % sits in a fixed-width tabular box (the lock button never moves), skeleton boxes / strip card while loading */
.abox .ap { font-variant-numeric: tabular-nums; }
.rvab .apn { display: inline-block; min-width: 3.9em; }
.rvskel .abox { background: var(--panel3, #2a2c32); cursor: default; }
.rvskel .apn { color: rgba(255,255,255,.35); }
.ncard.rvph { cursor: default; border-color: var(--border); box-shadow: none; }
.ncard.rvph .na { background: #202227; }
#rvHead .rvhand input:disabled { opacity: .5; }
table.rvskel td { color: #5d626b; }
table.rvskel tr.ragg td { color: #7f858e; }
table.rvskel tbody tr { cursor: default; }
.ncard.rvph .nh .pos { color: #7f858e; font-weight: 600; }
/* cycle 66 helper RV piece 1 (USER_NOTES ~06:1xZ "the river report STILL JUMPS"): the report's FIXED layout -- the head row one fixed
   line (its message ellipsised in reserved space), the table section + the action boxes = two grid columns whose widths come from the
   window only, the table section a fixed-height scroll box (scrollbar space always reserved) with a fixed-layout table (rivers.js
   tabOpen: River + mix bar fixed, the actions + 4 value slots share the rest) -> loading / rows / filter / 0 matches / sorting: no
   x / width / y / height change (ops/rr_layout_check.py) */
#rvHead { height: 28px; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
#rvHead .rvhmsg { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rvbody { --rvside-w: clamp(340px, 34vw, 540px); display: grid; grid-template-columns: minmax(0, 1fr) var(--rvside-w); gap: 12px; align-items: start; }
.rvbody > #rvTable { width: auto; max-width: none; min-width: 0; max-height: none; height: calc(100vh - var(--hdr-h) - var(--strip-h) - 72px); min-height: 260px; scrollbar-gutter: stable; }
#rvSide { min-width: 0; }
#rvSide:empty { display: block; }
table.rvtab { table-layout: fixed; width: 100%; min-width: calc(214px + var(--nc, 7) * 66px); }
table.rvtab col.rcc { width: 100px; }
table.rvtab col.rcm { width: 114px; }
table.rvtab th, table.rvtab td { padding-left: 8px; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; }
table.rvtab th.l, table.rvtab td.l { padding-left: 14px; }
table.rvtab td.rmix div { width: 100%; }
table.rvtab td.ra { min-width: 0; }
table.rvtab td.ra i { right: 10px; max-width: calc(100% - 18px); }
table.rvtab tr.rmsg td { white-space: normal; padding-top: 10px; padding-bottom: 10px; }
/* cycle 57 (USER_NOTES ~03:4xZ): on the turn / river the tree card + the preflop cards = ONE compact card (a click shows them again) */
.ncard.pfsum { --nw: 140px; }
.ncard.pfsum .nh { color: #cfd2d8; }
.ncard.pfsum .pfsl { padding: 0 5px; border-radius: 4px; background: #34373e; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.ncard.pfsum .pfsl:empty { display: none; }
/* cycle 57 helper PC piece 2 (USER_NOTES ~05:2xZ "top navigator cards"): TALLER navigator cards of ONE constant height (a fixed height
   with room kept for the strip's scrollbar: no change when the strip starts to scroll, a card has more / fewer lines, a street is
   selected / solving / loading); the FLOP / TURN / RIVER board cards centred, at the same height in every street card; the yellow
   lock on every locked card (.nlk; the selected card keeps its lock button) */
/* (190 px strip = 178 px cards on a window of 750+ px; a lower window keeps the page from scrolling: the right column's 480 px) */
#pageBrowser, #pageReport, #pageRiver { --strip-h: clamp(160px, calc(100vh - var(--hdr-h) - 516px), 190px); }
.strip { align-items: flex-start; }
.strip > .ncard { height: calc(var(--strip-h) - 12px); }   /* - the strip's padding (4) + its scrollbar (8) */
.ncard.street .bc { flex: none; height: 58px; justify-content: center; margin: 2px 0 4px; }
.ncard.street .bc .card.board:last-child { margin-right: 0; }
.ncard .nlk { margin: -3px 0 -3px var(--nlm); width: var(--nlw); height: 20px; border-radius: 5px; background: var(--sel); color: #1d1d1d; vertical-align: middle; display: inline-grid; place-items: center; }
.ncard .nlk svg { width: 12px; height: 12px; }
/* cycle 66 helper NW (USER_NOTES "(session, 2026-09-30 ~06:3xZ) -- USER (furious): TWO STRUCTURAL FIXES" item 1): ONE FIXED WIDTH per
   navigator card type (--nw above), never the content's: decision cards (flop / turn / river, current or later history, the river
   report's) 136, preflop cards (decision / loading / seat to act) + end cards 100, the compact preflop card 140, FLOP (Flop step =
   solved) 152, TURN / RIVER (pending, solving, solved, later history, the report's ALL RIVERS) 112, the tree card 168. Texts are
   ellipsised inside the box (an action's amount before its label; the header's name before its stack / lock) */
.ncard .nh > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ncard .nh .stk { flex: none; }
.ncard .na > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ncard .na > .amt { flex: 0 50 auto; }
.ncard.pfsum .pfsl, .ncard.rtk .rtks { overflow: hidden; text-overflow: ellipsis; }
.ncard .nlks { max-width: 100%; overflow: hidden; }
.ncard .nbtns { min-width: 0; overflow: hidden; }
.ncard.rmf.rvall { --nw: 112px; --np: 8px; }
.ncard.rvall .nh { gap: 4px; }
.ncard.rvall .mflops { font-size: 13px; letter-spacing: .5px; white-space: nowrap; }
/* cycle 85 helper AW (USER_NOTES 2026-10-01 ~15:0xZ "ACTION WIDGETS ... 30 % NARROWER" + the user's correction "not the preflop ones"):
   the POSTFLOP decision cards (flop / turn / river: current, later history, the river report's, the multi-flop report's) 136 -> 95 px;
   the FLOP card (Flop step / solved / the report's) 152 -> 132 px (the smallest width for its 3 board cards = 122 px; Settings / Ranges
   share its row). Still ONE fixed width per card type and every label on one line: the decision card's side padding 8 -> 4 (--np),
   its rows' 5 -> 3 (--nap), the header's gap 10 -> 4 (--nhg), the lock 24 -> 20 wide (--nlw / --nlm), no gap for an empty amount.
   UNCHANGED (the old paddings below): preflop cards + end cards 100, the compact preflop card 140, TURN / RIVER 112, the tree card 168 */
.ncard.pf, .ncard.ghost, .ncard.street, .ncard.spot, .ncard.pfsum { --np: 8px; --nap: 5px; --nhg: 10px; --nlw: 24px; --nlm: 6px; }
.ncard.flopstep, .ncard.street[data-li="0"], .ncard.rmf:not(.rvall) { --np: 4px; }
.ncard .na > .amt:empty { display: none; }
.ncard .nbtns > .btn.small:not(:only-child) { flex: 1 1 0; min-width: 0; padding: 2px 0; text-align: center; }
/* session 2026-09-30 (user): credit line, bottom left corner */
.credit { position: fixed; left: 12px; bottom: 8px; z-index: 5; font-size: 12px; color: var(--muted); pointer-events: auto; }
.credit a { color: var(--muted); text-decoration: underline; }
/* cycle 67 helper RV2 (USER_NOTES ~06:3xZ item 2): the river report has NO navigator of its own: it lives on the study page under the ONE
   strip (#bStrip, app.js renderStrip in report mode) and only takes the strategy area's place (#bMain + its calculation overlay) */
#pageBrowser.rvon > #bMain, #pageBrowser.rvon > #calcOvl { display: none !important; }
/* session 2026-09-30 (user): the All-in action box is hidden in the action boxes (the solve and the chart keep it) */
#aBoxes .abox.ai { display: none !important; }
/* session 2026-10-01 (user): PLO -- no big action boxes at the top right (the column headers are the action buttons); the boxes stay in the DOM for clicks / checks */
body.plo #aBoxes:not(:has(.errbox)) { display: none !important; }   /* cycle 79 CT: a node that failed to load keeps its error + Retry */
/* session 2026-10-01 (user): compact GPU widget = only the coloured state dot (click it to expand) */
.gpubox.brief { padding: 6px; gap: 0; cursor: pointer; }
.gpubox.brief > *:not(.dot) { display: none !important; }
.gpubox.brief .dot { width: 11px; height: 11px; }
/* user 2026-10-01 ~10:5xZ item 4: "Hero strategy does not reach this spot" (below the action boxes, next to EV / equity) */
.astats .noreach { color: var(--warn); font-weight: 600; }