:root {
  --oh-average:#FFD078;
  --oh-up-fill:rgba(255,102,135,.18);
  --oh-up-fade:rgba(255,102,135,.03);
  --oh-down-fill:rgba(84,223,192,.18);
  --oh-down-fade:rgba(84,223,192,.03);
}
:root[data-theme="light"] {
  --oh-average:#B8860B;
  --oh-up-fill:rgba(213,37,80,.18);
  --oh-up-fade:rgba(213,37,80,.03);
  --oh-down-fill:rgba(0,127,90,.18);
  --oh-down-fade:rgba(0,127,90,.03);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:12px/1.5 var(--font-ui); -webkit-font-smoothing:antialiased; }
button,select,input { font:inherit; }
button,select { outline-offset:3px; }
button:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); }
button { cursor:pointer; }
button:disabled,select:disabled { cursor:default; opacity:.5; }
.oh-app { width:100%; min-height:100dvh; margin:0; padding:0; }
.oh-workspace { min-width:0; padding:10px; }
/* Use the shared full-width dashboard shell without the term page’s action-row breakpoints. */
.oh-app > .app-header { position:relative; z-index:20; min-height:58px; padding:0 18px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); margin:0; background:var(--panel); box-shadow:0 12px 36px color-mix(in srgb,var(--shadow-color) 22%,transparent); }
.oh-app > .app-header > .brand { display:flex; align-items:center; gap:14px; min-width:0; padding-right:0; }
.oh-app .brand-word { flex:none; white-space:nowrap; }
.oh-app .page-switcher-title { white-space:nowrap; }
.oh-header-actions { display:flex; flex:none; align-items:center; margin-left:auto; gap:14px; color:var(--muted); font-size:11px; }
.oh-refresh { display:flex; align-items:center; gap:7px; min-height:32px; padding:4px 11px; color:var(--accent-ink); background:var(--soft); border:1px solid var(--warning-border); border-radius:5px; }
.oh-app > .app-header > .theme-toggle { position:static; min-height:32px; }
.oh-filters { margin-bottom:10px; align-items:end; display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); gap:12px; }
.oh-date-field,.oh-target-field { display:grid; gap:6px; min-width:0; }
.oh-date-field > span,.oh-target-field > span { color:var(--muted); font-size:10px; letter-spacing:.07em; }
.oh-date-trigger,.oh-target-trigger { min-width:0; width:100%; height:50px; padding:0 12px; color:var(--text); border:1px solid var(--line-strong); border-radius:5px; background:var(--panel); }
.oh-date-trigger:hover:enabled,.oh-target-trigger:hover:enabled { border-color:var(--accent); }
.oh-target-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.oh-target-trigger > span { display:grid; min-width:0; gap:2px; }.oh-target-trigger svg { flex:none; transition:transform .15s; }.oh-target-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.oh-target-trigger strong { font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.oh-target-trigger small { color:var(--muted); font:10px var(--font-data); }
.oh-date-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; font:12px var(--font-data); }
.oh-date-trigger svg { flex:none; color:var(--muted); }.oh-date-trigger[aria-expanded="true"] { border-color:var(--accent); }.oh-date-trigger[aria-expanded="true"] svg { color:var(--accent-ink); }
.oh-calendar { position:fixed; inset:auto; margin:0; padding:0 10px 12px; width:332px; max-width:calc(100vw - 16px); border:1px solid var(--line-strong); border-radius:9px; color:var(--text); background:var(--panel); box-shadow:0 18px 60px #0005; overflow:auto; }
.oh-calendar .oh-picker-header { padding:8px 3px 3px; }.oh-calendar-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 7px; }.oh-calendar-nav strong { font:600 13px var(--font-ui); }
.oh-calendar-nav-button { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:5px; color:var(--text); background:transparent; }.oh-calendar-nav-button:hover:enabled { border-color:var(--line); background:var(--hover); }.oh-calendar-nav-button:disabled { opacity:.3; }
.oh-calendar-grid { width:100%; table-layout:fixed; border-spacing:3px; }.oh-calendar-grid th { padding:6px 0; color:var(--muted); font-size:10px; font-weight:500; }.oh-calendar-grid td { height:37px; padding:0; text-align:center; }
.oh-calendar-day { width:100%; height:37px; padding:0; border:1px solid transparent; border-radius:5px; background:var(--raised); color:var(--text); font:12px var(--font-data); }
.oh-calendar-day:hover:enabled { border-color:var(--accent); background:var(--hover); }.oh-calendar-day[aria-pressed="true"] { color:var(--accent-text); background:var(--accent); border-color:var(--accent); font-weight:700; }.oh-calendar-day:disabled { opacity:.38; background:transparent; }.oh-calendar-day:focus-visible { outline-offset:-3px; }
.oh-calendar-status { margin:8px 3px 0; color:var(--muted); font-size:10px; min-height:15px; }
@media(max-width:640px) { .oh-calendar { inset:auto auto 8px 50%; transform:translateX(-50%); width:360px; max-height:calc(100dvh - 16px); padding-bottom:calc(12px + env(safe-area-inset-bottom)); border-radius:12px; }.oh-calendar .oh-picker-header { padding-block:10px 4px; }.oh-calendar-day,.oh-calendar-grid td { height:40px; }.oh-calendar-nav-button { width:38px; height:38px; } }
.oh-picker { position:fixed; inset:auto; margin:0; padding:0; max-width:none; border:1px solid var(--line-strong); border-radius:9px; color:var(--text); background:var(--panel); box-shadow:0 18px 60px #0005; overflow:hidden; }
.oh-picker[open] { display:flex; flex-direction:column; }.oh-picker::backdrop { background:#0003; }
.oh-picker-header { display:flex; align-items:center; justify-content:space-between; padding:11px 14px 7px; gap:12px; }
.oh-picker-close { display:grid; place-items:center; width:30px; height:30px; padding:0; font-size:22px; border:0; border-radius:4px; background:transparent; color:var(--muted); }.oh-picker-close:hover { background:var(--hover); color:var(--text); }
.oh-picker-search { display:block; padding:0 14px 10px; }.oh-picker-search input { width:100%; height:37px; padding:0 11px; border:1px solid var(--line-strong); border-radius:5px; background:var(--bg); color:var(--text); outline-offset:2px; }.oh-picker-search input:focus-visible { outline:2px solid var(--accent); }
.oh-picker-trail { display:flex; align-items:center; gap:12px; min-height:29px; padding:0 14px 8px; color:var(--muted); font-size:10px; }.oh-picker-trail span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oh-picker-columns { display:flex; min-height:0; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.oh-picker-column { flex:1 1 170px; min-width:0; display:flex; flex-direction:column; }.oh-picker-column[hidden] { display:none; }.oh-picker-column:first-child { flex:1.7 1 280px; }.oh-picker-column + .oh-picker-column { border-left:1px solid var(--line); }
.oh-picker-column h3 { margin:0; padding:10px 14px 7px; font-size:10px; font-weight:500; color:var(--muted); }
.oh-picker-list { min-height:0; max-height:355px; overflow-y:auto; padding:0 6px 6px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; overscroll-behavior:contain; }
.oh-picker-option { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:53px; padding:9px 8px; gap:7px; border:0; border-radius:5px; color:var(--text); background:transparent; text-align:left; }
.oh-picker-option > span:first-child { display:grid; gap:4px; min-width:0; }.oh-picker-option strong { font-size:11px; font-weight:600; overflow-wrap:anywhere; }.oh-picker-option small { font:10px var(--font-data); color:var(--muted); }.oh-picker-arrow { flex:none; color:var(--accent-ink); font-size:19px; }
.oh-picker-option:hover { background:var(--hover); }.oh-picker-option[aria-current="true"] { background:var(--soft); color:var(--accent-ink); }.oh-picker-option:focus-visible { outline-offset:-2px; }
.oh-picker-empty { padding:20px 14px; margin:0; font-size:12px; color:var(--muted); }.oh-picker-footer { padding:10px 14px; color:var(--muted); font-size:10px; }
.oh-summary { display:grid; grid-template-columns:minmax(190px,1.6fr) repeat(5,minmax(100px,1fr)); gap:0; padding:14px 0; border:1px solid var(--line); border-radius:7px; background:var(--panel); margin-bottom:10px; }
.oh-summary > div { display:grid; align-content:center; gap:5px; padding:0 18px; }
.oh-summary > div + div { border-left:1px solid var(--line); }
.oh-summary span { color:var(--muted); font-size:10px; }
.oh-summary strong { font:600 17px/1.35 var(--font-data); font-variant-numeric:tabular-nums; }
.oh-summary-title strong { font-family:var(--font-ui); font-size:14px; }
.oh-up { color:var(--up)!important; }.oh-down { color:var(--down)!important; }
.oh-notice { margin-bottom:10px; padding:11px 14px; border-left:2px solid var(--accent); background:var(--soft); color:var(--accent-ink); font-size:12px; }
.oh-notice button { margin-left:12px; }
.oh-panel { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.oh-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:57px; padding:11px 14px; border-bottom:1px solid var(--line); }
.oh-panel-heading > div { display:flex; align-items:baseline; gap:12px; min-width:0; }
h2 { margin:0; flex:none; font-size:13px; font-weight:600; }
.oh-panel-heading span { color:var(--muted); font:10px/1.4 var(--font-data); }
.oh-text-button { padding:4px 0; border:0; color:var(--accent-ink); background:transparent; font-size:11px; white-space:nowrap; }
.oh-chain-scroll { max-height:445px; overflow:auto; scrollbar-color:var(--line-strong) transparent; scrollbar-width:thin; overscroll-behavior:contain; }
.oh-chain-table { width:100%; min-width:0; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.oh-leg-col { width:calc((100% - 90px)/2); }.oh-strike-col { width:90px; }
.oh-chain-table th,.oh-chain-table td { padding:0; }
.oh-chain-table thead { position:sticky; top:0; z-index:3; background:var(--panel); }
.oh-chain-table thead tr:first-child > th { height:34px; font:700 11px var(--font-data); letter-spacing:.08em; border-bottom:1px solid var(--line); background:var(--raised); }
.oh-chain-table thead tr:first-child span { margin-left:8px; font:600 11px var(--font-ui); letter-spacing:0; }
.oh-chain-table thead tr:nth-child(2) th { height:33px; border-bottom:1px solid var(--line); color:var(--muted); font:500 10px var(--font-ui); }
.oh-call { color:var(--up); }.oh-put { color:var(--down); }
.oh-chain-table .oh-strike { position:relative; z-index:2; width:90px; text-align:center; border-inline:1px solid var(--line); background:var(--raised); font:600 13px var(--font-data); }
.oh-chain-table tbody td,.oh-chain-table tbody th { border-bottom:1px solid var(--line); }
.oh-chain-table tbody tr:last-child td,.oh-chain-table tbody tr:last-child th { border-bottom:0; }
.oh-chain-table tbody tr.oh-atm .oh-strike { color:var(--accent-ink); background:var(--soft); }
.oh-strike small { display:block; margin-top:4px; font:600 8px var(--font-ui); letter-spacing:.05em; }
.oh-leg-viewport { overflow-x:auto; overflow-y:hidden; width:100%; scrollbar-width:none; overscroll-behavior-x:contain; }
.oh-leg-viewport::-webkit-scrollbar { display:none; }
.oh-quote-grid { min-width:730px; display:grid; grid-template-columns:112px repeat(8,minmax(0,1fr)); align-items:center; width:100%; gap:2px; }
.oh-quote-grid.oh-put { grid-template-columns:repeat(8,minmax(0,1fr)) 112px; }
.oh-quote-grid > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; padding:0 8px 0 2px; }
.oh-quote-grid > span.oh-symbol { padding-left:10px; font-size:10px; text-align:left; }
button.oh-quote-grid { min-height:39px; padding:3px 0; color:var(--text); font:11px var(--font-data); border:0; background:transparent; text-align:inherit; }
button.oh-quote-grid + button { border-top:1px dashed var(--line); }
button.oh-quote-grid:hover { background:var(--hover); }
button.oh-quote-grid[aria-pressed="true"] { background:var(--soft); box-shadow:inset 3px 0 var(--accent); }
button.oh-quote-grid[aria-pressed="true"] .oh-symbol { color:var(--accent-ink); }
button.oh-quote-grid:focus-visible { outline-offset:-2px; }
.oh-quote-price { font-weight:700; }.oh-quote-empty { padding:12px; text-align:center; color:var(--muted); }
.oh-chain-footer { display:flex; justify-content:space-between; gap:12px; padding:8px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.oh-empty { padding:44px 20px; text-align:center; color:var(--muted); }
.oh-empty button { display:block; margin:10px auto 0; }
.oh-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.oh-chart-panel .oh-panel-heading { align-items:flex-start; }.oh-chart-panel .oh-panel-heading > div { display:grid; gap:4px; }
.oh-chip { flex:none; padding:3px 7px; border:1px solid var(--line); border-radius:4px; background:var(--raised); }
.oh-chart-body { display:grid; grid-template-columns:minmax(0,1fr) 190px; align-items:stretch; }
.oh-chart-plot { min-width:0; }
.oh-chart-readout { min-height:31px; padding:7px 14px 0; color:var(--muted); font:10px/1.5 var(--font-data); }
.oh-chart-stage { position:relative; height:380px; margin:0 6px; }.oh-chart { width:100%; height:100%; }
.oh-chart-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:var(--muted); background:var(--panel); font-size:12px; }
.oh-chart-foot { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:8px 14px 10px; color:var(--muted); font-size:10px; }
.oh-snapshot { min-width:0; padding:10px 11px; border-left:1px solid var(--line); background:var(--panel); font-variant-numeric:tabular-nums; }
.oh-snapshot-heading { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.oh-snapshot-heading h3 { margin:0; font-size:11px; font-weight:600; white-space:nowrap; }
.oh-snapshot-heading > span { color:var(--text); font:10px/1.5 var(--font-data); white-space:nowrap; }
.oh-book-heading,.oh-book-row { display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); gap:4px; align-items:center; min-height:19px; font:10px/1.5 var(--font-data); }
.oh-book-heading { padding-bottom:4px; margin-bottom:3px; border-bottom:1px solid var(--line); color:var(--muted); font-family:var(--font-ui); }
.oh-book-heading > :not(:first-child),.oh-book-row > :not(:first-child) { text-align:right; }
.oh-book-row > * { min-width:0; white-space:nowrap; }
.oh-book-row [data-field="label"] { color:var(--muted); }
.oh-book-row [data-field="price"][data-tone="neutral"] { color:var(--text); }
.oh-book-row[data-book-side="ask"] { --oh-depth-color:var(--oh-down-fill); }
.oh-book-row[data-book-side="bid"] { --oh-depth-color:var(--oh-up-fill); }
.oh-book-row [data-field="volume"] { border-radius:2px; background:linear-gradient(to left,var(--oh-depth-color) 0 var(--oh-depth-width,0%),transparent var(--oh-depth-width,0%) 100%); }
.oh-book-balance { margin:7px 0 8px; }
.oh-book-balance-bar { height:5px; overflow:hidden; border-radius:2px; background:var(--up); }
.oh-book-balance-bar > i { display:block; width:var(--oh-sell-share,0%); height:100%; background:var(--down); }
.oh-book-balance:not([data-state="ready"]) .oh-book-balance-bar { background:var(--line); }
.oh-snapshot-metrics { margin:10px 0 0; padding-top:7px; border-top:1px solid var(--line); }
.oh-snapshot-metrics > div { display:flex; justify-content:space-between; align-items:baseline; gap:6px; min-height:22px; }
.oh-snapshot-metrics dt { color:var(--muted); font-size:10px; }
.oh-snapshot-metrics dd { margin:0; color:var(--text); font:10px/1.5 var(--font-data); text-align:right; }
.oh-snapshot-last dd { font-size:13px; font-weight:600; }
.oh-snapshot [data-tone="up"] { color:var(--up); }
.oh-snapshot [data-tone="down"] { color:var(--down); }
.oh-price-key:before,.oh-average-key:before,.oh-volume-key:before,.oh-interest-key:before { content:''; display:inline-block; vertical-align:middle; width:9px; height:7px; margin-right:5px; background:var(--series-1); }
.oh-price-key:before { height:2px; background:linear-gradient(to right,var(--up) 0 50%,var(--down) 50% 100%); }
.oh-average-key:before { height:2px; background:var(--oh-average); }
.oh-interest-key:before { height:2px; background:var(--series-4); }
.oh-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(min-width:1800px) { .oh-chart-stage { height:390px; }.oh-chain-scroll { max-height:490px; } }
@media(max-width:1050px) { .oh-summary { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:18px; }.oh-summary > div:nth-child(4) { border-left:0; }.oh-header-actions #refreshStatus { display:none; }.oh-charts { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .oh-workspace { padding:7px; }.oh-app > .app-header { padding:0 10px; gap:8px; }.oh-app > .app-header > .brand { gap:8px; }.brand-word { font-size:18px; }.oh-header-actions { gap:4px; }.oh-refresh { min-height:28px; padding:3px 8px; }.oh-refresh span { display:none; }.oh-app > .app-header > .theme-toggle { min-height:28px; }.oh-filters { grid-template-columns:128px minmax(0,1fr); gap:9px; }.oh-date-trigger,.oh-target-trigger { padding:0 8px; }.oh-target-trigger { gap:4px; }.oh-target-trigger strong { font-size:11px; }.oh-target-trigger small { font-size:9px; }.oh-summary { padding:12px 0; }.oh-summary > div { padding:0 10px; }.oh-summary strong { font-size:14px; }.oh-summary-title strong { font-size:11px; }.oh-panel-heading { min-height:54px; padding:10px; }.oh-panel-heading > div { align-items:flex-start; flex-direction:column; gap:3px; }.oh-chain-scroll { max-height:365px; }.oh-chain-footer { display:block; padding:8px 10px; }.oh-chain-footer span { display:block; }.oh-chart-stage { height:300px; }.oh-chart-readout { padding:7px 10px; min-height:42px; }.oh-chip { font-size:9px!important; }.oh-chart-foot { padding:8px 10px; gap:8px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

@media(max-width:600px) {
  .oh-chart-body { grid-template-columns:minmax(0,1fr); }
  .oh-snapshot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; padding:11px 12px; border-left:0; border-top:1px solid var(--line); }
  .oh-snapshot-header { grid-column:1/-1; }
  .oh-snapshot-heading { justify-content:flex-start; gap:12px; }
  .oh-snapshot-metrics { align-self:start; margin:0; padding:0; border-top:0; }
  .oh-snapshot-metrics > div { min-height:28px; }
}

@media(max-width:640px) {
  .oh-picker { inset:auto 8px 8px; width:calc(100% - 16px); max-height:calc(100dvh - 32px); border-radius:12px; }
  .oh-picker-header { padding:12px 14px 7px; }.oh-picker-close { width:36px; height:36px; }.oh-picker-columns { min-height:260px; }
  .oh-picker-column { flex:1!important; border-left:0!important; }.oh-picker-list { max-height:min(390px,calc(100dvh - 240px)); padding-inline:8px; }.oh-picker-option { min-height:57px; padding:11px 10px; }.oh-picker-option strong { font-size:13px; }.oh-picker-option small { font-size:11px; }
  .oh-picker[data-step="target"] #expiryPanel,.oh-picker[data-step="target"] #multiplierPanel,.oh-picker[data-step="expiry"] #targetPanel,.oh-picker[data-step="expiry"] #multiplierPanel,.oh-picker[data-step="multiplier"] #targetPanel,.oh-picker[data-step="multiplier"] #expiryPanel { display:none; }
  .oh-picker:not([data-step="target"]) .oh-picker-search { display:none; }.oh-picker-trail { min-height:38px; }.oh-picker-trail .oh-text-button { min-height:32px; font-size:12px; }.oh-picker-footer { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

.oh-chain-table thead .oh-leg-viewport { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.oh-chain-table thead .oh-leg-viewport::-webkit-scrollbar { display:block; height:5px; }
.oh-chain-table thead .oh-leg-viewport::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:3px; }

.oh-snapshot-header { margin-bottom:9px; }
.oh-interest-key[hidden],.oh-snapshot-metrics > [hidden] { display:none; }