:root {
  --card: #fff;
  --ring: #1447e6;
  --input: #dadee4;
  --muted: #e5e7eb;
  --accent: #e5e7eb;
  --border: #dadee4;
  --radius: 0.625rem;
  --chart-1: #f54900;
  --chart-2: #009689;
  --chart-3: #104e64;
  --chart-4: #ffb900;
  --chart-5: #fe9a00;
  --popover: #fff;
  --primary: #1447e6;
  --sidebar: #fafafa;
  --spacing: 0.25rem;
  --font-mono:
    ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --secondary: #e5e7eb;
  --background: #fff;
  --font-serif: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
  --foreground: #0a0a0a;
  --destructive: #e7000b;
  --shadow-blur: 3px;
  --shadow-color: #000;
  --sidebar-ring: #1447e6;
  --shadow-spread: 0px;
  --letter-spacing: 0em;
  --shadow-opacity: 0.1;
  --sidebar-accent: #e5e7eb;
  --sidebar-border: #dadee4;
  --card-foreground: #0a0a0a;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --sidebar-primary: #1447e6;
  --muted-foreground: #737373;
  --accent-foreground: #171717;
  --popover-foreground: #0a0a0a;
  --primary-foreground: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --secondary-foreground: #171717;
  --destructive-foreground: #fff;
  --sidebar-accent-foreground: #171717;
  --sidebar-primary-foreground: #fafafa;
  --bg: var(--background);
  --panel: var(--card);
  --panel-soft: #fafafa;
  --ink: var(--foreground);
  --muted-text: var(--muted-foreground);
  --faint: #8a8a8a;
  --line: var(--border);
  --line-strong: var(--input);
  --accent-strong: #0f2f9e;
  --accent-soft: #eef4ff;
  --amber: #a16207;
  --amber-soft: #fff4d6;
  --blue: var(--primary);
  --blue-soft: #eef4ff;
  --shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread)
    rgb(0 0 0 / var(--shadow-opacity));

  font-family: var(--font-sans);
  color-scheme: light;
}

.dark {
  --card: #212b3e;
  --ring: #5085fb;
  --input: #3e4858;
  --muted: #1c2639;
  --accent: #374153;
  --border: #3e4858;
  --radius: 0.625rem;
  --chart-1: #91c5ff;
  --chart-2: #3a81f6;
  --chart-3: #2563ef;
  --chart-4: #1a4eda;
  --chart-5: #1f3fad;
  --popover: #212b3e;
  --primary: #5085fb;
  --sidebar: #212b3e;
  --spacing: 0.25rem;
  --font-mono:
    ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
    'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --secondary: #2e384b;
  --background: #141c30;
  --font-serif: ui-serif, georgia, cambria, 'Times New Roman', times, serif;
  --foreground: #e2e8f0;
  --destructive: #ff6467;
  --shadow-blur: 3px;
  --shadow-color: #000;
  --sidebar-ring: #5085fb;
  --shadow-spread: 0px;
  --letter-spacing: 0em;
  --shadow-opacity: 0.1;
  --sidebar-accent: #374153;
  --sidebar-border: #3e4858;
  --card-foreground: #e2e8f0;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --sidebar-primary: #5085fb;
  --muted-foreground: #8f96a3;
  --accent-foreground: #d1d5db;
  --popover-foreground: #e2e8f0;
  --primary-foreground: #141c30;
  --sidebar-foreground: #e2e8f0;
  --secondary-foreground: #d1d5db;
  --destructive-foreground: #fafafa;
  --sidebar-accent-foreground: #d1d5db;
  --sidebar-primary-foreground: #141c30;
  --bg: var(--background);
  --panel: var(--card);
  --panel-soft: #1c2639;
  --ink: var(--foreground);
  --muted-text: var(--muted-foreground);
  --faint: #8f96a3;
  --line: var(--border);
  --line-strong: var(--input);
  --accent-strong: var(--primary);
  --accent-soft: #1c2639;
  --amber: #ffb900;
  --amber-soft: #332b12;
  --blue: var(--primary);
  --blue-soft: #1c2639;
  --shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread)
    rgb(0 0 0 / var(--shadow-opacity));

  font-family: var(--font-sans);
  color-scheme: dark;
}

/* stylelint-disable at-rule-no-unknown, scss/at-rule-no-unknown */
@theme inline {
  --color-card: var(--card);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-radius: var(--radius);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-popover: var(--popover);
  --color-primary: var(--primary);
  --color-sidebar: var(--sidebar);
  --color-spacing: var(--spacing);
  --color-font-mono: var(--font-mono);
  --color-font-sans: var(--font-sans);
  --color-secondary: var(--secondary);
  --color-background: var(--background);
  --color-font-serif: var(--font-serif);
  --color-foreground: var(--foreground);
  --color-destructive: var(--destructive);
  --color-shadow-blur: var(--shadow-blur);
  --color-shadow-color: var(--shadow-color);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-shadow-spread: var(--shadow-spread);
  --color-letter-spacing: var(--letter-spacing);
  --color-shadow-opacity: var(--shadow-opacity);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-border: var(--sidebar-border);
  --color-card-foreground: var(--card-foreground);
  --color-shadow-offset-x: var(--shadow-offset-x);
  --color-shadow-offset-y: var(--shadow-offset-y);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary-foreground: var(--primary-foreground);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
}
/* stylelint-enable at-rule-no-unknown, scss/at-rule-no-unknown */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
}

html.models-page-active,
html.models-page-active body {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 640px) minmax(260px, 1fr);
  gap: 22px;
  align-items: center;
  min-height: 66px;
  padding: 0 30px;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.topbar-left,
.topbar-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.topbar-actions {
  justify-content: flex-end;
}

.topbar.search-hidden {
  grid-template-columns: auto 1fr;
}

.topbar.search-hidden .topbar-actions {
  grid-column: 2;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 720;
  color: #0b1f47;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(180deg, #173b7a 0%, #0b1f47 100%);
  border: 1px solid #163a75;
  border-radius: 7px;
}

.site-topnav {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: 14px;
}

.site-topnav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  font-size: 14px;
  font-weight: 650;
  color: #526071;
  border-radius: 7px;
}

.site-topnav a:hover,
.site-topnav a.active {
  color: #123a8c;
  background: #edf3ff;
}

.topnav {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 14px;
  color: var(--muted-foreground);
}

.topnav a {
  padding: 8px 11px;
  border-radius: 7px;
}

.topnav a:hover,
.topnav a.active {
  color: var(--ink);
  background: #eceeeb;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 560;
  color: var(--ink);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
}

.btn.primary {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.page {
  width: min(1220px, calc(100vw - 40px));
  margin: 0 auto;
}

.hero {
  padding: 54px 0 28px;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 16px;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 660px;
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.hero-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.mini-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.metric {
  min-width: 148px;
  padding: 14px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.metric strong {
  display: block;
  font-size: 20px;
}

.metric span {
  font-size: 13px;
  color: var(--muted-foreground);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.badge.green {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: #9bb9f1;
}

.badge.amber {
  color: var(--amber);
  background: var(--amber-soft);
  border-color: #efd27f;
}

.badge.blue {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: #c9d8ff;
}

.docs-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 210px;
  gap: 30px;
  align-items: start;
  padding-bottom: 72px;
}

.docs-layout.endpoint-layout {
  grid-template-columns: 230px minmax(0, 1fr) 360px;
  gap: 28px;
}

.side-rail,
.toc,
.doc-article,
.catalog,
.filter-panel {
  min-width: 0;
}

.side-rail,
.toc {
  position: sticky;
  top: 86px;
}

.side-rail {
  display: grid;
  gap: 20px;
}

.nav-section strong,
.toc strong {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-nav .nav-section strong:not(:first-child) {
  margin-top: 18px;
}

.nav-title-link {
  cursor: pointer;
}

.nav-title-link::after {
  margin-left: 7px;
  color: var(--faint);
  content: '\2192';
}

.nav-title-link:hover {
  color: var(--accent);
}

.nav-section a,
.toc a {
  display: block;
  padding: 7px 0;
  font-size: 14px;
  color: var(--muted-foreground);
}

.nav-section a.active {
  font-weight: 650;
  color: var(--ink);
}

.doc-article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.doc-section {
  padding: 30px;
  border-bottom: 1px solid var(--line);
}

.doc-section:last-child {
  border-bottom: 0;
}

.doc-section h2 {
  margin-bottom: 12px;
  font-size: 27px;
  letter-spacing: 0;
}

.doc-section h3 {
  margin: 24px 0 10px;
  font-size: 18px;
}

.doc-section p,
.doc-section li {
  line-height: 1.65;
  color: var(--muted-foreground);
}

.callout {
  padding: 15px 16px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #1f3f86;
  background: var(--blue-soft);
  border: 1px solid #c9d8ff;
  border-radius: var(--radius);
}

.endpoint {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  margin: 18px 0;
  overflow-x: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.endpoint-hero {
  background: linear-gradient(180deg, #fff, #fbfbfa);
}

.endpoint-url-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin: 22px 0 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.endpoint-url-bar code {
  min-width: 0;
  overflow-x: auto;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}

.endpoint-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.endpoint-meta-grid div {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.endpoint-meta-grid span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 750;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.endpoint-meta-grid strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endpoint-table td:first-child {
  font-weight: 650;
  color: var(--ink);
}

.empty-note {
  margin: 0;
  color: var(--muted-foreground);
}

.endpoint-code-wrap {
  position: sticky;
  top: 86px;
}

.endpoint-code-wrap > strong,
.endpoint-code-wrap > a {
  display: none;
}

.endpoint-code-panel {
  overflow: hidden;
  background: #0b1220;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.endpoint-code-panel.inline {
  display: none;
  margin-top: 18px;
}

.endpoint-code-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  color: #eef4ff;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.endpoint-code-head strong {
  font-size: 12px;
  color: #eef4ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.code-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 4px;
  margin: 16px 0 0;
  border: 0;
  background: transparent;
}

.code-tabs button {
  position: relative;
  min-width: 0;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 650;
  color: #8a98b3;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

.code-tabs button:hover {
  color: #c4cee0;
}

.code-tabs button.active {
  z-index: 1;
  color: #eef4ff;
  background: #0b1220;
  border-color: #17233a;
}

.code-tab-panels {
  margin-top: -1px;
}

.code-tab-panels > pre {
  display: none;
  margin: 0;
  border-radius: 0 8px 8px 8px;
}

.code-tab-panels > pre.active {
  display: block;
}

.code-copy,
.copy-snippet {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

.code-copy {
  padding: 6px 9px;
}

.copy-snippet {
  min-height: 30px;
  padding: 0 10px;
}

.endpoint-code-panel .code-copy {
  color: #eef4ff;
  background: #17233a;
  border-color: rgb(255 255 255 / 18%);
}

.code-sample {
  display: none;
  max-height: calc(100vh - 230px);
  margin: 0;
  background: #0b1220;
  border: 0;
  border-radius: 0;
}

.code-sample.active {
  display: block;
}

pre > .code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

pre {
  position: relative;
  padding: 18px;
  margin: 16px 0 0;
  overflow: auto;
  font-size: 13px;
  line-height: 1.7;
  color: #eef4ff;
  background: #0b1220;
  border: 1px solid #17233a;
  border-radius: var(--radius);
}

.schema-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.schema-card {
  padding: 15px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.schema-card strong {
  display: block;
  margin-bottom: 6px;
}

.schema-card p {
  margin: 0;
  font-size: 14px;
}

.docs-toolbar {
  display: flex;
  justify-content: flex-start;
  padding: 26px 0 18px;
}

.content-panel[hidden] {
  display: none;
}

.topbar .docs-search-lite {
  justify-self: center;
  width: min(640px, 100%);
  max-width: 640px;
  margin: 0;
}

.docs-search-lite {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(520px, 100%);
  max-width: 520px;
  height: 44px;
  padding: 0 14px;
  background: var(--panel);
  border: 1px solid #cbd8ea;
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(15 23 42 / 5%);
}

.docs-search-lite span {
  width: 15px;
  height: 15px;
  border: 2px solid #667894;
  border-radius: 50%;
}

.docs-search-lite span::after {
  display: block;
  width: 7px;
  height: 2px;
  margin: 10px 0 0 10px;
  content: '';
  background: #667894;
  border-radius: 999px;
  transform: rotate(45deg);
}

.docs-search-lite input {
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.console-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 780;
  color: #fff;
  background: #0b1f47;
  border: 1px solid #123a8c;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgb(11 31 71 / 12%);
}

.signin-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 650;
  color: #0b1f47;
  text-decoration: none;
  background: #fff;
  border: 1px solid #cbd8ea;
  border-radius: 8px;
}

.signin-link:hover {
  background: #f5f8ff;
  border-color: #123a8c;
}

.console-link:hover {
  background: #123a8c;
}

.profile-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 38px;
  padding: 0 10px 0 6px;
  font-size: 12px;
  font-weight: 760;
  color: #0b1f47;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cbd8ea;
  border-radius: 999px;
}

.profile-button span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 860;
  color: #123a8c;
  background: #eaf1ff;
  border-radius: 999px;
}

.profile-button strong {
  font-size: 12px;
}

.profile-shell {
  position: relative;
}

.docs-lang-switcher {
  position: relative;
}

.docs-lang-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 650;
  color: #0b1f47;
  cursor: pointer;
  background: #fff;
  border: 1px solid #cbd8ea;
  border-radius: 8px;
}

.docs-lang-button:hover {
  background: #f5f8ff;
  border-color: #123a8c;
}

.docs-lang-button i {
  font-size: 16px;
}

.docs-lang-button [data-docs-lang-current] {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgb(15 23 42 / 14%);
}

.docs-lang-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #0b1f47;
  cursor: pointer;
  border-radius: 8px;
}

.docs-lang-menu li:hover {
  background: #f5f8ff;
}

.docs-lang-menu li i {
  font-size: 16px;
  color: #123a8c;
  visibility: hidden;
}

.docs-lang-menu li.active {
  background: #edf3ff;
}

.docs-lang-menu li.active i {
  visibility: visible;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  width: 240px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #cbd8ea;
  border-radius: 12px;
  box-shadow: 0 20px 44px rgb(15 23 42 / 14%);
}

.profile-menu-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.profile-menu-head > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  font-weight: 860;
  color: #123a8c;
  background: #eaf1ff;
  border-radius: 999px;
}

.profile-menu-head strong {
  display: block;
  font-size: 13px;
  font-weight: 850;
  color: #0b1f47;
}

.profile-menu-head small {
  display: block;
  max-width: 170px;
  overflow: hidden;
  font-size: 11px;
  color: #667894;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 740;
  color: #344054;
}

.profile-menu a:hover {
  color: #123a8c;
  background: #f4f7fc;
}

kbd {
  min-width: 24px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--faint);
  background: #f4f7fc;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.section-tabs {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  margin-bottom: 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.section-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 650;
  color: var(--muted-foreground);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.section-tabs a.active {
  color: var(--ink);
  border-color: var(--accent);
}

.docs-nav .nav-section a {
  padding: 8px 10px;
  border-radius: 7px;
}

.docs-nav .nav-section a.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.docs-nav .nav-section {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.docs-nav .nav-section[hidden] {
  display: none;
}

.docs-nav .nav-section:last-child {
  border-bottom: 0;
}

.nav-tree {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  margin: 7px 0 9px;
  border-left: 1px solid var(--line);
}

.nav-tree button {
  width: 100%;
  padding: 7px 10px;
  margin: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
}

.nav-tree button::before {
  display: inline-block;
  margin-right: 7px;
  color: var(--faint);
  content: '\203A';
}

.docs-nav .nav-tree a {
  padding: 6px 10px 6px 22px;
  font-size: 13px;
  color: var(--muted-foreground);
}

.nav-tree-flat {
  padding-left: 0;
  margin: 0;
  border-left: 0;
}

.nav-tree-flat button {
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-radius: 7px;
}

.nav-tree-flat button::before {
  margin: 0;
  content: '';
}

.docs-nav .nav-tree-flat a {
  padding-left: 18px;
  margin-left: 10px;
  border-left: 1px solid var(--line);
}

.endpoint-tree {
  display: grid;
  gap: 2px;
  padding-left: 18px;
  margin: 3px 0 5px 10px;
  border-left: 1px solid var(--line);
}

.endpoint-tree span {
  padding: 6px 0 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted-foreground);
}

.docs-nav .endpoint-tree a {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin-left: 0;
  font-size: 13px;
  border-left: 0;
}

.verb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 18px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 5px;
}

.verb.post {
  color: #2563eb;
  background: #dbeafe;
}

.verb.get {
  color: #15803d;
  background: #dcfce7;
}

.verb.delete {
  color: #b91c1c;
  background: #fee2e2;
}

.changelog-panel {
  padding: 26px 0 72px;
}

.changelog-head {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-end;
  margin-bottom: 22px;
}

.rss-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 560;
  color: var(--ink);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.rss-button::after {
  margin-left: 10px;
  font-size: 18px;
  color: var(--muted-foreground);
  content: '\25DC';
}

.changelog-search {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  margin-bottom: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(17 19 17 / 4%);
}

.changelog-search span {
  width: 15px;
  height: 15px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.changelog-search span::after {
  display: block;
  width: 7px;
  height: 2px;
  margin: 10px 0 0 10px;
  content: '';
  background: var(--ink);
  border-radius: 999px;
  transform: rotate(45deg);
}

.changelog-search input {
  min-width: 0;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.changelog-list {
  display: grid;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.change-entry {
  display: grid;
  grid-template-columns: 112px 28px minmax(0, 1fr);
  gap: 20px;
  min-height: 118px;
}

.change-entry time {
  padding-top: 22px;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.change-entry::before {
  display: block;
  justify-self: center;
  width: 1px;
  min-height: 100%;
  content: '';
  background: var(--line);
}

.change-entry div {
  position: relative;
  padding: 18px 0 30px;
}

.change-entry div::before {
  position: absolute;
  top: 24px;
  left: -34px;
  width: 9px;
  height: 9px;
  content: '';
  background: var(--line);
  border-radius: 50%;
}

.change-entry h2 {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.25;
}

.change-entry p {
  max-width: 980px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.support-panel {
  padding: 34px 0 78px;
}

.support-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.support-hero h2 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.support-hero p {
  max-width: 940px;
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
}

.support-status {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.support-status span,
.support-panel-head p,
.support-checklist strong {
  font-size: 12px;
  font-weight: 760;
  color: var(--muted-foreground);
}

.support-status strong {
  font-size: 15px;
  font-weight: 820;
  color: #0b1f47;
}

.support-status small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.faq-panel,
.contact-panel {
  display: grid;
  gap: 10px;
}

.contact-panel {
  position: sticky;
  top: 144px;
  padding-left: 26px;
  border-left: 1px solid var(--line);
}

.support-panel-head {
  min-height: 52px;
  margin-bottom: 2px;
}

.support-panel-head h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 820;
  color: #0b1f47;
}

.support-panel-head p {
  margin: 0;
}

.faq-item,
.contact-card {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.faq-item {
  display: grid;
  gap: 8px;
  min-height: 54px;
  padding: 13px 16px;
}

.faq-item span,
.contact-card span {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  font-weight: 760;
  color: #10213f;
}

.faq-item span::after {
  color: var(--faint);
  content: '+';
}

.faq-item.open span::after,
.faq-item.active span::after {
  content: '\2212';
}

.faq-item strong {
  display: none;
  max-width: 760px;
  padding: 0 32px 1px 0;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.faq-item.open,
.faq-item.active {
  background: #fbfdff;
  border-color: #bfd0f7;
}

.faq-item.open strong,
.faq-item.active strong {
  display: block;
}

.contact-card {
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  text-decoration: none;
}

.contact-card.active {
  background: var(--accent-soft);
  border-color: #9bb9f1;
}

.contact-card strong {
  font-size: 13px;
  color: var(--primary);
}

.contact-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.support-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.support-checklist strong {
  flex-basis: 100%;
}

.support-checklist span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 720;
  color: #344054;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ── Dynamic FAQ (categories + search + markdown answers) ── */
.faq-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.faq-search {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.faq-search:focus {
  border-color: #9bb9f1;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.faq-category {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-foreground);
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: all 0.15s ease;
}

.faq-category:hover {
  border-color: #bfd0f7;
  color: #10213f;
}

.faq-category.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-state {
  padding: 24px 16px;
  font-size: 13px;
  color: var(--muted-foreground);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* Rendered markdown answer inside an expanded faq-item */
.faq-item .faq-answer {
  display: none;
  max-width: 760px;
  padding: 0 32px 1px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.faq-item.active .faq-answer,
.faq-item.open .faq-answer {
  display: block;
}

/* Override the prototype's `.faq-item strong { display:none }` so bold inside answers stays visible */
.faq-item .faq-answer strong {
  display: inline;
  color: inherit;
  font-weight: 700;
}

.faq-item .faq-answer em {
  font-style: italic;
}

.faq-item .faq-answer p {
  margin: 0 0 8px;
}

.faq-item .faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-item .faq-answer ul,
.faq-item .faq-answer ol {
  margin: 6px 0 8px;
  padding-left: 20px;
}

.faq-item .faq-answer li {
  margin-bottom: 4px;
}

.faq-item .faq-answer code {
  padding: 1px 5px;
  font-size: 13px;
  color: #10213f;
  background: #f1f5ff;
  border-radius: 4px;
}

.faq-item .faq-answer pre {
  padding: 12px 14px;
  margin: 8px 0;
  overflow-x: auto;
  background: #f6f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.faq-item .faq-answer pre code {
  padding: 0;
  color: inherit;
  background: transparent;
  border-radius: 0;
}

.faq-item .faq-answer a {
  color: var(--primary);
  text-decoration: underline;
}

.faq-item .faq-answer blockquote {
  margin: 6px 0;
  padding: 4px 12px;
  color: var(--muted-foreground);
  border-left: 3px solid var(--line);
}

.faq-item .faq-answer h1,
.faq-item .faq-answer h2,
.faq-item .faq-answer h3,
.faq-item .faq-answer h4,
.faq-item .faq-answer h5,
.faq-item .faq-answer h6 {
  margin: 12px 0 6px;
  font-size: 15px;
  font-weight: 760;
  color: #10213f;
}

.doc-heading-row,
.numbered-title {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.doc-heading-row h2 {
  margin-bottom: 0;
}

.copy-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 34px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted-foreground);
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
}

.numbered-title {
  justify-content: flex-start;
  margin-bottom: 10px;
}

.numbered-title span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  background: var(--panel-soft);
  border-radius: 50%;
}

.numbered-title h2 {
  margin: 2px 0 0;
}

.section-kicker {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.method.get {
  background: var(--blue);
}

.method.delete {
  background: #b91c1c;
}

.docs-table {
  margin-top: 16px;
  overflow-x: auto;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.docs-table table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

.docs-table th,
.docs-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.docs-table tr:last-child td {
  border-bottom: 0;
}

.docs-table td {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.docs-table code {
  font-size: 13px;
  color: var(--ink);
}

.endpoint-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.endpoint-list div {
  display: grid;
  grid-template-columns: 56px minmax(180px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.endpoint-list p {
  margin: 0;
  font-size: 14px;
}

.doc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px 30px 30px;
  border-top: 1px solid var(--line);
}

.pager-card {
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 18px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pager-card.next {
  text-align: right;
}

.pager-card span {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pager-card strong {
  font-size: 18px;
  color: var(--ink);
}

.models-shell {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 22px;
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.models-shell.drawer-open {
  grid-template-columns: 300px minmax(0, 1fr);
}

.models-shell.drawer-open .model-type-bar {
  grid-template-columns: 300px minmax(0, 1fr);
}

.models-shell.drawer-open .model-category-tabs {
  grid-column: 2;
}

.filter-panel {
  align-self: stretch;
  max-height: none;
  height: 100%;
  padding: 0;
  overflow: hidden auto;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(248 251 255 / 98%) 100%), #fff;
  border: 1px solid #cfdaeb;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgb(15 23 42 / 8%);
  scrollbar-width: thin;
}

.filter-panel-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 18px;
  background:
    radial-gradient(circle at 18% 0%, rgb(20 71 230 / 9%), transparent 32%),
    linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border-bottom: 1px solid #e3e9f3;
}

.filter-panel h2 {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  font-size: 18px;
  color: #081a3a;
  letter-spacing: 0;
}

.filter-panel h2::before {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  color: #1447e6;
  content: '\25C7';
  background: #fff;
  border: 1px solid #d7e2f2;
  border-radius: 9px;
}

.filter-panel-head button {
  height: 26px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
  color: #31527e;
  cursor: pointer;
  background: #f8fbff;
  border: 1px solid #c9d6ea;
  border-radius: 6px;
}

.filter-panel-head button:hover {
  color: #123a8c;
  border-color: #a9bbe0;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted-foreground);
}

.search,
.select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
}

.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-list.compact {
  max-height: 184px;
  padding: 1px 4px 2px 1px;
  overflow: auto;
  scrollbar-width: thin;
}

.check-list label {
  position: relative;
  display: flex;
  gap: 7px;
  align-items: center;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 10px 5px 7px;
  margin: 0;
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  color: #344154;
  cursor: pointer;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  border: 1px solid #d9e1ec;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(15 23 42 / 4%);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.check-list label:hover {
  background: #fff;
  border-color: #b8c8e4;
  box-shadow: 0 8px 18px rgb(15 23 42 / 7%);
  transform: translateY(-1px);
}

.check-list label:has(input:checked) {
  color: #0b3fae;
  background: #eef4ff;
  border-color: #1447e6;
  box-shadow: 0 0 0 2px rgb(20 71 230 / 10%);
}

.check-list label:has(input:checked)::after {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  content: '\2713';
  background: #1447e6;
  border-radius: 999px;
}

.check-list label > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.check-list input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}

.filter-group {
  padding: 15px 18px;
  border-top: 1px solid #e3e9f3;
}

.filter-group:first-child {
  border-top: 0;
}

.filter-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 780;
  color: #0b1f47;
  list-style: none;
  cursor: pointer;
}

.filter-group summary::-webkit-details-marker {
  display: none;
}

.filter-group summary::after {
  font-size: 16px;
  line-height: 1;
  color: #93a0b4;
  content: '\2303';
}

.filter-group:not([open]) summary::after {
  content: '\2304';
}

.filter-group .check-list,
.filter-group .context-range {
  margin-top: 11px;
}

.filter-logo {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 25px;
  height: 25px;
  font-size: 8px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0;
  background: #eef2f7;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.filter-logo.type.text,
.filter-logo.protocol.post {
  color: #1d4ed8;
  background: linear-gradient(135deg, #eaf1ff 0%, #dbe8ff 100%);
}

.filter-logo.type.image {
  color: #047857;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.filter-logo.type.file {
  color: #6d28d9;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

.filter-logo.type.audio,
.filter-logo.brand.anthropic {
  color: #c2410c;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}

.filter-logo.type.video {
  color: #be185d;
  background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
}

.filter-logo.brand.openai,
.filter-logo.brand.direct {
  color: #111827;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
}

.filter-logo.brand.google,
.filter-logo.protocol.gem {
  color: #fff;
  background: conic-gradient(from 45deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
}

.filter-logo.brand.azure {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
}

.filter-logo.brand.midwayflow {
  color: #fff;
  background: linear-gradient(135deg, #082f6f 0%, #1447e6 100%);
}

.filter-logo.brand.qwen {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
}

.filter-logo.brand.deepseek {
  color: #fff;
  background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%);
}

.filter-logo.brand.mistral {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e 0%, #f97316 100%);
}

.filter-logo.brand.bfl {
  color: #fff;
  background: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
}

.filter-logo.brand.runway {
  color: #fff;
  background: linear-gradient(135deg, #312e81 0%, #6366f1 100%);
}

.filter-logo.brand.kling {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.filter-logo.brand.wan {
  color: #fff;
  background: linear-gradient(135deg, #0284c7 0%, #22d3ee 100%);
}

.filter-logo.brand.glm {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.filter-logo.brand.moonshot,
.filter-logo.brand.kimi {
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.filter-logo.brand.minimax {
  color: #fff;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
}

.filter-logo.brand.xai,
.filter-logo.brand.grok {
  color: #fff;
  background: linear-gradient(135deg, #1f2937 0%, #000000 100%);
}

.filter-logo.brand.doubao {
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.filter-logo.brand.tencent,
.filter-logo.brand.tencentcloud {
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.filter-logo.brand.happyhorse {
  color: #fff;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.filter-logo.brand.aws {
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.filter-logo.brand.alibabacloud {
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.filter-logo.brand.huawei,
.filter-logo.brand.huaweicloud {
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.filter-logo.brand.volcengine {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.filter-logo.brand.byteplus {
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.filter-logo.brand.bytedance {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.filter-logo.brand.googlecloud,
.filter-logo.brand.vertex {
  color: #fff;
  background: conic-gradient(from 45deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
}

.filter-logo.brand.claude,
.filter-logo.brand.gemini {
  color: #fff;
  background: conic-gradient(from 45deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
}

.filter-logo.protocol.anth {
  color: #c2410c;
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}

.filter-logo.protocol.sse {
  color: #047857;
  background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%);
}

.filter-logo.resolution,
.filter-logo.ratio {
  min-width: 30px;
  font-size: 9px;
  color: #123a8c;
  background: linear-gradient(135deg, #eef5ff 0%, #dbeafe 100%);
}

.context-range {
  display: grid;
  gap: 9px;
}

.range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #0b1f47;
}

.range-scale {
  position: relative;
  display: block;
  height: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #738096;
}

.range-scale span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.dual-range {
  position: relative;
  height: 24px;
}

.dual-range::before {
  position: absolute;
  top: 11px;
  right: 0;
  left: 0;
  height: 4px;
  content: '';
  background: #dbe3ef;
  border-radius: 999px;
}

.dual-range input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  pointer-events: none;
  background: transparent;
}

.dual-range input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: transparent;
  border: none;
}

.dual-range input[type='range']::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  background: #1d4ed8;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(29 78 216 / 32%);
}

.dual-range input[type='range']::-moz-range-track {
  width: 100%;
  height: 4px;
  background: transparent;
  border: none;
}

.dual-range input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  pointer-events: auto;
  cursor: pointer;
  background: #1d4ed8;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgb(29 78 216 / 32%);
}

.asset-filter-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.catalog {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.model-type-bar {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-column: 1 / -1;
  gap: 22px;
  align-items: center;
  margin-bottom: 14px;
}

.model-type-bar > strong {
  font-size: 17px;
  color: #081a3a;
  letter-spacing: -0.01em;
}

.model-category-tabs {
  display: flex;
  width: 100%;
  padding: 3px;
  background: #fff;
  border: 1px solid #cfdaeb;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgb(15 23 42 / 4.5%);
}

.model-category-tabs button {
  display: inline-flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  font-weight: 760;
  color: #5d6b7f;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.model-category-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  font-size: 11px;
  color: var(--muted-foreground);
  background: var(--panel-soft);
  border-radius: 999px;
}

.model-category-tabs button.active {
  color: #fff;
  background: #0b1f47;
}

.model-category-tabs button.active span {
  color: #fff;
  background: rgb(255 255 255 / 18%);
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.pricing-list {
  height: 100%;
  overflow: auto;
  background: #fff;
  border: 1px solid #cfdaeb;
  border-radius: 10px;
  box-shadow: 0 16px 42px rgb(15 23 42 / 5.5%);
}

.pricing-header {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  grid-template-columns:
    minmax(260px, 1.5fr) minmax(130px, 0.6fr) repeat(4, minmax(150px, 0.9fr))
    42px;
  gap: 16px;
  padding: 13px 20px;
  font-size: 11px;
  font-weight: 800;
  color: #6f7d92;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: #f8fbff;
  border-bottom: 1px solid #e3e9f3;
}

.pricing-list.asset-pricing .pricing-header {
  grid-template-columns: minmax(260px, 1.5fr) minmax(130px, 0.6fr) minmax(200px, 1fr) 42px;
}

.pricing-list.asset-pricing .pricing-header span:nth-child(4),
.pricing-list.asset-pricing .pricing-header span:nth-child(5),
.pricing-list.asset-pricing .pricing-header span:nth-child(6) {
  display: none;
}

.pricing-header .sortable-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pricing-header .sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #94a3b8;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 5px;
  transition:
    color 120ms ease,
    background 120ms ease;
}

.pricing-header .sort-btn:hover {
  color: #64748b;
  background: #e2e8f0;
}

.pricing-header .sort-btn.is-active {
  color: #1d4ed8;
  background: #dbeafe;
}

.pricing-header .sort-btn i {
  font-size: 13px;
  line-height: 1;
}

.pricing-card {
  display: grid;
  grid-template-columns:
    minmax(260px, 1.5fr) minmax(130px, 0.6fr) repeat(4, minmax(150px, 0.9fr))
    42px;
  gap: 16px;
  align-content: center;
  align-items: center;
  min-height: 58px;
  padding: 10px 18px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e3e9f3;
  border-radius: 0;
  box-shadow: none;
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.pricing-card:hover {
  cursor: pointer;
  background: #fbfdff;
  box-shadow: inset 3px 0 0 #1d4ed8;
}

.pricing-list.asset-pricing .pricing-card {
  grid-template-columns: minmax(260px, 1.5fr) minmax(130px, 0.6fr) minmax(200px, 1fr) 42px;
}

.pricing-list.asset-pricing .pricing-card .btn {
  grid-column: 4;
}

.pricing-card:last-child {
  border-bottom: 0;
}

.pricing-card .model-head {
  display: contents;
}

.pricing-card .model-title {
  min-width: 0;
}

.model-name-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.model-name-text {
  min-width: 0;
  overflow: hidden;
}

.model-list-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 900;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgb(15 23 42 / 6%);
}

.model-list-logo.openai {
  color: #111827;
  background: #f8fafc;
}

.model-list-logo.anthropic {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.model-list-logo.google {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.model-list-logo.bfl {
  color: #047857;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.model-list-logo.runway {
  color: #4338ca;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.model-list-logo img,
.filter-logo img,
.model-icon img,
.logo-chip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.model-list-logo img {
  width: 18px;
  height: 18px;
}

.check-list .filter-logo:has(img) {
  width: 30px;
  height: 30px;
  background: #fff !important;
  border: 1px solid #d8e2f0;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgb(15 23 42 / 6%);
}

.filter-logo img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.model-icon img {
  width: 30px;
  height: 30px;
}

.logo-chip img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.pricing-card .model-title h2 {
  margin-bottom: 1px;
  overflow: hidden;
  font-size: 15px;
  color: #081a3a;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pricing-card .model-title p {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 620;
  color: #6b778a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-row-tags {
  display: none;
}

.model-subtitle-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 360px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.92);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.model-row-tags span {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 780;
  color: #46617f;
  background: #f8fbff;
  border: 1px solid #d9e4f3;
  border-radius: 999px;
}

.pricing-card .btn {
  grid-row: 1;
  grid-column: 7;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0;
  color: #7b8797;
  background: #fff;
  border: 1px solid #d6e0ed;
  border-radius: 8px;
}

.pricing-card .btn::after {
  font-size: 22px;
  line-height: 1;
  content: '\203A';
}

.pricing-card .btn:hover {
  color: #1d4ed8;
  background: #eef5ff;
  border-color: #a9bbe0;
}

.pricing-card[hidden] {
  display: none;
}

.models-loading,
.models-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
}

.models-loading[hidden],
.models-empty[hidden] {
  display: none;
}

.models-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #1d4ed8;
  border-radius: 50%;
  animation: models-spin 0.8s linear infinite;
}

.models-loading p,
.models-empty p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

@keyframes models-spin {
  to {
    transform: rotate(360deg);
  }
}

.price-grid {
  display: contents;
}

.price-grid div {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.price-grid div:nth-child(1) {
  grid-row: 1;
  grid-column: 3;
}

.pricing-list.asset-pricing .price-grid div:nth-child(1) {
  grid-column: 3;
}

.price-grid div:nth-child(2) {
  grid-row: 1;
  grid-column: 4;
}

.price-grid div:nth-child(3) {
  grid-row: 1;
  grid-column: 5;
}

.price-grid div:nth-child(4) {
  grid-row: 1;
  grid-column: 6;
}

.price-grid span {
  display: none;
}

.price-grid strong {
  font-size: 13px;
  font-weight: 760;
  color: #243550;
}

.model-status {
  display: flex;
  align-items: center;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 999px;
}

.status-badge.available {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.status-badge.coming-soon {
  color: #9a3412;
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.model-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgb(15 23 42 / 58%);
  backdrop-filter: blur(1px);
}

.model-drawer-backdrop[hidden] {
  display: none;
}

body.model-drawer-open {
  overflow: hidden;
}

.model-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 36;
  align-self: start;
  width: min(860px, calc(100vw - 40px));
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  padding: 0;
  overflow: auto;
  background: var(--panel);
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: -28px 0 70px rgb(15 23 42 / 24%);
  scrollbar-width: thin;
}

.model-drawer[hidden] {
  display: none;
}

.model-drawer h2 {
  margin-bottom: 6px;
  font-size: 25px;
  color: #0b1f47;
  letter-spacing: -0.01em;
}

.model-drawer p:last-child {
  line-height: 1.6;
  color: var(--muted-foreground);
}

.drawer-close {
  position: sticky;
  top: 16px;
  z-index: 2;
  float: right;
  width: 34px;
  height: 34px;
  margin: 16px 18px 0 0;
  font-size: 19px;
  color: var(--muted-foreground);
  cursor: pointer;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.model-drawer-body {
  display: grid;
  gap: 0;
}

.drawer-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.drawer-section:last-child {
  border-bottom: 0;
}

.drawer-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: 30px;
}

.drawer-hero .section-kicker {
  color: var(--foreground);
}

.model-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 14px;
  font-weight: 850;
  color: #123a8c;
  background: #edf4ff;
  border: 1px solid #c7d7f7;
  border-radius: 12px;
}

.model-icon.openai {
  color: #111827;
  background: #f8fafc;
  border-color: #d8dee8;
}

.model-icon.anthropic {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.model-icon.google {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.model-icon.bfl {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.model-icon.runway {
  color: #4338ca;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.model-icon.midwayflow {
  color: #123a8c;
  background: #edf4ff;
  border-color: #c7d7f7;
}

.model-id-line {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.model-id-line code {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
}

.model-id-line button,
.protocol-item summary button {
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #536276;
  cursor: pointer;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.drawer-section h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 780;
  color: #10213f;
}

.drawer-section > p {
  font-size: 14px;
  line-height: 1.65;
  color: #526174;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.detail-grid div {
  min-width: 0;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.detail-grid span,
.price-row span,
.protocol-params p {
  display: block;
  font-size: 11px;
  font-weight: 780;
  color: #7a879a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  color: #10213f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visual-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.visual-detail-grid > div {
  min-width: 0;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.visual-detail-grid > div > span {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 780;
  color: #7a879a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.visual-detail-grid strong {
  display: block;
  font-size: 13px;
  color: #10213f;
}

.compact-detail-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid #e3e9f3;
}

.compact-detail-list > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 38px;
  padding: 9px 0;
  border-bottom: 1px solid #edf1f7;
}

.compact-detail-list > div:last-child {
  border-bottom: 0;
}

.compact-detail-list > div > span {
  font-size: 11px;
  font-weight: 820;
  color: #7a879a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.compact-detail-list strong {
  font-size: 13px;
  font-weight: 760;
  color: #10213f;
}

.model-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 12px 16px;
  margin-top: 14px;
  background: #fbfcff;
  border: 1px solid #dce5f2;
  border-radius: 8px;
}

.model-meta-strip > div {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 28px;
}

.model-meta-strip > div > span {
  font-size: 13px;
  font-weight: 780;
  color: #8a93a3;
  white-space: nowrap;
}

.model-meta-strip strong {
  font-size: 14px;
  font-weight: 720;
  color: #111827;
}

.model-meta-strip .chip-row {
  gap: 5px;
}

.model-meta-strip .logo-chip,
.model-meta-strip .type-chip {
  min-height: 24px;
  padding: 2px 8px 2px 3px;
  font-size: 11px;
}

.model-meta-strip .logo-chip b,
.model-meta-strip .type-chip b {
  min-width: 18px;
  height: 18px;
  font-size: 8px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.logo-chip,
.type-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px 4px 5px;
  font-size: 12px;
  font-weight: 720;
  color: #334155;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.logo-chip b,
.type-chip b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0;
  background: #e2e8f0;
  border-radius: 999px;
}

.logo-chip.openai b {
  color: #111827;
  background: #eef2f7;
}

.logo-chip.anthropic b {
  color: #c2410c;
  background: #fff1e8;
}

.logo-chip.google b {
  color: #1d4ed8;
  background: #e8f1ff;
}

.logo-chip.azure b {
  color: #0369a1;
  background: #e0f2fe;
}

.logo-chip.aws b {
  color: #b45309;
  background: #fff7ed;
}

.logo-chip.midwayflow b {
  color: #123a8c;
  background: #dbe8ff;
}

.logo-chip.runway b {
  color: #4338ca;
  background: #eef2ff;
}

.type-chip.text b {
  color: #1d4ed8;
  background: #eaf1ff;
}

.type-chip.image b {
  color: #047857;
  background: #ecfdf5;
}

.type-chip.file b {
  color: #6d28d9;
  background: #f5f3ff;
}

.type-chip.audio b {
  color: #c2410c;
  background: #fff7ed;
}

.type-chip.video b {
  color: #be185d;
  background: #fdf2f8;
}

.provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.section-subtitle {
  margin-top: 18px;
}

.provider-chip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  height: 32px;
  padding: 0 10px 0 6px;
  font-size: 13px;
  font-weight: 650;
  color: #334155;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.provider-chip b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: #123a8c;
  background: #dbe8ff;
  border-radius: 999px;
}

.pricing-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 12px 0 10px;
}

.pricing-switcher span {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-switcher button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  color: #526174;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pricing-switcher button.active {
  color: #123a8c;
  background: #eaf1ff;
  border-color: #9bb9f1;
}

.drawer-price-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.price-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(120px, 0.8fr));
  align-items: center;
  min-width: 640px;
  border-bottom: 1px solid var(--line);
}

.price-row.image-price-row {
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(120px, 0.8fr));
  min-width: 520px;
}

.price-row:last-child {
  border-bottom: 0;
}

.price-row > * {
  padding: 10px;
}

.price-head {
  background: #f8fbff;
}

.price-row strong {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 13px;
  color: #10213f;
  white-space: nowrap;
}

.price-row em {
  display: inline-flex;
  padding: 2px 6px;
  margin-left: 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  color: #047857;
  background: #e8fff6;
  border-radius: 999px;
}

.price-hint {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  color: #64748b;
  text-align: center;
  cursor: help;
  background: #eef2f7;
  border-radius: 999px;
}

.price-row span:not(:first-child) {
  font-size: 13px;
  font-weight: 650;
  color: #45526a;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.protocol-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.protocol-item {
  border-bottom: 1px solid var(--line);
}

.protocol-item:last-child {
  border-bottom: 0;
}

.protocol-item summary {
  display: grid;
  grid-template-columns: 22px minmax(140px, 0.8fr) minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  list-style: none;
  cursor: pointer;
  background: #fbfcff;
}

.protocol-item summary::-webkit-details-marker {
  display: none;
}

.protocol-item summary strong {
  font-size: 13px;
  color: #10213f;
}

.protocol-item summary code {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.endpoint-tip-wrap {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.endpoint-floating-tip {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  max-width: min(520px, 90vw);
  padding: 6px 10px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: none;
  box-shadow: 0 6px 18px rgb(15 23 42 / 28%);
}

.protocol-status {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
}

.protocol-status.supported {
  color: #15803d;
  background: #dcfce7;
}

.protocol-status.unsupported {
  color: #94a3b8;
  background: #eef2f7;
}

.protocol-params {
  display: grid;
  gap: 0;
  padding: 12px 16px 14px 43px;
  background: #fff;
}

.protocol-params p {
  margin-bottom: 4px;
}

.protocol-params span {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: #526174;
  border-bottom: 1px solid #edf1f7;
}

.protocol-params span:last-child {
  border-bottom: 0;
}

.protocol-params b {
  order: 2;
  color: #0f172a;
}

.example-label {
  display: inline-flex;
  padding: 5px 9px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  color: #123a8c;
  background: #edf4ff;
  border: 1px solid #c7d7f7;
  border-radius: 999px;
}

.example-stack {
  display: grid;
  gap: 10px;
}

.code-example {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.code-example summary {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  color: #10213f;
  list-style: none;
  cursor: pointer;
  background: #f8fbff;
}

.code-example summary::-webkit-details-marker {
  display: none;
}

.code-example summary::after {
  float: right;
  color: #93a0b4;
  content: '\2304';
}

.code-example[open] summary::after {
  content: '\2303';
}

.code-example p {
  margin: 12px 14px 8px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.drawer-section pre {
  max-height: 210px;
  margin: 0 14px 14px;
}

.model-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(17 19 17 / 4%);
}

.single-docs-page {
  scroll-behavior: smooth;
  background: var(--bg);
}

.docs-section-bar {
  position: sticky;
  top: 66px;
  z-index: 19;
  background: rgb(246 248 252 / 94%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.docs-section-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  width: min(1420px, calc(100vw - 40px));
  padding: 9px 0;
  margin: 0 auto;
}

.docs-section-tabs button {
  min-height: 36px;
  padding: 0 13px;
  font-size: 14px;
  font-weight: 680;
  color: #536276;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.docs-section-tabs button:hover,
.docs-section-tabs button.active {
  color: #123a8c;
  background: #dbe8ff;
}

.single-docs-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 800px) 220px;
  gap: 40px;
  width: min(1420px, calc(100vw - 40px));
  padding: 38px 0 88px;
  margin: 0 auto;
}

.single-models-page {
  display: flex;
  flex-direction: column;
  width: min(1620px, calc(100vw - 40px));
  height: calc(100vh - 66px);
  padding: 34px 0 24px;
  margin: 0 auto;
  overflow: hidden;
}

.model-directory-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid #d7e0ee;
}

.model-directory-header h1 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: 36px;
  line-height: 1.05;
  color: #081a3a;
  letter-spacing: -0.02em;
}

.model-directory-header p:not(.section-kicker) {
  max-width: 760px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #536276;
}

.model-directory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(104px, 1fr));
  overflow: hidden;
  background: #fff;
  border: 1px solid #cfdaeb;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgb(15 23 42 / 6%);
}

.model-directory-stats div {
  min-width: 0;
  padding: 13px 15px;
  border-left: 1px solid #e3e9f3;
}

.model-directory-stats div:first-child {
  border-left: 0;
}

.model-directory-stats strong {
  display: block;
  font-size: 17px;
  line-height: 1.1;
  color: #0b1f47;
}

.model-directory-stats span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 750;
  color: #75839a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.single-models-page .models-shell {
  flex: 1 1 auto;
  min-height: 0;
}

.single-models-page .model-drawer {
  top: 0;
  right: 0;
}

.single-docs-shell.support-mode {
  grid-template-columns: 224px minmax(0, 1220px);
}

.single-docs-shell.support-mode .single-docs-toc {
  display: none;
}

.single-docs-nav {
  position: sticky;
  top: 124px;
  display: grid;
  gap: 24px;
  align-self: start;
  max-height: calc(100vh - 142px);
  padding: 8px 8px 24px 0;
  overflow: auto;
}

.single-nav-group {
  display: grid;
  gap: 2px;
}

.single-docs-nav strong {
  padding: 0 10px;
  margin-bottom: 6px;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 10px;
  font-weight: 750;
  color: #8794aa;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.single-docs-nav a {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  font-size: 14px;
  line-height: 1.25;
  color: #526174;
  white-space: nowrap;
  border-radius: 7px;
}

.single-docs-nav a > span:last-child {
  min-width: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}

.single-docs-nav .nav-subhead {
  display: block;
  padding: 0 10px;
  margin: 12px 0 3px;
  font-size: 13px;
  font-weight: 780;
  color: #0b1f47;
  letter-spacing: 0;
  white-space: nowrap;
}

.single-docs-nav .api-nav-primary {
  margin-bottom: 6px;
  font-weight: 760;
  color: #123a8c;
}

.single-docs-nav a:hover,
.single-docs-nav a.active {
  font-weight: 650;
  color: #123a8c;
  background: #eaf1ff;
}

.single-docs-toc {
  position: sticky;
  top: 124px;
  align-self: start;
  max-height: calc(100vh - 142px);
  padding: 8px 0 24px 16px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  scrollbar-width: thin;
}

.toc-group {
  display: none;
  gap: 2px;
}

.toc-group.active {
  display: grid;
}

.single-docs-toc strong {
  margin-bottom: 8px;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 10px;
  font-weight: 750;
  color: #8794aa;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.single-docs-toc a {
  display: block;
  padding: 5px 4px 5px 16px;
  margin-left: -17px;
  font-size: 12px;
  line-height: 1.35;
  color: #5b697d;
  border-left: 2px solid transparent;
}

.single-docs-toc a.toc-sub {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 28px;
  font-size: 11px;
  color: #738096;
}

.single-docs-toc a:hover,
.single-docs-toc a.active {
  font-weight: 650;
  color: #123a8c;
  border-left-color: var(--accent);
}

.single-docs-article {
  min-width: 0;
}

.single-support-section .support-grid {
  margin-top: 0;
}

.single-support-section {
  padding-top: 28px;
}

.single-docs-intro,
.single-section {
  padding: 0 0 44px;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  scroll-margin-top: 132px;
}

.single-section {
  padding-top: 42px;
}

.single-docs-intro h1,
.single-docs-intro h2 {
  max-width: 720px;
  margin-bottom: 14px;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 780;
  line-height: 1.05;
  color: #0b1f47;
  letter-spacing: -0.02em;
}

.single-docs-intro p,
.single-section p,
.single-section li {
  line-height: 1.7;
  color: var(--muted-foreground);
}

.single-section h2 {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 760;
  color: #0b1f47;
  letter-spacing: -0.01em;
}

.single-section h3 {
  margin: 28px 0 12px;
  font-size: 17px;
  font-weight: 740;
  color: #10213f;
  scroll-margin-top: 90px;
}

.single-docs-intro h3,
.single-section h4 {
  margin: 28px 0 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  scroll-margin-top: 90px;
}

.single-docs-intro h3[id],
.single-section h3[id] {
  scroll-margin-top: 152px;
}

.single-docs-intro h3[id]:not(:first-of-type),
.single-section h3[id]:not(:first-of-type) {
  padding-top: 24px;
  margin-top: 46px;
  border-top: 1px solid var(--line);
}

.single-section h3[id] + p,
.single-docs-intro h3[id] + p {
  margin-top: 0;
}

.single-support-section #faq,
.single-support-section #contact {
  scroll-margin-top: 152px;
}

.single-support-section .support-panel-head h3 {
  margin-top: 0;
}

.single-section h4 code {
  font-size: inherit;
}

.single-section h5 {
  margin: 18px 0 8px;
  font-size: 13.5px;
  font-weight: 640;
  line-height: 1.4;
  color: var(--ink);
  scroll-margin-top: 90px;
}

.single-section h5 code {
  font-size: inherit;
}

.single-docs-intro p a,
.single-section p a,
.single-section li a {
  padding: 2px 7px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.single-docs-intro p a:hover,
.single-section p a:hover,
.single-section li a:hover {
  background: var(--primary);
  color: #fff;
}

.http-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.02em;
  border-radius: 6px;
}

.http-tag.post {
  color: #1d4ed8;
  background: #dbe8ff;
}

.http-tag.get {
  color: #15803d;
  background: #dcfce7;
}

.http-tag.delete {
  color: #b91c1c;
  background: #fee2e2;
}

.single-docs-nav .http-tag {
  min-width: 34px;
  height: 18px;
  margin-top: -1px;
  font-size: 9px;
  border-radius: 5px;
}

.endpoint-title {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 28px 0 0;
  margin: 56px 0 18px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  scroll-margin-top: 152px;
}

.endpoint-name {
  font-size: 22px;
  font-weight: 780;
  line-height: 1.25;
  color: #0b1f47;
  letter-spacing: -0.01em;
}

.endpoint-route {
  display: flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 4%);
}

.endpoint-route code {
  min-width: 0;
  overflow-x: auto;
  font-size: 13px;
  color: #10213f;
  white-space: nowrap;
}

.single-summary-grid,
.feature-list,
.endpoint-grid {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.single-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.single-summary-grid div,
.feature-list div,
.endpoint-card {
  min-width: 0;
  padding: 15px;
  background: linear-gradient(180deg, #fff 0%, #f9fbff 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.single-summary-grid strong,
.feature-list strong {
  display: block;
  margin-bottom: 8px;
  color: #10213f;
}

.single-summary-grid code {
  display: block;
  overflow-x: auto;
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.feature-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.feature-list p {
  margin-bottom: 0;
}

.feature-list div {
  padding: 17px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  scroll-margin-top: 90px;
}

.feature-list div:nth-child(odd) {
  padding-right: 20px;
}

.feature-list div:nth-child(even) {
  padding-left: 20px;
}

.step-block {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.step-block:first-of-type {
  border-top: 0;
}

.step-block > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.step-block h3 {
  margin-top: 0;
}

.endpoint-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.endpoint-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
}

.endpoint-card code {
  overflow-x: auto;
  font-size: 13px;
  white-space: nowrap;
}

.endpoint-card p {
  grid-column: 1 / -1;
  margin-bottom: 0;
  font-size: 14px;
}

.endpoint-detail {
  padding-top: 22px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}

.endpoint-detail > p {
  margin-bottom: 14px;
}

.endpoint-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin-bottom: 10px;
}

.endpoint-heading code {
  min-width: 0;
  padding: 4px 0;
  overflow-x: auto;
  font-size: 14px;
  color: #10213f;
  white-space: nowrap;
}

.compat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.compat-row span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 750;
  color: var(--accent);
  letter-spacing: 0.02em;
  background: #f3f7ff;
  border: 1px solid #bfd1f6;
  border-radius: 999px;
}

.sample-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.sample-block {
  min-width: 0;
}

.sample-block > span {
  display: block;
  margin: 0 0 7px;
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  font-size: 10px;
  font-weight: 750;
  color: #8794aa;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.sample-block.full {
  margin-top: 14px;
}

.single-table {
  max-height: 312px;
  margin: 14px 0;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  scrollbar-width: thin;
}

.single-table table {
  min-width: 680px;
  border-spacing: 0;
  border-collapse: separate;
}

.single-table th,
.single-table td {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
  vertical-align: top;
}

.single-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
  background: #fff;
  box-shadow: 0 1px 0 var(--line);
}

.single-table td {
  max-width: 300px;
  color: #526174;
}

.single-table td:first-child,
.single-table th:first-child {
  padding-left: 14px;
}

.single-table td:last-child,
.single-table th:last-child {
  padding-right: 14px;
}

.single-table tr {
  height: 38px;
}

.single-table code {
  font-size: 11px;
  white-space: nowrap;
}

.single-table::-webkit-scrollbar,
.single-docs-toc::-webkit-scrollbar,
.single-docs-nav::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.single-table::-webkit-scrollbar-thumb,
.single-docs-toc::-webkit-scrollbar-thumb,
.single-docs-nav::-webkit-scrollbar-thumb {
  background: #d9ded9;
  border: 2px solid #fff;
  border-radius: 999px;
}

.single-table.compact {
  margin: 12px 0;
}

.single-table.compact th,
.single-table.compact td {
  padding: 7px 10px;
  font-size: 12px;
}

.api-index .method {
  font-size: 10px;
}

.single-note {
  padding: 13px 15px;
  font-weight: 650;
  color: var(--amber) !important;
  background: var(--amber-soft);
  border: 1px solid #efd27f;
  border-radius: var(--radius);
}

.model-head {
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.model-title h2 {
  margin-bottom: 6px;
  font-size: 20px;
}

.model-title p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted-foreground);
}

.provider {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.model-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat {
  padding: 11px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat strong {
  font-size: 14px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.model-actions {
  display: flex;
  gap: 9px;
}

.comparison {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 12px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

tr:last-child td {
  border-bottom: 0;
}

@media (width <= 980px) {
  .docs-layout,
  .docs-layout.endpoint-layout,
  .models-shell,
  .models-shell.drawer-open {
    grid-template-columns: 1fr;
  }

  .model-type-bar,
  .models-shell.drawer-open .model-type-bar {
    grid-template-columns: 1fr;
  }

  .models-shell.drawer-open .model-category-tabs {
    grid-column: auto;
  }

  .side-rail,
  .toc,
  .filter-panel,
  .model-drawer,
  .single-docs-toc {
    position: static;
  }

  .toc,
  .single-docs-toc {
    display: none;
  }

  .endpoint-code-panel.inline {
    display: block;
  }

  .endpoint-code-wrap {
    display: none;
  }

  .endpoint-url-bar,
  .endpoint-meta-grid {
    grid-template-columns: 1fr;
  }

  .support-hero,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .contact-panel {
    position: static;
    padding-left: 0;
    border-left: 0;
  }

  .code-sample {
    max-height: none;
  }

  .model-grid,
  .schema-grid,
  .price-grid,
  .single-summary-grid,
  .feature-list,
  .endpoint-grid,
  .sample-pair {
    grid-template-columns: 1fr;
  }

  .single-docs-shell {
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(760px, calc(100vw - 28px));
    padding-top: 18px;
  }

  .single-docs-nav {
    position: sticky;
    top: 64px;
    z-index: 10;
    display: flex;
    gap: 6px;
    padding: 10px 0;
    overflow-x: auto;
    background: var(--bg);
  }

  .single-nav-group {
    display: flex;
    gap: 6px;
  }

  .single-docs-nav strong {
    display: none;
  }

  .single-docs-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .single-models-page {
    height: auto;
    overflow: visible;
  }

  .models-shell {
    overflow: visible;
  }

  .catalog {
    overflow: visible;
  }

  .pricing-list {
    height: auto;
    overflow-x: auto;
  }

  .pricing-header {
    position: static;
  }

  html.models-page-active,
  html.models-page-active body {
    overflow: visible;
  }
}

@media (width <= 720px) {
  .doc-heading-row,
  .numbered-title {
    flex-direction: column;
  }

  .endpoint-list div {
    grid-template-columns: 1fr;
  }

  .doc-pager {
    grid-template-columns: 1fr;
    padding: 20px 22px 24px;
  }

  .changelog-head {
    margin-bottom: 20px;
  }

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

  .change-entry {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }

  .change-entry::before,
  .change-entry div::before {
    display: none;
  }

  .change-entry time,
  .change-entry div {
    padding: 0;
  }

  .single-docs-intro,
  .single-section {
    padding: 22px;
  }

  .single-docs-intro h1 {
    font-size: 36px;
  }

  .step-block {
    grid-template-columns: 1fr;
  }

  .pager-card.next {
    text-align: left;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    padding: 14px 20px;
  }

  .topbar-left {
    min-width: 0;
  }

  .site-topnav {
    overflow-x: auto;
  }

  .topbar .docs-search-lite {
    grid-column: 1 / -1;
    order: 2;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .topbar-actions {
    justify-self: end;
  }

  .topbar.search-hidden {
    grid-template-columns: 1fr auto;
  }

  .topbar.search-hidden .topbar-actions {
    grid-column: auto;
  }

  .topnav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .actions {
    margin-left: auto;
  }

  .page {
    width: min(100% - 28px, 1220px);
  }

  h1 {
    font-size: 42px;
  }

  .hero-row,
  .catalog-toolbar,
  .model-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .mini-metrics,
  .model-actions {
    width: 100%;
  }

  .metric,
  .model-actions .btn {
    flex: 1;
  }

  .doc-section {
    padding: 22px;
  }

  .model-stats {
    grid-template-columns: 1fr;
  }

  .model-category-tabs {
    width: 100%;
  }

  .model-category-tabs button {
    flex: 1;
  }

  .pricing-list {
    overflow-x: auto;
  }

  .pricing-header,
  .pricing-card {
    min-width: 1140px;
  }

  .comparison {
    overflow-x: auto;
  }
}

@media (width <= 720px) {
  .single-docs-page {
    overflow-x: hidden;
  }

  .single-docs-page .topbar .docs-search-lite {
    flex: 1 0 100%;
    min-width: 0;
  }

  .single-docs-page .single-docs-intro h1 {
    max-width: calc(100vw - 72px);
    font-size: 30px;
    line-height: 1.04;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .single-docs-page .single-docs-shell {
    width: 100%;
    max-width: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .single-docs-page .single-docs-article,
  .single-docs-page .single-docs-intro,
  .single-docs-page .single-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .single-docs-page .single-summary-grid code,
  .single-docs-page .endpoint-card code {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .single-docs-page .single-docs-intro p,
  .single-docs-page .single-section p {
    max-width: 280px;
    overflow-wrap: normal;
  }

  .single-docs-page .single-summary-grid,
  .single-docs-page .feature-list,
  .single-docs-page .endpoint-grid,
  .single-docs-page pre {
    max-width: calc(100vw - 72px);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   申请开白 & 提交工单：通用弹窗样式（迁移自 api-price/index.vue & DocsBody.vue）
   ────────────────────────────────────────────────────────────────────────── */

/* 浮动客服按钮（全局） */
.cs-float-btn {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-strong) 100%);
  border: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -2px 4px 16px rgb(20 71 230 / 40%);
  transition:
    width 0.2s,
    box-shadow 0.2s;
  transform: translateY(-50%);
}

.cs-float-btn:hover {
  width: 50px;
  box-shadow: -4px 6px 24px rgb(20 71 230 / 55%);
}

/* 弹窗遮罩 */
.wl-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgb(15 23 42 / 58%);
  backdrop-filter: blur(2px);
  animation: wl-fade-in 0.18s ease-out;
}

.wl-dialog-backdrop[hidden] {
  display: none;
}

/* 弹窗容器 */
.wl-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1101;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgb(15 23 42 / 24%);
  transform: translate(-50%, -50%);
  animation: wl-pop-in 0.22s ease-out;
}

.wl-dialog[hidden] {
  display: none;
}

body.wl-dialog-open,
body.ticket-dialog-open {
  overflow: hidden;
}

@keyframes wl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wl-pop-in {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 弹窗头部 */
.wl-dialog-header {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.wl-header-accent {
  height: 4px;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #f59e0b 100%);
}

/* 工单弹窗使用主色调强调条 */
.wl-header-accent--ticket {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-strong) 100%);
}

.wl-header-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 24px 16px;
}

.wl-header-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  font-size: 20px;
  color: #b45309;
  background: linear-gradient(135deg, rgb(245 158 11 / 15%), rgb(251 191 36 / 10%));
  border-radius: 10px;
}

.wl-header-icon--ticket {
  color: var(--primary);
  background: linear-gradient(135deg, var(--accent-soft), rgb(20 71 230 / 8%));
}

.wl-header-text {
  flex: 1;
  min-width: 0;
}

.wl-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.wl-model-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #b45309;
  background: rgb(245 158 11 / 10%);
  border: 1px solid rgb(245 158 11 / 25%);
  border-radius: 20px;
}

.wl-model-badge i {
  font-size: 12px;
}

.wl-model-badge--ticket {
  color: var(--primary);
  background: var(--accent-soft);
  border-color: rgb(20 71 230 / 25%);
}

.wl-model-badge[hidden] {
  display: none;
}

.wl-close-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  font-size: 16px;
  color: var(--muted-foreground);
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 6px;
  transition:
    background 0.15s,
    color 0.15s;
}

.wl-close-btn:hover {
  color: var(--ink);
  background: var(--muted);
}

/* 表单 */
.wl-form {
  padding: 20px 24px 8px;
}

.wl-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.wl-label {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wl-input,
.wl-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
}

.wl-input:hover,
.wl-textarea:hover {
  border-color: var(--primary);
}

.wl-input:focus,
.wl-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(20 71 230 / 15%);
}

.wl-textarea {
  resize: none;
  min-height: 80px;
}

/* 底部按钮 */
.wl-footer {
  display: flex;
  gap: 10px;
  padding: 8px 24px 20px;
}

.wl-btn-cancel {
  flex: 0 0 auto;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  background: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 40px;
}

.wl-btn-cancel:hover {
  background: var(--accent);
  border-color: var(--line-strong);
}

.wl-btn-submit {
  display: flex;
  flex: 1;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-strong) 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgb(20 71 230 / 35%);
  transition:
    opacity 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
  min-height: 40px;
}

.wl-btn-submit:hover:not(:disabled):not(.is-loading) {
  box-shadow: 0 6px 18px rgb(20 71 230 / 45%);
  opacity: 0.9;
  transform: translateY(-1px);
}

.wl-btn-submit:active:not(:disabled):not(.is-loading) {
  box-shadow: 0 2px 8px rgb(20 71 230 / 30%);
  transform: translateY(0);
}

.wl-btn-submit:disabled,
.wl-btn-submit.is-loading {
  cursor: not-allowed;
  opacity: 0.7;
}

.wl-btn-submit.is-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border: 2px solid rgb(255 255 255 / 30%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wl-spin 0.6s linear infinite;
}

.wl-btn-submit i {
  font-size: 15px;
}

.wl-btn-submit.is-loading i {
  display: none;
}

@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 抽屉内申请开白按钮（位于 model-id-line 中 Copy 按钮右侧） */
/* 使用更具体的选择器覆盖 .model-id-line button 的默认浅色样式 */
.model-id-line .btn-whitelist {
  flex-shrink: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  min-height: 34px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: #f59e0b;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  transition:
    background 0.15s,
    transform 0.1s;
}

.model-id-line .btn-whitelist:hover,
.model-id-line .btn-whitelist:active {
  background: #f59e0b;
  box-shadow: none;
  transform: none;
}

.model-id-line .btn-whitelist i {
  font-size: 15px;
}

/* Toast 提示 */
.docs-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgb(16 185 129 / 30%);
  transform: translate(-50%, -20px);
  opacity: 0;
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
  pointer-events: none;
}

.docs-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.docs-toast--error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 12px 32px rgb(239 68 68 / 30%);
}

.docs-toast::before {
  content: '\2713';
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgb(255 255 255 / 25%);
  border-radius: 50%;
}

.docs-toast--error::before {
  content: '!';
}

/* 响应式：窄屏适配 */
@media (width <= 480px) {
  .wl-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .wl-header-body {
    padding: 16px 18px 12px;
  }

  .wl-form {
    padding: 16px 18px 4px;
  }

  .wl-footer {
    padding: 4px 18px 16px;
  }

  .cs-float-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* 暗色主题适配（如未来启用） */
@media (prefers-color-scheme: dark) {
  .wl-dialog {
    background: #1f2937;
    box-shadow: 0 24px 60px rgb(0 0 0 / 60%);
  }

  .wl-input,
  .wl-textarea {
    color: #f3f4f6;
    background: #111827;
    border-color: #374151;
  }

  .wl-input:focus,
  .wl-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(20 71 230 / 25%);
  }
}

/* ─── Currency selector inside docs pricing section ─── */
.pricing-note-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pricing-note-row > p {
  flex: 1 1 auto;
  margin: 0;
}

.currency-setting {
  position: relative;
  flex-shrink: 0;
}

.currency-setting-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: #526174;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.currency-setting-btn:hover {
  color: #123a8c;
  background: #f5f8ff;
  border-color: #9bb9f1;
}

.currency-setting-btn i {
  font-size: 14px;
}

.currency-setting-current {
  min-width: 28px;
  text-align: center;
  letter-spacing: 0.02em;
}

.currency-setting-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 180px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgb(15 23 42 / 12%);
}

.currency-setting-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.currency-setting-option {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: #10213f;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 6px;
  transition:
    background 0.2s,
    color 0.2s;
}

.currency-setting-option:hover {
  color: #123a8c;
  background: #f5f8ff;
}

.currency-setting-option.is-selected {
  font-weight: 700;
  color: #123a8c;
  background: #eaf1ff;
}

.currency-setting-option i {
  font-size: 14px;
  color: var(--primary);
}

.currency-setting-option-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.currency-setting-option-label {
  line-height: 1.3;
}

.currency-setting-option-code {
  font-size: 11px;
  font-weight: 600;
  color: #7a879a;
  letter-spacing: 0.04em;
}