/* 搜索框容器样式 (不变) */
.search-container {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    gap: 10px;
}


#search-button { padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
#search-button:hover { background-color: #0056b3; }

/*       
#search-input { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
*/


/* 正常状态下的输入框 */
#search-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc; /* 灰色细边框 */
  border-radius: 4px;
  transition: border-color 0.3s ease; /* 平滑过渡效果 */
}

/* 获得焦点时的输入框 */
#search-input:focus {
  /* 1. 移除浏览器默认的 outline，避免冲突或样式不一致 */
  outline: none; 

  /* 2. 应用自定义的边框样式 */
  border-color: #007bff; /* 边框颜色变为蓝色 */
  border-width: 磊px;     /* 边框宽度变粗到 2px */

  /* (可选) 添加一个阴影效果，让它看起来更“突出”
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); */
}