/* =========================================================================
   Equinoct — design system
   Aesthetic: refined trading-terminal. Dark, sharp, monospace numbers,
   single emerald accent. No purple gradients, no Inter, no shadows.
   Type pairing: General Sans (UI) + JetBrains Mono (numbers).
   ========================================================================= */

:root {
  /* Type system + geometry are theme-independent */
  --font-ui:      'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:       8px;
  --radius-lg:    12px;
  --gap:          16px;
  --gap-lg:       24px;

  /* Brand-mark palette — theme-independent. Disc, stripes, and tick all
     render the same colours in light + dark mode (matching the favicon)
     so the mark is instantly recognisable across both surfaces. */
  --ink:          #1c1f26;
  --paper:        #f8f6f1;
  --signal:       #7ed99a;
}

/* ---- Dark theme (default) ----------------------------------------- */
:root,
:root[data-bs-theme="dark"] {
  --bg:           #07090c;
  --bg-elev:      #0d1117;
  --surface:      #11161d;
  --surface-2:    #161c24;
  --border:       #1d242e;
  --border-soft:  #161c24;
  --hover:        #1a212b;

  --text:         #e6eaf0;
  --text-soft:    #b6bec9;
  --text-muted:   #6c7682;
  --text-faint:   #4a5260;

  --accent:       #5eead4;
  --accent-rgb:   94, 234, 212;
  --accent-soft:  rgba(94, 234, 212, 0.12);
  --accent-line:  rgba(94, 234, 212, 0.32);
  --accent-ink:   #03100c;

  --profit:       #34d399;
  --loss:         #f87171;
  --warn:         #fbbf24;
  --info:         #60a5fa;
  --debug:        #6c7682;

  /* Atmospheric tints used by body background gradients */
  --grad-1: rgba(94, 234, 212, 0.04);
  --grad-2: rgba(96, 165, 250, 0.025);
}

/* ---- Light theme — warm off-white, slate ink, deeper teal accent --- */
:root[data-bs-theme="light"] {
  --bg:           #f7f7f3;     /* warm bone, NOT cold grey */
  --bg-elev:      #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f1f1ec;
  --border:       #e2e2dc;
  --border-soft:  #ececea;
  --hover:        #f3f3ee;

  --text:         #0a0e14;
  --text-soft:    #2c333d;
  --text-muted:   #6c7682;
  --text-faint:   #97a0a8;

  --accent:       #0d9488;     /* deeper teal — readable on white */
  --accent-rgb:   13, 148, 136;
  --accent-soft:  rgba(13, 148, 136, 0.10);
  --accent-line:  rgba(13, 148, 136, 0.30);
  --accent-ink:   #ffffff;

  --profit:       #047857;     /* deeper green for white background */
  --loss:         #b91c1c;
  --warn:         #b45309;
  --info:         #1d4ed8;
  --debug:        #6c7682;

  --grad-1: rgba(13, 148, 136, 0.05);
  --grad-2: rgba(29, 78, 216, 0.03);
}

/* --- Reset that bootstrap doesn't fully cover --------------------------- */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-feature-settings: 'cv11', 'ss03', 'ss01';
  letter-spacing: -0.005em;
  font-size: 14px;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 100% 0%, var(--grad-1) 0%, transparent 35%),
    radial-gradient(circle at 0% 100%, var(--grad-2) 0%, transparent 40%);
  background-attachment: fixed;
}

/* Tabular numerals everywhere — even outside .num spans */
table, .num, .stat-value {
  font-variant-numeric: tabular-nums;
}

/* --- Top status bar ----------------------------------------------------- */

.statusbar {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elev);
  letter-spacing: 0.02em;
}
.statusbar .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.statusbar .dot.live    { background: var(--accent); box-shadow: 0 0 8px var(--accent-line); animation: pulse-soft 2.4s ease-in-out infinite; }
.statusbar .dot.halted  { background: var(--loss);   box-shadow: 0 0 8px rgba(248,113,113,0.4); }
.statusbar .sep { color: var(--text-faint); }
.statusbar .item strong { color: var(--text-soft); font-weight: 500; }

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* --- Top nav (replaces .navbar) ----------------------------------------- */

.topnav {
  display: flex;
  align-items: center;
  padding: 16px 24px 0 24px;
  gap: 32px;
  background: transparent;
  border: none !important;
}
.topnav .brand {
  font-family: var(--font-ui);
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* SVG mark — disc is always --ink, stripes always --paper, tick always
   --signal. The brand mark renders identically in light + dark themes,
   matching the favicon design (dark disc with white bars + green tick).
   The disc uses currentColor (driven by the brand-mark's color property);
   the bars + tick are filled via CSS rules below rather than inline
   `fill="var(...)"` because not every browser resolves CSS variables
   inside SVG presentation attributes. CSS rules work everywhere. */
.brand-mark {
  flex-shrink: 0;
  color: var(--ink);
}
.brand-mark .bar  { fill: var(--paper); }
.brand-mark .tick { fill: var(--signal); }
.topnav .brand .brand-mark {
  width: 28px;
  height: 28px;
}

.topnav .brand-word {
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--text);
}
.topnav .brand-word .dot { color: var(--signal); }

/* Optional: live-trading pulse on the green tick. Add `is-trading` class
   to .brand-mark while a strategy is mid-evaluation / mid-fill. */
.topnav .brand .brand-mark .tick {
  transform-origin: 61px 50px;
  transition: all .24s cubic-bezier(.2, .8, .2, 1);
}
.topnav .brand .brand-mark.is-trading .tick {
  animation: brand-tick-pulse 1.4s ease-out infinite;
}
@keyframes brand-tick-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .25; transform: scale(.6); }
}
.topnav .nav-links {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.topnav .nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 120ms, background 120ms;
}
.topnav .nav-link:hover {
  color: var(--text);
  background: var(--hover);
}
.topnav .nav-link.active {
  color: var(--text);
  background: var(--surface);
}
.topnav .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Theme toggle + hamburger (icon-only buttons in nav-right) --- */
.theme-toggle,
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  padding: 0;
}
.theme-toggle:hover,
.hamburger:hover {
  background: var(--hover);
  border-color: var(--text-faint);
  color: var(--text);
}
.theme-toggle svg,
.hamburger svg {
  width: 15px;
  height: 15px;
  display: none;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root[data-bs-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
:root[data-bs-theme="light"] .theme-toggle .icon-moon { display: block; }
.hamburger .icon-menu  { display: block; }
.hamburger .icon-close { display: none; }
.hamburger.is-open .icon-menu  { display: none; }
.hamburger.is-open .icon-close { display: block; }
.hamburger { display: none; }   /* hidden until mobile breakpoint */

/* --- Page container ---------------------------------------------------- */

.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px 0;
  color: var(--text);
}
.page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

/* --- Override Bootstrap card system ------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: none;
  color: var(--text);
}
.card-body { padding: 18px 20px; }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-soft);
}
.card-header .card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  color: var(--text);
}

/* --- Stat cards (hero metrics) ----------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
  position: relative;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-card::before {
  /* hairline accent strip on the left side of the card */
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.stat-card.is-accent::before  { background: var(--accent); }
.stat-card.is-profit::before  { background: var(--profit); }
.stat-card.is-loss::before    { background: var(--loss); }

.stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.stat-card .stat-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
}
.stat-card .stat-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.stat-card .stat-meta .num {
  font-family: var(--font-mono);
  color: var(--text-soft);
}
.stat-card.is-profit .stat-value { color: var(--profit); }
.stat-card.is-loss   .stat-value { color: var(--loss); }

/* Generic is-profit / is-loss — applies anywhere (table cells, spans,
   etc). The stat-card-scoped rules above stay specific to the hero
   cards' bigger styling; this rule provides the basic green/red text
   color used in tables.

   The `.table td.num.is-profit` variants chain both classes so the
   selector beats `.table td.num` (which sets color: var(--text-soft))
   on specificity (0,3,1 vs 0,2,1). */
.is-profit,
.table td.num.is-profit,
.table td.is-profit { color: var(--profit); }
.is-loss,
.table td.num.is-loss,
.table td.is-loss   { color: var(--loss); }

/* --- Main two-column grid (chart + activity rail) ---------------------- */

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap-lg);
}
@media (max-width: 1100px) {
  .main-grid { grid-template-columns: 1fr; }
}

/* --- Activity feed (embedded right rail) ------------------------------- */

.activity-card {
  display: flex;
  flex-direction: column;
  height: 540px;
}
.activity-card .card-header {
  flex-shrink: 0;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.activity-list::-webkit-scrollbar       { width: 6px; }
.activity-list::-webkit-scrollbar-track { background: transparent; }
.activity-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.activity-row {
  display: grid;
  grid-template-columns: 14px 56px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  line-height: 1.4;
}
.activity-row:first-child { border-top: none; }
.activity-row .sev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--debug);
  margin-top: 5px;
  flex-shrink: 0;
}
.activity-row.sev-info     .sev-dot { background: var(--info); }
.activity-row.sev-success  .sev-dot { background: var(--profit); }
.activity-row.sev-warning  .sev-dot { background: var(--warn); }
.activity-row.sev-error    .sev-dot { background: var(--loss); }

.activity-row .ts {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.activity-row .body { min-width: 0; }
.activity-row .ticker {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  margin-right: 6px;
  font-weight: 500;
}
.activity-row .msg {
  color: var(--text-soft);
  word-break: break-word;
}
.activity-row .et {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-right: 8px;
}
.activity-row.sev-debug .msg { color: var(--text-muted); }
.activity-row.sev-error .msg { color: var(--loss); }

/* New row pulse — subtle highlight when a fresh event arrives */
@keyframes activity-flash {
  from { background-color: rgba(94, 234, 212, 0.08); }
  to   { background-color: transparent; }
}
.activity-row.new-row {
  animation: activity-flash 2s ease-out;
}

.activity-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.activity-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* --- Tables ------------------------------------------------------------ */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border-soft);
  margin: 0;
  font-size: 13px;
}
.table > thead > tr > th {
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
}
.table > tbody > tr > td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.table > tbody > tr:hover { background: var(--hover); }
.table > :not(caption) > * > * { border-color: var(--border-soft); }
.table-sm > :not(caption) > * > * { padding: 9px 12px; }

/* --- Privacy toggle ---------------------------------------------------- */
/* `.sensitive` is the marker class on any node whose contents are
   "the dollar amount" (NAV, deposits, etc.). When body has
   `privacy-mode`, those nodes blur out + lose their selection
   highlight so the value can't be screenshot-leaked or copy-pasted.
   The button's two label spans toggle visibility so it reads
   "Hide $" when values are visible and "Show $" when they're hidden. */
.sensitive {
  transition: filter 120ms ease-in-out;
}
body.privacy-mode .sensitive {
  filter: blur(7px);
  user-select: none;
  cursor: default;
}
.privacy-label-show { display: inline; }
.privacy-label-hide { display: none; }
body.privacy-mode .privacy-label-show { display: none; }
body.privacy-mode .privacy-label-hide { display: inline; }

/* --- Pure-CSS hover popups (sector breakdown drill-down etc.) ---------- */
/* The trigger span sets a positioning context for the absolutely
   positioned `.hover-card`. The card is hidden by default and revealed
   on `:hover` or `:focus-within` (keyboard accessibility). */
.hover-trigger {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--border);  /* affordance: this is hoverable */
}
.hover-card {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 320px;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg-elev, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  white-space: normal;
}
.hover-trigger:hover .hover-card,
.hover-trigger:focus-within .hover-card { display: block; }

.hover-card-title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-soft);
}
.hover-card-table { width: 100%; border-collapse: collapse; }
.hover-card-table td {
  padding: 3px 0;
  border: none;
  color: var(--text-soft);
}
.hover-card-table td.num.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hover-card-table tr + tr td { border-top: 1px dashed var(--border-soft); }

/* tabular numerals on common numeric cells */
.table td.num,
.table td.col-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-soft);
  text-align: right;
}

/* --- Equity chart card ------------------------------------------------- */

.chart-card {
  height: 540px;
  display: flex;
  flex-direction: column;
}
.chart-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chart-card canvas {
  flex: 1;
  min-height: 0;
  max-height: 100%;
}
.chart-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.chart-meta .item .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.chart-meta .item .val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}
.chart-meta .item .val.profit { color: var(--profit); }
.chart-meta .item .val.loss   { color: var(--loss); }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 6px;
  padding: 6px 12px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.btn-outline-light, .btn-outline-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.btn-outline-light:hover, .btn-outline-secondary:hover {
  background: var(--hover);
  border-color: var(--text-faint);
  color: var(--text);
}
.btn-outline-danger {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: var(--loss);
}
.btn-outline-danger:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: var(--loss);
  color: var(--loss);
}
.btn-success {
  background: var(--profit);
  border: 1px solid var(--profit);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover, .btn-success:hover {
  filter: brightness(1.08);
}
/* Light theme buttons need white ink on the deeper accent/profit colors */
:root[data-bs-theme="light"] .btn-primary,
:root[data-bs-theme="light"] .btn-success {
  color: #ffffff;
}

/* --- Badges & severity pills ------------------------------------------ */

.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.badge.bg-success   { background: rgba(52, 211, 153, 0.15) !important; color: var(--profit) !important; border: 1px solid rgba(52, 211, 153, 0.3); }
.badge.bg-danger    { background: rgba(248, 113, 113, 0.15) !important; color: var(--loss) !important; border: 1px solid rgba(248, 113, 113, 0.3); }
.badge.bg-warning   { background: rgba(251, 191, 36, 0.15) !important; color: var(--warn) !important; border: 1px solid rgba(251, 191, 36, 0.3); }
.badge.bg-primary   { background: rgba(96, 165, 250, 0.15) !important; color: var(--info) !important; border: 1px solid rgba(96, 165, 250, 0.3); }
.badge.bg-secondary { background: rgba(108, 118, 130, 0.15) !important; color: var(--text-muted) !important; border: 1px solid rgba(108, 118, 130, 0.3); }

.bot-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface);
}
.bot-pill.running { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.bot-pill.halted  { color: var(--loss); border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.08); }
.bot-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.bot-pill.running .dot { animation: pulse-soft 2.4s ease-in-out infinite; }

/* --- Misc semantic ---------------------------------------------------- */

.profit, .text-profit { color: var(--profit); }
.loss, .text-loss     { color: var(--loss); }
.text-soft            { color: var(--text-soft); }
.text-faint           { color: var(--text-muted); }

/* Replace bootstrap text-muted with our scale */
.text-muted { color: var(--text-muted) !important; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-soft);
}

/* --- Forms (login) --------------------------------------------------- */

.form-control {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 10px 12px;
}
.form-control:focus {
  background: var(--bg-elev);
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
  color: var(--text);
}
.form-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* --- Alerts (flash messages) ----------------------------------------- */

.alert {
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  padding: 10px 14px;
}
.alert-danger  { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.25); color: var(--loss); }
.alert-success { background: rgba(52,211,153,0.08);  border-color: rgba(52,211,153,0.25);  color: var(--profit); }

/* --- Section headers used inside cards ------------------------------- */

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* --- Modal (bootstrap override) -------------------------------------- */

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 22px;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.modal-body { padding: 18px 22px; }
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 22px;
}
.modal .btn-close {
  filter: invert(0.8);
}
:root[data-bs-theme="light"] .modal .btn-close {
  filter: none;
}
.modal-backdrop.show { opacity: 0.65; }

/* --- Mobile breakpoint -------------------------------------------- */

/* Allow the topnav to wrap onto a second row when the menu opens */
.topnav { flex-wrap: wrap; row-gap: 12px; }
.topnav .nav-links { transition: background 120ms; }

@media (max-width: 768px) {

  /* Tighter chrome */
  .statusbar {
    height: auto; min-height: 28px;
    flex-wrap: wrap; row-gap: 4px;
    padding: 6px 14px;
    font-size: 10.5px;
  }
  .statusbar .item { white-space: nowrap; }
  .statusbar > .item:nth-child(3),    /* hide 'paper · alpaca · us-east-1' to save space */
  .statusbar > .sep:nth-child(4) { display: none; }

  .topnav {
    padding: 12px 14px 0 14px;
    gap: 12px 14px;
    align-items: center;
  }
  .topnav .brand        { order: 0; }
  .topnav .right        { order: 1; margin-left: auto; gap: 6px; }
  .topnav .nav-links    {
    order: 2;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
    /* Hidden until JS toggles .is-open */
    display: none;
  }
  .topnav .nav-links.is-open { display: flex; }
  .topnav .nav-link {
    padding: 11px 14px;
    border-radius: 6px;
    font-size: 14px;
  }

  /* Show the hamburger only on mobile */
  .hamburger { display: inline-flex; }

  /* Halt button gets shorter on mobile to save space */
  .topnav .right .btn { padding: 6px 10px; font-size: 11px; }

  /* Page chrome */
  .page { padding: 16px 14px; }
  .page-title    { font-size: 18px; }
  .page-subtitle { font-size: 12.5px; }

  /* Hero metrics — single column on narrow phones, 2 col otherwise */
  .stat-grid { gap: 10px; margin-bottom: 16px; }
  .stat-card { padding: 14px 16px; }
  .stat-card .stat-value { font-size: 22px; }
  .stat-card .stat-label { margin-bottom: 6px; }

  /* Main grid stacks; activity rail no longer needs fixed height */
  .main-grid     { gap: 10px; margin-bottom: 16px; }
  .chart-card    { height: 360px; }
  .activity-card { height: 460px; }
  .chart-meta { gap: 16px; }
  .chart-meta .item .val { font-size: 16px; }

  /* Cards / sections */
  .card-header { padding: 12px 14px; font-size: 12.5px; }
  .card-body   { padding: 14px 16px; }
  .card-body.p-0 { padding: 0; }

  /* Tables — slightly smaller, compact padding */
  .table > thead > tr > th { padding: 10px 10px; font-size: 9.5px; }
  .table > tbody > tr > td { padding: 9px 10px; font-size: 12px; }
  .table-sm > :not(caption) > * > * { padding: 8px 10px; }
  .table td.num, .table td.col-num { font-size: 11.5px; }

  /* Strategies grid */
  .strategy-card .card-body { padding: 14px 16px; }

  /* Activity rows — tighter */
  .activity-row { grid-template-columns: 12px 50px 1fr; padding: 8px 14px; gap: 8px; }
  .activity-row .ts { font-size: 10px; }
  .activity-row { font-size: 12px; }

  /* Headers that flex-wrap their actions */
  .mb-4.d-flex.justify-content-between { flex-wrap: wrap; gap: 12px; }

  /* Login card */
  .page > div[style*="max-width:420px"] { margin-top: 32px !important; }
}

/* Single-column hero on truly narrow phones */
@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
  .statusbar > .item:last-child { display: none; }   /* hide 'equinoct / v4' */
  .topnav .brand { font-size: 16px; }
  .chart-meta { flex-wrap: wrap; row-gap: 10px; }
  .chart-meta .item { min-width: 45%; }
}

/* --- Clickable strategy cards --------------------------------------- */

.strategy-card {
  cursor: pointer;
  transition: border-color 140ms, transform 140ms, background 140ms;
  position: relative;
}
.strategy-card:hover {
  border-color: var(--accent-line);
  background: var(--hover);
}
.strategy-card .strategy-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.strategy-card:hover .strategy-cta {
  color: var(--accent);
}
.strategy-card .strategy-cta::after {
  content: '→';
  transition: transform 140ms;
}
.strategy-card:hover .strategy-cta::after {
  transform: translateX(3px);
}