:root {
  --bg: #060a10;
  --card: #0d141d;
  --text: #e6edf3;
  --muted: #8b949e;
  --border: rgba(255,255,255,0.10);
  --surface: #0d151d;
  --surface2: #0b1219;
  --neon-blue: #24d3ff;
  --neon-green: #5cbe83;
}
* { box-sizing: border-box; }

/* ============ Sidebar + tabbed layout (redesign shell) ============ */
#appSidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 190px;
  background: linear-gradient(180deg, #0a1119, #070c12);
  border-right: 1px solid var(--border);
  padding: 14px 10px; z-index: 40; overflow-y: auto;
  transition: width .18s ease;
}
#appSidebar .sb-brand {
  font-weight: 800; font-size: 1.05em; letter-spacing: .5px;
  color: var(--neon-blue); text-shadow: 0 0 8px rgba(36,211,255,.5);
  padding: 6px 8px 14px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
#appSidebar .sb-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin: 2px 0; border-radius: 9px;
  color: var(--muted); cursor: pointer; font-weight: 600; font-size: .93em;
  white-space: nowrap; user-select: none; border: 1px solid transparent;
}
#appSidebar .sb-tab .sb-ic { width: 22px; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 1.05em; flex: none; }
#appSidebar .sb-tab .sb-ic svg.sbico { width: 22px; height: 22px; display: block; }
/* subtle lift on hover, so the 3D tiles feel tactile */
#appSidebar .sb-tab:hover .sb-ic svg.sbico { transform: translateY(-1px); transition: transform .12s ease; }
/* on the active (bright) tab, drop the icon's own shadow for contrast against the neon bg */
#appSidebar .sb-tab.active .sb-ic svg.sbico { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
#appSidebar .sb-tab:hover { color: var(--text); background: rgba(36,211,255,.06); }
#appSidebar .sb-tab.active {
  color: #06121a; background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
  box-shadow: 0 0 14px rgba(57,255,158,.35);
}
#appSidebar .sb-collapse { margin-top: 12px; color: var(--muted); font-size: .8em; }
body.sb-collapsed #appSidebar { width: 58px; }
body.sb-collapsed #appSidebar .sb-tab .sb-label,
body.sb-collapsed #appSidebar .sb-brand span,
body.sb-collapsed #appSidebar .sb-collapse span { display: none; }
body.has-sidebar main { margin-left: 190px !important; max-width: none !important; width: auto !important; padding: 22px 26px; }
body.has-sidebar.sb-collapsed main { margin-left: 58px !important; }
body.has-sidebar #appHeader { display: none; }
section.tab-hidden, .card.tab-hidden { display: none !important; }

/* ============ Neon dashboard widgets ============ */
.neon-dash { background: linear-gradient(180deg, #0a1119, #0b1017); border: 1px solid rgba(36,211,255,.18); }
.nd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* Keep the dashboard header controls at the roomier pre-load size the user prefers (2026-07-28):
   the top action buttons + the segmented period/status/type filters render a notch larger.
   Scoped to .nd-head so every other compact button in the app keeps its dense size. */
.nd-head .gt-compact-btn { font-size: 13px; padding: 6px 13px; }
.nd-head .nd-seg-btn { font-size: 13px; padding: 6px 14px; }
.nd-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* ============ Checkbox toggles → lit/dim pill buttons (2026-07-23, app-wide) ============
   User: the ☑-checkbox filter labels look old. Every .mode-toggle-item that wraps a checkbox
   now renders as a modern pill: LIT (bright, colored border, glow) when on; DIMMED when off —
   same feel as the notifier button. The native box is hidden; clicking the pill still toggles
   the real checkbox, so no JS changes anywhere. */
label.mode-toggle-item:has(input[type="checkbox"]) {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; user-select: none; line-height: 1.5;
  opacity: .45; filter: saturate(.5);
  transition: opacity .13s ease, border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
label.mode-toggle-item:has(input[type="checkbox"]):hover { opacity: .75; }
label.mode-toggle-item:has(input[type="checkbox"]:checked) {
  opacity: 1; filter: none;
  background: linear-gradient(180deg, rgba(36,211,255,.16), rgba(36,211,255,.05));
  border-color: rgba(36,211,255,.55);
  box-shadow: 0 0 9px -3px rgba(36,211,255,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
label.mode-toggle-item input[type="checkbox"] { display: none; }
/* Account chips get the same lit/dim treatment (box hidden, chip itself is the state). */
.nd-acct-chip input[type="checkbox"] { display: none; }
.nd-acct-chip { opacity: .45; filter: saturate(.5); transition: opacity .13s ease, border-color .13s ease, box-shadow .13s ease; }
.nd-acct-chip:hover { opacity: .75; }
.nd-acct-chip:has(input[type="checkbox"]:checked) {
  opacity: 1; filter: none;
  border-color: rgba(36,211,255,.5);
  box-shadow: 0 0 8px -3px rgba(36,211,255,.7);
}

/* Drag-to-resize column grip on every table header (universal). Thin, invisible until hover. */
th .fmColGrip {
  /* right:0 (not -3px) so it stays INSIDE the header — a frozen table clips overflow, which
     would otherwise swallow the grab handle and make columns un-resizable after the first drag. */
  position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; z-index: 3; user-select: none;
}
/* Once columns are user-sized the table is table-layout:fixed — cell content must CLIP to its
   own column instead of spilling over the neighbour (contracts bleeding into Grade, etc.). */
table.fm-cols-frozen td, table.fm-cols-frozen th { overflow: hidden; }
table.fm-cols-frozen td { text-overflow: ellipsis; }
th .fmColGrip::after {
  content: ""; position: absolute; top: 15%; right: 3px; width: 2px; height: 70%;
  background: transparent; border-radius: 2px; transition: background .12s ease;
}
th:hover .fmColGrip::after { background: var(--neon-blue); opacity: .55; }
th .fmColGrip:hover::after { background: var(--neon-blue); opacity: 1; }

/* Compact hour-range mini row tucked under the sessions seg. */
.nd-hrs-mini { font-size: 10.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; }
.nd-hrs-mini input[type="number"] { width: 34px; padding: 1px 3px; font-size: 10.5px; }
.nd-controls button, .nd-controls select { width: auto; margin: 0; }
.nd-accounts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; height: 92px; min-height: 40px; overflow-y: auto; padding: 2px; resize: vertical; align-content: flex-start; border: 1px solid transparent; }
.nd-accounts:hover { border-color: var(--border); border-radius: 8px; }
.nd-acct-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: 12px; cursor: pointer; user-select: none;
}
.nd-acct-chip input { width: auto; margin: 0; }
.nd-acct-chip.off { opacity: .4; }
/* Gap after the last selected chip → visual break between selected (front) and unselected. */
.nd-acct-chip.nd-acct-lastsel { margin-right: 16px; position: relative; }
.nd-acct-chip.nd-acct-lastsel::after { content: ""; position: absolute; right: -9px; top: 4px; bottom: 4px; width: 1px; background: var(--border); }
.nd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.nd-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  position: relative; overflow: hidden;
}
.nd-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--neon-blue); }
.nd-card.pos::before { background: var(--neon-green); }
.nd-card.neg::before { background: #ff5b6e; }
.nd-card .nd-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.nd-card .nd-val { font-size: 24px; font-weight: 800; margin-top: 6px; }
.nd-card .nd-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.nd-card .nd-val.pos { color: var(--neon-green); text-shadow: 0 0 10px rgba(57,255,158,.35); }
.nd-card .nd-val.neg { color: #ff6b7d; text-shadow: 0 0 10px rgba(255,91,110,.30); }
.nd-card .nd-val.blue { color: var(--neon-blue); text-shadow: 0 0 10px rgba(36,211,255,.35); }
.nd-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1050px) { .nd-grid2 { grid-template-columns: 1fr; } }
/* Left column stacks the equity curve + the synced stats box, beside the calendar. */
.nd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Panels + charts must SHRINK with the window — a fixed-width SVG inside a panel was the
   last thing pushing the page wider than the viewport at narrow widths. */
.nd-panel { min-width: 0; max-width: 100%; }
.nd-panel svg { max-width: 100%; height: auto; }
.nd-panel { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.nd-panel-title { font-weight: 700; margin-bottom: 10px; font-size: .95em; }
.nd-cal-month { margin-bottom: 12px; }
.nd-cal-month h4 { margin: 0 0 6px; color: var(--neon-blue); font-size: .85em; font-weight: 700; }
.nd-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.nd-cal-dow { color: var(--muted); font-size: 10px; text-align: center; padding-bottom: 2px; }
/* Daily P&L day boxes — same design language as the .nd-disc-item chips (user request):
   dark gradient base, rounded, inset highlight, hover lift. cellColor() layers the P&L
   tint + colored border + glow inline on .has cells. */
.nd-cal-cell {
  aspect-ratio: 1 / 1; border-radius: 11px; border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted); position: relative; cursor: default;
  background: linear-gradient(180deg, #131c26, var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.nd-cal-cell.has:hover { transform: translateY(-1px); }
/* weekends: faded, and a bare placeholder when hidden */
.nd-cal-cell.nd-cal-weekend { opacity: .42; border-style: dashed; }
.nd-cal-cell.nd-cal-weekend.has { opacity: .72; }
.nd-cal-cell.nd-cal-empty { border-color: transparent; background: transparent; box-shadow: none; }
.nd-weekend-note { background: linear-gradient(180deg,#141d2a,#0d151d) !important; border-color: rgba(120,150,200,.35) !important;
  color: var(--muted); font-size: 11.5px; }
.nd-cal-cell.has .nd-cal-day { color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.95); }
.nd-cal-cell .nd-cal-day { font-size: 13px; }
/* White P&L with a dark outline so it stays legible on bright-green AND red cells. */
.nd-cal-cell.has .nd-cal-pnl {
  color: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: .2px; margin-top: 3px;
  text-shadow: 0 0 3px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.95);
}
.nd-cal-cell .nd-cal-pnl { font-size: 12px; font-weight: 800; }
.nd-cal-cell.has:hover { outline: 1px solid rgba(255,255,255,.35); }
/* Slightly stronger cell backgrounds so the outlined text has something to sit on. */
/* Segmented filters now use the lit/dim PILL design (matches the Funded/Eval/Demo toggles):
   each option is its own rounded pill — bright + glowing when active, dimmed when off. */
.nd-seg { display: inline-flex; gap: 5px; border: none; border-radius: 0; overflow: visible; flex-wrap: wrap; align-items: center; }
.nd-seg-btn {
  width: auto; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
  opacity: .5; filter: saturate(.6);
  transition: opacity .13s ease, border-color .13s ease, box-shadow .13s ease, background .13s ease, color .13s ease;
}
.nd-seg-btn:hover { opacity: .82; }
.nd-seg-btn.active {
  opacity: 1; filter: none; color: var(--text);
  background: linear-gradient(180deg, rgba(36,211,255,.16), rgba(36,211,255,.05));
  border-color: rgba(36,211,255,.55);
  box-shadow: 0 0 9px -3px rgba(36,211,255,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
.nd-acct-chip.nd-inactive { opacity: .75; }
.nd-miss-chip { border: 1px dashed #eab308 !important; }
/* Calendar day-cell overlay: predominant label (top-left), playbook (top-right),
   grade (bottom-right). Only shown when the overlay toggle is on. */
.nd-cal-cell { position: relative; }
.nd-cal-tl, .nd-cal-tr, .nd-cal-br {
  position: absolute; font-size: 11px; font-weight: 900; line-height: 1;
  background: rgba(0,0,0,.7); border-radius: 4px; padding: 2px 4px; color: #fff; z-index: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.nd-cal-tl { top: 2px; left: 2px; }
.nd-cal-tr { top: 2px; right: 2px; color: #24d3ff; }
.nd-cal-br { bottom: 2px; right: 2px; }
/* Payout marker — always shown (independent of the overlay toggle), stacked
   above the playbook tag in the top-right corner if both are present. */
/* markers sit in a row so 💵 / 🎓 / 🥂 / 🛑 on the SAME day never overlap */
.nd-cal-badges {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px;
  max-width: calc(100% - 4px);
}
.nd-cal-cell:has(.nd-cal-tr) .nd-cal-badges { top: 18px; }
.nd-cal-bl {
  position: static; font-size: 11px; line-height: 1; z-index: 2;
  background: rgba(0,0,0,.7); border-radius: 4px; padding: 2px 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
/* Secondary "open in Trades tab" action, bottom-left — the main cell click pins
   the dashboard to that day; this jumps straight to the filtered trade list. */
.nd-cal-goto {
  position: absolute; bottom: 1px; left: 1px; z-index: 2;
  width: 15px; height: 15px; line-height: 13px; padding: 0; text-align: center;
  font-size: 10px; font-weight: 800; border-radius: 4px; cursor: pointer;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); color: #fff;
  opacity: 0; transition: opacity .12s ease;
}
.nd-cal-cell.has:hover .nd-cal-goto { opacity: 1; }
.nd-cal-goto:hover { background: var(--neon-blue); color: #06121a; border-color: var(--neon-blue); }

/* Discipline summary strip at the top of the dashboard. */
/* align-items:flex-start (not the flex default `stretch`): the stop-discipline tile loads
   asynchronously and swaps in a SECOND line (the ⚠ counter-trend warning), which under
   `stretch` inflated every other tile on its row from 59px to 110px — the whole strip
   visibly grew after page load (user 2026-07-28). Now each tile keeps its natural height,
   so the late-loading two-line tile no longer resizes its neighbours. */
.nd-discipline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 11px; margin-bottom: 14px; max-width: 100%; min-width: 0; }
.nd-disc-item {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, #131c26, var(--surface));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 11px 15px; font-size: 13.5px; line-height: 1.3;
  color: #c2ccd6;                      /* brighter than muted so labels read clearly */
  flex: 1 1 210px; min-height: 54px;
  /* min-width:0 lets a chip SHRINK below its content width when the window narrows —
     without it flexbox refuses to compress the label and the whole row escapes the page. */
  min-width: 0; max-width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.nd-disc-item > span:not(.nd-disc-ic) { min-width: 0; overflow-wrap: anywhere; }
.nd-disc-item:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
.nd-disc-item b { color: var(--text); font-size: 21px; font-weight: 800; margin-right: 3px; letter-spacing: -.01em; }
.nd-disc-ic { font-size: 20px; line-height: 1; flex: none; }
.nd-disc-pos { border-color: rgba(57,255,158,.45); }
.nd-disc-pos b { color: #39ff9e; text-shadow: 0 0 10px rgba(57,255,158,.35); }
.nd-disc-neg { border-color: rgba(255,91,110,.45); }
.nd-disc-neg b { color: #ff6b7d; text-shadow: 0 0 10px rgba(255,91,110,.30); }
.nd-disc-focus { border-color: rgba(234,179,8,.45); }
.nd-disc-focus b { color: #eab308; text-shadow: 0 0 10px rgba(234,179,8,.30); }
#gtPopover .chip-toggle { font-size: 11px; padding: 3px 7px; }

/* Synced stats console below the equity curve. */
.nd-stats-hl { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.nd-stats-hl b { color: var(--text); font-size: 1.05em; }
.nd-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.nd-stat-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.nd-stat-box h5 { margin: 0 0 6px; font-size: 12px; color: var(--neon-blue); font-weight: 700; }
.nd-stat-tbl { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.nd-stat-tbl th { color: var(--muted); font-weight: 600; padding: 2px 4px; border-bottom: 1px solid var(--border); }
.nd-stat-tbl td { padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.nd-lab-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Clickable label chips in the dashboard stats (click → trend curve in the equity box). */
.nd-lab-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; padding: 3px 4px; border-radius: 6px; transition: background .12s; }
.nd-lab-chip span { font-size: 12px !important; padding: 0 5px !important; }
.nd-lab-chip b { color: var(--text); font-size: 12px; }
.nd-lab-chip:hover { background: rgba(255,255,255,.06); }
.nd-lab-chip.sel { background: rgba(36,211,255,.16); outline: 1px solid var(--neon-blue); }
.nd-lab-x { width: auto; margin: 0 0 0 2px; padding: 0 3px; font-size: 9px; line-height: 1; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 3px; }
.nd-lab-x:hover { background: #ff5b6e; color: #fff; }
.nd-excl { margin-top: 8px; font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nd-excl #ndExclClear { width: auto; margin: 0; padding: 2px 8px; font-size: 11px; }
/* Equity box header when showing a label trend. */
.nd-eq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.nd-eq-title { font-weight: 700; color: var(--neon-blue); font-size: 13px; }
.nd-eq-mode, .nd-eq-basis, .nd-eq-reset { width: auto; margin: 0; padding: 3px 8px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; color: var(--text); }
.nd-eq-reset { color: var(--muted); }
/* Active toggle (count/P&L + real/disciplined) uses the same neon gradient as the rest
   of the dashboard's segmented controls, not the off-design bright blue. */
.nd-eq-mode.on, .nd-eq-basis.on { background: linear-gradient(90deg, var(--neon-blue), var(--neon-green)); color: #06121a; font-weight: 700; border-color: transparent; }
/* Matches the nd-seg-btn.active gradient used elsewhere on the dashboard, so this
   reads as the primary action in the header rather than a generic browser button. */
.nd-eq-view-trades {
  width: auto; margin: 0 0 0 4px; padding: 3px 10px; font-size: 11px; font-weight: 700;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
  color: #06121a; border: none; border-radius: 6px; cursor: pointer;
}
.nd-eq-view-trades:hover { filter: brightness(1.08); }
/* the View-trades button now lives up in the toggle cluster; hide the in-chart copies */
#ndEquity .nd-eq-view-trades { display: none; }
/* matches the per-trade / session-lines / MFE-MAE pills, but amber so it's easy to spot */
.nd-eq-viewtop { border-color: #eab308 !important; color: #eab308 !important; font-weight: 700; }
.nd-eq-viewtop:hover { background: rgba(234,179,8,.14); }
/* Bigger, resizable stats box. */
#ndStats { resize: vertical; overflow: auto; min-height: 160px; }
.nd-stat-box h5 { font-size: 13px; }
.nd-stat-tbl { font-size: 12.5px; }
.nd-stats-hl { font-size: 13px; }
.nd-stats-hl b { font-size: 1.15em; }

/* Daily-log PA-quality rounded chips. */
.dlQ-wrap { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.dlQ {
  width: auto; margin: 0; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  border: 1px solid var(--border); border-radius: 999px; background: #0d1117; color: var(--muted); cursor: pointer;
}
.dlQ:hover { filter: brightness(1.2); }
.dlQ.on { font-weight: 800; }

/* Grouped-trades numeric range filters + summary bar. */
.nd-range { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); background: #0d1117; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; }
.nd-range input { width: 62px; margin: 0; padding: 3px 5px; font-size: 12px; }
.gt-summary { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.gt-summary .gt-s { display: flex; flex-direction: column; }
.gt-summary .gt-s span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.gt-summary .gt-s b { font-size: 16px; font-weight: 800; }
.nd-eq-svg { width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { max-width: min(1850px, 97vw); margin: 0 auto; padding: 28px; }
header { margin-bottom: 22px; }
h1, h2 { margin: 0 0 10px; }
p { color: var(--muted); }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.stats-details {
  margin-top: 10px;
}

.stats-details > summary {
  cursor: pointer;
  color: var(--muted);
  margin-bottom: 12px;
}

.bucket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.bucket-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}

.bucket-card h3 {
  margin: 0 0 10px;
}

.bucket-labels {
  margin-top: 10px;
}

.bucket-labels h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
label {
  display: block;
  margin: 12px 0 6px;
  color: var(--muted);
}

.mode-toggle-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 6px 0 6px;
}

.mode-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
}

.mode-toggle-item input {
  width: auto;
  margin: 0;
}

/* ---- Draggable / reorderable card consoles -------------------------------- */
.sec-drag-handle {
  cursor: grab; user-select: none; opacity: .5; font-size: 15px; line-height: 1;
  margin-right: 8px; padding: 0 2px; color: var(--muted); width: auto; background: transparent; border: none;
}
.sec-drag-handle:hover { opacity: 1; }
.sec-drag-handle:active { cursor: grabbing; }
section.sec-dragging, .card.sec-dragging { opacity: .55; outline: 2px dashed var(--neon-blue); }

/* ---- Playbook builder / Manage Tags two-column console -------------------- */
#vocabList { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.pb-tag {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--tagc, #8b949e); border-radius: 6px;
  padding: 2px 6px 2px 4px; font-size: 12px; font-weight: 600;
  color: var(--tagc, #8b949e); background: rgba(255,255,255,.02);
  cursor: pointer; user-select: none; line-height: 1.6;
}
.pb-tag:hover { background: color-mix(in srgb, var(--tagc, #8b949e) 16%, transparent); }
.pb-tag .pb-swatch {
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  padding: 0; cursor: pointer; flex: 0 0 auto; background: var(--tagc, #8b949e);
  appearance: none; -webkit-appearance: none;
}
.pb-tag .pb-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.pb-tag .pb-swatch::-webkit-color-swatch { border: none; border-radius: 50%; }
.pb-tag .pb-mini { opacity: 0; font-size: 10px; padding: 0 2px; border: none; background: transparent; width: auto; cursor: pointer; }
.pb-tag:hover .pb-mini { opacity: .7; }
.pb-tag .pb-mini:hover { opacity: 1; }
.pb-addrow { display: flex; gap: 6px; width: 100%; margin-top: 8px; }

.pb-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 6px; cursor: pointer;
}
.pb-row.active { border-color: var(--neon-blue); background: rgba(36,211,255,.07); }
.pb-row .pb-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.pb-detail { margin: 4px 0 12px; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; min-height: 44px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
@media (max-width: 720px) {
  .pb-builder { grid-template-columns: 1fr !important; }
  .pb-col[style*="border-left"] { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--border); padding-top: 10px; }
}

/* Shared OS dropdown / filter-input look — squared 8px corners, dark segment
   background, compact padding. Matches the Grouped-Trades filter styling so
   selects across the app read consistently. */
select.os-dd, input.os-dd {
  width: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 5px 8px;
  font-size: 12px;
}
select.os-dd:focus, input.os-dd:focus {
  outline: none;
  border-color: var(--neon-blue);
}

/* Grouped-Trades filter bar: compact, squared chips that match the app's
   8px-radius segmented controls (nd-seg) instead of the big rounded pills. */
.gt-filters .mode-toggle-item {
  border-radius: 8px;
  padding: 3px 8px;
  gap: 5px;
  font-size: 11.5px;
  color: #c9d4e3;                 /* was var(--muted) — labels were too dim to read */
  font-weight: 600;
}
.gt-filters .mode-toggle-item select,
.gt-filters .mode-toggle-item input {
  padding: 2px 5px;
  font-size: 11.5px;
  border-radius: 6px;
  background: #10202e;            /* lighter field than the row bg */
  color: #eef2f7;                /* bright value text */
  border: 1px solid #2b3b4d;     /* clearer edge */
  font-weight: 600;
}
.gt-filters .mode-toggle-item select:hover,
.gt-filters .mode-toggle-item input:hover { border-color: #3d5670; }
.gt-filters .mode-toggle-item input::placeholder { color: #7d8ba0; }
input, textarea, button {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
  padding: 10px;
}
/* Anti-sprawl: a bare file input at 100% width reads as a big empty void and shoves the
   controls beside it far to the right ("paralysis"). Upload bars never need the full row —
   cap them. Applies to every CSV/photo/candle picker across the app. */
input[type="file"] { max-width: 440px; padding: 7px 10px; }
textarea {
  min-height: 170px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

#pineInput,
#pineOutput {
  min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

/* Base button — themed to the neon OS palette (dark surface + neon-blue accent)
   instead of the legacy flat blue (#1f6feb) that no longer matched the dashboard,
   review console, or daily-log day list. Primary CTAs still opt into the
   blue→green gradient inline; everything else reads as a consistent dark control. */
button {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
}
button:hover { border-color: var(--neon-blue); color: var(--neon-blue); }
/* Keep gradient/explicitly-coloured buttons readable on hover (don't tint their text). */
button[style*="gradient"]:hover { color: #06121a; }
/* Active pill keeps its light text on hover (was forcing dark text for the old gradient look). */
.nd-seg-btn.active:hover { color: var(--text); }
.nd-seg-btn:hover { border-color: rgba(36,211,255,.55); color: inherit; }

/* Compact, inline buttons for Prop Accounts + Daily Log (row + toolbar) so they
   sit side-by-side instead of stacking full-width. */
#propAccountsTable button,
#dailyLogTable button,
#paRefresh, #dlNewDay, #dlQuickImport, #dlRefresh, #dlAnchor, #dlWeeklyPdf {
  width: auto;
  padding: 2px 8px;
  margin: 0 3px 2px 0;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
}
pre {
  white-space: pre-wrap;
  overflow-x: auto;
  color: var(--text);
}
.tableWrap { overflow-x: auto; }
/* A mirror of the table's horizontal scrollbar, placed ABOVE the table and stuck to the top
   so you can slide a wide table left/right without scrolling down to the bottom bar. */
.fmTopScroll { overflow-x: auto; overflow-y: hidden; position: sticky; top: 0; z-index: 6;
  background: var(--card, #12161c); }
.fmTopScroll > div { height: 1px; }

/* "Wide trade tables" toggle widens the whole page so cards (and their tables) get
   more room — the tables themselves always stay INSIDE their card and scroll there. */
body.wide-trades main { max-width: 100vw; }

/* Compact + CONTAINED trade tables: scroll inside their own card, never spill past
   the card's borders. */
.tableWrap.trade-compact { overflow-x: auto; max-width: 100%; }
.tableWrap.trade-compact table { font-size: 12px; }
.tableWrap.trade-compact th,
.tableWrap.trade-compact td { padding: 3px 6px; white-space: nowrap; }

/* Label / Confluence / Execution / Bias columns: narrow + wrap (Notion-style),
   confluences stacked one below another. */
td.col-label { max-width: 110px; white-space: normal !important; line-height: 1.35; }
td.col-conf { max-width: 150px; white-space: normal !important; line-height: 1.35; font-size: 0.9em; }
td.col-wrap { max-width: 130px; white-space: normal !important; line-height: 1.35; }

/* Big, visible toggle chips for confluences / executions in the trade editor. */
.chip-toggle {
  display: inline-block;
  margin: 3px 4px 3px 0;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
  font-size: 0.9em;
  cursor: pointer;
  user-select: none;
}
.chip-toggle:hover { border-color: #1f6feb; }
/* ── Compact per-trade Journal modal — smaller everything, less scrolling ────── */
#journalModal .chip-toggle { padding: 2px 8px; margin: 2px 3px 2px 0; font-size: 11px; border-radius: 6px; }
#journalModal .mode-toggle-item { padding: 2px 8px; font-size: 12px; }
#journalModal .mode-toggle-row { gap: 6px; margin: 4px 0; }
#journalModal h2 { font-size: 1.02rem; line-height: 1.2; }
#journalModal summary { font-size: .86rem; }
#journalModal summary strong { font-size: .92rem; }
#journalModal details { margin-bottom: 7px !important; }
#journalModal details details { margin-top: 6px !important; }
#journalModal #journalMeta { margin: 4px 0 8px !important; font-size: 11.5px; }
#journalModal #journalVideoRow, #journalModal #journalChart { margin-bottom: 8px !important; }
#journalModal textarea { padding: 6px 8px; font-size: 12px; min-height: 44px !important; }
#journalModal input[type=text], #journalModal input:not([type]), #journalModal select { padding: 4px 6px; font-size: 12px; }
#journalModal button { margin-top: 0 !important; padding: 4px 9px; font-size: 12px; border-radius: 7px; }
#journalModal .pb-tag { font-size: 11px; padding: 1px 6px; }
#journalModal #whyGuided { padding: 8px !important; margin-top: 4px !important; }
#journalModal label[style*="margin-top:10px"] { margin-top: 6px !important; }
.chip-toggle.on {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
  font-weight: 700;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  border-bottom: 1px solid var(--border);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
th { color: var(--muted); }
/* Softer body text in the Grouped Trades table — the default near-white
   (--text) read too bright/harsh against the dark background here. Colored
   cells (PnL, grade, labels, etc.) set their own inline color and win anyway. */
#tradesTable td { color: #9aa7b4; }
#jsonOut { max-height: 350px; overflow: auto; }
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.stat-card.win { border-color: #2ea043; }
.stat-card.loss { border-color: #f85149; }
.stat-card.warning { border-color: #d29922; }

.stat-title {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.big {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.label-counts {
  margin-top: 18px;
}

.label-counts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.inline-toggle {
  width: auto;
  color: var(--muted);
}

.inline-toggle input {
  width: auto;
}

.label-counts h3 {
  margin: 0 0 10px;
}

.label-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.label-grid.compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.label-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
}

.label-pill span {
  color: var(--muted);
  font-weight: 700;
}

.label-pill strong {
  color: var(--text);
}

.stat-pill {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
}

.stat-pill span {
  color: var(--muted);
  font-weight: 700;
}

.stat-pill strong {
  color: var(--text);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.stat-card.win { border-color: #2ea043; }
.stat-card.loss { border-color: #f85149; }
.stat-card.warning { border-color: #d29922; }

.stat-title {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.big {
  font-size: 28px;
  font-weight: 800;
  margin-top: 6px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.label-counts {
  margin-top: 18px;
}

.label-counts h3 {
  margin: 0 0 10px;
}

.label-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-pill {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
}

.stat-pill span {
  color: var(--muted);
  font-weight: 700;
}

.stat-pill strong {
  color: var(--text);
}

.gt-compact-btn {
  width: auto; margin: 0; padding: 4px 10px; font-size: 11px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.gt-compact-btn:hover { border-color: var(--neon-blue); color: var(--text); }

/* The clickable trade TIME (jumps to that moment in the recording) is a bare <a href> that had
   NO colour rule, so browsers painted it with the UA default #0000EE — and #551A8B once visited.
   On the dark table that measures 1.97:1 contrast (4.5 is the minimum), i.e. unreadable
   (user 2026-07-28). Scoped to a.ytPlay so the .ytPlay BUTTON variant keeps its .gt-compact-btn
   look. :visited is pinned too, or half the rows drift purple as he clicks through them. */
a.ytPlay, a.ytPlay:visited { color: var(--neon-blue); text-decoration: none; font-weight: 600; }
a.ytPlay:hover, a.ytPlay:focus { color: #8fe9ff; text-decoration: underline; }

/* ---- Chip cells: cap row HEIGHT — chips spread horizontally instead of stacking the
   row taller and taller. Past the cap the cell scrolls vertically (rare). ---- */
.gtChipCell {
  max-height: 58px;            /* ~2 chip rows */
  overflow: hidden;            /* hidden by default — hundreds of always-on scroll
                                  containers froze layout; hover to scroll the overflow */
  min-width: 180px;            /* give chips horizontal room first */
  vertical-align: top;
  display: table-cell;
}
/* NOTE: no :hover overflow toggle — flipping overflow per mousemove reflowed the whole
   table on every hover and froze the page. Overflowing chips: double-click the cell
   (opens the picker with everything visible). */
.gtChipCell::-webkit-scrollbar { width: 5px; }
.gtChipCell::-webkit-scrollbar-thumb { background: #2b3b4d; border-radius: 3px; }
#tradesTable td, #qualitySetupsTable td, #savedTradesTable td { vertical-align: top; }


/* ---- Sticky totals row (2026-07-19) --------------------------------------------
   The tfoot totals used to sit only at the very end of a long list — you had to
   scroll past hundreds of rows to see them. Sticky-bottom makes them FLOAT just
   above the bottom edge of the window while you scroll, then settle into their
   natural place at the end of the table. Applies to every table with totals
   (Trades, Saved, Setups, Daily Log, Prop Accounts, ledgers) — same columns,
   always visible. */
tfoot td {
  position: sticky;
  bottom: 0;
  background: var(--card, #0d141d);
  z-index: 4;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.45);
}
/* The Grouped Trades table gets its own bounded viewport so sticky actually engages:
   the wrapper scrolls vertically, the column headers pin to its top, the totals row
   pins to its bottom, and the horizontal scrollbar sits right under the totals —
   no more scrolling past hundreds of rows to reach either. */
.tableWrap:has(> #tradesTable) { max-height: 74vh; overflow: auto; }
.tableWrap:has(> #tradesTable) thead th {
  position: sticky; top: 0; background: var(--card, #0d141d); z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ======================================================================
   🎨 THEME SYSTEM (v221) — three switchable looks via [data-theme] on <html>
   (or any container: variables cascade, so the preview page scopes them).
   Switching = one attribute swap: pure CSS, zero JS work, cannot freeze.
   1) neon      — trading terminal: glass + neon gradients + glow (default)
   2) fintech   — clean premium: charcoal, ONE lime accent, soft depth, no glow
   3) brutalist — mono terminal: hard edges, no rounding, terminal green/amber
   ====================================================================== */

:root, [data-theme="neon"] {
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Cascadia Code", "Consolas", monospace;
}

/* ---- neon (explicit, so scoped previews can opt in) ------------------- */
[data-theme="neon"] {
  --bg: #060a10; --card: #0d141d; --surface: #0d151d; --surface2: #0b1219;
  --text: #e6edf3; --muted: #8b949e; --border: rgba(255,255,255,0.10);
  --neon-blue: #24d3ff; --neon-green: #5cbe83;
}

/* ---- fintech: charcoal + one confident accent, calm depth ------------- */
[data-theme="fintech"] {
  --bg: #101214; --card: #17191c; --surface: #1a1d21; --surface2: #141619;
  --text: #eceff1; --muted: #9aa3ab; --border: rgba(255,255,255,0.08);
  --neon-blue: #c8f542; --neon-green: #c8f542;   /* gradients collapse to ONE accent */
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
}
[data-theme="fintech"] *, [data-theme="fintech"] *::before, [data-theme="fintech"] *::after {
  text-shadow: none !important;                    /* glow off */
}
[data-theme="fintech"] .card, [data-theme="fintech"] .nd-card, [data-theme="fintech"] .nd-panel {
  box-shadow: 0 6px 18px rgba(0,0,0,.35);          /* soft depth instead */
}

/* ---- brutalist: mono terminal, hard edges, green/amber on black ------- */
[data-theme="brutalist"] {
  --bg: #000000; --card: #060606; --surface: #0a0a0a; --surface2: #050505;
  --text: #d6ffd6; --muted: #5f7a5f; --border: rgba(51,255,102,0.28);
  --neon-blue: #33ff66; --neon-green: #ffb000;     /* terminal green + amber */
  --font: "Cascadia Code", "Consolas", "IBM Plex Mono", monospace;
}
[data-theme="brutalist"] *, [data-theme="brutalist"] *::before, [data-theme="brutalist"] *::after {
  border-radius: 0 !important;                     /* hard edges everywhere */
  text-shadow: none !important;
  box-shadow: none !important;
}
[data-theme="brutalist"] button, [data-theme="brutalist"] .gt-compact-btn {
  border: 1px solid var(--neon-blue) !important;
}

/* Body adopts the themed font (late rule wins). */
body { font-family: var(--font); }

/* ---- 🧩 Universal Console Manager ---- */
/* Manager-hidden consoles stay hidden no matter what showTab does. */
.cmHidden { display: none !important; }
/* Half-width consoles: main becomes a wrapping flex row ONLY when at least one console
   is set to ½ — full-width consoles keep their normal one-per-row flow. */
main.cmFlex { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 16px; }
main.cmFlex > section, main.cmFlex > .card, main.cmFlex > div { width: 100%; }
main.cmFlex > .cmHalf { width: calc(50% - 8px); }
@media (max-width: 1100px) { main.cmFlex > .cmHalf { width: 100%; } }
#cmOpenBtn { margin-top: 4px; border-top: 1px solid var(--border); }

/* ============ Universal collapsible chevron ============ */
/* User: the default OS disclosure triangles don't match the page. Replace them everywhere with
   a neon chevron that rotates on open — applied to EVERY <details>/<summary> in the app. */
details > summary {
  list-style: none;
  position: relative;
  padding-left: 24px;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details > summary::before {
  content: "";
  position: absolute;
  left: 6px; top: 0.6em;
  width: 7px; height: 7px;
  border-right: 2px solid var(--neon-green);
  border-bottom: 2px solid var(--neon-green);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  opacity: .85;
}
details[open] > summary::before { transform: rotate(45deg); top: 0.48em; }

/* ============ Session Journal titles — panel-style headers (matched to the neon page) ============ */
summary.sj-head-title {
  background: linear-gradient(90deg, rgba(36,211,255,.12), rgba(57,255,158,.04) 60%, transparent);
  border: 1px solid rgba(36,211,255,.25);
  border-left: 3px solid var(--neon-blue);
  border-radius: 10px;
  padding: 10px 14px 10px 32px !important;
  font-size: 1.02em; font-weight: 700;
}
summary.sj-sub-title {
  background: linear-gradient(90deg, rgba(57,255,158,.10), transparent 70%);
  border: 1px solid rgba(57,255,158,.22);
  border-left: 3px solid var(--neon-green);
  border-radius: 9px;
  padding: 9px 12px 9px 32px !important;
  font-weight: 700;
}
summary.sj-head-title::before, summary.sj-sub-title::before { left: 13px; border-color: var(--neon-blue); }
summary.sj-sub-title::before { border-color: var(--neon-green); }

/* ============ Daily-log console Finish / Close (import-wizard pill design, paired) ============ */
.dlc-actions { display: inline-flex; gap: 8px; align-items: center; }
/* Daily-log / TA console actions — same calm family as .btn-primary (see the button block
   above): tint + coloured border instead of a saturated gradient with near-black text. */
.dlc-action-btn {
  width: auto !important; margin: 0; font-weight: 700; font-size: 14px;
  padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  line-height: 1.1; background: var(--surface); color: var(--muted);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dlc-finish {
  background: color-mix(in srgb, var(--neon-green) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--neon-green) 55%, var(--border));
  color: var(--neon-green);
}
.dlc-finish:hover {
  background: color-mix(in srgb, var(--neon-green) 22%, var(--surface));
  border-color: var(--neon-green); color: #c9ffe4;
}
.dlc-close {
  background: color-mix(in srgb, #ff6b7d 12%, var(--surface));
  border-color: color-mix(in srgb, #ff6b7d 50%, var(--border));
  color: #ff8f9c;
}
.dlc-close:hover {
  background: color-mix(in srgb, #ff6b7d 20%, var(--surface));
  border-color: #ff6b7d; color: #ffc2c9;
}

/* ============ Daily-log Note cell — clamp small; full text on hover (native title) ============ */
td.dlNoteCell { max-width: 230px; vertical-align: top; cursor: pointer; }
.dl-note-clip {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; max-height: 4.5em; line-height: 1.45; font-size: 12px; word-break: break-word;
}
/* Prop Accounts "Plan / notes" is the last column with no natural width limit, so a long
   note stretched the whole table off-screen (the note box overflowing far to the right).
   Cap the cell and let the text wrap+clamp inside it instead of widening the row. */
#propAccountsTable .paNoteCell {
  max-width: 340px; min-width: 120px; white-space: normal; vertical-align: top;
}

/* ---- Prop Accounts: ⋯ row-actions menu ------------------------------------
   8 action buttons per row made the table far wider than the screen. Only
   📊 Analyze stays inline; the rest live in this popover. Positioned absolutely
   so it floats OVER the table instead of stretching the row. */
#propAccountsTable .paMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 168px;
  padding: 6px;
  background: var(--panel, #11151c);
  border: 1px solid var(--border, #2a3341);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
#propAccountsTable .paMenu.paMenuUp { top: auto; bottom: calc(100% + 4px); }
#propAccountsTable .paMenu[hidden] { display: none; }
#propAccountsTable .paMenu button {
  width: 100%;
  text-align: left;
  white-space: nowrap;
  margin: 0;
}
#propAccountsTable .paMenuBtn { font-weight: 700; letter-spacing: 1px; padding: 1px 8px; }

/* Funded-only settings fields, greyed out on an EVALUATION account. Dimmed and
   inert rather than hidden, so the form keeps its shape and it's clear why they
   can't be edited (an eval has nothing to withdraw). */
.fm-funded-only-off {
  opacity: .38;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

/* Daily P&L calendar: ring the days inside the dashboard's selected period, and
   ring TODAY brighter. Every day is always listed, so without this it's hard to
   spot which ones the current selection actually covers. Uses outline (not border)
   so nothing reflows and the chip sizing stays identical. */
.nd-cal-cell.nd-cal-inperiod {
  outline: 1.5px solid rgba(36, 211, 255, .75);
  outline-offset: -1.5px;
  border-radius: 6px;
}
.nd-cal-cell.nd-cal-today {
  outline: 2px solid #39ff9e;
  outline-offset: -2px;
  box-shadow: 0 0 9px rgba(57, 255, 158, .45);
}
/* Days OUTSIDE the selected period / pinned day fade back, so picking "Yday" actually
   points at one box instead of leaving 300 equally-lit ones (user 2026-08-02). They stay
   clickable — the calendar is deliberately full-history — and hovering restores them. */
.nd-cal-cell.nd-cal-outperiod {
  opacity: .3;
  filter: saturate(.45);
  transition: opacity .12s ease, filter .12s ease;
}
.nd-cal-cell.nd-cal-outperiod:hover {
  opacity: .92;
  filter: none;
}

/* ---- Session Journal: execution ratings ------------------------------------
   Replaces the old per-cell <select>. Five dots read as a filled bar at a glance,
   take ~half the width of a dropdown (so the days sit next to their question
   instead of far right), and match the OS's lit/dim language. Colour = severity,
   so a row of red is visible without reading a number. */
#sjExecTable .sj-qcol,
table .sj-qcol {
  min-width: 140px;
  max-width: 190px;
  font-size: .86em;
  line-height: 1.35;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel, #0d1117);
}
table .sj-daycol { min-width: 96px; text-align: center; font-size: 11px; }
/* The exec grid must hug its content, not stretch to the panel width — a stretched
   table is what pushed the answer dots far right of the questions. */
#sjExecTable { width: auto; }
table td.sj-cell { text-align: center; padding: 3px 4px; }
/* Today's column: a soft tint + a left rule, so "which column am I filling in" is
   answered without counting across from the header. */
table .sj-today { background: rgba(57, 255, 158, .07); }
table th.sj-today { box-shadow: inset 2px 0 0 var(--neon-green, #39ff9e); color: var(--neon-green, #39ff9e); }
.sj-rate { display: inline-flex; gap: 4px; align-items: center; }
.sj-rate .sj-dot {
  width: 16px; height: 16px;
  padding: 0; margin: 0;
  border-radius: 50%;
  border: 1px solid var(--border, #2a3341);
  background: transparent;
  cursor: pointer;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}
.sj-rate .sj-dot:hover { transform: scale(1.35); border-color: var(--neon-blue, #24d3ff); }
/* 1-2 = red, 3 = amber, 4-5 = green — judged on the CELL's value, not the dot's. */
.sj-rate[data-val="1"] .sj-dot.on, .sj-rate[data-val="2"] .sj-dot.on { background: #ff6b7d; border-color: #ff6b7d; }
.sj-rate[data-val="3"] .sj-dot.on { background: #eab308; border-color: #eab308; }
.sj-rate[data-val="4"] .sj-dot.on, .sj-rate[data-val="5"] .sj-dot.on { background: #39ff9e; border-color: #39ff9e; }

/* ---- In-app toast (transcript landed → click to build the AI prompt) --------
   The queue already fires a Windows toast, but a desktop toast can't take you
   anywhere in the app. This one is clickable and lands you on the prompt. */
#fmToastHost { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; }
.fm-toast {
  max-width: 340px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--neon-green, #39ff9e); border-radius: 10px;
  background: linear-gradient(160deg, rgba(20,32,26,.97), rgba(9,15,22,.97));
  box-shadow: 0 10px 28px rgba(0,0,0,.55); font-size: 12px; line-height: 1.45;
  animation: fmToastIn .18s ease-out;
}
.fm-toast:hover { border-color: var(--neon-blue, #24d3ff); }
.fm-toast .fm-toast-cta { color: var(--neon-blue, #24d3ff); font-weight: 700; }
.fm-toast .fm-toast-x { float: right; opacity: .5; padding: 0 2px; }
@keyframes fmToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Drag-to-reorder column headers (every 🔧-Columns table) ----------------
   The dragged header dims; the drop target shows a green edge on the side the
   column will land. Same visual language as the Columns modal's row dragging. */
th.fm-th-dragging { opacity: .35; }
th.fm-th-drop-left { box-shadow: inset 3px 0 0 var(--neon-green, #39ff9e); }
th.fm-th-drop-right { box-shadow: inset -3px 0 0 var(--neon-green, #39ff9e); }

/* Next / Continue in the daily-log console — the import wizard's primary gradient,
   so every "go forward" button in the OS speaks the same language. */
/* Next sits beside Finish — it has to belong to the same family or the row looks half-updated. */
.dlc-next {
  background: color-mix(in srgb, var(--neon-blue) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--neon-blue) 60%, var(--border));
  color: var(--neon-blue);
}
.dlc-next:hover {
  background: color-mix(in srgb, var(--neon-blue) 24%, var(--surface));
  border-color: var(--neon-blue); color: #bff0ff;
}

/* ============================================================================
   📖 FOCUS READER — the reading surface. "Trading terminal outside, book inside":
   the app keeps its neon-dark identity for chrome, but the TEXT COLUMN behaves
   like a printed page. Built because the old reader hurt the user's eyes:
   too small, too narrow a line-height, not centred, no theme control.
   Every colour is a CSS var so the theme presets + custom pickers just work.
   ========================================================================== */
#fmReader {
  --read-bg: #0b0f14;
  --read-ink: #ffffff;
  --read-ink-soft: #9fb0bf;
  --read-rule: rgba(255,255,255,.08);
  --read-mark: rgba(234,179,8,.18);
  --read-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --read-size: 21px;
  --read-lh: 1.75;
  --read-measure: 66ch;
  position: fixed; inset: 0; z-index: 1500;
  background: var(--read-bg);
  display: flex; flex-direction: column;
  color: var(--read-ink);
}
#fmReader .rd-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
/* the page itself — centred, generous, measured */
#fmReader .rd-col {
  max-width: var(--read-measure);
  margin: 0 auto;
  padding: 56px 28px 180px;
  font-family: var(--read-font);
  font-size: var(--read-size);
  line-height: var(--read-lh);
  color: var(--read-ink);
  letter-spacing: .005em;
  text-align: left;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
}
#fmReader .rd-col p { margin: 0 0 1.05em; }
#fmReader .rd-col h1, #fmReader .rd-col h2, #fmReader .rd-col h3 {
  font-size: 1.18em; margin: 1.6em 0 .5em; line-height: 1.3; color: var(--read-ink);
}
#fmReader .rd-col .rd-sent { cursor: pointer; border-radius: 3px; }
#fmReader .rd-col .rd-sent:hover { background: rgba(255,255,255,.045); }
/* read-aloud karaoke — the sentence being spoken */
#fmReader .rd-now { background: rgba(192,132,252,.20) !important; box-shadow: 0 0 0 2px rgba(192,132,252,.18); }
#fmReader mark {
  background: var(--read-mark); color: inherit;
  border-left: 2px solid #eab308; padding: .04em .18em .04em .3em; border-radius: 2px;
}
/* chrome: header + thumb bar */
#fmReader .rd-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 14px; background: rgba(0,0,0,.34);
  border-bottom: 1px solid var(--read-rule); backdrop-filter: blur(7px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#fmReader .rd-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(0,0,0,.42);
  border-top: 1px solid var(--read-rule); backdrop-filter: blur(7px);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* one-hand friendly: every control is a big target, no sliders, no drag */
#fmReader .rd-btn {
  width: auto; flex: 0 0 auto;                 /* beat the global button{width:100%} */
  min-width: 42px; min-height: 38px; padding: 6px 12px;
  background: rgba(255,255,255,.06); color: var(--read-ink);
  border: 1px solid var(--read-rule); border-radius: 9px;
  font-size: 14px; cursor: pointer; line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background .14s, border-color .14s;
}
/* the reader's own inputs/selects must not stretch full-width either */
#fmReader .rd-bar input, #fmReader .rd-foot input,
#fmReader .rd-rail input, #fmReader .rd-selbar button { width: auto; }
#fmReader input[type="file"] { display: none; }
#fmReader .rd-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
#fmReader .rd-btn.on { border-color: #c084fc; color: #d8b4fe; background: rgba(192,132,252,.14); }
#fmReader .rd-title { font-weight: 700; font-size: 14.5px; margin-right: auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
#fmReader .rd-meta { color: var(--read-ink-soft); font-size: 11.5px; }
/* top hairline progress — same gradient as the active sidebar tab */
#fmReader .rd-prog { height: 3px; background: rgba(255,255,255,.07); }
#fmReader .rd-prog > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--neon-blue,#24d3ff), var(--neon-green,#39ff9e));
  transition: width .2s;
}
/* side rails (chapters / highlights) slide over the page */
#fmReader .rd-rail {
  position: absolute; top: 0; bottom: 0; width: min(400px, 86vw);
  background: rgba(8,12,17,.975); border-right: 1px solid var(--read-rule);
  overflow-y: auto; padding: 14px; z-index: 3;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: #dfe7ee;
}
#fmReader .rd-rail.right { right: 0; left: auto; border-right: none; border-left: 1px solid var(--read-rule); }
#fmReader .rd-rail .rd-ch {
  padding: 9px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 3px;
  border: 1px solid transparent; line-height: 1.35;
}
#fmReader .rd-rail .rd-ch:hover { background: rgba(255,255,255,.075); border-color: var(--read-rule); }
#fmReader .rd-rail .rd-ch.cur { background: rgba(36,211,255,.13); border-color: #24d3ff55; }
/* a saved highlight in the rail */
#fmReader .rd-hl {
  border-left: 3px solid #e6935c; padding: 7px 10px; margin: 7px 0;
  background: rgba(255,255,255,.035); border-radius: 0 8px 8px 0; line-height: 1.5;
}
#fmReader .rd-hl .rd-hl-act { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
/* the floating tag bar that appears when text is selected */
#fmReader .rd-selbar {
  position: fixed; z-index: 6; display: none; gap: 5px; flex-wrap: wrap;
  padding: 7px 9px; background: #10161e; border: 1px solid #e6935c77;
  border-radius: 11px; box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
/* PAPER theme needs dark chrome text to stay legible */
#fmReader.rd-light .rd-bar, #fmReader.rd-light .rd-foot { background: rgba(0,0,0,.07); }
#fmReader.rd-light .rd-btn { background: rgba(0,0,0,.05); color: #2b2620; border-color: rgba(0,0,0,.16); }
#fmReader.rd-light .rd-btn:hover { background: rgba(0,0,0,.11); }
#fmReader.rd-light .rd-rail { background: #efe6d2; color: #2b2620; }
@media (max-width: 640px) {
  #fmReader .rd-col { padding: 32px 18px 190px; }
  #fmReader .rd-title { max-width: 100%; }
}

/* ============================================================================
   LEARNING-HUB LESSON READER — exact port of learning_hub/app/static/styles.css
   (Midnight theme inlined). Everything is namespaced under #lhReader so nothing
   can leak into FASTMODE, and every control carries an explicit width so the
   global `input, textarea, button { width: 100% }` rule (styles.css ~484)
   cannot stretch it.
   Original class names are kept verbatim (btn, badge, ts, rsec, topic,
   point-list, transcript-box, notes-view, …) — the JS emits those.
   REPLACES the old hand-styled "LEARNING-HUB READER" block. Delete that one.
   ========================================================================== */

/* ---------- A. tokens + the full-screen overlay shell ---------- */

#lhReader {
  /* --- theme: MIDNIGHT, inlined from :root / :root[data-theme="midnight"] --- */
  --lh-bg:        #0d1017;
  --lh-bg-2:      #090c11;
  --lh-surface:   #141922;
  --lh-surface-2: #1b2431;
  --lh-ink:       #e7ecf4;
  --lh-ink-soft:  #8a95a8;
  --lh-line:      #253141;
  --lh-accent:    #5cbe83;
  --lh-accent-ink:#07120c;
  --lh-warn:      #ef5350;
  --lh-c1: #3ddc84;  --lh-c2: #f4c150;  --lh-c3: #ff6b9d;
  --lh-c4: #ff8a5b;  --lh-c5: #4fd1e0;  --lh-c6: #a78bfa;

  /* derived tints (kept as color-mix so re-tinting = change --lh-accent only;
     the @supports block at the bottom restates them for old engines) */
  --lh-accent-soft: color-mix(in srgb, var(--lh-accent) 16%, transparent);
  --lh-accent-35:   color-mix(in srgb, var(--lh-accent) 35%, transparent);
  --lh-accent-40:   color-mix(in srgb, var(--lh-accent) 40%, transparent);
  --lh-accent-45:   color-mix(in srgb, var(--lh-accent) 45%, transparent);
  --lh-warn-soft:   color-mix(in srgb, var(--lh-warn) 16%, transparent);
  --lh-warn-35:     color-mix(in srgb, var(--lh-warn) 35%, transparent);
  --lh-warn-40:     color-mix(in srgb, var(--lh-warn) 40%, transparent);

  /* fonts + design defaults */
  --lh-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --lh-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lh-radius: 14px;
  --lh-border-w: 1px;
  --lh-font-size: 15px;
  --lh-line-height: 1.6;
  --lh-heading-weight: 700;
  --lh-tracking: -0.01em;
  --lh-reader-w: min(780px, 100vw);   /* = --reader-w; drives the video height */
  --lh-video-cap: 42vh;
  --lh-transcript-h: 360px;
  --lh-head-h: 3.4rem;                /* sticky head height (see .video-pin) */

  /* the overlay itself: the original .reader panel, gone full-screen */
  position: fixed;
  inset: 0;
  z-index: 1500;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--lh-bg);           /* flat, exactly like the .reader panel */
  color: var(--lh-ink);
  font: var(--lh-font-size)/var(--lh-line-height) var(--lh-sans);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;                 /* dark native scrollbars + checkboxes */
}
/* OPTIONAL — the learning_hub <body> glow. Uncomment for the exact main-page
   feel; leave off if you see a seam under the sticky head/video while scrolling.
#lhReader {
  background:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--lh-accent) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--lh-bg) 0%, var(--lh-bg-2) 100%);
  background-attachment: fixed;
}
*/

#lhReader *,
#lhReader *::before,
#lhReader *::after { box-sizing: border-box; }

/* the hidden attribute must beat display:flex/inline-block (styles.css:13) */
#lhReader [hidden] { display: none !important; }

/* .reader-body padding, centred — the original .reader-body + --reader-w */
#lhReader .lh-wrap {
  max-width: var(--lh-reader-w);      /* JS may override inline (⟨ ⟩ width btns) */
  margin: 0 auto;
  padding: 1.1rem 1.2rem 4rem;
}
#lhReader .reader-body { padding: 0; }   /* no double padding if JS keeps it */
#lhReader section { margin-bottom: 1.5rem; }   /* .reader section */

/* .reader-head — was a fixed flex header; here it sticks to the top of the scroll */
#lhReader .reader-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: -1.1rem -1.2rem 1.1rem;     /* break out of .lh-wrap padding */
  padding: .8rem 1.1rem;
  background: var(--lh-surface);
  border-bottom: 1px solid var(--lh-line);
}
#lhReader input.reader-title {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: .6rem .75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--lh-ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
}
#lhReader input.reader-title:hover { border-color: var(--lh-line); }

/* ---------- B. typography + resets that beat FASTMODE's globals ---------- */

#lhReader h1,
#lhReader h2,
#lhReader h3 {
  line-height: 1.2;
  margin: 0 0 .5rem;
  font-weight: var(--lh-heading-weight);
  letter-spacing: var(--lh-tracking);
  color: var(--lh-ink);
}
#lhReader h2 { font-size: 1.15rem; }
#lhReader h3 {                       /* the uppercase section headers */
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lh-ink-soft);
}
#lhReader p { margin: 0 0 .6rem; color: inherit; }   /* FASTMODE: p{color:var(--muted)} */
#lhReader a { color: var(--lh-accent); }
#lhReader code {
  font-family: var(--lh-mono);
  font-size: .85em;
  background: var(--lh-surface-2);
  padding: .1em .4em;
  border-radius: 5px;
  color: var(--lh-accent);
}
#lhReader .muted  { color: var(--lh-ink-soft); }
#lhReader .small  { font-size: .85rem; }
#lhReader .center { text-align: center; }
#lhReader .inline { display: inline; }
#lhReader .pad-top { padding-top: .9rem; }
#lhReader .row { display: flex; align-items: center; gap: .6rem; }
#lhReader .row.space { justify-content: space-between; }
#lhReader .row.end   { justify-content: flex-end; }
#lhReader .row.wrap  { flex-wrap: wrap; }
#lhReader .stack { display: flex; flex-direction: column; gap: 1rem; }

/* FASTMODE label{display:block;margin:12px 0 6px;color:var(--muted)} */
#lhReader label { display: inline; margin: 0; color: inherit; }

/* THE GLOBAL-100% GUARD — neutralise `input, textarea, button {width:100%}`
   and `button {margin-top:12px}` before anything opts back in below. */
#lhReader button,
#lhReader input,
#lhReader select,
#lhReader textarea {
  width: auto;
  margin: 0;
  font: inherit;
}
/* checkboxes would otherwise become 100%-wide 10px-padded boxes */
#lhReader input[type=checkbox],
#lhReader input[type=radio] {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--lh-accent);
}

/* ---------- C. controls ---------- */

#lhReader input[type=text],
#lhReader input[type=search],
#lhReader input[type=number],
#lhReader textarea,
#lhReader select {
  width: 100%;                       /* intentional: the reader column is 780px */
  padding: .6rem .75rem;
  border: 1px solid var(--lh-line);
  border-radius: 10px;
  background: var(--lh-bg-2);
  color: var(--lh-ink);
  font: inherit;
  font-size: .95rem;
}
#lhReader textarea {
  min-height: 0;                     /* FASTMODE: textarea{min-height:170px} */
  resize: vertical;
  line-height: 1.55;
  font-family: var(--lh-sans);       /* FASTMODE forces mono; original is sans */
}
#lhReader input:focus,
#lhReader textarea:focus,
#lhReader select:focus {
  outline: none;
  border-color: var(--lh-accent);
  box-shadow: 0 0 0 3px var(--lh-accent-soft);
}
#lhReader .inline-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  color: var(--lh-ink-soft);
}
#lhReader .inline-label select,
#lhReader .inline-label input { width: auto; }

/* ---------- D. buttons ---------- */

#lhReader .btn {
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: var(--lh-border-w) solid var(--lh-line);
  background: var(--lh-surface-2);
  color: var(--lh-ink);
  padding: .55rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;             /* the ↗ Original <a class="btn"> */
  transition: transform .06s ease, filter .12s ease, background .12s ease;
}
#lhReader .btn:hover {
  background: #1f3a3b;               /* fallback for the mix below */
  background: color-mix(in srgb, var(--lh-accent) 12%, var(--lh-surface-2));
  border-color: var(--lh-line);      /* beats FASTMODE button:hover neon blue */
  color: var(--lh-ink);
}
#lhReader .btn:active { transform: translateY(1px); }
#lhReader .btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--lh-accent)), var(--lh-accent));
  border-color: transparent;
  color: var(--lh-accent-ink);
  font-weight: 700;
  box-shadow: 0 0 20px -8px var(--lh-accent);
}
#lhReader .btn.primary:hover {
  filter: brightness(1.06);
  color: var(--lh-accent-ink);
  border-color: transparent;
}
/* order matters: .ghost after :hover, exactly like the original, so a ghost
   button stays transparent on hover */
#lhReader .btn.ghost { background: transparent; }
#lhReader .btn.danger { color: var(--lh-warn); border-color: var(--lh-warn-40); }
#lhReader .btn.danger:hover {
  background: var(--lh-warn-soft);
  color: var(--lh-warn);
  border-color: var(--lh-warn-40);
}
#lhReader .btn:disabled { opacity: .5; cursor: not-allowed; }
#lhReader .btn.small { padding: .35rem .65rem; font-size: .84rem; }

#lhReader .icon-btn {
  width: auto;
  border: 0;
  background: transparent;
  color: var(--lh-ink-soft);
  font-size: 1.15rem;
  cursor: pointer;
  padding: .3rem .55rem;
  border-radius: 8px;
  line-height: 1;
}
#lhReader .icon-btn:hover {
  background: var(--lh-surface-2);
  color: var(--lh-ink);
  border-color: transparent;
}

/* ---------- E. badges + the meta line ---------- */

#lhReader .badge {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  /* calm neutral chip — was an alarming warn-red; these are informational (book / N highlights) */
  background: rgba(255,255,255,.06);
  color: var(--lh-ink-soft, #9aa7ba);
  border: 1px solid var(--lh-line, #2a3542);
}
#lhReader .badge.calm {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-color: var(--lh-accent-35);
}
#lhReader .reader-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .8rem;
  font-size: .85rem;
}
#lhReader .reader-meta .rm-cat { display: inline-flex; align-items: center; gap: .35rem; }
#lhReader .reader-meta .rm-ic  { opacity: .7; }
#lhReader .reader-meta input {
  width: 12rem;
  max-width: 45vw;
  padding: .32rem .55rem;
  font-size: .88rem;
}
#lhReader .reader-meta .badge,
#lhReader .reader-meta .badge.calm { cursor: help; }

/* ---------- F. pinned video + quick-note bar + the ▾ add menu ---------- */

#lhReader .video-pin {
  position: sticky;
  top: var(--lh-head-h);             /* sits under the sticky .reader-head */
  z-index: 3;
  margin: -1.1rem -1.2rem 1.1rem;    /* breaks out of .lh-wrap padding */
  padding: .7rem 1.2rem;
  background: var(--lh-bg);
  border-bottom: 1px solid var(--lh-line);
}
#lhReader .video-frame {
  position: relative;
  height: min(var(--lh-video-cap),
              calc((min(max(var(--lh-reader-w), 360px), 100vw) - 2.4rem) * 0.5625));
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--lh-radius);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--lh-line);
}
#lhReader .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#lhReader .quick-note { display: flex; gap: .5rem; margin-top: .6rem; align-items: center; }
#lhReader .quick-note input { flex: 1; min-width: 0; }
#lhReader .quick-note .stamp-toggle {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-size: .85rem;
  color: var(--lh-ink-soft);
  white-space: nowrap;
  margin: 0;
}
#lhReader .quick-note .stamp-toggle input { width: auto; }
#lhReader .qa-menu {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  /* float free of the note bar — a fixed overlay positioned in JS, never grows the page */
  position: fixed;
  z-index: 2400;
  width: 232px;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--lh-surface-2);
  border: 1px solid var(--lh-line);
  border-radius: 10px;
  padding: .3rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
#lhReader .qa-menu button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--lh-ink);
  padding: .4rem .6rem;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: .88rem;
}
#lhReader .qa-menu button:hover {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-color: transparent;
}
#lhReader .qa-menu button.on { color: var(--lh-accent); font-weight: 600; }
#lhReader .qa-menu .qa-head { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lh-ink-soft); padding: .3rem .6rem .1rem; }
#lhReader .qa-menu .qa-sep { border-top: 1px solid var(--lh-line); margin: .2rem .2rem; }
#lhReader .qa-menu .qa-new { color: var(--lh-ink-soft); }

/* ---------- G. the action bar ---------- */

#lhReader .reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

/* ---------- H. collapsible sections (details.rsec) ---------- */

/* first: neutralise FASTMODE's universal neon-chevron (styles.css ~924-942) */
#lhReader details > summary { padding-left: 0; position: static; list-style: none; }
#lhReader details > summary::-webkit-details-marker { display: none; }
#lhReader details > summary::marker { content: ""; }
#lhReader details > summary::before {
  position: static;
  border: 0;
  width: auto;
  height: auto;
  transform: none;
  transition: none;
  opacity: 1;
  content: "";
}
/* then: the learning_hub section itself */
#lhReader details.rsec { border-top: 1px solid var(--lh-line); }
#lhReader details.rsec > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 0 .5rem;
}
#lhReader details.rsec > summary::-webkit-details-marker { display: none; }
#lhReader details.rsec > summary::before {
  content: "\25B8";                  /* ▸ */
  color: var(--lh-accent);
  font-size: .8rem;
}
#lhReader details.rsec[open] > summary::before { content: "\25BE"; }   /* ▾ */
#lhReader details.rsec > summary h3 { margin: 0; }
#lhReader .rsec .count {
  font-family: var(--lh-mono);
  color: var(--lh-ink-soft);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
#lhReader .rsec-body { padding-bottom: 1.1rem; }
#lhReader .rsec-handle {
  width: auto;
  border: 0;
  background: transparent;
  color: var(--lh-ink-soft);
  cursor: grab;
  font-size: 1rem;
  padding: 0 .2rem;
  line-height: 1;
}
#lhReader .rsec-handle:hover { color: var(--lh-ink-soft); border-color: transparent; }
#lhReader .rsec-handle:active { cursor: grabbing; }
#lhReader .rsec-move { margin-left: .3rem; display: inline-flex; }
#lhReader .rsec-move .icon-btn { font-size: .7rem; padding: .1rem .3rem; }
#lhReader details.rsec.sec-dragging { opacity: .5; }

/* ---------- I. study timer ---------- */

#lhReader .timer { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
#lhReader .timer-clock {
  font-family: var(--lh-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lh-c2);
}
#lhReader .status-group { display: flex; gap: .3rem; }

/* ---------- J. topics ---------- */

#lhReader .topic-row { display: flex; flex-wrap: wrap; gap: .32rem; }
#lhReader .topic {
  width: auto;
  font-size: .73rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: var(--lh-surface-2);
  color: var(--lh-ink-soft);
  border: 1px solid var(--lh-line);
}
#lhReader .topic.tclick { cursor: pointer; font: inherit; font-size: .73rem; }
#lhReader .topic.tclick:hover {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-color: var(--lh-accent-40);
}

/* ---------- K. My notes (rendered read mode) ---------- */

#lhReader .notes-view {
  background: var(--lh-bg-2);
  border: 1px solid var(--lh-line);
  border-radius: 10px;
  padding: .7rem .85rem;
  font-size: .94rem;
  line-height: 1.7;
  min-height: 4.5rem;
  overflow-wrap: anywhere;
  cursor: text;
}
#lhReader .notes-view .note-line { min-height: 1.2em; }
#lhReader .notes-view .note-line.blank { height: .6em; }
#lhReader .notes-view .empty { color: var(--lh-ink-soft); font-style: italic; }
#lhReader #notesModeBtn { margin-left: auto; }
#lhReader #notesHint { margin: .4rem 0 0; }

/* ---------- L. timestamp pills ---------- */

#lhReader .ts {
  width: auto;
  font-family: var(--lh-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--lh-accent-ink);
  background: var(--lh-accent);
  border: 0;
  border-radius: 6px;
  padding: .12rem .45rem;
  margin-right: .55rem;
  cursor: pointer;
}
#lhReader .ts:hover {
  filter: brightness(1.1);
  color: var(--lh-accent-ink);       /* beats FASTMODE button:hover */
  border-color: transparent;
}
#lhReader .ts.flat {
  background: transparent;
  color: var(--lh-ink-soft);
  padding-left: 0;
}
#lhReader .ts.flat:hover { filter: none; color: var(--lh-ink-soft); }
#lhReader .ts.note-ts { margin-right: .35rem; margin-left: .1rem; vertical-align: baseline; }

/* ---------- M. key points · do-this · favorites ---------- */

#lhReader #pointSearch { margin-bottom: .6rem; }
#lhReader #transcriptSearch { margin-bottom: .5rem; }

#lhReader .point-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
#lhReader .point-list li {
  background: var(--lh-surface);
  border: 1px solid var(--lh-line);
  border-left: 2px solid var(--lh-c5);
  border-radius: 10px;
  padding: .6rem .8rem;
  font-size: .94rem;
}
#lhReader .point-list li.seekable { cursor: pointer; }
#lhReader .point-list li.seekable:hover {
  border-left-color: var(--lh-accent);
  background: #162528;               /* fallback for the mix below */
  background: color-mix(in srgb, var(--lh-accent) 6%, var(--lh-surface));
}
#lhReader .point-list li.muted { border-left-color: var(--lh-line); }
#lhReader .point-list mark {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-radius: 3px;
  padding: 0 .1em;
  font-weight: 700;
}

#lhReader .check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
#lhReader .check-list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .94rem; }
#lhReader .check-list input { width: auto; margin-top: .35rem; accent-color: var(--lh-accent); }

#lhReader .fav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
#lhReader .fav-list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--lh-surface);
  border: 1px solid var(--lh-line);
  border-radius: 9px;
  padding: .35rem .55rem;
}
#lhReader .fav-list .fav-label { font-size: .92rem; }
#lhReader .fav-list .fav-label.tclick { cursor: pointer; }
#lhReader .fav-list .fav-label.tclick:hover { color: var(--lh-accent); }
#lhReader .fav-list .fav-del { margin-left: auto; }

/* ---------- N. transcript ---------- */

/* the full transcript reads in the SAME book theme as the book/notes: its bg/ink follow the
   reading theme (--rd-*), and its font/size/spacing are painted inline by _lhApplyReadPrefs. */
#lhReader .transcript-box {
  max-height: var(--lh-transcript-h);
  overflow-y: auto;
  background: var(--rd-bg, var(--lh-bg-2));
  color: var(--rd-ink, var(--lh-ink));
  border: var(--lh-border-w) solid var(--lh-line);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  line-height: 1.75;
  resize: vertical;
  transition: background .18s, color .18s;
}
#lhReader .transcript-box.rd-light { border-color: rgba(0,0,0,.14); }
#lhReader .transcript-line {
  display: block;
  padding: .18rem .4rem;
  border-radius: 6px;
  margin: .05em -.4rem;
}
#lhReader .transcript-line.seekable { cursor: pointer; }
#lhReader .transcript-line.seekable:hover { background: color-mix(in srgb, var(--rd-ink, var(--lh-ink)) 12%, transparent); }
/* the line playing right now (audio/video follow), same feel as the karaoke book highlight */
#lhReader .transcript-line.tl-now { background: var(--rd-hlbg, var(--lh-accent-soft)); box-shadow: inset 3px 0 0 var(--rd-mark, var(--lh-accent)); }
/* 🎧 audio player pin — the transcript-with-audio experience */
#lhReader .lh-audio-pin { background: var(--lh-surface, #141922); border: 1px solid var(--lh-line, #2a3542); border-radius: 12px; padding: 12px 14px; }
#lhReader .lh-audio-head { font-size: 14px; }
#lhReader .lh-audio-pin audio { border-radius: 8px; }
#lhReader .transcript-line mark {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-radius: 3px;
  padding: 0 .12em;
  font-weight: 700;
}

/* ---------- O. misc: generic marks, scrollbars ---------- */

#lhReader mark {
  background: var(--lh-accent-soft);
  color: var(--lh-accent);
  border-radius: 3px;
  padding: 0 .1em;
}
/* OPTIONAL (not in the original — matches the Midnight surfaces instead of the
   FASTMODE page scrollbar). Delete for byte-exact parity. */
#lhReader::-webkit-scrollbar,
#lhReader .transcript-box::-webkit-scrollbar { width: 10px; }
#lhReader::-webkit-scrollbar-track,
#lhReader .transcript-box::-webkit-scrollbar-track { background: var(--lh-bg-2); }
#lhReader::-webkit-scrollbar-thumb,
#lhReader .transcript-box::-webkit-scrollbar-thumb {
  background: var(--lh-surface-2);
  border-radius: 999px;
  border: 2px solid var(--lh-bg-2);
}
#lhReader::-webkit-scrollbar-thumb:hover,
#lhReader .transcript-box::-webkit-scrollbar-thumb:hover { background: var(--lh-line); }

/* right-click menu — showContextMenu() appends it to document.body, so it lives
   OUTSIDE #lhReader and needs its own scope + its own copy of the tokens.
   Have the JS emit class="ctx-menu lh-ctx". */
.ctx-menu.lh-ctx {
  --lh-surface: #141922;
  --lh-surface-2: #1b2431;
  --lh-ink: #e7ecf4;
  --lh-line: #253141;
  --lh-accent: #3ddc84;
  --lh-warn: #ef5350;
  --lh-accent-soft: color-mix(in srgb, var(--lh-accent) 16%, transparent);
  --lh-warn-soft: color-mix(in srgb, var(--lh-warn) 16%, transparent);
  position: fixed;
  z-index: 2000;
  min-width: 190px;
  background: var(--lh-surface);
  border: 1px solid var(--lh-line);
  border-radius: 10px;
  box-shadow: 0 16px 44px -14px #000;
  padding: .3rem;
  display: flex;
  flex-direction: column;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.ctx-menu.lh-ctx .ctx-item {
  width: 100%;
  margin: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--lh-ink);
  font: inherit;
  font-size: .9rem;
  padding: .45rem .6rem;
  border-radius: 7px;
  cursor: pointer;
}
.ctx-menu.lh-ctx .ctx-item:hover { background: var(--lh-accent-soft); color: var(--lh-accent); }
.ctx-menu.lh-ctx .ctx-item.danger { color: var(--lh-warn); }
.ctx-menu.lh-ctx .ctx-item.danger:hover { background: var(--lh-warn-soft); color: var(--lh-warn); }
.ctx-menu.lh-ctx .ctx-sep { height: 1px; background: var(--lh-line); margin: .25rem .3rem; }

/* ---------- P. narrow screens (learning_hub @media 640px) ---------- */

@media (max-width: 640px) {
  #lhReader { --lh-reader-w: 100vw; }
  #lhReader .lh-wrap { padding: 1rem .9rem 3rem; }
  #lhReader .reader-head { margin: -1rem -.9rem 1rem; padding: .7rem .9rem; }
  #lhReader .video-pin  { margin: -1rem -.9rem 1rem; padding: .6rem .9rem; }
  #lhReader .reader-meta input { width: 9rem; }
}

/* ---------- Q. color-mix fallback (custom properties can't self-fall-back) ----
   A custom property holding an unsupported color-mix() is NOT ignored at parse
   time — it invalidates at computed-value time and the property becomes unset.
   So restate the tints statically for engines without color-mix. Every value
   below is the exact sRGB equivalent of its mix with `transparent`. */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
  #lhReader, .ctx-menu.lh-ctx {
    --lh-accent-soft: rgba(61, 220, 132, .16);
    --lh-accent-35:   rgba(61, 220, 132, .35);
    --lh-accent-40:   rgba(61, 220, 132, .40);
    --lh-accent-45:   rgba(61, 220, 132, .45);
    --lh-warn-soft:   rgba(239, 83, 80, .16);
    --lh-warn-35:     rgba(239, 83, 80, .35);
    --lh-warn-40:     rgba(239, 83, 80, .40);
  }
  #lhReader .btn.primary { background: var(--lh-accent); }
}


/* ---- FASTMODE-only additions (learning_hub has no PDF reader) ---- */
#lhReader .lh-top { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:6;
  background:var(--lh-bg); padding:10px 0; }
#lhReader input.lh-title { width:auto; flex:1; font-size:18px; font-weight:700; background:transparent;
  border:none; color:var(--lh-ink); padding:4px; }
#lhReader input.lh-title:focus { outline:1px solid var(--lh-line); border-radius:6px; }
#lhReader .lh-pdfbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
#lhReader .lh-pdfbox { border:1px solid var(--lh-line); border-radius:12px; background:var(--lh-surface);
  max-height:46vh; overflow-y:auto; padding:14px 18px;
  font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:17px; line-height:1.7; color:var(--lh-ink); }
/* book structure: paragraphs indent + space, headings stand out */
#lhReader .lh-pdfbox .lh-p { margin: 0 0 .35em; text-indent: 1.4em; }
#lhReader .lh-pdfbox .lh-p:first-child, #lhReader .lh-pdfbox .lh-h1 + .lh-p,
#lhReader .lh-pdfbox .lh-h2 + .lh-p { text-indent: 0; }   /* first line after a heading is flush */
/* Chapter titles & sub-heads get their OWN colour so they clearly separate from body text.
   --rd-head is a distinct amber; overridden to a darker tone on light (paper) themes. */
#lhReader .lh-pdfbox { --rd-head: #f0b24a; }
#lhReader .lh-pdfbox.rd-light { --rd-head: #b5701a; }
#lhReader .lh-pdfbox .lh-h1 { margin: 1.6em 0 .55em; font-size: 1.55em; font-weight: 800;
  line-height: 1.22; letter-spacing: .01em; color: var(--rd-head);
  padding-bottom: .25em; border-bottom: 2px solid color-mix(in srgb, var(--rd-head) 40%, transparent);
  /* raised / embossed 3-D feel */
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35), 0 1px 0 color-mix(in srgb, var(--rd-head) 30%, transparent); }
#lhReader .lh-pdfbox .lh-h2 { margin: 1.2em 0 .4em; font-size: 1.2em; font-weight: 700;
  line-height: 1.3; color: color-mix(in srgb, var(--rd-head) 82%, var(--rd-ink, var(--lh-ink)));
  text-shadow: 0 1px 0 rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); }
#lhReader .lh-pdfbox.rd-light .lh-h1, #lhReader .lh-pdfbox.rd-light .lh-h2 { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.18); }
/* headings inherit their heading colour even on the karaoke word-spans (don't dim / re-tint them) */
#lhReader .lh-pdfbox .lh-h1 .lh-pdfword, #lhReader .lh-pdfbox .lh-h2 .lh-pdfword { opacity: 1 !important; color: inherit; }
#lhReader textarea.lh-ta { width:100%; background:var(--lh-surface); border:1px solid var(--lh-line);
  color:var(--lh-ink); border-radius:9px; padding:9px; font-size:13.5px; line-height:1.55; font-family:inherit; }
/* an empty count pill must not render as a stray box */
#lhReader .count:empty { display:none; }
#lhReader .badge:empty { display:none; }

/* ============================================================================
   LEARNING-HUB LIBRARY GRID — exact port of learning_hub's stat-chip row and
   card tiles, scoped to #strategyLibSection so nothing leaks into FASTMODE.
   Every control carries width:auto (the global button{width:100%} guard).
   ========================================================================== */
#strategyLibSection {
  --lg-bg: #0d1017; --lg-surface: #141922; --lg-surface-2: #1b2431;
  --lg-ink: #e7ecf4; --lg-ink-soft: #8a95a8; --lg-line: #253141;
  --lg-accent: #5cbe83; --lg-c2: #f4c150; --lg-c3: #ff6b9d; --lg-c4: #ff8a5b; --lg-c5: #4fd1e0;
  --lg-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
}
/* ---- the stat-chip row ---- */
#strategyLibSection .statbar {
  display: flex; gap: .6rem; flex-wrap: wrap; margin: 4px 0 12px;
}
#strategyLibSection .stat-chip {
  width: auto; flex: 1 1 150px; min-width: 0;
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; cursor: pointer; text-align: left;
  background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: 14px;
  color: var(--lg-ink); transition: border-color .14s, background .14s, transform .14s;
}
#strategyLibSection .stat-chip:hover { border-color: var(--lg-accent); transform: translateY(-1px); }
#strategyLibSection .stat-chip .ic { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
#strategyLibSection .stat-chip .body { display: flex; flex-direction: column; min-width: 0; }
#strategyLibSection .stat-chip .big { font-size: 1.32rem; font-weight: 800; line-height: 1.05; }
#strategyLibSection .stat-chip .lbl { font-size: .72rem; color: var(--lg-ink-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* each chip gets its own accent, like learning_hub */
#strategyLibSection .stat-chip[data-k="cards"]    .big { color: var(--lg-accent); }
#strategyLibSection .stat-chip[data-k="due"]      .big { color: var(--lg-c3); }
#strategyLibSection .stat-chip[data-k="time"]     .big { color: var(--lg-c5); }
#strategyLibSection .stat-chip[data-k="done"]     .big { color: var(--lg-c2); }
#strategyLibSection .stat-chip[data-k="studying"] .big { color: var(--lg-c4); }

/* ---- the card tiles ---- */
#strategyLibSection #slGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;
}
#strategyLibSection .tile {
  background: var(--lg-surface); border: 1px solid var(--lg-line); border-radius: 14px;
  padding: .9rem 1rem; cursor: pointer; display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
#strategyLibSection .tile:hover {
  border-color: var(--lg-accent); transform: translateY(-2px);
  box-shadow: 0 10px 30px -18px var(--lg-accent);
}
#strategyLibSection .tile h3 {
  margin: 0; font-size: .98rem; line-height: 1.35; color: var(--lg-ink); font-weight: 700;
}
#strategyLibSection .tile .status-dot { color: var(--lg-accent); font-size: .8rem; }
#strategyLibSection .tile .topic-row { display: flex; flex-wrap: wrap; gap: .3rem; }
#strategyLibSection .tile .topic {
  width: auto; font-size: .7rem; padding: .1rem .55rem; border-radius: 999px;
  background: var(--lg-surface-2); border: 1px solid var(--lg-line); color: var(--lg-ink-soft);
}
#strategyLibSection .tile .tile-sum {
  margin: 0; font-size: .84rem; line-height: 1.5; color: var(--lg-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#strategyLibSection .tile .tile-meta {
  margin-top: auto; font-family: var(--lg-mono); font-size: .68rem; line-height: 1.7;
  color: var(--lg-ink-soft);
}
#strategyLibSection .tile .tile-meta b { color: var(--lg-c3); }
#strategyLibSection .tile .tile-meta .muted { color: #63708a; }

/* ---- the search bar + category chips ---- */
#strategyLibSection #slSearch {
  background: var(--lg-surface); border: 1px solid var(--lg-line); color: var(--lg-ink);
  border-radius: 12px; padding: 10px 14px; font-size: 13px;
}
#strategyLibSection #slSearch:focus { outline: none; border-color: var(--lg-accent); }

/* ---- reader as a right-side panel with a drag-to-resize left edge (learning_hub) ---- */
#lhReader { left: auto; right: 0; top: 0; bottom: 0; width: var(--lh-reader-w, min(880px, 100vw));
  border-left: 1px solid var(--lh-line); box-shadow: -20px 0 60px -20px #000; }
#lhReader.resizing { user-select: none; }
#lhReader .lh-resize {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 10px; cursor: ew-resize;
  z-index: 9; background: transparent; touch-action: none;
}
#lhReader .lh-resize::after {
  content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .14s;
}
#lhReader .lh-resize:hover::after, #lhReader.resizing .lh-resize::after { background: var(--lh-accent); }
html.lh-resizing, html.lh-resizing * { cursor: ew-resize !important; user-select: none !important; }
@media (max-width: 900px) { #lhReader { width: 100vw; } #lhReader .lh-resize { display: none; } }

#lhReader .lh-wrap { max-width: 100%; }

/* ---- 🎤 live (karaoke) transcript under the video ---- */
#lhReader .lh-live-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: .5rem; }
#lhReader .lh-live {
  margin-top: .5rem; max-height: 30vh; overflow-y: auto;
  border: 1px solid var(--lh-line); border-radius: var(--lh-radius);
  background: var(--rd-bg, var(--lh-surface)); color: var(--rd-ink, var(--lh-ink));
  padding: 10px 12px; font-size: 15px; line-height: 1.85;
  transition: background .18s, color .18s;
}
#lhReader .lh-live.rd-light { border-color: rgba(0,0,0,.14); }
#lhReader .lh-live-line {
  padding: 3px 6px; border-radius: 8px; margin: 1px 0; cursor: pointer; text-indent: 0;
  color: var(--rd-soft, var(--lh-ink-soft)); transition: color .15s, background .15s;
}
#lhReader .lh-live-line:hover { background: rgba(255,255,255,.03); }
#lhReader .lh-live.rd-light .lh-live-line:hover { background: rgba(0,0,0,.05); }
#lhReader .lh-live-line[data-para] { margin-top: .9em; }
#lhReader .lh-live-h {                 /* key-point section header inside the transcript */
  margin: 1.15em 0 .45em; font-size: 1.16em; font-weight: 700; line-height: 1.3;
  color: var(--rd-ink, var(--lh-ink));
}
#lhReader .lh-live-line.cur {
  background: color-mix(in srgb, var(--rd-mark, rgba(61,220,132,.30)) 32%, transparent);
  color: var(--rd-ink, var(--lh-ink));
}
#lhReader .lh-live-time {
  width: auto; font-family: var(--lh-mono); font-size: .72em;
  color: var(--lh-accent); background: transparent; border: none;
  margin-right: 6px; cursor: pointer; padding: 0;
}
#lhReader .lh-live-w { transition: background .09s ease, color .09s ease; border-radius: 3px; }
/* word already spoken (bright), the word NOW (mark), and the 2 neighbours (softer) — same
   background-mark treatment as the PDF pacer, so both consoles read identically */
#lhReader .lh-live-line.cur .lh-live-w.said { color: var(--rd-ink, var(--lh-ink)); opacity: .95; }
#lhReader .lh-live-line.cur .lh-live-w.now {
  background: var(--rd-hlbg, rgba(61,220,132,.34));
  color: var(--rd-ink, var(--lh-ink)); box-shadow: inset 0 -2px 0 var(--rd-mark, #3ddc84);
}
#lhReader .lh-live-line.cur .lh-live-w.near {
  background: var(--rd-hlbg-near, rgba(61,220,132,.12));
  color: var(--rd-ink, var(--lh-ink));
}
#lhReader .lh-live:not(.rd-light) .lh-live-w:not(.said):not(.now):not(.near) { opacity: .88; }
@supports not (color: color-mix(in srgb, white, black)) {
  #lhReader .lh-live-line.cur { background: rgba(61,220,132,.10); }
  #lhReader .lh-live-line.cur .lh-live-w.now  { background: rgba(61,220,132,.26); }
  #lhReader .lh-live-line.cur .lh-live-w.near { background: rgba(61,220,132,.12); }
}

/* ---- 🖱 right-click capture menu (lives on <body>, so it's NOT scoped to #lhReader) ---- */
#lhCapMenu {
  background: #141922; border: 1px solid #253141; border-radius: 12px;
  padding: 5px; box-shadow: 0 16px 44px rgba(0,0,0,.6);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #e7ecf4;
  display: flex; flex-direction: column; gap: 1px;
}
#lhCapMenu button {
  width: 100%; text-align: left; background: transparent; border: none; color: #e7ecf4;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap;
}
#lhCapMenu button:hover { background: #1f2937; color: #3ddc84; }

/* ---- 📕 PDF karaoke: word-level read-aloud highlight in the console reader ----
   The authoritative .now / .near styling lives further down (the wash rule). Keep only the
   transition here so the highlight glides on. */
/* fast fade so the highlight is fully lit well within one pacing step (~260ms at 230 wpm) —
   a slow .28s fade never reached full opacity before the word advanced, so it looked invisible. */
#lhReader .lh-pdfword { transition: background .16s ease, color .16s ease, box-shadow .16s ease; border-radius: 3px; }

/* ---- make the reading consoles drag-resizable (both axes; custom grip) ---- */
#lhReader .lh-live { resize: both; overflow: auto; min-height: 90px; min-width: 240px; max-width: 100%; }
#lhReader .lh-pdfbox { resize: both; overflow: auto; min-height: 120px; min-width: 260px; max-width: 100%; }
#lhReader .lh-live, #lhReader .lh-pdfbox { max-height: 82vh; }   /* allow tall */
/* modern grip in place of the dated browser triangle (Chromium/Edge) */
#lhReader .lh-live::-webkit-resizer,
#lhReader .lh-pdfbox::-webkit-resizer {
  background-color: transparent;
  background-image: linear-gradient(135deg,
    transparent 0 44%,
    var(--lh-accent) 44% 51%,
    transparent 51% 65%,
    var(--lh-accent) 65% 72%,
    transparent 72%);
}
@supports not (background: linear-gradient(135deg, red 44% 51%, blue 51%)) {
  #lhReader .lh-live::-webkit-resizer,
  #lhReader .lh-pdfbox::-webkit-resizer { background: transparent; }
}
/* the video window size is user-driven via --lh-video-cap (buttons in the bar) */

#lhReader .lh-vidbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }

/* ============================================================================
   📕 PDF READING CONSOLE — one consistent control system.
   Before: .btn + .badge spans + a raw range + a checkbox + a select all sat in the
   same row at different heights. Now every control is a .tbtn at ONE height,
   grouped into .lh-seg pills. Reading surface is themed via --rd-* vars.
   ========================================================================== */
#lhReader .lh-pdfbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#lhReader .lh-pdfbar > b { font-size: 12px; font-weight: 600; color: var(--lh-ink-soft); margin-right: 2px; }
/* one control, one height, one radius */
#lhReader .tbtn {
  width: auto; flex: 0 0 auto;
  height: 30px; min-width: 30px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; color: var(--lh-ink);
  border: none; border-radius: 8px; margin: 0;
  font: 500 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background .13s, color .13s;
}
#lhReader .tbtn:hover { background: rgba(255,255,255,.07); }
#lhReader .tbtn.on { background: rgba(61,220,132,.16); color: var(--lh-accent); }
/* the Read button while actively speaking = a lit STOP, in the app's green accent so it sits with
   the rest of the toolbar (no clashing amber/red). The pause toggle matches. */
#lhReader .tbtn.reading {
  background: var(--lh-accent-soft, rgba(61,220,132,.16)); color: var(--lh-accent, #3ddc84);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lh-accent, #3ddc84) 45%, transparent);
}
#lhReader #lhPdfPause { color: var(--lh-accent, #3ddc84); }
#lhReader #lhPdfPause.on { background: var(--lh-accent-soft, rgba(61,220,132,.16)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lh-accent, #3ddc84) 45%, transparent); }
/* 🔖 bookmarked word — a small left tab so you can spot it while scrolling */
#lhReader .lh-pdfword.lh-bookmark { box-shadow: -3px 0 0 var(--lh-accent, #3ddc84); border-radius: 2px; }
#lhReader .tbtn.wide { padding: 0 12px; }
#lhReader .tbtn-read { cursor: default; color: var(--lh-ink-soft); font-variant-numeric: tabular-nums; }
#lhReader .tbtn-read:hover { background: transparent; }
/* segmented group = the pill that holds the controls together */
#lhReader .lh-seg {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--lh-surface); border: 1px solid var(--lh-line); border-radius: 11px;
}
/* ---- 🎬 VIDEO CONSOLE — same control system as the book bar ---- */
#lhReader .lh-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
#lhReader .lh-bar > b { font-size: 12px; font-weight: 600; color: var(--lh-ink-soft); margin-right: 2px; }
/* selects/inputs inside a bar or the Aa panel escape the global input{width:100%} */
#lhReader .lh-seg select, #lhReader .lh-aa select, #lhReader .lh-aa input { width: auto; }
/* the hint / resume line — a quiet caption, never a red warning pill */
#lhReader .lh-hint { width: auto; margin: 6px 0 0; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; font-size: 11.5px; line-height: 1.5; color: var(--lh-ink-soft); }
#lhReader .lh-hint b { color: var(--lh-accent); font-weight: 600; }
#lhReader button.lh-hint-act { width: auto; margin: 0; height: 24px; padding: 0 10px;
  border: 1px solid var(--lh-line); border-radius: 999px; background: var(--lh-surface);
  color: var(--lh-accent); font: 600 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; }
#lhReader button.lh-hint-act:hover { border-color: var(--lh-accent); }
/* the reading surface, themed */
#lhReader .lh-pdfbox {
  background: var(--rd-bg, var(--lh-surface));
  color: var(--rd-ink, var(--lh-ink));
  margin: 0 auto;                       /* centre the measured column */
  transition: background .18s, color .18s;
}
#lhReader .lh-pdfbox.rd-light { border-color: rgba(0,0,0,.14); }
#lhReader .lh-pdfword.now {          /* soft wash + underline cue — uses a JS-computed plain rgba */
  background: var(--rd-hlbg, rgba(61,220,132,.34)) !important;
  color: var(--rd-ink, var(--lh-ink));
  box-shadow: inset 0 -2px 0 var(--rd-mark, #3ddc84);
}
#lhReader .lh-pdfword.near {          /* the words either side of centre — barely lit */
  background: var(--rd-hlbg-near, rgba(61,220,132,.12));
  color: var(--rd-ink, var(--lh-ink)); border-radius: 3px;
}
#lhReader .lh-pdfword.said { color: var(--rd-ink, var(--lh-ink)); opacity: .95; }
#lhReader .lh-pdfbox:not(.rd-light) .lh-pdfword:not(.said):not(.now) { opacity: .88; }

/* 📁 note-folder bodies read like the book, but expand naturally in the section (no fixed
   scroll box) and keep bullet lines separated for readability. */
#lhReader .lh-nfbody { height: auto !important; max-height: none !important; overflow: visible !important;
  border: none; padding: 6px 2px 2px; }
#lhReader .lh-nfbody .lh-np { margin: 0 0 .7em; }
#lhReader .lh-nfbody .lh-nspace { height: .5em; }
#lhReader .lh-nfbar { margin-bottom: 6px; }

/* “Block” highlight — the original solid marker (user can switch back to it in Aa → Highlight).
   Full-strength fill, no underline; the near-words get a lighter block, like the old design. */
#lhReader .lh-pdfbox.rd-hl-block .lh-pdfword.now,
#lhReader .lh-live.rd-hl-block .lh-live-line.cur .lh-live-w.now {
  background: var(--rd-mark, rgba(61,220,132,.30)) !important;
  box-shadow: none !important;
}
#lhReader .lh-pdfbox.rd-hl-block .lh-pdfword.near,
#lhReader .lh-live.rd-hl-block .lh-live-line.cur .lh-live-w.near {
  background: color-mix(in srgb, var(--rd-mark, rgba(61,220,132,.30)) 40%, transparent) !important;
}

/* the Aa reading-comfort popover */
#lhReader .lh-aa, .lh-aa {
  position: fixed; z-index: 1700; width: 320px; max-height: 78vh; overflow-y: auto;
  background: #141922; border: 1px solid #253141; border-radius: 14px; padding: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  font: 12.5px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e7ecf4;
}
.lh-aa .lh-aa-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lh-aa .lh-aa-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.lh-aa .lh-aa-lbl { color: #8a95a8; font-size: 11.5px; }
.lh-aa .lh-aa-lbl b { color: #e7ecf4; }
.lh-aa .lh-aa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; width: 100%; }
.lh-aa .tbtn { width: auto; height: 30px; padding: 0 10px; border: 1px solid #253141; border-radius: 8px;
  background: #1b2431; color: #e7ecf4; font: 500 12px/1 system-ui, sans-serif; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.lh-aa .tbtn:hover { border-color: #3ddc84; }
.lh-aa .tbtn.on { border-color: #3ddc84; color: #3ddc84; }
.lh-aa .lh-seg { display: inline-flex; gap: 2px; padding: 2px; background: #0f141b; border: 1px solid #253141; border-radius: 10px; }
.lh-aa .lh-aa-sel { width: 100%; background: #0f141b; border: 1px solid #253141; color: #e7ecf4;
  border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.lh-aa .lh-aa-sw { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #8a95a8; }
.lh-aa .lh-aa-sw input[type="color"] { width: 30px; height: 26px; padding: 0; border: 1px solid #253141;
  border-radius: 6px; background: none; cursor: pointer; }
.lh-aa .lh-aa-note { font-size: 11px; color: #8a95a8; border-top: 1px solid #253141; padding-top: 8px; }
/* the reading console is no place for a red destructive button */
#lhReader .reader-actions .btn.danger { color: var(--lh-ink-soft); border-color: var(--lh-line); }
#lhReader .reader-actions .btn.danger:hover { color: var(--lh-warn); border-color: var(--lh-warn); }

/* 🏆 "most profitable this period" highlight strip — stands out above the chip lists */
.nd-best-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 9px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(57,255,158,.10), rgba(9,15,22,.6));
  border: 1px solid rgba(57,255,158,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.nd-best-strip .nd-best-title { font-size: 12px; font-weight: 800; color: var(--neon-green,#39ff9e);
  letter-spacing: .01em; margin-right: 2px; }
.nd-best-item { width: auto; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border,#2a3340);
  background: rgba(13,22,33,.7); color: var(--text,#e7ecf4); font: 500 12px/1 system-ui, sans-serif; }
.nd-best-item:hover { border-color: var(--neon-green,#39ff9e); }
.nd-best-item .nd-best-cat { font-size: 10.5px; color: var(--muted,#8a95a8); }
.nd-best-item .nd-best-val { font-weight: 700; }
.nd-best-item .nd-best-pnl { font-weight: 800; color: var(--neon-green,#39ff9e); }
.nd-best-item .nd-best-n { font-size: 10px; color: var(--muted,#8a95a8); }
/* 💸 costliest counterpart — red-tinted */
.nd-worst-strip { background: linear-gradient(180deg, rgba(255,107,125,.10), rgba(9,15,22,.6));
  border-color: rgba(255,107,125,.35); margin-top: -4px; }
.nd-worst-title { color: #ff6b7d !important; }
.nd-worst-item:hover { border-color: #ff6b7d; }
.nd-worst-item .nd-worst-pnl { font-weight: 800; color: #ff6b7d; }
.nd-trend-info { cursor: default; gap: 5px; }
.nd-trend-info:hover { border-color: var(--border,#2a3340); }

/* ⚙ ranking-logic settings for the 🏆/💸 strips */
.nd-best-metric { font-size: 10px; color: var(--muted,#8a95a8); }
button.nd-best-cfg { width: auto; margin: 0; padding: 2px 7px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--border,#2a3340); color: var(--muted,#8a95a8); font-size: 11px; }
button.nd-best-cfg:hover { border-color: var(--neon-green,#39ff9e); color: var(--neon-green,#39ff9e); }
.nd-bestcfg { position: fixed; z-index: 1760; width: 330px; max-height: 82vh; overflow-y: auto; padding: 10px;
  background: #0d1621; border: 1px solid var(--border,#2a3340); border-radius: 14px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.85);
  font: 12.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text,#e7ecf4); }
.nd-bestcfg .ndbc-head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.nd-bestcfg .ndbc-x { width: auto; margin: 0; padding: 0 6px; background: none; border: 0; color: var(--muted,#8a95a8); cursor: pointer; font-size: 14px; }
.nd-bestcfg .ndbc-lbl { font-size: 11px; color: var(--muted,#8a95a8); margin: 6px 0 4px; }
.nd-bestcfg .ndbc-lbl b { color: var(--text,#e7ecf4); }
.nd-bestcfg .ndbc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.nd-bestcfg .ndbc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.nd-bestcfg .ndbc-seg { display: inline-flex; gap: 3px; }
.nd-bestcfg .ndbc-btn { width: auto; margin: 0; padding: 5px 9px; border-radius: 8px; cursor: pointer;
  background: #131c26; border: 1px solid var(--border,#2a3340); color: var(--text,#e7ecf4);
  font: 500 11.5px/1.2 system-ui, sans-serif; text-align: center; }
.nd-bestcfg .ndbc-btn:hover { border-color: var(--neon-green,#39ff9e); }
.nd-bestcfg .ndbc-btn.on { border-color: var(--neon-green,#39ff9e); color: var(--neon-green,#39ff9e); font-weight: 700; }
.nd-bestcfg .ndbc-note { font-size: 10.5px; color: var(--muted,#8a95a8); margin: 6px 0 2px; line-height: 1.5; }

/* 🖱 stats-chip right-click menu */
.nd-chip-menu {
  position: fixed; z-index: 1750; min-width: 210px; padding: 6px;
  background: #0d1621; border: 1px solid var(--border,#2a3340); border-radius: 12px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.8);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text,#e7ecf4);
}
.nd-chip-menu .ndcm-head { font-size: 11px; color: var(--muted,#8a95a8); padding: 3px 8px 7px;
  border-bottom: 1px solid var(--border,#2a3340); margin-bottom: 4px; font-weight: 600;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-chip-menu button { display: block; width: 100%; text-align: left; margin: 1px 0; padding: 7px 9px;
  background: none; border: 0; border-radius: 8px; color: var(--text,#e7ecf4); font: inherit; cursor: pointer; }
.nd-chip-menu button:hover { background: rgba(36,211,255,.12); color: var(--neon-blue,#24d3ff); }

/* 📺 live transcript OVERLAID transparently on the video (subtitle-style) */
#lhReader .video-frame { position: relative; }
#lhReader .lh-live.lh-live-overlay {
  position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; z-index: 4;
  max-height: 46%; resize: none; min-width: 0; max-width: none;
  background: linear-gradient(180deg, transparent, rgba(6,10,16,.55) 22%, rgba(6,10,16,.86));
  border: none; border-radius: 10px; padding: 14px 12px 10px;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); box-shadow: none;
}
#lhReader .lh-live.lh-live-overlay::-webkit-resizer { display: none; }
#lhReader .lh-live-overlay .lh-live-line { color: rgba(255,255,255,.72); text-shadow: 0 1px 3px rgba(0,0,0,.95); }
#lhReader .lh-live-overlay .lh-live-line:hover { background: rgba(255,255,255,.08); }
#lhReader .lh-live-overlay .lh-live-line.cur { background: transparent; color: #fff; }
#lhReader .lh-live-overlay .lh-live-time { color: rgba(255,255,255,.55); }
#lhReader .lh-live-overlay .lh-live-line.cur .lh-live-w.now {
  background: transparent; color: var(--lh-accent,#3ddc84); font-weight: 800;
  text-shadow: 0 0 9px rgba(61,220,132,.7), 0 1px 3px rgba(0,0,0,.95); }
#lhReader .lh-live-overlay .lh-live-line.cur .lh-live-w.near { background: transparent; color: rgba(255,255,255,.96); }
#lhReader .lh-live-overlay .lh-live-line.cur .lh-live-w.said { background: transparent; color: rgba(255,255,255,.55); }
#lhReader .lh-live-overlay:not(.rd-light) .lh-live-w:not(.said):not(.now):not(.near) { opacity: 1; }

/* 📄 page-turn notice over the reading surface */
#lhReader .video-pin { position: relative; }
#lhReader .lh-pageflash {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%) translateY(-6px);
  z-index: 30; padding: 7px 14px; border-radius: 999px;
  background: var(--lh-accent); color: #06210f;
  font: 600 12.5px/1 system-ui, sans-serif; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
#lhReader .lh-pageflash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 📝 always-editable notes: jump chips + the flash/back on a book jump */
#lhReader .lh-notes-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
#lhReader .lh-notes-jumps:empty { display: none; }
#lhReader .lh-jump-lbl { font-size: 11px; color: var(--lh-ink-soft); margin-right: 2px; }
#lhReader .lh-jump { width: auto; margin: 0; padding: 3px 9px; border: 1px solid var(--lh-line);
  background: var(--lh-surface); color: var(--lh-ink); border-radius: 999px; font-size: 11.5px; cursor: pointer; }
#lhReader .lh-jump:hover { border-color: var(--lh-accent); color: var(--lh-accent); }
#lhReader .lh-pdfword.lh-flash { animation: lhFlash 1.9s ease; border-radius: 3px; }
@keyframes lhFlash { 0%,60% { background: var(--lh-accent); color: #06210f; } 100% { background: transparent; } }
#lhReader .lh-bookback { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;
  width: auto; margin: 0; z-index: 40; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--lh-accent); color: #06210f; border: 0; font: 600 13px/1 system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#lhReader .lh-bookback:hover { filter: brightness(1.06); }

/* 🖱 right-click capture menu — grouped, aligned icon column, quote on top */
.lh-capmenu {
  position: fixed; z-index: 1700; width: 264px; padding: 6px;
  background: #141922; border: 1px solid #253141; border-radius: 14px;
  box-shadow: 0 20px 56px rgba(0,0,0,.62);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e7ecf4;
}
.lh-cap-quote {
  font-size: 11.5px; line-height: 1.45; color: #8a95a8; font-style: italic;
  padding: 7px 9px 9px; margin-bottom: 4px; border-bottom: 1px solid #1e2836;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lh-cap-h {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #63708a;
  padding: 8px 9px 4px; font-weight: 600;
}
.lh-cap-sep { border-top: 1px solid #1e2836; margin: 5px 0; }
.lh-capmenu .lh-cap-item {
  display: flex; align-items: center; gap: 9px; width: 100%; margin: 0;
  height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: none;
  color: #e7ecf4; font: 500 13px/1 system-ui, sans-serif; text-align: left; cursor: pointer;
}
.lh-capmenu .lh-cap-item:hover { background: #1b2431; }
.lh-capmenu .lh-cap-item:hover .lh-cap-lbl { color: #3ddc84; }
.lh-cap-ic { width: 18px; flex: 0 0 18px; text-align: center; font-size: 13.5px; }
.lh-cap-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-cap-hint { font-size: 10.5px; color: #63708a; font-weight: 400; white-space: nowrap; }

/* 📋 AI-prompt variants menu */
.lh-aimenu {
  position: fixed; z-index: 1750; width: 292px;
  background: #141922; border: 1px solid #253141; border-radius: 14px; padding: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e7ecf4;
}
.lh-aimenu-h { font-size: 11.5px; color: #8a95a8; text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px 8px; }
.lh-aimenu-row { display: flex; gap: 4px; margin-bottom: 4px; }
.lh-aimenu-pick { flex: 1; text-align: left; width: auto; margin: 0; height: 34px; padding: 0 10px;
  background: #1b2431; border: 1px solid #253141; border-radius: 9px; color: #e7ecf4; font: 500 13px/1 system-ui, sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; }
.lh-aimenu-pick:hover { border-color: #3ddc84; color: #3ddc84; }
.lh-aimenu-edit, .lh-aimenu-del { width: 34px; height: 34px; margin: 0; padding: 0; background: #0f141b; border: 1px solid #253141;
  border-radius: 9px; color: #8a95a8; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lh-aimenu-edit:hover { border-color: #3ddc84; color: #3ddc84; }
.lh-aimenu-del:hover { border-color: #ff6b7d; color: #ff6b7d; }
.lh-aimenu-foot { display: flex; gap: 6px; border-top: 1px solid #253141; margin-top: 6px; padding-top: 8px; }
.lh-aimenu-add { flex: 1; }
.lh-aimenu-add, .lh-aimenu-reset { width: auto; margin: 0; height: 32px; padding: 0 12px; background: #0f141b;
  border: 1px solid #253141; border-radius: 9px; color: #e7ecf4; font: 500 12.5px/1 system-ui, sans-serif; cursor: pointer; }
.lh-aimenu-add:hover { border-color: #3ddc84; color: #3ddc84; }
.lh-aimenu-reset:hover { border-color: #8a95a8; }

/* 📋 AI-prompt editor */
.lh-aiedit-wrap { position: fixed; inset: 0; z-index: 1760; background: rgba(6,9,13,.62);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.lh-aiedit { width: min(560px, 96vw); background: #141922; border: 1px solid #253141; border-radius: 16px;
  padding: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.7);
  font: 13px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e7ecf4; }
.lh-aiedit-h { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.lh-aiedit-saved { font-size: 12px; color: #3ddc84; opacity: .4; transition: opacity .2s; font-weight: 500; }
.lh-aiedit-lbl { display: block; font-size: 11.5px; color: #8a95a8; margin: 10px 0 4px; }
.lh-aiedit-hint { color: #63708a; font-weight: 400; }
.lh-aiedit-in, .lh-aiedit-ta { width: 100%; background: #0f141b; border: 1px solid #253141; color: #e7ecf4;
  border-radius: 9px; padding: 9px 11px; font: 13px/1.5 system-ui, sans-serif; margin: 0; }
.lh-aiedit-ta { resize: vertical; min-height: 120px; font-family: "Cascadia Code", ui-monospace, "Consolas", monospace; font-size: 12.5px; }
.lh-aiedit-in:focus, .lh-aiedit-ta:focus { outline: none; border-color: #3ddc84; }
.lh-aiedit-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.lh-aiedit-note { font-size: 11.5px; color: #8a95a8; margin-top: 10px; }

/* clickable timestamp chip inside lesson notes (seeks the video, like the Learning Hub) */
.lh-ts-note { display: inline; padding: 0 5px; margin: 0 1px; border: 1px solid #3ddc8455; border-radius: 6px;
  background: rgba(61,220,132,.12); color: #6ff0ad; font-weight: 700; font-size: .92em; cursor: pointer;
  font-variant-numeric: tabular-nums; line-height: 1.5; }
.lh-ts-note:hover { background: rgba(61,220,132,.28); border-color: #3ddc84; }

/* TA filter segs: weekly = purple, daily = blue; active state stronger */
#taGroupSeg .nd-seg-btn.ta-w.active, #taKindSeg .nd-seg-btn.ta-w.active { background: rgba(192,132,252,.25); color: #d9b8ff; border-color: #c084fc; }
#taGroupSeg .nd-seg-btn.ta-d.active, #taKindSeg .nd-seg-btn.ta-d.active { background: rgba(57,201,255,.22); color: #9fe3ff; border-color: #39c9ff; }
#taGroupSeg .nd-seg-btn.ta-w, #taKindSeg .nd-seg-btn.ta-w { color: #c084fc; }
#taGroupSeg .nd-seg-btn.ta-d, #taKindSeg .nd-seg-btn.ta-d { color: #39c9ff; }
#taListTable tr.taRow:hover { filter: brightness(1.35); }
#taListTable tr.taRow td { padding: 5px 8px; }

/* ===== reader folder chips + AI-button accent (v819) ===== */
#lhReader .reader-meta .rm-folder-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid #c9924a66; color: #e8c07a; background: rgba(201,146,74,.12); margin-right: 4px; }
#lhReader .reader-meta .rm-folder-chip.rm-folder-none { border-color: #77777755; color: #9aa; background: rgba(140,140,140,.1); }
#lhReader .reader-meta .rm-folder-btn { padding: 2px 10px; border-radius: 999px; font-size: 11.5px; cursor: pointer;
  border: 1px dashed #c9924a88; color: #e8c07a; background: transparent; }
#lhReader .reader-meta .rm-folder-btn:hover { background: rgba(201,146,74,.16); }
#lhReader .reader-actions .lh-ai-btn { border-color: #c084fc88; color: #d9b8ff; }
#lhReader .reader-actions .lh-ai-btn:hover { border-color: #c084fc; background: rgba(192,132,252,.14); }


/* ===== Learning-Hub theme picker (v820): the 5 alternate palettes, copied verbatim from
   the Learning Hub app. Applied by data-lh-theme on <html>; Midnight is the built-in default
   already inlined on #lhReader. Re-themes the reader chrome + the Learning-tab cards. ===== */
html[data-lh-theme="ember"] #lhReader {
  --lh-bg:#140d0a; --lh-bg-2:#0e0806; --lh-surface:#1f1512; --lh-surface-2:#2a1d18;
  --lh-ink:#f4e7df; --lh-ink-soft:#b39a8c; --lh-line:#3a2820; --lh-accent:#ff8a4c; --lh-accent-ink:#1a0a03;
  --lh-warn:#ff5252; --lh-c1:#ffb457; --lh-c2:#ff7a45; --lh-c3:#f4536b; --lh-c4:#f4c150; --lh-c5:#e08cff; --lh-c6:#ff9d7a; }
html[data-lh-theme="forest"] #lhReader {
  --lh-bg:#0a130e; --lh-bg-2:#060d09; --lh-surface:#101f18; --lh-surface-2:#172b21;
  --lh-ink:#e4f2ea; --lh-ink-soft:#8bab99; --lh-line:#1f3a2d; --lh-accent:#52d197; --lh-accent-ink:#04120b;
  --lh-warn:#ef6b5a; --lh-c1:#52d197; --lh-c2:#a3e635; --lh-c3:#34d3c0; --lh-c4:#eab308; --lh-c5:#6ee7b7; --lh-c6:#22c1e0; }
html[data-lh-theme="violet"] #lhReader {
  --lh-bg:#0f0d1a; --lh-bg-2:#0a0812; --lh-surface:#171430; --lh-surface-2:#201b3f;
  --lh-ink:#ece8fb; --lh-ink-soft:#9a92c2; --lh-line:#2c2650; --lh-accent:#9d7bff; --lh-accent-ink:#0c0820;
  --lh-warn:#ff5d8f; --lh-c1:#9d7bff; --lh-c2:#f472b6; --lh-c3:#38bdf8; --lh-c4:#c4b5fd; --lh-c5:#34d399; --lh-c6:#fbbf24; }
html[data-lh-theme="amber"] #lhReader {
  --lh-bg:#17110a; --lh-bg-2:#0f0a05; --lh-surface:#201810; --lh-surface-2:#2b2015;
  --lh-ink:#f0d9b5; --lh-ink-soft:#b39a78; --lh-line:#3a2c1c; --lh-accent:#f2a24e; --lh-accent-ink:#1a0f03;
  --lh-warn:#db6a35; --lh-c1:#f2a24e; --lh-c2:#e8c15a; --lh-c3:#e8895a; --lh-c4:#d98a6c; --lh-c5:#cba24a; --lh-c6:#e0a35c; }
html[data-lh-theme="paper"] #lhReader {
  --lh-bg:#f5f3ee; --lh-bg-2:#ece8df; --lh-surface:#ffffff; --lh-surface-2:#f1ede4;
  --lh-ink:#23201b; --lh-ink-soft:#6d675c; --lh-line:#e2dccf; --lh-accent:#1f9e78; --lh-accent-ink:#ffffff;
  --lh-warn:#c0492a; --lh-c1:#1f9e78; --lh-c2:#c9902a; --lh-c3:#d1547f; --lh-c4:#d97341; --lh-c5:#2b93a8; --lh-c6:#7c6bd0; }

/* the picker control itself */
#lhThemePick { padding: 3px 8px; border-radius: 8px; font-size: 12px; cursor: pointer;
  background: var(--lh-surface-2, #1b2431); color: var(--lh-ink, #e7ecf4); border: 1px solid var(--lh-line, #253141); }

/* ===== Library landing → Learning-Hub look (v822): glowing stat chips + theme-aware ===== */
#strategyLibSection { --lg-c1: var(--lg-accent); --lg-c6: #a78bfa; }
#strategyLibSection .stat-chip {
  --c: var(--lg-c1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--lg-surface)), var(--lg-surface));
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 14px;
  box-shadow: 0 0 22px -12px var(--c), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
#strategyLibSection .stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px -12px var(--c), 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent);
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
}
#strategyLibSection .stat-chip[data-k="cards"]    { --c: var(--lg-c1); }
#strategyLibSection .stat-chip[data-k="due"]      { --c: var(--lg-c3); }
#strategyLibSection .stat-chip[data-k="time"]     { --c: var(--lg-c5); }
#strategyLibSection .stat-chip[data-k="done"]     { --c: var(--lg-c2); }
#strategyLibSection .stat-chip[data-k="studying"] { --c: var(--lg-c4); }
#strategyLibSection .stat-chip .big { color: var(--c) !important; font-family: var(--lg-mono); }
#strategyLibSection .stat-chip .ic { filter: saturate(1.25); }
/* tile left-accent stripe + rounded, like the hub cards */
#strategyLibSection .tile { border-left: 3px solid var(--lg-accent); }
/* the group/sub-nav pills */
#strategyLibSection .nd-seg .nd-seg-btn { border-radius: 999px; }
#strategyLibSection .nd-seg .nd-seg-btn.active {
  background: color-mix(in srgb, var(--lg-accent) 20%, transparent);
  color: var(--lg-accent); border-color: color-mix(in srgb, var(--lg-accent) 45%, transparent);
}

/* the theme picker re-colours the landing too (per-theme --lg remap, matching the reader) */
html[data-lh-theme="ember"] #strategyLibSection { --lg-bg:#140d0a; --lg-surface:#1f1512; --lg-surface-2:#2a1d18; --lg-ink:#f4e7df; --lg-ink-soft:#b39a8c; --lg-line:#3a2820; --lg-accent:#ff8a4c; --lg-c2:#f4c150; --lg-c3:#f4536b; --lg-c4:#ff9d7a; --lg-c5:#e08cff; --lg-c1:#ffb457; --lg-c6:#ff7a45; }
html[data-lh-theme="forest"] #strategyLibSection { --lg-bg:#0a130e; --lg-surface:#101f18; --lg-surface-2:#172b21; --lg-ink:#e4f2ea; --lg-ink-soft:#8bab99; --lg-line:#1f3a2d; --lg-accent:#52d197; --lg-c2:#a3e635; --lg-c3:#34d3c0; --lg-c4:#eab308; --lg-c5:#6ee7b7; --lg-c1:#52d197; --lg-c6:#22c1e0; }
html[data-lh-theme="violet"] #strategyLibSection { --lg-bg:#0f0d1a; --lg-surface:#171430; --lg-surface-2:#201b3f; --lg-ink:#ece8fb; --lg-ink-soft:#9a92c2; --lg-line:#2c2650; --lg-accent:#9d7bff; --lg-c2:#f472b6; --lg-c3:#38bdf8; --lg-c4:#c4b5fd; --lg-c5:#34d399; --lg-c1:#9d7bff; --lg-c6:#fbbf24; }
html[data-lh-theme="amber"] #strategyLibSection { --lg-bg:#17110a; --lg-surface:#201810; --lg-surface-2:#2b2015; --lg-ink:#f0d9b5; --lg-ink-soft:#b39a78; --lg-line:#3a2c1c; --lg-accent:#f2a24e; --lg-c2:#e8c15a; --lg-c3:#e8895a; --lg-c4:#d98a6c; --lg-c5:#cba24a; --lg-c1:#f2a24e; --lg-c6:#e0a35c; }
html[data-lh-theme="paper"] #strategyLibSection { --lg-bg:#f5f3ee; --lg-surface:#ffffff; --lg-surface-2:#f1ede4; --lg-ink:#23201b; --lg-ink-soft:#6d675c; --lg-line:#e2dccf; --lg-accent:#1f9e78; --lg-c2:#c9902a; --lg-c3:#d1547f; --lg-c4:#d97341; --lg-c5:#2b93a8; --lg-c1:#1f9e78; --lg-c6:#7c6bd0; }

/* smaller theme picker in the reader header (was full-height select) */
#lhReader #lhThemePick { padding: 1px 4px !important; font-size: 10.5px !important; max-width: 92px; height: 22px; border-radius: 6px; }

/* ===== lesson cards: opened vs never-opened + favourite star (v828) ===== */
#strategyLibSection .tile { position: relative; }
#strategyLibSection .tile.tile-unopened { border-left-color: var(--lg-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--lg-accent) 22%, transparent); }
#strategyLibSection .tile.tile-viewed { opacity: .82; }
#strategyLibSection .tile.tile-viewed:hover { opacity: 1; }
#strategyLibSection .tile .tile-newdot { position: absolute; top: 9px; left: 9px; color: var(--lg-accent); font-size: 9px; filter: drop-shadow(0 0 4px var(--lg-accent)); }
/* how much of a book/video has been read/watched — a thin line on the card */
#strategyLibSection .tile .tile-prog { height: 5px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; margin-top: 8px; }
#strategyLibSection .tile .tile-prog > span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--lg-accent, #5cbe83), #7ed4a3); transition: width .3s ease; }
#strategyLibSection .tile .tile-prog-lab { font-size: 10px; color: var(--muted, #93a1b0); margin-top: 3px; letter-spacing: .02em; }
#strategyLibSection .tile h3 { padding-left: 12px; }   /* room for the new-dot */
#strategyLibSection .tile .slFav {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; padding: 0; line-height: 1; font-size: 15px; cursor: pointer;
  background: transparent; border: none; color: var(--lg-ink-soft); border-radius: 7px; transition: color .12s, transform .1s;
}
#strategyLibSection .tile .slFav:hover { color: var(--lg-accent); transform: scale(1.15); }
#strategyLibSection .tile .slFav.on { color: var(--lg-accent); }   /* warm accent, not classic yellow */

/* ===== 🧭 TA read view — the analysis as readable prose, not a timestamp wall (v854) ===== */
#taRead {
  background: rgba(255, 250, 240, .035);
  border: 1px solid var(--border, #2a3745);
  border-radius: 10px;
  color: var(--ink, #dbe4ec);
}
#taRead p { margin: 0 0 10px; }
#taRead p:last-child { margin-bottom: 0; }

/* ===== unified section headers (v311) — one class, three size tiers ===== */
.section-summary { cursor: pointer; font-size: 1.1em; font-weight: 600; }
.section-summary.ss-top { font-size: 1.2em; }
.section-summary.ss-lg  { font-size: 1.25em; }
.section-summary.ss-xl  { font-size: 1.3em; }
.section-summary > .muted { font-weight: 400; }

/* ── Local player: fullscreen KEEPS the chapter rail (YouTube-style) ────────────────────────
   The stage (video + rail) is what goes fullscreen, not the bare <video> — fullscreening the
   video element alone drops the rail, which is the one thing he needs while stepping trade to
   trade during a debrief recording. */
#vmStage.vm-fs {
  width: 100vw; height: 100vh; max-width: none; gap: 0;
  background: #000; align-items: stretch;
  /* NO WRAP in fullscreen. #vmStage carries flex-wrap:wrap so the toolbar can take a full row in
     windowed mode — but in fullscreen the bar is absolutely positioned, and wrapping let the
     232px rail spill onto a second "row" of a 100vh flex line, i.e. straight off the bottom of
     the screen. That's why the trade list vanished in fullscreen. */
  flex-wrap: nowrap !important;
}
#vmStage.vm-fs #vmPlayerBox {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border-radius: 0; box-shadow: none;
}
#vmStage.vm-fs #vmVideo { width: 100%; height: 100%; object-fit: contain; }
#vmStage.vm-fs #vmRailBox {
  height: 100vh; max-height: 100vh; border-radius: 0;
  border: none; border-left: 1px solid var(--border, #2a3340);
  background: rgba(8, 14, 20, .92); flex: 0 0 330px;
}
/* Fullscreen hides the modal's toolbar (it lives outside the stage), so the rail carries the
   only visible affordances — make its rows a bit bigger for across-the-room reading. */
#vmStage.vm-fs .vm-ch { padding: 7px 10px; font-size: 12.5px; }
#vmStage.vm-fs #vmRail { overflow-y: auto; }

/* ── Buttons: one calm family, no neon slabs ────────────────────────────────────────────────
   The wizard's Next / ✔ Finish were saturated blue→green gradients with near-black text — they
   read as a different app from every other control (user 2026-07-31: "that bright green and
   button design looks old"). These keep the SAME shape language as .gt-compact-btn (surface,
   1px border, 6px radius) and carry emphasis with a tint + a coloured border instead of a fill,
   so a primary action is obvious without shouting. */
.btn-accent {
  background: color-mix(in srgb, var(--neon-blue) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--neon-blue) 55%, var(--border));
  color: var(--neon-blue);
  font-weight: 700;
}
.btn-accent:hover {
  background: color-mix(in srgb, var(--neon-blue) 20%, var(--surface));
  border-color: var(--neon-blue);
  color: #bff0ff;
}
/* The big step actions. Same family, just larger and with a touch more presence. */
.btn-primary {
  padding: 8px 22px; font-size: 14px; font-weight: 700; border-radius: 8px;
  background: color-mix(in srgb, var(--neon-blue) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--neon-blue) 60%, var(--border));
  color: var(--neon-blue);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--neon-blue) 24%, var(--surface));
  border-color: var(--neon-blue); color: #bff0ff;
}
/* ✔ Finish — the committing action, so green, but the same calm treatment as the rest. */
.btn-primary.btn-go {
  background: color-mix(in srgb, var(--neon-green) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--neon-green) 55%, var(--border));
  color: var(--neon-green);
}
/* ▸ Match recap to the trades — step 3's OTHER action, and on an already-imported day it is the
   one he actually presses. It was a small .btn-accent sitting between two large .btn-primary
   buttons and in the SAME blue as 👁 Preview, so it read as a leftover from the old page rather
   than a peer ("that old school look"). Same size and shape language as Preview/Finish; violet
   to separate it from both — and violet is already this app's colour for recap/transcript work
   (🎬 Live moments, 🧠 Copy AI prompt), so it says "this is the recap action" without a legend. */
.btn-primary.btn-match {
  background: color-mix(in srgb, #c084fc 13%, var(--surface));
  border-color: color-mix(in srgb, #c084fc 55%, var(--border));
  color: #d8b4fe;
}
.btn-primary.btn-match:hover {
  background: color-mix(in srgb, #c084fc 22%, var(--surface));
  border-color: #c084fc;
  color: #ecd9ff;
}
/* Post-import "done" state for ✔ Finish — settled, not a slab. Replaces the old inline
   background writes that outranked the class and resurrected the neon button after every import. */
.btn-primary.btn-go.btn-done,
.btn-done {
  background: color-mix(in srgb, var(--neon-green) 22%, var(--surface));
  border-color: var(--neon-green);
  color: #c9ffe4;
  opacity: .92;
}
.btn-primary.btn-go:hover {
  background: color-mix(in srgb, var(--neon-green) 22%, var(--surface));
  border-color: var(--neon-green); color: #c9ffe4;
}

/* ── ONE-PAGE IMPORT (2026-07-31) ───────────────────────────────────────────────────────────
   Replaces the two-step wizard. User: "whenever I land on this page I get a little bit freeze
   because I don't know which step to start with… maybe a bigger page which has 1 big number one
   on the left, number two on the right, number three below, with a little bit of instructions."
   auto-fit (not a viewport media query) is deliberate: #importSection gets re-parented into the
   much narrower #dlConsoleHost by ⤓ Quick import, and a width-keyed query would squash it there. */
#importWizard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 14px; align-items: start;
}
#impIntro { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#impIntro .imp-lede { margin: 0; flex: 1 1 340px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
#wzReset { color: #ff6b7d; border-color: #ff6b7d; font-weight: 700; }
/* ⚙ Advanced + ↺ Start over: their own left-aligned row at the top of the right column,
   directly above the ② box. (Was: tacked onto the intro lede with margin-left:auto, which
   threw the destructive one to the far right edge of the page.) */
#impActs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* READABILITY (user 2026-08-02): "coming from the dashboard, all the characters are so small
   they seem almost unreadable". The Import page ran a whole step below the rest of the app —
   11px controls and 12.5px prose. One scoped bump, no layout change. */
#importSection { font-size: 13px; }
#importSection .gt-compact-btn { font-size: 12.5px; padding: 5px 12px; }
#importSection label,
#importSection .muted,
#importSection input,
#importSection select,
#importSection textarea,
#importSection button { font-size: 12.5px; }
#impIntro .imp-lede,
#importSection .imp-instr { font-size: 13.5px; line-height: 1.55; }
#importSection .imp-step-head h3 { font-size: 17px; }
/* ③ sits UNDER ② in the right column, not full-width at the bottom. ① is the tall one (watch,
   record, transcribe), so it spans both rows on the left and ②+③ stack beside it — which fills
   the dead space that used to sit under ② and lifts the Finish button up where it's reachable. */
/* ③ UNDER ②. ① (watch + record + transcribe) is the tall one, so it occupies both rows of the
   left column and ② + ③ stack down the right — which is what puts Finish within reach instead of
   a full-width slab at the bottom of the page. */
/* ② and ③ live in their own column so ①'s height can never space them apart. With grid-row span
   the browser stretched BOTH rows to fit the tall recap panel, opening a ~180px hole between them. */
#impRightCol { display: flex; flex-direction: column; gap: 10px; min-width: 0; align-self: start; }
.imp-step {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px;
  background: var(--surface2, #0b1219); min-width: 0;
}
.imp-step-head { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 12px; }
/* THE STEP BUBBLES — bigger, and lit like a physical button.
   His asks: "I want the one, two, three bubbles to be bigger and also more three-dimensional",
   and "change the colour for number one and leave number three green" (① and ③ read as the same
   colour otherwise). Each step now owns a hue — ① violet, ② blue, ③ green — so the number and
   its colour say the same thing and neither has to be read twice.
   The 3D is a top-lit sphere: a lighter top-left in the gradient, an inset white rim for the
   highlight, an inset dark rim at the bottom for depth, and a soft coloured glow beneath. */
.imp-num {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px; font-weight: 800; line-height: 1;
  --num-hue: var(--neon-blue);
  background:
    radial-gradient(115% 115% at 30% 24%,
      color-mix(in srgb, var(--num-hue) 42%, var(--surface)) 0%,
      color-mix(in srgb, var(--num-hue) 18%, var(--surface)) 46%,
      color-mix(in srgb, var(--num-hue) 7%, var(--surface)) 100%);
  border: 2px solid color-mix(in srgb, var(--num-hue) 62%, var(--border));
  color: var(--num-hue);
  box-shadow:
    inset 0 1.5px 2px color-mix(in srgb, #fff 30%, transparent),
    inset 0 -2px 4px color-mix(in srgb, #000 34%, transparent),
    0 3px 8px color-mix(in srgb, var(--num-hue) 26%, transparent);
  text-shadow: 0 1px 2px color-mix(in srgb, #000 55%, transparent);
}
.imp-num[data-n="1"] { --num-hue: #a855f7; }               /* ① violet */
.imp-num[data-n="2"] { --num-hue: var(--neon-blue); }      /* ② blue   */
.imp-num[data-n="3"] { --num-hue: var(--neon-green); }     /* ③ green — the finish line */
.imp-num[data-n="4"] { --num-hue: #f59e0b; }               /* ④ amber  */
/* A step whose input is satisfied turns green — answers "where am I?" without a step rail. */
.imp-step.done .imp-num { --num-hue: var(--neon-green); }
.imp-step-head h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.imp-instr { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 64ch; }
#impAutoNote { margin-top: 10px; font-size: 11.5px; opacity: .85; }
#wzStep1, #wzStep2, #wzStep4 { display: flex; flex-direction: column; gap: 8px; }
/* the merged recording console + its lanes */
.imp-console {
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px;
  background: var(--surface);
}
.imp-console-h { font-size: 12.5px; font-weight: 800; margin: 0 0 2px; }
.imp-lane { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 7px 0; }
.imp-lane-tag { flex: 0 0 78px; font-size: 12px; font-weight: 700; color: var(--muted); }
.imp-lane label { margin: 0; }
.imp-or { display: flex; align-items: center; gap: 9px; margin: 2px 0; font-size: 11px; color: var(--muted); }
.imp-or::before, .imp-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* folds + the step-3 write summary */
.imp-fold {
  border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; margin-top: 8px;
  background: var(--surface);
}
.imp-fold > summary { cursor: pointer; font-weight: 700; font-size: 12.5px; }
.imp-fold[open] > summary { margin-bottom: 7px; }
.imp-summary { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.imp-summary.warn { color: #ffb454; font-weight: 600; }
#impModeWarn { font-size: 12px; color: #ffb454; font-weight: 600; flex-basis: 100%; }
/* _wzShow now scrolls instead of switching panels — flash the target so the jump is visible. */
.imp-flash { outline: 2px solid var(--neon-blue); outline-offset: 3px; transition: outline-color .8s ease; }
@media (max-width: 900px) { #importWizard { grid-template-columns: 1fr; } }

/* Compaction pass (2026-07-31): step ③ was starting at y≈1414 — "very low on the page". Section ②
   carried a tall transcript box and two always-open tool blocks; both now fold, and what's left is
   tightened so all three numbers are reachable without a long scroll. */
#impStep2 #transcript { min-height: 110px; height: 130px; font-size: 12px; }
#impStep2 .mode-toggle-row { margin: 0; }
#wzS2Cols { gap: 8px; }
#wzS2Right { gap: 6px; }
.imp-fold { padding: 6px 10px; margin-top: 6px; }
.imp-fold > summary { font-size: 12px; }
.imp-console { padding: 8px 11px; margin-bottom: 8px; }
.imp-lane { margin: 5px 0; }
.imp-step { padding: 12px 14px 13px; }
.imp-step-head { margin-bottom: 9px; }
.imp-num { width: 34px; height: 34px; font-size: 18px; }   /* narrow pane: still a sphere, just smaller */
.imp-instr { font-size: 12.6px; }
/* Step ③ is the finish line — give it a touch more presence now that it is reachable. */
#impStep3 { border-color: color-mix(in srgb, var(--neon-green) 30%, var(--border)); }

/* Make step ③ reachable, not merely closer. Steps ① and ② scroll INSIDE their own card when the
   content is tall, so the three numbered cards always fit one screen and the finish line is never
   a thousand pixels down the page (user: "3rd window fits the whole screen… at this point it is
   very low on the page"). The cap only bites when the content actually overflows. */
#wzStep1, #wzStep2 {
  /* ③ moved beside ② rather than below, so ① is free to be tall — it only scrolls internally when
     it would otherwise run past the viewport, instead of being squeezed to keep ③ on screen. */
  max-height: calc(100vh - 260px);
  min-height: 190px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;                 /* room for the scrollbar, so controls don't sit under it */
  scrollbar-width: thin;
}
#wzStep1::-webkit-scrollbar, #wzStep2::-webkit-scrollbar { width: 8px; }
#wzStep1::-webkit-scrollbar-thumb, #wzStep2::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 6px;
}
/* the recording console, tightened — it was the single tallest block in ② */
#impRecConsole .imp-lane { margin: 4px 0; }
#impRecConsole .imp-lane-tag { flex: 0 0 70px; font-size: 11.5px; }
#impRecConsole .imp-or { margin: 0; }
#impRecConsole input[type="text"], #impRecConsole input[type="url"] { min-width: 0; flex: 1 1 180px; }
#wzRecOkWrap label { font-size: 11.5px; }
#wzRecOkWrap input[type="time"], #wzRecOkWrap input[type="text"] { max-width: 120px; }

/* ── ⚙ SIMPLE / ADVANCED ────────────────────────────────────────────────────────────────────
   Simple keeps ①②③ to only what a first-time user needs; ⚙ Advanced reveals everything else
   IN PLACE inside the same three consoles (not on a separate page). Nothing is unmounted, so
   every control keeps its value and its listeners in both modes. */
#importSection[data-adv="0"] .imp-adv { display: none !important; }
/* …EXCEPT anything that isn't on its default. An armed control is never hidden — otherwise
   "⚠ Replace all" or "⏱ Timestamps only" could be silently in force behind a closed button. */
#importSection[data-adv="0"] .imp-adv.adv-forced {
  display: flex !important;
  border-radius: 6px;
}
/* the OUTLINE marks only the armed control itself, not the row that had to be un-hidden to
   reveal it — otherwise a forced ancestor draws a big amber box around unrelated controls */
#importSection[data-adv="0"] label.imp-adv.adv-forced,
#importSection[data-adv="0"] details.imp-adv.adv-forced {
  outline: 1px dashed #ffb454; outline-offset: 3px;
}
#importSection[data-adv="0"] details.imp-adv.adv-forced { display: block !important; }
#impAdvToggle { font-weight: 700; }
/* In Advanced the extras are visibly "extra", not indistinguishable from the core controls. */
#importSection[data-adv="1"] #importWizard .imp-adv {
  border-left: 2px solid color-mix(in srgb, var(--neon-blue) 45%, transparent);
  padding-left: 7px;
}

/* Step ④ (after the close — the Rithmic upload) spans the full width like ③, and reads as the
   "now it is final" step: green like ③, but its own row. */

#impStep4 .imp-num { --num-hue: #f59e0b; }
/* the ①②③ sub-headers inside step 2's consoles — the recap is a process, so its boxes are numbered */
#wzStep2 .imp-console-h { font-size: 12.5px; }
#impCsvKind { margin-top: 2px; }
#impCsvKind div { margin: 1px 0; }

/* 🔢 Numbers only — hide every stat card's small breakdown line, keep the headline figures.
   The sub-lines still exist in the DOM (and in the tooltips), so nothing is lost — this is a
   reading mode, not a data change. */
#ndCards.nd-big-only .nd-sub { display: none; }
#ndCards.nd-big-only .nd-card { padding-bottom: 10px; }
#ndBigOnly.on {
  background: color-mix(in srgb, var(--neon-blue) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--neon-blue) 60%, var(--border));
  color: var(--neon-blue); font-weight: 700;
}

/* Section ① is the READ-ONLY half — a green edge says "this can't hurt your journal", which is
   the whole reason the page is split this way. */
.imp-step.imp-safe { border-color: color-mix(in srgb, var(--neon-green) 26%, var(--border)); }
/* .imp-safe means "this step cannot touch your journal" — that is already said by the card
   border and the wording. It must NOT also re-hue the bubble: step ① is imp-safe, so this
   rule painted it green and made ① and ③ look identical, which is exactly what he reported. */

/* ── Player: toolbar inside the stage, auto-hiding, and a slimmer rail ──────────────────────
   The bar used to sit OUTSIDE #vmStage, so fullscreen (which takes the stage) left every control
   behind. It's now an overlay strip inside the stage — visible in fullscreen, costing no picture
   when idle. User: "all these features should be visible while in full screen as well, without
   taking too much space. I wouldn't mind if they have an auto hide button as well." */
#vmStage { flex-wrap: wrap; position: relative; }
.vm-bar-overlay {
  flex-basis: 100%; order: -1;
  background: rgba(10, 16, 22, .82); backdrop-filter: blur(6px);
  border: 1px solid var(--border, #2a3340); border-radius: 10px;
  padding: 5px 8px; transition: opacity .25s ease, transform .25s ease;
}
#vmStage.vm-idle .vm-bar-overlay { opacity: 0; transform: translateY(-6px); pointer-events: none; }
#vmStage.vm-fs .vm-bar-overlay {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 5; max-width: 96vw; margin: 0;
}
#vmStage.vm-fs.vm-idle .vm-bar-overlay { opacity: 0; transform: translateX(-50%) translateY(-8px); }
/* ⇥ collapse: the rail folds away entirely for maximum picture, one key (h) to bring it back */
/* !important because #vmRailBox carries an INLINE display:flex from the modal template, and
   inline always beats a stylesheet rule — the same trap that resurrected the neon Finish
   button earlier today. */
#vmStage.vm-rail-hidden #vmRailBox { display: none !important; }
/* the rail itself — slimmer, two-line rows so the label doesn't force width */
#vmRailBox { flex: 0 0 232px; }
#vmStage.vm-fs #vmRailBox { flex: 0 0 232px; }
.vm-ch { flex-wrap: wrap; row-gap: 0 !important; padding: 5px 8px !important; }
.vm-ch-label { line-height: 1.25; margin-top: 1px; opacity: .8; }
.vm-wl {
  flex: 0 0 auto; min-width: 20px; text-align: center; font-size: 9.5px; font-weight: 800;
  border-radius: 4px; padding: 0 3px; line-height: 15px; letter-spacing: .3px;
}

/* The session console's call to action — full width at the bottom, because watching the session
   back IS the step; everything above it is just pointing at the right file. */
.imp-cta { margin: 9px 0 2px; }
.imp-cta-btn {
  width: 100%; margin: 0; padding: 9px 14px; font-size: 13.5px; font-weight: 800;
  border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--neon-blue) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--neon-blue) 62%, var(--border));
  color: var(--neon-blue);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
/* ✅ The settled "this step is finished" state for the big ▶ Watch CTA. Same language as
   ✔ Finish's .btn-done: a calm green surface, NOT a second shouting colour — the point is that
   there is nothing left to do here, so it should stop asking for attention. */
.imp-cta-btn.imp-cta-done {
  background: color-mix(in srgb, var(--neon-green) 18%, var(--surface));
  border-color: var(--neon-green);
  color: #c9ffe4;
  box-shadow: none;
}
.imp-cta-btn.imp-cta-done:hover {
  background: color-mix(in srgb, var(--neon-green) 26%, var(--surface));
  color: #e7fff3;
}
.imp-cta-btn:hover {
  background: color-mix(in srgb, var(--neon-blue) 26%, var(--surface));
  border-color: var(--neon-blue); color: #bff0ff;
}

/* A collapsed rail must never be a dead end — this tab sits on the right edge, ignores the
   toolbar's auto-hide and works in fullscreen. */
#vmRailTab {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 22px; padding: 14px 0; margin: 0;
  background: rgba(13, 21, 29, .92); color: var(--neon-blue, #24d3ff);
  border: 1px solid var(--border, #2a3340); border-right: none;
  border-radius: 8px 0 0 8px; cursor: pointer; font-weight: 800; font-size: 13px;
}
#vmRailTab:hover { background: rgba(36, 211, 255, .18); }
/* the recorder's pulsing dot */
#vmRecDot { animation: vmRecPulse 1.1s ease-in-out infinite; }
@keyframes vmRecPulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Bigger step numbers — they're the page's signposts, so they should read from across the room. */
.imp-num { width: 56px; height: 56px; font-size: 29px; border-width: 2px; }   /* wide: the biggest thing on the page after the headings */
.imp-step-head h3 { font-size: 16px; }
/* ③ compact: it's a decision, not a form. Tighter padding, small secondary controls. */
#impStep3 { padding: 12px 14px 12px; }
#impStep3 .imp-instr { font-size: 11.5px; }
#impStep3 #impAutoNote { font-size: 10.5px; margin-top: 7px; }
.imp-mini { padding: 2px 8px !important; font-size: 10.5px !important; opacity: .85; }

/* Apply progress — real % while uploading, an honest elapsed clock while the server works. */
#impProgress { display: none; margin: 0 0 8px; }
.imp-prog-bar { height: 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.imp-prog-bar > span { display: block; height: 100%; width: 8%; background: var(--neon-blue); transition: width .3s ease; }
.imp-prog-bar > span.indeterminate { width: 35% !important; animation: impProgSlide 1.15s ease-in-out infinite; }
@keyframes impProgSlide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
#impProgText { font-size: 11.5px; margin-top: 4px; }

/* Compact the right column: ② was being padded out by a min-height meant for the tall recap
   panel, which pushed the Rithmic console down and ③ with it. The journal half is short by
   nature — let it be short, and ③ rides up directly under it. */
#wzStep1 { min-height: 0 !important; gap: 6px; }
#wzStep1 .imp-console { margin: 4px 0 0; padding: 8px 10px; }
#wzStep1 .imp-lane { margin: 3px 0; }
#importWizard { gap: 10px; }
#impStep1, #impStep3 { padding: 11px 14px 12px; }
#impStep1 .imp-step-head, #impStep3 .imp-step-head { margin-bottom: 7px; }
#wzStep4 { gap: 6px; }
#impStep3 .imp-summary { margin: 0; }

/* ── THE ROW I'M WORKING ON ───────────────────────────────────────────────────────────────────
   Survives opening a trade photo full-screen and survives the re-render an edit causes, so he can
   always find his place again ("I cannot easily recognize the row I was in"). A left bar plus a
   tint: the bar reads instantly even when the row is off-centre, the tint keeps the text legible.
   Escape clears it; clicking another row moves it. */
tr.row-active > td {
  background: color-mix(in srgb, var(--neon-blue) 13%, transparent) !important;
}
tr.row-active > td:first-child {
  box-shadow: inset 4px 0 0 var(--neon-blue);
}
tr.row-active > td:first-child, tr.row-active > td:last-child { position: relative; }

/* Row HOVER — a light touch, so the row under the cursor is obvious while scanning.
   Deliberately weaker than .row-active: the selected row must stay the most prominent thing
   even while the mouse is somewhere else, and the highlight must not "follow the mouse" over
   the row he is actually working on. */
#tradesTable tbody tr:hover > td,
table.gtTable tbody tr:hover > td,
tbody tr[data-rowkey]:hover > td {
  background: color-mix(in srgb, var(--neon-blue) 5%, transparent);
}
/* The selected row keeps its stronger tint AND its bar even while another row is hovered. */
tr.row-active > td { background: color-mix(in srgb, var(--neon-blue) 13%, transparent) !important; }
tr.row-active:hover > td { background: color-mix(in srgb, var(--neon-blue) 17%, transparent) !important; }

/* ① Import source switch — local vs YouTube. Inactive reads as "off", not as disabled:
   both are always clickable, and at least one is always on. */
.impSrcBtn { display:inline-flex; align-items:center; gap:6px; opacity:.45; filter:grayscale(1);
             border:1px solid var(--border); transition:opacity .12s, filter .12s, border-color .12s; }
.impSrcBtn.active { opacity:1; filter:none; border-color:var(--neon-blue,#24d3ff); font-weight:700; }
.impSrcBtn:hover { opacity:.85; }

/* ---- Nav customization: drag markers, hidden hint, right-click menu ------------
   The sidebar is his to arrange (2026-08-02): rename, drag to reorder, hide, and a
   right-click menu. The drop marker is an inset line so nothing reflows mid-drag. */
#appSidebar .sb-tab[draggable="true"] { cursor: pointer; }
#appSidebar .sb-tab.sb-dragging { opacity: .45; }
#appSidebar .sb-tab.sb-drop-before { box-shadow: inset 0 2px 0 0 var(--neon-blue, #24d3ff); }
#appSidebar .sb-tab.sb-drop-after { box-shadow: inset 0 -2px 0 0 var(--neon-blue, #24d3ff); }
#appSidebar .sb-hidden-hint { color: var(--muted); font-size: .82em; opacity: .75; }
#appSidebar .sb-hidden-hint:hover { opacity: 1; }

#sbCtxMenu {
  position: fixed; z-index: 4000; min-width: 216px; max-width: 280px;
  background: var(--surface2, #0b1219); border: 1px solid var(--border, #2a3340);
  border-radius: 10px; padding: 5px; font-size: 12.5px;
  box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .75);
}
#sbCtxMenu .sbctx-h {
  padding: 4px 9px 5px; font-weight: 700; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
#sbCtxMenu .sbctx-sep { height: 1px; background: var(--border, #2a3340); margin: 4px 2px; }
#sbCtxMenu .sbctx-item {
  padding: 6px 9px; border-radius: 7px; cursor: pointer; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sbCtxMenu .sbctx-item:hover { background: rgba(36, 211, 255, .12); }
#sbCtxMenu .sbctx-item.danger:hover { background: rgba(255, 107, 125, .15); color: #ff9aa7; }
#sbCtxMenu .sbctx-item.dis { opacity: .34; cursor: default; }
#sbCtxMenu .sbctx-item.dis:hover { background: none; }

/* ── Column chrome: wrap + freeze (right-click a header) ──────────────────────────────────── */
/* Wrap has to beat .fm-cols-frozen's clip, which is why these are !important — a wrapped
   column is explicitly asking for the height the clip was there to prevent. */
th.fmWrapCol, td.fmWrapCol {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  word-break: break-word; vertical-align: top; line-height: 1.35;
}
/* Frozen columns ride along on horizontal scroll. They need an opaque background of their own —
   a table cell is transparent, so the scrolling columns would read straight through them. */
th.fmFreezeCol, td.fmFreezeCol { position: sticky; z-index: 4; background: var(--panel, #0d151d); }
thead th.fmFreezeCol { z-index: 7; }
tfoot td.fmFreezeCol, tfoot th.fmFreezeCol { z-index: 6; }
/* One hairline marks where the frozen block ends, so it never looks like a rendering glitch. */
th.fmFreezeEdge, td.fmFreezeEdge { box-shadow: 1px 0 0 var(--border, #2a3340), 7px 0 9px -7px rgba(0,0,0,.75); }

/* ── 🎙 The recorder console — ONE look, three homes ──────────────────────────────────────
   Pre-session, Import and the end-of-day journal all mount the same component, so it has to
   read as the same control everywhere. It borrows the Import page's console vocabulary
   (.imp-console / .imp-lane) deliberately: that is the shared visual system the New-Day and
   Import pages are converging on, so a recorder never looks like a different feature depending
   on which page he reached it from. */
.fmRecConsole {
  border: 1px solid var(--border, #2a3340); border-radius: 10px;
  padding: 9px 11px; background: rgba(40, 90, 140, .06);
}
.fmRecConsole[data-fm-rec="debrief"] { background: rgba(140, 90, 40, .07); border-color: #7a5a34; }
.fmRecHead { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 7px; flex-wrap: wrap; }
.fmRecDot { font-size: 14px; line-height: 1; }
.fmRecFor { font-size: 11px; }
.fmRecRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmRecBtn { margin: 0; font-weight: 700; }
.fmRecBtn:disabled { opacity: .45; cursor: not-allowed; }
.fmRecMeter { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; }
/* The VU bar is the honesty check: a dead mic reads red and stays red, so silence is never
   mistaken for a successful take. Same 42x5 geometry as the player's meter. */
.fmRecVu { width: 52px; height: 5px; background: #22303c; border-radius: 3px; overflow: hidden; display: inline-block; }
.fmRecVuBar { display: block; height: 100%; width: 0%; background: #39ff9e; transition: width .1s linear; }
.fmRecTime { font-variant-numeric: tabular-nums; color: var(--neon-blue, #24d3ff); }
.fmRecHint { font-size: 10.8px; line-height: 1.45; margin-top: 6px; }

/* ── ①②③ THE SHARED FLOW SHAPE (Import · Pre-session · End of day) ───────────────────────────
   The three pages that walk him through a day now use ONE layout vocabulary, because the
   difference in design between them was doing nothing except making him hesitate. The grid is
   the same auto-fit one #importWizard uses — auto-fit, never a viewport query, because these
   sections get re-parented into the much narrower #dlConsoleHost by the Daily Log console and a
   width-keyed query would squash them there. */
.fm-flow-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 14px; align-items: start; margin-top: 10px;
}
.fm-flow-intro { grid-column: 1 / -1; }
.fm-flow-intro .imp-lede { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
/* ③ is the tall one on both new pages (the five questions / the before-after + review), so it
   spans the full width underneath ① and ② — "one big number one on the left, number two on the
   right, number three below", which is exactly how he described wanting the Import page. */
.fm-flow-grid > .imp-step:nth-of-type(3) { grid-column: 1 / -1; }
.fm-flow-rest { margin-top: 12px; }

/* The same readability floor the Import page got — now shared, not scoped to one id. */
.fm-flow { font-size: 13px; }
.fm-flow .gt-compact-btn { font-size: 12.5px; padding: 5px 12px; }
.fm-flow label, .fm-flow .muted, .fm-flow input,
.fm-flow select, .fm-flow textarea, .fm-flow button { font-size: 12.5px; }
.fm-flow .imp-instr { font-size: 13.5px; line-height: 1.55; }
.fm-flow .imp-step-head h3 { font-size: 17px; }
/* Inside a step card the old inline-styled blocks should read as consoles, not as loose boxes. */
.fm-flow .imp-step > div[style*="border"] { border-radius: 10px; }
@media (max-width: 900px) {
  .fm-flow-grid { grid-template-columns: 1fr; }
}

/* ── ACCOUNT COLOUR (2026-08-04) ──────────────────────────────────────────────────────────────
   The Account cell wears the dashboard's own pill (.nd-acct-chip), coloured by account TYPE +
   name via acctColor() in app.js, and the whole row carries a faint wash of the same hue so a
   glance separates funded / eval / sim without reading a single name.
   The tint sits on the <tr>: `tr.row-active > td` sets a td background with !important, so the
   selected row still wins outright and the wash never competes with it. */
.fm-acct-chip {
  padding: 2px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; opacity: 1; filter: none;
  color: var(--ac, var(--neon-blue));
  border-color: color-mix(in srgb, var(--ac, var(--neon-blue)) 55%, transparent);
  background: color-mix(in srgb, var(--ac, var(--neon-blue)) 13%, transparent);
}
.fm-acct-chip:hover {
  border-color: var(--ac, var(--neon-blue));
  background: color-mix(in srgb, var(--ac, var(--neon-blue)) 22%, transparent);
  box-shadow: 0 0 8px -3px var(--ac, var(--neon-blue));
}
tr.fm-acct-row { background: color-mix(in srgb, var(--ac) 5%, transparent); }
tr.fm-acct-row:hover { background: color-mix(in srgb, var(--ac) 10%, transparent); }
/* Opt-out: some people find a tinted table noisy — one class on <body> kills the wash and
   keeps the chips. Toggled from the Trades toolbar. */
body.fm-no-acct-tint tr.fm-acct-row,
body.fm-no-acct-tint tr.fm-acct-row:hover { background: transparent; }

/* ── PLAYER: FILL THE PAGE BY DEFAULT (2026-08-04) ────────────────────────────────────────────
   "There is no point for it opening so small — it should take up the whole page space, and I
   would only have to make it full screen if I want." The windowed player sized itself to a fixed
   860px step while the FULLSCREEN rules (.vm-fs, above) already did the right thing. So windowed
   now uses the same geometry, scoped to the modal instead of the screen; ⛶ is left for real
   OS fullscreen, and − / + still step out of fit into fixed sizes when he wants a small picture.
   Everything the toolbar complaint was about — "look how they are randomly sized" — is the
   uniform-control block at the bottom. */
#videoModal { padding: 8px !important; gap: 6px !important; justify-content: stretch !important; }
#vmStage.vm-page {
  flex: 1 1 auto; width: 100%; max-width: none; min-height: 0;
  align-items: stretch; flex-wrap: wrap;
}
#vmStage.vm-page #vmPlayerBox { flex: 1 1 auto; min-width: 0; width: auto !important; height: auto !important; }
#vmStage.vm-page #vmVideo { width: 100%; height: 100%; object-fit: contain; }
#vmStage.vm-page #vmRailBox { max-height: none; height: auto; }
/* One calm toolbar row: every control the same height and the same vertical rhythm, so a bar
   that mixes buttons, a speed group, a record meter and a title stops looking assembled from
   spare parts. Nothing here changes what the controls DO. */
#vmBar { row-gap: 4px; }
#vmBar > * { flex: 0 0 auto; }
#vmBar button, #vmBar .gt-compact-btn {
  height: 26px; min-height: 26px; padding: 0 9px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; line-height: 1; white-space: nowrap;
}
#vmBar #vmRates { gap: 2px; align-items: center; }
#vmBar #vmRates button { padding: 0 7px; min-width: 34px; }
#vmBar #vmTitle {
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; margin-right: 2px;
}
#vmBar #vmRecMeter { height: 26px; }
/* The tag bar (review mode) wears the same height as the toolbar so the two read as one system. */
#vmTagBar button { height: 24px; display: inline-flex; align-items: center; margin: 0; }
/* Caption band — sits over the bottom of the picture in every layout (it lives inside
   #vmPlayerBox). Kept clear of the video's own control strip so it never covers the scrubber. */
#vmCc {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px;
  max-width: 88%; z-index: 4; pointer-events: none;
  background: rgba(8, 12, 18, .78); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px;
  padding: 6px 12px; text-align: center;
  color: #f2f6fa; font-size: 15px; line-height: 1.35; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
#vmStage.vm-fs #vmCc { font-size: 19px; bottom: 66px; }

/* Finished-day review: the recorder step folds to a slim "done + play" bar, so a closed day leads
   with Prep-vs-outcome instead of the record-it flow (2026-08-05). */
.imp-step.dl-step-collapsed { opacity: .82; }
.imp-step.dl-step-collapsed .imp-num { background: #2a3340; box-shadow: none; }
.imp-step.dl-step-collapsed .imp-instr { display: none; }

/* 🎛 Analyze-Behavior "show less": hide the secondary tables (hold-time, breakdowns, scorecard)
   so a review leads with plan-vs-outcome + the money cards + the verdict (2026-08-05). */
body.fm-bi-compact .bi-secondary { display: none; }