/* =========================================================
   Wylon Docs — Notion-style, three-column, card-based
   Reuses class names from the legacy shell; no HTML edits needed.
   ========================================================= */

@font-face {
  font-family: 'WylonBrand';
  src: url('assets/font/MuseoModerno-VariableFont_wght_modified.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette — matches wylon.css (light only here; docs are always light) */
  --bg:          #fafaf9;
  --bg-soft:     #f7f6f3;
  --bg-sunken:   #f1f0ed;
  --bg-code:     #f6f6f3;
  --card:        #fcfcfb;
  --line:        #ecebe6;
  --line-2:      #e4e3dd;
  --line-strong: #dcdad3;

  --ink:    #191919;
  --ink-2:  #2f2e2b;
  --mute:   #787572;
  --mute-2: #a9a6a0;

  --accent:       #2383e2;
  --accent-hover: #1a6dc2;
  --accent-soft:  #e7f3fb;
  --accent-ink:   #0b4d86;

  --green:   #4c8a5c;
  --orange:  #c5864f;
  --red:     #c05252;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(15,15,15,0.04);
  --shadow-md: 0 4px 12px rgba(15,15,15,0.05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--accent-ink); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* ---------- Top bar ---------- */
.docs-topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  /* Brand column matches docs-layout sidebar (260px) so the brand sits
     above the sidebar. Search lives in the 1fr column so its left edge
     lines up exactly with the content column. Nav auto-sizes so it
     never spills past the topbar edge. */
  grid-template-columns: 260px minmax(0, 1fr) auto;
  align-items: center;
  height: 56px;
  /* Align inner edges with .docs-layout (max-width 1380px + padding 24px) */
  padding-left: max(28px, calc(50% - 690px + 24px));
  padding-right: max(28px, calc(50% - 690px + 24px));
  background: rgba(250,250,249,0.85);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.docs-topbar .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'WylonBrand', 'Inter', sans-serif;
  font-weight: 600; letter-spacing: 0.02em;
  font-size: 22px;
  color: var(--ink);
  transition: opacity 150ms;
  font-feature-settings: normal;
  font-variant-ligatures: none;
  justify-self: start;
}
.docs-topbar .brand:hover { opacity: 0.78; }

.search {
  /* Sit in column 2, aligned with main content; cap width so the bar
     doesn't stretch absurdly on wide screens */
  width: 100%;
  max-width: 520px;
  position: relative;
  display: flex; align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color 120ms, box-shadow 120ms;
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35,131,226,0.15);
}
.search .sicon { color: var(--mute); font-size: 18px; margin-right: 6px; }
.search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 13.5px; color: var(--ink);
}
.search input::placeholder { color: var(--mute); }
.search .kbd {
  font-family: var(--mono); font-size: 11px;
  color: var(--mute);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.docs-topbar .nav {
  display: flex; align-items: center; gap: 4px;
  justify-self: end;
}
.docs-topbar .nav a {
  font-size: 13.5px; font-weight: 500;
  color: var(--mute); padding: 6px 10px;
  border-radius: 6px;
  transition: background 120ms, color 120ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.docs-topbar .nav a:hover { background: var(--bg-sunken); color: var(--ink); }
.docs-topbar .nav .lang-toggle,
.docs-topbar .nav .github-link {
  color: var(--mute);
}

@media (max-width: 1180px) {
  .docs-topbar { grid-template-columns: 240px minmax(0, 1fr) auto; }
}
@media (max-width: 820px) {
  .docs-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 0 16px;
  }
  .search { max-width: none; }
  .docs-topbar .nav a:not(.lang-toggle):not(.github-link) { display: none; }
}

/* ---------- Layout ---------- */
.docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 240px;
  gap: 0;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: calc(100vh - 56px);
}
@media (max-width: 1180px) {
  .docs-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; padding: 0 16px; }
  .docs-sidebar { display: none; }
}

/* ---------- Left Sidebar ---------- */
.docs-sidebar {
  position: sticky; top: 56px; align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 28px 18px 48px 0;
  border-right: 1px solid var(--line);
  font-size: 13.5px;
}
.docs-sidebar::-webkit-scrollbar { width: 6px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

.sidebar-group { margin-bottom: 22px; }
.sidebar-group .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 10px 6px;
}
.sidebar-group ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.sidebar-group li a {
  display: block;
  padding: 6px 10px;
  margin: 1px 0;
  border-radius: 6px;
  color: var(--ink-2);
  font-weight: 400;
  transition: background 120ms, color 120ms;
  position: relative;
}
.sidebar-group li a:hover {
  background: var(--bg-sunken);
  color: var(--ink);
}
.sidebar-group li a.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 500;
}

/* ---------- Main Content ---------- */
.docs-content {
  padding: 40px 48px 80px;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 1180px) { .docs-content { padding: 32px 24px 64px; max-width: none; } }
@media (max-width: 820px)  { .docs-content { padding: 24px 0 48px; } }

.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mute);
  margin-bottom: 20px;
  text-transform: none;
  letter-spacing: 0.02em;
}
.breadcrumbs .sep { color: var(--line-strong); }
.breadcrumbs .current { color: var(--ink-2); }

.docs-content h1 {
  font-family: var(--display);
  font-size: clamp(32px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--ink);
}
.docs-content h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 56px 0 14px;
  padding-top: 8px;
  color: var(--ink);
  scroll-margin-top: 72px;
}
.docs-content h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 36px 0 10px;
  color: var(--ink);
  scroll-margin-top: 72px;
}
.docs-content h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--ink);
}

.docs-content p {
  margin: 10px 0 14px;
  color: var(--ink-2);
}
.docs-content .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mute);
  margin: 4px 0 28px;
}

.docs-content a:not(.inline):not(.prev):not(.next) {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 120ms;
}
.docs-content a:hover { border-bottom-color: var(--accent); }
.docs-content a.inline {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.docs-content a.inline:hover { border-bottom-color: var(--accent); }

.docs-content ul, .docs-content ol { margin: 10px 0 16px; padding-left: 22px; }
.docs-content li { margin: 6px 0; color: var(--ink-2); }
.docs-content li::marker { color: var(--mute-2); }

.docs-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

.docs-content code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-sunken);
  color: var(--ink);
  padding: 1.5px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.docs-content pre {
  margin: 16px 0;
  padding: 18px 20px;
  background: var(--bg-code);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}
.docs-content pre code {
  background: transparent; border: none; padding: 0;
  color: var(--ink-2); font-size: inherit;
}

/* Endpoint URL block */
.endpoint-url,
pre.endpoint-url {
  display: flex !important;
  align-items: center;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  white-space: pre-wrap;
  word-break: break-all;
}
.endpoint-url .tag.post,
.endpoint-url .tag {
  display: inline-block;
  background: color-mix(in srgb, var(--green) 18%, transparent) !important;
  color: var(--green) !important;
  font-weight: 600;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  margin-right: 10px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Callouts ---------- */
.callout {
  display: flex; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  margin: 20px 0;
  box-shadow: var(--shadow-sm);
}
.callout .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px !important;
  background: var(--bg-sunken);
  color: var(--mute);
}
.callout .body {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.callout .body strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 600; }

.callout.tip    { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 20%, transparent); }
.callout.tip .icon    { background: rgba(255,255,255,0.6); color: var(--accent-ink); }
.callout.tip .body    { color: var(--accent-ink); }
.callout.tip .body strong { color: var(--accent-ink); }

.callout.info   { background: #f1f7fb; border-color: #dbe8f1; }
.callout.info .icon   { background: rgba(255,255,255,0.65); color: #2a6b9c; }

.callout.warn   { background: #fbf5ea; border-color: #ecdcb9; }
.callout.warn .icon   { background: rgba(255,255,255,0.65); color: #a0711f; }
.callout.warn .body   { color: #5e4616; }

.callout.danger { background: #fbefef; border-color: #eecccc; }
.callout.danger .icon { background: rgba(255,255,255,0.65); color: #9a3a3a; }

/* ---------- Parameter table ---------- */
.param-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  margin: 16px 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13.5px;
  background: var(--card);
}
.param-table thead th {
  text-align: left;
  font-weight: 500;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.param-table tbody td {
  padding: 12px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.param-table tbody tr:last-child td { border-bottom: none; }
.param-table tbody tr:hover { background: var(--bg-soft); }
.param-table td code {
  font-size: 12.5px;
}
.param-table td:first-child { white-space: nowrap; }

/* ---------- Code block with tabs ---------- */
.code-block {
  margin: 20px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.code-block .tabs {
  display: flex; gap: 2px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.code-block .tab {
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, color 120ms;
}
.code-block .tab:hover { color: var(--ink); background: var(--bg-sunken); }
.code-block .tab.active {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.code-block .panel { display: none; }
.code-block .panel.active { display: block; }
.code-block pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 16px 20px;
}

/* ---------- Page footer (prev / next) ---------- */
.page-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.page-footer a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  min-height: 84px;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}
.page-footer a:hover {
  border-color: var(--accent);
  background: var(--bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.page-footer a.prev { align-items: flex-start; text-align: left; }
.page-footer a.next { align-items: flex-end;   text-align: right; }
.page-footer a .tip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 160ms ease, transform 160ms ease;
}
.page-footer a.prev:hover .tip { transform: translateX(-2px); color: var(--accent); }
.page-footer a.next:hover .tip { transform: translateX( 2px); color: var(--accent); }
.page-footer a .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .page-footer { grid-template-columns: 1fr; gap: 10px; }
  .page-footer a.next { align-items: flex-start; text-align: left; }
  .page-footer > span:empty { display: none; }
}

/* ---------- Right TOC ---------- */
.docs-toc {
  position: sticky; top: 56px; align-self: start;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 40px 0 48px 24px;
  font-size: 13px;
}
.docs-toc::-webkit-scrollbar { width: 6px; }
.docs-toc::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.toc-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 10px;
}
.docs-toc ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.docs-toc li a {
  display: block;
  padding: 4px 10px;
  color: var(--mute);
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  transition: color 120ms, border-color 120ms;
}
.docs-toc li a:hover { color: var(--ink-2); }
.docs-toc li a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}
.docs-toc li.nested a { padding-left: 22px; font-size: 12.5px; }

/* ---------- Misc bits some pages reference ---------- */
.kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--ink-2);
}

.pill, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

blockquote {
  margin: 16px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--line-strong);
  color: var(--mute);
  font-style: normal;
}

img { max-width: 100%; display: block; border-radius: var(--radius-sm); }

/* Cards utility (in case content uses it) */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

/* =========================================================
   API Reference (Mintlify-style)
   3-column layout: sidebar | content+params | sticky code panel
   ========================================================= */
.api-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  gap: 0;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: calc(100vh - 56px);
}
@media (max-width: 1280px) {
  .api-layout { grid-template-columns: 240px minmax(0, 1fr) 340px; }
}
@media (max-width: 1080px) {
  .api-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .api-code-panel { display: none; }
}
@media (max-width: 820px) {
  .api-layout { grid-template-columns: 1fr; padding: 0 16px; }
}

/* Reuse .docs-sidebar for left rail; nothing extra needed there */

.api-content {
  padding: 32px 36px 80px;
  min-width: 0;
}
@media (max-width: 1080px) { .api-content { padding: 28px 24px 64px; } }
@media (max-width: 820px)  { .api-content { padding: 24px 0 48px; } }

.api-content h1 {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -0.02em;
  margin: 4px 0 14px;
}
.api-content > .lead {
  font-size: 15px;
  color: var(--mute);
  margin: 0 0 28px;
  line-height: 1.6;
}
.api-content h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 36px 0 14px;
  padding-top: 4px;
}

/* HTTP method + endpoint row */
.api-method-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 13.5px;
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex-wrap: wrap;
}
.api-method {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
}
.api-method.get    { background: #2c84db; }
.api-method.post   { background: #14a96b; }
.api-method.put    { background: #c98013; }
.api-method.patch  { background: #b56cd1; }
.api-method.delete { background: #c44b4b; }
.api-endpoint-path {
  color: var(--ink);
  font-weight: 500;
  word-break: break-all;
}

/* Parameter card */
.api-param {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--card);
}
.api-param-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.api-param-name {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.api-param-type {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
}
.api-param-required {
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.api-param-optional {
  font-size: 10px;
  font-weight: 600;
  color: var(--mute-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.api-param-default {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mute);
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: 3px;
}
.api-param-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.api-param-desc > p { margin: 0 0 6px; }
.api-param-desc > p:last-child { margin-bottom: 0; }
.api-param-desc code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--bg-sunken);
  padding: 1px 5px;
  border-radius: 3px;
}
.api-param-desc ul { margin: 6px 0; padding-left: 18px; }
.api-param-desc li { margin: 2px 0; }

/* Nested children — collapsed list under expandable parent */
.api-param-children {
  margin-top: 10px;
  padding: 10px 12px 4px;
  border-left: 2px solid var(--accent);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.api-param-children .api-param {
  border: none;
  background: transparent;
  padding: 6px 0 4px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.api-param-children .api-param:last-child { border-bottom: none; margin-bottom: 0; }

/* Response status tabs */
.api-resp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 8px 0 14px;
}
.api-resp-tab {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mute);
  background: transparent;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms, border-color 120ms;
}
.api-resp-tab.active {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.api-resp-tab:hover:not(.active) { color: var(--ink); }
.api-resp-panel { display: none; }
.api-resp-panel.active { display: block; }

/* Code samples panel — sticky right, dark theme */
.api-code-panel {
  position: sticky;
  top: 80px;
  align-self: start;
  margin: 28px 0 32px 24px;
  border: 1px solid #1f2a3c;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f1722;
  color: #e6edf6;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}
.api-code-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 12px;
  background: #131e2e;
  border-bottom: 1px solid #1f2a3c;
}
.api-code-panel-head .scenario-label {
  font-family: var(--mono);
  font-size: 11px;
  color: #8b9bb3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.api-code-tabs {
  display: flex;
  padding: 4px 6px 0;
  gap: 2px;
  background: #131e2e;
  border-bottom: 1px solid #1f2a3c;
}
.api-code-tab {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: #889bb3;
  background: transparent;
  border: none;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.api-code-tab.active {
  color: #fff;
  background: #0f1722;
}
.api-code-tab:hover:not(.active) { color: #cdd6e0; }
.api-code-panel pre {
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: pre;
  overflow-x: auto;
  flex: 1;
  min-height: 0;
}
.api-code-panel pre code { color: inherit; background: transparent; padding: 0; font-size: inherit; }
.api-code-panel pre[hidden] { display: none; }

/* Dark-theme syntax tokens for the code panel */
.api-code-panel .tok-kw  { color: #c792ea; }
.api-code-panel .tok-fn  { color: #82aaff; }
.api-code-panel .tok-str { color: #c3e88d; }
.api-code-panel .tok-num { color: #f78c6c; }
.api-code-panel .tok-com { color: #5e6c80; font-style: italic; }
.api-code-panel .tok-var { color: #ffcb6b; }

/* Copy button on code panel */
.api-code-copy {
  font-family: inherit;
  font-size: 11px;
  color: #8b9bb3;
  background: transparent;
  border: 1px solid #1f2a3c;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.api-code-copy:hover { color: #cdd6e0; border-color: #2a3850; }

/* Response example block (inside response panel) — subtle frame */
.api-example {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--mono);
  font-size: 12.5px;
  margin: 0 0 10px;
}
.api-example-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunken);
}
.api-example pre {
  margin: 0; padding: 14px 16px;
  background: transparent; border: none; border-radius: 0;
  white-space: pre; overflow-x: auto;
}

/* ---- Beian strip (page-bottom ICP / police filing notice) ---- */
.beian-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 24px 24px;
  font-size: 12px;
  color: var(--mute);
  border-top: 1px solid var(--line);
}
.beian-strip a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.beian-strip a:hover { color: var(--ink); }
.beian-strip img {
  height: 14px;
  width: auto;
  display: inline-block;
}