.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  overflow-x: hidden;
}

.search-section {
  padding: 20rpx 30rpx;
}

.search-box {
  display: flex; align-items: center;
  background: #ffffff; border-radius: 40rpx;
  padding: 20rpx 28rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
}

.search-icon { font-size: 30rpx; margin-right: 14rpx; }

.search-input { flex: 1; font-size: 28rpx; color: #333; height: 50rpx; }

.search-clear {
  width: 44rpx; height: 44rpx;
  display: flex; align-items: center; justify-content: center;
  background: #e0e0e0; border-radius: 50%;
  font-size: 22rpx; color: #ffffff; margin-left: 14rpx;
}

.category-scroll { white-space: nowrap; padding: 10rpx 30rpx 20rpx; }

.cat-chip {
  display: inline-block; padding: 14rpx 28rpx; margin-right: 16rpx;
  background: #ffffff; border-radius: 28rpx; font-size: 26rpx;
  color: #666; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.cat-chip.active {
  background: #4A90D9; color: #ffffff; font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(74, 144, 217, 0.3);
}

.top-search { padding: 0 30rpx 10rpx; }
.top-label { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
.top-tags { display: flex; flex-wrap: wrap; gap: 14rpx; }

.top-tag {
  padding: 12rpx 24rpx; background: #ffffff;
  border: 1rpx solid #e8e8e8; border-radius: 24rpx;
  font-size: 24rpx; color: #555;
}

.top-tag:active { background: #e8f0fa; border-color: #4A90D9; color: #4A90D9; }

.result-bar { padding: 10rpx 30rpx; }
.result-text { font-size: 24rpx; color: #999; }

.drug-list { padding: 10rpx 30rpx; }

.drug-card {
  display: flex; align-items: center;
  background: #ffffff; border-radius: 20rpx; padding: 28rpx;
  margin-bottom: 18rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.drug-card:active { transform: scale(0.985); }

.card-icon {
  width: 90rpx; height: 90rpx;
  border-radius: 18rpx;
  margin-right: 20rpx;
  overflow: hidden;
  flex-shrink: 0;
}

.card-img {
  width: 100%;
  height: 100%;
}

.card-body { flex: 1; overflow: hidden; }
.card-name { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 6rpx; }
.card-generic { font-size: 22rpx; color: #aaa; margin-bottom: 10rpx; }

.card-footer { display: flex; align-items: center; gap: 12rpx; }
.card-category { font-size: 20rpx; color: #4A90D9; background: #e8f0fa; padding: 4rpx 14rpx; border-radius: 8rpx; }

.card-otc { font-size: 20rpx; padding: 4rpx 14rpx; border-radius: 8rpx; font-weight: 600; }
.card-otc.otc { color: #07C160; background: #e8f8ee; }
.card-otc.rx { color: #FF3B30; background: #ffebea; }

.card-right { text-align: right; margin-left: 14rpx; }
.card-price { font-size: 26rpx; color: #FF6B35; font-weight: 600; margin-bottom: 6rpx; }
.card-arrow { font-size: 32rpx; color: #ccc; }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
.empty-text { font-size: 30rpx; color: #999; margin-bottom: 10rpx; }
.empty-desc { font-size: 24rpx; color: #ccc; }