:root {
  --search-width: 640px;
}

@media (max-width: 768px) {
  :root { --search-width: 100%; }
}

/* Block under search */
.cve-index-block {
  max-width: var(--search-width);
  margin: 12px auto 0;
  padding: 0 16px;
  color: #fff;
}

.cve-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cve-index-scope {
  font: 600 12px/1.2 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8E95A3;
}

/* Filters button */
.cve-filters-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1F222A;
  border: 1px solid #2A2D36;
  color: #EDEDED;
  padding: 8px 12px;
  border-radius: 999px;
  font: 600 14px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.cve-filters-btn[aria-expanded="true"] {
  border-color: #E63946;
  background: #252832;
  color: #fff;
}

.filters-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #8E95A3;
  position: relative;
}
.filters-icon::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #8E95A3;
  border-radius: 50%;
}

/* Chips row under search */
.cve-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 10px;
  margin-bottom: 0;
}

/* center the chips under the main search bar */
.chips-center {
  justify-content: center;
  text-align: center;
}

/* chip base style */
.cve-chip-row .chip,
.mt-chips .chip {
  background: #1F222A;
  border: 1px solid #2A2D36;
  border-radius: 999px;
  padding: 8px 12px;
  font: 600 14px/1.1 Inter, system-ui, sans-serif;
  color: #EDEDED;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
}
.cve-chip-row .chip:hover,
.mt-chips .chip:hover {
  background: #23262F;
  border-color: #3a3f4d;
  color: #fff;
}
.cve-chip-row .chip.active,
.mt-chips .chip.active {
  border-color: #E63946;
  background: #252832;
  color: #fff;
}

/* Filter drawer */
.cve-filters-drawer {
  background: #1C1E25;
  border: 1px solid #2A2D36;
  border-radius: 12px;
  padding: 16px;
  margin: 12px auto 0;
  max-width: var(--search-width);
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
  color: #fff;

  display: none; /* default closed */
}
.cve-filters-drawer.open {
  display: block;
}

.cve-filters-inner { display: grid; gap: 20px; }

.cve-filters-title {
  font: 600 12px/1.2 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8E95A3;
  margin-bottom: 10px;
}

.cve-filters-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cve-filters-options button {
  background: #1F222A;
  border: 1px solid #2A2D36;
  border-radius: 999px;
  font: 500 13px/1.2 Inter, system-ui, sans-serif;
  color: #EDEDED;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.cve-filters-options button:hover {
  background: #23262F;
  border-color: #3a3f4d;
  color: #fff;
}
.cve-filters-options button:active {
  background: #252832;
  border-color: #E63946;
  color: #fff;
}

.mt-chips .chip {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  flex: 0 0 auto;
}

/* Center both chip rows (main and sticky) */
#chipRowHome,
#chipRowSticky {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centers the chips horizontally */
  gap: 10px;
  margin: 0 auto;
  max-width: 640px; /* adjust to match your search bar width */
  padding: 8px 12px;
}