/* Dock导航栏样式 - 优化版 */
.dock-nav {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 800px; /* 增加最大宽度以适配电脑 */
    background-color: rgba(0, 0, 0, 0.2); /* 透明度调整为20% */
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px); /* Safari支持 */
    border: 1px solid rgba(84, 84, 88, 0.35);
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    padding: 12px 0; /* 稍微增加内边距 */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); /* 增强阴影效果 */
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* 平滑过渡效果 */
    will-change: transform, opacity; /* 提示浏览器优化动画 */
}

/* 当显示详情页面时隐藏dock栏 */
body.sheet-open .dock-nav {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px); /* 下移效果 */
}

.dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: rgba(235, 235, 245, 0.6); /* 未选中时的颜色 */
    font-size: 12px;
    transition: all 0.25s ease;
    padding: 6px 12px;
    position: relative; /* 为徽章定位 */
    cursor: pointer;
    will-change: transform, opacity; /* 提示浏览器优化动画 */
    transform: translateZ(0); /* 启用硬件加速 */
}

.dock-item:hover {
    color: rgba(235, 235, 245, 0.8); /* 悬停时颜色变亮 */
    transform: scale(1.05); /* 悬停时轻微放大 */
}

.dock-item:active {
    transform: scale(0.95); /* 点击时缩小效果 */
    transition: transform 0.1s ease; /* 更快的点击反馈 */
}

.dock-item.active {
    color: #2979ff; /* 更鲜艳的蓝色 */
    font-weight: bold; /* 加粗显示当前页面 */
}

.dock-icon {
    margin-bottom: 8px; /* 增加间距 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dock-icon svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 为底部dock腾出空间 */
.footer {
    margin-bottom: 70px;
}
    
:root {
    /* 颜色变量 - 线性渐变变体 */
    --linear-blue: #b8b8b834; /* 主蓝色 */
    --linear-blue-dark: #07070775; /* 深蓝色 */
    --linear-green: #30D158; /* 绿色 */
    --linear-red: #FF375F; /* 红色 */
    --linear-red-dark: #E5354E; /* 深红色 */
    --linear-gray: #8E8E93; /* 灰色1 */
    --linear-gray2: #636366; /* 灰色2 */
    --linear-gray3: #48484A; /* 灰色3 */
    --linear-gray4: #3A3A3C; /* 灰色4 */
    --linear-gray5: #1f1fbb; /* 灰色5 */
    --linear-gray6: #1C1C1E; /* 灰色6 */
    
    /* 文本颜色 */
    --text-primary: #ffffffc5; /* 主文本色 */
    --text-secondary: rgba(235, 235, 245, 0.9); /* 次要文本（90%透明度） */
    --text-tertiary: rgba(235, 235, 245, 0.6); /* 三级文本（60%透明度） */
    --text-quaternary: rgba(255, 255, 255, 0.534); /* 四级文本（30%透明度） */
    
    /* 背景颜色 */
    --bg-primary: #00000093; /* 主背景色 */
    --bg-secondary: #0000004d; /* 次要背景 */
    --bg-tertiary: #0000006e; /* 三级背景 */
    
    /* 分隔线 */
    --separator: rgba(84, 84, 88, 0.6); /* 半透明分隔线 */
    --separator-opaque: #38383A; /* 不透明分隔线 */
    
    /* 圆角尺寸 */
    --radius-small: 4px; /* 小圆角 */
    --radius-medium: 8px; /* 中等圆角 */
    --radius-large: 12px; /* 大圆角 */
    --radius-xl: 16px; /* 超大圆角 */
    
    /* 间距系统 */
    --spacing-2: 2px; /* 2px间距 */
    --spacing-4: 4px; /* 4px间距 */
    --spacing-8: 8px; /* 8px间距 */
    --spacing-12: 12px; /* 12px间距 */
    --spacing-16: 7px; /* 16px间距 */
    --spacing-20: 20px; /* 20px间距 */
    --spacing-24: 24px; /* 24px间距 */
    --spacing-32: 32px; /* 32px间距 */
    --spacing-40: 40px; /* 40px间距 */
    --spacing-48: 48px; /* 48px间距 */
    --spacing-64: 64px; /* 64px间距 */
    
    /* 阴影效果 */
    --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.3); /* 小阴影 */
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.3); /* 中等阴影 */
    
    /* 动画曲线 */
    --timing-function: cubic-bezier(0.2, 0, 0, 1); /* 自定义缓动函数 */
    
    /* 背景模糊控制 */
    --bg-blur-amount: 0px; /* 模糊程度 */
    --bg-brightness: 1; /* 背景亮度 */
    --bg-overlay-opacity: 0.8; /* 叠加层透明度 */
    --bg-blur-saturation: 10%; /* 模糊饱和度 */
}

/* ========== 全局重置 ========== */
/* 所有元素通用样式 */
* {
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    box-sizing: border-box; /* 盒模型计算方式 */
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

/* ========== 基础页面样式 ========== */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; /* 字体栈 */
    background-color: var(--bg-primary); /* 使用变量设置背景色 */
    color: var(--text-primary); /* 主文本颜色 */
    line-height: 1.5; /* 行高 */
    -webkit-font-smoothing: antialiased; /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale; /* Mac字体平滑 */
    padding-bottom: env(safe-area-inset-bottom); /* 适配iPhone X等设备的底部安全区域 */
}

/* 背景层伪元素 */
body::before {
    content: ''; /* 必须属性 */
    position: fixed; /* 固定定位 */
    top: 0;
    left: 0;
    width: 100%; /* 全宽 */
    height: 100%; /* 全高 */
    background: url('https://pp.panpan.plus/index.html') center/cover no-repeat; /* 背景图设置 */
    filter: blur(var(--bg-blur-amount)) brightness(var(--bg-brightness)); /* 模糊和亮度滤镜 */
    z-index: -2; /* 置于底层 */
}

/* ========== 通用容器样式 ========== */
.nav-bar.content-container {
    background-color: rgba(0, 0, 0, var(--bg-overlay-opacity)); /* 半透明黑色背景 */
    backdrop-filter: saturate(var(--bg-blur-saturation)) blur(20px); /* 背景模糊效果 */
 
    border-radius: var(--radius-large); /* 大圆角 */
    border: 1px solid var(--separator); /* 边框 */
    margin-bottom: var(--spacing-16); /* 底部间距 */
}

/* ========== 导航栏样式 ========== */
.nav-bar {
    position: sticky; /* 粘性定位 */
    top: 0; /* 顶部固定 */
    z-index: 100; /* 确保在最上层 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
 
    border: 1px solid var(--separator); /* 全边框 */
    border-radius: var(--radius-large); /* 大圆角 */
    box-shadow: var(--shadow-small); /* 小阴影 */
}



.nav-logo {
    font-size: 21px; /* 字体大小 */
    font-weight: 700; /* 加粗 */
    color: var(--linear-blue); /* 使用蓝色变量 */
    text-decoration: none; /* 去除下划线 */
    letter-spacing: -0.5px; /* 字符间距 */
    margin-right: var(--spacing-16); /* 右外边距 */
}

/* 搜索容器 */
.nav-search-container {
    flex: 1; /* 占据剩余空间 */
    max-width: 680px; /* 最大宽度 */
    position: relative; /* 相对定位 */
}

/* 搜索输入框 */
.search-input {
    width: 100%; /* 100%宽度 */
    height: 40px; /* 固定高度 */
    padding: 0 var(--spacing-40) 0 var(--spacing-40); /* 左右内边距 */
    border-radius: var(--radius-medium); /* 中等圆角 */
    border: none; /* 无边框 */
    background-color: #0505052a;背景色 */
    font-size: 16px; /* 字体大小 */
    color: var(--text-primary); /* 文本颜色 */
    transition: all 0.2s var(--timing-function); /* 过渡动画 */
}

/* 搜索框聚焦状态 */
.search-input:focus {
    outline: none; /* 去除轮廓线 */
    background-color: var(--bg-tertiary); /* 保持背景色 */
    box-shadow: 0 0 0 2px var(--linear-blue); /* 蓝色发光效果 */
}

/* 搜索图标 */
.search-icon {
    position: absolute; /* 绝对定位 */
    left: var(--spacing-12); /* 左侧定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* Y轴偏移 */
    width: 20px; /* 固定宽度 */
    height: 20px; /* 固定高度 */
    color: var(--linear-gray); /* 灰色图标 */
}

/* ========== 主容器 ========== */
.app-container {
    max-width: 1070px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: var(--spacing-16); /* 内边距 */
}

.main-content {
    padding: var(--spacing-0) 0 var(--spacing-64); /* 上下内边距 */
}

/* ========== 今日推荐区域 ========== */
.today-section {
    margin-bottom: var(--spacing-38); /* 底部外边距 */
}

/* 区域标题样式 */
.section-header {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* 两端对齐 */
    margin: var(--spacing-0); /* 外边距清零 */
    position: relative; /* 相对定位 */
    padding-bottom: var(--spacing-0); /* 底部内边距 */
}

.section-title {
    font-size: 28px; /* 大字体 */
    font-weight: 700; /* 加粗 */
    letter-spacing: -0.02em; /* 字符间距 */
    color: var(--text-primary); /* 主文本色 */
}

.section-subtitle {
    font-size: 16px; /* 中等字体 */
    font-weight: 500; /* 中等粗细 */
    color: var(--text-tertiary); /* 三级文本色 */
    margin-top: var(--spacing-4); /* 顶部外边距 */
}

/* 区域头部内容 */
.section-header-content {
    text-align: right; /* 右对齐 */
    max-width: 60%; /* 最大宽度 */
    margin: auto; /* 自动外边距 */
}

/* 应用计数 */
.app-count {
    font-size: 14px; /* 小字体 */
    color: var(--text-tertiary); /* 三级文本色 */
    margin-top: var(--spacing-8); /* 顶部外边距 */
}

/* ========== 通知区域 ========== */
.notice-section {
    margin-bottom: var(--spacing-32); /* 底部外边距 */
}

/* 通知卡片基础样式 */
.notice-card {
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-radius: var(--radius-large); /* 大圆角 */
    padding: var(--spacing-16); /* 内边距 */
    margin-bottom: var(--spacing-16); /* 底部外边距 */
    border: 1px solid var(--separator); /* 边框 */
}

/* 主要通知卡片 */
.notice-card.primary {
    background-color: rgba(94, 92, 230, 0.1); /* 半透明蓝色背景 */
    border-color: rgba(94, 92, 230, 0.2); /* 半透明蓝色边框 */
}

/* 警告通知卡片 */
.notice-card.warning {
    background-color: rgba(255, 55, 95, 0.1); /* 半透明红色背景 */
    border-color: rgba(255, 55, 95, 0.2); /* 半透明红色边框 */
}

.notice-title {
    font-size: 16px; /* 中等字体 */
    font-weight: 600; /* 半加粗 */
    color: var(--linear-blue); /* 蓝色文本 */
    margin-bottom: var(--spacing-8); /* 底部外边距 */
}

/* 警告通知标题 */
.notice-card.warning .notice-title {
    color: var(--linear-red); /* 红色文本 */
}

.notice-text {
    font-size: 14px; /* 小字体 */
    color: var(--text-secondary); /* 次要文本色 */
    line-height: 1.5; /* 行高 */
}

/* ========== 分类区域 ========== */
.category-section {
    margin-bottom: var(--spacing-24); /* 底部外边距 */
    position: relative; /* 相对定位 */
}

/* 可滚动分类容器 */
.category-scroll {
    overflow-x: auto; /* 水平滚动 */
    white-space: nowrap; /* 禁止换行 */
    -webkit-overflow-scrolling: touch; /* iOS滚动平滑 */
    scrollbar-width: none; /* 隐藏滚动条（Firefox） */
    padding: var(--spacing-4) 0; /* 上下内边距 */
    margin: 0 -16px; /* 负外边距 */
    padding: 0 16px; /* 左右内边距 */
}

/* 隐藏Webkit滚动条 */
.category-scroll::-webkit-scrollbar {
    display: none;
}

/* 分类标签容器 */
.category-tabs {
    display: inline-flex; /* 行内弹性布局 */
    gap: var(--spacing-8); /* 标签间距 */
}

/* 单个分类标签 */
.category-tab {
    padding: var(--spacing-8) var(--spacing-16); /* 内边距 */
    font-size: 14px; /* 小字体 */
    font-weight: 600; /* 半加粗 */
    color: var(--text-primary); /* 主文本色 */
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    border-radius: var(--radius-medium); /* 中等圆角 */
    cursor: pointer; /* 手型指针 */
    transition: all 0.2s var(--timing-function); /* 过渡动画 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
}

/* 激活状态的分类标签 */
.category-tab.active {
    background-color: var(--linear-blue); /* 蓝色背景 */
    color: white; /* 白色文本 */
}

/* ========== 应用网格 ========== */
.apps-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 自适应列 */
    gap: var(--spacing-16); /* 网格间隙 */
}

/* 应用卡片 */
.app-card {
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-radius: var(--radius-large); /* 大圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: all 0.3s var(--timing-function); /* 过渡动画 */
    box-shadow: var(--shadow-small); /* 小阴影 */
    border: 1px solid var(--separator); /* 边框 */
}

/* 卡片悬停效果 */
.app-card:hover {
    transform: translateY(-4px); /* 上移效果 */
    box-shadow: var(--shadow-medium); /* 中等阴影 */
    border-color: var(--linear-blue); /* 蓝色边框 */
}

/* 应用卡片头部 */
.app-header {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: var(--spacing-16); /* 内边距 */
    border-bottom: 1px solid var(--separator); /* 底部边框 */
}

/* 应用图标 */
.app-icon {
    width: 60px; /* 固定宽度 */
    height: 60px; /* 固定高度 */
    border-radius: var(--radius-medium); /* 中等圆角 */
    object-fit: cover; /* 图片填充方式 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 小阴影 */
    margin-right: var(--spacing-16); /* 右外边距 */
}

/* 应用标题区域 */
.app-title-area {
    flex: 1; /* 占据剩余空间 */
    min-width: 0; /* 防止内容溢出 */
}

/* 应用名称 */
.app-name {
    font-size: 16px; /* 中等字体 */
    font-weight: 600; /* 半加粗 */
    margin-bottom: var(--spacing-4); /* 底部外边距 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
    color: var(--text-primary); /* 主文本色 */
}

/* 应用元信息 */
.app-meta {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 允许换行 */
    gap: var(--spacing-4); /* 元素间距 */
    font-size: 13px; /* 小字体 */
    color: var(--text-tertiary); /* 三级文本色 */
}

/* 应用元信息2（不换行版本） */
.app-meta2 {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    flex-wrap: nowrap; /* 禁止换行 */
    gap: var(--spacing-4); /* 元素间距 */
    font-size: 13px; /* 小字体 */
    color: var(--text-tertiary); /* 三级文本色 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/* 获取按钮 */
.get-button {
    min-width: 70px; /* 最小宽度 */
    height: 32px; /* 固定高度 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    background-color: var(--linear-blue); /* 蓝色背景 */
    color: white; /* 白色文本 */
    border: none; /* 无边框 */
    border-radius: var(--radius-medium); /* 中等圆角 */
    font-size: 14px; /* 小字体 */
    font-weight: 600; /* 半加粗 */
    cursor: pointer; /* 手型指针 */
    transition: all 0.2s var(--timing-function); /* 过渡动画 */
    margin-left: var(--spacing-16); /* 左外边距 */
}

/* 获取按钮悬停状态 */
.get-button:hover {
    background-color: var(--linear-blue-dark); /* 深蓝色背景 */
}

/* 应用卡片内容区域 */
.app-body {
    padding: var(--spacing-16); /* 内边距 */
}

/* 应用描述 */
.app-description {
    font-size: 14px; /* 小字体 */
    color: var(--text-secondary); /* 次要文本色 */
    display: -webkit-box; /* Webkit盒子模型 */
    -webkit-line-clamp: 3; /* 限制3行 */
    -webkit-box-orient: vertical; /* 垂直方向 */
    overflow: hidden; /* 隐藏溢出 */
    line-height: 1.5; /* 行高 */
    white-space: normal; /* 正常换行 */
    word-break: break-word; /* 单词断行 */
}

/* ========== 加载指示器 ========== */
.loading-indicator {
    text-align: center; /* 文本居中 */
    padding: var(--spacing-32) 0; /* 上下内边距 */
    color: var(--text-tertiary); /* 三级文本色 */
    font-size: 16px; /* 中等字体 */
    display: none; /* 默认隐藏 */
}

/* ========== 无结果提示 ========== */
.no-results {
    text-align: center; /* 文本居中 */
    padding: var(--spacing-48) var(--spacing-24); /* 内边距 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-radius: var(--radius-large); /* 大圆角 */
    border: 1px solid var(--separator); /* 边框 */
}

.no-results-title {
    font-size: 18px; /* 中等字体 */
    font-weight: 600; /* 半加粗 */
    margin-bottom: var(--spacing-8); /* 底部外边距 */
    color: var(--text-primary); /* 主文本色 */
}

.no-results-text {
    font-size: 16px; /* 中等字体 */
    color: var(--text-tertiary); /* 三级文本色 */
}

/* 全宽网格项 */
.grid-full-width {
    grid-column: 1 / -1; /* 跨越所有列 */
    width: 100%; /* 100%宽度 */
}

/* 没有更多应用的提示 */
.no-more-apps {
    margin: var(--spacing-32) 0; /* 上下外边距 */
    text-align: center; /* 文本居中 */
}

.no-more-apps .no-results {
    background-color: transparent; /* 透明背景 */
    border: none; /* 无边框 */
    padding: var(--spacing-16); /* 内边距 */
}

.no-more-apps .no-results-text {
    color: var(--text-tertiary); /* 三级文本色 */
    font-size: 14px; /* 小字体 */
    position: relative; /* 相对定位 */
    display: inline-block; /* 行内块元素 */
    padding: 0 var(--spacing-16); /* 左右内边距 */
}

/* 添加装饰线 */
.no-more-apps .no-results-text::before,
.no-more-apps .no-results-text::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    width: 50px; /* 固定宽度 */
    height: 1px; /* 高度 */
    background-color: var(--separator); /* 分隔线颜色 */
    border-radius: 3px; /* 圆角 */
}

.no-more-apps .no-results-text::before {
    left: -40px; /* 左侧定位 */
}

.no-more-apps .no-results-text::after {
    right: -40px; /* 右侧定位 */
}

/* ========== 页脚 ========== */
.footer {
    padding: var(--spacing-32) 0; /* 上下内边距 */
    border-top: 1px solid var(--separator); /* 顶部边框 */
    text-align: center; /* 文本居中 */
    color: var(--text-tertiary); /* 三级文本色 */
    font-size: 12px; /* 小字体 */
}

.footer-links {
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    gap: var(--spacing-16); /* 元素间距 */
    margin-bottom: var(--spacing-16); /* 底部外边距 */
}

.footer-link {
    color: var(--linear-blue); /* 蓝色文本 */
    text-decoration: none; /* 无下划线 */
}

.footer-link:hover {
    text-decoration: underline; /* 悬停下划线 */
}

.copyright {
    color: var(--text-quaternary); /* 四级文本色 */
}

/* ========== 统计卡片 ========== */
/* 统计卡片容器样式 */
.stats-container {
    margin-top: -30px;     /* 上边距 */
    margin-bottom: 5px;  /* 下边距 */
    border-radius: var(--radius-large); /* 大圆角 */
   
    border: 1px solid var(--separator); /* 边框 */
    
}

/* 统计卡片整体样式 */
.stats-card {
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-radius: 8px;  /* 圆角8像素 */
    padding: 16px;  /* 内边距16像素 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);  /* 轻微阴影效果 */
    display: flex;  /* 使用弹性布局 */
    justify-content: space-around;  /* 子元素均匀分布 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 16px;  /* 子元素间距16像素 */
    
    margin-top: 27px;

}

/* 每个统计项的样式 */
.stat-item {
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中 */
    gap: 8px;  /* 数值和标签间距8像素 */
    padding: 0 12px;  /* 左右内边距12像素 */
    position: relative;  /* 相对定位用于分隔线 */
}

/* 除最后一项外，添加右侧分隔线 */
.stat-item:not(:last-child)::after {
    content: "";  /* 伪元素内容为空 */
    position: absolute;  /* 绝对定位 */
    right: 0;  /* 靠右 */
    top: 50%;  /* 垂直居中 */
    transform: translateY(-50%);  /* 向上移动自身高度50%实现完美居中 */
    height: 60%;  /* 高度为父元素的60% */
    width: 1px;  /* 宽度1像素 */
    background: #eaeaea;  /* 浅灰色分隔线 */
}

/* 统计数值样式 */
.stat-value {
    font-size: 20px;  /* 字体大小20像素 */
    font-weight: bold;  /* 加粗显示 */
    color: #2e8dfa;  /* 深灰色文字 */
}

/* 统计标签样式 */
.stat-label {
    font-size: 14px;  /* 字体大小14像素 */
    color: #cacaca;  /* 灰色文字 */
    white-space: nowrap;  /* 防止文字换行 */
}


/* 统计标签 */
.stat-label {
    font-size: 14px; /* 小字体 */
    color: var(--text-secondary); /* 次要文本色 */
    font-weight: 500; /* 中等粗细 */
    letter-spacing: -0.01em; /* 字符间距 */
}

/* ========== 快捷操作区域 ========== */
.quick-actions {
    margin: var(--spacing-8) 0; /* 上下外边距 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-radius: var(--radius-xl); /* 超大圆角 */
    padding: var(--spacing-16); /* 内边距 */
    box-shadow: var(--shadow-small); /* 小阴影 */
    border: 1px solid var(--separator); /* 边框 */
}

./* 快速操作区域样式 */
.quick-actions {
    background-color: var(--bg-tertiary); /* 三级背景色 */
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

/* 行布局 - 使用 Flex 并允许换行 */
.quick-actions .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* 列间距 */
}

/* 默认移动端样式（双列） */
.quick-actions .col-6 {
    flex: 0 0 calc(50% - 0.375rem); /* 双列，考虑 gap 间距 */
    max-width: calc(50% - 0.375rem);
}

/* 电脑端适配（三列） */
@media (min-width: 768px) {
    .quick-actions .col-6 {
        flex: 0 0 calc(33.333% - 0.5rem); /* 三列布局 */
        max-width: calc(33.333% - 0.5rem);
    }
}

/* 超宽屏幕（四列） */
@media (min-width: 1200px) {
    .quick-actions .col-6 {
        flex: 0 0 calc(25% - 0.6rem); /* 四列布局 */
        max-width: calc(25% - 0.6rem);
    }
}

/* 按钮样式 */
.quick-actions .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    height: 100%; /* 确保高度一致 */
}

/* 按钮悬停效果 */
.quick-actions .btn-action:hover {
    background-color: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 按钮图标 */
.quick-actions .btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* 按钮文字 */
.quick-actions .btn-action span {
    font-size: 14px;
    white-space: nowrap;
}
/* ========== 分隔线 ========== */
.hr_gradient2 {
    width:100%; /* 100%宽度 */
    margin:0 auto; /* 水平居中 */
    border: 0; /* 无边框 */
    height: 1px; /* 高度 */
    background-image: linear-gradient(to right, transparent, var(--separator) 50%, transparent); /* 渐变分隔线 */
    opacity: 0.8; /* 透明度 */
    margin-top: 10px; /* 顶部外边距 */
    margin-bottom: 10px; /* 底部外边距 */
}

/* ========== 底部弹出层 ========== */
.sheet-modal {
    position: fixed; /* 固定定位 */
    left: 0; /* 左侧定位 */
    right: 0; /* 右侧定位 */
    bottom: 0; /* 底部定位 */
    width: 100%; /* 100%宽度 */
    height: 100%; /* 100%高度 */
    z-index: 1000; /* 最上层 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    justify-content: flex-end; /* 底部对齐 */
    visibility: hidden; /* 默认隐藏 */
    pointer-events: none; /* 禁止交互 */
}

/* 激活状态 */
.sheet-modal.active {
    visibility: visible; /* 显示 */
    pointer-events: auto; /* 允许交互 */
}

/* 遮罩层 */
.sheet-modal-overlay {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部定位 */
    left: 0; /* 左侧定位 */
    width: 100%; /* 100%宽度 */
    height: 100%; /* 100%高度 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
    opacity: 0; /* 初始透明 */
    transition: opacity 0.3s var(--timing-function); /* 透明度过渡 */
}

/* 激活时显示遮罩 */
.sheet-modal.active .sheet-modal-overlay {
    opacity: 1; /* 完全不透明 */
}

/* 弹出层容器 */
.sheet-modal-container {
    position: relative; /* 相对定位 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
    border-top-left-radius: var(--radius-xl); /* 左上超大圆角 */
    border-top-right-radius: var(--radius-xl); /* 右上超大圆角 */
    overflow: hidden; /* 隐藏溢出 */
    transform: translateY(100%); /* 初始位置在屏幕外 */
    transition: transform 0.3s var(--timing-function); /* 变换过渡 */
    max-height: 85vh; /* 最大高度 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    border: 1px solid var(--separator); /* 边框 */
}

/* 激活时滑入视图 */
.sheet-modal.active .sheet-modal-container {
    transform: translateY(0); /* 回到原位 */
}

/* 顶部拖拽手柄区域 */
.sheet-modal-handle-wrapper {
    padding: var(--spacing-8) 0; /* 上下内边距 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    background-color: var(--bg-tertiary); /* 三级背景色 */
}

/* 拖拽手柄 */
.sheet-modal-handle {
    width: 36px; /* 宽度 */
    height: 5px; /* 高度 */
    border-radius: 2.5px; /* 圆角 */
    background-color: var(--separator); /* 分隔线颜色 */
}

/* 弹出层内容 */
.sheet-modal-content {
    padding: 0 var(--spacing-20) var(--spacing-32) var(--spacing-20); /* 内边距 */
    overflow-y: auto; /* 垂直滚动 */
    -webkit-overflow-scrolling: touch; /* iOS滚动平滑 */
}

/* 应用头部 */
.sheet-app-header {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    padding: var(--spacing-16) 0; /* 上下内边距 */
    border-bottom: 1px solid var(--separator); /* 底部边框 */
}

/* 应用图标样式 */
.sheet-app-icon {
    width: 64px; /* 宽度64像素 */
    height: 64px; /* 高度64像素 */
    border-radius: var(--radius-medium); /* 使用预设的中等圆角半径 */
    object-fit: cover; /* 图片填充方式：覆盖 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
    margin-right: var(--spacing-16); /* 右侧间距使用预设的16单位 */
}

/* 应用标题区域样式 */
.sheet-app-title-area {
    flex: 1; /* 弹性布局，占据剩余空间 */
    min-width: 0; /* 最小宽度为0，防止内容溢出 */
}

/* 应用名称样式 */
.sheet-app-name {
    font-size: 20px; /* 字体大小20像素 */
    font-weight: 700; /* 加粗字体 */
    margin-bottom: var(--spacing-4); /* 底部间距使用预设的4单位 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 溢出内容隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略号 */
    color: var(--text-primary); /* 使用预设的主要文本颜色 */
}

/* 应用元信息样式（第一行） */
.sheet-app-meta {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
    gap: var(--spacing-4); /* 子元素间距使用预设的4单位 */
    font-size: 14px; /* 字体大小14像素 */
    color: var(--text-tertiary); /* 使用预设的第三级文本颜色 */
}

/* 应用元信息样式（第二行） */
.sheet-app-meta2 {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    flex-wrap: nowrap; /* 禁止换行 */
    gap: var(--spacing-4); /* 子元素间距使用预设的4单位 */
    font-size: 14px; /* 字体大小14像素 */
    color: var(--text-tertiary); /* 使用预设的第三级文本颜色 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 溢出内容隐藏 */
    text-overflow: ellipsis; /* 文本溢出显示省略号 */
}

/* 应用主体内容样式 */
.sheet-app-body {
    padding: var(--spacing-16) 0; /* 上下内边距16单位，左右0 */
}

/* 应用描述文本样式 */
.sheet-app-description {
    font-size: 16px; /* 字体大小16像素 */
    color: var(--text-secondary); /* 使用预设的次要文本颜色 */
    line-height: 1.5; /* 行高1.5倍 */
    white-space: normal; /* 正常换行 */
    word-break: break-word; /* 单词过长时断开换行 */
}

/* 下载按钮样式 */
.sheet-download-button {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    min-width: 100px; /* 最小宽度100像素 */
    height: 40px; /* 高度40像素 */
    background-color: var(--linear-blue); /* 使用预设的蓝色渐变背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: var(--radius-medium); /* 使用预设的中等圆角半径 */
    font-size: 16px; /* 字体大小16像素 */
    font-weight: 600; /* 半粗字体 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    transition: background-color 0.2s var(--timing-function); /* 背景色过渡动画 */
    text-decoration: none; /* 无文本装饰 */
    margin-left: var(--spacing-16); /* 左侧间距使用预设的16单位 */
}

/* 下载按钮悬停状态 */
.sheet-download-button:hover {
    background-color: var(--linear-blue-dark); /* 使用预设的深蓝色渐变背景 */
}

/* 取消按钮样式 */
.sheet-cancel-button {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    height: 56px; /* 高度56像素 */
    background-color: var(--bg-secondary); /* 使用预设的次级背景色 */
    color: var(--text-primary); /* 使用预设的主要文本颜色 */
    border: none; /* 无边框 */
    border-radius: var(--radius-medium); /* 使用预设的中等圆角半径 */
    font-size: 16px; /* 字体大小16像素 */
    font-weight: 600; /* 半粗字体 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    transition: background-color 0.2s var(--timing-function); /* 背景色过渡动画 */
    margin-top: var(--spacing-16); /* 顶部间距使用预设的16单位 */
}

/* 取消按钮悬停状态 */
.sheet-cancel-button:hover {
    background-color: var(--bg-tertiary); /* 使用预设的第三级背景色 */
}

/* 当sheet打开时的body样式 */
body.sheet-open {
    overflow: hidden; /* 隐藏滚动条 */
}

/* 平板设备响应式设计（最大宽度834px） */


    /* 导航logo样式调整 */
    .nav-logo {
        text-align: center; /* 文本居中 */
        margin-right: 0; /* 右侧边距0 */
        margin-bottom: var(--spacing-12); /* 底部边距12单位 */
    }



    /* 区域标题样式调整 */
    .section-title {
        font-size: 24px; /* 字体大小24像素 */
    }
    
    /* 区域头部内容样式调整 */
    .section-header-content {
        max-width: 100%; /* 最大宽度100% */
        text-align: center; /* 文本居中 */
    }
    
    /* 统计卡片网格布局调整 */
    .stats-grid {
        flex-wrap: wrap; /* 允许换行 */
    }
    
    /* 统计卡片样式调整 */
    .stat-card {
        flex: 0 0 calc(50% - var(--spacing-8)); /* 每行显示2个卡片 */
        margin-bottom: var(--spacing-16); /* 底部边距16单位 */
    }
    
    /* 操作网格布局调整 */
    .actions-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3列布局 */
    }
    
    /* 快速操作区域样式调整 */
    .quick-actions {
        padding: var(--spacing-16); /* 内边距16单位 */
    }
}

/* 手机设备响应式设计（最大宽度428px） */
@media (max-width: 428px) {
    /* 应用容器样式调整 */
    .app-container {
        padding: 0 var(--spacing-12); /* 左右内边距12单位，上下0 */
    }

    /* 区域标题样式调整 */
    .section-title {
        font-size: 22px; /* 字体大小22像素 */
    }

    /* 区域副标题样式调整 */
    .section-subtitle {
        font-size: 15px; /* 字体大小15像素 */
    }

    /* 应用头部样式调整 */
    .app-header {
        padding: var(--spacing-12); /* 内边距12单位 */
    }

    /* 应用图标样式调整 */
    .app-icon {
        width: 56px; /* 宽度56像素 */
        height: 56px; /* 高度56像素 */
    }

    /* 应用主体样式调整 */
    .app-body {
        padding: var(--spacing-12); /* 内边距12单位 */
    }

    /* 获取按钮样式调整 */
    .get-button {
        min-width: 64px; /* 最小宽度64像素 */
        height: 32px; /* 高度32像素 */
        font-size: 14px; /* 字体大小14像素 */
    }
    
    /* 统计卡片样式调整 */
    .stat-card {
        flex: 0 0 calc(50% - var(--spacing-4)); /* 每行显示2个卡片 */
        margin-bottom: var(--spacing-12); /* 底部边距12单位 */
        min-width: 0; /* 最小宽度0 */
        padding: var(--spacing-8); /* 内边距8单位 */
    }
    
    /* 统计值样式调整 */
    .stat-value {
        font-size: 18px; /* 字体大小18像素 */
    }
    
    /* 统计标签样式调整 */
    .stat-label {
        font-size: 10px; /* 字体大小10像素 */
    }
    
    /* 操作网格布局调整 */
    .actions-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3列布局 */
        gap: var(--spacing-8) !important; /* 子元素间距8单位 */
    }
    
    /* 操作图标容器样式调整 */
    .action-icon-wrapper {
        width: 40px !important; /* 宽度40像素 */
        height: 40px !important; /* 高度40像素 */
    }
    
    /* 操作标签样式调整 */
    .action-label {
        font-size: 11px !important; /* 字体大小11像素 */
    }
    
    /* 快速操作标题样式调整 */
    .quick-actions-title {
        font-size: 15px; /* 字体大小15像素 */
    }
}

/* 小屏幕手机响应式设计（最大宽度360px） */
@media (max-width: 360px) {
    /* 统计网格布局调整 */
    .stats-grid {
        gap: var(--spacing-4); /* 子元素间距4单位 */
    }
    
    /* 统计卡片样式调整 */
    .stat-card {
        padding: var(--spacing-6) var(--spacing-4); /* 上下内边距6单位，左右4单位 */
    }
    
    /* 操作网格布局调整 */
    .actions-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3列布局 */
        gap: var(--spacing-4) !important; /* 子元素间距4单位 */
    }
    
    /* 操作图标容器样式调整 */
    .action-icon-wrapper {
        width: 36px !important; /* 宽度36像素 */
        height: 36px !important; /* 高度36像素 */
    }
    
    /* 操作标签样式调整 */
    .action-label {
        font-size: 10px !important; /* 字体大小10像素 */
    }
}