body {
  margin: 0;
  padding: 0;
}

.doc-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}
a.doc-cta,
a.doc-cta:link,
a.doc-cta:visited {
  flex: 1 1 240px;
  min-width: 240px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-radius: 10px;
  text-decoration: none !important;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.doc-cta * {
  text-decoration: none !important;
}
a.doc-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
a.doc-cta strong {
  font-size: 16px;
  font-weight: 600;
}
a.doc-cta span {
  font-size: 14px;
  line-height: 1.45;
}
a.doc-cta.doc-cta--primary,
a.doc-cta.doc-cta--primary:link,
a.doc-cta.doc-cta--primary:visited {
  background: #2563eb;
  border-color: #2563eb;
}
a.doc-cta.doc-cta--primary,
a.doc-cta.doc-cta--primary *,
a.doc-cta.doc-cta--primary strong,
a.doc-cta.doc-cta--primary span {
  color: #ffffff !important;
}
a.doc-cta.doc-cta--primary span {
  opacity: 0.92;
}
a.doc-cta.doc-cta--primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
a.doc-cta.doc-cta--secondary,
a.doc-cta.doc-cta--secondary:link,
a.doc-cta.doc-cta--secondary:visited {
  background: #ffffff;
  border-color: #d1d5db;
}
a.doc-cta.doc-cta--secondary,
a.doc-cta.doc-cta--secondary *,
a.doc-cta.doc-cta--secondary strong {
  color: #111827 !important;
}
a.doc-cta.doc-cta--secondary span {
  color: #4b5563 !important;
}
a.doc-cta.doc-cta--secondary:hover {
  border-color: #2563eb;
}

.doc-callout {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #2563eb;
  border-radius: 4px;
  background: #eff6ff;
}
.doc-callout > :first-child {
  margin-top: 0;
}
.doc-callout > :last-child {
  margin-bottom: 0;
}
.doc-callout--warning {
  border-color: #d97706;
  background: #fffbeb;
}

.doc-support-chip {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.doc-support-chip:hover {
  background: #1f2937;
}
@media (max-width: 900px) {
  .doc-support-chip {
    bottom: 12px;
    right: 12px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

table.doc-next-steps {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
}
table.doc-next-steps th,
table.doc-next-steps td {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  vertical-align: top;
  text-align: left;
}

.doc-codeblock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
}
.doc-codeblock__panel {
  border-radius: 8px;
  background: #263238;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.doc-codeblock__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6edf3;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.doc-codeblock__title {
  color: #e6edf3;
}
.doc-codeblock__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.doc-codeblock__panel[data-status-class="error"] .doc-codeblock__dot {
  background: #ef4444;
}
.doc-codeblock__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #e6edf3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 4px 26px 4px 10px;
  font: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23e6edf3' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.doc-codeblock__select:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.doc-codeblock__select option {
  color: #111827;
  background: #ffffff;
}
.doc-codeblock__panel pre {
  margin: 0;
  border-radius: 0;
  background: #263238 !important;
}

.doc-codeblock__panel pre code,
.doc-codeblock__panel pre {
  color: #e6edf3;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: #93a1a1; }
.token.punctuation { color: #cbd5e1; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted { color: #f78c6c; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted { color: #c3e88d; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { color: #89ddff; }
.token.atrule,
.token.attr-value,
.token.keyword { color: #c792ea; }
.token.function,
.token.class-name { color: #82aaff; }
.token.regex,
.token.important,
.token.variable { color: #ffcb6b; }

pre[data-copy-decorated] {
  position: relative;
}
.doc-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #9ca3af;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.doc-copy-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
pre:hover .doc-copy-btn {
  opacity: 1;
}
.doc-copy-btn:hover,
.doc-copy-btn:focus {
  color: #f3f4f6;
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
  outline: none;
}
.doc-copy-btn--copied,
.doc-copy-btn--copied:hover,
.doc-copy-btn--copied:focus {
  color: #4ade80;
  background: transparent;
  opacity: 1;
}