/* QR Image API v1 documentation. Scoped to avoid changing the directory/QR builder. */
.qr-v1-docs { padding-top: 34px; padding-bottom: 78px; }
.qr-v1-docs code, .qr-v1-docs pre, .api-endpoint { font-family: "JetBrains Mono", ui-monospace, monospace; }
.api-hero { padding: 48px 0 51px; }
.api-hero .hero-title { max-width: 800px; }
.api-hero .hero-lead { max-width: 710px; }
.api-hero-actions { margin-top: 27px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.api-hero-actions .btn { border-radius: 10px; font-size: 12px; font-weight: 800; padding: 11px 17px; }
.api-hero-actions .btn-outline-light { border-color: rgb(217 226 236 / 43%); }
.api-hero-actions .btn-outline-light:hover { color: #102a43; }
.api-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 19px; }
.api-hero-chips span { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 7%); border-radius: 99px; color: #e9f2fc; padding: 5px 11px; font-size: 11px; font-weight: 700; }
.api-hero-chips i { color: #86efac; }
.api-doc-breadcrumb { color: #728398; font-size: 12px; margin-bottom: 22px; }
.api-doc-breadcrumb a { color: #315875; text-decoration: none; }
.api-doc-breadcrumb a:hover { text-decoration: underline; }
.api-doc-breadcrumb i { padding: 0 7px; font-size: 10px; }
.api-endpoint-card { display: flex; gap: 17px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 25px; background: #fff; border: 1px solid var(--vnb-border, #dce5ee); border-radius: 15px; box-shadow: 0 4px 16px rgb(15 35 66 / 4%); }
.api-endpoint-heading { min-width: 0; }
.api-endpoint-label { color: #6d7c90; font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; }
.api-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 7px 0 0; font-weight: 700; color: #172f4c; overflow-wrap: anywhere; font-size: clamp(12px, 1.6vw, 15px); }
.api-endpoint .api-method { border: 1px solid #b8decf; border-radius: 6px; background: #e5f5ee; color: #136448; font-size: 11px; padding: 3px 7px; }
.api-endpoint-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.api-endpoint-actions .btn { border-radius: 9px; font-size: 12px; font-weight: 700; }
.api-doc-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 17px 0 32px; }
.api-doc-jump a { text-decoration: none; border: 1px solid #d8e4ee; color: #49647e; background: #fff; border-radius: 99px; font-size: 11px; font-weight: 800; padding: 9px 14px; }
.api-doc-jump a:hover, .api-doc-jump a:focus-visible { background: #edf6fb; border-color: #97c7d9; color: #143b5b; }
.api-section { scroll-margin-top: 99px; margin-top: 43px; }
.api-section-heading { margin: 0 0 20px; }
.api-section-heading .embed-eyebrow { margin-bottom: 8px; }
.api-section-heading h2 { margin: 0 0 8px; font-size: clamp(21px, 2.7vw, 27px); font-weight: 800; letter-spacing: -.65px; color: #163551; }
.api-section-heading p { margin: 0; color: #657d92; font-size: 13px; line-height: 1.8; max-width: 790px; }
.api-feature-card { height: 100%; border: 1px solid #e1e9f2; border-radius: 15px; padding: 20px; background: #fff; }
.api-feature-number { display: grid; place-items: center; background: #e6f4fa; border: 1px solid #d2e9f3; color: #143952; border-radius: 11px; font-weight: 800; width: 37px; height: 37px; margin-bottom: 15px; }
.api-feature-card h3 { margin: 0 0 8px; color: #1d3852; font-size: 14px; font-weight: 800; }
.api-feature-card p { margin: 0; color: #647c92; font-size: 12px; line-height: 1.75; }
.api-panel { background: #fff; border: 1px solid #dfe9f2; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 30px rgb(15 35 66 / 4%); }
.api-panel-top { padding: 18px 23px; border-bottom: 1px solid #e3ebf3; }
.api-panel-top h3 { color: #1a354f; font-size: 15px; font-weight: 800; margin: 0; }
.api-panel-top p { color: #71859a; font-size: 11px; line-height: 1.6; margin: 6px 0 0; }
.api-builder { padding: 24px; }
.api-builder .form-label { font-size: 11px; color: #405b72; font-weight: 800; margin-bottom: 7px; }
.api-builder .form-control, .api-builder .form-select { border-color: #d6e3ef; border-radius: 9px; min-height: 44px; font-size: 13px; color: #17314b; }
.api-builder .form-control:focus, .api-builder .form-select:focus { border-color: #59a7c8; box-shadow: 0 0 0 3px rgb(40 154 198 / 14%); }
.api-builder .form-text { font-size: 10px; line-height: 1.6; color: #6c8194; }
.api-builder .btn-primary { border-radius: 10px; font-size: 12px; font-weight: 800; min-height: 45px; }
.api-demo-note { background: #f3f8fc; padding: 11px 13px; color: #5d7489; font-size: 11px; line-height: 1.7; border: 1px solid #dce9f2; border-radius: 10px; margin-bottom: 20px; }
.api-demo-note i { color: #1e708e; }
.api-builder-alert { font-size: 12px; line-height: 1.6; margin: 0 0 16px; }
.api-preview-panel { height: 100%; background: #fff; }
.api-preview-stage { display: grid; min-height: 328px; place-items: center; padding: 24px; background: radial-gradient(circle at 40% 35%, #fff, #f5f9fd); }
.api-preview-paper { position: relative; display: grid; place-items: center; width: min(100%, 290px); aspect-ratio: 1 / 1; background: #fff; border: 1px solid #e3ebf3; border-radius: 14px; box-shadow: 0 12px 28px rgb(27 54 76 / 7%); padding: 17px; }
.api-preview-paper img { display: block; width: 100%; height: auto; image-rendering: pixelated; object-fit: contain; }
.api-preview-placeholder { display: flex; flex-direction: column; gap: 13px; justify-content: center; align-items: center; color: #71849a; text-align: center; padding: 17px; line-height: 1.7; font-size: 12px; }
.api-preview-placeholder i { color: #8ca7bc; font-size: 45px; }
.api-preview-panel .api-preview-footer { padding: 19px 22px; background: #f8fbfd; border-top: 1px solid #e3ebf3; }
.api-preview-status { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; color: #647f92; line-height: 1.6; margin-bottom: 13px; }
.api-preview-status i { flex: 0 0 auto; }
.api-preview-footer .btn { font-size: 11px; font-weight: 800; border-radius: 9px; }
.api-inline-output { margin-top: 18px; border-radius: 12px; border: 1px solid #dfe9f2; background: #f8fbfe; padding: 15px 18px; }
.api-inline-output p { margin: 0 0 6px; color: #6b8296; font-size: 11px; font-weight: 700; }
.api-inline-output code { display: block; font-size: 11px; color: #244a67; overflow-wrap: anywhere; line-height: 1.8; }
.api-docs-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.api-docs-code-grid .embed-code-panel { min-width: 0; }
.api-docs-code-grid .api-code-wide { grid-column: 1 / -1; }
.api-code-tip { color: #647e93; font-size: 11px; line-height: 1.8; margin: 15px 0 0; }
.api-params { background: #fff; border: 1px solid #e3eaf4; border-radius: 13px; overflow: hidden; }
.api-params .table { min-width: 680px; }
.api-params .table th, .api-params .table td { padding: 14px 16px; vertical-align: middle; border-color: #e7eef5; font-size: 12px; line-height: 1.7; }
.api-params thead th { font-size: 11px; background: #f3f7fb; color: #48677c; font-weight: 800; }
.api-params tbody th { font-weight: 750; color: #294d66; }
.api-params .table td { color: #5c7489; }
.api-params code { color: #205c7e; font-size: 11px; }
.api-params .badge { font-size: 10px; letter-spacing: .1px; }
.api-response-item { border: 1px solid #e3eaf2; border-radius: 12px; background: #fff; padding: 17px 19px; height: 100%; }
.api-response-code { font-family: "JetBrains Mono", monospace; color: #1a5371; font-weight: 800; font-size: 16px; }
.api-response-item strong { display: block; margin: 8px 0 5px; color: #233e55; font-size: 13px; }
.api-response-item p { color: #647d91; font-size: 11px; line-height: 1.75; margin: 0; }
.api-notice { display: flex; gap: 12px; padding: 18px 21px; border: 1px solid #f3deb6; border-radius: 12px; color: #785c28; background: #fffaf0; font-size: 12px; line-height: 1.9; }
.api-notice i { flex: 0 0 auto; font-size: 19px; }
.api-notice p { margin: 0; }
.api-faq details { background: #fff; border: 1px solid #e3ebf3; border-radius: 12px; margin-top: 9px; }
.api-faq summary { cursor: pointer; padding: 14px 18px; color: #24435b; font-size: 13px; font-weight: 800; }
.api-faq details p { padding: 0 18px 17px; font-size: 12px; line-height: 1.85; color: #607a8c; margin: 0; }
.api-faq details[open] { border-color: #b8d9e7; background: #fbfdff; }
.api-cta-card { border: 1px solid #b9ddea; border-radius: 15px; background: #edf8fc; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.api-cta-card h3 { color: #153d58; font-size: 15px; margin: 0 0 6px; font-weight: 800; }
.api-cta-card p { color: #57768b; font-size: 12px; line-height: 1.7; margin: 0; }
.api-cta-card .btn { flex-shrink: 0; font-size: 11px; border-radius: 9px; font-weight: 800; }
.api-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); border-radius: 9px; background: #142e46; color: #fff; font-size: 12px; padding: 10px 18px; box-shadow: 0 14px 35px rgb(7 26 42 / 20%); z-index: 1100; }
.api-toast[hidden] { display: none; }
@media (max-width: 991.98px) {
  .api-docs-code-grid { grid-template-columns: minmax(0,1fr); }
  .api-cta-card { align-items: flex-start; }
}
@media (max-width: 767.98px) {
  .qr-v1-docs { padding-top: 22px; padding-bottom: 48px; }
  .api-hero { padding: 36px 0 39px; }
  .api-endpoint-card { padding: 17px; }
  .api-endpoint-actions { width: 100%; }
  .api-endpoint-actions .btn { flex: 1; }
  .api-builder { padding: 18px; }
  .api-doc-jump { gap: 6px; }
  .api-doc-jump a { font-size: 10px; padding: 8px 11px; }
  .api-section { margin-top: 36px; }
  .api-preview-stage { min-height: 300px; }
  .api-preview-paper { max-width: 246px; }
  .api-cta-card { flex-direction: column; }
  .api-cta-card .btn { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-v1-docs * { scroll-behavior: auto; }
}
/* Author styles must not accidentally override the native [hidden] state. */
.api-preview-paper [hidden], .api-builder [hidden], .api-toast[hidden] { display: none !important; }