/* VirtuaBroker API docs — shared TOPBAR chrome ONLY (Scalar-safe).
   The full docs.css defines generic classes (.grid/.code/.note/.tile/.flow…) that collide with Scalar's
   own utility classes and collapse its layout grid (sidebar → 0px). So Scalar-hosting pages
   (reference.html) load ONLY this file: prefixed .dx-* topbar chrome + the theme tokens it needs, scoped
   so nothing leaks into the Scalar app. Keep the .dx-top rules here in sync with docs.css's Topbar section. */
:root{
  --brand:#3B82F6; --brand-600:#2563EB; --brand-700:#1D4ED8; --brand-800:#1E40AF;
  --brand-50:#EFF6FF; --brand-100:#DBEAFE; --cyan:#1CAFFF;
  --ink:#111827; --ink-2:#374151; --muted:#6B7280; --muted-2:#64748B;
  --page:#FFFFFF; --panel:#F9FAFB; --card:#FFFFFF; --line:#E5E7EB; --line-2:#F3F4F6;
  --ok:#10B981;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
  --top:60px;
}
[data-theme="dark"]{
  --ink:#F3F5F9; --ink-2:#C7CFDB; --muted:#9AA6B6; --muted-2:#8B95A8;
  --page:#0B1220; --panel:#111827; --card:#141C2B; --line:#243044; --line-2:#1B2536;
  --brand-50:#132038; --brand-100:#17335C;
}
/* Scope box-sizing + font to the topbar only — never a global reset (that would reach the Scalar app). */
.dx-top,.dx-top *{box-sizing:border-box}
.dx-top{font-family:var(--sans);position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:22px;padding:0 22px;background:color-mix(in srgb,var(--page) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.dx-top-fixed{position:fixed;left:0;right:0;top:0}
.dx-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:17px;letter-spacing:-.01em;text-decoration:none}
.dx-brand svg{width:27px;height:27px}
.dx-brand .lo{color:var(--ink)} .dx-brand .hi{color:var(--cyan)}
.dx-brand .docs{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:2px 8px;border-radius:6px}
.dx-nav{display:flex;gap:2px}
.dx-nav a{color:var(--muted);font-weight:600;font-size:14px;padding:7px 12px;border-radius:8px;display:flex;align-items:center;gap:7px;text-decoration:none}
.dx-nav a:hover{color:var(--ink);background:var(--line-2)}
.dx-nav a.on{color:var(--brand-700);background:var(--brand-50)}
.dx-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.dx-tr{margin-left:auto;display:flex;align-items:center;gap:10px}
.dx-search{display:flex;align-items:center;gap:9px;color:var(--muted-2);background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:9px;font-size:13px;min-width:210px;cursor:pointer;text-decoration:none}
.dx-search kbd{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--muted)}
.dx-icon-btn{display:grid;place-items:center;width:38px;height:38px;background:var(--card);border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--muted)}
.dx-icon-btn:hover{color:var(--ink);border-color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;border-radius:9px;padding:9px 15px;cursor:pointer;border:1px solid transparent;font-family:inherit;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.4)}
.btn-primary:hover{background:var(--brand-600);color:#fff}
.dx-top a:focus-visible,.dx-top button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
@media(max-width:820px){.dx-nav,.dx-search{display:none}}