/* ---------- THEMES ---------- */
:root[data-theme="dark"] {
  --bg: #11151c;
  --panel: #181d27;
  --panel-2: #1f2530;
  --border: #2a313c;
  --text: #d8dee6;
  --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(94, 184, 122, 0.05);
  --shadow: 0 4px 14px rgba(0,0,0,0.35);
}
:root[data-theme="blue"] {
  --bg: #0e131e;
  --panel: #151c2c;
  --panel-2: #1c2540;
  --border: #232f4a;
  --text: #cfd9eb;
  --muted: #7e8aa3;
  --accent: #88b3f0;
  --green: #5dc18a;
  --red: #ec8484;
  --amber: #f0c071;
  --ce-tint: rgba(136, 179, 240, 0.07);
  --pe-tint: rgba(240, 192, 113, 0.06);
  --row-hover: rgba(255, 255, 255, 0.03);
  --row-atm: rgba(240, 192, 113, 0.16);
  --row-itm: rgba(93, 193, 138, 0.05);
  --shadow: 0 4px 14px rgba(0,0,0,0.4);
}
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --border: #c8d0dc;
  --text: #0a1628;            /* near-black with navy tint, high contrast */
  --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(21, 128, 61, 0.05);
  --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: #cfd9eb; --accent-2: #6196e0; }

* { 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: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.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; }
.seg-btn { background: transparent; color: var(--muted); border: 0; padding: 6px 10px; font: inherit; cursor: pointer; }
.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: 10px;
}
.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;
}
.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); }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ---------- TABS ---------- */
.tabs {
  display: flex; align-items: center; gap: 2px;
  padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border);
  position: sticky; top: 49px; z-index: 25;
}
.tab {
  padding: 10px 16px; 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;
}
.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; }

.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; }

/* ---------- 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);
}
.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; }
.up { color: var(--green); }
.down { 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: 88px; z-index: 9;
  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: 141px; z-index: 8; background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.chain thead tr:not(.grp) th { position: sticky; top: 173px; 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; }
.chain th {
  text-align: right; padding: 9px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--header-text); font-weight: 700;
  white-space: nowrap; font-family: 'Inter', sans-serif; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.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 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.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: 700;
  letter-spacing: 0.5px;
  opacity: 0.7;
  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; }
.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;
  background: linear-gradient(90deg, rgba(229,115,115,0.4) 0%, rgba(229,115,115,0.15) 30%, rgba(94,184,122,0.15) 70%, rgba(94,184,122,0.4) 100%);
}
.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); }

/* ---------- 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); /* topbar(57) + tabs(42) = 99 */
    overflow: hidden;
  }
  /* 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 6px 1fr;
    grid-auto-rows: auto;
  }
  .charts-grid.rollatm-grid[data-layout="col"] {
    grid-template-columns: 1fr 6px 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: auto;
  }
  .page[data-page="rollatm"] .charts-grid.rollatm-grid { grid-auto-rows: auto; }
  .rollatm-splitter {
    background: var(--border);
    position: relative;
    transition: background 0.15s;
  }
  .rollatm-grid[data-layout="row"] .rollatm-splitter { cursor: row-resize; }
  .rollatm-grid[data-layout="col"] .rollatm-splitter { cursor: col-resize; }
  .rollatm-splitter::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: var(--muted); opacity: 0.5; border-radius: 2px;
  }
  .rollatm-grid[data-layout="row"] .rollatm-splitter::before { width: 32px; height: 2px; }
  .rollatm-grid[data-layout="col"] .rollatm-splitter::before { width: 2px; height: 32px; }
  .rollatm-splitter:hover { background: var(--accent); }
  .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; }

  /* 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; }
/* Header row inside a TV card with title + chart-type selector. */
.tv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.tv-card-head h4 { padding: 0; flex: 0 0 auto; }
.tv-card-head .tv-ctype { padding: 3px 6px; font-size: 11px; }

/* ── 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; }
.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; max-height: calc(100vh - 200px);
}
.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; }

/* 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);
}
.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;
}
.stradtbl tbody td { font-size: 11px; padding: 6px 6px; }
.stradtbl tbody td.strike { font-weight: 700; background: var(--panel-2); text-align: center; }
.stradtbl tr.atm td.strike { background: var(--amber); color: #0d1117; }
.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;
}
.stradtbl td.ind-cell.sig-up   { background: rgba(38, 166, 154, 0.22); color: #0a7c66; }
.stradtbl td.ind-cell.sig-down { background: rgba(239, 83, 80, 0.22); color: #a32d2a; }
:root[data-theme="dark"] .stradtbl td.ind-cell.sig-up   { background: rgba(63, 185, 80, 0.25); color: #5ee089; }
:root[data-theme="dark"] .stradtbl td.ind-cell.sig-down { background: rgba(248, 81, 73, 0.25); color: #ff7a72; }
:root[data-theme="blue"]  .stradtbl td.ind-cell.sig-up   { background: rgba(63, 185, 80, 0.25); color: #5ee089; }
:root[data-theme="blue"]  .stradtbl td.ind-cell.sig-down { background: rgba(248, 81, 73, 0.25); color: #ff7a72; }
/* 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 pulse animations */
@keyframes flash-green { 0% { background: rgba(63,185,80,0.55); } 100% { background: transparent; } }
@keyframes flash-red   { 0% { background: rgba(248,81,73,0.55); } 100% { background: transparent; } }
.stradtbl td.new-high { animation: flash-green 1.6s ease-out; }
.stradtbl td.new-low  { animation: flash-red 1.6s ease-out; }

/* 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 ---------- */
.gex-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.gex-summary .stat { min-width: 140px; }

/* ---------- 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; }

/* ----- 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-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); }

/* 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; }

/* 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; flex-wrap: wrap; align-items: center; gap: 4px 10px;
}
.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); }

/* ── 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-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tabs::-webkit-scrollbar { height: 4px; }
  .tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
  .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;
}
.ctv-toolbar .bb-toggle { font-size: 11.5px; }
.ctv-grid {
  display: grid;
  grid-template-columns: 80px 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;
}
.ctv-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex; flex-direction: column;
  min-height: 130px;
  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: 100px; }
.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); }

/* 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: minmax(440px, 1fr) minmax(560px, 1.4fr);
  gap: 12px;
  align-items: start;
  padding: 0 12px 12px;
}
.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, .builder-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.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 {
  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 6px;
  border-bottom: 1px dashed var(--border);
  vertical-align: middle;
}
.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); }
.builder-legs input[type="number"] { width: 64px; text-align: right; }
.builder-legs .leg-strike { width: 88px; }
.builder-legs .leg-expiry { width: 86px; }
.builder-legs .leg-type   { width: 56px; }
.builder-legs .leg-bs     { width: 64px; font-weight: 700; }
.builder-legs .leg-bs.B   { color: var(--green); }
.builder-legs .leg-bs.S   { color: var(--red); }
.builder-legs .leg-rm {
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 2px 6px; font-size: 14px; line-height: 1;
}
.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(3, 1fr);
  gap: 8px;
}
.bstat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow);
}
.bstat-lbl {
  font-size: 10.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bstat-val {
  font-size: 16px; 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: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.bstat-sub.pos { color: var(--green); }
.bstat-sub.neg { color: var(--red); }

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

@media (max-width: 1100px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-bottom { grid-template-columns: 1fr; }
  .builder-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .builder-stats { grid-template-columns: 1fr; }
  .builder-chart-wrap { height: 280px; }
}

/* --- 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 --- */
.builder-stats-wrap { display: flex; flex-direction: column; gap: 8px; }
.builder-stats { grid-template-columns: repeat(3, 1fr); }
.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; }

.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); }