:root {
    /* 在这里修改URL更换背景 */
    --bg-url: url('https://cdn.luogu.com.cn/upload/image_hosting/njyjdbt7.png');
 
    /* 背景效果控制变量 */
    --bg-overlay: rgba(0, 0, 0, 0);
    --bg-blur: 0px;
    --bg-brightness: 0.99;
    --bg-scale: 1;
}

/* 2. 创建背景层 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 核心：使用CSS变量作为背景图 */
    background-image: var(--bg-url);
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -2;
    
}

/* 3. 黑色遮罩层 */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-overlay);
    z-index: -1;
    transition: background-color 0.5s ease;
}

/* 4. 确保内容在背景上方 */
#wrapper, #main, #page-header, #nav_next_page {
    position: relative;
    z-index: 1;
}

/* 5. 背景状态指示器（可视化当前使用的背景） */
.blog-background-info {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #4fc3f7;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid rgba(79, 195, 247, 0.3);
    z-index: 999;
    opacity: 0.7;
    transition: opacity 0.3s;
    pointer-events: none;
    max-width: 200px;
    word-break: break-all;
}

.blog-background-info:hover {
    opacity: 1;
}

/* 6. 背景加载动画 */