/* =====================================================
   Reading OS
   Stats CSS

   统计视图 / 画册 / 热力图 / 日历 / 关于我
   （index.html 已 <link> 此文件，但项目中缺失，现补齐）
===================================================== */

/* ===============================
   统计子视图 Tab 切换栏
================================ */
.stats-tabs{
    display:flex;
    gap:10px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.stats-tab{
    height:42px;
    padding:0 20px;
    border-radius:30px;
    background:var(--card-color);
    border:1px solid var(--border-color);
    color:var(--sub-text);
    font-size:14px;
    transition:.25s;
}

.stats-tab:hover{
    color:var(--text-color);
    border-color:#bbb;
}

.stats-tab.active{
    background:var(--primary);
    color:var(--card-color);
    border-color:var(--primary);
    font-weight:600;
}

/* ===============================
   仪表盘：统计卡片网格
================================ */
.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-bottom:30px;
}

.stats-grid .stat-card{
    padding:24px 20px;
    background:var(--card-color);
    border:1px solid var(--border-color);
    border-radius:18px;
    text-align:center;
}

.stats-grid .stat-number{
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
}

.stats-grid .stat-label{
    color:var(--sub-text);
    font-size:13px;
}

/* ===============================
   占位图表区（趋势图 / 热力图 / 日历，均为「开发中」占位）
================================ */
.chart-placeholder,
.heatmap-placeholder,
.calendar-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:320px;
    background:var(--card-color);
    border:1px dashed var(--border-color);
    border-radius:20px;
    color:var(--sub-text);
    text-align:center;
    gap:8px;
}

.chart-icon,
.heatmap-icon,
.calendar-icon{
    font-size:44px;
    margin-bottom:10px;
}

.chart-placeholder p,
.heatmap-placeholder p,
.calendar-placeholder p{
    font-size:15px;
    color:var(--text-color);
}

.chart-placeholder small,
.heatmap-placeholder small,
.calendar-placeholder small{
    font-size:12px;
    color:var(--sub-text);
}

/* ===============================
   画册（封面墙）
================================ */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:18px;
}

.gallery-grid img{
    width:100%;
    aspect-ratio:3 / 4;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.gallery-grid img:hover{
    transform:translateY(-4px);
}

/* ===============================
   关于我
================================ */
.about-content{
    display:flex;
    justify-content:center;
    padding:40px 0;
}

.about-card{
    width:100%;
    max-width:420px;
    background:var(--card-color);
    border:1px solid var(--border-color);
    border-radius:22px;
    padding:45px 35px;
    text-align:center;
}

.about-avatar{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    border-radius:50%;
    background:var(--bg-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
}

.about-card h2{
    font-size:22px;
    margin-bottom:8px;
}

.about-card > p{
    color:var(--sub-text);
    font-size:14px;
    margin-bottom:25px;
}

.about-meta{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:25px;
    font-size:14px;
    color:var(--text-color);
}

.about-version{
    font-size:12px;
    color:var(--sub-text);
}

/* ===============================
   数据备份卡片
================================ */
.about-content{
    flex-direction:column;
    align-items:center;
    gap:20px;
}

.backup-card{
    text-align:left;
    padding:28px 30px;
}

.backup-card h3{
    font-size:17px;
    margin-bottom:10px;
}

.backup-note{
    font-size:13px;
    line-height:1.75;
    color:var(--sub-text);
    margin-bottom:18px;
}

.backup-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.backup-status{
    margin-top:12px;
    font-size:13px;
    color:var(--sub-text);
    min-height:18px;
}

/* 云同步卡片 */
.cloud-label{
    display:block;
    font-size:13px;
    color:var(--sub-text);
    margin:14px 0 6px;
}

.cloud-input{
    width:100%;
    height:40px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--border-color);
    background:var(--bg-color);
    color:var(--text-color);
    font-size:14px;
    outline:none;
    transition:border-color .2s;
}

.cloud-input:focus{
    border-color:var(--primary);
}

.cloud-check{
    display:flex;
    align-items:center;
    gap:8px;
    margin:16px 0 18px;
    font-size:13px;
    color:var(--sub-text);
    cursor:pointer;
}

.cloud-check input{
    width:16px;
    height:16px;
    accent-color:var(--primary);
}

/* ===============================
   响应式
================================ */
@media(max-width:1200px){
    .gallery-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:900px){
    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:600px){
    .stats-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats-tabs{
        overflow-x:auto;
        flex-wrap:nowrap;
    }
}