*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #000909;
  --bg2:        #0F1424;
  --bg3:        #1F2433;
  --border:     #333947;
  --border2:    #4A5160;
  --text:       #FFFFFF;
  --text2:      #D1D5DD;
  --text3:      #9BA1AE;
  --blue:       #2459FF;
  --blue-dim:   #5C84FF;
  --blue-bg:    #061338;
  --blue-bd:    #102B85;
  --green-bg:   #0f2212;
  --green-bd:   #24452a;
  --green-text: #6fdc7a;
  --amber-bg:   #241b08;
  --amber-bd:   #5b4310;
  --amber-text: #e3ac3f;
  --red-bg:     #261010;
  --red-bd:     #5a2424;
  --red-text:   #e06b6b;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --nav-w: 240px;
  --toc-w: 160px;
  --content-bleed: 14px;
}

html { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ── TOPNAV ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(10,10,10,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 22px; width: auto; }
.brand-sep { color: var(--border2); font-size: 20px; font-weight: 200; line-height: 1; }
.brand-label { font-size: 13px; color: var(--text3); font-weight: 400; }

.topnav-center {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  color: var(--text3); font-size: 12px;
  cursor: pointer; min-width: 220px;
  transition: border-color 0.15s;
  appearance: none; -webkit-appearance: none;
  text-align: left; font-family: var(--font);
}
.topnav-center:hover { border-color: var(--border2); }
.topnav-center svg { width: 13px; height: 13px; stroke: var(--text3); fill: none; flex-shrink: 0; }
.topnav-center kbd { margin-left: auto; font-size: 10px; color: var(--text3); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

.topnav-right { display: flex; align-items: center; gap: 8px; }
.env-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; color: var(--text2); cursor: pointer;
}
.env-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-text); flex-shrink: 0; }
.topnav-cta {
  background: var(--text); color: var(--bg);
  border: none; border-radius: 6px; padding: 6px 14px;
  font-size: 12px; font-weight: 500; font-family: var(--font);
  cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.topnav-cta:hover { opacity: 0.85; }

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr var(--toc-w);
  margin-top: 52px;
  min-height: calc(100vh - 52px);
}

/* ── SIDEBAR ── */
.sidebar {
  position: fixed; top: 52px; left: 0;
  width: var(--nav-w);
  height: calc(100vh - 52px);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 20px 0 40px;
  background: var(--bg);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.nav-group-label {
  padding: 14px 16px 5px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.09em;
}

.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 16px;
  color: var(--text2); font-size: 13px;
  cursor: pointer; transition: color 0.1s;
  border-left: 2px solid transparent;
  margin: 1px 0;
  user-select: none; text-decoration: none;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); background: var(--bg3); border-left-color: var(--blue-dim); }

.nav-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.nav-item.open .nav-chevron { transform: rotate(90deg); }

.nav-sub-wrap { overflow: hidden; max-height: 500px; transition: max-height 0.2s ease; }
.nav-sub-wrap.closed { max-height: 0; }

.nav-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 4px 28px;
  color: var(--text3); font-size: 12px;
  cursor: pointer; transition: color 0.1s;
  border-left: 2px solid transparent;
  margin: 1px 0;
}
.nav-sub:hover { color: var(--text2); }
.nav-sub.active { color: var(--text2); border-left-color: var(--blue-dim); }

.m-pill {
  font-size: 9px; font-weight: 600; font-family: var(--mono);
  padding: 1px 5px; border-radius: 10px; letter-spacing: 0.03em;
  flex-shrink: 0;
}
.mp-post  { background: var(--green-bg);  color: var(--green-text); border: 1px solid var(--green-bd); }
.mp-get   { background: var(--blue-bg);   color: #6688dd;           border: 1px solid var(--blue-bd); }
.mp-patch { background: var(--amber-bg);  color: var(--amber-text); border: 1px solid var(--amber-bd); }
.mp-del   { background: var(--red-bg);    color: var(--red-text);   border: 1px solid var(--red-bd); }

.method-pill {
  font-size: 10.5px; font-weight: 600; font-family: var(--mono);
  padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}
.method-pill.mp-post  { background: var(--green-bg);  color: var(--green-text); border: 1px solid var(--green-bd); }
.method-pill.mp-get   { background: var(--blue-bg);   color: #6688dd;           border: 1px solid var(--blue-bd); }
.method-pill.mp-patch { background: var(--amber-bg);  color: var(--amber-text); border: 1px solid var(--amber-bd); }
.method-pill.mp-del   { background: var(--red-bg);    color: var(--red-text);   border: 1px solid var(--red-bd); }

/* ── MAIN ── */
.main {
  grid-column: 2;
  padding: 48px 56px 96px;
  min-width: 0;
  margin-left: var(--nav-w);
  margin-right: var(--toc-w);
  max-width: 920px;
}

/* ── TOC ── */
.toc {
  position: fixed; top: 52px; right: 0;
  width: var(--toc-w);
  height: calc(100vh - 52px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding: 24px 16px 32px;
  background: var(--bg);
  scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc-heading { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text3); margin-bottom: 12px; }
.toc-link {
  display: block; padding: 3px 0 3px 10px;
  font-size: 12.5px;
  color: var(--text3);
  border-left: 1px solid var(--border);
  cursor: pointer; text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1.5; margin-bottom: 3px;
}
.toc-link:hover { color: var(--text2); border-left-color: var(--text3); }
.toc-link.active { color: var(--text2); border-left-color: var(--blue-dim); }

/* ── PAGE ── */
.page-eyebrow {
  font-size: 12.5px; color: var(--text2);
  font-family: var(--mono); letter-spacing: 0.02em; margin-bottom: 8px;
}
.page-title {
  font-size: 32px; font-weight: 600; color: var(--text);
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px;
}
.page-desc {
  font-size: 15px; color: var(--text2); line-height: 1.65;
  margin-bottom: 40px; font-weight: 400;
}

.section-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-link:hover { color: var(--blue-dim); text-decoration: none; }
.section-link::after { content: '→'; font-size: 12px; color: var(--text3); transition: transform 0.12s ease, color 0.12s ease; }
.section-link:hover::after { color: var(--blue-dim); transform: translateX(2px); }

.endpoint { font-family: var(--mono); font-size: 13px; color: var(--text); }

/* ── HEADINGS ── */
h2 {
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: -0.015em;
  margin: 48px 0 14px; padding-top: 40px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 68px;
}
h2:first-of-type, h2.no-border { border-top: none; padding-top: 0; margin-top: 0; }

h3 {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 28px 0 10px; scroll-margin-top: 68px;
  display: flex; align-items: center; gap: 8px;
}

p { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 20px; margin-bottom: 14px; }
li { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 4px; }

a { color: var(--blue-dim); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono); font-size: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; color: #b8c8e8;
}

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ── CODE BLOCK ── */
.cb { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 14px 0; background: var(--bg2); }
.cb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.cb-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text3); font-family: var(--mono); }
.cb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-post { background: var(--green-text); }
.dot-get  { background: #6688dd; }
.dot-ok   { background: var(--green-text); }
.dot-err  { background: var(--red-text); }
.dot-json { background: var(--text3); }
.dot-bash { background: #9b6dca; }

.cb-request .cb-header { background: linear-gradient(180deg, #1a1a1a 0%, #181818 100%) !important; }
.cb-response .cb-header { background: linear-gradient(180deg, #152017 0%, #121a14 100%) !important; border-bottom-color: #24452a !important; }
.cb-request pre { background: #070707 !important; }
.cb-response pre { background: #081009 !important; }
.cb-response { border-color: #24452a !important; }
.cb-request .cb-kind-badge { background: #20232a; color: #aeb7c6; border: 1px solid #313744; }
.cb-response .cb-kind-badge { background: #14311a; color: #7ee08b; border: 1px solid #2c5a35; }

.cb-kind { display: inline-flex; align-items: center; gap: 8px; }
.cb-kind-badge {
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.cb-request .cb-kind-badge { background: #20232a; color: #aeb7c6; border: 1px solid #313744; }
.cb-response .cb-kind-badge { background: #14311a; color: #7ee08b; border: 1px solid #2c5a35; }

.cb-tabs { display: flex; }
.cb-tab {
  padding: 8px 14px; font-size: 12px; color: var(--text3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.1s; margin-bottom: -1px;
}
.cb-tab:hover { color: var(--text2); }
.cb-tab.active { color: var(--text); border-bottom-color: var(--blue-dim); }
.cb-tab-panel { display: none; }
.cb-tab-panel.active { display: block; }

.cb-copy {
  width: 26px; height: 26px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s;
  flex-shrink: 0;
}
.cb-copy:hover { border-color: var(--border2); }
.cb-copy svg { width: 12px; height: 12px; stroke: var(--text3); fill: none; }

pre {
  background: #0d0d0d; padding: 16px;
  font-family: var(--mono); font-size: 12px; line-height: 1.85;
  overflow-x: auto; white-space: pre; margin: 0; color: #d8d8d8;
}

.tk { color: #7da4d8; }
.ts { color: #87c587; }
.tn { color: #e0a070; }
.tc { color: #7b8190; }
.tp { color: #9aa0ad; }
.tb { color: #9b6dca; }
.tf { color: #c586c0; }

/* ── STATUS BADGE ── */
.status { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.s200, .s201, .s204 { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-bd); }
.s401, .s403, .s404 { background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-bd); }
.s409, .s422 { background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber-bd); }
.s429, .s5xx { background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-bd); }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; margin: 14px 0; border-radius: 8px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1px solid var(--border); }
th { text-align: left; padding: 9px 14px; color: var(--text3); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
td { padding: 10px 14px; color: var(--text2); border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; }
tr:last-child td { border-bottom: none; }
td code { font-size: 11px; }
.req { color: var(--green-text); font-weight: 600; font-size: 11px; text-align: center; }
.opt { color: var(--text3); font-size: 11px; }

/* ── CALLOUT ── */
.callout {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 8px; padding: 14px 18px; margin: 14px 0;
  font-size: 13px; line-height: 1.65;
}
.callout-ico { flex-shrink: 0; margin-top: 1px; font-size: 12px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.callout.info { background: var(--blue-bg);  border: 1px solid #2459FF;  color: var(--blue-dim); }
.callout.warn   { background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber-text); }
.callout.danger { background: var(--red-bg);   border: 1px solid var(--red-bd);   color: var(--red-text); }
.callout.ok     { background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green-text); }
.callout.info .callout-ico { background: #102B85;  color: #2459FF; }
.callout.warn   .callout-ico { background: var(--amber-bd); color: var(--amber-text); }
.callout.danger .callout-ico { background: var(--red-bd);   color: var(--red-text); }
.callout.ok     .callout-ico { background: var(--green-bd); color: var(--green-text); }

/* ── STEP HEADER ── */
.step-row {
  display: flex; align-items: center; gap: 10px;
  margin: 40px 0 14px; padding-top: 36px;
  border-top: 1px solid var(--border);
}
.step-row:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2); flex-shrink: 0;
}
.step-title { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.step-method { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 7px; border-radius: 4px; }
.sm-post { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-bd); }
.sm-get  { background: var(--blue-bg);  color: #6688dd;           border: 1px solid var(--blue-bd); }
.step-endpoint code { font-size: 12.5px; padding: 2px 6px; }

/* ── QUICK LINKS ── */
.ql-grid { display: flex; flex-direction: column; margin: 0 0 32px; }
.ql-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border); border-bottom: none;
  cursor: pointer; transition: background 0.1s; text-decoration: none;
}
.ql-row:first-child { border-radius: 8px 8px 0 0; }
.ql-row:last-child  { border-bottom: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.ql-row:hover { background: var(--bg3); }
.ql-left { display: flex; align-items: center; gap: 12px; }
.ql-icon { width: 30px; height: 30px; background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ql-icon svg { width: 14px; height: 14px; stroke: var(--text3); fill: none; stroke-width: 1.2; }
.ql-text { font-size: 13px; color: var(--text2); }
.ql-arrow { color: var(--text3); font-size: 14px; }
.ql-row:hover .ql-arrow { color: var(--text2); }

/* ── CONN TREE ── */
.conn-tree {
  background: #080808; border: 1px solid var(--border);
  border-radius: 8px; padding: 18px 20px;
  font-family: var(--mono); font-size: 12.5px; line-height: 2;
  margin: 14px 0; white-space: pre;
  width: calc(100% + (var(--content-bleed) * 2));
  margin-left: calc(var(--content-bleed) * -1);
  margin-right: calc(var(--content-bleed) * -1);
}

/* ── ENV TABLE ── */
.env-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 14px 0; }
.env-row { display: flex; align-items: center; padding: 12px 16px; gap: 16px; border-bottom: 1px solid var(--border); }
.env-row:last-child { border-bottom: none; }
.env-name { font-size: 12px; color: var(--text2); font-weight: 500; min-width: 80px; }
.env-url  { font-size: 12px; color: var(--text); font-family: var(--mono); }

/* ── QUICKSTART STEPS ── */
.qs-steps { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.qs-step  { display: flex; gap: 16px; padding-bottom: 32px; position: relative; }
.qs-step:not(:last-child)::before {
  content: ''; position: absolute;
  left: 11px; top: 28px; bottom: 0;
  width: 1px; background: var(--border);
}
.qs-n {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2); flex-shrink: 0;
}
.qs-body { flex: 1; min-width: 0; }
.qs-body h3 { margin-top: 2px; }

/* ── CHECKLIST ── */
.checklist { list-style: none; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.checklist li:last-child { border-bottom: none; }
.check-box { width: 14px; height: 14px; border: 1px solid var(--border2); border-radius: 3px; flex-shrink: 0; margin-top: 2px; background: var(--bg3); }

/* ── SEARCH MODAL ── */
.search-modal { position: fixed; inset: 0; z-index: 500; display: none; }
.search-modal.open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
.search-dialog {
  position: relative; width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 760px); margin: 72px auto 0;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px; overflow: hidden;
}
.search-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.search-icon { width: 16px; height: 16px; stroke: var(--text3); fill: none; flex-shrink: 0; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; font-family: var(--font); }
.search-input::placeholder { color: var(--text3); }
.search-close { appearance: none; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-family: var(--mono); cursor: pointer; }
.search-body { max-height: min(56vh, 540px); overflow-y: auto; padding: 8px; }
.search-empty { padding: 28px 18px; color: var(--text3); font-size: 13px; }
.search-group { padding: 6px 0 2px; }
.search-group-label { padding: 8px 10px; color: var(--text3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.search-item {
  width: 100%; border: none; background: transparent; color: inherit;
  text-align: left; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.search-item:hover, .search-item.active { background: var(--bg3); }
.search-item-title { color: var(--text); font-size: 13px; font-weight: 500; }
.search-item-meta  { color: var(--text3); font-size: 11.5px; font-family: var(--mono); }
.search-item-snippet { grid-column: 1 / -1; color: var(--text2); font-size: 12.5px; line-height: 1.55; }
.search-item mark { background: transparent; color: var(--text); font-weight: 600; }
.search-footer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: var(--bg); color: var(--text3); font-size: 11px;
}
.search-footer kbd { font-size: 10px; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-right: 4px; }

/* ── LOADING ── */
.page-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--text3); font-size: 13px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ── PAGE NAV ── */
.page-nav {
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 12px; margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--border);
}
.page-nav-btn {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none; min-width: 180px; max-width: 48%;
  background: transparent; font-family: var(--font);
}
.page-nav-btn:hover { border-color: var(--border2); background: var(--bg3); text-decoration: none; }
.page-nav-btn.prev { align-items: flex-start; text-align: left; }
.page-nav-btn.next { margin-left: auto; align-items: flex-end; text-align: right; }
.page-nav-label {
  font-size: 12px; color: var(--text3);
  display: flex; align-items: center; gap: 5px;
}
.page-nav-btn.prev .page-nav-label::before { content: '←'; }
.page-nav-btn.next .page-nav-label::after  { content: '→'; }
.page-nav-title { font-size: 14px; font-weight: 500; color: var(--text2); line-height: 1.4; }
.page-nav-btn:hover .page-nav-title { color: var(--text); }

/* ── THEME TOGGLE ── */
.theme-toggle {
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--border2); }
.theme-toggle svg { width: 14px; height: 14px; stroke: var(--text3); }
.icon-sun  { display: none; }
.icon-moon { display: block; }
html.light .icon-sun  { display: block; }
html.light .icon-moon { display: none; }

/* ── LIGHT MODE ── */
html.light {
  --bg:         #FCFCFC;   /* surface/page */
  --bg2:        #FFFFFF;   /* surface/canvas */
  --bg3:        #F5F6F8;   /* surface/sunken — state/hover */
  --border:     #E8EAF0;   /* border/subtle */
  --border2:    #D1D5DD;   /* border/default */
  --text:       #000909;   /* text/primary */
  --text2:      #333947;   /* text/secondary */
  --text3:      #6B7280;   /* text/tertiary */
  --blue:       #2459FF;   /* brand/primary */
  --blue-dim:   #2459FF;   /* brand/primary */
  --blue-bg:    #EEF3FF;   /* surface/brand-subtle — state/selected */
  --blue-bd:    #B8CCFF;   /* blue/200 */
  --green-bg:   #E8FAE1;   /* status/success-subtle */
  --green-bd:   #5DD4A0;   /* status/success-border */
  --green-text: #0B6B3F;   /* status/success-text */
  --amber-bg:   #FFF7E6;   /* status/warning-subtle */
  --amber-bd:   #FFC75C;   /* status/warning-border */
  --amber-text: #8C5700;   /* status/warning-text */
  --red-bg:     #FFECEC;   /* status/danger-subtle */
  --red-bd:     #FF8585;   /* status/danger-border */
  --red-text:   #8E1419;   /* status/danger-text */
}

html.light body { color: var(--text); }

html.light .topnav {
  background: rgba(252,252,252,0.85);
  border-bottom-color: var(--border);
}

html.light pre { background: #F5F6F8; color: #000909; }
html.light .cb-request pre { background: #FFFFFF !important; color: #000909 !important; }
html.light .cb-response pre { background: #FFFFFF !important; color: #000909 !important; }
html.light .cb-request .cb-header { background: linear-gradient(180deg, #dde4f2 0%, #d8dfee 100%) !important; }
html.light .cb-response .cb-header { background: linear-gradient(180deg, #e8f7ef 0%, #e2f4ea 100%) !important; }
html.light .cb-response { border-color: var(--green-bd) !important; }

html.light code { background: var(--blue-bg); border-color: var(--blue-bd); color: #2459FF; }

html.light .nav-item.active { background: var(--blue-bg); border-left-color: #2459FF; color: #2459FF; }
html.light .nav-sub.active  { border-left-color: #2459FF; color: #2459FF; }
html.light .toc-link.active { border-left-color: #2459FF; color: #2459FF; }

html.light .page-nav-btn:hover { background: var(--bg3); }

html.light .search-dialog { background: #FCFCFC; border-color: var(--border2); }
html.light .search-header { background: var(--bg3); }
html.light .search-item:hover,
html.light .search-item.active { background: var(--bg3); }

html.light .cb-request .cb-kind-badge { background: #dde4f2; color: #333947; border-color: var(--border2); }
html.light .cb-response .cb-kind-badge { background: #d4f0e2; color: #0B6B3F; border-color: var(--green-bd); }

html.light .stepper-item:hover .stepper-circle { background: #EEF3FF; border-color: #B8CCFF; color: #2459FF; }
html.light .stepper-item:hover .stepper-title { color: var(--text); }

html.light .flow-step:hover { background: #EEF3FF; border-color: #B8CCFF; }
html.light .flow-step:hover .flow-num  { color: #2459FF; }
html.light .flow-step:hover .flow-title { color: var(--text); }

html.light .profile-card-featured { background: #EEF3FF; border-color: #B8CCFF; }
html.light .profile-badge-blue { background: #EEF3FF; color: #2459FF; border-color: #B8CCFF; }

html.light .tk { color: #2459FF; }
html.light .ts { color: #0B6B3F; }
html.light .tn { color: #b05a00; }
html.light .tc { color: #5a6a8a; }
html.light .tp { color: #2a3a5a; }
html.light .tb { color: #6b2fa0; }
html.light .tf { color: #a0296e; }

html.light .callout.info { background: #EEF3FF; border: 1px solid #2459FF; color: #1538AD; }
html.light .callout.info .callout-ico { background: #9CDBFF; color: #175E94; }

html.light .theme-toggle { background: var(--bg3); border-color: var(--border); }
html.light .theme-toggle span { color: var(--text2); }

html.light .bp-row:hover { border-left-color: #2459FF; background: #EEF3FF; }
html.light .bp-num { background: #EEF3FF; border-color: #B8CCFF; color: #2459FF; }

.theme-toggle span { color: var(--text); font-size: 13px; line-height: 1; }

/* ── MOBILE ── */
.hamburger {
  display: none;
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.hamburger svg { width: 16px; height: 16px; stroke: var(--text2); fill: none; stroke-width: 1.5; stroke-linecap: round; }

.mobile-search {
  display: none;
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mobile-search svg { width: 14px; height: 14px; stroke: var(--text2); fill: none; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
  .hamburger      { display: flex; }
  .mobile-search  { display: flex; }
  .topnav-center  { display: none; }
  .topnav-cta     { display: none; }
  .env-pill       { display: none; }

  .topnav-right { gap: 8px; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-in*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #000909;
  --bg2:        #0F1424;
  --bg3:        #1F2433;
  --border:     #333947;
  --border2:    #4A5160;
  --text:       #FFFFFF;
  --text2:      #D1D5DD;
  --text3:      #9BA1AE;
  --blue:       #2459FF;
  --blue-dim:   #5C84FF;
  --blue-bg:    #061338;
  --blue-bd:    #102B85;
  --green-bg:   #0f2212;
  --green-bd:   #24452a;
  --green-text: #6fdc7a;
  --amber-bg:   #241b08;
  --amber-bd:   #5b4310;
  --amber-text: #e3ac3f;
  --red-bg:     #261010;
  --red-bd:     #5a2424;
  --red-text:   #e06b6b;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --nav-w: 240px;
  --toc-w: 160px;
  --content-bleed: 14px;
}

html { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ── TOPNAV ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(10,10,10,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 22px; width: auto; }
.brand-sep { color: var(--border2); font-size: 20px; font-weight: 200; line-height: 1; }
.brand-label { font-size: 13px; color: var(--text3); font-weight: 400; }

.topnav-center {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  color: var(--text3); font-size: 12px;
  cursor: pointer; min-width: 220px;
  transition: border-color 0.15s;
  appearance: none; -webkit-appearance: none;
  text-align: left; font-family: var(--font);
}
.topnav-center:hover { border-color: var(--border2); }
.topnav-center svg { width: 13px; height: 13px; stroke: var(--text3); fill: none; flex-shrink: 0; }
.topnav-center kbd { margin-left: auto; font-size: 10px; color: var(--text3); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

.topnav-right { display: flex; align-items: center; gap: 8px; }
.env-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; color: var(--text2); cursor: pointer;
}
.env-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-text); flex-shrink: 0; }
.topnav-cta {
  background: var(--text); color: var(--bg);
  border: none; border-radius: 6px; padding: 6px 14px;
  font-size: 12px; font-weight: 500; font-family: var(--font);
  cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.topnav-cta:hover { opacity: 0.85; }

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: var(--nav-w) 1fr var(--toc-w);
  margin-top: 52px;
  min-height: calc(100vh - 52px);
}

/* ── SIDEBAR ── */
.sidebar {
  position: fixed; top: 52px; left: 0;
  width: var(--nav-w);
  height: calc(100vh - 52px);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 20px 0 40px;
  background: var(--bg);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.nav-group-label {
  padding: 14px 16px 5px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.09em;
}

.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 16px;
  color: var(--text2); font-size: 13px;
  cursor: pointer; transition: color 0.1s;
  border-left: 2px solid transparent;
  margin: 1px 0;
  user-select: none; text-decoration: none;
}
.nav-item:hover { color: var(--text); }
.nav-item.active { color: var(--text); background: var(--bg3); border-left-color: var(--blue-dim); }

.nav-chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.15s; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.nav-item.open .nav-chevron { transform: rotate(90deg); }

.nav-sub-wrap { overflow: hidden; max-height: 500px; transition: max-height 0.2s ease; }
.nav-sub-wrap.closed { max-height: 0; }

.nav-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 16px 4px 28px;
  color: var(--text3); font-size: 12px;
  cursor: pointer; transition: color 0.1s;
  border-left: 2px solid transparent;
  margin: 1px 0;
}
.nav-sub:hover { color: var(--text2); }
.nav-sub.active { color: var(--text2); border-left-color: var(--blue-dim); }

.m-pill {
  font-size: 9px; font-weight: 600; font-family: var(--mono);
  padding: 1px 5px; border-radius: 10px; letter-spacing: 0.03em;
  flex-shrink: 0;
}
.mp-post  { background: var(--green-bg);  color: var(--green-text); border: 1px solid var(--green-bd); }
.mp-get   { background: var(--blue-bg);   color: #6688dd;           border: 1px solid var(--blue-bd); }
.mp-patch { background: var(--amber-bg);  color: var(--amber-text); border: 1px solid var(--amber-bd); }
.mp-del   { background: var(--red-bg);    color: var(--red-text);   border: 1px solid var(--red-bd); }

.method-pill {
  font-size: 10.5px; font-weight: 600; font-family: var(--mono);
  padding: 2px 7px; border-radius: 4px; margin-right: 6px;
}
.method-pill.mp-post  { background: var(--green-bg);  color: var(--green-text); border: 1px solid var(--green-bd); }
.method-pill.mp-get   { background: var(--blue-bg);   color: #6688dd;           border: 1px solid var(--blue-bd); }
.method-pill.mp-patch { background: var(--amber-bg);  color: var(--amber-text); border: 1px solid var(--amber-bd); }
.method-pill.mp-del   { background: var(--red-bg);    color: var(--red-text);   border: 1px solid var(--red-bd); }

/* ── MAIN ── */
.main {
  grid-column: 2;
  padding: 48px 56px 96px;
  min-width: 0;
  margin-left: var(--nav-w);
  margin-right: var(--toc-w);
  max-width: 920px;
}

/* ── TOC ── */
.toc {
  position: fixed; top: 52px; right: 0;
  width: var(--toc-w);
  height: calc(100vh - 52px);
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding: 24px 16px 32px;
  background: var(--bg);
  scrollbar-width: none;
}
.toc::-webkit-scrollbar { display: none; }
.toc-heading { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text3); margin-bottom: 12px; }
.toc-link {
  display: block; padding: 3px 0 3px 10px;
  font-size: 12.5px;
  color: var(--text3);
  border-left: 1px solid var(--border);
  cursor: pointer; text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
  line-height: 1.5; margin-bottom: 3px;
}
.toc-link:hover { color: var(--text2); border-left-color: var(--text3); }
.toc-link.active { color: var(--text2); border-left-color: var(--blue-dim); }

/* ── PAGE ── */
.page-eyebrow {
  font-size: 12.5px; color: var(--text2);
  font-family: var(--mono); letter-spacing: 0.02em; margin-bottom: 8px;
}
.page-title {
  font-size: 32px; font-weight: 600; color: var(--text);
  letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px;
}
.page-desc {
  font-size: 15px; color: var(--text2); line-height: 1.65;
  margin-bottom: 40px; font-weight: 400;
}

.section-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-link:hover { color: var(--blue-dim); text-decoration: none; }
.section-link::after { content: '→'; font-size: 12px; color: var(--text3); transition: transform 0.12s ease, color 0.12s ease; }
.section-link:hover::after { color: var(--blue-dim); transform: translateX(2px); }

.endpoint { font-family: var(--mono); font-size: 13px; color: var(--text); }

/* ── HEADINGS ── */
h2 {
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: -0.015em;
  margin: 48px 0 14px; padding-top: 40px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 68px;
}
h2:first-of-type, h2.no-border { border-top: none; padding-top: 0; margin-top: 0; }

h3 {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 28px 0 10px; scroll-margin-top: 68px;
  display: flex; align-items: center; gap: 8px;
}

p { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 20px; margin-bottom: 14px; }
li { font-size: 14px; color: var(--text2); line-height: 1.75; margin-bottom: 4px; }

a { color: var(--blue-dim); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--mono); font-size: 12px;
  background: var(--bg3); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: 4px; color: #b8c8e8;
}

hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* ── CODE BLOCK ── */
.cb { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 14px 0; background: var(--bg2); }
.cb-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.cb-label { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text3); font-family: var(--mono); }
.cb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-post { background: var(--green-text); }
.dot-get  { background: #6688dd; }
.dot-ok   { background: var(--green-text); }
.dot-err  { background: var(--red-text); }
.dot-json { background: var(--text3); }
.dot-bash { background: #9b6dca; }

.cb-request .cb-header { background: linear-gradient(180deg, #1a1a1a 0%, #181818 100%) !important; }
.cb-response .cb-header { background: linear-gradient(180deg, #152017 0%, #121a14 100%) !important; border-bottom-color: #24452a !important; }
.cb-request pre { background: #070707 !important; }
.cb-response pre { background: #081009 !important; }
.cb-response { border-color: #24452a !important; }
.cb-request .cb-kind-badge { background: #20232a; color: #aeb7c6; border: 1px solid #313744; }
.cb-response .cb-kind-badge { background: #14311a; color: #7ee08b; border: 1px solid #2c5a35; }

.cb-kind { display: inline-flex; align-items: center; gap: 8px; }
.cb-kind-badge {
  font-size: 10px; font-weight: 700; font-family: var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
}
.cb-request .cb-kind-badge { background: #20232a; color: #aeb7c6; border: 1px solid #313744; }
.cb-response .cb-kind-badge { background: #14311a; color: #7ee08b; border: 1px solid #2c5a35; }

.cb-tabs { display: flex; }
.cb-tab {
  padding: 8px 14px; font-size: 12px; color: var(--text3);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.1s; margin-bottom: -1px;
}
.cb-tab:hover { color: var(--text2); }
.cb-tab.active { color: var(--text); border-bottom-color: var(--blue-dim); }
.cb-tab-panel { display: none; }
.cb-tab-panel.active { display: block; }

.cb-copy {
  width: 26px; height: 26px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 5px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s;
  flex-shrink: 0;
}
.cb-copy:hover { border-color: var(--border2); }
.cb-copy svg { width: 12px; height: 12px; stroke: var(--text3); fill: none; }

pre {
  background: #0d0d0d; padding: 16px;
  font-family: var(--mono); font-size: 12px; line-height: 1.85;
  overflow-x: auto; white-space: pre; margin: 0; color: #d8d8d8;
}

.tk { color: #7da4d8; }
.ts { color: #87c587; }
.tn { color: #e0a070; }
.tc { color: #7b8190; }
.tp { color: #9aa0ad; }
.tb { color: #9b6dca; }
.tf { color: #c586c0; }

/* ── STATUS BADGE ── */
.status { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.s200, .s201, .s204 { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-bd); }
.s401, .s403, .s404 { background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-bd); }
.s409, .s422 { background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber-bd); }
.s429, .s5xx { background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-bd); }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; margin: 14px 0; border-radius: 8px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { border-bottom: 1px solid var(--border); }
th { text-align: left; padding: 9px 14px; color: var(--text3); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
td { padding: 10px 14px; color: var(--text2); border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; }
tr:last-child td { border-bottom: none; }
td code { font-size: 11px; }
.req { color: var(--green-text); font-weight: 600; font-size: 11px; text-align: center; }
.opt { color: var(--text3); font-size: 11px; }

/* ── CALLOUT ── */
.callout {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 8px; padding: 14px 18px; margin: 14px 0;
  font-size: 13px; line-height: 1.65;
}
.callout-ico { flex-shrink: 0; margin-top: 1px; font-size: 12px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.callout.info { background: var(--blue-bg);  border: 1px solid #2459FF;  color: var(--blue-dim); }
.callout.warn   { background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--amber-text); }
.callout.danger { background: var(--red-bg);   border: 1px solid var(--red-bd);   color: var(--red-text); }
.callout.ok     { background: var(--green-bg); border: 1px solid var(--green-bd); color: var(--green-text); }
.callout.info .callout-ico { background: #102B85;  color: #2459FF; }
.callout.warn   .callout-ico { background: var(--amber-bd); color: var(--amber-text); }
.callout.danger .callout-ico { background: var(--red-bd);   color: var(--red-text); }
.callout.ok     .callout-ico { background: var(--green-bd); color: var(--green-text); }

/* ── STEP HEADER ── */
.step-row {
  display: flex; align-items: center; gap: 10px;
  margin: 40px 0 14px; padding-top: 36px;
  border-top: 1px solid var(--border);
}
.step-row:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2); flex-shrink: 0;
}
.step-title { font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.step-method { font-size: 10px; font-weight: 600; font-family: var(--mono); padding: 2px 7px; border-radius: 4px; }
.sm-post { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-bd); }
.sm-get  { background: var(--blue-bg);  color: #6688dd;           border: 1px solid var(--blue-bd); }
.step-endpoint code { font-size: 12.5px; padding: 2px 6px; }

/* ── QUICK LINKS ── */
.ql-grid { display: flex; flex-direction: column; margin: 0 0 32px; }
.ql-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid var(--border); border-bottom: none;
  cursor: pointer; transition: background 0.1s; text-decoration: none;
}
.ql-row:first-child { border-radius: 8px 8px 0 0; }
.ql-row:last-child  { border-bottom: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.ql-row:hover { background: var(--bg3); }
.ql-left { display: flex; align-items: center; gap: 12px; }
.ql-icon { width: 30px; height: 30px; background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ql-icon svg { width: 14px; height: 14px; stroke: var(--text3); fill: none; stroke-width: 1.2; }
.ql-text { font-size: 13px; color: var(--text2); }
.ql-arrow { color: var(--text3); font-size: 14px; }
.ql-row:hover .ql-arrow { color: var(--text2); }

/* ── CONN TREE ── */
.conn-tree {
  background: #080808; border: 1px solid var(--border);
  border-radius: 8px; padding: 18px 20px;
  font-family: var(--mono); font-size: 12.5px; line-height: 2;
  margin: 14px 0; white-space: pre;
  width: calc(100% + (var(--content-bleed) * 2));
  margin-left: calc(var(--content-bleed) * -1);
  margin-right: calc(var(--content-bleed) * -1);
}

/* ── ENV TABLE ── */
.env-table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin: 14px 0; }
.env-row { display: flex; align-items: center; padding: 12px 16px; gap: 16px; border-bottom: 1px solid var(--border); }
.env-row:last-child { border-bottom: none; }
.env-name { font-size: 12px; color: var(--text2); font-weight: 500; min-width: 80px; }
.env-url  { font-size: 12px; color: var(--text); font-family: var(--mono); }

/* ── QUICKSTART STEPS ── */
.qs-steps { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.qs-step  { display: flex; gap: 16px; padding-bottom: 32px; position: relative; }
.qs-step:not(:last-child)::before {
  content: ''; position: absolute;
  left: 11px; top: 28px; bottom: 0;
  width: 1px; background: var(--border);
}
.qs-n {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text2); flex-shrink: 0;
}
.qs-body { flex: 1; min-width: 0; }
.qs-body h3 { margin-top: 2px; }

/* ── CHECKLIST ── */
.checklist { list-style: none; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.checklist li:last-child { border-bottom: none; }
.check-box { width: 14px; height: 14px; border: 1px solid var(--border2); border-radius: 3px; flex-shrink: 0; margin-top: 2px; background: var(--bg3); }

/* ── SEARCH MODAL ── */
.search-modal { position: fixed; inset: 0; z-index: 500; display: none; }
.search-modal.open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
.search-dialog {
  position: relative; width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 760px); margin: 72px auto 0;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 14px; overflow: hidden;
}
.search-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.search-icon { width: 16px; height: 16px; stroke: var(--text3); fill: none; flex-shrink: 0; }
.search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; font-family: var(--font); }
.search-input::placeholder { color: var(--text3); }
.search-close { appearance: none; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 6px; padding: 5px 8px; font-size: 11px; font-family: var(--mono); cursor: pointer; }
.search-body { max-height: min(56vh, 540px); overflow-y: auto; padding: 8px; }
.search-empty { padding: 28px 18px; color: var(--text3); font-size: 13px; }
.search-group { padding: 6px 0 2px; }
.search-group-label { padding: 8px 10px; color: var(--text3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.search-item {
  width: 100%; border: none; background: transparent; color: inherit;
  text-align: left; border-radius: 10px; padding: 10px 12px; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.search-item:hover, .search-item.active { background: var(--bg3); }
.search-item-title { color: var(--text); font-size: 13px; font-weight: 500; }
.search-item-meta  { color: var(--text3); font-size: 11.5px; font-family: var(--mono); }
.search-item-snippet { grid-column: 1 / -1; color: var(--text2); font-size: 12.5px; line-height: 1.55; }
.search-item mark { background: transparent; color: var(--text); font-weight: 600; }
.search-footer {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: var(--bg); color: var(--text3); font-size: 11px;
}
.search-footer kbd { font-size: 10px; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; margin-right: 4px; }

/* ── LOADING ── */
.page-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--text3); font-size: 13px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

/* ── PAGE NAV ── */
.page-nav {
  display: flex; justify-content: space-between; align-items: stretch;
  gap: 12px; margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--border);
}
.page-nav-btn {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px; border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-decoration: none; min-width: 180px; max-width: 48%;
  background: transparent; font-family: var(--font);
}
.page-nav-btn:hover { border-color: var(--border2); background: var(--bg3); text-decoration: none; }
.page-nav-btn.prev { align-items: flex-start; text-align: left; }
.page-nav-btn.next { margin-left: auto; align-items: flex-end; text-align: right; }
.page-nav-label {
  font-size: 12px; color: var(--text3);
  display: flex; align-items: center; gap: 5px;
}
.page-nav-btn.prev .page-nav-label::before { content: '←'; }
.page-nav-btn.next .page-nav-label::after  { content: '→'; }
.page-nav-title { font-size: 14px; font-weight: 500; color: var(--text2); line-height: 1.4; }
.page-nav-btn:hover .page-nav-title { color: var(--text); }

/* ── THEME TOGGLE ── */
.theme-toggle {
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--border2); }
.theme-toggle svg { width: 14px; height: 14px; stroke: var(--text3); }
.icon-sun  { display: none; }
.icon-moon { display: block; }
html.light .icon-sun  { display: block; }
html.light .icon-moon { display: none; }

/* ── LIGHT MODE ── */
html.light {
  --bg:         #FCFCFC;   /* surface/page */
  --bg2:        #FFFFFF;   /* surface/canvas */
  --bg3:        #F5F6F8;   /* surface/sunken — state/hover */
  --border:     #E8EAF0;   /* border/subtle */
  --border2:    #D1D5DD;   /* border/default */
  --text:       #000909;   /* text/primary */
  --text2:      #333947;   /* text/secondary */
  --text3:      #6B7280;   /* text/tertiary */
  --blue:       #2459FF;   /* brand/primary */
  --blue-dim:   #2459FF;   /* brand/primary */
  --blue-bg:    #EEF3FF;   /* surface/brand-subtle — state/selected */
  --blue-bd:    #B8CCFF;   /* blue/200 */
  --green-bg:   #E8FAE1;   /* status/success-subtle */
  --green-bd:   #5DD4A0;   /* status/success-border */
  --green-text: #0B6B3F;   /* status/success-text */
  --amber-bg:   #FFF7E6;   /* status/warning-subtle */
  --amber-bd:   #FFC75C;   /* status/warning-border */
  --amber-text: #8C5700;   /* status/warning-text */
  --red-bg:     #FFECEC;   /* status/danger-subtle */
  --red-bd:     #FF8585;   /* status/danger-border */
  --red-text:   #8E1419;   /* status/danger-text */
}

html.light body { color: var(--text); }

html.light .topnav {
  background: rgba(252,252,252,0.85);
  border-bottom-color: var(--border);
}

html.light pre { background: #F5F6F8; color: #000909; }
html.light .cb-request pre { background: #FFFFFF !important; color: #000909 !important; }
html.light .cb-response pre { background: #FFFFFF !important; color: #000909 !important; }
html.light .cb-request .cb-header { background: linear-gradient(180deg, #dde4f2 0%, #d8dfee 100%) !important; }
html.light .cb-response .cb-header { background: linear-gradient(180deg, #e8f7ef 0%, #e2f4ea 100%) !important; }
html.light .cb-response { border-color: var(--green-bd) !important; }

html.light code { background: var(--blue-bg); border-color: var(--blue-bd); color: #2459FF; }

html.light .nav-item.active { background: var(--blue-bg); border-left-color: #2459FF; color: #2459FF; }
html.light .nav-sub.active  { border-left-color: #2459FF; color: #2459FF; }
html.light .toc-link.active { border-left-color: #2459FF; color: #2459FF; }

html.light .page-nav-btn:hover { background: var(--bg3); }

html.light .search-dialog { background: #FCFCFC; border-color: var(--border2); }
html.light .search-header { background: var(--bg3); }
html.light .search-item:hover,
html.light .search-item.active { background: var(--bg3); }

html.light .cb-request .cb-kind-badge { background: #dde4f2; color: #333947; border-color: var(--border2); }
html.light .cb-response .cb-kind-badge { background: #d4f0e2; color: #0B6B3F; border-color: var(--green-bd); }

html.light .stepper-item:hover .stepper-circle { background: #EEF3FF; border-color: #B8CCFF; color: #2459FF; }
html.light .stepper-item:hover .stepper-title { color: var(--text); }

html.light .flow-step:hover { background: #EEF3FF; border-color: #B8CCFF; }
html.light .flow-step:hover .flow-num  { color: #2459FF; }
html.light .flow-step:hover .flow-title { color: var(--text); }

html.light .profile-card-featured { background: #EEF3FF; border-color: #B8CCFF; }
html.light .profile-badge-blue { background: #EEF3FF; color: #2459FF; border-color: #B8CCFF; }

html.light .tk { color: #2459FF; }
html.light .ts { color: #0B6B3F; }
html.light .tn { color: #b05a00; }
html.light .tc { color: #5a6a8a; }
html.light .tp { color: #2a3a5a; }
html.light .tb { color: #6b2fa0; }
html.light .tf { color: #a0296e; }

html.light .callout.info { background: #EEF3FF; border: 1px solid #2459FF; color: #1538AD; }
html.light .callout.info .callout-ico { background: #9CDBFF; color: #175E94; }

html.light .theme-toggle { background: var(--bg3); border-color: var(--border); }
html.light .theme-toggle span { color: var(--text2); }

html.light .bp-row:hover { border-left-color: #2459FF; background: #EEF3FF; }
html.light .bp-num { background: #EEF3FF; border-color: #B8CCFF; color: #2459FF; }

.theme-toggle span { color: var(--text); font-size: 13px; line-height: 1; }

/* ── MOBILE ── */
.hamburger {
  display: none;
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.hamburger svg { width: 16px; height: 16px; stroke: var(--text2); fill: none; stroke-width: 1.5; stroke-linecap: round; }

.mobile-search {
  display: none;
  width: 32px; height: 32px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 6px; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.mobile-search svg { width: 14px; height: 14px; stroke: var(--text2); fill: none; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
  .hamburger      { display: flex; }
  .mobile-search  { display: flex; }
  .topnav-center  { display: none; }
  .topnav-cta     { display: none; }
  .env-pill       { display: none; }

  .topnav-right { gap: 8px; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 160;
    width: 280px;
  }
  .sidebar.open { transform: translateX(0); }

  .layout {
    grid-template-columns: 1fr;
    margin-top: 52px;
  }

  .main {
    margin-left: 0;
    margin-right: 0;
    padding: 28px 20px 80px;
    max-width: 100%;
  }

  .toc { display: none; }

  .stepper { overflow-x: auto; }
  .stepper-item { min-width: 80px; }

  .profile-grid { grid-template-columns: 1fr; }

  .page-nav { flex-direction: column; }
  .page-nav-btn { max-width: 100%; }
  .page-nav-btn.next { margin-left: 0; align-items: flex-start; text-align: left; }
  .page-nav-btn.next .page-nav-label::after  { content: '→'; }
  .page-nav-btn.prev .page-nav-label::before { content: '←'; }

  .cb-tabs { overflow-x: auto; }

  .step-row { flex-wrap: wrap; gap: 8px; }
  .step-endpoint { width: 100%; padding-left: 34px; }

  .table-wrap { font-size: 12px; }
}
dex: 160;
    width: 280px;
  }
  .sidebar.open { transform: translateX(0); }

  .layout {
    grid-template-columns: 1fr;
    margin-top: 52px;
  }

  .main {
    margin-left: 0;
    margin-right: 0;
    padding: 28px 20px 80px;
    max-width: 100%;
  }

  .toc { display: none; }

  .stepper { overflow-x: auto; }
  .stepper-item { min-width: 80px; }

  .profile-grid { grid-template-columns: 1fr; }

  .page-nav { flex-direction: column; }
  .page-nav-btn { max-width: 100%; }
  .page-nav-btn.next { margin-left: 0; align-items: flex-start; text-align: left; }
  .page-nav-btn.next .page-nav-label::after  { content: '→'; }
  .page-nav-btn.prev .page-nav-label::before { content: '←'; }

  .cb-tabs { overflow-x: auto; }

  .step-row { flex-wrap: wrap; gap: 8px; }
  .step-endpoint { width: 100%; padding-left: 34px; }

  .table-wrap { font-size: 12px; }
}