/* ===================================================================
   搜索过滤条 v4 — 用户习惯优化版
   关键: 主搜索 + 段控件排序 + 折叠式进阶筛选
   =================================================================== */

.search-bar-v4 {
  background: var(--s1, #11141b);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.4);
}

/* ---- 主搜索行 ---- */
.search-bar-v4__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.search-bar-v4__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--s0, #0b0d12);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 999px;
  padding: 0 16px;
  min-height: 44px;
  transition: border-color 150ms, box-shadow 150ms;
}

.search-bar-v4__field:focus-within {
  border-color: var(--primary, #00e5c7);
  box-shadow: 0 0 0 4px rgba(0, 229, 199, 0.14);
}

.search-bar-v4__field--grow {
  flex: 1;
  min-width: 0;
}

.search-bar-v4__icon {
  font-size: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

.search-bar-v4__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 14px;
  min-width: 0;
  height: 100%;
  padding: 0;
}

.search-bar-v4__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-bar-v4__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

.search-bar-v4__select {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  outline: 0;
}

.search-bar-v4__select option {
  background: var(--s2, #171b24);
  color: #fff;
}

.search-bar-v4__submit {
  white-space: nowrap;
  padding: 0 20px;
}

/* ---- 排序段控件(segmented control)---- */
.search-bar-v4__sort {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--s0, #0b0d12);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}

.search-bar-v4__sort::-webkit-scrollbar { display: none; }

.seg-item {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background 150ms, color 150ms;
}

.seg-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.seg-item.is-active {
  background: var(--grad, linear-gradient(135deg, #00e5c7, #4ca9ff, #b794ff));
  color: #07090f;
  font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(0, 229, 199, 0.5);
}

.search-bar-v4__count {
  margin-left: auto;
  padding: 0 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.search-bar-v4__count strong {
  color: var(--primary, #4ca9ff);
  font-weight: 700;
}

/* ---- 进阶筛选(折叠)---- */
.search-bar-v4__advanced {
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.05));
  padding-top: 8px;
}

.search-bar-v4__advanced-toggle {
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 0;
}

.search-bar-v4__advanced-toggle::-webkit-details-marker { display: none; }

.search-bar-v4__advanced-toggle::before {
  content: '▸';
  font-size: 10px;
  transition: transform 150ms;
}

.search-bar-v4__advanced[open] > .search-bar-v4__advanced-toggle::before {
  transform: rotate(90deg);
}

.search-bar-v4__filter-count {
  background: var(--primary, #00e5c7);
  color: #07090f;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.search-bar-v4__advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  padding: 10px 0 4px;
}

.search-bar-v4__chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--s0, #0b0d12);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color 150ms;
}

.search-bar-v4__chip:focus-within {
  border-color: var(--primary, #00e5c7);
}

.search-bar-v4__chip input[type="number"] {
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  width: 100%;
}

.search-bar-v4__chip input[type="number"]::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

.search-bar-v4__chip--toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.search-bar-v4__chip--toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #00e5c7);
  flex-shrink: 0;
}

.search-bar-v4__chip--toggle span {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.search-bar-v4__advanced-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* ---- 响应式 ---- */
@media (max-width: 720px) {
  .search-bar-v4__row {
    flex-wrap: wrap;
  }
  .search-bar-v4__field--grow { flex: 1 1 100%; }
  .search-bar-v4__field:not(.search-bar-v4__field--grow) { flex: 1; }
  .search-bar-v4__submit { flex: 1; padding: 0 12px; }
  .search-bar-v4__count { display: none; }
}