:root {
  --ink: #17202b;
  --muted: #647181;
  --paper: #f7f8fa;
  --surface: #fff;
  --line: #dfe4ea;
  --soft: #eef1f5;
  --brand: #ee4338;
  --brand-dark: #bf2d27;
  --navy: #202b3a;
  --blue: #246bfd;
  --green: #078758;
  --amber: #aa6500;
  --purple: #6e4bcc;
  --code: #101722;
  --radius: 14px;
  --shadow: 0 16px 42px rgba(23, 32, 43, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: var(--blue); }
button, input, select { font: inherit; }
button { cursor: pointer; }
code, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
code { font-size: .9em; }
pre { margin: 0; white-space: pre; overflow: auto; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; z-index: 20; top: 0; height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
.brand img { width: 39px; height: 39px; object-fit: contain; }
.version { padding: 2px 7px; color: var(--brand-dark); background: #fff0ee; border: 1px solid #ffc8c3; border-radius: 99px; font-size: 10px; letter-spacing: .04em; }
.surface-switch { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.surface-switch a { padding: 7px 11px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.surface-switch a:hover, .surface-switch a.active { color: var(--ink); background: #fff; box-shadow: 0 2px 7px rgba(23,32,43,.09); }
.docs-shell { display: grid; grid-template-columns: 270px minmax(0, 1040px); gap: 42px; max-width: 1400px; margin: 0 auto; padding: 28px 34px 80px; }
.sidebar { position: sticky; top: 92px; height: calc(100vh - 116px); overflow: auto; padding: 2px 12px 24px 0; }
.sidebar-search { margin-bottom: 18px; }
.sidebar-search label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.sidebar-search input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
#search-count { display: block; min-height: 18px; padding-top: 4px; color: var(--muted); font-size: 11px; }
.sidebar nav a { display: block; margin: 1px 0; padding: 5px 9px; border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.35; text-decoration: none; }
.sidebar nav a:hover, .sidebar nav a.active { border-color: var(--brand); color: var(--ink); background: linear-gradient(90deg, #fff0ee, transparent); }
.nav-heading { margin: 17px 0 5px; padding: 0 9px; color: #9a6570; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.spec-links { display: flex; gap: 8px; margin: 20px 8px; }
.spec-links a { color: var(--blue); font-size: 11px; font-weight: 700; }
.docs-main { min-width: 0; }
.doc-section { margin: 0 0 34px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 3px 18px rgba(23,32,43,.025); scroll-margin-top: 82px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(290px, .7fr); gap: 45px; padding: 48px; overflow: hidden; background: radial-gradient(circle at 100% 0, #fff0ee 0, transparent 38%), #fff; }
.eyebrow { color: var(--brand-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 8px 0 16px; font-size: clamp(38px, 6vw, 64px); line-height: .98; letter-spacing: -.055em; }
h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 4px; font-size: 27px; line-height: 1.15; letter-spacing: -.03em; }
h3 { margin-bottom: 8px; font-size: 16px; letter-spacing: -.015em; }
.lead { max-width: 700px; margin-bottom: 0; color: #435164; font-size: 18px; line-height: 1.7; }
.hero-facts { display: flex; flex-direction: column; justify-content: center; }
.hero-facts div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.hero-facts span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-facts code, .hero-facts strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; }
.section-heading { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 26px; }
.section-heading > span { min-width: 36px; padding: 5px 0; border: 1px solid #ffc6c1; border-radius: 7px; color: var(--brand-dark); background: #fff5f4; font-size: 11px; font-weight: 800; text-align: center; }
.section-heading p { margin: 5px 0 0; color: var(--muted); }
.notice, .callout { margin: 0 0 30px; padding: 15px 18px; border: 1px solid #b9d1ff; border-radius: 10px; color: #294469; background: #f1f6ff; font-size: 14px; }
.privacy-notice { box-shadow: var(--shadow); }
.callout { margin: 22px 0 0; }
.callout.danger { border-color: #ffc3bd; color: #792d27; background: #fff2f0; }
.step-grid, .three-grid, .four-grid { display: grid; gap: 14px; }
.step-grid, .three-grid { grid-template-columns: repeat(3, 1fr); }
.four-grid { grid-template-columns: repeat(2, 1fr); }
.step-grid article, .three-grid article, .four-grid article { position: relative; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.step-grid b { position: absolute; top: 14px; right: 16px; color: #e6b4b0; font-size: 25px; }
.step-grid p, .three-grid p, .four-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.code-window { margin-top: 20px; overflow: hidden; border: 1px solid #263244; border-radius: 12px; background: var(--code); box-shadow: 0 15px 40px rgba(16,23,34,.14); }
.code-tabs { display: flex; gap: 3px; padding: 7px; border-bottom: 1px solid #273142; background: #192231; }
.code-tabs button { padding: 6px 11px; border: 0; border-radius: 6px; color: #8ea0b6; background: transparent; font-size: 12px; }
.code-tabs button.active { color: #fff; background: #344153; }
.code-window pre { min-height: 185px; padding: 20px; color: #c8d6e7; font-size: 12px; line-height: 1.7; }
.endpoint-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.endpoint-summary-grid div { display: grid; grid-template-columns: 42px 1fr; gap: 4px 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; }
.endpoint-summary-grid code { grid-row: 1 / 3; color: var(--green); font-size: 11px; font-weight: 800; }
.endpoint-summary-grid span { overflow-wrap: anywhere; font-family: monospace; font-size: 12px; }
.endpoint-summary-grid small { color: var(--muted); }
.two-column, .schema-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel, .schema-pair > div { padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.panel p { color: var(--muted); font-size: 14px; }
label { color: #445063; font-size: 13px; font-weight: 650; }
input:not([type="checkbox"]):not([type="range"]), select { width: 100%; margin: 5px 0 12px; padding: 9px 10px; border: 1px solid #cbd3dd; border-radius: 8px; color: var(--ink); background: #fff; }
.panel pre, .schema-pair pre, #webhook-body { margin-top: 14px; padding: 16px; border-radius: 8px; color: #bed0e6; background: var(--code); font-size: 11px; line-height: 1.65; }
.check-list { padding-left: 0; list-style: none; }
.check-list li { position: relative; margin: 9px 0; padding-left: 24px; color: #465467; font-size: 14px; }
.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--green); font-weight: 900; }
.privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.privacy-grid article { padding: 20px; border-radius: 11px; }
.privacy-grid ul { margin: 0; padding-left: 19px; font-size: 14px; }
.privacy-grid li { margin: 7px 0; }
.privacy-grid .allowed { border: 1px solid #a9e0c9; background: #f0fbf6; }
.privacy-grid .blocked { border: 1px solid #ffc6c0; background: #fff4f2; }
.action { padding: 8px 13px; border: 1px solid var(--brand); border-radius: 8px; color: #fff; background: var(--brand); font-size: 12px; font-weight: 750; }
.action:hover { background: var(--brand-dark); }
.action.secondary { border-color: #c8d0da; color: #425064; background: #fff; }
.action.secondary:hover { border-color: #9ba8b7; background: #f4f6f8; }
.demo-section { overflow: hidden; background: linear-gradient(150deg, #fff 0, #fff 74%, #fff8f7 100%); }
.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.demo-toolbar label { display: flex; align-items: center; gap: 7px; }
.demo-toolbar select, .demo-toolbar input:not([type="checkbox"]) { width: auto; min-width: 150px; margin: 0; }
.demo-toolbar > span { color: var(--muted); font-size: 12px; }
.chart-frame { position: relative; height: 390px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 12px 3px 22px; }
.range-row label { display: grid; grid-template-columns: 35px 1fr; align-items: center; }
.range-row input { width: 100%; }
.mini-list { min-height: 185px; }
.mini-list button { display: grid; grid-template-columns: 1fr auto; width: 100%; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.mini-list button.active { color: var(--brand-dark); font-weight: 750; }
.mini-list small { color: var(--muted); }
#cursor-preview { color: var(--muted); overflow-wrap: anywhere; }
.tree-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 7px 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tree-item b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--blue); background: #edf3ff; }
.tree-item small { color: var(--muted); }
.tree-item button { border: 0; color: var(--brand-dark); background: transparent; }
.job-state { display: grid; grid-template-columns: 14px 1fr; gap: 1px 9px; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.job-state span { grid-row: 1 / 3; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: #9aa6b4; }
.job-state small { color: var(--muted); }
.job-state.working span { background: var(--amber); animation: pulse 1s infinite; }
.job-state.done span { background: var(--green); }
@keyframes pulse { 50% { opacity: .3; } }
.import-profile { position: relative; height: 230px; overflow: hidden; border: 1px solid #cdd6e1; border-radius: 11px; background: linear-gradient(#f8fbff, #fff); touch-action: none; }
.import-profile svg { width: 100%; height: 180px; }
#profile-area { fill: rgba(36,107,253,.08); }
#profile-line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.import-marker { position: absolute; top: 0; bottom: 0; width: 2px; border: 0; padding: 0; color: var(--brand-dark); background: var(--brand); cursor: ew-resize; }
.import-marker::before { position: absolute; top: 8px; left: -11px; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; content: ""; background: currentColor; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.import-marker::after { position: absolute; top: 37px; left: -29px; width: 60px; content: attr(data-label); color: var(--ink); font-size: 10px; text-align: center; }
.import-marker.skipped { opacity: .3; }
.hint { color: var(--muted); font-size: 13px; }
.selection-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.selection-row code { color: var(--purple); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
td.yes { color: var(--green); font-weight: 800; } td.no { color: var(--brand-dark); font-weight: 800; }
.qukosim-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; }
.sim-stage { position: relative; min-height: 450px; overflow: hidden; border-radius: 12px; background: #07131f; }
#qukosim-canvas { display: block; width: 100%; height: 450px; }
.sim-badge { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #dceaff; background: rgba(7,19,31,.72); font-size: 10px; }
.sim-controls { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; }
.sim-controls label { display: block; margin-bottom: 15px; }
.sim-controls input { width: 100%; }.sim-controls p { margin-top: 15px; color: var(--muted); font-size: 12px; }
.reference-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.method-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.method-filters button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; font-size: 11px; font-weight: 800; }
.method-filters button.active { border-color: var(--navy); color: #fff; background: var(--navy); }
.endpoint-group { margin: 24px 0; }
.endpoint-group > h3 { position: sticky; z-index: 2; top: 66px; margin: 0; padding: 11px 0 9px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); font-size: 19px; }
.operation { margin: 10px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.operation[hidden], .endpoint-group[hidden] { display: none; }
.operation summary { display: grid; grid-template-columns: 62px minmax(210px, .9fr) minmax(220px, 1.1fr) auto; gap: 12px; align-items: center; padding: 14px; cursor: pointer; list-style: none; }
.operation summary::-webkit-details-marker { display: none; }
.operation summary::after { content: "+"; color: #9aa5b3; font-size: 19px; }
.operation[open] summary::after { content: "−"; }
.operation-path { overflow-wrap: anywhere; font-family: monospace; font-size: 12px; font-weight: 700; }
.operation-summary { color: #4b596b; font-size: 13px; }
.method-badge, .surface-badge, .scope-badge { display: inline-block; width: fit-content; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.method-badge.get { color: #006b46; background: #dff7ed; }.method-badge.post { color: #174fa6; background: #e5efff; }.method-badge.patch { color: #865200; background: #fff2d8; }.method-badge.delete { color: #9e2c25; background: #ffe7e4; }
.operation-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.operation-body > p { margin: 16px 0; color: var(--muted); font-size: 13px; white-space: pre-line; }
.operation-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0; }
.surface-badge { color: #70461c; background: #fff0db; }.scope-badge { color: #4d3b8b; background: #eee9ff; text-transform: none; }
.param-table { margin: 12px 0; }
.required { color: var(--brand-dark); font-weight: 800; }
.operation .code-window { margin-top: 14px; }
.operation .code-window pre { min-height: 220px; max-height: 430px; }
.schema-preview { margin-top: 12px; }
.schema-preview summary { display: block; padding: 7px 0; color: var(--blue); font-size: 12px; }
.schema-preview pre { max-height: 300px; padding: 14px; border-radius: 8px; color: #bed0e6; background: var(--code); font-size: 11px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 30px 5px; color: var(--muted); font-size: 13px; }
footer p { margin: 3px 0; } footer div:last-child { display: flex; flex-wrap: wrap; gap: 15px; }
@media (max-width: 1050px) { .docs-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 20px 70px; }.hero { grid-template-columns: 1fr; }.operation summary { grid-template-columns: 58px 1fr auto; }.operation-summary { grid-column: 2 / 3; }.qukosim-layout { grid-template-columns: 1fr; }.sim-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 760px) { html { scroll-padding-top: 122px; }.site-header { height: auto; min-height: 66px; padding: 9px 14px; align-items: flex-start; flex-direction: column; }.surface-switch { width: 100%; overflow-x: auto; }.surface-switch a { white-space: nowrap; }.docs-shell { display: block; padding: 16px 11px 50px; }.sidebar { position: static; height: auto; padding: 0 0 16px; }.sidebar nav { display: none; }.spec-links { margin: 8px 0; }.doc-section { padding: 24px 17px; margin-bottom: 18px; }.hero { padding: 28px 21px; gap: 22px; }.lead { font-size: 16px; }.step-grid, .three-grid, .four-grid, .two-column, .schema-pair, .privacy-grid, .endpoint-summary-grid { grid-template-columns: 1fr; }.chart-frame { height: 300px; }.qukosim-layout { grid-template-columns: 1fr; }.sim-controls { display: block; }.operation summary { grid-template-columns: 54px 1fr auto; gap: 8px; }.operation-summary { grid-column: 1 / 4; }.range-row { grid-template-columns: 1fr; }.reference-toolbar, footer { flex-direction: column; }.section-heading { gap: 10px; }.section-heading > span { min-width: 31px; }.brand img { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ── Dark theme: same palette as the dashboard (base.html) ────────────────── */
:root { --ink: #e2e8f0; --muted: #94a3b8; --paper: #2e3744; --surface: #394252; --raised: #414d5e; --line: #516074; --soft: #414d5e; --blue: #7db1ff; --green: #4ade80; --amber: #fbbf24; --purple: #c1b0ff; --brand-dark: #ff8a80; --code: #1f2733; --navy: #516074; --shadow: 0 16px 42px rgba(0,0,0,.28); color-scheme: dark; }
.site-header { background: rgba(46,55,68,.94); }
.version { background: rgba(244,66,54,.16); border-color: rgba(244,66,54,.45); }
.surface-switch a:hover, .surface-switch a.active { background: var(--surface); box-shadow: 0 2px 7px rgba(0,0,0,.25); }
.sidebar-search input, input:not([type="checkbox"]):not([type="range"]), select { border-color: var(--line); background: var(--paper); color: var(--ink); }
.sidebar nav a:hover, .sidebar nav a.active { background: linear-gradient(90deg, rgba(244,66,54,.18), transparent); }
.nav-heading { color: #d29aa1; }
.doc-section { box-shadow: none; }
.hero { background: radial-gradient(circle at 100% 0, rgba(244,66,54,.22) 0, transparent 40%), var(--surface); }
.lead, label, .operation-summary, .check-list li { color: #c5d0de; }
.section-heading > span { border-color: rgba(244,66,54,.5); background: rgba(244,66,54,.14); }
.notice, .callout { border-color: rgba(56,189,248,.4); color: #cfe6f7; background: rgba(56,189,248,.1); }
.callout.danger { border-color: rgba(244,66,54,.5); color: #ffd0cc; background: rgba(244,66,54,.12); }
.step-grid article, .three-grid article, .four-grid article, .panel, .schema-pair > div, .sim-controls { background: var(--raised); }
.step-grid b { color: rgba(244,66,54,.45); }
.privacy-grid .allowed { border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.09); }
.privacy-grid .blocked { border-color: rgba(244,66,54,.45); background: rgba(244,66,54,.1); }
.action.secondary { border-color: var(--line); color: var(--ink); background: var(--raised); }
.action.secondary:hover { border-color: var(--muted); background: var(--surface); }
.demo-section { background: var(--surface); }
.tree-item, .job-state, .method-filters button, .operation { background: var(--raised); }
.tree-item b { color: var(--blue); background: rgba(125,177,255,.15); }
.job-state span { background: var(--muted); }
.endpoint-group > h3 { background: rgba(46,55,68,.96); }
.code-window, .panel pre, .schema-pair pre, #webhook-body, .schema-preview pre { border-color: #2b3646; }
.method-badge.get { color: #7cf0b6; background: rgba(74,222,128,.14); }.method-badge.post { color: #9fc5ff; background: rgba(125,177,255,.16); }.method-badge.patch { color: #fcd27a; background: rgba(251,191,36,.15); }.method-badge.delete { color: #ff9d95; background: rgba(244,66,54,.16); }
.surface-badge { color: #fcd27a; background: rgba(251,191,36,.14); }.scope-badge { color: #c1b0ff; background: rgba(193,176,255,.15); }
.method-filters button.active { border-color: var(--brand); background: var(--brand); }
.sim-stage { background: #e3f9fa; }
/* Charts keep a light plot area, as in Quko Cloud. */
.chart-frame, .import-chart { position: relative; height: 390px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.import-chart { margin-bottom: 12px; }
.training-card { display: grid; gap: 3px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--set-color); border-radius: 10px; background: var(--surface); font-size: 13px; }
.training-card[data-set] { cursor: pointer; }
.training-card.selected { box-shadow: 0 0 0 2px var(--set-color); }
.training-card.skipped { opacity: .5; }
.training-card code { color: var(--purple); }
.training-card small { color: var(--muted); }
.training-card label { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; }

/* ── Spacing pass: consistent vertical rhythm inside sections and panels ─────── */
.brand img { width: auto; height: 30px; padding: 3px 7px; border-radius: 8px; background: #fff; }
.doc-section > * + * { margin-top: 20px; }
.doc-section > .section-heading + *, .doc-section > h3 + *, .doc-section > h4 + * { margin-top: 0; }
.doc-section > h3 { margin-top: 32px; }
.doc-section > p { margin-bottom: 0; }
.doc-section > :last-child { margin-bottom: 0; }
.hero { padding: 48px; }
.hero-facts div:last-child { border-bottom: 0; }
.docs-shell { padding-bottom: 40px; }
.panel, .schema-pair > div { padding: 22px 24px; }
.panel > h3, .schema-pair > div > h3 { margin-bottom: 12px; }
.panel > :last-child, .schema-pair > div > :last-child { margin-bottom: 0; }
.panel > * + h3 { margin-top: 20px; }
.panel ol, .schema-pair ol { margin: 0; padding-left: 20px; font-size: 14px; color: #c5d0de; }
.panel li, .schema-pair li { margin: 7px 0; }
.step-grid article, .three-grid article, .four-grid article { padding: 22px 24px; }
.step-grid article h3, .three-grid article h3, .four-grid article h3 { margin-bottom: 8px; padding-right: 26px; }
.notice, .callout { padding: 16px 20px; line-height: 1.65; }
.code-window pre { min-height: 0; padding: 20px 22px; }
.operation .code-window pre { min-height: 0; }
.code-tabs { padding: 8px; }
.panel pre, .schema-pair pre { margin-top: 14px; padding: 16px 18px; }
pre:has(> code:empty), pre code:empty { display: none; }
pre:has(> code:empty) { display: none; }
#webhook-body { display: block; margin-top: 14px; padding: 16px 18px; overflow: auto; white-space: pre; border-radius: 8px; color: #bed0e6; background: var(--code); font-size: 11px; line-height: 1.65; }
.demo-toolbar { margin-bottom: 18px; gap: 10px 12px; }
.demo-toolbar > .action { margin: 0; }
.demo-toolbar + .chart-frame, .demo-toolbar + .import-chart { margin-top: 0; }
.import-chart { margin-bottom: 14px; }
#magnitude-tabs { margin: 18px 0 24px !important; }
.qukosim-layout { align-items: start; gap: 18px; }
.sim-controls { padding: 20px; }
.sim-controls label { margin-bottom: 16px; }
.sim-controls output { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.sim-controls select { margin: 6px 0 0; }
.sim-controls .action { margin-top: 2px; }
.sim-stage { margin: 0; }
.selection-row, .tree-item, .job-state { margin-bottom: 8px; }
.mini-list button { padding: 11px 6px; }
.endpoint-group > h3 { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(46,55,68,.96); }
.endpoint-group > h3 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.endpoint-group + .endpoint-group { margin-top: 30px; }
.reference-toolbar { margin-bottom: 22px; align-items: center; }
.operation summary { padding: 14px 18px; }
.operation-body { padding: 4px 22px 22px; }
.operation-meta { margin: 16px 0; }
.param-table { margin: 14px 0; }
.operation-body h4 { margin: 20px 0 8px; }
th:first-child, td:first-child { padding-left: 14px; }
.sidebar nav a { padding: 6px 12px; }
.nav-heading { margin: 22px 0 6px; padding: 0 12px; }
footer { margin-top: 10px; padding: 30px 8px 10px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .doc-section { padding: 24px 18px; }
  .hero { padding: 28px 22px; }
  .panel, .schema-pair > div { padding: 18px; }
  .operation summary { padding: 12px 14px; }
  .operation-body { padding: 2px 14px 18px; }
  .brand img { height: 26px; }
}
.panel, .schema-pair > div, .two-column > *, .step-grid > *, .three-grid > *, .four-grid > *, .privacy-grid > * { min-width: 0; }
@media (max-width: 760px) { .step-grid, .three-grid, .four-grid, .two-column, .schema-pair, .privacy-grid, .endpoint-summary-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .doc-section table { display: block; overflow-x: auto; } }