/* 基础样式设置 */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 使用现代无衬线字体 */
    background-color: #e5e5e5; /* 浅灰色背景 */
    background-image: linear-gradient(to bottom, #d0d0d0, #eaeaea); /* 轻微渐变背景增强深度感 */
    margin: 0; /* 移除默认边距 */
    padding: 0; /* 移除默认内边距 */
    color: #333; /* 主文本颜色 */
    -webkit-text-size-adjust: none; /* 防止iOS自动调整字体大小 */
    min-height: 100vh; /* 确保页面高度至少为视口高度 */
}

/* 页面容器 */
.container {
    max-width: 500px; /* 限制最大宽度，在大屏幕上保持紧凑布局 */
    margin: 0 auto; /* 水平居中容器 */
    padding: 20px; /* 内部间距 */
}

/* 头部区域 */
.header {
    background-color: #2d2d2d; /* 深色背景 */
    background-image: linear-gradient(to bottom, #4a4a4a, #2d2d2d); /* 渐变背景增强立体感 */
    color: white; /* 白色文本 */
    padding: 14px 20px; /* 内边距 */
    font-size: 18px; /* 标题字体大小 */
    font-weight: bold; /* 加粗字体 */
    text-align: center; /* 文本居中 */
    border-radius: 10px 10px 0 0; /* 顶部圆角 */
    border: 2px solid #111; /* 加粗边框 */
    border-bottom: none; /* 底部无边框（与内容区连接） */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5); /* 文本阴影增强可读性 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15); /* 内阴影创造高光效果 */
}

/* 内容区域 */
.content {
    background-color: #f9f9f9; /* 浅色背景 */
    background-image: linear-gradient(to bottom, #f9f9f9, #f0f0f0); /* 轻微渐变 */
    padding: 20px; /* 内边距 */
    border-radius: 0 0 10px 10px; /* 底部圆角 */
    border: 2px solid #999; /* 边框 */
    border-top: none; /* 顶部无边框（与头部连接） */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); /* 外部阴影创造悬浮感 */
}

/* 主要按钮卡片 */
.button-card {
    display: block; /* 块级元素 */
    margin-bottom: 15px; /* 底部间距 */
    border-radius: 8px; /* 圆角 */
    background: #f0f0f0; /* 背景色 */
    border: 2px solid #999; /* 边框 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
    overflow: hidden; /* 溢出内容隐藏 */
    transition: all 0.2s ease; /* 过渡动画 */
    text-decoration: none; /* 无下划线 */
}

/* 按钮卡片悬停效果 */
.button-card:hover {
    transform: translateY(-2px); /* 上移2px */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 更深的阴影 */
}

/* 按钮主要部分 */
.button-main {
    display: block; /* 块级元素 */
    background-color: #3a7bbd; /* 蓝色背景 */
    background-image: linear-gradient(to bottom, #4d8fd6, #3a7bbd); /* 渐变背景 */
    color: white; /* 白色文本 */
    text-decoration: none; /* 无下划线 */
    text-align: center; /* 文本居中 */
    padding: 14px 15px; /* 内边距 */
    font-weight: bold; /* 加粗字体 */
    border: none; /* 无边框 */
    border-bottom: 2px solid #2a5a8c; /* 底部边框（创造立体感） */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3); /* 文本阴影 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); /* 内阴影 */
    position: relative; /* 定位基准 */
}

/* 按钮点击效果 */
.button-main:active {
    background-image: linear-gradient(to bottom, #3a7bbd, #2a5a8c); /* 反转渐变创造点击感 */
}

/* 按钮底部信息 */
.button-footer {
    font-size: 12px; /* 小字体 */
    color: #555; /* 灰色文本 */
    text-align: center; /* 文本居中 */
    padding: 10px 15px; /* 内边距 */
    background: #f9f9f9; /* 背景色 */
    border-top: 2px solid #ddd; /* 顶部边框 */
    text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* 文本阴影 */
    text-decoration: none; /* 无下划线 */
}

/* 备用按钮容器 */
.backup-buttons {
    display: flex; /* 弹性布局 */
    justify-content: space-around; /* 均匀分布 */
    margin-top: 20px; /* 顶部间距 */
    flex-wrap: wrap; /* 允许换行 */
}

/* 备用按钮样式 */
.backup-btn {
    display: inline-block; /* 行内块元素 */
    padding: 8px 16px; /* 内边距 */
    background-color: #e5e5e5; /* 背景色 */
    color: #333; /* 文本颜色 */
    text-decoration: none; /* 无下划线 */
    border-radius: 4px; /* 圆角 */
    font-size: 14px; /* 字体大小 */
    margin: 5px; /* 边距 */
    flex: 1; /* 弹性伸缩 */
    max-width: 30%; /* 最大宽度 */
    text-align: center; /* 文本居中 */
    box-sizing: border-box; /* 盒模型计算方式 */
}

/* 备用按钮悬停效果 */
.backup-btn:hover {
    background-color: #e0e0e0; /* 背景色变深 */
}

/* 移动设备响应式布局 */
@media (max-width: 480px) {
    .backup-buttons {
        flex-direction: column; /* 垂直排列 */
    }
    .backup-btn {
        max-width: 100%; /* 占满宽度 */
        margin-bottom: 10px; /* 底部间距 */
    }
}

/* 图标容器 */
.icon {
    width: 70px; /* 宽度 */
    height: 70px; /* 高度 */
    margin: 0 auto 20px; /* 居中并设置底部间距 */
    display: block; /* 块级元素 */
    background-color: #3a7bbd; /* 蓝色背景 */
    background-image: linear-gradient(to bottom, #4d8fd6, #3a7bbd); /* 渐变背景 */
    border-radius: 14px; /* 圆角 */
    color: white; /* 文本颜色 */
    overflow: hidden; /* 溢出内容隐藏 */
    font-size: 40px; /* 字体大小 */
    text-align: center; /* 文本居中 */
    line-height: 70px; /* 行高等于高度（垂直居中） */
    border: 2px solid #2a5a8c; /* 边框 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 5px rgba(0,0,0,0.2); /* 内外部阴影 */
    text-shadow: 0 -1px 0 rgba(0,0,0,0.3); /* 文本阴影 */
}

/* 图标中的图片样式 */
.icon img {
    width: 100%; /* 宽度占满容器 */
    height: 100%; /* 高度占满容器 */
    object-fit: contain; /* 保持比例，适应容器 */
    /* 可选：object-fit: cover; 覆盖容器（可能裁剪） */
}

/* 警告提示样式 */
.warning {
    color: #d32323; /* 红色文本 */
    font-weight: bold; /* 加粗字体 */
    margin: 20px 0; /* 上下边距 */
    padding: 12px; /* 内边距 */
    background-color: #ffecec; /* 浅红色背景 */
    border: 2px solid #ff9e9e; /* 边框 */
    border-radius: 8px; /* 圆角 */
    text-shadow: 0 1px 0 rgba(255,255,255,0.5); /* 文本阴影 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); /* 内阴影 */
    text-align: center; /* 文本居中 */
    text-decoration: none; /* 无下划线 */
}

/* 二级标题样式 */
h2 {
    text-align: center; /* 文本居中 */
    margin: 0 0 15px 0; /* 底部边距 */
    color: #222; /* 深色文本 */
    text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* 文本阴影 */
    font-size: 22px; /* 字体大小 */
    text-decoration: none; /* 无下划线 */
}

/* 介绍文本样式 */
.intro-text {
    text-align: center; /* 文本居中 */
    margin: 0 0 20px 0; /* 底部边距 */
    line-height: 1.5; /* 行高 */
    color: #555; /* 灰色文本 */
    text-decoration: none; /* 无下划线 */
}

/* 页脚样式 */
.footer {
    text-align: center; /* 文本居中 */
    font-size: 11px; /* 小字体 */
    color: #777; /* 浅灰色文本 */
    margin-top: 25px; /* 顶部边距 */
    text-shadow: 0 1px 0 rgba(255,255,255,0.8); /* 文本阴影 */
    line-height: 1.4; /* 行高 */
    text-decoration: none; /* 无下划线 */
}

/* 源选择按钮容器 */
.source-buttons {
    display: flex; /* 弹性布局 */
    justify-content: center; /* 居中排列 */
    gap: 12px; /* 按钮间距 */
    margin: 12px 0 8px 0; /* 上下边距 */
    padding: 0 15px; /* 左右内边距 */
    align-items: center; /* 垂直居中 */
}

/* 源选择按钮样式 */
.source-btn {
    padding: 6px 12px; /* 内边距 */
    border-radius: 5px; /* 圆角弧度（胶囊形状） */
    font-size: 13px; /* 字体大小 */
    font-weight: 500; /* 中等字重 */
    cursor: pointer; /* 指针光标 */
    border: none; /* 无边框 */
    outline: none; /* 无聚焦轮廓 */
    min-width: 70px; /* 最小宽度 */
    transition: all 0.2s ease; /* 过渡动画 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 阴影 */
}

/* 源选择按钮点击效果 */
.source-btn:active {
    transform: scale(0.96); /* 点击时缩小 */
}

/* Cydia风格按钮 */
.cydia-btn {
    background-color: #7b583a; /* 黄色背景 */
    color: white; /* 深色文本 */
}

/* Cydia按钮悬停效果 */
.cydia-btn:hover {
    background-color: #7b583a; /* 背景色变亮 */
}

/* Sileo风格按钮 */
.sileo-btn {
    background-color: #17BBB8; /* 蓝色背景 */
    color: white; /* 白色文本 */
}

/* Sileo按钮悬停效果 */
.sileo-btn:hover {
    background-color: #17BBB8; /* 背景色变亮 */
}
/* Sileo风格按钮 */
.zebra-btn {
    background-color: #B9B9B9; /* 蓝色背景 */
    color: white; /* 白色文本 */
}

/* Sileo按钮悬停效果 */
.zebra-btn:hover {
    background-color: #B9B9B9; /* 背景色变亮 */
}