body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f7f7f7;
    color: #333;
}

header {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直居中对齐 */
    text-align: center;
    padding: 20px;
    background-color: #f8f8f8; /* 为header增加背景色 */
    border-bottom: 2px solid #e0e0e0; /* 在底部增加一条边线作为下划线 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选，增加一些阴影效果 */
}

/* 如果header内有其他的元素样式定义，保持原样或根据需要调整 */


.logo-and-title {
    display: flex; /* 使用flex布局使logo和标题左右排列 */
    align-items: center; /* 使logo和标题在同一行上垂直居中 */
    margin-bottom: 20px; /* 在标题下方留出一些空间 */
    border-bottom: 2px solid #e0e0e0; /* 在底部增加一条边线作为下划线 */
}

.header-logo {
    height: 50px; /* 调整为适当的大小 */
    margin-right: 15px; /* 在logo和标题之间留出一些空间 */
}

.intro-text {
    /* 在标题和介绍文本之间提供一些空间 */
    margin-top: 20px;
}

.app-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.app {
    background: white;
    border: 1px solid #eeeeee;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 15px;
    transition: box-shadow 0.3s ease;
}

.app:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.app-icon, .app-image {
    width: 100%;
    border-radius: 5px;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 使内容分布在两侧 */
    width: 100%; /* 确保.app-header占据所有可用空间 */
    border-bottom: 1px solid #e3e2e2; /* 在底部增加一条边线作为下划线 */
}

.app-icon {
    margin-right: 10px; /* 保持图标与标题之间的间距 */
    margin-bottom: 10px;
    width: 50px; /* 调整为所需尺寸 */
    height: 50px; /* 保持图标为正方形 */
}

.app h2 {
    flex-grow: 1; /* 允许标题占据多余空间，以便评级信息可以靠右对齐 */
    margin: 0;
    padding-right: 10px; /* 确保标题与评级信息之间有间隔 */
}

.app-rating {
    margin-left: auto; /* 会推动评级信息靠右对齐 */
    display: flex;
    align-items: center;
}

/* 如果需要调整评级星星的样式 */
.app-rating span {
    font-size: 16px; /* 或者根据需求调整大小 */
    margin-right: 5px; /* 如果需要在评级和评级文本之间添加空间 */
}

.app-rating .rating-text {
    font-size: 14px; /* 评级文本的大小 */
    color: #666; /* 评级文本的颜色 */
}

.app a {
    display: inline-block;
    padding: 8px 12px;
    background: #050505;
    color: white;
    text-decoration: none;
    margin-top: 10px;
    border-radius: 3px;
}

footer {
    text-align: center;
    padding: 20px 0;
    background: #eeeeee;
    color: #333;
    border-top: 2px solid #dddddd;
}


.download-buttons {
    display: flex;
    justify-content: flex-end; /* 将按钮靠右排列 */
    margin-top: 10px;
    margin-right: 8px; /* 在图标和文本之间增加一些空间 */
}

.download-button {
    background-color: #e0e0e0; /* 浅灰色 */
    color: #279cdf; /* 深色文本以保证可读性 */
    border: 1px solid #bdbdbd; /* 稍微深一点的灰色边框 */
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    /* 其他样式保持不变 */
}

.download-button.ios {
    /* 可以为苹果下载按钮指定一个特殊的颜色，如果需要 */
    background-color: #29874B; /* 柔和橙色 */
}

.download-button.android {
    /* 同样，也可以为安卓下载按钮指定一个特殊的颜色 */
    background-color: #29874B; /* 柔和橙色 */
}


.download-button:hover {
    background-color: #bdbdbd; /* 悬停时颜色稍微深一点 */
}


/* 移动端不需要调整，因为.download-button已设置为block */


@media (max-width: 600px) {
    .download-button {
        width: calc(100% - 10px); /* 移动端按钮宽度调整 */
        margin: 5px 0; /* 按钮上下外边距 */
    }
}


/* 响应式调整 */
@media (max-width: 600px) {
    .app {
        width: 90%; /* 移动设备上宽度更适应 */
    }
}

@media (min-width: 601px) {
    .app {
        width: 45%; /* PC上一行显示两个 */
    }
}