:root {
  --api-manual-accent: #36b37e;
  --api-manual-accent-dark: #278c62;
  --api-manual-ink: #253a52;
  --api-manual-muted: #60778f;
  --api-manual-border: #d9e4ef;
  --api-manual-surface: #ffffff;
  --api-manual-soft: #f4f8fc;
}

.api-manual-main code {
  font-size: 0.9em;
}

.api-manual-section,
.api-manual-nav-wrap,
#create,
#delete,
#list,
#errors,
#faq {
  scroll-margin-top: 108px;
}

.api-manual-hero {
  padding: 2.6rem 0 1.35rem;
}

.api-manual-hero-surface {
  border-radius: 22px;
  border: 1px solid #7cc8a8;
  background: linear-gradient(145deg, #63c7a0 0%, #5ebf9a 55%, #51b68f 100%);
  box-shadow: 0 24px 55px rgba(17, 48, 38, 0.2);
  color: #fff;
  text-align: center;
  padding: clamp(1.8rem, 3.5vw, 3rem);
}

.api-manual-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  font-weight: 800;
  margin: 0 0 0.8rem;
  opacity: 0.9;
}

.api-manual-hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.1;
  color: #fff;
}

.api-manual-hero p {
  margin: 1rem auto 0;
  max-width: 820px;
  font-size: 1.03rem;
  opacity: 0.95;
}

.api-manual-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.api-manual-hero .btn-outline-primary {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.api-manual-hero .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.api-manual-hero-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  opacity: 0.98;
}

.api-manual-hero-foot code {
  color: #114635;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
}

.api-manual-nav-wrap {
  padding: 0.5rem 0 1.1rem;
}

.api-manual-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--api-manual-surface);
  border: 1px solid var(--api-manual-border);
  border-radius: 16px;
  padding: 0.8rem;
  box-shadow: 0 10px 24px rgba(30, 52, 74, 0.08);
}

.api-manual-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  color: #2a4a64;
  border: 1px solid #dbe7f2;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: #f6fbff;
  transition: all 0.15s ease;
}

.api-manual-nav a:hover,
.api-manual-nav a:focus-visible {
  color: #17344e;
  border-color: #91d5b7;
  background: #e9f8ef;
}

.api-manual-section-head {
  margin-bottom: 1rem;
}

.api-manual-section-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  color: var(--api-manual-ink);
}

.api-manual-section-head p {
  margin-top: 0.65rem;
  color: var(--api-manual-muted);
  max-width: 920px;
}

.api-manual-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 0.8rem;
}

.api-manual-gallery-card {
  background: var(--api-manual-surface);
  border: 1px solid var(--api-manual-border);
  border-radius: 14px;
  padding: 0.65rem;
  box-shadow: 0 8px 20px rgba(24, 45, 66, 0.07);
}

.api-manual-gallery-preview {
  position: relative;
  min-height: 110px;
  border-radius: 10px;
  border: 1px solid #d5e1ed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}

.api-manual-gallery-preview img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

.api-manual-gallery-card h3 {
  margin: 0.58rem 0 0.16rem;
  font-size: 0.9rem;
  color: #213851;
}

.api-manual-gallery-card p {
  margin: 0;
  font-size: 0.78rem;
  color: #61788e;
}

.api-manual-gallery-preview-plain {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.api-manual-gallery-preview-contrast {
  background: linear-gradient(180deg, #0f1723 0%, #223347 100%);
}

.api-manual-gallery-preview-contrast img {
  filter: invert(1) grayscale(1);
}

.api-manual-gallery-preview-brand {
  background: linear-gradient(180deg, #e8f0ff 0%, #dce8ff 100%);
}

.api-manual-gallery-preview-logo {
  background: linear-gradient(180deg, #eff7ff 0%, #e2effd 100%);
}

.api-manual-gallery-preview-frame {
  background: linear-gradient(180deg, #ffeef1 0%, #f8dce4 100%);
  padding-top: 16px;
}

.api-manual-gallery-preview-gradient {
  background: linear-gradient(140deg, #e4f6ef 0%, #dff2ff 48%, #e9e1ff 100%);
}

.api-manual-sample-logo {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dce7f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(20, 38, 58, 0.14);
}

.api-manual-sample-logo img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.api-manual-sample-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 16px;
  background: #4a1824;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.api-endpoint-card {
  padding: 0.95rem 1rem;
  margin-bottom: 1rem;
}

.api-endpoint-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}

.api-method {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

.api-method-post {
  color: #fff;
  background: linear-gradient(135deg, #1ea96f 0%, #168458 100%);
}

.api-endpoint-card code {
  background: #eef3f9;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  padding: 0.18rem 0.45rem;
  color: #183751;
}

.api-manual-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

.api-info-card {
  padding: 1rem;
  border-radius: 14px;
}

.api-info-card h3 {
  font-size: 1.04rem;
  margin: 0 0 0.25rem;
}

.api-info-card ul {
  margin: 0;
  padding-left: 1rem;
  color: #38536d;
}

.api-info-card li {
  margin-bottom: 0.35rem;
}

.api-manual-subsection {
  margin-top: 1.2rem;
}

.api-manual-subsection h3 {
  margin-bottom: 0.7rem;
  font-size: 1.2rem;
  color: #20364f;
}

.api-manual-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--api-manual-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--api-manual-surface);
}

.api-manual-table thead th {
  background: #ecf2f8;
  color: #1f3a56;
  font-weight: 800;
  border-bottom: 1px solid var(--api-manual-border);
  white-space: nowrap;
}

.api-manual-table th,
.api-manual-table td {
  padding: 0.7rem;
  vertical-align: top;
  color: #2f4b66;
}

.api-manual-table tbody tr + tr td {
  border-top: 1px solid #e4edf6;
}

.api-param-name {
  font-weight: 800;
  color: #1d3f5f;
}

.api-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.45rem;
}

.api-chip {
  background: #f2f7fd;
  border: 1px solid #d8e5f1;
  color: #28506d;
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.16rem 0.45rem;
}

.api-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.api-example-card {
  padding: 1rem;
  border-radius: 14px;
}

.api-example-card-wide {
  grid-column: 1 / -1;
}

.api-example-card h4 {
  font-size: 1rem;
  margin: 0 0 0.65rem;
}

.api-code-wrap {
  position: relative;
}

.api-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid #bfd2e7;
  background: #fff;
  color: #214b70;
  border-radius: 7px;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.api-copy-btn:hover,
.api-copy-btn:focus-visible {
  background: #eff7ff;
  border-color: #8fb0d4;
}

.api-copy-btn.is-copied {
  border-color: #80cfa8;
  color: #0f7244;
  background: #ecfaef;
}

.api-code-block {
  margin: 0;
  border: 1px solid #dbe7f3;
  background: #f6faff;
  border-radius: 12px;
  padding: 0.95rem;
  color: #17344e;
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.api-code-block code {
  white-space: pre;
}

.api-example-preview {
  position: relative;
  margin-top: 0.75rem;
  min-height: 120px;
  border-radius: 12px;
  border: 1px dashed #cddceb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.api-example-preview img {
  width: 104px;
  height: 104px;
  object-fit: contain;
}

.api-example-preview-plain {
  background: #fff;
}

.api-example-preview-logo {
  background: linear-gradient(180deg, #e5effe 0%, #deebfb 100%);
}

.api-example-preview-frame {
  background: linear-gradient(180deg, #fae4eb 0%, #f4ccd8 100%);
  padding-top: 18px;
}

.api-status-pill {
  display: inline-flex;
  min-width: 38px;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #d5e2ef;
  background: #f2f8ff;
  color: #224766;
  padding: 0.06rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
}

.api-manual-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1rem;
}

.api-faq-list {
  display: grid;
  gap: 0.75rem;
}

.api-faq-item {
  padding: 0.92rem 1rem;
  border-radius: 12px;
}

.api-faq-item h3 {
  margin: 0;
  font-size: 1rem;
}

.api-faq-item p {
  margin: 0.4rem 0 0;
  color: #526d85;
}

.api-manual-contact-card {
  padding: 1rem;
  border-radius: 14px;
  height: fit-content;
}

.api-manual-contact-card h3 {
  margin: 0;
  font-size: 1.12rem;
}

.api-manual-contact-card p {
  margin: 0.6rem 0 0;
  color: #5d748b;
}

.api-manual-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  margin-top: 0.95rem;
}

.api-security-callout {
  padding: 1.2rem;
  border-radius: 14px;
  border: 1px solid #d6e5f3;
  background: linear-gradient(180deg, #f9fcff 0%, #f4f9fe 100%);
}

.api-security-callout h2 {
  margin: 0 0 0.55rem;
  font-size: 1.34rem;
}

.api-security-callout ul {
  margin: 0 0 0.95rem;
  padding-left: 1rem;
  color: #3f5a72;
}

.api-security-callout li {
  margin-bottom: 0.42rem;
}

@media (max-width: 1200px) {
  .api-manual-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .api-manual-two-col,
  .api-example-grid,
  .api-manual-faq-layout {
    grid-template-columns: 1fr;
  }

  .api-manual-nav {
    justify-content: flex-start;
  }

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

@media (max-width: 575.98px) {
  .api-manual-hero {
    padding-top: 1.8rem;
  }

  .api-manual-hero-surface {
    border-radius: 18px;
    padding: 1.2rem;
  }

  .api-manual-gallery {
    grid-template-columns: 1fr;
  }

  .api-manual-nav {
    padding: 0.6rem;
  }

  .api-manual-nav a {
    width: 100%;
    justify-content: flex-start;
  }
}