/* ============================================================
   gm_shared.css — Ping Pong GM Design System
   ============================================================
   Palette, typography, layout, cards, buttons, and component
   classes shared between live and sim unified pages.
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — DARK THEME (default)
   ============================================================ */
:root {
  /* --- Surfaces --- */
  --bg0: #0B0E11;          /* App background */
  --bg1: #161B22;          /* Card / panel */
  --bg2: #1C2128;          /* Elevated (modals, active panels) */
  --bg3: #30363D;          /* Borders + deep bg */

  /* --- Borders --- */
  --bdr:  #30363D;
  --bdr2: #484F58;

  /* --- Text --- */
  --t1: #E6EDF3;           /* Primary  (87% white) */
  --t2: #8B949E;           /* Secondary (60% white) */
  --t3: #484F58;           /* Disabled  (38% white) */
  --t4: #444;              /* Dimmer text */

  /* --- Card --- */
  --card:       #161B22;
  --card-hover: #1C2128;

  /* --- Header --- */
  --header-bg:     #161B22;
  --header-border: #30363D;

  /* --- Semantic --- */
  --grn: #3FB68B;          /* Profit / success */
  --red: #F0616D;          /* Loss / error */
  --yel: #D29922;          /* Warning / caution */
  --blu: #58A6FF;          /* Info / active */
  --pur: #A371F7;          /* XP / progression */
  --org: #F0883E;          /* Streak / achievement */
  --cyn: #58A6FF;          /* Alias for active (same as blu in DS) */

  /* --- Tinted backgrounds --- */
  --grn-bg: rgba(63,182,139,0.12);
  --red-bg: rgba(240,97,109,0.12);
  --blu-bg: rgba(88,166,255,0.10);
  --org-bg: rgba(240,136,62,0.10);
  --yel-bg: rgba(210,153,34,0.10);
  --pur-bg: rgba(163,113,247,0.10);

  /* --- Chart --- */
  --chart-bg:   #0B0E11;
  --chart-grid: rgba(48,54,61,0.3);
  --chart-text: #8B949E;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.4);

  /* --- Spacing base --- */
  --sp: 8px;
}

/* ============================================================
   LIGHT THEME OVERRIDE
   ============================================================ */
[data-theme="light"] {
  --bg0: #F0F2F5;
  --bg1: #FFFFFF;
  --bg2: #F6F8FA;
  --bg3: #D0D7DE;

  --bdr:  #D0D7DE;
  --bdr2: #AFB8C1;

  --t1: #1F2328;
  --t2: #656D76;
  --t3: #AFB8C1;
  --t4: #C0C0C0;

  --card:       #FFFFFF;
  --card-hover: #F6F8FA;

  --header-bg:     #FFFFFF;
  --header-border: #D0D7DE;

  --grn: #1A7F37;
  --red: #CF222E;
  --yel: #9A6700;
  --blu: #0969DA;
  --pur: #8250DF;
  --org: #BC4C00;
  --cyn: #0969DA;

  --grn-bg: rgba(26,127,55,0.08);
  --red-bg: rgba(207,34,46,0.08);
  --blu-bg: rgba(9,105,218,0.06);
  --org-bg: rgba(188,76,0,0.08);
  --yel-bg: rgba(154,103,0,0.08);
  --pur-bg: rgba(130,80,223,0.08);

  --chart-bg:   #FFFFFF;
  --chart-grid: rgba(0,0,0,0.04);
  --chart-text: #656D76;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg0);
  color: var(--t1);
  font-size: 14px;
  line-height: 1.4;
}

/* Monospace utility — apply to all numeric values */
.jm, .mono { font-family: 'JetBrains Mono', monospace; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* ============================================================
   TYPE SCALE
   ============================================================ */
.t-32 { font-size: 32px; font-weight: 800; line-height: 1.1; }
.t-24 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.t-20 { font-size: 20px; font-weight: 700; line-height: 1.2; }
.t-16 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.t-14 { font-size: 14px; font-weight: 500; line-height: 1.4; }
.t-12 { font-size: 12px; font-weight: 500; line-height: 1.4; }
.t-11 { font-size: 11px; font-weight: 500; line-height: 1.3; }

/* ============================================================
   LAYOUT — 3-column (live) and 2-column (sim)
   ============================================================ */
.hdr {
  background: var(--header-bg);
  border-bottom: 2px solid var(--bdr);
  padding: 0 16px 4px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-sm);
}
.hdr-top {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
  position: relative;
  overflow: visible;
}
.hdr-top .hdr-tabs { position: absolute; left: 50%; transform: translateX(-50%); }
/* Chart toolbar — 3 groups spread left/center/right */
.chart-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center;
  padding: 2px 0; margin-bottom: 4px;
  border-bottom: 1px solid var(--bdr);
  min-height: 28px;
  position: relative;
}
.chart-toolbar .tb-gear {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg1); border: 1px solid var(--bdr); color: var(--t3);
  font-size: 10px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, color .15s;
}
.chart-toolbar .tb-gear:hover { color: var(--t1); border-color: var(--t2); }
.chart-toolbar .tb-section {
  display: flex; align-items: center; gap: 4px;
  transition: width 0.15s ease, opacity 0.15s ease;
  overflow: hidden;
}
.chart-toolbar .tb-section.tb-hidden,
.chart-tools .tb-section.tb-hidden {
  display: none;
}

/* Live: 3-col (left panel, center chart, right panel) */
.main-live {
  display: grid;
  grid-template-columns: var(--col-left, 240px) 4px 1fr 4px var(--col-right, 260px);
  gap: 0;
  height: calc(100vh - 44px);
}

/* Column resize handles — pill indicator stays viewport-centered */
.col-resize {
  width: 4px; cursor: col-resize;
  background: transparent;
  z-index: 5;
  overflow: hidden;
}
.col-resize::after {
  content: '';
  display: block;
  width: 3px; height: 40px; border-radius: 2px;
  margin: 0 auto;
  position: sticky; top: calc(50vh - 20px);
  background: var(--bdr); transition: background 0.2s;
}
.col-resize:hover::after, .col-resize.dragging::after {
  background: var(--blu);
}

/* Sim: 2-col (center chart 60-65%, sidebar) */
.main-sim {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  height: calc(100vh - 72px);
}

/* Base layout — height only, columns set by .main-live / .main-sim */
.main {
  display: grid;
  gap: 0;
  height: calc(100vh - 72px);
}

.col { overflow-y: auto; padding: 10px; }
.col-l { border-right: 1px solid var(--bdr); background: var(--bg1); }
.col-c { background: var(--bg0); padding: 10px 12px; display: flex; flex-direction: column; overflow: hidden; }
.col-r { border-left: 1px solid var(--bdr); background: var(--bg1); }
/* Live page: resize handles replace borders */
.main-live .col-l { border-right: none; }
.main-live .col-r { border-left: none; }

/* ============================================================
   LOGO / BRANDING
   ============================================================ */
.logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 800;
  color: var(--t1);
  display: flex; align-items: center; gap: 6px;
}
.logo-icon { font-size: 16px; }

.autopilot-badge {
  padding: 2px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', monospace;
}
.autopilot-badge.on  { background: var(--grn-bg); color: var(--grn); border: 1px solid var(--grn); }
.autopilot-badge.off { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }
.autopilot-badge.eod { background: rgba(210,153,34,0.12); color: var(--yel); border: 1px solid var(--yel); }

/* Trade status bar */
.trade-status { font-size: 9px; font-family: 'JetBrains Mono', monospace; text-align: center; min-height: 14px; margin-bottom: 8px; padding: 2px 0; border-radius: 4px; }
.trade-status.ts-ready { color: var(--grn); }
.trade-status.ts-blocked { color: var(--red); }
.trade-status.ts-warning { color: var(--yel); }
.trade-status.ts-position { color: var(--blu); }

/* ============================================================
   HEADER STATS / PRICES / TABS
   ============================================================ */
.hdr-stats { display: flex; align-items: center; gap: 10px; }
.hdr-stat  { text-align: center; padding: 0 6px; }
.hdr-stat-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; line-height: 1.2;
}
.hdr-stat-l {
  font-size: 7px; color: var(--t2); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600;
}

.hdr-prices { display: flex; align-items: center; gap: 4px; }
.hdr-price {
  padding: 2px 10px; background: var(--bg2); border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
}
.hdr-price-l { font-size: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 400; color: var(--t2); text-transform: uppercase; letter-spacing: 0.5px; }
.hdr-price-v { font-weight: 700; font-size: 12px; }

/* Buy buttons in header price bar */
button.hdr-price { cursor: pointer; border: 1px solid transparent; transition: all 0.15s; }
button.hdr-price:disabled { opacity: 0.35; cursor: not-allowed; }
.hdr-buy-call { border-color: #6EEDB5; background: rgba(63,182,139,0.25); }
.hdr-buy-call .hdr-price-l { color: #6EEDB5; font-weight: 600; }
.hdr-buy-call .hdr-price-v { color: #6EEDB5; }
.hdr-buy-call:hover:not(:disabled) { background: var(--grn); }
.hdr-buy-call:hover:not(:disabled) .hdr-price-l,
.hdr-buy-call:hover:not(:disabled) .hdr-price-v { color: #fff; }
.hdr-buy-put { border-color: #FF8A93; background: rgba(240,97,109,0.25); }
.hdr-buy-put .hdr-price-l { color: #FF8A93; font-weight: 600; }
.hdr-buy-put .hdr-price-v { color: #FF8A93; }
.hdr-buy-put:hover:not(:disabled) { background: var(--red); }
.hdr-buy-put:hover:not(:disabled) .hdr-price-l,
.hdr-buy-put:hover:not(:disabled) .hdr-price-v { color: #fff; }

.limit-cancel-x { cursor:pointer; color:var(--red); font-size:11px; margin-left:4px; padding:0 3px; border-radius:3px; }
.limit-cancel-x:hover { background:var(--red); color:#fff; }

.hdr-actions { display: flex; align-items: center; gap: 4px; }

.hdr-tabs { display: flex; gap: 2px; }
/* Live page overrides tabs to absolute center */
.hdr-tab {
  padding: 2px 14px; border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--bdr); background: transparent; color: var(--t2);
  transition: all 0.15s; margin-bottom: 2px;
}
.hdr-tab:hover { background: var(--bg2); border-color: var(--t2); }
.hdr-tab.active { border-color: var(--blu); color: var(--blu); background: transparent; box-shadow: 0 0 6px rgba(88,166,255,0.15); }

/* ============================================================
   BUTTONS — Timeframe / Indicator / Icon
   ============================================================ */
.tf-btn, .ind-btn {
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
  transition: all 0.15s;
}
.tf-btn:hover, .ind-btn:hover { background: var(--bg3); }
.tf-btn.active { background: var(--t1); color: var(--bg1); border-color: var(--t1); }
.ind-btn.active { border-color: var(--blu); color: var(--blu); background: var(--blu-bg); }

.icon-btn {
  width: 28px; height: 28px; border-radius: 5px;
  border: 1px solid var(--bdr); background: var(--bg2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all 0.15s; color: var(--t2);
}
.icon-btn:hover { background: var(--bg3); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--t2);
  margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Hero card (main P&L) */
.card-hero {
  background: var(--card);
  border: 1px solid var(--blu);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 0 20px rgba(88,166,255,0.05);
}

/* Glassmorphism (1-2 elements max) */
.card-glass {
  background: rgba(11,14,17,0.7);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px;
}

/* ============================================================
   PLAYER CARD
   ============================================================ */
.player-card { position: relative; }
.player-card.selected { border-color: var(--blu); }
.player-name { font-weight: 700; font-size: 15px; }
.player-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 6px; }
.player-stat  { text-align: center; padding: 4px; background: var(--bg2); border-radius: 4px; }
.player-stat-v { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; }
.player-stat-l { font-size: 9px; font-weight: 600; color: var(--t1); text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   PREDICTION / CATBOOST PANEL
   ============================================================ */
.predict-phase { padding: 8px; background: var(--bg2); border-radius: 6px; margin-top: 4px; }
.predict-label { font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.predict-row   { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.predict-side  { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--bg0); margin: 3px 0; }
.predict-pct   { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 800; line-height: 1; }
.predict-signal { font-size: 10px; font-weight: 700; }
.predict-bar   { height: 4px; background: var(--bg0); border-radius: 2px; overflow: hidden; flex: 1; margin: 0 8px; }
.predict-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s; }

/* ============================================================
   TRADE BUTTONS
   ============================================================ */
.trade-btn {
  width: 100%; padding: 10px; border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 800; cursor: pointer;
  border: 2px solid; transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.trade-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.trade-btn-call { background: var(--grn-bg); color: var(--grn); border-color: var(--grn); }
.trade-btn-call:hover:not(:disabled) { background: var(--grn); color: white; }
.trade-btn-put  { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.trade-btn-put:hover:not(:disabled)  { background: var(--red); color: white; }
.trade-btn-sell { background: var(--bg2); color: var(--t2); border-color: var(--bdr); width: 100%; padding: 8px; font-size: 12px; }
.trade-btn-sell:hover:not(:disabled) { background: var(--org); color: white; border-color: var(--org); }
.trade-btn-sub { font-size: 9px; font-weight: 600; opacity: 0.7; }

/* ============================================================
   POSITION BAR
   ============================================================ */
.pos-bar {
  background: rgba(30,41,59,0.15); border: 1px solid rgba(51,65,85,0.25);
  border-radius: 6px; padding: 6px 12px;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.pos-bar.has-pos { border-color: rgba(88,166,255,0.3); background: rgba(88,166,255,0.05); }
.pos-bar.empty   { opacity: 0.4; }
.pos-bar.pending { border-color: var(--yel); animation: pendingPulse 2s ease-in-out infinite; }
@keyframes pendingPulse { 0%,100% { border-color: var(--yel); } 50% { border-color: rgba(210,153,34,0.3); } }
.pos-item   { text-align: center; }
.pos-item-v { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; }
.pos-item-l { font-size: 7px; color: var(--t2); text-transform: uppercase; }
.pos-pnl    { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 800; }

/* ============================================================
   WINDOWS ROW
   ============================================================ */
.win-row { display: flex; gap: 3px; margin-bottom: 4px; }
.win-box {
  flex: 1; padding: 6px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; gap: 4px;
  background: rgba(30,41,59,0.2); border: 1px solid rgba(51,65,85,0.3);
  transition: border-color 0.2s, background 0.2s;
}
.win-box.win-result-win { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.06); color: #3fb68b; }
.win-box.win-result-loss { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); color: #f0616d; }
.win-box.win-result-scratch { border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.06); color: #d29922; }
.win-box.active { border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.06); }
.win-box-n { font-size: 10px; font-weight: 700; white-space: nowrap; }
.win-box-t { font-size: 9px; color: var(--t3); margin-left: 2px; white-space: nowrap; }
.win-box-pnl { font-size: 10px; font-weight: 700; margin-left: auto; }
.win-box-icon { font-size: 9px; margin-left: 4px; }

/* ============================================================
   GAME BOARD
   ============================================================ */
/* Board — compact 4-wide grid */
.board-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.board-sq {
  height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600;
  border: 1px solid transparent; background: var(--bg2);
}
.board-sq.current { border-color: var(--blu); background: var(--blu-bg); box-shadow: 0 0 6px rgba(88,166,255,0.3); }
.board-sq.visited { background: var(--pur-bg); border-color: rgba(163,113,247,0.3); }
.board-sq-n { font-size: 9px; color: var(--t3); }
.board-sq-i { font-size: 11px; }

/* ============================================================
   TRADE MAP / DISCIPLINE BAR
   ============================================================ */
.map-bar {
  height: 14px; background: var(--bg2); border-radius: 7px;
  overflow: hidden; position: relative; margin: 8px 0;
}
.map-bar-zone   { position: absolute; height: 100%; }
.map-bar-marker {
  position: absolute; width: 4px; height: 100%;
  background: white; border-radius: 2px;
  transform: translateX(-2px); box-shadow: 0 0 6px white;
}
.map-targets { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.map-target  { padding: 4px; border-radius: 4px; text-align: center; border: 1px solid; }
.map-target-v { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
.map-target-l { font-size: 7px; text-transform: uppercase; }

/* ============================================================
   DAILY SUMMARY / GRADE
   ============================================================ */
.grade   { font-family: 'JetBrains Mono', monospace; font-size: 42px; font-weight: 800; text-align: center; line-height: 1; }
.grade-a { color: var(--grn); }
.grade-b { color: var(--blu); }
.grade-c { color: var(--yel); }
.grade-d { color: var(--org); }
.grade-f { color: var(--red); }

.summary-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; }
.summary-item   { padding: 4px; background: var(--bg2); border-radius: 4px; text-align: center; }
.summary-item-v { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; }
.summary-item-l { font-size: 7px; color: var(--t2); text-transform: uppercase; }

/* ============================================================
   COACHING LOG
   ============================================================ */
.coach-entry { padding: 4px 0; border-bottom: 1px solid var(--bdr); font-size: 11px; line-height: 1.4; }
.coach-entry:last-child { border-bottom: none; }
.coach-time     { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--t3); }
.coach-entry.critical { color: var(--red); font-weight: 700; }
.coach-entry.warning  { color: var(--org); }
.coach-entry.target   { color: var(--grn); }

/* Sim coaching messages (addCoach uses .coach-msg) */
.coach-msg { padding: 4px 8px; border-bottom: 1px solid var(--bdr); font-size: 12px; }
.coach-msg.critical { color: var(--red); font-weight: 700; }
.coach-msg.warning { color: var(--yel); }
.coach-msg.info { color: var(--t2); }
.coach-msg.success { color: var(--grn); }

/* ============================================================
   PERIOD RESULTS
   ============================================================ */
.period-item { padding: 6px 8px; border-radius: 6px; background: var(--bg2); margin-bottom: 4px; border-left: 3px solid var(--bdr); }
.period-item.win     { border-left-color: var(--grn); }
.period-item.loss    { border-left-color: var(--red); }
.period-item.scratch { border-left-color: var(--yel); }

/* ============================================================
   RULES LIST
   ============================================================ */
.rules-list { font-size: 10px; color: var(--t2); line-height: 1.8; }
.rules-list span { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* ============================================================
   CHART
   ============================================================ */
#chartContainer {
  width: 100%; flex: 1; min-height: 200px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--bdr);
}

.chart-tools {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; padding: 2px 0;
  border-bottom: 1px solid var(--bdr); min-height: 28px;
}
.chart-tools .tb-gear {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg1); border: 1px solid var(--bdr); color: var(--t3);
  font-size: 10px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s, color .15s;
}
.chart-tools .tb-gear:hover { color: var(--t1); border-color: var(--t2); }
.chart-tools .tb-section {
  display: flex; align-items: center; gap: 4px;
  transition: width 0.15s ease, opacity 0.15s ease;
  overflow: hidden;
}
.chart-tools.tb-row-collapsible { width: 100%; }
.chart-tools .tool-btn, .chart-toolbar .tool-btn {
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
  transition: all 0.15s;
}
.chart-tools .tool-btn:hover, .chart-toolbar .tool-btn:hover { background: var(--bg3); }
.chart-tools .tool-btn.active, .chart-toolbar .tool-btn.active {
  border-color: var(--blu); color: #fff; background: var(--blu);
  box-shadow: 0 0 8px rgba(88,166,255,0.4); font-weight: 700;
}
.chart-tools .tool-sep, .chart-toolbar .tool-sep { width: 1px; height: 16px; background: var(--bdr); margin: 0 2px; }
.chart-tools .tool-sep-wide, .chart-toolbar .tool-sep-wide { width: 1px; height: 16px; background: var(--bdr); margin: 0 8px; }

.chart-tools .color-swatch {
  width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
  border: 2px solid var(--bdr); transition: border-color 0.15s;
}
.chart-tools .color-swatch:hover  { border-color: var(--blu); }
.chart-tools .color-swatch.active { border-color: var(--blu); box-shadow: 0 0 4px rgba(88,166,255,0.3); }
/* Candle color pickers — styled wrapper hides native input */
.candle-pick { position: relative; width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); overflow: hidden; transition: border-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.candle-pick:hover { border-color: var(--t3); }
.candle-pick input[type="color"] { position: absolute; top: -4px; left: -4px; width: 30px; height: 30px;
  border: none; padding: 0; cursor: pointer; opacity: 0; }
.candle-pick-fill { position: absolute; inset: 2px; border-radius: 2px; pointer-events: none; }
.candle-pick-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 700; color: rgba(255,255,255,0.7); pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); font-family: 'JetBrains Mono', monospace; }

/* Discipline cards (legacy) */
.disc-card {
  padding: 8px 12px; margin-bottom: 5px;
  background: #1C2128; border: 1px solid #444C56; border-radius: 5px;
}

/* ── Player Modal — 2-col discipline grid ── */
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pm-rc { border: 1px solid var(--bdr); border-radius: 8px; background: var(--bg0); padding: 6px 8px; transition: all .15s; }
.pm-rc.off { border-color: #21262D; opacity: .6; }
.pm-rc.off:hover { opacity: .8; }
.pm-rc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pm-rc-name { font-size: 11px; font-weight: 700; color: var(--t1); }
.pm-rc.off .pm-rc-name { color: var(--t2); }
.pm-rc-body { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pm-sec-hdr { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.pm-sec-dot { width: 6px; height: 6px; border-radius: 50%; }
.pm-acct-btn { flex: 1; padding: 5px 4px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .3px; cursor: pointer; border: 1px solid var(--bdr); background: var(--bg0); color: #58A6FF; font-family: inherit; transition: all .15s; text-align: center; }
.pm-acct-btn.act { border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.15); color: var(--blu); }
.pm-discipline-locked { opacity: .5; pointer-events: none; filter: grayscale(.3); transition: all .2s; }
.pm-strat-muted { opacity: .35; pointer-events: none; filter: grayscale(.5); transition: all .2s; }
.pm-strat-muted .pm-muted-label { display: block; }
.pm-muted-label { display: none; font-size: 9px; color: var(--t3); font-style: italic; text-align: center; padding: 4px 0 2px; }
.pm-bdg { padding: 1px 5px; border-radius: 3px; font-size: 8px; font-weight: 800; letter-spacing: .5px; cursor: pointer; border: 1px solid; font-family: inherit; transition: all .12s; }
.pm-bdg:hover { filter: brightness(1.3); }
.pm-bdg.bdg-hard { background: rgba(240,97,109,.2); color: #F0616D; border-color: rgba(240,97,109,.4); }
.pm-bdg.bdg-soft { background: rgba(210,153,34,.15); color: #D29922; border-color: rgba(210,153,34,.3); }
.pm-bdg.bdg-off { background: rgba(48,54,61,.5); color: var(--t3); border-color: var(--bdr); }
.pm-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#0ea5e9,#2563eb); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0; cursor: pointer; transition: all .2s; overflow: hidden; }
.pm-av-out { display: none; font-size: 8px; letter-spacing: .5px; white-space: nowrap; }
.pm-avatar-logout:hover { width: auto; border-radius: 14px; padding: 0 10px; background: linear-gradient(135deg,#dc2626,#ef4444); }
.pm-avatar-logout:hover .pm-av-init { display: none; }
.pm-avatar-logout:hover .pm-av-out { display: inline; }
.pm-hdr { padding: 12px 14px 10px; }
.pm-body { padding: 6px 14px 8px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bdr) transparent; }
.pm-body::-webkit-scrollbar { width: 4px; }
.pm-body::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }
.pm-ftr { padding: 8px 14px 12px; display: flex; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--bdr); }
.pm-div { height: 1px; background: var(--bdr); }
.pm-bal-box { background: var(--bg0); border: 1px solid var(--bdr); border-radius: 8px; padding: 5px 10px; flex: 1; }
.pm-mode-grp { display: flex; gap: 2px; background: var(--bg0); padding: 2px; border-radius: 8px; border: 1px solid var(--bdr); }
.pm-mode-btn { padding: 6px 10px; border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .5px; cursor: pointer; border: none; background: none; color: var(--t3); transition: all .15s; font-family: inherit; }
.pm-mode-btn:hover { color: var(--t1); }
.pm-mode-btn.act { background: rgba(88,166,255,.15); color: var(--blu); border: 1px solid rgba(88,166,255,.4); }
.pm-risk-row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font-size: 9px; margin-bottom: 2px; }
.pm-risk-lbl { color: var(--t2); letter-spacing: .8px; font-weight: 600; }
.pm-risk-info { color: #E6EDF3; font-family: 'JetBrains Mono', monospace; font-size: 9px; justify-self: center; }
.pm-util-row { display: flex; gap: 3px; align-items: center; padding: 6px 0 2px; }
.pm-util-btn { padding: 3px 6px; background: var(--bg0); color: var(--t2); border: 1px solid var(--bdr); border-radius: 4px; font-size: 9px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .12s; }
.pm-util-btn:hover { border-color: var(--t3); color: var(--t1); }

/* Chart order widget — buy/sell overlay, top-left of chart */
.chart-order-widget {
  position: absolute; top: 8px; left: 8px; z-index: 12;
  display: flex; align-items: center; gap: 4px;
  background: var(--bg1); border: 1px solid var(--bdr);
  border-radius: 6px; padding: 4px;
}
#cowCall.chart-order-widget { border-color: #6EEDB5; left: auto; right: 8px; }
#cowPut.chart-order-widget { border-color: #FF8A93; left: auto; right: 8px; }
#cowMes.chart-order-widget { border-color: var(--cyan); left: auto; right: 65px; }
#cowMesPrice.chart-order-widget { border-color: var(--cyan); }
#cowSpy.chart-order-widget { border-color: var(--info); }
#cowSpyBtns.chart-order-widget { border-color: var(--info); left: auto; right: 8px; }
/* Sell button — orange, same shape as buy buttons */
.hdr-sell { border-color: #FFAA60; background: rgba(240,136,62,0.25); cursor: pointer; border: 1px solid #FFAA60; }
.hdr-sell .hdr-price-l { color: #FFAA60; font-weight: 600; }
.hdr-sell .hdr-price-v { color: #FFAA60; }
.hdr-sell:hover:not(:disabled) { background: var(--org); }
.hdr-sell:hover:not(:disabled) .hdr-price-l,
.hdr-sell:hover:not(:disabled) .hdr-price-v { color: #fff; }
.hdr-sell:disabled { opacity: 0.3; cursor: not-allowed; }
/* MES futures BUY (long) — blue theme */
.hdr-buy-long { border-color: #58A6FF; background: rgba(88,166,255,0.25); cursor: pointer; border: 1px solid #58A6FF; }
.hdr-buy-long .hdr-price-l { color: #58A6FF; font-weight: 600; }
.hdr-buy-long .hdr-price-v { color: #58A6FF; }
.hdr-buy-long:hover:not(:disabled) { background: #58A6FF; }
.hdr-buy-long:hover:not(:disabled) .hdr-price-l,
.hdr-buy-long:hover:not(:disabled) .hdr-price-v { color: #fff; }
.hdr-buy-long:disabled { opacity: 0.3; cursor: not-allowed; }
/* MES futures SELL (short) — orange theme */
.hdr-sell-short { border-color: #FFAA60; background: rgba(240,136,62,0.25); cursor: pointer; border: 1px solid #FFAA60; }
.hdr-sell-short .hdr-price-l { color: #FFAA60; font-weight: 600; }
.hdr-sell-short .hdr-price-v { color: #FFAA60; }
.hdr-sell-short:hover:not(:disabled) { background: var(--org); }
.hdr-sell-short:hover:not(:disabled) .hdr-price-l,
.hdr-sell-short:hover:not(:disabled) .hdr-price-v { color: #fff; }
.hdr-sell-short:disabled { opacity: 0.3; cursor: not-allowed; }
/* SPY quick-trade widget — horizontal row on right of chart: CALL left, SELL mid, PUT right */
.cow-spy-quick { left: auto; right: 8px; flex-direction: row; }
/* Uniform button size inside chart overlay */
.chart-order-widget button.hdr-price { min-width: 72px; text-align: center; }
/* Order status overlay — covers buy/sell buttons with status text */
.cow-status-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg1); border-radius: 5px;
  font: 700 14px 'JetBrains Mono', monospace;
  letter-spacing: 1px; text-transform: uppercase;
}
.cow-status-overlay.placing { color: var(--yel); }
.cow-status-overlay.placing .cow-status-text { animation: cowStatusPulse 0.8s ease-in-out infinite; }
.cow-status-overlay.filled { color: var(--grn); }
.cow-status-overlay.failed { color: var(--red); }
.cow-status-overlay.blocked { color: var(--red); }
.cow-status-overlay.closing { color: var(--org); }
.cow-status-overlay.closing .cow-status-text { animation: cowStatusPulse 0.8s ease-in-out infinite; }
.cow-status-overlay.closed { color: var(--org); }
.cow-status-overlay.handled { color: var(--grn); }
.cow-status-text { display: inline; }
@keyframes cowStatusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Chart zoom overlay — appears on chart hover */
.chart-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chart-zoom-overlay { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0; z-index: 10; opacity: 0; transition: opacity 0.3s ease; }
.chart-zoom-overlay button { width: 32px; height: 32px;
  font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700;
  background: rgba(11,14,17,0.7); color: var(--t3); border: 1px solid var(--bdr);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.15s; }
.chart-zoom-overlay button:first-child { border-radius: 4px 0 0 4px; }
.chart-zoom-overlay button:last-child { border-radius: 0 4px 4px 0; }
.chart-zoom-overlay button:not(:first-child):not(:last-child) { border-radius: 0; border-left: none; border-right: none; }
.chart-zoom-overlay button:hover { color: var(--t1); background: rgba(22,27,34,0.9); }

.chart-drag { width: 100%; height: 6px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.chart-drag-pill { width: 40px; height: 3px; border-radius: 2px; background: var(--bdr); transition: background 0.2s; }
.chart-drag:hover .chart-drag-pill { background: var(--blu); }

/* ============================================================
   DISCIPLINE BARS
   ============================================================ */
.disc-row    { margin-bottom: 4px; }
.disc-header { display: flex; justify-content: space-between; font-size: 9px; }
.disc-bar    { height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden; margin-top: 1px; }
.disc-fill   { height: 100%; border-radius: 2px; }

/* ============================================================
   ALERT BAR
   ============================================================ */
.alert-bar {
  display: none; position: fixed; top: 72px; left: 0; right: 0;
  padding: 8px 20px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; z-index: 200; text-align: center;
}
.alert-bar.critical { display: block; background: rgba(240,97,109,0.95); color: white; animation: apulse .5s infinite; }
.alert-bar.warning  { display: block; background: rgba(240,136,62,0.9); color: white; animation: apulse 1s infinite; }
.alert-bar.target   { display: block; background: rgba(63,182,139,0.9); color: white; }
.alert-bar.caution  { display: block; background: rgba(210,153,34,0.85); color: #000; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 1000;
  justify-content: center; align-items: center;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 10px; padding: 16px; width: 400px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-close { float: right; background: none; border: none; color: var(--t2); font-size: 16px; cursor: pointer; }

/* BJ Bet Modal */
.bj-bet-btn {
  padding: 12px 20px; border-radius: 10px; border: 2px solid; font: 700 15px 'JetBrains Mono', monospace;
  cursor: pointer; min-width: 90px; transition: transform .1s, box-shadow .15s;
}
.bj-bet-btn:hover { transform: scale(1.05); }
.bj-bet-btn:active { transform: scale(0.97); }
.bj-up { background: rgba(76,175,80,.15); color: #4caf50; border-color: rgba(76,175,80,.4); }
.bj-up:hover { box-shadow: 0 0 16px rgba(76,175,80,.3); }
.bj-down { background: rgba(244,67,54,.15); color: #f44336; border-color: rgba(244,67,54,.4); }
.bj-down:hover { box-shadow: 0 0 16px rgba(244,67,54,.3); }
.bj-out { background: rgba(158,158,158,.12); color: #9e9e9e; border-color: rgba(158,158,158,.3); }
.bj-out:hover { box-shadow: 0 0 16px rgba(158,158,158,.2); }

/* Form elements */
.f-lbl { display: block; font-size: 8px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 1px; color: var(--t2); margin-bottom: 2px; }
.f-inp, .f-sel { width: 100%; padding: 4px 6px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px; color: var(--t1); font-size: 11px; outline: none; box-sizing: border-box; }
.f-inp[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.f-grp { margin-bottom: 8px; }
.setup-tab { flex: 1; padding: 8px 0; background: transparent; border: 1px solid #444; color: #999; cursor: pointer; font-size: 13px; font-weight: 600; font-family: 'JetBrains Mono', monospace; border-radius: 4px; transition: all 0.15s; }
.setup-tab.active { background: #1a1a2e; border-color: var(--blu); color: #fff; }
.setup-tab:hover:not(.active) { border-color: var(--t2); }
#strategyPills .strat-pill { padding: 6px 4px; font-family: 'JetBrains Mono', monospace; border: 1px solid var(--bdr); border-radius: 6px; background: var(--bg2); color: var(--t2); cursor: pointer; transition: all .15s; flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
#strategyPills .strat-pill:hover { border-color: var(--t2); }
#strategyPills .strat-pill.active { background: var(--blu); color: #fff; border-color: var(--blu); }
#strategyPills .sp-name { font-size: 9px; font-weight: 700; line-height: 1.2; }
#strategyPills .sp-pct { font-size: 8px; font-weight: 400; opacity: 0.7; line-height: 1.2; }
#strategyPills .sp-all { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.btn   { padding: 6px 12px; border: none; border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; cursor: pointer; }
.btn-p { background: var(--blu); color: white; }

/* ============================================================
   ANNOTATION POPUP
   ============================================================ */
.anno-popup { position: fixed; z-index: 100; background: var(--bg2); border: 2px solid var(--blu); border-radius: 8px; padding: 12px; width: 280px; box-shadow: 0 8px 32px rgba(0,0,0,0.6); display: none; }
.anno-popup.show { display: block; }
.anno-labels  { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.anno-label   { padding: 4px 8px; font-size: 10px; font-family: 'JetBrains Mono', monospace; border-radius: 4px; cursor: pointer; border: 1px solid var(--bg3); color: var(--t2); background: var(--bg0); transition: all 0.15s; }
.anno-label:hover, .anno-label.selected { background: var(--blu); color: var(--bg0); border-color: var(--blu); }
.anno-note    { width: 100%; background: var(--bg0); border: 1px solid var(--bg3); border-radius: 4px; color: var(--t1); padding: 6px; font-size: 11px; font-family: 'JetBrains Mono', monospace; resize: none; height: 40px; }
.anno-btns    { display: flex; gap: 6px; margin-top: 8px; }
.anno-save    { flex: 1; padding: 6px; background: var(--blu); color: var(--bg0); border: none; border-radius: 4px; cursor: pointer; font-weight: 700; font-size: 11px; }
.anno-cancel  { flex: 1; padding: 6px; background: var(--bg0); color: var(--t2); border: 1px solid var(--bg3); border-radius: 4px; cursor: pointer; font-size: 11px; }
.ask-preset   { padding: 4px 8px; font-size: 10px; font-family: 'JetBrains Mono', monospace; border-radius: 4px; cursor: pointer; border: 1px solid var(--bg3); color: var(--t2); background: var(--bg0); transition: all 0.15s; }
.ask-preset:hover, .ask-preset.selected { background: var(--pur); color: var(--bg0); border-color: var(--pur); }

/* ============================================================
   STRATEGY EDITOR
   ============================================================ */
.strat-modal    { width: 520px; max-width: 95vw; max-height: 90vh; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.strat-strip    { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.strat-pill {
  padding: 5px 12px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  border-radius: 16px; cursor: pointer;
  border: 2px solid var(--bdr); background: var(--bg2); color: var(--t2);
  transition: all 0.15s;
}
.strat-pill:hover    { border-color: var(--blu); }
.strat-pill.active   { border-color: var(--grn); background: var(--grn-bg); color: var(--grn); }
.strat-pill.editing  { border-color: var(--blu); background: var(--blu-bg); color: var(--blu); }
.strat-pill-new {
  padding: 5px 10px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  border-radius: 16px; cursor: pointer;
  border: 2px dashed var(--bdr); background: transparent; color: var(--t2);
  transition: all 0.15s;
}
.strat-pill-new:hover { border-color: var(--blu); color: var(--blu); }

.strat-header     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 6px; }
.strat-name-input { font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px; color: var(--t1); padding: 4px 8px; flex: 1; }
.strat-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.strat-section    { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 8px 10px; }
.strat-section-title { font-size: 9px; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 1.5px; color: var(--t2); margin-bottom: 5px; font-weight: 700; }
.strat-row        { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.strat-row:last-child { margin-bottom: 0; }
.strat-lbl        { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--t2); }
.strat-opts       { display: flex; gap: 3px; }
.strat-opt {
  padding: 3px 8px; font-size: 9px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  border-radius: 3px; cursor: pointer;
  border: 1px solid var(--bdr); background: transparent; color: var(--t2);
  transition: all 0.12s;
}
.strat-opt:hover     { border-color: var(--blu); }
.strat-opt.sel       { background: var(--blu); color: white; border-color: var(--blu); }
.strat-opt.sel-grn   { background: var(--grn); color: white; border-color: var(--grn); }
.strat-opt.sel-red   { background: var(--red); color: white; border-color: var(--red); }
.strat-opt.sel-org   { background: var(--org); color: white; border-color: var(--org); }
.strat-toggle {
  padding: 3px 8px; font-size: 9px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  border-radius: 3px; cursor: pointer;
  border: 1px solid var(--bdr); background: transparent; color: var(--t2);
  transition: all 0.12s;
}
.strat-toggle.on { background: var(--grn); color: white; border-color: var(--grn); }
.section-dimmed { opacity: 0.35; pointer-events: none; transition: opacity 0.2s ease; }
.strat-input {
  width: 60px; padding: 3px 6px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg1); border: 1px solid var(--bdr);
  border-radius: 3px; color: var(--t1); text-align: right;
}
.strat-presets    { display: flex; gap: 3px; margin-bottom: 0; flex-wrap: wrap; }
.strat-preset-btn {
  padding: 3px 7px; font-size: 8px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  border-radius: 3px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
  transition: all 0.12s;
}
.strat-preset-btn:hover { border-color: var(--blu); color: var(--blu); }
.strat-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.strat-actions .btn { padding: 6px 16px; font-size: 10px; }
.strat-computed { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--t2); padding: 6px 10px; background: var(--bg2); border-radius: 4px; margin-top: 8px; }
.strat-mode-toggle { display: flex; gap: 3px; margin-bottom: 0; }
.strat-mode-btn {
  flex: 1; padding: 4px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  border-radius: 4px; cursor: pointer;
  border: 2px solid var(--bdr); background: transparent; color: var(--t2);
  transition: all 0.15s;
}
.strat-mode-btn.active-manual { border-color: var(--blu); background: var(--blu-bg); color: var(--blu); }
.strat-mode-btn.active-auto   { border-color: var(--grn); background: var(--grn-bg); color: var(--grn); }
.strat-mode-btn.active-eod    { border-color: #FFAA60; background: rgba(255,170,96,0.12); color: #FFAA60; }
.strat-type-sel { padding: 4px 8px; font-size: 10px; font-family: 'JetBrains Mono', monospace; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px; color: var(--t1); }
.strat-dropdown {
  padding: 5px 8px; font-size: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  border-radius: 4px; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: #E6EDF3;
  outline: none; appearance: auto;
}
.strat-dropdown:hover { border-color: var(--blu); }
.strat-dropdown:focus { border-color: var(--blu); }

/* ============================================================
   BEHAVIOR PANEL
   ============================================================ */
.beh-score-bar  { display: flex; align-items: center; gap: 10px; padding: 2px 0 4px; }
.beh-ring       { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.beh-ring svg   { width: 100%; height: 100%; transform: rotate(-90deg); }
.beh-ring .ring-bg { fill: none; stroke: var(--bg2); stroke-width: 4; }
.beh-ring .ring-fg { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.beh-ring .ring-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; color: var(--t1); }
.beh-components { display: flex; gap: 8px; flex: 1; }
.beh-comp       { text-align: center; }
.beh-comp-label { font-size: 7px; text-transform: uppercase; color: var(--t3); letter-spacing: 0.5px; }
.beh-comp-val   { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; color: var(--t2); }

.beh-session-stats { display: flex; gap: 8px; font-size: 9px; font-family: 'JetBrains Mono', monospace; }
.bss-label { color: var(--t3); margin-right: 2px; }

.beh-sub-tabs { display: flex; gap: 2px; margin: 4px 0; border-bottom: 1px solid var(--bdr); }
.beh-sub-tab  { padding: 4px 8px; font-size: 9px; font-family: 'JetBrains Mono', monospace; font-weight: 600; cursor: pointer; color: var(--t3); border-bottom: 2px solid transparent; transition: all 0.15s; }
.beh-sub-tab.active { color: var(--blu); border-color: var(--blu); }
.beh-sub-pane { display: none; }
.beh-sub-pane.active { display: block; }

/* Rule cards */
.rule-grid      { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.rule-card      { background: var(--bg2); border-radius: 4px; padding: 4px 6px; border: 1px solid var(--bdr); }
.rule-card-top  { display: flex; align-items: center; gap: 3px; }
.rule-card-icon { font-size: 10px; }
.rule-card-name { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 9px; color: var(--t1); }
.rule-card-desc { font-size: 8px; color: var(--t2); margin: 1px 0; }
.rule-toggle    { display: flex; gap: 2px; }
.rule-toggle button {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--bdr); background: transparent; color: var(--t2); cursor: pointer;
}
.rule-toggle button.active-h   { background: var(--grn-bg); color: var(--grn); border-color: var(--grn); }
.rule-toggle button.active-s   { background: var(--org-bg); color: var(--org); border-color: var(--org); }
.rule-toggle button.active-off { background: #555; color: #fff; border-color: #555; }

/* Cooldown */
.cd-timer    { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 800; text-align: center; color: var(--t1); margin: 8px 0 2px; }
.cd-reason   { text-align: center; font-size: 9px; color: var(--t3); margin-bottom: 4px; }
.cd-progress { height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden; }
.cd-progress-bar { height: 100%; background: var(--blu); border-radius: 2px; width: 0%; transition: width 1s linear; }

/* Habits */
.habit-row   { display: flex; gap: 4px; flex-wrap: wrap; }
.habit-card  { flex: 1; min-width: 60px; background: var(--bg2); border-radius: 4px; padding: 6px; text-align: center; border: 1px solid var(--bdr); }
.habit-icon  { font-size: 14px; }
.habit-name  { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 600; color: var(--t2); margin: 2px 0; }
.habit-count { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 800; color: var(--t1); }
.habit-pnl   { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; }

/* Costs */
.cost-hero        { text-align: center; margin: 4px 0; }
.cost-hero-label  { font-size: 8px; text-transform: uppercase; color: var(--t3); letter-spacing: 1px; }
.cost-hero-amount { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; color: var(--red); }
.cost-breakdown   { display: grid; gap: 2px; margin: 4px 0; }
.cost-item        { display: flex; justify-content: space-between; padding: 3px 6px; background: var(--bg2); border-radius: 3px; font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.cost-item-name   { color: var(--t2); }
.cost-item-val    { color: var(--red); font-weight: 700; }
.cost-chart       { display: flex; align-items: flex-end; gap: 2px; height: 48px; margin-top: 4px; }
.cost-bar         { flex: 1; background: var(--red); border-radius: 2px 2px 0 0; min-height: 2px; opacity: 0.7; }

/* Profile tab */
.prof-section     { margin-bottom: 8px; }
.prof-label       { font-size: 8px; text-transform: uppercase; color: var(--t3); letter-spacing: 0.5px; margin-bottom: 3px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.prof-insight     { padding: 6px 8px; border-radius: 4px; font-size: 10px; color: var(--t1); margin-bottom: 6px; border-left: 3px solid var(--blu); background: var(--bg2); }
.prof-insight.warning { border-left-color: var(--yel); }
.prof-insight.positive { border-left-color: var(--grn); }
.prof-insight.nudge { border-left-color: var(--t3); }
.prof-sparkline   { display: flex; align-items: flex-end; gap: 1px; height: 28px; }
.prof-spark-bar   { flex: 1; border-radius: 1px 1px 0 0; min-height: 2px; transition: height 0.3s; }
.prof-pattern     { display: flex; align-items: center; gap: 6px; padding: 3px 6px; background: var(--bg2); border-radius: 3px; margin-bottom: 2px; font-size: 10px; font-family: 'JetBrains Mono', monospace; }
.prof-pat-name    { flex: 1; color: var(--t2); font-weight: 600; }
.prof-pat-count   { color: var(--t3); min-width: 30px; text-align: right; }
.prof-pat-pnl     { font-weight: 700; min-width: 50px; text-align: right; }
.prof-edge-row    { display: flex; gap: 4px; flex-wrap: wrap; }
.prof-edge-tag    { padding: 2px 6px; border-radius: 3px; font-size: 9px; font-family: 'JetBrains Mono', monospace; font-weight: 700; border: 1px solid var(--bdr); background: var(--bg2); }
.prof-edge-tag.best { color: var(--grn); border-color: var(--grn); }
.prof-edge-tag.worst { color: var(--red); border-color: var(--red); }
.prof-edge-tag.neutral { color: var(--blu); border-color: var(--blu); }
.prof-footer      { font-size: 9px; color: var(--t3); text-align: center; padding: 4px 0; }
.prof-footer .prog-bar { height: 3px; background: var(--bg2); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.prof-footer .prog-fill { height: 100%; background: var(--blu); border-radius: 2px; }
.state-bar-row    { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; }
.state-bar-label  { width: 50px; text-transform: uppercase; font-weight: 700; color: var(--t2); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.state-bar-track  { flex: 1; height: 12px; background: var(--bg2); border-radius: 2px; display: flex; overflow: hidden; }
.state-bar-win    { height: 100%; background: var(--grn); }
.state-bar-loss   { height: 100%; background: var(--red); }
.state-bar-scratch { height: 100%; background: var(--t3); opacity: 0.4; }
.state-bar-meta   { min-width: 60px; text-align: right; color: var(--t3); font-size: 8px; }
.prof-insights-list { list-style: none; padding: 0; margin: 0; }
.prof-insights-list li { font-size: 9px; color: var(--t2); padding: 2px 0; padding-left: 10px; position: relative; }
.prof-insights-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--t3); }
.prof-insights-list li.warning::before { background: var(--yel); }
.prof-insights-list li.positive::before { background: var(--grn); }

/* ============================================================
   FAKEOUT SIGNAL
   ============================================================ */
.fk-card .fk-hdr { display: flex; align-items: center; gap: 6px; }
.fk-badge {
  padding: 2px 6px; border-radius: 3px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
}
.fk-badge.strong   { background: var(--grn-bg); color: var(--grn); border: 1px solid var(--grn); }
.fk-badge.moderate { background: var(--org-bg); color: var(--org); border: 1px solid var(--org); }
.fk-badge.weak, .fk-badge.pre_fmc, .fk-badge.pre_signal, .fk-badge.none { background: var(--bg2); color: var(--t3); border: 1px solid var(--bdr); }
.fk-top  { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.fk-dir  { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 800; }
.fk-dir.call { color: var(--grn); }
.fk-dir.put  { color: var(--red); }
.fk-dir.wait { color: var(--t3); }
.fk-prob     { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; }
.fk-prob.hi  { color: var(--grn); }
.fk-prob.md  { color: var(--org); }
.fk-prob.lo  { color: var(--t3); }
.fk-bars     { display: flex; gap: 4px; }
.fk-bar      { flex: 1; padding: 3px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--t1); background: var(--bg2); }
.fk-bar.stalling { border: 1px solid var(--org); }
.fk-anti     { padding: 2px 6px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; display: none; }
.fk-anti.call { background: var(--grn-bg); color: var(--grn); }
.fk-anti.put  { background: var(--red-bg); color: var(--red); }
.fk-reason   { font-size: 9px; color: var(--t3); margin-top: 3px; }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
.skeleton-line { height: 12px; margin-bottom: 6px; }
.skeleton-box  { height: 40px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes apulse { 0%,100% { opacity:1; } 50% { opacity:0.7; } }
@keyframes zonePulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Price flash — apply via JS: element.classList.add('flash-up'/'flash-dn') */
@keyframes flashUp { 0% { background: rgba(63,182,139,0.3); } 100% { background: transparent; } }
@keyframes flashDn { 0% { background: rgba(240,97,109,0.3); } 100% { background: transparent; } }
.flash-up { animation: flashUp 1s ease-out; }
.flash-dn { animation: flashDn 1s ease-out; }

/* Board advance spring */
@keyframes boardAdvance {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.board-advance { animation: boardAdvance 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Panel toggle */
.panel-toggle {
  transition: max-height 200ms ease-out, opacity 200ms ease-out;
  overflow: hidden;
}

/* Hover card glow */
.card:hover { box-shadow: 0 0 12px rgba(88,166,255,0.06); transition: box-shadow 150ms ease; }

/* Zone active pulse */
.zone-active { animation: zonePulse 1.5s ease-in-out infinite; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-grn { color: var(--grn); }
.text-red { color: var(--red); }
.text-yel { color: var(--yel); }
.text-blu { color: var(--blu); }
.text-pur { color: var(--pur); }
.text-org { color: var(--org); }
.text-t1  { color: var(--t1); }
.text-t2  { color: var(--t2); }
.text-t3  { color: var(--t3); }

.bg-grn { background: var(--grn-bg); }
.bg-red { background: var(--red-bg); }
.bg-blu { background: var(--blu-bg); }

.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-4   { gap: 4px; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.hidden  { display: none !important; }
.w-full  { width: 100%; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.p-8   { padding: 8px; }
.p-10  { padding: 10px; }
.p-12  { padding: 12px; }

/* ===== STATE GATE MODAL ===== */
.state-gate-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
}
.state-gate-modal.active { display: flex; }
.sg-box {
  background: var(--bg2); border: 1px solid var(--bdr);
  border-radius: 12px; padding: 20px; width: 320px;
  animation: sgSlideUp 0.2s ease-out;
}
@keyframes sgSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sg-title {
  font-size: 13px; color: var(--t2); text-align: center;
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px;
}
.sg-chips {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.sg-chip {
  padding: 10px 0; border-radius: 8px; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  cursor: pointer; border: 2px solid var(--bdr);
  background: var(--bg1); color: var(--t2);
  transition: all 0.15s;
}
.sg-chip:hover { border-color: var(--t2); }
.sg-chip.selected { color: #fff; }
.sg-chip[data-state="calm"].selected    { border-color: var(--grn); background: rgba(63,182,139,0.2); color: var(--grn); }
.sg-chip[data-state="focused"].selected { border-color: var(--blu); background: rgba(88,166,255,0.2); color: var(--blu); }
.sg-chip[data-state="bored"].selected   { border-color: var(--yel); background: rgba(210,153,34,0.2); color: var(--yel); }
.sg-chip[data-state="anxious"].selected { border-color: var(--org); background: rgba(240,136,62,0.2); color: var(--org); }
.sg-chip[data-state="fomo"].selected    { border-color: var(--red); background: rgba(240,97,109,0.2); color: var(--red); }
.sg-chip[data-state="revenge"].selected { border-color: var(--pur); background: rgba(163,113,247,0.2); color: var(--pur); }
/* Journal chip selectors */
.jnl-chip-group { margin-bottom: 10px; }
.jnl-chip-group > label { display: block; color: var(--t2); font-size: 11px; font-weight: 600; margin-bottom: 5px; }
.jnl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jnl-chip {
  padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--bdr); background: var(--bg1); color: var(--t2);
  transition: all 0.15s; user-select: none;
}
.jnl-chip:hover { border-color: var(--t2); }
.jnl-chip.selected { border-color: var(--blu); background: rgba(88,166,255,0.15); color: var(--blu); }
.jnl-notes {
  width: 100%; box-sizing: border-box; background: var(--bg1); border: 1px solid var(--bdr);
  border-radius: 6px; color: var(--t1); padding: 6px 8px; font: 12px Inter,sans-serif;
  margin-top: 8px;
}
.jnl-notes::placeholder { color: var(--t3); }

.sg-confirm {
  width: 100%; padding: 12px; border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  color: #fff; opacity: 0.3; pointer-events: none;
  transition: opacity 0.15s;
}
.sg-confirm.ready { opacity: 1; pointer-events: auto; }
.sg-confirm.call { background: var(--grn); }
.sg-confirm.put  { background: var(--red); }
.sg-cancel {
  width: 100%; padding: 8px; margin-top: 8px; border: none;
  border-radius: 6px; background: transparent; color: var(--t3);
  font-size: 12px; cursor: pointer;
}
.sg-cancel:hover { color: var(--t1); }

/* ===== "IT'S HANDLED" FLASH ===== */
.handled-flash {
  animation: handledPop 0.3s ease-out;
}
@keyframes handledPop {
  0%   { opacity: 0; transform: scale(0.8); }
  50%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===== STATE CORRELATION TABLE ===== */
.state-table { width: 100%; font-size: 11px; }
.state-table th {
  text-align: left; color: var(--t3); font-weight: 500;
  padding: 4px 6px; border-bottom: 1px solid var(--bdr);
}
.state-table td { padding: 5px 6px; }
.state-table .state-label {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.state-dot-calm    { background: var(--grn); }
.state-dot-focused { background: var(--blu); }
.state-dot-bored   { background: var(--yel); }
.state-dot-anxious { background: var(--org); }
.state-dot-fomo    { background: var(--red); }
.state-dot-revenge { background: var(--pur); }

/* ===== PRE-MARKET SIGNAL CARD ===== */
.pm-signal-card .pm-direction { font-size: 18px; font-weight: 700; text-align: center; letter-spacing: 1px; }
.pm-signal-card .pm-direction.call { color: var(--grn); }
.pm-signal-card .pm-direction.put { color: var(--red); }
.pm-signal-card .pm-pct { font-size: 24px; font-weight: 700; font-family: 'JetBrains Mono', monospace; text-align: center; }
.pm-signal-card .pm-conf { font-size: 9px; font-weight: 600; font-family: 'JetBrains Mono', monospace; text-align: center; margin-top: 4px; padding: 2px 8px; border-radius: 4px; }
.pm-signal-card .pm-conf.strong { background: var(--grn-bg); color: var(--grn); border: 1px solid var(--grn); }
.pm-signal-card .pm-conf.lean { background: var(--org-bg); color: var(--org); border: 1px solid var(--org); }
.pm-signal-card .pm-conf.low { background: var(--bg2); color: var(--t3); border: 1px solid var(--bdr); }
.pm-signal-card .pm-stale { font-size: 8px; color: var(--yel); text-align: center; margin-top: 2px; }

/* ===== OPTION RACE CARD ===== */
.or-card { padding: 8px 10px; }
.or-leader { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; text-align: center; letter-spacing: 1px; }
.or-leader.call { color: var(--grn); }
.or-leader.put { color: var(--red); }
.or-leader.tied { color: var(--t3); }
.or-margin-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.or-margin { font-size: 14px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--t1); }
.or-conf { padding: 1px 7px; border-radius: 4px; font-size: 9px; font-weight: 600; font-family: 'JetBrains Mono', monospace; background: var(--card); border: 1px solid var(--bdr); color: var(--t2); }
.or-conf.HIGH { border-color: var(--grn); color: var(--grn); }
.or-conf.MEDIUM { border-color: var(--blu); color: var(--blu); }
.or-conf.LOW { border-color: var(--t3); color: var(--t3); }
.or-bar-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.or-bar-label { font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; width: 32px; text-align: right; }
.or-bar-label.call { color: var(--grn); }
.or-bar-label.put { color: var(--red); }
.or-bar-track { flex: 1; height: 10px; background: var(--bg1); border-radius: 5px; overflow: hidden; position: relative; }
.or-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }
.or-bar-fill.call { background: var(--grn); }
.or-bar-fill.put { background: var(--red); }
.or-bar-pct { font-size: 10px; font-family: 'JetBrains Mono', monospace; color: var(--t1); width: 36px; }
.or-bar-pull { font-size: 10px; font-family: 'JetBrains Mono', monospace; width: 52px; text-align: right; }
.or-bar-pull.call { color: var(--grn); }
.or-bar-pull.put { color: var(--red); }
.or-peaks { display: flex; justify-content: space-between; font-size: 8px; color: var(--t3); font-family: 'JetBrains Mono', monospace; margin-top: 6px; }
.or-msg { text-align: center; font-size: 11px; color: var(--t3); padding: 12px 0; }
.or-seq-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.or-seq-label { font-size: 9px; font-weight: 700; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 1.5px; color: var(--t2); }
.or-strike { font-size: 14px; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--t2); }
.or-seq { font-size: 14px; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.or-seq.call { color: var(--grn); }
.or-seq.put { color: var(--red); }

/* ============================================================
   ZONE HUNTER CARD
   ============================================================ */
.zh-card { padding: 8px 10px; }
.zh-msg { text-align: center; font-size: 11px; color: var(--t3); padding: 8px 0; }
.zh-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 6px; cursor: pointer; transition: background 0.15s;
  border: 1px solid transparent; margin: 3px 0;
}
.zh-row:hover { background: var(--bg2); }
.zh-row.zh-active { border-color: var(--bdr); background: rgba(255,255,255,0.03); }
.zh-row.zh-active.call { border-color: rgba(63,182,139,0.35); background: rgba(63,182,139,0.08); }
.zh-row.zh-active.put { border-color: rgba(240,97,109,0.35); background: rgba(240,97,109,0.08); }
.zh-side {
  font-size: 12px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  width: 36px; text-align: center;
}
.zh-row.call .zh-side { color: var(--grn); }
.zh-row.put .zh-side { color: var(--red); }
.zh-zone {
  font-size: 14px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  color: var(--t1); min-width: 40px; text-align: center;
}
.zh-zone.zh-outside { color: var(--t2); }
.zh-price {
  font-size: 14px; font-weight: 600; font-family: 'JetBrains Mono', monospace;
  color: var(--t1); margin-left: auto;
}
@keyframes zhFlash { 0% { background: rgba(88,166,255,0.15); } 100% { background: transparent; } }
.zh-flash { animation: zhFlash 0.6s ease-out; }
.zh-targets { display: flex; gap: 2px; margin-left: 4px; }
.zh-target {
  font-size: 8px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  padding: 1px 4px; border-radius: 3px; background: rgba(88,166,255,0.12);
  color: var(--blu); border: 1px solid rgba(88,166,255,0.25);
}

/* ============================================================
   COLLAPSIBLE DASHBOARD LAYOUT (live page only)
   ============================================================ */

/* --- Mode Indicator Bar --- */
.mode-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: rgba(13,17,23,0.6); border-bottom: 1px solid rgba(48,54,61,0.3);
  height: 24px; flex-shrink: 0;
}
.mode-bar-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--t3); background: none; border: none;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.mode-bar-btn.active { color: var(--blu); background: rgba(88,166,255,.1); }
.mode-bar-btn:hover { color: var(--t2); }
.mode-bar-arrow { font-size: 10px; }
.mode-bar-kbd {
  margin-left: 4px; padding: 0 4px; border-radius: 3px;
  background: rgba(48,54,61,.6); color: var(--t3);
  border: 1px solid rgba(48,54,61,.3); font-size: 7px;
  font-family: inherit;
}
.mode-bar-presets { display: flex; gap: 4px; }
.mode-bar-preset {
  padding: 2px 8px; border-radius: 4px;
  font-size: 8px; font-weight: 700; letter-spacing: .5px;
  color: var(--t3); background: none;
  border: 1px solid rgba(48,54,61,.3);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.mode-bar-preset.active {
  background: rgba(88,166,255,.15); color: var(--blu);
  border-color: rgba(88,166,255,.3);
}
.mode-bar-preset:hover { color: var(--t2); }

/* --- Dashboard Body (flexbox replaces CSS grid for live) --- */
.dash-body {
  display: flex; flex: 1; min-height: 0;
  overflow: hidden;
  margin-top: 2px;
}
.dash-left, .dash-right { display: flex; flex-shrink: 0; }
.dash-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden; padding: 10px 12px;
  background: var(--bg0);
}

/* --- Full Panels --- */
.dash-panel { overflow-y: auto; padding: 10px; }
.dash-panel-l { width: 256px; border-right: 1px solid rgba(48,54,61,.5); background: #0a0e17; }
.dash-panel-r { width: 280px; border-left: 1px solid rgba(48,54,61,.5); background: #0a0e17; }

/* --- Collapsed Strips --- */
.dash-strip {
  width: 24px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 12px;
  cursor: pointer; transition: background .15s;
  background: #0a0e17;
}
.dash-strip:hover { background: rgba(30,38,50,.5); }
.dash-strip-l { border-right: 1px solid rgba(48,54,61,.4); }
.dash-strip-r { border-left: 1px solid rgba(48,54,61,.4); }
.strip-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.strip-val { font-size: 7px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--t2); }
.strip-label { font-size: 6px; color: var(--t3); letter-spacing: .5px; }
.strip-sep { width: 12px; height: 1px; background: rgba(48,54,61,.4); }
.strip-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(48,54,61,.6); }
.strip-grn { color: var(--grn); }
.strip-red { color: var(--red); }
.strip-dim { color: var(--t3); }
.strip-ring {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(48,54,61,.4);
  display: flex; align-items: center; justify-content: center;
}
.strip-ring-text { font-size: 8px; font-weight: 800; color: var(--t2); }
.strip-badge {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(88,166,255,.15); border: 1px solid rgba(88,166,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 700; color: var(--blu);
}
.strip-expand { margin-top: auto; color: var(--t3); font-size: 10px; opacity: 0; transition: opacity .15s; }
.dash-strip:hover .strip-expand { opacity: 1; }
.strip-mt-auto { margin-top: auto; }
.strip-arrow { width: 14px; height: 14px; }

/* --- Card Toggle System --- */
.card-toggle-gear {
  position: absolute; top: 4px; z-index: 10;
  background: var(--bg1); border: 1px solid var(--bdr); color: var(--t3);
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s;
}
.dash-left:hover .card-toggle-gear,
.dash-right:hover .card-toggle-gear { opacity: 0.6; }
.card-toggle-gear:hover { opacity: 1 !important; color: var(--t1); border-color: var(--t2); }
.card-toggle-gear-l { right: 12px; }
.card-toggle-gear-r { right: 12px; }
.dash-left, .dash-right { position: relative; }
.card-toggle-pop {
  position: absolute; right: 4px; top: 0; z-index: 100;
  background: var(--bg2); border: 1px solid var(--bdr2);
  border-radius: 8px; padding: 8px 0; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.card-toggle-hdr {
  padding: 4px 12px 6px; font-size: 9px; font-weight: 700;
  color: var(--t3); letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.card-toggle-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  color: var(--blu); font-weight: 600;
}
.card-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px; cursor: pointer; transition: background .1s;
}
.card-toggle-row:hover { background: rgba(88,166,255,.06); }
.card-toggle-name { font-size: 11px; color: var(--t1); }
.card-sw {
  font-size: 9px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(240,97,109,.15); color: var(--red);
}
.card-sw.on { background: rgba(63,182,139,.15); color: var(--grn); }
.card-toggle-reset {
  margin-top: 4px; padding: 6px 12px; font-size: 10px;
  color: var(--t3); text-align: center; cursor: pointer;
  border-top: 1px solid var(--bdr);
  transition: color .15s;
}
.card-toggle-reset:hover { color: var(--blu); }

/* Card drag-and-drop reorder */
.drag-grip { cursor: grab; color: var(--t4); font-size: 14px; margin-right: 6px; user-select: none; line-height: 1; padding: 0 2px; flex-shrink: 0; display: none; }
.drag-grip:hover { color: var(--t2); }
.dash-panel-l.reorder-on .drag-grip, .dash-panel-r.reorder-on .drag-grip { display: inline; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }
.drag-ghost { position: fixed; z-index: 9999; opacity: 0.85; pointer-events: none; border: 1px solid var(--blu); border-radius: 8px; background: var(--card); box-shadow: 0 8px 32px rgba(0,0,0,.4); transform: rotate(1deg); overflow: hidden; padding: 10px; }
.drag-placeholder { border: 2px dashed var(--blu); border-radius: 8px; margin-bottom: 8px; opacity: 0.3; background: rgba(88,166,255,.03); }

/* ============================================================
   SCORE BUG — Top bar P&L / Position / Max Loss / Window / Clock
   (promoted from inline styles — used by both live and sim)
   ============================================================ */
.score-bug {
  display: flex; align-items: center; gap: 16px;
}
.score-bug-pnl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 800;
}
.score-bug-item {
  text-align: center;
}
.score-bug-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
}
.score-bug-l {
  font-size: 9px; color: var(--t2); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 500;
}

/* Max loss gauge */
.max-loss-gauge {
  width: 120px; height: 16px;
  background: var(--bg3); border-radius: 4px;
  overflow: hidden; position: relative;
}
.max-loss-fill {
  height: 100%; border-radius: 4px;
  background: var(--grn);
  transition: width 300ms ease, background 300ms ease;
  min-width: 2px;
}
.max-loss-label {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600; color: var(--t1);
  pointer-events: none; z-index: 1;
}
.max-loss-ticks {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  pointer-events: none;
}
.max-loss-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.15);
}

/* Account selector */
.acct-sel {
  padding: 2px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  background: var(--bg2); border: 1px solid var(--bdr);
  color: var(--t1); cursor: pointer;
}

/* ============================================================
   REPLAY CONTROLS — Sim playback bar (sim-only, in shared CSS)
   ============================================================ */
.replay-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  background: var(--bg1); border-top: 1px solid var(--bdr);
}
.replay-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--bdr); background: var(--bg2);
  color: var(--t1); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.replay-btn:hover { background: var(--bg3); }
.replay-btn.active { background: var(--grn); color: white; border-color: var(--grn); }
.replay-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.speed-btn {
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
  transition: all 0.15s;
}
.speed-btn.active { background: var(--t1); color: var(--bg1); border-color: var(--t1); }

.replay-progress { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.replay-progress-fill { height: 100%; background: var(--blu); border-radius: 2px; width: 0%; transition: width 0.5s linear; }

/* ============================================================
   SIM-SPECIFIC COMPONENTS
   ============================================================ */
/* Campaign setup modal */
.setup-modal { width: 500px; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }

/* Day summary / debrief modal */
.debrief-modal { width: 440px; }
.summary-cell { background: var(--bg2); border: 1px solid var(--bdr); border-radius: 6px; padding: 10px; text-align: center; }
.summary-cell-v { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; }
.summary-cell-l { font-size: 9px; color: var(--t3); text-transform: uppercase; margin-top: 2px; }

/* Sim position badge */
.sim-pos-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--bdr); background: var(--bg2);
}
.sim-pos-badge.call { border-color: var(--grn); background: var(--grn-bg); color: var(--grn); }
.sim-pos-badge.put  { border-color: var(--red); background: var(--red-bg); color: var(--red); }

/* Admin player cards */
.admin-players { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-player-pill {
  padding: 3px 8px; border-radius: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
  cursor: pointer;
}
.admin-player-pill.active { border-color: var(--blu); color: var(--blu); }

/* Mode toggle (sim) */
.mode-toggle {
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--bdr); background: var(--bg2); color: var(--t2);
}
.mode-toggle:hover { background: var(--bg3); }

/* Sim header prices */
.sim-prices { display: flex; gap: 12px; align-items: center; font-size: 11px; }
.sim-prices .jm { font-weight: 700; }

/* ============================================================
   MODE BRANDING — Live (blue) vs Sim (purple)
   ============================================================ */

/* Header gradient backgrounds */
.hdr[data-mode="live"] { background: linear-gradient(180deg, #111827 0%, #0d1117 100%); }
.hdr[data-mode="sim"]  { background: linear-gradient(180deg, #15112a 0%, #0d1117 100%); }

/* Mode label badge */
.hdr-mode-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 4px;
}
.hdr[data-mode="live"] .hdr-mode-label {
  color: var(--red); border: 1.5px solid var(--red); background: var(--red-bg);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.hdr[data-mode="live"] .hdr-mode-label.health-ok {
  color: var(--red); border-color: var(--red); background: var(--red-bg);
}
.hdr[data-mode="live"] .hdr-mode-label.health-fail {
  color: var(--red); border-color: var(--red); background: var(--red-bg);
}
.hdr[data-mode="sim"] .hdr-mode-label {
  color: var(--grn); border: 1.5px solid var(--grn); background: var(--grn-bg);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.hdr[data-mode="sim"] .hdr-mode-label.health-ok {
  color: var(--grn); border-color: var(--grn); background: var(--grn-bg);
}
.hdr[data-mode="sim"] .hdr-mode-label.health-warn {
  color: var(--yel); border-color: var(--yel); background: rgba(210,153,34,0.12);
}
.hdr[data-mode="sim"] .hdr-mode-label.health-fail {
  color: var(--red); border-color: var(--red); background: var(--red-bg);
}

/* Live mode — ALL header accents red */
.hdr[data-mode="live"] { border-bottom-color: var(--red); }
.hdr[data-mode="live"] .hdr-tab.active {
  border-color: var(--red); color: var(--red);
  box-shadow: 0 0 6px rgba(248,81,73,0.15);
}
.hdr[data-mode="live"] .hdr-tab:hover { border-color: var(--red); }
.hdr[data-mode="live"] #strikeSelect { border-color: var(--red); }
.hdr[data-mode="live"] .mode-bar-preset.active {
  background: rgba(248,81,73,.15); color: var(--red);
  border-color: rgba(248,81,73,.3);
}
.hdr[data-mode="live"] .mode-bar-btn.active {
  color: var(--red); background: rgba(248,81,73,.1);
}

/* Sim mode — ALL header accents green */
.hdr[data-mode="sim"] { border-bottom-color: var(--grn); }
.hdr[data-mode="sim"] .hdr-tab.active {
  border-color: var(--grn); color: var(--grn);
  box-shadow: 0 0 6px rgba(63,185,80,0.15);
}
.hdr[data-mode="sim"] .hdr-tab:hover { border-color: var(--grn); }
.hdr[data-mode="sim"] #strikeSelect { border-color: var(--grn); }
.hdr[data-mode="sim"] .mode-bar-preset.active {
  background: rgba(63,185,80,.15); color: var(--grn);
  border-color: rgba(63,185,80,.3);
}
.hdr[data-mode="sim"] .mode-bar-btn.active {
  color: var(--grn); background: rgba(63,185,80,.1);
}

/* Price axis "+" limit order button — sits at left edge of price column */
.price-axis-plus {
  position: absolute;
  width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px 'JetBrains Mono', monospace;
  color: #ffc107; background: rgba(50,40,0,0.85);
  border: 1px solid #ffc107; border-radius: 3px;
  cursor: pointer; z-index: 20; user-select: none;
  transition: background 0.12s, transform 0.12s;
}
.price-axis-plus:hover {
  background: rgba(80,65,0,0.95);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255,193,7,0.4);
}
.price-axis-cancel {
  position: absolute;
  width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  font: 700 10px 'JetBrains Mono', monospace;
  color: #ff4444; background: rgba(50,10,10,0.85);
  border: 1px solid #ff4444; border-radius: 3px;
  cursor: pointer; z-index: 21; user-select: none;
  transition: background 0.12s, transform 0.12s;
}
.price-axis-cancel:hover {
  background: rgba(80,15,15,0.95);
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255,68,68,0.4);
}
/* Yellow crosshair line across chart at cursor Y */
.price-axis-hline {
  position: absolute; height: 1px; left: 0;
  border-top: 1px dashed #ffc107;
  pointer-events: none; z-index: 19;
}
/* Price label on the crosshair line */
.price-axis-label {
  position: absolute;
  font: 700 10px 'JetBrains Mono', monospace;
  color: #ffc107; background: rgba(50,40,0,0.9);
  padding: 1px 5px; border-radius: 3px;
  pointer-events: none; z-index: 20;
  white-space: nowrap;
}

/* === Toast Notifications === */
.toast-container {
  position: fixed; top: 12px; right: 12px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 260px; max-width: 420px;
  padding: 10px 16px; border-radius: 6px;
  font: 600 12px/1.4 'JetBrains Mono', monospace;
  color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0; transform: translateX(40px);
  animation: toastIn 0.25s ease forwards;
}
.toast.removing {
  animation: toastOut 0.2s ease forwards;
}
.toast-error   { background: #c62828; border-left: 4px solid #ff5252; }
.toast-success { background: #2e7d32; border-left: 4px solid #66bb6a; }
.toast-warning { background: #e65100; border-left: 4px solid #ffa726; }
.toast-info    { background: #1565c0; border-left: 4px solid #42a5f5; }
@keyframes toastIn  { to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }