/* OptionsTwits web composer — modal dialog (v2, parity with app redesign) */
/* The composer relies on a small set of app-style design tokens that the site
   stylesheet does not define; without them every card/field surface (including
   the P&L spark graph) falls back to a transparent background and is invisible.
   These default to the app's dark palette and override per light mode. */
:root {
  --surface-card: #23262b;
  --surface-high: #2b2f35;
  --outline: #474c54;
  --amber-active: #ffb74d;
  --call-green: #81c784;
  --put-red: #ef5350;
}
[data-theme="light"] {
  --surface-card: #ffffff;
  --surface-high: #eef1f5;
  --outline: #cfd7e0;
  --amber-active: #b4690e;
  --call-green: #0f8a49;
  --put-red: #d23b3b;
}

.sv-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: 16px;
}
.sv-backdrop[open] { display: flex; }

.sv-modal {
  background: var(--surface); color: var(--text);
  width: 100%; max-width: 680px; max-height: 92vh; overflow: auto;
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  font-family: var(--font, inherit);
}
.sv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.sv-modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.sv-close { background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); }
.sv-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sv-modal-body input, .sv-modal-body textarea, .sv-modal-body select {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-card); color: var(--text);
  font: inherit; min-height: 40px;
}
.sv-modal-body input::placeholder { color: var(--muted); }
.sv-row { display: flex; gap: 8px; align-items: center; }
.sv-row > * { flex: 1; min-width: 0; }

/* Labels — 10-11px uppercase dim */
.sv-label { display:block; font-size:10.5px; letter-spacing:.4px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; }

/* ---- Ticker + Kind row ---- */
.sv-ticker-field { background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; min-height: 40px; display:flex; align-items:center; padding: 0 10px; font-size: 13.5px; }

/* ---- Strategy row: dropdown + Long/Short toggle ---- */
.sv-strat-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:stretch; }
.sv-strat-field { display:flex; align-items:center; justify-content:space-between; background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px; min-height: 44px; padding: 0 12px; font-size: 13.5px; color: var(--text); }
.sv-strat-field select { flex:1; min-width:0; margin-left:10px; background: var(--surface-card); border:none; color: var(--text); font: inherit; padding:0; }
.sv-strat-field .caret { color: var(--muted); font-size: 11px; margin-left: 6px; }
.sv-ls-toggle {
  display:flex; border:1px solid var(--outline); border-radius:8px; overflow:hidden;
  background: var(--surface-card); height: 44px;
}
.sv-ls-toggle div {
  padding: 0 14px; display:flex; align-items:center; justify-content:center;
  font-size: 12.5px; font-weight:700; letter-spacing:.5px; color: var(--muted);
  border-left: 1px solid var(--outline); height: 100%;
}
.sv-ls-toggle div:first-child { border-left:none; }
.sv-ls-toggle .sv-long  { color: var(--call-green); }
.sv-ls-toggle .sv-short { color: var(--put-red); }
.sv-ls-toggle div.on { font-weight: 800; }
.sv-ls-toggle .sv-long.on  { background: rgba(129,199,132,.16); color: var(--call-green); }
.sv-ls-toggle .sv-short.on { background: rgba(239,83,80,.16);  color: var(--put-red); }

/* ---- Options collapsible ---- */
.sv-options { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-card); }
.sv-options-toggle {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 12px; font-weight: 600; color: var(--accent); font-size: 0.92rem;
  display:flex; align-items:center; justify-content:space-between;
}
.sv-options-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); }
.sv-options-body[hidden] { display: none; }

/* ---- Sparkline (payoff graph with leg chips) ---- */
.sv-spark {
  background: var(--surface-high); border: 1px solid var(--outline); border-radius: 10px;
  height: 94px; position: relative; overflow: visible; margin-bottom: 4px;
}
.sv-spark svg { display:block; width:100%; height:100%; }
.sv-spark-legs { position:absolute; inset:0 0 18px 0; pointer-events:none; }
.sv-spark-leg {
  position:absolute; transform: translate(-50%, -50%);
  min-width:28px; height:22px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface-high); border:1px solid var(--outline);
  border-radius:11px; font-size:10.5px; font-weight:700; color:#fff;
  pointer-events:auto; cursor:pointer;
}
/* Buy (qty > 0) = green, Sell (qty < 0) = red — theme-independent so the fill
   stays readable in both light and dark mode. */
.sv-spark-leg.sv-buy  { background:#2f9e63; border-color:#2f9e63; }
.sv-spark-leg.sv-sell { background:#d64545; border-color:#d64545; }
.sv-spark-leg.sv-active { border:2px solid #fff; box-shadow:0 0 0 2px var(--amber-active), 0 2px 6px rgba(0,0,0,.35); }
.sv-spark-add {
  position:absolute; width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--accent); color:var(--accent); font-size:13px;
  background: var(--surface-high); pointer-events:auto; cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.sv-spark-add.sv-tr { right:8px; top:6px; }
.sv-spark-add.sv-br { right:8px; bottom:6px; }
.sv-spark-axis { position:absolute; bottom:0; left:0; right:0; height:18px; pointer-events:none; }

/* ---- Active Leg Card ---- */
.sv-legcard {
  background: var(--surface-card); border: 1px solid var(--outline); border-radius: 14px; padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.sv-legcard-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.sv-leg-title { font-size:12px; font-weight:800; letter-spacing:.4px; color: var(--amber-active); text-transform:uppercase; }
.sv-leg-title::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--amber-active); margin-right:6px; vertical-align:2px; }

/* Footer chips */
.sv-leg-foot { display:flex; gap:8px; margin-top:12px; align-items:center; }
.sv-chip {
  flex:1; background: var(--surface-high); border:1px solid var(--outline);
  border-radius:10px; min-height:38px; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; color: var(--muted); gap:5px;
}
.sv-chip .sv-delta { color: var(--accent); font-weight:700; }
.sv-chip.sv-trash {
  flex:0 0 42px; color: var(--put-red); border-color: rgba(239,83,80,.35); cursor:pointer;
  transition: background .12s ease;
}
.sv-chip.sv-trash:hover { background: rgba(239,83,80,.12); }
/* 2×2 control grid: 1fr | 1fr (Strike|Type / Qty|Price) */
.sv-leg-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sv-cell { display:flex; flex-direction:column; gap:5px; }
.sv-cell label { font-size:10.5px; letter-spacing:.4px; color:var(--muted); text-transform:uppercase; display:flex; align-items:center; gap:3px; }
.sv-currency { color: var(--muted); font-weight:600; }

/* ---- Premium stepper: round icon buttons + centered editable value ---- */
.sv-stepper {
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  background: var(--surface-high); border:1px solid var(--outline);
  border-radius: 14px; min-height: 46px; padding: 4px; box-sizing:border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sv-stepper:focus-within { border-color: var(--amber-active); box-shadow: 0 0 0 3px rgba(255,183,77,.14); }
.sv-stepper-btn {
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface-card); color: var(--muted); border:1px solid var(--outline);
  cursor:pointer; padding:0; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .06s ease;
}
.sv-stepper-btn:hover { color: var(--text); border-color: var(--muted); background: var(--surface-2); }
.sv-stepper-btn:active { transform: scale(.94); }
.sv-stepper-btn:disabled { opacity:.4; cursor:not-allowed; }
.sv-stepper-val {
  flex:1; text-align:center; min-width:0; padding:0 2px;
  font-size:17px; font-weight:700; color: var(--text);
  outline:none; border-radius:8px; user-select:none;
}
.sv-stepper-val:focus { background: var(--surface-card); }
.sv-stepper-val.is-strike { color: var(--amber-active); font-size:18px; }
.sv-stepper-val.sv-pos { color: var(--call-green); }
.sv-stepper-val.sv-neg { color: var(--put-red); }

/* Type toggle — Call/Put segmented */
.sv-type-toggle {
  display:flex; border:1px solid var(--outline); border-radius:14px; overflow:hidden;
  background: var(--surface-high); min-height:46px;
}
.sv-type-toggle button {
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:13px; font-weight:700; color:var(--muted); background:none; border:none; cursor:pointer; padding:0;
}
.sv-type-toggle button:first-child { border-right:1px solid var(--outline); }
.sv-type-toggle button.sv-call { background: rgba(129,199,132,.16); color: var(--call-green); }
.sv-type-toggle button.sv-put  { background: rgba(239,83,80,.16);  color: var(--put-red); }
.sv-dir { font-size:10px; opacity:.7; }

/* Credit/Debit box — label swaps, value = mid × |count| */
.sv-cd-box {
  background: var(--surface-high); border:1.5px solid var(--outline); border-radius: 14px;
  min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 6px 10px; text-align:center; margin-top: 10px;
  transition: border-color .12s ease;
}
.sv-cd-box.sv-credit { border-color: rgba(129,199,132,.55); }
.sv-cd-box.sv-debit  { border-color: rgba(239,83,80,.55); }
.sv-cd-box .sv-k { font-size:9.5px; letter-spacing:.8px; font-weight:800; text-transform:uppercase; }
.sv-cd-box.sv-credit .sv-k { color: var(--call-green); }
.sv-cd-box.sv-debit  .sv-k { color: var(--put-red); }
.sv-cd-box .sv-v { font-size: 17px; font-weight: 700; color: var(--text); }
.sv-cd-box .sv-v .sv-per { font-size:10px; color:var(--muted); font-weight:500; }

/* Spark axis strike ticks */
.sv-spark-axis span { position:absolute; bottom:0; font-size:8.5px; color:var(--muted); transform: translateX(-50%); }

/* Add leg */
.sv-add-leg {
  width: 100%; background: var(--surface-high); border: 1px dashed var(--outline);
  color: var(--muted); border-radius: 8px; padding: 8px; cursor:pointer; font:inherit; font-size:0.85rem;
}
.sv-add-leg:hover { color: var(--accent); border-color: var(--accent); }

/* Footer chips: Δ, POP, trash */
.sv-leg-foot { display:flex; gap:8px; margin-top:10px; align-items:center; }
.sv-chip {
  flex:1; background: var(--surface-high); border:1px solid var(--outline);
  border-radius:8px; min-height:36px; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; color: var(--muted); gap:5px;
}
.sv-chip .sv-delta { color: var(--accent); font-weight:700; }
.sv-chip.sv-pick { color: var(--teal-hl); border-color: rgba(128,203,196,.45); font-weight:600; cursor:pointer; }
.sv-chip.sv-trash { color: var(--put-red); border-color: rgba(239,83,80,.45); cursor:pointer; }

/* Paid P&L sparkline is the single payoff surface in the dialog */
.pnl-svg { display: block; width: 100%; height: 130px; background: var(--surface-2); border-radius: 8px; }

/* Expiry dropdown */
.sv-row select.sv-expiry { flex: 1; min-width: 0; }

/* Modal footer */
.sv-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.sv-btn { padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; border: none; min-width: 80px; }
.sv-btn:not(.sv-primary) { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.sv-btn.sv-primary { background: var(--accent); color: #fff; }
.sv-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Trade card (reader) */
.trade-card {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; background: var(--surface-2);
}
.tc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tc-badge { font-size: 1rem; }
.tc-title { font-weight: 700; color: var(--text); }
.tc-sent { font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; }
.tc-sent.bullish { background: rgba(129,199,132,0.2); color: #81C784; }
.tc-sent.bearish { background: rgba(239,83,80,0.2); color: #EF5350; }
.tc-sent.neutral { background: rgba(150,150,150,0.2); color: var(--muted); }
.tc-exp { font-size: 0.75rem; color: var(--muted); }
.tc-legs { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 8px; }
.tc-legs th, .tc-legs td { text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); color: var(--text); }
.tc-legs th:first-child, .tc-legs td:first-child { text-align: left; }
.tc-legs th { color: var(--muted); font-weight: 600; }
.tc-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.tc-stat { display: flex; flex-direction: column; }
.tc-stat .k { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tc-stat .v { font-weight: 700; color: var(--text); }
.tc-graph { width: 100%; }

/* ---- v2 trade card extras: meta row, contracts, expiry column, explorer ---- */
.tc-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; font-size: 0.78rem; }
.tc-under { font-weight: 700; color: var(--text); }
.tc-net { font-weight: 700; }
.tc-net.credit { color: #81C784; }
.tc-net.debit { color: #EF5350; }
.tc-fill { flex: 1; }
.tc-time { color: var(--muted); font-size: 0.72rem; }
.tc-long { color: #81C784; }
.tc-short { color: #EF5350; }
.tc-actions { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; justify-content: flex-end; }
.tc-explore {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--teal-hl, #80cbc4); border: 1px solid rgba(128,203,196,.45);
  border-radius: 14px; padding: 4px 12px; font-size: 0.76rem; font-weight: 700;
  text-decoration: none; background: rgba(128,203,196,.08);
}
.tc-explore:hover { background: rgba(128,203,196,.16); color: #fff; }
[hidden] { display: none !important; }

/* ===== v3 composer: chain panel + market bar + greeks aggregate ===== */
.sv-chain-status {
  min-height: 1em; font-size: 11.5px; color: var(--muted); padding: 0 2px;
}
.sv-chain-status.sv-chain-status-err { color: var(--put-red); }
.sv-chain-status.sv-chain-status-muted { color: var(--muted); }

.sv-market-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-high); border: 1px solid var(--outline); border-radius: 10px;
  padding: 6px 10px; min-height: 36px;
}
.sv-market-bar .sv-spot { font-size: 12.5px; color: var(--muted); }
.sv-market-bar .sv-spot b { color: var(--text); font-size: 14px; font-weight: 700; }
.sv-market-bar .sv-iv-chip,
.sv-market-bar .sv-exp-chip {
  font-size: 11.5px; color: var(--muted);
  background: var(--surface-card); border: 1px solid var(--outline);
  border-radius: 999px; padding: 2px 8px;
}
.sv-market-bar .sv-iv-chip b,
.sv-market-bar .sv-exp-chip b { color: var(--text); font-weight: 700; }
.sv-market-bar .sv-watch-btn {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-card); color: var(--muted); border: 1px solid var(--outline);
  font-size: 16px; line-height: 1; cursor: pointer; transition: color .12s ease, border-color .12s ease;
}
.sv-market-bar .sv-watch-btn:hover { color: var(--text); }
.sv-market-bar .sv-watch-btn.on { color: var(--amber-active); border-color: var(--amber-active); }

.sv-greeks {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.sv-greek-cell {
  background: var(--surface-high); border: 1px solid var(--outline);
  border-radius: 8px; padding: 6px 8px; min-height: 42px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.sv-greek-cell .k { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .4px; }
.sv-greek-cell .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sv-greek-cell.sv-pos { border-color: rgba(129,199,132,.45); }
.sv-greek-cell.sv-pos .v { color: var(--call-green); }
.sv-greek-cell.sv-neg { border-color: rgba(239,83,80,.45); }
.sv-greek-cell.sv-neg .v { color: var(--put-red); }
.sv-greek-cell.sv-na { opacity: .55; }

/* ---- chain panel: the SHARED 2D options widget (options-chain.js) ----
   The New-Twit dialog renders the SAME CALLS | Strike | PUTS table the
   per-ticker Options tab uses (SVOptionsChain), so the two surfaces never
   drift. The ochain styles live in style.css; here we only cap the height so
   the full-height ticker table fits compactly inside the 680px modal, and
   let the whole widget scroll as a unit. */
.sv-chain-panel {
  border: 1px solid var(--outline); border-radius: 10px; background: var(--surface-2);
  padding: 0;
}
.sv-chain-panel .sv-chain-empty {
  text-align: center; color: var(--muted); font-size: 12px; padding: 18px 8px;
}
.sv-chain-summary-head {
  display: flex; justify-content: flex-start; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 11.5px; color: var(--muted);
  background: var(--surface-high); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2; border-radius: 10px 10px 0 0;
  flex-wrap: wrap;
}
.sv-chain-browse-btn {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 14px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.sv-chain-browse-btn:hover { background: var(--accent); color: #fff; }

/* (+)/(−) strike add/remove cluster — adds/removes the ACTIVE leg's strike. */
.sv-chain-head-cluster {
  display: flex; gap: 4px; align-items: center;
}
.sv-chain-head-btn {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card); color: var(--muted);
  border: 1px solid var(--outline); cursor: pointer; padding: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sv-chain-head-btn:hover { color: var(--accent); border-color: var(--accent); }
.sv-chain-head-btn[data-act="remove-strike"]:hover { color: var(--put-red); border-color: var(--put-red); }

/* Spacer pushes the volume checkbox + expiry select to the RIGHT of the header
   (where the old "strikes · date · ATM" count text used to sit). */
.sv-chain-head-spacer { flex: 1 1 auto; }

.sv-chain-vol {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted); white-space: nowrap; cursor: pointer;
  user-select: none; padding: 2px 6px; border: 1px solid var(--outline);
  border-radius: 999px; background: var(--surface-card);
}
.sv-chain-vol input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.sv-chain-vol:hover { color: var(--text); border-color: var(--muted); }
.sv-chain-summary-head select.sv-expiry {
  flex: 0 0 auto; min-width: 150px; max-width: 200px;
  font-size: 11.5px; padding: 4px 8px; border-radius: 8px;
  background: var(--surface-card); color: var(--text); border: 1px solid var(--outline);
  font-family: inherit; cursor: pointer;
}

/* Compact the shared ochain table inside the modal. The widget owns its own
   scrollbar (PUTS pane); we just bound the whole widget's height so it never
   pushes the modal below the fold. */
.sv-chain-widget-wrap .options-chain-panes {
  height: 260px; border: 0; border-radius: 0;
}
.sv-chain-widget-wrap.sv-full-chain .options-chain-panes {
  height: 460px;
}
.sv-chain-widget-wrap {
  position: relative; min-height: 0;
}

/* Clickable rows/strikes in the composer chain get a pointer cursor. */
.sv-chain-widget-wrap .ochain-selectable {
  cursor: pointer;
}
.sv-chain-widget-wrap .ochain-selectable:hover {
  filter: brightness(1.08);
}

/* ---- leg selector strip (one chip per leg, above the chain table) ---- */
.sv-leg-selector {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px;
  background: var(--surface-hover); border-bottom: 1px solid var(--outline);
}
.sv-leg-chip {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-card); border: 1px solid var(--outline);
  color: var(--muted); font-family: inherit; font-size: 12px;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.sv-leg-chip:hover { border-color: var(--muted); color: var(--text); }
.sv-leg-chip.sv-leg-chip-active {
  background: rgba(255,183,77,.16); border-color: var(--amber-active, #ffb74d);
  color: var(--amber-active, #ffb74d); font-weight: 700;
}
.sv-leg-chip-n {
  font-weight: 800; font-size: 10px; color: var(--muted);
  width: 14px; height: 14px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--surface-2);
}
.sv-leg-chip-active .sv-leg-chip-n { background: var(--amber-active, #ffb74d); color: #0b1220; }
.sv-leg-chip-k { font-weight: 600; }
.sv-leg-chip-s { font-family: var(--mono); font-size: 11.5px; }

.sv-ticker-row { position: relative; }
.sv-ticker-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 8px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); padding: 4px 0; display: none;
}
.sv-ticker-dropdown:not([hidden]) { display: block; }
.sv-ticker-suggest {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: 6px 12px; font-size: 13px;
  border: none; background: none; color: var(--text); font-family: inherit;
  border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.sv-ticker-suggest:hover { background: var(--surface-hover); }
.sv-ticker-suggest.suggest-active { background: var(--accent); color: #fff; }
.sv-ticker-suggest:last-child { border-bottom: none; }
.suggest-symbol { font-weight: 700; font-family: var(--mono); color: var(--accent); width: 50px; flex-shrink: 0; }
.sv-ticker-suggest.suggest-active .suggest-symbol { color: #fff; }
.suggest-name { color: var(--muted); font-size: 11.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sv-ticker-suggest:hover .suggest-name,
.sv-ticker-suggest.suggest-active .suggest-name { color: inherit; }

.sv-keyhint {
  font-size: 10.5px; color: var(--muted); text-align: center; padding: 4px 6px 0;
  border-top: 1px dashed var(--outline); margin-top: 6px; line-height: 1.4;
}

/* ===== MarketData tabs (stock page) ===== */
.md-tabs { display: flex; gap: 4px; margin: 14px 0 10px; border-bottom: 1px solid var(--border); }
.md-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 8px 14px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border-radius: 8px 8px 0 0;
}
.md-tab:hover { color: var(--text); }
.md-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.md-panel { animation: mdFade 0.18s ease; }
@keyframes mdFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.options-panel, .news-panel { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.options-toolbar { display: flex; align-items: center; gap: 12px; }
.options-spot { color: var(--muted); font-size: 0.82rem; }
.options-3d-wrap { display: flex; flex-direction: column; gap: 6px; }
.opt3d-mount {
  position: relative;
  width: 100%; height: 420px; background: #1a1a2e; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.opt3d-mount canvas { display: block; width: 100%; height: 100%; }
.options-3d-status { color: var(--muted); font-size: 0.8rem; min-height: 1em; }

/* ── 3D options side panel (TradingCorp-style left rail) ────────────────────── */
/* Full-height rail attached to the left edge; the collapse button sits on its
   right edge (left:220px) and glides to the far left when collapsed. */
.options-3d-sidebar-wrap {
  position: absolute; top: 0; left: 0; bottom: 0; width: 220px; z-index: 20;
}
.options-3d-sidebar {
  position: relative; z-index: 10;
  width: 220px; height: 100%; box-sizing: border-box;
  background: rgba(26, 26, 46, 0.95);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  padding: 14px;
  display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto;
  transition: transform 0.3s ease;
}
.options-3d-sidebar-title { color:#4fc3f7; font-size: 14px; font-weight: 700; }
.opt3d-mount.options-3d-collapsed .options-3d-sidebar {
  transform: translateX(-220px);
}
.options-3d-collapse-btn {
  position: absolute; top: 50%; left: 220px; z-index: 30;
  transform: translateY(-50%);
  background: rgba(26, 26, 46, 0.95); color: #4fc3f7; cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 18px 10px; font-size: 20px; line-height: 1;
  transition: left 0.3s ease, right 0.3s ease;
}
.options-3d-collapse-btn:hover { background: rgba(40, 40, 70, 0.95); color: #81d4fa; }
.opt3d-mount.options-3d-collapsed .options-3d-collapse-btn {
  left: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px 0 0 6px;
}
/* Fullscreen: the mount becomes a fixed, edge-to-edge overlay (TradingCorp
   `.options-3d-fullscreen-wrapper` equivalent) so the 3D canvas + rail +
   legend fill the whole viewport. */
.opt3d-mount.options-3d-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: #1a1a2e;
  border: none;
  border-radius: 0;
}
.options-3d-label {
  color: #94a3b8; font-size: 0.74rem; font-weight: 600;
  display: flex; flex-direction: column; gap: 4px;
}
.options-3d-label select {
  background: #12172b; color: #cbd5e1; font-size: 0.82rem;
  border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 6px; padding: 5px 6px;
}
.options-3d-pillar-val { color: #fbbf24; font-size: 0.8rem; font-weight: 700; }
.options-3d-slider { width: 100%; accent-color: #6366f1; }
.options-3d-btn {
  width: 100%; box-sizing: border-box; cursor: pointer; text-align: center;
  background: #1e293b; color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 7px;
  padding: 7px 8px; font-size: 0.78rem; font-weight: 600;
}
.options-3d-btn:hover { background: #273449; }
.options-3d-btn.secondary { background: #1e293b; color: #cbd5e1; }
.options-3d-btn.active-toggle { background: #ff9800; color: #1a1a2e; }
.options-3d-legend {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  background: rgba(10, 14, 26, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px;
  padding: 8px 10px; font-size: 0.72rem; color: #cbd5e1;
  display: flex; flex-direction: column; gap: 4px;
}
.options-3d-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.options-3d-legend-box { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.options-3d-hint { color: #64748b; font-size: 0.68rem; line-height: 1.4; }

/* ── Light theme: re-skin the 3D viewport + overlay chrome (the WebGL scene
   itself is re-coloured by SVOptions3D.setTheme → classes .opt3d-mount). ──── */
[data-theme="light"] .opt3d-mount,
[data-theme="light"] .opt3d-mount.options-3d-fullscreen {
  background: var(--surface);
}
[data-theme="light"] .options-3d-sidebar {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: var(--border);
}
[data-theme="light"] .options-3d-sidebar-title { color: #1d7fd0; }
[data-theme="light"] .options-3d-collapse-btn {
  background: rgba(255, 255, 255, 0.96); color: #1d7fd0;
  border-color: var(--border);
}
[data-theme="light"] .options-3d-collapse-btn:hover { background: #fff; color: #c2410c; }
[data-theme="light"] .options-3d-label { color: var(--muted); }
[data-theme="light"] .options-3d-label select {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
[data-theme="light"] .options-3d-pillar-val { color: #b45309; }
[data-theme="light"] .options-3d-btn,
[data-theme="light"] .options-3d-btn.secondary {
  background: var(--surface-2); color: var(--text); border-color: var(--border);
}
[data-theme="light"] .options-3d-btn:hover { background: var(--surface-hover); }
[data-theme="light"] .options-3d-btn.active-toggle { background: #ff9800; color: #1a1a2e; }
[data-theme="light"] .options-3d-legend {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="light"] .options-3d-hint { color: var(--muted); }

/* ===== History tab: OHLCV table ===== */
.history-summary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.history-table-scroll { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history-table thead th {
  position: sticky; top: 0; background: var(--surface); color: var(--muted);
  text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); font-weight: 600;
}
.history-table thead th:first-child { text-align: left; }
.history-table tbody td { padding: 4px 10px; border-bottom: 1px solid var(--border-dim); text-align: right; }
.history-table tbody td:first-child { text-align: left; color: var(--muted); }
.history-table .num { font-variant-numeric: tabular-nums; }
.history-table .pos { color: var(--accent-pos); }
.history-table .neg { color: var(--accent-neg); }

/* ===== News tab ===== */
.news-mood { font-size: 0.85rem; color: var(--muted); }
.news-mood-label { color: var(--muted); }
.news-mood-chip {
  padding: 2px 10px; border-radius: 999px; font-weight: 700; text-transform: capitalize;
  margin-left: 4px;
}
.news-mood-chip.mood-positive { background: rgba(43, 208, 126, 0.18); color: var(--brand-2); }
.news-mood-chip.mood-negative { background: rgba(255, 93, 93, 0.18); color: var(--danger); }
.news-mood-chip.mood-neutral { background: var(--surface-2); color: var(--muted); }
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 6px;
  border-bottom: 1px solid var(--border-soft); text-decoration: none; color: var(--text);
}
.news-item:hover { background: var(--surface-hover); }
.news-title { font-size: 0.9rem; font-weight: 600; }
.news-meta { font-size: 0.75rem; color: var(--muted); }

/* ===== Chain picker modal ===== */
.sv-chain { max-width: 520px; }
.sv-chain-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sv-chain-bar select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.sv-chain-spot { color: var(--accent); font-size: 0.82rem; }
.sv-chain-count { margin-left: auto; color: var(--muted); font-size: 0.82rem; }
.sv-chain-legend { display: flex; gap: 12px; font-size: 0.75rem; color: var(--muted); }
.lg-existing { display: inline-flex; align-items: center; gap: 5px; }
.lg-existing::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: rgba(43, 208, 126, 0.35); border: 1px solid var(--brand-2); }
.sv-chain-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.sv-chain-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.sv-chain-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; padding: 6px 8px; text-align: right; z-index: 1; }
.sv-chain-table th.col-call { color: var(--brand-2); }
.sv-chain-table th.col-put { color: var(--accent); }
.sv-chain-table .sub th { font-weight: 500; font-size: 0.72rem; }
.sv-chain-table td { padding: 5px 8px; text-align: right; border-top: 1px solid var(--border-soft); }
.sv-chain-table .sv-strike { text-align: left; font-family: var(--mono); font-weight: 600; }
.sv-cell { cursor: pointer; border-radius: 6px; }
.sv-cell:hover { background: var(--surface-hover); }
.sv-cell.sv-sel { background: rgba(78, 168, 255, 0.28); color: var(--text); font-weight: 700; }
.sv-cell.sv-existing { box-shadow: inset 0 0 0 2px var(--brand-2); }
.sv-cell.sv-empty { color: var(--muted); cursor: default; }
.sv-chain-none { text-align: center; color: var(--muted); padding: 18px; }
.sv-chain-status { color: var(--muted); font-size: 0.82rem; min-height: 1em; }