:root {
      --primary-color: #30A66D;
      --primary-hover: #21975e;
      --bg-color: #ffffff;
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --bg-tertiary: #f1f5f9;
      --surface-color: #f8fafc;
      --text-color: #1f2937;
      --text-primary: #1f2937;
      --text-secondary: #475569;
      --text-muted: #6b7280;
      --border-color: #d4d8df;
      --border: #d4d8df;
      --accent: #30A66D;
      --code-bg: #f3f4f6;
      --sidebar-bg: #f9fafb;
      --hover-bg: rgba(99, 102, 241, 0.08);
      --code-panel-bg: #263238;
      --code-panel-text: #cfd8dc;
      --code-panel-header: #37474f;
      --method-get-color: #10b981;
      --method-post-color: #3b82f6;
      --method-put-color: #f59e0b;
      --method-patch-color: #8b5cf6;
      --method-delete-color: #ef4444;
      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

      /* Dense documentation type scale. Component styles inherit these
         tokens so large references keep more context inside the viewport. */
      --font-size-body: 12px;
      --font-size-small: 11px;
      --font-size-xs: 9px;
      --font-size-h1: 24px;
      --font-size-h2: 19px;
      --font-size-h3: 16px;
      --font-size-h4: 14px;
      --font-size-h5: 12px;
      --font-size-h6: 11px;
      --font-size-code: 10px;
      --line-height-body: 1.45;
      --line-height-tight: 1.25;
    }

    [data-theme="dark"] {
      --bg-color: #0f172a;
      --bg-primary: #0f172a;
      --bg-secondary: #111c33;
      --bg-tertiary: #1e293b;
      --surface-color: #111c33;
      --text-color: #f1f5f9;
      --text-primary: #f8fafc;
      --text-secondary: #cbd5e1;
      --text-muted: #94a3b8;
      --border-color: #475569;
      --border: #475569;
      --accent: #a5b4fc;
      --code-bg: #1e293b;
      --sidebar-bg: #1e293b;
      --hover-bg: rgba(99, 102, 241, 0.15);
    }

    /*
     * theme: 'custom' — user-controlled palette via the --omni-server-* token set.
     *
     * Fallbacks here are the LIGHT defaults. They only kick in when the user
     * sets theme: 'custom' and does NOT define the corresponding --omni-server-*
     * token in their customCss. The matching prefers-color-scheme: dark
     * block below mirrors theme: 'auto' so a dark-mode visitor never lands
     * on a half-styled light surface; together they make 'custom' default
     * to system preference until the consumer takes full control.
     */
    [data-theme="custom"] {
      --primary-color: var(--omni-server-primary-color, #30A66D);
      --primary-hover: var(--omni-server-primary-hover, #21975e);
      --bg-color: var(--omni-server-bg-color, #ffffff);
      --bg-primary: var(--omni-server-bg-primary, var(--omni-server-bg-color, #ffffff));
      --bg-secondary: var(--omni-server-bg-secondary, #f8fafc);
      --bg-tertiary: var(--omni-server-bg-tertiary, #f1f5f9);
      --surface-color: var(--omni-server-surface-color, #f8fafc);
      --text-color: var(--omni-server-text-color, #1f2937);
      --text-primary: var(--omni-server-text-primary, var(--omni-server-text-color, #1f2937));
      --text-secondary: var(--omni-server-text-secondary, #475569);
      --text-muted: var(--omni-server-text-muted, #6b7280);
      --border-color: var(--omni-server-border-color, #e5e7eb);
      --border: var(--omni-server-border, var(--omni-server-border-color, #e5e7eb));
      --accent: var(--omni-server-accent, var(--omni-server-primary-color, #30A66D));
      --code-bg: var(--omni-server-code-bg, #f3f4f6);
      --sidebar-bg: var(--omni-server-sidebar-bg, #f9fafb);
      --hover-bg: var(--omni-server-hover-bg, rgba(99, 102, 241, 0.08));
      --code-panel-bg: var(--omni-server-code-panel-bg, #263238);
      --code-panel-text: var(--omni-server-code-panel-text, #cfd8dc);
      --code-panel-header: var(--omni-server-code-panel-header, #37474f);
    }

    @media (prefers-color-scheme: dark) {
      [data-theme="custom"] {
        --bg-color: var(--omni-server-bg-color, #0f172a);
        --bg-primary: var(--omni-server-bg-primary, var(--omni-server-bg-color, #0f172a));
        --bg-secondary: var(--omni-server-bg-secondary, #111c33);
        --bg-tertiary: var(--omni-server-bg-tertiary, #1e293b);
        --surface-color: var(--omni-server-surface-color, #111c33);
        --text-color: var(--omni-server-text-color, #f1f5f9);
        --text-primary: var(--omni-server-text-primary, var(--omni-server-text-color, #f1f5f9));
        --text-secondary: var(--omni-server-text-secondary, #cbd5e1);
        --text-muted: var(--omni-server-text-muted, #94a3b8);
        --border-color: var(--omni-server-border-color, #475569);
        --border: var(--omni-server-border, var(--omni-server-border-color, #475569));
        --accent: var(--omni-server-accent, var(--omni-server-primary-color, #30A66D));
        --code-bg: var(--omni-server-code-bg, #1e293b);
        --sidebar-bg: var(--omni-server-sidebar-bg, #1e293b);
        --hover-bg: var(--omni-server-hover-bg, rgba(99, 102, 241, 0.15));
      }
    }

    @media (prefers-color-scheme: dark) {
      [data-theme="auto"] {
        --bg-color: #0f172a;
        --bg-primary: #0f172a;
        --bg-secondary: #111c33;
        --bg-tertiary: #1e293b;
        --surface-color: #111c33;
        --text-color: #f1f5f9;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: #475569;
        --border: #475569;
        --accent: #a5b4fc;
        --code-bg: #1e293b;
        --sidebar-bg: #1e293b;
        --hover-bg: rgba(99, 102, 241, 0.15);
      }
    }

    

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--font-family);
      background: var(--bg-color);
      color: var(--text-color);
      font-size: var(--font-size-body);
      line-height: var(--line-height-body);
    }

    code,
    pre {
      font-size: var(--font-size-code);
    }

    /* ========== TOP NAVIGATION ========== */
    .top-nav {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 20px;
      min-height: 48px;
      padding: 0 20px;
      border-bottom: 1px solid var(--border-color);
      background: color-mix(in srgb, var(--bg-color) 92%, transparent);
      backdrop-filter: blur(10px);
    }

    /* When the navbar lives INSIDE the hero, float it top-right. No
       chrome — the hero is the surface, the nav rides on top of it. */
    .hero .top-nav {
      position: absolute;
      top: 16px;
      right: 24px;
      left: auto;
      width: auto;
      min-height: 0;
      padding: 0;
      gap: 18px;
      background: transparent;
      border: 0;
      backdrop-filter: none;
      z-index: 5;
    }

    .hero .top-nav-brand {
      display: none;
    }

    .top-nav-brand,
    .top-nav-link,
    .top-nav-menu summary {
      color: var(--text-color);
      text-decoration: none;
      font-size: var(--font-size-body);
      font-weight: 500;
      white-space: nowrap;
    }

    .top-nav-brand {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-right: auto;
      font-weight: 650;
    }

    .top-nav-brand img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .top-nav-links {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .top-nav-link:hover,
    .top-nav-menu summary:hover {
      color: var(--primary-color);
    }

    .top-nav-menu {
      position: relative;
    }

    .top-nav-menu summary {
      list-style: none;
      cursor: pointer;
    }

    .top-nav-menu summary::-webkit-details-marker {
      display: none;
    }

    .top-nav-menu summary::after {
      content: '▾';
      margin-left: 6px;
      color: var(--text-muted);
      font-size: 10px;
    }

    .top-nav-submenu {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      min-width: 180px;
      display: grid;
      gap: 4px;
      padding: 8px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-color);
      box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
    }

    .top-nav-submenu .top-nav-link,
    .top-nav-submenu .top-nav-menu summary {
      display: block;
      padding: 8px 10px;
      border-radius: 6px;
    }

    .top-nav-submenu .top-nav-link:hover,
    .top-nav-submenu .top-nav-menu summary:hover {
      background: var(--hover-bg);
    }

    .top-nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .docs-state-summary {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: min(44vw, 420px);
      overflow: hidden;
    }

    .docs-state-summary[hidden] {
      display: none;
    }

    .docs-state-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      height: 22px;
      padding: 0 6px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: color-mix(in srgb, var(--surface-color) 84%, transparent);
      color: var(--text-secondary);
      font-size: var(--font-size-xs);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .docs-state-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--text-muted);
      flex: 0 0 auto;
    }

    .docs-state-pill[data-state="fresh"] .docs-state-dot {
      background: var(--primary-color);
    }

    .docs-state-pill[data-state="stale"] .docs-state-dot {
      background: #b45309;
    }

    .docs-state-pill[data-state="off"] .docs-state-dot,
    .docs-state-pill[data-state="unknown"] .docs-state-dot {
      background: var(--text-muted);
    }

    .docs-state-label {
      color: var(--text-primary);
    }

    .docs-state-meta {
      max-width: 92px;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--text-muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-weight: 500;
    }

    .docs-state-pill[data-updated="true"] {
      border-color: var(--primary-color);
      color: var(--text-primary);
    }

    @media (max-width: 760px) {
      .docs-state-summary {
        max-width: 38vw;
      }

      .docs-state-pill {
        padding: 0 6px;
      }

      .docs-state-meta {
        display: none;
      }
    }

    /* ========== HERO SECTION — editorial-technical ========== */
    /* Distilled (#111 #3): no gradient default, no pill buttons, no shadow
       stacking, no glassmorphism, no checkmark bullets. Full-viewport
       height kept (a hero should occupy the viewport) but content is
       left-flush + vertically centred — editorial, not centered-marketing. */
    .hero {
      background: var(--bg-color);
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 64px 40px;
      border-bottom: 1px solid var(--border-color);
      position: relative;
    }

    .hero-content {
      max-width: 960px;
      width: 100%;
      margin: 0;
      padding: 0 0 0 40px;
    }

    .hero-logo {
      height: 32px;
      margin-bottom: 24px;
      display: block;
    }

    .hero-title {
      font-size: var(--font-size-h1);
      font-weight: 700;
      margin: 0 0 8px;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      line-height: var(--line-height-tight);
    }

    .hero-version {
      display: inline-block;
      font-size: var(--font-size-small);
      font-weight: 500;
      color: var(--text-muted);
      margin-left: 12px;
      vertical-align: middle;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    .hero-tagline {
      font-size: var(--font-size-h4);
      color: var(--text-secondary);
      margin: 0 0 24px;
      max-width: 60ch;
      line-height: 1.45;
      font-weight: 400;
    }

    .hero-features {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 14px;
      max-width: 70ch;
      font-size: var(--font-size-small);
      color: var(--text-secondary);
    }

    .hero-features li {
      display: inline;
    }

    .hero-features li:not(:last-child)::after {
      content: ' \00b7';
      margin-left: 10px;
      color: var(--text-muted);
    }

    .hero-buttons {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      margin: 0 0 0;
      font-size: var(--font-size-body);
    }

    .hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 0;
      border: 0;
      background: transparent;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      color: var(--text-secondary);
      border-bottom: 1px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }

    .hero-btn::after {
      content: '\2192';
      font-weight: 400;
    }

    .hero-btn-primary {
      color: var(--primary-color);
    }

    .hero-btn:hover {
      color: var(--text-primary);
      border-color: currentColor;
    }

    .hero-btn-primary:hover {
      color: var(--primary-hover);
    }

    .hero-quicklinks {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0;
      max-width: 960px;
      margin: 32px 0 0;
      border-top: 1px solid var(--border-color);
    }

    .hero-quicklink {
      padding: 20px 24px 20px 0;
      text-decoration: none;
      color: var(--text-secondary);
      border-right: 1px solid var(--border-color);
      transition: color 0.15s;
    }

    .hero-quicklink:last-child {
      border-right: 0;
    }

    .hero-quicklink:hover {
      color: var(--text-primary);
    }

    .hero-quicklink-icon {
      font-size: var(--font-size-h4);
      margin-bottom: 8px;
      display: block;
      color: var(--primary-color);
    }

    .hero-quicklink-title {
      font-size: var(--font-size-body);
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text-primary);
    }

    .hero-quicklink-desc {
      font-size: var(--font-size-small);
      color: var(--text-muted);
      line-height: 1.4;
    }

    /* GitHub Corner */
    .github-corner {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
    }
    .github-corner svg {
      fill: white;
      color: var(--primary-color);
      width: 80px;
      height: 80px;
    }
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out;
    }
    @keyframes octocat-wave {
      0%, 100% { transform: rotate(0); }
      20%, 60% { transform: rotate(-25deg); }
      40%, 80% { transform: rotate(10deg); }
    }

    /* ========== INTRODUCTION SECTION ========== */
    /* Rendered inside #mainContent on the root view, right after the overview
       and before authentication/endpoints. Typography comes from
       .markdown-content; only the surrounding spacing is set here. */
    .docs-introduction {
      margin: 32px 0;
    }

    /* ========== LAYOUT ========== */
    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 1000;
      transform: translateY(-160%);
      padding: 10px 14px;
      border-radius: 6px;
      background: var(--primary-color);
      color: white;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      transition: transform 0.15s ease;
    }

    .skip-link:focus {
      transform: translateY(0);
      outline: 2px solid white;
      outline-offset: 2px;
    }

    .app-container {
      --sidebar-width: 280px;
      display: grid;
      grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
      min-height: calc(100vh - 300px);
    }

    .app-container-no-sidebar {
      grid-template-columns: 1fr;
    }

    .main-shell {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      min-width: 0;
      gap: 0;
    }

    /* The page ToC is rendered inline by the runtime, right after the page
       title — so the shell keeps a single content column. */
    .main-shell.main-shell-no-toc {
      grid-template-columns: minmax(0, 1fr);
    }

    /* ========== SIDEBAR ========== */
    .sidebar {
      background: var(--sidebar-bg);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 14px 0 0;
      overflow: visible;
      position: sticky;
      top: 0;
      height: 100vh;
    }

    .sidebar-resizer {
      appearance: none;
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 5;
      width: 10px;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: col-resize;
      touch-action: none;
    }

    .sidebar-resizer::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 4px;
      width: 1px;
      background: transparent;
      transition: background-color 0.15s, box-shadow 0.15s;
    }

    .sidebar-resizer:hover::before,
    .sidebar-resizer:focus-visible::before,
    html.sidebar-is-resizing .sidebar-resizer::before {
      background: var(--primary-color);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 18%, transparent);
    }

    .sidebar-resizer:focus-visible {
      outline: 0;
    }

    html.sidebar-is-resizing,
    html.sidebar-is-resizing * {
      cursor: col-resize !important;
      user-select: none !important;
    }

    .sidebar-hidden {
      display: none;
    }

    .sidebar-header {
      padding: 0 14px 14px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 12px;
    }

    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .sidebar-logo img { height: 32px; }
    .sidebar-logo h1 { font-size: 16px; font-weight: 600; }

    .sidebar-search {
      position: relative;
    }

    .sidebar-search input {
      width: 100%;
      padding: 8px 10px 8px 32px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      font-size: var(--font-size-small);
      background: var(--bg-color);
      color: var(--text-color);
      outline: none;
      transition: border-color 0.2s;
    }

    .sidebar-search input:focus {
      border-color: var(--primary-color);
    }

    .sidebar-search::before {
      content: '🔍';
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--font-size-small);
    }

    .protocol-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 0 14px;
      margin-bottom: 14px;
    }

    .protocol-tab {
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      background: var(--code-bg);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      transition: all 0.2s;
    }

    .protocol-tab:hover {
      border-color: var(--primary-color);
    }

    .protocol-tab.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .protocol-tab .count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      margin-left: 6px;
      font-size: 9px;
      border-radius: 9px;
      background: rgba(0,0,0,0.15);
    }

    .protocol-tab.active .count {
      background: rgba(255,255,255,0.25);
    }

    /* ========== TAG GROUPS ========== */
    .sidebar-nav {
      flex: 1;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 10px;
      scrollbar-gutter: stable;
    }

    .tag-group {
      margin-bottom: 8px;
    }

    .tag-group-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      transition: all 0.2s;
    }

    .tag-group-header:hover {
      background: var(--hover-bg);
      color: var(--text-color);
    }

    .tag-group-header.active {
      color: var(--primary-color);
    }

    .tag-group-arrow {
      transition: transform 0.2s;
      font-size: 9px;
    }

    .tag-group.collapsed .tag-group-arrow {
      transform: rotate(-90deg);
    }

    .tag-group-count {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 400;
    }

    .tag-group-items {
      padding-left: 8px;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .tag-group.collapsed .tag-group-items {
      max-height: 0 !important;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 12px;
      border-left: 2px solid transparent;
      border-radius: 0;
      text-decoration: none;
      color: var(--text-secondary);
      font-size: var(--font-size-small);
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }

    .nav-item:hover {
      color: var(--text-primary);
    }

    .nav-item.active {
      color: var(--text-primary);
      border-left-color: var(--primary-color);
      font-weight: 600;
    }

    .nav-subitems {
      display: grid;
      gap: 2px;
      margin: 2px 0 8px 12px;
      padding-left: 12px;
      border-left: 1px solid var(--border-color);
    }

    .nav-subitem {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      font: inherit;
      font-size: 10px;
      line-height: 1.35;
      padding: 4px 7px;
      text-align: left;
      border-radius: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-subitem-level-3,
    .nav-subitem-level-4,
    .nav-subitem-level-5,
    .nav-subitem-level-6 {
      margin-left: 10px;
    }

    .nav-subitem:hover {
      color: var(--text-primary);
    }

    .nav-subitem.active {
      color: var(--text-primary);
      font-weight: 600;
      box-shadow: inset 2px 0 0 var(--primary-color);
    }

    .docs-sidebar-depth-1 { margin-left: 4px; }
    .docs-sidebar-depth-2 { margin-left: 10px; }
    .docs-sidebar-depth-3,
    .docs-sidebar-depth-4,
    .docs-sidebar-depth-5,
    .docs-sidebar-depth-6 { margin-left: 16px; }

    .nav-item-intro {
      margin-bottom: 12px;
      padding: 8px 10px;
      background: var(--surface-color);
      border: 1px solid var(--border-color);
      font-weight: 500;
    }

    .nav-item-intro:hover {
      background: var(--hover-bg);
      border-color: var(--primary-color);
    }

    .nav-item-intro .nav-item-icon {
      font-size: 14px;
    }

    .nav-item-intro .nav-item-text {
      font-size: 12px;
    }

    .nav-item-method {
      font-size: 9px;
      font-weight: 600;
      padding: 1px 4px;
      border: 1px solid var(--border-color);
      border-radius: 2px;
      text-transform: uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      color: var(--text-secondary);
      background: transparent;
      letter-spacing: 0.02em;
    }

    /* HTTP methods share the endpoint-content palette so long route lists
       remain scannable without adding size or spacing. */
    .method-get { background: var(--method-get-color); color: white; border-color: var(--method-get-color); }
    .method-post { background: var(--method-post-color); color: white; border-color: var(--method-post-color); }
    .method-put { background: var(--method-put-color); color: white; border-color: var(--method-put-color); }
    .method-patch { background: var(--method-patch-color); color: white; border-color: var(--method-patch-color); }
    .method-delete { background: var(--method-delete-color); color: white; border-color: var(--method-delete-color); }

    .method-ws,
    .method-stream,
    .method-rpc,
    .method-grpc {
      color: var(--text-secondary);
      background: transparent;
      border-color: var(--border-color);
    }

    .nav-item-path {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .nav-item-text,
    .docs-sidebar-home {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ========== Floating utility buttons (theme toggle, back-to-top) ========== */
    .icon-button {
      appearance: none;
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 10px;
      font-size: var(--font-size-small);
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      line-height: 1.2;
      transition: color 0.15s, border-color 0.15s;
    }

    .icon-button:hover {
      color: var(--text-primary);
      border-color: var(--text-secondary);
    }

    .icon-button:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
    }

    .back-to-top {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 50;
      appearance: none;
      background: var(--bg-color);
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 6px 12px;
      font-size: var(--font-size-small);
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      line-height: 1.2;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.2s, transform 0.2s, color 0.15s, border-color 0.15s;
    }

    .back-to-top.visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .back-to-top::before {
      content: '\2191';
      margin-right: 6px;
      font-weight: 400;
    }

    .back-to-top:hover {
      color: var(--text-primary);
      border-color: var(--text-secondary);
    }

    .back-to-top:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
    }

    @media (max-width: 1200px) {
      .main-shell {
        grid-template-columns: 1fr;
      }
    }

    .docs-pages-group > .tag-group-header {
      color: var(--text-primary);
      background: var(--hover-bg);
      border-left: 3px solid var(--primary-color);
      padding-left: 9px;
      margin-bottom: 4px;
      letter-spacing: 0.01em;
    }

    .docs-pages-group > .tag-group-header:hover {
      background: var(--hover-bg);
      opacity: 0.85;
    }

    .docs-sidebar-home {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .docs-sidebar-home-icon {
      flex-shrink: 0;
      opacity: 0.7;
    }

    /* ========== ON THIS PAGE (inline, right after the page title) ========== */
    .toc {
      display: block;
      margin: 0 0 24px;
      padding: 16px 20px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      font-size: var(--font-size-small);
      line-height: 1.5;
      background: var(--hover-bg);
      color: var(--text-secondary);
    }

    .toc:empty {
      display: none;
    }

    .toc-title {
      color: var(--text-secondary);
      font-size: var(--font-size-xs);
      font-weight: 600;
      letter-spacing: 0.04em;
      margin: 0 0 8px;
      text-transform: uppercase;
    }

    .toc-link {
      display: block;
      padding: 3px 0;
      color: var(--text-secondary);
      text-decoration: none;
      border-left: 2px solid transparent;
      padding-left: 10px;
      transition: color 0.15s, border-color 0.15s;
      font-size: var(--font-size-small);
    }

    .toc-link:hover {
      color: var(--text-primary);
      border-left-color: var(--primary-color);
    }

    .toc-link.active {
      color: var(--text-primary);
      border-left-color: var(--primary-color);
      font-weight: 600;
    }

    .toc-level-2 { padding-left: 10px; }
    .toc-level-3 { padding-left: 22px; }
    .toc-level-4 { padding-left: 34px; }
    .toc-level-5 { padding-left: 46px; }
    .toc-level-6 { padding-left: 58px; }
    /* ========== SEARCH MODAL (cmd+K) ========== */
    dialog.search-modal {
      padding: 0;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-color);
      color: var(--text-color);
      width: min(640px, calc(100vw - 32px));
      max-width: 640px;
      max-height: 70vh;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      margin: auto;
    }

    dialog.search-modal::backdrop {
      background: rgba(0, 0, 0, 0.45);
    }

    dialog.search-modal:not([open]) {
      display: none;
    }

    .search-modal-inner {
      display: flex;
      flex-direction: column;
      max-height: 70vh;
    }

    .search-modal-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-color);
    }

    .search-modal-input {
      flex: 1;
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-color);
      color: var(--text-color);
      font-size: 13px;
      font-family: inherit;
      outline: none;
    }

    .search-modal-input:focus {
      border-color: var(--primary-color);
    }

    .search-modal-close {
      padding: 6px 10px;
      font-size: 11px;
      font-family: 'SF Mono', 'Monaco', monospace;
      color: var(--text-muted);
      background: var(--surface-color);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      cursor: pointer;
    }

    .search-modal-close:hover {
      color: var(--text-color);
      background: var(--hover-bg);
    }

    .search-modal-results {
      overflow-y: auto;
      flex: 1;
      padding: 8px 8px 12px;
    }

    .search-modal-empty {
      padding: 24px 16px;
      color: var(--text-muted);
      text-align: center;
      font-size: 12px;
    }

    .search-modal-group {
      padding: 4px 0;
    }

    .search-modal-group-heading {
      padding: 8px 12px 4px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .search-modal-result {
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: 100%;
      padding: 10px 12px;
      margin: 2px 0;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      color: var(--text-color);
      font-family: inherit;
    }

    .search-modal-result:focus,
    .search-modal-result.is-highlighted {
      background: var(--hover-bg);
      border-color: var(--border-color);
      outline: none;
    }

    .search-modal-result-title {
      font-size: 12px;
      font-weight: 600;
    }

    .search-modal-result-desc {
      font-size: 11px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* ========== MAIN CONTENT ========== */
    .main {
      padding: 32px;
      overflow-y: auto;
      width: 100%;
    }

    /* ========== BREADCRUMBS ========== */
    .docs-breadcrumb {
      margin: 0 0 20px 0;
      font-size: 12px;
      color: var(--text-muted);
    }

    .docs-breadcrumb-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .docs-breadcrumb-item {
      display: inline-flex;
      align-items: center;
      min-width: 0;
    }

    .docs-breadcrumb-link {
      color: var(--text-secondary);
      text-decoration: none;
      cursor: pointer;
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .docs-breadcrumb-link:hover {
      color: var(--primary-color);
      text-decoration: underline;
    }

    .docs-breadcrumb-label {
      color: var(--text-muted);
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .docs-breadcrumb-current {
      color: var(--text-secondary);
      font-weight: 500;
      max-width: 320px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .docs-breadcrumb-separator {
      color: var(--text-muted);
      user-select: none;
    }

    /* Mobile: keep first + last segments, ellipsise the middle. We cannot
       collapse via DOM at this layer (the resolver feeds the full chain), but
       on narrow screens we hide every link/label between the second and the
       last-but-one entries, leaving the first, an ellipsis, and the current
       page visible. Separators around hidden items are also hidden. */
    @media (max-width: 600px) {
      .docs-breadcrumb-list > .docs-breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
      }
      .docs-breadcrumb-list > .docs-breadcrumb-separator:nth-child(n+4):not(:nth-last-child(2)) {
        display: none;
      }
      .docs-breadcrumb-list > .docs-breadcrumb-item:first-child + .docs-breadcrumb-separator + .docs-breadcrumb-item:not(:last-child)::after {
        content: ' \2026 ';
        color: var(--text-muted);
        margin-left: 4px;
      }
      .docs-breadcrumb-link,
      .docs-breadcrumb-label,
      .docs-breadcrumb-current {
        max-width: 140px;
      }
    }

    .section { margin-bottom: 48px; }

    .section-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--text-color);
    }

    .section-desc {
      color: var(--text-muted);
      margin-bottom: 24px;
    }

    /* ========== INTRODUCTION SECTION ========== */
    .intro-section {
      padding: 24px 32px;
      background: var(--surface-color);
      border-bottom: 1px solid var(--border-color);
      margin: -32px -32px 32px -32px;
    }

    .intro-section .markdown-content {
      max-width: 800px;
    }

    .intro-section .markdown-content h2 {
      font-size: 21px;
      font-weight: 600;
      margin: 32px 0 16px 0;
      color: var(--text-color);
    }

    .intro-section .markdown-content h2:first-child {
      margin-top: 0;
    }

    .intro-section .markdown-content p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-color);
      margin-bottom: 16px;
    }

    .intro-section .markdown-content ul {
      margin: 16px 0;
      padding-left: 24px;
    }

    .intro-section .markdown-content li {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-color);
      margin-bottom: 8px;
    }

    .intro-section .markdown-content code {
      background: var(--code-bg);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      font-family: 'SF Mono', Monaco, Consolas, monospace;
    }

    .intro-section .markdown-content pre {
      background: var(--code-bg);
      padding: 16px;
      border-radius: 8px;
      overflow-x: auto;
      margin: 16px 0;
    }

    .intro-section .markdown-content strong {
      font-weight: 600;
      color: var(--text-color);
    }

    /* ========== ROOT OVERVIEW (OpenAPI landing) ========== */
    .docs-overview {
      max-width: 820px;
      margin-bottom: 8px;
    }

    .docs-overview-header {
      margin: 0 0 12px 0;
    }

    .docs-overview-title {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 28px;
      font-weight: 700;
      line-height: 1.2;
      margin: 0;
      color: var(--text-color);
    }

    .docs-overview-version {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 3px 10px;
      border-radius: 999px;
      color: var(--accent, var(--primary-color));
      background: color-mix(in srgb, var(--accent, var(--primary-color)) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent, var(--primary-color)) 35%, transparent);
    }

    .docs-overview-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--text-muted);
      margin: 0 0 24px 0;
    }

    .docs-overview-meta a {
      color: var(--accent, var(--primary-color));
      text-decoration: none;
    }

    .docs-overview-meta a:hover {
      text-decoration: underline;
    }

    .docs-overview-meta-sep {
      color: var(--border-color);
    }

    .docs-overview-servers {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 20px 0;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 7px;
      background: var(--surface-color);
    }

    .docs-overview-subtitle {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin: 0;
    }

    .docs-overview-environment {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .docs-overview-environment-select {
      max-width: 180px;
      min-height: 26px;
      padding: 3px 24px 3px 7px;
      border: 1px solid var(--border-color);
      border-radius: 5px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font: inherit;
      font-size: var(--font-size-small);
    }

    .docs-overview-server-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .docs-overview-server {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 12px 16px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--surface-color);
    }

    .docs-overview-server-url {
      font-family: 'SF Mono', Monaco, Consolas, monospace;
      font-size: 12px;
      color: var(--text-color);
      background: var(--code-bg);
      padding: 3px 7px;
      border-radius: 4px;
      word-break: break-all;
    }

    .docs-overview-server-details {
      position: relative;
      color: var(--text-muted);
      font-size: var(--font-size-xs);
    }

    .docs-overview-server-details summary { cursor: pointer; }
    .docs-overview-server-details p { margin: 6px 0 0; }
    .docs-overview-server-details ul { display: grid; gap: 3px; margin: 6px 0 0 14px; }

    .docs-overview-server-desc {
      font-size: 12px;
      color: var(--text-muted);
    }

    .docs-overview-description {
      max-width: 820px;
    }

    /* ========== ENDPOINT SECTIONS (Redoc-style) ========== */
    .endpoint-section {
      padding: 24px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .endpoint-section:last-child {
      border-bottom: none;
    }

    .endpoint-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }

    .endpoint-method-path {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 9px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      font-family: 'SF Mono', 'Monaco', monospace;
      letter-spacing: 0.5px;
    }

    .badge-get { background: var(--method-get-color); color: white; }
    .badge-post { background: var(--method-post-color); color: white; }
    .badge-put { background: var(--method-put-color); color: white; }
    .badge-patch { background: var(--method-patch-color); color: white; }
    .badge-delete { background: var(--method-delete-color); color: white; }

    .endpoint-path {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-color);
    }

    .endpoint-title {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.3;
      margin-bottom: 6px;
      color: var(--text-color);
    }

    .endpoint-description {
      color: var(--text-muted);
      font-size: 12px;
      line-height: 1.55;
      margin-bottom: 18px;
    }

    /* Markdown content styles */
    .markdown-content {
      color: var(--text-primary);
    }

    .markdown-content a:not(.heading-anchor) {
      color: var(--primary-color);
      text-decoration: none;
    }

    .markdown-content a:not(.heading-anchor):hover {
      text-decoration: underline;
    }

    /* Heading anchor (#) — hidden by default, fades in on heading hover.
       Muted colour, no underline, no accent. Stripe/Vercel/GitHub pattern. */
    .markdown-content :is(.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6) > .heading-anchor {
      display: inline-block;
      margin-right: 8px;
      color: var(--text-muted);
      text-decoration: none;
      opacity: 0;
      transition: opacity 0.15s, color 0.15s;
      font-weight: 400;
    }

    .markdown-content :is(.md-h1, .md-h2, .md-h3, .md-h4, .md-h5, .md-h6):hover > .heading-anchor,
    .markdown-content .heading-anchor:focus-visible {
      opacity: 1;
    }

    .markdown-content .heading-anchor:hover {
      color: var(--text-secondary);
    }

    /* The global `* { margin: 0 }` reset strips the UA heading margins; every
       other md heading restores its own, so md-h1 needs one too — otherwise the
       page title sits flush against the breadcrumb above and the content below. */
    .markdown-content .md-h1 {
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.25;
      margin: 0 0 24px 0;
    }

    .markdown-content .md-h2 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 24px 0 12px 0;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .markdown-content .md-h3 {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin: 20px 0 10px 0;
    }

    .markdown-content .md-h4 {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      margin: 16px 0 8px 0;
    }

    .markdown-content .md-p {
      margin: 0 0 12px 0;
      color: var(--text-muted);
    }

    .markdown-content .md-list {
      margin: 12px 0;
      padding-left: 24px;
    }

    .markdown-content .md-list li {
      margin: 6px 0;
      color: var(--text-muted);
    }

    .markdown-content .md-inline-code {
      background: var(--bg-tertiary);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
      font-size: 12px;
      color: var(--accent);
    }

    .markdown-content .emoji {
      display: inline-block;
      min-width: 1em;
      line-height: 1;
      vertical-align: -0.12em;
    }

    .markdown-content .docs-component-mount {
      margin: 16px 0;
    }

    .markdown-content .md-code-block,
    .protocol-try-it .md-code-block {
      background: var(--bg-tertiary);
      border-radius: 6px;
      padding: 16px;
      margin: 16px 0;
      overflow-x: auto;
    }

    .markdown-content .md-code-wrap,
    .protocol-try-it .md-code-wrap {
      position: relative;
      margin: 16px 0;
    }

    .markdown-content .copy-code-btn,
    .protocol-try-it .copy-code-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--bg-primary);
      color: var(--text-muted);
      padding: 4px 8px;
      font-size: 10px;
      line-height: 16px;
      cursor: pointer;
    }

    .markdown-content .copy-code-btn:hover,
    .protocol-try-it .copy-code-btn:hover {
      color: var(--text-primary);
      border-color: var(--primary-color);
    }

    .markdown-content .md-code-block[data-code-toolbar-enhanced="true"] {
      padding-top: 32px;
    }

    .markdown-content .code-block-toolbar {
      position: absolute;
      top: 6px;
      right: 6px;
      left: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 120ms ease;
    }

    .markdown-content pre:hover .code-block-toolbar,
    .markdown-content .code-block-toolbar:focus-within {
      opacity: 1;
    }

    @media (hover: none) {
      .markdown-content .code-block-toolbar {
        opacity: 1;
      }
    }

    .markdown-content .code-block-lang {
      pointer-events: auto;
      font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
      font-size: var(--font-size-xs, 11px);
      line-height: 1;
      color: var(--text-muted);
      text-transform: lowercase;
      letter-spacing: 0.02em;
    }

    .markdown-content .code-block-lang[hidden] {
      display: none;
    }

    .markdown-content .code-block-copy {
      pointer-events: auto;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: transparent;
      color: var(--text-muted);
      padding: 2px 8px;
      font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
      font-size: var(--font-size-xs, 11px);
      line-height: 16px;
      cursor: pointer;
      transition: color 120ms ease, border-color 120ms ease;
    }

    .markdown-content .code-block-copy:hover,
    .markdown-content .code-block-copy:focus-visible {
      color: var(--text-secondary);
      border-color: var(--text-secondary);
      outline: none;
    }

    .markdown-content .md-code-block code,
    .protocol-try-it .md-code-block code {
      font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
      font-size: 12px;
      line-height: 1.6;
      color: var(--text-primary);
      white-space: pre;
    }

    .markdown-content .token.comment,
    .markdown-content .token.prolog,
    .markdown-content .token.doctype,
    .markdown-content .token.cdata {
      color: var(--text-muted);
    }

    .markdown-content .token.punctuation {
      color: var(--text-secondary);
    }

    .markdown-content .token.property,
    .markdown-content .token.tag,
    .markdown-content .token.boolean,
    .markdown-content .token.number,
    .markdown-content .token.constant,
    .markdown-content .token.symbol {
      color: #b45309;
    }

    .markdown-content .token.selector,
    .markdown-content .token.attr-name,
    .markdown-content .token.string,
    .markdown-content .token.char,
    .markdown-content .token.builtin {
      color: #047857;
    }

    .markdown-content .token.operator,
    .markdown-content .token.entity,
    .markdown-content .token.url,
    .markdown-content .token.variable {
      color: #0f766e;
    }

    .markdown-content .token.atrule,
    .markdown-content .token.attr-value,
    .markdown-content .token.function,
    .markdown-content .token.class-name {
      color: #2563eb;
    }

    .markdown-content .token.keyword {
      color: #7c3aed;
    }

    [data-theme="dark"] .markdown-content .token.property,
    [data-theme="dark"] .markdown-content .token.tag,
    [data-theme="dark"] .markdown-content .token.boolean,
    [data-theme="dark"] .markdown-content .token.number,
    [data-theme="dark"] .markdown-content .token.constant,
    [data-theme="dark"] .markdown-content .token.symbol {
      color: #fcd34d;
    }

    [data-theme="dark"] .markdown-content .token.selector,
    [data-theme="dark"] .markdown-content .token.attr-name,
    [data-theme="dark"] .markdown-content .token.string,
    [data-theme="dark"] .markdown-content .token.char,
    [data-theme="dark"] .markdown-content .token.builtin {
      color: #86efac;
    }

    [data-theme="dark"] .markdown-content .token.function,
    [data-theme="dark"] .markdown-content .token.class-name {
      color: #93c5fd;
    }

    [data-theme="dark"] .markdown-content .token.keyword {
      color: #c4b5fd;
    }

    /*
     * Prism dark tokens also apply to theme: 'custom' under prefers-color-scheme
     * dark, mirroring the shell.ts default-token logic. Without this block,
     * consumers using customCss on a dark body inherit the light-mode token
     * colors (orange/green over dark, hard to scan) and have to rewrite all
     * 8 token classes themselves.
     */
    @media (prefers-color-scheme: dark) {
      [data-theme="custom"] .markdown-content .token.property,
      [data-theme="custom"] .markdown-content .token.tag,
      [data-theme="custom"] .markdown-content .token.boolean,
      [data-theme="custom"] .markdown-content .token.number,
      [data-theme="custom"] .markdown-content .token.constant,
      [data-theme="custom"] .markdown-content .token.symbol {
        color: #fcd34d;
      }

      [data-theme="custom"] .markdown-content .token.selector,
      [data-theme="custom"] .markdown-content .token.attr-name,
      [data-theme="custom"] .markdown-content .token.string,
      [data-theme="custom"] .markdown-content .token.char,
      [data-theme="custom"] .markdown-content .token.builtin {
        color: #86efac;
      }

      [data-theme="custom"] .markdown-content .token.function,
      [data-theme="custom"] .markdown-content .token.class-name {
        color: #93c5fd;
      }

      [data-theme="custom"] .markdown-content .token.keyword {
        color: #c4b5fd;
      }
    }

    .markdown-content .mermaid {
      position: relative;
      margin: 16px 0;
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-primary);
      overflow: hidden;
      text-align: center;
    }

    /* Viewport — clips the scaled SVG so it doesn't overflow the card. */
    .markdown-content .mermaid .mermaid-viewport {
      position: relative;
      overflow: hidden;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Toolbar — appears in the top-right corner, fades in on hover. */
    .markdown-content .mermaid .mermaid-toolbar {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 4px;
      padding: 4px;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      opacity: 0;
      transition: opacity 0.18s ease;
      z-index: 2;
    }
    .markdown-content .mermaid:hover .mermaid-toolbar,
    .markdown-content .mermaid:focus-within .mermaid-toolbar { opacity: 1; }

    .markdown-content .mermaid .mermaid-btn {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      color: var(--text-secondary);
      border: 0;
      border-radius: 4px;
      cursor: pointer;
      font-family: ui-sans-serif, system-ui, sans-serif;
      font-size: 12px;
      line-height: 1;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .markdown-content .mermaid .mermaid-btn:hover {
      background: var(--hover-bg);
      color: var(--text-primary);
    }
    .markdown-content .mermaid .mermaid-btn:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 1px;
    }

    .markdown-content .mermaid-fallback,
    .markdown-content .mermaid-error {
      text-align: left;
      white-space: pre;
      font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
      font-size: 12px;
      color: var(--text-muted);
    }

    .markdown-content .mermaid-error {
      border-left: 4px solid #d97706;
    }

    /* Fullscreen dialog — opened by the toolbar fullscreen button. */
    dialog.mermaid-fullscreen-dialog {
      width: 100vw;
      height: 100vh;
      max-width: 100vw;
      max-height: 100vh;
      margin: 0;
      padding: 0;
      border: 0;
      background: var(--bg-color);
      color: var(--text-primary);
      overflow: hidden;
    }
    dialog.mermaid-fullscreen-dialog::backdrop {
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    dialog.mermaid-fullscreen-dialog .mermaid-fullscreen-stage {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      user-select: none;
      -webkit-user-select: none;
    }
    dialog.mermaid-fullscreen-dialog .mermaid-fullscreen-stage svg {
      max-width: 92vw;
      max-height: 84vh;
      width: auto;
      height: auto;
      transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    dialog.mermaid-fullscreen-dialog .mermaid-toolbar-fullscreen {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      background: var(--bg-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px;
      display: flex;
      gap: 4px;
      opacity: 1;
    }
    dialog.mermaid-fullscreen-close {
      position: fixed;
      top: 20px;
      right: 24px;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      z-index: 3;
      transition: background 0.15s ease;
    }
    dialog.mermaid-fullscreen-close:hover { background: var(--hover-bg); }
    dialog.mermaid-fullscreen-close:focus-visible {
      outline: 2px solid var(--primary-color);
      outline-offset: 2px;
    }

    .markdown-content .md-image {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 16px 0;
      border-radius: 6px;
      border: 1px solid var(--border);
      cursor: zoom-in;
    }

    .markdown-content .md-image[data-no-zoom="true"],
    .markdown-content .md-image.no-zoom {
      cursor: default;
    }

    .markdown-content .markdown-disabled {
      color: var(--text-muted);
      cursor: not-allowed;
      text-decoration: none;
      opacity: 0.68;
    }

    .image-zoom-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px;
      background: rgba(15, 23, 42, 0.82);
      cursor: zoom-out;
    }

    .image-zoom-img {
      max-width: min(100%, 1200px);
      max-height: 90vh;
      border-radius: 6px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
      cursor: default;
    }

    .image-zoom-close {
      position: fixed;
      top: 18px;
      right: 18px;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.75);
      color: #fff;
      font-size: 21px;
      line-height: 1;
      cursor: pointer;
    }

    .markdown-content .md-hr {
      border: 0;
      border-top: 1px solid var(--border);
      margin: 24px 0;
    }

    .markdown-content .md-table {
      border-collapse: collapse;
      margin: 16px 0;
      font-size: 12px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .markdown-content .md-table td,
    .markdown-content .md-table th {
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      white-space: nowrap;
    }

    .markdown-content .md-table td:last-child {
      white-space: normal;
    }

    .markdown-content .md-table tr:first-child td {
      font-weight: 600;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .markdown-content .md-table tr:last-child td {
      border-bottom: none;
    }

    .markdown-content .md-table tr:hover:not(:first-child) {
      background: var(--bg-secondary);
    }

    .markdown-content .md-alert {
      border: 1px solid var(--border);
      border-left: 4px solid var(--primary-color);
      border-radius: 6px;
      padding: 12px 14px;
      margin: 16px 0;
      background: var(--bg-secondary);
    }

    .markdown-content .md-alert-title {
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .markdown-content .md-alert-warning,
    .markdown-content .md-alert-danger,
    .markdown-content .md-alert-caution,
    .markdown-content .md-alert-important {
      border-left-color: #d97706;
    }

    .markdown-content .md-tabs {
      border: 1px solid var(--border);
      border-radius: 6px;
      margin: 16px 0;
      overflow: hidden;
      background: var(--bg-primary);
    }

    .markdown-content .md-tab-list {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      background: var(--bg-secondary);
      overflow-x: auto;
    }

    .markdown-content .md-tab-button {
      border: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
      padding: 10px 14px;
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }

    .markdown-content .md-tab-button.active {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-weight: 600;
    }

    .markdown-content .md-tab-panel {
      display: none;
      padding: 16px;
    }

    .markdown-content .md-tab-panel.active {
      display: block;
    }

    .markdown-content strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .markdown-content em {
      font-style: italic;
    }

    .endpoint-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    @media (min-width: 1400px) {
      .endpoint-content {
        grid-template-columns: 55% 45%;
      }
    }

    @media (max-width: 1200px) {
      .endpoint-content {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    .endpoint-left {
      min-width: 0; /* Prevent overflow */
    }

    .endpoint-right {
      position: sticky;
      top: 20px;
      align-self: start;
      min-width: 0; /* Prevent overflow */
      background: var(--code-panel-bg);
      border-radius: 8px;
      padding: 16px;
      color: var(--code-panel-text);
    }

    .endpoint-right-header {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #90a4ae;
      margin-bottom: 12px;
      padding-bottom: 7px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    @media (max-width: 1200px) {
      .endpoint-right {
        position: static;
      }
    }

    .endpoint-subsection {
      margin-bottom: 20px;
    }

    .endpoint-subsection-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border-color);
    }

    .endpoint-subsection p {
      margin-bottom: 12px;
      color: var(--text-color);
    }

    /* ========== REDOC-STYLE PARAMETER LABELS ========== */
    .subsection-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 10px;
    }

    .content-type {
      font-weight: 400;
      color: var(--text-color);
      text-transform: none;
    }

    .auth-value {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 12px;
      color: var(--text-color);
      margin-left: 8px;
    }

    /* ========== REDOC-STYLE PARAMETERS ========== */
    .param-row {
      display: flex;
      padding: 8px 10px;
      margin-bottom: 8px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--surface-color);
      transition: border-color 0.15s, background 0.15s;
    }

    .param-row:hover {
      border-color: var(--primary-color);
      background: var(--hover-bg);
    }

    .param-row:last-child {
      margin-bottom: 0;
    }

    .param-tree {
      width: 20px;
      display: flex;
      align-items: flex-start;
      padding-top: 2px;
      color: var(--border-color);
      margin-right: 8px;
    }

    .param-tree-line {
      width: 10px;
      height: 10px;
      border-left: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

    .param-info {
      flex: 1;
    }

    .param-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      flex-wrap: wrap;
    }

    .param-name-text {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-color);
    }

    .param-required-badge {
      font-size: 9px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: #fee2e2;
      color: #991b1b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    [data-theme="dark"] .param-required-badge {
      background: #7f1d1d;
      color: #fca5a5;
    }

    .param-type-info {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      background: rgba(99, 102, 241, 0.1);
      color: #6366f1;
    }

    [data-theme="dark"] .param-type-info {
      background: rgba(129, 140, 248, 0.15);
      color: #a5b4fc;
    }

    .param-type-info .format {
      color: #8b5cf6;
    }

    [data-theme="dark"] .param-type-info .format {
      color: #c4b5fd;
    }

    .param-constraint {
      display: inline-block;
      font-size: 9px;
      padding: 3px 8px;
      border-radius: 4px;
      background: #fef3c7;
      color: #92400e;
      font-family: 'SF Mono', 'Monaco', monospace;
      margin-left: 4px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    [data-theme="dark"] .param-constraint {
      background: #451a03;
      color: #fbbf24;
    }

    .param-default {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    .param-default code {
      background: var(--code-bg);
      padding: 3px 6px;
      border-radius: 3px;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 10px;
    }

    .param-example {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    .param-example code {
      background: var(--code-bg);
      padding: 3px 6px;
      border-radius: 3px;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 10px;
    }

    .param-description {
      font-size: 11px;
      color: var(--text-color);
      line-height: 1.4;
      margin-top: 4px;
    }

    /* ========== REDOC-STYLE RESPONSES ========== */
    .response-item {
      border: 1px solid var(--border-color);
      border-radius: 6px;
      margin-bottom: 8px;
      overflow: hidden;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .response-item:hover {
      border-color: var(--primary-color);
    }

    .response-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      cursor: pointer;
      transition: background 0.15s;
      background: var(--surface-color);
    }

    .response-header:hover {
      background: var(--hover-bg);
    }

    .response-arrow {
      font-size: 10px;
      transition: transform 0.2s;
      color: var(--text-muted);
      width: 16px;
      text-align: center;
    }

    .response-item.expanded .response-arrow {
      transform: rotate(90deg);
    }

    .response-status {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 4px;
      min-width: 50px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .response-status.status-2xx {
      background: #dcfce7;
      color: #166534;
    }

    [data-theme="dark"] .response-status.status-2xx {
      background: #064e3b;
      color: #86efac;
    }

    .response-status.status-4xx {
      background: #fed7aa;
      color: #92400e;
    }

    [data-theme="dark"] .response-status.status-4xx {
      background: #78350f;
      color: #fdba74;
    }

    .response-status.status-5xx {
      background: #fee2e2;
      color: #991b1b;
    }

    [data-theme="dark"] .response-status.status-5xx {
      background: #7f1d1d;
      color: #fca5a5;
    }

    .response-desc {
      font-size: 11px;
      color: var(--text-color);
    }

    .response-body {
      display: none;
      padding: 12px;
      border-top: 1px solid var(--border-color);
      background: var(--code-bg);
    }

    .response-item.expanded .response-body {
      display: block;
    }

    .response-schema-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .response-schema-label .content-type {
      margin-left: 8px;
    }

    .response-headers-section {
      margin-bottom: 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-color);
    }

    .response-headers-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }

    .response-header-row {
      display: flex;
      align-items: flex-start;
      padding: 5px 0;
      border-bottom: 1px solid var(--border-color);
    }

    .response-header-row:last-child {
      border-bottom: none;
    }

    .response-header-name {
      font-family: 'SF Mono', Monaco, Consolas, monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-color);
      min-width: 150px;
      margin-right: 12px;
    }

    .response-header-info {
      flex: 1;
    }

    .response-header-type {
      font-size: 10px;
      color: var(--primary-color);
      margin-bottom: 4px;
    }

    .response-header-desc {
      font-size: 11px;
      color: var(--text-muted);
    }

    .response-header-required {
      color: #ef4444;
      font-size: 10px;
      margin-left: 8px;
    }

    .docs-page-result {
      display: block;
      width: 100%;
      padding: 14px 16px;
      margin: 10px 0;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-color);
      color: var(--text-color);
      text-align: left;
      cursor: pointer;
    }

    .docs-page-result:hover {
      border-color: var(--primary-color);
      background: var(--hover-bg);
    }

    .docs-page-result-title {
      display: block;
      font-weight: 600;
    }

    .docs-page-result-desc {
      display: block;
      margin-top: 4px;
      color: var(--text-muted);
      font-size: 12px;
    }

    .docs-pagination {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid var(--border-color);
    }

    .docs-pagination-link {
      min-height: 76px;
      padding: 14px 16px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-color);
      color: var(--text-color);
      text-align: left;
      cursor: pointer;
    }

    .docs-pagination-link:hover {
      border-color: var(--primary-color);
      background: var(--hover-bg);
    }

    .docs-pagination-next {
      text-align: right;
      justify-self: end;
      width: 100%;
    }

    .docs-pagination-label {
      display: block;
      color: var(--text-muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .docs-pagination-title {
      display: block;
      margin-top: 6px;
      font-weight: 600;
    }

    /* Issue #123: Previous / Next page-nav cards.
       Uses only existing tokens (--border-color, --text-secondary,
       --text-primary). No shadows, no pill radius. */
    .page-nav-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid var(--border-color);
    }

    .page-nav-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 76px;
      padding: 14px 16px;
      border: 1px solid var(--border-color);
      background: transparent;
      color: var(--text-primary);
      text-align: left;
      cursor: pointer;
      font: inherit;
    }

    .page-nav-card:hover,
    .page-nav-card:focus-visible {
      border-color: var(--text-primary);
    }

    .page-nav-card-next {
      text-align: right;
      align-items: flex-end;
    }

    .page-nav-eyebrow {
      display: block;
      color: var(--text-secondary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .page-nav-title {
      display: block;
      color: var(--text-primary);
      font-weight: 600;
    }

    @media (max-width: 720px) {
      .page-nav-grid {
        grid-template-columns: 1fr;
      }
      .page-nav-card-prev {
        order: 0;
      }
      .page-nav-card-next {
        order: 1;
        text-align: left;
        align-items: flex-start;
      }
    }

    /* ========== PAGE HEADER WITH EDIT LINK ========== */
    .docs-page-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }

    .docs-page-header > h1,
    .docs-page-header > .md-h1 {
      flex: 1 1 auto;
      margin-bottom: 0;
    }

    .docs-edit-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 6px;
      transition: color 120ms ease, background-color 120ms ease;
    }

    .docs-edit-link:hover,
    .docs-edit-link:focus-visible {
      color: var(--accent);
      background-color: var(--hover-bg);
      text-decoration: none;
    }

    .docs-edit-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .docs-edit-link-glyph {
      font-size: 12px;
      line-height: 1;
    }
    /* ========== RESPONSE SAMPLES (Right Panel) ========== */
    .response-samples {
      margin-top: 16px;
    }

    .response-samples-header {
      font-size: 11px;
      font-weight: 600;
      color: var(--code-panel-text);
      margin-bottom: 12px;
    }

    .sample-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
    }

    .sample-tab {
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      background: transparent;
      border: 1px solid rgba(255,255,255,0.2);
      color: var(--code-panel-text);
      transition: all 0.15s;
    }

    .sample-tab:hover {
      background: rgba(255,255,255,0.1);
    }

    .sample-tab.active {
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.3);
    }

    .sample-tab.status-2xx { color: #10b981; border-color: #10b981; }
    .sample-tab.status-4xx { color: #f59e0b; border-color: #f59e0b; }
    .sample-tab.status-5xx { color: #ef4444; border-color: #ef4444; }

    .sample-content {
      display: none;
    }

    .sample-content.active {
      display: block;
    }

    .sample-content-type {
      font-size: 10px;
      color: #90a4ae;
      margin-bottom: 8px;
    }

    .sample-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 8px;
    }

    .sample-action {
      font-size: 10px;
      color: #90a4ae;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      transition: color 0.15s;
    }

    .sample-action:hover {
      color: white;
    }

    .sample-json {
      background: rgba(0,0,0,0.3);
      border-radius: 6px;
      padding: 10px;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 10px;
      line-height: 1.4;
      color: #e2e8f0;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .sample-json .json-key { color: #f8b500; }
    .sample-json .json-string { color: #a5d6a7; }
    .sample-json .json-number { color: #82aaff; }
    .sample-json .json-boolean { color: #f78c6c; }
    .sample-json .json-null { color: #89ddff; }

    /* Right panel sections */
    .right-panel-content {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .right-section {
      margin-bottom: 0;
    }

    .right-section-header {
      font-size: 10px;
      font-weight: 600;
      color: #90a4ae;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .sample-contents {
      margin-top: 0;
    }

    .tab-status {
      font-weight: 600;
    }

    .tab-status.status-2xx { color: #10b981; }
    .tab-status.status-4xx { color: #f59e0b; }
    .tab-status.status-5xx { color: #ef4444; }

    .no-example {
      color: #90a4ae;
      font-style: italic;
      font-size: 12px;
      padding: 12px;
      background: rgba(0,0,0,0.2);
      border-radius: 6px;
    }

    .response-desc-only {
      color: #90a4ae;
      font-size: 12px;
      padding: 12px;
      background: rgba(0,0,0,0.2);
      border-radius: 6px;
    }

    /* ========== CODE EXAMPLES ========== */
    .code-example {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .code-example-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      background: var(--code-panel-header);
      font-size: 10px;
      font-weight: 600;
      color: #90a4ae;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .code-example pre {
      margin: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      color: #e2e8f0;
      padding: 10px;
    }

    .code-example code {
      color: #e2e8f0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 10px;
      line-height: 1.4;
    }

    /* Code language tabs */
    .code-tabs {
      display: flex;
      gap: 2px;
      padding: 6px 10px;
      background: var(--code-panel-header);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .code-tab {
      padding: 4px 9px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: #90a4ae;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }

    .code-tab:hover {
      background: rgba(255,255,255,0.1);
      color: var(--code-panel-text);
    }

    .code-tab.active {
      background: rgba(255,255,255,0.15);
      color: var(--code-panel-text);
    }

    .code-contents {
      padding: 0;
    }

    .code-content {
      display: none;
    }

    .code-content.active {
      display: block;
    }

    pre {
      background: var(--code-bg);
      padding: 12px;
      border-radius: 8px;
      overflow-x: auto;
      font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
      font-size: 10px;
      line-height: 1.45;
      border: 1px solid var(--border-color);
    }

    /* ========== SCHEMA VISUALIZATION (Redoc-style) ========== */
    .schema-container {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 16px;
    }

    .schema-row {
      display: flex;
      align-items: flex-start;
      padding: 8px 12px;
      border-bottom: 1px solid var(--border-color);
      transition: background 0.15s;
    }

    .schema-row:last-child { border-bottom: none; }
    .schema-row:hover { background: var(--hover-bg); }

    .schema-row.nested {
      padding-left: 32px;
      background: rgba(0,0,0,0.02);
    }

    .schema-row.nested-2 { padding-left: 48px; }
    .schema-row.nested-3 { padding-left: 64px; }
    .schema-row.nested-4 { padding-left: 80px; }

    .schema-property {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 200px;
      flex-shrink: 0;
    }

    .schema-name {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-color);
    }

    .schema-required {
      color: #ef4444;
      font-weight: 700;
      font-size: 11px;
    }

    .schema-type {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 6px;
      border-radius: 4px;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 9px;
      font-weight: 500;
    }

    .type-string { background: #dbeafe; color: #1d4ed8; }
    .type-number, .type-integer { background: #fef3c7; color: #b45309; }
    .type-boolean { background: #fce7f3; color: #be185d; }
    .type-object { background: #e0e7ff; color: #4338ca; }
    .type-array { background: #d1fae5; color: #047857; }
    .type-null { background: #f3f4f6; color: #6b7280; }
    .type-ref { background: #fef3c7; color: #92400e; font-style: italic; }

    [data-theme="dark"] .type-string { background: #1e3a5f; color: #93c5fd; }
    [data-theme="dark"] .type-number, [data-theme="dark"] .type-integer { background: #451a03; color: #fcd34d; }
    [data-theme="dark"] .type-boolean { background: #4a0519; color: #f9a8d4; }
    [data-theme="dark"] .type-object { background: #312e81; color: #c7d2fe; }
    [data-theme="dark"] .type-array { background: #064e3b; color: #6ee7b7; }
    [data-theme="dark"] .type-null { background: #374151; color: #9ca3af; }
    [data-theme="dark"] .type-ref { background: #451a03; color: #fbbf24; }

    .schema-details {
      flex: 1;
      padding-left: 16px;
    }

    .schema-desc {
      color: var(--text-muted);
      font-size: 11px;
      margin-bottom: 4px;
    }

    /* Compact ReDoc-style contract tree. Names and requiredness stay in a
       narrow left rail; type, examples, constraints and prose share the
       wider detail column. */
    .schema-tree-root {
      margin-top: 4px;
      border-left: 1px solid var(--border-color);
      border-left-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
    }

    .schema-tree-nested {
      margin-left: 14px;
      border-left: 1px solid var(--border-color);
    }

    .schema-tree-row {
      position: relative;
      display: grid;
      grid-template-columns: minmax(120px, 28%) minmax(0, 1fr);
      gap: 14px;
      padding: 7px 0 7px 10px;
      border-bottom: 1px solid var(--border-color);
      font-size: 11px;
      line-height: 1.4;
    }

    .schema-tree-row::before {
      position: absolute;
      top: 13px;
      left: 0;
      width: 9px;
      border-top: 1px solid var(--border-color);
      border-top-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color));
      content: '';
    }

    .schema-tree-key {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      padding-left: 8px;
    }

    .schema-tree-name {
      overflow-wrap: anywhere;
      background: transparent;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 10px;
      color: var(--text-primary);
      font-weight: 500;
    }

    .schema-tree-required,
    .schema-tree-optional,
    .schema-tree-deprecated {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.35px;
      line-height: 1.35;
      text-transform: uppercase;
    }

    .schema-tree-required {
      color: #ef4444;
    }

    .schema-tree-optional { color: var(--text-muted); }
    .schema-tree-deprecated { color: #d97706; }

    .schema-tree-toggle {
      position: absolute;
      top: -1px;
      left: -8px;
      width: 16px;
      height: 16px;
      padding: 0;
      transform: rotate(0deg);
      border: 0;
      background: transparent;
      color: var(--primary-color);
      cursor: pointer;
      font-size: 14px;
      line-height: 14px;
      transition: transform 120ms ease;
    }

    .schema-tree-toggle.open { transform: rotate(90deg); }

    .schema-tree-details { min-width: 0; }

    .schema-tree-type {
      color: var(--text-muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .schema-tree-description {
      margin-top: 3px;
      color: var(--text-color);
      font-size: 11px;
      line-height: 1.42;
    }

    .schema-tree-description.markdown-content p {
      margin: 0 0 3px;
      color: inherit;
      font-size: inherit;
      line-height: inherit;
    }

    .schema-tree-description.markdown-content p:last-child { margin-bottom: 0; }

    .schema-tree-description.markdown-content ul,
    .schema-tree-description.markdown-content ol {
      margin: 4px 0 2px 16px;
      padding: 0;
    }

    .schema-tree-description.markdown-content li { margin: 1px 0; }

    .schema-tree-example {
      display: flex;
      min-width: 0;
      align-items: baseline;
      gap: 5px;
      margin-top: 2px;
      color: var(--text-muted);
      font-size: 10px;
    }

    .schema-tree-example code {
      overflow: hidden;
      padding: 0 3px;
      border: 1px solid var(--border-color);
      border-radius: 2px;
      background: var(--code-bg);
      color: var(--text-color);
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .schema-tree-items-label {
      display: inline-block;
      margin-top: 3px;
      color: var(--text-muted);
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .schema-tree-children.collapsed { display: none; }

    .schema-tree-meta {
      display: block;
      color: var(--text-secondary);
    }

    .schema-composition-header {
      font-weight: 600;
    }

    .schema-composition-variant {
      margin: 8px 0 8px 12px;
      border-left: 2px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    }

    .schema-composition-label {
      padding: 4px 8px;
      color: var(--text-secondary);
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .schema-tree-unresolved {
      color: var(--text-muted);
      font-style: italic;
    }

    .schema-constraints {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }

    .schema-constraint {
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      background: var(--code-bg);
      color: var(--text-muted);
      font-family: 'SF Mono', 'Monaco', monospace;
    }

    .schema-enum {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 6px;
    }

    .schema-enum-value {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 4px;
      background: #fef3c7;
      color: #92400e;
      font-family: 'SF Mono', 'Monaco', monospace;
    }

    [data-theme="dark"] .schema-enum-value {
      background: #451a03;
      color: #fbbf24;
    }

    .schema-default {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .schema-default code {
      background: var(--code-bg);
      padding: 1px 4px;
      border-radius: 3px;
      font-family: 'SF Mono', 'Monaco', monospace;
    }

    .schema-toggle {
      cursor: pointer;
      user-select: none;
      color: var(--primary-color);
      font-size: 11px;
      margin-left: 8px;
    }

    .schema-toggle:hover { text-decoration: underline; }

    .schema-nested-container {
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .schema-nested-container.collapsed {
      max-height: 0 !important;
    }

    .schema-example {
      margin-top: 16px;
      background: var(--code-bg);
      border-radius: 8px;
      overflow: hidden;
    }

    .schema-example-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(0,0,0,0.05);
      border-bottom: 1px solid var(--border-color);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
    }

    .schema-example-body {
      padding: 12px;
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 11px;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Response tabs */
    .response-tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 12px;
      border-bottom: 2px solid var(--border-color);
    }

    .response-tab {
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: none;
      color: var(--text-muted);
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: all 0.15s;
    }

    .response-tab:hover { color: var(--text-color); }

    .response-tab.active {
      color: var(--primary-color);
      border-bottom-color: var(--primary-color);
    }

    .response-tab.status-2xx { color: #10b981; }
    .response-tab.status-2xx.active { border-bottom-color: #10b981; }
    .response-tab.status-4xx { color: #f59e0b; }
    .response-tab.status-4xx.active { border-bottom-color: #f59e0b; }
    .response-tab.status-5xx { color: #ef4444; }
    .response-tab.status-5xx.active { border-bottom-color: #ef4444; }

    .response-content { display: none; }
    .response-content.active { display: block; }

    /* Parameters table */
    .params-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
    }

    .params-table th {
      text-align: left;
      padding: 8px 12px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--code-bg);
      border-bottom: 1px solid var(--border-color);
    }

    .params-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      font-size: 12px;
    }

    .params-table tr:last-child td { border-bottom: none; }

    .param-name {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-weight: 600;
    }

    .param-in {
      font-size: 9px;
      padding: 2px 6px;
      border-radius: 3px;
      background: var(--code-bg);
      color: var(--text-muted);
      text-transform: uppercase;
      margin-left: 8px;
    }

    /* ========== CHANNEL TYPES ========== */
    .channel-type-public { background: #10b981; color: white; }
    .channel-type-private { background: #f59e0b; color: white; }
    .channel-type-presence { background: #8b5cf6; color: white; }

    /* ========== INFO GRID ========== */
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .info-card {
      background: var(--code-bg);
      padding: 16px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
    }

    .info-card-title {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .info-card-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-color);
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 900px) {
      .app-container { grid-template-columns: 1fr; }
      .sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 300px;
        z-index: 100;
      }
      .sidebar-resizer { display: none; }
      .sidebar.mobile-open { display: flex; }
      .hero { padding: 40px 24px; min-height: 100vh; }
      .hero-logo { height: 80px; margin-bottom: 24px; }
      .hero-title { font-size: 32px; }
      .hero-version { font-size: 11px; margin-left: 8px; }
      .hero-tagline { font-size: 15px; margin-bottom: 20px; }
      .hero-features { flex-direction: column; align-items: center; gap: 12px; }
      .hero-features li { font-size: 13px; }
      .hero-btn { padding: 12px 24px; font-size: 13px; }
      .github-corner svg { width: 60px; height: 60px; }
      .main { padding: 24px; }
    }

    /* ========== ANIMATIONS ========== */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .endpoint-section {
      animation: fadeIn 0.3s ease-out;
    }

    /* ========== HTTP ENDPOINT (ReDoc-style) ========== */
    .http-param-group {
      margin-bottom: 14px;
    }

    .http-param-group-title {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 0;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--border-color);
    }

    .http-params {
      overflow: visible;
    }

    .http-param {
      padding-top: 7px;
      padding-right: 0;
      padding-bottom: 7px;
    }

    .http-param:last-child { border-bottom: none; }

    .http-param-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .http-param-name {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-color);
    }

    .http-param-required {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: #ef4444;
    }

    .http-param-deprecated {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      color: #f59e0b;
    }

    .http-param-desc {
      color: var(--text-muted);
      font-size: 11px;
      margin-top: 4px;
      line-height: 1.4;
    }

    /* Validation constraint chips (reuses .schema-constraint look) */
    .constraint-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
    }

    .constraint-chip {
      font-size: 9px;
      padding: 1px 6px;
      border-radius: 4px;
      background: var(--code-bg);
      color: var(--text-muted);
      border: 1px solid var(--border-color);
      font-family: 'SF Mono', 'Monaco', monospace;
    }

    .constraint-chip.constraint-enum {
      background: #fef3c7;
      color: #92400e;
      border-color: transparent;
    }

    [data-theme="dark"] .constraint-chip.constraint-enum {
      background: #451a03;
      color: #fbbf24;
    }

    /* Response accordions */
    .response-accordion {
      border: 0;
      border-radius: 3px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .response-accordion-header {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 10px;
      background: var(--code-bg);
      border: none;
      cursor: pointer;
      text-align: left;
      font-size: 11px;
      color: var(--text-color);
      transition: background 0.15s;
    }

    .response-accordion-header:hover { background: var(--hover-bg); }

    .response-accordion-header.status-2xx { background: rgba(16,185,129,0.08); }
    .response-accordion-header.status-3xx { background: rgba(59,130,246,0.08); }
    .response-accordion-header.status-4xx { background: rgba(245,158,11,0.09); }
    .response-accordion-header.status-5xx { background: rgba(239,68,68,0.09); }

    .response-accordion-caret {
      flex-shrink: 0;
      font-size: 9px;
      color: var(--text-muted);
      transition: transform 0.2s ease;
    }

    .response-accordion.open .response-accordion-caret {
      transform: rotate(90deg);
    }

    .response-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .response-status-dot.status-2xx { background: #10b981; }
    .response-status-dot.status-3xx { background: #3b82f6; }
    .response-status-dot.status-4xx { background: #f59e0b; }
    .response-status-dot.status-5xx { background: #ef4444; }

    .response-status-code {
      font-family: 'SF Mono', 'Monaco', monospace;
      font-weight: 600;
    }

    .response-status-desc {
      color: var(--text-muted);
    }

    .response-accordion-body {
      padding: 9px 8px 5px;
      border-top: 0;
      display: none;
    }

    .response-accordion.open .response-accordion-body { display: block; }

    .response-subhead {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin: 0;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--border-color);
    }

    .response-block + .response-block { margin-top: 10px; }

    @media (max-width: 640px) {
      .schema-tree-row {
        grid-template-columns: minmax(100px, 35%) minmax(0, 1fr);
        gap: 8px;
      }
    }

    /* Multi-language code samples */
    .http-code-samples {
      margin-top: 8px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      background: var(--code-bg);
    }

    .http-code-samples .code-tabs {
      flex-wrap: wrap;
      background: rgba(0,0,0,0.04);
    }

    [data-theme="dark"] .http-code-samples .code-tabs {
      background: rgba(255,255,255,0.03);
    }

    .http-code-sample-pre {
      margin: 0;
      padding: 10px;
      background: transparent;
      border: none;
      border-radius: 0;
      overflow-x: auto;
      font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
      font-size: 10px;
      line-height: 1.4;
      color: var(--text-color);
      white-space: pre;
    }

    .http-code-copy,
    .sample-code-copy {
      margin-left: auto;
      padding: 3px 8px;
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 9px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .http-code-copy:hover,
    .sample-code-copy:hover {
      color: #fff;
      border-color: #90a4ae;
    }

    /* Right panel (third column): keep request/response samples dark & legible
       regardless of the active theme, matching ReDoc's sample column. */
    .endpoint-right .endpoint-right-section + .endpoint-right-section {
      margin-top: 18px;
    }

    .endpoint-right .http-code-samples {
      background: rgba(0,0,0,0.25);
      border-color: rgba(255,255,255,0.1);
    }

    .endpoint-right .http-code-samples .code-tabs {
      background: rgba(0,0,0,0.2);
      border-color: rgba(255,255,255,0.1);
    }

    .endpoint-right .http-code-sample-pre {
      color: var(--code-panel-text);
    }

    .response-example-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 24px;
      margin: 2px 0 6px;
    }

    .response-example-toolbar .response-example-name {
      margin: 0;
    }

    .endpoint-right .sample-code {
      margin: 0;
      padding: 10px;
      overflow-x: auto;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      background: rgba(0,0,0,0.25);
      color: var(--code-panel-text);
      white-space: pre;
      word-break: normal;
    }

    .endpoint-right .sample-code code {
      color: inherit;
      font-family: 'SF Mono', 'Fira Code', 'Monaco', monospace;
      font-size: 10px;
      line-height: 1.4;
      white-space: inherit;
    }

    .endpoint-right .token.comment,
    .endpoint-right .token.prolog,
    .endpoint-right .token.doctype,
    .endpoint-right .token.cdata {
      color: #90a4ae;
    }

    .endpoint-right .token.punctuation { color: #cfd8dc; }

    .endpoint-right .token.property,
    .endpoint-right .token.tag,
    .endpoint-right .token.boolean,
    .endpoint-right .token.number,
    .endpoint-right .token.constant,
    .endpoint-right .token.symbol {
      color: #f8b500;
    }

    .endpoint-right .token.selector,
    .endpoint-right .token.attr-name,
    .endpoint-right .token.string,
    .endpoint-right .token.char,
    .endpoint-right .token.builtin {
      color: #a5d6a7;
    }

    .endpoint-right .token.operator,
    .endpoint-right .token.entity,
    .endpoint-right .token.url,
    .endpoint-right .token.variable {
      color: #89ddff;
    }

    .endpoint-right .token.atrule,
    .endpoint-right .token.attr-value,
    .endpoint-right .token.function,
    .endpoint-right .token.class-name {
      color: #82aaff;
    }

    .endpoint-right .token.keyword { color: #c792ea; }

    .endpoint-right .code-tab {
      color: #90a4ae;
    }

    .endpoint-right .code-tab.active {
      background: rgba(255,255,255,0.12);
      color: #fff;
    }

    .endpoint-right .response-subhead {
      color: #90a4ae;
    }

    /* ========== AUTHENTICATION ========== */
    .authentication-section {
      margin: 28px 36px 36px;
      padding: 24px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--surface-color);
    }

    .authentication-header h2 {
      margin: 4px 0 6px;
      font-size: var(--font-size-h2);
      color: var(--text-primary);
    }

    .authentication-header p,
    .auth-scheme-description,
    .auth-scheme-meta {
      color: var(--text-muted);
      font-size: var(--font-size-small);
    }

    .auth-environment {
      display: grid;
      gap: 6px;
      margin: 18px 0;
    }

    .auth-environment-select,
    .auth-input,
    .auth-operation-body {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font: inherit;
      font-size: var(--font-size-small);
    }

    .auth-operation-body {
      min-height: 112px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: var(--font-size-code);
    }

    .auth-schemes {
      display: grid;
      gap: 12px;
    }

    .auth-scheme {
      padding: 16px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
    }

    .auth-scheme-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 10px;
      color: var(--text-primary);
    }

    .auth-scheme-title span,
    .auth-field-label,
    .auth-status {
      color: var(--text-muted);
      font-size: var(--font-size-xs);
    }

    .auth-form,
    .auth-field {
      display: grid;
      gap: 6px;
    }

    .auth-form { gap: 10px; }

    .auth-oauth-flow {
      display: grid;
      gap: 10px;
      margin: 6px 0;
      padding: 14px;
      border: 1px solid var(--border-color);
      border-radius: 7px;
    }

    .auth-oauth-flow legend {
      padding: 0 6px;
      font-weight: 600;
      font-size: var(--font-size-small);
    }

    .auth-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .auth-save,
    .auth-request-token,
    .auth-oauth-token,
    .auth-oauth-authorize,
    .auth-oidc-authorize {
      padding: 7px 12px;
      border: 1px solid var(--primary-color);
      border-radius: 6px;
      background: transparent;
      color: var(--primary-color);
      cursor: pointer;
      font-size: var(--font-size-small);
      font-weight: 600;
    }

    .auth-status-error { color: #dc2626; }

    @media (max-width: 760px) {
      .authentication-section { margin: 20px 16px 28px; padding: 18px; }
    }

    .docs-overview-server-variables {
      width: 100%;
      margin-top: 8px;
      color: var(--text-muted);
      font-size: var(--font-size-xs);
    }

    .docs-overview-server-variables ul {
      display: grid;
      gap: 5px;
      margin-top: 5px;
      list-style: none;
    }

    .docs-overview-server-variables li {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .endpoint-deprecated,
    .http-param-deprecated {
      padding: 2px 6px;
      border: 1px solid #d97706;
      border-radius: 4px;
      color: #b45309;
      font-size: var(--font-size-xs);
      font-weight: 600;
    }

    .response-media-sample + .response-media-sample,
    .request-example + .request-example {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.12);
    }

    .response-example-name {
      margin: 6px 0;
      color: var(--text-muted);
      font-size: var(--font-size-xs);
      font-weight: 600;
    }

    .sample-code-error { color: #fca5a5; }

    .response-link {
      display: grid;
      gap: 4px;
      margin-top: 8px;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      font-size: var(--font-size-small);
    }

    .response-link-parameters { white-space: pre-wrap; }

    .http-try {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .http-try-run {
      justify-self: start;
      padding: 7px 12px;
      border: 1px solid #8bc34a;
      border-radius: 6px;
      background: transparent;
      color: #c5e1a5;
      cursor: pointer;
      font-size: var(--font-size-small);
      font-weight: 600;
    }

    .http-try-run:disabled { cursor: wait; opacity: 0.6; }

    .http-try-result {
      max-height: 280px;
      overflow: auto;
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      color: var(--code-panel-text);
      white-space: pre-wrap;
    }

    .async-contracts {
      margin: 28px 36px;
      padding: 22px;
      border: 1px solid var(--border-color);
      border-radius: 9px;
      background: var(--surface-color);
    }

    .endpoint-left > .async-contracts { margin: 16px 0 0; }

    .async-contracts h2 { font-size: var(--font-size-h3); }
    .async-contracts h3 { margin-top: 14px; font-size: var(--font-size-h5); }
    .async-contract-note { margin: 5px 0 12px; color: var(--text-muted); font-size: var(--font-size-small); }

    .async-contract {
      display: grid;
      gap: 7px;
      margin-top: 8px;
      padding: 10px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
    }

    .async-contract-operation {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: var(--font-size-small);
    }

    @media (max-width: 760px) {
      .async-contracts { margin: 20px 16px; padding: 18px; }
    }

    /* ========== TRY IT OUT ========== */
    .try-it-out {
      background: rgba(0,0,0,0.2);
      border-radius: 8px;
      margin-bottom: 20px;
      overflow: hidden;
    }

    .try-it-out.collapsed .try-it-form {
      display: none;
    }

    .try-it-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      background: var(--code-panel-header);
      transition: background 0.15s;
    }

    .try-it-header:hover {
      background: rgba(255,255,255,0.1);
    }

    .try-it-title {
      font-size: 12px;
      font-weight: 600;
      color: #90a4ae;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .try-it-toggle {
      background: none;
      border: none;
      color: #90a4ae;
      font-size: 11px;
      cursor: pointer;
      transition: transform 0.2s;
    }

    .try-it-out.collapsed .try-it-toggle {
      transform: rotate(-90deg);
    }

    .try-it-form {
      padding: 16px;
    }

    .try-it-section {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .try-it-section:last-child {
      border-bottom: none;
    }

    .try-it-section-title {
      font-size: 10px;
      font-weight: 600;
      color: #90a4ae;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
    }

    .try-it-group {
      margin-bottom: 12px;
    }

    .try-it-group:last-child {
      margin-bottom: 0;
    }

    .try-it-label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--code-panel-text);
      margin-bottom: 6px;
    }

    .try-it-required {
      color: #ef4444;
    }

    .try-it-input {
      width: 100%;
      padding: 10px 12px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 6px;
      color: var(--code-panel-text);
      font-size: 12px;
      font-family: 'SF Mono', 'Monaco', monospace;
      outline: none;
      transition: border-color 0.15s;
    }

    .try-it-input:focus {
      border-color: var(--primary-color);
    }

    .try-it-input::placeholder {
      color: #546e7a;
    }

    .try-it-body {
      width: 100%;
      min-height: 120px;
      padding: 12px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 6px;
      color: var(--code-panel-text);
      font-size: 11px;
      font-family: 'SF Mono', 'Monaco', monospace;
      line-height: 1.5;
      resize: vertical;
      outline: none;
    }

    .try-it-body:focus {
      border-color: var(--primary-color);
    }

    .try-it-actions {
      margin-top: 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .try-it-send {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: auto;
      padding: 6px 14px;
      background: transparent;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
      border-radius: 5px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .try-it-send:hover:not(:disabled) {
      background: var(--primary-color);
      color: #fff;
    }

    .try-it-send:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .try-it-response {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .try-it-response-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .try-it-response-status {
      font-size: 12px;
      font-weight: 600;
    }

    .try-it-response-status.status-2xx { color: #10b981; }
    .try-it-response-status.status-4xx { color: #f59e0b; }
    .try-it-response-status.status-5xx { color: #ef4444; }

    .try-it-response-time {
      font-size: 12px;
      color: #90a4ae;
    }

    .try-it-response-headers {
      margin-bottom: 16px;
    }

    .try-it-response-headers-pre {
      background: rgba(0,0,0,0.3);
      padding: 12px;
      border-radius: 6px;
      font-size: 11px;
      line-height: 1.6;
      color: #90a4ae;
      margin: 0;
      white-space: pre-wrap;
      word-break: break-all;
    }

    .try-it-loading {
      text-align: center;
      color: #90a4ae;
      padding: 20px;
    }

    .try-it-error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 6px;
      padding: 12px 16px;
      color: #ef4444;
      font-size: 12px;
    }

    /* WebSocket Try It Out */
    .try-it-ws {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      overflow: hidden;
    }

    .try-it-ws-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 12px;
      color: var(--text-secondary);
    }

    .ws-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #6b7280;
      transition: background 0.2s ease;
    }

    .ws-status-dot.connected {
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    }

    .try-it-ws-url {
      display: flex;
      gap: 8px;
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .try-it-ws-url input {
      flex: 1;
      padding: 10px 14px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
    }

    .try-it-ws-url input:focus {
      outline: none;
      border-color: var(--primary-color);
    }

    .try-it-ws-connect {
      padding: 10px 20px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .try-it-ws-connect:hover {
      filter: brightness(1.1);
    }

    .try-it-ws-connect.connected {
      background: #ef4444;
    }

    .try-it-ws-params {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .try-it-ws-params h4 {
      margin: 0 0 12px 0;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .try-it-ws-message {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .try-it-ws-message h4 {
      margin: 0 0 12px 0;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .try-it-ws-message textarea {
      width: 100%;
      min-height: 100px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      resize: vertical;
      box-sizing: border-box;
    }

    .try-it-ws-message textarea:focus {
      outline: none;
      border-color: var(--primary-color);
    }

    .try-it-ws-send {
      margin-top: 12px;
      padding: 10px 20px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .try-it-ws-send:hover:not(:disabled) {
      filter: brightness(1.1);
    }

    .try-it-ws-send:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .try-it-ws-log {
      padding: 16px;
    }

    .try-it-ws-log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .try-it-ws-log-header h4 {
      margin: 0;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .try-it-ws-clear {
      padding: 4px 10px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .try-it-ws-clear:hover {
      border-color: rgba(255, 255, 255, 0.4);
      color: var(--text-primary);
    }

    .try-it-ws-messages {
      max-height: 300px;
      overflow-y: auto;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      padding: 12px;
    }

    .try-it-ws-msg {
      display: flex;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
    }

    .try-it-ws-msg:last-child {
      border-bottom: none;
    }

    .ws-msg-time {
      color: #6b7280;
      flex-shrink: 0;
    }

    .ws-msg-type {
      flex-shrink: 0;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .ws-msg-content {
      flex: 1;
      color: var(--text-primary);
      word-break: break-all;
      white-space: pre-wrap;
    }

    .try-it-ws-msg-sent .ws-msg-type {
      background: rgba(59, 130, 246, 0.2);
      color: #60a5fa;
    }

    .try-it-ws-msg-received .ws-msg-type {
      background: rgba(34, 197, 94, 0.2);
      color: #4ade80;
    }

    .try-it-ws-msg-system .ws-msg-type {
      background: rgba(107, 114, 128, 0.2);
      color: #9ca3af;
    }

    .try-it-ws-msg-error .ws-msg-type {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
    }

    .try-it-ws-msg-error .ws-msg-content {
      color: #f87171;
    }

    .try-it-ws-empty {
      text-align: center;
      color: var(--text-tertiary);
      padding: 24px;
      font-size: 12px;
    }

    /* Streams (SSE) Try It Out */
    .try-it-sse {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      overflow: hidden;
    }

    .try-it-sse-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, 0.15);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 12px;
      color: var(--text-secondary);
    }

    .sse-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #6b7280;
      transition: background 0.2s ease;
    }

    .sse-status-dot.connected {
      background: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    }

    .sse-status-dot.connecting {
      background: #f59e0b;
      animation: pulse 1s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .try-it-sse-subscribe {
      padding: 10px 20px;
      background: #8b5cf6;
      color: white;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .try-it-sse-subscribe:hover {
      filter: brightness(1.1);
    }

    .try-it-sse-filter-section {
      padding: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .try-it-sse-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .sse-type-badge {
      padding: 4px 10px;
      background: rgba(139, 92, 246, 0.2);
      border: 1px solid rgba(139, 92, 246, 0.4);
      border-radius: 4px;
      font-size: 11px;
      color: #a78bfa;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sse-type-badge:hover {
      background: rgba(139, 92, 246, 0.3);
    }

    .sse-type-badge.inactive {
      background: rgba(107, 114, 128, 0.1);
      border-color: rgba(107, 114, 128, 0.3);
      color: #6b7280;
      text-decoration: line-through;
    }

    .try-it-sse-log-section {
      padding: 16px;
    }

    .try-it-sse-log-section .try-it-section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sse-event-count {
      font-weight: normal;
      color: var(--text-tertiary);
      margin-left: 8px;
    }

    .try-it-sse-clear {
      padding: 4px 10px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .try-it-sse-clear:hover {
      border-color: rgba(255, 255, 255, 0.4);
      color: var(--text-primary);
    }

    .try-it-sse-log {
      max-height: 400px;
      overflow-y: auto;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 6px;
      padding: 12px;
    }

    .try-it-sse-event {
      margin-bottom: 12px;
      padding: 10px 12px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      border-left: 3px solid #8b5cf6;
    }

    .try-it-sse-event:last-child {
      margin-bottom: 0;
    }

    .try-it-sse-event-error {
      border-left-color: #ef4444;
    }

    .sse-event-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 11px;
    }

    .sse-event-time {
      color: #6b7280;
    }

    .sse-event-type {
      padding: 2px 8px;
      background: rgba(139, 92, 246, 0.2);
      border-radius: 3px;
      color: #a78bfa;
      font-weight: 600;
      text-transform: uppercase;
      font-size: 9px;
    }

    .try-it-sse-event-error .sse-event-type {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
    }

    .sse-event-id {
      color: #6b7280;
      font-family: 'JetBrains Mono', monospace;
    }

    .sse-event-data {
      margin: 0;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text-primary);
      white-space: pre-wrap;
      word-break: break-all;
      overflow-x: auto;
    }

  .projection-diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
  }

  .projection-diagnostic {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 5px;
    padding: 9px 10px;
    background: var(--surface-color);
    font-size: var(--font-size-xs);
  }

  .projection-preserved { border-left-color: #10b981; }
  .projection-adapted { border-left-color: #f59e0b; }
  .projection-unsupported { border-left-color: #ef4444; }

  .projection-diagnostic-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }

  .projection-diagnostic-heading span {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
  }

  .projection-diagnostic-details,
  .projection-diagnostic-reason {
    color: var(--text-secondary);
    line-height: 1.35;
  }

  .projection-diagnostic-reason { margin-top: 5px; }