/* ==================== 基础全局样式 ==================== */
body {
    /* 字体策略：优先使用系统字体确保最佳渲染效果 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* 排版基础：1.6行高提供舒适阅读体验 */
    line-height: 1.6;
    
    /* 边距重置：消除默认外边距 */
    margin: 0;
    
    /* 布局安全区：20px内边距避免内容贴边 */
    padding: 20px;
    
    /* 背景层次：深黑背景作为基础画布 */
    background: #121212;
    
    /* 文字对比：浅灰色确保可读性 */
    color: #e0e0e0;
    
    /* 文本处理：iOS连字符支持 */
    -webkit-hyphens: auto;
    hyphens: auto;
    
    /* 长文本处理：强制换行防止溢出 */
    word-wrap: break-word;
}

.container h5 {
    text-align: center;    /* 文字居中 */
    margin: 15px auto;     /* 上下15px 左右自动 */
    max-width: 600px;      /* 控制内容宽度 */
    line-height: 1.6;      /* 增加可读性 */
}
/* ==================== 主容器样式 ==================== */
.container {
    /* 内容限制：1200px最大宽度适应大屏幕 */
    max-width: 1200px;
    
    /* 居中策略：现代浏览器居中方案 */
    margin: 0 auto;
    
    /* 层级背景：深灰提升内容层次感 */
    background: #1e1e1e;
    
    /* 呼吸空间：30px内边距保证内容舒适度 */
    padding: 30px;
    
    /* 圆角设计：12px符合Material Design规范 */
    border-radius: 12px;
    
    /* 深度阴影：微透明黑色阴影创造立体感 */
    -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.3);
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
    
    /* 安全换行：防止长URL/单词破坏布局 */
    word-wrap: break-word;
}

/* ==================== 主标题样式 ==================== */
h1 {
    /* 品牌色：使用iOS系统蓝作为视觉焦点 */
    color: white;
    
    /* 定位策略：绝对居中保持视觉平衡 */
    text-align: center;
    
    /* 间距管理：下边距留白分隔内容区域 */
    margin-bottom: 30px;
    
    /* 字号策略：2.2em适配容器宽度 */
    font-size: 2.2em;
}

/* ==================== 表单组件样式 ==================== */
form {
    /* 使用 Flexbox 布局模型 */
    display: flex;
    
    /* 主轴方向设置为垂直（从上到下排列子元素） */
    flex-direction: column;
    
    /* 设置子元素之间的间距为15px 
       (替代老式的 margin-bottom 逐个设置) */
    gap: 15px;
    
    /* 表单底部外间距，与后续内容保持距离 */
    margin-bottom: 20px;
}

/* URL输入框样式 */
input[type="url"] {
    /* 弹性增长因子：即使容器有剩余空间也保持原始比例 */
    flex: 1;
    
    /* 内边距：垂直12px，水平根据内容自动 */
    padding: 12px;
    
    /* 边框：2px宽度的深灰色实线边框 */
    border: 2px solid #333333;
    
    /* 边框圆角：8px柔和边缘 */
    border-radius: 8px;
    
    /* 字体大小：16px确保移动端可读性 */
    font-size: 16px;
    
    /* 背景色：深灰色与页面主色调协调 */
    background: #2d2d2d;
    
    /* 文字颜色：浅灰色确保与背景的对比度 */
    color: #e0e0e0;
    
    /* 过渡效果：边框颜色变化需要0.3秒完成 */
    transition: border-color 0.3s;
    
    /* 宽度：100%填满父容器 */
    width: 100%;
    
    /* 盒模型：边框和内边距包含在元素总宽度内 */
    box-sizing: border-box;
}

/* 提交按钮样式 */
button[type="submit"] {
    /* 背景色：使用iOS系统蓝作为主色调 */
    background: rgba(10, 132, 255, 1);
    
    /* 文字颜色：深色背景上使用深灰色文字 */
    color: white;
    
    /* 去除默认边框样式 */
    border: none;
    
    /* 内边距：垂直12px，水平25px */
    padding: 12px 25px;
    
    /* 边框圆角：8px与输入框保持一致 */
    border-radius: 8px;
    
    /* 鼠标指针样式：手型表示可点击 */
    cursor: pointer;
    
    /* 字体大小：16px与输入框保持一致 */
    font-size: 16px;
    
    /* 过渡效果：背景色变化和位移变换动画 */
    transition: background 0.3s, transform 0.2s;
    
    /* 宽度：100%填满父容器 */
    width: 100%;
    
    /* 盒模型：边框和内边距包含在元素总宽度内 */
    box-sizing: border-box;
}

/* 按钮悬停状态 */
button[type="submit"]:hover {
    /* 悬停时背景色保持不变（可调整为更深色调） */
    background: rgba(10, 132, 255, 1);
    
    /* Y轴向上位移1px，创造按下效果 */
    transform: translateY(-1px);
}

/* ==================== 卡片组件样式 ==================== */
.card {
    /* 层级背景：中灰色提升内容层次 */
    background: #252525;
    
    /* 圆角一致：8px延续设计语言 */
    border-radius: 8px;
    
    /* 阴影策略：比容器阴影更深增强层级感 */
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
    /* 外间距：20px垂直间距分隔卡片 */
    margin: 20px 0;
    
    /* 内边距：20px保证内容呼吸空间 */
    padding: 20px;
    
    /* 安全换行：防止内容溢出 */
    word-wrap: break-word;
}

/* 卡片标题样式 */
.card h2 {
    /* 色彩延续：使用主蓝色保持统一 */
    color: white;
    
    /* 边距重置：清除默认上边距 */
    margin-top: 0;
    
    /* 字号层次：1.5em建立内容层级 */
    font-size: 1.5em;
    
    /* 下内边距：10px为分隔线留出空间 */
    padding-bottom: 10px;
    
    /* 分隔线：2px深灰线视觉分隔标题与内容 */
    border-bottom: 2px solid #333333;
}

/* ==================== 表格组件样式 ==================== */
.package-table {
    /* 宽度策略：100%填充父容器 */
    width: 100%;
    
    /* 边框策略：合并边框避免双线 */
    border-collapse: collapse;
    
    /* 上边距：15px与上方内容分隔 */
    margin-top: 15px;
    
    /* 布局优化：固定布局提升渲染性能 */
    table-layout: fixed;
}

/* 表头/单元格通用样式 */
.package-table th,
.package-table td {
    /* 内边距：12px保证单元格内容舒适 */
    padding: 12px;
    
    /* 对齐方式：左对齐符合阅读习惯 */
    text-align: left;
    
    /* 底部边框：1px深灰线分隔行内容 */
    border-bottom: 1px solid #333333;
    
    /* 换行处理：允许单元格内容换行 */
    word-wrap: break-word;
    
    /* 最大宽度：防止单个单元格过宽 */
    max-width: 300px;
    
    /* 文字颜色：浅灰保持可读性 */
    color: #e0e0e0;
}

/* 表头特殊样式 */
.package-table th {
    /* 背景层次：深灰背景突出表头 */
    background: #2d2d2d;
    
    /* 字重：600加粗提升可读性 */
    font-weight: 600;
    
    /* 文字颜色：白色与正文区分 */
    color: white;
}

/* 行悬停效果 */
.package-table tr:hover td {
    /* 悬停反馈：深灰背景提示当前行 */
    background: #333333;
}

/* ==================== 预格式文本样式 ==================== */
pre {
    /* 背景层次：深灰背景突出代码块 */
    background: #2d2d2d;
    
    /* 内边距：15px保证代码可读性 */
    padding: 15px;
    
    /* 圆角设计：8px与整体风格一致 */
    border-radius: 8px;
    
    /* 空白处理：保留空格但允许换行 */
    white-space: pre-wrap;
    
    /* 换行策略：兼容旧版属性 */
    word-wrap: break-word;
    
    /* 溢出处理：隐藏水平滚动条 */
    overflow-x: hidden;
    
    /* 字体栈：等宽字体适合代码显示 */
    font-family: Monaco, Consolas, monospace;
    
    /* 字号：0.9em稍小于正文 */
    font-size: 0.9em;
    
    /* 行高：1.5增强代码可读性 */
    line-height: 1.5;
    
    /* 文字颜色：浅灰保持对比度 */
    color: #e0e0e0;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
    /* 中屏设备调整 */
    .container {
        /* 缩小内边距：适应较小屏幕 */
        padding: 15px;
    }

    /* 表单垂直布局 */
    form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    
    /* 表格适配 */
    .package-table th,
    .package-table td {
        /* 宽度限制：50vw防止内容溢出 */
        max-width: 50vw;
        
        /* 缩小内边距：适应窄屏 */
        padding: 10px 8px;
        
        /* 缩小字号：提升可读性 */
        font-size: 0.9em;
    }

    /* 代码块优化 */
    pre {
        /* 缩小字号：适应移动端阅读 */
        font-size: 0.8em;
        
        /* 调整内边距：紧凑布局 */
        padding: 10px;
    }
}

/* 手机端优化 */
@media (max-width: 480px) {
    h1 {
        /* 缩小标题字号：适应窄屏 */
        font-size: 1.8em;
    }

    .card {
        /* 缩小卡片内边距：紧凑布局 */
        padding: 15px;
    }
}

/* ==================== 其他组件样式 ==================== */
/* 下载按钮 */
.download-btn {
    /* 品牌色延续：与主按钮一致 */
    background: rgba(10, 132, 255, 1);
    
    /* 文字颜色：深色背景使用浅色 */
    color: #121212;
    
    /* 内边距：8px垂直 15px水平 */
    padding: 8px 15px;
    
    /* 圆角设计：6px稍小于主按钮 */
    border-radius: 6px;
    
    /* 去除下划线：保持简洁 */
    text-decoration: none;
    
    /* Flex兼容方案：垂直居中 */
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    
    /* 过渡效果：背景色变化动画 */
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
    
    /* 禁止换行：保持按钮整洁 */
    white-space: nowrap;
}

/* 错误提示框 */
.error {
    /* 警示色：粉红突出错误信息 */
    color: #cf6679;
    
    /* 内边距：15px保证内容可视 */
    padding: 15px;
    
    /* 背景色：深红底色强调警告 */
    background: #2d1e1e;
    
    /* 圆角设计：8px统一风格 */
    border-radius: 8px;
    
    /* 外边距：15px垂直间隔 */
    margin: 15px 0;
    
    /* 边界线：深红色边框加强警示 */
    border: 1px solid #5c3a3a;
}

/* 加载动画 */
.loader {
    /* 边框策略：4px深灰底色 */
    border: 4px solid #333333;
    
    /* 动态色：蓝色旋转指示进度 */
    border-top: 4px solid rgba(10, 132, 255, 1);
    
    /* 圆形：50%创建旋转动画容器 */
    border-radius: 50%;
    
    /* 尺寸：30px标准加载尺寸 */
    width: 30px;
    height: 30px;
    
    /* 动画：无限旋转效果 */
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    
    /* 居中显示：自动外边距居中 */
    margin: 20px auto;
    
    /* 默认隐藏：需要时显示 */
    display: none;
}


/* 搜索输入框 */
#packageSearch { 
    box-sizing: border-box; /* 新增 */
    
     /* 居中策略：现代浏览器居中方案 */
    margin: 0 auto;
    
    /* 宽度：100%填充容器 */
    width: 100%;
    
    /* 内边距：8px垂直 15px水平 */
    padding: 8px;
    
    /* 边框：1px深灰边框 */
    border: 1px solid #333333;
    
    /* 圆角：10px柔和边缘 */
    border-radius: 10px;
    
    /* 字号：14px适中显示 */
    font-size: 14px;
    
    /* 背景色：深灰底色 */
    background: #2d2d2d;
    
    /* 去除默认样式：iOS原生样式覆盖 */
    -webkit-appearance: none;
    
    /* 文字颜色：浅灰保持可读 */
    color: #e0e0e0;
}

/* 搜索框聚焦状态 */
#packageSearch:focus {
    /* 边框高亮：蓝色引导焦点 */
    border-color: rgba(10, 132, 255, 1);
    
    /* 去除默认轮廓 */
    outline: none;
    margin: 0 auto; /* 水平居中 */
}

/* 搜索提示信息 */
.search-info {
    /* 文字颜色：中灰降低视觉权重 */
    color: #9e9e9e;
    
    /* 字号：0.9em小于正文 */
    font-size: 0.9em;
    
    /* 上边距：8px分隔输入框 */
    margin-top: 8px;
}

/* ==================== 动画定义 ==================== */
/* iOS旋转动画 */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

/* 标准旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}