:root {
      --bg: #0b0f17;
      --panel: #111826;
      --text: #e6eef7;
      --muted: #9db1c7;
      --acc: #67b0ff;
      --border: #22324a;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(11, 15, 23, .9);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(6px);
    }

    .wrap.header-flex {
      max-width: none;
      margin: 0;
      padding-left: 2%;
      padding-right: 24px;
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 7px 24px;
    }

    .header-flex {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .header-logo {
      height: 36px;
      width: auto;
      display: block;
      opacity: 0.95;
    }

    .header-flex {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .header-left {
      display: flex;
      align-items: center;
    }

    .header-logo {
      height: 36px;
      width: auto;
      display: block;
      opacity: 0.95;
    }

    h1,
    h2,
    h3 {
      margin: 16px 0;
      line-height: 1.2;
    }

    h1 {
      font-size: 28px;
    }

    h2 {
      font-size: 22px;
      margin-top: 40px;
      border-top: 1px solid var(--border);
      padding-top: 24px;
    }

    h3 {
      font-size: 18px;
      margin-top: 24px;
    }

    p {
      color: var(--muted);
    }

    .sidebar {
      position: fixed;
      left: 0;
      top: 83px;
      bottom: 0;
      width: 260px;
      padding: 12px;
      background: #0a1220;
      border-right: 1px solid var(--border);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 15;
    }

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 0 12px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    .logo img {
      max-width: 180px;
      height: auto;
      display: block;
      opacity: 0.95;
    }

    .content {
      margin-left: 280px;
      padding: 24px;
      min-height: calc(100vh - 76px);
    }

    .btn {
      box-sizing: border-box;
      white-space: normal;
      word-break: break-word;
    }

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 0 10px 0;
      margin-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    .logo img {
      max-width: 160px;
      height: auto;
      display: block;
      opacity: 0.95;
    }

    .btn {
      display: block;
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      background: #0f1a2d;
      color: var(--text);
      padding: 8px 10px;
      border-radius: 10px;
      margin: 5px 0;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
    }

    .btn:hover {
      background: #12203a;
      box-shadow:
      0px 0px 0px 1px rgba(96, 165, 250, 0.25) inset,
      0px 0px 8px 8px rgba(96, 165, 250, 0.20);
      transition: box-shadow 220ms ease, transform 220ms ease;
    }

    .btn:active {
      transform: translateY(1px);
    }

    .content {
      margin-left: 280px;
      padding: 24px;
      min-height: calc(100vh - 76px);
    }

    section {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      scroll-margin-top: 98px;
    }

    pre {
      background: #0c1320;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      overflow: auto;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
      color: #dfe9f7;
    }

    .endpoint {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      margin: 10px 0;
      background: #0e1625;
    }

    .method {
      padding: 2px 8px;
      border-radius: 999px;
      background: #10233b;
      border: 1px solid var(--border);
      margin-right: 8px;
      font-weight: 700;
    }

    .GET {
      color: #8fe3a8;
      border-color: #1f4430;
      background: #0b1a14;
    }

    .POST {
      color: #8fb8ff;
      border-color: #27406b;
      background: #0b1423;
    }

    .PUT {
      color: #ffd68f;
      border-color: #5a4a1e;
      background: #1a150b;
    }

    .DELETE {
      color: #ff8f8f;
      border-color: #5b2020;
      background: #1a0b0b;
    }

    footer {
      color: #9db1c7;
      text-align: center;
      padding: 24px;
      border-top: 1px solid var(--border);
    }

    .small {
      font-size: 12px;
    }

    @media (max-width: 900px) {
      .sidebar {
        position: static;
        width: auto;
        top: auto;
        border-right: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        background: transparent;
      }

      .btn {
        margin: 4px 0;
      }

      .content {
        margin-left: 0;
        padding-top: 0;
      }
    }

    /* Search UI */
    .res-item a:link,
    .res-item a:visited {
      color: #ff9f43;
      /* orange */
      text-decoration: none;
    }

    .res-item a:hover,
    .res-item a:focus {
      color: #ffb866;
      /* lighter orange on hover */
      text-decoration: underline;
    }

    #site-search {
      margin-bottom: 16px;
    }

    .search-wrap {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 8px 0 12px 0;
    }

    #q {
      flex: 1;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #0f1a2d;
      color: var(--text);
    }

    #go {
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #0f1a2d;
      color: var(--text);
      font-weight: 600;
      cursor: pointer;
    }

    #go:hover {
      background: #12203a;
    }

    .results {
      margin-top: 12px;
    }

    .res-item {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      background: #0e1625;
      margin: 8px 0;
    }

    .res-title {
      font-weight: 700;
    }

    .res-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .res-snippet {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
      margin-top: 6px;
      white-space: pre-wrap;
      color: #dfe9f7;
      line-break: anywhere;
    }

  .wrap-patch
    /* --- Patch: improve wrapping for long first result lines --- */
    .res-snippet {
      white-space: pre-wrap;
      /* keep newlines */
      overflow-wrap: anywhere;
      /* allow breaks inside long tokens */
      word-break: break-word;
      /* fallback for older engines */

      line-break: anywhere;
    }

    /* Optional helpers for long titles/paths */
    .res-title a,
    .res-meta {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .nav .spacer {
    flex: 0;
}

.spacer { display: none; }

.btn2 {
  text-decoration: none;
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: #0f1a2d;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
}

.btn2:hover {
  text-decoration: none;
  box-shadow:
    0px 0px 0px 1px rgba(96, 165, 250, 0.25) inset,
    0px 0px 8px 8px rgba(96, 165, 250, 0.20);
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.btn2:active {
  text-decoration: none;
  background: #353535;     /* darker than #464646 */
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(96,165,250,.35) inset,
    0 4px 16px rgba(96,165,250,.22);
}

.btn2:focus-visible {
  text-decoration: none;
  outline: none;
  box-shadow:
    0 0 0 2px rgba(13,148,246,.85), /* bright ring */
    0 0 0 6px rgba(13,148,246,.25); /* halo */
}

.btn2.cta {
    text-decoration: none;
    background: linear-gradient(120deg, var(--brand), var(--accent));
    color: #001016;
    font-weight: 700;
}

.nav a.brand {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 20px;
    color: var(--fg);
}

.nav .spacer {
    flex: 0;
}

.brand-logo {
  height: 50px;            /* adjust to taste: 24–36px works well */
  width: auto;
  display: block;
}

.brand-logo2 {
  height: 90px;            /* adjust to taste: 24–36px works well */
  width: auto;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 6px;
  display: block;
}