:root {
  --bg: #0f1115; --card: #171a21; --border: #2a2e38;
  --text: #e8eaed; --muted: #9aa0ab;
  --green: #3ecf8e; --red: #f0616d; --accent: #5b8cff; --amber: #f0b95b;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body {
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  padding-top: calc(16px + env(safe-area-inset-top));
}
/* Centers content on wide screens instead of letting cards stretch edge to
   edge -- this file didn't exist for the first desktop viewing, which is
   why it looked misaligned/mobile-only there. */
.container { max-width: 720px; margin: 0 auto; }

.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
h1 { font-size: 19px; margin: 0; }
.refresh-btn, .back-link {
  background: none; border: none; color: var(--accent); font-size: 14px;
  padding: 8px; text-decoration: none; font-family: inherit; cursor: pointer;
}
.subtitle { color: var(--muted); font-size: 12px; margin-bottom: 14px; }

/* Top status row (2026-09-06): 3 round market-status lights, left-aligned,
   replacing the old .header row's job of holding the refresh button (index
   page) or sitting alone (secondary pages) at the very top. The page title
   itself moved out of this row entirely -- see .app-title below -- so it
   reads as a centered page heading instead of competing with the lights
   for the same line. */
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; min-height: 30px; }
.market-lights { display: flex; gap: 16px; }
.market-light { display: flex; align-items: center; gap: 6px; }
.light-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.light-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--border);
  flex-shrink: 0; transition: background-color 0.2s, box-shadow 0.2s;
}
/* Green/red only once a real status is known (see loadMarketLights() in
   each page's script) -- the default --border grey above is the neutral
   "not fetched yet / unknown" state, deliberately not red, so a slow or
   failed /api/market-status call never falsely reads as "market closed". */
.light-dot.open { background: var(--green); box-shadow: 0 0 5px rgba(62,207,142,0.7); }
.light-dot.closed { background: var(--red); box-shadow: 0 0 5px rgba(240,97,109,0.6); }

.app-title { font-size: 19px; margin: 0 0 4px; text-align: center; }

.auto-refresh-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted);
}
.toggle-switch {
  position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--border); border-radius: 22px;
  transition: background-color 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: var(--text); border-radius: 50%; transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
#autoRefreshInterval, #logsAutoRefreshInterval {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; font-family: inherit;
}
.refresh-countdown { color: var(--muted); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.refresh-progress-track {
  height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 12px;
}
.refresh-progress-bar {
  height: 100%; width: 0%; background: var(--accent); border-radius: 2px;
  transition: width 1s linear;
}

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: none; border: none; color: var(--muted); font-size: 14px;
  padding: 10px 4px; margin-right: 20px; cursor: pointer; border-bottom: 2px solid transparent;
  font-family: inherit; font-weight: 600;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.stat-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 21px; font-weight: 700; margin-top: 4px; }
.pos { color: var(--green); } .neg { color: var(--red); }

.section-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.section-card h2 { font-size: 13px; color: var(--muted); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .03em; }
.ticker-row {
  display: flex; justify-content: space-between; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.ticker-row:last-child { border-bottom: none; }
.ticker-row .meta { color: var(--muted); font-size: 11px; text-align: right; }

.ticker-group { border-bottom: 1px solid var(--border); }
.ticker-group:last-child { border-bottom: none; }
.ticker-group summary {
  list-style: none; cursor: pointer; padding: 10px 0;
  display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600;
}
.ticker-group summary::-webkit-details-marker { display: none; }
.ticker-group summary::after {
  content: '▸'; color: var(--muted); font-size: 12px; margin-left: 8px;
  transition: transform 0.15s;
}
.ticker-group[open] summary::after { transform: rotate(90deg); }
.ticker-group-body { padding-bottom: 8px; }
.ticker-group-body .ticker-row { padding-left: 10px; font-size: 13px; }
.ticker-summary .meta { font-weight: 400; }

.pos-table-header {
  /* (2026-09-11) 7th column added for P/L % alongside the existing $ P/L column. */
  display: grid; grid-template-columns: 1.1fr 0.85fr 0.75fr 0.75fr 0.85fr 0.65fr 0.5fr; gap: 4px;
  padding: 6px 0; margin-bottom: 4px; border-bottom: 1px solid var(--border);
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.pos-table-header span { cursor: pointer; user-select: none; }
.pos-table-header span:last-child { cursor: default; text-align: center; }
.pos-table-row {
  display: grid; grid-template-columns: 1.1fr 0.85fr 0.75fr 0.75fr 0.85fr 0.65fr 0.5fr; gap: 4px;
  padding: 7px 0 7px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px;
  align-items: center;
}
.pos-table-row:last-child { border-bottom: none; }

.ticker-name-rate { display: flex; flex-direction: column; gap: 2px; }
.ticker-current { font-size: 12px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.ticker-refreshed { font-size: 9.5px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Entry-reasoning show/hide toggle, per open position (2026-09-05) --
   deliberately smaller than .toggle-switch (used for auto-refresh) since
   this one repeats once per position row rather than appearing once. */
.reasoning-toggle-cell { display: flex; justify-content: center; }
.mini-toggle {
  position: relative; display: inline-block; width: 26px; height: 15px; flex-shrink: 0; cursor: pointer;
}
.mini-toggle input { opacity: 0; width: 0; height: 0; }
.mini-toggle input:disabled + .mini-toggle-slider { opacity: 0.35; cursor: default; }
.mini-toggle-slider {
  position: absolute; inset: 0; background: var(--border); border-radius: 15px;
  transition: background-color 0.2s;
}
.mini-toggle-slider::before {
  content: ''; position: absolute; height: 11px; width: 11px; left: 2px; top: 2px;
  background: var(--text); border-radius: 50%; transition: transform 0.2s;
}
.mini-toggle input:checked + .mini-toggle-slider { background: var(--accent); }
.mini-toggle input:checked + .mini-toggle-slider::before { transform: translateX(11px); }
.pos-reasoning {
  padding: 8px 10px 10px 10px; margin: -2px 0 2px 10px; font-size: 12.5px; line-height: 1.4;
  color: var(--text); background: rgba(91,140,255,0.06); border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0;
}
.pos-reasoning-meta { color: var(--muted); font-size: 10.5px; margin-top: 5px; }

.trade-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.trade-row:last-child { border-bottom: none; }
.trade-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.trade-pl-pct { font-size: 11px; font-weight: 600; margin-left: 5px; opacity: 0.85; }
.trade-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 3px; }
.trade-prices { color: var(--text); font-size: 13px; font-weight: 600; margin-top: 4px; }
.reason-tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px;
  background: rgba(91,140,255,0.15); color: var(--accent); margin-top: 4px;
}
.reason-tag.untracked { background: rgba(240,97,109,0.15); color: var(--red); }

.view-all-link {
  display: block; text-align: center; padding: 10px; margin-top: 4px;
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
}

.range-picker { display: flex; gap: 8px; margin-bottom: 14px; }
.range-btn {
  flex: 1; background: var(--card); border: 1px solid var(--border); color: var(--muted);
  padding: 9px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.range-btn.active { border-color: var(--accent); background: rgba(91,140,255,0.12); color: var(--accent); }

.timeline-date-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.timeline-date-row input[type="date"] {
  flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit;
}
.date-nav-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  width: 34px; height: 34px; border-radius: 8px; font-size: 16px; cursor: pointer; flex-shrink: 0;
}
.timeline-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
  font-size: 11px; color: var(--muted);
}
.timeline-legend span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-buy { background: var(--accent); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); border-radius: 0; }
.legend-win { background: var(--green); }
.legend-loss { background: var(--red); }
.legend-open { background: var(--amber); }
#timelineChartWrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cooldown-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.cooldown-row:last-child { border-bottom: none; }
.cooldown-ticker { font-weight: 700; }
.cooldown-msg { color: var(--amber); font-size: 12px; }

.decisions-filter-row { display: flex; gap: 8px; margin-bottom: 16px; }
.decisions-filter-row select, .decisions-filter-row input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit;
}
.decisions-filter-row select { flex-shrink: 0; }
.decisions-filter-row input { flex: 1; }

.decision-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.decision-row:last-child { border-bottom: none; }
.decision-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.decision-ticker { font-weight: 700; font-size: 14px; }
.decision-action {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .02em;
}
.action-buy { background: rgba(62,207,142,0.15); color: var(--green); }
.action-close { background: rgba(240,185,91,0.15); color: var(--amber); }
.action-hold { background: rgba(154,160,171,0.15); color: var(--muted); }
.decision-type { font-size: 11px; color: var(--muted); }
.decision-conf { font-size: 11px; color: var(--muted); margin-left: auto; }
.decision-reasoning { font-size: 13px; color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.decision-time { font-size: 11px; color: var(--muted); }

.round-group { margin-bottom: 18px; }
.round-group:last-child { margin-bottom: 0; }
.round-header {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--accent); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.view-all-link {
  display: block; text-align: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border); color: var(--accent); font-size: 13px;
  text-decoration: none; font-weight: 600;
}

.not-eval-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.not-eval-row:last-child { border-bottom: none; }
.not-eval-ticker { font-weight: 700; min-width: 50px; }
.not-eval-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .02em; flex-shrink: 0;
}
.not-eval-badge.skipped { background: rgba(154,160,171,0.15); color: var(--muted); }
.not-eval-badge.never { background: rgba(240,185,91,0.15); color: var(--amber); }
.not-eval-reason { color: var(--muted); font-size: 12px; }

.model-count-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; }
.model-counts-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.model-counts-header h2 { margin: 0; }
.model-counts-header .range-picker { margin-bottom: 0; }
.model-counts-subtitle { font-size: 11px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.model-count-name { min-width: 150px; font-weight: 600; }
.model-count-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.model-count-bar { height: 100%; background: var(--accent); border-radius: 3px; }
.model-count-n { min-width: 24px; text-align: right; color: var(--muted); }
.decision-model { color: var(--accent); font-weight: 600; }

.live-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 20px; vertical-align: middle;
  background: rgba(62,207,142,0.15); color: var(--green);
}
.live-badge.stale { background: rgba(240,185,91,0.15); color: var(--amber); }
.live-badge.dead { background: rgba(240,97,109,0.15); color: var(--red); }

/* WebSocket rate feed monitor page (ws_monitor.html) -- same not-eval-row
   flex-row pattern as the "not currently evaluated" list, not a <table>,
   for consistency with the rest of this app (nothing else here uses
   actual HTML tables). */
.ws-daemon-status {
  display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 14px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); margin-bottom: 14px;
}
.ws-daemon-status strong { color: var(--text); }
.ws-ticker-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.ws-ticker-row:last-child { border-bottom: none; }
.ws-ticker-name { font-weight: 700; min-width: 48px; }
.ws-ticker-prices { font-variant-numeric: tabular-nums; min-width: 150px; }
.ws-ticker-age { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; margin-left: auto; }

.empty { color: var(--muted); text-align: center; padding: 24px 0; font-size: 13px; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }

/* Charts tab / ticker picker */
.ticker-picker {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ticker-picker::-webkit-scrollbar { display: none; }
.ticker-chip {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; font-family: inherit;
}
.ticker-chip.active { border-color: var(--accent); background: rgba(91,140,255,0.12); color: var(--accent); }
.indicator-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.indicator-row:last-child { border-bottom: none; }
.indicator-name { color: var(--muted); }
.zone-tag {
  display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 10px;
  margin-left: 6px; vertical-align: middle;
}
.zone-overbought { background: rgba(240,97,109,0.15); color: var(--red); }
.zone-oversold { background: rgba(62,207,142,0.15); color: var(--green); }
.zone-neutral { background: rgba(154,160,171,0.15); color: var(--muted); }
.pivot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 11px; margin-top: 8px; }
.pivot-cell { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px; text-align: center; }
.pivot-cell .lbl { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.pivot-cell .val { font-weight: 700; margin-top: 2px; }

/* Logs page (2026-09-10) -- category tabs + explanation + date-scoped
   entry list, one reader for every log file the bot/daemon writes rather
   than a bespoke page per file.

   CONFIRMED bug (2026-09-10, Imran's own screenshot): this originally used
   the same horizontal-scroll-with-hidden-scrollbar pattern as the Charts
   tab's .ticker-picker (overflow-x: auto + scrollbar-width: none) -- fine
   on a touch device (swipe reveals the rest), but on desktop with a mouse
   there is no visible scrollbar AND no drag-to-scroll, so "WS Daemon" sat
   half-cut-off at the right edge with literally no way to reach it or even
   know more tabs existed. Six short labels easily fit across two rows
   instead, so this now wraps rather than scrolls -- every tab is always
   fully visible, no hidden-content dead end on any input method. */
.log-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.log-tab-btn {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--border); color: var(--muted);
  padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.log-tab-btn.active { border-color: var(--accent); background: rgba(91,140,255,0.12); color: var(--accent); }

.log-desc {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}

.log-date-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.log-date-row input[type="date"] {
  flex: 1; min-width: 140px; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit;
}
.log-date-btn {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  padding: 9px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.log-search-row { margin-bottom: 12px; }
.log-search-row input {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit;
}
.log-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.log-count { font-size: 11px; color: var(--muted); }
.log-truncated-note {
  font-size: 11.5px; color: var(--amber); background: rgba(240,185,91,0.1);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.4;
}

.log-lines { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5; }
.log-line { padding: 3px 0; border-bottom: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; color: var(--text); }
.log-line:last-child { border-bottom: none; }
.log-line.level-warning { color: var(--amber); }
.log-line.level-error { color: var(--red); }

.log-entry { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.log-entry:last-child { border-bottom: none; }
.log-entry-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; font-weight: 600; }
.log-entry-time { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: auto; }
.log-entry-body { color: var(--text); line-height: 1.4; }
.log-entry-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* Login page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px 24px; width: 100%; max-width: 340px; text-align: center;
}
.login-card h1 { font-size: 18px; margin: 0 0 24px; }
.login-card input[type="password"] {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 16px; margin-bottom: 14px;
}
.login-card input[type="password"]:focus { outline: none; border-color: var(--accent); }
.login-card button {
  width: 100%; padding: 14px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-card .error { color: var(--red); font-size: 13px; margin-bottom: 14px; }

/* Desktop / wide-screen adjustments */
@media (min-width: 700px) {
  body { padding: 32px 24px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  h1 { font-size: 22px; }
  .section-card { padding: 18px 20px; }
}