/* ============================================================
   doc-api/v1 — Documentação API Maxbot
   Design: minimalista, identidade "comando" (API cmd-based):
   títulos de endpoint e chips em mono, cmd-bar estilo terminal,
   laranja Maxbot usado com parcimônia (ação/estado ativo).
   ============================================================ */

:root {
	--bg:         #ffffff;
	--bg-side:    #f7f8fa;
	--bg-raise:   #fafbfc;
	--bg-hover:   #f1f3f7;
	--ink:        #1c2433;
	--ink-2:      #5b6472;
	--ink-3:      #8d95a5;
	--line:       #e7e9ef;
	--line-2:     #dbdfe8;

	--brand:      #f26b21;
	--brand-ink:  #c9500a;
	--brand-soft: #fdeee3;

	--code-bg:    #101828;
	--code-line:  #1e293f;
	--code-ink:   #e6eaf4;
	--code-dim:   #7d8aa3;

	--get:     #2563eb;  --get-bg:  #e8effd;
	--add:     #188544;  --add-bg:  #e6f5ec;
	--upd:     #b45309;  --upd-bg:  #fbf1df;
	--del:     #c42b2b;  --del-bg:  #fcebeb;
	--send:    #7c3aed;  --send-bg: #f2ecfd;
	--hook:    #0e7490;  --hook-bg: #e3f4f8;

	--warn-bd: #f0a92e;  --warn-bg: #fdf6e7;
	--info-bd: #3b82f6;  --info-bg: #eaf2fe;
	--ok-bd:   #2bb673;  --ok-bg:   #e9f7f0;

	--radius:   10px;
	--side-w:   296px;
	--font-ui:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono:'JetBrains Mono', Consolas, 'SF Mono', Menlo, monospace;
	--shadow:   0 1px 2px rgba(16, 24, 40, .05);
}

[data-theme="dark"] {
	--bg:         #0e1420;
	--bg-side:    #111a2b;
	--bg-raise:   #131c2e;
	--bg-hover:   #1d2941;
	--ink:        #eaeef6;
	--ink-2:      #b0bbce;
	--ink-3:      #8b99b1;
	--line:       #232f4a;
	--line-2:     #2e3c5c;

	--brand:      #f97b31;
	--brand-ink:  #fb923c;
	--brand-soft: #33210f;

	--code-bg:    #0b111e;
	--code-line:  #1b2740;

	--get:     #6ea3ff;  --get-bg:  #14213c;
	--add:     #4ade80;  --add-bg:  #10281a;
	--upd:     #fbbf24;  --upd-bg:  #2d2310;
	--del:     #f87171;  --del-bg:  #321518;
	--send:    #b596f9;  --send-bg: #241a3d;
	--hook:    #4dd0e5;  --hook-bg: #0e2933;

	--warn-bd: #d9982a;  --warn-bg: #2a2210;
	--info-bd: #3b82f6;  --info-bg: #14213c;
	--ok-bd:   #2bb673;  --ok-bg:   #0f2a1d;

	--shadow:   0 1px 2px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------ base */

* { box-sizing: border-box; }

html { height: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 400 15px/1.65 var(--font-ui);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--brand-soft); }

/* nos paineis de codigo (fundo escuro sempre) a selecao precisa de cor propria */
.content pre ::selection, .content pre::selection,
.code-card ::selection { background: rgba(59, 130, 246, .45); color: #fff; }

[data-theme="dark"] ::selection { background: rgba(59, 130, 246, .45); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* barras de rolagem no tema (Chromium/Firefox novos) */

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

.content pre { scrollbar-color: #3a486b transparent; }

/* fallback WebKit/Safari */

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
	background-color: var(--line-2);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); }

::-webkit-scrollbar-corner { background: transparent; }

.content pre::-webkit-scrollbar-thumb { background-color: #3a486b; }

/* ------------------------------------------------ layout */

.app { min-height: 100vh; }

.sidebar {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: var(--side-w);
	display: flex;
	flex-direction: column;
	background: var(--bg-side);
	border-right: 1px solid var(--line);
	z-index: 40;
}

.main {
	margin-left: var(--side-w);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.content {
	flex: 1;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 36px 48px 72px;
	outline: none;
}

.doc-footer {
	border-top: 1px solid var(--line);
	padding: 18px 48px;
	font-size: 12.5px;
	color: var(--ink-3);
	text-align: center;
}

/* ------------------------------------------------ topbar */

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	height: 54px;
	padding: 0 24px;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.topbar { background: var(--bg); }
}

.crumbs {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crumbs b { color: var(--ink); font-weight: 600; }

.crumbs .crumb-sep { margin: 0 7px; color: var(--line-2); }

.crumbs .crumb-ep { font-family: var(--font-mono); font-size: 12.5px; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 36px; height: 36px;
	padding: 8px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
}

.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink-2); }

.theme-toggle {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	padding: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink-2);
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

.theme-toggle:hover { border-color: var(--line-2); color: var(--ink); }

.theme-toggle svg { width: 17px; height: 17px; }

[data-theme="light"] .ico-moon { display: none; }
[data-theme="dark"]  .ico-sun  { display: none; }

/* ------------------------------------------------ sidebar: marca + busca */

.side-brand {
	display: flex;
	align-items: center;
	padding: 16px 18px 12px;
}

.brand-link { display: flex; align-items: center; gap: 9px; text-decoration: none !important; }

.brand-logo { height: 30px; width: auto; }

/* no escuro o logo vira monocromatico branco (mesmo padrao do editor de fluxo v5) */
[data-theme="dark"] .brand-logo {
	filter: brightness(0) invert(1);
}

.brand-tag {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--ink-3);
	letter-spacing: .04em;
	position: relative;
	top: 3px;
}

.brand-tag b { color: var(--brand); font-weight: 700; }

.side-search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 2px 14px 10px;
}

.search-ico {
	position: absolute;
	left: 11px;
	width: 15px; height: 15px;
	color: var(--ink-3);
	pointer-events: none;
}

#search {
	width: 100%;
	padding: 8px 56px 8px 33px;
	font: 400 13.5px var(--font-ui);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}

#search::placeholder { color: var(--ink-3); }

#search:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

.search-kbd {
	position: absolute;
	right: 10px;
	padding: 1px 6px;
	font: 500 11px var(--font-mono);
	color: var(--ink-3);
	background: var(--bg-side);
	border: 1px solid var(--line-2);
	border-bottom-width: 2px;
	border-radius: 5px;
	pointer-events: none;
}

.search-clear {
	position: absolute;
	right: 8px;
	display: none;
	width: 20px; height: 20px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--ink-3);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.search-clear:hover { color: var(--ink); background: var(--bg-hover); }

.side-search.has-term .search-clear { display: grid; place-items: center; }
.side-search.has-term .search-kbd { display: none; }

/* ------------------------------------------------ sidebar: navegação */

.side-nav {
	flex: 1;
	overflow-y: auto;
	padding: 4px 10px 24px;
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
}

.nav-home {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 4px 8px;
	padding: 7px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-2);
	border-radius: 8px;
	text-decoration: none !important;
}

.nav-home:hover { background: var(--bg-hover); color: var(--ink); }

.nav-home.active { background: var(--brand-soft); color: var(--brand-ink); }

.nav-group { margin: 2px 0; }

.nav-group-btn {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 8px;
	padding: 7px 10px 7px 14px;
	font: 600 12px/1 var(--font-ui);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-2);
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s, color .12s;
}

.nav-group-btn:hover { background: var(--bg-hover); color: var(--ink); }

.nav-group-title { flex: 1; min-width: 0; text-align: left; line-height: 1.35; }

.nav-group-btn .nav-count {
	margin-left: auto;
	font-weight: 500;
	font-size: 11px;
	color: var(--ink-3);
}

.nav-group-btn .nav-caret {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--ink-3);
	transition: transform .18s ease;
	transform: rotate(-90deg);
}

.nav-group.open .nav-group-btn .nav-caret { transform: rotate(0); }

.nav-group-items {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .2s ease;
}

.nav-group.open .nav-group-items { grid-template-rows: 1fr; }

.nav-group-items > ul {
	overflow: hidden;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 1px 0 1px 8px;
	padding: 5px 10px;
	border-left: 1px solid var(--line);
	border-radius: 0 8px 8px 0;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink-2);
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-item:hover { background: var(--bg-hover); color: var(--ink); }

.nav-item.active {
	background: var(--brand-soft);
	border-left-color: var(--brand);
	color: var(--brand-ink);
	font-weight: 600;
}

.nav-item .nav-item-title { overflow: hidden; text-overflow: ellipsis; }

.nav-item.is-page .nav-item-title { font-family: var(--font-ui); font-size: 13px; }

.nav-item mark, .ep-index mark {
	background: var(--brand-soft);
	color: var(--brand-ink);
	border-radius: 2px;
	padding: 0 1px;
}

.nav-empty {
	margin: 18px 12px;
	font-size: 13px;
	color: var(--ink-3);
	text-align: center;
}

.noscript-note { margin: 10px 16px; font-size: 12.5px; color: var(--ink-3); }

/* bullet dos itens de lista (sidebar + índice da home): cinza; laranja só no foco/ativo */

.nav-dot, .ep-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--line-2);
	transition: background .15s;
}

.nav-item:hover .nav-dot,
.nav-item.active .nav-dot,
.ep-index-group a:hover .ep-dot { background: var(--brand); }

/* no escuro o --line-2 some contra o fundo — bullet um tom acima */
[data-theme="dark"] .nav-dot, [data-theme="dark"] .ep-dot { background: #43547a; }

/* ------------------------------------------------ conteúdo: tipografia */

.content h1, .content h2, .content h3, .content h4 { line-height: 1.3; }

.content p { margin: 0 0 14px; }

.content ul, .content ol { margin: 0 0 14px; padding-left: 22px; }

.content li { margin: 3px 0; }

.content li > ul, .content li > ol { margin-bottom: 4px; }

.content b, .content strong { font-weight: 600; }

.text-justify { text-align: left !important; }

.section-block { margin: 0; }

/* chips de endpoint no meio do texto */

.label, a.label {
	display: inline-block;
	padding: 1px 7px;
	font: 600 12px/1.6 var(--font-mono);
	color: var(--brand-ink);
	background: var(--brand-soft);
	border-radius: 6px;
	text-decoration: none !important;
	white-space: nowrap;
}

a.label:hover { filter: brightness(.96); text-decoration: underline !important; }

.label-hook { color: var(--hook); background: var(--hook-bg); }

/* callouts (requisitos) */

.callout {
	margin: 14px 0;
	padding: 14px 16px;
	border-left: 4px solid var(--line-2);
	border-radius: 8px;
	font-size: 14px;
}

.callout > strong { display: block; margin-bottom: 6px; font-size: 14.5px; }

.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }

.callout-warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.callout-info { border-color: var(--info-bd); background: var(--info-bg); }
.callout-ok   { border-color: var(--ok-bd);   background: var(--ok-bg); }

.callout code, code.inline-url, #api-url {
	padding: 2px 7px;
	font: 600 12.5px var(--font-mono);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 6px;
	word-break: break-all;
}

/* botão copiar inline */

.copy-inline {
	margin-left: 6px;
	padding: 3px 10px;
	font: 600 12px var(--font-ui);
	color: var(--ink-2);
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 7px;
	cursor: pointer;
	transition: color .12s, border-color .12s;
	vertical-align: middle;
}

.copy-inline:hover { color: var(--ink); border-color: var(--ink-3); }

.copy-inline.copied { color: var(--add); border-color: var(--add); }

/* ------------------------------------------------ cabeçalho de página / hero */

.home-hero { margin-bottom: 40px; }

.eyebrow {
	margin: 0 0 10px;
	font: 700 12px/1 var(--font-ui);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand);
}

.ver-chip {
	margin-left: 8px;
	padding: 2px 8px;
	font: 700 11px var(--font-mono);
	letter-spacing: 0;
	color: var(--ink-2);
	background: var(--bg-side);
	border: 1px solid var(--line);
	border-radius: 999px;
	vertical-align: middle;
}

.home-hero h1 {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.ep-head { margin-bottom: 30px; }

.ep-title {
	margin: 0 0 8px;
	font-family: var(--font-mono);
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.01em;
	word-break: break-word;
}

.ep-title.page-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: -.02em; }

.ep-desc {
	margin: 0 0 18px;
	max-width: 70ch;
	font-size: 15.5px;
	color: var(--ink-2);
}

/* cmd-bar — assinatura da doc */

.cmd-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.pill {
	padding: 3px 10px;
	font: 700 11.5px/1.6 var(--font-mono);
	letter-spacing: .05em;
	border-radius: 7px;
}

.pill-post { color: #fff; background: var(--brand); }

.pill-hook { color: var(--hook); background: var(--hook-bg); border: 1px solid var(--hook); }

.cmd-url {
	font: 500 13px var(--font-mono);
	color: var(--ink);
	word-break: break-all;
}

.cmd-chip {
	padding: 2px 9px;
	font: 500 12px var(--font-mono);
	color: var(--ink-2);
	background: var(--bg-side);
	border: 1px dashed var(--line-2);
	border-radius: 7px;
}

.cmd-bar .copy-inline { margin-left: auto; }

/* ações da página (copiar p/ LLM, ver em markdown) */

.page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.page-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font: 600 12.5px var(--font-ui);
	color: var(--ink-2);
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
	transition: color .12s, border-color .12s;
}

.page-act:hover { color: var(--brand-ink); border-color: var(--brand); }

.page-act.copied { color: var(--add); border-color: var(--add); }

.page-act svg { width: 14px; height: 14px; flex: none; }

.md-bar {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.content .md-pre {
	background: var(--bg-side);
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	white-space: pre-wrap;
	word-break: break-word;
	font: 400 12.5px/1.65 var(--font-mono);
}

/* títulos de seção */

.sec-title {
	margin: 34px 0 12px;
	padding-top: 18px;
	font-size: 17px;
	font-weight: 700;
	border-top: 1px solid var(--line);
}

.sec-title.big {
	margin-top: 44px;
	font-size: 22px;
	letter-spacing: -.01em;
}

.sec-hint { font-weight: 500; font-size: 12px; color: var(--ink-3); margin-left: 8px; }

/* ------------------------------------------------ índice de endpoints (home) */

.ep-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
	margin-top: 18px;
}

.ep-index-group {
	padding: 14px 16px 10px;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.ep-index-group h3 {
	margin: 0 0 8px;
	font: 700 11.5px/1 var(--font-ui);
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ink-2);
}

.ep-index-group ul { margin: 0; padding: 0; list-style: none; }

.ep-index-group li { margin: 0; }

.ep-index-group a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	margin: 0 -8px;
	border-radius: 7px;
	text-decoration: none !important;
	color: var(--ink);
	min-width: 0;
}

.ep-index-group a:hover { background: var(--bg-hover); }

.ep-index-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font: 500 12.5px var(--font-mono);
}

.ep-index-name.is-page { font-family: var(--font-ui); font-size: 13px; }

.ep-index-desc {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------ código */

/* fallback (antes do doc.js envelopar) */
.content pre {
	margin: 0 0 16px;
	padding: 16px 18px;
	overflow-x: auto;
	background: var(--code-bg);
	color: var(--code-ink);
	border-radius: var(--radius);
	font: 400 12.8px/1.6 var(--font-mono);
	tab-size: 4;
}

.content pre code { font: inherit; background: none; padding: 0; color: inherit; display: block; }

/* cartão de código montado pelo doc.js */

.code-card {
	margin: 0 0 18px;
	background: var(--code-bg);
	border: 1px solid var(--code-line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.code-card pre { margin: 0; border-radius: 0; border: 0; }

.code-head {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 7px 10px 7px 14px;
	background: var(--code-line);
}

.code-lang {
	font: 600 11px/1 var(--font-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--code-dim);
}

.code-tabs { display: flex; gap: 2px; }

.code-tab {
	padding: 4px 11px;
	font: 600 12px var(--font-ui);
	color: var(--code-dim);
	background: none;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	transition: color .12s, background .12s;
}

.code-tab:hover { color: var(--code-ink); }

.code-tab.active { color: var(--code-ink); background: rgba(255, 255, 255, .09); }

.code-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 10px;
	font: 600 12px var(--font-ui);
	color: var(--code-dim);
	background: none;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	transition: color .12s, border-color .12s;
}

.code-copy:hover { color: var(--code-ink); border-color: rgba(255, 255, 255, .18); }

.code-copy.copied { color: #4ade80; }

.code-copy svg { width: 13px; height: 13px; }

.code-pane { display: none; }

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

/* blocos longos: preview colapsado com fade + "Ver completo" */

.code-card.clamped { position: relative; }

.code-card.clamped .code-pane.active {
	max-height: 430px;
	overflow: hidden;
}

.code-fade { display: none; }

.code-card.clamped .code-fade {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 120px;
	padding-bottom: 14px;
	background: linear-gradient(to bottom, rgba(16, 24, 40, 0), var(--code-bg) 80%);
}

.code-card.expanded .code-fade {
	display: flex;
	justify-content: center;
	padding: 8px 0 10px;
	background: none;
	border-top: 1px solid var(--code-line);
}

.code-expand {
	padding: 7px 18px;
	font: 600 12.5px var(--font-ui);
	color: var(--code-ink);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	cursor: pointer;
	transition: background .12s;
}

.code-expand:hover { background: rgba(255, 255, 255, .18); }

/* tokens de sintaxe */

.tk-key { color: #7dd3fc; }
.tk-str { color: #86efac; }
.tk-num { color: #fbbf24; }
.tk-bool { color: #f472b6; }
.tk-pun { color: #94a3b8; }
.tk-var { color: #93c5fd; }
.tk-com { color: #8b95ab; font-style: italic; }
.tk-kw  { color: #c4b5fd; }
.tk-tag { color: #fda4af; }

/* ------------------------------------------------ testador de endpoint */

.try-box {
	margin: 18px 0 24px;
	background: var(--bg-raise);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.try-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	font: 600 14px var(--font-ui);
	color: var(--brand-ink);
	background: none;
	border: 0;
	cursor: pointer;
	transition: background .12s;
}

.try-toggle:hover { background: var(--bg-hover); }

.try-toggle svg { width: 15px; height: 15px; flex: none; }

.try-caret {
	margin-left: auto;
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .18s ease;
	transform: rotate(-90deg);
}

.try-box.open .try-caret { transform: rotate(0); }

.try-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .22s ease;
}

.try-box.open .try-body { grid-template-rows: 1fr; }

.try-body > div { overflow: hidden; padding: 0 16px; }

.try-note { margin: 4px 0 10px; font-size: 12.5px; color: var(--ink-3); }

.try-hide { display: none !important; }

.try-modes {
	display: inline-flex;
	gap: 2px;
	margin: 2px 0 10px;
	padding: 3px;
	background: var(--bg-side);
	border: 1px solid var(--line);
	border-radius: 9px;
}

.try-mode {
	padding: 5px 14px;
	font: 600 12.5px var(--font-ui);
	color: var(--ink-2);
	background: none;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	transition: color .12s, background .12s;
}

.try-mode:hover:not(.active) { color: var(--ink); }

.try-mode.active {
	color: var(--ink);
	background: var(--bg);
	box-shadow: var(--shadow);
}

.try-jsonwrap { margin: 8px 0; }

.try-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 10px;
	align-items: start;
	margin: 8px 0;
}

.try-key {
	padding-top: 8px;
	font: 600 12.5px var(--font-mono);
	color: var(--ink-2);
	word-break: break-all;
}

.try-key .req {
	margin-left: 6px;
	font: 600 10.5px var(--font-ui);
	font-style: normal;
	color: var(--del);
	white-space: nowrap;
}

.try-input {
	width: 100%;
	padding: 8px 10px;
	font: 400 13px/1.55 var(--font-mono);
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 8px;
	transition: border-color .12s, box-shadow .12s;
}

.try-input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
}

.try-input[readonly] { color: var(--ink-3); background: var(--bg-side); }

.try-input.bad { border-color: var(--del); box-shadow: 0 0 0 3px var(--del-bg); }

textarea.try-input { resize: vertical; }

.try-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
}

.btn-send {
	padding: 9px 18px;
	font: 600 13.5px var(--font-ui);
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s;
}

.btn-send:hover { background: var(--brand-ink); }

.btn-send:disabled { opacity: .6; cursor: default; }

.try-status { font: 600 12.5px var(--font-mono); color: var(--ink-3); }

.try-status.ok { color: var(--add); }

.try-status.fail { color: var(--del); }

.try-resp { margin-bottom: 16px; }

.try-resp:empty { margin: 0; }

.try-resp .code-card { margin: 0; }

@media (max-width: 560px) {
	.try-row { grid-template-columns: 1fr; gap: 4px; }

	.try-key { padding-top: 0; }
}

/* ------------------------------------------------ estados: skeleton / erro */

.skeleton { animation: sk-pulse 1.2s ease-in-out infinite; }

@keyframes sk-pulse { 50% { opacity: .55; } }

.sk-line {
	height: 14px;
	margin: 12px 0;
	border-radius: 6px;
	background: var(--bg-hover);
}

.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.w80 { width: 80%; }

.sk-block { height: 150px; margin: 20px 0; border-radius: var(--radius); background: var(--bg-hover); }

.load-error {
	margin: 60px auto;
	max-width: 420px;
	padding: 26px;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-raise);
}

.load-error h2 { margin: 0 0 8px; font-size: 17px; }

.load-error p { color: var(--ink-2); font-size: 14px; }

.btn-retry {
	margin-top: 8px;
	padding: 8px 18px;
	font: 600 13.5px var(--font-ui);
	color: #fff;
	background: var(--brand);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.btn-retry:hover { background: var(--brand-ink); }

/* ------------------------------------------------ pager (anterior / próximo) */

.pager {
	display: flex;
	gap: 14px;
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.pager a {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none !important;
	transition: border-color .15s, background .15s;
}

.pager a:hover { border-color: var(--brand); background: var(--bg-raise); }

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

.pager .pager-dir {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.pager .pager-slug {
	display: block;
	margin-top: 3px;
	font: 600 13.5px var(--font-mono);
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------ voltar ao topo */

.back-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 25;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	padding: 0;
	color: var(--ink-2);
	background: var(--bg);
	border: 1px solid var(--line-2);
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(16, 24, 40, .12);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.back-top.show { opacity: 1; pointer-events: auto; }

.back-top:hover { color: var(--ink); border-color: var(--ink-3); }

/* ------------------------------------------------ responsivo */

.backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 35;
	background: rgba(10, 14, 24, .45);
}

@media (max-width: 1060px) {
	.sidebar {
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(0, 0, 0, .2);
	}

	body.nav-open .sidebar { transform: translateX(0); }

	body.nav-open .backdrop { display: block; }

	.main { margin-left: 0; }

	.nav-toggle { display: flex; }

	.content { padding: 26px 22px 60px; }

	.doc-footer { padding: 16px 22px; }
}

@media (max-width: 560px) {
	.code-head { flex-wrap: wrap; }

	.home-hero h1 { font-size: 27px; }

	.ep-title { font-size: 21px; }

	.cmd-bar .copy-inline { margin-left: 0; }

	.pager { flex-direction: column; }

	.back-top { right: 16px; bottom: 16px; }
}

/* impressão */

@media print {
	.sidebar, .topbar, .backdrop, .back-top, .pager { display: none !important; }

	.main { margin: 0; }

	.content pre { white-space: pre-wrap; }
}