/* ---------- THEMES ---------- */
:root[data-theme="dark"] {
  --bg: #11151c;
  --panel: #181d27;
  --panel-2: #1f2530;
  --border: #2a313c;
  --text: #d8dee6;
  --text-2: #aab3c0;
  --muted: #8590a0;
  --accent: #7aa9f0;
  --green: #5eb87a;
  --red: #e57373;
  --amber: #d4a857;
  --ce-tint: rgba(122, 169, 240, 0.06);
  --pe-tint: rgba(212, 168, 87, 0.06);
  --row-hover: rgba(255, 255, 255, 0.03);
  --row-atm: rgba(212, 168, 87, 0.16);
  --row-itm: rgba(88, 166, 255, 0.10);
  --shadow: 0 4px 14px rgba(0,0,0,0.35);
}
:root[data-theme="blue"] {
  /* Palette aligned with options-execution-engine's blue theme (and the
     FNO Trader dashboard) — deeper navy background, brighter sky-blue
     accent. Tints reuse the same accent / amber so CE / PE / ATM rows
     pick up the new palette automatically. */
  --bg: #0a1a2f;
  --panel: #102745;
  --panel-2: #163358;
  --border: #274a73;
  --text: #e8f0ff;
  --text-2: #c9d6ea;
  --muted: #a8c5e3;
  --accent: #3da3ff;
  --green: #3ecf8e;
  --red: #ff6e72;
  --amber: #ffcc66;
  --ce-tint: rgba(61, 163, 255, 0.08);
  --pe-tint: rgba(255, 204, 102, 0.07);
  --row-hover: rgba(255, 255, 255, 0.04);
  --row-atm: rgba(255, 204, 102, 0.16);
  --row-itm: rgba(61, 163, 255, 0.12);
  --shadow: 0 4px 14px rgba(0,0,0,0.45);
}
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --border: #c8d0dc;
  --text: #0a1628;            /* near-black with navy tint, high contrast */
  --text-2: #33415a;          /* slate-700, secondary body text on white */
  --muted: #475569;           /* slate-600, readable */
  --accent: #0d3d8a;          /* fnotrader dark blue */
  --accent-2: #1e4fa8;        /* secondary blue */
  --green: #15803d;           /* deeper green for contrast */
  --red: #b91c1c;             /* deeper red for contrast */
  --amber: #92520b;           /* warm tan, high contrast */
  --ce-tint: rgba(13, 61, 138, 0.06);
  --pe-tint: rgba(146, 82, 11, 0.05);
  --row-hover: rgba(13, 61, 138, 0.05);
  --row-atm: rgba(146, 82, 11, 0.14);
  --row-itm: rgba(13, 61, 138, 0.08);
  --shadow: 0 2px 6px rgba(13, 61, 138, 0.10);
  --header-text: #0d3d8a;     /* dark blue headers in light mode */
}
:root[data-theme="dark"]  { --header-text: #d8dee6; --accent-2: #5a8de0; }
:root[data-theme="blue"]  { --header-text: #e8f0ff; --accent-2: #6cb6ff; }

/* Favorites chip-bar runtime height. Default 0 (no favbar rendered).
 * Set in pixels by wireNavFavorites() in app.js whenever the favbar's
 * actual rendered height changes (via ResizeObserver). Every page-content
 * height calc subtracts this so the viewport math stays correct whether
 * or not the favbar is visible (and whether the chips wrap to two lines
 * on a narrow viewport). */
:root { --favbar-h: 0px; }

/* ════════════════════════════════════════════════════════════════
   GLOBAL SCROLLBAR THEME — slim translucent slate thumb on a
   transparent track. Applies to EVERY scrollable element in the
   app: page wrappers (.stocks-wrap, .tape-scroll, .table-scroll,
   .chain-wrap, etc.), modals, dropdowns, hover popups, and any
   future container that ever overflows.

   Width 8px (vs OS default ~16px) keeps the chrome out of the way
   while staying easy to grab. The 2px transparent border inside the
   thumb (background-clip: padding-box) creates the inset effect that
   makes the thumb look even thinner — same look as Investing.com /
   TradingView / most modern dashboards.

   Per-element overrides (e.g. .brh-scroll, .breadth-tbl-scroll,
   .movers-list-wrap) still work — they're more specific so they
   win if any future tuning is needed for a particular surface. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.30) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.55);
  background-clip: padding-box;
}
/* Light theme — darker slate so the thumb stays visible against
   the white background. */
:root[data-theme="light"] * {
  scrollbar-color: rgba(71,85,105,0.30) transparent;
}
:root[data-theme="light"] *::-webkit-scrollbar-thumb {
  background: rgba(71,85,105,0.30);
  background-clip: padding-box;
}
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(71,85,105,0.55);
  background-clip: padding-box;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  font-feature-settings: 'cv11' 1, 'ss01' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; }
.num, .chain td, .chain th, .metric .val, .metric .sub, .stat .val, .cell2 .t, .cell2 .s, .walls li, .modal-charts canvas, .title-right, .sp-item, .sp-btn .lbl {
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  font-variant-numeric: tabular-nums;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  overflow: visible;   /* nav dropdowns must extend below */
  min-height: 44px;
}

/* Instrument context bar — sits below the topbar, above page content.
   Contains symbol search, live price tile, expiry select, basis mode. */
.instr-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 44px; z-index: 28;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: -0.02em; }
.brand .logo-img {
  width: 28px; height: 28px; object-fit: contain;
  border-radius: 6px;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(13,61,138,0.20));
}
.brand .logo-text { display: inline-flex; gap: 1px; font-weight: 700; }
.brand .lt-fno    { color: #1e6fd8; letter-spacing: -0.02em; }
.brand .lt-trader { color: var(--header-text); letter-spacing: -0.02em; }
:root[data-theme="dark"]  .brand .lt-fno,
:root[data-theme="blue"]  .brand .lt-fno { color: #6ba6ec; }

.search-wrap { position: relative; flex: 0 0 280px; }
#search { width: 100%; padding: 7px 10px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; outline: none; }
#search:focus { border-color: var(--accent); }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); max-height: 320px; overflow-y: auto; z-index: 40; }
.search-results.hidden { display: none; }
.search-item { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.search-item:last-child { border-bottom: 0; }
.search-item:hover, .search-item.active { background: var(--panel-2); }
.search-item .nm { font-weight: 600; }
.search-item .ds { color: var(--muted); font-size: 11px; }

.select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font: inherit; outline: none; cursor: pointer; }
.select.sm { padding: 4px 6px; font-size: 12px; }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.seg-btn { background: transparent; color: var(--muted); border: 0; padding: 6px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.seg-btn.active {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}

.refresh { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }

/* ── Right-aligned cluster in the topbar (market status + theme + signout) ── */
.topbar-right {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}

/* Active-broker dropdown in the topbar (admin-only). Sized to match
   the surrounding icon-buttons + checkbox chips so the toolbar reads
   as one row. */
.topbar-broker {
  display: inline-flex; align-items: center;
  height: 32px;
}
/* Page-level Default Template picker — matches the height/look of the
   other topbar pills (broker dropdown, theme cycle button). */
.topbar-tpl-btn {
  display: inline-flex; align-items: center;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-tpl-btn:hover { border-color: var(--accent); }
.topbar-broker .select.sm {
  height: 32px;
  padding: 0 10px;
  min-width: 130px;
  max-width: 220px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
}
.topbar-broker .select.sm:hover { border-color: var(--accent); }
.topbar-broker .select.sm:focus { outline: 1px solid var(--accent); outline-offset: 0; }
/* Cog button hugging the broker dropdown — opens the broker-instrument
   config modal. Reuses .icon-btn base + tighter sizing so it doesn't
   stretch the topbar height. */
.topbar-broker .broker-cog {
  height: 32px; width: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.topbar-broker .broker-cog:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}
.topbar-broker .broker-cog:disabled { opacity: .45; cursor: not-allowed; }

/* Custom active-broker dropdown (logo + Name (Client ID)). Replaces the
   native <select> so each row can show the broker logo. The native select
   stays in the DOM (hidden) as the state source. */
.brk-dd { position: relative; display: inline-flex; }
.brk-dd-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 9px; min-width: 150px; max-width: 230px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 12px; cursor: pointer; text-align: left;
}
.brk-dd-btn:hover:not(:disabled) { border-color: var(--accent); }
.brk-dd-btn:disabled { opacity: .55; cursor: not-allowed; }
.brk-dd-caret { margin-left: auto; color: var(--muted); font-size: 10px; flex: 0 0 auto; }
.brk-dd-logo {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 4px;
  background: #fff; object-fit: contain; padding: 1px; box-sizing: border-box;
}
.brk-dd-logo-ph { background: var(--panel); border: 1px solid var(--border); }
.brk-dd-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brk-dd-name.brk-dd-ph { font-weight: 500; color: var(--muted); }
.brk-dd-cid { color: var(--muted); font-weight: 500; flex: 0 0 auto; }
.brk-dd-tag {
  flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 4px; line-height: 1.4;
}
.brk-dd-tag.demo { color: #f59e0b; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); }
.brk-dd-tag.lead { color: #22d3ee; background: rgba(34, 211, 238, .10); border: 1px solid rgba(34, 211, 238, .35); }

/* BETA tag on the top-level Terminal tab */
.nav-beta {
  font-size: 8.5px; font-weight: 800; letter-spacing: .06em; vertical-align: super;
  color: #f59e0b; background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .35); border-radius: 4px; padding: 0 4px;
  margin-left: 2px;
}

/* Profile popover account links (Brokers / My Subscriptions) */
.profile-nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 7px;
  color: var(--text); text-decoration: none; font-size: 12.5px;
}
.profile-nav-link:hover { background: var(--panel-2); }
.brk-dd-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 1200;
  min-width: 220px; max-width: 320px; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); padding: 4px;
}
.brk-dd-head {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px 4px;
}
.brk-dd-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: none; border-radius: 6px; background: transparent;
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer; text-align: left;
}
.brk-dd-item:hover { background: var(--row-hover, rgba(255,255,255,.06)); }
.brk-dd-item .brk-dd-name { flex: 0 1 auto; }

/* Topbar checkbox-with-label — used for the "Full Day" auto-fit toggle.
   Sized + chromed to sit cleanly alongside the icon-buttons. */
.topbar-cb {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.topbar-cb:hover {
  background: var(--panel);
  color: var(--header-text);
  border-color: var(--accent);
}
.topbar-cb input[type="checkbox"] {
  width: 14px; height: 14px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.topbar-cb span { white-space: nowrap; }
/* When toggled ON, lift the label color so the chip reads as "active". */
.topbar-cb:has(input:checked) {
  color: var(--header-text);
  border-color: var(--accent);
}

/* Compact icon button used for Hover-config / Theme / Help / Signout. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.icon-btn:hover {
  background: var(--panel);
  color: var(--header-text);
  border-color: var(--accent);
}
.icon-btn.icon-btn-danger:hover {
  border-color: #dc2626;
  color: #dc2626;
}

/* QuikTrade — keep its branded yellow-ish look but match icon-button height */
.quiktrade-btn {
  background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%) !important;
  color: #0e131e !important;
  font-weight: 600;
  height: 32px; padding: 0 10px !important;
  display: inline-flex; align-items: center;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12.5px;
}
.quiktrade-btn:hover { filter: brightness(1.06); }

/* Market status: trim to icon-only (just a coloured dot + tooltip).
   Forces red / green / amber based on status — no inherited muted dot. */
.mkt-status.mkt-icon {
  /* Compact inline dot — no surrounding box, just the coloured pulse
     so the topbar reads cleanly. Matches the dot-on-tile style used in
     the price strip on other pages. */
  width: 14px; height: 14px;
  padding: 0; justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
}
.mkt-status.mkt-icon .mkt-label { display: none; }
.mkt-status.mkt-icon .mkt-dot {
  width: 8px; height: 8px;
  background: #94a3b8 !important;          /* default grey while loading */
  box-shadow: 0 0 0 2px rgba(148,163,184,0.20) !important;
  animation: none !important;
}
.mkt-status.mkt-icon.mkt-open .mkt-dot {
  background: #22c55e !important;          /* GREEN — market open */
  box-shadow: 0 0 0 3px rgba(34,197,94,0.30), 0 0 6px rgba(34,197,94,0.55) !important;
  animation: mkt-pulse 1.6s ease-in-out infinite !important;
}
.mkt-status.mkt-icon.mkt-preopen .mkt-dot {
  background: #f59e0b !important;          /* AMBER — pre-open */
  box-shadow: 0 0 0 3px rgba(245,158,11,0.30) !important;
}
.mkt-status.mkt-icon.mkt-closed .mkt-dot {
  background: #ef4444 !important;          /* RED — market closed */
  box-shadow: 0 0 0 3px rgba(239,68,68,0.25) !important;
}
.mkt-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.3px; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; user-select: none;
}
.mkt-status .mkt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: 0 0 8px;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.18);
}
.mkt-status.mkt-open {
  background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); color: #16a34a;
}
.mkt-status.mkt-open .mkt-dot {
  background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.30), 0 0 6px rgba(34,197,94,0.55);
  animation: mkt-pulse 1.6s ease-in-out infinite;
}
.mkt-status.mkt-preopen {
  background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.32); color: #d97706;
}
.mkt-status.mkt-preopen .mkt-dot { background: #f59e0b; box-shadow: 0 0 0 2px rgba(251,191,36,0.30); }
.mkt-status.mkt-closed {
  background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.28); color: #dc2626;
}
.mkt-status.mkt-closed .mkt-dot { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.20); }
:root[data-theme="dark"] .mkt-status.mkt-open { color: #4ade80; }
:root[data-theme="dark"] .mkt-status.mkt-preopen { color: #fbbf24; }
:root[data-theme="dark"] .mkt-status.mkt-closed { color: #f87171; }
@keyframes mkt-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.refresh input { accent-color: var(--accent); }

.btn {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff; border: 0; padding: 7px 14px; border-radius: 7px;
  font: inherit; font-weight: 600; letter-spacing: 0.2px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: filter 0.15s, transform 0.12s, box-shadow 0.15s;
  text-decoration: none;          /* anchors styled as buttons (Help/QuikTrade) shouldn't be underlined */
  display: inline-flex; align-items: center; gap: 4px;
}
.btn:hover, a.btn:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(37,99,235,0.50), inset 0 1px 0 rgba(255,255,255,0.22); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ---------- TABS + NAV GROUPS ---------- */
/* Nav lives inside .topbar — inherits sticky + background from the header.
   Overflow must stay visible so dropdown panels extend below the topbar. */
.tabs {
  display: flex; align-items: stretch; gap: 0;
  padding: 0;
  overflow: visible;
}
.tab {
  padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px;
  border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
  white-space: nowrap; flex-shrink: 0;
  display: flex; align-items: center;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabs-meta { margin-left: auto; color: var(--muted); font-size: 11px; }

/* ── Nav dropdown groups ─────────────────────────────────── */
.nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.nav-group-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  gap: 4px;
  /* Inherits .tab styling */
}
.nav-chev {
  font-size: 9px;
  opacity: 0.55;
  transition: transform 0.15s;
  display: inline-block;
}
.nav-group.open .nav-chev { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 200;
  display: none;
  padding: 4px 0;
}
.nav-group.open .nav-dropdown { display: block; }
.nav-drop-item {
  display: flex;                /* align star to the right */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.nav-drop-item:hover { background: var(--row-hover); color: var(--accent); }
.nav-drop-item.active { color: var(--accent); font-weight: 600; }
/* Separator between dropdown sections */
.nav-drop-sep {
  height: 1px; background: var(--border);
  margin: 4px 0;
}

/* Favorite-star toggle on every dropdown item. Dimmed by default,
   highlights to accent on hover; filled & accent-coloured when the
   item is favourited. Stops nav click propagation. */
.nav-fav-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-size: 14px;
  color: var(--muted);
  opacity: 0.5;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  transition: color 0.1s, opacity 0.1s, background 0.1s;
  /* Force right-alignment regardless of dropdown width. The parent
   * .nav-drop-item is flex with justify-content:space-between, but
   * space-between only spreads items when there's slack — the
   * dropdown is content-sized so without margin-left:auto the star
   * sits flush against the label. !important guards against any
   * future cascade overrides; the dropdown's min-width:200px gives
   * the auto-margin actual room to push the star to the right edge. */
  margin-left: auto !important;
}
.nav-drop-item:hover .nav-fav-star { opacity: 1; }
.nav-fav-star:hover { color: var(--accent); background: rgba(122,162,255,0.12); }
.nav-fav-star.active {
  color: #f59e0b;        /* amber for a starred item */
  opacity: 1;
}

/* ── Favorites chip bar (row under the top nav) ────────────────── */
.nav-favbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  padding: 6px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.nav-favbar[hidden] { display: none; }
.nav-favbar-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.nav-fav-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 12px; font-weight: 500;
  color: var(--text); text-decoration: none;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
.nav-fav-chip:hover { border-color: var(--accent); color: var(--accent); }
.nav-fav-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(122,162,255,0.10); }
.nav-fav-chip-lbl { white-space: nowrap; }
.nav-fav-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: var(--muted); font-size: 14px; line-height: 1;
  cursor: pointer;
}
.nav-fav-chip-x:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.page { display: none; }
.page.active { display: block; }

.page-header {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 88px; z-index: 9;
}
.page-header h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--header-text); letter-spacing: -0.005em; }
.page-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.sm { font-size: 11px; }

/* When the active page's .page-controls is hoisted into the instr-bar
 * slot (see showPage() in app.js + #instr-bar-page-tools below), the
 * remaining .page-header would just be an empty bar with the H2 — hide
 * it to reclaim the ~46px of vertical space. The H2 is redundant with
 * the top-nav active state. Pages whose instr-bar is hidden (dash,
 * rollatm, tvchart, movers) keep their original page-header. */
.page.active.page-collapsed-header > .page-header { display: none; }

/* Slot at the right end of the instr-bar that receives the active
 * page's .page-controls. margin-left:auto pushes it to the right so the
 * symbol/expiry/basis controls stay on the left. nowrap keeps the
 * instr-bar one line tall — if the combined controls exceed the
 * available width, the bar scrolls horizontally rather than growing
 * vertically (which would invalidate every page's height calc). */
.instr-bar-page-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin-left: auto;
  min-width: 0;
}
/* When hoisted into the instr-bar, force nowrap on EVERY child — without
 * this, the inner .indicators block (which is its own flex container)
 * still allowed individual checkboxes to wrap to a second visual row
 * (e.g. SuperTrend below EMA20). Tight gap + per-element nowrap keeps
 * the whole strip on one horizontal line. */
.instr-bar-page-tools .page-controls { gap: 8px; flex-wrap: nowrap; align-items: center; }
.instr-bar-page-tools .page-controls > * { flex-shrink: 0; }
.instr-bar-page-tools label,
.instr-bar-page-tools .indicators,
.instr-bar-page-tools .indicators label,
.instr-bar-page-tools .muted { white-space: nowrap; }
.instr-bar-page-tools .indicators { flex-wrap: nowrap; padding: 3px 6px; gap: 8px; }
/* Tighten select + button padding so the hoisted controls don't tower
 * over the symbol/expiry/basis cluster on the left. */
.instr-bar-page-tools .select { padding: 4px 6px; font-size: 12px; }
.instr-bar-page-tools .seg-btn { padding: 4px 8px; font-size: 12px; }

/* ---------- METRICS ---------- */
.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 88px; z-index: 15;
}
.metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.metric .lbl { color: var(--header-text); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; opacity: 0.85; }
.metric .val { font-weight: 700; font-size: 16px; color: var(--text); letter-spacing: -0.01em; }
.metric .sub { color: var(--muted); font-size: 11px; }

/* Direction-tinted top-bar tiles. Used by Spot / Future (chg-direction)
   and PCR (bullish / bearish band). The whole tile gets a soft tint and
   the .val number adopts the matching colour. */
.metric.tint-pos {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.35);
}
.metric.tint-pos .val { color: var(--green); }
.metric.tint-neg {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
}
.metric.tint-neg .val { color: var(--red); }
.up { color: var(--green); }
.down, .dn { color: var(--red); }

/* ---------- LAYOUT ---------- */
.layout { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.side { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 10px; }
@media (max-width: 1280px) { .side { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px)  { .side { grid-template-columns: 1fr; } }

.chain-wrap { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: visible; }
.chain-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 185px; z-index: 20;
  border-top-left-radius: 10px; border-top-right-radius: 10px;
}
.title { font-weight: 700; font-size: 14px; color: var(--header-text); display: flex; align-items: center; gap: 10px; letter-spacing: -0.005em; }
.muted { color: var(--muted); font-weight: 400; font-size: 12px; }
.title-right { font-size: 11px; }

.table-scroll { overflow: visible; }

.chain { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.chain thead tr.grp th { position: sticky; top: 238px; z-index: 8; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.chain thead tr:not(.grp) th { position: sticky; top: 270px; z-index: 8; background: var(--panel); box-shadow: 0 4px 10px -6px rgba(0,0,0,0.5); }

/* top OI / Volume highlights */
.chain td.top-1 { background: rgba(94, 184, 122, 0.22) !important; box-shadow: inset 3px 0 0 var(--green); position: relative; }
.chain td.top-2 { background: rgba(94, 184, 122, 0.14) !important; box-shadow: inset 2px 0 0 var(--green); position: relative; }
.chain td.top-3 { background: rgba(94, 184, 122, 0.08) !important; }
.chain td.pe-top-1 { background: rgba(229, 115, 115, 0.22) !important; box-shadow: inset -3px 0 0 var(--red); position: relative; }
.chain td.pe-top-2 { background: rgba(229, 115, 115, 0.14) !important; box-shadow: inset -2px 0 0 var(--red); position: relative; }
.chain td.pe-top-3 { background: rgba(229, 115, 115, 0.08) !important; }
.chain td.top-rank::after {
  content: attr(data-rank); position: absolute; top: 1px; right: 4px;
  font-size: 8px; font-weight: 700; opacity: 0.55; letter-spacing: 0.3px;
  font-family: 'Inter', sans-serif;
}

/* chain-stats panel (between chain table and sentiment cards) */
.chain-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.chain-stats .stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px;
}
.chain-stats h4 {
  margin: 0 0 8px; font-size: 11px; color: var(--header-text); text-transform: uppercase;
  letter-spacing: 0.5px; font-weight: 700; display: flex; gap: 8px; align-items: center;
}
.chain-stats h4 .pill { font-size: 9px; padding: 1px 6px; border-radius: 3px; background: var(--panel-2); letter-spacing: 0.5px; }
.chain-stats h4 .ce { color: var(--green); }
.chain-stats h4 .pe { color: var(--red); }
.chain-stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
.chain-stats .item { display: flex; flex-direction: column; gap: 1px; }
.chain-stats .item .lbl { font-size: 10px; color: var(--muted); letter-spacing: 0.3px; }
.chain-stats .item .val { font-size: 13px; font-weight: 600; }
.chain-stats .item .sub { font-size: 10px; opacity: 0.85; }
/* CE/PE Σ Greeks dashboard widget — content sits flush at the TOP, right
   under the widget header (no centring gap). Tight padding keeps the strip
   compact; the widget body padding is zeroed in dashboard-new.css. */
.dn-greeks-sum { padding: 6px; height: 100%; box-sizing: border-box; overflow: auto; align-content: start; gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dn-card-body .dn-greeks-sum { gap: 6px; }
.dn-greeks-sum .stat-card { padding: 7px 11px; min-width: 0; }
/* Header (title + OI pill) may wrap rather than overlap when the card is
   narrow. */
.dn-greeks-sum h4 { margin: 0 0 6px; flex-wrap: wrap; row-gap: 2px; }
.dn-greeks-sum h4 .pill { flex: 0 0 auto; }
.dn-greeks-sum .item { min-width: 0; }
.dn-greeks-sum .item .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-greeks-sum .item .val { font-variant-numeric: tabular-nums; }
/* Responsive metric grid — DEFAULT is a clean 4-col × 2-row block so values
   never crush together. Collapse to a single row of 8 ONLY when the widget
   body is wide enough to give each side card real estate. */
.dn-greeks-sum .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px 10px; }
@container (min-width: 1120px) { .dn-greeks-sum .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* Narrow widget: stack CALLS above PUTS so each gets the full width. */
@container (max-width: 720px) { .dn-greeks-sum { grid-template-columns: 1fr; } }
.chain th {
  /* Unified with .stocks-table thead — same font / padding / weight so
     the two main grids feel like one design system. The group headers
     below (CE / PE / Strike) keep their colour-coded styling. */
  text-align: right; padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--header-text); font-weight: 800;
  white-space: nowrap; font-family: 'Inter', sans-serif; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.chain th.strike { text-align: center; color: var(--amber); }
.chain th.ce-grp {
  text-align: center; padding: 7px;
  font-weight: 700; letter-spacing: 2px; font-size: 11px;
  color: var(--green);
  background: linear-gradient(180deg, rgba(94,184,122,0.20), rgba(94,184,122,0.06));
  border-bottom: 2px solid var(--green);
}
.chain th.pe-grp {
  text-align: center; padding: 7px;
  font-weight: 700; letter-spacing: 2px; font-size: 11px;
  color: var(--red);
  background: linear-gradient(180deg, rgba(229,115,115,0.20), rgba(229,115,115,0.06));
  border-bottom: 2px solid var(--red);
}
.chain th.strike-grp {
  text-align: center; padding: 7px;
  font-weight: 700; letter-spacing: 1.5px; font-size: 11px;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(212,168,87,0.20), rgba(212,168,87,0.06));
  border-bottom: 2px solid var(--amber);
}
.chain td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right; white-space: nowrap;
  /* Match stocks-table: every numeric cell uses tabular-nums so columns
     align cleanly even with mixed digit widths. */
  font-variant-numeric: tabular-nums;
}
.chain td.strike { text-align: center; font-weight: 700; background: var(--panel-2); }
.chain tr:hover td { background: var(--row-hover); }
.chain tr.atm td {
  background: var(--row-atm);
  font-weight: 600;
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  box-shadow: inset 0 0 0 9999px var(--row-atm);
}
.chain tr.atm td.strike {
  background: var(--amber);
  color: #0d1117;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  position: relative;
}
.chain tr.atm td.strike::after {
  content: "ATM";
  position: absolute;
  top: 1px;
  right: 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--amber);
  opacity: 0.95;
  font-family: 'Inter', sans-serif;
}
.chain td.ce-itm, .chain td.pe-itm { background: var(--row-itm); }

/* ---------- STRIKE PICKER ---------- */
.sp { position: relative; display: inline-block; }
.sp-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; min-width: 110px; justify-content: space-between;
}
.sp-btn::after { content: '▾'; font-size: 9px; opacity: 0.6; }
.sp-btn:hover { border-color: var(--accent); }
.sp-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); width: 220px; max-height: 380px;
  display: flex; flex-direction: column; overflow: hidden;
}
.sp-pop.hidden { display: none; }
.sp-input {
  background: var(--panel-2); color: var(--text); border: 0; border-bottom: 1px solid var(--border);
  padding: 8px 10px; font: inherit; font-size: 12px; outline: none;
}
.sp-hint {
  padding: 4px 10px; font-size: 10px; color: var(--muted);
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.sp-list { overflow-y: auto; max-height: 300px; }
.sp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid transparent;
}
.sp-item:hover, .sp-item.active { background: var(--panel-2); }
.sp-item .v { font-weight: 600; }
.sp-item .tag {
  font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px; opacity: 0.9;
}
.sp-item.atm { background: rgba(210, 153, 34, 0.18); }
.sp-item.atm .v { color: var(--amber); }
.sp-item.atm .tag { background: var(--amber); color: #0d1117; }
/* Alt-basis ATM (spot-derived or futures-derived strike when distinct from
   the primary synF-derived ATM). Visually softer than the main ATM — same
   tint but muted, so the user can still see all three candidate ATMs. */
/* Spike% multi-select popover used on the Rolling ATM page. Reuses the
   sp-btn / sp-pop classes from StrikePicker for consistent styling. */
.rollatm-spike-pop-wrap { position: relative; display: inline-block; }
.rollatm-spike-btn { white-space: nowrap; min-width: 80px; }
.rollatm-spike-pop {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 50; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px;
}
.rollatm-spike-pop.hidden { display: none !important; }
.rollatm-spike-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; cursor: pointer; font-size: 12px;
  border-radius: 4px;
}
.rollatm-spike-opt:hover { background: rgba(127,127,127,0.08); }
.sp-item.atm-alt { background: rgba(210, 153, 34, 0.08); }
.sp-item.atm-alt .v { color: rgba(210, 153, 34, 0.85); }
.sp-item.atm-alt .tag {
  background: rgba(210, 153, 34, 0.35); color: #0d1117;
  font-weight: 700;
}
.sp-item.otm1, .sp-item.otm2, .sp-item.otm3 { background: rgba(88, 166, 255, 0.10); }
.sp-item.otm1 .tag { background: rgba(88, 166, 255, 0.30); color: var(--accent); }
.sp-item.otm2 .tag { background: rgba(88, 166, 255, 0.20); color: var(--accent); }
.sp-item.otm3 .tag { background: rgba(88, 166, 255, 0.12); color: var(--accent); }
.sp-item.otm3 { background: rgba(88, 166, 255, 0.05); }
.sp-item.itm1, .sp-item.itm2, .sp-item.itm3 { background: rgba(63, 185, 80, 0.10); }
.sp-item.itm1 .tag { background: rgba(63, 185, 80, 0.30); color: var(--green); }
.sp-item.itm2 .tag { background: rgba(63, 185, 80, 0.20); color: var(--green); }
.sp-item.itm3 .tag { background: rgba(63, 185, 80, 0.12); color: var(--green); }
.sp-item.itm3 { background: rgba(63, 185, 80, 0.05); }
.sp-item.selected { outline: 1px solid var(--accent); outline-offset: -1px; }
.sp-item.hidden { display: none; }

.cell2 { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.15; }
.cell2 .t { font-weight: 600; font-size: 12px; }
.cell2 .s { font-size: 10px; opacity: 0.85; }
.cell2 .vwap-tag { display: block; font-size: 9px; color: var(--muted); font-weight: 400; letter-spacing: 0.2px; margin-top: 1px; }

/* High-Low mini-bar inside LTP cell */
.hl-bar {
  display: flex; align-items: center; gap: 4px;
  margin-top: 3px; min-width: 90px;
  font-size: 8px; color: var(--muted); font-weight: 500; letter-spacing: 0.3px;
}
.hl-bar .hl-l, .hl-bar .hl-h { line-height: 1; opacity: 0.7; }
.hl-bar .hl-track {
  position: relative; flex: 1; height: 4px; border-radius: 2px;
  /* Neutral grey track — no red/green gradient fill (per user
     direction). Position of the price/VWAP markers still tells the
     low→high story without painting the cell. */
  background: var(--border);
}
.hl-bar .hl-mark {
  position: absolute; top: 50%;
}
.hl-bar .hl-vwap {
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--amber);
  box-shadow: 0 0 0 1.5px var(--panel);
}
.hl-bar .hl-price {
  width: 0; height: 0;
  transform: translate(-50%, -100%);
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--text);
  filter: drop-shadow(0 0 1px var(--panel));
  top: 0;
}
.chain tr.atm .hl-bar .hl-price { border-top-color: var(--amber); }


.bu { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; font-family: 'Inter', sans-serif; min-width: 60px; text-align: center; }
.bu-Long { background: rgba(63, 185, 80, 0.18); color: var(--green); }
.bu-Short { background: rgba(248, 81, 73, 0.18); color: var(--red); }
.bu-LongUnwind { background: rgba(248, 81, 73, 0.10); color: var(--red); opacity: 0.85; }
.bu-ShortCover { background: rgba(63, 185, 80, 0.10); color: var(--green); opacity: 0.85; }
.bu-Neutral { background: rgba(125, 133, 144, 0.18); color: var(--muted); }
/* O=H / O=L in option chain */
.bu-OH { background: rgba(248, 81, 73, 0.15); color: var(--red); min-width: 40px; }
.bu-OL { background: rgba(63, 185, 80, 0.15); color: var(--green); min-width: 40px; }

/* ============================================================
   BUYER PAGE — Option Buying Opportunities Dashboard
   ============================================================ */
/* Top picks bar */
.opp-picks {
  display: flex; gap: 16px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.opp-pick-group { flex: 1; min-width: 260px; }
.opp-pick-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border); }
.opp-pick-head.ce { color: var(--accent); }
.opp-pick-head.pe { color: var(--amber); }
.opp-pick-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.opp-pick-strike { font-weight: 700; color: var(--text); min-width: 52px; }
.opp-pick-sigs { display: flex; gap: 4px; flex-wrap: wrap; }
.opp-pick-iv { color: var(--muted); font-size: 11px; }
.opp-pick-empty { color: var(--muted); font-size: 11px; font-style: italic; padding: 6px 0; }

/* Table wrapper */
.opp-table-wrap { overflow-x: auto; overflow-y: auto; flex: 1; }
.opp-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: var(--panel);
}
.opp-table thead tr:first-child th { padding: 6px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px; background: var(--panel-2); }
.opp-table thead tr:first-child .ce-grp { color: var(--accent); text-align: left; }
.opp-table thead tr:first-child .pe-grp { color: var(--amber); text-align: right; }
.opp-table thead tr:first-child .strike-grp { color: var(--muted); text-align: center; }
.opp-table thead tr:nth-child(2) th { padding: 4px 8px; color: var(--muted); font-size: 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border); font-weight: 600; }
.opp-th-score, .opp-th-ohl { text-align: center; }
.opp-th-sigs { text-align: left; }
.opp-th-strike { text-align: center; min-width: 70px; }
.opp-th-iv { text-align: center; min-width: 80px; }
.opp-th-oichg { text-align: center; min-width: 60px; }

/* Row styles */
.opp-row { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.opp-row:hover { background: var(--row-hover); }
.opp-atm-row { background: var(--row-atm); }
.opp-row-ok-ce { background: rgba(63, 185, 80, 0.04); }
.opp-row-hi-ce { background: rgba(63, 185, 80, 0.10); }
.opp-row-ok-pe { background: rgba(248, 81, 73, 0.04); }
.opp-row-hi-pe { background: rgba(248, 81, 73, 0.10); }

/* Cells */
.opp-td-score { text-align: center; padding: 5px 6px; white-space: nowrap; }
.opp-td-ohl { text-align: center; padding: 5px 6px; }
.opp-td-iv { text-align: center; padding: 5px 6px; white-space: nowrap; }
.opp-td-oichg { text-align: center; padding: 5px 6px; white-space: nowrap; font-size: 11px; }
.opp-td-sigs { padding: 5px 8px; }
.opp-td-strike { text-align: center; padding: 5px 10px; font-weight: 700;
  background: var(--panel-2); white-space: nowrap; }
.opp-atm-strike { color: var(--amber) !important; }
/* OI change inline badge */
.opp-oichg { display: inline-block; font-size: 10px; font-weight: 600; }
.opp-oichg.up { color: var(--green); }
.opp-oichg.dn { color: var(--red); }
/* TF label in top picks */
.opp-pick-tf { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 4px; }

/* Score dots */
.opp-score { display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; padding: 2px 4px; border-radius: 4px; }
.score-hi   { color: var(--green); background: rgba(63, 185, 80, 0.18); }
.score-med  { color: var(--green); background: rgba(63, 185, 80, 0.10); opacity: 0.9; }
.score-lo   { color: var(--muted); }
.score-neg  { color: var(--red); opacity: 0.7; }
.score-neg-hi { color: var(--red); background: rgba(248, 81, 73, 0.15); }

/* IV trend badges */
.opp-iv { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 5px;
  border-radius: 4px; white-space: nowrap; }
.iv-fall { color: var(--green); background: rgba(63, 185, 80, 0.12); }
.iv-rise { color: var(--red); background: rgba(248, 81, 73, 0.12); }
.iv-flat { color: var(--muted); }

/* O=H/L in opportunity table */
.opp-ohl { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 5px;
  border-radius: 4px; letter-spacing: 0.3px; }
.ohl-h { background: rgba(248, 81, 73, 0.15); color: var(--red); }
.ohl-l { background: rgba(63, 185, 80, 0.15); color: var(--green); }
.ohl-n { color: var(--muted); }

/* Signal badges */
.opp-sig { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px;
  border-radius: 3px; white-space: nowrap; }
.sig-sc  { background: rgba(63, 185, 80, 0.25); color: var(--green); }       /* Short Cover */
.sig-lb  { background: rgba(63, 185, 80, 0.15); color: var(--green); }       /* Long Buildup */
.sig-xb  { background: rgba(122, 169, 240, 0.15); color: var(--accent); }    /* Cross-side bullish */
.sig-ol  { background: rgba(63, 185, 80, 0.12); color: var(--green); }       /* O=L */
.sig-ivd { background: rgba(63, 185, 80, 0.10); color: var(--green); }       /* IV falling */
.sig-neg { background: rgba(248, 81, 73, 0.15); color: var(--red); }         /* Negative signals */
.sig-none { color: var(--muted); font-size: 11px; }

/* Legend bar */
.opp-legend { padding: 10px 16px; font-size: 11px; color: var(--muted);
  background: var(--panel-2); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Buyer page: flex column so table fills remaining viewport height */
[data-page="buyer"].active {
  display: flex !important; flex-direction: column;
  height: calc(100vh - 88px - var(--favbar-h)); overflow: hidden;
}
[data-page="buyer"] .opp-table-wrap { flex: 1; min-height: 0; }

/* ---------- SIDE ---------- */
/* .side layout defined above */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.card h3 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--header-text); font-weight: 700; }
.card h4 { margin: 6px 0 4px 0; font-size: 11px; }
.card h4.ce { color: var(--accent); }
.card h4.pe { color: var(--amber); }

.sentiment { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; text-align: center; padding: 10px 0; border-radius: 6px; background: var(--panel-2); }
.sentiment.bull { color: var(--green); }
.sentiment.bear { color: var(--red); }
.sentiment.neutral { color: var(--muted); }

/* ── Top-of-chain sentiment + strategy chips ───────────────────────── */
.sentiment-chip,
.strategy-chip {
  display: inline-block; margin-left: 8px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
  border: 1px solid transparent;
}
/* 6-level sentiment palette (extreme bear → neutral → extreme bull) */
.sentiment-chip.ext-bear  { background: rgba(127,29,29,0.18);  color: #7f1d1d; border-color: rgba(127,29,29,0.40); }
.sentiment-chip.bear      { background: rgba(220,38,38,0.16);  color: #b91c1c; border-color: rgba(220,38,38,0.36); }
.sentiment-chip.mild-bear { background: rgba(251,113,133,0.14); color: #be123c; border-color: rgba(251,113,133,0.32); }
.sentiment-chip.neutral   { background: rgba(148,163,184,0.14); color: #64748b; border-color: rgba(148,163,184,0.30); }
.sentiment-chip.mild-bull { background: rgba(132,204,22,0.14); color: #4d7c0f; border-color: rgba(132,204,22,0.32); }
.sentiment-chip.bull      { background: rgba(34,197,94,0.16);  color: #16a34a; border-color: rgba(34,197,94,0.36); }
.sentiment-chip.ext-bull  { background: rgba(21,128,61,0.18);  color: #166534; border-color: rgba(21,128,61,0.40); }
/* Dark theme — brighten text */
:root[data-theme="dark"] .sentiment-chip.ext-bear  { color: #fca5a5; }
:root[data-theme="dark"] .sentiment-chip.bear      { color: #f87171; }
:root[data-theme="dark"] .sentiment-chip.mild-bear { color: #fda4af; }
:root[data-theme="dark"] .sentiment-chip.neutral   { color: #cbd5e1; }
:root[data-theme="dark"] .sentiment-chip.mild-bull { color: #bef264; }
:root[data-theme="dark"] .sentiment-chip.bull      { color: #4ade80; }
:root[data-theme="dark"] .sentiment-chip.ext-bull  { color: #6ee7b7; }

/* Strategy popover anchored to the chip — 2 columns × 3 risk rows. */
.strategy-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
  padding: 12px; min-width: 720px; max-width: 92vw;
  font-size: 12px; color: var(--text);
}
.strategy-pop.hidden { display: none; }
.strat-pop-head {
  font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.4px; text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.strat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.strat-col-head {
  font-size: 11px; font-weight: 800; color: var(--accent);
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 4px 6px 6px; border-bottom: 1px dashed var(--border); margin-bottom: 6px;
}
.strat-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 6px; border-radius: 6px;
}
.strat-row + .strat-row { margin-top: 4px; }
.strat-row:hover { background: var(--panel-2); }
.strat-risk {
  flex: 0 0 88px; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  text-transform: uppercase; text-align: center;
  align-self: flex-start;
}
.strat-risk.conservative { background: rgba(34,197,94,0.18); color: #16a34a; }
.strat-risk.medium       { background: rgba(251,191,36,0.18); color: #b45309; }
.strat-risk.high         { background: rgba(239,68,68,0.18); color: #dc2626; }
:root[data-theme="dark"] .strat-risk.conservative { color: #4ade80; }
:root[data-theme="dark"] .strat-risk.medium       { color: #fbbf24; }
:root[data-theme="dark"] .strat-risk.high         { color: #f87171; }
.strat-body { flex: 1; min-width: 0; }
.strat-name-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.strat-name { font-weight: 700; color: var(--text); font-size: 12.5px; }
.strat-cat {
  padding: 1px 6px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.3px;
}
.strat-cat.directional      { background: rgba(37,99,235,0.16);  color: #1d4ed8; }
.strat-cat.spreads          { background: rgba(168,85,247,0.16); color: #7c3aed; }
.strat-cat.non-directional  { background: rgba(245,158,11,0.16); color: #b45309; }
:root[data-theme="dark"] .strat-cat.directional     { color: #93c5fd; }
:root[data-theme="dark"] .strat-cat.spreads         { color: #c4b5fd; }
:root[data-theme="dark"] .strat-cat.non-directional { color: #fcd34d; }
.strat-reason {
  margin-top: 3px; font-size: 11px; line-height: 1.4;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 880px) {
  .strategy-pop { min-width: 320px; }
  .strat-grid   { grid-template-columns: 1fr; }
}

/* Strategy chip — 3 categories */
.strategy-chip.directional      { background: rgba(37,99,235,0.16);  color: #1d4ed8; border-color: rgba(37,99,235,0.36); }
.strategy-chip.spreads          { background: rgba(168,85,247,0.16); color: #7c3aed; border-color: rgba(168,85,247,0.36); }
.strategy-chip.non-directional  { background: rgba(245,158,11,0.16); color: #b45309; border-color: rgba(245,158,11,0.36); }
.strategy-chip.neutral          { background: rgba(148,163,184,0.14); color: #64748b; border-color: rgba(148,163,184,0.30); }
:root[data-theme="dark"] .strategy-chip.directional     { color: #93c5fd; }
:root[data-theme="dark"] .strategy-chip.spreads         { color: #c4b5fd; }
:root[data-theme="dark"] .strategy-chip.non-directional { color: #fcd34d; }
:root[data-theme="dark"] .strategy-chip.neutral         { color: #cbd5e1; }

.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.insights li { padding: 6px 8px; background: var(--panel-2); border-radius: 5px; font-size: 12px; line-height: 1.4; border-left: 3px solid var(--accent); }

.walls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.walls ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.walls li { padding: 3px 0; display: flex; justify-content: space-between; gap: 6px; }
.walls li .s { font-weight: 600; }
.walls li .o { color: var(--muted); }

.buildup-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bu-card { background: var(--panel-2); padding: 6px 8px; border-radius: 5px; font-size: 11px; }
.bu-card .ttl { color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.bu-card .row { display: flex; justify-content: space-between; padding: 1px 0; }

/* ---------- CHARTS GRID ---------- */
.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px; }
.charts-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .charts-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; } }
@media (max-width: 720px)  { .charts-grid { gap: 8px; padding: 8px 10px; } }

/* Pages that hold a 2x2 chart grid should fit the viewport exactly — no scroll,
 * no whitespace. The section spans (100vh - topbar(49) - tabs(38) - sticky-pageHdr).
 * Each chart card fills its grid row via grid-auto-rows: 1fr.
 *
 * Wide-screen layout only (≥1101px); on narrower viewports we stack vertically and
 * allow normal scroll because 4 cards stacked won't fit any phone screen. */
@media (min-width: 1101px) {
  .page[data-page="strike"].active,
  .page[data-page="straddle"].active,
  .page[data-page="strangle"].active,
  .page[data-page="oi"].active,
  .page[data-page="composite"].active,
  .page[data-page="rollatm"].active {
    display: flex; flex-direction: column;
    height: calc(100vh - 99px - var(--favbar-h)); /* topbar(57) + tabs(42) = 99 */
    overflow: hidden;
  }
  /* Rollatm hides the .instr-bar (see `body.page-rollatm .instr-bar`),
   * so the page should reclaim that ~50px slice of vertical space —
   * otherwise the chart grid stops short and leaves a blank gap at
   * the bottom of the viewport. */
  body.page-rollatm .page[data-page="rollatm"].active {
    height: calc(100vh - 57px - var(--favbar-h));
  }
  /* Rolling ATM: row layout = top/bottom split; col layout = left/right split. */
  .charts-grid.rollatm-grid[data-layout="row"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .charts-grid.rollatm-grid[data-layout="col"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: auto;
    gap: 12px;
  }
  .page[data-page="rollatm"] .charts-grid.rollatm-grid { grid-auto-rows: auto; gap: 12px; }
  /* Maximize-ATM mode: left (underlying) card hidden, grid collapses to
     a single track so the ATM straddle pane fills the entire grid. */
  .charts-grid.rollatm-grid[data-fullscreen="atm"] #rollatm-und-card { display: none; }
  .charts-grid.rollatm-grid[data-fullscreen="atm"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }
  /* Toggle button active state. */
  #rollatm-fullscreen-atm.active {
    background: var(--accent);
    color: #0d1117;
    border-color: var(--accent);
  }
  /* Rolling ATM toolbar polish — hide the verbose status line and
     normalise heights across all interactive controls (selects, buttons,
     checkbox labels) so the toolbar reads as a single tidy row. */
  #rollatm-status { display: none !important; }
  .page[data-page="rollatm"] .page-controls > *,
  .page[data-page="rollatm"] .page-controls label,
  .page[data-page="rollatm"] .page-controls .seg,
  .page[data-page="rollatm"] .page-controls .indicators,
  .page[data-page="rollatm"] .page-controls .indicators label,
  .page[data-page="rollatm"] .page-controls .rollatm-spike-pop-wrap,
  .page[data-page="rollatm"] .page-controls .rollatm-spike-btn,
  .page[data-page="rollatm"] .page-controls .btn,
  .page[data-page="rollatm"] .page-controls .select {
    height: 28px;
    line-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .page[data-page="rollatm"] .page-controls .indicators {
    gap: 8px;
  }
  .page[data-page="rollatm"] .page-controls .indicators label {
    line-height: 1;
  }
  /* Notifications popover — fixed-positioned card floating below the
     bell button. Holds the Telegram + webhook config form. */
  .rollatm-notif-pop {
    width: 360px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    z-index: 200;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 12px;
  }
  .rollatm-notif-pop label {
    display: flex; flex-direction: column; gap: 3px;
    font-size: 11px; color: var(--muted);
  }
  .rollatm-notif-pop input[type="text"] {
    background: var(--right-input-bg, var(--panel));
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    font: 500 12px var(--font);
    outline: none;
  }
  .rollatm-notif-pop input[type="text"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
  }
  .rollatm-notif-head {
    font-size: 13px; color: var(--header-text);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .rollatm-notif-actions {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 4px;
  }
  .page[data-page="strike"] .charts-grid,
  .page[data-page="straddle"] .charts-grid,
  .page[data-page="strangle"] .charts-grid,
  .page[data-page="oi"] .charts-grid,
  .page[data-page="composite"] .charts-grid,
  .page[data-page="rollatm"] .charts-grid {
    flex: 1; min-height: 0; grid-auto-rows: 1fr;
  }
  .page[data-page="strike"] .chart-card,
  .page[data-page="straddle"] .chart-card,
  .page[data-page="strangle"] .chart-card,
  .page[data-page="oi"] .chart-card,
  .page[data-page="composite"] .chart-card,
  .page[data-page="rollatm"] .chart-card {
    min-height: 0; max-height: none;
  }
  .page[data-page="strike"] .chart-card.tv-card,
  .page[data-page="rollatm"] .chart-card.tv-card { height: auto; max-height: none; }

/* ── Rolling-ATM straddle alerts panel ──────────────────────────
   Sits below the underlying chart inside #rollatm-und-card.
   Visible only for NIFTY / SENSEX (toggled via [hidden]).
   Lists threshold breaches on the ATM straddle PREMIUM:
     · DOWN from day's high: 10 / 20 / 30 %
     · UP   from day's low : 10 / 20 / 30 / 40 / 50 / 80 / 100 %
   Tracking starts from the 09:16 IST candle. */
.rollatm-alerts {
  /* Flex-basis controlled inline by the resize handler (persisted to
     localStorage). Defaults to 50% so the panel and chart split evenly
     until the user drags. */
  flex: 0 0 var(--rollatm-alerts-h, 50%);
  display: flex; flex-direction: column;
  margin-top: 0;
  border: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(245,158,11,0.06) 0%, var(--panel) 60%);
  min-height: 80px;
  overflow: hidden;
}
/* Draggable horizontal splitter between chart and alerts panel.
   Vertical drag adjusts --rollatm-alerts-h on the parent card. */
.rollatm-und-resize {
  flex: 0 0 6px;
  cursor: row-resize;
  background: var(--border);
  margin: 4px 0;
  border-radius: 3px;
  position: relative;
  transition: background 0.15s;
}
.rollatm-und-resize::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 2px;
  background: var(--muted); opacity: 0.6; border-radius: 2px;
}
.rollatm-und-resize:hover { background: var(--accent); }
.rollatm-und-resize[hidden] { display: none !important; }
/* When the und-card has alerts visible, force it into a column flex
   that lets the chart shrink and the panel take its share. */
#rollatm-und-card { display: flex; flex-direction: column; min-height: 0; }
#rollatm-und-card > h4 { flex: 0 0 auto; }
#rollatm-und-card #rollatm-und-tv {
  flex: 1 1 auto;
  min-height: 120px;
}
.rollatm-alerts[hidden] { display: none !important; }
.rollatm-alerts-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(245,158,11,0.10) 0%, transparent 100%);
  font-size: 11.5px;
  flex-shrink: 0;
}
.rollatm-alerts-title {
  font-weight: 800; letter-spacing: 0.4px;
  color: var(--header-text);
  text-transform: uppercase;
  font-size: 11px;
}
.rollatm-alerts-stats {
  flex: 1;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: flex; gap: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rollatm-alerts-stats b { color: var(--header-text); font-weight: 700; }
.rollatm-alerts-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.rollatm-alerts-empty {
  padding: 14px 10px;
  text-align: center;
  font-style: italic;
}
.rollatm-alert-row {
  display: grid;
  grid-template-columns: 70px 16px 50px 1fr 60px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.rollatm-alert-row:last-child { border-bottom: none; }
.rollatm-alert-row .alert-time {
  color: var(--muted);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10.5px;
}
.rollatm-alert-row .alert-arrow {
  font-size: 13px;
  text-align: center;
}
.rollatm-alert-row.up   .alert-arrow { color: #16a34a; }
.rollatm-alert-row.down .alert-arrow { color: #dc2626; }
.rollatm-alert-row .alert-thr {
  text-align: right;
  font-weight: 800;
}
.rollatm-alert-row.up   .alert-thr { color: #16a34a; }
.rollatm-alert-row.down .alert-thr { color: #dc2626; }
.rollatm-alert-row .alert-msg {
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rollatm-alert-row .alert-msg b { color: var(--header-text); font-weight: 700; }
.rollatm-alert-row .alert-delta {
  text-align: right;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
}
.rollatm-alert-row.up   .alert-delta { color: #16a34a; }
.rollatm-alert-row.down .alert-delta { color: #dc2626; }
/* Backtest alerts (replayed from yesterday's bars) sit above today's
   live ones — visually muted so the live-anchor stats stay primary. */
.rollatm-alert-row.backtest { opacity: 0.78; }
.rollatm-alert-row.backtest .alert-time::after {
  content: ' BT';
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.4px;
}
/* Subtle highlight when a new alert is prepended (CSS animation) */
.rollatm-alert-row.new-alert {
  animation: rollatm-alert-flash 1.2s ease-out;
}
@keyframes rollatm-alert-flash {
  0%   { background: rgba(245,158,11,0.30); }
  100% { background: transparent; }
}

  /* Page-header is sticky globally for tall pages, but fitted (no-scroll) pages
   * don't scroll — sticky leaves an empty band at the top of the flex container
   * and pushes the header into the chart area. Make it static inside fitted pages. */
  .page[data-page="strike"].active .page-header,
  .page[data-page="straddle"].active .page-header,
  .page[data-page="strangle"].active .page-header,
  .page[data-page="oi"].active .page-header,
  .page[data-page="composite"].active .page-header,
  .page[data-page="rollatm"].active .page-header {
    position: static; top: auto;
  }
}

/* Responsive chart card sizing.
 * Goal: 2x2 grid of charts fits a typical PC viewport (~900px tall) without scroll,
 * while staying readable on tablets and mobile (where it stacks vertically). */
.chart-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
  /* clamp(min, preferred, max) — preferred = ~36vh so 2 rows fit in viewport */
  min-height: clamp(220px, 36vh, 380px);
  max-height: clamp(260px, 44vh, 460px);
}
.chart-card h4 {
  margin: 0; font-size: 12px; color: var(--header-text);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
  flex: 0 0 auto;
}
.chart-card canvas { flex: 1; min-height: 0; max-height: none; width: 100% !important; }
/* TradingView lightweight-charts container */
.chart-card.tv-card { padding: 8px 10px 4px; overflow: hidden; }
.chart-card.tv-card h4 { padding: 0 0 4px; }
.tv-chart { flex: 1; width: 100%; min-height: 0; position: relative; }
/* Day-High break flash — applied to the chart-card when a live tick
 * prints above the intraday high. Brief green outer glow that fades out;
 * non-blocking (transform/opacity only, no layout reflow). */
@keyframes chart-blink-up-kf {
  0%   { box-shadow: 0 0 0 0   rgba(34,197,94,0.0),
                     0 0 0 0   rgba(34,197,94,0.0) inset; }
  20%  { box-shadow: 0 0 18px 4px rgba(34,197,94,0.85),
                     0 0 0 2px rgba(34,197,94,0.85) inset; }
  100% { box-shadow: 0 0 0 0   rgba(34,197,94,0.0),
                     0 0 0 0   rgba(34,197,94,0.0) inset; }
}
/* Generic — applied to whichever wrapping element the chart's
 * `container` resolves to (chart-card on Strike / Straddle / Strangle
 * pages; ctv-cell / sg-cell on Straddle Table / Strangle Table mini-
 * chart grids). */
.chart-blink-up {
  animation: chart-blink-up-kf 1.2s ease-out 1;
}
.ctv-cell.chart-blink-up,
.sg-cell.chart-blink-up { border-radius: 6px; }
/* Stacked TradingView card — price chart on top, OI sub-pane below,
 * sharing the same card width. The sub-pane is a fixed-percentage row
 * (~28%) of the card body so the price chart keeps the dominant area. */
.chart-card.tv-card-stacked { display: flex; flex-direction: column; }
.chart-card.tv-card-stacked .tv-chart-main { flex: 1 1 72%; min-height: 0; }
.chart-card.tv-card-stacked .tv-chart-sub  { flex: 0 0 28%;  min-height: 90px; border-top: 1px solid var(--border); }
/* OI sub-pane fully hidden when OI is toggled off; price chart fills the card. */
.chart-card.tv-card-stacked.tv-card-oi-off .tv-chart-sub { display: none; }
.chart-card.tv-card-stacked.tv-card-oi-off .tv-chart-main { flex-basis: 100%; }
/* Hover OHLC legend — floats over the top-left of a TradingView candle pane.
 * Populated by chart.subscribeCrosshairMove; shows the hovered bar's
 * O / H / L / C plus Chg (Chg %) vs the previous bar's close. Falls back
 * to the latest bar when the cursor isn't on the chart. */
.tv-chart .tv-ohlc-legend {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 4;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border);
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-theme="light"] .tv-chart .tv-ohlc-legend {
  background: rgba(255, 255, 255, 0.85);
  color: #0f172a;
}
.tv-chart .tv-ohlc-legend .lbl { color: var(--muted); font-weight: 600; margin-left: 2px; }
.tv-chart .tv-ohlc-legend .lbl:first-child { margin-left: 0; }
.tv-chart .tv-ohlc-legend .val { color: var(--text); font-weight: 700; }
[data-theme="light"] .tv-chart .tv-ohlc-legend .val { color: #0f172a; }
.tv-chart .tv-ohlc-legend .chg { margin-left: 6px; font-weight: 700; }
.tv-chart .tv-ohlc-legend .chg.up   { color: #16a34a; }
.tv-chart .tv-ohlc-legend .chg.down { color: #dc2626; }
/* Inline OHLC legend variant — lives in the card title row instead of
 * floating over the chart canvas. Strips the pill background / absolute
 * positioning and inherits the surrounding title row's spacing. */
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline {
  position: static;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  margin-left: 8px;
}
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .lbl { color: var(--muted); margin-left: 2px; }
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .lbl:first-child { margin-left: 0; }
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .val { color: var(--text); font-weight: 700; }
[data-theme="light"] .tv-card-head .tv-ohlc-legend.tv-ohlc-inline .val { color: #0f172a; }
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .chg { margin-left: 6px; font-weight: 700; }
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .chg.up   { color: #16a34a; }
.tv-card-head .tv-ohlc-legend.tv-ohlc-inline .chg.down { color: #dc2626; }
/* Header row inside a TV card with title + chart-type selector.
   border-bottom + margin-bottom give a visible separator between the
   card's outer header row ("UNDERLYING ▲▼", "NIFTY 50 ATM" etc.) and
   the TV widget below — otherwise the card header and TV's own
   toolbar row blend together. */
.tv-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tv-card-head h4 { padding: 0; flex: 0 0 auto; }
.tv-card-head .tv-ctype { padding: 3px 6px; font-size: 11px; }
/* Buy/Sell button host inside a chart card's title bar.
   Sits inline next to the <h4>; auto-margin-left pushes any later
   inline siblings (chart-type segment / search box) to the right. */
.chart-title-qt-host {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.chart-title-qt-host:empty { display: none; }
.chart-title-qt-host ~ .seg.ct-seg,
.chart-title-qt-host ~ .sym-search,
.chart-title-qt-host ~ .strike-overlay-toggles { margin-left: auto; }
/* The CE+PE pair gets a slim divider between them. */
.chart-title-qt-pair {
  gap: 6px;
}
.chart-title-qt-pair .qt-actions + .qt-actions {
  border-left: 1px solid var(--border);
  padding-left: 6px;
  margin-left: 2px;
}
/* The premium card has no .tv-card-head currently — promote the bare
   <h4> to a flex container when it sits next to a QT host. */
.chart-card.tv-card > .tv-card-head:first-child {
  margin-bottom: 4px;
}

/* Strike Charts straddle-panel overlay toggle buttons */
.strike-overlay-toggles { display: flex; gap: 6px; }
.overlay-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.overlay-btn:hover { background: var(--panel); color: var(--text); }
.overlay-btn.active {
  background: rgba(168, 85, 247, 0.30);
  color: #ffffff;
  border-color: rgba(168, 85, 247, 0.85);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-weight: 600;
}
#strike-show-und.active {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 600;
}
/* IV overlay button — cyan to match the IV line series on the
 * Straddle Premium chart (#06b6d4 in tvcharts/_drawTV). Without
 * this rule it picked up the default .overlay-btn.active style
 * which is violet, mismatching the line color in the chart. */
#strike-show-iv.active {
  background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
  color: #ffffff;
  border-color: #0891b2;
  box-shadow: 0 1px 3px rgba(6, 182, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 600;
}
#strike-show-atm.active {
  background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
  color: #ffffff;
  border-color: #7e22ce;
  box-shadow: 0 1px 3px rgba(168, 85, 247, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

/* ── Chart-type icon buttons (candle / line / mountain / baseline) ── */
.ct-seg { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px; display: inline-flex; gap: 1px; }
/* When the user has the Advanced (TV) chart engine on, the LWC chart-
   type segmented buttons in the chart card headers become redundant —
   the TV widget exposes its own native chart-type selector in the
   chart header. Hide them so the card header doesn't show two
   competing chart-type controls. */
body.chart-engine-tv .ct-seg { display: none !important; }
/* Strategy Chart page (#schart) panel header has its own chart-type
   segmented buttons (`.mc-ct-seg`: Cdl / Line) and EMA indicator
   toggle (`.mc-ind-tog`) that drive the LWC chart. When the Advanced
   (TV) engine is active these controls are dead weight — TV's chart
   header has native chart-type + Indicators picker. Hide them. */
body.chart-engine-tv .mc-ct-seg,
body.chart-engine-tv .mc-ind-tog,
body.chart-engine-tv .mc-ind-panel { display: none !important; }
/* Strike-page: in TV mode the EMA/VWAP/OI/PPV checkboxes don't apply
   (TV has its own indicator system + our FT custom studies). Hide the
   checkbox row and show the template-picker dropdown instead. In LWC
   mode the inverse: dropdown hidden, checkboxes visible. */
body.chart-engine-tv #strike-page-ind { display: none !important; }
.strike-tpl-picker { display: none; }
body.chart-engine-tv .strike-tpl-picker {
  display: inline-block !important;
  min-width: 220px;
}
.ct-btn {
  width: 26px; height: 22px;
  padding: 3px 5px; line-height: 0; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.ct-btn:hover { background: var(--border); }
.ct-btn.active {
  background: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.40);
}
.ct-btn svg { width: 14px; height: 14px; display: block; }

/* Single column (mobile/tablet stacked) — give each chart a comfortable height */
@media (max-width: 1100px) {
  .chart-card { min-height: clamp(220px, 42vh, 360px); max-height: clamp(260px, 48vh, 420px); }
}
@media (max-width: 720px) {
  .chart-card { min-height: 240px; max-height: 320px; padding: 8px 10px; }
  .chart-card h4 { font-size: 11px; }
}

/* ---------- Stocks page ---------- */
.stocks-wrap {
  margin: 12px 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; overflow: auto;
  /* Fill the viewport instead of a fixed slack offset. Above the table:
     topbar(44) + instr-bar(44) = 88px (the page-controls are hoisted into
     the instr-bar, so the stocks page-header is collapsed/hidden), plus
     the favbar — which is 0 when no favorites are tagged, so the table
     automatically reclaims that ~37px row of space. The trailing 24px is
     this wrap's own 12px top + 12px bottom margin. */
  max-height: calc(100vh - 88px - 24px - var(--favbar-h));
}

/* Indeterminate progress bar shown while /api/stocks-summary is in flight
   on cold start. Cold builds take 5-15s (~13k option-token tick fetch)
   and the page used to just show "Loading…" which felt frozen. */
.stocks-progress {
  margin: 6px 16px 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 12px;
  position: relative;
  overflow: hidden;
}
.stocks-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 35%; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent) 50%,
    transparent 100%);
  animation: stocksProgSlide 1.6s linear infinite;
}
.stocks-progress-label {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 600;
  color: var(--text); letter-spacing: 0.2px;
}
@keyframes stocksProgSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }   /* (100 / 35) * 100 = ~285 — bar exits right edge */
}
@media (prefers-reduced-motion: reduce) {
  .stocks-progress-bar { animation: none; width: 100%;
    background: color-mix(in srgb, var(--accent, #3b82f6) 18%, transparent); }
}
.stocks-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.stocks-table thead th {
  position: sticky; top: 0; z-index: 4;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--header-text); font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  padding: 9px 10px; text-align: left; cursor: pointer; user-select: none;
  border-bottom: 2px solid var(--border);
}
.stocks-table thead th.num { text-align: right; }
.stocks-table thead th:hover { background: var(--panel-2); }
.stocks-table thead th .sort-ind { display: inline-block; width: 10px; opacity: 0.5; font-size: 9px; }
.stocks-table thead th.sort-asc .sort-ind::after { content: '▲'; opacity: 1; color: var(--accent); }
.stocks-table thead th.sort-desc .sort-ind::after { content: '▼'; opacity: 1; color: var(--accent); }
.stocks-table tbody td { padding: 5px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stocks-table tbody td.num { text-align: right; font-weight: 600; }
.stocks-table tbody tr:hover td { background: var(--row-hover); }
.stocks-table .sym { font-weight: 700; color: #2563eb; }
:root[data-theme="dark"] .stocks-table .sym,
:root[data-theme="blue"] .stocks-table .sym { color: #6ba6ec; }
.stocks-table .ce-px { color: var(--green); }
.stocks-table .pe-px { color: var(--red); }
.stocks-table .ratio-hot { background: rgba(248,81,73,0.15); color: var(--red); font-weight: 700; }
.stocks-table .ratio-warm { background: rgba(251,191,36,0.12); color: var(--amber); font-weight: 600; }
.stocks-table .dist-near { background: rgba(34,197,94,0.18); color: #16a34a; font-weight: 700; }
.stocks-table .dist-mid  { background: rgba(251,191,36,0.10); color: var(--amber); }
.stocks-table .muted.sm { font-weight: 400; opacity: 0.7; margin-left: 4px; }

/* Two-line price cell used for SPOT and FUTURE columns: LP on top, today's
   Chg / Chg% in a smaller secondary line below. Live tick handler mutates
   the inner .t and .s spans without touching the outer <td>. */
.stocks-table tbody td.cell2-num {
  text-align: right; padding: 4px 10px;
  line-height: 1.2;
}
.stocks-table tbody td.cell2-num .t {
  display: block;
  font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.stocks-table tbody td.cell2-num .s {
  display: block;
  font-size: 10px; font-weight: 500;
  color: var(--muted); opacity: 0.95;
  font-variant-numeric: tabular-nums;
}
.stocks-table tbody td.cell2-num .s.pos { color: var(--green); }
.stocks-table tbody td.cell2-num .s.neg { color: var(--red); }
/* New 3-cell layout: SPOT/FUTURE LP cells + their CHG / CHG% siblings
   all share the same chg-direction colour class so the row reads as a
   single up/down/flat block. No class = default text colour for "no
   change". */
.stocks-table tbody td.num.pos { color: var(--green); }
.stocks-table tbody td.num.neg { color: var(--red); }

/* ============= SETUPS PAGE ============= */
.setups-wrap { padding: 12px 16px; }
.setups-sym-block { margin-bottom: 24px; }
.setups-sym-head {
  font-size: 13px; font-weight: 700; color: var(--accent);
  margin: 0 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
}
.setups-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.setup-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  border-left: 4px solid var(--border);
}
.setup-card.badge-buy-ce { border-left-color: #22c55e; }
.setup-card.badge-buy-pe { border-left-color: #ef4444; }
.setup-card.badge-sell-ce { border-left-color: #f59e0b; }
.setup-card.badge-sell-pe { border-left-color: #06b6d4; }
.setup-card.badge-sell-strad { border-left-color: #a855f7; }
.setup-card.badge-sell-strad-v { border-left-color: #7c3aed; }
.setup-card.badge-sell-strang-v { border-left-color: #0891b2; }
.setup-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.setup-type {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px;
  letter-spacing: 0.5px;
  background: var(--panel-2); color: var(--muted);
}
.setup-type.badge-buy-ce        { background: rgba(34,197,94,0.15);  color: #16a34a; }
.setup-type.badge-buy-pe        { background: rgba(239,68,68,0.15);  color: #dc2626; }
.setup-type.badge-sell-ce       { background: rgba(245,158,11,0.15); color: #d97706; }
.setup-type.badge-sell-pe       { background: rgba(6,182,212,0.15);  color: #0891b2; }
.setup-type.badge-sell-strad    { background: rgba(168,85,247,0.15); color: #7c3aed; }
.setup-type.badge-sell-strad-v  { background: rgba(124,58,237,0.18); color: #6d28d9; }
.setup-type.badge-sell-strang-v { background: rgba(8,145,178,0.18);  color: #0e7490; }
.setup-strike {
  font-size: 13px; font-weight: 700; color: var(--header-text);
}
.setup-time {
  margin-left: auto;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace;
}
.setup-score { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.setup-sigs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.setup-sig {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: rgba(34,197,94,0.10); color: #16a34a;
  white-space: nowrap;
}
.setup-trade {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
  padding-top: 6px; border-top: 1px dashed var(--border);
}
.setup-trade .trade-row { display: flex; flex-direction: column; }
.setup-trade .lbl {
  font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px;
}
.setup-trade .val {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.setup-trade .val.pos { color: var(--green); }
.setup-trade .val.neg { color: var(--red); }
.setup-note {
  margin-top: 8px; font-size: 10px; line-height: 1.35;
  color: var(--muted); font-style: italic;
}

/* ============= SETUPS — UNIFIED FONT SIZE ==============
   The setups page should read evenly: every text element on the page
   uses the same body size (12 px). The only delta is font-weight
   (and the symbol header which stays a touch larger to anchor
   collapsibles).  Per-element sizes below are kept overridable but
   each falls back to var(--setups-fs).
   ======================================================= */
section[data-page="setups"],
section[data-page="setups"] .setups-wrap,
section[data-page="setups"] .setups-toolbar,
section[data-page="setups"] .setups-table th,
section[data-page="setups"] .setups-table td,
section[data-page="setups"] .setups-chip,
section[data-page="setups"] .setups-subtable-head,
section[data-page="setups"] .setups-subtable-note,
section[data-page="setups"] .setup-type,
section[data-page="setups"] .setup-sig,
section[data-page="setups"] .outcome-pill,
section[data-page="setups"] .hit-pill,
section[data-page="setups"] .muted,
section[data-page="setups"] .sm,
section[data-page="setups"] .setup-note-cell,
section[data-page="setups"] .setups-toolbar-meta {
  font-size: 12px !important;
  line-height: 1.45;
}
section[data-page="setups"] .setups-sym-head { font-size: 13px; font-weight: 700; }

/* ----- Setups: single-row toolbar (tabs + filters + totals + view) ----- */
.setups-toolbar-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0;
}
.setups-toolbar-row.single-row {
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  row-gap: 8px;
}
.setups-toolbar-row.single-row .setups-total-pnl { margin-left: auto; }
.setups-toolbar-row.single-row .setups-view-toggle { margin-left: 0; }
.setups-toolbar-row.single-row .setups-toolbar-meta { margin-left: 0; }
/* Visual separator dot between chip groups. Use a small dot rendered
   via padding+border-left so we don't add extra DOM. */
.setups-toolbar-row.single-row .setups-type-chips {
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
/* Legacy stacked-row classes (kept for back-compat with older renders) */
.setups-toolbar-row.tabs-row {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.setups-toolbar-row.filter-row {
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.setups-toolbar-meta { margin-left: auto; }

/* Total P&L summary — sits in the filter row when the table view is
   active. Big bold ₹ amount + tiny W/L/Open breakdown next to it. */
.setups-total-pnl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-left: auto;
}
.setups-total-pnl .tp-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.setups-total-pnl .tp-amt {
  font-size: 16px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: -0.3px;
}
.setups-total-pnl .tp-amt.pos { color: var(--green); }
.setups-total-pnl .tp-amt.neg { color: var(--red); }
.setups-total-pnl .tp-stats {
  font-size: 10.5px;
  white-space: nowrap;
}
/* Legacy single-row toolbar (some other code paths still emit it) */
.setups-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.setups-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.setups-chip {
  cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.setups-chip:hover { background: var(--panel-2); }
/* Active state matches the topbar's Prev Close / Day Open segmented
   buttons (.seg-btn.active) — blue gradient + white text + soft shadow.
   Same look across all themes for visual consistency. */
.setups-chip.active {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 1px 3px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 700;
}
.setups-chip.active .muted { color: rgba(255,255,255,0.78); }

/* Setup-type filter chips — same chip shape but tinted to match the
   setup type's badge color when not active, blue gradient when active. */
.setups-type-chip { letter-spacing: 0.3px; }
.setups-type-chip.badge-buy-ce        { color: #16a34a; border-color: rgba(34,197,94,0.30); }
.setups-type-chip.badge-buy-pe        { color: #dc2626; border-color: rgba(239,68,68,0.30); }
.setups-type-chip.badge-sell-ce       { color: #d97706; border-color: rgba(245,158,11,0.30); }
.setups-type-chip.badge-sell-pe       { color: #0891b2; border-color: rgba(6,182,212,0.30); }
.setups-type-chip.badge-sell-strad    { color: #7c3aed; border-color: rgba(168,85,247,0.30); }
.setups-type-chip.badge-sell-strad-v  { color: #6d28d9; border-color: rgba(124,58,237,0.40); }
.setups-type-chip.badge-sell-strang-v { color: #0e7490; border-color: rgba(8,145,178,0.40); }
.setups-type-chip.badge-sell-put    { color: #2563eb; border-color: rgba(37,99,235,0.30); }
.setups-type-chip.badge-sell-cal    { color: #d97706; border-color: rgba(245,158,11,0.30); }
/* When ACTIVE, the type-tint loses to the global blue gradient
   (already declared on .setups-chip.active above). */

/* Filter row label width — keeps "Score:" and "Setup:" aligned across rows. */
.filter-label { min-width: 50px; flex-shrink: 0; }

.setups-sym-block .setups-sym-head {
  cursor: pointer;
  user-select: none;
  display: flex; align-items: center; gap: 8px;
}
.setups-sym-block .setups-sym-head .caret {
  display: inline-block; transition: transform 0.15s ease;
  font-size: 12px; color: var(--accent);
}
.setups-sym-block.collapsed .setups-sym-head .caret { transform: rotate(-90deg); }
.setups-sym-block.collapsed .setups-sym-body { display: none; }

/* Per-symbol body is now a flat timeline of cards (the Directional /
   Non-Directional grouping was dropped — that distinction is shown as a
   small badge on each card instead). The cards container is responsible
   for the multi-column auto-fill grid layout. */
.setups-sym-body {
  display: block;
}

.setups-cat-block { margin: 0; min-width: 0; }
.setups-cat-block.empty { opacity: 0.55; }
.setups-cat-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  padding-bottom: 3px;
  border-bottom: 1px dashed var(--border);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  display: flex; gap: 8px; align-items: baseline;
}
.setups-cat-empty { padding: 6px 2px; }

/* Within a category column, sub-tables stack vertically (one full-width
   sub-table per setup type) so the column space is used predictably and
   each sub-table's header / scroll works on its own. */
.setups-subtable-grid {
  display: flex; flex-direction: column; gap: 10px;
}
/* Cards container — flows with content. The cap was originally there
   so all 3 indices' cards fit on one screen, but with the symbol-tab
   layout only the active symbol's cards render, so we let the page
   itself scroll naturally instead of forcing an inner scrollbar that
   leaves empty space when the active symbol has fewer cards. */
.setups-scroll {
  overflow-y: visible;
  overflow-x: hidden;
}
.setups-scroll thead th {
  position: sticky; top: 0; z-index: 1;
}
.setups-table tbody td { padding: 4px 7px; }
.setups-table thead th { padding: 5px 7px; }

/* ----- Card grid for setups (multi-column auto-fill) -----
   Each setup-type sub-table has a `.setups-cards` container that
   auto-fills with cards. At ≥1100 px viewport the per-symbol body is
   already a 2-column grid (Directional | Non-Directional), so each
   half is ~600 px and fits two 300 px cards side-by-side. Below that
   it collapses to one card per row, which is fine on narrow screens. */
.setups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  padding: 6px;
  align-items: stretch;     /* ← cards in the same row pull each other
                                 to the tallest one's height for a clean
                                 visual rhythm; was 'start' which left
                                 ragged bottoms when content lengths
                                 differed. */
}

/* ----- Setup card v2 (modern listing-style) ----- */
.setup-card-v2 {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 240px;        /* compact uniform height — body text and
                                note moved behind ⓘ popover, so all
                                cards have identical fixed content
                                (head + meta + dots + line + bottom). */
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.setup-card-v2.has-chart { cursor: crosshair; }
.setup-card-v2:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* Header — title + direction icon */
.setup-card-v2 .card-v2-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.setup-card-v2 .card-v2-titles {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.setup-card-v2 .card-v2-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--header-text);
  letter-spacing: 0.3px;
}
.setup-card-v2 .card-v2-cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  width: fit-content;
}
.setup-card-v2 .card-v2-cat.cat-directional {
  background: rgba(34,197,94,0.15);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.3);
}
.setup-card-v2 .card-v2-cat.cat-nondir {
  background: rgba(168,85,247,0.15);
  color: #7c3aed;
  border: 1px solid rgba(168,85,247,0.3);
}
.setup-card-v2 .card-v2-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Info icon (ⓘ) at the top-right of the card, with hover popover.
   Holds the Signals list + setup Note that used to live in the card
   body — moving them into a popover lets every card stay the same
   fixed height. */
.setup-card-v2 .card-info-btn {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.setup-card-v2 .card-info-glyph {
  font-size: 16px;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.12s, color 0.12s;
}
.setup-card-v2 .card-info-btn:hover .card-info-glyph,
.setup-card-v2 .card-info-btn:focus .card-info-glyph {
  color: var(--accent);
  opacity: 1;
}
.setup-card-v2 .card-info-pop {
  display: none;
  position: absolute;
  top: 28px; right: -4px;
  width: 280px;
  z-index: 20;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: left;
  cursor: default;
}
.setup-card-v2 .card-info-btn:hover .card-info-pop,
.setup-card-v2 .card-info-btn:focus-within .card-info-pop {
  display: block;
}
.setup-card-v2 .card-info-pop-inner { display: flex; flex-direction: column; gap: 8px; }
.setup-card-v2 .card-info-section { display: flex; flex-direction: column; gap: 4px; }
.setup-card-v2 .card-info-h {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.setup-card-v2 .card-info-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.setup-card-v2 .card-info-list li {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
  padding-left: 14px;
  position: relative;
}
.setup-card-v2 .card-info-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: #16a34a;
  font-weight: 700;
  font-size: 10px;
}
.setup-card-v2 .card-info-note {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text);
  font-style: italic;
  margin: 0;
}

/* Body / note rules from the previous design — still loaded by older
   builds. Hide them so any leftover renders don't add height. */
.setup-card-v2 .card-v2-body,
.setup-card-v2 .card-v2-note { display: none; }

/* Metadata row — strike · time · trigger */
.setup-card-v2 .card-v2-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.setup-card-v2 .card-v2-meta .meta-strike { font-weight: 700; color: var(--text); }
.setup-card-v2 .card-v2-meta .meta-time   { font-family: ui-monospace, SFMono-Regular, monospace; }
.setup-card-v2 .card-v2-meta .meta-trig   { color: var(--text); font-weight: 600; }
.setup-card-v2 .card-v2-meta .meta-sep    { opacity: 0.4; }

/* Body — flowing signal description, clamped. `flex: 1` makes it
   absorb whatever vertical space is left between the head and the
   bottom row, so cards in a row line up exactly even when their
   descriptions differ in length. */
.setup-card-v2 .card-v2-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 50px;
  flex: 1 1 auto;
}

/* Score dots */
.setup-card-v2 .card-v2-dots {
  display: flex; gap: 4px;
}
.setup-card-v2 .card-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  transition: background 0.2s ease;
}
.setup-card-v2 .card-dot.filled {
  background: #4ecb71;
  border-color: #4ecb71;
}

/* Bottom row — prices+bar (left) and big outcome pill (right) */
.setup-card-v2 .card-v2-bottom {
  display: flex; align-items: stretch; gap: 10px;
  margin-top: auto;
}
.setup-card-v2 .card-v2-prices {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.setup-card-v2 .price-line {
  display: flex; justify-content: space-between;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.setup-card-v2 .price-line .neg { color: var(--red); font-weight: 700; }
.setup-card-v2 .price-line .pos { color: var(--green); font-weight: 700; }
.setup-card-v2 .card-v2-bar {
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.setup-card-v2 .card-v2-bar .bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.setup-card-v2 .card-v2-bar.bar-tp .bar-fill   { background: linear-gradient(90deg, #f59e0b 0%, #4ecb71 100%); }
.setup-card-v2 .card-v2-bar.bar-sl .bar-fill   { background: var(--red); width: 100% !important; }
.setup-card-v2 .card-v2-bar.bar-open .bar-fill { background: var(--accent); }

/* Big outcome pill — the visual focus */
.setup-card-v2 .card-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  background: #4ecb71;
  color: #fff;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  min-width: 86px;
  text-align: center;
  letter-spacing: 0.4px;
  line-height: 1.15;
}
.setup-card-v2 .card-pill .pill-tag   { font-size: 10px; opacity: 0.85; letter-spacing: 0.6px; }
.setup-card-v2 .card-pill .pill-price { font-size: 16px; font-variant-numeric: tabular-nums; }
.setup-card-v2 .card-pill .pill-time  { font-size: 9px; opacity: 0.75; font-family: ui-monospace, SFMono-Regular, monospace; }
.setup-card-v2 .card-pill.outcome-t1   { background: #6dd189; }
.setup-card-v2 .card-pill.outcome-t2   { background: #4ecb71; }
.setup-card-v2 .card-pill.outcome-t3   { background: #2bb24f; box-shadow: 0 2px 8px rgba(43, 178, 79, 0.35); }
.setup-card-v2 .card-pill.outcome-sl   { background: #ef4444; }
.setup-card-v2 .card-pill.outcome-open { background: #7aa2ff; color: #0c0d0f; }

/* Optional note at the bottom */
.setup-card-v2 .card-v2-note {
  font-size: 10px; line-height: 1.4; font-style: italic;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

/* ---- Setups: Card / Table view toggle ---- */
.setups-view-toggle { margin-left: auto; }

/* ---- Setups: Performance table (Inuvest-style) ---- */
.setups-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.setups-perf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 1200px;
}
.setups-perf-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--header-text);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 9px 10px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.setups-perf-table thead th.num { text-align: right; }
.setups-perf-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.setups-perf-table tbody td.num { text-align: right; font-weight: 600; }
.setups-perf-table tbody td.mono { font-family: ui-monospace, SFMono-Regular, monospace; }
.setups-perf-table tbody td.pos { color: var(--green); }
.setups-perf-table tbody td.neg { color: var(--red); }
.setups-perf-table tbody tr:hover td { background: rgba(122,162,255,0.06); }
.setups-perf-table .setups-tbl-sym {
  font-weight: 700;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.setups-perf-table .setups-tbl-status { white-space: nowrap; }

/* Status pills for the table view */
.status-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.status-pill.status-win  { background: rgba(34,197,94,0.18);  color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.status-pill.status-loss { background: rgba(239,68,68,0.18);  color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
.status-pill.status-open { background: rgba(122,162,255,0.10); color: #7aa2ff; border: 1px solid rgba(122,162,255,0.25); }

/* Stacked level cell — price + % from entry on a second line so the
   trader sees both the absolute target/SL level AND the implied
   reward/risk in one glance. */
.setups-perf-table .lvl-stack {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.setups-perf-table .lvl-stack .lvl-pct {
  font-size: 10px;
  opacity: 0.75;
  font-weight: 500;
}
/* Realised-PNL column — stacked: ₹ amount (big), % (smaller),
   lot-size hint (muted), so the trader sees the cash impact first. */
.setups-perf-table td.pnl-cell .pnl-stack {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.setups-perf-table td.pnl-cell .pnl-amt {
  font-size: 14px; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.setups-perf-table td.pnl-cell .pnl-pct {
  font-size: 11px; font-weight: 700;
  opacity: 0.85;
}
.setups-perf-table td.pnl-cell .pnl-lot {
  font-size: 9px; font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* Symbol tab bar (NIFTY / SENSEX / BANKNIFTY across the top of Setups) */
.setups-sym-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  width: fit-content;
}
.setups-sym-tab {
  cursor: pointer;
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.setups-sym-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
/* Active state matches the topbar's segmented-button gradient. */
.setups-sym-tab.active {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.setups-sym-tab .sym-tab-count {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.setups-sym-tab.active .sym-tab-count {
  background: rgba(255,255,255,0.22);
  color: #ffffff;
}

/* Level line on each card — SL · Trig · T1 · T2 · T3 with an LTP arrow.
   The line itself is a 2 px track; ticks are vertical bars positioned in
   percent along the SL→T3 axis. */
.setup-card-v2 .card-line {
  position: relative;
  margin: 8px 4px 16px;
  height: 38px;
}
.setup-card-v2 .line-track {
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 2px;
  background: linear-gradient(90deg, #ef4444 0%, #d4a857 33%, #6dd189 66%, #2bb24f 100%);
  border-radius: 2px;
}
.setup-card-v2 .line-tick {
  position: absolute;
  top: 9px;
  width: 2px; height: 12px;
  background: var(--text);
  transform: translateX(-1px);
}
.setup-card-v2 .line-tick.line-sl   { background: #ef4444; }
.setup-card-v2 .line-tick.line-trig { background: var(--accent); }
.setup-card-v2 .line-tick.line-t1   { background: #6dd189; }
.setup-card-v2 .line-tick.line-t2   { background: #4ecb71; }
.setup-card-v2 .line-tick.line-t3   { background: #2bb24f; }
.setup-card-v2 .line-ltp {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.6);
  pointer-events: none;
}
.setup-card-v2 .line-labels {
  position: absolute;
  left: 0; right: 0; top: 24px;
  height: 14px;
}
.setup-card-v2 .line-labels > span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--muted);
  white-space: nowrap;
}
.setup-card-v2 .line-labels .lbl-sl   { color: #ef4444; }
.setup-card-v2 .line-labels .lbl-trig { color: var(--accent); }
.setup-card-v2 .line-labels .lbl-t1   { color: #6dd189; }
.setup-card-v2 .line-labels .lbl-t2   { color: #4ecb71; }
.setup-card-v2 .line-labels .lbl-t3   { color: #2bb24f; }
.setup-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.setup-card-row.has-chart { cursor: crosshair; }
.setup-card-row:hover { background: rgba(122,162,255,0.06); }
.setup-card-row.card-t1, .setup-card-row.card-t2, .setup-card-row.card-t3 {
  border-left-color: #4ecb71;
}
.setup-card-row.card-sl { border-left-color: #ef4444; }

.setup-card-row .card-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 90px;
}
.setup-card-row .card-time {
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.4px;
}
.setup-card-row .card-strike {
  font-size: 13px; font-weight: 700;
  color: var(--header-text);
}

.setup-card-row .card-levels {
  display: flex; gap: 12px; flex-wrap: nowrap;
}
.setup-card-row .lvl {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  min-width: 64px;
}
.setup-card-row .lvl-lbl {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.setup-card-row .lvl-val {
  font-size: 12px; font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.setup-card-row .lvl-val.neg { color: var(--red); }
.setup-card-row .lvl-val.pos { color: var(--green); }
.setup-card-row .lvl-hit {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.setup-card-row .lvl-hit.hit-sl { background: rgba(239,68,68,0.18); color: #dc2626; }
.setup-card-row .lvl-hit.hit-tp { background: rgba(34,197,94,0.18); color: #16a34a; }

.setup-card-row .card-outcome { margin-left: auto; }
.setup-card-row .score-pill {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.setup-card-row .card-signals {
  display: flex; flex-wrap: wrap; gap: 3px;
  flex-basis: 100%;            /* signals wrap onto a fresh line below the levels */
  padding-top: 2px;
}
.setups-subtable {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  overflow: hidden;
}
.setups-subtable-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.setups-subtable .setups-table-wrap {
  border: 0; border-radius: 0;
}
.setups-subtable-note {
  padding: 6px 10px;
  border-top: 1px dashed var(--border);
  font-style: italic; line-height: 1.35;
}

.setups-table-wrap {
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  overflow-x: auto;
}
.setups-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; color: var(--text);
}
.setups-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--muted);
  font-weight: 700; font-size: 10px; letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.setups-table thead th.num { text-align: right; }
.setups-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  white-space: normal;
}
.setups-table tbody td.num   { text-align: right; }
.setups-table tbody td.mono  { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, monospace; white-space: nowrap; }
.setups-table tbody td.pos   { color: var(--green); }
.setups-table tbody td.neg   { color: var(--red); }
.setups-table tbody tr.setup-row { transition: background 0.12s ease; }
.setups-table tbody tr.setup-row:hover { background: rgba(122,162,255,0.06); }
.setups-table tbody tr.setup-row.has-chart { cursor: crosshair; }
.setups-table tbody tr.setup-row:last-child td { border-bottom: 0; }
.setups-table .setup-sigs-cell {
  display: flex; flex-wrap: wrap; gap: 3px; min-width: 200px;
}
.setups-table .setup-note-cell {
  max-width: 320px; line-height: 1.35; font-style: italic;
}

/* Outcome (TARGET / SL / OPEN) — stand-alone column pill */
.setups-table .outcome-cell { white-space: nowrap; }
.outcome-pill {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
  padding: 3px 8px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.outcome-pill.outcome-tp   { background: rgba(34,197,94,0.18); color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.outcome-pill.outcome-t1   { background: rgba(34,197,94,0.10); color: #16a34a; border: 1px solid rgba(34,197,94,0.25); }
.outcome-pill.outcome-t2   { background: rgba(34,197,94,0.18); color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.outcome-pill.outcome-t3   { background: rgba(34,197,94,0.28); color: #ffffff; border: 1px solid rgba(34,197,94,0.55); }
.outcome-pill.outcome-sl   { background: rgba(239,68,68,0.18); color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
.outcome-pill.outcome-open { background: rgba(122,162,255,0.10); color: #7aa2ff; border: 1px solid rgba(122,162,255,0.25); }

/* Inline hit-pill stacked under the SL or Target price in its own column */
.hit-pill {
  display: inline-block; margin-top: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px;
}
.hit-pill.hit-sl { background: rgba(239,68,68,0.18); color: #dc2626; }
.hit-pill.hit-tp { background: rgba(34,197,94,0.18); color: #16a34a; }
/* When a price level was hit, give the cell a soft-tinted background so
   the eye lands on the resolution at a glance. */
.setups-table tbody td.cell-hit { background: rgba(255,255,255,0.02); }
.setups-table tbody tr.row-t1:hover,
.setups-table tbody tr.row-t2:hover,
.setups-table tbody tr.row-t3:hover { background: rgba(34,197,94,0.06); }
.setups-table tbody tr.row-sl:hover { background: rgba(239,68,68,0.06); }

/* Hover-chart popup pinned next to the row */
.setup-hover-card {
  position: fixed;
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  padding: 10px 10px 8px;
  z-index: 1000;
  pointer-events: none; /* let mouseleave on the row fire reliably */
}
.setup-hover-card .hover-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.setup-hover-card .hover-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; color: var(--header-text);
}
.setup-hover-card .hover-action {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
}
.setup-hover-card .hover-instr {
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.setup-hover-card .hover-meta { font-size: 12px; }
.setup-hover-card .hover-legend > span { font-size: 12px; }
.setup-hover-card .hover-chart-wrap {
  position: relative;
  height: 180px;
}
.setup-hover-card .hover-chart-wrap canvas {
  width: 100% !important; height: 100% !important;
}
.setup-hover-card .hover-legend {
  display: flex; gap: 12px; margin-top: 6px;
  font-size: 10px;
}
.setup-hover-card .hover-legend > span {
  display: inline-flex; align-items: center; gap: 5px;
}
/* Dot legend items (Entry / Exit) — small filled circle with a ring,
   matching the chart marker style. */
.setup-hover-card .lg-dot::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
}
.setup-hover-card .lg-exit::before {
  background: currentColor; /* solid green/red dot for outcome marker */
  border: 2px solid currentColor;
}
/* Dashed-line legend items (SL / Targets) — short dashed segment. */
.setup-hover-card .lg-dash::before {
  content: ""; display: inline-block;
  width: 16px; height: 0;
  border-top: 1px dashed currentColor;
}
.setup-hover-card .lg-entry { color: #7aa2ff; } /* outline ring colour for entry */
.setup-hover-card .lg-exit  { color: #4ecb71; } /* default green; SL exit users will see different colour live */
.setup-hover-card .lg-sl    { color: #ff6b6b; }
.setup-hover-card .lg-tp    { color: #4ecb71; }

/* Stocks page: hover-chart popup (intraday spot + future overlay). */
.stock-hover-card {
  position: fixed;
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.25);
  padding: 10px 10px 8px;
  z-index: 1000;
  pointer-events: none;
}
.stock-hover-card .hover-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.stock-hover-card .hover-title {
  font-size: 13px; font-weight: 700; color: var(--header-text);
}
.stock-hover-card .hover-meta { font-size: 11px; }
.stock-hover-card .hover-chart-wrap {
  position: relative;
  height: 150px;
}
.stock-hover-card .hover-chart-wrap canvas {
  width: 100% !important; height: 100% !important;
}
.stock-hover-card .hover-legend {
  display: flex; gap: 12px; margin-top: 6px;
  font-size: 11px;
}
.stock-hover-card .hover-legend > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.stock-hover-card .lg-spot::before {
  content: ""; display: inline-block;
  width: 14px; height: 0;
  border-top: 1.5px solid #7aa2ff;
}
.stock-hover-card .lg-fut::before {
  content: ""; display: inline-block;
  width: 14px; height: 0;
  border-top: 1.2px dashed #f0c66e;
}
.stock-hover-card .lg-spot { color: #7aa2ff; }
.stock-hover-card .lg-fut  { color: #f0c66e; }

/* Click-to-expand sub-row: shows ATM ± N mini option chain below the
   clicked stock row. One open at a time. */
.stocks-table tr.stock-row-open td { background: var(--panel-2); }
.stocks-table tr.stock-row-open td.sym { color: var(--accent); }
.stocks-table tr.stock-expand-row td.stock-expand-cell {
  /* No tinted bg here — keep the embedded option chain table standing on
     its own clean panel so its CE/PE/strike cells read naturally. */
  padding: 0; border-bottom: 1px solid var(--border); background: var(--panel);
}

/* ============ Stocks page — per-symbol info side panel ============
   Right-side slide-in card. Opens when user clicks the (i) icon
   next to a symbol. Fixed position so it overlays the page without
   reflowing the table. */
.stock-side-panel {
  position: fixed;
  top: calc(60px + var(--favbar-h));      /* clear the top nav + favbar */
  right: 0;
  width: 380px;
  max-width: 95vw;
  height: calc(100vh - 60px - var(--favbar-h));
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
  z-index: 1500;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}
.stock-side-panel[hidden] { display: none; }
.stock-side-panel.open   { transform: translateX(0); }
.stock-side-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1499;
}
.stock-side-panel-backdrop[hidden] { display: none; }
.ssp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.ssp-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ssp-sym  { font-size: 18px; font-weight: 700; color: var(--text); }
.ssp-exch { font-size: 11px; color: var(--muted); }
.ssp-close {
  background: transparent; border: 0; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px;
}
.ssp-close:hover { background: var(--bg); color: var(--text); }
.ssp-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
.ssp-loading { color: var(--muted); text-align: center; padding: 40px 0; }

/* Price summary block at the top */
.ssp-price-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ssp-price-lp  { font-size: 24px; font-weight: 700; color: var(--text); }
.ssp-price-chg { font-size: 13px; font-weight: 600; }
.ssp-price-chg.up   { color: #16a34a; }
.ssp-price-chg.down { color: #dc2626; }

/* Generic metrics grid — two columns */
.ssp-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
  margin-bottom: 16px;
}
.ssp-grid .lbl { color: var(--muted); font-weight: 500; }
.ssp-grid .val { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ssp-grid .val.up   { color: #16a34a; }
.ssp-grid .val.down { color: #dc2626; }

/* Section header within the panel */
.ssp-sec-h {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  margin: 6px 0 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Support / Resistance pills */
.ssp-sr-list { display: flex; flex-direction: column; gap: 6px; }
.ssp-sr-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--panel-2);
  font-size: 12px;
}
.ssp-sr-row.res { border-left: 3px solid #dc2626; }
.ssp-sr-row.sup { border-left: 3px solid #16a34a; }
.ssp-sr-strike { font-weight: 700; color: var(--text); }
.ssp-sr-meta   { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ssp-sr-oi     { color: var(--muted); font-size: 11px; }

/* Performance card row (1D / 1W / 1M) */
.ssp-perf {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 14px;
}
.ssp-perf-cell {
  padding: 8px 6px;
  background: var(--panel-2);
  border-radius: 6px;
  text-align: center;
}
.ssp-perf-cell .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; }
.ssp-perf-cell .pct { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ssp-perf-cell .pct.up   { color: #16a34a; }
.ssp-perf-cell .pct.down { color: #dc2626; }

/* High/Low-of-Week/Month chips — coloured pills indicating today's
   spot is at the highest / lowest of the past 5 or 22 trading days. */
.ssp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: -8px 0 12px;
}
.ssp-chip {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.ssp-chip.chip-hw { background: rgba(34,197,94,0.18);  color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.ssp-chip.chip-hm { background: rgba(34,197,94,0.32);  color: #166534; border: 1px solid rgba(22,101,52,0.45); }
.ssp-chip.chip-lw { background: rgba(239,68,68,0.18);  color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
.ssp-chip.chip-lm { background: rgba(239,68,68,0.32);  color: #991b1b; border: 1px solid rgba(153,27,27,0.45); }

/* Inline info button on each stock row, next to the symbol */
.stocks-table .stock-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--muted); font-size: 11px; font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
}
.stocks-table .stock-info-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--panel-2); }
.stocks-table .stock-expand-wrap { padding: 10px 16px 14px; }
.stocks-table .stock-expand-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 0 8px;
}
.stocks-table .stock-expand-title { font-weight: 700; color: var(--accent); font-size: 12px; }
.stocks-table .stock-expand-status { color: var(--muted); }

/* Mini chain in stocks expand-row reuses the .chain table styles from the
   main Option Chain page. Only override what's needed to make it fit nicely
   inside the expanded sub-row. */
.mini-chain-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.mini-chain {
  /* Slightly smaller font + padding so 19 columns fit without horizontal
     scroll on common monitor widths; falls back to scroll on narrower views. */
  font-size: 11px;
}
.mini-chain thead th { font-size: 10px; padding: 4px 6px; }
.mini-chain tbody td { padding: 4px 6px; }
/* CRITICAL: kill the sticky thead from .chain — those `top: 141px/173px`
   rules are calibrated to the main Option Chain page's topbar layout.
   Inside the stocks expand-row those headers would float over the row data
   above as the user scrolls the stocks table, producing a visual mess
   (data rows appearing above the headers). The mini chain is short
   (11 rows) so doesn't need sticky behavior anyway. */
.mini-chain thead tr.grp th,
.mini-chain thead tr:not(.grp) th {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}
/* The parent stock-row-open tints its tds via `background: var(--panel-2)`.
   That bleeds through here because mini-chain cells default to transparent.
   Force opaque cell backgrounds so the chain reads on its own —
   BUT NOT for the CALLS/STRIKE/PUTS group-header band, which has its
   own intentional green/amber/red gradient backgrounds. The :not()
   selectors below preserve those. */
.mini-chain thead th:not(.ce-grp):not(.pe-grp):not(.strike-grp) {
  background: var(--panel-2);
}
.mini-chain tbody td { background: var(--panel); }
.mini-chain tbody tr.atm td { background: rgba(251,191,36,0.10); }
.mini-chain tbody tr:hover td { background: var(--row-hover); }
/* ITM tints win because of the dedicated class — same hues as the main
   chain page, kept here without !important so the row hover / atm row
   highlights still beat them when relevant. */
.mini-chain tbody td.ce-itm { background: rgba(88,166,255,0.10); }
.mini-chain tbody td.pe-itm { background: rgba(88,166,255,0.10); }

/* ── Stocks mini-chain: Classic/Flat view toggle ─────────────────────── */
.schain-view-seg { flex-shrink: 0; }
.schain-view-seg .seg-btn { padding: 2px 8px; font-size: 11px; }

/* ── Stocks mini-chain: Modern view column header colours ─────────────────
   Modern view uses the same .mini-chain table as Classic; only the column
   header text colours need overriding so CE headers read green and PE red. */
.mini-chain thead th.ce { color: var(--green); }
.mini-chain thead th.pe { color: var(--red); }

/* Cards view (market-pulse style) */
.stocks-card-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 88px; z-index: 7;
}
.stocks-card-toolbar.hidden { display: none; }
.stocks-card-toolbar .seg .seg-btn { padding: 4px 8px; font-size: 11px; min-width: 26px; }
.stocks-card-toolbar input[type="range"] { accent-color: var(--accent); cursor: pointer; }

.wl-filters { display: inline-flex; gap: 4px; align-items: center; }
.wl-dot {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--panel-2); cursor: pointer; padding: 0; transition: transform 0.12s, box-shadow 0.15s;
  display: inline-block;
}
.wl-dot:hover { transform: scale(1.15); }
.wl-dot.wl-yellow { background: #fbbf24; border-color: #f59e0b; }
.wl-dot.wl-red    { background: #ef4444; border-color: #dc2626; }
.wl-dot.wl-green  { background: #22c55e; border-color: #16a34a; }
.wl-dot.wl-blue   { background: #3b82f6; border-color: #2563eb; }
.wl-dot.wl-purple { background: #a855f7; border-color: #9333ea; }
.wl-dot.active   { box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor; }
.wl-dot.dim     { opacity: 0.35; }

.wl-download-wrap { position: relative; }
.wl-download-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 160px;
}
.wl-download-pop.hidden { display: none; }
.wl-download-pop button {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: transparent; color: var(--text); border: 0; border-radius: 5px;
  cursor: pointer; font: inherit; font-size: 12px; text-align: left;
}
.wl-download-pop button:hover { background: var(--panel-2); }
.wl-download-pop .wl-dot { width: 12px; height: 12px; cursor: default; }

/* Card-level watchlist row */
.stock-card .wl-row { display: flex; gap: 4px; margin-top: 2px; }
.stock-card .wl-row .wl-pick {
  width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; cursor: pointer; padding: 0; transition: background 0.12s;
}
.stock-card .wl-row .wl-pick:hover { transform: scale(1.2); }
.stock-card .wl-row .wl-pick[data-wl="yellow"].on { background: #fbbf24; border-color: #f59e0b; }
.stock-card .wl-row .wl-pick[data-wl="red"].on    { background: #ef4444; border-color: #dc2626; }
.stock-card .wl-row .wl-pick[data-wl="green"].on  { background: #22c55e; border-color: #16a34a; }
.stock-card .wl-row .wl-pick[data-wl="blue"].on   { background: #3b82f6; border-color: #2563eb; }
.stock-card .wl-row .wl-pick[data-wl="purple"].on { background: #a855f7; border-color: #9333ea; }

.stocks-cards {
  display: grid; grid-template-columns: repeat(var(--stocks-grid, 4), 1fr);
  gap: 10px; padding: 12px 16px;
}
.stocks-cards .stock-card .spark { height: var(--stocks-card-h, 160px); }
.stocks-cards.hidden { display: none; }
.stock-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
  cursor: pointer;
}
.stock-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.stock-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.stock-card .sym {
  font-weight: 800; font-size: 15px; color: #2563eb; letter-spacing: -0.01em;
  flex: 1 1 auto; min-width: 0;
  white-space: normal; word-break: break-word; line-height: 1.15;
}
:root[data-theme="dark"] .stock-card .sym, :root[data-theme="blue"] .stock-card .sym { color: #6ba6ec; }
.stock-card .spot { font-weight: 700; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; flex: 0 0 auto; white-space: nowrap; }
.stock-card .meta { font-size: 10px; color: var(--muted); letter-spacing: 0.4px; text-transform: uppercase; }
.stock-card .row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.stock-card .row .lbl { font-size: 9px; color: var(--muted); letter-spacing: 0.4px; text-transform: uppercase; }
.stock-card .row .v { font-size: 12px; font-weight: 600; }
.stock-card .row .v.ce { color: var(--green); }
.stock-card .row .v.pe { color: var(--red); }
.stock-card .spark {
  width: 100%; height: 38px; display: block;
  background: rgba(255,255,255,0.02); border-radius: 4px;
}
.stock-card .card-chart {
  width: 100%; height: var(--stocks-card-h, 160px);
  background: rgba(255,255,255,0.02); border-radius: 4px;
  position: relative; overflow: hidden;
}
.stock-card .strad-ribbon {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: var(--panel-2);
}
.stock-card .strad-ribbon .lbl { font-size: 10px; color: var(--muted); }
.stock-card .strad-ribbon .v { font-size: 14px; font-weight: 700; color: var(--text); }
.stock-card .strad-ribbon .pct { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.stock-card .strad-ribbon .pct.hot { background: rgba(248,81,73,0.18); color: var(--red); }
.stock-card .strad-ribbon .pct.warm { background: rgba(251,191,36,0.18); color: var(--amber); }
.stock-card .strad-ribbon .pct.cool { background: rgba(34,197,94,0.18); color: var(--green); }
.stock-card .oi-walls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stock-card .oi-wall { display: flex; flex-direction: column; gap: 1px; }
.stock-card .oi-wall .lbl { font-size: 9px; color: var(--muted); letter-spacing: 0.3px; text-transform: uppercase; }
.stock-card .oi-wall .strike { font-size: 12px; font-weight: 700; }
.stock-card .oi-wall.ce .strike { color: var(--green); }
.stock-card .oi-wall.pe .strike { color: var(--red); }
.stock-card .oi-wall .dist { font-size: 10px; color: var(--muted); }
.stock-card .oi-wall .dist.near { color: var(--accent); font-weight: 600; }

/* Single-line info row: CE · PE · Max CE · Max PE · Lot */
.stock-card .info-line {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.stock-card .info-line > span {
  display: inline-flex; align-items: baseline; gap: 4px;
  white-space: nowrap;
}
.stock-card .info-line .lbl {
  font-size: 9px; color: var(--muted);
  letter-spacing: 0.3px; text-transform: uppercase;
}
.stock-card .info-line .v   { font-size: 12px; font-weight: 700; }
.stock-card .info-line .v.ce { color: var(--green); }
.stock-card .info-line .v.pe { color: var(--red); }
.stock-card .info-line .muted.xs { font-size: 10px; color: var(--muted); }
.stock-card .info-line .dist { font-size: 10px; color: var(--muted); font-weight: 600; }
.stock-card .info-line .dist.near { color: var(--accent); }
.stock-card .info-line .sep { color: var(--border); font-weight: 400; }

/* Compact mode — hide secondary data rows, keep symbol + chart + ATM ribbon */
.stocks-cards.compact .stock-card .meta,
.stocks-cards.compact .stock-card .wl-row,
.stocks-cards.compact .stock-card .info-line { display: none; }

/* ---------- Multi-instance Strangle Tables ---------- */
#strangtbl-list { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.strangtbl-inst { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.strangtbl-inst .inst-header {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; row-gap: 6px;
}
/* Chart-only controls hoisted from .ctv-toolbar into .inst-header
 * (see Pages.strangtbl in app.js). Hidden by default; shown only when
 * the instance is in chart view (data-view="chart" on root). Inline-
 * flex with nowrap keeps the controls flowing naturally next to the
 * other inst-header items (Middle Strike / Offsets / Interval / view
 * seg / status). The whole row wraps to a second line on narrow
 * viewports via .inst-header { flex-wrap: wrap; row-gap: 6px } rather
 * than overlapping. */
.strangtbl-inst .strangtbl-chart-only {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  font-size: 11px;
}
.strangtbl-inst[data-view="chart"] .strangtbl-chart-only { display: inline-flex; }
.strangtbl-inst .strangtbl-chart-only .seg-btn { padding: 3px 6px; }
.strangtbl-inst .strangtbl-chart-only label,
.strangtbl-inst .strangtbl-chart-only .muted { white-space: nowrap; }
.strangtbl-inst .inst-header label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.strangtbl-inst .strangtbl-remove {
  margin-left: auto; background: transparent; color: var(--muted);
  border: 1px solid var(--border); padding: 2px 8px; font-weight: 700;
}
.strangtbl-inst .strangtbl-remove:hover { color: var(--red); border-color: var(--red); background: rgba(248,81,73,0.06); }
.strangtbl-inst .stradtbl-wrap { margin: 0; border: 0; border-radius: 0; }

/* ---------- STRADDLE / STRANGLE TABLE ---------- */
/* The wrap uses no overflow so vertical sticky on thead cells scopes to the page
 * scroll, not the wrap. Horizontal overflow falls to the page if table > viewport. */
.stradtbl-wrap {
  margin: 12px 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px;
}
.stradtbl { width: 100%; min-width: 1280px; }
.stradtbl thead tr.grp th {
  position: sticky; top: 138px; z-index: 8;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.stradtbl thead tr:not(.grp) th {
  position: sticky; top: 170px; z-index: 8;
  background: var(--panel);
  box-shadow: 0 4px 8px -6px rgba(0,0,0,0.4);
}
/* Multi-instance Strangle Tables: position:sticky on individual <th> cells across
 * many stacked tables produces a layout bug where cells render below tbody. Disable
 * sticky for those — each table's inst-header sits right above its thead so the
 * column meanings remain visible while reading. */
.strangtbl-inst .stradtbl thead tr.grp th,
.strangtbl-inst .stradtbl thead tr:not(.grp) th {
  position: static; top: auto; box-shadow: none;
}
/* The CALLS / PUTS / STRANGLE group-header row is the same for every
 * instance, so show it only on the FIRST strangle table on the page.
 * All subsequent tables hide that row to reduce visual repetition. */
#strangtbl-list .strangtbl-inst:not(:first-child) .stradtbl thead tr.grp {
  display: none;
}
/* Strangle-table middle row: override the inherited "ATM" pseudo-badge
 * (from `.chain tr.atm td.strike::after`) with "Mid", because in a strangle
 * the middle strike is user-chosen and isn't always the real ATM strike. */
.strangtbl tr.atm td.strike::after { content: "Mid"; }
/* Freestyle strangles — CE and PE strikes are picked independently, so
 * each leg gets its own moneyness badge (ITM / ATM / OTM) instead of the
 * row-level "Mid" tag. Driven by a data-mny attribute set in renderInstance. */
.strangtbl td.strike[data-mny] { position: relative; }
.strangtbl td.strike[data-mny]::after {
  content: attr(data-mny);
  position: absolute;
  top: 1px;
  right: 4px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.95;
  font-family: 'Inter', sans-serif;
}
.strangtbl td.strike[data-mny="ITM"]::after { color: var(--green); }
.strangtbl td.strike[data-mny="ATM"]::after { color: var(--amber); }
.strangtbl td.strike[data-mny="OTM"]::after { color: var(--muted); }
.stradtbl tbody td { font-size: 11px; padding: 6px 6px; }
.stradtbl tbody td.strike { font-weight: 700; background: var(--panel-2); text-align: center; }
/* ATM-row strike cell — no amber fill (per user direction "remove
   orange cell coloring"). The small "ATM" badge in the strike text
   still marks the row; the background stays the same panel-2 grey
   used by every other strike cell. */
.stradtbl tr.atm td.strike { color: var(--text); }
.stradtbl .above-vwap { color: var(--green); }
.stradtbl .below-vwap { color: var(--red); }
/* Compact indicator cells (VWAP / EMA10 / EMA20 / ST) — small width, colored bg */
.stradtbl th.ind-h, .stradtbl td.ind-cell {
  width: 56px; min-width: 56px; max-width: 64px;
  padding: 4px 4px; text-align: center;
  font-size: 11px; font-weight: 600;
}
/* Indicator cells (VWAP / EMA10 / EMA20 / ST) — ONLY these four columns
   get the directional background tint. Price / Chg / H-L stay clean
   (per user direction). The colored fill here is intentional: it makes
   the up-vs-down relationship between price and the indicator level
   readable at a glance, which is the whole reason these cells exist. */
.stradtbl td.ind-cell.sig-up,
.strangtbl td.ind-cell.sig-up {
  color: var(--green) !important;
  background: rgba(34,197,94,0.14) !important;
  font-weight: 700;
}
.stradtbl td.ind-cell.sig-down,
.strangtbl td.ind-cell.sig-down {
  color: var(--red)   !important;
  background: rgba(248,81,73,0.14) !important;
  font-weight: 700;
}
/* Group separators: thicker right border at the boundary between CALLS / PUTS / STRADDLE */
.stradtbl th.grp-end, .stradtbl td.grp-end { border-right: 2px solid var(--accent); }
.stradtbl th.ce-grp { border-right: 2px solid var(--accent); }
.stradtbl th.pe-grp { border-right: 2px solid var(--accent); }
/* New-high / new-low flash animations REMOVED per user direction —
   "no fill color on Price, Chg, H-L cells". The price-cell text colour
   (tick-up/tick-down) and the up/down arrow on the chg value still
   convey direction without painting the cell. */
.stradtbl td.new-high,
.stradtbl td.new-low { /* intentionally empty — no flash */ }

/* Defensive cleanup — Price / Chg / H-L cells stay clean on ALL rows,
   ATM or OTM. Earlier rules + browser hover styling on certain themes
   was leaking an amber/orange wash onto offset-≥-1 rows; this rule
   forces those columns transparent. Strike cells keep their panel-2
   grey (set by the .strike rule above) and indicator cells keep their
   sig-up/sig-down green/red (set further up). */
.stradtbl tbody td[data-col$="-px"],
.stradtbl tbody td[data-col$="-chg"],
.stradtbl tbody td[data-col$="-hl"],
.strangtbl tbody td[data-col$="-px"],
.strangtbl tbody td[data-col$="-chg"],
.strangtbl tbody td[data-col$="-hl"] {
  background: transparent !important;
}

/* === NUMBER text colour: every tick where price moved up/down ===
   Just text colour (no background) so the table stays calm. Cumulative with
   any background flash above. */
.stradtbl td.tick-up   { color: var(--green); }
.stradtbl td.tick-down { color: var(--red);   }

/* Column show/hide: each hidden key is space-separated in [data-hide]. */
.stradtbl[data-hide~="ce-px"]   th[data-col="ce-px"],   .stradtbl[data-hide~="ce-px"]   td[data-col="ce-px"]   { display: none; }
.stradtbl[data-hide~="ce-chg"]  th[data-col="ce-chg"],  .stradtbl[data-hide~="ce-chg"]  td[data-col="ce-chg"]  { display: none; }
.stradtbl[data-hide~="ce-hl"]   th[data-col="ce-hl"],   .stradtbl[data-hide~="ce-hl"]   td[data-col="ce-hl"]   { display: none; }
.stradtbl[data-hide~="ce-vwap"] th[data-col="ce-vwap"], .stradtbl[data-hide~="ce-vwap"] td[data-col="ce-vwap"] { display: none; }
.stradtbl[data-hide~="ce-ema10"] th[data-col="ce-ema10"], .stradtbl[data-hide~="ce-ema10"] td[data-col="ce-ema10"] { display: none; }
.stradtbl[data-hide~="ce-ema20"] th[data-col="ce-ema20"], .stradtbl[data-hide~="ce-ema20"] td[data-col="ce-ema20"] { display: none; }
.stradtbl[data-hide~="ce-st"]   th[data-col="ce-st"],   .stradtbl[data-hide~="ce-st"]   td[data-col="ce-st"]   { display: none; }
.stradtbl[data-hide~="pe-px"]   th[data-col="pe-px"],   .stradtbl[data-hide~="pe-px"]   td[data-col="pe-px"]   { display: none; }
.stradtbl[data-hide~="pe-chg"]  th[data-col="pe-chg"],  .stradtbl[data-hide~="pe-chg"]  td[data-col="pe-chg"]  { display: none; }
.stradtbl[data-hide~="pe-hl"]   th[data-col="pe-hl"],   .stradtbl[data-hide~="pe-hl"]   td[data-col="pe-hl"]   { display: none; }
.stradtbl[data-hide~="pe-vwap"] th[data-col="pe-vwap"], .stradtbl[data-hide~="pe-vwap"] td[data-col="pe-vwap"] { display: none; }
.stradtbl[data-hide~="pe-ema10"] th[data-col="pe-ema10"], .stradtbl[data-hide~="pe-ema10"] td[data-col="pe-ema10"] { display: none; }
.stradtbl[data-hide~="pe-ema20"] th[data-col="pe-ema20"], .stradtbl[data-hide~="pe-ema20"] td[data-col="pe-ema20"] { display: none; }
.stradtbl[data-hide~="pe-st"]   th[data-col="pe-st"],   .stradtbl[data-hide~="pe-st"]   td[data-col="pe-st"]   { display: none; }
.stradtbl[data-hide~="st-px"]   th[data-col="st-px"],   .stradtbl[data-hide~="st-px"]   td[data-col="st-px"]   { display: none; }
.stradtbl[data-hide~="st-chg"]  th[data-col="st-chg"],  .stradtbl[data-hide~="st-chg"]  td[data-col="st-chg"]  { display: none; }
.stradtbl[data-hide~="st-hl"]   th[data-col="st-hl"],   .stradtbl[data-hide~="st-hl"]   td[data-col="st-hl"]   { display: none; }
.stradtbl[data-hide~="st-vwap"] th[data-col="st-vwap"], .stradtbl[data-hide~="st-vwap"] td[data-col="st-vwap"] { display: none; }
.stradtbl[data-hide~="st-ema10"] th[data-col="st-ema10"], .stradtbl[data-hide~="st-ema10"] td[data-col="st-ema10"] { display: none; }
.stradtbl[data-hide~="st-ema20"] th[data-col="st-ema20"], .stradtbl[data-hide~="st-ema20"] td[data-col="st-ema20"] { display: none; }
.stradtbl[data-hide~="st-st"]   th[data-col="st-st"],   .stradtbl[data-hide~="st-st"]   td[data-col="st-st"]   { display: none; }
/* Strangle table extras: strike columns + sg-* (strangle group) */
.stradtbl[data-hide~="ce-strike"] th[data-col="ce-strike"], .stradtbl[data-hide~="ce-strike"] td[data-col="ce-strike"] { display: none; }
.stradtbl[data-hide~="pe-strike"] th[data-col="pe-strike"], .stradtbl[data-hide~="pe-strike"] td[data-col="pe-strike"] { display: none; }
.stradtbl[data-hide~="sg-px"]    th[data-col="sg-px"],    .stradtbl[data-hide~="sg-px"]    td[data-col="sg-px"]    { display: none; }
.stradtbl[data-hide~="sg-chg"]   th[data-col="sg-chg"],   .stradtbl[data-hide~="sg-chg"]   td[data-col="sg-chg"]   { display: none; }
.stradtbl[data-hide~="sg-hl"]    th[data-col="sg-hl"],    .stradtbl[data-hide~="sg-hl"]    td[data-col="sg-hl"]    { display: none; }
.stradtbl[data-hide~="sg-vwap"]  th[data-col="sg-vwap"],  .stradtbl[data-hide~="sg-vwap"]  td[data-col="sg-vwap"]  { display: none; }
.stradtbl[data-hide~="sg-ema10"] th[data-col="sg-ema10"], .stradtbl[data-hide~="sg-ema10"] td[data-col="sg-ema10"] { display: none; }
.stradtbl[data-hide~="sg-ema20"] th[data-col="sg-ema20"], .stradtbl[data-hide~="sg-ema20"] td[data-col="sg-ema20"] { display: none; }
.stradtbl[data-hide~="sg-st"]    th[data-col="sg-st"],    .stradtbl[data-hide~="sg-st"]    td[data-col="sg-st"]    { display: none; }

/* Column picker popover */
.col-picker { position: relative; display: inline-block; }
.col-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px; min-width: 200px;
  display: flex; flex-direction: column; gap: 8px;
}
.col-pop.hidden { display: none; }
.col-pop .col-grp { display: flex; flex-direction: column; gap: 2px; }
.col-pop .col-grp-h { font-size: 10px; font-weight: 700; color: var(--header-text); text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 2px; }
.col-pop .col-item { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.col-pop .col-item:hover { background: var(--panel-2); }
.col-pop .col-item input { accent-color: var(--accent); }
.col-pop .col-actions { display: flex; gap: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.col-pop .col-actions .btn { flex: 1; }

/* Indicator toggle group (chart pages) */
.indicators { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; }
.indicators label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text); cursor: pointer; user-select: none; }
.indicators input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

/* Chart-type selector (icon buttons) */
.seg.chart-type .seg-btn { padding: 4px 8px; font-size: 13px; min-width: 30px; }

/* In-chart symbol search (Straddle/Strangle ATM cards) */
.chart-card.sym-card { position: relative; }
.chart-card.sym-card .sym-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.sym-search { position: relative; }
.sym-search-input {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font: inherit; font-size: 11px; outline: none;
  width: 200px;
}
.sym-search-input:focus { border-color: var(--accent); }
.sym-search-results {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; z-index: 60;
  width: 280px;
}
.sym-search-results.hidden { display: none; }
.sym-search-results .sym-item {
  padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1px; font-size: 11px;
}
.sym-search-results .sym-item:last-child { border-bottom: 0; }
.sym-search-results .sym-item:hover, .sym-search-results .sym-item.active { background: var(--panel-2); }
.sym-search-results .sym-item .sm-name { font-weight: 600; color: var(--text); }
.sym-search-results .sym-item .sm-meta { color: var(--muted); font-size: 10px; }
.sym-search-results .sym-empty { padding: 8px 10px; color: var(--muted); font-size: 11px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--panel-2); border-radius: 6px; padding: 8px 10px; }
.stat .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.stat .val { font-weight: 600; font-size: 14px; margin-top: 2px; }

/* ---------- GEX ---------- */
/* Greek-exposure metric strip. Mirrors the Dashboard's
 * "Net Exposure Summary" widget (`.dn-mc` cards in dashboard-new.css)
 * — same card chrome, label/value sizes, and color tokens — so the GEX
 * page summary reads identically to its dashboard equivalent. */
.gex-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
  padding: 8px 16px 4px;
  align-content: start;
}
.gex-summary .stat {
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  display: flex; flex-direction: column; gap: 1px;
  font-variant-numeric: tabular-nums;
}
.gex-summary .stat .lbl {
  font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.gex-summary .stat .val {
  font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px; line-height: 1.15;
  white-space: nowrap;
}
/* Tonal value colors — match the .dn-mc-v.up / .dn-mc-v.dn / .ce / .pe
 * scheme used by the dashboard's metric cards. */
.gex-summary .stat .val.up    { color: var(--green); }
.gex-summary .stat .val.dn,
.gex-summary .stat .val.down  { color: var(--red); }
.gex-summary .stat .val.pos   { color: var(--green); }
.gex-summary .stat .val.neg   { color: var(--red); }
.gex-summary .stat .val.amber { color: var(--amber); }
.gex-summary .stat .val.ce    { color: #26a69a; }
.gex-summary .stat .val.pe    { color: #ef5350; }

/* ---------- TIME-BASED OI ---------- */
.tboi-toprow { display: flex; align-items: center; gap: 16px; padding-right: 16px; }
.tboi-toprow .tboi-summary { flex: 0 1 auto; }
.tboi-toprow .tboi-playback { margin-left: auto; margin-bottom: 0; flex: 0 0 auto; }
.tboi-summary { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 16px 0; }
.tboi-summary .metric { min-width: 120px; background: var(--panel); }
.tboi-summary .metric .val.pos { color: var(--green); }
.tboi-summary .metric .val.neg { color: var(--red); }
/* Small button used by Reset + the playback transport. */
.btn-sm {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600;
  cursor: pointer; line-height: 1.2;
}
.btn-sm:hover { background: var(--panel-2); border-color: var(--accent); }
/* Help buttons — a compact round "?" icon (tooltip "How to Use") so they
   never crowd / wrap inside busy page-control & hoisted instr-bar rows.
   Accent-tinted outline, fills on hover. */
.oa-help-btn {
  flex: 0 0 auto; align-self: center;
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1; font-size: 13px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--accent);
  background: transparent;
}
.oa-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.tboi-playback { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.tboi-playback .btn-sm { min-width: 30px; padding: 4px 8px; }
.tboi-playback .tboi-play-btn { background: var(--accent); color: #fff; border-color: var(--accent); min-width: 38px; font-size: 13px; }
.tboi-playback .tboi-play-btn:hover { filter: brightness(1.08); }
.tboi-playback #tboi-status { margin-left: 8px; font-size: 12px; }
.tboi-instr-grp { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--border); }
.tboi-instr-grp .tboi-strike-in { width: 86px; }
.tboi-slider-wrap { padding: 10px 18px 4px; }
.tboi-slider-labels { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.tboi-slider-labels b { color: var(--accent); font-weight: 700; }
.tboi-slider { position: relative; height: 28px; }
.tboi-slider::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 3px; background: var(--border); }
.tboi-slider input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.tboi-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%; margin-top: 0;
  background: var(--accent); border: 2px solid var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer;
}
.tboi-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel); cursor: pointer;
}
.tboi-slider input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.tboi-slider input[type=range]::-moz-range-track { background: transparent; height: 28px; }
.tboi-grid { display: grid; grid-template-columns: 1fr 220px; gap: 12px; padding: 8px 16px 0; }
/* Fill the viewport below the controls so there's no dead space under the
   chart. Falls back to a sensible min on short screens. */
.tboi-grid .chart-card { height: calc(100vh - 295px - var(--favbar-h)); min-height: 360px; max-height: none; }
.tboi-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 18px 6px; font-size: 12px; color: var(--text-2); align-items: center; }
.tboi-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.tboi-legend .lg.gap { margin-left: 14px; }
.tboi-legend .sw { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }
/* Bright Put-green / Call-red; Increase = diagonal hatch; Decrease = hollow. */
.tboi-legend .sw-put { background: #3ecf6a; }
.tboi-legend .sw-put-inc { background: repeating-linear-gradient(45deg, #3ecf6a 0 2px, rgba(62,207,106,0.18) 2px 4px); }
.tboi-legend .sw-put-dec { background: transparent; border: 1.5px solid #3ecf6a; }
.tboi-legend .sw-call { background: #ef5350; }
.tboi-legend .sw-call-inc { background: repeating-linear-gradient(45deg, #ef5350 0 2px, rgba(239,83,80,0.18) 2px 4px); }
.tboi-legend .sw-call-dec { background: transparent; border: 1.5px solid #ef5350; }
@media (max-width: 900px) { .tboi-grid { grid-template-columns: 1fr; } .tboi-grid .tboi-side { display: none; } }
/* Split layout — OI profile pane | price-chart pane. */
.tboi-body { display: grid; gap: 12px; }
/* min-width:0 lets the 1fr columns shrink below their content's intrinsic
   width (the lightweight-charts canvas would otherwise force its column wide). */
.tboi-body > div { min-width: 0; }
.tboi-grid > .chart-card { min-width: 0; }
.tboi-body.view-oi { grid-template-columns: 1fr; }
.tboi-body.view-oi .tboi-charts-pane { display: none; }
.tboi-body.view-charts { grid-template-columns: 1fr; }
.tboi-body.view-charts .tboi-oi-pane { display: none; }
.tboi-body.view-split { grid-template-columns: 1fr 1fr; }
/* Keep the Total-OI side chart in split, just a touch narrower. */
.tboi-body.view-split .tboi-grid { grid-template-columns: 1fr 150px; }
.tboi-charts-pane { padding: 8px 16px 0; }
.tboi-body.view-split .tboi-charts-pane { padding-left: 0; }
.tboi-price-card { height: calc(100vh - 295px - var(--favbar-h)); min-height: 360px; max-height: none; }
.tboi-lwc { flex: 1; min-height: 0; width: 100%; position: relative; }
.tboi-chart-head { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.tboi-ind { display: flex; gap: 10px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; }
.tboi-ind label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.tboi-pane-title { position: absolute; top: 4px; left: 8px; z-index: 3; font-size: 11px; font-weight: 700; color: var(--header-text); background: var(--panel); padding: 1px 7px; border-radius: 4px; opacity: 0.92; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
/* Clear divider between the price pane and the OI pane below it. */
.tboi-lwc-oi { border-top: 2px solid var(--border); }
/* Stacked price (top) + OI (bottom) panes inside the price card. */
.tboi-lwc-main { flex: 1 1 72%; }
.tboi-lwc-oi { flex: 0 0 26%; min-height: 80px; border-top: 1px solid var(--border); }
.tboi-price-card.no-oi-pane .tboi-lwc-oi { display: none; }
.tboi-price-card.no-oi-pane .tboi-lwc-main { flex: 1 1 100%; }
/* CE/PE split → equal top/bottom panes (CE over PE). */
.tboi-price-card.cepe-split .tboi-lwc-main { flex: 1 1 50%; }
.tboi-price-card.cepe-split .tboi-lwc-oi { flex: 1 1 50%; }

/* ---------- OPTION MULTIBAGGERS ---------- */
.mbg-alerts { display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 0; }
.mbg-alert { padding: 6px 11px; border-radius: 6px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); animation: mbgFlash 0.6s ease; }
.mbg-alert.up   { background: rgba(34,197,94,0.12);  color: var(--green); border-color: rgba(34,197,94,0.40); }
.mbg-alert.down { background: rgba(239,68,68,0.12);  color: var(--red);   border-color: rgba(239,68,68,0.40); }
@keyframes mbgFlash { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
.mbg-key { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 16px; font-size: 12px; color: var(--text-2); }
.mbg-key b { color: var(--header-text); }
.mbg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 8px 16px 16px; }
.mbg-tcard { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.mbg-tcard h4 { margin: 0 0 6px; font-size: 12px; color: var(--header-text); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.mbg-tablewrap { overflow: auto; max-height: calc(100vh - 290px); }
/* Column selector popover + hide rules (applied to all 4 tables at once). */
.mbg-colsel { position: relative; display: inline-block; }
.mbg-cols-pop { position: absolute; top: 100%; right: 0; z-index: 60; margin-top: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; box-shadow: var(--shadow); white-space: nowrap; }
.mbg-cols-pop[hidden] { display: none; }
.mbg-cols-pop label { font-size: 12px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.mbg-grid.hide-col-5 .mbg-table th:nth-child(5), .mbg-grid.hide-col-5 .mbg-table td:nth-child(5) { display: none; }
.mbg-grid.hide-col-6 .mbg-table th:nth-child(6), .mbg-grid.hide-col-6 .mbg-table td:nth-child(6) { display: none; }
.mbg-grid.hide-col-7 .mbg-table th:nth-child(7), .mbg-grid.hide-col-7 .mbg-table td:nth-child(7) { display: none; }
.mbg-grid.hide-col-8 .mbg-table th:nth-child(8), .mbg-grid.hide-col-8 .mbg-table td:nth-child(8) { display: none; }
.mbg-grid.hide-col-9 .mbg-table th:nth-child(9), .mbg-grid.hide-col-9 .mbg-table td:nth-child(9) { display: none; }
.mbg-grid.hide-col-10 .mbg-table th:nth-child(10), .mbg-grid.hide-col-10 .mbg-table td:nth-child(10) { display: none; }
/* Moneyness cell — keep it tight, left-aligned. */
.mbg-table td.mbg-mnycell { padding-left: 2px; padding-right: 6px; }
.mbg-table .mbg-mny { margin-left: 0; }
@media (max-width: 1100px) { .mbg-grid { grid-template-columns: 1fr; } }
/* The page fills the viewport (minus topbar+tabs+favbar); the 2×2 grid flexes
   to fill whatever's left below the controls/legend — no fixed offset, so the
   bottom gap is gone whether or not favorites are present. */
.page[data-page="multibag"].active { display: flex !important; flex-direction: column; height: calc(100vh - 99px - var(--favbar-h)); overflow: hidden; }
.mbg-grid { flex: 1 1 auto; min-height: 0; }
.mbg-grid4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.mbg-grid4 .mbg-tcard { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mbg-grid4 .mbg-tablewrap { flex: 1 1 auto; min-height: 0; max-height: none; }
.mbg-tcard h4.mbg-ce { color: var(--green); }
.mbg-tcard h4.mbg-pe { color: var(--red); }
/* No blanket row fill (almost every strike is a big gainer here, so tinting
   them all is noise). Severity is conveyed by the colored % cells + badges.
   Only the strongest gainer / biggest drawdown get a thin left accent bar. */
.mbg-table tr.mbg-hot1, .mbg-table tr.mbg-hot2 { background: transparent; }
.mbg-table tr.mbg-hot3 td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.mbg-table tr.mbg-cold td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.mbg-table td.mbg-dhot { font-weight: 800; }
.mbg-btlog-h { font-size: 12px; font-weight: 700; color: var(--header-text); margin: 2px 0 4px; }
.mbg-table td.mbg-at { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); white-space: nowrap; }
/* Moneyness tag (ATM / OTMn / ITMn). */
.mbg-mny { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 4px; margin-left: 5px; vertical-align: middle; letter-spacing: 0.2px; }
/* Theme-independent chips so they stay readable in light / dark / blue. */
.mbg-mny.atm { background: #f59e0b; color: #1a1205; }                 /* bright gold + dark text */
.mbg-mny.otm { background: #7c3aed; color: #fff; }                    /* solid violet + white text */
.mbg-mny.itm { background: #2563eb; color: #fff; }                    /* solid blue + white text */
.mbg-table tr.mbg-rowatm td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.mbg-table tr.mbg-rowatm td:nth-child(2) { font-weight: 800; }
.mbg-table tbody tr[data-token] { cursor: crosshair; }
.mbg-chart-ico { background: none; border: 0; cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; }
.mbg-chart-ico:hover { filter: brightness(1.3); }
/* Hover mini-chart popup. */
.mbg-hov { position: fixed; z-index: 200; width: 372px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; }
.mbg-hov-t { font-size: 12px; font-weight: 700; color: var(--header-text); padding: 2px 4px 4px; }
.mbg-hov-c { width: 360px; height: 200px; }
.mbg-alert small, .mbg-sig small { opacity: 0.8; font-weight: 600; }
.mbg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Never wrap a cell to a second line — if the row is wider than the card, the
   .mbg-tablewrap scrolls horizontally instead. */
.mbg-table th, .mbg-table td { white-space: nowrap; }
.mbg-table th { text-align: left; padding: 6px 10px; color: var(--header-text); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); z-index: 2; font-weight: 700; }
.mbg-table th.num, .mbg-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mbg-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.mbg-table tbody tr:hover { background: var(--row-hover); }
.mbg-table tr.mbg-hot { background: rgba(245,158,11,0.14); }
.mbg-table tr.mbg-hot:hover { background: rgba(245,158,11,0.20); }
.mbg-table .num.pos { color: var(--green); }
.mbg-table .num.neg { color: var(--red); }
.mbg-table .mbg-ce { color: var(--green); font-weight: 700; }
.mbg-table .mbg-pe { color: var(--red); font-weight: 700; }
.mbg-sig { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-right: 3px; border: 1px solid transparent; }
.mbg-sig.up  { background: rgba(34,197,94,0.16);  color: var(--green); border-color: rgba(34,197,94,0.45); }
.mbg-sig.down{ background: rgba(239,68,68,0.16);  color: var(--red);   border-color: rgba(239,68,68,0.45); }
.mbg-sig.oih { background: rgba(59,130,246,0.16); color: #3b82f6; border-color: rgba(59,130,246,0.45); }
.mbg-sig.oil { background: rgba(146,82,11,0.16);  color: var(--amber); border-color: rgba(146,82,11,0.45); }

/* ---------- STOCKS COLUMN FILTERS ---------- */
.stk-filt-wrap { position: relative; display: inline-block; }
.stk-filt-count { color: inherit; font-weight: 700; }   /* follow the button's text colour (white on the primary button) */
.stk-filt-pop { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 4px; min-width: 320px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: var(--shadow); }
.stk-filt-pop[hidden] { display: none; }
.stk-filt-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.stk-filt-row select, .stk-filt-row input { padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; }
.stk-filt-row .stk-f-col { flex: 1 1 auto; min-width: 90px; }
.stk-filt-row .stk-f-op { width: 70px; }
.stk-filt-row .stk-f-v1, .stk-filt-row .stk-f-v2 { width: 70px; }
.stk-filt-row .stk-f-del { width: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--red); font-size: 15px; font-weight: 700; cursor: pointer; line-height: 1.6; }
.stk-filt-row .stk-f-del:hover { border-color: var(--red); }
.stk-filt-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- STRIKE LINK ---------- */
.chain td.strike { cursor: pointer; }
.chain td.strike:hover { background: var(--accent); color: white; }

/* ---------- MODAL ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.modal-body {
  position: relative; width: min(1100px, 92vw); max-height: 90vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 14px; }
.modal-controls { display: flex; align-items: center; gap: 8px; }
.modal-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; overflow: auto; }
.modal-charts .chart-card { min-height: 360px; }
.modal-charts canvas { min-height: 320px; max-height: 420px; }

/* ----- Themed prompt / confirm / alert dialog -----
   Drop-in replacement for the native window.prompt / confirm / alert
   so app code can ask the user for input without the OS-styled banner.
   Promise-based: see Dlg.prompt / Dlg.confirm / Dlg.alert in app.js. */
.dlg-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  animation: dlg-fade-in 0.12s ease-out;
}
@keyframes dlg-fade-in { from { opacity: 0; } to { opacity: 1; } }
.dlg {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  min-width: 360px; max-width: 560px;
  width: min(560px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dlg-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.dlg-head h3 {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text);
}
.dlg-body {
  padding: 14px 18px;
  font-size: 13px; color: var(--text);
}
.dlg-body p {
  margin: 0 0 12px; color: var(--muted); line-height: 1.55;
  white-space: pre-line;
}
.dlg-body p:last-child { margin-bottom: 0; }
.dlg-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font: inherit; font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
/* Optional checkbox row(s) below the text input — used by Auto-gen ± levels
 * for the "Skip middle strike" toggle, and any future promptWith checks. */
.dlg-checks { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dlg-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text); user-select: none; cursor: pointer;
}
.dlg-check input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent);
  cursor: pointer; flex: 0 0 auto;
}
.dlg-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: rgba(0,0,0,0.04);
}
/* Dialog-footer buttons: ensure text is centered. The base .btn uses
   `display: inline-flex; gap: 4px;` without `justify-content`, so with a
   min-width the text would otherwise pin to the left edge. */
.dlg-foot .btn { min-width: 80px; justify-content: center; text-align: center; }
/* Generic danger-coloured button — usable anywhere (dialog footer,
   inline toolbar, page header) for irreversible / destructive actions. */
.btn.danger,
.btn.primary.danger {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  color: #ef4444;
}
.btn.danger:hover { background: rgba(239,68,68,0.18); color: #f87171; }

/* For dialogs that embed StrikePicker (or any popover) — the picker's
   .sp-pop dropdown extends outside the dialog body, so we can't clip. */
.dlg.dlg-allow-overflow { overflow: visible; }
.dlg.dlg-allow-overflow .dlg-body { overflow: visible; }

/* Free CE/PE strangle dialog — one row per pair, inline pickers.
   Rows are background-less / borderless so the embedded StrikePicker
   chips don't sit inside a second visual container. Just rely on row
   spacing for separation. CE / PE labels are colored text only — no
   fill — to match the modal's neutral feel. */
.dlg-free-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dlg-free-row {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0;
}
.dlg-free-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  flex-shrink: 0; min-width: 22px;
}
.dlg-free-lbl.ce { color: var(--green); }
.dlg-free-lbl.pe { color: var(--red); }
.dlg-free-host { flex: 1 1 0; min-width: 0; }
.dlg-free-host .sp,
.dlg-free-host .sp-btn { width: 100%; }
/* Picker button inside the modal — transparent, no grey fill. Border
   only, picks up theme border color. Distinct hover ring keeps it
   discoverable as interactive. */
.dlg-free-host .sp-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
}
.dlg-free-host .sp-btn:hover {
  border-color: var(--accent) !important;
}
.dlg-free-rm {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: 2px 9px; font-size: 14px; line-height: 1;
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
}
.dlg-free-rm:hover { color: var(--red); border-color: var(--red); }
.dlg-free-rm[disabled] { opacity: 0.3; cursor: not-allowed; }
#dlg-free-add-row {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Action buttons in the dialog footer — clean, consistent palette
   shared across every modal:
     Cancel   → neutral outline (always present, escape hatch)
     Replace  → outlined red (destructive but not loud)
     Insert   → filled blue (default safe action — Enter target)
   Applied to BOTH the Free CE/PE row-based modal AND the single-popup
   Auto-gen modals via promptWith. */
.dlg-foot .dlg-cancel,
.dlg-foot .dlg-free-cancel {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  box-shadow: none;
}
.dlg-foot .dlg-cancel:hover,
.dlg-foot .dlg-free-cancel:hover {
  border-color: var(--accent); color: var(--text); filter: none;
}
.dlg-foot .dlg-action.danger,
.dlg-foot .dlg-free-replace {
  background: transparent; border: 1px solid rgba(239,68,68,0.40);
  color: #ef4444; box-shadow: none;
}
.dlg-foot .dlg-action.danger:hover,
.dlg-foot .dlg-free-replace:hover {
  background: rgba(239,68,68,0.10); filter: none;
}
.dlg-foot .dlg-action.primary,
.dlg-foot .dlg-free-insert {
  background: #ffffff;
  /* Explicit blue border (matches the text) — using a hard-coded blue
     so the outline reads consistently on dark / blue / light themes,
     regardless of how --accent shifts per theme. */
  border: 1px solid #2563eb !important;
  color: #2563eb !important;
  box-shadow: none;
}
.dlg-foot .dlg-action.primary:hover,
.dlg-foot .dlg-free-insert:hover {
  background: rgba(37,99,235,0.08);
  border-color: #1d4ed8 !important;
  color: #1d4ed8 !important;
  filter: none;
}

/* Vertical separator between page-header button groups (e.g. between
   the create / clear buttons and the global "apply to all" controls). */
.strangtbl-divider {
  display: inline-block;
  width: 1px; height: 22px;
  background: var(--border);
  margin: 0 4px;
  vertical-align: middle;
}

/* Brief blue glow used to highlight an already-existing strangle row
   when an "add" was suppressed as a duplicate. Visual feedback so the
   user can see WHICH existing table they were about to re-add. */
.strangtbl-flash { animation: strangtbl-flash 1.2s ease-out; }
@keyframes strangtbl-flash {
  0%   { box-shadow: 0 0 0 3px rgba(59,130,246,0.55); }
  60%  { box-shadow: 0 0 0 6px rgba(59,130,246,0.18); }
  100% { box-shadow: 0 0 0 0   rgba(59,130,246,0); }
}

/* ----- Hover chart popup ----- */
.hover-chart {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 360px; height: 220px; padding: 8px 10px 8px;
  display: flex; flex-direction: column; gap: 4px;
  overflow: hidden;        /* hard clip — canvas can never escape the popup */
  opacity: 0.98;
}
/* Tape-cell hover: expand for chart + stats side-by-side. */
.hover-chart.with-stats {
  width: 720px; height: 320px;
}
.hover-chart.hidden { display: none; }
.hover-chart-title { font-size: 11px; font-weight: 700; color: var(--header-text); text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.2; }
/* The body must fill its column-flex parent so the chart canvas inherits
   a real height (Chart.js can't size to a 0-height parent). */
.hover-chart-body { flex: 1 1 auto; min-height: 0; }
.hover-chart-left { min-height: 0; }
/* Canvas wrapped in a relatively-positioned, sized box so Chart.js's
   responsive sizing has something to attach to. */
.hover-chart-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.hover-chart-canvas-wrap canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
}
/* Lightweight-charts candle mount inside the same hover popup. Sits on top
   of the canvas; visibility flipped per chart type. */
.hover-chart-canvas-wrap .hcv-tv {
  position: absolute; inset: 0;
}
.hover-chart-canvas-wrap .hcv-tv.hidden { display: none; }
.hover-chart-canvas-wrap canvas.hidden { display: none; }
/* Backwards-compatible direct-canvas selector for any non-tape callers
   that still place <canvas> directly inside .hover-chart. */
.hover-chart > canvas, .hover-chart-left > canvas {
  flex: 1; min-height: 0; width: 100% !important; height: 100% !important;
}
[data-hover-chart] { cursor: crosshair; }

.status { position: fixed; bottom: 12px; right: 12px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--muted); box-shadow: var(--shadow); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.status.show { opacity: 1; }
.status.err { color: var(--red); border-color: var(--red); }

.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   INTRADAY TAPE — strike × time grid with stripe signals
   Each cell shows the close price; signals are encoded as colored
   stripes / borders on the cell background so the page reads like
   a tape at a glance.
   ════════════════════════════════════════════════════════════════════ */
.tape-wrap { padding: 0 12px 12px; }

/* Tape page secondary row — sits directly under .page-header so the
   selectors stay on top and Show/Refresh/legend (with PPV) get their
   own full-width row. Sticky-pinned just below the page-header so the
   toggles remain reachable while the user scrolls the matrix. */
.tape-secondary-bar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  /* page-header (top:88px, height ≈ 48px) → secondary bar pins right below it */
  top: calc(88px + 48px);
  z-index: 8;
}
.tape-scroll { overflow: auto; max-height: calc(100vh - 180px); border: 1px solid var(--border); border-radius: 8px; }
.tape-table {
  border-collapse: separate; border-spacing: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tape-table thead th {
  background: var(--panel); color: var(--muted);
  font-weight: 700; font-family: var(--font, Inter, sans-serif); font-size: 10px;
  letter-spacing: 0.4px; text-transform: uppercase;
  padding: 4px 5px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
/* Frozen left columns — explicit widths so the side-cell's `left` offset
   exactly matches the strike-cell's width (otherwise the side-cell sits on
   top of the strike-cell content and the data cells leak through). */
.tape-table thead th.th-strike,
.tape-table tbody td.strike-cell {
  position: sticky; left: 0; z-index: 6;
  width: 72px; min-width: 72px; max-width: 72px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tape-table thead th.th-side,
.tape-table tbody td.side-cell {
  position: sticky; left: 72px; z-index: 6;
  width: 36px; min-width: 36px; max-width: 36px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tape-table thead th.th-time { min-width: 38px; text-align: center; }
.tape-table tbody td.strike-cell {
  z-index: 5;          /* slightly below the thead sticky so it doesn't cover it */
  font-weight: 800; color: #2563eb;
  padding: 2px 6px; text-align: center;
  font-family: var(--font, Inter, sans-serif); font-size: 11px;
}
:root[data-theme="dark"] .tape-table tbody td.strike-cell { color: #6ba6ec; }
/* Multi-layer background: tint on top + opaque panel below — keeps the
   sticky cell fully opaque so scrolling data cells don't bleed through. */
.tape-table tbody tr.atm td.strike-cell {
  background:
    linear-gradient(rgba(251,191,36,0.18), rgba(251,191,36,0.18)),
    var(--panel);
  color: #f59e0b;
}
.tape-table tbody tr.atm td.side-cell {
  background:
    linear-gradient(rgba(251,191,36,0.12), rgba(251,191,36,0.12)),
    var(--panel);
}
.tape-table tbody td.side-cell {
  z-index: 5;
  font-weight: 700;
  padding: 1px 6px; text-align: center;
  font-family: var(--font, Inter, sans-serif); font-size: 10px;
}
.tape-table tbody td.side-cell.ce { color: var(--green); }
.tape-table tbody td.side-cell.pe { color: var(--red); }
/* Side-based row tints — CE rows get a light green wash, PE rows a light
   red wash, so the eye instantly knows which side a row belongs to without
   reading the SIDE column. Critically, EXCLUDE both the .strike-cell and
   .side-cell from the tint: those are position:sticky frozen-left columns
   that need a fully opaque background so the time-column data scrolling
   underneath them stays HIDDEN. A 5%-alpha tint on the side-cell would
   let the scrolling data leak through. */
/* CE/PE row tints — only on dark/blue themes. Light theme stays pure
   white across the entire matrix (matching the strike column), per
   user request. The :not([data-theme="light"]) guard on the parent
   :root keeps the tints off light without needing a separate override. */
:root:not([data-theme="light"]) .tape-table tbody tr.row-strike:has(td.side-cell.ce) td:not(.strike-cell):not(.side-cell) {
  background: rgba(34,197,94,0.05);
}
:root:not([data-theme="light"]) .tape-table tbody tr.row-strike:has(td.side-cell.pe) td:not(.strike-cell):not(.side-cell) {
  background: rgba(248,81,73,0.05);
}

/* Tape cells — neutral background (NO fill), stacked stripes encode every
   signal with its own UNIQUE color so you can tell what fired at a glance.
   Layout top → bottom:
     [3px]  s-top  : Price new H = green / new L = red
     [body] LTP    : centered, no background tint
     [2px]  s-vwap : Above = cyan / Below = orange
     [2px]  s-oi   : Hi = blue / Lo = pink
     [2px]  s-cvd  : Hi = lime / Lo = rose
     [2px]  s-ppv  : grey / emerald / dark-red / violet
   Vol spike → yellow inset border (no other indicator uses border).      */
.tape-table tbody td.tc {
  position: relative;
  padding: 9px 6px 18px;       /* taller row + bottom space for 4 stripes incl. taller PPV */
  min-width: 60px; height: 46px;
  text-align: center;
  background: transparent;     /* NO fill — keep cell neutral */
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px; font-weight: 600;
  vertical-align: middle;
  overflow: hidden;
}
.tape-table tbody td.tc .tc-px {
  display: block; line-height: 1.05; padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.tape-table tbody td.tc.empty { color: transparent; cursor: default; }
.tape-table tbody td.tc.empty .tc-px { display: none; }

/* Light theme — force a pure-white background across the entire tape
   surface (every <td> in the matrix + the inline strike-chart panel
   below). The catch-all `td` selector covers every cell type
   regardless of additional classes (.tc, .tc-chg-mode, .empty,
   .vol-spike, .strike-cell, .side-cell, etc) so all three Display
   modes (LTP / Chg / Chg%) render against a uniform white surface.
   `!important` + literal #ffffff (not var(--panel)) guarantees we win
   the cascade against the CE/PE row tints, the `:has()`-scoped tint
   rules, and any theme-variable churn. Dark/blue themes keep their
   own backgrounds untouched. */
:root[data-theme="light"] .tape-table tbody tr td {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
/* THE actual reason cells used to look grey on light theme: every cell
   has a 1px right + bottom border in `--border` (#c8d0dc — a dark
   blue-grey). Multiplied across hundreds of small cells, that grid
   lattice paints a uniform grey haze over the white fill, making the
   matrix look tinted next to the single-column strike pane. Lightening
   the border to near-white (#eef0f4) on light theme keeps the cells
   visually delimited without the haze. */
:root[data-theme="light"] .tape-table tbody tr td.tc,
:root[data-theme="light"] .tape-table tbody tr td.strike-cell,
:root[data-theme="light"] .tape-table tbody tr td.side-cell,
:root[data-theme="light"] .tape-table thead th {
  border-right-color: #eef0f4 !important;
  border-bottom-color: #eef0f4 !important;
}
/* ATM-row inset amber ring — turn off on light theme so ATM cells are
   visually identical white to every other cell. The ⭐ glyph on the
   strike still marks the ATM row. */
:root[data-theme="light"] .tape-table tbody tr.atm td.tc {
  box-shadow: none !important;
}
/* ATM row on light theme — pure white like every other row. The amber
   tint is reserved for dark/blue themes (where it stands out against
   the dark canvas). On light theme the ATM marker is conveyed by the
   ⭐ glyph + the inset box-shadow border on each ATM cell. */
:root[data-theme="light"] .tape-table tbody tr.atm td.strike-cell,
:root[data-theme="light"] .tape-table tbody tr.atm td.side-cell {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
}
:root[data-theme="light"] .tape-strike-charts .tsc-header,
:root[data-theme="light"] .tape-strike-charts .tsc-pane {
  background: #ffffff;
}

/* Row-density variants — toggled via class on #tape-scroll. Medium is
   the default (same as base .tc rule above, just made explicit for
   clarity). Compact shrinks padding + height ~40% so the user can fit
   roughly twice as many strikes on screen, at the cost of stripe area. */
#tape-scroll.tape-dens-compact .tape-table tbody td.tc {
  padding: 3px 5px 10px;
  height: 26px;
  font-size: 11px;
}
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .tc-px {
  line-height: 1.0;
  padding-top: 0;
}
/* Compact mode tightens the stripe stack so it still fits in the smaller
   bottom margin. Each stripe ~1px slimmer than medium. */
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .ss.s-top  { height: 2px; }
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .ss.s-vwap { bottom: 8px; height: 1.5px; }
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .ss.s-oi   { bottom: 6.5px; height: 1.5px; }
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .ss.s-cvd  { bottom: 5px; height: 1.5px; }
/* Compact + delta mode — single-line text, just shrink slightly so the
   row stays at 26px without crowding the stripe stack below. */
#tape-scroll.tape-dens-compact .tape-table tbody td.tc .tc-px.tc-chg {
  font-size: 11px;
}

/* Delta display modes (Chg / Chg%) — single-value cell text, coloured
   by sign so the user can scan momentum. Same width as the LTP cells
   since both delta variants fit comfortably in the base 60-px column. */
.tape-table tbody td.tc.tc-chg-mode {
  min-width: 60px;
}
.tape-table tbody td.tc .tc-px.tc-chg {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.05;
  display: block;
}
/* Direction colour classes — applied to `.tc-px` in every Display mode
   so LTP cells now also turn green/red based on tick direction vs the
   prior bar. Same palette as the Δ display so toggling between modes
   doesn't change the colour semantics. */
.tape-table tbody td.tc .tc-px.pos  { color: var(--pos, #10b981); }
.tape-table tbody td.tc .tc-px.neg  { color: var(--neg, #ef4444); }
.tape-table tbody td.tc .tc-px.flat { color: var(--muted, #94a3b8); }
.tape-table tbody td.tc .tc-px.muted { color: var(--muted, #94a3b8); opacity: 0.6; }

/* Hover lift */
.tape-table tbody td.tc:hover {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  z-index: 2;
}

/* Stripe positioning — absolute children inside .tc */
.tape-table tbody td.tc .ss {
  position: absolute; left: 0; right: 0;
  pointer-events: none;
}
/* Price stripe sits 2px down from the top edge so the cell's top border
   stays visible — otherwise the stripe blurs into the row above and you
   can't tell whether it belongs to the CE row or the PE row.
   Same 2px buffer at the bottom so PPV doesn't touch the next row's border. */
.tape-table tbody td.tc .ss.s-top  { top: 2px;     height: 3px; }
.tape-table tbody td.tc .ss.s-vwap { bottom: 14px; height: 2px; }
.tape-table tbody td.tc .ss.s-oi   { bottom: 12px; height: 2px; }
.tape-table tbody td.tc .ss.s-cvd  { bottom: 10px; height: 2px; }
.tape-table tbody td.tc .ss.s-ppv  { bottom: 2px;  height: 5px; }

/* UNIQUE color per signal — easier to identify at a glance */
.tape-table tbody td.tc .ss.s-top.hi   { background: #22c55e; }   /* P↑ green */
.tape-table tbody td.tc .ss.s-top.lo   { background: #ef4444; }   /* P↓ red */
.tape-table tbody td.tc .ss.s-vwap.up  { background: #06b6d4; }   /* VWAP↑ cyan */
.tape-table tbody td.tc .ss.s-vwap.dn  { background: #f97316; }   /* VWAP↓ orange */
.tape-table tbody td.tc .ss.s-oi.hi    { background: #3b82f6; }   /* OI↑ blue */
.tape-table tbody td.tc .ss.s-oi.lo    { background: #ec4899; }   /* OI↓ pink */
.tape-table tbody td.tc .ss.s-cvd.hi   { background: #84cc16; }   /* CVD↑ lime */
.tape-table tbody td.tc .ss.s-cvd.lo   { background: #f43f5e; }   /* CVD↓ rose */
/* PPV stripe — grey (low volume) hidden per user request; only the
   meaningful states (up-vol, down-vol, true Pocket Pivot) draw. */
.tape-table tbody td.tc .ss.s-ppv.grey  { display: none; }
.tape-table tbody td.tc .ss.s-ppv.green { background: #10b981; }  /* PPV emerald (up-vol) */
.tape-table tbody td.tc .ss.s-ppv.red   { background: #b91c1c; }  /* PPV dark red (down-vol) */
.tape-table tbody td.tc .ss.s-ppv.blue  { background: #8b5cf6; }  /* PPV violet (true Pocket Pivot) */

/* Vol spike: yellow inset border (only signal that uses border) */
.tape-table tbody td.tc.vol-spike {
  box-shadow: inset 0 0 0 2px #eab308;
}

/* Per-stripe show/hide. Each `.no-st-<key>` class on the scroll container
   hides only the matching stripe(s); other stripes remain visible. */
.tape-scroll.no-st-price .tape-table tbody td.tc .ss.s-top  { display: none; }
.tape-scroll.no-st-vwap  .tape-table tbody td.tc .ss.s-vwap { display: none; }
.tape-scroll.no-st-oi    .tape-table tbody td.tc .ss.s-oi   { display: none; }
.tape-scroll.no-st-cvd   .tape-table tbody td.tc .ss.s-cvd  { display: none; }
.tape-scroll.no-st-ppv   .tape-table tbody td.tc .ss.s-ppv  { display: none; }
.tape-scroll.no-st-vol   .tape-table tbody td.tc.vol-spike  { box-shadow: none; }
/* When ALL stripes are off, also tighten the cell padding so the price
   text uses the freed bottom space (otherwise it sits cramped at the top). */
.tape-scroll.no-st-price.no-st-vwap.no-st-oi.no-st-cvd.no-st-ppv.no-st-vol .tape-table tbody td.tc {
  padding: 9px 6px;
}

/* ATM row marker */
.tape-table tbody tr.atm td.tc { box-shadow: inset 0 0 0 1px rgba(251,191,36,0.30); }
.tape-table tbody tr.atm td.tc.vol-spike { box-shadow: inset 0 0 0 2px #eab308; }

/* ── Legend bar with per-stripe checkboxes ─────────────────────────── */
.tape-legend-bar {
  display: inline-flex; align-items: center; gap: 4px 10px;
  /* Stay on one line and never shrink. Combined with the
     #tape-status truncation rule below, this keeps the controls row
     at a stable height — no more up/down jitter from the status text
     toggling between "Loading…" and the full status string. */
  flex-wrap: nowrap;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Force the tape controls row to a single line — keeps the row at a
   fixed height across refreshes. (The #tape-status element used to
   live here and changed width on every load; it's been removed.) */
section[data-page="tape"] .page-controls {
  flex-wrap: nowrap;
}
.tape-legend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--muted);
  cursor: pointer; user-select: none;
  padding: 2px 4px; border-radius: 4px;
  transition: background-color 0.12s;
}
.tape-legend:hover { background: var(--panel-2); }
.tape-legend input[type="checkbox"] {
  margin: 0 2px 0 0; accent-color: var(--accent);
  width: 12px; height: 12px; cursor: pointer; flex: 0 0 auto;
}
.tape-legend:has(input:not(:checked)) { opacity: 0.45; }
.tape-legend .lg {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
  flex: 0 0 10px;
}
.tape-legend .lg-vwap-up  { background: #06b6d4; }
.tape-legend .lg-vwap-dn  { background: #f97316; }
.tape-legend .lg-newhi    { background: #22c55e; }
.tape-legend .lg-newlo    { background: #ef4444; }
.tape-legend .lg-oi-hi    { background: #3b82f6; }
.tape-legend .lg-oi-lo    { background: #ec4899; }
.tape-legend .lg-cvd-hi   { background: #84cc16; }
.tape-legend .lg-cvd-lo   { background: #f43f5e; }
.tape-legend .lg-vol      { background: #eab308; }
.tape-legend .lg-ppv-grey { background: #94a3b8; }
.tape-legend .lg-ppv-grn  { background: #10b981; }
.tape-legend .lg-ppv-red  { background: #b91c1c; }
.tape-legend .lg-ppv-blue { background: #8b5cf6; }

/* ── Inline CE/PE chart panel under the tape grid ──────────────────── */
.tape-strike-charts {
  margin-top: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tape-strike-charts.hidden { display: none; }
.tape-strike-charts .tsc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.tape-strike-charts .tsc-title { font-weight: 700; font-size: 12px; color: var(--text); }
.tape-strike-charts .tsc-body  {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 10px 12px;
}
.tape-strike-charts .tsc-pane  {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px; height: 440px;             /* explicit height — chart libs need it */
  display: flex; flex-direction: column;
  overflow: hidden;                         /* hard clip if canvas misbehaves */
}
.tape-strike-charts .tsc-pane-title { font-size: 11px; font-weight: 700; color: var(--muted);
  letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; }
/* Wrap each canvas in a relatively-positioned, sized box so Chart.js's
   responsive resize doesn't snowball on every render. */
.tape-strike-charts .tsc-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.tape-strike-charts .tsc-canvas-wrap canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
}
/* lightweight-charts mounts to a plain div — needs a sized parent. */
.tape-strike-charts .tsc-tv-wrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
.tape-strike-charts .tsc-tv      { position: absolute; inset: 0; }
.tape-strike-charts .tsc-header { gap: 8px; }
.tape-strike-charts .tsc-ind {
  margin-left: auto; margin-right: 8px;
  display: inline-flex; gap: 10px; font-size: 11px;
}
.tape-strike-charts .tsc-ind label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); cursor: pointer; user-select: none;
}
.tape-strike-charts .tsc-ind input { accent-color: var(--accent); }
@media (max-width: 1024px) {
  .tape-strike-charts .tsc-body { grid-template-columns: 1fr; }
}

/* ── Hover-chart config popover (in topbar) ──────────────────────── */
.hcfg-wrap { position: relative; display: inline-block; }
.hcfg-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  padding: 8px 10px; min-width: 240px;
  display: flex; flex-direction: column; gap: 6px;
}
.hcfg-pop.hidden { display: none; }
.hcfg-pop .hcfg-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.hcfg-pop .hcfg-lbl {
  flex: 0 0 56px; color: var(--muted);
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
}
.hcfg-pop .seg { background: var(--panel-2); }

/* Gear "Settings" popover — now hosts Theme / Chart Engine / CE-PE Colors /
   Display toggles + the chart hover settings, organized into sections. */
.hcfg-pop { min-width: 286px; max-height: 78vh; overflow-y: auto; gap: 0; }
.hcfg-pop .profile-sec { margin: 0; padding: 10px 0 12px; border-top: 1px solid var(--border); }
.hcfg-pop > .profile-sec:first-of-type { padding-top: 2px; border-top: 0; }
.hcfg-pop .profile-sec-hd { margin-bottom: 8px; }
.hcfg-pop .hcfg-chart-sec .hcfg-row { margin-bottom: 7px; }
.hcfg-pop .hcfg-chart-sec .hcfg-row:last-child { margin-bottom: 0; }
.hcfg-cbrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 2px; font-size: 12px; color: var(--text); cursor: pointer; }
.hcfg-cbrow input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ── Hover popup with chart on left + stats on right ──────────────── */
.hover-chart-body { display: flex; gap: 12px; align-items: stretch; }
.hover-chart-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 180px; }
.hover-chart-stats {
  flex: 0 0 220px; display: flex; flex-direction: column; gap: 6px;
  padding: 6px 4px 6px 10px;
  border-left: 1px solid var(--border);
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.hover-chart-stats.hidden { display: none; }
.hover-chart-stats .stat-row { display: flex; align-items: baseline; gap: 6px; line-height: 1.3; }
.hover-chart-stats .stat-row .stat-label { color: var(--muted); font-size: 10px;
  letter-spacing: 0.4px; text-transform: uppercase; min-width: 56px; }
.hover-chart-stats .stat-row .stat-val   { font-weight: 700; color: var(--text); }
.hover-chart-stats .stat-row .stat-pill  {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
}
/* Pill colors — match the cell stripe palette */
.stat-pill.p-up    { background: rgba(34,197,94,0.18); color: #16a34a; }
.stat-pill.p-dn    { background: rgba(239,68,68,0.18); color: #dc2626; }
.stat-pill.vwap-up { background: rgba(6,182,212,0.18); color: #0891b2; }
.stat-pill.vwap-dn { background: rgba(249,115,22,0.18); color: #c2410c; }
.stat-pill.oi-hi   { background: rgba(59,130,246,0.18); color: #2563eb; }
.stat-pill.oi-lo   { background: rgba(236,72,153,0.18); color: #be185d; }
.stat-pill.cvd-hi  { background: rgba(132,204,22,0.18); color: #4d7c0f; }
.stat-pill.cvd-lo  { background: rgba(244,63,94,0.18); color: #be123c; }
.stat-pill.vol     { background: rgba(234,179,8,0.20);  color: #a16207; }
.stat-pill.ppv-grey  { background: rgba(148,163,184,0.18); color: #475569; }
.stat-pill.ppv-green { background: rgba(16,185,129,0.18); color: #047857; }
.stat-pill.ppv-red   { background: rgba(185,28,28,0.18);  color: #991b1b; }
.stat-pill.ppv-blue  { background: rgba(139,92,246,0.18); color: #6d28d9; }
.stat-pill.muted     { background: rgba(148,163,184,0.12); color: var(--muted); }
:root[data-theme="dark"] .stat-pill.p-up    { color: #4ade80; }
:root[data-theme="dark"] .stat-pill.p-dn    { color: #f87171; }
:root[data-theme="dark"] .stat-pill.vwap-up { color: #67e8f9; }
:root[data-theme="dark"] .stat-pill.vwap-dn { color: #fdba74; }
:root[data-theme="dark"] .stat-pill.oi-hi   { color: #93c5fd; }
:root[data-theme="dark"] .stat-pill.oi-lo   { color: #f9a8d4; }
:root[data-theme="dark"] .stat-pill.cvd-hi  { color: #bef264; }
:root[data-theme="dark"] .stat-pill.cvd-lo  { color: #fda4af; }
:root[data-theme="dark"] .stat-pill.vol     { color: #fde047; }
:root[data-theme="dark"] .stat-pill.ppv-grey  { color: #cbd5e1; }
:root[data-theme="dark"] .stat-pill.ppv-green { color: #6ee7b7; }
:root[data-theme="dark"] .stat-pill.ppv-red   { color: #fca5a5; }
:root[data-theme="dark"] .stat-pill.ppv-blue  { color: #c4b5fd; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet (≤1024) → mobile (≤768) → small mobile (≤480)
   ════════════════════════════════════════════════════════════════════ */

/* Tablet — wrap topbar pieces, slim padding, tabs scrollable */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; padding: 8px 10px; gap: 8px; }
  .search-wrap { flex: 1 1 200px; min-width: 160px; }
  .tabs { padding: 0 8px; overflow: visible; }
  .tab { padding: 9px 12px; font-size: 12px; flex: 0 0 auto; white-space: nowrap; }
  .tabs-meta { display: none; }
  .stocks-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stocks-table { font-size: 11.5px; min-width: 900px; }
  .stocks-table thead th, .stocks-table tbody td { padding: 5px 8px; }
}

/* Mobile — topbar wraps to multiple rows, smaller controls */
@media (max-width: 768px) {
  .topbar { padding: 6px 8px; }
  .brand { font-size: 14px; }
  .brand .logo-img { width: 24px; height: 24px; }
  .search-wrap { flex: 1 1 100%; order: 5; }
  .select.sm { padding: 4px 6px; font-size: 11px; }
  .seg-btn { padding: 5px 8px; font-size: 12px; }
  .btn, .btn.sm { padding: 6px 10px; font-size: 12px; }
  .tabs { top: auto; position: static; }
  .tab { padding: 8px 10px; font-size: 11.5px; }
  /* Generic page header sticky offset reset */
  .page-header { flex-wrap: wrap; gap: 6px !important; padding: 8px !important; }
  .page-header > * { flex-shrink: 1; }
  /* Stocks table — collapse less-essential columns */
  .stocks-table { font-size: 11px; }
  .stocks-table thead th, .stocks-table tbody td { padding: 4px 6px; }
  /* Hide low-priority columns on small screens — Lot, Future (still visible via horizontal scroll) */
  .stocks-table thead th:nth-child(15),
  .stocks-table tbody td:nth-child(15) { display: none; } /* Lot */
}

/* Small mobile (phone portrait) */
@media (max-width: 480px) {
  .topbar { padding: 6px; gap: 6px; }
  .brand .logo-text { display: none; }   /* show only logo image to save room */
  .tabs { padding: 0 4px; }
  .tab { padding: 7px 8px; font-size: 11px; }
  .stocks-table { font-size: 10.5px; min-width: 760px; }
  .stocks-table thead th, .stocks-table tbody td { padding: 3px 5px; }
  /* Status line wraps to its own row */
  #stocks-status { flex: 1 1 100%; font-size: 11px; padding: 4px 0; }
}

/* =========================================================
   STRADDLE / STRANGLE TABLE — chart view (per-strike grid)
   ========================================================= */
.stradtbl-chartview { padding: 0 12px 16px; }
.stradtbl-chartview.hidden { display: none; }
.ctv-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Slim toolbar variant for chart view — only the height slider remains;
   chart-type + indicators have been promoted to the page-header row. */
.ctv-toolbar-slim { padding: 6px 10px; margin-bottom: 8px; }
.ctv-toolbar .bb-toggle { font-size: 11.5px; }

/* In-page-controls chart-view extras (chart type seg + indicator toggles).
   Hidden unless the Straddle Table is in chart view. */
.stradtbl-chart-ctrl {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.stradtbl-chart-ctrl .bb-toggle { font-size: 11.5px; }
.stradtbl-chart-ctrl .ctrl-divider {
  display: inline-block; width: 1px; height: 18px;
  background: var(--border); margin: 0 2px;
}
section[data-page="stradtbl"]:not([data-stradview="chart"]) .stradtbl-chart-ctrl {
  display: none !important;
}
.ctv-grid {
  display: grid;
  /* Row-head widened from 80px → 92px so "23,750 ATM" fits cleanly on
   * one line with the ATM badge. Otherwise the badge wraps below the
   * strike on narrow viewports. */
  grid-template-columns: 92px 1fr 1fr 1fr;
  gap: 6px 8px;
}
.ctv-row-head {
  font-weight: 600; font-size: 12px; color: var(--accent);
  background: var(--row-atm);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
}
/* Cell height is controlled by --ctv-cell-h CSS variable so the toolbar
   slider can resize all cells live. Default 240px gives roughly 3× the
   old 130px, comfortable for full-day intraday inspection. */
.ctv-grid { --ctv-cell-h: 240px; }
.ctv-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex; flex-direction: column;
  min-height: var(--ctv-cell-h);
  position: relative;
}
.ctv-cell-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; color: var(--muted);
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 2px;
}
.ctv-cell-head .ctv-px {
  font-weight: 700; font-size: 12px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ctv-cell-head .ctv-px.pos { color: var(--green); }
.ctv-cell-head .ctv-px.neg { color: var(--red); }
.ctv-cell-canvas { position: relative; flex: 1 1 auto; min-height: calc(var(--ctv-cell-h, 240px) - 30px); }
/* Height-slider control inside .ctv-toolbar */
.ctv-height-ctrl {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; /* push to right end of toolbar */
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.ctv-height-slider {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px; border-radius: 2px;
  background: var(--border); outline: none; cursor: pointer;
}
.ctv-height-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--accent);
}
.ctv-height-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--panel);
}
.ctv-height-val {
  font-variant-numeric: tabular-nums; min-width: 40px; text-align: right;
}
.ctv-cell-canvas canvas { width: 100% !important; height: 100% !important; }
.ctv-headers {
  display: contents;
}
.ctv-headers .ctv-cellh {
  font-weight: 600; font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px;
  text-align: center;
}
.ctv-headers .ctv-cellh.ce  { color: var(--accent); }
.ctv-headers .ctv-cellh.pe  { color: var(--amber); }
.ctv-headers .ctv-cellh.sum { color: var(--green); }

/* ATM-strike row highlight inside Straddle/Strangle Table chart grid.
   The ATM row + its three cells get a tinted background, an accent
   left edge, and a softly highlighted ring around every cell — so the
   ATM strike pops at a glance from a wall of look-alike charts. */
.ctv-row-head.ctv-atm {
  background: rgba(122,162,255,0.22);
  color: var(--accent);
  font-weight: 700;
  border: 1px solid rgba(122,162,255,0.55);
  border-left: 3px solid var(--accent);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  text-align: center;
}
.ctv-row-head.ctv-atm .ctv-atm-tag {
  display: inline-block;
  background: var(--accent);
  color: #0c0d0f;
  font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  margin: 0;
  letter-spacing: 0.6px;
  line-height: 1.1;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.ctv-cell.ctv-atm {
  /* No background fill inside the chart cells — just a thin outline marks the
     ATM row. The strike-column header keeps its highlight (.ctv-row-head.ctv-atm). */
  box-shadow: inset 0 0 0 1.5px rgba(122,162,255,0.45);
}
.ctv-cell.ctv-atm .ctv-cell-head {
  color: var(--accent);
  border-bottom-color: rgba(122,162,255,0.35);
}
[data-theme="light"] .ctv-row-head.ctv-atm {
  background: rgba(37,99,235,0.14);
  border-color: rgba(37,99,235,0.45);
}
[data-theme="light"] .ctv-cell.ctv-atm {
  box-shadow: inset 0 0 0 1.5px rgba(37,99,235,0.35);
}

/* Chart-type segmented buttons inline (use existing .seg / .seg-btn).
   Just make sure the SVG icons inherit color. */
#stradtbl-ctype .seg-btn svg, .strangtbl-ctype .seg-btn svg { display: block; }
#stradtbl-ctype .seg-btn.active, .strangtbl-ctype .seg-btn.active { color: #fff; }

/* Make any sticky page-header relax on mobile so content isn't clipped */
@media (max-width: 768px) {
  .page-header[style*="sticky"], .page-header { position: static !important; }
}

/* =========================================================
   STRATEGY BUILDER
   ========================================================= */
.builder-layout {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 12px;
  padding: 0 12px 12px;
  align-items: start;
}
.builder-bottom {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 12px;
  padding: 0 12px 16px;
}
.bcard-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-link {
  background: transparent; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font: inherit; font-size: 11.5px;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }
.btn.xs { padding: 2px 7px; font-size: 11px; line-height: 1; min-width: 22px; }
.builder-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.builder-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.builder-card-head {
  display: flex; align-items: center;
  font-weight: 600; font-size: 12px;
  color: var(--header-text);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* --- Legs table --- */
.builder-legs-scroll { overflow-x: auto; }   /* safety-net for narrow viewports */
.builder-legs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
.builder-legs thead th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.builder-legs tbody td {
  padding: 5px 4px;
  border-bottom: 1px dashed var(--border);
  vertical-align: middle;
}
.builder-legs thead th { padding: 3px 4px; }
.builder-legs tbody tr:last-child td { border-bottom: 0; }
.builder-legs select, .builder-legs input {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 6px;
  font: inherit;
  outline: none;
}
.builder-legs select:focus, .builder-legs input:focus { border-color: var(--accent); }
/* Hide number-input spinners — they eat ~18px of visible space */
.builder-legs input[type="number"]::-webkit-outer-spin-button,
.builder-legs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.builder-legs input[type="number"] { -moz-appearance: textfield; }
/* Use fixed table layout so column widths are strictly honoured */
.builder-legs { table-layout: fixed; }
/* Explicit column widths on th (fixed layout reads from first row) */
.builder-legs th:nth-child(1) { width: 58px; }   /* B/S */
.builder-legs th:nth-child(2) { width: 104px; }  /* Expiry */
.builder-legs th:nth-child(3) { width: 84px; }   /* Strike */
.builder-legs th:nth-child(4) { width: 50px; }   /* Type */
.builder-legs th:nth-child(5) { width: 46px; }   /* Lots */
.builder-legs th:nth-child(6) { width: 96px; }   /* Price — "XXX.XX" needs ~96px */
.builder-legs th:nth-child(7) { width: 20px; }   /* Remove */
/* Form control widths — match their column */
.builder-legs input[type="number"] { width: 100%; text-align: right; box-sizing: border-box; }
.builder-legs .leg-price  { width: 100%; }
.builder-legs .leg-expiry { width: 100%; }
.builder-legs .leg-type   { width: 100%; }
.builder-legs .leg-bs     { width: 100%; font-weight: 700; }
.builder-legs .leg-bs.B   { color: var(--green); }
.builder-legs .leg-bs.S   { color: var(--red); }
/* Custom strike picker */
.leg-strike-pick { width: 100%; }
.lsp-btn {
  width: 100%; text-align: left; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 12px; padding: 3px 6px;
  cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.lsp-btn:focus { outline: none; border-color: var(--accent); }
.lsp-drop {
  position: fixed; min-width: 140px; max-height: 230px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 600; display: none;
}
.lsp-drop.open { display: block; }
.lsp-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
  color: var(--text);
}
.lsp-item:hover { background: var(--hover, rgba(255,255,255,0.06)); }
.lsp-item.atm { background: rgba(59,130,246,0.12); font-weight: 600; }
.lsp-item.atm:hover { background: rgba(59,130,246,0.2); }
.lsp-tag { font-size: 10px; color: var(--muted); margin-left: 8px; }
.lsp-item.atm .lsp-tag { color: #60a5fa; font-weight: 700; }
.builder-legs .leg-rm {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 2px 2px; font-size: 12px; line-height: 1;
  width: 18px; min-width: 18px;
}
.builder-legs td:last-child { width: 18px; padding: 0 2px; }
.builder-legs .leg-rm:hover { color: var(--red); }
.builder-empty {
  padding: 14px 6px; text-align: center; font-style: italic;
  color: var(--muted);
}
.builder-empty.hidden { display: none; }

/* --- Template tabs/grid --- */
.builder-template-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.tpl-tab {
  background: transparent; border: 0;
  padding: 6px 12px; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tpl-tab:hover { color: var(--text); }
.tpl-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.builder-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.tpl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 6px 8px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.08s, box-shadow 0.12s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.tpl-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.tpl-card .tpl-thumb {
  width: 100%; aspect-ratio: 16 / 10;
  background: var(--panel-2);
  border-radius: 4px;
  display: block;
}
.tpl-card .tpl-thumb svg { display: block; width: 100%; height: 100%; }
.tpl-card .tpl-name {
  font-weight: 600; font-size: 11.5px; color: var(--text);
  line-height: 1.15;
}
.tpl-card .tpl-sub  {
  font-size: 10px; color: var(--muted);
  display: none;  /* hide subtitle by default to mirror sensibull tile look */
}
.tpl-card:hover .tpl-sub { display: block; }

/* --- Stats tiles --- */
.builder-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.bstat {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.bstat-lbl {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  white-space: nowrap;
}
.bstat-val {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bstat-val.pos { color: var(--green); }
.bstat-val.neg { color: var(--red); }
.bstat-val.muted { color: var(--muted); font-weight: 500; }
.bstat-sub {
  font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bstat-sub.pos { color: var(--green); }
.bstat-sub.neg { color: var(--red); }

/* --- Payoff chart --- */
.builder-chart-card {
  padding: 10px 12px 12px;
}
.builder-chart-wrap {
  position: relative;
  width: 100%;
  height: 480px;
}
.builder-chart-wrap canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 1100px) {
  .builder-layout { flex-direction: column; height: auto; }
  .builder-left { width: 100%; overflow-y: visible; }
  .builder-bottom { grid-template-columns: 1fr; }
  .builder-stats { grid-template-columns: repeat(2, 1fr); }
  .builder-chart-wrap { min-height: 320px; }
}
@media (max-width: 560px) {
  .builder-stats { grid-template-columns: 1fr; }
  .builder-chart-wrap { min-height: 240px; }
}

/* --- Multiplier row under legs --- */
.builder-multi-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 8px; margin-top: 6px;
  border-top: 1px dashed var(--border);
}
.builder-multi-row label { display: inline-flex; align-items: center; gap: 6px; }
.builder-multi-row #builder-manual-pl { width: 90px; text-align: right; }

/* --- Section tabs (Ready-made / Saved) inside templates card --- */
.builder-section-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: -10px -12px 8px;
  padding: 0 12px;
}
.bsec-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px; font: inherit; font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bsec-tab:hover { color: var(--text); }
.bsec-tab.active {
  color: var(--accent); font-weight: 600;
  border-bottom-color: var(--accent);
}
.bsec-pane.hidden { display: none; }

/* --- Saved Strategies list --- */
.builder-saved-empty { padding: 18px 6px; text-align: center; font-style: italic; }
.builder-saved-empty.hidden { display: none; }
.builder-saved-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 460px; overflow-y: auto;
}
.saved-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.saved-card:hover { border-color: var(--accent); }
.saved-card .sc-name {
  font-weight: 600; font-size: 12.5px; color: var(--text);
}
.saved-card .sc-sub {
  font-size: 10.5px; color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.saved-card .sc-pnl {
  font-size: 14px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.saved-card .sc-pnl.pos { color: var(--green); }
.saved-card .sc-pnl.neg { color: var(--red); }
.saved-card .sc-actions {
  grid-column: 2; display: flex; gap: 4px; align-self: end;
}
.saved-card .sc-act {
  background: transparent; border: 0; padding: 2px 6px;
  font: inherit; font-size: 11px; color: var(--muted); cursor: pointer;
}
.saved-card .sc-act:hover { color: var(--accent); }
.saved-card .sc-act.del:hover { color: var(--red); }

/* --- Expanded stats (left-column version — stays compact) --- */
.builder-stats-wrap { display: flex; flex-direction: column; gap: 6px; }
.builder-stats.funds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
  gap: 10px;
}
.bstat-fhead {
  font-weight: 600; font-size: 12px; color: var(--header-text);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-right: 1px dashed var(--border); padding-right: 10px;
}
.bstat-frow { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.bstat-frow .bstat-lbl { font-size: 11px; }
.bstat-val.sm { font-size: 13px; font-weight: 600; }

/* Breakeven Target/Expiry inline toggle */
.bstat-lbl.be-row { display: flex; justify-content: space-between; align-items: center; }
.be-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.be-tog-btn {
  background: transparent; border: 0; padding: 1px 6px;
  font: inherit; font-size: 9.5px; color: var(--muted); cursor: pointer;
}
.be-tog-btn.active { background: var(--accent); color: #fff; }

/* --- View tabs (Payoff / P&L / Greeks / Strategy) --- */
.builder-view-tabs {
  display: flex; align-items: center; gap: 0;
  border-bottom: 1px solid var(--border);
  margin: -10px -12px 8px;
  padding: 0 12px;
}
.bview-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 14px; font: inherit; font-size: 12px;
  color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bview-tab:hover { color: var(--text); }
.bview-tab.active {
  color: var(--accent); font-weight: 600;
  border-bottom-color: var(--accent);
}
.bview-spacer { flex: 1; }
.bview-legend { display: inline-flex; gap: 12px; font-size: 11px; color: var(--muted); }
.bv-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.bv-leg-item i {
  display: inline-block; width: 14px; height: 0; border-top: 2px solid;
}
.bv-leg-item.exp i { color: var(--green); border-top-style: solid; }
.bv-leg-item.tgt i { color: var(--accent); border-top-style: dashed; }
.bview-pane.hidden { display: none; }

/* Strategy Chart inline tab */
.bsc-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0 6px; flex-wrap: wrap;
}
.bsc-chart { width: 100%; height: 420px; }
.bsc-status.warn  { color: var(--amber); }
.bsc-status.error { color: var(--red); }
.bsc-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
.bsc-ind-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted); cursor: pointer;
  user-select: none;
}
.bsc-ind-lbl:hover { color: var(--text); }
.bsc-ind-dot { width: 8px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.bsc-period {
  width: 40px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: 11px;
  padding: 2px 4px; text-align: center;
  -webkit-appearance: none; -moz-appearance: textfield;
}
.bsc-period::-webkit-outer-spin-button,
.bsc-period::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bsc-period:focus { outline: none; border-color: var(--accent); }
.bsc-time {
  width: 72px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: 11px;
  padding: 2px 4px; text-align: center;
  /* suppress native time-picker chrome on webkit */
  -webkit-appearance: none;
}
.bsc-time:focus { outline: none; border-color: var(--accent); }
/* Zoom seg uses the shared .seg / .seg-btn styles; just constrain the +/− text */
#bsc-zoom-seg .seg-btn { min-width: 22px; padding: 2px 5px; font-size: 13px; line-height: 1; }

.builder-chart-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 6px;
}
.bv-projected {
  margin-left: auto;
  background: var(--green); color: #fff;
  padding: 3px 10px; border-radius: 12px;
  font-weight: 600; font-size: 11px;
  cursor: help;
}
.bv-projected.neg { background: var(--red); }
.bv-projected.muted { background: var(--panel-2); color: var(--muted); }

/* Zoom segmented control on payoff chart */
.bv-zoom {
  display: inline-flex; align-items: center;
  margin-left: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.bz-btn {
  background: transparent; border: 0;
  padding: 4px 10px; font: inherit; font-size: 11px;
  color: var(--muted); cursor: pointer;
  border-right: 1px solid var(--border);
}
.bz-btn:last-child { border-right: 0; }
.bz-btn:hover { color: var(--text); }
.bz-btn.active { background: var(--accent); color: #fff; }

/* --- P&L Table view --- */
.builder-pnltbl-wrap {
  max-height: 360px; overflow-y: auto;
}
.builder-pnltbl, .builder-greeks {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.builder-pnltbl thead th, .builder-greeks thead th {
  text-align: right; padding: 6px 8px;
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky; top: 0;
}
.builder-pnltbl thead th:first-child, .builder-greeks thead th:first-child { text-align: left; }
.builder-pnltbl tbody td, .builder-greeks tbody td {
  padding: 5px 8px; text-align: right;
  border-bottom: 1px dashed var(--border);
}
.builder-pnltbl tbody td:first-child, .builder-greeks tbody td:first-child { text-align: left; font-weight: 600; }
.builder-pnltbl tr.atm td { background: var(--row-atm); }
.builder-pnltbl td.pos { color: var(--green); }
.builder-pnltbl td.neg { color: var(--red); }

/* --- Sliders --- */
.builder-sliders { padding: 10px 14px 12px; }
.bsl-row { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.bsl-row:last-child { border-bottom: 0; }
.bsl-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.bsl-head label { font-weight: 600; color: var(--text); font-size: 11.5px; }
.bsl-ctrls {
  display: grid;
  grid-template-columns: 60px 1fr 90px;
  align-items: center; gap: 10px;
}
.bsl {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--border); border-radius: 4px;
  outline: none; cursor: pointer; width: 100%;
}
.bsl::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  cursor: pointer;
}
.bsl::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel);
  cursor: pointer;
}
.bsl-num {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 6px; font: inherit; font-size: 12px;
  text-align: right; width: 90px; outline: none;
}
.bsl-pct { font-variant-numeric: tabular-nums; min-width: 55px; }

/* --- Bottom row: Strikewise IVs, Greeks, Futures+SD --- */
.bb-iv-offset {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.bb-iv-table, .bb-sd-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.bb-iv-table thead th, .bb-sd-table thead th {
  text-align: left; padding: 5px 6px;
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.bb-iv-table tbody td, .bb-sd-table tbody td {
  padding: 6px 6px; border-bottom: 1px dashed var(--border);
  vertical-align: middle;
}
.bb-iv-table tbody td:first-child, .bb-sd-table tbody td:first-child { font-weight: 600; }
.bb-iv-table input.iv-edit {
  width: 64px; padding: 3px 5px; text-align: right;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  font: inherit; font-size: 12px; outline: none;
}
.bb-iv-table .iv-chg { font-size: 11px; }
.bb-iv-table .iv-chg.pos { color: var(--green); }
.bb-iv-table .iv-chg.neg { color: var(--red); }

.bb-greek-toggles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bb-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text); cursor: pointer;
}
.bb-toggle input { accent-color: var(--accent); }
.bb-greek-grid { display: flex; flex-direction: column; gap: 6px; }
.bb-grow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.bb-grow:last-child { border-bottom: 0; }
.bb-grow span:first-child { color: var(--muted); }
.bb-grow span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

.bb-fut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.bb-fut-px { font-weight: 700; color: var(--accent); }

/* =================================================================
   GLOBAL MOBILE / RESPONSIVE — tightening so the SPA is usable on
   phones and tablets. Most of the desktop layout assumes ≥ 1280 px;
   below we adjust at 1100 / 768 / 480 / 360 px breakpoints.
   ================================================================= */

/* Nav is inside topbar — no extra overflow rules needed here. */
.tabs .tab { white-space: nowrap; }
.tabs .tabs-meta { white-space: nowrap; flex-shrink: 0; }

/* Tablet (≤ 1100 px) — collapse the right-side widget grid on chain
   page, tighten paddings, and drop the sticky page-header offset so
   tabs + page-header don't eat half the viewport on landscape phones. */
@media (max-width: 1100px) {
  .chain-stats { grid-template-columns: 1fr 1fr; }
  .metrics { padding: 10px 12px; gap: 8px; }
  .metrics .metric { padding: 6px 10px; }
  .metric .val { font-size: 14px; }
  .page-header { top: 88px; }   /* topbar (44) + instr-bar (44) */
}

/* Phone landscape / small tablet (≤ 768 px) */
@media (max-width: 768px) {
  /* Topbar controls become a wrapping row instead of single line */
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .title-right { flex-wrap: wrap; gap: 6px; }
  /* Page header sticks compactly */
  .page-header {
    flex-wrap: wrap;
    padding: 8px 10px;
    top: 88px;            /* topbar + instr-bar */
  }
  .page-header h2 { width: 100%; }
  .page-controls { gap: 8px; row-gap: 6px; }
  /* Metric tiles squeeze tighter */
  .metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 8px 10px; gap: 6px; }
  .metric .lbl { font-size: 10px; }
  .metric .val { font-size: 13px; }
  .metric .sub { font-size: 10px; }
  /* Chain table — keep the 19 columns readable but force horizontal
     scroll instead of squishing them off the screen. */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chain { min-width: 1100px; font-size: 11.5px; }
  .chain th, .chain td { padding: 4px 6px; }
  /* Sentiment / insights / walls / oi-walls drop to single column */
  .side { grid-template-columns: 1fr; }
  /* Strategy builder — leg table needs horizontal scroll since columns
     are too dense for phones. Container handles overflow. */
  .builder-legs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Stocks page expand-row mini-chain — also scrolls */
  .mini-chain-scroll { overflow-x: auto; }
  /* Setups page — tighten card widths so 2-up still fits at 768 px */
  .setups-cards { grid-template-columns: 1fr; gap: 8px; }
  .setup-card-v2 { min-height: auto; }
  .setups-sym-tabs { flex-wrap: wrap; }
  /* Charts grid — already drops to 1 col at ≤ 1100 px; ensure cards
     don't get crushed below 240 px height. */
  .chart-card.tv-card { min-height: 280px; }
  /* Tape table — horizontal scroll at small widths */
  .tape-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Phone portrait (≤ 480 px) — stack everything aggressively. Most
   tables stay scrollable but their headers pin via existing sticky
   rules. */
@media (max-width: 480px) {
  .seg-btn { padding: 4px 8px; font-size: 11px; }
  .tabs { top: auto; }    /* let tabs scroll out of view on small screens */
  .tab { padding: 8px 10px; font-size: 11.5px; }
  .page-header { top: auto; position: static; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  /* Hide the second row of less-essential metrics; keep Spot, Future,
     ATM, PCR. The chain itself still has the rest. */
  .chain-stats { grid-template-columns: 1fr; }
  /* Setups card pills wrap on tiny screens */
  .setups-chips { flex-wrap: wrap; }
  .setup-card-v2 .card-line { margin-bottom: 22px; }
  /* Smaller hover popups so they don't overflow the viewport */
  .setup-hover-card,
  .stock-hover-card { width: calc(100vw - 16px); max-width: 360px; }
  .setup-hover-card .hover-chart-wrap,
  .stock-hover-card .hover-chart-wrap { height: 140px; }
  /* Greeks exposure — bar charts each get a min height */
  .gex-grid { grid-template-columns: 1fr; }
  /* Composite — same */
  .composite-grid { grid-template-columns: 1fr; }
  /* Open Interest — same */
  .oi-grid { grid-template-columns: 1fr; }
}

/* Very small (≤ 360 px) — compact further so iPhone SE / older Androids
   still get a usable layout. */
@media (max-width: 360px) {
  .topbar { gap: 4px; }
  .tab { padding: 7px 8px; font-size: 11px; }
  .metrics { grid-template-columns: 1fr; }
  .metric .val { font-size: 12.5px; }
  .chain { font-size: 11px; }
  .chain th, .chain td { padding: 3px 4px; }
}

/* Touch-target hint: any clickable thing should be ≥ 32 px tall on
   touch devices (Apple HIG / Material recommend 44 px). Bump small
   buttons to keep the page tappable. */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn.sm, .seg-btn, .tab, .setups-chip, .setups-sym-tab, .overlay-btn {
    min-height: 32px;
  }
  /* Disable hover-only effects (the hover-chart popup trigger) on
     touch — replace with click-to-open pattern in app.js if desired. */
}

/* ── Straddle Table — Grid view (straddle-only mosaic) ─────────────
   Compact CSS-Grid layout of straddle (CE+PE sum) charts, one cell per
   strike. Column count and cell height are user-tunable via the
   --sg-cols and --sg-cell-h CSS variables wired to toolbar controls. */
.stradtbl-gridview {
  display: flex; flex-direction: column;
}
.stradtbl-grid {
  --sg-cols: 4;
  --sg-cell-h: 200px;
  display: grid;
  grid-template-columns: repeat(var(--sg-cols), 1fr);
  gap: 6px;
}
.sg-cell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex; flex-direction: column;
  min-height: var(--sg-cell-h);
}
.sg-cell.sg-atm {
  background: rgba(122,162,255,0.08);
  border-color: rgba(122,162,255,0.45);
  box-shadow: 0 0 0 1px rgba(122,162,255,0.25);
}
.sg-cell-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; padding-bottom: 2px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 2px;
}
.sg-strike {
  font-weight: 700; color: var(--header-text);
  font-variant-numeric: tabular-nums; font-size: 12px;
}
/* When the cell is the ATM strike, brighten the strike value too so the
   "ATM 24200" combo reads as a single accent-coloured pair. */
.sg-cell.sg-atm .sg-strike { color: var(--accent); }
.sg-atm-tag {
  display: inline-block;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
  margin-left: 6px; letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
}
.sg-cell-canvas {
  position: relative; flex: 1 1 auto;
  min-height: calc(var(--sg-cell-h) - 26px);
}
.sg-cell-canvas canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 1100px) {
  .stradtbl-grid { --sg-cols: min(var(--sg-cols), 4); }
}
@media (max-width: 760px) {
  .stradtbl-grid { --sg-cols: 2 !important; }
}

/* ── F&O Movers page ──────────────────────────────────────────────── */
/* Full-bleed layout — page-header sits flush against the topbar (the
   instr-bar is hidden on this page). The .page section is viewport-
   locked (overflow:hidden, height=viewport-44px) so internal cards
   can stretch + scroll independently.
   IMPORTANT: every `.page[data-page="movers"]` rule must be scoped
   to `.active` so the section doesn't render on TOP of other pages
   (display:flex would otherwise win against `.page { display: none }`). */
body.page-movers { overflow: hidden; margin: 0; padding: 0; }
body.page-movers .instr-bar { display: none !important; }
/* Drop the sticky offset entirely — the .page section is already
   viewport-anchored so sticky semantics buy us nothing AND a
   media-query rule at line ~4321 ("top:88px") was leaking through
   on some viewports, leaving a 44px gap above the header. */
body.page-movers .page-header {
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding: 8px 12px;
}
.page.active[data-page="movers"] {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px - var(--favbar-h));             /* topbar only */
  overflow: hidden;
}

.movers-auto {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); user-select: none;
}
.movers-auto input { accent-color: var(--accent); }

.movers-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px 8px 0;
  /* overflow:hidden was clipping the scope dropdown's popup AND
     preventing the head from wrapping cleanly. Removed. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Head row now wraps cleanly: title stays on the left, controls flow
   to the right and break to a second sub-row when they don't fit. */
.movers-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.movers-card-title {
  font-weight: 600; font-size: 13.5px;
  color: var(--header-text);
  white-space: nowrap;
}
.movers-card-controls {
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
  /* Allow the controls block to occupy a whole row when the title
     pushes them past the available width — avoids the squashed
     overlapping look we had at narrower viewports. */
  min-width: 0;
}
.movers-card-sub {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.movers-more {
  color: var(--accent); font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 2px;
}
.movers-more:hover { text-decoration: underline; }
.movers-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.movers-seg .seg-btn {
  /* High-contrast chip on dark themes — was transparent + muted text
     which collapsed against the dark card-head background. */
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11.5px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* Consolidated F&O Movers page header — title + scope + tabs + refresh
   strip all on one row. Spacer pushes the refresh group to the right. */
.movers-page-header .page-controls {
  flex: 1 1 auto;
  gap: 8px;
  row-gap: 6px;
}
.movers-spacer { flex: 1 1 auto; }
.movers-page-header .movers-more { padding: 0 4px; }
/* The top Market Movers card no longer has a card-head (everything
   moved into page-header) — its table sits directly under the page bar.
   FUTURES scope: capped at ~45vh so the bottom row (Buildup + Stock
   Movers) gets meaningful height. OPTIONS scope: the bottom row is
   hidden, so the top card stretches to fill the entire viewport (no
   wasted black band below the data). Body class `movers-options-scope`
   is toggled in Pages.movers._applyScopeUI(). */
.movers-card-top {
  flex: 0 0 auto;
  max-height: 45vh;
}
.movers-card-top .movers-table-wrap { padding-top: 0; }
body.movers-options-scope .movers-card-top {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
}
.movers-seg .seg-btn:hover {
  color: var(--header-text);
  border-color: var(--accent);
}
.movers-seg .seg-btn.active {
  background: rgba(122,162,255,0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Card 1 — full-width Market Movers table. The wrap takes the card's
   remaining height + scrolls vertically; thead is sticky so the column
   names stay pinned while the body scrolls. */
.movers-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.movers-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.movers-table thead th {
  text-align: right;
  padding: 10px 12px;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--header-text);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* Sticky header — was invisible/scrolled away before, this keeps
     "Name / LTP / Change / …" pinned at the top of the table. */
  position: sticky; top: 0; z-index: 2;
}
.movers-table thead th.movers-name { text-align: left; }
.movers-table tbody td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.movers-table tbody tr:last-child td { border-bottom: none; }
.movers-table tbody tr:hover td { background: var(--panel-2); }
.movers-table tbody td.movers-name {
  text-align: left;
  font-weight: 500;
}
.movers-name .tag-exch {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
/* Option-side tags (CE / PE) — used in the Market Movers > Options
   scope's Side column AND anywhere else the side badge appears. Solid
   colour fill + bold white text so the side is unmissable when
   scanning a long table. The previous design was a subtle tint that
   was easy to miss on dark themes. */
.tag-exch.tag-ce,
.tag-exch.tag-pe {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  color: #ffffff;
  display: inline-block;
  min-width: 32px;
  text-align: center;
}
.tag-exch.tag-ce {
  background: #16a34a;
  border-color: #15803d;
  box-shadow: 0 0 0 1px rgba(22,163,74,0.25);
}
.tag-exch.tag-pe {
  background: #dc2626;
  border-color: #b91c1c;
  box-shadow: 0 0 0 1px rgba(220,38,38,0.25);
}
/* Light-theme uses slightly darker fills for AA contrast on white. */
:root[data-theme="light"] .tag-exch.tag-ce {
  background: #15803d;
  border-color: #166534;
}
:root[data-theme="light"] .tag-exch.tag-pe {
  background: #b91c1c;
  border-color: #991b1b;
}
/* Per-contract metadata under the symbol (expiry + strike). */
.movers-name .opt-symbol { font-weight: 600; }
.movers-name .opt-meta {
  display: inline-block;
  font-size: 11.5px; color: var(--muted);
  margin-left: 6px;
}
/* Expiry shown in its own table cell — slightly muted, tabular nums. */
.opt-meta-cell {
  color: var(--muted);
  font-size: 12px;
}
/* Hover-chart cursor affordance — small underline on hoverable symbol
   cells so users discover the popover. */
.movers-name[data-hover-chart] {
  cursor: pointer;
  text-decoration: none;
}
.movers-name[data-hover-chart]:hover .opt-symbol,
.movers-name[data-hover-chart]:hover {
  text-decoration: underline;
  text-decoration-color: rgba(122, 162, 255, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* Unusual-activity reason chip — was 10px and hard to read on a
   dark background. Bumped to 12px + heavier weight + more padding so
   "OI surge + price spike" actually reads at a glance. */
.movers-name .tag-reason {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  background: rgba(122,162,255,0.16);
  padding: 3px 9px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  letter-spacing: 0.1px;
}
/* Color-by-change cells. The selectors are intentionally scoped
   higher than `.movers-table tbody td { color: var(--text) }` so the
   direction tint wins over the default cell color. Without the table
   prefix the base rule (specificity 0,0,1,2) outranked the bare
   `.movers-cell-pos` (0,0,1,0) and every cell stayed white. */
.movers-cell-pos { color: #16a34a; }
.movers-cell-neg { color: #dc2626; }
.movers-table tbody td.movers-cell-pos { color: #16a34a; }
.movers-table tbody td.movers-cell-neg { color: #dc2626; }
/* Darker green / red on light theme for stronger contrast on white. */
:root[data-theme="light"] .movers-cell-pos                          { color: #15803d; }
:root[data-theme="light"] .movers-cell-neg                          { color: #b91c1c; }
:root[data-theme="light"] .movers-table tbody td.movers-cell-pos    { color: #15803d; }
:root[data-theme="light"] .movers-table tbody td.movers-cell-neg    { color: #b91c1c; }

/* Row 2 — Buildup + Movers side by side. Stretches to fill the
   remaining viewport so we don't leave a big empty band at the bottom
   of the page. Side-padded to match the Market Movers card above. */
.movers-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.movers-row2 .movers-card { margin: 0; }
@media (max-width: 1000px) {
  .movers-row2 { grid-template-columns: 1fr; }
}

/* Per-row mini list (buildup + stock movers). Stretches inside the
   card so the list fills available vertical space, with internal
   scrolling and a sticky column-header row at the top. */
.movers-list-wrap {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  /* Soft slate scrollbar, matches the OptBuildup tables. */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.movers-list-wrap::-webkit-scrollbar,
.movers-table-wrap::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.movers-list-wrap::-webkit-scrollbar-track,
.movers-table-wrap::-webkit-scrollbar-track { background: transparent; }
.movers-list-wrap::-webkit-scrollbar-thumb,
.movers-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.movers-list-wrap::-webkit-scrollbar-thumb:hover,
.movers-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
  background-clip: content-box;
}
.movers-list { display: block; }
/* Compact column-header strip at the top of each list — gives the
   user a stable reference for "Symbol / LTP / Change / Chg%". */
.movers-list-head {
  display: grid;
  grid-template-columns: 28px 1.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--header-text);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.movers-list-head .col-num { text-align: right; }
.movers-list-row {
  display: grid;
  grid-template-columns: 28px 1.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.movers-list-row:last-child { border-bottom: none; }
.movers-list-row:hover { background: var(--panel-2); }
.movers-list-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.movers-list-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.movers-list-cell {
  text-align: right;
  color: var(--text);
  white-space: nowrap;
}
.movers-list-cell.chg  { font-size: 12px; }
.movers-list-cell.pct  { font-size: 12px; }
/* Direction colour for the Buildup / Stock-Movers list cells (LTP, Chg, Chg%).
   Two-class selector to beat `.movers-list-cell { color: var(--text) }`, which
   otherwise wins by source order over the single-class `.movers-cell-pos/neg`. */
.movers-list-cell.movers-cell-pos { color: #16a34a; }
.movers-list-cell.movers-cell-neg { color: #dc2626; }
:root[data-theme="light"] .movers-list-cell.movers-cell-pos { color: #15803d; }
:root[data-theme="light"] .movers-list-cell.movers-cell-neg { color: #b91c1c; }

/* ── Options Buildup page ─────────────────────────────────────────── */
/* Split layout — CE table on the left, PE table on the right.
   ONE shared scroll on the .ob-split container so CE and PE rows stay
   row-aligned: scrolling CE also scrolls PE (and vice versa), making
   side-by-side comparison trivial. Card heads + column headers are
   `position: sticky` relative to that single scroll so they pin to
   the top while the bodies move. */
.ob-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* No top padding — the sticky card-heads need to sit flush against
     the page-header. Any top padding here creates a visible band
     where scrolled rows briefly appear above the sticky card-heads. */
  padding: 0 16px 16px;
  height: calc(100vh - 170px - var(--favbar-h));
  min-height: 360px;
  /* The single scroll container. Card-internal scrolls are disabled
     below so this is the only vertical scroll on the page. */
  overflow-y: auto;
  align-items: start;       /* don't stretch grid items uniformly */
  /* Soft grey scrollbar — was bright/white default. */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.ob-split::-webkit-scrollbar      { width: 10px; height: 10px; }
.ob-split::-webkit-scrollbar-track { background: transparent; }
.ob-split::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.ob-split::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
  background-clip: content-box;
}
.ob-split .movers-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* No fixed height — let each card grow to the height of its rows
     so the shared outer scroll handles overflow. */
}
.ob-split .movers-card .movers-card-head {
  flex: 0 0 auto;
  /* Pin the "CE — Calls" / "PE — Puts" title bars at the top of the
     shared scroll. Each card is in its own grid column so they sit
     side-by-side when stuck. Compact padding + fixed height so the
     thead-sticky position below can sit flush against it (no gap
     for scrolled rows to peek through). */
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
  padding: 6px 12px;
  min-height: 32px;
  /* Solid bottom edge so any 1px subpixel gap to the thead is masked. */
  box-shadow: 0 1px 0 var(--border);
}
.ob-split .movers-card .movers-table-wrap {
  flex: 1 1 auto;
  /* DO NOT scroll independently — the shared .ob-split scroll owns it. */
  overflow: visible;
  min-height: 0;
}
.ob-card-ce .movers-card-title { color: var(--text); }
.ob-card-pe .movers-card-title { color: var(--text); }
.ob-card-ce .movers-card-head { border-left: 3px solid #16a34a; }
.ob-card-pe .movers-card-head { border-left: 3px solid #dc2626; }
/* Sticky column headers — sit IMMEDIATELY below the card-head while
   scrolling. 32px matches the card-head's min-height set above so
   the two sticky strips stack tight with no gap between them. */
.ob-table thead th {
  position: sticky;
  top: 32px;
  z-index: 2;
  background: var(--panel-2);
}
@media (max-width: 1300px) {
  .ob-split {
    grid-template-columns: 1fr;
    height: auto;       /* stack vertically — let each table grow */
  }
}
.ob-table tbody td.movers-name { font-variant-numeric: tabular-nums; }
.ob-table .ob-bu-col { text-align: center; }
.ob-table tbody td.ob-bu-cell { text-align: center; }
.ob-pill {
  display: inline-block;
  font-size: 11.5px; font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}
.ob-pill-LB   { color: #16a34a; border-color: rgba(22,163,74,0.55);  background: rgba(22,163,74,0.15); }
.ob-pill-SB   { color: #dc2626; border-color: rgba(220,38,38,0.55);  background: rgba(220,38,38,0.15); }
/* LU was unreadable in #2563eb on dark/blue themes — switched to a
   brighter sky-blue (Tailwind sky-400) and bumped the fill opacity
   so the chip pops cleanly on every theme. */
.ob-pill-LU   { color: #38bdf8; border-color: rgba(56,189,248,0.65); background: rgba(56,189,248,0.18); }
.ob-pill-SC   { color: #f59e0b; border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.15); }
/* FLAT — bar had no trading activity (same LTP + same OI as prior bar). */
.ob-pill-FLAT { color: var(--muted); border-color: var(--border);    background: transparent; font-style: italic; }
.ob-pill-NA   { color: var(--muted); border-color: var(--border);    background: transparent; }
/* Light-theme overrides — the default amber (SC) and sky-blue (LU)
   text colours wash out against a white background. Darken to amber-
   700 / sky-700 and bump the fill opacity so the chips remain
   legible. LB/SB are already dark enough on white. */
:root[data-theme="light"] .ob-pill-SC {
  color: #b45309;
  border-color: rgba(180,83,9,0.55);
  background: rgba(245,158,11,0.22);
}
:root[data-theme="light"] .ob-pill-LU {
  color: #0369a1;
  border-color: rgba(3,105,161,0.55);
  background: rgba(56,189,248,0.22);
}
:root[data-theme="light"] .ob-pill-LB {
  color: #15803d;
  border-color: rgba(21,128,61,0.55);
  background: rgba(22,163,74,0.18);
}
:root[data-theme="light"] .ob-pill-SB {
  color: #b91c1c;
  border-color: rgba(185,28,28,0.55);
  background: rgba(220,38,38,0.18);
}

/* ── Market Breadth page ──────────────────────────────────────────── */
.breadth-row1 {
  display: grid; grid-template-columns: 280px 1fr; gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 880px) {
  .breadth-row1 { grid-template-columns: 1fr; }
}
.breadth-tiles {
  display: flex; flex-direction: column; gap: 8px;
}
.breadth-tile {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px;
  border-left: 3px solid var(--border);
}
.breadth-tile-pos { border-left-color: #16a34a; }
.breadth-tile-neg { border-left-color: #dc2626; }
.breadth-tile-lbl { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.breadth-tile-val { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--header-text); line-height: 1.1; }
.breadth-tile-val.pos { color: #16a34a; }
.breadth-tile-val.neg { color: #dc2626; }
.breadth-tile-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.breadth-chart-wrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; min-height: 240px;
}
.breadth-chart { width: 100%; height: 240px; }

.breadth-section { margin-bottom: 22px; }
.breadth-section-h {
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
  margin: 0 0 8px; color: var(--header-text);
}
.breadth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.breadth-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 880px) {
  .breadth-2col, .breadth-3col { grid-template-columns: 1fr; }
}
.breadth-col-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; padding: 4px 6px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.breadth-col-head.pos { color: #16a34a; }
.breadth-col-head.neg { color: #dc2626; }
.breadth-col-head.neutral { color: var(--muted); }

.breadth-tbl-scroll {
  max-height: 360px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel);
  /* Slim themed scrollbar — matches the heatmap page's
     .brh-scroll / .brh-side-scroll style. Default browser
     scrollbar was bulky white/grey and clashed with the panel. */
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.35) transparent;
}
.breadth-tbl-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.breadth-tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.breadth-tbl-scroll::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.breadth-tbl-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(148,163,184,0.55);
  background-clip: padding-box;
}
.breadth-tbl-scroll::-webkit-scrollbar-corner { background: transparent; }
/* Light theme — darker thumb for contrast against white panel. */
:root[data-theme="light"] .breadth-tbl-scroll {
  scrollbar-color: rgba(71,85,105,0.35) transparent;
}
:root[data-theme="light"] .breadth-tbl-scroll::-webkit-scrollbar-thumb {
  background: rgba(71,85,105,0.30);
  background-clip: padding-box;
}
:root[data-theme="light"] .breadth-tbl-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(71,85,105,0.55);
  background-clip: padding-box;
}
.bd-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.bd-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; text-align: left;
  padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.bd-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.bd-table tr:last-child td { border-bottom: none; }
.bd-table tr:hover td { background: rgba(122,162,255,0.08); cursor: pointer; }
.bd-num { text-align: right; font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 11.5px; }
.bd-num.pos { color: #16a34a; font-weight: 600; }
.bd-num.neg { color: #dc2626; font-weight: 600; }
.bd-sym { font-weight: 600; color: var(--header-text); }

/* ── Chart Trade page — fits within viewport, no page scroll ─────── */
/* Page height budget on the Chart Trade tab:
     topbar (57)  + tabs nav (42) + page header (~62)
     + trade-toptabs (~52) + page padding (~16) ≈ 230 px
   Subtract that from 100vh for the chart-area max-height so the chart +
   side panel + tab strip all fit without forcing the body to scroll. */
/* Trade page uses block layout (not flex) so the global .page.active
   `display: block` doesn't conflict, and the page-header keeps its
   natural document position right above the trade-toptabs strip.
   `position: sticky` is overridden to `static` because sticky inside
   an overflow-hidden / flex parent leaves a phantom gap above the
   sticky child. */
.page[data-page="trade"].active {
  display: block;
  overflow: hidden;
  padding: 0;
}
.page[data-page="trade"] .page-header {
  position: static;
  top: auto;
  margin: 0;
  padding: 8px 16px;
  border-bottom: none;
  background: transparent;
  min-height: 0;
}
.page[data-page="trade"] .page-header h2 { font-size: 13px; }
/* In-panel tabs at TOP of right panel — flush with the panel edge,
   common across every instrument / pane. */
.trade-panel .trade-toptabs {
  margin: 0;
  padding: 0 8px;
  background: var(--panel-2);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  flex-shrink: 0;
}
.trade-panel .trade-toptab {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
}
.trade-panel .trade-tbl-tab-count {
  padding: 1px 6px;
  font-size: 10px;
  min-width: 18px;
}
/* The inner pane wrappers inside the right panel */
.trade-rightpane-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 12px 12px;
}
.trade-rightpane-inner[hidden] { display: none !important; }
.trade-rightpane-inner .trade-tbl-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.trade-toppane[data-trade-pane="charts"] {
  /* Block flow — no flex needed since parent .page is back to block. */
  padding: 0 8px 8px;
}
.trade-layout {
  display: grid;
  /* Default = VERTICAL split (chart left / right pane right).
     3 columns: chart fills, splitter handle, right pane (drag-resizable
     via the --trade-rpane-w custom prop, persisted to localStorage). */
  grid-template-columns: 1fr 6px var(--trade-rpane-w, 340px);
  grid-template-rows: 1fr;
  gap: 0;
  /* Page-height budget: topbar(57) + tabs(42) + page-header(~38) +
     small padding(~12) ≈ 150 px. Tabs now live INSIDE the right panel,
     so they don't subtract from the chart height. */
  height: calc(100vh - 150px - var(--favbar-h));
  max-height: calc(100vh - 150px - var(--favbar-h));
}
/* HORIZONTAL split — chart on top, right pane on the bottom.
   2 rows: chart fills, splitter handle (6px), right pane (drag-
   resizable height via --trade-rpane-h, persisted separately so the
   user's vertical-mode width doesn't get clobbered when they flip
   layouts back). Cursor switches to row-resize so the affordance
   matches the drag axis. */
.trade-layout.layout-h {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 6px var(--trade-rpane-h, 320px);
}
.trade-layout.layout-h .trade-chart-wrap { margin-right: 0; margin-bottom: 6px; }
.trade-layout.layout-h .trade-rightpane  { margin-left: 0;  margin-top: 6px; }
.trade-layout.layout-h .trade-splitter   { cursor: row-resize; }
/* Rotate the splitter "grab" line so it visually matches the drag
   axis — vertical bar in vertical layout, horizontal bar in
   horizontal layout. */
.trade-layout.layout-h .trade-splitter::before {
  width: 32px; height: 2px;
}
.trade-chart-wrap { margin-right: 6px; }
.trade-rightpane { margin-left: 6px; }
/* Drag handle that sits between the chart and the right pane. */
.trade-splitter {
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  transition: background 0.15s ease;
}
.trade-splitter::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 32px;
  background: var(--border);
  border-radius: 1px;
  transition: background 0.15s ease;
}
.trade-splitter:hover { background: rgba(122,162,255,0.08); }
.trade-splitter:hover::before { background: var(--accent, #7aa2ff); }
.trade-splitter.dragging {
  background: rgba(122,162,255,0.18);
}
.trade-splitter.dragging::before { background: var(--accent, #7aa2ff); }
body.trade-resizing { cursor: col-resize !important; user-select: none; }
body.trade-resizing * { cursor: col-resize !important; pointer-events: none !important; }
body.trade-resizing #trade-splitter { pointer-events: auto !important; }
/* Horizontal-mode cursor override — body inherits row-resize during
   drag so users see the correct affordance everywhere on screen. */
body.trade-resizing.trade-resizing-h,
body.trade-resizing.trade-resizing-h * { cursor: row-resize !important; }
@media (max-width: 980px) {
  .trade-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .trade-splitter { display: none; }
}
@media (max-width: 980px) {
  .trade-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
}
.trade-chart-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  position: relative;
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
/* Legacy single-chart container (kept for non-trade pages that still
   target #trade-chart). The new multi-chart grid lives below. */
.trade-chart {
  width: 100%; height: 100%;
  position: relative;
}
/* ── Chart toolbar (always visible; multi-leg bar shown inside for STRADDLE/STRANGLE) ── */
.trade-chart-toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 6px;
  flex-shrink: 0;
  position: relative;
}
.trade-ml-bar { display: flex; align-items: center; gap: 14px; }
.trade-ml-bar[hidden] { display: none !important; }
/* ── Chart symbol search ──────────────────────────────────────── */
.trade-sym-wrap {
  position: relative;
  flex: 1 1 120px;
  min-width: 90px;
  max-width: 200px;
}
.trade-sym-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-size: 11.5px;
  font-family: inherit;
  padding: 3px 26px 3px 8px;
  outline: none;
  transition: border-color 0.15s;
}
.trade-sym-input::placeholder { color: var(--muted); }
.trade-sym-input:focus { border-color: var(--accent); }
.trade-sym-wrap::after {
  content: '⌕';
  position: absolute;
  right: 7px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px; color: var(--muted);
  pointer-events: none;
}
.trade-sym-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 300;
  max-height: 220px;
  overflow-y: auto;
}
.trade-sym-drop.hidden { display: none !important; }
.trade-sym-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.trade-sym-item:last-child { border-bottom: none; }
.trade-sym-item:hover, .trade-sym-item.focused { background: rgba(122,162,255,0.12); }
.trade-sym-item-sym  { font-size: 12px; font-weight: 700; color: var(--header-text); }
.trade-sym-item-desc { font-size: 10.5px; color: var(--muted); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-sym-item-exch { font-size: 10px; color: var(--muted); background: var(--panel-2); border-radius: 3px; padding: 1px 4px; flex-shrink: 0; }
/* Active chart — blue accent on header */
.trade-subchart.tcg-active > .trade-subchart-head {
  border-bottom-color: var(--accent);
  background: rgba(122,162,255,0.06);
}
.trade-subchart.tcg-active > .trade-subchart-head .trade-subchart-title { color: var(--accent); }
/* Reset button shown on overridden charts */
.trade-subchart-reset {
  background: none; border: none; color: var(--muted);
  font-size: 10px; cursor: pointer; padding: 0 2px; line-height: 1;
  opacity: 0.7; transition: opacity 0.1s, color 0.1s;
}
.trade-subchart-reset:hover { opacity: 1; color: var(--accent); }
/* Days range selector */
.trade-days-seg {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.trade-days-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.trade-days-btn:last-child { border-right: none; }
.trade-days-btn:hover { background: rgba(122,162,255,0.08); color: var(--text); }
.trade-days-btn.active { background: var(--accent); color: #fff; }

/* Layout picker button */
.trade-layout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--muted);
}
.trade-layout-btn:hover { color: var(--text); border-color: var(--accent); }
/* Layout picker floating panel */
#trade-layout-panel {
  position: absolute;
  z-index: 200;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
#trade-layout-panel.hidden { display: none !important; }
/* Layout picker group (count label + icon row) */
.tlp-group { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.tlp-group:last-child { margin-bottom: 0; }
.tlp-count {
  font-size: 11px; font-weight: 700; color: var(--muted);
  width: 10px; text-align: right; flex-shrink: 0; margin-top: 5px;
}
.tlp-row { display: flex; gap: 4px; flex-wrap: wrap; }
.tlp-row:last-child { margin-bottom: 0; }
.tlp-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.tlp-btn:hover { border-color: var(--accent); background: rgba(122,162,255,0.08); }
.tlp-btn.active { border-color: var(--accent); background: rgba(122,162,255,0.15); }
/* Layout icon — mini grid preview */
.tlp-icon {
  display: grid;
  gap: 1.5px;
  width: 30px; height: 22px;
  pointer-events: none;
}
.tc { background: var(--muted); border-radius: 1px; opacity: 0.6; min-width: 0; min-height: 0; }
.tlp-btn:hover .tc, .tlp-btn.active .tc { opacity: 1; background: var(--accent); }

/* 1 — single */
.tlp-icon[data-li="1"] { grid-template: 1fr / 1fr; }

/* 2h — side by side */
.tlp-icon[data-li="2h"] { grid-template: 1fr / 1fr 1fr; }

/* 2v — stacked */
.tlp-icon[data-li="2v"] { grid-template: 1fr 1fr / 1fr; }

/* 3a — top full + bottom 2 */
.tlp-icon[data-li="3a"] { grid-template: 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="3a"] .tc:nth-child(1) { grid-column:1/3; grid-row:1; }
.tlp-icon[data-li="3a"] .tc:nth-child(2) { grid-column:1;   grid-row:2; }
.tlp-icon[data-li="3a"] .tc:nth-child(3) { grid-column:2;   grid-row:2; }

/* 3b — 3 equal columns */
.tlp-icon[data-li="3b"] { grid-template: 1fr / 1fr 1fr 1fr; }

/* 3c — left full + right 2 stacked */
.tlp-icon[data-li="3c"] { grid-template: 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="3c"] .tc:nth-child(1) { grid-column:1; grid-row:1/3; }
.tlp-icon[data-li="3c"] .tc:nth-child(2) { grid-column:2; grid-row:1; }
.tlp-icon[data-li="3c"] .tc:nth-child(3) { grid-column:2; grid-row:2; }

/* 3d — left 2 stacked + right full */
.tlp-icon[data-li="3d"] { grid-template: 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="3d"] .tc:nth-child(1) { grid-column:1; grid-row:1; }
.tlp-icon[data-li="3d"] .tc:nth-child(2) { grid-column:1; grid-row:2; }
.tlp-icon[data-li="3d"] .tc:nth-child(3) { grid-column:2; grid-row:1/3; }

/* 3e — top 2 + bottom full */
.tlp-icon[data-li="3e"] { grid-template: 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="3e"] .tc:nth-child(1) { grid-column:1;   grid-row:1; }
.tlp-icon[data-li="3e"] .tc:nth-child(2) { grid-column:2;   grid-row:1; }
.tlp-icon[data-li="3e"] .tc:nth-child(3) { grid-column:1/3; grid-row:2; }

/* 3f — 3 equal rows */
.tlp-icon[data-li="3f"] { grid-template: 1fr 1fr 1fr / 1fr; }

/* 4a — 2×2 equal */
.tlp-icon[data-li="4a"] { grid-template: 1fr 1fr / 1fr 1fr; }

/* 4b — left full + 3 right stacked */
.tlp-icon[data-li="4b"] { grid-template: 1fr 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="4b"] .tc:nth-child(1) { grid-column:1; grid-row:1/4; }
.tlp-icon[data-li="4b"] .tc:nth-child(2) { grid-column:2; grid-row:1; }
.tlp-icon[data-li="4b"] .tc:nth-child(3) { grid-column:2; grid-row:2; }
.tlp-icon[data-li="4b"] .tc:nth-child(4) { grid-column:2; grid-row:3; }

/* 4c — top full + 3 columns below */
.tlp-icon[data-li="4c"] { grid-template: 1fr 1fr / 1fr 1fr 1fr; }
.tlp-icon[data-li="4c"] .tc:nth-child(1) { grid-column:1/4; grid-row:1; }
.tlp-icon[data-li="4c"] .tc:nth-child(2) { grid-column:1;   grid-row:2; }
.tlp-icon[data-li="4c"] .tc:nth-child(3) { grid-column:2;   grid-row:2; }
.tlp-icon[data-li="4c"] .tc:nth-child(4) { grid-column:3;   grid-row:2; }

/* 4d — 3 columns top + bottom full */
.tlp-icon[data-li="4d"] { grid-template: 1fr 1fr / 1fr 1fr 1fr; }
.tlp-icon[data-li="4d"] .tc:nth-child(1) { grid-column:1;   grid-row:1; }
.tlp-icon[data-li="4d"] .tc:nth-child(2) { grid-column:2;   grid-row:1; }
.tlp-icon[data-li="4d"] .tc:nth-child(3) { grid-column:3;   grid-row:1; }
.tlp-icon[data-li="4d"] .tc:nth-child(4) { grid-column:1/4; grid-row:2; }

/* 4e — 3 stacked left + right full */
.tlp-icon[data-li="4e"] { grid-template: 1fr 1fr 1fr / 1fr 1fr; }
.tlp-icon[data-li="4e"] .tc:nth-child(1) { grid-column:1; grid-row:1; }
.tlp-icon[data-li="4e"] .tc:nth-child(2) { grid-column:1; grid-row:2; }
.tlp-icon[data-li="4e"] .tc:nth-child(3) { grid-column:1; grid-row:3; }
.tlp-icon[data-li="4e"] .tc:nth-child(4) { grid-column:2; grid-row:1/4; }

/* 4f — 4 equal rows */
.tlp-icon[data-li="4f"] { grid-template: 1fr 1fr 1fr 1fr / 1fr; }
.trade-chart-mode-lbl {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.trade-chart-underlying-lbl {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.trade-chart-underlying-seg {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.trade-chart-underlying-btn {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s ease, background 0.12s ease;
}
.trade-chart-underlying-btn:last-child { border-right: none; }
.trade-chart-underlying-btn:hover {
  color: var(--header-text);
  background: rgba(13, 61, 138, 0.06);
}
.trade-chart-underlying-btn.active {
  background: var(--accent);
  color: #ffffff;
}
.trade-chart-underlying-btn.active:hover {
  background: var(--accent);
  filter: brightness(1.05);
}

/* ── Chart grid: hosts up to 4 subcharts.
     - data-mode="1" → 1 chart full pane
   Column split driven by --tcg-col (default 50%), row split by --tcg-row (default 50%).
   Drag handles .tcg-vsplit / .tcg-hsplit are absolutely positioned over the gap. ── */
.trade-chart-grid {
  display: grid;
  flex: 1; min-height: 0;
  gap: 0;
  position: relative;
}

/* ── 1: Single chart ── */
.trade-chart-grid[data-mode="1"] {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* ── 2h: Side by side ── */
.trade-chart-grid[data-mode="2h"] {
  grid-template-columns: var(--tcg-col, 65%) 1fr;
  grid-template-rows: 1fr;
}
.trade-chart-grid[data-mode="2h"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="2h"] .trade-subchart[data-role="fut"]      { grid-column:2; grid-row:1; }

/* ── 2v: Stacked ── */
.trade-chart-grid[data-mode="2v"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--tcg-row, 65%) 1fr;
}
.trade-chart-grid[data-mode="2v"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="2v"] .trade-subchart[data-role="fut"]      { grid-column:1; grid-row:2; }

/* ── 3a: Top full + bottom 2 (default for STRADDLE) ── */
.trade-chart-grid[data-mode="3a"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="3a"] .trade-subchart[data-role="strategy"] { grid-column:1/3; grid-row:1; }
.trade-chart-grid[data-mode="3a"] .trade-subchart[data-role="ce"]       { grid-column:1;   grid-row:2; }
.trade-chart-grid[data-mode="3a"] .trade-subchart[data-role="pe"]       { grid-column:2;   grid-row:2; }

/* ── 3b: 3 columns (resizable via --tcg-col1 / --tcg-col2) ── */
.trade-chart-grid[data-mode="3b"] {
  grid-template-columns: var(--tcg-col1, 33.33%) var(--tcg-col2, 33.33%) 1fr;
  grid-template-rows: 1fr;
}
.trade-chart-grid[data-mode="3b"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="3b"] .trade-subchart[data-role="ce"]       { grid-column:2; grid-row:1; }
.trade-chart-grid[data-mode="3b"] .trade-subchart[data-role="pe"]       { grid-column:3; grid-row:1; }

/* ── 3c: Left full + right 2 stacked ── */
.trade-chart-grid[data-mode="3c"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="3c"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1/3; }
.trade-chart-grid[data-mode="3c"] .trade-subchart[data-role="ce"]       { grid-column:2; grid-row:1; }
.trade-chart-grid[data-mode="3c"] .trade-subchart[data-role="pe"]       { grid-column:2; grid-row:2; }

/* ── 3d: Left 2 stacked + right full ── */
.trade-chart-grid[data-mode="3d"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="3d"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="3d"] .trade-subchart[data-role="pe"]       { grid-column:1; grid-row:2; }
.trade-chart-grid[data-mode="3d"] .trade-subchart[data-role="strategy"] { grid-column:2; grid-row:1/3; }

/* ── 3e: Top 2 + bottom full ── */
.trade-chart-grid[data-mode="3e"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="3e"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="3e"] .trade-subchart[data-role="pe"]       { grid-column:2; grid-row:1; }
.trade-chart-grid[data-mode="3e"] .trade-subchart[data-role="strategy"] { grid-column:1/3; grid-row:2; }

/* ── 3f: 3 rows (resizable via --tcg-row1 / --tcg-row2) ── */
.trade-chart-grid[data-mode="3f"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--tcg-row1, 33.33%) var(--tcg-row2, 33.33%) 1fr;
}
.trade-chart-grid[data-mode="3f"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="3f"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:2; }
.trade-chart-grid[data-mode="3f"] .trade-subchart[data-role="pe"]       { grid-column:1; grid-row:3; }

/* ── 4a: 2×2 equal (default for STRADDLE + underlying) ── */
.trade-chart-grid[data-mode="4a"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="4a"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="4a"] .trade-subchart[data-role="fut"]      { grid-column:2; grid-row:1; }
.trade-chart-grid[data-mode="4a"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:2; }
.trade-chart-grid[data-mode="4a"] .trade-subchart[data-role="pe"]       { grid-column:2; grid-row:2; }

/* ── 4b: Left full + 3 stacked right ── */
.trade-chart-grid[data-mode="4b"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.trade-chart-grid[data-mode="4b"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1/4; }
.trade-chart-grid[data-mode="4b"] .trade-subchart[data-role="fut"]      { grid-column:2; grid-row:1; }
.trade-chart-grid[data-mode="4b"] .trade-subchart[data-role="ce"]       { grid-column:2; grid-row:2; }
.trade-chart-grid[data-mode="4b"] .trade-subchart[data-role="pe"]       { grid-column:2; grid-row:3; }

/* ── 4c: Top full + 3 columns below ── */
.trade-chart-grid[data-mode="4c"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="4c"] .trade-subchart[data-role="strategy"] { grid-column:1/4; grid-row:1; }
.trade-chart-grid[data-mode="4c"] .trade-subchart[data-role="fut"]      { grid-column:1;   grid-row:2; }
.trade-chart-grid[data-mode="4c"] .trade-subchart[data-role="ce"]       { grid-column:2;   grid-row:2; }
.trade-chart-grid[data-mode="4c"] .trade-subchart[data-role="pe"]       { grid-column:3;   grid-row:2; }

/* ── 4d: 3 columns top + bottom full ── */
.trade-chart-grid[data-mode="4d"] {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: var(--tcg-row, 50%) 1fr;
}
.trade-chart-grid[data-mode="4d"] .trade-subchart[data-role="fut"]      { grid-column:1;   grid-row:1; }
.trade-chart-grid[data-mode="4d"] .trade-subchart[data-role="ce"]       { grid-column:2;   grid-row:1; }
.trade-chart-grid[data-mode="4d"] .trade-subchart[data-role="pe"]       { grid-column:3;   grid-row:1; }
.trade-chart-grid[data-mode="4d"] .trade-subchart[data-role="strategy"] { grid-column:1/4; grid-row:2; }

/* ── 4e: 3 stacked left + right full ── */
.trade-chart-grid[data-mode="4e"] {
  grid-template-columns: var(--tcg-col, 50%) 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.trade-chart-grid[data-mode="4e"] .trade-subchart[data-role="fut"]      { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="4e"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:2; }
.trade-chart-grid[data-mode="4e"] .trade-subchart[data-role="pe"]       { grid-column:1; grid-row:3; }
.trade-chart-grid[data-mode="4e"] .trade-subchart[data-role="strategy"] { grid-column:2; grid-row:1/4; }

/* ── 4f: 4 rows (resizable via --tcg-row1 / --tcg-row2 / --tcg-row3) ── */
.trade-chart-grid[data-mode="4f"] {
  grid-template-columns: 1fr;
  grid-template-rows: var(--tcg-row1, 25%) var(--tcg-row2, 25%) var(--tcg-row3, 25%) 1fr;
}
.trade-chart-grid[data-mode="4f"] .trade-subchart[data-role="strategy"] { grid-column:1; grid-row:1; }
.trade-chart-grid[data-mode="4f"] .trade-subchart[data-role="fut"]      { grid-column:1; grid-row:2; }
.trade-chart-grid[data-mode="4f"] .trade-subchart[data-role="ce"]       { grid-column:1; grid-row:3; }
.trade-chart-grid[data-mode="4f"] .trade-subchart[data-role="pe"]       { grid-column:1; grid-row:4; }

/* ── Chart cell margin (replaces gap so drag handles sit over the space) ── */
.trade-chart-grid .trade-subchart { margin: 3px; }

/* ── Drag-resize handles ── */
/* Vertical handle (between columns) */
.tcg-vsplit {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--tcg-col, 50%);
  width: 10px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
.tcg-vsplit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 36px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.tcg-vsplit:hover::after, .tcg-vsplit.dragging::after {
  background: var(--accent, #7aa2ff);
  opacity: 1;
}
.tcg-vsplit:hover, .tcg-vsplit.dragging {
  background: rgba(122,162,255,0.08);
}

/* Horizontal handle (between rows) */
.tcg-hsplit {
  position: absolute;
  left: 0; right: 0;
  top: var(--tcg-row, 50%);
  height: 10px;
  transform: translateY(-50%);
  cursor: row-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
.tcg-hsplit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.tcg-hsplit:hover::after, .tcg-hsplit.dragging::after {
  background: var(--accent, #7aa2ff);
  opacity: 1;
}
.tcg-hsplit:hover, .tcg-hsplit.dragging {
  background: rgba(122,162,255,0.08);
}
/* Second vertical handle — sits between col2 and col3 (3b layout) */
.tcg-vsplit2 {
  position: absolute;
  top: 0; bottom: 0;
  /* JS sets style.left directly during drag; CSS var used for initial placement */
  width: 10px;
  transform: translateX(-50%);
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
.tcg-vsplit2::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 3px; height: 36px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.tcg-vsplit2:hover::after, .tcg-vsplit2.dragging::after { background: var(--accent, #7aa2ff); opacity: 1; }
.tcg-vsplit2:hover, .tcg-vsplit2.dragging { background: rgba(122,162,255,0.08); }
/* Second horizontal handle — sits between row2 and row3 */
.tcg-hsplit2 {
  position: absolute;
  left: 0; right: 0;
  width: 10px;
  transform: translateY(-50%);
  cursor: row-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
.tcg-hsplit2::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.tcg-hsplit2:hover::after, .tcg-hsplit2.dragging::after { background: var(--accent, #7aa2ff); opacity: 1; }
.tcg-hsplit2:hover, .tcg-hsplit2.dragging { background: rgba(122,162,255,0.08); }
/* Third horizontal handle — sits between row3 and row4 (4f layout) */
.tcg-hsplit3 {
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  transform: translateY(-50%);
  cursor: row-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.15s;
}
.tcg-hsplit3::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.tcg-hsplit3:hover::after, .tcg-hsplit3.dragging::after { background: var(--accent, #7aa2ff); opacity: 1; }
.tcg-hsplit3:hover, .tcg-hsplit3.dragging { background: rgba(122,162,255,0.08); }
.tcg-vsplit[hidden], .tcg-vsplit2[hidden],
.tcg-hsplit[hidden], .tcg-hsplit2[hidden], .tcg-hsplit3[hidden] { display: none !important; }
/* Suppress pointer events on grid children while dragging */
body.tcg-col-drag  { cursor: col-resize !important; user-select: none; }
body.tcg-row-drag  { cursor: row-resize !important; user-select: none; }
body.tcg-col-drag *, body.tcg-row-drag * { pointer-events: none !important; cursor: inherit !important; }
body.tcg-col-drag .tcg-vsplit, body.tcg-col-drag .tcg-vsplit2,
body.tcg-row-drag .tcg-hsplit, body.tcg-row-drag .tcg-hsplit2,
body.tcg-row-drag .tcg-hsplit3 { pointer-events: auto !important; }

/* Individual subchart card */
.trade-subchart {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  min-height: 0; min-width: 0;
}
.trade-subchart[hidden] { display: none !important; }
.trade-subchart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 10.5px;
  flex-shrink: 0;
}
.trade-subchart-title {
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--header-text);
}
.trade-subchart-lp {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
/* Per-pane override control bar — sits between the title and the LP
   on each subchart head. Compact dropdowns + numeric inputs so up to
   four panes can share a row of chart heads without crowding. */
.pane-ctrl-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  margin: 0 8px;
}
.pane-ctrl {
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  background: var(--panel-1, transparent);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  /* Lock dropdown widths to keep the row compact even on small panes. */
  max-width: 96px;
}
.pane-ctrl.pane-cek, .pane-ctrl.pane-pek { max-width: 64px; }
.pane-ctrl:hover  { border-color: var(--accent, #7aa2ff); }
.pane-ctrl:focus  { outline: none; border-color: var(--accent, #7aa2ff); }
.pane-ctrl[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Hide native number-input spinners — they steal width and look
   inconsistent across browsers. User can still type/use ↑↓. */
.pane-ctrl[type="number"]::-webkit-outer-spin-button,
.pane-ctrl[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pane-ctrl[type="number"] { -moz-appearance: textfield; }
/* On very narrow panes the row would line-wrap and push the chart
   down; we'd rather let it horizontally scroll inside the head. */
@container (max-width: 320px) {
  .pane-ctrl-row { overflow-x: auto; }
}

/* Page-level Interval picker sitting in the chart toolbar (between
   the ⊞ layout button and the days segmented buttons). Keeps the
   "default interval" obvious to the user since per-pane overrides
   inherit from it when no per-pane interval is explicitly set. */
.trade-tf-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  font-size: 11px;
  color: var(--muted);
}
.trade-tf-host .trade-tf-lbl { font-weight: 600; letter-spacing: 0.4px; }

/* ── Per-pane ACTION ROW (BUY / Qty / SELL / Strike) ────────────────
   Lives below each subchart body. Square coloured B / S buttons
   bookend a Qty:<total> [lots input] readout, with an optional
   Strike picker on the right (CE/PE/Straddle/Strangle types only).
   Matches the reference design — see PER-PANE-CHARTS-DESIGN.md. */
.pane-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
  flex-shrink: 0;
}
.pane-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.pane-action-btn:hover  { filter: brightness(1.08); }
.pane-action-btn:active { transform: scale(0.96); }
.pane-buy {
  background: #16a34a;          /* solid green — distinct from app accent */
  color: #fff;
  border-color: #15803d;
}
.pane-sell {
  background: #dc2626;          /* solid red */
  color: #fff;
  border-color: #b91c1c;
}
.pane-qty-label {
  color: var(--muted);
  font-weight: 500;
}
.pane-qty-total {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--header-text);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}
.pane-lots {
  width: 56px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  background: var(--panel-1, transparent);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 3px;
  text-align: right;
  /* Suppress webkit spinners — keep the row narrow + clean. */
}
.pane-lots::-webkit-outer-spin-button,
.pane-lots::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pane-lots { -moz-appearance: textfield; }
.pane-lots:focus { outline: none; border-color: var(--accent, #7aa2ff); }
.pane-strike-host {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;             /* push to far right of the row */
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.pane-strike-lbl {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.pane-strike-sel {
  font-size: 11px;
  padding: 3px 6px;
  background: var(--panel-1, transparent);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  min-width: 84px;
}
.pane-strike-sel:hover { border-color: var(--accent, #7aa2ff); }
.pane-strike-sel:focus { outline: none; border-color: var(--accent, #7aa2ff); }
/* When the pane is narrow, hide the "CE Strike" / "PE Strike" word
   label so only the dropdown stays visible — saves ~58 px of width. */
@container (max-width: 360px) {
  .pane-strike-lbl { display: none; }
}
.trade-subchart-body {
  flex: 1; min-height: 0;
  position: relative;
}
/* Per-chart BUY / SELL overlay — top-right of each subchart body.
   Sits above the LWC canvas via z-index and pointer-events:auto. */
.trade-chart-trade-overlay {
  position: absolute;
  top: 6px;
  right: 56px;       /* clear of the LWC right-axis labels */
  display: flex;
  gap: 4px;
  z-index: 20;
  pointer-events: auto;
}
.trade-chart-bs-btn {
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 11px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  color: #ffffff;
  transition: filter 0.12s ease, transform 0.06s ease, box-shadow 0.12s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  opacity: 0.92;
}
.trade-chart-bs-btn:hover {
  filter: brightness(1.10);
  opacity: 1;
  box-shadow: 0 3px 9px rgba(0,0,0,0.28);
}
.trade-chart-bs-btn:active { transform: translateY(1px); }
.trade-chart-bs-btn.buy {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-color: #15803d;
}
.trade-chart-bs-btn.sell {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  border-color: #b91c1c;
}
/* Hide CE/PE cards entirely in single-instrument mode (they keep
   data-role attrs so the JS can still target them) */
.trade-chart-grid[data-mode="1"] .trade-subchart:not([data-role="strategy"]) {
  display: none !important;
}
/* Highlight zones — entry↔SL = mild red (loss), entry↔TGT = mild green
   (profit). Absolutely positioned over the chart, sized via JS using
   priceToCoordinate. Pointer-events:none so chart pan/crosshair still
   work through them. */
/* Highlight zones — narrow bands hugging the SL / TGT price lines so
   they call attention to those levels without flooding the chart with
   colour. Width is small (right-side only, ~120 px) so the candles
   stay readable; opacity is light. */
/* ── Multi-band gradient zones ─────────────────────────────────
   Container that hosts all SL/TGT band divs for a single chart.
   Sits on top of the LWC canvas via z-index but pointer-events:none
   so chart pan/crosshair pass through. */
.trade-zones-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.trade-zone-band {
  position: absolute;
  left: 0;
  right: 64px;        /* leave space for the LWC right-axis labels */
}
/* SL bands — innermost (entry → SL1) is the most opaque red, outer
   bands fade. Three levels max so we have indices 0/1/2. */
.trade-zone-band.trade-zone-sl.trade-zone-band-0 {
  background: linear-gradient(90deg, rgba(239,68,68,0.05) 0%, rgba(239,68,68,0.22) 100%);
  border-right: 2px solid rgba(239,68,68,0.55);
}
.trade-zone-band.trade-zone-sl.trade-zone-band-1 {
  background: linear-gradient(90deg, rgba(239,68,68,0.03) 0%, rgba(239,68,68,0.13) 100%);
  border-right: 2px solid rgba(239,68,68,0.40);
}
.trade-zone-band.trade-zone-sl.trade-zone-band-2 {
  background: linear-gradient(90deg, rgba(239,68,68,0.02) 0%, rgba(239,68,68,0.07) 100%);
  border-right: 2px solid rgba(239,68,68,0.25);
}
/* TGT bands — green, same fade pattern. */
.trade-zone-band.trade-zone-tgt.trade-zone-band-0 {
  background: linear-gradient(90deg, rgba(34,197,94,0.05) 0%, rgba(34,197,94,0.22) 100%);
  border-right: 2px solid rgba(34,197,94,0.55);
}
.trade-zone-band.trade-zone-tgt.trade-zone-band-1 {
  background: linear-gradient(90deg, rgba(34,197,94,0.03) 0%, rgba(34,197,94,0.13) 100%);
  border-right: 2px solid rgba(34,197,94,0.40);
}
.trade-zone-band.trade-zone-tgt.trade-zone-band-2 {
  background: linear-gradient(90deg, rgba(34,197,94,0.02) 0%, rgba(34,197,94,0.07) 100%);
  border-right: 2px solid rgba(34,197,94,0.25);
}

/* ── Drag handles for SL/TGT lines ──────────────────────────────
   Invisible horizontal strips overlaid at each price line's Y.
   pointer-events:auto so they catch mousedown; the parent overlay
   passes events through except where a handle exists. */
.trade-drag-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;        /* above zone bands (z=1) but below LWC tooltips */
}
.trade-drag-handle {
  position: absolute;
  left: 0;
  right: 64px;       /* leave space for the LWC right-axis labels */
  height: 8px;
  cursor: ns-resize;
  pointer-events: auto;
  background: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
/* Visible feedback on hover / active drag — colored by SL vs TGT. */
.trade-drag-handle:hover,
.trade-drag-handle.dragging {
  background: rgba(13, 61, 138, 0.06);
  border-top: 1px dashed rgba(13, 61, 138, 0.55);
  border-bottom: 1px dashed rgba(13, 61, 138, 0.55);
}
.trade-drag-handle.trade-drag-sl:hover,
.trade-drag-handle.trade-drag-sl.dragging {
  background: rgba(239, 68, 68, 0.10);
  border-top-color: rgba(239, 68, 68, 0.65);
  border-bottom-color: rgba(239, 68, 68, 0.65);
}
.trade-drag-handle.trade-drag-tgt:hover,
.trade-drag-handle.trade-drag-tgt.dragging {
  background: rgba(34, 197, 94, 0.10);
  border-top-color: rgba(34, 197, 94, 0.65);
  border-bottom-color: rgba(34, 197, 94, 0.65);
}

/* Legacy classes — kept so any other place still using these doesn't break. */
.trade-zone {
  position: absolute;
  right: 64px;
  width: 140px;
  pointer-events: none;
  z-index: 1;
  border-radius: 0 2px 2px 0;
}
.trade-zone-loss {
  background: linear-gradient(90deg, rgba(239,68,68,0) 0%, rgba(239,68,68,0.14) 100%);
  border-right: 2px solid rgba(239,68,68,0.55);
}
.trade-zone-profit {
  background: linear-gradient(90deg, rgba(34,197,94,0) 0%, rgba(34,197,94,0.14) 100%);
  border-right: 2px solid rgba(34,197,94,0.55);
}
.trade-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
  display: flex; flex-direction: column;
  font-size: 12.5px;
  overflow: hidden;
  min-height: 0;          /* allow flexbox child to shrink for inner scroll */
  max-height: 100%;
}
.trade-panel > .trade-entry-form,
.trade-panel > .trade-position {
  overflow-y: auto;       /* inner scroll instead of page scroll */
  flex: 1 1 auto;
  min-height: 0;
}
.trade-panel-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.trade-panel-head-l {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.trade-panel-title {
  font-weight: 700; color: var(--header-text);
  font-size: 13.5px; letter-spacing: 0.2px;
  line-height: 1.25;
  word-break: break-word;
}
.trade-panel-sub {
  font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--muted);
}
.trade-panel-head-r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.trade-lp {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 18px;
  color: var(--header-text);
  white-space: nowrap;
  padding: 4px 10px; border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  letter-spacing: 0.3px;
}
.trade-bidask {
  display: inline-flex;
  gap: 2px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.trade-bidask .bid,
.trade-bidask .ask {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.trade-bidask .lbl {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.5px;
}
.trade-bidask .bid .lbl { color: #16a34a; }
.trade-bidask .ask .lbl { color: #dc2626; }
.trade-bidask .val { font-weight: 700; color: var(--header-text); }
.trade-side-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.trade-buy {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  color: #ffffff !important; font-weight: 700;
  border: 1px solid #059669;
  padding: 10px 12px; border-radius: 6px;
  font-size: 14px; letter-spacing: 0.5px;
}
.trade-buy:hover { filter: brightness(1.06); }
.trade-sell {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  color: #ffffff !important; font-weight: 700;
  border: 1px solid #dc2626;
  padding: 10px 12px; border-radius: 6px;
  font-size: 14px; letter-spacing: 0.5px;
}
.trade-sell:hover { filter: brightness(1.06); }
.trade-position-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.trade-position-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trade-pos-iconbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: all 0.12s ease;
}
/* Info "i" badge — solid blue circle on a slightly recessed button. */
.trade-pos-info-btn {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
}
.trade-pos-info-btn .trade-info-i {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}
.trade-pos-info-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}
.trade-pos-info-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
/* Actions "⋮" button — neutral by default, accent on hover. */
.trade-pos-actions-btn { color: var(--muted); }
.trade-pos-actions-btn:hover {
  color: var(--header-text);
  border-color: var(--accent, #7aa2ff);
  background: rgba(122,162,255,0.08);
}
.trade-pos-actions-btn.active {
  color: var(--accent, #7aa2ff);
  border-color: var(--accent, #7aa2ff);
  background: rgba(122,162,255,0.14);
}
.trade-pos-menu-wrap { position: relative; display: inline-flex; }
.trade-pos-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
  padding: 4px 0;
  min-width: 120px;
  display: flex; flex-direction: column;
}
.trade-pos-menu.hidden { display: none; }
.trade-pos-menu-item {
  background: transparent;
  border: none;
  padding: 8px 14px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--header-text);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
}
.trade-pos-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.6px;
}
.trade-pos-menu-item.add  { color: #16a34a; }
.trade-pos-menu-item.exit { color: #dc2626; }
.trade-pos-menu-item.add  svg { color: #16a34a; }
.trade-pos-menu-item.exit svg { color: #dc2626; }
.trade-pos-menu-item.add:hover  { background: rgba(34,197,94,0.10); }
.trade-pos-menu-item.exit:hover { background: rgba(239,68,68,0.10); }
/* ============================================================
   Position Info Expansion — bright, modern, Groww-style
   ============================================================ */
.trade-info-collapse { transition: opacity 0.12s ease; }
.trade-info-collapse.hidden { display: none; }
.trade-info-collapse {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

/* ── 4-tile position summary (QTY / ENTRY / LP / OPEN) ── */
.trade-info-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.trade-info-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 14px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.trade-info-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.trade-info-tile .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--muted); text-transform: uppercase;
}
.trade-info-tile .val {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 17px; font-weight: 800;
  color: var(--header-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Risk / Reward / R:R bright cards ── */
.trade-risk-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 10px;
}
.trade-risk-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px 8px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trade-risk-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.trade-risk-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
/* Subtle theme-aware semantic tints — low-opacity overlays so they sit
   on top of var(--panel) and remain readable in any theme. */
.trade-risk-cell.risk {
  background: linear-gradient(180deg, rgba(239,68,68,0.10) 0%, var(--panel) 60%);
  border-color: rgba(239,68,68,0.35);
}
.trade-risk-cell.risk::before   { background: #ef4444; }
.trade-risk-cell.reward {
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, var(--panel) 60%);
  border-color: rgba(34,197,94,0.35);
}
.trade-risk-cell.reward::before { background: #22c55e; }
.trade-risk-cell.rr {
  background: linear-gradient(180deg, rgba(59,130,246,0.10) 0%, var(--panel) 60%);
  border-color: rgba(59,130,246,0.35);
}
.trade-risk-cell.rr::before     { background: var(--accent); }
.trade-risk-cell .lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--muted); text-transform: uppercase;
  margin-top: 2px;
}
.trade-risk-cell .val {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--header-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.trade-risk-cell.risk   .val { color: #dc2626; }
.trade-risk-cell.reward .val { color: #16a34a; }
.trade-risk-cell.rr     .val.good { color: #16a34a; }
.trade-risk-cell.rr     .val.warn { color: #d97706; }
.trade-risk-cell.rr     .val.bad  { color: #dc2626; }
:root[data-theme="dark"] .trade-risk-cell.risk   .val,
:root[data-theme="blue"] .trade-risk-cell.risk   .val { color: #f87171; }
:root[data-theme="dark"] .trade-risk-cell.reward .val,
:root[data-theme="blue"] .trade-risk-cell.reward .val { color: #4ade80; }
.trade-risk-cell .sub {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
}

/* ── SL / TGT section cards ── */
.trade-info-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.trade-info-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--header-text);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.trade-info-section-head.sl {
  color: #dc2626;
  border-bottom: 2px solid rgba(239,68,68,0.35);
}
.trade-info-section-head.tgt {
  color: #16a34a;
  border-bottom: 2px solid rgba(34,197,94,0.35);
}
:root[data-theme="dark"] .trade-info-section-head.sl,
:root[data-theme="blue"] .trade-info-section-head.sl { color: #f87171; }
:root[data-theme="dark"] .trade-info-section-head.tgt,
:root[data-theme="blue"] .trade-info-section-head.tgt { color: #4ade80; }
.trade-info-section-head .trade-dot {
  width: 10px; height: 10px;
}
.trade-info-section-head.sl  .trade-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.30); }
.trade-info-section-head.tgt .trade-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.30); }
.trade-info-section-head .muted {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 11px; color: var(--muted);
  background: var(--panel-2);
  padding: 2px 8px;
  border-radius: 6px;
}
.trade-info-levels {
  display: flex; flex-direction: column;
}
.trade-info-empty {
  padding: 18px 14px;
  text-align: center;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.75;
}
.trade-info-level {
  display: grid;
  grid-template-columns: 44px auto 1fr auto auto 26px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 12px;
  border-top: 1px solid var(--border);
  transition: background 0.12s ease;
}
.trade-info-level:first-of-type { border-top: none; }
.trade-info-level:hover { background: var(--panel-2); }
.trade-info-level-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid transparent;
}
.trade-info-level-tag.sl  {
  color: #dc2626;
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
}
.trade-info-level-tag.tgt {
  color: #16a34a;
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.35);
}
:root[data-theme="dark"] .trade-info-level-tag.sl,
:root[data-theme="blue"] .trade-info-level-tag.sl { color: #f87171; }
:root[data-theme="dark"] .trade-info-level-tag.tgt,
:root[data-theme="blue"] .trade-info-level-tag.tgt { color: #4ade80; }
.trade-info-level-px-edit {
  width: 88px;
  text-align: right;
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.trade-info-level-px-edit:hover { border-color: var(--accent); }
.trade-info-level-px-edit:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 61, 138, 0.15);
}
:root[data-theme="dark"] .trade-info-level-px-edit:focus,
:root[data-theme="blue"] .trade-info-level-px-edit:focus {
  box-shadow: 0 0 0 3px rgba(122,169,240,0.18);
}
.trade-info-level-meta {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trade-info-level-alloc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.trade-info-level-alloc-edit {
  width: 48px;
  text-align: right;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 7px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--accent);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.trade-info-level-alloc-edit:hover { border-color: var(--accent); }
.trade-info-level-alloc-edit:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(13, 61, 138, 0.15);
}
:root[data-theme="dark"] .trade-info-level-alloc-edit:focus,
:root[data-theme="blue"] .trade-info-level-alloc-edit:focus {
  box-shadow: 0 0 0 3px rgba(122,169,240,0.18);
}
.trade-info-level-rs {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.trade-info-level-rs.pos { color: #16a34a; }
.trade-info-level-rs.neg { color: #dc2626; }
:root[data-theme="dark"] .trade-info-level-rs.pos,
:root[data-theme="blue"] .trade-info-level-rs.pos { color: #4ade80; }
:root[data-theme="dark"] .trade-info-level-rs.neg,
:root[data-theme="blue"] .trade-info-level-rs.neg { color: #f87171; }
.trade-info-level-rm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 24px; height: 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.12s ease;
}
.trade-info-level-rm:hover {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.35);
  color: #dc2626;
}
/* Position-row expansion — clean SL/TGT editor that visually belongs
   to the position above. Single outer border (no inner section borders)
   makes the grouping obvious; white bg for high contrast with row. */
.pos-row-details td.pos-row-details-td {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.pos-row-rich {
  margin: 4px 8px 10px;
  padding: 10px 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(13, 61, 138, 0.08);
  /* Container query target: child level-list responds to THIS width. */
  container-type: inline-size;
  container-name: posrich;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}
/* Level sections — flat (no border, no card chrome) since the parent
   .pos-row-rich already provides the framing. */
.pos-row-rich .trade-levels {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-width: 0;
}
.pos-row-rich .trade-levels-head {
  border-bottom: 1px solid var(--border);
  padding: 6px 4px;
  flex-wrap: wrap;
  gap: 6px;
}
.pos-row-rich .trade-level-list {
  padding: 6px 0 8px;
  /* ESSENTIAL: this is the container the @container query measures. */
  container-type: inline-size;
  container-name: levellist;
  background: transparent;
  min-width: 0;
}
.pos-row-rich .trade-level-empty {
  padding: 12px 8px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  opacity: 0.75;
  font-style: normal;
}
/* The level row inside the position-info panel inherits the SAME
   equal-share grid as the form's `.trade-level-row` — every cell
   scales proportionally. No overrides needed; the form's rules
   already match this context's needs. */

/* HIT state — level was triggered, qty exited. Muted + read-only,
   theme-aware (no hardcoded greys). */
.trade-level-row.hit {
  opacity: 0.55;
  background: var(--panel-2);
  border-radius: 6px;
}
.trade-level-row.hit > input {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  cursor: not-allowed;
  text-decoration: line-through;
}
.trade-level-row.hit .trade-level-num {
  background: var(--panel-2) !important;
  color: var(--muted) !important;
}
.trade-level-row.hit .trade-level-x {
  pointer-events: none;
  opacity: 0.4;
}
.trade-level-hit-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 3px;
  background: rgba(239,68,68,0.15);
  color: #b91c1c;
  border: 1px solid rgba(239,68,68,0.35);
  vertical-align: middle;
}
:root[data-theme="dark"] .trade-level-hit-tag,
:root[data-theme="blue"] .trade-level-hit-tag { color: #f87171; }

/* The entry-form's level lists also get container-type so the same
   adaptive collapse works in the side-panel when narrow. */
#trade-sl-list, #trade-tgt-list {
  container-type: inline-size;
  container-name: levellist;
}

/* ── Adaptive collapse: drop Pts + % when the level-list container is
   too narrow for all 3 numeric inputs. Always keep ₹ price + alloc%
   visible — those are the minimum to monitor an SL/TGT level. ── */
/* Adaptive collapse — drops Pts + % cells when the row container
   is narrow. Flex layout means hidden cells take zero space (no
   ghost gaps), so the surviving cells flow cleanly.
     < 540px  → drop %  (keep ₹, Pts, qty)
     < 420px  → drop Pts too (keep just ₹ + qty)  */
@container levellist (max-width: 540px) {
  .trade-level-row > .trade-level-pct { display: none; }
}
@container levellist (max-width: 420px) {
  .trade-level-row > .trade-level-pts { display: none; }
}
/* "Add SL / Add TGT" button — theme-aware dashed pill at the top of each level list. */
.trade-info-add-level {
  display: block;
  width: calc(100% - 28px);
  margin: 12px 14px;
  background: var(--panel);
  border: 1.5px dashed var(--border);
  color: var(--muted);
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.trade-info-add-level.sl:hover {
  border-color: #ef4444;
  border-style: solid;
  color: #ffffff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}
.trade-info-add-level.tgt:hover {
  border-color: #22c55e;
  border-style: solid;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
  transform: translateY(-1px);
}
.trade-info-add-level:active { transform: translateY(0); }
.trade-info-level-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trade-info-level-alloc {
  font-size: 10.5px;
  color: var(--accent, #7aa2ff);
  font-weight: 600;
  white-space: nowrap;
}
.trade-info-level-rs {
  font-family: ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trade-info-level-rs.pos { color: #16a34a; }
.trade-info-level-rs.neg { color: #dc2626; }
@media (max-width: 480px) {
  .trade-info-level {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 8px;
  }
  .trade-info-level-meta  { grid-column: 2 / 3; grid-row: 2 / 3; }
  .trade-info-level-alloc { grid-column: 3 / 4; grid-row: 1 / 2; }
  .trade-info-level-rs    { grid-column: 3 / 4; grid-row: 2 / 3; text-align: right; }
}
.trade-close-x {
  width: 32px; height: 32px;
  font-size: 18px; font-weight: 700;
  color: #ffffff;
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
  border: 1px solid #dc2626;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.trade-close-x:hover { filter: brightness(1.1); }

.trade-pnl-big {
  text-align: center;
  padding: 12px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.trade-pnl-rs {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 800;
  color: var(--header-text); letter-spacing: 0.3px;
}
.trade-pnl-rs.pos { color: #16a34a; }
.trade-pnl-rs.neg { color: #dc2626; }
.trade-pnl-sub {
  font-family: ui-monospace, monospace;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.trade-pnl-sub.pos { color: #16a34a; }
.trade-pnl-sub.neg { color: #dc2626; }

.trade-pill {
  display: inline-block;
  padding: 4px 12px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  background: var(--panel-2); color: var(--muted);
  margin-bottom: 4px;
}
.trade-pill.pos {
  background: rgba(34,197,94,0.18); color: #16a34a;
  border: 1px solid rgba(34,197,94,0.40);
}
.trade-pill.neg {
  background: rgba(239,68,68,0.18); color: #dc2626;
  border: 1px solid rgba(239,68,68,0.40);
}
.trade-info {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.trade-info td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.trade-info td:first-child {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.4px; width: 90px;
}
.trade-info td:last-child {
  text-align: right; font-weight: 600;
  color: var(--header-text);
}
.trade-info td.pos { color: #16a34a; }
.trade-info td.neg { color: #dc2626; }
#trade-info-pnl-pts.pos, #trade-info-pnl-rs.pos, #trade-info-pnl-pct.pos { color: #16a34a; }
#trade-info-pnl-pts.neg, #trade-info-pnl-rs.neg, #trade-info-pnl-pct.neg { color: #dc2626; }
.trade-exit {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: #ffffff !important; font-weight: 700;
  border: 1px solid #c2410c;
  padding: 10px 12px; border-radius: 6px;
  font-size: 13px; letter-spacing: 0.5px;
  margin-top: 8px;
}
.trade-exit:hover { filter: brightness(1.06); }
.trade-toast {
  margin: 8px 14px 12px;
  padding: 8px 12px;
  background: rgba(122,162,255,0.12);
  border: 1px solid rgba(122,162,255,0.30);
  border-radius: 6px;
  color: var(--header-text);
  font-size: 12px;
  text-align: center;
}

/* ================ ENTRY FORM ================ */
.trade-entry-form {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
}
/* Belt-and-suspenders: any pane with [hidden] is fully hidden, even
   when its base rule sets `display: flex`. The browser default
   `[hidden] { display: none }` loses to the explicit display:flex
   above, so we re-assert it with !important. */
.trade-entry-form[hidden],
.trade-rightpane-inner[hidden],
[data-trade-pane][hidden] {
  display: none !important;
}
.trade-form-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.trade-form-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.trade-form-label .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.trade-form-input {
  width: 84px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- Multi-level SL/TGT ----- */
.trade-levels {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  overflow: hidden;
}
.trade-levels-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.trade-levels-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--header-text);
}
.trade-levels-title.sl  { color: #ef4444; }
.trade-levels-title.tgt { color: #22c55e; }
.trade-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.trade-dot.sl  { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }
.trade-dot.tgt { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.18); }

/* Scope-info ⓘ — clarifies leg-level SL/TGT scope + QuikTrade upsell.
   CSS-only tooltip (no JS) shown on hover/focus. */
.trade-scope-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--muted);
  cursor: help;
  outline: none;
  position: relative;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.trade-scope-info:hover,
.trade-scope-info:focus { color: var(--accent); }
.trade-scope-info::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.1px;
  text-align: left;
  text-transform: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 50;
  white-space: normal;
}
.trade-scope-info::before {
  content: "";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 51;
}
.trade-scope-info:hover::after,
.trade-scope-info:focus::after,
.trade-scope-info:hover::before,
.trade-scope-info:focus::before { opacity: 1; }
.trade-add-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--header-text);
  padding: 3px 9px; border-radius: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.trade-add-btn:hover { background: var(--panel); transform: translateY(-1px); }
.trade-add-btn.sl:hover  { border-color: rgba(239,68,68,0.45); color: #ef4444; }
.trade-add-btn.tgt:hover { border-color: rgba(34,197,94,0.45); color: #22c55e; }
.trade-add-btn:disabled,
.trade-add-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--panel-2) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
  transform: none;
}
.trade-level-list {
  display: flex; flex-direction: column;
  gap: 6px; padding: 8px 10px;
  /* Cap at ~1 level row + a peek of the 2nd, so 2+ levels reliably
     trigger the inner scroll instead of growing the entry form
     vertically. Each row is ~52px (input + lots subtext); 1.5 rows
     ≈ 78px + padding. */
  max-height: 78px;
  overflow-y: auto;
  /* Thin scrollbar — slightly wider so it's visible. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.trade-level-list::-webkit-scrollbar {
  width: 8px;
}
.trade-level-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}
.trade-level-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.trade-level-list:hover::-webkit-scrollbar-thumb {
  background: var(--accent);
  background-clip: content-box;
}
.trade-level-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: content-box;
}
.trade-level-list:empty { padding: 0; }
.trade-level-empty {
  padding: 10px 12px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  border-top: 1px dashed var(--border);
}
/* Single level row: [num] [₹] [Pts] [%] [qty-cell] [×]
   Equal-share grid — every numeric cell takes 1fr so all columns
   are the same width. Qty cell inherits 1fr like the others; its
   internal input shrinks to fit alongside the small "%" label. */
.trade-level-row {
  display: grid;
  grid-template-columns: 32px repeat(4, minmax(0, 1fr)) 22px;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  min-width: 0;
}
.trade-level-row > input {
  min-width: 0;
  width: 100%;
}
.trade-level-row > .trade-level-qty-cell {
  min-width: 0;
}
/* Slightly tighter input padding for the row inputs only. */
.trade-level-row .trade-level-rs,
.trade-level-row .trade-level-pts,
.trade-level-row .trade-level-pct {
  padding: 5px 6px;
  font-size: 11px;
}
.trade-level-qty-cell {
  display: grid;
  grid-template-columns: minmax(56px, 72px) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.trade-level-qty-cell .trade-level-qty {
  width: 100%;
  text-align: right;
  padding: 5px 6px;
  font-size: 11px;
}
.trade-level-lots {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-align: left;
  line-height: 1.1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-level-lots.warn { color: #f59e0b; }

/* Last level row in red when sum of lots ≠ total order qty. */
.trade-level-row.qty-mismatch {
  background: rgba(239, 68, 68, 0.08);
  border-radius: 5px;
  outline: 1px solid rgba(239, 68, 68, 0.45);
  outline-offset: -1px;
}
.trade-level-row.qty-mismatch .trade-level-qty {
  border-color: rgba(239, 68, 68, 0.65) !important;
  box-shadow: inset 0 1px 2px rgba(239, 68, 68, 0.15) !important;
}
.trade-level-row.qty-mismatch .trade-level-lots {
  color: #dc2626;
  font-weight: 800;
}
:root[data-theme="dark"] .trade-level-lots,
:root[data-theme="blue"] .trade-level-lots { color: #88b3f0; }
/* Compact level-num pill — slightly tighter so the row reads as
   "label + values" rather than "label = same width as inputs". */
.trade-level-num {
  font-size: 10px;
  padding: 4px 0;
}
.trade-level-row .trade-level-rs,
.trade-level-row .trade-level-pts,
.trade-level-row .trade-level-pct,
.trade-level-row .trade-level-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  padding: 6px 8px;
  width: 100%;
  min-width: 0;
  /* Theme-aware "projected" / inset look: input sits ON the section
     surface, slightly recessed via inner shadow. var(--panel) gives
     a darker fill in dark themes (panel < panel-2) and stays neutral
     in light theme. */
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.trade-level-row .trade-level-rs:hover,
.trade-level-row .trade-level-pts:hover,
.trade-level-row .trade-level-pct:hover,
.trade-level-row .trade-level-qty:hover {
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22),
              inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.trade-level-row .trade-level-rs:focus,
.trade-level-row .trade-level-pts:focus,
.trade-level-row .trade-level-pct:focus,
.trade-level-row .trade-level-qty:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20),
              0 0 0 3px rgba(13, 61, 138, 0.18);
}
:root[data-theme="dark"] .trade-level-row .trade-level-rs:focus,
:root[data-theme="dark"] .trade-level-row .trade-level-pts:focus,
:root[data-theme="dark"] .trade-level-row .trade-level-pct:focus,
:root[data-theme="dark"] .trade-level-row .trade-level-qty:focus,
:root[data-theme="blue"] .trade-level-row .trade-level-rs:focus,
:root[data-theme="blue"] .trade-level-row .trade-level-pts:focus,
:root[data-theme="blue"] .trade-level-row .trade-level-pct:focus,
:root[data-theme="blue"] .trade-level-row .trade-level-qty:focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30),
              0 0 0 3px rgba(122, 169, 240, 0.22);
}
.trade-level-row .trade-level-rs::placeholder  { color: #f59e0b; opacity: 0.55; }
.trade-level-row .trade-level-pts::placeholder { color: var(--muted); opacity: 0.7; }
.trade-level-row .trade-level-pct::placeholder { color: var(--muted); opacity: 0.7; }
.trade-level-row .trade-level-qty::placeholder { color: var(--accent, #7aa2ff); opacity: 0.6; }
.trade-level-row[data-which="sl"]  .trade-level-num { color: #ef4444; }
.trade-level-row[data-which="tgt"] .trade-level-num { color: #22c55e; }
.trade-level-num {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  text-align: center;
  padding: 3px 0;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.trade-unit-seg-row {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  background: var(--panel);
}
.trade-unit-seg-row .seg-btn {
  padding: 3px 7px;
  font-size: 10px; font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.trade-unit-seg-row .seg-btn:last-child { border-right: none; }
.trade-unit-seg-row .seg-btn.active {
  background: var(--accent, #7aa2ff);
  color: #fff;
}
.trade-level-val,
.trade-level-qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  padding: 4px 6px;
}
.trade-level-x {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.trade-level-x:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.45);
  color: #ef4444;
}

/* ----- ATR fallback collapsible ----- */
.trade-fallback {
  font-size: 11px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0 10px;
}
.trade-fallback[open] { padding-bottom: 10px; }
.trade-fallback-summary {
  cursor: pointer; color: var(--muted);
  font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 8px 0;
  list-style: none;
  user-select: none;
}
.trade-fallback-summary::-webkit-details-marker { display: none; }
.trade-fallback-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.trade-fallback-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--muted);
}
.trade-fallback-grid input {
  width: 100%; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- Quick BUY/SELL CTA ----- */
.trade-quick {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
.trade-quick .btn {
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 7px;
}
.trade-help-mini {
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ── Order entry — broker-style form ── */
/* Top row: product radio (left) + BUY/SELL pill toggle (right) */
.trade-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trade-radio-group {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.trade-radio {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text);
  user-select: none;
}
.trade-radio input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
  cursor: pointer;
  width: 14px; height: 14px;
}
.trade-radio input[type="radio"]:checked + span {
  color: var(--accent);
  font-weight: 700;
}
.trade-radio span { transition: color 0.12s ease; font-weight: 500; }

/* BUY / SELL pill — single click toggles side; green for BUY, red for SELL */
.trade-side-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-family: inherit;
  min-width: 88px;
  justify-content: space-between;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.10);
  transition: background 0.18s ease;
}
.trade-side-pill.side-buy  { background: linear-gradient(180deg, #16a34a 0%, #15803d 100%); }
.trade-side-pill.side-sell { background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%); }
.trade-side-pill .trade-side-pill-lbl { padding-left: 4px; }
.trade-side-pill .trade-side-pill-knob {
  display: inline-block;
  width: 22px; height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Order type radios — single inline row, theme-aware */
.trade-ordertype-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* 4-column inputs grid: Qty / Price / Trigger / Mkt Protect % */
.trade-inputs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  .trade-inputs-grid { grid-template-columns: 1fr 1fr; }
}
.trade-input-cell {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.trade-input-lbl {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-input-cell .muted { font-weight: 400; color: var(--muted); opacity: 0.75; }
.trade-lot-size {
  color: var(--accent);
  font-weight: 700;
  margin-left: 2px;
  font-size: 10px;
}
.trade-input-cell input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  min-width: 0;
  /* Projected / inset look — input recessed into the panel surface */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18),
              inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.trade-input-cell input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.20),
              0 0 0 3px rgba(13, 61, 138, 0.18);
}
:root[data-theme="dark"] .trade-input-cell input:focus,
:root[data-theme="blue"] .trade-input-cell input:focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.30),
              0 0 0 3px rgba(122, 169, 240, 0.22);
}
/* Disabled state: keep panel background (no grey fill), mute text via opacity */
.trade-input-cell input:disabled {
  background: var(--panel);
  border-color: var(--border);
  color: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* Footer Cancel + Execute row — Cancel left, Execute big on right */
.trade-execute-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin-top: 6px;
}
.trade-cancel {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.trade-cancel:hover {
  background: var(--panel);
  border-color: var(--accent);
}
.trade-execute {
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  border-radius: 6px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s ease, transform 0.06s ease;
}
.trade-execute.side-buy {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}
.trade-execute.side-sell {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}
.trade-execute:hover { filter: brightness(1.06); }
.trade-execute:active { transform: translateY(1px); }

/* Order Legs preview (multi-leg only — STRADDLE / STRANGLE) */
.trade-legs-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}
.trade-legs-preview[hidden] { display: none !important; }
.trade-legs-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.trade-legs-title { color: var(--accent); }
.trade-legs-count {
  color: var(--muted);
  opacity: 0.8;
  font-weight: 600;
  font-size: 11px;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
}
.trade-legs-tbl { font-size: 11.5px; }
.trade-legs-tbl thead th {
  padding: 7px 10px; font-size: 10px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.trade-legs-tbl thead th:first-child { border-top-left-radius: 0; }
.trade-legs-tbl thead th:last-child  { border-top-right-radius: 0; }
.trade-legs-tbl tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.trade-legs-tbl tbody tr:last-child td { border-bottom: none; }

/* ── SL/TGT "select a leg" hint (multi-leg + All Legs mode) ─────
   Shown when the user is on STRADDLE/STRANGLE in All Legs context —
   SL/TGT is per-leg, so they need to switch to CE or PE first. */
.trade-sltgt-leg-hint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(13, 61, 138, 0.08) 0%, rgba(13, 61, 138, 0.04) 100%);
  border: 1px solid rgba(13, 61, 138, 0.30);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--header-text);
  line-height: 1.45;
}
.trade-sltgt-leg-hint[hidden] { display: none !important; }
.trade-sltgt-leg-hint-icon {
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 1.2;
}
.trade-sltgt-leg-hint b { color: var(--accent); font-weight: 700; }
.trade-sltgt-wrap[hidden] { display: none !important; }
.trade-sltgt-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:root[data-theme="dark"] .trade-sltgt-leg-hint,
:root[data-theme="blue"] .trade-sltgt-leg-hint {
  background: linear-gradient(180deg, rgba(122, 169, 240, 0.10) 0%, rgba(122, 169, 240, 0.05) 100%);
  border-color: rgba(122, 169, 240, 0.35);
}

/* ── Position-open banner ───────────────────────────────────────
   Shown at the top of the entry form whenever Pages.trade._pos is
   set. Tells the user there's an active position blocking new
   Executes and gives them a one-click Close button. */
.trade-pos-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  font-size: 12px;
  color: var(--header-text);
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.10);
}
.trade-pos-banner[hidden] { display: none !important; }
.trade-pos-banner-icon {
  font-size: 14px;
  color: #d97706;
  flex-shrink: 0;
}
.trade-pos-banner-text {
  flex: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-pos-banner-close {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  color: #ffffff;
  border: 1px solid #b91c1c;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.12s ease;
}
.trade-pos-banner-close:hover { filter: brightness(1.08); }

/* ── Per-leg edit (Pass 3 reroute) ──────────────────────────────
   Click a row in the Order Legs table → load that leg into the main
   form above for editing. The active leg's row highlights and a
   small dot marks the leg name. Edits in the form route into that
   leg's _legAttrs override. */
.trade-leg-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.trade-leg-row:hover { background: var(--panel-2); }
.trade-leg-row.editing {
  background: rgba(13, 61, 138, 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
}
:root[data-theme="dark"] .trade-leg-row.editing,
:root[data-theme="blue"] .trade-leg-row.editing {
  background: rgba(122, 169, 240, 0.10);
}
.trade-leg-edit-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(13, 61, 138, 0.20);
}
.trade-leg-override-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(13, 61, 138, 0.10);
  border: 1px solid rgba(13, 61, 138, 0.30);
  border-radius: 4px;
  vertical-align: middle;
}
:root[data-theme="dark"] .trade-leg-override-tag,
:root[data-theme="blue"] .trade-leg-override-tag {
  color: #88b3f0;
  background: rgba(122, 169, 240, 0.10);
  border-color: rgba(122, 169, 240, 0.32);
}

/* Leg-edit context strip — sits at the top of the main entry form
   for STRADDLE/STRANGLE. "All Legs" + per-leg pills, plus a hint
   line + reset button when a leg has overrides. */
.trade-leg-ctx {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
}
.trade-leg-ctx[hidden] { display: none !important; }
.trade-leg-ctx-lbl {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.trade-leg-ctx-pills {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.trade-leg-ctx-pill {
  position: relative;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.trade-leg-ctx-pill:last-child { border-right: none; }
.trade-leg-ctx-pill:hover { color: var(--header-text); background: rgba(13, 61, 138, 0.06); }
.trade-leg-ctx-pill.active {
  background: var(--accent);
  color: #ffffff;
}
.trade-leg-ctx-pill-dot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  background: #f59e0b;
  border-radius: 50%;
  vertical-align: middle;
}
.trade-leg-ctx-pill.active .trade-leg-ctx-pill-dot { background: #ffffff; }
.trade-leg-ctx-hint {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.trade-leg-ctx-hint[hidden] { display: none !important; }
.trade-leg-ctx-hint-text { font-style: italic; }
.trade-leg-ctx-reset {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.trade-leg-ctx-reset[hidden] { display: none !important; }
.trade-leg-ctx-reset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tighter panel-head when it lives inside the entry form */
.trade-entry-form > .trade-panel-head {
  padding: 8px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* ----- Tag colors (used in help text + position card) ----- */
.trade-buy-tag  { color: #16a34a; font-weight: 700; }
.trade-sell-tag { color: #dc2626; font-weight: 700; }
.sl-tag  { color: #ef4444; font-weight: 700; }
.tgt-tag { color: #22c55e; font-weight: 700; }

/* ----- Order Defaults — side-panel button that opens the modal ----- */
.trade-orderdef-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--header-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}
.trade-orderdef-btn:hover {
  border-color: var(--accent, #7aa2ff);
  background: var(--panel);
}
.trade-orderdef-btn:active { transform: translateY(1px); }
.trade-orderdef-btn-ico {
  color: #f59e0b;
  font-size: 14px;
}
.trade-orderdef-btn-lbl {
  flex: 1;
  text-align: left;
}
.trade-orderdef-btn-arrow {
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
/* ----- Default Order Attributes grid (used by the modal only now) ----- */
.trade-orderdef-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 6px;
}
.od-row {
  display: grid;
  grid-template-columns: 16px 1fr 80px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.od-check { margin: 0; }
.od-lbl {
  font-size: 10.5px; line-height: 1.25;
  color: var(--header-text);
}
.od-info {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  cursor: help;
  opacity: 0.85;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.od-info:hover { color: var(--accent); opacity: 1; }
/* Styled CSS-only tooltip — content from data-tip attr. Replaces the
   browser's native title tooltip which is slow + ugly. */
.od-info::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.1px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
  white-space: normal;
}
.od-info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 61;
}
.od-info:hover::after,
.od-info:focus-visible::after,
.od-info:hover::before,
.od-info:focus-visible::before { opacity: 1; }
/* Hide the popover when there's no data-tip content. */
.od-info:not([data-tip])::after,
.od-info[data-tip=""]::after,
.od-info:not([data-tip])::before,
.od-info[data-tip=""]::before { display: none; }
.od-input { width: 100%; text-align: right; font-size: 11px; }
.od-input[type="number"] { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .trade-orderdef-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Chart Trade — top tab strip (Charts | Positions | Orders | Config)
   Sits between the page-header toolbar and the active pane.
   Styled per app theme: --panel-2 strip, --accent underline on active.
   ============================================================ */
.trade-toptabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 8px 0 14px;
  padding: 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  white-space: nowrap;
}
.trade-toptab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  letter-spacing: 0.2px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.trade-toptab:hover { color: var(--header-text); }
.trade-toptab.active {
  color: var(--header-text);
  border-bottom-color: var(--accent, #7aa2ff);
}
.trade-tbl-tab-count {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.trade-toptab.active .trade-tbl-tab-count {
  background: var(--accent, #7aa2ff);
  border-color: var(--accent, #7aa2ff);
  color: #fff;
}
.trade-tbl-tab-spacer { flex: 1; }
.trade-tbl-refresh {
  margin-right: 6px;
  font-size: 13px;
  padding: 4px 10px;
}
/* Right-pane swap (vertical split): chart stays on the left, the
   right side toggles between the entry-form panel, positions table,
   or orders table based on which top-tab is active. */
.trade-rightpane[data-trade-rightpane="positions"],
.trade-rightpane[data-trade-rightpane="orders"] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.trade-rightpane[hidden] { display: none !important; }
.trade-rightpane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.trade-rightpane-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--header-text);
  text-transform: uppercase;
}
.trade-rightpane[data-trade-rightpane="positions"] .trade-tbl-scroll,
.trade-rightpane[data-trade-rightpane="orders"] .trade-tbl-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* SL/TGT zone visibility toggle — sits in the right entry-form panel. */
.trade-toggles {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel-2);
}
.trade-toggle {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--header-text);
}
.trade-toggle input[type="checkbox"] {
  margin: 0;
  width: 14px; height: 14px;
  accent-color: var(--accent, #7aa2ff);
}
.trade-toggle-lbl { font-weight: 500; }

/* ============================================================
   Config pane — Default Order Attributes form, app-themed
   ============================================================ */
.trade-config-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px 22px;
  max-width: 760px;
}
.trade-config-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--header-text);
  letter-spacing: 0.2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.trade-config-help {
  margin: 12px 0 18px;
  line-height: 1.55;
  font-size: 12.5px;
}
.trade-config-card .trade-orderdef-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 0;
}
.trade-config-card .od-row {
  display: grid;
  grid-template-columns: 18px 1fr 96px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0;
}
.trade-config-card .od-check {
  margin: 0;
  cursor: pointer;
  width: 14px; height: 14px;
  accent-color: var(--accent, #7aa2ff);
}
.trade-config-card .od-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--header-text);
  line-height: 1.3;
}
.trade-config-card .od-info {
  font-style: normal;
  color: var(--muted);
  cursor: help;
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}
.trade-config-card .od-input {
  width: 100%;
  text-align: right;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}
@media (max-width: 760px) {
  .trade-config-card .trade-orderdef-grid { grid-template-columns: 1fr; }
}
.trade-tbl-scroll {
  width: 100%;
  overflow: auto;
}
.trade-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.trade-tbl thead th {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  position: sticky; top: 0;
}
.trade-tbl thead th.num { text-align: right; }
.trade-tbl tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--header-text);
}
.trade-tbl tbody td.num { text-align: right; }
.trade-tbl tbody tr:hover { background: var(--panel-2); }
.trade-tbl tbody td.pos { color: #16a34a; font-weight: 600; }
.trade-tbl tbody td.neg { color: #dc2626; font-weight: 600; }
.trade-tbl-sym {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.qty-pill {
  display: inline-block;
  font-size: 9px; font-weight: 800; letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.qty-pill.buy  { background: rgba(34,197,94,0.15);  color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.qty-pill.sell { background: rgba(239,68,68,0.15);  color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
.trade-tbl-prod {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(122,162,255,0.12);
  color: var(--accent, #7aa2ff);
  border: 1px solid rgba(122,162,255,0.30);
}
.trade-tbl-otype {
  font-size: 11px;
  color: var(--muted);
}
.trade-tbl-status {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 3px;
}
.trade-tbl-status.ok      { background: rgba(34,197,94,0.15);  color: #16a34a; border: 1px solid rgba(34,197,94,0.35); }
.trade-tbl-status.pending { background: rgba(234,179,8,0.15);  color: #d97706; border: 1px solid rgba(234,179,8,0.35); }
.trade-tbl-status.neg     { background: rgba(239,68,68,0.15);  color: #dc2626; border: 1px solid rgba(239,68,68,0.35); }
/* (legacy — Exit button no longer rendered, kept for safety) */
.trade-tbl-exit { display: none !important; }

/* Empty state for the Positions / Orders tables */
.trade-tbl-empty-tr td.trade-tbl-empty {
  padding: 36px 20px !important;
  text-align: center;
  background: transparent;
  border-bottom: none;
}
.trade-tbl-empty-icon {
  font-size: 28px;
  margin-bottom: 6px;
  opacity: 0.6;
}
.trade-tbl-empty-msg {
  font-size: 13px;
  font-weight: 700;
  color: var(--header-text);
  margin-bottom: 4px;
}
.trade-tbl-empty-sub {
  font-size: 11.5px;
  line-height: 1.55;
}
.trade-tbl-empty-sub b { color: var(--header-text); font-weight: 700; }

/* Per-row ⓘ + ⋯ icon buttons in the Positions / Orders tables. */
.trade-tbl-rowactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trade-tbl-iconbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 24px; height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: all 0.12s ease;
}
.trade-tbl-iconbtn:hover {
  color: var(--header-text);
  border-color: var(--accent, #7aa2ff);
  background: rgba(122,162,255,0.08);
}
.trade-tbl-iconbtn.active {
  color: var(--accent, #7aa2ff);
  border-color: var(--accent, #7aa2ff);
  background: rgba(122,162,255,0.14);
}
.trade-tbl-menu-wrap { position: relative; display: inline-flex; }
.trade-tbl-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
  padding: 4px 0;
  min-width: 110px;
  display: flex; flex-direction: column;
}
.trade-tbl-menu.hidden { display: none; }
.trade-tbl-menu-item {
  background: transparent;
  border: none;
  padding: 7px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--header-text);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.trade-tbl-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.6px;
}
.trade-tbl-menu-item.add  { color: #16a34a; }
.trade-tbl-menu-item.exit { color: #dc2626; }
.trade-tbl-menu-item.add  svg { color: #16a34a; }
.trade-tbl-menu-item.exit svg { color: #dc2626; }
.trade-tbl-menu-item.add:hover  { background: rgba(34,197,94,0.10); }
.trade-tbl-menu-item.exit:hover { background: rgba(239,68,68,0.10); }

/* Inline details row that opens beneath a position when ⓘ is clicked. */
.pos-row-details td.pos-row-details-td {
  padding: 0 !important;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
.pos-row-details-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 10px 14px;
}
.pos-row-details-grid > div {
  display: flex; flex-direction: column;
  font-size: 11px;
}
.pos-row-details-grid .lbl {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.pos-row-details-grid .val {
  color: var(--header-text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .pos-row-details-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Compact card layout for Positions / Orders when the right pane is
   too narrow to hold a horizontal table. Mirrors the mobile broker UI:
   meta+%chg | symbol+P&L | invested+LTP | product+exit. */
.pos-card-tr td.pos-card-td,
.ord-card-tr td.ord-card-td {
  padding: 0 !important;
  border-bottom: none !important;
}
.pos-card,
.ord-card {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 5px;
  font-size: 12px;
}
.pos-card:hover,
.ord-card:hover { background: var(--panel-2); }

.pos-card-row1, .pos-card-row2, .pos-card-row3, .pos-card-row4,
.ord-card-row1, .ord-card-row2, .ord-card-row3 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pos-card-meta { color: var(--muted); font-size: 11px; }
.pos-card-meta b { color: var(--header-text); font-weight: 700; }
.pos-card-pct {
  font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(122,162,255,0.10);
}
.pos-card-pct.pos { background: rgba(34,197,94,0.14);  color: #16a34a; }
.pos-card-pct.neg { background: rgba(239,68,68,0.14);  color: #dc2626; }
/* CLOSED pill + dimmed card for historical positions */
.pos-card-closed-pill {
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 4px;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.pos-card-tr.pos-closed .pos-card {
  opacity: 0.78;
  background: linear-gradient(180deg, transparent 0%, var(--panel-2) 50%, transparent 100%);
}
.pos-card-tr.pos-closed .pos-card-sym {
  color: var(--muted);
}
.pos-card-tr.pos-closed:hover .pos-card { opacity: 1; }
.pos-card-sym {
  font-weight: 700; font-size: 13px;
  color: var(--header-text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pos-card-pl {
  font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pos-card-pl.pos { color: #16a34a; }
.pos-card-pl.neg { color: #dc2626; }
.pos-card-inv, .pos-card-ltp { white-space: nowrap; font-size: 11px; }
.pos-card-ltp b { color: var(--header-text); font-weight: 600; }
.pos-card-row4 { padding-top: 2px; }
.pos-card-row4 .trade-tbl-prod { font-size: 9.5px; }

/* Orders compact card */
.ord-card-time {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}
.ord-card-sym {
  font-weight: 700; font-size: 13px;
  color: var(--header-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.ord-card-price {
  font-family: ui-monospace, monospace;
  font-weight: 800; font-size: 13.5px;
  color: var(--header-text);
  white-space: nowrap;
}
.ord-card-row3 {
  font-size: 11px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.ord-card-row3 b { color: var(--header-text); font-weight: 700; }
.ord-card-qty {
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ord-card-qty .muted { color: #94a3b8; }

/* ----- Order Defaults Modal (opened from topbar ⚡ button) ----- */
/* Order Defaults modal — sized to its content (no fixed 640px height
   inherited from .instr-modal-card). The form itself fits in ~360 px;
   the modal hugs that and grows only if the help text wraps wider. */
.orderdef-card {
  max-width: 760px !important;
  width: calc(100vw - 32px);
  height: auto !important;
  max-height: min(92vh, 720px);
}
.orderdef-modal-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  max-height: calc(90vh - 56px);  /* viewport minus modal head */
}
.orderdef-help {
  margin: 0 0 14px;
  line-height: 1.55;
  font-size: 12px;
}
.orderdef-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

/* ── Broker sync row (top-of-modal): "Load from broker" + "Save to
   broker" CTA for the per-instrument config defined in the grid above.
   Token defaults to the active page's futures contract; admin can paste
   any other token to inspect a different instrument. */
/* Order-defaults modal: hide broker-level config (Broker config + Advanced).
   App-global 1-click defaults are kept; per-broker push is hidden per request. */
#brsync-row, #brsync-adv { display: none !important; }
.brsync-row {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  display: flex; flex-direction: column; gap: 10px;
}
.brsync-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.brsync-title .brsync-broker {
  font-weight: 500; font-size: 11px; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.brsync-controls {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.brsync-controls .brsync-status { flex: 1 1 auto; }
.brsync-status {
  font-size: 11px; color: var(--muted); min-height: 16px;
}
.brsync-status.ok  { color: #4ade80; }
.brsync-status.err { color: #f87171; }

/* ── Advanced (collapsible) — broker-level config (autoSquareOffTime,
   RMS, execution mode, …). Lives at the bottom of the modal. */
.brsync-adv {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.brsync-adv > summary {
  cursor: pointer; padding: 10px 14px;
  font-size: 12px; font-weight: 700; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.5px;
  list-style: none; user-select: none;
}
.brsync-adv > summary::-webkit-details-marker { display: none; }
.brsync-adv > summary::before {
  content: '▸';
  display: inline-block; width: 14px;
  color: var(--muted); transition: transform 0.15s;
}
.brsync-adv[open] > summary::before { transform: rotate(90deg); }
.brsync-adv-body {
  padding: 6px 14px 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.brsync-adv-loading,
.brsync-adv-err {
  grid-column: 1 / -1;
  font-size: 12px; color: var(--muted); padding: 8px 0;
  text-align: center; font-style: italic;
}
.brsync-adv-err { color: #f87171; font-style: normal; font-weight: 600; }
.brsync-adv-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 12px;
  border-top: 1px dashed var(--border);
  justify-content: flex-end;
}
.brsync-adv-foot.hidden { display: none; }
.brsync-adv-foot .brsync-status { flex: 1 1 auto; }
/* Reuse the .od-row look for the broker-level fields so they match the
   existing grid above. */
.brsync-adv-body .od-row {
  display: grid; grid-template-columns: 1fr 110px;
  align-items: center; gap: 8px;
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  margin: 0;
}
.brsync-adv-body .od-row > .od-lbl {
  font-size: 11.5px; color: var(--text);
}
.brsync-adv-body .od-input { height: 28px; }
.brsync-adv-body .od-row-full { grid-column: 1 / -1; }
.brsync-adv-body .od-input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
  justify-self: end;
}
.orderdef-modal-grid .od-row {
  grid-template-columns: 1fr 110px;
  font-size: 12.5px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  margin: 0;
}
/* Multi-input row variant: 2 or 3 compact number inputs in the right
   column. Used by the per-level SL/TGT defaults — Pts / % (and Qty%
   for the 3-input variant). */
.orderdef-modal-grid .od-row.od-row-multi {
  grid-template-columns: 1fr 130px;
}
.orderdef-modal-grid .od-row.od-row-multi:has(.od-multi-inputs-3) {
  grid-template-columns: 1fr 180px;
}
/* Auto-Risk rows pack a number input + a unit (Pts/%) dropdown into the right
   column — the default 110px squeezes the input to ~40px. Widen the control
   column for these (input flex:1 auto-expands; the modal is 760px so the label
   still has ample room). */
.orderdef-modal-grid .od-row:has(.od-dual) {
  grid-template-columns: 1fr 172px;
}
.orderdef-modal-grid .od-row .od-dual > input { flex: 1 1 auto; min-width: 0; }
.orderdef-modal-grid .od-row .od-dual > select { flex: 0 0 60px; }
.od-multi-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.od-multi-inputs.od-multi-inputs-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.od-multi-inputs > .od-input {
  width: 100%;
  text-align: right;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.od-multi-inputs > .od-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.12),
              0 0 0 2px rgba(13, 61, 138, 0.18);
}
.od-multi-inputs > .od-input::placeholder {
  color: var(--muted);
  opacity: 0.55;
  font-weight: 500;
}
.orderdef-modal-grid .od-lbl {
  font-size: 12px;
  font-weight: 600;
  /* dimmed from full-white — bright labels were glaring on the dark modal */
  color: color-mix(in srgb, var(--text, #d8dee6) 72%, var(--panel-2, #1f2530));
}
.orderdef-modal-body { color: color-mix(in srgb, var(--text, #d8dee6) 78%, var(--panel-2, #1f2530)); }
.orderdef-modal-grid .od-input {
  font-size: 12px;
}
@media (max-width: 700px) {
  .orderdef-modal-grid { grid-template-columns: 1fr; }
}
.qt-buy-tag  { color: #16a34a; font-weight: 700; }
.qt-sell-tag { color: #dc2626; font-weight: 700; }

/* ----- Position card spacing inside panel ----- */
.trade-position {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  flex: 1;
}

/* Right-click context menu — appears at click point on the chart. */
.trade-ctxmenu {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.35);
  padding: 4px 0;
  font-size: 12.5px;
  user-select: none;
}
.trade-ctxmenu.hidden { display: none; }
.trade-ctxmenu .ic-item {
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  color: var(--text);
}
.trade-ctxmenu .ic-item:hover { background: var(--row-hover); }
.trade-ctxmenu .ic-item b { color: var(--header-text); }
.trade-ctxmenu .ic-icon {
  width: 16px; text-align: center; flex: 0 0 16px;
  font-weight: 700; font-size: 12px;
  color: var(--muted);
}
.trade-ctxmenu .ic-icon.ic-buy { color: #16a34a; }
.trade-ctxmenu .ic-icon.ic-sell { color: #dc2626; }
.trade-ctxmenu .ic-icon.ic-exit { color: #ea580c; }
.trade-ctxmenu .ic-meta {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
}
.trade-ctxmenu .ic-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Topbar selected-instrument tile + full-chart modal ──────────── */
.instr-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.instr-tile.hidden { display: none; }
.instr-name {
  font-weight: 700; color: var(--header-text);
  letter-spacing: 0.3px;
}
.instr-lp {
  font-weight: 600; color: var(--text);
  font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.instr-chg {
  font-size: 12px; font-weight: 600;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  padding: 2px 6px; border-radius: 3px;
  background: var(--panel-2);
}
.instr-chg.pos { color: #16a34a; background: rgba(34,197,94,0.10); }
.instr-chg.neg { color: #dc2626; background: rgba(239,68,68,0.10); }
.instr-chart-btn {
  background: transparent; color: var(--accent);
  border: 1px solid rgba(122,162,255,0.35);
  border-radius: 4px;
  padding: 2px 6px; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.instr-chart-btn:hover {
  background: rgba(122,162,255,0.18);
  border-color: var(--accent);
  color: var(--header-text);
}

/* Big chart popup */
.instr-modal {
  position: fixed; inset: 0; z-index: 9999;
}
.instr-modal.hidden { display: none; }
.instr-modal-bg {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.instr-modal-card {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  height: min(640px, 80vh);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.instr-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.instr-modal-head h3 {
  margin: 0; font-size: 14px; font-weight: 700;
  color: var(--header-text); letter-spacing: 0.3px;
}
.instr-modal-controls {
  display: inline-flex; align-items: center; gap: 8px;
}
#instr-modal-close {
  font-size: 18px; line-height: 1; padding: 0 8px;
}
.instr-modal-chart {
  flex: 1 1 auto;
  position: relative;
  min-height: 280px;
}

/* Hide the manual Refresh button and "Scanning…" status on the Setups
   page — backend auto-rebuilds via the 1-min cron and the frontend
   auto-polls every 5 min, so the user never needs to click anything. */
[data-page="setups"] #setups-refresh,
[data-page="setups"] #setups-status { display: none !important; }

/* ── Platform Disclaimer (general, multi-page) ─────────────────────
   Amber-framed compliance banner used on the Login page (inline-styled
   there) and the Setups page (uses these classes). Distinct from the
   detector-specific .setups-disclosure red banner — this one is the
   broader "FNOTrader is a tech product, not SEBI-registered" notice. */
.platform-disclaimer {
  margin: 12px 0 14px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  color: #78350f;
  font-size: 12.5px;
  line-height: 1.55;
}
.platform-disclaimer-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.platform-disclaimer-icon {
  font-size: 18px;
  color: #d97706;
  line-height: 1;
}
.platform-disclaimer-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: #92400e;
  letter-spacing: 0.2px;
}
.platform-disclaimer-body p {
  margin: 0 0 10px;
}
.platform-disclaimer-body p:last-child { margin-bottom: 0; }
.platform-disclaimer-body b {
  color: #78350f;
  font-weight: 700;
}
:root[data-theme="dark"] .platform-disclaimer,
:root[data-theme="blue"] .platform-disclaimer {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fde68a;
}
:root[data-theme="dark"] .platform-disclaimer-title,
:root[data-theme="blue"] .platform-disclaimer-title { color: #fbbf24; }
:root[data-theme="dark"] .platform-disclaimer-icon,
:root[data-theme="blue"] .platform-disclaimer-icon { color: #fbbf24; }
:root[data-theme="dark"] .platform-disclaimer-body b,
:root[data-theme="blue"] .platform-disclaimer-body b { color: #fde68a; }

/* ── Setups Risk Disclosure ─────────────────────────────────────────
   Required compliance banner — sits above the setups grid, always
   visible. Strong red/amber framing so it can't be ignored, with an
   expand-on-click long-form reading the SEBI-style disclaimer. */
.setups-disclosure {
  margin: 0 0 14px;
  border: 1px solid rgba(239,68,68,0.35);
  border-left: 4px solid #dc2626;
  background: linear-gradient(90deg, rgba(239,68,68,0.06), rgba(239,68,68,0.02) 60%, transparent);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--text);
}
.setups-disclosure-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.setups-disclosure-icon {
  font-size: 16px; color: #dc2626; flex-shrink: 0;
  font-weight: 700;
}
.setups-disclosure-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: #b91c1c;
  flex: 1 1 auto;
}
.setups-disclosure-toggle {
  background: transparent; color: #b91c1c;
  border: 1px solid rgba(239,68,68,0.40);
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; cursor: pointer;
  font-family: inherit;
}
.setups-disclosure-toggle:hover {
  background: rgba(239,68,68,0.10);
}
.setups-disclosure-summary {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text);
}
.setups-disclosure-summary b { color: #b91c1c; font-weight: 600; }
.setups-disclosure-body {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(239,68,68,0.30);
  font-size: 12px; line-height: 1.7;
  color: var(--text);
}
.setups-disclosure-list {
  margin: 0; padding-left: 22px;
  list-style: decimal;
}
.setups-disclosure-list > li {
  margin-bottom: 8px;
}
.setups-disclosure-list > li::marker {
  color: #b91c1c; font-weight: 700;
}
.setups-disclosure-list b {
  color: #b91c1c; font-weight: 600;
}
.setups-disclosure-foot {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dotted rgba(239,68,68,0.25);
  font-size: 11px; color: var(--muted); font-style: italic;
}
@media print {
  .setups-disclosure { page-break-inside: avoid; }
  .setups-disclosure-toggle { display: none; }
  .setups-disclosure-body { display: block !important; }
}

/* ── Market Report — Institutional research-note aesthetic ─────────
   Designed to look like a printed sell-side morning brief: white paper
   on a soft blue backdrop, navy serif headlines, dense tabular data,
   footnoted disclaimer. Stays the same across light/dark themes so it
   reads like a research PDF rather than a dashboard panel. */

[data-page="report"] {
  background: var(--bg); /* theme-aware backdrop (follows dark / light / blue) */
  padding: 0; /* paper sits flush below the page-header — no extra gap */
  margin-top: 0;
}
/* Tighten the page-header → paper gap. The default page-header has
   `margin-bottom`; override for the report page so the document feels
   continuous from the controls strip into the paper. */
[data-page="report"] .page-header { margin-bottom: 0; padding-bottom: 8px; }

.rep-paper {
  --paper-ink:        #0a2540; /* deep navy — primary text */
  --paper-ink-soft:   #475674; /* secondary navy */
  --paper-ink-faint:  #8a99b3; /* light navy-grey for labels */
  --paper-rule:       #d3dae5; /* cool grey-blue rule */
  --paper-rule-soft:  #e8edf4;
  --paper-bg:         #ffffff; /* pure white paper */
  --paper-band:       #f4f7fc; /* very light blue tint for alternating rows */
  --paper-accent:     #1d4ed8; /* corporate blue — matches .seg-btn.active */
  --paper-accent-2:   #3b82f6;
  --paper-accent-dk:  #1e3a8a;
  --paper-pos:        #047857; /* emerald green for positive */
  --paper-neg:        #b91c1c; /* deep red for negative */
  --paper-warn:       #b45309; /* amber for warnings */
  --paper-info:       #1d4ed8;
  --paper-serif:      'Source Serif 4', 'Source Serif Pro', 'Tinos', 'Cambria', Georgia, serif;
  --paper-mono:       ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --paper-sans:       'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Fill the viewport area — was max-width:980px which left large empty
   * margins on either side. Now spans the full report pane with small gutters. */
  max-width: none;
  margin: 12px 16px;
  background: var(--paper-bg);
  color: var(--paper-ink);
  font-family: var(--paper-sans);
  font-size: 13px;
  line-height: 1.55;
  padding: 36px 44px 28px;
  border: 1px solid var(--paper-rule);
  border-radius: 2px;
  box-shadow: 0 6px 28px rgba(10,37,64,0.12), 0 1px 0 rgba(10,37,64,0.04);
  position: relative;
}
/* Top corporate accent bar — looks like the cover stripe of a research PDF */
.rep-paper::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--paper-accent-dk), var(--paper-accent), var(--paper-accent-2));
  border-radius: 2px 2px 0 0;
}

/* Masthead — brand line + headline + date stamp */
.rep-masthead {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--paper-accent-dk);
  padding-bottom: 14px; margin-bottom: 22px;
  gap: 24px;
}
.rep-brand {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--paper-accent-dk);
  margin-bottom: 6px;
}
.rep-masthead-title {
  font-family: var(--paper-serif);
  font-size: 30px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--paper-ink); line-height: 1.1; margin-bottom: 4px;
}
.rep-masthead-date {
  font-size: 12px; color: var(--paper-ink-soft);
  font-style: italic;
}
.rep-masthead-r { text-align: right; }
.rep-masthead-stamp {
  font-size: 11px; color: var(--paper-ink-soft);
  margin-bottom: 2px;
  font-family: var(--paper-mono);
}
.rep-stamp-lbl {
  text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 9px; color: var(--paper-ink-faint); margin-right: 6px;
}
.rep-stamp-val { font-weight: 600; color: var(--paper-ink); }

/* Card / section block */
.rep-card {
  background: transparent;
  border-top: 1px solid var(--paper-rule);
  padding: 16px 0 18px;
  margin: 0;
}
.rep-card:first-of-type { border-top: none; padding-top: 0; }
.rep-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.rep-card-title {
  font-family: var(--paper-serif);
  font-size: 18px; font-weight: 700; color: var(--paper-ink);
  margin: 0; letter-spacing: -0.2px;
  display: flex; align-items: baseline; gap: 8px;
}
.rep-card-num {
  display: inline-block;
  font-family: var(--paper-mono);
  font-size: 11px; font-weight: 600;
  color: var(--paper-ink-faint);
  letter-spacing: 1px;
  padding-right: 4px;
  border-right: 1px solid var(--paper-rule);
  margin-right: 6px;
}
.rep-card-sub {
  font-size: 12px; color: var(--paper-ink-soft);
  font-style: italic; margin-top: 3px;
}
.rep-card-sub .rep-num { font-style: normal; }
.rep-card-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Headline / briefing card — the lead block */
.rep-headline {
  border-top: none;
  padding-top: 8px; padding-bottom: 22px;
  margin-bottom: 6px;
  position: relative;
}
.rep-headline-bar {
  height: 4px; width: 100%; margin-bottom: 16px;
  background: var(--paper-ink);
}
.rep-headline-bar.verdict-bullish        { background: linear-gradient(90deg, var(--paper-pos), #10b981); }
.rep-headline-bar.verdict-mildly-bullish { background: linear-gradient(90deg, var(--paper-pos), var(--paper-accent)); }
.rep-headline-bar.verdict-neutral        { background: linear-gradient(90deg, var(--paper-accent-dk), var(--paper-accent)); }
.rep-headline-bar.verdict-mildly-bearish { background: linear-gradient(90deg, var(--paper-warn), #f59e0b); }
.rep-headline-bar.verdict-bearish        { background: linear-gradient(90deg, var(--paper-neg), #ef4444); }
.rep-headline-eyebrow {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--paper-ink-faint); font-weight: 600; margin-bottom: 6px;
}
.rep-headline-title {
  font-family: var(--paper-serif);
  font-size: 24px; font-weight: 700; color: var(--paper-ink);
  margin: 0; letter-spacing: -0.4px; line-height: 1.2;
}
.rep-narr-list {
  margin: 14px 0 0; padding-left: 20px;
  font-size: 13.5px; line-height: 1.7;
  color: var(--paper-ink);
}
.rep-narr-list li { margin-bottom: 5px; }
.rep-narr-list li::marker { color: var(--paper-ink-faint); }

/* Sub-panels inside cards (Asia / US prev / US futs etc.) */
.rep-panel {
  margin-bottom: 14px;
  background: transparent;
}
.rep-panel:last-child { margin-bottom: 0; }
.rep-panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  border-bottom: 1px dotted var(--paper-rule);
  padding-bottom: 4px;
}
.rep-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--paper-ink);
}
.rep-panel-stat {
  font-size: 11px; color: var(--paper-ink-soft);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--paper-mono);
}
.rep-panel-stat-lbl {
  text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 9px; color: var(--paper-ink-faint);
}

/* Tables — pin-stripe, mono numerics, dense */
.rep-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; color: var(--paper-ink);
  font-family: var(--paper-sans);
}
.rep-table th {
  text-align: left; padding: 5px 10px 5px 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--paper-ink-faint);
  border-bottom: 1px solid var(--paper-ink);
  background: transparent;
}
.rep-table td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--paper-rule-soft);
  background: transparent;
}
.rep-table tbody tr:nth-child(even) td { background: var(--paper-band); }
.rep-table tbody tr:last-child td { border-bottom: 1px solid var(--paper-ink); }
.rep-table tr.pos td:last-child,
.rep-table tr.neg td:last-child { font-weight: 600; }
.rep-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--paper-mono); font-size: 11.5px;
  white-space: nowrap;
}
.rep-num.pos { color: var(--paper-pos); }
.rep-num.neg { color: var(--paper-neg); }
.rep-arrow { font-size: 9px; margin-right: 2px; }
.rep-lbl {
  font-weight: 500; color: var(--paper-ink);
  padding-right: 16px;
}
.rep-sym { font-weight: 600; color: var(--paper-ink); font-family: var(--paper-mono); font-size: 11.5px; }
.rep-cap { text-transform: capitalize; color: var(--paper-ink-soft); font-size: 11.5px; }

.rep-warn-dot {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%; background: var(--paper-warn);
  color: #fff; font-size: 9px; font-weight: 700;
  text-align: center; line-height: 14px; margin-left: 6px;
  font-family: var(--paper-mono);
}

/* Pills — verdict / urgency tags */
.rep-pill {
  font-family: var(--paper-sans);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  padding: 3px 9px; border-radius: 3px;
  text-transform: uppercase;
  background: var(--paper-band); color: var(--paper-ink-soft);
  border: 1px solid var(--paper-rule);
}
.rep-pill-lg { font-size: 11px; padding: 5px 12px; letter-spacing: 1.4px; }
.rep-pill.rep-warn { background: rgba(180,83,9,0.10);  color: var(--paper-warn); border-color: rgba(180,83,9,0.40); }
.rep-pill.rep-info { background: rgba(29,78,216,0.10); color: var(--paper-info);  border-color: rgba(29,78,216,0.40); }
.rep-verdict-bullish        { background: rgba(4,120,87,0.12);   color: var(--paper-pos); border-color: rgba(4,120,87,0.45); }
.rep-verdict-mildly-bullish { background: rgba(4,120,87,0.07);   color: var(--paper-pos); border-color: rgba(4,120,87,0.30); }
.rep-verdict-neutral        { background: rgba(29,78,216,0.07);  color: var(--paper-accent-dk); border-color: rgba(29,78,216,0.25); }
.rep-verdict-mildly-bearish { background: rgba(185,28,28,0.08);  color: var(--paper-neg); border-color: rgba(185,28,28,0.35); }
.rep-verdict-bearish        { background: rgba(185,28,28,0.14);  color: var(--paper-neg); border-color: rgba(185,28,28,0.50); }

/* Conviction gauge — 5 dots, fills based on score */
.rep-gauge { display: flex; gap: 4px; align-items: center; }
.rep-gauge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper-rule); border: 1px solid var(--paper-rule);
}
.rep-gauge-dot.on.bull { background: var(--paper-pos); border-color: var(--paper-pos); }
.rep-gauge-dot.on.bear { background: var(--paper-neg); border-color: var(--paper-neg); }
.rep-gauge-dot.on.neutral { background: var(--paper-ink-soft); border-color: var(--paper-ink-soft); }

/* India VIX call-out panel */
.rep-vix {
  margin-top: 8px; padding: 10px 14px;
  background: var(--paper-band);
  border-left: 3px solid var(--paper-accent);
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: baseline; gap: 12px;
}
.rep-vix-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--paper-ink-faint);
}
.rep-vix-lp {
  font-family: var(--paper-mono); font-size: 18px; font-weight: 700;
  color: var(--paper-ink);
}
.rep-vix-chg {
  font-family: var(--paper-mono); font-size: 12px; font-weight: 600;
}
.rep-vix-chg.pos { color: var(--paper-pos); }
.rep-vix-chg.neg { color: var(--paper-neg); }
.rep-vix-tone {
  font-size: 11.5px; color: var(--paper-ink-soft); font-style: italic;
  text-align: right;
}

/* Movers — 2-column inside one card */
.rep-movers-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
@media (max-width: 760px) {
  .rep-movers-grid { grid-template-columns: 1fr; gap: 14px; }
}
.rep-pos { color: var(--paper-pos); }
.rep-neg { color: var(--paper-neg); }

/* Footer — disclaimer + colophon */
.rep-footer {
  margin-top: 28px; padding-top: 16px;
  border-top: 2px solid var(--paper-ink);
  font-size: 10.5px; color: var(--paper-ink-soft);
  line-height: 1.6;
}
.rep-disclaimer { font-style: italic; margin-bottom: 10px; }
.rep-disclaimer strong {
  font-style: normal; font-weight: 700;
  color: var(--paper-ink); letter-spacing: 1px;
}
.rep-colophon {
  font-family: var(--paper-mono); font-size: 10px;
  color: var(--paper-ink-faint); text-align: center;
  border-top: 1px dotted var(--paper-rule);
  padding-top: 8px;
}

/* Slot segmented switcher tweaks for the report header */
.rep-meta { display: none; } /* legacy meta line — superseded by masthead */

/* On smaller screens collapse padding */
@media (max-width: 760px) {
  .rep-paper { padding: 22px 18px 18px; }
  .rep-masthead { flex-direction: column; align-items: flex-start; }
  .rep-masthead-r { text-align: left; }
  .rep-masthead-title { font-size: 22px; }
  .rep-vix { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   QuickTrade — universal Buy/Sell button pair sprinkled across
   the app (stocks list, chain, breakout/ORB, topbar instr tile).
   Click bubbles to the global handler that switches symbol +
   navigates to the Chart Trade page + opens the paper position.
   ============================================================ */
.qt-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  vertical-align: middle;
}
.qt-btn {
  --qt-bg: #16a34a;
  --qt-bd: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 8px;
  min-width: 26px;
  height: 22px;
  border: 1px solid var(--qt-bd);
  background: var(--qt-bg);
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.08s ease;
  font-family: inherit;
}
.qt-btn:hover  { filter: brightness(1.10); }
.qt-btn:active { transform: translateY(1px); }
.qt-btn.qt-buy  { --qt-bg: #16a34a; --qt-bd: #15803d; }
.qt-btn.qt-sell { --qt-bg: #dc2626; --qt-bd: #b91c1c; }
/* Tiny variant — for dense table rows. */
.qt-actions.qt-tiny .qt-btn {
  font-size: 10px;
  padding: 2px 5px;
  min-width: 20px;
  height: 18px;
  border-radius: 3px;
}
/* Vertical stack variant (Stocks Summary primary FUT row). */
.qt-actions.qt-stack {
  flex-direction: row; /* keep horizontal but smaller */
}
.qt-mini-row {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
  padding-left: 4px;
  border-left: 1px solid var(--border);
}
.qt-mini-row .qt-actions { gap: 2px; }
.qt-actions.qt-ce::before,
.qt-actions.qt-pe::before {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-right: 2px;
  align-self: center;
}
.qt-actions.qt-ce::before { content: 'CE'; color: #16a34a; }
.qt-actions.qt-pe::before { content: 'PE'; color: #dc2626; }
.qt-cell {
  text-align: center !important;
  white-space: nowrap;
  padding: 2px 6px !important;
}
.qt-cell .qt-actions { gap: 3px; }
.qt-th { text-align: center; }
/* Topbar tile variant — sit alongside the chart-icon button. */
.qt-actions.qt-topbar {
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid var(--border);
}
.qt-actions.qt-topbar .qt-btn {
  font-size: 10px;
  padding: 3px 6px;
  height: 20px;
  min-width: 22px;
}
/* Strike cell in the option chain — number on top, B/S buttons below. */
.strike .strike-num {
  display: block;
  font-weight: 700;
}
.strike .strike-qt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 9px;
}
.strike .qt-sep {
  width: 1px; height: 12px; background: var(--border);
  display: inline-block; margin: 0 2px;
}
/* Keep the strike cell neutral when its row is ATM or being hovered —
   otherwise the row tint bleeds through and visually drowns the B/S
   button pair. The ATM indicator (top/bottom amber borders + the "ATM"
   ::after tag) is preserved on the row, but the cell BACKGROUND stays
   on the standard panel colour. */
.chain tr.atm td.strike,
.chain tr:hover td.strike,
.chain td.strike:hover {
  background: var(--panel-2) !important;
  color: var(--header-text) !important;
  box-shadow: none !important;
}
/* Disable the ATM row's inset shadow where it intersects the strike
   cell, so the orange wash stops at the cell edge. */
.chain tr.atm td.strike { box-shadow: none !important; }
/* Print — hide trade buttons in printed output */
@media print {
  .qt-actions { display: none !important; }
}

/* ============================================================
   Work-in-progress gate — body.no-trade hides Chart Trade,
   Setups, the Order Defaults config + every Buy/Sell button
   sprinkled across the app for users not on the allow-list
   (set in app.js TRADE_ALLOWED_EMAILS).
   ============================================================ */
/* Cover BOTH top-level tabs AND dropdown items — Chart Trade lives
   inside the Strategy dropdown as <a class="nav-drop-item" data-route="trade">,
   not as a <a class="tab">. A bare attribute selector matches both. */
body.no-trade [data-route="trade"],
body.no-trade [data-route="setups"],
body.no-trade [data-route="buyer"],
body.no-trade [data-page="trade"],
body.no-trade [data-page="setups"],
body.no-trade [data-page="buyer"],
body.no-trade #orderdef-btn,
body.no-trade .tb-defbar-btn[data-act="defaults"],
body.no-trade #orderdef-modal,
body.no-trade .qt-actions,
body.no-trade .qt-cell,
body.no-trade .qt-th,
body.no-trade .strike-qt,
body.no-trade .strike-qt-stradtbl,
body.no-trade .ctv-cell-qt,
body.no-trade .sg-strike-qt,
body.no-trade .chart-title-qt-host {
  display: none !important;
}

/* Admin-only opt-in to hide just the Buy/Sell controls (keeps the
   gated nav items + pages visible — only suppresses the trade UI).
   Toggled via the topbar `Buy/Sell` checkbox + persisted to
   localStorage 'oa.hideTradeBtns'. Same selector list as `no-trade`
   minus the route/page rules. */
body.hide-trade-btns .qt-actions,
body.hide-trade-btns .qt-cell,
body.hide-trade-btns .qt-th,
body.hide-trade-btns .strike-qt,
body.hide-trade-btns .strike-qt-stradtbl,
body.hide-trade-btns .ctv-cell-qt,
body.hide-trade-btns .sg-strike-qt,
body.hide-trade-btns .chart-title-qt-host {
  display: none !important;
}
/* The admin toggle chip itself is irrelevant for non-admin (they
   already get `body.no-trade`). Hide it so the topbar isn't cluttered
   with controls that do nothing. */
body.no-trade .topbar-cb-admin { display: none !important; }

/* Dashboard gate — body.no-dash hides the Dashboard tab + page section
   for users not on the allow-list (set in app.js DASH_ALLOWED_EMAILS). */
body.no-dash [data-route="dash"],
body.no-dash [data-route="dash-new"],
body.no-dash [data-page="dash"],
body.no-dash [data-page="dash-new"] {
  display: none !important;
}

/* Straddle / Strangle Table — Buy/Sell inline next to each price cell.
   The price number stays its full size on the left; B/S buttons sit
   immediately to its right, reading like:  124.50  ▲▼ */
.stradtbl td[data-col$="-px"],
.stradtbl td[data-col="sg-px"] {
  white-space: nowrap;
}
.stradtbl td .px-num {
  display: inline-block;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.qt-actions.qt-px-side {
  vertical-align: middle;
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
}
.qt-actions.qt-px-side .qt-btn {
  height: 16px;
  min-width: 18px;
  padding: 0 4px;
  font-size: 9px;
  border-radius: 3px;
}
/* Chain LTP cell: keep number + B/S on the same line */
.chain .cell2 .t {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.chain .cell2 .t b { margin-right: 0; }
.qt-actions.qt-strad::before {
  content: 'ST';
  color: #7aa2ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  margin-right: 2px;
  align-self: center;
}
/* Chart-grid view (CE/PE/Straddle row of mini charts) — Buy/Sell at the
   TOP of each chart card, in the .ctv-cell-head row, right-aligned next
   to the live price tag. */
.ctv-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.ctv-cell-qt {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
}
.ctv-cell-qt:empty { display: none; }
.ctv-cell-qt .qt-actions { font-size: 9px; }

/* Straddle-grid view — Buy/Sell next to strike label in cell head */
.sg-cell-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sg-strike-qt { display: inline-flex; gap: 2px; }
.sg-strike-qt:empty { display: none; }
.sg-strike-qt .qt-actions { font-size: 9px; }

/* Print — strip the chrome, keep the paper */
@media print {
  body { background: white !important; }
  [data-page="report"] { background: white !important; padding: 0; }
  .topbar, .tabs, .page-header, .side, .signout-wrap, .hover-chart,
  .setup-hover-card, .stock-hover-card, #report-print, #report-refresh,
  #report-slot-seg { display: none !important; }
  .page { display: none !important; }
  /* Print ONLY the currently-active page. Was hard-coded to [data-page="report"],
   * which — combined with the chain block's `.page { display: block }` below —
   * forced every page (incl. the option chain) into the print/PDF. */
  .page.active { display: block !important; }
  .rep-paper {
    box-shadow: none; border: none; max-width: none;
    margin: 0; padding: 12mm 14mm;
  }
  .rep-card { page-break-inside: avoid; }
  .rep-headline { page-break-after: avoid; }
}

/* Print: keep the chain readable on a printed page (full table, no
   sticky/overflow). Useful when traders print snapshots for review. */
@media print {
  .topbar, .tabs, .page-header, .side, .signout-wrap, .hover-chart,
  .setup-hover-card, .stock-hover-card { display: none !important; }
  /* Page visibility is handled by `.page.active` in the print block above —
   * do NOT re-show every `.page` here (that leaked other pages into prints). */
  .chain { font-size: 9px; }
}

/* ── Flat-view chain (trial) ─────────────────────────────────────────────
   3-section synced layout:  CE pane | Strike (exact centre) | PE pane.
   Header strip is page-sticky (separate from the scrolling bodies) so a
   2-tier header — CALLS / STRIKE / PUTS group + per-metric labels —
   stays visible while the user scrolls.

   Strike column is dead-centre: each side pane is `flex: 1 1 0` (equal
   share of remaining space) while Strike is `flex: 0 0 auto`. No page-
   level horizontal scroll: column overflow stays inside the side panes.
   Scroll-sync: CE↔PE bodies mirror each other; CE header ↔ CE body 1:1
   (same for PE) — header strips have `overflow: hidden`, JS sets their
   scrollLeft programmatically. */
.chain-flat-wrap { display: block; width: 100%; }
.chain-flat-wrap[hidden] { display: none !important; }

/* ── Header strip (sticky at the page level) ──────────────────────────── */
.chain-flat-headers {
  position: sticky;
  top: 238px;
  z-index: 10;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--panel);
  border-bottom: 1px solid var(--bd);
}
.cfh-side {
  flex: 1 1 0;
  min-width: 0;
  /* No native scrollbar on the header — JS sets scrollLeft programmatically
     to mirror the matching body pane. */
  overflow: hidden;
  display: block;
}
.chain-flat-headers > .cf-strike {
  flex: 0 0 auto;
  min-width: 96px;
}
/* ── Body grid (sits below the sticky header strip) ───────────────────── */
.chain-flat-grid {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.cfg-side {
  flex: 1 1 0;
  min-width: 0;
  /* Block (not flex) so a scrollbar appears on EITHER side when the table
     overflows. With display:flex + justify-content:flex-end Chrome failed
     to expose a scrollbar for the left-overflow on the CE pane — switching
     to block + `margin-left:auto` for CE gives natural right-anchoring
     while still rendering a scrollbar at the pane's bottom. */
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.cfg-side::-webkit-scrollbar       { height: 8px; }
.cfg-side::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 3px; }
.chain-flat-grid > .cf-strike { flex: 0 0 auto; min-width: 96px; }

/* Anchor the CE table to the RIGHT inside its pane so the LTP column
   (rightmost in CE) sits flush with the Strike column. PE stays left-
   anchored naturally so LTP (leftmost in PE) abuts Strike on the other
   side. Both auto-fall-back to scrolling when the table overflows. */
.cfh-ce > .cf-tbl,
.cfg-ce > .cf-tbl { margin-left: auto; }
.cfh-pe > .cf-tbl,
.cfg-pe > .cf-tbl { margin-right: auto; }

/* ── Shared table chrome (used by both header and body tables) ───────── */
.cf-tbl {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  width: max-content;
  flex: 0 0 auto;
}
.cf-tbl th, .cf-tbl td {
  white-space: nowrap;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

/* Group row (CALLS / STRIKE / PUTS) — top tier of the sticky header. */
.cf-tbl thead tr.grp th {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  height: 30px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.cf-tbl thead th.ce-grp {
  color: var(--green);
  border-bottom: 2px solid var(--green);
}
.cf-tbl thead th.pe-grp {
  color: var(--red);
  border-bottom: 2px solid var(--red);
}
.cf-tbl thead th.strike-grp {
  color: var(--amber);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 2px solid var(--amber);
  background: var(--panel-2);
  vertical-align: middle;
}
/* Per-metric row (second tier). */
.cf-tbl thead tr:not(.grp) th {
  padding: 6px 10px;
  border-bottom: 1px solid var(--bd);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  height: 30px;
  background: var(--panel);
}
.cf-tbl thead th.strike {
  text-align: center;
  color: var(--amber);
  background: var(--panel-2);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: middle;
}
.cf-tbl thead th.ce { color: var(--green); }
.cf-tbl thead th.pe { color: var(--red); }

/* Body cells.
   CALLS / STRIKE / PUTS render as THREE separate side-by-side <table>s, so they
   only stay row-aligned if every body row is the exact same height in all three.
   `height` alone is just a MINIMUM, so a column with taller content or padding
   (e.g. the L–H range bar) can grow its row a pixel or two — and because the
   tables are independent, those differences accumulate into visible drift down
   the ladder. Pin a FIXED 32px row height with zero vertical padding (content is
   vertically centred instead), so no column/side can inflate a row. */
.cf-tbl tbody tr { height: 32px; }
.cf-tbl tbody td {
  padding: 0 10px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  height: 32px;
  vertical-align: middle;
}
.cf-tbl td.strike {
  text-align: center;
  font-weight: 700;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.cf-tbl td.strike:hover {
  background: var(--accent);
  color: white;
}
/* Center metric columns (OI PCR / Vol PCR / IV) — single, non-mirrored,
   sit in the Strike group. Centered + read-only (no strike-modal hover). */
.cf-tbl td.strike-meta,
.cf-tbl th.strike-meta {
  text-align: center;
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}
.cf-tbl .c-oipcr,
.cf-tbl .c-volpcr { min-width: 66px; }

/* ── Column min-widths — keep header columns aligned with body columns ─
   Header strip and body grid render TWO separate tables (so headers can
   be page-sticky outside the scrolling pane). For columns to line up
   visually, each metric needs a deterministic min-width applied to both
   the thead th and the tbody td of the same column id. */
.cf-tbl .c-buildup { min-width: 70px; }
.cf-tbl .c-delta,
.cf-tbl .c-gamma,
.cf-tbl .c-theta,
.cf-tbl .c-vega    { min-width: 56px; }
.cf-tbl .c-oi,
.cf-tbl .c-oichg,
.cf-tbl .c-vol     { min-width: 78px; }
.cf-tbl .c-iv,
.cf-tbl .c-vwap    { min-width: 60px; }
.cf-tbl .c-bid,
.cf-tbl .c-ask     { min-width: 80px; }
.cf-tbl .c-range   { min-width: 110px; }
.cf-tbl .c-chg     { min-width: 110px; }
.cf-tbl .c-ltp     { min-width: 76px; }

/* ── ITM tint — green for CE, red for PE (matches CALLS/PUTS identity) ─ */
.cf-tbl td.ce-itm { background: rgba(94, 184, 122, 0.10); }
.cf-tbl td.pe-itm { background: rgba(229, 115, 115, 0.10); }

/* OI / OI Chg / Vol top-3 ranks (green ramp CE, red ramp PE). */
.cf-tbl td.top-1    { background: rgba(94, 184, 122, 0.32) !important; box-shadow: inset 3px 0 0 var(--green); }
.cf-tbl td.top-2    { background: rgba(94, 184, 122, 0.22) !important; box-shadow: inset 2px 0 0 var(--green); }
.cf-tbl td.top-3    { background: rgba(94, 184, 122, 0.14) !important; }
.cf-tbl td.pe-top-1 { background: rgba(229, 115, 115, 0.32) !important; box-shadow: inset -3px 0 0 var(--red); }
.cf-tbl td.pe-top-2 { background: rgba(229, 115, 115, 0.22) !important; box-shadow: inset -2px 0 0 var(--red); }
.cf-tbl td.pe-top-3 { background: rgba(229, 115, 115, 0.14) !important; }

/* Row hover + ATM row highlight */
.cf-tbl tr.strike-row:hover td:not(.strike) { background: var(--row-hover); }
.cf-tbl tr.atm-row td {
  background: rgba(255, 199, 92, 0.10);
  border-top: 1px solid rgba(255, 199, 92, 0.35);
  border-bottom: 1px solid rgba(255, 199, 92, 0.35);
}
.cf-tbl tr.atm-row td.strike {
  background: rgba(255, 199, 92, 0.22);
  color: var(--amber);
  font-weight: 700;
}

/* Per-column polish */
.cf-tbl td.ltp     { font-weight: 600; color: var(--text); }
.cf-tbl td.iv      { color: var(--text); }
.cf-tbl td.delta,
.cf-tbl td.gamma,
.cf-tbl td.theta,
.cf-tbl td.vega    { color: var(--muted); }
.cf-tbl td.buildup { text-align: center; }
.cf-tbl td.chg .pct { opacity: 0.78; font-size: 11px; margin-left: 1px; }
.cf-tbl td.bid .bid { color: var(--red);   font-weight: 600; }
.cf-tbl td.ask .ask { color: var(--green); font-weight: 600; }

/* ── Illiquidity icon on LTP cells ───────────────────────────────── */
.cf-tbl td.ltp .liq-i {
  display: inline-block;
  margin-left: 3px;
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  color: var(--amber, #f59e0b);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  cursor: help;
}
.cf-tbl td.ltp .liq-i.stale {
  opacity: 1;
  pointer-events: auto;
}
.cf-tbl td.bid .qty,
.cf-tbl td.ask .qty { opacity: 0.6; font-size: 11px; margin-left: 3px; }
/* Range (L–H) cell: match the uniform 0 vertical padding so its row height
   equals every other column's. The bar is vertically centred by the cell, so
   drop its margin-top (which would otherwise push it off-centre). */
.cf-tbl td.range   { padding: 0 8px; }
.cf-tbl td.range .hl-bar { width: 100%; margin-top: 0; }

/* Blink-on-day-high / day-low */
@keyframes flatBlinkHigh {
  0%   { background-color: rgba(94, 184, 122, 0.55); box-shadow: inset 0 0 0 2px rgba(94, 184, 122, 0.7); }
  100% { background-color: transparent;              box-shadow: inset 0 0 0 0   transparent; }
}
@keyframes flatBlinkLow {
  0%   { background-color: rgba(229, 115, 115, 0.55); box-shadow: inset 0 0 0 2px rgba(229, 115, 115, 0.7); }
  100% { background-color: transparent;               box-shadow: inset 0 0 0 0   transparent; }
}
.cf-tbl td.blink-high { animation: flatBlinkHigh 0.8s ease-out; }
.cf-tbl td.blink-low  { animation: flatBlinkLow  0.8s ease-out; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  STRATEGY CHART PAGE — 2×2 multi-chart grid                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Outer wrapper ───────────────────────────────────────────── */
.mc-wrap {
  height: calc(100vh - 88px - var(--favbar-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── Global header bar ───────────────────────────────────────── */
.mc-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--panel);
}
.mc-bar-title {
  font-weight: 600;
}

/* ── 2×2 Grid ────────────────────────────────────────────────── */
.mc-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  background: var(--bg);
}

/* ── Individual panel ────────────────────────────────────────── */
.mc-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--mc-accent, var(--border));
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Panel header ────────────────────────────────────────────── */
.mc-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  background: var(--panel);
}
.mc-accent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mc-accent);
  flex-shrink: 0;
}
.mc-strat-sel {
  background: transparent; border: none; border-bottom: 1px dashed var(--border);
  color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0 2px; max-width: 165px;
  outline: none;
}
.mc-strat-sel:focus { border-bottom-color: var(--accent); }
.mc-name {
  font-weight: 600;
  font-size: 12px;
}
.mc-ohlc {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.mc-ohlc .bull { color: var(--green); }
.mc-ohlc .bear { color: var(--red); }

/* ── Chart container — intentionally darker than header for depth ── */
.mc-chart {
  flex: 1;
  min-height: 0;
  background: var(--bg);
}

/* ── Per-panel status ────────────────────────────────────────── */
.mc-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
}
.mc-status.warn  { color: var(--amber, #f59e0b); }
.mc-status.error { color: var(--red); }
/* ── Panel header label + controls ──────────────────────────── */
.mc-lbl {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
  letter-spacing: 0.01em;
}
/* Leg summary: S 74800CE · B 74600PE */
.mc-legs-sum {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--muted); flex-shrink: 0;
  white-space: nowrap; overflow: hidden; max-width: 220px; text-overflow: ellipsis;
}
.mcls-buy  { color: #4ade80; font-weight: 700; }
.mcls-sell { color: #ff6b6b; font-weight: 700; }
.mcls-strike { color: var(--text); font-size: 10px; }
.mcls-sep { color: var(--border); margin: 0 2px; }
/* Chart type seg */
.mc-ct-seg { flex-shrink: 0; }
.mc-ct-seg .seg-btn { font-size: 10px; padding: 1px 5px; }
/* Indicator toggle */
.mc-ind-tog { font-size: 10px; padding: 1px 5px; opacity: 0.6; transition: opacity 0.15s, color 0.15s; }
.mc-ind-tog:hover, .mc-ind-tog.active { opacity: 1; color: var(--accent); border-color: var(--accent); }
/* Indicator panel */
.mc-ind-panel {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 5px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.mc-ind-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.mc-ind-lbl input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.mc-edit-tog {
  font-size: 10px; padding: 2px 8px; border-radius: 5px;
  opacity: 0.6; transition: opacity 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
  letter-spacing: 0.02em;
}
.mc-edit-tog:hover { opacity: 1; }
.mc-edit-tog.active {
  opacity: 1; color: #fff;
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(122,169,240,0.22);
}
/* Expand / collapse per-panel button */
.mc-expand { font-size: 11px; padding: 1px 5px; opacity: 0.5; transition: opacity 0.15s, color 0.15s; }
.mc-expand:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
.mc-expand.active { opacity: 1; color: var(--accent); border-color: var(--accent); }
/* Single-panel expanded mode: hide all panels except the active one */
.mc-grid.mc-single .mc-panel { display: none; }
.mc-grid.mc-single .mc-panel.mc-active {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* ── Collapsible leg editor ───────────────────────────────────── */
.mc-editor {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px 8px; flex-shrink: 0; max-height: 250px; overflow-y: auto;
}
.mc-editor-legs { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-bottom: 8px; }

/* ── Individual leg row ──────────────────────────────────────── */
.mc-leg-row {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 6px;
  transition: border-color 0.15s;
}
.mc-leg-row:hover { border-color: rgba(122,169,240,0.4); }

/* B/S badge — vivid color coded pill */
.mcl-bs {
  width: 48px; font-weight: 700; font-size: 11px; text-align: center;
  border-radius: 6px; height: 24px; padding: 0 4px;
  outline: none; cursor: pointer;
  background: rgba(239,68,68,0.18);
  border: 1px solid rgba(239,68,68,0.45);
  color: #ff6b6b;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mc-leg-row[data-bs="B"] .mcl-bs {
  background: rgba(34,197,94,0.18);
  border-color: rgba(34,197,94,0.45);
  color: #4ade80;
}

/* Custom strike picker (replaces native select) */
.mcl-strike-pick { flex-shrink: 0; position: relative; }
.mcl-sp-btn {
  width: 112px; height: 24px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 4px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 11px; font-weight: 500;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: border-color 0.15s;
}
.mcl-sp-btn:hover { border-color: rgba(122,169,240,0.45); }
.mcl-sp-btn.open { border-color: var(--accent); }
.mcl-sp-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcl-sp-chv { font-size: 8px; color: var(--muted); flex-shrink: 0; margin-left: 2px; }
/* Dropdown reuses lsp-drop / lsp-item — just needs compact sizing */
.mcl-sp-drop { min-width: 150px; max-height: 200px; }
.mcl-sp-drop .lsp-item { padding: 5px 10px; font-size: 11px; }
.mcl-sp-drop .lsp-item.atm { background: rgba(59,130,246,0.15); }
.mcl-sp-drop .lsp-item.atm .lsp-tag { color: #60a5fa; font-weight: 700; }

/* CE/PE type badge */
.mcl-type {
  width: 42px; font-weight: 700; font-size: 11px; text-align: center;
  height: 24px; padding: 0 3px; border-radius: 6px; outline: none; cursor: pointer;
  background: rgba(122,169,240,0.14);
  border: 1px solid rgba(122,169,240,0.35);
  color: #93c5fd;
  transition: background 0.15s;
}
.mcl-type:focus { border-color: var(--accent); }

/* Qty */
.mcl-qty {
  width: 32px; text-align: center; font-weight: 700; font-size: 11px;
  -moz-appearance: textfield; height: 24px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); outline: none;
}
.mcl-qty::-webkit-outer-spin-button,
.mcl-qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.mcl-qty:focus { border-color: var(--accent); }

/* Remove button */
.mcl-rm {
  width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1;
  transition: all 0.12s;
}
.mcl-rm:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.5); color: #ff6b6b; }

/* ── Editor footer ───────────────────────────────────────────── */
.mc-editor-foot {
  display: flex; align-items: center; gap: 6px;
  padding-top: 7px; border-top: 1px solid var(--border);
}
/* keep hidden native select for fallback */
.mc-preset-sel { display: none; }

/* ── Custom preset color picker ──────────────────────────────── */
.mc-pp-wrap { position: relative; flex-shrink: 0; }
.mc-pp-btn {
  display: inline-flex; align-items: center; gap: 5px;
  width: 155px; height: 26px; padding: 0 8px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 11px; cursor: pointer; text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.mc-pp-btn:hover, .mc-pp-btn.open { border-color: rgba(122,169,240,0.5); color: var(--text); }
.mc-pp-btn.open { border-color: var(--accent); }
.mc-pp-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-pp-chv { font-size: 8px; color: var(--muted); flex-shrink: 0; }
.mc-pp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mc-pp-drop { min-width: 175px; padding: 4px 0; }
.mc-pp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px; font-size: 11px; cursor: pointer; white-space: nowrap;
  color: var(--text); transition: background 0.1s;
}
.mc-pp-item:hover { background: rgba(255,255,255,0.06); }
.mc-pp-sep {
  height: 1px; background: var(--border); margin: 4px 8px;
}

/* Primary (Load) button */
.btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2, #4e78d6) 100%);
  color: #fff; border-color: transparent; font-weight: 700;
  box-shadow: 0 2px 8px rgba(122,169,240,0.28);
  transition: filter 0.15s, box-shadow 0.15s;
}
.btn.primary:hover { filter: brightness(1.12); box-shadow: 0 3px 14px rgba(122,169,240,0.42); }

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ════════════════════════════════════════════════════════════════════ */

/* Dashboard page: full viewport height, flex column so children can use flex:1.
   NOTE: display must only be set on .active — NOT on the bare selector, or it
   overrides .page{display:none} (attribute selector has higher specificity). */
.page[data-page="dash"].active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 44px - var(--favbar-h));   /* 44px = topbar min-height (instr-bar hidden via body.page-dash) */
  overflow: hidden;
  padding: 0;
}
/* Hide the global instr-bar on the dashboard (it has its own sym/expiry controls) */
body.page-dash    .instr-bar { display: none; }
body.page-rollatm .instr-bar { display: none; }
/* TV charts owns its own toolbar (symbol search, intervals, layout
 * splitter…) inside the widget — the app's instr-bar is redundant. */
body.page-tvchart .instr-bar { display: none; }
body.page-movers  .instr-bar { display: none; }
/* The symbol/expiry/basis bar is only meaningful on symbol-driven pages
   (option chain, straddle/strangle, strike, OI, GEX, vol, builder, chart-
   trade, …). Hide it on account / admin / trade-book / market-wide pages
   that don't key off a single instrument. (These pages are also in
   PAGES_NO_INSTR_BAR so their own .page-controls stay in the page header.) */
body.page-book          .instr-bar,
body.page-brokers       .instr-bar,
body.page-pricing       .instr-bar,
body.page-plans         .instr-bar,
body.page-subscriptions .instr-bar,
body.page-refer         .instr-bar,
body.page-upstream      .instr-bar,
body.page-alerts        .instr-bar,
body.page-buyer         .instr-bar,
body.page-stocks        .instr-bar,
body.page-setups        .instr-bar,
body.page-breadth       .instr-bar,
body.page-advdec        .instr-bar,
body.page-sectchg       .instr-bar,
body.page-brbar         .instr-bar,
body.page-brheat        .instr-bar,
body.page-report        .instr-bar,
body.page-cashmkt       .instr-bar,
body.page-fiiidx        .instr-bar,
body.page-partoi        .instr-bar,
body.page-mwpl          .instr-bar,
body.page-holidays      .instr-bar { display: none; }
/* With the instr-bar hidden the sticky stack is shorter, so the page-header
   must stick right under the topbar (44px) instead of 88px — otherwise a
   blank 44px band appears between the topbar and the header when scrolled. */
body.page-book          .page-header,
body.page-brokers       .page-header,
body.page-pricing       .page-header,
body.page-plans         .page-header,
body.page-subscriptions .page-header,
body.page-refer         .page-header,
body.page-upstream      .page-header,
body.page-alerts        .page-header,
body.page-buyer         .page-header,
body.page-stocks        .page-header,
body.page-setups        .page-header,
body.page-breadth       .page-header,
body.page-advdec        .page-header,
body.page-sectchg       .page-header,
body.page-brbar         .page-header,
body.page-brheat        .page-header,
body.page-report        .page-header,
body.page-cashmkt       .page-header,
body.page-fiiidx        .page-header,
body.page-partoi        .page-header,
body.page-mwpl          .page-header,
body.page-holidays      .page-header { top: 44px; }
/* Trade Book has its own compact header bar (broker + live P&L + actions),
   so the generic page-header title is redundant — hide it. */
body.page-book .page-header { display: none; }

.dash-wrap { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

/* ── Dashboard tab bar ──────────────────────────────────────────── */
.dash-tab-bar {
  display:flex; align-items:flex-end; gap:2px;
  padding:6px 10px 0; background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-shrink:0; overflow-x:auto; scrollbar-width:none;
}
.dash-tab-bar::-webkit-scrollbar { display:none; }
.dash-tab {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px 6px; min-width:0;
  background:transparent; border:1px solid transparent;
  border-bottom:none; border-radius:7px 7px 0 0;
  font-size:12px; font-weight:500; color:var(--muted);
  cursor:pointer; white-space:nowrap; position:relative; bottom:-1px;
  transition:color 0.15s, background 0.15s;
}
.dash-tab:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.dash-tab.active { color:var(--text); background:var(--bg); border-color:var(--border); border-bottom-color:var(--bg); }
.dash-tab-nm { max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.dash-tab-x {
  width:15px; height:15px; border-radius:3px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--muted); border:none; background:transparent;
  cursor:pointer; padding:0; transition:background 0.1s, color 0.1s;
}
.dash-tab-x:hover { background:rgba(255,107,107,0.15); color:#ff6b6b; }
.dash-tab-new {
  padding:4px 10px; margin-left:4px; flex-shrink:0; position:relative; bottom:-1px;
  background:transparent; border:1px solid var(--border); border-bottom:none;
  border-radius:7px 7px 0 0; font-size:15px; line-height:1;
  color:var(--muted); cursor:pointer; transition:color 0.15s, border-color 0.15s;
}
.dash-tab-new:hover { color:var(--accent); border-color:var(--accent); }

/* ── Control bar ─────────────────────────────────────────────────── */
.dash-ctl-bar {
  display:flex; align-items:center; gap:8px;
  padding:6px 12px; background:var(--panel);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.dash-board-name { font-size:13px; font-weight:600; color:var(--text); }
.dash-ctl-sep { width:1px; height:18px; background:var(--border); flex-shrink:0; }
.dash-sym-sel, .dash-exp-sel {
  background:var(--panel-2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:12px; padding:4px 8px; cursor:pointer; outline:none;
}
.dash-sym-sel:focus, .dash-exp-sel:focus { border-color:var(--accent); }

/* ── Grid wrap + CSS Grid engine ─────────────────────────────────── */
/* ── Pick-mode banner ────────────────────────────────────────────── */
.dash-pick-banner {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 6px 12px; font-size: 12px; color: var(--accent);
  background: rgba(122,162,255,0.08); border-bottom: 1px solid rgba(122,162,255,0.2);
}
.dash-grid-wrap {
  flex: 1; min-height: 0; overflow: hidden;
  background: var(--bg); padding: 8px;
  display: flex; flex-direction: column;
  position: relative;
}
/* Outer grid: 1 col, groups as rows */
.dash-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  position: relative;
}
/* Pick mode cursor */
.dash-grid.dash-pick-mode { cursor: crosshair; }
.dash-grid.dash-pick-mode .dash-widget { cursor: crosshair; }
/* Row group: owns its own column fr array */
.dash-row-group {
  display: grid;
  gap: 6px;
  min-height: 0; min-width: 0;
  position: relative;
}

/* ── Widget card (drag container) ────────────────────────────────── */
.dash-widget {
  background: transparent;
  overflow: hidden;
  cursor: grab;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  position: relative;
  transition: opacity 0.15s;
  border-radius: 10px;
}
.dash-widget:active { cursor: grabbing; }
.dash-widget.dragging { opacity: 0.3; }

/* Drop-edge overlay */
.dash-widget::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(122,162,255,0.2);
  border: 2px solid var(--accent);
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.1s;
}
.dash-widget.drop-left::after   { opacity:1; clip-path: inset(0 50% 0 0); }
.dash-widget.drop-right::after  { opacity:1; clip-path: inset(0 0 0 50%); }
.dash-widget.drop-top::after    { opacity:1; clip-path: inset(0 0 50% 0); }
.dash-widget.drop-bottom::after { opacity:1; clip-path: inset(50% 0 0 0); }

/* Drop placeholder */
.dash-placeholder {
  background: rgba(122,162,255,0.12);
  border: 2px dashed var(--accent);
  border-radius: 10px;
  pointer-events: none;
}

/* ── Seam resize handles ─────────────────────────────────────────── */
.dash-seam { position: absolute; z-index: 5; }
.dash-seam-v { cursor: col-resize; width: 14px; }
.dash-seam-h { cursor: row-resize; height: 14px; }
.dash-seam::before {
  content: '';
  position: absolute;
  background: transparent;
  transition: background 0.15s;
  border-radius: 2px;
}
.dash-seam-v::before { left: 6px; width: 2px; top: 0; bottom: 0; }
.dash-seam-h::before { top: 6px; height: 2px; left: 0; right: 0; }
.dash-seam:hover::before { background: var(--accent); opacity: 0.7; }
.dash-seam.active::before { background: var(--accent); opacity: 1; }
.dash-seam-v.active::before { width: 3px; }
.dash-seam-h.active::before { height: 3px; }

/* ── Widget panel flyout ─────────────────────────────────────────── */
.dash-wrap { position: relative; }
.dash-panel {
  position: absolute;
  top: 0; left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  z-index: 200;
  width: 460px;
  max-height: 360px;
  display: flex; flex-direction: column;
}
.dash-panel[hidden] { display: none; }
.dash-panel-hd {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
  flex-shrink: 0;
}
.dash-panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px; padding: 10px;
  overflow-y: auto;
}
.dash-ptile {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 7px; cursor: grab;
  background: var(--panel-2);
  user-select: none; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.dash-ptile:hover { border-color: var(--accent); background: rgba(122,162,255,0.06); }
.dash-ptile:active { cursor: grabbing; transform: scale(0.97); }
.dash-ptile.dragging { opacity: 0.4; }
.dash-ptile-icon { font-size: 18px; line-height: 1; margin-bottom: 3px; }
.dash-ptile-title { font-size: 10px; font-weight: 600; color: var(--text); line-height: 1.2; }

/* ── Widget card ─────────────────────────────────────────────────── */
.dw {
  display:flex; flex-direction:column; height:100%;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; overflow:hidden;
}
.dw-head {
  display:flex; align-items:center; gap:5px;
  padding:5px 8px; background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-shrink:0; font-size:11px; min-height:30px;
}
.dw-drag { color:var(--muted); font-size:13px; cursor:grab; flex-shrink:0; user-select:none; opacity:0.4; transition:opacity 0.15s; }
.dash-widget:hover .dw-drag { opacity:0.8; }
.dw-drag:active { cursor:grabbing; }
.dw-icon { font-size:12px; flex-shrink:0; line-height:1; }
.dw-title { font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dw-sub { font-size:10px; color:var(--muted); white-space:nowrap; flex-shrink:0; max-width:140px; overflow:hidden; text-overflow:ellipsis; }
.dw-head-r { margin-left:auto; display:flex; align-items:center; gap:3px; flex-shrink:0; }
.dw-ts { font-size:9px; color:var(--muted); white-space:nowrap; }
.dw-ref { font-size:10px; padding:1px 4px; opacity:0.5; }
.dw-ref:hover { opacity:1; }
.dw-del { font-size:10px; padding:1px 4px; opacity:0.6; pointer-events:auto; color:#ff6b6b; border-color:rgba(255,107,107,0.3); transition:opacity 0.15s; }
.dw-del:hover { background:rgba(255,107,107,0.1); }
.dw-body { flex:1; min-height:0; overflow:auto; position:relative; background:var(--bg); }

/* ── Widget body states ──────────────────────────────────────────── */
.dw-spinner, .dw-empty, .dw-err {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--muted); text-align:center; padding:12px;
}
.dw-err { color:#ff6b6b; }

/* ── OI / metrics tiles ──────────────────────────────────────────── */
.dw-metrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:7px; padding:10px; align-content:start; }
.dw-metric { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dw-metric-lbl { font-size:10px; color:var(--muted); margin-bottom:2px; }
.dw-metric-val { font-size:14px; font-weight:700; color:var(--text); }
.dw-metric-sub { font-size:10px; color:var(--muted); margin-top:2px; }

/* ── Option chain mini table ─────────────────────────────────────── */
.dw-chain-wrap { overflow:auto; height:100%; }
.dw-chain { width:100%; border-collapse:collapse; font-size:11px; }
.dw-chain th {
  position:sticky; top:0; z-index:1;
  background:var(--panel); color:var(--muted); font-weight:500;
  padding:5px 6px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap;
}
.dw-chain th.sc { text-align:center; }
.dw-chain td { padding:3px 6px; text-align:right; border-bottom:1px solid rgba(255,255,255,0.03); font-size:11px; }
.dw-chain td.sc { text-align:center; font-weight:600; background:var(--panel-2); }
.dw-chain tr.dw-atm td { background:rgba(122,169,240,0.07); }
.dw-chain tr.dw-atm td.sc { color:var(--accent); }
.dw-chain .ce-side { color:#4ade80; }
.dw-chain .pe-side { color:#ff6b6b; }

/* ── Straddle / strangle tables ──────────────────────────────────── */
.dw-tbl-wrap { overflow:auto; height:100%; }
.dw-tbl { width:100%; border-collapse:collapse; font-size:11px; }
.dw-tbl th { position:sticky; top:0; z-index:1; background:var(--panel); color:var(--muted); font-weight:500; padding:5px 8px; text-align:right; border-bottom:1px solid var(--border); white-space:nowrap; }
.dw-tbl th:first-child { text-align:center; }
.dw-tbl td { padding:4px 8px; text-align:right; border-bottom:1px solid rgba(255,255,255,0.03); }
.dw-tbl td:first-child { text-align:center; font-weight:600; color:var(--text); }
.dw-tbl tr.dw-atm td { background:rgba(122,169,240,0.06); }
.dw-tbl tr:hover td { background:rgba(255,255,255,0.02); }

/* ── Chart container inside widget ──────────────────────────────── */
.dw-chart { width:100%; height:100%; }

/* ── GEX widget ──────────────────────────────────────────────────── */
.dw-gex-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.dw-gex-metrics { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:6px; padding:8px; flex-shrink:0; }
.dw-gex-chart { flex:1; min-height:0; padding:4px 8px 8px; }
.dw-gex-chart canvas { width:100% !important; height:100% !important; }

/* ── Canvas charts in widget body ───────────────────────────────── */
.dw-canvas-wrap { padding:8px; height:100%; box-sizing:border-box; }
.dw-canvas-wrap canvas { width:100% !important; max-height:100% !important; }

/* ── Widget type picker grid (modal step 1) ─────────────────────── */
.dash-type-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  padding:12px; max-height:420px; overflow-y:auto;
}
.dash-type-card {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 8px; background:var(--panel-2);
  border:1px solid var(--border); border-radius:10px;
  cursor:pointer; text-align:center;
  transition:border-color 0.15s, background 0.15s;
}
.dash-type-card:hover { border-color:var(--accent); background:rgba(122,169,240,0.06); }
.dash-type-card.selected { border-color:var(--accent); background:rgba(122,169,240,0.1); }
.dtc-icon { font-size:22px; line-height:1; }
.dtc-label { font-size:11px; font-weight:600; color:var(--text); line-height:1.2; }
.dtc-desc { font-size:10px; color:var(--muted); line-height:1.3; }

/* ── Config form ─────────────────────────────────────────────────── */
.dash-cfg-body { padding:12px; display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; }
.dash-cfg-row { display:flex; flex-direction:column; gap:4px; }
.dash-cfg-label { font-size:11px; color:var(--muted); font-weight:500; }
.dash-inp {
  background:var(--panel-2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:12px; padding:6px 8px; outline:none; width:100%; box-sizing:border-box;
  transition:border-color 0.15s;
}
.dash-inp:focus { border-color:var(--accent); }
select.dash-inp { cursor:pointer; }
.dash-sym-drop {
  position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:400;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  max-height:200px; overflow-y:auto; box-shadow:0 8px 28px rgba(0,0,0,0.5);
}
.dash-sym-item { padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--border); }
.dash-sym-item:hover { background:var(--panel-2); }
.dash-sym-item:last-child { border-bottom:none; }
.dsi-sym { font-size:12px; font-weight:600; color:var(--text); }
.dsi-meta { font-size:10px; color:var(--muted); margin-top:1px; }
.dash-cfg-note { font-size:11px; color:var(--muted); padding:6px 8px; background:var(--panel-2); border-radius:6px; }

/* ── Modal overlay ───────────────────────────────────────────────── */
.dash-modal-bg {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.dash-modal-box {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  width:540px; max-width:95vw; max-height:85vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.65);
}
.dash-modal-sm { width:360px; }
.dash-modal-head {
  display:flex; align-items:center; padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--text); flex-shrink:0;
}
.dash-modal-head span { flex:1; }
.dash-modal-foot {
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; padding:10px 14px; border-top:1px solid var(--border); flex-shrink:0;
}

/* light theme overrides */
:root[data-theme="light"] .dw-chain tr.dw-atm td { background:rgba(59,130,246,0.07); }
:root[data-theme="light"] .dw-tbl tr.dw-atm td { background:rgba(59,130,246,0.06); }

/* ── Dashboard v2 extras ─────────────────────────────────────────── */
/* Tile aliases (JS renders dw-tile*, mirrors dw-metric* styles) */
.dw-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:7px; padding:10px; align-content:start; }
.dw-tile { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.dw-tile-lbl { font-size:10px; color:var(--muted); margin-bottom:2px; }
.dw-tile-val { font-size:14px; font-weight:700; }

/* ── Per-widget config button ────────────────────────────────────── */
.dw-cfg-btn { font-size:11px; padding:1px 4px; opacity:0.5; }
.dw-cfg-btn:hover { opacity:1; }

/* ── Per-widget config panel ─────────────────────────────────────── */
.dw-cfg-panel {
  position: absolute; inset: 0; z-index: 20;
  background: var(--panel); border-radius: 10px;
  display: flex; flex-direction: column; gap: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  overflow: hidden;
}
.dw-cfg-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.dw-cfg-field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dw-cfg-field label { font-size: 10px; color: var(--muted); font-weight: 500; }
.dw-cfg-field input, .dw-cfg-field select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 5px; padding: 5px 8px; font-size: 12px; width: 100%; box-sizing: border-box;
}
.dw-cfg-field input:focus, .dw-cfg-field select:focus { border-color: var(--accent); outline: none; }
.dw-cfg-foot {
  display: flex; gap: 6px; padding: 8px 10px; margin-top: auto; flex-shrink: 0;
}
/* Symbol search dropdown inside config */
.dw-sym-drop {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  max-height: 180px; overflow-y: auto; margin-top: 2px;
}
.dw-sym-drop.hidden { display: none; }
.dw-sym-item {
  padding: 6px 8px; cursor: pointer; font-size: 12px; color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex; justify-content: space-between; align-items: center;
}
.dw-sym-item:last-child { border-bottom: none; }
.dw-sym-item:hover { background: rgba(122,162,255,0.08); }
.dw-sym-exch { font-size: 10px; color: var(--muted); margin-left: 6px; }

/* ATM row + strike column aliases in dw-tbl */
.dw-tbl tr.atm-row td { background:rgba(122,169,240,0.06); }
.dw-tbl td.strike-col { text-align:center !important; font-weight:700; color:var(--accent); }
.dw-tbl td.pos { color:var(--green); }
.dw-tbl td.neg { color:var(--red); }
:root[data-theme="light"] .dw-tbl tr.atm-row td { background:rgba(59,130,246,0.06); }

/* Widget type picker cards (modal step 1) */
.type-card { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 8px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; cursor:pointer; text-align:center; transition:border-color 0.15s, background 0.15s; }
.type-card:hover { border-color:var(--accent); background:rgba(122,169,240,0.06); }
.type-card.selected { border-color:var(--accent); background:rgba(122,169,240,0.1); }
.type-card-icon { font-size:22px; line-height:1; }
.type-card-label { font-size:11px; font-weight:600; color:var(--text); line-height:1.2; }

/* Config form inputs + note */
.cfg-note { font-size:11px; color:var(--muted); padding:6px 8px; background:var(--panel-2); border-radius:6px; margin:0; }
.cfg-input { background:var(--panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; padding:6px 8px; outline:none; width:100%; box-sizing:border-box; transition:border-color 0.15s; display:block; margin-top:3px; }
.cfg-input:focus { border-color:var(--accent); }
select.cfg-input { cursor:pointer; }
.dash-cfg-body label, #dash-cfg-area label { display:block; font-size:11px; color:var(--muted); font-weight:500; position:relative; }

/* Symbol search dropdown */
.cfg-dropdown { position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:400; background:var(--panel); border:1px solid var(--border); border-radius:8px; max-height:200px; overflow-y:auto; box-shadow:0 8px 28px rgba(0,0,0,0.5); }
.cfg-result-item { padding:7px 10px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text); }
.cfg-result-item:hover { background:var(--panel-2); }
.cfg-result-item:last-child { border-bottom:none; }
.cfg-result-ex { font-size:10px; color:var(--muted); margin-left:auto; }

/* TF seg group in config form */
.seg-group { display:flex; background:var(--panel-2); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-top:4px; }
.seg-group .seg-btn { flex:1; border-right:1px solid var(--border); border-radius:0; padding:5px 6px; font-size:11px; }
.seg-group .seg-btn:last-child { border-right:none; }

/* ── Breadth widget ───────────────────────────────────────────────── */
.dw-brd-wrap { display:flex; flex-direction:column; height:100%; overflow:auto; padding:8px; gap:8px; box-sizing:border-box; }
.dw-brd-bars { display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.dw-brd-bar { background:var(--panel); border-radius:7px; padding:7px 10px; }
.dw-brd-bar-hd { display:flex; align-items:center; justify-content:space-between; font-size:10px; margin-bottom:5px; gap:6px; flex-wrap:wrap; }
.dw-brd-bar-lbl { font-weight:700; color:var(--muted); letter-spacing:0.4px; font-size:9px; }
.dw-brd-track { height:5px; background:rgba(248,113,113,0.25); border-radius:3px; overflow:hidden; }
.dw-brd-fill { height:100%; background:linear-gradient(90deg,#4ade80,#22c55e); border-radius:3px; transition:width 0.6s ease; }
.dw-brd-stages { display:flex; flex-wrap:wrap; gap:4px; flex-shrink:0; }
.dw-brd-chip { font-size:10px; font-weight:600; padding:3px 8px; border-radius:10px; border:1px solid; white-space:nowrap; }

/* ── Live Broker tab (real positions + orders) ───────────────────────── */
.trade-live-pane { display:flex; flex-direction:column; height:100%; overflow:hidden; gap:0; }
.trade-live-toolbar {
  display:flex; align-items:center; gap:6px;
  padding:7px 10px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.trade-live-broker-sel {
  flex:1; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text); border-radius:6px; padding:4px 8px; font-size:12px;
}
.trade-live-broker-sel:focus { outline:none; border-color:var(--accent); }
.trade-live-status { flex:0 0 auto; white-space:nowrap; }
.trade-live-section { display:flex; flex-direction:column; flex:1 1 0; min-height:0; }
.trade-live-sh {
  font-size:10px; font-weight:700; letter-spacing:0.5px; color:var(--muted);
  padding:6px 10px 4px; text-transform:uppercase; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.trade-live-tbl td, .trade-live-tbl th { font-size:11px; padding:5px 6px; }
/* Live tab button pulse when active */
.trade-toptab[data-trade-tab="live"] { color:var(--accent); }
.trade-toptab[data-trade-tab="live"].active { color:#fff; }
/* P&L colouring in live tables */
.live-pnl-pos { color:#4ade80; }
.live-pnl-neg { color:#f87171; }
.live-side-buy  { color:#4ade80; font-weight:700; }
.live-side-sell { color:#f87171; font-weight:700; }
.live-status-complete { color:#4ade80; }
.live-status-rejected, .live-status-cancelled { color:#f87171; }
.live-status-open, .live-status-trigger { color:#fbbf24; }

/* ── Order Confirm Modal ─────────────────────────────────────────────── */
.order-modal-overlay {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
}
.order-modal-overlay.hidden { display:none; }
.order-modal-box {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:0; width:340px; max-width:95vw;
  box-shadow:0 24px 64px rgba(0,0,0,0.7);
  display:flex; flex-direction:column;
}
.order-modal-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 10px; border-bottom:1px solid var(--border);
}
.order-modal-title { font-size:14px; font-weight:700; color:var(--text); }
.order-modal-x {
  background:none; border:none; color:var(--muted); font-size:16px;
  cursor:pointer; padding:2px 6px; border-radius:6px; line-height:1;
}
.order-modal-x:hover { background:var(--panel-2); color:var(--text); }
.order-modal-body { padding:14px 18px; display:flex; flex-direction:column; gap:12px; }
.order-modal-top { display:flex; align-items:center; gap:10px; }
.order-modal-side {
  font-size:11px; font-weight:800; letter-spacing:0.6px;
  padding:4px 10px; border-radius:20px;
  background:rgba(74,222,128,0.18); color:#4ade80; border:1px solid rgba(74,222,128,0.35);
}
.order-modal-side.sell {
  background:rgba(248,113,113,0.18); color:#f87171; border-color:rgba(248,113,113,0.35);
}
.order-modal-instr { font-size:14px; font-weight:700; color:var(--text); }
.order-modal-legs { display:flex; flex-direction:column; gap:6px; }
.order-modal-leg {
  background:var(--panel-2); border-radius:8px; padding:8px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.om-leg-type { font-size:12px; font-weight:700; color:var(--text); min-width:60px; }
.om-leg-qty  { font-size:12px; color:var(--muted); }
.om-leg-price{ font-size:12px; color:var(--accent); font-weight:600; margin-left:auto; }
.om-leg-otype{ font-size:10px; color:var(--muted); background:var(--panel); border-radius:4px; padding:2px 5px; }
.om-leg-prod { font-size:10px; color:var(--muted); background:var(--panel); border-radius:4px; padding:2px 5px; }
.order-modal-label { font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:4px; font-weight:600; letter-spacing:0.3px; }
.order-modal-sel {
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:7px 10px; font-size:13px; width:100%;
}
.order-modal-sel:focus { outline:none; border-color:var(--accent); }
/* Confirm-Order account dropdown — the shared .brk-dd component sized to
   fill the modal row (topbar version is a compact chip). */
.om-brk-dd { width:100%; margin-top:6px; }
.om-brk-dd .brk-dd-btn { width:100%; max-width:none; height:36px; border-radius:7px; }
.om-brk-dd .brk-dd-menu { left:0; right:0; max-width:none; }
.order-modal-status {
  margin:0 18px 6px; font-size:12px; padding:7px 10px;
  background:rgba(248,113,113,0.12); border:1px solid rgba(248,113,113,0.3);
  border-radius:7px; color:#f87171; text-align:center;
}
.order-modal-status.hidden { display:none; }
.order-modal-status.ok { background:rgba(74,222,128,0.12); border-color:rgba(74,222,128,0.3); color:#4ade80; }
.order-modal-ft {
  display:flex; gap:10px; padding:12px 18px 16px;
  border-top:1px solid var(--border);
}
.order-modal-cancel {
  flex:1; background:var(--panel-2); color:var(--muted); border-radius:8px;
  padding:9px; font-size:13px; font-weight:600;
}
.order-modal-cancel:hover { background:var(--panel); color:var(--text); }
.order-modal-exec {
  flex:2; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
  border-radius:8px; padding:9px; font-size:13px; font-weight:700;
  box-shadow:0 2px 12px rgba(34,197,94,0.35);
}
.order-modal-exec.sell-exec {
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  box-shadow:0 2px 12px rgba(239,68,68,0.35);
}
.order-modal-exec:disabled { opacity:0.5; cursor:not-allowed; }
.order-modal-exec:not(:disabled):hover { filter:brightness(1.1); }

/* The dashboard topbar used to expose Theme cycle / Help / Sign-out as
   separate icon buttons. Those moved INSIDE the profile popover so the
   topbar reads cleanly (only the live recorder dot, settings cog,
   QuikTrade CTA, and the avatar chip remain). The DOM nodes are kept
   so existing event handlers (sign-out wiring, theme change listener)
   keep working — we just hide them visually here. */
.topbar-right #theme-cycle,
.topbar-right #help-btn,
.topbar-right #signout-btn { display: none !important; }

/* Topbar avatar button — round chip with the user's initial. Sits in
   the topbar-right group; opens #profile-pop on click. The initial is
   set dynamically by app.js after /api/user-profile resolves. */
.profile-btn-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: 0; padding: 0;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: filter .12s, box-shadow .12s;
}
.profile-btn-avatar:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(59,130,246,0.32); }
.profile-btn-avatar:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* ============================================================
   Profile popover — opens from #profile-btn in the top-right.
   Compact stocks-app-style card: avatar + name/email header,
   subscription summary, theme switcher, sign-out, help/FAQ links.
   Theme-aware via shared --panel / --border / --text tokens.
   ============================================================ */
.profile-pop {
  position: fixed; z-index: 1500;
  width: 320px; max-width: calc(100vw - 16px);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.36), 0 4px 10px rgba(0,0,0,0.22);
  padding: 16px;
  font-size: 13px;
}
.profile-pop.hidden { display: none; }

/* Header row: round avatar + name/email */
.profile-hd {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.profile-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600;
  flex-shrink: 0;
  user-select: none;
}
.profile-hd-r { min-width: 0; flex: 1; }
.profile-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-email {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

/* Section blocks (SUBSCRIPTION, THEME) */
.profile-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.profile-sec-hd {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.8px; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
/* "Manage →" link rendered inside the SUBSCRIPTION section header.
   Sits opposite the section title via the parent's justify-content
   space-between. Subtle by default (matches the muted header), blue
   on hover so it announces itself as interactive. */
.profile-sec-manage {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--link, #2563eb);
  text-decoration: none; text-transform: none;
  padding: 1px 6px; border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.profile-sec-manage:hover { background: rgba(37,99,235,0.10); color: #1d4ed8; }

/* SUBSCRIPTION line */
.profile-sub-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.profile-sub-status {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.profile-sub-chip {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.profile-sub-chip.active  { color: #22c55e; background: rgba(34,197,94,0.10); }
.profile-sub-chip.expired { color: #ef4444; background: rgba(239,68,68,0.08); }
.profile-sub-valid {
  font-size: 12px; color: var(--muted); margin-top: 6px;
}
/* Per-plan active summary (name + valid-till) under the subscription chip. */
.profile-sub-plans { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.profile-sub-plans:empty { display: none; }
.profile-sub-plan {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 5px 9px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.profile-sub-plan .pp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }
.profile-sub-plan .pp-name { color: var(--text); font-weight: 600; }
.profile-sub-plan .pp-date { margin-left: auto; color: var(--muted); white-space: nowrap; }
.profile-sub-plan.warn { border-color: rgba(224,168,60,0.45); background: rgba(224,168,60,0.10); }
.profile-sub-plan.warn .pp-dot { background: var(--amber, #e0a83c); }
.profile-sub-plan.warn .pp-date { color: var(--amber, #e0a83c); }
.profile-sub-renew {
  display: block; margin-top: 6px; padding: 7px 10px; border-radius: 8px;
  background: rgba(224,168,60,0.12); border: 1px solid rgba(224,168,60,0.4);
  color: var(--amber, #e0a83c); font-size: 12px; font-weight: 600; text-decoration: none;
}
.profile-sub-renew:hover { background: rgba(224,168,60,0.18); }

/* THEME segmented buttons */
.profile-theme-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.profile-theme-btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 0;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  /* Keep the label single-line — "Advanced (TV)" was wrapping in the
   * narrow engine-seg column before. */
  white-space: nowrap;
}
/* Engine segment has only 2 buttons (Lightweight / Advanced (TV)) — the
 * inherited 3-column theme-seg layout left each button too narrow and
 * wrapped "Advanced (TV)" onto two lines. Use a 2-column grid here. */
#profile-engine-seg.profile-theme-seg { grid-template-columns: 1fr 1fr; }
.profile-theme-btn:hover { border-color: var(--accent); }
.profile-theme-btn.active {
  background: rgba(59,130,246,0.18);
  border-color: #3b82f6;
  color: var(--text);
  font-weight: 600;
}

/* Chart engine toggle — visible to all users. Same visual pattern as
   the theme segment so the popup stays consistent. */
.profile-engine-sec { padding-bottom: 6px; }
.profile-engine-hint {
  display: block;
  margin-top: 6px;
  font-size: 10px; line-height: 1.4;
  color: var(--muted);
}
/* Flip the chart-engine info tooltip BELOW the icon — the section
   sits near the top of the profile popup, so an above-positioned
   tooltip would clip out of the viewport. The icon also gets a
   slightly larger hover target since this one is meant to be
   discovered + read, not just an inline hint. */
.profile-engine-info {
  width: 16px; height: 16px;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 6px;
}
.profile-engine-info::after {
  bottom: auto;
  top: calc(100% + 8px);
  width: 260px;
  white-space: pre-wrap;
}
.profile-engine-info::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-right: none;
  border-bottom: none;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* CE / PE color pickers */
.profile-colors-sec { padding-bottom: 12px; }
.profile-colors-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  margin-bottom: 8px;
}
.profile-color-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.profile-color-lbl {
  font-size: 11px; font-weight: 600; color: var(--text);
}
.profile-color-pick {
  width: 28px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; background: transparent;
}
.profile-color-pick::-webkit-color-swatch-wrapper { padding: 0; }
.profile-color-pick::-webkit-color-swatch { border: 0; border-radius: 3px; }
.profile-colors-reset {
  display: block; width: 100%;
  background: transparent; border: 1px dashed var(--border);
  color: var(--muted); font-size: 11px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.profile-colors-reset:hover { color: var(--text); border-color: var(--accent); }

/* Sign out (full-width red) */
.profile-signout {
  display: block; width: 100%;
  margin: 14px 0 12px;
  background: rgba(239,68,68,0.08);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.30);
  border-radius: 8px;
  padding: 10px 0;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.profile-signout:hover { background: rgba(239,68,68,0.16); color: #f87171; }

/* Footer links (Help · FAQ) */
.profile-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.profile-foot a {
  color: var(--muted); text-decoration: none;
}
.profile-foot a:hover { color: var(--text); }
.profile-foot-sep { color: var(--muted); }


/* =====================================================================
   REFERRAL PROGRAM PAGE
   ===================================================================== */
.page[data-page="refer"] {
  padding: 0 16px 24px;
  gap: 14px;
  display: none;
  flex-direction: column;
}
.page[data-page="refer"].active { display: flex; }

.refer-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--accent), #2563eb);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(37, 99, 235, 0.5);
}
.refer-hero-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.refer-hero-text h2 { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: #fff; }
.refer-hero-text p  { margin: 0; font-size: 13px; color: rgba(255,255,255,0.88); }

.refer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 920px) { .refer-grid { grid-template-columns: 1fr; } }

.refer-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; flex-direction: column;
}
.refer-card-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}

/* QR */
.refer-qr-wrap {
  display: flex; align-items: center; justify-content: center;
  margin: 6px auto 8px;
}
.refer-qr-wrap img {
  width: 220px; height: 220px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.refer-qr-caption {
  text-align: center; font-size: 11.5px; color: var(--muted);
  margin: 4px 0 14px;
}

/* Link + copy */
.refer-link-row {
  display: flex; gap: 6px; align-items: center;
}
.refer-link-row input {
  flex: 1; min-width: 0;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit; font-size: 12.5px;
  font-family: 'Inter', 'SF Mono', Consolas, monospace;
}
.refer-link-row input:focus { outline: none; border-color: var(--accent); }

/* Share */
.refer-share-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
}
.refer-share-lbl { font-size: 12px; color: var(--muted); }
.refer-share-btn {
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  transition: transform 0.1s, filter 0.15s;
}
.refer-share-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.refer-share-wa { background: #25D366; }
.refer-share-fb { background: #1877F2; }
.refer-share-x  { background: #000; }
[data-theme="light"] .refer-share-x { background: #0f172a; }

/* How it works */
.refer-card-info { gap: 12px; }
.refer-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.refer-steps li { display: flex; gap: 12px; align-items: flex-start; }
.refer-step-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.refer-step-1 { background: rgba(122,162,255,0.18); color: var(--accent); }
.refer-step-2 { background: rgba(94,184,122,0.18); color: var(--green); }
.refer-step-3 { background: rgba(212,168,87,0.18); color: var(--amber); }
.refer-step-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.refer-step-text  { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Reward tiers */
.refer-rewards {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.refer-rewards-hd { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.refer-reward-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}
.refer-reward-row:last-of-type { border-bottom: 0; }
.refer-reward-tier  { color: var(--text); font-weight: 600; }
.refer-reward-prize { color: var(--green); font-weight: 600; }
.refer-eligible {
  margin-top: 8px; font-size: 11.5px; color: var(--muted);
  font-style: italic;
}

/* Stats row */
.refer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 920px) { .refer-stats { grid-template-columns: repeat(2, 1fr); } }
.refer-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.refer-stat-icon {
  width: 40px; height: 40px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 auto;
}
.refer-stat-earn  .refer-stat-icon { background: #10b981; }
.refer-stat-leads .refer-stat-icon { background: #3b82f6; }
.refer-stat-conv  .refer-stat-icon { background: #06b6d4; }
.refer-stat-prog  .refer-stat-icon { background: #f59e0b; }
.refer-stat-val { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; }
.refer-stat-lbl { font-size: 11.5px; color: var(--muted); }

/* Referred users table */
.refer-users-hd { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.refer-users-wrap { overflow-x: auto; }
.refer-users-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.refer-users-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.refer-users-table tbody td {
  padding: 10px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.refer-users-table tbody tr:last-child td { border-bottom: 0; }
.refer-em { color: var(--muted); }
.refer-users-empty { text-align: center; color: var(--muted); padding: 18px 10px; font-size: 12px; }
.refer-users-empty.refer-err { color: var(--red); }
.refer-status { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.refer-status.good { background: rgba(94,184,122,0.18); color: var(--green); }
.refer-status.warn { background: rgba(212,168,87,0.18); color: var(--amber); }

/* Profile-popover Refer & Earn link — full-width row aligned with the
 * Sign out button + theme segment below (matches the popover's 16px
 * padding rather than adding its own horizontal margin). */
.profile-refer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  width: 100%; padding: 10px 12px; margin: 14px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.profile-refer:hover { background: rgba(122,162,255,0.10); border-color: var(--accent); color: var(--accent); }


/* =====================================================================
   TV CHARTS PAGE — hosts the TradingView Charting Library widget
   ===================================================================== */
.page[data-page="tvchart"] {
  display: none;
  flex-direction: column;
  padding: 0;
  /* TV charts hides the .instr-bar (see body.page-tvchart rule above)
   * so the page only sits below the topbar (~57px) — mirrors rollatm. */
  height: calc(100vh - 57px - var(--favbar-h));
  overflow: hidden;
}
.page[data-page="tvchart"].active { display: flex; }
.tvchart-host {
  flex: 1; min-height: 0;
  width: 100%;
  background: var(--bg);
  position: relative;
}
/* Fallback card shown by tvcharts.js when the licensed Charting
 * Library isn't present at /charting_library/charting_library.js. */
.tvchart-warn {
  max-width: 720px;
  margin: 40px auto;
  padding: 24px 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.tvchart-warn h3 {
  margin: 0 0 10px;
  font-size: 16px; font-weight: 700;
  color: var(--amber);
}
.tvchart-warn p { margin: 0 0 12px; color: var(--muted); }
.tvchart-warn pre {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  margin: 0 0 12px;
  overflow-x: auto;
}
.tvchart-warn code { font-family: 'Inter', 'SF Mono', Consolas, monospace; }

/* =====================================================================
   TV CHARTS — Watchlist sidebar + layout
   ===================================================================== */
.tvchart-layout {
  display: flex;
  width: 100%; height: 100%;
  min-height: 0;
}
.tvchart-watchlist {
  width: 290px; min-width: 200px; max-width: 540px;
  flex-shrink: 0;
  background: var(--panel);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 12px;
}
/* Resize handle — transparent hit zone with a 1px centre line. Wider
 * than the visible line so it's easy to grab without adding visual
 * clutter next to the active-panel blue border. */
.tvchart-resize {
  width: 4px; flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  position: relative;
  transition: background 0.15s;
}
.tvchart-resize::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 1px;
  background: var(--border);
  transform: translateX(-0.5px);
}
.tvchart-resize:hover { background: rgba(122,162,255,0.18); }
.tvchart-resize:hover::before { background: var(--accent); }
.tvchart-layout .tvchart-host { flex: 1; min-width: 0; }

/* ── Option-chain panel (right of the chart) ───────────────────────────
   Chain table on top, CE/PE strike charts below. Collapsible to a thin rail. */
.tvchart-chain {
  width: 360px; min-width: 240px; max-width: 640px;
  flex-shrink: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: 11.5px;
}
.tvchart-chain.collapsed { width: 30px !important; min-width: 30px; }
.tvchart-chain.collapsed .tvc-body { display: none; }
.tvc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  cursor: default; white-space: nowrap;
}
.tvc-head .tvc-chev { cursor: pointer; color: var(--muted); font-size: 12px; }
.tvc-head .tvc-sym { font-weight: 800; color: var(--header-text); }
.tvc-head .tvc-exp { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; font-size: 11px; padding: 2px 4px; }
.tvc-head .tvc-spot { margin-left: auto; font-variant-numeric: tabular-nums; }
.tvchart-chain.collapsed .tvc-head { flex-direction: column; padding: 7px 4px; gap: 6px; }
.tvchart-chain.collapsed .tvc-head > *:not(.tvc-chev) { display: none; }
.tvc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tvc-table-wrap { overflow: auto; flex: 1 1 55%; min-height: 0; }
.tvc-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tvc-tbl th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 700;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 6px; border-bottom: 1px solid var(--border); }
.tvc-tbl th.ce { color: var(--green); } .tvc-tbl th.pe { color: var(--red); }
.tvc-tbl th { padding: 5px 4px; }
.tvc-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--border); text-align: right; cursor: pointer; }
.tvc-tbl td.tvc-up, .tvc-tbl th.tvc-up { color: var(--green); }
.tvc-tbl td.tvc-dn, .tvc-tbl th.tvc-dn { color: var(--red); }
/* CE/PE charts toolbar — TF segment + VWAP toggle */
.tvc-ctoolbar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.tvc-tf { display: inline-flex; gap: 2px; }
.tvc-tf button { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; font-size: 10px; padding: 2px 6px; cursor: pointer; }
.tvc-tf button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tvc-vw { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); cursor: pointer; }
.tvc-tbl td.k { text-align: center; font-weight: 700; background: var(--panel-2); }
.tvc-tbl tr:hover td { background: var(--row-hover); }
.tvc-tbl tr.atm td { background: var(--row-atm); }
.tvc-tbl tr.atm td.k { background: var(--amber); color: #1a1300; }
.tvc-tbl tr.sel td.k { box-shadow: inset 0 0 0 2px var(--accent); }
.tvc-tbl td.ce-oi { color: var(--green); } .tvc-tbl td.pe-oi { color: var(--red); }
/* ITM shading — CE in-the-money (below spot) mild green, PE (above spot) mild red */
.tvc-tbl td.itm-ce { background: rgba(38,166,154,0.10); }
.tvc-tbl td.itm-pe { background: rgba(239,83,80,0.10); }
.tvc-tbl tr.atm td.itm-ce, .tvc-tbl tr.atm td.itm-pe { background: var(--row-atm); }
.tvc-vsplit { height: 5px; flex: 0 0 5px; cursor: row-resize; background: var(--border); position: relative; }
.tvc-vsplit:hover { background: var(--accent); }
.tvc-charts { flex: 1 1 45%; min-height: 110px; display: flex; flex-direction: column; }
.tvc-chart-cell { flex: 1; min-height: 0; position: relative; }
.tvc-chart-cell + .tvc-chart-cell { border-top: 1px solid var(--border); }
.tvc-chart-cell .tvc-cl { position: absolute; top: 4px; left: 8px; z-index: 2; font-size: 10.5px; font-weight: 700; }
.tvc-chart-cell .tvc-cl.ce { color: var(--green); } .tvc-chart-cell .tvc-cl.pe { color: var(--red); }

/* Watchlist header — collapse btn | list-name dropdown | up/dn stats | + */
.wl-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.wl-title { font-size: 13px; font-weight: 700; color: var(--text); }
.wl-add-btn {
  background: var(--panel-2); color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
}
.wl-add-btn:hover { background: rgba(122,162,255,0.12); border-color: var(--accent); }

/* List-name dropdown trigger + popover (ported from portfolio-terminal).
   Anchored under .wl-name-area; absolute so it overlays the table below. */
.wl-name-area {
  position: relative;
  flex: 1; min-width: 0;
}
.wl-name-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: transparent; color: var(--text);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.wl-name-btn:hover, .wl-name-btn.open {
  background: var(--panel-2); border-color: var(--border);
}
.wl-color-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.wl-toolbar-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-toolbar-count {
  font-size: 10px; color: var(--muted); font-weight: 500;
  background: var(--panel-2); border-radius: 8px; padding: 1px 6px;
}
.wl-dd-caret { font-size: 10px; color: var(--muted); }
.wl-toolbar-stats {
  display: flex; gap: 6px;
  font-size: 10px; font-weight: 600;
}
.wl-stat-up { color: #16a34a; }
.wl-stat-dn { color: #dc2626; }
.wl-rename-input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
}
.wl-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 4px;
  max-height: 360px; overflow-y: auto;
  min-width: 200px;
}
.wl-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-size: 12px; color: var(--text);
  cursor: pointer; border-radius: 4px;
}
.wl-dd-item:hover { background: var(--panel-2); }
.wl-dd-item.wl-dd-warn   { color: var(--text); }
.wl-dd-item.wl-dd-warn:hover { background: rgba(234, 179, 8, 0.10); }
.wl-dd-item.wl-dd-danger { color: #ef4444; }
.wl-dd-item.wl-dd-danger:hover { background: rgba(239, 68, 68, 0.10); }
.wl-dd-ico { width: 14px; text-align: center; font-size: 12px; color: var(--muted); }
.wl-dd-sep {
  height: 1px; background: var(--border);
  margin: 4px 0;
}
.wl-dd-section {
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  padding: 8px 10px 4px;
}
.wl-dd-recent {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 12px; color: var(--text);
  cursor: pointer; border-radius: 4px;
}
.wl-dd-recent:hover { background: var(--panel-2); }
.wl-dd-recent.active { background: rgba(122,162,255,0.15); }
.wl-dd-recent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-dd-recent-count {
  font-size: 10px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 1px 6px;
}

/* ── Import / Export modal (TV format) ─────────────────────────── */
.wl-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wl-modal-overlay.hidden { display: none; }
.wl-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  width: 560px; max-width: 95vw; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wl-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  position: relative;
}
.wl-modal-title {
  font-size: 15px; font-weight: 700; color: var(--text);
}
.wl-modal-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}
.wl-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  color: var(--muted); font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 4px;
}
.wl-modal-close:hover { background: var(--bg); color: var(--text); }
.wl-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}
.wl-ie-options {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.wl-ie-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  font-size: 11.5px; color: var(--text);
  cursor: pointer;
}
.wl-ie-pill.active {
  background: rgba(122,162,255,0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.wl-ie-pill input { margin: 0; accent-color: var(--accent); }
.wl-ie-file-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.wl-ie-file-btn {
  padding: 5px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text); font-size: 12px;
  cursor: pointer;
}
.wl-ie-file-btn:hover { border-color: var(--accent); }
.wl-ie-or { font-size: 11px; color: var(--muted); }
.wl-ie-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 220px;
}
.wl-ie-textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.wl-ie-stats { font-size: 11px; color: var(--muted); margin-top: 8px; }
.wl-ie-stats b { color: var(--text); }
.wl-ie-err { font-size: 11px; color: #f87171; margin-top: 4px; min-height: 14px; }
.wl-modal-actions {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  display: flex; justify-content: flex-end; gap: 8px;
}
.wl-ie-btn-ghost, .wl-ie-btn-primary {
  padding: 6px 14px; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.wl-ie-btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.wl-ie-btn-ghost:hover { background: var(--bg); border-color: var(--accent); }
.wl-ie-btn-primary {
  background: var(--accent); color: white;
  border: 1px solid var(--accent);
}
.wl-ie-btn-primary:hover { filter: brightness(1.08); }

/* ── Move-symbol popup ─────────────────────────────────────────── */
.wl-move-pop {
  position: fixed;
  z-index: 1900;
  min-width: 200px; max-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  padding: 4px;
}
.wl-move-pop.hidden { display: none; }
.wl-move-pop-head {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.wl-move-pop-head b { color: var(--text); }
.wl-move-pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-size: 12px; color: var(--text);
  cursor: pointer; border-radius: 4px;
}
.wl-move-pop-item:hover { background: var(--panel-2); }
.wl-move-pop-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-move-pop-count {
  font-size: 10px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 1px 6px;
}

/* Move button on each row (next to remove). Inherits .wl-rm sizing. */
.wl-row .wl-move-btn {
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font-size: 12px;
}
.wl-row .wl-move-btn:hover { color: var(--accent); }

/* Add-symbol search panel */
.wl-search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.wl-search.hidden { display: none; }
.wl-search input {
  width: 100%; box-sizing: border-box;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit; font-size: 12px;
  outline: none;
}
.wl-search input:focus { border-color: var(--accent); }
.wl-search-results {
  margin-top: 6px;
  max-height: 220px; overflow-y: auto;
}
/* Watchlist search result — two-line layout. Top line is the human
   display name (prominent) with the exchange chip on the right; the
   second line shows the underlying technical symbol code dimmed.
   This is more scannable than three columns crammed side-by-side
   where the cryptic symbol code dominated and the readable name was
   clipped. */
.wl-search-item {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 6px 8px; cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.25;
}
.wl-search-item:hover { background: rgba(122,162,255,0.10); }
.wl-sr-main {
  display: flex; align-items: center; gap: 8px;
}
.wl-sr-desc {
  flex: 1; min-width: 0;
  color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-sr-exch {
  flex: 0 0 auto;
  color: var(--muted); font-size: 10px; font-weight: 600;
  padding: 1px 5px;
  background: var(--panel-2);
  border-radius: 3px;
}
.wl-sr-sub  { padding-left: 0; }
.wl-sr-sym  {
  color: var(--muted); font-size: 10.5px; font-weight: 500;
  font-family: 'SF Mono', Consolas, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; max-width: 100%;
}

/* Table */
.wl-table {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.wl-row {
  display: grid;
  /* sym | last | chg | chg% | × remove — no empty trailing gutter */
  grid-template-columns: 1fr 58px 52px 52px 16px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  position: relative;
}
/* Header's last (remove) cell — single column, no span. */
.wl-row.wl-head .wl-rm:last-child { grid-column: 5; }
.wl-row:hover { background: rgba(122,162,255,0.06); }
.wl-row.active { background: rgba(122,162,255,0.16); }
.wl-row.wl-head {
  cursor: default;
  background: var(--panel-2);
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.wl-row.wl-head:hover { background: var(--panel-2); }
.wl-nav-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 4px; width: 20px; height: 20px; line-height: 1; font-size: 10px;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.wl-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.wl-sortable { cursor: pointer; user-select: none; }
.wl-sortable:hover { color: var(--text); }
.wl-sorted { color: var(--accent); }
.wl-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
}
.wl-cell {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-symbol { font-weight: 600; color: var(--text); }
.wl-last   { text-align: right; color: var(--text); }
.wl-change, .wl-changePct { text-align: right; }
.wl-change.up,  .wl-changePct.up  { color: var(--green); }
.wl-change.dn,  .wl-changePct.dn  { color: var(--red); }
.wl-rm {
  display: flex; align-items: center; justify-content: center;
}
.wl-remove {
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: 3px;
  visibility: hidden;
}
.wl-row:hover .wl-remove { visibility: visible; }
.wl-remove:hover { color: var(--red); background: rgba(239,68,68,0.10); }
.wl-empty {
  padding: 24px 16px; text-align: center;
  color: var(--muted); font-size: 11.5px;
}

[data-theme="light"] .wl-row:hover  { background: rgba(13,61,138,0.04); }
[data-theme="light"] .wl-row.active { background: rgba(13,61,138,0.10); }

/* =====================================================================
   TV CHARTS — multi-pane layout chooser + grid
   ----------------------------------------------------------
   The layout chooser BUTTON itself is injected INSIDE each TV widget's
   header (right side, next to compare / settings / etc.) via TV's
   widget.createButton() API — see tvcharts.js injectLayoutButton().
   That keeps the chrome consistent with TV's native top row.
   ===================================================================== */
.tvchart-main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  /* Slight breathing room on the right + bottom so the chart doesn't
   * butt up against the viewport edge. Top/left already covered by
   * the topbar / sidebar. */
  padding: 0 8px 6px 0;
  box-sizing: border-box;
}

/* Page-level toolbar above the chart grid (TV Charts page). Holds the
   layout-chooser button. Other tools (interval, symbol search etc.)
   can be added here later. */
.tvchart-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.tvchart-layout-top-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.tvchart-layout-top-btn:hover { border-color: var(--accent); }
.tvchart-layout-top-icon svg { color: var(--text); display: block; }
.tvchart-layout-top-caret { font-size: 10px; color: var(--muted); }

/* Layout chooser popup — appended to document.body, position:fixed so
 * it survives widget tear-down on layout change. Grouped by panel count
 * (1, 2, 3, …) to match TradingView's native chooser. */
.tvchart-layout-pop {
  position: fixed;
  top: 50px; left: 12px;
  z-index: 2000;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 250px;
}
.tvchart-layout-pop.hidden { display: none; }
.tvchart-layout-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.tvchart-layout-row + .tvchart-layout-row { border-top: 1px solid var(--border); }
.tvchart-layout-row-lbl {
  width: 16px; flex: 0 0 16px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  text-align: left;
}
.tvchart-layout-row-opts {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.tvchart-layout-opt {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tvchart-layout-opt:hover  { background: rgba(122,162,255,0.10); border-color: var(--accent); }
.tvchart-layout-opt.active { background: rgba(122,162,255,0.22); border-color: var(--accent); color: var(--accent); }
.tvchart-layout-opt svg { color: var(--text); display: block; }
.tvchart-layout-opt.active svg { color: var(--accent); }

/* Multi-pane grid */
.tvchart-host {
  flex: 1; min-height: 0; min-width: 0;
  position: relative;
  background: var(--bg);
}
.tvchart-grid {
  width: 100%; height: 100%;
  display: grid;
  gap: 2px;
  background: var(--border);  /* shows as 2px gridlines */
  position: relative;          /* anchor for absolutely-positioned splitters */
}
/* Drag splitters between panels — absolutely positioned over the
   grid gap lines. Wider hit area (6px) than the visible line (2px)
   so they're easy to grab without overlapping the chart canvas. */
.tvchart-resize-handle {
  position: absolute;
  z-index: 10;
  background: transparent;
}
.tvchart-resize-handle:hover { background: var(--accent); opacity: 0.4; }
.tvchart-resize-col { cursor: col-resize; }
.tvchart-resize-row { cursor: row-resize; }
/* While dragging a splitter, the body-level overlay catches all pointer
 * events; additionally suppressing pointer-events on the TV iframes
 * keeps the cursor crisp and avoids a hover-flicker through the gap. */
.tvchart-grid.tvchart-dragging iframe { pointer-events: none; }
/* Preview indicator that follows the cursor during a splitter drag. The
 * grid template (and therefore every TV iframe) is only resized on
 * mouseup — during the drag we only move this 2px guide bar, which is
 * effectively free to repaint. */
.tvchart-resize-preview {
  position: absolute;
  z-index: 11;
  background: var(--accent);
  opacity: 0.8;
  pointer-events: none;
  box-shadow: 0 0 6px var(--accent);
}
.tvchart-panel {
  position: relative;
  background: var(--panel);
  outline: none;
  overflow: hidden;
}
.tvchart-panel.active::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 0;
  z-index: 5;
}

/* (header-mask approach reverted — TV's per-pane header is shown on
 * every split pane. The active pane gets an inset blue border via
 * .tvchart-panel.active::after; watchlist clicks target that pane.
 * Layout chooser button stays in the top-left pane's header only.) */
.tvchart-panel { position: relative; }

/* Watchlist collapse / expand toggle */
.wl-collapse-btn {
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; font-weight: 600;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  margin-right: 6px;
  transition: background 0.15s, color 0.15s;
}
.wl-collapse-btn:hover { background: rgba(122,162,255,0.10); color: var(--accent); }

/* Collapsed-sidebar state — shrink to a thin rail with just the expand
 * arrow visible. Body / table / search all hide; click the chevron to
 * restore. Width clamps to 28px so the chart area gets back the space. */
.tvchart-watchlist.wl-collapsed {
  width: 28px !important; min-width: 28px !important;
  /* Resize handle (which normally draws the 1px divider) is hidden when
   * collapsed, so add our own right border to keep the rail visually
   * separated from the chart area. Theme-aware via --border. */
  border-right: 1px solid var(--border);
}
.tvchart-watchlist.wl-collapsed .wl-title,
.tvchart-watchlist.wl-collapsed .wl-add-btn,
.tvchart-watchlist.wl-collapsed .wl-search,
.tvchart-watchlist.wl-collapsed .wl-table,
.tvchart-watchlist.wl-collapsed .wl-name-area,
.tvchart-watchlist.wl-collapsed .wl-toolbar-stats {
  display: none !important;
}
.tvchart-watchlist.wl-collapsed .wl-header {
  padding: 8px 3px;
  justify-content: center;
}
.tvchart-watchlist.wl-collapsed .wl-collapse-btn { margin: 0; }
/* Hide the resize handle when collapsed — restore by clicking expand. */
.tvchart-watchlist.wl-collapsed + .tvchart-resize { display: none; }

/* Cross-pane crosshair sync — vertical screen-X line drawn on every
 * pane EXCEPT the one the cursor is over. Pointer-events disabled so
 * TV's own crosshair / drawing / zoom keep working underneath. */
.tvchart-xhair-sync {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(122,162,255,0.55);
  pointer-events: none;
  z-index: 4;          /* above the chart canvas, below the active border */
  display: none;
}
[data-theme="light"] .tvchart-xhair-sync { background: rgba(37,99,235,0.45); }

/* ── Broker Instrument Config modal ──────────────────────────────────
   Launched from the ⚙ next to the broker dropdown. Shows the broker's
   capability matrix for a single instrument token (futures by default,
   user can paste any other token). Visual language mirrors the order
   confirm modal so they feel like siblings. */
.bcfg-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.bcfg-overlay.hidden { display: none; }
.bcfg-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  width: 560px; max-width: 95vw; max-height: 85vh;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; overflow: hidden;
}
.bcfg-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.bcfg-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bcfg-title { font-weight: 700; font-size: 13px; color: var(--text); letter-spacing: 0.2px; }
.bcfg-sub   { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcfg-x {
  background: transparent; border: none; color: var(--muted);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.bcfg-x:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.bcfg-toolbar {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.bcfg-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.bcfg-field > span { text-transform: uppercase; letter-spacing: 0.4px; }
.bcfg-field-tok { flex: 1 1 160px; }
.bcfg-field-tok .input.sm { width: 100%; }
.bcfg-body {
  padding: 14px 16px; overflow: auto; flex: 1 1 auto;
  font-size: 12px; color: var(--text);
}
.bcfg-empty { color: var(--muted); padding: 20px 0; text-align: center; font-style: italic; }
.bcfg-err   { color: #f87171; padding: 10px 0; font-weight: 600; }
.bcfg-loading { color: var(--muted); padding: 14px 0; text-align: center; }
.bcfg-section {
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.bcfg-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bcfg-sec-hd {
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--muted); text-transform: uppercase; margin-bottom: 8px;
}
.bcfg-kv {
  display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px;
  font-size: 12px;
}
.bcfg-k { color: var(--muted); }
.bcfg-v { color: var(--text); word-break: break-word; }
.bcfg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bcfg-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
}
.bcfg-raw {
  margin-top: 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.5; color: var(--text);
  max-height: 280px; overflow: auto;
}
.bcfg-raw-toggle {
  margin-top: 8px; background: transparent; border: none;
  color: var(--accent); font-size: 11px; cursor: pointer; padding: 0;
}
.bcfg-raw-toggle:hover { text-decoration: underline; }

/* Tabs — Instrument | Advanced */
.bcfg-tabs {
  display: flex; gap: 0; padding: 0 12px;
  border-bottom: 1px solid var(--border); background: var(--panel-2);
}
.bcfg-tab {
  background: transparent; border: none; padding: 10px 14px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; position: relative; letter-spacing: 0.2px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bcfg-tab:hover { color: var(--text); }
.bcfg-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.bcfg-pane { display: none; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.bcfg-pane.active { display: flex; }

/* Footer — Reset / Save row for the editable forms. */
.bcfg-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel-2);
  justify-content: flex-end;
}
.bcfg-footer.hidden { display: none; }
.bcfg-footer .bcfg-status { flex: 1 1 auto; font-size: 11px; color: var(--muted); }
.bcfg-footer .bcfg-status.ok  { color: #4ade80; }
.bcfg-footer .bcfg-status.err { color: #f87171; }
.bcfg-footer .btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.bcfg-footer .btn.primary:hover { filter: brightness(1.1); }
.bcfg-footer .btn:disabled { opacity: .5; cursor: not-allowed; }

/* Editable form — two-column grid (label | input). Inputs get a
   consistent look that matches the topbar selects. */
.bcfg-form {
  display: grid; grid-template-columns: 180px 1fr; gap: 8px 14px;
  align-items: center;
}
.bcfg-form .bcfg-form-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.4px; padding-right: 6px;
}
.bcfg-form .bcfg-form-input,
.bcfg-form .bcfg-form-input.select.sm,
.bcfg-form input.bcfg-form-input,
.bcfg-form select.bcfg-form-input {
  width: 100%; height: 30px; padding: 0 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; font-size: 12px;
  box-sizing: border-box;
}
.bcfg-form select.bcfg-form-input { padding-right: 24px; }
.bcfg-form input.bcfg-form-input[type="checkbox"] {
  width: 16px; height: 16px; padding: 0; cursor: pointer;
  accent-color: var(--accent);
}
.bcfg-form .bcfg-form-input:hover  { border-color: var(--accent); }
.bcfg-form .bcfg-form-input:focus  { outline: 1px solid var(--accent); outline-offset: 0; }
.bcfg-form-section {
  grid-column: 1 / -1;
  font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  color: var(--muted); text-transform: uppercase;
  margin: 10px 0 4px;
  padding-bottom: 4px; border-bottom: 1px dashed var(--border);
}
.bcfg-form-section:first-child { margin-top: 0; }
.bcfg-form .bcfg-form-hint {
  grid-column: 2 / -1; font-size: 10px; color: var(--muted);
  margin-top: -4px;
}

/* ── Upstream Log (admin diagnostics) ─────────────────────────────── */
.upstream-summary {
  display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 11px;
}
.upstream-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.2px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text);
}
.upstream-chip-ok  { color: #4ade80; }
.upstream-chip-4xx { color: #fbbf24; }
.upstream-chip-5xx { color: #f87171; }
.upstream-chip-err { color: #f87171; }
.upstream-chip-total { color: var(--muted); }
.upstream-host-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  background: var(--panel-2); border: 1px dashed var(--border);
  color: var(--muted); font-size: 11px;
}
.upstream-host-err {
  color: #f87171; font-weight: 700;
  margin-left: 4px;
}
.upstream-filter { display: inline-flex; flex-direction: column; gap: 2px; }
.upstream-filter .select.sm { min-width: 220px; height: 30px; }

.upstream-wrap {
  margin-top: 8px; padding: 0 12px 24px;
  overflow-x: auto;
}
.upstream-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
  background: var(--panel);
}
.upstream-table thead th {
  position: sticky; top: 0;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; font-size: 10px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.upstream-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.upstream-c-time   { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; color: var(--muted); width: 180px; }
.upstream-c-method { white-space: nowrap; font-weight: 700; font-size: 11px; width: 60px; }
.upstream-c-host   { white-space: nowrap; font-weight: 600; font-size: 11px; width: 200px; }
.upstream-c-path   { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; max-width: 480px; }
.upstream-path-text {
  display: inline-block; max-width: 480px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
.upstream-c-status { white-space: nowrap; width: 80px; text-align: center; }
.upstream-c-lat    { white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 90px; text-align: right; }
.upstream-c-err    { color: #f87171; font-size: 11px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status pill */
.upstream-status-pill {
  display: inline-block; min-width: 44px;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.3px;
  text-align: center;
}
.upstream-st-ok     .upstream-status-pill { background: rgba(74,222,128,0.15);  color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.upstream-st-4xx    .upstream-status-pill { background: rgba(251,191,36,0.15);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.upstream-st-5xx    .upstream-status-pill { background: rgba(248,113,113,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.5); }
.upstream-st-err    .upstream-status-pill { background: rgba(248,113,113,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.5); }
.upstream-st-other  .upstream-status-pill { background: var(--panel-2);          color: var(--muted); border: 1px solid var(--border); }

/* Row tinting for at-a-glance status */
.upstream-table tbody tr.upstream-st-5xx,
.upstream-table tbody tr.upstream-st-err  { background: rgba(248,113,113,0.05); }
.upstream-table tbody tr.upstream-st-4xx  { background: rgba(251,191,36,0.04); }

/* Latency colour */
.upstream-lat-fast { color: #4ade80; }
.upstream-lat-med  { color: #fbbf24; }
.upstream-lat-slow { color: #f87171; font-weight: 700; }

.upstream-empty {
  text-align: center; padding: 40px 20px;
  color: var(--muted); font-style: italic; font-size: 13px;
}

/* Hide the Diagnostics nav group for non-admins. We mirror the same
   gate the topbar Buy/Sell + broker dropdown use (.no-trade body
   class is added when the logged-in user isn't on the admin allow-list). */
/* Admin-only nav surfaces (Diagnostics dropdown + Upstream Log page).
   Default HIDDEN — only revealed when body.is-admin is set, which only
   happens after /api/user-profile confirms the logged-in email matches
   the admin allow-list (see applyGates in app.js). This prevents any
   flash-of-admin-UI during boot before the gate resolves. */
.nav-admin { display: none !important; }
body.is-admin .nav-admin { display: inline-flex !important; }
/* Dropdown items override — block-level flex so they fill the
 * dropdown's min-width and let `margin-left:auto` push the
 * favorite star to the right edge. Without this the rule above
 * (`!important inline-flex`) wins, shrinks the item to content
 * width, and the star sits flush against the label text. */
body.is-admin .nav-drop-item.nav-admin { display: flex !important; }
/* Upstream Log page section — hide for non-admins so direct deep-links
   never flash the diagnostics UI before Pages.upstream.onShow redirects. */
body:not(.is-admin) .page[data-page="upstream"] { display: none !important; }
/* The .hide-trade-btns toggle hides Buy/Sell controls but the admin
   diagnostics surfaces stay visible (they're not trade controls). */

/* Per-user rate panel */
.upstream-rate-wrap {
  margin: 12px 12px 4px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.upstream-rate-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.upstream-rate-title {
  font-size: 11px; font-weight: 700;
  color: var(--text); letter-spacing: 0.5px; text-transform: uppercase;
}
.upstream-rate-body {
  display: grid; grid-template-columns: 1fr;
  gap: 4px;
}
.upstream-rate-row {
  display: grid; grid-template-columns: 180px 1fr 80px;
  align-items: center; gap: 10px;
}
.upstream-rate-uid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upstream-rate-bar {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.upstream-rate-bar-fill { height: 100%; transition: width .2s; }
.upstream-rate-cnt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; text-align: right; font-weight: 700;
}
.upstream-rate-tone-low.upstream-rate-bar-fill   { background: #4ade80; }
.upstream-rate-tone-med.upstream-rate-bar-fill   { background: #60a5fa; }
.upstream-rate-tone-high.upstream-rate-bar-fill  { background: #fbbf24; }
.upstream-rate-tone-over.upstream-rate-bar-fill  { background: #f87171; }
.upstream-rate-tone-low.upstream-rate-cnt   { color: #4ade80; }
.upstream-rate-tone-med.upstream-rate-cnt   { color: #60a5fa; }
.upstream-rate-tone-high.upstream-rate-cnt  { color: #fbbf24; }
.upstream-rate-tone-over.upstream-rate-cnt  { color: #f87171; }

/* ── Report briefings: pre-market modal + mid-market toast (report-briefings.js) ── */
.pmb-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 20, 0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: 20px;
}
.pmb-card {
  width: min(560px, 96vw); max-height: 86vh; overflow: auto;
  background: var(--panel, #102745); color: var(--text, #e8f0ff);
  border: 1px solid var(--border, #274a73); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
  padding: 20px 22px;
  animation: pmb-pop 0.18s ease-out;
}
@keyframes pmb-pop { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.pmb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pmb-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent, #3da3ff); }
.pmb-title { font-size: 18px; font-weight: 700; margin-top: 4px; line-height: 1.3; }
.pmb-x { background: transparent; border: 0; color: var(--muted, #a8c5e3); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pmb-x:hover { color: var(--text, #fff); }
.pmb-badge { display: inline-block; margin: 12px 0 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pmb-pos { background: rgba(62,207,142,0.16); color: var(--green, #3ecf8e); }
.pmb-neg { background: rgba(255,110,114,0.16); color: var(--red, #ff6e72); }
.pmb-neu { background: rgba(168,197,227,0.16); color: var(--muted, #a8c5e3); }
.pmb-bullets { margin: 8px 0 0; padding-left: 20px; }
.pmb-bullets li { margin: 7px 0; line-height: 1.5; font-size: 13.5px; }
.pmb-muted { color: var(--muted, #a8c5e3); list-style: none; margin-left: -20px; }
.pmb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pmb-asof { font-size: 12px; color: var(--muted, #a8c5e3); }
.pmb-actions { display: flex; gap: 8px; margin-left: auto; }
.pmb-btn { border: 1px solid var(--border, #274a73); background: var(--panel-2, #163358); color: var(--text, #e8f0ff); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pmb-btn:hover { border-color: var(--accent, #3da3ff); }
.pmb-primary { background: var(--accent, #3da3ff); border-color: var(--accent, #3da3ff); color: #06223e; }
.pmb-primary:hover { filter: brightness(1.06); }
.pmb-secondary { background: transparent; }
/* Light theme: the accent is a DARK blue, so the near-black text vanished on
   it — use white. Also give the secondary (Dismiss) a readable border/text. */
:root[data-theme="light"] .pmb-primary { color: #fff; }
:root[data-theme="light"] .pmb-secondary { color: var(--text); border-color: var(--border); }
.pmb-sm { padding: 6px 12px; font-size: 12.5px; }

/* Mid-market toast — bottom-right corner, slides in */
.pmb-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9001;
  display: flex; align-items: flex-start; gap: 12px;
  width: min(380px, 92vw);
  background: var(--panel, #102745); color: var(--text, #e8f0ff);
  border: 1px solid var(--border, #274a73); border-left: 3px solid var(--accent, #3da3ff);
  border-radius: 10px; padding: 14px 14px 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  transform: translateY(16px); opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.pmb-toast-in  { transform: none; opacity: 1; }
.pmb-toast-out { transform: translateY(16px); opacity: 0; }
.pmb-toast-ico { font-size: 20px; line-height: 1.2; }
.pmb-toast-body { flex: 1; min-width: 0; }
.pmb-toast-title { font-weight: 700; font-size: 14px; }
.pmb-toast-sub { font-size: 12px; color: var(--muted, #a8c5e3); margin-top: 3px; line-height: 1.4; }
.pmb-toast-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pmb-toast-x { background: transparent; border: 0; color: var(--muted, #a8c5e3); font-size: 18px; line-height: 1; cursor: pointer; }
.pmb-toast-x:hover { color: var(--text, #fff); }
@media print { .pmb-modal, .pmb-toast { display: none !important; } }

/* ── Dashboard-style report (report-briefings.js tags .rep-paper with .rep-fit) ─
 * The sections become a responsive grid of readable, bordered cards that fills
 * the full page width — masthead / summary / footer span the whole row. No
 * shrink-to-fit: text stays at a normal, readable size and the grid reflows. */
.rep-paper.rep-fit {
  /* Theme-aware: map the fixed "research-paper" palette onto the app theme so
     the whole report follows dark / light / blue. */
  --paper-bg:        var(--panel);
  --paper-ink:       var(--text);
  --paper-ink-soft:  var(--muted);
  --paper-ink-faint: var(--muted);
  --paper-rule:      var(--border);
  --paper-rule-soft: var(--border);
  --paper-band:      var(--panel-2);
  --paper-accent:    var(--accent);
  --paper-accent-2:  var(--accent);
  --paper-accent-dk: var(--accent);
  --paper-pos:       var(--green);
  --paper-neg:       var(--red);
  margin: 0;
  max-width: none;
  padding: 10px 12px 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: block;
  font-size: 12.5px;
  color: var(--text);
}
.rep-paper.rep-fit::before { display: none; }
/* Cards — bordered theme panels. */
.rep-paper.rep-fit .rep-card,
.rep-paper.rep-fit .rep-headline {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 13px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
/* Long tables scroll inside their own card rather than stretching the page. */
.rep-paper.rep-fit .rep-card-body { margin-top: 5px; max-height: 46vh; overflow: auto; }
/* Header — compact theme card holding the bias badge. */
.rep-paper.rep-fit .rep-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  margin-bottom: 10px;
}
.rep-paper.rep-fit .rep-masthead-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rep-paper.rep-fit .rep-masthead-l .rep-brand { font-size: 10px; margin: 0; }
.rep-paper.rep-fit .rep-masthead-l .rep-masthead-title { font-size: 15px; margin: 0; }
.rep-paper.rep-fit .rep-masthead-l .rep-masthead-date { font-size: 11px; margin: 0; }
.rep-paper.rep-fit .rep-masthead-r { display: flex; align-items: center; gap: 14px; }
.rep-paper.rep-fit .rep-masthead-verdict { font-size: 12px; }
.rep-paper.rep-fit .rep-footer { border: none; box-shadow: none; background: transparent; font-size: 10px; margin-top: 10px; }
/* Hero row: commentary (wide) + GIFT NIFTY + India context. */
.rep-paper.rep-fit .rep-hero {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}
.rep-paper.rep-fit .rep-hero .rep-headline { margin: 0; }
/* Spread the summary bullets across the commentary card's width. */
.rep-paper.rep-fit .rep-headline .rep-narr-list { column-width: 300px; column-gap: 26px; margin-top: 6px; }
.rep-paper.rep-fit .rep-headline .rep-narr-list li { break-inside: avoid; }
/* Section cards — responsive grid filling the width (one row when it fits). */
.rep-paper.rep-fit .rep-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}
/* Each column stacks its cards vertically (e.g. Flows + Currencies, Movers +
   Expiry) so short cards tuck under taller related ones and it all fits. */
.rep-paper.rep-fit .rep-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* Narrow screens: stack the hero so cards stay readable. */
@media (max-width: 1100px) {
  .rep-paper.rep-fit .rep-hero { grid-template-columns: 1fr; }
}

/* ── Option-chain EOD playback (chain-playback.js, admin-only) ──────────────── */
.cpb-toggle.cpb-active { background: var(--accent); border-color: var(--accent); color: #06223e; }
/* Disabled during live market hours — replay is for after the close. */
.cpb-toggle.cpb-disabled,
.cpb-toggle:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.cpb-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 4px 0 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
}
.cpb-bar.cpb-on { display: flex; flex-wrap: wrap; }
.cpb-b {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  min-width: 30px; height: 26px; padding: 0 8px;
  cursor: pointer; font-size: 12px; line-height: 1;
}
.cpb-b:hover { border-color: var(--accent); }
.cpb-b.cpb-pp { background: var(--accent); border-color: var(--accent); color: #06223e; font-weight: 700; }
.cpb-scrub { flex: 1 1 220px; min-width: 160px; accent-color: var(--accent); }
.cpb-time { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 110px; }
.cpb-int { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.cpb-int input { width: 46px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 4px; font-size: 12px; }
.cpb-status { color: var(--muted); margin-left: auto; }

/* Report Pre-Market tab disabled before 08:45 IST (not yet generated). */
#report-slot-seg .seg-btn.seg-disabled { opacity: 0.4; cursor: not-allowed; }



/* ── Refer & Earn page (portal-parity design) ── */
.rf2-page { max-width: 980px; margin: 0 auto; padding: 8px 18px 60px; }
.rf2-h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 14px 0 4px; color: var(--text); }
.rf2-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.rf2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .rf2-grid { grid-template-columns: 1fr; } }
.rf2-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.rf2-card-h { font-size: 16px; font-weight: 750; color: var(--text); margin-bottom: 14px; }
.rf2-how { display: flex; flex-direction: column; gap: 14px; }
.rf2-step { display: flex; gap: 12px; align-items: flex-start; }
.rf2-n { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2b6fff, #6a4bff); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rf2-step p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.rf2-step b { color: var(--text); }
.rf2-bonus-row { display: flex; gap: 12px; margin-top: 16px; }
.rf2-bonus { flex: 1; text-align: center; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--panel-2); }
.rf2-bonus .big { font-size: 20px; font-weight: 800; color: var(--accent, #3da3ff); }
.rf2-bonus .lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.rf2-note { margin-top: 14px; font-size: 12.5px; color: #fcd34d; background: rgba(252, 211, 77, .08); border: 1px solid rgba(252, 211, 77, .35); border-radius: 10px; padding: 10px 12px; }
.rf2-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rf2-qr img { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 8px; }
.rf2-linkbox { display: flex; gap: 8px; width: 100%; }
.rf2-linkbox input { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; background: var(--panel-2); color: var(--text); }
.rf2-share { display: flex; gap: 10px; width: 100%; }
.rf2-share a { flex: 1; text-align: center; padding: 10px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; color: #fff; }
.rf2-share .x { background: #0f1419; border: 1px solid var(--border); }
.rf2-share .wa { background: #25d366; color: #08130c; }
.rf2-share .fb { background: #1877f2; }
.rf2-stats { display: flex; gap: 12px; margin-top: 20px; }
@media (max-width: 700px) { .rf2-stats { flex-direction: column; } }
.rf2-stat { flex: 1; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.rf2-stat .v { font-size: 24px; font-weight: 800; color: var(--text); }
.rf2-stat .l { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.rf2-users { margin-top: 20px; }

/* Risk-tier labels on the inline strategy chips */
.strategy-chip .tier-lbl { font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .7; margin-right: 3px; }


/* Light theme: cyan badges/buttons get dark teal text for contrast */
:root[data-theme="light"] .brk-dd-tag.lead { color: #0e7490; background: rgba(14, 116, 144, .10); border-color: rgba(14, 116, 144, .45); }
:root[data-theme="light"] .brk-dd-tag.demo { color: #92400e; background: rgba(146, 64, 14, .10); border-color: rgba(146, 64, 14, .4); }

/* Light theme: BETA tag amber is too pale on white - darken */
:root[data-theme="light"] .nav-beta { color: #92400e; background: rgba(146, 64, 14, .08); border-color: rgba(146, 64, 14, .45); }

/* Dashboard widget B/S buttons - sit under the LTP value in chain cells */
.dn-oc-c .qt-actions.dn-qt { display: inline-flex; gap: 2px; margin-top: 2px; }
.dn-oc-c .qt-actions.dn-qt .qt-btn { padding: 0 5px; font-size: 9.5px; line-height: 15px; }

/* Straddle Table chart view: control row (chart type + indicators + height)
   stays pinned below the sticky topbar while the chart grid scrolls */
.ctv-toolbar-sticky { position: sticky; top: 44px; z-index: 20; background: var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* Indeterminate loading bar (heavy historical pulls — straddle/strangle tables) */
.oa-loadbar { display: none; height: 3px; width: 100%; margin: 0 0 8px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent, #3da3ff) 14%, transparent); overflow: hidden; }
.oa-loadbar.on { display: block; }
.oa-loadbar-fill { height: 100%; width: 35%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, #3da3ff), transparent);
  animation: oa-loadbar-slide 1.05s ease-in-out infinite; }
@keyframes oa-loadbar-slide { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }