/* ================= API Docs ================= */
.docs-hero { padding: calc(var(--header-h) + 60px) 0 60px; }
.docs-hero-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.docs-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.docs-hero .lead { margin-bottom: 0; }
.docs-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.docs-hero-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d4defc; font-family: var(--font-mono); font-size: 0.85rem;
}
.docs-hero-meta i { color: #7fa6ff; }

/* Layout */
.docs-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 56px; padding: 48px 0 100px; align-items: start; }

.docs-sidebar { position: sticky; top: 150px; max-height: calc(100vh - 170px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.ds-search { position: relative; margin-bottom: 22px; }
.ds-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; }
.ds-search input {
  width: 100%; padding: 12px 40px 12px 38px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg-soft); outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.ds-search input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(0, 67, 209, 0.1); }
.ds-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }

.ds-group { margin-bottom: 22px; }
.ds-group p { margin: 0 0 8px; padding-left: 12px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ds-group a {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: 0.92rem; font-weight: 500;
  transition: background 0.25s, color 0.25s, padding 0.3s var(--ease);
}
.ds-group a::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--primary); transform: scaleY(0); transition: transform 0.3s var(--ease); }
.ds-group a:hover { background: var(--bg-soft); color: var(--primary); }
.ds-group a.active { background: var(--primary-50); color: var(--primary); padding-left: 16px; }
.ds-group a.active::before { transform: scaleY(1); }
.ds-group a.hidden-by-search { display: none; }
.ds-group b { font-family: var(--font-mono); font-size: 0.62rem; padding: 2px 6px; border-radius: 5px; letter-spacing: 0.02em; }
b.get, .method.get { background: #dcfce7; color: #15803d; }
b.post, .method.post { background: #fff1e0; color: #c2410c; }

.ds-toggle { display: none; }

/* Content */
.docs-content { min-width: 0; }
.doc-sec { padding: 10px 0 46px; margin-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.doc-sec:last-child { border-bottom: 0; }
.doc-sec h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.doc-sec > p { color: var(--ink-2); max-width: 760px; }
.doc-sec code:not(pre code) { font-family: var(--font-mono); font-size: 0.86em; padding: 2px 7px; border-radius: 6px; background: var(--primary-50); color: var(--primary-600); }
.doc-sec.flash { animation: flash 1.2s var(--ease); }
@keyframes flash { 0% { background: var(--primary-50); } 100% { background: transparent; } }

.ep-head { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 14px; font-family: var(--font-mono); }
.ep-head code { font-size: 0.95rem; color: var(--ink); }
.method { font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem; padding: 5px 10px; border-radius: 8px; }

.feature-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.feature-pills span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--primary-50); color: var(--primary); font-weight: 600; font-size: 0.88rem; }

.callout { display: flex; gap: 14px; padding: 16px 20px; border-radius: 14px; margin: 18px 0; font-size: 0.95rem; line-height: 1.6; }
.callout i { margin-top: 4px; }
.callout.info { background: var(--primary-50); border: 1px solid var(--primary-100); color: var(--ink-2); }
.callout.info i { color: var(--primary); }
.callout.warn { background: #fff8eb; border: 1px solid #fde7c2; color: #7a4b00; }
.callout.warn i { color: #e08a00; }
.callout a { font-weight: 600; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th { text-align: left; padding: 12px 16px; background: var(--bg-soft); font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 0.85rem; }
td { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
td em { font-style: normal; font-size: 0.72rem; color: #e5484d; font-weight: 600; margin-left: 4px; }
tbody tr { transition: background 0.2s; }
tbody tr:hover { background: #fafcff; }
.st { font-family: var(--font-mono); font-weight: 600; padding: 3px 9px; border-radius: 6px; font-size: 0.8rem; }
.st.ok { background: #dcfce7; color: #15803d; }
.st.warn { background: #fff1e0; color: #c2410c; }
.st.err { background: #ffe4e6; color: #be123c; }

/* Code blocks */
.code-block, .code-tabs { margin: 18px 0; border-radius: 16px; overflow: hidden; background: #0b1230; box-shadow: 0 16px 40px -20px rgba(4, 10, 35, 0.6); }
.cb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8rem; color: #8fa3d9; font-family: var(--font-mono); }
.st-dot { font-size: 0.5rem; color: #3ee39a; margin-right: 6px; vertical-align: 2px; }
.code-block pre, .code-tabs pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.7; color: #d6e0ff; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  color: #c5d2f7; font-size: 0.78rem; cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.copy-btn.copied { background: #12b76a; border-color: #12b76a; color: #fff; }

.ct-tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06); align-items: flex-end; }
.ct-tab {
  position: relative;
  padding: 9px 16px; border: 0; background: none; cursor: pointer;
  color: #8fa3d9; font-family: var(--font-mono); font-size: 0.8rem;
  border-radius: 8px 8px 0 0;
  transition: color 0.25s, background 0.25s;
}
.ct-tab:hover { color: #fff; }
.ct-tab.active { color: #fff; background: #0b1230; }
.ct-tab.active::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 2px; background: var(--grad); }
.ct-tabs .copy-btn { margin-left: auto; margin-bottom: 6px; }
.ct-panel { display: none; }
.ct-panel.active { display: block; animation: fadeIn 0.35s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }

/* syntax colours */
.tk-k { color: #7fb2ff; } .tk-s { color: #a5e8a0; } .tk-n { color: #ffb86b; } .tk-c { color: #6a7aa8; } .tk-f { color: #f5a3ff; }

.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.support-card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; border-radius: 16px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: 0.9rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
}
.support-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary-200); color: var(--ink-2); }
.support-card i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; flex-shrink: 0; }
.support-card strong { display: block; font-family: var(--font-head); color: var(--ink); }

/* Responsive */
@media (max-width: 1024px) {
  .docs-layout { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .docs-sidebar {
    position: fixed; z-index: 1100;
    left: 0; top: 0; bottom: 0;
    width: min(320px, 86vw);
    max-height: none;
    padding: 24px 20px;
    background: #fff;
    box-shadow: 30px 0 60px -20px rgba(4, 10, 35, 0.4);
    transform: translateX(-105%);
    transition: transform 0.5s var(--ease);
  }
  .docs-sidebar.open { transform: none; }
  .ds-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; left: 16px; bottom: 26px; z-index: 950;
    padding: 13px 20px; border-radius: 100px; border: 0; cursor: pointer;
    background: var(--ink); color: #fff;
    font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
    box-shadow: var(--shadow-lg);
  }
  .support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .docs-hero-meta { display: none; }
  .code-block pre, .code-tabs pre { font-size: 0.76rem; padding: 14px 16px; }
  .ct-tab { padding: 8px 10px; font-size: 0.74rem; }
}

/* ---------- DocBridge document sections ---------- */
.dt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 4px; padding: 4px 10px; border-radius: 100px;
  background: var(--primary); color: #fff;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
}
.dt-pill i { font-size: 0.7rem; }
.sub-h {
  display: flex; align-items: center; gap: 10px;
  margin: 30px 0 4px;
  font-size: 1.1rem;
}
.sub-h::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--grad); }
.req { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; }
.req.yes { background: #dcfce7; color: #15803d; }
.req.no { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--line); }
td a { font-weight: 600; }

.items-box {
  margin: 26px 0 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 150px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.items-box[open] { border-color: var(--primary-200); box-shadow: var(--shadow); }
.items-box summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 16px 20px;
  cursor: pointer; list-style: none;
  background: var(--bg-soft);
  transition: background 0.25s;
}
.items-box summary::-webkit-details-marker { display: none; }
.items-box summary:hover { background: var(--primary-50); }
.items-box summary > span { font-family: var(--font-head); font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.items-box summary > span i { color: var(--primary); }
.items-box summary small { color: var(--muted); font-size: 0.85rem; }
.items-box .chev { margin-left: auto; color: var(--primary); transition: transform 0.4s var(--ease-back); }
.items-box[open] .chev { transform: rotate(180deg); }
.items-box .table-wrap { margin: 0; border: 0; border-radius: 0; }
.items-box[open] .table-wrap { animation: fadeIn 0.4s var(--ease); }

@media (max-width: 680px) {
  .ep-head { flex-wrap: wrap; }
  .items-box summary small { width: 100%; order: 3; }
}