/* 搜索结果页（design/components.md 第 15 节）：template-parts/search/page*.php，脚本 assets/js/search-page.js。
   整页铺 --zb-surface，与游戏库页一样是白底；只有输入框、筛选按钮和浮层是单层边框，网格条目无框，列表用分隔线。 */

/* —— 页面与搜索栏 —— */
.zbui.zb-search-page {
  background: var(--zb-surface);
  color: var(--zb-text);
}
.zbui .zb-search-page__band {
  border-bottom: 1px solid var(--zb-border);
  padding: var(--zb-space-xl) 0;
}
.zbui .zb-search-page__band-inner {
  display: grid;
  gap: var(--zb-space-md);
}
.zbui .zb-search-page__search {
  position: relative;
  width: 100%;
  max-width: 720px;
}
.zbui .zb-search-page__form {
  height: var(--zb-control-h);
  padding: 0 var(--zb-space-2xs) 0 var(--zb-space-sm);
}
.zbui .zb-search-page__input {
  font-size: var(--zb-text-lg);
}
.zbui .zb-search-page__submit {
  position: relative;
  display: inline-flex;
  height: var(--zb-control-h-sm);
  flex: none;
  align-items: center;
  border: 0;
  border-radius: var(--zb-radius-xs);
  background: var(--zb-primary);
  color: var(--zb-on-primary);
  cursor: pointer;
  font-size: var(--zb-text-base);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-lg);
  transition: background-color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__submit:hover {
    background: var(--zb-primary-hover);
  }
}
.zbui .zb-search-page__submit:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
/* 「资源 / 游戏」：链接式页签，选中项的下划线压在搜索栏底部的分隔线上。负外边距抵消底部留白；没有游戏提供方时不出页签，留白照常。 */
.zbui .zb-search-page__verticals {
  display: flex;
  gap: var(--zb-space-xl);
  margin-bottom: calc(-1 * var(--zb-space-xl));
}
.zbui .zb-search-page__vertical {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--zb-space-xs);
  color: var(--zb-text-muted);
  font-size: var(--zb-text-md);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  padding: var(--zb-space-xs) 0 var(--zb-space-sm);
  text-decoration: none;
  transition: color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__vertical:hover {
    color: var(--zb-text);
  }
}
.zbui .zb-search-page__vertical[aria-current="page"] {
  color: var(--zb-text);
  font-weight: var(--zb-weight-semibold);
}
.zbui .zb-search-page__vertical[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-accent);
  content: "";
}
.zbui .zb-search-page__vertical:focus-visible {
  border-radius: var(--zb-radius-xs);
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
.zbui .zb-search-page__vertical-icon,
.zbui .zb-search-page__icon {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
  flex: none;
}

/* —— 结果头部、工具与筛选 —— */
.zbui .zb-search-page__body {
  padding-top: var(--zb-space-xl);
  padding-bottom: var(--zb-space-2xl);
}
.zbui .zb-search-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zb-space-sm) var(--zb-space-md);
  /* 翻页时滚回这里；往上滚时顶栏固定在视口顶部，高 60px（管理条盖在它上面，不额外占高度）。 */
  scroll-margin-top: calc(60px + var(--zb-space-md));
}
.zbui .zb-search-page__summary {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--zb-space-2xs) var(--zb-space-sm);
}
/* 标题最多两行：关键词可以很长，完整的在搜索框里。 */
.zbui .zb-search-page__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--zb-text);
  font-size: var(--zb-text-2xl);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.zbui .zb-search-page__title:focus {
  outline: 0;
}
.zbui .zb-search-page__count {
  margin: 0;
  color: var(--zb-text-muted);
  font-size: var(--zb-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--zb-leading-snug);
}
.zbui .zb-search-page__page::before {
  content: "· ";
}
/* 工具条：左侧分类与搜索选项，右侧排序与视图切换；已选条件单独一行。 */
.zbui .zb-search-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--zb-space-xs) var(--zb-space-sm);
  margin: var(--zb-space-md) 0 0;
}
/* 零结果时标题只留给读屏，头部没有高度，工具条贴着正文的上内边距。 */
.zb-search-page__head:has(> .zb-search-sr) + .zb-search-page__toolbar {
  margin-top: 0;
}
.zbui .zb-search-page__tools,
.zbui .zb-search-page__filters,
.zbui .zb-search-page__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zb-space-xs);
}
.zbui .zb-search-page__chips {
  margin: var(--zb-space-sm) 0 0;
}

/* 下拉（分类、排序、搜索选项）：<details> 加 summary 按钮，浮层是无遮罩的 raised 表面加细边框。 */
.zbui .zb-search-page__menu {
  position: relative;
}
.zbui .zb-search-page__trigger {
  display: inline-flex;
  height: var(--zb-control-h-sm);
  align-items: center;
  gap: var(--zb-space-2xs);
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-sm);
  /* 同收藏页：白面板上白底加 1.2:1 的边框看起来像一段字，次要按钮都有一层浅灰底。 */
  background: var(--zb-muted);
  color: var(--zb-text);
  cursor: pointer;
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  list-style: none;
  padding: 0 var(--zb-space-sm);
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  transition: border-color var(--zb-duration-fast) var(--zb-ease), background-color var(--zb-duration-fast) var(--zb-ease),
    color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-search-page__trigger::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .zbui .zb-search-page__trigger:hover {
    border-color: var(--zb-primary-soft-border-strong);
  }
}
.zbui .zb-search-page__trigger:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
/* 非默认的筛选与排序：主色弱化底。 */
.zbui .zb-search-page__trigger.is-active {
  border-color: var(--zb-primary-soft-border);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
}
.zbui .zb-search-page__trigger-lead {
  color: var(--zb-text-muted);
}
.zb-search-page__trigger.is-active .zb-search-page__trigger-lead {
  color: inherit;
}
.zbui .zb-search-page__trigger-short {
  display: none;
}
.zbui .zb-search-page__chevron {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
  flex: none;
  color: var(--zb-text-muted);
  transition: transform var(--zb-duration-fast) var(--zb-ease);
}
.zb-search-page__menu[open] .zb-search-page__chevron {
  transform: rotate(180deg);
}
.zbui .zb-search-page__popover {
  position: absolute;
  z-index: var(--zb-z-dropdown);
  top: calc(100% + var(--zb-space-2xs));
  left: 0;
  width: max-content;
  min-width: 200px;
  max-width: min(320px, calc(100vw - var(--zb-space-2xl)));
  max-height: min(360px, 60vh);
  overflow: auto;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-md);
  background: var(--zb-surface-raised);
  box-shadow: var(--zb-shadow-overlay), var(--zb-inset-highlight);
  opacity: 1;
  padding: var(--zb-space-2xs);
  transform: none;
  transition: opacity var(--zb-duration-fast) var(--zb-ease-out), transform var(--zb-duration-fast) var(--zb-ease-out);
}
@starting-style {
  .zbui .zb-search-page__popover {
    opacity: 0;
    transform: translateY(-4px);
  }
}
/* 排序在右侧：浮层右对齐。 */
.zbui .zb-search-page__tools .zb-search-page__popover {
  right: 0;
  left: auto;
}
.zbui .zb-search-page__menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.zbui .zb-search-page__menu-item {
  display: flex;
  min-height: var(--zb-control-h-sm);
  align-items: center;
  justify-content: space-between;
  gap: var(--zb-space-sm);
  border-radius: var(--zb-radius-sm);
  color: var(--zb-text);
  font-size: var(--zb-text-base);
  line-height: var(--zb-leading-snug);
  padding: 0 var(--zb-space-sm);
  text-decoration: none;
  transition: background-color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__menu-item:hover {
    background: var(--zb-muted);
    color: var(--zb-text);
  }
}
.zbui .zb-search-page__menu-item:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: -2px;
}
.zbui .zb-search-page__menu-item[aria-current="true"] {
  color: var(--zb-link);
  font-weight: var(--zb-weight-semibold);
}
.zbui .zb-search-page__menu-item--level-1 {
  padding-left: var(--zb-space-xl);
}
.zbui .zb-search-page__menu-item--level-2 {
  padding-left: var(--zb-space-2xl);
}
.zbui .zb-search-page__menu-item--level-3 {
  padding-left: calc(var(--zb-space-2xl) + var(--zb-space-sm));
}
.zbui .zb-search-page__check {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
  flex: none;
}

/* 搜索选项：标题一行，下面每组说明在上、分段控件占满宽度并均分（同首页搜索的选项浮层），说明较长的语言也不折行。 */
.zbui .zb-search-page__popover--options {
  min-width: 300px;
  padding: var(--zb-space-md);
}
.zb-search-page__popover--options .zb-search-options {
  flex-direction: column;
  align-items: stretch;
  gap: var(--zb-space-sm);
}
.zb-search-page__popover--options .zb-search-options__group {
  display: grid;
  gap: var(--zb-space-2xs);
}
.zb-search-page__popover--options .zb-search-options__segments {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}
.zbui .zb-search-page__apply {
  display: inline-flex;
  height: var(--zb-control-h-sm);
  align-items: center;
  justify-self: end;
  /* 选项面板浮起，深色下比浅灰底还亮：「应用」用浅色调，同收藏页的批量栏。 */
  border: 1px solid var(--zb-primary-soft-border);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
  cursor: pointer;
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  margin: var(--zb-space-sm) 0 0;
  padding: 0 var(--zb-space-md);
}
.zb-search-page.is-js .zb-search-page__apply {
  display: none;
}

/* 已选条件 */
.zbui .zb-search-page__chip {
  position: relative;
  display: inline-flex;
  height: var(--zb-control-h-xs);
  align-items: center;
  gap: var(--zb-space-2xs);
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  color: var(--zb-text);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-xs) 0 var(--zb-space-sm);
  text-decoration: none;
  transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__chip:hover {
    background: var(--zb-primary-soft);
    color: var(--zb-primary-soft-text);
  }
}
.zbui .zb-search-page__chip:focus-visible,
.zbui .zb-search-page__clear:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
.zbui .zb-search-page__chip-icon {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
  flex: none;
  color: var(--zb-text-muted);
}
@media (hover: hover) {
  .zb-search-page__chip:hover .zb-search-page__chip-icon {
    color: inherit;
  }
}
.zbui .zb-search-page__clear {
  border-radius: var(--zb-radius-xs);
  color: var(--zb-link);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-2xs);
  text-decoration: none;
}
@media (hover: hover) {
  .zbui .zb-search-page__clear:hover {
    text-decoration: underline;
  }
}

/* 视图切换：分段控件，轨道内凹、选中块凸起；没有脚本时不显示。 */
.zbui .zb-search-page__view {
  display: none;
  align-items: center;
  border-radius: var(--zb-radius-sm);
  background: var(--zb-surface-inset);
  padding: var(--zb-space-2xs);
}
.zb-search-page.is-js .zb-search-page__view {
  display: inline-flex;
}
.zbui .zb-search-page__view-button {
  display: inline-grid;
  width: 32px;
  height: var(--zb-control-h-xs);
  place-items: center;
  border: 0;
  border-radius: var(--zb-radius-xs);
  background: transparent;
  color: var(--zb-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__view-button:hover {
    color: var(--zb-text);
  }
}
.zbui .zb-search-page__view-button[aria-pressed="true"] {
  background: var(--zb-surface-raised);
  box-shadow: var(--zb-shadow-card);
  color: var(--zb-text);
}
.zbui .zb-search-page__view-button:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 1px;
}

/* —— 局部加载、失败提示 —— */
.zbui .zb-search-page__progress {
  position: fixed;
  z-index: var(--zb-z-toast);
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-search-page__progress::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--zb-accent);
  content: "";
  transform: translateX(-100%);
}
.zb-search-page.is-loading .zb-search-page__progress {
  opacity: 1;
}
.zb-search-page.is-loading .zb-search-page__progress::after {
  animation: zb-search-page-progress var(--zb-duration-pulse) var(--zb-ease) infinite;
}
.zbui .zb-search-page__results {
  margin: var(--zb-space-lg) 0 0;
  transition: opacity var(--zb-duration-base) var(--zb-ease);
}
.zb-search-page.is-loading .zb-search-page__results {
  opacity: 0.62;
}
.zbui .zb-search-page__alert {
  display: flex;
  align-items: center;
  gap: var(--zb-space-xs);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-danger-soft);
  color: var(--zb-danger-soft-text);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-snug);
  margin: var(--zb-space-md) 0 0;
  padding: var(--zb-space-sm) var(--zb-space-md);
}
.zbui .zb-search-page__retry {
  border: 0;
  border-radius: var(--zb-radius-xs);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-weight: var(--zb-weight-semibold);
  margin: 0 0 0 auto;
  padding: 0 var(--zb-space-2xs);
  text-decoration: underline;
}
.zbui .zb-search-page__retry:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}

/* —— 结果：默认网格（≥992px 4 列），列表视图见下；条目是共用的文章卡片（.zb-post-card，在 assets/src/zbui.css）。
   卡片有底色，横竖间距一样 —— */
.zbui .zb-search-page__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--zb-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zbui .zb-search-page__item {
  display: flex;
  min-width: 0;
}

/* 列表视图：一列，行间分隔线。 */
.zb-search-page[data-view="list"] .zb-search-page__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.zb-search-page:where([data-view="list"]) .zb-search-page__item + .zb-search-page__item {
  border-top: 1px solid var(--zb-border);
}

/* —— 空状态 —— */
.zbui .zb-search-page__empty {
  display: grid;
  max-width: 32em;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--zb-space-sm);
  margin: var(--zb-space-2xl) auto;
  text-align: center;
}
.zbui .zb-search-page__empty-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  color: var(--zb-text-muted);
}
.zbui .zb-search-page__empty-icon svg {
  width: var(--zb-icon-2xl);
  height: var(--zb-icon-2xl);
}
.zbui .zb-search-page__empty-title {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--zb-space-xs) 0 0;
  color: var(--zb-text);
  font-size: var(--zb-text-xl);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.zbui .zb-search-page__empty-text {
  margin: 0;
  color: var(--zb-text-soft);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-normal);
  text-wrap: balance;
}
.zbui .zb-search-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zb-space-xs);
  margin: var(--zb-space-xs) 0 0;
}
.zbui .zb-search-page__action {
  display: inline-flex;
  height: var(--zb-control-h-sm);
  align-items: center;
  gap: var(--zb-space-xs);
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-sm);
  background: var(--zb-muted);
  color: var(--zb-text);
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-md);
  text-decoration: none;
  transition: border-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
@media (hover: hover) {
  .zbui .zb-search-page__action:hover {
    border-color: var(--zb-primary-soft-border-strong);
    color: var(--zb-link);
  }
}
.zbui .zb-search-page__action:focus-visible,
.zbui .zb-search-page__hot-word:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
.zbui .zb-search-page__hot {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--zb-space-xs);
  margin: var(--zb-space-lg) 0 0;
}
.zbui .zb-search-page__hot-title {
  margin: 0;
  color: var(--zb-text-muted);
  font-size: var(--zb-text-xs);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-snug);
}
.zbui .zb-search-page__hot-list {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--zb-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.zbui .zb-search-page__hot-list > li {
  max-width: 100%;
}
.zbui .zb-search-page__hot-word {
  display: inline-flex;
  max-width: 100%;
  height: var(--zb-control-h-xs);
  align-items: center;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  color: var(--zb-text-soft);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-tight);
  padding: 0 var(--zb-space-sm);
  text-decoration: none;
  transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
/* 热词来自访客的搜索，可以很长：单行省略，不撑破胶囊。 */
.zbui .zb-search-page__hot-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .zbui .zb-search-page__hot-word:hover {
    background: var(--zb-primary-soft);
    color: var(--zb-primary-soft-text);
  }
}

/* 结果页里分页离结果远一点：网格行间距是 32px。 */
.zbui .zb-search-page__results .zb-pagination {
  margin: var(--zb-space-2xl) 0 0;
}

@keyframes zb-search-page-progress {
  to {
    transform: translateX(250%);
  }
}

/* —— 触屏：触控目标 44px —— */
@media (pointer: coarse) {
  .zbui .zb-search-page__trigger,
  .zbui .zb-search-page__menu-item,
  .zbui .zb-search-page__action {
    min-height: var(--zb-control-h);
  }
  .zbui .zb-search-page__chip::before,
  .zbui .zb-search-page__hot-word::before,
  .zbui .zb-search-page__submit::before {
    position: absolute;
    inset: calc((var(--zb-control-h-xs) - var(--zb-control-h)) / 2) 0;
    content: "";
  }
  .zbui .zb-search-page__hot-word {
    position: relative;
  }
  /* 视图切换：按钮 28px 高放在 36px 的轨道里，和旁边的按钮等高；看不见的一层把点击区撑到 44px。 */
  .zbui .zb-search-page__view-button {
    position: relative;
    width: var(--zb-control-h);
    height: var(--zb-control-h-xs);
  }
  .zbui .zb-search-page__view-button::before {
    position: absolute;
    inset: calc((100% - var(--zb-control-h)) / 2) 0;
    content: "";
  }
}

/* —— 平板与窄屏 —— */
@media (max-width: 991.98px) {
  .zbui .zb-search-page__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .zbui .zb-search-page__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--zb-space-sm);
  }
}
/* —— 手机：搜索栏与页签占满一行，筛选换行（不做横向滚动，以免裁掉下拉浮层） —— */
@media (max-width: 575.98px) {
  .zbui .zb-search-page__band {
    padding: var(--zb-space-md) 0;
  }
  .zbui .zb-search-page__band-inner {
    gap: var(--zb-space-sm);
  }
  .zbui .zb-search-page__search {
    max-width: none;
  }
  .zbui .zb-search-page__submit {
    padding: 0 var(--zb-space-md);
  }
  .zbui .zb-search-page__verticals {
    gap: 0;
    margin-bottom: calc(-1 * var(--zb-space-md));
  }
  .zbui .zb-search-page__vertical {
    flex: 1 1 0;
    justify-content: center;
  }
  .zbui .zb-search-page__body {
    padding-top: var(--zb-space-md);
    padding-bottom: var(--zb-space-xl);
  }
  .zbui .zb-search-page__title {
    font-size: var(--zb-text-lg);
  }
  /* 浮层不跟着触发按钮，统一贴工具条底部、与工具条同宽：排序在右侧时也不会出屏，选项也不会撑宽页面。 */
  .zbui .zb-search-page__toolbar {
    position: relative;
    gap: var(--zb-space-xs);
    margin: var(--zb-space-sm) 0 0;
  }
  /* 收紧间距和内边距，常见手机宽度（360 起）放得进一行。 */
  .zbui .zb-search-page__tools,
  .zbui .zb-search-page__filters {
    gap: var(--zb-space-2xs);
  }
  .zbui .zb-search-page__trigger {
    padding: 0 var(--zb-space-xs);
  }
  .zbui .zb-search-page__menu {
    position: static;
  }
  .zbui .zb-search-page__popover,
  .zbui .zb-search-page__tools .zb-search-page__popover {
    right: 0;
    left: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }
  /* 视图切换只留未选中的那个按钮，点一下换过去，工具条放得进一行。 */
  .zbui .zb-search-page__view {
    align-self: stretch;
    background: transparent;
    padding: 0;
  }
  .zbui .zb-search-page__view-button {
    height: 100%;
    border: 1px solid var(--zb-chip-border);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-muted);
    color: var(--zb-text);
  }
  .zbui .zb-search-page__view-button[aria-pressed="true"] {
    display: none;
  }
  .zbui .zb-search-page__trigger-lead,
  .zbui .zb-search-page__trigger-long {
    display: none;
  }
  .zbui .zb-search-page__trigger-short {
    display: inline;
  }
  .zbui .zb-search-page__results {
    margin: var(--zb-space-md) 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zbui .zb-search-page__submit,
  .zbui .zb-search-page__vertical,
  .zbui .zb-search-page__trigger,
  .zbui .zb-search-page__chevron,
  .zbui .zb-search-page__popover,
  .zbui .zb-search-page__menu-item,
  .zbui .zb-search-page__chip,
  .zbui .zb-search-page__view-button,
  .zbui .zb-search-page__progress,
  .zbui .zb-search-page__results,
  .zbui .zb-search-page__action,
  .zbui .zb-search-page__hot-word,
  .zb-search-page__popover--options .zb-search-options__segments label {
    transition: none !important;
  }
  .zb-search-page__menu[open] .zb-search-page__chevron {
    transform: none !important;
  }
  .zb-search-page.is-loading .zb-search-page__progress::after {
    animation: none !important;
    transform: none !important;
    width: 100%;
  }
}
@media (forced-colors: active) {
  .zbui .zb-search-page__vertical[aria-current="page"]::after {
    height: 4px;
    background: Highlight;
    forced-color-adjust: none;
  }
  .zbui .zb-search-page__trigger.is-active,
  .zbui .zb-search-page__view-button[aria-pressed="true"],
  .zbui .zb-search-page__menu-item[aria-current="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}