/* options.css — Options Chain view. Token-driven (dark/light). */
.opt-root { display: flex; flex-direction: column; gap: 14px; }
.opt-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.opt-sym-box { display: flex; align-items: center; gap: 8px; }
.opt-sym-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; font-weight: 800; }
.opt-sym-box input { height: 36px; width: 150px; padding: 0 12px; border-radius: 9px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-strong); font-size: 15px; font-weight: 700; }
.opt-btn { height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-weight: 700; cursor: pointer; }
.opt-btn:hover { background: var(--accent); color: #fff; }
.opt-btn:disabled { opacity: .6; cursor: default; }
.opt-quote { display: flex; align-items: center; gap: 8px; }
.opt-q-sym { font-weight: 800; color: var(--text-strong); }
.opt-q-px { font-family: var(--mono); font-size: 17px; color: var(--text-strong); }
.opt-q-live { color: var(--accent); font-size: 11px; font-weight: 700; }
.opt-q-sim { color: var(--amber); font-size: 11px; font-weight: 700; }
.opt-flex { flex: 1; }
.opt-exp-label, .opt-greek-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.opt-exp-label select { height: 34px; padding: 0 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; }
.opt-greek-toggle { cursor: pointer; }

.opt-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.opt-card { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; background: var(--panel); border: 1px solid var(--border); border-radius: 11px; }
.opt-card-l { color: var(--muted-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.opt-card-v { font-size: 19px; font-family: var(--mono); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.opt-card-s { color: var(--muted); font-size: 11px; font-style: normal; }

.opt-grid-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.opt-chain-scroll { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.opt-chain { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.opt-chain th, .opt-chain td { padding: 5px 8px; text-align: right; white-space: nowrap; }
.opt-side-head th { position: sticky; top: 0; z-index: 3; padding: 7px 8px; font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: .08em; }
.opt-calls-h { background: var(--green-soft); color: var(--up); text-align: left; }
.opt-puts-h { background: var(--red-soft); color: var(--down); text-align: right; }
.opt-strike-h { background: var(--panel-3); color: var(--text-strong); text-align: center; }
.opt-col-head th { position: sticky; top: 30px; z-index: 2; background: var(--panel-2); color: var(--muted); font-family: "Inter", sans-serif; font-size: 10.5px; font-weight: 700; border-bottom: 1px solid var(--border); }
.opt-strike-c { text-align: center !important; background: var(--panel-3) !important; color: var(--text-strong); }
.opt-row { border-bottom: 1px solid var(--border-soft); }
.opt-row:hover td { background: var(--accent-soft) !important; }
.opt-c { color: var(--muted); }
.opt-c-itm { color: var(--text); }
.opt-itm-call { background: rgba(38,166,154,0.045); }
.opt-itm-put { background: rgba(239,83,80,0.045); }
.opt-last { color: var(--text-strong); font-weight: 600; }
.opt-strike { text-align: center; background: var(--panel-2); color: var(--text-strong); font-weight: 700; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.opt-strike.atm, .opt-strike-c.atm { color: var(--accent); }
.opt-atm td { box-shadow: inset 0 1px 0 var(--accent-line), inset 0 -1px 0 var(--accent-line); }
.opt-atm .opt-strike { background: var(--accent-soft); }
.opt-empty { text-align: center; color: var(--muted-2); padding: 30px; font-family: "Inter", sans-serif; }

.opt-side { display: flex; flex-direction: column; gap: 12px; }
.opt-side-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.opt-side-card h3 { margin: 0 0 10px; font-size: 12px; color: var(--text-strong); }
.opt-oi-bars { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; }
.opt-oi-row { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; gap: 4px; height: 15px; }
.opt-oi-row.atm .opt-oi-k { color: var(--accent); font-weight: 700; }
.opt-oi-k { text-align: center; font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt-oi-call, .opt-oi-put { height: 9px; display: flex; }
.opt-oi-call { justify-content: flex-end; }
.opt-oi-call i { background: var(--up); border-radius: 2px 0 0 2px; height: 100%; }
.opt-oi-put i { background: var(--down); border-radius: 0 2px 2px 0; height: 100%; }

@media (max-width: 1100px) {
  .opt-summary { grid-template-columns: repeat(3, 1fr); }
  .opt-grid-wrap { grid-template-columns: 1fr; }
  .opt-side { flex-direction: row; }
  .opt-side-card { flex: 1; }
}
@media (max-width: 680px) {
  .opt-summary { grid-template-columns: repeat(2, 1fr); }
  .opt-side { flex-direction: column; }
}