/* =========================================
     Quick Search: premium + consistent theme
     ========================================= */
  .qs-shell{ position: relative; }

  .qs-searchbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap: wrap;
  }

  .qs-searchbar .form-control{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.12);
    padding: .9rem 1rem;
    box-shadow: none !important;
    font-weight: 850;
  }

  .qs-search-actions .btn{ border-radius: 14px; font-weight: 900; }

  /* Result cards: stronger hierarchy */
  .qs-grid .mini-item{
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 12px 26px rgba(0,0,0,.06);
    background: #fff;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
  }
  .qs-grid .mini-item:hover{
    transform: translateY(-2px);
    border-color: rgba(21,120,190,.22);
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
  }
  .qs-titleline{
    font-weight: 1000;
    font-size: 1.05rem;
    color: var(--secondary-blue);
    letter-spacing: -.01em;
  }
  .qs-desc{
    margin-top: 6px;
    color: rgba(0,0,0,.62);
    font-size: .93rem;
    line-height: 1.55;
  }
  .qs-actions{
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    margin-top: 12px;
    position: relative;
    z-index: 2;
  }
  .qs-actions a.btn{ position: relative; z-index: 2; }

  /* Suggestions: portal to body (no clipping) */
  .qs-suggest{
    position: fixed;
    z-index: 2000;
    width: 420px; /* overwritten by JS */
    max-width: min(720px, 92vw);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    overflow:hidden;
    display:none;
  }
  .qs-suggest-head{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background:linear-gradient(135deg, rgba(21,120,190,.10), rgba(212,0,0,.06), #fff);
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
  }
  .qs-suggest-item{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor:pointer;
  }
  .qs-suggest-item:hover{ background: rgba(21,120,190,.06); }
  .qs-suggest-item:last-child{ border-bottom: none; }
  .qs-s-code{ font-weight: 1000; color: var(--secondary-blue); }
  .qs-s-name{ font-weight: 900; color: rgba(0,0,0,.88); }
  .qs-s-meta{
    margin-top: 2px;
    font-size: .88rem;
    color: rgba(0,0,0,.62);
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    align-items:center;
  }

  /* Offcanvas width */
  .offcanvas{ width: min(640px, 96vw); }

  /* Offcanvas content cards */
  .oc-box{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    padding: 12px 12px;
    white-space: pre-wrap;
    line-height: 1.6;
    color: rgba(0,0,0,.82);
  }
  .oc-sec{ margin-top: 14px; }

  .oc-title{
    font-weight: 1000;
    letter-spacing: -.02em;
    color: var(--secondary-blue);
    margin:0;
  }
  .oc-sub{
    color: rgba(0,0,0,.62);
    font-weight: 850;
    font-size: .92rem;
  }

  .oc-chiprow{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom: 10px;
  }

  /* Titles list items inside offcanvas */
  .oc-title-item{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 10px 12px;
  }
  .oc-title-item .tname{ font-weight: 1000; }
  .oc-title-item .tdesc{ color: rgba(0,0,0,.62); margin-top: 4px; font-size:.92rem; }

  /* Make offcanvas header feel “app-like” */
  .offcanvas-header{
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(10px);
  }