.tab-strip {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--color-canvas-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab-strip::-webkit-scrollbar { display: none; }

.tab-strip button,
.tab-strip a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-muted);
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  min-height: 36px;
}

.tab-strip button:hover,
.tab-strip a:hover {
  color: var(--color-ink);
}

.tab-strip button[aria-selected="true"],
.tab-strip a[aria-current="page"],
.tab-strip .is-active {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--sh-1);
}

.tab-strip .count {
  background: var(--color-canvas);
  color: var(--color-ink-muted);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
}

.tab-strip .is-active .count {
  background: var(--color-primary);
  color: #fff;
}

.sort-control {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.sort-control label {
  font-size: var(--fs-14);
  color: var(--color-ink-muted);
}

.sort-control select {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
  font-size: var(--fs-14);
  color: var(--color-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%238A94A3' stroke-width='2' d='M2 4l4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  min-height: 40px;
}

.sort-control select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--sh-glow-primary);
}