/* ZEX developer docs */
.docs-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.docs-top .wordmark .mark { width: 24px; height: 24px; }
.docs-top-cta { margin-left: auto; display: flex; gap: 8px; }
.docs-menu { display: none; }
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
.docs-nav { position: sticky; top: 60px; align-self: start; height: calc(100dvh - 60px); overflow-y: auto; padding: 24px 12px 40px; display: grid; align-content: start; gap: 2px; border-right: 1px solid var(--line); }
.docs-nav-group { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; padding: 16px 10px 6px; }
.docs-nav-group:first-child { padding-top: 0; }
.docs-nav a { padding: 7px 10px; border-radius: var(--r-1); color: var(--text-2); text-decoration: none; font-size: 14px; }
.docs-nav a:hover { background: var(--bg-2); color: var(--text); }
.docs-nav a.active { color: var(--text); background: var(--bg-2); box-shadow: none; }
.docs-content { padding: 40px clamp(20px, 4vw, 56px) 120px; min-width: 0; max-width: 860px; }
.docs-content section { padding-top: 12px; margin-bottom: 52px; scroll-margin-top: 76px; }
.docs-content h1 { font-size: clamp(32px, 4vw, 42px); letter-spacing: -0.035em; margin-bottom: 12px; }
.docs-content h2 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.docs-content h3 { font-size: 16px; margin: 24px 0 10px; }
.docs-content p { color: var(--text-2); line-height: 1.7; margin-bottom: 12px; }
.docs-content .lead { font-size: 17.5px; }
.docs-content a { color: var(--accent-text); text-underline-offset: 3px; }
.docs-content :not(pre) > code { font-size: .88em; padding: 2px 6px; border-radius: 5px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); }
.eyebrow { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: 10px !important; }
.kv { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; margin-top: 20px; }
.kv div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.kv div:last-child { border-bottom: 0; }
.kv span { color: var(--text-3); font-size: 13px; }
.kv code { background: none !important; border: 0 !important; padding: 0 !important; font-family: var(--mono); font-size: 13.5px; word-break: break-all; }
.method { font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.method.get { background: rgba(124, 199, 255, .12); color: #7CC7FF; }
.method.post { background: var(--lime-soft); color: var(--accent-text); }
.req { font-size: 11px; color: var(--warn); margin-left: 4px; }
.code { position: relative; margin: 12px 0; padding: 16px 18px; border-radius: var(--r-2); background: #0D0E11; border: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: #D8DADF; }
[data-theme='light'] .code { background: #15171C; color: #E6E7EA; }
.code .copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: #17181C; color: #A6AAB3; font-size: 12px; cursor: pointer; font-family: var(--font); opacity: 0; transition: opacity .15s; }
.code:hover .copy, .code .copy:focus-visible { opacity: 1; }
.code .origin, .code .model-id { color: var(--lime); }
.tabs { margin: 16px 0; }
.tab-list { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tab-list button { padding: 9px 14px; border: 0; background: transparent; color: var(--text-3); font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab-list button[aria-selected='true'] { color: var(--text); border-bottom-color: transparent; }
.tabs .code { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-1); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); line-height: 1.55; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { white-space: nowrap; color: var(--text); }

@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; }
  .docs-menu { display: inline-grid; margin-left: auto; }
  .docs-top-cta .btn-ghost { display: none; }
  .docs-top-cta { margin-left: 0; }
  .docs-nav { position: fixed; inset: 60px 0 auto 0; height: auto; max-height: calc(100dvh - 60px); background: var(--bg); border-right: 0; border-bottom: 1px solid var(--line); display: none; z-index: 19; }
  .docs-nav.open { display: grid; }
  .docs-content { padding-top: 28px; }
  .code .copy { opacity: 1; }
}
.docs-menu-open { overflow: hidden; }
.tab-list button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--lime); outline-offset: -2px; }
.docs-content pre[role='tabpanel']:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 900px) {
  .docs-nav[aria-hidden='true'] { visibility: hidden; pointer-events: none; }
  .docs-nav.open { visibility: visible; pointer-events: auto; box-shadow: var(--shadow-2); }
}