* { box-sizing: border-box; margin: 0; padding: 0; }

/* candl.live-inspired: light-first, pill controls, soft borders */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --surface: #f4f6fa;
  --border: #e6e8ee;
  --text: #1a1d26;
  --muted: #8a90a0;
  --accent: #3d5afe;
  --accent-soft: #eef1ff;
  --green: #16a34a;
  --red: #ef4444;
  --amber: #f5a623;
  --row-hover: #f6f8fc;
  --row-selected: #eef3ff;
}

body.dark {
  --bg: #0d1117;
  --panel: #12161f;
  --surface: #1a2029;
  --border: #262c36;
  --text: #d6dde6;
  --muted: #8b949e;
  --accent: #5b7cff;
  --accent-soft: #1d2a45;
  --row-hover: #1a212d;
  --row-selected: #1d2a45;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 -apple-system, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── app shell: left sidebar nav + page column ──────────────────── */

body.has-sidenav { flex-direction: row; }
.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.side-nav {
  width: 78px;
  min-width: 78px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13px 0 12px;
  gap: 4px;
  z-index: 20;
}
.sn-logo { display: flex; margin-bottom: 12px; }
.sn-items { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: center; }
.sn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 62px;
  padding: 9px 0;
  border-radius: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sn-item:hover { background: var(--surface); color: var(--text); }
.sn-item.active { background: var(--accent-soft); color: var(--accent); }
.sn-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; }
/* signed-in user + sign out, sits just above the theme toggle */
.sn-user {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 11px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  overflow: hidden;
}
.sn-user:hover { background: var(--surface); color: var(--text); }
.sn-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin: 0 6px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: .75rem;
  font-weight: 700;
}
/* the expanded sidebar reveals labels; keep the user row consistent with items */
.side-nav:hover .sn-user,
.side-nav.expanded .sn-user { width: 100%; justify-content: flex-start; }

.sn-theme {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.sn-theme:hover { background: var(--surface); color: var(--text); }

/* page header (title bar for standalone pages) */
.page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.page-title { font-size: 18px; font-weight: 700; }
.page-header .page-sub { margin-top: 2px; }
/* narrow screens: let a header full of controls drop to its own row instead
   of squeezing the title into a one-word column */
@media (max-width: 820px) {
  .page-header { flex-wrap: wrap; }
  .page-header .filters { width: 100%; }
}

/* module hub on the dashboard */
.module-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 12px;
}
.module-card {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.module-card:hover {
  border-color: var(--card-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 24, 40, 0.08);
}
.module-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--card-accent);
  opacity: 0;
  transition: opacity 0.12s;
}
.module-card:hover::before { opacity: 1; }
.mc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-accent) 13%, transparent);
  color: var(--card-accent);
  flex: none;
}
.mc-body { min-width: 0; }
.mc-title { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.mc-arrow { color: var(--card-accent); opacity: 0; transition: opacity 0.12s, transform 0.12s; }
.module-card:hover .mc-arrow { opacity: 1; transform: translateX(2px); }
.mc-desc { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.4; }
.mc-stat { color: var(--card-accent); font-size: 11.5px; font-weight: 700; margin-top: 8px; }

/* sortable table headers (generic enhancer) */
th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sortable:hover { color: var(--text); }
th.th-sortable::after { content: " ⇅"; opacity: 0.35; font-size: 9px; }
th.sorted-asc::after { content: " ▲"; opacity: 1; color: var(--accent); font-size: 8px; }
th.sorted-desc::after { content: " ▼"; opacity: 1; color: var(--accent); font-size: 8px; }

/* inline table filter box */
.table-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 5px 10px;
}
.table-filter svg { color: var(--muted); flex: none; }
.table-filter input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12.5px;
  width: 150px;
}

/* ── header ──────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; }
.spacer { flex: 1; }
/* A flex item squeezed below its content width does not overflow here — it
   wraps its text and grows taller, taking the header and the whole layout with
   it. So the short controls hold their size and the long strategy label is the
   one that gives, by truncating. */
header > * { flex-shrink: 0; }
.strategy-pill { min-width: 0; flex-shrink: 1; }
.strategy-pill select { min-width: 0; text-overflow: ellipsis; }
.v-sep { width: 1px; height: 22px; background: var(--border); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--muted);
}
.pill select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding-right: 2px;
}
.symbol-pill { color: var(--muted); }

.btn-pill {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
}
.btn-pill:hover { background: var(--surface); }
.btn-pill .chev { color: var(--muted); font-size: 11px; }

.tf-bar { display: flex; gap: 2px; align-items: center; }
.tf-bar button {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
}
.tf-bar button:hover { color: var(--text); background: var(--surface); }
.tf-bar button.active { background: var(--accent); color: #fff; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface); color: var(--text); }

.live-pnl {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}
/* the cut's header chip */
.cut-chip {
  gap: 6px;
  white-space: nowrap;
  color: var(--amber);
  border-color: var(--amber);
  font-weight: 600;
}
/* .pill sets display, which outranks the UA stylesheet's [hidden] rule by
   cascade origin — without this the chip shows empty on every page load. */
.cut-chip[hidden] { display: none; }
/* Same trap, already sprung: the backtest rows carry `hidden` alongside classes
   that set `display`, so they were showing on every live chart — two empty
   dropdowns and a dead Older/Newer pair under the trade filters. */
.side-filters[hidden], .bt-row[hidden], .sec-note[hidden] { display: none; }
.cut-chip .cut-mark { font-size: 12px; }
.cut-clear {
  background: none;
  border: none;
  color: var(--amber);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 2px;
}
.cut-clear:hover { color: var(--text); }

.live-pnl.pos { color: var(--green); }
.live-pnl.neg { color: var(--red); }

/* indicators dropdown */
.dropdown { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(20, 24, 40, 0.12);
  padding: 6px;
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}
.menu .menu-group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 10px 3px;
}
.menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.menu .menu-item:hover { background: var(--row-hover); }
.menu .menu-item .check { color: var(--accent); font-weight: 700; }

.menu .menu-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  padding: 1px 2px;
  transition: background 0.12s;
}
.menu .menu-item-row:hover { background: var(--row-hover); }
.menu .menu-item-row.active { background: var(--row-selected); }
.menu .menu-item-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.menu .menu-item-toggle .ind-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu .menu-item-toggle .ind-params {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}
.menu .menu-item-toggle .check {
  color: var(--accent);
  font-weight: 700;
  margin-left: 4px;
}
.menu .menu-item-gear {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  margin-right: 4px;
  transition: all 0.15s;
}
.menu .menu-item-gear:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--accent);
}
.menu .menu-item-row.active .menu-item-gear {
  color: var(--text);
}

/* ── modal dialogs ─────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 23, 0.52);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-backdrop[hidden] {
  display: none !important;
}

.modal-box.ind-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.modal-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}
.modal-head-title svg {
  color: var(--accent);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.12s;
}
.modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.modal-body {
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ind-presets {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.ind-presets .preset-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.ind-presets .preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.preset-chip {
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
}
.preset-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.ind-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ind-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ind-field-group label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}
.ind-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ind-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ── main layout ─────────────────────────────────────────────── */

main { flex: 1; display: flex; min-height: 0; }

/* left tool rail */
#toolRail {
  width: 44px;
  min-width: 44px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
}
#toolRail button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
#toolRail button svg { stroke: currentColor; }
#toolRail button:hover { color: var(--text); background: var(--surface); }
#toolRail button.active { color: var(--accent); background: var(--accent-soft); }
#toolRail .rail-sep { width: 22px; border-top: 1px solid var(--border); margin: 5px 0; }
/* The cut tool keeps its own armed/on classes: startDraw blanket-clears .active
   from every rail button, which would disarm the cut visually while it was
   still waiting to swallow the next click. */
#toolRail button.cut-armed { color: var(--amber); background: var(--surface); }
#toolRail button.cut-on { color: var(--amber); }
#toolRail .rail-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }

/* chart */
#chartWrap { flex: 1; position: relative; min-width: 0; background: var(--bg); }
#chartWrap.cut-arming { cursor: crosshair; }
#chartWrap.cut-arming #chart { cursor: crosshair; }
#chart { position: absolute; inset: 0; }
.chart-msg {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 14px;
  color: var(--muted);
  z-index: 5;
  box-shadow: 0 4px 16px rgba(20, 24, 40, 0.08);
}

/* A stale feed or a failed fetch has to read as a problem, not as chrome:
   this banner is the only thing between a dead bridge and days-old candles
   passing for live ones. */
.chart-msg.warn {
  color: var(--amber);
  border-color: var(--amber);
  font-weight: 600;
}

/* ── right sidebar (watchlist-style trades) ──────────────────── */

#sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* the backtest rows below are extra children of this flex row; without a
     wrap they lay out horizontally and slide off the panel edge */
  flex-wrap: wrap;
  gap: 6px 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.side-title { font-weight: 700; font-size: 14px; }
.side-filters { display: flex; gap: 5px; }
/* backtest rows: each takes the full width of the head, on its own line */
.side-head > .bt-row { flex: 0 0 100%; }
.side-filters.bt-only select { flex: 1 1 0; min-width: 0; max-width: none; }
.side-filters.bt-only #btRrFilter { flex: 0 0 84px; }
.bt-span { font-variant-numeric: tabular-nums; line-height: 1.5; }
.bt-nav { display: flex; align-items: center; gap: 5px; }
.bt-nav .pg-btn { padding: 3px 8px; font-size: 11.5px; }
.bt-range {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 4px 5px;
}
.bt-range label { font-size: 11px; color: var(--muted); }
.bt-range .pg-btn { grid-column: 1 / -1; padding: 3px 8px; font-size: 11.5px; }
.bt-range input[type="date"] {
  min-width: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 5px; font-size: 11px; outline: none;
  font-variant-numeric: tabular-nums;
}
.bt-inview { font-variant-numeric: tabular-nums; line-height: 1.5; }
.side-head select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 11.5px;
  outline: none;
  max-width: 92px;
}
.side-cols {
  display: grid;
  grid-template-columns: 1fr 82px 78px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.side-cols span:nth-child(2), .side-cols span:nth-child(3) { text-align: right; }

#tradeList { flex: 1; overflow-y: auto; }

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  position: sticky;
  top: 0;
}
.group-head .count {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 10px;
}

.t-row {
  display: grid;
  grid-template-columns: 1fr 82px 78px;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.t-row:hover { background: var(--row-hover); }
/* trades that had not opened at the cut: still listed, because the list is the
   only way to navigate to one, but not plottable and not readable as a result */
.t-row.after-cut { opacity: 0.45; }
.t-row.after-cut .t-pnl { color: var(--muted); }
.t-row.after-cut:hover { cursor: default; }

.t-row.selected { background: var(--row-selected); border-left-color: var(--accent); }

.t-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: none;
}
.side-dot.buy { background: var(--green); }
.side-dot.sell { background: var(--red); }
.t-sym { font-weight: 700; font-size: 12.5px; }
.t-sub { color: var(--muted); font-size: 10.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t-entry { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.t-pnl { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--muted); }
.t-pnl.pos { color: var(--green); }
.t-pnl.neg { color: var(--red); }

.empty-note { padding: 20px 14px; color: var(--muted); text-align: center; }

/* ── view tabs ───────────────────────────────────────────────── */

.view-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.view-tabs a, .view-tabs button {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.view-tabs a:hover, .view-tabs button:hover { color: var(--text); }
.view-tabs a.active, .view-tabs button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(20,24,40,0.10); }

/* ── pages ───────────────────────────────────────────────────── */

.page { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px; background: var(--bg); }
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head h2 { font-size: 17px; }
.page-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}

/* account cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 16px;
}
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.status-dot.up { background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.status-dot.down { background: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.15); }
.status-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.18); }
.status-dot.gone { background: transparent; border: 1.5px solid var(--muted); }
.card-login { font-weight: 700; font-size: 14px; }
.card-type {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px; color: var(--muted);
}
.card-server { color: var(--muted); font-size: 11px; margin-left: auto; }
.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  margin: 10px 0;
}
.stat .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.stat .v { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; margin-top: 1px; }
.stat .v.pos { color: var(--green); }
.stat .v.neg { color: var(--red); }
.card-strats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.strat-chip {
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 600;
  cursor: pointer;
}
.card-err {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--red); font-size: 12px; margin: 6px 0;
}
.card-degraded { opacity: 0.82; }
/* account card header: nickname primary, login/type/server secondary,
   nothing truncated */
.acct-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.acct-head .status-dot { margin-top: 5px; }
.acct-id { flex: 1; min-width: 0; }
.acct-nick { font-weight: 700; font-size: 14.5px; line-height: 1.25; word-break: break-word; }
.acct-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 3px; color: var(--muted); font-size: 11.5px;
}
.acct-login { font-variant-numeric: tabular-nums; }
.acct-server { color: var(--muted); }
.acct-head .state-chip { margin-top: 2px; }
/* strategy chips on account cards — full label, wraps, never truncated
   (distinct from the charts-page .strat-chip which is width-capped) */
.acct-strats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.acct-strat-chip {
  font-size: 11px; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 2px 9px; font-weight: 600; cursor: pointer;
  white-space: normal; text-decoration: none; line-height: 1.4;
}
.acct-strat-chip:hover { text-decoration: underline; }
.acct-name-inline { color: var(--muted); font-size: 11.5px; }
/* broker reference codes (D-trial-USD-…) — monospace so they line up */
.mono-sm {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--muted);
}
/* bridge/worker log viewer on the account page */
.logs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.log-box {
  margin: 0; max-height: 360px; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
/* per-account state chip in the card header */
.state-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
}
.state-chip.state-online { color: var(--green); border-color: var(--green); }
.state-chip.state-key_mismatch, .state-chip.state-no_key {
  color: var(--amber); border-color: var(--amber);
}
.state-chip.state-offline { color: var(--red); border-color: var(--red); }
.state-chip.state-not_registered { color: var(--muted); }
/* inline "fix key" action on a degraded card */
.key-btn {
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 6px; padding: 2px 9px;
}
.key-btn:hover { background: var(--accent); color: #fff; }
.card-err-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.dismiss-btn {
  font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px;
}
.dismiss-btn:hover { color: var(--red); border-color: var(--red); }

/* headless (terminal-window) toggle on account cards */
.card-headless {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.card-headless .k { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }

/* API key row: admin-only, masked until revealed */
.apikey-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.apikey-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  /* a revealed key is ~46 chars; let it wrap rather than stretch the card */
  overflow-wrap: anywhere;
  max-width: 260px;
}
.apikey-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: 10.5px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.apikey-btn:hover { color: var(--text); border-color: var(--accent); }
.hl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.hl-toggle:disabled { opacity: 0.6; cursor: default; }
.hl-track {
  width: 34px; height: 19px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.15s;
  flex: none;
}
.hl-knob {
  position: absolute;
  top: 1.5px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.hl-toggle.on .hl-track { background: var(--accent); border-color: var(--accent); }
.hl-toggle.on .hl-knob { transform: translateX(15px); background: #fff; }
.hl-label { min-width: 46px; text-align: left; color: var(--muted); }

/* trades table */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: auto;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--panel);
}
.tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl th.num, .tbl td.num { text-align: right; }
/* .clickable: whole rows navigate (chart / account drill-down) */
.tbl.clickable tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--row-hover); }
.tbl .side-b { color: var(--green); font-weight: 700; }
.tbl .side-s { color: var(--red); font-weight: 700; }
.tbl .pnl.pos { color: var(--green); font-weight: 700; }
.tbl .pnl.neg { color: var(--red); font-weight: 700; }

/* Unrealized P/L: same colour scale as a booked result, marked so the two are
   never confused in a column of numbers. */
.pnl.live { font-style: italic; }
.pnl.live::after {
  content: "live";
  font-style: normal; font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-left: 4px; vertical-align: 1px;
}

/* How a position was closed (broker stop, the strategy, or by hand) — sits on
   its own line under the status badge, tight enough not to stretch the row. */
.close-by-wrap { margin-top: 3px; line-height: 1; }
.close-by {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  border-radius: 999px; padding: 1px 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.close-by.manual { background: #fdf1d7; color: #9a6a00; border-color: transparent; }
.close-by.broker_sl { color: var(--red); }
.close-by.broker_tp { color: var(--green); }
body.dark .close-by.manual { background: #2c2410; color: var(--amber); }

/* A polled page that lost its feed must not look live. */
.stale { color: var(--red); display: inline-flex; align-items: center; gap: 5px; }
.stale .status-dot { width: 7px; height: 7px; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; padding: 2px 8px;
}
.badge.OPEN { background: #dcf5e7; color: #147a43; }
.badge.CLOSED { background: var(--surface); color: var(--muted); }
.badge.REJECTED { background: #fbe1e1; color: #b42323; }
.badge.SIGNAL { background: #fdf1d7; color: #9a6a00; }
.badge.ERROR { background: #fbe1e1; color: #b42323; }
body.dark .badge.OPEN { background: #10331f; color: var(--green); }
body.dark .badge.REJECTED, body.dark .badge.ERROR { background: #3a1518; color: var(--red); }
body.dark .badge.SIGNAL { background: #2c2410; color: var(--amber); }

/* ── standalone pages (dashboard / accounts / trades) ─────────── */

main.page { display: block; }
.pos { color: var(--green); }
.neg { color: var(--red); }

.dash-section { margin-bottom: 26px; }
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sec-head h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-note { color: var(--muted); font-size: 11.5px; margin-left: auto; }
.sec-head .filters { margin-left: auto; }
.sec-link {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.sec-head .sec-link ~ .sec-note { margin-left: 0; }
.f-label { color: var(--muted); font-size: 12px; }

/* accounts strip on the dashboard */
.acct-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.acct-card {
  min-width: 250px;
  flex: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  transition: opacity 0.2s ease, border-color 0.15s ease, background 0.2s ease;
  position: relative;
}
.acct-card:hover { border-color: var(--accent); }
.acct-card.is-disabled {
  opacity: 0.55;
  background: var(--surface);
  border-style: dashed;
}
.acct-card.is-disabled:hover {
  opacity: 0.85;
}
.acct-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 6px;
  margin-left: auto;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.acct-toggle-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.acct-toggle-btn.is-off {
  color: var(--amber);
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.25);
}
.acct-excluded-pill {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(245, 166, 35, 0.15);
  color: var(--amber);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.acct-filter-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.acct-nums { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 16px; margin-top: 8px; }


/* KPI tiles */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
}
.kpi-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.kpi-value.pos { color: var(--green); }
.kpi-value.neg { color: var(--red); }
.kpi-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }

/* strategy health grid */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.health-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
  display: block;
}
.health-card:hover { border-color: var(--accent); }
.hc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hc-name {
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.hc-rows { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.hc-rows > div { display: flex; justify-content: space-between; gap: 10px; }
.hc-rows .k { color: var(--muted); }
.hc-tfs { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.hc-since { color: var(--muted); font-size: 10.5px; }

/* chart panels */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 16px;
  min-width: 0;
}
.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.panel-head h4 { font-size: 13px; font-weight: 700; }
.cv { display: block; width: 100%; }
.cv-md { height: 210px; }
.cv-lg { height: 300px; }

.chart-tip {
  position: fixed;
  z-index: 200;
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(20, 24, 40, 0.16);
  padding: 7px 11px;
  font-size: 12px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  max-width: 300px;
}

/* comparison */
.cmp-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 860px) { .cmp-layout { grid-template-columns: 1fr; } }
.cmp-groups { max-height: 380px; overflow-y: auto; }
.chk-list { display: flex; flex-direction: column; }
.chk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 12.5px;
  cursor: pointer;
}
.chk-row input { accent-color: var(--accent); }
.chk-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; font-weight: 600; }
.chk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: none;
  vertical-align: baseline;
}
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }

#comparison .filters select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}

/* generic data table (comparison / drill-down / recent) */
.table-wrap.flat, .table-wrap.panel-flat { border: none; border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.data-table th.sorted::after { content: " ▾"; color: var(--accent); }
.data-table th.sorted[data-dir="asc"]::after { content: " ▴"; }
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr.row-selected { background: var(--row-selected); }
.data-table .side-b { color: var(--green); font-weight: 700; }
.data-table .side-s { color: var(--red); font-weight: 700; }
.data-table .pnl.pos { color: var(--green); font-weight: 700; }
.data-table .pnl.neg { color: var(--red); font-weight: 700; }

/* timeframe + source chips / badges */
.tf-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--muted);
}
.chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--text);
}
.src-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 7px;
}
.src-badge.live { background: #dcf5e7; color: #147a43; }
.src-badge.backtest { background: var(--accent-soft); color: var(--accent); }
.src-badge.mt5 { background: #fdf0d5; color: #92600a; }
body.dark .src-badge.live { background: #10331f; color: var(--green); }
body.dark .src-badge.mt5 { background: #3a2c10; color: #f0b429; }

.tbl.clickable tbody tr.no-link { cursor: default; }

/* ── table pagination ────────────────────────────────────────── */

tr.pg-hide { display: none !important; }
.pg-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-dim);
}
.pg-controls { display: flex; align-items: center; gap: 8px; }
.pg-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pg-controls select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 4px 8px; font-size: 12.5px; outline: none;
}
.pg-btn {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 4px 12px; font-size: 12.5px; cursor: pointer;
}
.pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pg-btn:disabled { opacity: 0.45; cursor: default; }

/* ── account cards → account overview page ───────────────────── */

.card-link { cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.card-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-nick {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hl-toggle.na { opacity: 0.55; cursor: default; }
.btn-ghost {
  display: inline-flex; align-items: center;
  background: var(--panel); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 9px;
  padding: 6px 12px; font-size: 12.5px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.mt5-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-dim);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.mt5-toggle input { accent-color: var(--accent); }

/* ── backtests page ──────────────────────────────────────────── */

.bt-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 14px;
}
@media (max-width: 900px) { .bt-layout { grid-template-columns: 1fr; } }

.bt-form { display: flex; flex-direction: column; gap: 11px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fld > span em { font-style: normal; font-weight: 400; opacity: 0.75; }
.fld input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.fld input:focus { border-color: var(--accent); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.bt-status { font-size: 12px; color: var(--muted); }
.bt-status.pos { color: var(--green); }
.bt-status.neg { color: var(--red); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.bt-help { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.bt-help summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); }
.bt-help p { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.bt-help code {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 4px; font-size: 11px;
}

/* tall enough that a couple of batches with their R:R scorecards open are
   both readable without scrolling the panel */
.bt-list { display: flex; flex-direction: column; gap: 10px; max-height: 78vh; overflow-y: auto; }
.bt-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--bg);
}
.bt-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-del {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; border-radius: 6px; width: 24px; height: 24px; flex: none;
}
.bt-del:hover { background: var(--surface); color: var(--red); }
.bt-meta { display: flex; align-items: center; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.bt-tfs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.bt-stats {
  display: flex; justify-content: space-between; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* per-R:R scorecard inside a batch card — one row per reward target */
.bt-rr-chip { border-color: var(--accent); color: var(--accent); }
.bt-ladder { margin-top: 9px; border-top: 1px solid var(--border); padding-top: 8px; }
.bt-ladder summary {
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--muted);
  list-style-position: outside;
}
.bt-ladder summary:hover { color: var(--accent); }
.bt-ladder-tbl {
  width: 100%; border-collapse: collapse; margin-top: 7px;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.bt-ladder-tbl th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.bt-ladder-tbl th.num, .bt-ladder-tbl td.num { text-align: right; }
.bt-ladder-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.bt-ladder-tbl tbody tr { cursor: pointer; }
.bt-ladder-tbl tbody tr:hover { background: var(--row-hover); }
.bt-ladder-tbl tbody tr:last-child td { border-bottom: none; }
.bt-ladder-tbl .pos { color: var(--green); font-weight: 700; }
.bt-ladder-tbl .neg { color: var(--red); font-weight: 700; }
.bt-ladder-tbl tr.bt-rr-best { background: var(--accent-soft); }
.bt-ladder-note { margin: 7px 0 0; margin-left: 0; line-height: 1.5; }

/* ── charts: plot menu, legend, per-trade checkboxes ─────────── */
.plot-menu { min-width: 240px; max-height: 70vh; overflow-y: auto; }
.plot-menu .menu-head {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.plot-menu .menu-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.plot-menu .menu-item:hover { background: var(--surface); }
.plot-menu input[type="checkbox"] { accent-color: #4f8ef7; }

.legend-chip {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  padding: 4px 10px; font-size: 12px; border-radius: 999px;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); cursor: pointer;
}
.legend-chip:hover { color: var(--text); }
.chart-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 12px;
  color: var(--text); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  max-width: 340px;
}
.chart-legend .lg-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; margin-bottom: 4px;
}
.chart-legend .lg-head button {
  border: none; background: none; color: var(--muted); font-size: 15px;
  cursor: pointer; line-height: 1; padding: 0 2px;
}
.chart-legend .lg-head button:hover { color: var(--text); }
.chart-legend .lg-row { margin: 3px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chart-legend .lg-sw { display: inline-block; width: 22px; height: 0; }
.chart-legend .lg-muted { color: var(--muted); }

.t-plot { accent-color: #4f8ef7; margin-right: 2px; flex-shrink: 0; }
.strat-chip {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: rgba(79,142,247,.14);
  color: #4f8ef7; vertical-align: middle; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Analytics & Ops page ─────────────────────────────────────── */
/* cursor + hover come from .tbl.clickable */

/* segmented control (breakdown tabs) */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.seg button {
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* trail-SL history (trades page) */
.trail-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.trail-btn:hover { color: var(--accent); border-color: var(--accent); }
.trail-btn.open { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.trail-btn .pos, .trail-btn .neg { font-weight: 800; }
/* MT5 rejection reason, shown under the REJECTED status badge */
.rej-reason {
  font-size: 10.5px;
  color: var(--red);
  margin-top: 2px;
  max-width: 200px;
  white-space: normal;
  line-height: 1.25;
}
tr.trail-detail > td {
  background: var(--surface);
  padding: 10px 14px 12px;
  border-bottom: 2px solid var(--accent);
  cursor: default;
}
.trail-head { font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.trail-head b { color: var(--text); }
.trail-none { font-size: 12px; color: var(--muted); font-style: italic; margin: 2px 0 6px; }
.trail-tbl {
  width: auto; min-width: 520px;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.trail-tbl th, .trail-tbl td { padding: 5px 12px; font-size: 12px; text-align: left; }
.trail-tbl th {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.trail-tbl td { border-bottom: 1px solid var(--border); }
.trail-tbl tbody tr:last-child td { border-bottom: none; }
.trail-tbl .num { text-align: right; }

/* custom date-range inputs (trades page) */
.custom-range { display: inline-flex; align-items: center; gap: 5px; }
.custom-range[hidden] { display: none; }   /* explicit display beats [hidden] */
.custom-range input[type="date"] {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 9px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  color-scheme: light;
}
body.dark .custom-range input[type="date"] { color-scheme: dark; }
.custom-range input[type="date"]:focus { outline: none; border-color: var(--accent); }
.range-sep { color: var(--muted); font-size: 12px; }

/* ── Strategies (registry) page ───────────────────────────────── */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}
.sg-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px 15px 11px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}
.sg-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.sg-card.live { box-shadow: inset 3px 0 0 var(--green); }
.sg-card.silent { box-shadow: inset 3px 0 0 var(--red); }
.sg-card.unreg { border-style: dashed; }
.sg-card.unreg .sg-name { color: var(--muted); }

.sg-top { display: flex; align-items: center; gap: 7px; }
.sg-top .spacer { flex: 1; }
.sg-state {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em;
}
.sg-state.live { color: var(--green); }
.sg-state.silent { color: var(--red); }
.sg-state.unreg { color: var(--muted); }
.sg-card.live .status-dot.up { animation: sg-pulse 2s ease-out infinite; }
@keyframes sg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-card.live .status-dot.up { animation: none; }
}
.sg-magic {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 7px;
  padding: 2px 8px;
}
.sg-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.sg-sid {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; color: var(--muted); margin-top: -4px;
}
/* balance chart legend + version scoreboard */
.bal-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 8px; font-size: 11px; color: var(--muted);
}
.bal-key { display: inline-flex; align-items: center; gap: 5px; }
.bal-key i { width: 9px; height: 3px; border-radius: 2px; flex: none; }
/* starting-capital rule: dashed, like the line it stands for */
.bal-base { color: var(--muted); }
.bal-base i {
  height: 0; border-radius: 0; border-top: 2px dashed var(--muted); opacity: 0.7;
}
.bal-events { margin-left: auto; font-variant-numeric: tabular-nums; }
/* crosshair readout: one row per series at the hovered time */
.tip-when { color: var(--muted); font-size: 10.5px; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.55; }
.tip-row .tip-name {
  flex: 1; min-width: 0; max-width: 210px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tip-sw { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.tip-ev {
  color: var(--muted); font-size: 10.5px;
  border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px;
}
.tip-ev + .tip-ev { border-top: none; margin-top: 0; padding-top: 0; }
.ver-tag {
  font-size: 10.5px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px;
}
.ver-tag.live { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

.sg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -1px; }
.sg-chips .tf { color: var(--accent); border-color: var(--accent-soft); }
.sg-chips .sg-more { color: var(--muted); cursor: help; }

/* filter bar summary above the card grid */
.sg-count {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 12px; margin: 0 2px 10px;
}
.sg-count:empty { display: none; }
.sg-clear {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
.sg-clear:hover { text-decoration: underline; }
.sg-rows { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; }
.sg-rows > div { display: flex; justify-content: space-between; gap: 10px; }
.sg-rows .k { color: var(--muted); flex: none; }
.sg-rows > div > span:last-child { text-align: right; }
.sg-acct { color: var(--accent); text-decoration: none; font-weight: 600; }
.sg-acct:hover { text-decoration: underline; }
.sg-dim { color: var(--muted); }
.sg-hint {
  font-size: 11px; color: var(--muted); font-style: italic;
  border-top: 1px dashed var(--border); padding-top: 7px;
}
.sg-stats {
  display: grid; grid-template-columns: 0.8fr 0.8fr 1fr 1.4fr;
  border-top: 1px solid var(--border);
  padding-top: 8px; margin-top: auto;
}
.sg-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sg-stats .v { font-size: 15.5px; font-weight: 700; }
.sg-stats .v.pos { color: var(--green); }
.sg-stats .v.neg { color: var(--red); }
.sg-stats .l {
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}

.ops-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.ops-card { display: flex; flex-direction: column; gap: 8px; }
.ops-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ops-card-head h4 { margin: 0; font-size: 15px; }
.ops-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ops-switch input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.ops-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.ops-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ops-field input {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 9px; font-size: 13px; font-weight: 500;
}
.ops-field input:focus { outline: none; border-color: var(--accent); }
.ops-hint { color: var(--muted); font-weight: 500; font-size: 11px; }
/* baseline editor: a number box that reads as a table cell until you use it */
.bl-input {
  width: 96px; text-align: right;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 4px 7px;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.bl-input:focus { outline: none; border-color: var(--accent); }
.bl-tier { padding: 3px 8px; font-size: 11px; }
.ops-checks { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.ops-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ops-checks input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.ops-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ops-status { font-size: 12px; color: var(--muted); }

/* ── position controls (account page) ─────────────────────────── */
.pos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acct-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.pos-row-actions { display: flex; justify-content: flex-end; }
.btn-danger {
  background: var(--red); color: #fff; border: none; border-radius: 8px;
  padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger:disabled { opacity: 0.5; cursor: default; }
.btn-warn {
  background: transparent; color: #d98a00; border: 1px solid #d98a00;
  border-radius: 8px; padding: 5px 11px; font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.btn-warn:hover { background: rgba(217,138,0,.12); }
.pos-empty { color: var(--muted); font-size: 12.5px; padding: 6px 2px; }

/* ── /strategy page: run sessions, uptime timeline, P/L, event log ── */
.ver-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 6px;
}
.kpi-mini { font-size: 11px; font-weight: 700; margin: 0 2px 0 1px; }

.up-bar {
  position: relative; height: 26px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden;
}
.up-seg {
  position: absolute; top: 0; bottom: 0; background: var(--green);
  opacity: 0.85; min-width: 2px;
}
.up-seg.run { opacity: 1; }
.up-seg.died { background: var(--amber); }
.up-scale {
  display: flex; justify-content: space-between;
  color: var(--muted); font-size: 10.5px; margin-top: 4px;
}

/* P/L per run: one bar per process run around a zero line, so a deploy that
   turned a strategy loss-making stands out from the table above it. */
.run-bars { margin-top: 12px; }
.run-bars:empty { display: none; }
.run-bars-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.run-bars-row {
  position: relative; display: flex; align-items: stretch;
  gap: 6px; height: 84px;
}
/* one continuous zero line, rather than a dash under each bar */
.run-bars-row::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--border); pointer-events: none;
}
.run-bar {
  flex: 1 1 0; min-width: 5px; max-width: 46px;
  display: flex; flex-direction: column; cursor: help;
}
.run-bar-half { flex: 1; display: flex; }
.run-bar-half.up { align-items: flex-end; }
.run-bar-half.dn { align-items: flex-start; }
.run-bar-half i { display: block; width: 100%; border-radius: 2px; }
.run-bar-half i.pos { background: var(--green); }
.run-bar-half i.neg { background: var(--red); }
.run-bar.live .run-bar-half i { outline: 2px solid var(--accent); outline-offset: 1px; }
tr.run-live > td { background: var(--accent-soft); }
.run-tags { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* names the period the card's stats strip covers — without it the numbers
   read as lifetime totals, which is exactly the confusion this fixes */
.sg-scope {
  margin-top: auto; padding-top: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); cursor: help;
}
.sg-scope + .sg-stats { margin-top: 2px; padding-top: 6px; }

.st-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
@media (max-width: 900px) { .st-cols { grid-template-columns: 1fr; } }

.pnl-chart { min-height: 120px; }
.pnl-svg { width: 100%; height: 170px; display: block; }
.pnl-zero { stroke: var(--border); stroke-width: 1; }
.pnl-line { fill: none; stroke-width: 2; }
.pnl-line.pos { stroke: var(--green); }
.pnl-line.neg { stroke: var(--red); }
.pnl-fill.pos { fill: rgba(22, 163, 74, 0.10); stroke: none; }
.pnl-fill.neg { fill: rgba(239, 68, 68, 0.10); stroke: none; }
.pnl-meta {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--muted); font-size: 11px; margin-top: 4px;
}
.pnl-meta b { font-size: 14px; }

.rej-row {
  position: relative; display: flex; gap: 8px; align-items: center;
  padding: 5px 8px; border-radius: 6px; overflow: hidden;
  font-size: 12px; margin-bottom: 4px; background: var(--surface);
}
.rej-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(239, 68, 68, 0.12);
}
.rej-n { font-weight: 700; color: var(--red); z-index: 1; flex: none; }
.rej-txt { z-index: 1; word-break: break-word; }

.ev-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  border-radius: 6px; padding: 2px 7px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.ev-badge.ev-SIGNAL { color: var(--accent); border-color: var(--accent); }
.ev-badge.ev-MT5_RESULT { color: var(--text); }
.ev-badge.ev-TRAIL_MOVE { color: var(--amber); border-color: var(--amber); }
.ev-badge.ev-CLOSE_DETECTED { color: var(--green); border-color: var(--green); }
.ev-badge.ev-RECOVERY { color: var(--red); border-color: var(--red); }

/* strategy-card extras (strategies grid) */
.sg-ipver { display: flex; gap: 6px; align-items: center; }
.stat-sub { color: var(--muted); font-size: 10.5px; margin-top: 2px; }

/* Version 2: a strategy running older code than what is deployed. Deploys
   ship code and update the schedule but never restart a running strategy —
   it may be holding open positions — so this state is normal, expected, and
   otherwise invisible. Sized as an inline tag rather than a status dot,
   because it sits under the job name alongside the enabled/scheduled line. */
.pill-warn {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: rgba(245, 166, 35, 0.16);
  border: 1px solid rgba(245, 166, 35, 0.42);
  color: #b45309;
}
body.dark .pill-warn { color: #fcd34d; }