/* ============================================================
   🌈 渐变背景（浅色 / 深色模式自适应）
   追加到 index.css 末尾即可
   ============================================================ */

/* ----- 浅色模式渐变背景 ----- */
body {
    background: linear-gradient(145deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    background-attachment: fixed;
}

/* 容器保留纯白背景，内容区域清晰可读 */
.container {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.04);
}

/* ----- 深色模式渐变背景 ----- */
.dark-mode body {
    background: linear-gradient(145deg, #14181c 0%, #1a1f24 100%);
}

.dark-mode .container {
    background: rgba(30, 34, 40, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
}

/* ----- 可选：文章卡片悬浮时微光效果 ----- */
.article-card:hover {
    background: rgba(255, 255, 255, 0.4);
}
.dark-mode .article-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* 其他卡片悬浮微光 */
.stat-card:hover,
.link-card:hover,
.rss-item:hover {
    background: rgba(255, 255, 255, 0.3);
}
.dark-mode .stat-card:hover,
.dark-mode .link-card:hover,
.dark-mode .rss-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* ----- 移动端适配 ----- */
@media (max-width: 768px) {
    body {
        background: linear-gradient(160deg, #f0f2f5 0%, #e4e8ed 100%);
        background-attachment: fixed;
    }
    .container {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .dark-mode body {
        background: linear-gradient(160deg, #12161a 0%, #181c22 100%);
    }
    .dark-mode .container {
        background: rgba(26, 30, 36, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* 全局图片兜底，修复历史旧文章图片溢出 */
article img {
    max-width: 100%;
    height: auto !important;
    display:block;
    border-radius:4px;
}
article img:not([class]){
    max-width:100%;
    height:auto;
}