/* Options dashboard.
 * Tokens map onto the page-scoped --premium-* variables (premium_dark / premium_light);
 * the fallbacks decide for Default and the other themes. Dark = html.dark (premium dark,
 * classic dark, cyberpunk) or body.dark-theme. */
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.ob {
  --ob-bg: var(--premium-bg-secondary, #f4f6f9);
  --ob-surface: var(--premium-bg-primary, #ffffff);
  --ob-surface-2: var(--premium-bg-tertiary, #f7f9fb);
  --ob-surface-3: #eef2f6;
  --ob-border: var(--premium-border, #e3e8ee);
  --ob-border-strong: #cfd7e1;
  --ob-text: var(--premium-text-primary, #0f1b2a);
  --ob-text-2: var(--premium-text-secondary, #43546a);
  --ob-muted: #5c6b7e;
  --ob-brand: #2E86C1;
  --ob-brand-strong: #1a5276;
  --ob-btn-primary: #1a5276; --ob-btn-primary-hover: #154360;
  --ob-brand-text: #1f6fa5;
  --ob-brand-wash: rgba(46, 134, 193, 0.09);
  --ob-pos: #10b981; --ob-pos-text: #047857; --ob-pos-wash: rgba(16, 185, 129, 0.10);
  --ob-neg: #e5484d; --ob-neg-text: #b4232a; --ob-neg-wash: rgba(229, 72, 77, 0.09);
  --ob-warn: #f59e0b; --ob-warn-text: #8a5208; --ob-warn-wash: rgba(245, 158, 11, 0.13);
  --ob-focus: 0 0 0 3px rgba(46, 134, 193, 0.38);
  --ob-shadow-1: 0 1px 2px rgba(15, 27, 42, 0.05), 0 1px 1px rgba(15, 27, 42, 0.03);
  --ob-shadow-2: 0 10px 28px -10px rgba(15, 27, 42, 0.20), 0 2px 6px rgba(15, 27, 42, 0.05);
  --ob-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ob-fast: 150ms; --ob-med: 220ms;
  --ob-r: 14px; --ob-r-ctl: 9px;
  --ob-font: 'InterVar', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html.dark .ob, body.dark-theme .ob, body.premium-dark-theme .ob {
  --ob-bg: var(--premium-bg-primary, #0d1117);
  --ob-surface: var(--premium-bg-secondary, #161b22);
  --ob-surface-2: var(--premium-bg-tertiary, #1c2128);
  --ob-surface-3: var(--premium-bg-elevated, #242a33);
  --ob-border: var(--premium-border-subtle, #262c35);
  --ob-border-strong: var(--premium-border, #353c47);
  --ob-text: var(--premium-text-primary, #e6edf3);
  --ob-text-2: var(--premium-text-secondary, #a8b2bd);
  --ob-muted: #939daa;
  --ob-brand-text: #6cb6e8;
  --ob-btn-primary: #1f6fa5; --ob-btn-primary-hover: #1a5276;
  --ob-brand-wash: rgba(46, 134, 193, 0.18);
  --ob-pos-text: #3fd49b; --ob-pos-wash: rgba(16, 185, 129, 0.14);
  --ob-neg: #f0565b; --ob-neg-text: #ff8a8e; --ob-neg-wash: rgba(240, 86, 91, 0.14);
  --ob-warn-text: #f7b955; --ob-warn-wash: rgba(245, 158, 11, 0.15);
  --ob-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ob-shadow-2: 0 14px 34px -12px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Page container: overrides the legacy .od-container box (compact-mode rules still key on it) */
.ob.od-container {
  max-width: 1400px; margin: 0 auto; padding: 48px 28px 56px; min-height: 0;
  background: var(--ob-bg); color: var(--ob-text); font-family: var(--ob-font);
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
body:has(.ob) { background: var(--premium-bg-secondary, #f4f6f9); }
html.dark body:has(.ob), body.dark-theme:has(.ob) { background: var(--premium-bg-primary, #0d1117); }
body:has(#email-verification-banner) .ob.od-container { padding-top: 18px; }
main:has(.ob) { height: auto !important; }
.footer.main-footer { position: static !important; }
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
.ob .num, .ob table, .ob .ob-fig, .ob .ob-kpi-v, .ob .ob-when { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.ob .pos { color: var(--ob-pos-text); } .ob .neg { color: var(--ob-neg-text); } .ob .mut { color: var(--ob-muted); }
.ob :focus-visible { outline: none; box-shadow: var(--ob-focus); border-radius: 8px; }
.ob-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob a { color: var(--ob-brand-text); }
.ob h1, .ob h2, .ob h3 { color: var(--ob-text); font-family: var(--ob-font); }

/* ---------- Asset-class bar (same pills and order as the other asset pages) ---------- */
.ob-assets { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ob .ob-assets a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 20px; font: 500 13px/1.2 var(--ob-font); color: var(--ob-text-2); background: var(--ob-surface-2); border: 1px solid var(--ob-border); text-decoration: none; transition: background var(--ob-fast), color var(--ob-fast), border-color var(--ob-fast); }
.ob .ob-assets a i { font-size: 12px; opacity: .8; }
.ob .ob-assets a:hover { background: var(--ob-surface-3); color: var(--ob-text); border-color: var(--ob-border-strong); }
.ob .ob-assets a.active { background: linear-gradient(135deg, #2E86C1 0%, #1a5276 100%); border-color: transparent; color: #fff; }
.ob .ob-assets a.active i { opacity: 1; }

/* ---------- Header: one line ---------- */
.ob-hdr { display: flex; align-items: center; gap: 14px; min-height: 44px; flex-wrap: nowrap; }
.ob-hdr-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ob-title { font-size: 22px; line-height: 1; font-weight: 650; letter-spacing: -0.02em; margin: 0; white-space: nowrap; }
.ob-scope { position: relative; display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-ctl); background: var(--ob-surface); margin: 0; min-width: 0; max-width: 260px; }
.ob-scope-dot { position: absolute; left: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-brand); pointer-events: none; }
.ob-scope-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ob-text); font: 500 13.5px/1 var(--ob-font); height: 32px; padding: 0 30px 0 26px; cursor: pointer; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.ob-scope-select option { color: #0f1b2a; background: #fff; }
.ob-scope-chev { position: absolute; right: 9px; width: 14px; height: 14px; color: var(--ob-muted); pointer-events: none; }
.ob-scope.is-busy .ob-scope-dot { animation: obPulse 900ms ease-in-out infinite; }
.ob-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: 10px; flex: none; }
.ob-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ob-text-2); text-decoration: none; white-space: nowrap; transition: background var(--ob-fast), color var(--ob-fast); }
.ob-tabs a:hover { color: var(--ob-text); }
.ob-tabs a[aria-selected="true"] { background: var(--ob-surface); color: var(--ob-text); box-shadow: var(--ob-shadow-1); }
.ob-cnt { font-size: 11px; background: var(--ob-brand-wash); color: var(--ob-brand-text); padding: 0 6px; border-radius: 10px; line-height: 17px; font-weight: 600; }
.ob-hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ob-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--ob-r-ctl); border: 1px solid var(--ob-border-strong); background: var(--ob-surface); color: var(--ob-text); font: 500 13px/1 var(--ob-font); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--ob-fast), transform var(--ob-fast), border-color var(--ob-fast); }
.ob a.ob-btn { color: var(--ob-text); }
.ob-btn:hover { background: var(--ob-surface-2); }
.ob-btn:active { transform: scale(0.98); }
.ob-btn[disabled], .ob-btn.is-busy { opacity: .7; cursor: progress; }
.ob-btn.is-busy::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: obSpin 700ms linear infinite; }
.ob-btn-primary, .ob a.ob-btn-primary { background: var(--ob-btn-primary); border-color: var(--ob-btn-primary); color: #fff; }
.ob-btn-primary:hover { background: var(--ob-btn-primary-hover); border-color: var(--ob-btn-primary-hover); }
.ob-btn-danger { background: var(--ob-neg); border-color: var(--ob-neg); color: #fff; }
.ob-btn-danger:hover { background: var(--ob-neg); border-color: var(--ob-neg); filter: brightness(0.9); }
.ob-btn-icon { width: 34px; padding: 0; justify-content: center; }
.ob-btn-sm { height: 30px; font-size: 12.5px; padding: 0 10px; }
.ob-btn-ghost { border-color: transparent; background: transparent; color: var(--ob-text-2); }
.ob-menu { border: 1px solid var(--ob-border-strong); background: var(--ob-surface); border-radius: 12px; box-shadow: var(--ob-shadow-2); padding: 6px; min-width: 250px; font-family: var(--ob-font); }
.ob-menu .dropdown-item { border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--ob-text); white-space: normal; }
.ob-menu .dropdown-item:hover, .ob-menu .dropdown-item:focus { background: var(--ob-surface-2); color: var(--ob-text); }
.ob-menu .dropdown-item b, .ob-switch b { display: block; font-weight: 600; font-size: 13px; }
.ob-menu .dropdown-item small, .ob-switch small { display: block; color: var(--ob-muted); font-size: 12px; margin-top: 2px; }
.ob-menu .dropdown-divider { border-color: var(--ob-border); }
.ob-menu-btn { width: 100%; text-align: left; border: 0; background: transparent; }
.ob-settings { width: 300px; }
.ob-switch { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ob-text); margin: 0; }
.ob-switch:hover { background: var(--ob-surface-2); }
.ob-title-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; color: var(--ob-text); font: 650 22px/1 var(--ob-font); letter-spacing: -0.02em; white-space: nowrap; }
.ob-title-btn .ob-ic { width: 16px; height: 16px; color: var(--ob-muted); }
.ob-title-btn:focus-visible { box-shadow: var(--ob-focus); }
.ob-menu .dropdown-item.active { background: var(--ob-brand-wash); color: var(--ob-brand-text); }
.ob-switch input { margin-top: 3px; accent-color: var(--ob-brand); width: 16px; height: 16px; flex: none; }

/* ---------- KPI strip ---------- */
.ob-kpis { margin-top: 14px; display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-1); min-height: 92px; }
.ob-kpis.n6 { grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); }
/* six tiles are narrower: a longer subline (Spanish collateral) gets a third line instead of an ellipsis */
.ob-kpis.n6 .ob-kpi-s { -webkit-line-clamp: 3; line-clamp: 3; }
.ob-kpis.n4 { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); }
.ob-kpis.n3 { grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); }
.ob-kpis.n2 { grid-template-columns: 1.3fr minmax(0, 1fr); }
.ob-kpi { padding: 14px 18px 13px; border-left: 1px solid var(--ob-border); min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ob-kpi:first-child { border-left: 0; }
.ob-kpi-l { line-height: 1.3; font-size: 12.5px; color: var(--ob-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-kpi-v { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; line-height: 1.15; }
.ob-kpi:first-child .ob-kpi-v { font-size: 28px; letter-spacing: -0.025em; }
.ob-kpi-v.unknown { font-size: 16px; font-weight: 500; color: var(--ob-text-2); }
/* sublines wrap to a second line rather than cut the sentence */
.ob-kpi-s { line-height: 1.3; font-size: 12px; color: var(--ob-muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ob-kpi-s b { font-weight: 500; color: var(--ob-text-2); }
.ob-kpi-in { animation: obFade var(--ob-med) var(--ob-ease) both; }

/* ---------- Expiry strip ---------- */
.ob-strip { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ob-seg { position: relative; text-align: left; border: 1px solid var(--ob-border); background: var(--ob-surface); border-radius: 12px; padding: 8px 14px 9px; cursor: pointer; transition: border-color var(--ob-fast), background var(--ob-fast); min-width: 0; color: var(--ob-text); font: inherit; min-height: 52px; }
.ob-seg:hover { border-color: var(--ob-border-strong); }
.ob-seg[aria-pressed="true"] { border-color: var(--ob-brand); background: var(--ob-brand-wash); }
.ob-seg[disabled] { cursor: default; opacity: .72; }
.ob-seg-t { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ob-seg-t .n { font-size: 15px; font-weight: 650; }
.ob-seg-t .sm { display: none; }
.ob-seg-rng { font-weight: 400; color: var(--ob-muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.ob-seg-rng.act { color: var(--ob-warn-text); font-weight: 500; }
.ob-seg.is-busy { opacity: .7; }
.ob-seg.today.has .ob-seg-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-warn); align-self: center; }
.ob-seg-sk { cursor: default; display: flex; align-items: center; }

/* ---------- Layout ---------- */
.ob-main { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.ob-rail { position: sticky; top: 76px; display: grid; gap: 12px; }
.ob-listhead { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; min-height: 32px; }
.ob-h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.ob-h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.ob-listmeta { font-size: 12.5px; color: var(--ob-muted); display: inline-flex; gap: 8px; align-items: center; }
.ob-sp { flex: 1; }
.ob-search { position: relative; display: inline-flex; align-items: center; margin: 0; }
.ob-search .ob-ic { position: absolute; left: 9px; width: 14px; height: 14px; color: var(--ob-muted); }
.ob-search input { height: 32px; border: 1px solid var(--ob-border); background: var(--ob-surface); border-radius: 8px; padding: 0 10px 0 29px; color: var(--ob-text); font: 13px var(--ob-font); width: 200px; }
.ob-search input::placeholder { color: var(--ob-muted); }
.ob-search.is-busy::after { content: ""; position: absolute; right: 9px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ob-muted); border-right-color: transparent; animation: obSpin 700ms linear infinite; }
.ob-sort { margin: 0; position: relative; display: inline-flex; align-items: center; }
.ob-sort-ic { display: none; }
.ob-select { appearance: none; -webkit-appearance: none; height: 32px; border: 1px solid var(--ob-border); background: var(--ob-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8794' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 13px; border-radius: 8px; padding: 0 28px 0 10px; color: var(--ob-text); font: 13px var(--ob-font); cursor: pointer; }
.ob-select option { color: #0f1b2a; background: #fff; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 10px; border-radius: 12px; border: 1px solid var(--ob-brand); background: var(--ob-brand-wash); color: var(--ob-brand-text); font: 500 12px var(--ob-font); cursor: pointer; }
.ob-chip span { font-size: 14px; line-height: 1; }

/* ---------- Section rows (expiry buckets) ---------- */
.ob-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); transition: opacity var(--ob-fast); }
.ob-list.is-loading { opacity: .55; pointer-events: none; }
.ob-bucket { display: flex; align-items: baseline; gap: 8px; margin: 10px 4px 0; font-size: 12px; font-weight: 600; color: var(--ob-text-2); }
.ob-bucket:first-child { margin-top: 0; }
.ob-bucket .mut { font-weight: 400; }
.ob-bucket.today { color: var(--ob-warn-text); }

/* ---------- Settling: one line that expands ---------- */
.ob-settle-sum { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 9px 14px; border: 1px dashed var(--ob-border-strong); border-radius: var(--ob-r); background: var(--ob-surface-2); color: var(--ob-text); cursor: pointer; font-family: var(--ob-font); transition: border-color var(--ob-fast), background var(--ob-fast); }
.ob-settle-sum:hover { border-color: var(--ob-brand); }
.ob-settle-sum:focus-visible { box-shadow: var(--ob-focus); }
.ob-settle-sum .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ob-surface-3); color: var(--ob-text-2); }
.ob-settle-sum .t { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ob-settle-sum .t b { font-size: 13.5px; font-weight: 600; }
.ob-settle-sum .t span { font-size: 12.5px; color: var(--ob-muted); }
.ob-settle-sum .a { font-size: 12.5px; font-weight: 500; color: var(--ob-brand-text); white-space: nowrap; }
.ob-settle-sum > .ob-ic { color: var(--ob-muted); transition: transform var(--ob-med) var(--ob-ease); }
.ob-settle-sum[aria-expanded="true"] > .ob-ic { transform: rotate(180deg); }
.ob-settle-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.ob-settle-list[hidden] { display: none; }
.ob.compact-mode .ob-settle-list { gap: 5px; }
.ob-fig .p.none.settle::before { border-style: dashed; border-radius: 50%; }
.ob-nomatch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ob-nomatch .ob-quiet { flex: 1 1 260px; }

/* ---------- Position card ---------- */
.ob-card { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-1); transition: border-color var(--ob-fast), box-shadow var(--ob-med); animation: obRise var(--ob-med) var(--ob-ease) both; min-width: 0; }
.ob-card:hover { border-color: var(--ob-border-strong); }
.ob-card.open { box-shadow: var(--ob-shadow-2); border-color: var(--ob-border-strong); }
.ob-card.is-updating { opacity: .6; }
.ob-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1.7fr) 96px minmax(150px, 1fr) 112px 24px; align-items: center; gap: 14px; padding: 9px 14px; cursor: pointer; border-radius: var(--ob-r); min-height: 58px; color: var(--ob-text); font-family: var(--ob-font); }
.ob-row:focus-visible { box-shadow: var(--ob-focus); }
.ob-card-sk .ob-row { cursor: default; grid-template-columns: 34px minmax(0, 1.7fr) 96px minmax(150px, 1fr) 112px; }
.ob-who { min-width: 0; }
.ob-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.ob-sym { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; line-height: 1.3; }
.ob-strat { font-size: 13.5px; color: var(--ob-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ob-pf { color: var(--ob-text-2); font-weight: 500; }
.ob-pf::after { content: "·"; color: var(--ob-muted); margin: 0 6px; font-weight: 400; }
.ob-l2 { margin-top: 3px; font-size: 12.5px; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* four-leg positions: the legs wrap to a second line instead of hiding the last strike */
.ob-l2.legs { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ob-spot { margin-top: 3px; font-size: 12px; color: var(--ob-text-2); line-height: 1.3; }
.ob-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 500; background: var(--ob-surface-3); color: var(--ob-text-2); white-space: nowrap; flex: none; }
.ob-tag.warn { background: var(--ob-warn-wash); color: var(--ob-warn-text); }
.ob-tag.inf { background: transparent; border: 1px dashed var(--ob-border-strong); color: var(--ob-muted); }
/* earnings: neutral, red outline when a break-even sits inside the expected move */
.ob-tag.earn { background: transparent; border: 1px solid var(--ob-border-strong); color: var(--ob-text-2); }
.ob-tag.earn.high { border-color: color-mix(in srgb, var(--ob-neg) 55%, var(--ob-border-strong)); color: var(--ob-neg-text); }
.ob-inf { text-decoration: underline dotted; text-decoration-color: var(--ob-border-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
.ob-when { text-align: left; }
.ob-when .d { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ob-when .d.today { color: var(--ob-warn-text); }
.ob-when .d.settling { color: var(--ob-text-2); font-size: 13.5px; }
.ob-when .e { font-size: 12px; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-when .e + .e { font-size: 11.5px; }
/* 0DTE rows carry a settlement and a mark time: they wrap instead of clipping */
.ob-when .d.today ~ .e, .ob-when .d.settling ~ .e { white-space: normal; overflow: visible; line-height: 1.3; }
/* time elapsed to expiry */
.ob-when .ob-bar { width: 64px; margin-top: 5px; height: 3px; }
.ob-bar.time i { background: var(--ob-brand); opacity: .75; }
.ob-fig { min-width: 0; }
.ob-fig .p { font-size: 16px; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.ob-fig .p.none { font-size: 13px; font-weight: 500; color: var(--ob-text-2); display: inline-flex; gap: 6px; align-items: center; }
.ob-fig .p.none::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--ob-muted); }
.ob-fig .c { font-size: 12px; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.ob-bar { margin-top: 4px; height: 4px; border-radius: 2px; background: var(--ob-surface-3); overflow: hidden; }
.ob-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ob-pos); transform-origin: left; animation: obGrow 250ms var(--ob-ease) both; }
.ob-bar i.neg { background: var(--ob-neg); }
.ob-fig .ob-bar { max-width: 168px; }
.ob-pay { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; min-width: 0; }
.ob-pay svg { display: block; }
/* defined-risk rows: max loss under a shorter payoff shape, so the row keeps its height */
.ob-pay.has-ml svg { height: 24px; width: auto; }
.ob-pay .ml { font-size: 11.5px; color: var(--ob-text-2); white-space: nowrap; line-height: 1.2; }
.ob-chev { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--ob-muted); transition: transform var(--ob-med) var(--ob-ease); }
.ob-card.open .ob-chev { transform: rotate(180deg); }

/* logo */
.ob-tk { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--ob-brand-wash); color: var(--ob-brand-text); font-weight: 700; letter-spacing: -0.02em; width: 34px; height: 34px; font-size: 11px; }
.ob-tk img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ob-tk.sm { width: 28px; height: 28px; font-size: 9.5px; }
/* Dark themes: a light disc behind a logo image keeps dark marks legible; the text badge has no image. */
html.dark .ob-tk img, body.dark-theme .ob-tk img, body.premium-dark-theme .ob-tk img { width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; box-shadow: 0 0 0 3px #e9eef4; }

/* ---------- Expanded story ---------- */
.ob-story { border-top: 1px solid var(--ob-border); padding: 16px; animation: obFadeDown var(--ob-med) var(--ob-ease); }
.ob-story[hidden] { display: none; }
.ob-story-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.ob-spot-detail { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ob-text-2); }
.ob-sec-t { font-size: 12px; font-weight: 600; color: var(--ob-text-2); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.ob-sec-t .mut { font-weight: 400; }
.ob-evid { font-size: 12.5px; color: var(--ob-text-2); margin: 0 0 12px; display: flex; flex-wrap: nowrap; gap: 6px 12px; align-items: flex-start; }
.ob-evid .ob-ic { margin-top: 2px; }
.ob-evid .ob-link { margin-left: 4px; white-space: nowrap; }
table.ob-legs { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ob-legs th { text-align: right; font-weight: 500; color: var(--ob-muted); padding: 5px 6px; border-bottom: 1px solid var(--ob-border); white-space: nowrap; }
table.ob-legs th:first-child, table.ob-legs td:first-child { text-align: left; padding-left: 0; }
table.ob-legs td { text-align: right; padding: 7px 6px; border-bottom: 1px solid var(--ob-border); white-space: nowrap; color: var(--ob-text); }
table.ob-legs tr.closed td { color: var(--ob-text-2); }
table.ob-legs .st { display: block; font-size: 11px; color: var(--ob-muted); }
table.ob-legs a { text-decoration: none; }
/* per-leg actions, directly under the leg they act on */
table.ob-legs tr.has-acts td { border-bottom: 0; }
table.ob-legs tr.ob-leg-acts td { text-align: left; padding: 0 0 9px; }
table.ob-legs tr.ob-leg-acts div { display: flex; flex-wrap: wrap; gap: 6px; }
table.ob-legs tr.ob-leg-acts .ob-btn-sm { height: 28px; font-size: 12px; padding: 0 10px; }
.ob-recon { margin-top: 12px; border: 1px solid var(--ob-border); border-radius: 12px; padding: 12px 14px; background: var(--ob-surface-2); }
.ob-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; }
.ob-eq .term { display: inline-flex; flex-direction: column; }
.ob-eq .term small { font-size: 11px; color: var(--ob-muted); }
.ob-eq .term b { font-size: 15px; font-weight: 600; }
.ob-eq .op { color: var(--ob-muted); font-size: 15px; }
.ob-eq .grp { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.ob-eq .term.res b { font-size: 16px; }
.ob-cash { margin-top: 8px; font-size: 12px; color: var(--ob-muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ob-cash b { color: var(--ob-text-2); font-weight: 500; }
/* timeline lane */
.ob-lane { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 2px 0 14px; padding: 0; list-style: none; }
.ob-step { position: relative; padding: 18px 8px 0 0; min-width: 0; }
.ob-step::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--ob-border-strong); }
.ob-step:last-child::before { right: 50%; }
.ob-step .dot { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ob-surface); border: 2px solid var(--ob-brand); }
.ob-step.now .dot { background: var(--ob-brand); box-shadow: 0 0 0 4px var(--ob-brand-wash); }
.ob-step.shares .dot { border-color: var(--ob-text-2); border-radius: 3px; }
.ob-step.review .dot { border-color: var(--ob-warn); }
.ob-step .k { font-size: 12px; font-weight: 600; }
.ob-step .s { font-size: 11.5px; color: var(--ob-muted); overflow-wrap: anywhere; }
.ob-step .v { font-size: 12px; margin-top: 2px; }
.ob-step .be { font-size: 11.5px; color: var(--ob-text-2); }
.ob-step a { text-decoration: none; }
/* a long story runs down the page: label, date and running net on the left, the step's cash on the right */
.ob-lane:focus { outline: 0; }
.ob-lane:focus-visible { box-shadow: var(--ob-focus); border-radius: 8px; }
.ob-lane.ob-lane-v { grid-auto-flow: row; grid-auto-columns: auto; }
.ob-lane-v .ob-step { padding: 0 0 12px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-content: start; }
.ob-lane-v .ob-step > :not(.dot) { grid-column: 1; }
.ob-lane-v .ob-step > .v { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; text-align: right; white-space: nowrap; }
.ob-lane-v .ob-step::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
.ob-lane-v .ob-step:last-child::before { bottom: 50%; right: auto; }
.ob-lane-more { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 6px 22px; cursor: pointer; color: var(--ob-brand-text); font-size: 12.5px; font-weight: 600; }
.ob-lane-more:hover { text-decoration: underline; }
.ob-lane-more:focus-visible { box-shadow: var(--ob-focus); border-radius: 6px; }
/* payoff */
.ob-payoff { background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: 12px; padding: 10px 10px 6px; }
.ob-payoff svg { width: 100%; height: auto; display: block; }
.ob-payoff svg:focus-visible { box-shadow: var(--ob-focus); border-radius: 8px; }
.ob-payoff .read { font-size: 12px; color: var(--ob-text-2); padding: 4px 4px 2px; min-height: 22px; }
.ob-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 12px; }
.ob-kv div { font-size: 12px; color: var(--ob-muted); min-width: 0; }
.ob-kv b { display: block; color: var(--ob-text); font-weight: 600; font-size: 14px; margin-top: 1px; }
.ob-kv b.unknown { font-weight: 500; font-size: 12.5px; color: var(--ob-text-2); }
.ob-kv small { display: block; font-size: 11.5px; }
.ob-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ob-border); }
.ob-raw { margin-top: 12px; font-size: 12.5px; }
.ob-raw summary { cursor: pointer; color: var(--ob-text-2); font-weight: 500; }
.ob-err { border: 1px solid color-mix(in srgb, var(--ob-neg) 40%, var(--ob-border)); background: var(--ob-neg-wash); color: var(--ob-text); border-radius: 12px; padding: 12px 14px; font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Decisions (pinned) ---------- */
.ob-decisions { margin-bottom: 14px; }
.ob-decisions .ob-bucket { color: var(--ob-warn-text); margin: 0 4px 5px; }
.ob-dec { background: var(--ob-surface); border: 1px solid color-mix(in srgb, var(--ob-warn) 50%, var(--ob-border)); border-radius: var(--ob-r); padding: 9px 12px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; animation: obRise var(--ob-med) var(--ob-ease) both; }
.ob-dec + .ob-dec, .ob-dec + .ob-dec-rest, .ob-dec-rest > .ob-dec + .ob-dec { margin-top: 8px; }
.ob-dec-more { margin-top: 6px; }
.ob-synced { font-size: 12.5px; color: var(--ob-text-2); margin: 14px 0 0; display: flex; gap: 6px; align-items: flex-start; }
.ob-synced .ob-ic { margin-top: 2px; flex: 0 0 auto; }
.ob-synced + .ob-acts { margin-top: 10px; }
.ob-dec.is-done { opacity: .5; transition: opacity var(--ob-med); }
.ob-dec-t { font-size: 13.5px; font-weight: 600; }
.ob-dec-d { font-size: 12px; line-height: 1.4; color: var(--ob-text-2); margin-top: 1px; max-width: 70ch; }
.ob-dec-pill { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--ob-warn-wash); color: var(--ob-warn-text); vertical-align: 1px; }
.ob-choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 176px); gap: 6px; }
.ob-choice { text-align: left; border: 1px solid var(--ob-border-strong); background: var(--ob-surface); border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--ob-text); font: inherit; transition: border-color var(--ob-fast), background var(--ob-fast); }
.ob-choice:hover { border-color: var(--ob-brand); background: var(--ob-brand-wash); }
.ob-choice b { display: block; font-size: 12.5px; font-weight: 600; }
.ob-choice span { display: block; font-size: 11px; color: var(--ob-text-2); margin-top: 1px; line-height: 1.35; }
.ob-choice.is-busy { cursor: progress; opacity: .7; }

/* ---------- Rail ---------- */
.ob-side { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); padding: 14px 16px; box-shadow: var(--ob-shadow-1); display: grid; gap: 6px; }
.ob-side .ob-h3 { margin-bottom: 4px; }
.ob-side .n { font-size: 11px; background: var(--ob-warn-wash); color: var(--ob-warn-text); border-radius: 10px; padding: 0 7px; line-height: 18px; font-weight: 600; }
.ob-need { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ob-border); font-size: 12.5px; color: var(--ob-text-2); }
.ob-need:first-of-type { border-top: 0; padding-top: 0; }
.ob-need .t { font-size: 13px; font-weight: 600; color: var(--ob-text); }
.ob-need .a { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; }
.ob-need .ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--ob-warn-wash); color: var(--ob-warn-text); }
.ob-need .ico.b { background: var(--ob-brand-wash); color: var(--ob-brand-text); }
.ob-quiet { font-size: 12.5px; color: var(--ob-muted); }
.ob-risk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--ob-border); font-size: 12.5px; }
.ob-risk-row:first-of-type { border-top: 0; }
.ob-risk-row b { font-weight: 600; color: var(--ob-text); white-space: nowrap; }
.ob-risk-row .m { color: var(--ob-text-2); }
.ob-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 4px; }
.ob-figs div { font-size: 12px; color: var(--ob-muted); }
.ob-figs b { display: block; font-size: 15px; font-weight: 600; color: var(--ob-text); white-space: nowrap; }
.ob-figs b.unknown { font-size: 12.5px; font-weight: 500; color: var(--ob-text-2); }
/* Risk now totals above the list: only where the rail sits below it (max-width 1180px) */
.ob-risknow, .ob-risknow[hidden] { display: none; }
.ob-link { all: unset; cursor: pointer; color: var(--ob-brand-text); font-size: 12.5px; font-weight: 500; }
.ob a.ob-link { color: var(--ob-brand-text); text-decoration: none; }
.ob-link:hover { text-decoration: underline; }

/* ---------- Pager ---------- */
.ob-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--ob-muted); flex-wrap: wrap; }

/* ---------- Banner / states ---------- */
.ob-banner { margin-top: 14px; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ob-banner h2 { font-size: 15px; margin: 0 0 3px; font-weight: 650; }
.ob-banner p { margin: 0; color: var(--ob-text-2); font-size: 13px; }
.ob-banner .ob-sp { min-width: 8px; }
.ob-empty { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.ob-empty h2 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.2; margin: 4px 0 10px; font-weight: 650; max-width: 22ch; }
.ob-preview .ob-l2, .ob-preview .ob-fig .c { white-space: normal; overflow: visible; text-overflow: clip; }
.ob-empty p.lead { color: var(--ob-text-2); font-size: 15px; margin: 0 0 18px; max-width: 52ch; }
.ob-paths { display: grid; gap: 10px; }
.ob .ob-path { display: grid; grid-template-columns: 40px 1fr 16px; gap: 14px; align-items: center; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--ob-text); transition: border-color var(--ob-fast), transform var(--ob-fast); }
.ob .ob-path:hover { border-color: var(--ob-brand); transform: translateY(-1px); }
.ob-path.first { border-color: var(--ob-brand); }
.ob-path .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ob-brand-wash); color: var(--ob-brand-text); display: grid; place-items: center; }
.ob-path b { font-size: 14.5px; font-weight: 600; display: block; }
.ob-path span { display: block; font-size: 13px; color: var(--ob-text-2); margin-top: 2px; }
.ob-preview-cap { font-size: 12px; color: var(--ob-muted); margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.ob-preview .ob-card { pointer-events: none; }
.ob-preview .ob-row { grid-template-columns: 34px minmax(0, 1fr) 60px 130px; cursor: default; }

/* ---------- Sections, History, Tools ---------- */
/* Jumps to a section (search closed trades, Review, Where the risk sits) land below the fixed navbar. */
.ob :is(.ob-section, .ob-legacy-host, .od-table-wrapper, .od-charts-card, .ob-listhead, .ob-decisions, .ob-card, .ob-side) { scroll-margin-top: 70px; }
.ob-section { margin-top: 22px; }
.ob-section:first-child { margin-top: 14px; }
.ob-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ob-sec-h-top { margin-top: 16px; }
.ob-panelbox { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); padding: 16px 18px; box-shadow: var(--ob-shadow-1); display: grid; gap: 8px; min-width: 0; }
.ob-answer { font-size: 15px; line-height: 1.5; margin: 0; max-width: 72ch; color: var(--ob-text); }
.ob-answer b { font-weight: 600; }
.ob-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 6px; }
.ob-stats div { font-size: 12px; color: var(--ob-muted); }
.ob-stats b { display: block; font-size: 16px; font-weight: 600; color: var(--ob-text); }
.ob-segctl { display: inline-flex; background: var(--ob-surface-2); border: 1px solid var(--ob-border); border-radius: 9px; padding: 2px; }
.ob-segctl button { border: 0; background: transparent; font: 12.5px var(--ob-font); padding: 4px 10px; border-radius: 7px; cursor: pointer; color: var(--ob-text-2); white-space: nowrap; }
.ob-segctl button[aria-pressed="true"] { background: var(--ob-surface); color: var(--ob-text); box-shadow: var(--ob-shadow-1); font-weight: 500; }
.ob-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ob-text-2); }
.ob-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ob-chart { position: relative; }
.ob-chart svg { width: auto; max-width: 100%; height: auto; display: block; overflow: visible; }
.ob-chart .bar { cursor: pointer; }
.ob-chart .bar:focus { outline: none; }
.ob-chart .bar:focus rect.hit, .ob-chart .bar:hover rect.hit { fill: var(--ob-brand-wash); }
.ob-chart .bar:focus-visible rect.hit { stroke: var(--ob-brand-text); stroke-width: 2; }
table.ob-out { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ob-out th { text-align: right; font-weight: 500; font-size: 12px; color: var(--ob-muted); padding: 6px 8px; border-bottom: 1px solid var(--ob-border); white-space: nowrap; }
table.ob-out th:first-child, table.ob-out td:first-child { text-align: left; padding-left: 0; }
table.ob-out td { text-align: right; padding: 8px 8px; border-bottom: 1px solid var(--ob-border); white-space: nowrap; color: var(--ob-text); }
table.ob-out tr.tot td { font-weight: 600; border-bottom: 0; }
/* reconciliation under the completed total: quieter rows, then the all-closed-legs line */
table.ob-out tr.rec td { color: var(--ob-text-2); font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
table.ob-out tr.rec.first td { border-top: 1px solid var(--ob-border); }
table.ob-out tr.rec-all td { border-top: 1px solid var(--ob-border-strong); }
table.ob-out button.ob-link { font-size: 13px; font-weight: 600; color: var(--ob-text); }
.ob-meter { display: inline-flex; align-items: center; gap: 8px; }
.ob-meter span.tr { width: 54px; height: 5px; border-radius: 3px; background: var(--ob-surface-3); overflow: hidden; display: inline-block; }
.ob-meter span.tr i { display: block; height: 100%; background: var(--ob-brand); border-radius: 3px; }
.ob-tools { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ob .ob-tool { display: block; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ob-text); transition: border-color var(--ob-fast), transform var(--ob-fast); }
.ob .ob-tool:hover { border-color: var(--ob-brand); transform: translateY(-1px); }
.ob-tool b { font-size: 13.5px; font-weight: 600; display: block; }
.ob-tool span { display: block; font-size: 12.5px; color: var(--ob-muted); margin-top: 4px; }
table.ob-expo { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 12.5px; }
table.ob-expo th { font-weight: 500; color: var(--ob-muted); text-align: left; padding: 4px 6px; white-space: nowrap; }
table.ob-expo td { background: var(--ob-surface-2); border-radius: 8px; padding: 7px 9px; vertical-align: top; min-width: 120px; }
table.ob-expo td.empty { background: transparent; }
table.ob-expo td div { white-space: nowrap; color: var(--ob-text-2); }
table.ob-expo td div b { color: var(--ob-text); font-weight: 600; white-space: nowrap; }
table.ob-expo th.u { display: flex; align-items: center; gap: 8px; color: var(--ob-text); font-weight: 600; }
.ob-scroll { overflow-x: auto; max-width: 100%; }
.ob-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--ob-border); font-size: 12px; color: var(--ob-muted); line-height: 1.6; max-width: 110ch; }
.ob-legacy-host { margin-top: 16px; min-width: 0; }
.ob-legacy-host:empty { display: none; }
.ob-sk-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ob-sk-chips .ob-sk { height: 92px; border-radius: 12px; }
.ob-sk-table { display: grid; gap: 18px; padding: 20px 24px; }
.ob-sk-table .ob-sk:not(:first-child) { height: 12px; width: 100%; }
.ob-legacy-host > [data-ob-home] { animation: obFade var(--ob-med) var(--ob-ease) both; }
.ob-legacy-host .od-table-wrapper, .ob-legacy-host .od-charts-card, .ob-legacy-host .od-strategies-section, .ob-legacy-host .od-ews-wrap { margin-top: 0; margin-bottom: 16px; }
/* One heading voice across new and legacy sections: same size and weight as .ob-h2, counts muted. */
.ob-legacy-host .od-table-header h3, .ob-legacy-host .od-charts-card h3, .ob-legacy-host .od-ews-head h3, .ob-legacy-host .od-strategies-section h3 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.ob-h-n { font-weight: 500; color: var(--ob-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }


/* ---------- Skeletons ---------- */
.ob-sk { display: block; height: 11px; border-radius: 6px; background: var(--ob-surface-3); animation: obPulse 1.2s ease-in-out infinite; }
.ob-sk-lg { height: 26px; margin: 6px 0; }
.ob-sk-md { height: 20px; margin: 5px 0; }
.ob-sk-in { display: inline-block; height: 10px; vertical-align: middle; }
.ob-kpi .ob-sk-in { margin-top: 3px; }
.ob-sk-logo { width: 34px; height: 34px; border-radius: 50%; }
.ob-sk-chart { height: 180px; border-radius: 10px; margin-top: 8px; }
.ob-sk-stack { display: grid; gap: 7px; min-width: 0; }
.ob-kpi .ob-sk + .ob-sk { margin-top: 6px; }

/* ---------- Dialog + toasts (house pattern) ---------- */
.ob-scrim { position: fixed; inset: 0; background: rgba(8, 14, 22, 0.5); z-index: 1060; display: grid; place-items: center; padding: 16px; animation: obFade var(--ob-fast) ease-out; }
.ob-dialog { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--ob-surface, #fff); color: var(--ob-text, #0f1b2a); border: 1px solid var(--ob-border-strong, #cfd7e1); border-radius: 16px; box-shadow: var(--ob-shadow-2); padding: 20px; font-family: var(--ob-font); animation: obPop var(--ob-med) var(--ob-ease); }
.ob-dialog h2 { font-size: 17px; font-weight: 650; margin: 0 0 6px; color: inherit; }
.ob-dialog p { font-size: 13.5px; color: var(--ob-text-2, #43546a); margin: 0 0 10px; }
.ob-dialog .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ob-field { margin-top: 12px; }
.ob-field label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; color: var(--ob-text); }
.ob-field input, .ob-field select { width: 100%; height: 36px; border: 1px solid var(--ob-border-strong); border-radius: 8px; background: var(--ob-surface); color: var(--ob-text); padding: 0 10px; font: 14px var(--ob-font); }
.ob-field input[aria-invalid="true"] { border-color: var(--ob-neg); }
.ob-field .hint { font-size: 12px; color: var(--ob-muted); margin-top: 4px; }
.ob-field .err { font-size: 12px; color: var(--ob-neg-text); margin-top: 4px; }
.ob-dialog.wide { width: min(560px, 100%); }
/* partial assignment / exercise: contract count on one row (option_contracts.js) */
.ob-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; font-family: var(--ob-font); }
.ob-count label { font-size: 13.5px; font-weight: 500; color: var(--ob-text); margin: 0; }
.ob-count-ctl { display: inline-flex; align-items: center; gap: 4px; }
.ob-count-b { width: 34px; height: 34px; padding: 0; border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-ctl); background: var(--ob-surface); color: var(--ob-text); font: 500 16px/1 var(--ob-font); cursor: pointer; }
.ob-count-b:hover:not(:disabled) { background: var(--ob-surface-2); }
.ob-count-b:disabled { color: var(--ob-muted); border-color: var(--ob-border); cursor: default; }
.ob-count input { width: 56px; height: 34px; padding: 0 4px; text-align: center; border: 1px solid var(--ob-border-strong); border-radius: var(--ob-r-ctl); background: var(--ob-surface); color: var(--ob-text); font: 500 14px var(--ob-font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.ob-count input::-webkit-outer-spin-button, .ob-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-count input:focus-visible { outline: none; box-shadow: var(--ob-focus); border-color: var(--ob-brand); }
.ob-count-of { font-size: 13.5px; color: var(--ob-muted); white-space: nowrap; margin-left: 2px; }
/* close a whole position: one block per leg */
.ob-cleg { border: 1px solid var(--ob-border); border-radius: 12px; padding: 8px 12px 10px; margin: 10px 0 0; min-width: 0; }
.ob-cleg.bad { border-color: color-mix(in srgb, var(--ob-neg) 55%, var(--ob-border)); }
.ob-cleg legend { float: left; width: 100%; font-size: 13px; font-weight: 600; margin: 0; padding: 0; color: var(--ob-text); }
.ob-cleg legend .mut { font-weight: 400; }
.ob-cleg-f { clear: both; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.ob-cleg .ob-field { margin-top: 6px; }
.ob-cleg .err, .ob-dialog > .err { font-size: 12px; color: var(--ob-neg-text); margin-top: 4px; }
.ob-dialog > .err:empty, .ob-cleg .err:empty { display: none; }
/* #ob-toasts carries .ob so toasts read the same tokens as the page */
.ob-toasts { position: fixed; top: 76px; right: 16px; z-index: 1080; display: grid; gap: 8px; pointer-events: none; font-family: var(--ob-font); }
.ob-toast { pointer-events: auto; display: flex; gap: 10px; align-items: center; min-width: 280px; max-width: 420px; background: var(--ob-surface); color: var(--ob-text); border: 1px solid var(--ob-border-strong); border-left: 4px solid var(--ob-pos); border-radius: 10px; padding: 11px 14px; box-shadow: var(--ob-shadow-2); font-size: 13px; animation: obToastIn var(--ob-med) var(--ob-ease); }
.ob-toast.error { border-left-color: var(--ob-neg); } .ob-toast.warning { border-left-color: var(--ob-warn); } .ob-toast.info { border-left-color: var(--ob-brand); }
.ob-toast .msg { flex: 1; }
.ob-toast button { border: 0; background: transparent; color: var(--ob-brand-text); font-weight: 600; cursor: pointer; font-size: 13px; }
.ob-toast.hide { opacity: 0; transform: translateX(16px); transition: opacity 160ms, transform 160ms; }

/* ---------- Motion ---------- */
@keyframes obRise { from { opacity: 0; transform: translateY(5px); } }
@keyframes obFade { from { opacity: 0; } }
@keyframes obFadeDown { from { opacity: 0; transform: translateY(-4px); } }
@keyframes obPop { from { opacity: 0; transform: scale(0.97); } }
@keyframes obGrow { from { transform: scaleX(0); } }
@keyframes obPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes obSpin { to { transform: rotate(360deg); } }
@keyframes obToastIn { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after, .ob-toast, .ob-dialog, .ob-scrim { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ---------- Compact rows (options_compact_mode) ---------- */
.ob.compact-mode .ob-row { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
.ob.compact-mode .ob-l2 { margin-top: 1px; }
.ob.compact-mode .ob-fig .p { font-size: 15px; }
.ob.compact-mode .ob-list { gap: 5px; }
.ob.compact-mode .ob-kpi { padding-top: 7px; padding-bottom: 6px; gap: 0; }
.ob.compact-mode .ob-kpis { min-height: 0; }
.ob.compact-mode .ob-kpi-v { font-size: 19px; }
.ob.compact-mode .ob-kpi:first-child .ob-kpi-v { font-size: 23px; }
.ob.compact-mode .ob-seg { min-height: 0; padding-top: 5px; padding-bottom: 5px; }
.ob.compact-mode .ob-strip { margin-top: 8px; }
.ob.compact-mode .ob-main { margin-top: 10px; }
.ob.compact-mode .ob-dec { padding-top: 7px; padding-bottom: 7px; }
.ob.compact-mode .ob-choice { padding: 4px 10px; }
.ob.compact-mode .ob-choice span { line-height: 1.25; }
.ob.compact-mode .ob-decisions { margin-bottom: 10px; }
.ob.compact-mode .ob-listhead { margin-bottom: 4px; min-height: 30px; }
.ob.compact-mode .ob-bucket { margin-top: 6px; }

/* ---------- Legacy sections restyled into the new surfaces ---------- */
.od-tip.ob-tip-fixed { z-index: 1070 !important; }
.od-tip.ob-tip-fixed::after { display: none; }
.ob .nw { white-space: nowrap; }

/* ---------- Responsive ---------- */
.ob-hide-lg { display: none; }
/* a sixth tile (the seller's market value) only where it fits untruncated; narrower screens keep the five */
@media (max-width: 1319px) {
  .ob-kpis.n6 { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .ob-kpis.n6 .ob-kpi:nth-child(6) { display: none; }
}
@media (max-width: 1180px) {
  .ob-dec { grid-template-columns: 28px minmax(0, 1fr); }
  .ob-choices { grid-column: 2; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
  .ob-main { grid-template-columns: minmax(0, 1fr); }
  .ob-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ob-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-hdr { flex-wrap: wrap; row-gap: 10px; }
  .ob-tabs { order: 3; }
  .ob-risknow:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 22px; margin-top: 10px; padding: 10px 16px; min-height: 62px; background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-1); }
  .ob-risknow .ob-h3 { margin: 0; white-space: nowrap; }
  .ob-rn-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; }
  .ob-rn-figs > div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1px; }
  .ob-rn-figs .l { font-size: 12px; line-height: 1.3; color: var(--ob-text-2); }
  .ob-rn-figs b { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ob-text); white-space: nowrap; }
  .ob-rn-figs b.unknown { font-size: 13px; font-weight: 500; line-height: 18.75px; color: var(--ob-text-2); }
  /* collateral before sections arrive: a value-sized pulse, so the strip keeps its loaded height */
  .ob-rn-figs b.ob-rn-pending { width: 90px; border-radius: 6px; background: var(--ob-surface-3); animation: obPulse 1.2s ease-in-out infinite; }
  #ob-risknow-go { white-space: nowrap; }
  .ob-risknow.is-reserve { visibility: hidden; }
}
/* Six tabs beside the title, portfolio picker and buttons would shrink the picker below 1440px (and in Spanish at any
   width), so there the tabs always take their own row under the header, the layout narrower screens already use. The
   ::after item forces the break, so a header that would fit on one row never moves the tabs past the buttons. */
@media (min-width: 1181px) and (max-width: 1439px) {
  .ob-hdr { flex-wrap: wrap; row-gap: 0; }
  .ob-hdr::after { content: ""; order: 2; flex-basis: 100%; }
  .ob-tabs { order: 3; margin-top: 10px; }
}
@media (min-width: 1440px) {
  .ob[data-lang="es"] .ob-hdr { flex-wrap: wrap; row-gap: 0; }
  .ob[data-lang="es"] .ob-hdr::after { content: ""; order: 2; flex-basis: 100%; }
  .ob[data-lang="es"] .ob-tabs { order: 3; margin-top: 10px; }
}
@media (max-width: 760px) {
  /* Two columns: the heading and View details share the first cell, the figures fill the other three. Two or three
     figures (always including beta-weighted delta) then give the same two rows, so the strip never changes height. */
  .ob-risknow:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px 14px; padding: 9px 14px 10px; min-height: 0; }
  .ob-risknow .ob-rn-figs { display: contents; }
  .ob-risknow .ob-h3 { grid-area: 1 / 1; align-self: start; line-height: 15.6px; }
  #ob-risknow-go { grid-area: 1 / 1; align-self: end; justify-self: start; font-size: 12.5px; line-height: 18.75px; }
}
@media (max-width: 900px) {
  .ob-row { grid-template-columns: 34px minmax(0, 1.5fr) 90px minmax(130px, 1fr) 24px; }
  .ob-row .ob-pay { display: none; }
  .ob-card-sk .ob-row { grid-template-columns: 34px minmax(0, 1.5fr) 90px minmax(130px, 1fr); }
  .ob-story-grid { grid-template-columns: minmax(0, 1fr); }
  .ob-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ob-kpi:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--ob-border); }
  .ob-kpi:nth-child(2) { border-left: 0; }
  .ob-kpi:nth-child(n+5) { display: none; }
}
@media (max-width: 760px) {
  /* body already has a 20px gutter on phones; a second one here cost 32px of every row */
  .ob.od-container { padding: 50px 0 48px; }
  body:has(#email-verification-banner) .ob.od-container { padding-top: 54px; }
  .ob-assets { display: none; }
  .ob-hide-sm { display: none !important; }
  .ob-hide-lg { display: block; }
  .ob-hdr { flex-wrap: wrap; gap: 8px; }
  .ob-title, .ob-title-btn { font-size: 20px; }
  .ob-hdr-r { gap: 6px; margin-left: 0; }
  .ob-hdr-r .ob-hide-xs { display: none; }
  .ob-hdr-r .ob-btn-primary, .ob-hdr-r .ob-btn-feedback { width: 34px; padding: 0; justify-content: center; }
  .ob-hdr-l { flex: 1 1 0; min-width: 0; }
  .ob-scope { flex: 1 1 auto; min-width: 104px; max-width: 100%; }
  .ob-tabs { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
  .ob-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .ob-tabs::-webkit-scrollbar { display: none; }
  .ob-tabs { gap: 0; }
  .ob-tabs a { flex: 1 1 auto; justify-content: center; padding: 7px 5px; font-size: 12.5px; letter-spacing: -0.005em; gap: 4px; }
  .ob-tabs .ob-cnt { padding: 0 5px; font-size: 10.5px; line-height: 16px; }
  .ob-kpis { grid-template-columns: 1fr 1fr !important; margin-top: 10px; }
  .ob-kpi { padding: 8px 14px 9px; border-left: 0; border-top: 1px solid var(--ob-border); gap: 2px; }
  .ob-kpi:nth-child(2) { border-right: 1px solid var(--ob-border); }
  .ob-kpi:first-child { grid-column: 1 / -1; border-top: 0; border-bottom: 0; }
  .ob-kpi:first-child .ob-kpi-v { font-size: 25px; }
  .ob-kpi .ob-kpi-v { font-size: 17px; }
  .ob-kpi:nth-child(n+4) { display: none; }
  .ob-kpi .ob-kpi-s, .ob-kpi .ob-kpi-l { white-space: normal; }
  .ob-strip { gap: 6px; margin-top: 8px; }
  .ob-seg { padding: 7px 9px; border-radius: 10px; min-height: 0; }
  /* a long short label ("Más adelante") wraps instead of running past its tile */
  .ob-seg-t .sm { white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
  .ob-seg-t { font-size: 12px; flex-direction: column; gap: 0; align-items: flex-start; }
  .ob-seg-t .lg { display: none; }
  .ob-seg-t .sm { display: inline; }
  .ob-seg-rng { display: none; }
  .ob-seg.today.has .ob-seg-t::before { display: none; }
  .ob-listhead { flex-wrap: wrap; }
  .ob-listhead .ob-sp { flex-basis: 100%; height: 0; }
  .ob-search { order: 5; flex: 1 1 0; min-width: 0; }
  .ob-search input { width: 100%; }
  /* Sort is an icon on phones: the full option names never clip; the select stays the control. */
  .ob-sort { order: 6; width: 36px; height: 32px; justify-content: center; border: 1px solid var(--ob-border); border-radius: 8px; background: var(--ob-surface); color: var(--ob-text-2); }
  .ob-sort-ic { display: block; }
  .ob-sort .ob-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .ob-sort:focus-within { box-shadow: var(--ob-focus); }
  .ob-listhead { margin-bottom: 6px; row-gap: 8px; }
  .ob-decisions { margin-bottom: 10px; }
  .ob-dec { padding: 8px 10px; gap: 6px; }
  .ob-dec-t { font-size: 13px; }
  .ob-choice { padding: 5px 9px; }
  .ob-row, .ob-card-sk .ob-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; }
  .ob-tk { width: 30px; height: 30px; font-size: 9.5px; }
  .ob-row .ob-when, .ob-row .ob-pay, .ob-row .ob-chev, .ob-row .ob-l2.legs, .ob-row .ob-fig .c, .ob-row .ob-bar { display: none; }
  .ob-row .ob-l2.phone { display: block; white-space: normal; }
  /* ticker and strategy in full on a phone; the proof note lives in the expansion */
  .ob-l1 { flex-wrap: wrap; overflow: visible; column-gap: 6px; }
  .ob-strat { white-space: normal; overflow: visible; }
  .ob-row .ob-tag.inf, .ob-when .ob-bar { display: none; }
  .ob-fig { text-align: right; }
  .ob-fig .p { font-size: 15px; }
  .ob-fig .p.none { white-space: normal; text-align: right; justify-content: flex-end; }
  .ob-story { padding: 12px; }
  .ob-lane { grid-auto-flow: row; grid-auto-columns: auto; }
  .ob-step { padding: 0 0 12px 22px; }
  .ob-step::before { top: 0; bottom: 0; left: 5px; right: auto; width: 2px; height: auto; }
  .ob-step:last-child::before { bottom: 50%; right: auto; }
  table.ob-legs th.x, table.ob-legs td.x { display: none; }
  table.ob-legs td { white-space: normal; }
  .ob-rail { grid-template-columns: minmax(0, 1fr); }
  .ob-empty { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ob-preview .ob-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .ob-preview .ob-when { display: none; }
  .ob-empty h2 { font-size: 22px; }
  .ob-tools { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ob-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1; }
  .ob-dec { grid-template-columns: minmax(0, 1fr); }
  .ob-dec > .ob-tk { display: none; }
  table.ob-out .x { display: none; }
  .ob-sec-h .ob-segctl { max-width: 100%; overflow-x: auto; }
  .ob-toasts { left: 16px; right: 16px; }
  .ob-toast { min-width: 0; }
  .ob-cleg-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* legacy tables stay inside their own scroller */
  .ob .table-responsive, .ob .dataTables_wrapper { max-width: 100%; overflow-x: auto; }
  .ob .od-table-wrapper, .ob .od-charts-card { padding-left: 10px !important; padding-right: 10px !important; }
}
.ob-l2.phone { display: none; }
/* Phones: the six tabs fit without scrolling in English. In Spanish the bar scrolls below about 480px: the five book
   tabs stay whole and Transacciones sits under the fade, one swipe away. */
@media (max-width: 440px) and (min-width: 381px) {
  .ob-tabs a { padding: 7px 3px; font-size: 12px; letter-spacing: -0.01em; }
}
@media (max-width: 380px) {
  .ob-hide-xs { display: none; }
  .ob-row .ob-tag { display: none; }
  .ob-tabs { gap: 0; padding: 2px; }
  .ob-tabs a { padding: 6px 2px; font-size: 11.5px; gap: 3px; letter-spacing: -0.01em; }
  .ob-tabs .ob-cnt { padding: 0 4px; font-size: 10px; line-height: 15px; }
  .ob-hdr { align-items: flex-start; }
  .ob-hdr-l { gap: 8px; flex-wrap: wrap; }
  .ob-scope { flex: 1 1 100%; max-width: none; }
  .ob-title-btn { font-size: 18px; height: 34px; }
  .ob-row, .ob-card-sk .ob-row { gap: 8px; padding: 10px; }
  .ob-row { grid-template-columns: 30px minmax(0, 1fr); row-gap: 2px; align-items: start; }
  .ob-row .ob-fig { grid-column: 2; text-align: left; }
  .ob-row .ob-fig .p.none { justify-content: flex-start; text-align: left; }
  .ob-fig .p { font-size: 14px; }
  .ob-tools { grid-template-columns: minmax(0, 1fr); }
  .ob-choices { grid-template-columns: minmax(0, 1fr); }
  .ob-cleg-f { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

#ob-panel-wheel { margin-top: 14px; }

/* Raw transactions use the same book shell and tokens, with the existing table. */
.ot-book .ob-tabs a[aria-current="page"] { background: var(--ob-surface); color: var(--ob-text); box-shadow: var(--ob-shadow-1); }
.ot-book-summary .ot-stats-grid { gap: 8px; margin: 12px 0 0; }
.ot-book .ot-stat-card { background: var(--ob-surface); border: 1px solid var(--ob-border); border-radius: 10px; box-shadow: var(--ob-shadow-1); padding: 11px 14px; min-height: 78px; }
.ot-book .ot-stat-card:hover { transform: none; box-shadow: var(--ob-shadow-1); }
.ot-book .ot-stat-icon { display: none; }
.ot-book .ot-stat-label { color: var(--ob-text-2); font: 500 12px/1.25 var(--ob-font); }
.ot-book .ot-stat-value { color: var(--ob-text); font: 650 21px/1.2 var(--ob-font); font-variant-numeric: tabular-nums; }
.ot-book .ot-stat-detail { color: var(--ob-muted); }
.ot-book .trades-container { margin: 14px 0 0 !important; padding: 12px; border: 1px solid var(--ob-border); border-radius: 12px; background: var(--ob-surface); }
.ot-book #stocksTable, .ot-book #stocksTable tbody td { color: var(--ob-text); }
.ot-book #stocksTable tbody tr { background: var(--ob-surface) !important; border-color: var(--ob-border) !important; }
.ot-book #stocksTable tbody tr:hover { background: var(--ob-surface-2) !important; }
.ot-book #stocksTable tbody td { background-color: var(--ob-surface) !important; }
.ot-book #stocksTable tbody tr:hover td { background-color: var(--ob-surface-2) !important; }
.ot-book .dataTables_scrollHead thead th { background-color: var(--ob-surface-2) !important; color: var(--ob-text-2) !important; }
.ot-book #stocksTable thead th { color: var(--ob-text-2) !important; border-bottom-color: var(--ob-border-strong) !important; }
.ot-book .dataTables_wrapper .dataTables_filter input,
.ot-book .dataTables_wrapper .dataTables_length select { background: var(--ob-surface); border-color: var(--ob-border-strong); color: var(--ob-text); }
.ot-book .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--ob-muted); }
.ot-book .dataTables_wrapper .dataTables_length label,
.ot-book .dataTables_wrapper .dataTables_filter label,
.ot-book .dataTables_wrapper .dataTables_info { color: var(--ob-text-2); }
.ot-book .dataTables_wrapper .dt-buttons .dt-button,
.ot-book .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--ob-surface-2) !important; border-color: var(--ob-border) !important; color: var(--ob-text-2) !important; }
.ot-book .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ob-brand) !important; border-color: var(--ob-brand) !important; color: #fff !important; }
.ot-book .ot-empty { background: var(--ob-surface); border-color: var(--ob-border); }
.ot-book .ot-empty-title { color: var(--ob-text); }
.ot-book .ot-empty-desc { color: var(--ob-text-2); }
html.dark body:has(.ot-book) .footer.main-footer { color: #a8b2bd; }
html.dark body:has(.ot-book) .footer.main-footer a { color: #6cb6e8; }
html.dark body:has(.ot-book) #portfolio_footer .text-dark,
html.dark body:has(.ot-book) #portfolio_footer .text-muted,
html.dark body:has(.ot-book) #portfolio_footer #footerText .webpage-name { color: #a8b2bd !important; }
@media (max-width: 760px) {
  .ot-book .ot-stat-card { padding: 9px 11px; min-height: 68px; }
  .ot-book .ot-stat-value { font-size: 18px; }
  .ot-book .trades-container { padding: 8px; }
  .ot-book .ob-tabs a { flex: 0 0 auto; padding: 7px 5px; }
}
@media (max-width: 440px) {
  .ot-book .ob-tabs a { padding: 7px 3px; }
  .ot-book .ob-tabs.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px); mask-image: linear-gradient(90deg, transparent, #000 12px); }
}