/* ==========================================================================
   Kode Booster — Dify / Mintlify-style documentation theme
   Loaded after the base theme. Re-skins the whole UI without changing
   document content. Icons: a small, purposeful set of Lucide icons
   applied via CSS masks. Brand logo image is untouched.
   ========================================================================== */

:root {
  --kb-accent: #0060ff;
  --kb-accent-hover: #0034ff;
  --kb-accent-soft: rgba(0, 96, 255, .08);
  --kb-bg: #ffffff;
  --kb-bg-alt: #fafafa;
  --kb-bg-soft: #f4f4f5;
  --kb-text: #09090b;
  --kb-text-mute: #52525b;
  --kb-text-subtle: #a1a1aa;
  --kb-border: #e4e4e7;
  --kb-divider: #f4f4f5;
  --kb-code-bg: #fafafa;
  --kb-radius: 12px;
  --kb-radius-sm: 8px;

  /* Lucide icons (mask sources) */
  --kb-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --kb-ico-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E");
  --kb-ico-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --kb-ico-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E");
  --kb-ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --kb-ico-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --kb-ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --kb-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --kb-ico-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
  --kb-ico-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --kb-ico-octagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16h.01'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z'/%3E%3C/svg%3E");
  --kb-ico-circle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");

  /* Remap base theme icon variables to Lucide */
  --external-link-icon: var(--kb-ico-external);
  --external-link-c-icon: currentColor;
  --code-copy-icon: var(--kb-ico-copy);

  /* Theme variables */
  --vp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
  --vp-font-heading: var(--vp-font);
  --vp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --vp-c-accent: #0060ff !important;
  --vp-c-accent-bg: #0060ff !important;
  --vp-c-accent-hover: #0034ff !important;
  --vp-c-accent-soft: rgba(0, 96, 255, .08) !important;
  --vp-c-accent-text: #ffffff !important;
  --vp-c-bg: #ffffff !important;
  --vp-c-bg-alt: #fafafa !important;
  --vp-c-bg-elv: #ffffff !important;
  --vp-c-bg-elv-soft: #ffffff !important;
  --vp-c-bg-soft: #f4f4f5 !important;
  --vp-c-text: #09090b !important;
  --vp-c-text-mute: #52525b !important;
  --vp-c-text-subtle: #a1a1aa !important;
  --vp-c-border: #e4e4e7 !important;
  --vp-c-border-hard: #d4d4d8 !important;
  --vp-c-divider: #f4f4f5 !important;
  --vp-c-control: rgba(0, 0, 0, .04) !important;
  --vp-c-control-hover: rgba(0, 0, 0, .06) !important;
  --vp-c-shadow: rgba(0, 0, 0, .08) !important;
}

[data-theme=dark] {
  --kb-accent: #4d8dff;
  --kb-accent-hover: #7aa8ff;
  --kb-accent-soft: rgba(77, 141, 255, .14);
  --kb-bg: #0b0c0e;
  --kb-bg-alt: #171717;
  --kb-bg-soft: #1c1c1f;
  --kb-text: #fafafa;
  --kb-text-mute: #a1a1aa;
  --kb-text-subtle: #71717a;
  --kb-border: #27272a;
  --kb-divider: #1f1f23;
  --kb-code-bg: #131316;

  --vp-c-accent: #4d8dff !important;
  --vp-c-accent-bg: #4d8dff !important;
  --vp-c-accent-hover: #7aa8ff !important;
  --vp-c-accent-soft: rgba(77, 141, 255, .14) !important;
  --vp-c-bg: #0b0c0e !important;
  --vp-c-bg-alt: #171717 !important;
  --vp-c-bg-elv: #171717 !important;
  --vp-c-bg-elv-soft: #171717 !important;
  --vp-c-bg-soft: #1c1c1f !important;
  --vp-c-text: #fafafa !important;
  --vp-c-text-mute: #a1a1aa !important;
  --vp-c-text-subtle: #71717a !important;
  --vp-c-border: #27272a !important;
  --vp-c-border-hard: #3f3f46 !important;
  --vp-c-divider: #1f1f23 !important;
  --vp-c-control: rgba(255, 255, 255, .06) !important;
  --vp-c-control-hover: rgba(255, 255, 255, .1) !important;
  --vp-c-shadow: rgba(0, 0, 0, .5) !important;
}

/* ---- Global ------------------------------------------------------------- */
html, body, .theme-container {
  font-family: var(--vp-font) !important;
  background: var(--vp-c-bg) !important;
  color: var(--vp-c-text) !important;
}
body { -webkit-font-smoothing: antialiased; }
::selection { background: rgba(0, 96, 255, .18); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--vp-c-border-hard);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--kb-accent); background-clip: content-box; }

/* ---- Navbar ------------------------------------------------------------- */
.vp-navbar {
  background: var(--vp-c-bg) !important;
  border-bottom: 1px solid var(--vp-c-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.vp-site-name {
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--vp-c-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.vp-nav-logo { border-radius: 8px !important; box-shadow: none !important; }
.vp-navbar .vp-brand:hover .vp-site-name { color: var(--kb-accent) !important; }

.vp-navbar .vp-nav-item > a,
.vp-navbar .vp-dropdown-title {
  color: var(--vp-c-text-mute) !important;
  font-weight: 500 !important;
  background: none !important;
  border-radius: var(--kb-radius-sm) !important;
  padding: 6px 10px !important;
}
.vp-navbar .vp-nav-item > a:hover,
.vp-navbar .vp-dropdown-title:hover {
  color: var(--vp-c-text) !important;
  background: var(--vp-c-control) !important;
}
.vp-navbar .vp-nav-item > a.route-link-active,
.vp-navbar .vp-dropdown-wrapper:has(.route-link-active) .vp-dropdown-title {
  color: var(--kb-accent) !important;
}
/* hide the old pill underline indicator */
.vp-nav-item > .auto-link:before { display: none !important; }

/* Dropdown chevron -> Lucide */
.vp-dropdown-title .arrow {
  display: inline-block;
  width: .9em; height: .9em;
  margin-inline-start: .35em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--kb-ico-chevron-down) center / contain no-repeat;
  mask: var(--kb-ico-chevron-down) center / contain no-repeat;
  transform: none !important;
}
.vp-dropdown-title .arrow::before { content: none !important; }

.vp-dropdown {
  background: var(--vp-c-bg-elv) !important;
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .18) !important;
  padding: 6px !important;
}
.vp-dropdown-item > a,
.vp-dropdown-subitem > a {
  border-radius: var(--kb-radius-sm) !important;
  color: var(--vp-c-text-mute) !important;
}
.vp-dropdown-item > a:hover,
.vp-dropdown-subitem > a:hover {
  background: var(--vp-c-control) !important;
  color: var(--vp-c-text) !important;
}

/* Search button -> Mintlify-style input */
.slimsearch-button {
  background: var(--vp-c-bg) !important;
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius-sm) !important;
  color: var(--vp-c-text-subtle) !important;
  padding: 6px 10px !important;
  min-width: 220px;
  justify-content: flex-start;
  transition: border-color .15s ease;
}
.slimsearch-button:hover { border-color: var(--kb-accent) !important; }
.slimsearch-placeholder { color: var(--vp-c-text-subtle) !important; }
.slimsearch-key {
  background: var(--vp-c-bg-soft) !important;
  border: 1px solid var(--vp-c-border) !important;
  border-radius: 5px !important;
  color: var(--vp-c-text-subtle) !important;
  padding: 0 5px !important;
}
/* search glyph -> Lucide search */
.slimsearch-button .search-icon {
  background: currentColor;
  -webkit-mask: var(--kb-ico-search) center / contain no-repeat;
  mask: var(--kb-ico-search) center / contain no-repeat;
}
.slimsearch-button .search-icon path { display: none; }

/* Color mode switch -> Lucide, plain button */
.vp-color-mode-switch {
  border: none !important;
  background: none !important;
  padding: 6px !important;
  color: var(--vp-c-text-mute) !important;
}
.vp-color-mode-switch:hover { color: var(--kb-accent) !important; }
.vp-color-mode-switch svg path { display: none !important; }
.vp-color-mode-switch .auto-icon {
  background: currentColor;
  -webkit-mask: var(--kb-ico-monitor) center / contain no-repeat;
  mask: var(--kb-ico-monitor) center / contain no-repeat;
}
.vp-color-mode-switch .dark-icon {
  background: currentColor;
  -webkit-mask: var(--kb-ico-moon) center / contain no-repeat;
  mask: var(--kb-ico-moon) center / contain no-repeat;
}
.vp-color-mode-switch .light-icon {
  background: currentColor;
  -webkit-mask: var(--kb-ico-sun) center / contain no-repeat;
  mask: var(--kb-ico-sun) center / contain no-repeat;
}

/* ---- Sidebar ------------------------------------------------------------ */
.vp-sidebar {
  background: var(--vp-c-bg) !important;
  border-right: 1px solid var(--vp-c-border) !important;
}
.vp-sidebar-title,
.vp-sidebar-header {
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--vp-c-text-subtle) !important;
}
.vp-sidebar-link {
  border-radius: 6px !important;
  padding: 6px 10px !important;
  margin: 1px 0 !important;
  font-size: .875rem !important;
  color: var(--vp-c-text-mute) !important;
  transition: background .12s ease, color .12s ease;
}
.vp-sidebar-link:hover {
  background: var(--vp-c-bg-alt) !important;
  color: var(--vp-c-text) !important;
  transform: none !important;
}
.vp-sidebar-link.route-link-active,
.vp-sidebar-link.active {
  background: var(--vp-c-accent-soft) !important;
  color: var(--kb-accent) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.vp-sidebar-group { margin-bottom: 4px; }

/* ---- Content ------------------------------------------------------------ */
.vp-page { padding-top: 1.5rem; }
.vp-page-title {
  font-weight: 800 !important;
  letter-spacing: -.02em;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--vp-c-text) !important;
}
.vp-breadcrumb { color: var(--vp-c-text-subtle) !important; font-size: .85rem; }
.vp-breadcrumb a { color: var(--vp-c-text-mute) !important; }

#markdown-content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--vp-c-text-mute);
}
#markdown-content p { margin: 1em 0; }

#markdown-content h1,
#markdown-content h2,
#markdown-content h3,
#markdown-content h4,
#markdown-content h5,
#markdown-content h6 {
  font-family: var(--vp-font) !important;
  color: var(--vp-c-text) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  scroll-margin-top: 90px;
}
#markdown-content h1 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
#markdown-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  margin-top: 2.5rem;
  padding: 0 0 .55rem 0 !important;
  border-bottom: 1px solid var(--vp-c-border) !important;
}
#markdown-content h2::before { content: none !important; }
#markdown-content h3 {
  font-size: 1.2rem !important;
  font-weight: 650 !important;
  margin-top: 1.9rem;
  padding-left: 0 !important;
}
#markdown-content h3::before { content: none !important; }
#markdown-content h4 { font-size: 1rem !important; font-weight: 650 !important; color: var(--vp-c-text) !important; }
#markdown-content h5,
#markdown-content h6 { color: var(--vp-c-text-mute) !important; }

#markdown-content a:not(.header-anchor) {
  color: var(--kb-accent) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
#markdown-content a:not(.header-anchor):hover { text-decoration: underline !important; }

.header-anchor,
#markdown-content .header-anchor,
#markdown-content .header-anchor:hover {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  border-bottom: none !important;
}
.header-anchor::before { color: var(--vp-c-text-subtle) !important; opacity: 0; transition: opacity .15s; }
#markdown-content h1:hover .header-anchor::before,
#markdown-content h2:hover .header-anchor::before,
#markdown-content h3:hover .header-anchor::before { opacity: 1; }

#markdown-content blockquote {
  margin: 1.25rem 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 3px solid var(--vp-c-border-hard) !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--vp-c-text-mute) !important;
}
#markdown-content ul > li::marker,
#markdown-content ol > li::marker { color: var(--vp-c-text-subtle); }
#markdown-content hr {
  border: none;
  height: 1px;
  background: var(--vp-c-border);
  margin: 2rem 0;
}

/* Inline code */
#markdown-content :not(pre) > code {
  font-family: var(--vp-font-mono) !important;
  font-size: .86em !important;
  padding: .16em .4em !important;
  border-radius: 6px !important;
  background: var(--vp-c-bg-soft) !important;
  color: var(--vp-c-text) !important;
  border: none !important;
  font-weight: 500;
}

/* Code blocks */
#markdown-content div[class*="language-"] {
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  background: var(--kb-code-bg) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin: 1.25rem 0 !important;
}
#markdown-content div[class*="language-"] pre,
#markdown-content div[class*="language-"] code {
  background: var(--kb-code-bg) !important;
  font-family: var(--vp-font-mono) !important;
  font-size: .85rem !important;
  line-height: 1.7 !important;
}
#markdown-content div[class*="language-"] .line-numbers {
  background: transparent !important;
  border-right: 1px solid var(--vp-c-divider) !important;
  color: var(--vp-c-text-subtle) !important;
}
/* language label -> small gray chip */
#markdown-content div[class*="language-"] .lang {
  color: var(--vp-c-text-subtle) !important;
  font-family: var(--vp-font) !important;
  font-size: .72rem !important;
  letter-spacing: .02em;
}
/* copy button -> Lucide copy */
.vp-copy-code-button { opacity: .55 !important; }
.vp-copy-code-button:hover { opacity: 1 !important; }
.vp-copy-code-button:before {
  color: var(--vp-c-text-subtle) !important;
  -webkit-mask-image: var(--kb-ico-copy) !important;
  mask-image: var(--kb-ico-copy) !important;
}

/* Tables */
#markdown-content table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  overflow: hidden !important;
  font-size: .92rem;
  box-shadow: none !important;
  margin: 1.25rem 0;
}
#markdown-content thead th {
  background: var(--vp-c-bg-alt) !important;
  color: var(--vp-c-text) !important;
  font-weight: 600 !important;
  text-align: left;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--vp-c-border) !important;
}
#markdown-content tbody td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--vp-c-divider) !important;
}
#markdown-content tbody tr:last-child td { border-bottom: none !important; }
#markdown-content tbody tr:nth-child(even) { background: var(--vp-c-bg-alt) !important; }
#markdown-content tbody tr:hover { background: var(--vp-c-accent-soft) !important; }

/* Images */
#markdown-content img {
  border-radius: var(--kb-radius-sm) !important;
  border: 1px solid var(--vp-c-border) !important;
  box-shadow: none !important;
  max-width: 100%;
}

/* ---- Callouts ----------------------------------------------------------- */
.hint-container {
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  padding: 14px 16px !important;
  margin: 1.25rem 0 !important;
  box-shadow: none !important;
}
.hint-container .hint-container-title {
  font-weight: 600 !important;
  color: var(--hint-c-title) !important;
  padding-inline-start: 1.6em !important;
}
.hint-container .hint-container-title:before {
  inset-inline-start: 0;
  width: 1.15em; height: 1.15em;
  top: calc(50% - .575em);
  background-color: currentColor;
}
.hint-container.tip {
  border-color: color-mix(in srgb, #22c55e 30%, var(--vp-c-border)) !important;
  background: color-mix(in srgb, #22c55e 6%, var(--vp-c-bg)) !important;
}
.hint-container.tip .hint-container-title:before { -webkit-mask-image: var(--kb-ico-lightbulb) !important; mask-image: var(--kb-ico-lightbulb) !important; }
.hint-container.info,
.hint-container.note {
  border-color: color-mix(in srgb, #3b82f6 30%, var(--vp-c-border)) !important;
  background: color-mix(in srgb, #3b82f6 6%, var(--vp-c-bg)) !important;
}
.hint-container.info .hint-container-title:before,
.hint-container.note .hint-container-title:before { -webkit-mask-image: var(--kb-ico-info) !important; mask-image: var(--kb-ico-info) !important; }
.hint-container.warning {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--vp-c-border)) !important;
  background: color-mix(in srgb, #f59e0b 8%, var(--vp-c-bg)) !important;
}
.hint-container.warning .hint-container-title:before { -webkit-mask-image: var(--kb-ico-triangle) !important; mask-image: var(--kb-ico-triangle) !important; }
.hint-container.danger,
.hint-container.caution {
  border-color: color-mix(in srgb, #ef4444 30%, var(--vp-c-border)) !important;
  background: color-mix(in srgb, #ef4444 6%, var(--vp-c-bg)) !important;
}
.hint-container.danger .hint-container-title:before,
.hint-container.caution .hint-container-title:before { -webkit-mask-image: var(--kb-ico-octagon) !important; mask-image: var(--kb-ico-octagon) !important; }
.hint-container.important {
  border-color: color-mix(in srgb, #a855f7 30%, var(--vp-c-border)) !important;
  background: color-mix(in srgb, #a855f7 6%, var(--vp-c-bg)) !important;
}
.hint-container.important .hint-container-title:before { -webkit-mask-image: var(--kb-ico-circle-alert) !important; mask-image: var(--kb-ico-circle-alert) !important; }

/* ---- Page meta / nav ---------------------------------------------------- */
.vp-page-meta,
.vp-meta-item {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--vp-c-text-subtle) !important;
  font-size: .85rem !important;
}
.vp-page-nav a,
.vp-page-nav .vp-page-nav-item {
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  background: var(--vp-c-bg) !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
.vp-page-nav a:hover { border-color: var(--kb-accent) !important; transform: none !important; }
.vp-page-nav .vp-page-nav-title { color: var(--kb-accent) !important; font-weight: 600; }

/* ---- Footer ------------------------------------------------------------- */
.vp-footer-wrapper,
.vp-footer {
  background: transparent !important;
  border-top: 1px solid var(--vp-c-border) !important;
  color: var(--vp-c-text-subtle) !important;
  font-size: .85rem;
}
.vp-footer a { color: var(--vp-c-text-mute) !important; }
.vp-footer a:hover { color: var(--kb-accent) !important; }
.vp-copyright { color: var(--vp-c-text-subtle) !important; }

/* ---- Homepage (Dify/Mintlify landing) ---------------------------------- */
.vp-hero-info-wrapper {
  background: var(--vp-c-bg) !important;
  border-bottom: none !important;
  padding: 4rem 1.5rem 3rem !important;
  min-height: auto !important;
}
.vp-hero-info-wrapper::before,
.vp-hero-info-wrapper::after { content: none !important; background: none !important; }

.vp-hero-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 1.1rem;
  max-width: 1024px;
  margin: 0 auto;
}
.vp-hero-infos { text-align: left !important; max-width: 760px; }
.vp-hero-image {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  border: 1px solid var(--vp-c-border) !important;
  box-shadow: none !important;
  padding: 6px;
  background: var(--vp-c-bg);
  object-fit: contain;
}
.vp-hero-title {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
  margin: .25rem 0 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--vp-c-text) !important;
}
#main-description {
  font-size: 1.125rem !important;
  line-height: 1.65 !important;
  color: var(--vp-c-text-mute) !important;
}
.vp-hero-actions { margin-top: .5rem; }
.vp-hero-action {
  border-radius: var(--kb-radius-sm) !important;
  padding: .6em 1.1em !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  margin: 0 .5rem .5rem 0 !important;
  transition: background .15s ease, border-color .15s ease;
}
.vp-hero-action.primary {
  background: var(--kb-accent) !important;
  border-color: var(--kb-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.vp-hero-action.primary:hover { background: var(--kb-accent-hover) !important; }
.vp-hero-action.default {
  background: var(--vp-c-bg) !important;
  border: 1px solid var(--vp-c-border) !important;
  color: var(--vp-c-text) !important;
}
.vp-hero-action.default:hover { border-color: var(--kb-accent) !important; }

.codex-home { max-width: 1024px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.home-section { margin: 2.5rem 0 0; }
.home-section-kicker {
  display: inline-block;
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vp-c-text-subtle) !important;
  background: none;
  padding: 0;
  margin-bottom: .5rem;
}
.home-section h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.015em;
  border: none !important;
  padding: 0 !important;
}
.home-section h2::before { content: none !important; }

/* Cards -> Mintlify style */
.home-core-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 860px) { .home-core-layout { grid-template-columns: 1fr !important; } }
.home-core-stack { display: grid; gap: 1rem; }
.home-core-card,
.home-random-card,
.home-gallery-card {
  position: relative;
  border: 1px solid var(--vp-c-border) !important;
  border-radius: var(--kb-radius) !important;
  background: var(--vp-c-bg) !important;
  padding: 1.25rem !important;
  box-shadow: none !important;
  transition: border-color .15s ease, transform .15s ease;
  overflow: hidden;
}
.home-core-card::before { content: none !important; }
.home-core-card:hover,
.home-random-card:hover,
.home-gallery-card:hover {
  border-color: var(--kb-accent) !important;
  transform: translateY(-2px);
}
.home-core-card-primary {
  background: var(--vp-c-bg) !important;
  border-color: var(--vp-c-border) !important;
  color: var(--vp-c-text) !important;
}
.home-core-card-primary * { color: inherit !important; }
.home-core-card-primary .home-core-link { color: var(--kb-accent) !important; }
.home-core-index {
  display: inline-block;
  font-size: .72rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vp-c-text-subtle) !important;
  background: none !important;
  padding: 0;
  margin-bottom: .35rem;
}
.home-core-card strong { display: block; font-size: 1.05rem !important; font-weight: 650; margin: .15rem 0 .4rem; color: var(--vp-c-text); }
.home-core-card span { color: var(--vp-c-text-mute); font-size: .925rem; }
.home-core-card ul { margin: .6rem 0 !important; padding-left: 1.1rem; }
.home-core-card li { margin: .2rem 0; color: var(--vp-c-text-mute); font-size: .925rem; }
.home-core-card em { display: block; margin-top: .6rem; font-size: .82rem; color: var(--vp-c-text-subtle); font-style: normal; }
.home-core-link {
  display: inline-block;
  margin-top: .7rem;
  font-weight: 600;
  font-size: .925rem;
  color: var(--kb-accent) !important;
  border: none !important;
}
.home-core-link:hover { text-decoration: underline; }

.home-random-card { border-style: solid !important; }
.home-random-card strong { color: var(--vp-c-text) !important; font-size: 1.05rem; font-weight: 650; }
.home-random-card em { color: var(--vp-c-text-mute); font-style: normal; font-size: .925rem; }
.home-random-card-link { color: var(--kb-accent) !important; }

.home-gallery-label { color: var(--vp-c-text-subtle) !important; font-weight: 600; font-size: .875rem; margin-top: 1.25rem; }
.home-gallery-frame {
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.home-gallery-track { gap: 1rem !important; }
.home-gallery-card { min-width: 260px; }
.home-gallery-card span {
  display: inline-block;
  font-size: .7rem !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vp-c-text-subtle) !important;
  margin-bottom: .3rem;
}
.home-gallery-card strong { display: block; font-weight: 650; margin-bottom: .35rem; color: var(--vp-c-text); font-size: .98rem; }
.home-gallery-card em { color: var(--vp-c-text-mute); font-style: normal; font-size: .875rem; }

.site-visit-counter {
  display: inline-block;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--vp-c-text-subtle) !important;
  font-size: .82rem !important;
  margin-bottom: .75rem;
  box-shadow: none !important;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 719px) {
  .vp-sidebar {
    background: var(--vp-c-bg) !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25);
  }
  .slimsearch-button { min-width: 0; }
}
/* ---- Fix: base theme navbar-offset hack (negative margin-top) ---- */
#markdown-content > h1,
#markdown-content > h2,
#markdown-content > h3,
#markdown-content > h4,
#markdown-content > h5,
#markdown-content > h6 {
  margin-top: 2.2rem !important;
  margin-bottom: .6rem !important;
  padding-top: 0 !important;
}
#markdown-content > h1:first-child,
#markdown-content > h2:first-child { margin-top: 0 !important; }
#markdown-content > h2 {
  padding-bottom: .55rem !important;
  border-bottom: 1px solid var(--vp-c-border) !important;
}

/* ---- Card links: plain accent links (no chip) ---- */
.home-core-link {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  align-self: auto !important;
  margin-top: .7rem !important;
}
.home-core-link:hover {
  background: none !important;
  color: var(--kb-accent-hover) !important;
  text-decoration: underline;
}

/* ---- Tighten landing spacing ---- */
.vp-hero-info-wrapper { padding: 3.25rem 1.5rem 1.5rem !important; }
.codex-home { padding-top: 1rem !important; }
.home-section { margin-top: 2rem !important; }
/* ---- Collapse the fixed fullscreen hero height ---- */
.vp-hero-info-wrapper,
.vp-hero-info-wrapper.hero-fullscreen,
.vp-hero-info-wrapper.fullscreen,
.vp-project-home .vp-hero-info-wrapper {
  height: auto !important;
  min-height: 0 !important;
}
/* ==========================================================================
   Dify-layout pass — structural/interaction refinements
   ========================================================================== */

:root {
  --content-width: 760px !important;

  /* extra Lucide icons for landing cards */
  --kb-ico-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
  --kb-ico-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65'/%3E%3Cpath d='m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65'/%3E%3C/svg%3E");
  --kb-ico-flask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E");
  --kb-ico-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E");
}

/* ---- Navbar: prominent Dify-style search ---- */
.slimsearch-button {
  min-width: 300px !important;
  height: 40px;
  border-radius: 10px !important;
  gap: 8px;
  font-size: .9rem;
}
@media (max-width: 960px) { .slimsearch-button { min-width: 0 !important; } }

/* ---- Sidebar tuning ---- */
.vp-sidebar { padding-top: 1rem; }
.vp-sidebar-title, .vp-sidebar-header { margin: 1rem 0 .35rem !important; }
.vp-sidebar-title:first-child, .vp-sidebar-header:first-child { margin-top: 0 !important; }

/* ---- TOC (outline) as a clean bordered card ---- */
.vp-toc-wrapper { margin: 0 !important; }
.vp-toc-item { height: 1.9rem !important; line-height: 1.9rem !important; }
.vp-toc-link { color: var(--vp-c-text-mute) !important; font-size: .85rem !important; }
.vp-toc-item:hover > .vp-toc-link { color: var(--vp-c-text) !important; }
.vp-toc-item.active > .vp-toc-link { color: var(--kb-accent) !important; font-weight: 600 !important; }
.vp-toc-marker { background: var(--kb-accent) !important; }

/* ---- Landing: Dify-style sections & card grid ---- */
.vp-hero-info-wrapper { padding: 4.5rem 1.5rem 1.75rem !important; }
.vp-hero-info { max-width: 1024px; }
.vp-hero-image { width: 60px !important; height: 60px !important; border-radius: 16px !important; }
.vp-hero-title { font-size: clamp(2.1rem, 4vw, 2.6rem) !important; }
#main-description { max-width: 720px; }

.codex-home { max-width: 1024px !important; padding: 1.5rem 1.5rem 4rem !important; }
.home-section { margin-top: 2.25rem !important; }
.home-section h2 { font-size: 1.4rem !important; }

/* Card icon (Lucide) */
.home-core-card::before,
.home-random-card::before {
  content: "" !important;
  display: block !important;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  background: var(--kb-accent);
  -webkit-mask: var(--kb-ico-sparkles) center / contain no-repeat;
  mask: var(--kb-ico-sparkles) center / contain no-repeat;
}
.home-core-card-primary::before { -webkit-mask-image: var(--kb-ico-rocket) !important; mask-image: var(--kb-ico-rocket) !important; }
.home-core-stack .home-core-card:nth-child(1)::before { -webkit-mask-image: var(--kb-ico-layers) !important; mask-image: var(--kb-ico-layers) !important; }
.home-core-stack .home-core-card:nth-child(2)::before { -webkit-mask-image: var(--kb-ico-flask) !important; mask-image: var(--kb-ico-flask) !important; }

/* Gallery -> Dify-like card grid */
.home-gallery-frame {
  overflow: visible !important;
  padding: 0 !important;
}
.home-gallery-track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  overflow: visible !important;
}
.home-gallery-track > .home-gallery-card[aria-hidden="true"] { display: none !important; }
.home-gallery-card { min-width: 0 !important; width: auto !important; }
@media (max-width: 900px) { .home-gallery-track { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 620px) { .home-gallery-track { grid-template-columns: 1fr !important; } }

/* Featured/random card full width */
.home-random-card { width: 100%; }

/* Tighten paragraph rhythm on landing */
.codex-home .home-section > p { color: var(--vp-c-text-mute); }
/* ---- Card polish: hide category label, fix title spacing, keep Lucide icon ---- */
.home-core-index { display: none !important; }
.home-core-card strong {
  margin-top: .35rem !important;
  font-size: 1.1rem !important;
  line-height: 1.35 !important;
}
.home-core-card::before,
.home-random-card::before {
  margin-bottom: 12px !important;
}
.home-core-card span:not(.home-core-index) { margin-top: .5rem !important; }
.home-core-card ul { margin-top: .75rem !important; }
.home-core-card em { margin-top: .75rem !important; }

/* ---- Hero: remove residual full-height whitespace ---- */
.vp-project-home .vp-hero-info-wrapper,
.vp-hero-info-wrapper.hero-fullscreen,
.vp-hero-info-wrapper.fullscreen {
  height: auto !important;
  min-height: 0 !important;
  padding: 2.75rem 1.5rem 1rem !important;
}
.vp-hero-info { gap: .5rem !important; }
.vp-hero-actions { margin-top: 1rem !important; }

:root{--content-width:780px !important;}

/* ==========================================================================
   Dify docs — tutorial page styling
   ========================================================================== */
#markdown-content h1 { font-size: 2.25rem !important; letter-spacing: -.025em; }
#markdown-content h2 {
  font-size: 1.5rem !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 2.2rem !important;
}
#markdown-content h2::before { content: none !important; }
#markdown-content h3 { font-size: 1.2rem !important; margin-top: 1.8rem !important; }

/* blue breadcrumb like Dify */
.vp-breadcrumb, .vp-breadcrumb span { color: var(--vp-c-text-subtle) !important; }
.vp-breadcrumb a, .vp-breadcrumb a span { color: var(--kb-accent) !important; }

/* justified prose like Dify */
#markdown-content > p, #markdown-content li, #markdown-content blockquote p { text-align: justify; }

/* framed images */
#markdown-content img {
  border: 1px solid var(--vp-c-border) !important;
  border-radius: 12px !important;
  background: var(--vp-c-bg-soft);
}

/* blockquote: normal text color, thin gray bar (Dify style) */
#markdown-content blockquote {
  color: var(--vp-c-text) !important;
  border-left: 3px solid var(--vp-c-border-strong, var(--vp-c-border-hard, var(--vp-c-border))) !important;
  background: none !important;
}

/* numbered lists a touch roomier (Dify steps feel) */
#markdown-content ol { padding-left: 1.4rem; }
#markdown-content ol > li { margin: .35rem 0; }