/* 主页特有样式 (原 data.js 中 home 部分对应的样式) */

/* 下载区域样式 */
.download-section {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
    gap: 0.8rem; /* 调整垂直间距 */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-icon-svg {
    width: 1.2rem;
    height: 1.2rem;
    filter: brightness(0) invert(1); /* 确保 SVG 变为白色 */
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(74, 144, 226, 0.3);
    background-color: #357abd;
}

/* 数据看板圆环样式 */
.stats-title {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.stats-glass-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* 均匀分布 */
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    border-radius: 12px;
    box-shadow: var(--glass-shadow);
}

.stats-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem; /* 增加间距 */
    width: 140px; /* 增加宽度以容纳更大的圆环 */
}

.circle-chart {
    width: 120px; /* 增大圆环尺寸 */
    height: 120px;
}

.circular-chart {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}

.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 2.5;
}

.circle-progress {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease 0s;
}

.circular-chart.blue-stroke .circle-progress {
    stroke: var(--primary-color);
}

.circular-chart.purple-stroke .circle-progress {
    stroke: #9b59b6; /* 紫色，区分打开次数 */
}

.circle-text {
    fill: #000000;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 6.7px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.stat-label {
    font-size: 0.85rem;
    color: #000000;
    text-align: center;
    white-space: nowrap;
}

.highlight-num {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
    padding: 0 0.2rem;
}

/* 适配暗黑模式 */
body.theme-dark .download-count { color: #ffffff; }
