/* SPX Lab website: the platform preview's look (docs/reference/platform_preview_ui_v1.md; its layout.html plus
   home-polish.css of 2026-10-06), ported value for value. The light header of home-polish.css is merged into the base
   rules; the preview's unused 76 px site header, runtime tabs and builder iframe rules are left out. Additions for this
   site (sign-up, field errors, save states, the Tradier connect dialog) are marked "site:". */

/* ------------------------------------------------------------------ tokens and base */
:root {
  color-scheme: light;
  --ink: #243340;
  --muted: #5f6e7b;
  --line: #dfe4e9;
  --blue: #466884;
  --blue-dark: #334f68;
  --soft: #f1f4f7;
  --bg: #f5f6f8;
  --green: #167149;
  --red: #b33c49;
  --gold: #936215;
  --header-h: 66px;
  /* the area tints (owner 15 Oct 2026: "different mild color for sim and live also backtester"): the body carries
     venue-sim / venue-live / area-backtest; the tokens below are the neutral site */
  /* the mode tokens of the reference look (F:/SPX_Platform/Codex/SPX-Lab-UI-Refresh, owner 15 Oct 2026): SIM teal, Live blue,
     neutral surfaces; the earlier green / amber washes are gone */
  --mode-wash: #f1f4f7;
  --mode-border: #d6dfe7;
  --mode-ink: #334f68;
  /* sharp type: the system UI face first (Segoe UI on Windows renders hinted at these sizes), the real weights only
     (400 / 600 / 700, no synthesized ones), no negative tracking below 20 px */
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fafbfc; -webkit-font-smoothing: auto; text-rendering: auto; }
body.venue-sim { --blue: #376f6a; --blue-dark: #285a56; --soft: #f0f5f4; --mode-wash: #f0f5f4; --mode-border: #d0dfdc; --mode-ink: #285a56; }
body.venue-live { --blue: #46688d; --blue-dark: #344f70; --soft: #f0f3f7; --mode-wash: #f0f3f7; --mode-border: #d3dce7; --mode-ink: #344f70; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; }
button, a, input, select { outline-offset: 4px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #82b3cd; }
input:focus, select:focus { outline: 2px solid #82b3cd; outline-offset: 1px; }
svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: none; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; }
button, a { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.muted { color: var(--muted); }
.positive { color: var(--green); }
.negative { color: var(--red); }
.numeric { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--blue); }
.btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; min-height: 38px; padding: 8px 14px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #a9c6d6; background: #f4fafc; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.small { min-height: 31px; padding: 5px 10px; font-size: 11px; }
/* the action buttons by importance (owner 15 Oct 2026): Flatten solid red, Enter now solid green, Halt amber, Resume / Start blue */
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.btn.danger:hover { background: #9c4046; border-color: #9c4046; }
.btn.act { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn.act:hover { background: #1f6654; border-color: #1f6654; }
.btn.warn { background: #fff3dc; border-color: #e1c48a; color: #7a5410; font-weight: 700; }
.btn.warn:hover { background: #ffe9c2; border-color: #d4b06a; }
.btn.text { border-color: transparent; background: transparent; color: var(--blue); }
.icon-btn { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .3px; line-height: 1.3; padding: 5px 8px; border: 1px solid #d5e5ed; border-radius: 4px; color: var(--blue-dark); background: #f3fafc; white-space: nowrap; }
.pill.green { background: #edf7f2; color: var(--green); border-color: #d2e8de; }
.pill.amber { background: #fff9eb; color: var(--gold); border-color: #ede1bf; }
.pill svg { width: 11px; height: 11px; }
.dot { width: 5px; height: 5px; display: inline-block; background: currentColor; border-radius: 50%; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-symbol { height: 33px; width: 33px; display: grid; place-items: center; background: #244b62; color: #fff; border-radius: 6px; }
.brand-symbol svg { width: 22px; height: 22px; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: 1px; line-height: 1.1; }
.brand-name small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .6px; color: var(--muted); margin-top: 4px; }
.avatar { border: 1px solid #cadddf; background: #e8f3f6; color: var(--blue-dark); border-radius: 50%; height: 28px; width: 28px; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* site: the keyboard skip link */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 90; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--blue-dark); }
.skip-link:focus { top: 10px; }

/* ------------------------------------------------------------------ global platform header (light) */
.platform-header { height: var(--header-h); min-height: var(--header-h); padding: 0 28px; display: flex; align-items: center; gap: 30px; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); position: relative; z-index: 35; flex: none; }
.platform-header .brand { gap: 9px; margin-right: 3px; }
.platform-header .brand-symbol { background: #244b62; border: 1px solid #244b62; width: 31px; height: 31px; }
.platform-header .brand-name { font-size: 15px; letter-spacing: 1px; color: var(--ink); }
.platform-header .brand-name small { font-size: 8px; letter-spacing: .4px; color: var(--muted); }
.platform-nav { display: flex; align-self: stretch; align-items: stretch; gap: 2px; }
.platform-link { height: 100%; border: 0; border-bottom: 2px solid transparent; padding: 0 13px; font-size: 12px; color: var(--muted); background: transparent; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.platform-link:hover, .platform-link[aria-expanded=true] { background: #f4fafc; color: var(--blue-dark); }
.platform-link.active { color: var(--blue-dark); border-bottom-color: var(--blue); }
.platform-link:disabled { opacity: .4; }
.live-coming span { font-size: 7px; color: #7d93a0; letter-spacing: .7px; border: 1px solid #d7e5ed; border-radius: 3px; padding: 2px 4px; }
.menu-chevron { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.5; transition: transform .15s; }
.platform-link[aria-expanded=true] .menu-chevron, .profile-trigger[aria-expanded=true] .menu-chevron { transform: rotate(180deg); }
.nav-menu { position: relative; display: flex; align-items: stretch; }
.menu-panel { position: absolute; left: 0; top: 100%; width: 335px; background: #fff; color: var(--ink); border: 1px solid #d4e0e7; border-radius: 0 0 8px 8px; padding: 16px 10px 10px; z-index: 40; box-shadow: 0 12px 26px #19304016; }
.menu-kicker { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; color: #8498a5; margin: 0 10px 9px; }
.menu-choice { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 12px 10px; text-align: left; border-radius: 5px; color: #3b596c; }
.menu-choice:hover, .menu-choice[aria-current=page] { background: #eff6fa; }
.menu-choice > span:nth-child(2) { flex: 1; min-width: 0; }
.menu-choice > svg:last-child { margin-left: auto; width: 14px; height: 14px; color: #8da4b1; }
.menu-choice strong { font-size: 12px; font-weight: 600; display: block; color: #284b60; }
.menu-choice small { font-size: 11px; line-height: 1.5; color: #7a909e; display: block; margin-top: 4px; }
.menu-icon { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border: 1px solid #d9e8ef; border-radius: 5px; background: #f2f8fb; color: #58869e; }
.menu-icon svg { width: 16px; height: 16px; }
.platform-tools { display: flex; align-items: center; gap: 18px; margin-left: auto; align-self: stretch; }
.corner-brokers { border: 0; background: transparent; display: flex; align-items: center; gap: 7px; color: #5c7b8d; font-size: 11px; white-space: nowrap; padding: 0; }
.corner-brokers svg { width: 16px; height: 16px; }
.corner-brokers:hover, .corner-brokers.active { color: var(--blue-dark); }
.profile-menu { align-items: center; }
.profile-trigger { border: 1px solid #d3e3eb; border-radius: 25px; background: #f4fafc; display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; text-align: left; color: #5c7b8d; max-width: 240px; }
.profile-trigger > span:nth-child(2) { min-width: 0; }
.profile-trigger .avatar { height: 30px; width: 30px; background: #e0edf3; color: #375e72; border: 0; }
.profile-trigger strong { display: block; font-size: 11px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger small { display: block; font-size: 8px; color: var(--muted); line-height: 1.5; white-space: nowrap; }
.profile-trigger .menu-chevron { margin-left: 7px; }
.profile-menu .user-panel { left: auto; right: 0; width: 285px; top: calc(100% - 1px); }
.profile-details { display: flex; align-items: center; gap: 10px; padding: 9px 10px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.profile-details > div { min-width: 0; }
.profile-details strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.profile-details small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.profile-facts { margin: 12px 10px; font-size: 11px; }
.profile-facts > div { display: flex; justify-content: space-between; padding: 6px 0; gap: 15px; }
.profile-facts dt { color: #8196a4; }
.profile-facts dd { margin: 0; color: #416176; text-align: right; }
.user-panel > .menu-choice { font-size: 11px; }
.user-panel > .menu-choice > svg { margin: 0; width: 15px; }
.signout-choice { border-top: 1px solid var(--line); border-radius: 0; margin-top: 7px; padding-top: 14px; }
.header-signin { align-self: center; background: var(--blue); border: 1px solid var(--blue); color: #fff; border-radius: 5px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; font-size: 11px; }
.header-signin svg { width: 14px; height: 14px; }
.header-pending { align-self: center; width: 120px; height: 30px; border-radius: 15px; background: #f4fafc; border: 1px solid #e3eef3; }

/* ------------------------------------------------------------------ homepage */
.home { max-width: 1460px; margin: auto; padding: 0 5.5%; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8%; padding: 64px 0 53px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.5vw, 62px); letter-spacing: -1.4px; font-weight: 600; line-height: 1.08; margin: 19px 0 22px; }
.hero h1 span { color: var(--blue); }
.hero-description { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 470px; }
.hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 27px; }
.hero-cta .btn { min-height: 44px; padding: 11px 18px; }
.hero-note { font-size: 11px; color: var(--muted); margin-top: 16px; display: flex; gap: 7px; align-items: center; }
.hero-note svg { width: 14px; height: 14px; }
.journey { background: #fff; border: 1px solid var(--line); border-radius: 10px; position: relative; padding: 22px; }
.journey-label { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.journey-label strong { font-size: 11px; color: var(--ink); font-weight: 600; }
.mini-portfolio { padding: 21px 0 16px; display: flex; align-items: center; gap: 12px; }
.square { display: grid; place-items: center; flex: none; width: 39px; height: 39px; background: var(--soft); border: 1px solid #d8e7ee; color: var(--blue); border-radius: 7px; font-size: 12px; font-weight: 600; }
.mini-portfolio h3 { font-size: 16px; font-weight: 600; }
.mini-portfolio small { font-size: 11px; color: var(--muted); }
.mini-portfolio .pill { margin-left: auto; }
.mini-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf2f5; padding: 10px 0; font-size: 11px; gap: 10px; }
.mini-row .muted { font-size: 11px; }
.journey-transfer { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 13px 0; margin-top: 2px; }
.journey-transfer svg { width: 15px; color: var(--blue); }
.journey-transfer svg:last-child { margin-left: auto; }
.journey-sim { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; }
.journey-sim strong { display: block; font-size: 12px; font-weight: 600; }
.journey-sim small { font-size: 11px; color: var(--muted); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 19px; }
.section-head h2 { font-size: 23px; font-weight: 600; letter-spacing: -.3px; margin-top: 5px; }
.section-head > p { font-size: 11px; color: var(--muted); }
.workspaces { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.workspace-card { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 25px 27px; position: relative; overflow: hidden; }
.workspace-card.forward { background: #eef7fa; }
.workspace-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.workspace-icon { height: 35px; width: 35px; display: grid; place-items: center; border: 1px solid #d9e7ee; border-radius: 7px; background: #f5fafc; color: var(--blue); }
.workspace-card h3 { font-size: 23px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 9px; }
.workspace-card p { color: var(--muted); font-size: 12px; max-width: 360px; line-height: 1.7; }
.workspace-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; gap: 15px; }
.features { display: flex; gap: 15px; align-items: center; color: #6a8393; font-size: 11px; }
.features span { display: flex; align-items: center; gap: 4px; }
.features svg { width: 12px; height: 12px; }
.workspace-card-bottom .btn { font-size: 11px; }
.flow-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin: 35px 0 0; padding: 23px 0; gap: 40px; }
.flow-step { display: flex; align-items: flex-start; gap: 11px; }
.step-num { font-size: 11px; color: #8da5b1; line-height: 22px; letter-spacing: .7px; }
.flow-step strong { font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; }
.flow-step p { font-size: 11px; color: var(--muted); line-height: 1.6; }
.flow-step .btn.text { padding: 6px 0; }
.site-footer { border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); padding: 20px 0 25px; }
.nav-soon { font-size: 7px; letter-spacing: .8px; color: #90a3ad; margin-left: 3px; }
.broker-strip { display: flex; align-items: center; gap: 35px; padding: 20px 0 24px; border-top: 1px solid var(--line); color: #547285; }
.broker-strip > div { margin-right: auto; }
.broker-strip strong { font-size: 12px; font-weight: 600; display: block; }
.broker-strip > div small { font-size: 11px; color: var(--muted); }
.broker-strip > span { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.broker-strip > span small { display: block; font-size: 7px; font-weight: 500; letter-spacing: 1px; color: #8ea2af; margin-top: 3px; }
.broker-strip > span small.available { color: var(--green); }

/* ------------------------------------------------------------------ sign-in and sign-up */
.login-page { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; max-width: 1280px; margin: auto; padding: 70px 8%; gap: 14%; align-items: center; }
.login-copy h1 { font-size: 45px; font-weight: 600; letter-spacing: -.9px; margin: 20px 0; }
.login-copy p { font-size: 14px; color: var(--muted); line-height: 1.85; }
.login-copy .login-points { margin-top: 35px; border-top: 1px solid var(--line); }
.login-point { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 12px; display: flex; gap: 12px; align-items: center; }
.login-point svg { color: var(--blue); width: 17px; }
.login-form { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 32px; min-width: 0; }
.login-form h2 { font-size: 24px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 6px; }
.login-form > p { font-size: 12px; color: var(--muted); margin-bottom: 25px; }
.field { display: block; font-size: 11px; font-weight: 500; color: #526e80; margin-top: 16px; }
.field input, .field select { display: block; width: 100%; border: 1px solid #cfdee8; background: #fff; border-radius: 5px; padding: 10px 11px; font-size: 13px; color: var(--ink); margin-top: 6px; min-height: 40px; }
.field input[aria-invalid=true] { border-color: #d9a3a8; background: #fffafa; }
.password-field { position: relative; }
.password-field input { display: block; width: 100%; border: 1px solid #cfdee8; background: #fff; border-radius: 5px; padding: 10px 47px 10px 11px; font-size: 13px; color: var(--ink); margin-top: 6px; min-height: 41px; }
.password-field input[aria-invalid=true] { border-color: #d9a3a8; background: #fffafa; }
.password-field button { position: absolute; right: 7px; top: 10px; border: 0; background: transparent; width: 32px; height: 32px; color: var(--muted); display: grid; place-items: center; }
.password-field button[aria-pressed=true] { color: var(--blue-dark); }
.login-form .submit { width: 100%; margin-top: 24px; min-height: 42px; }
.login-fine { font-size: 11px !important; text-align: center; line-height: 1.7; margin: 17px 0 0 !important; color: var(--muted); }
.error { font-size: 11px; color: var(--red); padding-top: 12px; }
.back-link { border: 0; background: none; padding: 0; font-size: 11px; color: var(--blue); margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
.back-link svg { width: 14px; }
/* site: field hints and per-field errors, the session / sign-out notice, the busy submit, the sign-up switch */
.field-hint { display: block; font-size: 11px; font-weight: 400; color: #7d93a0; margin-top: 5px; line-height: 1.5; }
.field-error { display: block; font-size: 11px; font-weight: 500; color: var(--red); margin-top: 6px; }
.form-notice { font-size: 11px; line-height: 1.6; color: #5d7c8f; background: #f3f9fc; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; margin: -10px 0 18px; }
.form-notice.warning { color: #8d6b27; background: #fff7e8; border-color: #efe3c7; }
.auth-switch { font-size: 11px; color: var(--muted); text-align: center; margin-top: 16px; }
/* site: the form's own paragraphs keep their colours (the subtitle rule .login-form > p is more specific than .error) */
.login-form > p.error { font-size: 11px; color: var(--red); margin-bottom: 0; }
.login-form > p.form-notice { font-size: 11px; color: #5d7c8f; margin: -10px 0 18px; }
.login-form > p.form-notice.warning { color: #8d6b27; }
.login-form > p.auth-switch { font-size: 11px; margin: 16px 0 0; }
.auth-switch a { color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.spinner { width: 13px; height: 13px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ front workspace pages (hubs, docs, brokers, portfolios) */
.front-workspace { max-width: 1520px; margin: auto; padding: 27px 4.5% 50px; min-height: calc(100dvh - var(--header-h)); }
.front-breadcrumb { font-size: 11px; color: #8495a1; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.front-breadcrumb button { padding: 0; border: 0; background: none; color: #5f8296; font-size: 11px; }
.front-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 0 0 27px; }
.front-heading h1 { font-size: 30px; font-weight: 600; letter-spacing: -.3px; margin: 8px 0 9px; }
.front-heading p { font-size: 12px; color: var(--muted); max-width: 650px; line-height: 1.75; }
.front-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.destination-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.destination-card { padding: 28px; border: 1px solid var(--line); background: #fff; border-radius: 7px; }
.destination-number { font-size: 11px; letter-spacing: 1px; color: #8da5b2; display: block; margin-bottom: 26px; }
.destination-card h2 { font-size: 23px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 13px; }
.destination-card p { font-size: 12px; color: var(--muted); line-height: 1.8; min-height: 65px; }
.destination-card .btn { margin-top: 25px; }
.front-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8298a6; margin: 20px 0; }
.front-note svg { width: 14px; height: 14px; }
.runtime-launch { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: #edf6f9; border: 1px solid #d6e7ee; border-radius: 8px; padding: 29px 32px; margin-bottom: 22px; }
.runtime-launch h2 { font-size: 27px; font-weight: 600; letter-spacing: -.3px; margin: 11px 0; }
.runtime-launch p { font-size: 12px; color: var(--muted); max-width: 600px; line-height: 1.8; }
.runtime-launch small { display: block; font-size: 11px; color: #7d95a4; margin-top: 17px; }
.research-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 23px; align-items: start; }
.research-sidebar { background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.research-sidebar-title { padding: 17px 15px 12px; }
.research-sidebar-title strong { font-size: 12px; font-weight: 600; display: block; }
.research-sidebar-title > span { font-size: 11px; color: var(--muted); display: block; margin-top: 5px; }
.research-sidebar .search-box { margin-top: 0; }
.research-portfolio { border: 0; border-left: 3px solid transparent; border-bottom: 1px solid #edf3f6; background: #fff; display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 15px 12px; color: #5d7c90; }
.research-portfolio.selected { background: #edf6fa; border-left-color: var(--blue); }
.research-portfolio > span:last-child { min-width: 0; }
.research-initial { flex: none; width: 27px; height: 29px; border: 1px solid #d5e7ef; display: grid; place-items: center; border-radius: 5px; background: #f8fcfe; }
.research-initial svg { width: 14px; height: 14px; }
.research-portfolio strong { font-size: 12px; font-weight: 600; color: #355a70; display: block; overflow-wrap: anywhere; }
.research-portfolio small { display: block; color: #8199a8; font-size: 10px; margin-top: 4px; overflow-wrap: anywhere; }
.research-sidebar > .btn { font-size: 11px; justify-content: flex-start; margin: 13px 7px; white-space: normal; }
.research-main { min-width: 0; }
.research-summary { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 22px; display: flex; align-items: center; gap: 26px; margin-bottom: 17px; }
.research-summary > div:first-child { margin-right: auto; min-width: 0; }
.research-summary h2 { font-size: 25px; font-weight: 600; letter-spacing: -.3px; margin: 6px 0; overflow-wrap: anywhere; }
.research-summary p { font-size: 11px; color: var(--muted); }
.research-stat { border-left: 1px solid var(--line); padding-left: 19px; }
.research-stat span { font-size: 10px; color: var(--muted); display: block; white-space: nowrap; }
.research-stat strong { font-size: 22px; letter-spacing: -.3px; font-weight: 600; display: block; margin-top: 7px; }
.research-stat strong.status-label { font-size: 11px; letter-spacing: 0; color: #5d8093; white-space: nowrap; }
.research-table { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 18px 20px; }
.research-table .ledger td { padding: 15px 9px; }
.research-table .ledger .btn { font-size: 11px; }
.research-table .ledger .btn svg { width: 12px; height: 12px; }
.research-table-footer { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding-top: 20px; }
.research-table-footer p { font-size: 11px; color: var(--muted); max-width: 350px; line-height: 1.7; }
/* deleting from the Portfolios page (15 Oct 2026) */
.research-delete { color: var(--red); } .research-delete:hover { background: #fbe9e9; border-color: #efc9c9; color: #9c4046; }
.research-row-actions { white-space: nowrap; } .research-row-actions .btn + .btn { margin-left: 4px; }
.research-table-footer > div { display: flex; align-items: center; gap: 8px; flex: none; }
.research-table-footer .btn { font-size: 11px; }
.front-workspace .help-layout { min-height: 560px; }
/* site: a load or save problem of a server-backed page, never hidden and never replaced by seed data */
.error-banner { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #ebcfd2; background: #fff6f6; color: #8f3f46; border-radius: 7px; padding: 13px 15px; font-size: 12px; line-height: 1.6; margin-bottom: 17px; }
.error-banner svg { width: 16px; height: 16px; margin-top: 2px; }
.error-banner .btn { margin-left: auto; flex: none; }

/* ------------------------------------------------------------------ brokers */
.broker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.broker-card { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 25px; }
.broker-card.available { border-color: #c9e2d6; }
.broker-logo { width: 46px; height: 46px; display: grid; place-items: center; background: #edf5f8; color: var(--blue-dark); font-size: 18px; font-weight: 700; border-radius: 8px; margin-bottom: 25px; }
.broker-card h2 { font-size: 21px; font-weight: 600; letter-spacing: -.3px; margin: 12px 0; }
.broker-card p { font-size: 11px; color: var(--muted); line-height: 1.8; min-height: 62px; }
.broker-card .btn { width: 100%; margin-top: 25px; }
.broker-empty-note { border: 1px solid var(--line); padding: 20px; background: #f9fcfd; border-radius: 7px; margin-top: 20px; display: flex; align-items: flex-start; gap: 13px; color: var(--blue); }
.broker-empty-note strong { font-size: 12px; font-weight: 600; display: block; }
.broker-empty-note p { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.8; }

/* ------------------------------------------------------------------ documentation (Learn-style three columns) */
.docs-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr) 196px; gap: 0 28px; background: #fff; border: 1px solid var(--line); border-radius: 7px; min-height: 560px; }
.docs-toc { padding: 18px 12px 24px; border-right: 1px solid var(--line); background: #f8fbfd; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; }
.docs-filter { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 7px 9px; font: inherit; font-size: 11px; color: var(--ink); background: #fff; margin-bottom: 12px; }
.docs-filter:focus { outline: 2px solid #bcd6e3; outline-offset: 1px; }
.docs-group { margin-bottom: 14px; }
.docs-group-label { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #7f95a3; padding: 8px 10px 4px; }
.docs-toc button { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid transparent; background: transparent; border-radius: 0 5px 5px 0; color: #2b3f4e; font: inherit; font-size: 11.5px; line-height: 1.4; padding: 7px 10px; margin: 1px 0; cursor: pointer; }
.docs-toc button:hover { background: #eef5f9; color: var(--blue-dark); }
.docs-toc button.active { border-left-color: var(--blue); background: #e4eff5; color: var(--blue-dark); font-weight: 600; }
.docs-article { padding: 26px 8px 30px 0; min-width: 0; }
.docs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; color: #97aab5; margin-bottom: 14px; }
.docs-crumbs .link, .docs-next .link { border: 0; background: transparent; padding: 0; font: inherit; font-size: 11px; color: var(--blue); cursor: pointer; }
.docs-crumbs .link:hover, .docs-next .link:hover { text-decoration: underline; }
.docs-article h1 { font-size: 28px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; margin: 0 0 10px; color: var(--ink); }
.docs-lede { font-size: 14px; color: #34495b; line-height: 1.8; margin: 0 0 12px; }
.docs-meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: #6d8393; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.docs-body p, .help-article p { font-size: 13px; color: #2b3f4e; line-height: 1.85; margin: 12px 0; }
.docs-body h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 30px 0 8px; padding-top: 6px; scroll-margin-top: 16px; }
.docs-body ol, .docs-body ul { padding-left: 22px; color: #2b3f4e; font-size: 13px; line-height: 1.85; }
.docs-body li { margin: 7px 0; }
.docs-body strong { color: #192e3e; font-weight: 600; }
.docs-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #edf5f9; color: #3e6c83; border-radius: 3px; padding: 1px 5px; font-size: 11px; }
.help-callout { border: 1px solid #c9dbe5; border-left: 4px solid var(--blue); background: #eef5f9; padding: 12px 16px; border-radius: 4px; font-size: 12.5px; color: #2b3f4e; line-height: 1.8; margin: 18px 0; }
.help-callout.tip { border-left-color: var(--green); background: #f1f9f4; }
.help-callout.important { border-left-color: #7a5bd6; background: #f5f2fc; }
.help-callout.warning { border-left-color: var(--gold); background: #fff9eb; }
.help-callout .callout-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #3e657d; margin-bottom: 3px; }
.docs-next { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.docs-next h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.docs-next ul { list-style: none; padding: 0; margin: 0; }
.docs-next li { margin: 6px 0; font-size: 12px; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.docs-step { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 12px 14px; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.docs-step.next { text-align: right; align-items: flex-end; }
.docs-step:hover { border-color: #a9c6d6; background: #f4fafc; }
.docs-step-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: #97aab5; }
.docs-step-title { font-size: 12.5px; font-weight: 600; color: var(--blue-dark); }
.docs-feedback { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 12px; color: #4f6a7b; }
.docs-rail { padding: 26px 12px 20px 0; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; }
.docs-rail-title { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #7f95a3; margin-bottom: 8px; }
.docs-rail ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.docs-rail li { margin: 0; }
.docs-rail button { display: block; width: 100%; text-align: left; border: 0; border-left: 2px solid transparent; margin-left: -1px; background: transparent; font: inherit; font-size: 11.5px; line-height: 1.4; color: #34495b; padding: 5px 10px; cursor: pointer; }
.docs-rail button:hover { color: var(--blue-dark); }
.docs-rail button.active { border-left-color: var(--blue); color: var(--blue-dark); font-weight: 600; }
.help-meta { font-size: 10px; color: #97aab5; border-top: 1px solid var(--line); padding-top: 15px; margin-top: 25px; }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: 220px minmax(0, 1fr); } .docs-rail { display: none; } }
@media (max-width: 760px) { .docs-layout { grid-template-columns: 1fr; } .docs-toc { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); } .docs-article { padding: 20px 14px; } .docs-pager { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ hypothesis / ideas */
.ideas-page { max-width: 1400px; margin: auto; padding: 44px 5.5% 30px; }
.ideas-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 28px; }
.ideas-intro h1 { font-size: 42px; font-weight: 600; letter-spacing: -.8px; margin: 12px 0; }
.ideas-intro p { font-size: 13px; color: var(--muted); max-width: 560px; line-height: 1.8; }
.ideas-author { display: flex; align-items: center; gap: 10px; padding-bottom: 5px; flex: none; }
.ideas-author .avatar { width: 38px; height: 38px; }
.ideas-author strong { font-size: 12px; font-weight: 600; display: block; }
.ideas-author small { font-size: 11px; color: var(--muted); }
.ideas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 30px; }
.idea-feature { background: #eaf4f8; border: 1px solid #d5e5ed; border-radius: 8px; padding: 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 25px; align-items: center; }
.idea-feature h2 { font-size: 27px; font-weight: 600; letter-spacing: -.3px; margin: 15px 0 12px; line-height: 1.25; }
.idea-feature p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.idea-meta { font-size: 11px; color: #7b94a2; margin: 18px 0; }
.idea-feature .btn { font-size: 11px; }
.hypothesis-art { background: #f9fdff; border: 1px solid #d6e7ef; border-radius: 6px; padding: 17px; }
.hypothesis-art > span { font-size: 10px; color: #7291a3; letter-spacing: 1px; }
.hypothesis-art .axis { height: 135px; position: relative; margin: 15px 0 8px; border-bottom: 1px solid #ccdde7; border-left: 1px solid #ccdde7; }
.hypothesis-art svg { width: 100%; height: 100%; stroke-width: 2; }
.hypothesis-art .axis-label { display: flex; justify-content: space-between; font-size: 8px; color: #8da4b0; }
.ideas-filters { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 24px 0 0; overflow: auto; }
.ideas-filters button { border: 0; border-bottom: 2px solid transparent; background: none; white-space: nowrap; padding: 12px 0; font-size: 11px; color: var(--muted); }
.ideas-filters button.active { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.idea-card { display: flex; align-items: flex-start; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.idea-number { font-size: 11px; color: #99acb6; padding-top: 3px; }
.idea-card > div { flex: 1; min-width: 0; }
.idea-card h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; margin: 8px 0; }
.idea-card p { font-size: 12px; line-height: 1.7; color: var(--muted); max-width: 600px; }
.idea-card .idea-meta { margin: 10px 0 0; }
.idea-card > .btn { align-self: center; }
.idea-card .eyebrow { font-size: 8px; }
.research-note { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 21px; margin-bottom: 17px; }
.research-note.premium { background: #eef6f9; }
.research-note h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 9px 0 12px; }
.research-note p { font-size: 11px; line-height: 1.85; color: var(--muted); }
.research-note p.fine { font-size: 10px; margin-top: 10px; }
.research-note .btn { width: 100%; margin-top: 17px; }
.research-topics { padding: 18px 5px; }
.research-topics h3 { font-size: 11px; font-weight: 600; margin-bottom: 15px; }
.research-topics span { display: inline-block; font-size: 11px; color: #7190a2; padding: 4px 8px; border: 1px solid var(--line); margin: 0 4px 6px 0; border-radius: 4px; }
.article { max-width: 760px; margin: auto; padding: 22px 16px 40px; font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.article h1 { font-size: 38px; font-weight: 600; letter-spacing: -.5px; line-height: 1.18; margin: 18px 0 14px; color: var(--ink); }
.article .article-lead { font-size: 19px; color: #3f5565; line-height: 1.6; border-bottom: 1px solid var(--line); padding-bottom: 26px; margin-bottom: 30px; }
.article .ideas-author { margin: 0 0 24px; }
.article h2 { font-size: 24px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; margin: 36px 0 12px; color: var(--ink); }
.article p { font-size: 17px; color: #2e3f4c; line-height: 1.7; margin: 14px 0; }
.article-figure { margin: 22px 0 28px; }
.article-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.article-figure figcaption { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
.article-callout .btn { margin-right: 8px; margin-bottom: 6px; }
.article-callout { background: #edf7fa; border: 1px solid var(--line); padding: 20px; border-radius: 7px; margin: 25px 0; }
.article-callout h2 { margin-top: 12px; }
.article-callout p { margin: 7px 0 15px; font-size: 12px; }

/* ------------------------------------------------------------------ SIM runtime (forward testing) */
body.runtime-mode { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.runtime { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.runtime-preview { background: #f9fcfd; min-height: 29px; border-bottom: 1px solid var(--line); padding: 5px 22px; display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: #758b99; flex: none; }
.runtime-preview > span { display: flex; align-items: center; gap: 6px; }
.runtime-preview svg { width: 12px; height: 12px; }
.runtime-preview .storage { color: var(--green); }
.runtime-preview .storage.pending { color: #758b99; }
.runtime-preview .storage.failed { color: var(--red); }
#forward-workspace { display: flex; flex: 1; min-height: 0; background: var(--bg); font-variant-numeric: tabular-nums; }
.ops-sidebar { width: 202px; flex: none; background: #fff; border-right: 1px solid var(--line); padding: 20px 12px 14px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.side-label { font-size: 10px; letter-spacing: 1.2px; color: #8097a5; padding: 0 10px 8px; font-weight: 600; }
.side-nav { display: grid; gap: 3px; }
.side-nav button { border: 0; border-radius: 5px; background: transparent; padding: 10px; display: flex; align-items: center; gap: 10px; color: #607f91; font-size: 12px; text-align: left; }
.side-nav button svg { width: 17px; height: 17px; }
.side-nav button.active { background: #fff; color: var(--blue-dark); font-weight: 600; }
.side-nav button:hover { background: #f4fafc; }
.side-nav button[data-section=docs] > span { font-size: 11px; }
.side-count { margin-left: auto; font-size: 11px; color: #7693a2; }
.side-books { margin-top: 26px; }
.side-books .side-empty { font-size: 11px; color: var(--muted); padding: 3px 10px; }
.book-nav { display: flex; width: 100%; gap: 8px; align-items: center; background: transparent; border: 0; padding: 9px; border-radius: 5px; color: #5b7a8d; font-size: 11px; text-align: left; }
.book-nav.active { background: var(--mode-wash); color: var(--mode-ink); }
.book-nav .book-initial { display: grid; place-items: center; width: 25px; height: 25px; flex: none; border: 1px solid #c7dde7; background: #f7fcfd; border-radius: 5px; color: var(--blue); font-size: 10px; }
.book-nav span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-bottom { margin-top: auto; padding: 30px 6px 0; }
.account-tile { border-top: 1px solid #d0e3ec; padding: 14px 4px 0; }
.account-tile strong { display: block; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.account-tile p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.account-tile .pill { margin-top: 11px; }
.ops-main { flex: 1; min-width: 0; overflow: auto; }
.market-strip { height: 42px; display: flex; align-items: center; gap: 26px; border-bottom: 1px solid #e6ebef; padding: 0 23px; background: #fbfcfd; font-size: 13px; color: #6f8a99; }  /* owner 15 Oct 2026: the SPX / session row a size up */
.market-strip strong { color: #3d6275; font-size: 15px; font-weight: 600; margin-left: 6px; }
.market-strip .market-note { margin-left: auto; font-size: 11px; }
.market-strip .pill { font-size: 12px; padding: 4px 9px; }
.ops-content { padding: 23px; max-width: 1750px; margin: auto; }
.ops-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.ops-heading h1 { font-size: 25px; font-weight: 600; letter-spacing: -.3px; margin: 3px 0 6px; }
.ops-heading p { font-size: 11px; color: var(--muted); }
.ops-actions { display: flex; align-items: center; gap: 8px; }
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 7px; margin-bottom: 20px; padding: 17px 0; }
.summary-item { padding: 0 21px; border-right: 1px solid var(--line); }
.summary-item:last-child { border: 0; }
.summary-item > span { display: block; font-size: 11px; color: var(--muted); }
.summary-item strong { font-size: 23px; font-weight: 600; letter-spacing: -.3px; display: block; margin: 4px 0; }
.summary-item strong.mode { color: var(--blue); }
.summary-item small { display: block; font-size: 11px; color: #8ba0ad; }
.desk-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.portfolio-browser { background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.browser-heading { padding: 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.browser-heading span { font-size: 11px; color: var(--muted); font-weight: 400; }
.search-box { display: flex; align-items: center; border: 1px solid #d6e4eb; border-radius: 5px; margin: 12px; padding: 6px 8px; color: #8aa0ad; }
.search-box svg { width: 14px; height: 14px; }
.search-box input { border: 0; outline: none; min-width: 0; width: 100%; font-size: 11px; padding: 3px 6px; color: var(--ink); background: transparent; }
.search-box:focus-within { outline: 2px solid #82b3cd; outline-offset: 1px; }
.filter-tabs { display: flex; gap: 5px; padding: 0 12px 12px; }
.filter-tabs button { border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 11px; padding: 4px 8px; }
.filter-tabs button.active { background: var(--soft); color: var(--blue); }
.portfolio-list { border-top: 1px solid #edf3f6; }
.portfolio-item { display: block; position: relative; width: 100%; border: 0; border-bottom: 1px solid #edf2f5; border-left: 3px solid transparent; padding: 14px 12px; background: #fff; text-align: left; }
.portfolio-item.selected { background: #edf6fa; border-left-color: var(--blue); }
.portfolio-item:hover { background: #f6fafc; }
.portfolio-item strong { font-size: 12px; font-weight: 600; display: block; overflow-wrap: anywhere; }
.portfolio-item small { font-size: 11px; color: var(--muted); display: block; margin: 4px 0 10px; overflow-wrap: anywhere; }
.portfolio-item-footer { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }
.portfolio-item .pill { font-size: 10px; padding: 3px 5px; }
.portfolio-browser footer { padding: 12px; font-size: 11px; color: var(--muted); line-height: 1.6; }
.portfolio-browser footer svg { width: 12px; height: 12px; }
.detail-panel { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 0; overflow: hidden; }
.detail-header { padding: 19px 20px 17px; display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.detail-header > div:first-child { min-width: 0; }
.detail-header h2 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; margin: 5px 0 6px; overflow-wrap: anywhere; }
.detail-header p { font-size: 11px; color: var(--muted); line-height: 1.65; }
.detail-header .detail-top-actions { display: flex; align-items: center; gap: 7px; }
.detail-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; border-top: 1px solid #eef3f6; padding: 11px 20px; background: #fbfdfe; }
.source-link { font-size: 11px; display: flex; align-items: center; gap: 6px; color: var(--muted); min-width: 0; }
.source-link svg { width: 13px; height: 13px; }
.source-link button { border: 0; background: none; font-size: 11px; color: var(--blue); padding: 0; text-align: left; overflow-wrap: anywhere; }
.detail-tools .pill { font-size: 10px; padding: 3px 6px; }
.detail-tabs { display: flex; gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 20px; overflow: auto; }
.detail-tabs button { white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 12px 0; font-size: 11px; color: var(--muted); }
.detail-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.detail-tabs.flush { padding: 0; margin-bottom: 18px; }
.detail-body { padding: 19px 20px 20px; }
.section-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); margin-bottom: 13px; }
.section-caption strong { font-size: 12px; font-weight: 600; color: var(--ink); }
.ledger-wrap { overflow: auto; }
.ledger { border-collapse: collapse; width: 100%; text-align: left; white-space: nowrap; font-size: 11px; }
.ledger th { font-size: 10px; font-weight: 500; background: #f3f9fc; color: #7c94a2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 10px 9px; }
.ledger td { padding: 13px 9px; border-bottom: 1px solid #eaf1f5; color: #476575; }
.ledger td strong { font-weight: 600; color: var(--ink); font-size: 11px; display: block; }
.ledger td small { display: block; font-size: 10px; color: #8aa0ad; margin-top: 3px; }
.ledger td .pill { font-size: 10px; padding: 3px 6px; }
.ledger td.positive { color: var(--green); }
.ledger td.negative { color: var(--red); }
.ledger .right { text-align: right; }
.detail-footnote { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: #7b92a0; line-height: 1.7; margin-top: 16px; }
.detail-footnote svg { width: 13px; height: 13px; margin-top: 2px; }
.runtime-sample-note { border: 1px solid #dfebdf; background: #f5faf6; border-radius: 5px; padding: 9px 11px; font-size: 11px; color: #5e816b; margin-bottom: 15px; }
.rules-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rule-mini { border: 1px solid var(--line); padding: 13px; border-radius: 5px; min-width: 0; }
.rule-mini strong { display: block; font-size: 11px; font-weight: 600; margin-bottom: 7px; overflow-wrap: anywhere; }
.rule-mini p { font-size: 11px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere; }
.activity-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf2f5; font-size: 11px; }
.activity-row .event-dot { height: 7px; width: 7px; flex: none; border: 1px solid #79a4b8; background: #eaf5f9; border-radius: 50%; margin-top: 5px; }
.activity-row > div { min-width: 0; }
.activity-row strong { font-size: 11px; font-weight: 500; display: block; overflow-wrap: anywhere; }
.activity-row p { font-size: 11px; color: var(--muted); margin-top: 3px; }
.activity-row time { font-size: 10px; color: #8ba0ad; margin-left: auto; white-space: nowrap; }
.empty-desk { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 45px; }
.empty-desk h2 { font-size: 25px; font-weight: 600; letter-spacing: -.3px; max-width: 370px; margin: 14px 0; }
.empty-desk p { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 350px; }
.empty-desk .btn { margin-top: 24px; }
.empty-explainer { border-left: 1px solid var(--line); padding-left: 32px; }
.empty-explainer .flow-step { margin: 19px 0; }
.panel-empty { padding: 33px 15px; text-align: center; color: var(--muted); font-size: 12px; }
.panel-empty p { font-size: 11px; margin: 8px 0 16px; }
.ops-footer { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #8ca1ad; margin-top: 24px; padding: 13px 0; border-top: 1px solid #dbe8ef; }
.audit-page { background: #fff; border: 1px solid var(--line); padding: 20px; border-radius: 7px; }
.audit-page h2 { font-size: 15px; font-weight: 600; margin-bottom: 15px; }
.busy { padding: 40px; text-align: center; color: var(--muted); font-size: 12px; }
.overview-book { border-bottom: 1px solid #ecf2f5; padding: 13px 0; display: flex; align-items: center; gap: 12px; }
.overview-book > div { flex: 1; min-width: 0; }
.overview-book strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.overview-book p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.overview-book .btn { flex: none; }
.source-change { padding: 11px 20px; background: #fff9ed; border-top: 1px solid #efe3c7; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #8f773b; }
.local-note { font-size: 11px; line-height: 1.7; color: var(--muted); }

/* ------------------------------------------------------------------ dialogs and toast */
dialog { border: 1px solid #cfdee7; border-radius: 10px; width: min(660px, calc(100vw - 30px)); padding: 0; max-height: calc(100dvh - 45px); color: var(--ink); background: #fff; }
dialog::backdrop { background: #142e4359; backdrop-filter: blur(2px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 24px 25px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 23px; font-weight: 600; letter-spacing: -.3px; margin: 5px 0 8px; }
.modal-head p { font-size: 11px; color: var(--muted); line-height: 1.65; max-width: 490px; }
.modal-body { padding: 19px 25px; max-height: 58dvh; overflow: auto; }
.modal-body .search-box { margin: 0 0 14px; padding: 9px; }
.portfolio-option { display: block; border: 1px solid #d7e5ed; border-radius: 7px; margin-bottom: 9px; padding: 14px; cursor: pointer; }
.portfolio-option:has(input:checked) { border-color: var(--blue); background: #f0f8fb; }
.portfolio-option:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.option-top { display: flex; gap: 11px; align-items: center; }
.option-top input { accent-color: var(--blue); margin: 0; width: 15px; height: 15px; flex: none; }
.option-top strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.option-top .pill { margin-left: auto; font-size: 10px; }
.option-desc { font-size: 11px; color: var(--muted); margin: 5px 0 0 26px; }
.option-strategies { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0 0 26px; }
.option-strategies span { background: #f5f9fb; border: 1px solid #e2ebef; border-radius: 3px; padding: 3px 6px; font-size: 10px; color: #668293; }
.modal-note { background: #f3f9fc; border: 1px solid #dce9ef; border-radius: 5px; font-size: 11px; color: #6a8798; line-height: 1.7; padding: 11px 12px; margin-top: 17px; }
.modal-foot { border-top: 1px solid var(--line); padding: 16px 25px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.modal-foot small { font-size: 11px; color: var(--muted); }
.modal-foot > div { display: flex; gap: 8px; }
.confirm-dialog { width: min(470px, calc(100vw - 30px)); }
.confirm-dialog .modal-body p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.confirm-dialog .modal-foot { justify-content: flex-end; }
.toast { position: fixed; bottom: 23px; left: 50%; transform: translateX(-50%); background: #23475d; color: #fff; font-size: 12px; border: 1px solid #3b6075; border-radius: 7px; max-width: calc(100vw - 30px); padding: 12px 20px; z-index: 50; }

/* ------------------------------------------------------------------ responsive (the preview's breakpoints) */
@media (min-width: 1800px) {
  .desk-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .ops-content { padding: 30px; }
  .ledger { font-size: 12px; }
  .ledger td { padding: 16px 12px; }
}
@media (max-width: 1200px) {
  .platform-header { gap: 17px; padding: 0 22px; }
  .platform-link { padding: 0 10px; font-size: 11px; }
  .platform-tools { gap: 14px; }
  .corner-brokers { font-size: 11px; }
  .research-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 17px; }
  .research-summary { gap: 17px; padding: 18px; }
  .research-stat { padding-left: 13px; }
  .research-summary h2 { font-size: 22px; }
  .research-table-footer { align-items: flex-start; flex-direction: column; }
  .research-table-footer > div { align-self: flex-end; }
}
@media (max-width: 1180px) {
  .hero { gap: 5%; padding-top: 45px; }
  .hero h1 { font-size: 45px; }
  .features { gap: 8px; }
  .features span:last-child { display: none; }
  .ops-sidebar { width: 176px; }
  .desk-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
  .ops-content { padding: 18px; }
  .detail-header { flex-direction: column; }
  .detail-top-actions { align-self: stretch; justify-content: flex-end; }
  .ledger td { padding: 12px 7px; }
  .runtime-preview .storage { max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .detail-tabs { gap: 16px; }
  .summary-item { padding: 0 15px; }
  .ideas-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 20px; }
  .idea-feature { grid-template-columns: 1fr; }
  .hypothesis-art { display: none; }
}
@media (max-width: 1050px) {
  .platform-header { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding: 11px 23px 0; gap: 9px; }
  .platform-nav { order: 3; width: 100%; height: 44px; justify-content: center; }
  .platform-tools { height: 39px; margin-left: auto; }
  .platform-link { padding: 0 16px; font-size: 12px; }
  .profile-menu .user-panel { top: calc(100% + 10px); }
  .destination-grid { gap: 14px; }
  .destination-card { padding: 24px; }
  .destination-card h2 { font-size: 21px; }
  .research-summary { flex-wrap: wrap; }
  .research-summary > div:first-child { flex-basis: 100%; }
  .research-stat { border-left: 0; padding-left: 0; margin-right: 15px; }
  .research-layout { grid-template-columns: 195px minmax(0, 1fr); }
  .research-table { padding: 17px 13px; }
  .front-workspace { padding: 24px 3.5% 40px; }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero h1 { font-size: 39px; letter-spacing: -.9px; }
  .hero-description { font-size: 13px; }
  .hero-cta { flex-wrap: wrap; }
  .workspace-card { padding: 22px; }
  .workspace-card-bottom { align-items: flex-start; flex-direction: column; }
  .ops-sidebar { width: 62px; padding: 18px 7px; }
  .side-label, .side-nav button > span, .side-books, .side-bottom { display: none; }
  .side-nav button { justify-content: center; padding: 12px 8px; }
  .ops-heading { align-items: flex-start; }
  .ops-actions { flex-wrap: wrap; justify-content: flex-end; }
  .market-strip { gap: 12px; padding: 0 18px; }
  .desk-grid { grid-template-columns: 1fr; }
  .portfolio-list { display: flex; overflow: auto; }
  .portfolio-item { min-width: 220px; flex: 1; border-bottom: 0; border-right: 1px solid var(--line); }
  .portfolio-browser footer { display: none; }
  .portfolio-browser .search-box { max-width: 340px; }
  .filter-tabs { display: none; }
  .browser-heading { padding: 12px; }
  .runtime-preview .storage { max-width: 230px; }
  .login-page { gap: 9%; padding: 50px 6%; }
  .login-copy h1 { font-size: 36px; }
  .ideas-layout { grid-template-columns: 1fr; }
  .knowledge-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .research-topics { display: none; }
  .broker-grid { grid-template-columns: 1fr; }
  .broker-card p { min-height: 0; }
  .broker-logo { float: right; margin-bottom: 0; }
  .broker-card .btn { width: auto; }
  .broker-strip { gap: 20px; }
  .broker-strip > span { font-size: 13px; }
}
@media (max-width: 700px) {
  .platform-header { padding: 10px 15px 0; gap: 7px; }
  .platform-header .brand-name { font-size: 13px; }
  .platform-header .brand-symbol { width: 26px; height: 26px; }
  .platform-header .brand-name small { font-size: 7px; }
  .platform-tools { gap: 12px; }
  .corner-brokers > span { display: none; }
  .corner-brokers { height: 32px; width: 29px; justify-content: center; border: 1px solid #d3e3eb; border-radius: 5px; }
  .profile-trigger { padding: 3px 8px 3px 3px; gap: 6px; max-width: 170px; }
  .profile-trigger .avatar { width: 25px; height: 25px; font-size: 11px; }
  .profile-trigger strong { font-size: 11px; }
  .profile-trigger small { font-size: 7px; }
  .profile-trigger .menu-chevron { margin-left: 3px; }
  .platform-nav { position: relative; gap: 0; justify-content: space-between; height: 43px; }
  .platform-nav .nav-menu { position: static; }
  .platform-link { font-size: 11px; padding: 0 7px; gap: 4px; }
  .platform-link.live-coming span { display: none; }
  .menu-panel { left: 0; right: 0; width: auto; max-height: 70dvh; overflow: auto; }
  .menu-choice { padding: 11px 10px; }
  .profile-menu .user-panel { width: min(285px, calc(100vw - 30px)); }
  .profile-menu .user-panel .menu-choice { padding: 12px; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-card { padding: 22px; }
  .destination-number { margin-bottom: 15px; }
  .destination-card p { min-height: 0; }
  .destination-card .btn { margin-top: 18px; }
  .front-workspace { padding: 21px 18px 35px; }
  .front-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .front-heading h1 { font-size: 27px; }
  .front-heading p { font-size: 11px; }
  .front-actions { justify-content: flex-start; }
  .front-actions .btn { font-size: 11px; }
  .runtime-launch { padding: 24px; align-items: flex-start; flex-direction: column; gap: 21px; }
  .runtime-launch h2 { font-size: 25px; }
  .research-layout { grid-template-columns: 1fr; }
  .research-sidebar > nav { display: flex; overflow: auto; }
  .research-portfolio { min-width: 185px; flex: 1; border-right: 1px solid var(--line); }
  .research-sidebar > .btn { display: none; }
  .research-sidebar-title { display: flex; justify-content: space-between; align-items: center; }
  .research-sidebar .search-box { margin: 0 13px 13px; }
  .research-summary { padding: 19px; gap: 18px; }
  .research-stat { margin-right: 5px; }
  .research-stat span { font-size: 8px; }
  .research-stat strong { font-size: 20px; }
  .research-table { padding: 16px 12px; }
  .research-table-footer { gap: 14px; }
  .research-table-footer > div { align-self: stretch; flex-wrap: wrap; }
  .research-table-footer .btn { font-size: 11px; }
  .front-note { font-size: 11px; align-items: flex-start; }
  .front-note svg { margin-top: 2px; }
}
@media (max-width: 640px) {
  .home { padding: 0 22px; }
  .hero { grid-template-columns: 1fr; padding: 36px 0; gap: 30px; }
  .hero h1 { font-size: 42px; margin: 15px 0 20px; }
  .hero-description { font-size: 13px; max-width: 100%; }
  .hero-note { font-size: 10px; }
  .journey { padding: 18px; }
  .workspaces { grid-template-columns: 1fr; gap: 12px; }
  .workspace-card-header { margin-bottom: 20px; }
  .workspace-card-bottom { flex-direction: row; align-items: center; }
  .features span:not(:first-child) { display: none; }
  .section-head > p { display: none; }
  .flow-strip { grid-template-columns: 1fr; gap: 19px; margin-top: 25px; }
  .site-footer { font-size: 10px; flex-direction: column; gap: 6px; }
  .login-page { grid-template-columns: 1fr; gap: 25px; padding: 28px 22px; }
  .login-copy { display: none; }
  .login-form { padding: 25px; }
  .runtime-preview { font-size: 10px; flex-wrap: wrap; padding: 5px 12px; gap: 3px; }
  .runtime-preview .storage { max-width: none; }
  .ops-sidebar { width: 48px; padding: 12px 3px; }
  .ops-content { padding: 14px 10px; }
  .market-strip { height: auto; min-height: 35px; padding: 7px 10px; gap: 7px; font-size: 10px; flex-wrap: wrap; }
  .market-strip .market-note { display: none; }
  .ops-heading { flex-direction: column; margin-bottom: 15px; }
  .ops-heading h1 { font-size: 23px; }
  .ops-actions { width: 100%; justify-content: flex-start; gap: 6px; }
  .ops-actions > .btn { padding: 7px 10px; font-size: 11px; }
  .summary-strip { grid-template-columns: 1fr 1fr; padding: 0; margin-bottom: 14px; }
  .summary-item { padding: 12px; border-bottom: 1px solid var(--line); }
  .summary-item:nth-child(2) { border-right: 0; }
  .summary-item:nth-child(n+3) { border-bottom: 0; }
  .summary-item strong { font-size: 20px; }
  .summary-item small { font-size: 10px; }
  .detail-header { padding: 15px 13px; gap: 12px; }
  .detail-header h2 { font-size: 18px; }
  .detail-header .detail-top-actions { flex-wrap: wrap; justify-content: flex-start; }
  .detail-tools { padding: 10px 13px; }
  .detail-tabs { padding: 0 13px; gap: 17px; }
  .detail-body { padding: 15px 12px; }
  .detail-tabs button { font-size: 11px; }
  .rules-list { grid-template-columns: 1fr; }
  .empty-desk { grid-template-columns: 1fr; padding: 25px; gap: 20px; }
  .empty-desk h2 { font-size: 22px; }
  .empty-explainer { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 12px; }
  .modal-head { padding: 20px; }
  .modal-head h2 { font-size: 21px; }
  .modal-body { padding: 17px 20px; }
  .modal-foot { padding: 15px 20px; align-items: flex-end; }
  .modal-foot small { max-width: 135px; font-size: 10px; }
  .option-top strong { font-size: 12px; }
  .option-top .pill { font-size: 8px; }
  .option-strategies { display: none; }
  .ops-footer { flex-direction: column; }
  .source-change { padding: 10px 12px; flex-wrap: wrap; }
  .broker-strip { flex-wrap: wrap; gap: 17px; justify-content: space-between; }
  .broker-strip > div { flex-basis: 100%; }
  .broker-strip > span { font-size: 13px; }
  .ideas-page { padding: 27px 21px; }
  .ideas-intro { display: block; }
  .ideas-intro h1 { font-size: 33px; }
  .ideas-author { margin-top: 20px; }
  .idea-feature { padding: 23px; }
  .idea-feature h2 { font-size: 24px; }
  .idea-card { gap: 12px; }
  .idea-card h3 { font-size: 16px; }
  .idea-card > .btn { width: 30px; height: 30px; padding: 4px; align-self: flex-start; margin-top: 8px; }
  .idea-card > .btn span { display: none; }
  .knowledge-side { grid-template-columns: 1fr; gap: 0; }
  .ideas-filters { gap: 16px; }
  .ideas-filters button { font-size: 11px; }
  .article h1 { font-size: 30px; }
  .article .article-lead { font-size: 17px; }
  .article p { font-size: 16px; }
  .article h2 { font-size: 21px; }
  .help-layout { grid-template-columns: 1fr; min-height: 0; }
  .help-toc { display: flex; gap: 4px; overflow: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
  .help-toc .side-label { display: none; }
  .help-toc button { width: auto; white-space: nowrap; font-size: 11px; padding: 7px 9px; }
  .help-article { padding: 20px; overflow: visible; }
  .help-article h2 { font-size: 22px; }
  .inline-help .help-layout { min-height: 0; }
  /* site: on a phone the sign-in and sign-up cards start under the header instead of the middle of a tall screen */
  .login-page { align-items: start; min-height: 0; }
}
/* site: the narrowest phones keep the four header entries on one row (Algo Live is disabled; it is left out) */
@media (max-width: 360px) {
  .platform-link { padding: 0 5px; }
  .platform-link.live-coming { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* documentation figures (inline SVG, help-exits.js) */
.help-figure { margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 10px 10px 6px; }
.help-figure { max-width: 780px; }
.help-figure svg, .figure-dialog-body svg { display: block; width: 100%; height: auto; font-family: inherit; stroke: none; fill: none; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; }
.help-figure svg text, .figure-dialog-body svg text { stroke: none; paint-order: normal; }
.help-figure figcaption { font-size: 12px; color: #34495b; line-height: 1.6; padding: 8px 4px 2px; }
.help-figure .fig-axis { stroke: #9fb4c0; stroke-width: 1.2; }
.help-figure .fig-axis-label, .help-figure .fig-tick { font-size: 10.5px; fill: #4f6a7b; }
.help-figure .fig-label { font-size: 11px; fill: #2b3f4e; }
.help-figure .fig-legend { font-size: 10.5px; fill: #2b3f4e; }
.help-figure .fig-label-strong { fill: #192e3e; font-weight: 700; }
.help-figure .fig-pnl { fill: none; stroke: #244b62; stroke-width: 2.6; stroke-linejoin: round; }
.help-figure .fig-pnl-dim { fill: none; stroke: #8fa9b8; stroke-width: 2; stroke-linejoin: round; }
.help-figure .fig-target { stroke: #2e8b57; stroke-width: 1.8; stroke-dasharray: 6 4; }
.help-figure .fig-stop { stroke: #c0392b; stroke-width: 1.8; stroke-dasharray: 6 4; }
.help-figure .fig-arm { stroke: #d9a300; stroke-width: 1.2; stroke-dasharray: 2 3; }
.help-figure .fig-trail { fill: none; stroke: #c0392b; stroke-width: 2.2; }
.help-figure .fig-exit { fill: #fff; stroke: #c0392b; stroke-width: 2.4; }
.help-figure .fig-print { fill: #244b62; }
.help-figure .fig-trigger { stroke: #d9a300; stroke-width: 1.5; stroke-dasharray: 4 3; }
.help-figure .fig-window { fill: #49819b; fill-opacity: .14; stroke: #6f98ae; stroke-width: 1; }
.help-figure .fig-bar { fill: #d9a300; fill-opacity: .12; stroke: #d9a300; stroke-dasharray: 3 3; }
/* selection, costs and report figures (help-selection.js, help-costs.js, help-reports.js) */
.help-figure .fig-count { fill: #49819b; fill-opacity: .45; }
.help-figure .fig-miss { fill: #fff; stroke: #8fa9b8; stroke-width: 1.6; }
.help-figure .fig-ref { stroke: #d9a300; stroke-width: 1.5; stroke-dasharray: 4 3; }
.help-figure .fig-span { stroke: #49819b; stroke-width: 2.4; }
.help-figure .fig-pick { fill: #244b62; stroke: #fff; stroke-width: 1.5; }
.help-figure .fig-gain { fill: #2e8b57; fill-opacity: .85; }
.help-figure .fig-loss { fill: #c0392b; fill-opacity: .85; }
.help-figure .fig-net { fill: #244b62; }
.help-figure .fig-dd { fill: #c0392b; fill-opacity: .16; stroke: none; }
.help-figure .fig-eq-on { fill: none; stroke: #244b62; stroke-width: 2.6; stroke-linejoin: round; }
.help-figure .fig-eq-off { fill: none; stroke: #8fa9b8; stroke-width: 2; stroke-linejoin: round; }
.help-figure .fig-gap { stroke: #c0392b; stroke-width: 1.8; stroke-dasharray: 4 3; }
.help-figure .fig-hwm { stroke: #d9a300; stroke-width: 1.5; stroke-dasharray: 5 3; }
.help-figure .fig-mark { fill: #244b62; stroke: #fff; stroke-width: 1.5; }
.help-figure .fig-drop { stroke: #c0392b; stroke-width: 1.8; stroke-dasharray: 4 3; }
.help-figure .fig-box { fill: #49819b; fill-opacity: .1; stroke: #6f98ae; stroke-width: 1.2; }
/* price action figures (help-price.js) */
.help-figure .fig-spx { fill: none; stroke: #244b62; stroke-width: 2.2; stroke-linejoin: round; }
.help-figure .fig-straddle { fill: none; stroke: #6b4c9a; stroke-width: 2.4; stroke-linejoin: round; }
.help-figure .fig-vwap { fill: none; stroke: #d9822b; stroke-width: 2; stroke-dasharray: 7 4; }
.help-figure .fig-band { fill: none; stroke: #6f98ae; stroke-width: 1.6; }
.help-figure .fig-mid { fill: none; stroke: #6f98ae; stroke-width: 1.4; stroke-dasharray: 5 4; }
.help-figure .fig-adx { fill: none; stroke: #6b4c9a; stroke-width: 2.4; stroke-linejoin: round; }
.help-figure .fig-level { stroke: #4f6a7b; stroke-width: 1.4; stroke-dasharray: 6 4; }
.help-figure .fig-enter { fill: #fff; stroke: #2e8b57; stroke-width: 2.4; }
.help-figure .fig-warm { fill: #9fb4c0; fill-opacity: .22; stroke: #9fb4c0; stroke-dasharray: 3 3; }
.help-figure .fig-defined { fill: #49819b; fill-opacity: .14; stroke: #6f98ae; stroke-width: 1; }
.help-figure .fig-edge { stroke: #7f95a3; stroke-width: 1.2; stroke-dasharray: 2 3; }

/* documentation: figure zoom, platform screenshots, sub-units in the topic tree */
.figure-zoom { display: block; width: 100%; border: 0; background: transparent; padding: 0; cursor: zoom-in; border-radius: 4px; }
.figure-zoom:focus-visible { outline: 2px solid #bcd6e3; }
.figure-dialog { width: min(1100px, calc(100vw - 30px)); }
.figure-dialog-body { padding: 18px 18px 6px; }
.figure-dialog-body svg { display: block; width: 100%; height: auto; }
.figure-dialog-body img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.figure-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 18px 16px; }
.figure-dialog-caption { font-size: 12px; color: #4f6a7b; line-height: 1.6; }
.help-shot { margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 8px 8px 6px; max-width: 680px; }
.help-shot.narrow { max-width: 380px; }
.help-shot img { display: block; width: 100%; height: auto; border-radius: 3px; }
.help-shot figcaption { font-size: 11px; color: #647f90; line-height: 1.6; padding: 8px 4px 2px; }
.docs-node-row { display: flex; align-items: stretch; }
.docs-node-row .docs-topic { flex: 1 1 auto; }
.docs-toggle { border: 0; background: transparent; color: #7f95a3; width: 22px; flex: 0 0 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.docs-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .15s; }
.docs-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.docs-subs { padding: 2px 0 6px 14px; }
.docs-toc .docs-sub { font-size: 11px; padding: 5px 10px; color: #4f6a7b; border-left-color: transparent; }
.docs-toc .docs-sub.active { background: transparent; color: var(--blue-dark); font-weight: 600; border-left-color: var(--blue); }
.docs-category { margin: 4px 0 10px; }
.docs-category-label { font-size: 11.5px; font-weight: 600; color: var(--ink); padding: 6px 10px 3px; }
.docs-category .docs-topic { padding-left: 14px; font-size: 11px; }
.docs-category .docs-subs { padding-left: 22px; }

/* documentation typography (Microsoft Learn-like: Segoe UI, 16 px body, large headings) */
.docs-layout, .docs-layout button, .docs-layout input { font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; }
.docs-layout { grid-template-columns: 280px minmax(0, 1fr) 220px; gap: 0 40px; }
.docs-article { padding: 34px 8px 40px 0; color: #171717; }
.docs-article h1 { font-size: 40px; font-weight: 600; letter-spacing: -.2px; line-height: 1.2; margin: 6px 0 18px; color: #171717; }
.docs-lede { font-size: 16px; color: #171717; line-height: 1.6; margin: 0 0 16px; }
.docs-meta-row { font-size: 14px; color: #505050; }
.docs-crumbs, .docs-crumbs .link { font-size: 14px; }
.docs-body p, .help-article p { font-size: 16px; color: #171717; line-height: 1.6; margin: 14px 0; }
.docs-body h3 { font-size: 28px; font-weight: 600; letter-spacing: -.2px; color: #171717; margin: 40px 0 12px; }
.docs-body ol, .docs-body ul { font-size: 16px; color: #171717; line-height: 1.6; padding-left: 26px; }
.docs-body li { margin: 8px 0; }
.docs-body strong { color: #171717; font-weight: 600; }
.docs-body code { font-size: 14px; padding: 2px 6px; }
.help-callout { font-size: 16px; color: #171717; line-height: 1.6; padding: 14px 18px; }
.help-callout .callout-label { font-size: 12px; }
.help-figure figcaption, .help-shot figcaption { font-size: 14px; color: #505050; line-height: 1.55; }
.help-figure { max-width: 820px; }
.help-shot { max-width: 760px; }
.help-shot.narrow { max-width: 420px; }
.docs-group-label, .docs-rail-title { font-size: 12px; color: #505050; }
.docs-category-label { font-size: 15px; font-weight: 600; color: #171717; padding: 10px 10px 4px; }
.docs-toc button { font-size: 14px; color: #171717; padding: 8px 10px; }
.docs-category .docs-topic { font-size: 14px; padding-left: 16px; }
.docs-toc .docs-sub { font-size: 13px; color: #3b3b3b; padding: 6px 10px; }
.docs-filter { font-size: 14px; padding: 9px 11px; }
.docs-rail button { font-size: 14px; color: #3b3b3b; padding: 6px 12px; }
.docs-next h3 { font-size: 20px; }
.docs-next li, .docs-step-title { font-size: 15px; }
.docs-feedback { font-size: 15px; }
.help-meta { font-size: 12px; }
@media (max-width: 1100px) { .docs-layout { grid-template-columns: 240px minmax(0, 1fr); } }

/* site: broker connection */
.broker-dialog { width: min(560px, calc(100vw - 30px)); }
.broker-form .field { margin-top: 14px; }
/* site: TradeStation set-up (UI only until its API integration): the disabled fields read as disabled */
.broker-form select:disabled, .broker-form input:disabled { background: #f3f7f9; color: #7d919f; border-color: #e1ebf0; cursor: not-allowed; }
.broker-status { font-size: 12px; color: #3e657d; background: #f3f9fc; border: 1px solid #d6e6ee; border-radius: 5px; padding: 9px 12px; margin: 0; }
.broker-foot { gap: 10px; }
.modal-foot-spacer { flex: 1 1 auto; }
.broker-account-status { font-size: 11px; color: #3e657d; margin: 8px 0 12px; }
.admin-tiles .broker-card p.broker-account-status { min-height: 0; margin: 6px 0 0; }
.admin-subtitle { font-size: 12px; font-weight: 600; letter-spacing: 0; margin: 20px 0 2px; }
.admin-feed-pins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.admin-pins-label { font-size: 11px; color: #8aa0ad; margin-right: 2px; }
.admin-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 11px; line-height: 1.5; margin: 6px 0 0; }
.admin-kv dt { color: #7d93a0; }
.admin-kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.nav-tag { font-size: 8px; letter-spacing: 1px; margin-left: 6px; padding: 2px 5px; border-radius: 3px; background: #edf7f2; color: var(--green); vertical-align: middle; }

/* ------------------------------------------------------------------ SIM / Live operations workspace
   The NF_SX_Live console's operations look (docs/specs/strategy_books_v1.md) in this site's tokens: the same pages for the
   SIM venue and for Live, a venue bar at the top, the Yes / No command bar, switches, state badges and margin bars.
   Classes are prefixed ws-; no inline style is used anywhere (bars and charts are SVG attributes). */
.ws-venue-bar { flex: none; background: #fff; border-bottom: 1px solid var(--mode-border); }
.ws-venue { display: flex; align-items: center; gap: 14px; padding: 10px 23px; }
.ws-venue-mark { display: grid; place-items: center; min-width: 46px; height: 28px; padding: 0 9px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; background: #e9f5ef; color: var(--green); border: 1px solid #cfe5da; }
.ws-venue.live .ws-venue-mark { background: #fff7e8; color: var(--gold); border-color: #ecdcb6; }
.ws-venue-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-size: 12px; }
.ws-venue-main strong { font-size: 13px; font-weight: 600; }
.ws-venue-main small { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.ws-venue-account { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.ws-venue-right { display: flex; gap: 8px; align-items: center; flex: none; }
.ws-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.ws-crumbs strong { color: var(--ink); font-weight: 600; }
.ws-link { border: 0; background: none; padding: 0; color: var(--blue); font-size: inherit; font-weight: 600; text-align: left; display: inline-flex; align-items: center; gap: 5px; }
.ws-link:hover { text-decoration: underline; }
.ws-link svg { width: 12px; height: 12px; }
.ws-muted-line { font-size: 11px; color: var(--muted); }
.ws-caption { font-size: 11px; color: var(--muted); line-height: 1.6; padding: 10px 14px; margin: 0; }
.ws-note-line { font-size: 11px; color: var(--muted); padding: 9px 14px; border-top: 1px solid var(--line); line-height: 1.6; }
.ws-pagebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.ws-section-title h2 { font-size: 14px; font-weight: 600; }
.ws-h3 { font-size: 12px; font-weight: 600; margin: 18px 0 8px; }
.ws-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.4; padding: 3px 7px; border-radius: 4px; font-weight: 600; background: #eef4f7; color: #6d8393; max-width: 100%; white-space: nowrap; }
.ws-badge.green { background: #e9f5ef; color: var(--green); }
.ws-badge.amber { background: #fff4de; color: var(--gold); }
.ws-badge.red { background: #fcebec; color: var(--red); }
.ws-badge.blue { background: #e8f0fa; color: #3d6d9a; }
.ws-sub { display: block; font-size: 11px; color: #8aa0ad; margin-top: 3px; line-height: 1.45; font-weight: 400; }
.ws-money { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ws-panel { background: #fff; border: 1px solid var(--line); border-radius: 6px; min-width: 0; margin-bottom: 14px; }
.ws-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ws-panel-head h2 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.ws-aside { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); }
.ws-panel-body { padding: 4px 14px 12px; min-width: 0; }
.ws-panel-body > .ws-table-wrap { border: 0; }
.ws-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ws-rail-head h2, .ws-rail-head h3 { font-size: 12px; font-weight: 600; }
.ws-count { font-size: 11px; color: var(--gold); background: #fff4de; padding: 1px 6px; border-radius: 3px; }
.ws-note { display: flex; align-items: flex-start; gap: 9px; background: #f3f9fc; color: #5a7a8c; border: 1px solid #dce9ef; border-radius: 5px; padding: 9px 12px; font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.ws-note.warning { background: #fff8ea; color: #8f6f25; border-color: #efe0b8; }
.ws-note svg { width: 14px; height: 14px; margin-top: 2px; }
.ws-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 12px; border: 1px dashed #cfe0e8; border-radius: 6px; background: #fbfdfe; }
.ws-empty strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 6px; }
.ws-empty p { margin: 0 auto; max-width: 520px; line-height: 1.7; }
.ws-stats { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 14px; overflow: hidden; }
.ws-stat { padding: 13px 17px; border-right: 1px solid var(--line); min-width: 0; }
.ws-stat:last-child { border-right: 0; }
.ws-stat.feat { background: #eef7f9; }
.ws-stat label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ws-stat strong { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.ws-stat small { display: block; font-size: 11px; color: #8ba0ad; margin-top: 4px; line-height: 1.4; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.ws-main { min-width: 0; }
.ws-rail { display: grid; gap: 14px; min-width: 0; align-content: start; }
.ws-rail .ws-panel { margin-bottom: 0; }
.ws-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 5px; min-width: 0; }
.ws-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
.ws-table th { font-size: 11px; font-weight: 600; color: #758b99; background: #f3f9fc; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ws-table td { padding: 11px 10px; border-bottom: 1px solid #eaf1f5; color: #3d5a6b; vertical-align: middle; }
.ws-table tbody tr:last-child td { border-bottom: 0; }
.ws-table tbody tr:hover { background: #f8fbfd; }
.ws-table tfoot td { background: #f8fbfd; border-top: 1px solid var(--line); }
.ws-table td strong, .ws-table td b { color: var(--ink); font-weight: 600; }
.ws-table td.right, .ws-table th.right { text-align: right; }
.ws-table td.positive { color: var(--green); }
.ws-table td.negative { color: var(--red); }
.ws-empty-row { text-align: center; color: var(--muted); padding: 26px 10px !important; }
.ws-strategies td { vertical-align: top; }
.ws-strategies td:last-child { min-width: 96px; }
.ws-leg { font-size: 11px; white-space: nowrap; margin-bottom: 2px; }
.ws-name { display: flex; align-items: center; gap: 9px; }
.ws-icon { display: grid; place-items: center; width: 28px; height: 26px; flex: none; border-radius: 4px; background: #e8f3f8; color: var(--blue); font-size: 10px; font-weight: 600; }
.ws-toggle { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.ws-switch { position: relative; width: 31px; height: 18px; flex: none; border: 0; border-radius: 10px; background: #bccbd3; padding: 0; }
.ws-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ws-switch[aria-checked=true] { background: #5f9b8c; }
.ws-switch[aria-checked=true]::after { transform: translateX(13px); }
.ws-switch:focus-visible { outline: 3px solid #82b3cd; }
/* the Yes / No bar sits in the middle of the window over a dimmed page, large and bold (owner, 13 Oct 2026) */
.ws-cmdbar { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60; background: #fff; border: 2px solid var(--blue); border-radius: 12px; padding: 18px 22px; box-shadow: 0 18px 48px #14304555, 0 0 0 100vmax #14304545; display: flex; gap: 14px; align-items: center; max-width: min(94vw, 900px); font-size: 15px; line-height: 1.5; font-weight: 600; color: #0b1f2e; }
.ws-cmdbar b { color: var(--blue-dark); margin-right: 6px; font-weight: 700; }
.ws-cmdbar i { color: var(--muted); font-style: normal; }
.ws-closed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; background: #fff8ea; border: 1px solid #efe0b8; border-radius: 6px; color: #7a6221; font-size: 12px; margin-bottom: 14px; line-height: 1.5; }
.ws-closed strong { color: var(--gold); }
.ws-sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; }
.ws-sizes-label { color: var(--muted); }
.ws-sizes-book { display: inline-flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); }
.ws-sizes-book small { color: var(--muted); font-size: 11px; }
.ws-upcoming { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 11px; }
.ws-upcoming:last-child { border-bottom: 0; }
.ws-upcoming:hover { background: #f6fafc; }
.ws-upcoming time { color: var(--blue); font-weight: 600; min-width: 38px; }
.ws-upcoming b { font-size: 12px; font-weight: 600; }
.ws-event-list { padding: 0 2px; }
.ws-event { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.ws-event:last-child { border-bottom: 0; }
.ws-event time { font-size: 11px; color: var(--muted); }
.ws-alert { padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fffbf3; }
.ws-alert.red { background: #fff7f7; }
.ws-alert.resolved { background: #f4faf7; }
.ws-alert:last-child { border-bottom: 0; }
.ws-alert strong { font-size: 11px; font-weight: 600; }
.ws-alert p { font-size: 11px; line-height: 1.6; color: var(--muted); margin: 4px 0 8px; }
.ws-health { padding: 2px 14px; }
.ws-health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.ws-health-row:last-child { border-bottom: 0; }
.ws-health-row b { color: var(--ink); font-weight: 600; text-align: right; }
.ws-health-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.ws-healthcard { margin-bottom: 0; padding-bottom: 12px; }
.ws-healthcard .ws-sub { padding: 0 14px; }
.ws-healthval { font-size: 19px; font-weight: 600; letter-spacing: 0; padding: 10px 14px 0; }
.ws-book-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.ws-book-tabs button { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px; font-size: 11px; color: var(--muted); text-align: left; }
.ws-book-tabs button.selected { border-color: #a9c6d6; background: #edf5fa; color: var(--blue-dark); font-weight: 600; }
.ws-book-tabs small { display: block; font-size: 10px; font-weight: 400; margin-top: 2px; }
.ws-settings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); background: #fbfdfe; }
.ws-setting { min-width: 0; }
.ws-setting > label { display: block; font-size: 11px; font-weight: 600; color: #526e80; margin-bottom: 6px; }
.ws-select { width: 100%; max-width: 100%; border: 1px solid #cfdee8; background: #fff; border-radius: 5px; padding: 7px 9px; font-size: 11px; color: var(--ink); min-width: 0; }
.ws-select:disabled { background: #f3f7f9; color: #7d93a0; }
.ws-inline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ws-num { width: 62px; border: 1px solid #cfdee8; border-radius: 5px; padding: 6px 8px; font-size: 12px; color: var(--ink); background: #fff; font-variant-numeric: tabular-nums; }
.ws-book-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; padding: 12px 20px; border-top: 1px solid var(--line); }
/* the engine view inside a book (live stack v2): the venue word, the strategy detail, the box rail, the leg strips */
.venue-pill { font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 7px 12px; }
.ws-rowtoggle { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ws-box { margin-top: 4px; font-size: 11px; }
.ws-detail-row td { background: #f6fafc; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ws-engine-detail { display: flex; flex-direction: column; gap: 10px; }
.ws-engine-detail .ws-section-title { margin: 6px 0 0; }
.ws-railcard { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.ws-rail-box { position: relative; height: 10px; margin: 8px 0 6px; border-radius: 5px; background: #e8eef2; }
.ws-rail-fill { position: absolute; top: 0; bottom: 0; background: #cfe3ee; border-radius: 5px; }
.ws-rail-mark { position: absolute; top: -3px; width: 2px; height: 16px; margin-left: -1px; background: #6d8393; }
.ws-rail-mark.lo { background: var(--red); } .ws-rail-mark.hi { background: var(--green); } .ws-rail-mark.px { background: var(--blue); width: 3px; transition: left .4s linear; }
/* the rail's labels in three fixed columns (21 Oct 2026): the live figure changes, nothing shifts */
.ws-rail-lbl { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-rail-lbl span:nth-child(2) { text-align: center; } .ws-rail-lbl span:nth-child(3) { text-align: right; }
.ws-rail-lbl b { color: var(--ink); } .ws-rail-lbl b.lo { color: var(--red); } .ws-rail-lbl b.hi { color: var(--green); }
.ws-legstrip { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 14px; border: 1px solid #d6e6f0; border-left: 4px solid #7fb3c9; border-radius: 6px; background: #f1f8fb; font-size: 12px; }
.ws-legstrip.rules { border-left-color: #c9b26d; background: #fbf8ef; border-color: #ece3c8; }
.ws-legstrip .f { display: inline-flex; flex-direction: column; gap: 1px; min-width: 70px; }
.ws-legstrip .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.ws-legstrip .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.ws-legstrip .v.positive { color: var(--green); } .ws-legstrip .v.negative { color: var(--red); }
/* the book page in the NF_SX_Live layout: book chips + account filter, Book settings, the lots row, the strategy list beside the selected strategy */
.ws-book-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ws-book-top .ws-book-tabs { margin-bottom: 0; align-items: center; }
.ws-chips-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.ws-book-tabs .ws-arrow { color: var(--blue); margin-left: 4px; }
.ws-account-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ws-book-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the MTM chart of a live book (the D console's intraday chart) */
.ws-mtm-panel { margin: 14px 0 0; }
.ws-mtm-head { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 12px 15px; font: inherit; font-size: 12px; color: var(--ink); text-align: left; cursor: pointer; }
.ws-mtm-head strong { font-weight: 600; letter-spacing: .2px; }
.ws-mtm-head .ws-caret { color: var(--muted); font-size: 11px; }
.ws-mtm-now { font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-mtm-now.positive { color: var(--green); } .ws-mtm-now.negative { color: var(--red); }
.ws-mtm { padding: 0 14px 10px; }
.ws-mtm svg { display: block; width: 100%; height: auto; }
.ws-area { fill: #e9f5ef; opacity: .9; } .ws-area.down { fill: #fcebec; }
.ws-mtm-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-top: 4px; }
.ws-slip { display: flex; gap: 6px; align-items: baseline; font-size: 12px; padding: 6px 2px 8px; }
.ws-slip small { color: var(--muted); font-size: 11px; }
/* the LAST SESSION group of a carry book (STBT): amber, like NF SX's and the D console's yesterday band (14 Oct 2026) */
.ws-carry-head td { background: #fdf3e1; color: #9a5b00; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 6px 10px; }
.ws-carry-row td:first-child { border-left: 3px solid #f0b54a; }
.ws-book-summary .ws-carry-sum { background: #fdf3e1; border-radius: 6px; padding: 4px 8px; }
.ws-book-summary .ws-carry-sum small { display: block; color: #9a5b00; font-size: 11px; }
/* the MTM chart in the D console's sizes; green / red between D's dark and the first light try (owner 14 Oct 2026: "lite green not
   dark", then "bit extra green"): the line, area (18 %) and last point #16a34a / #dc2626, the numbers #15803d / #b91c1c */
/* the MTM chart exactly as the D console draws it (F:/handover/D/US_execution_live/static/index.html pnlChart, 15 Oct 2026):
   #15803d / #b91c1c by the sign of the last sample, the area at 8 % opacity, the line 2 px, the end dot r 3.5, the zero line
   #a1a1aa dashed 4 4, the hover a dashed #52525b line with a white dot ringed #18181b. The site's icon rule (svg { stroke:
   currentColor }) is inherited by the chart's shapes, which drew the area's closing edge as a dark line: the chart resets it. */
.ws-mtm svg.ws-pnlchart { width: 100%; height: 170px; display: block; cursor: crosshair; touch-action: none; stroke: none; fill: none; stroke-width: 0; stroke-linecap: butt; stroke-linejoin: miter; }
.ws-chart-zero { stroke: #a1a1aa; stroke-width: 1; stroke-dasharray: 4 4; }
.ws-chart-area { opacity: .08; stroke: none; } .ws-chart-area.up { fill: #15803d; } .ws-chart-area.down { fill: #b91c1c; }
.ws-chart-line { fill: none; stroke-width: 2; } .ws-chart-line.up { stroke: #15803d; } .ws-chart-line.down { stroke: #b91c1c; }
.ws-chart-dot { stroke: none; } .ws-chart-dot.up { fill: #15803d; } .ws-chart-dot.down { fill: #b91c1c; }
.ws-chart-cursor-line { stroke: #52525b; stroke-width: 1; stroke-dasharray: 3 3; }
.ws-chart-cursor-dot { fill: #fff; stroke: #18181b; stroke-width: 2; }
.ws-chartlbl { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 4px; }
.ws-chartlbl .positive, .ws-mtm-head .ws-mtm-now.positive { color: #15803d; } .ws-chartlbl .negative, .ws-mtm-head .ws-mtm-now.negative { color: #b91c1c; }
.ws-account-pick .ws-select { width: auto; min-width: 190px; }
.ws-book-viewing { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.ws-book-settings { border-top: 1px solid var(--line); }
.ws-book-settings .detail-tools { padding-top: 12px; }
.ws-settings-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid #e3edf2; }
.ws-setting-wide .activity-row { padding: 5px 0; }
.ws-setting-wide .panel-empty { font-size: 11px; color: var(--muted); }
.ws-lots-row { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.ws-lots-row .ws-lots-acct { color: var(--ink); }
.ws-split { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.ws-list, .ws-algo { background: #fff; border: 1px solid var(--line); border-radius: 7px; min-width: 0; }
.ws-list { padding: 14px 14px 10px; }
.ws-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ws-list-head h3 { font-size: 15px; font-weight: 600; }
.ws-count { display: inline-block; min-width: 20px; text-align: center; padding: 2px 6px; border-radius: 4px; background: #eef4f7; color: var(--muted); font-size: 11px; font-weight: 600; }
.ws-kind-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ws-kind-tabs button { border: 1px solid var(--line); border-radius: 6px; background: #f8fbfd; padding: 9px 10px; font-size: 12px; color: var(--muted); }
.ws-kind-tabs button.selected { background: #edf5fa; border-color: #a9c6d6; color: var(--blue-dark); font-weight: 600; }
.ws-list .ws-search { width: 100%; margin-bottom: 10px; }
.ws-list .ws-chips { margin-bottom: 10px; }
.ws-algolist tr { cursor: pointer; }
.ws-algolist tr.selected td { background: #edf5fa; box-shadow: inset 3px 0 0 var(--blue); }
.ws-rowpick { display: block; width: 100%; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ws-rowpick small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.ws-algo { padding: 16px 18px 14px; }
.ws-algo-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.ws-algo-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-algo-title h3 { font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
.ws-algo-head p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ws-algo-stats { margin: 0 0 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ws-algo-body { min-width: 0; }
.ws-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.ws-card { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: #fbfdfe; min-width: 0; }
.ws-card h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.ws-kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid #eaf1f5; font-size: 11px; }
.ws-kv .k { color: var(--muted); min-width: 150px; }
.ws-kv .v { color: var(--ink); }
.ws-kv .ws-sub { flex-basis: 100%; }
.ws-card .ws-railcard { margin-top: 8px; }
.ws-timeline { list-style: none; margin: 0; padding: 0; }
/* the execution events a size up (owner 15 Oct 2026: "even better visibility in font size"): 14 px titles, 13 px details and times */
.ws-timeline li { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid #eaf1f5; font-size: 13px; }
.ws-timeline time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ws-timeline strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ws-timeline small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 1180px) { .ws-split, .ws-two, .ws-settings-more { grid-template-columns: minmax(0, 1fr); } .ws-algo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-book-summary span { font-size: 11px; color: var(--muted); }
.ws-book-summary b { font-size: 13px; font-weight: 600; margin-left: 7px; color: var(--ink); }
.ws-accounthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-accounthead h2 { font-size: 21px; font-weight: 600; letter-spacing: -.2px; margin: 4px 0; }
.ws-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px 0 8px; }
.ws-figs label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.ws-figs b { font-size: 17px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ws-bar-wrap { padding: 4px 0 10px; }
.ws-bar { display: block; width: 100%; height: 12px; border-radius: 3px; }
.ws-bar rect { stroke: none; }
.ws-bar-bg { fill: #e6eff3; }
.ws-bar-used { fill: #4a8d9f; }
.ws-bar-coming { fill: #a9cdd8; }
.ws-bar-mark { stroke: #7d97a5; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.ws-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: var(--muted); margin-top: 8px; align-items: center; }
.ws-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: #cbd7dd; }
.ws-key.used { background: #4a8d9f; }
.ws-key.coming { background: #a9cdd8; }
.ws-key.c1 { background: #3f7f93; } .ws-key.c2 { background: #a57935; } .ws-key.c3 { background: #7a4f9a; } .ws-key.c4 { background: #b04a4a; }
.ws-keyed { display: inline-flex; align-items: center; gap: 4px; }
.ws-advice { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; background: #f4fafc; border-left: 3px solid #8eaebc; border-radius: 4px; padding: 13px 15px; margin: 6px 0 4px; }
.ws-advice-label { font-size: 11px; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; padding-top: 2px; }
.ws-advice p { margin: 0 0 7px; font-size: 12px; line-height: 1.65; color: var(--ink); }
.ws-advice p:last-child { margin-bottom: 0; }
.ws-advice p.amber { color: #8a6a22; }
.ws-advice p.red { color: var(--red); }
.ws-advice-cell { font-size: 11px; line-height: 1.5; color: var(--muted); display: block; min-width: 150px; white-space: normal; }
.ws-account-tabs, .ws-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ws-chips { margin: 0; }
.ws-chip { border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 6px 11px; font-size: 11px; color: var(--muted); }
.ws-chip.selected { background: #edf5fa; border-color: #a9c6d6; color: var(--blue-dark); font-weight: 600; }
.ws-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.ws-search { width: 270px; max-width: 100%; border: 1px solid #cfdee8; border-radius: 5px; padding: 7px 10px; font-size: 11px; background: #fff; }
.ws-toolbar .ws-select { width: auto; min-width: 150px; }
.ws-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 11px; color: var(--muted); }
.ws-check { width: 15px; height: 15px; accent-color: #4a8d9f; }
.ws-chart { padding: 6px 4px 0; }
.ws-chart svg { width: 100%; height: 190px; display: block; stroke-width: 1; }
.ws-chart-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding: 2px 16px 10px 60px; }
.ws-grid-line { stroke: #e3edf1; stroke-dasharray: 3 4; }
.ws-zero { stroke: #9bb0bb; stroke-width: 1; }
.ws-axis { font-size: 11px; fill: #7c94a2; stroke: none; }
.ws-line { stroke-width: 2; stroke-linejoin: round; fill: none; }
.ws-line.c1 { stroke: #3f7f93; } .ws-line.c2 { stroke: #a57935; } .ws-line.c3 { stroke: #7a4f9a; } .ws-line.c4 { stroke: #b04a4a; }
.ws-dot { stroke: none; }
.ws-dot.c1 { fill: #3f7f93; } .ws-dot.c2 { fill: #a57935; } .ws-dot.c3 { fill: #7a4f9a; } .ws-dot.c4 { fill: #b04a4a; }
.side-doc { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 14px; border: 0; background: transparent; border-radius: 5px; padding: 9px 10px; font-size: 11px; color: #607f91; text-align: left; }
.side-doc:hover { background: #f4fafc; }
.side-doc svg { width: 15px; height: 15px; }
.side-count:empty { display: none; }
.book-nav .ws-sub { font-size: 10px; margin-top: 1px; }
.load-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.load-strategies { border: 1px solid var(--line); border-radius: 5px; margin: 16px 0 0; padding: 8px 12px 10px; min-width: 0; }
.load-strategies legend { font-size: 11px; font-weight: 500; color: #526e80; padding: 0 6px; }
.load-member { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; border-bottom: 1px solid #edf3f6; font-size: 12px; cursor: pointer; }
.load-member:last-of-type { border-bottom: 0; }
.load-member input { margin-top: 3px; accent-color: #4a8d9f; }
.load-member strong { display: block; font-size: 12px; font-weight: 600; }
.load-member small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
#load-members { max-height: 190px; overflow: auto; }
@media (max-width: 1280px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .ws-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-stat:nth-child(3) { border-right: 0; }
  .ws-stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ws-rail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ws-venue { flex-wrap: wrap; padding: 10px 14px; }
  .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-stat { border-bottom: 1px solid var(--line); }
  .ws-stat:nth-child(2n) { border-right: 0; }
  .ws-stat:nth-child(2n+1) { border-right: 1px solid var(--line); }
  .ws-settings, .ws-figs, .ws-health-grid, .load-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-advice { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ws-table thead { display: none; }
  .ws-table, .ws-table tbody { display: block; }
  .ws-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .ws-table td { display: block; border: 0; padding: 0; min-width: 0; text-align: left !important; }
  .ws-table td::before { content: attr(data-label); display: block; font-size: 10px; color: var(--muted); margin-bottom: 3px; }
  .ws-table td[data-label=""]::before { display: none; }
  .ws-table td.ws-empty-row::before { display: none; }
  .ws-table tfoot { display: none; }
  .ws-cmdbar { flex-wrap: wrap; padding: 14px 16px; font-size: 14px; }
  .ws-venue-main { flex-basis: 100%; }
}

/* the Accounts section of the Administration page (15 Oct 2026): on the page, not in a dialog */
.admin-section { margin-top: 32px; }
.admin-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.admin-section-head p { max-width: 72ch; margin: 6px 0 0; }
.admin-section-head .btn { flex: 0 0 auto; margin-top: 22px; }
#admin-accounts-panel { padding: 0; }

/* ================================================================== the reference look (owner 15 Oct 2026)
   F:/SPX_Platform/Codex/SPX-Lab-UI-Refresh theme.css + polish.css, applied on top of the rules above: Segoe UI / system stack
   with native smoothing, darker labels, stronger headings, tabular numbers; SIM teal and Live blue carried by the mode
   tokens on body.venue-sim / body.venue-live; white and neutral surfaces. The preview-only rules are left out. */
/* Presentation overrides only. The copied SPX Lab layout stays intact. */
body { background: #fafbfc; -webkit-font-smoothing: auto; text-rendering: auto; }
button, input, select, textarea, .docs-layout, .docs-layout button, .docs-layout input { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px;
}
.platform-header { border-top: 1px solid var(--line); }
.platform-link { font-size: 13px; font-weight: 600; }
.platform-link.active, .platform-link[aria-expanded="true"] { background: var(--mode-wash); }
.platform-tools { gap: 14px; }
.profile-trigger { border-color: var(--mode-border); background: #fff; }
.profile-trigger .avatar { background: var(--mode-wash); color: var(--mode-ink); font-weight: 650; }
.profile-trigger strong, .corner-brokers { font-size: 12px; }
.profile-trigger small { color: #637382; }
.menu-choice strong { font-size: 13px; }
.menu-choice small { font-size: 11px; color: #607486; }
.menu-choice:hover, .menu-choice[aria-current="page"] { background: var(--mode-wash); }
.btn, .side-nav button { font-size: 13px; }
.btn.primary { box-shadow: 0 1px 2px #1c293719; }
.btn:hover { border-color: var(--mode-border); }
.ops-sidebar { background: #fafcfd; border-color: var(--line); }
.side-nav button { color: #526677; }
.side-nav button.active { color: var(--mode-ink); background: var(--mode-wash); box-shadow: inset 3px 0 var(--blue); }
.side-nav button:hover, .book-nav:hover { background: var(--mode-wash); }
.side-label { font-size: 10px; color: #657989; letter-spacing: 1.05px; }
.side-count { color: #566d7c; }
.book-nav { font-size: 12px; color: #536978; }
.book-nav.active { background: var(--mode-wash); color: var(--mode-ink); }
.book-nav .book-initial, .ws-icon { background: var(--mode-wash); border-color: var(--mode-border); color: var(--mode-ink); }
.account-tile { border-color: var(--line); }
.account-tile strong { font-size: 12px; }
.account-tile p { font-size: 11px; }
.runtime-preview { background: #fff; color: #586d7c; font-size: 11px; }
.runtime-preview .storage { color: #617586; }
.ws-venue-bar { border-bottom-color: var(--mode-border); }
.ws-venue { background: #fff; box-shadow: inset 3px 0 var(--blue); }
.ws-venue .ws-venue-mark, .ws-venue.live .ws-venue-mark, #venue-pill, #account-tile-pill {
  color: var(--mode-ink); background: #fff; border: 1px solid var(--mode-border); font-size: 11px;
}
.ws-venue .ws-venue-mark { border-color: var(--blue); font-weight: 750; }
.ws-venue-main small { font-size: 11px; color: #596f7c; }
.market-strip { background: #fff; }
.ops-heading h1 { font-family: inherit; font-size: 27px; font-weight: 600; letter-spacing: -.65px; }
.ops-heading p { font-size: 12px; }
.ws-panel { border-color: var(--line); box-shadow: 0 1px 2px #22313f03; }
.ws-panel-head h2, .ws-rail-head h2, .ws-rail-head h3 { font-size: 14px; font-weight: 650; }
.ws-stat.feat { background: #fff; box-shadow: inset 0 2px var(--blue); }
.ws-stat label { font-size: 12px; color: #586d7d; }
.ws-stat strong { font-size: 25px; font-weight: 650; letter-spacing: -.5px; }
.ws-stat small { font-size: 11px; color: #617585; }
.ws-table { font-size: 12px; }
.ws-table th { font-size: 11px; font-weight: 650; color: #596d7d; background: #f7f9fb; }
.ws-table td { color: #41576a; }
.ws-table tbody tr:hover { background: var(--mode-wash); }
.ws-sub, .ws-leg, .ws-toggle, .ws-badge, .ws-note-line { font-size: 11px; }
.ws-sub { color: #617686; }
.ws-caption, .ws-note, .ws-crumbs, .ws-aside, .ws-muted-line { font-size: 12px; }
.ws-badge.blue { background: var(--mode-wash); color: var(--mode-ink); }
.ws-switch[aria-checked="true"] { background: var(--blue); }
.ws-money, .ws-stat strong, .numeric, .ws-table td, .market-strip strong { font-variant-numeric: tabular-nums lining-nums; }
.positive, .ws-table td.positive { color: var(--green); }
.negative, .ws-table td.negative { color: var(--red); }
/* Keep broad surfaces neutral; use color only to identify mode and state. */
.workspace-card.forward { background: #fff; }
.workspace-card.forward .workspace-icon { background: #f0f5f4; color: #376f6a; border-color: #d0dfdc; }
.workspace-card.forward .btn.primary { background: #376f6a; border-color: #376f6a; }
.workspace-card.forward .btn.primary:hover { background: #285a56; }
.workspace-icon, .menu-icon, .broker-logo { background: #f3f5f7; border-color: var(--line); color: #4a647b; }
.runtime-launch, .idea-feature, .research-note.premium, .article-callout { background: #f4f6f8; border-color: var(--line); }
.hero h1, .workspace-card h3 { font-weight: 600; }
.hero h1 span { color: #466884; }
.pill { color: #4b6275; background: #f4f6f8; border-color: var(--line); }
.pill.green, .ws-badge.green { background: #f0f6f2; color: #296547; border-color: #d6e5dc; }
.pill.amber, .ws-badge.amber { background: #faf5e9; color: #85651d; border-color: #e9dfc6; }
.ws-badge.red { background: #fbf0f0; color: #a33f49; }
.help-callout.important { border-left-color: #466884; background: #f1f4f7; }
.ws-table th, .ws-sub, .ws-caption, .ws-muted-line { color: #566675; }
@media (max-width: 1100px) { .platform-header { gap: 14px; padding-left: 18px; padding-right: 18px; } .platform-link { padding: 0 9px; } }

/* Pleasant UI pass. Presentation only; the reference layout and controls are retained. */
body { background: #f8f9fb; }
.btn { min-height: 38px; border-radius: 7px; font-weight: 600; padding: 8px 14px; }
.btn.primary { box-shadow: 0 1px 2px #1c29371a; }
.btn:not(:disabled), .platform-link, .menu-choice, .side-nav button, .book-nav {
  transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}
.btn:active:not(:disabled) { box-shadow: inset 0 1px 2px #18324714; }
.btn:hover:not(:disabled) { border-color: #b8c6d0; }
.btn.primary:hover:not(:disabled) { border-color: var(--blue-dark); background: var(--blue-dark); }
.btn.text { box-shadow: none; }
.pill, .ws-badge { letter-spacing: .1px; font-weight: 600; border-radius: 5px; }
.eyebrow { letter-spacing: 1.25px; font-size: 10px; font-weight: 600; }

/* Quiet navigation with one clearly selected workspace. */
.platform-header { background: #fff; border-top: 0; padding: 0 30px; gap: 28px; }
.platform-header .brand-symbol { background: #2f485c; border-color: #2f485c; border-radius: 8px; }
.platform-header .brand-name { font-size: 15px; letter-spacing: .65px; }
.platform-header .brand-name small { font-size: 9px; letter-spacing: .2px; }
.platform-nav { gap: 4px; }
.platform-link { height: auto; margin: 14px 0; padding: 0 13px; border: 0; border-radius: 6px; color: #5a6a78; }
.platform-link.active { color: var(--mode-ink); background: var(--mode-wash); }
.platform-tools { gap: 20px; }
.corner-brokers { color: #576b7b; }
.profile-trigger { border-color: var(--line); border-radius: 8px; padding: 5px 10px 5px 5px; gap: 8px; }
.profile-trigger .avatar { border-radius: 6px; background: #eef2f5; color: #405668; }
.profile-trigger small { font-size: 10px; }
.menu-panel { border-color: var(--line); border-radius: 10px; padding: 12px 8px 8px; box-shadow: 0 12px 32px #23323e16; }
.menu-choice { border-radius: 7px; padding: 11px 10px; }
.menu-icon { border-color: var(--line); background: #f6f8fa; }

/* Familiar two-column home with a calmer portfolio preview. */
.home { max-width: 1320px; padding: 0 48px; }
.hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 64px; padding: 56px 0 48px; }
#hero-eyebrow { display: block; color: #617581; font-size: 10px; letter-spacing: 1.25px; }
.hero h1 { font-size: clamp(36px, 4.1vw, 54px); font-weight: 600; letter-spacing: -1.9px; line-height: 1.12; margin: 18px 0 20px; }
.hero h1 span { color: #46647b; }
.hero-description { font-size: 15px; line-height: 1.75; max-width: 470px; }
.hero-cta { gap: 10px; margin-top: 26px; }
.hero-cta .btn { min-height: 43px; padding: 10px 16px; font-size: 13px; }
.hero-note { align-items: flex-start; font-size: 11px; line-height: 1.6; max-width: 450px; margin-top: 16px; color: #657784; }
.hero-note svg { margin-top: 2px; width: 13px; flex: none; }
.journey { background: #fff; border: 1px solid #dce4ea; border-radius: 13px; padding: 22px 24px; box-shadow: 0 8px 26px #233c5008; }
.journey-label { align-items: center; padding-bottom: 15px; gap: 12px; }
.journey-label strong { font-size: 11px; font-weight: 600; letter-spacing: .3px; }
.journey-label > span { font-size: 10px; color: #6b7c89; white-space: nowrap; }
.mini-portfolio { padding: 20px 0 16px; }
.mini-portfolio .square { border-radius: 8px; background: #edf2f6; border-color: #dbe4eb; color: #405f78; font-size: 12px; }
.mini-portfolio h3 { font-size: 17px; letter-spacing: -.25px; }
.mini-portfolio small { font-size: 11px; }
.mini-portfolio .pill { font-size: 9px; background: #f6f8fa; border-color: #e4e9ee; color: #607382; }
.mini-row { padding: 12px 0; font-size: 12px; border-color: #edf0f3; }
.mini-row .muted { font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.journey-transfer { margin: 5px 0 0; padding: 12px 0; font-size: 11px; border-color: #e7ecf0; color: #596f7e; }
.journey-sim { padding-top: 16px; gap: 12px; }
.journey-sim strong { font-size: 13px; color: #294b47; }
.journey-sim small { font-size: 11px; margin-top: 2px; display: block; }
.section-head { margin-bottom: 18px; gap: 20px; }
.section-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -.6px; margin-top: 7px; }
.section-head > p { font-size: 12px; }
.workspaces { gap: 20px; }
.workspace-card { border-radius: 11px; padding: 24px; box-shadow: var(--surface-shadow); }
.workspace-card-header { margin-bottom: 18px; }
.workspace-icon { height: 37px; width: 37px; border-radius: 8px; background: #f2f5f8; }
.workspace-card-header .pill { font-size: 9px; padding: 5px 7px; background: #f7f9fa; color: #5d707e; border-color: #e2e8ec; }
.workspace-card.forward .workspace-card-header .pill { background: #f1f6f4; color: #376a60; border-color: #dae6e1; }
.workspace-card h3 { font-size: 23px; font-weight: 600; letter-spacing: -.5px; }
.workspace-card p { font-size: 13px; line-height: 1.75; max-width: 410px; }
.workspace-card-bottom { border-top: 1px solid #eef1f4; margin-top: 20px; padding-top: 18px; gap: 12px; }
.features { gap: 14px; }
.features span { font-size: 11px; color: #627785; }
.features svg { color: #708894; width: 13px; }
.workspace-card-bottom .btn { min-height: 36px; font-size: 12px; }
.flow-strip { gap: 32px; margin-top: 32px; padding: 24px 0; }
.flow-step { gap: 12px; }
.step-num { color: #7b8c98; border-color: #dde5ea; background: #f1f4f7; border-radius: 6px; }
.flow-step strong { font-size: 13px; color: #344a5c; }
.flow-step p { font-size: 12px; line-height: 1.65; }
.broker-strip { padding: 22px 0; color: #526777; gap: 32px; }
.broker-strip > div small, .site-footer { font-size: 11px; }
.broker-strip > span { font-size: 15px; font-weight: 600; }
.broker-strip > span small { font-size: 9px; letter-spacing: .6px; color: #6d7d89; }
.site-footer { padding: 18px 0 26px; color: #6b7b88; }

/* Research pages: the same card rhythm and stronger portfolio hierarchy. */
.front-workspace { max-width: 1320px; padding: 32px 48px 48px; }
.front-breadcrumb { font-size: 12px; margin-bottom: 22px; color: #6a7c89; }
.front-breadcrumb button { font-size: 12px; }
.front-heading h1 { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.75px; }
.front-heading p, .destination-card p, .runtime-launch p { font-size: 13px; line-height: 1.75; }
.destination-grid { gap: 18px; }
.destination-card { padding: 24px; border-radius: 10px; box-shadow: var(--surface-shadow); }
.destination-card h2 { font-size: 22px; font-weight: 600; }
.destination-number { color: #61798b; margin-bottom: 20px; }
.destination-card .btn { margin-top: 20px; }
.runtime-launch { background: #f0f4f7; border-color: #dce5eb; border-radius: 11px; padding: 26px 28px; }
.runtime-launch h2 { font-size: 27px; font-weight: 600; }
.research-sidebar, .research-summary, .research-table, .broker-card { border-radius: 10px; box-shadow: var(--surface-shadow); }
.research-layout { gap: 20px; }
.research-portfolio { padding: 15px 14px; border-bottom-color: #edf1f4; color: #40586b; }
.research-portfolio.selected { background: #f1f5f8; }
.research-portfolio strong { font-size: 13px; color: #2b4355; }
.research-portfolio small { font-size: 11px; color: #627886; }
.research-initial { border-color: #dce5eb; background: #f6f8fa; }
.research-summary h2 { font-weight: 600; font-size: 25px; }
.research-stat span { font-size: 11px; }
.research-stat strong { font-weight: 600; }
.ledger th { background: #f7f9fb; font-size: 11px; font-weight: 600; color: #5d7080; }
.ledger td { font-size: 12px; color: #344c5e; }
.research-table-footer p, .front-note, .broker-card p { font-size: 12px; }
.broker-card { padding: 24px; }
.broker-card.available { border-color: var(--line); }
.broker-card h2 { font-size: 21px; }
.broker-logo { border-radius: 10px; }

/* Trading screens stay compact, with aligned borders and quieter secondary text. */
.ops-sidebar { background: #fff; padding-top: 18px; }
/* The persistent ribbon already labels the whole file as a sample preview. */
.side-nav { gap: 4px; }
.side-nav button { border-radius: 6px; padding: 10px; min-height: 38px; }
.side-nav button.active { box-shadow: inset 2px 0 var(--blue); }
.side-label { letter-spacing: .9px; padding-bottom: 10px; color: #6a7b88; }
.side-books { margin-top: 24px; }
.book-nav { border-radius: 6px; }
.book-nav .book-initial { border-radius: 5px; }
.account-tile { padding-top: 14px; }
.ws-venue { padding: 11px 24px; box-shadow: inset 2px 0 var(--blue); }
.ws-venue-main { gap: 5px 18px; }
.ws-venue-main small { color: #617481; }
.ws-venue-mark { border-radius: 5px; }
.ops-content { padding: 22px 24px; }
.ops-heading { margin-bottom: 18px; }
.ops-heading h1 { font-size: 26px; font-weight: 600; margin: 4px 0 6px; }
.ws-stats { border-radius: 9px; margin-bottom: 16px; box-shadow: 0 1px 3px #23323e03; }
.ws-stat { padding: 14px 17px; }
.ws-stat.feat { box-shadow: inset 0 2px var(--blue); }
.ws-stat label { font-size: 11px; font-weight: 500; color: #5b6f7e; }
.ws-stat strong { font-weight: 600; font-size: 25px; }
.ws-stat.feat strong { font-size: 29px; letter-spacing: -.6px; }
.ws-stat small { margin-top: 5px; }
.ws-panel { border-radius: 9px; margin-bottom: 16px; box-shadow: 0 1px 3px #23323e03; }
.ws-panel-head { padding: 13px 16px; border-color: #e9edf1; border-radius: 9px 9px 0 0; }
.ws-panel-head h2 { font-size: 14px; font-weight: 600; }
.ws-table-wrap { border-radius: 7px; border-color: #e2e8ed; }
.ws-table th { padding: 10px; background: #f6f8fa; font-size: 11px; letter-spacing: .1px; }
.ws-table td { padding: 11px 10px; border-color: #edf1f4; }
.ws-table tbody tr:hover { background: #f8fafb; }
.ws-sub { color: #607484; line-height: 1.5; }
.ws-note { border-radius: 7px; background: #f7f9fb; border-color: #e0e7ed; color: #50697b; }
.ws-note.warning { background: #fcf8ef; color: #806529; border-color: #e9dfc4; }
.ws-book-tabs button { border-radius: 7px; font-size: 12px; padding: 8px 12px; }
.ws-book-tabs button.selected { background: var(--mode-wash); border-color: var(--mode-border); color: var(--mode-ink); }
.ws-book-tabs small { font-size: 10px; color: #627786; }
.ws-railcard { border-radius: 8px; border-color: #e1e7ec; }
.ws-legstrip { background: #f5f8fa; border-color: #dce6ed; border-left-color: #8ba8bb; border-radius: 7px; }
.ws-legstrip.rules { background: #faf9f4; border-color: #e5e2d6; border-left-color: #b5a574; }
.ws-num, .ws-select { border-color: #ccd7df; border-radius: 6px; color: #263f51; }
.ws-settings { background: #f9fafb; }
.ws-setting > label { color: #4b6274; font-size: 11px; }
.ws-health-row { font-size: 11px; }
.ws-empty { background: #fafbfc; border-radius: 9px; border-color: #d5dfe7; }
.ops-footer { color: #6b7d8a; }
dialog { border-color: #d7e1e8; border-radius: 12px; box-shadow: 0 20px 60px #20344829; }
dialog::backdrop { background: #172c3d55; }
.modal-head { border-color: #e4eaf0; }
.modal-head h2 { font-weight: 600; }
.search-box { border-color: #d5dfe7; border-radius: 7px; }
.field input, .field select { border-radius: 6px; border-color: #ccd8e1; }

/* Preserve the existing narrow-screen layouts, without squeezing the navigation. */
@media (max-width: 1180px) {
  .platform-header { padding: 0 20px; gap: 16px; }
  .platform-tools { gap: 12px; }
  .platform-link { padding: 0 10px; }
  .home, .front-workspace { padding-left: 32px; padding-right: 32px; }
  .hero { gap: 36px; }
  .hero h1 { font-size: 44px; }
  .hero-cta { flex-wrap: wrap; }
  .workspace-card-bottom { flex-wrap: wrap; }
}
@media (max-width: 1050px) {
  .platform-header { padding: 10px 22px 0; gap: 8px; }
  .platform-nav { height: 48px; }
  .platform-link { margin: 5px 0; padding: 0 16px; }
  .journey { padding: 20px; }
  .hero { gap: 28px; }
  .journey-label { flex-wrap: wrap; gap: 4px; }
  .front-heading { align-items: flex-start; }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: 37px; letter-spacing: -1.3px; }
  .hero-description { font-size: 14px; }
  .mini-row { gap: 8px; align-items: flex-start; }
  .mini-row .muted { max-width: 100px; }
  .ops-sidebar { padding: 16px 7px; }
  .side-nav button { padding: 11px 7px; }
  .ops-content { padding: 18px; }
}
@media (max-width: 700px) {
  .home, .front-workspace { padding-left: 20px; padding-right: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 32px 0; gap: 28px; }
  .hero h1 { font-size: 39px; }
  .hero-description { max-width: 100%; }
  .hero-note { max-width: 100%; }
  .journey { max-width: none; }
  .journey-label { flex-wrap: nowrap; }
  .workspaces, .destination-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .workspace-card { padding: 22px; }
  .workspace-card-bottom { flex-direction: row; align-items: center; }
  .features span:last-child { display: inline-flex; }
  .flow-strip { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .broker-strip { flex-wrap: wrap; gap: 20px 28px; }
  .broker-strip > div { flex-basis: 100%; }
  .site-footer { flex-wrap: wrap; gap: 7px; }
  .platform-header { padding: 10px 14px 0; }
  .platform-tools { gap: 9px; }
  .platform-link { padding: 0 10px; font-size: 11px; }
  .ops-content { padding: 16px 12px; }
  .ops-heading h1 { font-size: 23px; }
  .ws-stat { padding: 12px; }
  .ws-stat strong { font-size: 23px; }
  .front-heading { flex-wrap: wrap; }
  .research-layout { grid-template-columns: minmax(0, 1fr); }
  .research-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .research-summary > div:first-child { grid-column: 1 / -1; }
  .research-stat { min-width: 0; margin: 0; padding: 0; border: 0; }
  .research-stat span { font-size: 11px; white-space: normal; }
  .research-stat strong { font-size: 23px; }
  .research-stat strong.status-label { font-size: 11px; white-space: normal; }
  .research-table .ledger { min-width: 540px; }
  .research-table-footer > div { align-self: auto; flex-wrap: wrap; }
  .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-stat.feat { grid-column: 1 / -1; border-right: 0; }
  .ws-stat:not(.feat) { border-right: 0; border-bottom: 1px solid var(--line); }
  .ws-stat:nth-child(even) { border-right: 1px solid var(--line); }
  .ws-stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 420px) {
  .home, .front-workspace { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 35px; }
  .hero-cta > .btn { flex: 1 1 100%; }
  .workspace-card-bottom { align-items: flex-start; flex-direction: column; }
  .platform-link { padding: 0 6px; font-size: 10px; }
  .mini-portfolio .pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* the last session apart from today's rows (owner 15 Oct 2026): its own block under the strategies table */
.ws-carry-block { margin-top: 12px; border: 1px solid #ead9b5; border-radius: 8px; background: #fffaf0; overflow: hidden; }
.ws-carry-block .ws-carry-head td { background: #f7ecd6; }
.ws-carry-block .ws-table tbody tr:hover { background: #fdf5e4; }
/* the broker's logo in the card's image slot (owner 15 Oct 2026): the initials until the file loads, or when there is none */
.broker-logo { position: relative; overflow: hidden; }
.broker-logo img { display: none; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.broker-logo.has-logo { background: #fff; border: 1px solid var(--line); }
.broker-logo.has-logo img { display: block; }
.broker-logo.has-logo b { display: none; }

/* the dashboard figures a size down (owner 15 Oct 2026: "reduce little bit, medium is fine") */
.ws-stat strong { font-size: 21px; }
.ws-stat.feat strong { font-size: 24px; letter-spacing: -.4px; }
.ws-stat { padding: 12px 16px; }

.hypothesis-art.is-figure { padding: 10px; background: #fff; }
.hypothesis-art.is-figure img { display: block; width: 100%; height: auto; }

/* ---- study charts (blog-charts.js) and rule sheets */
.article-chart { position: relative; }
.bc-host { position: relative; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px 8px 4px; }
.blog-chart-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.bc-title { font-size: 13px; font-weight: 600; fill: var(--ink); }
.bc-note, .bc-tick { font-size: 11px; fill: var(--muted); }
.bc-sub { font-size: 11px; font-weight: 600; fill: var(--muted); letter-spacing: .3px; }
.bc-label { font-size: 11.5px; fill: var(--ink); }
.bc-label.strong { font-size: 12px; font-weight: 600; }
.bc-bar { cursor: pointer; transition: fill-opacity .12s; }
.bc-tip { position: absolute; z-index: 5; pointer-events: none; background: #243340; color: #fff; font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 18px rgba(20, 35, 50, .18); white-space: nowrap; }
.bc-tip strong { font-weight: 600; }
.bc-table-btn { margin: 2px 0 4px; }
.bc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 8px; }
.bc-table caption { text-align: left; font-weight: 600; padding: 4px 0 8px; color: var(--ink); }
.bc-table th, .bc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.bc-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bc-loading, .bc-error { font-size: 13px; color: var(--muted); padding: 40px 12px; text-align: center; }
.bc-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bc-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.bc-kpi-label { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.bc-kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bc-kpi.pos .bc-kpi-value { color: #1d4f85; }
.bc-kpi.neg .bc-kpi-value { color: #9a4a00; }
.bc-kpi-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.bc-host .bc-kpis { margin: 4px 0 6px; }
.bc-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
.bc-member { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; background: #fbfcfd; }
.bc-member h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.bc-member-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; font-size: 14px; }
.bc-member-grid strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.article-rules { margin: 18px 0 26px; overflow-x: auto; }
.article-rules table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.article-rules th, .article-rules td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-rules thead th { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); background: #f6f8fa; }
.article-rules tbody th { font-weight: 600; width: 22%; color: var(--ink); }
.article-rules td { color: #2e3f4c; }
.hypothesis-art.is-figure .axis { height: auto; border: 0; margin: 10px 0 6px; }
@media (max-width: 760px) {
  .bc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-kpi-value { font-size: 20px; }
  .bc-members { grid-template-columns: 1fr; }
  .article-rules table { font-size: 13px; }
}
/* one highlight in the header (owner, 18 Oct 2026): while a menu is open, only that menu carries the wash; the current
   section's link keeps its ink colour but drops the wash, so an open Forward Test and the current Algo Live never look alike */
.platform-nav:has(.platform-link[aria-expanded="true"]) .platform-link.active:not([aria-expanded="true"]) { background: transparent; }

/* the strategy's order settings (21 Oct 2026): the stop at the broker, its level, the tracking word */
.ws-order-settings { margin: 10px 0 12px; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ws-order-settings .section-caption { margin-bottom: 0; }
.ws-os-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-top: 8px; }
.ws-os-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.ws-os-form select, .ws-os-form input { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; min-width: 140px; background: #fff; color: inherit; }
.load-member-os { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -2px 0 8px 28px; font-size: 12px; color: var(--muted); }
.load-member-os label { display: inline-flex; align-items: center; gap: 6px; }
.load-member-os select, .load-member-os input { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: inherit; }
.load-os-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 4px 0 6px; }
.load-os-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.load-os-row select, .load-os-row input { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; min-width: 160px; background: #fff; color: inherit; }
.load-more-hint { margin: 6px 2px 0; }
/* the live-and-backtest mismatch: dark on a pale amber band, bold (owner 21 Oct 2026: "highlight this with even dark color") */
.ws-os-warn, .load-os-warn { color: #7a2e0e; background: #fff1dc; border-left: 4px solid #c2410c; border-radius: 4px; font-size: 13px; font-weight: 600; padding: 7px 10px; margin: 8px 0 4px; display: flex; gap: 6px; align-items: flex-start; }

/* a refused entry's outcome on the strategy's events and the Health & alerts table (owner 21 Oct 2026, NF SX Live's RETRY) */
.ws-err { color: var(--red); font-size: 11px; line-height: 1.4; }
.ws-err.muted { color: var(--muted); }
.ws-act { font-size: 11px; line-height: 1.4; }
.ws-act.green { color: var(--green); }
.ws-act.red { color: var(--red); }
.ws-act .ws-badge { margin-right: 6px; }
.ws-chip-label { font-size: 11px; color: var(--muted); padding: 0 4px; align-self: center; }
/* a Live book's edit noted by the builder, shown in the morning window (22 Oct 2026) */
.ws-live-edit .btn + .btn { margin-left: 6px; }

/* MCP access (owner, 28 Oct 2026): the account's connector tokens and the set-up steps, under the Backtest tab */
.destination-grid.four { grid-template-columns: repeat(4, 1fr); }
.mcp-intro { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: center; background: #edf6f9; border: 1px solid #d6e7ee; border-radius: 8px; padding: 26px 30px; margin-bottom: 22px; }
.mcp-intro h2 { font-size: 24px; font-weight: 600; letter-spacing: -.3px; margin: 10px 0; }
.mcp-intro p { font-size: 14.5px; color: var(--muted); line-height: 1.8; max-width: 760px; }
.mcp-usage { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }
.mcp-usage label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.mcp-usage strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.mcp-usage small { display: block; font-size: 12px; color: #8ba0ad; margin-top: 4px; }
.mcp-usage .bar { height: 6px; border-radius: 3px; background: #e6eef3; margin-top: 10px; overflow: hidden; }
.mcp-usage .bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.mcp-usage .bar i.warn { background: var(--gold); }
.mcp-usage .bar i.full { background: var(--red); }
.mcp-usage .bar i.w0 { width: 0%; }
.mcp-usage .bar i.w10 { width: 10%; }
.mcp-usage .bar i.w20 { width: 20%; }
.mcp-usage .bar i.w30 { width: 30%; }
.mcp-usage .bar i.w40 { width: 40%; }
.mcp-usage .bar i.w50 { width: 50%; }
.mcp-usage .bar i.w60 { width: 60%; }
.mcp-usage .bar i.w70 { width: 70%; }
.mcp-usage .bar i.w80 { width: 80%; }
.mcp-usage .bar i.w90 { width: 90%; }
.mcp-usage .bar i.w100 { width: 100%; }
.token-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 16px; margin-bottom: 14px; }
.token-form .field { margin-top: 0; }
.token-form .field input, .token-form .field select { min-height: 38px; padding: 8px 10px; }
.token-once { border: 1px solid #cfe3d8; background: #f1faf5; border-radius: 6px; padding: 16px 18px; margin-bottom: 14px; }
.token-once h3 { font-size: 14px; font-weight: 600; color: var(--green); margin-bottom: 6px; }
.token-once p { font-size: 14px; color: var(--muted); line-height: 1.7; }
.token-once .code-block { margin: 10px 0 12px; }
.code-block { position: relative; background: #1f2d38; color: #e9eff3; border-radius: 6px; padding: 12px 96px 12px 14px; font-family: ui-monospace, Consolas, "Cascadia Mono", Menlo, monospace; font-size: 13.5px; line-height: 1.65; overflow-x: auto; }
.code-block pre, .code-block code { font: inherit; white-space: pre; margin: 0; }
.code-block .btn.copy { position: absolute; top: 8px; right: 8px; min-height: 28px; padding: 4px 10px; font-size: 11px; background: #2f4150; border-color: #3d5365; color: #e9eff3; }
.code-block .btn.copy:hover { background: #3a4f60; }
.mcp-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.mcp-step { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 20px 22px; min-width: 0; }
.mcp-step .step-num { font-size: 12px; letter-spacing: 1px; color: #8da5b2; display: block; margin-bottom: 10px; }
.mcp-step h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.mcp-step p, .mcp-step li { font-size: 14.5px; color: var(--muted); line-height: 1.75; }
.mcp-step ol, .mcp-step ul { padding-left: 22px; margin: 8px 0 12px; }
.mcp-step li { margin-bottom: 5px; }
.mcp-step code { font-size: 13.5px; }
.mcp-step .code-block { margin: 10px 0; }
.mcp-tabs { display: inline-flex; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 3px; background: #f3f7fa; margin: 4px 0 12px; }
.mcp-tabs button { border: 0; background: transparent; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mcp-tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(36, 51, 64, .12); }
.mcp-rules { columns: 2; column-gap: 28px; padding-left: 18px; margin: 8px 0 0; }
.mcp-rules li { font-size: 14.5px; color: var(--muted); line-height: 1.75; break-inside: avoid; margin-bottom: 8px; }
@media (max-width: 1180px) { .destination-grid.four { grid-template-columns: repeat(2, 1fr); } .token-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 920px) { .mcp-intro, .mcp-steps { grid-template-columns: minmax(0, 1fr); } .mcp-rules { columns: 1; } }
@media (max-width: 700px) { .destination-grid.four { grid-template-columns: minmax(0, 1fr); } .token-form { grid-template-columns: minmax(0, 1fr); } }