.spotlight-trigger {
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(191, 219, 254, .9);
  border-radius: 9999px;
  color: #1e3a8a;
  display: flex;
  gap: .65rem;
  min-height: 2.75rem;
  min-width: 0;
  padding: .55rem .75rem .55rem 1rem;
  text-align: left;
  width: min(100%, 25rem);
}
.footer-spotlight-trigger { width: min(100%, 42rem); }
.site-header-tools { min-width: 0; }
.filter-strip { background: #dbeafe; box-shadow: inset 0 1px 3px rgba(30, 64, 175, .12); position: relative; z-index: 30; }
.filter-strip-inner { align-items: center; display: flex; gap: .65rem; margin: 0 auto; max-width: 72rem; padding: .7rem 1rem; position: relative; }
.filter-quick { display: flex; flex: 1; gap: .5rem; min-width: 0; overflow-x: hidden; padding: .15rem .1rem; }
.filter-quick.filter-quick-scroll { overflow-x: auto; padding-bottom: .3rem; scrollbar-color: #93c5fd transparent; scrollbar-width: thin; }
.filter-quick .filter-chip[hidden] { display: none; }
.filter-chip { align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 9999px; color: #1d4ed8; display: inline-flex; flex: 0 0 auto; font-size: .875rem; font-weight: 700; gap: .4rem; line-height: 1.2; padding: .5rem .72rem; text-decoration: none; }
.filter-chip:hover { background: #dbeafe; border-color: #60a5fa; }
.filter-chip-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.filter-chip-active:hover { background: #1d4ed8; }
.filter-reset { align-items: center; color: #1d4ed8; display: inline-flex; flex: 0 0 auto; font-size: .8rem; font-weight: 700; gap: .35rem; }
.filter-more { flex: 0 0 auto; position: relative; }
.filter-more summary { align-items: center; background: #fff; border: 1px solid #93c5fd; border-radius: 9999px; color: #1e40af; cursor: pointer; display: flex; font-size: .875rem; font-weight: 800; gap: .45rem; list-style: none; padding: .5rem .72rem; user-select: none; }
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more[open] summary { background: #1d4ed8; color: #fff; }
.filter-count { align-items: center; background: #dbeafe; border-radius: 9999px; color: #1d4ed8; display: inline-flex; font-size: .7rem; height: 1.35rem; justify-content: center; min-width: 1.35rem; padding: 0 .25rem; }
.filter-more-panel { background: #fff; border: 1px solid #bfdbfe; border-radius: 1rem; box-shadow: 0 20px 55px rgba(30, 64, 175, .22); display: flex; flex-wrap: wrap; gap: .5rem; max-height: min(65vh, 34rem); overflow: auto; padding: 1rem; position: absolute; right: 0; top: calc(100% + .55rem); width: min(56rem, calc(100vw - 2rem)); }
.spotlight-trigger:hover { background: #fff; box-shadow: 0 8px 24px rgba(30, 64, 175, .18); }
.spotlight-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-key { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .4rem; color: #1d4ed8; font-size: .72rem; padding: .14rem .42rem; }
.spotlight[hidden] { display: none; }
.spotlight { inset: 0; position: fixed; z-index: 100; }
.spotlight-backdrop { background: rgba(15, 23, 42, .62); inset: 0; position: absolute; }
.spotlight-panel { background: #fff; border: 1px solid #dbeafe; border-radius: 1rem; box-shadow: 0 30px 80px rgba(15, 23, 42, .3); left: 50%; max-height: min(78vh, 42rem); max-width: calc(100vw - 2rem); overflow: hidden; position: absolute; top: 9vh; transform: translateX(-50%); width: 44rem; }
.spotlight-input-row { align-items: center; border-bottom: 1px solid #dbeafe; display: flex; gap: .75rem; padding: 1rem 1.1rem; }
.spotlight-input { border: 0; color: #172554; flex: 1; font-size: 1.05rem; min-width: 0; outline: 0; }
.spotlight-results { max-height: calc(min(78vh, 42rem) - 8.5rem); overflow-y: auto; padding: .65rem; }
.spotlight-group-title { color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: .55rem .6rem .25rem; text-transform: uppercase; }
.spotlight-result { align-items: center; border-radius: .7rem; color: #1e293b; display: flex; gap: .75rem; padding: .68rem .72rem; text-decoration: none; }
.spotlight-result[aria-selected="true"], .spotlight-result:hover { background: #eff6ff; color: #1d4ed8; }
.spotlight-result-icon { align-items: center; background: #dbeafe; border-radius: .55rem; display: flex; flex: 0 0 2.1rem; height: 2.1rem; justify-content: center; }
.spotlight-result-copy { flex: 1; min-width: 0; }
.spotlight-result-title { display: block; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-result-meta { color: #64748b; display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-result-type { color: #64748b; font-size: .72rem; }
.spotlight-empty { color: #64748b; padding: 2rem 1rem; text-align: center; }
.spotlight-footer { align-items: center; background: #f8fafc; border-top: 1px solid #e2e8f0; color: #64748b; display: flex; font-size: .72rem; gap: 1rem; justify-content: flex-end; padding: .65rem 1rem; }
.spotlight-footer kbd { background: #fff; border: 1px solid #cbd5e1; border-radius: .3rem; color: #334155; padding: .08rem .3rem; }
body.spotlight-open { overflow: hidden; }
@media (max-width: 640px) {
  .site-header { padding: 1rem; }
  .site-header .spotlight-trigger .spotlight-key { display: none; }
  .filter-strip-inner { padding: .6rem .75rem; }
  .filter-chip { font-size: .8rem; padding: .45rem .65rem; }
  .filter-reset-label, .filter-more summary > span:not(.filter-count) { display: none; }
  .filter-more-panel { position: fixed; right: .75rem; top: 10.75rem; width: calc(100vw - 1.5rem); }
  .spotlight-panel { top: 1rem; }
  .spotlight-result-type, .spotlight-footer { display: none; }
}