/* ==========================================================================
   牛马宝库 · 搜索区（搜索框 + 引擎按钮）
   ========================================================================== */

.search-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 100px 0;
}

.search {
  display: flex;
  align-items: center;
  width: min(430px, 100%);
  height: 52px;
  padding: 0 26px;
  background: #fff;
  border-radius: 999px;
  box-shadow:
    0 12px 30px -14px rgba(108, 150, 190, 0.55),
    0 1px 2px rgba(108, 150, 190, 0.08);
  transition: box-shadow 0.25s ease;
}

.search:focus-within {
  box-shadow:
    0 14px 34px -12px rgba(86, 150, 210, 0.5),
    0 0 0 3px rgba(111, 189, 242, 0.22);
}

.search-input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.02em;
}

.search-input::placeholder {
  color: #b8c7d4;
  letter-spacing: 0.04em;
}

/* 空输入抖动提示 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.search.is-shake {
  animation: shake 0.42s ease;
}

.engine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  width: 100%;
  max-width: 980px;
  margin-top: 20px;
}

.engine-btn {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #22303f;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}

.engine-btn:hover {
  background-color: rgba(255, 255, 255, 0.72);
  color: #16222f;
}

/* 当前选中的引擎：白色胶囊高亮 */
.engine-btn.is-active {
  background-color: #fff;
  color: #16222f;
  box-shadow:
    0 12px 26px -14px rgba(105, 148, 188, 0.85),
    0 1px 2px rgba(105, 148, 188, 0.1);
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .search-panel {
    margin: 62px 0;
  }
}
   
@media (max-width: 720px) {
  .search-panel {
    margin: 32px 0;
  }

  .search {
    height: 48px;
    padding: 0 20px;
  }

  .search-input {
    font-size: 16px; /* 避免 iOS 聚焦时放大 */
  }

  .engine-row {
    gap: 4px 8px;
    margin-top: 18px;
  }

  .engine-btn {
    padding: 9px 15px;
    font-size: 13.5px;
  }
}

@media (max-width: 460px) {
  .search {
    height: 46px;
  }

  .search-input {
    font-size: 15px;
  }
}